twombly 0.2.0 → 0.3.0

package/dist/cli.js

@@ -3,7 +3,7 @@
 // src/cli.ts
 import { spawn as spawn2 } from "node:child_process";
 import { randomBytes as randomBytes2 } from "node:crypto";
-import { copyFile, mkdir as mkdir7, mkdtemp, readFile as readFile7, rm as rm5, stat as stat5, writeFile as writeFile7 } 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 join9, resolve as resolve2 } from "node:path";
 import { fileURLToPath as fileURLToPath2 } from "node:url";
@@ -13,7 +13,7 @@ var LIMITS = {
   fileBytes: 25 * 1024 * 1024,
   frameBytes: 100 * 1024 * 1024,
   frameFiles: 5e3,
-  canvasFrames: 200,
+  canvasFrames: 500,
   scanBytes: 8 * 1024 * 1024,
   titleChars: 120,
   nameChars: 120,
@@ -244,6 +244,12 @@ function cleanStroke(input) {
 }
 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) {
@@ -255,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 every command as `npx -y twombly@latest <command>`; this guide shortens that to `twombly <command>`. Output is JSON.\n\n## The rule that decides everything\n\n**A frame is a folder of static files that runs with no server and no network.** It can use anything in its own folder and nothing else. The browser enforces this: outside requests, form posts and server code all fail, locally and once shared.\n\nThe person's repo may have a database, an API, auth and environment keys. None of that goes in a frame. Your job is to adapt the design so it works without them:\n\n- **Data and APIs:** replace with realistic mock data, written inline or as JSON in the folder. For public CMS content, save a snapshot as JSON when you build.\n- **Auth and providers:** skip login, and mount the design with mock providers and a fake signed-in user.\n- **Environment values:** never include them. Build with none set. Don't copy `.env` files. If the build needs a value to compile, use an obviously fake one. **Never run or read a secret manager such as Infisical or Doppler for this, even if the project is set up for it.** If you can't get what you need without one, ask the person.\n- **Analytics and widgets:** remove tag managers, analytics, chat widgets and similar scripts, including any in page templates such as `app.html` or `_document`.\n- **Real customer data:** never copy it from a database, fixture or log. Invent names, emails and numbers. The gates can't detect this, so it's on you. Links are public.\n- **Fonts, images and video:** copy the files into the folder with relative or root paths. For a hosted font such as Google Fonts, download the files and use `@font-face`; Google only serves `woff2` to a browser user agent. If a font is licensed, tell the person it will be publicly hosted. Add up media sizes before downloading, take only what the design shows, and compress video.\n- **One screen of a routed app:** a router reads the page's address, which won't match the screen you want. Write a small entry file that mounts that screen with a memory or hash router, instead of trying to reach its route.\n\n## Limits\n\n100 MB per frame, 25 MB per file, 5000 files per frame, 200 frames per canvas. A URL can't be added, not even `localhost`: build it or `capture` it. Refused files: `.env`, credentials, keys, databases, source maps, server code, `node_modules` and project files such as `package.json`. Pop-ups, camera and microphone are off.\n\n## Steps\n\n1. **Start the canvas.** From the project root, or in a monorepo from the app's own folder so `.twombly/work` can find its packages: `twombly init --name \"Notification Explorations\" --no-open`. Pick a short, specific name. Run it once per canvas. The result's `local` field is the canvas's address.\n2. **Open it beside the chat.** The person should see the canvas next to this conversation, in the app they're already using. Open the `local` address in that app's built-in browser: the Claude desktop app's browser pane, the ChatGPT app's in-app browser, or the built-in browser in Cursor, VS Code or any other editor. Only if the app has none, run `twombly open`, which uses their default browser.\n3. **Build each version** as its own static folder, keeping work under `.twombly/work/<version>` so the person's source stays clean. Use the first approach below that works. The canvas background moves so people can see you're at work: `init` and the slow commands keep it going for three minutes. Run `twombly working` only before a longer gap.\n4. **Add it:** `twombly add <folder> --title \"V1 Compact\" --width 1280 --height 800 --level build`, saying which level below it is. Use the design's real size, such as `--width 390 --height 844` for a phone. Use `--height auto` to fit a tall page.\n5. **Read the output.** If `ok` is false, fix every item in `problems` and run `add` again. Each one includes a `fix`. The frame isn't placed until it passes.\n6. **Look at it.** The result has a `screenshot` path. Open it and check the frame shows the design you meant, with the content in the right state. The gates can't tell if a page came out unstyled or on the wrong screen; a common miss is Tailwind classes that were never generated. Tailwind 4 skips gitignored folders, so source copied into `.twombly` needs an `@source`.\n7. **Test interactions, if they matter.** Open the `url` from `twombly preview <frame>` in your browser tool and use the page inside its iframe. On the canvas, a frame ignores clicks until it's double-clicked, and frame URLs refuse to open on their own. Tell the person what you didn't test.\n8. **Finish:** run `twombly done` so the background goes still, then tell the person the canvas is open. They click Share when they're ready. The first time, Google sign-in opens in their regular browser, and sharing continues on its own once they finish.\n\n## Choosing how to build a frame\n\nUse the first one that fits. Say so if you end up lower than the first, because the frame is less faithful. **If the app has server routes, auth or a database, skip straight to `component`**: a static export of that kind of app rarely works and isn't worth the attempt.\n\n1. `--level build`: **a real static build.** Vite: `vite build --base ./ --outDir .twombly/work/v1`. Next.js: `output: 'export'` in a temporary config (static export can't use server features). SvelteKit: `adapter-static` with a `fallback`, `ssr = false` in the root layout, and any server `load` swapped for mock data in a universal `+layout.ts`. Astro: `astro build`. Plain HTML: use the folder as is. To show one state of a bigger app, add a build entry that renders just that screen.\n2. `--level component`: **the component on its own.** Write a tiny entry file that imports the real component with mock props, and bundle it with Vite or esbuild into a folder. This is the usual answer when the app needs a backend. It keeps the real code and styles.\n3. `--level capture`: **freeze what's on screen.** With the app already running: `twombly capture http://localhost:3000/page --out .twombly/work/v1 --width 1280 --height 800`, then add that folder. It looks right but no longer responds, because scripts are removed.\n4. `--level image`: **a picture**, as a last resort. `twombly capture <url> --out <folder> --image`, or `twombly add shot.png --title \"V1\"`.\n\nSeveral versions can share one build: read the variant from `location.search` and pass `--entry \"index.html?variant=2\"`. Shared files are only uploaded once.\n\nAdd several frames in one command, which is faster, instead of writing a loop. Nothing is placed unless all of them pass. Each item takes `folder`, `title`, `entry`, `width`, `height`, `level`, `newRow`, `x` and `y`, and flags on the command apply to all:\n\n```sh\ntwombly add out --width 1280 --height 800 --level component --frames '[{\"title\":\"A\",\"entry\":\"index.html?variant=a\"},{\"title\":\"B\",\"entry\":\"index.html?variant=b\"}]'\n```\n\n### Example: the component level with Vite\n\nFor most projects, this is all it takes. It works the same for React, Svelte or Vue with that framework's Vite plugin. Keep it under `.twombly/work`.\n\n```js\n// .twombly/work/vite.config.mjs\nimport { defineConfig } from 'vite';\nimport { resolve } from 'node:path';\nimport react from '@vitejs/plugin-react';\n\nconst root = resolve(import.meta.dirname, '../..');\nexport default defineConfig({\n  root: import.meta.dirname,\n  base: './',\n  plugins: [react()],\n  resolve: { alias: { '@': root } }, // match the project's path aliases\n  define: { 'process.env': {} },\n  build: { outDir: 'out', emptyOutDir: true, sourcemap: false },\n});\n```\n\n```html\n<!-- .twombly/work/index.html -->\n<!doctype html><html><body><div id=\"root\"></div><script type=\"module\" src=\"./main.jsx\"></script></body></html>\n```\n\n```jsx\n// .twombly/work/main.jsx: the real component, the real styles, invented data.\nimport { createRoot } from 'react-dom/client';\nimport '@/styles/globals.css';\nimport { Composer } from '@/components/composer';\n\nconst variant = new URLSearchParams(location.search).get('variant');\ncreateRoot(document.getElementById('root')).render(<Composer variant={variant} onSend={() => {}} messages={MOCK_MESSAGES} />);\n```\n\nThen: `npx vite build --config .twombly/work/vite.config.mjs` and `twombly add .twombly/work/out --title \"A\" --entry \"index.html?variant=a\" --level component`. If the project uses Tailwind, add its Vite or PostCSS plugin to the config so the classes are generated.\n\n## Commands\n\n`twombly help` lists every command and flag. `<frame>` is a frame's id or its exact title. Frames fill in left to right; use `--new-row` to start a new group, for example one row per direction.\n\nUse `update` to change a version. Don't remove and re-add it, because that loses its comments. It keeps the frame's entry and size unless you change them. Each frame keeps its own copy of its files, so after rebuilding, update the set together: `twombly update out --frames '[{\"frame\":\"A\"},{\"frame\":\"B\"}]'`. Nothing changes unless all of them pass.\n\n## Sharing\n\nThe person shares by clicking Share. Only run `twombly share` if they explicitly ask you to, because it publishes the canvas to a public link. If they ask you to take it down, run `twombly unshare`. That deletes the link and its comments and leaves the local canvas.\n\nOnce it's shared, every `add`, `update`, `move` and `remove` goes live immediately. Check your work with `twombly check` before updating a canvas people are looking at.\n";
+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";
@@ -410,9 +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 { extname as extname2, join as join8 } from "node:path";
+import { dirname as dirname3, extname as extname2, join as join8 } from "node:path";
 import { WebSocketServer, WebSocket } from "ws";
 
 // src/credentials.ts
@@ -429,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);
@@ -586,7 +593,7 @@ var checkedAt = 0;
 function interfaceFolders() {
   if (OVERRIDE) return [OVERRIDE];
   const folder = (released) => join5(STORE, String(released));
-  return [...saved.filter((released) => released > 1793896544071).map(folder), BUNDLED, ...saved.filter((released) => released <= 1793896544071).map(folder)];
+  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);
@@ -620,7 +627,7 @@ async function check() {
   const release = unpack(body);
   if (!release) return;
   etag = response.headers.get("etag") || "";
-  if (release.released > Math.max(saved[0] ?? 0, 1793896544071)) await install(release.released, release.files);
+  if (release.released > Math.max(saved[0] ?? 0, 1793910384715)) await install(release.released, release.files);
 }
 function startCheck() {
   if (checking) return;
@@ -660,6 +667,44 @@ async function findProject(from) {
     dir = up;
   }
 }
