twombly 0.3.0 → 0.4.1

package/dist/cli.js

@@ -2,10 +2,10 @@
 
 // src/cli.ts
 import { spawn as spawn2 } from "node:child_process";
-import { randomBytes as randomBytes2 } from "node:crypto";
-import { copyFile as copyFile2, mkdtemp, readFile as readFile7, rm as rm5, stat as stat5, writeFile as writeFile7 } from "node:fs/promises";
+import { randomBytes as randomBytes3 } from "node:crypto";
+import { copyFile as copyFile2, mkdtemp, readFile as readFile8, rm as rm6, stat as stat5, writeFile as writeFile8 } 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 { basename as basename2, extname as extname3, join as join10, resolve as resolve2 } from "node:path";
 import { fileURLToPath as fileURLToPath2 } from "node:url";
 
 // ../protocol/src/gates.ts
@@ -33,6 +33,7 @@ var FORBIDDEN = [
   { test: /\.map$/i, code: "SOURCE_MAP", what: "a source map", fix: "Source maps publish original source code. Turn them off in the build or delete the .map files." },
   { test: /(^|\/)\.next\/(server|cache)(\/|$)/, code: "SERVER_CODE", what: "server output from Next.js", fix: 'Use a static export (output: "export") and add its output folder.' },
   { test: /\.(php|rb|py|go|rs|java|cs|sh|bash|zsh|exe|dll|so|dylib)$/i, code: "SERVER_CODE", what: "server or native code" },
+  { test: /\.(zip|7z|rar|tar|tgz|dmg|pkg|mpkg|msi|msix|appx|apk|aab|ipa|jar|deb|rpm|appimage|iso|bat|cmd|ps1|vbs|scr|xpi|crx)$/i, code: "DOWNLOAD_FILE", what: "an installer or archive", fix: "Frames show a design; they don't hand out files. Delete it from the folder." },
   { test: /(^|\/)(package(-lock)?\.json|pnpm-lock\.yaml|yarn\.lock|bun\.lockb?|tsconfig\.json|wrangler\.(toml|jsonc?)|dockerfile|docker-compose\.ya?ml)$/i, code: "PROJECT_FILE", what: "a project file", fix: "That looks like a project folder. Build first and add the output folder only." }
 ];
 function checkPath(path) {
@@ -198,7 +199,7 @@ function frameCsp(ancestors) {
     `frame-ancestors ${ancestors.join(" ")}`
   ].join("; ");
 }
