From c080498cecefd374302ca3a8baa511ecc0f57882 Mon Sep 17 00:00:00 2001
From: Yilin Jing <yilin.jing.ai@outlook.com>
Date: Sun, 27 Sep 2026 04:55:20 -0400
Subject: [PATCH 1/4] A Vercel-style theme switch: system, light or dark

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 canvas/canvas.html           | 17 ++++++++++
 canvas/home.html             | 17 ++++++++++
 canvas/index.html            | 17 ++++++++++
 canvas/src/App.tsx           | 13 ++++++--
 canvas/src/AppShell.tsx      |  6 ++--
 canvas/src/CanvasStrip.tsx   | 13 ++++++--
 canvas/src/CanvasTabBar.tsx  |  2 ++
 canvas/src/ThemeSwitcher.tsx | 38 ++++++++++++++++++++++
 canvas/src/canvasChrome.tsx  |  9 +++---
 canvas/src/canvasGround.ts   |  7 ++--
 canvas/src/geistIcons.tsx    |  4 +++
 canvas/src/index.css         | 62 +++++++++++++++++++++++++++++++++---
 canvas/src/theme.ts          | 28 ++++++++++++++++
 canvas/src/tokens.css        | 38 ++++++++++++++++------
 desktop/main.ts              | 13 +++++++-
 desktop/preload.ts           |  2 ++
 16 files changed, 257 insertions(+), 29 deletions(-)
 create mode 100644 canvas/src/ThemeSwitcher.tsx
 create mode 100644 canvas/src/theme.ts

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/src/App.tsx b/canvas/src/App.tsx
index fed6a7fe..0624c2b0 100644
--- a/canvas/src/App.tsx
+++ b/canvas/src/App.tsx
@@ -89,6 +89,7 @@ import {
 import { BOARDS_CHANGED, canvasIndex } from "./canvasIndex";
 import { lockedOverlayUtils } from "./lockedIndicator";
 import { installCanvasComments, readCommentUser } from "./canvasComments";
+import { storedTheme, THEME_KEY } from "./theme";
 import {
   CanvasLinkPaste,
   agentBoardPaths,
@@ -1256,9 +1257,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.
@@ -1281,6 +1287,7 @@ export default function App() {
       requestAnimationFrame(() => editor.zoomToFit());
     const disposeZoom = installDoubleClickZoom(editor);
     return () => {
+      window.removeEventListener("storage", scheme);
       disposeContent();
       disposeComments();
       disposeZoom();
diff --git a/canvas/src/AppShell.tsx b/canvas/src/AppShell.tsx
index 2c16aadd..92a9fe93 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 4b662f26..8f6ae900 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 {
@@ -203,7 +208,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/ThemeSwitcher.tsx b/canvas/src/ThemeSwitcher.tsx
new file mode 100644
index 00000000..70299251
--- /dev/null
+++ b/canvas/src/ThemeSwitcher.tsx
@@ -0,0 +1,38 @@
+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()), []);
+  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 0d513691..57d199a5 100644
--- a/canvas/src/canvasChrome.tsx
+++ b/canvas/src/canvasChrome.tsx
@@ -131,11 +131,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/geistIcons.tsx b/canvas/src/geistIcons.tsx
index d41a5bb7..c8346c23 100644
--- a/canvas/src/geistIcons.tsx
+++ b/canvas/src/geistIcons.tsx
@@ -46,6 +46,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,
@@ -93,6 +95,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 fb4b20e9..e3c8eae2 100644
--- a/canvas/src/index.css
+++ b/canvas/src/index.css
@@ -53,10 +53,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
@@ -480,6 +487,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);
 }
@@ -785,6 +798,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 {
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),
 });

From d070c204130ee310cca5b9b700c1b10b92f5f3cf Mon Sep 17 00:00:00 2001
From: Yilin Jing <yilin.jing.ai@outlook.com>
Date: Sun, 27 Sep 2026 05:42:33 -0400
Subject: [PATCH 2/4] Buttons under a reply for the boards it made or changed,
 which find them on the canvas

