@volter/world-console 3.0.5 → 3.0.6

package/dist/client/console.css

@@ -610,11 +610,19 @@ 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; }
+/* THE BOARD: sections are regions with a name, as a canvas app's are: a quiet fill behind the frames, the name a small tag
+   above the top left that keeps its size at every zoom; a selected frame or section is outlined in the accent */
+.canvas .react-flow__node-section { padding: 0; border: 0; background: none; }
+.section-box { width: 100%; height: 100%; border: 1px solid var(--line-strong); border-radius: 4px; background: color-mix(in srgb, var(--surface) 55%, transparent); }
+.section-box.on { outline: 2px solid var(--accent); outline-offset: 0; }
+.section-tag { display: flex; align-items: center; gap: 2px; }
+.section-tag button { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border: 0; border-radius: 4px; background: var(--surface-2); color: var(--ink); font: 600 12px/1.4 var(--sans); }
+.section-tag button.on { background: var(--accent); color: var(--surface); }
+.section-tag .mark { width: 14px; height: 14px; }
+.frame.picked { outline: 4px solid var(--accent-soft); outline-offset: 3px; }
+.float.board-tools { display: flex; gap: 4px; padding: 4px; }
+.float.board-tools button { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 13px; }
+.float.board-tools kbd { font: 11px var(--mono); color: var(--muted); }
 .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; }
@@ -623,10 +631,29 @@ main.app.home { max-width: none; }
 .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 button.layer-section { font-size: 12px; font-weight: 600; }
+.layer-list .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; }
+.float.hint.using { display: flex; align-items: center; gap: 10px; pointer-events: auto; padding: 4px 6px 4px 12px; }
+.float.hint.using button { padding: 2px 10px; font-size: 12px; }
+.float.hint.using kbd { font: 11px var(--mono); color: var(--muted); }
+/* THE COMPARISON: before and now side by side over the board's top right, the changes in words under them */
+.float.compare-panel { max-height: calc(100vh - 32px); overflow-y: auto; padding: 0; }
+.compare { display: grid; gap: 12px; padding: 12px 14px; width: 900px; max-width: calc(100vw - 320px); }
+.compare-head { display: flex; align-items: center; gap: 8px; }
+.compare-head .mode { flex: 1; }
+.compare-sides { display: flex; gap: 16px; flex-wrap: wrap; }
+.compare-sides figure { margin: 0; display: grid; gap: 6px; }
+.compare-sides figcaption { font-size: 12px; font-weight: 600; color: var(--muted); }
+.compare-thumb { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--ground); }
+.compare-thumb iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; pointer-events: none; }
+.compare-note { width: 420px; height: 269px; margin: 0; display: grid; place-content: center; text-align: center; padding: 16px; border: 1px dashed var(--line-strong); border-radius: 6px; font-size: 13px; }
+.compare-acts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
+.compare-acts > li { display: grid; grid-template-columns: 120px 1fr; gap: 8px; align-items: baseline; }
+.compare-acts ul { margin: 4px 0 0; padding-left: 16px; }
+.compare-all { font-size: 13px; }
+.frame-label button.frame-changed { display: inline-flex; align-items: center; gap: 3px; border: 0; background: transparent; padding: 0 4px; color: inherit; }

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';
@@ -1680,8 +1680,12 @@ type ViewSession = { state: 'pending' } | { state: 'ok'; scope: string } | { sta
  *  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 }> };
+/** 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}`;
@@ -1693,22 +1697,23 @@ const frameUrl = (name: string, f: BoardFrame): string | null => (f.at && 'site'
 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 };
+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, frame, url, active, boards, addTo, remove } = 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={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}
+        <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={frame.vendor} /><strong>{frame.title}</strong>
+      <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>
@@ -1721,9 +1726,90 @@ function ScreenFrame({ data }: NodeProps<Node<Screen>>): 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>;
+/** 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 {
@@ -1745,6 +1831,7 @@ function CanvasSurface({ name, token, session, retry, snapshot, back, canWrite }
   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). */
@@ -1760,7 +1847,7 @@ function CanvasSurface({ name, token, session, retry, snapshot, back, canWrite }
       setStale(error);
       return;
     }
-    setStale(null);
+    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]);
@@ -1807,15 +1894,33 @@ function CanvasSurface({ name, token, session, retry, snapshot, back, canWrite }
   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 [picked, setPicked] = useState<string | null>(null);
+  // the frame whose changes are being compared
+  const [comparing, setComparing] = useState<string | null>(null);
   const flow = useReactFlow();
-  /** 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>> => {
+  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 sections = [...new Set(shown.map(sectionKey))];
-    for (const s of sections) {
+    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;
@@ -1823,42 +1928,137 @@ function CanvasSurface({ name, token, session, retry, snapshot, back, canWrite }
       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 } }));
+    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), JSON.stringify(boards.map((b) => [b.id, b.name, b.include])), name, editable]);
-  const [nodes, setNodes, onNodesChange] = useNodesState<Node<Screen>>([]);
+  }, [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 = 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); }, []);
-  // 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 } };
+    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 } } };
     });
-  }, [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 = (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 });
+  };
+  /** 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)}`;
@@ -1867,17 +2067,24 @@ function CanvasSurface({ name, token, session, retry, snapshot, back, canWrite }
   };
   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 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' && loaded.state === 'ok';
   return (
     <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)}
+      <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={false} zoomOnDoubleClick={false} colorMode={dark ? 'dark' : 'light'} proOptions={{ hideAttribution: true }}>
+        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">
@@ -1885,22 +2092,21 @@ function CanvasSurface({ name, token, session, retry, snapshot, back, canWrite }
             <span className="float-title"><strong>{name.split('/')[1]}</strong><span className="mode">{name.split('/')[0]}{snapshot ? ' · snapshot' : ''}</span></span>
           </div>
           <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>)}
+            {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="Frames">
-            {[...new Set(shown.map(sectionKey))].map((s) => {
-              const members = shown.filter((f) => sectionKey(f) === s);
+          <ul className="layer-list" aria-label="Layers">
+            {sectionNodes.map((s) => {
+              const d = s.data as SectionData;
               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 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}
@@ -1911,7 +2117,12 @@ function CanvasSurface({ name, token, session, retry, snapshot, back, canWrite }
           {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 ${shown.find((f) => frameKey(f) === active)?.title ?? active} · Esc to leave` : 'Drag to pan · scroll to zoom · click a frame 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>