liteagents 2.5.3 → 2.6.0

package/packages/claude/skills/live-canvas/INTEGRATION_NOTES.md

@@ -0,0 +1,210 @@
+# Design Lab — integration notes
+
+**Status:** draft for later revision
+**Context:** These are notes from a real design-lab session on vanilla-Node gitdone.
+Capture what worked, what needs adaptation, and the path to a truly live feedback
+loop. Rewrite properly when you sit down to tidy this.
+
+---
+
+## What Design Lab is (and what it isn't)
+
+**Is:** a Claude Code skill that generates N UI variations side-by-side with an
+in-page `FeedbackOverlay`, collects click-to-annotate feedback on elements,
+synthesizes a winner, finalizes with `DESIGN_PLAN.md` + cleanup.
+
+**Isn't:** a live push bridge. The overlay writes feedback to disk. Claude only
+sees that file when the user types a message — it can't be woken by a Save click.
+
+---
+
+## Adaptation points (upstream assumes React)
+
+The shipped skill (`SKILL.md`) generates React/Next.js/Vite templates and uses
+`FeedbackOverlay.tsx` (React + portals). Any project not in that stack needs
+adaptation. Patterns observed:
+
+### Vanilla Node http / template-literal projects
+
+- **Variants:** CommonJS modules at `.claude-design/lab/variants/variant-[a-f].js`
+  - Each exports `{ id, rationale, render(stepsCount) }`
+  - `render()` returns an HTML string; root element carries `data-variant-root="X"`
+  - Inline `<style>` per variant, CSS class prefix per variant (`.va-`, `.vb-`, etc.)
+    to avoid cross-variant bleed
+
+- **Overlay:** port `FeedbackOverlay.tsx` → vanilla JS. A working port exists
+  from the gitdone session — consider moving it to
+  `design-lab/templates/overlay-vanilla.js` upstream so it's reusable.
+
+- **Server integration:** a `/__design_lab` GET route that loads all variant
+  modules and renders them in a CSS grid + injects the vanilla overlay as an
+  inline `<script>`. Feedback POSTs to `/__design_lab/feedback` → appends JSONL
+  to `.claude-design/feedback.jsonl`. Echo a highlighted summary to stderr.
+
+### Other stacks
+
+- **Next.js App Router** — skill's default; no adaptation needed
+- **Vite React** — skill's default; minor route wiring
+- **Plain HTML static** — variants served from filesystem; small fetch POST for
+  feedback; no server integration (no real-time auto-reload)
+- **Server-rendered (Rails, Django, Phoenix)** — one route that concatenates
+  rendered variants; overlay via CDN / inline script
+
+---
+
+## The live-feedback problem
+
+Design Lab today: batched feedback. User collects comments + writes overall
+direction + clicks "Submit all" → one JSONL entry with the batch. Fine for
+first-pass iteration; slow for rapid tweaks.
+
+Ideal (what user described as "rapid miniscule changes"):
+
+1. User clicks element
+2. Types comment
+3. Save → Claude is pushed the event AT THAT MOMENT
+4. Claude edits the source file
+5. Browser auto-reloads via SSE (already working via our dev HUD)
+6. User sees the change without ever leaving the browser
+
+Step 3 is the missing piece. Design Lab can't do it today because skills don't
+push events — channels do.
+
+---
+
+## Three integration paths (cheapest → proper)
+
+### Path 1: Poll-on-next-message (today's behavior)
+
+- Overlay writes JSONL on Submit
+- Claude reads JSONL on next user message
+- User says "check" / "k" / anything to trigger
+
+**Cost:** 0 min. **UX:** one message per feedback batch. **Good for:**
+thoughtful batched feedback, not rapid tweaks.
+
+### Path 2: Fakechat bridge (15 min, runs on top of the skill)
+
+Modify `overlay.js` to add a "live mode" toggle:
+
+- When ON, each individual **Save** (not just batch Submit) POSTs to
+  `http://localhost:8787/api/send` formatted as a Fakechat-compatible message:
+
+  ```json
+  {"text": "[DESIGN-LAB F / button \"Create event\"] too cramped\n\nselector: section:nth-of-type(1) > form > button\noutline_html: <button class=\"vf-submit\">Create event</button>"}
+  ```
+
+- Launch Claude with:
+
+  ```bash
+  claude --channels plugin:fakechat@claude-plugins-official
+  ```
+
+- Each Save pushes the payload into the live Claude session as a channel event
+- Claude reacts immediately (edit file, confirm back in Fakechat UI)
+- SSE reload in the dev HUD shows the change in the design-lab page
+
+**Tradeoff:** Fakechat expects plain chat text. We embed the structured
+feedback as a preformatted string. Slightly janky — good for "does push work?"
+proof-of-concept, not production.
+
+**Bonus:** with Fakechat open at localhost:8787 you also get a chat back-channel
+for non-UI notes ("also fix X unrelated thing").
+
+### Path 3: Custom `design-channel` plugin (2-3 hours, the right way)
+
+Dedicated channel plugin that bundles with design-lab:
+
+- Speaks channel protocol to Claude (stdio subprocess like other channels)
+- Exposes a local HTTP port (configurable; default 8788)
+- Overlay POSTs directly to that port — no Fakechat detour
+- Payload shape is the native structured feedback, not wrapped chat text
+- Optional back-reply tool so Claude can post comments/confirmations to
+  specific pins in the overlay ("done — added padding")
+
+**Implementation sketch:**
+
+```
+design-plugin/
+├── design-and-refine/
+│   ├── skills/design-lab/        # existing
+│   └── channels/design-channel/  # NEW
+│       ├── manifest.json         # declares claude/channel capability
+│       ├── server.js             # HTTP server + stdio channel
+│       └── schema.json           # payload schema
+```
+
+- `manifest.json` declares channel capability + stdio subprocess entry
+- `server.js` runs an HTTP listener AND a stdio channel protocol handler;
+  POSTs to HTTP translate to channel.notify events with the payload
+- Can either be launched separately (`claude --channels plugin:design-channel`)
+  or bundled so Design Lab auto-launches it when active
+
+**Reusable upstream:** this belongs as a PR to
+[0xdesign/design-plugin](https://github.com/0xdesign/design-plugin). Benefits
+every Design Lab user, not just this project.
+
+### Path 4 (considered, rejected): auto-poll without a channel
+
+Cannot work. Claude Code sessions are turn-based; no mechanism exists to
+spontaneously check files between user turns. Hooks fire on Claude Code
+events (user-prompt-submit, tool-use, etc.), not on external file changes.
+Background tasks complete-notify but don't re-enter mid-generation. Path 2
+or 3 are the only real "push" options.
+
+---
+
+## Files that matter
+
+From the gitdone session, preserve these:
+
+| File | Purpose | Reusable |
+|---|---|---|
+| `overlay.js` (vanilla port) | Click-to-annotate HUD | ✅ save to `design-lab/templates/overlay-vanilla.js` |
+| Variant `render()` module pattern | Works for any server-rendered stack | ✅ document in skill |
+| `/__design_lab` route shape | Server integration pattern | ✅ document per-stack |
+| CSS prefix-per-variant | Prevents cross-variant style bleed | ✅ convention |
+
+---
+
+## Recommended next steps (when you sit down)
+
+1. **Copy** the vanilla `overlay.js` from the gitdone `.claude-design/lab/`
+   into `design-lab/templates/overlay-vanilla.js` so future sessions don't
+   re-port it.
+
+2. **Append to `SKILL.md`** a "Vanilla adaptation" section right after the
+   framework-detection phase: if no React/Vue/Svelte detected → use the
+   vanilla templates and CommonJS module pattern.
+
+3. **Decide on channel path:**
+   - Path 2 (Fakechat bridge) for the quick win
+   - Path 3 (custom channel) for the proper PR upstream
+
+4. **Liteagents bundling:** `./install.sh` already copies skills to
+   `~/.claude/skills/`. Consider having it also install Fakechat from
+   the plugin registry if the user opts in:
+
+   ```bash
+   read -p "Install Fakechat channel (for live Design Lab)? [y/N] " ans
+   [[ $ans =~ ^[Yy] ]] && claude /plugin install fakechat@claude-plugins-official
+   ```
+
+5. **Open questions worth thinking through:**
+   - Should Design Lab auto-launch its channel when active? Or require
+     user to pass `--channels` flag at session start?
+   - How should channel-received feedback interact with the batch flow?
+     (Auto-synthesize after N comments? Synthesize only on explicit request?)
+   - Should the overlay show "Claude is editing..." state via a back-reply
+     from the channel?
+
+---
+
+## References
+
+- Skill: `~/.claude/skills/design-lab/SKILL.md`
+- Upstream: <https://github.com/0xdesign/design-plugin>
+- Channels reference: <https://code.claude.com/docs/en/channels-reference>
+- Fakechat: `claude /plugin install fakechat@claude-plugins-official`
+- Vanilla overlay port (today's session):
+  `/home/hamr/PycharmProjects/gitdone/.claude-design/lab/overlay.js`

package/packages/claude/skills/live-canvas/README.md

@@ -0,0 +1,273 @@
+# Live Canvas
+
+Click-to-annotate UI design tool for Claude Code. Renders N variants of a component or page in your browser, you click an element and type what to change, and Claude edits the variant file while you watch in the browser. No window switching, no pasted JSON.
+
+Ships as a Claude Code skill plus an MCP channel plugin. Works in every tool liteagents supports (Claude, Droid, Amp, Opencode), but **Live mode only works in Claude Code** — other tools run in Batch mode only (see modes below).
+
+---
+
+## How it works
+
+```
+ ┌──────────────────────┐      POST /feedback        ┌─────────────────────┐
+ │ Overlay in browser   │ ─────────────────────────► │ live-canvas-channel │
+ │ (vanilla JS or React)│                            │ (Node MCP server)   │
+ └──────────────────────┘                            └──────────┬──────────┘
+           ▲                                                     │
+           │ dev server hot-reloads the page                     │ notifications/
+           │ after Claude edits the variant                      │ claude/channel
+           │                                                     ▼
+ ┌──────────────────────┐                            ┌─────────────────────┐
+ │ Dev server (yours)   │ ◄──── Claude edits ─────── │ Claude Code session │
+ │ e.g. pnpm dev :3000  │        variant file        │ (with --dangerously-│
+ └──────────────────────┘                            │ load-development-   │
+                                                     │ channels flag)      │
+                                                     └─────────────────────┘
+```
+
+Each Save in the overlay streams into the Claude session as a `<channel>` tag with the variant, element selector, and user comment. Claude edits the corresponding `.claude-design/lab/variants/Variant<X>.tsx` file. Your dev server hot-reloads. You never leave the browser.
+
+---
+
+## Modes
+
+The overlay auto-selects at runtime, the user never toggles manually.
+
+| Mode | Trigger | What happens per Save |
+|---|---|---|
+| **Live** | Channel server answers `GET /health`, session was started with the dev-channels flag | Comment streams into Claude's context; Claude edits the file; dev server hot-reloads. Toast: "Pushed to Claude ✨". |
+| **Batch** | No channel, or running under Droid/Amp/Opencode | Comment stays local. On Finish/Submit it writes JSONL (or downloads the file if no endpoint). User pastes or says "check" in the CLI to have the assistant act on the whole batch. |
+
+Live mode gracefully degrades to Batch if a push ever fails mid-session.
+
+---
+
+## One-time setup (Live mode, Claude Code only)
+
+Run this once per machine. Without it, the skill still works in Batch mode.
+
+### 1. Install plugin npm dependencies
+
+```bash
+bash ~/.claude/plugins/live-canvas-marketplace/setup.sh
+```
+
+Checks Node >= 18, runs `npm install` inside the plugin dir. Idempotent.
+
+### 2. Register the marketplace in Claude Code
+
+```
+/plugin marketplace add ~/.claude/plugins/live-canvas-marketplace
+```
+
+### 3. Install the plugin
+
+```
+/plugin install live-canvas-channel@live-canvas-marketplace
+```
+
+### 4. Start Claude Code with the dev-channels flag
+
+```bash
+claude --dangerously-load-development-channels plugin:live-canvas-channel@live-canvas-marketplace
+```
+
+Accept the safety prompt (custom channels are in research preview and not on the default allowlist).
+
+**Save yourself typing** — add to `~/.bashrc` or `~/.zshrc`:
+
+```bash
+alias claude-live='claude --dangerously-load-development-channels plugin:live-canvas-channel@live-canvas-marketplace'
+```
+
+From now on, `claude-live` to enable Live mode, plain `claude` for everything else.
+
+---
+
+## Everyday use
+
+### Start a session
+
+Either `claude` (Batch only) or `claude-live` (Live available).
+
+### Invoke the skill in a project
+
+```
+/live-canvas
+```
+
+Phase 0 probes the channel and decides what to do:
+
+| State | Skill behavior |
+|---|---|
+| Channel responding | Announces Live mode, goes straight into the interview |
+| Plugin installed but channel not responding (you forgot the dev flag) | AskUserQuestion: Batch now, or close and restart with the flag? |
+| Plugin not installed at all (first run) | AskUserQuestion: set up Live, or just use Batch? Prints the 4-step setup. |
+
+### Interview & generation
+
+Skill asks 5 short questions (scope, pain points, inspiration, persona, constraints). Then generates 5 variants in `.claude-design/lab/variants/` and wires a route at `/__live_canvas` in your app.
+
+### Iterate in the browser
+
+Open `http://localhost:<dev-port>/__live_canvas`. Click **Add Feedback** (bottom right), click any element in any variant, type a one-liner, Save.
+
+- Live mode: toast says "Pushed to Claude ✨", Claude acknowledges and edits the file, dev server hot-reloads.
+- Batch mode: toast says "Saved — submit when ready", pin stays on the element, counter in the Submit button ticks up.
+
+Keep clicking until a winner emerges.
+
+### Finish
+
+Click the pink **Finish** (Live) or **Submit** (Batch) button:
+
+1. Type the overall direction: e.g. *"Go with B's layout, A's button styling"*
+2. Click Finish
+
+Skill then:
+- Generates `DESIGN_PLAN.md` in project root (winner, files to change, component API, states, a11y checklist)
+- Updates or creates `DESIGN_MEMORY.md` with the patterns it learned
+- Deletes `.claude-design/` and the `/__live_canvas` route
+
+Done.
+
+---
+
+## Files and where they live
+
+### In this repo (source)
+
+```
+packages/claude/
+├── skills/live-canvas/
+│   ├── SKILL.md                           # Skill instructions (phases, flow)
+│   ├── DESIGN_PRINCIPLES.md               # UX/a11y/motion reference
+│   ├── INTEGRATION_NOTES.md               # Design-time notes (channel paths explored)
+│   ├── README.md                          # This file
+│   └── templates/
+│       ├── overlay-vanilla.js             # Framework-agnostic overlay (~400 lines)
+│       ├── feedback-react/                # React overlay for React/Next/Vite projects
+│       └── demo/post-variants.html        # Standalone demo for testing the overlay
+└── plugins/
+    └── live-canvas-marketplace/
+        ├── .claude-plugin/marketplace.json
+        ├── setup.sh                       # Runs npm install and prints manual steps
+        └── plugins/live-canvas-channel/
+            ├── .claude-plugin/plugin.json
+            ├── server.js                  # MCP server + HTTP listener on :8788
+            ├── schema.json                # Feedback payload schema (v1.0)
+            ├── package.json               # @modelcontextprotocol/sdk dep
+            └── README.md                  # Plugin-specific docs (protocol, debug)
+```
+
+### On the user's disk after liteagents install
+
+```
+~/.claude/
+├── skills/live-canvas/                    # Copied from packages/claude/skills/
+└── plugins/live-canvas-marketplace/       # Copied from packages/claude/plugins/
+```
+
+`node_modules/` is NOT copied — `setup.sh` creates it locally via `npm install`.
+
+### After `/plugin install` (Claude Code's own register step)
+
+```
+~/.claude/plugins/cache/live-canvas-marketplace/  # Claude Code's registered copy
+```
+
+Two different dirs:
+- `~/.claude/plugins/live-canvas-marketplace/` — where liteagents puts the source
+- `~/.claude/plugins/cache/live-canvas-marketplace/` — where Claude Code puts its own registered copy after `/plugin install`
+
+The skill checks the cache dir to tell first-time vs returning users apart.
+
+### Per-project, during a session
+
+```
+<project-root>/
+└── .claude-design/
+    ├── lab/variants/VariantA.tsx … VariantE.tsx
+    ├── lab/FeedbackOverlay.tsx (React) OR overlay-vanilla.js (other)
+    ├── design-brief.json                  # Structured output from the interview
+    └── feedback.jsonl                     # Batch mode only; deleted on Finish
+```
+
+Plus a temporary route (e.g. `app/__live_canvas/page.tsx` for Next.js App Router). Everything under `.claude-design/` and the temporary route is deleted on Finish or Abort.
+
+### What survives after Finish
+
+```
+<project-root>/
+├── DESIGN_PLAN.md         # Winner + implementation steps
+└── DESIGN_MEMORY.md       # Accumulated design-system patterns
+```
+
+---
+
+## The install pipeline, end to end
+
+1. **Liteagents installer** copies files:
+   - `packages/claude/skills/live-canvas/` → `~/.claude/skills/live-canvas/`
+   - `packages/claude/plugins/live-canvas-marketplace/` → `~/.claude/plugins/live-canvas-marketplace/`
+2. **User, once:** runs `bash ~/.claude/plugins/live-canvas-marketplace/setup.sh` → installs the plugin's npm deps
+3. **User, once:** in a Claude session, runs `/plugin marketplace add ~/.claude/plugins/live-canvas-marketplace` + `/plugin install live-canvas-channel@live-canvas-marketplace`
+4. **User, every session that wants Live mode:** starts Claude with `--dangerously-load-development-channels plugin:live-canvas-channel@live-canvas-marketplace` (or `claude-live` alias)
+5. **User, whenever:** `/live-canvas` in any project
+
+Steps 1, 2, 3 are truly one-time. Step 4 is per-session. Step 5 is per-project-use.
+
+---
+
+## Troubleshooting
+
+### "Listening for channel messages…" appears on session start, but skill still says Batch
+
+Port 8788 is stuck from an earlier session's server process. Kill it:
+
+```bash
+lsof -i :8788
+kill <pid>
+```
+
+Then `/reload-plugins` in the new session.
+
+### Skill says "No response on :8788" even though I set everything up
+
+Three common causes, in order of likelihood:
+
+1. You didn't start this session with the dev flag. Close it, reopen with `claude-live`.
+2. The plugin subprocess died on startup. In the session, run `/mcp` — look for `live-canvas` with its status. "Failed to connect" means a node/dep error: check `~/.claude/debug/<session-id>.txt` for the stderr.
+3. You never ran step 2 of setup. Re-run `bash ~/.claude/plugins/live-canvas-marketplace/setup.sh`.
+
+### Overlay loads in the browser but no pills appear
+
+The overlay script didn't load. Most common cause: you started the Python server inside the wrong directory so the relative `../overlay-vanilla.js` path couldn't resolve. Start the server one level up and navigate with the `/demo/` prefix.
+
+### "Pushed to Claude ✨" toast appears but nothing happens in the terminal
+
+Either (a) you're not in a dev-flag session, or (b) an older channel server process is answering on 8788 and is stdio-connected to a dead session. See the two troubleshooting items above.
+
+### I want to uninstall
+
+1. Remove the plugin from Claude Code: `/plugin uninstall live-canvas-channel`
+2. Delete the marketplace: `/plugin marketplace remove live-canvas-marketplace`
+3. Remove the dev flag from your alias/shortcut
+4. Rerun liteagents installer in remove mode (or delete `~/.claude/skills/live-canvas/` and `~/.claude/plugins/live-canvas-marketplace/` by hand)
+
+---
+
+## Why the multi-step setup can't be hidden
+
+The `--dangerously-load-development-channels` flag is a per-session startup argument of Claude Code itself. A running session can't promote itself to channel-enabled mid-flight; only the next session launched with the flag gets it. Same reason a skill can't silently do `/plugin install` on your behalf — the plugin system needs explicit user consent for research-preview plugins.
+
+Until channels leave research preview and custom channels are allowlisted, step 4 is the irreducible friction. The alias removes the retyping cost.
+
+---
+
+## Pointers
+
+- Plugin details: [`~/.claude/plugins/live-canvas-marketplace/plugins/live-canvas-channel/README.md`](../../plugins/live-canvas-marketplace/plugins/live-canvas-channel/README.md)
+- Skill flow: [`SKILL.md`](./SKILL.md)
+- Design principles reference: [`DESIGN_PRINCIPLES.md`](./DESIGN_PRINCIPLES.md)
+- Channels reference (upstream): <https://code.claude.com/docs/en/channels-reference>