diff --git a/canvas/canvas.html b/canvas/canvas.html
index d9dd0218..99dec487 100644
--- a/canvas/canvas.html
+++ b/canvas/canvas.html
@@ -2,6 +2,23 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <!-- The theme picked in the top bar (src/theme.ts), on the page before it paints,
+         and again whenever another page of the app picks one. -->
+    <script>
+      (function () {
+        function pick() {
+          var theme = "system";
+          try {
+            theme = localStorage.getItem("sp-theme") || theme;
+          } catch (e) {}
+          document.documentElement.dataset.theme = theme;
+        }
+        pick();
+        addEventListener("storage", function (e) {
+          if (e.key === "sp-theme") pick();
+        });
+      })();
+    </script>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
     <title>Super Prototyping</title>
     <meta name="robots" content="noindex" />
diff --git a/canvas/home.html b/canvas/home.html
index 244ac6a7..ead562d2 100644
--- a/canvas/home.html
+++ b/canvas/home.html
@@ -2,6 +2,23 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <!-- The theme picked in the top bar (src/theme.ts), on the page before it paints,
+         and again whenever another page of the app picks one. -->
+    <script>
+      (function () {
+        function pick() {
+          var theme = "system";
+          try {
+            theme = localStorage.getItem("sp-theme") || theme;
+          } catch (e) {}
+          document.documentElement.dataset.theme = theme;
+        }
+        pick();
+        addEventListener("storage", function (e) {
+          if (e.key === "sp-theme") pick();
+        });
+      })();
+    </script>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48" />
     <link rel="icon" type="image/png" href="/favicon-32.png" sizes="32x32" />
diff --git a/canvas/index.html b/canvas/index.html
index 3700b0ee..9d647701 100644
--- a/canvas/index.html
+++ b/canvas/index.html
@@ -2,6 +2,23 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <!-- The theme picked in the top bar (src/theme.ts), on the page before it paints,
+         and again whenever another page of the app picks one. -->
+    <script>
+      (function () {
+        function pick() {
+          var theme = "system";
+          try {
+            theme = localStorage.getItem("sp-theme") || theme;
+          } catch (e) {}
+          document.documentElement.dataset.theme = theme;
+        }
+        pick();
+        addEventListener("storage", function (e) {
+          if (e.key === "sp-theme") pick();
+        });
+      })();
+    </script>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
     <meta name="theme-color" content="#000000" />
     <link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48" />
diff --git a/canvas/server/agent.ts b/canvas/server/agent.ts
index 9aa1dee3..a565655d 100644
--- a/canvas/server/agent.ts
+++ b/canvas/server/agent.ts
@@ -14,7 +14,7 @@ import fs from "node:fs";
 import type { IncomingMessage, ServerResponse } from "node:http";
 import os from "node:os";
 import path from "node:path";
-import { CANVASES } from "./boards.ts";
+import { CANVASES, hashBoards } from "./boards.ts";
 import { command, stop } from "./command.ts";
 import { AGENT_SKILLS, installSkills } from "./skills.ts";
 import { canvasFile, folderOf, sameOrigin } from "./sp.ts";
