@volter/world-console 3.0.3 → 3.0.5

package/client/console.css

@@ -610,3 +610,23 @@ main.app.home { max-width: none; }
 .ws-rule-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
 .ws-rule-row select { width: auto; }
 .ws-rules fieldset.choice { border: 0; padding: 0; margin: 4px 0; display: grid; gap: 6px; }
+/* THE BOARD: sections round their frames as Figma's do, behind them; the boards as a canvas app's pages */
+.canvas .react-flow__node-section { padding: 0; border: 0; background: none; pointer-events: none; }
+.section-box { position: relative; border: 2px dashed var(--line-strong); border-radius: 28px; background: color-mix(in srgb, var(--surface) 40%, transparent); }
+.section-label { position: absolute; top: 28px; left: 40px; display: inline-flex; align-items: center; gap: 14px; font: 600 40px/1.2 var(--sans); color: var(--muted); white-space: nowrap; }
+.section-label .mark { width: 44px; height: 44px; }
+.frame-none { height: 100%; display: grid; place-content: center; text-align: center; gap: 8px; padding: 40px; font-size: 24px; color: var(--muted); background: repeating-linear-gradient(135deg, var(--surface-2) 0 18px, var(--surface) 18px 36px); }
+.frame-none p { margin: 0; }
+.frame-label select, .frame-label button { font-size: 12px; padding: 1px 6px; }
+.board-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 0; padding: 8px 0 0; border-top: 1px solid var(--line); }
+.board-tabs button { border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: 2px 10px; font-size: 12.5px; color: var(--ink); }
+.board-tabs button.on { background: var(--accent-soft); border-color: var(--accent); }
+.board-acts { display: flex; gap: 4px; margin-top: 4px; }
+.board-acts button { font-size: 12px; padding: 2px 6px; }
+.layer-section { display: flex; align-items: center; gap: 6px; padding: 6px 8px 2px; font-size: 12px; font-weight: 600; color: var(--muted); }
+.layer-section .mark { width: 16px; height: 16px; }
+.layer-list.inner { border-top: 0; margin: 0; padding: 0 0 0 14px; }
+.board-add { width: 100%; margin-top: 8px; font-size: 12.5px; }
+.board-hidden { margin-top: 8px; font-size: 12.5px; }
+.board-elsewhere { width: 100%; margin-top: 8px; display: flex; align-items: center; gap: 6px; font-size: 12.5px; border: 1px solid var(--line); background: transparent; border-radius: 8px; padding: 4px 8px; }
+.pad-s { padding: 6px 8px; margin: 0; font-size: 12.5px; }

package/client/console.tsx

@@ -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,245 @@ 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;
+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 };
+type SavedBoard = { id: string; name: string; include?: string[]; hidden?: string[]; placed?: Record<string, { x: number; y: number }> };
+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; boards: SavedBoard[]; addTo: (board: string, key: string) => void; remove: { label: string; act: (key: string) => void } | null };
 function ScreenFrame({ data }: NodeProps<Node<Screen>>): React.JSX.Element {
-  const { world, vendor, url, active, open, changed } = data;
+  const { world, frame, url, active, boards, addTo, remove } = 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 (
     <>
       <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>{vendorName(frame.vendor)} · {frame.kind}</span>
+        {frame.changes ? <a className="frame-changed nodrag" href={`${BASE}/${world}/~/changes`} onClick={(e) => { e.preventDefault(); go([...world.split('/'), '~', 'changes']); }} title={`${counted(frame.changes, 'change')} here, not in a changeset: see them in Changes`}><Icon name="square-dot" size={14} />{frame.changes}</a> : null}
+        {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}
+        {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>
+          <Mark vendor={frame.vendor} /><strong>{frame.title}</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 {
+type Section = { label: string; vendor: string; width: number; height: number };
+function SectionBox({ data }: NodeProps<Node<Section>>): React.JSX.Element {
+  return <div className="section-box" style={{ width: data.width, height: data.height }}><span className="section-label"><Mark vendor={data.vendor} />{data.label}</span></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);
+  // 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);
+    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);
   const [active, setActive] = useState<string | null>(null);
-  const [layers, setLayers] = useState(true);
   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)));
+  /** Each frame's place: where it was put on this board, else after its section's last frame, a new section under all. */
   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 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); }
