truecanvas 0.1.0 → 0.3.0

package/dist/cli.js

@@ -3,29 +3,49 @@ import {
   DEVICES,
   EditError,
   Workspace,
+  addArgs,
+  assertCanvasName,
   clearCompare,
   componentsDir,
+  configStatus,
   describeComponent,
+  detectPm,
   findByPath,
   findDevice,
   findNode,
   frameChanges,
+  initProject,
   layoutFiles,
   listRoutes,
-  loadConfig,
   outlineDoc,
   parseCanvas,
   readDesignTokens,
   readTokenData,
+  run,
+  shadcnAdd,
+  shadcnRegistry,
+  shadcnStatus,
+  shellSafe,
   syncComponentRegistry,
+  toolEnv,
   writeCompare
-} from "./chunk-WB35FXGP.js";
-import "./chunk-753N4QRO.js";
+} from "./chunk-XWQ5MS24.js";
+import {
+  loadConfig
+} from "./chunk-PBKX3SBC.js";
+import "./chunk-WU7NBTJH.js";
+import {
+  ICON_LIBRARIES,
+  iconLibraries,
+  iconLibrary,
+  loadIcons,
+  searchIcons
+} from "./chunk-C4SATRZT.js";
 
 // src/cli/index.ts
 import { spawn as spawn3 } from "child_process";
-import fs12 from "fs";
-import path12 from "path";
+import fs11 from "fs";
+import path11 from "path";
 import { parseArgs } from "util";
 
 // src/server/http.ts
@@ -41,6 +61,33 @@ import launchEditor from "launch-editor";
 // src/server/mcp.ts
 import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
 import { z } from "zod";
+
+// src/core/libraries.ts
+function libraryState(root) {
+  return { packageManager: detectPm(root), icons: iconLibraries(root), shadcn: shadcnStatus(root) };
+}
+var lock = Promise.resolve();
+function exclusive(job) {
+  const next = lock.then(job, job);
+  lock = next.catch(() => {
+  });
+  return next;
+}
+function installIconLibrary(root, id) {
+  const lib = iconLibrary(id);
+  if (!lib) throw new EditError(`Unknown icon library "${id}". Known: ${iconLibraries(root).map((l) => l.id).join(", ")}.`);
+  return exclusive(async () => {
+    const pm = detectPm(root);
+    const res = await run(pm, addArgs(pm, [lib.package]), root);
+    return { ...res, package: lib.package };
+  });
+}
+function addShadcnComponents(root, names) {
+  if (!names.length) throw new EditError("Name at least one component, e.g. button.");
+  return exclusive(() => shadcnAdd(root, names));
+}
+
+// src/server/mcp.ts
 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.
 
@@ -50,6 +97,7 @@ Workflow:
 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.
+   Icons and shadcn/ui: list_libraries shows what's installed. install_library adds an icon set (lucide, tabler, phosphor, heroicons, radix); search_icons finds names and insert_icon places one with its import. add_shadcn_components copies shadcn/ui components into the project (setting shadcn up if needed); they then appear in list_components like any project component.
 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()]))]);
@@ -67,6 +115,7 @@ function createMcpServer(ws, shots, session) {
   const resolveCanvas = (canvas) => {
     const c2 = canvas ?? lastCanvas ?? ws.selection.canvas ?? ws.canvases()[0];
     if (!c2) throw new Error("No canvases yet. Use create_canvas.");
+    assertCanvasName(c2);
     lastCanvas = c2;
     return c2;
   };
@@ -80,6 +129,7 @@ function createMcpServer(ws, shots, session) {
     set_class: "Adjusting layout",
     insert_jsx: "Inserting",
     insert_component: "Inserting",
+    insert_icon: "Inserting",
     replace: "Rewriting",
     duplicate: "Duplicating",
     delete: "Deleting",
@@ -110,7 +160,8 @@ function createMcpServer(ws, shots, session) {
       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 isLayerId = (x) => /^(?:.+#)?t?\d+:\d+$/.test(x);
+      presence(cmd.canvas, "editing", `${VERBS[cmd.op] ?? "Editing"}\u2026`, before.filter(isLayerId), frameRef ?? before.find((x) => !isLayerId(x)) ?? null);
       const res = await ws.run(cmd, actor());
       presence(cmd.canvas, "editing", res.label, res.ids);
       const frames = /* @__PURE__ */ new Set();
@@ -529,7 +580,7 @@ ${source.slice(hit.node.start, hit.node.end)}
     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.`);
+        return text(`\u2713 Created canvas ${name} (${ws.relFile(name)}). The app picks it up in a second.`);
       } catch (e) {
         return fail(e);
       }
@@ -716,6 +767,108 @@ ${msgs}`;
       }
     }
   );
+  const root = ws.config.root;
+  const installedIcons = () => iconLibraries(root).filter((l) => l.version);
+  server.registerTool(
+    "list_libraries",
+    {
+      title: "List libraries",
+      description: "Icon libraries (installed or available) and shadcn/ui status for this project.",
+      annotations: { readOnlyHint: true }
+    },
+    () => {
+      const st = libraryState(root);
+      const icons = st.icons.map((l) => `  ${l.id.padEnd(16)} ${l.version ? `installed ${l.version}` : "not installed"}  (${l.package}${l.from !== l.package ? `, imports from ${l.from}` : ""})`);
+      const shadcn = st.shadcn.initialized ? `set up, components in ${st.shadcn.uiDir}: ${st.shadcn.installed.join(", ") || "none yet"}` : "not set up (add_shadcn_components sets it up)";
+      return text(`Package manager: ${st.packageManager}
+Icon libraries:
+${icons.join("\n")}
+shadcn/ui: ${shadcn}`);
+    }
+  );
+  server.registerTool(
+    "install_library",
+    {
+      title: "Install icon library",
+      description: "Install an icon library into the project with its package manager (adds a dependency).",
+      inputSchema: { library: z.enum(ICON_LIBRARIES.map((l) => l.id)) }
+    },
+    async ({ library }) => {
+      try {
+        const out = await installIconLibrary(root, library);
+        if (!out.ok) return fail(new Error(`Installing ${out.package} failed:
+${out.out.slice(-1500)}`));
+        return text(`\u2713 Installed ${out.package}. Use search_icons to find icons.`);
+      } catch (err) {
+        return fail(err);
+      }
+    }
+  );
+  server.registerTool(
+    "search_icons",
+    {
+      title: "Search icons",
+      description: "Find icon names in an installed icon library. Without a query, lists the first icons.",
+      inputSchema: {
+        query: z.string().optional(),
+        library: z.string().optional().describe("Library id (lucide, tabler\u2026). Defaults to the first installed one."),
+        limit: z.number().int().min(1).max(500).optional()
+      },
+      annotations: { readOnlyHint: true }
+    },
+    async ({ query, library, limit }) => {
+      try {
+        const lib = library ?? installedIcons()[0]?.id;
+        if (!lib) return fail(new Error("No icon library is installed. Use install_library (lucide is a good default)."));
+        const res = searchIcons(await loadIcons(root, lib), query ?? "", limit ?? 60);
+        if (!res.icons.length) return text(`No icons match "${query}" in ${lib}.`);
+        return text(`${res.total} match${res.total === 1 ? "" : "es"} in ${lib}${res.total > res.icons.length ? ` (first ${res.icons.length})` : ""}:
+${res.icons.map((i) => i.name).join(", ")}`);
+      } catch (err) {
+        return fail(err);
+      }
+    }
+  );
+  server.registerTool(
+    "insert_icon",
+    {
+      title: "Insert icon",
+      description: "Insert an icon from an installed library as a child of a frame or node, with its import. className defaults to size-4.",
+      inputSchema: {
+        ...canvasArg,
+        parent: z.string(),
+        name: z.string().describe("Icon name from search_icons, e.g. Search"),
+        library: z.string().optional().describe("Library id. Defaults to the first installed one."),
+        index: z.number().int().optional(),
+        className: z.string().optional()
+      }
+    },
+    ({ canvas, parent, name, library, index, className }) => edit(() => {
+      const lib = library ?? installedIcons()[0]?.id;
+      if (!lib) throw new Error("No icon library is installed. Use install_library first.");
+      return { op: "insert_icon", canvas: resolveCanvas(canvas), parent, name, library: lib, index, className };
+    })
+  );
+  server.registerTool(
+    "add_shadcn_components",
+    {
+      title: "Add shadcn/ui components",
+      description: "Copy shadcn/ui components into the project with the shadcn CLI (sets shadcn up first if needed). They then show up in list_components.",
+      inputSchema: { names: z.array(z.string()).min(1).describe('Registry names, e.g. ["button", "card", "dialog"]') }
+    },
+    async ({ names }) => {
+      try {
+        const out = await addShadcnComponents(root, names);
+        if (!out.ok) return fail(new Error(`shadcn failed:
+${out.out.slice(-1500)}`));
+        ws.catalog.invalidate();
+        const already = names.filter((n) => !out.added.includes(n));
+        return text(`\u2713 ${out.added.length ? `Added ${out.added.join(", ")}` : "Nothing new to add"}${already.length ? ` (already there: ${already.join(", ")})` : ""}. Use list_components to see their props.`);
+      } catch (err) {
+        return fail(err);
+      }
+    }
+  );
   return server;
 }
 
