@volter/world-console 3.0.24 → 3.0.26

package/client/console.tsx

@@ -5,6 +5,7 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Background, BackgroundVariant, Controls, MiniMap, NodeResizer, NodeToolbar, Panel, Position, ReactFlow, ReactFlowProvider, useNodesState, useReactFlow, useStore, 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 { boardFrameKey } from '../../../packages/world-core/src/board-keys.ts';
 import { agentPrompt } from '../../../packages/cli/src/agent-prompt.ts';
 import { ICONS } from './brand/icons.ts';
 
@@ -1691,17 +1692,31 @@ const FRAME_W = 1280; const FRAME_H = 820; const FRAME_GAP = 160; const SECTION_
 const FRAME_NAME_ROOM = 72;
 /** A change behind a frame's count: the writes one request made, as words read them, and when. */
 type BoardAct = { at: string; writes: number; entries: Array<{ op: string; operation?: string; subject: { type: string; id: string }; fields: Record<string, string> }> };
-type BoardFrame = { vendor: string; id: string; kind: string; title: string; section: { id: string; title: string; aka?: string[] }; url: string; /** the page it sits under at the vendor (its id there) */ parent?: string; /** the World's own */ ours?: boolean; at: { site: string } | { screen: string } | null; unseen?: 'not-drawn' | 'sites-not-routed' | 'branch-sites'; changes: number; /** when its first change not yet cut was made */ since?: string | null };
+type BoardFrame = { browser?: string; vendor: string; id: string; kind: string; title: string; section: { id: string; title: string; aka?: string[] }; url: string; /** the page it sits under at the vendor (its id there) */ parent?: string; /** the World's own */ ours?: boolean; at: { site: string } | { screen: string } | null; unseen?: 'not-drawn' | 'sites-not-routed' | 'branch-sites'; changes: number; /** when its first change not yet cut was made */ since?: string | null };
 /** A section of a board: its region and name, or a pack's group removed from the board (`gone`). */
 type SavedSection = { x: number; y: number; w: number; h: number; name?: string; gone?: true };
 type SavedBoard = { id: string; name: string; include?: string[]; hidden?: string[]; placed?: Record<string, { x: number; y: number }>; sections?: Record<string, SavedSection> };
 type BoardBranch = { name: string; origin?: string; sites?: string; at: { instant?: string; label?: string; live?: boolean } | null; expiresAt: string | null };
 const BRANCH_SITES_UNSEEN = "This World shows its branches' sites only on this machine.";
 type BoardDoor = { frames: BoardFrame[]; boards: SavedBoard[]; version: string };
-const frameKey = (f: BoardFrame): string => `${f.vendor}:${f.id}`;
-const sectionKey = (f: BoardFrame): string => `${f.vendor}:section:${f.section.id}`;
-/** 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}`);
+const frameKey = boardFrameKey;
+const sectionKey = (f: BoardFrame): string => frameKey({ ...f, id: `section:${f.section.id}` });
+type BoardAliases = { first?: string; frames: Set<string>; sections: Set<string> };
+const boardAliases = (all: BoardFrame[]): BoardAliases => ({
+  first: all.flatMap(f => f.browser ? [f.browser] : []).sort()[0],
+  frames: new Set(all.filter(f => !f.browser).map(frameKey)),
+  sections: new Set(all.filter(f => !f.browser).flatMap(f => [f.section.id, ...(f.section.aka ?? [])].map(id => `${f.vendor}:section:${id}`))),
+});
+const frameKeys = (f: BoardFrame, aliases: BoardAliases): string[] => {
+  const plain = `${f.vendor}:${f.id}`;
+  return f.browser === aliases.first && !aliases.frames.has(plain) ? [frameKey(f), plain] : [frameKey(f)];
+};
+/** A section's current and adopted ids; saved plain keys apply only to the first browser copy. */
+const sectionKeys = (f: BoardFrame, aliases: BoardAliases): string[] => [...new Set([f.section.id, ...(f.section.aka ?? [])].flatMap(id => {
+  const key = frameKey({ ...f, id: `section:${id}` });
+  const plain = `${f.vendor}:section:${id}`;
+  return f.browser === aliases.first && !aliases.sections.has(plain) ? [key, plain] : [key];
+}))];
 /** Where a frame opens in this World: a site at its own origin, a vendor page at the twin's place, or nowhere yet. */
 const frameUrl = (name: string, f: BoardFrame): string | null => (f.at && 'site' in f.at ? f.at.site : f.at ? `${WORLDS}/${name}/${f.vendor}${f.at.screen}` : null);
 /** A vendor page on a branch always opens through its parent's read-pass door. */