-var FRAME_SANDBOX = "allow-scripts allow-same-origin allow-forms allow-modals allow-pointer-lock allow-downloads";
+var FRAME_SANDBOX = "allow-scripts allow-same-origin allow-forms allow-modals allow-pointer-lock";
 var FRAME_BRIDGE_PATH = "/__twombly/bridge.js";
 var FRAME_POSTER_PATH = "/__twombly/poster.png";
 var FRAME_BRIDGE_JS = `(() => {
@@ -244,6 +245,9 @@ function cleanStroke(input) {
 }
 var WORKING_MS = 3 * 6e4;
 var WORKING_TAIL_MS = 3e4;
+function cleanSettings(value) {
+  return { invertScroll: value?.invertScroll === true, theme: value?.theme === "light" || value?.theme === "dark" ? value.theme : void 0 };
+}
 var COLORS = ["#F24822", "#FF7A00", "#14AE5C", "#0D99FF", "#9747FF", "#E5277B", "#00B5B8", "#7B61FF"];
 function colorOf(id) {
   let h = 0;
@@ -261,7 +265,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, 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";
+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. 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";
@@ -303,7 +307,7 @@ async function capture(url, out, options) {
       return { folder: out, assets: 1, failed: [] };
     }
     const saved2 = /* @__PURE__ */ new Map(), failed = [];
-    const save = async (assetUrl) => {
+    const save2 = async (assetUrl) => {
       if (assetUrl.startsWith("data:") || assetUrl.startsWith("blob:")) return null;
       if (saved2.has(assetUrl)) return saved2.get(assetUrl);
       try {
@@ -333,7 +337,7 @@ async function capture(url, out, options) {
         } catch {
           continue;
         }
-        const name = await save(absolute);
+        const name = await save2(absolute);
         if (!name) continue;
         output = output.split(match[0]).join(`url("${from === "css" ? name.replace("assets/", "") : name}")`);
       }
@@ -391,7 +395,7 @@ async function capture(url, out, options) {
     });
     const replacements = [];
     for (const attribute of found.attributes) {
-      const name = await save(attribute.value);
+      const name = await save2(attribute.value);
       if (name) replacements.push({ tag: attribute.tag, name: attribute.name, value: name });
     }
     const styles = await Promise.all(found.styles.map((style) => rewriteCss(style, found.base, "html")));
@@ -414,11 +418,11 @@ async function capture(url, out, options) {
 }
 
 // src/daemon.ts
-import { createHash as createHash3, randomBytes } from "node:crypto";
+import { createHash as createHash3, randomBytes as randomBytes2 } from "node:crypto";
 import { createReadStream as createReadStream2 } from "node:fs";
-import { copyFile, mkdir as mkdir6, readFile as readFile5, stat as stat3 } from "node:fs/promises";
+import { copyFile, mkdir as mkdir7, readFile as readFile6, stat as stat3 } from "node:fs/promises";
 import { createServer as createServer2 } from "node:http";
-import { dirname as dirname3, extname as extname2, join as join8 } from "node:path";
+import { dirname as dirname3, extname as extname2, join as join9 } from "node:path";
 import { WebSocketServer, WebSocket } from "ws";
 
 // src/credentials.ts
@@ -593,7 +597,7 @@ 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)];
+  return [...saved.filter((released) => released > 1793935262296).map(folder), BUNDLED, ...saved.filter((released) => released <= 1793935262296).map(folder)];
 }
 function unpack(body) {
   const { payload, signature } = JSON.parse(body);
@@ -627,7 +631,7 @@ async function check() {
   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);
+  if (release.released > Math.max(saved[0] ?? 0, 1793935262296)) await install(release.released, release.files);
 }
 function startCheck() {
   if (checking) return;
@@ -783,8 +787,7 @@ import { mkdir as mkdir5, readFile as readFile4, rename as rename3, writeFile as
 import { join as join7 } from "node:path";
 var FILE = join7(HOME, "settings.json");
 async function readSettings() {
-  const saved2 = await readFile4(FILE, "utf8").then(JSON.parse).catch(() => null);
-  return { invertScroll: saved2?.invertScroll === true };
+  return cleanSettings(await readFile4(FILE, "utf8").then(JSON.parse).catch(() => null));
 }
 async function writeSettings(settings2) {
   await mkdir5(HOME, { recursive: true });
@@ -793,11 +796,89 @@ async function writeSettings(settings2) {
   await rename3(temporary, FILE);
 }
 
+// src/usage.ts
+import { randomBytes } from "node:crypto";
+import { existsSync } from "node:fs";
+import { mkdir as mkdir6, readFile as readFile5, rename as rename4, rm as rm5, writeFile as writeFile6 } from "node:fs/promises";
+import { homedir as homedir2 } from "node:os";
+import { join as join8 } from "node:path";
+var FILE2 = join8(HOME, "usage.json");
+var OFF = join8(HOME, "usage-off");
+var CHECK_MS2 = 36e5;
+var ERRORS_PER_RUN = 20;
+var state = null;
+var saving = null;
+var errorsSent = 0;
+var usageOn = () => process.env.TWOMBLY_NO_USAGE !== "1" && !existsSync(OFF);
+var scrub = (text2, max) => text2.split(homedir2()).join("~").slice(0, max);
+var today = () => (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
+var post = (path, body) => fetch(ENDPOINT + path, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(body), signal: AbortSignal.timeout(1e4) });
+async function setUsage(on) {
+  await mkdir6(HOME, { recursive: true });
+  if (on) await rm5(OFF, { force: true });
+  else await writeFile6(OFF, "");
+}
+async function load() {
+  const saved2 = await readFile5(FILE2, "utf8").then(JSON.parse).catch(() => null);
+  const install3 = typeof saved2?.install === "string" && /^[a-z0-9]{16,40}$/.test(saved2.install) ? saved2.install : randomBytes(12).toString("hex");
+  return { install: install3, day: typeof saved2?.day === "string" ? saved2.day : today(), counts: saved2?.counts && typeof saved2.counts === "object" ? saved2.counts : {} };
+}
+function save() {
+  if (saving) return;
+  saving = setTimeout(async () => {
+    saving = null;
+    if (!state) return;
+    await mkdir6(HOME, { recursive: true }).catch(() => {
+    });
+    const temporary = `${FILE2}.${process.pid}`;
+    await writeFile6(temporary, JSON.stringify(state)).then(() => rename4(temporary, FILE2)).catch(() => {
+    });
+  }, 1e3);
+}
+function tally(key, by = 1) {
+  if (!state || !usageOn()) return;
+  state.counts[key] = (state.counts[key] || 0) + by;
+  save();
+}
+async function flush() {
+  if (!state || state.day === today()) return;
+  const { day, counts } = state;
+  state.day = today();
+  state.counts = {};
+  save();
+  if (!usageOn() || !Object.values(counts).some(Boolean)) return;
+  const canvases2 = Object.keys(await readRegistry()).length;
+  await post("/api/usage", { install: state.install, day, version: "0.4.1", platform: process.platform, counts: { ...counts, canvases: canvases2 } }).catch(() => {
+  });
+}
+async function startUsage() {
+  state = await load();
+  await flush();
+  tally("starts");
+  setInterval(() => {
+    flush().catch(() => {
+    });
+  }, CHECK_MS2).unref();
+}
+function reportError(error, source = "tool") {
+  if (!usageOn() || ++errorsSent > ERRORS_PER_RUN) return;
+  post("/api/errors", {
+    source,
+    mode: "local",
+    install: state?.install,
+    version: "0.4.1",
+    type: String(error.type || "Error").slice(0, 80),
+    message: scrub(String(error.message), 500),
+    stack: scrub(String(error.stack || ""), 4e3)
+  }).catch(() => {
+  });
+}
+
 // src/daemon.ts
 var IDLE_MS = 6 * 36e5;
 var LOGIN_MS = 10 * 6e4;
 var ID_ALPHABET = "abcdefghijkmnpqrstuvwxyz23456789";
-var randomId = (length) => [...randomBytes(length)].map((b) => ID_ALPHABET[b % ID_ALPHABET.length]).join("");
+var randomId = (length) => [...randomBytes2(length)].map((b) => ID_ALPHABET[b % ID_ALPHABET.length]).join("");
 var Failure = class extends Error {
   status;
   extra;
@@ -812,7 +893,7 @@ var credential = null;
 var pendingLogin = null;
 function loginUrl() {
   if (!pendingLogin || Date.now() - pendingLogin.at > LOGIN_MS) {
-    pendingLogin = { state: randomBytes(24).toString("hex"), verifier: randomBytes(32).toString("base64url"), at: Date.now() };
+    pendingLogin = { state: randomBytes2(24).toString("hex"), verifier: randomBytes2(32).toString("base64url"), at: Date.now() };
   }
   const challenge = createHash3("sha256").update(pendingLogin.verifier).digest("base64url");
   return `${ENDPOINT}/auth/machine/start?` + new URLSearchParams({ port: String(PORT), state: pendingLogin.state, challenge });
@@ -820,6 +901,7 @@ function loginUrl() {
 function setCredential(next) {
   credential = next;
   for (const canvas of canvases.values()) canvas.event({ t: "auth", me: next?.me || null });
+  if (next) syncSettings();
 }
 async function edge(path, init = {}) {
   if (!credential) throw new Failure(401, "Sign in first");
@@ -836,6 +918,23 @@ 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;
 }
+async function useSettings(next) {
+  if (JSON.stringify(next) === JSON.stringify(settings)) return;
+  settings = next;
+  await writeSettings(settings);
+  for (const canvas of canvases.values()) canvas.event({ t: "settings", settings });
+}
+var settingsChosen = 0;
+function syncSettings() {
+  if (!credential) return;
+  const chosen = settingsChosen;
+  edge("/api/settings").then(({ settings: account }) => {
+    if (chosen !== settingsChosen) return;
+    if (account) return useSettings(account);
+    if (settings.invertScroll || settings.theme) return edge("/api/settings", { method: "POST", body: JSON.stringify(settings) });
+  }).catch(() => {
+  });
+}
 var STROKE_UPLOAD = 40;
 var THREAD_UPLOAD_CHARS = 5e5;
 var THREAD_ID = /^[a-z0-9]{8,32}$/;
@@ -1165,7 +1264,7 @@ var Canvas = class {
     const { files } = await folderContent(frameDir(this.project, frame.id));
     let poster = null, posterBytes = null;
     if (frame.hasPoster) {
-      posterBytes = await readFile5(posterFile(this.project, frame.id)).catch(() => null);
+      posterBytes = await readFile6(posterFile(this.project, frame.id)).catch(() => null);
       if (posterBytes) poster = createHash3("sha256").update(posterBytes).digest("hex");
     }
     const manifest = files.map(({ path, hash, size: size2 }) => ({ path, hash, size: size2 }));
@@ -1179,7 +1278,7 @@ var Canvas = class {
     await Promise.all(Array.from({ length: 6 }, async () => {
       while (next < queue.length) {
         const file2 = queue[next++];
-        await put(file2.hash, await readFile5(file2.absolute));
+        await put(file2.hash, await readFile6(file2.absolute));
       }
     }));
     if (poster && posterBytes && wanted.has(poster)) await put(poster, posterBytes);
@@ -1354,6 +1453,7 @@ async function command(name, input) {
         found = project;
       }
       const canvas2 = await canvasForProject(found);
+      if (created) tally("canvasesCreated");
       if (input.open !== false && !canvas2.watchers) openBrowser(`${DAEMON_ORIGIN}/${canvas2.id}`);
       canvas2.working(WORKING_MS, true);
       return { ...summary(canvas2), created };
@@ -1410,7 +1510,7 @@ async function command(name, input) {
         return summary(canvas);
       }
       case "rename":
-        await rename4(canvas, input.name);
+        await rename5(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.");
@@ -1425,7 +1525,7 @@ async function command(name, input) {
     }
   });
 }
-async function rename4(canvas, name) {
+async function rename5(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 }) });
@@ -1442,7 +1542,7 @@ 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 mkdir7(dirname3(poster), { recursive: true });
     await copyFile(screenshot, poster);
   }
   return (await folderContent(frameDir(canvas.project, id))).content;
@@ -1480,6 +1580,7 @@ async function place(canvas, input) {
     frames.push({ ...placedFrame(frame), warnings });
   }
   canvas.working(WORKING_TAIL_MS);
+  tally("framesAdded", frames.length);
   return { frames, canvas: canvasResult(canvas) };
 }
 async function revise(canvas, input) {
@@ -1507,6 +1608,7 @@ async function revise(canvas, input) {
     frames.push({ ...placedFrame(frame), warnings: [] });
   }
   canvas.working(WORKING_TAIL_MS);
+  tally("framesUpdated", frames.length);
   return { frames, canvas: canvasResult(canvas) };
 }
 var JSON_HEADERS = { "content-type": "application/json; charset=utf-8", "cache-control": "no-store" };
@@ -1557,7 +1659,7 @@ async function serveUi(response, pathname) {
   let file2 = null;
   if (clean && !clean.includes("..")) {
     for (const folder of interfaceFolders()) {
-      const candidate = join8(folder, clean);
+      const candidate = join9(folder, clean);
       if ((await stat3(candidate).catch(() => null))?.isFile()) {
         file2 = candidate;
         break;
@@ -1566,7 +1668,7 @@ async function serveUi(response, pathname) {
   }
   if (!file2) {
     await freshInterface();
-    file2 = join8(interfaceFolders()[0], "index.html");
+    file2 = join9(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" };
@@ -1593,15 +1695,15 @@ 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.3.0+1793910384715", api: TOOL_API, pid: process.pid });
+  if (path === "/health") return reply(response, 200, { ok: true, build: "0.4.1+1793935262296", 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");
+    const code = url.searchParams.get("code"), state2 = url.searchParams.get("state");
     const page = (text2, status = 200) => {
       response.writeHead(status, { "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'; script-src 'unsafe-inline'" });
       response.end(`<!doctype html><meta charset="utf-8"><title>Twombly</title><style>body{font:13px/1.5 -apple-system,system-ui,sans-serif;display:grid;place-items:center;height:100vh;margin:0}@media(prefers-color-scheme:dark){body{background:#1e1e1e;color:#fff}}</style><p>${text2}</p><script>setTimeout(()=>window.close(),600)</script>`);
     };
-    if (!code || !pendingLogin || state !== pendingLogin.state) return page("That sign-in expired. Try again.", 400);
+    if (!code || !pendingLogin || state2 !== pendingLogin.state) return page("That sign-in expired. Try again.", 400);
     const exchange = await fetch(`${ENDPOINT}/auth/machine/exchange`, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ code, verifier: pendingLogin.verifier }) });
     const data = await exchange.json().catch(() => ({}));
     pendingLogin = null;
