@volter/world-console 2.0.13 → 2.0.15

package/client/console.tsx

@@ -4,14 +4,13 @@
 // 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 { applyTheme, ThemeChoice, At, Brand, ConfirmHost, MenuDismiss, confirmAct, CopyField, counted, Dialog, DrawerButton, Empty, failure, listed, Mark, Menu, Pending, Toaster, toast, useDoor as useKitDoor, vendorName, when, ago, type Load } from './kit/kit.tsx';
-import { createRoot } from 'react-dom/client';
+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';
 
-type Twin = { twin: string; protocol?: { major?: number; standing?: string } | null; root?: { url?: string } | null; credential?: { placedAt?: string; fingerprint?: string } | null; refresh?: { at?: string; observedAt?: string; failed?: { at?: string; reason?: string; count?: number } } | null; position?: number; lastReceipt?: { status?: string; externalId?: string; reason?: string } | null; mirror?: boolean };
+type Twin = { twin: string; protocol?: { major?: number; standing?: string } | null; root?: { url?: string; deploy?: string } | null; credential?: { placedAt?: string; fingerprint?: string; sealedBy?: 'vault' | 'key'; boundTo?: string } | null; refresh?: { at?: string; observedAt?: string; failed?: { at?: string; reason?: string; count?: number } } | null; position?: number; lastReceipt?: { status?: string; externalId?: string; reason?: string } | null; mirror?: boolean };
 type Row = { org: string; world: string; name: string; base: string; token: string; readToken: string; twins: Array<{ vendor: string; protocol?: { major?: number } | null; root?: unknown }> };
-type Entry = { id: string; service: string; op: string; operation?: string; subject: { type: string; id: string }; occurredAt: string; actor?: { kind: string; id?: string }; provenance?: string; batch?: string; receipt?: { status?: string; externalId?: string; reason?: string }; landsId?: string; fields?: Record<string, unknown>; traceparent?: string };
-type Changeset = { name: string; actions?: unknown[]; receipts?: unknown; verification?: unknown; approvals?: unknown[] };
+type Entry = { id: string; service: string; op: string; operation?: string; subject: { type: string; id: string }; occurredAt: string; actor?: { kind: string; id?: string }; provenance?: string; batch?: string; receipt?: { status?: string; at?: string; externalId?: string; reason?: string }; landsId?: string; /** a landed copy under the vendor's id: the local subject id it stands for */ aliasOf?: string; fields?: Record<string, unknown>; traceparent?: string; input?: unknown; /** the credential that called, as the World names it: `key:<name>`, `key`, `person:<who>`, `person`, `token`, `token:read` */ caller?: string };
 type Mode = { kind: 'admin'; worlds: Row[] } | { kind: 'world'; worlds: Array<{ name: string; base: string; twins: Row['twins'] }> };
 
 const TOKEN_KEY = 'volter.console.token';
@@ -65,13 +64,60 @@ const held = (): string => {
   try { return sessionStorage.getItem(TOKEN_KEY) ?? ''; } catch { return ''; }
 };
 
