agent-canvas 0.1.18 → 0.1.19

package/bin/lib/commands/push.ts

@@ -2,7 +2,7 @@ import { parseArgs } from "util";
 import { existsSync, statSync } from "fs";
 import { resolve, basename } from "path";
 import { BASE_URL } from "../config.ts";
-import { ensureDaemon } from "../daemon-lifecycle.ts";
+import { ensureDaemon, stopDaemon, startDaemon } from "../daemon-lifecycle.ts";
 import { getSessionId, openBrowser } from "../helpers.ts";
 
 export async function handlePush(args: string[]) {
@@ -52,7 +52,26 @@ export async function handlePush(args: string[]) {
     }),
   });
 
-  const result = await response.json() as any;
+  let result = await response.json() as any;
+
+  // Bun.build() can corrupt internal state in long-running daemons,
+  // returning "Unknown Error, TODO". Restart daemon and retry once.
+  if (!result.ok && typeof result.error === "string" && result.error.includes("Unknown Error")) {
+    console.error("Daemon bundler crashed, restarting...");
+    stopDaemon();
+    await startDaemon();
+    const retryResponse = await fetch(`${BASE_URL}/api/session/${sessionId}/plan`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        directory: resolvedPath,
+        projectRoot,
+        label: label || autoLabel,
+        ...(values.response ? { response: values.response } : {}),
+      }),
+    });
+    result = await retryResponse.json() as any;
+  }
 
   if (!result.ok) {
     if (result.unconsumedFeedback) {

package/bin/lib/config.ts

@@ -1,7 +1,9 @@
 import { resolve, join, dirname } from "path";
+import { readFileSync } from "fs";
 import { tmpdir } from "os";
 
 export const PACKAGE_ROOT = resolve(join(dirname(import.meta.path), "../.."));
+export const VERSION = JSON.parse(readFileSync(join(PACKAGE_ROOT, "package.json"), "utf-8")).version as string;
 export const TEMP_DIR = join(tmpdir(), "agent-canvas");
 export const DAEMON_PORT = parseInt(process.env.CANVAS_PORT || "19400", 10);
 export const BASE_URL = `http://localhost:${DAEMON_PORT}`;

package/bin/lib/daemon-lifecycle.ts

@@ -1,7 +1,7 @@
 import { spawn } from "child_process";
 import { openSync, closeSync, readFileSync, existsSync, mkdirSync, unlinkSync } from "fs";
 import { join } from "path";
-import { PACKAGE_ROOT, TEMP_DIR, BASE_URL, PID_FILE } from "./config.ts";
+import { PACKAGE_ROOT, TEMP_DIR, BASE_URL, PID_FILE, VERSION } from "./config.ts";
 
 export async function isDaemonRunning(): Promise<boolean> {
   try {
@@ -13,6 +13,16 @@ export async function isDaemonRunning(): Promise<boolean> {
   }
 }
 
+async function getDaemonVersion(): Promise<string | null> {
+  try {
+    const res = await fetch(`${BASE_URL}/health`, { signal: AbortSignal.timeout(1000) });
+    const data = await res.json() as any;
+    return data.version || null;
+  } catch {
+    return null;
+  }
+}
+
 export async function startDaemon(): Promise<void> {
   console.error("Starting canvas daemon...");
   mkdirSync(TEMP_DIR, { recursive: true });
@@ -50,7 +60,15 @@ export async function startDaemon(): Promise<void> {
 }
 
 export async function ensureDaemon(): Promise<void> {
-  if (await isDaemonRunning()) return;
+  if (await isDaemonRunning()) {
+    const daemonVersion = await getDaemonVersion();
+    if (daemonVersion && daemonVersion !== VERSION) {
+      console.error(`Daemon version mismatch (daemon: ${daemonVersion}, CLI: ${VERSION}), restarting...`);
+      stopDaemon();
+      await startDaemon();
+    }
+    return;
+  }
   await startDaemon();
 }
 

package/bin/lib/instructions/overview.md

@@ -32,6 +32,10 @@ Use the **Write** tool to create `.jsx` files in `.claude/agent-canvas/<session-
 
 Components are auto-available — no imports needed. The file can be a JSX fragment (just tags) or a full module with `export default`.
 
+**Content is JSX, not markdown.** Children of components are plain JSX text and nested components — NOT markdown. If you want to render markdown (lists, bold, headings, etc.), use the `<Markdown>` component explicitly. Raw `**bold**` or `- list items` in JSX children will render as literal text.
+
+**JSX escaping rules.** Content is in a JSX context. You MUST escape: `<` as `{'<'}` or `&lt;`, `>` as `{'>'}` or `&gt;`, `{` as `{'{'}`  and `}` as `{'}'}`. This is critical when writing code snippets, type signatures like `Option<String>`, or any text containing angle brackets. Alternatively, put such content inside `<CodeBlock>` or `<Markdown>` which handle escaping for you.
+
 ### 2. Push
 
 Push the directory to open all canvases in the browser:
@@ -123,7 +127,13 @@ All components are globally available in canvas JSX — no imports needed. For i
 - **useFeedback** — hook for custom components to contribute computed data to feedback
 - **Custom components** — use `export default function Canvas()` module format to define helpers
 
-Run `bunx agent-canvas instructions <topic>` for detailed docs on any component or flow.
+**Before using any component or flow, you MUST read its detailed instructions** by running:
+
+```bash
+bunx agent-canvas instructions <topic>
+```
+
+For example: `bunx agent-canvas instructions component-item`, `bunx agent-canvas instructions flow-feature`. Run `bunx agent-canvas instructions --list` to see all available topics.
 
 ## Choosing a Flow
 

package/daemon/src/compiler.ts

@@ -147,10 +147,10 @@ export async function compilePlan(jsx: string, projectRoot?: string): Promise<Co
         return { ok: false, error: `Runtime error: ${validation.error}` };
       }
       return { ok: true, js };
-    } catch {
+    } catch (buildError: any) {
       // 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);
+      // when its internal bundler state gets corrupted. Let the CLI handle restart.
+      return { ok: false, error: buildError?.message || "Unknown Error" };
     }
   } catch (e: any) {
     return { ok: false, error: e.message };
@@ -159,32 +159,6 @@ 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");
-    const validation = validateCompiledPlan(js);
-    if (!validation.ok) {
-      return { ok: false, error: `Runtime error: ${validation.error}` };
-    }
-    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/daemon/src/handlers/api.ts

@@ -10,6 +10,7 @@ export interface ApiContext {
   broadcastPlanUpdate: (id: string) => void;
   broadcastRevisionUpdate: (id: string) => void;
   port: number;
+  version: string;
 }
 
 export function createApiHandlers(ctx: ApiContext): Route[] {
@@ -132,7 +133,7 @@ export function createApiHandlers(ctx: ApiContext): Route[] {
 
   function handleHealth(): Response {
     const sessions = sessionManager.list().map((s) => s.id);
-    return jsonResponse({ ok: true, sessions });
+    return jsonResponse({ ok: true, sessions, version: ctx.version });
   }
 
   function handleMeta(_req: Request, _url: URL, match: URLPatternResult): Response {

package/daemon/src/server.ts

@@ -1,5 +1,5 @@
-import { writeFileSync, mkdirSync } from "fs";
-import { join } from "path";
+import { writeFileSync, mkdirSync, readFileSync } from "fs";
+import { join, dirname } from "path";
 import { tmpdir } from "os";
 import { SessionManager } from "./session";
 import { createWebSocketManager, type WSData } from "./websocket";
@@ -11,6 +11,7 @@ import { createStaticHandlers } from "./handlers/static";
 import { createUploadHandlers } from "./handlers/uploads";
 
 const PORT = parseInt(process.env.CANVAS_PORT || "19400", 10);
+const VERSION = JSON.parse(readFileSync(join(dirname(import.meta.dir), "..", "package.json"), "utf-8")).version as string;
 
 // Write PID file so CLI can find and stop us
 const pidDir = join(tmpdir(), "agent-canvas");
@@ -21,7 +22,7 @@ const sessionManager = new SessionManager();
 const wsManager = createWebSocketManager(sessionManager);
 
 const routes = [
-  ...createApiHandlers({ sessionManager, broadcastPlanUpdate: wsManager.broadcastPlanUpdate, broadcastRevisionUpdate: wsManager.broadcastRevisionUpdate, port: PORT }),
+  ...createApiHandlers({ sessionManager, broadcastPlanUpdate: wsManager.broadcastPlanUpdate, broadcastRevisionUpdate: wsManager.broadcastRevisionUpdate, port: PORT, version: VERSION }),
   ...createFileHandlers(sessionManager),
   ...createUploadHandlers(sessionManager),
   ...createStaticHandlers(),

package/package.json

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