如何用 ECC 的 Plan Canvas 在浏览器中审阅并批准计划【免费下载链接】ECCThe agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.项目地址: https://gitcode.com/GitHub_Trending/ev/ECC在 ECC 中跑/plan后agent 会写出.claude/plans/{name}.plan.md然后停在一个硬性确认门槛上你必须打字回复 yes/proceed 它才会动手写代码。问题在于审阅时你面对的是一整墙终端 Markdown想改哪一段只能重新敲一遍。Plan Canvas 把这道确认门槛搬到浏览器里agent 把计划产物打开在一个仅回环地址127.0.0.1:4517的画布页面上你在页面上直接点击元素或选中文字加标注、在侧边栏和 agent 聊天最后点Approve plan或Request changes——这次点击就等同于对/plan的正式确认。前提条件你能运行 shell 命令并读取 stdout 的任意 agent 环境Claude Code、Codex、Cursor、Gemini、OpenCode、Copilot 都按同一套 CLIJSON 循环驱动本地存在一个待审阅的计划产物文件本地.md/.html不支持 diff 审阅、运行中的 web 应用和远程 URL。Plan Canvas 自 ECC 2.1.0 起提供。准备安装 CLI 并确认计划产物ecc-plan-canvas是可执行文件名有两条获取路径# 全局 npm 安装bin 会进入 PATH npm install -g ecc-universal插件安装场景下bin 不一定在 PATH 上文档给出的等价调用方式是node $CLAUDE_PLUGIN_ROOT/scripts/plan-canvas.js安装后不带参数运行一次ecc-plan-canvas会显示当前服务器状态与打开的会话列表可用来确认 CLI 可用。被审阅的产物是/plan写出的计划文件例如.claude/plans/notifications.plan.md。Markdown 计划会按 ECC 的计划模板渲染含表格、任务列表、代码块和 Mermaid 图.html产物则原样渲染并注入标注层。图片、CSS 等附属资源必须与产物文件放在同一目录并用相对路径引用。如果你在 Claude Code 中也可以直接输入/plan-canvas [path/to/artifact.plan.md]Codex 中是$plan-canvas触发同样的流程不传路径时它会解析为你最近修改的.claude/plans/*.plan.md再找不到就询问你要审阅什么。在浏览器中打开计划在项目根目录执行ecc-plan-canvas open .claude/plans/feature.plan.md该命令立即返回它在后台启动或复用一个 detached 的回环服务器127.0.0.1:4517该服务器被所有会话共享、按产物路径作为 key不需要你追踪 session id。浏览器窗口随即打开显示渲染后的计划。两个可选参数--no-open不弹出浏览器窗口仅登记会话--reopen只有当用户要求恢复一个已由其本人从浏览器关闭的会话时才使用。普通的open对已结束的会话会被拒绝服务器返回409 user-ended。注意编辑产物文件本身就是刷新手段——画布在文件保存时自动热加载不要靠重跑open来刷新页面。等待反馈await 与 JSON 结果ecc-plan-canvas await .claude/plans/feature.plan.mdawait会阻塞直到人类在画布上动作发消息、加标注、点裁决按钮、或结束会话然后把反馈以 JSON 打印到 stdout进度提示走 stderr保持 stdout 可解析。如果调用被中断了不要紧排队的反馈会持久化在磁盘上重跑await即可不会丢。文档示例——一次包含标注和裁决的反馈输出{ status: feedback, items: [ { kind: annotation, text: Split this into two phases, anchor: { selector: h2:nth-of-type(3), tag: h2, snippet: Phase 2: Migration } }, { kind: verdict, verdict: request-changes } ] }items里会出现三种kindchat自由消息。要在画布里回答而不是只在终端里回答annotation指向具体元素的反馈。anchor.selector是 CSS 选择器anchor.snippet是被指向的文本片段如果用户高亮了一段文字还会有anchor.textRange.textverdictapprove表示计划已确认——停止轮询、结束会话、开始实现request-changes表示需要修改产物画布会自动热加载你的修改然后继续等待下一轮反馈。await的返回状态还可能是ended会话结束、waiting--timeout-ms到期仅限测试/调试或missing文件不存在。保持监听是关键。反馈只有在你有一个真正挂起的await时才能送达。如果你的回合结束时没有任何东西在监听用户发来的消息会滞留在队列里从用户的视角看就是发了消息毫无反应。文档建议如果你的 harness 支持后台任务Claude Code 中即 Bash 调用加run_in_background: true把await作为后台任务运行它收到反馈就退出并交回 JSON循环因此跨回合存活。前台await也能用但只撑到 harness 限时为止。两个兜底机制# 列出排队了但没有监听者的反馈不确定是否漏听时检查 ecc-plan-canvas pending另外可选的stop:plan-canvas-pendinghook 会在画布反馈未送达时阻止你的回合结束并把消息交给你——如果你是在这个 hook 里读到反馈的说明你提前停止了监听。处理 Request changes改文件、在画布里回复、继续等待收到request-changes或标注后循环是修改产物文件 → 在画布聊天里回复 → 继续await。# 修改完 .plan.md 后先回复再等待一条命令同时做两件事 ecc-plan-canvas await .claude/plans/feature.plan.md --reply Split Phase 2 as requested. Take a look.--reply会在等待前把你的回复放进画布聊天面板。文档强调每条人类消息都应在画布中得到回复哪怕只有一句 On it, rewriting the risk table now.——聊天面板里沉默和画布坏了在观感上无法区分。修改耗时较长时用活动指示器保持聊天状态诚实# 显示agent is thinking...动画气泡修订超过一分钟时刷新一次 ecc-plan-canvas typing .claude/plans/feature.plan.md --state thinking # 回复落地前切换到agent is typing... ecc-plan-canvas typing .claude/plans/feature.plan.md --state typingawait把一批反馈交给你时会自动置为thinking--reply会清除它。两种状态都会自行过期agent 崩溃时指示器会退回到诚实的 queued而不是让用户永远盯着转圈。计划中如果是流程图、架构图、时序图、状态机或依赖图写成围栏的mermaid代码块而不是 ASCII 图画布会把它渲染成可被点击标注的主题化图表。Mermaid 从固定 CDN 加载离线时该块退化为显示源码审阅不会被阻塞气隔环境可通过ECC_PLAN_CANVAS_MERMAID_URL指向本地镜像。结束审阅批准或关闭verdict为approve时计划即视为确认停止轮询、结束会话、开始实现。结束由 agent 侧调用ecc-plan-canvas end .claude/plans/feature.plan.md完整的批准主路径长这样命令与输出取自 skill 文档的示例ecc-plan-canvas open .claude/plans/notifications.plan.md ecc-plan-canvas await .claude/plans/notifications.plan.md # → {status:feedback,items:[{kind:verdict,verdict:approve}]} ecc-plan-canvas end .claude/plans/notifications.plan.md # 计划已确认——开始实现如果await返回{status: ended, endedBy: user}或反馈批次带sessionEnded: true说明用户从浏览器关闭了审阅停止轮询、把剩余更新通过聊天交代清楚不要重新打开。服务器本身空闲 30 分钟后自动退出可用ECC_PLAN_CANVAS_IDLE_MS调整ecc-plan-canvas stop可显式关闭它。排查与限制用户说发了消息没反应几乎总是因为没有await挂起。先跑ecc-plan-canvas pending看有没有排队反馈。不要轮询用--timeout-ms写循环轮询是测试用途的反模式保持普通await运行即可。不要只读反馈、只在终端回答用户盯着的是画布回复必须进画布聊天。服务器仅绑定回环地址每次请求做 Host/Origin 白名单检查服务器只把产物内容投递给浏览器不执行产物内容。会话状态文件在~/.claude/plan-canvas/ECC_PLAN_CANVAS_STATE_DIR可覆盖端口可用ECC_PLAN_CANVAS_PORT覆盖。不要解析状态文件来获取聊天内容——你需要的一切都会经由await的 JSON 到达。相关文档plan-canvas skill 全文、/plan-canvas 命令、设计文档、CLI 入口、实现目录。【免费下载链接】ECCThe agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.项目地址: https://gitcode.com/GitHub_Trending/ev/ECC创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
如何用 ECC 的 Plan Canvas 在浏览器中审阅并批准计划【免费下载链接】ECCThe agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.项目地址: https://gitcode.com/GitHub_Trending/ev/ECC在 ECC 中跑/plan后agent 会写出.claude/plans/{name}.plan.md然后停在一个硬性确认门槛上你必须打字回复 yes/proceed 它才会动手写代码。问题在于审阅时你面对的是一整墙终端 Markdown想改哪一段只能重新敲一遍。Plan Canvas 把这道确认门槛搬到浏览器里agent 把计划产物打开在一个仅回环地址127.0.0.1:4517的画布页面上你在页面上直接点击元素或选中文字加标注、在侧边栏和 agent 聊天最后点Approve plan或Request changes——这次点击就等同于对/plan的正式确认。前提条件你能运行 shell 命令并读取 stdout 的任意 agent 环境Claude Code、Codex、Cursor、Gemini、OpenCode、Copilot 都按同一套 CLIJSON 循环驱动本地存在一个待审阅的计划产物文件本地.md/.html不支持 diff 审阅、运行中的 web 应用和远程 URL。Plan Canvas 自 ECC 2.1.0 起提供。准备安装 CLI 并确认计划产物ecc-plan-canvas是可执行文件名有两条获取路径# 全局 npm 安装bin 会进入 PATH npm install -g ecc-universal插件安装场景下bin 不一定在 PATH 上文档给出的等价调用方式是node $CLAUDE_PLUGIN_ROOT/scripts/plan-canvas.js安装后不带参数运行一次ecc-plan-canvas会显示当前服务器状态与打开的会话列表可用来确认 CLI 可用。被审阅的产物是/plan写出的计划文件例如.claude/plans/notifications.plan.md。Markdown 计划会按 ECC 的计划模板渲染含表格、任务列表、代码块和 Mermaid 图.html产物则原样渲染并注入标注层。图片、CSS 等附属资源必须与产物文件放在同一目录并用相对路径引用。如果你在 Claude Code 中也可以直接输入/plan-canvas [path/to/artifact.plan.md]Codex 中是$plan-canvas触发同样的流程不传路径时它会解析为你最近修改的.claude/plans/*.plan.md再找不到就询问你要审阅什么。在浏览器中打开计划在项目根目录执行ecc-plan-canvas open .claude/plans/feature.plan.md该命令立即返回它在后台启动或复用一个 detached 的回环服务器127.0.0.1:4517该服务器被所有会话共享、按产物路径作为 key不需要你追踪 session id。浏览器窗口随即打开显示渲染后的计划。两个可选参数--no-open不弹出浏览器窗口仅登记会话--reopen只有当用户要求恢复一个已由其本人从浏览器关闭的会话时才使用。普通的open对已结束的会话会被拒绝服务器返回409 user-ended。注意编辑产物文件本身就是刷新手段——画布在文件保存时自动热加载不要靠重跑open来刷新页面。等待反馈await 与 JSON 结果ecc-plan-canvas await .claude/plans/feature.plan.mdawait会阻塞直到人类在画布上动作发消息、加标注、点裁决按钮、或结束会话然后把反馈以 JSON 打印到 stdout进度提示走 stderr保持 stdout 可解析。如果调用被中断了不要紧排队的反馈会持久化在磁盘上重跑await即可不会丢。文档示例——一次包含标注和裁决的反馈输出{ status: feedback, items: [ { kind: annotation, text: Split this into two phases, anchor: { selector: h2:nth-of-type(3), tag: h2, snippet: Phase 2: Migration } }, { kind: verdict, verdict: request-changes } ] }items里会出现三种kindchat自由消息。要在画布里回答而不是只在终端里回答annotation指向具体元素的反馈。anchor.selector是 CSS 选择器anchor.snippet是被指向的文本片段如果用户高亮了一段文字还会有anchor.textRange.textverdictapprove表示计划已确认——停止轮询、结束会话、开始实现request-changes表示需要修改产物画布会自动热加载你的修改然后继续等待下一轮反馈。await的返回状态还可能是ended会话结束、waiting--timeout-ms到期仅限测试/调试或missing文件不存在。保持监听是关键。反馈只有在你有一个真正挂起的await时才能送达。如果你的回合结束时没有任何东西在监听用户发来的消息会滞留在队列里从用户的视角看就是发了消息毫无反应。文档建议如果你的 harness 支持后台任务Claude Code 中即 Bash 调用加run_in_background: true把await作为后台任务运行它收到反馈就退出并交回 JSON循环因此跨回合存活。前台await也能用但只撑到 harness 限时为止。两个兜底机制# 列出排队了但没有监听者的反馈不确定是否漏听时检查 ecc-plan-canvas pending另外可选的stop:plan-canvas-pendinghook 会在画布反馈未送达时阻止你的回合结束并把消息交给你——如果你是在这个 hook 里读到反馈的说明你提前停止了监听。处理 Request changes改文件、在画布里回复、继续等待收到request-changes或标注后循环是修改产物文件 → 在画布聊天里回复 → 继续await。# 修改完 .plan.md 后先回复再等待一条命令同时做两件事 ecc-plan-canvas await .claude/plans/feature.plan.md --reply Split Phase 2 as requested. Take a look.--reply会在等待前把你的回复放进画布聊天面板。文档强调每条人类消息都应在画布中得到回复哪怕只有一句 On it, rewriting the risk table now.——聊天面板里沉默和画布坏了在观感上无法区分。修改耗时较长时用活动指示器保持聊天状态诚实# 显示agent is thinking...动画气泡修订超过一分钟时刷新一次 ecc-plan-canvas typing .claude/plans/feature.plan.md --state thinking # 回复落地前切换到agent is typing... ecc-plan-canvas typing .claude/plans/feature.plan.md --state typingawait把一批反馈交给你时会自动置为thinking--reply会清除它。两种状态都会自行过期agent 崩溃时指示器会退回到诚实的 queued而不是让用户永远盯着转圈。计划中如果是流程图、架构图、时序图、状态机或依赖图写成围栏的mermaid代码块而不是 ASCII 图画布会把它渲染成可被点击标注的主题化图表。Mermaid 从固定 CDN 加载离线时该块退化为显示源码审阅不会被阻塞气隔环境可通过ECC_PLAN_CANVAS_MERMAID_URL指向本地镜像。结束审阅批准或关闭verdict为approve时计划即视为确认停止轮询、结束会话、开始实现。结束由 agent 侧调用ecc-plan-canvas end .claude/plans/feature.plan.md完整的批准主路径长这样命令与输出取自 skill 文档的示例ecc-plan-canvas open .claude/plans/notifications.plan.md ecc-plan-canvas await .claude/plans/notifications.plan.md # → {status:feedback,items:[{kind:verdict,verdict:approve}]} ecc-plan-canvas end .claude/plans/notifications.plan.md # 计划已确认——开始实现如果await返回{status: ended, endedBy: user}或反馈批次带sessionEnded: true说明用户从浏览器关闭了审阅停止轮询、把剩余更新通过聊天交代清楚不要重新打开。服务器本身空闲 30 分钟后自动退出可用ECC_PLAN_CANVAS_IDLE_MS调整ecc-plan-canvas stop可显式关闭它。排查与限制用户说发了消息没反应几乎总是因为没有await挂起。先跑ecc-plan-canvas pending看有没有排队反馈。不要轮询用--timeout-ms写循环轮询是测试用途的反模式保持普通await运行即可。不要只读反馈、只在终端回答用户盯着的是画布回复必须进画布聊天。服务器仅绑定回环地址每次请求做 Host/Origin 白名单检查服务器只把产物内容投递给浏览器不执行产物内容。会话状态文件在~/.claude/plan-canvas/ECC_PLAN_CANVAS_STATE_DIR可覆盖端口可用ECC_PLAN_CANVAS_PORT覆盖。不要解析状态文件来获取聊天内容——你需要的一切都会经由await的 JSON 到达。相关文档plan-canvas skill 全文、/plan-canvas 命令、设计文档、CLI 入口、实现目录。【免费下载链接】ECCThe agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.项目地址: https://gitcode.com/GitHub_Trending/ev/ECC创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
