@volter/world-console 2.0.1 → 2.0.2

package/client/console.tsx

@@ -2,12 +2,15 @@
 // of the host (`/-/worlds`, `/-/ping`) or of a world (`/-/<org>/<world>/…`), called with the token the
 // person typed, from the same origin the host serves. The client holds no state a door did not
 // answer, and offers nothing `volter world` or `curl` could not do. Locators are roles and text.
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+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, 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 { agentPrompt } from '../../../packages/cli/src/agent-prompt.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 };
+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 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> };
+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 Mode = { kind: 'admin'; worlds: Row[] } | { kind: 'world'; worlds: Array<{ name: string; base: string; twins: Row['twins'] }> };
 
@@ -20,82 +23,263 @@ const ORIGIN = window.location.origin;
 const WORLDS = (ROOT.dataset.worlds ?? ORIGIN).replace(/\/+$/, '');
 /** The Worlds a World token may open, when the host does not list them (a hosted host keeps its tenants' names to itself). */
 const NAMES = (ROOT.dataset.names ?? '').split(',').filter((n) => n !== '');
-const SITE = 'https://volter.world'; // the product site: pricing, status
-const WORLD_LOGO = 'https://brand.volter.ai/logo/twin-world/svg?size=64&variant=mono'; // Volter World's mark, served by the brand (brand.volter.ai)
-// the platform serves the console as its portal: a session token is injected (no sign-in screen)
-// and `managed` is set, so a world opens on its own host's console rather than under this origin
-const INJECTED = ROOT.dataset.token ?? '';
-const MANAGED = ROOT.dataset.managed === '1';
+// Served on a World's own origin, beside the World's twins and mirrors (same-origin frames of this tab), the console
+// keeps no token any script there could read: a token (typed, or carried in the fragment) is exchanged once for the
+// World's HttpOnly session, and the doors ride that cookie. SESSION stands in for the token from then on.
+const ON_WORLD = ROOT.dataset.worldOrigin === '1';
+// the browser's fetch as it was when the console loaded, before any mirror frame existed: a same-origin mirror that
+// later replaces `parent.fetch` does not see the console's requests through it. Hardening, not isolation (such a frame
+// reaches much else); a sign-out's fresh document is what ends its reach into this one
+const nativeFetch = window.fetch.bind(window);
+const SESSION = '(session)';
+/** Stands in for the token while a pass the platform signed (in the fragment) is exchanged for the World's session. */
+const PASSED = '(pass)';
 
 // the tab's own storage, never localStorage: the token the person typed ends with the tab and is not left on
 // an origin that also serves the Worlds' twins (a served World mounts this console beside them)
-const keep = (t: string): void => { try { if (t) sessionStorage.setItem(TOKEN_KEY, t); else sessionStorage.removeItem(TOKEN_KEY); localStorage.removeItem(TOKEN_KEY); } catch { /* private window */ } };
-// a host console opened FROM the portal is handed the world's token in the URL fragment (never sent
-// to a server); it is taken once and dropped from the address bar
+const keep = (t: string): void => { try { if (t && !ON_WORLD) sessionStorage.setItem(TOKEN_KEY, t); else sessionStorage.removeItem(TOKEN_KEY); localStorage.removeItem(TOKEN_KEY); } catch { /* private window */ } };
+// a token handed in the URL fragment (never sent to a server) is taken once and dropped from the address bar
 const PORTAL_KEY = 'volter.console.portal';
+// the way back to the platform a person came from: only the issuer the World verified on their pass (the session door
+// says it), never an address from this page's URL, which anyone can write
+const keepPortal = (issuer: unknown): void => { try { if (typeof issuer === 'string' && /^https?:$/.test(new URL(issuer).protocol)) sessionStorage.setItem(PORTAL_KEY, new URL(issuer).origin); } catch { /* fine */ } };
 const fromFragment = (): string => {
-  const h = window.location.hash;
-  const m = /(?:^#|&)token=([^&]+)/.exec(h); const pm = /(?:^#|&)portal=([^&]+)/.exec(h);
-  if (pm) { try { sessionStorage.setItem(PORTAL_KEY, decodeURIComponent(pm[1]!)); } catch { /* fine */ } }
-  if (!m) return '';
-  try { window.history.replaceState(null, '', window.location.pathname + window.location.search); } catch { /* fine */ }
-  return decodeURIComponent(m[1]!);
+  return FRAGMENT.get('token') ?? '';
 };
 /** The portal this host console was opened from, when it was: the way back for a person. */
-const portal = (): string => { try { return sessionStorage.getItem(PORTAL_KEY) ?? ''; } catch { return ''; } };
-const held = (): string => { if (INJECTED) return INJECTED; const f = fromFragment(); if (f) { keep(f); return f; } try { return sessionStorage.getItem(TOKEN_KEY) ?? ''; } catch { return ''; } };
-const when = (iso?: string | null): string => (iso ? new Date(iso).toLocaleString() : '—');
+// a fragment is anyone's to write: only an http(s) origin is a way back, never a path or another scheme
+const portal = (): string => { try { const p = sessionStorage.getItem(PORTAL_KEY) ?? ''; return p && /^https?:$/.test(new URL(p).protocol) ? new URL(p).origin : ''; } catch { return ''; } };
+const held = (): string => {
+  const f = fromFragment();
+  // on a World origin a carried token is only exchanged (App's load); without one, the session is the credential,
+  // unless this document is the fresh one a sign-out loaded (`?signin`): then a token is asked for
+  if (ON_WORLD) {
+    keep('');
+    // a person the platform sent here with a pass: it is spent on the World's session (App's load)
+    if (FRAGMENT.get('pass')) return PASSED;
+    const signingIn = new URLSearchParams(window.location.search).has('signin');
+    if (signingIn) { try { window.history.replaceState(null, '', window.location.pathname + window.location.hash); } catch { /* fine */ } }
+    return f || (signingIn ? '' : SESSION);
+  }
+  if (f) { keep(f); return f; }
+  try { return sessionStorage.getItem(TOKEN_KEY) ?? ''; } catch { return ''; }
+};
 
 async function door(token: string, path: string, init: RequestInit = {}): Promise<Response> {
-  return fetch(`${ORIGIN}${path}`, { ...init, headers: { ...(init.headers ?? {}), 'x-volter-token': token, ...(init.body && !(init.headers as Record<string, string> | undefined)?.['content-type'] ? { 'content-type': 'application/json' } : {}) } });
+  // 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' } : {}) } });
 }
 
-/** The path under the console's base: [] worlds; [org, world] a world; [org, world, twin] a twin. */
-function route(): string[] { return window.location.pathname.slice(BASE.length).split('/').filter(Boolean).map(decodeURIComponent); }
+/** 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); }
+
+/** 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())}`; };
+
+/** The first whole minute at or after an instant: a datetime-local picks minutes, and the clock only moves forward. */
+const nextMinute = (iso: string): string => new Date(Math.ceil(Date.parse(iso) / 60_000) * 60_000).toISOString();
+
+/** 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; };
+
+/** A past moment of a World, opened by this tab: a branch the host made, held with its tokens for the tab's life. */
+type Snapshot = { name: string; parent: string; token: string; readToken: string; at: string; expiresAt: string | null; /** where the parent's pages live, the way back */ parentOrigin?: string; /** this tab's own "View as of" made it here: only such a branch is ever removed */ made?: boolean };
+const SNAP_KEY = 'volter.console.snapshots';
+const snapshots = (): Record<string, Snapshot> => { try { return JSON.parse(sessionStorage.getItem(SNAP_KEY) ?? '{}') as Record<string, Snapshot>; } catch { return {}; } };
+// on a World origin a snapshot's tokens stay in this module (no frame can reach it), never in storage
+const SNAP_TOKENS = new Map<string, { token: string; readToken: string }>(); // cache: this tab's snapshot tokens on a World origin
+const keepSnapshot = (s: Snapshot): void => {
+  if (ON_WORLD) { if (s.token || s.readToken) SNAP_TOKENS.set(s.name, { token: s.token, readToken: s.readToken }); s = { ...s, token: '', readToken: '' }; }
+  try { sessionStorage.setItem(SNAP_KEY, JSON.stringify({ ...snapshots(), [s.name]: s })); } catch { /* no storage */ }
+};
+/** The read token a snapshot this tab made opens with, wherever it is kept. */
+const snapshotToken = (name: string): string => SNAP_TOKENS.get(name)?.readToken || snapshots()[name]?.readToken || '';
+const forgetSnapshot = (name: string): void => { try { const all = snapshots(); delete all[name]; sessionStorage.setItem(SNAP_KEY, JSON.stringify(all)); } catch { /* no storage */ } };
+
+// A World's pages live at the World's own origin, where its browser session lives (a host that gives
+// each World one answers `POST …/session` elsewhere with a 409 naming it). The console moves there
+// carrying, in the URL's fragment (which no server sees), the token, a snapshot this tab made, or the
+// snapshot a page on another origin is returning from.
+const FRAGMENT = new URLSearchParams(window.location.hash.slice(1));
+const CLOSING = FRAGMENT.get('close') ?? '';
+/** `value` as a World origin this console may send the tab to, or null: an http(s) origin and nothing else (no
+ *  path, no `javascript:`), with this page's scheme and port, that is this page's own host or a World origin of this
+ *  host: `<world>--<org>.` before this page's host (a console on the host's origin), or before the same host as this
+ *  page's (a sibling World origin). A fragment is anyone's to write, so nothing it carries reaches a navigation
+ *  unchecked; a host that merely shares a last label (`evil.dev`, another IP) is none of these. */
+/** `value` as a pure http(s) origin (no path, no other scheme), or null. */
+function httpOrigin(value: unknown): URL | null {
+  if (typeof value !== 'string') return null;
+  let at: URL; try { at = new URL(value); } catch { return null; }
+  return (at.protocol === 'http:' || at.protocol === 'https:') && at.origin === value.replace(/\/+$/, '') ? at : null;
+}
+function worldOriginOf(value: unknown): string | null {
+  const at = httpOrigin(value); if (!at) return null;
+  const here = new URL(ORIGIN);
+  if (at.protocol !== here.protocol || at.port !== here.port) return null;
+  if (at.hostname === here.hostname) return at.origin;
+  // a World origin's first label is `<world>--<org>` (world-origins.ts)
+  const label = /^[a-z0-9](?:[a-z0-9]|-(?!-))*--[a-z0-9](?:[a-z0-9]|-(?!-))*\./;
+  if (!label.test(at.hostname)) return null;
+  const rest = at.hostname.replace(label, '');
+  return rest === here.hostname || (label.test(here.hostname) && rest === here.hostname.replace(label, '')) ? at.origin : null;
+}
+/** A carried snapshot, kept only when it has a snapshot's shape; its way back only when it is a World origin. */
+function carriedSnapshot(raw: string): Snapshot | null {
+  let s: Record<string, unknown>; try { s = JSON.parse(raw) as Record<string, unknown>; } catch { return null; }
+  const world = /^[a-z0-9][a-z0-9-]*\/[a-z0-9][a-z0-9-]*$/i;
+  if (typeof s.name !== 'string' || !world.test(s.name) || typeof s.parent !== 'string' || !world.test(s.parent) || typeof s.at !== 'string') return null;
+  const back = s.parentOrigin === undefined ? undefined : worldOriginOf(s.parentOrigin);
+  return { name: s.name, parent: s.parent, token: typeof s.token === 'string' ? s.token : '', readToken: typeof s.readToken === 'string' ? s.readToken : '', at: s.at, expiresAt: typeof s.expiresAt === 'string' ? s.expiresAt : null, ...(back ? { parentOrigin: back } : {}) };
+}
+// a carried snapshot is kept to be viewed, never as one this tab made (`made` is never carried), and never over a
+// record this tab already holds: a fragment cannot create or replace what a later fragment's `close` is checked against
+{ const carried = FRAGMENT.get('snapshot'); if (carried) { const s = carriedSnapshot(carried); if (s && !snapshots()[s.name]) keepSnapshot(s); } }
+// the console's home, when a World's pages moved it away from it: the host's origin, where the list of
+// Worlds (and an admin's token) lives
+const HOME_KEY = 'volter.console.home';
+/** A carried home only when it is this host's own: an http(s) origin (never a `javascript:` or a path) whose host is this
+ *  page's, or the one this World's origin sits under (`<world>--<org>.<that host>`), on any port. A fragment is anyone's to
+ *  write; a look-alike site never becomes the logo's link. */
+const homeOrigin = (value: unknown): string | null => {
+  const at = httpOrigin(value); if (!at) return null;
+  const here = new URL(ORIGIN).hostname;
+  const under = here.replace(/^[a-z0-9](?:[a-z0-9]|-(?!-))*--[a-z0-9](?:[a-z0-9]|-(?!-))*\./, '');
+  return at.hostname === here || at.hostname === under ? at.origin : null;
+};
+{ const carried = homeOrigin(FRAGMENT.get('home')); if (carried) { try { sessionStorage.setItem(HOME_KEY, carried); } catch { /* fine */ } } }
+// what the fragment carried is read (FRAGMENT, above); it leaves the address bar now, whoever supplied the token
+if (['token', 'pass', 'portal', 'snapshot', 'home', 'close'].some((k) => FRAGMENT.has(k))) { try { window.history.replaceState(null, '', window.location.pathname + window.location.search); } catch { /* fine */ } }
+const home = (): string => { try { return homeOrigin(sessionStorage.getItem(HOME_KEY)) ?? ''; } catch { return ''; } };
+function moveTo(origin: string, token: string, name: string, path?: string): void {
+  const carried = new URLSearchParams({ token, home: home() || ORIGIN });
+  const snap = snapshots()[name]; if (snap) carried.set('snapshot', JSON.stringify(snap));
+  window.location.replace(`${origin}${path ?? `${window.location.pathname}${window.location.search}`}#${carried.toString()}`);
+}
+
+/** 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 ''; } }); }
+/** 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')); }
 
+/** A World this machine serves on loopback opens its session for its own page with no token (served-world.ts
+ *  localSession): nothing is ever pasted, and a restart or a rotated token is picked up by asking again. Asked of the
+ *  World in the path, else of each World the origin names. The answer's `token` comes only where the World has no
+ *  origin of its own (a shared origin, where a session cannot reach its doors); else the session is the credential.
+ *  'moved': the World's session lives at its own origin, where the tab now goes. null: no World here opens itself
+ *  (a remote host), and the page asks for a token. */
+async function localSession(): Promise<{ token: string } | 'moved' | null> {
+  const [o, w] = route();
+  const here = worldOf(o, w);
+  let names = here ? [here] : NAMES;
+  if (names.length === 0) {
+    const ping = await nativeFetch(`${ORIGIN}/-/ping`).catch(() => null);
+    names = ping?.ok ? (((await ping.json().catch(() => ({}))) as { worlds?: string[] }).worlds ?? []) : [];
+  }
+  names = names.filter((n) => { const [a, b, ...rest] = n.split('/'); return rest.length === 0 && worldOf(a, b) === n; });
+  for (const name of names) {
+    const r = await nativeFetch(`${ORIGIN}/-/${name}/session`, { method: 'POST' }).catch(() => null);
+    if (!r) continue;
+    const b = (await r.json().catch(() => ({}))) as { local?: boolean; token?: string; origin?: string };
+    // the host's own answer names the World's origin (an http(s) origin only)
+    const own = httpOrigin(b.origin)?.origin;
+    if (r.status === 409 && own && own !== ORIGIN) { window.location.replace(`${own}${BASE}/${name}`); return 'moved'; }
+    if (r.ok && b.local) return { token: typeof b.token === 'string' && b.token ? b.token : SESSION };
+  }
+  return null;
+}
+
 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
+  // is shown only once it is known nothing opens by itself
+  const [local, setLocal] = useState(false); const [probed, setProbed] = useState(false);
   const [draft, setDraft] = useState<string>('');
   const [mode, setMode] = useState<Mode | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [parts, setParts] = useState<string[]>(route());
   useEffect(() => { const on = () => setParts(route()); window.addEventListener('popstate', on); return () => window.removeEventListener('popstate', on); }, []);
+  // a snapshot's page on its own origin sent the way back here (`#close=<branch>`): this World's token
+  // removes the branch it was
+  useEffect(() => {
+    const [ro, rw] = route(); const here = worldOf(ro, rw); const [o, w] = here ? here.split('/') : [];
+    // only a snapshot this tab made of this World: a fragment is anyone's to write
+    const made = snapshots()[CLOSING];
+    if (!CLOSING || !token || !o || !w || !made?.made || made.parent !== `${o}/${w}` || worldOf(...CLOSING.split('/')) !== CLOSING) return;
+    try { window.history.replaceState(null, '', window.location.pathname + window.location.search); } catch { /* fine */ }
+    void door(token, `/-/${o}/${w}/branches/${CLOSING}`, { method: 'DELETE' }).catch(() => null).then(() => forgetSnapshot(CLOSING));
+  }, [token]);
 
   /** The mode is what the origin answers: a host's inventory to the admin token, else the worlds this token opens. */
   const load = useCallback(async (t: string) => {
     setError(null);
-    if (!t) { setMode(null); return; }
-    const inventory = await door(t, '/-/worlds');
+    if (!t) {
+      const found = await localSession();
+      if (found === 'moved') return;
+      if (found) { setLocal(true); if (found.token !== SESSION) keep(found.token); setToken(found.token); return; }
+      setMode(null); setProbed(true); return;
+    }
+    // on a World's own origin the session is the credential: a local World opens it again itself (after a restart, a
+    // cleared cookie or a rotated token), and says it is local
+    if (ON_WORLD && t === SESSION) { const found = await localSession(); if (found === 'moved') return; if (found) setLocal(true); }
+    // on a World origin a pass the platform signed for this person is spent on the World's session, once
+    if (ON_WORLD && t === PASSED) {
+      const [ro, rw] = route(); const here = worldOf(ro, rw); const [o, w] = here ? here.split('/') : [];
+      const r = o && w ? await nativeFetch(`${ORIGIN}/-/${o}/${w}/session`, { method: 'POST', headers: { 'x-volter-pass': FRAGMENT.get('pass') ?? '' } }).catch(() => null) : null;
+      if (!r) { setError(`${ORIGIN} did not answer: no session was opened`); setMode(null); return; }
+      if (!r.ok) { setError(`${await failure(r)}. Open it again from the platform.`); setMode(null); return; }
+      keepPortal(((await r.json().catch(() => ({}))) as { issuer?: string }).issuer);
+      setToken(SESSION); return;
+    }
+    // on a World origin a token is exchanged for the World's session before anything renders, and then dropped
+    if (ON_WORLD && t !== SESSION) {
+      const [ro, rw] = route(); const here = worldOf(ro, rw); const [o, w] = here ? here.split('/') : [];
+      const r = o && w ? await nativeFetch(`${ORIGIN}/-/${o}/${w}/session`, { method: 'POST', headers: { 'x-volter-token': t } }).catch(() => null) : null;
+      // a refused token, a session kept elsewhere and a host that failed are three different things to say
+      if (!r) { setError(`${ORIGIN} did not answer: no session was opened`); setMode(null); return; }
+      if (!r.ok) {
+        const why = await failure(r);
+        setError(r.status === 401 || r.status === 403 ? `That token does not open ${o}/${w}.` : r.status === 409 ? `${o}/${w}'s session lives at another origin: ${why}` : `The World could not open a session (${r.status}): ${why}`);
+        setMode(null); return;
+      }
+      setToken(SESSION); return;
+    }
+    // a World's own origin serves that World, never the host's inventory: asked only where a host could answer
+    const inventory = ON_WORLD ? new Response(null, { status: 404 }) : await door(t, '/-/worlds');
     if (inventory.ok) { const { worlds } = (await inventory.json()) as { worlds: Row[] }; setMode({ kind: 'admin', worlds }); return; }
     if (inventory.status === 429) { setError('You are asking faster than the platform allows — wait a moment and reload.'); setMode(null); return; } // never misread a rate limit as "not a host"
     // A host's inventory accepts only its admin token. A world token gets 401 here but
     // still opens its own world below; only a managed portal's 401 means sign-in expired.
-    if (inventory.status === 401 && MANAGED) { setError('Your sign-in no longer opens this console — sign in again.'); setMode(null); return; }
     if (inventory.status >= 500) { const body = (await inventory.json().catch(() => ({}))) as { error?: string }; setError(`The platform could not list your worlds${body.error ? `: ${body.error}` : ''}. Reload; if it stays, the status page says what is wrong.`); setMode(null); return; }
     let worlds = NAMES;
     if (worlds.length === 0) {
-      const ping = await fetch(`${ORIGIN}/-/ping`); // not a platform answer: perhaps this origin is a bare host
+      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; }
     }
     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 })) }); } }
