twombly 0.1.0 → 0.2.0

package/dist/cli.js

@@ -3,9 +3,9 @@
 // src/cli.ts
 import { spawn as spawn2 } from "node:child_process";
 import { randomBytes as randomBytes2 } from "node:crypto";
-import { copyFile, mkdir as mkdir6, mkdtemp, rm as rm4, stat as stat5, writeFile as writeFile6 } from "node:fs/promises";
+import { copyFile, mkdir as mkdir7, mkdtemp, readFile as readFile7, rm as rm5, stat as stat5, writeFile as writeFile7 } from "node:fs/promises";
 import { tmpdir } from "node:os";
-import { basename as basename2, extname as extname3, join as join8, resolve as resolve2 } from "node:path";
+import { basename as basename2, extname as extname3, join as join9, resolve as resolve2 } from "node:path";
 import { fileURLToPath as fileURLToPath2 } from "node:url";
 
 // ../protocol/src/gates.ts
@@ -17,7 +17,9 @@ var LIMITS = {
   scanBytes: 8 * 1024 * 1024,
   titleChars: 120,
   nameChars: 120,
-  commentChars: 5e3
+  commentChars: 5e3,
+  strokePoints: 3e3,
+  canvasStrokes: 2e3
 };
 var STATIC_FIX = "Frames are static front-end files only. Delete it from the folder; if the design needs what it provided, use mock data.";
 var FORBIDDEN = [
@@ -231,8 +233,18 @@ var FRAME_ONLY_MESSAGE = "This frame only opens inside a canvas.";
 
 // ../protocol/src/index.ts
 var FIDELITY_LEVELS = ["build", "component", "capture", "image"];
+function cleanStroke(input) {
+  const s = input;
+  if (!s || typeof s !== "object" || typeof s.id !== "string" || !/^[a-z0-9]{8,32}$/.test(s.id)) return null;
+  if (typeof s.color !== "string" || !/^#[0-9a-f]{6}$/i.test(s.color)) return null;
+  if (typeof s.size !== "number" || !Number.isFinite(s.size) || s.size <= 0 || s.size > 2e3) return null;
+  if (!Array.isArray(s.points) || !s.points.length || s.points.length > LIMITS.strokePoints) return null;
+  if (!s.points.every((p) => Array.isArray(p) && p.length === 3 && p.every((n) => typeof n === "number" && Number.isFinite(n)))) return null;
+  return { id: s.id, frameId: typeof s.frameId === "string" && FRAME_ID.test(s.frameId) ? s.frameId : null, points: s.points, color: s.color, size: s.size };
+}
 var WORKING_MS = 3 * 6e4;
 var WORKING_TAIL_MS = 3e4;
+var FRAME_ID = /^[a-km-z2-9]{8,32}$/;
 var FRAME_GAP = 80;
 function nextPosition(frames, newRow = false) {
   if (!frames.length) return { x: 0, y: 0 };
@@ -243,7 +255,7 @@ function nextPosition(frames, newRow = false) {
 }
 
 // ../../skills/twombly/SKILL.md
-var SKILL_default = "---\nname: twombly\ndescription: Lay out design explorations on a shared canvas. Use when asked to \"put this on Twombly\", \"put these on a canvas\", \"lay out these versions\", \"show me all the variations side by side\", or to share explorations with real-time cursors and comments. Works with any framework in any repo.\n---\n\n# Twombly\n\nTwombly shows design work as live frames on an infinite canvas. You build each version, turn it into a folder of static files, and add it. The canvas opens on `localhost`; `init` returns its address. Nothing is online until the person clicks Share. After that the local canvas and the link are one state: everything you add, update or move appears for everyone straight away.\n\nRun commands with `twombly <command>`, or `npx -y twombly <command>` if it isn't installed. Output is JSON.\n\n## The rule that decides everything\n\n**A frame is a folder of static files that runs with no server and no network.** It can use anything in its own folder and nothing else. The browser enforces this: outside requests, form posts and server code all fail, locally and once shared.\n\nThe person's repo may have a database, an API, auth and environment keys. None of that goes in a frame. Your job is to adapt the design so it works without them:\n\n- **Data and APIs:** replace with realistic mock data, written inline or as JSON in the folder.\n- **Auth and providers:** skip login, and mount the design with mock providers and a fake signed-in user.\n- **Environment values:** never include them. Build with none set. Don't copy `.env` files. If the build needs a value to compile, use an obviously fake one.\n- **Analytics and widgets:** remove tag managers, analytics, chat widgets and similar scripts, including any in page templates such as `app.html` or `_document`.\n- **Real customer data:** never copy it from a database, fixture or log. Invent names, emails and numbers. The gates can't detect this, so it's on you. Links are public.\n- **Fonts and images:** copy the files into the folder with relative or root paths. For a hosted font such as Google Fonts, download the files and use `@font-face`. If a font is licensed, tell the person it will be publicly hosted. Leave out images the design doesn't show: a frame is limited to 100 MB.\n- **One screen of a routed app:** a router reads the page's address, which won't match the screen you want. Write a small entry file that mounts that screen with a memory or hash router, instead of trying to reach its route.\n\n## Steps\n\n1. **Start the canvas.** From the project root: `twombly init --name \"Notification Explorations\" --no-open`. Pick a short, specific name. Run it once per canvas. The result's `local` field is the canvas's address.\n2. **Open it beside the chat.** The person should see the canvas next to this conversation, in the app they're already using. Open the `local` address in that app's built-in browser: the Claude desktop app's browser pane, the ChatGPT app's in-app browser, or the built-in browser in Cursor, VS Code or any other editor. Only if the app has none, run `twombly open`, which uses their default browser.\n3. **Build each version** as its own static folder, keeping work under `.twombly/work/<version>` so the person's source stays clean. Use the first approach below that works. Run `twombly working` before each build: the canvas background moves for three minutes so people can see you're at work, and running it again extends that.\n4. **Add it:** `twombly add <folder> --title \"V1 Compact\" --width 1280 --height 800 --level build`, saying which level below it is. Use the design's real size, such as `--width 390 --height 844` for a phone. Use `--height auto` to fit a tall page.\n5. **Read the output.** If `ok` is false, fix every item in `problems` and run `add` again. Each one includes a `fix`. The frame isn't placed until it passes.\n6. **Look at it.** The result has a `screenshot` path. Open it and check the frame shows the design you meant, with the content in the right state. The gates can't tell if a page came out unstyled or on the wrong screen; a common miss is Tailwind classes that were never generated.\n7. **Finish:** run `twombly done` so the background goes still, then tell the person the canvas is open. They click Share when they're ready. The first time, Google sign-in opens in their regular browser, and sharing continues on its own once they finish.\n\n## Choosing how to build a frame\n\nUse the first one that fits. Say so if you end up lower than the first, because the frame is less faithful. **If the app has server routes, auth or a database, skip straight to `component`**: a static export of that kind of app rarely works and isn't worth the attempt.\n\n1. `--level build`: **a real static build.** Vite: `vite build --base ./ --outDir .twombly/work/v1`. Next.js: `output: 'export'` in a temporary config (static export can't use server features). SvelteKit: `adapter-static` with a `fallback`, `ssr = false` in the root layout, and any server `load` swapped for mock data in a universal `+layout.ts`. Astro: `astro build`. Plain HTML: use the folder as is. To show one state of a bigger app, add a build entry that renders just that screen.\n2. `--level component`: **the component on its own.** Write a tiny entry file that imports the real component with mock props, and bundle it with Vite or esbuild into a folder. This is the usual answer when the app needs a backend. It keeps the real code and styles.\n3. `--level capture`: **freeze what's on screen.** With the app already running: `twombly capture http://localhost:3000/page --out .twombly/work/v1 --width 1280 --height 800`, then add that folder. It looks right but no longer responds, because scripts are removed.\n4. `--level image`: **a picture**, as a last resort. `twombly capture <url> --out <folder> --image`, or `twombly add shot.png --title \"V1\"`.\n\nSeveral versions can share one build: read the variant from `location.search` and pass `--entry \"index.html?variant=2\"`. Shared files are only uploaded once.\n\n### Example: the component level with Vite\n\nFor most projects, this is all it takes. It works the same for React, Svelte or Vue with that framework's Vite plugin. Keep it under `.twombly/work`.\n\n```js\n// .twombly/work/vite.config.mjs\nimport { defineConfig } from 'vite';\nimport { resolve } from 'node:path';\nimport react from '@vitejs/plugin-react';\n\nconst root = resolve(import.meta.dirname, '../..');\nexport default defineConfig({\n  root: import.meta.dirname,\n  base: './',\n  plugins: [react()],\n  resolve: { alias: { '@': root } }, // match the project's path aliases\n  define: { 'process.env': {} },\n  build: { outDir: 'out', emptyOutDir: true, sourcemap: false },\n});\n```\n\n```html\n<!-- .twombly/work/index.html -->\n<!doctype html><html><body><div id=\"root\"></div><script type=\"module\" src=\"./main.jsx\"></script></body></html>\n```\n\n```jsx\n// .twombly/work/main.jsx: the real component, the real styles, invented data.\nimport { createRoot } from 'react-dom/client';\nimport '@/styles/globals.css';\nimport { Composer } from '@/components/composer';\n\nconst variant = new URLSearchParams(location.search).get('variant');\ncreateRoot(document.getElementById('root')).render(<Composer variant={variant} onSend={() => {}} messages={MOCK_MESSAGES} />);\n```\n\nThen: `npx vite build --config .twombly/work/vite.config.mjs` and `twombly add .twombly/work/out --title \"A\" --entry \"index.html?variant=a\" --level component`. If the project uses Tailwind, add its Vite or PostCSS plugin to the config so the classes are generated.\n\n## Commands\n\n```sh\ntwombly init [--name \"Name\"] [--no-open]   # create or reopen this project's canvas\ntwombly add <folder|file> --title \"T\" [--width 1280] [--height 800|auto] [--entry index.html] [--level build] [--new-row] [--x N --y N]\ntwombly update <frame> <folder|file> [--title \"T\"] [--width N] [--height N|auto] [--entry path] [--level build]\ntwombly check <folder> [--entry index.html] [--width 1280] [--height 800]   # run the gates without adding\ntwombly list                               # frames, positions and the live link\ntwombly move <frame> --x N --y N\ntwombly resize <frame> --width N --height N\ntwombly retitle <frame> \"New title\"\ntwombly remove <frame>\ntwombly arrange [--columns N]              # tidy into a grid\ntwombly rename \"Canvas name\"\ntwombly capture <url> --out <folder> [--width N] [--height N] [--image] [--selector css]\ntwombly working                            # show on the canvas that you're at work, for three minutes\ntwombly done                               # you've finished: the canvas goes still\ntwombly open                               # open the canvas in the default browser\ntwombly status                             # sign-in and canvas state\n```\n\n`<frame>` is a frame's id or its exact title. Frames fill in left to right; use `--new-row` to start a new group, for example one row per direction.\n\nUse `update` to change a version. Don't remove and re-add it, because that loses its comments. Each frame keeps its own copy of its files, so if several frames came from one build, `update` each one.\n\n## Sharing\n\nThe person shares by clicking Share. Only run `twombly share` if they explicitly ask you to, because it publishes the canvas to a public link. If they ask you to take it down, run `twombly unshare`. That deletes the link and its comments and leaves the local canvas.\n\nOnce it's shared, every `add`, `update`, `move` and `remove` goes live immediately. Check your work with `twombly check` before updating a canvas people are looking at.\n";
+var SKILL_default = "---\nname: twombly\ndescription: Lay out design explorations on a shared canvas. Use when asked to \"put this on Twombly\", \"put these on a canvas\", \"lay out these versions\", \"show me all the variations side by side\", or to share explorations with real-time cursors and comments. Works with any framework in any repo.\n---\n\n# Twombly\n\nTwombly shows design work as live frames on an infinite canvas. You build each version, turn it into a folder of static files, and add it. The canvas opens on `localhost`; `init` returns its address. Nothing is online until the person clicks Share. After that the local canvas and the link are one state: everything you add, update or move appears for everyone straight away.\n\nRun every command as `npx -y twombly@latest <command>`; this guide shortens that to `twombly <command>`. Output is JSON.\n\n## The rule that decides everything\n\n**A frame is a folder of static files that runs with no server and no network.** It can use anything in its own folder and nothing else. The browser enforces this: outside requests, form posts and server code all fail, locally and once shared.\n\nThe person's repo may have a database, an API, auth and environment keys. None of that goes in a frame. Your job is to adapt the design so it works without them:\n\n- **Data and APIs:** replace with realistic mock data, written inline or as JSON in the folder. For public CMS content, save a snapshot as JSON when you build.\n- **Auth and providers:** skip login, and mount the design with mock providers and a fake signed-in user.\n- **Environment values:** never include them. Build with none set. Don't copy `.env` files. If the build needs a value to compile, use an obviously fake one. **Never run or read a secret manager such as Infisical or Doppler for this, even if the project is set up for it.** If you can't get what you need without one, ask the person.\n- **Analytics and widgets:** remove tag managers, analytics, chat widgets and similar scripts, including any in page templates such as `app.html` or `_document`.\n- **Real customer data:** never copy it from a database, fixture or log. Invent names, emails and numbers. The gates can't detect this, so it's on you. Links are public.\n- **Fonts, images and video:** copy the files into the folder with relative or root paths. For a hosted font such as Google Fonts, download the files and use `@font-face`; Google only serves `woff2` to a browser user agent. If a font is licensed, tell the person it will be publicly hosted. Add up media sizes before downloading, take only what the design shows, and compress video.\n- **One screen of a routed app:** a router reads the page's address, which won't match the screen you want. Write a small entry file that mounts that screen with a memory or hash router, instead of trying to reach its route.\n\n## Limits\n\n100 MB per frame, 25 MB per file, 5000 files per frame, 200 frames per canvas. A URL can't be added, not even `localhost`: build it or `capture` it. Refused files: `.env`, credentials, keys, databases, source maps, server code, `node_modules` and project files such as `package.json`. Pop-ups, camera and microphone are off.\n\n## Steps\n\n1. **Start the canvas.** From the project root, or in a monorepo from the app's own folder so `.twombly/work` can find its packages: `twombly init --name \"Notification Explorations\" --no-open`. Pick a short, specific name. Run it once per canvas. The result's `local` field is the canvas's address.\n2. **Open it beside the chat.** The person should see the canvas next to this conversation, in the app they're already using. Open the `local` address in that app's built-in browser: the Claude desktop app's browser pane, the ChatGPT app's in-app browser, or the built-in browser in Cursor, VS Code or any other editor. Only if the app has none, run `twombly open`, which uses their default browser.\n3. **Build each version** as its own static folder, keeping work under `.twombly/work/<version>` so the person's source stays clean. Use the first approach below that works. The canvas background moves so people can see you're at work: `init` and the slow commands keep it going for three minutes. Run `twombly working` only before a longer gap.\n4. **Add it:** `twombly add <folder> --title \"V1 Compact\" --width 1280 --height 800 --level build`, saying which level below it is. Use the design's real size, such as `--width 390 --height 844` for a phone. Use `--height auto` to fit a tall page.\n5. **Read the output.** If `ok` is false, fix every item in `problems` and run `add` again. Each one includes a `fix`. The frame isn't placed until it passes.\n6. **Look at it.** The result has a `screenshot` path. Open it and check the frame shows the design you meant, with the content in the right state. The gates can't tell if a page came out unstyled or on the wrong screen; a common miss is Tailwind classes that were never generated. Tailwind 4 skips gitignored folders, so source copied into `.twombly` needs an `@source`.\n7. **Test interactions, if they matter.** Open the `url` from `twombly preview <frame>` in your browser tool and use the page inside its iframe. On the canvas, a frame ignores clicks until it's double-clicked, and frame URLs refuse to open on their own. Tell the person what you didn't test.\n8. **Finish:** run `twombly done` so the background goes still, then tell the person the canvas is open. They click Share when they're ready. The first time, Google sign-in opens in their regular browser, and sharing continues on its own once they finish.\n\n## Choosing how to build a frame\n\nUse the first one that fits. Say so if you end up lower than the first, because the frame is less faithful. **If the app has server routes, auth or a database, skip straight to `component`**: a static export of that kind of app rarely works and isn't worth the attempt.\n\n1. `--level build`: **a real static build.** Vite: `vite build --base ./ --outDir .twombly/work/v1`. Next.js: `output: 'export'` in a temporary config (static export can't use server features). SvelteKit: `adapter-static` with a `fallback`, `ssr = false` in the root layout, and any server `load` swapped for mock data in a universal `+layout.ts`. Astro: `astro build`. Plain HTML: use the folder as is. To show one state of a bigger app, add a build entry that renders just that screen.\n2. `--level component`: **the component on its own.** Write a tiny entry file that imports the real component with mock props, and bundle it with Vite or esbuild into a folder. This is the usual answer when the app needs a backend. It keeps the real code and styles.\n3. `--level capture`: **freeze what's on screen.** With the app already running: `twombly capture http://localhost:3000/page --out .twombly/work/v1 --width 1280 --height 800`, then add that folder. It looks right but no longer responds, because scripts are removed.\n4. `--level image`: **a picture**, as a last resort. `twombly capture <url> --out <folder> --image`, or `twombly add shot.png --title \"V1\"`.\n\nSeveral versions can share one build: read the variant from `location.search` and pass `--entry \"index.html?variant=2\"`. Shared files are only uploaded once.\n\nAdd several frames in one command, which is faster, instead of writing a loop. Nothing is placed unless all of them pass. Each item takes `folder`, `title`, `entry`, `width`, `height`, `level`, `newRow`, `x` and `y`, and flags on the command apply to all:\n\n```sh\ntwombly add out --width 1280 --height 800 --level component --frames '[{\"title\":\"A\",\"entry\":\"index.html?variant=a\"},{\"title\":\"B\",\"entry\":\"index.html?variant=b\"}]'\n```\n\n### Example: the component level with Vite\n\nFor most projects, this is all it takes. It works the same for React, Svelte or Vue with that framework's Vite plugin. Keep it under `.twombly/work`.\n\n```js\n// .twombly/work/vite.config.mjs\nimport { defineConfig } from 'vite';\nimport { resolve } from 'node:path';\nimport react from '@vitejs/plugin-react';\n\nconst root = resolve(import.meta.dirname, '../..');\nexport default defineConfig({\n  root: import.meta.dirname,\n  base: './',\n  plugins: [react()],\n  resolve: { alias: { '@': root } }, // match the project's path aliases\n  define: { 'process.env': {} },\n  build: { outDir: 'out', emptyOutDir: true, sourcemap: false },\n});\n```\n\n```html\n<!-- .twombly/work/index.html -->\n<!doctype html><html><body><div id=\"root\"></div><script type=\"module\" src=\"./main.jsx\"></script></body></html>\n```\n\n```jsx\n// .twombly/work/main.jsx: the real component, the real styles, invented data.\nimport { createRoot } from 'react-dom/client';\nimport '@/styles/globals.css';\nimport { Composer } from '@/components/composer';\n\nconst variant = new URLSearchParams(location.search).get('variant');\ncreateRoot(document.getElementById('root')).render(<Composer variant={variant} onSend={() => {}} messages={MOCK_MESSAGES} />);\n```\n\nThen: `npx vite build --config .twombly/work/vite.config.mjs` and `twombly add .twombly/work/out --title \"A\" --entry \"index.html?variant=a\" --level component`. If the project uses Tailwind, add its Vite or PostCSS plugin to the config so the classes are generated.\n\n## Commands\n\n`twombly help` lists every command and flag. `<frame>` is a frame's id or its exact title. Frames fill in left to right; use `--new-row` to start a new group, for example one row per direction.\n\nUse `update` to change a version. Don't remove and re-add it, because that loses its comments. It keeps the frame's entry and size unless you change them. Each frame keeps its own copy of its files, so after rebuilding, update the set together: `twombly update out --frames '[{\"frame\":\"A\"},{\"frame\":\"B\"}]'`. Nothing changes unless all of them pass.\n\n## Sharing\n\nThe person shares by clicking Share. Only run `twombly share` if they explicitly ask you to, because it publishes the canvas to a public link. If they ask you to take it down, run `twombly unshare`. That deletes the link and its comments and leaves the local canvas.\n\nOnce it's shared, every `add`, `update`, `move` and `remove` goes live immediately. Check your work with `twombly check` before updating a canvas people are looking at.\n";
 
 // src/capture.ts
 import { createHash } from "node:crypto";
@@ -284,10 +296,10 @@ async function capture(url, out, options) {
       await writeFile(join(out, "index.html"), `<!doctype html><meta charset="utf-8"><style>html,body{margin:0;background:#fff}img{display:block;max-width:100%;height:auto}</style><img src="assets/capture.png" alt="">`);
       return { folder: out, assets: 1, failed: [] };
     }
-    const saved = /* @__PURE__ */ new Map(), failed = [];
+    const saved2 = /* @__PURE__ */ new Map(), failed = [];
     const save = async (assetUrl) => {
       if (assetUrl.startsWith("data:") || assetUrl.startsWith("blob:")) return null;
-      if (saved.has(assetUrl)) return saved.get(assetUrl);
+      if (saved2.has(assetUrl)) return saved2.get(assetUrl);
       try {
         const response = await context.request.get(assetUrl, { timeout: 2e4 });
         if (!response.ok()) throw new Error(String(response.status()));
@@ -295,7 +307,7 @@ async function capture(url, out, options) {
         let bytes = await response.body();
         const hash = createHash("sha256").update(assetUrl).digest("hex").slice(0, 16);
         const name = `assets/${hash}${EXT[type] || extname(new URL(assetUrl).pathname) || ""}`;
-        saved.set(assetUrl, name);
+        saved2.set(assetUrl, name);
         if (type === "text/css") bytes = Buffer.from(await rewriteCss(bytes.toString("utf8"), assetUrl, "css"));
         await writeFile(join(out, name), bytes);
         return name;
@@ -388,7 +400,7 @@ async function capture(url, out, options) {
       return "<!doctype html>\n" + document.documentElement.outerHTML;
     }, { replacements, styles, inline });
     await writeFile(join(out, "index.html"), html);
-    return { folder: out, assets: saved.size, failed };
+    return { folder: out, assets: saved2.size, failed };
   } finally {
     await browser.close().catch(() => {
     });
@@ -400,8 +412,7 @@ import { createHash as createHash3, randomBytes } from "node:crypto";
 import { createReadStream as createReadStream2 } from "node:fs";
 import { readFile as readFile5, stat as stat3 } from "node:fs/promises";
 import { createServer as createServer2 } from "node:http";
-import { dirname as dirname2, extname as extname2, join as join7 } from "node:path";
-import { fileURLToPath } from "node:url";
+import { extname as extname2, join as join8 } from "node:path";
 import { WebSocketServer, WebSocket } from "ws";
 
 // src/credentials.ts
@@ -545,36 +556,125 @@ async function startFrameServer(folder, poster) {
   } };
 }
 
+// src/interface.ts
+import { createPublicKey, verify } from "node:crypto";
+import { mkdir as mkdir3, readdir, rename, rm as rm3, writeFile as writeFile3 } from "node:fs/promises";
+import { dirname, join as join5 } from "node:path";
+import { fileURLToPath } from "node:url";
+
+// src/release.ts
+var INTERFACE_VERSION = 1;
+var INTERFACE_PUBLIC_KEY = "MCowBQYDK2VwAyEA2/JCcP+q2Ht/fjTqlMvBzwrUS07UAXNp1z6bqY0hG9U=";
+
+// src/interface.ts
+var OVERRIDE = process.env.TWOMBLY_UI;
+var UPDATES = !OVERRIDE && process.env.TWOMBLY_NO_INTERFACE_UPDATES !== "1";
+var BUNDLED = join5(dirname(fileURLToPath(import.meta.url)), "ui");
+var STORE = join5(HOME, "interface", String(INTERFACE_VERSION));
+var PUBLIC_KEY = createPublicKey({ key: Buffer.from(process.env.TWOMBLY_INTERFACE_KEY || INTERFACE_PUBLIC_KEY, "base64"), format: "der", type: "spki" });
+var KEEP = 3;
+var CHECK_MS = 36e5;
+var CHECK_ON_OPEN_MS = 5 * 6e4;
+var WAIT_ON_OPEN_MS = 600;
+var DOWNLOAD_MS = 3e4;
+var MAX_CHARS = 64 * 1024 * 1024;
+var SAFE_PATH = /^[\w.@-]+(\/[\w.@-]+)*$/;
+var saved = [];
+var etag = "";
+var checking = null;
+var checkedAt = 0;
+function interfaceFolders() {
+  if (OVERRIDE) return [OVERRIDE];
+  const folder = (released) => join5(STORE, String(released));
+  return [...saved.filter((released) => released > 1793896544071).map(folder), BUNDLED, ...saved.filter((released) => released <= 1793896544071).map(folder)];
+}
+function unpack(body) {
+  const { payload, signature } = JSON.parse(body);
+  if (typeof payload !== "string" || typeof signature !== "string") return null;
+  if (!verify(null, Buffer.from(payload), PUBLIC_KEY, Buffer.from(signature, "base64"))) return null;
+  const release = JSON.parse(payload);
+  if (release.interface !== INTERFACE_VERSION || !Number.isSafeInteger(release.released) || !release.files?.["index.html"]) return null;
+  const safe = Object.entries(release.files).every(([path, bytes]) => SAFE_PATH.test(path) && !path.split("/").includes("..") && typeof bytes === "string");
+  return safe ? release : null;
+}
+async function install(released, files) {
+  const temporary = join5(STORE, `.${released}-${process.pid}`);
+  try {
+    for (const [path, bytes] of Object.entries(files)) {
+      await mkdir3(dirname(join5(temporary, path)), { recursive: true });
+      await writeFile3(join5(temporary, path), Buffer.from(bytes, "base64"));
+    }
+    await rename(temporary, join5(STORE, String(released)));
+  } catch (error) {
+    await rm3(temporary, { recursive: true, force: true });
+    throw error;
+  }
+  saved = [released, ...saved].sort((a, b) => b - a);
+  for (const old of saved.splice(KEEP)) await rm3(join5(STORE, String(old)), { recursive: true, force: true });
+}
+async function check() {
+  const response = await fetch(`${ENDPOINT}/interface/${INTERFACE_VERSION}`, { headers: etag ? { "if-none-match": etag } : {}, signal: AbortSignal.timeout(DOWNLOAD_MS) });
+  if (response.status !== 200) return;
+  const body = await response.text();
+  if (body.length > MAX_CHARS) return;
+  const release = unpack(body);
+  if (!release) return;
+  etag = response.headers.get("etag") || "";
+  if (release.released > Math.max(saved[0] ?? 0, 1793896544071)) await install(release.released, release.files);
+}
+function startCheck() {
+  if (checking) return;
+  checkedAt = Date.now();
+  checking = check().catch(() => {
+  }).finally(() => {
+    checking = null;
+  });
+}
+async function freshInterface() {
+  if (!UPDATES) return;
+  if (Date.now() - checkedAt > CHECK_ON_OPEN_MS) startCheck();
+  if (checking) await Promise.race([checking, new Promise((done) => setTimeout(done, WAIT_ON_OPEN_MS))]);
+}
+async function startInterfaceUpdates() {
+  if (!UPDATES) return;
+  await mkdir3(STORE, { recursive: true });
+  const names = await readdir(STORE);
+  for (const name of names) if (name.startsWith(".")) await rm3(join5(STORE, name), { recursive: true, force: true });
+  saved = names.filter((name) => /^\d+$/.test(name)).map(Number).sort((a, b) => b - a);
+  startCheck();
+  setInterval(startCheck, CHECK_MS).unref();
+}
+
 // src/project.ts
 import { createHash as createHash2 } from "node:crypto";
-import { cp, mkdir as mkdir3, readdir, readFile as readFile3, rename, rm as rm3, stat as stat2, writeFile as writeFile3 } from "node:fs/promises";
-import { basename, dirname, join as join5, relative, resolve, sep } from "node:path";
+import { cp, mkdir as mkdir4, readdir as readdir2, readFile as readFile3, rename as rename2, rm as rm4, stat as stat2, writeFile as writeFile4 } from "node:fs/promises";
+import { basename, dirname as dirname2, join as join6, relative, resolve, sep } from "node:path";
 var DIR = ".twombly";
 var exists = (path) => stat2(path).then(() => true, () => false);
 async function findProject(from) {
   let dir = resolve(from);
   while (true) {
-    if (await exists(join5(dir, DIR, "canvas.json"))) return dir;
-    const up = dirname(dir);
+    if (await exists(join6(dir, DIR, "canvas.json"))) return dir;
+    const up = dirname2(dir);
     if (up === dir) return null;
     dir = up;
   }
 }
-var canvasFile = (project) => join5(project, DIR, "canvas.json");
-var frameDir = (project, id) => join5(project, DIR, "frames", id);
-var posterFile = (project, id) => join5(project, DIR, "posters", `${id}.png`);
+var canvasFile = (project) => join6(project, DIR, "canvas.json");
+var frameDir = (project, id) => join6(project, DIR, "frames", id);
+var posterFile = (project, id) => join6(project, DIR, "posters", `${id}.png`);
 async function readCanvas(project) {
   return JSON.parse(await readFile3(canvasFile(project), "utf8"));
 }
 async function writeCanvas(project, canvas) {
   const path = canvasFile(project), temp = `${path}.${process.pid}.tmp`;
-  await writeFile3(temp, JSON.stringify(canvas, null, 2) + "\n");
-  await rename(temp, path);
+  await writeFile4(temp, JSON.stringify(canvas, null, 2) + "\n");
+  await rename2(temp, path);
 }
 async function ensureProjectDir(project) {
-  await mkdir3(join5(project, DIR, "frames"), { recursive: true });
-  await mkdir3(join5(project, DIR, "posters"), { recursive: true });
-  await writeFile3(join5(project, DIR, ".gitignore"), "*\n");
+  await mkdir4(join6(project, DIR, "frames"), { recursive: true });
+  await mkdir4(join6(project, DIR, "posters"), { recursive: true });
+  await writeFile4(join6(project, DIR, ".gitignore"), "*\n");
 }
 function defaultName(project) {
   return basename(project).replace(/[-_]+/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()) || "Untitled";
@@ -582,8 +682,8 @@ function defaultName(project) {
 async function hashFolder(folder) {
   const out = [];
   const walk = async (dir) => {
-    for (const entry of await readdir(dir, { withFileTypes: true })) {
-      const absolute = join5(dir, entry.name);
+    for (const entry of await readdir2(dir, { withFileTypes: true })) {
+      const absolute = join6(dir, entry.name);
       if (entry.isDirectory()) await walk(absolute);
       else if (entry.isFile()) {
         if (entry.name === ".DS_Store") continue;
@@ -601,13 +701,13 @@ async function folderContent(folder) {
 }
 async function replaceFolder(source, target) {
   const temp = `${target}.${process.pid}.tmp`;
-  await rm3(temp, { recursive: true, force: true });
-  await mkdir3(dirname(target), { recursive: true });
+  await rm4(temp, { recursive: true, force: true });
+  await mkdir4(dirname2(target), { recursive: true });
   await cp(source, temp, { recursive: true, verbatimSymlinks: false, filter: (path) => basename(path) !== ".DS_Store" });
-  await rm3(target, { recursive: true, force: true });
-  await rename(temp, target);
+  await rm4(target, { recursive: true, force: true });
+  await rename2(temp, target);
 }
-var registryFile = join5(HOME, "registry.json");
+var registryFile = join6(HOME, "registry.json");
 async function readRegistry() {
   try {
     return JSON.parse(await readFile3(registryFile, "utf8"));
@@ -619,27 +719,26 @@ async function register(id, project) {
   const registry = await readRegistry();
   if (registry[id] === project) return;
   registry[id] = project;
-  await mkdir3(HOME, { recursive: true });
-  await writeFile3(registryFile, JSON.stringify(registry, null, 2));
+  await mkdir4(HOME, { recursive: true });
+  await writeFile4(registryFile, JSON.stringify(registry, null, 2));
 }
 
 // src/settings.ts
-import { mkdir as mkdir4, readFile as readFile4, rename as rename2, writeFile as writeFile4 } from "node:fs/promises";
-import { join as join6 } from "node:path";
-var FILE = join6(HOME, "settings.json");
+import { mkdir as mkdir5, readFile as readFile4, rename as rename3, writeFile as writeFile5 } from "node:fs/promises";
+import { join as join7 } from "node:path";
+var FILE = join7(HOME, "settings.json");
 async function readSettings() {
-  const saved = await readFile4(FILE, "utf8").then(JSON.parse).catch(() => null);
-  return { invertScroll: saved?.invertScroll === true };
+  const saved2 = await readFile4(FILE, "utf8").then(JSON.parse).catch(() => null);
+  return { invertScroll: saved2?.invertScroll === true };
 }
 async function writeSettings(settings2) {
-  await mkdir4(HOME, { recursive: true });
+  await mkdir5(HOME, { recursive: true });
   const temporary = `${FILE}.${process.pid}`;
-  await writeFile4(temporary, JSON.stringify(settings2));
-  await rename2(temporary, FILE);
+  await writeFile5(temporary, JSON.stringify(settings2));
+  await rename3(temporary, FILE);
 }
 
 // src/daemon.ts
-var UI = process.env.TWOMBLY_UI || join7(dirname2(fileURLToPath(import.meta.url)), "ui");
 var IDLE_MS = 6 * 36e5;
 var LOGIN_MS = 10 * 6e4;
 var ID_ALPHABET = "abcdefghijkmnpqrstuvwxyz23456789";
@@ -682,6 +781,7 @@ async function edge(path, init = {}) {
   if (!response.ok) throw new Failure(response.status, data.error || `The server answered ${response.status}`, data.problems ? { problems: data.problems } : void 0);
   return data;
 }
+var STROKE_UPLOAD = 40;
 var Canvas = class {
   id;
   project;
@@ -782,7 +882,7 @@ var Canvas = class {
       t: "hello",
       self,
       role: "owner",
-      doc: { id: this.id, name: this.data.name, frames },
+      doc: { id: this.id, name: this.data.name, frames, strokes: this.data.strokes ?? [] },
       threads: [],
       peers: [this.peer(self)],
       capabilities: { comments: false, huddle: false },
@@ -815,6 +915,22 @@ var Canvas = class {
       this.save();
       return;
     }
+    if (m.t === "stroke.add") {
+      const strokes = this.data.strokes ??= [];
+      const clean = cleanStroke(m.stroke);
+      if (!clean || strokes.length >= LIMITS.canvasStrokes && !strokes.some((item) => item.id === clean.id)) return this.broadcast({ t: "stroke.remove", id: String(m.stroke?.id) });
+      const stroke = { ...clean, authorId: "local", createdAt: Date.now() };
+      this.data.strokes = [...strokes.filter((item) => item.id !== stroke.id), stroke];
+      this.broadcast({ t: "strokes", strokes: [stroke] });
+      this.save();
+      return;
+    }
+    if (m.t === "stroke.remove") {
+      this.data.strokes = (this.data.strokes ?? []).filter((item) => item.id !== m.id);
+      this.broadcast({ t: "stroke.remove", id: m.id });
+      this.save();
+      return;
+    }
     if (m.t === "canvas.rename") {
       const name = String(m.name || "").trim().slice(0, LIMITS.nameChars);
       if (name) {
@@ -852,6 +968,7 @@ var Canvas = class {
       throw error;
     }
     this.data.name = doc.name;
+    if (doc.strokes) this.data.strokes = doc.strokes;
     const known = new Map(this.data.frames.map((frame) => [frame.id, frame]));
     this.data.frames = doc.frames.map((frame) => ({
       id: frame.id,
@@ -910,6 +1027,10 @@ var Canvas = class {
           this.event({ t: "share-progress", done: ++done, total });
         });
       }
+      const strokes = this.data.strokes ?? [];
+      for (let i = 0; i < strokes.length; i += STROKE_UPLOAD) {
+        await edge(`/api/canvases/${created.id}/strokes`, { method: "POST", body: JSON.stringify({ strokes: strokes.slice(i, i + STROKE_UPLOAD) }) });
+      }
     } catch (error) {
       await edge(`/api/canvases/${created.id}`, { method: "DELETE" }).catch(() => {
       });
@@ -1006,7 +1127,7 @@ async function command(name, input) {
       found = project;
     }
     const canvas2 = await canvasForProject(found);
-    if (input.rename && input.name && input.name !== canvas2.data.name) await rename3(canvas2, input.name);
+    if (input.rename && input.name && input.name !== canvas2.data.name) await rename4(canvas2, input.name);
     if (input.open !== false && !canvas2.watchers) openBrowser(`${DAEMON_ORIGIN}/${canvas2.id}`);
     canvas2.working(WORKING_MS);
     return summary(canvas2);
@@ -1021,6 +1142,10 @@ async function command(name, input) {
       case "open":
         openBrowser(`${DAEMON_ORIGIN}/${canvas.id}`);
         return summary(canvas);
+      case "preview": {
+        const { id, title, w, h } = findFrame(canvas, input.frame);
+        return { frame: { id, title, w, h }, url: `${DAEMON_ORIGIN}/preview/${canvas.id}/${id}` };
+      }
       case "place":
         return place(canvas, input);
       case "revise":
@@ -1054,7 +1179,7 @@ async function command(name, input) {
         return summary(canvas);
       }
       case "rename":
-        await rename3(canvas, input.name);
+        await rename4(canvas, input.name);
         return summary(canvas);
       case "share": {
         if (!credential) throw new Failure(401, "The person needs to sign in first. Ask them to click Share on the canvas.");
@@ -1069,7 +1194,7 @@ async function command(name, input) {
     }
   });
 }
-async function rename3(canvas, name) {
+async function rename4(canvas, name) {
   const clean = String(name || "").trim().slice(0, LIMITS.nameChars);
   if (!clean) throw new Failure(400, "Expected a name");
   if (canvas.data.remote) await edge(`/api/canvases/${canvas.data.remote.id}`, { method: "PATCH", body: JSON.stringify({ name: clean }) });
@@ -1167,9 +1292,20 @@ var APP_CSP = [
 ].join("; ");
 async function serveUi(response, pathname) {
   const clean = pathname.replace(/^\/+/, "");
-  const candidate = clean && !clean.includes("..") ? join7(UI, clean) : null;
-  const info = candidate ? await stat3(candidate).catch(() => null) : null;
-  const file2 = info?.isFile() && candidate ? candidate : join7(UI, "index.html");
+  let file2 = null;
+  if (clean && !clean.includes("..")) {
+    for (const folder of interfaceFolders()) {
+      const candidate = join8(folder, clean);
+      if ((await stat3(candidate).catch(() => null))?.isFile()) {
+        file2 = candidate;
+        break;
+      }
+    }
+  }
+  if (!file2) {
+    await freshInterface();
+    file2 = join8(interfaceFolders()[0], "index.html");
+  }
   const type = contentType(file2);
   const headers = { "content-type": type, "x-content-type-options": "nosniff", "cache-control": extname2(file2) === ".html" ? "no-cache" : "public, max-age=3600" };
   if (type.startsWith("text/html")) {
@@ -1179,10 +1315,23 @@ async function serveUi(response, pathname) {
   response.writeHead(200, headers);
   createReadStream2(file2).pipe(response);
 }
+var escapeHtml = (text2) => text2.replace(/[&<>"]/g, (c) => `&#${c.charCodeAt(0)};`);
+async function servePreview(response, canvasId, frameId) {
+  const canvas = await canvasById(canvasId);
+  const frame = await canvas.toFrame(findFrame(canvas, frameId));
+  response.writeHead(200, {
+    "content-type": "text/html; charset=utf-8",
+    "cache-control": "no-store",
+    "referrer-policy": "no-referrer",
+    "content-security-policy": "default-src 'none'; style-src 'unsafe-inline'; frame-src http://localhost:*; base-uri 'none'; frame-ancestors 'none'"
+  });
+  const title = escapeHtml(frame.title);
+  response.end(`<!doctype html><meta charset="utf-8"><title>${title}</title><style>html,body{margin:0;background:#fff}iframe{display:block;border:0;width:${frame.w}px;height:${frame.h}px}</style><iframe src="${escapeHtml(frame.url)}" title="${title}" sandbox="${FRAME_SANDBOX}" referrerpolicy="no-referrer" allow=""></iframe>`);
+}
 async function route(request, response) {
   const url = new URL(request.url || "/", DAEMON_ORIGIN);
   const path = url.pathname, method = request.method || "GET";
-  if (path === "/health") return reply(response, 200, { ok: true, build: "0.1.0+1793887853207", pid: process.pid });
+  if (path === "/health") return reply(response, 200, { ok: true, build: "0.2.0+1793896544071", pid: process.pid });
   if (path.startsWith("/cli/") && method === "POST") return reply(response, 200, await command(path.slice(5), await readBody(request)));
   if (path === "/auth/callback" && method === "GET") {
     const code = url.searchParams.get("code"), state = url.searchParams.get("state");
@@ -1233,6 +1382,8 @@ async function route(request, response) {
   }
   if (path.startsWith("/api/")) return reply(response, 404, { error: "Not found" });
   if (method !== "GET" && method !== "HEAD") return reply(response, 405, { error: "Method not allowed" });
+  const preview = path.match(/^\/preview\/([a-z0-9]+)\/([a-z0-9]+)$/);
+  if (preview) return servePreview(response, preview[1], preview[2]);
   return serveUi(response, path);
 }
 var idleTimer = null;
@@ -1286,17 +1437,19 @@ async function runDaemon() {
     server.listen(PORT, "127.0.0.1", resolve3);
   });
   touch();
+  startInterfaceUpdates().catch(() => {
+  });
 }
 
 // src/gates.ts
 import { createServer as createServer3 } from "node:http";
-import { mkdir as mkdir5, readFile as readFile6, stat as stat4, writeFile as writeFile5 } from "node:fs/promises";
+import { mkdir as mkdir6, readFile as readFile6, stat as stat4, writeFile as writeFile6 } from "node:fs/promises";
 import { dirname as dirname3 } from "node:path";
 var dedupe = (problems) => [...new Map(problems.map((p) => [`${p.code}:${p.file || ""}:${p.message}`, p])).values()];
-async function staticGates(folder, entry) {
+async function scanFolder(folder) {
   const problems = [];
   const info = await stat4(folder).catch(() => null);
-  if (!info?.isDirectory()) return { problems: [{ code: "NOT_A_FOLDER", message: `"${folder}" is not a folder.`, fix: "Point at a folder of built static files." }], files: 0, bytes: 0 };
+  if (!info?.isDirectory()) return { problems: [{ code: "NOT_A_FOLDER", message: `"${folder}" is not a folder.`, fix: "Point at a folder of built static files." }], files: [], bytes: 0 };
   const files = await hashFolder(folder);
   let bytes = 0;
   for (const file2 of files) {
@@ -1314,13 +1467,26 @@ async function staticGates(folder, entry) {
     const largest = [...files].sort((a, b) => b.size - a.size).slice(0, 5).map((file2) => `${file2.path} (${(file2.size / 1048576).toFixed(1)} MB)`).join(", ");
     problems.push({ code: "FRAME_TOO_LARGE", message: `${(bytes / 1048576).toFixed(1)} MB in total; the limit is ${LIMITS.frameBytes / 1048576} MB. Largest: ${largest}.`, fix: "Remove what this design doesn't show, and compress the rest." });
   }
+  return { problems, files, bytes };
+}
+function entryProblems(files, entry) {
   const entryPath = entry.split(/[?#]/)[0];
   const candidates = candidatePaths("/" + entryPath);
-  if (!files.some((file2) => candidates.includes(file2.path))) problems.push({ code: "NO_ENTRY", message: `"${entryPath}" is not in the folder.`, fix: "Build to a folder with an index.html at its top level, or pass --entry." });
-  return { problems, files: files.length, bytes };
+  if (files.some((file2) => candidates.includes(file2.path))) return [];
+  return [{ code: "NO_ENTRY", message: `"${entryPath}" is not in the folder.`, fix: "Build to a folder with an index.html at its top level, or pass --entry." }];
+}
+async function findReferences(folder, needle) {
+  const found = [];
+  for (const file2 of await hashFolder(folder)) {
+    const bytes = await readFile6(file2.absolute);
+    if (looksLikeText(bytes) && bytes.includes(needle)) found.push(file2.path);
+    if (found.length === 3) break;
+  }
+  return found;
 }
-async function browserGates(folder, options) {
+async function browserGates(folder, options, launch) {
   const problems = [], warnings = [];
+  const traces = /* @__PURE__ */ new Map();
   const server = await startFrameServer(folder);
   const width = options.width, height = options.height === "auto" ? 800 : options.height;
   const harness = createServer3((_, response) => {
@@ -1331,7 +1497,7 @@ async function browserGates(folder, options) {
   const harnessOrigin = `http://localhost:${harness.address().port}`;
   let browser;
   try {
-    browser = await launchBrowser();
+    browser = await launch();
   } catch {
     harness.close();
     server.close();
@@ -1347,7 +1513,9 @@ async function browserGates(folder, options) {
         host = new URL(url).host;
       } catch {
       }
-      problems.push({ code: "EXTERNAL_REQUEST", message: `The frame tried to reach ${host} (${url.slice(0, 160)}).`, fix: /google-analytics|googletagmanager|clarity\.ms|segment\.|sentry|hotjar|posthog|plausible|intercom|mixpanel|amplitude/i.test(url) ? "That is analytics or a third-party widget, which a frame doesn't need. Delete the tag or skip loading it in this build." : /fonts\.(googleapis|gstatic)|typekit|fontshare|fonts\.bunny/i.test(url) ? "Download the font files into the folder and load them with @font-face and a local path." : "Frames can only use their own files. For an asset, copy it into the folder and use a relative path. For an API call, replace it with mock data. For a tag or widget in the page template, delete it." });
+      const problem = { code: "EXTERNAL_REQUEST", message: `The frame tried to reach ${host} (${url.slice(0, 160)}).`, fix: /google-analytics|googletagmanager|clarity\.ms|segment\.|sentry|hotjar|posthog|plausible|intercom|mixpanel|amplitude/i.test(url) ? "That is analytics or a third-party widget, which a frame doesn't need. Delete the tag or skip loading it in this build." : /fonts\.(googleapis|gstatic)|typekit|fontshare|fonts\.bunny/i.test(url) ? "Download the font files into the folder and load them with @font-face and a local path." : "Frames can only use their own files. For an asset, copy it into the folder and use a relative path. For an API call, replace it with mock data. For a tag or widget in the page template, delete it." };
+      problems.push(problem);
+      traces.set(problem, host);
     };
     page.on("pageerror", (error) => {
       problems.push({ code: "UNCAUGHT_ERROR", message: `The page threw: ${String(error.message).slice(0, 400)}`, fix: "Usually a missing provider, env value or API response, or a router reading the file path as a route. Mount the design with mock props and data, and use a memory or hash router." });
@@ -1368,7 +1536,9 @@ async function browserGates(folder, options) {
       const url = response.url();
       if (!isFrameOrigin(url) || response.status() < 400 || url.endsWith("/favicon.ico")) return;
       const path = new URL(url).pathname;
-      problems.push({ code: "MISSING_FILE", message: `The frame asked for ${path} and it isn't in the folder (${response.status()}).`, fix: /^\/(api|graphql|trpc|auth)(\/|$)/.test(path) ? "That is a server route, and frames have no server. Replace the call with mock data." : "Copy the file into the folder, or remove the reference. If it is an API call, replace it with mock data.", file: path.slice(1) });
+      const problem = { code: "MISSING_FILE", message: `The frame asked for ${path} and it isn't in the folder (${response.status()}).`, fix: /^\/(api|graphql|trpc|auth)(\/|$)/.test(path) ? "That is a server route, and frames have no server. Replace the call with mock data." : "Copy the file into the folder, or remove the reference. If it is an API call, replace it with mock data.", file: path.slice(1) };
+      problems.push(problem);
+      traces.set(problem, path.slice(1));
     });
     page.on("requestfailed", (request) => {
       const url = request.url();
@@ -1401,8 +1571,8 @@ async function browserGates(folder, options) {
     const shot = await page.locator("#frame").screenshot({ type: "png", timeout: 15e3 }).catch(() => null);
     if (shot) {
       if (options.poster) {
-        await mkdir5(dirname3(options.poster), { recursive: true });
-        await writeFile5(options.poster, shot);
+        await mkdir6(dirname3(options.poster), { recursive: true });
+        await writeFile6(options.poster, shot);
       }
       const colors = await page.evaluate(async (base64) => {
         const image = new Image();
@@ -1423,40 +1593,79 @@ async function browserGates(folder, options) {
     if (content && content.width > width * 1.02) warnings.push(`The page is ${content.width}px wide and the frame is ${width}px; it overflows sideways.`);
     await context.close();
     const unique = dedupe(problems);
+    for (const problem of unique) {
+      const trace = traces.get(problem);
+      const references = trace ? await findReferences(folder, trace) : [];
+      if (references.length) problem.message += ` Mentioned in ${references.join(", ")}.`;
+    }
     return { ok: unique.length === 0, problems: unique, warnings: [...new Set(warnings)], content, height: finalHeight, screenshot: options.poster };
   } finally {
-    await browser.close().catch(() => {
-    });
     harness.closeAllConnections();
     harness.close();
     server.close();
   }
 }
+function gateSession() {
+  const scans = /* @__PURE__ */ new Map();
+  let browser = null;
+  const launch = () => browser ??= launchBrowser();
+  return {
+    async run(folder, options) {
+      if (!scans.has(folder)) scans.set(folder, scanFolder(folder));
+      const scan = await scans.get(folder);
+      const size2 = { files: scan.files.length, bytes: scan.bytes };
+      const notFolder = scan.problems.some((problem) => problem.code === "NOT_A_FOLDER");
+      const problems = notFolder ? scan.problems : [...scan.problems, ...entryProblems(scan.files, options.entry)];
+      if (problems.length) return { ok: false, problems: dedupe(problems), warnings: [], ...size2 };
+      return { ...await browserGates(folder, options, launch), ...size2 };
+    },
+    close: async () => {
+      await browser?.then((open) => open.close()).catch(() => {
+      });
+    }
+  };
+}
 async function runGates(folder, options) {
-  const first = await staticGates(folder, options.entry);
-  if (first.problems.length) return { ok: false, problems: dedupe(first.problems), warnings: [], files: first.files, bytes: first.bytes };
-  const result = await browserGates(folder, options);
-  return { ...result, files: first.files, bytes: first.bytes };
+  const session = gateSession();
+  try {
+    return await session.run(folder, options);
+  } finally {
+    await session.close();
+  }
 }
 
 // src/cli.ts
-var HELP = `twombly ${"0.1.0"}: put design explorations on a shared canvas.
+var HELP = `twombly ${"0.2.0"}: put design explorations on a shared canvas.
 
   init [--name "Name"] [--no-open]     create or reopen this project's canvas
   add <folder|file> --title "T"        run the gates, then place a frame
       [--width 1280] [--height 800|auto] [--entry index.html] [--level build|component|capture|image]
       [--new-row] [--x N --y N]
+      [--frames '[{"title":"A","entry":"index.html?v=a"}]']   several at once, as JSON or a JSON file
   update <frame> <folder|file>         replace a frame's contents, keeping its comments
       [--title "T"] [--width N] [--height N|auto] [--entry path] [--level ...]
-  check <folder>                       run the gates without placing anything
+      update <folder> --frames '[{"frame":"A"},{"frame":"B"}]'   several at once
+  check <folder>                     run the gates without placing anything
   capture <url> --out <folder>         freeze a running page into a static folder
       [--width 1280] [--height 800] [--image] [--selector css]
+  preview <frame>                      a page with just that frame, for testing interactions
   working | done                       show on the canvas that you're building, or that you've finished
   list | move <frame> --x N --y N | resize <frame> --width N --height N
   retitle <frame> "T" | remove <frame> | arrange [--columns N] | rename "Name"
   open | status | login | logout | stop
   share | unshare                      only when the person asks: this publishes a public link
   guide                                how to adapt a project into frames. Read this first.`;
+var SWITCHES = /* @__PURE__ */ new Set(["no-open", "new-row", "image"]);
+var FLAGS = {
+  init: ["name", "no-open"],
+  add: ["title", "width", "height", "entry", "level", "new-row", "x", "y", "frames"],
+  update: ["title", "width", "height", "entry", "level", "frames"],
+  check: ["entry", "width", "height"],
+  capture: ["out", "width", "height", "image", "selector", "wait"],
+  move: ["x", "y"],
+  resize: ["width", "height"],
+  arrange: ["columns"]
+};
 function parse(argv) {
   const positional = [], flags = {};
   for (let i = 0; i < argv.length; i++) {
@@ -1471,13 +1680,19 @@ function parse(argv) {
       continue;
     }
     const next = argv[i + 1];
-    if (next !== void 0 && !next.startsWith("--")) {
+    if (!SWITCHES.has(arg.slice(2)) && next !== void 0 && !next.startsWith("--")) {
       flags[arg.slice(2)] = next;
       i++;
     } else flags[arg.slice(2)] = true;
   }
   return { positional, flags };
 }
+function checkFlags(name, flags) {
+  const known = FLAGS[name] || [];
+  for (const flag of Object.keys(flags)) {
+    if (!known.includes(flag)) fail(`Unknown flag --${flag}. ${known.length ? `"${name}" takes: ${known.map((item) => `--${item}`).join(", ")}.` : `"${name}" takes no flags.`}`);
+  }
+}
 var print = (value) => process.stdout.write(JSON.stringify(value, null, 2) + "\n");
 function fail(message, extra = {}) {
   print({ ok: false, error: message, ...extra });
@@ -1515,7 +1730,7 @@ async function health() {
 }
 async function ensureDaemon() {
   const running = await health();
-  if (running?.build === "0.1.0+1793887853207") return;
+  if (running?.build === "0.2.0+1793896544071") return;
   if (running) {
     await fetch(`${DAEMON_ORIGIN}/cli/stop`, { method: "POST", body: "{}" }).catch(() => {
     });
@@ -1524,7 +1739,7 @@ async function ensureDaemon() {
   spawn2(process.execPath, [fileURLToPath2(import.meta.url), "__daemon"], { detached: true, stdio: "ignore" }).unref();
   for (let attempt = 0; attempt < 60; attempt++) {
     await new Promise((done) => setTimeout(done, 100));
-    if ((await health())?.build === "0.1.0+1793887853207") return;
+    if ((await health())?.build === "0.2.0+1793896544071") return;
   }
   fail(`Could not start the background server on port ${PORT}. Is something else using it?`);
 }
@@ -1543,13 +1758,13 @@ async function prepare(source) {
   const extension = extname3(source).toLowerCase();
   const isImage = IMAGE.has(extension);
   if (!isImage && extension !== ".html" && extension !== ".htm") fail("Point at a folder of static files, an HTML file or an image.");
-  const temporary = await mkdtemp(join8(tmpdir(), "twombly-"));
+  const temporary = await mkdtemp(join9(tmpdir(), "twombly-"));
   if (isImage) {
     const name = `image${extension}`;
-    await copyFile(source, join8(temporary, name));
-    await writeFile6(join8(temporary, "index.html"), `<!doctype html><meta charset="utf-8"><title>${basename2(source)}</title><style>html,body{margin:0;background:#fff}img{display:block;width:100%;height:auto}</style><img src="${name}" alt="">`);
+    await copyFile(source, join9(temporary, name));
+    await writeFile7(join9(temporary, "index.html"), `<!doctype html><meta charset="utf-8"><title>${basename2(source)}</title><style>html,body{margin:0;background:#fff}img{display:block;width:100%;height:auto}</style><img src="${name}" alt="">`);
   } else {
-    await copyFile(source, join8(temporary, "index.html"));
+    await copyFile(source, join9(temporary, "index.html"));
   }
   return { folder: temporary, temporary, image: isImage };
 }
@@ -1560,15 +1775,169 @@ async function currentProject() {
 }
 async function markWorking() {
   const project = await findProject(process.cwd());
-  if (project) await call("working", { project, ms: WORKING_TAIL_MS });
+  if (project) await call("working", { project, ms: WORKING_MS });
 }
 function gateFailure(result) {
   print({ ok: false, placed: false, problems: result.problems, warnings: result.warnings, screenshot: result.screenshot });
-  process.exit(1);
+  process.exitCode = 1;
+}
+var NEXT = "Open the screenshot. Passing the gates does not prove it looks right. To test interactions, open the url from: twombly preview <frame>";
+var CONCURRENT_GATES = 4;
+async function frameItems(flags, known) {
+  const value = flags.frames;
+  if (value === void 0) return [flags];
+  if (typeof value !== "string") fail("--frames needs JSON or a JSON file.");
+  const { frames: _, ...shared } = flags;
+  let items;
+  try {
+    items = JSON.parse(value.trimStart().startsWith("[") ? value : await readFile7(value, "utf8"));
+  } catch (error) {
+    fail(`--frames: ${error instanceof Error ? error.message : error}`);
+  }
+  if (!Array.isArray(items) || !items.length) fail("--frames needs a list of frames.");
+  return items.map((item) => {
+    const unknown = Object.keys(item).find((key) => !known.includes(key));
+    if (unknown) fail(`--frames: unknown field "${unknown}". Each frame takes: ${known.join(", ")}.`);
+    const merged = { ...shared };
+    for (const [key, field] of Object.entries(item)) {
+      if (key === "newRow") {
+        if (field) merged["new-row"] = true;
+        else delete merged["new-row"];
+      } else merged[key] = String(field);
+    }
+    return merged;
+  });
+}
+async function placeFrames(project, many, jobs, place2) {
+  await markWorking();
+  const scratch = await mkdtemp(join9(tmpdir(), "twombly-gates-"));
+  const gates = gateSession(), prepared = /* @__PURE__ */ new Map(), temporary = [];
+  let keepScratch = false;
+  try {
+    for (const job of jobs) {
+      if (prepared.has(job.source)) continue;
+      const ready = await prepare(job.source);
+      prepared.set(job.source, ready);
+      if (ready.temporary) temporary.push(ready.temporary);
+    }
+    const results = [];
+    let next = 0;
+    await Promise.all(Array.from({ length: CONCURRENT_GATES }, async () => {
+      while (next < jobs.length) {
+        const index = next++, job = jobs[index];
+        results[index] = await gates.run(prepared.get(job.source).folder, { entry: job.entry, width: job.width, height: job.height, poster: join9(scratch, `${job.id}.png`) });
+      }
+    }));
+    if (results.some((result) => !result.ok)) {
+      keepScratch = true;
+      if (!many) return gateFailure(results[0]);
+      return gateFailure({
+        problems: results.flatMap((result, index) => result.problems.map((problem) => ({ ...problem, frame: jobs[index].label, screenshot: result.screenshot }))),
+        warnings: results.flatMap((result, index) => result.warnings.map((warning) => `${jobs[index].label}: ${warning}`))
+      });
+    }
+    const placed = [];
+    for (const [index, job] of jobs.entries()) {
+      const result = results[index], { folder, image } = prepared.get(job.source);
+      const poster = result.screenshot ? posterFile(project, job.id) : void 0;
+      await replaceFolder(folder, frameDir(project, job.id));
+      if (poster) {
+        await mkdir7(join9(project, ".twombly/posters"), { recursive: true });
+        await copyFile(result.screenshot, poster);
+      }
+      placed.push({ ...await place2(job, { result, folder, image, poster }), warnings: result.warnings, screenshot: poster, contentSize: result.content });
+    }
+    if (!many) return print({ ok: true, placed: true, ...placed[0], next: NEXT });
+    print({ ok: true, placed: true, frames: placed.map(({ frame, canvas: _, ...rest }) => ({ ...frame, ...rest })), canvas: placed[placed.length - 1].canvas, next: NEXT });
+  } finally {
+    await gates.close();
+    for (const folder of temporary) await rm5(folder, { recursive: true, force: true });
+    if (!keepScratch) await rm5(scratch, { recursive: true, force: true });
+  }
+}
+async function addFrames(project, source, many, items) {
+  const jobs = items.map((flags) => {
+    const folder = text(flags, "folder") || source, title = text(flags, "title");
+    if (!folder || !title) fail('twombly add <folder|file> --title "Title"');
+    level(flags, "build");
+    number(flags, "x");
+    number(flags, "y");
+    return {
+      flags,
+      label: title,
+      source: resolve2(folder),
+      entry: text(flags, "entry") || "index.html",
+      width: size(flags, "width", 1280),
+      height: flags.height === "auto" ? "auto" : size(flags, "height", 800),
+      id: randomBytes2(8).toString("hex").replace(/[01lo]/g, "a").slice(0, 12)
+    };
+  });
+  const titles = (await call("list", { project })).frames.map((frame) => frame.title);
+  await placeFrames(project, many, jobs, async (job, { result, image, poster }) => {
+    const { content } = await folderContent(frameDir(project, job.id));
+    if (titles.includes(job.label)) result.warnings.push(`Another frame is already titled "${job.label}". Give each a distinct title, or use update to replace it.`);
+    titles.push(job.label);
+    return call("place", {
+      project,
+      id: job.id,
+      title: job.label,
+      w: job.width,
+      h: result.height,
+      entry: job.entry,
+      content,
+      level: level(job.flags, image ? "image" : "build"),
+      hasPoster: !!poster,
+      x: number(job.flags, "x"),
+      y: number(job.flags, "y"),
+      newRow: job.flags["new-row"] === true
+    });
+  });
+}
+async function updateFrames(project, source, many, items) {
+  const { frames } = await call("list", { project });
+  const seen = /* @__PURE__ */ new Set();
+  const jobs = items.map((flags) => {
+    const ref = text(flags, "frame"), folder = text(flags, "folder") || source;
+    if (!ref || !folder) fail("twombly update <frame> <folder|file>");
+    const matches = frames.filter((frame2) => frame2.id === ref || frame2.title === ref);
+    if (matches.length !== 1) fail(matches.length ? `More than one frame is titled "${ref}". Use its id.` : `No frame "${ref}". Run: twombly list`);
+    const frame = matches[0];
+    if (seen.has(frame.id)) fail(`--frames lists "${ref}" twice.`);
+    seen.add(frame.id);
+    level(flags, "build");
+    return {
+      flags,
+      label: frame.title,
+      id: frame.id,
+      source: resolve2(folder),
+      entry: text(flags, "entry") || frame.entry,
+      width: size(flags, "width", frame.w),
+      height: flags.height === "auto" ? "auto" : size(flags, "height", frame.h)
+    };
+  });
+  await placeFrames(project, many, jobs, async (job, { result, image, poster }) => {
+    const { content } = await folderContent(frameDir(project, job.id));
+    return call("revise", {
+      project,
+      id: job.id,
+      title: text(job.flags, "title"),
+      w: job.width,
+      h: result.height,
+      entry: job.entry,
+      content,
+      hasPoster: poster ? true : void 0,
+      level: text(job.flags, "level") || image ? level(job.flags, image ? "image" : "build") : void 0
+    });
+  });
 }
 async function main() {
   const [name, ...rest] = process.argv.slice(2);
   const { positional, flags } = parse(rest);
+  if (flags.help !== void 0 || positional.includes("-h")) {
+    process.stdout.write(HELP + "\n");
+    return;
+  }
+  if (name && !["--help", "-h", "--version", "help", "version", "guide", "__daemon"].includes(name)) checkFlags(name, flags);
   switch (name) {
     case "__daemon":
       return runDaemon();
@@ -1580,7 +1949,7 @@ async function main() {
       return;
     case "--version":
     case "version":
-      process.stdout.write("0.1.0\n");
+      process.stdout.write("0.2.0\n");
       return;
     case "guide":
       process.stdout.write(SKILL_default);
@@ -1588,23 +1957,23 @@ async function main() {
     case "init": {
       const project = await findProject(process.cwd()) || process.cwd();
       const given = text(flags, "name");
-      print({ ok: true, ...await call("init", { project, name: given || defaultName(project), rename: !!given, open: flags["no-open"] === void 0 }) });
+      print({ ok: true, ...await call("init", { project, name: given || defaultName(project), rename: !!given, open: flags["no-open"] === void 0 }), next: "Frames must be static files that work with no server or network. Read how to adapt this project: twombly guide" });
       return;
     }
     case "check": {
       const source = positional[0];
-      if (!source) fail("Which folder? twombly check <folder>");
+      if (!source) fail("twombly check <folder> checks a build before it is added. It needs the build's folder.");
       await markWorking();
       const { folder, temporary } = await prepare(resolve2(source));
-      const scratch = await mkdtemp(join8(tmpdir(), "twombly-check-"));
-      const shot = join8(scratch, "screenshot.png");
+      const scratch = await mkdtemp(join9(tmpdir(), "twombly-check-"));
+      const shot = join9(scratch, "screenshot.png");
       try {
         const height = flags.height === "auto" ? "auto" : size(flags, "height", 800);
         const result = await runGates(folder, { entry: text(flags, "entry") || "index.html", width: size(flags, "width", 1280), height, poster: shot });
         print(result);
         if (!result.ok) process.exitCode = 1;
       } finally {
-        if (temporary) await rm4(temporary, { recursive: true, force: true });
+        if (temporary) await rm5(temporary, { recursive: true, force: true });
       }
       return;
     }
@@ -1617,83 +1986,12 @@ async function main() {
       return;
     }
     case "add": {
-      const source = positional[0], title = text(flags, "title");
-      if (!source || !title) fail('twombly add <folder|file> --title "Title"');
-      const project = await currentProject();
-      await markWorking();
-      const { folder, temporary, image } = await prepare(resolve2(source));
-      const id = randomBytes2(8).toString("hex").replace(/[01lo]/g, "a").slice(0, 12);
-      const entry = text(flags, "entry") || "index.html", width = size(flags, "width", 1280);
-      const height = flags.height === "auto" ? "auto" : size(flags, "height", 800);
-      const shot = posterFile(project, id);
-      try {
-        const result = await runGates(folder, { entry, width, height, poster: shot });
-        if (!result.ok) {
-          await rm4(shot, { force: true });
-          gateFailure(result);
-        }
-        await replaceFolder(folder, frameDir(project, id));
-        const { content } = await folderContent(frameDir(project, id));
-        const existing = await call("list", { project });
-        if (existing.frames.some((frame) => frame.title === title)) result.warnings.push(`Another frame is already titled "${title}". Give each a distinct title, or use update to replace it.`);
-        const placed = await call("place", {
-          project,
-          id,
-          title,
-          w: width,
-          h: result.height,
-          entry,
-          content,
-          level: level(flags, image ? "image" : "build"),
-          hasPoster: !!result.screenshot,
-          x: number(flags, "x"),
-          y: number(flags, "y"),
-          newRow: flags["new-row"] === true
-        });
-        print({ ok: true, placed: true, ...placed, warnings: result.warnings, screenshot: result.screenshot, next: "Open the screenshot. Passing the gates does not prove it looks right.", contentSize: result.content });
-      } finally {
-        if (temporary) await rm4(temporary, { recursive: true, force: true });
-      }
-      return;
+      return addFrames(await currentProject(), positional[0], flags.frames !== void 0, await frameItems(flags, ["folder", "title", "width", "height", "entry", "level", "newRow", "x", "y"]));
     }
     case "update": {
-      const ref = positional[0], source = positional[1];
-      if (!ref || !source) fail("twombly update <frame> <folder|file>");
-      const project = await currentProject();
-      await markWorking();
-      const before = await call("list", { project });
-      const matches = before.frames.filter((frame2) => frame2.id === ref || frame2.title === ref);
-      if (matches.length !== 1) fail(matches.length ? `More than one frame is titled "${ref}". Use its id.` : `No frame "${ref}". Run: twombly list`);
-      const frame = matches[0];
-      const { folder, temporary, image } = await prepare(resolve2(source));
-      const entry = text(flags, "entry") || frame.entry, width = size(flags, "width", frame.w);
-      const height = flags.height === "auto" ? "auto" : size(flags, "height", frame.h);
-      const scratch = await mkdtemp(join8(tmpdir(), "twombly-update-"));
-      const candidate = join8(scratch, "poster.png");
-      try {
-        const result = await runGates(folder, { entry, width, height, poster: candidate });
-        if (!result.ok) gateFailure(result);
-        await replaceFolder(folder, frameDir(project, frame.id));
-        await mkdir6(join8(project, ".twombly/posters"), { recursive: true });
-        await copyFile(candidate, posterFile(project, frame.id));
-        const { content } = await folderContent(frameDir(project, frame.id));
-        const updated = await call("revise", {
-          project,
-          id: frame.id,
-          title: text(flags, "title"),
-          w: width,
-          h: result.height,
-          entry,
-          content,
-          hasPoster: true,
-          level: text(flags, "level") || image ? level(flags, image ? "image" : "build") : void 0
-        });
-        print({ ok: true, placed: true, ...updated, warnings: result.warnings, screenshot: posterFile(project, frame.id), next: "Open the screenshot. Passing the gates does not prove it looks right.", contentSize: result.content });
-      } finally {
-        if (temporary) await rm4(temporary, { recursive: true, force: true });
-        await rm4(scratch, { recursive: true, force: true });
-      }
-      return;
+      const many = flags.frames !== void 0;
+      const items = many ? await frameItems(flags, ["frame", "folder", "title", "width", "height", "entry", "level"]) : [{ ...flags, ...positional[0] ? { frame: positional[0] } : {} }];
+      return updateFrames(await currentProject(), many ? positional[0] : positional[1], many, items);
     }
     case "working":
       print({ ok: true, ...await call("working", { project: await currentProject(), ms: WORKING_MS }) });
@@ -1707,6 +2005,11 @@ async function main() {
     case "open":
       print({ ok: true, ...await call("open", { project: await currentProject() }) });
       return;
+    case "preview": {
+      if (!positional[0]) fail("twombly preview <frame>");
+      print({ ok: true, ...await call("preview", { project: await currentProject(), frame: positional[0] }) });
+      return;
+    }
     case "status":
       print({ ok: true, ...await call("status", { project: await findProject(process.cwd()) }) });
       return;
@@ -1722,6 +2025,7 @@ async function main() {
       return;
     }
     case "resize": {
+      if (flags.height === "auto") fail("resize takes a number. To fit the page: twombly update <frame> <folder> --height auto");
       if (!positional[0] || flags.width === void 0 || flags.height === void 0) fail("twombly resize <frame> --width N --height N");
       print({ ok: true, ...await call("patch", { project: await currentProject(), frame: positional[0], patch: { w: size(flags, "width", 1280), h: size(flags, "height", 800) } }) });
       return;