@@ -786,17 +939,27 @@ 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");
+  const cache2 = process.env.PLAYWRIGHT_BROWSERS_PATH || (process.platform === "win32" ? path2.join(process.env.LOCALAPPDATA ?? path2.join(os.homedir(), "AppData", "Local"), "ms-playwright") : process.platform === "darwin" ? path2.join(os.homedir(), "Library", "Caches", "ms-playwright") : 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"]) {
+      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",
+        "chrome-headless-shell-win64/chrome-headless-shell.exe",
+        "chrome-win/headless_shell.exe"
+      ]) {
         const p = path2.join(cache2, d, sub);
         if (fs2.existsSync(p)) return p;
       }
     }
   }
+  const programFiles = [process.env.PROGRAMFILES, process.env["PROGRAMFILES(X86)"], process.env.LOCALAPPDATA].filter(Boolean);
   for (const p of [
+    ...programFiles.flatMap((dir) => [path2.join(dir, "Google", "Chrome", "Application", "chrome.exe"), path2.join(dir, "Microsoft", "Edge", "Application", "msedge.exe")]),
+    "/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge",
     "/usr/bin/chromium-browser",
     "/usr/bin/chromium",
     "/usr/bin/google-chrome-stable",
@@ -823,14 +986,40 @@ var Screenshotter = class {
       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);
+      const launching = chromium.launch({ executablePath, headless: true, args: ["--disable-gpu", "--disable-dev-shm-usage"] });
+      this.browser = launching;
+      launching.then(
+        // a crashed browser is forgotten, so the next screenshot starts a fresh one
+        (b) => b.on("disconnected", () => this.browser === launching && (this.browser = null)),
+        () => this.browser === launching && (this.browser = null)
+      );
     }
     return this.browser;
   }
-  touch() {
+  busy = 0;
+  waiting = [];
+  /**
+   * Runs one screenshot in its own browser context. At most two run at once
+   * (memory), and the browser only closes once nothing is in flight.
+   */
+  async withContext(options, fn) {
+    if (this.busy >= 2) await new Promise((r) => this.waiting.push(r));
+    this.busy++;
     if (this.idle) clearTimeout(this.idle);
-    this.idle = setTimeout(() => void this.close(), 6e4);
+    try {
+      const browser = await this.getBrowser();
+      const ctx = await browser.newContext(options);
+      try {
+        return await fn(ctx);
+      } finally {
+        await ctx.close().catch(() => {
+        });
+      }
+    } finally {
+      this.busy--;
+      this.waiting.shift()?.();
+      if (this.busy === 0) this.idle = setTimeout(() => void this.close(), 6e4);
+    }
   }
   async close() {
     const b = this.browser;
@@ -840,10 +1029,7 @@ var Screenshotter = class {
   }
   /** 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 {
+    return this.withContext({ viewport, deviceScaleFactor: 2, colorScheme: "light" }, async (ctx) => {
       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 });
@@ -851,23 +1037,18 @@ var Screenshotter = class {
       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({
+    const options = {
       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 {
+    };
+    return this.withContext(options, async (ctx) => {
       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 });
@@ -882,10 +1063,7 @@ var Screenshotter = class {
       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();
-    }
+    });
   }
 };
 
@@ -939,7 +1117,7 @@ async function reviewPage(ws, canvas, ref, since) {
       }
     }
   }
-  const comments = path3.join(ws.config.canvasDir, `${canvas}.comments.json`);
+  const comments = `${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) : [];
@@ -967,7 +1145,7 @@ async function reviewAll(ws) {
   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 own = [ws.relFile(canvas), `${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);
@@ -1035,6 +1213,24 @@ function prDesignSection(pages, images) {
   return lines.join("\n");
 }
 
+// src/server/body.ts
+async function readJson(req, limit = 8 * 1024 * 1024) {
+  const chunks = [];
+  let size = 0;
+  for await (const chunk of req) {
+    size += chunk.length;
+    if (size > limit) throw new EditError("Request too large.");
+    chunks.push(chunk);
+  }
+  const raw = Buffer.concat(chunks).toString("utf8");
+  if (!raw) return {};
+  try {
+    return JSON.parse(raw);
+  } catch {
+    throw new EditError("The request body isn't valid JSON.");
+  }
+}
+
 // src/server/http.ts
 var MIME = {
   ".html": "text/html; charset=utf-8",
@@ -1116,6 +1312,7 @@ async function startServer(ws) {
       case "GET /api/state":
         return json(res, 200, {
           appUrl: config.appUrl,
+          framework: config.framework,
           root: config.root,
           projectName: path4.basename(config.root),
           canvases: ws.canvases(),
@@ -1319,6 +1516,28 @@ async function startServer(ws) {
         return json(res, 200, readTokenData(config.root));
       case "GET /api/components":
         return json(res, 200, { components: await ws.catalog.load() });
+      // ---------- libraries: icon sets and shadcn/ui ----------
+      case "GET /api/libraries":
+        return json(res, 200, libraryState(config.root));
+      case "GET /api/libraries/shadcn":
+        return json(res, 200, { ...await shadcnRegistry(), status: shadcnStatus(config.root) });
+      case "GET /api/icons": {
+        const icons = await loadIcons(config.root, url.searchParams.get("library") ?? "");
+        const limit = Math.min(Number(url.searchParams.get("limit")) || 240, 1e3);
+        return json(res, 200, searchIcons(icons, url.searchParams.get("q") ?? "", limit));
+      }
+      case "POST /api/libraries/icons": {
+        const { id } = await readJson(req);
+        const out = await installIconLibrary(config.root, id);
+        return json(res, 200, { ...out, out: out.out.slice(-4e3), state: libraryState(config.root) });
+      }
+      case "POST /api/libraries/shadcn": {
+        const { names } = await readJson(req);
+        const out = await addShadcnComponents(config.root, Array.isArray(names) ? names.map(String) : []);
+        ws.catalog.invalidate();
+        broadcast({ type: "catalog" });
+        return json(res, 200, { ...out, out: out.out.slice(-4e3), state: libraryState(config.root) });
+      }
       case "GET /api/events": {
         res.writeHead(200, { "content-type": "text/event-stream", "cache-control": "no-cache", connection: "keep-alive" });
         res.write(": connected\n\n");
@@ -1392,7 +1611,7 @@ async function startServer(ws) {
   }
   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 (!inside(editorDir, file) || !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.");
@@ -1400,7 +1619,7 @@ async function startServer(ws) {
     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);
+    fs4.createReadStream(file).on("error", () => res.destroy()).pipe(res);
   }
   const server = http.createServer(async (req, res) => {
     try {
@@ -1422,7 +1641,7 @@ async function startServer(ws) {
   const canvasDir = path4.join(config.root, config.canvasDir);
   fs4.mkdirSync(canvasDir, { recursive: true });
   const pending = /* @__PURE__ */ new Map();
-  fs4.watch(canvasDir, (_event, filename) => {
+  const onCanvasFile = (filename) => {
     if (!filename) return;
     if (filename.endsWith(".comments.json")) {
       ws.commentsChanged(filename.slice(0, -".comments.json".length));
@@ -1439,11 +1658,34 @@ async function startServer(ws) {
         }
       }, 60)
     );
-  });
+  };
+  let canvasWatcher = null;
+  let watchedIno = null;
+  const watchCanvasDir = () => {
+    let ino = null;
+    try {
+      ino = fs4.statSync(canvasDir).ino;
+    } catch {
+      ino = null;
+    }
+    if (ino === watchedIno && canvasWatcher) return;
+    canvasWatcher?.close();
+    canvasWatcher = null;
+    watchedIno = ino;
+    if (ino === null) return;
+    canvasWatcher = fs4.watch(canvasDir, (_event, filename) => onCanvasFile(filename));
+    canvasWatcher.on("error", () => {
+      canvasWatcher?.close();
+      canvasWatcher = null;
+    });
+    for (const f of fs4.readdirSync(canvasDir)) onCanvasFile(f);
+  };
+  watchCanvasDir();
+  setInterval(watchCanvasDir, 2e3).unref();
   const appDirAbs = path4.join(config.root, config.appDir);
