@3sln/trove 0.0.7 → 0.0.9

package/packages/web/src/ui/components/pluginReview.js

@@ -7,29 +7,45 @@
 import { dd } from '../../runtime.js';
 import { icon } from '../icon.js';
 import { bytes as fmtBytes } from '../format.js';
+import { draftFor } from '../../bl/viewState.js';
+import { CloseDialogAction, SetViewStateAction } from '../../bl/actions.js';
+import { describeTrust } from '../../bl/trust.js';
 
 const { div, span, button, h3, p, label, input } = dd;
 
-// Grant selection persists across re-renders, keyed to the dialog instance.
-let sel = { ref: null, grants: null };
+// The ticked capabilities, keyed to the dialog instance. Engine state — it decides which
+// boxes render checked. See bl/viewState.js.
+const KEY = 'pluginReview';
 
-export function pluginReview(d, ui) {
-  const wb = ui.platform.workbench;
+export function pluginReview(d, ui, view) {
   const s = d.summary;
-  if (sel.ref !== d) {
+  // Derived, not written: the default used to be installed during the render that noticed
+  // the dialog had changed, which made rendering a side-effecting operation.
+  const sel = draftFor(view, KEY, d, {
     // Default: request everything the user is allowed to grant.
-    sel = { ref: d, grants: new Set(s.capabilities.filter((c) => !c.adminOnly || d.isAdmin).map((c) => c.id)) };
-  }
-  const toggle = (cap) => { sel.grants.has(cap) ? sel.grants.delete(cap) : sel.grants.add(cap); ui.rerender?.(); };
+    grants: s.capabilities.filter((c) => !c.adminOnly || d.isAdmin).map((c) => c.id),
+    // Never defaulted true. An acknowledgement that arrives pre-ticked is not one.
+    acknowledged: false,
+  });
+  const policy = d.policy || { requiresAcknowledgement: false };
+  // Install stays out of reach until the risk has actually been acknowledged. A package
+  // this applies to is unsigned — see installPolicyFor.
+  const blocked = policy.requiresAcknowledgement && !sel.acknowledged;
+  // A new array rather than a mutated Set: the write has to be a different value for the
+  // cell to see it as a change at all.
+  const patch = (fields) => ui.engine.dispatch(new SetViewStateAction(KEY, { ...sel, ...fields }));
+  const toggle = (cap) => patch({
+    grants: sel.grants.includes(cap) ? sel.grants.filter((c) => c !== cap) : [...sel.grants, cap],
+  });
 
   return div({},
-    div({ className: 'scrim' }).on({ click: () => wb.closeDialog() }),
+    div({ className: 'scrim' }).on({ click: () => ui.engine.dispatch(new CloseDialogAction()) }),
     div({ className: 'dialog review', $styling: { width: 'min(560px, 96vw)' } },
       header(s),
       div({ className: 'review-body' },
         s.description ? p({ className: 'review-desc' }, s.description) : null,
         section('Capabilities it requests', s.capabilities.length
-          ? div({ className: 'cap-list' }, ...s.capabilities.map((c) => capRow(c, d.isAdmin, sel.grants.has(c.id), () => toggle(c.id))))
+          ? div({ className: 'cap-list' }, ...s.capabilities.map((c) => capRow(c, d.isAdmin, sel.grants.includes(c.id), () => toggle(c.id))))
           : muted('None — this plugin only runs in its sandbox.')),
         (s.network || []).length ? section('Network access', div({ className: 'contrib-list' }, ...s.network.map(endpointRow))) : null,
         (s.commands || []).length
@@ -40,14 +56,38 @@ export function pluginReview(d, ui) {
         s.settings.length ? section('Settings', div({ className: 'contrib-list' }, ...s.settings.map(settingRow))) : null,
         div({ className: 'review-meta' }, `${s.fileCount} files · ${fmtBytes(s.sizeBytes)} · id ${s.id}`),
       ),
+      policy.headline ? trustWarning(policy, sel, patch) : null,
       div({ className: 'row-actions' },
-        button({ className: 'btn' }, 'Cancel').on({ click: () => wb.closeDialog() }),
-        button({ className: 'btn primary' }, icon('plug', { size: 15 }), 'Install').on({ click: () => d.onInstall([...sel.grants]) }),
+        button({ className: 'btn' }, 'Cancel').on({ click: () => ui.engine.dispatch(new CloseDialogAction()) }),
+        button({ className: `btn primary ${blocked ? 'disabled' : ''}`, disabled: blocked },
+          icon('plug', { size: 15 }), 'Install')
+          .on({ click: () => !blocked && d.onInstall([...sel.grants]) }),
       ),
     ),
   );
 }
 
+/**
+ * What is wrong with this package's provenance, said before the Install button rather than
+ * as a badge beside the name.
+ *
+ * A badge is something you can read past. This sits between the review and the action, and
+ * where an acknowledgement is required it holds the button until the box is ticked — which
+ * is the difference between telling someone and asking them.
+ */
+function trustWarning(policy, sel, patch) {
+  return div({ className: `review-warning ${policy.status}` },
+    div({ className: 'rw-head' }, icon('warn', { size: 15 }), span(policy.headline)),
+    div({ className: 'rw-detail' }, policy.detail),
+    policy.requiresAcknowledgement
+      ? label({ className: 'rw-ack' },
+        input({ type: 'checkbox', checked: !!sel.acknowledged })
+          .on({ change: (e) => patch({ acknowledged: !!e.target.checked }) }),
+        span('I know this package is unsigned and I trust where it came from'))
+      : null,
+  );
+}
+
 function header(s) {
   const t = s.trust || { status: 'unverified' };
   return div({ className: 'review-head' },
@@ -60,17 +100,16 @@ function header(s) {
   );
 }
 
-function trustBadge(t) {
-  if (t.status === 'verified') {
-    return span({ className: 'trust verified', title: `Signed by a key published at ${t.domain}` }, icon('check', { size: 13 }), 'Verified · ' + t.domain);
-  }
-  if (t.status === 'signed') {
-    return span({ className: 'trust signed', title: t.reason || 'Signed, but the domain does not vouch for the key' }, icon('info', { size: 13 }), 'Signed');
-  }
-  if (t.status === 'invalid') {
-    return span({ className: 'trust invalid', title: t.reason || 'Invalid signature — the package may have been tampered with' }, icon('warn', { size: 13 }), 'Invalid signature');
-  }
-  return span({ className: 'trust unverified', title: t.reason || 'This plugin is not signed' }, icon('warn', { size: 13 }), 'Unverified');
+// The full badge, for the dialog that asks whether to install at all. Same classification
+// as the list's — see bl/trust.js — with room to spell it out.
+function trustBadge(trust) {
+  const t = describeTrust(trust);
+  const label = t.status === 'verified' && t.domain ? `Verified · ${t.domain}`
+    : t.status === 'invalid' ? 'Invalid signature'
+      : t.status === 'signed' ? 'Signed'
+        : 'Unverified';
+  return span({ className: `trust ${t.tone}`, title: t.explanation },
+    icon(t.icon, { size: 13 }), label);
 }
 
 function capRow(cap, isAdmin, checked, onToggle) {

package/packages/web/src/ui/components/pluginsView.js

@@ -1,5 +1,7 @@
 import { dd } from '../../runtime.js';
 import { icon } from '../icon.js';
+import { CloseDialogAction, ExecCommandAction, OpenPluginPanelAction, RefreshPluginAction, SetPluginSecretAction, SetSettingAction, ShowDialogAction, UninstallPluginAction } from '../../bl/actions.js';
+import { describeTrust } from '../../bl/trust.js';
 
 const { div, span, p, button, h2, input, label } = dd;
 
@@ -13,9 +15,9 @@ export default function pluginsView(state, ui) {
           'Plugins are sandboxed packages you install from a file or URL. They run in an isolated iframe and reach Trove only through a message channel, using the capabilities you granted.'),
         div({ className: 'plugin-install' },
           button({ className: 'btn primary' }, icon('upload', { size: 15 }), 'Install from file…')
-            .on({ click: () => ui.exec('plugins.installFromFile') }),
+            .on({ click: () => ui.engine.dispatch(new ExecCommandAction('plugins.installFromFile')) }),
           button({ className: 'btn' }, icon('plug', { size: 15 }), 'Install from URL…')
-            .on({ click: () => ui.exec('plugins.installFromUrl') }),
+            .on({ click: () => ui.engine.dispatch(new ExecCommandAction('plugins.installFromUrl')) }),
         ),
         plugins.length
           ? div({ $styling: { display: 'flex', 'flex-direction': 'column', gap: '12px', 'margin-top': '14px' } }, ...plugins.map((pl) => installedCard(pl, state, ui)))
@@ -52,60 +54,60 @@ function installedCard(pl, state, ui) {
             : div({ className: 'muted', $styling: { 'font-size': '12px' } }, pl.responsive ? 'No contributions announced.' : 'No manifest received — the plugin may not be running.'),
         )
       : null,
-    (pl.settingsSchema || []).length ? settingsSection(pl, ui) : null,
+    (pl.settingsSchema || []).length ? settingsSection(pl, ui, state) : null,
     div({ className: 'actions' },
-      pl.hasUi ? button({ className: 'btn' }, icon('command', { size: 14 }), 'Open panel').on({ click: () => ui.platform.workbench.openPluginPanel(pl.id) }) : null,
-      button({ className: 'btn' }, icon('refresh', { size: 14 }), 'Refresh').on({ click: () => ui.platform.plugins.refresh(pl.id) }),
+      pl.hasUi ? button({ className: 'btn' }, icon('command', { size: 14 }), 'Open panel').on({ click: () => ui.engine.dispatch(new OpenPluginPanelAction(pl.id)) }) : null,
+      button({ className: 'btn' }, icon('refresh', { size: 14 }), 'Refresh').on({ click: () => ui.engine.dispatch(new RefreshPluginAction(pl.id)) }),
       button({ className: 'btn danger' }, 'Uninstall').on({
-        click: () => ui.platform.workbench.showDialog({
+        click: () => ui.engine.dispatch(new ShowDialogAction({
           kind: 'confirm', title: `Uninstall ${pl.name}?`, danger: true, confirmLabel: 'Uninstall',
           body: 'The plugin and all data it stored will be removed.',
-          onConfirm: () => { ui.platform.workbench.closeDialog(); ui.uninstallPlugin(pl.id); },
-        }),
+          confirmActions: [new UninstallPluginAction(pl.id)],
+        })),
       }),
     ),
   );
 }
 
-function settingsSection(pl, ui) {
+function settingsSection(pl, ui, state) {
   return div({ className: 'plugin-features' },
     div({ className: 'pf-head' }, span('Settings')),
     div({ $styling: { display: 'flex', 'flex-direction': 'column', gap: '8px' } },
-      ...pl.settingsSchema.map((s) => settingRow(pl, s, ui)),
+      ...pl.settingsSchema.map((s) => settingRow(pl, s, ui, state)),
     ),
   );
 }
 
-function settingRow(pl, s, ui) {
+function settingRow(pl, s, ui, state) {
   const key = `${pl.id}.${s.key}`;
-  const value = s.secret ? '' : (ui.platform.settings.get(key) ?? s.default ?? '');
+  const value = s.secret ? '' : (state.settings?.[key] ?? s.default ?? '');
   return div({ className: 'setting', $styling: { padding: '6px 0' } },
     div({ className: 'info' }, div({ className: 't' }, s.title || s.key), s.description ? div({ className: 'd' }, s.description) : null),
     div({ className: 'control' },
       s.secret
         ? input({ className: 'input', type: 'password', placeholder: 'Set secret…' }).on({
-            change: (e) => { if (e.target.value) { ui.platform.plugins.setSecret(pl.id, s.key, e.target.value); e.target.value = ''; e.target.placeholder = 'Saved ✓'; } },
+            change: (e) => { if (e.target.value) { ui.engine.dispatch(new SetPluginSecretAction(pl.id, s.key, e.target.value)); e.target.value = ''; e.target.placeholder = 'Saved ✓'; } },
           })
         : s.type === 'boolean'
-          ? label({ className: 'switch' }, input({ type: 'checkbox', checked: !!value }).on({ change: (e) => ui.platform.settings.set(key, e.target.checked) }), span({ className: 'track' }))
-          : input({ className: 'input', value }).on({ change: (e) => ui.platform.settings.set(key, e.target.value) }),
+          ? label({ className: 'switch' }, input({ type: 'checkbox', checked: !!value }).on({ change: (e) => ui.engine.dispatch(new SetSettingAction(key, e.target.checked)) }), span({ className: 'track' }))
+          : input({ className: 'input', value }).on({ change: (e) => ui.engine.dispatch(new SetSettingAction(key, e.target.value)) }),
     ),
   );
 }
 
-function trustBadge(t) {
-  if (!t) return null;
-  if (t.status === 'verified') return span({ className: 'trust verified', title: 'Signed by ' + t.domain }, icon('check', { size: 12 }), t.domain);
-  if (t.status === 'signed') return span({ className: 'trust signed' }, icon('info', { size: 12 }), 'signed');
-  // A BROKEN signature is not the same as no signature. The install dialog says so in
-  // red; this list used to fall through to the same amber "unverified" an ordinary
-  // unsigned plugin gets, so a package whose signature failed to verify — the one case
-  // that means someone tampered with it — looked like the common, benign one.
-  if (t.status === 'invalid') {
-    return span({ className: 'trust invalid', title: t.reason || 'The signature did not verify — this package may have been altered' },
-      icon('warn', { size: 12 }), 'invalid signature');
-  }
-  return span({ className: 'trust unverified' }, icon('warn', { size: 12 }), 'unverified');
+// The compact badge. WHAT the signature means is decided in bl/trust.js — this only
+// chooses how few characters to say it in, which is the part that is genuinely a question
+// about a crowded row. The two badges used to be two `if` ladders maintained separately,
+// and this one was missing the branch that distinguishes a tampered package from an
+// unsigned one.
+function trustBadge(trust) {
+  if (!trust) return null;
+  const t = describeTrust(trust);
+  const label = t.status === 'verified' ? t.domain
+    : t.status === 'invalid' ? 'invalid signature'
+      : t.status;
+  return span({ className: `trust ${t.tone}`, title: t.explanation },
+    icon(t.icon, { size: 12 }), label);
 }
 
 const KIND_ICON = { command: 'command', opener: 'file', indexer: 'search', statusItem: 'info' };

package/packages/web/src/ui/components/settingsView.js

@@ -1,21 +1,26 @@
 import { dd } from '../../runtime.js';
-import { prettyKey, eventToKey } from '../../platform/keybindings.js';
+import { eventToKey } from '../../platform/keybindings.js';
 import { icon } from '../icon.js';
-import { listAssociations, rememberOpener } from '../../bl/openers.js';
+import { region } from '../region.js';
+import * as q from '../../bl/queries.js';
+import { rotationFor } from '../../bl/queries.js';
+import { watchQuery } from '../../bl/watchQuery.js';
+import { BeginRotationAction, CancelRotationAction, CopyTextAction, ExecCommandAction, PatchApiKeyDraftAction, RebindKeyAction, RememberOpenerAction, SetSettingAction, SetViewStateAction, ToggleApiKeyCapAction } from '../../bl/actions.js';
 
 const { div, h2, h3, p, span, select, option, input, label, button, ul, li, code } = dd;
 
 export default function settingsView(state, ui) {
-  const groups = ui.platform.settings.grouped();
+  const groups = state.settingsGroups || new Map();
   return div({ className: 'editor' },
     div({ className: 'stage' },
       div({ className: 'settings' },
         h2('Settings'),
         p({ className: 'sub' }, 'Preferences are stored in this browser. Plugins contribute their own settings here too.'),
         ...groups.map((g) => group(g, ui)),
-        mcpSection(ui),
+        mcpSection(ui, state.caps),
+        encryptionSection(state, ui),
         apiKeysSection(state, ui),
-        openersSection(ui),
+        openersSection(state.assoc, ui),
         keybindingsSection(ui),
       ),
     ),
@@ -40,7 +45,7 @@ function setting(s, ui) {
 }
 
 function control(s, ui) {
-  const set = (v) => ui.platform.settings.set(s.key, v);
+  const set = (v) => ui.engine.dispatch(new SetSettingAction(s.key, v));
   if (s.type === 'boolean') {
     return label({ className: 'switch' },
       input({ type: 'checkbox', checked: !!s.value }).on({ change: (e) => set(e.target.checked) }),
@@ -87,8 +92,7 @@ function control(s, ui) {
 //
 // It reads straight off `capabilities`, which the app already fetched at startup, so
 // there is no loading state and nothing to go stale.
-function mcpSection(ui) {
-  const caps = ui.platform.capabilities;
+function mcpSection(ui, caps) {
   if (!caps) return null; // capabilities never arrived; the shell has bigger problems
   const mcp = caps.mcp;
   const auth = caps.auth || { authorizationServers: [], source: 'none' };
@@ -97,13 +101,9 @@ function mcpSection(ui) {
       p({ className: 'sub' }, 'MCP is switched off on this server. Set TROVE_MCP=on to enable it.'));
   }
 
-  const copy = (text) => () => {
-    navigator.clipboard?.writeText(text)
-      .then(() => ui.platform.notifications.success('Copied'))
-      // Clipboard access is denied often enough that failing silently would look like a
-      // broken button; showing the value still gets it into the user's hands.
-      .catch(() => ui.platform.notifications.info(text, { sticky: true }));
-  };
+  // The "denied clipboard still has to hand the value over" reasoning moved into
+  // CopyTextAction, which is where the other three copies of it went too.
+  const copy = (text) => () => ui.engine.dispatch(new CopyTextAction(text));
 
   const servers = auth.authorizationServers || [];
   // Where the value came from matters when it is wrong: "we took this from your JWT
@@ -192,7 +192,7 @@ function apiKeysSection(state, ui) {
   // sessions never need it, so it is not worth a request at boot.
   if (!keysRequested && !keys.loaded && !keys.loading) {
     keysRequested = true;
-    ui.exec('keys.load');
+    ui.engine.dispatch(new ExecCommandAction('keys.load'));
   }
 
   // A non-admin gets a 403 here, which is the correct answer rather than an error worth
@@ -215,7 +215,7 @@ function apiKeysSection(state, ui) {
     !keys.draft && !keys.minted
       ? div({ className: 'keys-actions' },
         button({ className: 'btn' }, icon('plus', { size: 14 }), 'New key')
-          .on({ click: () => ui.exec('keys.new') }))
+          .on({ click: () => ui.engine.dispatch(new ExecCommandAction('keys.new')) }))
       : null,
 
     keys.keys?.length
@@ -232,11 +232,7 @@ function apiKeysSection(state, ui) {
  * table would be dismissed without being copied.
  */
 function mintedBanner(minted, ui) {
-  const copy = () => {
-    navigator.clipboard?.writeText(minted.secret)
-      .then(() => ui.platform.notifications.success('Key copied'))
-      .catch(() => ui.platform.notifications.info(minted.secret, { sticky: true }));
-  };
+  const copy = () => ui.engine.dispatch(new CopyTextAction(minted.secret, 'Key copied'));
   return div({ className: 'key-minted' },
     div({ className: 'key-minted-head' },
       icon('warn', { size: 15 }),
@@ -250,14 +246,16 @@ function mintedBanner(minted, ui) {
       button({ className: 'btn small', title: 'Copy' }, icon('link', { size: 13 })).on({ click: copy }),
     ),
     div({ className: 'keys-actions' },
-      button({ className: 'btn' }, 'Done').on({ click: () => ui.exec('keys.dismissMinted') }),
+      button({ className: 'btn' }, 'Done').on({ click: () => ui.engine.dispatch(new ExecCommandAction('keys.dismissMinted')) }),
     ),
   );
 }
 
 function draftForm(keys, collections, ui) {
   const draft = keys.draft;
-  const scopes = ui.app.apiKeys.draftScopes();
+  // Resolved by the apiKeys view: what this draft would actually grant, or null when it
+  // would grant nothing.
+  const scopes = keys.draftScopes;
   const ready = !!draft.name.trim() && !!scopes;
 
   return div({ className: 'key-form' },
@@ -268,7 +266,7 @@ function draftForm(keys, collections, ui) {
       ),
       div({ className: 'control' },
         input({ className: 'input', value: draft.name, $attrs: { placeholder: 'CI uploader' } })
-          .on({ input: (e) => ui.app.apiKeys.patchDraft({ name: e.target.value }) }),
+          .on({ input: (e) => ui.engine.dispatch(new PatchApiKeyDraftAction({ name: e.target.value })) }),
       ),
     ),
 
@@ -281,7 +279,7 @@ function draftForm(keys, collections, ui) {
         input({
           className: 'input', type: 'number', value: draft.expiresInDays,
           $attrs: { min: '1', max: '3650', placeholder: 'never' },
-        }).on({ input: (e) => ui.app.apiKeys.patchDraft({ expiresInDays: e.target.value }) }),
+        }).on({ input: (e) => ui.engine.dispatch(new PatchApiKeyDraftAction({ expiresInDays: e.target.value })) }),
       ),
     ),
 
@@ -298,8 +296,8 @@ function draftForm(keys, collections, ui) {
     div({ className: 'keys-actions' },
       button({ className: 'btn primary', $attrs: ready ? {} : { disabled: 'true' } },
         keys.busy === 'mint' ? 'Creating\u2026' : 'Create key')
-        .on({ click: () => ready && ui.exec('keys.mint') }),
-      button({ className: 'btn' }, 'Cancel').on({ click: () => ui.exec('keys.cancel') }),
+        .on({ click: () => ready && ui.engine.dispatch(new ExecCommandAction('keys.mint')) }),
+      button({ className: 'btn' }, 'Cancel').on({ click: () => ui.engine.dispatch(new ExecCommandAction('keys.cancel')) }),
     ),
   );
 }
@@ -314,7 +312,7 @@ function scopeRow(collection, draft, ui) {
     div({ className: 'key-scope-caps' },
       ...CAPS.map((c) => label({ className: `cap ${held.has(c.id) ? 'on' : ''}`, title: c.hint },
         input({ type: 'checkbox', checked: held.has(c.id) })
-          .on({ change: () => ui.app.apiKeys.toggleCap(collection.id, c.id) }),
+          .on({ change: () => ui.engine.dispatch(new ToggleApiKeyCapAction(collection.id, c.id)) }),
         span(c.label),
       )),
     ),
@@ -339,7 +337,7 @@ function keyRow(k, keys, collections, ui) {
       ? button({
         className: 'btn small danger',
         $attrs: keys.busy === k.id ? { disabled: 'true' } : {},
-      }, keys.busy === k.id ? '\u2026' : 'Revoke').on({ click: () => ui.exec('keys.revoke', k.id) })
+      }, keys.busy === k.id ? '\u2026' : 'Revoke').on({ click: () => ui.engine.dispatch(new ExecCommandAction('keys.revoke', k.id)) })
       : null,
   );
 }
@@ -366,8 +364,96 @@ function metaLine(k) {
   return bits.join(' \u00b7 ');
 }
 
-function openersSection(ui) {
-  const rows = listAssociations(ui.platform);
+/**
+ * The open collection's key: which one it is, and moving it to a new one.
+ *
+ * Only for an encrypted collection, and only for an admin — a non-admin gets a 403 reading
+ * the rotation state, which is the correct answer rather than an error, so the section
+ * simply is not drawn.
+ */
+function encryptionSection(state, ui) {
+  const collectionId = state.ex?.collectionId;
+  const enc = state.ex?.collections?.find((c) => c.id === collectionId)?.encryption;
+  if (!enc?.enabled) return null;
+  // Watching the query is what LOADS it — its bootAction reads the rotation state and its
+  // realization polls while one is running. Nothing fetches while this screen is closed.
+  return ui.watch(watchQuery(ui.engine, rotationFor(collectionId)), (rot) => encryptionBody(enc, rot || {}, ui));
+}
+
+function encryptionBody(enc, rot, ui) {
+  const running = rot.rotation?.status === 'running';
+  const est = rot.estimate;
+
+  return div({ className: 'group' },
+    h3('Encryption'),
+    p({ className: 'sub' }, 'Files in this collection are sealed before they leave your browser. The drive holds the key.'),
+
+    // The only thing that identifies which key the collection is on, and what a sideloaded
+    // object is matched against — so it has to be somewhere findable and copyable.
+    div({ className: 'setting' },
+      div({ className: 'info' },
+        div({ className: 't' }, 'Key fingerprint'),
+        div({ className: 'd' }, 'Identifies the key this collection is on.'),
+      ),
+      div({ className: 'control' },
+        button({ className: 'btn small', title: 'Copy' }, dd.h('code', enc.fingerprint))
+          .on({ click: () => ui.engine.dispatch(new CopyTextAction(enc.fingerprint, 'Fingerprint copied')) }),
+      ),
+    ),
+
+    div({ className: 'setting' },
+      div({ className: 'info' },
+        div({ className: 't' }, running ? 'Rotating the key' : 'Rotate the key'),
+        div({ className: 'd' }, running
+          ? `${rot.rotation.moved} moved${rot.rotation.failed ? `, ${rot.rotation.failed} failed` : ''} — this continues in the background.`
+          : rotationCost(est)),
+      ),
+      div({ className: 'control' },
+        running
+          ? button({ className: 'btn small', disabled: !!rot.busy }, 'Stop')
+            .on({ click: () => ui.engine.dispatch(new CancelRotationAction()) })
+          : button({ className: 'btn small', disabled: !!rot.busy }, 'Rotate')
+            .on({ click: () => ui.engine.dispatch(new BeginRotationAction()) }),
+      ),
+    ),
+    running
+      ? null
+      // Said before it is started rather than after: what has moved stays moved, so this
+      // is not a job that can be undone by regretting it.
+      : div({},
+        rotationBill(est),
+        p({ className: 'sub' }, 'Every file is re-sealed under a new key and the old one is retired once nothing is left on it. Files stay readable throughout.'),
+      ),
+  );
+}
+
+/**
+ * What a rotation would cost, before anyone starts one.
+ *
+ * The server already composes this in words — it knows the provider and its pricing, and
+ * whether anyone is billed at all — so this shows what it said rather than recomputing a
+ * worse version from a file count. `applicable` is false for a store nobody charges for,
+ * where the only cost is time.
+ */
+function rotationCost(est) {
+  if (!est) return 'Re-seals every file under a fresh key.';
+  return est.summary || 'Re-seals every file under a fresh key.';
+}
+
+/** The itemised estimate, when the provider charges for the traffic. */
+function rotationBill(est) {
+  if (!est?.applicable || !(est.lines || []).length) return null;
+  return div({ className: 'rot-bill' },
+    ...est.lines.map((l) => div({ className: 'rb-line' },
+      span(l.label || l.name || ''), span({ className: 'mono' }, l.amount || l.value || ''))),
+    est.total ? div({ className: 'rb-line total' }, span('Estimated total'), span({ className: 'mono' }, est.total)) : null,
+    // Prices move and this is a guess against a snapshot of them; saying when stops it
+    // reading as a quote.
+    est.asOf ? div({ className: 'rb-asof' }, `Prices as of ${est.asOf}.`) : null,
+  );
+}
+
+function openersSection(rows, ui) {
   return div({ className: 'group' },
     h3('Default Openers'),
     rows.length
@@ -380,7 +466,7 @@ function openersSection(ui) {
               ),
               div({ className: 'control' },
                 button({ className: 'iconbtn', title: 'Forget this default' }, icon('close', { size: 14 }))
-                  .on({ click: () => rememberOpener(ui.platform, r.typeKey, null) }),
+                  .on({ click: () => ui.engine.dispatch(new RememberOpenerAction(r.typeKey, null)) }),
               ),
             ),
           ),
@@ -389,21 +475,31 @@ function openersSection(ui) {
   );
 }
 
-// Which shortcut is currently listening for its new chord. Module-level because the
-// settings view re-renders from scratch and this is transient UI state, not a setting.
-let capturing = null;
+// Which shortcut is listening for its new chord. Transient, and still engine state: it
+// decides whether a row renders a `<kbd>` or "Press keys…". See bl/viewState.js.
+const CAPTURE = 'keybindingCapture';
 
+// Its own region, over the keybindings view and the capture state.
+//
+// Everything a row needs is decided by the query — the command's title, whether the user
+// changed it, and whether another command answers to the same chord. That last one is not
+// something a row could work out for itself: it needs the whole list at once.
+//
+// Rebinding dispatches with the binding ID. The component has never held a binding object,
+// only a description of one, which is the point.
+let kbRegion = null;
 function keybindingsSection(ui) {
-  const kb = ui.platform.keybindings;
-  const bindings = kb.resolved();
-  const cmds = ui.platform.contributions;
-  const overrides = kb.overrides();
-  const stop = () => { capturing = null; ui.rerender?.(); };
-  // Which chords more than one command answers to. Nothing rejects a collision, and
-  // `#matchFor` scans in reverse so the LAST registration wins — bind Delete onto
-  // ⌘P and Quick Open stops opening, with no hint anywhere that that is why.
-  const byKey = new Map();
-  for (const b of bindings) byKey.set(b.key, (byKey.get(b.key) || 0) + 1);
+  // Built once. A fresh region per render would rebuild its alias every pass, and dodo
+  // identifies an alias by the function — see ui/region.js.
+  kbRegion ??= region(ui.engine, { bindings: q.keybindings, view: q.viewState },
+    (st) => keybindingRows(st.bindings || [], ui, st.view?.[CAPTURE] ?? null));
+  return kbRegion();
+}
+
+function keybindingRows(bindings, ui, capturing) {
+  const setCapturing = (id) => ui.engine.dispatch(new SetViewStateAction(CAPTURE, id));
+  const stop = () => setCapturing(null);
+  const rebind = (bindingId, key) => ui.engine.dispatch(new RebindKeyAction(bindingId, key));
   return div({ className: 'group' },
     h3('Keyboard Shortcuts'),
     p({ className: 'sub' }, 'Click a shortcut to record a new one. Esc cancels; Backspace clears it.'),
@@ -411,41 +507,38 @@ function keybindingsSection(ui) {
     // more" anywhere, the shortcuts past it simply did not exist as far as anyone could
     // tell, and one plugin keymap was enough to push real ones off the end.
     ...bindings.map((b) => {
-      const cmd = cmds.get(b.command);
       const listening = capturing === b.bindingId;
-      const custom = !!overrides[b.bindingId];
-      const clash = byKey.get(b.key) > 1;
       return div({ className: 'setting' },
         div({ className: 'info' },
-          div({ className: 't' }, cmd?.title || b.command),
+          div({ className: 't' }, b.title),
           div({ className: 'd' }, b.command),
         ),
         div({ className: 'control' },
-          clash && !listening
+          b.clash && !listening
             ? span({ className: 'kbd-clash', title: 'Another command answers to this shortcut too — the one registered last wins' },
               icon('warn', { size: 12 }))
             : null,
-          button({ className: `kbd-edit ${listening ? 'listening' : ''} ${clash ? 'clash' : ''}`, title: listening ? 'Press the new shortcut' : 'Click to rebind' },
-            listening ? span('Press keys…') : dd.h('kbd', prettyKey(b.key)))
+          button({ className: `kbd-edit ${listening ? 'listening' : ''} ${b.clash ? 'clash' : ''}`, title: listening ? 'Press the new shortcut' : 'Click to rebind' },
+            listening ? span('Press keys…') : dd.h('kbd', b.label))
             .on({
-              click: () => { capturing = listening ? null : b.bindingId; ui.rerender?.(); },
+              click: () => setCapturing(listening ? null : b.bindingId),
               blur: () => { if (listening) stop(); },
               keydown: (e) => {
                 if (!listening) return;
                 e.preventDefault();
                 e.stopPropagation();
                 if (e.key === 'Escape') return stop();
-                if (e.key === 'Backspace') { kb.rebind(b, null); return stop(); }
+                if (e.key === 'Backspace') { rebind(b.bindingId, null); return stop(); }
                 // A bare modifier isn't a chord yet — wait for the key it modifies.
                 if (['Control', 'Meta', 'Alt', 'Shift'].includes(e.key)) return;
-                kb.rebind(b, eventToKey(e));
+                rebind(b.bindingId, eventToKey(e));
                 stop();
               },
               $attach: (el) => { if (listening) queueMicrotask(() => el.focus()); },
             }),
-          custom
+          b.custom
             ? button({ className: 'c-link', title: 'Back to the default' }, 'reset')
-              .on({ click: () => { kb.rebind(b, null); ui.rerender?.(); } })
+              .on({ click: () => { rebind(b.bindingId, null); setCapturing(null); } })
             : null,
         ),
       );