agent-canvas 0.1.0

package/bin/agent-canvas.js

@@ -0,0 +1,14 @@
+#!/usr/bin/env node
+
+const { execFileSync } = require("child_process");
+const { join } = require("path");
+
+const script = join(__dirname, "agent-canvas.ts");
+
+try {
+  execFileSync("bun", [script, ...process.argv.slice(2)], { stdio: "inherit" });
+} catch (e) {
+  if (e.status != null) process.exit(e.status);
+  console.error("Failed to run agent-canvas. Is Bun installed? https://bun.sh");
+  process.exit(1);
+}

package/bin/agent-canvas.ts

@@ -0,0 +1,377 @@
+#!/usr/bin/env bun
+
+import { spawn } from "child_process";
+import { readFileSync, existsSync, writeFileSync, mkdirSync, unlinkSync, cpSync } from "fs";
+import { join, resolve, dirname } from "path";
+import { homedir, tmpdir } from "os";
+import { randomUUID } from "crypto";
+
+const PACKAGE_ROOT = resolve(join(dirname(import.meta.path), ".."));
+const DATA_DIR = join(homedir(), ".claude", "agent-canvas");
+const TEMP_DIR = join(tmpdir(), "agent-canvas");
+const DAEMON_PORT = parseInt(process.env.CANVAS_PORT || "19400", 10);
+const BASE_URL = `http://localhost:${DAEMON_PORT}`;
+const WS_URL = `ws://localhost:${DAEMON_PORT}`;
+const TIMEOUT_MS = parseInt(process.env.CANVAS_TIMEOUT || String(60 * 60 * 1000), 10);
+const PID_FILE = join(TEMP_DIR, "daemon.pid");
+
+function getSessionId(): string {
+  return process.env.CANVAS_SESSION_ID || (() => {
+    const id = randomUUID();
+    console.error(`Warning: CANVAS_SESSION_ID not set, using generated ID: ${id}`);
+    return id;
+  })();
+}
+
+async function main() {
+  const args = process.argv.slice(2);
+
+  if (args.length === 0) {
+    printUsage();
+    process.exit(1);
+  }
+
+  const command = args[0];
+
+  switch (command) {
+    case "push": return handlePush(args.slice(1));
+    case "wait": return handleWait(args.slice(1));
+    case "install": return handleInstall(args.slice(1));
+    case "daemon": return handleDaemon(args.slice(1));
+    default:
+      console.error(`Unknown command: ${command}`);
+      printUsage();
+      process.exit(1);
+  }
+}
+
+function printUsage() {
+  console.error(`agent-canvas — Interactive visual canvas for Claude Code
+
+Commands:
+  agent-canvas install [local|global]  Install skill & hooks for Claude Code
+  agent-canvas push <file.jsx>         Push a canvas, open browser
+  agent-canvas wait                    Wait for user feedback (prints to stdout)
+  agent-canvas daemon status           Show daemon status
+  agent-canvas daemon stop             Stop the daemon
+
+Environment:
+  CANVAS_SESSION_ID     Session ID (set automatically by hooks)
+  CANVAS_PROJECT_ROOT   Project root (set automatically by hooks)
+  CANVAS_PORT           Daemon port (default: 19400)`);
+}
+
+// ── install ──
+
+async function handleInstall(args: string[]) {
+  let mode = args[0] as "local" | "global" | undefined;
+
+  if (!mode) {
+    // Interactive prompt
+    process.stderr.write("Install canvas skill and hooks for Claude Code.\n\n");
+    process.stderr.write("  local  — install to .claude/ in current project\n");
+    process.stderr.write("  global — install to ~/.claude/ for all projects\n\n");
+    process.stderr.write("Choose [local/global]: ");
+
+    const input = await readLine();
+    mode = input.trim().toLowerCase() as "local" | "global";
+  }
+
+  if (mode !== "local" && mode !== "global") {
+    console.error("Error: specify 'local' or 'global'");
+    process.exit(1);
+  }
+
+  const targetBase = mode === "global"
+    ? join(homedir(), ".claude")
+    : join(process.cwd(), ".claude");
+
+  // Install skill
+  const skillTarget = join(targetBase, "skills", "canvas");
+  mkdirSync(skillTarget, { recursive: true });
+
+  const skillSrc = join(PACKAGE_ROOT, "skills", "canvas");
+  for (const file of ["SKILL.md", "components.md", "flows.md"]) {
+    const src = join(skillSrc, file);
+    if (existsSync(src)) {
+      cpSync(src, join(skillTarget, file));
+    }
+  }
+
+  console.error(`  Skill installed to ${skillTarget}`);
+
+  // Install hook script
+  const hooksDir = join(targetBase, "agent-canvas");
+  mkdirSync(hooksDir, { recursive: true });
+  const hookSrc = join(PACKAGE_ROOT, "hooks", "session-start.sh");
+  const hookDest = join(hooksDir, "session-start.sh");
+  cpSync(hookSrc, hookDest);
+  try { require("fs").chmodSync(hookDest, 0o755); } catch {}
+  console.error(`  Hook script installed to ${hookDest}`);
+
+  // Register hook in settings.json
+  const settingsPath = join(targetBase, "settings.json");
+  let settings: any = {};
+  if (existsSync(settingsPath)) {
+    try { settings = JSON.parse(readFileSync(settingsPath, "utf-8")); } catch {}
+  }
+
+  if (!settings.hooks) settings.hooks = {};
+  if (!settings.hooks.SessionStart) settings.hooks.SessionStart = [];
+
+  const hasHook = settings.hooks.SessionStart.some((h: any) =>
+    h.hooks?.some((hh: any) => hh.command?.includes("CANVAS_SESSION_ID"))
+  );
+
+  if (!hasHook) {
+    settings.hooks.SessionStart.push({
+      matcher: "*",
+      hooks: [{
+        type: "command",
+        command: `bash "${hookDest}"`,
+      }],
+    });
+
+    mkdirSync(dirname(settingsPath), { recursive: true });
+    writeFileSync(settingsPath, JSON.stringify(settings, null, 2));
+    console.error(`  Hook registered in ${settingsPath}`);
+  } else {
+    console.error(`  Hook already registered in ${settingsPath}`);
+  }
+
+  console.error(`\nInstalled! The /canvas command is now available in Claude Code.`);
+}
+
+// ── push ──
+
+async function handlePush(args: string[]) {
+  const fromHook = args.includes("--from-hook");
+  let jsx: string;
+  let filePath: string | undefined;
+
+  if (fromHook) {
+    jsx = await readStdin();
+  } else {
+    filePath = args.find((a) => !a.startsWith("--"));
+    if (!filePath) {
+      console.error("Error: No file specified. Usage: agent-canvas push <file.jsx>");
+      process.exit(1);
+    }
+    filePath = resolve(filePath);
+    if (!existsSync(filePath)) {
+      console.error(`Error: File not found: ${filePath}`);
+      process.exit(1);
+    }
+    jsx = readFileSync(filePath, "utf-8");
+  }
+
+  const sessionId = getSessionId();
+  const projectRoot = process.env.CANVAS_PROJECT_ROOT || process.cwd();
+
+  // Extract --label flag
+  const labelIdx = args.indexOf("--label");
+  const label = labelIdx !== -1 && args[labelIdx + 1] ? args[labelIdx + 1] : undefined;
+  const autoLabel = !label && filePath ? filePath.split("/").pop()?.replace(/\.jsx$/, "") : undefined;
+
+  await ensureDaemon();
+
+  const response = await fetch(`${BASE_URL}/api/session/${sessionId}/plan`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ jsx, projectRoot, label: label || autoLabel, sourceFile: filePath ? filePath.split("/").pop() : undefined }),
+  });
+
+  const result = await response.json() as any;
+
+  if (!result.ok) {
+    console.error(`Compilation error:\n${result.error}`);
+    process.exit(1);
+  }
+
+  if (result.isNew) {
+    openBrowser(result.browserUrl);
+  }
+
+  console.log(JSON.stringify({
+    ok: true,
+    browserUrl: result.browserUrl,
+    revision: result.revision,
+    sessionId,
+  }));
+}
+
+// ── wait ──
+
+async function handleWait(args: string[]) {
+  const sessionId = getSessionId();
+
+  await ensureDaemon();
+
+  // Check if feedback already exists
+  try {
+    const metaRes = await fetch(`${BASE_URL}/api/session/${sessionId}/meta`);
+    const meta = await metaRes.json() as any;
+    if (meta.currentRevision && meta.revisions) {
+      const currentRev = meta.revisions.find((r: any) => r.revision === meta.currentRevision);
+      if (currentRev?.hasFeedback) {
+        const fbRes = await fetch(`${BASE_URL}/api/session/${sessionId}/revision/${meta.currentRevision}/feedback`);
+        const fbData = await fbRes.json() as any;
+        if (fbData.feedback) {
+          process.stdout.write(fbData.feedback);
+          process.exit(0);
+        }
+      }
+    }
+  } catch {}
+
+  await waitForFeedback(sessionId);
+}
+
+// ── daemon ──
+
+async function handleDaemon(args: string[]) {
+  const subcommand = args[0];
+
+  if (subcommand === "status") {
+    try {
+      const res = await fetch(`${BASE_URL}/health`, { signal: AbortSignal.timeout(2000) });
+      const data = await res.json() as any;
+      console.log(`Daemon: running on port ${DAEMON_PORT}`);
+      console.log(`Sessions: ${data.sessions.length > 0 ? data.sessions.join(", ") : "none"}`);
+    } catch {
+      console.log("Daemon: not running");
+    }
+  } else if (subcommand === "stop") {
+    if (existsSync(PID_FILE)) {
+      const pid = parseInt(readFileSync(PID_FILE, "utf-8").trim(), 10);
+      try {
+        process.kill(pid, "SIGTERM");
+        console.log("Daemon stopped.");
+      } catch {
+        console.log("Daemon was not running (stale PID file).");
+      }
+      try { unlinkSync(PID_FILE); } catch {}
+    } else {
+      console.log("No daemon PID file found.");
+    }
+  } else {
+    console.error("Usage: agent-canvas daemon [status|stop]");
+    process.exit(1);
+  }
+}
+
+// ── helpers ──
+
+async function ensureDaemon(): Promise<void> {
+  if (await isDaemonRunning()) return;
+
+  console.error("Starting canvas daemon...");
+  mkdirSync(TEMP_DIR, { recursive: true });
+
+  const daemonScript = join(PACKAGE_ROOT, "daemon", "src", "server.ts");
+
+  const child = spawn("bun", ["run", daemonScript], {
+    detached: true,
+    stdio: "ignore",
+    cwd: join(PACKAGE_ROOT, "daemon"),
+  });
+
+  child.unref();
+
+  if (child.pid) {
+    writeFileSync(PID_FILE, String(child.pid));
+  }
+
+  for (let i = 0; i < 30; i++) {
+    await new Promise((r) => setTimeout(r, 100));
+    if (await isDaemonRunning()) {
+      console.error("Daemon started.");
+      return;
+    }
+  }
+
+  console.error("Error: Daemon failed to start within 3 seconds.");
+  process.exit(1);
+}
+
+async function isDaemonRunning(): Promise<boolean> {
+  try {
+    const res = await fetch(`${BASE_URL}/health`, { signal: AbortSignal.timeout(1000) });
+    const data = await res.json() as any;
+    return data.ok === true;
+  } catch {
+    return false;
+  }
+}
+
+function openBrowser(url: string) {
+  const candidates = process.platform === "darwin"
+    ? ["open"]
+    : ["xdg-open", "wslview", "sensible-browser"];
+
+  for (const cmd of candidates) {
+    const which = Bun.spawnSync(["which", cmd]);
+    if (which.exitCode === 0) {
+      spawn(cmd, [url], { detached: true, stdio: "ignore" }).unref();
+      return;
+    }
+  }
+  console.error(`Open this URL in your browser: ${url}`);
+}
+
+async function waitForFeedback(sessionId: string): Promise<void> {
+  return new Promise((resolveP, rejectP) => {
+    const ws = new WebSocket(`${WS_URL}/ws/wait/${sessionId}`);
+    const timeout = setTimeout(() => {
+      ws.close();
+      console.error("Error: Timeout waiting for feedback.");
+      process.exit(1);
+    }, TIMEOUT_MS);
+
+    ws.onmessage = (event) => {
+      try {
+        const data = JSON.parse(typeof event.data === "string" ? event.data : "");
+        if (data.type === "submit") {
+          clearTimeout(timeout);
+          process.stdout.write(data.feedback);
+          ws.close();
+          process.exit(0);
+        }
+      } catch {}
+    };
+
+    ws.onerror = () => {
+      clearTimeout(timeout);
+      console.error("Error: WebSocket connection failed.");
+      process.exit(1);
+    };
+
+    ws.onclose = () => {
+      clearTimeout(timeout);
+    };
+  });
+}
+
+async function readStdin(): Promise<string> {
+  const chunks: Buffer[] = [];
+  for await (const chunk of Bun.stdin.stream()) {
+    chunks.push(Buffer.from(chunk));
+  }
+  return Buffer.concat(chunks).toString("utf-8");
+}
+
+async function readLine(): Promise<string> {
+  const buf: number[] = [];
+  for await (const chunk of Bun.stdin.stream()) {
+    for (const byte of chunk) {
+      if (byte === 10) return Buffer.from(buf).toString("utf-8");
+      buf.push(byte);
+    }
+  }
+  return Buffer.from(buf).toString("utf-8");
+}
+
+main().catch((e) => {
+  console.error(e);
+  process.exit(1);
+});

