@volter/world-console 3.0.25 → 3.0.27

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,44 +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 ViewedPerson = { vendor: string; person: string | null; label: string };
-type ViewAsMenuData = { world: string; token: string; vendor: string; label?: string; busy: boolean; choose: (person: string | null) => void };
-type ViewAsNavigation = { frame: string; url: string; pass: string; done: (viewed?: ViewedPerson, error?: string) => void };
-/** The choice lives in the vendor's cookie; a menu reads people, never password material. */
-function ViewAsMenu({ data }: { data: ViewAsMenuData }): React.JSX.Element {
-  const [reads, setReads] = useState(0);
-  const people = useDoor<{ viewAs: boolean; people: Array<{ id: string; label: string }> }>(data.token, `/-/${data.world}/twins/${data.vendor}/people`, reads);
-  const offered = useRef(false);
-  if (people.state === 'ok') offered.current = people.data.viewAs;
-  if (!offered.current) return <></>;
-  return <select className="nodrag nopan frame-add" value="" aria-label={`View ${vendorName(data.vendor)} as`} disabled={data.busy}
-    onFocus={() => setReads((n) => n + 1)} onChange={(e) => { if (e.target.value) data.choose(e.target.value === 'signed-out' ? null : e.target.value); }}>
-    <option value="">{data.busy ? 'Signing in…' : data.label ? `View as: ${data.label}` : 'View as…'}</option>
-    <option value="signed-out">Signed out</option>
-    {people.state === 'ok' ? people.data.people.map((p) => <option key={p.id} value={p.id}>{p.label}</option>) : <option disabled>{people.state === 'error' ? people.error : 'Loading people…'}</option>}
-  </select>;
-}
-type Screen = { viewAs?: ViewAsMenuData; navigation?: ViewAsNavigation; revision?: number; 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 iframe = useRef<HTMLIFrameElement>(null);
-  const navigation = data.navigation?.frame === key ? data.navigation : undefined;
-  useEffect(() => {
-    if (!navigation) return;
-    const origin = new URL(navigation.url).origin;
-    const on = (event: MessageEvent): void => {
-      if (event.origin !== origin || event.source !== iframe.current?.contentWindow || event.data?.type !== 'volter-view-as' || event.data.pass !== navigation.pass) return;
-      if (event.data.viewed?.vendor !== frame.vendor && !event.data.error) return;
-      navigation.done(event.data.viewed, event.data.error);
-    };
-    window.addEventListener('message', on);
-    return () => window.removeEventListener('message', on);
-  }, [navigation, frame.vendor]);
-  const others = boards.filter((b) => b.include && !b.include.includes(key) && !sectionKeys(frame).some((k) => b.include!.includes(k)));
+  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);
@@ -1757,19 +1743,18 @@ function ScreenFrame({ data }: NodeProps<Node<Screen>>): React.JSX.Element {
         <span className="frame-name" onPointerDown={grab}><Mark vendor={frame.vendor} /><span>{frame.title}</span></span>
         {frame.changes ? <button type="button" className="frame-changed nodrag" onClick={() => compare(key)} title={`${counted(frame.changes, 'change')} ${branch ? 'on this branch' : 'here, not in a changeset'}: compare`}><Icon name="square-dot" size={14} />{frame.changes}</button>
           : picked ? <button type="button" className="ghost nodrag" onClick={() => compare(key)} title="Compare with a branch of this World" aria-label={`Compare ${frame.title} with a branch`}><Icon name="file-diff" size={14} /></button> : null}
-        {picked && data.viewAs ? <ViewAsMenu data={data.viewAs} /> : 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' : 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 ref={iframe} key={data.revision ?? 0} title={frame.title} src={navigation?.url ?? url} loading={navigation ? "eager" : "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>
@@ -1786,7 +1771,7 @@ function NameField({ name, label, done }: { name: string; label: string; done: (
 }
 /** 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 = { viewAs?: ViewAsMenuData; key: string; name: string; vendor: string | null; /** renamed by someone, so its name is kept */ named: boolean; picked: boolean; editable: boolean; renaming: boolean; pick: (key: string) => void; rename: (key: string) => void; renamed: (key: string, next: string | null) => void; remove: (key: string) => void; resized: () => void; /** its name moves it, with what it holds */ grab: (e: React.PointerEvent) => void };
+type SectionData = { key: string; name: string; vendor: string | null; /** renamed by someone, so its name is kept */ named: boolean; picked: boolean; editable: boolean; renaming: boolean; pick: (key: string) => void; rename: (key: string) => void; renamed: (key: string, next: string | null) => void; remove: (key: string) => void; resized: () => void; /** its name moves it, with what it holds */ grab: (e: React.PointerEvent) => void };
 function SectionBox({ data }: NodeProps<Node<SectionData>>): React.JSX.Element {
   return (
     <>
@@ -1797,7 +1782,6 @@ function SectionBox({ data }: NodeProps<Node<SectionData>>): React.JSX.Element {
           : <button type="button" className={data.picked ? 'nodrag on' : 'nodrag'} onPointerDown={data.grab} 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.viewAs ? <ViewAsMenu data={data.viewAs} /> : null}
         {data.picked && data.editable && !data.renaming ? <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'} />
@@ -1995,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
@@ -2007,13 +1992,6 @@ function CanvasSurface({ name, token, session, retry, snapshot, back, canWrite,
   // the pages opened from the ones they sit under (Everything shows a vendor's top pages; a page's own open from it)
   const [opened, setOpened] = useState<Set<string>>(new Set());
   const editable = canWrite && !snapshot && !viewing;
-  const [viewedAs, setViewedAs] = useState<Record<string, { label: string; revision: number }>>({});
-  const [signingAs, setSigningAs] = useState<Record<string, ViewAsNavigation>>({});
-  const busyAs = useRef(new Set<string>());
-  const [askingAs, setAskingAs] = useState<string[]>([]);
-  const viewAsTimers = useRef(new Set<ReturnType<typeof setTimeout>>());
-  const viewAsMounted = useRef(true);
-  useEffect(() => { viewAsMounted.current = true; return () => { viewAsMounted.current = false; for (const timer of viewAsTimers.current) clearTimeout(timer); }; }, []);
   /** An edit of the boards: shown at once, saved after the edits before it, made from the boards as they then stand. */
   const save = useCallback((edit: (all: SavedBoard[]) => SavedBoard[]): Promise<void> => {
     if (!editable) return Promise.resolve();
@@ -2049,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);
@@ -2065,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). */
@@ -2079,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))];
@@ -2097,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))!);
@@ -2105,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]);
@@ -2169,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]);
@@ -2179,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); };
@@ -2231,52 +2217,17 @@ function CanvasSurface({ name, token, session, retry, snapshot, back, canWrite,
     };
     el.addEventListener('pointermove', move); el.addEventListener('pointerup', up); el.addEventListener('pointercancel', up);
   };