+    let bottom = Math.max(-FRAME_GAP, ...[...at.values()].map((p) => p.y + FRAME_H));
+    const sections = [...new Set(shown.map(sectionKey))];
+    for (const s of sections) {
+      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 others = boards.filter((b) => b.include);
+    const addTo = (id: string, key: string): void => change(id, (b) => ({ ...b, include: [...(b.include ?? []), key] }));
+    const remove = { label: board.include ? 'Take it off this board' : 'Hide it', act: (key: string): void => change(board.id, (b) => (b.include ? { ...b, include: b.include.filter((k) => k !== key) } : { ...b, hidden: [...(b.hidden ?? []), key] })) };
+    return shown.map((f) => ({ id: frameKey(f), type: 'screen', dragHandle: '.frame-bar', draggable: editable, position: at.get(frameKey(f))!, data: { world: name, frame: f, url: frameUrl(name, f), active: false, boards: editable ? others : [], addTo, remove: !editable || (board.include && !board.include.includes(frameKey(f))) ? null : remove } }));
+    // biome-ignore lint/correctness/useExhaustiveDependencies: the frames, the board and its places are what change it
+  }, [JSON.stringify(shown), JSON.stringify(board), JSON.stringify(boards.map((b) => [b.id, b.name, b.include])), name, editable]);
   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]);
+  // 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 = placed();
+    setNodes(next.map((n) => ({ ...n, data: { ...n.data, active: n.id === active } })));
+    if (next.length && fitted.current !== board.id) { fitted.current = board.id; requestAnimationFrame(() => { void flow.fitView({ padding: 0.08, duration: 0 }); }); }
+  }, [placed, setNodes]);
+  useEffect(() => { setNodes((ns) => ns.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 */ } };
+  // each section a box around its frames as they stand, behind them: it grows as a frame is moved
+  const boxes = useMemo((): Array<Node<Section>> => {
+    const by = new Map<string, Array<Node<Screen>>>();
+    for (const n of nodes) { const k = sectionKey(n.data.frame); by.set(k, [...(by.get(k) ?? []), n]); }
+    return [...by].map(([k, ns]) => {
+      const x = Math.min(...ns.map((n) => n.position.x)) - SECTION_PAD; const y = Math.min(...ns.map((n) => n.position.y)) - SECTION_PAD - SECTION_HEAD;
+      const f = ns[0]!.data.frame;
+      const width = Math.max(...ns.map((n) => n.position.x)) + FRAME_W + SECTION_PAD - x; const height = Math.max(...ns.map((n) => n.position.y)) + FRAME_H + SECTION_PAD - y;
+      // its size given, never measured: a box is derived from its frames, so React Flow's measurements of it are not kept
+      return { id: `box:${k}`, type: 'section', position: { x, y }, width, height, zIndex: -1, draggable: false, selectable: false, data: { vendor: f.vendor, label: `${vendorName(f.vendor)} · ${f.section.title}`, width, height } };
+    });
+  }, [nodes]);
+  // once one frame is moved the board's layout is its people's: every frame's place is kept, a new frame added after
+  const keep = (): void => change(board.id, (b) => ({ ...b, placed: { ...(b.placed ?? {}), ...Object.fromEntries(nodes.map((n) => [n.id, { x: Math.round(n.position.x), y: Math.round(n.position.y) }])) } }));
   /** 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 focus = (key: string): void => {
+    setActive(key);
+    const n = flow.getNode(key); if (!n) return;
     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 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 sections = [...new Map(all.map((f) => [sectionKey(f), f])).values()];
+  const missing = board.include ? [...sections.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));
   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}
+    <div className="canvas full" role="region" aria-label="The World's board">
+      <ReactFlow nodes={ready ? [...boxes, ...nodes] as Node[] : []} onNodesChange={(cs) => onNodesChange(cs.filter((c) => !('id' in c) || !String(c.id).startsWith('box:')) as never)} nodeTypes={FRAME_TYPES} onNodeDragStop={keep}
+        onNodeClick={(_e, n) => { if (!n.id.startsWith('box:')) setActive(n.id); }} onPaneClick={() => setActive(null)}
+        minZoom={0.03} maxZoom={1.5} nodesConnectable={false} elementsSelectable={false}
         panOnScroll={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={() => 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="Frames">
+            {[...new Set(shown.map(sectionKey))].map((s) => {
+              const members = shown.filter((f) => sectionKey(f) === s);
+              return (
+                <li key={s}>
+                  <span className="layer-section"><Mark vendor={members[0]!.vendor} />{vendorName(members[0]!.vendor)} · {members[0]!.section.title}</span>
+                  <ul className="layer-list inner">
+                    {members.map((f) => <li key={frameKey(f)}><button type="button" className={active === frameKey(f) ? 'on' : undefined} onClick={() => focus(frameKey(f))}><span>{f.title}</span>{f.changes ? <span className="layer-changed" title={`${counted(f.changes, 'change')}, not in a changeset`}><Icon name="square-dot" size={14} />{f.changes}</span> : null}</button></li>)}
+                  </ul>
+                </li>
+              );
+            })}
+          </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>
+        <Panel position="top-center" className="float hint mode">{active ? `Using ${shown.find((f) => frameKey(f) === active)?.title ?? active} · Esc to leave` : 'Drag to pan · scroll to zoom · click a frame to use it'}</Panel>
         <Controls showInteractive={false} position="bottom-left" />
         <MiniMap pannable zoomable nodeBorderRadius={8} position="bottom-right" />
       </ReactFlow>