+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`);
@@ -675,6 +720,7 @@ async function ensureProjectDir(project) {
   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";
@@ -700,12 +746,16 @@ async function folderContent(folder) {
   return { files, content: await contentHash(files) };
 }
 async function replaceFolder(source, target) {
-  const temp = `${target}.${process.pid}.tmp`;
+  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 rm4(target, { recursive: true, force: true });
+  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 = join6(HOME, "registry.json");
 async function readRegistry() {
@@ -715,12 +765,17 @@ async function readRegistry() {
     return {};
   }
 }
-async function register(id, project) {
-  const registry = await readRegistry();
-  if (registry[id] === project) return;
-  registry[id] = project;
-  await mkdir4(HOME, { recursive: true });
-  await writeFile4(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
@@ -782,6 +837,10 @@ async function edge(path, init = {}) {
   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;
@@ -791,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;
@@ -807,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}`;
@@ -848,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(() => {
@@ -865,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 {
@@ -883,22 +973,104 @@ var Canvas = class {
       self,
       role: "owner",
       doc: { id: this.id, name: this.data.name, frames, strokes: this.data.strokes ?? [] },
-      threads: [],
+      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 });
@@ -909,9 +1081,9 @@ 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;
     }
@@ -948,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;
@@ -969,6 +1141,7 @@ var Canvas = class {
     }
     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,
@@ -982,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();
   }
