agent-canvas 0.2.0 → 0.6.0

package/daemon/tsconfig.json

@@ -1,21 +1,21 @@
 {
-  "compilerOptions": {
-    "target": "ESNext",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "jsx": "react-jsx",
-    "strict": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "noEmit": true,
-    "types": ["@types/bun"],
-    "paths": {
-      "#canvas/runtime": ["./client/canvas-runtime.ts"],
-      "#canvas/components": ["./client/components/index.ts"]
-    }
-  },
-  "include": ["src/**/*", "client/**/*"],
-  "exclude": [
-    "src/share-e2e.test.ts"
-  ]
+	"compilerOptions": {
+		"target": "ESNext",
+		"module": "ESNext",
+		"moduleResolution": "bundler",
+		"jsx": "react-jsx",
+		"strict": true,
+		"esModuleInterop": true,
+		"skipLibCheck": true,
+		"noEmit": true,
+		"types": ["@types/bun"],
+		"paths": {
+			"#canvas/runtime": ["./client/canvas-runtime.ts"],
+			"#canvas/components": ["./client/components/index.ts"]
+		}
+	},
+	"include": ["src/**/*", "client/**/*"],
+	"exclude": [
+		"src/share-e2e.test.ts"
+	]
 }

package/package.json

@@ -1,49 +1,49 @@
 {
-  "name": "agent-canvas",
-  "version": "0.2.0",
-  "description": "Interactive visual canvas for Claude Code — rich annotatable documents in the browser",
-  "bin": {
-    "agent-canvas": "bin/agent-canvas.js"
-  },
-  "files": [
-    "bin",
-    "daemon",
-    "skills"
-  ],
-  "scripts": {
-    "build": "bun daemon/build.ts",
-    "check:versions": "bun scripts/check-release-versions.ts",
-    "typecheck": "tsc --noEmit && tsc --noEmit -p daemon/tsconfig.json",
-    "test": "bun test",
-    "prepublishOnly": "bun daemon/build.ts"
-  },
-  "dependencies": {
-    "@fabrika/annotations": "0.2.0",
-    "@fabrika/canvas-kernel": "0.2.0",
-    "@fabrika/daemon-kit": "0.2.0",
-    "marked": "^17.0.4",
-    "mermaid-parser-bundle": "^0.1.2",
-    "preact": "^10.25.0",
-    "preact-render-to-string": "^6.6.6"
-  },
-  "devDependencies": {
-    "@tailwindcss/cli": "4",
-    "@types/bun": "^1.3.10",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "tailwindcss": "4",
-    "typescript": "^5.9.3"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/contember/agent-canvas"
-  },
-  "workspaces": ["workers/*"],
-  "license": "MIT",
-  "keywords": [
-    "claude-code",
-    "canvas",
-    "interactive",
-    "annotations"
-  ]
+	"name": "agent-canvas",
+	"version": "0.6.0",
+	"description": "Interactive visual canvas for Claude Code — rich annotatable documents in the browser",
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/contember/fabrika-platform.git",
+		"directory": "packages/agent-canvas"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"bin": {
+		"agent-canvas": "./bin/agent-canvas.js"
+	},
+	"files": [
+		"bin",
+		"daemon",
+		"daemon/dist",
+		"skills"
+	],
+	"exports": {
+		"./package.json": "./package.json"
+	},
+	"scripts": {
+		"build": "bun daemon/build.ts",
+		"release:prepare": "bun run build",
+		"typecheck": "tsc --noEmit && tsc --noEmit -p daemon/tsconfig.json && tsc --noEmit -p daemon/review-widget/tsconfig.json",
+		"test": "bun test"
+	},
+	"dependencies": {
+		"@fabrika/annotations": "0.6.0",
+		"@fabrika/canvas-kernel": "0.6.0",
+		"@fabrika/daemon-kit": "0.6.0",
+		"@jridgewell/trace-mapping": "^0.3.31",
+		"marked": "^17.0.4",
+		"mermaid-parser-bundle": "^0.1.2",
+		"preact": "^10.25.0",
+		"preact-render-to-string": "^6.6.6",
+		"zod": "^3.25.76"
+	},
+	"keywords": [
+		"claude-code",
+		"canvas",
+		"interactive",
+		"annotations"
+	]
 }

