@volter/world-platform 2.0.0

package/dist/client/platform.tsx

@@ -0,0 +1,1049 @@
+// THE PLATFORM'S PAGES (docs/contributing/architecture.md, "The hosted product"): where people and orgs are — signing
+// in through the platform's access provider, an org's Worlds, members, settings and activity, your own tokens, and a
+// Billing page only when a biller is attached. Laid out as Neon's and Vercel's org consoles are: the org switcher heads
+// the sidebar, the org's pages under it, then yours; the address is the page (`/<org>/settings/tokens`), so any page can
+// be linked. Every read and write is a door of this platform (`/-/…`), with the session cookie as the credential — or,
+// for the operator's consented support view, the support token the page was opened with. A World opens on its own origin
+// with a pass (`/-/worlds/<org>/<world>/open`); nothing here holds a World's key. Results are toasts, acts that cannot be
+// taken back are confirmed in a dialog (the worst by typing the name), and loading is a skeleton. Locators are roles and
+// text.
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { applyTheme, ThemeChoice, ago, At, Brand, closeDrawer, closeMenu, ConfirmHost, MenuDismiss, confirmAct, CopyField, day, Dialog, DrawerButton, Empty, failure, Initial, Mark, Menu, Meter, Pending, Skeleton, SubNav, toast, Toaster, useDoor as useKitDoor, vendorName, when, type Load } from '@volter/world-console/kit';
+import { RESERVED_ORG_NAMES } from './reserved.ts';
+import { agentPrompt } from '../../../packages/cli/src/agent-prompt.ts';
+
+const ROOT = document.getElementById('root')!;
+const ORIGIN = window.location.origin;
+// the operator's consented support view: the shell carries its token once (`/?support=tok_su_…`); the tab keeps it, so a
+// reload stays in the view, and the address drops it
+const SUPPORT_KEY = 'volter.platform.support';
+const SUPPORT = ((): string => { const t = ROOT.dataset.token ?? ''; try { if (t) sessionStorage.setItem(SUPPORT_KEY, t); return t || (sessionStorage.getItem(SUPPORT_KEY) ?? ''); } catch { return t; } })();
+if (new URLSearchParams(window.location.search).has('support')) { try { window.history.replaceState(null, '', window.location.pathname); } catch { /* fine */ } }
+/** The catalog's vendors, most used first, as the shell was handed them (pages.ts): what a World can stand in for. */
+const CATALOG: Array<{ vendor: string; supported: boolean }> = (ROOT.dataset.vendors ?? '').split(',').filter(Boolean).map((v) => { const [vendor, s] = v.split(':'); return { vendor: vendor!, supported: s === 's' }; });
+
+async function door(path: string, init: RequestInit = {}): Promise<Response> {
+  const typed = (init.headers as Record<string, string> | undefined)?.['content-type'];
+  return fetch(`${ORIGIN}${path}`, { ...init, credentials: 'same-origin', headers: { ...(init.headers ?? {}), ...(SUPPORT ? { 'x-volter-token': SUPPORT } : {}), ...(init.body && !typed ? { 'content-type': 'application/json' } : {}) } });
+}
+function useDoor<T>(path: string | null, version = 0): Load<T> { return useKitDoor<T>(door, path, version); }
+/** Sign out: a POST from this page (the platform refuses a GET), then the front page says so. */
+async function signOutNow(): Promise<void> { await door('/-/sign-out', { method: 'POST', redirect: 'manual' }).catch(() => null); window.location.assign('/?signed-out=1'); }
+/** A write through a door: its result said as a toast (the door's own words when it refused); the answer, or null. */
+async function act<T = Record<string, unknown>>(path: string, init: RequestInit, done?: string): Promise<T | null> {
+  const r = await door(path, init).catch(() => null);
+  if (!r) { toast(`${ORIGIN} did not answer`, 'error'); return null; }
+  if (!r.ok) { toast(await failure(r), 'error'); return null; }
+  const body = (await r.json().catch(() => ({}))) as T;
+  if (done) toast(done);
+  return body;
+}
+
+/** Where you are: a page of yours (`account`, `help`, `new`), or an org and one of its pages (settings has sub-pages). */
+const ORG_PAGES = [['worlds', 'Worlds'], ['members', 'Members'], ['billing', 'Billing'], ['activity', 'Activity'], ['settings', 'Settings']] as const;
+type OrgPage = (typeof ORG_PAGES)[number][0];
+const SETTINGS = [['general', 'General'], ['security', 'Security'], ['tokens', 'Org tokens'], ['webhooks', 'Webhooks'], ['labs', 'Labs'], ['support', 'Support access']] as const;
+type SettingsPage = (typeof SETTINGS)[number][0];
+type Place = { kind: 'home' } | { kind: 'you'; page: 'account' | 'help' | 'new' } | { kind: 'org'; org: string; page: OrgPage; sub?: SettingsPage };
+const YOU_TITLES = { account: 'Account', help: 'Help', new: 'Create an org' } as const;
+function place(): Place {
+  const parts = window.location.pathname.split('/').filter(Boolean).map((p) => { try { return decodeURIComponent(p); } catch { return ''; } });
+  const [first, second, third] = parts;
+  if (!first) return { kind: 'home' };
+  if (first === 'account' || first === 'help' || first === 'new') return { kind: 'you', page: first };
+  const page = ORG_PAGES.find(([k]) => k === second)?.[0] ?? 'worlds';
+  const sub = page === 'settings' ? SETTINGS.find(([k]) => k === third)?.[0] ?? 'general' : undefined;
+  return { kind: 'org', org: first, page, ...(sub ? { sub } : {}) };
+}
+const pathOf = (p: Place): string => (p.kind === 'home' ? '/' : p.kind === 'you' ? `/${p.page}` : `/${encodeURIComponent(p.org)}${p.page === 'worlds' ? '' : `/${p.page}`}${p.page === 'settings' && p.sub && p.sub !== 'general' ? `/${p.sub}` : ''}`);
+function go(p: Place, replace = false): void {
+  if (replace) window.history.replaceState(null, '', pathOf(p)); else window.history.pushState(null, '', pathOf(p));
+  window.dispatchEvent(new PopStateEvent('popstate')); window.scrollTo(0, 0);
+}
+/** A link inside the app: the address changes, the page does not reload; a pick in the phone's drawer closes it. */
+function Go({ to, children, className, current }: { to: Place; children: React.ReactNode; className?: string; current?: boolean }): React.JSX.Element {
+  return <a href={pathOf(to)} className={className} aria-current={current ? 'page' : undefined} onClick={(e) => { if (e.metaKey || e.ctrlKey || e.shiftKey) return; e.preventDefault(); closeMenu(e); closeDrawer(); go(to); }}>{children}</a>;
+}
+const linkTo = (to: Place) => (e: React.MouseEvent<HTMLAnchorElement>): void => { if (e.metaKey || e.ctrlKey || e.shiftKey) return; e.preventDefault(); go(to); };
+
+/** What this platform says of itself (`GET /-/platform`): its provider, and whether billing and the Help form are here. */
+type PlatformInfo = { name: string; provider: { kind: 'volter' | 'oidc' | 'github'; name: string; account?: string }; billing: boolean; support: boolean; site?: string };
+type Person = { id: string; email?: string; name?: string; support?: { until: string; reason: string } };
+type OrgWorld = { name: string; host: string; base: string; provisionedAt: string };
+type OrgRow = { id: string; slug: string | null; name: string; role: string; held?: string | null; flags?: Record<string, boolean>; worlds?: OrgWorld[]; security?: { membersCanInvite: boolean } };
+type WorldRow = { org: string; world: string; name: string; base: string; origin?: string; twins: Array<{ vendor: string }> };
+const slugOf = (o: OrgRow): string => o.slug ?? o.id;
+const isAdmin = (o: OrgRow): boolean => o.role === 'admin' || o.role === 'org:admin';
+const NAME = /^[a-z0-9][a-z0-9-]{0,38}$/;
+
+function App(): React.JSX.Element {
+  const [at, setAt] = useState<Place>(place());
+  useEffect(() => { const on = (): void => setAt(place()); window.addEventListener('popstate', on); return () => window.removeEventListener('popstate', on); }, []);
+  const info = useDoor<PlatformInfo>('/-/platform');
+  const [version, setVersion] = useState(0);
+  const bump = useCallback(() => setVersion((v) => v + 1), []);
+  // who you are and your orgs: a 401 is signed out (the sign-in card), anything else refused is said with a retry
+  const [me, setMe] = useState<{ state: 'loading' } | { state: 'out' } | { state: 'error'; error: string } | { state: 'in'; person: Person; orgs: OrgRow[] }>({ state: 'loading' });
+  const loadMe = useCallback(async () => {
+    const r = await door('/-/orgs').catch(() => null);
+    if (!r) { setMe({ state: 'error', error: `${ORIGIN} did not answer` }); return; }
+    // a support session that has ended is dropped from the tab, and the tab signs in as itself again
+    // (reloaded only once the token is gone: a tab whose storage refuses the removal is signed out here, not looped)
+    if (r.status === 401 && SUPPORT) { let cleared = false; try { sessionStorage.removeItem(SUPPORT_KEY); cleared = sessionStorage.getItem(SUPPORT_KEY) === null; } catch { /* storage refused */ } if (cleared) { window.location.assign('/'); return; } setMe({ state: 'out' }); return; }
+    if (r.status === 401) { setMe({ state: 'out' }); return; }
+    if (!r.ok) { setMe({ state: 'error', error: r.status === 429 ? 'You are asking faster than the platform allows. Wait a moment and try again.' : await failure(r) }); return; }
+    const b = (await r.json()) as { person: Person; orgs: OrgRow[] };
+    setMe({ state: 'in', person: b.person, orgs: b.orgs });
+  }, []);
+  useEffect(() => { void loadMe(); }, [loadMe, version]);
+  const worlds = useDoor<{ worlds: WorldRow[] }>(me.state === 'in' ? '/-/worlds' : null, version);
+  useEffect(() => { document.body.className = me.state === 'out' ? 'portal' : ''; }, [me.state]);
+  const [palette, setPalette] = useState(false);
+  useEffect(() => {
+    const on = (e: KeyboardEvent): void => {
+      const typing = e.target instanceof HTMLElement && (e.target.closest('input, textarea, select, [contenteditable]') !== null);
+      if ((e.key === 'k' && (e.metaKey || e.ctrlKey)) || (e.key === '/' && !typing)) { e.preventDefault(); setPalette(true); }
+    };
+    window.addEventListener('keydown', on); return () => window.removeEventListener('keydown', on);
+  }, []);
+  // the page's title says where you are, as the tab strip shows it
+  useEffect(() => { document.title = at.kind === 'org' ? `${ORG_PAGES.find(([k]) => k === at.page)?.[1] ?? ''} · ${at.org} · Volter World` : at.kind === 'you' ? `${YOU_TITLES[at.page]} · Volter World` : 'Volter World'; }, [at]);
+
+  const p = info.state === 'ok' ? info.data : null;
+  if (me.state === 'loading' || info.state === 'loading') return <Booting />;
+  if (me.state === 'out') return <SignIn info={p} />;
+  if (me.state === 'error') return <main className="boot"><Brand href="/" /><div role="alert" className="error-state"><span>{me.error}</span><button type="button" onClick={() => void loadMe()}>Try again</button></div><button type="button" onClick={() => void signOutNow()}>Sign in again</button></main>;
+  const { person, orgs } = me;
+  const current = at.kind === 'org' ? orgs.find((o) => o.slug === at.org || o.id === at.org) ?? null : null;
+  // home is your first org, or making one; an org named by its id (a mail's link) is shown by its slug
+  if (at.kind === 'home') { const first = orgs[0]; go(first ? { kind: 'org', org: slugOf(first), page: 'worlds' } : { kind: 'you', page: 'new' }, true); return <Booting />; }
+  if (at.kind === 'org' && current && at.org !== slugOf(current)) { go({ ...at, org: slugOf(current) }, true); return <Booting />; }
+  // the org the sidebar shows: the one you are in, else your first
+  const shown = current ?? (at.kind === 'you' ? orgs[0] ?? null : null);
+  const admin = shown ? isAdmin(shown) : false;
+  const rows = worlds.state === 'ok' && shown ? worlds.data.worlds.filter((w) => w.name.startsWith(`${slugOf(shown)}/`)) : [];
+  const title = at.kind === 'you' ? YOU_TITLES[at.page] : at.kind === 'org' ? ORG_PAGES.find(([k]) => k === at.page)![1] : '';
+  const orgPage = (page: OrgPage): Place => ({ kind: 'org', org: shown ? slugOf(shown) : '', page });
+  const on = (page: OrgPage): boolean => at.kind === 'org' && at.page === page;
+  const signOut = (): void => { try { sessionStorage.removeItem(SUPPORT_KEY); } catch { /* fine */ } if (SUPPORT) window.location.assign('/'); else void signOutNow(); };
+  const pages = ORG_PAGES.filter(([k]) => (k !== 'billing' || p?.billing) && (k !== 'activity' || admin));
+  return (
+    <main className="app">
+      {person.support ? <p role="alert" className="banner">Viewing as support: read only, until {when(person.support.until)}. Reason on record: {person.support.reason}.</p> : null}
+      <header>
+        <DrawerButton />
+        <Brand href="/" onClick={(e) => { e.preventDefault(); go({ kind: 'home' }); }} />
+        <nav aria-label="breadcrumb" className="crumbs">
+          {shown && at.kind === 'org' ? <><span className="crumb-sep" aria-hidden="true">/</span><Go to={orgPage('worlds')} className="crumb-world">{shown.name}</Go>{at.page !== 'worlds' ? <><span className="crumb-sep" aria-hidden="true">/</span><span>{title}</span></> : null}</> : <><span className="crumb-sep" aria-hidden="true">/</span><span>{title}</span></>}
+        </nav>
+        <button type="button" className="search-button" onClick={() => setPalette(true)} aria-label="Search: jump to an org, a page or a World"><span>Search…</span><kbd>{MOD_K}</kbd></button>
+        {p?.site ? <a href={`${p.site}/docs/`} className="head-link">Docs</a> : null}
+        <details className="menu avatar-menu">
+          <summary role="button" aria-haspopup="menu" aria-label={`You: ${person.email ?? person.name ?? person.id}`}><Initial of={person.name ?? person.email ?? '?'} small /></summary>
+          <div className="popover menu-list" role="menu">
+            <div className="menu-who"><strong>{person.name ?? person.email ?? person.id}</strong>{person.name && person.email ? <span className="mode">{person.email}</span> : null}</div>
+            <Go to={{ kind: 'you', page: 'account' }}>Account and tokens</Go>
+            {p?.support ? <Go to={{ kind: 'you', page: 'help' }}>Help</Go> : null}
+            {p?.site ? <a role="menuitem" href={`${p.site}/docs/`}>Docs</a> : null}
+            <div className="menu-theme"><span className="mode">Theme</span><ThemeChoice /></div>
+            <button type="button" role="menuitem" onClick={signOut}>Sign out</button>
+          </div>
+        </details>
+      </header>
+      <div className="shell">
+        <aside className="side">
+          <nav aria-label="Your orgs and pages" className="side-nav">
+            <OrgSwitcher orgs={orgs} shown={shown} />
+            {shown ? <>
+              <p className="side-group">Org</p>
+              {pages.map(([k, label]) => <Go key={k} to={orgPage(k)} className={on(k) ? 'on' : undefined} current={on(k)}>{label}</Go>)}
+            </> : null}
+            <p className="side-group">You</p>
+            <Go to={{ kind: 'you', page: 'account' }} className={at.kind === 'you' && at.page === 'account' ? 'on' : undefined} current={at.kind === 'you' && at.page === 'account'}>Account</Go>
+            {p?.support ? <Go to={{ kind: 'you', page: 'help' }} className={at.kind === 'you' && at.page === 'help' ? 'on' : undefined} current={at.kind === 'you' && at.page === 'help'}>Help</Go> : null}
+          </nav>
+        </aside>
+        <div className="content">
+          {at.kind === 'org' && !current ? <Empty title={`You are not a member of ${at.org}`} action={<Go to={{ kind: 'home' }} className="button">Your orgs</Go>}>An org shows here once one of its admins adds you, or you accept an invitation to it.</Empty> : null}
+          {current?.held && at.kind === 'org' && at.page !== 'billing' ? <p role="alert">This org is held: {current.held}.</p> : null}
+          {at.kind === 'org' && current && at.page === 'worlds' ? <WorldsPage org={current} rows={rows} load={worlds} orgs={orgs.map(slugOf)} allRows={worlds.state === 'ok' ? worlds.data.worlds.length : 0} version={version} readOnly={Boolean(person.support) || Boolean(current.held)} onChanged={bump} /> : null}
+          {at.kind === 'org' && current && at.page === 'members' ? <MembersPage org={current} me={person.id} onChanged={bump} /> : null}
+          {at.kind === 'org' && current && at.page === 'billing' ? (p?.billing ? <BillingPage org={slugOf(current)} admin={isAdmin(current)} version={version} flags={current.flags ?? {}} /> : <Empty title="No billing here">This platform does not bill: nothing here is limited or priced.</Empty>) : null}
+          {at.kind === 'org' && current && at.page === 'settings' ? <SettingsPage org={current} sub={at.sub ?? 'general'} info={p} version={version} onChanged={bump} onDeleted={() => { bump(); go({ kind: 'home' }); }} /> : null}
+          {at.kind === 'org' && current && at.page === 'activity' ? (isAdmin(current) ? <ActivityPage org={slugOf(current)} version={version} /> : <Empty title="Activity is for admins">An org's activity log is its admins'.</Empty>) : null}
+          {at.kind === 'you' && at.page === 'account' ? <AccountPage person={person} info={p} onSignOut={signOut} /> : null}
+          {at.kind === 'you' && at.page === 'help' ? (p?.support ? <HelpPage orgs={orgs.map(slugOf)} onChanged={bump} /> : <Empty title="No Help form here">This platform has no Help form: ask whoever runs it.</Empty>) : null}
+          {at.kind === 'you' && at.page === 'new' ? <CreateOrg first={orgs.length === 0} site={p?.site} onMade={async (slug) => { await loadMe(); bump(); go({ kind: 'org', org: slug, page: 'worlds' }); }} /> : null}
+        </div>
+      </div>
+      <Palette open={palette} onClose={() => setPalette(false)} orgs={orgs} shown={shown} worlds={worlds.state === 'ok' ? worlds.data.worlds : []} pages={pages} support={Boolean(p?.support)} />
+    </main>
+  );
+}
+
+/** The app's own first paint: the shell's shape while who-you-are is asked. */
+function Booting(): React.JSX.Element {
+  return <main className="app booting" aria-busy="true"><header><Brand href="/" /></header><div className="shell"><aside className="side"><Skeleton lines={6} label="Opening…" /></aside><div className="content"><Skeleton lines={4} label="Opening…" /></div></div></main>;
+}
+
+/** The org switcher: the orgs you are in, searchable once there are several, and a new one. */
+function OrgSwitcher({ orgs, shown }: { orgs: OrgRow[]; shown: OrgRow | null }): React.JSX.Element {
+  const [q, setQ] = useState('');
+  const list = orgs.filter((o) => `${o.name} ${o.slug ?? ''}`.toLowerCase().includes(q.trim().toLowerCase()));
+  return (
+    <details className="menu branch-picker top-picker">
+      <summary><Initial of={shown?.name ?? '+'} small /><span className="branch-name">{shown ? shown.name : 'No org yet'}</span>{shown ? <span className="badge">{isAdmin(shown) ? 'admin' : 'member'}</span> : null}</summary>
+      <div className="popover">
+        {orgs.length > 4 ? <input type="search" aria-label="Find an org" placeholder="Find an org…" value={q} onChange={(e) => setQ(e.target.value)} /> : <p className="mode">Your orgs</p>}
+        <ul className="branch-list">
+          {list.map((o) => <li key={o.id}><Go to={{ kind: 'org', org: slugOf(o), page: 'worlds' }} current={shown?.id === o.id}><span className="vendor-cell"><Initial of={o.name} small />{o.name}</span><span className="mode">{isAdmin(o) ? 'admin' : 'member'}</span></Go></li>)}
+          {list.length === 0 ? <li className="mode">No org matches.</li> : null}
+        </ul>
+        <Go to={{ kind: 'you', page: 'new' }} className="button">+ Create an org</Go>
+      </div>
+    </details>
+  );
+}
+
+/** The search shortcut as this machine's keyboard writes it: ⌘K on a Mac, Ctrl K elsewhere (either key opens it). */
+const MOD_K = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent) ? '⌘K' : 'Ctrl K';
+/** ⌘K: jump anywhere by typing — an org, one of its pages, a World (opened as yourself), your account. */
+function Palette({ open, onClose, orgs, shown, worlds, pages, support }: { open: boolean; onClose: () => void; orgs: OrgRow[]; shown: OrgRow | null; worlds: WorldRow[]; pages: ReadonlyArray<readonly [OrgPage, string]>; support: boolean }): React.JSX.Element {
+  const [q, setQ] = useState(''); const [i, setI] = useState(0);
+  useEffect(() => { if (open) { setQ(''); setI(0); } }, [open]);
+  type Item = { label: string; hint: string; run: () => void };
+  const items: Item[] = useMemo(() => {
+    const all: Item[] = [];
+    if (shown) for (const [k, label] of pages) all.push({ label, hint: shown.name, run: () => go({ kind: 'org', org: slugOf(shown), page: k }) });
+    for (const w of worlds) all.push({ label: `Open ${w.name}`, hint: 'World', run: () => { window.location.assign(`/-/worlds/${w.name}/open`); } });
+    for (const o of orgs) if (o.id !== shown?.id) all.push({ label: `Switch to ${o.name}`, hint: 'org', run: () => go({ kind: 'org', org: slugOf(o), page: 'worlds' }) });
+    all.push({ label: 'Account and tokens', hint: 'you', run: () => go({ kind: 'you', page: 'account' }) });
+    if (support) all.push({ label: 'Help', hint: 'you', run: () => go({ kind: 'you', page: 'help' }) });
+    all.push({ label: 'Create an org', hint: 'new', run: () => go({ kind: 'you', page: 'new' }) });
+    const t = q.trim().toLowerCase();
+    return t ? all.filter((x) => `${x.label} ${x.hint}`.toLowerCase().includes(t)) : all;
+  }, [q, orgs, shown, worlds, pages, support]);
+  const pick = (x: Item | undefined): void => { if (!x) return; onClose(); x.run(); };
+  return (
+    <Dialog open={open} onClose={onClose} title="Jump to">
+      <input autoFocus type="search" aria-label="Jump to" placeholder="An org, a page or a World…" value={q} onChange={(e) => { setQ(e.target.value); setI(0); }} onKeyDown={(e) => { if (e.key === 'ArrowDown') { e.preventDefault(); setI((n) => Math.min(items.length - 1, n + 1)); } if (e.key === 'ArrowUp') { e.preventDefault(); setI((n) => Math.max(0, n - 1)); } if (e.key === 'Enter') { e.preventDefault(); pick(items[i]); } }} />
+      <ul className="palette" role="listbox" aria-label="Places">
+        {items.slice(0, 12).map((x, n) => <li key={`${x.label}-${x.hint}`} role="option" aria-selected={n === i}><button type="button" onMouseEnter={() => setI(n)} onClick={() => pick(x)}><span>{x.label}</span><span className="mode">{x.hint}</span></button></li>)}
+        {items.length === 0 ? <li className="mode">Nothing matches.</li> : null}
+      </ul>
+    </Dialog>
+  );
+}
+
+/** Signed out: one card, one way in — the platform's provider. The pitch is the site's, not this page's. */
+function SignIn({ info }: { info: PlatformInfo | null }): React.JSX.Element {
+  const next = `${window.location.pathname}${window.location.search}`;
+  const signedOut = new URLSearchParams(window.location.search).has('signed-out');
+  const provider = info?.provider.name ?? 'your account';
+  return (
+    <div className="card" role="main">
+      <div className="brand"><Brand href="/" /></div>
+      <h2>Sign in to Volter World</h2>
+      {signedOut ? <p role="status">You are signed out.</p> : <p>Your orgs, their Worlds and your teammates.</p>}
+      <a className="button primary wide" href={`/-/sign-in${next !== '/' && !signedOut ? `?next=${encodeURIComponent(next)}` : ''}`}>Continue with {provider}</a>
+      {info?.provider.kind === 'volter' ? <p className="small">New to Volter? You make your account on the way, with GitHub, Google or your email.</p> : null}
+      {info?.site ? <p className="links"><a href={`${info.site}/`}>Volter World</a><a href={`${info.site}/docs/`}>Docs</a><a href={`${info.site}/terms.html`}>Terms</a><a href={`${info.site}/privacy.html`}>Privacy</a></p> : null}
+    </div>
+  );
+}
+
+/** A page's head: its title, what it holds, and its actions on the right. */
+function Head({ title, count, children, lede }: { title: string; count?: number; children?: React.ReactNode; lede?: React.ReactNode }): React.JSX.Element {
+  return (
+    <div className="page-head">
+      <div className="content-head"><h2 id="page">{title}{count !== undefined ? <span className="count">{count}</span> : null}</h2>{children ? <div className="head-actions">{children}</div> : null}</div>
+      {lede ? <p className="lede">{lede}</p> : null}
+    </div>
+  );
+}
+
+// ── Worlds ───────────────────────────────────────────────────────────────────────────────────────────────────────────
+/** An org's Worlds, as Neon lists projects: each opens as yourself on its own page; a new one from the head's button. */
+function WorldsPage({ org, rows, load, orgs, allRows, version, readOnly, onChanged }: { org: OrgRow; rows: WorldRow[]; load: Load<unknown>; orgs: string[]; allRows: number; version: number; readOnly: boolean; onChanged: () => void }): React.JSX.Element {
+  const slug = slugOf(org);
+  const [making, setMaking] = useState(false); const [q, setQ] = useState(''); const [keyFor, setKeyFor] = useState<string | null>(null);
+  // a read-only link: a read key (the platform's key door, 30 days) carried in the World's dashboard address
+  const [link, setLink] = useState<{ world: string; url: string } | null>(null);
+  const shareLink = async (w: WorldRow): Promise<void> => {
+    const label = `Read-only link · ${new Date().toLocaleDateString(undefined, { month: 'short', day: 'numeric' })}`;
+    const made = await act<{ key: string }>(`/-/worlds/${w.name}/keys`, { method: 'POST', body: JSON.stringify({ name: label, scope: 'read', expiresInDays: 30 }) });
+    if (!made?.key) return;
+    const at = w.origin ?? new URL(w.base).origin;
+    setLink({ world: w.name, url: `${at}/-/console/${w.name}#${new URLSearchParams({ token: made.key }).toString()}` });
+  };
+  const record = new Map((org.worlds ?? []).map((w) => [w.name, w]));
+  const shown = rows.filter((w) => `${w.name} ${w.twins.map((t) => t.vendor).join(' ')}`.toLowerCase().includes(q.trim().toLowerCase()));
+  const remove = async (name: string): Promise<void> => {
+    const ok = await confirmAct({ title: `Delete ${name}?`, body: <>Its host stops serving it and its whole history goes with it. Apps and keys that use it stop working at once. This cannot be undone.</>, action: 'Delete World', danger: true, typed: name.split('/')[1] ?? name });
+    if (ok && await act(`/-/worlds/${name}`, { method: 'DELETE' }, `Deleted ${name}`)) onChanged();
+  };
+  const make = !readOnly ? <button type="button" className="primary" onClick={() => setMaking(true)}>Create World</button> : null;
+  // an org with no Worlds may take a sample one, made and seeded by the platform (apps/platform/src/sample.ts)
+  const [sampling, setSampling] = useState(false);
+  const trySample = async (): Promise<void> => { setSampling(true); const made = await act<{ name: string }>('/-/worlds/sample', { method: 'POST', body: JSON.stringify({ org: slug }) }); setSampling(false); if (made) { toast(`Made ${made.name}: open it to see Stripe and Slack as an app left them`); onChanged(); } };
+  return (
+    <>
+      <Head title="Worlds" count={load.state === 'ok' ? rows.length : undefined}>{rows.length > 0 ? <input type="search" className="toolbar-search" aria-label="Find a World" placeholder="Find a World…" value={q} onChange={(e) => setQ(e.target.value)} /> : null}{make}</Head>
+      <GettingStarted orgs={orgs} worlds={allRows - rows.filter((r) => r.name.split('/')[1] === 'sample').length} firstWorld={rows.find((r) => r.name.split('/')[1] !== 'sample')?.name} version={version} />
+      {load.state !== 'ok' ? <Pending load={load} what="the org's Worlds" retry={onChanged} /> : rows.length === 0 ? (
+        <Empty title="No Worlds yet" action={<div className="actions-row">{make}{!readOnly ? <button type="button" onClick={() => void trySample()} disabled={sampling}>{sampling ? 'Making the sample…' : 'Try a sample World'}</button> : null}</div>}>A World stands in for the services your app uses: your app talks to it as it would to Stripe or GitHub, nothing real happens, and you see everything it did on each vendor's own screens.{!readOnly ? <span className="mode sample-note">The sample is a small shop's Stripe and Slack, seeded as its app would leave them. It counts as one of the org's Worlds; delete it when you are done.</span> : null}</Empty>
+      ) : (
+        <div className="block">
+          <table className="dense worlds-table" aria-label={`${slug}'s Worlds`}>
+            <thead><tr><th>World</th><th>Stand-ins for</th><th>Host</th><th>Created</th><th className="num"><span className="sr">Actions</span></th></tr></thead>
+            <tbody>{shown.map((w) => { const rec = record.get(w.name); const short = w.name.split('/')[1] ?? w.name; return (<React.Fragment key={w.name}>
+              <tr>
+                <td><span className="vendor-cell"><Initial of={short} small /><span className="who"><a href={`/-/worlds/${w.name}/open`}>{short}</a>{w.origin ? <span className="mode mono">{new URL(w.origin).host}</span> : null}</span></span></td>
+                <td><span className="marks" title={w.twins.map((t) => vendorName(t.vendor)).join(', ')}>{w.twins.slice(0, 5).map((t) => <Mark key={t.vendor} vendor={t.vendor} />)}{w.twins.length > 5 ? <span className="mode">+{w.twins.length - 5}</span> : null}<span className="mode">{w.twins.length === 1 ? vendorName(w.twins[0]!.vendor) : `${w.twins.length} vendors`}</span></span></td>
+                <td className="mode">{rec?.host ?? '—'}</td>
+                <td className="mode">{rec ? <span title={when(rec.provisionedAt)}>{ago(rec.provisionedAt)}</span> : '—'}</td>
+                <td className="num row-actions"><a className="button primary" href={`/-/worlds/${w.name}/open`} aria-label={`Open ${w.name}`}>Open</a>
+                  <Menu label={`More for ${w.name}`} items={[
+                    { label: 'Copy the command to use it', onSelect: () => { void navigator.clipboard?.writeText(`volter remote add origin ${w.name}`).then(() => toast('Copied: volter remote add origin …')); } },
+                    !readOnly ? { label: 'Make a key…', onSelect: () => setKeyFor(w.name) } : null,
+                    !readOnly ? { label: 'Share a read-only link…', onSelect: () => void shareLink(w) } : null,
+                    w.origin ? { label: 'Copy its address', onSelect: () => { void navigator.clipboard?.writeText(w.origin!).then(() => toast('Copied')); } } : null,
+                    !readOnly ? { label: 'Delete World…', danger: true, onSelect: () => void remove(w.name) } : null,
+                  ]} />
+                </td>
+              </tr>
+              <PreviewRows world={w.name} readOnly={readOnly} />
+            </React.Fragment>); })}</tbody>
+          </table>
+          {shown.length === 0 ? <p className="mode table-note">No World matches “{q}”.</p> : null}
+        </div>
+      )}
+      <WorldKey world={keyFor} onClose={() => setKeyFor(null)} />
+      <Dialog open={Boolean(link)} onClose={() => setLink(null)} title={`A read-only link to ${link?.world ?? ''}`} footer={<button type="button" className="primary" onClick={() => setLink(null)}>Done</button>}>
+        <p className="mode">Whoever opens it sees the World's pages and changes nothing, without an account, for 30 days. Copy it now: it is shown this once. The World lists it under Settings › Keys, where revoking it closes the link at once.</p>
+        {link ? <CopyField label="Link" value={link.url} secret /> : null}
+      </Dialog>
+      <CreateWorld open={making} org={slug} taken={rows.map((w) => w.name.split('/')[1] ?? '')} onClose={() => setMaking(false)} onMade={(name) => { setMaking(false); toast(`Created ${name}. Open it when you are ready`); onChanged(); }} />
+    </>
+  );
+}
+
+/** A new World: its name (checked as you type) and the vendors it stands in for, picked from the catalog. */
+function CreateWorld({ open, org, taken, onClose, onMade }: { open: boolean; org: string; taken: string[]; onClose: () => void; onMade: (name: string) => void }): React.JSX.Element {
+  const [name, setName] = useState(''); const [picked, setPicked] = useState<string[]>([]); const [q, setQ] = useState(''); const [busy, setBusy] = useState(false); const [error, setError] = useState<string | null>(null);
+  useEffect(() => { if (open) { setName(''); setPicked([]); setQ(''); setError(null); } }, [open]);
+  const nameIssue = !name ? null : !NAME.test(name) ? 'Lowercase letters, digits and dashes, starting with a letter or digit.' : taken.includes(name) ? `${org} already has a World named ${name}.` : null;
+  // what the host Worlds are made on actually serves; the catalog's marks (supported or preview) where it names them
+  const served = useDoor<{ vendors: string[] }>(open ? '/-/vendors' : null);
+  const marks = new Map(CATALOG.map((c) => [c.vendor, c.supported]));
+  const catalog = served.state === 'ok' ? served.data.vendors.map((vendor) => ({ vendor, supported: marks.get(vendor) ?? true })).sort((a, b) => Number(b.supported) - Number(a.supported) || a.vendor.localeCompare(b.vendor))
+    : CATALOG.length ? CATALOG : ['github', 'stripe', 'slack', 'openai', 'anthropic', 'aws', 'resend', 'twilio', 'linear', 'notion'].map((vendor) => ({ vendor, supported: true }));
+  const term = q.trim().toLowerCase();
+  const matches = catalog.filter((c) => !term || c.vendor.includes(term) || vendorName(c.vendor).toLowerCase().includes(term));
+  const toggle = (v: string): void => setPicked((l) => (l.includes(v) ? l.filter((x) => x !== v) : [...l, v]));
+  const submit = async (e: React.FormEvent): Promise<void> => {
+    e.preventDefault(); if (nameIssue || !name || picked.length === 0) return; setBusy(true); setError(null);
+    const r = await door('/-/worlds', { method: 'POST', body: JSON.stringify({ org, world: name, vendors: picked }) }).catch(() => null);
+    setBusy(false);
+    if (!r) { setError(`${ORIGIN} did not answer`); return; }
+    if (!r.ok) { setError(await failure(r)); return; }
+    onMade(`${org}/${name}`);
+  };
+  return (
+    <Dialog open={open} onClose={() => { if (!busy) onClose(); }} title="Create a World" wide footer={<><button type="button" onClick={onClose} disabled={busy}>Cancel</button><button type="submit" form="create-world" disabled={busy || !name || Boolean(nameIssue) || picked.length === 0}>{busy ? 'Creating… about ten seconds' : 'Create World'}</button></>}>
+      <form id="create-world" onSubmit={submit} className="stack" aria-label="Create a World">
+        <label>Name <input autoFocus name="world" value={name} onChange={(e) => setName(e.target.value.toLowerCase())} placeholder="staging" aria-invalid={Boolean(nameIssue)} aria-describedby="world-name-help" autoComplete="off" spellCheck={false} /></label>
+        <p id="world-name-help" className={nameIssue ? 'field-error' : 'mode'}>{nameIssue ?? <>Its address: <code>{org}/{name || 'staging'}</code></>}</p>
+        <fieldset className="vendor-picker">
+          <legend>Stands in for {picked.length ? <span className="mode">· {picked.length} picked</span> : null}</legend>
+          {picked.length ? <div className="chips">{picked.map((v) => <button key={v} type="button" className="chip" onClick={() => toggle(v)} aria-label={`Remove ${vendorName(v)}`}><Mark vendor={v} />{vendorName(v)} <span aria-hidden="true">✕</span></button>)}</div> : null}
+          <input type="search" aria-label="Find a vendor" placeholder="Find a vendor: Stripe, Slack, GitHub…" value={q} onChange={(e) => setQ(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); const first = matches[0]?.vendor ?? (NAME.test(term) ? term : ''); if (first) { toggle(first); setQ(''); } } }} />
+          <div className="vendor-grid" role="group" aria-label="Vendors">
+            {matches.slice(0, 48).map((c) => <button key={c.vendor} type="button" className="vendor-option" aria-pressed={picked.includes(c.vendor)} onClick={() => toggle(c.vendor)}><Mark vendor={c.vendor} /><span className="vendor-label">{vendorName(c.vendor)}</span>{!c.supported ? <span className="mode">preview</span> : null}</button>)}
+          </div>
+          {matches.length === 0 ? <p className="mode">No twin named “{q}” in the catalog.</p> : matches.length > 48 ? <p className="mode">{matches.length - 48} more: type to narrow.</p> : null}
+        </fieldset>
+        {error ? <p role="alert">{error}</p> : null}
+      </form>
+    </Dialog>
+  );
+}
+
+// ── Members ──────────────────────────────────────────────────────────────────────────────────────────────────────────
+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 people, as GitHub's and Vercel's team pages list them: who, their role (an admin changes it in place), the
+ *  pending invitations with their expiry, and invitations sent from a dialog, several at once, each with a role. */
+function MembersPage({ org, me, onChanged }: { org: OrgRow; me: string; onChanged: () => void }): React.JSX.Element {
+  const slug = slugOf(org); const admin = isAdmin(org); const canInvite = admin || Boolean(org.security?.membersCanInvite);
+  const [version, setVersion] = useState(0); const reload = (): void => { setVersion((v) => v + 1); onChanged(); };
+  const load = useDoor<{ members: MemberRow[]; pending?: PendingRow[] }>(`/-/orgs/${slug}/members`, version);
+  const [inviting, setInviting] = useState(false); const [q, setQ] = useState('');
+  if (load.state !== 'ok') return <><Head title="Members" /><Pending load={load} what="the members" retry={reload} /></>;
+  const { members, pending = [] } = load.data;
+  const admins = members.filter((m) => m.role.endsWith('admin')).length;
+  const shown = members.filter((m) => `${m.name ?? ''} ${m.email ?? ''}`.toLowerCase().includes(q.trim().toLowerCase()));
+  const setRole = async (m: MemberRow, role: 'admin' | 'member'): Promise<void> => { if (await act(`/-/orgs/${slug}/members/${m.userId}`, { method: 'PATCH', body: JSON.stringify({ role }) }, `${m.name ?? m.email ?? 'They'} ${role === 'admin' ? 'is now an admin' : 'is now a member'}`)) reload(); };
+  const remove = async (m: MemberRow): Promise<void> => {
+    const self = m.userId === me; const who = m.name ?? m.email ?? m.userId;
+    const ok = await confirmAct(self ? { title: `Leave ${org.name}?`, body: 'You lose its Worlds at once. An admin can add you again.', action: 'Leave org', danger: true } : { title: `Remove ${who}?`, body: <>They lose {org.name} and every World in it at once. Keys they made in a World stay until revoked there.</>, action: 'Remove member', danger: true });
+    if (ok && await act(`/-/orgs/${slug}/members/${m.userId}`, { method: 'DELETE' }, self ? `You left ${org.name}` : `Removed ${who}`)) { if (self) window.location.assign('/'); else reload(); }
+  };
+  const revoke = async (i: PendingRow): Promise<void> => { if (await act(`/-/orgs/${slug}/invitations/${i.id}`, { method: 'DELETE' }, `Invitation to ${i.email} revoked`)) reload(); };
+  const resend = async (i: PendingRow): Promise<void> => {
+    // a fresh invitation (a new link and a new week) to the same address and role replaces the old one, in one act
+    if (await act(`/-/orgs/${slug}/invitations/${i.id}/resend`, { method: 'POST' }, `Sent ${i.email} a new invitation`)) reload();
+  };
+  return (
+    <>
+      <Head title="Members" count={members.length} lede="People in this org open its Worlds as themselves. Admins manage members, billing and settings.">
+        {members.length > 6 ? <input type="search" className="toolbar-search" aria-label="Find a member" placeholder="Find a member…" value={q} onChange={(e) => setQ(e.target.value)} /> : null}
+        {canInvite ? <button type="button" className="primary" onClick={() => setInviting(true)}>Invite people</button> : null}
+      </Head>
+      <div className="block">
+        <table className="dense" aria-label={`Members of ${slug}`}>
+          <thead><tr><th>Member</th><th>Role</th><th className="num"><span className="sr">Actions</span></th></tr></thead>
+          <tbody>{shown.map((m) => {
+            const who = m.email ?? m.userId; const isAdminRole = m.role.endsWith('admin'); const self = m.userId === me; const lastAdmin = isAdminRole && admins === 1;
+            return (
+              <tr key={m.id}>
+                <td><span className="vendor-cell"><Initial of={m.name ?? who} small /><span className="who"><span>{m.name ?? who}{self ? <span className="badge you">you</span> : null}</span>{m.name ? <span className="mode">{who}</span> : null}</span></span></td>
+                <td>{admin ? <select aria-label={`Role of ${who}`} value={isAdminRole ? 'admin' : 'member'} disabled={lastAdmin} title={lastAdmin ? 'The only admin: make someone else an admin first' : undefined} onChange={(e) => void setRole(m, e.target.value === 'admin' ? 'admin' : 'member')}><option value="admin">Admin</option><option value="member">Member</option></select> : <span className="badge">{isAdminRole ? 'admin' : 'member'}</span>}</td>
+                <td className="num">{admin || self ? <Menu label={`More for ${who}`} items={[
+                  self ? { label: 'Leave org…', danger: true, disabled: lastAdmin, onSelect: () => void remove(m) } : null,
+                  admin && !self ? { label: 'Remove from org…', danger: true, disabled: lastAdmin, onSelect: () => void remove(m) } : null,
+                ]} /> : null}</td>
+              </tr>
+            );
+          })}</tbody>
+        </table>
+        {admins === 1 && admin ? <p className="mode table-note">An org keeps at least one admin: to leave it or step down, make someone else an admin first.</p> : null}
+      </div>
+      {pending.length > 0 ? (
+        <div className="block">
+          <div className="block-head"><h3>Pending invitations <span className="count">{pending.length}</span></h3></div>
+          <table className="dense pending-table" aria-label="Pending invitations">
+            <thead><tr><th>Email</th><th>Role</th><th>Invited</th><th>Expires</th><th className="num"><span className="sr">Actions</span></th></tr></thead>
+            <tbody>{pending.map((i) => { const expired = i.expiresAt ? Date.parse(i.expiresAt) <= Date.now() : false; return (
+              <tr key={i.id}>
+                <td>{i.email}</td>
+                <td><span className="badge">{i.role.endsWith('admin') ? 'admin' : 'member'}</span></td>
+                <td className="mode">{i.createdAt ? <span title={when(i.createdAt)}>{ago(i.createdAt)}</span> : '—'}</td>
+                <td className="mode">{expired ? <span className="badge warn">expired</span> : i.expiresAt ? day(i.expiresAt) : '—'}</td>
+                <td className="num">{admin ? <Menu label={`More for the invitation to ${i.email}`} items={[{ label: 'Resend invitation', onSelect: () => void resend(i) }, { label: 'Revoke invitation', danger: true, onSelect: () => void revoke(i) }]} /> : null}</td>
+              </tr>
+            ); })}</tbody>
+          </table>
+        </div>
+      ) : null}
+      <InviteDialog open={inviting} org={org} onClose={() => setInviting(false)} onSent={() => { setInviting(false); reload(); }} />
+    </>
+  );
+}
+
+/** Invite people: an address and a role per row, more rows for more people, sent together (Vercel's "Add more"). */
+function InviteDialog({ open, org, onClose, onSent }: { open: boolean; org: OrgRow; onClose: () => void; onSent: () => void }): React.JSX.Element {
+  const slug = slugOf(org); const admin = isAdmin(org);
+  const [rows, setRows] = useState<Array<{ email: string; role: 'member' | 'admin' }>>([{ email: '', role: 'member' }]); const [busy, setBusy] = useState(false); const [error, setError] = useState<string | null>(null);
+  useEffect(() => { if (open) { setRows([{ email: '', role: 'member' }]); setError(null); } }, [open]);
+  const valid = rows.filter((r) => r.email.trim()).every((r) => /^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(r.email.trim())) && rows.some((r) => r.email.trim());
+  const send = async (e: React.FormEvent): Promise<void> => {
+    e.preventDefault(); if (!valid) return; setBusy(true); setError(null);
+    const said: string[] = []; const failed: string[] = [];
+    for (const r of rows.filter((x) => x.email.trim())) {
+      const email = r.email.trim();
+      const res = await door(`/-/orgs/${slug}/members`, { method: 'POST', body: JSON.stringify({ email, role: r.role }) }).catch(() => null);
+      if (!res || !res.ok) { failed.push(`${email}: ${res ? await failure(res) : 'no answer'}`); continue; }
+      const body = (await res.json().catch(() => ({}))) as { pending?: boolean };
+      // someone already known is added at once; an admin among them gets the role now (an invitation carries it when the platform keeps it)
+      if (!body.pending && r.role === 'admin') { const list = await door(`/-/orgs/${slug}/members`).then((x) => x.json()).catch(() => ({ members: [] })) as { members: MemberRow[] }; const m = list.members.find((x) => x.email?.toLowerCase() === email.toLowerCase()); if (m) await door(`/-/orgs/${slug}/members/${m.userId}`, { method: 'PATCH', body: JSON.stringify({ role: 'admin' }) }); }
+      said.push(body.pending ? `invited ${email}` : `added ${email}`);
+    }
+    setBusy(false);
+    if (said.length) toast(`${said.join(', ')}. They get an email`.replace(/^./, (c) => c.toUpperCase()));
+    if (failed.length) { setError(failed.join('\n')); return; }
+    onSent();
+  };
+  return (
+    <Dialog open={open} onClose={() => { if (!busy) onClose(); }} title={`Invite people to ${org.name}`} footer={<><button type="button" onClick={onClose} disabled={busy}>Cancel</button><button type="submit" form="invite" disabled={busy || !valid}>{busy ? 'Sending…' : rows.filter((r) => r.email.trim()).length > 1 ? 'Send invitations' : 'Send invitation'}</button></>}>
+      <form id="invite" onSubmit={send} className="stack" aria-label="Invite people">
+        <p className="mode">Someone with an account here joins at once; anyone else gets an email and joins when they sign in with that address. Invitations last a week.</p>
+        {rows.map((r, i) => (
+          <div key={i} className="invite-row">
+            <label className="grow">{i === 0 ? 'Email' : <span className="sr">Email</span>}<input autoFocus={i === 0} type="email" value={r.email} onChange={(e) => setRows(rows.map((x, j) => (j === i ? { ...x, email: e.target.value } : x)))} placeholder="teammate@company.com" /></label>
+            <label>{i === 0 ? 'Role' : <span className="sr">Role</span>}<select value={r.role} disabled={!admin} onChange={(e) => setRows(rows.map((x, j) => (j === i ? { ...x, role: e.target.value === 'admin' ? 'admin' : 'member' } : x)))}><option value="member">Member</option><option value="admin">Admin</option></select></label>
+            {rows.length > 1 ? <button type="button" className="icon-button" aria-label={`Remove row ${i + 1}`} onClick={() => setRows(rows.filter((_, j) => j !== i))}>✕</button> : null}
+          </div>
+        ))}
+        <button type="button" className="link-button" onClick={() => setRows([...rows, { email: '', role: 'member' }])}>+ Add another</button>
+        {error ? <p role="alert" className="pre">{error}</p> : null}
+      </form>
+    </Dialog>
+  );
+}
+
+// ── Billing ──────────────────────────────────────────────────────────────────────────────────────────────────────────
+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[]; trialDays?: number | null };
+type BillingInfo = { plan: { id: string; name: string; priceMonthly: number; limits: PlanCard['limits'] }; plans: PlanCard[]; pendingCheckout: { id: string; url: string } | null; paid: boolean; lastTickAt: string | null; readAt?: string; 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 };
+const money = (cents: number): string => (cents % 100 === 0 ? `$${cents / 100}` : `$${(cents / 100).toFixed(2)}`);
+
+/** The org's plan, its usage against the plan's limits this period, the plans side by side, and the ways to pay and to
+ *  manage payment — the shape Neon's and PostHog's billing pages share. */
+function BillingPage({ org, admin, version, flags }: { org: string; admin: boolean; version: number; flags: Record<string, boolean> }): React.JSX.Element {
+  // back from Polar's checkout (`/<org>/billing?upgraded=1`): the first read is Polar's state now, not the cache
+  const [fresh] = useState(() => new URLSearchParams(window.location.search).has('upgraded'));
+  useEffect(() => { if (fresh) { try { window.history.replaceState(null, '', window.location.pathname); } catch { /* fine */ } } }, [fresh]);
+  const [again, setAgain] = useState(0);
+  const load = useDoor<BillingInfo>(`/-/orgs/${org}/billing${fresh ? '?fresh=1' : ''}`, version + again);
+  const [leaving, setLeaving] = useState(false);
+  if (load.state !== 'ok') return <><Head title="Billing" /><Pending load={load} what="billing" retry={() => setAgain((n) => n + 1)} lines={5} /></>;
+  const info = load.data;
+  // Polar's checkout and portal are pages of their own: the person is taken there, as every peer's billing does
+  const leaveFor = async (path: string): Promise<void> => { setLeaving(true); const b = await act<{ url?: string; pending?: boolean }>(path, { method: 'POST', body: '{}' }); if (b?.url) { if (b.pending) toast('You already have a checkout open: this is the same one'); window.location.assign(b.url); return; } setLeaving(false); };
+  const setCap = async (on: boolean): Promise<void> => { if (await act(`/-/orgs/${org}/billing`, { method: 'PATCH', body: JSON.stringify({ spendCap: on }) }, on ? 'Spend cap on' : 'Spend cap off: hours beyond the plan are billed')) setAgain((n) => n + 1); };
+  const sub = info.subscription; const team = info.plans.find((p) => p.priceMonthly > 0); const trialDays = team?.trialDays ?? null;
+  const status = sub?.status === 'trialing' ? { label: 'Trial', tone: 'info' } : sub?.cancelAtPeriodEnd ? { label: 'Cancels', tone: 'warn' } : sub ? { label: 'Active', tone: 'ok' } : { label: 'Free', tone: '' };
+  // this period: the calendar month in UTC, as the meter counts it; the pace, from what is used so far
+  const now = new Date(); const start = Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), 1); const end = Date.UTC(now.getUTCFullYear(), now.getUTCMonth() + 1, 1);
+  const elapsed = (now.getTime() - start) / (end - start);
+  const hours = info.usage.world_hours ?? 0; const pace = elapsed > 0.04 && hours > 0 ? Math.round(hours / elapsed) : null;
+  const limitH = info.plan.limits.worldHours;
+  const over = pace !== null && limitH !== null && pace > limitH;
+  const others = info.meters.filter((m) => m.name !== 'world_hours');
+  return (
+    <>
+      <Head title="Billing" lede={<>For {org}. Payment, invoices and receipts are handled by Polar{admin ? '' : '; an admin changes the plan'}.</>} />
+      {info.restriction ? <div role="alert" className={`notice ${info.restriction.status === 'restricted' ? 'danger' : 'warn'}`}><strong>{info.restriction.status === 'restricted' ? 'Restricted' : 'Over the plan'}.</strong> {restrictionCopy(info)}</div> : null}
+      {info.paid ? <div role="status" className="notice ok"><strong>Payment received.</strong> Your org is on {info.plan.name}.</div> : null}
+      {info.pendingCheckout ? <div role="status" className="notice info">Your checkout at Polar is still open. <a href={info.pendingCheckout.url}>Continue to checkout</a></div> : null}
+      <div className="billing-grid">
+        <section className="card plan-card" aria-labelledby="plan-now">
+          <p className="eyebrow">Current plan</p>
+          <h3 id="plan-now">{info.plan.name} {status.tone ? <span className={`badge ${status.tone}`}>{status.label}</span> : null}</h3>
+          <p className="price-line"><span className="price">{money(info.plan.priceMonthly)}</span><span className="mode"> / month{info.overageCentsPerHour && info.spendCap === false ? `, plus ${money(info.overageCentsPerHour)} per world-hour beyond the plan` : ''}</span></p>
+          <p className="mode">{sub?.trialEnd && sub.status === 'trialing' ? `Trial ends ${day(sub.trialEnd)}; the card is charged then.` : sub?.cancelAtPeriodEnd && sub.currentPeriodEnd ? `Ends ${day(sub.currentPeriodEnd)}; back to Free after that.` : sub?.currentPeriodEnd ? `Renews ${day(sub.currentPeriodEnd)}.` : 'No card on file.'}</p>
+          {admin ? <div className="card-actions">{info.plan.id === 'free'
+            ? <button type="button" className="primary" disabled={leaving} onClick={() => void leaveFor(`/-/orgs/${org}/checkout`)}>{leaving ? 'Opening Polar…' : trialDays && !sub ? `Start a ${trialDays}-day trial of ${team?.name ?? 'Team'}` : `Upgrade to ${team?.name ?? 'Team'}`}</button>
+            : <button type="button" disabled={leaving} onClick={() => void leaveFor(`/-/orgs/${org}/billing-portal`)}>{leaving ? 'Opening Polar…' : 'Manage billing'}</button>}
+            {info.plan.id !== 'free' ? <span className="mode">Invoices, payment method and cancellation are in Polar's portal.</span> : null}</div> : null}
+        </section>
+        <section className="card" aria-labelledby="usage-now">
+          <p className="eyebrow">This period · {new Date(start).toLocaleDateString(undefined, { month: 'short', day: 'numeric', timeZone: 'UTC' })} to {new Date(end - 1).toLocaleDateString(undefined, { month: 'short', day: 'numeric', timeZone: 'UTC' })}</p>
+          <h3 id="usage-now" className="sr">Usage</h3>
+          <div className="meters">
+            <Meter label="Worlds held" value={info.worlds} limit={info.plan.limits.worlds} />
+            <Meter label="World-hours" value={hours} limit={limitH} note={pace !== null ? <span className={over ? 'warn-text' : undefined}>On pace for about {pace.toLocaleString()} by the end of the period{over ? (info.spendCap === false ? `; the hours past ${limitH} are billed` : `; past ${limitH} the org is warned, then held`) : ''}.</span> : null} />
+          </div>
+          <dl className="stats">{others.map((m) => <div key={m.name}><dt>{m.label.charAt(0).toUpperCase() + m.label.slice(1)}</dt><dd>{(info.usage[m.name] ?? 0).toLocaleString()}</dd></div>)}</dl>
+          <p className="mode small">{info.lastTickAt ? <>Metered hourly; last at <At iso={info.lastTickAt} />.</> : 'Metered hourly; the first hour has not been metered yet.'}</p>
+        </section>
+      </div>
+      {flags.usage_by_day && info.usageByDay && info.usageByDay.length > 0 ? (
+        <section className="card" aria-labelledby="by-day"><h3 id="by-day">World-hours by day</h3>
+          <div className="day-bars" role="img" aria-label="World-hours by day this period">{info.usageByDay.map((d) => { const max = Math.max(1, ...info.usageByDay!.map((x) => x.hours)); return <div key={d.day} className="day-bar" title={`${d.day}: ${d.hours} h, ${d.worlds} World${d.worlds === 1 ? '' : 's'}`}><span style={{ height: `${Math.max(3, Math.round((d.hours / max) * 100))}%` }} /><em>{Number(d.day.slice(8))}</em></div>; })}</div>
+        </section>
+      ) : null}
+      {info.plan.id !== 'free' && info.overageCentsPerHour && admin ? (
+        <section className="card setting-row" aria-labelledby="cap">
+          <div><h3 id="cap">Spend cap</h3><p className="mode">{info.spendCap !== false ? `On: past the plan's ${limitH} world-hours, the org is warned and then held, never billed more.` : `Off: hours past the plan's ${limitH} are billed at ${money(info.overageCentsPerHour)} each, and nothing is held.`}</p></div>
+          <Switch label="Spend cap" checked={info.spendCap !== false} onChange={(on) => void setCap(on)} />
+        </section>
+      ) : null}
+      <h3 className="section-title">Plans</h3>
+      <div className="plans">{info.plans.map((p) => { const current = p.id === info.plan.id; return (
+        <section key={p.id} className={current ? 'card plan current' : 'card plan'} aria-labelledby={`plan-${p.id}`}>
+          <h4 id={`plan-${p.id}`}>{p.name} {current ? <span className="badge">current</span> : null}</h4>
+          <p className="price-line"><span className="price">{money(p.priceMonthly)}</span><span className="mode"> / month</span></p>
+          <p className="mode">{p.pitch}</p>
+          <ul className="checks">{p.features.map((f) => <li key={f}>{f}</li>)}</ul>
+          {!current && admin && p.priceMonthly > info.plan.priceMonthly ? <button type="button" className="primary" disabled={leaving} onClick={() => void leaveFor(`/-/orgs/${org}/checkout`)}>{p.trialDays && !sub ? `Start a ${p.trialDays}-day trial` : `Upgrade to ${p.name}`}</button> : null}
+          {!current && admin && p.priceMonthly < info.plan.priceMonthly ? <button type="button" disabled={leaving} onClick={() => void leaveFor(`/-/orgs/${org}/billing-portal`)}>Downgrade in the portal</button> : null}
+        </section>
+      ); })}</div>
+      {info.reminders?.trialEnding || info.reminders?.renewal ? <p className="mode small">We email the admins seven days before the {info.reminders.trialEnding ? 'trial ends' : 'renewal'} ({day((info.reminders.trialEnding ?? info.reminders.renewal)!)}).</p> : null}
+    </>
+  );
+}
+
+/** What the restriction machine's position means for this org, in the person's words — the reason named. */
+function restrictionCopy(info: BillingInfo): string {
+  const r = info.restriction!; const until = day(r.graceEnds); const allows = info.plan.limits.worlds ?? 0;
+  if (r.meter === 'worlds') {
+    const lead = r.reason === 'no_subscription' ? `Your 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 since ${until} the Worlds no longer refresh and new ones are refused, until you upgrade or delete Worlds down to ${allows}.` : `${lead} Nothing is deleted, and the Worlds keep working until ${until}. New Worlds beyond ${allows} are refused from now on.`;
+  }
+  return r.status === 'restricted' ? `The plan's world-hours ran out and the grace period ended ${until}: upgrade to make and refresh Worlds again.` : `This period passed the plan's world-hours. Everything keeps working until ${until}; after that, making and refreshing Worlds is held until you upgrade or the next period begins.`;
+}
+
+/** An on/off setting, drawn as a switch (a checkbox underneath, so it is one to a screen reader). */
+function Switch({ label, checked, onChange, disabled }: { label: string; checked: boolean; onChange: (on: boolean) => void; disabled?: boolean }): React.JSX.Element {
+  return <label className="switch"><input type="checkbox" role="switch" aria-label={label} checked={checked} disabled={disabled} onChange={(e) => onChange(e.target.checked)} /><span aria-hidden="true" /></label>;
+}
+
+// ── Settings ─────────────────────────────────────────────────────────────────────────────────────────────────────────
+/** An org's settings as sub-pages (Vercel's and Neon's): General with the danger zone, Security, Org tokens, Webhooks,
+ *  Labs, Support access. They are the admins'. */
+function SettingsPage({ org, sub, info, version, onChanged, onDeleted }: { org: OrgRow; sub: SettingsPage; info: PlatformInfo | null; version: number; onChanged: () => void; onDeleted: () => void }): React.JSX.Element {
+  const slug = slugOf(org);
+  const tabs = SETTINGS.filter(([k]) => k !== 'support' || info?.support);
+  const to = (k: SettingsPage): Place => ({ kind: 'org', org: slug, page: 'settings', sub: k });
+  return (
+    <>
+      <Head title="Settings" />
+      <SubNav label="Settings" items={tabs.map(([k, label]) => ({ label, href: pathOf(to(k)), on: sub === k, onClick: linkTo(to(k)) }))} />
+      {!isAdmin(org) ? <Empty title="Settings are for admins">You are a member of {org.name}. Ask one of its admins to change its settings.</Empty> : <div className="settings">
+        {sub === 'general' ? <GeneralSettings org={org} onChanged={onChanged} onDeleted={onDeleted} /> : null}
+        {sub === 'security' ? <SecuritySettings org={slug} onChanged={onChanged} /> : null}
+        {sub === 'tokens' ? <TokensPanel kind="org" org={slug} /> : null}
+        {sub === 'webhooks' ? (org.flags?.webhooks ? <Webhooks org={slug} /> : <Empty title="Webhooks are in Labs" action={<a className="button" href={pathOf(to('labs'))} onClick={linkTo(to('labs'))}>Open Labs</a>}>Turn them on for {org.name} under Labs, then add an endpoint here.</Empty>) : null}
+        {sub === 'labs' ? <Labs org={slug} onChanged={onChanged} /> : null}
+        {sub === 'support' && info?.support ? <SupportAccess org={slug} version={version} /> : null}
+      </div>}
+    </>
+  );
+}
+
+function GeneralSettings({ org, onChanged, onDeleted }: { org: OrgRow; onChanged: () => void; onDeleted: () => void }): React.JSX.Element {
+  const slug = slugOf(org); const held = org.worlds?.length ?? 0;
+  const [name, setName] = useState(org.name); const [busy, setBusy] = useState(false);
+  useEffect(() => { setName(org.name); }, [org.name]);
+  const rename = async (e: React.FormEvent): Promise<void> => { e.preventDefault(); setBusy(true); if (await act(`/-/orgs/${slug}`, { method: 'PATCH', body: JSON.stringify({ name: name.trim() }) }, 'Name saved')) onChanged(); setBusy(false); };
+  const remove = async (): Promise<void> => {
+    const ok = await confirmAct({ title: `Delete ${org.name}?`, body: <>This deletes the org for every member{held ? <>, and its <strong>{held} World{held === 1 ? '' : 's'}</strong> with their whole history</> : ''}. Its members keep their accounts. This cannot be undone.</>, action: held ? `Delete org and ${held} World${held === 1 ? '' : 's'}` : 'Delete org', danger: true, typed: slug });
+    if (ok && await act(`/-/orgs/${slug}${held ? '?everything=1' : ''}`, { method: 'DELETE' }, `Deleted ${org.name}`)) onDeleted();
+  };
+  return (
+    <>
+      <section className="card" aria-labelledby="general">
+        <h3 id="general">Org name</h3>
+        <form onSubmit={rename} className="stack"><label><span className="sr">Org name</span><input name="orgRename" value={name} onChange={(e) => setName(e.target.value)} maxLength={64} required /></label><p className="mode">The name people see. The org's address stays <code>{slug}</code>, so nothing your code or the command points at moves.</p><div className="card-actions"><button type="submit" disabled={busy || !name.trim() || name.trim() === org.name}>Save</button></div></form>
+      </section>
+      <section className="card" aria-labelledby="ids">
+        <h3 id="ids">Address and id</h3>
+        <CopyField label="Address" value={slug} />
+        <CopyField label="Org id (the API's and the audit log's)" value={org.id} />
+      </section>
+      <section className="card danger-zone" aria-labelledby="danger">
+        <h3 id="danger">Danger zone</h3>
+        <div className="setting-row"><div><strong>Delete this org</strong><p className="mode">For every member{held ? `, with its ${held} World${held === 1 ? '' : 's'}` : ''}. You type its address to confirm.</p></div><button type="button" className="danger-outline" onClick={() => void remove()}>Delete org…</button></div>
+      </section>
+    </>
+  );
+}
+
+/** Security: the switches the peers share (PostHog's members-can-invite and personal keys; approved email domains). */
+function SecuritySettings({ org, onChanged }: { org: string; onChanged: () => void }): React.JSX.Element {
+  type Sec = { membersCanInvite: boolean; membersCanUsePersonalTokens: boolean; approvedEmailDomains: string[] };
+  const [again, setAgain] = useState(0);
+  const load = useDoor<{ security: Sec }>(`/-/orgs/${org}/security`, again);
+  const [domains, setDomains] = useState<string | null>(null);
+  if (load.state !== 'ok') return <Pending load={load} what="the security settings" retry={() => setAgain((n) => n + 1)} />;
+  const sec = load.data.security;
+  const save = async (patch: Partial<Sec>, said: string): Promise<void> => { if (await act(`/-/orgs/${org}/security`, { method: 'PATCH', body: JSON.stringify({ ...sec, ...patch }) }, said)) { setAgain((n) => n + 1); onChanged(); } };
+  const shownDomains = domains ?? sec.approvedEmailDomains.join(', ');
+  return (
+    <section className="card" aria-label="Security">
+      <div className="setting-row"><div><strong>Members may invite</strong><p className="mode">Otherwise only admins add and invite people.</p></div><Switch label="Members may invite" checked={sec.membersCanInvite} onChange={(on) => void save({ membersCanInvite: on }, on ? 'Members may invite' : 'Only admins invite')} /></div>
+      <div className="setting-row"><div><strong>Personal tokens may open this org</strong><p className="mode">Off: only people signed in, and org tokens, reach it; a member's personal token is refused.</p></div><Switch label="Personal tokens may open this org" checked={sec.membersCanUsePersonalTokens} onChange={(on) => void save({ membersCanUsePersonalTokens: on }, on ? 'Personal tokens allowed' : 'Personal tokens refused')} /></div>
+      <form className="setting-row stack-row" onSubmit={(e) => { e.preventDefault(); void save({ approvedEmailDomains: shownDomains.split(',').map((d) => d.trim()).filter(Boolean) }, 'Approved domains saved').then(() => setDomains(null)); }}>
+        <label className="grow"><strong>Approved email domains</strong><span className="mode">Invitations go only to these domains. Empty: any.</span><input name="approvedEmailDomains" value={shownDomains} onChange={(e) => setDomains(e.target.value)} placeholder="acme.com, acme.dev" /></label>
+        <button type="submit" disabled={domains === null}>Save</button>
+      </form>
+    </section>
+  );
+}
+
+/** Tokens — yours (for the command and scripts) or the org's (for CI, acting as the org): a table of what exists, made in
+ *  a dialog, the token itself shown once in another with a copy button. */
+function TokensPanel({ kind, org }: { kind: 'personal' | 'org'; org?: string }): React.JSX.Element {
+  type TokenRow = { id: string; name: string; createdAt: string; last4: string; lastUsedAt?: string; expiresAt?: string | null; scopes?: string[] };
+  const base = kind === 'org' ? `/-/orgs/${org}/tokens` : '/-/tokens';
+  const [again, setAgain] = useState(0);
+  const load = useDoor<{ tokens: TokenRow[] }>(base, again);
+  const [making, setMaking] = useState(false); const [made, setMade] = useState<{ token: string; name: string } | null>(null);
+  const revoke = async (t: TokenRow): Promise<void> => {
+    const ok = await confirmAct({ title: `Revoke ${t.name}?`, body: <>Whatever uses the token ending <code>…{t.last4}</code> is refused from now on.</>, action: 'Revoke token', danger: true });
+    if (ok && await act(`${base}/${t.id}`, { method: 'DELETE' }, `Revoked ${t.name}`)) setAgain((n) => n + 1);
+  };
+  const title = kind === 'org' ? 'Org tokens' : 'Personal access tokens';
+  return (
+    <section className="card flush" aria-label={title}>
+      <div className="card-head"><div><h3>{title}</h3><p className="mode">{kind === 'org' ? <>Act as the org, not a person: for CI and scripts. <code>volter login {ORIGIN} --token …</code>, then <code>volter remote add origin {org}/&lt;world&gt;</code>.</> : <>Sign the <code>volter</code> command in as you without a browser, for scripts and CI. In a terminal, <code>volter login {ORIGIN}</code> does it through the browser instead.</>}</p></div><button type="button" className="primary" onClick={() => setMaking(true)}>Create token</button></div>
+      {load.state !== 'ok' ? <Pending load={load} what="the tokens" retry={() => setAgain((n) => n + 1)} /> : load.data.tokens.length === 0 ? <p className="mode table-note">No tokens yet.</p> : (
+        <table className="dense tokens-table" aria-label={kind === 'org' ? 'Org tokens' : 'Your tokens'}>
+          <thead><tr><th>Name</th><th>Access</th><th>Created</th><th>Last used</th><th>Expires</th><th className="num"><span className="sr">Actions</span></th></tr></thead>
+          <tbody>{load.data.tokens.map((t) => { const expired = t.expiresAt ? Date.parse(t.expiresAt) <= Date.now() : false; return (
+            <tr key={t.id}><td><span className="who"><span>{t.name}</span><span className="mode mono">…{t.last4}</span></span></td><td className="mode">{scopeWords(t.scopes)}</td><td className="mode"><span title={when(t.createdAt)}>{day(t.createdAt)}</span></td><td className="mode">{t.lastUsedAt ? <span title={when(t.lastUsedAt)}>{ago(t.lastUsedAt)}</span> : 'never'}</td><td className="mode">{t.expiresAt === null ? 'never' : expired ? <span className="badge warn">expired</span> : t.expiresAt ? day(t.expiresAt) : '—'}</td><td className="num"><Menu label={`More for ${t.name}`} items={[{ label: 'Revoke…', danger: true, onSelect: () => void revoke(t) }]} /></td></tr>
+          ); })}</tbody>
+        </table>
+      )}
+      <MakeToken open={making} kind={kind} base={base} onClose={() => setMaking(false)} onMade={(m) => { setMaking(false); setMade(m); setAgain((n) => n + 1); }} />
+      <Dialog open={Boolean(made)} onClose={() => setMade(null)} title={`${made?.name ?? 'Token'} is ready`} footer={<button type="button" className="primary" onClick={() => setMade(null)}>Done</button>}>
+        <p className="notice warn">Copy it now: it is shown this once and never again.</p>
+        {made ? <CopyField label="Token" value={made.token} secret /> : null}
+        {made ? <CopyField label="Use it" value={`volter login ${ORIGIN} --token ${made.token}`} secret /> : null}
+      </Dialog>
+    </section>
+  );
+}
+
+function MakeToken({ open, kind, base, onClose, onMade }: { open: boolean; kind: 'personal' | 'org'; base: string; onClose: () => void; onMade: (m: { token: string; name: string }) => void }): React.JSX.Element {
+  const [name, setName] = useState(''); const [expiry, setExpiry] = useState('30'); const [access, setAccess] = useState<'all' | 'read' | 'custom'>(kind === 'org' ? 'read' : 'all'); const [custom, setCustom] = useState<Record<string, 'none' | 'read' | 'write'>>({ worlds: 'read' }); const [busy, setBusy] = useState(false); const [error, setError] = useState<string | null>(null);
+  useEffect(() => { if (open) { setName(''); setExpiry(kind === 'org' ? '90' : '30'); setAccess(kind === 'org' ? 'read' : 'all'); setError(null); } }, [open, kind]);
+  const submit = async (e: React.FormEvent): Promise<void> => {
+    e.preventDefault(); setBusy(true); setError(null);
+    const r = await door(base, { method: 'POST', body: JSON.stringify({ name: name.trim(), expiresInDays: expiry === 'never' ? null : Number(expiry), scopes: scopesFor(access, custom) }) }).catch(() => null);
+    setBusy(false);
+    if (!r) { setError(`${ORIGIN} did not answer`); return; }
+    const b = (await r.json().catch(() => ({}))) as { token?: string; error?: string };
+    if (!r.ok || !b.token) { setError(b.error ?? `answered ${r.status}`); return; }
+    onMade({ token: b.token, name: name.trim() });
+  };
+  return (
+    <Dialog open={open} onClose={() => { if (!busy) onClose(); }} title={kind === 'org' ? 'Create an org token' : 'Create a personal token'} footer={<><button type="button" onClick={onClose} disabled={busy}>Cancel</button><button type="submit" form="make-token" disabled={busy || !name.trim()}>{busy ? 'Creating…' : 'Create token'}</button></>}>
+      <form id="make-token" onSubmit={submit} className="stack" aria-label="Create a token">
+        <label>Name <input autoFocus name="tokenName" value={name} onChange={(e) => setName(e.target.value)} placeholder={kind === 'org' ? 'github-actions' : 'my laptop'} maxLength={80} required /></label>
+        <label>Expires <select name="tokenExpiry" value={expiry} onChange={(e) => setExpiry(e.target.value)}><option value="7">in 7 days</option><option value="30">in 30 days</option><option value="90">in 90 days</option><option value="365">in a year</option><option value="never">never (not recommended)</option></select></label>
+        <fieldset className="choice"><legend>Access</legend>
+          {([['all', 'Full access', kind === 'org' ? 'Everything an admin may do in the org.' : 'Everything you may do.'], ['read', 'Read only', 'Read Worlds, orgs, members, billing and activity; change nothing.'], ['custom', 'Choose', 'Pick read or read-and-write per kind of thing.']] as const).map(([k, t, d]) => <label key={k} className={access === k ? 'choice-card on' : 'choice-card'}><input type="radio" name="tokenAccess" value={k} checked={access === k} onChange={() => setAccess(k)} /><span><strong>{t}</strong><span className="mode">{d}</span></span></label>)}
+        </fieldset>
+        {access === 'custom' ? <div className="scope-grid">{SCOPE_OBJECTS.map((o) => <label key={o}><span>{o}</span><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>)}</div> : null}
+        {error ? <p role="alert">{error}</p> : null}
+      </form>
+    </Dialog>
+  );
+}
+
+/** A key for one World, for an app or a job: made here (a browser session on the World makes none), shown once. */
+function WorldKey({ world, onClose }: { world: string | null; onClose: () => void }): React.JSX.Element {
+  const [name, setName] = useState(''); const [scope, setScope] = useState<'write' | 'read'>('write'); const [expiry, setExpiry] = useState('90'); const [busy, setBusy] = useState(false); const [error, setError] = useState<string | null>(null); const [made, setMade] = useState<{ key: string; base: string } | null>(null);
+  useEffect(() => { if (world) { setName(''); setScope('write'); setExpiry('90'); setError(null); setMade(null); } }, [world]);
+  const submit = async (e: React.FormEvent): Promise<void> => {
+    e.preventDefault(); if (!world) return; setBusy(true); setError(null);
+    const r = await door(`/-/worlds/${world}/keys`, { method: 'POST', body: JSON.stringify({ name: name.trim(), scope, expiresInDays: expiry === 'never' ? null : Number(expiry) }) }).catch(() => null);
+    setBusy(false);
+    const b = r ? (await r.json().catch(() => ({}))) as { key?: string; base?: string; error?: string } : {};
+    if (!r || !r.ok || !b.key) { setError(b.error ?? (r ? `answered ${r.status}` : `${ORIGIN} did not answer`)); return; }
+    setMade({ key: b.key, base: b.base ?? '' });
+  };
+  return (
+    <Dialog open={world !== null} onClose={() => { if (!busy) onClose(); }} title={`Make a key for ${world ?? ''}`} footer={made ? <button type="button" className="primary" onClick={onClose}>Done</button> : <><button type="button" onClick={onClose} disabled={busy}>Cancel</button><button type="submit" form="world-key" disabled={busy || !name.trim()}>{busy ? 'Making…' : 'Make key'}</button></>}>
+      {made ? <div className="stack">
+        <p>Copy it now: it is shown once. It is yours, and is revoked if you leave the org; its World lists it under Settings.</p>
+        <CopyField label="Key" value={made.key} secret />
+        {made.base ? <CopyField label="The World's address" value={made.base} /> : null}
+      </div> : (
+        <form id="world-key" onSubmit={submit} className="stack" aria-label="Make a key">
+          <label>Name <input autoFocus name="keyName" value={name} onChange={(e) => setName(e.target.value)} placeholder="staging app" maxLength={80} required /></label>
+          <label>Access <select name="keyScope" 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>
+          <label>Expires <select name="keyExpiry" value={expiry} onChange={(e) => setExpiry(e.target.value)}><option value="7">in 7 days</option><option value="30">in 30 days</option><option value="90">in 90 days</option><option value="365">in a year</option><option value="never">never (not recommended)</option></select></label>
+          {error ? <p role="alert">{error}</p> : null}
+        </form>
+      )}
+    </Dialog>
+  );
+}
+
+/** Scopes: `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 'Full access';
+  if (SCOPE_OBJECTS.every((o) => scopes.includes(`${o}:read`)) && scopes.every((s) => s.endsWith(':read'))) return 'Read only';
+  return scopes.map((s) => s.replace(':write', ' (write)').replace(':read', '')).join(', ');
+}
+
+/** Labs (Twenty's lab, Sentry's Early Adopter): early-access features, each a switch, or all of them with one. */
+function Labs({ org, onChanged }: { org: string; onChanged: () => void }): React.JSX.Element {
+  type Feature = { key: string; name: string; description: string; since: string; on: boolean };
+  const [again, setAgain] = useState(0);
+  const load = useDoor<{ features: Feature[]; earlyAdopter: boolean }>(`/-/orgs/${org}/labs`, again);
+  if (load.state !== 'ok') return <Pending load={load} what="Labs" retry={() => setAgain((n) => n + 1)} />;
+  const { features, earlyAdopter } = load.data;
+  const set = async (patch: { flags?: Record<string, boolean>; earlyAdopter?: boolean }, said: string): Promise<void> => { if (await act(`/-/orgs/${org}/labs`, { method: 'PATCH', body: JSON.stringify(patch) }, said)) { setAgain((n) => n + 1); onChanged(); } };
+  return (
+    <section className="card" aria-label="Labs">
+      <p className="mode">Features that are new: try them before everyone has them. Each can be turned off again.</p>
+      <div className="setting-row"><div><strong>Early adopter</strong><p className="mode">Every new feature is on for this org as soon as it lands.</p></div><Switch label="Early adopter" checked={earlyAdopter} onChange={(on) => void set({ earlyAdopter: on }, on ? 'Every new feature is on' : 'Early adopter off')} /></div>
+      {features.map((f) => <div key={f.key} className="setting-row"><div><strong>{f.name}</strong> <span className="badge">since {day(f.since)}</span><p className="mode">{f.description}</p></div><Switch label={f.name} checked={earlyAdopter || f.on} disabled={earlyAdopter} onChange={(on) => void set({ flags: { [f.key]: on } }, `${f.name} ${on ? 'on' : 'off'}`)} /></div>)}
+    </section>
+  );
+}
+
+/** Webhooks out: endpoints and the events they want, the secret once, a test event, each endpoint's deliveries. */
+function Webhooks({ org }: { 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 [again, setAgain] = useState(0);
+  const load = useDoor<{ webhooks: Endpoint[]; events: string[] }>(`/-/orgs/${org}/webhooks`, again);
+  const [adding, setAdding] = useState(false); const [secret, setSecret] = useState<string | null>(null); const [viewing, setViewing] = useState<Endpoint | null>(null); const [deliveries, setDeliveries] = useState<Delivery[] | null>(null);
+  const reload = (): void => setAgain((n) => n + 1);
+  const show = async (w: Endpoint): Promise<void> => { setViewing(w); setDeliveries(null); const b = await act<{ deliveries: Delivery[] }>(`/-/orgs/${org}/webhooks/${w.id}/deliveries`, {}); setDeliveries(b?.deliveries ?? []); };
+  const test = async (w: Endpoint): Promise<void> => { const b = await act<{ delivery: Delivery }>(`/-/orgs/${org}/webhooks/${w.id}/test`, { method: 'POST' }); if (b) { const a = b.delivery.attempts[0]; toast(b.delivery.state === 'delivered' ? `Test delivered (${a?.status})` : `Test not delivered (${a?.status ?? a?.response}); retrying`, b.delivery.state === 'delivered' ? 'ok' : 'error'); reload(); } };
+  const remove = async (w: Endpoint): Promise<void> => { if (await confirmAct({ title: 'Remove this endpoint?', body: <>Nothing more is sent to <code>{w.url}</code>.</>, action: 'Remove endpoint', danger: true }) && await act(`/-/orgs/${org}/webhooks/${w.id}`, { method: 'DELETE' }, 'Endpoint removed')) reload(); };
+  if (load.state !== 'ok') return <Pending load={load} what="the webhooks" retry={reload} />;
+  const state = (w: Endpoint): React.JSX.Element => (w.disabledAt ? <span className="badge warn">disabled</span> : w.consecutiveFailures > 0 ? <span className="badge warn">failing · {w.consecutiveFailures}</span> : <span className="badge ok">active</span>);
+  return (
+    <section className="card flush" aria-label="Webhooks">
+      <div className="card-head"><div><h3>Webhooks</h3><p className="mode">Events the org raises (a World made, a member added, the plan changed) sent to your endpoint as JSON, signed with Standard Webhooks. Retried with backoff; twenty failures in a row disable the endpoint and email the admins.</p></div><button type="button" className="primary" onClick={() => setAdding(true)}>Add endpoint</button></div>
+      {load.data.webhooks.length === 0 ? <p className="mode table-note">No endpoints yet.</p> : (
+        <table className="dense" aria-label="Endpoints">
+          <thead><tr><th>Endpoint</th><th>Events</th><th>Status</th><th className="num"><span className="sr">Actions</span></th></tr></thead>
+          <tbody>{load.data.webhooks.map((w) => <tr key={w.id}><td><span className="who"><code>{w.url}</code>{w.description ? <span className="mode">{w.description}</span> : null}</span></td><td className="mode">{w.events.includes('*') ? 'Every event' : w.events.join(', ')}</td><td>{state(w)}</td><td className="num"><Menu label={`More for ${w.url}`} items={[
+            { label: 'Send a test event', onSelect: () => void test(w) },
+            { label: 'Deliveries', onSelect: () => void show(w) },
+            w.disabledAt ? { label: 'Enable', onSelect: () => void act(`/-/orgs/${org}/webhooks/${w.id}`, { method: 'PATCH', body: JSON.stringify({ enabled: true }) }, 'Endpoint enabled').then(reload) } : { label: 'Disable', onSelect: () => void act(`/-/orgs/${org}/webhooks/${w.id}`, { method: 'PATCH', body: JSON.stringify({ enabled: false }) }, 'Endpoint disabled').then(reload) },
+            { label: 'Remove…', danger: true, onSelect: () => void remove(w) },
+          ]} /></td></tr>)}</tbody>
+        </table>
+      )}
+      <AddEndpoint open={adding} org={org} names={load.data.events} onClose={() => setAdding(false)} onMade={(s) => { setAdding(false); setSecret(s); reload(); }} />
+      <Dialog open={Boolean(secret)} onClose={() => setSecret(null)} title="Endpoint added" footer={<button type="button" className="primary" onClick={() => setSecret(null)}>Done</button>}>
+        <p className="notice warn">Copy its signing secret now: it is shown this once. Your receiver verifies each delivery with it.</p>
+        {secret ? <CopyField label="Signing secret" value={secret} secret /> : null}
+      </Dialog>
+      <Dialog open={Boolean(viewing)} onClose={() => setViewing(null)} title="Deliveries" wide>
+        {viewing ? <p className="mode"><code>{viewing.url}</code>: the last fifty, newest first.</p> : null}
+        {deliveries === null ? <Skeleton lines={4} label="Loading the deliveries…" /> : deliveries.length === 0 ? <p className="mode">No deliveries yet.</p> : <table className="dense"><thead><tr><th>When</th><th>Event</th><th>Attempt</th><th>Answer</th></tr></thead><tbody>{deliveries.map((d) => { const last = d.attempts[d.attempts.length - 1]; return <tr key={d.id}><td className="mode">{last ? <span title={when(last.at)}>{ago(last.at)}</span> : '—'}</td><td>{d.event}</td><td>{d.attempt}{d.state === 'pending' ? <span className="mode"> · next {ago(d.nextAt)}</span> : <span className={`badge ${d.state === 'delivered' ? 'ok' : 'warn'}`}>{d.state}</span>}</td><td className="mode">{last?.status ?? '—'} {(last?.response ?? '').slice(0, 60)}</td></tr>; })}</tbody></table>}
+      </Dialog>
+    </section>
+  );
+}
+
+function AddEndpoint({ open, org, names, onClose, onMade }: { open: boolean; org: string; names: string[]; onClose: () => void; onMade: (secret: string) => void }): React.JSX.Element {
+  const [url, setUrl] = useState(''); const [description, setDescription] = useState(''); const [all, setAll] = useState(true); const [chosen, setChosen] = useState<string[]>([]); const [error, setError] = useState<string | null>(null); const [busy, setBusy] = useState(false);
+  useEffect(() => { if (open) { setUrl(''); setDescription(''); setAll(true); setChosen([]); setError(null); } }, [open]);
+  const submit = async (e: React.FormEvent): Promise<void> => {
+    e.preventDefault(); setBusy(true); setError(null);
+    const r = await door(`/-/orgs/${org}/webhooks`, { method: 'POST', body: JSON.stringify({ url, description, events: all ? ['*'] : chosen }) }).catch(() => null);
+    setBusy(false);
+    const b = r ? ((await r.json().catch(() => ({}))) as { secret?: string; error?: string }) : { error: `${ORIGIN} did not answer` };
+    if (!r?.ok || !b.secret) { setError(b.error ?? 'refused'); return; }
+    onMade(b.secret);
+  };
+  return (
+    <Dialog open={open} onClose={() => { if (!busy) onClose(); }} title="Add an endpoint" footer={<><button type="button" onClick={onClose} disabled={busy}>Cancel</button><button type="submit" form="add-endpoint" disabled={busy || !url || (!all && chosen.length === 0)}>{busy ? 'Adding…' : 'Add endpoint'}</button></>}>
+      <form id="add-endpoint" onSubmit={submit} className="stack" aria-label="Add an endpoint">
+        <label>Endpoint URL <input autoFocus name="webhookUrl" type="url" value={url} onChange={(e) => setUrl(e.target.value)} placeholder="https://example.com/hooks/volter" required /></label>
+        <label><span>Description <span className="mode">(optional)</span></span><input name="webhookDescription" value={description} onChange={(e) => setDescription(e.target.value)} maxLength={200} /></label>
+        <fieldset className="choice"><legend>Events</legend>
+          <label className={all ? 'choice-card on' : 'choice-card'}><input type="radio" name="webhookEvents" checked={all} onChange={() => setAll(true)} /><span><strong>Every event</strong><span className="mode">Including ones added later.</span></span></label>
+          <label className={!all ? 'choice-card on' : 'choice-card'}><input type="radio" name="webhookEvents" checked={!all} onChange={() => setAll(false)} /><span><strong>Choose events</strong></span></label>
+        </fieldset>
+        {!all ? <div className="scope-grid">{names.map((n) => <label key={n} className="check"><input type="checkbox" checked={chosen.includes(n)} onChange={(e) => setChosen(e.target.checked ? [...chosen, n] : chosen.filter((x) => x !== n))} /> <code>{n}</code></label>)}</div> : null}
+        {error ? <p role="alert">{error}</p> : null}
+      </form>
+    </Dialog>
+  );
+}
+
+/** Support access: whether support may open the org, until when, and the way to take it back. */
+function SupportAccess({ org, version }: { org: string; version: number }): React.JSX.Element {
+  const [again, setAgain] = useState(0);
+  const load = useDoor<{ supportAccess: { until: string } | null }>(`/-/orgs/${org}/support-access`, version + again);
+  if (load.state !== 'ok') return <Pending load={load} what="support access" />;
+  const access = load.data.supportAccess;
+  return (
+    <section className="card" aria-label="Support access">
+      <div className="setting-row"><div><strong>Support may open this org</strong><p className="mode">{access ? <>Read only, until {when(access.until)}. Each time they do is in Activity, with their reason.</> : 'Not allowed. When you write to support from Help you can allow it for seven days, read only.'}</p></div>
+        {access ? <button type="button" className="danger-outline" onClick={() => void act(`/-/orgs/${org}/support-access`, { method: 'DELETE' }, 'Support access revoked').then(() => setAgain((n) => n + 1))}>Revoke</button> : <span className="badge">off</span>}</div>
+    </section>
+  );
+}
+
+// ── Activity ─────────────────────────────────────────────────────────────────────────────────────────────────────────
+type AuditRow = { at: string; event: string; actor: { id?: string; email?: string; operator?: boolean; platform?: boolean }; target?: string };
+const AREAS: Array<[string, string, RegExp]> = [['all', 'All activity', /./], ['worlds', 'Worlds', /^WORLD_/], ['members', 'Members', /^(MEMBER_|INVITE_)/], ['tokens', 'Tokens', /TOKEN/], ['billing', 'Billing', /^(PLAN_|QUOTA_|SPEND_|REMINDER_)/], ['settings', 'Settings', /^(ORG_|SECURITY_|LABS_|WEBHOOK_|SUPPORT_|IMPERSONATION)/]];
+/** What happened in the org: the audit log, newest first, filtered by area and searched, downloadable as kept. */
+function ActivityPage({ org, version }: { org: string; version: number }): React.JSX.Element {
+  const [again, setAgain] = useState(0);
+  const load = useDoor<{ entries: AuditRow[] }>(`/-/orgs/${org}/audit`, version + again);
+  const [area, setArea] = useState('all'); const [q, setQ] = useState(''); const [shown, setShown] = useState(50);
+  const who = (a: AuditRow['actor']): string => (a.platform ? 'Volter World' : a.operator ? 'Support' : a.email ?? a.id ?? '?');
+  const test = AREAS.find(([k]) => k === area)?.[2] ?? /./;
+  const rows = load.state === 'ok' ? load.data.entries.filter((r) => test.test(r.event) && `${r.event} ${who(r.actor)} ${r.target ?? ''}`.toLowerCase().includes(q.trim().toLowerCase())) : [];
+  return (
+    <>
+      <Head title="Activity" lede="Every admin act in the org, who did it and when.">
+        <a className="button" href={`/-/orgs/${org}/audit.jsonl`} download={`${org}-activity.jsonl`}>Download log</a>
+        <a className="button" href={`/-/orgs/${org}/export`} download={`${org}-export.json`}>Export org</a>
+      </Head>
+      <div className="toolbar"><select aria-label="Area" value={area} onChange={(e) => { setArea(e.target.value); setShown(50); }}>{AREAS.map(([k, label]) => <option key={k} value={k}>{label}</option>)}</select><input type="search" aria-label="Search the activity" placeholder="Search by person, act or thing…" value={q} onChange={(e) => { setQ(e.target.value); setShown(50); }} /></div>
+      {load.state !== 'ok' ? <Pending load={load} what="the activity" retry={() => setAgain((n) => n + 1)} lines={6} /> : rows.length === 0 ? <Empty title={load.data.entries.length === 0 ? 'Nothing yet' : 'Nothing matches'}>{load.data.entries.length === 0 ? 'Acts in the org (a World made, a member added, a token made) show here.' : 'Try another area or search.'}</Empty> : (
+        <div className="block">
+          <table className="dense" aria-label={`${org}'s activity`}>
+            <thead><tr><th>When</th><th>What</th><th>Who</th><th>On</th></tr></thead>
+            <tbody>{rows.slice(0, shown).map((r, i) => <tr key={`${r.at}-${i}`}><td className="mode nowrap"><span title={when(r.at)}>{ago(r.at)}</span></td><td>{sentence(r.event)}</td><td><span className="vendor-cell"><Initial of={who(r.actor)} small />{who(r.actor)}</span></td><td className="mode">{r.target ?? ''}</td></tr>)}</tbody>
+          </table>
+          {rows.length > shown ? <div className="table-note"><button type="button" onClick={() => setShown((n) => n + 50)}>Show {Math.min(50, rows.length - shown)} more</button></div> : null}
+        </div>
+      )}
+    </>
+  );
+}
+/** An audit event as a sentence, the way the peers' logs read ("Created a World"); an event not named here is spelled out. */
+const SAID: Record<string, string> = {
+  ORG_CREATE: 'Created the org', ORG_RENAME: 'Renamed the org', ORG_DELETE: 'Deleted the org', MEMBER_INVITE: 'Invited or added a member', INVITE_REVOKE: 'Revoked an invitation', MEMBER_REMOVE: 'Removed a member', MEMBER_ROLE: 'Changed a role',
+  WORLD_PROVISION: 'Created a World', WORLD_DELETE: 'Deleted a World', WORLD_OPEN: 'Opened a World', PREVIEW_CREATE: 'Made a preview', PREVIEW_DELETE: 'Removed a preview', WORLD_CLAIM: 'Claimed a World into the org', TOKEN_CREATE: 'Made a token', TOKEN_REVOKE: 'Revoked a token', ORG_TOKEN_CREATE: 'Made an org token', ORG_TOKEN_REVOKE: 'Revoked an org token',
+  SECURITY_CHANGE: 'Changed security settings', SUPPORT_REQUEST: 'Wrote to support', SUPPORT_ACCESS_GRANTED: 'Allowed support access', SUPPORT_ACCESS_REVOKED: 'Revoked support access', IMPERSONATION: 'Support opened the org',
+  WEBHOOK_CREATE: 'Added a webhook endpoint', WEBHOOK_CHANGE: 'Changed a webhook endpoint', WEBHOOK_DELETE: 'Removed a webhook endpoint', WEBHOOK_DISABLED: 'A webhook endpoint was disabled', SPEND_CAP_CHANGE: 'Changed the spend cap', LABS_CHANGE: 'Changed Labs',
+  REMINDER_SENT: 'Sent a billing reminder', PLAN_CHECKOUT: 'Opened a checkout', PLAN_CHANGE: 'The plan changed', QUOTA_WARNED: 'Went over the plan', QUOTA_RESTRICTED: 'The org was held', QUOTA_CLEARED: 'Back within the plan',
+};
+const sentence = (event: string): string => { if (SAID[event]) return SAID[event]!; const s = event.toLowerCase().replace(/_/g, ' '); return s.charAt(0).toUpperCase() + s.slice(1); };
+
+// ── You ──────────────────────────────────────────────────────────────────────────────────────────────────────────────
+/** You: who the platform knows you as, where your sign-in is kept, and the tokens that sign the command in as you. */
+function AccountPage({ person, info, onSignOut }: { person: Person; info: PlatformInfo | null; onSignOut: () => void }): React.JSX.Element {
+  return (
+    <>
+      <Head title="Account" />
+      <section className="card profile" aria-labelledby="you">
+        <Initial of={person.name ?? person.email ?? '?'} />
+        <div className="grow"><h3 id="you">{person.name ?? person.email ?? person.id}</h3>{person.name && person.email ? <p className="mode">{person.email}</p> : null}{info ? <p className="mode">Signed in with {info.provider.name}{info.provider.account ? <>. Your name, email and how you sign in are kept there.</> : '.'}</p> : null}</div>
+        <div className="card-actions">{info?.provider.account ? <a className="button" href={info.provider.account}>Manage your {info.provider.name} account</a> : null}<button type="button" onClick={onSignOut}>Sign out</button></div>
+      </section>
+      <TokensPanel kind="personal" />
+    </>
+  );
+}
+
+/** A new org: its address, and the site's terms accepted where the platform has a site. The first is where a new person starts. */
+function CreateOrg({ first, site, onMade }: { first: boolean; site?: string | undefined; onMade: (slug: string) => Promise<void> }): React.JSX.Element {
+  const [name, setName] = useState(''); const [accepted, setAccepted] = useState(false); const [busy, setBusy] = useState(false); const [error, setError] = useState<string | null>(null);
+  const issue = !name ? null : !NAME.test(name) ? 'Lowercase letters, digits and dashes, starting with a letter or digit.' : (RESERVED_ORG_NAMES as readonly string[]).includes(name) ? `${name} is one of this platform's own pages: choose another.` : null;
+  const create = async (e: React.FormEvent): Promise<void> => {
+    e.preventDefault(); if (issue || !name) return; setBusy(true); setError(null);
+    const r = await door('/-/orgs', { method: 'POST', body: JSON.stringify({ name, ...(site ? { accepted } : {}) }) }).catch(() => null);
+    const body = r ? ((await r.json().catch(() => ({}))) as { error?: string; slug?: string; name?: string }) : { error: `${ORIGIN} did not answer` };
+    if (!r?.ok) { setBusy(false); setError(body.error ?? 'refused'); return; }
+    toast(`Created ${body.slug ?? name}`); await onMade(body.slug ?? body.name ?? '');
+  };
+  return (
+    <div className="narrow">
+      <Head title={first ? 'Welcome to Volter World' : 'Create an org'} lede={first ? 'An org holds your Worlds and your teammates. Make one to start; you can invite people and make more orgs later.' : 'An org holds Worlds and the people who work on them.'} />
+      <section className="card" aria-labelledby="create-org">
+        <h3 id="create-org" className="sr">Create an org</h3>
+        <form onSubmit={create} className="stack">
+          <label>Org name <input autoFocus name="orgName" value={name} onChange={(e) => setName(e.target.value.toLowerCase())} placeholder="acme" aria-invalid={Boolean(issue)} aria-describedby="org-name-help" autoComplete="off" spellCheck={false} required /></label>
+          <p id="org-name-help" className={issue ? 'field-error' : 'mode'}>{issue ?? <>Its address: <code>{ORIGIN}/{name || 'acme'}</code>, and <code>{name || 'acme'}/&lt;world&gt;</code> for its Worlds. You can change the name people see later, not the address.</>}</p>
+          {site ? <label className="check"><input name="accepted" type="checkbox" checked={accepted} onChange={(e) => setAccepted(e.target.checked)} required /> <span>I agree to the <a href={`${site}/terms.html`} target="_blank" rel="noreferrer">terms of service</a> and the <a href={`${site}/privacy.html`} target="_blank" rel="noreferrer">privacy policy</a></span></label> : null}
+          {error ? <p role="alert">{error}</p> : null}
+          <div className="card-actions"><button type="submit" disabled={busy || !name || Boolean(issue) || (Boolean(site) && !accepted)}>{busy ? 'Creating…' : 'Create org'}</button></div>
+        </form>
+      </section>
+    </div>
+  );
+}
+
+/** Help: ask a person — what it is about, how urgent, where, and the consent for support to look. */
+function HelpPage({ orgs, onChanged }: { 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 [sent, setSent] = useState<{ id: string; copyTo: string | null; until: string | null } | null>(null); const [busy, setBusy] = useState(false);
+  useEffect(() => { if (!org && orgs[0]) setOrg(orgs[0]); }, [orgs, org]);
+  const send = async (e: React.FormEvent): Promise<void> => {
+    e.preventDefault(); setBusy(true);
+    const b = await act<{ id?: string; copyTo?: string | null; access?: { until: string } | null }>('/-/support', { method: 'POST', body: JSON.stringify({ category, severity, subject, message, ...(org ? { org } : {}), ...(world ? { world } : {}), ...(allow && org ? { allowAccessDays: 7 } : {}) }) });
+    setBusy(false);
+    if (b?.id) { setSent({ id: b.id, copyTo: b.copyTo ?? null, until: b.access?.until ?? null }); setSubject(''); setMessage(''); setWorld(''); setAllow(false); onChanged?.(); }
+  };
+  if (sent) return (
+    <div className="narrow"><Head title="Help" /><section className="card sent" role="status"><h3>We have your request</h3><p>Your ticket is <code>{sent.id}</code>.{sent.copyTo ? ` A copy went to ${sent.copyTo}.` : ''} A person answers, usually within a working day.</p>{sent.until ? <p className="mode">Support may open {org}, read only, until {when(sent.until)}. You can revoke it under Settings › Support access.</p> : null}<div className="card-actions"><button type="button" onClick={() => setSent(null)}>Write another</button></div></section></div>
+  );
+  return (
+    <div className="narrow">
+      <Head title="Help" lede="Ask a person. Say what you saw and where: the org and the World go along with it." />
+      <section className="card" aria-label="Write to support">
+        <form onSubmit={send} className="stack">
+          <div className="two"><label>About <select name="helpCategory" 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" 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</option><option value="urgent">Urgent: we cannot work</option></select></label></div>
+          <div className="two">{orgs.length > 0 ? <label>Org <select name="helpOrg" value={org} onChange={(e) => setOrg(e.target.value)}>{orgs.map((o) => <option key={o} value={o}>{o}</option>)}</select></label> : null}
+            <label><span>World <span className="mode">(optional)</span></span><input name="helpWorld" value={world} onChange={(e) => setWorld(e.target.value)} placeholder="acme/staging" /></label></div>
+          <label>Subject <input name="helpSubject" value={subject} onChange={(e) => setSubject(e.target.value)} maxLength={200} required /></label>
+          <label>What happened <textarea name="helpMessage" value={message} onChange={(e) => setMessage(e.target.value)} rows={6} maxLength={5000} required /></label>
+          {org ? <label className="check"><input type="checkbox" name="helpAllow" checked={allow} onChange={(e) => setAllow(e.target.checked)} /> <span>Let support open {org}, read only, for seven days, so they see what you see. Admins only; you can revoke it.</span></label> : null}
+          <div className="card-actions"><button type="submit" disabled={busy || !subject.trim() || !message.trim()}>{busy ? 'Sending…' : 'Send to support'}</button></div>
+        </form>
+      </section>
+    </div>
+  );
+}
+
+/** The first run: what a person does next, with the real commands, as a checklist with its progress; dismissed for good. */
+function GettingStarted({ orgs, worlds, firstWorld, version }: { 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);
+  const mounted = useRef(true); useEffect(() => () => { mounted.current = false; }, []);
+  useEffect(() => { void door('/-/tokens').then(async (r) => { if (mounted.current) setTokensMade(r.ok ? ((await r.json()) as { tokens: unknown[] }).tokens.length > 0 : false); }).catch(() => undefined); }, [version]);
+  if (dismissed) return null;
+  const org = orgs[0];
+  // the way in is the app's folder (docs/contributing/architecture.md): the command makes the World from the vendors
+  // the app uses; Create World above is the way for a person without a terminal
+  const steps: Array<[boolean, React.ReactNode]> = [
+    [orgs.length > 0, 'Create an org'],
+    [tokensMade === true, <>Install the command and sign it in: <code>npm install -g @volter/world</code>, then <code>volter login {ORIGIN}</code></>],
+    [worlds > 0, <>In your app's folder, make its World here: <code>volter world init</code>, then <code>volter remote add origin {firstWorld ?? `${org ?? '<org>'}/<world>`}{firstWorld ? '' : ' --create'}</code></>],
+    [false, <>Send it what your app did: <code>volter world changeset -m "…"</code>, then <code>volter world push</code></>],
+  ];
+  const done = steps.filter(([d]) => d).length;
+  return (
+    <section aria-labelledby="getting-started" className="onboarding">
+      <div className="onboarding-head"><h3 id="getting-started">Get started</h3><span className="mode">{done} of {steps.length}</span><div className="progress" aria-hidden="true"><span style={{ width: `${(done / steps.length) * 100}%` }} /></div><button type="button" className="icon-button" aria-label="Dismiss getting started" onClick={() => { try { localStorage.setItem(KEY, 'done'); } catch { /* no storage */ } setDismissed(true); }}>✕</button></div>
+      <ol>{steps.map(([d, text], i) => <li key={i} className={d ? 'done' : undefined}><span className="tick" aria-hidden="true">{d ? '✓' : i + 1}</span><span>{text}</span><span className="sr">{d ? '(done)' : ''}</span></li>)}</ol>
+      <p className="mode onboarding-alt">No terminal? <strong>Create World</strong> above makes one here, with the vendors you pick.</p>
+      <AskYourAgent world={firstWorld} />
+    </section>
+  );
+}
+
+/** A World's pull-request previews (the setup-world Action makes them as branches), under its row: each opened as
+ *  yourself, removed by hand if its pull request never closes. Nothing shows while a World has none. */
+function PreviewRows({ world, readOnly }: { world: string; readOnly: boolean }): React.JSX.Element | null {
+  type Row = { label: string; createdAt: string; expiresAt: string | null; open: string; live: boolean };
+  const [rows, setRows] = useState<Row[]>([]);
+  const load = useCallback(() => { void door(`/-/worlds/${world}/previews`).then(async (r) => { if (r.ok) setRows(((await r.json()) as { previews: Row[] }).previews); }).catch(() => undefined); }, [world]);
+  useEffect(load, [load]);
+  const remove = async (label: string): Promise<void> => {
+    if (!(await confirmAct({ title: `Remove the preview ${label}?`, body: "Its branch and everything written to it go; the pull request's next run makes a new one.", action: 'Remove preview', danger: true }))) return;
+    if (await act(`/-/worlds/${world}/previews/${label}`, { method: 'DELETE' }, `Removed ${label}`)) load();
+  };
+  if (!rows.length) return null;
+  return (
+    <tr className="preview-row">
+      <td colSpan={5}>
+        <span className="mode">Previews</span>
+        <ul className="previews">{rows.map((p) => (
+          <li key={p.label}>
+            <code>{p.label}</code>
+            <span className="mode" title={when(p.createdAt)}>{ago(p.createdAt)}{p.expiresAt ? <> · ends <span title={when(p.expiresAt)}>{day(p.expiresAt)}</span></> : null}{p.live ? null : ' · not running'}</span>
+            {p.live ? <a href={p.open}>Open</a> : null}
+            {!readOnly ? <button type="button" className="link-button" onClick={() => void remove(p.label)}>Remove</button> : null}
+          </li>
+        ))}</ul>
+      </td>
+    </tr>
+  );
+}
+
+/** Get started's other way: the same setup as a prompt for the person's coding agent (packages/cli/src/agent-prompt.ts, the
+ *  one text), with this platform and the org's first World filled in, copied whole. */
+function AskYourAgent({ world }: { world?: string | undefined }): React.JSX.Element {
+  const text = agentPrompt({ platform: ORIGIN, ...(world ? { world } : {}) });
+  const copy = (): void => { void navigator.clipboard?.writeText(text).then(() => toast('Copied the prompt: paste it into your coding agent'), () => toast('Select the prompt and copy it', 'error')); };
+  return (
+    <details className="ask-agent">
+      <summary><span>Or ask your coding agent to do all of this</span><button type="button" onClick={(e) => { e.preventDefault(); copy(); }}>Copy prompt</button></summary>
+      <pre>{text}</pre>
+      <p className="mode">Paste it into Claude Code, Cursor, VS Code or Codex. You approve the sign-in in your browser; the agent does the rest.</p>
+    </details>
+  );
+}
+
+applyTheme(); // the person's theme before the first paint
+createRoot(ROOT).render(<><App /><Toaster /><ConfirmHost /><MenuDismiss /></>);