truecanvas 0.1.0

package/dist/cli.js

@@ -0,0 +1,2931 @@
+#!/usr/bin/env node
+import {
+  DEVICES,
+  EditError,
+  Workspace,
+  clearCompare,
+  componentsDir,
+  describeComponent,
+  findByPath,
+  findDevice,
+  findNode,
+  frameChanges,
+  layoutFiles,
+  listRoutes,
+  loadConfig,
+  outlineDoc,
+  parseCanvas,
+  readDesignTokens,
+  readTokenData,
+  syncComponentRegistry,
+  writeCompare
+} from "./chunk-WB35FXGP.js";
+import "./chunk-753N4QRO.js";
+
+// src/cli/index.ts
+import { spawn as spawn3 } from "child_process";
+import fs12 from "fs";
+import path12 from "path";
+import { parseArgs } from "util";
+
+// src/server/http.ts
+import http from "http";
+import fs4 from "fs";
+import path4 from "path";
+import { randomUUID } from "crypto";
+import { fileURLToPath } from "url";
+import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";
+import { isInitializeRequest } from "@modelcontextprotocol/sdk/types.js";
+import launchEditor from "launch-editor";
+
+// src/server/mcp.ts
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import { z } from "zod";
+var INSTRUCTIONS = `Truecanvas is a design canvas whose layers are the project's real React components.
+A canvas is a .tsx file (canvas/<name>.canvas.tsx) with <Frame> artboards; every edit you make is written to that file as clean TSX and appears live in the user's editor window.
+
+Workflow:
+1. list_canvases \u2192 get_canvas to read the tree. Every node shows an id like [24:10] (line:col). Ids change after every edit, so use the ids returned by the latest call.
+2. list_components / get_component to learn the design system's props, and get_design_tokens for the Tailwind theme (colors, radius, fonts). Prefer composing existing components over raw HTML. Layout wrappers are plain <div>s with Tailwind classes (flex, gap-*, p-*) using those tokens.
+3. Edit with set_props, set_text, insert_jsx, replace_node, move_node, wrap_nodes, create_frame, update_frame. Imports for catalog components are added automatically.
+   Library components (e.g. Paper shaders like MeshGradient) are in the catalog too: add_background puts one behind a frame or layer, apply_preset applies a named look. Array props are plain literals: colors={["#fff", "#000"]}.
+   For mobile screens create frames with a device (e.g. device="iphone-16"): the right size, plus touch + pixel-ratio emulation in screenshots.
+4. screenshot_frame to check the result visually. get_selection tells you what the user has selected in the editor ("make this denser" = the selection).
+5. focus to show the user what you changed. Everything is undoable by the user.`;
+var literal = z.union([z.string(), z.number(), z.boolean(), z.null(), z.array(z.union([z.string(), z.number(), z.boolean()]))]);
+var deviceIds = DEVICES.map((d) => d.id);
+function createMcpServer(ws, shots, session) {
+  const server = new McpServer({ name: "truecanvas", version: "0.1.0" }, { instructions: INSTRUCTIONS });
+  const actor = () => {
+    const name = server.server.getClientVersion()?.name ?? "agent";
+    ws.touchAgent(session(), name);
+    return { kind: "agent", name };
+  };
+  const text = (t) => ({ content: [{ type: "text", text: t }] });
+  const fail = (err) => ({ content: [{ type: "text", text: `Error: ${err.message}` }], isError: true });
+  let lastCanvas = null;
+  const resolveCanvas = (canvas) => {
+    const c2 = canvas ?? lastCanvas ?? ws.selection.canvas ?? ws.canvases()[0];
+    if (!c2) throw new Error("No canvases yet. Use create_canvas.");
+    lastCanvas = c2;
+    return c2;
+  };
+  const presence = (canvas, action, label, ids = [], frame = null) => {
+    const a = actor();
+    ws.emit({ type: "presence", presence: { session: session(), name: a.kind === "agent" ? a.name : "agent", canvas, action, label, ids, frame, at: Date.now() } });
+  };
+  const VERBS = {
+    set_props: "Editing props",
+    set_text: "Writing text",
+    set_class: "Adjusting layout",
+    insert_jsx: "Inserting",
+    insert_component: "Inserting",
+    replace: "Rewriting",
+    duplicate: "Duplicating",
+    delete: "Deleting",
+    move: "Moving",
+    reorder: "Moving",
+    wrap: "Wrapping in auto layout",
+    create_frame: "Creating a frame",
+    update_frame: "Updating frame",
+    create_variants: "Building variants",
+    add_background: "Adding a background",
+    apply_preset: "Applying a preset",
+    import_route: "Linking a page",
+    explore_copy: "Exploring a copy",
+    apply_to_page: "Applying to the page",
+    add_animation: "Animating",
+    create_component: "Creating a component",
+    add_component_frame: "Opening a component",
+    remove_animation: "Removing an animation"
+  };
+  async function edit(make) {
+    let cmd;
+    try {
+      cmd = make();
+    } catch (err) {
+      return fail(err);
+    }
+    try {
+      const c2 = cmd;
+      const before = [c2.id, ...Array.isArray(c2.ids) ? c2.ids : [], c2.parent].filter((x) => typeof x === "string");
+      const frameRef = typeof c2.frame === "string" ? c2.frame : null;
+      presence(cmd.canvas, "editing", `${VERBS[cmd.op] ?? "Editing"}\u2026`, before.filter((x) => /^\d+:\d+$/.test(x)), frameRef ?? before.find((x) => !/^\d+:\d+$/.test(x)) ?? null);
+      const res = await ws.run(cmd, actor());
+      presence(cmd.canvas, "editing", res.label, res.ids);
+      const frames = /* @__PURE__ */ new Set();
+      for (const id of res.ids) {
+        const hit = findNode(res.doc, id);
+        if (hit) frames.add(hit.frame.frameName);
+      }
+      const outline = frames.size ? [...frames].map((f) => outlineDoc(res.doc, { frame: f }).split("\n").slice(1).join("\n")).join("\n") : "";
+      return text(`\u2713 ${res.label} in ${cmd.canvas}${res.ids.length ? ` \u2192 ${res.ids.map((i) => `[${i}]`).join(" ")}` : ""}${outline ? `
+
+Updated frame (ids are fresh):
+${outline}` : ""}`);
+    } catch (err) {
+      return fail(err);
+    }
+  }
+  const canvasArg = { canvas: z.string().optional().describe("Canvas name. Defaults to the canvas open in the editor.") };
+  server.registerTool(
+    "list_canvases",
+    { title: "List canvases", description: "List canvas files with their frames.", annotations: { readOnlyHint: true } },
+    async () => {
+      actor();
+      const lines = ws.canvases().map((c2) => {
+        const doc = ws.doc(c2);
+        return `${c2} (${doc.file}): ${doc.frames.map((f) => `"${f.frameName}" ${f.width}\xD7${f.height ?? "hug"}`).join(", ") || "no frames"}`;
+      });
+      return text(lines.join("\n") || "No canvases. Use create_canvas.");
+    }
+  );
+  server.registerTool(
+    "get_canvas",
+    {
+      title: "Read canvas tree",
+      description: "Outline of a canvas: frames and their JSX tree with node ids, props and text.",
+      inputSchema: { ...canvasArg, frame: z.string().optional().describe("Only this frame (name or id)."), depth: z.number().int().optional() },
+      annotations: { readOnlyHint: true }
+    },
+    async ({ canvas, frame, depth }) => {
+      try {
+        const c2 = resolveCanvas(canvas);
+        presence(c2, "reading", frame ? `Reading ${frame}` : "Reading the canvas", [], frame ?? null);
+        return text(outlineDoc(ws.doc(c2), { frame, depth }));
+      } catch (e) {
+        return fail(e);
+      }
+    }
+  );
+  server.registerTool(
+    "get_node",
+    {
+      title: "Read node source",
+      description: "Exact TSX source of a node, its props, and the component's prop types.",
+      inputSchema: { ...canvasArg, id: z.string() },
+      annotations: { readOnlyHint: true }
+    },
+    async ({ canvas, id }) => {
+      try {
+        const c2 = resolveCanvas(canvas);
+        const source = ws.read(c2);
+        const doc = ws.doc(c2);
+        const hit = findNode(doc, id);
+        if (!hit) return fail(new Error(`No node ${id}.`));
+        presence(c2, "reading", `Reading ${hit.node.name}`, [id]);
+        await ws.catalog.load();
+        const spec = hit.node.kind === "component" ? ws.catalog.get(hit.node.name) : void 0;
+        return text(
+          [`${hit.node.name} [${id}] in frame "${hit.frame.frameName}", ${doc.file}:${hit.node.line}`, "```tsx", source.slice(hit.node.start, hit.node.end), "```", spec ? describeComponent(spec, true) : ""].join("\n")
+        );
+      } catch (e) {
+        return fail(e);
+      }
+    }
+  );
+  server.registerTool(
+    "list_components",
+    {
+      title: "List components",
+      description: "The project's React components with their props (from TypeScript types).",
+      inputSchema: { query: z.string().optional().describe("Filter by name or file.") },
+      annotations: { readOnlyHint: true }
+    },
+    async ({ query }) => {
+      actor();
+      const q = query?.toLowerCase();
+      const list = (await ws.catalog.load()).filter((c2) => !q || c2.name.toLowerCase().includes(q) || c2.file.toLowerCase().includes(q));
+      return text(list.map((c2) => describeComponent(c2)).join("\n") || "No components found.");
+    }
+  );
+  server.registerTool(
+    "get_component",
+    {
+      title: "Component details",
+      description: "Full prop types, defaults and docs of one component.",
+      inputSchema: { name: z.string() },
+      annotations: { readOnlyHint: true }
+    },
+    async ({ name }) => {
+      actor();
+      await ws.catalog.load();
+      const spec = ws.catalog.get(name);
+      return spec ? text(describeComponent(spec, true)) : fail(new Error(`Unknown component ${name}.`));
+    }
+  );
+  server.registerTool(
+    "get_design_tokens",
+    {
+      title: "Design tokens",
+      description: "The project's Tailwind theme tokens (colors, fonts, radius, shadows) to use in className.",
+      annotations: { readOnlyHint: true }
+    },
+    async () => {
+      actor();
+      return text(readDesignTokens(ws.config.root));
+    }
+  );
+  server.registerTool(
+    "get_selection",
+    {
+      title: "Get user selection",
+      description: "What the user currently has selected in the Truecanvas editor, with the source of each node.",
+      annotations: { readOnlyHint: true }
+    },
+    async () => {
+      actor();
+      const { canvas, ids } = ws.selection;
+      if (!canvas) return text("The editor is not open.");
+      if (!ids.length) return text(`Nothing selected. Open canvas: ${canvas}.`);
+      lastCanvas = canvas;
+      presence(canvas, "looking", "Looking at your selection", ids);
+      const doc = ws.doc(canvas);
+      const source = ws.read(canvas);
+      const parts = [`canvas: ${canvas}`];
+      for (const id of ids) {
+        const hit = findNode(doc, id);
+        if (!hit) continue;
+        parts.push(`[${id}] ${hit.node.name} in frame "${hit.frame.frameName}"
+\`\`\`tsx
+${source.slice(hit.node.start, hit.node.end)}
+\`\`\``);
+      }
+      return text(parts.join("\n\n"));
+    }
+  );
+  server.registerTool(
+    "set_props",
+    {
+      title: "Set props",
+      description: "Set literal props on a node. null removes the prop (falls back to its default).",
+      inputSchema: { ...canvasArg, id: z.string(), props: z.record(z.string(), literal) },
+      annotations: { idempotentHint: true }
+    },
+    ({ canvas, id, props }) => edit(() => ({ op: "set_props", canvas: resolveCanvas(canvas), id, props }))
+  );
+  server.registerTool(
+    "set_text",
+    {
+      title: "Set text",
+      description: "Replace the text content of a node (or of a text node).",
+      inputSchema: { ...canvasArg, id: z.string(), text: z.string() },
+      annotations: { idempotentHint: true }
+    },
+    ({ canvas, id, text: t }) => edit(() => ({ op: "set_text", canvas: resolveCanvas(canvas), id, text: t }))
+  );
+  server.registerTool(
+    "set_class_name",
+    {
+      title: "Set Tailwind classes",
+      description: "Replace a node's className (Tailwind). Use for layout: flex, gap-*, p-*, items-*, justify-*.",
+      inputSchema: { ...canvasArg, id: z.string(), className: z.string() },
+      annotations: { idempotentHint: true }
+    },
+    ({ canvas, id, className }) => edit(() => ({ op: "set_class", canvas: resolveCanvas(canvas), id, className }))
+  );
+  server.registerTool(
+    "insert_jsx",
+    {
+      title: "Insert JSX",
+      description: "Insert a JSX snippet as a child of a frame or node. Catalog components are imported automatically.",
+      inputSchema: {
+        ...canvasArg,
+        parent: z.string().describe("Frame name/id or node id."),
+        index: z.number().int().optional().describe("Child index; omit to append."),
+        jsx: z.string()
+      }
+    },
+    ({ canvas, parent, index, jsx }) => edit(() => ({ op: "insert_jsx", canvas: resolveCanvas(canvas), parent, index, jsx }))
+  );
+  server.registerTool(
+    "replace_node",
+    {
+      title: "Replace node",
+      description: "Replace a node (and its children) with a JSX snippet.",
+      inputSchema: { ...canvasArg, id: z.string(), jsx: z.string() }
+    },
+    ({ canvas, id, jsx }) => edit(() => ({ op: "replace", canvas: resolveCanvas(canvas), id, jsx }))
+  );
+  server.registerTool(
+    "duplicate_nodes",
+    {
+      title: "Duplicate",
+      description: "Duplicate nodes or frames in place (frames are placed to the right).",
+      inputSchema: { ...canvasArg, ids: z.array(z.string()).min(1) }
+    },
+    ({ canvas, ids }) => edit(() => ({ op: "duplicate", canvas: resolveCanvas(canvas), ids }))
+  );
+  server.registerTool(
+    "delete_nodes",
+    {
+      title: "Delete",
+      description: "Delete nodes or frames.",
+      inputSchema: { ...canvasArg, ids: z.array(z.string()).min(1) },
+      annotations: { destructiveHint: true }
+    },
+    ({ canvas, ids }) => edit(() => ({ op: "delete", canvas: resolveCanvas(canvas), ids }))
+  );
+  server.registerTool(
+    "move_node",
+    {
+      title: "Move node",
+      description: "Move a node to another parent (frame or node) at an index.",
+      inputSchema: { ...canvasArg, id: z.string(), parent: z.string(), index: z.number().int().optional() }
+    },
+    ({ canvas, id, parent, index }) => edit(() => ({ op: "move", canvas: resolveCanvas(canvas), id, parent, index }))
+  );
+  server.registerTool(
+    "wrap_nodes",
+    {
+      title: "Wrap in auto layout",
+      description: "Wrap sibling nodes in a <div> with Tailwind layout classes (default: flex flex-col gap-2).",
+      inputSchema: { ...canvasArg, ids: z.array(z.string()).min(1), className: z.string().optional() }
+    },
+    ({ canvas, ids, className }) => edit(() => ({ op: "wrap", canvas: resolveCanvas(canvas), ids, className }))
+  );
+  server.registerTool(
+    "create_frame",
+    {
+      title: "Create frame",
+      description: "Add a frame (artboard). Placed right of existing frames unless x/y are given. Omit height to hug content.",
+      inputSchema: {
+        ...canvasArg,
+        name: z.string(),
+        width: z.number().optional().describe("Default 1024."),
+        height: z.number().nullable().optional(),
+        x: z.number().optional(),
+        y: z.number().optional(),
+        theme: z.enum(["light", "dark"]).nullable().optional(),
+        device: z.enum(deviceIds).optional().describe(`Device preset; sets width/height. ${DEVICES.map((d) => `${d.id} ${d.width}\xD7${d.height}`).join(", ")}`),
+        jsx: z.string().optional().describe("Initial content.")
+      }
+    },
+    ({ canvas, ...rest }) => edit(() => ({ op: "create_frame", canvas: resolveCanvas(canvas), ...rest }))
+  );
+  server.registerTool(
+    "update_frame",
+    {
+      title: "Update frame",
+      description: "Rename, move, resize or theme a frame. height: null = hug content; theme: null = inherit.",
+      inputSchema: {
+        ...canvasArg,
+        frame: z.string().describe("Frame name or id."),
+        name: z.string().optional(),
+        x: z.number().optional(),
+        y: z.number().optional(),
+        width: z.number().optional(),
+        height: z.number().nullable().optional(),
+        theme: z.enum(["light", "dark"]).nullable().optional(),
+        device: z.enum(deviceIds).nullable().optional().describe("Device preset (sets size); null removes it.")
+      }
+    },
+    ({ canvas, ...rest }) => edit(() => ({ op: "update_frame", canvas: resolveCanvas(canvas), ...rest }))
+  );
+  server.registerTool(
+    "create_variants_frame",
+    {
+      title: "Variants frame",
+      description: "New frame showing a component once per value of a union/boolean prop. Great for reviewing states.",
+      inputSchema: { ...canvasArg, component: z.string(), prop: z.string(), props: z.record(z.string(), literal).optional() }
+    },
+    ({ canvas, ...rest }) => edit(() => ({ op: "create_variants", canvas: resolveCanvas(canvas), ...rest }))
+  );
+  server.registerTool(
+    "import_page",
+    {
+      title: "Link an app page",
+      description: "Add a frame showing one of the app's real pages, with its layouts. By default the frame is LINKED: its layers are the page's own JSX and editing them edits the page and layout files directly (git tracks it). Pages with data or logic are view only when linked. Pass copy=true for a detached copy in the canvas file instead.",
+      inputSchema: {
+        ...canvasArg,
+        route: z.string().describe('URL path like "/" or "/pricing", or the page file'),
+        name: z.string().optional(),
+        width: z.number().optional().describe("Default 1440."),
+        copy: z.boolean().optional().describe("Copy the page's JSX into the canvas instead of linking. Default false.")
+      }
+    },
+    ({ canvas, ...rest }) => edit(() => ({ op: "import_route", canvas: resolveCanvas(canvas), ...rest }))
+  );
+  server.registerTool(
+    "explore_copy",
+    {
+      title: "Explore a copy of a page",
+      description: "Copy a linked frame into a new exploration frame next to it. The copy lives in the canvas file, so you can try bold changes without touching the real page. When it's good, apply_to_page writes it back.",
+      inputSchema: { ...canvasArg, frame: z.string().describe("Name or id of a linked frame."), name: z.string().optional() }
+    },
+    ({ canvas, ...rest }) => edit(() => ({ op: "explore_copy", canvas: resolveCanvas(canvas), ...rest }))
+  );
+  server.registerTool(
+    "apply_to_page",
+    {
+      title: "Apply exploration to page",
+      description: "Write an exploration frame (made with explore_copy) back to its page file: the page's returned JSX is replaced with the frame's content, needed imports are added and unused ones removed. The page's layouts are not changed. Undoable.",
+      inputSchema: { ...canvasArg, frame: z.string().describe("Name or id of the exploration frame.") }
+    },
+    ({ canvas, ...rest }) => edit(() => ({ op: "apply_to_page", canvas: resolveCanvas(canvas), ...rest }))
+  );
+  server.registerTool(
+    "create_component",
+    {
+      title: "Create a component",
+      description: "Create a new component file in the project's components folder. With `from` (a node id), the selected layers move into it and are replaced by <Name />, imports included. Without it, a starter component is created and, with `parent`, inserted there. Then use open_component to design it.",
+      inputSchema: {
+        ...canvasArg,
+        name: z.string().describe('PascalCase, e.g. "PricingCard"'),
+        from: z.string().optional().describe("Node id to turn into the component."),
+        parent: z.string().optional(),
+        index: z.number().optional()
+      }
+    },
+    ({ canvas, ...rest }) => edit(() => ({ op: "create_component", canvas: resolveCanvas(canvas), ...rest }))
+  );
+  server.registerTool(
+    "open_component",
+    {
+      title: "Open a main component",
+      description: `Add a main component frame for a project component (Figma's main component): its layers are the component's own JSX, edits go to its file, and every instance in the app follows. Expressions inside it (props, {children}) are read-only; className={cn("\u2026", className)} edits the static classes. Reuses the frame if it's already open.`,
+      inputSchema: { ...canvasArg, component: z.string().describe("Component name from list_components.") }
+    },
+    ({ canvas, component }) => edit(() => ({ op: "add_component_frame", canvas: resolveCanvas(canvas), component }))
+  );
+  server.registerTool(
+    "add_animation",
+    {
+      title: "Animate a layer",
+      description: `Make a layer animate in when it scrolls into view. kind "reveal" wraps the layer in <Reveal> (effects: fade-up, fade-down, fade-in, blur-in, scale-in, slide-left, slide-right). kind "text" wraps the layer's text in <TextAnimate> (effects: words, letters, blur-in, slide-up, typewriter), keeping inline elements like <em>. The first use adds both components to the project (components/motion/), plain React, no dependencies. Calling it again on an animated layer updates its settings. For a staggered list, give each item a growing delay.`,
+      inputSchema: {
+        ...canvasArg,
+        id: z.string().describe("Layer to animate (or its existing Reveal/TextAnimate)."),
+        kind: z.enum(["reveal", "text"]),
+        effect: z.string().optional(),
+        delay: z.number().min(0).max(5).optional().describe("Seconds before it starts."),
+        duration: z.number().min(0.05).max(5).optional().describe("Seconds."),
+        stagger: z.number().min(0).max(1).optional().describe("Text only: seconds between words or letters."),
+        once: z.boolean().optional().describe("Only the first time it enters the view. Default true.")
+      }
+    },
+    ({ canvas, ...rest }) => edit(() => ({ op: "add_animation", canvas: resolveCanvas(canvas), ...rest }))
+  );
+  server.registerTool(
+    "remove_animation",
+    {
+      title: "Remove an animation",
+      description: "Unwrap a layer's <Reveal> or <TextAnimate>, leaving the layer as it was. The import goes when no longer used.",
+      inputSchema: { ...canvasArg, id: z.string(), kind: z.enum(["reveal", "text"]) }
+    },
+    ({ canvas, ...rest }) => edit(() => ({ op: "remove_animation", canvas: resolveCanvas(canvas), ...rest }))
+  );
+  server.registerTool(
+    "play_frame",
+    {
+      title: "Play a frame",
+      description: `Show animations in the user's editor. "play": the frame becomes one screen tall and scrolls inside, so scroll reveals run like on the site. "replay": rerun the entrance animations. "stop": back to the full-height view. (screenshot_frame always captures animations finished.)`,
+      inputSchema: { ...canvasArg, frame: z.string(), mode: z.enum(["play", "replay", "stop"]).default("replay") },
+      annotations: { readOnlyHint: true }
+    },
+    async ({ canvas, frame, mode }) => {
+      const c2 = resolveCanvas(canvas);
+      let f;
+      try {
+        f = ws.findFrameOf(c2, frame);
+      } catch (e) {
+        return fail(e);
+      }
+      presence(c2, "looking", mode === "play" ? "Playing" : mode === "stop" ? "Stopped" : "Replaying", [f.id]);
+      ws.emit({ type: "motion", canvas: c2, frame: f.frameName, action: mode });
+      return text(`\u2713 ${mode === "play" ? "Playing" : mode === "stop" ? "Stopped" : "Replayed"} ${f.frameName} in the editor.`);
+    }
+  );
+  server.registerTool(
+    "add_background",
+    {
+      title: "Add background",
+      description: "Put a component (typically a shader like MeshGradient or GrainGradient) behind a frame or layer, filling it. Optionally with a named preset.",
+      inputSchema: {
+        ...canvasArg,
+        parent: z.string().describe("Frame name/id or node id."),
+        component: z.string().describe("Component name, e.g. MeshGradient."),
+        preset: z.string().optional().describe("Preset name from get_component.")
+      }
+    },
+    ({ canvas, ...rest }) => edit(() => ({ op: "add_background", canvas: resolveCanvas(canvas), ...rest }))
+  );
+  server.registerTool(
+    "apply_preset",
+    {
+      title: "Apply preset",
+      description: "Apply one of a component's named presets (see get_component) to a node.",
+      inputSchema: { ...canvasArg, id: z.string(), preset: z.string() }
+    },
+    ({ canvas, id, preset }) => edit(() => ({ op: "apply_preset", canvas: resolveCanvas(canvas), id, preset }))
+  );
+  server.registerTool(
+    "create_canvas",
+    {
+      title: "Create canvas",
+      description: "Create a new canvas file with a starter frame.",
+      inputSchema: { name: z.string().describe("kebab-case, e.g. onboarding") }
+    },
+    async ({ name }) => {
+      try {
+        ws.createCanvas(name, actor());
+        return text(`\u2713 Created canvas ${name} (${ws.relFile(name)}). Next.js picks the new route up in a second.`);
+      } catch (e) {
+        return fail(e);
+      }
+    }
+  );
+  server.registerTool(
+    "list_comments",
+    {
+      title: "Read comments",
+      description: "Comments people left on the canvas (pinned to frames/layers), with the source of the commented layer. Address them, then resolve_comment.",
+      inputSchema: { ...canvasArg, include_resolved: z.boolean().optional() },
+      annotations: { readOnlyHint: true }
+    },
+    async ({ canvas, include_resolved }) => {
+      try {
+        const c2 = resolveCanvas(canvas);
+        const threads = ws.comments.list(c2).filter((t) => include_resolved || !t.resolved);
+        presence(c2, "reading", `Reading ${threads.length} comment${threads.length === 1 ? "" : "s"}`);
+        if (!threads.length) return text(include_resolved ? "No comments on this canvas." : "No open comments. (include_resolved: true shows resolved ones.)");
+        const doc = ws.doc(c2);
+        const source = ws.read(c2);
+        const parts = threads.map((t) => {
+          let where = "";
+          if (t.node) {
+            const node = findByPath(doc, t.node.path.split(".").map(Number));
+            if (node && node.name === t.node.name) where = `
+on [${node.id}] ${node.name}:
+\`\`\`tsx
+${source.slice(node.start, node.end)}
+\`\`\``;
+            else where = `
+on a ${t.node.name} (it may have moved)`;
+          }
+          const msgs = t.messages.map((m) => `  ${m.author.name}${m.author.kind === "agent" ? " (agent)" : ""}: ${m.text}`).join("\n");
+          return `thread ${t.id}${t.resolved ? " [resolved]" : ""} in frame "${t.frame}" at ${t.x},${t.y}${where}
+${msgs}`;
+        });
+        return text(parts.join("\n\n"));
+      } catch (e) {
+        return fail(e);
+      }
+    }
+  );
+  server.registerTool(
+    "reply_comment",
+    {
+      title: "Reply to a comment",
+      description: "Reply in a comment thread, e.g. to explain a change or ask a question.",
+      inputSchema: { ...canvasArg, thread: z.string(), text: z.string() }
+    },
+    async ({ canvas, thread, text: body }) => {
+      try {
+        const c2 = resolveCanvas(canvas);
+        const a = actor();
+        const t = ws.comments.reply(c2, thread, body, { name: a.kind === "agent" ? a.name : "agent", kind: "agent" });
+        ws.commentsChanged(c2);
+        presence(c2, "editing", "Replied to a comment", [], t.frame);
+        return text(`\u2713 Replied in thread ${t.id}.`);
+      } catch (e) {
+        return fail(e);
+      }
+    }
+  );
+  server.registerTool(
+    "resolve_comment",
+    {
+      title: "Resolve a comment",
+      description: "Mark a comment thread as resolved once you've addressed it, optionally with a short note of what you changed.",
+      inputSchema: { ...canvasArg, thread: z.string(), note: z.string().optional() }
+    },
+    async ({ canvas, thread, note }) => {
+      try {
+        const c2 = resolveCanvas(canvas);
+        const a = actor();
+        const author = { name: a.kind === "agent" ? a.name : "agent", kind: "agent" };
+        if (note?.trim()) ws.comments.reply(c2, thread, note, author);
+        const t = ws.comments.resolve(c2, thread, true, author);
+        ws.commentsChanged(c2);
+        presence(c2, "editing", "Resolved a comment", [], t.frame);
+        return text(`\u2713 Resolved thread ${t.id}.`);
+      } catch (e) {
+        return fail(e);
+      }
+    }
+  );
+  server.registerTool(
+    "rename_canvas",
+    {
+      title: "Rename canvas",
+      description: "Rename a canvas (page). Renames its .canvas.tsx file.",
+      inputSchema: { canvas: z.string(), name: z.string().describe("kebab-case") }
+    },
+    async ({ canvas, name }) => {
+      try {
+        actor();
+        ws.renameCanvas(canvas, name);
+        if (lastCanvas === canvas) lastCanvas = name;
+        return text(`\u2713 Renamed ${canvas} to ${name}.`);
+      } catch (e) {
+        return fail(e);
+      }
+    }
+  );
+  server.registerTool(
+    "delete_canvas",
+    {
+      title: "Delete canvas",
+      description: "Delete a canvas (page) file. Ask the user first.",
+      inputSchema: { canvas: z.string() },
+      annotations: { destructiveHint: true }
+    },
+    async ({ canvas }) => {
+      try {
+        actor();
+        ws.deleteCanvas(canvas);
+        if (lastCanvas === canvas) lastCanvas = null;
+        return text(`\u2713 Deleted ${canvas}. The user can restore it from the editor during this session.`);
+      } catch (e) {
+        return fail(e);
+      }
+    }
+  );
+  server.registerTool(
+    "screenshot_frame",
+    {
+      title: "Screenshot frame",
+      description: "PNG of a frame rendered by the real app. Use it to check your work.",
+      inputSchema: {
+        ...canvasArg,
+        frame: z.string().describe("Frame name or id."),
+        theme: z.enum(["light", "dark"]).optional().describe("Override for frames that inherit."),
+        scale: z.number().min(0.5).max(2).optional().describe("Device pixel ratio, default 1.")
+      },
+      annotations: { readOnlyHint: true }
+    },
+    async ({ canvas, frame, theme, scale }) => {
+      try {
+        const c2 = resolveCanvas(canvas);
+        const f = ws.findFrameOf(c2, frame);
+        presence(c2, "looking", "Taking a screenshot", [], f.frameName);
+        const device = findDevice(f.device);
+        const png = await shots.frame({ canvas: c2, frame: f.frameName, width: f.width, height: f.height, theme: f.theme ?? theme ?? "light", scale, mobile: device ? device.kind !== "desktop" : false });
+        return { content: [{ type: "image", data: png.toString("base64"), mimeType: "image/png" }, { type: "text", text: `Frame "${f.frameName}" ${f.width}\xD7${f.height ?? "hug"}` }] };
+      } catch (e) {
+        return fail(e);
+      }
+    }
+  );
+  server.registerTool(
+    "focus",
+    {
+      title: "Show in editor",
+      description: "Select and zoom to nodes or frames in the user's editor, to show them what you did.",
+      inputSchema: { ...canvasArg, ids: z.array(z.string()).min(1) },
+      annotations: { readOnlyHint: true }
+    },
+    async ({ canvas, ids }) => {
+      const a = actor();
+      const c2 = resolveCanvas(canvas);
+      presence(c2, "looking", "Look here", ids);
+      ws.emit({ type: "focus", canvas: c2, ids, actor: a.kind === "agent" ? a.name : "agent" });
+      return text("\u2713 Shown in the editor.");
+    }
+  );
+  server.registerTool(
+    "undo",
+    { title: "Undo", description: "Undo the last change on a canvas (yours or the user's).", inputSchema: { ...canvasArg } },
+    async ({ canvas }) => {
+      try {
+        return text(`\u2713 ${(await ws.undo(resolveCanvas(canvas), actor())).label}`);
+      } catch (e) {
+        return fail(e);
+      }
+    }
+  );
+  server.registerTool(
+    "redo",
+    { title: "Redo", description: "Redo the last undone change.", inputSchema: { ...canvasArg } },
+    async ({ canvas }) => {
+      try {
+        return text(`\u2713 ${(await ws.redo(resolveCanvas(canvas), actor())).label}`);
+      } catch (e) {
+        return fail(e);
+      }
+    }
+  );
+  return server;
+}
+
+// src/server/thumbnails.ts
+import crypto from "crypto";
+import fs from "fs";
+import path from "path";
+var Thumbnails = class _Thumbnails {
+  constructor(ws, shots) {
+    this.ws = ws;
+    this.shots = shots;
+    this.dir = path.join(ws.config.root, "node_modules", ".cache", "truecanvas", "thumbs");
+  }
+  ws;
+  shots;
+  queue = Promise.resolve();
+  dir;
+  /** Props a component gets in its thumbnail: defaults, required placeholders, a label, or a preset. */
+  static previewProps(spec, preset) {
+    const props = {};
+    for (const p2 of spec.props) {
+      if (p2.optional || p2.default !== void 0 || p2.name === "children") continue;
+      if (p2.type === "string") props[p2.name] = p2.name === "title" || p2.name === "label" ? spec.name : p2.name;
+      else if (p2.type === "enum") props[p2.name] = p2.options[0];
+      else if (p2.type === "boolean") props[p2.name] = false;
+      else if (p2.type === "number") props[p2.name] = 0;
+    }
+    const children = spec.props.find((p2) => p2.name === "children");
+    if (spec.acceptsChildren && children && children.default === void 0) props.children = spec.name;
+    if (spec.library && !spec.acceptsChildren) Object.assign(props, { width: 320, height: 200 });
+    const p = preset ? spec.presets?.find((x) => x.name === preset) : void 0;
+    if (p) Object.assign(props, p.props);
+    return props;
+  }
+  key(spec, props) {
+    let stamp = "";
+    try {
+      const file = spec.library ? path.join(this.ws.config.root, "node_modules", spec.library, "package.json") : path.join(this.ws.config.root, spec.file);
+      stamp = String(fs.statSync(file).mtimeMs);
+    } catch {
+      stamp = "0";
+    }
+    return crypto.createHash("sha1").update(JSON.stringify({ v: 1, name: spec.name, props, stamp })).digest("hex").slice(0, 16);
+  }
+  async get(name, preset) {
+    await this.ws.catalog.load();
+    const spec = this.ws.catalog.get(name);
+    if (!spec) throw new Error(`Unknown component ${name}`);
+    const props = _Thumbnails.previewProps(spec, preset);
+    const file = path.join(this.dir, `${name}-${this.key(spec, props)}.png`);
+    if (fs.existsSync(file)) return fs.readFileSync(file);
+    const job = this.queue.then(async () => {
+      if (fs.existsSync(file)) return fs.readFileSync(file);
+      const url = `${this.ws.config.appUrl}/truecanvas/__preview?component=${encodeURIComponent(name)}&props=${encodeURIComponent(JSON.stringify(props))}`;
+      const png = await this.shots.element(url, { width: 640, height: 480 });
+      fs.mkdirSync(this.dir, { recursive: true });
+      fs.writeFileSync(file, png);
+      return png;
+    });
+    this.queue = job.catch(() => void 0);
+    return job;
+  }
+};
+
+// src/server/screenshot.ts
+import fs2 from "fs";
+import os from "os";
+import path2 from "path";
+function findChromium() {
+  if (process.env.TRUECANVAS_CHROME) return process.env.TRUECANVAS_CHROME;
+  const cache2 = path2.join(os.homedir(), ".cache", "ms-playwright");
+  if (fs2.existsSync(cache2)) {
+    const shells = fs2.readdirSync(cache2).filter((d) => d.startsWith("chromium_headless_shell-")).sort().reverse();
+    for (const d of shells) {
+      for (const sub of ["chrome-headless-shell-linux64/chrome-headless-shell", "chrome-linux/headless_shell", "chrome-headless-shell-mac-arm64/chrome-headless-shell", "chrome-headless-shell-mac-x64/chrome-headless-shell"]) {
+        const p = path2.join(cache2, d, sub);
+        if (fs2.existsSync(p)) return p;
+      }
+    }
+  }
+  for (const p of [
+    "/usr/bin/chromium-browser",
+    "/usr/bin/chromium",
+    "/usr/bin/google-chrome-stable",
+    "/usr/bin/google-chrome",
+    "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
+    "/Applications/Chromium.app/Contents/MacOS/Chromium"
+  ]) {
+    if (fs2.existsSync(p)) return p;
+  }
+  return void 0;
+}
+var Screenshotter = class {
+  constructor(appUrl) {
+    this.appUrl = appUrl;
+  }
+  appUrl;
+  browser = null;
+  idle = null;
+  executable() {
+    return findChromium();
+  }
+  async getBrowser() {
+    if (!this.browser) {
+      const { chromium } = await import("playwright-core");
+      const executablePath = this.executable();
+      if (!executablePath) throw new Error("No Chromium found for screenshots. Install Chrome/Chromium or set TRUECANVAS_CHROME.");
+      this.browser = chromium.launch({ executablePath, headless: true, args: ["--disable-gpu", "--disable-dev-shm-usage"] });
+      this.browser.catch(() => this.browser = null);
+    }
+    return this.browser;
+  }
+  touch() {
+    if (this.idle) clearTimeout(this.idle);
+    this.idle = setTimeout(() => void this.close(), 6e4);
+  }
+  async close() {
+    const b = this.browser;
+    this.browser = null;
+    if (b) await (await b).close().catch(() => {
+    });
+  }
+  /** Screenshot of the [data-tc-frame] element of a page (Assets thumbnails). */
+  async element(url, viewport) {
+    const browser = await this.getBrowser();
+    this.touch();
+    const ctx = await browser.newContext({ viewport, deviceScaleFactor: 2, colorScheme: "light" });
+    try {
+      const page = await ctx.newPage();
+      await page.goto(`${url}${url.includes("?") ? "&" : "?"}still=1`, { waitUntil: "load", timeout: 3e4 });
+      const el = await page.waitForSelector("[data-tc-frame]", { timeout: 2e4 });
+      await page.evaluate(() => document.fonts.ready.then(() => new Promise((r) => setTimeout(r, 250))));
+      await page.waitForFunction(() => window.__tcStill === true, void 0, { timeout: 6e3 }).catch(() => {
+      });
+      return await el.screenshot({ type: "png", omitBackground: true });
+    } finally {
+      await ctx.close();
+      this.touch();
+    }
+  }
+  async frame(opts) {
+    const browser = await this.getBrowser();
+    this.touch();
+    const ctx = await browser.newContext({
+      viewport: { width: opts.width, height: opts.height ?? 800 },
+      deviceScaleFactor: opts.scale ?? 1,
+      colorScheme: opts.theme === "dark" ? "dark" : "light",
+      // device frames: touch input, (hover: none) and mobile viewport rules
+      isMobile: !!opts.mobile,
+      hasTouch: !!opts.mobile
+    });
+    try {
+      const page = await ctx.newPage();
+      const url = `${this.appUrl}/truecanvas/${encodeURIComponent(opts.canvas)}?frame=${encodeURIComponent(opts.frame)}&theme=${opts.theme}&still=1`;
+      await page.goto(url, { waitUntil: "load", timeout: 3e4 });
+      await page.waitForSelector("[data-tc-frame]", { timeout: 2e4 });
+      if (!opts.height) {
+        const h = await page.evaluate(() => Math.ceil(document.querySelector("[data-tc-frame]").getBoundingClientRect().height));
+        await page.setViewportSize({ width: opts.width, height: Math.min(Math.max(h, 100), opts.maxHeight ?? 16e3) });
+      }
+      await page.waitForFunction(() => window.__tcStill === true, void 0, { timeout: 6e3 }).catch(() => {
+      });
+      await page.evaluate(() => document.fonts.ready.then(() => new Promise((r) => setTimeout(r, 50))));
+      await page.waitForTimeout(150);
+      const format = opts.jpeg ? { type: "jpeg", quality: 78 } : { type: "png" };
+      return await page.screenshot(format);
+    } finally {
+      await ctx.close();
+      this.touch();
+    }
+  }
+};
+
+// src/server/review.ts
+import fs3 from "fs";
+import path3 from "path";
+import { createHash } from "crypto";
+var actorName = (e) => e.actor.kind === "agent" ? e.actor.name : e.actor.kind === "file" ? "code editor" : "you";
+async function versionAt(ws, canvas, ref) {
+  const rel = ws.relFile(canvas);
+  const source = await ws.git.show(ref, rel);
+  const files = {};
+  if (source !== null) {
+    for (const f of parseCanvas(canvas, rel, source).frames) {
+      if (!f.page) continue;
+      for (const file of [f.page, ...layoutFiles(ws.config, f.page)]) files[file] = await ws.git.show(ref, file);
+    }
+  }
+  return { source, files };
+}
+var readNow = (ws, file) => {
+  try {
+    return fs3.readFileSync(path3.join(ws.config.root, file), "utf8");
+  } catch {
+    return null;
+  }
+};
+async function reviewPage(ws, canvas, ref, since) {
+  const rel = ws.relFile(canvas);
+  const exists = fs3.existsSync(ws.file(canvas));
+  const old = await versionAt(ws, canvas, ref);
+  if (!exists && old.source === null) return null;
+  const now = exists ? ws.read(canvas) : null;
+  const files = [];
+  if (old.source !== now) files.push(rel);
+  const status = {};
+  if (old.source === null) {
+    for (const f of parseCanvas(canvas, rel, now).frames) status[f.frameName] = "added";
+  } else if (now === null) {
+    for (const f of parseCanvas(canvas, rel, old.source).frames) status[f.frameName] = "removed";
+  } else {
+    for (const [name, s] of Object.entries(frameChanges(old.source, now))) if (s !== "same") status[name] = s;
+    const linkedNow = ws.doc(canvas).frames.filter((f) => f.page);
+    for (const f of linkedNow) {
+      for (const file of [f.page, ...layoutFiles(ws.config, f.page)]) {
+        const before = file in old.files ? old.files[file] : await ws.git.show(ref, file);
+        if (before !== readNow(ws, file)) {
+          status[f.frameName] ??= "changed";
+          if (!files.includes(file)) files.push(file);
+        }
+      }
+    }
+  }
+  const comments = path3.join(ws.config.canvasDir, `${canvas}.comments.json`);
+  if (await ws.git.show(ref, comments) !== readNow(ws, comments)) files.push(comments);
+  if (!files.length) return null;
+  const history = exists ? ws.changesSince(canvas, since) : [];
+  const frames = Object.entries(status).map(([name, s]) => ({
+    name,
+    status: s,
+    changes: history.filter((e) => e.frames?.includes(name)).map((e) => ({ label: e.label, actor: actorName(e), at: e.at }))
+  }));
+  const loose = history.filter((e) => !e.frames?.length || !e.frames.some((n) => n in status));
+  if (loose.length && frames.length) frames[0].changes.push(...loose.map((e) => ({ label: e.label, actor: actorName(e), at: e.at })));
+  for (const f of frames) f.changes.sort((a, b) => a.at - b.at);
+  return { canvas, status: old.source === null ? "added" : now === null ? "deleted" : "modified", frames, files };
+}
+async function reviewAll(ws) {
+  const status = await ws.git.status();
+  if (!status.repo) return [];
+  const since = await ws.git.lastCommitAt();
+  const ref = status.unborn ? "__none__" : "HEAD";
+  const names = new Set(ws.canvases());
+  for (const f of status.files) {
+    const m = new RegExp(`^${ws.config.canvasDir.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}/(.+)\\.canvas\\.tsx$`).exec(f.path);
+    if (m) names.add(m[1]);
+  }
+  const changed = new Set(status.files.map((f) => f.path));
+  const linked = new Set(ws.linkedFiles());
+  const out = [];
+  for (const canvas of names) {
+    const own = [ws.relFile(canvas), path3.join(ws.config.canvasDir, `${canvas}.comments.json`)];
+    const touchesLinked = [...linked].some((f) => changed.has(f));
+    if (!own.some((f) => changed.has(f)) && !touchesLinked) continue;
+    const page = await reviewPage(ws, canvas, ref, since).catch(() => null);
+    if (page) out.push(page);
+  }
+  return out;
+}
+var cache = /* @__PURE__ */ new Map();
+var queue = Promise.resolve();
+function renderFrame(ws, shots, canvas, frame, side, ref) {
+  const job = queue.then(() => render(ws, shots, canvas, frame, side, ref));
+  queue = job.catch(() => void 0);
+  return job;
+}
+async function render(ws, shots, canvas, frame, side, ref) {
+  let source;
+  let files = {};
+  if (side === "after") source = fs3.existsSync(ws.file(canvas)) ? ws.read(canvas) : null;
+  else {
+    const old = await versionAt(ws, canvas, ref);
+    source = old.source;
+    for (const [f2, content] of Object.entries(old.files)) if (content !== null && content !== readNow(ws, f2)) files[f2] = content;
+  }
+  if (source === null) return null;
+  const doc = parseCanvas(canvas, ws.relFile(canvas), source);
+  const f = doc.frames.find((x) => x.frameName === frame);
+  if (!f) return null;
+  const linkedNow = f.page ? [f.page, ...layoutFiles(ws.config, f.page)].map((x) => readNow(ws, x) ?? "").join("\0") : "";
+  const key = createHash("sha1").update([canvas, frame, side, source, JSON.stringify(files), side === "after" ? linkedNow : ""].join("\0")).digest("hex");
+  const hit = cache.get(key);
+  if (hit) return hit;
+  let name = canvas;
+  const snapshot = `${canvas}.${side === "before" ? "base" : "now"}`;
+  if (side === "before" || !fs3.existsSync(ws.file(canvas))) name = writeCompare(ws.config, canvas, source, files, snapshot);
+  try {
+    const device = findDevice(f.device);
+    const png = await shots.frame({ canvas: name, frame, width: f.width, height: f.height, theme: f.theme ?? "light", scale: Math.min(2, Math.max(0.4, 1e3 / f.width)), mobile: device ? device.kind !== "desktop" : false, jpeg: true, maxHeight: 6e3 });
+    if (cache.size > 60) cache.delete(cache.keys().next().value);
+    cache.set(key, png);
+    return png;
+  } finally {
+    if (name !== canvas) clearCompare(ws.config, snapshot);
+  }
+}
+function prDesignSection(pages, images) {
+  if (!pages.length) return "";
+  const lines = ["## Design changes", "", "_Made in Truecanvas._", ""];
+  for (const page of pages) {
+    for (const f of page.frames) {
+      lines.push(`### ${f.name} \`${page.canvas}\`${f.status === "added" ? " \xB7 new" : f.status === "removed" ? " \xB7 removed" : ""}`, "");
+      const img = images.find((i) => i.canvas === page.canvas && i.frame === f.name);
+      if (img && (img.before || img.after)) {
+        if (img.before && img.after) lines.push("| Before | After |", "| --- | --- |", `| <img src="${img.before}" width="420"> | <img src="${img.after}" width="420"> |`, "");
+        else lines.push(`<img src="${img.after ?? img.before}" width="420">`, "");
+      }
+      const seen = /* @__PURE__ */ new Set();
+      for (const c2 of f.changes) {
+        if (seen.has(c2.label)) continue;
+        seen.add(c2.label);
+        lines.push(`- ${c2.label}${c2.actor !== "you" ? ` _(${c2.actor})_` : ""}`);
+      }
+      if (f.changes.length) lines.push("");
+    }
+  }
+  return lines.join("\n");
+}
+
+// src/server/http.ts
+var MIME = {
+  ".html": "text/html; charset=utf-8",
+  ".js": "text/javascript; charset=utf-8",
+  ".css": "text/css; charset=utf-8",
+  ".svg": "image/svg+xml",
+  ".woff2": "font/woff2",
+  ".png": "image/png",
+  ".json": "application/json"
+};
+async function startServer(ws) {
+  const { config } = ws;
+  const editorDir = fileURLToPath(new URL("./editor/", import.meta.url));
+  const shots = new Screenshotter(config.appUrl);
+  let prCache = null;
+  const thumbs = new Thumbnails(ws, shots);
+  const syncRegistry = () => ws.catalog.load().then((list) => syncComponentRegistry(config, list)).catch(() => {
+  });
+  void syncRegistry();
+  const origin = `http://localhost:${config.port}`;
+  const allowedHosts = /* @__PURE__ */ new Set([`localhost:${config.port}`, `127.0.0.1:${config.port}`]);
+  const allowedOrigins = /* @__PURE__ */ new Set([origin, `http://127.0.0.1:${config.port}`]);
+  const clients = /* @__PURE__ */ new Set();
+  const broadcast = (e) => {
+    const data2 = `data: ${JSON.stringify(e)}
+
+`;
+    for (const res of clients) res.write(data2);
+  };
+  ws.on(broadcast);
+  setInterval(() => {
+    for (const res of clients) res.write(": ping\n\n");
+    ws.pruneAgents();
+  }, 2e4).unref();
+  const transports = /* @__PURE__ */ new Map();
+  const lastUse = /* @__PURE__ */ new Map();
+  setInterval(() => {
+    for (const [id, at] of lastUse) {
+      if (Date.now() - at < 60 * 6e4) continue;
+      lastUse.delete(id);
+      void transports.get(id)?.close();
+    }
+  }, 5 * 6e4).unref();
+  async function handleMcp(req, res) {
+    const sessionId = req.headers["mcp-session-id"];
+    const body = req.method === "POST" ? await readJson(req) : void 0;
+    let transport = sessionId ? transports.get(sessionId) : void 0;
+    if (req.method === "DELETE" && sessionId) ws.dropAgent(sessionId);
+    if (sessionId && transport) lastUse.set(sessionId, Date.now());
+    if (!transport) {
+      if (req.method !== "POST" || !isInitializeRequest(body)) {
+        return json(res, 400, { jsonrpc: "2.0", error: { code: -32e3, message: "No valid MCP session. Re-initialize." }, id: null });
+      }
+      let sid = "";
+      const t = new StreamableHTTPServerTransport({
+        sessionIdGenerator: () => randomUUID(),
+        onsessioninitialized: (id) => {
+          sid = id;
+          transports.set(id, t);
+        }
+      });
+      t.onclose = () => {
+        if (sid) {
+          transports.delete(sid);
+          lastUse.delete(sid);
+          ws.dropAgent(sid);
+        }
+      };
+      const server2 = createMcpServer(ws, shots, () => sid);
+      await server2.connect(t);
+      transport = t;
+    }
+    await transport.handleRequest(req, res, body);
+  }
+  async function handleApi(req, res, url) {
+    const route = `${req.method} ${url.pathname}`;
+    const user = { kind: "user" };
+    switch (route) {
+      case "GET /api/state":
+        return json(res, 200, {
+          appUrl: config.appUrl,
+          root: config.root,
+          projectName: path4.basename(config.root),
+          canvases: ws.canvases(),
+          darkMode: config.darkMode,
+          agents: [...ws.agents.values()],
+          feed: ws.publicFeed().slice(-100),
+          mcpUrl: `${origin}/mcp`,
+          componentsDir: componentsDir(config)
+        });
+      case "GET /api/canvas": {
+        const name = url.searchParams.get("name");
+        return json(res, 200, { doc: ws.doc(name), history: ws.historyState(name) });
+      }
+      case "GET /api/thumb": {
+        const name = url.searchParams.get("component") ?? "";
+        const preset = url.searchParams.get("preset") ?? void 0;
+        const png = await thumbs.get(name, preset);
+        res.writeHead(200, { "content-type": "image/png", "cache-control": "private, max-age=30" });
+        return res.end(png);
+      }
+      // ---------- git ----------
+      case "GET /api/git/status":
+        return json(res, 200, { ...await ws.git.status(), linked: ws.designFiles() });
+      case "GET /api/git/branches":
+        return json(res, 200, await ws.git.branches());
+      case "GET /api/git/log": {
+        const canvas = url.searchParams.get("canvas");
+        return json(res, 200, { commits: await ws.git.log(canvas ? [ws.relFile(canvas), ws.comments.file(canvas)] : [config.canvasDir]) });
+      }
+      case "POST /api/git/fetch":
+        await ws.git.fetch();
+        return json(res, 200, { ...await ws.git.status(), linked: ws.designFiles() });
+      case "POST /api/git/commit": {
+        const { message, scope } = await readJson(req);
+        const status = await ws.git.status();
+        const linked = new Set(ws.designFiles());
+        const files = status.files.map((f) => f.path).filter((f) => scope === "all" || f.startsWith(`${config.canvasDir}/`) || linked.has(f));
+        const hash = await ws.git.commit(message, files);
+        ws.emit({ type: "git" });
+        return json(res, 200, { hash });
+      }
+      case "POST /api/git/push":
+        await ws.git.push();
+        ws.emit({ type: "git" });
+        return json(res, 200, { ok: true });
+      case "POST /api/git/pull":
+        await ws.git.pull();
+        ws.emit({ type: "git" });
+        return json(res, 200, { ok: true });
+      case "POST /api/git/switch": {
+        const { branch, create } = await readJson(req);
+        await ws.git.switch(branch, create);
+        ws.emit({ type: "git" });
+        return json(res, 200, { ok: true });
+      }
+      // ---------- review & pull requests ----------
+      case "GET /api/git/changes":
+        return json(res, 200, { pages: await reviewAll(ws) });
+      case "GET /api/git/preview": {
+        const canvas = url.searchParams.get("canvas") ?? "";
+        const frame = url.searchParams.get("frame") ?? "";
+        const side = url.searchParams.get("side") === "before" ? "before" : "after";
+        const st = await ws.git.status();
+        const img = await renderFrame(ws, shots, canvas, frame, side, st.unborn ? "__none__" : "HEAD");
+        if (!img) return json(res, 404, { error: "No such frame in that version." });
+        res.writeHead(200, { "content-type": "image/jpeg", "cache-control": "no-store" });
+        return res.end(img);
+      }
+      case "GET /api/git/diff": {
+        const canvas = url.searchParams.get("canvas") ?? "";
+        const page = await reviewPage(ws, canvas, "HEAD", 0);
+        return json(res, 200, { diff: page ? await ws.git.diff(page.files) : "" });
+      }
+      case "GET /api/git/pr": {
+        const st = await ws.git.status();
+        if (!st.remote || !st.branch) return json(res, 200, { pr: null, github: false });
+        const key = `${st.branch}`;
+        if (url.searchParams.get("fresh") || !prCache || prCache.key !== key || Date.now() - prCache.at > 2e4) {
+          prCache = { key, at: Date.now(), pr: await ws.git.pullRequest().catch(() => null) };
+        }
+        return json(res, 200, { pr: prCache.pr, github: /github\.com/.test(st.remote) });
+      }
+      case "POST /api/git/pr": {
+        const { title, body, screenshots, draft } = await readJson(req);
+        if (!title?.trim()) throw new EditError("Give the pull request a title.");
+        const st = await ws.git.status();
+        if (!st.remote) throw new EditError("This project has no GitHub remote yet. Publish it to GitHub first.");
+        const base = st.defaultBranch ?? "main";
+        if (!st.branch || st.branch === base) throw new EditError(`You're on ${base}. Start a branch for your changes first.`);
+        await ws.git.push();
+        if (!/github\.com/.test(st.remote)) throw new EditError(`Pushed ${st.branch}. Opening pull requests from Truecanvas needs a GitHub remote (origin is ${st.remote}); open it on your git host.`);
+        const fork = await ws.git.mergeBase(base);
+        const pages = [];
+        if (fork) {
+          const since = await ws.git.commitAt(fork);
+          for (const canvas of ws.canvases()) {
+            const page = await reviewPage(ws, canvas, fork, since).catch(() => null);
+            if (page) pages.push(page);
+          }
+        }
+        const images = [];
+        if (screenshots && fork && pages.length) {
+          const repo = await ws.git.githubRepo();
+          const files = [];
+          const targets = pages.flatMap((p) => p.frames.filter((f) => f.status !== "removed").map((f) => ({ canvas: p.canvas, frame: f.name, added: f.status === "added" }))).slice(0, 6);
+          const stamp = Date.now().toString(36);
+          const slug = (v) => v.replace(/[^\w.-]+/g, "-");
+          for (const t of targets) {
+            const img = { canvas: t.canvas, frame: t.frame, before: null, after: null };
+            for (const side of ["before", "after"]) {
+              if (side === "before" && t.added) continue;
+              const data2 = await renderFrame(ws, shots, t.canvas, t.frame, side, fork).catch(() => null);
+              if (!data2) continue;
+              const file = `${slug(st.branch)}/${stamp}/${slug(t.canvas)}-${slug(t.frame)}-${side}.jpg`;
+              files.push({ path: file, data: data2 });
+              if (repo) img[side] = `https://github.com/${repo}/blob/truecanvas-previews/${file.split("/").map(encodeURIComponent).join("/")}?raw=true`;
+            }
+            images.push(img);
+          }
+          if (files.length && repo) await ws.git.commitToSideBranch("truecanvas-previews", files, `Previews for ${st.branch}`);
+        }
+        const fullBody = [body?.trim(), prDesignSection(pages, images)].filter(Boolean).join("\n\n");
+        let prUrl;
+        try {
+          prUrl = await ws.git.createPullRequest({ title: title.trim(), body: fullBody, base, draft });
+        } catch (err) {
+          const existing = /https:\/\/github\.com\/\S+\/pull\/\d+/.exec(err.message);
+          if (!existing) throw err;
+          prUrl = existing[0];
+        }
+        prCache = null;
+        ws.emit({ type: "git" });
+        return json(res, 200, { url: prUrl });
+      }
+      case "POST /api/git/publish": {
+        const { name, private: isPrivate } = await readJson(req);
+        const remote = await ws.git.publish(name, isPrivate !== false);
+        ws.emit({ type: "git" });
+        return json(res, 200, { remote });
+      }
+      case "POST /api/compare": {
+        const { canvas, ref } = await readJson(req);
+        const before = await ws.git.show(ref, ws.relFile(canvas));
+        if (before === null) return json(res, 400, { error: `This page doesn't exist on ${ref}.` });
+        const files = {};
+        const touched = /* @__PURE__ */ new Set();
+        for (const f of parseCanvas(canvas, ws.relFile(canvas), before).frames) {
+          if (!f.page) continue;
+          for (const file of [f.page, ...layoutFiles(config, f.page)]) {
+            const old = await ws.git.show(ref, file);
+            if (old === null) continue;
+            const now = fs4.existsSync(path4.join(config.root, file)) ? fs4.readFileSync(path4.join(config.root, file), "utf8") : null;
+            if (old !== now) {
+              files[file] = old;
+              touched.add(f.frameName);
+            }
+          }
+        }
+        const name = writeCompare(config, canvas, before, files);
+        const changes = frameChanges(before, ws.read(canvas));
+        for (const frame of touched) if (changes[frame] === "same") changes[frame] = "changed";
+        return json(res, 200, { name, doc: parseCanvas(name, ws.relFile(canvas), before), changes });
+      }
+      case "POST /api/compare/clear": {
+        const { canvas } = await readJson(req);
+        clearCompare(config, canvas);
+        return json(res, 200, { ok: true });
+      }
+      // ---------- comments ----------
+      case "GET /api/comments":
+        return json(res, 200, { threads: ws.comments.list(url.searchParams.get("canvas") ?? "") });
+      case "POST /api/comments": {
+        const b = await readJson(req);
+        if (!b.text?.trim()) return json(res, 400, { error: "Write a comment." });
+        const thread = ws.comments.add(b.canvas, { ...b, author: await ws.userAuthor() });
+        ws.commentsChanged(b.canvas);
+        return json(res, 200, { thread });
+      }
+      case "POST /api/comments/reply": {
+        const b = await readJson(req);
+        if (!b.text?.trim()) return json(res, 400, { error: "Write a reply." });
+        const thread = ws.comments.reply(b.canvas, b.id, b.text, await ws.userAuthor());
+        ws.commentsChanged(b.canvas);
+        return json(res, 200, { thread });
+      }
+      case "POST /api/comments/resolve": {
+        const b = await readJson(req);
+        const thread = ws.comments.resolve(b.canvas, b.id, b.resolved, await ws.userAuthor());
+        ws.commentsChanged(b.canvas);
+        return json(res, 200, { thread });
+      }
+      case "POST /api/comments/delete": {
+        const b = await readJson(req);
+        ws.comments.remove(b.canvas, b.id);
+        ws.commentsChanged(b.canvas);
+        return json(res, 200, { ok: true });
+      }
+      case "GET /api/routes":
+        return json(res, 200, { routes: listRoutes(config) });
+      case "GET /api/tokens":
+        return json(res, 200, readTokenData(config.root));
+      case "GET /api/components":
+        return json(res, 200, { components: await ws.catalog.load() });
+      case "GET /api/events": {
+        res.writeHead(200, { "content-type": "text/event-stream", "cache-control": "no-cache", connection: "keep-alive" });
+        res.write(": connected\n\n");
+        clients.add(res);
+        req.on("close", () => clients.delete(res));
+        return;
+      }
+      case "POST /api/command": {
+        const cmd = await readJson(req);
+        const out = await ws.run(cmd, user);
+        return json(res, 200, { doc: out.doc, ids: out.ids, label: out.label });
+      }
+      case "POST /api/undo":
+      case "POST /api/redo": {
+        const { canvas } = await readJson(req);
+        const out = route.endsWith("undo") ? await ws.undo(canvas, user) : await ws.redo(canvas, user);
+        return json(res, 200, out);
+      }
+      case "POST /api/selection": {
+        const sel = await readJson(req);
+        ws.selection = { canvas: sel.canvas, ids: sel.ids ?? [] };
+        return json(res, 200, { ok: true });
+      }
+      case "GET /api/canvases":
+        return json(res, 200, { canvases: ws.canvasInfos() });
+      case "POST /api/canvases": {
+        const { name } = await readJson(req);
+        ws.createCanvas(name, user);
+        return json(res, 200, { canvases: ws.canvases() });
+      }
+      case "POST /api/canvases/rename": {
+        const { from, to } = await readJson(req);
+        return json(res, 200, { name: ws.renameCanvas(from, to) });
+      }
+      case "POST /api/canvases/duplicate": {
+        const { name } = await readJson(req);
+        return json(res, 200, { name: ws.duplicateCanvas(name) });
+      }
+      case "POST /api/canvases/delete": {
+        const { name } = await readJson(req);
+        ws.deleteCanvas(name);
+        return json(res, 200, { ok: true });
+      }
+      case "POST /api/canvases/restore": {
+        const { name } = await readJson(req);
+        return json(res, 200, { name: ws.restoreCanvas(name) });
+      }
+      case "POST /api/open": {
+        const { canvas, id } = await readJson(req);
+        const hit = id ? ws.nodeSource(canvas, id) : null;
+        const target = `${hit?.abs ?? ws.file(canvas)}:${hit?.node.line ?? 1}:${(hit?.node.col ?? 0) + 1}`;
+        launchEditor(target, config.editor);
+        return json(res, 200, { ok: true });
+      }
+      case "POST /api/open-file": {
+        const { file } = await readJson(req);
+        const abs = path4.resolve(config.root, file);
+        const rel = path4.relative(config.root, abs);
+        if (rel.startsWith("..") || path4.isAbsolute(rel)) return json(res, 400, { error: "Outside project." });
+        launchEditor(abs, config.editor);
+        return json(res, 200, { ok: true });
+      }
+      case "POST /api/source": {
+        const { canvas, id } = await readJson(req);
+        const hit = ws.nodeSource(canvas, id);
+        if (!hit) return json(res, 404, { error: "Not found" });
+        return json(res, 200, { code: dedent(hit.source.slice(hit.node.start, hit.node.end), hit.node.col), file: hit.rel, line: hit.node.line });
+      }
+    }
+    return json(res, 404, { error: `No route ${route}` });
+  }
+  function serveStatic(res, pathname) {
+    let file = path4.join(editorDir, pathname === "/" ? "index.html" : pathname);
+    if (!file.startsWith(editorDir) || !fs4.existsSync(file) || fs4.statSync(file).isDirectory()) file = path4.join(editorDir, "index.html");
+    if (!fs4.existsSync(file)) {
+      res.writeHead(500, { "content-type": "text/plain" });
+      return res.end("Editor bundle missing. Run `pnpm build` in packages/truecanvas.");
+    }
+    const ext = path4.extname(file);
+    const immutable = pathname.startsWith("/assets/");
+    res.writeHead(200, { "content-type": MIME[ext] ?? "application/octet-stream", "cache-control": immutable ? "public, max-age=31536000, immutable" : "no-cache" });
+    fs4.createReadStream(file).pipe(res);
+  }
+  const server = http.createServer(async (req, res) => {
+    try {
+      if (!allowedHosts.has(req.headers.host ?? "")) return json(res, 403, { error: "Forbidden host" });
+      const reqOrigin = req.headers.origin;
+      if (reqOrigin && !allowedOrigins.has(reqOrigin)) return json(res, 403, { error: "Forbidden origin" });
+      const url = new URL(req.url ?? "/", origin);
+      if (url.pathname === "/mcp") return await handleMcp(req, res);
+      if (url.pathname.startsWith("/api/")) return await handleApi(req, res, url);
+      if (req.method === "GET") return serveStatic(res, url.pathname);
+      json(res, 405, { error: "Method not allowed" });
+    } catch (err) {
+      const status = err instanceof EditError ? 400 : 500;
+      if (status === 500) console.error(err);
+      if (!res.headersSent) json(res, status, { error: err.message });
+      else res.end();
+    }
+  });
+  const canvasDir = path4.join(config.root, config.canvasDir);
+  fs4.mkdirSync(canvasDir, { recursive: true });
+  const pending = /* @__PURE__ */ new Map();
+  fs4.watch(canvasDir, (_event, filename) => {
+    if (!filename) return;
+    if (filename.endsWith(".comments.json")) {
+      ws.commentsChanged(filename.slice(0, -".comments.json".length));
+      return;
+    }
+    clearTimeout(pending.get(filename));
+    pending.set(
+      filename,
+      setTimeout(() => {
+        try {
+          ws.externalChange(filename);
+        } catch (err) {
+          console.error(err);
+        }
+      }, 60)
+    );
+  });
+  const appDirAbs = path4.join(config.root, config.appDir);
+  if (fs4.existsSync(appDirAbs)) {
+    const appPending = /* @__PURE__ */ new Map();
+    fs4.watch(appDirAbs, { recursive: true }, (_event, filename) => {
+      if (!filename || !/(^|[\\/])(page|layout)\.[jt]sx$/.test(filename) || /^truecanvas[\\/]/.test(filename)) return;
+      const rel = path4.join(config.appDir, filename).split(path4.sep).join("/");
+      clearTimeout(appPending.get(rel));
+      appPending.set(
+        rel,
+        setTimeout(() => {
+          try {
+            ws.linkedFileChanged(rel);
+          } catch (err) {
+            console.error(err);
+          }
+        }, 60)
+      );
+    });
+  }
+  let catalogTimer;
+  for (const dir of componentRoots(config.components)) {
+    const abs = path4.join(config.root, dir);
+    if (!fs4.existsSync(abs)) continue;
+    fs4.watch(abs, { recursive: true }, () => {
+      clearTimeout(catalogTimer);
+      catalogTimer = setTimeout(() => {
+        ws.catalog.invalidate();
+        broadcast({ type: "catalog" });
+        void syncRegistry();
+      }, 250);
+    });
+  }
+  await new Promise((resolve, reject) => {
+    server.once("error", reject);
+    server.listen(config.port, "127.0.0.1", resolve);
+  });
+  const shutdown = async () => {
+    await shots.close();
+    for (const t of transports.values()) await t.close().catch(() => {
+    });
+    server.close();
+  };
+  return { server, origin, shutdown };
+}
+function componentRoots(globs) {
+  return [...new Set(globs.map((g) => g.split("/").filter((p) => !/[*?{[]/.test(p)).join("/")).filter(Boolean))];
+}
+function json(res, status, body) {
+  res.writeHead(status, { "content-type": "application/json" });
+  res.end(JSON.stringify(body));
+}
+async function readJson(req) {
+  const chunks = [];
+  let size = 0;
+  for await (const chunk of req) {
+    size += chunk.length;
+    if (size > 8 * 1024 * 1024) throw new EditError("Request too large.");
+    chunks.push(chunk);
+  }
+  const raw = Buffer.concat(chunks).toString("utf8");
+  return raw ? JSON.parse(raw) : {};
+}
+function dedent(code, col) {
+  const pad = " ".repeat(col);
+  return code.split("\n").map((l, i) => i > 0 && l.startsWith(pad) ? l.slice(col) : l).join("\n");
+}
+
+// src/server/stdio.ts
+import { Server } from "@modelcontextprotocol/sdk/server/index.js";
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+import { Client } from "@modelcontextprotocol/sdk/client/index.js";
+import { StreamableHTTPClientTransport } from "@modelcontextprotocol/sdk/client/streamableHttp.js";
+import { CallToolRequestSchema, ListToolsRequestSchema } from "@modelcontextprotocol/sdk/types.js";
+async function runStdioBridge(mcpUrl) {
+  let ready;
+  let failed;
+  const upstream = new Promise((res, rej) => {
+    ready = res;
+    failed = rej;
+  });
+  const server = new Server({ name: "truecanvas", version: "0.1.0" }, { capabilities: { tools: {} }, instructions: INSTRUCTIONS });
+  server.oninitialized = async () => {
+    try {
+      const info = server.getClientVersion();
+      const client = new Client({ name: info?.name ?? "stdio-agent", version: info?.version ?? "0.0.0" });
+      await client.connect(new StreamableHTTPClientTransport(new URL(mcpUrl)));
+      ready(client);
+    } catch (err) {
+      failed(err);
+    }
+  };
+  server.setRequestHandler(ListToolsRequestSchema, async () => (await upstream).listTools());
+  server.setRequestHandler(CallToolRequestSchema, async (req) => (await upstream).callTool(req.params));
+  await server.connect(new StdioServerTransport());
+}
+
+// src/core/init.ts
+import fs5 from "fs";
+import path5 from "path";
+var CONFIG_FILES = ["next.config.ts", "next.config.mjs", "next.config.js", "next.config.mts"];
+function nextConfigStatus(root) {
+  for (const name of CONFIG_FILES) {
+    const file = path5.join(root, name);
+    if (fs5.existsSync(file)) return { file, wrapped: fs5.readFileSync(file, "utf8").includes("withTruecanvas") };
+  }
+  return { file: null, wrapped: false };
+}
+function initProject(config) {
+  const { root } = config;
+  const report = { done: [], todo: [] };
+  const status = nextConfigStatus(root);
+  if (!status.file) {
+    const file = path5.join(root, "next.config.ts");
+    fs5.writeFileSync(file, `import type { NextConfig } from "next";
+import { withTruecanvas } from "truecanvas/next";
+
+const nextConfig: NextConfig = {};
+
+export default withTruecanvas(nextConfig);
+`);
+    report.done.push("Created next.config.ts with withTruecanvas()");
+  } else if (status.wrapped) {
+    report.done.push(`${path5.basename(status.file)} already uses withTruecanvas()`);
+  } else {
+    const src = fs5.readFileSync(status.file, "utf8");
+    const esm = /export\s+default\s+/.test(src);
+    const cjs = /module\.exports\s*=\s*/.test(src);
+    let next = null;
+    if (esm) {
+      next = src.replace(/export\s+default\s+([\s\S]+?);?\s*$/, (_m, expr) => `export default withTruecanvas(${expr.trim().replace(/;$/, "")});
+`);
+      next = addImport(next, `import { withTruecanvas } from "truecanvas/next";`);
+    } else if (cjs) {
+      next = src.replace(/module\.exports\s*=\s*([\s\S]+?);?\s*$/, (_m, expr) => `module.exports = withTruecanvas(${expr.trim().replace(/;$/, "")});
+`);
+      next = `const { withTruecanvas } = require("truecanvas/next");
+${next}`;
+    }
+    if (next && next !== src && next.includes("withTruecanvas(")) {
+      fs5.writeFileSync(status.file, next);
+      report.done.push(`Wrapped ${path5.basename(status.file)} with withTruecanvas()`);
+    } else {
+      report.todo.push(`Wrap your ${path5.basename(status.file)} export with withTruecanvas() from "truecanvas/next"`);
+    }
+  }
+  const pkgFile = path5.join(root, "package.json");
+  try {
+    const raw = fs5.readFileSync(pkgFile, "utf8");
+    const pkg = JSON.parse(raw);
+    pkg.scripts ??= {};
+    if (!Object.values(pkg.scripts).some((v) => typeof v === "string" && v.includes("truecanvas"))) {
+      pkg.scripts.canvas = "truecanvas dev";
+      const indent = /\n(\s+)"/.exec(raw)?.[1] ?? "  ";
+      fs5.writeFileSync(pkgFile, `${JSON.stringify(pkg, null, indent)}
+`);
+      report.done.push(`Added the "canvas" script (npm run canvas)`);
+    }
+    const deps = { ...pkg.dependencies, ...pkg.devDependencies };
+    if (!("tailwindcss" in deps)) report.todo.push("Tailwind CSS isn't installed: layout and style controls write Tailwind classes");
+    if (!("next" in deps)) report.todo.push("Next.js isn't in package.json: Truecanvas currently needs a Next.js (App Router) app");
+  } catch {
+    report.todo.push("Couldn't read package.json");
+  }
+  const ignoreFile = path5.join(root, ".gitignore");
+  const entry = `/${config.appDir}/truecanvas/`;
+  const ignore = fs5.existsSync(ignoreFile) ? fs5.readFileSync(ignoreFile, "utf8") : "";
+  if (!ignore.split("\n").some((l) => l.trim() === entry || l.trim() === entry.slice(1))) {
+    fs5.writeFileSync(ignoreFile, `${ignore}${ignore && !ignore.endsWith("\n") ? "\n" : ""}
+# Truecanvas (generated dev-only route)
+${entry}
+`);
+    report.done.push(`Ignored ${entry} in .gitignore`);
+  }
+  for (const name of ["tailwind.config.ts", "tailwind.config.js", "tailwind.config.mjs", "tailwind.config.cjs"]) {
+    const file = path5.join(root, name);
+    if (!fs5.existsSync(file)) continue;
+    const src = fs5.readFileSync(file, "utf8");
+    const glob = `./${config.canvasDir}/**/*.{ts,tsx}`;
+    if (src.includes(config.canvasDir)) break;
+    const m = /content\s*:\s*\[([ \t]*\n?)([ \t]*)/.exec(src);
+    if (m) {
+      const indent = m[2] || "    ";
+      const at = m.index + m[0].length;
+      const entry2 = m[1].includes("\n") ? `${JSON.stringify(glob)},
+${indent}` : `${JSON.stringify(glob)}, `;
+      fs5.writeFileSync(file, src.slice(0, at) + entry2 + src.slice(at));
+      report.done.push(`Added ${config.canvasDir} to Tailwind's content in ${name}`);
+    } else report.todo.push(`Add "${glob}" to the content list in ${name} so Tailwind styles your canvases`);
+    break;
+  }
+  if (!fs5.existsSync(path5.join(root, config.appDir))) report.todo.push(`No ${config.appDir}/ folder found: Truecanvas needs the Next.js App Router`);
+  return report;
+}
+function addImport(src, line) {
+  const lines = src.split("\n");
+  let at = 0;
+  lines.forEach((l, i) => {
+    if (/^\s*import\s/.test(l) || /^\s*["']use (client|server)["']/.test(l)) at = i + 1;
+  });
+  while (at > 0 && at < lines.length && !/;\s*$|from\s+["'][^"']+["']\s*;?\s*$/.test(lines[at - 1])) at++;
+  lines.splice(at, 0, line);
+  return lines.join("\n");
+}
+
+// src/hub/server.ts
+import http2 from "http";
+import fs9 from "fs";
+import os5 from "os";
+import path9 from "path";
+import { randomUUID as randomUUID2 } from "crypto";
+import { fileURLToPath as fileURLToPath2 } from "url";
+import { Server as Server2 } from "@modelcontextprotocol/sdk/server/index.js";
+import { StreamableHTTPServerTransport as StreamableHTTPServerTransport2 } from "@modelcontextprotocol/sdk/server/streamableHttp.js";
+import { Client as Client2 } from "@modelcontextprotocol/sdk/client/index.js";
+import { StreamableHTTPClientTransport as StreamableHTTPClientTransport2 } from "@modelcontextprotocol/sdk/client/streamableHttp.js";
+import { CallToolRequestSchema as CallToolRequestSchema2, ListToolsRequestSchema as ListToolsRequestSchema2, isInitializeRequest as isInitializeRequest2 } from "@modelcontextprotocol/sdk/types.js";
+
+// src/hub/projects.ts
+import fs6 from "fs";
+import os2 from "os";
+import path6 from "path";
+var CONFIG_DIR = path6.join(process.env.XDG_CONFIG_HOME ?? path6.join(os2.homedir(), ".config"), "truecanvas");
+var FILE = path6.join(CONFIG_DIR, "projects.json");
+var ProjectStore = class {
+  list = [];
+  constructor() {
+    try {
+      this.list = JSON.parse(fs6.readFileSync(FILE, "utf8"));
+    } catch {
+      this.list = [];
+    }
+  }
+  save() {
+    fs6.mkdirSync(CONFIG_DIR, { recursive: true });
+    fs6.writeFileSync(FILE, JSON.stringify(this.list, null, 2));
+  }
+  all() {
+    return [...this.list].sort((a, b) => b.lastOpened - a.lastOpened).map((p) => ({ ...p, ...inspect(p.path) }));
+  }
+  touch(dir) {
+    const abs = path6.resolve(dir);
+    const existing = this.list.find((p) => p.path === abs);
+    if (existing) existing.lastOpened = Date.now();
+    else this.list.push({ path: abs, name: projectName(abs), lastOpened: Date.now() });
+    this.save();
+  }
+  forget(dir) {
+    this.list = this.list.filter((p) => p.path !== path6.resolve(dir));
+    this.save();
+  }
+};
+function readPkg(dir) {
+  try {
+    return JSON.parse(fs6.readFileSync(path6.join(dir, "package.json"), "utf8"));
+  } catch {
+    return null;
+  }
+}
+function projectName(dir) {
+  const pkg = readPkg(dir);
+  const name = typeof pkg?.name === "string" ? pkg.name : "";
+  return name && !name.startsWith("@") ? name : path6.basename(dir);
+}
+function inspect(dir) {
+  const pkg = readPkg(dir);
+  if (!pkg) return { next: false, ready: false, canvases: 0, exists: fs6.existsSync(dir) };
+  const deps = { ...pkg.dependencies, ...pkg.devDependencies };
+  let canvases = 0;
+  for (const d of ["canvas", "src/canvas"]) {
+    try {
+      canvases += fs6.readdirSync(path6.join(dir, d)).filter((f) => f.endsWith(".canvas.tsx")).length;
+    } catch {
+    }
+  }
+  return { next: "next" in deps, ready: "truecanvas" in deps, canvases, exists: true };
+}
+function discover() {
+  const home = os2.homedir();
+  const roots = ["Github", "GitHub", "github", "Projects", "projects", "code", "Code", "dev", "src", "Developer", "Documents", "work"].map((d) => path6.join(home, d)).filter((d) => fs6.existsSync(d));
+  const found = [];
+  let visited = 0;
+  const walk = (dir, depth) => {
+    if (depth > 3 || visited > 3e3 || found.length > 60) return;
+    visited++;
+    let entries;
+    try {
+      entries = fs6.readdirSync(dir, { withFileTypes: true });
+    } catch {
+      return;
+    }
+    if (entries.some((e) => e.name === "package.json")) {
+      const info = inspect(dir);
+      if (info.next) found.push({ path: dir, name: projectName(dir), ready: info.ready });
+    }
+    for (const e of entries) {
+      if (!e.isDirectory() || e.name.startsWith(".") || e.name === "node_modules" || e.name === "dist" || e.name === "build") continue;
+      walk(path6.join(dir, e.name), depth + 1);
+    }
+  };
+  for (const r of roots) walk(r, 0);
+  return found;
+}
+function listDirs(dir) {
+  const abs = path6.resolve(dir.replace(/^~(?=$|\/)/, os2.homedir()));
+  const dirs = fs6.readdirSync(abs, { withFileTypes: true }).filter((e) => e.isDirectory() && !e.name.startsWith(".") && e.name !== "node_modules").map((e) => ({ name: e.name, next: inspect(path6.join(abs, e.name)).next })).sort((a, b) => Number(b.next) - Number(a.next) || a.name.localeCompare(b.name));
+  return { path: abs, dirs };
+}
+
+// src/hub/runner.ts
+import { execFile, spawn as spawn2 } from "child_process";
+import fs8 from "fs";
+import net from "net";
+import os4 from "os";
+import path8 from "path";
+
+// src/cli/setup.ts
+import { spawn } from "child_process";
+import { createHash as createHash2 } from "crypto";
+import fs7 from "fs";
+import os3 from "os";
+import path7 from "path";
+function detectPm(dir) {
+  for (let d = dir; ; d = path7.dirname(d)) {
+    if (fs7.existsSync(path7.join(d, "pnpm-lock.yaml")) || fs7.existsSync(path7.join(d, "pnpm-workspace.yaml"))) return "pnpm";
+    if (fs7.existsSync(path7.join(d, "yarn.lock"))) return "yarn";
+    if (fs7.existsSync(path7.join(d, "bun.lock")) || fs7.existsSync(path7.join(d, "bun.lockb"))) return "bun";
+    if (fs7.existsSync(path7.join(d, "package-lock.json"))) return "npm";
+    if (path7.dirname(d) === d || fs7.existsSync(path7.join(d, ".git"))) break;
+  }
+  const agent = process.env.npm_config_user_agent ?? "";
+  if (agent.startsWith("pnpm")) return "pnpm";
+  if (agent.startsWith("yarn")) return "yarn";
+  if (agent.startsWith("bun")) return "bun";
+  return "npm";
+}
+function addDevArgs(pm, spec) {
+  return pm === "npm" ? ["install", "-D", spec] : pm === "bun" ? ["add", "-d", spec] : ["add", "-D", spec];
+}
+function runScript(pm, script) {
+  return pm === "npm" ? `npm run ${script}` : `${pm} ${script}`;
+}
+var execInherit = (cmd, args, cwd) => new Promise((resolve, reject) => {
+  const p = spawn(cmd, args, { cwd, stdio: "inherit", env: { ...process.env, PATH: `${path7.dirname(process.execPath)}${path7.delimiter}${process.env.PATH ?? ""}` } });
+  p.on("error", reject);
+  p.on("exit", (code) => code === 0 ? resolve() : reject(new Error(`${cmd} ${args.join(" ")} exited with ${code}`)));
+});
+function packageDir(cliFile) {
+  return path7.resolve(path7.dirname(cliFile), "..");
+}
+function packageVersion(pkgDir) {
+  try {
+    return JSON.parse(fs7.readFileSync(path7.join(pkgDir, "package.json"), "utf8")).version;
+  } catch {
+    return "0.0.0";
+  }
+}
+function isSourceCheckout(pkgDir) {
+  return !pkgDir.split(path7.sep).includes("node_modules") && fs7.existsSync(path7.join(pkgDir, "src", "cli"));
+}
+async function packageSpec(pkgDir, exec) {
+  if (process.env.TRUECANVAS_PACKAGE) return process.env.TRUECANVAS_PACKAGE;
+  const version = packageVersion(pkgDir);
+  if (!isSourceCheckout(pkgDir)) return `truecanvas@${version}`;
+  const cacheDir = path7.join(os3.homedir(), ".cache", "truecanvas");
+  fs7.mkdirSync(cacheDir, { recursive: true });
+  const file = path7.join(cacheDir, `truecanvas-${version}.tgz`);
+  await exec("npm", ["pack", "--silent", "--pack-destination", cacheDir], pkgDir);
+  const hash = createHash2("sha256").update(fs7.readFileSync(file)).digest("hex").slice(0, 10);
+  const named = path7.join(cacheDir, `truecanvas-${version}-${hash}.tgz`);
+  fs7.renameSync(file, named);
+  return named;
+}
+function installedIn(root) {
+  let declared = false;
+  try {
+    const pkg = JSON.parse(fs7.readFileSync(path7.join(root, "package.json"), "utf8"));
+    declared = "truecanvas" in { ...pkg.dependencies, ...pkg.devDependencies };
+  } catch {
+  }
+  const file = path7.join(root, "node_modules", "truecanvas", "package.json");
+  const installed = fs7.existsSync(file);
+  return { declared, installed, version: installed ? packageVersion(path7.dirname(file)) : null };
+}
+function readPackage(root) {
+  try {
+    return JSON.parse(fs7.readFileSync(path7.join(root, "package.json"), "utf8"));
+  } catch {
+    return null;
+  }
+}
+function depVersion(root, name) {
+  const file = path7.join(root, "node_modules", name, "package.json");
+  if (fs7.existsSync(file)) return packageVersion(path7.dirname(file));
+  const pkg = readPackage(root);
+  return pkg ? { ...pkg.dependencies, ...pkg.devDependencies }[name] ?? null : null;
+}
+function mergeJson(file, update) {
+  let data2 = {};
+  if (fs7.existsSync(file)) {
+    try {
+      data2 = JSON.parse(fs7.readFileSync(file, "utf8"));
+    } catch {
+      throw new Error(`${file} isn't valid JSON; fix it or remove it, then run connect again.`);
+    }
+  }
+  const before = JSON.stringify(data2);
+  update(data2);
+  if (JSON.stringify(data2) === before) return "unchanged";
+  fs7.mkdirSync(path7.dirname(file), { recursive: true });
+  fs7.writeFileSync(file, `${JSON.stringify(data2, null, 2)}
+`);
+  return "written";
+}
+function connectAgents(root, port, opts = {}) {
+  const url = `http://localhost:${port}/mcp`;
+  const out = { written: [], unchanged: [] };
+  const add = (rel, update) => out[mergeJson(path7.join(root, rel), update)].push(rel);
+  const servers = (d, key) => d[key] ??= {};
+  add(".mcp.json", (d) => void (servers(d, "mcpServers").truecanvas = { type: "http", url }));
+  if (opts.cursor || fs7.existsSync(path7.join(root, ".cursor"))) add(".cursor/mcp.json", (d) => void (servers(d, "mcpServers").truecanvas = { url }));
+  if (opts.vscode || fs7.existsSync(path7.join(root, ".vscode"))) add(".vscode/mcp.json", (d) => void (servers(d, "servers").truecanvas = { type: "http", url }));
+  return out;
+}
+function hasAgentConfig(root, port) {
+  try {
+    const d = JSON.parse(fs7.readFileSync(path7.join(root, ".mcp.json"), "utf8"));
+    const url = d?.mcpServers?.truecanvas?.url;
+    return typeof url === "string" && (port === void 0 || url.includes(`:${port}/`));
+  } catch {
+    return false;
+  }
+}
+
+// src/hub/runner.ts
+function portFree(port) {
+  return new Promise((resolve) => {
+    const srv = net.createServer();
+    srv.once("error", () => resolve(false));
+    srv.listen(port, "127.0.0.1", () => srv.close(() => resolve(true)));
+  });
+}
+async function freePort(from, taken) {
+  for (let p = from; p < from + 200; p++) if (!taken.has(p) && await portFree(p)) return p;
+  throw new Error("No free port");
+}
+var Runner = class {
+  constructor(cli, onChange) {
+    this.cli = cli;
+    this.onChange = onChange;
+  }
+  cli;
+  onChange;
+  running = /* @__PURE__ */ new Map();
+  async open(dir) {
+    const existing = this.running.get(dir);
+    if (existing && existing.status !== "failed") return existing;
+    const taken = new Set([...this.running.values()].flatMap((r) => [r.editorPort, r.appPort]));
+    const editorPort = await freePort(4810, taken);
+    taken.add(editorPort);
+    const appPort = await freePort(3010, taken);
+    const proc = spawn2(process.execPath, [this.cli, "dev", "--no-open", "--port", String(editorPort), "--app", `http://localhost:${appPort}`], {
+      cwd: dir,
+      env: { ...process.env, PATH: `${path8.dirname(process.execPath)}:${process.env.PATH ?? ""}`, FORCE_COLOR: "0", TRUECANVAS_HUB: "1" },
+      stdio: ["ignore", "pipe", "pipe"]
+    });
+    const run2 = { path: dir, editorPort, appPort, proc, status: "starting", log: [], startedAt: Date.now() };
+    this.running.set(dir, run2);
+    const capture2 = (chunk) => {
+      for (const line of chunk.toString().split("\n")) if (line.trim()) run2.log.push(line.replace(/\x1b\[[0-9;]*m/g, ""));
+      if (run2.log.length > 200) run2.log.splice(0, run2.log.length - 200);
+    };
+    proc.stdout.on("data", capture2);
+    proc.stderr.on("data", capture2);
+    proc.on("exit", (code) => {
+      if (this.running.get(dir) !== run2) return;
+      if (run2.status === "starting" || code) {
+        run2.status = "failed";
+        run2.error = run2.log.slice(-6).join("\n") || `exited with ${code}`;
+      } else this.running.delete(dir);
+      this.onChange();
+    });
+    this.onChange();
+    const until = Date.now() + 6e4;
+    while (Date.now() < until && run2.status === "starting") {
+      try {
+        const res = await fetch(`http://localhost:${editorPort}/api/state`, { signal: AbortSignal.timeout(1e3) });
+        if (res.ok) {
+          run2.status = "ready";
+          break;
+        }
+      } catch {
+      }
+      await new Promise((r) => setTimeout(r, 400));
+    }
+    if (run2.status === "starting") {
+      run2.status = "failed";
+      run2.error = "Truecanvas didn't start within a minute.";
+    }
+    this.onChange();
+    return run2;
+  }
+  close(dir) {
+    const run2 = this.running.get(dir);
+    if (!run2) return;
+    this.running.delete(dir);
+    run2.proc.kill("SIGTERM");
+    setTimeout(() => run2.proc.exitCode === null && run2.proc.kill("SIGKILL"), 4e3).unref();
+    this.onChange();
+  }
+  closeAll() {
+    for (const dir of [...this.running.keys()]) this.close(dir);
+  }
+  /** Resident memory (MB) of each project's process tree. */
+  memory() {
+    return new Promise((resolve) => {
+      execFile("ps", ["-eo", "pid=,ppid=,rss="], (err, out) => {
+        if (err) return resolve({});
+        const rows = out.trim().split("\n").map((l) => l.trim().split(/\s+/).map(Number));
+        const kids = /* @__PURE__ */ new Map();
+        const rss = /* @__PURE__ */ new Map();
+        for (const [pid, ppid, kb] of rows) {
+          rss.set(pid, kb);
+          kids.set(ppid, [...kids.get(ppid) ?? [], pid]);
+        }
+        const total = (pid) => (rss.get(pid) ?? 0) + (kids.get(pid) ?? []).reduce((s, k) => s + total(k), 0);
+        const outMap = {};
+        for (const [dir, run2] of this.running) if (run2.proc.pid) outMap[dir] = Math.round(total(run2.proc.pid) / 1024);
+        resolve(outMap);
+      });
+    });
+  }
+};
+var jobs = /* @__PURE__ */ new Map();
+var jobSeq = 0;
+function getJob(id) {
+  return jobs.get(id);
+}
+async function install(job, cmd, args, cwd) {
+  try {
+    await run(job, cmd, args, cwd);
+  } catch (err) {
+    const ignoredBuilds = job.log.some((l) => l.includes("ERR_PNPM_IGNORED_BUILDS"));
+    const installed = fs8.existsSync(path8.join(cwd, "node_modules", "truecanvas", "package.json"));
+    if (!(ignoredBuilds && installed)) throw err;
+    job.log.push("(pnpm only complained about other packages' build scripts; Truecanvas is installed, continuing)");
+  }
+}
+function run(job, cmd, args, cwd) {
+  job.log.push(`$ ${cmd} ${args.join(" ")}`);
+  return new Promise((resolve, reject) => {
+    const p = spawn2(cmd, args, { cwd, env: { ...process.env, PATH: `${path8.dirname(process.execPath)}:${process.env.PATH ?? ""}`, CI: "1", FORCE_COLOR: "0" }, stdio: ["ignore", "pipe", "pipe"] });
+    const capture2 = (c2) => {
+      for (const line of c2.toString().split("\n")) if (line.trim()) job.log.push(line.replace(/\x1b\[[0-9;?]*[a-zA-Z]/g, ""));
+      if (job.log.length > 300) job.log.splice(0, job.log.length - 300);
+    };
+    p.stdout.on("data", capture2);
+    p.stderr.on("data", capture2);
+    p.on("error", reject);
+    p.on("exit", (code) => code === 0 ? resolve() : reject(new Error(`${cmd} exited with ${code}`)));
+  });
+}
+function startJob(title, work) {
+  const job = { id: String(++jobSeq), title, status: "running", log: [] };
+  jobs.set(job.id, job);
+  work(job).then((result) => {
+    job.status = "done";
+    if (result) job.result = result;
+  }).catch((err) => {
+    job.status = "failed";
+    job.log.push(`\u2717 ${err.message}`);
+  });
+  return job;
+}
+function packageManager(dir) {
+  if (fs8.existsSync(path8.join(dir, "pnpm-lock.yaml"))) return { cmd: "pnpm", add: ["add", "-D"] };
+  if (fs8.existsSync(path8.join(dir, "yarn.lock"))) return { cmd: "yarn", add: ["add", "-D"] };
+  if (fs8.existsSync(path8.join(dir, "bun.lock")) || fs8.existsSync(path8.join(dir, "bun.lockb"))) return { cmd: "bun", add: ["add", "-d"] };
+  return { cmd: "npm", add: ["install", "-D"] };
+}
+function setupJob(dir, pkgDir, cli) {
+  return startJob(`Set up ${path8.basename(dir)}`, async (job) => {
+    const pm = packageManager(dir);
+    const source = await packageSpec(pkgDir, (cmd, args, cwd) => run(job, cmd, args, cwd));
+    await install(job, pm.cmd, [...pm.add, source], dir);
+    await run(job, process.execPath, [cli, "init"], dir);
+    return dir;
+  });
+}
+function createJob(name, parent, pkgDir, cli) {
+  const safe = name.trim().toLowerCase().replace(/[^a-z0-9-_]+/g, "-").replace(/^-+|-+$/g, "");
+  const parentDir = path8.resolve(parent.replace(/^~(?=$|\/)/, os4.homedir()));
+  const dir = path8.join(parentDir, safe);
+  return startJob(`Create ${safe}`, async (job) => {
+    if (!safe) throw new Error("Pick a project name.");
+    if (fs8.existsSync(dir)) throw new Error(`${dir} already exists.`);
+    fs8.mkdirSync(parentDir, { recursive: true });
+    await run(job, "npx", ["--yes", "create-next-app@latest", safe, "--ts", "--tailwind", "--app", "--eslint", "--no-src-dir", "--import-alias", "@/*", "--use-pnpm", "--turbopack", "--yes"], parentDir);
+    const source = await packageSpec(pkgDir, (cmd, args, cwd) => run(job, cmd, args, cwd));
+    await install(job, "pnpm", ["add", "-D", source], dir);
+    await run(job, process.execPath, [cli, "init"], dir);
+    return dir;
+  });
+}
+function capture(cmd, args, cwd) {
+  return new Promise((resolve) => {
+    execFile(
+      cmd,
+      args,
+      { cwd, timeout: 6e4, maxBuffer: 8 * 1024 * 1024, env: { ...process.env, GH_PROMPT_DISABLED: "1", GIT_TERMINAL_PROMPT: "0" } },
+      (err, stdout, stderr) => resolve({ ok: !err, out: err ? (stderr || err.message).trim() : stdout })
+    );
+  });
+}
+function cloneJob(repo, parent, pkgDir, cli) {
+  const parentDir = path8.resolve(parent.replace(/^~(?=$|\/)/, os4.homedir()));
+  const name = repo.replace(/\.git$/, "").split(/[/:]/).pop() ?? "";
+  const dir = path8.join(parentDir, name);
+  return startJob(`Clone ${name}`, async (job) => {
+    if (!name || !/^[\w.-]+$/.test(name)) throw new Error("Pick a repository (owner/name or a git URL).");
+    if (fs8.existsSync(dir)) throw new Error(`${dir} already exists. Open it with Open folder instead.`);
+    fs8.mkdirSync(parentDir, { recursive: true });
+    const url = /^(https?:|git@|ssh:|file:)/.test(repo);
+    if (url) await run(job, "git", ["clone", repo, dir], parentDir);
+    else await run(job, "gh", ["repo", "clone", repo, dir], parentDir);
+    if (!fs8.existsSync(path8.join(dir, "package.json"))) throw new Error("Cloned, but there's no package.json at the root: Truecanvas needs a Next.js app.");
+    const pm = packageManager(dir);
+    await install(job, pm.cmd, ["install"], dir).catch(async (err) => {
+      if (!fs8.existsSync(path8.join(dir, "node_modules"))) throw err;
+    });
+    const pkg = JSON.parse(fs8.readFileSync(path8.join(dir, "package.json"), "utf8"));
+    if (!("truecanvas" in { ...pkg.dependencies, ...pkg.devDependencies })) {
+      const source = await packageSpec(pkgDir, (cmd, args, cwd) => run(job, cmd, args, cwd));
+      await install(job, pm.cmd, [...pm.add, source], dir);
+      await run(job, process.execPath, [cli, "init"], dir);
+    } else job.log.push("Truecanvas is already part of this project.");
+    return dir;
+  });
+}
+
+// src/hub/server.ts
+var MIME2 = {
+  ".html": "text/html; charset=utf-8",
+  ".js": "text/javascript; charset=utf-8",
+  ".css": "text/css; charset=utf-8",
+  ".svg": "image/svg+xml",
+  ".woff2": "font/woff2",
+  ".png": "image/png"
+};
+var HUB_INSTRUCTIONS = `Truecanvas hub: several projects, each a Next.js app with canvases of real React components.
+Your tools act on the current project (the active tab in the Truecanvas window, unless you pick one with open_project).
+Use list_projects to see them. All other tools are the regular Truecanvas canvas tools for that project.`;
+async function startHub(opts) {
+  const store = new ProjectStore();
+  const editorDir = fileURLToPath2(new URL("./editor/", import.meta.url));
+  const pkgDir = path9.resolve(path9.dirname(opts.cli), "..");
+  const origin = `http://localhost:${opts.port}`;
+  const allowedHosts = /* @__PURE__ */ new Set([`localhost:${opts.port}`, `127.0.0.1:${opts.port}`]);
+  const clients = /* @__PURE__ */ new Set();
+  let active = null;
+  const broadcast = () => {
+    for (const res of clients) res.write(`data: {"type":"state"}
+
+`);
+    for (const fn of toolListeners) fn();
+  };
+  const runner = new Runner(opts.cli, broadcast);
+  setInterval(() => {
+    for (const res of clients) res.write(": ping\n\n");
+  }, 2e4).unref();
+  let focus = null;
+  async function state() {
+    const memory = await runner.memory();
+    return {
+      origin,
+      active,
+      focus,
+      projects: store.all().map((p) => {
+        const r = runner.running.get(p.path);
+        return { ...p, running: r ? { status: r.status, editor: `http://localhost:${r.editorPort}`, app: `http://localhost:${r.appPort}`, error: r.error, memory: memory[p.path] ?? null } : null };
+      })
+    };
+  }
+  const toolListeners = /* @__PURE__ */ new Set();
+  const transports = /* @__PURE__ */ new Map();
+  function createProxy() {
+    const server2 = new Server2({ name: "truecanvas", version: "0.1.0" }, { capabilities: { tools: { listChanged: true } }, instructions: HUB_INSTRUCTIONS });
+    let current = null;
+    const upstreams = /* @__PURE__ */ new Map();
+    const target = () => current ?? active;
+    const upstream = (dir) => {
+      const run2 = runner.running.get(dir);
+      if (!run2 || run2.status !== "ready") return null;
+      let c2 = upstreams.get(dir);
+      if (!c2) {
+        const info = server2.getClientVersion();
+        const client = new Client2({ name: info?.name ?? "agent", version: info?.version ?? "0.0.0" });
+        c2 = client.connect(new StreamableHTTPClientTransport2(new URL(`http://localhost:${run2.editorPort}/mcp`))).then(() => client);
+        c2.catch(() => upstreams.delete(dir));
+        upstreams.set(dir, c2);
+      }
+      return c2;
+    };
+    const notify = () => void server2.sendToolListChanged().catch(() => {
+    });
+    toolListeners.add(notify);
+    server2.onclose = () => toolListeners.delete(notify);
+    const hubTools = [
+      { name: "list_projects", description: "Projects known to the Truecanvas hub, which are open, and which one your tools act on.", inputSchema: { type: "object", properties: {} } },
+      {
+        name: "open_project",
+        description: "Open a project (starts its app if needed) and make it the target of your tools.",
+        inputSchema: { type: "object", properties: { project: { type: "string", description: "Project name or path." } }, required: ["project"] }
+      }
+    ];
+    server2.setRequestHandler(ListToolsRequestSchema2, async () => {
+      const dir = target();
+      const up = dir ? upstream(dir) : null;
+      const projectTools = up ? (await (await up).listTools()).tools : [];
+      return { tools: [...hubTools, ...projectTools] };
+    });
+    server2.setRequestHandler(CallToolRequestSchema2, async (req) => {
+      const text = (t, isError = false) => ({ content: [{ type: "text", text: t }], isError });
+      if (req.params.name === "list_projects") {
+        const s = await state();
+        const lines = s.projects.map((p) => `${p.path === target() ? "\u2192 " : "  "}${p.name} (${p.path})${p.running ? ` [${p.running.status}]` : ""}${p.ready ? "" : " (Truecanvas not set up)"}`);
+        return text(lines.join("\n") || "No projects yet. The user can add some from the Dashboard.");
+      }
+      if (req.params.name === "open_project") {
+        const q = String(req.params.arguments?.project ?? "").toLowerCase();
+        const p = store.all().find((x) => x.name.toLowerCase() === q || x.path.toLowerCase() === q || path9.basename(x.path).toLowerCase() === q);
+        if (!p) return text(`No project "${q}". Use list_projects.`, true);
+        if (!p.ready) return text(`${p.name} isn't set up for Truecanvas yet. Ask the user to click "Set up" on the Dashboard.`, true);
+        store.touch(p.path);
+        const run2 = await runner.open(p.path);
+        if (run2.status !== "ready") return text(`Couldn't start ${p.name}: ${run2.error}`, true);
+        current = p.path;
+        notify();
+        return text(`\u2713 ${p.name} is open. Your tools now act on it.`);
+      }
+      const dir = target();
+      const up = dir ? upstream(dir) : null;
+      if (!up) return text("No project is open. Use list_projects and open_project, or open one in the Truecanvas window.", true);
+      return await (await up).callTool(req.params);
+    });
+    return server2;
+  }
+  async function handleMcp(req, res) {
+    const sessionId = req.headers["mcp-session-id"];
+    const body = req.method === "POST" ? await readJson2(req) : void 0;
+    let transport = sessionId ? transports.get(sessionId) : void 0;
+    if (!transport) {
+      if (req.method !== "POST" || !isInitializeRequest2(body)) return json2(res, 400, { jsonrpc: "2.0", error: { code: -32e3, message: "No valid MCP session." }, id: null });
+      const t = new StreamableHTTPServerTransport2({ sessionIdGenerator: () => randomUUID2(), onsessioninitialized: (id) => void transports.set(id, t) });
+      t.onclose = () => {
+        if (t.sessionId) transports.delete(t.sessionId);
+      };
+      await createProxy().connect(t);
+      transport = t;
+    }
+    await transport.handleRequest(req, res, body);
+  }
+  async function api(req, res, url) {
+    const route = `${req.method} ${url.pathname}`;
+    const body = req.method === "POST" ? await readJson2(req) : {};
+    switch (route) {
+      case "GET /api/hub/state":
+        return json2(res, 200, await state());
+      case "GET /api/hub/discover": {
+        const known = new Set(store.all().map((p) => p.path));
+        return json2(res, 200, { found: discover().filter((f) => !known.has(f.path)) });
+      }
+      case "GET /api/hub/icon": {
+        const icon = findIcon(url.searchParams.get("path") ?? "");
+        if (!icon) return json2(res, 404, { error: "No icon" });
+        res.writeHead(200, { "content-type": ICON_MIME[path9.extname(icon)] ?? "application/octet-stream", "cache-control": "private, max-age=300" });
+        return fs9.createReadStream(icon).pipe(res);
+      }
+      case "GET /api/hub/ls":
+        return json2(res, 200, listDirs(url.searchParams.get("path") || "~"));
+      case "GET /api/hub/events":
+        res.writeHead(200, { "content-type": "text/event-stream", "cache-control": "no-cache", connection: "keep-alive" });
+        res.write(": connected\n\n");
+        clients.add(res);
+        req.on("close", () => clients.delete(res));
+        return;
+      case "POST /api/hub/add": {
+        const dir = path9.resolve(body.path.replace(/^~(?=$|\/)/, process.env.HOME ?? "~"));
+        if (!fs9.existsSync(path9.join(dir, "package.json"))) return json2(res, 400, { error: "No package.json in that folder. Pick the root of a Next.js app." });
+        store.touch(dir);
+        broadcast();
+        return json2(res, 200, { path: dir });
+      }
+      case "POST /api/hub/open": {
+        store.touch(body.path);
+        active = body.path;
+        if (body.focus) focus = { path: body.path, at: Date.now() };
+        const run2 = await runner.open(body.path);
+        broadcast();
+        return json2(res, 200, { status: run2.status, editor: `http://localhost:${run2.editorPort}`, error: run2.error });
+      }
+      case "POST /api/hub/close":
+        runner.close(body.path);
+        if (active === body.path) active = null;
+        broadcast();
+        return json2(res, 200, { ok: true });
+      case "POST /api/hub/active":
+        active = body.path || null;
+        broadcast();
+        return json2(res, 200, { ok: true });
+      case "POST /api/hub/forget":
+        runner.close(body.path);
+        store.forget(body.path);
+        broadcast();
+        return json2(res, 200, { ok: true });
+      case "POST /api/hub/setup":
+        return json2(res, 200, setupJob(body.path, pkgDir, opts.cli));
+      case "POST /api/hub/create":
+        return json2(res, 200, createJob(body.name, body.parent, pkgDir, opts.cli));
+      // ---------- GitHub ----------
+      case "GET /api/hub/github/repos": {
+        const r = await capture("gh", ["repo", "list", "--limit", "100", "--json", "nameWithOwner,description,updatedAt,isPrivate"], os5.homedir());
+        if (!r.ok) return json2(res, 200, { gh: false, error: r.out.split("\n")[0], repos: [] });
+        const repos = JSON.parse(r.out).sort((a, b) => b.updatedAt.localeCompare(a.updatedAt));
+        return json2(res, 200, { gh: true, repos });
+      }
+      case "POST /api/hub/clone":
+        return json2(res, 200, cloneJob(body.repo, body.parent || "~", pkgDir, opts.cli));
+      case "GET /api/hub/prs": {
+        const dir = url.searchParams.get("path") ?? "";
+        const r = await capture("gh", ["pr", "list", "--limit", "30", "--json", "number,title,headRefName,author,updatedAt,isDraft,url"], dir);
+        if (!r.ok) {
+          const msg = /no git remotes|not a git repository|none of the git remotes/i.test(r.out) ? "This project isn't on GitHub yet. Publish it from the Git panel (branch pill) first." : /gh auth login|not logged/i.test(r.out) ? "Sign in to GitHub first: run gh auth login in a terminal." : r.out.split("\n")[0];
+          return json2(res, 200, { error: msg, prs: [] });
+        }
+        return json2(res, 200, { prs: JSON.parse(r.out) });
+      }
+      case "POST /api/hub/pr-checkout": {
+        const r = await capture("gh", ["pr", "checkout", String(Number(body.number))], body.path);
+        if (!r.ok) {
+          const dirty = /local changes|would be overwritten|uncommitted/i.test(r.out);
+          return json2(res, 400, { error: dirty ? "This project has uncommitted changes. Commit them (Git panel) before opening another pull request." : r.out.split("\n").slice(-2).join(" ") });
+        }
+        store.touch(body.path);
+        active = body.path;
+        await runner.open(body.path);
+        broadcast();
+        return json2(res, 200, { ok: true });
+      }
+      case "POST /api/hub/quit":
+        json2(res, 200, { ok: true });
+        runner.closeAll();
+        setTimeout(() => process.exit(0), 800);
+        return;
+    }
+    const job = /^GET \/api\/hub\/jobs\/(\d+)$/.exec(route);
+    if (job) {
+      const j = getJob(job[1]);
+      if (j?.status === "done" && j.result) {
+        store.touch(j.result);
+        broadcast();
+      }
+      return j ? json2(res, 200, j) : json2(res, 404, { error: "No such job" });
+    }
+    return json2(res, 404, { error: `No route ${route}` });
+  }
+  function serveStatic(res, pathname) {
+    let file = path9.join(editorDir, pathname === "/" ? "hub.html" : pathname);
+    if (!file.startsWith(editorDir) || !fs9.existsSync(file) || fs9.statSync(file).isDirectory()) file = path9.join(editorDir, "hub.html");
+    if (!fs9.existsSync(file)) {
+      res.writeHead(500, { "content-type": "text/plain" });
+      return res.end("Hub bundle missing. Run `pnpm build`.");
+    }
+    res.writeHead(200, { "content-type": MIME2[path9.extname(file)] ?? "application/octet-stream", "cache-control": pathname.startsWith("/assets/") ? "public, max-age=31536000, immutable" : "no-cache" });
+    fs9.createReadStream(file).pipe(res);
+  }
+  const server = http2.createServer(async (req, res) => {
+    try {
+      if (!allowedHosts.has(req.headers.host ?? "")) return json2(res, 403, { error: "Forbidden host" });
+      const reqOrigin = req.headers.origin;
+      if (reqOrigin && reqOrigin !== origin && reqOrigin !== `http://127.0.0.1:${opts.port}`) return json2(res, 403, { error: "Forbidden origin" });
+      const url = new URL(req.url ?? "/", origin);
+      if (url.pathname === "/mcp") return await handleMcp(req, res);
+      if (url.pathname.startsWith("/api/")) return await api(req, res, url);
+      if (req.method === "GET") return serveStatic(res, url.pathname);
+      json2(res, 405, { error: "Method not allowed" });
+    } catch (err) {
+      if (!res.headersSent) json2(res, 500, { error: err.message });
+      else res.end();
+    }
+  });
+  await new Promise((resolve, reject) => {
+    server.once("error", reject);
+    server.listen(opts.port, "127.0.0.1", resolve);
+  });
+  const shutdown = () => {
+    runner.closeAll();
+    server.close();
+  };
+  process.on("SIGINT", () => (shutdown(), process.exit(0)));
+  process.on("SIGTERM", () => (shutdown(), process.exit(0)));
+  return { origin, shutdown };
+}
+var ICON_MIME = { ".ico": "image/x-icon", ".svg": "image/svg+xml", ".png": "image/png", ".jpg": "image/jpeg", ".jpeg": "image/jpeg", ".webp": "image/webp" };
+function findIcon(dir) {
+  if (!dir || !fs9.existsSync(path9.join(dir, "package.json"))) return null;
+  const names = ["icon.svg", "icon.png", "favicon.svg", "favicon.ico", "icon.ico", "apple-icon.png", "favicon.png", "logo.svg", "icon.jpg"];
+  const roots = ["app", "src/app", "public", "static", "assets"];
+  for (const root of roots) {
+    for (const name of names) {
+      const file = path9.join(dir, root, name);
+      if (fs9.existsSync(file) && fs9.statSync(file).size < 2e6) return file;
+    }
+  }
+  for (const root of ["app", "src/app"]) {
+    let entries = [];
+    try {
+      entries = fs9.readdirSync(path9.join(dir, root), { withFileTypes: true });
+    } catch {
+      continue;
+    }
+    for (const e of entries) {
+      if (!e.isDirectory()) continue;
+      for (const name of names.slice(0, 4)) {
+        const file = path9.join(dir, root, e.name, name);
+        if (fs9.existsSync(file)) return file;
+      }
+    }
+  }
+  return null;
+}
+function json2(res, status, body) {
+  res.writeHead(status, { "content-type": "application/json" });
+  res.end(JSON.stringify(body));
+}
+async function readJson2(req) {
+  const chunks = [];
+  let size = 0;
+  for await (const chunk of req) {
+    size += chunk.length;
+    if (size > 4 * 1024 * 1024) throw new Error("Request too large.");
+    chunks.push(chunk);
+  }
+  const raw = Buffer.concat(chunks).toString("utf8");
+  return raw ? JSON.parse(raw) : {};
+}
+
+// src/hub/desktop.ts
+import fs10 from "fs";
+import os6 from "os";
+import path10 from "path";
+var ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#ff9466"/><stop offset="1" stop-color="#ea6a3c"/></linearGradient>
+    <linearGradient id="hl" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#fff" stop-opacity=".35"/><stop offset=".08" stop-color="#fff" stop-opacity="0"/></linearGradient>
+    <filter id="sh" x="-20%" y="-20%" width="140%" height="140%"><feDropShadow dx="0" dy="14" stdDeviation="18" flood-color="#000" flood-opacity=".22"/></filter>
+  </defs>
+  <g filter="url(#sh)">
+    <rect x="100" y="100" width="824" height="824" rx="190" fill="url(#bg)"/>
+    <rect x="100" y="100" width="824" height="824" rx="190" fill="url(#hl)"/>
+  </g>
+  <path fill="#f6f5f1" fill-rule="evenodd" d="M236 236h552v168H236z M428 316h168v472H428z"/>
+</svg>
+`;
+var data = () => process.env.XDG_DATA_HOME ?? path10.join(os6.homedir(), ".local", "share");
+function installDesktop(cli, port) {
+  const dir = path10.join(data(), "truecanvas");
+  fs10.mkdirSync(dir, { recursive: true });
+  const icon = path10.join(dir, "icon.svg");
+  fs10.writeFileSync(icon, ICON);
+  const launcher = path10.join(dir, "launch.sh");
+  const url = `http://localhost:${port}`;
+  fs10.writeFileSync(
+    launcher,
+    `#!/bin/sh
+# Truecanvas launcher: start the hub if needed, then open its window.
+NODE=${JSON.stringify(process.execPath)}
+CLI=${JSON.stringify(cli)}
+URL=${JSON.stringify(url)}
+LOG="\${XDG_STATE_HOME:-$HOME/.local/state}/truecanvas-hub.log"
+# apps started from the desktop don't get your shell's PATH: next, pnpm and npx need it
+export PATH=${JSON.stringify([path10.dirname(process.execPath), ...(process.env.PATH ?? "").split(":")].filter((p, i, a) => p && a.indexOf(p) === i).join(":"))}
+mkdir -p "$(dirname "$LOG")"
+
+if ! curl -sf "$URL/api/hub/state" >/dev/null 2>&1; then
+  nohup "$NODE" "$CLI" hub --port ${port} >"$LOG" 2>&1 &
+  i=0
+  while [ $i -lt 60 ] && ! curl -sf "$URL/api/hub/state" >/dev/null 2>&1; do sleep 0.25; i=$((i+1)); done
+fi
+
+PROFILE=${JSON.stringify(path10.join(dir, "window"))}
+for b in google-chrome google-chrome-stable chromium-browser chromium brave-browser microsoft-edge; do
+  if command -v "$b" >/dev/null 2>&1; then
+    exec "$b" --app="$URL" --class=Truecanvas --user-data-dir="$PROFILE" --no-first-run --no-default-browser-check
+  fi
+done
+exec xdg-open "$URL"
+`,
+    { mode: 493 }
+  );
+  const apps = path10.join(data(), "applications");
+  fs10.mkdirSync(apps, { recursive: true });
+  const desktop = path10.join(apps, "truecanvas.desktop");
+  fs10.writeFileSync(
+    desktop,
+    `[Desktop Entry]
+Type=Application
+Name=Truecanvas
+GenericName=Design canvas
+Comment=Design with your real React components
+Exec=${launcher}
+Icon=${icon}
+Terminal=false
+Categories=Graphics;
+Keywords=design;canvas;react;figma;mcp;
+StartupWMClass=Truecanvas
+StartupNotify=true
+`
+  );
+  let command = path10.join(os6.homedir(), ".local", "bin", "truecanvas");
+  const ours = !fs10.existsSync(command) || fs10.readFileSync(command, "utf8").includes("# truecanvas wrapper");
+  if (ours) {
+    fs10.mkdirSync(path10.dirname(command), { recursive: true });
+    fs10.writeFileSync(command, `#!/bin/sh
+# truecanvas wrapper (installed by \`truecanvas desktop\`)
+exec ${JSON.stringify(process.execPath)} ${JSON.stringify(cli)} "$@"
+`, { mode: 493 });
+  } else command = null;
+  return { desktop, launcher, icon, command };
+}
+function launcherPath() {
+  const p = path10.join(data(), "truecanvas", "launch.sh");
+  return fs10.existsSync(p) ? p : null;
+}
+function uninstallDesktop() {
+  const removed = [];
+  const cmd = path10.join(os6.homedir(), ".local", "bin", "truecanvas");
+  if (fs10.existsSync(cmd) && fs10.readFileSync(cmd, "utf8").includes("# truecanvas wrapper")) {
+    fs10.rmSync(cmd);
+    removed.push(cmd);
+  }
+  for (const f of [path10.join(data(), "applications", "truecanvas.desktop"), path10.join(data(), "truecanvas")]) {
+    if (fs10.existsSync(f)) {
+      fs10.rmSync(f, { recursive: true, force: true });
+      removed.push(f);
+    }
+  }
+  return removed;
+}
+
+// src/cli/index.ts
+import { fileURLToPath as fileURLToPath3 } from "url";
+import { createInterface } from "readline/promises";
+
+// src/cli/doctor.ts
+import { execFile as execFile2 } from "child_process";
+import fs11 from "fs";
+import path11 from "path";
+var major = (v) => v ? Number(/(\d+)(?:\.(\d+))?/.exec(v)?.[1] ?? 0) : 0;
+function has(cmd, args, cwd) {
+  return new Promise((resolve) => execFile2(cmd, args, { cwd, timeout: 8e3 }, (err, stdout, stderr) => resolve(err ? null : `${stdout}${stderr}`)));
+}
+async function doctor(root, cliVersion) {
+  const checks = [];
+  const add = (c2) => checks.push(c2);
+  const node = process.versions.node;
+  add(major(node) >= 20 ? { label: "Node.js", status: "ok", detail: node } : { label: "Node.js", status: "fail", detail: node, fix: "Install Node.js 20 or newer (https://nodejs.org)" });
+  const pkg = readPackage(root);
+  if (!pkg) {
+    add({ label: "Project", status: "fail", detail: "no package.json here", fix: "Run truecanvas from the root of your Next.js app, or create one: npm create truecanvas" });
+    return checks;
+  }
+  const pm = detectPm(root);
+  const next = depVersion(root, "next");
+  if (!next) add({ label: "Next.js", status: "fail", detail: "not a dependency", fix: "Truecanvas works with Next.js (App Router) apps for now. Create one: npm create truecanvas" });
+  else if (major(next) < 15) add({ label: "Next.js", status: "fail", detail: next, fix: `Upgrade to Next.js 15 or newer: ${pm} ${pm === "npm" ? "install" : "add"} next@latest` });
+  else add({ label: "Next.js", status: "ok", detail: next });
+  const react = depVersion(root, "react");
+  add(react && major(react) >= 19 ? { label: "React", status: "ok", detail: react } : { label: "React", status: "fail", detail: react ?? "missing", fix: "Truecanvas needs React 19 (comes with Next.js 15+)" });
+  const tw = depVersion(root, "tailwindcss");
+  add(tw ? { label: "Tailwind CSS", status: "ok", detail: tw } : { label: "Tailwind CSS", status: "warn", detail: "not installed", fix: "Optional, but the layout and style controls write Tailwind classes" });
+  const config = loadConfig(root);
+  add(fs11.existsSync(path11.join(root, config.appDir)) ? { label: "App Router", status: "ok", detail: config.appDir } : { label: "App Router", status: "fail", detail: `no ${config.appDir}/`, fix: "Truecanvas renders through the App Router (app/ or src/app/)" });
+  const tc = installedIn(root);
+  if (!tc.declared) add({ label: "Truecanvas in the project", status: "fail", detail: "not a dependency", fix: "npx truecanvas  (sets it up)" });
+  else if (!tc.installed) add({ label: "Truecanvas in the project", status: "fail", detail: "declared but not installed", fix: `${pm} install` });
+  else if (tc.version !== cliVersion) add({ label: "Truecanvas in the project", status: "warn", detail: `${tc.version} (this CLI is ${cliVersion})`, fix: `Use the project's version: ${runScript(pm, "canvas")}, or update: ${pm} ${pm === "npm" ? "install -D" : "add -D"} truecanvas@latest` });
+  else add({ label: "Truecanvas in the project", status: "ok", detail: tc.version ?? "" });
+  const wrapped = nextConfigStatus(root);
+  add(wrapped.wrapped ? { label: "next.config", status: "ok", detail: `${path11.basename(wrapped.file)} uses withTruecanvas()` } : { label: "next.config", status: "fail", detail: wrapped.file ? "not wrapped" : "missing", fix: "npx truecanvas init" });
+  const scripts = pkg.scripts ?? {};
+  const script = Object.entries(scripts).find(([, v]) => v.includes("truecanvas"));
+  add(script ? { label: "Start script", status: "ok", detail: runScript(pm, script[0]) } : { label: "Start script", status: "warn", detail: "none", fix: 'npx truecanvas init  (adds "canvas": "truecanvas dev")' });
+  const ignore = fs11.existsSync(path11.join(root, ".gitignore")) ? fs11.readFileSync(path11.join(root, ".gitignore"), "utf8") : "";
+  add(ignore.includes(`${config.appDir}/truecanvas`) ? { label: "Generated route ignored", status: "ok" } : { label: "Generated route ignored", status: "warn", detail: `${config.appDir}/truecanvas/ isn't in .gitignore`, fix: "npx truecanvas init" });
+  add(hasAgentConfig(root) ? { label: "Agents", status: "ok", detail: ".mcp.json lists Truecanvas" } : { label: "Agents", status: "warn", detail: "not connected for this project", fix: "npx truecanvas connect  (then commit .mcp.json)" });
+  const chrome = findChromium();
+  add(chrome ? { label: "Screenshots", status: "ok", detail: path11.basename(chrome) } : { label: "Screenshots", status: "warn", detail: "no Chromium found", fix: "npx playwright install chromium-headless-shell  (or install Chrome)" });
+  const git = await has("git", ["rev-parse", "--is-inside-work-tree"], root);
+  add(git ? { label: "Git", status: "ok" } : { label: "Git", status: "warn", detail: "not a repository", fix: "git init  (branches, history, comments and compare use git)" });
+  const gh = await has("gh", ["auth", "status"], root);
+  add(gh !== null ? { label: "GitHub CLI", status: "ok", detail: "signed in" } : { label: "GitHub CLI", status: "warn", detail: "missing or signed out", fix: "Install gh (https://cli.github.com) and run gh auth login  (for pull requests)" });
+  const app = await fetch(config.appUrl, { signal: AbortSignal.timeout(1500), redirect: "manual" }).then(() => true).catch(() => false);
+  add({ label: "App", status: "ok", detail: app ? `running at ${config.appUrl}` : `not running (truecanvas starts it at ${config.appUrl})` });
+  return checks;
+}
+
+// src/cli/index.ts
+var HELP = `truecanvas: design with your real React components
+
+Usage
+  truecanvas           In a Next.js app: set it up (asks once) and start the editor.
+                       Elsewhere: open the Truecanvas window.
+  truecanvas connect   Add Truecanvas to this project's .mcp.json (Claude Code, Cursor,
+                       VS Code): commit it and every teammate's agent connects
+  truecanvas doctor    Check this project and machine, with a fix for each problem
+  truecanvas dev       Start the editor + MCP server for this project (no window)
+  truecanvas setup     Install and set up Truecanvas in this project, without starting
+  truecanvas init      Only write the config (next.config, script, canvas folder)
+  truecanvas open      Open the Truecanvas window (projects dashboard + tabs)
+  truecanvas quit      Quit the window and every app it started
+  truecanvas desktop   Add Truecanvas to your app launcher (Linux); "desktop remove" undoes it
+  truecanvas mcp       stdio MCP server for agents without HTTP support
+
+Options
+  -y, --yes            Don't ask: set up and connect agents
+  --port <n>           Editor/MCP port (default 4800)
+  --app <url>          Your Next.js dev URL (default http://localhost:3000)
+  --no-next            Don't start \`next dev\` (by default it starts when the app isn't running)
+  --no-open            Don't open the editor in your browser
+  --cursor, --vscode   connect: also write .cursor/mcp.json / .vscode/mcp.json
+  -v, --version        Print the version
+`;
+var color = process.stdout.isTTY && !process.env.NO_COLOR;
+var paint = (open, close) => (s) => color ? `\x1B[${open}m${s}\x1B[${close}m` : s;
+var c = {
+  dim: paint("2", "22"),
+  bold: paint("1", "22"),
+  accent: paint("38;5;75", "39"),
+  green: paint("32", "39"),
+  yellow: paint("33", "39"),
+  red: paint("31", "39")
+};
+async function main() {
+  const { positionals, values } = parseArgs({
+    allowPositionals: true,
+    options: {
+      port: { type: "string" },
+      app: { type: "string" },
+      next: { type: "boolean", default: true },
+      "no-next": { type: "boolean" },
+      open: { type: "boolean", default: true },
+      "no-open": { type: "boolean" },
+      help: { type: "boolean", short: "h" },
+      yes: { type: "boolean", short: "y" },
+      cursor: { type: "boolean" },
+      vscode: { type: "boolean" },
+      version: { type: "boolean", short: "v" }
+    }
+  });
+  const cli = fileURLToPath3(import.meta.url);
+  const pkgDir = packageDir(cli);
+  const version = packageVersion(pkgDir);
+  const command = positionals[0] ?? "start";
+  if (values.version) return console.log(version);
+  if (values.help || command === "help") {
+    console.log(HELP);
+    return;
+  }
+  const yes = !!values.yes;
+  if (command === "start") {
+    const root2 = process.cwd();
+    if (!readPackage(root2) || !("next" in { ...readPackage(root2).dependencies, ...readPackage(root2).devDependencies })) {
+      return openWindow(cli, values.port ? Number(values.port) : 4800);
+    }
+    if (!await ensureSetup(root2, pkgDir, version, yes)) return;
+    if (await openInWindow(root2, Number(values.port ?? 4800))) return;
+    const local = path12.join(root2, "node_modules", "truecanvas", "dist", "cli.js");
+    if (fs12.existsSync(local) && fs12.realpathSync(local) !== fs12.realpathSync(cli)) {
+      const child = spawn3(process.execPath, [local, "dev", ...process.argv.slice(2).filter((a) => a !== "start" && a !== "-y" && a !== "--yes")], { stdio: "inherit" });
+      for (const sig of ["SIGINT", "SIGTERM"]) process.on(sig, () => child.kill(sig));
+      child.on("exit", (code) => process.exit(code ?? 0));
+      return;
+    }
+  }
+  if (command === "setup") {
+    const root2 = process.cwd();
+    if (!await ensureSetup(root2, pkgDir, version, true, true)) process.exit(1);
+    return;
+  }
+  if (command === "connect") {
+    const root2 = process.cwd();
+    if (!readPackage(root2)) {
+      console.error("Run truecanvas connect from your project root (no package.json here).");
+      process.exit(1);
+    }
+    const config2 = loadConfig(root2, { port: values.port ? Number(values.port) : void 0 });
+    printConnect(connectAgents(root2, config2.port, { cursor: values.cursor, vscode: values.vscode }), config2.port);
+    return;
+  }
+  if (command === "doctor") {
+    const checks = await doctor(process.cwd(), version);
+    console.log(`
+  ${c.accent("\u25C6")} ${c.bold("Truecanvas doctor")} ${c.dim(`v${version}`)}
+`);
+    for (const ch of checks) {
+      const mark = ch.status === "ok" ? c.green("\u2713") : ch.status === "warn" ? c.yellow("!") : c.red("\u2717");
+      console.log(`  ${mark} ${ch.label}${ch.detail ? c.dim(`  ${ch.detail}`) : ""}`);
+      if (ch.fix && ch.status !== "ok") console.log(`      ${c.dim("\u2192")} ${ch.fix}`);
+    }
+    const failed = checks.filter((ch) => ch.status === "fail").length;
+    console.log(failed ? `
+  ${failed} problem${failed === 1 ? "" : "s"} to fix.
+` : `
+  ${c.green("All good.")}
+`);
+    process.exit(failed ? 1 : 0);
+  }
+  if (command === "hub") {
+    const port = values.port ? Number(values.port) : 4800;
+    try {
+      const { origin: origin2 } = await startHub({ port, cli });
+      console.log(`
+  ${c.accent("\u25C6")} ${c.bold("Truecanvas")} hub on ${c.bold(origin2)}
+  ${c.dim("MCP")} ${origin2}/mcp ${c.dim("(follows the active tab)")}
+`);
+      if (values.open && !values["no-open"]) openBrowser(origin2);
+    } catch (err) {
+      if (err.code === "EADDRINUSE") {
+        console.error(`Port ${port} is busy. If a project is running there with \`truecanvas dev\`, stop it first: the hub uses ${port} so your MCP URL keeps working.`);
+        process.exit(1);
+      }
+      throw err;
+    }
+    return;
+  }
+  if (command === "open") return openWindow(cli, values.port ? Number(values.port) : 4800);
+  if (command === "quit") {
+    const url = `http://localhost:${values.port ?? 4800}`;
+    const up = await fetch(`${url}/api/hub/state`, { signal: AbortSignal.timeout(1500) }).then((r) => r.ok).catch(() => false);
+    if (!up) return console.log("Truecanvas isn't running.");
+    await fetch(`${url}/api/hub/quit`, { method: "POST" }).catch(() => {
+    });
+    return console.log(`${c.green("\u2713")} Truecanvas quit. Project apps it started are stopped too.`);
+  }
+  if (command === "desktop") {
+    if (positionals[1] === "remove") {
+      const removed = uninstallDesktop();
+      console.log(removed.length ? `${c.green("\u2713")} Removed the launcher.` : "Nothing to remove.");
+      return;
+    }
+    const out = installDesktop(cli, 4800);
+    console.log(`${c.green("\u2713")} Truecanvas is in your app launcher.
+  ${c.dim(out.desktop)}`);
+    if (out.command) console.log(`${c.green("\u2713")} The ${c.accent("truecanvas")} command is installed: ${c.dim(out.command)}`);
+    console.log(`  Open it from Activities, or run ${c.accent("truecanvas")}. Quit with ${c.accent("truecanvas quit")} or from the window's menu.`);
+    return;
+  }
+  const root = process.cwd();
+  if (!fs12.existsSync(path12.join(root, "package.json"))) {
+    console.error("Run truecanvas from your Next.js project root (no package.json here).");
+    process.exit(1);
+  }
+  const config = loadConfig(root, { port: values.port ? Number(values.port) : void 0, appUrl: values.app });
+  const ws = new Workspace(config);
+  if (command === "init") {
+    const report = initProject(config);
+    ws.ensureRoute();
+    console.log(`
+  ${c.accent("\u25C6")} ${c.bold("Truecanvas")} is set up in ${c.bold(path12.basename(root))}
+`);
+    for (const line of report.done) console.log(`  ${c.green("\u2713")} ${line}`);
+    console.log(`  ${c.green("\u2713")} Canvas folder ${c.bold(config.canvasDir)} and dev route ${c.bold(`${config.appDir}/truecanvas`)}`);
+    for (const line of report.todo) console.log(`  ${c.dim("!")} ${line}`);
+    console.log(`
+  Next: ${c.accent("npm run canvas")} ${c.dim("(starts your app and the editor)")}
+`);
+    return;
+  }
+  if (command === "mcp") {
+    console.log = console.error;
+    const mcpUrl = `http://localhost:${config.port}/mcp`;
+    const running = await fetch(`http://localhost:${config.port}/api/state`).then((r) => r.ok).catch(() => false);
+    if (!running) {
+      ws.ensureRoute();
+      await startServer(ws);
+      console.error(`Truecanvas editor: http://localhost:${config.port}`);
+    }
+    await runStdioBridge(mcpUrl);
+    return;
+  }
+  if (command !== "dev" && command !== "start") {
+    console.log(`Unknown command "${command}".
+`);
+    console.log(HELP);
+    process.exit(1);
+  }
+  if (command === "dev" && await openInWindow(root, config.port)) return;
+  const status = nextConfigStatus(root);
+  if (!status.wrapped) {
+    const report = initProject(config);
+    for (const line of report.done) console.log(`  ${c.green("\u2713")} ${line}`);
+    for (const line of report.todo) console.log(`  ${c.dim("!")} ${line}`);
+  }
+  ws.ensureRoute();
+  let started;
+  try {
+    started = await startServer(ws);
+  } catch (err) {
+    if (err.code === "EADDRINUSE") {
+      console.error(`Port ${config.port} is busy. Is Truecanvas already running? Use --port to pick another.`);
+      process.exit(1);
+    }
+    throw err;
+  }
+  const { origin, shutdown } = started;
+  const mcp = `${origin}/mcp`;
+  let next = null;
+  const appUp = await reachable(config.appUrl);
+  if (!appUp && values.next && !values["no-next"]) next = startNext(root, config.appUrl);
+  console.log(`
+  ${c.accent("\u25C6")} ${c.bold("Truecanvas")} ${c.dim(`v${version}`)}
+
+  ${c.dim("Editor")}   ${c.bold(origin)}
+  ${c.dim("MCP")}      ${mcp}
+  ${c.dim("App")}      ${config.appUrl} ${c.dim(appUp ? "(already running)" : next ? "(starting next dev\u2026)" : "(not running)")}
+  ${c.dim("Canvases")} ${ws.canvases().join(", ") || "none"}
+
+${hasAgentConfig(root, config.port) ? `  ${c.dim("Agents")}   connected through .mcp.json` : `  ${c.dim("Connect your agent:")} ${c.accent("npx truecanvas connect")} ${c.dim("(writes .mcp.json; commit it for your team)")}`}
+`);
+  if (next) {
+    const exited = new Promise((r) => next.once("exit", () => r("exited")));
+    const result = await Promise.race([waitFor(config.appUrl, 9e4), exited]);
+    if (result === true) console.log(`  ${c.green("\u2713")} App ready at ${config.appUrl}
+`);
+    else if (result === "exited") console.log(`  ${c.dim("next dev stopped (see above). Start your app, the editor connects as soon as it's up.")}
+`);
+    else console.log(`  ${c.dim("next dev is taking a while. The editor will connect when it's up.")}
+`);
+  }
+  if (values.open && !values["no-open"]) openBrowser(origin);
+  let stopping = false;
+  const stop = async () => {
+    if (stopping) return;
+    stopping = true;
+    next?.kill("SIGINT");
+    await shutdown();
+    process.exit(0);
+  };
+  process.on("SIGINT", stop);
+  process.on("SIGTERM", stop);
+  next?.on("exit", (code) => {
+    if (!stopping) console.log(`  ${c.dim(`next dev exited (${code ?? "signal"}).`)}`);
+  });
+}
+async function openWindow(cli, port) {
+  const url = `http://localhost:${port}`;
+  const launcher = launcherPath();
+  if (launcher) {
+    spawn3(launcher, [], { stdio: "ignore", detached: true }).unref();
+    return console.log(`${c.accent("\u25C6")} Opening Truecanvas\u2026`);
+  }
+  const up = await fetch(`${url}/api/hub/state`, { signal: AbortSignal.timeout(1500) }).then((r) => r.ok).catch(() => false);
+  if (!up) {
+    spawn3(process.execPath, [cli, "hub", "--port", String(port), "--no-open"], { stdio: "ignore", detached: true }).unref();
+    for (let i = 0; i < 40 && !await fetch(`${url}/api/hub/state`).then((r) => r.ok).catch(() => false); i++) await new Promise((r) => setTimeout(r, 250));
+  }
+  openBrowser(url);
+  console.log(`${c.accent("\u25C6")} Truecanvas is at ${c.bold(url)}  ${c.dim("(tip: `truecanvas desktop` adds it to your app launcher)")}`);
+}
+async function openInWindow(root, port) {
+  const hub = `http://localhost:${port}`;
+  const up = await fetch(`${hub}/api/hub/state`, { signal: AbortSignal.timeout(1e3) }).then((r) => r.ok).catch(() => false);
+  if (!up) return false;
+  const post = (route, body) => fetch(`${hub}${route}`, { method: "POST", headers: { "content-type": "application/json", origin: hub }, body: JSON.stringify(body) }).catch(() => null);
+  await post("/api/hub/add", { path: root });
+  await post("/api/hub/open", { path: root, focus: "1" });
+  console.log(`${c.accent("\u25C6")} Opened ${c.bold(path12.basename(root))} in the Truecanvas window ${c.dim(`(${hub})`)}.`);
+  return true;
+}
+async function ask(question) {
+  const rl = createInterface({ input: process.stdin, output: process.stdout });
+  try {
+    const answer = (await rl.question(`  ${question} ${c.dim("(Y/n)")} `)).trim().toLowerCase();
+    return answer === "" || answer === "y" || answer === "yes";
+  } finally {
+    rl.close();
+  }
+}
+async function ensureSetup(root, pkgDir, version, yes, force = false) {
+  const tc = installedIn(root);
+  const wrapped = nextConfigStatus(root).wrapped;
+  if (tc.declared && tc.installed && wrapped && !force) return true;
+  const name = readPackage(root)?.name ?? path12.basename(root);
+  if (!yes) {
+    if (!process.stdin.isTTY) {
+      console.error(`Truecanvas isn't set up in ${name} yet. Run again with --yes to set it up.`);
+      return false;
+    }
+    console.log(`
+  ${c.accent("\u25C6")} ${c.bold("Truecanvas")} ${c.dim(`v${version}`)}
+`);
+    console.log(`  This adds Truecanvas to ${c.bold(name)}: a dev dependency, a wrapper in next.config,`);
+    console.log(`  a ${c.bold("canvas")} script and a canvas with your homepage. Nothing changes in production builds.
+`);
+    if (!await ask("Set it up?")) return false;
+  }
+  const pm = detectPm(root);
+  if (!tc.declared || !tc.installed) {
+    try {
+      const spec = await packageSpec(pkgDir, (cmd, args, cwd) => execInherit(cmd, args, cwd));
+      console.log(`
+  ${c.dim(`Installing ${spec.includes("/") ? "this build of truecanvas" : spec} with ${pm}\u2026`)}
+`);
+      await execInherit(pm, addDevArgs(pm, spec), root).catch((err) => {
+        if (!installedIn(root).installed) throw err;
+      });
+    } catch (err) {
+      console.error(`
+  ${c.red("\u2717")} Couldn't install Truecanvas: ${err.message}`);
+      return false;
+    }
+  }
+  const config = loadConfig(root);
+  const report = initProject(config);
+  new Workspace(config).ensureRoute();
+  console.log("");
+  for (const line of report.done) console.log(`  ${c.green("\u2713")} ${line}`);
+  console.log(`  ${c.green("\u2713")} Canvas folder ${c.bold(config.canvasDir)}`);
+  for (const line of report.todo) console.log(`  ${c.yellow("!")} ${line}`);
+  if (!hasAgentConfig(root) && (yes || process.stdin.isTTY && await ask("Connect agents (Claude Code, Cursor\u2026) through this project's .mcp.json?"))) {
+    printConnect(connectAgents(root, config.port), config.port);
+  }
+  console.log(`
+  Next time, start it with ${c.accent(runScript(pm, "canvas"))} ${c.dim("(or npx truecanvas)")}
+`);
+  return true;
+}
+function printConnect(res, port) {
+  for (const f of res.written) console.log(`  ${c.green("\u2713")} Truecanvas added to ${c.bold(f)}`);
+  for (const f of res.unchanged) console.log(`  ${c.green("\u2713")} ${c.bold(f)} already lists Truecanvas`);
+  console.log(`    ${c.dim("Commit it: anyone who clones the repo gets Truecanvas in their agent.")}`);
+  console.log(`    ${c.dim(`Or for all your projects (Claude Code): claude mcp add --scope user --transport http truecanvas http://localhost:${port}/mcp`)}`);
+}
+async function reachable(url) {
+  try {
+    await fetch(url, { signal: AbortSignal.timeout(1500), redirect: "manual" });
+    return true;
+  } catch {
+    return false;
+  }
+}
+async function waitFor(url, ms) {
+  const until = Date.now() + ms;
+  while (Date.now() < until) {
+    if (await reachable(url)) return true;
+    await new Promise((r) => setTimeout(r, 700));
+  }
+  return false;
+}
+function startNext(root, appUrl) {
+  const port = new URL(appUrl).port || "3000";
+  const bin = path12.join(root, "node_modules", ".bin", "next");
+  const [cmd, args] = fs12.existsSync(bin) ? [bin, ["dev", "-p", port]] : ["npx", ["next", "dev", "-p", port]];
+  const child = spawn3(cmd, args, { cwd: root, env: { ...process.env, ...process.env.NO_COLOR ? {} : { FORCE_COLOR: "1" } }, stdio: ["ignore", "pipe", "pipe"] });
+  const prefix = c.dim("next \u2502 ");
+  for (const stream of [child.stdout, child.stderr]) {
+    let buf = "";
+    stream.on("data", (chunk) => {
+      buf += chunk.toString();
+      const lines = buf.split("\n");
+      buf = lines.pop();
+      for (const line of lines) if (line.trim()) process.stdout.write(`  ${prefix}${line}
+`);
+    });
+  }
+  return child;
+}
+function openBrowser(url) {
+  const cmd = process.platform === "darwin" ? "open" : process.platform === "win32" ? "start" : "xdg-open";
+  try {
+    spawn3(cmd, [url], { stdio: "ignore", detached: true, shell: process.platform === "win32" }).on("error", () => {
+    }).unref();
+  } catch {
+  }
+}
+main().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});