@@ -102,11 +102,28 @@ export function createAgentServer(options: {
   // above have moved on. The panel's own copy, not the agent's transcript: Claude Code's and
   // Codex's files are theirs, change shape between releases, and hold no attachments by number.
   const keptOf = (id: string) => path.join(workspaces, ".runs", id);
-  const say = (run: Run, event: string, data: unknown) =>
+  // The boards each live run's project held as it started, so its end can say which it made
+  // or changed: the panel puts a button under the reply for each, which finds it on the canvas.
+  // Off the files rather than the tool lines, which cannot say what a generator wrote.
+  const boardsBefore = new Map<string, { dir: string; hashes: Map<string, string> }>();
+  const say = (run: Run, event: string, data: unknown) => {
+    const before = event === "end" && boardsBefore.get(run.id);
+    if (before) {
+      boardsBefore.delete(run.id);
+      const made = [...hashBoards(before.dir)]
+        .filter(([board, hash]) => before.hashes.get(board) !== hash)
+        .map(([board]) => ({
+          board,
+          status: before.hashes.has(board) ? "updated" : "new",
+        }))
+        .sort((a, b) => a.board.localeCompare(b.board));
+      data = { ...(data as object), made };
+    }
     fs.appendFileSync(
       path.join(keptOf(run.id), "events.jsonl"),
       JSON.stringify(emit(run, event, data)) + "\n",
     );
+  };
   const picture = (id: string, name: string, type: string, data: Buffer) => {
     const file = path.join(keptOf(id), `${name}.${type.slice(6)}`);
     fs.writeFileSync(file, data);
@@ -549,6 +566,7 @@ export function createAgentServer(options: {
               };
             },
           );
+          const hashes = hashBoards(boards);
           const c = command(
             def.bin,
             def.args({
@@ -576,6 +594,7 @@ export function createAgentServer(options: {
             dir,
           });
           runs.set(run.id, run);
+          boardsBefore.set(run.id, { dir: boards, hashes });
           record.runs.push(run.id);
           record.updated = Date.now();
           save(record);
diff --git a/canvas/server/boards.ts b/canvas/server/boards.ts
index c2e4be4a..02cbc7f5 100644
--- a/canvas/server/boards.ts
+++ b/canvas/server/boards.ts
@@ -3,10 +3,41 @@
  * `/__sp/index.json`. The server scans on every request, and the build writes the same shape
  * into `dist` once. `src/canvasIndex.ts` declares the shape the client reads.
  */
+import { createHash } from "node:crypto";
 import fs from "node:fs";
 import path from "node:path";
 import { svgSignature } from "../src/svgSignature.ts";
 
+export const boardHash = (file: string) =>
+  createHash("sha1").update(fs.readFileSync(file)).digest("hex");
+
+/**
+ * What each board in a boards directory holds, by `<slug>/<file>.html`: a generator writes every
+ * board on each run, and only the ones whose bytes changed are news. An unreadable or missing
+ * folder holds none, and a dot-file or a folder named like a board is no board.
+ */
+export function hashBoards(canvasesDir: string) {
+  const list = (dir: string) => {
+    try {
+      return fs.readdirSync(dir);
+    } catch {
+      return [];
+    }
+  };
+  const hashes = new Map<string, string>();
+  for (const slug of list(canvasesDir))
+    for (const name of list(path.join(canvasesDir, slug))) {
+      const file = path.join(canvasesDir, slug, name);
+      if (
+        name.endsWith(".html") &&
+        !name.startsWith(".") &&
+        fs.statSync(file, { throwIfNoEntry: false })?.isFile()
+      )
+        hashes.set(`${slug}/${name}`.normalize("NFC"), boardHash(file));
+    }
+  return hashes;
+}
+
 /**
  * A project's boards: this folder under it, one subfolder per canvas. The same folder under the
  * plugin root is the examples every project is shown beside its own.
diff --git a/canvas/server/sp.ts b/canvas/server/sp.ts
index aa2661bd..f57003e4 100644
--- a/canvas/server/sp.ts
+++ b/canvas/server/sp.ts
@@ -18,7 +18,9 @@ import {
   CANVASES,
   DOCS,
   IMAGE_MIME,
+  boardHash,
   boardIndex,
+  hashBoards,
   readDocs,
   canvasesNamespace,
   readJson,
@@ -75,7 +77,10 @@ export function folderOf(
     fs.statSync(own, { throwIfNoEntry: false })?.isDirectory() &&
     fs
       .readdirSync(own)
-      .some((f) => f === "layout.json" || (!f.startsWith(".") && f.endsWith(".html")));
+      .some(
+        (f) =>
+          f === "layout.json" || (!f.startsWith(".") && f.endsWith(".html")),
+      );
   const example = path.join(examplesDir, slug);
   return !isCanvas && fs.existsSync(example) ? example : own;
 }
@@ -266,7 +271,9 @@ export function shoot(board: string, size: number[], res: ServerResponse) {
         // running without it, and Chrome is its own ask.
         fail(
           res,
-          (error as NodeJS.ErrnoException | null)?.code === "ENOENT" ? 503 : 500,
+          (error as NodeJS.ErrnoException | null)?.code === "ENOENT"
+            ? 503
+            : 500,
           error
             ? `could not render the board: ${error.message}`
             : "refkit wrote no image",
@@ -390,7 +397,8 @@ export function createSpServer(options: {
         .map((b) => ({ ...b, example: true })),
     ].sort((a, b) => (a.slug < b.slug ? -1 : 1));
     const docs = projectDir === undefined ? undefined : readDocs(projectDir);
-    const title = projectDir === undefined ? undefined : readProjectJson(projectDir).name;
+    const title =
+      projectDir === undefined ? undefined : readProjectJson(projectDir).name;
     return { ...index, boards, project: projectName(), title, docs };
   };
 
@@ -432,7 +440,11 @@ export function createSpServer(options: {
             updated: Math.max(
               fs.statSync(dir).mtimeMs,
               ...canvases.map((c) => c.updated),
-              ...DOCS.map((doc) => fs.statSync(path.join(dir, doc), { throwIfNoEntry: false })?.mtimeMs ?? 0),
+              ...DOCS.map(
+                (doc) =>
+                  fs.statSync(path.join(dir, doc), { throwIfNoEntry: false })
+                    ?.mtimeMs ?? 0,
+              ),
             ),
             canvases,
             cover: projectCover(boards, json.cover),
@@ -527,8 +539,11 @@ export function createSpServer(options: {
     const size = fs.statSync(file).size;
     const range = /^bytes=(\d*)-(\d*)$/.exec(req.headers.range ?? "");
     if (range && (range[1] || range[2])) {
-      const start = range[1] ? Number(range[1]) : Math.max(0, size - Number(range[2]));
-      const end = range[1] && range[2] ? Math.min(Number(range[2]), size - 1) : size - 1;
+      const start = range[1]
+        ? Number(range[1])
+        : Math.max(0, size - Number(range[2]));
+      const end =
+        range[1] && range[2] ? Math.min(Number(range[2]), size - 1) : size - 1;
       if (start > end) {
         res.setHeader("Content-Range", `bytes */${size}`);
         return send(416, "range not satisfiable");
@@ -673,7 +688,8 @@ export function createSpServer(options: {
       try {
         const { slug, name } = JSON.parse(body || "{}");
         if (!SAFE_NAME.test(slug ?? "")) return send(400, "bad canvas name");
-        if (typeof name !== "string" || !name.trim()) return send(400, "empty name");
+        if (typeof name !== "string" || !name.trim())
+          return send(400, "empty name");
         if (isExample(slug)) return send(403, READ_ONLY);
         if (!fs.existsSync(path.join(canvasesDir, slug)))
           return send(404, `no canvas folder named ${slug}`);
@@ -717,7 +733,8 @@ export function createSpServer(options: {
       if (isExample(slug)) return send(403, READ_ONLY);
       trash(folder).then(
         () => send(204, ""),
-        (error: Error) => send(500, `“${slug}” is still there: ${error.message}`),
+        (error: Error) =>
+          send(500, `“${slug}” is still there: ${error.message}`),
       );
     });
   });
@@ -1017,20 +1034,26 @@ export function createSpServer(options: {
         res.statusCode = code;
         res.end(message);
       };
-      if (projectDir === undefined) return send(409, "Open a project to write its documents.");
+      if (projectDir === undefined)
+        return send(409, "Open a project to write its documents.");
       let name: unknown, text: unknown, base: unknown;
       try {
         ({ name, text, base } = JSON.parse(body || "{}"));
       } catch {
         return send(400, "bad json");
       }
-      if (typeof name !== "string" || !DOCS.includes(name)) return send(400, "not a document");
-      if (typeof text !== "string" || typeof base !== "string") return send(400, "no text");
+      if (typeof name !== "string" || !DOCS.includes(name))
+        return send(400, "not a document");
+      if (typeof text !== "string" || typeof base !== "string")
+        return send(400, "no text");
       const file = path.join(projectDir, name);
       // The text the edit began from, so a rewrite since, an agent's, is not overwritten unseen.
       try {
         if (fs.readFileSync(file, "utf8") !== base)
-          return send(409, `${name} changed since you began editing. Copy your text, then reopen it.`);
+          return send(
+            409,
+            `${name} changed since you began editing. Copy your text, then reopen it.`,
+          );
         fs.writeFileSync(file, text);
       } catch (error) {
         return send(500, String(error));
@@ -1114,9 +1137,10 @@ export function createSpServer(options: {
         0,
         ...list(canvasesDir).map(
           (had) =>
-            (readJson(path.join(canvasesDir, had, "layout.json")) as
-              | { order?: number }
-              | undefined)?.order ?? 0,
+            (
+              readJson(path.join(canvasesDir, had, "layout.json")) as
+                { order?: number } | undefined
+            )?.order ?? 0,
         ),
       ) + 1;
     fs.mkdirSync(path.join(canvasesDir, slug));
@@ -1146,15 +1170,7 @@ export function createSpServer(options: {
   // index says so on its own.
   const boardKey = (file: string) =>
     path.relative(canvasesDir, file).split(path.sep).join("/").normalize("NFC");
-  const boardHash = (file: string) =>
-    createHash("sha1").update(fs.readFileSync(file)).digest("hex");
-  const boardHashes = new Map<string, string>();
-  for (const slug of list(canvasesDir))
-    for (const name of list(path.join(canvasesDir, slug)))
-      if (name.endsWith(".html")) {
-        const file = path.join(canvasesDir, slug, name);
-        boardHashes.set(boardKey(file), boardHash(file));
-      }
+  const boardHashes = hashBoards(canvasesDir);
 
   /**
    * One settled batch of writes, answered once.
@@ -1289,7 +1305,9 @@ export function createSpServer(options: {
   let docWatcher: fs.FSWatcher | undefined;
   let docBatch: ReturnType<typeof setTimeout> | undefined;
   if (projectDir !== undefined) {
-    let names = readDocs(projectDir).map((doc) => doc.name).join();
+    let names = readDocs(projectDir)
+      .map((doc) => doc.name)
+      .join();
     let title = readProjectJson(projectDir).name;
     docWatcher = fs.watch(projectDir, (_event, name) => {
       if (!name || ![...DOCS, PROJECT_JSON].includes(name.toString())) return;
diff --git a/canvas/src/App.tsx b/canvas/src/App.tsx
index 458cb004..fd1623bf 100644
--- a/canvas/src/App.tsx
+++ b/canvas/src/App.tsx
@@ -1,10 +1,4 @@
-import {
-  useCallback,
-  useEffect,
-  useReducer,
-  useRef,
-  useState,
-} from "react";
+import { useCallback, useEffect, useReducer, useRef, useState } from "react";
 import {
   Ellipse2d,
   ImageShapeUtil,
@@ -21,6 +15,7 @@ import {
   renderPlaintextFromRichText,
   toRichText,
   type Editor,
+  type TLPage,
   type TLPageId,
   type TLAsset,
   type TLAssetStore,
@@ -94,9 +89,10 @@ import {
   readCanvasLibrary,
   refetchBoards,
 } from "./canvasLibrary";
-import { BOARDS_CHANGED, canvasIndex } from "./canvasIndex";
+import { BOARDS_CHANGED, FOCUS_BOARD, canvasIndex } from "./canvasIndex";
 import { lockedOverlayUtils } from "./lockedIndicator";
 import { installCanvasComments, readCommentUser } from "./canvasComments";
+import { storedTheme, THEME_KEY } from "./theme";
 import {
   CanvasLinkPaste,
   agentBoardPaths,
@@ -808,7 +804,6 @@ function initializeCanvasLibrary(editor: Editor) {
             },
           })),
         );
-
       }
 
       // What the pass did not place is what the folder no longer has: a board renamed or removed,
@@ -1217,6 +1212,39 @@ export default function App() {
     if (page) editor.setCurrentPage(page.id);
   };
 
+  // A board a reply in the chat made or changed, from the button under it: its canvas brought
+  // forward and the board fitted to it, as a double-click on it would. Heard on the window, which
+  // holds the chat.
+  useEffect(() => {
+    if (!editor) return;
+    const focus = (event: Event) => {
+      const board = (event as CustomEvent<string>).detail;
+      // By its path rather than the library's id: an agent places boards under ids of its own
+      // (canvas.json). Its own canvas first, where the library puts it. None when it has gone
+      // since the reply, deleted or renamed by a later one.
+      const slug = board.split("/")[0];
+      const own = (page: TLPage) =>
+        Number(String(page.meta.canvasSlug).normalize("NFC") === slug);
+      const pages = editor.getPages().sort((a, b) => own(b) - own(a));
+      for (const page of pages)
+        for (const id of editor.getPageShapeIds(page)) {
+          const shape = editor.getShape(id)!;
+          if (
+            shape.type === CANVAS_FILE_SHAPE_TYPE &&
+            (shape.props as { path: string }).path
+              .normalize("NFC")
+              .endsWith(`canvases/${board}`)
+          ) {
+            openTab({ kind: "canvas", slug: page.meta.canvasSlug as string });
+            zoomToFill(editor, id);
+            return;
+          }
+        }
+    };
+    window.parent.addEventListener(FOCUS_BOARD, focus);
+    return () => window.parent.removeEventListener(FOCUS_BOARD, focus);
+  });
+
   // A layout.json edit moves boards: a row reordered, a label changed, a size override added.
   // The pass reconciles, so the boards that stay keep their shapes and only what moved is
   // touched.
@@ -1274,9 +1302,14 @@ export default function App() {
 
   function handleMount(editor: Editor) {
     setEditor(editor);
-    // tldraw's own dark theme, to match the panel's. A dark rail against tldraw's near-white ground
-    // looks like two apps in one window, and the ground is most of the window.
-    editor.user.updateUserPreferences({ colorScheme: "dark" });
+    // tldraw's scheme is the page's (tokens.css), or a dark rail sits against a near-white ground
+    // and the window looks like two apps. tldraw's "system" and the page's follow the same OS
+    // preference. Another page picking one reaches this one as a storage event (theme.ts).
+    editor.user.updateUserPreferences({ colorScheme: storedTheme() });
+    const scheme = (e: StorageEvent) =>
+      e.key === THEME_KEY &&
+      editor.user.updateUserPreferences({ colorScheme: storedTheme() });
+    window.addEventListener("storage", scheme);
     initializeCanvas(editor);
     // After the library, which is what creates the pages both are keyed to, and content first,
     // since a comment can be pinned to a shape the person put there.
@@ -1300,6 +1333,7 @@ export default function App() {
     const disposeZoom = installDoubleClickZoom(editor);
     const disposeHover = installBoardHover(editor);
     return () => {
+      window.removeEventListener("storage", scheme);
       disposeHover();
       disposeContent();
       disposeComments();
diff --git a/canvas/src/AppShell.tsx b/canvas/src/AppShell.tsx
index be943a08..fd62214b 100644
--- a/canvas/src/AppShell.tsx
+++ b/canvas/src/AppShell.tsx
@@ -30,11 +30,13 @@ import { Onboarding } from "./Onboarding";
 
 declare global {
   interface Window {
-    /** The desktop app's own (desktop/preload.ts), absent in a browser: the onboarding's answer
-     *  and its update check, both about the app and not the project. */
+    /** The desktop app's own (desktop/preload.ts), absent in a browser: the onboarding's answer,
+     *  its update check and the theme, all about the app and not the project. */
     startup?: {
       agent(id: string): Promise<void>;
       check(): Promise<string>;
+      /** The top bar's theme, for the window's own title bar (ThemeSwitcher.tsx). */
+      theme(theme: string): void;
     };
     /** The window's side of the frame (here): what the canvas has in front, at what address. */
     spShell?: {
diff --git a/canvas/src/CanvasStrip.tsx b/canvas/src/CanvasStrip.tsx
index 172cc7ae..bbab0838 100644
--- a/canvas/src/CanvasStrip.tsx
+++ b/canvas/src/CanvasStrip.tsx
@@ -3,7 +3,12 @@ import { CanvasChromeContext } from "./canvasChrome";
 import { shortName } from "./canvasLibrary";
 import { docsOf, ownCanvases, pageOf, tabFor, tabUrl } from "./canvasTabs";
 import { canvasIndex, LAYOUT_CHANGED } from "./canvasIndex";
-import { groundEditable, setGround, useGround } from "./canvasGround";
+import {
+  DEFAULT_GROUND,
+  groundEditable,
+  setGround,
+  useGround,
+} from "./canvasGround";
 import { ViewIcon } from "./CanvasTabBar";
 import { shareUrl, sheetPageUrl, type CanvasTab } from "./canvasUrl";
 import {
@@ -205,7 +210,11 @@ export function CanvasStrip() {
         <label
           className="sp-canvas-tabs-ground"
           title="Canvas background"
-          style={{ background: ground }}
+          // The theme's ground, whichever half is showing, until the canvas names its own.
+          style={{
+            background:
+              ground === DEFAULT_GROUND ? "var(--sp-ground)" : ground,
+          }}
         >
           <input
             type="color"
diff --git a/canvas/src/CanvasTabBar.tsx b/canvas/src/CanvasTabBar.tsx
index 0e448219..5e2ebb47 100644
--- a/canvas/src/CanvasTabBar.tsx
+++ b/canvas/src/CanvasTabBar.tsx
@@ -19,6 +19,7 @@ import {
   RightClickMenu,
 } from "./contextMenu";
 import { Cross, Home, Plus, Users } from "./geistIcons";
+import { ThemeSwitcher } from "./ThemeSwitcher";
 
 /**
  * The bar across the top of the window: the agent's button, which AppShell.tsx hands in as
@@ -253,6 +254,7 @@ export function CanvasTabBar(props: {
           <Plus />
         </button>
       )}
+      <ThemeSwitcher />
     </nav>
   );
 }
diff --git a/canvas/src/ChatPanel.tsx b/canvas/src/ChatPanel.tsx
index f41dedf4..3063f42e 100644
--- a/canvas/src/ChatPanel.tsx
+++ b/canvas/src/ChatPanel.tsx
@@ -64,8 +64,11 @@ import {
   type AgentModel,
 } from "./agents";
 import type { Session } from "./agentRun";
+import type { MadeBoard } from "./claudeStream";
 import { namedPictures, readDraft, slashWord } from "./chatDraft";
 import { applyFrame, followRun, writingTo, type Turn } from "./chatTransport";
+import { FOCUS_BOARD } from "./canvasIndex";
+import { humanize } from "./canvasLibrary";
 import { Present } from "./CanvasPresent";
 import { ClaudeMark } from "./ClaudeMark";
 import { CodexMark } from "./CodexMark";
@@ -258,6 +261,60 @@ interface Attached {
   reference?: { project?: string; community?: string };
 }
 
+/**
+ * What a reply made or changed, each a button that finds it on the canvas: blue for a new board
+ * and green for a rewritten one, as their rings are there. Folded to three rows when there are
+ * more, which a generator rewriting every board makes common. Off when the reply's project is not
+ * the one in front, whose canvas would not have them.
+ */
+function MadeBoards({ made, away }: { made: MadeBoard[]; away: boolean }) {
+  const list = useRef<HTMLDivElement>(null);
+  const [open, setOpen] = useState(false);
+  const [folds, setFolds] = useState(false);
+  useEffect(() => {
+    const el = list.current!;
+    const measure = () => setFolds(el.scrollHeight > el.clientHeight);
+    const observer = new ResizeObserver(measure);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  return (
+    <>
+      <div ref={list} className="sp-chat-made" data-open={open || undefined}>
+        {made.map((m) => (
+          <button
+            key={m.board}
+            type="button"
+            data-made={m.status}
+            disabled={away}
+            title={
+              away
+                ? `${m.board} is in another project`
+                : `Show ${m.board} on the canvas`
+            }
+            onClick={() =>
+              window.dispatchEvent(
+                new CustomEvent(FOCUS_BOARD, { detail: m.board }),
+              )
+            }
+          >
+            {humanize(m.board.split("/")[1]!.replace(/\.html$/, ""))}
+          </button>
+        ))}
+      </div>
+      {(folds || open) && (
+        <button
+          type="button"
+          className="sp-chat-made-more"
+          onClick={() => setOpen(!open)}
+        >
+          {open ? "Show less" : `Show all ${made.length}`}
+        </button>
+      )}
+    </>
+  );
+}
+
 /**
  * `canvas` is the one in front, which the message names to the agent; the home page has none.
  * `project` is the project in front, by the name its address carries; none on the home page or
@@ -1362,6 +1419,9 @@ export function ChatPanel(props: {
                   </Fragment>
                 ),
               )}
+              {t.end?.made && t.end.made.length > 0 && (
+                <MadeBoards made={t.end.made} away={t.project !== project} />
+              )}
               {!t.end ? (
                 <p className="sp-chat-dim">Working…</p>
               ) : t.end.ok ? null : t.end.interrupted ? (
diff --git a/canvas/src/ThemeSwitcher.tsx b/canvas/src/ThemeSwitcher.tsx
new file mode 100644
index 00000000..6889bbc5
--- /dev/null
+++ b/canvas/src/ThemeSwitcher.tsx
@@ -0,0 +1,44 @@
+import { useEffect, useState } from "react";
+import { DesktopDevice, Moon, Sun } from "./geistIcons";
+import { pickTheme, storedTheme } from "./theme";
+
+const CHOICES = [
+  ["system", "System", DesktopDevice],
+  ["light", "Light", Sun],
+  ["dark", "Dark", Moon],
+] as const;
+
+/**
+ * The theme (theme.ts) as Vercel's footer offers it: three glyphs in a pill, at the right end of
+ * the top bar.
+ */
+export function ThemeSwitcher() {
+  const [theme, setTheme] = useState(storedTheme);
+  // The app starts on the OS's until the page says, since the pick lives in the page's storage.
+  useEffect(() => window.startup?.theme(storedTheme()), []);
+  // Picked in another window of the same app, which shares the storage.
+  useEffect(() => {
+    const follow = () => setTheme(storedTheme());
+    window.addEventListener("storage", follow);
+    return () => window.removeEventListener("storage", follow);
+  }, []);
+  return (
+    <div className="sp-theme" role="radiogroup" aria-label="Theme">
+      {CHOICES.map(([value, label, Icon]) => (
+        <button
+          key={value}
+          type="button"
+          role="radio"
+          aria-checked={theme === value}
+          title={label}
+          onClick={() => {
+            setTheme(value);
+            pickTheme(value);
+          }}
+        >
+          <Icon />
+        </button>
+      ))}
+    </div>
+  );
+}
diff --git a/canvas/src/canvasChrome.tsx b/canvas/src/canvasChrome.tsx
index 06a04763..12ca39ed 100644
--- a/canvas/src/canvasChrome.tsx
+++ b/canvas/src/canvasChrome.tsx
@@ -149,11 +149,10 @@ export const canvasCommentTools = [
 
 /**
  * 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
+ * `toggle-dark-mode` with its menu gone. It flips only tldraw's scheme, so a press left a
+ * near-white canvas under a black rail, and it could not reach the window's. The theme is the top
+ * bar's switcher (theme.ts), which App.tsx hands tldraw, and this takes away the one
+ * way left of setting tldraw's apart from 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 `MenuPanel` below takes away. This tldraw exports no user-preference
diff --git a/canvas/src/canvasGround.ts b/canvas/src/canvasGround.ts
index 640e7e74..0935b2dd 100644
--- a/canvas/src/canvasGround.ts
+++ b/canvas/src/canvasGround.ts
@@ -11,12 +11,15 @@ import { isExample } from "./canvasTabs";
  * layout back to every open page.
  */
 
-/** The theme's own ground (index.css), which a canvas has until its layout names another. */
+/**
+ * The theme's own ground (index.css), which a canvas has until its layout names another. Its dark
+ * half; the light theme's is lighter, so the preset is named for the theme, not the colour.
+ */
 export const DEFAULT_GROUND = "#2b2b2b";
 
 /** The right button's presets. */
 export const GROUNDS = [
-  ["Dark grey", DEFAULT_GROUND],
+  ["Default", DEFAULT_GROUND],
   ["Black", "#000000"],
   ["Light grey", "#f2f2f2"],
   ["White", "#ffffff"],
diff --git a/canvas/src/canvasIndex.ts b/canvas/src/canvasIndex.ts
index 0608da94..44604cd5 100644
--- a/canvas/src/canvasIndex.ts
+++ b/canvas/src/canvasIndex.ts
@@ -119,6 +119,8 @@ export const LAYOUT_CHANGED = "sp:layout";
  * (canvasLibrary.ts).
  */
 export const BOARDS_CHANGED = "sp:boards";
+/** Sent on the window by the chat, with a board as `<slug>/<file>.html`, for the canvas to find. */
+export const FOCUS_BOARD = "sp:focus-board";
 /** Fired on `window` when the project's documents have been rewritten. */
 export const DOCS_CHANGED = "sp:docs";
 
diff --git a/canvas/src/chatTransport.ts b/canvas/src/chatTransport.ts
index a2eeccc2..a6fcbb8d 100644
--- a/canvas/src/chatTransport.ts
+++ b/canvas/src/chatTransport.ts
@@ -12,7 +12,7 @@
  * the state and the DOM.
  */
 import type { AgentId } from "./agents";
-import type { ChatEvent, Shot } from "./claudeStream";
+import type { ChatEvent, MadeBoard, Shot } from "./claudeStream";
 
 export interface Frame {
   id: number;
@@ -48,7 +48,7 @@ export interface Turn {
   /** How full the context window is, as of the turn's last call, and how big it is. */
   usage?: { used: number; window?: number };
   /** Set once the run has ended: whether it succeeded and, if not, why. */
-  end?: { ok: boolean; message?: string; interrupted?: boolean };
+  end?: { ok: boolean; message?: string; interrupted?: boolean; made?: MadeBoard[] };
 }
 
 export function applyFrame(turn: Turn, frame: Frame): Turn {
@@ -106,7 +106,10 @@ export function applyFrame(turn: Turn, frame: Frame): Turn {
         },
       };
     case "end":
-      return { ...turn, end: { ok: e.ok, message: e.message, interrupted: e.interrupted } };
+      return {
+        ...turn,
+        end: { ok: e.ok, message: e.message, interrupted: e.interrupted, made: e.made },
+      };
   }
 }
 
diff --git a/canvas/src/claudeStream.ts b/canvas/src/claudeStream.ts
index e4433e91..97115ed2 100644
--- a/canvas/src/claudeStream.ts
+++ b/canvas/src/claudeStream.ts
@@ -63,7 +63,20 @@ export type ChatEvent =
   | { kind: "usage"; used?: number; window?: number }
   /** `interrupted`: cut off before it finished, by the app quitting or the CLI dying, rather
    *  than failed or stopped. The panel offers to continue it. */
-  | { kind: "end"; ok: boolean; message?: string; interrupted?: boolean };
+  | {
+      kind: "end";
+      ok: boolean;
+      message?: string;
+      interrupted?: boolean;
+      /** The boards the run made or changed, which the server adds (agent.ts). */
+      made?: MadeBoard[];
+    };
+
+/** A board by `<slug>/<file>.html`, and whether the run made it or changed one there already. */
+export interface MadeBoard {
+  board: string;
+  status: "new" | "updated";
+}
 
 /**
  * A picture a tool handed back: the grid refkit draws over a reference, a crop, a screenshot —
diff --git a/canvas/src/geistIcons.tsx b/canvas/src/geistIcons.tsx
index b1d8ea32..c74c918c 100644
--- a/canvas/src/geistIcons.tsx
+++ b/canvas/src/geistIcons.tsx
@@ -47,6 +47,8 @@ import {
   GridSquare as GGridSquare,
   Link as GLink,
   MagnifyingGlass as GMagnifyingGlass,
+  Moon as GMoon,
+  Sun as GSun,
   PhoneDevice as GPhoneDevice,
   Users as GUsers,
   Window as GWindow,
@@ -95,6 +97,8 @@ export const Globe = at16(GGlobe);
 export const GridSquare = at16(GGridSquare);
 export const Link = at16(GLink);
 export const MagnifyingGlass = at16(GMagnifyingGlass);
+export const Moon = at16(GMoon);
+export const Sun = at16(GSun);
 export const PhoneDevice = at16(GPhoneDevice);
 export const Users = at16(GUsers);
 export const Window = at16(GWindow);
diff --git a/canvas/src/index.css b/canvas/src/index.css
index 37553cdd..ee227835 100644
--- a/canvas/src/index.css
+++ b/canvas/src/index.css
@@ -54,10 +54,17 @@ button {
  * surface of their own and a dark app's screens keep their edges. A canvas can have its own
  * (canvasGround.ts), which is why the value is repeated there as the swatch's default.
  */
-/* Two classes, because the value it replaces is set on `.tl-theme__dark` and one class would
-   only win on import order. */
-.tl-container.tl-theme__dark {
-  --tl-color-background: #2b2b2b;
+/* Two classes, because the value it replaces is set on `.tl-theme__dark` or `.tl-theme__light`
+   and one class would only win on import order. Both themes, because every token below is a
+   `light-dark()` pair and tldraw's scheme is the same pick as the page's (App.tsx). The light
+   ground is Geist's gray-100, a step off the white of the panels and the boards. On `:root` as
+   well, for the strip's swatch (CanvasStrip.tsx), which is outside the editor. */
+:root {
+  --sp-ground: light-dark(#f2f2f2, #2b2b2b);
+}
+
+.tl-container:is(.tl-theme__dark, .tl-theme__light) {
+  --tl-color-background: var(--sp-ground);
   /* The rest of the theme, for the same reason and by the same route. tldraw draws its menus,
      its page list, its tooltips and its toolbar from these variables, so pointing them at the
      scale is the whole re-skin. No component CSS is touched, which is what keeps it from
@@ -509,6 +516,12 @@ button {
   color: oklch(0.205 0 0) !important;
 }
 
+/* And the other way round: the light theme's near-black default (#1d1d1d) on a dark ground. */
+.tl-container.tl-theme__light[data-ground="dark"]
+  .tl-text-shape-label__inner[style*="color: rgb(29, 29, 29)"] {
+  color: #f2f2f2 !important;
+}
+
 .sp-canvas-tabs-figma:hover {
   background: var(--ds-gray-100);
 }
@@ -900,6 +913,47 @@ button {
   scrollbar-width: none;
 }
 
+/* The theme switch (ThemeSwitcher.tsx), at the bar's far end, drawn as Vercel's: a pill with a
+   hairline round it and the pick raised inside it, on the page's ground with a hairline of its
+   own. */
+.sp-theme {
+  display: flex;
+  flex: none;
+  align-self: center;
+  margin: 0 6px 0 auto;
+  padding: 1px;
+  border-radius: 9999px;
+  box-shadow: inset 0 0 0 1px var(--ds-gray-alpha-400);
+}
+
+.sp-theme button {
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 26px;
+  padding: 0;
+  border: 0;
+  border-radius: 9999px;
+  background: none;
+  color: var(--ds-gray-900);
+  cursor: pointer;
+}
+
+.sp-theme button:hover {
+  color: var(--ds-gray-1000);
+}
+
+.sp-theme button[aria-checked="true"] {
+  background: var(--ds-background-100);
+  box-shadow: 0 0 0 1px var(--ds-gray-alpha-400);
+  color: var(--ds-gray-1000);
+}
+
+.sp-theme button:focus-visible {
+  outline: 2px solid var(--ds-focus);
+  outline-offset: 1px;
+}
+
 /* One tab, one width, as Figma's are, so the row does not shift as names change. A name longer
    than its cell fades out under where the close appears, rather than ending in an ellipsis. */
 .sp-tabchip {
@@ -2872,3 +2926,58 @@ a.sp-menu-row {
   height: 100%;
   object-fit: contain;
 }
+
+/* What a reply made or changed (ChatPanel.tsx), under it: a button per board that finds it on the
+   canvas, its dot blue for a new board and green for a rewritten one, as their rings are. */
+.sp-chat-made {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin: 6px 0;
+}
+
+/* Three rows of 24px buttons and their gaps, until opened. */
+.sp-chat-made:not([data-open]) {
+  max-height: 84px;
+  overflow: hidden;
+}
+
+.sp-chat-made-more {
+  margin-bottom: 6px;
+  color: var(--ds-gray-900);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.sp-chat-made-more:hover {
+  color: var(--ds-gray-1000);
+}
+
+.sp-chat-made button {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 24px;
+  padding: 0 8px;
+  border-radius: 6px;
+  box-shadow: inset 0 0 0 1px var(--ds-gray-alpha-400);
+  color: var(--ds-gray-1000);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.sp-chat-made button:hover {
+  background: var(--ds-gray-alpha-100);
+}
+
+.sp-chat-made button::before {
+  content: "";
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--ds-focus);
+}
+
+.sp-chat-made button[data-made="updated"] {
+  --ds-focus: light-dark(#1a9338, #3dbe5c);
+}
diff --git a/canvas/src/theme.ts b/canvas/src/theme.ts
new file mode 100644
index 00000000..8067c2bf
--- /dev/null
+++ b/canvas/src/theme.ts
@@ -0,0 +1,28 @@
+/**
+ * The theme: light, dark, or whatever the OS says. The pick is kept in localStorage, which the
+ * window and the canvas in its frame share, being one origin. The script at the top of index.html,
+ * home.html and canvas.html puts it on `<html>` as `data-theme` before the page paints, and again
+ * on the storage event, which is how a pick made in the window reaches the canvas (tokens.css turns
+ * it into a `color-scheme`, App.tsx into tldraw's). The desktop app is told too, for its title bar.
+ */
+export type Theme = "system" | "light" | "dark";
+
+export const THEME_KEY = "sp-theme";
+
+/** The pick, "system" when there is none. */
+export function storedTheme(): Theme {
+  let theme: string | null = null;
+  try {
+    theme = localStorage.getItem(THEME_KEY);
+  } catch {} // storage turned off: the OS decides, as it does with nothing picked
+  return theme === "light" || theme === "dark" ? theme : "system";
+}
+
+/** This page's theme now, every other page's on the storage event, and the app's title bar's. */
+export function pickTheme(theme: Theme) {
+  document.documentElement.dataset.theme = theme;
+  try {
+    localStorage.setItem(THEME_KEY, theme);
+  } catch {} // the pick then lasts only as long as this page
+  window.startup?.theme(theme);
+}
diff --git a/canvas/src/tokens.css b/canvas/src/tokens.css
index 59e8056d..48bde22e 100644
--- a/canvas/src/tokens.css
+++ b/canvas/src/tokens.css
@@ -12,14 +12,23 @@
 @import "tailwindcss";
 
 /*
- * Tailwind's `dark:` variant, pointed at an attribute nothing here sets. The theme on these
- * pages is the `color-scheme` below, which no selector can match, and it needs none, because
- * every colour a component reads is a `light-dark()` token that switches with it. Left as the
- * attribute strategy rather than deleted so the shadcn components can keep the `dark:` classes
- * they ship with. Unpointed, they would follow the operating system's preference and paint a
- * dark button on the brand pages, which are light whatever the OS says.
+ * Tailwind's `dark:` variant, on the theme picked in the top bar (theme.ts), which sits
+ * on `<html>` as `data-theme`: dark, or system on a dark OS. The colours themselves need no
+ * variant, since every one a component reads is a `light-dark()` token that switches with the
+ * `color-scheme` below; this is for the `dark:` classes the shadcn components ship with. A page
+ * without the attribute gets none of them, which keeps a dark button off the brand pages, which
+ * are light whatever the OS says.
  */
-@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
+@custom-variant dark {
+  &:where([data-theme="dark"], [data-theme="dark"] *) {
+    @slot;
+  }
+  @media (prefers-color-scheme: dark) {
+    &:where([data-theme="system"], [data-theme="system"] *) {
+      @slot;
+    }
+  }
+}
 
 /*
  * Tailwind leaves an undeclared border at `currentColor`, so the `border` utility on a shadcn
@@ -41,10 +50,19 @@
   controls are part of the same system.
 
   Geist publishes each step as a `light-dark()` pair, so both halves are here and
-  `color-scheme` below picks which one every token resolves to. Dark, unconditionally, because
-  it is what the canvas opens as, and a board is easier to read against a ground that is not
-  competing with it. One word here is the whole switch.
+  `color-scheme` below picks which one every token resolves to. That one word is the whole
+  switch. The window and the canvas set `data-theme` from the top bar's switcher before they
+  paint (the script in index.html, home.html and canvas.html). A page that sets none, such as
+  the community site, is dark, which is what the app was before it had a light half.
 */
+:root[data-theme="system"] {
+  color-scheme: light dark;
+}
+
+:root[data-theme="light"] {
+  color-scheme: light;
+}
+
 :root {
   color-scheme: dark;
   --ds-background-100: light-dark(oklch(1 0 0), oklch(0 0 0));
diff --git a/desktop/main.ts b/desktop/main.ts
index 7701ae0f..e48bf95a 100644
--- a/desktop/main.ts
+++ b/desktop/main.ts
@@ -14,6 +14,7 @@ import {
   BrowserWindow,
   dialog,
   ipcMain,
+  nativeTheme,
   shell,
   utilityProcess,
 } from "electron";
@@ -144,7 +145,9 @@ async function main() {
     width: 1440,
     height: 900,
     title: "Super Prototyping",
-    backgroundColor: "#000000",
+    // What shows before the page paints: the OS's, since the page's pick is in its own storage
+    // and reaches `nativeTheme` only once it runs (startup:theme below).
+    backgroundColor: nativeTheme.shouldUseDarkColors ? "#000000" : "#ffffff",
     // Windows draws the menu as a white strip across a black app. Alt still shows it.
     autoHideMenuBar: true,
     webPreferences: {
@@ -292,6 +295,14 @@ async function main() {
     fs.writeFileSync(lastFile, JSON.stringify(last));
   });
 
+  // The top bar's theme, for what the page cannot paint: the title bar, and on macOS the
+  // traffic lights and the menus. It also sets `prefers-color-scheme` in the page, so the page's
+  // "system" and the title bar's agree.
+  ipcMain.on("startup:theme", (_event, theme: string) => {
+    if (theme === "system" || theme === "light" || theme === "dark")
+      nativeTheme.themeSource = theme;
+  });
+
   // Heard from before the server is up: Electron drops a `second-instance` nothing listens for, and
   // `sp upgrade` during a launch would then do nothing.
   const serverUp = startServer();
diff --git a/desktop/preload.ts b/desktop/preload.ts
index a06eb302..db05bda8 100644
--- a/desktop/preload.ts
+++ b/desktop/preload.ts
@@ -3,6 +3,7 @@
  * Making a project and opening a folder are the server's, which the page asks itself.
  * `agent` is the onboarding's answer, remembered for the next launch. `check` is a click on the
  * onboarding's version. It looks for an update and resolves to what to say beside the version.
+ * `theme` is the top bar's pick, for the title bar, which the page cannot paint.
  * The window is sandboxed (Electron's default), so the page cannot reach `ipcRenderer` itself.
  * Bundled to CommonJS by package.json's build script, because a sandboxed preload cannot use ESM
  * imports.
@@ -12,4 +13,5 @@ import { contextBridge, ipcRenderer } from "electron";
 contextBridge.exposeInMainWorld("startup", {
   agent: (id: string) => ipcRenderer.invoke("startup:agent", id),
   check: () => ipcRenderer.invoke("startup:check"),
+  theme: (theme: string) => ipcRenderer.send("startup:theme", theme),
 });