-  const choosePerson = async (vendor: string, person: string | null): Promise<void> => {
-    if (!editable || busyAs.current.has(vendor)) return;
-    const target = nodes.find((n) => n.type === 'screen' && (n.data as Screen).frame.vendor === vendor && (n.data as Screen).frame.at && 'screen' in (n.data as Screen).frame.at!);
-    if (!target) { toast('Open a page of this vendor on the board first', 'error'); return; }
-    const frame = (target.data as Screen).frame;
-    busyAs.current.add(vendor); setAskingAs([...busyAs.current]);
-    let timer: ReturnType<typeof setTimeout> | undefined;
-    let settled = false;
-    const done = (viewed?: ViewedPerson, error?: string): void => {
-      if (settled || !viewAsMounted.current) return;
-      settled = true;
-      if (timer) { clearTimeout(timer); viewAsTimers.current.delete(timer); }
-      busyAs.current.delete(vendor);
-      setAskingAs([...busyAs.current]);
-      setSigningAs((all) => { const next = { ...all }; delete next[vendor]; return next; });
-      if (error) { toast(error, 'error'); return; }
-      // Reload every frame, including one that had navigated to the sign-in page. No board arrangement is saved.
-      setViewedAs((all) => ({ ...all, [vendor]: { label: viewed?.label ?? all[vendor]?.label ?? '', revision: (all[vendor]?.revision ?? 0) + 1 } }));
-    };
-    try {
-      const land = `/${name}/${vendor}${(frame.at as { screen: string }).screen}`;
-      const answer = await door(SESSION, `/-/${name}/twins/${vendor}/session`, { method: 'POST', body: JSON.stringify({ person, land }) });
-      if (!answer.ok) { done(undefined, await failure(answer)); return; }
-      const opened = await answer.json() as { url: string };
-      if (!viewAsMounted.current) return;
-      const pass = new URLSearchParams(new URL(opened.url).hash.slice(1)).get('pass');
-      if (!pass) throw new Error('The World did not return a sign-in pass.');
-      setSigningAs((all) => ({ ...all, [vendor]: { frame: target.id, url: opened.url, pass, done } }));
-      // The pass lasts a minute; also recover if its frame was removed before it answered.
-      timer = setTimeout(() => done(undefined, 'The sign-in did not finish. Choose View as again.'), 60_000);
-      viewAsTimers.current.add(timer);
-    } catch (error) { done(undefined, error instanceof Error ? error.message : 'The World did not answer.'); }
-  };
-  const viewAsMenu = (vendor: string | null): ViewAsMenuData | undefined => editable && token === SESSION && vendor && nodes.some((n) => n.type === 'screen' && (n.data as Screen).frame.vendor === vendor && (n.data as Screen).frame.at && 'screen' in (n.data as Screen).frame.at!)
-    ? { world: name, token, vendor, label: viewedAs[vendor]?.label, busy: askingAs.includes(vendor), choose: (person) => { void choosePerson(vendor, person); } } : undefined;
   // 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, viewAs: viewAsMenu((n.data as SectionData).vendor), 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, viewAs: (n.data as Screen).frame.at && 'screen' in (n.data as Screen).frame.at! ? viewAsMenu((n.data as Screen).frame.vendor) : undefined, navigation: editable ? signingAs[(n.data as Screen).frame.vendor] : undefined, revision: viewedAs[(n.data as Screen).frame.vendor]?.revision, 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), 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 && !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);
@@ -2296,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');
@@ -2351,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}