The server hashes the project's boards when a run starts and again when it
ends, and the end event lists each board whose bytes changed, new or
rewritten. Off the files rather than the tool lines, which cannot say what
a generator wrote. The hashing the watcher did is now hashBoards in
boards.ts, shared by both.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 canvas/server/agent.ts      | 23 +++++++++++--
 canvas/server/boards.ts     | 28 +++++++++++++++
 canvas/server/sp.ts         | 68 +++++++++++++++++++++++--------------
 canvas/src/App.tsx          | 36 ++++++++++++++------
 canvas/src/ChatPanel.tsx    | 23 +++++++++++++
 canvas/src/canvasIndex.ts   |  2 ++
 canvas/src/chatTransport.ts |  9 +++--
 canvas/src/claudeStream.ts  | 15 +++++++-
 canvas/src/index.css        | 38 +++++++++++++++++++++
 9 files changed, 201 insertions(+), 41 deletions(-)

diff --git a/canvas/server/agent.ts b/canvas/server/agent.ts
index fb47016f..f18010f0 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 { folderOf, sameOrigin } from "./sp.ts";
@@ -96,11 +96,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);
@@ -504,6 +521,7 @@ export function createAgentServer(options: {
               ),
             }),
           );
+          const hashes = hashBoards(boards);
           const c = command(
             def.bin,
             def.args({
@@ -530,6 +548,7 @@ export function createAgentServer(options: {
             stopped: false,
           });
           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 339a949d..c97862b2 100644
--- a/canvas/server/boards.ts
+++ b/canvas/server/boards.ts
@@ -3,9 +3,37 @@
  * `/__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";
 
+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.
+ */
+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)))
+      if (name.endsWith(".html"))
+        hashes.set(
+          `${slug}/${name}`.normalize("NFC"),
+          boardHash(path.join(canvasesDir, slug, name)),
+        );
+  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 a385a9fc..87400ea7 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;
 }
@@ -252,7 +257,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",
@@ -375,7 +382,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 };
   };
 
@@ -417,7 +425,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),
@@ -512,8 +524,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");
@@ -658,7 +673,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}`);
@@ -702,7 +718,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}`),
       );
     });
   });
@@ -1002,20 +1019,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));
@@ -1099,9 +1122,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));
@@ -1131,15 +1155,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.
@@ -1274,7 +1290,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 fed6a7fe..1bdb3351 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,
@@ -58,7 +52,11 @@ import {
   CANVAS_FILE_SHAPE_TYPE,
   CanvasFileShapeUtil,
 } from "./CanvasFileShapeUtil";
-import { asCanvasTarget, installDoubleClickZoom, zoomToFill } from "./canvasClicks";
+import {
+  asCanvasTarget,
+  installDoubleClickZoom,
+  zoomToFill,
+} from "./canvasClicks";
 import { CanvasPresent } from "./CanvasPresent";
 import { attachToChat } from "./canvasAttach";
 import { CanvasStatusBannerShapeUtil } from "./CanvasStatusBannerShapeUtil";
@@ -86,7 +84,7 @@ 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 {
@@ -800,7 +798,6 @@ function initializeCanvasLibrary(editor: Editor) {
             },
           })),
         );
-
       }
 
       // What the pass did not place is what the folder no longer has: a board renamed or removed,
@@ -1199,6 +1196,25 @@ 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;
+      const file = readCanvasLibrary()
+        .flatMap((canvas) => canvas.files)
+        .find((f) => f.path.endsWith(`canvases/${board}`));
+      // Gone since the reply: deleted, or renamed by a later one.
+      if (!file) return;
+      openTab({ kind: "canvas", slug: file.pageSlug });
+      zoomToFill(editor, fileShapeId(file));
+    };
+    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.
diff --git a/canvas/src/ChatPanel.tsx b/canvas/src/ChatPanel.tsx
index f77bf7fa..f298d0a9 100644
--- a/canvas/src/ChatPanel.tsx
+++ b/canvas/src/ChatPanel.tsx
@@ -66,6 +66,8 @@ import {
 import type { Session } from "./agentRun";
 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";
@@ -1352,6 +1354,27 @@ export function ChatPanel(props: {
                   </Fragment>
                 ),
               )}
+              {/* What the 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. */}
+              {t.end?.made && t.end.made.length > 0 && (
+                <div className="sp-chat-made">
+                  {t.end.made.map((m) => (
+                    <button
+                      key={m.board}
+                      type="button"
+                      data-made={m.status}
+                      title={`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>
+              )}
               {!t.end ? (
                 <p className="sp-chat-dim">Working…</p>
               ) : t.end.ok ? null : t.end.interrupted ? (
diff --git a/canvas/src/canvasIndex.ts b/canvas/src/canvasIndex.ts
index 62cfa0c4..07ae2caa 100644
--- a/canvas/src/canvasIndex.ts
+++ b/canvas/src/canvasIndex.ts
@@ -116,6 +116,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/index.css b/canvas/src/index.css
index fb4b20e9..fc6809e4 100644
--- a/canvas/src/index.css
+++ b/canvas/src/index.css
@@ -2003,3 +2003,41 @@ 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;
+}
+
+.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);
+}

