From 7db61e6cfb02fb2e18e9208e345a9378ec66614a Mon Sep 17 00:00:00 2001
From: Yilin Jing <yilin.jing.ai@outlook.com>
Date: Fri, 18 Sep 2026 07:46:15 -0400
Subject: [PATCH 1/5] canvas: what the review of #97 found, fixed

The board's frame says `color-scheme: light` on the element, and the
`:root{color-scheme:dark;color:#000}` injected after every board's doctype
is gone. The PR's measurement had tried the element-side value that matches
the canvas, not the one that matches the board; measured again in Chrome
153, `light` on the `<iframe>` composites transparent. Nothing is written
into a board's markup now, and an injected class-level rule no longer
outranks a board's own `html{}`. The design note says so.

Cmd+/ no longer flips tldraw to its light theme under a black rail: the
`toggle-dark-mode` action is deleted from the overrides, since the ground
remap, the welcome board and the panel tokens are all dark only.

Attachments are the four image types the CLIs read, on both sides of the
wire. `image/svg+xml` was accepted and served back on the dev server's
origin, where every /__sp endpoint writes, and the strip opens each tile as
a top-level document.

The /run body is collected as bytes and decoded once: a character split
across two chunks decoded to U+FFFD, and a CJK message or file name sits
after megabytes of base64. The cap is bytes too, and its message says the
same 24 MB the panel does. Per-run image folders live under one folder per
server named by its pid: removed with the server, and a folder left by a
server that was killed is swept at the next start.

In the panel: a send is held until the server answers, so a repeated Enter
no longer posts the message and its images twice; a fetch that rejects
outright surfaces as the send error instead of an unhandled rejection; the
tray checks the server's 20-image and size limits over the whole tray and
reports a file that could not be read; a box emptied by typing drops the
`<br>` that kept the placeholder away; Enter inside an IME composition is
the editor's; and the data URL the reader produced is kept whole rather
than rebuilt from megabytes of base64 on every keystroke.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 canvas/src/App.tsx                   |   4 +-
 canvas/src/CanvasFileShapeUtil.tsx   |  37 +++----
 canvas/src/ChatPanel.tsx             | 146 +++++++++++++++++----------
 canvas/src/canvasChrome.tsx          |  19 +++-
 canvas/src/chatTransport.test.ts     |  20 ++++
 canvas/vite.config.ts                |  68 ++++++++-----
 docs/2026-09-17-canvas-chat-panel.md |   6 +-
 docs/2026-09-17-canvas-geist.md      |  34 ++++---
 8 files changed, 209 insertions(+), 125 deletions(-)

diff --git a/canvas/src/App.tsx b/canvas/src/App.tsx
index 10da02b8..06bd4d68 100644
--- a/canvas/src/App.tsx
+++ b/canvas/src/App.tsx
@@ -83,7 +83,7 @@ import { installCanvasComments, readCommentUser } from "./canvasComments";
 import {
   CanvasChromeContext,
   canvasChromeComponents,
-  canvasCommentOverrides,
+  canvasUiOverrides,
   canvasCommentTools,
 } from "./canvasChrome";
 
@@ -1371,7 +1371,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..6d0d0bba 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,18 @@ function CanvasFile({ shape }: { shape: CanvasFileShape }) {
     border: 0,
     display: "block",
     pointerEvents: isEditing ? "auto" : "none",
+    /**
+     * A frame paints an opaque base 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 (tokens.css) and the element inherits that; a board
+     * declares no scheme and is light. That mismatch was the white card under every board.
+     * Saying `light` here matches the board, and the canvas shows through wherever the board
+     * paints nothing, whatever colour the canvas is. Measured in Chrome 153: `light` and
+     * `normal` on the element composite transparent, `dark` and no rule paint #FFFFFF. On the
+     * element and not in the document, so nothing is written into a board's markup and its own
+     * text and control colours stand (docs/2026-09-17-canvas-geist.md).
+     */
+    colorScheme: "light",
   };
 
   return (
diff --git a/canvas/src/ChatPanel.tsx b/canvas/src/ChatPanel.tsx
index 580a7a04..3a550950 100644
--- a/canvas/src/ChatPanel.tsx
+++ b/canvas/src/ChatPanel.tsx
@@ -54,6 +54,9 @@ const RUNS_KEY = "sp-chat-runs";
 const AGENT_KEY = "sp-chat-agent";
 const CHOICE_KEY = "sp-chat-choice";
 const COMMANDS_KEY = "sp-chat-commands";
+/** What can be attached: the four the CLIs read as images, and all the server accepts
+ *  (vite.config.ts). A file the agent could not look at is refused here rather than there. */
+const IMAGE_TYPE = /^image\/(png|jpeg|gif|webp)$/;
 
 /**
  * The commands this browser was last told each agent had. The palette has to open on the slash
@@ -103,17 +106,20 @@ 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 `data:` URL the reader produced, which is what the tile and the chip draw; the base64
+   * after the comma is what the run is posted. Kept whole: the panel renders on every keystroke,
+   * and a string that is the same object is one React does not have to compare, where a URL
+   * rebuilt per render from megabytes of base64 was one it did.
+   */
+  url: string;
 }
 
