@volter/world-console 3.0.4 → 3.0.6

package/dist/client/console.tsx

@@ -3,7 +3,7 @@
 // person typed, from the same origin the host serves. The client holds no state a door did not
 // answer, and offers nothing `volter world` or `curl` could not do. Locators are roles and text.
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Background, BackgroundVariant, Controls, MiniMap, NodeToolbar, Panel, Position, ReactFlow, ReactFlowProvider, useNodesState, useReactFlow, type Node, type NodeProps } from '@xyflow/react';
+import { Background, BackgroundVariant, Controls, MiniMap, NodeResizer, NodeToolbar, Panel, Position, ReactFlow, ReactFlowProvider, useNodesState, useReactFlow, type Node, type NodeProps } from '@xyflow/react';
 import { applyTheme, storedTheme, type Theme, At, Brand, ConfirmHost, MenuDismiss, confirmAct, CopyField, counted, Dialog, DrawerButton, Empty, failure as doorWords, listed, Mark, Menu, Pending, Skeleton, Toaster, toast, useDoor as useKitDoor, vendorName, when, ago, type Load } from './kit/kit.tsx';
 import { agentPrompt } from '../../../packages/cli/src/agent-prompt.ts';
 import { ICONS } from './brand/icons.ts';
@@ -619,7 +619,7 @@ function WorldView({ name, token, twin, tab, arg, sub, admin, snapshot, parentTo
   const retry = (): void => { setScope('pending'); setAttempt((a) => a + 1); };
   // ALL SCREENS is a canvas app's own page: the whole window, the World's pages a click away (Figma's, tldraw's)
   if (current === 'canvas' || (current === 'vendors' && !chosen) || (tab === 'screens' && !arg)) {
-    return <Canvas name={name} token={token} twins={twins} session={session} retry={retry} snapshot={snapshot} back={() => go(name.split('/'))} />;
+    return <Canvas name={name} token={token} twins={twins} session={session} retry={retry} snapshot={snapshot} back={() => go(name.split('/'))} canWrite={canWrite && !snapshot} />;
   }
   // EVERY World opens as its workspace: on this machine, on a host, and a snapshot of one (read only, a way back to live)
   const tabOf = (t?: string): SettingsTab => (SETTINGS_TABS.find(([k]) => k === t)?.[0] ?? 'account');
@@ -1187,12 +1187,11 @@ function Workspace({ name, token, view, sub, arg, win, who, snapshot, onReturn,
 
       <div className="ws-body">
         <nav className="ws-side" aria-label={`${name} places`}>
-          {/* the screens: one way in, saying how many there are and whose; the canvas lists them along its left */}
-          {withScreens.length ? (
-            <a href={`${BASE}/${name}/~/screens`} className={view === 'screen' ? 'ws-screens-entry on' : 'ws-screens-entry'} onClick={to(['screens'])} title={`${counted(withScreens.length, 'screen')}: ${listed(withScreens.map(vendorName))}`}>
-              <Icon name="layout-grid" size={16} /><span>Screens</span>
-              <span className="ws-screens-marks">{withScreens.slice(0, 3).map((v) => <Mark key={v} vendor={v} />)}{withScreens.length > 3 ? <span className="more">+{withScreens.length - 3}</span> : null}</span>
-              <span className="count">{withScreens.length}</span>
+          {/* the board: one way in, saying whose things are on it; the board lists its frames along its left */}
+          {vendors.length ? (
+            <a href={`${BASE}/${name}/~/screens`} className={view === 'screen' ? 'ws-screens-entry on' : 'ws-screens-entry'} onClick={to(['screens'])} title={`The board: ${listed(vendors.map(vendorName))}`}>
+              <Icon name="layout-grid" size={16} /><span>Board</span>
+              <span className="ws-screens-marks">{vendors.slice(0, 3).map((v) => <Mark key={v} vendor={v} />)}{vendors.length > 3 ? <span className="more">+{vendors.length - 3}</span> : null}</span>
             </a>
           ) : null}
           <p className="side-group">Workspace</p>
@@ -1674,101 +1673,456 @@ type RequestReport = { hours: number; requests: number; journalFailures?: number
 
 
 type ViewSession = { state: 'pending' } | { state: 'ok'; scope: string } | { state: 'error'; error: string };
-/** THE CANVAS: every vendor's own screens as frames on one surface, the way a canvas app holds its frames (React
- *  Flow; Figma's and tldraw's feel). Pan by dragging the background, zoom with the wheel or the controls, move a frame
- *  by its title bar (kept in this browser), click a frame to use that vendor's screens and the background or Esc to
- *  leave it, so a frame never captures the pan. A frame is its vendor's site at a desktop's size. */
-const FRAME_W = 1280; const FRAME_H = 820; const FRAME_GAP = 160;
-type Screen = { world: string; vendor: string; url: string; active: boolean; open: (vendor: string) => void; /** its records changed and not yet cut: the screen's mark, as a changed file's */ changed: number };
+/** THE BOARD: the World's things as frames on one surface, the way a Figma file holds its frames (React Flow; Figma's
+ *  and tldraw's feel). Each vendor's pack lays out its default frames (a Worker's site, a repository's page), grouped in
+ *  sections by the vendor's own containers; the World says where each opens and how many changes it holds not yet cut
+ *  (`GET /-/<world>/board`). The first board is everything; others hold what they include, a section with its frames to
+ *  come. Moving, hiding and including are kept by the World (`PUT /-/<world>/board`), for everyone who opens it. Pan by
+ *  dragging the background, move a frame by its title bar, click a frame to use it and the background or Esc to leave. */
+const FRAME_W = 1280; const FRAME_H = 820; const FRAME_GAP = 160; const SECTION_PAD = 72; const SECTION_HEAD = 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; 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 };
+/** 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 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}`;
+/** Every name a frame's section answers to on a board: its id, and those it was known by (an account a deploy adopted). */
+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);
+/** 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 };
 function ScreenFrame({ data }: NodeProps<Node<Screen>>): React.JSX.Element {
-  const { world, vendor, url, active, open, changed } = data;
+  const { frame, url, active, picked, boards, addTo, remove, compare } = data;
+  const key = frameKey(frame);
+  const others = boards.filter((b) => b.include && !b.include.includes(key) && !sectionKeys(frame).some((k) => b.include!.includes(k)));
   return (
     <>
+      {/* its name always, as a canvas app labels its frames; what can be done to it once it is selected */}
       <NodeToolbar isVisible position={Position.Top} align="start" className="frame-label">
-        <Mark vendor={vendor} /><span>{vendorName(vendor)}</span>
-        {changed ? <a className="frame-changed nodrag" href={`${BASE}/${world}/~/changes`} onClick={(e) => { e.preventDefault(); go([...world.split('/'), '~', 'changes']); }} title={`${counted(changed, 'record')} changed here, not in a changeset: see them in Changes`}><Icon name="square-dot" size={14} />{changed}</a> : null}
+        <Mark vendor={frame.vendor} /><span>{frame.title}</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> : 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}
       </NodeToolbar>
-      <div className={active ? 'frame on' : 'frame'} style={{ width: FRAME_W, height: FRAME_H }}>
-        <div className="frame-bar" title="Drag to move">
-          <Mark vendor={vendor} /><strong>{vendorName(vendor)}</strong>
-          <span className="frame-url">{url.replace(/^https?:\/\//, '')}</span>
-          <a className="nodrag" href={`${BASE}/${world}/~/screens/${vendor}`} onClick={(e) => { e.preventDefault(); open(vendor); }}>Open</a>
-          <a className="nodrag" href={url} target="_blank" rel="noopener noreferrer" aria-label={`Open ${vendorName(vendor)} in a new tab`}>↗</a>
+      <div className={active ? 'frame on' : picked ? 'frame picked' : 'frame'} style={{ width: FRAME_W, height: FRAME_H }}>
+        <div className="frame-bar" title="Drag to move · double-click to use">
+          <Mark vendor={frame.vendor} /><strong>{vendorName(frame.vendor)} · {frame.kind}</strong>
+          <span className="frame-url">{frame.url.replace(/^https?:\/\//, '')}</span>
+          {url ? <a className="nodrag" href={url} target="_blank" rel="noopener noreferrer" aria-label={`Open ${frame.title} in a new tab`}>↗</a> : null}
         </div>
         <div className={active ? 'frame-body nodrag nopan nowheel' : 'frame-body'}>
-          <iframe title={`${vendor} screens`} src={url} loading="lazy" style={{ pointerEvents: active ? 'auto' : 'none' }} />
+          {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>
       </div>
     </>
   );
 }
-const FRAME_TYPES = { screen: ScreenFrame };
-function Canvas(props: { name: string; token: string; twins: Load<{ twins: Twin[] }>; session: ViewSession; retry: () => void; snapshot: Snapshot | null; back: () => void }): React.JSX.Element {
+/** A section, as a canvas app's: a region of the board with a name, holding whatever frames sit in it. Its name stays the
+ *  same size at every zoom; selected, it can be resized from its edges, renamed (double-click the name) or removed. */
+type SectionData = { key: string; name: string; vendor: string | null; /** renamed by someone, so its name is kept */ named: boolean; picked: boolean; editable: boolean; pick: (key: string) => void; rename: (key: string) => void; remove: (key: string) => void; resized: () => void };
+function SectionBox({ data }: NodeProps<Node<SectionData>>): React.JSX.Element {
+  return (
+    <>
+      <NodeResizer isVisible={data.picked && data.editable} minWidth={480} minHeight={360} color="var(--accent)" onResizeEnd={data.resized} />
+      <NodeToolbar isVisible position={Position.Top} align="start" offset={6} className="section-tag">
+        <button type="button" className={data.picked ? 'nodrag on' : 'nodrag'} onClick={() => data.pick(data.key)} onDoubleClick={() => { if (data.editable) data.rename(data.key); }} title={data.editable ? 'Double-click to rename' : undefined}>
+          {data.vendor ? <Mark vendor={data.vendor} /> : null}<span>{data.name}</span>
+        </button>
+        {data.picked && data.editable ? <button type="button" className="ghost nodrag" onClick={() => data.remove(data.key)} aria-label={`Remove the section ${data.name}`} title="Remove the section (its frames stay)">✕</button> : null}
+      </NodeToolbar>
+      <div className={data.picked ? 'section-box on' : 'section-box'} />
+    </>
+  );
+}
+/** A frame's page at a desktop's size, shown smaller: what it looks like, not a place to use it. */
+function Thumb({ url, title }: { url: string; title: string }): React.JSX.Element {
+  const width = 420;
+  return <div className="compare-thumb" style={{ width, height: (width * FRAME_H) / FRAME_W }}><iframe title={title} src={url} loading="lazy" style={{ width: FRAME_W, height: FRAME_H, transform: `scale(${width / FRAME_W})` }} /></div>;
+}
+/** 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 {
+  const [before, setBefore] = useState<{ state: 'opening' } | { state: 'ok'; url: string; at: string } | { state: 'none'; why: string }>({ state: 'opening' });
+  // its changes, read for this comparison alone
+  const listed = useDoor<{ total: number; acts: BoardAct[] }>(token, `/-/${name}/board/changes?frame=${encodeURIComponent(frameKey(frame))}`, reads);
+  useEffect(() => {
+    if (!frame.since) { setBefore({ state: 'none', why: 'Nothing here has changed since the World was last cut.' }); return; }
+    if (!frame.at || !('site' in frame.at)) { setBefore({ state: 'none', why: `A ${vendorName(frame.vendor)} page as it was needs a signed-in copy of the World; its changes are listed below.` }); return; }
+    const at = new Date(Date.parse(frame.since) - 1).toISOString();
+    let made: string | null = null; let closed = false;
+    // a copy is made once the comparison has stayed open a moment: one passed through on the way to another makes none
+    const wait = setTimeout(() => void (async () => {
+      const r = await door(token, `/-/${name}/branches`, { method: 'POST', body: JSON.stringify({ at: { instant: at }, ttl: 3600 }), signal: AbortSignal.timeout(60000) }).catch(() => null);
+      if (!r?.ok) { setBefore({ state: 'none', why: `The World made no copy of itself as it was then${r ? `: ${await failure(r)}` : ''}.` }); return; }
+      const b = (await r.json()) as { name: string; origin?: string };
+      made = b.name;
+      if (closed) { void door(token, `/-/${name}/branches/${b.name}`, { method: 'DELETE' }).catch(() => null); return; }
+      const o = httpOrigin(b.origin);
+      if (!o) { setBefore({ state: 'none', why: 'This World shows sites only at its own local address.' }); return; }
+      const u = new URL(frame.url);
+      setBefore({ state: 'ok', url: `${o.protocol}//${u.hostname}.${o.host}${u.pathname}${u.search}`, at });
+    })(), 500);
+    return () => { closed = true; clearTimeout(wait); if (made) void door(token, `/-/${name}/branches/${made}`, { method: 'DELETE' }).catch(() => null); };
+  }, [name, token, frame.vendor, frame.id, frame.since]);
+  const now = frameUrl(name, frame);
+  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">{counted(frame.changes, 'change')} not yet cut{frame.since ? `, since ${when(frame.since)}` : ''}</span>
+        <button type="button" className="ghost" onClick={onClose} aria-label="Close the comparison">✕</button>
+      </div>
+      <div className="compare-sides">
+        <figure>
+          <figcaption>Before{before.state === 'ok' ? ` · as of ${when(before.at)}` : ''}</figcaption>
+          {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>}
+        </figure>
+      </div>
+      {listed.state === 'error' ? <p role="alert" className="mode">Its changes could not be read: {listed.error}</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);
+          return (
+            <li key={`${a.at}:${first.subject.type}:${first.subject.id}`}>
+              <span className="mode">{when(a.at)}</span>
+              <details><summary><strong>{words.what}</strong>{words.label ? ` · ${words.label}` : ''}{a.writes > 1 ? <span className="mode"> and {counted(a.writes - 1, 'more write')}</span> : null}</summary>
+                <ul>{a.entries.map((e, i) => <li key={i}><code>{e.operation ?? e.op}</code> <span className="mode">{e.subject.type} {shown(e as unknown as Entry)}</span></li>)}{a.writes > a.entries.length ? <li className="mode">and {counted(a.writes - a.entries.length, 'more write')}</li> : null}</ul>
+              </details>
+            </li>
+          );
+        })}
+      </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>
+    </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>;
 }
-/** The canvas fills the window, as Figma's, tldraw's and Miro's do: the way back and the frames' list float at the top
- *  left (a canvas app's layers), zoom at the bottom left, the minimap at the bottom right. */
-function CanvasSurface({ name, token, twins, session, retry, snapshot, back }: { name: string; token: string; twins: Load<{ twins: Twin[] }>; session: ViewSession; retry: () => void; snapshot: Snapshot | null; back: () => void }): React.JSX.Element {
-  // each screen's changes not yet cut, by vendor: the records, as Changes counts them
-  const diff = useDoor<Diff>(token, `/-/${name}/diff`);
-  const changed = useMemo((): Record<string, number> => {
-    const by: Record<string, Set<string>> = {};
-    if (diff.state === 'ok') for (const c of diff.data.changes) (by[c.twin] ??= new Set()).add(`${c.entry.subject.type}:${c.entry.subject.id}`);
-    return Object.fromEntries(Object.entries(by).map(([v, rs]) => [v, rs.size]));
-  }, [diff]);
-  const changedAt = (v: string): number => changed[v] ?? 0;
-  const urls = new Map((twins.state === 'ok' ? twins.data.twins : []).flatMap((t) => { const at = screenUrl(name, t); return at ? [[t.twin, at] as const] : []; }));
-  const frames = [...urls.keys()];
-  const saved = `volter.canvas.${name}`;
+/** 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 {
+  // 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
+  const held = useRef<{ boards: SavedBoard[]; version: string } | null>(null);
+  const pending = useRef(0);
+  const queue = useRef<Promise<void>>(Promise.resolve());
+  // a save's generation: every save moves it when it starts and when it settles, and a read of the board takes its
+  // boards only if none moved it while the read was out, so an older read never replaces a save's answer
+  const generation = useRef(0);
+  const [, rerender] = useState(0);
+  const [loaded, setLoaded] = useState<Load<BoardDoor>>({ state: 'loading' });
+  // 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);
+  // 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 data = r?.ok ? ((await r.json().catch(() => null)) as BoardDoor | null) : null;
+    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 }));
+      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]);
+  // 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 boards = held.current?.boards ?? [{ id: 'everything', name: 'Everything' }];
+  const [boardId, setBoardId] = useState('everything');
+  const board = boards.find((b) => b.id === boardId) ?? boards[0]!;
+  const editable = canWrite && !snapshot;
+  /** 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 (!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);
+    // each save settles whatever happens, so the next always runs: one the World refuses, or that never arrives, drops
+    // this page's unsaved edits for the World's boards, read again
+    const run = queue.current.then(async () => {
+      const at = held.current;
+      if (!at) return;
+      try {
+        // a save that never answers is a failed one, so the saves after it still run
+        const r = await door(token, `/-/${name}/board`, { method: 'PUT', body: JSON.stringify({ boards: at.boards, version: at.version }), signal: AbortSignal.timeout(15000) });
+        const answer = (await r.json().catch(() => null)) as (Partial<BoardDoor> & { error?: string }) | null;
+        if (r.ok && answer?.boards && answer.version) held.current = { boards: pending.current > 1 && held.current ? held.current.boards : answer.boards, version: answer.version };
+        else if (r.status === 409 && answer?.boards && answer.version) { held.current = { boards: answer.boards, version: answer.version }; toast('Someone else changed the board first: it is shown as they left it', 'error'); }
+        else throw new Error(answer?.error ?? `the World answered ${r.status}`);
+      } catch (e) {
+        toast(`The board was not kept: ${e instanceof Error ? e.message : String(e)}`, 'error');
+        // the World's boards as they stand now, read for this, never an older read the page still holds
+        held.current = null;
+        const r = await door(token, `/-/${name}/board`, { signal: AbortSignal.timeout(15000) }).catch(() => null);
+        const now = r?.ok ? ((await r.json().catch(() => null)) as BoardDoor | null) : null;
+        if (now?.boards && now.version) held.current = { boards: now.boards, version: now.version };
+      }
+    }).finally(() => {
+      pending.current -= 1; generation.current += 1; rerender((n) => n + 1);
+      // a page left without the boards (the recovery read failed too) reads them once the saves are done
+      if (pending.current === 0 && !held.current) void readBoard();
+    });
+    queue.current = run;
+    return run;
+  }, [token, name, readBoard]);
+  const change = (id: string, edit: (b: SavedBoard) => SavedBoard): void => { void save((list) => list.map((b) => (b.id === id ? edit(b) : b))); };
+  const shown = shownOn(board, all);
+  const elsewhere = all.filter((f) => f.changes && !shown.includes(f)).reduce((n, f) => n + f.changes, 0);
+  // a frame in use takes the pointer (double-click, as a canvas app enters a frame); one selected shows what can be done to it
   const [active, setActive] = useState<string | null>(null);
-  const [layers, setLayers] = useState(true);
+  const [picked, setPicked] = useState<string | null>(null);
+  // the frame whose changes are being compared
+  const [comparing, setComparing] = useState<string | null>(null);
   const flow = useReactFlow();
-  const open = useCallback((v: string): void => go([...name.split('/'), '~', 'screens', v]), [name]);
-  const cols = Math.max(1, Math.ceil(Math.sqrt(frames.length)));
-  const placed = useCallback((): Array<Node<Screen>> => {
-    let kept: Record<string, { x: number; y: number }> = {};
-    try { kept = JSON.parse(localStorage.getItem(saved) ?? '{}') as Record<string, { x: number; y: number }>; } catch { /* a convenience */ }
-    return frames.map((v, i) => ({ id: v, type: 'screen', dragHandle: '.frame-bar', position: kept[v] ?? { x: (i % cols) * (FRAME_W + FRAME_GAP), y: Math.floor(i / cols) * (FRAME_H + FRAME_GAP) }, data: { world: name, vendor: v, url: urls.get(v)!, active: false, open, changed: changed[v] ?? 0 } }));
-    // biome-ignore lint/correctness/useExhaustiveDependencies: the frames' names are what change it
-  }, [frames.join(','), name, cols, open, changed]);
-  const [nodes, setNodes, onNodesChange] = useNodesState<Node<Screen>>([]);
-  useEffect(() => { setNodes(placed()); }, [placed, setNodes]);
-  useEffect(() => { setNodes((all) => all.map((n) => (n.data.active === (n.id === active) ? n : { ...n, data: { ...n.data, active: n.id === active } }))); }, [active, setNodes]);
-  useEffect(() => { const on = (e: KeyboardEvent): void => { if (e.key === 'Escape') setActive(null); }; document.addEventListener('keydown', on); return () => document.removeEventListener('keydown', on); }, []);
-  const keep = (): void => { try { localStorage.setItem(saved, JSON.stringify(Object.fromEntries(nodes.map((n) => [n.id, n.position])))); } catch { /* a convenience */ } };
-  /** A layer's row: bring that frame to the middle of the window, and use it. */
-  const focus = (v: string): void => {
-    setActive(v);
-    const n = flow.getNode(v); if (!n) return;
-    // the frame in the room the floating panels leave, at the largest zoom that shows it whole
-    const zoom = Math.min((window.innerWidth - 300) / FRAME_W, (window.innerHeight - 120) / FRAME_H, 1);
-    void flow.setCenter(n.position.x + FRAME_W / 2 - 130 / zoom, n.position.y + FRAME_H / 2, { zoom, duration: 400 });
+  const others = boards.filter((b) => b.include);
+  const addTo = (id: string, key: string): void => change(id, (b) => ({ ...b, include: [...(b.include ?? []), key] }));
+  const removeFrame = { label: board.include ? 'Take it off this board' : 'Hide it', act: (key: string): void => { setPicked(null); change(board.id, (b) => (b.include ? { ...b, include: b.include.filter((k) => k !== key) } : { ...b, hidden: [...(b.hidden ?? []), key] })); } };
+  const rect = (n: Node): { x: number; y: number; w: number; h: number } => ({ x: n.position.x, y: n.position.y, w: n.width ?? n.measured?.width ?? FRAME_W, h: n.height ?? n.measured?.height ?? FRAME_H });
+  /** The section a frame sits in, as on a canvas: the smallest whose region holds the frame's middle, the newest of equals
+   *  (a section drawn around a frame takes it). */
+  const sectionOf = (frame: Node, all: Node[]): Node | undefined => {
+    const r = rect(frame); const cx = r.x + r.w / 2; const cy = r.y + r.h / 2;
+    return all.filter((n) => n.type === 'section').map((s, i) => ({ s, i })).filter(({ s }) => { const q = rect(s); return cx >= q.x && cx <= q.x + q.w && cy >= q.y && cy <= q.y + q.h; })
+      .sort((a, b) => rect(a.s).w * rect(a.s).h - rect(b.s).w * rect(b.s).h || b.i - a.i)[0]?.s;
+  };
+  /** The board laid out: each frame where it was put on this board, else after its pack's group, a new group under all;
+   *  each of the packs' groups a section around its frames until it is moved, resized, renamed or removed, and the
+   *  sections people drew where they drew them. */
+  const layout = useCallback((): Node[] => {
+    const at = new Map<string, { x: number; y: number }>();
+    for (const f of shown) { const p = board.placed?.[frameKey(f)]; if (p) at.set(frameKey(f), p); }
+    // a new group goes under the frames placed so far; a section someone draws never moves what is already laid out
+    let bottom = Math.max(-FRAME_GAP, ...[...at.values()].map((p) => p.y + FRAME_H));
+    const groups = [...new Set(shown.map(sectionKey))];
+    for (const s of groups) {
+      const members = shown.filter((f) => sectionKey(f) === s);
+      const placedOnes = members.filter((f) => at.has(frameKey(f))).map((f) => at.get(frameKey(f))!);
+      let x = placedOnes.length ? Math.max(...placedOnes.map((p) => p.x)) + FRAME_W + FRAME_GAP : 0;
+      const y = placedOnes.length ? Math.min(...placedOnes.map((p) => p.y)) : bottom + FRAME_GAP + SECTION_PAD * 2 + SECTION_HEAD;
+      for (const f of members) if (!at.has(frameKey(f))) { at.set(frameKey(f), { x, y }); x += FRAME_W + FRAME_GAP; }
+      bottom = Math.max(bottom, y + FRAME_H);
+    }
+    const kept = board.sections ?? {};
+    const section = (key: string, r: { x: number; y: number; w: number; h: number }, name: string, vendor: string | null, named: boolean): Node => ({ id: `sec:${key}`, type: 'section', position: { x: r.x, y: r.y }, width: r.w, height: r.h, zIndex: 0, draggable: editable, data: { key, name, vendor, named } });
+    const sections: Node[] = [];
+    for (const s of groups) {
+      const f = shown.find((x) => sectionKey(x) === s)!;
+      // a pack's group as people left it, under whichever id it was known by when they did (an account adopted since)
+      const keyed = sectionKeys(f).find((k) => kept[k]) ?? s;
+      const own = kept[keyed];
+      if (own?.gone) continue;
+      const ps = shown.filter((x) => sectionKey(x) === s).map((x) => at.get(frameKey(x))!);
+      const around = { x: Math.min(...ps.map((p) => p.x)) - SECTION_PAD, y: Math.min(...ps.map((p) => p.y)) - SECTION_PAD, w: 0, h: 0 };
+      around.w = Math.max(...ps.map((p) => p.x)) + FRAME_W + SECTION_PAD - around.x; around.h = Math.max(...ps.map((p) => p.y)) + FRAME_H + SECTION_PAD - around.y;
+      // a group people arranged still takes its new frames: its region reaches over the ones placed after it
+      const unplacedOf = shown.filter((x) => sectionKey(x) === s && !board.placed?.[frameKey(x)]).map((x) => at.get(frameKey(x))!);
+      const r = own ? { ...own } : around;
+      if (own) for (const p of unplacedOf) { r.w = Math.max(r.w, p.x + FRAME_W + SECTION_PAD - r.x); r.h = Math.max(r.h, p.y + FRAME_H + SECTION_PAD - r.y); }
+      sections.push(section(keyed, r, own?.name ?? `${vendorName(f.vendor)} · ${f.section.title}`, f.vendor, Boolean(own?.name)));
+    }
+    for (const [k, r] of Object.entries(kept)) if (k.startsWith('user:') && !r.gone) sections.push(section(k, r, r.name ?? 'Section', null, true));
+    // 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
+    const frames: Node[] = shown.map((f) => ({ id: frameKey(f), type: 'screen', zIndex: 1, width: FRAME_W, height: FRAME_H, dragHandle: '.frame-bar', draggable: editable, position: at.get(frameKey(f))!, data: { world: name, frame: f, url: 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]);
+  const [nodes, setNodes, onNodesChange] = useNodesState<Node>([]);
+  // a board opened is fitted to its own frames, once they are set: each board keeps its own layout
+  const fitted = useRef('');
+  useEffect(() => {
+    const next = layout();
+    setNodes(next);
+    if (next.length && fitted.current !== board.id) { fitted.current = board.id; requestAnimationFrame(() => { void flow.fitView({ padding: { top: '72px', left: '272px', right: '40px', bottom: '72px' }, duration: 0 }); }); }
+  }, [layout, setNodes]);
+  /** What was just arranged, kept on this board beside what was kept before: the frames moved, and the sections moved,
+   *  resized or renamed (a pack's group is kept only once someone arranges it; its name only once someone renames it). */
+  const keep = (frames: Record<string, { x: number; y: number }>, sections: string[] = [], names: Record<string, string> = {}): void => {
+    const regions = Object.fromEntries(sections.map((key) => {
+      const n = flow.getNode(`sec:${key}`); if (!n) return [key, undefined];
+      const r = rect(n); const d = n.data as { name: string; named?: boolean };
+      const name = names[key] ?? (d.named ? d.name : undefined);
+      return [key, { x: Math.round(r.x), y: Math.round(r.y), w: Math.round(r.w), h: Math.round(r.h), ...(name ? { name: name.slice(0, 80) } : {}) }];
+    }).filter(([, v]) => v !== undefined));
+    const placed = Object.fromEntries(Object.entries(frames).map(([k, p]) => [k, { x: Math.round(p.x), y: Math.round(p.y) }]));
+    change(board.id, (b) => ({ ...b, placed: { ...(b.placed ?? {}), ...placed }, sections: { ...(b.sections ?? {}), ...regions } }));
+  };
+  // a section carries what is in it as it is moved: the frames whose middle it holds, and the sections inside it
+  const carrying = useRef<{ id: string; from: { x: number; y: number }; members: Array<{ id: string; x: number; y: number }> } | null>(null);
+  const onDragStart = (_e: unknown, node: Node): void => {
+    if (node.type !== 'section') { carrying.current = null; return; }
+    const ns = flow.getNodes(); const q = rect(node);
+    const holds = (n: Node): boolean => {
+      const r = rect(n);
+      if (n.type === 'screen') { const cx = r.x + r.w / 2; const cy = r.y + r.h / 2; return cx >= q.x && cx <= q.x + q.w && cy >= q.y && cy <= q.y + q.h; }
+      return n.id !== node.id && r.x >= q.x && r.y >= q.y && r.x + r.w <= q.x + q.w && r.y + r.h <= q.y + q.h;
+    };
+    carrying.current = { id: node.id, from: { ...node.position }, members: ns.filter(holds).map((n) => ({ id: n.id, x: n.position.x, y: n.position.y })) };
+  };
+  const onDrag = (_e: unknown, node: Node): void => {
+    const c = carrying.current; if (!c || c.id !== node.id) return;
+    const dx = node.position.x - c.from.x; const dy = node.position.y - c.from.y;
+    const by = new Map(c.members.map((m) => [m.id, m]));
+    setNodes((ns) => ns.map((n) => { const m = by.get(n.id); return m ? { ...n, position: { x: m.x + dx, y: m.y + dy } } : n; }));
+  };
+  /** A drag ended: where it ended, from the drag itself, for the node and everything it carried; and each group a moved
+   *  frame belongs to kept as it now stands (its other frames, and its section), so nothing moves unless someone moves it. */
+  const onDragStop = (_e: unknown, node: Node): void => {
+    const c = carrying.current; carrying.current = null;
+    const dx = node.position.x - (c?.from.x ?? node.position.x); const dy = node.position.y - (c?.from.y ?? node.position.y);
+    const moved = node.type === 'screen' ? [{ id: node.id, x: node.position.x, y: node.position.y }] : (c?.members ?? []).map((m) => ({ ...m, x: m.x + dx, y: m.y + dy }));
+    requestAnimationFrame(() => {
+      const ns = flow.getNodes();
+      const frames = new Map(moved.filter((m) => !m.id.startsWith('sec:')).map((m) => [m.id, { x: m.x, y: m.y }]));
+      const sections = new Set([...(node.type === 'section' ? [(node.data as { key: string }).key] : []), ...moved.filter((m) => m.id.startsWith('sec:')).map((m) => m.id.slice(4))]);
+      // a group by every id its section was known by (its kept settings may be under an adopted account's earlier one)
+      const groups = new Set(ns.filter((n) => frames.has(n.id)).flatMap((n) => sectionKeys((n.data as Screen).frame)));
+      for (const n of ns) {
+        if (n.type === 'screen' && sectionKeys((n.data as Screen).frame).some((k) => groups.has(k)) && !frames.has(n.id)) frames.set(n.id, { x: n.position.x, y: n.position.y });
+        if (n.type === 'section' && groups.has((n.data as SectionData).key)) sections.add((n.data as SectionData).key);
+      }
+      keep(Object.fromEntries(frames), [...sections]);
+    });
   };
+  /** A pack's group's frames where they now stand: kept with its section when the section is arranged, so they stay in it. */
+  const groupFrames = (key: string): Record<string, { x: number; y: number }> =>
+    Object.fromEntries(flow.getNodes().filter((n) => n.type === 'screen' && sectionKeys((n.data as Screen).frame).includes(key)).map((n) => [n.id, { x: n.position.x, y: n.position.y }]));
+  const renameSection = (key: string): void => {
+    const n = flow.getNode(`sec:${key}`); const now = (n?.data as { name?: string } | undefined)?.name ?? 'Section';
+    const next = window.prompt('Name this section', now)?.trim(); if (!next) return;
+    setNodes((ns) => ns.map((x) => (x.id === `sec:${key}` ? { ...x, data: { ...x.data, name: next.slice(0, 80), named: true } } : x)));
+    requestAnimationFrame(() => keep(groupFrames(key), [key], { [key]: next }));
+  };
+  /** A section removed: its frames stay where they are; a pack's group is kept as removed, so it does not come back. */
+  const removeSection = (key: string): void => {
+    setPicked(null);
+    const r = flow.getNode(`sec:${key}`);
+    change(board.id, (b) => {
+      const rest = Object.fromEntries(Object.entries(b.sections ?? {}).filter(([k]) => k !== key));
+      return { ...b, sections: key.startsWith('user:') ? rest : { ...rest, [key]: { ...(r ? { x: Math.round(r.position.x), y: Math.round(r.position.y), w: Math.round(rect(r).w), h: Math.round(rect(r).h) } : { x: 0, y: 0, w: 0, h: 0 }), gone: true } } };
+    });
+  };
+  /** A new section: around the selected frame, else in the middle of the window. */
+  const addSection = (): void => {
+    const sel = picked ? flow.getNode(picked) : undefined;
+    const middle = flow.screenToFlowPosition({ x: window.innerWidth / 2, y: window.innerHeight / 2 });
+    const r = sel?.type === 'screen' ? { x: sel.position.x - SECTION_PAD, y: sel.position.y - SECTION_PAD, w: FRAME_W + SECTION_PAD * 2, h: FRAME_H + SECTION_PAD * 2 } : { x: middle.x - 900, y: middle.y - 600, w: 1800, h: 1200 };
+    const key = `user:${Date.now().toString(36)}`;
+    const count = Object.keys(board.sections ?? {}).filter((k) => k.startsWith('user:')).length + 1;
+    setPicked(`sec:${key}`);
+    change(board.id, (b) => ({ ...b, sections: { ...(b.sections ?? {}), [key]: { x: Math.round(r.x), y: Math.round(r.y), w: Math.round(r.w), h: Math.round(r.h), name: `Section ${count}` } } }));
+  };
+  // what each node shows: in use, selected, and what can be done to it
+  const shownNodes = nodes.map((n) => (n.type === 'section'
+    ? { ...n, data: { ...n.data, picked: picked === n.id, editable, pick: (k: string) => setPicked(`sec:${k}`), rename: renameSection, remove: removeSection, resized: () => requestAnimationFrame(() => { const k = (n.data as { key: string }).key; keep(groupFrames(k), [k]); }) } }
+    : { ...n, data: { ...n.data, active: active === n.id, picked: picked === n.id, boards: editable ? others : [], addTo, remove: !editable || (board.include && !board.include.includes(n.id)) ? null : removeFrame, compare: (k: string) => { setPicked(k); setComparing(k); } } }));
+  // the keys a canvas app answers: Esc leaves a frame, then the selection; Delete removes what is selected; ⇧S draws a section
+  useEffect(() => {
+    const on = (e: KeyboardEvent): void => {
+      if ((e.target as HTMLElement | null)?.closest('input, textarea, select, [contenteditable]')) return;
+      if (e.key === 'Escape') { if (active) setActive(null); else setPicked(null); return; }
+      if (!editable || active) return;
+      if ((e.key === 'Delete' || e.key === 'Backspace') && picked) { e.preventDefault(); if (picked.startsWith('sec:')) removeSection(picked.slice(4)); else if (!board.include || board.include.includes(picked)) removeFrame.act(picked); else toast('It is on this board with its whole group: take the group off in the list to remove it', 'error'); return; }
+      if (e.key === 'S' && e.shiftKey && !e.metaKey && !e.ctrlKey) { e.preventDefault(); addSection(); }
+    };
+    document.addEventListener('keydown', on); return () => document.removeEventListener('keydown', on);
+  });
+  /** A layer's row: bring that frame or section to the middle of the window, selected. */
+  const focus = (id: string): void => {
+    setPicked(id);
+    const n = flow.getNode(id); if (!n) return;
+    const r = rect(n);
+    void flow.fitBounds({ x: r.x, y: r.y, width: r.w, height: r.h }, { padding: 0.15, duration: 400 });
+  };
+  const addBoard = (): void => {
+    const id = `board-${Date.now().toString(36)}`;
+    setBoardId(id);
+    void save((list) => [...list, { id, name: `Board ${list.length}`, include: [] }]);
+  };
+  const rename = (): void => { const n = window.prompt('Name this board', board.name)?.trim(); if (n) change(board.id, (b) => ({ ...b, name: n.slice(0, 80) })); };
+  const drop = (): void => { const gone = board.id; setBoardId('everything'); void save((list) => list.filter((b) => b.id !== gone)); };
+  const groups = [...new Map(all.map((f) => [sectionKey(f), f])).values()];
+  const missing = board.include ? [...groups.filter((f) => !sectionKeys(f).some((k) => board.include!.includes(k))).map((f) => ({ key: sectionKey(f), label: `${vendorName(f.vendor)} · ${f.section.title} (all)` })), ...all.filter((f) => !shown.includes(f)).map((f) => ({ key: frameKey(f), label: f.title }))] : [];
+  const hidden = board.include ? [] : all.filter((f) => !shown.includes(f));
+  // the layers as the canvas has them: each section with the frames in it, then the frames in none
+  const sectionNodes = nodes.filter((n) => n.type === 'section');
+  const frameNodes = nodes.filter((n) => n.type === 'screen');
+  const inSection = new Map(frameNodes.map((n) => [n.id, sectionOf(n, nodes)?.id ?? null]));
+  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></li>; };
   const dark = typeof window !== 'undefined' && window.matchMedia?.('(prefers-color-scheme: dark)').matches;
-  const ready = session.state === 'ok' && twins.state === 'ok';
+  const ready = session.state === 'ok' && loaded.state === 'ok';
   return (
-    <div className="canvas full" role="region" aria-label="Every vendor's screens">
-      <ReactFlow nodes={ready ? nodes : []} onNodesChange={onNodesChange} nodeTypes={FRAME_TYPES} onNodeDragStop={keep}
-        onNodeClick={(_e, n) => setActive(n.id)} onPaneClick={() => setActive(null)}
-        fitView fitViewOptions={{ padding: { top: '64px', left: '272px', right: '32px', bottom: '32px' } }} minZoom={0.05} maxZoom={1.5} nodesConnectable={false} elementsSelectable={false}
-        panOnScroll={false} zoomOnDoubleClick={false} colorMode={dark ? 'dark' : 'light'} proOptions={{ hideAttribution: true }}>
+    <div className="canvas full" role="region" aria-label="The World's board">
+      <ReactFlow nodes={ready ? shownNodes : []} onNodesChange={onNodesChange} nodeTypes={FRAME_TYPES}
+        onNodeDragStart={onDragStart} onNodeDrag={onDrag} onNodeDragStop={onDragStop}
+        onNodeClick={(_e, n) => { if (n.id !== active) setPicked(n.id); }} onNodeDoubleClick={(_e, n) => { if (n.type === 'screen') { setPicked(n.id); setActive(n.id); } }}
+        onPaneClick={() => { setActive(null); setPicked(null); }}
+        minZoom={0.03} maxZoom={1.5} nodesConnectable={false} elementsSelectable={false}
+        panOnScroll zoomOnPinch zoomOnScroll={false} zoomOnDoubleClick={false} colorMode={dark ? 'dark' : 'light'} proOptions={{ hideAttribution: true }}>
         <Background variant={BackgroundVariant.Dots} gap={28} size={1.4} />
         <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>
-            <button type="button" className="ghost" aria-expanded={layers} aria-label={layers ? 'Hide the screens list' : 'Show the screens list'} onClick={() => setLayers(!layers)}>{layers ? '▾' : '▸'}</button>
           </div>
-          {layers ? (
-            <ul className="layer-list" aria-label="Screens">
-              {frames.map((v) => <li key={v}><button type="button" className={active === v ? 'on' : undefined} onClick={() => focus(v)}><Mark vendor={v} /><span>{vendorName(v)}</span>{changedAt(v) ? <span className="layer-changed" title={`${counted(changedAt(v), 'record')} changed, not in a changeset`}><Icon name="square-dot" size={14} />{changedAt(v)}</span> : null}</button></li>)}
-            </ul>
-          ) : null}
-          <Pending load={twins} what="the vendors" />
+          <div className="board-tabs" role="tablist" aria-label="Boards">
+            {boards.map((b) => <button key={b.id} type="button" role="tab" aria-selected={b.id === board.id} className={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>
+          {board.include && editable ? <div className="board-acts"><button type="button" className="ghost" onClick={rename}>Rename</button><button type="button" className="ghost" onClick={drop}>Delete board</button></div> : null}
+          <ul className="layer-list" aria-label="Layers">
+            {sectionNodes.map((s) => {
+              const d = s.data as SectionData;
+              return (
+                <li key={s.id}>
+                  <button type="button" className={picked === s.id ? 'layer-section on' : 'layer-section'} onClick={() => focus(s.id)} onDoubleClick={() => { if (editable) renameSection(d.key); }}>{d.vendor ? <Mark vendor={d.vendor} /> : <Icon name="layout-grid" size={14} />}<span>{d.name}</span></button>
+                  <ul className="layer-list inner">{frameNodes.filter((n) => inSection.get(n.id) === s.id).map(frameRow)}</ul>
+                </li>
+              );
+            })}
+            {frameNodes.filter((n) => !inSection.get(n.id)).map(frameRow)}
+          </ul>
+          {board.include && !shown.length ? <p className="mode pad-s">An empty board: add frames from Everything, or below.</p> : null}
+          {missing.length && editable ? <select className="board-add" value="" aria-label="Add to this board" onChange={(e) => { const k = e.target.value; if (k) change(board.id, (b) => ({ ...b, include: [...(b.include ?? []), k] })); }}><option value="">Add to this board…</option>{missing.map((m) => <option key={m.key} value={m.key}>{m.label}</option>)}</select> : null}
+          {hidden.length ? <details className="board-hidden"><summary>Hidden ({hidden.length})</summary><ul className="layer-list">{hidden.map((f) => <li key={frameKey(f)}>{editable ? <button type="button" onClick={() => change(board.id, (b) => ({ ...b, hidden: (b.hidden ?? []).filter((k) => k !== frameKey(f)) }))}><span>{f.title}</span><span className="mode">Show</span></button> : <span className="pad-s">{f.title}</span>}</li>)}</ul></details> : null}
+          {elsewhere ? <button type="button" className="board-elsewhere" onClick={() => setBoardId('everything')}><Icon name="square-dot" size={14} />{counted(elsewhere, 'change')} not on this board</button> : null}
+          <Pending load={loaded} what="the board" />
+          {stale && loaded.state === 'ok' ? <p role="alert" className="pad-s">The board could not be read again ({stale}): it shows what was last read.</p> : null}
           {session.state === 'pending' ? <p className="mode" role="status">Opening…</p> : null}
           {session.state === 'error' ? <p role="alert">The World did not open its screens: {session.error} <button type="button" onClick={retry}>Try again</button></p> : null}
         </Panel>
-        <Panel position="top-center" className="float hint mode">{active ? `Using ${vendorName(active)} · Esc to leave` : 'Drag to pan · scroll to zoom · click a screen to use it'}</Panel>
+        {/* the way out of a frame's live page, which keeps the keys it has (Esc reaches the board only from outside it) */}
+        {active ? <Panel position="top-center" className="float hint using"><span className="mode">Using {shown.find((f) => frameKey(f) === active)?.title ?? active}</span><button type="button" onClick={() => setActive(null)}>Done <kbd>Esc</kbd></button></Panel>
+          : <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}
         <Controls showInteractive={false} position="bottom-left" />
         <MiniMap pannable zoomable nodeBorderRadius={8} position="bottom-right" />
       </ReactFlow>