+/** A page's own act a refusal points at: a button on the page that has it, or the page that owns the fix. */
+type Act = 'verify' | 'approve' | 'vault' | 'remote' | 'settings';
+/** A door's refusal in the page's words: the door speaks to its CLI and its API (`run …`, `PUT /-/…`), a page never
+ *  tells a person to run a command, so each refusal a page can answer becomes that answer (an act here, or the page
+ *  that has it), and what is left loses its command hints. */
+function plainly(words: string): { text: string; acts: Act[] } {
+  const w = words.trim();
+  if (/not ready/i.test(w) && /(never verified|not verified|no approvals)/i.test(w)) {
+    const parts: string[] = []; const acts: Act[] = [];
+    if (/(never verified|not verified)/i.test(w)) { parts.push('it is not verified yet'); acts.push('verify'); }
+    if (/no approvals/i.test(w)) { parts.push('no one has approved it'); acts.push('approve'); }
+    return { text: `Not ready to deploy: ${listed(parts)}.`, acts };
+  }
+  const sealed = /no credential (?:is )?sealed for ([a-z0-9_-]+)/i.exec(w);
+  if (sealed) return { text: `No credential is sealed for ${vendorName(sealed[1]!)}: seal one in Settings › Vault.`, acts: ['vault'] };
+  if (/has no origin/i.test(w)) return { text: 'This World has no remote: name one in Settings › Remote.', acts: ['remote'] };
+  const rootless = /the ([a-z0-9_-]+) twin has no root/i.exec(w) ?? /:\s*([a-z0-9_, -]+?) (?:has|have) no root/i.exec(w);
+  if (rootless) { const vs = rootless[1]!.split(/,\s*/).filter(Boolean).map(vendorName); return { text: `${listed(vs)} ${vs.length === 1 ? 'is' : 'are'} not connected to ${vs.length === 1 ? 'its' : 'their'} real service: Settings › Real services.`, acts: ['settings'] }; }
+  if (/opening a seal is/i.test(w)) return { text: 'A key cannot seal a credential: open the World as yourself.', acts: [] };
+  if (/a key manages no keys/i.test(w)) return { text: 'A key cannot manage keys: open the World as yourself.', acts: [] };
+  if (/^PUT origin:/i.test(w)) return { text: "That is not a World's address: https://<host>/<org>/<world>", acts: [] };
+  if (/^clock: \{/i.test(w)) return { text: 'Pick a date and time.', acts: [] };
+  if (/^advance: \{/i.test(w)) return { text: 'Advance by a number and a unit: 90m, 12h, 3d.', acts: [] };
+  if (/^branches: \{/i.test(w)) return { text: 'That branch could not be made: pick now, or an instant before it.', acts: [] };
+  if (/^approve: \{/i.test(w)) return { text: 'Name who approves.', acts: [] };
+  if (/a browser deploys only what it names/i.test(w)) return { text: 'A deploy is confirmed by its name: use Deploy again.', acts: [] };
+  if (/^no such door/i.test(w)) return { text: 'This World does not answer that here.', acts: [] };
+  const text = w
+    .replace(/\s*[—–-]+\s*(?:run\s+)?`[^`]*`/g, '') // "— run `volter …`", "— `printf … | volter …`"
+    .replace(/\s*[—–-]+\s*(?:PUT|POST|GET|DELETE)\s+\/-\/\S+(?:\s*\{[^}]*\})?/g, '') // "— PUT /-/<w>/origin { url, token }"
+    .replace(/\s*\(\s*`[^`]*`\s*\)/g, '') // "(`volter twin <vendor> root <url>`)"
+    .replace(/`(?:volter|printf|curl|npm|bun)[^`]*`/g, '')
+    .replace(/:\s*\{[^}]*\}/g, '') // a body's shape, `name: { … }`
+    .replace(/\(\s*\)/g, '')
+    .replace(/\s*;\s*(?=[;.]|$)/g, '').replace(/\s+([,.;:])/g, '$1').trim();
+  return { text: text || words, acts: [] };
+}
+/** The door's refusal, in the page's words. */
+const failure = async (r: Response): Promise<string> => plainly(await doorWords(r)).text;
+/** Where an act a refusal points at lives, when it is a page. */
+const ACT_PAGE: Partial<Record<Act, [string, string]>> = { vault: ['vault', 'Open Vault'], remote: ['remote', 'Open Remote'], settings: ['settings/services', 'Open Real services'] };
+function ActLinks({ name, acts }: { name: string; acts: Act[] }): React.JSX.Element | null {
+  const pages = acts.map((a) => ACT_PAGE[a]).filter((x): x is [string, string] => Boolean(x));
+  if (pages.length === 0) return null;
+  return <>{pages.map(([page, label]) => <React.Fragment key={page}> <a href={`${BASE}/${name}/~/${page}`} onClick={(e) => { e.preventDefault(); go([...name.split('/'), '~', ...page.split('/')]); }}>{label}</a></React.Fragment>)}</>;
+}
+
 async function door(token: string, path: string, init: RequestInit = {}): Promise<Response> {
   // SESSION: no token header; the World's session cookie (same-origin) is the credential
   return nativeFetch(`${ORIGIN}${path}`, { ...init, headers: { ...(init.headers ?? {}), ...(token === SESSION ? {} : { 'x-volter-token': token }), ...(init.body && !(init.headers as Record<string, string> | undefined)?.['content-type'] ? { 'content-type': 'application/json' } : {}) } });
 }
 
 /** One door read with this token (the kit's useDoor). */
-function useDoor<T>(token: string, path: string | null, version = 0): Load<T> { return useKitDoor<T>((p) => door(token, p), path, version, token); }
+function useDoor<T>(token: string, path: string | null, version = 0): Load<T> { const l = useKitDoor<T>((p) => door(token, p), path, version, token); return l.state === 'error' ? { ...l, error: plainly(l.error).text } : l; }
 
 /** A datetime-local input's value for an instant, in the viewer's zone. */
 const localInput = (iso: string): string => { const d = new Date(iso); const p = (n: number): string => String(n).padStart(2, '0'); return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())}T${p(d.getHours())}:${p(d.getMinutes())}`; };
@@ -81,7 +127,6 @@ const nextMinute = (iso: string): string => new Date(Math.ceil(Date.parse(iso) /
 
 /** An entry's standing: observed from the vendor, a receipt, default data, or not yet pushed. */
 const standing = (e: Entry): string => (e.operation === 'observed' ? `observed${e.provenance === 'placeholder' ? ' (default data)' : ' (vendor)'}` : e.receipt ? `${e.receipt.status ?? ''} ${e.receipt.externalId ?? ''} ${e.receipt.reason ?? ''}`.trim() : e.provenance === 'placeholder' ? 'default data' : 'unpushed');
-const actorOf = (e: Entry): string => (e.actor ? `${e.actor.kind}${e.actor.id ? ` ${e.actor.id}` : ''}` : '—');
 /** The trace id of a W3C traceparent (`00-<32 hex>-<16 hex>-<2 hex>`), or null. */
 const traceOf = (tp?: string): { trace: string; span: string } | null => { const m = /^[0-9a-f]{2}-([0-9a-f]{32})-([0-9a-f]{16})-[0-9a-f]{2}$/.exec(tp ?? ''); return m ? { trace: m[1]!, span: m[2]! } : null; };
 
@@ -161,13 +206,18 @@ function moveTo(origin: string, token: string, name: string, path?: string): voi
 }
 
 /** The path under the console's base: [] worlds; [org, world] a world; [org, world, twin] a twin; [org, world, '~', tab, arg?] a tab of the world. */
-function route(): string[] { return window.location.pathname.slice(BASE.length).split('/').filter(Boolean).map((p) => { try { return decodeURIComponent(p); } catch { return ''; } }); }
+// where the path is kept: the address bar, or (a page whose root says `data-route="memory"`, as a story's frame is) this
+// page's memory, so a page that is not served at its own addresses still moves between its pages
+let memoryPath: string | null = ROOT.dataset.route === 'memory' ? '' : null;
+/** Move a memory-routed page to `path` (under the base), as following a link there would. */
+export function openAt(path: string): void { memoryPath = path; window.dispatchEvent(new PopStateEvent('popstate')); }
+function route(): string[] { return (memoryPath ?? window.location.pathname.slice(BASE.length)).split('/').filter(Boolean).map((p) => { try { return decodeURIComponent(p); } catch { return ''; } }); }
 /** An org's or a World's name: letters, digits and single hyphens (world-origins.ts), never a separator or a dot. */
 const WORLD_PART = /^[a-z0-9](?:[a-z0-9]|-(?!-))*$/i;
 /** The World a path names, `<org>/<world>`, or '' when its segments are not names: nothing decoded from a path (an
  *  encoded `/` or `..`) ever reaches a door's path. */
 const worldOf = (o?: string, w?: string): string => (o && w && WORLD_PART.test(o) && WORLD_PART.test(w) ? `${o}/${w}` : '');
-function go(parts: string[]): void { window.history.pushState(null, '', `${BASE}/${parts.map(encodeURIComponent).join('/')}`); window.dispatchEvent(new PopStateEvent('popstate')); }
+function go(parts: string[]): void { const path = `/${parts.map(encodeURIComponent).join('/')}`; if (memoryPath !== null) memoryPath = path; else window.history.pushState(null, '', `${BASE}${path}`); window.dispatchEvent(new PopStateEvent('popstate')); }
 /** A page of a branch this tab holds: at the branch's own origin when it has one (this origin serves its World only), carrying its read token. */
 function goBranch(branch: string, parts: string[]): void {
   const there = worldOriginOf(snapshots()[branch]?.origin);
@@ -202,6 +252,20 @@ async function localSession(): Promise<{ token: string } | 'moved' | null> {
   return null;
 }
 
+/** Appearance: the system's, light or dark, kept in this browser. */
+function ThemeChoice(): React.JSX.Element {
+  const [theme, setTheme] = useState<Theme>(storedTheme);
+  const pick = (t: Theme) => (): void => { try { if (t === 'system') localStorage.removeItem('volter.theme'); else localStorage.setItem('volter.theme', t); } catch { /* a private window keeps it for this page */ } applyTheme(t); setTheme(t); };
+  return (
+    <>
+      <p className="menu-label">Appearance</p>
+      <div className="theme-choice" role="radiogroup" aria-label="Appearance">
+        {(['system', 'light', 'dark'] as const).map((t) => <button key={t} type="button" role="radio" aria-checked={theme === t} onClick={pick(t)}>{t === 'system' ? 'System' : t === 'light' ? 'Light' : 'Dark'}</button>)}
+      </div>
+    </>
+  );
+}
+
 function App(): React.JSX.Element {
   const [token, setToken] = useState<string>(held());
   // a World this machine serves (localSession): no sign-in, no sign-out; `probed`: that was asked, so a sign-in form
@@ -269,7 +333,7 @@ function App(): React.JSX.Element {
       const ping = await nativeFetch(`${ORIGIN}/-/ping`); // not a platform answer: perhaps this origin is a bare host
       if (!ping.ok) { setError(`${ORIGIN} does not answer as a host`); setMode(null); return; }
       worlds = ((await ping.json()) as { worlds?: string[] }).worlds ?? [];
-      if (worlds.length === 0) { setError(`${ORIGIN} does not list its worlds: open the console with the World's URL (volter world console <url>/<org>/<world>)`); setMode(null); return; }
+      if (worlds.length === 0) { setError(`${ORIGIN} does not list its Worlds: open a World at its own address, ${ORIGIN}${BASE}/<org>/<world>`); setMode(null); return; }
     }
     const opened: Array<{ name: string; base: string; twins: Row['twins'] }> = [];
     for (const name of worlds) { const r = await door(t, `/-/${name}/twins`); if (r.ok) { const b = (await r.json()) as { twins?: Array<{ twin: string; protocol?: { major?: number } | null; root?: unknown }> }; opened.push({ name, base: `${WORLDS}/${name}`, twins: (b.twins ?? []).map((x) => ({ vendor: x.twin, protocol: x.protocol ?? null, root: x.root ?? null })) }); } }
@@ -282,16 +346,20 @@ function App(): React.JSX.Element {
   const [who, setWho] = useState<string>('');
 
   if (!token || (!mode && !error)) {
+    // as GitHub Desktop asks to sign in: one window, what opening does, the one field and the one act
     return (
-      <main>
-        <Brand href={`${BASE}/`} />
-        {(token && !mode && !error) || (!token && !probed) ? <p>Opening…</p> : (
-          <form onSubmit={(e) => { e.preventDefault(); keep(draft.trim()); setToken(draft.trim()); }}>
-            <p>A host's admin token opens every world it serves; a world's token opens that world.</p>
-            <label>Token <input name="token" type="password" value={draft} onChange={(e) => setDraft(e.target.value)} autoFocus /></label>
-            <button type="submit">Open</button>
-          </form>
-        )}
+      <main className="app gate">
+        <div className="gate-window">
+          <Brand href={`${BASE}/`} />
+          {(token && !mode && !error) || (!token && !probed) ? <p className="mode">Opening…</p> : (
+            <form onSubmit={(e) => { e.preventDefault(); keep(draft.trim()); setToken(draft.trim()); }} className="stack">
+              <h2>Open a World</h2>
+              <p className="mode">A World's token opens that World. A host's admin token opens every World it serves.</p>
+              <label><span>Token</span><input name="token" type="password" value={draft} onChange={(e) => setDraft(e.target.value)} autoFocus autoComplete="off" /></label>
+              <button type="submit" className="primary">Open</button>
+            </form>
+          )}
+        </div>
       </main>
     );
   }
@@ -311,21 +379,32 @@ function App(): React.JSX.Element {
     if (mode) for (const w of mode.worlds) navigator.sendBeacon(`${w.base.replace(/\/[^/]+\/[^/]+$/, '')}/-/${w.name}/session/end`); keep(''); setToken(''); setDraft(''); setMode(null); go([]);
   };
   if (error || !mode) {
-    return <main><Brand href={`${BASE}/`} /><p role="alert">{error ?? 'nothing answered'}</p>{portal() ? <a className="button" href={`${portal()}/`}>Back to {new URL(portal()).host}</a> : <button onClick={signOut}>{local ? 'Try again' : 'Use another token'}</button>}</main>;
+    return <main className="app gate"><div className="gate-window"><Brand href={`${BASE}/`} /><h2>Could not open it</h2><p role="alert">{error ?? 'nothing answered'}</p>{portal() ? <a className="button primary" href={`${portal()}/`}>Back to {new URL(portal()).host}</a> : <button type="button" className="primary" onClick={signOut}>{local ? 'Try again' : 'Use another token'}</button>}</div></main>;
   }
   // `/<org>/<world>/<twin>` is a twin; `/<org>/<world>/~/<tab>[/<arg>]` is a tab of the World — `~`
   // is never a vendor name, so a tab can never shadow a twin
-  const [org, world, third, tabPart, argPart] = parts;
+  const [org, world, third, tabPart, argPart, argMore, argLast] = parts;
   const tabbed = third === '~';
   // a vendor's name and a tab's argument (a vendor, a trace id) are names too: nothing else reaches a door or a frame
   const PART = /^[A-Za-z0-9_-]+$/;
+  const RECORD_ID = /^[^\u0000-\u001f\u007f]{1,200}$/;
   const twin = tabbed || !third || !PART.test(third) ? undefined : third;
-  const tabArg = argPart && PART.test(argPart) ? argPart : undefined;
+  // a tab's argument is one name, or a World's full name `<org>/<world>` (a host's branch, on Branches)
+  const tabArg = argPart && PART.test(argPart) ? (argMore !== undefined && tabPart !== 'changes' && tabPart !== 'screens' ? (worldOf(argPart, argMore) || undefined) : argPart) : undefined;
+  // Changes' tab and a changeset's page under it: `~/changes/changesets/<name>`
+  const tabSub = tabPart === 'changes' && argPart === 'changesets' && argMore && PART.test(argMore) ? argMore
+    // a record on a vendor's screens: `~/screens/<vendor>/<type>/<id>`
+    // (the type is the vendor's, dotted where it is namespaced — `treasury.inbound_transfer`; the id is the vendor's own — a
+    // Slack message's is its timestamp; both only ever reach the screens' `?show=`, encoded)
+    : tabPart === 'screens' && argMore && argLast && /^[A-Za-z0-9_.-]+$/.test(argMore) && RECORD_ID.test(argLast) ? `${argMore}:${argLast}` : undefined;
   // only a World's name opens a World page (and so reaches its doors); any other path is the list of Worlds
   const name = worldOf(org, world);
   const snapshot = name ? snapshots()[name] ?? null : null;
   /** The token a World is opened with: a snapshot this tab made opens with its read token. */
   const tokenOf = (n: string): string => snapshotToken(n) || worldToken(n);
+  // with a snapshot in view the World's own pages read the World it is a snapshot of: with the parent's credential when this
+  // page holds one (the admin's row for it, or a World token whose doors answered for it), else none
+  const parentToken = snapshot ? (mode.kind === 'admin' ? mode.worlds.find((w) => w.name === snapshot.parent)?.token ?? null : mode.worlds.some((w) => w.name === snapshot.parent) ? token : null) : null;
   const returnToLive = async (s: Snapshot): Promise<void> => {
     // the parent's pages (and its token) live at its own origin: that page removes the branch
     const back = worldOriginOf(s.parentOrigin);
@@ -336,8 +415,9 @@ function App(): React.JSX.Element {
     go(s.parent.split('/'));
   };
   return (
-    <main className={name ? 'app' : undefined}>
-      <header>
+    <main className={name ? 'app workspace' : 'app home'}>
+      {/* a World's workspace has its own toolbar (Workspace): no header over it */}
+      {name ? null : <header>
         {name ? <DrawerButton /> : null}
         <Brand href={`${home() && home() !== ORIGIN ? home() : ''}${BASE}/`} onClick={(e) => { if (home() && home() !== ORIGIN) return; e.preventDefault(); go([]); }} />
         <nav aria-label="breadcrumb" className="crumbs">
@@ -347,11 +427,12 @@ function App(): React.JSX.Element {
         </nav>
         {/* the way back is the org's Worlds on the platform that signed the pass: the issuer is verified, the org is this World's own */}
         {portal() ? <a href={`${portal()}/${name ? encodeURIComponent(name.split('/')[0]!) : ''}`} title={`Back to the platform at ${new URL(portal()).host}`} className="back-link">← <span className="back-text">{name ? `${name.split('/')[0]}'s Worlds` : new URL(portal()).host}</span></a> : null}
-        <span className="mode">{local ? 'on this machine' : snapshot ? 'a snapshot, read only' : who ? `signed in as ${who}` : mode.kind === 'admin' ? 'host: admin' : 'opened with a link or key'}</span>
-        {local ? null : <button onClick={signOut}>Sign out</button>}
-      </header>
+        {/* a World's page says who is here in its sidebar's account block; the host's list, which has no sidebar, here */}
+        {name ? null : <span className="mode">{local ? 'on this machine' : who ? `signed in as ${who}` : mode.kind === 'admin' ? 'host: admin' : 'opened with a link or key'}</span>}
+        {name || local ? null : <button onClick={signOut}>Sign out</button>}
+      </header>}
       {name
-        ? <WorldView key={name} name={name} token={tokenOf(name)} twin={twin} tab={tabbed ? tabPart ?? 'overview' : 'overview'} arg={tabbed ? tabArg : undefined} admin={snapshot ? null : mode.kind === 'admin' ? token : null} snapshot={snapshot} onReturn={returnToLive} opens={(n) => !!snapshots()[n] || (mode.kind === 'admin' && mode.worlds.some((w) => w.name === n))} onRemoved={() => { void load(token); go([]); }} onWho={setWho} />
+        ? <WorldView key={name} name={name} token={tokenOf(name)} twin={twin} tab={tabbed ? tabPart ?? 'overview' : 'overview'} arg={tabbed ? tabArg : undefined} {...(tabbed && tabSub ? { sub: tabSub } : {})} admin={snapshot ? null : mode.kind === 'admin' ? token : null} snapshot={snapshot} parentToken={parentToken} who={{ local, person: who || null, admin: mode.kind === 'admin' }} onSignOut={signOut} onReturn={returnToLive} opens={(n) => !!snapshots()[n] || (mode.kind === 'admin' && mode.worlds.some((w) => w.name === n))} onRemoved={() => { void load(token); go([]); }} onWho={setWho} worlds={mode.worlds.map((w) => w.name)} />
         : <Worlds mode={mode} admin={mode.kind === 'admin' ? token : null} reload={() => load(token)} />}
     </main>
   );
@@ -366,79 +447,91 @@ function Worlds({ mode, admin, reload }: { mode: Mode; admin: string | null; rel
     if (!(await confirmAct({ title: `Rotate the tokens of ${name}?`, body: 'Every app, script and person holding the current tokens loses access at once. The new ones are shown once.', action: 'Rotate tokens', danger: true }))) return;
     const r = await door(admin!, `/-/worlds/${name}/rotate`, { method: 'POST' });
     const b = (await r.json().catch(() => ({}))) as { token?: string; readToken?: string; error?: string };
-    setNote(r.ok ? `rotated ${name}: the new tokens are shown once — token ${b.token} · read token ${b.readToken}` : b.error ?? `answered ${r.status}`);
+    setNote(r.ok ? `rotated ${name}: the new tokens are shown once — token ${b.token} · read token ${b.readToken}` : b.error ? plainly(b.error).text : `answered ${r.status}`);
     await reload();
   };
   const removeWorld = async (name: string): Promise<void> => {
     const r = await door(admin!, `/-/worlds/${name}`, { method: 'DELETE' });
     const b = (await r.json().catch(() => ({}))) as { error?: string };
-    setNote(r.ok ? `removed ${name}` : b.error ?? `answered ${r.status}`);
+    setNote(r.ok ? `removed ${name}` : b.error ? plainly(b.error).text : `answered ${r.status}`);
     await reload();
   };
-  const [provisioning, setProvisioning] = useState(false);
+  const [provisioning, setProvisioning] = useState(false); const [making, setMaking] = useState(false); const [filter, setFilter] = useState('');
   const provision = async (e: React.FormEvent): Promise<void> => {
     e.preventDefault(); setNote(null); setProvisioning(true);
     try {
       const r = await door(admin!, '/-/worlds', { method: 'POST', body: JSON.stringify({ org, world, vendors: vendors.split(',').map((v) => v.trim()).filter(Boolean) }) });
       const body = (await r.json()) as { error?: string; name?: string };
-      if (!r.ok) { setNote(body.error ?? `the host answered ${r.status}`); return; }
-      setNote(`provisioned ${body.name}`); setWorld(''); setVendors(''); await reload(); // the org stays: the next world usually goes to the same org
+      if (!r.ok) { setNote(body.error ? plainly(body.error).text : `the host answered ${r.status}`); return; }
+      setNote(`provisioned ${body.name}`); setWorld(''); setVendors(''); setMaking(false); await reload(); // the org stays: the next world usually goes to the same org
     } finally { setProvisioning(false); }
   };
+  const f = filter.trim().toLowerCase();
+  const rows = mode.worlds.filter((w) => !f || w.name.toLowerCase().includes(f) || w.twins.some((t) => t.vendor.includes(f)));
+  const orgs = [...new Set(rows.map((w) => w.name.split('/')[0]!))];
   return (
-    <section aria-labelledby="worlds">
-      <h2 id="worlds">Worlds</h2>
-      <p className="lede">A World is a copy of the services your app uses (Stripe, Slack, GitHub…), with none of the real consequences: your app talks to it, and you can see everything it did on each vendor's own screens.</p>
-      <table>
-        <thead><tr><th>world</th><th>address</th><th>stand-ins for</th>{admin ? <th>actions</th> : null}</tr></thead>
-        <tbody>
-          {mode.worlds.map((w) => (
-            <tr key={w.name}>
-              <td><a href={`${BASE}/${w.name}`} onClick={(e) => { e.preventDefault(); go(w.name.split('/')); }}>{w.name}</a></td>
-              <td><code>{w.base}</code></td>
-              <td>{w.twins.map((t) => vendorName(t.vendor)).join(', ') || '—'}</td>
-              {/* a host's admin manages a World here, on the host's origin, where the admin token lives: a World's own
-                  pages (its origin) never hold it */}
-              {admin ? <td>
-                <button type="button" aria-label={`Rotate the tokens of ${w.name}`} onClick={() => void rotateWorld(w.name)}>Rotate tokens</button>{' '}
-                <button type="button" aria-label={`Remove ${w.name}`} onClick={() => void confirmAct({ title: `Remove ${w.name}?`, body: 'The host stops serving it and its whole history goes with it. This cannot be undone.', action: 'Remove World', danger: true, typed: w.name }).then((ok) => { if (ok) void removeWorld(w.name); })}>Remove world</button>
-              </td> : null}
-            </tr>
-          ))}
-        </tbody>
-      </table>
-      {admin ? (
-        <form onSubmit={provision} aria-labelledby="provision">
-          <h3 id="provision">Provision a world</h3>
-          <label>Org <input name="org" value={org} onChange={(e) => setOrg(e.target.value)} required /></label>
-          <label>World <input name="world" value={world} onChange={(e) => setWorld(e.target.value)} required /></label>
-          <label>Twins <input name="vendors" value={vendors} onChange={(e) => setVendors(e.target.value)} placeholder="github, slack" required /></label>
-          <button type="submit" disabled={provisioning}>{provisioning ? 'Provisioning… (a host boots the world; ten seconds or so)' : 'Provision'}</button>
+    <section className="home-window" aria-labelledby="worlds">
+      <div className="home-head">
+        <h2 id="worlds">Worlds</h2>
+        <span className="mode">{counted(mode.worlds.length, 'World')} {admin ? 'this host serves' : 'this key opens'}</span>
+        {admin ? <button type="button" className="primary" onClick={() => { setNote(null); setMaking(true); }}><Icon name="plus" size={16} />New World</button> : null}
+      </div>
+      <div className="home-find"><input type="search" placeholder="Filter by World or vendor" aria-label="Filter Worlds" value={filter} onChange={(e) => setFilter(e.target.value)} /></div>
+      {note && !making ? <p role="status" className="home-note">{note}</p> : null}
+      {orgs.map((org) => (
+        <React.Fragment key={org}>
+          <p className="menu-label home-org">{org}</p>
+          <ul className="home-list">{rows.filter((w) => w.name.split('/')[0] === org).map((w) => (
+            <li key={w.name}>
+              <a href={`${BASE}/${w.name}`} onClick={(e) => { e.preventDefault(); go(w.name.split('/')); }}>
+                <Icon name="globe" size={20} />
+                <span className="ws-row-text"><b>{w.name.split('/')[1]}</b><small><code>{w.base}</code></small></span>
+                <span className="home-vendors">{w.twins.map((t) => <span key={t.vendor} title={vendorName(t.vendor)}><Mark vendor={t.vendor} /></span>)}</span>
+              </a>
+              {/* a host's admin manages a World here, on the host's origin, where the admin token lives: a World's own pages never hold it */}
+              {admin ? (
+                <details className="menu home-more">
+                  <summary aria-label={`More for ${w.name}`}>⋯</summary>
+                  <div className="popover menu-list">
+                    <button type="button" onClick={(e) => { (e.currentTarget as HTMLElement).closest('details')?.removeAttribute('open'); void rotateWorld(w.name); }}>Rotate tokens…</button>
+                    <button type="button" className="danger-item" onClick={(e) => { (e.currentTarget as HTMLElement).closest('details')?.removeAttribute('open'); void confirmAct({ title: `Remove ${w.name}?`, body: 'The host stops serving it and its whole history goes with it. This cannot be undone.', action: 'Remove World', danger: true, typed: w.name }).then((ok) => { if (ok) void removeWorld(w.name); }); }}>Remove World…</button>
+                  </div>
+                </details>
+              ) : null}
+            </li>
+          ))}</ul>
+        </React.Fragment>
+      ))}
+      {rows.length === 0 ? <p className="mode home-note">{f ? `No World matches ${filter}.` : 'No Worlds here yet.'}</p> : null}
+      <Dialog open={making} onClose={() => { if (!provisioning) setMaking(false); }} title="New World" footer={<><button type="button" onClick={() => setMaking(false)} disabled={provisioning}>Cancel</button><button type="submit" form="provision" className="primary" disabled={provisioning}>{provisioning ? 'Making… (ten seconds or so)' : 'Make World'}</button></>}>
+        <form id="provision" onSubmit={provision} className="stack">
+          <label><span>Org</span><input name="org" value={org} onChange={(e) => setOrg(e.target.value)} required /></label>
+          <label><span>World</span><input name="world" value={world} onChange={(e) => setWorld(e.target.value)} required /></label>
+          <label><span>Vendors</span><input name="vendors" value={vendors} onChange={(e) => setVendors(e.target.value)} placeholder="stripe, slack" required /><span className="mode">A twin of each, with its default data.</span></label>
           {note ? <p role="status">{note}</p> : null}
         </form>
-      ) : note ? <p role="status">{note}</p> : null}
+      </Dialog>
     </section>
   );
 }
 
 type Clock = { at: string; frozen: boolean };
 type WorldMap = { world: string; twins: Array<{ twin: string; position: number; mirror: boolean; root: { url: string } | null; resources: Array<{ type: string; count: number }> }> };
-type Placed = { twin: string; position: number; entry: Entry };
+type Placed = { twin: string; position: number; entry: Entry; /** the credential that called, as the World names it from its request journal (the timeline door): `key:<name>`, `person:<who>`, `person`, `token` */ caller?: string };
 type Timeline = { entries: Placed[]; next: string | null };
 type Diff = { base: { id: string; at: string | null }; changes: Array<{ twin: string; entry: Entry }> };
-type Branch = { name: string; at?: { instant?: string }; createdAt: string; expiresAt: string | null };
+type Branch = { name: string; from?: string; at?: { instant?: string } | null; createdAt: string; expiresAt: string | null };
 /** The branches door: the host's snapshots of this World, and the World's own named branches (`volter world branch`),
  *  one of which, `checkedOut`, is the one this serve holds. */
 type BranchesDoor = { branches: Branch[]; checkedOut?: string; named?: Array<{ name: string; running: boolean }>; canServe?: boolean };
 /** What the World's session answered: its scope; `unknown` when the host has no session door (a write then says). */
 type Scope = 'pending' | 'read' | 'write' | 'unknown';
 
-// A World's page is laid out as Neon's console is (Volter is Neon for every SaaS, docs/concepts/the-model.md): the
-// World's own pages, the branch picker, then the branch's pages and its services, which here are its vendors, each a
-// sibling. All screens is a canvas app's page, the whole window. The older page names still open their page.
-const TABS = [['overview', 'Dashboard'], ['branches', 'Branches'], ['settings', 'Settings'], ['branch', 'Overview'], ['changes', 'Changes'], ['changesets', 'Changesets'], ['activity', 'Activity'], ['vendors', 'Vendors'], ['canvas', 'All screens']] as const;
-type Tab = (typeof TABS)[number][0];
-const TAB_ALIASES: Record<string, Tab> = { dashboard: 'overview', mirrors: 'vendors', screens: 'canvas', timeline: 'activity', monitoring: 'activity', trace: 'activity', operations: 'settings' };
+/** The addresses under a World's `~/` (docs/contributing/console.md): its places (changes and its changesets, events and a
+ *  trace, a vendor's records, its screens and the canvas of them all) and its windows (branches, settings and the two
+ *  settings tabs addressed on their own, remote and vault). Anything else opens Changes. */
+const TABS = ['changes', 'events', 'trace', 'vendors', 'screens', 'canvas', 'branches', 'settings', 'remote', 'vault'] as const;
+type Tab = (typeof TABS)[number] | 'overview';
 /** A vendor's own screens, at the twin's place in the World: the vendor's site (served-world.ts, the wire's page fallback). */
 const mirrorUrl = (name: string, vendor: string): string => `${WORLDS}/${name}/${vendor}/`;
 /** What an entry did, in words: the thing's kind and the vendor's verb, the thing's own label where it has one. */
@@ -461,12 +554,8 @@ function said(e: Entry): { what: string; label: string | null } {
 }
 /** A secret's id is never shown whole (a token, a password, a key): its last four characters. */
 const shown = (e: Entry): string => (/token|password|secret|key|credential/i.test(e.subject.type) && e.subject.id.length > 6 ? `••••${e.subject.id.slice(-4)}` : e.subject.id);
-/** Who did it: an app or agent by its id; the vendor itself for what it does on its own (an event it records). */
-const byWhom = (e: Entry, vendor: string): string => (!e.actor ? '' : e.actor.kind === 'system' ? `by ${vendorName(vendor)}` : e.actor.id ? `by ${e.actor.id}` : e.actor.kind === 'agent' || e.actor.kind === 'app' ? 'by your app' : `by ${e.actor.kind}`);
-/** An entry's standing worth saying: where it came from, or what its push did. Not yet pushed is the ordinary case. */
-const notable = (e: Entry): string | null => (e.operation === 'observed' || e.receipt || e.provenance === 'placeholder' ? standing(e) : null);
 
-function WorldView({ name, token, twin, tab, arg, admin, snapshot, onReturn, opens, onRemoved, onWho }: { name: string; token: string; twin?: string; tab: string; arg?: string; admin: string | null; snapshot: Snapshot | null; onReturn: (s: Snapshot) => Promise<void>; opens: (name: string) => boolean; onRemoved: () => void; onWho?: (who: string) => void }): React.JSX.Element {
+function WorldView({ name, token, twin, tab, arg, sub, admin, snapshot, parentToken, who, onSignOut, onReturn, opens, onRemoved, onWho, worlds = [] }: { /** the Worlds this page opens, for the World menu's switcher */ worlds?: string[]; /** who is at this page (the account block) */ who: { local: boolean; person: string | null; admin: boolean }; onSignOut: () => void; name: string; token: string; twin?: string; tab: string; arg?: string; /** with a snapshot in view: the credential this page holds for the World it is a snapshot of, or null */ parentToken?: string | null; /** a page under a tab's argument: a changeset under Changes › Changesets */ sub?: string; admin: string | null; snapshot: Snapshot | null; onReturn: (s: Snapshot) => Promise<void>; opens: (name: string) => boolean; onRemoved: () => void; onWho?: (who: string) => void }): React.JSX.Element {
   // the session: its scope says which controls this token may use, and its cookie is what a mirror reads with
   const [scope, setScope] = useState<Scope>('pending');
   // why the session was not opened (the wall says it, with a way to try again), and that try
@@ -488,7 +577,7 @@ function WorldView({ name, token, twin, tab, arg, admin, snapshot, onReturn, ope
       if (r.status === 409 && own && own !== ORIGIN) { moveTo(own, token, name); return; }
       if (!live) return;
       setScope(!r.ok ? 'unknown' : b.scope === 'read' ? 'read' : b.scope === 'write' ? 'write' : 'unknown');
-      if (!r.ok) setSessionError(b.error ?? `answered ${r.status}`);
+      if (!r.ok) setSessionError(b.error ? plainly(b.error).text : `answered ${r.status}`);
     }).catch((e: unknown) => { if (live) { setScope('unknown'); setSessionError(`the World did not answer: ${e instanceof Error ? e.message : String(e)}`); } });
     return () => { live = false; };
   }, [name, token, attempt]);
@@ -498,7 +587,9 @@ function WorldView({ name, token, twin, tab, arg, admin, snapshot, onReturn, ope
   // hold; the server refuses such writes anyway, and a read-only viewer should not be offered them
   const canWrite = scope === 'write';
   /** A write the door refused as out of scope: this token reads only, whatever the session said. */
-  const refused = (r: Response): void => { if (r.status === 403) setScope('read'); };
+  // only the World saying this credential reads (`the read token opens only reads`, write access needed) makes the page
+  // read only: a 403 for another reason (a key opening a seal) is said where it happened and changes no scope
+  const refused = (r: Response): void => { if (r.status !== 403) return; void r.clone().json().then((b: { error?: string }) => { if (/read token|opens only reads|write access|reads only/i.test(b?.error ?? '')) setScope('read'); }, () => null); };
 
   const [tick, setTick] = useState(0);
   useEffect(() => { const id = setInterval(() => { if (!document.hidden) setTick((t) => t + 1); }, 5000); return () => clearInterval(id); }, []);
@@ -510,271 +601,674 @@ function WorldView({ name, token, twin, tab, arg, admin, snapshot, onReturn, ope
   // branches are the host's: a host that does not answer the door has no "as of", and the console shows none
   const hasBranches = !(branches.state === 'error' && (branches.status === 404 || branches.status === 405));
 
-  if (twin) return <TwinView name={name} token={token} twin={twin} />;
-  const current: Tab = TABS.some(([k]) => k === tab) ? (tab as Tab) : TAB_ALIASES[tab] ?? 'overview';
+
+  const current: Tab = (TABS as readonly string[]).includes(tab) ? (tab as Tab) : 'overview';
   const vendors = twins.state === 'ok' ? twins.data.twins.map((t) => t.twin) : [];
-  const held = (v: string): number => (map.state === 'ok' ? (map.data.twins.find((x) => x.twin === v)?.resources ?? []).reduce((n, r) => n + r.count, 0) : 0);
   const chosen = current === 'vendors' && arg ? arg : undefined;
   const retry = (): void => { setScope('pending'); setAttempt((a) => a + 1); };
   // ALL SCREENS is a canvas app's own page: the whole window, the World's pages a click away (Figma's, tldraw's)
-  if (current === 'canvas' || (current === 'vendors' && !chosen)) {
-    return <Canvas name={name} twins={twins} session={session} retry={retry} snapshot={snapshot} back={() => go(name.split('/'))} />;
+  if (current === 'canvas' || (current === 'vendors' && !chosen) || (tab === 'screens' && !arg)) {
+    return <Canvas name={name} token={token} twins={twins} session={session} retry={retry} snapshot={snapshot} back={() => go(name.split('/'))} />;
   }
-  const title = chosen ? vendorName(chosen) : TABS.find(([k]) => k === current)?.[1] ?? '';
-  const open = (parts: string[]) => (e: React.MouseEvent): void => { e.preventDefault(); go([...name.split('/'), ...parts]); };
-  const item = (k: Tab, label: string = TABS.find(([t]) => t === k)?.[1] ?? k): React.JSX.Element => {
-    const on = current === k && !chosen;
-    return <a href={`${BASE}/${name}/~/${k}`} aria-current={on ? 'page' : undefined} className={on ? 'on' : undefined} onClick={open(['~', k])}>{label}</a>;
-  };
+  // EVERY World opens as its workspace: on this machine, on a host, and a snapshot of one (read only, a way back to live)
+  const tabOf = (t?: string): SettingsTab => (SETTINGS_TABS.find(([k]) => k === t)?.[0] ?? 'account');
+  const win: WorkspaceWindow = tab === 'settings' ? { kind: 'settings', tab: tabOf(arg) } : tab === 'remote' ? { kind: 'settings', tab: 'remote' } : tab === 'vault' ? { kind: 'settings', tab: 'vault' } : tab === 'branches' ? { kind: 'branches', ...(arg ? { open: arg } : {}) } : null;
+  // a vendor's own address (`/<org>/<world>/<vendor>`) is its place: what it stores and its log
+  const view: WorkspaceView = twin ? 'vendor' : tab === 'screens' && arg ? 'screen' : current === 'vendors' && chosen ? 'vendor' : tab === 'trace' ? 'trace' : tab === 'events' ? 'events' : tab === 'changes' && arg === 'changesets' ? 'history' : 'changes';
+  return <Workspace name={name} token={token} view={view} win={win} who={who} snapshot={snapshot} onReturn={onReturn} onSignOut={onSignOut} worlds={worlds} session={session} retry={retry} {...(view === 'vendor' ? { arg: twin ?? chosen } : view === 'events' || view === 'trace' || view === 'screen' ? (arg ? { arg } : {}) : {})} {...(sub ? { sub } : {})} twins={twins} map={map} branches={hasBranches ? branches : null} clock={clock} canWrite={canWrite && !snapshot} refused={refused} signsAs={signsAs} opens={opens} tick={tick} admin={admin} onRemoved={onRemoved} onClock={() => setClockVersion((v) => v + 1)} scope={snapshot ? 'read' : scope} />;
+}
+
+/** A brand icon by its Lucide name (scripts/brand-tokens.ts writes the set), in the text's colour. */
+function Icon({ name, size = 20 }: { name: string; size?: number }): React.JSX.Element {
+  return <svg className="icon" viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth={size <= 16 ? 1.75 : 1.5} strokeLinecap="square" strokeLinejoin="miter" aria-hidden="true">{(ICONS[name] ?? []).map(([tag, attrs], i) => React.createElement(tag, { key: i, ...attrs }))}</svg>;
+}
+/** What a record's writes did to it, as a working tree marks a file: made here, removed, or changed. */
+function changeKind(writes: Entry[]): { icon: string; word: string; tone: string } {
+  const verb = (e: Entry): string => { const op = (e.operation ?? e.op).toLowerCase(); return op.includes('.') ? op.slice(op.lastIndexOf('.') + 1) : op; };
+  if (writes.some((e) => /^(delete|remove|archive|revoke)/.test(verb(e)) || e.fields?.deleted === true)) return { icon: 'square-minus', word: 'removed', tone: 'removed' };
+  if (/^(create|add|insert|issue|send|post|upload|invite|record|seed)/.test(verb(writes[0]!))) return { icon: 'square-plus', word: 'made', tone: 'added' };
+  return { icon: 'square-dot', word: 'changed', tone: 'changed' };
+}
+type WorkspaceView = 'changes' | 'history' | 'events' | 'trace' | 'vendor' | 'screen';
+type ChangedRecord = { key: string; twin: string; writes: Entry[] };
+/** The workspace's windows over its view: Settings (GitHub Desktop's, its tabs beside its pane) and Branches. */
+type WorkspaceWindow = { kind: 'settings'; tab: SettingsTab } | { kind: 'branches'; open?: string } | null;
+const SETTINGS_TABS = [['account', 'Account', 'user'], ['changesets', 'Changesets', 'git-commit-horizontal'], ['remote', 'Remote', 'cloud'], ['access', 'Access', 'key-round'], ['services', 'Real services', 'plug'], ['vault', 'Vault', 'vault'], ['checks', 'Checks', 'list-checks'], ['clock', 'Clock', 'clock'], ['appearance', 'Appearance', 'palette']] as const;
+type SettingsTab = (typeof SETTINGS_TABS)[number][0];
+const shortBranch = (world: string, b: string): string => { const last = b.split('/').pop() ?? b; const base = world.split('/').pop() ?? ''; return last.startsWith(`${base}-`) ? last.slice(base.length + 1) : last; };
+const kindOf = (t: string): string => t.replace(/^_+/, '').replace(/[_-]+/g, ' ');
+
+/** One changed record as a diff reads: its fields as they stood before this branch's changes (folded from its history
+ *  ahead of them) and as they stand now, only those that moved; the writes that moved them listed above. */
+function RecordDiff({ record, history, screens }: { record: ChangedRecord; history: Entry[] | null; /** the World, when this vendor has screens: the record's change is seen there */ screens?: string }): React.JSX.Element {
+  const head = record.writes[record.writes.length - 1]!; const s = said(head); const k = changeKind(record.writes);
+  const mine = new Set(record.writes.map((e) => e.id));
+  const first = record.writes[0]!.occurredAt;
+  const before: Record<string, unknown> = {};
+  // a landed copy (a push's receipt of one of these writes, under the vendor's id) is the same write, never what it held before
+  if (history) for (const e of history) if (!mine.has(e.id) && !e.landsId && !e.aliasOf && e.subject.type === head.subject.type && e.subject.id === head.subject.id && e.occurredAt <= first) Object.assign(before, e.fields ?? {});
+  const after: Record<string, unknown> = { ...before }; for (const e of record.writes) Object.assign(after, e.fields ?? {});
+  const made = k.tone === 'added' && Object.keys(before).length === 0;
+  const rows = [...new Set([...Object.keys(before), ...Object.keys(after)])].filter((f) => !same(before[f], after[f]));
   return (
-    <div className="shell">
-      <aside className="side">
-        <nav aria-label={`${name} pages`} className="side-nav">
-          <Connect name={name} />
-          <p className="side-group">World</p>
-          {item('overview')}
-          {hasBranches ? item('branches') : null}
-          {item('settings')}
-          <BranchPicker name={name} snapshot={snapshot} branches={hasBranches ? branches : null} opens={opens} />
-          <p className="side-group">Branch</p>
-          {item('branch')}
-          {item('changes')}
-          {item('changesets')}
-          {item('activity')}
-          <p className="side-group">Vendors</p>
-          <a href={`${BASE}/${name}/~/canvas`} className="all-screens" onClick={open(['~', 'canvas'])}><span className="mark" aria-hidden="true">▦</span><span>All screens</span></a>
-          <ul className="side-vendors">
-            {vendors.map((v) => (
-              <li key={v}><a href={`${BASE}/${name}/~/vendors/${v}`} aria-current={chosen === v ? 'page' : undefined} className={chosen === v ? 'on' : undefined} onClick={open(['~', 'vendors', v])}><Mark vendor={v} /><span>{vendorName(v)}</span><span className="count">{held(v) || ''}</span></a></li>
-            ))}
-          </ul>
-        </nav>
-        <div className="side-foot"><ThemeChoice /></div>
-      </aside>
-      <div className="content">
-      {snapshot ? (
-        <div className="snapshot" role="region" aria-label="Snapshot">
-          <span>You are looking at <strong>{snapshot.parent}</strong> as it was at <At iso={snapshot.at} /> · a read-only copy (read-only snapshot) · {snapshot.expiresAt ? (Date.parse(snapshot.expiresAt) <= Date.now() ? <>gone since <At iso={snapshot.expiresAt} /></> : <>goes away <At iso={snapshot.expiresAt} /></>) : 'kept until you go back'}</span>
-          <button type="button" onClick={() => void onReturn(snapshot)}>Return to live</button>
-        </div>
-      ) : null}
-      <div className="content-head">
-        <h2 id="world">{chosen ? <span className="vendor-cell"><Mark vendor={chosen} />{title}</span> : title}{scope === 'read' ? <> <span className="badge read-only" title="This token reads the World; it changes nothing">Read only</span></> : null}</h2>
-        <div className="head-actions">
-          <ClockBar name={name} token={token} clock={clock} canWrite={canWrite && !snapshot} onChanged={() => setClockVersion((v) => v + 1)} refused={refused} />
-          {!snapshot && canWrite && hasBranches && branches.state !== 'loading' ? <AsOf name={name} token={token} clock={clock} refused={refused} /> : null}
-        </div>
-      </div>
-      <div role="region" aria-labelledby="world" className="panel">
-        {current === 'overview' ? <WorldOverview name={name} token={token} map={map} vendors={vendors} twins={twins} session={session} branches={hasBranches ? branches : null} canWrite={canWrite && !snapshot} tick={tick} {...(snapshot ? { snapshotOf: snapshot.parent } : {})} /> : null}
-        {current === 'branch' ? <BranchOverview name={name} token={token} map={map} vendors={vendors} tick={tick} /> : null}
-        {current === 'vendors' ? <Vendors name={name} token={token} twins={twins} session={session} retry={retry} selected={chosen} /> : null}
-        {current === 'activity' && tab === 'trace' ? <Trace name={name} token={token} id={arg ?? ''} /> : null}
-        {current === 'activity' && tab !== 'trace' ? <TimelineTab name={name} token={token} vendors={vendors} /> : null}
-        {current === 'changes' ? <Changes name={name} token={token} /> : null}
-        {current === 'changesets' ? <Changesets name={name} token={token} signsAs={signsAs} canWrite={canWrite && !snapshot} rooted={map.state === 'ok' ? map.data.twins.filter((t) => t.root).map((t) => t.twin) : []} {...(arg ? { open: arg } : {})} refused={refused} /> : null}
-        {current === 'branches' ? <Overview name={name} token={token} canWrite={canWrite} branches={hasBranches ? branches : null} opens={opens} onBranchesChanged={() => setClockVersion((v) => v + 1)} refused={refused} /> : null}
-        {current === 'settings' ? <Operations name={name} token={token} admin={admin} canWrite={canWrite} refused={refused} onRemoved={onRemoved} /> : null}
-      </div>
+    <div className="ws-diff" aria-label={`${s.label ?? shown(head)}: its changes`}>
+      <div className="ws-diff-head">
+        <span className={`ws-kind ${k.tone}`} title={k.word}><Icon name={k.icon} size={16} /></span>
+        <Mark vendor={record.twin} />
+        <div className="cell-label"><b>{s.label ?? shown(head)}</b><small>{vendorName(record.twin)} · {head.subject.type.replace(/^_+/, '').replace(/[_-]+/g, ' ')} <code>{shown(head)}</code> · {k.word} here</small></div>
+        {screens && k.tone !== 'removed' ? <a className="ws-on-screens" href={`${BASE}/${screens}/~/screens/${record.twin}/${head.subject.type}/${encodeURIComponent(head.subject.id)}`} onClick={(e) => { e.preventDefault(); go([...screens.split('/'), '~', 'screens', record.twin, head.subject.type, head.subject.id]); }}><Icon name="monitor" size={16} />On {vendorName(record.twin)}'s screens</a> : null}
       </div>
+      <ol className="ws-writes">{record.writes.map((e) => <li key={e.id}><b>{said(e).what}</b> <span className="mode"><At iso={e.occurredAt} /> · {whoDid(e)}</span></li>)}</ol>
+      {history === null ? <p className="mode pad">Reading its history…</p> : rows.length === 0 ? <p className="mode pad">No field holds a new value.</p> : (
+        <table className="ws-fields" aria-label="Fields before and after">
+          <thead><tr><th>Field</th>{made ? null : <th>Before</th>}<th>{k.tone === 'removed' ? 'After' : 'Now'}</th></tr></thead>
+          <tbody>{rows.map((f) => (
+            <tr key={f}>
+              <th scope="row"><code>{f}</code></th>
+              {made ? null : <td className={f in before ? 'was' : 'none'}>{f in before ? <Value v={before[f]} /> : <span className="mode">—</span>}</td>}
+              <td className={f in after ? 'now' : 'none'}>{f in after ? <Value v={after[f]} /> : <span className="mode">—</span>}</td>
+            </tr>
+          ))}</tbody>
+        </table>
+      )}
     </div>
   );
 }
 
-/** Connect's last line: the setup as a prompt for the person's coding agent (packages/cli/src/agent-prompt.ts, the one
- *  text), copied whole. */
-function CopyAgentPrompt({ text }: { text: string }): React.JSX.Element {
-  const copy = (): void => { void navigator.clipboard?.writeText(text).then(() => toast('Copied the prompt: paste it into your coding agent'), () => toast('Could not copy the prompt', 'error')); };
-  return <button type="button" className="agent-prompt-button" onClick={copy}>Copy a prompt for your coding agent</button>;
+/** The changed records, as GitKraken lists changed files: Path (one flat list, each row marked with its vendor) or Tree
+ *  (the records under their vendor), chosen above the list and kept in this browser. */
+function RecordList({ records, selected, onPick, label }: { records: ChangedRecord[]; selected?: string; onPick: (key: string) => void; label: string }): React.JSX.Element {
+  const [tree, setTree] = useState<boolean>(() => { try { return localStorage.getItem('volter.console.records') === 'tree'; } catch { return false; } });
+  const pick = (t: boolean): void => { setTree(t); try { localStorage.setItem('volter.console.records', t ? 'tree' : 'path'); } catch { /* a private window */ } };
+  const row = (r: ChangedRecord, nested: boolean): React.JSX.Element => {
+    const h = r.writes[r.writes.length - 1]!; const s = said(h); const k = changeKind(r.writes);
+    return <li key={r.key}><button type="button" className={[selected === r.key ? 'on' : '', nested ? 'nested' : ''].join(' ').trim() || undefined} aria-pressed={selected === r.key} onClick={() => onPick(r.key)}>{nested ? null : <Mark vendor={r.twin} />}<span className="ws-row-text"><b>{s.label ?? shown(h)}</b><small>{kindOf(h.subject.type)} · {s.what.split(' ').slice(-1)[0]}{r.writes.length > 1 ? ` · ${counted(r.writes.length, 'write')}` : ''}</small></span><span className={`ws-kind ${k.tone}`} title={k.word} aria-label={k.word}><Icon name={k.icon} size={16} /></span></button></li>;
+  };
+  const vendors = [...new Set(records.map((r) => r.twin))];
+  return (
+    <>
+      <div className="ws-view-switch" role="group" aria-label="List the records by">
+        <button type="button" aria-pressed={!tree} className={tree ? undefined : 'on'} onClick={() => pick(false)}>Path</button>
+        <button type="button" aria-pressed={tree} className={tree ? 'on' : undefined} onClick={() => pick(true)}>Tree</button>
+      </div>
+      <ul className="ws-list" aria-label={label}>{tree
+        ? vendors.map((v) => {
+          const mine = records.filter((r) => r.twin === v);
+          return <li key={v} className="ws-group"><p className="ws-group-head"><Mark vendor={v} /><b>{vendorName(v)}</b><span className="mode">{mine.length}</span></p><ul>{mine.map((r) => row(r, true))}</ul></li>;
+        })
+        : records.map((r) => row(r, false))}</ul>
+    </>
+  );
 }
 
-/** "Connect", heading the sidebar as Neon's does: how an app's calls to these vendors land in this World. */
-function Connect({ name }: { name: string }): React.JSX.Element {
+/** The branch picker, as GitHub Desktop's Current Branch opens: a filter and New branch, this World's branches with the
+ *  one served here ticked, then the branches made of it (live, or as of an instant) and when each goes away. */
+function BranchMenu({ name, token, branches, opens, refused, onChanged }: { name: string; token: string; branches: Load<BranchesDoor> | null; opens: (name: string) => boolean; refused: (r: Response) => void; onChanged: () => void }): React.JSX.Element {
+  const [filter, setFilter] = useState(''); const [making, setMaking] = useState(false);
+  const served = (branches?.state === 'ok' && branches.data.checkedOut) || name.split('/')[1]!;
+  const named = branches?.state === 'ok' && branches.data.named?.length ? branches.data.named : [{ name: served, running: true }];
+  const copies = branches?.state === 'ok' ? branches.data.branches : [];
+  const f = filter.trim().toLowerCase(); const hit = (n: string): boolean => !f || n.toLowerCase().includes(f);
+  const close = (e: React.MouseEvent): void => { (e.currentTarget as HTMLElement).closest('details')?.removeAttribute('open'); };
   return (
-    <details className="menu connect-side">
-      <summary className="button connect-button">Connect</summary>
-      {portal() ? (
-        // a World a platform opened lives on a host: an app reaches it with a key, a local World pushes to it
-        <div className="popover">
-          <p>Point your app's SDKs here, with a key made on the platform; its calls to these vendors land in this World:</p>
-          <pre>{WORLDS}/{name}/&lt;vendor&gt;</pre>
-          <a className="button" href={`${portal()}/${encodeURIComponent(name.split('/')[0] ?? '')}`}>Make a key on the platform</a>
-          <p className="mode">Or push a World from your machine: <code>volter remote add origin {name}</code>, then <code>volter world push</code>.</p>
-          <CopyAgentPrompt text={agentPrompt({ platform: portal(), world: name })} />
-        </div>
-      ) : (
-        <div className="popover">
-          <p>Run your app in this World; its calls to these vendors land here:</p>
-          <pre>volter world run -- npm start</pre>
-          <p className="mode">Or point an SDK at <code>{WORLDS}/{name}/&lt;vendor&gt;</code> with the token in <code>.volter/token</code>.</p>
-          <CopyAgentPrompt text={agentPrompt()} />
-        </div>
-      )}
+    <details className="menu ws-pick">
+      <summary title="The branch served here"><Icon name="git-branch" size={16} /><span className="ws-pick-label"><small>Branch</small><b>{served}</b></span><Icon name="chevron-down" size={16} /></summary>
+      <div className="popover ws-branch-menu">
+        <div className="ws-branch-find"><input type="search" placeholder="Filter" aria-label="Filter branches" value={filter} onChange={(e) => setFilter(e.target.value)} /><button type="button" onClick={(e) => { close(e); setMaking(true); }} disabled={!branches}>New branch</button></div>
+        <p className="menu-label">This World</p>
+        <ul className="ws-branch-list">{named.filter((b) => hit(b.name)).map((b) => (
+          <li key={b.name} className={b.name === served ? 'current' : undefined}><span className="tick">{b.name === served ? <Icon name="check" size={16} /> : <Icon name="git-branch" size={16} />}</span><span className="name">{b.name}</span><span className="mode">{b.name === served ? 'served here' : b.running ? 'running' : 'stopped'}</span></li>
+        ))}</ul>
+        <p className="menu-label">Branches of it</p>
+        {copies.length === 0 ? <p className="mode ws-branch-none">None yet. New branch makes one, from now or as the World was.</p> : (
+          <ul className="ws-branch-list">{copies.filter((b) => hit(b.name)).map((b) => {
+            const row = <><span className="tick"><Icon name="git-branch" size={16} /></span><span className="name">{shortBranch(name, b.name)}</span><span className="mode">{b.at?.instant ? <>as of <At iso={b.at.instant} time /></> : 'live'}</span></>;
+            const goes = b.expiresAt ? `Goes away ${new Date(b.expiresAt).toLocaleString()}` : 'Kept';
+            return <li key={b.name}>{opens(b.name) ? <a href={`${BASE}/${b.name}`} title={goes} onClick={(e) => { e.preventDefault(); close(e); goBranch(b.name, b.name.split('/')); }}>{row}</a> : <span title={`${goes}. Its tokens went to whoever made it; it opens from their page.`}>{row}</span>}</li>;
+          })}</ul>
+        )}
+        <div className="ws-branch-foot"><a href={`${BASE}/${name}/~/branches`} onClick={(e) => { e.preventDefault(); close(e); go([...name.split('/'), '~', 'branches']); }}>Manage branches…</a></div>
+      </div>
+      <NewBranch name={name} token={token} open={making} onClose={() => setMaking(false)} onMade={onChanged} refused={refused} />
     </details>
   );
 }
 
-/** The branch picker, between the World's pages and the branch's (where Neon's sits): this World live, or one of the
- *  host's branches of it; a snapshot names its parent as the way back. */
-function BranchPicker({ name, snapshot, branches, opens }: { name: string; snapshot: Snapshot | null; branches: Load<BranchesDoor> | null; opens: (name: string) => boolean }): React.JSX.Element {
-  const short = (n: string): string => n.split('/').pop() ?? n;
-  const live = snapshot?.parent ?? name;
-  const others = branches?.state === 'ok' ? branches.data.branches.filter((b) => b.name !== name) : [];
+/** Changes | History, as GitHub Desktop heads its left pane: the two tabs of one place, each with its count. */
+function ChangesTabs({ name, view, changes, changesets }: { name: string; view: 'changes' | 'history'; changes: number; changesets: number }): React.JSX.Element {
+  const to = (parts: string[]) => (e: React.MouseEvent): void => { e.preventDefault(); go([...name.split('/'), '~', ...parts]); };
+  return (
+    <nav className="tabs ws-pane-tabs" aria-label="Changes and history">
+      <a href={`${BASE}/${name}/~/changes`} className={view === 'changes' ? 'on' : undefined} aria-current={view === 'changes' ? 'page' : undefined} onClick={to(['changes'])}>Changes{changes ? <span className="count">{changes}</span> : null}</a>
+      <a href={`${BASE}/${name}/~/changes/changesets`} className={view === 'history' ? 'on' : undefined} aria-current={view === 'history' ? 'page' : undefined} onClick={to(['changes', 'changesets'])}>History{changesets ? <span className="count">{changesets}</span> : null}</a>
+    </nav>
+  );
+}
+
+/** HISTORY, as GitHub Desktop's History tab is: the changesets down the left (what it says, when), newest first; the
+ *  selected one beside them, headed by its message and what it changed (GitHub Desktop's "6 changed files +148 −107"),
+ *  then its records beside the selected one's fields before and after. Review (where it went, the checks, the approvals,
+ *  and Verify, Approve and Deploy) is one button in that head, a window over it: GitHub Desktop has no review, so this
+ *  one is ours. */
+function HistoryView({ name, token, sets, sub, signsAs, canWrite, rooted, refused, onChanged, changes, mirrored, required }: { name: string; token: string; sets: Load<{ changesets: ChangesetView[] }>; sub?: string; /** records not in a changeset, the Changes tab's count */ changes: number; /** the vendors with screens */ mirrored: string[]; /** approvals this World requires before a changeset deploys */ required: number; signsAs: string | null; canWrite: boolean; rooted: string[]; refused: (r: Response) => void; onChanged: () => void }): React.JSX.Element {
+  const [picked, setPicked] = useState<string | null>(null); const [reviewing, setReviewing] = useState(false);
+  const list = sets.state === 'ok' ? [...sets.data.changesets].sort((a, b) => b.createdAt.localeCompare(a.createdAt)) : [];
+  const c = list.find((x) => x.name === sub) ?? list[0];
+  const records = useMemo((): ChangedRecord[] => {
+    const by = new Map<string, ChangedRecord>();
+    for (const x of c ? changesetChanges(c) : []) { const key = `${x.twin}:${x.entry.subject.type}:${x.entry.subject.id}`; const r = by.get(key) ?? { key, twin: x.twin, writes: [] }; r.writes.push(x.entry); by.set(key, r); }
+    return [...by.values()];
+  }, [c]);
+  const record = records.find((r) => r.key === picked) ?? records[0];
+  const log = useDoor<{ entries: Entry[] }>(token, record ? `/-/${name}/log/${record.twin}` : null);
+  const tally = { added: 0, removed: 0, changed: 0 } as Record<string, number>; for (const r of records) tally[changeKind(r.writes).tone] = (tally[changeKind(r.writes).tone] ?? 0) + 1;
+  const sent = c ? sentOf(c) : null; const review = c ? reviewOf(c, required) : null;
   return (
-    <details className="menu branch-picker">
-      <summary><svg className="branch-glyph" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path fill="currentColor" d="M5 3.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm0 2.122a2.25 2.25 0 1 0-1.5 0v5.256a2.25 2.25 0 1 0 1.5 0V9.5h4.25A2.25 2.25 0 0 0 11.5 7.25v-.878a2.25 2.25 0 1 0-1.5 0v.878a.75.75 0 0 1-.75.75H5V5.372ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm6.5-9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z" /></svg><span className="branch-name">{snapshot ? short(name) : (branches?.state === 'ok' && branches.data.checkedOut) || short(live)}</span><span className="badge">{snapshot ? 'snapshot' : 'live'}</span></summary>
-      <div className="popover">
-        <p className="mode">Branch</p>
-        <ul className="branch-list">
-          <li><a href={`${BASE}/${live}`} aria-current={!snapshot ? 'page' : undefined} onClick={(e) => { e.preventDefault(); go(live.split('/')); }}>{short(live)} <span className="mode">live</span></a></li>
-          {snapshot ? <li><a href={`${BASE}/${name}`} aria-current="page" onClick={(e) => e.preventDefault()}>{short(name)} <span className="mode">as of <At iso={snapshot.at} /></span></a></li> : null}
-          {others.map((b) => (
-            <li key={b.name}>{opens(b.name)
-              ? <a href={`${BASE}/${b.name}`} onClick={(e) => { e.preventDefault(); goBranch(b.name, b.name.split('/')); }}>{short(b.name)} <span className="mode">{b.at?.instant ? <>as of <At iso={b.at.instant} /></> : 'copy'}</span></a>
-              : <span className="mode" title="Its token was handed to whoever made it">{short(b.name)}</span>}</li>
-          ))}
-        </ul>
-        {branches?.state === 'ok' && (branches.data.named?.length ?? 0) > 1 ? (
+    <div className="ws-two">
+      <div className="ws-files">
+        <ChangesTabs name={name} view="history" changes={changes} changesets={list.length} />
+        <Pending load={sets} what="the changesets" lines={4} />
+        <ul className="ws-list ws-commits" aria-label="Changesets">{list.map((x) => {
+          const on = c?.name === x.name; const notSent = sentOf(x).label === 'Not sent';
+          return (
+            <li key={x.name}><a href={`${BASE}/${name}/~/changes/changesets/${x.name}`} className={on ? 'on' : undefined} aria-current={on ? 'true' : undefined} onClick={(e) => { e.preventDefault(); setPicked(null); go([...name.split('/'), '~', 'changes', 'changesets', x.name]); }}>
+              <span className="ws-row-text"><b>{titleOf(x)}</b><small>{x.owner ?? (x.cutBy ? callerName(x.cutBy) : 'unrecorded')} • <At iso={x.createdAt} /></small></span>
+              {notSent ? <span className="ws-unpushed" title="Not pushed to the remote yet"><Icon name="arrow-up-from-line" size={16} /></span> : null}
+            </a></li>
+          );
+        })}</ul>
+      </div>
+      <div className="ws-pane-right">
+        {sets.state === 'ok' && !c ? <Empty title="No changesets yet"><p>Cut one from Changes: the cut box is at its foot.</p></Empty> : null}
+        {c && sent && review ? (
           <>
-            <p className="mode">This World's branches</p>
-            <ul className="branch-list">
-              {branches.data.named!.map((b) => (
-                <li key={b.name}><span aria-current={b.name === branches.data.checkedOut ? 'true' : undefined}>{b.name} <span className="mode">{b.name === branches.data.checkedOut ? 'served here' : <code>volter world checkout {b.name}</code>}</span></span></li>
-              ))}
-            </ul>
+            <div className="ws-commit-head">
+              <div className="ws-commit-title">
+                <h3>{titleOf(c)}</h3>
+                <p className="ws-commit-stat"><Icon name="file-diff" size={16} /> {counted(records.length, 'changed record')}{tally.added ? <span className="plus"> +{tally.added}</span> : null}{tally.removed ? <span className="minus"> −{tally.removed}</span> : null}{tally.changed ? <span className="dot"> •{tally.changed}</span> : null}</p>
+                <p className="mode ws-commit-meta"><code>{c.name}</code> · <At iso={c.createdAt} /></p>
+                <p className="ws-commit-who">{[['Owner', c.owner ?? (c.cutBy && /^(token|token:read)$|^key:(?!.* for:)/.test(c.cutBy) ? 'no person: a service’s' : 'unrecorded')], ['Cut by', c.cutBy ? (c.pushedBy && c.applied === null && c.cutBy === 'machine' ? 'the machine it was cut on' : callerName(c.cutBy)) : 'unrecorded'], ...(c.pushedBy ? [['Pushed by', callerName(c.pushedBy)]] : [])].map(([k, v]) => <span key={k}><span className="mode">{k}</span> {v}</span>)}</p>
+                {/* a copy that arrived by a push carries no push outcome of its own; the pushing World's copy does */}
+                {c.pushedBy ? <p className="mode ws-commit-meta">{c.applied === null ? "Owner and cut by are as the World it was cut in recorded them; pushed by is this World's own record." : 'Owner and cut by are this World’s record; pushed by is as the remote recorded it.'}</p> : null}
+              </div>
+              <button type="button" onClick={() => setReviewing(true)} title="Where it went, the checks, the approvals; Verify, Approve and Deploy"><span className={`badge cs-${sent.tone}`}>{sent.label}</span><span className={`badge cs-${review.tone}`}>{review.label}</span>Review…</button>
+            </div>
+            <div className="ws-two inner">
+              <div className="ws-files"><RecordList records={records} {...(record ? { selected: record.key } : {})} onPick={setPicked} label="Records it changed" /></div>
+              <div className="ws-detail">{record ? <RecordDiff record={record} history={log.state === 'ok' ? log.data.entries : log.state === 'error' ? [] : null} {...(mirrored.includes(record.twin) ? { screens: name } : {})} /> : <p className="mode pad">It changes nothing.</p>}</div>
+            </div>
+            <Dialog open={reviewing} onClose={() => setReviewing(false)} title={`Review: ${titleOf(c)}`} wide>
+              <ChangesetPage key={`h:${c.name}`} name={name} token={token} signsAs={signsAs} c={c} canWrite={canWrite} rooted={rooted} refused={refused} onChanged={onChanged} part="head" required={required} />
+              <ChangesetPage key={`r:${c.name}`} name={name} token={token} signsAs={signsAs} c={c} canWrite={canWrite} rooted={rooted} refused={refused} onChanged={onChanged} part="review" required={required} />
+            </Dialog>
           </>
         ) : null}
-        {branches?.state === 'ok' && others.length === 0 && !snapshot && (branches.data.named?.length ?? 0) <= 1 ? <p className="mode">No branches yet. “View an earlier moment…” opens one.</p> : null}
       </div>
-    </details>
+    </div>
   );
 }
 
-/** THE BRANCH'S OVERVIEW, as Neon's branch Overview is: its services in a table (each vendor with its state and what it
- *  holds), then its monitoring: here the writes the World recorded, hour by hour over the last day, by vendor. */
-function BranchOverview({ name, token, map, vendors, tick }: { name: string; token: string; map: Load<WorldMap>; vendors: string[]; tick: number }): React.JSX.Element {
-  const recent = useDoor<Timeline>(token, `/-/${name}/timeline?limit=500`, Math.floor(tick / 3));
-  const rows = map.state === 'ok' ? map.data.twins : [];
-  const open = (parts: string[]) => (e: React.MouseEvent): void => { e.preventDefault(); go([...name.split('/'), ...parts]); };
-  // 24 hourly buckets ending now, each counting the entries that happened in it, per vendor
-  const now = Date.now(); const hours = 24; const bucket = 3_600_000;
-  const entries = recent.state === 'ok' ? recent.data.entries : [];
-  const series = vendors.map((v) => {
-    const counts = new Array<number>(hours).fill(0);
-    for (const p of entries) { if (p.twin !== v) continue; const t = Date.parse(p.entry.occurredAt); const i = hours - 1 - Math.floor((now - t) / bucket); if (i >= 0 && i < hours) counts[i]! += 1; }
-    return { vendor: v, counts };
-  });
-  const totals = new Array<number>(hours).fill(0).map((_, i) => series.reduce((n, s) => n + s.counts[i]!, 0));
-  const peak = Math.max(1, ...totals);
-  const W = 720; const H = 160; const bw = W / hours;
-  const hues = ['var(--volter-data-base)', '#7c5cff', '#e3572b', '#1f9d6b', '#d9a400', '#2b7de3', '#c2417e', '#6b7280', '#0ea5a4'];
+/** EVENTS, as Proxyman lists traffic: the vendors as tabs over a dense table of every write, newest first (when, vendor,
+ *  what, the record, who, its receipt); the selected one under it, the request it came from beside what it wrote. */
+function EventsView({ name, token, vendors, vendor, tick }: { name: string; token: string; vendors: string[]; vendor?: string; tick: number }): React.JSX.Element {
+  const [limit, setLimit] = useState(PAGE * 4); const [op, setOp] = useState(''); const [picked, setPicked] = useState<string | null>(null);
+  const load = useDoor<Timeline>(token, `/-/${name}/timeline?limit=${limit}${vendor ? `&twin=${encodeURIComponent(vendor)}` : ''}`, Math.floor(tick / 2));
+  const all = load.state === 'ok' ? foldLanded(load.data.entries) : [];
+  const ops = [...new Set(all.map((p) => said(p.entry).what))].sort();
+  const rows = all.filter((p) => !op || said(p.entry).what === op);
+  const sel = rows.find((p) => keyOf(p) === picked) ?? rows[0];
+  const to = (v?: string) => (e: React.MouseEvent): void => { e.preventDefault(); setPicked(null); go([...name.split('/'), '~', 'events', ...(v ? [v] : [])]); };
+  const body = sel?.entry.input && typeof sel.entry.input === 'object' ? (sel.entry.input as { body?: unknown }).body : undefined;
+  const t = sel ? traceOf(sel.entry.traceparent) : null; const settled = sel ? settledOf(sel) : null; const usage = sel ? usageOf(sel.entry) : [];
   return (
-    <>
-      <div className="block">
-        <table className="dense services" aria-label="Vendors on this branch">
-          <thead><tr><th>Vendor</th><th>Details</th><th /></tr></thead>
-          <tbody>{vendors.map((v) => {
-            const t = rows.find((x) => x.twin === v);
-            const top = [...(t?.resources ?? [])].filter((r) => r.count > 0).sort((a, b) => b.count - a.count);
+    <div className="ws-events">
+      <div className="ws-filterbar">
+        <nav className="ws-seg" aria-label="Vendor">
+          <a href={`${BASE}/${name}/~/events`} className={!vendor ? 'on' : undefined} aria-current={!vendor ? 'page' : undefined} onClick={to()}>All</a>
+          {vendors.map((v) => <a key={v} href={`${BASE}/${name}/~/events/${v}`} className={vendor === v ? 'on' : undefined} aria-current={vendor === v ? 'page' : undefined} onClick={to(v)}><Mark vendor={v} />{vendorName(v)}</a>)}
+        </nav>
+        <select aria-label="Operation" value={op} onChange={(e) => { setOp(e.target.value); setPicked(null); }}><option value="">Every operation</option>{ops.map((o) => <option key={o} value={o}>{o}</option>)}</select>
+      </div>
+      <div className="ws-grid-wrap">
+        <Pending load={load} what="the events" lines={6} />
+        <table className="ws-grid" aria-label="Events">
+          <thead><tr><th>Time</th><th>Vendor</th><th>What</th><th>Record</th><th>By</th><th>Receipt</th></tr></thead>
+          <tbody>{rows.map((p) => {
+            const s = said(p.entry); const st = settledOf(p); const on = sel && keyOf(p) === keyOf(sel);
             return (
-              <tr key={v}>
-                <td><span className="vendor-cell"><Mark vendor={v} /><a href={`${BASE}/${name}/~/vendors/${v}`} onClick={open(['~', 'vendors', v])}>{vendorName(v)}</a> <span className={t?.root ? 'badge rooted' : 'badge'}>{t?.root ? 'connected' : 'stand-in'}</span></span></td>
-                <td className="mode">{top.length ? top.slice(0, 4).map((r) => counted(r.count, r.type)).join(' · ') : 'nothing yet'}</td>
-                <td className="num">{t?.mirror ? <a href={`${BASE}/${name}/~/vendors/${v}`} onClick={open(['~', 'vendors', v])}>Screens</a> : null}</td>
+              <tr key={keyOf(p)} className={on ? 'on' : undefined} aria-selected={on} onClick={() => setPicked(keyOf(p))}>
+                <td className="mono"><At iso={p.entry.occurredAt} time /></td>
+                <td><span className="vendor-cell"><Mark vendor={p.twin} />{vendorName(p.twin)}</span></td>
+                <td><b>{s.what}</b></td>
+                <td className="ws-cell-clip">{s.label ? `“${s.label}”` : <code>{shown(p.entry)}</code>}</td>
+                <td className="mode">{whoDid(p.entry, p.caller)}</td>
+                <td>{st ? <span className={st.bad ? 'badge cs-bad' : st.status === 'deployed' ? 'badge cs-done' : 'badge'}>{st.status}</span> : <span className="mode">{standing(p.entry)}</span>}</td>
               </tr>
             );
           })}</tbody>
         </table>
       </div>
-      <div className="block chart-block">
-        <div className="block-head"><h3>Activity, last 24 hours</h3><a href={`${BASE}/${name}/~/activity`} onClick={open(['~', 'activity'])}>All activity</a></div>
-        <Pending load={recent} what="the activity" />
-        {recent.state === 'ok' ? (
-          <div className="pad">
-            <svg viewBox={`0 0 ${W} ${H + 22}`} className="chart" role="img" aria-label={`Writes per hour over the last day: ${totals.reduce((a, b) => a + b, 0)} in all`}>
-              {[0.5, 1].map((f) => <line key={f} x1={0} x2={W} y1={H - f * H} y2={H - f * H} className="grid" />)}
-              <line x1={0} x2={W} y1={H} y2={H} className="axis" />
-              {totals.map((_, i) => {
-                let y = H;
-                return <g key={i}>{series.map((s, si) => { const h = (s.counts[i]! / peak) * (H - 8); if (h === 0) return null; y -= h; return <rect key={s.vendor} x={i * bw + 2} y={y} width={bw - 4} height={h} fill={hues[si % hues.length]} rx={2}><title>{`${vendorName(s.vendor)}: ${s.counts[i]} in the hour ${hours - 1 - i === 0 ? 'now' : `${hours - 1 - i}h ago`}`}</title></rect>; })}</g>;
-              })}
-              {[0, 6, 12, 18, 23].map((i) => <text key={i} x={i * bw + bw / 2} y={H + 16} className="tick">{hours - 1 - i === 0 ? 'now' : `-${hours - 1 - i}h`}</text>)}
-            </svg>
-            <ul className="legend">{series.filter((s) => s.counts.some((c) => c > 0)).map((s) => <li key={s.vendor}><span className="swatch" style={{ background: hues[vendors.indexOf(s.vendor) % hues.length] }} />{vendorName(s.vendor)} <span className="mode">{s.counts.reduce((a, b) => a + b, 0)}</span></li>)}</ul>
-            {totals.every((n) => n === 0) ? <p className="mode">Nothing was written in the last day. Run your app in this World and its calls show up here.</p> : null}
-          </div>
+      <div className="ws-event-detail">
+        {sel ? (
+          <>
+            <div className="ws-event-line"><span className="badge">{opOf(sel.entry)}</span>{settled ? <span className={settled.bad ? 'badge cs-bad' : 'badge cs-good'}>{settled.status}</span> : null}<code>{sel.entry.subject.type}:{shown(sel.entry)}</code><span className="mode"><At iso={sel.entry.occurredAt} /> · {whoDid(sel.entry, sel.caller)}</span>{t ? <a href={`${BASE}/${name}/~/trace/${t.trace}`} onClick={(e) => { e.preventDefault(); go([...name.split('/'), '~', 'trace', t.trace]); }}>Its trace →</a> : null}</div>
+            <div className="ws-event-panes">
+              <div role="region" aria-label="The request"><h4>Request</h4>{body !== undefined ? <RequestBody body={body} /> : <p className="mode">No request body: the World or the vendor wrote it.</p>}{usage.length ? <><h4>Usage</h4><dl className="fields">{usage.map(([k, v]) => <React.Fragment key={k}><dt>{k}</dt><dd>{v}</dd></React.Fragment>)}</dl></> : null}</div>
+              <div role="region" aria-label="What it wrote"><h4>Written</h4><Fields fields={sel.entry.fields} /><h4>{sel.copies.length ? 'Receipts' : 'Receipt'}</h4><p className="mode">{sel.copies.length ? sel.copies.map((c) => c.entry.receipt?.status ?? 'landed copy').join(' · ') : receiptOf(sel.entry)}</p></div>
+            </div>
+          </>
+        ) : <p className="mode pad">Nothing written here yet.</p>}
+      </div>
+      <div className="ws-foot mode"><span>{sel ? `${rows.indexOf(sel) + 1} of ${rows.length}` : rows.length} events{vendor ? ` at ${vendorName(vendor)}` : ''}</span>{load.state === 'ok' && load.data.next ? <button type="button" onClick={() => setLimit((l) => l + PAGE * 4)}>Load older</button> : null}</div>
+    </div>
+  );
+}
+
+/** A TRACE, as Jaeger opens one: what it is and how long it took over every write it made, each a row (the vendor and
+ *  what it did) with its moment on the trace's own timeline; the selected one opens under its row. */
+function TraceView({ name, token, id }: { name: string; token: string; id: string }): React.JSX.Element {
+  const valid = /^[0-9a-f]{32}$/.test(id);
+  const load = useDoor<Timeline>(token, valid ? `/-/${name}/timeline?trace=${id}&limit=500` : null);
+  const steps = load.state === 'ok' ? [...load.data.entries].sort((a, b) => -newestFirst(a, b)) : [];
+  const [open, setOpen] = useState<string | null>(null);
+  const t0 = steps[0] ? Date.parse(steps[0].entry.occurredAt) : 0;
+  const span = steps.length ? Math.max(1, Date.parse(steps[steps.length - 1]!.entry.occurredAt) - t0) : 1;
+  const lanes = [...new Set(steps.map((s) => s.twin))];
+  return (
+    <div className="ws-sheet ws-trace">
+      <p className="crumbs-line"><a href={`${BASE}/${name}/~/events`} onClick={(e) => { e.preventDefault(); go([...name.split('/'), '~', 'events']); }}><Icon name="arrow-left" size={16} /> Events</a></p>
+      <h2>{steps[0] ? `${said(steps[0].entry).what} …` : 'Trace'} <code className="mode">{id.slice(0, 12)}</code></h2>
+      {!valid ? <p role="alert">{id ? `${id} is not a trace id` : 'No trace named'}: a W3C trace id is 32 hex characters.</p> : <Pending load={load} what="the trace" />}
+      {steps.length ? <p className="ws-trace-meta">Started <b><At iso={steps[0]!.entry.occurredAt} /></b> · Took <b>{span} ms</b> · Vendors <b>{lanes.map(vendorName).join(', ')}</b> · Writes <b>{steps.length}</b></p> : null}
+      {load.state === 'ok' && steps.length === 0 ? <Empty title="Nothing in this World carries this trace"><p>An app instrumented with OpenTelemetry sends a <code>traceparent</code> with each call, and every write that call makes keeps it, so one click reads across every vendor.</p></Empty> : null}
+      {steps.length ? (
+        <div className="ws-spans" role="table" aria-label="The trace's writes">
+          <div className="ws-span head" role="row"><span role="columnheader">Vendor and what</span><span role="columnheader" className="ws-ticks"><span>0 ms</span><span>{Math.round(span / 2)} ms</span><span>{span} ms</span></span></div>
+          {steps.map((x) => {
+            const ms = Date.parse(x.entry.occurredAt) - t0; const k = keyOf(x); const s = said(x.entry);
+            return (
+              <React.Fragment key={k}>
+                <div className={open === k ? 'ws-span on' : 'ws-span'} role="row" onClick={() => setOpen(open === k ? null : k)}>
+                  <span role="cell" className="ws-span-name"><Mark vendor={x.twin} /><b>{vendorName(x.twin)}</b> <span className="mode">{s.what}{s.label ? ` “${s.label}”` : ''}</span></span>
+                  <span role="cell" className="ws-span-track"><span className="ws-span-dot" style={{ left: `${(ms / span) * 100}%` }} /><span className="ws-span-at mode" style={{ left: `${(ms / span) * 100}%` }}>+{ms} ms</span></span>
+                </div>
+                {open === k ? <div className="ws-span-detail"><p className="mode"><code>{opOf(x.entry)}</code> on <code>{x.entry.subject.type}:{shown(x.entry)}</code> · {whoDid(x.entry, x.caller)} · {standing(x.entry)}</p><Fields fields={x.entry.fields} /></div> : null}
+              </React.Fragment>
+            );
+          })}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+/** A VENDOR'S PLACE, as TablePlus opens a database: what it stores by type down the left, the chosen type's records as
+ *  rows, the selected record's fields at the right; its own screens and its events a click away. */
+function VendorView({ name, token, vendor, mirrored, tick }: { name: string; token: string; vendor: string; mirrored: boolean; tick: number }): React.JSX.Element {
+  const tree = useDoor<{ tree: Array<Record<string, unknown> & { type: string; id: string }> }>(token, `/-/${name}/checkpoint/${vendor}`, Math.floor(tick / 6));
+  const rows = tree.state === 'ok' ? tree.data.tree.filter((r) => r.deleted !== true) : [];
+  const types = [...new Set(rows.map((r) => r.type))].map((t) => ({ type: t, count: rows.filter((r) => r.type === t).length })).sort((a, b) => Number(a.type.startsWith('_')) - Number(b.type.startsWith('_')) || kindOf(a.type).localeCompare(kindOf(b.type)));
+  const [type, setType] = useState<string | null>(null); const [picked, setPicked] = useState<string | null>(null);
+  const shownType = types.some((t) => t.type === type) ? type! : types[0]?.type;
+  const mine = rows.filter((r) => r.type === shownType);
+  const sel = mine.find((r) => r.id === picked) ?? mine[0];
+  // the columns a person reads a row by: its id, the first of its naming fields, a few short ones, and when it changed
+  const NAMING = ['name', 'email', 'title', 'text', 'description', 'subject', 'amount', 'percent_off', 'unit_amount', 'currency', 'status', 'channel', 'customer', 'product'];
+  const SKIP = new Set(['id', 'type', 'object', 'livemode', 'created', 'updated', 'updatedAt', 'deleted']);
+  const scalar = (k: string): boolean => !SKIP.has(k) && mine.some((r) => r[k] !== undefined && r[k] !== null && typeof r[k] !== 'object');
+  const keys = [...new Set(mine.flatMap((r) => Object.keys(r)))];
+  const cols = [...NAMING.filter(scalar), ...keys.filter((k) => !NAMING.includes(k) && scalar(k))].slice(0, 4);
+  return (
+    <div className="ws-table-app">
+      <nav className="ws-tables" aria-label={`${vendorName(vendor)}'s records`}>
+        <div className="ws-list-head"><span className="vendor-cell"><Mark vendor={vendor} />{vendorName(vendor)}</span></div>
+        <Pending load={tree} what="what it stores" lines={4} />
+        <p className="menu-label">Stores</p>
+        {types.map((t) => <a key={t.type} href={`#${t.type}`} className={shownType === t.type ? 'on' : undefined} aria-current={shownType === t.type ? 'true' : undefined} onClick={(e) => { e.preventDefault(); setType(t.type); setPicked(null); }}><Icon name="table-2" size={16} /><span>{kindOf(t.type)}</span><span className="count">{t.count}</span></a>)}
+        <p className="menu-label">Also</p>
+        <a href={`${BASE}/${name}/~/events/${vendor}`} onClick={(e) => { e.preventDefault(); go([...name.split('/'), '~', 'events', vendor]); }}><Icon name="activity" size={16} /><span>Its events</span></a>
+        {mirrored ? <a href={`${BASE}/${name}/~/screens/${vendor}`} onClick={(e) => { e.preventDefault(); go([...name.split('/'), '~', 'screens', vendor]); }}><Icon name="monitor" size={16} /><span>Its screens</span></a> : null}
+      </nav>
+      <div className="ws-grid-wrap">
+        {tree.state === 'ok' && types.length === 0 ? <Empty title={`${vendorName(vendor)} stores nothing yet`}><p>What your app makes there shows here, by type.</p></Empty> : null}
+        {mine.length ? (
+          <table className="ws-grid" aria-label={`${kindOf(shownType ?? '')} records`}>
+            <thead><tr><th>id</th>{cols.map((c) => <th key={c}>{c}</th>)}<th>updated</th></tr></thead>
+            <tbody>{mine.map((r) => (
+              <tr key={r.id} className={sel?.id === r.id ? 'on' : undefined} aria-selected={sel?.id === r.id} onClick={() => setPicked(r.id)}>
+                <td><code>{r.id}</code></td>
+                {cols.map((c) => <td key={c} className="ws-cell-clip">{r[c] === undefined || r[c] === null ? <span className="mode">—</span> : String(r[c])}</td>)}
+                <td className="mode">{typeof r.updatedAt === 'string' ? <At iso={r.updatedAt} /> : '—'}</td>
+              </tr>
+            ))}</tbody>
+          </table>
         ) : null}
       </div>
+      <aside className="ws-record" aria-label="The selected record">
+        {sel ? (
+          <>
+            <div className="ws-list-head"><span>{kindOf(sel.type)}</span><code>{sel.id}</code></div>
+            <dl className="ws-record-fields">{Object.entries(sel).filter(([k]) => k !== 'type' && k !== 'id').map(([k, v]) => <React.Fragment key={k}><dt>{k}</dt><dd><Value v={v} /></dd></React.Fragment>)}</dl>
+          </>
+        ) : null}
+      </aside>
+      <div className="ws-foot mode">{sel ? `${mine.indexOf(sel) + 1} of ${counted(mine.length, kindOf(shownType ?? 'record'))}` : ''}</div>
+    </div>
+  );
+}
+
+/** A VENDOR'S SCREENS: its own site over this World's state (the twin's mirror), the whole pane; what it holds and the
+ *  way to its records or a tab of its own above it. */
+function ScreenView({ name, vendor, holding, session, retry, show }: { name: string; vendor: string; holding: string; session: MirrorSession; retry: () => void; /** a record to open the screens on (`<type>:<id>`): the vendor's screens find where they show it */ show?: string }): React.JSX.Element {
+  return (
+    <div className="ws-screen">
+      <div className="ws-screen-bar">
+        <span className="vendor-cell"><Mark vendor={vendor} /><b>{vendorName(vendor)}</b></span>
+        <span className="mode">{holding}</span>
+        <a href={`${BASE}/${name}/~/vendors/${vendor}`} onClick={(e) => { e.preventDefault(); go([...name.split('/'), '~', 'vendors', vendor]); }}><Icon name="table-2" size={16} />Its records</a>
+        <a href={mirrorUrl(name, vendor)} target="_blank" rel="noopener noreferrer"><Icon name="external-link" size={16} />New tab</a>
+      </div>
+      {session.state === 'ok' && session.scope === 'read' ? <p className="mode ws-screens-note">You are looking read only: the screens browse, and refuse changes.</p> : null}
+      {session.state === 'pending' ? <p className="mode ws-screens-note" role="status">Opening…</p> : null}
+      {session.state === 'error' ? <p role="alert" className="ws-screens-note">The World did not open its screens: {session.error} <button type="button" onClick={retry}>Try again</button></p> : null}
+      {session.state === 'ok' ? <iframe key={`${vendor}:${show ?? ''}`} title={`${vendorName(vendor)}, as this World shows it`} src={`${mirrorUrl(name, vendor)}${show ? `?show=${encodeURIComponent(show)}` : ''}`} /> : null}
+    </div>
+  );
+}
+
+/** CHANGESETS, as GitHub Desktop's Repository Settings › Git Config says how a repository commits: whom a changeset cut
+ *  here is recorded as, and what makes one ready to deploy. Each rule is the World's as it stands; where one is set
+ *  elsewhere, the pane says where. */
+function ChangesetsPane({ name, token, who, scope }: { name: string; token: string; who: { local: boolean; person: string | null; admin: boolean }; scope: Scope }): React.JSX.Element {
+  const [version, setVersion] = useState(0);
+  const twins = useDoor<{ twins: Twin[] }>(token, `/-/${name}/twins`);
+  const rules = useDoor<{ changesets: ChangesetRules }>(token, `/-/${name}/rules`, version);
+  const held = rules.state === 'ok' ? rules.data.changesets : null;
+  const [approvals, setApprovals] = useState<number | null>(null); const [summary, setSummary] = useState<'required' | 'generated' | null>(null);
+  const [busy, setBusy] = useState(false); const [log, setLog] = useState<Said[]>([]);
+  const nowApprovals = approvals ?? held?.approvals ?? 1; const nowSummary = summary ?? held?.summary ?? 'required';
+  const changed = held !== null && (nowApprovals !== (held.approvals ?? 1) || nowSummary !== (held.summary ?? 'required'));
+  const say = (ok: boolean, text: string): void => { setLog((l) => [{ ok, text, at: new Date().toISOString(), n: ++saidCount }, ...l].slice(0, 3)); if (!ok) toast(text, 'error'); };
+  const save = async (e: React.FormEvent): Promise<void> => {
+    e.preventDefault(); setBusy(true);
+    try {
+      const r = await door(token, `/-/${name}/rules`, { method: 'PUT', body: JSON.stringify({ changesets: { approvals: nowApprovals, summary: nowSummary } }) });
+      if (!r.ok) { say(false, `Save: ${await failure(r)}`); return; }
+      say(true, `Saved: ${nowApprovals === 0 ? 'no approval' : counted(nowApprovals, 'approval')} before a deploy; a summary ${nowSummary === 'required' ? 'required' : 'generated when none is given'}.`);
+      setApprovals(null); setSummary(null); setVersion((v) => v + 1);
+    } finally { setBusy(false); }
+  };
+  const POLICY: Record<string, string> = { gated: 'a person deploys an approved changeset', auto: 'a push deploys at once', hold: 'nothing deploys' };
+  const as = who.person ? <><b>{who.person}</b>{who.local ? ', signed in on this machine' : ''}</> : who.local ? <><b>this machine</b>: no one is signed in here, so no person owns them until they are pushed by one</> : who.admin ? <><b>the host's admin</b></> : <><b>this token</b>, a service</>;
+  const rooted = twins.state === 'ok' ? twins.data.twins.filter((t) => t.root?.url) : [];
+  const off = scope !== 'write' ? 'This session reads the World; it changes no rules' : null;
+  return (
+    <>
+      <h3 className="settings-head">Changesets</h3>
+      <p className="mode">This World's rules, kept with it and shared by everyone who works in it. A person or the World's token changes them; a key never does, so an agent cannot relax the review its own changes go through.</p>
+      <Pending load={rules} what="the rules" lines={2} />
+      <form className="ws-rules" onSubmit={(e) => void save(e)} aria-label="Changeset rules">
+        <div className="ws-rule">
+          <h4>Recorded as</h4>
+          <p>What you cut here is recorded as {as}. An agent's or an app's key cuts as itself, for the person it was made for; a World's token cuts as a service.</p>
+        </div>
+        <div className="ws-rule">
+          <h4>A cut's summary</h4>
+          <fieldset className="choice" disabled={Boolean(off) || held === null}>
+            <label className="check"><input type="radio" name="summary" checked={nowSummary === 'required'} onChange={() => setSummary('required')} /> <span>Required: whoever cuts says what it does and why</span></label>
+            <label className="check"><input type="radio" name="summary" checked={nowSummary === 'generated'} onChange={() => setSummary('generated')} /> <span>Generated from its changes when none is given</span></label>
+          </fieldset>
+          <p className="mode">Either way a cut takes every change not yet in a changeset: there is no staging.</p>
+        </div>
+        <div className="ws-rule">
+          <h4>Ready to deploy</h4>
+          <ul className="ws-rule-list"><li><Icon name="check" size={16} />Verified: replayed in a throwaway World, the World's checks passing</li></ul>
+          <label className="ws-rule-row"><span>Approved by</span>
+            <select value={nowApprovals} onChange={(e) => setApprovals(Number(e.target.value))} disabled={Boolean(off) || held === null} aria-label="Approvals required">
+              {[0, 1, 2, 3, 4, 5].map((n) => <option key={n} value={n}>{n === 0 ? 'no one: verified is enough' : n === 1 ? '1 person' : `${n} different people`}</option>)}
+            </select>
+            <span className="mode">for its contents as they stand</span>
+          </label>
+        </div>
+        <div className="ws-rule">
+          <h4>Deploys to</h4>
+          {twins.state === 'ok' && rooted.length === 0 ? <p className="mode">No vendor here is connected to its real service, so nothing deploys from this World.</p> : null}
+          {rooted.length ? <ul className="ws-rule-list">{rooted.map((t) => <li key={t.twin}><Mark vendor={t.twin} />{vendorName(t.twin)}: {POLICY[(t.root as { deploy?: string }).deploy ?? 'gated'] ?? 'gated'}</li>)}</ul> : null}
+          <p className="mode"><a href={`${BASE}/${name}/~/settings/services`} onClick={(e) => { e.preventDefault(); go([...name.split('/'), '~', 'settings', 'services']); }}>Real services</a> sets each vendor's deploy policy.</p>
+        </div>
+        <Narration log={log} name={name} />
+        <div className="row-actions">
+          <button type="submit" className="primary" disabled={Boolean(off) || busy || !changed} title={off ?? undefined}>{busy ? 'Saving…' : 'Save'}</button>
+          {changed ? <button type="button" onClick={() => { setApprovals(null); setSummary(null); }}>Cancel</button> : null}
+          {off ? <span className="mode">{off}.</span> : null}
+        </div>
+      </form>
     </>
   );
 }
 
-/** THE DASHBOARD, as the references open a project: Vercel leads with the live deployment (its preview, its address),
- *  Neon with how to connect and the branches. A World's live preview is its vendors' own screens; beside them, how an
- *  app connects and the branches; under them, what just happened. Counts sit with what they count, not in a row. */
-const THUMB_SCALE = 0.2;
-function WorldOverview({ name, token, map, vendors, twins, session, branches, canWrite, tick, snapshotOf }: { name: string; token: string; map: Load<WorldMap>; vendors: string[]; twins: Load<{ twins: Twin[] }>; session: MirrorSession; branches: Load<BranchesDoor> | null; canWrite: boolean; tick: number; /** the World this one is a snapshot of, when it is one */ snapshotOf?: string }): React.JSX.Element {
-  const diff = useDoor<Diff>(token, `/-/${name}/diff`, Math.floor(tick / 2));
-  const recent = useDoor<Timeline>(token, `/-/${name}/timeline?limit=8`, tick);
-  const rows = map.state === 'ok' ? map.data.twins : [];
-  const latest = recent.state === 'ok' ? recent.data.entries : [];
-  const screens = twins.state === 'ok' ? twins.data.twins.filter((t) => t.mirror).map((t) => t.twin) : [];
-  const open = (parts: string[]) => (e: React.MouseEvent): void => { e.preventDefault(); go([...name.split('/'), ...parts]); };
-  const heldOf = (v: string): string => { const top = [...(rows.find((x) => x.twin === v)?.resources ?? [])].filter((r) => r.count > 0).sort((a, b) => b.count - a.count); return top.length ? top.slice(0, 2).map((r) => counted(r.count, r.type)).join(' · ') : 'empty'; };
-  const changes = diff.state === 'ok' ? diff.data.changes.length : null;
-  const list = branches?.state === 'ok' ? branches.data.branches : [];
+/** ACCOUNT, as GitHub Desktop's Settings › Accounts is: who this page is for (this machine, a person the platform signed in,
+ *  the host's admin, a link or key, or a snapshot's reader), what it may do here, and the way out where there is one. */
+function AccountPane({ who, scope, snapshot, portal: platform, onSignOut }: { who: { local: boolean; person: string | null; admin: boolean }; scope: Scope; snapshot: Snapshot | null; portal: string; onSignOut: () => void }): React.JSX.Element {
+  const access = scope === 'write' ? 'Reads and changes this World' : scope === 'read' ? 'Reads this World; changes nothing' : '…';
+  const [title, line] = snapshot ? ['A snapshot', `of ${snapshot.parent}, read only`]
+    : who.local && who.person ? [who.person, 'Signed in on this machine: this World is served here, and acts as you']
+    : who.local ? ['This machine', 'Served here, with no one signed in: what you do is recorded as this machine']
+    : who.person ? [who.person, platform ? `Signed in through ${new URL(platform).host}` : 'Signed in']
+    : who.admin ? ["The host's admin", 'Opened with the host admin token: every World it serves']
+    : ['A link or key', 'Opened with a token for this World'];
+  return (
+    <>
+      <h3 className="settings-head">Account</h3>
+      <div className="ws-account">
+        <span className="ws-account-face" aria-hidden="true"><Icon name={who.person ? 'user' : who.local ? 'monitor' : snapshot ? 'clock' : 'key-round'} size={20} /></span>
+        <div className="cell-label"><b>{title}</b><small>{line}</small><small>{access}</small></div>
+      </div>
+      {who.local || snapshot ? null : (
+        <p><button type="button" onClick={onSignOut}><Icon name="log-out" size={16} />{who.person ? 'Sign out' : who.admin ? 'Sign out of the host' : 'Use another token'}</button></p>
+      )}
+      {platform && who.person ? <p className="mode">Your profile, orgs and keys are on <a href={`${platform}/`}>{new URL(platform).host}</a>.</p> : null}
+    </>
+  );
+}
+
+/** THE WORKSPACE: the World this machine serves, as a desktop git app opens a repository (docs/contributing/console.md,
+ *  On this machine). One short toolbar, as TablePlus's and Proxyman's are: the World and the branch served here at its
+ *  left, where this is in its middle (the World, the branch, the origin and what waits for it, the World's clock), Pull,
+ *  Push and Settings at its right. A sidebar of places (Changes, History, Events; the vendors; the remote) beside the place
+ *  chosen. Settings and Branches open as windows over it, as GitHub Desktop's do. */
+function Workspace({ name, token, view, sub, arg, win, who, snapshot, onReturn, onSignOut, worlds, session, retry, twins, map, branches, clock, canWrite, refused, signsAs, opens, tick, admin, onRemoved, onClock, scope }: { name: string; token: string; view: WorkspaceView; sub?: string; arg?: string; win: WorkspaceWindow; /** who is here: this machine, a person signed in, the host's admin, a link or key */ who: { local: boolean; person: string | null; admin: boolean }; /** a snapshot in view: read only, with the way back to live */ snapshot: Snapshot | null; onReturn: (s: Snapshot) => Promise<void>; onSignOut: () => void; /** the Worlds this page opens (the World menu's switcher) */ worlds: string[]; /** the World's session, which vendors' screens read with, and its retry */ session: MirrorSession; retry: () => void; twins: Load<{ twins: Twin[] }>; map: Load<WorldMap>; branches: Load<BranchesDoor> | null; clock: Load<Clock>; canWrite: boolean; refused: (r: Response) => void; signsAs: string | null; opens: (name: string) => boolean; tick: number; admin: string | null; onRemoved: () => void; onClock: () => void; scope: Scope }): React.JSX.Element {
+  const remote = usePushPull(name, token, tick, refused);
+  const [version, setVersion] = useState(0);
+  const every = version * 100_000 + Math.floor(tick / 2);
+  const diff = useDoor<Diff>(token, `/-/${name}/diff`, every);
+  const sets = useDoor<{ changesets: ChangesetView[] }>(token, `/-/${name}/changesets`, every);
+  const rules = useDoor<{ changesets: ChangesetRules }>(token, `/-/${name}/rules`, every);
+  const [picked, setPicked] = useState<string | null>(null);
+  const to = (parts: string[]) => (e?: React.MouseEvent): void => { e?.preventDefault(); go([...name.split('/'), '~', ...parts]); };
+  const vendors = twins.state === 'ok' ? twins.data.twins.map((t) => t.twin) : [];
+  const mirrored = map.state === 'ok' ? map.data.twins.filter((t) => t.mirror).map((t) => t.twin) : [];
+  const rooted = map.state === 'ok' ? map.data.twins.filter((t) => t.root).map((t) => t.twin) : [];
+  const held = (v: string): number => (map.state === 'ok' ? (map.data.twins.find((x) => x.twin === v)?.resources ?? []).reduce((n, r) => n + r.count, 0) : 0);
+  const served = (branches?.state === 'ok' && branches.data.checkedOut) || name.split('/')[1]!;
+
+  const records = useMemo((): ChangedRecord[] => {
+    if (diff.state !== 'ok') return [];
+    const by = new Map<string, ChangedRecord>();
+    for (const c of diff.data.changes) { const key = `${c.twin}:${c.entry.subject.type}:${c.entry.subject.id}`; const r = by.get(key) ?? { key, twin: c.twin, writes: [] }; r.writes.push(c.entry); by.set(key, r); }
+    return [...by.values()];
+  }, [diff]);
+  const record = records.find((r) => r.key === picked) ?? records[0];
+  const log = useDoor<{ entries: Entry[] }>(token, view === 'changes' && record ? `/-/${name}/log/${record.twin}` : null, every);
+  const writes = diff.state === 'ok' ? diff.data.changes.length : 0;
+  const waiting = remote.waiting.length;
+  const there = remote.there;
+  const origin = remote.origin.state === 'ok' ? remote.origin.data.origin : null;
+  const off = !canWrite ? 'This session reads the World; it changes nothing' : !there ? 'No remote: name one in Settings › Remote' : null;
+  const place = (on: boolean, icon: React.ReactNode, label: string, href: string, onClick: (e: React.MouseEvent) => void, count?: string): React.JSX.Element => (
+    <a href={`${BASE}/${name}/~/${href}`} className={on ? 'on' : undefined} aria-current={on ? 'page' : undefined} onClick={onClick}>{icon}<span>{label}</span>{count ? <span className="count">{count}</span> : null}</a>
+  );
+  const closeMenu = (e: React.MouseEvent): void => { (e.currentTarget as HTMLElement).closest('details')?.removeAttribute('open'); };
+
   return (
-    <div className="dash">
-      <section className="block dash-screens" aria-labelledby="screens-head">
-        <div className="block-head">
-          <h3 id="screens-head">Screens <span className="badge live">live</span></h3>
-          <span className="mode">{vendors.length} vendor{vendors.length === 1 ? '' : 's'}{changes !== null ? <> · <a href={`${BASE}/${name}/~/changes`} onClick={open(['~', 'changes'])}>{changes} change{changes === 1 ? '' : 's'} since start</a></> : null}</span>
-          <a className="button" href={`${BASE}/${name}/~/canvas`} onClick={open(['~', 'canvas'])}>Open all screens</a>
+    <div className="ws">
+      <div className="ws-bar" role="toolbar" aria-label={`${name} toolbar`}>
+        <div className="ws-left">
+          <Brand href={`${BASE}/${name}`} onClick={(e) => { e.preventDefault(); to(['changes'])(); }} />
+          <details className="menu ws-pick">
+            <summary title="This World"><Icon name="globe" size={16} /><span className="ws-pick-label"><small>World</small><b>{name}</b></span><Icon name="chevron-down" size={16} /></summary>
+            <div className="popover menu-list ws-world-menu">
+              {who.local ? null : (
+                <>
+                  <p className="menu-label">Worlds</p>
+                  {worlds.map((w) => <a key={w} href={`${BASE}/${w}`} className={w === name ? 'on' : undefined} onClick={(e) => { e.preventDefault(); closeMenu(e); go(w.split('/')); }}>{w === name ? <Icon name="check" size={16} /> : <Icon name="globe" size={16} />}{w}</a>)}
+                  <a href={`${home() && home() !== ORIGIN ? home() : ''}${BASE}/`} onClick={(e) => { if (home() && home() !== ORIGIN) return; e.preventDefault(); closeMenu(e); go([]); }}><Icon name="layout-grid" size={16} />All Worlds{portal() ? ` on ${new URL(portal()).host}` : ''}</a>
+                  <hr />
+                </>
+              )}
+              <p className="menu-label">Connect an app</p>
+              {portal() ? (
+                <>
+                  <p className="ws-menu-text">Point your app's SDKs here with a key made on the platform; its calls to these vendors land in this World:</p>
+                  <pre>{WORLDS}/{name}/&lt;vendor&gt;</pre>
+                  <CopyAgentPrompt text={agentPrompt({ platform: portal(), world: name })} />
+                </>
+              ) : !who.local ? (
+                <>
+                  <p className="ws-menu-text">Point your app's SDKs here with a key from Settings › Access; its calls to these vendors land in this World:</p>
+                  <pre>{WORLDS}/{name}/&lt;vendor&gt;</pre>
+                  <CopyAgentPrompt text={agentPrompt()} />
+                </>
+              ) : (
+                <>
+                  <p className="ws-menu-text">Run it in this World; its calls to these vendors land here:</p>
+                  <pre>volter world run -- npm start</pre>
+                  <p className="ws-menu-text mode">Or point an SDK at <code>{WORLDS}/{name}/&lt;vendor&gt;</code> with the token in <code>.volter/token</code>.</p>
+                  <CopyAgentPrompt text={agentPrompt()} />
+                </>
+              )}
+              <hr />
+              <a href={`${BASE}/${name}/~/settings`} onClick={(e) => { closeMenu(e); to(['settings'])(e); }}><Icon name="settings" size={16} />Settings…</a>
+            </div>
+          </details>
+          <BranchMenu name={name} token={token} branches={branches} opens={opens} refused={refused} onChanged={onClock} />
+        </div>
+        <div className="ws-where" title="Where this is">
+          <span>{name}</span><span className="sep">:</span><span>{served}</span><span className="sep">:</span>
+          {origin ? <a href={`${BASE}/${name}/~/remote`} onClick={to(['remote'])}>origin {origin.namespace}{waiting ? <b> ↑{waiting}</b> : null}</a> : <a href={`${BASE}/${name}/~/remote`} onClick={to(['remote'])}>no remote</a>}
+          <span className="sep">:</span>
+          <a href={`${BASE}/${name}/~/settings/clock`} onClick={to(['settings', 'clock'])}>{clock.state === 'ok' ? <>{clock.data.frozen ? 'stopped at ' : ''}<At iso={clock.data.at} time /></> : '…'}</a>
+        </div>
+        <div className="ws-right">
+          <button type="button" className="ws-btn" onClick={() => void remote.pull()} disabled={Boolean(off) || remote.busy !== null} title={off ?? `Fetch what ${there} has and move this branch onto it`}><Icon name="arrow-down-to-line" size={16} />{remote.busy === 'Pull' ? 'Pulling…' : 'Pull'}</button>
+          <button type="button" className="ws-btn" onClick={() => void remote.push()} disabled={Boolean(off) || remote.busy !== null || waiting === 0} title={off ?? (waiting ? `Push ${counted(waiting, 'changeset')} to ${there}` : `Every changeset is at ${there}`)}><Icon name="arrow-up-from-line" size={16} />{remote.busy === 'Push' ? 'Pushing…' : 'Push'}{waiting ? <span className="ws-btn-count">{waiting}</span> : null}</button>
+          <button type="button" className="ws-btn icon-only" aria-label="Settings" title="Settings" onClick={() => to(['settings'])()}><Icon name="settings" size={16} /></button>
         </div>
-        {session.state === 'ok' ? (
-          <ul className="thumbs">
-            {vendors.map((v) => (
-              <li key={v}>
-                <a href={`${BASE}/${name}/~/vendors/${v}`} onClick={open(['~', 'vendors', v])} aria-label={`${vendorName(v)}'s screens`}>
-                  <span className="thumb">{screens.includes(v)
-                    ? <iframe title={`${vendorName(v)} preview`} src={mirrorUrl(name, v)} loading="lazy" tabIndex={-1} style={{ width: `${100 / THUMB_SCALE}%`, height: `${100 / THUMB_SCALE}%`, transform: `scale(${THUMB_SCALE})` }} />
-                    : <span className="thumb-none">No screens</span>}<span className={rows.find((x) => x.twin === v)?.root ? 'badge rooted thumb-status' : 'badge thumb-status'}>{rows.find((x) => x.twin === v)?.root ? 'connected' : 'stand-in'}</span></span>
-                  <span className="thumb-foot"><Mark vendor={v} /><b>{vendorName(v)}</b><span className="mode">{heldOf(v)}</span></span>
-                </a>
-              </li>
-            ))}
-          </ul>
-        ) : <p className="mode pad">{session.state === 'error' ? `The World did not open its screens: ${session.error}` : 'Opening…'}</p>}
-      </section>
-      <div className="dash-side">
-        {branches ? <section className="block" aria-labelledby="branches-head">
-          <div className="block-head"><h3 id="branches-head">Branches</h3><a href={`${BASE}/${name}/~/branches`} onClick={open(['~', 'branches'])}>All</a></div>
-          <ul className="mini-feed">
-            <li><svg className="branch-glyph" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path fill="currentColor" d="M5 3.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm0 2.122a2.25 2.25 0 1 0-1.5 0v5.256a2.25 2.25 0 1 0 1.5 0V9.5h4.25A2.25 2.25 0 0 0 11.5 7.25v-.878a2.25 2.25 0 1 0-1.5 0v.878a.75.75 0 0 1-.75.75H5V5.372ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm6.5-9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z" /></svg><span className="mini-what">{snapshotOf ? <><b>{name.split('/')[1]}</b> <span className="badge">snapshot</span> <span className="mode">of {snapshotOf.split('/')[1]}</span></> : <><b>{name.split('/')[1]}</b> <span className="badge">live</span></>}</span></li>
-            {list.slice(0, 3).map((b) => <li key={b.name}><svg className="branch-glyph" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path fill="currentColor" d="M5 3.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm0 2.122a2.25 2.25 0 1 0-1.5 0v5.256a2.25 2.25 0 1 0 1.5 0V9.5h4.25A2.25 2.25 0 0 0 11.5 7.25v-.878a2.25 2.25 0 1 0-1.5 0v.878a.75.75 0 0 1-.75.75H5V5.372ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm6.5-9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z" /></svg><span className="mini-what">{b.name.split('/').pop()} <span className="mode">{b.at?.instant ? `as of ${new Date(b.at.instant).toLocaleString()}` : 'copy'}</span></span></li>)}
-          </ul>
-          {canWrite ? <p className="mode pad">“View an earlier moment…” above opens a branch as the World was then.</p> : null}
-        </section> : null}
       </div>
-      <section className="block dash-activity" aria-labelledby="activity-head">
-        <div className="block-head"><h3 id="activity-head">Recent activity</h3><a href={`${BASE}/${name}/~/activity`} onClick={open(['~', 'activity'])}>View all</a></div>
-        <Pending load={recent} what="the activity" />
-        {recent.state === 'ok' && latest.length === 0 ? (
-          <div className="empty-block"><strong>No activity yet</strong><span className="mode">Run your app in this World and its calls show up here.</span></div>
-        ) : (
-          <ul className="mini-feed">{latest.map((p) => {
-            const s = said(p.entry);
-            return <li key={keyOf(p)}><Mark vendor={p.twin} /><span className="mini-what"><strong>{s.what}</strong>{s.label ? <span className="mode"> {s.label}</span> : null}</span><span className="mode num" title={p.entry.occurredAt}>{ago(p.entry.occurredAt)}</span></li>;
-          })}</ul>
-        )}
-      </section>
+      {snapshot ? (
+        <div className="ws-banner" role="region" aria-label="Snapshot">
+          <Icon name="clock" size={16} /><span>You are looking at <b>{snapshot.parent}</b> as it was at <At iso={snapshot.at} />: a read-only snapshot{snapshot.expiresAt ? <>, gone <At iso={snapshot.expiresAt} /></> : null}.</span>
+          <button type="button" onClick={() => void onReturn(snapshot)}>Return to live</button>
+        </div>
+      ) : null}
+      {remote.log.length ? <div className="ws-said"><Narration log={remote.log.slice(0, 1)} name={name} /></div> : null}
+
+      <div className="ws-body">
+        <nav className="ws-side" aria-label={`${name} places`}>
+          {/* the screens: one way in, saying how many there are and whose; the canvas lists them along its left */}
+          {mirrored.length ? (
+            <a href={`${BASE}/${name}/~/screens`} className={view === 'screen' ? 'ws-screens-entry on' : 'ws-screens-entry'} onClick={to(['screens'])} title={`${counted(mirrored.length, 'screen')}: ${listed(mirrored.map(vendorName))}`}>
+              <Icon name="layout-grid" size={16} /><span>Screens</span>
+              <span className="ws-screens-marks">{mirrored.slice(0, 3).map((v) => <Mark key={v} vendor={v} />)}{mirrored.length > 3 ? <span className="more">+{mirrored.length - 3}</span> : null}</span>
+              <span className="count">{mirrored.length}</span>
+            </a>
+          ) : null}
+          <p className="side-group">Workspace</p>
+          {place(view === 'changes' || view === 'history', <Icon name="file-diff" size={16} />, 'Changes', 'changes', to(['changes']), records.length ? String(records.length) : undefined)}
+          {place((view === 'events' && !arg) || view === 'trace', <Icon name="activity" size={16} />, 'Events', 'events', to(['events']))}
+          <p className="side-group">Records</p>
+          {vendors.map((v) => <React.Fragment key={v}>{place(view === 'vendor' && arg === v, <Mark vendor={v} />, vendorName(v), `vendors/${v}`, to(['vendors', v]), held(v) ? String(held(v)) : undefined)}</React.Fragment>)}
+          <p className="side-group">Remote</p>
+          {place(false, <Icon name="cloud" size={16} />, there ? 'origin' : 'Name a remote…', 'remote', to(['remote']), waiting ? `↑${waiting}` : undefined)}
+        </nav>
+
+        <div className="ws-main" role="main">
+          {view === 'changes' ? (
+            <div className="ws-status">
+              <div className="ws-files">
+                <ChangesTabs name={name} view="changes" changes={records.length} changesets={sets.state === 'ok' ? sets.data.changesets.length : 0} />
+                <div className="ws-list-head"><span>Not in a changeset</span><span className="mode">{diff.state === 'ok' ? `${counted(records.length, 'record')} · ${counted(writes, 'write')}` : ''}</span></div>
+                <Pending load={diff} what="the changes" lines={4} />
+                <RecordList records={records} {...(record ? { selected: record.key } : {})} onPick={setPicked} label="Changed records" />
+              </div>
+              <div className="ws-detail">
+                {diff.state === 'ok' && !record ? (
+                  <Empty title="No changes on this branch" action={waiting > 0 && there ? <button type="button" className="primary" disabled={Boolean(off) || remote.busy !== null} onClick={() => void remote.push()}>Push {counted(waiting, 'changeset')} to origin</button> : undefined}>
+                    <p>What your app writes to this World lands here, record by record, to cut into a changeset. Everything since {diff.data.base.at ? <At iso={diff.data.base.at} /> : <code>{diff.data.base.id}</code>} is in one already.</p>
+                  </Empty>
+                ) : null}
+                {record ? <RecordDiff record={record} history={log.state === 'ok' ? log.data.entries : log.state === 'error' ? [] : null} {...(mirrored.includes(record.twin) ? { screens: name } : {})} /> : null}
+              </div>
+              <CutChangeset pinned generated={rules.state === 'ok' && rules.data.changesets.summary === 'generated'} author={{ face: <Icon name={who.person ? 'user' : who.local ? 'monitor' : 'key-round'} size={18} />, who: who.person ?? (who.local ? 'This machine' : who.admin ? "The host's admin" : 'A token'), account: `${BASE}/${name}/~/settings/account`, branch: served }} name={name} token={token} changes={writes} canWrite={canWrite} refused={refused} onCut={() => { setVersion((v) => v + 1); setPicked(null); }} />
+            </div>
+          ) : null}
+          {view === 'history' ? <HistoryView name={name} token={token} sets={sets} changes={records.length} mirrored={mirrored} required={rules.state === 'ok' ? rules.data.changesets.approvals ?? 1 : 1} {...(sub ? { sub } : {})} signsAs={signsAs} canWrite={canWrite} rooted={rooted} refused={refused} onChanged={() => setVersion((v) => v + 1)} /> : null}
+          {view === 'events' ? <EventsView key={arg ?? ''} name={name} token={token} vendors={vendors} {...(arg && vendors.includes(arg) ? { vendor: arg } : {})} tick={tick} /> : null}
+          {view === 'trace' ? <TraceView name={name} token={token} id={arg ?? ''} /> : null}
+          {view === 'vendor' && arg ? <VendorView key={arg} name={name} token={token} vendor={arg} mirrored={mirrored.includes(arg)} tick={tick} /> : null}
+          {view === 'screen' && arg ? <ScreenView key={arg} name={name} vendor={arg} {...(sub ? { show: sub } : {})} holding={holds(map.state === 'ok' ? map.data.twins.find((x) => x.twin === arg)?.resources ?? [] : [])} session={session} retry={retry} /> : null}
+        </div>
+      </div>
+
+      <Dialog open={win?.kind === 'settings'} onClose={() => to(['changes'])()} title="Settings" wide="window">
+        {win?.kind === 'settings' ? (
+          <div className="ws-settings">
+            <nav aria-label="Settings">{SETTINGS_TABS.map(([k, label, icon]) => <a key={k} href={`${BASE}/${name}/~/settings/${k}`} className={win.tab === k ? 'on' : undefined} aria-current={win.tab === k ? 'page' : undefined} onClick={to(['settings', k])}><Icon name={icon} size={16} />{label}</a>)}</nav>
+            <div className="ws-settings-pane">
+              {scope === 'read' ? <p className="mode"><span className="badge read-only">Read only</span> This session reads the World; it changes nothing.</p> : null}
+              {win.tab === 'account' ? <AccountPane who={who} scope={scope} snapshot={snapshot} portal={portal()} onSignOut={onSignOut} /> : null}
+              {win.tab === 'changesets' ? <ChangesetsPane name={name} token={token} who={who} scope={scope} /> : null}
+              {win.tab === 'remote' ? <Remote name={name} token={token} canWrite={canWrite} tick={tick} refused={refused} /> : null}
+              {win.tab === 'access' || win.tab === 'services' || win.tab === 'checks' || win.tab === 'clock' ? <Settings name={name} token={token} admin={admin} canWrite={canWrite} refused={refused} onRemoved={onRemoved} only={win.tab} /> : null}
+              {win.tab === 'vault' ? <Vault name={name} token={token} canWrite={canWrite} refused={refused} /> : null}
+              {win.tab === 'appearance' ? <><h3 className="settings-head">Appearance</h3><ThemeChoice /></> : null}
+            </div>
+          </div>
+        ) : null}
+      </Dialog>
+      <Dialog open={win?.kind === 'branches'} onClose={() => to(['changes'])()} title="Branches" wide>
+        {win?.kind === 'branches' ? <Branches name={name} token={token} canWrite={canWrite} branches={branches} opens={opens} {...(win.open ? { open: win.open } : {})} onChanged={onClock} refused={refused} /> : null}
+      </Dialog>
     </div>
   );
 }
 
+/** Connect's last line: the setup as a prompt for the person's coding agent (packages/cli/src/agent-prompt.ts, the one
+ *  text), copied whole. */
+function CopyAgentPrompt({ text }: { text: string }): React.JSX.Element {
+  const copy = (): void => { void navigator.clipboard?.writeText(text).then(() => toast('Copied the prompt: paste it into your coding agent'), () => toast('Could not copy the prompt', 'error')); };
+  return <button type="button" className="agent-prompt-button" onClick={copy}>Copy a prompt for your coding agent</button>;
+}
+
+
+
+/** The World's origin as its door answers it: the World this one pushes to and pulls from, or none. */
+type OriginDoor = { origin: { url: string; namespace: string; clonedAt?: string; fetchedAt?: string } | null };
+/** The origin's address, as `volter remote add` names it: `<host>/<org>/<world>`. */
+const originAddress = (o: NonNullable<OriginDoor['origin']>): string => `${o.url.replace(/\/+$/, '')}/${o.namespace}`;
+/** The changesets a push would send: never sent, or refused (the push door's own queue). */
+const unpushed = (cs: ChangesetView[]): ChangesetView[] => cs.filter((c) => c.applied === null || c.applied.outcome === 'refused');
+/** What a vendor holds, in words: its resource counts, the largest first. */
+const holds = (resources: Array<{ type: string; count: number }>, most = 4): string => {
+  const top = [...resources].filter((r) => r.count > 0).sort((a, b) => b.count - a.count);
+  return top.length ? top.slice(0, most).map((r) => counted(r.count, r.type.replace(/^_+/, ''))).join(' · ') + (top.length > most ? ` · +${top.length - most} more` : '') : 'nothing yet';
+};
+const BRANCH_GLYPH = <svg className="branch-glyph" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path fill="currentColor" d="M5 3.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm0 2.122a2.25 2.25 0 1 0-1.5 0v5.256a2.25 2.25 0 1 0 1.5 0V9.5h4.25A2.25 2.25 0 0 0 11.5 7.25v-.878a2.25 2.25 0 1 0-1.5 0v.878a.75.75 0 0 1-.75.75H5V5.372ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm6.5-9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z" /></svg>;
+
+
 
 /** The World's clock, like a test clock's simulation banner: its time, and for a write token the controls that move it. */
-function ClockBar({ name, token, clock, canWrite, onChanged, refused }: { name: string; token: string; clock: Load<Clock>; canWrite: boolean; onChanged: () => void; refused: (r: Response) => void }): React.JSX.Element {
+function ClockBar({ name, token, clock, canWrite, onChanged, refused, open: inline }: { name: string; token: string; clock: Load<Clock>; canWrite: boolean; onChanged: () => void; refused: (r: Response) => void; /** Settings' Clock: the controls laid out, not behind a disclosure */ open?: boolean }): React.JSX.Element {
   const [setting, setSetting] = useState(false); const [value, setValue] = useState(''); const [by, setBy] = useState('');
   const [note, setNote] = useState<{ ok: boolean; text: string } | null>(null); const [busy, setBusy] = useState(false);
   const now = clock.state === 'ok' ? clock.data : null;
@@ -804,8 +1298,8 @@ function ClockBar({ name, token, clock, canWrite, onChanged, refused }: { name:
           : <>World time <strong><At iso={now!.at} /></strong> <span className="mode">· real time</span></>}
       </p>
       {canWrite && now ? (
-        <details className="clock-more"><summary>Simulate time…</summary><div className="popover">
-        <p className="mode">Move this World's clock forward to see what happens later: renewals, expiries, scheduled sends. Like a test clock, it only moves forward; to look back, use “View an earlier moment…”.</p>
+        <details className={inline ? 'clock-more inline' : 'clock-more'} open={inline || undefined}><summary>Simulate time…</summary><div className={inline ? undefined : 'popover'}>
+        <p className="mode">Move this World's clock forward to see what happens later: renewals, expiries, scheduled sends. Like a test clock, it only moves forward; to look back, the branch picker’s Manage branches… views an earlier moment.</p>
         <div className="clock-controls">
           <button type="button" aria-expanded={setting} onClick={() => { setSetting(!setting); setValue(localInput(nextMinute(now.at))); setNote(null); }}>Set time…</button>
           <div role="group" aria-label="Advance the clock" className="advance">
@@ -879,440 +1373,314 @@ function AsOf({ name, token, clock, refused }: { name: string; token: string; cl
   );
 }
 
-/** Overview: what the World holds, one card per twin (a resource explorer), and the branches cut from it. */
-function Overview({ name, token, canWrite, branches, opens, onBranchesChanged, refused }: { name: string; token: string; canWrite: boolean; branches: Load<BranchesDoor> | null; opens: (name: string) => boolean; onBranchesChanged: () => void; refused: (r: Response) => void }): React.JSX.Element {
-  const map = useDoor<WorldMap>(token, `/-/${name}/map`);
-  const [note, setNote] = useState<string | null>(null);
-  const remove = async (b: string): Promise<void> => {
-    if (!(await confirmAct({ title: `Delete the branch ${b}?`, body: 'Whoever holds its tokens loses it, and its history goes with it.', action: 'Delete branch', danger: true }))) return;
-    const r = await door(token, `/-/${name}/branches/${b}`, { method: 'DELETE' }).catch((e: unknown) => e as Error);
-    if (r instanceof Error) { setNote(`delete ${b}: the World did not answer (${r.message})`); return; }
-    if (!r.ok) { refused(r); setNote(`delete ${b}: ${await failure(r)}`); return; }
-    forgetSnapshot(b); setNote(`deleted ${b}`); onBranchesChanged();
-  };
-  const total = map.state === 'ok' ? map.data.twins.reduce((n, t) => n + t.resources.reduce((m, x) => m + x.count, 0), 0) : 0;
-  // the Branches tab: this World's copies; what it holds per vendor is the Vendors tab's list (kept here for a host
-  // without branches, where this tab is not shown)
-  if (branches) return <BranchList name={name} token={token} canWrite={canWrite} branches={branches} opens={opens} note={note} remove={remove} onChanged={onBranchesChanged} refused={refused} />;
-  return (
-    <>
-      <h3>Map</h3>
-      <Pending load={map} what="the World's map" />
-      {map.state === 'ok' ? (map.data.twins.length === 0 ? <p>This World holds no twins.</p> : (
-        <>
-          <p className="mode">{map.data.twins.length} twin{map.data.twins.length === 1 ? '' : 's'} · {total} resource{total === 1 ? '' : 's'}</p>
-          <ul className="map" aria-label="Twins in this World">
-            {map.data.twins.map((t) => {
-              const top = [...t.resources].sort((a, b) => b.count - a.count);
-              return (
-                <li key={t.twin} className="card" aria-labelledby={`map-${t.twin}`}>
-                  <div className="card-head">
-                    <h4 id={`map-${t.twin}`} className="vendor">{t.twin}</h4>
-                    <span className={t.root ? 'badge rooted' : 'badge'}>{t.root ? 'rooted' : 'simulated'}</span>
-                  </div>
-                  <p className="mode">{t.root ? <>rooted at <code>{t.root.url}</code></> : 'simulated — no vendor behind it'} · position {t.position}</p>
-                  {top.length === 0 ? <p className="mode">Holds nothing yet.</p> : (
-                    <ul className="resources">{top.slice(0, 6).map((r) => <li key={r.type}><span>{r.type}</span> <strong>{r.count}</strong></li>)}{top.length > 6 ? <li className="mode">+{top.length - 6} more types</li> : null}</ul>
-                  )}
-                  <p className="card-actions">
-                    {t.mirror ? <a className="button" href={mirrorUrl(name, t.twin)} target="_blank" rel="noopener noreferrer">Open {t.twin}</a> : <span className="mode">no mirror</span>}
-                    <a href={`${BASE}/${name}/${t.twin}`} aria-label={`Log and tree of ${t.twin}`} onClick={(e) => { e.preventDefault(); go([...name.split('/'), t.twin]); }}>Log &amp; tree</a>
-                  </p>
-                </li>
-              );
-            })}
-          </ul>
-        </>
-      )) : null}
-    </>
-  );
-}
-
-/** A World's branches, as a database's are (Neon's Branches page): each a copy of it as of a moment, made here (as of now
- *  or a moment you pick, for as long as you say), opened read-only in this tab, compared with its parent (what it changed
- *  since it branched), reset to its parent as it is now, or removed. Each is the World's own branches door. */
-function BranchList({ name, token, canWrite, branches, opens, note, remove, onChanged, refused }: { name: string; token: string; canWrite: boolean; branches: Load<BranchesDoor>; opens: (name: string) => boolean; note: string | null; remove: (b: string) => Promise<void>; onChanged: () => void; refused: (r: Response) => void }): React.JSX.Element {
+/** THE BRANCHES, as Neon's Branches page is: one table of every branch (the World's own, the one served here marked,
+ *  and the host's copies of it), each row opening its page: what it is, its own changes, and its acts. "New branch"
+ *  makes one as of now or of a moment before it. Each is the World's own branches door. */
+/** New branch: from now (live, or stopped now) or as the World was at an instant, for how long; made, it is kept with
+ *  its tokens so it opens in this tab (the Branches page's, and the workspace's branch picker's). */
+function NewBranch({ name, token, open, onClose, onMade, refused }: { name: string; token: string; open: boolean; onClose: () => void; onMade: () => void; refused: (r: Response) => void }): React.JSX.Element {
   const short = (n: string): string => n.split('/').pop() ?? n;
-  const list = branches.state === 'ok' ? branches.data.branches : [];
-  const [making, setMaking] = useState(false); const [busy, setBusy] = useState(false); const [error, setError] = useState<string | null>(null);
-  const [label, setLabel] = useState(''); const [when, setWhen] = useState<'now' | 'at'>('now'); const [at, setAt] = useState(''); const [hours, setHours] = useState('24');
-  // SERVE ANOTHER of the World's own branches here: the World switches under this page, which then reads it afresh
-  const [serving, setServing] = useState<string | null>(null); const [serveError, setServeError] = useState<string | null>(null);
-  const serveHere = async (branch: string): Promise<void> => {
-    setServing(branch); setServeError(null);
-    const r = await door(token, `/-/${name}/branches/${encodeURIComponent(branch)}/serve`, { method: 'POST' }).catch(() => null);
-    if (r?.ok) { location.reload(); return; }
-    setServing(null);
-    setServeError(r ? ((await r.json().catch(() => null)) as { error?: string } | null)?.error ?? `${r.status}` : `${ORIGIN} did not answer`);
-  };
-  // made here: kept with its tokens so it opens in this tab; not `made` (a snapshot's "Return to live" never removes it: it lives as long as it was given)
-  const make = async (body: Record<string, unknown>, opened: string): Promise<{ name: string } | string> => {
-    const r = await door(token, `/-/${name}/branches`, { method: 'POST', body: JSON.stringify(body) }).catch(() => null);
-    if (!r) return `${ORIGIN} did not answer`;
-    if (!r.ok) { refused(r); return await failure(r); }
-    const b = (await r.json()) as { name: string; token?: string; readToken: string; expiresAt: string | null; origin?: string };
-    keepSnapshot({ name: b.name, parent: name, token: b.token ?? '', readToken: b.readToken, at: opened, expiresAt: b.expiresAt ?? null, parentOrigin: ORIGIN, ...(b.origin ? { origin: b.origin } : {}) });
-    return b;
-  };
+  const [busy, setBusy] = useState(false); const [error, setError] = useState<string | null>(null);
+  const [label, setLabel] = useState(''); const [when, setWhen] = useState<'now' | 'at'>('now'); const [at, setAt] = useState(''); const [hours, setHours] = useState('24'); const [live, setLive] = useState(true);
+  useEffect(() => { if (open) { setError(null); setAt(localInput(new Date().toISOString())); } }, [open]);
   const create = async (e: React.FormEvent): Promise<void> => {
     e.preventDefault(); setError(null);
     const instant = when === 'at' ? new Date(at) : null;
     if (instant && Number.isNaN(instant.getTime())) { setError('Pick a date and time, or make it as of now.'); return; }
     if (instant && instant.getTime() > Date.now()) { setError('A branch is made as of now or a moment before it.'); return; }
-    const ttl = Math.round(Number(hours) * 3600);
     setBusy(true);
-    const b = await make({ ttl, ...(instant ? { at: { instant: instant.toISOString() } } : { live: true }), ...(label.trim() ? { label: label.trim() } : {}) }, (instant ?? new Date()).toISOString());
+    const r = await door(token, `/-/${name}/branches`, { method: 'POST', body: JSON.stringify({ ttl: Math.round(Number(hours) * 3600), ...(instant ? { at: { instant: instant.toISOString() } } : live ? { live: true } : {}), ...(label.trim() ? { label: label.trim() } : {}) }) }).catch(() => null);
     setBusy(false);
-    if (typeof b === 'string') { setError(b); return; }
-    setMaking(false); setLabel(''); toast(`Made ${short(b.name)}`); onChanged();
+    if (!r) { setError(`${ORIGIN} did not answer`); return; }
+    if (!r.ok) { refused(r); setError(await failure(r)); return; }
+    // made here: kept with its tokens so it opens in this tab, and its own changes read with them
+    const b = (await r.json()) as { name: string; token?: string; readToken: string; expiresAt: string | null; origin?: string };
+    keepSnapshot({ name: b.name, parent: name, token: b.token ?? '', readToken: b.readToken, at: (instant ?? new Date()).toISOString(), expiresAt: b.expiresAt ?? null, parentOrigin: ORIGIN, ...(b.origin ? { origin: b.origin } : {}) });
+    onClose(); setLabel(''); toast(`Made ${short(b.name)}`); onMade();
   };
-  const reset = async (b: Branch): Promise<void> => {
-    if (!(await confirmAct({ title: `Reset ${short(b.name)} to ${short(name)}?`, body: `A fresh copy of ${short(name)} as it is now replaces it, with the same label and the time it had left; what was written to it goes. The copy has a new address and new keys: an app, a CI job or a pull request's preview that holds this branch's must be given the new one.`, action: 'Reset branch', danger: true }))) return;
-    const left = b.expiresAt ? Math.max(3600, Math.round((Date.parse(b.expiresAt) - Date.now()) / 1000)) : 86_400;
-    // a branch is named `<parent>-<label>-<4 hex>`: its label is what lies between
-    const own = short(b.name).startsWith(`${short(name)}-`) ? short(b.name).slice(short(name).length + 1) : '';
-    const labelOf = /^([a-z0-9][a-z0-9-]*)-[0-9a-f]{4}$/.exec(own)?.[1];
-    const fresh = await make({ ttl: left, live: true, ...(labelOf && !labelOf.startsWith('at-') ? { label: labelOf } : {}) }, new Date().toISOString());
-    if (typeof fresh === 'string') { toast(`Reset ${short(b.name)}: ${fresh}`, 'error'); return; }
-    const r = await door(token, `/-/${name}/branches/${b.name}`, { method: 'DELETE' }).catch(() => null);
-    if (r?.ok) forgetSnapshot(b.name);
-    toast(r?.ok ? `Reset: ${short(fresh.name)} is ${short(name)} as it is now` : `Made ${short(fresh.name)}; ${short(b.name)} was not removed`); onChanged();
+  const dialog = (
+    <Dialog open={open} onClose={() => { if (!busy) onClose(); }} title={`New branch of ${short(name)}`} footer={<><button type="button" onClick={() => onClose()} disabled={busy}>Cancel</button><button type="submit" form="new-branch" className="primary" disabled={busy}>{busy ? 'Making…' : 'Make branch'}</button></>}>
+      <form id="new-branch" onSubmit={(e) => void create(e)} className="stack">
+        <label><span>Label <span className="mode">(optional)</span></span><input name="branchLabel" value={label} onChange={(e) => setLabel(e.target.value.toLowerCase())} placeholder="checkout-flow" pattern="[a-z0-9][a-z0-9\-]{0,23}" maxLength={24} /></label>
+        <fieldset className="choice"><legend>From</legend>
+          <label className="check"><input type="radio" name="branchWhen" checked={when === 'now'} onChange={() => setWhen('now')} /> <span>Now: the World as it is</span></label>
+          {when === 'now' ? <label className="check sub"><input type="checkbox" name="branchLive" checked={live} onChange={(e) => setLive(e.target.checked)} /> <span>Live: its clock keeps this World's time, as a pull request's preview does (else it stops now)</span></label> : null}
+          <label className="check"><input type="radio" name="branchWhen" checked={when === 'at'} onChange={() => setWhen('at')} /> <span>An instant before now: the World as it was then, its clock stopped there</span></label>
+          {when === 'at' ? <input type="datetime-local" aria-label="As of" value={at} max={localInput(new Date().toISOString())} onChange={(e) => setAt(e.target.value)} /> : null}
+        </fieldset>
+        <label><span>Goes away after</span><select name="branchLife" value={hours} onChange={(e) => setHours(e.target.value)}><option value="1">1 hour</option><option value="24">1 day</option><option value="72">3 days</option><option value="168">7 days</option></select></label>
+        {error ? <p role="alert">{error}</p> : null}
+      </form>
+    </Dialog>
+  );
+  return dialog;
+}
+
+function Branches({ name, token, canWrite, branches, opens, open: opened, onChanged, refused, snapshotOf }: { name: string; token: string; canWrite: boolean; branches: Load<BranchesDoor> | null; opens: (name: string) => boolean; open?: string; onChanged: () => void; refused: (r: Response) => void; /** the World this one is a snapshot of: a snapshot is not branched again */ snapshotOf?: string }): React.JSX.Element {
+  const clock = useDoor<Clock>(token, `/-/${name}/clock`);
+  const short = (n: string): string => n.split('/').pop() ?? n;
+  const [making, setMaking] = useState(false);
+  // a host's branch is routed by its full name (`<org>/<world>`), one of the World's own by its name: the two never collide
+  const page = (b?: string) => (e: React.MouseEvent): void => { e.preventDefault(); go([...name.split('/'), '~', 'branches', ...(b ? b.split('/') : [])]); };
+  if (!branches) return <p className="mode">This host makes no branches of a World.</p>;
+  const list = branches.state === 'ok' ? branches.data.branches : [];
+  const named = branches.state === 'ok' && (branches.data.named?.length ?? 0) > 0 ? branches.data.named! : [{ name: short(name), running: true }];
+  const served = branches.state === 'ok' ? branches.data.checkedOut ?? short(name) : short(name);
+  const remove = async (b: string): Promise<void> => {
+    if (!(await confirmAct({ title: `Remove the branch ${short(b)}?`, body: 'Whoever holds its tokens loses it, and its history goes with it.', action: 'Remove branch', danger: true }))) return;
+    const r = await door(token, `/-/${name}/branches/${b}`, { method: 'DELETE' }).catch((e: unknown) => e as Error);
+    if (r instanceof Error) { toast(`Remove ${short(b)}: the World did not answer (${r.message})`, 'error'); return; }
+    if (!r.ok) { refused(r); toast(`Remove ${short(b)}: ${await failure(r)}`, 'error'); return; }
+    forgetSnapshot(b); toast(`Removed ${short(b)}`); onChanged(); go([...name.split('/'), '~', 'branches']);
   };
-  const menu = (b: Branch): Array<{ label: string; onSelect: () => void; danger?: boolean }> => [
-    ...(opens(b.name) ? [{ label: 'Compare with parent', onSelect: () => goBranch(b.name, [...b.name.split('/'), '~', 'changes']) }] : []),
-    ...(canWrite ? [{ label: 'Reset to parent…', onSelect: () => void reset(b) }, { label: 'Delete…', danger: true, onSelect: () => void remove(b.name) }] : []),
-  ];
+  if (opened) {
+    const copy = opened.includes('/') ? list.find((b) => b.name === opened) : undefined;
+    const own = opened.includes('/') ? undefined : named.find((b) => b.name === opened);
+    return (
+      <>
+        <p className="crumbs-line"><a href={`${BASE}/${name}/~/branches`} onClick={page()}>← Branches</a></p>
+        <Pending load={branches} what="the branches" />
+        {branches.state === 'ok' && !copy && !own ? <p className="mode">This World has no branch named {opened}.</p> : null}
+        {copy ? <BranchPage name={name} b={copy} canWrite={canWrite} opens={opens(copy.name)} remove={() => void remove(copy.name)} /> : null}
+        {own && !copy ? <OwnBranchPage name={name} token={token} b={own} served={own.name === served} canWrite={canWrite} canServe={branches.state === 'ok' && Boolean(branches.data.canServe)} /> : null}
+      </>
+    );
+  }
   return (
     <div aria-labelledby="branches">
       <div className="branches-head">
-        <p className="lede">Branch this World to look at it as it was, or to change it without touching <b>{short(name)}</b>. A branch made here opens read-only in this tab; its parent removes it.</p>
-        {canWrite ? <button type="button" className="primary" onClick={() => { setError(null); setAt(localInput(new Date().toISOString())); setMaking(true); }}>New branch</button> : null}
+        <p className="lede">Branch this World to look at it as it was, or to change it without touching <b>{served}</b>. Each branch's name opens its page.</p>
+        {canWrite ? <div className="head-actions">{snapshotOf ? null : <AsOf name={name} token={token} clock={clock} refused={refused} />}<button type="button" className="primary" onClick={() => setMaking(true)}>New branch</button></div> : null}
       </div>
-      {note ? <p role="status">{note}</p> : null}
       <Pending load={branches} what="the branches" />
       {branches.state === 'ok' ? (
         <div className="block">
           <table className="dense" aria-label="Branches">
-            <thead><tr><th id="branches">Branch</th><th>Parent</th><th>As of</th><th>Made</th><th>Goes away</th><th /></tr></thead>
+            <thead><tr><th id="branches">Branch</th><th>Parent</th><th>As of</th><th>Made</th><th>Goes away</th></tr></thead>
             <tbody>
-              <tr><td><b>{branches.data.checkedOut ?? short(name)}</b> <span className="badge">{branches.data.checkedOut ? 'served here' : 'default'}</span></td><td className="mode">—</td><td className="mode">live</td><td className="mode">—</td><td className="mode">kept</td><td /></tr>
-              {list.map((b) => {
-                const items = menu(b);
-                return (
-                  <tr key={b.name}>
-                    <td><b>{short(b.name)}</b></td>
-                    <td>{short(name)}</td>
-                    <td>{b.at?.instant ? <At iso={b.at.instant} /> : 'when it was made'}</td>
-                    <td><At iso={b.createdAt} /></td>
-                    <td>{b.expiresAt ? <At iso={b.expiresAt} /> : 'kept'}</td>
-                    <td className="num row-actions">
-                      {opens(b.name) ? <button type="button" aria-label={`Open ${b.name}`} onClick={() => goBranch(b.name, b.name.split('/'))}>Open</button> : <span className="mode" title="Its token was handed to whoever made it">opened by whoever made it</span>}
-                      {items.length ? <Menu label={`More for ${short(b.name)}`} items={items} /> : null}
-                    </td>
-                  </tr>
-                );
-              })}
-            </tbody>
-          </table>
-          {list.length === 0 ? <p className="mode pad">No snapshots yet.</p> : null}
-        </div>
-      ) : null}
-      {branches.state === 'ok' && (branches.data.named?.length ?? 0) > 0 ? (
-        <>
-        <p className="lede">This World's own branches (<code>volter world branch</code>). One runs at a time; {branches.data.canServe ? <>“Serve here” stops this one's twins and serves that one in its place.</> : <>this host serves one of them; another is served by <code>volter world checkout &lt;branch&gt;</code> where the World lives, then serving again.</>}</p>
-        {serveError ? <p role="alert">{serveError}</p> : null}
-        <div className="block">
-          <table className="dense" aria-label="World branches">
-            <thead><tr><th>Branch</th><th>State</th><th /></tr></thead>
-            <tbody>
-              {branches.data.named!.map((b) => (
+              {named.map((b) => (
+                <tr key={`own:${b.name}`}>
+                  <td><a href={`${BASE}/${name}/~/branches/${b.name}`} onClick={page(b.name)}><b>{b.name}</b></a>{b.name === served ? <> <span className="badge live">served here</span></> : b.running ? null : <> <span className="badge">stopped</span></>}</td>
+                  <td className="mode">—</td><td className="mode">live</td><td className="mode">—</td><td className="mode">kept</td>
+                </tr>
+              ))}
+              {list.map((b) => (
                 <tr key={b.name}>
-                  <td><b>{b.name}</b>{b.name === branches.data.checkedOut ? <> <span className="badge">served here</span></> : null}</td>
-                  <td className="mode">{b.running ? 'running' : 'stopped'}</td>
-                  <td className="num row-actions">{canWrite && branches.data.canServe && b.name !== branches.data.checkedOut ? <button type="button" disabled={serving !== null} onClick={() => void serveHere(b.name)}>{serving === b.name ? 'Switching…' : 'Serve here'}</button> : null}</td>
+                  <td><a href={`${BASE}/${name}/~/branches/${b.name}`} onClick={page(b.name)}><b>{short(b.name)}</b></a></td>
+                  <td>{short(b.from ?? name)}</td>
+                  <td>{b.at?.instant ? <At iso={b.at.instant} /> : <span className="mode">live</span>}</td>
+                  <td><At iso={b.createdAt} /></td>
+                  <td>{b.expiresAt ? <At iso={b.expiresAt} /> : 'kept'}</td>
                 </tr>
               ))}
             </tbody>
           </table>
         </div>
-        </>
       ) : null}
-      <Dialog open={making} onClose={() => { if (!busy) setMaking(false); }} title={`New branch of ${short(name)}`} footer={<><button type="button" onClick={() => setMaking(false)} disabled={busy}>Cancel</button><button type="submit" form="new-branch" className="primary" disabled={busy}>{busy ? 'Making…' : 'Make branch'}</button></>}>
-        <form id="new-branch" onSubmit={(e) => void create(e)} className="stack">
-          <label><span>Name <span className="mode">(optional)</span></span><input name="branchLabel" value={label} onChange={(e) => setLabel(e.target.value.toLowerCase())} placeholder="checkout-flow" pattern="[a-z0-9][a-z0-9-]{0,23}" maxLength={24} /></label>
-          <fieldset className="choice"><legend>As of</legend>
-            <label className="check"><input type="radio" name="branchWhen" checked={when === 'now'} onChange={() => setWhen('now')} /> <span>Now: the World as it is, its clock running on</span></label>
-            <label className="check"><input type="radio" name="branchWhen" checked={when === 'at'} onChange={() => setWhen('at')} /> <span>A moment before now: the World as it was then, its clock stopped there</span></label>
-            {when === 'at' ? <input type="datetime-local" aria-label="As of" value={at} max={localInput(new Date().toISOString())} onChange={(e) => setAt(e.target.value)} /> : null}
-          </fieldset>
-          <label><span>Goes away after</span><select name="branchLife" value={hours} onChange={(e) => setHours(e.target.value)}><option value="1">1 hour</option><option value="24">1 day</option><option value="72">3 days</option><option value="168">7 days</option></select></label>
-          {error ? <p role="alert">{error}</p> : null}
-        </form>
-      </Dialog>
+      <NewBranch name={name} token={token} open={making} onClose={() => setMaking(false)} onMade={onChanged} refused={refused} />
     </div>
   );
 }
 
-/** THE VENDORS: each vendor's own screens (its mirror), the World's live preview. A list of the vendors with what each
- *  holds, and the chosen one's screens at full size, at their own address; "Side by side" shows them all at once. */
-function Vendors({ name, token, twins, session, retry, selected }: { name: string; token: string; twins: Load<{ twins: Twin[] }>; session: MirrorSession; retry: () => void; selected?: string }): React.JSX.Element {
-  const map = useDoor<WorldMap>(token, `/-/${name}/map`);
-  const list = twins.state === 'ok' ? twins.data.twins : [];
-  const held = (v: string): string => {
-    const t = map.state === 'ok' ? map.data.twins.find((x) => x.twin === v) : undefined;
-    if (!t) return '';
-    const top = [...t.resources].filter((r) => r.count > 0).sort((a, b) => b.count - a.count);
-    return top.length === 0 ? 'nothing yet' : top.slice(0, 3).map((r) => counted(r.count, r.type)).join(' · ') + (top.length > 3 ? ' · …' : '');
-  };
-  const rootOf = (v: string): string | null => (map.state === 'ok' ? map.data.twins.find((x) => x.twin === v)?.root?.url ?? null : null);
-  const chosen = list.find((t) => t.twin === selected);
-  if (!chosen) return twins.state === 'ok' ? <p className="mode">This World has no vendor named {selected}. <a href={`${BASE}/${name}/~/canvas`} onClick={(e) => { e.preventDefault(); go([...name.split('/'), '~', 'canvas']); }}>All screens</a></p> : <Pending load={twins} what="the vendors" />;
+/** One of the host's branches of this World (Neon's branch page): what it is, its own changes since it branched (read
+ *  with its own token, which only the tab that made it holds), and its acts. */
+function BranchPage({ name, b, canWrite, opens, remove }: { name: string; b: Branch; canWrite: boolean; opens: boolean; remove: () => void }): React.JSX.Element {
+  const short = (n: string): string => n.split('/').pop() ?? n;
+  const own = snapshotToken(b.name);
+  const diff = useDoor<Diff>(own, own ? `/-/${b.name}/diff` : null);
   return (
-    <>
-      <Pending load={twins} what="the vendors" />
-      {twins.state === 'ok' && list.length === 0 ? <p>No vendors in this World yet.</p> : null}
-      {chosen ? (
-        <div className="vendors">
-          <div className="stage">
-            <div className="stage-bar">
-              <Mark vendor={chosen.twin} />
-              <span className="mode">{held(chosen.twin) || 'empty'}{rootOf(chosen.twin) ? ` · connected to ${rootOf(chosen.twin)}` : ' · stand-in'}</span>
-              <span className="stage-actions">
-                {list.filter((t) => t.mirror).length > 1 ? <a className="button" href={`${BASE}/${name}/~/vendors`} onClick={(e) => { e.preventDefault(); go([...name.split('/'), '~', 'vendors']); }}>All vendors</a> : null}
-                {chosen.mirror ? <a className="button" href={mirrorUrl(name, chosen.twin)} target="_blank" rel="noopener noreferrer" aria-label={`Open ${vendorName(chosen.twin)} in a new tab`}>Open in new tab ↗</a> : null}
-              </span>
-            </div>
-            {session.state === 'ok' && session.scope === 'read' ? <p className="mode stage-note">You are looking read only: the screens browse, and refuse changes.</p> : null}
-            {session.state === 'pending' ? <p className="mode" role="status">Opening…</p> : null}
-            {session.state === 'error' ? <p role="alert">The World did not open its screens: {session.error} <button type="button" onClick={retry}>Try again</button></p> : null}
-            {session.state === 'ok' ? (chosen.mirror
-              ? <iframe key={chosen.twin} title={`${chosen.twin} mirror`} src={mirrorUrl(name, chosen.twin)} />
-              : <p className="empty">{vendorName(chosen.twin)} has no screens here yet. What your app did there is in <a href={`${BASE}/${name}/~/activity`} onClick={(e) => { e.preventDefault(); go([...name.split('/'), '~', 'activity']); }}>Activity</a>.</p>) : null}
-          </div>
+    <div className="branch-page">
+      <div className="changeset-head">
+        <h3>{BRANCH_GLYPH} {short(b.name)}</h3>
+        <div className="changeset-actions">
+          {opens ? <button type="button" className="primary" onClick={() => goBranch(b.name, b.name.split('/'))}>Open</button> : null}
+          {canWrite ? <button type="button" className="danger-button" onClick={remove}>Remove…</button> : null}
         </div>
+      </div>
+      <div className="block">
+        <dl className="fields pad">
+          <dt>Name</dt><dd><code>{b.name}</code></dd>
+          <dt>Parent</dt><dd>{short(b.from ?? name)}</dd>
+          <dt>As of</dt><dd>{b.at?.instant ? <At iso={b.at.instant} /> : 'live: it keeps its parent\'s time'}</dd>
+          <dt>Made</dt><dd><At iso={b.createdAt} /></dd>
+          <dt>Goes away</dt><dd>{b.expiresAt ? <At iso={b.expiresAt} /> : 'kept'}</dd>
+        </dl>
+      </div>
+      {!opens ? <p className="mode">Its tokens were handed to whoever made it: it opens, and shows its own changes, in their tab.</p> : null}
+      {diff.state === 'ok' ? (
+        <>
+          <h4>Its changes</h4>
+          {diff.data.changes.length === 0 ? <p className="mode">Nothing written on it since it branched.</p> : <RecordChanges changes={diff.data.changes} idPrefix={`branch-${short(b.name)}`} />}
+        </>
       ) : null}
-    </>
+    </div>
   );
 }
 
-/** Consecutive changes that are one action on one kind of thing, as runs (a single change is a run of one). */
-function runsOf(entries: Entry[]): Entry[][] {
-  const out: Entry[][] = [];
-  for (const e of entries) { const last = out[out.length - 1]; if (last && (last[0]!.operation ?? last[0]!.op) === (e.operation ?? e.op)) last.push(e); else out.push([e]); }
-  return out;
+/** One of the World's own branches (`volter world branch`): whether it runs, and serving it here. */
+function OwnBranchPage({ name, token, b, served, canWrite, canServe }: { name: string; token: string; b: { name: string; running: boolean }; served: boolean; canWrite: boolean; canServe: boolean }): React.JSX.Element {
+  const [serving, setServing] = useState(false); const [error, setError] = useState<string | null>(null);
+  const serveHere = async (): Promise<void> => {
+    setServing(true); setError(null);
+    const r = await door(token, `/-/${name}/branches/${encodeURIComponent(b.name)}/serve`, { method: 'POST' }).catch(() => null);
+    if (r?.ok) { location.reload(); return; }
+    setServing(false);
+    setError(r ? await failure(r) : `${ORIGIN} did not answer`);
+  };
+  return (
+    <div className="branch-page">
+      <div className="changeset-head">
+        <h3>{BRANCH_GLYPH} {b.name} {served ? <span className="badge live">served here</span> : null}</h3>
+        <div className="changeset-actions">{canWrite && canServe && !served ? <button type="button" className="primary" disabled={serving} onClick={() => void serveHere()}>{serving ? 'Switching…' : 'Serve here'}</button> : null}</div>
+      </div>
+      <div className="block">
+        <dl className="fields pad">
+          <dt>Name</dt><dd><code>{b.name}</code></dd>
+          <dt>Kind</dt><dd>one of this World's own branches</dd>
+          <dt>State</dt><dd>{b.running ? 'running' : 'stopped'}</dd>
+        </dl>
+      </div>
+      {served ? <p className="mode">This is the branch these pages show: its changes are on <a href={`${BASE}/${name}/~/changes`} onClick={(e) => { e.preventDefault(); go([...name.split('/'), '~', 'changes']); }}>Changes</a>.</p> : canServe ? <p className="mode">“Serve here” stops this one's twins and serves {b.name} in its place.</p> : <p className="mode">This host serves one of the World's own branches at a time, and does not switch them from this page.</p>}
+      {error ? <p role="alert">{error}</p> : null}
+    </div>
+  );
 }
 
-/** Rows that say the same thing (nine labels created at one instant) as one line that opens to them. */
-function collapsed(items: Placed[]): Array<Placed | Placed[]> {
-  const out: Array<Placed | Placed[]> = [];
-  for (const p of items) {
-    const last = out[out.length - 1];
-    const head = Array.isArray(last) ? last[0]! : last;
-    if (head && head.twin === p.twin && (head.entry.operation ?? head.entry.op) === (p.entry.operation ?? p.entry.op)) {
-      if (Array.isArray(last)) last.push(p); else out[out.length - 1] = [head, p];
-    } else out.push(p);
-  }
-  // a run of two stays two rows; three or more is one line
-  return out.flatMap((x) => (Array.isArray(x) && x.length < 3 ? x : [x]));
-}
 
 const PAGE = 50;
 const keyOf = (p: Placed): string => `${p.twin}:${p.position}`;
 /** Newest first — the door's order: the instant, then the twin, then the position. */
 const newestFirst = (a: Placed, b: Placed): number => Date.parse(b.entry.occurredAt) - Date.parse(a.entry.occurredAt) || a.twin.localeCompare(b.twin) || b.position - a.position;
-/** The feed in days, each day in instants: entries at one instant stay together, in no finer order than the World knows. */
-function grouped(items: Placed[]): Array<{ day: string; label: string; instants: Array<{ at: string; items: Placed[] }> }> {
-  const days: Array<{ day: string; label: string; instants: Array<{ at: string; items: Placed[] }> }> = [];
-  for (const p of items) {
-    const d = new Date(p.entry.occurredAt); const key = d.toDateString();
-    let day = days[days.length - 1];
-    if (!day || day.day !== key) { day = { day: key, label: d.toLocaleDateString(undefined, { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' }), instants: [] }; days.push(day); }
-    const last = day.instants[day.instants.length - 1];
-    if (last && Date.parse(last.at) === d.getTime()) last.items.push(p); else day.instants.push({ at: p.entry.occurredAt, items: [p] });
-  }
-  return days;
+/** Who made it: the vendor itself for what it records on its own, the actor's id where it has one, else the app. */
+/** Who made it: the World's own word for the credential that called (`caller`: a key by its name, a person, the World's
+ *  token) when the entry carries it; else the vendor itself for what it records on its own, the actor's id where it has
+ *  one, else the app. */
+/** A caller as a person reads it: a key as itself, for its person (`key:claude for:ada` → "claude, for ada"), a person by
+ *  name, this machine's page and a World's token as what they are. */
+const callerName = (c: string | undefined): string => {
+  if (!c) return 'someone';
+  if (c.startsWith('key:')) { const [key, person] = c.slice(4).split(' for:'); return person ? `${key}, for ${person}` : key || 'a key'; }
+  if (c.startsWith('person:')) return c.slice(7);
+  return c === 'machine' ? 'this machine' : c === 'person' ? 'a session with no name' : c === 'token:read' ? 'the read-only token' : c === 'token' ? "the World's token" : c;
+};
+const whoDid = (e: Entry, caller?: string): string => {
+  const c = typeof caller === 'string' ? caller : typeof e.caller === 'string' ? e.caller : '';
+  if (c.startsWith('key:') && c.length > 4) return `by ${callerName(c)}`;
+  if (c.startsWith('person:') && c.length > 7) return `by ${c.slice(7)}`;
+  if (c === 'machine') return 'by this machine';
+  if (c === 'person') return 'by a session with no name';
+  if (c === 'key') return 'by a key';
+  if (c === 'token:read') return 'by the read-only token';
+  if (c === 'token') return "by the World's token";
+  return e.actor?.kind === 'system' ? 'by the vendor' : e.actor?.id ? `by ${e.actor.id}` : 'by an app';
+};
+const opOf = (e: Entry): string => e.operation ?? e.op;
+/** What an entry's write cost, where it says: tokens in and out (a model's `usage`, or a usage record's own fields) and a cost. */
+function usageOf(e: Entry): Array<[string, string]> {
+  const f = (e.fields ?? {}) as Record<string, unknown>;
+  const u = f.usage !== null && typeof f.usage === 'object' ? (f.usage as Record<string, unknown>) : f;
+  const n = (...keys: string[]): number | undefined => keys.map((k) => u[k] ?? f[k]).find((v): v is number => typeof v === 'number');
+  const out: Array<[string, string]> = [];
+  const input = n('prompt_tokens', 'input_tokens'); const output = n('completion_tokens', 'output_tokens'); const total = n('total_tokens');
+  if (input !== undefined) out.push(['tokens in', input.toLocaleString()]);
+  if (output !== undefined) out.push(['tokens out', output.toLocaleString()]);
+  if (total !== undefined) out.push(['tokens in all', total.toLocaleString()]);
+  const cost = n('cost_usd', 'cost');
+  if (cost !== undefined) out.push(['cost', `$${cost < 0.01 ? cost.toPrecision(2) : cost.toFixed(2)}`]);
+  return out;
 }
 
-function EntryRow({ name, p }: { name: string; p: Placed }): React.JSX.Element {
-  const e = p.entry; const t = traceOf(e.traceparent); const s = said(e); const n = notable(e);
-  return (
-    <li className="entry" title={`${e.operation ?? e.op} ${e.subject.type}:${e.subject.id} · ${actorOf(e)} · ${standing(e)}`}>
-      <span className="twin-chip"><Mark vendor={p.twin} />{vendorName(p.twin)}</span>
-      <span className="op">{s.what}</span>
-      {s.label ? <span className="label">“{s.label}”</span> : <code className="subject">{shown(e)}</code>}
-      <span className="actor mode">{byWhom(e, p.twin)}</span>
-      {n ? <span className="standing">{n}</span> : null}
-      {t ? <a className="trace-link" href={`${BASE}/${name}/~/trace/${t.trace}`} aria-label={`View trace ${t.trace.slice(0, 8)}`} onClick={(ev) => { ev.preventDefault(); go([...name.split('/'), '~', 'trace', t.trace]); }}>trace</a> : null}
-    </li>
-  );
+/** Text as a person reads it: whole when short, its start with the rest a click away when long. */
+function Folded({ text, at = 280 }: { text: string; at?: number }): React.JSX.Element {
+  if (text.length <= at) return <span className="text">{text}</span>;
+  return <details className="folded"><summary><span className="text">{text.slice(0, at)}…</span> <span className="mode">show all {text.length.toLocaleString()} characters</span></summary><span className="text">{text}</span></details>;
 }
-
-/** The feed of everything that happened, across twins — an activity feed: newest first, by day, newer changes held behind a pill. */
-function TimelineTab({ name, token, vendors }: { name: string; token: string; vendors: string[] }): React.JSX.Element {
-  const [only, setOnly] = useState<string | null>(null);
-  const [items, setItems] = useState<Placed[] | null>(null); const [next, setNext] = useState<string | null>(null);
-  const [error, setError] = useState<string | null>(null); const [older, setOlder] = useState(false); const [olderError, setOlderError] = useState<string | null>(null);
-  const [fresh, setFresh] = useState<{ items: Placed[]; gap: Timeline | null }>({ items: [], gap: null });
-  const path = useCallback((before?: string): string => `/-/${name}/timeline?limit=${PAGE}${only ? `&twin=${encodeURIComponent(only)}` : ''}${before ? `&before=${encodeURIComponent(before)}` : ''}`, [name, only]);
-  const itemsRef = useRef<Placed[] | null>(null); itemsRef.current = items;
-  useEffect(() => {
-    let live = true;
-    setItems(null); setError(null); setFresh({ items: [], gap: null });
-    void (async () => {
-      const r = await door(token, path());
-      if (!live) return;
-      if (!r.ok) { setError(await failure(r)); return; }
-      const b = (await r.json()) as Timeline; if (!live) return;
-      setItems(b.entries); setNext(b.next);
-    })().catch((e: unknown) => { if (live) setError(`the World did not answer: ${e instanceof Error ? e.message : String(e)}`); });
-    // live: newer entries are counted, not inserted — the list never moves under the reader
-    const id = setInterval(() => {
-      const cur = itemsRef.current; if (cur === null || document.hidden) return;
-      void door(token, path()).then(async (r) => {
-        if (!r.ok || !live) return;
-        const b = (await r.json()) as Timeline; if (!live) return;
-        if (cur.length === 0) { if (b.entries.length) { setItems(b.entries); setNext(b.next); } return; }
-        const known = new Set((itemsRef.current ?? cur).map(keyOf));
-        const unseen = b.entries.filter((p) => !known.has(keyOf(p)));
-        // a full page with nothing known in it: more arrived than one page holds, and showing them starts over
-        setFresh({ items: unseen, gap: unseen.length === b.entries.length && b.next ? b : null });
-      }).catch(() => null);
-    }, 3000);
-    return () => { live = false; clearInterval(id); };
-  }, [token, path]);
-  const show = (): void => {
-    if (fresh.gap) { setItems(fresh.gap.entries); setNext(fresh.gap.next); } else setItems((cur) => [...fresh.items, ...(cur ?? [])].sort(newestFirst));
-    setFresh({ items: [], gap: null });
-  };
-  const loadOlder = async (): Promise<void> => {
-    if (!next) return; setOlder(true); setOlderError(null);
-    try {
-      const r = await door(token, path(next));
-      // what is shown stays shown: only the older page failed
-      if (!r.ok) { setOlderError(await failure(r)); return; }
-      const b = (await r.json()) as Timeline;
-      setItems((cur) => { const known = new Set((cur ?? []).map(keyOf)); return [...(cur ?? []), ...b.entries.filter((p) => !known.has(keyOf(p)))]; }); setNext(b.next);
-    } catch (e) { setOlderError(`the World did not answer: ${e instanceof Error ? e.message : String(e)}`); } finally { setOlder(false); }
-  };
-  const days = useMemo(() => grouped(items ?? []), [items]);
-  const n = fresh.items.length;
-  return (
-    <>
-      <div role="group" aria-label="Filter by twin" className="chips">
-        <button type="button" aria-pressed={only === null} onClick={() => setOnly(null)}>All vendors</button>
-        {vendors.map((v) => <button key={v} type="button" aria-pressed={only === v} aria-label={v} onClick={() => setOnly(only === v ? null : v)}>{vendorName(v)}</button>)}
-      </div>
-      <div aria-live="polite" className="pill-slot">{n > 0 ? <button type="button" className="pill" onClick={show}>{fresh.gap ? `${n}+` : n} new change{n === 1 ? '' : 's'} — show</button> : null}</div>
-      {error ? <p role="alert">Could not read the timeline: {error}</p> : items === null ? <p className="mode" role="status">Loading the timeline…</p> : items.length === 0 ? (
-        only ? <p>Nothing has happened in {only} yet.</p> : (
-          <div className="empty">
-            <p><strong>Nothing has happened in this World yet.</strong></p>
-            <p className="mode">An entry arrives each time something changes a twin: an app (or a seed script) calling a twin's API at <code>{WORLDS}/{name}/&lt;twin&gt;</code>, a mirror's form, a changeset landing. They show here within a few seconds.</p>
-          </div>
-        )
-      ) : (
-        <div className="feed" aria-label="Timeline">
-          {days.map((d) => (
-            <div key={d.day} role="group" aria-label={d.label} className="day">
-              <h3 className="day-head">{d.label}</h3>
-              <ol className="instants">
-                {d.instants.map((g) => (
-                  <li key={`${g.at}:${keyOf(g.items[0]!)}`} className="instant">
-                    <div className="instant-time" title={g.items.length > 1 ? "These happened at the same moment of the World's clock: their order across vendors is not known." : undefined}><At iso={g.at} time /></div>
-                    <ul className="entries">{collapsed(g.items).map((x) => (Array.isArray(x)
-                      ? <li key={keyOf(x[0]!)} className="entry run"><details><summary><span className="twin-chip"><Mark vendor={x[0]!.twin} />{vendorName(x[0]!.twin)}</span> <span className="op">{counted(x.length, x[0]!.entry.subject.type)} {said(x[0]!.entry).what.split(' ').slice(-1)[0]}</span> <span className="actor mode">{byWhom(x[0]!.entry, x[0]!.twin)}</span></summary><ul className="entries">{x.map((p) => <EntryRow key={keyOf(p)} name={name} p={p} />)}</ul></details></li>
-                      : <EntryRow key={keyOf(x)} name={name} p={x} />))}</ul>
-                  </li>
-                ))}
-              </ol>
-            </div>
-          ))}
-          {next ? <button type="button" onClick={() => void loadOlder()} disabled={older} aria-busy={older}>Load older</button> : <p className="mode">The beginning of this World{only ? `'s ${only}` : ''}.</p>}
-          {olderError ? <p role="alert">Could not load older changes: {olderError}</p> : null}
-        </div>
-      )}
-    </>
-  );
+/** A value read as itself: text as text, anything else as its JSON, folded when long. */
+function Value({ v }: { v: unknown }): React.JSX.Element {
+  if (typeof v === 'string') return <Folded text={v} />;
+  if (v === null || typeof v !== 'object') return <code>{String(v)}</code>;
+  const json = JSON.stringify(v, null, 2);
+  return json.length <= 160 ? <code>{JSON.stringify(v)}</code> : <details className="folded"><summary><code>{JSON.stringify(v).slice(0, 120)}…</code></summary><pre>{json}</pre></details>;
 }
-
-/** A cause followed across vendors — a waterfall with a lane per twin, each step openable to its fields. */
-function Trace({ name, token, id }: { name: string; token: string; id: string }): React.JSX.Element {
-  const valid = /^[0-9a-f]{32}$/.test(id);
-  const load = useDoor<Timeline>(token, valid ? `/-/${name}/timeline?trace=${id}&limit=500` : null);
-  const steps = load.state === 'ok' ? [...load.data.entries].sort((a, b) => -newestFirst(a, b)) : [];
-  const lanes = [...new Set(steps.map((s) => s.twin))];
-  const t0 = steps[0] ? Date.parse(steps[0].entry.occurredAt) : 0;
-  const back = <a href={`${BASE}/${name}/~/timeline`} onClick={(e) => { e.preventDefault(); go([...name.split('/'), '~', 'timeline']); }}>← Timeline</a>;
+/** A message's words: its content when it is text, the text parts of it when it is parts. */
+const wordsOf = (content: unknown): string => (typeof content === 'string' ? content : Array.isArray(content) ? content.map((c) => (c && typeof c === 'object' && typeof (c as { text?: unknown }).text === 'string' ? (c as { text: string }).text : '')).filter(Boolean).join('\n') : JSON.stringify(content ?? ''));
+/** The request an entry carried (`input.body`): a chat's messages as a conversation, every other field by name. */
+function RequestBody({ body }: { body: unknown }): React.JSX.Element {
+  if (body === null || typeof body !== 'object' || Array.isArray(body)) return <Value v={body} />;
+  const b = body as Record<string, unknown>;
+  const messages = Array.isArray(b.messages) ? (b.messages as Array<{ role?: unknown; content?: unknown }>) : null;
+  const rest = Object.entries(b).filter(([k]) => !(messages && k === 'messages'));
   return (
     <>
-      <p>{back}</p>
-      <h3>Trace <code>{id}</code></h3>
-      {!valid ? <p role="alert">{id ? `${id} is not a trace id` : 'No trace named'}: a W3C trace id is 32 hex characters.</p> : <Pending load={load} what="the trace" />}
-      {load.state === 'ok' && steps.length === 0 ? (
-        <div className="empty">
-          <p><strong>Nothing in this World carries this trace.</strong></p>
-          <p className="mode">Causes are followed through the W3C <code>traceparent</code> header: an app instrumented with OpenTelemetry sends it with each call, and every entry that call writes keeps it — so one click in the app can be read across Stripe, Slack and the rest. Without it the World knows the order of what happened, not what caused what.</p>
-        </div>
-      ) : null}
-      {steps.length > 0 ? (
-        <>
-          <p className="mode">{steps.length} step{steps.length === 1 ? '' : 's'} across {lanes.length} twin{lanes.length === 1 ? '' : 's'}{load.state === 'ok' && load.data.next ? ' · the first 500 shown' : ''}</p>
-          <div role="table" aria-label="Trace waterfall" className="waterfall" style={{ gridTemplateColumns: `minmax(130px, auto) repeat(${lanes.length}, minmax(140px, 1fr))` }}>
-            <div role="row" className="wf-row wf-head">
-              <span role="columnheader">time</span>
-              {lanes.map((l) => <span role="columnheader" key={l}>{l}</span>)}
-            </div>
-            {steps.map((s) => {
-              const ms = Date.parse(s.entry.occurredAt) - t0; const span = traceOf(s.entry.traceparent)?.span;
-              return (
-                <div role="row" className="wf-row" key={keyOf(s)}>
-                  <span role="cell" className="wf-time"><At iso={s.entry.occurredAt} time /> <span className="mode">+{ms} ms</span></span>
-                  {lanes.map((l) => (
-                    <span role="cell" key={l} className={l === s.twin ? 'wf-cell on' : 'wf-cell'}>
-                      {l === s.twin ? (
-                        <details>
-                          <summary>{s.entry.operation ?? s.entry.op} <code>{s.entry.subject.type}:{s.entry.subject.id}</code></summary>
-                          <p className="mode">{actorOf(s.entry)} · {standing(s.entry)} · position {s.position}{span ? <> · span <code>{span}</code></> : null}</p>
-                          <Fields fields={s.entry.fields} />
-                        </details>
-                      ) : null}
-                    </span>
-                  ))}
-                </div>
-              );
-            })}
-          </div>
-        </>
-      ) : null}
+      {rest.length ? <dl className="fields">{rest.map(([k, v]) => <React.Fragment key={k}><dt>{k}</dt><dd><Value v={v} /></dd></React.Fragment>)}</dl> : null}
+      {messages ? <ol className="messages">{messages.map((m, i) => <li key={i}><span className="role">{typeof m.role === 'string' ? m.role : 'message'}</span><Folded text={wordsOf(m.content)} /></li>)}</ol> : null}
     </>
   );
 }
-
 function Fields({ fields }: { fields?: Record<string, unknown> }): React.JSX.Element {
   const rows = Object.entries(fields ?? {});
   if (rows.length === 0) return <p className="mode">No fields.</p>;
-  return <dl className="fields">{rows.map(([k, v]) => <React.Fragment key={k}><dt>{k}</dt><dd><code>{typeof v === 'string' ? v : JSON.stringify(v)}</code></dd></React.Fragment>)}</dl>;
+  return <dl className="fields">{rows.map(([k, v]) => <React.Fragment key={k}><dt>{k}</dt><dd><Value v={v} /></dd></React.Fragment>)}</dl>;
+}
+/** Where an entry stands: a receipt when a push or a deploy gave it one, else where it came from. */
+const receiptOf = (e: Entry): string => (e.receipt ? `${e.receipt.status ?? ''}${e.receipt.externalId ? ` · ${e.receipt.externalId}` : ''}${e.receipt.reason ? ` · ${e.receipt.reason}` : ''}` : e.operation === 'observed' ? 'observed from the vendor' : e.provenance === 'placeholder' ? 'default data' : 'none: it has not left this World');
+
+/** One event: when, at which vendor, what in words, on which record, by whom; opened, what it carried and what it wrote. */
+/** An event and the landed copies that are its receipts: a copy (`landsId`, or `aliasOf` under the vendor's id) is not an
+ *  event of its own but what a push or a deploy recorded of the entry it names. */
+type Folded = Placed & { copies: Placed[] };
+/** Each write once, its landed copies folded into it. A copy whose entry is not among these stays its own row, so nothing
+ *  the World answered is hidden. */
+function foldLanded(items: Placed[]): Folded[] {
+  const byId = new Map<string, Folded>(); const out: Folded[] = []; const copies: Placed[] = [];
+  const bySubject = new Map<string, Folded>();
+  for (const p of items) {
+    if (p.entry.landsId || p.entry.aliasOf) { copies.push(p); continue; }
+    const f = { ...p, copies: [] }; out.push(f);
+    if (!byId.has(`${p.twin}:${p.entry.id}`)) byId.set(`${p.twin}:${p.entry.id}`, f);
+    if (!bySubject.has(`${p.twin}:${p.entry.subject.type}:${p.entry.subject.id}`)) bySubject.set(`${p.twin}:${p.entry.subject.type}:${p.entry.subject.id}`, f);
+  }
+  for (const c of copies) {
+    // a copy folds into the entry its landsId names, and only there; the subject fallback is for a copy with no landsId
+    const into = c.entry.landsId ? byId.get(`${c.twin}:${c.entry.landsId}`) : c.entry.aliasOf ? bySubject.get(`${c.twin}:${c.entry.subject.type}:${c.entry.aliasOf}`) : undefined;
+    if (into) into.copies.push(c); else out.push({ ...c, copies: [] });
+  }
+  return out.sort(newestFirst);
+}
+/** How settled a receipt is: performed at the vendor over landed at the remote, a refusal or failure said as one. */
+const SETTLED: Record<string, number> = { deployed: 5, confirmed: 4, landed: 3, replayed: 2, skipped: 1 };
+function settledOf(f: Folded): { status: string; bad: boolean } | null {
+  const all = [f.entry.receipt, ...f.copies.map((c) => c.entry.receipt)].filter((r): r is NonNullable<Entry['receipt']> => Boolean(r?.status));
+  if (all.length === 0) return null;
+  const bad = all.find((r) => r.status === 'failed' || r.status === 'refused');
+  const best = [...all].sort((a, b) => (SETTLED[b.status!] ?? 0) - (SETTLED[a.status!] ?? 0))[0]!;
+  return bad && !(SETTLED[best.status!]! >= 5) ? { status: bad.status!, bad: true } : { status: best.status!, bad: false };
 }
 
+type RequestReport = { hours: number; requests: number; journalFailures?: number; twins: Array<{ twin: string; requests: number; byStatus: Record<string, number>; p50Ms: number | null; p95Ms: number | null; topRoutes: Array<{ route: string; requests: number }> }> };
+
+
+
 type MirrorSession = { state: 'pending' } | { state: 'ok'; scope: string } | { state: 'error'; error: string };
 /** THE CANVAS: every vendor's own screens as frames on one surface, the way a canvas app holds its frames (React
  *  Flow; Figma's and tldraw's feel). Pan by dragging the background, zoom with the wheel or the controls, move a frame
  *  by its title bar (kept in this browser), click a frame to use that vendor's screens and the background or Esc to
  *  leave it, so a frame never captures the pan. A frame is its vendor's site at a desktop's size. */
 const FRAME_W = 1280; const FRAME_H = 820; const FRAME_GAP = 160;
-type Screen = { world: string; vendor: string; active: boolean; open: (vendor: string) => void };
+type Screen = { world: string; vendor: string; active: boolean; open: (vendor: string) => void; /** its records changed and not yet cut: the screen's mark, as a changed file's */ changed: number };
 function ScreenFrame({ data }: NodeProps<Node<Screen>>): React.JSX.Element {
-  const { world, vendor, active, open } = data;
+  const { world, vendor, active, open, changed } = data;
   return (
     <>
       <NodeToolbar isVisible position={Position.Top} align="start" className="frame-label">
         <Mark vendor={vendor} /><span>{vendorName(vendor)}</span>
+        {changed ? <a className="frame-changed nodrag" href={`${BASE}/${world}/~/changes`} onClick={(e) => { e.preventDefault(); go([...world.split('/'), '~', 'changes']); }} title={`${counted(changed, 'record')} changed here, not in a changeset: see them in Changes`}><Icon name="square-dot" size={14} />{changed}</a> : null}
       </NodeToolbar>
       <div className={active ? 'frame on' : 'frame'} style={{ width: FRAME_W, height: FRAME_H }}>
         <div className="frame-bar" title="Drag to move">
           <Mark vendor={vendor} /><strong>{vendorName(vendor)}</strong>
           <span className="frame-url">{mirrorUrl(world, vendor).replace(/^https?:\/\//, '')}</span>
-          <a className="nodrag" href={`${BASE}/${world}/~/vendors/${vendor}`} onClick={(e) => { e.preventDefault(); open(vendor); }}>Open</a>
+          <a className="nodrag" href={`${BASE}/${world}/~/screens/${vendor}`} onClick={(e) => { e.preventDefault(); open(vendor); }}>Open</a>
           <a className="nodrag" href={mirrorUrl(world, vendor)} target="_blank" rel="noopener noreferrer" aria-label={`Open ${vendorName(vendor)} in a new tab`}>↗</a>
         </div>
         <div className={active ? 'frame-body nodrag nopan nowheel' : 'frame-body'}>
@@ -1323,25 +1691,33 @@ function ScreenFrame({ data }: NodeProps<Node<Screen>>): React.JSX.Element {
   );
 }
 const FRAME_TYPES = { screen: ScreenFrame };
-function Canvas(props: { name: string; twins: Load<{ twins: Twin[] }>; session: MirrorSession; retry: () => void; snapshot: Snapshot | null; back: () => void }): React.JSX.Element {
+function Canvas(props: { name: string; token: string; twins: Load<{ twins: Twin[] }>; session: MirrorSession; retry: () => void; snapshot: Snapshot | null; back: () => void }): React.JSX.Element {
   return <ReactFlowProvider><CanvasSurface {...props} /></ReactFlowProvider>;
 }
 /** The canvas fills the window, as Figma's, tldraw's and Miro's do: the way back and the frames' list float at the top
  *  left (a canvas app's layers), zoom at the bottom left, the minimap at the bottom right. */
-function CanvasSurface({ name, twins, session, retry, snapshot, back }: { name: string; twins: Load<{ twins: Twin[] }>; session: MirrorSession; retry: () => void; snapshot: Snapshot | null; back: () => void }): React.JSX.Element {
+function CanvasSurface({ name, token, twins, session, retry, snapshot, back }: { name: string; token: string; twins: Load<{ twins: Twin[] }>; session: MirrorSession; retry: () => void; snapshot: Snapshot | null; back: () => void }): React.JSX.Element {
+  // each screen's changes not yet cut, by vendor: the records, as Changes counts them
+  const diff = useDoor<Diff>(token, `/-/${name}/diff`);
+  const changed = useMemo((): Record<string, number> => {
+    const by: Record<string, Set<string>> = {};
+    if (diff.state === 'ok') for (const c of diff.data.changes) (by[c.twin] ??= new Set()).add(`${c.entry.subject.type}:${c.entry.subject.id}`);
+    return Object.fromEntries(Object.entries(by).map(([v, rs]) => [v, rs.size]));
+  }, [diff]);
+  const changedAt = (v: string): number => changed[v] ?? 0;
   const frames = twins.state === 'ok' ? twins.data.twins.filter((t) => t.mirror).map((t) => t.twin) : [];
   const saved = `volter.canvas.${name}`;
   const [active, setActive] = useState<string | null>(null);
   const [layers, setLayers] = useState(true);
   const flow = useReactFlow();
-  const open = useCallback((v: string): void => go([...name.split('/'), '~', 'vendors', v]), [name]);
+  const open = useCallback((v: string): void => go([...name.split('/'), '~', 'screens', v]), [name]);
   const cols = Math.max(1, Math.ceil(Math.sqrt(frames.length)));
   const placed = useCallback((): Array<Node<Screen>> => {
     let kept: Record<string, { x: number; y: number }> = {};
     try { kept = JSON.parse(localStorage.getItem(saved) ?? '{}') as Record<string, { x: number; y: number }>; } catch { /* a convenience */ }
-    return frames.map((v, i) => ({ id: v, type: 'screen', dragHandle: '.frame-bar', position: kept[v] ?? { x: (i % cols) * (FRAME_W + FRAME_GAP), y: Math.floor(i / cols) * (FRAME_H + FRAME_GAP) }, data: { world: name, vendor: v, active: false, open } }));
+    return frames.map((v, i) => ({ id: v, type: 'screen', dragHandle: '.frame-bar', position: kept[v] ?? { x: (i % cols) * (FRAME_W + FRAME_GAP), y: Math.floor(i / cols) * (FRAME_H + FRAME_GAP) }, data: { world: name, vendor: v, active: false, open, changed: changed[v] ?? 0 } }));
     // biome-ignore lint/correctness/useExhaustiveDependencies: the frames' names are what change it
-  }, [frames.join(','), name, cols, open]);
+  }, [frames.join(','), name, cols, open, changed]);
   const [nodes, setNodes, onNodesChange] = useNodesState<Node<Screen>>([]);
   useEffect(() => { setNodes(placed()); }, [placed, setNodes]);
   useEffect(() => { setNodes((all) => all.map((n) => (n.data.active === (n.id === active) ? n : { ...n, data: { ...n.data, active: n.id === active } }))); }, [active, setNodes]);
@@ -1372,8 +1748,7 @@ function CanvasSurface({ name, twins, session, retry, snapshot, back }: { name:
           </div>
           {layers ? (
             <ul className="layer-list" aria-label="Screens">
-              {frames.map((v) => <li key={v}><button type="button" className={active === v ? 'on' : undefined} onClick={() => focus(v)}><Mark vendor={v} /><span>{vendorName(v)}</span></button></li>)}
-              {twins.state === 'ok' && frames.length === 0 ? <li className="mode">No vendor in this World has screens.</li> : null}
+              {frames.map((v) => <li key={v}><button type="button" className={active === v ? 'on' : undefined} onClick={() => focus(v)}><Mark vendor={v} /><span>{vendorName(v)}</span>{changedAt(v) ? <span className="layer-changed" title={`${counted(changedAt(v), 'record')} changed, not in a changeset`}><Icon name="square-dot" size={14} />{changedAt(v)}</span> : null}</button></li>)}
             </ul>
           ) : null}
           <Pending load={twins} what="the vendors" />
@@ -1388,117 +1763,109 @@ function CanvasSurface({ name, twins, session, retry, snapshot, back }: { name:
   );
 }
 
-/** What this World changed since its base — what a changeset would cut — in a compare view, by twin. */
 /** A changeset as the World's changesets door answers it: what it does at each vendor, the checks it ran, who signed
- *  which bytes, and whether it went to the real vendors (with a receipt for each change). */
+ *  which bytes, and where it went (`applied`: a push's or a deploy's receipts, one per change). */
 type ChangesetView = {
-  name: string; message?: string; narration?: string; createdAt: string; contentHash: string; /** the body's hash as it stands (GET …/changesets) */ currentHash?: string;
+  /** who cut it, owns it and pushed it (a caller, a person, a caller), when recorded */
+  cutBy?: string; owner?: string; pushedBy?: string;
+  name: string; message?: string; narration?: string; createdAt: string; contentHash: string; /** the kernel's readiness under this World's rules (GET …/changesets) */ readiness?: { approvers: number; required: number; ready: boolean }; /** the body's hash as it stands (GET …/changesets) */ currentHash?: string;
   actions: Array<{ service: string; action: Omit<Entry, 'service' | 'op'> & { op?: string; operation?: string } }>;
   verification: { at: string; contentHash: string; passed: boolean; results: Array<{ id: string; service: string; passed: boolean; actual?: unknown }>; refusals?: Array<{ service: string; check: string; reason: string }> } | null;
   approvals: Array<{ principal: string; at: string; contentHash: string; note?: string }>;
   applied: { at: string; outcome: 'applied' | 'partial' | 'refused'; refusal?: string[]; receipts: Array<{ actionId: string; service: string; status: string; externalId?: string; url?: string; error?: string }> } | null;
+  /** what a deploy did of each action, from the landed copies on each twin's log: only `deployed` was performed against the vendor */
+  deployed?: Array<{ service: string; actionId: string; status: 'landed' | 'deployed' | 'refused' | 'failed' | 'skipped'; at: string; externalId?: string; url?: string; reason?: string }>;
 };
-/** Its actions as the Changes view shows entries: by vendor. */
-const changesetGroups = (c: ChangesetView): Array<[string, Entry[]]> => {
-  const m = new Map<string, Entry[]>();
-  for (const a of c.actions) m.set(a.service, [...(m.get(a.service) ?? []), { ...a.action, service: a.service, op: a.action.op ?? a.action.operation ?? '' } as Entry]);
-  return [...m.entries()];
-};
-/** Where it stands, in a word, and the state behind the word: a verification or an approval of other bytes is stale. */
-function changesetStatus(c: ChangesetView): { label: string; tone: 'done' | 'good' | 'warn' | 'bad' | 'plain' } {
-  if (c.applied) return c.applied.outcome === 'applied' ? { label: 'Deployed', tone: 'done' } : c.applied.outcome === 'partial' ? { label: 'Partly deployed', tone: 'warn' } : { label: 'Deploy refused', tone: 'bad' };
+/** Its actions as the Changes page shows a diff's: each with its vendor. */
+const changesetChanges = (c: ChangesetView): Array<{ twin: string; entry: Entry }> => c.actions.map((a) => ({ twin: a.service, entry: { ...a.action, service: a.service, op: a.action.op ?? a.action.operation ?? '' } as Entry }));
+/** Where it went, from its receipts alone. Performed at the vendor: an action with a `deployed` receipt (a deploy from
+ *  here), or a push receipt `confirmed` (the remote performed it). Every action performed is Deployed, some is Partly
+ *  deployed; a refused or failed one is said as a failure; otherwise the push decides: every change replayed at the remote
+ *  is Pushed (the remote World, never a vendor), else Not sent. */
+function sentOf(c: ChangesetView): { label: string; tone: 'done' | 'good' | 'warn' | 'bad' | 'plain'; performed: number; failed: number; total: number } {
+  const total = c.actions.length;
+  const pushed = c.applied?.receipts ?? []; const deployed = c.deployed ?? [];
+  const performed = new Set([...deployed.filter((r) => r.status === 'deployed'), ...pushed.filter((r) => r.status === 'confirmed')].map((r) => r.actionId)).size;
+  const failed = new Set([...deployed.filter((r) => r.status === 'refused' || r.status === 'failed'), ...pushed.filter((r) => r.status === 'failed')].map((r) => r.actionId)).size;
+  const n = { performed, failed, total };
+  if (total > 0 && performed >= total) return { label: 'Deployed', tone: 'done', ...n };
+  if (performed > 0) return { label: `Partly deployed: ${performed} of ${total}`, tone: 'warn', ...n };
+  if (failed > 0) return { label: `${failed} refused or failed`, tone: 'bad', ...n };
+  if (pushed.some((r) => r.status === 'replayed') && pushed.every((r) => r.status === 'replayed' || r.status === 'skipped')) return { label: 'Pushed', tone: 'good', ...n };
+  return { label: 'Not sent', tone: 'plain', ...n };
+}
+/** Its review, in a word: a verification or an approval of other bytes is stale and does not count. */
+/** How this World's changesets are made and readied (its `rules` door): approvals needed, and whether a cut's summary is required. */
+type ChangesetRules = { approvals?: number; summary?: 'required' | 'generated' };
+/** A changeset's title: its author's summary, else what the summary generated from its changes did first (without the
+ *  fields it set, which its page lists), else its name. */
+const titleOf = (c: ChangesetView): string => c.message ?? c.narration?.split('\n')[0]?.replace(/ setting .*$/, '') ?? c.name;
+function reviewOf(c: ChangesetView, required = 1): { label: string; tone: 'good' | 'bad' | 'plain' } {
   const now = c.currentHash ?? c.contentHash;
-  const signed = c.approvals.filter((a) => a.contentHash === now).length;
+  // the different people who approved its current contents, as readiness counts them (a key counts for its person)
+  const signed = c.readiness?.approvers ?? new Set(c.approvals.filter((a) => a.contentHash === now).map((a) => a.principal)).size;
   const checked = c.verification && c.verification.contentHash === now ? c.verification : null;
   if (checked && !checked.passed) return { label: 'Checks failed', tone: 'bad' };
+  if (signed > 0 && signed < required) return { label: `Approved by ${signed} of ${required}`, tone: 'plain' };
   if (signed > 0) return { label: `Approved by ${signed}`, tone: 'good' };
   if (checked) return { label: 'Verified', tone: 'good' };
   return { label: 'Not verified', tone: 'plain' };
 }
 
-/** THE CHANGESETS: what this World would do, cut into reviewable pieces, listed as a repository lists pull requests;
- *  each one's page reviews it (its changes by vendor, its checks, its approvals) and, where the World has a real root,
- *  deploys it. Every button is the World's own door; a refusal is the door's words. */
-function Changesets({ name, token, signsAs, canWrite, rooted, open: opened, refused }: { name: string; token: string; signsAs: string | null; canWrite: boolean; rooted: string[]; open?: string; refused: (r: Response) => void }): React.JSX.Element {
-  const [version, setVersion] = useState(0);
-  const list = useDoor<{ changesets: ChangesetView[] }>(token, `/-/${name}/changesets`, version);
-  const at = (c: string) => (e: React.MouseEvent): void => { e.preventDefault(); go([...name.split('/'), '~', 'changesets', c]); };
-  if (opened) {
-    const c = list.state === 'ok' ? list.data.changesets.find((x) => x.name === opened) : undefined;
-    return (
-      <>
-        <p className="crumbs-line"><a href={`${BASE}/${name}/~/changesets`} onClick={(e) => { e.preventDefault(); go([...name.split('/'), '~', 'changesets']); }}>← Changesets</a></p>
-        <Pending load={list} what="the changesets" />
-        {list.state === 'ok' && !c ? <p className="mode">This World has no changeset named {opened}.</p> : null}
-        {c ? <ChangesetPage name={name} token={token} signsAs={signsAs} c={c} canWrite={canWrite} rooted={rooted} refused={refused} onChanged={() => setVersion((v) => v + 1)} /> : null}
-      </>
-    );
-  }
-  const rows = list.state === 'ok' ? [...list.data.changesets].sort((a, b) => b.createdAt.localeCompare(a.createdAt)) : [];
-  return (
-    <>
-      <p className="lede">A changeset is what this World changed, cut into a piece a person reviews: what it does at each vendor, the World's checks over it, and who approved it. Where the World has a real account behind a vendor, an approved changeset deploys there, with a receipt for each change.</p>
-      <Pending load={list} what="the changesets" />
-      {list.state === 'ok' && rows.length === 0 ? (
-        <Empty title="No changesets yet">
-          <p>Cut one from what your app did in this World: <code>volter world changeset -m "What it does and why"</code>. Pushed to a shared World, it shows up here for review.</p>
-        </Empty>
-      ) : null}
-      {rows.length > 0 ? (
-        <div className="block">
-          <table className="dense" aria-label="Changesets">
-            <thead><tr><th>Changeset</th><th>Changes</th><th>Made</th><th>Status</th></tr></thead>
-            <tbody>{rows.map((c) => {
-              const s = changesetStatus(c);
-              const counts = changesetGroups(c).map(([v, es]) => `${es.length} at ${vendorName(v)}`).join(' · ');
-              return (
-                <tr key={c.name}>
-                  <td><a href={`${BASE}/${name}/~/changesets/${c.name}`} onClick={at(c.name)}><b>{c.message ?? c.name}</b></a>{c.message ? <span className="mode mono"> {c.name}</span> : null}</td>
-                  <td className="mode">{counts || 'nothing'}</td>
-                  <td className="mode"><At iso={c.createdAt} /></td>
-                  <td><span className={`badge cs-${s.tone}`}>{s.label}</span></td>
-                </tr>
-              );
-            })}</tbody>
-          </table>
-        </div>
-      ) : null}
-    </>
-  );
-}
 
-/** One changeset, reviewed: its words, its changes by vendor, its checks, its approvals and its receipts; Verify,
- *  Approve (signed as the person this session is for) and Deploy where they apply, each saying why when it does not. */
-function ChangesetPage({ name, token, signsAs, c, canWrite, rooted, refused, onChanged }: { name: string; token: string; signsAs: string | null; c: ChangesetView; canWrite: boolean; rooted: string[]; refused: (r: Response) => void; onChanged: () => void }): React.JSX.Element {
+/** One changeset, reviewed: its words, its changes, its checks, its approvals, and where it went; Verify, Approve
+ *  (signed as the person this session is for) and Deploy where they apply, each saying why when it does not. */
+function ChangesetPage({ name, token, signsAs, c, canWrite, rooted, refused, onChanged, part, required }: { /** approvals this World requires */ required: number; name: string; token: string; signsAs: string | null; c: ChangesetView; canWrite: boolean; rooted: string[]; refused: (r: Response) => void; onChanged: () => void; /** which part of it (the workspace's History): its head with the acts, or its review (where it went, checks, approvals) */ part: 'head' | 'review' }): React.JSX.Element {
+  const showHead = part === 'head'; const showReview = part === 'review';
   const [busy, setBusy] = useState<string | null>(null);
   const [approving, setApproving] = useState(false); const [note, setNote] = useState(''); const [as, setAs] = useState('');
-  const s = changesetStatus(c);
-  const groups = changesetGroups(c);
-  const touches = groups.map(([v]) => v);
+  // why the last act was refused, in this page's words, with the acts that answer it
+  const [problem, setProblem] = useState<{ what: string; text: string; acts: Act[] } | null>(null);
+  const origin = useDoor<OriginDoor>(token, `/-/${name}/origin`);
+  const sent = sentOf(c); const review = reviewOf(c, required);
+  const changes = changesetChanges(c);
+  const touches = [...new Set(changes.map((x) => x.twin))];
   const deployable = touches.some((v) => rooted.includes(v));
   const current = (h: string): boolean => h === (c.currentHash ?? c.contentHash);
+  const receipts = c.applied?.receipts ?? [];
+  const atVendor = (c.deployed ?? []).filter((r) => r.status !== 'landed');
+  const byRemote = receipts.filter((r) => r.status === 'confirmed').length;
+  const here = atVendor.filter((r) => r.status === 'deployed');
   const act = async (what: string, path: string, body?: unknown, done?: string): Promise<boolean> => {
-    setBusy(what);
+    setBusy(what); setProblem(null);
     try {
       const r = await door(token, path, { method: 'POST', ...(body === undefined ? {} : { body: JSON.stringify(body) }) });
-      if (!r.ok) { refused(r); toast(`${what}: ${await failure(r)}`, 'error'); return false; }
+      if (!r.ok) { refused(r); setProblem({ what, ...plainly(await doorWords(r)) }); return false; }
       if (done) toast(done);
       onChanged(); return true;
-    } catch (e) { toast(`${what}: the World did not answer (${e instanceof Error ? e.message : String(e)})`, 'error'); return false; } finally { setBusy(null); }
+    } catch (e) { setProblem({ what, text: `the World did not answer (${e instanceof Error ? e.message : String(e)})`, acts: [] }); return false; } finally { setBusy(null); }
   };
   const verify = (): void => { void act('Verify', `/-/${name}/changesets/${c.name}/verify`, undefined, 'Verified: the checks ran over it'); };
   const approve = async (e: React.FormEvent): Promise<void> => { e.preventDefault(); if (await act('Approve', `/-/${name}/changesets/${c.name}/approve`, { ...(note.trim() ? { note: note.trim() } : {}), ...(signsAs === null && as.trim() ? { as: as.trim() } : {}) }, 'Approved')) { setApproving(false); setNote(''); } };
   const deploy = async (): Promise<void> => {
-    if (!(await confirmAct({ title: `Deploy ${c.name} to the real vendors?`, body: <>It performs its {c.actions.length} change{c.actions.length === 1 ? '' : 's'} against the real account{touches.filter((v) => rooted.includes(v)).length === 1 ? '' : 's'} behind {listed(touches.filter((v) => rooted.includes(v)).map(vendorName))}. This cannot be taken back here.</>, action: 'Deploy', danger: true, typed: c.name }))) return;
-    void act('Deploy', `/-/${name}/deploy/${c.name}`, { confirm: c.name }, 'Deployed: the receipts are below');
+    const to = touches.filter((v) => rooted.includes(v));
+    if (!(await confirmAct({ title: `Deploy ${c.name} to the real vendors?`, body: <>It performs its {c.actions.length} change{c.actions.length === 1 ? '' : 's'} against the real account{to.length === 1 ? '' : 's'} behind {listed(to.map(vendorName))}. This cannot be taken back here.</>, action: 'Deploy', danger: true, typed: c.name }))) return;
+    setBusy('Deploy'); setProblem(null);
+    try {
+      const r = await door(token, `/-/${name}/deploy/${c.name}`, { method: 'POST', body: JSON.stringify({ confirm: c.name }) });
+      if (!r.ok) { refused(r); setProblem({ what: 'Deploy', ...plainly(await doorWords(r)) }); return; }
+      // what it did is the changeset's own receipts, read again: its actions' `deployed` receipts, never a count the door sums
+      const again = await door(token, `/-/${name}/changesets/${c.name}`);
+      const now = again.ok ? ((await again.json()) as ChangesetView) : null;
+      if (!now) { toast('Deploy: sent; reading its receipts failed', 'info'); onChanged(); return; }
+      const s = sentOf(now);
+      toast(`Deploy: ${s.performed} of ${s.total} change${s.total === 1 ? '' : 's'} performed at the vendor${s.failed ? `; ${s.failed} refused or failed` : ''}`, s.failed ? 'error' : s.performed ? 'ok' : 'info');
+      onChanged();
+    } catch (e) { setProblem({ what: 'Deploy', text: `the World did not answer (${e instanceof Error ? e.message : String(e)})`, acts: [] }); } finally { setBusy(null); }
   };
-  // why a button is off, in words: the reader's scope, what already happened, or the World's own rule
-  const offWhy = !canWrite ? 'This session reads the World; it changes nothing' : c.applied ? 'Already deployed' : null;
+  // why a button is off, in words: the reader's scope, or what already happened
+  const offWhy = !canWrite ? 'This session reads the World; it changes nothing' : sent.label === 'Deployed' ? 'Already deployed: every change was performed at the vendor' : null;
+  const there = origin.state === 'ok' && origin.data.origin ? originAddress(origin.data.origin) : null;
   return (
     <div className="changeset" aria-labelledby="changeset-title">
-      <div className="changeset-head">
+      {showHead ? <><div className="changeset-head">
         <div>
-          <h3 id="changeset-title">{c.message ?? c.name} <span className={`badge cs-${s.tone}`}>{s.label}</span></h3>
+          <h3 id="changeset-title">{c.message ?? c.name} <span className={`badge cs-${sent.tone}`}>{sent.label}</span> <span className={`badge cs-${review.tone}`}>{review.label}</span></h3>
           <p className="mode"><code>{c.name}</code> · made <At iso={c.createdAt} /> · {c.actions.length} change{c.actions.length === 1 ? '' : 's'} at {listed(touches.map(vendorName)) || 'no vendor'}</p>
         </div>
         <div className="changeset-actions">
@@ -1507,12 +1874,35 @@ function ChangesetPage({ name, token, signsAs, c, canWrite, rooted, refused, onC
           {deployable ? <button type="button" className="primary" onClick={() => void deploy()} disabled={Boolean(offWhy) || busy !== null} title={offWhy ?? 'Perform it against the real accounts behind this World'}>{busy === 'Deploy' ? 'Deploying…' : 'Deploy…'}</button> : null}
         </div>
       </div>
-      {offWhy && !c.applied ? <p className="mode">{offWhy}.</p> : null}
-      {!deployable && !c.applied ? <p className="mode">It stays in this World: no vendor it changes has a real account behind it here (a shared World with a root deploys; see Settings › Real services).</p> : null}
+      {offWhy && sent.label !== 'Deployed' ? <p className="mode">{offWhy}.</p> : null}
+      {problem ? (
+        <div role="alert" className="refusal">
+          <span><b>{problem.what}</b>: {problem.text}</span>
+          {problem.acts.includes('verify') && canWrite ? <button type="button" onClick={verify} disabled={busy !== null}>Verify</button> : null}
+          {problem.acts.includes('approve') && canWrite ? <button type="button" onClick={() => setApproving(true)} disabled={busy !== null}>Approve…</button> : null}
+          <ActLinks name={name} acts={problem.acts} />
+        </div>
+      ) : null}
+      </> : null}
+      {showReview ? <>
       {c.narration ? <p className="narration">{c.narration}</p> : null}
 
-      <h4>Changes</h4>
-      {groups.length === 0 ? <p className="mode">It changes nothing.</p> : <ByVendor groups={groups} idPrefix={`cs-${c.name}`} />}
+      <h4>Where it went</h4>
+      <div className="block where">
+        {sent.performed > 0 ? (
+          <p className="pad">{sent.performed >= sent.total ? 'Deployed' : 'Partly deployed'}: {sent.performed} of {sent.total} change{sent.total === 1 ? '' : 's'} performed at {listed([...new Set([...here.map((r) => r.service), ...receipts.filter((r) => r.status === 'confirmed').map((r) => r.service)].map(vendorName))])}{here.length ? ` (${here.length} from here` : ' ('}{here.length && byRemote ? ', ' : ''}{byRemote ? `${byRemote} by the remote` : ''}).</p>
+        ) : sent.label === 'Pushed' ? (
+          <p className="pad">Pushed to the remote{there ? <> <code>{there}</code></> : null}{c.applied ? <> · <At iso={c.applied.at} /></> : null}: every change was replayed there. No vendor has performed any of it.</p>
+        ) : sent.failed === 0 ? (
+          <p className="pad">Not sent: it is only in this World.{c.applied?.outcome === 'refused' ? ' A push was refused (below); Push sends it again.' : <> Push sends it to the remote World{deployable ? '; Deploy, to the real vendors behind it' : ''}.</>}</p>
+        ) : null}
+        {sent.failed > 0 ? <p className="pad failed" role="alert">{sent.failed} change{sent.failed === 1 ? ' was' : 's were'} refused or failed at the vendor{[...atVendor.filter((r) => r.reason && (r.status === 'refused' || r.status === 'failed')).map((r) => r.reason!), ...receipts.filter((r) => r.status === 'failed' && r.error).map((r) => r.error!)].slice(0, 3).map((w) => `: ${plainly(w).text}`).join('')}.</p> : null}
+        {c.applied?.refusal?.length ? <ul className="checks pad">{c.applied.refusal.map((r, i) => <li key={i} className="mode">{plainly(r).text}</li>)}</ul> : null}
+        {atVendor.length ? <><p className="pad where-sub mode">At the vendor</p><ul className="receipts pad">{atVendor.map((r) => <li key={`v:${r.actionId}`}><span className={r.status === 'refused' || r.status === 'failed' ? 'badge cs-bad' : r.status === 'deployed' ? 'badge cs-done' : 'badge'}>{r.status}</span> {vendorName(r.service)} {r.status === 'deployed' ? (r.url ? <a href={r.url} target="_blank" rel="noopener noreferrer">{r.externalId ?? r.url}</a> : r.externalId ? <code>{r.externalId}</code> : null) : null}{r.reason ? <span className="mode"> · {plainly(r.reason).text}</span> : null} <span className="mode">· <At iso={r.at} /></span></li>)}</ul></> : null}
+        {receipts.length ? <><p className="pad where-sub mode">At the remote</p><ul className="receipts pad">{receipts.map((r) => <li key={`r:${r.actionId}`}><span className={r.status === 'failed' ? 'badge cs-bad' : r.status === 'confirmed' ? 'badge cs-done' : 'badge'}>{r.status}</span> {vendorName(r.service)} <span className="mode">{r.status === 'replayed' ? 'replayed at the remote World' : r.status === 'confirmed' ? 'performed at the vendor by the remote' : ''}</span>{r.status === 'confirmed' && r.externalId ? <> <code>{r.externalId}</code></> : null}{r.error ? <span className="mode"> · {plainly(r.error).text}</span> : null}</li>)}</ul></> : null}
+      </div>
+      {!deployable && sent.label !== 'Deployed' ? <p className="mode">No vendor it changes is connected to its real service here, so it does not deploy from this World. <a href={`${BASE}/${name}/~/settings/services`} onClick={(e) => { e.preventDefault(); go([...name.split('/'), '~', 'settings', 'services']); }}>Connect a vendor in Settings › Real services</a> to deploy.</p> : null}
+
 
       <h4>Checks</h4>
       {!c.verification ? <p className="mode">Not verified yet. Verify replays it in a throwaway World and runs this World's checks over the result.</p> : (
@@ -1527,15 +1917,7 @@ function ChangesetPage({ name, token, signsAs, c, canWrite, rooted, refused, onC
       {c.approvals.length === 0 ? <p className="mode">No one has approved it.</p> : (
         <ul className="approvals">{c.approvals.map((a, i) => <li key={i}><b>{a.principal}</b> <span className="mode"><At iso={a.at} />{current(a.contentHash) ? '' : ' · signed an earlier version'}</span>{a.note ? <div className="mode">“{a.note}”</div> : null}</li>)}</ul>
       )}
-
-      {c.applied ? (
-        <>
-          <h4>Deployed</h4>
-          <p>{c.applied.outcome === 'applied' ? 'Every change reached the real vendors' : c.applied.outcome === 'partial' ? 'Some changes reached the real vendors' : 'The deploy was refused'} · <At iso={c.applied.at} /></p>
-          {c.applied.refusal?.length ? <ul className="checks">{c.applied.refusal.map((r, i) => <li key={i} className="mode">{r}</li>)}</ul> : null}
-          {c.applied.receipts.length ? <ul className="receipts">{c.applied.receipts.map((r) => <li key={r.actionId}><span className={r.status === 'failed' ? 'badge cs-bad' : 'badge cs-done'}>{r.status}</span> {vendorName(r.service)} {r.url ? <a href={r.url} target="_blank" rel="noopener noreferrer">{r.externalId ?? r.url}</a> : r.externalId ? <code>{r.externalId}</code> : null}{r.error ? <span className="mode"> · {r.error}</span> : null}</li>)}</ul> : null}
-        </>
-      ) : null}
+      </> : null}
 
       <Dialog open={approving} onClose={() => { if (!busy) setApproving(false); }} title={`Approve ${c.name}`} footer={<><button type="button" onClick={() => setApproving(false)} disabled={busy !== null}>Cancel</button><button type="submit" form="approve-changeset" className="primary" disabled={busy !== null}>{busy === 'Approve' ? 'Approving…' : 'Approve'}</button></>}>
         <form id="approve-changeset" onSubmit={(e) => void approve(e)} className="stack">
@@ -1548,56 +1930,100 @@ function ChangesetPage({ name, token, signsAs, c, canWrite, rooted, refused, onC
   );
 }
 
-/** What a set of entries does at each vendor, grouped by vendor, runs of three alike folded: the Changes view's and a
- *  changeset's page's one rendering. */
-function ByVendor({ groups, idPrefix }: { groups: Array<[string, Entry[]]>; idPrefix: string }): React.JSX.Element {
-  return (<>{groups.map(([t, entries]) => (
-            <div key={t} className="compare" role="group" aria-labelledby={`${idPrefix}-${t}`}>
-              <h3 id={`${idPrefix}-${t}`} className="vendor-cell"><Mark vendor={t} />{vendorName(t)} <span className="mode">· {entries.length} change{entries.length === 1 ? '' : 's'}</span></h3>
-              <ul>{runsOf(entries).map((run) => run.length >= 3 ? (
-                <li key={run[0]!.id}>
-                  <details>
-                    <summary><span className="op">{counted(run.length, run[0]!.subject.type)} {said(run[0]!).what.split(' ').slice(-1)[0]}</span> <span className="mode">{run.map((e) => said(e).label ?? shown(e)).slice(0, 4).join(', ')}{run.length > 4 ? ', …' : ''}</span></summary>
-                    <ul>{run.map((e) => <li key={e.id}><span className="op">{said(e).what}</span> {said(e).label ? <span className="label">“{said(e).label}”</span> : <code>{shown(e)}</code>} <span className="mode"><At iso={e.occurredAt} /> · {byWhom(e, t)}</span></li>)}</ul>
-                  </details>
-                </li>
-              ) : run.map((e) => (
-                <li key={e.id}>
-                  <details>
-                    <summary><span className="op">{said(e).what}</span> {said(e).label ? <span className="label">“{said(e).label}”</span> : <code>{shown(e)}</code>} <span className="mode"><At iso={e.occurredAt} /> · {byWhom(e, t)}</span></summary>
-                    <Fields fields={e.fields} />
-                  </details>
-                </li>
-              )))}</ul>
-            </div>
-  ))}</>);
+/** Two field values the same, whatever their shape. */
+const same = (a: unknown, b: unknown): boolean => JSON.stringify(a) === JSON.stringify(b);
+/** What a set of changes does, as a working-tree diff reads (GitHub's): by vendor, then record by record, each write
+ *  with the fields it set, field by field: the value it had before (an earlier write here) and the value now. A field a
+ *  later write sets to what it already was is not a change and is not shown. The Changes page's, a changeset's and a
+ *  branch's one rendering. */
+function RecordChanges({ changes, idPrefix }: { changes: Array<{ twin: string; entry: Entry }>; idPrefix: string }): React.JSX.Element {
+  const vendors = [...new Set(changes.map((c) => c.twin))];
+  return (
+    <>{vendors.map((t) => {
+      const mine = changes.filter((c) => c.twin === t).map((c) => c.entry);
+      const records = [...new Set(mine.map((e) => `${e.subject.type}:${e.subject.id}`))];
+      return (
+        <div key={t} className="compare" role="group" aria-labelledby={`${idPrefix}-${t}`}>
+          <h3 id={`${idPrefix}-${t}`} className="vendor-cell"><Mark vendor={t} />{vendorName(t)} <span className="mode">· {counted(records.length, 'record')}, {counted(mine.length, 'write')}</span></h3>
+          <ul>{records.map((rid) => {
+            const writes = mine.filter((e) => `${e.subject.type}:${e.subject.id}` === rid);
+            const head = writes[writes.length - 1]!; const s = said(head);
+            let before: Record<string, unknown> = {};
+            return (
+              <li key={rid} className="record">
+                <p className="record-head"><span className="kind">{head.subject.type.replace(/^_+/, '').replace(/[_-]+/g, ' ')}</span> {s.label ? <span className="label">“{s.label}”</span> : null} <code>{shown(head)}</code></p>
+                {writes.map((e) => {
+                  const f = e.fields ?? {};
+                  const rows = Object.entries(f).filter(([k, v]) => !(k in before) || !same(before[k], v));
+                  const was = before; before = { ...before, ...f };
+                  return (
+                    <div key={e.id} className="write">
+                      <p className="mode"><span className="op">{said(e).what}</span> · <At iso={e.occurredAt} /> · {whoDid(e)}</p>
+                      {rows.length === 0 ? <p className="mode">It set no field to a new value.</p> : (
+                        <dl className="fields field-diff" aria-label={`Fields ${said(e).what} set`}>{rows.map(([k, v]) => (
+                          <React.Fragment key={k}>
+                            <dt>{k}</dt>
+                            <dd>{k in was ? <span className="changed"><del><Value v={was[k]} /></del><span className="arrow" aria-label="becomes">→</span><ins><Value v={v} /></ins></span> : <Value v={v} />}</dd>
+                          </React.Fragment>
+                        ))}</dl>
+                      )}
+                    </div>
+                  );
+                })}
+              </li>
+            );
+          })}</ul>
+        </div>
+      );
+    })}</>
+  );
 }
 
-function Changes({ name, token }: { name: string; token: string }): React.JSX.Element {
-  const diff = useDoor<Diff>(token, `/-/${name}/diff`);
-  const byTwin = useMemo(() => {
-    const m = new Map<string, Entry[]>();
-    if (diff.state === 'ok') for (const c of diff.data.changes) m.set(c.twin, [...(m.get(c.twin) ?? []), c.entry]);
-    return [...m.entries()];
-  }, [diff]);
+/** Cut a changeset (committing from the working changes): this branch's changes not cut, as one changeset to review
+ *  and push. Said on the page when it is done or refused. */
+function CutChangeset({ name, token, changes, canWrite, refused, onCut, pinned, generated, inputRef, author }: { name: string; token: string; changes: number; canWrite: boolean; refused: (r: Response) => void; onCut: () => void; /** the workspace's: pinned along the foot of Changes, there (and off) when there is nothing to cut, as a commit box is */ pinned?: boolean; /** this World's rules take the summary generated from the changes when none is given */ generated?: boolean; /** who cuts it and onto which branch, as GitHub Desktop's commit box shows its author and "Commit 1 file to main" */ author?: { face: React.ReactNode; who: string; account: string; branch: string }; /** the message box, for the toolbar's Cut to focus */ inputRef?: React.RefObject<HTMLInputElement | null> }): React.JSX.Element {
+  const [message, setMessage] = useState(''); const [busy, setBusy] = useState(false); const [log, setLog] = useState<Said[]>([]);
+  const say = (ok: boolean, text: string, acts?: Act[]): void => { setLog((l) => [{ ok, text, at: new Date().toISOString(), n: ++saidCount, ...(acts?.length ? { acts } : {}) }, ...l].slice(0, 4)); };
+  const cut = async (e: React.FormEvent): Promise<void> => {
+    e.preventDefault(); setBusy(true);
+    try {
+      const r = await door(token, `/-/${name}/changesets`, { method: 'POST', body: JSON.stringify(message.trim() ? { message: message.trim() } : {}) });
+      if (!r.ok) { refused(r); const p = plainly(await doorWords(r)); say(false, `Cut a changeset: ${p.text}`, p.acts); return; }
+      const b = (await r.json()) as { name?: string; actions?: unknown[] };
+      say(true, `Cut ${b.name ?? 'a changeset'}: ${counted(b.actions?.length ?? 0, 'change')}, ready to review in History and push.`); setMessage(''); onCut();
+    } catch (err) { say(false, `Cut a changeset: the World did not answer (${err instanceof Error ? err.message : String(err)})`); } finally { setBusy(false); }
+  };
+  if (pinned) {
+    const off = !canWrite ? 'This session reads the World; it changes nothing' : changes === 0 ? 'Nothing to cut: no change is outside a changeset' : null;
+    return (
+      <div className="ws-cut">
+        <Narration log={log} name={name} />
+        <form onSubmit={(e) => void cut(e)} aria-label="Cut a changeset">
+          {author ? <a className="ws-author" href={author.account} title={`${author.who}: your account`} onClick={(e) => { e.preventDefault(); go(author.account.slice(BASE.length + 1).split('/')); }}>{author.face}</a> : null}
+          <input ref={inputRef} name="changesetMessage" aria-label="Summary" value={message} onChange={(e) => setMessage(e.target.value)} placeholder={changes === 0 ? 'Nothing to cut' : generated ? 'Summary (optional)' : 'Summary (required)'} required={!generated} maxLength={200} disabled={Boolean(off)} title={off ?? undefined} />
+          <button type="submit" className="primary" disabled={Boolean(off) || busy} title={off ?? undefined}>{busy ? 'Cutting…' : changes === 0 ? 'Cut a changeset' : <>Cut {counted(changes, 'change')}{author ? <> on <b>{author.branch}</b></> : null}</>}</button>
+        </form>
+      </div>
+    );
+  }
+  // nothing to cut (or no write): only what the last cut said stays
+  if (!canWrite || changes === 0) return <Narration log={log} name={name} />;
   return (
     <>
-      <Pending load={diff} what="the changes" />
-      {diff.state === 'ok' ? (
-        <>
-          <p className="mode">What this World changed since it started{diff.data.base.at ? <> (<At iso={diff.data.base.at} />, <code>{diff.data.base.id}</code>)</> : <> (<code>{diff.data.base.id}</code>)</>}: {diff.data.changes.length} change{diff.data.changes.length === 1 ? '' : 's'} at {byTwin.length} vendor{byTwin.length === 1 ? '' : 's'}. A changeset takes these to the real services.</p>
-          {byTwin.length === 0 ? <p className="empty">No changes since {diff.data.base.id}{diff.data.base.at ? <> (<At iso={diff.data.base.at} />)</> : null}.</p> : <ByVendor groups={byTwin} idPrefix="changes" />}
-        </>
-      ) : null}
+      <form className="block cut pad" onSubmit={(e) => void cut(e)} aria-label="Cut a changeset">
+        <label><span>Cut {changes === 1 ? 'this change' : `these ${changes} changes`} into a changeset: what it does and why</span><input name="changesetMessage" value={message} onChange={(e) => setMessage(e.target.value)} placeholder="Welcome email for new sign-ups" required maxLength={200} disabled={changes === 0} /></label>
+        <button type="submit" className="primary" disabled={busy || changes === 0}>{busy ? 'Cutting…' : 'Cut a changeset'}</button>
+      </form>
+      <Narration log={log} name={name} />
     </>
   );
 }
 
-/** The operator's tables: each twin's standing and root, the requests, the changesets — and the host admin's rotate and remove. */
+
 /** A World's NAMED KEYS, as a service's API keys page is (Neon's, Resend's): each named for what holds it, shown once when
  *  made, listed with when it was last used, and revoked alone; `volter remote add` makes one through the platform. */
 function Keys({ name, token }: { name: string; token: string }): React.JSX.Element {
-  type Key = { id: string; name: string; scope: string; createdAt: string; lastUsedAt: string | null };
+  type Key = { id: string; name: string; scope: string; createdAt: string; lastUsedAt: string | null; /** the person it acts for, when it names one */ person?: string | null };
   const [version, setVersion] = useState(0);
   const keys = useDoor<{ keys: Key[] }>(token, `/-/${name}/keys`, version);
   const [making, setMaking] = useState(false); const [keyName, setKeyName] = useState(''); const [scope, setScope] = useState<'write' | 'read'>('write'); const [busy, setBusy] = useState(false); const [error, setError] = useState<string | null>(null);
@@ -1609,7 +2035,7 @@ function Keys({ name, token }: { name: string; token: string }): React.JSX.Eleme
     const label = `Read-only link · ${new Date().toLocaleDateString(undefined, { month: 'short', day: 'numeric' })}`;
     const r = await door(token, `/-/${name}/keys`, { method: 'POST', body: JSON.stringify({ name: label, scope: 'read' }) }).catch(() => null);
     const b = r ? ((await r.json().catch(() => ({}))) as { key?: string; error?: string }) : { error: `${ORIGIN} did not answer` };
-    if (!r?.ok || !b.key) { toast(b.error ?? 'refused', 'error'); return; }
+    if (!r?.ok || !b.key) { toast(b.error ? plainly(b.error).text : 'refused', 'error'); return; }
     setLink(`${window.location.origin}${BASE}/${name}#${new URLSearchParams({ token: b.key }).toString()}`); setVersion((v) => v + 1);
   };
   const make = async (e: React.FormEvent): Promise<void> => {
@@ -1617,7 +2043,7 @@ function Keys({ name, token }: { name: string; token: string }): React.JSX.Eleme
     const r = await door(token, `/-/${name}/keys`, { method: 'POST', body: JSON.stringify({ name: keyName.trim(), scope }) }).catch(() => null);
     setBusy(false);
     const b = r ? ((await r.json().catch(() => ({}))) as { key?: string; error?: string }) : { error: `${ORIGIN} did not answer` };
-    if (!r?.ok || !b.key) { setError(b.error ?? 'refused'); return; }
+    if (!r?.ok || !b.key) { setError(b.error ? plainly(b.error).text : 'refused'); return; }
     setMaking(false); setMade({ key: b.key, name: keyName.trim() }); setKeyName(''); setVersion((v) => v + 1);
   };
   const revoke = async (k: Key): Promise<void> => {
@@ -1633,9 +2059,9 @@ function Keys({ name, token }: { name: string; token: string }): React.JSX.Eleme
       <Pending load={keys} what="the keys" retry={() => setVersion((v) => v + 1)} />
       {keys.state === 'ok' ? (keys.data.keys.length === 0 ? <p className="mode">No keys yet. The World's own token opens it too.</p> : (
         <table className="dense" aria-label="Keys">
-          <thead><tr><th>Name</th><th>Access</th><th>Made</th><th>Last used</th><th className="num"><span className="sr">Actions</span></th></tr></thead>
+          <thead><tr><th>Name</th><th>For</th><th>Access</th><th>Made</th><th>Last used</th><th className="num"><span className="sr">Actions</span></th></tr></thead>
           <tbody>{keys.data.keys.map((k) => (
-            <tr key={k.id}><td>{k.name}</td><td>{k.scope === 'write' ? 'Read and write' : 'Read only'}</td><td className="mode"><span title={when(k.createdAt)}>{ago(k.createdAt)}</span></td><td className="mode">{k.lastUsedAt ? ago(k.lastUsedAt) : 'never'}</td><td className="num"><Menu label={`More for ${k.name}`} items={[{ label: 'Revoke…', danger: true, onSelect: () => void revoke(k) }]} /></td></tr>
+            <tr key={k.id}><td>{k.name}</td><td>{k.person ?? <span className="mode" title="It acts as itself: a service">no one: a service</span>}</td><td>{k.scope === 'write' ? 'Read and write' : 'Read only'}</td><td className="mode"><span title={when(k.createdAt)}>{ago(k.createdAt)}</span></td><td className="mode">{k.lastUsedAt ? ago(k.lastUsedAt) : 'never'}</td><td className="num"><Menu label={`More for ${k.name}`} items={[{ label: 'Revoke…', danger: true, onSelect: () => void revoke(k) }]} /></td></tr>
           ))}</tbody>
         </table>
       )) : null}
@@ -1658,182 +2084,298 @@ function Keys({ name, token }: { name: string; token: string }): React.JSX.Eleme
   );
 }
 
-function Operations({ name, token, admin, canWrite, refused, onRemoved }: { name: string; token: string; admin: string | null; canWrite: boolean; refused: (r: Response) => void; onRemoved: () => void }): React.JSX.Element {
-  const [twins, setTwins] = useState<Twin[] | null>(null);
-  const [changesets, setChangesets] = useState<Changeset[] | null>(null);
-  const [note, setNote] = useState<string | null>(null);
+/** What an act did, said on the page where it was done: its words, and whether it went. */
+type Said = { ok: boolean; text: string; at: string; n: number; acts?: Act[] };
+/** Each narrated line's own key: two acts can finish within one millisecond. */
+let saidCount = 0;
+function Narration({ log, name }: { log: Said[]; name: string }): React.JSX.Element | null {
+  if (log.length === 0) return null;
+  return <ul className="narration-log" role="status" aria-live="polite">{log.map((l) => <li key={l.n} className={l.ok ? 'ok' : 'bad'}><span className="mode"><At iso={l.at} time /></span> {l.text}{l.acts ? <ActLinks name={name} acts={l.acts} /> : null}</li>)}</ul>;
+}
+
+/** Push and pull through the origin's doors, and what they read (the origin, the changes not cut, the changesets not
+ *  pushed): Remote's acts, and the workspace toolbar's. Each act is said in `log`, a refusal as a toast too. */
+function usePushPull(name: string, token: string, tick: number, refused: (r: Response) => void) {
+  const [version, setVersion] = useState(0);
+  const every = version * 100_000 + Math.floor(tick / 2);
+  const origin = useDoor<OriginDoor>(token, `/-/${name}/origin`, every);
+  const diff = useDoor<Diff>(token, `/-/${name}/diff`, every);
+  const sets = useDoor<{ changesets: ChangesetView[] }>(token, `/-/${name}/changesets`, every);
+  const [log, setLog] = useState<Said[]>([]); const [busy, setBusy] = useState<string | null>(null);
+  const say = (ok: boolean, text: string, acts?: Act[]): void => { setLog((l) => [{ ok, text, at: new Date().toISOString(), n: ++saidCount, ...(acts?.length ? { acts } : {}) }, ...l].slice(0, 8)); if (!ok) toast(text, 'error'); };
+  /** One act through its door: the answer's body, or null when it was refused (and said so). */
+  const send = async <T,>(what: string, path: string, init: RequestInit): Promise<T | null> => {
+    setBusy(what);
+    try {
+      const r = await door(token, `/-/${name}/${path}`, init);
+      if (!r.ok) { refused(r); const p = plainly(await doorWords(r)); say(false, `${what}: ${p.text}`, p.acts); return null; }
+      return (await r.json()) as T;
+    } catch (e) { say(false, `${what}: the World did not answer (${e instanceof Error ? e.message : String(e)})`); return null; } finally { setBusy(null); setVersion((v) => v + 1); }
+  };
+  const there = origin.state === 'ok' && origin.data.origin ? originAddress(origin.data.origin) : null;
+  const changes = diff.state === 'ok' ? diff.data.changes.length : null;
+  const waiting = sets.state === 'ok' ? unpushed(sets.data.changesets).sort((a, b) => a.createdAt.localeCompare(b.createdAt)) : [];
+  const push = async (): Promise<void> => {
+    const b = await send<{ pushed: Array<{ changeset: string; outcome: string; receipts?: Array<{ status: string }>; refusal?: string[] }> }>('Push', 'origin/push', { method: 'POST' });
+    if (!b) return;
+    if (b.pushed.length === 0) { say(true, 'Nothing to push: every changeset is already at the remote.'); return; }
+    for (const p of b.pushed) {
+      const rs = p.receipts ?? [];
+      const replayed = rs.filter((r) => r.status === 'replayed').length; const confirmed = rs.filter((r) => r.status === 'confirmed').length; const failed = rs.filter((r) => r.status === 'failed').length;
+      const ok = p.outcome === 'applied' && failed === 0;
+      if (p.outcome === 'refused') { say(false, `Push of ${p.changeset} was refused${p.refusal?.length ? `: ${p.refusal.map((w) => plainly(w).text).join('; ')}` : ''}.`); continue; }
+      const parts = [`${replayed} of ${counted(rs.length, 'change')} replayed there`, ...(confirmed ? [`${confirmed} performed at the vendor by the remote`] : []), ...(failed ? [`${failed} failed`] : [])];
+      say(ok, `${p.outcome === 'partial' ? 'Partly pushed' : 'Pushed'} ${p.changeset} to ${there ?? 'the remote'}: ${parts.join('; ')}${p.refusal?.length ? ` (${p.refusal.map((w) => plainly(w).text).join('; ')})` : ''}.`);
+    }
+  };
+  const pull = async (): Promise<void> => {
+    const b = await send<{ appended: Record<string, number>; rebased: Array<{ twin: string; moved: boolean; conflicts: Array<{ subject: { type: string; id: string }; field: string }> }> }>('Pull', 'origin/pull', { method: 'POST' });
+    if (!b) return;
+    const came = Object.entries(b.appended).filter(([, n]) => n > 0);
+    const conflicts = b.rebased.flatMap((r) => r.conflicts.map((c) => `${vendorName(r.twin)} ${c.subject.type}:${c.subject.id} ${c.field}`));
+    say(conflicts.length === 0, `Pulled from ${there ?? 'the remote'}: ${came.length ? came.map(([t, n]) => `${counted(n, 'entry')} at ${vendorName(t)}`).join(', ') : 'nothing new'}${conflicts.length ? `; conflicts at ${conflicts.join(', ')}` : ''}.`);
+  };
+  return { origin, diff, sets, there, changes, waiting, log, busy, say, send, push, pull };
+}
+
+/** THE REMOTE, as GitHub Desktop's push and pull are: the World this one pushes to and pulls from (its origin), how much
+ *  is not yet pushed there, and the acts: cut the changes into a changeset, push, pull, name the origin. Each act says
+ *  what it did on this page. */
+function Remote({ name, token, canWrite, tick, refused }: { name: string; token: string; canWrite: boolean; tick: number; refused: (r: Response) => void }): React.JSX.Element {
+  const { origin, there, changes, log, busy, say, send, push, pull } = usePushPull(name, token, tick, refused);
+  const [url, setUrl] = useState(''); const [secret, setSecret] = useState(''); const [naming, setNaming] = useState(false);
+  const name_ = async (e: React.FormEvent): Promise<void> => {
+    e.preventDefault();
+    const b = await send<{ origin: { url: string; namespace: string }; appended: Record<string, number> }>('Name the remote', 'origin', { method: 'PUT', body: JSON.stringify({ url: url.trim(), token: secret.trim() }) });
+    if (b) { const n = Object.values(b.appended ?? {}).reduce((a, x) => a + x, 0); say(true, `The remote is ${originAddress(b.origin)}: its history came in (${counted(n, 'entry')}).`); setSecret(''); setNaming(false); }
+  };
+  const off = !canWrite ? 'This session reads the World; it changes nothing' : null;
+  return (
+    <>
+      <div className="block remote">
+        <div className="block-head"><h3>Origin</h3>{canWrite ? <button type="button" onClick={() => { setUrl(there ?? ''); setNaming(!naming); }} aria-expanded={naming}>{there ? 'Change the remote…' : 'Name a remote…'}</button> : null}</div>
+        <div className="pad">
+          {origin.state === 'ok' ? (there
+            ? <p><code className="big">{there}</code>{origin.data.origin?.fetchedAt ? <span className="mode"> · last fetched <At iso={origin.data.origin.fetchedAt} /></span> : null}</p>
+            : <p>No remote — this World keeps its default data. Name one to push its changesets to a shared World and pull what others pushed there.</p>) : <Pending load={origin} what="the remote" lines={1} />}
+          {naming ? (
+            <form className="stack origin-form" onSubmit={(e) => void name_(e)} aria-label="Name the remote">
+              <label><span>The World's address</span><input name="originUrl" value={url} onChange={(e) => setUrl(e.target.value)} placeholder="https://worlds.example.com/acme/team" required /></label>
+              <label><span>A key or token that opens it</span><input name="originToken" type="password" value={secret} onChange={(e) => setSecret(e.target.value)} required autoComplete="off" /></label>
+              <p className="mode">Naming it brings its history in. Your pushes are recorded there as whoever this key was made for, or as the key itself.</p>
+              <div className="row-actions"><button type="submit" className="primary" disabled={busy !== null}>{busy === 'Name the remote' ? 'Bringing its history in…' : 'Save the remote'}</button><button type="button" onClick={() => setNaming(false)}>Cancel</button></div>
+            </form>
+          ) : null}
+        </div>
+      </div>
+      <Narration log={log} name={name} />
+    </>
+  );
+}
+
+/** THE VAULT, as Supabase's is: the credentials this World holds for real vendors (each sealed for the one place it may
+ *  go: a vendor's root, or a link), whether each is sealed, when and by what, and sealing one; then the links, each a
+ *  vendor this World forwards to with its sealed credential, with their requests. A credential is never shown back. */
+function Vault({ name, token, canWrite, refused }: { name: string; token: string; canWrite: boolean; refused: (r: Response) => void }): React.JSX.Element {
+  const [version, setVersion] = useState(0);
+  const twins = useDoor<{ twins: Twin[] }>(token, `/-/${name}/twins`, version);
+  const links = useDoor<{ links: Record<string, { origin: string }> }>(token, `/-/${name}/links`, version);
+  const report = useDoor<RequestReport>(token, `/-/${name}/requests?hours=24`, version);
+  const [linkCreds, setLinkCreds] = useState<Record<string, NonNullable<Twin['credential']> | null>>({});
+  const [sealing, setSealing] = useState<{ vendor: string; to: string } | null>(null); const [secret, setSecret] = useState(''); const [busy, setBusy] = useState(false);
+  const [log, setLog] = useState<Said[]>([]);
+  const say = (ok: boolean, text: string, acts?: Act[]): void => { setLog((l) => [{ ok, text, at: new Date().toISOString(), n: ++saidCount, ...(acts?.length ? { acts } : {}) }, ...l].slice(0, 6)); if (!ok) toast(text, 'error'); };
+  const linkNames = links.state === 'ok' ? Object.keys(links.data.links).sort() : [];
+  // a link's credential is its own door's answer (`…/twins/<link>/credential`): sealed or not, never the secret
+  useEffect(() => {
+    let live = true;
+    void Promise.all(linkNames.map(async (l) => { const r = await door(token, `/-/${name}/twins/${l}/credential`).catch(() => null); const b = r?.ok ? ((await r.json()) as { credential?: Twin['credential'] }) : null; return [l, b?.credential ?? null] as const; })).then((all) => { if (live) setLinkCreds(Object.fromEntries(all)); });
+    return () => { live = false; };
+    // biome-ignore lint/correctness/useExhaustiveDependencies: the links' names are what change it
+  }, [name, token, linkNames.join(','), version]);
+  const seal = async (e: React.FormEvent): Promise<void> => {
+    e.preventDefault(); if (!sealing || !secret) return; setBusy(true);
+    const r = await door(token, `/-/${name}/twins/${sealing.vendor}/credential`, { method: 'PUT', body: secret, headers: { 'content-type': 'text/plain' } }).catch(() => null);
+    setBusy(false);
+    if (!r) { say(false, `Seal ${sealing.vendor}: ${ORIGIN} did not answer`); return; }
+    if (!r.ok) { refused(r); const p = plainly(await doorWords(r)); say(false, `Seal ${vendorName(sealing.vendor)}: ${p.text}`, p.acts); return; }
+    const b = (await r.json().catch(() => ({}))) as { fingerprint?: string; boundTo?: string };
+    say(true, `Sealed a credential for ${vendorName(sealing.vendor)}${b.fingerprint ? ` (${b.fingerprint})` : ''}: it opens for ${b.boundTo ?? sealing.to} only, and is never shown again.`);
+    setSecret(''); setSealing(null); setVersion((v) => v + 1);
+  };
+  const removeLink = async (l: string): Promise<void> => {
+    if (!(await confirmAct({ title: `Remove the link ${l}?`, body: `Requests to ${WORLDS}/${name}/${l}/… stop being forwarded to ${links.state === 'ok' ? links.data.links[l]?.origin : 'its origin'}.`, action: 'Remove link', danger: true }))) return;
+    const r = await door(token, `/-/${name}/links/${l}`, { method: 'DELETE' }).catch(() => null);
+    if (!r?.ok) { if (r) refused(r); say(false, `Remove ${l}: ${r ? await failure(r) : 'the World did not answer'}`); return; }
+    say(true, `Removed the link ${l}.`); setVersion((v) => v + 1);
+  };
+  const sealedText = (c: Twin['credential']): React.JSX.Element => (c ? <><span className="badge rooted">sealed</span> <span className="mode">{c.fingerprint ? <code>{c.fingerprint}</code> : null} · <At iso={c.placedAt} />{c.sealedBy ? ` · by ${c.sealedBy === 'vault' ? 'the vault' : 'the host\'s key'}` : ''}</span></> : <span className="mode">none</span>);
+  const list = twins.state === 'ok' ? twins.data.twins : [];
+  return (
+    <>
+      <p className="lede">A real vendor's credential lives in one place, sealed: beside this World, bound to where it goes. It is never readable back; this page says only that one is sealed, when, by what, and for where.</p>
+      <Narration log={log} name={name} />
+      <section className="block" aria-labelledby="creds-head">
+        <div className="block-head"><h3 id="creds-head">Vendors</h3></div>
+        <Pending load={twins} what="the vendors" />
+        {twins.state === 'ok' ? (
+          <table className="dense" aria-label="Credentials by vendor">
+            <thead><tr><th>Vendor</th><th>Credential</th><th>Bound to</th><th>Real service</th>{canWrite ? <th className="num"><span className="sr">Actions</span></th> : null}</tr></thead>
+            <tbody>{list.map((t) => (
+              <tr key={t.twin}>
+                <td><span className="vendor-cell"><Mark vendor={t.twin} />{vendorName(t.twin)}</span></td>
+                <td>{sealedText(t.credential)}</td>
+                <td>{t.credential?.boundTo ? <code>{t.credential.boundTo}</code> : <span className="mode">—</span>}</td>
+                <td>{t.root?.url ? <code>{t.root.url}</code> : <span className="mode">none: a stand-in</span>}</td>
+                {canWrite ? <td className="num"><button type="button" disabled={!t.root?.url} title={t.root?.url ? `Seal ${vendorName(t.twin)}'s real credential for ${t.root.url}` : 'Connect it to its real service first (Settings › Real services): a credential is sealed for where it goes'} onClick={() => { setSecret(''); setSealing({ vendor: t.twin, to: t.root!.url! }); }}>{t.credential ? 'Replace…' : 'Seal a credential…'}</button></td> : null}
+              </tr>
+            ))}</tbody>
+          </table>
+        ) : null}
+        {twins.state === 'ok' && list.every((t) => !t.root?.url) ? <p className="mode pad">No vendor here has a real service behind it, so none holds a credential. Connect one in Settings › Real services; its credential is sealed here.</p> : null}
+      </section>
+      <section className="block" aria-labelledby="links-head">
+        <div className="block-head"><h3 id="links-head">Links</h3><span className="mode">a vendor with no twin, forwarded with its sealed credential</span></div>
+        <Pending load={links} what="the links" />
+        {links.state === 'ok' && linkNames.length === 0 ? <p className="mode pad">No links. A link forwards requests for a vendor with no twin here, at <code>{WORLDS}/{name}/&lt;link&gt;/…</code>, to that vendor's real API with the credential sealed for it.</p> : null}
+        {linkNames.length ? (
+          <table className="dense" aria-label="Links">
+            <thead><tr><th>Link</th><th>Origin</th><th className="num">Requests, 24h</th><th>Credential</th>{canWrite ? <th className="num"><span className="sr">Actions</span></th> : null}</tr></thead>
+            <tbody>{linkNames.map((l) => {
+              const at = links.state === 'ok' ? links.data.links[l]!.origin : '';
+              const traffic = report.state === 'ok' ? report.data.twins.find((t) => t.twin === l) : undefined;
+              return (
+                <tr key={l}>
+                  <td><b>{l}</b></td>
+                  <td><code>{at}</code></td>
+                  <td className="num">{traffic ? <span title={Object.entries(traffic.byStatus).map(([k, v]) => `${k}: ${v}`).join(' · ')}>{traffic.requests}</span> : <span className="mode">—</span>}</td>
+                  <td>{sealedText(linkCreds[l] ?? null)}{linkCreds[l]?.boundTo ? <div className="mode">bound to <code>{linkCreds[l]!.boundTo}</code></div> : null}</td>
+                  {canWrite ? <td className="num row-actions"><button type="button" onClick={() => { setSecret(''); setSealing({ vendor: l, to: at }); }}>{linkCreds[l] ? 'Replace…' : 'Seal a credential…'}</button><button type="button" onClick={() => void removeLink(l)}>Remove…</button></td> : null}
+                </tr>
+              );
+            })}</tbody>
+          </table>
+        ) : null}
+      </section>
+      <Dialog open={Boolean(sealing)} onClose={() => { if (!busy) setSealing(null); }} title={`Seal ${sealing ? vendorName(sealing.vendor) : ''}'s credential`} footer={<><button type="button" onClick={() => setSealing(null)} disabled={busy}>Cancel</button><button type="submit" form="seal-credential" className="primary" disabled={busy || !secret}>{busy ? 'Sealing…' : 'Seal it'}</button></>}>
+        <form id="seal-credential" className="stack" onSubmit={(e) => void seal(e)}>
+          <p className="mode">It is sealed for <code>{sealing?.to}</code> and opens there only. It is never shown again, here or anywhere.</p>
+          <label><span>The real key</span><input name="credential" type="password" value={secret} onChange={(e) => setSecret(e.target.value)} autoComplete="off" required autoFocus /></label>
+        </form>
+      </Dialog>
+    </>
+  );
+}
+
+/** THE SETTINGS, as Neon's and Supabase's project settings are: who may reach this World (its keys and the read-only
+ *  link), its connections to the real services (a vendor's root, reading from it, its deploy policy), its checks, and the
+ *  host admin's acts on the World itself. */
+function Settings({ name, token, admin, canWrite, refused, onRemoved, only }: { name: string; token: string; admin: string | null; canWrite: boolean; refused: (r: Response) => void; onRemoved: () => void; /** one section alone (a tab of the workspace's Settings window); every section when absent */ only?: 'access' | 'services' | 'clock' | 'checks' }): React.JSX.Element {
+  const shows = (k: 'access' | 'services' | 'clock' | 'checks'): boolean => !only || only === k;
+  const [version, setVersion] = useState(0);
+  const twins = useDoor<{ twins: Twin[] }>(token, `/-/${name}/twins`, version);
+  const checks = useDoor<{ checks: string[] }>(token, `/-/${name}/checks`, version);
+  const [clockVersion, setClockVersion] = useState(0);
+  const clock = useDoor<Clock>(token, `/-/${name}/clock`, clockVersion);
+  const [log, setLog] = useState<Said[]>([]);
   const [tokens, setTokens] = useState<{ token: string; readToken: string } | null>(null);
-  type Report = { hours: number; requests: number; journalFailures?: number; twins: Array<{ twin: string; requests: number; byStatus: Record<string, number>; p50Ms: number | null; p95Ms: number | null; topRoutes: Array<{ route: string; requests: number }> }> };
-  const [report, setReport] = useState<Report | null>(null);
-  const refresh = useCallback(async () => {
-    const t = await door(token, `/-/${name}/twins`);
-    setTwins(t.ok ? ((await t.json()) as { twins: Twin[] }).twins : []);
-    const rq = await door(token, `/-/${name}/requests?hours=24`); setReport(rq.ok ? ((await rq.json()) as Report) : null);
-    const c = await door(token, `/-/${name}/changesets`);
-    setChangesets(c.ok ? ((await c.json()) as { changesets: Changeset[] }).changesets : []);
-  }, [name, token]);
-  useEffect(() => { void refresh(); }, [refresh]);
-  const act = async (label: string, path: string, init: RequestInit): Promise<void> => {
-    setNote(null);
-    const r = await door(token, path, init);
-    if (!r.ok) refused(r);
-    setNote(r.ok ? `${label}: done` : `${label}: ${await failure(r)}`);
-    await refresh();
+  const [connecting, setConnecting] = useState<Twin | null>(null); const [url, setUrl] = useState(''); const [policy, setPolicy] = useState<'gated' | 'auto' | 'hold'>('gated'); const [busy, setBusy] = useState(false);
+  const say = (ok: boolean, text: string, acts?: Act[]): void => { setLog((l) => [{ ok, text, at: new Date().toISOString(), n: ++saidCount, ...(acts?.length ? { acts } : {}) }, ...l].slice(0, 6)); if (!ok) toast(text, 'error'); };
+  const act = async (label: string, path: string, init: RequestInit): Promise<boolean> => {
+    const r = await door(token, path, init).catch(() => null);
+    if (!r) { say(false, `${label}: the World did not answer`); return false; }
+    if (!r.ok) { refused(r); const p = plainly(await doorWords(r)); say(false, `${label}: ${p.text}`, p.acts); return false; }
+    say(true, `${label}: done.`); setVersion((v) => v + 1); return true;
+  };
+  const connect = async (e: React.FormEvent): Promise<void> => {
+    e.preventDefault(); if (!connecting) return; setBusy(true);
+    const prior = (connecting.root ?? {}) as Record<string, unknown>;
+    const ok = await act(url.trim() ? `Connect ${vendorName(connecting.twin)} to ${url.trim()}` : `Disconnect ${vendorName(connecting.twin)}`, `/-/${name}/twins/${connecting.twin}/root`, { method: 'PUT', body: JSON.stringify(url.trim() ? { ...prior, url: url.trim(), deploy: policy } : null) });
+    setBusy(false); if (ok) setConnecting(null);
   };
   const rotate = async (): Promise<void> => {
     if (!(await confirmAct({ title: `Rotate the tokens of ${name}?`, body: 'Every app, script and person holding the current tokens loses access at once. The new ones are shown once.', action: 'Rotate tokens', danger: true }))) return;
     const r = await door(admin!, `/-/worlds/${name}/rotate`, { method: 'POST' });
-    if (r.ok) { setTokens((await r.json()) as { token: string; readToken: string }); setNote('rotated: the new tokens are shown once'); } else setNote(`rotate: answered ${r.status}`);
+    if (r.ok) { setTokens((await r.json()) as { token: string; readToken: string }); say(true, 'Rotated: the new tokens are shown once, below.'); } else say(false, `Rotate: ${await failure(r)}`);
   };
   const remove = async (): Promise<void> => {
     if (!(await confirmAct({ title: `Remove ${name}?`, body: 'The host stops serving it and its whole history goes with it. This cannot be undone.', action: 'Remove World', danger: true, typed: name }))) return;
     const r = await door(admin!, `/-/worlds/${name}`, { method: 'DELETE' }).catch((e: unknown) => e as Error);
-    if (r instanceof Error) { setNote(`remove: the host did not answer (${r.message})`); return; }
-    if (r.ok) onRemoved(); else setNote(`remove: answered ${r.status}`);
+    if (r instanceof Error) { say(false, `Remove: the host did not answer (${r.message})`); return; }
+    if (r.ok) onRemoved(); else say(false, `Remove: ${await failure(r)}`);
   };
+  const list = twins.state === 'ok' ? twins.data.twins : [];
+  const POLICY: Record<string, string> = { gated: 'gated: a person deploys an approved changeset', auto: 'auto: a push deploys at once', hold: 'hold: nothing deploys' };
   return (
     <>
-      {note ? <p role="status">{note}</p> : null}
-      {tokens ? <p role="status">token <code>{tokens.token}</code> · read token <code>{tokens.readToken}</code></p> : null}
-      {canWrite ? <Keys name={name} token={token} /> : null}
-      <h3>Real services</h3>
-      <p className="mode">Every vendor here is a stand-in. Connect one to its real service to read the real state into this World; give it the real key to send this World's changes there (a changeset's Deploy, below).</p>
-      {twins === null ? <p>Loading…</p> : (
-        <table aria-label="Real services">
-          <thead><tr><th>vendor</th><th>real service</th><th>real key</th><th>last read from it</th><th>last sent</th>{canWrite ? <th></th> : null}</tr></thead>
-          <tbody>
-            {twins.map((t) => (
-              <tr key={t.twin}>
-                <td><a href={`${BASE}/${name}/${t.twin}`} title={`Its log and stored state · ${t.position ?? 0} changes held${t.protocol?.major !== undefined ? ` · protocol ${t.protocol.major}${t.protocol.standing && t.protocol.standing !== 'current' ? ` (${t.protocol.standing})` : ''}` : ''}`} onClick={(e) => { e.preventDefault(); go([...name.split('/'), t.twin]); }}>{vendorName(t.twin)}</a></td>
-                <td>{t.root?.url ? <code>{t.root.url}</code> : <span className="mode">not connected</span>}</td>
-                <td>{t.credential ? `sealed ${t.credential.fingerprint ?? ''} · ${when(t.credential.placedAt)}` : <span className="mode">none</span>}</td>
-                <td>{t.refresh?.failed ? <span role="alert">failed ×{t.refresh.failed.count ?? 1}: {t.refresh.failed.reason ?? ''}</span> : t.root ? when(t.refresh?.observedAt ?? t.refresh?.at) : <span className="mode">—</span>}</td>
-                <td>{t.lastReceipt ? `${t.lastReceipt.status ?? ''} ${t.lastReceipt.externalId ?? ''} ${t.lastReceipt.reason ?? ''}`.trim() : <span className="mode">—</span>}</td>
-                {canWrite ? (
-                  <td>
-                    <button onClick={() => void confirmAct({ title: `Read ${vendorName(t.twin)} now?`, body: `The real ${vendorName(t.twin)}'s current state is read into this World. Nothing is written to ${vendorName(t.twin)}.`, action: 'Read from it' }).then((ok) => { if (ok) void act(`refresh ${t.twin}`, `/-/${name}/twins/${t.twin}/refresh`, { method: 'POST' }); })} disabled={!t.root} title="Read the real service's current state into this World">Read from it</button>{' '}
-                    <button onClick={() => { const url = window.prompt(`The real ${vendorName(t.twin)}'s address (its API's URL); empty disconnects it`, t.root?.url ?? ''); if (url === null) return; void act(`root ${t.twin}`, `/-/${name}/twins/${t.twin}/root`, { method: 'PUT', body: JSON.stringify(url ? { url } : null) }); }} title="Connect this vendor to the real service's URL (empty disconnects it)">Connect…</button>{' '}
-                    <button onClick={() => { const secret = window.prompt(`The real ${vendorName(t.twin)} key: it is sealed beside this World and never shown again`); if (!secret) return; void act(`seal ${t.twin}`, `/-/${name}/twins/${t.twin}/credential`, { method: 'PUT', body: secret, headers: { 'content-type': 'text/plain' } }); }} title="Give this World the real service's key; it is sealed and never shown again">Real key…</button>
-                  </td>
-                ) : null}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      )}
-      <h3>Traffic (last 24 hours)</h3>
-      {report && (report.journalFailures ?? 0) > 0 ? <p className="mode" role="alert">{report.journalFailures} request {report.journalFailures === 1 ? 'line was' : 'lines were'} not kept by this World's server since it started (its links, and the twins it runs in its own process): those requests are missing below.</p> : null}
-      {report === null ? <p className="mode">No request report for this world.</p> : report.requests === 0 ? <p className="mode">No requests recorded in the last 24 hours. Recording is kept unless the World runs with <code>VOLTER_TWIN_REQUEST_JOURNAL=0</code>; what the requests changed is always in Activity.</p> : (
-        <table aria-label="Requests by twin">
-          <thead><tr><th>vendor</th><th>requests</th><th>by status</th><th>p50</th><th>p95</th><th>top routes</th></tr></thead>
-          <tbody>{report.twins.map((t) => <tr key={t.twin}><td>{t.twin}</td><td>{t.requests}</td><td>{Object.entries(t.byStatus).map(([k, v]) => `${k}: ${v}`).join(' · ') || '—'}</td><td>{t.p50Ms === null ? '—' : `${t.p50Ms} ms`}</td><td>{t.p95Ms === null ? '—' : `${t.p95Ms} ms`}</td><td>{t.topRoutes.slice(0, 5).map((r) => <div key={r.route}><code>{r.route}</code> <span className="mode">×{r.requests}</span></div>)}</td></tr>)}</tbody>
-        </table>
-      )}
-      <h3>Sending changes to the real services</h3>
-      <p className="mode">A changeset is a set of this World's changes (<code>volter world changeset -m "…"</code>), verified and approved, then deployed to each connected real service.</p>
-      {changesets === null ? <p>Loading…</p> : changesets.length === 0 ? <p className="mode">No changesets yet.</p> : (
-        <table>
-          <thead><tr><th>name</th><th>changes</th><th>approvals</th>{canWrite ? <th>actions</th> : null}</tr></thead>
-          <tbody>
-            {changesets.map((c) => (
-              <tr key={c.name}>
-                <td>{c.name}</td>
-                <td>{Array.isArray(c.actions) ? c.actions.length : '—'}</td>
-                <td>{Array.isArray(c.approvals) ? c.approvals.length : 0}</td>
-                {canWrite ? (
-                  <td>
-                    <button onClick={() => void act(`verify ${c.name}`, `/-/${name}/changesets/${encodeURIComponent(c.name)}/verify`, { method: 'POST' })}>Verify</button>{' '}
-                    <button onClick={() => { const as = window.prompt(`Approve ${c.name} as`); if (!as) return; void act(`approve ${c.name}`, `/-/${name}/changesets/${encodeURIComponent(c.name)}/approve`, { method: 'POST', body: JSON.stringify({ as }) }); }}>Approve</button>{' '}
-                    <button onClick={() => void confirmAct({ title: `Deploy ${c.name}?`, body: 'Its changes are sent to the real services now. That is what the World exists to keep you from doing by accident.', action: 'Deploy to the real services', danger: true, typed: c.name }).then((ok) => { if (ok) void act(`deploy ${c.name}`, `/-/${name}/deploy/${encodeURIComponent(c.name)}`, { method: 'POST', body: JSON.stringify({ confirm: c.name }) }); })}>Deploy</button>
-                  </td>
-                ) : null}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      )}
-      {admin ? (
+      <Narration log={log} name={name} />
+      {shows('access') ? <>
+      <h3 className="settings-head">Access</h3>
+      {canWrite ? <Keys name={name} token={token} /> : <p className="mode">This session reads the World: its keys are managed by whoever holds its token.</p>}
+      </> : null}
+      {shows('services') ? <>
+      <h3 className="settings-head">Real services</h3>
+      <p className="mode">{list.some((t) => t.root?.url) ? null : 'Every vendor here is a stand-in. '}Connect a vendor to its real service to read the real state into this World; its real credential is sealed in the Vault, and an approved changeset deploys there by its policy.</p>
+      <Pending load={twins} what="the vendors" />
+      {twins.state === 'ok' ? (
+        <div className="block">
+          <table className="dense" aria-label="Real services">
+            <thead><tr><th>Vendor</th><th>Real service</th><th>Deploy policy</th><th>Last read from it</th>{canWrite ? <th className="num"><span className="sr">Actions</span></th> : null}</tr></thead>
+            <tbody>{list.map((t) => {
+              const root = t.root as { url?: string; deploy?: string } | null | undefined;
+              return (
+                <tr key={t.twin}>
+                  <td><span className="vendor-cell"><Mark vendor={t.twin} /><a href={`${BASE}/${name}/${t.twin}`} title={`Its log and stored state · ${t.position ?? 0} entries`} onClick={(e) => { e.preventDefault(); go([...name.split('/'), t.twin]); }}>{vendorName(t.twin)}</a></span></td>
+                  <td>{root?.url ? <code>{root.url}</code> : <span className="mode">not connected</span>}</td>
+                  <td className="mode">{root?.url ? POLICY[root.deploy ?? ''] ?? root.deploy ?? '—' : '—'}</td>
+                  <td>{t.refresh?.failed ? <span role="alert">failed ×{t.refresh.failed.count ?? 1}: {t.refresh.failed.reason ?? ''}</span> : root?.url ? when(t.refresh?.observedAt ?? t.refresh?.at) : <span className="mode">—</span>}</td>
+                  {canWrite ? (
+                    <td className="num row-actions">
+                      <button type="button" onClick={() => { setUrl(root?.url ?? ''); setPolicy(root?.deploy === 'auto' || root?.deploy === 'hold' ? root.deploy : 'gated'); setConnecting(t); }}>{root?.url ? 'Change…' : 'Connect…'}</button>
+                      <button type="button" disabled={!root?.url} title={root?.url ? "Read the real service's current state into this World" : 'Connect it first'} onClick={() => void confirmAct({ title: `Read ${vendorName(t.twin)} now?`, body: `The real ${vendorName(t.twin)}'s current state is read into this World. Nothing is written to ${vendorName(t.twin)}.`, action: 'Read from it' }).then((ok) => { if (ok) void act(`Read from ${vendorName(t.twin)}`, `/-/${name}/twins/${t.twin}/refresh`, { method: 'POST' }); })}>Read from it</button>
+                    </td>
+                  ) : null}
+                </tr>
+              );
+            })}</tbody>
+          </table>
+        </div>
+      ) : null}
+      </> : null}
+      {shows('clock') ? <>
+      <h3 className="settings-head">Clock</h3>
+      <p className="mode">The instant every vendor here stamps from. Set it and move it forward to see what happens later: renewals, expiries, scheduled sends.</p>
+      <ClockBar name={name} token={token} clock={clock} canWrite={canWrite} onChanged={() => setClockVersion((v) => v + 1)} refused={refused} open />
+      </> : null}
+      {shows('checks') ? <>
+      <h3 className="settings-head">Checks</h3>
+      <p className="mode">JavaScript the World runs over every change before it is performed (a changeset's Verify runs them too).</p>
+      <Pending load={checks} what="the checks" />
+      {checks.state === 'ok' ? (checks.data.checks.length === 0 ? <p className="mode">No checks: every change is performed as it comes.</p> : (
+        <div className="block"><table className="dense" aria-label="Checks"><tbody>{checks.data.checks.map((c) => <tr key={c}><td><code>{c}</code></td></tr>)}</tbody></table></div>
+      )) : null}
+      </> : null}
+      {admin && !only ? (
         <div className="danger" role="region" aria-label="Danger zone">
           <h3>Danger zone</h3>
-          <p><button onClick={() => void rotate()}>Rotate tokens</button> <span className="mode">New tokens for this World; every app, script and browser using the old ones is signed out.</span></p>
-          <p><button onClick={() => void remove()}>Remove world</button> <span className="mode">Deletes this World and everything in it.</span></p>
+          {tokens ? <p role="status">token <code>{tokens.token}</code> · read token <code>{tokens.readToken}</code></p> : null}
+          <p><button type="button" onClick={() => void rotate()}>Rotate tokens</button> <span className="mode">New tokens for this World; every app, script and browser using the old ones is signed out.</span></p>
+          <p><button type="button" onClick={() => void remove()}>Remove world</button> <span className="mode">Deletes this World and everything in it.</span></p>
         </div>
       ) : null}
+      <Dialog open={Boolean(connecting)} onClose={() => { if (!busy) setConnecting(null); }} title={`Connect ${connecting ? vendorName(connecting.twin) : ''} to its real service`} footer={<><button type="button" onClick={() => setConnecting(null)} disabled={busy}>Cancel</button><button type="submit" form="connect-root" className="primary" disabled={busy}>{busy ? 'Saving…' : url.trim() ? 'Connect' : 'Disconnect'}</button></>}>
+        <form id="connect-root" className="stack" onSubmit={(e) => void connect(e)}>
+          <label><span>The real service's API address</span><input name="rootUrl" value={url} onChange={(e) => setUrl(e.target.value)} placeholder="https://api.openai.com" autoFocus /><span className="mode">Empty disconnects it.</span></label>
+          <label><span>Deploy policy</span><select name="rootDeploy" value={policy} onChange={(e) => setPolicy(e.target.value === 'auto' ? 'auto' : e.target.value === 'hold' ? 'hold' : 'gated')}>{(['gated', 'auto', 'hold'] as const).map((p) => <option key={p} value={p}>{POLICY[p]}</option>)}</select></label>
+        </form>
+      </Dialog>
     </>
   );
 }
 
-function TwinView({ name, token, twin }: { name: string; token: string; twin: string }): React.JSX.Element {
-  const [tab, setTab] = useState<'log' | 'tree'>('log');
-  const [log, setLog] = useState<{ position: number; entries: Entry[] } | null>(null);
-  const [tree, setTree] = useState<Array<Record<string, unknown>> | null>(null);
-  useEffect(() => {
-    void (async () => {
-      const head = await door(token, `/-/${name}/log/${twin}?limit=1`);
-      if (!head.ok) { setLog({ position: 0, entries: [] }); return; }
-      const { position } = (await head.json()) as { position: number };
-      const after = Math.max(0, position - 200);
-      const r = await door(token, `/-/${name}/log/${twin}?after=${after}&limit=200&receipts=1`);
-      const body = (await r.json()) as { position: number; entries: Entry[] };
-      setLog({ position: body.position, entries: [...body.entries].reverse() });
-      const c = await door(token, `/-/${name}/checkpoint/${twin}`);
-      setTree(c.ok ? ((await c.json()) as { tree: Array<Record<string, unknown>> }).tree : []);
-    })();
-  }, [name, token, twin]);
-  // the twin's mirror (its vendor's own UI over this World's state), when its pack has one. Opening it
-  // posts the token to the World's own session door on the Worlds' origin — a form, so the session is
-  // set there first-party and the browser goes on to the mirror; the token never enters a URL
-  const [mirror, setMirror] = useState(false);
-  useEffect(() => { void door(token, `/-/${name}/twins/${twin}/status`).then(async (r) => setMirror(r.ok && ((await r.json()) as { mirror?: boolean }).mirror === true), () => setMirror(false)); }, [name, token, twin]);
-  const mirrorAt = `${WORLDS}/${name}/${twin}/mirror/`;
-  const openMirror = (): void => {
-    const form = document.createElement('form');
-    form.method = 'POST'; form.action = `${WORLDS}/-/${name}/session`;
-    for (const [k, v] of [['token', token], ['next', `/${name}/${twin}/mirror/`]]) { const input = document.createElement('input'); input.type = 'hidden'; input.name = k!; input.value = v!; form.append(input); }
-    document.body.append(form); form.submit(); form.remove();
-  };
-  const receipt = (e: Entry): string => (e.operation === 'observed' ? `observed${e.provenance === 'placeholder' ? ' (default data)' : ' (vendor)'}` : e.receipt ? `${e.receipt.status ?? ''} ${e.receipt.externalId ?? ''} ${e.receipt.reason ?? ''}`.trim() : e.provenance === 'placeholder' ? 'default data' : 'unpushed');
-  return (
-    <section aria-labelledby="twin">
-      <h2 id="twin">{twin} in {name}</h2>
-      <p>position {log?.position ?? '…'} · <code>{WORLDS}/{name}/{twin}</code>{mirror ? <> · <a href={mirrorAt} onClick={(e) => { e.preventDefault(); openMirror(); }}>Open as {twin} shows it</a></> : null}</p>
-      <div role="tablist">
-        <button role="tab" aria-selected={tab === 'log'} onClick={() => setTab('log')}>Log</button>
-        <button role="tab" aria-selected={tab === 'tree'} onClick={() => setTab('tree')}>Tree</button>
-      </div>
-      {tab === 'log' ? (
-        log === null ? <p>Loading…</p> : log.entries.length === 0 ? <p>No changes yet.</p> : (
-          <table>
-            <thead><tr><th>when</th><th>operation</th><th>subject</th><th>actor</th><th>standing</th></tr></thead>
-            <tbody>
-              {log.entries.map((e) => (
-                <tr key={e.id}>
-                  <td>{when(e.occurredAt)}</td>
-                  <td>{e.operation ?? e.op}</td>
-                  <td><code>{e.subject.type}:{e.subject.id}</code></td>
-                  <td>{e.actor ? `${e.actor.kind}${e.actor.id ? ` ${e.actor.id}` : ''}` : '—'}</td>
-                  <td>{standing(e)}</td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        )
-      ) : (
-        tree === null ? <p>Loading…</p> : tree.length === 0 ? <p>The tree is empty.</p> : (
-          <table>
-            <thead><tr><th>type</th><th>id</th><th>fields</th></tr></thead>
-            <tbody>
-              {tree.filter((r) => r.deleted !== true).slice(0, 500).map((r) => {
-                const { type, id, ...rest } = r as { type: string; id: string } & Record<string, unknown>;
-                return <tr key={`${type}:${id}`}><td>{type}</td><td><code>{id}</code></td><td><pre>{JSON.stringify(rest, null, 1).slice(0, 600)}</pre></td></tr>;
-              })}
-            </tbody>
-          </table>
-        )
-      )}
-    </section>
-  );
-}
 
-applyTheme(); // the person's theme before the first paint
-createRoot(ROOT).render(<><App /><Toaster /><ConfirmHost /><MenuDismiss /></>);
+/** The console's whole page: what main.tsx mounts, and what a story renders over recorded doors. */
+export function ConsolePage(): React.JSX.Element {
+  return <><App /><Toaster /><ConfirmHost /><MenuDismiss /></>;
+}
+export { ROOT };