agent-canvas 0.1.9 → 0.1.11

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>
@@ -42,7 +42,7 @@
   --color-highlight-bg: rgba(255, 220, 100, 0.15);
   --color-highlight-border: rgba(255, 220, 100, 0.35);
   --color-highlight-annotation: rgba(255, 220, 100, 0.18);
-  --color-highlight-active: rgba(255, 220, 100, 0.25);
+  --color-highlight-active: rgba(255, 220, 100, 0.35);
   --color-highlight-selected: rgba(255, 220, 100, 0.10);
 
   --color-badge-bg: rgba(196, 154, 58, 0.20);

package/daemon/src/handlers/uploads.ts

@@ -0,0 +1,62 @@
+import { writeFileSync } from "fs";
+import { join } from "path";
+import { UPLOADS_DIR } from "../paths";
+import type { SessionManager } from "../session";
+import { jsonResponse } from "./utils";
+import type { Route } from "../router";
+
+const IMAGE_MIME: Record<string, string> = {
+  png: "image/png", jpg: "image/jpeg", jpeg: "image/jpeg",
+  gif: "image/gif", svg: "image/svg+xml", webp: "image/webp",
+  bmp: "image/bmp", avif: "image/avif",
+};
+
+export function createUploadHandlers(sessionManager: SessionManager): Route[] {
+  async function handleUpload(req: Request, _url: URL, match: URLPatternResult): Promise<Response> {
+    const sessionId = match.pathname.groups.id!;
+    if (!sessionManager.get(sessionId)) {
+      return jsonResponse({ error: "Session not found" }, 404);
+    }
+
+    const formData = await req.formData();
+    const file = formData.get("image") as File | null;
+    if (!file) return jsonResponse({ error: "No image provided" }, 400);
+    if (!file.type.startsWith("image/")) return jsonResponse({ error: "Not an image" }, 400);
+    if (file.size > 10 * 1024 * 1024) return jsonResponse({ error: "Image too large (max 10MB)" }, 413);
+
+    const ext = file.name.split(".").pop()?.toLowerCase() || "png";
+    const filename = `${crypto.randomUUID()}.${ext}`;
+    const filepath = join(UPLOADS_DIR, filename);
+
+    const buffer = await file.arrayBuffer();
+    writeFileSync(filepath, Buffer.from(buffer));
+
+    return jsonResponse({ path: filepath, filename });
+  }
+
+  async function handleUploadServe(_req: Request, _url: URL, match: URLPatternResult): Promise<Response> {
+    const filename = match.pathname.groups.filename!;
+    if (filename.includes("/") || filename.includes("..")) {
+      return jsonResponse({ error: "Invalid filename" }, 400);
+    }
+
+    const filepath = join(UPLOADS_DIR, filename);
+    const file = Bun.file(filepath);
+    if (!(await file.exists())) return jsonResponse({ error: "Not found" }, 404);
+
+    const ext = filename.split(".").pop()?.toLowerCase() || "";
+    const mime = IMAGE_MIME[ext] || "application/octet-stream";
+
+    return new Response(file, {
+      headers: {
+        "Content-Type": mime,
+        "Cache-Control": "public, max-age=3600",
+      },
+    });
+  }
+
+  return [
+    { method: "POST", pattern: new URLPattern({ pathname: "/api/session/:id/upload" }), handler: handleUpload },
+    { method: "GET", pattern: new URLPattern({ pathname: "/api/uploads/:filename" }), handler: handleUploadServe },
+  ];
+}

package/daemon/src/paths.ts

@@ -17,6 +17,10 @@ export const PID_FILE = join(TEMP_DIR, "daemon.pid");
 /** Temp dir for JSX compilation */
 export const COMPILE_TEMP_DIR = join(TEMP_DIR, "compile");
 
+/** Uploaded annotation images */
+export const UPLOADS_DIR = join(TEMP_DIR, "uploads");
+
 // Ensure dirs exist
 mkdirSync(SESSIONS_DIR, { recursive: true });
 mkdirSync(COMPILE_TEMP_DIR, { recursive: true });
+mkdirSync(UPLOADS_DIR, { recursive: true });

package/daemon/src/server.ts

@@ -8,6 +8,7 @@ import { jsonResponse, corsHeaders } from "./handlers/utils";
 import { createApiHandlers } from "./handlers/api";
 import { createFileHandlers } from "./handlers/files";
 import { createStaticHandlers } from "./handlers/static";