-    if (opened.length === 0) { setError('this token opens no world here'); setMode(null); return; }
+    if (opened.length === 0) { setError('This link or key opens no World here: it was revoked, or it has ended.'); setMode(null); return; }
     setMode({ kind: 'world', worlds: opened });
   }, []);
   useEffect(() => { void load(token); }, [token, load]);
 
   const worldToken = (name: string): string => (mode?.kind === 'admin' ? mode.worlds.find((w) => w.name === name)?.token ?? token : token);
-  const [who, setWho] = useState<string>(''); const [support, setSupport] = useState<{ until: string; reason: string } | null>(null);
-  useEffect(() => { if (!MANAGED || !token) return; void door(token, '/-/orgs').then(async (r) => { if (r.ok) { const b = (await r.json()) as { person?: { email?: string; name?: string; support?: { until: string; reason: string } } }; setSupport(b.person?.support ?? null); setWho(b.person?.email ?? b.person?.name ?? ''); } }); }, [token]);
+  const [who, setWho] = useState<string>('');
 
   if (!token || (!mode && !error)) {
     return (
       <main>
-        <h1><img src={WORLD_LOGO} alt="" width={24} height={24} style={{ verticalAlign: 'middle' }} /> Volter World</h1>
-        {token && !mode && !error ? <p>Opening…</p> : (
+        <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>
@@ -105,542 +289,1100 @@ function App(): React.JSX.Element {
       </main>
     );
   }
-  const signOut = (): void => { if (mode) for (const w of mode.worlds) navigator.sendBeacon(`${w.base.replace(/\/[^/]+\/[^/]+$/, '')}/-/${w.name}/session/end`); keep(''); setToken(''); setDraft(''); setMode(null); go([]); if (MANAGED) window.location.assign(`${ORIGIN}/-/sign-out`); };
+  const signOut = (): void => {
+    // a local World has no sign-in to leave: its page opens itself again
+    if (local) { window.location.reload(); return; }
+    if (ON_WORLD) {
+      // on a World origin the page is replaced, not re-rendered: nothing a frame beside the console may have hooked
+      // into this document survives to see the next token typed
+      const [ro, rw] = route(); const here = worldOf(ro, rw); const [o, w] = here ? here.split('/') : [];
+      // opened from a platform, the way out is back to it (where the person signs in); otherwise the World asks for a token
+      const fresh = (): void => window.location.replace(portal() ? `${portal()}/` : `${ORIGIN}${BASE}/${o && w ? `${o}/${w}` : ''}?signin`);
+      setTimeout(fresh, 2000); // the page is replaced whether or not the host answers
+      if (o && w) void nativeFetch(`${ORIGIN}/-/${o}/${w}/session/end`, { method: 'POST' }).catch(() => null).then(fresh); else fresh();
+      return;
+    }
+    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><h1><img src={WORLD_LOGO} alt="" width={24} height={24} style={{ verticalAlign: 'middle' }} /> Volter World</h1><p role="alert">{error ?? 'nothing answered'}</p><button onClick={signOut}>Use another token</button></main>;
+    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>;
   }
-  const [org, world, twin] = parts;
+  // `/<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 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 twin = tabbed || !third || !PART.test(third) ? undefined : third;
+  const tabArg = argPart && PART.test(argPart) ? argPart : 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);
+  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);
+    if (back && back !== ORIGIN) { forgetSnapshot(s.name); window.location.assign(`${back}${BASE}/${s.parent}#close=${encodeURIComponent(s.name)}`); return; }
+    // the branch goes with the way back: a snapshot is a throwaway World, not something to leave running (one this
+    // tab made; a carried one is only left)
+    if (s.made) await door(worldToken(s.parent), `/-/${s.parent}/branches/${s.name}`, { method: 'DELETE' }).catch(() => null);
+    forgetSnapshot(s.name); go(s.parent.split('/'));
+  };
   return (
-    <main>
-      {support ? <p role="alert">Viewing as Volter support — read only, until {when(support.until)}. Reason on record: {support.reason}.</p> : null}
+    <main className={name ? 'app' : undefined}>
       <header>
-        <h1><a href={`${BASE}/`} onClick={(e) => { e.preventDefault(); go([]); }}><img src={WORLD_LOGO} alt="" width={24} height={24} style={{ verticalAlign: 'middle' }} /> Volter World</a></h1>
-        <nav aria-label="breadcrumb">
-          {org && world ? <a href={`${BASE}/${org}/${world}`} onClick={(e) => { e.preventDefault(); go([org, world]); }}>{org}/{world}</a> : null}
+        {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">
+          {name ? <><span className="crumb-sep" aria-hidden="true">/</span><span>{name.split('/')[0]}</span><span className="crumb-sep" aria-hidden="true">/</span><a href={`${BASE}/${name}`} className="crumb-world" onClick={(e) => { e.preventDefault(); go(name.split('/')); }}>{name.split('/')[1]}</a></> : null}
           {twin ? <span> / {twin}</span> : null}
+          {tabbed && tabPart === 'trace' ? <span> / trace</span> : null}
         </nav>
-        {portal() ? <a href={`${portal()}/-/console/`}>← back to your worlds</a> : null}
-        <span className="mode">{MANAGED ? (who ? `signed in as ${who}` : 'signed in') : mode.kind === 'admin' ? 'host: admin' : 'world token'}</span>
-        {MANAGED ? <a href={`${ORIGIN}/-/account`}>Account</a> : null}
-        {MANAGED ? <a href={`${SITE}/status.html`}>Status</a> : null}
-        {MANAGED ? <a href="#help">Help</a> : null}
-        <button onClick={signOut}>Sign out</button>
+        {/* 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>
-      {org && world
-        ? <WorldView name={`${org}/${world}`} token={worldToken(`${org}/${world}`)} twin={twin} admin={mode.kind === 'admin' ? token : null} onRemoved={() => { void load(token); go([]); }} />
+      {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} />
         : <Worlds mode={mode} admin={mode.kind === 'admin' ? token : null} reload={() => load(token)} />}
     </main>
   );
 }
 
+/** A HOST's home (self-hosted, or a World token's list): the Worlds this origin serves, each opened in the page; a host's
+ *  admin rotates, removes and makes them here, where the admin token lives. People and orgs are the platform's pages. */
 function Worlds({ mode, admin, reload }: { mode: Mode; admin: string | null; reload: () => Promise<void> }): React.JSX.Element {
   const [org, setOrg] = useState(''); const [world, setWorld] = useState(''); const [vendors, setVendors] = useState('');
   const [note, setNote] = useState<string | null>(null);
-  const [myOrgs, setMyOrgs] = useState<string[]>([]);
-  // the org switcher (punchlist 2.2): a person in several orgs works in ONE at a time — remembered per tab
-  const remembered = (): string => { try { return sessionStorage.getItem('volter.console.org') ?? ''; } catch { return ''; } };
-  const [current, setCurrent] = useState<string>(remembered());
-  const switchOrg = (name: string): void => { setCurrent(name); setOrg(name); try { sessionStorage.setItem('volter.console.org', name); } catch { /* no storage */ } };
-  const loadOrgs = useCallback(async () => {
-    if (!MANAGED || !admin) return;
-    const r = await door(admin, '/-/orgs'); if (!r.ok) return;
-    const names = ((await r.json()) as { orgs: Array<{ slug: string | null; name: string }> }).orgs.map((o) => o.slug ?? o.name);
-    setMyOrgs(names);
-    const pick = names.length === 1 ? names[0]! : names.includes(remembered()) ? remembered() : '';
-    if (pick) { setOrg(pick); setCurrent(pick); }
-    // the org worked in no longer exists (deleted, or left): stand in the first one that does
-    setCurrent((c) => (c && !names.includes(c) ? (names[0] ?? '') : c)); setOrg((o) => (o && !names.includes(o) ? (names[0] ?? '') : o));
-  }, [admin]);
-  useEffect(() => { void loadOrgs(); }, [loadOrgs]);
-  const [worldsVersion, setWorldsVersion] = useState(0);
-  // a world deleted from the portal: the platform's door (walk 3b: nothing removed a world, so an org could never be deleted)
-  const deleteWorld = async (name: string): Promise<void> => {
-    setNote(null);
+  const rotateWorld = async (name: string): 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' });
+    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}`);
+    await reload();
+  };
+  const removeWorld = async (name: string): Promise<void> => {
     const r = await door(admin!, `/-/worlds/${name}`, { method: 'DELETE' });
-    const body = (await r.json().catch(() => ({}))) as { error?: string };
-    setNote(r.ok ? `deleted ${name}` : body.error ?? `answered ${r.status}`);
-    await reload(); setWorldsVersion((v) => v + 1);
+    const b = (await r.json().catch(() => ({}))) as { error?: string };
+    setNote(r.ok ? `removed ${name}` : b.error ?? `answered ${r.status}`);
+    await reload();
   };
   const [provisioning, setProvisioning] = useState(false);
   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(); setWorldsVersion((v) => v + 1); // the org stays selected: the next world usually goes to the same org
+      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
     } finally { setProvisioning(false); }
   };
-  const allRows: Array<{ name: string; base: string; token?: string; twins: Row['twins'] }> = mode.worlds;
-  const rows = MANAGED && current && myOrgs.length > 1 ? allRows.filter((r) => r.name.startsWith(`${current}/`)) : allRows;
   return (
     <section aria-labelledby="worlds">
-      {MANAGED && admin ? <GettingStarted token={admin} orgs={myOrgs} worlds={allRows.length} firstWorld={rows[0]?.name} version={worldsVersion} /> : null}
       <h2 id="worlds">Worlds</h2>
-      {MANAGED && myOrgs.length > 1 ? <p><label>Current org <select aria-label="Current org" value={current} onChange={(e) => switchOrg(e.target.value)}><option value="">all my orgs</option>{myOrgs.map((n) => <option key={n} value={n}>{n}</option>)}</select></label></p> : null}
+      <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>twins</th>{MANAGED ? <th>actions</th> : null}</tr></thead>
+        <thead><tr><th>world</th><th>address</th><th>stand-ins for</th>{admin ? <th>actions</th> : null}</tr></thead>
         <tbody>
-          {rows.map((w) => (
+          {mode.worlds.map((w) => (
             <tr key={w.name}>
-              {/* managed: a world opens on its OWN host's console (the portal never proxies a world). self-hosted: in-page */}
-              <td>{MANAGED
-                ? <a href={`${w.base.replace(/\/[^/]+\/[^/]+$/, '')}/-/console/${w.name}#token=${encodeURIComponent(w.token ?? '')}&portal=${encodeURIComponent(ORIGIN)}`}>{w.name}</a>
-                : <a href={`${BASE}/${w.name}`} onClick={(e) => { e.preventDefault(); go(w.name.split('/')); }}>{w.name}</a>}</td>
+              <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) => t.vendor).join(', ') || '—'}</td>
-              {MANAGED ? <td><button type="button" aria-label={`Delete ${w.name}`} onClick={() => { if (window.confirm(`Delete the world ${w.name}? Its host stops serving it and its history goes with it.`)) void deleteWorld(w.name); }}>Delete</button></td> : null}
+              <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 && MANAGED ? <Orgs token={admin} version={worldsVersion} only={myOrgs.length > 1 ? current : ''} onChanged={async () => { await loadOrgs(); await reload(); }} /> : null}
-      {admin && MANAGED ? <PersonalTokens token={admin} onChanged={() => setWorldsVersion((v) => v + 1)} /> : null}
-      {admin && MANAGED ? <Help token={admin} orgs={myOrgs} onChanged={() => setWorldsVersion((v) => v + 1)} /> : null}
       {admin ? (
         <form onSubmit={provision} aria-labelledby="provision">
           <h3 id="provision">Provision a world</h3>
-          {MANAGED && myOrgs.length > 0
-            ? <label>Org <select name="org" aria-label="Org" value={org} onChange={(e) => setOrg(e.target.value)} required>{myOrgs.map((o) => <option key={o} value={o}>{o}</option>)}</select></label>
-            : <label>Org <input name="org" value={org} onChange={(e) => setOrg(e.target.value)} required /></label>}
+          <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>
           {note ? <p role="status">{note}</p> : null}
         </form>
-      ) : null}
+      ) : note ? <p role="status">{note}</p> : null}
     </section>
   );
 }
 