package/daemon/build.ts

@@ -0,0 +1,185 @@
+import { mkdirSync, cpSync, writeFileSync, readFileSync, existsSync, watch as fsWatch } from "fs";
+import { join, dirname } from "path";
+import { $ } from "bun";
+
+const ROOT = dirname(import.meta.path);
+const DIST = join(ROOT, "dist");
+
+async function build() {
+  console.log("Building canvas client...");
+
+  mkdirSync(DIST, { recursive: true });
+
+  const REACT_EXTERNALS = ["react", "react-dom", "react-dom/client", "react/jsx-runtime", "react/jsx-dev-runtime"];
+
+  // 1. Build runtime (shared context between app and components)
+  console.log("  Building #canvas/runtime...");
+  const runtimeResult = await Bun.build({
+    entrypoints: [join(ROOT, "client/runtime.ts")],
+    outdir: DIST,
+    format: "esm",
+    external: [...REACT_EXTERNALS],
+    naming: "runtime.js",
+    minify: true,
+  });
+
+  if (!runtimeResult.success) {
+    console.error("Runtime build failed:", runtimeResult.logs);
+    process.exit(1);
+  }
+
+  // 2. Build the components library (ESM, React + runtime external)
+  console.log("  Building #canvas/components...");
+  const componentsResult = await Bun.build({
+    entrypoints: [join(ROOT, "client/components/index.ts")],
+    outdir: DIST,
+    format: "esm",
+    external: [...REACT_EXTERNALS, "#canvas/runtime"],
+    naming: "components.js",
+    minify: true,
+  });
+
+  if (!componentsResult.success) {
+    console.error("Components build failed:", componentsResult.logs);
+    process.exit(1);
+  }
+
+  // 3. Build the main client app (ESM, React + components + runtime external)
+  console.log("  Building client app...");
+  const clientResult = await Bun.build({
+    entrypoints: [join(ROOT, "client/App.tsx")],
+    outdir: DIST,
+    format: "esm",
+    external: [...REACT_EXTERNALS, "#canvas/components", "#canvas/runtime"],
+    naming: "client.js",
+    minify: true,
+  });
+
+  if (!clientResult.success) {
+    console.error("Client build failed:", clientResult.logs);
+    process.exit(1);
+  }
+
+  // 4. Build Tailwind CSS
+  console.log("  Building CSS...");
+  await $`cd ${ROOT} && npx @tailwindcss/cli -i client/styles.css -o dist/client.css --minify`.quiet();
+
+  // 5. Read theme.css to inline into HTML for browser Tailwind runtime
+  const themeCss = readFileSync(join(ROOT, "client/theme.css"), "utf-8");
+
+  // 6. Create React shims for import maps
+  // These re-export from the global React loaded via UMD
+  console.log("  Creating React shims...");
+
+  // Write the index.html to use CDN React
+  const indexHtml = `<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+  <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>
+  <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>
+  <style type="text/tailwindcss">
+${themeCss}
+  </style>
+</head>
+<body class="min-h-screen">
+  <div id="root"></div>
+  <script src="https://unpkg.com/@highlightjs/cdn-assets@11.11.1/highlight.min.js"></script>
+  <script src="https://unpkg.com/mermaid@11.4.1/dist/mermaid.min.js"></script>
+  <script>mermaid.initialize({ startOnLoad: false, theme: document.documentElement.dataset.theme === 'light' ? 'default' : 'dark' });</script>
+  <script src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
+  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
+  <script>
+    // Create ESM modules from UMD globals
+    window.__REACT_ESM__ = Object.keys(React).reduce((m, k) => { m[k] = React[k]; return m; }, { default: React, __esModule: true });
+    window.__REACT_DOM_ESM__ = Object.keys(ReactDOM).reduce((m, k) => { m[k] = ReactDOM[k]; return m; }, { default: ReactDOM, __esModule: true });
+  </script>
+  <script type="importmap">
+  {
+    "imports": {
+      "react": "/assets/react-shim.js",
+      "react-dom": "/assets/react-dom-shim.js",
+      "react-dom/client": "/assets/react-dom-client-shim.js",
+      "react/jsx-runtime": "/assets/jsx-runtime-shim.js",
+      "react/jsx-dev-runtime": "/assets/jsx-dev-runtime-shim.js",
+      "#canvas/components": "/assets/components.js",
+      "#canvas/runtime": "/assets/runtime.js"
+    }
+  }
+  </script>
+  <script type="module" src="/assets/client.js"></script>
+</body>
+</html>`;
+
+  writeFileSync(join(DIST, "index.html"), indexHtml);
+
+  // React ESM shims
+  writeFileSync(join(DIST, "react-shim.js"), `
+const R = window.React;
+export default R;
+export const { useState, useEffect, useRef, useCallback, useContext, useMemo, useReducer, createContext, createElement, Fragment, Children, cloneElement, isValidElement, memo, forwardRef, lazy, Suspense, startTransition, useTransition, useDeferredValue, useId, useSyncExternalStore, useInsertionEffect, useImperativeHandle, useLayoutEffect, useDebugValue, Component, PureComponent } = R;
+`);
+
+  writeFileSync(join(DIST, "react-dom-shim.js"), `
+const RD = window.ReactDOM;
+export default RD;
+export const { createPortal, flushSync, hydrate, render, unmountComponentAtNode, findDOMNode, unstable_batchedUpdates } = RD;
+`);
+
+  writeFileSync(join(DIST, "react-dom-client-shim.js"), `
+const RD = window.ReactDOM;
+export const { createRoot, hydrateRoot } = RD;
+export default { createRoot: RD.createRoot, hydrateRoot: RD.hydrateRoot };
+`);
+
+  // jsxDEV signature: (type, props, key, isStaticChildren, source, self)
+  // jsx/jsxs signature: (type, props, key)
+  // createElement signature: (type, props, ...children)
+  // We need to adapt: extract children from props and pass to createElement
+  const jsxShimCode = `
+const R = window.React;
+export const Fragment = R.Fragment;
+function _jsx(type, props, key) {
+  if (props && 'children' in props) {
+    const { children, ...rest } = props;
+    if (key !== undefined && key !== null) rest.key = key;
+    return Array.isArray(children)
+      ? R.createElement(type, rest, ...children)
+      : R.createElement(type, rest, children);
+  }
+  if (key !== undefined && key !== null) props = { ...props, key };
+  return R.createElement(type, props);
+}
+export const jsx = _jsx;
+export const jsxs = _jsx;
+export function jsxDEV(type, props, key) { return _jsx(type, props, key); }
+`;
+
+  writeFileSync(join(DIST, "jsx-runtime-shim.js"), jsxShimCode);
+  writeFileSync(join(DIST, "jsx-dev-runtime-shim.js"), jsxShimCode);
+
+  console.log("Build complete! Output in dist/");
+}
+
+build().then(() => {
+  if (process.argv.includes("--watch")) {
+    const clientDir = join(ROOT, "client");
+    let timeout: ReturnType<typeof setTimeout> | null = null;
+    console.log("Watching for changes in client/...");
+    fsWatch(clientDir, { recursive: true }, (_event: string, filename: string | null) => {
+      if (!filename || filename.endsWith("~")) return;
+      if (timeout) clearTimeout(timeout);
+      timeout = setTimeout(() => {
+        console.log(`\n  Changed: ${filename}`);
+        build().catch((e) => console.error("Rebuild failed:", e));
+      }, 200);
+    });
+  }
+}).catch((e) => {
+  console.error("Build failed:", e);
+  process.exit(1);
+});