-  if (fs4.existsSync(appDirAbs)) {
+  if (config.framework === "next" && fs4.existsSync(appDirAbs)) {
     const appPending = /* @__PURE__ */ new Map();
-    fs4.watch(appDirAbs, { recursive: true }, (_event, filename) => {
+    const appWatcher = 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));
@@ -1458,12 +1700,13 @@ async function startServer(ws) {
         }, 60)
       );
     });
+    appWatcher.on("error", (err) => console.error(`Stopped watching ${config.appDir}: ${err.message}`));
   }
   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 }, () => {
+    const componentWatcher = fs4.watch(abs, { recursive: true }, () => {
       clearTimeout(catalogTimer);
       catalogTimer = setTimeout(() => {
         ws.catalog.invalidate();
@@ -1471,6 +1714,7 @@ async function startServer(ws) {
         void syncRegistry();
       }, 250);
     });
+    componentWatcher.on("error", (err) => console.error(`Stopped watching ${dir}: ${err.message}`));
   }
   await new Promise((resolve, reject) => {
     server.once("error", reject);
@@ -1491,21 +1735,14 @@ 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");
 }
+function inside(dir, file) {
+  const rel = path4.relative(dir, file);
+  return !!rel && !rel.startsWith("..") && !path4.isAbsolute(rel);
+}
 
 // src/server/stdio.ts
 import { Server } from "@modelcontextprotocol/sdk/server/index.js";
@@ -1514,141 +1751,42 @@ 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 {
+  let client = null;
+  const connect = () => {
+    if (!client) {
       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);
+      const c2 = new Client({ name: info?.name ?? "stdio-agent", version: info?.version ?? "0.0.0" });
+      const pending = c2.connect(new StreamableHTTPClientTransport(new URL(mcpUrl))).then(() => c2);
+      pending.catch(() => client === pending && (client = null));
+      client = pending;
+    }
+    return client;
+  };
+  const withUpstream = async (fn) => {
+    for (let attempt = 0; ; attempt++) {
+      try {
+        return await fn(await connect());
+      } catch (err) {
+        client = null;
+        const lost = /session|not connected|ECONNREFUSED|ECONNRESET|fetch failed|404/i.test(err.message ?? "");
+        if (attempt > 0 || !lost) throw err;
+      }
     }
   };
-  server.setRequestHandler(ListToolsRequestSchema, async () => (await upstream).listTools());
-  server.setRequestHandler(CallToolRequestSchema, async (req) => (await upstream).callTool(req.params));
+  server.setRequestHandler(ListToolsRequestSchema, () => withUpstream((c2) => c2.listTools()));
+  server.setRequestHandler(CallToolRequestSchema, (req) => withUpstream((c2) => c2.callTool(req.params, void 0, { timeout: 18e4 })));
   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/cli/index.ts
+import { createRequire } from "module";
 
 // src/hub/server.ts
 import http2 from "http";
-import fs9 from "fs";
+import fs8 from "fs";
 import os5 from "os";
-import path9 from "path";
+import path8 from "path";
 import { randomUUID as randomUUID2 } from "crypto";
 import { fileURLToPath as fileURLToPath2 } from "url";
 import { Server as Server2 } from "@modelcontextprotocol/sdk/server/index.js";
@@ -1658,42 +1796,42 @@ import { StreamableHTTPClientTransport as StreamableHTTPClientTransport2 } from
 import { CallToolRequestSchema as CallToolRequestSchema2, ListToolsRequestSchema as ListToolsRequestSchema2, isInitializeRequest as isInitializeRequest2 } from "@modelcontextprotocol/sdk/types.js";
 
 // src/hub/projects.ts
-import fs6 from "fs";
+import fs5 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");
+import path5 from "path";
+var CONFIG_DIR = path5.join(process.env.XDG_CONFIG_HOME ?? path5.join(os2.homedir(), ".config"), "truecanvas");
+var FILE = path5.join(CONFIG_DIR, "projects.json");
 var ProjectStore = class {
   list = [];
   constructor() {
     try {
-      this.list = JSON.parse(fs6.readFileSync(FILE, "utf8"));
+      this.list = JSON.parse(fs5.readFileSync(FILE, "utf8"));
     } catch {
       this.list = [];
     }
   }
   save() {
-    fs6.mkdirSync(CONFIG_DIR, { recursive: true });
-    fs6.writeFileSync(FILE, JSON.stringify(this.list, null, 2));
+    fs5.mkdirSync(CONFIG_DIR, { recursive: true });
+    fs5.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 abs = path5.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.list = this.list.filter((p) => p.path !== path5.resolve(dir));
     this.save();
   }
 };
 function readPkg(dir) {
   try {
-    return JSON.parse(fs6.readFileSync(path6.join(dir, "package.json"), "utf8"));
+    return JSON.parse(fs5.readFileSync(path5.join(dir, "package.json"), "utf8"));
   } catch {
     return null;
   }
@@ -1701,24 +1839,24 @@ function readPkg(dir) {
 function projectName(dir) {
   const pkg = readPkg(dir);
   const name = typeof pkg?.name === "string" ? pkg.name : "";
-  return name && !name.startsWith("@") ? name : path6.basename(dir);
+  return name && !name.startsWith("@") ? name : path5.basename(dir);
 }
 function inspect(dir) {
   const pkg = readPkg(dir);
-  if (!pkg) return { next: false, ready: false, canvases: 0, exists: fs6.existsSync(dir) };
+  if (!pkg) return { next: false, ready: false, canvases: 0, exists: fs5.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;
+      canvases += fs5.readdirSync(path5.join(dir, d)).filter((f) => f.endsWith(".canvas.tsx")).length;
     } catch {
     }
   }
-  return { next: "next" in deps, ready: "truecanvas" in deps, canvases, exists: true };
+  return { next: "next" in deps || "vite" in deps && "react" 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 roots = ["Github", "GitHub", "github", "Projects", "projects", "code", "Code", "dev", "src", "Developer", "Documents", "work"].map((d) => path5.join(home, d)).filter((d) => fs5.existsSync(d));
   const found = [];
   let visited = 0;
   const walk = (dir, depth) => {
@@ -1726,7 +1864,7 @@ function discover() {
     visited++;
     let entries;
     try {
-      entries = fs6.readdirSync(dir, { withFileTypes: true });
+      entries = fs5.readdirSync(dir, { withFileTypes: true });
     } catch {
       return;
     }
@@ -1736,111 +1874,98 @@ function discover() {
     }
     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);
+      walk(path5.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));
+  const abs = path5.resolve(dir.replace(/^~(?=$|[\\/])/, os2.homedir()));
+  const dirs = fs5.readdirSync(abs, { withFileTypes: true }).filter((e) => e.isDirectory() && !e.name.startsWith(".") && e.name !== "node_modules").map((e) => ({ name: e.name, next: inspect(path5.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 fs7 from "fs";
 import net from "net";
 import os4 from "os";
-import path8 from "path";
+import path7 from "path";
 
 // src/cli/setup.ts
 import { spawn } from "child_process";
 import { createHash as createHash2 } from "crypto";
-import fs7 from "fs";
+import fs6 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";
-}
+import path6 from "path";
 function addDevArgs(pm, spec) {
-  return pm === "npm" ? ["install", "-D", spec] : pm === "bun" ? ["add", "-d", spec] : ["add", "-D", spec];
+  return addArgs(pm, [spec], true);
 }
 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 ?? ""}` } });
+  const safe = shellSafe(cmd, args);
+  const p = spawn(safe.cmd, safe.args, { cwd, stdio: "inherit", env: toolEnv(), shell: safe.shell });
   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), "..");
+  return path6.resolve(path6.dirname(cliFile), "..");
 }
 function packageVersion(pkgDir) {
   try {
-    return JSON.parse(fs7.readFileSync(path7.join(pkgDir, "package.json"), "utf8")).version;
+    return JSON.parse(fs6.readFileSync(path6.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"));
+  return !pkgDir.split(path6.sep).includes("node_modules") && fs6.existsSync(path6.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`);
+  const cacheDir = path6.join(os3.homedir(), ".cache", "truecanvas");
+  fs6.mkdirSync(cacheDir, { recursive: true });
+  const file = path6.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);
+  const hash = createHash2("sha256").update(fs6.readFileSync(file)).digest("hex").slice(0, 10);
+  const named = path6.join(cacheDir, `truecanvas-${version}-${hash}.tgz`);
+  fs6.renameSync(file, named);
   return named;
 }
 function installedIn(root) {
   let declared = false;
   try {
-    const pkg = JSON.parse(fs7.readFileSync(path7.join(root, "package.json"), "utf8"));
+    const pkg = JSON.parse(fs6.readFileSync(path6.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 };
+  const file = path6.join(root, "node_modules", "truecanvas", "package.json");
+  const installed = fs6.existsSync(file);
+  return { declared, installed, version: installed ? packageVersion(path6.dirname(file)) : null };
 }
 function readPackage(root) {
   try {
-    return JSON.parse(fs7.readFileSync(path7.join(root, "package.json"), "utf8"));
+    return JSON.parse(fs6.readFileSync(path6.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 file = path6.join(root, "node_modules", name, "package.json");
+  if (fs6.existsSync(file)) return packageVersion(path6.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)) {
+  if (fs6.existsSync(file)) {
     try {
-      data2 = JSON.parse(fs7.readFileSync(file, "utf8"));
+      data2 = JSON.parse(fs6.readFileSync(file, "utf8"));
     } catch {
       throw new Error(`${file} isn't valid JSON; fix it or remove it, then run connect again.`);
     }
@@ -1848,24 +1973,24 @@ function mergeJson(file, update) {
   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)}
+  fs6.mkdirSync(path6.dirname(file), { recursive: true });
+  fs6.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 add = (rel, update) => out[mergeJson(path6.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 }));
+  if (opts.cursor || fs6.existsSync(path6.join(root, ".cursor"))) add(".cursor/mcp.json", (d) => void (servers(d, "mcpServers").truecanvas = { url }));
+  if (opts.vscode || fs6.existsSync(path6.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 d = JSON.parse(fs6.readFileSync(path6.join(root, ".mcp.json"), "utf8"));
     const url = d?.mcpServers?.truecanvas?.url;
     return typeof url === "string" && (port === void 0 || url.includes(`:${port}/`));
   } catch {
@@ -1893,64 +2018,103 @@ var Runner = class {
   cli;
   onChange;
   running = /* @__PURE__ */ new Map();
-  async open(dir) {
+  opening = /* @__PURE__ */ new Map();
+  ports = Promise.resolve();
+  /** Opens a project; concurrent calls for the same folder share one start. */
+  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);
+    if (existing && existing.status !== "failed") return Promise.resolve(existing);
+    const pending = this.opening.get(dir);
+    if (pending) return pending;
+    const job = this.start(dir).finally(() => this.opening.delete(dir));
+    this.opening.set(dir, job);
+    return job;
+  }
+  /** Two ports, picked one project at a time so parallel opens never collide. */
+  allocatePorts() {
+    const next = this.ports.then(async () => {
+      const taken = new Set([...this.running.values()].flatMap((r) => [r.editorPort, r.appPort]));
+      const editorPort = await freePort(4810, taken);
+      taken.add(editorPort);
+      return [editorPort, await freePort(3010, taken)];
+    });
+    this.ports = next.catch(() => {
+    });
+    return next;
+  }
+  async start(dir) {
+    if (!fs7.existsSync(path7.join(dir, "package.json"))) throw new Error(`${dir} isn't there anymore (or has no package.json).`);
+    const [editorPort, appPort] = await this.allocatePorts();
     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"]
+      env: toolEnv({ FORCE_COLOR: "0", TRUECANVAS_HUB: "1" }),
+      stdio: ["ignore", "pipe", "pipe"],
+      // its own process group: closing the project also stops the next dev it started
+      detached: process.platform !== "win32"
     });
-    const run2 = { path: dir, editorPort, appPort, proc, status: "starting", log: [], startedAt: Date.now() };
-    this.running.set(dir, run2);
+    const run3 = { path: dir, editorPort, appPort, proc, status: "starting", log: [], startedAt: Date.now() };
+    this.running.set(dir, run3);
     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);
+      for (const line of chunk.toString().split("\n")) if (line.trim()) run3.log.push(line.replace(/\x1b\[[0-9;]*m/g, ""));
+      if (run3.log.length > 200) run3.log.splice(0, run3.log.length - 200);
     };
     proc.stdout.on("data", capture2);
     proc.stderr.on("data", capture2);
+    proc.on("error", (err) => {
+      run3.status = "failed";
+      run3.error = err.message;
+      this.onChange();
+    });
     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}`;
+      if (this.running.get(dir) !== run3) return;
+      if (run3.status === "starting" || code) {
+        run3.status = "failed";
+        run3.error = run3.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") {
+    while (Date.now() < until && run3.status === "starting") {
       try {
-        const res = await fetch(`http://localhost:${editorPort}/api/state`, { signal: AbortSignal.timeout(1e3) });
+        const res = await fetch(`http://127.0.0.1:${editorPort}/api/state`, { signal: AbortSignal.timeout(1e3) });
         if (res.ok) {
-          run2.status = "ready";
+          run3.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.";
+    if (run3.status === "starting") {
+      run3.status = "failed";
+      run3.error = "Truecanvas didn't start within a minute.";
+      killTree(run3.proc, "SIGTERM");
     }
     this.onChange();
-    return run2;
+    return run3;
   }
+  /** Stops a project and everything it started; resolves once it has exited (or after 5s). */
   close(dir) {
-    const run2 = this.running.get(dir);
-    if (!run2) return;
+    const run3 = this.running.get(dir);
+    if (!run3) return Promise.resolve();
     this.running.delete(dir);
-    run2.proc.kill("SIGTERM");
-    setTimeout(() => run2.proc.exitCode === null && run2.proc.kill("SIGKILL"), 4e3).unref();
     this.onChange();
+    if (run3.proc.exitCode !== null || run3.proc.signalCode !== null) return Promise.resolve();
+    return new Promise((resolve) => {
+      const force = setTimeout(() => killTree(run3.proc, "SIGKILL"), 4e3);
+      const done = setTimeout(resolve, 5e3);
+      run3.proc.once("exit", () => {
+        clearTimeout(force);
+        clearTimeout(done);
+        resolve();
+      });
+      killTree(run3.proc, "SIGTERM");
+    });
   }
   closeAll() {
-    for (const dir of [...this.running.keys()]) this.close(dir);
+    return Promise.all([...this.running.keys()].map((dir) => this.close(dir))).then(() => {
+    });
   }
   /** Resident memory (MB) of each project's process tree. */
   memory() {
@@ -1966,12 +2130,21 @@ var Runner = class {
         }
         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);
+        for (const [dir, run3] of this.running) if (run3.proc.pid) outMap[dir] = Math.round(total(run3.proc.pid) / 1024);
         resolve(outMap);
       });
     });
   }
 };
+function killTree(proc, signal) {
+  try {
+    if (process.platform === "win32" && proc.pid) spawn2("taskkill", ["/pid", String(proc.pid), "/T", "/F"], { stdio: "ignore" }).on("error", () => proc.kill());
+    else if (proc.pid) process.kill(-proc.pid, signal);
+    else proc.kill(signal);
+  } catch {
+    proc.kill(signal);
+  }
+}
 var jobs = /* @__PURE__ */ new Map();
 var jobSeq = 0;
 function getJob(id) {
@@ -1979,20 +2152,21 @@ function getJob(id) {
 }
 async function install(job, cmd, args, cwd) {
   try {
-    await run(job, cmd, args, cwd);
+    await run2(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"));
+    const installed = fs7.existsSync(path7.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) {
+function run2(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 safe = shellSafe(cmd, args);
+    const p = spawn2(safe.cmd, safe.args, { cwd, env: toolEnv({ CI: "1", FORCE_COLOR: "0" }), stdio: ["ignore", "pipe", "pipe"], shell: safe.shell });
     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, ""));
+      for (const line of c2.toString().split(/\r?\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);
@@ -2014,66 +2188,70 @@ function startJob(title, work) {
   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"] };
+  const pm = detectPm(dir);
+  return { cmd: pm, add: addArgs(pm, [], true) };
+}
+async function preferredPm() {
+  const { ok } = await capture("pnpm", ["--version"], os4.homedir());
+  return ok ? "pnpm" : "npm";
 }
 function setupJob(dir, pkgDir, cli) {
-  return startJob(`Set up ${path8.basename(dir)}`, async (job) => {
+  return startJob(`Set up ${path7.basename(dir)}`, async (job) => {
     const pm = packageManager(dir);
-    const source = await packageSpec(pkgDir, (cmd, args, cwd) => run(job, cmd, args, cwd));
+    const source = await packageSpec(pkgDir, (cmd, args, cwd) => run2(job, cmd, args, cwd));
     await install(job, pm.cmd, [...pm.add, source], dir);
-    await run(job, process.execPath, [cli, "init"], dir);
+    await run2(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);
+  const parentDir = path7.resolve(parent.replace(/^~(?=$|[\\/])/, os4.homedir()));
+  const dir = path7.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);
+    if (fs7.existsSync(dir)) throw new Error(`${dir} already exists.`);
+    fs7.mkdirSync(parentDir, { recursive: true });
+    const pm = await preferredPm();
+    await run2(job, "npx", ["--yes", "create-next-app@latest", safe, "--ts", "--tailwind", "--app", "--eslint", "--no-src-dir", "--import-alias", "@/*", `--use-${pm}`, "--turbopack", "--yes"], parentDir);
+    const source = await packageSpec(pkgDir, (cmd, args, cwd) => run2(job, cmd, args, cwd));
+    await install(job, pm, addArgs(pm, [source], true), dir);
+    await run2(job, process.execPath, [cli, "init"], dir);
     return dir;
   });
 }
 function capture(cmd, args, cwd) {
   return new Promise((resolve) => {
+    const safe = shellSafe(cmd, args);
     execFile(
-      cmd,
-      args,
-      { cwd, timeout: 6e4, maxBuffer: 8 * 1024 * 1024, env: { ...process.env, GH_PROMPT_DISABLED: "1", GIT_TERMINAL_PROMPT: "0" } },
+      safe.cmd,
+      safe.args,
+      { shell: safe.shell, 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 parentDir = path7.resolve(parent.replace(/^~(?=$|[\\/])/, os4.homedir()));
   const name = repo.replace(/\.git$/, "").split(/[/:]/).pop() ?? "";
-  const dir = path8.join(parentDir, name);
+  const dir = path7.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 });
+    if (fs7.existsSync(dir)) throw new Error(`${dir} already exists. Open it with Open folder instead.`);
+    fs7.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.");
+    if (url) await run2(job, "git", ["clone", repo, dir], parentDir);
+    else await run2(job, "gh", ["repo", "clone", repo, dir], parentDir);
+    if (!fs7.existsSync(path7.join(dir, "package.json"))) throw new Error("Cloned, but there's no package.json at the root: Truecanvas needs a Next.js or Vite 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;
+      if (!fs7.existsSync(path7.join(dir, "node_modules"))) throw err;
     });
-    const pkg = JSON.parse(fs8.readFileSync(path8.join(dir, "package.json"), "utf8"));
+    const pkg = JSON.parse(fs7.readFileSync(path7.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));
+      const source = await packageSpec(pkgDir, (cmd, args, cwd) => run2(job, cmd, args, cwd));
       await install(job, pm.cmd, [...pm.add, source], dir);
-      await run(job, process.execPath, [cli, "init"], dir);
+      await run2(job, process.execPath, [cli, "init"], dir);
     } else job.log.push("Truecanvas is already part of this project.");
     return dir;
   });
@@ -2088,13 +2266,13 @@ var MIME2 = {
   ".woff2": "font/woff2",
   ".png": "image/png"
 };
-var HUB_INSTRUCTIONS = `Truecanvas hub: several projects, each a Next.js app with canvases of real React components.
+var HUB_INSTRUCTIONS = `Truecanvas hub: several projects, each a Next.js or Vite + React 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 pkgDir = path8.resolve(path8.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();
@@ -2124,28 +2302,59 @@ async function startHub(opts) {
   }
   const toolListeners = /* @__PURE__ */ new Set();
   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();
   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 drop = (dir) => {
+      const hit = upstreams.get(dir);
+      upstreams.delete(dir);
+      void hit?.client.then((c2) => c2.close()).catch(() => {
+      });
+    };
     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);
-      }
+      const run3 = runner.running.get(dir);
+      if (!run3 || run3.status !== "ready") return null;
+      const hit = upstreams.get(dir);
+      if (hit && hit.pid === run3.proc.pid) return hit.client;
+      if (hit) drop(dir);
+      const info = server2.getClientVersion();
+      const client = new Client2({ name: info?.name ?? "agent", version: info?.version ?? "0.0.0" });
+      const c2 = client.connect(new StreamableHTTPClientTransport2(new URL(`http://127.0.0.1:${run3.editorPort}/mcp`))).then(() => client);
+      c2.catch(() => upstreams.delete(dir));
+      upstreams.set(dir, { pid: run3.proc.pid, client: c2 });
       return c2;
     };
+    const withUpstream = async (dir, fn) => {
+      for (let attempt = 0; attempt < 2; attempt++) {
+        const up = upstream(dir);
+        if (!up) return null;
+        try {
+          return await fn(await up);
+        } catch (err) {
+          drop(dir);
+          const lost = /session|not connected|ECONNREFUSED|ECONNRESET|fetch failed|404/i.test(err.message ?? "");
+          if (attempt === 1 || !lost) throw err;
+        }
+      }
+      return null;
+    };
     const notify = () => void server2.sendToolListChanged().catch(() => {
     });
     toolListeners.add(notify);
-    server2.onclose = () => toolListeners.delete(notify);
+    server2.onclose = () => {
+      toolListeners.delete(notify);
+      for (const dir of [...upstreams.keys()]) drop(dir);
+    };
     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: {} } },
       {
@@ -2156,8 +2365,7 @@ async function startHub(opts) {
     ];
     server2.setRequestHandler(ListToolsRequestSchema2, async () => {
       const dir = target();
-      const up = dir ? upstream(dir) : null;
-      const projectTools = up ? (await (await up).listTools()).tools : [];
+      const projectTools = dir ? (await withUpstream(dir, (c2) => c2.listTools()).catch(() => null))?.tools ?? [] : [];
       return { tools: [...hubTools, ...projectTools] };
     });
     server2.setRequestHandler(CallToolRequestSchema2, async (req) => {
@@ -2169,32 +2377,42 @@ async function startHub(opts) {
       }
       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);
+        const p = store.all().find((x) => x.name.toLowerCase() === q || x.path.toLowerCase() === q || path8.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);
+        const run3 = await runner.open(p.path);
+        if (run3.status !== "ready") return text(`Couldn't start ${p.name}: ${run3.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);
+      const out = dir ? await withUpstream(dir, (c2) => c2.callTool(req.params, void 0, { timeout: 18e4 })) : null;
+      if (!out) return text("No project is open. Use list_projects and open_project, or open one in the Truecanvas window.", true);
+      return out;
     });
     return server2;
   }
   async function handleMcp(req, res) {
     const sessionId = req.headers["mcp-session-id"];
-    const body = req.method === "POST" ? await readJson2(req) : void 0;
+    const body = req.method === "POST" ? await readJson(req) : void 0;
     let transport = sessionId ? transports.get(sessionId) : void 0;
+    if (sessionId && transport) lastUse.set(sessionId, Date.now());
     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) });
+      const t = new StreamableHTTPServerTransport2({
+        sessionIdGenerator: () => randomUUID2(),
+        onsessioninitialized: (id) => {
+          transports.set(id, t);
+          lastUse.set(id, Date.now());
+        }
+      });
       t.onclose = () => {
-        if (t.sessionId) transports.delete(t.sessionId);
+        if (t.sessionId) {
+          transports.delete(t.sessionId);
+          lastUse.delete(t.sessionId);
+        }
       };
       await createProxy().connect(t);
       transport = t;
@@ -2203,7 +2421,7 @@ async function startHub(opts) {
   }
   async function api(req, res, url) {
     const route = `${req.method} ${url.pathname}`;
-    const body = req.method === "POST" ? await readJson2(req) : {};
+    const body = req.method === "POST" ? await readJson(req) : {};
     switch (route) {
       case "GET /api/hub/state":
         return json2(res, 200, await state());
@@ -2214,8 +2432,8 @@ async function startHub(opts) {
       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);
+        res.writeHead(200, { "content-type": ICON_MIME[path8.extname(icon)] ?? "application/octet-stream", "cache-control": "private, max-age=300" });
+        return fs8.createReadStream(icon).on("error", () => res.destroy()).pipe(res);
       }
       case "GET /api/hub/ls":
         return json2(res, 200, listDirs(url.searchParams.get("path") || "~"));
@@ -2226,19 +2444,25 @@ async function startHub(opts) {
         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." });
+        const dir = path8.resolve(body.path.replace(/^~(?=$|[\\/])/, os5.homedir()));
+        if (!fs8.existsSync(path8.join(dir, "package.json"))) return json2(res, 400, { error: "No package.json in that folder. Pick the root of a Next.js or Vite app." });
         store.touch(dir);
         broadcast();
-        return json2(res, 200, { path: dir });
+        return json2(res, 200, { path: dir, ready: store.all().find((p) => p.path === dir)?.ready ?? false });
       }
       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);
+        let run3;
+        try {
+          run3 = await runner.open(body.path);
+        } catch (err) {
+          broadcast();
+          return json2(res, 400, { error: err.message });
+        }
         broadcast();
-        return json2(res, 200, { status: run2.status, editor: `http://localhost:${run2.editorPort}`, error: run2.error });
+        return json2(res, 200, { status: run3.status, editor: `http://localhost:${run3.editorPort}`, error: run3.error });
       }
       case "POST /api/hub/close":
         runner.close(body.path);
@@ -2290,8 +2514,7 @@ async function startHub(opts) {
       }
       case "POST /api/hub/quit":
         json2(res, 200, { ok: true });
-        runner.closeAll();
-        setTimeout(() => process.exit(0), 800);
+        void runner.closeAll().finally(() => process.exit(0));
         return;
     }
     const job = /^GET \/api\/hub\/jobs\/(\d+)$/.exec(route);
@@ -2306,14 +2529,14 @@ async function startHub(opts) {
     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)) {
+    let file = path8.join(editorDir, pathname === "/" ? "hub.html" : pathname);
+    if (!inside2(editorDir, file) || !fs8.existsSync(file) || fs8.statSync(file).isDirectory()) file = path8.join(editorDir, "hub.html");
+    if (!fs8.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);
+    res.writeHead(200, { "content-type": MIME2[path8.extname(file)] ?? "application/octet-stream", "cache-control": pathname.startsWith("/assets/") ? "public, max-age=31536000, immutable" : "no-cache" });
+    fs8.createReadStream(file).on("error", () => res.destroy()).pipe(res);
   }
   const server = http2.createServer(async (req, res) => {
     try {
@@ -2326,7 +2549,7 @@ async function startHub(opts) {
       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 });
+      if (!res.headersSent) json2(res, err instanceof EditError ? 400 : 500, { error: err.message });
       else res.end();
     }
   });
@@ -2335,36 +2558,37 @@ async function startHub(opts) {
     server.listen(opts.port, "127.0.0.1", resolve);
   });
   const shutdown = () => {
-    runner.closeAll();
     server.close();
+    return runner.closeAll();
   };
-  process.on("SIGINT", () => (shutdown(), process.exit(0)));
-  process.on("SIGTERM", () => (shutdown(), process.exit(0)));
+  const exit = () => void shutdown().finally(() => process.exit(0));
+  process.once("SIGINT", exit);
+  process.once("SIGTERM", exit);
   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;
+  if (!dir || !fs8.existsSync(path8.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;
+      const file = path8.join(dir, root, name);
+      if (fs8.existsSync(file) && fs8.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 });
+      entries = fs8.readdirSync(path8.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;
+        const file = path8.join(dir, root, e.name, name);
+        if (fs8.existsSync(file)) return file;
       }
     }
   }
