Tell other windows about a canvas save, save on leaving, and define before drawing

From review. A canvas save is broadcast to every other page on the
project, which reloads onto the file, since the watcher takes the write for
the saving page's own. A save still waiting when the page goes away is sent
at once with keepalive. Build with define-product asks the agent for an
empty canvas, and no board until PRD.md says what the product is.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: Jing-yilin

canvas/server/sp.ts

@@ -212,7 +212,7 @@ export function createSpServer(options: {
   // change one word would throw away the tldraw viewport, the open panel and a document being
   // edited. canvasIndex.ts listens.
   const pages = new Set<ServerResponse>();
-  const broadcast = (event: "reload" | "layout" | "docs", data: unknown) => {
+  const broadcast = (event: "reload" | "layout" | "docs" | "content", data: unknown) => {
     const frame = `event: ${event}\ndata: ${JSON.stringify(data)}\n\n`;
     for (const page of pages) page.write(frame);
   };
@@ -720,7 +720,7 @@ export function createSpServer(options: {
         res.end(message);
       };
       try {
-        const { slug, file } = JSON.parse(body || "{}");
+        const { slug, file, by } = JSON.parse(body || "{}");
         if (!SAFE_NAME.test(slug ?? "")) return send(400, "bad canvas name");
         if (isExample(slug)) return send(403, READ_ONLY);
         const folder = path.join(canvasesDir, slug);
@@ -733,6 +733,9 @@ export function createSpServer(options: {
         wroteContent.set(target, text);
         if (text) fs.writeFileSync(target, text);
         else fs.rmSync(target, { force: true });
+        // Every other page on the project reloads onto it (canvasIndex.ts), since the watcher
+        // below takes this write for the saving page's own.
+        broadcast("content", { slug, by });
         send(200, "ok");
       } catch (error) {
         send(500, String(error));

canvas/src/AppShell.tsx

@@ -213,7 +213,10 @@ export function AppShell() {
     const first = [
       name.trim() === "" &&
         `name this project: write a short name for it as {"name": "…"} in project.json at the project's root (if you cannot tell yet what it is, make that your first question to me)`,
-      `make the canvas the work goes in and name it: a folder under canvases/ with its "name" in layout.json and a first board, so it opens on my screen`,
+      // With define-product, no board before the product is worked out, as that skill says.
+      start.mode === "build" && start.define
+        ? `make the canvas the work goes in and name it: a folder under canvases/ with its "name" in layout.json, so it opens on my screen, and no board in it until PRD.md says what the product is`
+        : `make the canvas the work goes in and name it: a folder under canvases/ with its "name" in layout.json and a first board, so it opens on my screen`,
     ].filter(Boolean);
     const [skill, ask] =
       start.mode === "clone"

canvas/src/canvasContent.ts

@@ -18,7 +18,7 @@ import {
   type TLShapeId,
   type VecLike,
 } from "tldraw";
-import { canvasIndex } from "./canvasIndex";
+import { canvasIndex, PAGE_ID } from "./canvasIndex";
 import {
   boardFileUrl,
   canvasImageKey,
@@ -176,7 +176,11 @@ export function installCanvasContent(editor: Editor) {
   // One write at a time per canvas, so an older body can never land after a newer one. A write
   // that fails forgets what it sent, and the next change sends the page again.
   const saving = new Map<string, Promise<void>>();
-  const flush = () => {
+  // `leaving` is the page going away with a save still waiting: the write is sent at once, and
+  // keepalive lets it outlive the page.
+  // ponytail: keepalive caps a body at 64 KB, so a bigger page's last half second is still lost.
+  const flush = (leaving = false) => {
+    clearTimeout(pending);
     pending = undefined;
     for (const [slug, pageId] of pages) {
       const file = pageFile(editor, pageId, slug);
@@ -187,10 +191,15 @@ export function installCanvasContent(editor: Editor) {
         fetch(`${import.meta.env.BASE_URL}__sp/canvas-content`, {
           method: "POST",
           headers: { "content-type": "application/json" },
-          body: JSON.stringify({ slug, file: body ? file : null }),
+          body: JSON.stringify({ slug, file: body ? file : null, by: PAGE_ID }),
+          keepalive: leaving,
         }).then(async (res) => {
           if (!res.ok) throw new Error(await res.text());
         });
+      if (leaving) {
+        void post();
+        continue;
+      }
       saving.set(
         slug,
         (saving.get(slug) ?? Promise.resolve()).then(post).catch((error) => {
@@ -207,12 +216,15 @@ export function installCanvasContent(editor: Editor) {
   const dispose = editor.store.listen(
     () => {
       clearTimeout(pending);
-      pending = setTimeout(flush, 500);
+      pending = setTimeout(() => flush(), 500);
     },
     { source: "user", scope: "document" },
   );
+  const leave = () => pending && flush(true);
+  window.addEventListener("pagehide", leave);
   return () => {
     dispose();
+    window.removeEventListener("pagehide", leave);
     clearTimeout(pending);
     mounted = undefined;
   };

canvas/src/canvasIndex.ts

@@ -65,6 +65,9 @@ export interface CanvasIndex {
 
 let index: CanvasIndex | undefined;
 
+/** This page, to the server, so a save it hears about can be told from its own (canvasContent.ts). */
+export const PAGE_ID = crypto.randomUUID();
+
 /** Hands the page its index. The entries call `loadCanvasIndex`; the tests call this directly. */
 export function installCanvasIndex(next: CanvasIndex) {
   index = next;
@@ -106,6 +109,10 @@ export async function loadCanvasIndex(live = true) {
   if (!live || !canvasIndex().served) return;
   const events = new EventSource(`${import.meta.env.BASE_URL}__sp/events`);
   events.addEventListener("reload", () => window.location.reload());
+  // A canvas saved by another window: the file wins on load, as for an edit made outside.
+  events.addEventListener("content", (event) => {
+    if (JSON.parse(event.data).by !== PAGE_ID) window.location.reload();
+  });
   events.addEventListener("docs", (event) => {
     canvasIndex().docs = JSON.parse(event.data);
     window.dispatchEvent(new Event(DOCS_CHANGED));