package/skills/canvas/SKILL.md

@@ -9,7 +9,6 @@ description: >
   implementation summaries, proposals, decision documents, explanations, and
   runbooks that hand local secrets to commands without putting values in context.
 disable-model-invocation: true
-
 ---
 
 ## Session
@@ -29,6 +28,10 @@ fresh, so the variable will not survive between commands.
 
 ## Instructions
 
+Always use absolute filesystem paths for local file references in canvas components
+(such as `FilePreview`), and verify that the referenced files exist. Resolve them
+against the user's project directory, not the temporary directory containing the JSX.
+
 Run these commands from the user's project root before using Canvas:
 
 ```bash
@@ -37,3 +40,8 @@ bunx agent-canvas instructions --list
 ```
 
 **Getting detailed docs**: Run `bunx agent-canvas instructions <topic>` for detailed documentation on any component or flow. For example: `bunx agent-canvas instructions component-mermaid` or `bunx agent-canvas instructions flow-feature`.
+
+## Reviewing a running application
+
+When the user wants to comment on a running application instead of a canvas, follow
+`bunx agent-canvas instructions app-review`. Review mode needs no session ID; it uses a project name.

package/bin/lib/commands/exec.test.ts

@@ -1,27 +0,0 @@
-import { describe, expect, test } from "bun:test";
-import { parseSecretAssignments, spawnWithSecretEnvironment } from "./exec";
-
-describe("secret-aware exec", () => {
-  test("parses explicit environment mappings", () => {
-    expect(parseSecretAssignments(["SERVICE_TOKEN=service-token", "API_KEY=api.key"])).toEqual([
-      { envName: "SERVICE_TOKEN", fieldId: "service-token" },
-      { envName: "API_KEY", fieldId: "api.key" },
-    ]);
-  });
-
-  test("rejects invalid and duplicate environment names", () => {
-    expect(() => parseSecretAssignments(["bad-name=token"])).toThrow("Invalid environment variable name");
-    expect(() => parseSecretAssignments(["TOKEN=first", "TOKEN=second"])).toThrow("Duplicate environment variable mapping");
-  });
-
-  test("injects the secret into the child environment", async () => {
-    const assignments = parseSecretAssignments(["RUNBOOK_TEST_TOKEN=service-token"]);
-    const exitCode = await spawnWithSecretEnvironment(
-      [process.execPath, "-e", "process.exit(process.env.RUNBOOK_TEST_TOKEN === 'test-value' ? 0 : 1)"],
-      assignments,
-      new Map([["service-token", "test-value"]]),
-    );
-
-    expect(exitCode).toBe(0);
-  });
-});

package/bin/lib/helpers.test.ts

@@ -1,79 +0,0 @@
-import { describe, expect, test } from "bun:test";
-import { waitForFeedback } from "./helpers";
-
-class FakeSocket {
-  onopen: ((event: Event) => void) | null = null;
-  onmessage: ((event: MessageEvent) => void) | null = null;
-  onerror: ((event: Event) => void) | null = null;
-  onclose: ((event: CloseEvent) => void) | null = null;
-
-  close(): void {}
-}
-
-describe("waitForFeedback", () => {
-  test("reconnects after an unexpected close", async () => {
-    const sockets: FakeSocket[] = [];
-    const result = waitForFeedback("session", {
-      createSocket: () => {
-        const socket = new FakeSocket();
-        sockets.push(socket);
-        queueMicrotask(() => {
-          if (sockets.length === 1) socket.onclose?.(new CloseEvent("close"));
-          else socket.onmessage?.(new MessageEvent("message", { data: JSON.stringify({ type: "submit", feedback: "Done" }) }));
-        });
-        return socket;
-      },
-      timeoutMs: 1_000,
-      reconnectAttempts: 1,
-      reconnectDelayMs: 0,
-    });
-
-    await expect(result).resolves.toBe("Done");
-    expect(sockets).toHaveLength(2);
-  });
-
-  test("rejects when the connection keeps closing", async () => {
-    const result = waitForFeedback("session", {
-      createSocket: () => {
-        const socket = new FakeSocket();
-        queueMicrotask(() => socket.onclose?.(new CloseEvent("close")));
-        return socket;
-      },
-      timeoutMs: 1_000,
-      reconnectAttempts: 2,
-      reconnectDelayMs: 0,
-    });
-
-    await expect(result).rejects.toThrow("WebSocket closed before feedback was submitted.");
-  });
-
-  test("reports a browser render error without reconnecting", async () => {
-    const sockets: FakeSocket[] = [];
-    const result = waitForFeedback("session", {
-      createSocket: () => {
-        const socket = new FakeSocket();
-        sockets.push(socket);
-        queueMicrotask(() => socket.onmessage?.(new MessageEvent("message", {
-          data: JSON.stringify({
-            type: "render-error",
-            error: {
-              revision: 3,
-              filename: "architecture.jsx",
-              message: "Table: required prop `headers` must be an array",
-              componentStack: "\n    at Table",
-            },
-          }),
-        })));
-        return socket;
-      },
-      timeoutMs: 1_000,
-      reconnectAttempts: 2,
-      reconnectDelayMs: 0,
-    });
-
-    await expect(result).rejects.toThrow(
-      "Canvas render failed in architecture.jsx (revision 3):\nTable: required prop `headers` must be an array",
-    );
-    expect(sockets).toHaveLength(1);
-  });
-});

