agent-canvas 0.1.10 → 0.1.12

package/daemon/dist/index.html

@@ -4,7 +4,7 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>Agent Canvas</title>
-  <script>document.documentElement.dataset.theme = localStorage.getItem('canvas-theme') || 'dark';</script>
+  <script>!function(){var p=localStorage.getItem('canvas-theme')||'auto';document.documentElement.dataset.theme=p==='auto'?(matchMedia('(prefers-color-scheme:dark)').matches?'dark':'light'):p}()</script>
   <link rel="stylesheet" href="/assets/client.css" />
   <link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.11.1/styles/github-dark-dimmed.min.css" />
   <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

package/daemon/src/compiler.ts

@@ -33,22 +33,28 @@ export async function compilePlan(jsx: string, projectRoot?: string): Promise<Co
   try {
     writeFileSync(tmpFile, source);
 
-    const result = await Bun.build({
-      entrypoints: [tmpFile],
-      format: "esm",
-      external: ["react", "react-dom", "#canvas/components", "#canvas/runtime"],
-    });
-
-    if (!result.success) {
-      const errors = result.logs
-        .filter((l) => l.level === "error")
-        .map((l) => l.message)
-        .join("\n");
-      return { ok: false, error: errors || "Compilation failed" };
-    }
+    try {
+      const result = await Bun.build({
+        entrypoints: [tmpFile],
+        format: "esm",
+        external: ["react", "react-dom", "#canvas/components", "#canvas/runtime"],
+      });
+
+      if (!result.success) {
+        const errors = result.logs
+          .filter((l) => l.level === "error")
+          .map((l) => l.message)
+          .join("\n");
+        return { ok: false, error: errors || "Compilation failed" };
+      }
 
-    const js = await result.outputs[0].text();
-    return { ok: true, js };
+      const js = await result.outputs[0].text();
+      return { ok: true, js };
+    } catch {
+      // Bun.build() can throw "Unknown Error, TODO" in long-running processes
+      // when its internal bundler state gets corrupted. Fall back to subprocess.
+      return await compilePlanSubprocess(tmpFile);
+    }
   } catch (e: any) {
     return { ok: false, error: e.message };
   } finally {
@@ -56,6 +62,28 @@ export async function compilePlan(jsx: string, projectRoot?: string): Promise<Co
   }
 }
 
+async function compilePlanSubprocess(tmpFile: string): Promise<CompileResult> {
+  const outFile = `${tmpFile}.out.js`;
+  const proc = Bun.spawn(
+    ["bun", "build", tmpFile, "--format=esm",
+      "--external=react", "--external=react-dom",
+      "--external=#canvas/components", "--external=#canvas/runtime",
+      "--outfile", outFile],
+    { stdout: "pipe", stderr: "pipe" },
+  );
+  const exitCode = await proc.exited;
+  if (exitCode !== 0) {
+    const stderr = await new Response(proc.stderr).text();
+    return { ok: false, error: stderr || "Compilation failed" };
+  }
+  try {
+    const js = readFileSync(outFile, "utf-8");
+    return { ok: true, js };
+  } finally {
+    try { unlinkSync(outFile); } catch {}
+  }
+}
+
 /**
  * Find <Markdown file="..." /> tags and inject __content with the file contents
  * resolved at compile time.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agent-canvas",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "description": "Interactive visual canvas for Claude Code — rich annotatable documents in the browser",
   "bin": {
     "agent-canvas": "bin/agent-canvas.js"

package/skills/canvas/SKILL.md

@@ -57,32 +57,37 @@ This opens the canvas in the user's browser (first time) and exits immediately.
 
 ### Waiting for feedback
 
-After pushing, wait for the user to review and submit:
+After pushing, start the watch command **in the background** using the Bash tool's `run_in_background` parameter:
 
 ```bash
+# Use Bash tool with run_in_background: true
 bunx agent-canvas watch --session ${CLAUDE_SESSION_ID}
 ```
 
-This **blocks until the user submits feedback**, then prints feedback markdown to stdout. If feedback was already submitted but not yet consumed, it returns immediately with the existing feedback.
+This runs the watch process in the background. You will be **automatically notified** when the user submits feedback — the output will contain the feedback markdown. Do NOT poll, sleep, or proactively check on it. Just stop and wait for the notification.
 
-**Timeout handling**: The watch command may time out if the user takes a while to review. If it times out, don't retry automatically — wait for the user to tell you they've submitted feedback, then run the watch command again (or use `fetch`) to retrieve it.
+If feedback was already submitted but not yet consumed, the command returns immediately with the existing feedback.
+
+**Important**: After starting the background watch, do not continue with other work unless instructed. Wait for the notification that feedback has arrived before proceeding.
 
 ### Checking for feedback without blocking
 
-Use `fetch` to check for feedback without waiting:
+Use `fetch` to retrieve feedback if the user tells you they've already submitted:
 
 ```bash
 bunx agent-canvas fetch --session ${CLAUDE_SESSION_ID}
 ```
 
-Returns immediately — prints feedback to stdout if available, otherwise produces no output. Use this to retry after a timeout or when the user tells you they've submitted.
+Returns immediately — prints feedback to stdout if available, otherwise produces no output. Use this when the user tells you they've submitted feedback (e.g. after a reconnect or if the background watch was lost).
 
 ### Iterating
 
-Use the **Edit** tool to modify the existing JSX based on feedback — targeted edits, not full rewrites. Then push and wait again:
+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)"
+
+# Use Bash tool with run_in_background: true
 bunx agent-canvas watch --session ${CLAUDE_SESSION_ID}
 ```
 
@@ -109,12 +114,15 @@ Maintain separate files for different phases:
 
 ```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}
 ```
 
@@ -156,7 +164,7 @@ User wants to make a decision?
 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
-5. **IMMEDIATELY watch** — run `bunx agent-canvas watch --session ${CLAUDE_SESSION_ID}` right after push, in the same response. Never stop after pushing. The push→watch sequence is atomic: no push without a watch. The watch blocks until the user submits feedback.
+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
 8. **After implementation**, push a summary canvas

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 `bunx agent-canvas watch --session ${CLAUDE_SESSION_ID}` to block for 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 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.
 
 ---