twombly 0.1.0 → 0.3.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 as copyFile2, 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
@@ -13,11 +13,13 @@ var LIMITS = {
   fileBytes: 25 * 1024 * 1024,
   frameBytes: 100 * 1024 * 1024,
   frameFiles: 5e3,
-  canvasFrames: 200,
+  canvasFrames: 500,
   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,24 @@ 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 COLORS = ["#F24822", "#FF7A00", "#14AE5C", "#0D99FF", "#9747FF", "#E5277B", "#00B5B8", "#7B61FF"];
+function colorOf(id) {
+  let h = 0;
+  for (const c of String(id)) h = h * 31 + c.charCodeAt(0) >>> 0;
+  return COLORS[h % COLORS.length];
+}
+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 +261,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, 500 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. If `created` is false, the canvas already existed: see [Other agents and more canvases](#other-agents-and-more-canvases).\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/<task>/<version>` so the person's source stays clean. Pick a `<task>` no other agent would, because a shared folder gets overwritten. Use the first approach below that works. The canvas tells people an agent is working: `init` and the slow commands keep that showing 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 in your own folder under `.twombly/work`; here, `composer`.\n\n```js\n// .twombly/work/composer/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/composer/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/composer/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/composer/vite.config.mjs` and `twombly add .twombly/work/composer/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## What the person is looking at\n\nWhen the person says \"this\" or \"these\" without naming a frame, run `twombly context`. It returns the frames they have open fullscreen, are using, or have selected, in that order, plus any comment they have open. `looking: false` means no canvas is open in a browser. If nothing is selected, ask which frame they mean.\n\n`twombly comments` returns every comment, with the frame it's on, where on the frame (in the frame's pixels), whether it's resolved, and `mine: true` for the person's own comments.\n\nEach frame in `context` and `list` has a `source`: the folder or file it was last added or updated from. Edit what built it, rebuild, then `update` the frame. Frames added before this existed show `null`.\n\n## Other agents and more canvases\n\nA folder has one default canvas, and every agent in that folder or below it lands on it. `init` on an existing canvas joins it and keeps its name. A folder can also hold any number of named canvases, each with its own address, frames and link.\n\n**Use a named canvas** when your work is a separate exploration, or the person asks for its own canvas: `twombly init --canvas \"Pricing\" --no-open`. Then pass `--canvas \"Pricing\"` on every command, because nothing remembers it between commands. `init --canvas` with a name that exists joins it, so agents can share one by agreeing on the name. `twombly canvases` lists what's here.\n\n**On a canvas with other agents:**\n\n- Only change your own frames, unless the person asks. Any agent's `update`, `move` and `remove` work on any frame, and `arrange` moves all of them.\n- Give frames titles no one else would use, such as \"Pricing: V1\", since commands find frames by title. A repeated title gets a warning, and then has to be addressed by id.\n- Add each set in one `--frames` command, with `--new-row` on its first frame, so it stays together.\n- If `update` says someone else changed a frame, run `twombly list` and don't retry without checking whose work you'd replace.\n- Run `twombly done` when you finish. The canvas keeps showing work until every agent that ran `init` has finished, or three minutes after the last activity.\n\n**Worktrees:** a canvas lives in the folder it was started in. A worktree outside the repo gets its own canvas, which is deleted with the worktree, so tell the person that before removing it. A worktree inside the repo joins the repo's default canvas if there is 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 keeps the canvas on this machine, comments included.\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 +302,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 +313,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 +406,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(() => {
     });