@@ -1709,14 +1724,15 @@ const branchFrameUrl = (name: string, branch: string, f: BoardFrame): string | n
   ? `${WORLDS}/-/${name}/branches/${branch}/pages?${new URLSearchParams({ land: `/${branch}/${f.vendor}${f.at.screen}` }).toString()}`
   : frameUrl(branch, f);
 /** The frames a board shows: everything but what it hides, or what it includes (a frame, or a section's every frame). */
-const shownOn = (b: SavedBoard, all: BoardFrame[]): BoardFrame[] => b.include
-  ? all.filter((f) => b.include!.includes(frameKey(f)) || sectionKeys(f).some((k) => b.include!.includes(k)))
-  : all.filter((f) => !(b.hidden ?? []).includes(frameKey(f)));
-type Screen = { world: string; branch: boolean; frame: BoardFrame; url: string | null; active: boolean; picked: boolean; boards: SavedBoard[]; addTo: (board: string, key: string) => void; remove: { label: string; act: (key: string) => void } | null; compare: (key: string) => void; /** its name moves it, as a canvas app's frame name does */ grab: (e: React.PointerEvent) => void };
+const shownOn = (b: SavedBoard, all: BoardFrame[], aliases: BoardAliases): BoardFrame[] => b.include
+  ? all.filter((f) => frameKeys(f, aliases).some(k => b.include!.includes(k)) || sectionKeys(f, aliases).some((k) => b.include!.includes(k)))
+  : all.filter((f) => !frameKeys(f, aliases).some(k => (b.hidden ?? []).includes(k)));
+type Screen = { aliases: BoardAliases; world: string; branch: boolean; frame: BoardFrame; url: string | null; active: boolean; picked: boolean; boards: SavedBoard[]; addTo: (board: string, key: string) => void; remove: { label: string; act: (key: string) => void } | null; compare: (key: string) => void; /** its name moves it, as a canvas app's frame name does */ grab: (e: React.PointerEvent) => void };
 function ScreenFrame({ data }: NodeProps<Node<Screen>>): React.JSX.Element {
-  const { frame, url, active, picked, boards, addTo, remove, compare, grab, branch } = data;
+  const { aliases, frame, url, active, picked, boards, addTo, remove, compare, grab, branch } = data;
   const key = frameKey(frame);
-  const others = boards.filter((b) => b.include && !b.include.includes(key) && !sectionKeys(frame).some((k) => b.include!.includes(k)));
+  const iframe = useRef<HTMLIFrameElement>(null);
+  const others = boards.filter((b) => b.include && !frameKeys(frame, aliases).some(k => b.include!.includes(k)) && !sectionKeys(frame, aliases).some((k) => b.include!.includes(k)));
   // its name is drawn the same size at every zoom while the head above it shrinks: zoomed out past the point the name fits
   // there, it is left out, as a canvas app leaves out a frame name that does not fit; selected or in use, it is always shown
   const roomy = useStore((st) => st.transform[2] * (SECTION_PAD + SECTION_HEAD) >= FRAME_NAME_ROOM);
@@ -1732,13 +1748,13 @@ function ScreenFrame({ data }: NodeProps<Node<Screen>>): React.JSX.Element {
       </NodeToolbar>
       <div className={active ? 'frame on' : picked ? 'frame picked' : 'frame'} style={{ width: FRAME_W, height: FRAME_H }}>
         <div className="frame-bar">
-          <Mark vendor={frame.vendor} /><strong>{vendorName(frame.vendor)} · {frame.kind}</strong>
+          <Mark vendor={frame.vendor} /><strong>{frame.browser ? `${frame.browser} · ` : ''}{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'}>
           {url
-            ? <iframe title={frame.title} src={url} loading="lazy" style={{ pointerEvents: active ? 'auto' : 'none' }} />
+            ? <iframe ref={iframe} title={frame.title} src={url} loading="lazy" style={{ pointerEvents: active ? 'auto' : 'none' }} />
             : <div className="frame-none"><p><strong>{frame.unseen === 'branch-sites' ? BRANCH_SITES_UNSEEN : frame.unseen === 'sites-not-routed' ? `This World shows ${frame.title} only at its own local address.` : `${vendorName(frame.vendor)}'s twin draws no page for this ${frame.kind} yet.`}</strong></p><p className="mode">{frame.url}</p></div>}
         </div>
       </div>
@@ -1963,7 +1979,8 @@ function CanvasSurface({ name, token, session, retry, snapshot, back, canWrite,
   }, [token, name, viewing]);
   // read now and every ten seconds while the page is shown: another person's arrangement arrives as the World's changes do
   useEffect(() => { void readBoard(); const id = setInterval(() => { if (!document.hidden) void readBoard(); }, 10000); return () => clearInterval(id); }, [readBoard]);
-  const all = loaded.state === 'ok' ? loaded.data.frames.map((f): BoardFrame => viewing && f.at && 'site' in f.at && !/^https?:\/\/\{host\}\./.test(branch?.sites ?? '') ? { ...f, at: null, unseen: 'branch-sites' } : f) : [];
+  const all = loaded.state === 'ok' ? loaded.data.frames.map((f): BoardFrame => viewing && (f.browser || (f.at && 'site' in f.at && !/^https?:\/\/\{host\}\./.test(branch?.sites ?? ''))) ? { ...f, at: null, unseen: 'branch-sites' } : f) : [];
+  const aliases = boardAliases(all);
   const boards = held.current?.boards ?? [{ id: 'everything', name: 'Everything' }];
   // what is shown (architecture, "The board"): the pages whose records changed, everything, or a board people keep.
   // Changes is no board of its own: it is the first board's places and sections, holding only the pages that changed
@@ -2010,13 +2027,13 @@ function CanvasSurface({ name, token, session, retry, snapshot, back, canWrite,
     return run;
   }, [token, name, readBoard, editable]);
   const change = (id: string, edit: (b: SavedBoard) => SavedBoard): void => { void save((list) => list.map((b) => (b.id === id ? edit(b) : b))); };
-  const parentKey = (f: BoardFrame): string | null => (f.parent ? `${f.vendor}:${f.parent}` : null);
+  const parentKey = (f: BoardFrame): string | null => f.parent ? frameKey({ ...f, id: f.parent }) : null;
   const keys = new Set(all.map(frameKey));
   // a page under one that is not on the list stands at the top
   const top = (f: BoardFrame): boolean => { const p = parentKey(f); return !p || !keys.has(p); };
   const shown = lens === 'changes' ? all.filter((f) => f.changes)
-    : board.include ? shownOn(board, all)
-    : shownOn(board, all).filter((f) => top(f) || opened.has(parentKey(f)!));
+    : board.include ? shownOn(board, all, aliases)
+    : shownOn(board, all, aliases).filter((f) => top(f) || opened.has(parentKey(f)!));
   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);
@@ -2026,7 +2043,15 @@ function CanvasSurface({ name, token, session, retry, snapshot, back, canWrite,
   const flow = useReactFlow();
   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 savedFrameKey = (key: string, held: string[]): string => {
+    const f = all.find(frame => frameKey(frame) === key);
+    return f ? frameKeys(f, aliases).find(candidate => held.includes(candidate)) ?? key : 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 !== savedFrameKey(key, b.include!)) }
+      : { ...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). */
@@ -2040,7 +2065,7 @@ function CanvasSurface({ name, token, session, retry, snapshot, back, canWrite,
    *  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); }
+    for (const f of shown) { const p = frameKeys(f, aliases).map(k => board.placed?.[k]).find(Boolean); 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))];
@@ -2058,7 +2083,7 @@ function CanvasSurface({ name, token, session, retry, snapshot, back, canWrite,
     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 keyed = sectionKeys(f, aliases).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))!);
