@3sln/trove 0.0.2

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

@@ -0,0 +1,151 @@
+// The pre-install review — everything a user needs to decide whether to trust
+// and install a plugin: its identity + signature/domain-verified status, the
+// capabilities it wants (each explained, admin-only ones flagged), what it
+// contributes, and its settings. Capabilities are opt-in checkboxes; admin-only
+// ones are disabled for non-admins. No plugin code has run at this point.
+
+import { dd } from '../../runtime.js';
+import { icon } from '../icon.js';
+import { bytes as fmtBytes } from '../format.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 };
+
+export function pluginReview(d, ui) {
+  const wb = ui.platform.workbench;
+  const s = d.summary;
+  if (sel.ref !== 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?.(); };
+
+  return div({},
+    div({ className: 'scrim' }).on({ click: () => wb.closeDialog() }),
+    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))))
+          : 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
+          ? section('Commands it can run', div({ className: 'contrib-list' }, ...s.commands.map((id) => commandRow(id, ui))))
+          : null,
+        s.storage ? section('Storage', storageRows(s.storage)) : null,
+        s.contributions.length ? section('What it adds', div({ className: 'contrib-list' }, ...s.contributions.map(contribRow))) : null,
+        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}`),
+      ),
+      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]) }),
+      ),
+    ),
+  );
+}
+
+function header(s) {
+  const t = s.trust || { status: 'unverified' };
+  return div({ className: 'review-head' },
+    div({ className: 'avatar' }, (s.name || '?')[0].toUpperCase()),
+    div({ className: 'rh-main' },
+      div({ className: 'rh-name' }, s.name, span({ className: 'rh-ver' }, 'v' + s.version)),
+      div({ className: 'rh-author' }, 'by ' + s.author),
+    ),
+    trustBadge(t),
+  );
+}
+
+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');
+}
+
+function capRow(cap, isAdmin, checked, onToggle) {
+  const blocked = cap.adminOnly && !isAdmin;
+  return label({ className: `cap-row ${blocked ? 'blocked' : ''}` },
+    input({ type: 'checkbox', checked: checked && !blocked, disabled: blocked }).on({ change: () => !blocked && onToggle() }),
+    div({ className: 'cap-info' },
+      div({ className: 'cap-name' }, cap.id, cap.adminOnly ? span({ className: 'pf-badge', $styling: { color: 'var(--warn)', 'margin-left': '6px' } }, 'admin only') : null),
+      div({ className: 'cap-desc' }, cap.description + (blocked ? ' — requires an administrator' : '')),
+    ),
+  );
+}
+
+function contribRow(c) {
+  const kindIcon = { command: 'command', opener: 'file', indexer: 'search', statusItem: 'info', register: 'info', keymap: 'command' }[c.kind] || 'command';
+  return div({ className: 'contrib-row' },
+    icon(kindIcon, { size: 13 }),
+    span({ className: 'cr-title' }, c.title),
+    c.detail ? span({ className: 'cr-detail' }, c.detail) : null,
+    c.offline ? span({ className: 'pf-badge offline-ok' }, 'offline') : null,
+    span({ className: 'pf-kind' }, c.kind),
+  );
+}
+
+// One command the plugin may ask the host to run. Resolved against the live registry
+// so the user sees the human title and where it comes from (built-in vs another
+// plugin) — an id like "explorer.delete" alone doesn't convey what it does.
+function commandRow(id, ui) {
+  const cmd = ui?.platform?.contributions?.get?.(id);
+  const source = cmd?.pluginId ? 'plugin' : cmd ? 'built-in' : 'not installed';
+  return div({ className: `contrib-row ${cmd ? '' : 'blocked'}` },
+    icon('command', { size: 13 }),
+    span({ className: 'cr-title' }, cmd?.title || id),
+    span({ className: 'cr-detail' }, id),
+    span({ className: 'pf-kind' }, source),
+  );
+}
+
+function endpointRow(ep) {
+  return div({ className: 'contrib-row' },
+    icon('plug', { size: 13 }),
+    span({ className: 'cr-title' }, ep.host),
+    ep.path ? span({ className: 'cr-detail' }, ep.path) : null,
+    span({ className: 'pf-kind' }, ep.scheme),
+  );
+}
+
+function storageRows(st) {
+  const rows = [];
+  if (st.plugin) rows.push(storageRow('Private database', 'A SQLite store just for this plugin (server + this device).', false));
+  if (st.domain) rows.push(storageRow('Shared database', `Shared with other plugins from ${'its domain'} (SQLite).`, st.domainBlocked));
+  return div({ className: 'contrib-list' }, ...rows);
+}
+function storageRow(title, detail, blocked) {
+  return div({ className: `contrib-row ${blocked ? 'blocked' : ''}` },
+    icon('plug', { size: 13 }),
+    span({ className: 'cr-title' }, title),
+    span({ className: 'cr-detail' }, blocked ? detail + ' — needs a verified domain' : detail),
+    blocked ? span({ className: 'pf-badge', $styling: { color: 'var(--warn)' } }, 'unavailable') : null,
+  );
+}
+
+function settingRow(st) {
+  return div({ className: 'contrib-row' },
+    icon('gear', { size: 13 }),
+    span({ className: 'cr-title' }, st.title),
+    st.secret
+      ? span({ className: 'pf-badge', $styling: { color: 'var(--warn)' } }, 'secret')
+      : span({ className: 'pf-kind' }, st.type),
+  );
+}
+
+function section(title, content) {
+  return div({ className: 'review-section' }, div({ className: 'rs-title' }, title), content);
+}
+function muted(t) {
+  return div({ className: 'muted', $styling: { 'font-size': '12.5px' } }, t);
+}

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

@@ -0,0 +1,120 @@
+import { dd } from '../../runtime.js';
+import { icon } from '../icon.js';
+
+const { div, span, p, button, h2, input, label } = dd;
+
+export default function pluginsView(state, ui) {
+  const plugins = state.plugins || [];
+  return div({ className: 'editor' },
+    div({ className: 'stage' },
+      div({ className: 'plugins' },
+        h2('Plugins'),
+        p({ className: 'sub', $styling: { color: 'var(--text-dim)', margin: '0 0 8px' } },
+          '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') }),
+          button({ className: 'btn' }, icon('plug', { size: 15 }), 'Install from URL…')
+            .on({ click: () => ui.exec('plugins.installFromUrl') }),
+        ),
+        plugins.length
+          ? div({ $styling: { display: 'flex', 'flex-direction': 'column', gap: '12px', 'margin-top': '14px' } }, ...plugins.map((pl) => installedCard(pl, state, ui)))
+          : div({ className: 'empty', $styling: { padding: '48px' } }, icon('plug', { size: 30 }), span('No plugins installed yet.')),
+      ),
+    ),
+  );
+}
+
+function installedCard(pl, state, ui) {
+  const connectivity = !pl.responsive ? 'not responding' : pl.manifest?.online === false ? 'offline' : 'connected';
+  const features = pl.features || [];
+  return div({ className: 'plugin-card' },
+    div({ className: 'top' },
+      div({ className: 'avatar' }, (pl.name || '?')[0].toUpperCase()),
+      div({ $styling: { flex: '1' } },
+        div({ className: 'name' }, pl.name, pl.version ? span({ $styling: { color: 'var(--text-faint)', 'font-weight': '400', 'margin-left': '6px' } }, 'v' + pl.version) : null),
+        div({ $styling: { 'font-size': '11px', color: 'var(--text-faint)' } }, pl.id),
+      ),
+      trustBadge(pl.trust),
+      span({ className: `status ${pl.status}` }, pl.status),
+    ),
+    pl.error ? div({ className: 'desc', $styling: { color: 'var(--danger)' } }, pl.error) : null,
+    div({ className: 'caps' }, ...(pl.capabilities || []).map((c) => span({ className: 'cap' }, c))),
+    (pl.endpoints || []).length
+      ? div({ className: 'plugin-endpoints', $styling: { 'font-size': '11px', color: 'var(--text-faint)', 'margin-top': '2px' } },
+          icon('plug', { size: 11 }), ' Network: ', (pl.endpoints || []).map((e) => e.host).join(', '))
+      : null,
+    pl.status === 'active'
+      ? div({ className: 'plugin-features' },
+          div({ className: 'pf-head' }, span(`Features · ${connectivity}`), span({ className: 'muted' }, `${features.filter((f) => f.available).length}/${features.length} available`)),
+          features.length
+            ? div({ className: 'pf-list' }, ...features.map(featureRow))
+            : 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,
+    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) }),
+      button({ className: 'btn danger' }, 'Uninstall').on({
+        click: () => ui.platform.workbench.showDialog({
+          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); },
+        }),
+      }),
+    ),
+  );
+}
+
+function settingsSection(pl, ui) {
+  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)),
+    ),
+  );
+}
+
+function settingRow(pl, s, ui) {
+  const key = `${pl.id}.${s.key}`;
+  const value = s.secret ? '' : (ui.platform.settings.get(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 ✓'; } },
+          })
+        : 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) }),
+    ),
+  );
+}
+
+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');
+}
+
+const KIND_ICON = { command: 'command', opener: 'file', indexer: 'search', statusItem: 'info' };
+function featureRow(f) {
+  return div({ className: `pf-row ${f.available ? '' : 'off'}` },
+    icon(KIND_ICON[f.kind] || 'command', { size: 13 }),
+    span({ className: 'pf-title' }, f.title),
+    span({ className: 'pf-kind' }, f.kind),
+    f.offline ? span({ className: 'pf-badge offline-ok', title: 'Works offline' }, 'offline ✓') : null,
+    span({ className: `pf-dot ${f.available ? 'on' : 'no'}`, title: f.available ? 'Available now' : 'Unavailable now' }),
+  );
+}

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

@@ -0,0 +1,258 @@
+import { dd } from '../../runtime.js';
+import { prettyKey, eventToKey } from '../../platform/keybindings.js';
+import { icon } from '../icon.js';
+import { listAssociations, rememberOpener } from '../../bl/openers.js';
+
+const { div, h2, h3, p, span, select, option, input, label, button } = dd;
+
+export default function settingsView(state, ui) {
+  const groups = ui.platform.settings.grouped();
+  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),
+        openersSection(ui),
+        keybindingsSection(ui),
+      ),
+    ),
+  );
+}
+
+function group(g, ui) {
+  return div({ className: 'group' },
+    h3(g.category),
+    ...g.items.map((s) => setting(s, ui)),
+  );
+}
+
+function setting(s, ui) {
+  return div({ className: 'setting' },
+    div({ className: 'info' },
+      div({ className: 't' }, s.title || s.key),
+      s.description ? div({ className: 'd' }, s.description) : null,
+    ),
+    div({ className: 'control' }, control(s, ui)),
+  );
+}
+
+function control(s, ui) {
+  const set = (v) => ui.platform.settings.set(s.key, v);
+  if (s.type === 'boolean') {
+    return label({ className: 'switch' },
+      input({ type: 'checkbox', checked: !!s.value }).on({ change: (e) => set(e.target.checked) }),
+      span({ className: 'track' }),
+    );
+  }
+  if (s.type === 'enum') {
+    return select({ className: 'input' },
+      ...s.enum.map((opt, i) =>
+        option({ value: opt, selected: s.value === opt }, (s.enumLabels && s.enumLabels[i]) || opt),
+      ),
+    ).on({ change: (e) => set(e.target.value) });
+  }
+  if (s.type === 'number') {
+    // Guard against a cleared field (Number('') === 0) or a paste yielding NaN, and
+    // clamp to the declared range so downstream consumers never see an invalid value.
+    const commit = (e) => {
+      let n = Number(e.target.value);
+      if (e.target.value === '' || Number.isNaN(n)) { e.target.value = s.value; return; }
+      if (s.minimum != null) n = Math.max(s.minimum, n);
+      if (s.maximum != null) n = Math.min(s.maximum, n);
+      e.target.value = n;
+      set(n);
+    };
+    return input({
+      className: 'input', type: 'number', value: s.value,
+      $attrs: { min: s.minimum ?? '', max: s.maximum ?? '' },
+    }).on({ change: commit });
+  }
+  return input({ className: 'input', value: s.value ?? '' }).on({ change: (e) => set(e.target.value) });
+}
+// Connecting an AI agent to this drive.
+//
+// Read-only, and deliberately so. Everything here is DEPLOYMENT configuration — which
+// identity provider issues the tokens, where the endpoint lives — supplied by the
+// environment or by whoever constructed the server. Pointing the drive at a different
+// authorization server changes who can reach every file in it, which is a `docker run`
+// decision rather than a preference, and a settings field would make it look otherwise.
+//
+// What this section is FOR is the two questions a self-hoster has and currently cannot
+// answer: what URL do I paste into my assistant, and why does it say 401. The second is
+// why `needsAuthorizationServer` is called out as a problem — a drive with auth on and
+// no authorization server configured looks perfectly set up and cannot work.
+//
+// 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;
+  if (!caps) return null; // capabilities never arrived; the shell has bigger problems
+  const mcp = caps.mcp;
+  const auth = caps.auth || { authorizationServers: [], source: 'none' };
+  if (!mcp?.enabled) {
+    return div({ className: 'group' }, h3('AI agents (MCP)'),
+      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 }));
+  };
+
+  const servers = auth.authorizationServers || [];
+  // Where the value came from matters when it is wrong: "we took this from your JWT
+  // issuer" points at a different file than "you set this".
+  const provenance = auth.source === 'jwt-issuer' ? 'from TROVE_JWT_ISSUER'
+    : auth.source === 'configured' ? 'from TROVE_AUTH_SERVER' : null;
+
+  return div({ className: 'group' },
+    h3('AI agents (MCP)'),
+    p({ className: 'sub' }, 'Point an AI assistant at this drive. It signs in as you and sees exactly the collections you can see.'),
+
+    div({ className: 'setting' },
+      div({ className: 'info' },
+        div({ className: 't' }, 'Server URL'),
+        div({ className: 'd' }, 'Paste this into your assistant\u2019s MCP settings.'),
+      ),
+      div({ className: 'control mcp-url' },
+        span({ className: 'mono' }, mcp.endpoint),
+        button({ className: 'btn small', title: 'Copy' }, icon('link', { size: 13 })).on({ click: copy(mcp.endpoint) }),
+      ),
+    ),
+
+    div({ className: 'setting' },
+      div({ className: 'info' },
+        div({ className: 't' }, 'Sign-in required'),
+        div({ className: 'd' }, mcp.requiresAuth
+          ? 'Agents must present a token, the same one this browser uses.'
+          : 'This drive is open, so agents connect without a token \u2014 exactly like the web app does.'),
+      ),
+      div({ className: 'control' }, span({ className: 'mono' }, mcp.requiresAuth ? 'Yes' : 'No')),
+    ),
+
+    // The failure that looks like success. Before the value, because it is the answer
+    // to "I set this up and my agent just says 401".
+    mcp.needsAuthorizationServer
+      ? div({ className: 'mcp-warn' }, icon('warn', { size: 15 }),
+        span('This drive requires a token but no authorization server is set, so an agent has '
+          + 'nowhere to sign in. Set TROVE_AUTH_SERVER (or TROVE_JWT_ISSUER) to the issuer URL '
+          + 'of your identity provider and restart.'))
+      : null,
+
+    div({ className: 'setting' },
+      div({ className: 'info' },
+        div({ className: 't' }, 'Authorization server'),
+        div({ className: 'd' }, 'Where clients are sent to sign in \u2014 for the whole drive, not just for agents. '
+          + 'Set with TROVE_AUTH_SERVER; defaults to TROVE_JWT_ISSUER when that is set.'),
+      ),
+      div({ className: 'control' },
+        servers.length
+          ? span({ className: 'mono' }, servers.join(', ') + (provenance ? ` (${provenance})` : ''))
+          : span({ className: 'mono muted' }, 'not set'),
+      ),
+    ),
+
+    div({ className: 'setting' },
+      div({ className: 'info' },
+        div({ className: 't' }, 'Discovery document'),
+        div({ className: 'd' }, 'What a client reads to find out how to authenticate (RFC 9728).'),
+      ),
+      div({ className: 'control mcp-url' }, span({ className: 'mono small' }, auth.metadataUrl)),
+    ),
+  );
+}
+
+// Default openers per file type — the "always use this" choices from the opener
+// chooser. Each row shows the type → viewer; the × forgets it (so the next open of
+// that type asks again). Empty when the user hasn't set any defaults.
+function openersSection(ui) {
+  const rows = listAssociations(ui.platform);
+  return div({ className: 'group' },
+    h3('Default Openers'),
+    rows.length
+      ? div({},
+          ...rows.map((r) =>
+            div({ className: 'setting' },
+              div({ className: 'info' },
+                div({ className: 't' }, r.typeKey),
+                div({ className: 'd' }, r.missing ? `${r.openerTitle} (no longer installed)` : `Opens with ${r.openerTitle}`),
+              ),
+              div({ className: 'control' },
+                button({ className: 'iconbtn', title: 'Forget this default' }, icon('close', { size: 14 }))
+                  .on({ click: () => rememberOpener(ui.platform, r.typeKey, null) }),
+              ),
+            ),
+          ),
+        )
+      : p({ className: 'sub', $styling: { margin: 0 } }, 'No default openers set yet. When a file type has more than one viewer, you can pick one and check “Always use this”.'),
+  );
+}
+
+// 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;
+
+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);
+  return div({ className: 'group' },
+    h3('Keyboard Shortcuts'),
+    p({ className: 'sub' }, 'Click a shortcut to record a new one. Esc cancels; Backspace clears it.'),
+    // Every binding, not the first 40. The cap was arbitrary and silent — with no "N
+    // 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: 'd' }, b.command),
+        ),
+        div({ className: 'control' },
+          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)))
+            .on({
+              click: () => { capturing = listening ? null : b.bindingId; ui.rerender?.(); },
+              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(); }
+                // 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));
+                stop();
+              },
+              $attach: (el) => { if (listening) queueMicrotask(() => el.focus()); },
+            }),
+          custom
+            ? button({ className: 'c-link', title: 'Back to the default' }, 'reset')
+              .on({ click: () => { kb.rebind(b, null); ui.rerender?.(); } })
+            : null,
+        ),
+      );
+    }),
+  );
+}