diff --git a/canvas/src/App.tsx b/canvas/src/App.tsx
index 1cb1ff66..e9d0a188 100644
--- a/canvas/src/App.tsx
+++ b/canvas/src/App.tsx
@@ -87,7 +87,7 @@ import { installCanvasComments, readCommentUser } from "./canvasComments";
 import {
   CanvasChromeContext,
   canvasChromeComponents,
-  canvasCommentOverrides,
+  canvasUiOverrides,
   canvasCommentTools,
 } from "./canvasChrome";
 
@@ -1398,7 +1398,7 @@ export default function App() {
             store={store}
             shapeUtils={shapeUtils}
             tools={canvasCommentTools}
-            overrides={canvasCommentOverrides}
+            overrides={canvasUiOverrides}
             licenseKey={TLDRAW_LICENSE_KEY}
             onMount={handleMount}
           >
diff --git a/canvas/src/CanvasFileShapeUtil.tsx b/canvas/src/CanvasFileShapeUtil.tsx
index a6d546a0..d8cbfa06 100644
--- a/canvas/src/CanvasFileShapeUtil.tsx
+++ b/canvas/src/CanvasFileShapeUtil.tsx
@@ -34,30 +34,7 @@ export type CanvasFileShape = TLShape<typeof CANVAS_FILE_SHAPE_TYPE>;
 function CanvasFile({ shape }: { shape: CanvasFileShape }) {
   const isEditing = useIsEditing(shape.id);
   const { inspectingPath, setInspectorFrame } = useContext(CanvasChromeContext);
-  const loaded = useCanvasFileHtml(shape.props.path);
-
-  /**
-   * A frame paints an opaque white base background of its own, underneath whatever the board
-   * draws, and nothing out here reaches it: not `background` on the `<iframe>`, not
-   * `allowtransparency`, not `color-scheme` on the element, not a transparent `html` inside.
-   * Measured, all five paint the same #FFFFFF. A dark `color-scheme` on the board's own root is
-   * the one thing that releases it. The canvas then shows through wherever the board paints
-   * nothing, whatever colour the canvas is, which is why this does not depend on the theme.
-   *
-   * The `color` pin keeps the black that a light `color-scheme` gives the root, because the
-   * status bar's glyphs are `currentColor` and would otherwise turn white with the scheme. It
-   * goes in right after the doctype: before the board's own rules, so a board that sets either
-   * wins, and after the doctype, because anything before it is quirks mode. Every board has one.
-   * `</head>` is not a safe anchor, since 51 of them close no head.
-   */
-  const html = useMemo(
-    () =>
-      loaded?.replace(
-        /(<!doctype html>)/i,
-        "$1<style>:root{color-scheme:dark;color:#000}</style>",
-      ),
-    [loaded],
-  );
+  const html = useCanvasFileHtml(shape.props.path);
 
   /**
    * The board the inspector has open runs the agent (inspectorAgent.ts), so a click on the mockup
@@ -88,6 +65,11 @@ function CanvasFile({ shape }: { shape: CanvasFileShape }) {
     border: 0,
     display: "block",
     pointerEvents: isEditing ? "auto" : "none",
+    // The board's own scheme, so the frame composites transparent rather than painting the
+    // white backdrop a frame gets under a document whose scheme differs from its element's.
+    // On the element, so nothing is written into the board. Measured in
+    // docs/2026-09-17-canvas-geist.md.
+    colorScheme: "light",
   };
 
   return (
diff --git a/canvas/src/ChatPanel.tsx b/canvas/src/ChatPanel.tsx
index 553da9f7..ab5def86 100644
--- a/canvas/src/ChatPanel.tsx
+++ b/canvas/src/ChatPanel.tsx
@@ -46,7 +46,13 @@
  */
 import { Fragment, useContext, useEffect, useRef, useState } from "react";
 import { useValue } from "tldraw";
-import type { AgentId, AgentModel } from "./agents";
+import {
+  IMAGE_TYPES,
+  MAX_IMAGE_BYTES,
+  MAX_IMAGES,
+  type AgentId,
+  type AgentModel,
+} from "./agents";
 import type { RunSummary } from "./agentRun";
 import { CANVAS_ATTACH, type CanvasAttachDetail } from "./canvasAttach";
 import { CanvasChromeContext } from "./canvasChrome";
@@ -111,17 +117,18 @@ interface AgentRow {
 /** A turn with nothing in it yet: the run's events, from `start` on, fill in the rest. */
 const turnFor = (runId: string): Turn => ({ runId, prompt: "", blocks: [] });
 
-/** One attached image, as the composer holds it and as the run is posted it. */
+/** One attached image, as the composer holds it. */
 interface Attached {
   n: number;
   name: string;
   type: string;
-  /** Base64, no `data:` prefix — what the server writes to disk and hands the agent. */
-  data: string;
+  /** The file's own byte count, for the limit on what the whole tray weighs. */
+  size: number;
+  /** The reader's `data:` URL, drawn as-is by the tile and the chip; `send` posts what follows
+   *  the comma. */
+  url: string;
 }
 
-const source = (i: Attached) => `data:${i.type};base64,${i.data}`;
-
 export function ChatPanel() {
   const { editor, chatCollapsed } = useContext(CanvasChromeContext);
   const slug = useValue(
@@ -167,6 +174,11 @@ export function ChatPanel() {
   // the copy the palette, the send button and the message all read.
   const [draft, setDraft] = useState("");
   const [attached, setAttached] = useState<Attached[]>([]);
+  // From the send until the server has answered it. `running` starts only once the answer is
+  // in, and the box is emptied then too, so without this a second Enter — a key held down
+  // repeats — posted the same message and its images again, to be told an agent was already
+  // running.
+  const [sending, setSending] = useState(false);
   // Arrival order, and it never goes back: see the numbers in the note above.
   const nextN = useRef(1);
   const [sendError, setSendError] = useState<string | null>(null);
@@ -208,9 +220,12 @@ export function ChatPanel() {
   useEffect(() => {
     abort.current = new AbortController();
     for (const t of turns) follow(t.runId);
-    void fetch("/__sp/agent/agents").then(async (res) =>
-      res.ok ? setAgents(await res.json()) : setSendError(await res.text()),
-    );
+    void fetch("/__sp/agent/agents")
+      .then(async (res) =>
+        res.ok ? setAgents(await res.json()) : setSendError(await res.text()),
+      )
+      // No answer at all, as against a refusal: the dev server restarting under an edit.
+      .catch((error) => setSendError(String(error)));
     return () => abort.current.abort();
     // Mount only: the turns to pick up again are the ones the page came back with.
     // oxlint-disable-next-line react-hooks/exhaustive-deps
@@ -317,7 +332,7 @@ export function ChatPanel() {
     chip.dataset.ref = String(i.n);
     chip.title = i.name;
     const thumb = document.createElement("img");
-    thumb.src = source(i);
+    thumb.src = i.url;
     thumb.alt = "";
     chip.append(thumb, `#${i.n}`);
     return chip;
@@ -399,62 +414,95 @@ export function ChatPanel() {
     syncRefs(box);
   };
 
-  /** The file as the tray holds it: base64, without the `data:` prefix a data URL opens with. */
+  /** The file as the tray holds it: the data URL the reader produced. */
   const readFile = (file: File) =>
     new Promise<string>((done, fail) => {
       const reader = new FileReader();
-      reader.onload = () => {
-        const url = String(reader.result);
-        done(url.slice(url.indexOf(",") + 1));
-      };
+      reader.onload = () => done(String(reader.result));
       reader.onerror = () => fail(reader.error ?? new Error(file.name));
       reader.readAsDataURL(file);
     });
 
-  const addImages = async (list: FileList | File[] | null, cite = false) => {
-    const picked = [...(list ?? [])].filter((f) => f.type.startsWith("image/"));
-    if (picked.length === 0) return;
-    // The server refuses a body over about 48 MB, and base64 is a third larger than the file; a
-    // number said here is better than one found out after the whole thing has been read and sent.
-    if (picked.reduce((n, f) => n + f.size, 0) > 24_000_000)
-      return setSendError(
-        "those are too large to attach; keep them under about 24 MB together",
-      );
-    setSendError(null);
-    let bytes: string[];
-    try {
-      bytes = await Promise.all(picked.map(readFile));
-    } catch (error) {
-      return setSendError(`could not read that picture: ${String(error)}`);
-    }
-    // Read first and numbered after, which is what lets the same picture keep the number it
-    // already has: pressing + on one twice is one picture said twice, not two. Still numbered in
-    // the order they were picked rather than the order the reads came back in, so three files
-    // chosen at once are #1, #2, #3 as they appear in the dialog.
-    const tray = [...attached];
-    const said: Attached[] = [];
-    for (const [file, data] of picked.map((f, i) => [f, bytes[i]!] as const)) {
-      const already = tray.find((i) => i.data === data);
-      const image = already ?? {
-        n: nextN.current++,
-        name: file.name,
-        type: file.type,
-        data,
-      };
-      if (!already) tray.push(image);
-      said.push(image);
-    }
-    setAttached(tray.sort((x, y) => x.n - y.n));
-    // One picture, pointed at on the canvas: the sentence says which one without a second click
-    // on the tile that has just appeared, and says it once however many times it is pointed at.
-    // A pick, a paste or a drop is a handful at once, and which of them the message is about is
-    // still to be said.
-    const box = composer.current;
-    if (cite && box)
-      for (const image of said)
-        if (!namedPictures(box).includes(image.n))
-          insertAtCaret(chipFor(image));
-  };
+  // The tray as of the last render, for an add to read after its files have been read: by then
+  // `attached` is the tray from before, and what a pick, a paste and a ✕ have done since is here.
+  const tray = useRef(attached);
+  tray.current = attached;
+  // Adds run one after another. Two at once — a paste while a drop is still reading — would
+  // each measure the tray without the other, and each number a picture the other has already
+  // numbered; the second then waits, and reads a tray the first has finished with.
+  const adds = useRef(Promise.resolve());
+
+  const addImages = (list: FileList | File[] | null, cite = false) =>
+    (adds.current = adds.current
+      .then(async () => {
+        const given = [...(list ?? [])];
+        const picked = given.filter((f) => IMAGE_TYPES.includes(f.type));
+        // A file the agent could not look at is refused here rather than by the server, and said:
+        // the file dialog offers only these, but a drop, a paste and the canvas hand over anything.
+        setSendError(
+          picked.length < given.length
+            ? "only png, jpeg, gif and webp pictures can be attached"
+            : null,
+        );
+        if (picked.length === 0) return;
+        // What cannot fit whatever the tray holds is refused before it is read: a read is the
+        // whole file in memory, a third larger.
+        const tooBig = `those are too large to attach; keep them under about ${MAX_IMAGE_BYTES / 1_000_000} MB together`;
+        if (picked.reduce((n, f) => n + f.size, 0) > MAX_IMAGE_BYTES)
+          return setSendError(tooBig);
+        // Read first and numbered after, which is what lets the same picture keep the number it
+        // already has: pressing + on one twice is one picture said twice, not two — and not a
+        // twenty-first, so the limits are over what is new. Still numbered in the order they
+        // were picked rather than the order the reads came back in, so three files chosen at
+        // once are #1, #2, #3 as they appear in the dialog.
+        const urls = await Promise.all(picked.map(readFile));
+        const read = picked.map((file, i) => ({ file, url: urls[i]! }));
+        const novel = read.filter(
+          ({ url }, i) =>
+            !tray.current.some((t) => t.url === url) &&
+            read.findIndex((r) => r.url === url) === i,
+        );
+        // Both limits are the server's (agents.ts), said here before anything is sent, and over
+        // the whole tray, since the server sees the whole tray and not this pick.
+        if (tray.current.length + novel.length > MAX_IMAGES)
+          return setSendError(
+            `that is too many to attach; keep it to ${MAX_IMAGES} images`,
+          );
+        const size = novel.reduce((n, r) => n + r.file.size, 0);
+        if (
+          tray.current.reduce((n, i) => n + i.size, 0) + size >
+          MAX_IMAGE_BYTES
+        )
+          return setSendError(tooBig);
+        const fresh: Attached[] = novel.map(({ file, url }) => ({
+          n: nextN.current++,
+          name: file.name,
+          type: file.type,
+          size: file.size,
+          url,
+        }));
+        const said = read.map(
+          ({ url }) =>
+            tray.current.find((t) => t.url === url) ??
+            fresh.find((f) => f.url === url)!,
+        );
+        // Written to the ref as well as set, so the add queued behind this one reads this tray
+        // rather than the one React has not rendered yet.
+        tray.current = [...tray.current, ...fresh].sort((x, y) => x.n - y.n);
+        setAttached(tray.current);
+        // One picture, pointed at on the canvas: the sentence says which one without a second
+        // click on the tile that has just appeared, and says it once however many times it is
+        // pointed at. A pick, a paste or a drop is a handful at once, and which of them the
+        // message is about is still to be said.
+        const box = composer.current;
+        if (cite && box)
+          for (const image of said)
+            if (!namedPictures(box).includes(image.n))
+              insertAtCaret(chipFor(image));
+      })
+      .catch((error) =>
+        setSendError(`could not attach that: ${String(error)}`),
+      ));
 
   // What the buttons on a canvas shape hand over (canvasAttach.tsx): a picture, attached and named
   // in the sentence, or the reason there is none. A mockup arrives as a picture of itself, called
@@ -493,41 +541,55 @@ export function ChatPanel() {
 
   const send = async () => {
     const message = draft.trim();
-    if (!message || running) return;
+    if (!message || running || sending) return;
     // Sending clears the draft without passing through onInput, so an Escape that closed the
     // palette for this word has to be forgotten here too, or the next word never opens one.
     setSlashOff(false);
     setSendError(null);
-    const res = await fetch("/__sp/agent/run", {
-      method: "POST",
-      headers: { "content-type": "application/json" },
-      body: JSON.stringify({
-        message,
-        canvas,
-        agent,
-        model,
-        effort,
-        images: attached,
-      }),
-    });
-    if (!res.ok) return setSendError(await res.text());
-    // Emptied only once it is away — a refused message is still in the box, chips and all, to be
-    // fixed and sent again.
-    composer.current?.replaceChildren();
-    setDraft("");
-    setAttached([]);
-    // The sent message keeps its own numbers — the transcript draws them from the turn — so the
-    // next one starts at #1 rather than carrying on from where this one stopped. The emptied box
-    // is not a box that has had its chips deleted: forget them, or the first edit after this
-    // would read them as gone and take the next message's pictures with them.
-    named.current = [];
-    const { runId } = await res.json();
-    const images = attached.map(({ n, name }) => ({ n, name }));
-    setTurns((ts) => [
-      ...ts,
-      { ...turnFor(runId), prompt: message, agent, images },
-    ]);
-    follow(runId);
+    setSending(true);
+    try {
+      const res = await fetch("/__sp/agent/run", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({
+          message,
+          canvas,
+          agent,
+          model,
+          effort,
+          images: attached.map(({ n, name, type, url }) => ({
+            n,
+            name,
+            type,
+            data: url.slice(url.indexOf(",") + 1),
+          })),
+        }),
+      });
+      if (!res.ok) return setSendError(await res.text());
+      const { runId } = await res.json();
+      // Emptied only once it is away — a refused message is still in the box, chips and all, to
+      // be fixed and sent again.
+      composer.current?.replaceChildren();
+      setDraft("");
+      setAttached([]);
+      // The sent message keeps its own numbers — the transcript draws them from the turn — so
+      // the next one starts at #1 rather than carrying on from where this one stopped. The
+      // emptied box is not a box that has had its chips deleted: forget them, or the first edit
+      // after this would read them as gone and take the next message's pictures with them.
+      named.current = [];
+      const images = attached.map(({ n, name }) => ({ n, name }));
+      setTurns((ts) => [
+        ...ts,
+        { ...turnFor(runId), prompt: message, agent, images },
+      ]);
+      follow(runId);
+    } catch (error) {
+      // No answer at all, as against a refusal: the dev server restarting under an edit. Left
+      // to itself this was an unhandled rejection, and a message that looked sent and ignored.
+      setSendError(String(error));
+    } finally {
+      setSending(false);
+    }
   };
 
   // At mount, so the seconds a cold server spends asking the CLI are spent while the canvas is
@@ -536,15 +598,18 @@ export function ChatPanel() {
   // answer is never kept: a server that has just restarted has forgotten what it told this panel,
   // which is not the same as the agent having no commands.
   useEffect(() => {
-    void fetch(`/__sp/agent/commands?agent=${agent}`).then(async (res) => {
-      const list = (res.ok ? await res.json() : []) as string[];
-      if (!list.length) return;
-      setCommands(list);
-      localStorage.setItem(
-        COMMANDS_KEY,
-        JSON.stringify({ ...remembered(), [agent]: list }),
-      );
-    });
+    void fetch(`/__sp/agent/commands?agent=${agent}`)
+      .then(async (res) => {
+        const list = (res.ok ? await res.json() : []) as string[];
+        if (!list.length) return;
+        setCommands(list);
+        localStorage.setItem(
+          COMMANDS_KEY,
+          JSON.stringify({ ...remembered(), [agent]: list }),
+        );
+      })
+      // No answer at all: the dev server restarting under an edit, as with the list of agents.
+      .catch((error) => setSendError(String(error)));
     // The word itself does not change the list; starting one, or changing agent, does.
     // oxlint-disable-next-line react-hooks/exhaustive-deps
   }, [typing === undefined, agent]);
@@ -577,9 +642,13 @@ export function ChatPanel() {
   };
 
   const openHistory = async () => {
-    const res = await fetch("/__sp/agent/runs");
-    if (!res.ok) return setSendError(await res.text());
-    setHistory(await res.json());
+    try {
+      const res = await fetch("/__sp/agent/runs");
+      if (!res.ok) return setSendError(await res.text());
+      setHistory(await res.json());
+    } catch (error) {
+      setSendError(String(error));
+    }
   };
 
   const pick = (runId: string, ran: AgentId) => {
@@ -900,7 +969,7 @@ export function ChatPanel() {
                   onClick={() => insertAtCaret(chipFor(i))}
                   title={`Write #${i.n} into the message`}
                 >
-                  <img src={source(i)} alt={i.name} />
+                  <img src={i.url} alt={i.name} />
                   <span className="sp-chat-num">#{i.n}</span>
                 </button>
                 <span
@@ -954,6 +1023,9 @@ export function ChatPanel() {
           aria-multiline="true"
           aria-label={`Message to ${nameOf(agent)}`}
           data-placeholder={running ? "Working…" : "Type / for commands"}
+          // For the placeholder: typed into and then emptied, the box keeps a lone <br>, which
+          // is not `:empty` to CSS, and a box that looks blank is one that says nothing.
+          data-empty={draft.trim() ? undefined : ""}
           onInput={(e) => {
             const box = e.currentTarget;
             badgeCommand(box);
@@ -979,6 +1051,11 @@ export function ChatPanel() {
             );
           }}
           onKeyDown={(e) => {
+            // Enter inside an IME composition picks the candidate; it is the editor's, not ours.
+            // Safari reports the confirming Enter after the composition has ended, with the
+            // legacy 229 as its only mark.
+            if (e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229)
+              return;
             if (matches.length > 0) {
               if (e.key === "ArrowDown" || e.key === "ArrowUp") {
                 e.preventDefault();
@@ -1061,7 +1138,7 @@ export function ChatPanel() {
           <button
             type="submit"
             className="sp-chat-submit"
-            disabled={!draft.trim()}
+            disabled={!draft.trim() || sending}
             aria-label="Send"
             title="Send — Enter"
           >
@@ -1098,7 +1175,7 @@ export function ChatPanel() {
         <input
           ref={files}
           type="file"
-          accept="image/*"
+          accept={IMAGE_TYPES.join(",")}
           multiple
           hidden
           onChange={(e) => {
diff --git a/canvas/src/agents.ts b/canvas/src/agents.ts
index efb89a4e..20b06729 100644
--- a/canvas/src/agents.ts
+++ b/canvas/src/agents.ts
@@ -26,6 +26,23 @@ import { codexEventsFromLine } from "./codexStream.ts";
 
 export type AgentId = "claude" | "codex";
 
+/**
+ * What a message can carry, said once for the composer and the server (ChatPanel.tsx,
+ * vite.config.ts): the four types the CLIs read as images — not "anything image/", since an SVG
+ * is a document that can carry a script, and the server serves a picture back on its own
+ * origin — at most twenty of them, and under 24 MB of file together, which is the 48 MB body
+ * the server takes once base64 has made them a third larger. The composer refuses at the
+ * limit before reading a byte; the server refuses the same limit from a client that is not it.
+ */
+export const IMAGE_TYPES = [
+  "image/png",
+  "image/jpeg",
+  "image/gif",
+  "image/webp",
+];
+export const MAX_IMAGES = 20;
+export const MAX_IMAGE_BYTES = 24_000_000;
+
 /** One model in the composer's picker. */
 export interface AgentModel {
   /** What the CLI is given; the empty string is the CLI's own default, which is never sent. */
@@ -51,7 +68,8 @@ export interface AgentImage {
   type: string;
   /** The bytes, base64, with no `data:` prefix. */
   data: string;
-  /** Where the server wrote it, for an agent that takes files rather than bytes. */
+  /** Where the server wrote it, for an agent that takes files rather than bytes; gone once
+   *  that agent has exited. */
   path: string;
 }
 
diff --git a/canvas/src/canvasChrome.tsx b/canvas/src/canvasChrome.tsx
index ccad41cb..2a64bbe5 100644
--- a/canvas/src/canvasChrome.tsx
+++ b/canvas/src/canvasChrome.tsx
@@ -7,6 +7,7 @@ import {
   TldrawUiButtonIcon,
   type Editor,
   type TLComponents,
+  type TLUiOverrides,
   TldrawUiMenuGroup,
   TldrawUiMenuItem,
   useDialogs,
@@ -115,8 +116,25 @@ export const canvasCommentTools = [
   }),
 ];
 
-/** The toolbar entry for that tool. */
-export const canvasCommentOverrides = commentToolOverrides;
+/**
+ * The toolbar entry for that tool, and one action fewer. tldraw keeps Cmd+/ bound to
+ * `toggle-dark-mode` with its menu gone, and everything drawn here is dark only: the ground remap
+ * in index.css is scoped to `.tl-theme__dark`, the welcome board's black art and the panels'
+ * tokens are unconditional. A press left a near-white canvas under a black rail, and App.tsx
+ * forced dark back on the next reload. One theme, so no switch: App.tsx's write at mount is
+ * the theme, and this takes away the one way left of leaving it. Deleting the action is enough
+ * because the shortcut table and the shortcuts dialog both draw from this map — the dialog's
+ * item renders nothing for an action that is not there — and the colour-scheme menu lives only
+ * in tldraw's main menu, which `MainMenu` below replaces. This tldraw exports no user-preference
+ * hook to pin the scheme with; if one arrives, it is the single mechanism to move to.
+ */
+export const canvasUiOverrides: TLUiOverrides = {
+  ...commentToolOverrides,
+  actions(_editor, actions) {
+    delete actions["toggle-dark-mode"];
+    return actions;
+  },
+};
 
 export const canvasChromeComponents: TLComponents = {
   /**
@@ -253,7 +271,7 @@ export const canvasChromeComponents: TLComponents = {
     return (
       <DefaultContextMenu {...props}>
         <TldrawUiMenuGroup id="canvas">
-          {/* The tool's own registration (canvasCommentOverrides) is what binds the `c` key. This
+          {/* The tool's own registration (canvasUiOverrides) is what binds the `c` key. This
               is only the row, spelled out rather than taken from it, because a registered tool
               names its icon by id, and the set the rest of this app draws from is components. */}
           <TldrawUiMenuItem
diff --git a/canvas/src/chatTransport.test.ts b/canvas/src/chatTransport.test.ts
index a456114c..97f63474 100644
--- a/canvas/src/chatTransport.test.ts
+++ b/canvas/src/chatTransport.test.ts
@@ -34,6 +34,26 @@ describe('applyFrame', () => {
     turn = applyFrame(turn, frame(2, { kind: 'title', title: 'Greeting Exchange' }))
     expect(turn.title).toBe('Greeting Exchange')
   })
+
+  it('keeps the attached images off the start event and a tool\'s shots off its done event', () => {
+    let turn = applyFrame(
+      { runId: 'r', prompt: '', blocks: [] },
+      frame(1, {
+        kind: 'start',
+        agent: 'codex',
+        prompt: 'fix #1',
+        title: 'fix #1',
+        at: 5,
+        images: [{ n: 1, name: 'a.png' }],
+      }),
+    )
+    turn = applyFrame(turn, frame(2, { kind: 'tool', id: 't1', name: 'Bash', detail: 'refkit shoot' }))
+    turn = applyFrame(turn, frame(3, { kind: 'tool_done', id: 't1', ok: true, shots: [{ k: 1 }] }))
+    expect(turn.images).toEqual([{ n: 1, name: 'a.png' }])
+    expect(turn.blocks).toEqual([
+      { kind: 'tool', id: 't1', name: 'Bash', detail: 'refkit shoot', ok: true, shots: [{ k: 1 }] },
+    ])
+  })
 })
 
 describe('sseFrames', () => {
diff --git a/canvas/src/index.css b/canvas/src/index.css
index 26afa99c..55d0beae 100644
--- a/canvas/src/index.css
+++ b/canvas/src/index.css
@@ -1858,7 +1858,7 @@ button.sp-status[aria-expanded="true"] .sp-status-chev {
   user-select: text;
 }
 
-.sp-chat-draft:empty::before {
+.sp-chat-draft[data-empty]::before {
   content: attr(data-placeholder);
   color: var(--sp-text-2);
 }
diff --git a/canvas/vite.config.ts b/canvas/vite.config.ts
index 8381cb2c..11ee52d5 100644
--- a/canvas/vite.config.ts
+++ b/canvas/vite.config.ts
@@ -33,6 +33,9 @@ import {
 } from "./src/agentRun.ts";
 import {
   AGENTS,
+  IMAGE_TYPES,
+  MAX_IMAGE_BYTES,
+  MAX_IMAGES,
   type AgentDef,
   type AgentImage,
   type AgentModel,
@@ -1004,6 +1007,33 @@ function canvasesSource(): Plugin {
         }
         return ask;
       };
+      // Attached images go to disk for an agent that takes files (agents.ts), for as long as
+      // that agent runs: a run's folder goes when its child closes, since the page is served
+      // the bytes the run holds and nothing else reads the files. The folders sit under one per
+      // server, named by its pid and made private here rather than at a path anyone on a shared
+      // tmp could have put a folder or a link at first; a Vite restart is a second one for the
+      // same pid. At start the folders of servers that were killed rather than closed go too: a
+      // pid nothing answers on is a server that is gone. Not on the server's own close — Vite
+      // restarts by building the new server, same pid, before it closes the old, and Ctrl+C
+      // never closes it at all.
+      const chatDir = fs.mkdtempSync(
+        path.join(os.tmpdir(), `sp-chat-${process.pid}-`),
+      );
+      for (const name of fs.readdirSync(os.tmpdir())) {
+        const pid = Number(/^sp-chat-(\d+)-/.exec(name)?.[1]);
+        if (!pid || pid === process.pid) continue;
+        try {
+          process.kill(pid, 0);
+        } catch (error) {
+          // Gone (ESRCH), as against alive and another user's (EPERM) on a host whose tmp is
+          // shared: that one is a running canvas, and not this server's to remove. A dead
+          // one that was another user's is not removable either, and is left.
+          if ((error as NodeJS.ErrnoException).code !== "ESRCH") continue;
+          try {
+            fs.rmSync(path.join(os.tmpdir(), name), { recursive: true });
+          } catch {}
+        }
+      }
       server.middlewares.use("/__sp/agent", (req, res, next) => {
         const send = (code: number, message: string) => {
           res.statusCode = code;
@@ -1052,22 +1082,22 @@ function canvasesSource(): Plugin {
         }
         if (req.method === "POST" && url.pathname === "/run") {
           // The body is no longer a sentence: attached images ride in it as base64, and it is
-          // held whole in memory before anything reads it, so it is capped on the way in.
-          let body = "";
-          let tooBig = false;
-          req.on("data", (chunk) => {
-            if (tooBig) return;
-            body += chunk;
-            if (body.length > 48_000_000) {
-              tooBig = true;
-              body = "";
-            }
+          // held whole in memory before anything reads it, so it is capped on the way in. Kept
+          // as bytes and decoded once at the end: a character split across two chunks decodes
+          // to U+FFFD if each chunk is decoded alone, and the message and the file names sit
+          // after megabytes of base64 and hundreds of chunk boundaries.
+          const chunks: Buffer[] = [];
+          let size = 0;
+          req.on("data", (chunk: Buffer) => {
+            size += chunk.length;
+            if (size > MAX_IMAGE_BYTES * 2) chunks.length = 0;
+            else chunks.push(chunk);
           });
           req.on("end", () => {
-            if (tooBig)
+            if (size > MAX_IMAGE_BYTES * 2)
               return send(
                 413,
-                "too much attached; keep the images under about 32 MB",
+                `too much attached; keep the images under about ${MAX_IMAGE_BYTES / 1_000_000} MB together`,
               );
             try {
               const {
@@ -1077,24 +1107,21 @@ function canvasesSource(): Plugin {
                 model = "",
                 effort = "",
                 images = [],
-              } = JSON.parse(body || "{}");
+              } = JSON.parse(Buffer.concat(chunks).toString("utf8") || "{}");
               if (typeof message !== "string" || !message.trim())
                 return send(400, "empty message");
               // A browser sent these, so nothing in them is taken on trust. The number is what
               // the message refers to and what names the file below; the type decides the
               // extension and what the image endpoint says it is serving; the name is a caption
               // in the prompt and a label in the panel, and never any part of a path.
-              if (!Array.isArray(images) || images.length > 20)
+              if (!Array.isArray(images) || images.length > MAX_IMAGES)
                 return send(400, "bad images");
               for (const i of images) {
                 if (!Number.isInteger(i?.n) || i.n < 1)
                   return send(400, "bad image number");
                 if (typeof i.name !== "string" || i.name.length > 200)
                   return send(400, "bad image name");
-                if (
-                  typeof i.type !== "string" ||
-                  !/^image\/[\w.+-]+$/.test(i.type)
-                )
+                if (!IMAGE_TYPES.includes(i.type))
                   return send(400, "bad image type");
                 if (
                   typeof i.data !== "string" ||
@@ -1102,6 +1129,19 @@ function canvasesSource(): Plugin {
                 )
                   return send(400, "bad image data");
               }
+              // The body cap above is the panel's limit in base64; a client that is not the
+              // panel meets the limit itself here, in the bytes the files come out as.
+              if (
+                images.reduce(
+                  (n: number, i: { data: string }) =>
+                    n + Buffer.byteLength(i.data, "base64"),
+                  0,
+                ) > MAX_IMAGE_BYTES
+              )
+                return send(
+                  413,
+                  `too much attached; keep the images under about ${MAX_IMAGE_BYTES / 1_000_000} MB together`,
+                );
               // One agent at a time, and only the server can say so: the composer's own guard is
               // React state, which a second tab, a reload, or a cleared view does not share. Two
               // agents in one project overwrite each other's boards.
@@ -1144,9 +1184,7 @@ function canvasesSource(): Plugin {
               // file in it, so what the browser called the file stays a caption: a slash or a
               // `..` in that name is text in the prompt and reaches no path here.
               const id = randomUUID();
-              const imagesDir = images.length
-                ? path.join(os.tmpdir(), `sp-chat-${id}`)
-                : "";
+              const imagesDir = images.length ? path.join(chatDir, id) : "";
               if (imagesDir) fs.mkdirSync(imagesDir, { recursive: true });
               const held: AgentImage[] = images.map(
                 (i: {
@@ -1157,7 +1195,7 @@ function canvasesSource(): Plugin {
                 }) => {
                   const file = path.join(
                     imagesDir,
-                    `${i.n}.${i.type.slice(6).replace(/\W/g, "") || "png"}`,
+                    `${i.n}.${i.type.slice(6)}`,
                   );
                   fs.writeFileSync(file, Buffer.from(i.data, "base64"));
                   return { ...i, path: file };
@@ -1202,10 +1240,6 @@ function canvasesSource(): Plugin {
                 if (runs.size <= 20) break;
                 if (ended(old)) {
                   runs.delete(oldId);
-                  fs.rmSync(path.join(os.tmpdir(), `sp-chat-${oldId}`), {
-                    recursive: true,
-                    force: true,
-                  });
                 }
               }
               const finish = (message: string) => {
@@ -1238,7 +1272,7 @@ function canvasesSource(): Plugin {
                       shots: e.shots.map((s) => {
                         if (!("data" in s)) return s;
                         run.shots.push({
-                          type: /^image\/[\w.+-]+$/.test(s.type)
+                          type: IMAGE_TYPES.includes(s.type)
                             ? s.type
                             : "image/png",
                           data: Buffer.from(s.data, "base64"),
@@ -1272,10 +1306,18 @@ function canvasesSource(): Plugin {
               // the prompt is written; the exit below reports that, and the write error is noise.
               run.child.stdin.on("error", () => {});
               run.child.stdin.end(def.stdin(message, preamble, held));
-              run.child.on("error", (error: NodeJS.ErrnoException) =>
-                finish(error.code === "ENOENT" ? def.missing : String(error)),
-              );
+              // The files were for this child; the page is served the bytes the run holds. On
+              // both, since a child that could not be spawned never closes.
+              const unfile = () => {
+                if (imagesDir)
+                  fs.rmSync(imagesDir, { recursive: true, force: true });
+              };
+              run.child.on("error", (error: NodeJS.ErrnoException) => {
+                unfile();
+                finish(error.code === "ENOENT" ? def.missing : String(error));
+              });
               run.child.on("close", (code, signal) => {
+                unfile();
                 if (ended(run)) return;
                 const tail = stderr.trim().split("\n").slice(-5).join("\n");
                 // `claude` is a launcher around the real process: a SIGTERM to it comes back as
@@ -1324,7 +1366,7 @@ function canvasesSource(): Plugin {
             "content-type": img.type,
             "cache-control": "no-store",
           });
-          return res.end(fs.readFileSync(img.path));
+          return res.end(Buffer.from(img.data, "base64"));
         }
         if (req.method === "GET" && match[2].startsWith("shot/")) {
           // The other direction: what a tool drew, kept in the run rather than on disk, since
diff --git a/docs/2026-09-17-canvas-chat-panel.md b/docs/2026-09-17-canvas-chat-panel.md
index 602b94da..e364e7de 100644
--- a/docs/2026-09-17-canvas-chat-panel.md
+++ b/docs/2026-09-17-canvas-chat-panel.md
@@ -120,9 +120,9 @@ across reloads — and the reload a board write causes is exactly when that matt
 
 ## One mark, no registry
 
-`ClaudeMark.tsx` sits next to `FigmaMark.tsx`: one path from lobehub/icons' `Claude.Color`
-(MIT), drawn inline like every other icon here rather than pulled in as a package that is nine
-megabytes and an Ant Design stack. The panel talked to one agent, so there was one mark and no
+`ClaudeMark.tsx` is one path from lobehub/icons' `Claude.Color` (MIT), drawn inline as the
+app's own icons were then (the Geist set in `geistIcons.tsx` has since replaced those) rather
+than pulled in as a package that is nine megabytes and an Ant Design stack. The panel talked to one agent, so there was one mark and no
 icon map, registry or agent-to-icon configuration; a second agent, when one genuinely arrived,
 would be one more file that day. It arrived, below, and it was: `CodexMark.tsx`, and a two-entry
 object in `ChatPanel.tsx` that picks a mark by id.
@@ -377,8 +377,10 @@ what the message is about is usually already on the canvas.
 Each agent is handed them the way it can take them. Claude gets base64 blocks inline on stdin,
 each behind an `[Image #n] <name>` line, so the numbers the message uses are the numbers the model
 sees. Codex has no image channel on stdin, so it gets the paths instead, to files written under a
-per-run temp directory. The browser's filename is a caption in both cases and reaches no path: the
-run's id names the folder, the number and media type name the file.
+per-run folder in the server's temp directory for as long as the agent runs; the page is served
+the bytes the run holds, so the files go when the child exits. The browser's filename is a
+caption in both cases and reaches no path: the run's id names the folder, the number and media
+type name the file.
 
 The other direction is the interesting one. Whatever a tool hands the agent as an image arrives on
 the `user` frame that carries the tool's result, as a base64 block where a string would otherwise
diff --git a/docs/2026-09-17-canvas-geist.md b/docs/2026-09-17-canvas-geist.md
index 540e124f..cf821e90 100644
--- a/docs/2026-09-17-canvas-geist.md
+++ b/docs/2026-09-17-canvas-geist.md
@@ -88,20 +88,26 @@ was fixed as data. The declaration is gone and the boards are regenerated. The `
 already paints its own opaque ground, so nothing inside a phone moved.
 
 Every other board declared nothing and was white anyway, because a frame paints an opaque base
-background underneath the document it loads, and nothing outside the frame reaches it. Measured, all
-five of these still paint `#FFFFFF`: `background` on the `<iframe>` element,
-`allowtransparency="true"`, `color-scheme` on the element, an injected
-`html{background:transparent}`, and an injected `html,body{background:none!important}`. The one
-declaration that releases it is `color-scheme: dark` inside the document, on its own `:root`. The
-frame then composites onto what is behind it. That is why `CanvasFileShapeUtil` injects that and
-not a colour. The board shows the canvas through, whatever colour the canvas is, and a light theme
-of the kind the section above describes needs no second rule here.
-
-It goes in straight after the doctype. Anything before the doctype is quirks mode, and `</head>` is
-not an anchor, since 51 of the 351 boards close no head. Being first also means a board that
-declares either property wins. A dark scheme also changes the root's default `color`, which flips
-to white and would repaint the status bar's `currentColor` glyphs, so `#000` is pinned back. That
-is the light default the boards were authored against.
+background under the document it loads whenever the frame element's colour scheme and the
+document's differ; CSS Color Adjust calls it a colour scheme mismatch. The canvas is dark, the
+`<iframe>` inherits that, and a board that says nothing is light, so every board was that mismatch.
+The first measurement here tried `background` on the element, `allowtransparency="true"`,
+`color-scheme: dark` on the element, an injected `html{background:transparent}` and an injected
+`html,body{background:none!important}`, saw all five paint `#FFFFFF`, and concluded that only a
+`color-scheme: dark` injected into the document after its doctype released the backdrop.
+`CanvasFileShapeUtil` shipped that injection, with the root's `color` pinned back to `#000` because
+a dark scheme flips it. Review caught what the measurement had missed: the element-side value tried
+was the one that matches the canvas, not the one that matches the board. Measured again in Chrome
+153, `color-scheme: light` (or `normal`) on the `<iframe>` composites transparent, and `dark` or no
+rule at all paints white.
+
+So the frame element says `light`, and the injection is gone. Nothing is written into a board's
+markup; its text and form controls keep the colours it was authored with; an injected `:root` rule
+no longer outranks a board's own `html{}` rule, which it did, being a class-level selector against
+a type-level one; and the doctype is no longer an anchor anything depends on. A board that declares
+a dark scheme of its own is the mismatch again and gets an opaque backdrop. None of the 351 do. The
+canvas still shows through whatever colour it is, and a light theme of the kind the section above
+describes needs no second rule here.
 
 The cost was measured rather than assumed, at the real 478 × 980 and over a white ground, so that
 only the release shows. Three of six boards came out pixel identical. The others differed by at