@@ -1615,6 +1717,7 @@ async function route(request, response) {
     const canvas = id ? await canvasById(id).catch(() => null) : null;
     if (canvas?.data.remote) await canvas.pull().catch(() => {
     });
+    syncSettings();
     const body = {
       mode: "local",
       me: credential?.me || null,
@@ -1625,10 +1728,14 @@ async function route(request, response) {
   }
   if (path === "/api/login" && method === "POST") return reply(response, 200, await command("login", {}));
   if (path === "/api/settings" && method === "POST") {
-    const { invertScroll } = await readBody(request);
-    if (typeof invertScroll === "boolean") settings = { ...settings, invertScroll };
-    await writeSettings(settings);
-    for (const canvas of canvases.values()) canvas.event({ t: "settings", settings });
+    const { invertScroll, theme } = await readBody(request);
+    let next = settings;
+    settingsChosen++;
+    if (typeof invertScroll === "boolean") next = { ...next, invertScroll };
+    if (theme === "light" || theme === "dark") next = { ...next, theme };
+    await useSettings(next);
+    if (credential) await edge("/api/settings", { method: "POST", body: JSON.stringify(next) }).catch(() => {
+    });
     return reply(response, 200, settings);
   }
   const match = path.match(/^\/api\/canvases\/([a-z0-9]+)\/(ticket|share|unshare)$/);
@@ -1638,8 +1745,18 @@ async function route(request, response) {
       if (!canvas.data.remote || !credential) return reply(response, 200, { url: `ws://localhost:${PORT}/local/${canvas.id}` });
       return reply(response, 200, await edge(`/api/canvases/${canvas.data.remote.id}/ticket`, { method: "POST", body: "{}" }));
     }
-    if (match[2] === "share") return reply(response, 200, { url: await canvas.run(() => canvas.share()) });
+    if (match[2] === "share") {
+      const url2 = await canvas.run(() => canvas.share());
+      tally("shares");
+      return reply(response, 200, { url: url2 });
+    }
     await canvas.run(() => canvas.unshare());
+    tally("unshares");
+    return reply(response, 200, { ok: true });
+  }
+  if (path === "/api/errors" && method === "POST") {
+    const body = await readBody(request);
+    if (typeof body.message === "string") reportError(body, "canvas");
     return reply(response, 200, { ok: true });
   }
   if (path.startsWith("/api/")) return reply(response, 404, { error: "Not found" });
@@ -1660,6 +1777,7 @@ function touch() {
 async function runDaemon() {
   credential = await readCredential();
   settings = await readSettings();
+  syncSettings();
   const server = createServer2(async (request, response) => {
     if (!trusted(request)) {
       response.writeHead(403, JSON_HEADERS);
@@ -1677,6 +1795,7 @@ async function runDaemon() {
       }
       if (error instanceof Failure) return reply(response, error.status, { error: error.message, ...error.extra });
       console.error(error);
+      reportError(error instanceof Error ? { type: error.name, message: error.message, stack: error.stack } : { message: String(error) });
       reply(response, 500, { error: error instanceof Error ? error.message : "Something went wrong" });
     } finally {
       if (counted) inFlight--;
@@ -1696,7 +1815,10 @@ async function runDaemon() {
     }
     sockets.handleUpgrade(request, socket, head, (client) => {
       if (match[2]) canvas.attachEvents(client);
-      else canvas.attach(client).catch(() => client.close());
+      else {
+        tally("canvasViews");
+        canvas.attach(client).catch(() => client.close());
+      }
     });
   });
   await new Promise((resolve3, reject) => {
@@ -1706,11 +1828,13 @@ async function runDaemon() {
   touch();
   startInterfaceUpdates().catch(() => {
   });
+  startUsage().catch(() => {
+  });
 }
 
 // src/gates.ts
 import { createServer as createServer3 } from "node:http";
-import { mkdir as mkdir7, readFile as readFile6, stat as stat4, writeFile as writeFile6 } from "node:fs/promises";
+import { mkdir as mkdir8, readFile as readFile7, stat as stat4, writeFile as writeFile7 } 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) {
@@ -1727,7 +1851,7 @@ async function scanFolder(folder) {
       continue;
     }
     if (file2.size > LIMITS.fileBytes) problems.push({ code: "FILE_TOO_LARGE", message: `"${file2.path}" is ${(file2.size / 1048576).toFixed(1)} MB; the limit is ${LIMITS.fileBytes / 1048576} MB.`, fix: "Compress it, or swap in a smaller asset.", file: file2.path });
-    problems.push(...scanBytes(file2.path, await readFile6(file2.absolute)));
+    problems.push(...scanBytes(file2.path, await readFile7(file2.absolute)));
   }
   if (files.length > LIMITS.frameFiles) problems.push({ code: "TOO_MANY_FILES", message: `${files.length} files; the limit is ${LIMITS.frameFiles}.`, fix: "This looks like more than one built page. Add only what the frame needs." });
   if (bytes > LIMITS.frameBytes) {
@@ -1745,7 +1869,7 @@ function entryProblems(files, entry) {
 async function findReferences(folder, needle) {
   const found = [];
   for (const file2 of await hashFolder(folder)) {
-    const bytes = await readFile6(file2.absolute);
+    const bytes = await readFile7(file2.absolute);
     if (looksLikeText(bytes) && bytes.includes(needle)) found.push(file2.path);
     if (found.length === 3) break;
   }
@@ -1838,8 +1962,8 @@ 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 mkdir7(dirname4(options.poster), { recursive: true });
-        await writeFile6(options.poster, shot);
+        await mkdir8(dirname4(options.poster), { recursive: true });
+        await writeFile7(options.poster, shot);
       }
       const colors = await page.evaluate(async (base64) => {
         const image = new Image();
@@ -1902,7 +2026,7 @@ async function runGates(folder, options) {
 }
 
 // src/cli.ts
-var HELP = `twombly ${"0.3.0"}: put design explorations on a shared canvas.
+var HELP = `twombly ${"0.4.1"}: put design explorations on a shared 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
@@ -1925,6 +2049,7 @@ var HELP = `twombly ${"0.3.0"}: put design explorations on a shared canvas.
   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
+  usage on | off                       the daily counts and error reports this machine sends to Twombly
   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"]);
@@ -2003,12 +2128,12 @@ async function health() {
 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"));
+var usable = (running) => !!running && (running.build === "0.4.1+1793935262296" || running.api === TOOL_API && builtAt(running.build) > builtAt("0.4.1+1793935262296"));
 async function ensureDaemon() {
   const running = await health();
   if (usable(running)) return;
   if (running) {
-    if (builtAt(running.build) > builtAt("0.3.0+1793910384715")) fail("A newer twombly is running on this machine. Run this with twombly@latest.");
+    if (builtAt(running.build) > builtAt("0.4.1+1793935262296")) 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 }));
@@ -2043,13 +2168,13 @@ async function prepare(source) {
   const extension = extname3(source).toLowerCase();
   const isImage = IMAGE.has(extension);
   if (!isImage && extension !== ".html" && extension !== ".htm") fail("Point at a folder of static files, an HTML file or an image.");
-  const temporary = await mkdtemp(join9(tmpdir(), "twombly-"));
+  const temporary = await mkdtemp(join10(tmpdir(), "twombly-"));
   if (isImage) {
     const name = `image${extension}`;
-    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="">`);
+    await copyFile2(source, join10(temporary, name));
+    await writeFile8(join10(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 copyFile2(source, join9(temporary, "index.html"));
+    await copyFile2(source, join10(temporary, "index.html"));
   }
   return { folder: temporary, temporary, image: isImage };
 }
@@ -2082,7 +2207,7 @@ async function frameItems(flags, known) {
   const { frames: _, ...shared } = flags;
   let items;
   try {
-    items = JSON.parse(value.trimStart().startsWith("[") ? value : await readFile7(value, "utf8"));
+    items = JSON.parse(value.trimStart().startsWith("[") ? value : await readFile8(value, "utf8"));
   } catch (error) {
     fail(`--frames: ${error instanceof Error ? error.message : error}`);
   }
@@ -2102,7 +2227,7 @@ async function frameItems(flags, known) {
 }
 async function placeFrames(project, many, jobs, command2, item) {
   await markWorking();
-  const scratch = await mkdtemp(join9(tmpdir(), "twombly-gates-"));
+  const scratch = await mkdtemp(join10(tmpdir(), "twombly-gates-"));
   const gates = gateSession(), prepared = /* @__PURE__ */ new Map(), temporary = [];
   let keepScratch = false;
   try {
@@ -2117,7 +2242,7 @@ async function placeFrames(project, many, jobs, command2, item) {
     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`) });
+        results[index] = await gates.run(prepared.get(job.source).folder, { entry: job.entry, width: job.width, height: job.height, poster: join10(scratch, `${job.id}.png`) });
       }
     }));
     if (results.some((result) => !result.ok)) {
@@ -2141,8 +2266,8 @@ async function placeFrames(project, many, jobs, command2, item) {
     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 });
+    for (const folder of temporary) await rm6(folder, { recursive: true, force: true });
+    if (!keepScratch) await rm6(scratch, { recursive: true, force: true });
   }
 }
 async function addFrames(project, source, many, items) {
@@ -2159,7 +2284,7 @@ async function addFrames(project, source, many, items) {
       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)
+      id: randomBytes3(8).toString("hex").replace(/[01lo]/g, "a").slice(0, 12)
     };
   });
   await placeFrames(project, many, jobs, "place", (job, { result, image }) => ({
@@ -2229,7 +2354,7 @@ async function main() {
       return;
     case "--version":
     case "version":
-      process.stdout.write("0.3.0\n");
+      process.stdout.write("0.4.1\n");
       return;
     case "guide":
       process.stdout.write(SKILL_default);
@@ -2260,15 +2385,15 @@ async function main() {
       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(join9(tmpdir(), "twombly-check-"));
-      const shot = join9(scratch, "screenshot.png");
+      const scratch = await mkdtemp(join10(tmpdir(), "twombly-check-"));
+      const shot = join10(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 rm5(temporary, { recursive: true, force: true });
+        if (temporary) await rm6(temporary, { recursive: true, force: true });
       }
       return;
     }
@@ -2370,6 +2495,13 @@ async function main() {
     case "logout":
       print({ ok: true, ...await call("logout") });
       return;
+    case "usage": {
+      const choice = positional[0];
+      if (choice !== void 0 && choice !== "on" && choice !== "off") fail("Run: twombly usage on, or twombly usage off");
+      if (choice) await setUsage(choice === "on");
+      print({ ok: true, usage: usageOn() ? "on" : "off" });
+      return;
+    }
     case "stop": {
       if (await health()) await fetch(`${DAEMON_ORIGIN}/cli/stop`, { method: "POST", body: "{}" }).catch(() => {
       });