@@ -2374,22 +2598,15 @@ 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) : {};
+function inside2(dir, file) {
+  const rel = path8.relative(dir, file);
+  return !!rel && !rel.startsWith("..") && !path8.isAbsolute(rel);
 }
 
 // src/hub/desktop.ts
-import fs10 from "fs";
+import fs9 from "fs";
 import os6 from "os";
-import path10 from "path";
+import path9 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>
@@ -2403,15 +2620,15 @@ var ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
   <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");
+var data = () => process.env.XDG_DATA_HOME ?? path9.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 dir = path9.join(data(), "truecanvas");
+  fs9.mkdirSync(dir, { recursive: true });
+  const icon = path9.join(dir, "icon.svg");
+  fs9.writeFileSync(icon, ICON);
+  const launcher = path9.join(dir, "launch.sh");
   const url = `http://localhost:${port}`;
-  fs10.writeFileSync(
+  fs9.writeFileSync(
     launcher,
     `#!/bin/sh
 # Truecanvas launcher: start the hub if needed, then open its window.
@@ -2420,7 +2637,7 @@ 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(":"))}
+export PATH=${JSON.stringify([path9.dirname(process.execPath), ...(process.env.PATH ?? "").split(path9.delimiter)].filter((p, i, a) => p && a.indexOf(p) === i).join(path9.delimiter))}
 mkdir -p "$(dirname "$LOG")"
 
 if ! curl -sf "$URL/api/hub/state" >/dev/null 2>&1; then
@@ -2429,7 +2646,7 @@ if ! curl -sf "$URL/api/hub/state" >/dev/null 2>&1; then
   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"))}
+PROFILE=${JSON.stringify(path9.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
@@ -2439,10 +2656,10 @@ 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(
+  const apps = path9.join(data(), "applications");
+  fs9.mkdirSync(apps, { recursive: true });
+  const desktop = path9.join(apps, "truecanvas.desktop");
+  fs9.writeFileSync(
     desktop,
     `[Desktop Entry]
 Type=Application
@@ -2458,11 +2675,11 @@ 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");
+  let command = path9.join(os6.homedir(), ".local", "bin", "truecanvas");
+  const ours = !fs9.existsSync(command) || fs9.readFileSync(command, "utf8").includes("# truecanvas wrapper");
   if (ours) {
-    fs10.mkdirSync(path10.dirname(command), { recursive: true });
-    fs10.writeFileSync(command, `#!/bin/sh
+    fs9.mkdirSync(path9.dirname(command), { recursive: true });
+    fs9.writeFileSync(command, `#!/bin/sh
 # truecanvas wrapper (installed by \`truecanvas desktop\`)
 exec ${JSON.stringify(process.execPath)} ${JSON.stringify(cli)} "$@"
 `, { mode: 493 });
@@ -2470,19 +2687,19 @@ exec ${JSON.stringify(process.execPath)} ${JSON.stringify(cli)} "$@"
   return { desktop, launcher, icon, command };
 }
 function launcherPath() {
-  const p = path10.join(data(), "truecanvas", "launch.sh");
-  return fs10.existsSync(p) ? p : null;
+  const p = path9.join(data(), "truecanvas", "launch.sh");
+  return fs9.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);
+  const cmd = path9.join(os6.homedir(), ".local", "bin", "truecanvas");
+  if (fs9.existsSync(cmd) && fs9.readFileSync(cmd, "utf8").includes("# truecanvas wrapper")) {
+    fs9.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 });
+  for (const f of [path9.join(data(), "applications", "truecanvas.desktop"), path9.join(data(), "truecanvas")]) {
+    if (fs9.existsSync(f)) {
+      fs9.rmSync(f, { recursive: true, force: true });
       removed.push(f);
     }
   }
@@ -2495,8 +2712,8 @@ import { createInterface } from "readline/promises";
 
 // src/cli/doctor.ts
 import { execFile as execFile2 } from "child_process";
-import fs11 from "fs";
-import path11 from "path";
+import fs10 from "fs";
+import path10 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}`)));
@@ -2505,38 +2722,42 @@ 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)" });
+  add(major(node) >= 22 ? { label: "Node.js", status: "ok", detail: node } : { label: "Node.js", status: "fail", detail: node, fix: "Install Node.js 22 or newer (24 LTS recommended: 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" });
+    add({ label: "Project", status: "fail", detail: "no package.json here", fix: "Run truecanvas from the root of your Next.js or Vite 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" });
+  const vite = !next ? depVersion(root, "vite") : null;
+  if (vite) add(major(vite) >= 5 ? { label: "Vite", status: "ok", detail: vite } : { label: "Vite", status: "fail", detail: vite, fix: `Upgrade to Vite 5 or newer: ${pm} ${pm === "npm" ? "install -D" : "add -D"} vite@latest` });
+  else if (!next) add({ label: "Next.js or Vite", status: "fail", detail: "neither is a dependency", fix: "Truecanvas works with Next.js (App Router) and Vite + React apps. 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+)" });
+  add(react && major(react) >= 19 ? { label: "React", status: "ok", detail: react } : { label: "React", status: "fail", detail: react ?? "missing", fix: `Truecanvas needs React 19: ${pm} ${pm === "npm" ? "install" : "add"} react@latest react-dom@latest` });
   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/)" });
