@volter/world-console 3.0.20 → 3.0.22

package/client/console.css

@@ -662,6 +662,8 @@ main.app.home { max-width: none; }
 .compare-head { display: flex; align-items: center; gap: 8px; }
 .compare-base { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
 .compare-base select { font: inherit; max-width: 22ch; }
+.board-viewing { margin-left: 0; }
+.board-viewing select { min-width: 0; flex: 1; }
 .compare-acts-head { margin: 12px 0 0; font-size: 12px; }
 .compare-head .mode { flex: 1; }
 .compare-sides { display: flex; gap: 16px; flex-wrap: wrap; }

package/client/console.tsx

@@ -1691,10 +1691,12 @@ const FRAME_W = 1280; const FRAME_H = 820; const FRAME_GAP = 160; const SECTION_
 const FRAME_NAME_ROOM = 72;
 /** A change behind a frame's count: the writes one request made, as words read them, and when. */
 type BoardAct = { at: string; writes: number; entries: Array<{ op: string; operation?: string; subject: { type: string; id: string }; fields: Record<string, string> }> };
-type BoardFrame = { vendor: string; id: string; kind: string; title: string; section: { id: string; title: string; aka?: string[] }; url: string; /** the page it sits under at the vendor (its id there) */ parent?: string; /** the World's own */ ours?: boolean; at: { site: string } | { screen: string } | null; unseen?: 'not-drawn' | 'sites-not-routed'; changes: number; /** when its first change not yet cut was made */ since?: string | null };
+type BoardFrame = { vendor: string; id: string; kind: string; title: string; section: { id: string; title: string; aka?: string[] }; url: string; /** the page it sits under at the vendor (its id there) */ parent?: string; /** the World's own */ ours?: boolean; at: { site: string } | { screen: string } | null; unseen?: 'not-drawn' | 'sites-not-routed' | 'branch-sites'; changes: number; /** when its first change not yet cut was made */ since?: string | null };
 /** A section of a board: its region and name, or a pack's group removed from the board (`gone`). */
 type SavedSection = { x: number; y: number; w: number; h: number; name?: string; gone?: true };
 type SavedBoard = { id: string; name: string; include?: string[]; hidden?: string[]; placed?: Record<string, { x: number; y: number }>; sections?: Record<string, SavedSection> };
+type BoardBranch = { name: string; origin?: string; sites?: string; at: { instant?: string; label?: string; live?: boolean } | null; expiresAt: string | null };
+const BRANCH_SITES_UNSEEN = "This World shows its branches' sites only on this machine.";
 type BoardDoor = { frames: BoardFrame[]; boards: SavedBoard[]; version: string };
 const frameKey = (f: BoardFrame): string => `${f.vendor}:${f.id}`;
 const sectionKey = (f: BoardFrame): string => `${f.vendor}:section:${f.section.id}`;
@@ -1702,13 +1704,17 @@ const sectionKey = (f: BoardFrame): string => `${f.vendor}:section:${f.section.i
 const sectionKeys = (f: BoardFrame): string[] => [f.section.id, ...(f.section.aka ?? [])].map((id) => `${f.vendor}:section:${id}`);
 /** Where a frame opens in this World: a site at its own origin, a vendor page at the twin's place, or nowhere yet. */
 const frameUrl = (name: string, f: BoardFrame): string | null => (f.at && 'site' in f.at ? f.at.site : f.at ? `${WORLDS}/${name}/${f.vendor}${f.at.screen}` : null);
+/** A vendor page on a branch always opens through its parent's read-pass door. */
+const branchFrameUrl = (name: string, branch: string, f: BoardFrame): string | null => f.at && 'screen' in f.at
+  ? `${WORLDS}/-/${name}/branches/${branch}/pages?${new URLSearchParams({ land: `/${branch}/${f.vendor}${f.at.screen}` }).toString()}`
+  : frameUrl(branch, f);
 /** The frames a board shows: everything but what it hides, or what it includes (a frame, or a section's every frame). */
 const shownOn = (b: SavedBoard, all: BoardFrame[]): BoardFrame[] => b.include
   ? all.filter((f) => b.include!.includes(frameKey(f)) || sectionKeys(f).some((k) => b.include!.includes(k)))
   : all.filter((f) => !(b.hidden ?? []).includes(frameKey(f)));
-type Screen = { world: string; frame: BoardFrame; url: string | null; active: boolean; picked: boolean; boards: SavedBoard[]; addTo: (board: string, key: string) => void; remove: { label: string; act: (key: string) => void } | null; compare: (key: string) => void; /** its name moves it, as a canvas app's frame name does */ grab: (e: React.PointerEvent) => void };
+type Screen = { world: string; branch: boolean; frame: BoardFrame; url: string | null; active: boolean; picked: boolean; boards: SavedBoard[]; addTo: (board: string, key: string) => void; remove: { label: string; act: (key: string) => void } | null; compare: (key: string) => void; /** its name moves it, as a canvas app's frame name does */ grab: (e: React.PointerEvent) => void };
 function ScreenFrame({ data }: NodeProps<Node<Screen>>): React.JSX.Element {
-  const { frame, url, active, picked, boards, addTo, remove, compare, grab } = data;
+  const { frame, url, active, picked, boards, addTo, remove, compare, grab, branch } = data;
   const key = frameKey(frame);
   const others = boards.filter((b) => b.include && !b.include.includes(key) && !sectionKeys(frame).some((k) => b.include!.includes(k)));
   // its name is drawn the same size at every zoom while the head above it shrinks: zoomed out past the point the name fits
@@ -1719,7 +1725,7 @@ function ScreenFrame({ data }: NodeProps<Node<Screen>>): React.JSX.Element {
       {/* its name, as a canvas app labels its frames; what can be done to it once it is selected */}
       <NodeToolbar isVisible={roomy || picked || active} position={Position.Top} align="start" className="frame-label">
         <span className="frame-name" onPointerDown={grab}><Mark vendor={frame.vendor} /><span>{frame.title}</span></span>
-        {frame.changes ? <button type="button" className="frame-changed nodrag" onClick={() => compare(key)} title={`${counted(frame.changes, 'change')} here, not in a changeset: compare before and now`}><Icon name="square-dot" size={14} />{frame.changes}</button>
+        {frame.changes ? <button type="button" className="frame-changed nodrag" onClick={() => compare(key)} title={`${counted(frame.changes, 'change')} ${branch ? 'on this branch' : 'here, not in a changeset'}: compare`}><Icon name="square-dot" size={14} />{frame.changes}</button>
           : picked ? <button type="button" className="ghost nodrag" onClick={() => compare(key)} title="Compare with a branch of this World" aria-label={`Compare ${frame.title} with a branch`}><Icon name="file-diff" size={14} /></button> : null}
         {picked && others.length ? <select className="nodrag frame-add" value="" aria-label={`Add ${frame.title} to a board`} onChange={(e) => { if (e.target.value) addTo(e.target.value, key); }}><option value="">Add to board…</option>{others.map((b) => <option key={b.id} value={b.id}>{b.name}</option>)}</select> : null}
         {picked && remove ? <button type="button" className="ghost nodrag" onClick={() => remove.act(key)} title={remove.label} aria-label={remove.label}>✕</button> : null}
@@ -1733,7 +1739,7 @@ function ScreenFrame({ data }: NodeProps<Node<Screen>>): React.JSX.Element {
         <div className={active ? 'frame-body nodrag nopan nowheel' : 'frame-body'}>
           {url
             ? <iframe title={frame.title} src={url} loading="lazy" style={{ pointerEvents: active ? 'auto' : 'none' }} />
-            : <div className="frame-none"><p><strong>{frame.unseen === 'sites-not-routed' ? `This World shows ${frame.title} only at its own local address.` : `${vendorName(frame.vendor)}'s twin draws no page for this ${frame.kind} yet.`}</strong></p><p className="mode">{frame.url}</p></div>}
+            : <div className="frame-none"><p><strong>{frame.unseen === 'branch-sites' ? BRANCH_SITES_UNSEEN : frame.unseen === 'sites-not-routed' ? `This World shows ${frame.title} only at its own local address.` : `${vendorName(frame.vendor)}'s twin draws no page for this ${frame.kind} yet.`}</strong></p><p className="mode">{frame.url}</p></div>}
         </div>
       </div>
     </>