@@ -1031,6 +1205,19 @@ var Canvas = class {
       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(() => {
       });
@@ -1043,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;
     });
@@ -1054,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);
@@ -1085,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;
@@ -1097,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 };
   }
@@ -1119,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 rename4(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 };
@@ -1139,6 +1366,10 @@ 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);
@@ -1207,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) => {
@@ -1331,7 +1593,7 @@ async function servePreview(response, canvasId, frameId) {
 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.2.0+1793896544071", 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");
@@ -1386,6 +1648,7 @@ async function route(request, response) {
   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);
@@ -1403,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) {
@@ -1413,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 });
@@ -1443,8 +1710,8 @@ async function runDaemon() {
 
 // src/gates.ts
 import { createServer as createServer3 } from "node:http";
-import { mkdir as mkdir6, readFile as readFile6, stat as stat4, writeFile as writeFile6 } 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 scanFolder(folder) {
   const problems = [];
@@ -1571,7 +1838,7 @@ async function browserGates(folder, options, launch) {
     const shot = await page.locator("#frame").screenshot({ type: "png", timeout: 15e3 }).catch(() => null);
     if (shot) {
       if (options.poster) {
-        await mkdir6(dirname3(options.poster), { recursive: true });
+        await mkdir7(dirname4(options.poster), { recursive: true });
         await writeFile6(options.poster, shot);
       }
       const colors = await page.evaluate(async (base64) => {
@@ -1635,9 +1902,12 @@ async function runGates(folder, options) {
 }
 
 // src/cli.ts
-var HELP = `twombly ${"0.2.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]
@@ -1650,6 +1920,8 @@ var HELP = `twombly ${"0.2.0"}: put design explorations on a shared canvas.
       [--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
@@ -1688,7 +1960,7 @@ function parse(argv) {
   return { positional, flags };
 }
 function checkFlags(name, flags) {
-  const known = FLAGS[name] || [];
+  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.`}`);
   }
@@ -1728,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.2.0+1793896544071") 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.2.0+1793896544071") return;
+    await sleep(100);
+    if (usable(await health())) return;
   }
   fail(`Could not start the background server on port ${PORT}. Is something else using it?`);
 }
@@ -1761,20 +2046,27 @@ async function prepare(source) {
   const temporary = await mkdtemp(join9(tmpdir(), "twombly-"));
   if (isImage) {
     const name = `image${extension}`;
-    await copyFile(source, join9(temporary, name));
+    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, join9(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());
+  const project = await locate();
   if (project) await call("working", { project, ms: WORKING_MS });
 }
 function gateFailure(result) {
@@ -1808,7 +2100,7 @@ async function frameItems(flags, known) {
     return merged;
   });
 }
-async function placeFrames(project, many, jobs, place2) {
+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 = [];
@@ -1836,19 +2128,17 @@ async function placeFrames(project, many, jobs, place2) {
         warnings: results.flatMap((result, index) => result.warnings.map((warning) => `${jobs[index].label}: ${warning}`))
       });
     }
-    const placed = [];
-    for (const [index, job] of jobs.entries()) {
-      const result = results[index], { folder, image } = prepared.get(job.source);
-      const poster = result.screenshot ? posterFile(project, job.id) : void 0;
-      await replaceFolder(folder, frameDir(project, job.id));
-      if (poster) {
-        await mkdir7(join9(project, ".twombly/posters"), { recursive: true });
-        await copyFile(result.screenshot, poster);
-      }
-      placed.push({ ...await place2(job, { result, folder, image, poster }), warnings: result.warnings, screenshot: poster, contentSize: result.content });
-    }
-    if (!many) return print({ ok: true, placed: true, ...placed[0], next: NEXT });
-    print({ ok: true, placed: true, frames: placed.map(({ frame, canvas: _, ...rest }) => ({ ...frame, ...rest })), canvas: placed[placed.length - 1].canvas, next: NEXT });
+    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 });
@@ -1872,30 +2162,20 @@ async function addFrames(project, source, many, items) {
       id: randomBytes2(8).toString("hex").replace(/[01lo]/g, "a").slice(0, 12)
     };
   });