-/** Managed only: the person's orgs (the Volter identity service's, through the platform) and a form to create one. */
-function Orgs({ token, version, only, onChanged }: { token: string; version: number; only: string; onChanged: () => Promise<void> }): React.JSX.Element {
-  const [orgs, setOrgs] = useState<Array<{ id: string; slug: string | null; name: string; role: string; held?: string | null; flags?: Record<string, boolean> }> | null>(null);
-  const [name, setName] = useState(''); const [note, setNote] = useState<string | null>(null); const [accepted, setAccepted] = useState(false);
-  const [tick, setTick] = useState(0); // every re-read of the orgs is an act done: the Activity lists re-read too
-  const load = useCallback(async () => { const r = await door(token, '/-/orgs'); setOrgs(r.ok ? ((await r.json()) as { orgs: Array<{ id: string; slug: string | null; name: string; role: string; held?: string | null; flags?: Record<string, boolean> }> }).orgs : []); setTick((t) => t + 1); }, [token]);
-  useEffect(() => { void load(); }, [load]);
-  const create = async (e: React.FormEvent): Promise<void> => {
-    e.preventDefault(); setNote(null);
-    const r = await door(token, '/-/orgs', { method: 'POST', body: JSON.stringify({ name, accepted }) });
-    const body = (await r.json()) as { error?: string; slug?: string; name?: string };
-    if (!r.ok) { setNote(body.error ?? `answered ${r.status}`); return; }
-    setNote(`created org ${body.slug ?? body.name}`); setName(''); await load(); await onChanged();
-  };
-  return (
-    <section aria-labelledby="orgs">
-      <h3 id="orgs">Your orgs</h3>
-      {orgs === null ? <p>Loading…</p> : orgs.length === 0 ? <p>You belong to no org yet — create one to provision worlds into.</p> : (
-        <ul>{orgs.filter((o) => !only || (o.slug ?? o.name) === only).map((o) => <li key={o.id}>{o.slug && o.name && o.name !== o.slug ? <>{o.name} <span className="mode">({o.slug})</span></> : (o.slug ?? o.name)} <span className="mode">({o.role})</span>{o.held ? <p role="alert">Held: {o.held}.</p> : <><Billing token={token} org={o.slug ?? o.id} version={version} flags={o.flags ?? {}} /><Members token={token} org={o.slug ?? o.id} admin={o.role === 'admin' || o.role === 'org:admin'} onChanged={() => setTick((t) => t + 1)} /><OrgSettings token={token} org={o.slug ?? o.id} name={o.name} admin={o.role === 'admin' || o.role === 'org:admin'} worlds={0} version={version + tick} flags={o.flags ?? {}} onChanged={async (said?: string) => { await load(); if (said) setNote(said); await onChanged(); }} />{(o.role === 'admin' || o.role === 'org:admin') ? <Activity token={token} org={o.slug ?? o.id} version={version + tick} /> : null}</>}</li>)}</ul>
-      )}
-      <form onSubmit={create} aria-labelledby="create-org">
-        <h4 id="create-org">Create an org</h4>
-        <label>Org name <input name="orgName" value={name} onChange={(e) => setName(e.target.value)} placeholder="acme" required /></label>
-        <label><input name="accepted" type="checkbox" checked={accepted} onChange={(e) => setAccepted(e.target.checked)} required /> I agree to the <a href={`${ORIGIN}/terms`} target="_blank" rel="noreferrer">terms of service</a> and the <a href={`${ORIGIN}/privacy`} target="_blank" rel="noreferrer">privacy policy</a></label>
-        <button type="submit">Create org</button>
-        {note ? <p role="status">{note}</p> : null}
-      </form>
-    </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 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 };
+/** 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'], ['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' };
+/** 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. */
+const DONE: Record<string, string> = { verify: 'verified', use: 'used', issue: 'issued', revoke: 'revoked', rotate: 'rotated', seed: 'seeded', upsert: 'saved', set: 'set', start: 'started', finish: 'finished', fail: 'failed', schedule: 'scheduled', deliver: 'delivered', like: 'liked', follow: 'followed', reply: 'replied', create: 'created', update: 'updated', delete: 'deleted', record: 'recorded', remove: 'removed', add: 'added', send: 'sent', post: 'posted', postmessage: 'posted', cancel: 'canceled', close: 'closed', open: 'opened', publish: 'published', upload: 'uploaded', invite: 'invited', archive: 'archived', merge: 'merged', refund: 'refunded', capture: 'captured', confirm: 'confirmed', pay: 'paid' };
+function said(e: Entry): { what: string; label: string | null } {
+  const op = e.operation ?? e.op;
+  const verb = (op.includes('.') ? op.slice(op.lastIndexOf('.') + 1) : op).toLowerCase();
+  const kind = e.subject.type.replace(/[_-]+/g, ' ').trim();
+  const Kind = `${kind.charAt(0).toUpperCase()}${kind.slice(1)}`;
+  // `<vendor>.twin.<thing>` and `seed_<thing>`: the World itself set it up (a seed), not the app
+  const seeded = /(^|\.)twin\./.test(op) || /^seed_/.test(verb);
+  // an operation with no past tense here reads as words (`channel.mark` → Channel mark), never as its identifier
+  const words = op.replace(/[._]+/g, ' ').trim();
+  const what = seeded ? `${Kind} seeded` : DONE[verb] ? `${Kind} ${DONE[verb]}` : `${words.charAt(0).toUpperCase()}${words.slice(1)}`;
+  const f = e.fields ?? {};
+  const label = ['title', 'name', 'email', 'text', 'subject', 'summary', 'description'].map((k) => f[k]).find((v): v is string => typeof v === 'string' && v.trim() !== '') ?? null;
+  // a vendor's own markup (Slack's <@U1|ada>, <#C1|general>, <https://…|text>) reads as it does on the vendor's screen
+  const plain = label === null ? null : label.replace(/<([@#!])[^|>]*\|([^>]+)>/g, (_m, sigil: string, name: string) => `${sigil === '!' ? '@' : sigil}${name}`).replace(/<(?:https?:[^|>]+)\|([^>]+)>/g, '$1').replace(/<(https?:[^>]+)>/g, '$1');
+  return { what, label: plain === null ? null : plain.length > 80 ? `${plain.slice(0, 79)}…` : plain };
 }
+/** 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);
 
-type PlanCard = { id: string; name: string; priceMonthly: number; limits: { worlds: number | null; twinsPerWorld: number | null; worldHours: number | null; members: number | null }; pitch: string; features: string[] };
-type BillingInfo = { plan: { id: string; name: string; priceMonthly: number; limits: { worlds: number | null; twinsPerWorld: number | null; worldHours: number | null; members: number | null } }; plans: PlanCard[]; pendingCheckout: { id: string; url: string } | null; paid: boolean; lastTickAt: string | null; subscription: { status: string; currentPeriodEnd: string | null; trialEnd: string | null; cancelAtPeriodEnd: boolean } | null; usageByDay?: Array<{ day: string; hours: number; worlds: number }>; spendCap?: boolean; overageCentsPerHour?: number | null; reminders?: { trialEnding: string | null; renewal: string | null; sent: string[] }; usage: Record<string, number>; meters: Array<{ name: string; label: string }>; worlds: number; restriction: { status: string; graceEnds: string; meter: string; reason?: string } | 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 {
+  // 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
+  const [sessionError, setSessionError] = useState<string | null>(null); const [attempt, setAttempt] = useState(0);
+  // biome-ignore lint/correctness/useExhaustiveDependencies: `attempt` is the wall's "Try again"
+  useEffect(() => {
+    let live = true; setSessionError(null);
+    void door(token, `/-/${name}/session`, { method: 'POST' }).then(async (r) => {
+      const b = (await r.json().catch(() => ({}))) as { scope?: string; origin?: string; error?: string; who?: string; issuer?: string };
+      // the person a platform's pass opened this session for: the page says who is signed in, and the way back to it
+      keepPortal(b.issuer);
+      if (b.who) onWho?.(b.who);
+      // the World's session lives at its own origin: its pages go there
+      // the host's own answer names the World's origin (a console apart is on another host and port): an http(s) origin only
+      const own = httpOrigin(b.origin)?.origin;
+      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}`);
+    }).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]);
+  /** The session as the wall shows it: opening, opened (with its scope), or refused. */
+  const session: MirrorSession = sessionError ? { state: 'error', error: sessionError } : scope === 'pending' ? { state: 'pending' } : { state: 'ok', scope };
+  // fail closed: a token whose scope is not known (the session request failed) is shown no control it might not
+  // 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'); };
 
-/** The org's plan, quota and usage — Polar's customer state as the platform reads it — with the way to pay and the way to the billing portal. */
-function Billing({ token, org, version, flags }: { token: string; org: string; version: number; flags?: Record<string, boolean> }): React.JSX.Element {
-  const [info, setInfo] = useState<BillingInfo | null>(null);
-  const [checkout, setCheckout] = useState<string | null>(null);
-  const [portal, setPortal] = useState<string | null>(null);
-  const [note, setNote] = useState<string | null>(null);
-  const fresh = typeof window !== 'undefined' && new URLSearchParams(window.location.search).has('upgraded'); // back from checkout: Polar's state now, not the cache
-  const [failed, setFailed] = useState<string | null>(null);
-  const load = useCallback(async () => {
-    let r = await door(token, `/-/orgs/${org}/billing${fresh ? '?fresh=1' : ''}`);
-    if (r.status === 401) { await new Promise((res) => setTimeout(res, 800)); r = await door(token, `/-/orgs/${org}/billing${fresh ? '?fresh=1' : ''}`); } // the session cookie rotates; one retry before an error is shown (walk 3b)
-    if (r.ok) { setInfo((await r.json()) as BillingInfo); setFailed(null); } else { setInfo(null); setFailed(((await r.json().catch(() => ({}))) as { error?: string }).error ?? `answered ${r.status}`); }
-  }, [token, org, fresh, version]); // version: the worlds changed — quota and usage with them
-  useEffect(() => { void load(); }, [load]);
-  const upgrade = async (): Promise<void> => {
-    setNote(null);
-    const r = await door(token, `/-/orgs/${org}/checkout`, { method: 'POST', body: '{}' });
-    const body = (await r.json()) as { url?: string; error?: string; pending?: boolean };
-    if (!r.ok || !body.url) { setNote(body.error ?? `answered ${r.status}`); return; }
-    setCheckout(body.url); if (body.pending) setNote('You already have an open checkout — this is the same link. Pay there and come back.');
-  };
-  const setCap = async (on: boolean): Promise<void> => { setFailed(null); const r = await door(token, `/-/orgs/${org}/billing`, { method: 'PATCH', body: JSON.stringify({ spendCap: on }) }); if (!r.ok) { const body = (await r.json().catch(() => ({}))) as { error?: string }; setFailed(body.error ?? `answered ${r.status}`); return; } await load(); };
-  const manage = async (): Promise<void> => {
-    setNote(null);
-    const r = await door(token, `/-/orgs/${org}/billing-portal`, { method: 'POST', body: '{}' });
-    const body = (await r.json()) as { url?: string; error?: string };
-    if (!r.ok || !body.url) { setNote(body.error ?? `answered ${r.status}`); return; }
-    setPortal(body.url);
+  const [tick, setTick] = useState(0);
+  useEffect(() => { const id = setInterval(() => { if (!document.hidden) setTick((t) => t + 1); }, 5000); return () => clearInterval(id); }, []);
+  const [clockVersion, setClockVersion] = useState(0);
+  const clock = useDoor<Clock>(token, `/-/${name}/clock`, tick + clockVersion);
+  const twins = useDoor<{ twins: Twin[] }>(token, `/-/${name}/twins`);
+  const branches = useDoor<{ branches: Branch[] }>(token, `/-/${name}/branches`, clockVersion);
+  const map = useDoor<WorldMap>(token, `/-/${name}/map`, Math.floor(tick / 2));
+  // 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 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('/'))} />;
+  }
+  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>;
   };
-  if (!info) return <p className="mode" role={failed ? 'alert' : undefined}>{failed ? `Billing: ${failed}` : 'Billing: loading…'}</p>;
-  const lim = (n: number | null): string => (n === null ? 'unlimited' : String(n));
-  const when = (iso: string | null): string => (iso ? day(iso) : '');
   return (
-    <div className="billing" aria-label={`Billing for ${org}`}>
-      <p><strong>Plan: {info.plan.name}</strong>{info.plan.priceMonthly ? ` — $${(info.plan.priceMonthly / 100).toFixed(0)}/month` : ''}
-        {info.subscription?.trialEnd ? ` · trial ends ${when(info.subscription.trialEnd)} — the card is charged then` : ''}
-        {info.subscription?.cancelAtPeriodEnd ? ` · cancels ${when(info.subscription.currentPeriodEnd)}` : info.subscription?.currentPeriodEnd ? ` · renews ${when(info.subscription.currentPeriodEnd)}` : ''}</p>
-      <p>Worlds: {info.worlds} of {lim(info.plan.limits.worlds)} · twins per world: {lim(info.plan.limits.twinsPerWorld)} · members: {lim(info.plan.limits.members)}</p>
-      <ul className="usage">{info.meters.map((m) => <li key={m.name}>{m.label}: {info.usage[m.name] ?? 0}{m.name === 'world_hours' && info.plan.limits.worldHours !== null ? ` of ${info.plan.limits.worldHours} this period` : ''}</li>)}</ul>
-      {info.plan.id !== 'free' && info.overageCentsPerHour ? <p className="mode">{info.spendCap !== false
-        ? <>Spend cap is on: past the plan's {info.plan.limits.worldHours} world-hours, provisioning and refresh are held after a grace period. Need more? <button type="button" onClick={() => void setCap(false)}>Switch the spend cap off</button> — hours beyond the plan are then billed at ${(info.overageCentsPerHour / 100).toFixed(2)} each.</>
-        : <>Spend cap is off: hours beyond the plan's {info.plan.limits.worldHours} are billed at ${(info.overageCentsPerHour / 100).toFixed(2)} each and nothing is held. <button type="button" onClick={() => void setCap(true)}>Switch the spend cap on</button></>}</p> : null}
-      {info.reminders?.trialEnding ? <p className="mode">We email the admins on {day(info.reminders.trialEnding)}, seven days before the trial ends{info.reminders.sent.some((k) => k.startsWith('trial-ending')) ? ' — sent' : ''}.</p> : info.reminders?.renewal ? <p className="mode">We email the admins on {day(info.reminders.renewal)}, seven days before the renewal{info.reminders.sent.some((k) => k.startsWith('renewal')) ? ' — sent' : ''}.</p> : null}
-      {flags?.usage_by_day && info.usageByDay && info.usageByDay.length > 0 ? <div aria-label="World-hours by day"><h5 className="mode">World-hours by day this period</h5><ul className="bars">{info.usageByDay.map((d) => { const max = Math.max(1, ...info.usageByDay!.map((x) => x.hours)); return <li key={d.day}><span className="mode">{d.day.slice(5)}</span><span className="bar" style={{ width: `${Math.max(2, Math.round((d.hours / max) * 100))}%` }} aria-hidden="true" /><span>{d.hours} h · {d.worlds} world{d.worlds === 1 ? '' : 's'}</span></li>; })}</ul></div> : null}
-      <p className="mode">{info.lastTickAt ? `Usage metered hourly; last metered ${info.lastTickAt.slice(0, 16).replace('T', ' ')} UTC.` : 'Usage is metered hourly; the first hour has not been metered yet.'}</p>
-      {info.paid ? <p role="status">Payment received — your org is on {info.plan.name}.</p> : null}
-      {info.pendingCheckout && !checkout ? <p role="status">Your checkout at Polar is still open: <a href={info.pendingCheckout.url}>continue to checkout at Polar</a>. Reload after paying.</p> : null}
-      {info.plan.id === 'free' ? (() => { const team = info.plans.find((p) => p.id === 'team'); return team ? <div className="plan-preview" aria-label="Team plan"><p><strong>Team — ${(team.priceMonthly / 100).toFixed(0)}/month.</strong> {team.pitch}</p><ul>{team.features.map((f) => <li key={f}>{f}</li>)}</ul></div> : null; })() : null}
-      {info.restriction ? <p role="alert">{restrictionCopy(info)}</p> : null}
-      {info.plan.id === 'free' ? <button type="button" onClick={() => void upgrade()}>{trialDaysOf(info) && !info.subscription ? `Start a ${trialDaysOf(info)}-day trial of Team` : 'Upgrade to Team'}</button> : <button type="button" onClick={() => void manage()}>Manage billing</button>}
-      {checkout ? <p role="status">Your checkout is ready: <a href={checkout}>continue to checkout at Polar</a>. You come back here when it is paid.</p> : null}
-      {portal ? <p role="status"><a href={portal}>Open the billing portal</a> — invoices, payment method, cancellation.</p> : null}
-      {note ? <p role="status">{note}</p> : null}
+    <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('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 === '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>
     </div>
   );
 }
 
-/** A date in the person's own calendar — a UTC slice reads a day ahead in the Americas (walk 5). */
-const day = (iso: string): string => { const t = Date.parse(iso); return Number.isNaN(t) ? iso : new Date(t).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' }); };
-
-/** The paid plan's trial, days, when it offers one (the biller's field; layer 6). */
-const trialDaysOf = (info: BillingInfo): number | null => (info.plans.find((p) => p.id === 'team') as { trialDays?: number | null } | undefined)?.trialDays ?? null;
-
-/** What the restriction machine's position means for this org, in the person's words — the reason named (layer 5: Twenty's NO_SUBSCRIPTION, Dub's downgrade copy). */
-function restrictionCopy(info: BillingInfo): string {
-  const r = info.restriction!; const until = when(r.graceEnds); const allows = info.plan.limits.worlds ?? 0;
-  if (r.meter === 'worlds') {
-    const lead = r.reason === 'no_subscription' ? `Your Team subscription ended, so this org is on the Free plan, which allows ${allows} world${allows === 1 ? '' : 's'}; it holds ${info.worlds}.` : `The ${info.plan.name} plan allows ${allows} world${allows === 1 ? '' : 's'}; this org holds ${info.worlds}.`;
-    return r.status === 'restricted' ? `${lead} Nothing was deleted, but the grace period ended ${until}: the worlds you hold no longer refresh and new ones are refused, until you upgrade or delete worlds down to ${allows}.` : `${lead} Nothing is deleted, and the worlds you hold keep working — refreshing and taking pushes — until ${until}. New worlds beyond ${allows} are refused from now on. After ${until} the ones you hold stop refreshing too, until you upgrade or delete worlds down to ${allows}.`;
-  }
-  return r.status === 'restricted' ? `Restricted: the ${info.plan.name} plan's world-hours were exceeded and the grace period ended ${until} — upgrade to provision and refresh again.` : `Over the plan's world-hours: you can keep working until ${until}; after that, provisioning and refresh are restricted until you upgrade or the next period.`;
+/** 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>;
 }
 
-type MemberRow = { id: string; userId: string; email: string | null; name: string | null; role: string };
-type PendingRow = { id: string; email: string; role: string; createdAt: string | null; expiresAt: string | null };
-/** The org's members — the Volter identity service's memberships — with the admin's invite, remove and role. */
-function Members({ token, org, admin, onChanged }: { token: string; org: string; admin: boolean; onChanged?: () => void }): React.JSX.Element {
-  const [members, setMembers] = useState<MemberRow[] | null>(null); const [pending, setPending] = useState<PendingRow[]>([]);
-  const [email, setEmail] = useState(''); const [note, setNote] = useState<string | null>(null);
-  const load = useCallback(async () => { const r = await door(token, `/-/orgs/${org}/members`); const body = r.ok ? ((await r.json()) as { members: MemberRow[]; pending?: PendingRow[] }) : { members: [] as MemberRow[], pending: [] as PendingRow[] }; setMembers(body.members); setPending(body.pending ?? []); }, [token, org]);
-  useEffect(() => { void load(); }, [load]);
-  const act = async (label: string, path: string, init: RequestInit): Promise<void> => {
-    setNote(null); const r = await door(token, path, init); const body = (await r.json().catch(() => ({}))) as { error?: string };
-    setNote(r.ok ? label : body.error ?? `answered ${r.status}`); await load(); if (r.ok) onChanged?.(); // the Activity list re-reads (walk 4: no row for the invite until a reload)
-  };
+/** "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 {
   return (
-    <div className="members" aria-label={`Members of ${org}`}>
-      <h4>Members</h4>
-      {members === null ? <p className="mode">loading…</p> : (
-        <ul>{members.map((m) => <li key={m.id}>{m.email ?? m.userId}{m.name ? ` (${m.name})` : ''} <span className="mode">{m.role.replace('org:', '')}</span>
-          {admin ? <> <button type="button" aria-label={`${m.role.endsWith('admin') ? 'Make member' : 'Make admin'}: ${m.email ?? m.userId}`} onClick={() => void act(`role changed for ${m.email ?? m.userId}`, `/-/orgs/${org}/members/${m.userId}`, { method: 'PATCH', body: JSON.stringify({ role: m.role.endsWith('admin') ? 'member' : 'admin' }) })}>{m.role.endsWith('admin') ? 'Make member' : 'Make admin'}</button> <button type="button" aria-label={`Remove ${m.email ?? m.userId}`} onClick={() => { if (window.confirm(`Remove ${m.email ?? m.userId} from ${org}? They lose access to its worlds.`)) void act(`removed ${m.email ?? m.userId}`, `/-/orgs/${org}/members/${m.userId}`, { method: 'DELETE' }); }}>Remove {m.email ?? m.userId}</button></> : null}
-        </li>)}</ul>
+    <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>
       )}
-      {pending.length > 0 ? <><h5 className="mode">Invited, not yet joined</h5><ul>{pending.map((p) => <li key={p.id}>{p.email} <span className="mode">invited{p.createdAt ? ` ${day(p.createdAt)}` : ''}{p.expiresAt ? ` · expires ${day(p.expiresAt)}` : ''}</span>{admin ? <> <button type="button" aria-label={`Revoke invitation: ${p.email}`} onClick={() => void act(`invitation to ${p.email} revoked`, `/-/orgs/${org}/invitations/${p.id}`, { method: 'DELETE' })}>Revoke invitation</button></> : null}</li>)}</ul></> : null}
-      {admin ? <form onSubmit={(e) => { e.preventDefault(); const to = email; void door(token, `/-/orgs/${org}/members`, { method: 'POST', body: JSON.stringify({ email: to }) }).then(async (r) => { const body = (await r.json().catch(() => ({}))) as { error?: string; pending?: boolean }; setNote(r.ok ? (body.pending ? `invited ${to} — they get an email and join when they accept` : `added ${to} — we emailed them`) : body.error ?? `answered ${r.status}`); await load(); if (r.ok) { setEmail(''); onChanged?.(); } }); }}>
-        <label>Add a member by email <input name="inviteEmail" type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="teammate@example.com" required /></label>
-        <button type="submit">Add member</button>
-        <p className="mode">Someone with an account here is added at once; anyone else is invited by email and joins when they accept.</p>
-      </form> : null}
-      {note ? <p role="status">{note}</p> : null}
-    </div>
+    </details>
   );
 }
 
-/** The org itself: its name, and the danger zone — deletion, refused while it holds worlds. */
-function OrgSettings({ token, org, name, admin, onChanged, version, flags }: { token: string; org: string; name: string; admin: boolean; worlds: number; onChanged: (said?: string) => Promise<void>; version?: number; flags?: Record<string, boolean> }): React.JSX.Element | null {
-  const [newName, setNewName] = useState(name); const [note, setNote] = useState<string | null>(null); const [confirm, setConfirm] = useState('');
-  if (!admin) return null;
-  const rename = async (e: React.FormEvent): Promise<void> => {
-    e.preventDefault(); setNote(null);
-    const r = await door(token, `/-/orgs/${org}`, { method: 'PATCH', body: JSON.stringify({ name: newName }) });
-    const body = (await r.json().catch(() => ({}))) as { error?: string };
-    setNote(r.ok ? `renamed to ${newName}` : body.error ?? `answered ${r.status}`); if (r.ok) await onChanged();
-  };
-  const removeEverything = async (): Promise<void> => {
-    setNote(null);
-    const r = await door(token, `/-/orgs/${org}?everything=1`, { method: 'DELETE' });
-    const body = (await r.json().catch(() => ({}))) as { error?: string };
-    if (r.ok) { await onChanged(`deleted ${org} and its worlds`); return; } // said above the list: this org's own card is about to go
-    setNote(body.error ?? `answered ${r.status}`);
-  };
-  const remove = async (): Promise<void> => {
-    setNote(null);
-    const r = await door(token, `/-/orgs/${org}`, { method: 'DELETE' });
-    const body = (await r.json().catch(() => ({}))) as { error?: string };
-    setNote(r.ok ? `deleted ${org}` : body.error ?? `answered ${r.status}`); if (r.ok) await onChanged();
-  };
+/** 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<{ branches: Branch[] }> | 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) : [];
   return (
-    <details className="org-settings"><summary>Org settings</summary>
-      <form onSubmit={rename}><label>New name <input name="orgRename" value={newName} onChange={(e) => setNewName(e.target.value)} required /></label><p className="mode">Only the name changes. The org's address, <code>{org}/…</code>, stays — nothing your code or the CLI points at moves.</p><button type="submit">Rename</button></form>
-      {admin ? <Labs token={token} org={org} onChanged={onChanged} /> : null}
-      {admin && flags?.webhooks ? <Webhooks token={token} org={org} /> : null}
-      {admin ? <SupportAccess token={token} org={org} version={version ?? 0} /> : null}
-      {admin ? <SecuritySettings token={token} org={org} onChanged={onChanged} /> : null}
-      {admin ? <OrgTokens token={token} org={org} /> : null}
-      <div className="danger" aria-label="Danger zone">
-        <h5>Danger zone</h5>
-        <p>Deleting the org removes it for every member. It is refused while the org holds worlds — delete those first.</p>
-        <label>Type the org's name to confirm <input name="confirmDelete" value={confirm} onChange={(e) => setConfirm(e.target.value)} placeholder={org} /></label>
-        <button type="button" disabled={confirm !== org} onClick={() => void remove()}>Delete org</button>
-        <button type="button" disabled={confirm !== org} onClick={() => { if (window.confirm(`Delete ${org} AND every world it holds? Their hosts stop serving them and their history goes with them.`)) void removeEverything(); }}>Delete org and its worlds</button>
+    <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) : 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(); go(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' && others.length === 0 && !snapshot ? <p className="mode">No branches yet. “View an earlier moment…” opens one.</p> : null}
       </div>
-      {note ? <p role="status">{note}</p> : null}
     </details>
   );
 }
 
-/** Scopes (layer 6): `object:action` as Sentry's and PostHog's — a token opens only what its scopes name. */
-const SCOPE_OBJECTS = ['worlds', 'orgs', 'members', 'billing', 'tokens', 'activity'] as const;
-function scopesFor(access: 'all' | 'read' | 'custom', custom: Record<string, 'none' | 'read' | 'write'>): string[] {
-  if (access === 'all') return ['*'];
-  if (access === 'read') return SCOPE_OBJECTS.map((o) => `${o}:read`);
-  const chosen = SCOPE_OBJECTS.filter((o) => custom[o] && custom[o] !== 'none').map((o) => `${o}:${custom[o]}`);
-  return chosen.length ? chosen : ['worlds:read'];
-}
-function scopeWords(scopes?: string[]): string {
-  if (!scopes || scopes.includes('*')) return 'all access';
-  if (SCOPE_OBJECTS.every((o) => scopes.includes(`${o}:read`)) && scopes.every((s) => s.endsWith(':read'))) return 'read only';
-  return scopes.join(', ');
-}
-function ScopePicker({ access, setAccess, custom, setCustom }: { access: 'all' | 'read' | 'custom'; setAccess: (a: 'all' | 'read' | 'custom') => void; custom: Record<string, 'none' | 'read' | 'write'>; setCustom: (c: Record<string, 'none' | 'read' | 'write'>) => void }): React.JSX.Element {
+/** 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'];
   return (
     <>
-      <label>Access <select name="tokenAccess" aria-label="Access" value={access} onChange={(e) => setAccess(e.target.value as 'all' | 'read' | 'custom')}><option value="all">all access — every scope you hold (*)</option><option value="read">read only — every object's :read scope</option><option value="custom">choose per object — read or read-and-write scopes</option></select></label>
-      <p className="mode">Scopes are <code>object:action</code> over worlds, orgs, members, billing, tokens and activity — the same names the API reference gives each endpoint.</p>
-      {access === 'custom' ? <ul className="usage">{SCOPE_OBJECTS.map((o) => <li key={o}><label>{o} <select aria-label={`Scope: ${o}`} value={custom[o] ?? 'none'} onChange={(e) => setCustom({ ...custom, [o]: e.target.value as 'none' | 'read' | 'write' })}><option value="none">no access</option><option value="read">read</option><option value="write">read and write</option></select></label></li>)}</ul> : null}
+      <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);
+            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>
+            );
+          })}</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>
+        ) : null}
+      </div>
     </>
   );
 }
 
-/** Labs (layer 8: Twenty's lab, Sentry's Early Adopter, Cal.com's opt-in): early-access features, on per org, or all with one switch. */
-function Labs({ token, org, onChanged }: { token: string; org: string; onChanged: () => Promise<void> }): React.JSX.Element {
-  type Feature = { key: string; name: string; description: string; since: string; on: boolean };
-  const [features, setFeatures] = useState<Feature[] | null>(null); const [early, setEarly] = useState(false); const [note, setNote] = useState<string | null>(null);
-  const load = useCallback(async () => { const r = await door(token, `/-/orgs/${org}/labs`); if (r.ok) { const b = (await r.json()) as { features: Feature[]; earlyAdopter: boolean }; setFeatures(b.features); setEarly(b.earlyAdopter); } else setFeatures([]); }, [token, org]);
-  useEffect(() => { void load(); }, [load]);
-  const set = async (patch: { flags?: Record<string, boolean>; earlyAdopter?: boolean }, label: string): Promise<void> => { setNote(null); const r = await door(token, `/-/orgs/${org}/labs`, { method: 'PATCH', body: JSON.stringify(patch) }); const body = (await r.json().catch(() => ({}))) as { error?: string }; setNote(r.ok ? label : body.error ?? `answered ${r.status}`); await load(); if (r.ok) await onChanged(); };
+/** 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<{ branches: Branch[] }> | 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 : [];
   return (
-    <div aria-label="Labs">
-      <h4>Labs</h4>
-      <p className="mode">Features that are new. Turn one on for this org, or turn on every new one as it lands.</p>
-      <label><input type="checkbox" name="earlyAdopter" checked={early} onChange={(e) => { setEarly(e.target.checked); void set({ earlyAdopter: e.target.checked }, e.target.checked ? 'early adopter: every new feature is on' : 'early adopter off'); }} /> Early adopter — every new feature is on for this org as soon as it lands</label>
-      {features === null ? <p className="mode">loading…</p> : <ul>{features.map((f) => <li key={f.key}><label><input type="checkbox" name={`lab:${f.key}`} checked={early || f.on} disabled={early} onChange={(e) => { const on = e.target.checked; setFeatures((list) => (list ?? []).map((x) => (x.key === f.key ? { ...x, on } : x))); void set({ flags: { [f.key]: on } }, `${f.name} ${on ? 'on' : 'off'}`); }} /> <strong>{f.name}</strong> <span className="mode">since {day(f.since)}</span> — {f.description}</label></li>)}</ul>}
-      {note ? <p role="status">{note}</p> : null}
+    <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>
+        {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>
     </div>
   );
 }
 
-/** Webhooks out (layer 7): endpoints with the events they want, the secret once, a test event, the last deliveries (Dub's, Polar's, Cal.com's shape). */
-function Webhooks({ token, org }: { token: string; org: string }): React.JSX.Element {
-  type Endpoint = { id: string; url: string; events: string[]; description: string; createdAt: string; consecutiveFailures: number; lastFailedAt: string | null; disabledAt: string | null };
-  type Delivery = { id: string; event: string; attempt: number; state: string; nextAt: string; attempts: Array<{ at: string; status: number | null; ok: boolean; response: string }> };
-  const [list, setList] = useState<Endpoint[] | null>(null); const [names, setNames] = useState<string[]>([]);
-  const [url, setUrl] = useState(''); const [description, setDescription] = useState(''); const [all, setAll] = useState(true); const [chosen, setChosen] = useState<string[]>([]);
-  const [secret, setSecret] = useState<string | null>(null); const [note, setNote] = useState<string | null>(null); const [open, setOpen] = useState<string | null>(null); const [deliveries, setDeliveries] = useState<Delivery[]>([]);
-  const load = useCallback(async () => { const r = await door(token, `/-/orgs/${org}/webhooks`); if (r.ok) { const b = (await r.json()) as { webhooks: Endpoint[]; events: string[] }; setList(b.webhooks); setNames(b.events); } else setList([]); }, [token, org]);
-  useEffect(() => { void load(); }, [load]);
-  const showDeliveries = async (id: string): Promise<void> => { setOpen(id); const r = await door(token, `/-/orgs/${org}/webhooks/${id}/deliveries`); setDeliveries(r.ok ? ((await r.json()) as { deliveries: Delivery[] }).deliveries : []); };
-  const add = async (e: React.FormEvent): Promise<void> => {
-    e.preventDefault(); setNote(null); setSecret(null);
-    const r = await door(token, `/-/orgs/${org}/webhooks`, { method: 'POST', body: JSON.stringify({ url, description, events: all ? ['*'] : chosen }) });
-    const body = (await r.json().catch(() => ({}))) as { secret?: string; error?: string };
-    if (!r.ok || !body.secret) { setNote(body.error ?? `answered ${r.status}`); return; }
-    setSecret(body.secret); setUrl(''); setDescription(''); await load();
+
+/** 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 {
+  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;
+  const send = async (label: string, path: string, body: unknown): Promise<void> => {
+    setBusy(true); setNote(null);
+    try {
+      const r = await door(token, `/-/${name}/${path}`, { method: path === 'clock' ? 'PUT' : 'POST', body: JSON.stringify(body) });
+      if (!r.ok) { refused(r); setNote({ ok: false, text: await failure(r) }); return; }
+      const c = (await r.json()) as Clock;
+      setNote({ ok: true, text: `${label} — the World is at ${new Date(c.at).toLocaleString()}` }); setSetting(false); onChanged();
+    } catch (e) { setNote({ ok: false, text: `the World did not answer: ${e instanceof Error ? e.message : String(e)}` }); } finally { setBusy(false); }
+  };
+  const setTime = (e: React.FormEvent): void => {
+    e.preventDefault();
+    const at = new Date(value);
+    if (Number.isNaN(at.getTime())) { setNote({ ok: false, text: 'Pick a date and time.' }); return; }
+    if (now && at.getTime() < Date.parse(now.at)) { setNote({ ok: false, text: `The World's clock only moves forward: pick a time after ${new Date(now.at).toLocaleString()}.` }); return; }
+    void send('Clock set', 'clock', { at: at.toISOString() });
   };
-  const act = async (label: string, path: string, init: RequestInit): Promise<void> => { setNote(null); const r = await door(token, path, init); const body = (await r.json().catch(() => ({}))) as { error?: string; delivery?: Delivery }; setNote(r.ok ? (body.delivery ? `${label}: ${body.delivery.state === 'delivered' ? `delivered (${body.delivery.attempts[0]?.status})` : `not delivered (${body.delivery.attempts[0]?.status ?? body.delivery.attempts[0]?.response}); retrying at ${when(body.delivery.nextAt)}`}` : label) : body.error ?? `answered ${r.status}`); await load(); if (open) await showDeliveries(open); };
-  const state = (w: Endpoint): string => w.disabledAt ? `disabled ${day(w.disabledAt)}` : w.consecutiveFailures > 0 ? `failing (${w.consecutiveFailures} in a row, last ${when(w.lastFailedAt ?? w.createdAt)})` : 'ok';
+  const advance = (amount: string, label: string): void => { void send(`Advanced ${label}`, 'clock/advance', { by: amount }); };
+  const presets: Array<[string, string]> = [['1h', '1 hour'], ['1d', '1 day'], ['7d', '1 week'], ['30d', '30 days']];
   return (
-    <div aria-label="Webhooks">
-      <h4>Webhooks</h4>
-      <p className="mode">Events the org raises — a world provisioned, a member added, the plan changed — sent to an address of yours as JSON, signed with Standard Webhooks (<code>webhook-id</code>, <code>webhook-timestamp</code>, <code>webhook-signature</code>). Ten attempts with backoff; twenty failures in a row disable the endpoint and email the admins.</p>
-      {note ? <p role="status">{note}</p> : null}
-      {list === null ? <p className="mode">loading…</p> : list.length === 0 ? <p className="mode">No endpoints yet.</p> : <ul>{list.map((w) => <li key={w.id}><code>{w.url}</code>{w.description ? ` — ${w.description}` : ''} <span className="mode">· {w.events.includes('*') ? 'every event' : w.events.join(', ')} · {state(w)}</span> <button type="button" aria-label={`Send a test event: ${w.url}`} onClick={() => void act('test event', `/-/orgs/${org}/webhooks/${w.id}/test`, { method: 'POST' })}>Send a test event</button> <button type="button" aria-label={`Deliveries: ${w.url}`} onClick={() => void showDeliveries(w.id)}>Deliveries</button> {w.disabledAt ? <button type="button" aria-label={`Enable: ${w.url}`} onClick={() => void act('endpoint enabled', `/-/orgs/${org}/webhooks/${w.id}`, { method: 'PATCH', body: JSON.stringify({ enabled: true }) })}>Enable</button> : <button type="button" aria-label={`Disable: ${w.url}`} onClick={() => void act('endpoint disabled', `/-/orgs/${org}/webhooks/${w.id}`, { method: 'PATCH', body: JSON.stringify({ enabled: false }) })}>Disable</button>} <button type="button" aria-label={`Remove endpoint: ${w.url}`} onClick={() => { if (window.confirm(`Remove the endpoint ${w.url}? Nothing more is sent to it.`)) void act('endpoint removed', `/-/orgs/${org}/webhooks/${w.id}`, { method: 'DELETE' }); }}>Remove</button>
-        {open === w.id ? <div aria-label={`Deliveries to ${w.url}`}>{deliveries.length === 0 ? <p className="mode">No deliveries yet.</p> : <table><thead><tr><th>when</th><th>event</th><th>attempt</th><th>status</th><th>answer</th></tr></thead><tbody>{deliveries.map((d) => <tr key={d.id}><td><code>{when(d.attempts[d.attempts.length - 1]?.at ?? d.nextAt)}</code></td><td>{d.event}</td><td>{d.attempt}{d.state === 'pending' ? ` · next ${when(d.nextAt)}` : ` · ${d.state}`}</td><td>{d.attempts[d.attempts.length - 1]?.status ?? '—'}</td><td className="mode">{(d.attempts[d.attempts.length - 1]?.response ?? '').slice(0, 80)}</td></tr>)}</tbody></table>}</div> : null}
-      </li>)}</ul>}
-      <form onSubmit={add}>
-        <label>Endpoint URL <input name="webhookUrl" type="url" value={url} onChange={(e) => setUrl(e.target.value)} placeholder="https://example.com/hooks/volter" required /></label>
-        <label>Description (optional) <input name="webhookDescription" value={description} onChange={(e) => setDescription(e.target.value)} /></label>
-        <label><input type="checkbox" name="webhookAll" checked={all} onChange={(e) => setAll(e.target.checked)} /> Every event</label>
-        {!all ? <ul className="usage">{names.map((n) => <li key={n}><label><input type="checkbox" name={`webhookEvent:${n}`} checked={chosen.includes(n)} onChange={(e) => setChosen(e.target.checked ? [...chosen, n] : chosen.filter((x) => x !== n))} /> {n}</label></li>)}</ul> : null}
-        <button type="submit">Add endpoint</button>
-      </form>
-      {secret ? <p role="status">The endpoint's secret, shown once — your receiver verifies each delivery with it: <code>{secret}</code> <button type="button" onClick={() => { void navigator.clipboard?.writeText(secret).then(() => setNote('copied')); }}>Copy</button></p> : null}
+    <div className={`clock${now?.frozen ? ' frozen' : ''}`} role="region" aria-label="World clock">
+      <p className="clock-now">
+        {clock.state === 'loading' ? <span className="mode">clock…</span> : clock.state === 'error' ? <span className="mode">Clock: {clock.error}</span> : now!.frozen
+          ? <><span className="badge">Simulation</span> World time <strong><At iso={now!.at} /></strong></>
+          : <>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>
+        <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">
+            <span className="mode">Advance</span>
+            {presets.map(([amount, label]) => <button key={amount} type="button" aria-label={`Advance ${label}`} disabled={busy || !now.frozen} title={now.frozen ? undefined : 'Set the time first: advancing moves a set clock'} onClick={() => advance(amount, label)}>{label}</button>)}
+            <form className="inline" onSubmit={(e) => { e.preventDefault(); if (!/^\d+[smhd]$/.test(by.trim())) { setNote({ ok: false, text: 'Advance by a number and a unit: 90m, 12h, 3d.' }); return; } advance(by.trim(), `by ${by.trim()}`); }}>
+              <label className="sr">Advance by <input name="advanceBy" value={by} onChange={(e) => setBy(e.target.value)} placeholder="90m, 12h, 3d" size={9} disabled={!now.frozen} /></label>
+              <button type="submit" disabled={busy || !now.frozen}>Advance</button>
+            </form>
+          </div>
+          {!now.frozen ? <p className="mode">The World runs on real time. Set a time to start simulating; then advance it.</p> : null}
+          {setting ? (
+            <form className="inline" aria-label="Set the World time" onSubmit={setTime} noValidate>
+              <label>World time <input name="worldTime" type="datetime-local" value={value} min={localInput(nextMinute(now.at))} onChange={(e) => setValue(e.target.value)} required /></label>
+              <span className="mode">{Intl.DateTimeFormat().resolvedOptions().timeZone}</span>
+              <button type="submit" disabled={busy}>Set time</button>
+              <button type="button" onClick={() => setSetting(false)}>Cancel</button>
+            </form>
+          ) : null}
+        </div>
+        </div></details>
+      ) : null}
+      {note ? <p role={note.ok ? 'status' : 'alert'}>{note.text}</p> : null}
     </div>
   );
 }
 
-/** Support access (layer 6): the standing consent, and its revocation. */
-function SupportAccess({ token, org, version }: { token: string; org: string; version: number }): React.JSX.Element | null {
-  const [access, setAccess] = useState<{ until: string } | null | undefined>(undefined); const [note, setNote] = useState<string | null>(null);
-  const load = useCallback(async () => { const r = await door(token, `/-/orgs/${org}/support-access`); setAccess(r.ok ? ((await r.json()) as { supportAccess: { until: string } | null }).supportAccess : null); }, [token, org, version]); // re-read after the Help form grants it
-  useEffect(() => { void load(); }, [load]);
-  if (access === undefined) return null;
+/** "View as of…": a branch of this World at a past instant, opened read only, gone within the hour. */
+function AsOf({ name, token, clock, refused }: { name: string; token: string; clock: Load<Clock>; refused: (r: Response) => void }): React.JSX.Element {
+  const [open, setOpen] = useState(false); const [value, setValue] = useState(''); const [note, setNote] = useState<string | null>(null); const [busy, setBusy] = useState(false);
+  const now = clock.state === 'ok' ? clock.data.at : new Date().toISOString();
+  // closes as a popover does: Esc (focus back on its button) or a click outside it
+  const box = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (!open) return;
+    const esc = (e: KeyboardEvent): void => { if (e.key === 'Escape' && !document.querySelector('dialog[open]')) { setOpen(false); box.current?.querySelector<HTMLButtonElement>('button')?.focus(); } };
+    const outside = (e: MouseEvent): void => { if (!box.current?.contains(e.target as globalThis.Node)) setOpen(false); };
+    document.addEventListener('keydown', esc); document.addEventListener('click', outside);
+    return () => { document.removeEventListener('keydown', esc); document.removeEventListener('click', outside); };
+  }, [open]);
+  const create = async (e: React.FormEvent): Promise<void> => {
+    e.preventDefault(); setNote(null);
+    const at = new Date(value);
+    if (Number.isNaN(at.getTime())) { setNote('Pick a date and time.'); return; }
+    if (at.getTime() > Date.parse(now)) { setNote(`That is after the World's present (${new Date(now).toLocaleString()}); a snapshot looks back.`); return; }
+    setBusy(true);
+    try {
+      const r = await door(token, `/-/${name}/branches`, { method: 'POST', body: JSON.stringify({ at: { instant: at.toISOString() }, ttl: 3600 }) });
+      if (!r.ok) { refused(r); setNote(await failure(r)); return; }
+      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: at.toISOString(), expiresAt: b.expiresAt ?? null, parentOrigin: ORIGIN, made: true });
+      // a branch with an origin of its own is viewed there (this origin serves this World only): the page moves, carrying
+      // the branch's read token and the snapshot in the fragment, and "Return to live" comes back here to remove it
+      const there = httpOrigin(b.origin)?.origin;
+      if (there && there !== ORIGIN) { moveTo(there, b.readToken, b.name, `${BASE}/${b.name}`); return; }
+      go(b.name.split('/'));
+    } catch (e) { setNote(`the World did not answer: ${e instanceof Error ? e.message : String(e)}`); } finally { setBusy(false); }
+  };
   return (
-    <div aria-label="Support access">
-      <h4>Support access</h4>
-      {access ? <p>Volter support may open this org, read only, until {when(access.until)}. Every time they do is in the Activity log with their reason. <button type="button" onClick={() => void door(token, `/-/orgs/${org}/support-access`, { method: 'DELETE' }).then(async (r) => { setNote(r.ok ? 'support access revoked' : `answered ${r.status}`); await load(); })}>Revoke support access</button></p> : <p className="mode">Not allowed. You can allow it for 7 days from the Help form when you write to us.</p>}
-      {note ? <p role="status">{note}</p> : null}
+    <div className="as-of" ref={box}>
+      <button type="button" aria-expanded={open} title="Open a read-only copy of this World as it was at a moment you pick" onClick={() => { setOpen(!open); setValue(localInput(now)); setNote(null); }}>View an earlier moment…</button>
+      {open ? (
+        <form className="inline" aria-label="View the World as of a past moment" onSubmit={create} noValidate>
+          <label>As of <input name="asOf" type="datetime-local" value={value} max={localInput(now)} onChange={(e) => setValue(e.target.value)} required /></label>
+          <button type="submit" disabled={busy}>{busy ? 'Opening…' : 'Open snapshot'}</button>
+          <span className="mode">Opens a read-only copy of this World as it was then; the copy goes away within the hour.</span>
+        </form>
+      ) : null}
+      {note ? <p role="alert">{note}</p> : null}
     </div>
   );
 }
 
-/** Help (layer 6: Supabase's support form — a category, a severity, what it concerns, and the consent switch). */
-function Help({ token, orgs, onChanged }: { token: string; orgs: string[]; onChanged?: () => void }): React.JSX.Element {
-  const [category, setCategory] = useState('worlds'); const [severity, setSeverity] = useState('normal'); const [subject, setSubject] = useState(''); const [message, setMessage] = useState('');
-  const [org, setOrg] = useState(orgs[0] ?? ''); const [world, setWorld] = useState(''); const [allow, setAllow] = useState(false); const [note, setNote] = useState<string | null>(null);
-  useEffect(() => { if (!org && orgs[0]) setOrg(orgs[0]); }, [orgs, org]);
-  const send = async (e: React.FormEvent): Promise<void> => {
-    e.preventDefault(); setNote(null);
-    const r = await door(token, '/-/support', { method: 'POST', body: JSON.stringify({ category, severity, subject, message, ...(org ? { org } : {}), ...(world ? { world } : {}), ...(allow && org ? { allowAccessDays: 7 } : {}) }) });
-    const body = (await r.json().catch(() => ({}))) as { id?: string; error?: string; copyTo?: string | null; access?: { until: string } | null };
-    if (!r.ok || !body.id) { setNote(body.error ?? `answered ${r.status}`); return; }
-    setNote(`Sent — your ticket is ${body.id}${body.copyTo ? `; we emailed a copy to ${body.copyTo}` : ''}. A person answers, usually within a working day.${body.access ? ` Support may open ${org} until ${when(body.access.until)}; revoke it under Org settings.` : ''}`);
-    setSubject(''); setMessage(''); setWorld(''); setAllow(false); onChanged?.();
+/** 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<{ branches: Branch[] }> | 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} />;
+  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: copies of it, each as of a moment (a snapshot "as of" is one, short-lived), openable and removable. */
+function BranchList({ name, canWrite, branches, opens, note, remove }: { name: string; token: string; canWrite: boolean; branches: Load<{ branches: Branch[] }>; opens: (name: string) => boolean; note: string | null; remove: (b: string) => Promise<void> }): React.JSX.Element {
+  // as Neon's Branches page: what a branch is for, then every branch with its parent, the moment it copies and its life
+  const short = (n: string): string => n.split('/').pop() ?? n;
+  const list = branches.state === 'ok' ? branches.data.branches : [];
   return (
-    <section aria-labelledby="help" id="help">
-      <h3 id="help">Help</h3>
-      <p className="mode">Ask a person. Say what you saw and where; the console's address, your org and the world go along with it.</p>
-      <form onSubmit={send}>
-        <label>About <select name="helpCategory" aria-label="About" value={category} onChange={(e) => setCategory(e.target.value)}><option value="worlds">a world or a twin</option><option value="billing">billing</option><option value="account">my account or team</option><option value="security">security</option><option value="other">something else</option></select></label>
-        <label>How urgent <select name="helpSeverity" aria-label="How urgent" value={severity} onChange={(e) => setSeverity(e.target.value)}><option value="low">low — a question</option><option value="normal">normal</option><option value="high">high — something is broken for us</option><option value="urgent">urgent — we cannot work</option></select></label>
-        {orgs.length > 0 ? <label>Org <select name="helpOrg" aria-label="Help org" value={org} onChange={(e) => setOrg(e.target.value)}>{orgs.map((o) => <option key={o} value={o}>{o}</option>)}</select></label> : null}
-        <label>World (optional) <input name="helpWorld" value={world} onChange={(e) => setWorld(e.target.value)} placeholder="acme/team" /></label>
-        <label>Subject <input name="helpSubject" value={subject} onChange={(e) => setSubject(e.target.value)} required /></label>
-        <label>What happened <textarea name="helpMessage" value={message} onChange={(e) => setMessage(e.target.value)} rows={5} required /></label>
-        {org ? <label><input type="checkbox" name="helpAllow" checked={allow} onChange={(e) => setAllow(e.target.checked)} /> Allow Volter support to open this org, read only, for 7 days — so they can see what you see. Admins only; revocable under Org settings.</label> : null}
-        <button type="submit">Send to support</button>
-      </form>
+    <div aria-labelledby="branches">
+      <p className="lede">Branch this World to look at it as it was, or to change it without touching <b>{short(name)}</b>. {canWrite ? '“View an earlier moment…” above makes one as the World was then.' : ''}</p>
       {note ? <p role="status">{note}</p> : null}
-    </section>
+      <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>
+            <tbody>
+              <tr><td><b>{short(name)}</b> <span className="badge">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) => (
+                <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">
+                    {opens(b.name) ? <button type="button" aria-label={`Open ${b.name}`} onClick={() => go(b.name.split('/'))}>Open</button> : <span className="mode" title="Its token was handed to whoever made it">opened by whoever made it</span>}{' '}
+                    {canWrite ? <button type="button" aria-label={`Delete ${b.name}`} onClick={() => void remove(b.name)}>Delete</button> : null}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+          {list.length === 0 ? <p className="mode pad">No branches yet.</p> : null}
+        </div>
+      ) : null}
+    </div>
   );
 }
 
-/** Security (layer 6): the switches the peers share — PostHog's members_can_invite, members_can_use_personal_api_keys; Twenty's approved domains. */
-function SecuritySettings({ token, org, onChanged }: { token: string; org: string; onChanged: () => Promise<void> }): React.JSX.Element {
-  type Sec = { membersCanInvite: boolean; membersCanUsePersonalTokens: boolean; approvedEmailDomains: string[] };
-  const [sec, setSec] = useState<Sec | null>(null); const [domains, setDomains] = useState(''); const [note, setNote] = useState<string | null>(null);
-  const load = useCallback(async () => { const r = await door(token, `/-/orgs/${org}/security`); if (r.ok) { const s = ((await r.json()) as { security: Sec }).security; setSec(s); setDomains(s.approvedEmailDomains.join(', ')); } }, [token, org]);
-  useEffect(() => { void load(); }, [load]);
-  const save = async (e: React.FormEvent): Promise<void> => {
-    e.preventDefault(); if (!sec) return; setNote(null);
-    const r = await door(token, `/-/orgs/${org}/security`, { method: 'PATCH', body: JSON.stringify({ ...sec, approvedEmailDomains: domains.split(',').map((d) => d.trim()).filter(Boolean) }) });
-    const body = (await r.json().catch(() => ({}))) as { error?: string };
-    setNote(r.ok ? 'security settings saved' : body.error ?? `answered ${r.status}`); await load(); if (r.ok) await onChanged();
+/** 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 ? ' · …' : '');
   };
-  if (!sec) return <p className="mode">loading…</p>;
+  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" />;
   return (
-    <form onSubmit={save} aria-label="Security">
-      <h4>Security</h4>
-      <label><input type="checkbox" name="membersCanInvite" checked={sec.membersCanInvite} onChange={(e) => setSec({ ...sec, membersCanInvite: e.target.checked })} /> Members may add and invite members (otherwise admins only)</label>
-      <label><input type="checkbox" name="membersCanUsePersonalTokens" checked={sec.membersCanUsePersonalTokens} onChange={(e) => setSec({ ...sec, membersCanUsePersonalTokens: e.target.checked })} /> Personal access tokens may open this org (otherwise only org tokens and signed-in sessions)</label>
-      <label>Approved email domains for invitations <input name="approvedEmailDomains" value={domains} onChange={(e) => setDomains(e.target.value)} placeholder="acme.test, acme.com — empty means any" /></label>
-      <button type="submit">Save security settings</button>
-      {note ? <p role="status">{note}</p> : null}
-    </form>
+    <>
+      <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>
+      ) : null}
+    </>
   );
 }
 
-/** Org tokens (layer 6): the org's CI credential — admin-made, org-bound, scoped, expiring, shown once (Polar's organization token, Twenty's workspace key). */
-function OrgTokens({ token, org }: { token: string; org: string }): React.JSX.Element {
-  const [list, setList] = useState<Array<{ id: string; name: string; createdAt: string; last4: string; lastUsedAt?: string; expiresAt?: string | null; scopes?: string[] }> | null>(null);
-  const [name, setName] = useState('ci'); const [expiry, setExpiry] = useState<'30' | '90' | 'never'>('90'); const [made, setMade] = useState<string | null>(null); const [note, setNote] = useState<string | null>(null);
-  const [access, setAccess] = useState<'all' | 'read' | 'custom'>('read'); const [custom, setCustom] = useState<Record<string, 'none' | 'read' | 'write'>>({});
-  const load = useCallback(async () => { const r = await door(token, `/-/orgs/${org}/tokens`); setList(r.ok ? ((await r.json()) as { tokens: typeof list }).tokens : []); }, [token, org]);
-  useEffect(() => { void load(); }, [load]);
-  const create = async (e: React.FormEvent): Promise<void> => {
-    e.preventDefault(); setNote(null); setMade(null);
-    const r = await door(token, `/-/orgs/${org}/tokens`, { method: 'POST', body: JSON.stringify({ name, expiresInDays: expiry === 'never' ? null : Number(expiry), scopes: scopesFor(access, custom) }) });
-    const body = (await r.json().catch(() => ({}))) as { token?: string; error?: string };
-    if (!r.ok || !body.token) { setNote(body.error ?? `answered ${r.status}`); return; }
-    setMade(body.token); await load();
+/** 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;
+}
+
+/** 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;
+}
+
+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>
+  );
+}
+
+/** 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 revoke = async (id: string, n: string): Promise<void> => { setNote(null); const r = await door(token, `/-/orgs/${org}/tokens/${id}`, { method: 'DELETE' }); setNote(r.ok ? `org token ${n} revoked` : `answered ${r.status}`); await load(); };
+  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 aria-label="Org tokens">
-      <h4>Org tokens</h4>
-      <p className="mode">A token that acts as the org, not as a person — for CI and scripts: <code>volter login {ORIGIN} --token …</code> then <code>volter remote add origin {org}/&lt;world&gt;</code>. Read only by default.</p>
-      {list === null ? <p className="mode">loading…</p> : list.length === 0 ? <p className="mode">No org tokens yet.</p> : <ul>{list.map((t) => <li key={t.id}>{t.name} <span className="mode">…{t.last4} · made {day(t.createdAt)}{t.lastUsedAt ? ` · last used ${day(t.lastUsedAt)}` : ' · never used'}{t.expiresAt === null ? ' · never expires' : t.expiresAt ? ` · expires ${day(t.expiresAt)}` : ''} · {scopeWords(t.scopes)}</span> <button type="button" aria-label={`Revoke org token: ${t.name}`} onClick={() => void revoke(t.id, t.name)}>Revoke org token</button></li>)}</ul>}
-      <form onSubmit={create}><label>Org token name <input name="orgTokenName" value={name} onChange={(e) => setName(e.target.value)} required /></label><label>Expires <select name="orgTokenExpiry" aria-label="Org token expires" value={expiry} onChange={(e) => setExpiry(e.target.value as '30' | '90' | 'never')}><option value="30">in 30 days</option><option value="90">in 90 days</option><option value="never">never</option></select></label><ScopePicker access={access} setAccess={setAccess} custom={custom} setCustom={setCustom} /><button type="submit">Create org token</button></form>
-      {made ? <p role="status">The org token, shown once — copy it now: <code>{made}</code> <button type="button" onClick={() => { void navigator.clipboard?.writeText(made).then(() => setNote('copied')); }}>Copy</button></p> : null}
-      {note ? <p role="status">{note}</p> : null}
-    </div>
+    <>
+      <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>
+      )}
+    </>
   );
 }
 
-/** You: the personal access tokens that sign the CLI in as you — shown once at creation, revocable. */
-function PersonalTokens({ token, onChanged }: { token: string; onChanged?: () => void }): React.JSX.Element {
-  const [list, setList] = useState<Array<{ id: string; name: string; createdAt: string; last4: string; lastUsedAt?: string; expiresAt?: string | null; scopes?: string[] }> | null>(null);
-  const [name, setName] = useState('cli'); const [expiry, setExpiry] = useState<'30' | '90' | 'never'>('30');
-  const [access, setAccess] = useState<'all' | 'read' | 'custom'>('all'); const [custom, setCustom] = useState<Record<string, 'none' | 'read' | 'write'>>({}); const [made, setMade] = useState<string | null>(null); const [note, setNote] = useState<string | null>(null);
-  const load = useCallback(async () => { const r = await door(token, '/-/tokens'); setList(r.ok ? ((await r.json()) as { tokens: typeof list }).tokens : []); }, [token]);
-  useEffect(() => { void load(); }, [load]);
-  const create = async (e: React.FormEvent): Promise<void> => {
-    e.preventDefault(); setNote(null); setMade(null);
-    const r = await door(token, '/-/tokens', { method: 'POST', body: JSON.stringify({ name, expiresInDays: expiry === 'never' ? null : Number(expiry), scopes: scopesFor(access, custom) }) });
-    const body = (await r.json().catch(() => ({}))) as { token?: string; error?: string };
-    if (!r.ok || !body.token) { setNote(body.error ?? `answered ${r.status}`); return; }
-    setMade(body.token); await load(); onChanged?.();
+/** 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>;
+  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}
+    </>
+  );
+}
+
+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>;
+}
+
+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 };
+function ScreenFrame({ data }: NodeProps<Node<Screen>>): React.JSX.Element {
+  const { world, vendor, active, open } = data;
+  return (
+    <>
+      <NodeToolbar isVisible position={Position.Top} align="start" className="frame-label">
+        <Mark vendor={vendor} /><span>{vendorName(vendor)}</span>
+      </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={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'}>
+          <iframe title={`${vendor} mirror`} src={mirrorUrl(world, vendor)} loading="lazy" style={{ pointerEvents: active ? 'auto' : 'none' }} />
+        </div>
+      </div>
+    </>
+  );
+}
+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 {
+  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 {
+  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 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 } }));
+    // biome-ignore lint/correctness/useExhaustiveDependencies: the frames' names are what change it
+  }, [frames.join(','), name, cols, open]);
+  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]);
+  useEffect(() => { const on = (e: KeyboardEvent): void => { if (e.key === 'Escape') setActive(null); }; document.addEventListener('keydown', on); return () => document.removeEventListener('keydown', on); }, []);
+  const keep = (): void => { try { localStorage.setItem(saved, JSON.stringify(Object.fromEntries(nodes.map((n) => [n.id, n.position])))); } catch { /* a convenience */ } };
+  /** A layer's row: bring that frame to the middle of the window, and use it. */
+  const focus = (v: string): void => {
+    setActive(v);
+    const n = flow.getNode(v); if (!n) return;
+    // the frame in the room the floating panels leave, at the largest zoom that shows it whole
+    const zoom = Math.min((window.innerWidth - 300) / FRAME_W, (window.innerHeight - 120) / FRAME_H, 1);
+    void flow.setCenter(n.position.x + FRAME_W / 2 - 130 / zoom, n.position.y + FRAME_H / 2, { zoom, duration: 400 });
   };
-  const revoke = async (id: string): Promise<void> => { setNote(null); const r = await door(token, `/-/tokens/${id}`, { method: 'DELETE' }); setNote(r.ok ? 'token revoked' : `answered ${r.status}`); await load(); };
+  const dark = typeof window !== 'undefined' && window.matchMedia?.('(prefers-color-scheme: dark)').matches;
+  const ready = session.state === 'ok' && twins.state === 'ok';
   return (
-    <section aria-labelledby="you">
-      <h3 id="you">You</h3>
-      <h4>Personal access tokens</h4>
-      <p>A token signs the <code>volter</code> command in as you: <code>volter login {ORIGIN} --token …</code>, then <code>volter remote add origin org/world</code>.</p>
-      {list === null ? <p className="mode">loading…</p> : list.length === 0 ? <p className="mode">No tokens yet.</p> : <ul>{list.map((t) => <li key={t.id}>{t.name} <span className="mode">…{t.last4} · made {day(t.createdAt)}{t.lastUsedAt ? ` · last used ${day(t.lastUsedAt)}` : ' · never used'}{t.expiresAt === null ? ' · never expires' : t.expiresAt ? (Date.parse(t.expiresAt) <= Date.now() ? ` · expired ${day(t.expiresAt)}` : ` · expires ${day(t.expiresAt)}`) : ''} · {scopeWords(t.scopes)}</span> <button type="button" onClick={() => void revoke(t.id)}>Revoke</button></li>)}</ul>}
-      <form onSubmit={create}><label>Token name <input name="tokenName" value={name} onChange={(e) => setName(e.target.value)} required /></label><label>Expires <select name="tokenExpiry" aria-label="Expires" value={expiry} onChange={(e) => setExpiry(e.target.value as '30' | '90' | 'never')}><option value="30">in 30 days</option><option value="90">in 90 days</option><option value="never">never</option></select></label><ScopePicker access={access} setAccess={setAccess} custom={custom} setCustom={setCustom} /><button type="submit">Create token</button></form>
-      {made ? <p role="status">Your new token, shown once — copy it now: <code>{made}</code> <button type="button" onClick={() => { void navigator.clipboard?.writeText(made).then(() => setNote('copied')); }}>Copy</button></p> : null}
-      {note ? <p role="status">{note}</p> : null}
-    </section>
+    <div className="canvas full" role="region" aria-label="Every vendor's screens">
+      <ReactFlow nodes={ready ? nodes : []} onNodesChange={onNodesChange} nodeTypes={FRAME_TYPES} onNodeDragStop={keep}
+        onNodeClick={(_e, n) => setActive(n.id)} onPaneClick={() => setActive(null)}
+        fitView fitViewOptions={{ padding: { top: '64px', left: '272px', right: '32px', bottom: '32px' } }} minZoom={0.05} maxZoom={1.5} nodesConnectable={false} elementsSelectable={false}
+        panOnScroll={false} zoomOnDoubleClick={false} colorMode={dark ? 'dark' : 'light'} proOptions={{ hideAttribution: true }}>
+        <Background variant={BackgroundVariant.Dots} gap={28} size={1.4} />
+        <Panel position="top-left" className="float layers">
+          <div className="float-head">
+            <button type="button" className="back" onClick={back} aria-label={`Back to ${name}`}>←</button>
+            <span className="float-title"><strong>{name.split('/')[1]}</strong><span className="mode">{name.split('/')[0]}{snapshot ? ' · snapshot' : ''}</span></span>
+            <button type="button" className="ghost" aria-expanded={layers} aria-label={layers ? 'Hide the screens list' : 'Show the screens list'} onClick={() => setLayers(!layers)}>{layers ? '▾' : '▸'}</button>
+          </div>
+          {layers ? (
+            <ul className="layer-list" aria-label="Screens">
+              {frames.map((v) => <li key={v}><button type="button" className={active === v ? 'on' : undefined} onClick={() => focus(v)}><Mark vendor={v} /><span>{vendorName(v)}</span></button></li>)}
+              {twins.state === 'ok' && frames.length === 0 ? <li className="mode">No vendor in this World has screens.</li> : null}
+            </ul>
+          ) : null}
+          <Pending load={twins} what="the vendors" />
+          {session.state === 'pending' ? <p className="mode" role="status">Opening…</p> : null}
+          {session.state === 'error' ? <p role="alert">The World did not open its screens: {session.error} <button type="button" onClick={retry}>Try again</button></p> : null}
+        </Panel>
+        <Panel position="top-center" className="float hint mode">{active ? `Using ${vendorName(active)} · Esc to leave` : 'Drag to pan · scroll to zoom · click a screen to use it'}</Panel>
+        <Controls showInteractive={false} position="bottom-left" />
+        <MiniMap pannable zoomable nodeBorderRadius={8} position="bottom-right" />
+      </ReactFlow>
+    </div>
   );
 }
 
-/** The first run (punchlist 3.5): what a person does next, with the real commands — dismissed once done. */
-function GettingStarted({ token, orgs, worlds, firstWorld, version }: { token: string; orgs: string[]; worlds: number; firstWorld?: string | undefined; version: number }): React.JSX.Element | null {
-  const KEY = 'volter.console.onboarding';
-  const [dismissed, setDismissed] = useState<boolean>(() => { try { return localStorage.getItem(KEY) === 'done'; } catch { return false; } });
-  const [tokensMade, setTokensMade] = useState<boolean | null>(null);
-  useEffect(() => { void door(token, '/-/tokens').then(async (r) => setTokensMade(r.ok ? ((await r.json()) as { tokens: unknown[] }).tokens.length > 0 : false)); }, [token, version]); // re-read after a token is made (walk 3: the step stayed unticked)
-  if (dismissed) return null;
-  const org = orgs[0]; const step = (done: boolean, text: React.ReactNode): React.JSX.Element => <li aria-checked={done} role="checkbox">{done ? '✓' : '○'} {text}</li>;
+/** What this World changed since its base — what a changeset would cut — in a compare view, by twin. */
+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]);
   return (
-    <section aria-labelledby="getting-started" className="onboarding">
-      <h2 id="getting-started">Getting started</h2>
-      <ol>
-        {step(orgs.length > 0, "Create an org — the unit that holds worlds, members and a plan.")}
-        {step(worlds > 0, "Provision a world into it with the twins your app needs.")}
-        {step(tokensMade === true, <>Make a personal access token (under You), then sign the CLI in: <code>volter login {ORIGIN} --token …</code></>)}
-        {step(false, <>From your terminal, not this page: point your app's world at it — <code>volter remote add origin {firstWorld ?? `${org ?? '<org>'}/<world>`}</code>, then <code>volter world push</code>; its first write shows in the world's log.</>)}
-      </ol>
-      <button type="button" onClick={() => { try { localStorage.setItem(KEY, 'done'); } catch { /* no storage */ } setDismissed(true); }}>Dismiss</button>
-    </section>
+    <>
+      <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> : byTwin.map(([t, entries]) => (
+            <div key={t} className="compare" role="group" aria-labelledby={`changes-${t}`}>
+              <h3 id={`changes-${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>
+          ))}
+        </>
+      ) : null}
+    </>
   );
 }
 
-type AuditRow = { at: string; event: string; actor: { id?: string; email?: string; operator?: boolean; platform?: boolean }; target?: string };
-/** What happened in the org (punchlist 4.1): the audit log, newest first, for admins; exported as the file it is kept as. */
-function Activity({ token, org, version }: { token: string; org: string; version: number }): React.JSX.Element {
-  const [rows, setRows] = useState<AuditRow[] | null>(null);
-  useEffect(() => { void door(token, `/-/orgs/${org}/audit`).then(async (r) => setRows(r.ok ? ((await r.json()) as { entries: AuditRow[] }).entries : [])); }, [token, org, version]); // re-read after every act on the page (walk 3d: rows only appeared on reload)
-  const who = (a: AuditRow['actor']): string => a.platform ? 'the platform' : a.operator ? 'the operator' : a.email ?? a.id ?? '?';
+/** 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 };
+  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);
+  const [made, setMade] = useState<{ key: string; name: string } | null>(null);
+  // a read-only link: a read key carried in the dashboard's address (the fragment, which no server sees); whoever opens
+  // it reads this World and changes nothing, until the key is revoked here
+  const [link, setLink] = useState<string | null>(null);
+  const share = async (): Promise<void> => {
+    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; }
+    setLink(`${window.location.origin}${BASE}/${name}#${new URLSearchParams({ token: b.key }).toString()}`); setVersion((v) => v + 1);
+  };
+  const make = async (e: React.FormEvent): Promise<void> => {
+    e.preventDefault(); setBusy(true); setError(null);
+    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; }
+    setMaking(false); setMade({ key: b.key, name: keyName.trim() }); setKeyName(''); setVersion((v) => v + 1);
+  };
+  const revoke = async (k: Key): Promise<void> => {
+    if (!(await confirmAct({ title: `Revoke ${k.name}?`, body: 'Whatever holds it loses this World at once.', action: 'Revoke key', danger: true }))) return;
+    const r = await door(token, `/-/${name}/keys/${k.id}`, { method: 'DELETE' });
+    if (r.ok) toast(`Revoked ${k.name}`); else toast(await failure(r), 'error');
+    setVersion((v) => v + 1);
+  };
   return (
-    <details className="org-settings"><summary>Activity</summary>
-      {rows === null ? <p className="mode">loading…</p> : rows.length === 0 ? <p className="mode">Nothing yet.</p> : (
-        <table><thead><tr><th>when</th><th>what</th><th>who</th><th>target</th></tr></thead>
-          <tbody>{rows.slice(0, 50).map((r, i) => <tr key={`${r.at}-${i}`}><td><code>{r.at.slice(0, 16).replace('T', ' ')}</code></td><td>{r.event.toLowerCase().replace('_', ' ')}</td><td>{who(r.actor)}</td><td>{r.target ?? ''}</td></tr>)}</tbody></table>
-      )}
-      <p><a href={`${ORIGIN}/-/orgs/${org}/audit.jsonl`} download={`${org}-activity.jsonl`}>Download the log</a> (a <code>.jsonl</code> file, one act a line) · <a href={`${ORIGIN}/-/orgs/${org}/export`} download={`${org}-export.json`}>Export the org</a> (a <code>.json</code> file: the record, the worlds, the members, this log — what the platform knows). Your browser saves them.</p>
-    </details>
+    <section aria-labelledby="keys-head" className="keys">
+      <div className="keys-head"><div><h3 id="keys-head">Keys</h3><p className="mode">What an app, a script or a CI job holds to reach this World: each named for what holds it and revoked alone. People open the World as themselves; keys are for software.</p></div>{/* opened from a platform, keys are made there (a session here makes none): its Worlds page has "Make a key…" */}
+        {portal() ? <a className="button primary" href={`${portal()}/${encodeURIComponent(name.split('/')[0] ?? '')}`}>Make a key on the platform</a> : <div className="head-actions"><button type="button" onClick={() => void share()}>Share a read-only link</button><button type="button" className="primary" onClick={() => { setError(null); setMaking(true); }}>Make a key</button></div>}</div>
+      <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>
+          <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>
+          ))}</tbody>
+        </table>
+      )) : null}
+      <Dialog open={making} onClose={() => { if (!busy) setMaking(false); }} title="Make a key" footer={<><button type="button" onClick={() => setMaking(false)} disabled={busy}>Cancel</button><button type="submit" form="make-key" disabled={busy || !keyName.trim()}>{busy ? 'Making…' : 'Make key'}</button></>}>
+        <form id="make-key" onSubmit={make} aria-label="Make a key">
+          <label>Name <input autoFocus name="keyName" value={keyName} onChange={(e) => setKeyName(e.target.value)} placeholder="ci, staging app…" maxLength={80} required /></label>
+          <label>Access <select value={scope} onChange={(e) => setScope(e.target.value === 'read' ? 'read' : 'write')}><option value="write">Read and write</option><option value="read">Read only</option></select></label>
+          {error ? <p role="alert">{error}</p> : null}
+        </form>
+      </Dialog>
+      <Dialog open={Boolean(made)} onClose={() => setMade(null)} title={`${made?.name ?? 'The key'} is ready`} footer={<button type="button" className="primary" onClick={() => setMade(null)}>Done</button>}>
+        <p className="mode">Copy it now: it is shown this once. Put it where the app reads its secrets.</p>
+        {made ? <CopyField label="Key" value={made.key} secret /> : null}
+      </Dialog>
+      <Dialog open={Boolean(link)} onClose={() => setLink(null)} title="A read-only link" footer={<button type="button" className="primary" onClick={() => setLink(null)}>Done</button>}>
+        <p className="mode">Whoever opens it sees this World's pages and changes nothing. Copy it now: it is shown this once. It is listed under Keys, where revoking it closes the link at once.</p>
+        {link ? <CopyField label="Link" value={link} secret /> : null}
+      </Dialog>
+    </section>
   );
 }
 
-function WorldView({ name, token, twin, admin, onRemoved }: { name: string; token: string; twin?: string; admin: string | null; onRemoved: () => void }): React.JSX.Element {
+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);
@@ -658,85 +1400,89 @@ function WorldView({ name, token, twin, admin, onRemoved }: { name: string; toke
   const act = async (label: string, path: string, init: RequestInit): Promise<void> => {
     setNote(null);
     const r = await door(token, path, init);
-    const body = (await r.json().catch(() => ({}))) as { error?: string };
-    setNote(r.ok ? `${label}: done` : `${label}: ${body.error ?? `answered ${r.status}`}`);
+    if (!r.ok) refused(r);
+    setNote(r.ok ? `${label}: done` : `${label}: ${await failure(r)}`);
     await refresh();
   };
   const rotate = async (): Promise<void> => {
-    if (!window.confirm(`Rotate the tokens of ${name}? Every holder of the current ones loses access.`)) return;
+    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}`);
   };
   const remove = async (): Promise<void> => {
-    if (!window.confirm(`Remove ${name} and its whole tree from this host?`)) return;
-    const r = await door(admin!, `/-/worlds/${name}`, { method: 'DELETE' });
+    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 (twin) return <TwinView name={name} token={token} twin={twin} />;
   return (
-    <section aria-labelledby="world">
-      <h2 id="world">{name}</h2>
-      <p><code>{WORLDS}/{name}</code> — point an app's SDK at <code>{WORLDS}/{name}/&lt;twin&gt;</code></p>
+    <>
       {note ? <p role="status">{note}</p> : null}
       {tokens ? <p role="status">token <code>{tokens.token}</code> · read token <code>{tokens.readToken}</code></p> : null}
-      <h3>Twins</h3>
+      {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>
-          <thead><tr><th>twin</th><th>protocol</th><th>root</th><th>credential</th><th>last refresh</th><th>position</th><th>last receipt</th><th>actions</th></tr></thead>
+        <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}`} onClick={(e) => { e.preventDefault(); go([...name.split('/'), t.twin]); }}>{t.twin}</a></td>
-                <td>{t.protocol?.major !== undefined ? `protocol ${t.protocol.major}${t.protocol.standing && t.protocol.standing !== 'current' ? ` (${t.protocol.standing})` : ''}` : '—'}</td>
-                <td>{t.root?.url ? <code>{t.root.url}</code> : 'simulated'}</td>
-                <td>{t.credential ? `sealed ${t.credential.fingerprint ?? ''} · ${when(t.credential.placedAt)}` : 'none'}</td>
-                <td>{t.refresh?.failed ? <span role="alert">failed ×{t.refresh.failed.count ?? 1}: {t.refresh.failed.reason ?? ''}</span> : when(t.refresh?.observedAt ?? t.refresh?.at)}</td>
-                <td>{t.position ?? 0}</td>
-                <td>{t.lastReceipt ? `${t.lastReceipt.status ?? ''} ${t.lastReceipt.externalId ?? ''} ${t.lastReceipt.reason ?? ''}`.trim() : '—'}</td>
-                <td>
-                  <button onClick={() => { if (window.confirm(`Ask the vendor behind ${t.twin} now?`)) void act(`refresh ${t.twin}`, `/-/${name}/twins/${t.twin}/refresh`, { method: 'POST' }); }} disabled={!t.root}>Refresh</button>{' '}
-                  <button onClick={() => { const url = window.prompt(`The root of ${t.twin}: the vendor's URL (empty clears 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) }); }}>Set root</button>{' '}
-                  <button onClick={() => { const secret = window.prompt(`Seal the real credential of ${t.twin} (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' } }); }}>Seal credential</button>
-                </td>
+                <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>Requests (last 24 hours)</h3>
-      {report === null ? <p className="mode">No request report for this world.</p> : report.requests === 0 ? <p className="mode">No requests in the last 24 hours.</p> : (
+      <h3>Traffic (last 24 hours)</h3>
+      {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 off unless the World runs with <code>VOLTER_TWIN_REQUEST_JOURNAL=1</code>; what the requests changed is always in Activity.</p> : (
         <table aria-label="Requests by twin">
-          <thead><tr><th>twin</th><th>requests</th><th>by status</th><th>p50</th><th>p95</th><th>top routes</th></tr></thead>
+          <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>Changesets</h3>
-      {changesets === null ? <p>Loading…</p> : changesets.length === 0 ? <p>No changeset has landed.</p> : (
+      <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><th>actions</th></tr></thead>
+          <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>
-                <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={() => { if (window.confirm(`Deploy ${c.name} against every twin's root?`)) void act(`deploy ${c.name}`, `/-/${name}/deploy/${encodeURIComponent(c.name)}`, { method: 'POST' }); }}>Deploy</button>
-                </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 ? (
-        <p className="admin">
-          <button onClick={() => void rotate()}>Rotate tokens</button>{' '}
-          <button onClick={() => void remove()}>Remove world</button>
-        </p>
+        <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>
+        </div>
       ) : null}
-    </section>
+    </>
   );
 }
 
@@ -789,7 +1535,7 @@ function TwinView({ name, token, twin }: { name: string; token: string; twin: st
                   <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>{receipt(e)}</td>
+                  <td>{standing(e)}</td>
                 </tr>
               ))}
             </tbody>
@@ -812,4 +1558,5 @@ function TwinView({ name, token, twin }: { name: string; token: string; twin: st
   );
 }
 
-createRoot(ROOT).render(<App />);
+applyTheme(); // the person's theme before the first paint
+createRoot(ROOT).render(<><App /><Toaster /><ConfirmHost /><MenuDismiss /></>);