@volter/world-console 2.0.5 → 2.0.7

package/client/console.css

@@ -197,3 +197,27 @@ section.pitch { background: none; border: 0; box-shadow: none; padding: 0; margi
 /* a phone: the top bar keeps the menu, the mark, where you are, the way back as an arrow and Sign out */
 @media (max-width: 720px) { main.app > header .mode, main.app > header .back-link .back-text { display: none; } main.app > header .back-link { flex: none; } }
 @media (max-width: 720px) { .head-actions .clock { flex-wrap: wrap; max-width: 100%; } }
+
+/* changesets, reviewed as pull requests are: a status word, the changes by vendor, checks, approvals, receipts */
+.badge.cs-done { background: var(--accent-soft); color: var(--ink); }
+.badge.cs-good { color: var(--ok); border-color: var(--ok); }
+.badge.cs-warn { background: var(--warn-soft); color: var(--warn); }
+.badge.cs-bad { background: var(--danger-soft); color: var(--danger-text); }
+.changeset-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
+.changeset-head h3 { margin: 0 0 4px; }
+.changeset-actions { display: flex; gap: 8px; flex-wrap: wrap; }
+.changeset h4 { margin: 22px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
+.changeset .narration { white-space: pre-wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; font-size: 13px; }
+.changeset .stale { opacity: 0.75; }
+.changeset ul.checks, .changeset ul.approvals, .changeset ul.receipts { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 6px; }
+.crumbs-line { margin: 0 0 12px; font-size: 13px; }
+/* the branches page: its words, and New branch beside them */
+.branches-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
+.branches-head .lede { margin-top: 0; }
+/* a dialog's text box reads in the page's face, not the browser's monospace default */
+dialog textarea { font: inherit; width: 100%; }
+/* a set of choices (a branch's moment): its legend a label, its options one per line */
+fieldset.choice { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; min-width: 0; }
+fieldset.choice > legend { padding: 0; margin-bottom: 4px; color: var(--muted); font-size: 12.5px; }
+fieldset.choice > label.check { display: flex; align-items: flex-start; gap: 8px; color: var(--ink); font-size: 13px; }
+fieldset.choice > label.check input { margin-top: 3px; }

package/client/console.tsx

@@ -4,7 +4,7 @@
 // answer, and offers nothing `volter world` or `curl` could not do. Locators are roles and text.
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Background, BackgroundVariant, Controls, MiniMap, NodeToolbar, Panel, Position, ReactFlow, ReactFlowProvider, useNodesState, useReactFlow, type Node, type NodeProps } from '@xyflow/react';
-import { applyTheme, ThemeChoice, At, Brand, ConfirmHost, MenuDismiss, confirmAct, CopyField, counted, Dialog, DrawerButton, failure, listed, Mark, Menu, Pending, Toaster, toast, useDoor as useKitDoor, vendorName, when, ago, type Load } from './kit/kit.tsx';
+import { applyTheme, ThemeChoice, At, Brand, ConfirmHost, MenuDismiss, confirmAct, CopyField, counted, Dialog, DrawerButton, Empty, failure, listed, Mark, Menu, Pending, Toaster, toast, useDoor as useKitDoor, vendorName, when, ago, type Load } from './kit/kit.tsx';
 import { createRoot } from 'react-dom/client';
 import { agentPrompt } from '../../../packages/cli/src/agent-prompt.ts';
 
@@ -86,7 +86,7 @@ const actorOf = (e: Entry): string => (e.actor ? `${e.actor.kind}${e.actor.id ?
 const traceOf = (tp?: string): { trace: string; span: string } | null => { const m = /^[0-9a-f]{2}-([0-9a-f]{32})-([0-9a-f]{16})-[0-9a-f]{2}$/.exec(tp ?? ''); return m ? { trace: m[1]!, span: m[2]! } : null; };
 
 /** A past moment of a World, opened by this tab: a branch the host made, held with its tokens for the tab's life. */
-type Snapshot = { name: string; parent: string; token: string; readToken: string; at: string; expiresAt: string | null; /** where the parent's pages live, the way back */ parentOrigin?: string; /** this tab's own "View as of" made it here: only such a branch is ever removed */ made?: boolean };
+type Snapshot = { name: string; parent: string; token: string; readToken: string; at: string; expiresAt: string | null; /** where the parent's pages live, the way back */ parentOrigin?: string; /** this tab's own "View as of" made it here: only such a branch is ever removed */ made?: boolean; /** the branch's own origin, where its pages live */ origin?: string };
 const SNAP_KEY = 'volter.console.snapshots';
 const snapshots = (): Record<string, Snapshot> => { try { return JSON.parse(sessionStorage.getItem(SNAP_KEY) ?? '{}') as Record<string, Snapshot>; } catch { return {}; } };
 // on a World origin a snapshot's tokens stay in this module (no frame can reach it), never in storage
@@ -168,6 +168,12 @@ const WORLD_PART = /^[a-z0-9](?:[a-z0-9]|-(?!-))*$/i;
  *  encoded `/` or `..`) ever reaches a door's path. */
 const worldOf = (o?: string, w?: string): string => (o && w && WORLD_PART.test(o) && WORLD_PART.test(w) ? `${o}/${w}` : '');
 function go(parts: string[]): void { window.history.pushState(null, '', `${BASE}/${parts.map(encodeURIComponent).join('/')}`); window.dispatchEvent(new PopStateEvent('popstate')); }
+/** A page of a branch this tab holds: at the branch's own origin when it has one (this origin serves its World only), carrying its read token. */
+function goBranch(branch: string, parts: string[]): void {
+  const there = worldOriginOf(snapshots()[branch]?.origin);
+  if (there && there !== ORIGIN) { moveTo(there, snapshotToken(branch), branch, `${BASE}/${parts.map(encodeURIComponent).join('/')}`); return; }
+  go(parts);
+}
 
 /** A World this machine serves on loopback opens its session for its own page with no token (served-world.ts
  *  localSession): nothing is ever pasted, and a restart or a rotated token is picked up by asking again. Asked of the
@@ -325,9 +331,9 @@ function App(): React.JSX.Element {
     const back = worldOriginOf(s.parentOrigin);
     if (back && back !== ORIGIN) { forgetSnapshot(s.name); window.location.assign(`${back}${BASE}/${s.parent}#close=${encodeURIComponent(s.name)}`); return; }
     // the branch goes with the way back: a snapshot is a throwaway World, not something to leave running (one this
-    // tab made; a carried one is only left)
-    if (s.made) await door(worldToken(s.parent), `/-/${s.parent}/branches/${s.name}`, { method: 'DELETE' }).catch(() => null);
-    forgetSnapshot(s.name); go(s.parent.split('/'));
+    // tab made as a snapshot; a carried one, or a branch made on the Branches page, is only left)
+    if (s.made) { await door(worldToken(s.parent), `/-/${s.parent}/branches/${s.name}`, { method: 'DELETE' }).catch(() => null); forgetSnapshot(s.name); }
+    go(s.parent.split('/'));
   };
   return (
     <main className={name ? 'app' : undefined}>
@@ -421,13 +427,16 @@ type Placed = { twin: string; position: number; entry: Entry };
 type Timeline = { entries: Placed[]; next: string | null };
 type Diff = { base: { id: string; at: string | null }; changes: Array<{ twin: string; entry: Entry }> };
 type Branch = { name: string; at?: { instant?: string }; createdAt: string; expiresAt: string | null };
+/** The branches door: the host's snapshots of this World, and the World's own named branches (`volter world branch`),
+ *  one of which, `checkedOut`, is the one this serve holds. */
+type BranchesDoor = { branches: Branch[]; checkedOut?: string; named?: Array<{ name: string; running: boolean }> };
 /** What the World's session answered: its scope; `unknown` when the host has no session door (a write then says). */
 type Scope = 'pending' | 'read' | 'write' | 'unknown';
 
 // A World's page is laid out as Neon's console is (Volter is Neon for every SaaS, docs/concepts/the-model.md): the
 // World's own pages, the branch picker, then the branch's pages and its services, which here are its vendors, each a
 // sibling. All screens is a canvas app's page, the whole window. The older page names still open their page.
-const TABS = [['overview', 'Dashboard'], ['branches', 'Branches'], ['settings', 'Settings'], ['branch', 'Overview'], ['changes', 'Changes'], ['activity', 'Activity'], ['vendors', 'Vendors'], ['canvas', 'All screens']] as const;
+const TABS = [['overview', 'Dashboard'], ['branches', 'Branches'], ['settings', 'Settings'], ['branch', 'Overview'], ['changes', 'Changes'], ['changesets', 'Changesets'], ['activity', 'Activity'], ['vendors', 'Vendors'], ['canvas', 'All screens']] as const;
 type Tab = (typeof TABS)[number][0];
 const TAB_ALIASES: Record<string, Tab> = { dashboard: 'overview', mirrors: 'vendors', screens: 'canvas', timeline: 'activity', monitoring: 'activity', trace: 'activity', operations: 'settings' };
 /** A vendor's own screens, at the twin's place in the World: the vendor's site (served-world.ts, the wire's page fallback). */
@@ -462,14 +471,17 @@ function WorldView({ name, token, twin, tab, arg, admin, snapshot, onReturn, ope
   const [scope, setScope] = useState<Scope>('pending');
   // why the session was not opened (the wall says it, with a way to try again), and that try
   const [sessionError, setSessionError] = useState<string | null>(null); const [attempt, setAttempt] = useState(0);
+  // whom an approval from this session is recorded as; null: the page names them (a session the World's token opened)
+  const [signsAs, setSignsAs] = useState<string | null>(null);
   // biome-ignore lint/correctness/useExhaustiveDependencies: `attempt` is the wall's "Try again"
   useEffect(() => {
     let live = true; setSessionError(null);
     void door(token, `/-/${name}/session`, { method: 'POST' }).then(async (r) => {
-      const b = (await r.json().catch(() => ({}))) as { scope?: string; origin?: string; error?: string; who?: string; issuer?: string };
+      const b = (await r.json().catch(() => ({}))) as { scope?: string; origin?: string; error?: string; who?: string; issuer?: string; signsAs?: string | null };
       // the person a platform's pass opened this session for: the page says who is signed in, and the way back to it
       keepPortal(b.issuer);
       if (b.who) onWho?.(b.who);
+      setSignsAs(typeof b.signsAs === 'string' ? b.signsAs : null);
       // the World's session lives at its own origin: its pages go there
       // the host's own answer names the World's origin (a console apart is on another host and port): an http(s) origin only
       const own = httpOrigin(b.origin)?.origin;
@@ -493,7 +505,7 @@ function WorldView({ name, token, twin, tab, arg, admin, snapshot, onReturn, ope
   const [clockVersion, setClockVersion] = useState(0);
   const clock = useDoor<Clock>(token, `/-/${name}/clock`, tick + clockVersion);
   const twins = useDoor<{ twins: Twin[] }>(token, `/-/${name}/twins`);
-  const branches = useDoor<{ branches: Branch[] }>(token, `/-/${name}/branches`, clockVersion);
+  const branches = useDoor<BranchesDoor>(token, `/-/${name}/branches`, clockVersion);
   const map = useDoor<WorldMap>(token, `/-/${name}/map`, Math.floor(tick / 2));
   // branches are the host's: a host that does not answer the door has no "as of", and the console shows none
   const hasBranches = !(branches.state === 'error' && (branches.status === 404 || branches.status === 405));
@@ -527,6 +539,7 @@ function WorldView({ name, token, twin, tab, arg, admin, snapshot, onReturn, ope
           <p className="side-group">Branch</p>
           {item('branch')}
           {item('changes')}
+          {item('changesets')}
           {item('activity')}
           <p className="side-group">Vendors</p>
           <a href={`${BASE}/${name}/~/canvas`} className="all-screens" onClick={open(['~', 'canvas'])}><span className="mark" aria-hidden="true">▦</span><span>All screens</span></a>
@@ -559,6 +572,7 @@ function WorldView({ name, token, twin, tab, arg, admin, snapshot, onReturn, ope
         {current === 'activity' && tab === 'trace' ? <Trace name={name} token={token} id={arg ?? ''} /> : null}
         {current === 'activity' && tab !== 'trace' ? <TimelineTab name={name} token={token} vendors={vendors} /> : null}
         {current === 'changes' ? <Changes name={name} token={token} /> : null}
+        {current === 'changesets' ? <Changesets name={name} token={token} signsAs={signsAs} canWrite={canWrite && !snapshot} rooted={map.state === 'ok' ? map.data.twins.filter((t) => t.root).map((t) => t.twin) : []} {...(arg ? { open: arg } : {})} refused={refused} /> : null}
         {current === 'branches' ? <Overview name={name} token={token} canWrite={canWrite} branches={hasBranches ? branches : null} opens={opens} onBranchesChanged={() => setClockVersion((v) => v + 1)} refused={refused} /> : null}
         {current === 'settings' ? <Operations name={name} token={token} admin={admin} canWrite={canWrite} refused={refused} onRemoved={onRemoved} /> : null}
       </div>
@@ -602,13 +616,13 @@ function Connect({ name }: { name: string }): React.JSX.Element {
 
 /** The branch picker, between the World's pages and the branch's (where Neon's sits): this World live, or one of the
  *  host's branches of it; a snapshot names its parent as the way back. */
-function BranchPicker({ name, snapshot, branches, opens }: { name: string; snapshot: Snapshot | null; branches: Load<{ branches: Branch[] }> | null; opens: (name: string) => boolean }): React.JSX.Element {
+function BranchPicker({ name, snapshot, branches, opens }: { name: string; snapshot: Snapshot | null; branches: Load<BranchesDoor> | null; opens: (name: string) => boolean }): React.JSX.Element {
   const short = (n: string): string => n.split('/').pop() ?? n;
   const live = snapshot?.parent ?? name;
   const others = branches?.state === 'ok' ? branches.data.branches.filter((b) => b.name !== name) : [];
   return (
     <details className="menu branch-picker">
-      <summary><svg className="branch-glyph" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path fill="currentColor" d="M5 3.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm0 2.122a2.25 2.25 0 1 0-1.5 0v5.256a2.25 2.25 0 1 0 1.5 0V9.5h4.25A2.25 2.25 0 0 0 11.5 7.25v-.878a2.25 2.25 0 1 0-1.5 0v.878a.75.75 0 0 1-.75.75H5V5.372ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm6.5-9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z" /></svg><span className="branch-name">{snapshot ? short(name) : short(live)}</span><span className="badge">{snapshot ? 'snapshot' : 'live'}</span></summary>
+      <summary><svg className="branch-glyph" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path fill="currentColor" d="M5 3.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm0 2.122a2.25 2.25 0 1 0-1.5 0v5.256a2.25 2.25 0 1 0 1.5 0V9.5h4.25A2.25 2.25 0 0 0 11.5 7.25v-.878a2.25 2.25 0 1 0-1.5 0v.878a.75.75 0 0 1-.75.75H5V5.372ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm6.5-9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z" /></svg><span className="branch-name">{snapshot ? short(name) : (branches?.state === 'ok' && branches.data.checkedOut) || short(live)}</span><span className="badge">{snapshot ? 'snapshot' : 'live'}</span></summary>
       <div className="popover">
         <p className="mode">Branch</p>
         <ul className="branch-list">
@@ -616,11 +630,21 @@ function BranchPicker({ name, snapshot, branches, opens }: { name: string; snaps
           {snapshot ? <li><a href={`${BASE}/${name}`} aria-current="page" onClick={(e) => e.preventDefault()}>{short(name)} <span className="mode">as of <At iso={snapshot.at} /></span></a></li> : null}
           {others.map((b) => (
             <li key={b.name}>{opens(b.name)
-              ? <a href={`${BASE}/${b.name}`} onClick={(e) => { e.preventDefault(); go(b.name.split('/')); }}>{short(b.name)} <span className="mode">{b.at?.instant ? <>as of <At iso={b.at.instant} /></> : 'copy'}</span></a>
+              ? <a href={`${BASE}/${b.name}`} onClick={(e) => { e.preventDefault(); goBranch(b.name, b.name.split('/')); }}>{short(b.name)} <span className="mode">{b.at?.instant ? <>as of <At iso={b.at.instant} /></> : 'copy'}</span></a>
               : <span className="mode" title="Its token was handed to whoever made it">{short(b.name)}</span>}</li>
           ))}
         </ul>
-        {branches?.state === 'ok' && others.length === 0 && !snapshot ? <p className="mode">No branches yet. “View an earlier moment…” opens one.</p> : null}
+        {branches?.state === 'ok' && (branches.data.named?.length ?? 0) > 1 ? (
+          <>
+            <p className="mode">This World's branches</p>
+            <ul className="branch-list">
+              {branches.data.named!.map((b) => (
+                <li key={b.name}><span aria-current={b.name === branches.data.checkedOut ? 'true' : undefined}>{b.name} <span className="mode">{b.name === branches.data.checkedOut ? 'served here' : <code>volter world checkout {b.name}</code>}</span></span></li>
+              ))}
+            </ul>
+          </>
+        ) : null}
+        {branches?.state === 'ok' && others.length === 0 && !snapshot && (branches.data.named?.length ?? 0) <= 1 ? <p className="mode">No branches yet. “View an earlier moment…” opens one.</p> : null}
       </div>
     </details>
   );
@@ -689,7 +713,7 @@ function BranchOverview({ name, token, map, vendors, tick }: { name: string; tok
  *  Neon with how to connect and the branches. A World's live preview is its vendors' own screens; beside them, how an
  *  app connects and the branches; under them, what just happened. Counts sit with what they count, not in a row. */
 const THUMB_SCALE = 0.2;
-function WorldOverview({ name, token, map, vendors, twins, session, branches, canWrite, tick, snapshotOf }: { name: string; token: string; map: Load<WorldMap>; vendors: string[]; twins: Load<{ twins: Twin[] }>; session: MirrorSession; branches: Load<{ branches: Branch[] }> | null; canWrite: boolean; tick: number; /** the World this one is a snapshot of, when it is one */ snapshotOf?: string }): React.JSX.Element {
+function WorldOverview({ name, token, map, vendors, twins, session, branches, canWrite, tick, snapshotOf }: { name: string; token: string; map: Load<WorldMap>; vendors: string[]; twins: Load<{ twins: Twin[] }>; session: MirrorSession; branches: Load<BranchesDoor> | null; canWrite: boolean; tick: number; /** the World this one is a snapshot of, when it is one */ snapshotOf?: string }): React.JSX.Element {
   const diff = useDoor<Diff>(token, `/-/${name}/diff`, Math.floor(tick / 2));
   const recent = useDoor<Timeline>(token, `/-/${name}/timeline?limit=8`, tick);
   const rows = map.state === 'ok' ? map.data.twins : [];
@@ -856,7 +880,7 @@ function AsOf({ name, token, clock, refused }: { name: string; token: string; cl
 }
 
 /** Overview: what the World holds, one card per twin (a resource explorer), and the branches cut from it. */
-function Overview({ name, token, canWrite, branches, opens, onBranchesChanged, refused }: { name: string; token: string; canWrite: boolean; branches: Load<{ branches: Branch[] }> | null; opens: (name: string) => boolean; onBranchesChanged: () => void; refused: (r: Response) => void }): React.JSX.Element {
+function Overview({ name, token, canWrite, branches, opens, onBranchesChanged, refused }: { name: string; token: string; canWrite: boolean; branches: Load<BranchesDoor> | null; opens: (name: string) => boolean; onBranchesChanged: () => void; refused: (r: Response) => void }): React.JSX.Element {
   const map = useDoor<WorldMap>(token, `/-/${name}/map`);
   const [note, setNote] = useState<string | null>(null);
   const remove = async (b: string): Promise<void> => {
@@ -869,7 +893,7 @@ function Overview({ name, token, canWrite, branches, opens, onBranchesChanged, r
   const total = map.state === 'ok' ? map.data.twins.reduce((n, t) => n + t.resources.reduce((m, x) => m + x.count, 0), 0) : 0;
   // the Branches tab: this World's copies; what it holds per vendor is the Vendors tab's list (kept here for a host
   // without branches, where this tab is not shown)
-  if (branches) return <BranchList name={name} token={token} canWrite={canWrite} branches={branches} opens={opens} note={note} remove={remove} />;
+  if (branches) return <BranchList name={name} token={token} canWrite={canWrite} branches={branches} opens={opens} note={note} remove={remove} onChanged={onBranchesChanged} refused={refused} />;
   return (
     <>
       <h3>Map</h3>
@@ -904,14 +928,57 @@ function Overview({ name, token, canWrite, branches, opens, onBranchesChanged, r
   );
 }
 
-/** A World's branches: copies of it, each as of a moment (a snapshot "as of" is one, short-lived), openable and removable. */
-function BranchList({ name, canWrite, branches, opens, note, remove }: { name: string; token: string; canWrite: boolean; branches: Load<{ branches: Branch[] }>; opens: (name: string) => boolean; note: string | null; remove: (b: string) => Promise<void> }): React.JSX.Element {
-  // as Neon's Branches page: what a branch is for, then every branch with its parent, the moment it copies and its life
+/** A World's branches, as a database's are (Neon's Branches page): each a copy of it as of a moment, made here (as of now
+ *  or a moment you pick, for as long as you say), opened read-only in this tab, compared with its parent (what it changed
+ *  since it branched), reset to its parent as it is now, or removed. Each is the World's own branches door. */
+function BranchList({ name, token, canWrite, branches, opens, note, remove, onChanged, refused }: { name: string; token: string; canWrite: boolean; branches: Load<BranchesDoor>; opens: (name: string) => boolean; note: string | null; remove: (b: string) => Promise<void>; onChanged: () => void; refused: (r: Response) => void }): React.JSX.Element {
   const short = (n: string): string => n.split('/').pop() ?? n;
   const list = branches.state === 'ok' ? branches.data.branches : [];
+  const [making, setMaking] = useState(false); const [busy, setBusy] = useState(false); const [error, setError] = useState<string | null>(null);
+  const [label, setLabel] = useState(''); const [when, setWhen] = useState<'now' | 'at'>('now'); const [at, setAt] = useState(''); const [hours, setHours] = useState('24');
+  // made here: kept with its tokens so it opens in this tab; not `made` (a snapshot's "Return to live" never removes it: it lives as long as it was given)
+  const make = async (body: Record<string, unknown>, opened: string): Promise<{ name: string } | string> => {
+    const r = await door(token, `/-/${name}/branches`, { method: 'POST', body: JSON.stringify(body) }).catch(() => null);
+    if (!r) return `${ORIGIN} did not answer`;
+    if (!r.ok) { refused(r); return await failure(r); }
+    const b = (await r.json()) as { name: string; token?: string; readToken: string; expiresAt: string | null; origin?: string };
+    keepSnapshot({ name: b.name, parent: name, token: b.token ?? '', readToken: b.readToken, at: opened, expiresAt: b.expiresAt ?? null, parentOrigin: ORIGIN, ...(b.origin ? { origin: b.origin } : {}) });
+    return b;
+  };
+  const create = async (e: React.FormEvent): Promise<void> => {
+    e.preventDefault(); setError(null);
+    const instant = when === 'at' ? new Date(at) : null;
+    if (instant && Number.isNaN(instant.getTime())) { setError('Pick a date and time, or make it as of now.'); return; }
+    if (instant && instant.getTime() > Date.now()) { setError('A branch is made as of now or a moment before it.'); return; }
+    const ttl = Math.round(Number(hours) * 3600);
+    setBusy(true);
+    const b = await make({ ttl, ...(instant ? { at: { instant: instant.toISOString() } } : { live: true }), ...(label.trim() ? { label: label.trim() } : {}) }, (instant ?? new Date()).toISOString());
+    setBusy(false);
+    if (typeof b === 'string') { setError(b); return; }
+    setMaking(false); setLabel(''); toast(`Made ${short(b.name)}`); onChanged();
+  };
+  const reset = async (b: Branch): Promise<void> => {
+    if (!(await confirmAct({ title: `Reset ${short(b.name)} to ${short(name)}?`, body: `A fresh copy of ${short(name)} as it is now replaces it, with the same label and the time it had left; what was written to it goes. The copy has a new address and new keys: an app, a CI job or a pull request's preview that holds this branch's must be given the new one.`, action: 'Reset branch', danger: true }))) return;
+    const left = b.expiresAt ? Math.max(3600, Math.round((Date.parse(b.expiresAt) - Date.now()) / 1000)) : 86_400;
+    // a branch is named `<parent>-<label>-<4 hex>`: its label is what lies between
+    const own = short(b.name).startsWith(`${short(name)}-`) ? short(b.name).slice(short(name).length + 1) : '';
+    const labelOf = /^([a-z0-9][a-z0-9-]*)-[0-9a-f]{4}$/.exec(own)?.[1];
+    const fresh = await make({ ttl: left, live: true, ...(labelOf && !labelOf.startsWith('at-') ? { label: labelOf } : {}) }, new Date().toISOString());
+    if (typeof fresh === 'string') { toast(`Reset ${short(b.name)}: ${fresh}`, 'error'); return; }
+    const r = await door(token, `/-/${name}/branches/${b.name}`, { method: 'DELETE' }).catch(() => null);
+    if (r?.ok) forgetSnapshot(b.name);
+    toast(r?.ok ? `Reset: ${short(fresh.name)} is ${short(name)} as it is now` : `Made ${short(fresh.name)}; ${short(b.name)} was not removed`); onChanged();
+  };
+  const menu = (b: Branch): Array<{ label: string; onSelect: () => void; danger?: boolean }> => [
+    ...(opens(b.name) ? [{ label: 'Compare with parent', onSelect: () => goBranch(b.name, [...b.name.split('/'), '~', 'changes']) }] : []),
+    ...(canWrite ? [{ label: 'Reset to parent…', onSelect: () => void reset(b) }, { label: 'Delete…', danger: true, onSelect: () => void remove(b.name) }] : []),
+  ];
   return (
     <div aria-labelledby="branches">
-      <p className="lede">Branch this World to look at it as it was, or to change it without touching <b>{short(name)}</b>. {canWrite ? '“View an earlier moment…” above makes one as the World was then.' : ''}</p>
+      <div className="branches-head">
+        <p className="lede">Branch this World to look at it as it was, or to change it without touching <b>{short(name)}</b>. A branch made here opens read-only in this tab; its parent removes it.</p>
+        {canWrite ? <button type="button" className="primary" onClick={() => { setError(null); setAt(localInput(new Date().toISOString())); setMaking(true); }}>New branch</button> : null}
+      </div>
       {note ? <p role="status">{note}</p> : null}
       <Pending load={branches} what="the branches" />
       {branches.state === 'ok' ? (
@@ -919,25 +986,58 @@ function BranchList({ name, canWrite, branches, opens, note, remove }: { name: s
           <table className="dense" aria-label="Branches">
             <thead><tr><th id="branches">Branch</th><th>Parent</th><th>As of</th><th>Made</th><th>Goes away</th><th /></tr></thead>
             <tbody>
-              <tr><td><b>{short(name)}</b> <span className="badge">default</span></td><td className="mode">—</td><td className="mode">live</td><td className="mode">—</td><td className="mode">kept</td><td /></tr>
-              {list.map((b) => (
+              <tr><td><b>{branches.data.checkedOut ?? short(name)}</b> <span className="badge">{branches.data.checkedOut ? 'served here' : 'default'}</span></td><td className="mode">—</td><td className="mode">live</td><td className="mode">—</td><td className="mode">kept</td><td /></tr>
+              {list.map((b) => {
+                const items = menu(b);
+                return (
+                  <tr key={b.name}>
+                    <td><b>{short(b.name)}</b></td>
+                    <td>{short(name)}</td>
+                    <td>{b.at?.instant ? <At iso={b.at.instant} /> : 'when it was made'}</td>
+                    <td><At iso={b.createdAt} /></td>
+                    <td>{b.expiresAt ? <At iso={b.expiresAt} /> : 'kept'}</td>
+                    <td className="num row-actions">
+                      {opens(b.name) ? <button type="button" aria-label={`Open ${b.name}`} onClick={() => goBranch(b.name, b.name.split('/'))}>Open</button> : <span className="mode" title="Its token was handed to whoever made it">opened by whoever made it</span>}
+                      {items.length ? <Menu label={`More for ${short(b.name)}`} items={items} /> : null}
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+          {list.length === 0 ? <p className="mode pad">No snapshots yet.</p> : null}
+        </div>
+      ) : null}
+      {branches.state === 'ok' && (branches.data.named?.length ?? 0) > 0 ? (
+        <>
+        <p className="lede">This World's own branches (<code>volter world branch</code>). One runs at a time; this page shows the one served here. Another is served by stopping this serve, <code>volter world checkout &lt;branch&gt;</code>, and serving again.</p>
+        <div className="block">
+          <table className="dense" aria-label="World branches">
+            <thead><tr><th>Branch</th><th>State</th></tr></thead>
+            <tbody>
+              {branches.data.named!.map((b) => (
                 <tr key={b.name}>
-                  <td><b>{short(b.name)}</b></td>
-                  <td>{short(name)}</td>
-                  <td>{b.at?.instant ? <At iso={b.at.instant} /> : 'when it was made'}</td>
-                  <td><At iso={b.createdAt} /></td>
-                  <td>{b.expiresAt ? <At iso={b.expiresAt} /> : 'kept'}</td>
-                  <td className="num">
-                    {opens(b.name) ? <button type="button" aria-label={`Open ${b.name}`} onClick={() => go(b.name.split('/'))}>Open</button> : <span className="mode" title="Its token was handed to whoever made it">opened by whoever made it</span>}{' '}
-                    {canWrite ? <button type="button" aria-label={`Delete ${b.name}`} onClick={() => void remove(b.name)}>Delete</button> : null}
-                  </td>
+                  <td><b>{b.name}</b>{b.name === branches.data.checkedOut ? <> <span className="badge">served here</span></> : null}</td>
+                  <td className="mode">{b.running ? 'running' : 'stopped'}</td>
                 </tr>
               ))}
             </tbody>
           </table>
-          {list.length === 0 ? <p className="mode pad">No branches yet.</p> : null}
         </div>
+        </>
       ) : null}
+      <Dialog open={making} onClose={() => { if (!busy) setMaking(false); }} title={`New branch of ${short(name)}`} footer={<><button type="button" onClick={() => setMaking(false)} disabled={busy}>Cancel</button><button type="submit" form="new-branch" className="primary" disabled={busy}>{busy ? 'Making…' : 'Make branch'}</button></>}>
+        <form id="new-branch" onSubmit={(e) => void create(e)} className="stack">
+          <label><span>Name <span className="mode">(optional)</span></span><input name="branchLabel" value={label} onChange={(e) => setLabel(e.target.value.toLowerCase())} placeholder="checkout-flow" pattern="[a-z0-9][a-z0-9-]{0,23}" maxLength={24} /></label>
+          <fieldset className="choice"><legend>As of</legend>
+            <label className="check"><input type="radio" name="branchWhen" checked={when === 'now'} onChange={() => setWhen('now')} /> <span>Now: the World as it is, its clock running on</span></label>
+            <label className="check"><input type="radio" name="branchWhen" checked={when === 'at'} onChange={() => setWhen('at')} /> <span>A moment before now: the World as it was then, its clock stopped there</span></label>
+            {when === 'at' ? <input type="datetime-local" aria-label="As of" value={at} max={localInput(new Date().toISOString())} onChange={(e) => setAt(e.target.value)} /> : null}
+          </fieldset>
+          <label><span>Goes away after</span><select name="branchLife" value={hours} onChange={(e) => setHours(e.target.value)}><option value="1">1 hour</option><option value="24">1 day</option><option value="72">3 days</option><option value="168">7 days</option></select></label>
+          {error ? <p role="alert">{error}</p> : null}
+        </form>
+      </Dialog>
     </div>
   );
 }
@@ -1278,22 +1378,171 @@ function CanvasSurface({ name, twins, session, retry, snapshot, back }: { name:
 }
 
 /** What this World changed since its base — what a changeset would cut — in a compare view, by twin. */
-function Changes({ name, token }: { name: string; token: string }): React.JSX.Element {
-  const diff = useDoor<Diff>(token, `/-/${name}/diff`);
-  const byTwin = useMemo(() => {
-    const m = new Map<string, Entry[]>();
-    if (diff.state === 'ok') for (const c of diff.data.changes) m.set(c.twin, [...(m.get(c.twin) ?? []), c.entry]);
-    return [...m.entries()];
-  }, [diff]);
+/** A changeset as the World's changesets door answers it: what it does at each vendor, the checks it ran, who signed
+ *  which bytes, and whether it went to the real vendors (with a receipt for each change). */
+type ChangesetView = {
+  name: string; message?: string; narration?: string; createdAt: string; contentHash: string; /** the body's hash as it stands (GET …/changesets) */ currentHash?: string;
+  actions: Array<{ service: string; action: Omit<Entry, 'service' | 'op'> & { op?: string; operation?: string } }>;
+  verification: { at: string; contentHash: string; passed: boolean; results: Array<{ id: string; service: string; passed: boolean; actual?: unknown }>; refusals?: Array<{ service: string; check: string; reason: string }> } | null;
+  approvals: Array<{ principal: string; at: string; contentHash: string; note?: string }>;
+  applied: { at: string; outcome: 'applied' | 'partial' | 'refused'; refusal?: string[]; receipts: Array<{ actionId: string; service: string; status: string; externalId?: string; url?: string; error?: string }> } | null;
+};
+/** Its actions as the Changes view shows entries: by vendor. */
+const changesetGroups = (c: ChangesetView): Array<[string, Entry[]]> => {
+  const m = new Map<string, Entry[]>();
+  for (const a of c.actions) m.set(a.service, [...(m.get(a.service) ?? []), { ...a.action, service: a.service, op: a.action.op ?? a.action.operation ?? '' } as Entry]);
+  return [...m.entries()];
+};
+/** Where it stands, in a word, and the state behind the word: a verification or an approval of other bytes is stale. */
+function changesetStatus(c: ChangesetView): { label: string; tone: 'done' | 'good' | 'warn' | 'bad' | 'plain' } {
+  if (c.applied) return c.applied.outcome === 'applied' ? { label: 'Deployed', tone: 'done' } : c.applied.outcome === 'partial' ? { label: 'Partly deployed', tone: 'warn' } : { label: 'Deploy refused', tone: 'bad' };
+  const now = c.currentHash ?? c.contentHash;
+  const signed = c.approvals.filter((a) => a.contentHash === now).length;
+  const checked = c.verification && c.verification.contentHash === now ? c.verification : null;
+  if (checked && !checked.passed) return { label: 'Checks failed', tone: 'bad' };
+  if (signed > 0) return { label: `Approved by ${signed}`, tone: 'good' };
+  if (checked) return { label: 'Verified', tone: 'good' };
+  return { label: 'Not verified', tone: 'plain' };
+}
+
+/** THE CHANGESETS: what this World would do, cut into reviewable pieces, listed as a repository lists pull requests;
+ *  each one's page reviews it (its changes by vendor, its checks, its approvals) and, where the World has a real root,
+ *  deploys it. Every button is the World's own door; a refusal is the door's words. */
+function Changesets({ name, token, signsAs, canWrite, rooted, open: opened, refused }: { name: string; token: string; signsAs: string | null; canWrite: boolean; rooted: string[]; open?: string; refused: (r: Response) => void }): React.JSX.Element {
+  const [version, setVersion] = useState(0);
+  const list = useDoor<{ changesets: ChangesetView[] }>(token, `/-/${name}/changesets`, version);
+  const at = (c: string) => (e: React.MouseEvent): void => { e.preventDefault(); go([...name.split('/'), '~', 'changesets', c]); };
+  if (opened) {
+    const c = list.state === 'ok' ? list.data.changesets.find((x) => x.name === opened) : undefined;
+    return (
+      <>
+        <p className="crumbs-line"><a href={`${BASE}/${name}/~/changesets`} onClick={(e) => { e.preventDefault(); go([...name.split('/'), '~', 'changesets']); }}>← Changesets</a></p>
+        <Pending load={list} what="the changesets" />
+        {list.state === 'ok' && !c ? <p className="mode">This World has no changeset named {opened}.</p> : null}
+        {c ? <ChangesetPage name={name} token={token} signsAs={signsAs} c={c} canWrite={canWrite} rooted={rooted} refused={refused} onChanged={() => setVersion((v) => v + 1)} /> : null}
+      </>
+    );
+  }
+  const rows = list.state === 'ok' ? [...list.data.changesets].sort((a, b) => b.createdAt.localeCompare(a.createdAt)) : [];
   return (
     <>
-      <Pending load={diff} what="the changes" />
-      {diff.state === 'ok' ? (
+      <p className="lede">A changeset is what this World changed, cut into a piece a person reviews: what it does at each vendor, the World's checks over it, and who approved it. Where the World has a real account behind a vendor, an approved changeset deploys there, with a receipt for each change.</p>
+      <Pending load={list} what="the changesets" />
+      {list.state === 'ok' && rows.length === 0 ? (
+        <Empty title="No changesets yet">
+          <p>Cut one from what your app did in this World: <code>volter world changeset -m "What it does and why"</code>. Pushed to a shared World, it shows up here for review.</p>
+        </Empty>
+      ) : null}
+      {rows.length > 0 ? (
+        <div className="block">
+          <table className="dense" aria-label="Changesets">
+            <thead><tr><th>Changeset</th><th>Changes</th><th>Made</th><th>Status</th></tr></thead>
+            <tbody>{rows.map((c) => {
+              const s = changesetStatus(c);
+              const counts = changesetGroups(c).map(([v, es]) => `${es.length} at ${vendorName(v)}`).join(' · ');
+              return (
+                <tr key={c.name}>
+                  <td><a href={`${BASE}/${name}/~/changesets/${c.name}`} onClick={at(c.name)}><b>{c.message ?? c.name}</b></a>{c.message ? <span className="mode mono"> {c.name}</span> : null}</td>
+                  <td className="mode">{counts || 'nothing'}</td>
+                  <td className="mode"><At iso={c.createdAt} /></td>
+                  <td><span className={`badge cs-${s.tone}`}>{s.label}</span></td>
+                </tr>
+              );
+            })}</tbody>
+          </table>
+        </div>
+      ) : null}
+    </>
+  );
+}
+
+/** One changeset, reviewed: its words, its changes by vendor, its checks, its approvals and its receipts; Verify,
+ *  Approve (signed as the person this session is for) and Deploy where they apply, each saying why when it does not. */
+function ChangesetPage({ name, token, signsAs, c, canWrite, rooted, refused, onChanged }: { name: string; token: string; signsAs: string | null; c: ChangesetView; canWrite: boolean; rooted: string[]; refused: (r: Response) => void; onChanged: () => void }): React.JSX.Element {
+  const [busy, setBusy] = useState<string | null>(null);
+  const [approving, setApproving] = useState(false); const [note, setNote] = useState(''); const [as, setAs] = useState('');
+  const s = changesetStatus(c);
+  const groups = changesetGroups(c);
+  const touches = groups.map(([v]) => v);
+  const deployable = touches.some((v) => rooted.includes(v));
+  const current = (h: string): boolean => h === (c.currentHash ?? c.contentHash);
+  const act = async (what: string, path: string, body?: unknown, done?: string): Promise<boolean> => {
+    setBusy(what);
+    try {
+      const r = await door(token, path, { method: 'POST', ...(body === undefined ? {} : { body: JSON.stringify(body) }) });
+      if (!r.ok) { refused(r); toast(`${what}: ${await failure(r)}`, 'error'); return false; }
+      if (done) toast(done);
+      onChanged(); return true;
+    } catch (e) { toast(`${what}: the World did not answer (${e instanceof Error ? e.message : String(e)})`, 'error'); return false; } finally { setBusy(null); }
+  };
+  const verify = (): void => { void act('Verify', `/-/${name}/changesets/${c.name}/verify`, undefined, 'Verified: the checks ran over it'); };
+  const approve = async (e: React.FormEvent): Promise<void> => { e.preventDefault(); if (await act('Approve', `/-/${name}/changesets/${c.name}/approve`, { ...(note.trim() ? { note: note.trim() } : {}), ...(signsAs === null && as.trim() ? { as: as.trim() } : {}) }, 'Approved')) { setApproving(false); setNote(''); } };
+  const deploy = async (): Promise<void> => {
+    if (!(await confirmAct({ title: `Deploy ${c.name} to the real vendors?`, body: <>It performs its {c.actions.length} change{c.actions.length === 1 ? '' : 's'} against the real account{touches.filter((v) => rooted.includes(v)).length === 1 ? '' : 's'} behind {listed(touches.filter((v) => rooted.includes(v)).map(vendorName))}. This cannot be taken back here.</>, action: 'Deploy', danger: true, typed: c.name }))) return;
+    void act('Deploy', `/-/${name}/deploy/${c.name}`, { confirm: c.name }, 'Deployed: the receipts are below');
+  };
+  // why a button is off, in words: the reader's scope, what already happened, or the World's own rule
+  const offWhy = !canWrite ? 'This session reads the World; it changes nothing' : c.applied ? 'Already deployed' : null;
+  return (
+    <div className="changeset" aria-labelledby="changeset-title">
+      <div className="changeset-head">
+        <div>
+          <h3 id="changeset-title">{c.message ?? c.name} <span className={`badge cs-${s.tone}`}>{s.label}</span></h3>
+          <p className="mode"><code>{c.name}</code> · made <At iso={c.createdAt} /> · {c.actions.length} change{c.actions.length === 1 ? '' : 's'} at {listed(touches.map(vendorName)) || 'no vendor'}</p>
+        </div>
+        <div className="changeset-actions">
+          <button type="button" onClick={verify} disabled={Boolean(offWhy) || busy !== null} title={offWhy ?? 'Replay it in a throwaway World and run the World\'s checks'}>{busy === 'Verify' ? 'Verifying…' : 'Verify'}</button>
+          <button type="button" onClick={() => setApproving(true)} disabled={Boolean(offWhy) || busy !== null} title={offWhy ?? 'Sign its current contents as yourself'}>Approve…</button>
+          {deployable ? <button type="button" className="primary" onClick={() => void deploy()} disabled={Boolean(offWhy) || busy !== null} title={offWhy ?? 'Perform it against the real accounts behind this World'}>{busy === 'Deploy' ? 'Deploying…' : 'Deploy…'}</button> : null}
+        </div>
+      </div>
+      {offWhy && !c.applied ? <p className="mode">{offWhy}.</p> : null}
+      {!deployable && !c.applied ? <p className="mode">It stays in this World: no vendor it changes has a real account behind it here (a shared World with a root deploys; see Settings › Real services).</p> : null}
+      {c.narration ? <p className="narration">{c.narration}</p> : null}
+
+      <h4>Changes</h4>
+      {groups.length === 0 ? <p className="mode">It changes nothing.</p> : <ByVendor groups={groups} idPrefix={`cs-${c.name}`} />}
+
+      <h4>Checks</h4>
+      {!c.verification ? <p className="mode">Not verified yet. Verify replays it in a throwaway World and runs this World's checks over the result.</p> : (
+        <div className={current(c.verification.contentHash) ? '' : 'stale'}>
+          <p>{c.verification.passed ? '✓ Passed' : '✗ Failed'} · <At iso={c.verification.at} />{current(c.verification.contentHash) ? null : <span className="mode"> · on an earlier version of it: verify again</span>}</p>
+          {c.verification.results.length ? <ul className="checks">{c.verification.results.map((r) => <li key={r.id}>{r.passed ? '✓' : '✗'} <code>{r.id}</code> <span className="mode">{vendorName(r.service)}</span></li>)}</ul> : null}
+          {c.verification.refusals?.length ? <ul className="checks">{c.verification.refusals.map((r, i) => <li key={i}>✗ <code>{r.check}</code> <span className="mode">{vendorName(r.service)}: {r.reason}</span></li>)}</ul> : null}
+        </div>
+      )}
+
+      <h4>Approvals</h4>
+      {c.approvals.length === 0 ? <p className="mode">No one has approved it.</p> : (
+        <ul className="approvals">{c.approvals.map((a, i) => <li key={i}><b>{a.principal}</b> <span className="mode"><At iso={a.at} />{current(a.contentHash) ? '' : ' · signed an earlier version'}</span>{a.note ? <div className="mode">“{a.note}”</div> : null}</li>)}</ul>
+      )}
+
+      {c.applied ? (
         <>
-          <p className="mode">What this World changed since it started{diff.data.base.at ? <> (<At iso={diff.data.base.at} />, <code>{diff.data.base.id}</code>)</> : <> (<code>{diff.data.base.id}</code>)</>}: {diff.data.changes.length} change{diff.data.changes.length === 1 ? '' : 's'} at {byTwin.length} vendor{byTwin.length === 1 ? '' : 's'}. A changeset takes these to the real services.</p>
-          {byTwin.length === 0 ? <p className="empty">No changes since {diff.data.base.id}{diff.data.base.at ? <> (<At iso={diff.data.base.at} />)</> : null}.</p> : byTwin.map(([t, entries]) => (
-            <div key={t} className="compare" role="group" aria-labelledby={`changes-${t}`}>
-              <h3 id={`changes-${t}`} className="vendor-cell"><Mark vendor={t} />{vendorName(t)} <span className="mode">· {entries.length} change{entries.length === 1 ? '' : 's'}</span></h3>
+          <h4>Deployed</h4>
+          <p>{c.applied.outcome === 'applied' ? 'Every change reached the real vendors' : c.applied.outcome === 'partial' ? 'Some changes reached the real vendors' : 'The deploy was refused'} · <At iso={c.applied.at} /></p>
+          {c.applied.refusal?.length ? <ul className="checks">{c.applied.refusal.map((r, i) => <li key={i} className="mode">{r}</li>)}</ul> : null}
+          {c.applied.receipts.length ? <ul className="receipts">{c.applied.receipts.map((r) => <li key={r.actionId}><span className={r.status === 'failed' ? 'badge cs-bad' : 'badge cs-done'}>{r.status}</span> {vendorName(r.service)} {r.url ? <a href={r.url} target="_blank" rel="noopener noreferrer">{r.externalId ?? r.url}</a> : r.externalId ? <code>{r.externalId}</code> : null}{r.error ? <span className="mode"> · {r.error}</span> : null}</li>)}</ul> : null}
+        </>
+      ) : null}
+
+      <Dialog open={approving} onClose={() => { if (!busy) setApproving(false); }} title={`Approve ${c.name}`} footer={<><button type="button" onClick={() => setApproving(false)} disabled={busy !== null}>Cancel</button><button type="submit" form="approve-changeset" className="primary" disabled={busy !== null}>{busy === 'Approve' ? 'Approving…' : 'Approve'}</button></>}>
+        <form id="approve-changeset" onSubmit={(e) => void approve(e)} className="stack">
+          <p className="mode">You sign its contents as they stand now{signsAs ? <>, recorded as <b>{signsAs}</b></> : null}. A later change to it shows your approval as for an earlier version.</p>
+          {signsAs === null ? <label><span>Approving as</span><input name="approveAs" value={as} onChange={(e) => setAs(e.target.value)} maxLength={80} required placeholder="your name or email" autoComplete="off" /><span className="mode">This World was opened with its token, which names no person: the approval records the name you give.</span></label> : null}
+          <label><span>Note <span className="mode">(optional)</span></span><textarea name="approveNote" value={note} onChange={(e) => setNote(e.target.value)} rows={3} maxLength={500} /></label>
+        </form>
+      </Dialog>
+    </div>
+  );
+}
+
+/** What a set of entries does at each vendor, grouped by vendor, runs of three alike folded: the Changes view's and a
+ *  changeset's page's one rendering. */
+function ByVendor({ groups, idPrefix }: { groups: Array<[string, Entry[]]>; idPrefix: string }): React.JSX.Element {
+  return (<>{groups.map(([t, entries]) => (
+            <div key={t} className="compare" role="group" aria-labelledby={`${idPrefix}-${t}`}>
+              <h3 id={`${idPrefix}-${t}`} className="vendor-cell"><Mark vendor={t} />{vendorName(t)} <span className="mode">· {entries.length} change{entries.length === 1 ? '' : 's'}</span></h3>
               <ul>{runsOf(entries).map((run) => run.length >= 3 ? (
                 <li key={run[0]!.id}>
                   <details>
@@ -1310,7 +1559,23 @@ function Changes({ name, token }: { name: string; token: string }): React.JSX.El
                 </li>
               )))}</ul>
             </div>
-          ))}
+  ))}</>);
+}
+
+function Changes({ name, token }: { name: string; token: string }): React.JSX.Element {
+  const diff = useDoor<Diff>(token, `/-/${name}/diff`);
+  const byTwin = useMemo(() => {
+    const m = new Map<string, Entry[]>();
+    if (diff.state === 'ok') for (const c of diff.data.changes) m.set(c.twin, [...(m.get(c.twin) ?? []), c.entry]);
+    return [...m.entries()];
+  }, [diff]);
+  return (
+    <>
+      <Pending load={diff} what="the changes" />
+      {diff.state === 'ok' ? (
+        <>
+          <p className="mode">What this World changed since it started{diff.data.base.at ? <> (<At iso={diff.data.base.at} />, <code>{diff.data.base.id}</code>)</> : <> (<code>{diff.data.base.id}</code>)</>}: {diff.data.changes.length} change{diff.data.changes.length === 1 ? '' : 's'} at {byTwin.length} vendor{byTwin.length === 1 ? '' : 's'}. A changeset takes these to the real services.</p>
+          {byTwin.length === 0 ? <p className="empty">No changes since {diff.data.base.id}{diff.data.base.at ? <> (<At iso={diff.data.base.at} />)</> : null}.</p> : <ByVendor groups={byTwin} idPrefix="changes" />}
         </>
       ) : null}
     </>