mirror of
https://github.com/Jeuners/ECC.git
synced 2026-09-09 15:02:30 +02:00
feat: Plan Canvas, a browser review canvas for plans (#2467)
* feat: add Plan Canvas - browser annotate-and-approve review for plan artifacts - scripts/plan-canvas.js CLI (open/await/end/stop/server; bin ecc-plan-canvas) - loopback server + ECC-styled chrome + annotation SDK + zero-dep markdown renderer - Approve/Request-changes verdicts wired to the /plan confirmation gate - plan-canvas skill, /plan-canvas command, SessionStart hook surfacing open reviews - shared scripts/lib/loopback-guard.js extracted from control-pane (API re-exported) - 121 new tests incl. full-workflow E2E; registered in manifests, catalog, registry Inspired by lavish-axi (https://github.com/kunchenguid/lavish-axi) by @kunchenguid; original ECC-native implementation, not a port. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * refactor(plan-canvas): invoke via ecc-plan-canvas bin so the skill works from any project Skill/command referenced a cwd-relative `node scripts/plan-canvas.js`, unusable outside the ECC root. Switch to the ecc-plan-canvas bin (and $CLAUDE_PLUGIN_ROOT fallback) and align CLI next_step hints so an agent can run it as a skill in any repo. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * feat(plan-canvas): render Mermaid diagrams + ship Codex cross-harness surface - markdown renderer emits <pre class="mermaid"> for ```mermaid blocks (source entity-escaped so the browser decodes it for the renderer while blocking injection) - artifact template loads a pinned Mermaid build only when a diagram is present, themed to ECC dark, securityLevel strict, graceful offline fallback to source (ECC_PLAN_CANVAS_MERMAID_URL overrides for a local mirror) - skill teaches Mermaid-for-diagrams and states the CLI+JSON loop is harness-agnostic - add .agents/skills/plan-canvas (Codex) with agents/openai.yaml interface manifest - register in install-modules workflow-quality paths; docs updated Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * docs(plan-canvas): add demo screenshot Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * fix(ci): sync yarn.lock with new bin; add contributor checklist - yarn.lock records the ecc-plan-canvas bin so Yarn hardened-mode install no longer wants to modify the lockfile on public PRs - PR template + CONTRIBUTING gain a pre-push checklist covering the lockfile trap and the full skill/command/CLI registration surfaces Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> --------- Co-authored-by: Haley Chen <2022hachen@gmail.com> Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
haelyra
GitHub
parent
4130457d67
commit
a511395613
42 changed files with 4398 additions and 60 deletions
|
|
@ -5,6 +5,7 @@ This document lists each slash command and the primary agent(s) or skills it inv
|
|||
| Command | Primary agent(s) | Notes |
|
||||
|---------|------------------|--------|
|
||||
| `/plan` | planner | Implementation planning before code |
|
||||
| `/plan-canvas` | — (skill: plan-canvas) | Browser review canvas for plan artifacts: annotate, chat, approve/request changes |
|
||||
| `/tdd` | tdd-guide | Test-driven development |
|
||||
| `/code-review` | code-reviewer | Quality and security review |
|
||||
| `/build-fix` | build-error-resolver | Fix build/type errors |
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"schemaVersion": 1,
|
||||
"totalCommands": 93,
|
||||
"totalCommands": 94,
|
||||
"commands": [
|
||||
{
|
||||
"command": "aside",
|
||||
|
|
@ -626,6 +626,17 @@
|
|||
"skills": [],
|
||||
"path": "commands/orch-review.md"
|
||||
},
|
||||
{
|
||||
"command": "plan-canvas",
|
||||
"description": "Open a plan or HTML artifact in the browser Plan Canvas for annotate-and-approve review",
|
||||
"type": "review",
|
||||
"primaryAgents": [],
|
||||
"allAgents": [],
|
||||
"skills": [
|
||||
"plan-canvas"
|
||||
],
|
||||
"path": "commands/plan-canvas.md"
|
||||
},
|
||||
{
|
||||
"command": "plan-prd",
|
||||
"description": "Generate a lean, problem-first PRD and hand off to /plan for implementation planning.",
|
||||
|
|
@ -645,7 +656,9 @@
|
|||
"allAgents": [
|
||||
"planner"
|
||||
],
|
||||
"skills": [],
|
||||
"skills": [
|
||||
"plan-canvas"
|
||||
],
|
||||
"path": "commands/plan.md"
|
||||
},
|
||||
{
|
||||
|
|
@ -1020,7 +1033,7 @@
|
|||
"orchestration": 11,
|
||||
"planning": 2,
|
||||
"refactoring": 1,
|
||||
"review": 14,
|
||||
"review": 15,
|
||||
"testing": 53
|
||||
},
|
||||
"topAgents": [
|
||||
|
|
|
|||
BIN
docs/design/assets/plan-canvas-demo.png
Normal file
BIN
docs/design/assets/plan-canvas-demo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
120
docs/design/plan-canvas.md
Normal file
120
docs/design/plan-canvas.md
Normal file
|
|
@ -0,0 +1,120 @@
|
|||
# Plan Canvas — interactive plan review in the browser
|
||||
|
||||
Status: implemented (`feat/plan-canvas`)
|
||||
Inspired by: [lavish-axi](https://github.com/kunchenguid/lavish-axi) by @kunchenguid, the
|
||||
idea of a local, annotate-and-chat review loop over agent-generated artifacts. Plan Canvas is
|
||||
an original, ECC-native implementation of that idea, not a port.
|
||||
|
||||
|
||||
|
||||
## Problem
|
||||
|
||||
`/plan` ends with a hard gate: the agent writes `.claude/plans/{name}.plan.md` and WAITS for
|
||||
the user to confirm. Today that review happens as a wall of markdown in the terminal, and the
|
||||
feedback loop is "retype what you want changed in chat." The community has asked for the same
|
||||
loop lavish-axi popularized: see the plan rendered properly, point at the part you mean, and
|
||||
talk to the agent from the page.
|
||||
|
||||
## What it is
|
||||
|
||||
A loopback-only web editor for plan artifacts (and any local HTML artifact):
|
||||
|
||||
- The agent runs `node scripts/plan-canvas.js open <artifact>` after writing a plan.
|
||||
- The artifact opens in the browser inside ECC-styled chrome (same design tokens as
|
||||
`scripts/dashboard-web.js`): dark-first, `--accent #6885e8`, accent→pink brand gradient,
|
||||
light theme toggle.
|
||||
- The human reviews visually, clicks elements or selects text to attach numbered annotations,
|
||||
and chats with the agent from a side rail.
|
||||
- Plan-specific verdict actions — **Approve plan** / **Request changes** — map directly onto
|
||||
`/plan`'s CONFIRM gate, so approval can happen from the canvas instead of the terminal.
|
||||
- The agent blocks on `node scripts/plan-canvas.js await <artifact>` (long poll). Feedback
|
||||
arrives as JSON on stdout: chat messages, annotations with CSS-selector + text-range
|
||||
anchors, verdicts, or session-end.
|
||||
- The agent replies with `await --reply "..."`, which appears in the canvas chat; edits to the
|
||||
artifact file live-reload the page.
|
||||
|
||||
## How it fits ECC
|
||||
|
||||
| Piece | Location | Follows |
|
||||
|---|---|---|
|
||||
| CLI entry | `scripts/plan-canvas.js` (+ npm bin `ecc-plan-canvas`) | `scripts/control-pane.js` |
|
||||
| Server | `scripts/lib/plan-canvas/server.js` | control-pane loopback server, host-header + Origin allowlist (DNS-rebinding guard) |
|
||||
| Editor chrome | `scripts/lib/plan-canvas/ui.js` | `scripts/lib/control-pane/ui.js`, tokens from `scripts/dashboard-web.js` |
|
||||
| Markdown plan renderer | `scripts/lib/plan-canvas/markdown.js` | zero new deps; renders the `commands/plan.md` artifact schema (tables, tasks, code fences, Mermaid blocks) |
|
||||
| Mermaid diagrams | `scripts/lib/plan-canvas/ui.js` | ` ```mermaid ` blocks render in the browser, themed to ECC; pinned CDN with offline fallback (`ECC_PLAN_CANVAS_MERMAID_URL` for a local mirror) |
|
||||
| Session state | `scripts/lib/plan-canvas/sessions.js` | file-path-keyed sessions, state under `~/.claude/plan-canvas/` (`ECC_PLAN_CANVAS_STATE_DIR` override) |
|
||||
| Skill | `skills/plan-canvas/SKILL.md` | skills-first surface; teaches the open → await → reply loop; defers visual guidance to `frontend-design-direction`, `artifact-design`, `dataviz` |
|
||||
| Command shim | `commands/plan-canvas.md` | legacy parity surface, points at the skill |
|
||||
| `/plan` pointer | `commands/plan.md` | after writing the artifact, offer canvas review |
|
||||
| Hook (optional) | `scripts/hooks/plan-canvas-sessions.js`, `SessionStart` | surfaces open canvas sessions so a fresh session can resume a review |
|
||||
| Tests | `tests/lib/plan-canvas/*`, `tests/integration/plan-canvas-e2e.test.js` | node:test-style plain assert, run by `tests/run-all.js` |
|
||||
|
||||
Registration: `package.json` (`bin`, `files[]`), `manifests/install-components.json`
|
||||
(+ `install-modules.json` workflow-quality paths), `agent.yaml` skills list, catalog +
|
||||
command-registry regeneration.
|
||||
|
||||
## Cross-harness / model compatibility
|
||||
|
||||
The feature is model- and harness-agnostic by construction: the CLI emits plain JSON and the
|
||||
skill teaches a shell-plus-stdout loop, so any capable agent drives it identically — the same
|
||||
"just a CLI" thesis lavish-axi uses. There is no Claude-only dependency in the core loop; the
|
||||
`SessionStart` hook is an additive Claude Code convenience (other harnesses see open sessions
|
||||
from a bare `ecc-plan-canvas` invocation).
|
||||
|
||||
Surfaces mirror how peer workflow-quality skills ship across ECC's harnesses:
|
||||
|
||||
- `skills/plan-canvas/` — canonical (Claude Code and the installer's per-target adapters).
|
||||
- `.agents/skills/plan-canvas/` (+ `agents/openai.yaml` interface manifest) — Codex, alongside
|
||||
`tdd-workflow`, `e2e-testing`, `verification-loop`.
|
||||
- `agent.yaml` skills list — the Codex gitagent manifest.
|
||||
- The CLI resolves from any project via the `ecc-plan-canvas` bin (global/plugin install) or
|
||||
`$CLAUDE_PLUGIN_ROOT/scripts/plan-canvas.js`, never a cwd-relative path.
|
||||
|
||||
Cursor's checked-in subset is content/marketing skills only, so — matching peers — plan-canvas
|
||||
is not added there; the installer still places it for Cursor from the canonical `skills/`.
|
||||
|
||||
## Protocol
|
||||
|
||||
Sessions are keyed by canonical artifact path (`sha256(realpath)[:12]`). The CLI talks to a
|
||||
detached server (`server.json` in the state dir records pid/port/version; idle self-shutdown
|
||||
after 30 min, `ECC_PLAN_CANVAS_IDLE_MS`). Feedback is deliver-and-drain: queued items are
|
||||
handed to exactly one `await` call and persisted to disk until then, so nothing is lost if
|
||||
the poll is interrupted.
|
||||
|
||||
- `GET /health` — `{ok, app: "ecc-plan-canvas", version}` (CLI/server version handshake)
|
||||
- `GET /` — session list (ECC chrome)
|
||||
- `POST /api/sessions` `{file, reopen?}` — open/resume; `409 user-ended` unless `reopen`
|
||||
- `GET /canvas/<key>` — editor chrome; `GET /artifact/<key>/` — rendered artifact
|
||||
(markdown → ECC plan template, HTML passthrough) with the annotation SDK injected;
|
||||
sibling assets confined to the artifact directory
|
||||
- `POST /api/session/<key>/feedback` `{items[], endSession?}` — browser queues
|
||||
chat / annotation / verdict items
|
||||
- `GET /api/await?file=<path>[&timeoutMs=n]` — agent long-poll (whitespace heartbeat);
|
||||
returns `{status: feedback|ended|waiting|missing, items[], sessionEnded?, endedBy?}`
|
||||
- `POST /api/session/<key>/reply` `{text}` — agent message → canvas chat
|
||||
- `POST /api/session/<key>/end` (user) / `POST /api/end` `{file}` (agent) — ender recorded;
|
||||
user ends are sticky: plain `open` refuses to reopen without `--reopen`
|
||||
- `GET /events/<key>` — SSE to the browser: `chat-sync`, `presence`
|
||||
(waiting/listening/working), `reload` (artifact file changed), `ended`
|
||||
|
||||
## Deliberate differences from lavish-axi
|
||||
|
||||
- Plan-first: renders `.plan.md` / `.md` natively (including Mermaid); lavish is HTML-only.
|
||||
- Verdict actions wired to ECC's plan-confirmation workflow.
|
||||
- ECC design tokens and chrome; JSON (not TOON) agent output.
|
||||
- Mermaid renders themed to ECC, but without lavish's pan/zoom or node-id capture —
|
||||
whole-element annotation covers pointing at a diagram or node.
|
||||
- No export/share hosting, no layout-audit gate, no bundled playbooks — ECC's existing
|
||||
design skills (`frontend-design-direction`, `artifact-design`, `dataviz`) cover authoring.
|
||||
|
||||
## Security posture
|
||||
|
||||
Loopback bind only by default; Host and Origin allowlist checks on every request (same
|
||||
approach as control-pane); artifact served only from registered session paths with
|
||||
sibling-asset access confined to the artifact directory; state dir is user-local. The server
|
||||
never executes artifact content — it only serves it to the browser.
|
||||
|
||||
The one optional outbound request is the pinned Mermaid library, fetched by the browser only
|
||||
for artifacts that contain a diagram; it renders with `securityLevel: 'strict'`, degrades to
|
||||
showing diagram source if unavailable, and can be repointed at a local mirror via
|
||||
`ECC_PLAN_CANVAS_MERMAID_URL`. The server itself still makes no network calls.
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
# Everything Claude Code (ECC) — 智能体指令
|
||||
|
||||
这是一个**生产就绪的 AI 编码插件**，提供 67 个专业代理、277 项技能、93 条命令以及自动化钩子工作流，用于软件开发。
|
||||
这是一个**生产就绪的 AI 编码插件**，提供 67 个专业代理、278 项技能、94 条命令以及自动化钩子工作流，用于软件开发。
|
||||
|
||||
**版本:** 2.0.0
|
||||
|
||||
|
|
@ -147,8 +147,8 @@
|
|||
|
||||
```
|
||||
agents/ — 67 个专业子代理
|
||||
skills/ — 277 个工作流技能和领域知识
|
||||
commands/ — 93 个斜杠命令
|
||||
skills/ — 278 个工作流技能和领域知识
|
||||
commands/ — 94 个斜杠命令
|
||||
hooks/ — 基于触发的自动化
|
||||
rules/ — 始终遵循的指导方针（通用 + 每种语言）
|
||||
scripts/ — 跨平台 Node.js 实用工具
|
||||
|
|
|
|||
|
|
@ -228,7 +228,7 @@ Copy-Item -Recurse rules/typescript "$HOME/.claude/rules/"
|
|||
/plugin list ecc@ecc
|
||||
```
|
||||
|
||||
**搞定！** 你现在可以使用 67 个智能体、277 项技能和 93 个命令了。
|
||||
**搞定！** 你现在可以使用 67 个智能体、278 项技能和 94 个命令了。
|
||||
|
||||
***
|
||||
|
||||
|
|
@ -1141,8 +1141,8 @@ opencode
|
|||
| 功能特性 | Claude Code | OpenCode | 状态 |
|
||||
|---------|---------------|----------|--------|
|
||||
| 智能体 | PASS: 67 个 | PASS: 12 个 | **Claude Code 领先** |
|
||||
| 命令 | PASS: 93 个 | PASS: 35 个 | **Claude Code 领先** |
|
||||
| 技能 | PASS: 277 项 | PASS: 37 项 | **Claude Code 领先** |
|
||||
| 命令 | PASS: 94 个 | PASS: 35 个 | **Claude Code 领先** |
|
||||
| 技能 | PASS: 278 项 | PASS: 37 项 | **Claude Code 领先** |
|
||||
| 钩子 | PASS: 8 种事件类型 | PASS: 11 种事件 | **OpenCode 更多！** |
|
||||
| 规则 | PASS: 29 条 | PASS: 13 条指令 | **Claude Code 领先** |
|
||||
| MCP 服务器 | PASS: 14 个 | PASS: 完整 | **完全对等** |
|
||||
|
|
@ -1249,8 +1249,8 @@ ECC 是**第一个最大化利用每个主要 AI 编码工具的插件**。以
|
|||
| 功能特性 | Claude Code | Cursor IDE | Codex CLI | OpenCode |
|
||||
|---------|-----------------------|------------|-----------|----------|
|
||||
| **智能体** | 67 | 共享 (AGENTS.md) | 共享 (AGENTS.md) | 12 |
|
||||
| **命令** | 93 | 共享 | 基于指令 | 35 |
|
||||
| **技能** | 277 | 共享 | 10 (原生格式) | 37 |
|
||||
| **命令** | 94 | 共享 | 基于指令 | 35 |
|
||||
| **技能** | 278 | 共享 | 10 (原生格式) | 37 |
|
||||
| **钩子事件** | 8 种类型 | 15 种类型 | 暂无 | 11 种类型 |
|
||||
| **钩子脚本** | 20+ 个脚本 | 16 个脚本 (DRY 适配器) | N/A | 插件钩子 |
|
||||
| **规则** | 34 (通用 + 语言) | 34 (YAML 前页) | 基于指令 | 13 条指令 |
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue