agent-canvas 0.1.42 → 0.1.44

package/daemon/src/compiler.test.ts

@@ -42,3 +42,16 @@ test("runbook secret input compiles", async () => {
   const result = await compilePlan(`<SecretInput id="service-token" label="Service token" env="SERVICE_TOKEN" required />`);
   expect(result.ok).toBe(true);
 });
+
+test("missing required component prop fails before the browser renders", async () => {
+  const result = await compilePlan(`<Table columns={["Name"]} rows={[["Canvas"]]} />`);
+
+  expect(result.ok).toBe(false);
+  if (result.ok) return;
+  expect(result.error).toBe("Runtime error: Table: required prop `headers` must be an array");
+});
+
+test("component prop validation accepts valid table props", async () => {
+  const result = await compilePlan(`<Table headers={["Name"]} rows={[["Canvas"]]} />`);
+  expect(result.ok).toBe(true);
+});

package/daemon/src/compiler.ts

@@ -1,7 +1,7 @@
 import { writeFileSync, unlinkSync, readFileSync } from "fs";
 import { join } from "path";
 import { randomUUID } from "crypto";
-import { h, Fragment } from "preact";
+import { h, Fragment, type ComponentChildren } from "preact";
 import renderToString from "preact-render-to-string";
 import { parse as parseMermaid } from "mermaid-parser-bundle";
 import { COMPILE_TEMP_DIR } from "./paths";
@@ -33,17 +33,51 @@ function mockJsxDEV(type: any, props: any, key?: any) {
   return h(type, { ...rest, key }, children);
 }
 
+interface StubProps {
+  children?: ComponentChildren;
+  [key: string]: unknown;
+}
+
 /** Passthrough component — just renders its children */
-const Stub = ({ children }: any) => h(Fragment, null, children);
+const Stub = ({ children }: StubProps) => h(Fragment, null, children);
+
+type RequiredPropKind = "array" | "string";
+
+function validatingStub(component: string, requiredProps: Record<string, RequiredPropKind>) {
+  return (props: StubProps) => {
+    for (const [prop, kind] of Object.entries(requiredProps)) {
+      const value = props[prop];
+      const valid = kind === "array" ? Array.isArray(value) : typeof value === kind;
+      if (!valid) {
+        throw new Error(`${component}: required prop \`${prop}\` must be ${kind === "array" ? "an array" : `a ${kind}`}`);
+      }
+    }
+    return h(Fragment, null, props.children);
+  };
+}
 
 const STUB_COMPONENTS: Record<string, any> = {};
 for (const name of [
-  "Section", "Item", "Task", "FilePreview", "CodeBlock", "Callout",
-  "Table", "Priority", "Checklist", "Note", "Diff",
-  "Choice", "MultiChoice", "UserInput", "RangeInput", "SecretInput", "ImageView", "Markdown",
+  "CodeBlock", "Callout", "Note", "Markdown",
 ]) {
   STUB_COMPONENTS[name] = Stub;
 }
+Object.assign(STUB_COMPONENTS, {
+  Section: validatingStub("Section", { title: "string" }),
+  Item: validatingStub("Item", { id: "string", label: "string" }),
+  Task: validatingStub("Task", { id: "string", label: "string" }),
+  FilePreview: validatingStub("FilePreview", { path: "string" }),
+  Table: validatingStub("Table", { headers: "array", rows: "array" }),
+  Priority: validatingStub("Priority", { level: "string" }),
+  Checklist: validatingStub("Checklist", { items: "array" }),
+  Diff: validatingStub("Diff", { before: "string", after: "string" }),
+  Choice: validatingStub("Choice", { id: "string", label: "string", options: "array" }),
+  MultiChoice: validatingStub("MultiChoice", { id: "string", label: "string", options: "array" }),
+  UserInput: validatingStub("UserInput", { id: "string", label: "string" }),
+  RangeInput: validatingStub("RangeInput", { id: "string", label: "string" }),
+  SecretInput: validatingStub("SecretInput", { id: "string", label: "string", env: "string" }),
+  ImageView: validatingStub("ImageView", { src: "string" }),
+});
 // Mermaid stub collects diagram sources for post-render validation
 let collectedMermaidSources: string[] = [];
 STUB_COMPONENTS.Mermaid = ({ children }: any) => {

package/daemon/src/websocket.test.ts

@@ -0,0 +1,99 @@
+import { afterEach, describe, expect, test } from "bun:test";
+import { mkdtempSync, rmSync } from "fs";
+import { tmpdir } from "os";
+import { join } from "path";
+import { SessionManager } from "./session";
+import { createWebSocketManager, type CanvasSocket, type WSData } from "./websocket";
+
+const testDirectories: string[] = [];
+
+afterEach(() => {
+  for (const directory of testDirectories.splice(0)) {
+    rmSync(directory, { recursive: true, force: true });
+  }
+});
+
+class FakeSocket implements CanvasSocket {
+  readonly sent: string[] = [];
+  closed = false;
+
+  constructor(readonly data: WSData) {}
+
+  send(message: string) {
+    this.sent.push(message);
+  }
+
+  close() {
+    this.closed = true;
+  }
+
+  ping() {}
+}
+
+function createSessionManager(): SessionManager {
+  const directory = mkdtempSync(join(tmpdir(), "agent-canvas-websocket-test-"));
+  testDirectories.push(directory);
+  const manager = new SessionManager(directory);
+  manager.upsert(
+    "session",
+    new Map([["architecture.jsx", "<Section title=\"Architecture\" />"]]),
+    directory,
+  );
+  return manager;
+}
+
+describe("canvas render errors", () => {
+  test("delivers an error that arrived before the CLI watcher connected", () => {
+    const sessionManager = createSessionManager();
+    const websocket = createWebSocketManager(sessionManager);
+    const browser = new FakeSocket({ type: "browser", sessionId: "session" });
+    websocket.handlers.open(browser);
+
+    websocket.handlers.message(browser, JSON.stringify({
+      type: "render-error",
+      error: {
+        revision: 1,
+        filename: "architecture.jsx",
+        message: "Cannot read properties of undefined (reading 'map')",
+      },
+    }));
+
+    const watcher = new FakeSocket({ type: "wait", sessionId: "session" });
+    websocket.handlers.open(watcher);
+
+    expect(watcher.sent).toHaveLength(1);
+    expect(JSON.parse(watcher.sent[0])).toEqual({
+      type: "render-error",
+      error: {
+        revision: 1,
+        filename: "architecture.jsx",
+        message: "Cannot read properties of undefined (reading 'map')",
+      },
+    });
+    expect(watcher.closed).toBe(true);
+    expect(sessionManager.get("session")?.revisions[0].hasFeedback).toBe(false);
+  });
+
+  test("drops a pending error when a new revision is pushed", () => {
+    const sessionManager = createSessionManager();
+    const websocket = createWebSocketManager(sessionManager);
+    const browser = new FakeSocket({ type: "browser", sessionId: "session" });
+    websocket.handlers.open(browser);
+    websocket.handlers.message(browser, JSON.stringify({
+      type: "render-error",
+      error: { revision: 1, filename: "architecture.jsx", message: "Broken revision" },
+    }));
+
+    sessionManager.upsert(
+      "session",
+      new Map([["architecture.jsx", "<Section title=\"Fixed\" />"]]),
+      "/project",
+    );
+    websocket.broadcastPlanUpdate("session");
+
+    const watcher = new FakeSocket({ type: "wait", sessionId: "session" });
+    websocket.handlers.open(watcher);
+    expect(watcher.sent).toEqual([]);
+    expect(watcher.closed).toBe(false);
+  });
+});

package/daemon/src/websocket.ts

@@ -1,13 +1,38 @@
-import type { ServerWebSocket } from "bun";
 import type { SessionManager, RemoteFeedbackEntry } from "./session";
 
 export type WSData = { type: "browser" | "wait"; sessionId: string };
 
+export interface CanvasSocket {
+  data: WSData;
+  send(message: string): unknown;
+  close(): void;
+  ping(): unknown;
+}
+
+interface CanvasRenderError {
+  revision: number;
+  filename: string;
+  message: string;
+  stack?: string;
+  componentStack?: string;
+}
+
+function isCanvasRenderError(value: unknown): value is CanvasRenderError {
+  return typeof value === "object" && value !== null
+    && "revision" in value && Number.isInteger(value.revision)
+    && "filename" in value && typeof value.filename === "string"
+    && "message" in value && typeof value.message === "string"
+    && (!("stack" in value) || value.stack === undefined || typeof value.stack === "string")
+    && (!("componentStack" in value) || value.componentStack === undefined || typeof value.componentStack === "string");
+}
+
 export function createWebSocketManager(sessionManager: SessionManager) {
-  const browserSockets = new Map<string, Set<ServerWebSocket<WSData>>>();
-  const waitSockets = new Map<string, Set<ServerWebSocket<WSData>>>();
+  const browserSockets = new Map<string, Set<CanvasSocket>>();
+  const waitSockets = new Map<string, Set<CanvasSocket>>();
+  const pendingRenderErrors = new Map<string, CanvasRenderError>();
 
   function broadcastPlanUpdate(sessionId: string) {
+    pendingRenderErrors.delete(sessionId);
     const sockets = browserSockets.get(sessionId);
     if (!sockets) return;
     const session = sessionManager.get(sessionId);
@@ -59,13 +84,29 @@ export function createWebSocketManager(sessionManager: SessionManager) {
     }
   }
 
+  function deliverPendingRenderError(sessionId: string): boolean {
+    const error = pendingRenderErrors.get(sessionId);
+    const waiters = waitSockets.get(sessionId);
+    if (!error || !waiters || waiters.size === 0) return false;
+
+    pendingRenderErrors.delete(sessionId);
+    waitSockets.delete(sessionId);
+    const payload = JSON.stringify({ type: "render-error", error });
+    for (const waiter of waiters) {
+      waiter.send(payload);
+      waiter.close();
+    }
+    broadcastWatcherStatus(sessionId);
+    return true;
+  }
+
   // Ping wait sockets periodically to detect dead connections.
   // We can't rely on ws.close() triggering the close handler for dead sockets,
   // so we manually remove dead sockets and broadcast status.
   const PING_INTERVAL = 5_000;
-  const pongReceived = new WeakSet<ServerWebSocket<WSData>>();
+  const pongReceived = new WeakSet<CanvasSocket>();
 
-  function removeWaitSocket(ws: ServerWebSocket<WSData>, sessionId: string) {
+  function removeWaitSocket(ws: CanvasSocket, sessionId: string) {
     const sockets = waitSockets.get(sessionId);
     if (sockets) {
       sockets.delete(ws);
@@ -92,7 +133,7 @@ export function createWebSocketManager(sessionManager: SessionManager) {
   }, PING_INTERVAL);
 
   const handlers = {
-    open(ws: ServerWebSocket<WSData>) {
+    open(ws: CanvasSocket) {
       const { type, sessionId } = ws.data;
       const map = type === "browser" ? browserSockets : waitSockets;
       if (!map.has(sessionId)) map.set(sessionId, new Set());
@@ -104,10 +145,12 @@ export function createWebSocketManager(sessionManager: SessionManager) {
       } else {
         // CLI waiter connected — notify browsers
         pongReceived.add(ws); // Give it a free pass on first interval
-        broadcastWatcherStatus(sessionId);
+        if (!deliverPendingRenderError(sessionId)) {
+          broadcastWatcherStatus(sessionId);
+        }
       }
     },
-    message(ws: ServerWebSocket<WSData>, message: string | Buffer) {
+    message(ws: CanvasSocket, message: string | Buffer) {
       const { type, sessionId } = ws.data;
       if (type === "browser") {
         try {
@@ -133,15 +176,26 @@ export function createWebSocketManager(sessionManager: SessionManager) {
               }
             }
           }
+          if (data.type === "render-error" && isCanvasRenderError(data.error)) {
+            const session = sessionManager.get(sessionId);
+            if (
+              session
+              && data.error.revision === session.currentRevision
+              && session.canvasFiles.includes(data.error.filename)
+            ) {
+              pendingRenderErrors.set(sessionId, data.error);
+              deliverPendingRenderError(sessionId);
+            }
+          }
         } catch {}
       }
     },
-    pong(ws: ServerWebSocket<WSData>) {
+    pong(ws: CanvasSocket) {
       if (ws.data.type === "wait") {
         pongReceived.add(ws);
       }
     },
-    close(ws: ServerWebSocket<WSData>) {
+    close(ws: CanvasSocket) {
       const { type, sessionId } = ws.data;
       const map = type === "browser" ? browserSockets : waitSockets;
       map.get(sessionId)?.delete(ws);

package/package.json

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