@@ -1774,19 +1780,21 @@ function Thumb({ url, title }: { url: string; title: string }): React.JSX.Elemen
 /** THE COMPARISON, as a canvas app's "compare changes": a frame's changes not yet cut, each in words, and the frame as it
  *  was the moment before the first of them beside how it is now. "Before" is a read-only copy of the World as of then (a
  *  branch the World makes for an hour, removed when this closes), its site read at the copy's own address. */
-function Compare({ name, token, frame, onClose, reads }: { name: string; token: string; frame: BoardFrame; onClose: () => void; /** the board's reads so far: its changes are read again with each */ reads: number }): React.JSX.Element {
+function Compare({ name, token, frame, onClose, reads, viewing = '' }: { viewing?: string; name: string; token: string; frame: BoardFrame; onClose: () => void; /** the board's reads so far: its changes are read again with each */ reads: number }): React.JSX.Element {
   // what "before" is: the World as it was the moment before this frame's first change not yet cut (a copy made for the
   // comparison), or any branch of the World chosen here (a pull request's preview, a named branch), as a compare view
   // sets one branch beside another
-  const [base, setBase] = useState<string>(frame.since ? 'before' : '');
+  const [base, setBase] = useState<string>(viewing ? 'world' : frame.since ? 'before' : '');
   const [before, setBefore] = useState<{ state: 'opening' } | { state: 'ok'; url: string; at?: string } | { state: 'none'; why: string }>({ state: 'opening' });
   const [made, setMade] = useState<string | null>(null);
   // the copies this panel made, kept out of the choices after they are gone (the list is read again only every so often)
   const mine = useRef(new Set<string>());
-  const branches = useDoor<{ branches: Array<{ name: string; origin?: string; sites?: string; at: { instant?: string; label?: string; live?: boolean } | null; expiresAt: string | null }> }>(token, `/-/${name}/branches`, reads);
-  const choices = branches.state === 'ok' ? branches.data.branches.filter((b) => b.name !== made && !mine.current.has(b.name)) : [];
+  const branches = useDoor<{ branches: BoardBranch[] }>(token, `/-/${name}/branches`, reads);
+  const choices = branches.state === 'ok' ? branches.data.branches.filter((b) => b.name !== viewing && b.name !== made && !mine.current.has(b.name)) : [];
+  const parent = useDoor<BoardDoor>(token, viewing ? `/-/${name}/board` : null, reads);
+  const parentFrame = parent.state === 'ok' ? parent.data.frames.find((f) => frameKey(f) === frameKey(frame)) : undefined;
   // its changes, read for this comparison alone
-  const listed = useDoor<{ total: number; acts: BoardAct[] }>(token, `/-/${name}/board/changes?frame=${encodeURIComponent(frameKey(frame))}`, reads);
+  const listed = useDoor<{ total: number; acts: BoardAct[] }>(token, `/-/${name}/${viewing ? `branches/${viewing}/` : ''}board/changes?frame=${encodeURIComponent(frameKey(frame))}`, reads);
   // a branch's page beside this World's: a site at the branch's own site address, a vendor's page on the branch's own
   // content plane through this World's branch door (a one-time read pass), never running on this World's origin
   const pageOf = async (branch: string, sites: string | null, isClosed: () => boolean): Promise<{ url: string } | { why: string }> => {
@@ -1796,7 +1804,7 @@ function Compare({ name, token, frame, onClose, reads }: { name: string; token:
       // private to its people and open through the World's own address
       const u = new URL(frame.url);
       const nested = sites && /^https?:\/\/\{host\}\./.test(sites) ? sites.replace('{host}', u.hostname.toLowerCase()) : null;
-      return nested ? { url: `${nested}${u.pathname}${u.search}` } : { why: "This World shows its branches' sites only on this machine." };
+      return nested ? { url: `${nested}${u.pathname}${u.search}` } : { why: BRANCH_SITES_UNSEEN };
     }
     const beside = `${WORLDS}/-/${name}/branches/${branch}/pages?${new URLSearchParams({ land: `/${branch}/${frame.vendor}${shown.screen}` }).toString()}`;
     // the door answers a navigation with the branch's address; a host that shows no content plane says so instead
@@ -1805,7 +1813,12 @@ function Compare({ name, token, frame, onClose, reads }: { name: string; token:
     return asked?.type === 'opaqueredirect' ? { url: beside } : { why: `This World does not show its branches' pages${asked ? `: ${await failure(asked)}` : ''}.` };
   };
   useEffect(() => {
-    if (!frame.at) { setBefore({ state: 'none', why: `${vendorName(frame.vendor)}'s twin draws no page for this ${frame.kind} yet; its changes are listed below.` }); return; }
+    if (base === 'world') {
+      if (parent.state === 'loading') { setBefore({ state: 'opening' }); return; }
+      const url = parentFrame ? frameUrl(name, parentFrame) : null;
+      setBefore(url ? { state: 'ok', url } : { state: 'none', why: parent.state === 'error' ? parent.error : 'The World has no page here to show.' }); return;
+    }
+    if (!frame.at) { setBefore({ state: 'none', why: frame.unseen === 'branch-sites' ? BRANCH_SITES_UNSEEN : `${vendorName(frame.vendor)}'s twin draws no page for this ${frame.kind} yet; its changes are listed below.` }); return; }
     if (base === '') { setBefore({ state: 'none', why: 'Choose a branch of this World to set beside it.' }); return; }
     let closed = false;
     if (base !== 'before') {
@@ -1835,20 +1848,21 @@ function Compare({ name, token, frame, onClose, reads }: { name: string; token:
     const left = (e: PageTransitionEvent): void => { if (!e.persisted) drop(); };
     window.addEventListener('pagehide', left);
     return () => { closed = true; clearTimeout(wait); window.removeEventListener('pagehide', left); drop(); setMade(null); };
-  }, [name, token, frame.vendor, frame.id, frame.since, base]);
-  const now = frameUrl(name, frame);
+  }, [name, token, frame.vendor, frame.id, frame.since, base, parent.state, JSON.stringify(parentFrame?.at)]);
+  const now = viewing ? branchFrameUrl(name, viewing, frame) : frameUrl(name, frame);
   // nothing to choose: said, rather than an empty list
   const noBranches = !frame.at || base !== '' ? null : branches.state === 'ok' && choices.length === 0 ? 'This World has no branches to set beside it: make one under Branches.' : branches.state === 'error' ? `The World's branches could not be read: ${branches.error}` : null;
   return (
     <div className="compare" role="dialog" aria-label={`Changes to ${frame.title}`}>
       <div className="compare-head">
         <Mark vendor={frame.vendor} /><strong>{frame.title}</strong>
-        <span className="mode">{frame.changes ? `${counted(frame.changes, 'change')} not yet cut${frame.since ? `, since ${when(frame.since)}` : ''}` : 'No changes here not yet cut'}</span>
+        <span className="mode">{frame.changes ? `${counted(frame.changes, 'change')} ${viewing ? 'on this branch' : 'not yet cut'}${frame.since ? `, since ${when(frame.since)}` : ''}` : viewing ? 'No changes here on this branch' : 'No changes here not yet cut'}</span>
         {frame.at ? <label className="compare-base">Compare with{' '}
           <select value={base} onChange={(e) => setBase(e.target.value)}>
             {base === '' ? <option value="">Choose a branch…</option> : null}
-            {frame.since || base === 'before' ? <option value="before">Before these changes</option> : null}
-            {base && base !== 'before' && !choices.some((b) => b.name === base) ? <option value={base}>{base.split('/')[1]}</option> : null}
+            {viewing ? <option value="world">The World</option> : null}
+            {!viewing && (frame.since || base === 'before') ? <option value="before">Before these changes</option> : null}
+            {base && base !== 'before' && base !== 'world' && !choices.some((b) => b.name === base) ? <option value={base}>{base.split('/')[1]}</option> : null}
             {choices.map((b) => <option key={b.name} value={b.name}>{b.name.split('/')[1]}{b.at?.label ? ` (${b.at.label})` : b.at?.instant ? ` (as of ${when(b.at.instant)})` : b.at?.live ? ' (live)' : ''}</option>)}
           </select>
         </label> : null}
@@ -1856,16 +1870,16 @@ function Compare({ name, token, frame, onClose, reads }: { name: string; token:
       </div>
       <div className="compare-sides">
         <figure>
-          <figcaption>{base === 'before' ? `Before${before.state === 'ok' && before.at ? ` · as of ${when(before.at)}` : ''}` : base ? base.split('/')[1] : 'A branch'}</figcaption>
+          <figcaption>{base === 'before' ? `Before${before.state === 'ok' && before.at ? ` · as of ${when(before.at)}` : ''}` : base === 'world' ? 'The World' : base ? base.split('/')[1] : 'A branch'}</figcaption>
           {noBranches ? <p className="mode compare-note">{noBranches}</p> : before.state === 'ok' ? <Thumb url={before.url} title={`${frame.title} before`} /> : before.state === 'opening' ? <p className="mode compare-note" role="status">Opening the World as it was…</p> : <p className="mode compare-note">{before.why}</p>}
         </figure>
         <figure>
-          <figcaption>Now</figcaption>
-          {now ? <Thumb url={now} title={`${frame.title} now`} /> : <p className="mode compare-note">{vendorName(frame.vendor)}'s twin draws no page for this {frame.kind} yet.</p>}
+          <figcaption>{viewing ? `${viewing.split('/')[1]} · branch` : 'Now'}</figcaption>
+          {now ? <Thumb url={now} title={`${frame.title} now`} /> : <p className="mode compare-note">{frame.unseen === 'branch-sites' ? BRANCH_SITES_UNSEEN : `${vendorName(frame.vendor)}'s twin draws no page for this ${frame.kind} yet.`}</p>}
         </figure>
       </div>
       {listed.state === 'error' ? <p role="alert" className="mode">Its changes could not be read: {listed.error}</p> : null}
-      {base !== 'before' && base && listed.state === 'ok' && listed.data.acts.length ? <p className="mode compare-acts-head">This World's own changes here, not yet cut:</p> : null}
+      {base !== 'before' && base && listed.state === 'ok' && listed.data.acts.length ? <p className="mode compare-acts-head">{viewing ? 'This branch’s changes here:' : "This World's own changes here, not yet cut:"}</p> : null}
       <ol className="compare-acts">
         {(listed.state === 'ok' ? listed.data.acts : []).map((a) => {
           const first = a.entries[0]!; const words = said({ ...first, service: frame.vendor, id: '', occurredAt: a.at } as unknown as Entry);
@@ -1880,17 +1894,28 @@ function Compare({ name, token, frame, onClose, reads }: { name: string; token:
         })}
       </ol>
       {listed.state === 'ok' && listed.data.total > listed.data.acts.length ? <p className="mode">and {counted(listed.data.total - listed.data.acts.length, 'earlier change')}, in Changes</p> : null}
-      <a className="compare-all" href={`${BASE}/${name}/~/changes`} onClick={(e) => { e.preventDefault(); go([...name.split('/'), '~', 'changes']); }}>Every change in the World →</a>
+      {!viewing ? <a className="compare-all" href={`${BASE}/${name}/~/changes`} onClick={(e) => { e.preventDefault(); go([...name.split('/'), '~', 'changes']); }}>Every change in the World →</a> : null}
     </div>
   );
 }
 const FRAME_TYPES = { screen: ScreenFrame, section: SectionBox };
 function Canvas(props: { name: string; token: string; twins: Load<{ twins: Twin[] }>; session: ViewSession; retry: () => void; snapshot: Snapshot | null; back: () => void; /** a session that writes, never a snapshot: only it arranges the boards */ canWrite: boolean }): React.JSX.Element {
-  return <ReactFlowProvider><CanvasSurface {...props} /></ReactFlowProvider>;
+  const [viewing, setViewing] = useState(() => new URLSearchParams(window.location.search).get('viewing') ?? '');
+  useEffect(() => {
+    const on = (): void => setViewing(new URLSearchParams(window.location.search).get('viewing') ?? '');
+    window.addEventListener('popstate', on); return () => window.removeEventListener('popstate', on);
+  }, []);
+  const view = (branch: string): void => {
+    const url = new URL(window.location.href);
+    if (branch) url.searchParams.set('viewing', branch); else url.searchParams.delete('viewing');
+    window.history.pushState(null, '', url);
+    window.dispatchEvent(new PopStateEvent('popstate'));
+  };
+  return <ReactFlowProvider key={`${props.name}:${viewing}`}><CanvasSurface {...props} viewing={viewing} view={view} /></ReactFlowProvider>;
 }
 /** The canvas fills the window, as Figma's, tldraw's and Miro's do: the way back, the boards and the frames' list float at
  *  the top left (a canvas app's pages and layers), zoom at the bottom left, the minimap at the bottom right. */
-function CanvasSurface({ name, token, session, retry, snapshot, back, canWrite }: { name: string; token: string; twins: Load<{ twins: Twin[] }>; session: ViewSession; retry: () => void; snapshot: Snapshot | null; back: () => void; canWrite: boolean }): React.JSX.Element {
+function CanvasSurface({ name, token, session, retry, snapshot, back, canWrite, viewing, view }: { viewing: string; view: (branch: string) => void; name: string; token: string; twins: Load<{ twins: Twin[] }>; session: ViewSession; retry: () => void; snapshot: Snapshot | null; back: () => void; canWrite: boolean }): React.JSX.Element {
   // the boards as this page holds them: the World's as last read or saved, with this page's edits not yet saved on top.
   // Edits are saved one after another, each made from the version the last save left; one the World refuses (another
   // person saved first) is dropped and the World's boards are shown, said in a toast
@@ -1905,28 +1930,37 @@ function CanvasSurface({ name, token, session, retry, snapshot, back, canWrite }
   // the last read that did not answer, said beside the board it leaves on screen
   const [stale, setStale] = useState<string | null>(null);
   const [reads, setReads] = useState(0);
+  const branches = useDoor<{ branches: BoardBranch[] }>(token, `/-/${name}/branches`, reads);
+  const branch = branches.state === 'ok' ? branches.data.branches.find((b) => b.name === viewing) : undefined;
   // reads in the order they went out: an earlier one answering after a later one is not taken
   const sent = useRef(0); const taken = useRef(0);
   /** The World's board read again (its frames always, its boards when no save moved since the read went out). */
   const readBoard = useCallback(async (): Promise<void> => {
     const at = generation.current; const mine = ++sent.current;
-    const r = await door(token, `/-/${name}/board`, { signal: AbortSignal.timeout(15000) }).catch(() => null);
+    const path = viewing ? `branches/${viewing.split('/').map(encodeURIComponent).join('/')}/board` : 'board';
+    const [r, parent] = await Promise.all([
+      door(token, `/-/${name}/${path}`, { signal: AbortSignal.timeout(15000) }).catch(() => null),
+      viewing ? door(token, `/-/${name}/board`, { signal: AbortSignal.timeout(15000) }).catch(() => null) : Promise.resolve(null),
+    ]);
     const data = r?.ok ? ((await r.json().catch(() => null)) as BoardDoor | null) : null;
+    const arrangement = viewing ? parent?.ok ? ((await parent.json().catch(() => null)) as BoardDoor | null) : null : data;
+    if (data && arrangement) { data.boards = arrangement.boards; data.version = arrangement.version; }
     if (mine < taken.current) return;
     taken.current = mine;
-    if (!data?.frames || !data.boards || !data.version) {
-      const error = r ? `the World answered ${r.status}` : 'the World did not answer';
-      setLoaded((l) => (l.state === 'ok' ? l : { state: 'error', status: r?.status ?? 0, error }));
+    if (!data?.frames || !arrangement?.boards || !arrangement.version) {
+      const failed = !r?.ok ? r : parent;
+      const error = failed ? `the World answered ${failed.status}` : 'the World did not answer';
+      setLoaded((l) => (l.state === 'ok' ? l : { state: 'error', status: failed?.status ?? 0, error }));
       setStale(error);
       return;
     }
     setStale(null); setReads((n) => n + 1);
     if (at === generation.current && pending.current === 0) held.current = { boards: data.boards, version: data.version };
     setLoaded({ state: 'ok', data });
-  }, [token, name]);
+  }, [token, name, viewing]);
   // read now and every ten seconds while the page is shown: another person's arrangement arrives as the World's changes do
   useEffect(() => { void readBoard(); const id = setInterval(() => { if (!document.hidden) void readBoard(); }, 10000); return () => clearInterval(id); }, [readBoard]);
-  const all = loaded.state === 'ok' ? loaded.data.frames : [];
+  const all = loaded.state === 'ok' ? loaded.data.frames.map((f): BoardFrame => viewing && f.at && 'site' in f.at && !/^https?:\/\/\{host\}\./.test(branch?.sites ?? '') ? { ...f, at: null, unseen: 'branch-sites' } : f) : [];
   const boards = held.current?.boards ?? [{ id: 'everything', name: 'Everything' }];
   // what is shown (architecture, "The board"): the pages whose records changed, everything, or a board people keep.
   // Changes is no board of its own: it is the first board's places and sections, holding only the pages that changed
@@ -1937,9 +1971,10 @@ function CanvasSurface({ name, token, session, retry, snapshot, back, canWrite }
   const board = (lens === 'changes' ? boards[0] : boards.find((b) => b.id === lens)) ?? boards[0]!;
   // the pages opened from the ones they sit under (Everything shows a vendor's top pages; a page's own open from it)
   const [opened, setOpened] = useState<Set<string>>(new Set());
-  const editable = canWrite && !snapshot;
+  const editable = canWrite && !snapshot && !viewing;
   /** An edit of the boards: shown at once, saved after the edits before it, made from the boards as they then stand. */
   const save = useCallback((edit: (all: SavedBoard[]) => SavedBoard[]): Promise<void> => {
+    if (!editable) return Promise.resolve();
     if (!held.current) { toast('The board is being read again: make that change once it shows', 'error'); return Promise.resolve(); }
     held.current = { ...held.current, boards: edit(held.current.boards) };
     pending.current += 1; generation.current += 1; rerender((n) => n + 1);
@@ -1970,7 +2005,7 @@ function CanvasSurface({ name, token, session, retry, snapshot, back, canWrite }
     });
     queue.current = run;
     return run;
-  }, [token, name, readBoard]);
+  }, [token, name, readBoard, editable]);
   const change = (id: string, edit: (b: SavedBoard) => SavedBoard): void => { void save((list) => list.map((b) => (b.id === id ? edit(b) : b))); };
   const parentKey = (f: BoardFrame): string | null => (f.parent ? `${f.vendor}:${f.parent}` : null);
   const keys = new Set(all.map(frameKey));
@@ -2037,10 +2072,10 @@ function CanvasSurface({ name, token, session, retry, snapshot, back, canWrite }
     // frames above the sections they sit in; a section's name tag above the board, where it can be clicked
     // a frame's size given, never left to be measured again: a board laid out anew keeps showing what did not change size.
     // A frame moves from anywhere on it, as a canvas app's does, until it is in use (its page then takes the pointer)
-    const frames: Node[] = shown.map((f) => ({ id: frameKey(f), type: 'screen', zIndex: 1, width: FRAME_W, height: FRAME_H, draggable: editable, position: at.get(frameKey(f))!, data: { world: name, frame: f, url: frameUrl(name, f) } }));
+    const frames: Node[] = shown.map((f) => ({ id: frameKey(f), type: 'screen', zIndex: 1, width: FRAME_W, height: FRAME_H, draggable: editable, position: at.get(frameKey(f))!, data: { world: name, branch: Boolean(viewing), frame: f, url: viewing ? branchFrameUrl(name, viewing, f) : frameUrl(name, f) } }));
     return [...sections, ...frames];
     // biome-ignore lint/correctness/useExhaustiveDependencies: the frames, the board and its places are what change it
-  }, [JSON.stringify(shown), JSON.stringify(board), name, editable]);
+  }, [JSON.stringify(shown), JSON.stringify(board), name, editable, viewing]);
   const [nodes, setNodes, onNodesChange] = useNodesState<Node>([]);
   // the canvas's zoom, for what is drawn the same size on screen at every zoom (a section's edges, where it is resized)
   const zoom = useStore((st) => st.transform[2]);
@@ -2192,7 +2227,7 @@ function CanvasSurface({ name, token, session, retry, snapshot, back, canWrite }
   const inSection = new Map(frameNodes.map((n) => [n.id, sectionOf(n, nodes)?.id ?? null]));
   // how many pages sit under each page, opened from it in Everything
   const under = new Map<string, number>(); for (const f of all) { const p = parentKey(f); if (p && keys.has(p)) under.set(p, (under.get(p) ?? 0) + 1); }
-  const frameRow = (n: Node): React.JSX.Element => { const f = (n.data as Screen).frame; return <li key={n.id}><button type="button" className={picked === n.id ? 'on' : undefined} onClick={() => focus(n.id)} onDoubleClick={() => setActive(n.id)}><Mark vendor={f.vendor} /><span>{f.title}</span>{f.changes ? <span className="layer-changed" title={`${counted(f.changes, 'change')}, not in a changeset: its mark on the board compares before and now`}><Icon name="square-dot" size={14} />{f.changes}</span> : null}</button>{under.get(n.id) && lens !== 'changes' && !board.include ? <button type="button" className="ghost layer-open" aria-expanded={opened.has(n.id)} onClick={() => setOpened((o) => { const x = new Set(o); if (x.has(n.id)) x.delete(n.id); else x.add(n.id); return x; })} title={opened.has(n.id) ? 'Close the pages under it' : 'Open the pages under it'}>{opened.has(n.id) ? '−' : '+'}{under.get(n.id)}</button> : null}</li>; };
+  const frameRow = (n: Node): React.JSX.Element => { const f = (n.data as Screen).frame; return <li key={n.id}><button type="button" className={picked === n.id ? 'on' : undefined} onClick={() => focus(n.id)} onDoubleClick={() => setActive(n.id)}><Mark vendor={f.vendor} /><span>{f.title}</span>{f.changes ? <span className="layer-changed" title={`${counted(f.changes, 'change')} ${viewing ? 'on this branch' : 'not in a changeset'}: its mark on the board opens a comparison`}><Icon name="square-dot" size={14} />{f.changes}</span> : null}</button>{under.get(n.id) && lens !== 'changes' && !board.include ? <button type="button" className="ghost layer-open" aria-expanded={opened.has(n.id)} onClick={() => setOpened((o) => { const x = new Set(o); if (x.has(n.id)) x.delete(n.id); else x.add(n.id); return x; })} title={opened.has(n.id) ? 'Close the pages under it' : 'Open the pages under it'}>{opened.has(n.id) ? '−' : '+'}{under.get(n.id)}</button> : null}</li>; };
   const dark = typeof window !== 'undefined' && window.matchMedia?.('(prefers-color-scheme: dark)').matches;
   const ready = session.state === 'ok' && loaded.state === 'ok';
   return (
@@ -2209,10 +2244,18 @@ function CanvasSurface({ name, token, session, retry, snapshot, back, canWrite }
         <Panel position="top-left" className="float layers">
           <div className="float-head">
             <button type="button" className="back" onClick={back} aria-label={`Back to ${name}`}>←</button>
-            <span className="float-title"><strong>{name.split('/')[1]}</strong><span className="mode">{name.split('/')[0]}{snapshot ? ' · snapshot' : ''}</span></span>
+            <span className="float-title"><strong>{(viewing || name).split('/')[1]}</strong><span className="mode">{name.split('/')[0]}{viewing ? ' · branch' : snapshot ? ' · snapshot' : ''}</span></span>
           </div>
+          <label className="compare-base board-viewing">Viewing
+            <select value={viewing} disabled={pending.current > 0} onChange={(e) => view(e.target.value)}>
+              <option value="">The World</option>
+              {viewing && !branch ? <option value={viewing}>{viewing} · branch</option> : null}
+              {(branches.state === 'ok' ? branches.data.branches : []).map((b) => <option key={b.name} value={b.name}>{b.name.split('/')[1]} · branch</option>)}
+            </select>
+          </label>
+          {branches.state === 'error' && branches.status !== 404 ? <p className="mode" role="alert">Branches could not be read: {branches.error}</p> : null}
           <div className="board-tabs" role="tablist" aria-label="Boards">
-            <button type="button" role="tab" aria-selected={lens === 'changes'} className={lens === 'changes' ? 'on' : undefined} onClick={() => { setPicked(null); setActive(null); setBoardId('changes'); }} title="The pages whose records changed and are not yet in a changeset">Changes{anyChanged ? ` (${all.filter((f) => f.changes).length})` : ''}</button>
+            <button type="button" role="tab" aria-selected={lens === 'changes'} className={lens === 'changes' ? 'on' : undefined} onClick={() => { setPicked(null); setActive(null); setBoardId('changes'); }} title={viewing ? "The pages whose records changed on this branch" : "The pages whose records changed and are not yet in a changeset"}>Changes{anyChanged ? ` (${all.filter((f) => f.changes).length})` : ''}</button>
             {boards.map((b) => (renaming === `board:${b.id}` ? <NameField key={b.id} name={b.name} label="Name this board" done={(next) => { setRenaming(null); if (next) change(b.id, (x) => ({ ...x, name: next })); }} /> : <button key={b.id} type="button" role="tab" aria-selected={lens !== 'changes' && b.id === board.id} className={lens !== 'changes' && b.id === board.id ? 'on' : undefined} onClick={() => { setPicked(null); setActive(null); setBoardId(b.id); }} onDoubleClick={editable && b.id === board.id && b.include ? rename : undefined}>{b.name}</button>))}
             {editable ? <button type="button" className="ghost" onClick={addBoard} aria-label="A new board">+</button> : null}
           </div>
@@ -2243,7 +2286,7 @@ function CanvasSurface({ name, token, session, retry, snapshot, back, canWrite }
           : <Panel position="top-center" className="float hint mode">Scroll to pan · pinch or ⌘ scroll to zoom · double-click a frame to use it</Panel>}
         {/* the board's own tools, along the bottom as a canvas app keeps them */}
         {editable ? <Panel position="bottom-center" className="float board-tools"><button type="button" className="ghost" onClick={addSection} title="Section (⇧S): around the selected frame, else in the middle"><Icon name="layout-grid" size={16} /><span>Section</span><kbd>⇧S</kbd></button></Panel> : null}
-        {comparing && shown.some((f) => frameKey(f) === comparing) ? <Panel position="top-right" className="float compare-panel"><Compare key={comparing} name={name} token={token} frame={shown.find((f) => frameKey(f) === comparing)!} onClose={() => setComparing(null)} reads={reads} /></Panel> : null}
+        {comparing && shown.some((f) => frameKey(f) === comparing) ? <Panel position="top-right" className="float compare-panel"><Compare key={comparing} viewing={viewing} name={name} token={token} frame={shown.find((f) => frameKey(f) === comparing)!} onClose={() => setComparing(null)} reads={reads} /></Panel> : null}
         <Controls showInteractive={false} position="bottom-left" />
         <MiniMap pannable zoomable nodeBorderRadius={8} position="bottom-right" />
       </ReactFlow>