agent-canvas 0.1.8 → 0.1.10

package/daemon/dist/index.html

@@ -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.8",
+  "version": "0.1.10",
   "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

@@ -155,12 +155,11 @@ 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**: `bunx agent-canvas push .claude/agent-canvas/${CLAUDE_SESSION_ID}/<name>.jsx --session ${CLAUDE_SESSION_ID} --label "<Label>"`
-5. **Tell the user** the canvas is ready for review (they see it in their browser)
-6. **Wait**: `bunx agent-canvas watch --session ${CLAUDE_SESSION_ID}` — this blocks until the user submits feedback
-7. **Read feedback** — check for annotations, answers, added context files, approval
-8. **Edit with the Edit tool and re-push + wait**, or advance to next phase
-9. **After implementation**, push a summary canvas
+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.
+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
 
 ## Interview Integration
 

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