+import { createUploadHandlers } from "./handlers/uploads";
 
 const PORT = parseInt(process.env.CANVAS_PORT || "19400", 10);
 
@@ -22,6 +23,7 @@ const wsManager = createWebSocketManager(sessionManager);
 const routes = [
   ...createApiHandlers({ sessionManager, broadcastPlanUpdate: wsManager.broadcastPlanUpdate, port: PORT }),
   ...createFileHandlers(sessionManager),
+  ...createUploadHandlers(sessionManager),
   ...createStaticHandlers(),
 ];
 

package/daemon/src/session.ts

@@ -2,6 +2,11 @@ import { mkdirSync, writeFileSync, readFileSync, existsSync, readdirSync, rmSync
 import { join } from "path";
 import { SESSIONS_DIR } from "./paths";
 
+export interface DiffStats {
+  added: number;
+  removed: number;
+}
+
 export interface RevisionInfo {
   revision: number;
   label?: string;
@@ -10,6 +15,7 @@ export interface RevisionInfo {
   hasFeedback: boolean;
   feedbackConsumed: boolean;
   response?: string;
+  diffStats?: DiffStats;
 }
 
 export interface SessionData {
@@ -40,6 +46,27 @@ interface LegacyMeta {
 
 const STALE_TIMEOUT_MS = 24 * 60 * 60 * 1000; // 24 hours
 
+function computeLineDiffStats(oldText: string, newText: string): DiffStats {
+  const oldLines = oldText.split("\n");
+  const newLines = newText.split("\n");
+  const m = oldLines.length, n = newLines.length;
+
+  // LCS length via two-row DP (O(n) space)
+  let prev = new Uint32Array(n + 1);
+  let curr = new Uint32Array(n + 1);
+  for (let i = 1; i <= m; i++) {
+    for (let j = 1; j <= n; j++) {
+      curr[j] = oldLines[i - 1] === newLines[j - 1]
+        ? prev[j - 1] + 1
+        : Math.max(prev[j], curr[j - 1]);
+    }
+    [prev, curr] = [curr, prev];
+    curr.fill(0);
+  }
+  const lcsLen = prev[n];
+  return { added: n - lcsLen, removed: m - lcsLen };
+}
+
 export class SessionManager {
   private sessions = new Map<string, SessionData>();
 
@@ -162,7 +189,18 @@ export class SessionManager {
     const now = new Date().toISOString();
     const revision = existing ? existing.currentRevision + 1 : 1;
 
-    const revInfo: RevisionInfo = { revision, createdAt: now, hasFeedback: false, feedbackConsumed: false, ...(label ? { label } : {}), ...(sourceFile ? { sourceFile } : {}), ...(response ? { response } : {}) };
+    let diffStats: DiffStats | undefined;
+    if (existing && sourceFile) {
+      const prev = [...existing.revisions]
+        .reverse()
+        .find((r) => r.sourceFile === sourceFile);
+      if (prev) {
+        const prevJsx = this.readRevisionJsx(id, prev.revision);
+        if (prevJsx) diffStats = computeLineDiffStats(prevJsx, jsx);
+      }
+    }
+
+    const revInfo: RevisionInfo = { revision, createdAt: now, hasFeedback: false, feedbackConsumed: false, ...(label ? { label } : {}), ...(sourceFile ? { sourceFile } : {}), ...(response ? { response } : {}), ...(diffStats ? { diffStats } : {}) };
     const revisions = existing ? [...existing.revisions, revInfo] : [revInfo];
 
     const session: SessionData = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agent-canvas",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "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.
 
 ---
 

package/hooks/session-start.sh

@@ -1,13 +0,0 @@
-#!/bin/bash
-# Injects CANVAS_SESSION_ID and CANVAS_PROJECT_ROOT into Claude Code environment.
-# Called by Claude Code's SessionStart hook.
-
-if [ -n "$CLAUDE_ENV_FILE" ]; then
-  # Extract session ID from CLAUDE_ENV_FILE path:
-  # /home/.../.claude/session-env/<SESSION_ID>/sessionstart-hook-0.sh
-  SESSION_ID=$(basename "$(dirname "$CLAUDE_ENV_FILE")")
-  CWD="${CLAUDE_PROJECT_DIR:-$(pwd)}"
-
-  echo "export CANVAS_SESSION_ID=$SESSION_ID" >> "$CLAUDE_ENV_FILE"
-  echo "export CANVAS_PROJECT_ROOT=$CWD" >> "$CLAUDE_ENV_FILE"
-fi