@@ -2066,16 +2091,16 @@ function CanvasSurface({ name, token, session, retry, snapshot, back, canWrite,
       const around = { x: Math.min(...ps.map((p) => p.x)) - SECTION_PAD, y: Math.min(...ps.map((p) => p.y)) - SECTION_PAD - SECTION_HEAD, 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 unplacedOf = shown.filter((x) => sectionKey(x) === s && !frameKeys(x, aliases).some(key => board.placed?.[key])).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)));
+      sections.push(section(s, r, own?.name ?? `${f.browser ? `${f.browser} · ` : ''}${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.
     // A frame moves from anywhere on it, as a canvas app's does, until it is in use (its page then takes the pointer)
-    const frames: Node[] = shown.map((f) => ({ id: frameKey(f), type: 'screen', zIndex: 1, width: FRAME_W, height: FRAME_H, draggable: editable, position: at.get(frameKey(f))!, data: { world: name, branch: Boolean(viewing), frame: f, url: viewing ? branchFrameUrl(name, viewing, f) : frameUrl(name, f) } }));
+    const frames: Node[] = shown.map((f) => ({ id: frameKey(f), type: 'screen', zIndex: 1, width: FRAME_W, height: FRAME_H, draggable: editable, position: at.get(frameKey(f))!, data: { aliases, world: name, branch: Boolean(viewing), frame: f, url: viewing ? branchFrameUrl(name, viewing, f) : frameUrl(name, f) } }));
     return [...sections, ...frames];
     // biome-ignore lint/correctness/useExhaustiveDependencies: the frames, the board and its places are what change it
   }, [JSON.stringify(shown), JSON.stringify(board), name, editable, viewing]);
@@ -2130,9 +2155,9 @@ function CanvasSurface({ name, token, session, retry, snapshot, back, canWrite,
       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)));
+      const groups = new Set(ns.filter((n) => frames.has(n.id)).map((n) => sectionKey((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 === 'screen' && sectionKeys((n.data as Screen).frame, aliases).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]);
@@ -2140,7 +2165,7 @@ function CanvasSurface({ name, token, session, retry, snapshot, back, canWrite,
   };
   /** 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 }]));
+    Object.fromEntries(flow.getNodes().filter((n) => n.type === 'screen' && sectionKeys((n.data as Screen).frame, aliases).includes(key)).map((n) => [n.id, { x: n.position.x, y: n.position.y }]));
   // the name being edited where it is shown: a section's (its key) or this board's (`board:<id>`)
   const [renaming, setRenaming] = useState<string | null>(null);
   const renameSection = (key: string): void => { setPicked(`sec:${key}`); setRenaming(key); };
@@ -2195,14 +2220,14 @@ function CanvasSurface({ name, token, session, retry, snapshot, back, canWrite,
   // 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, grab: grab(n.id), picked: picked === n.id, editable, renaming: editable && renaming === (n.data as { key: string }).key, pick: (k: string) => setPicked(`sec:${k}`), rename: renameSection, renamed: renamedSection, remove: removeSection, resized: () => requestAnimationFrame(() => { const k = (n.data as { key: string }).key; keep(groupFrames(k), [k]); }) } }
-    : { ...n, data: { ...n.data, grab: grab(n.id), 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); } } }));
+    : { ...n, data: { ...n.data, grab: grab(n.id), active: active === n.id, picked: picked === n.id, boards: editable ? others : [], addTo, remove: !editable || (board.include && !frameKeys((n.data as Screen).frame, aliases).some(k => board.include!.includes(k))) ? 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 === 'Delete' || e.key === 'Backspace') && picked) { e.preventDefault(); if (picked.startsWith('sec:')) removeSection(picked.slice(4)); else if (!board.include || all.some(f => frameKey(f) === picked && frameKeys(f, aliases).some(k => board.include!.includes(k)))) 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);
@@ -2222,8 +2247,8 @@ function CanvasSurface({ name, token, session, retry, snapshot, back, canWrite,
   const rename = (): void => setRenaming(`board:${board.id}`);
   const drop = (): void => { const gone = board.id; setBoardId(null); 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) => (board.hidden ?? []).includes(frameKey(f)));
+  const missing = board.include ? [...groups.filter((f) => !sectionKeys(f, aliases).some((k) => board.include!.includes(k))).map((f) => ({ key: sectionKey(f), label: `${f.browser ? `${f.browser} · ` : ''}${vendorName(f.vendor)} · ${f.section.title} (all)` })), ...all.filter((f) => !shown.includes(f)).map((f) => ({ key: frameKey(f), label: `${f.browser ? `${f.browser} · ` : ''}${f.title}` }))] : [];
+  const hidden = board.include ? [] : all.filter((f) => frameKeys(f, aliases).some(k => (board.hidden ?? []).includes(k)));
   // 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');
@@ -2277,7 +2302,7 @@ function CanvasSurface({ name, token, session, retry, snapshot, back, canWrite,
           </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}
+          {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 !== savedFrameKey(frameKey(f), b.hidden ?? [])) }))}><span>{f.browser ? `${f.browser} · ` : ''}{f.title}</span><span className="mode">Show</span></button> : <span className="pad-s">{f.browser ? `${f.browser} · ` : ''}{f.title}</span>}</li>)}</ul></details> : null}
           {elsewhere ? <button type="button" className="board-elsewhere" onClick={() => setBoardId('changes')}><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}