@@ -398,10 +416,9 @@ async function capture(url, out, options) {
 // src/daemon.ts
 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 { copyFile, mkdir as mkdir6, 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 { dirname as dirname3, extname as extname2, join as join8 } from "node:path";
 import { WebSocketServer, WebSocket } from "ws";
 
 // src/credentials.ts
@@ -418,6 +435,7 @@ var PORT = Number(process.env.TWOMBLY_PORT) || 4747;
 var ENDPOINT = (process.env.TWOMBLY_ENDPOINT || "https://twombly.app").replace(/\/+$/, "");
 var DAEMON_ORIGIN = `http://localhost:${PORT}`;
 var NO_OPEN = process.env.TWOMBLY_NO_OPEN === "1";
+var TOOL_API = 3;
 
 // src/credentials.ts
 var run = promisify(execFile);
@@ -545,36 +563,164 @@ 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 > 1793910384715).map(folder), BUNDLED, ...saved.filter((released) => released <= 1793910384715).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, 1793910384715)) 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`);
+function inOrder() {
+  let last = Promise.resolve();
+  return (work) => {
+    const next = last.then(work, work);
+    last = next.catch(() => {
+    });
+    return next;
+  };
+}
+var NAMED = "canvases";
+function canvasSlug(name) {
+  const slug = name.normalize("NFKD").replace(/[̀-ͯ]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 60);
+  return slug || createHash2("sha256").update(name).digest("hex").slice(0, 12);
+}
+var namedProject = (root, name) => join6(root, DIR, NAMED, canvasSlug(name));
+async function canvasesAbove(from) {
+  const out = [];
+  const read = async (project, slug) => {
+    const canvas = await readCanvas(project).catch(() => null);
+    if (canvas) out.push({ project, slug, id: canvas.id, name: canvas.name, frames: canvas.frames.length, link: canvas.remote?.url || null });
+  };
+  for (let dir = resolve(from); ; dir = dirname2(dir)) {
+    await read(dir, null);
+    const named = await readdir2(join6(dir, DIR, NAMED)).catch(() => []);
+    for (const slug of named.sort()) await read(join6(dir, DIR, NAMED, slug), slug);
+    if (dirname2(dir) === dir) return out;
+  }
+}
+async function findNamed(from, ref) {
+  const slug = canvasSlug(ref), all = await canvasesAbove(from);
+  return all.find((entry) => entry.slug === slug || entry.id === ref) ?? all.find((entry) => canvasSlug(entry.name) === slug) ?? null;
+}
+async function findRoot(from) {
+  for (let dir = resolve(from); ; dir = dirname2(dir)) {
+    if (await exists(join6(dir, DIR, "canvas.json")) || await exists(join6(dir, DIR, NAMED))) return dir;
+    if (dirname2(dir) === dir) return null;
+  }
+}
+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");
+  if (basename(dirname2(project)) === NAMED && basename(dirname2(dirname2(project))) === DIR) await writeFile4(join6(dirname2(dirname2(project)), ".gitignore"), "*\n");
 }
 function defaultName(project) {
   return basename(project).replace(/[-_]+/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()) || "Untitled";
@@ -582,8 +728,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;
@@ -600,14 +746,18 @@ async function folderContent(folder) {
   return { files, content: await contentHash(files) };
 }
 async function replaceFolder(source, target) {
-  const temp = `${target}.${process.pid}.tmp`;
-  await rm3(temp, { recursive: true, force: true });
-  await mkdir3(dirname(target), { recursive: true });
+  const temp = `${target}.${process.pid}.tmp`, old = `${target}.${process.pid}.old`;
+  await rm4(temp, { recursive: true, force: true });
+  await rm4(old, { 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 rename2(target, old).catch((error) => {
+    if (error.code !== "ENOENT") throw error;
+  });
+  await rename2(temp, target);
+  await rm4(old, { recursive: true, force: true });
 }
-var registryFile = join5(HOME, "registry.json");
+var registryFile = join6(HOME, "registry.json");
 async function readRegistry() {
   try {
     return JSON.parse(await readFile3(registryFile, "utf8"));
@@ -615,31 +765,35 @@ async function readRegistry() {
     return {};
   }
 }
-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));
+var registryTurn = inOrder();
+function register(id, project) {
+  return registryTurn(async () => {
+    const registry = await readRegistry();
+    if (registry[id] === project) return;
+    registry[id] = project;
+    await mkdir4(HOME, { recursive: true });
+    const temp = `${registryFile}.${process.pid}.tmp`;
+    await writeFile4(temp, JSON.stringify(registry, null, 2));
+    await rename2(temp, registryFile);
+  });
 }
 
 // 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 +836,11 @@ 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 THREAD_UPLOAD_CHARS = 5e5;
+var THREAD_ID = /^[a-z0-9]{8,32}$/;
+var finite = (value) => typeof value === "number" && Number.isFinite(value);
+var FRAME_SERVERS_IDLE_MS = Number(process.env.TWOMBLY_FRAME_IDLE_MS) || 5 * 6e4;
 var Canvas = class {
   id;
   project;
@@ -691,7 +850,13 @@ var Canvas = class {
   servers = /* @__PURE__ */ new Map();
   queue = Promise.resolve();
   saveTimer = null;
+  serversTimer = null;
+  writeTurn = inOrder();
   workingUntil = 0;
+  agents = 0;
+  contexts = /* @__PURE__ */ new Map();
+  /** So undoing a delete in the page keeps where the frame came from. */
+  removedSources = /* @__PURE__ */ new Map();
   constructor(project, data) {
     this.project = project;
     this.data = data;
@@ -707,13 +872,26 @@ var Canvas = class {
   save() {
     if (this.saveTimer) clearTimeout(this.saveTimer);
     this.saveTimer = setTimeout(() => {
-      writeCanvas(this.project, this.data).catch(() => {
+      this.writeTurn(() => writeCanvas(this.project, this.data)).catch(() => {
       });
     }, 150);
   }
   async saveNow() {
     if (this.saveTimer) clearTimeout(this.saveTimer);
-    await writeCanvas(this.project, this.data);
+    await this.writeTurn(() => writeCanvas(this.project, this.data));
+  }
+  /** Frame servers are only for people looking. They come back, on new ports, the next time someone does. */
+  closeServersWhenUnwatched() {
+    if (this.serversTimer) clearTimeout(this.serversTimer);
+    this.serversTimer = setTimeout(() => {
+      if (this.sockets.size) return;
+      for (const running of this.servers.values()) running.then((server) => server.close());
+      this.servers.clear();
+    }, FRAME_SERVERS_IDLE_MS);
+  }
+  /** Tells anyone looking about a frame, without starting its server for nobody. */
+  async announce(frame) {
+    if (this.sockets.size) this.broadcast({ t: "frame.upsert", frame: await this.toFrame(frame) });
   }
   serverFor(frame) {
     const key = `${frame.id}:${frame.content}`;
@@ -748,9 +926,18 @@ var Canvas = class {
   workingLeft() {
     return Math.max(0, this.workingUntil - Date.now());
   }
-  /** An agent is at work for at least this long; zero means it's finished. Everyone looking at the canvas sees it. */
-  working(ms) {
-    this.workingUntil = ms > 0 ? Math.max(this.workingUntil, Date.now() + ms) : 0;
+  /**
+   * An agent is at work for at least this long; zero means it's finished. Everyone looking at the canvas sees it.
+   * Agents have no identity, so each `init` counts as one more and it only stops once each has finished, or time runs out.
+   */
+  working(ms, joining = false) {
+    if (!this.workingLeft()) this.agents = 0;
+    if (joining) this.agents++;
+    if (ms > 0) this.workingUntil = Math.max(this.workingUntil, Date.now() + ms);
+    else if (--this.agents <= 0) {
+      this.agents = 0;
+      this.workingUntil = 0;
+    }
     const left = this.workingLeft();
     this.broadcast({ t: "working", ms: left });
     if (this.data.remote) edge(`/api/canvases/${this.data.remote.id}/working`, { method: "POST", body: JSON.stringify({ ms: left }) }).catch(() => {
@@ -765,7 +952,10 @@ var Canvas = class {
     this.sockets.add(socket);
     touch();
     const self = randomId(10);
-    socket.on("close", () => this.sockets.delete(socket));
+    socket.on("close", () => {
+      this.sockets.delete(socket);
+      this.closeServersWhenUnwatched();
+    });
     socket.on("message", (raw) => {
       let message;
       try {
@@ -782,23 +972,105 @@ var Canvas = class {
       t: "hello",
       self,
       role: "owner",
-      doc: { id: this.id, name: this.data.name, frames },
-      threads: [],
+      doc: { id: this.id, name: this.data.name, frames, strokes: this.data.strokes ?? [] },
+      threads: this.data.threads ?? [],
       peers: [this.peer(self)],
-      capabilities: { comments: false, huddle: false },
+      // Shared but signed out, this is a copy the room can't hear about.
+      capabilities: { comments: !this.data.remote, huddle: false },
       working: this.workingLeft()
     }));
   }
   attachEvents(socket) {
     this.events.add(socket);
-    socket.on("close", () => this.events.delete(socket));
+    socket.on("close", () => {
+      this.events.delete(socket);
+      this.contexts.delete(socket);
+    });
+    socket.on("message", (raw) => {
+      let message;
+      try {
+        message = JSON.parse(String(raw));
+      } catch {
+        return;
+      }
+      const context = message?.t === "context" ? cleanContext(message.context) : null;
+      if (context) this.contexts.set(socket, { context, at: Date.now() });
+    });
+  }
+  /** What the person means by "this", from whichever of their windows changed it last. Null when none is open. */
+  context() {
+    let latest = null;
+    for (const entry of this.contexts.values()) if (!latest || entry.at > latest.at) latest = entry;
+    return latest?.context ?? null;
+  }
+  // ---------- comments, while local ----------
+  author() {
+    const me = credential?.me, id = me?.id || "local";
+    return { id, name: me?.name || "You", picture: me?.picture || null, color: colorOf(id) };
+  }
+  thread(id) {
+    return (this.data.threads ?? []).find((thread) => thread.id === id);
+  }
+  putThread(thread) {
+    const threads = this.data.threads ??= [], index = threads.findIndex((item) => item.id === thread.id);
+    if (index < 0) threads.push(thread);
+    else threads[index] = thread;
+    this.broadcast({ t: "thread", thread });
+    this.save();
+  }
+  dropThread(id) {
+    this.data.threads = (this.data.threads ?? []).filter((thread) => thread.id !== id);
+    this.broadcast({ t: "thread.remove", id });
+    this.save();
+  }
+  frameIdOf(id) {
+    return typeof id === "string" && this.data.frames.some((frame) => frame.id === id) ? id : null;
+  }
+  handleComment(m) {
+    const text2 = (value) => typeof value === "string" ? value.trim().slice(0, LIMITS.commentChars) : "";
+    const comment = (value) => ({ id: randomId(12), author: this.author(), text: value, createdAt: Date.now() });
+    switch (m.t) {
+      case "thread.create": {
+        const value = text2(m.text);
+        if (!value || !finite(m.x) || !finite(m.y) || typeof m.id !== "string" || !THREAD_ID.test(m.id) || this.thread(m.id)) return;
+        const first = comment(value);
+        return this.putThread({ id: m.id, frameId: this.frameIdOf(m.frameId), x: m.x, y: m.y, resolved: false, createdAt: first.createdAt, comments: [first] });
+      }
+      case "thread.move": {
+        const thread = this.thread(m.id);
+        if (thread && finite(m.x) && finite(m.y)) this.putThread({ ...thread, frameId: this.frameIdOf(m.frameId), x: m.x, y: m.y });
+        return;
+      }
+      case "thread.resolve": {
+        const thread = this.thread(m.id);
+        if (thread) this.putThread({ ...thread, resolved: !!m.resolved });
+        return;
+      }
+      case "thread.delete":
+        if (this.thread(m.id)) this.dropThread(m.id);
+        return;
+      case "comment.add": {
+        const thread = this.thread(m.threadId), value = text2(m.text);
+        if (thread && value) this.putThread({ ...thread, comments: [...thread.comments, comment(value)] });
+        return;
+      }
+      case "comment.delete": {
+        const thread = this.thread(m.threadId);
+        if (!thread || !thread.comments.some((item) => item.id === m.id)) return;
+        if (thread.comments[0].id === m.id) return this.dropThread(thread.id);
+        this.putThread({ ...thread, comments: thread.comments.filter((item) => item.id !== m.id) });
+      }
+    }
   }
   async handle(socket, m) {
     if (m.t === "ping") return socket.send('{"t":"pong"}');
     if (this.data.remote) return;
     if (m.t === "frame.patch") return this.applyPatch(m.id, m.patch);
+    if (m.t.startsWith("thread.") || m.t.startsWith("comment.")) return this.handleComment(m);
     if (m.t === "frame.remove") {
       const before = this.data.frames.length;
+      const removed = this.data.frames.find((frame) => frame.id === m.id);
+      if (removed) this.removedSources.set(removed.id, removed.source);
       this.data.frames = this.data.frames.filter((frame) => frame.id !== m.id);
       if (this.data.frames.length !== before) {
         this.broadcast({ t: "frame.remove", id: m.id });
@@ -809,9 +1081,25 @@ var Canvas = class {
     if (m.t === "frame.restore") {
       const f = m.frame;
       if (this.data.frames.some((frame) => frame.id === f.id)) return;
-      const restored = { id: f.id, title: f.title, x: f.x, y: f.y, w: f.w, h: f.h, z: f.z, entry: f.entry, content: f.content, level: f.level, hasPoster: !!f.posterUrl, updatedAt: Date.now() };
+      const restored = { id: f.id, title: f.title, x: f.x, y: f.y, w: f.w, h: f.h, z: f.z, entry: f.entry, content: f.content, level: f.level, hasPoster: !!f.posterUrl, updatedAt: Date.now(), source: this.removedSources.get(f.id) };
       this.data.frames.push(restored);
-      this.broadcast({ t: "frame.upsert", frame: await this.toFrame(restored) });
+      await this.announce(restored);
+      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;
     }
@@ -832,16 +1120,16 @@ var Canvas = class {
     frame.w = Math.max(40, Math.min(8e3, frame.w));
     frame.h = Math.max(40, Math.min(8e3, frame.h));
     frame.updatedAt = Date.now();
-    this.broadcast({ t: "frame.upsert", frame: await this.toFrame(frame) });
+    await this.announce(frame);
     this.save();
     return frame;
   }
   /** Once shared, the room is the truth. Bring the local list up to date with it. */
   async pull() {
     if (!this.data.remote) return;
-    let doc;
+    let doc, threads;
     try {
-      ({ doc } = await edge(`/api/canvases/${this.data.remote.id}`));
+      ({ doc, threads } = await edge(`/api/canvases/${this.data.remote.id}`));
     } catch (error) {
       if (error instanceof Failure && (error.status === 404 || error.status === 403)) {
         this.data.remote = null;
@@ -852,6 +1140,8 @@ var Canvas = class {
       throw error;
     }
     this.data.name = doc.name;
+    if (doc.strokes) this.data.strokes = doc.strokes;
+    if (threads) this.data.threads = threads;
     const known = new Map(this.data.frames.map((frame) => [frame.id, frame]));
     this.data.frames = doc.frames.map((frame) => ({
       id: frame.id,
@@ -865,7 +1155,8 @@ var Canvas = class {
       content: frame.content,
       level: frame.level,
       hasPoster: known.get(frame.id)?.hasPoster ?? !!frame.posterUrl,
-      updatedAt: frame.updatedAt
+      updatedAt: frame.updatedAt,
+      source: known.get(frame.id)?.source
     }));
     await this.saveNow();
   }
@@ -910,6 +1201,23 @@ 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) }) });
+      }
+      let batch = [], chars = 0;
+      const send = async () => {
+        if (batch.length) await edge(`/api/canvases/${created.id}/threads`, { method: "POST", body: JSON.stringify({ threads: batch }) });
+        batch = [];
+        chars = 0;
+      };
+      for (const thread of this.data.threads ?? []) {
+        const size2 = JSON.stringify(thread).length;
+        if (chars + size2 > THREAD_UPLOAD_CHARS) await send();
+        batch.push(thread);
+        chars += size2;
+      }
+      await send();
     } catch (error) {
       await edge(`/api/canvases/${created.id}`, { method: "DELETE" }).catch(() => {
       });
@@ -922,8 +1230,8 @@ var Canvas = class {
   }
   async unshare() {
     if (!this.data.remote) return;
-    await this.pull().catch(() => {
-    });
+    await this.pull();
+    if (!this.data.remote) return;
     await edge(`/api/canvases/${this.data.remote.id}`, { method: "DELETE" }).catch((error) => {
       if (error.status !== 404) throw error;
     });
@@ -933,16 +1241,24 @@ var Canvas = class {
   }
 };
 var canvases = /* @__PURE__ */ new Map();
-async function canvasById(id) {
+var opening = /* @__PURE__ */ new Map();
+function canvasById(id) {
   const open = canvases.get(id);
-  if (open) return open;
-  const project = (await readRegistry())[id];
-  if (!project) throw new Failure(404, "That canvas is not on this machine");
-  const data = await readCanvas(project).catch(() => null);
-  if (!data || data.id !== id) throw new Failure(404, "That canvas is not on this machine");
-  const canvas = new Canvas(project, data);
-  canvases.set(id, canvas);
-  return canvas;
+  if (open) return Promise.resolve(open);
+  let pending = opening.get(id);
+  if (!pending) {
+    pending = (async () => {
+      const project = (await readRegistry())[id];
+      if (!project) throw new Failure(404, "That canvas is not on this machine");
+      const data = await readCanvas(project).catch(() => null);
+      if (!data || data.id !== id) throw new Failure(404, "That canvas is not on this machine");
+      const canvas = new Canvas(project, data);
+      canvases.set(id, canvas);
+      return canvas;
+    })().finally(() => opening.delete(id));
+    opening.set(id, pending);
+  }
+  return pending;
 }
 async function canvasForProject(project) {
   const found = await findProject(project);
@@ -964,8 +1280,36 @@ var summary = (canvas) => ({
   name: canvas.data.name,
   local: `${DAEMON_ORIGIN}/${canvas.id}`,
   link: canvas.data.remote?.url || null,
-  frames: canvas.data.frames.map(({ id, title, x, y, w, h, entry, level: level2 }) => ({ id, title, x, y, w, h, entry, level: level2 }))
+  frames: canvas.data.frames.map(({ id, title, x, y, w, h, entry, level: level2, content, source }) => ({ id, title, x, y, w, h, entry, level: level2, content, source: source ?? null }))
 });
+function cleanContext(input) {
+  const c = input;
+  if (!c || typeof c !== "object" || !Array.isArray(c.frames)) return null;
+  const via = c.via === "fullscreen" || c.via === "interacting" || c.via === "selected" ? c.via : null;
+  const frames = c.frames.filter((id) => typeof id === "string").slice(0, LIMITS.canvasFrames);
+  return { via, frames, thread: typeof c.thread === "string" ? c.thread : null };
+}
+function commentsOf(canvas, thread) {
+  const me = credential?.me?.id;
+  const frame = thread.frameId ? canvas.data.frames.find((item) => item.id === thread.frameId) : void 0;
+  return {
+    id: thread.id,
+    frame: frame ? { id: frame.id, title: frame.title } : null,
+    // Where the pin is: in the frame's own pixels, or on the open canvas.
+    at: frame ? { x: Math.round(thread.x * frame.w), y: Math.round(thread.y * frame.h) } : { x: Math.round(thread.x), y: Math.round(thread.y) },
+    resolved: thread.resolved,
+    comments: thread.comments.map((comment) => ({ by: comment.author.name, mine: comment.author.id === "local" || comment.author.id === me, text: comment.text, at: new Date(comment.createdAt).toISOString() }))
+  };
+}
+var visibleThreads = (canvas) => (canvas.data.threads ?? []).filter((thread) => !thread.frameId || canvas.data.frames.some((frame) => frame.id === thread.frameId));
+function contextOf(canvas) {
+  const context = canvas.context();
+  if (!context) return { looking: false, via: null, frames: [], comment: null };
+  const frames = context.frames.flatMap((id) => canvas.data.frames.filter((frame) => frame.id === id)).map(({ id, title, w, h, entry, source }) => ({ id, title, w, h, entry, source: source ?? null }));
+  const thread = visibleThreads(canvas).find((item) => item.id === context.thread);
+  return { looking: true, via: frames.length ? context.via : null, frames, comment: thread ? commentsOf(canvas, thread) : null };
+}
+var initTurn = inOrder();
 function findFrame(canvas, ref) {
   const byId = canvas.data.frames.find((frame) => frame.id === ref);
   if (byId) return byId;
@@ -976,6 +1320,7 @@ function findFrame(canvas, ref) {
 async function command(name, input) {
   touch();
   if (name === "stop") {
+    if (input.ifIdle && inFlight > 1) return { stopped: false };
     setTimeout(() => process.exit(0), 50);
     return { stopped: true };
   }
@@ -998,18 +1343,21 @@ async function command(name, input) {
     return { signedIn: false };
   }
   if (name === "init") {
-    const project = input.project;
-    let found = await findProject(project);
-    if (!found) {
-      await ensureProjectDir(project);
-      await writeCanvas(project, { version: 1, id: randomId(12), name: String(input.name || "Untitled").slice(0, LIMITS.nameChars), frames: [], remote: null });
-      found = project;
-    }
-    const canvas2 = await canvasForProject(found);
-    if (input.rename && input.name && input.name !== canvas2.data.name) await rename3(canvas2, input.name);
-    if (input.open !== false && !canvas2.watchers) openBrowser(`${DAEMON_ORIGIN}/${canvas2.id}`);
-    canvas2.working(WORKING_MS);
-    return summary(canvas2);
+    return initTurn(async () => {
+      const project = input.project;
+      const nearest = await findProject(project);
+      let found = input.exact && nearest !== project ? null : nearest;
+      const created = !found;
+      if (!found) {
+        await ensureProjectDir(project);
+        await writeCanvas(project, { version: 1, id: randomId(12), name: String(input.name || "Untitled").slice(0, LIMITS.nameChars), frames: [], remote: null });
+        found = project;
+      }
+      const canvas2 = await canvasForProject(found);
+      if (input.open !== false && !canvas2.watchers) openBrowser(`${DAEMON_ORIGIN}/${canvas2.id}`);
+      canvas2.working(WORKING_MS, true);
+      return { ...summary(canvas2), created };
+    });
   }
   const canvas = await canvasForProject(input.project);
   if (name === "working") return { working: canvas.working(Number(input.ms) || 0) > 0 };
@@ -1018,9 +1366,17 @@ async function command(name, input) {
     switch (name) {
       case "list":
         return summary(canvas);
+      case "context":
+        return contextOf(canvas);
+      case "comments":
+        return { comments: visibleThreads(canvas).map((thread) => commentsOf(canvas, thread)) };
       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 +1410,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 +1425,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 }) });
@@ -1082,45 +1438,76 @@ async function patchFrame(canvas, id, patch) {
   await canvas.applyPatch(id, patch);
   await canvas.saveNow();
 }
+async function install2(canvas, id, folder, screenshot) {
+  await replaceFolder(folder, frameDir(canvas.project, id));
+  if (screenshot) {
+    const poster = posterFile(canvas.project, id);
+    await mkdir6(dirname3(poster), { recursive: true });
+    await copyFile(screenshot, poster);
+  }
+  return (await folderContent(frameDir(canvas.project, id))).content;
+}
+var placedFrame = ({ id, title, x, y, w, h }) => ({ id, title, x, y, w, h });
+var canvasResult = (canvas) => ({ local: `${DAEMON_ORIGIN}/${canvas.id}`, link: canvas.data.remote?.url || null, frames: canvas.data.frames.length });
 async function place(canvas, input) {
-  const position = nextPosition(canvas.data.frames, !!input.newRow);
-  const frame = {
-    id: input.id,
-    title: String(input.title).slice(0, LIMITS.titleChars),
-    w: input.w,
-    h: input.h,
-    x: typeof input.x === "number" ? input.x : position.x,
-    y: typeof input.y === "number" ? input.y : position.y,
-    z: canvas.data.frames.length,
-    entry: input.entry,
-    content: input.content,
-    level: input.level,
-    hasPoster: !!input.hasPoster,
-    updatedAt: Date.now()
-  };
-  if (canvas.data.remote) await canvas.uploadFrame(canvas.data.remote.id, frame);
-  canvas.data.frames.push(frame);
-  await canvas.saveNow();
-  canvas.broadcast({ t: "frame.upsert", frame: await canvas.toFrame(frame) });
+  const count = canvas.data.frames.length;
+  if (count + input.items.length > LIMITS.canvasFrames) throw new Failure(422, `A canvas can hold ${LIMITS.canvasFrames} frames, and this one has ${count}. Remove some, or start another: twombly init --canvas "Name"`);
+  const frames = [];
+  for (const item of input.items) {
+    const title = String(item.title).slice(0, LIMITS.titleChars);
+    const warnings = canvas.data.frames.some((other) => other.title === title) ? [`Another frame is already titled "${title}". Give each a distinct title, or use update to replace it.`] : [];
+    const content = await install2(canvas, item.id, item.folder, item.screenshot);
+    const position = nextPosition(canvas.data.frames, !!item.newRow);
+    const frame = {
+      id: item.id,
+      title,
+      w: item.w,
+      h: item.h,
+      x: typeof item.x === "number" ? item.x : position.x,
+      y: typeof item.y === "number" ? item.y : position.y,
+      z: canvas.data.frames.length,
+      entry: item.entry,
+      content,
+      level: item.level,
+      hasPoster: !!item.screenshot,
+      updatedAt: Date.now(),
+      source: typeof item.source === "string" ? item.source : void 0
+    };
+    if (canvas.data.remote) await canvas.uploadFrame(canvas.data.remote.id, frame);
+    canvas.data.frames.push(frame);
+    await canvas.saveNow();
+    await canvas.announce(frame);
+    frames.push({ ...placedFrame(frame), warnings });
+  }
   canvas.working(WORKING_TAIL_MS);
-  return { frame: { id: frame.id, title: frame.title, x: frame.x, y: frame.y, w: frame.w, h: frame.h }, canvas: { local: `${DAEMON_ORIGIN}/${canvas.id}`, link: canvas.data.remote?.url || null, frames: canvas.data.frames.length } };
+  return { frames, canvas: canvasResult(canvas) };
 }
 async function revise(canvas, input) {
-  const frame = canvas.data.frames.find((item) => item.id === input.id);
-  if (!frame) throw new Failure(404, "That frame is gone");
-  const next = { ...frame, updatedAt: Date.now() };
-  if (input.title) next.title = String(input.title).slice(0, LIMITS.titleChars);
-  for (const key of ["w", "h"]) if (typeof input[key] === "number") next[key] = input[key];
-  if (input.entry) next.entry = input.entry;
-  if (input.level) next.level = input.level;
-  if (input.content) next.content = input.content;
-  if (typeof input.hasPoster === "boolean") next.hasPoster = input.hasPoster;
-  if (canvas.data.remote) await canvas.uploadFrame(canvas.data.remote.id, next);
-  Object.assign(frame, next);
-  await canvas.saveNow();
-  canvas.broadcast({ t: "frame.upsert", frame: await canvas.toFrame(frame) });
+  const targets = input.items.map((item) => {
+    const frame = canvas.data.frames.find((other) => other.id === item.id);
+    if (!frame) throw new Failure(404, `"${item.label}" is gone. Run: twombly list`);
+    if (frame.content !== item.base) throw new Failure(409, `"${frame.title}" was updated by someone else while this was being checked, so nothing changed. Run twombly list, and update again only if you mean to replace their work.`);
+    return frame;
+  });
+  const frames = [];
+  for (const [index, item] of input.items.entries()) {
+    const frame = targets[index];
+    const next = { ...frame, updatedAt: Date.now() };
+    if (item.title) next.title = String(item.title).slice(0, LIMITS.titleChars);
+    for (const key of ["w", "h"]) if (typeof item[key] === "number") next[key] = item[key];
+    if (item.entry) next.entry = item.entry;
+    if (item.level) next.level = item.level;
+    if (typeof item.source === "string") next.source = item.source;
+    next.content = await install2(canvas, item.id, item.folder, item.screenshot);
+    if (item.screenshot) next.hasPoster = true;
+    if (canvas.data.remote) await canvas.uploadFrame(canvas.data.remote.id, next);
+    Object.assign(frame, next);
+    await canvas.saveNow();
+    await canvas.announce(frame);
+    frames.push({ ...placedFrame(frame), warnings: [] });
+  }
   canvas.working(WORKING_TAIL_MS);
-  return { frame: { id: frame.id, title: frame.title, x: frame.x, y: frame.y, w: frame.w, h: frame.h }, canvas: { local: `${DAEMON_ORIGIN}/${canvas.id}`, link: canvas.data.remote?.url || null, frames: canvas.data.frames.length } };
+  return { frames, canvas: canvasResult(canvas) };
 }
 var JSON_HEADERS = { "content-type": "application/json; charset=utf-8", "cache-control": "no-store" };
 var reply = (response, status, value) => {
@@ -1167,9 +1554,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 +1577,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.3.0+1793910384715", api: TOOL_API, 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,8 +1644,11 @@ 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 inFlight = 0;
 var idleTimer = null;
 function touch() {
   if (idleTimer) clearTimeout(idleTimer);
@@ -1252,6 +1666,8 @@ async function runDaemon() {
       response.end('{"error":"Forbidden"}');
       return;
     }
+    const counted = /^\/(cli|api\/canvases)\//.test(request.url || "");
+    if (counted) inFlight++;
     try {
       await route(request, response);
     } catch (error) {
@@ -1262,6 +1678,8 @@ async function runDaemon() {
       if (error instanceof Failure) return reply(response, error.status, { error: error.message, ...error.extra });
       console.error(error);
       reply(response, 500, { error: error instanceof Error ? error.message : "Something went wrong" });
+    } finally {
+      if (counted) inFlight--;
     }
   });
   const sockets = new WebSocketServer({ noServer: true });
@@ -1286,17 +1704,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 { dirname as dirname3 } from "node:path";
+import { mkdir as mkdir7, readFile as readFile6, stat as stat4, writeFile as writeFile6 } from "node:fs/promises";
+import { dirname as dirname4 } 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 +1734,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 +1764,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 +1780,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 +1803,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 +1838,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 mkdir7(dirname4(options.poster), { recursive: true });
+        await writeFile6(options.poster, shot);
       }
       const colors = await page.evaluate(async (base64) => {
         const image = new Image();
@@ -1423,40 +1860,84 @@ 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.3.0"}: put design explorations on a shared canvas.
 
-  init [--name "Name"] [--no-open]     create or reopen this project's canvas
+  init [--name "Name"] [--no-open]     create or join this folder's canvas
+  init --canvas "Name" [--no-open]     create or join a separate named canvas in this folder
+  canvases                             list the canvases this folder can reach
+      --canvas "Name" works on every command below, and picks that 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
+  context                              what the person has selected, open fullscreen or open as a comment
+  comments                             every comment, and which are the person's own
   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 +1952,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 = name === "canvases" ? [] : [...FLAGS[name] || [], "canvas"];
+  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 });
@@ -1513,18 +2000,31 @@ async function health() {
     return null;
   }
 }
+var builtAt = (build) => Number(build.split("+")[1]) || 0;
+var sleep = (ms) => new Promise((done) => setTimeout(done, ms));
+var IDLE_WAIT_MS = 6e4;
+var usable = (running) => !!running && (running.build === "0.3.0+1793910384715" || running.api === TOOL_API && builtAt(running.build) > builtAt("0.3.0+1793910384715"));
 async function ensureDaemon() {
   const running = await health();
-  if (running?.build === "0.1.0+1793887853207") return;
+  if (usable(running)) return;
   if (running) {
-    await fetch(`${DAEMON_ORIGIN}/cli/stop`, { method: "POST", body: "{}" }).catch(() => {
-    });
-    await new Promise((done) => setTimeout(done, 200));
+    if (builtAt(running.build) > builtAt("0.3.0+1793910384715")) fail("A newer twombly is running on this machine. Run this with twombly@latest.");
+    let stopped = false;
+    for (const end = Date.now() + IDLE_WAIT_MS; !stopped && Date.now() < end; ) {
+      const answer = await fetch(`${DAEMON_ORIGIN}/cli/stop`, { method: "POST", body: '{"ifIdle":true}' }).then((response) => response.json()).catch(() => ({ stopped: true }));
+      stopped = !!answer.stopped;
+      if (!stopped) await sleep(500);
+    }
+    if (!stopped) {
+      if (running.api === TOOL_API) return;
+      fail("The background server is busy with another agent's work. Try again in a minute.");
+    }
+    await sleep(200);
   }
   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;
+    await sleep(100);
+    if (usable(await health())) return;
   }
   fail(`Could not start the background server on port ${PORT}. Is something else using it?`);
 }
@@ -1543,32 +2043,181 @@ 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 copyFile2(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 copyFile2(source, join9(temporary, "index.html"));
   }
   return { folder: temporary, temporary, image: isImage };
 }
+var chosenCanvas;
+async function locate() {
+  if (chosenCanvas === void 0) return findProject(process.cwd());
+  return (await findNamed(process.cwd(), chosenCanvas))?.project ?? null;
+}
 async function currentProject() {
-  const project = await findProject(process.cwd());
-  if (!project) fail("No canvas here yet. Run: twombly init");
-  return project;
+  const project = await locate();
+  if (project) return project;
+  if (chosenCanvas !== void 0) fail(`No canvas "${chosenCanvas}" here. Run: twombly init --canvas "${chosenCanvas}"`);
+  const others = await canvasesAbove(process.cwd());
+  fail(others.length ? `This folder has no default canvas. Use --canvas with one of: ${others.map((entry) => `"${entry.name}"`).join(", ")}.` : "No canvas here yet. Run: twombly init");
 }
 async function markWorking() {
-  const project = await findProject(process.cwd());
-  if (project) await call("working", { project, ms: WORKING_TAIL_MS });
+  const project = await locate();
+  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, command2, item) {
+  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 items = jobs.map((job, index) => {
+      const { folder, image } = prepared.get(job.source);
+      return { id: job.id, folder, source: job.source, screenshot: results[index].screenshot, ...item(job, { result: results[index], folder, image, screenshot: results[index].screenshot }) };
+    });
+    const { frames, canvas } = await call(command2, { project, items });
+    const placed = frames.map(({ warnings, ...frame }, index) => {
+      const result = results[index];
+      return { frame, warnings: [...result.warnings, ...warnings], screenshot: result.screenshot ? posterFile(project, jobs[index].id) : void 0, contentSize: result.content };
+    });
+    if (!many) return print({ ok: true, placed: true, ...placed[0], canvas, next: NEXT });
+    print({ ok: true, placed: true, frames: placed.map(({ frame, ...rest }) => ({ ...frame, ...rest })), 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)
+    };
+  });
+  await placeFrames(project, many, jobs, "place", (job, { result, image }) => ({
+    title: job.label,
+    w: job.width,
+    h: result.height,
+    entry: job.entry,
+    level: level(job.flags, image ? "image" : "build"),
+    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(), bases = /* @__PURE__ */ new Map();
+  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);
+    bases.set(frame.id, frame.content);
+    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, "revise", (job, { result, image }) => ({
+    label: job.label,
+    base: bases.get(job.id),
+    title: text(job.flags, "title"),
+    w: job.flags.width !== void 0 ? job.width : void 0,
+    h: job.flags.height !== void 0 ? result.height : void 0,
+    entry: text(job.flags, "entry"),
+    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);
+  if (flags.canvas !== void 0) {
+    if (typeof flags.canvas !== "string" || !flags.canvas.trim()) fail("--canvas needs a name.");
+    chosenCanvas = flags.canvas.trim();
+  }
   switch (name) {
     case "__daemon":
       return runDaemon();
@@ -1580,31 +2229,46 @@ async function main() {
       return;
     case "--version":
     case "version":
-      process.stdout.write("0.1.0\n");
+      process.stdout.write("0.3.0\n");
       return;
     case "guide":
       process.stdout.write(SKILL_default);
       return;
     case "init": {
+      const next = "Frames must be static files that work with no server or network. Read how to adapt this project: twombly guide";
+      const open = flags["no-open"] === void 0, given = text(flags, "name");
+      if (chosenCanvas !== void 0) {
+        if (given) fail("Use --canvas or --name, not both. --canvas is the name.");
+        const found = await findNamed(process.cwd(), chosenCanvas);
+        const project2 = found?.project || namedProject(await findRoot(process.cwd()) || process.cwd(), chosenCanvas);
+        print({ ok: true, ...await call("init", { project: project2, exact: true, name: chosenCanvas, open }), next });
+        return;
+      }
       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 }) });
+      const result = await call("init", { project, name: given || defaultName(project), open });
+      const note = !result.created && given && given !== result.name ? `This folder's canvas is "${result.name}", and you've joined it. For a separate one: twombly init --canvas "${given}"` : void 0;
+      print({ ok: true, ...result, note, next });
+      return;
+    }
+    case "canvases": {
+      const found = await canvasesAbove(process.cwd());
+      print({ ok: true, canvases: found.map(({ name: name2, slug, frames, id, link }) => ({ name: name2, canvas: slug, frames, local: `${DAEMON_ORIGIN}/${id}`, link })) });
       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 +2281,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 }) });
@@ -1704,11 +2297,22 @@ async function main() {
     case "list":
       print({ ok: true, ...await call("list", { project: await currentProject() }) });
       return;
+    case "context":
+      print({ ok: true, ...await call("context", { project: await currentProject() }) });
+      return;
+    case "comments":
+      print({ ok: true, ...await call("comments", { project: await currentProject() }) });
+      return;
     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()) }) });
+      print({ ok: true, ...await call("status", { project: await locate() }) });
       return;
     case "remove": {
       if (!positional[0]) fail("twombly remove <frame>");
@@ -1722,6 +2326,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;