agent-canvas 0.1.13 → 0.1.15

package/daemon/src/watcher.ts

@@ -1,59 +1,71 @@
-import { watch, existsSync, readFileSync } from "fs";
+import { watch, existsSync, readFileSync, readdirSync } from "fs";
+import { join } from "path";
 import { compilePlan } from "./compiler";
 import type { SessionManager } from "./session";
 
 type BroadcastFn = (sessionId: string) => void;
 
-const watchers = new Map<string, ReturnType<typeof watch>>();
+const watchers = new Map<string, ReturnType<typeof watch>[]>();
 
 export function watchSession(
   sessionId: string,
   sessionManager: SessionManager,
   broadcast: BroadcastFn,
 ) {
-  // Close existing watcher for this session (revision may have changed)
+  // Close existing watchers for this session
   unwatchSession(sessionId);
 
   const session = sessionManager.get(sessionId);
   if (!session) return;
 
-  const planPath = sessionManager.getRevisionJsxPath(sessionId, session.currentRevision);
-  if (!existsSync(planPath)) return;
-
-  let debounceTimer: ReturnType<typeof setTimeout> | null = null;
   const rev = session.currentRevision;
+  const canvasFiles = sessionManager.getRevisionCanvasFiles(sessionId, rev);
+  if (canvasFiles.length === 0) return;
+
+  const fileWatchers: ReturnType<typeof watch>[] = [];
+  const debounceTimers = new Map<string, ReturnType<typeof setTimeout>>();
+
+  for (const filename of canvasFiles) {
+    const filePath = sessionManager.getRevisionJsxPath(sessionId, rev, filename);
+    if (!existsSync(filePath)) continue;
+
+    const watcher = watch(filePath, async (event) => {
+      if (event !== "change") return;
+
+      // Debounce per-file
+      const existing = debounceTimers.get(filename);
+      if (existing) clearTimeout(existing);
+
+      debounceTimers.set(filename, setTimeout(async () => {
+        debounceTimers.delete(filename);
+        try {
+          const jsx = readFileSync(filePath, "utf-8");
+          const result = await compilePlan(jsx, session.projectRoot);
+          if (result.ok) {
+            sessionManager.saveCompiled(sessionId, filename, result.js, rev);
+            broadcast(sessionId);
+          }
+        } catch {}
+      }, 200));
+    });
+
+    fileWatchers.push(watcher);
+  }
 
-  const watcher = watch(planPath, async (event) => {
-    if (event !== "change") return;
-
-    // Debounce — Claude Code may do multiple rapid edits
-    if (debounceTimer) clearTimeout(debounceTimer);
-    debounceTimer = setTimeout(async () => {
-      try {
-        const jsx = readFileSync(planPath, "utf-8");
-        const result = await compilePlan(jsx, session.projectRoot);
-        if (result.ok) {
-          sessionManager.saveCompiled(sessionId, result.js, rev);
-          broadcast(sessionId);
-        }
-      } catch {}
-    }, 200);
-  });
-
-  watchers.set(sessionId, watcher);
+  watchers.set(sessionId, fileWatchers);
 }
 
 export function unwatchSession(sessionId: string) {
-  const watcher = watchers.get(sessionId);
-  if (watcher) {
-    watcher.close();
+  const sessionWatchers = watchers.get(sessionId);
+  if (sessionWatchers) {
+    for (const w of sessionWatchers) w.close();
     watchers.delete(sessionId);
   }
 }
 
 export function unwatchAll() {
-  for (const [id, watcher] of watchers) {
-    watcher.close();
+  for (const [, sessionWatchers] of watchers) {
+    for (const w of sessionWatchers) w.close();
   }
   watchers.clear();
 }

package/package.json

@@ -1,18 +1,19 @@
 {
   "name": "agent-canvas",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "description": "Interactive visual canvas for Claude Code — rich annotatable documents in the browser",
   "bin": {
     "agent-canvas": "bin/agent-canvas.js"
   },
-"scripts": {
+  "scripts": {
     "build": "bun daemon/build.ts",
     "typecheck": "tsc --noEmit && tsc --noEmit -p daemon/tsconfig.json",
     "prepublishOnly": "bun daemon/build.ts"
   },
   "dependencies": {
     "marked": "^17.0.4",
-    "preact": "^10.25.0"
+    "preact": "^10.25.0",
+    "preact-render-to-string": "^6.6.6"
   },
   "devDependencies": {
     "@tailwindcss/cli": "4",

package/skills/canvas/SKILL.md

@@ -47,13 +47,13 @@ Components are auto-available — no imports needed. The file is a JSX fragment
 
 ### Pushing
 
-After writing the file, push it to open the canvas in the browser:
+After writing canvas files, push the directory to open all canvases in the browser:
 
 ```bash
-bunx agent-canvas push .claude/agent-canvas/${CLAUDE_SESSION_ID}/plan.jsx --session ${CLAUDE_SESSION_ID} --label "Implementation Plan"
+bunx agent-canvas push .claude/agent-canvas/${CLAUDE_SESSION_ID}/ --session ${CLAUDE_SESSION_ID} --label "Implementation Plan"
 ```
 
-This opens the canvas in the user's browser (first time) and exits immediately. The round label defaults to the filename if `--label` is omitted. **Always show the `browserUrl` from the push output to the user** so they can open the canvas manually if auto-open didn't work.
+This pushes all `*.jsx` files in the directory as a snapshot (like a git commit). Each file appears as a separate tab in the browser. The canvas opens in the user's browser (first time) and the command exits immediately. **Always show the `browserUrl` from the push output to the user** so they can open the canvas manually if auto-open didn't work.
 
 ### Waiting for feedback
 
@@ -85,20 +85,20 @@ Returns immediately — prints feedback to stdout if available, otherwise produc
 Use the **Edit** tool to modify the existing JSX based on feedback — targeted edits, not full rewrites. Then push and watch again:
 
 ```bash
-bunx agent-canvas push .claude/agent-canvas/${CLAUDE_SESSION_ID}/plan.jsx --session ${CLAUDE_SESSION_ID} --label "Implementation Plan (revised)"
+bunx agent-canvas push .claude/agent-canvas/${CLAUDE_SESSION_ID}/ --session ${CLAUDE_SESSION_ID} --label "Implementation Plan (revised)"
 
 # Use Bash tool with run_in_background: true
 bunx agent-canvas watch --session ${CLAUDE_SESSION_ID}
 ```
 
-Each push creates a new **round** — the user sees previous rounds and their feedback in the UI.
+Each push creates a new **round** (revision) — all canvas files are snapshotted. The user sees which files changed in the revision selector.
 
 ### Responding to feedback
 
 When pushing a revised canvas after receiving user feedback, use `--response` to tell the user how you addressed their feedback. The response renders as a short banner at the top of the canvas.
 
 ```bash
-bunx agent-canvas push .claude/agent-canvas/${CLAUDE_SESSION_ID}/plan.jsx --session ${CLAUDE_SESSION_ID} --label "Plan (revised)" --response "Incorporated all feedback. Switched to connection pooling as suggested. I kept the sync approach for writes — see the note in Phase 2 for my reasoning."
+bunx agent-canvas push .claude/agent-canvas/${CLAUDE_SESSION_ID}/ --session ${CLAUDE_SESSION_ID} --label "Plan (revised)" --response "Incorporated all feedback. Switched to connection pooling as suggested. I kept the sync approach for writes — see the note in Phase 2 for my reasoning."
 ```
 
 Use `--response` to:
@@ -110,20 +110,25 @@ Keep it concise (2-4 sentences). The user can see the diff in the canvas UI, so
 
 ### Multiple Canvases
 
-Maintain separate files for different phases:
+All `*.jsx` files in the canvas directory are pushed together as a snapshot. Each file appears as a separate tab in the browser. Use different files for different phases or concerns:
+
+```
+.claude/agent-canvas/${CLAUDE_SESSION_ID}/
+  discovery.jsx    # Discovery interview
+  requirements.jsx # Requirements spec
+  plan.jsx         # Implementation plan
+```
+
+Write new files as phases progress, then push the directory. Previous phase files remain visible as context. The user can annotate any canvas and submit one combined feedback per revision.
 
 ```bash
-bunx agent-canvas push .claude/agent-canvas/${CLAUDE_SESSION_ID}/discovery.jsx --session ${CLAUDE_SESSION_ID} --label "Discovery"
-# watch with run_in_background: true, wait for notification
-bunx agent-canvas watch --session ${CLAUDE_SESSION_ID}
-# ... process feedback ...
-bunx agent-canvas push .claude/agent-canvas/${CLAUDE_SESSION_ID}/requirements.jsx --session ${CLAUDE_SESSION_ID} --label "Requirements"
-# watch with run_in_background: true, wait for notification
-bunx agent-canvas watch --session ${CLAUDE_SESSION_ID}
-# ... process feedback ...
-bunx agent-canvas push .claude/agent-canvas/${CLAUDE_SESSION_ID}/plan.jsx --session ${CLAUDE_SESSION_ID} --label "Implementation Plan"
-# watch with run_in_background: true, wait for notification
-bunx agent-canvas watch --session ${CLAUDE_SESSION_ID}
+# Write discovery.jsx first, push and get feedback
+bunx agent-canvas push .claude/agent-canvas/${CLAUDE_SESSION_ID}/ --session ${CLAUDE_SESSION_ID} --label "Discovery"
+bunx agent-canvas watch --session ${CLAUDE_SESSION_ID}  # run_in_background: true
+
+# Later, add requirements.jsx, push again — both files visible as tabs
+bunx agent-canvas push .claude/agent-canvas/${CLAUDE_SESSION_ID}/ --session ${CLAUDE_SESSION_ID} --label "Requirements"
+bunx agent-canvas watch --session ${CLAUDE_SESSION_ID}  # run_in_background: true
 ```
 
 ### File Location
@@ -163,7 +168,7 @@ User wants to make a decision?
 1. **Determine flow** from user intent
 2. **Announce** briefly: "I'll start with discovery, then create a detailed plan."
 3. **Write canvas JSX** with the Write tool to `.claude/agent-canvas/${CLAUDE_SESSION_ID}/<name>.jsx`
-4. **Push + tell the user**: Push the canvas and show the `browserUrl` from the output so the user can open it
+4. **Push the directory + tell the user**: Push with `bunx agent-canvas push .claude/agent-canvas/${CLAUDE_SESSION_ID}/ --session ${CLAUDE_SESSION_ID}` and show the `browserUrl` from the output so the user can open it
 5. **IMMEDIATELY watch in background** — run `bunx agent-canvas watch --session ${CLAUDE_SESSION_ID}` with `run_in_background: true` right after push. Never stop after pushing. The push→watch sequence is atomic: no push without a watch. You will be notified when feedback arrives — do not poll or sleep.
 6. **Read feedback** — check for annotations, answers, added context files, approval
 7. **Edit with the Edit tool and re-push + watch**, or advance to next phase

package/skills/canvas/components.md

@@ -3,6 +3,20 @@
 All components are available globally in canvas JSX — no imports needed.
 For inline styling use `style={{ ... }}`. Tailwind classes are NOT available.
 
+## Theming
+
+**Never hardcode hex colors** — canvas supports light/dark themes. Use CSS variables in `style={{ }}`:
+
+- **Text:** `--color-text-primary`, `--color-text-secondary`, `--color-text-tertiary`, `--color-text-code`, `--color-text-inverse`
+- **Backgrounds:** `--color-bg-base`, `--color-bg-surface`, `--color-bg-elevated`, `--color-bg-code`, `--color-bg-input`
+- **Accents:** `--color-accent-{green,amber,red,blue}`, `--color-accent-{green,amber,red,blue}-muted`
+- **Borders:** `--color-border-subtle`, `--color-border-medium`, `--color-border-hover`
+- **Fonts:** `--font-heading`, `--font-body`, `--font-mono`
+
+```jsx
+<span style={{ color: 'var(--color-text-tertiary)', fontSize: '0.75rem' }}>meta text</span>
+```
+
 ---
 
 ## Layout
@@ -333,10 +347,10 @@ When you use the full module format (`export default function Canvas()`), you ca
 
 ```jsx
 function Metric({ label, value, trend }) {
-  const color = trend === 'up' ? '#4a9e6d' : trend === 'down' ? '#c45a5a' : '#a09a92';
+  const color = trend === 'up' ? 'var(--color-accent-green)' : trend === 'down' ? 'var(--color-accent-red)' : 'var(--color-text-secondary)';
   return (
     <div style={{ display: 'flex', gap: 12, alignItems: 'baseline' }}>
-      <span style={{ color: '#6b6560', fontSize: '0.75rem' }}>{label}</span>
+      <span style={{ color: 'var(--color-text-tertiary)', fontSize: '0.75rem' }}>{label}</span>
       <span style={{ color, fontSize: '1.25rem', fontWeight: 600 }}>{value}</span>
     </div>
   );
@@ -360,27 +374,27 @@ Standard components remain available without import even in full module format.
 ## Diagrams with Raw SVG
 
 For custom visuals that Mermaid can't express, write `<svg>` directly.
-Use Canvas CSS variables for colors to match the theme:
+Use CSS variables for colors to match the theme automatically:
 
 ```jsx
 <svg viewBox="0 0 400 200" style={{ width: '100%', maxWidth: 400 }}>
-  <rect x="10" y="10" width="120" height="50" rx="8" 
-        fill="rgba(90, 142, 196, 0.12)" stroke="rgba(90, 142, 196, 0.3)" />
-  <text x="70" y="40" textAnchor="middle" fill="#e8e4df" fontSize="13" 
-        fontFamily="Inter, sans-serif">API Gateway</text>
-  
-  <line x1="130" y1="35" x2="180" y2="35" stroke="#6b6560" strokeWidth="1.5"
+  <rect x="10" y="10" width="120" height="50" rx="8"
+        fill="var(--color-accent-blue-muted)" stroke="var(--color-accent-blue)" strokeOpacity="0.3" />
+  <text x="70" y="40" textAnchor="middle" fill="var(--color-text-primary)" fontSize="13"
+        fontFamily="var(--font-body)">API Gateway</text>
+
+  <line x1="130" y1="35" x2="180" y2="35" stroke="var(--color-text-tertiary)" strokeWidth="1.5"
         markerEnd="url(#arrow)" />
-  
+
   <rect x="180" y="10" width="120" height="50" rx="8"
-        fill="rgba(74, 158, 109, 0.12)" stroke="rgba(74, 158, 109, 0.3)" />
-  <text x="240" y="40" textAnchor="middle" fill="#e8e4df" fontSize="13"
-        fontFamily="Inter, sans-serif">Auth Service</text>
-  
+        fill="var(--color-accent-green-muted)" stroke="var(--color-accent-green)" strokeOpacity="0.3" />
+  <text x="240" y="40" textAnchor="middle" fill="var(--color-text-primary)" fontSize="13"
+        fontFamily="var(--font-body)">Auth Service</text>
+
   <defs>
     <marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6"
             orient="auto-start-reverse">
-      <path d="M 0 0 L 10 5 L 0 10 z" fill="#6b6560" />
+      <path d="M 0 0 L 10 5 L 0 10 z" fill="var(--color-text-tertiary)" />
     </marker>
   </defs>
 </svg>

package/skills/canvas/flows.md

@@ -2,7 +2,7 @@
 
 Each flow is a sequence of canvas rounds. Phases can be skipped or combined based on context.
 
-**Tooling reminder**: Write all `.jsx` files using the **Write** tool to `.claude/agent-canvas/${CLAUDE_SESSION_ID}/`. Edit them with the **Edit** tool. Push with `bunx agent-canvas push .claude/agent-canvas/${CLAUDE_SESSION_ID}/<file>.jsx --session ${CLAUDE_SESSION_ID} --label "<Label>"`, then run `bunx agent-canvas watch --session ${CLAUDE_SESSION_ID}` with `run_in_background: true` — you'll be notified when the user submits feedback. The JSX blocks below show what to write — they are the file content, not bash commands.
+**Tooling reminder**: Write all `.jsx` files using the **Write** tool to `.claude/agent-canvas/${CLAUDE_SESSION_ID}/`. Edit them with the **Edit** tool. Push the directory with `bunx agent-canvas push .claude/agent-canvas/${CLAUDE_SESSION_ID}/ --session ${CLAUDE_SESSION_ID} --label "<Label>"`, then run `bunx agent-canvas watch --session ${CLAUDE_SESSION_ID}` with `run_in_background: true` — you'll be notified when the user submits feedback. All `.jsx` files in the directory are pushed as a snapshot — each shows as a tab in the browser. The JSX blocks below show what to write — they are the file content, not bash commands.
 
 ---