From 7a59a176d7f6184164a12d1367cd7520d4b23253 Mon Sep 17 00:00:00 2001
From: Yilin Jing <yilin.jing.ai@outlook.com>
Date: Sun, 27 Sep 2026 06:01:04 -0400
Subject: [PATCH 3/4] Find a reply's board by its path, and fold its buttons to
 three rows

An agent places boards under ids of its own in canvas.json, so the library's id missed
them and the button did nothing. A generator rewriting every board made the list long.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 canvas/src/App.tsx       | 32 +++++++++++++++----
 canvas/src/ChatPanel.tsx | 69 +++++++++++++++++++++++++++++-----------
 canvas/src/index.css     | 17 ++++++++++
 3 files changed, 92 insertions(+), 26 deletions(-)

diff --git a/canvas/src/App.tsx b/canvas/src/App.tsx
index 1bdb3351..9d8d23f7 100644
--- a/canvas/src/App.tsx
+++ b/canvas/src/App.tsx
@@ -1203,13 +1203,31 @@ export default function App() {
     if (!editor) return;
     const focus = (event: Event) => {
       const board = (event as CustomEvent<string>).detail;
-      const file = readCanvasLibrary()
-        .flatMap((canvas) => canvas.files)
-        .find((f) => f.path.endsWith(`canvases/${board}`));
-      // Gone since the reply: deleted, or renamed by a later one.
-      if (!file) return;
-      openTab({ kind: "canvas", slug: file.pageSlug });
-      zoomToFill(editor, fileShapeId(file));
+      // 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 pages = editor
+        .getPages()
+        .sort(
+          (a, b) =>
+            Number(b.meta.canvasSlug === slug) -
+            Number(a.meta.canvasSlug === slug),
+        );
+      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);
diff --git a/canvas/src/ChatPanel.tsx b/canvas/src/ChatPanel.tsx
index f298d0a9..78238a9e 100644
--- a/canvas/src/ChatPanel.tsx
+++ b/canvas/src/ChatPanel.tsx
@@ -64,6 +64,7 @@ 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";
@@ -254,6 +255,54 @@ interface Attached {
   state?: "pending" | "failed";
 }
 
+/**
+ * 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.
+ */
+function MadeBoards({ made }: { made: MadeBoard[] }) {
+  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}
+            title={`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
@@ -1354,26 +1403,8 @@ export function ChatPanel(props: {
                   </Fragment>
                 ),
               )}
-              {/* What the 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. */}
               {t.end?.made && t.end.made.length > 0 && (
-                <div className="sp-chat-made">
-                  {t.end.made.map((m) => (
-                    <button
-                      key={m.board}
-                      type="button"
-                      data-made={m.status}
-                      title={`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>
+                <MadeBoards made={t.end.made} />
               )}
               {!t.end ? (
                 <p className="sp-chat-dim">Working…</p>
diff --git a/canvas/src/index.css b/canvas/src/index.css
index fc6809e4..5948f01f 100644
--- a/canvas/src/index.css
+++ b/canvas/src/index.css
@@ -2013,6 +2013,23 @@ a.sp-menu-row {
   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;

From 7f55b726f8888d0c5fe8b6fd24a1cbe739792cbc Mon Sep 17 00:00:00 2001
From: Yilin Jing <yilin.jing.ai@outlook.com>
Date: Sun, 27 Sep 2026 06:34:42 -0400
Subject: [PATCH 4/4] Review fixes: board hashes skip non-files, jump buttons
 off in another project, theme follows other windows

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 canvas/server/boards.ts      | 17 ++++++++++-------
 canvas/src/App.tsx           | 11 ++++-------
 canvas/src/ChatPanel.tsx     | 14 ++++++++++----
 canvas/src/ThemeSwitcher.tsx |  6 ++++++
 4 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/canvas/server/boards.ts b/canvas/server/boards.ts
index c97862b2..500c0c62 100644
--- a/canvas/server/boards.ts
+++ b/canvas/server/boards.ts
@@ -13,7 +13,7 @@ export const boardHash = (file: string) =>
 /**
  * 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.
+ * 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) => {
@@ -25,12 +25,15 @@ export function hashBoards(canvasesDir: string) {
   };
   const hashes = new Map<string, string>();
   for (const slug of list(canvasesDir))
-    for (const name of list(path.join(canvasesDir, slug)))
-      if (name.endsWith(".html"))
-        hashes.set(
-          `${slug}/${name}`.normalize("NFC"),
-          boardHash(path.join(canvasesDir, slug, name)),
-        );
+    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;
 }
 
diff --git a/canvas/src/App.tsx b/canvas/src/App.tsx
index 5afe80c4..41a4403c 100644
--- a/canvas/src/App.tsx
+++ b/canvas/src/App.tsx
@@ -15,6 +15,7 @@ import {
   renderPlaintextFromRichText,
   toRichText,
   type Editor,
+  type TLPage,
   type TLPageId,
   type TLAsset,
   type TLAssetStore,
@@ -1208,13 +1209,9 @@ export default function App() {
       // (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 pages = editor
-        .getPages()
-        .sort(
-          (a, b) =>
-            Number(b.meta.canvasSlug === slug) -
-            Number(a.meta.canvasSlug === slug),
-        );
+      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)!;
diff --git a/canvas/src/ChatPanel.tsx b/canvas/src/ChatPanel.tsx
index 78238a9e..5e091018 100644
--- a/canvas/src/ChatPanel.tsx
+++ b/canvas/src/ChatPanel.tsx
@@ -258,9 +258,10 @@ interface Attached {
 /**
  * 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.
+ * 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 }: { made: MadeBoard[] }) {
+function MadeBoards({ made, away }: { made: MadeBoard[]; away: boolean }) {
   const list = useRef<HTMLDivElement>(null);
   const [open, setOpen] = useState(false);
   const [folds, setFolds] = useState(false);
@@ -279,7 +280,12 @@ function MadeBoards({ made }: { made: MadeBoard[] }) {
             key={m.board}
             type="button"
             data-made={m.status}
-            title={`Show ${m.board} on the canvas`}
+            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 }),
@@ -1404,7 +1410,7 @@ export function ChatPanel(props: {
                 ),
               )}
               {t.end?.made && t.end.made.length > 0 && (
-                <MadeBoards made={t.end.made} />
+                <MadeBoards made={t.end.made} away={t.project !== project} />
               )}
               {!t.end ? (
                 <p className="sp-chat-dim">Working…</p>
diff --git a/canvas/src/ThemeSwitcher.tsx b/canvas/src/ThemeSwitcher.tsx
index 70299251..6889bbc5 100644
--- a/canvas/src/ThemeSwitcher.tsx
+++ b/canvas/src/ThemeSwitcher.tsx
@@ -16,6 +16,12 @@ 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]) => (