-  const titles = (await call("list", { project })).frames.map((frame) => frame.title);
-  await placeFrames(project, many, jobs, async (job, { result, image, poster }) => {
-    const { content } = await folderContent(frameDir(project, job.id));
-    if (titles.includes(job.label)) result.warnings.push(`Another frame is already titled "${job.label}". Give each a distinct title, or use update to replace it.`);
-    titles.push(job.label);
-    return call("place", {
-      project,
-      id: job.id,
-      title: job.label,
-      w: job.width,
-      h: result.height,
-      entry: job.entry,
-      content,
-      level: level(job.flags, image ? "image" : "build"),
-      hasPoster: !!poster,
-      x: number(job.flags, "x"),
-      y: number(job.flags, "y"),
-      newRow: job.flags["new-row"] === true
-    });
-  });
+  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();
+  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>");
@@ -1904,6 +2184,7 @@ async function updateFrames(project, source, many, items) {
     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,
@@ -1915,20 +2196,15 @@ async function updateFrames(project, source, many, items) {
       height: flags.height === "auto" ? "auto" : size(flags, "height", frame.h)
     };
   });
-  await placeFrames(project, many, jobs, async (job, { result, image, poster }) => {
-    const { content } = await folderContent(frameDir(project, job.id));
-    return call("revise", {
-      project,
-      id: job.id,
-      title: text(job.flags, "title"),
-      w: job.width,
-      h: result.height,
-      entry: job.entry,
-      content,
-      hasPoster: poster ? true : void 0,
-      level: text(job.flags, "level") || image ? level(job.flags, image ? "image" : "build") : void 0
-    });
-  });
+  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);
@@ -1938,6 +2214,10 @@ async function main() {
     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();
@@ -1949,15 +2229,30 @@ async function main() {
       return;
     case "--version":
     case "version":
-      process.stdout.write("0.2.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 }), next: "Frames must be static files that work with no server or network. Read how to adapt this project: twombly guide" });
+      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": {
@@ -2002,6 +2297,12 @@ 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;
@@ -2011,7 +2312,7 @@ async function main() {
       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>");