-const source = (i: Attached) => `data:${i.type};base64,${i.data}`;
-
 export function ChatPanel() {
   const { editor, chatCollapsed } = useContext(CanvasChromeContext);
   const slug = useValue(
@@ -159,6 +165,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);
@@ -200,9 +211,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
@@ -309,7 +323,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;
@@ -341,11 +355,15 @@ export function ChatPanel() {
   };
 
   const addImages = (list: FileList | File[] | null) => {
-    const picked = [...(list ?? [])].filter((f) => f.type.startsWith("image/"));
+    const picked = [...(list ?? [])].filter((f) => IMAGE_TYPE.test(f.type));
     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)
+    // The server's two limits, said here before anything is read or sent: twenty images, and a
+    // body under about 48 MB, which is 24 MB of files once base64 has made them a third larger.
+    // Both over the whole tray, since the server sees the whole tray and not this pick.
+    if (attached.length + picked.length > 20)
+      return setSendError("that is too many to attach; keep it to 20 images");
+    const held = attached.reduce((n, i) => n + i.url.length * 0.75, 0);
+    if (held + 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",
       );
@@ -355,20 +373,16 @@ export function ChatPanel() {
     // out here also keeps the counter out of the state updater, which React may call twice.
     for (const [file, n] of picked.map((f) => [f, nextN.current++] as const)) {
       const reader = new FileReader();
-      reader.onload = () => {
-        const url = String(reader.result);
+      reader.onload = () =>
         setAttached((a) =>
           [
             ...a,
-            {
-              n,
-              name: file.name,
-              type: file.type,
-              data: url.slice(url.indexOf(",") + 1),
-            },
+            { n, name: file.name, type: file.type, url: String(reader.result) },
           ].sort((x, y) => x.n - y.n),
         );
-      };
+      // The number is spent either way, so the gap it leaves in the tray is explained.
+      reader.onerror = () =>
+        setSendError(`${file.name} could not be read, so there is no #${n}`);
       reader.readAsDataURL(file);
     }
   };
@@ -393,36 +407,50 @@ 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([]);
-    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([]);
+      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
@@ -471,9 +499,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) => {
@@ -794,7 +826,7 @@ export function ChatPanel() {
                   onClick={() => insertRef(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
@@ -848,6 +880,10 @@ export function ChatPanel() {
             const box = e.currentTarget;
             badgeCommand(box);
             const text = readDraft(box);
+            // Typed into and then emptied, the box keeps a lone <br>, which is not `:empty`, so
+            // the placeholder stayed away from a box that looked blank. Nothing but breaks is
+            // nothing, and the box is emptied outright.
+            if (!/[^\n]/.test(text)) box.replaceChildren();
             setDraft(text);
             setSlashAt(0);
             // Escape closes the palette for the word it was typed in; the next one opens again.
@@ -867,6 +903,8 @@ export function ChatPanel() {
             );
           }}
           onKeyDown={(e) => {
+            // Enter inside an IME composition picks the candidate; it is the editor's, not ours.
+            if (e.nativeEvent.isComposing) return;
             if (matches.length > 0) {
               if (e.key === "ArrowDown" || e.key === "ArrowUp") {
                 e.preventDefault();
@@ -949,7 +987,7 @@ export function ChatPanel() {
           <button
             type="submit"
             className="sp-chat-submit"
-            disabled={!draft.trim()}
+            disabled={!draft.trim() || sending}
             aria-label="Send"
             title="Send — Enter"
           >
@@ -986,7 +1024,7 @@ export function ChatPanel() {
         <input
           ref={files}
           type="file"
-          accept="image/*"
+          accept="image/png,image/jpeg,image/gif,image/webp"
           multiple
           hidden
           onChange={(e) => {
diff --git a/canvas/src/canvasChrome.tsx b/canvas/src/canvasChrome.tsx
index a2e9147a..214a0c38 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,
@@ -114,8 +115,20 @@ 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.
+ */
+export const canvasUiOverrides: TLUiOverrides = {
+  ...commentToolOverrides,
+  actions(_editor, actions) {
+    delete actions["toggle-dark-mode"];
+    return actions;
+  },
+};
 
 export const canvasChromeComponents: TLComponents = {
   /**
@@ -252,7 +265,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/vite.config.ts b/canvas/vite.config.ts
index fa91e0be..0293bb06 100644
--- a/canvas/vite.config.ts
+++ b/canvas/vite.config.ts
@@ -920,6 +920,31 @@ function canvasesSource(): Plugin {
         }
         return ask;
       };
+      // Attached images go to disk for an agent that takes files (agents.ts), under one folder
+      // per server named by its pid. A run's folder goes when the run leaves the ring below, the
+      // server's goes with the server, and 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, and a
+      // run's images have no use past the server holding its events.
+      const chatDir = 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 {
+          fs.rmSync(path.join(os.tmpdir(), name), {
+            recursive: true,
+            force: true,
+          });
+        }
+      }
+      server.httpServer?.once("close", () =>
+        fs.rmSync(chatDir, { recursive: true, force: true }),
+      );
+      // The four the CLIs read as images, and the panel offers (ChatPanel.tsx). Not "anything
+      // image/": an SVG is a document that can carry a script, and the routes below serve a
+      // picture back on this origin, where every /__sp endpoint writes.
+      const IMAGE_TYPE = /^image\/(png|jpeg|gif|webp)$/;
       server.middlewares.use("/__sp/agent", (req, res, next) => {
         const send = (code: number, message: string) => {
           res.statusCode = code;
@@ -968,22 +993,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 > 48_000_000) chunks.length = 0;
+            else chunks.push(chunk);
           });
           req.on("end", () => {
-            if (tooBig)
+            if (size > 48_000_000)
               return send(
                 413,
-                "too much attached; keep the images under about 32 MB",
+                "too much attached; keep the images under about 24 MB together",
               );
             try {
               const {
@@ -993,7 +1018,7 @@ 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
@@ -1007,10 +1032,7 @@ function canvasesSource(): Plugin {
                   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 (typeof i.type !== "string" || !IMAGE_TYPE.test(i.type))
                   return send(400, "bad image type");
                 if (
                   typeof i.data !== "string" ||
@@ -1060,9 +1082,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: {
@@ -1073,7 +1093,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 };
@@ -1118,7 +1138,7 @@ function canvasesSource(): Plugin {
                 if (runs.size <= 20) break;
                 if (ended(old)) {
                   runs.delete(oldId);
-                  fs.rmSync(path.join(os.tmpdir(), `sp-chat-${oldId}`), {
+                  fs.rmSync(path.join(chatDir, oldId), {
                     recursive: true,
                     force: true,
                   });
@@ -1154,9 +1174,7 @@ function canvasesSource(): Plugin {
                       shots: e.shots.map((s) => {
                         if (!("data" in s)) return s;
                         run.shots.push({
-                          type: /^image\/[\w.+-]+$/.test(s.type)
-                            ? s.type
-                            : "image/png",
+                          type: IMAGE_TYPE.test(s.type) ? s.type : "image/png",
                           data: Buffer.from(s.data, "base64"),
                         });
                         return { k: run.shots.length };
diff --git a/docs/2026-09-17-canvas-chat-panel.md b/docs/2026-09-17-canvas-chat-panel.md
index 6e79c873..22d5045b 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.
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

From 2b196549091011ba287d8707ab35578f67745bd9 Mon Sep 17 00:00:00 2001
From: Yilin Jing <yilin.jing.ai@outlook.com>
Date: Fri, 18 Sep 2026 13:25:45 -0400
Subject: [PATCH 2/5] canvas: the second review of the fix branch

Attaching runs one add at a time: two picks of one picture in flight together each numbered it,
and the second put a chip in the sentence for a tile the tray had dropped. The tray an add reads
is a ref written as it is set, so the add queued behind it sees it. The pending counters and the
updater's second dedup go with that, and the tray weighs its files by size rather than by
data-URL length. A drop or paste of a type the agents cannot read now says so instead of doing
nothing, and the four types and the two limits are said once, in agents.ts, for both sides.

Safari reports the Enter that confirms an IME candidate after composition has ended, with only
keyCode 229 to mark it; the guard reads that too. The placeholder keys off the draft state
through a data attribute rather than the box being wiped in onInput, which was throwing away
native undo and eating a leading Shift+Enter.

A run's image files go when its child closes or fails to spawn, and the image route serves the
bytes the run already holds. The server's close hook went: Vite restarts by building the new
server, same pid, before closing the old, so the hook was deleting the running server's folder;
Ctrl+C never fired it at all. The dead-pid sweep is the cleanup, and skips a folder it cannot
remove rather than failing the server on a shared tmp.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 canvas/src/CanvasFileShapeUtil.tsx   |  15 +-
 canvas/src/ChatPanel.tsx             | 198 ++++++++++++++-------------
 canvas/src/agents.ts                 |  20 ++-
 canvas/src/canvasChrome.tsx          |   7 +-
 canvas/src/index.css                 |   2 +-
 canvas/vite.config.ts                |  68 ++++-----
 docs/2026-09-17-canvas-chat-panel.md |   6 +-
 7 files changed, 176 insertions(+), 140 deletions(-)

diff --git a/canvas/src/CanvasFileShapeUtil.tsx b/canvas/src/CanvasFileShapeUtil.tsx
index 6d0d0bba..d8cbfa06 100644
--- a/canvas/src/CanvasFileShapeUtil.tsx
+++ b/canvas/src/CanvasFileShapeUtil.tsx
@@ -65,17 +65,10 @@ function CanvasFile({ shape }: { shape: CanvasFileShape }) {
     border: 0,
     display: "block",
     pointerEvents: isEditing ? "auto" : "none",
-    /**
-     * A frame paints an opaque base 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 (tokens.css) and the element inherits that; a board
-     * declares no scheme and is light. That mismatch was the white card under every board.
-     * Saying `light` here matches the board, and the canvas shows through wherever the board
-     * paints nothing, whatever colour the canvas is. Measured in Chrome 153: `light` and
-     * `normal` on the element composite transparent, `dark` and no rule paint #FFFFFF. On the
-     * element and not in the document, so nothing is written into a board's markup and its own
-     * text and control colours stand (docs/2026-09-17-canvas-geist.md).
-     */
+    // 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",
   };
 
diff --git a/canvas/src/ChatPanel.tsx b/canvas/src/ChatPanel.tsx
index def17f76..e9b53900 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";
@@ -62,9 +68,6 @@ const RUNS_KEY = "sp-chat-runs";
 const AGENT_KEY = "sp-chat-agent";
 const CHOICE_KEY = "sp-chat-choice";
 const COMMANDS_KEY = "sp-chat-commands";
-/** What can be attached: the four the CLIs read as images, and all the server accepts
- *  (vite.config.ts). A file the agent could not look at is refused here rather than there. */
-const IMAGE_TYPE = /^image\/(png|jpeg|gif|webp)$/;
 
 /**
  * The commands this browser was last told each agent had. The palette has to open on the slash
@@ -119,12 +122,10 @@ interface Attached {
   n: number;
   name: string;
   type: string;
-  /**
-   * The `data:` URL the reader produced, which is what the tile and the chip draw; the base64
-   * after the comma is what the run is posted. Kept whole: the panel renders on every keystroke,
-   * and a string that is the same object is one React does not have to compare, where a URL
-   * rebuilt per render from megabytes of base64 was one it did.
-   */
+  /** 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;
 }
 
@@ -422,74 +423,82 @@ export function ChatPanel() {
       reader.readAsDataURL(file);
     });
 
-  // What is being read and is not in the tray yet. The limits below are checked before the read,
-  // and a second paste or drop while the first is still reading would see a tray without it.
-  const pending = useRef({ count: 0, bytes: 0 });
+  // 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 = async (list: FileList | File[] | null, cite = false) => {
-    const picked = [...(list ?? [])].filter((f) => IMAGE_TYPE.test(f.type));
-    if (picked.length === 0) return;
-    // The server's two limits, said here before anything is read or sent: twenty images, and a
-    // body under about 48 MB, which is 24 MB of files once base64 has made them a third larger.
-    // Both over the whole tray, since the server sees the whole tray and not this pick.
-    if (attached.length + pending.current.count + picked.length > 20)
-      return setSendError("that is too many to attach; keep it to 20 images");
-    const held =
-      attached.reduce((n, i) => n + i.url.length * 0.75, 0) +
-      pending.current.bytes;
-    const size = picked.reduce((n, f) => n + f.size, 0);
-    if (held + size > 24_000_000)
-      return setSendError(
-        "those are too large to attach; keep them under about 24 MB together",
-      );
-    setSendError(null);
-    pending.current.count += picked.length;
-    pending.current.bytes += size;
-    let urls: string[];
-    try {
-      urls = await Promise.all(picked.map(readFile));
-    } catch (error) {
-      return setSendError(`could not read that picture: ${String(error)}`);
-    } finally {
-      pending.current.count -= picked.length;
-      pending.current.bytes -= size;
-    }
-    // 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. The numbers are handed out
-    // here, outside the updater, which React may call twice; the updater merges into the tray
-    // as it is by then, since a second pick that finished reading first is already in it, and
-    // `attached` is the tray from before this one started reading.
-    const fresh: Attached[] = [];
-    const said: Attached[] = [];
-    for (const [file, url] of picked.map((f, i) => [f, urls[i]!] as const)) {
-      const already =
-        attached.find((i) => i.url === url) ?? fresh.find((i) => i.url === url);
-      const image = already ?? {
-        n: nextN.current++,
-        name: file.name,
-        type: file.type,
-        url,
-      };
-      if (!already) fresh.push(image);
-      said.push(image);
-    }
-    setAttached((a) =>
-      [...a, ...fresh.filter((f) => !a.some((i) => i.url === f.url))].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));
-  };
+  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));
+        // Both limits are the server's (agents.ts), said here before anything is read or sent,
+        // and over the whole tray, since the server sees the whole tray and not this pick.
+        if (tray.current.length + picked.length > MAX_IMAGES)
+          return setSendError(
+            `that is too many to attach; keep it to ${MAX_IMAGES} images`,
+          );
+        const size = picked.reduce((n, f) => n + f.size, 0);
+        if (
+          tray.current.reduce((n, i) => n + i.size, 0) + size >
+          MAX_IMAGE_BYTES
+        )
+          return setSendError(
+            `those are too large to attach; keep them under about ${MAX_IMAGE_BYTES / 1_000_000} MB together`,
+          );
+        // 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;
+        const urls = await Promise.all(picked.map(readFile));
+        // 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 fresh: Attached[] = [];
+        const said: Attached[] = [];
+        for (const [file, url] of picked.map(
+          (f, i) => [f, urls[i]!] as const,
+        )) {
+          const already =
+            tray.current.find((i) => i.url === url) ??
+            fresh.find((i) => i.url === url);
+          const image = already ?? {
+            n: nextN.current++,
+            name: file.name,
+            type: file.type,
+            size: file.size,
+            url,
+          };
+          if (!already) fresh.push(image);
+          said.push(image);
+        }
+        // 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
@@ -585,15 +594,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]);
@@ -1007,14 +1019,13 @@ 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);
             const text = readDraft(box);
-            // Typed into and then emptied, the box keeps a lone <br>, which is not `:empty`, so
-            // the placeholder stayed away from a box that looked blank. Nothing but breaks is
-            // nothing, and the box is emptied outright.
-            if (!/[^\n]/.test(text)) box.replaceChildren();
             setDraft(text);
             setSlashAt(0);
             // Every edit, since a chip is deleted like any other character.
@@ -1037,7 +1048,10 @@ export function ChatPanel() {
           }}
           onKeyDown={(e) => {
             // Enter inside an IME composition picks the candidate; it is the editor's, not ours.
-            if (e.nativeEvent.isComposing) return;
+            // 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();
@@ -1157,7 +1171,7 @@ export function ChatPanel() {
         <input
           ref={files}
           type="file"
-          accept="image/png,image/jpeg,image/gif,image/webp"
+          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 c32eaae4..2a64bbe5 100644
--- a/canvas/src/canvasChrome.tsx
+++ b/canvas/src/canvasChrome.tsx
@@ -121,7 +121,12 @@ export const canvasCommentTools = [
  * `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.
+ * 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,
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 04f343f4..fe036e45 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,11 +1007,13 @@ function canvasesSource(): Plugin {
         }
         return ask;
       };
-      // Attached images go to disk for an agent that takes files (agents.ts), under one folder
-      // per server named by its pid. A run's folder goes when the run leaves the ring below, the
-      // server's goes with the server, and 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, and a
-      // run's images have no use past the server holding its events.
+      // 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 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 = 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]);
@@ -1017,21 +1022,14 @@ function canvasesSource(): Plugin {
           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.
-          if ((error as NodeJS.ErrnoException).code === "ESRCH")
-            fs.rmSync(path.join(os.tmpdir(), name), {
-              recursive: true,
-              force: true,
-            });
+          // 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.httpServer?.once("close", () =>
-        fs.rmSync(chatDir, { recursive: true, force: true }),
-      );
-      // The four the CLIs read as images, and the panel offers (ChatPanel.tsx). Not "anything
-      // image/": an SVG is a document that can carry a script, and the routes below serve a
-      // picture back on this origin, where every /__sp endpoint writes.
-      const IMAGE_TYPE = /^image\/(png|jpeg|gif|webp)$/;
       server.middlewares.use("/__sp/agent", (req, res, next) => {
         const send = (code: number, message: string) => {
           res.statusCode = code;
@@ -1088,14 +1086,14 @@ function canvasesSource(): Plugin {
           let size = 0;
           req.on("data", (chunk: Buffer) => {
             size += chunk.length;
-            if (size > 48_000_000) chunks.length = 0;
+            if (size > MAX_IMAGE_BYTES * 2) chunks.length = 0;
             else chunks.push(chunk);
           });
           req.on("end", () => {
-            if (size > 48_000_000)
+            if (size > MAX_IMAGE_BYTES * 2)
               return send(
                 413,
-                "too much attached; keep the images under about 24 MB together",
+                `too much attached; keep the images under about ${MAX_IMAGE_BYTES / 1_000_000} MB together`,
               );
             try {
               const {
@@ -1112,14 +1110,14 @@ function canvasesSource(): Plugin {
               // 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_TYPE.test(i.type))
+                if (!IMAGE_TYPES.includes(i.type))
                   return send(400, "bad image type");
                 if (
                   typeof i.data !== "string" ||
@@ -1225,10 +1223,6 @@ function canvasesSource(): Plugin {
                 if (runs.size <= 20) break;
                 if (ended(old)) {
                   runs.delete(oldId);
-                  fs.rmSync(path.join(chatDir, oldId), {
-                    recursive: true,
-                    force: true,
-                  });
                 }
               }
               const finish = (message: string) => {
@@ -1261,7 +1255,9 @@ function canvasesSource(): Plugin {
                       shots: e.shots.map((s) => {
                         if (!("data" in s)) return s;
                         run.shots.push({
-                          type: IMAGE_TYPE.test(s.type) ? s.type : "image/png",
+                          type: IMAGE_TYPES.includes(s.type)
+                            ? s.type
+                            : "image/png",
                           data: Buffer.from(s.data, "base64"),
                         });
                         return { k: run.shots.length };
@@ -1293,10 +1289,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
@@ -1345,7 +1349,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 82c1ead6..e364e7de 100644
--- a/docs/2026-09-17-canvas-chat-panel.md
+++ b/docs/2026-09-17-canvas-chat-panel.md
@@ -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

From fc449a0be13e801918c4ed646f48ae3464cb77b3 Mon Sep 17 00:00:00 2001
From: Yilin Jing <yilin.jing.ai@outlook.com>
Date: Fri, 18 Sep 2026 13:27:13 -0400
Subject: [PATCH 3/5] canvas: the server's image folder is made, not named

A path made of the pid alone is one anyone on a shared tmp could have put a folder or a link
at first, and the run's files would then have gone under theirs. mkdtemp makes it private and
atomically, and the sweep reads the pid off the name it makes.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 canvas/vite.config.ts | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/canvas/vite.config.ts b/canvas/vite.config.ts
index fe036e45..6a3bef8e 100644
--- a/canvas/vite.config.ts
+++ b/canvas/vite.config.ts
@@ -1010,13 +1010,17 @@ function canvasesSource(): Plugin {
       // 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 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 = path.join(os.tmpdir(), `sp-chat-${process.pid}`);
+      // 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]);
+        const pid = Number(/^sp-chat-(\d+)-/.exec(name)?.[1]);
         if (!pid || pid === process.pid) continue;
         try {
           process.kill(pid, 0);

From e34d264f1f4da605da929f6fcd6821d820fb903b Mon Sep 17 00:00:00 2001
From: Yilin Jing <yilin.jing.ai@outlook.com>
Date: Fri, 18 Sep 2026 13:33:08 -0400
Subject: [PATCH 4/5] canvas: a picture already in the tray is not a
 twenty-first, and the server counts the bytes

The limits are over what a pick adds: the same picture pointed at again on a full tray kept its
number rather than being refused as one more, so the reads come first and the count and the
weight are of what is new. The server's body cap was the panel's limit in base64; a client that
is not the panel now meets the same limit in the bytes the files decode to.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 canvas/src/ChatPanel.tsx | 69 ++++++++++++++++++++--------------------
 canvas/vite.config.ts    | 13 ++++++++
 2 files changed, 48 insertions(+), 34 deletions(-)

diff --git a/canvas/src/ChatPanel.tsx b/canvas/src/ChatPanel.tsx
index e9b53900..76c8eb6a 100644
--- a/canvas/src/ChatPanel.tsx
+++ b/canvas/src/ChatPanel.tsx
@@ -437,13 +437,33 @@ export function ChatPanel() {
       .then(async () => {
         const given = [...(list ?? [])];
         const picked = given.filter((f) => IMAGE_TYPES.includes(f.type));
-        // Both limits are the server's (agents.ts), said here before anything is read or sent,
-        // and over the whole tray, since the server sees the whole tray and not this pick.
-        if (tray.current.length + picked.length > MAX_IMAGES)
+        // 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;
+        // 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 = picked.reduce((n, f) => n + f.size, 0);
+        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
@@ -451,37 +471,18 @@ export function ChatPanel() {
           return setSendError(
             `those are too large to attach; keep them under about ${MAX_IMAGE_BYTES / 1_000_000} MB together`,
           );
-        // 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,
+        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)!,
         );
-        if (picked.length === 0) return;
-        const urls = await Promise.all(picked.map(readFile));
-        // 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 fresh: Attached[] = [];
-        const said: Attached[] = [];
-        for (const [file, url] of picked.map(
-          (f, i) => [f, urls[i]!] as const,
-        )) {
-          const already =
-            tray.current.find((i) => i.url === url) ??
-            fresh.find((i) => i.url === url);
-          const image = already ?? {
-            n: nextN.current++,
-            name: file.name,
-            type: file.type,
-            size: file.size,
-            url,
-          };
-          if (!already) fresh.push(image);
-          said.push(image);
-        }
         // 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);
diff --git a/canvas/vite.config.ts b/canvas/vite.config.ts
index 6a3bef8e..11ee52d5 100644
--- a/canvas/vite.config.ts
+++ b/canvas/vite.config.ts
@@ -1129,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.

From 8f1bfe268016633b4a41cceaf94dd4880bb22f43 Mon Sep 17 00:00:00 2001
From: Yilin Jing <yilin.jing.ai@outlook.com>
Date: Fri, 18 Sep 2026 13:38:34 -0400
Subject: [PATCH 5/5] canvas: a pick that cannot fit is refused before it is
 read

A read is the whole file in memory, a third larger, and a drop of a few hundred megabytes was
read in full to be refused after.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 canvas/src/ChatPanel.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/canvas/src/ChatPanel.tsx b/canvas/src/ChatPanel.tsx
index 76c8eb6a..ab5def86 100644
--- a/canvas/src/ChatPanel.tsx
+++ b/canvas/src/ChatPanel.tsx
@@ -445,6 +445,11 @@ export function ChatPanel() {
             : 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
@@ -468,9 +473,7 @@ export function ChatPanel() {
           tray.current.reduce((n, i) => n + i.size, 0) + size >
           MAX_IMAGE_BYTES
         )
-          return setSendError(
-            `those are too large to attach; keep them under about ${MAX_IMAGE_BYTES / 1_000_000} MB together`,
-          );
+          return setSendError(tooBig);
         const fresh: Attached[] = novel.map(({ file, url }) => ({
           n: nextN.current++,
           name: file.name,