package/daemon/src/remote-feedback.test.ts

@@ -1,165 +0,0 @@
-/**
- * Tests for the remote feedback poller. Uses a real SessionManager with
- * a real share recorded on a session, and mocks `fetch` to simulate
- * worker responses. Verifies persistence, broadcast, dedup, and backoff.
- */
-
-import { describe, expect, test, afterEach, beforeEach } from "bun:test";
-import { mkdtempSync, rmSync } from "fs";
-import { join } from "path";
-import { tmpdir } from "os";
-import { SessionManager } from "@fabrika/canvas-kernel/server";
-import { startRemoteFeedbackPoller } from "./remote-feedback";
-
-let testDir: string;
-beforeEach(() => {
-  testDir = mkdtempSync(join(tmpdir(), "canvas-rf-test-"));
-});
-afterEach(() => {
-  try { rmSync(testDir, { recursive: true, force: true }); } catch {}
-});
-
-function newSessionManager(): SessionManager {
-  return new SessionManager(testDir);
-}
-
-const originalFetch = globalThis.fetch;
-const originalEndpoint = process.env.CANVAS_SHARE_ENDPOINT;
-
-beforeEach(() => {
-  process.env.CANVAS_SHARE_ENDPOINT = "https://mock.example.com";
-});
-
-afterEach(() => {
-  globalThis.fetch = originalFetch;
-  if (originalEndpoint !== undefined) process.env.CANVAS_SHARE_ENDPOINT = originalEndpoint;
-  else delete process.env.CANVAS_SHARE_ENDPOINT;
-});
-
-function setupSession(sm: SessionManager): { sessionId: string; shareId: string } {
-  const sessionId = `test-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
-  const shareId = "abc123def456";
-  sm.upsert(sessionId, new Map([["plan.jsx", "x"]]), "/tmp");
-  sm.saveCompiled(sessionId, "plan.jsx", "x");
-  sm.addShare(sessionId, {
-    shareId,
-    url: "https://mock.example.com/s/" + shareId,
-    revision: 1,
-    createdAt: new Date().toISOString(),
-  });
-  return { sessionId, shareId };
-}
-
-describe("startRemoteFeedbackPoller", () => {
-  test("persists fetched entries and updates lastFeedbackAt", async () => {
-    const sm = newSessionManager();
-    const { sessionId, shareId } = setupSession(sm);
-
-    let calls = 0;
-    (globalThis as any).fetch = async (url: any) => {
-      calls++;
-      expect(String(url)).toContain(`/shares/${shareId}/feedback`);
-      return new Response(JSON.stringify({
-        entries: [{
-          id: "fb1",
-          shareId,
-          revision: 1,
-          submittedAt: "2026-04-09T10:00:00.000Z",
-          author: { id: "u1", name: "Alice" },
-          annotations: [{
-            id: "a1",
-            snippet: "x",
-            note: "good",
-            createdAt: "2026-04-09T10:00:00.000Z",
-          }],
-        }],
-        latestAt: "2026-04-09T10:00:00.000Z",
-      }), { status: 200 });
-    };
-
-    let broadcasted: { sessionId: string; revision: number; count: number }[] = [];
-    const broadcast = (sid: string, rev: number, entries: any[]) => {
-      broadcasted.push({ sessionId: sid, revision: rev, count: entries.length });
-    };
-
-    const poller = startRemoteFeedbackPoller(sm, broadcast, "0.0.0");
-    // Wait for at least one poll cycle
-    await new Promise((r) => setTimeout(r, 100));
-    poller.stop();
-
-    expect(calls).toBeGreaterThanOrEqual(1);
-    expect(broadcasted.length).toBeGreaterThanOrEqual(1);
-    expect(broadcasted[0].sessionId).toBe(sessionId);
-    expect(broadcasted[0].revision).toBe(1);
-    expect(broadcasted[0].count).toBe(1);
-
-    const persisted = sm.getRemoteFeedback(sessionId, 1);
-    expect(persisted).toHaveLength(1);
-    expect(persisted[0].id).toBe("fb1");
-    expect(persisted[0].author.name).toBe("Alice");
-
-    const updatedShare = sm.getShares(sessionId).find((s) => s.shareId === shareId);
-    expect(updatedShare?.lastFeedbackAt).toBe("2026-04-09T10:00:00.000Z");
-
-    sm.remove(sessionId);
-  });
-
-  test("dedupes entries by id across polls", async () => {
-    const sm = newSessionManager();
-    const { sessionId } = setupSession(sm);
-
-    const sameEntry = {
-      id: "fb-same",
-      shareId: "abc123def456",
-      revision: 1,
-      submittedAt: "2026-04-09T10:00:00.000Z",
-      author: { id: "u1", name: "Bob" },
-      annotations: [],
-    };
-
-    (globalThis as any).fetch = async () => new Response(JSON.stringify({ entries: [sameEntry] }), { status: 200 });
-
-    const poller = startRemoteFeedbackPoller(sm, () => {}, "0.0.0");
-    await new Promise((r) => setTimeout(r, 200));
-    poller.stop();
-
-    // Even after multiple polls returning the same entry, only one should be persisted.
-    const persisted = sm.getRemoteFeedback(sessionId, 1);
-    expect(persisted).toHaveLength(1);
-
-    sm.remove(sessionId);
-  });
-
-  test("404 stops further polls (revoked share)", async () => {
-    const sm = newSessionManager();
-    const { sessionId, shareId } = setupSession(sm);
-
-    let calls = 0;
-    (globalThis as any).fetch = async () => {
-      calls++;
-      return new Response("not found", { status: 404 });
-    };
-
-    const poller = startRemoteFeedbackPoller(sm, () => {}, "0.0.0");
-    await new Promise((r) => setTimeout(r, 200));
-    poller.stop();
-
-    // After the first 404 the share is marked dead — calls should stay at 1.
-    expect(calls).toBe(1);
-    void shareId;
-    sm.remove(sessionId);
-  });
-
-  test("does nothing when no shares exist", async () => {
-    const sm = newSessionManager();
-    let calls = 0;
-    (globalThis as any).fetch = async () => { calls++; return new Response("", { status: 200 }); };
-
-    const poller = startRemoteFeedbackPoller(sm, () => {}, "0.0.0");
-    await new Promise((r) => setTimeout(r, 100));
-    poller.stop();
-
-    expect(calls).toBe(0);
-  });
-
-});

package/daemon/src/secrets-api.test.ts

@@ -1,123 +0,0 @@
-import { afterEach, describe, expect, test } from "bun:test";
-import { mkdtempSync, rmSync } from "fs";
-import { tmpdir } from "os";
-import { join } from "path";
-import { createApiHandlers } from "./handlers/api";
-import { SessionManager } from "@fabrika/canvas-kernel/server";
-import { dispatch, type Route } from "@fabrika/daemon-kit";
-
-const testDirectories: string[] = [];
-
-function setup(): { routes: Route[]; sessionId: string } {
-  const directory = mkdtempSync(join(tmpdir(), "agent-canvas-secret-api-"));
-  testDirectories.push(directory);
-  const sessionManager = new SessionManager(directory);
-  const sessionId = "runbook";
-  sessionManager.upsert(sessionId, new Map([["runbook.jsx", "<Section title=\"Runbook\" />"]]), process.cwd());
-  const routes = createApiHandlers({
-    sessionManager,
-    broadcastPlanUpdate: () => {},
-    broadcastRevisionUpdate: () => {},
-    port: 19400,
-    version: "test",
-    cliAuthToken: "test-cli-capability",
-  });
-  return { routes, sessionId };
-}
-
-async function call(routes: Route[], method: string, path: string, body?: unknown): Promise<Response> {
-  const url = new URL(`http://localhost:19400${path}`);
-  const request = new Request(url, {
-    method,
-    ...(body === undefined
-      ? {}
-      : { headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) }),
-  });
-  const response = dispatch(routes, request, url);
-  if (!response) throw new Error(`No route for ${method} ${path}`);
-  return response;
-}
-
-afterEach(() => {
-  for (const directory of testDirectories.splice(0)) {
-    rmSync(directory, { recursive: true, force: true });
-  }
-});
-
-describe("local secret API", () => {
-  test("stores readiness metadata separately from the resolved value", async () => {
-    const { routes, sessionId } = setup();
-    const base = `/api/session/${sessionId}/secrets/service-token`;
-
-    const stored = await call(routes, "POST", `${base}/value`, { value: "test-secret-value" });
-    expect(stored.status).toBe(200);
-    expect(stored.headers.get("Cache-Control")).toBe("no-store");
-
-    const status = await call(routes, "GET", `${base}/status`);
-    const statusText = await status.text();
-    expect(statusText).toContain('"ready":true');
-    expect(statusText).not.toContain("test-secret-value");
-
-    const resolveUrl = new URL(`http://localhost:19400/api/session/${sessionId}/secrets/resolve`);
-    const resolveRequest = new Request(resolveUrl, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        "X-Agent-Canvas-CLI-Token": "test-cli-capability",
-      },
-      body: JSON.stringify({ fields: ["service-token"] }),
-    });
-    const resolveResponse = dispatch(routes, resolveRequest, resolveUrl);
-    if (!resolveResponse) throw new Error("No secret resolve route");
-    const resolved = await resolveResponse;
-    expect(await resolved.json()).toEqual({
-      values: [{ id: "service-token", value: "test-secret-value" }],
-    });
-  });
-
-  test("returns missing field IDs without partial secret values", async () => {
-    const { routes, sessionId } = setup();
-    await call(routes, "POST", `/api/session/${sessionId}/secrets/ready-token/value`, { value: "available" });
-
-    const url = new URL(`http://localhost:19400/api/session/${sessionId}/secrets/resolve`);
-    const request = new Request(url, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        "X-Agent-Canvas-CLI-Token": "test-cli-capability",
-      },
-      body: JSON.stringify({ fields: ["ready-token", "missing-token"] }),
-    });
-    const routed = dispatch(routes, request, url);
-    if (!routed) throw new Error("No secret resolve route");
-    const response = await routed;
-
-    expect(response.status).toBe(409);
-    expect(await response.json()).toEqual({
-      error: "Required secrets are not ready",
-      missing: ["missing-token"],
-    });
-  });
-
-  test("clears a stored value without returning it", async () => {
-    const { routes, sessionId } = setup();
-    const base = `/api/session/${sessionId}/secrets/service-token`;
-    await call(routes, "POST", `${base}/value`, { value: "test-secret-value" });
-
-    const cleared = await call(routes, "DELETE", `${base}/value`);
-    expect(await cleared.json()).toEqual({ ok: true, ready: false });
-    expect(await (await call(routes, "GET", `${base}/status`)).json()).toEqual({ ready: false });
-  });
-
-  test("does not expose resolved values to same-origin browser code", async () => {
-    const { routes, sessionId } = setup();
-    await call(routes, "POST", `/api/session/${sessionId}/secrets/service-token/value`, { value: "test-secret-value" });
-
-    const response = await call(routes, "POST", `/api/session/${sessionId}/secrets/resolve`, {
-      fields: ["service-token"],
-    });
-
-    expect(response.status).toBe(403);
-    expect(await response.text()).not.toContain("test-secret-value");
-  });
-});