+  if (config.framework === "next") add(fs10.existsSync(path10.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 wrapped = configStatus(root, config.framework);
+  const configLabel = config.framework === "vite" ? "vite.config" : "next.config";
+  const uses = config.framework === "vite" ? "has the truecanvas() plugin" : "uses withTruecanvas()";
+  add(wrapped.wrapped ? { label: configLabel, status: "ok", detail: `${path10.basename(wrapped.file)} ${uses}` } : { label: configLabel, status: "fail", detail: wrapped.file ? "Truecanvas not enabled" : "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" });
+  const ignore = fs10.existsSync(path10.join(root, ".gitignore")) ? fs10.readFileSync(path10.join(root, ".gitignore"), "utf8") : "";
+  add(ignore.includes(config.routeDir) ? { label: "Generated route ignored", status: "ok" } : { label: "Generated route ignored", status: "warn", detail: `${config.routeDir}/ 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)" });
+  add(chrome ? { label: "Screenshots", status: "ok", detail: path10.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);
@@ -2550,14 +2771,14 @@ async function doctor(root, cliVersion) {
 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.
+  truecanvas           In a Next.js or Vite 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 init      Only write the config (next/vite 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
@@ -2566,8 +2787,8 @@ Usage
 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)
+  --app <url>          Your app's dev URL (default http://localhost:3000, Vite :5173)
+  --no-next            Don't start the app's dev server (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
@@ -2611,13 +2832,14 @@ async function main() {
   const yes = !!values.yes;
   if (command === "start") {
     const root2 = process.cwd();
-    if (!readPackage(root2) || !("next" in { ...readPackage(root2).dependencies, ...readPackage(root2).devDependencies })) {
+    const deps = { ...readPackage(root2)?.dependencies, ...readPackage(root2)?.devDependencies };
+    if (!("next" in deps) && !("vite" in deps && "react" in deps)) {
       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 local = path11.join(root2, "node_modules", "truecanvas", "dist", "cli.js");
+    if (fs11.existsSync(local) && fs11.realpathSync(local) !== fs11.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));
@@ -2685,6 +2907,7 @@ async function main() {
     return console.log(`${c.green("\u2713")} Truecanvas quit. Project apps it started are stopped too.`);
   }
   if (command === "desktop") {
+    if (process.platform !== "linux") return console.log(`The app launcher entry is Linux-only for now. Run ${c.accent("truecanvas open")} to open the window.`);
     if (positionals[1] === "remove") {
       const removed = uninstallDesktop();
       console.log(removed.length ? `${c.green("\u2713")} Removed the launcher.` : "Nothing to remove.");
@@ -2698,8 +2921,8 @@ async function main() {
     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).");
+  if (!fs11.existsSync(path11.join(root, "package.json"))) {
+    console.error("Run truecanvas from your app's root (no package.json here).");
     process.exit(1);
   }
   const config = loadConfig(root, { port: values.port ? Number(values.port) : void 0, appUrl: values.app });
@@ -2708,10 +2931,10 @@ async function main() {
     const report = initProject(config);
     ws.ensureRoute();
     console.log(`
-  ${c.accent("\u25C6")} ${c.bold("Truecanvas")} is set up in ${c.bold(path12.basename(root))}
+  ${c.accent("\u25C6")} ${c.bold("Truecanvas")} is set up in ${c.bold(path11.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`)}`);
+    console.log(`  ${c.green("\u2713")} Canvas folder ${c.bold(config.canvasDir)} and dev route ${c.bold(config.routeDir)}`);
     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)")}
@@ -2721,7 +2944,8 @@ async function main() {
   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);
+    const answers = (p) => fetch(`http://127.0.0.1:${config.port}${p}`).then((r) => r.ok).catch(() => false);
+    const running = await answers("/api/state") || await answers("/api/hub/state");
     if (!running) {
       ws.ensureRoute();
       await startServer(ws);
@@ -2737,7 +2961,7 @@ async function main() {
     process.exit(1);
   }
   if (command === "dev" && await openInWindow(root, config.port)) return;
-  const status = nextConfigStatus(root);
+  const status = configStatus(root, config.framework);
   if (!status.wrapped) {
     const report = initProject(config);
     for (const line of report.done) console.log(`  ${c.green("\u2713")} ${line}`);
@@ -2758,13 +2982,14 @@ async function main() {
   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);
+  const devCommand = config.framework === "vite" ? "vite" : "next dev";
+  if (!appUp && values.next && !values["no-next"]) next = startApp(root, config.appUrl, config.framework);
   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("App")}      ${config.appUrl} ${c.dim(appUp ? "(already running)" : next ? `(starting ${devCommand}\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)")}`}
@@ -2774,9 +2999,9 @@ ${hasAgentConfig(root, config.port) ? `  ${c.dim("Agents")}   connected through
     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 if (result === "exited") console.log(`  ${c.dim(`${devCommand} 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.")}
+    else console.log(`  ${c.dim(`${devCommand} is taking a while. The editor will connect when it's up.`)}
 `);
   }
   if (values.open && !values["no-open"]) openBrowser(origin);
@@ -2784,14 +3009,16 @@ ${hasAgentConfig(root, config.port) ? `  ${c.dim("Agents")}   connected through
   const stop = async () => {
     if (stopping) return;
     stopping = true;
-    next?.kill("SIGINT");
-    await shutdown();
+    const nextGone = next && next.exitCode === null ? new Promise((r) => next.once("exit", r)) : Promise.resolve();
+    if (next) stopTree(next, "SIGINT");
+    await Promise.all([shutdown(), Promise.race([nextGone, new Promise((r) => setTimeout(r, 4e3))])]);
+    if (next && next.exitCode === null) stopTree(next, "SIGKILL");
     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"}).`)}`);
+    if (!stopping) console.log(`  ${c.dim(`${devCommand} exited (${code ?? "signal"}).`)}`);
   });
 }
 async function openWindow(cli, port) {
@@ -2816,7 +3043,7 @@ async function openInWindow(root, port) {
   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})`)}.`);
+  console.log(`${c.accent("\u25C6")} Opened ${c.bold(path11.basename(root))} in the Truecanvas window ${c.dim(`(${hub})`)}.`);
   return true;
 }
 async function ask(question) {
@@ -2830,9 +3057,9 @@ async function ask(question) {
 }
 async function ensureSetup(root, pkgDir, version, yes, force = false) {
   const tc = installedIn(root);
-  const wrapped = nextConfigStatus(root).wrapped;
+  const wrapped = configStatus(root).wrapped;
   if (tc.declared && tc.installed && wrapped && !force) return true;
-  const name = readPackage(root)?.name ?? path12.basename(root);
+  const name = readPackage(root)?.name ?? path11.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.`);
@@ -2841,7 +3068,7 @@ async function ensureSetup(root, pkgDir, version, yes, force = 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(`  This adds Truecanvas to ${c.bold(name)}: a dev dependency, a plugin in ${configStatus(root).framework === "vite" ? "vite.config" : "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;
@@ -2899,17 +3126,21 @@ async function waitFor(url, ms) {
   }
   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 ");
+function startApp(root, appUrl, framework) {
+  const port = new URL(appUrl).port || (framework === "vite" ? "5173" : "3000");
+  const devArgs = framework === "vite" ? ["--port", port, "--strictPort", "--host", "127.0.0.1"] : ["dev", "-p", port, "-H", "127.0.0.1"];
+  const pkg = framework === "vite" ? "vite" : "next";
+  const bin = binScript(root, pkg);
+  const [cmd, args] = bin ? [process.execPath, [bin, ...devArgs]] : [process.platform === "win32" ? "npx.cmd" : "npx", [pkg, ...devArgs]];
+  const label = framework === "vite" ? "vite" : "next";
+  const child = spawn3(cmd, args, { cwd: root, env: toolEnv(process.env.NO_COLOR ? {} : { FORCE_COLOR: "1" }), stdio: ["ignore", "pipe", "pipe"], shell: !bin && process.platform === "win32" });
+  child.on("error", (err) => console.error(`  ${c.dim(`${label} \u2502`)} couldn't start ${pkg}: ${err.message}`));
+  const prefix = c.dim(`${label} \u2502 `);
   for (const stream of [child.stdout, child.stderr]) {
     let buf = "";
     stream.on("data", (chunk) => {
       buf += chunk.toString();
-      const lines = buf.split("\n");
+      const lines = buf.split(/\r?\n/);
       buf = lines.pop();
       for (const line of lines) if (line.trim()) process.stdout.write(`  ${prefix}${line}
 `);
@@ -2917,6 +3148,22 @@ function startNext(root, appUrl) {
   }
   return child;
 }
+function binScript(root, pkg) {
+  try {
+    const req = createRequire(path11.join(root, "package.json"));
+    const manifest = req.resolve(`${pkg}/package.json`);
+    const { bin } = JSON.parse(fs11.readFileSync(manifest, "utf8"));
+    const rel = typeof bin === "string" ? bin : bin?.[pkg];
+    return rel ? path11.join(path11.dirname(manifest), rel) : null;
+  } catch {
+    return null;
+  }
+}
+function stopTree(child, signal) {
+  if (process.platform === "win32" && child.pid) spawn3("taskkill", ["/pid", String(child.pid), "/T", "/F"], { stdio: "ignore" }).on("error", () => {
+  });
+  else child.kill(signal);
+}
 function openBrowser(url) {
   const cmd = process.platform === "darwin" ? "open" : process.platform === "win32" ? "start" : "xdg-open";
   try {