@3sln/trove 0.0.11 → 0.0.13

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

@@ -33,19 +33,33 @@ function promptFor(caps, { compact = false, modal = false } = {}) {
   return compact || modal ? base : `${base} · ! run a command`;
 }
 
-let searchTimer = null;
-function runSearch(ui, query) {
+// Debounce timers, one PER SURFACE. workbench.js mounts the home launcher and the modal
+// one together, and a single module slot meant typing in the modal cancelled the home
+// box's pending search — one keystroke in one component silently discarding another's.
+// A timer is not application state (the engine has no use for a pending timeout), but it
+// does belong to the surface that armed it.
+const timers = new Map();
+const arm = (key, fn, ms) => {
+  clearTimeout(timers.get(key));
+  timers.set(key, setTimeout(fn, ms));
+};
+
+function runSearch(ui, key, query) {
   // SearchAction owns search state; the launcher only dispatches (no direct .set).
-  clearTimeout(searchTimer);
-  searchTimer = setTimeout(() => ui.engine.dispatch(new SearchAction(query)), 240);
+  arm(key, () => ui.engine.dispatch(new SearchAction(query)), 240);
 }
-function clearSearch(ui) {
+function clearSearch(ui, key) {
+  // The pending timer FIRST. Typing then pressing Escape inside 240ms let the search for
+  // what was typed land after the clear — the results list stayed put (it reads the launch
+  // query) while the resolved bar said "Searching …" over the home list, and `pickView`
+  // could switch the view under it. SearchAction now also refuses a superseded answer, so
+  // this is belt and braces on a race that produced a visibly wrong screen.
+  clearTimeout(timers.get(key));
   ui.engine.dispatch(new SetLaunchQueryAction(''));
-  ui.engine.dispatch(new SearchAction('')); // empty query resets results/ran/error in the service
+  ui.engine.dispatch(new SearchAction('')); // empty query resets results/ran/error
 }
-function runFilter(ui, filters, text) {
-  clearTimeout(searchTimer);
-  searchTimer = setTimeout(() => ui.engine.dispatch(new FilterAction(filters, text)), 200);
+function runFilter(ui, key, filters, text) {
+  arm(key, () => ui.engine.dispatch(new FilterAction(filters, text)), 200);
 }
 
 export default function launcher(state, ui, opts = {}) {
@@ -60,13 +74,15 @@ export default function launcher(state, ui, opts = {}) {
   const flat = groups.flatMap((g) => g.items);
   const idx = flat.length ? Math.min(state.wb.launch.index, flat.length - 1) : 0;
 
+  // Which surface this is, so the two launchers do not share one debounce slot.
+  const timerKey = modal ? 'modal' : 'home';
   const onInput = (e) => {
     const v = e.target.value;
     ui.engine.dispatch(new SetLaunchQueryAction(v));
     if (v.startsWith('!')) return; // command mode: no query dispatch
     const { text, filters } = parseTagQuery(v);
-    if (filters.length) runFilter(ui, filters, text); // drive-wide tag/property query
-    else runSearch(ui, text);
+    if (filters.length) runFilter(ui, timerKey, filters, text); // drive-wide tag/property query
+    else runSearch(ui, timerKey, text);
   };
   // Moving the highlight with the KEYBOARD is selecting, as far as the rest of the app
   // is concerned. Without this, `explorer.selectedNodes()` was permanently empty and
@@ -97,7 +113,7 @@ export default function launcher(state, ui, opts = {}) {
     else if (e.key === 'ArrowDown') { e.preventDefault(); move(1); }
     else if (e.key === 'ArrowUp') { e.preventDefault(); move(-1); }
     else if (e.key === 'Enter') { e.preventDefault(); activate(ui, flat[idx]); }
-    else if (e.key === 'Escape' && q) { e.preventDefault(); clearSearch(ui); }
+    else if (e.key === 'Escape' && q) { e.preventDefault(); clearSearch(ui, timerKey); }
     // The row under the highlight is the subject of the row menu, so the key that opens
     // one on every other list opens this one too — without making the user leave the
     // search box to reach it.
@@ -124,7 +140,7 @@ export default function launcher(state, ui, opts = {}) {
         placeholder: promptFor(state.caps, { compact: state.vp?.mode === 'phone', modal }) })
         .on({ input: onInput, keydown: onKey }),
       q ? button({ className: 'launch-clear', title: 'Clear' }, icon('close', { size: 14 }))
-        .on({ click: () => clearSearch(ui) }) : null,
+        .on({ click: () => clearSearch(ui, timerKey) }) : null,
       // Only where the browser can transcribe WITHOUT sending audio anywhere. A remote's
       // own mic needs no button from us — it dictates into this field once it is focused,
       // which is what `search.voice` is really for.

package/packages/web/src/ui/components/openers/index.js

@@ -177,22 +177,27 @@ function pluginOpenerView(opener, node, ui) {
   // in the DOM would reload it). $attach hands .pv-host to mountViewer as the tracking
   // target; $detach lets it dock or tear down. `.opaque()` keeps dodo from reconciling
   // these (host-managed) nodes so their lifecycle hooks stay stable across re-renders.
-  // A .pv-status overlay shows a spinner until the plugin opens the file (the iframe
-  // is transparent while loading) and an error if it never does.
+  // The status overlay shows a spinner until the plugin opens the file (the iframe is
+  // transparent while loading) and an error if it never does. It is a CELL and a `watch`,
+  // the same shape `mediaWithError` above uses — it used to be functions stamped onto the
+  // status element (`el._ready`, `el._error`) and fetched back by the sibling with
+  // `el.parentElement?.querySelector('.pv-status')`. Every `?.` in that chain silently
+  // no-ops, so reordering or wrapping these two divs left the spinner up forever with
+  // nothing reporting it. `.pv-host` stays opaque and imperative because it genuinely is:
+  // re-parenting the iframe would reload it.
+  const status = cell({ ready: false, error: null });
   return div({ className: 'viewer plugin-viewer' },
-    div({ className: 'pv-status' }).on({
-      $attach: (el) => {
-        el.innerHTML = '<div class="loading"><div class="spinner"></div><span>Opening…</span></div>';
-        el._ready = () => { el.style.display = 'none'; };
-        el._error = (msg) => { el.style.display = 'grid'; el.innerHTML = ''; el.appendChild(errorEl(msg)); };
-      },
-    }).opaque(),
+    watch(status, (st) => {
+      if (st.ready) return null;
+      return div({ className: 'pv-status' }, st.error
+        ? div({ className: 'fallback' }, icon('warn', { size: 40 }), span(st.error))
+        : div({ className: 'loading' }, div({ className: 'spinner' }), span('Opening…')));
+    }),
     div({ className: 'pv-host' }).on({
       $attach: (el) => {
-        const status = el.parentElement?.querySelector('.pv-status');
         el._detach = ui.platform.plugins.mountViewer(opener.pluginId, el, node, opener.id, {
-          onReady: () => status?._ready?.(),
-          onError: (msg) => status?._error?.(msg || 'This viewer failed to load'),
+          onReady: () => status.setValue({ ready: true, error: null }),
+          onError: (msg) => status.setValue({ ready: false, error: msg || 'This viewer failed to load' }),
         });
       },
       $detach: (el) => { el._detach?.(); el._detach = null; },
@@ -200,16 +205,6 @@ function pluginOpenerView(opener, node, ui) {
   );
 }
 
-// A plain DOM error node for the imperatively-managed .pv-status overlay.
-function errorEl(message) {
-  const wrap = document.createElement('div');
-  wrap.className = 'fallback';
-  const s = document.createElement('span');
-  s.textContent = message || 'Failed to open';
-  wrap.appendChild(s);
-  return wrap;
-}
-
 function errorView(message) {
   return div({ className: 'viewer' }, div({ className: 'fallback' }, icon('warn', { size: 40 }), span(message || 'Failed to open')));
 }

package/packages/web/src/ui/components/openers/markdown.js

@@ -21,7 +21,7 @@
 import { dd, mapCell } from '../../../runtime.js';
 import { icon } from '../../icon.js';
 import { parseTroveUri } from '@3sln/trove/core/links.js';
-import { openTroveLink } from '../../../bl/links.js';
+import { OpenTroveLinkAction } from '../../../bl/links.js';
 import { FileText } from '../../../bl/queries.js';
 import { watchQuery } from '../../../bl/watchQuery.js';
 
@@ -213,7 +213,7 @@ function link(href, label, node, ui) {
     return a({ className: 'md-link md-trove', href: '#', title: href }, label).on({
       click: (e) => {
         e.preventDefault();
-        openTroveLink(ui, href, { from: node });
+        ui.engine.dispatch(new OpenTroveLinkAction(href, node));
       },
     });
   }

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

@@ -293,17 +293,43 @@ function storeFields(driver, form, set) {
 }
 
 // ---- Context menu ----------------------------------------------------------
+// The menu's own geometry, in the one place that can measure it. `MENU_ROW` must match the
+// `.mi` height in the stylesheet; it used to be spelled out at the call sites too, so
+// changing the CSS made status-bar menus overlap their trigger while the clamp below
+// compensated by a different amount.
+const MENU_WIDTH = 220;
+const MENU_ROW = 34;
+const MENU_PAD = 20;
+
+/**
+ * Where a menu of `height` should sit, given a point, a rect to hang off, or nothing.
+ *
+ * Flipping and clamping are the same decision and belong together: anchoring ABOVE a
+ * trigger produces a negative top, which is exactly what the clamp is for.
+ */
+function placeMenu(at, height) {
+  const w = window.innerWidth;
+  const h = window.innerHeight;
+  // No anchor — a keyboard-invoked menu has no geometry to hang off, so it is centred.
+  if (!at) return { x: Math.round(w / 2 - MENU_WIDTH / 2), y: Math.round(h / 3) };
+  const wantX = at.rect ? at.rect.left : at.x;
+  const wantY = at.rect
+    ? (at.prefer === 'up' ? at.rect.top - 8 - height : at.rect.bottom + 8)
+    : at.y;
+  return {
+    x: Math.max(8, Math.min(wantX, w - MENU_WIDTH)),
+    y: Math.max(8, Math.min(wantY, h - height)),
+  };
+}
+
 export function contextMenu(state, ui) {
   const m = state.overlay.contextMenu;
   if (!m || !m.items?.length) return null;
-  // Clamp on both edges. Anchoring a menu ABOVE its trigger (the status bar opens
-  // upward) produces a negative top, and only the far edge used to be clamped.
   // The height is whatever the menu needs OR whatever the window allows, whichever is
   // smaller — past that the menu scrolls (see `.menu`), so pushing it further up buys
   // nothing and would just leave a gap at the bottom.
-  const wanted = Math.min(m.items.length * 34 + 20, window.innerHeight - 24);
-  const x = Math.max(8, Math.min(m.x, window.innerWidth - 220));
-  const y = Math.max(8, Math.min(m.y, window.innerHeight - wanted));
+  const wanted = Math.min(m.items.length * MENU_ROW + MENU_PAD, window.innerHeight - 24);
+  const { x, y } = placeMenu(m.at, wanted);
   return div({},
     div({ className: 'scrim', $styling: { background: 'transparent' } }).on({ click: () => ui.engine.dispatch(new CloseContextMenuAction()), contextmenu: (e) => { e.preventDefault(); ui.engine.dispatch(new CloseContextMenuAction()); } }),
     div({ className: 'menu', $styling: { left: x + 'px', top: y + 'px' } },

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

@@ -7,15 +7,16 @@
 import { dd } from '../../runtime.js';
 import { icon } from '../icon.js';
 import { bytes as fmtBytes } from '../format.js';
-import { draftFor } from '../../bl/viewState.js';
+import { draftFor, PLUGIN_REVIEW as KEY } from '../../bl/viewState.js';
 import { CloseDialogAction, SetViewStateAction } from '../../bl/actions.js';
+import { activate } from '../activate.js';
 import { describeTrust } from '../../bl/trust.js';
 
 const { div, span, button, h3, p, label, input } = dd;
 
 // The ticked capabilities, keyed to the dialog instance. Engine state — it decides which
-// boxes render checked. See bl/viewState.js.
-const KEY = 'pluginReview';
+// boxes render checked, and it is where InstallReviewedPluginAction reads the grants from.
+// See bl/viewState.js.
 
 export function pluginReview(d, ui, view) {
   const s = d.summary;
@@ -61,7 +62,9 @@ export function pluginReview(d, ui, view) {
         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]) }),
+          // The spec's own actions, run the way every other item's are. The install used
+          // to be a closure ON THE SPEC, which put an effect inside engine state.
+          .on({ click: () => !blocked && activate(ui, { actions: d.installActions }) }),
       ),
     ),
   );

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

@@ -1,6 +1,6 @@
 import { dd } from '../../runtime.js';
 import { icon } from '../icon.js';
-import { CloseDialogAction, ExecCommandAction, OpenPluginPanelAction, RefreshPluginAction, SetPluginSecretAction, SetSettingAction, ShowDialogAction, UninstallPluginAction } from '../../bl/actions.js';
+import { 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;

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

@@ -1,15 +1,13 @@
 import { dd } from '../../runtime.js';
 import { eventToKey } from '../../platform/keybindings.js';
 import { icon } from '../icon.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) {
+export default function settingsView(state, ui, regions) {
   const groups = state.settingsGroups || new Map();
   return div({ className: 'editor' },
     div({ className: 'stage' },
@@ -21,7 +19,7 @@ export default function settingsView(state, ui) {
         encryptionSection(state, ui),
         apiKeysSection(state, ui),
         openersSection(state.assoc, ui),
-        keybindingsSection(ui),
+        regions.keybindings(),
       ),
     ),
   );
@@ -182,22 +180,28 @@ const CAPS = [
 
 const ANY = '*';
 
-/** One-shot guard so a render does not queue a second load while the first is in flight. */
-let keysRequested = false;
-
 function apiKeysSection(state, ui) {
   const keys = state.keys || {};
 
-  // Loaded lazily, when Settings is first opened — the list is admin-only and most
-  // sessions never need it, so it is not worth a request at boot.
-  if (!keysRequested && !keys.loaded && !keys.loading) {
-    keysRequested = true;
-    ui.engine.dispatch(new ExecCommandAction('keys.load'));
+  // Nothing to dispatch from here. The list is loaded by the query's `bootAction` — it
+  // arrives because something is LOOKING at it, which is what makes it lazy without a
+  // module-level flag and a render with a side effect. See bl/queries.js.
+  //
+  // A non-admin's 403 is the correct answer rather than an error: the section simply is
+  // not part of their settings screen.
+  if (keys.forbidden) return null;
+  if (keys.error) {
+    return div({ className: 'group' },
+      h3('API keys'),
+      // Said out loud. This used to render nothing at all on any failure, because the
+      // catch set `loaded` as well as `error` — so one dropped request left a blank space
+      // where the section belongs, with no message and no way to try again.
+      p({ className: 'sub' }, `Couldn’t load the key list: ${keys.error}`),
+      div({ className: 'keys-actions' },
+        button({ className: 'btn' }, 'Try again')
+          .on({ click: () => ui.engine.dispatch(new ExecCommandAction('keys.load')) })),
+    );
   }
-
-  // A non-admin gets a 403 here, which is the correct answer rather than an error worth
-  // showing. The section simply is not part of their settings screen.
-  if (keys.error && !keys.keys?.length) return null;
   if (!keys.loaded) return null;
 
   const collections = state.ex?.collections || [];
@@ -477,7 +481,7 @@ function openersSection(rows, ui) {
 
 // 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';
+export const CAPTURE = 'keybindingCapture';
 
 // Its own region, over the keybindings view and the capture state.
 //
@@ -487,16 +491,15 @@ const CAPTURE = 'keybindingCapture';
 //
 // 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) {
-  // 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) {
+// Built once and PASSED IN, beside the other regions in ui/compositions/workbench.js. It
+// was built at module scope with `kbRegion ??= region(ui.engine, …)` — right that a region
+// must be built once, wrong about where: at module scope it captures the FIRST `ui` and
+// engine it ever sees and pins them for the module's life, which is the shape `watchQuery`
+// deliberately avoids by keying its cache on the engine. Folding it into the parent
+// settingsView region would also work and costs granularity — a chord capture would
+// re-render the whole settings screen — so it is handed down instead.
+
+export 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));

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

@@ -122,8 +122,9 @@ export default function statusBar(state, ui) {
             { sep: true },
           ]);
           if (off.pins.length > 12) items.push({ label: `…and ${off.pins.length - 12} more`, actions: [] });
-          const r = e.currentTarget.getBoundingClientRect();
-          ui.engine.dispatch(new ShowContextMenuAction(r.left, r.top - 8 - items.length * 34, items));
+          ui.engine.dispatch(new ShowContextMenuAction(items, {
+            rect: e.currentTarget.getBoundingClientRect(), prefer: 'up',
+          }));
         } })
       : null,
     button({ className: 'seg', title: 'Switch collection' },
@@ -135,16 +136,17 @@ export default function statusBar(state, ui) {
         const items = ex.collectionMenu || [];
         // With nowhere else to go, the segment is a label, not a dead menu.
         if (items.length > 1 || ex.canCreateCollection) {
-          const r = e.currentTarget.getBoundingClientRect();
-          ui.engine.dispatch(new ShowContextMenuAction(r.left, r.top - 8 - items.length * 34, items));
+          ui.engine.dispatch(new ShowContextMenuAction(items, {
+            rect: e.currentTarget.getBoundingClientRect(), prefer: 'up',
+          }));
         } else ui.engine.dispatch(new ExecCommandAction('workbench.view.home'));
       } }),
     active.length
       ? button({ className: 'seg', title: 'Active uploads — click to cancel' }, div({ className: 'spinner', $styling: { width: '11px', height: '11px' } }), span(`${active.length} uploading`))
-        .on({ click: (e) => ui.engine.dispatch(new ShowContextMenuAction(e.clientX, e.clientY, active.map((t) => ({
+        .on({ click: (e) => ui.engine.dispatch(new ShowContextMenuAction(active.map((t) => ({
           label: `Cancel ${t.name} (${Math.round((t.ratio || 0) * 100)}%)`, icon: 'close', danger: true,
           actions: [new CancelTransferAction(t.id)],
-        })))) })
+        })), { x: e.clientX, y: e.clientY })) })
       : span({ className: 'seg', title: ex.nextCursor ? `Showing ${items.length} of ${f.totalKnown ? totalItems : 'more'}` : '' },
         `${totalItems.toLocaleString()}${f.totalKnown || !f.partial ? '' : '+'} item${totalItems === 1 ? '' : 's'}`),
     ...left,

package/packages/web/src/ui/components/views/grid.js

@@ -14,7 +14,7 @@
 // point of the contribution.
 
 import { dd } from '../../../runtime.js';
-import { icon, iconForNode } from '../../icon.js';
+import { icon } from '../../icon.js';
 import { groupHeader, menuButton, openRowMenu } from './parts.js';
 import { attachMedia } from '../../media.js';
 import { activate } from '../../activate.js';
@@ -88,7 +88,7 @@ function tile(it, active, { hover, select }, ui) {
       // the image fails — a deleted object, a format the browser won't decode, a 401 —
       // hiding the <img> uncovers exactly what the list would have shown, rather than
       // leaving the browser's broken-image glyph in a gallery.
-      icon(node ? iconForNode(node) : it.icon, { size: 26 }),
+      icon(it.icon, { size: 26 }),
       // The `src` is minted rather than built — a tile fetches without our Authorization
       // header, so the URL has to carry its own grant. Minting is batched (see
       // platform/mediaUrls.js), so a wall of tiles costs one request, not one each.

package/packages/web/src/ui/components/views/parts.js

@@ -65,5 +65,5 @@ export function openRowMenu(anchor, it, ui, event, select) {
   // a detached node whose rect is all zeroes.
   const items = it.menu();
   select?.();
-  ui.engine.dispatch(new ShowContextMenuAction(x, y, items));
+  ui.engine.dispatch(new ShowContextMenuAction(items, { x, y }));
 }

package/packages/web/src/ui/compositions/workbench.js

@@ -5,15 +5,15 @@
 // every QUERY at once — which is a different thing from what it used to know, when it
 // held the bag of services every component reached through.
 
-import { dd, derive, constant, watch } from '../../runtime.js';
+import { dd, derive, watch } from '../../runtime.js';
 import { region } from '../region.js';
 import { watchQuery } from '../../bl/watchQuery.js';
 import * as q from '../../bl/queries.js';
-import { CloseSearchModalAction, ExecCommandAction, NavigateAction } from '../../bl/actions.js';
+import { CloseSearchModalAction, NavigateAction } from '../../bl/actions.js';
 import activityBar from '../components/activityBar.js';
 import statusBar from '../components/statusBar.js';
 import launcher from '../components/launcher.js';
-import settingsView from '../components/settingsView.js';
+import settingsView, { keybindingRows, CAPTURE } from '../components/settingsView.js';
 import collectionGate from '../components/collectionGate.js';
 import pluginsView from '../components/pluginsView.js';
 import adminView from '../components/adminView.js';
@@ -142,14 +142,28 @@ export default function workbench({ engine, platform }) {
     // or auto-dismissing used to rebuild the entire shell — including every row of the
     // file list — to add a line in the corner.
     toasts: region(engine, { notif: q.notifications }, (s) => toasts(s, ui)),
-    activityPanel: region(engine, { act: q.activity }, (s) => activityPanel(s, ui)),
+    // `overlay` as well as `act`: the panel's open flag is overlay state like every other
+    // transient surface, and its contents are the poller's.
+    activityPanel: region(engine, { act: q.activity, overlay: q.overlay }, (s) => activityPanel(s, ui)),
+    // A region like its neighbours, and it has to be: it reads `plugins`, which the main
+    // snapshot does not contain — so `state.plugins` was permanently undefined, `|| []`
+    // swallowed it, and the panel header showed the raw plugin id where the display name
+    // belongs. It was the one component the region split left reading a key nobody
+    // supplies. Being a region also takes it off the main snapshot, which is the point.
+    pluginPanel: region(engine, { overlay: q.overlay, plugins: q.plugins },
+      (s) => pluginPanel(s, ui)),
     // Screens that are usually NOT on screen. Their state still invalidated the shell from
     // wherever they were: minting an API key or a plugin reporting in rebuilt the file
     // list. Each reads a couple of slices, so each is a cheap region.
     settingsView: region(engine, {
       settings: q.settings, settingsGroups: q.settingsGroups, keys: q.apiKeys,
       caps: q.capabilities, ex: q.explorer, assoc: q.openerAssociations,
-    }, (s) => settingsView(s, ui)),
+    }, (s) => settingsView(s, ui, regions)),
+    // The keybinding table is its own region so a chord capture does not re-render the
+    // whole settings screen. Built HERE, with every other region — at module scope it
+    // pinned the first engine it ever saw.
+    keybindings: region(engine, { bindings: q.keybindings, view: q.viewState },
+      (s) => keybindingRows(s.bindings || [], ui, s.view?.[CAPTURE] ?? null)),
     pluginsView: region(engine, { plugins: q.plugins, settings: q.settings },
       (s) => pluginsView(s, ui)),
     // Gathers what already exists rather than fetching anything new — see adminView.js.
@@ -196,7 +210,7 @@ function view(state, ui, regions) {
     regions.commandPalette(),
     dialog(state, ui),
     contextMenu(state, ui),
-    pluginPanel(state, ui),
+    regions.pluginPanel(),
     regions.toasts(),
     regions.transferTray(),
     regions.activityPanel(),

package/packages/web/src/ui/sanitize.js

@@ -33,11 +33,6 @@ export function sanitizeFragment(html) {
   return out;
 }
 
-/** Sanitize `html` and set it as the only content of `el`. */
-export function setSanitizedHtml(el, html) {
-  el.replaceChildren(sanitizeFragment(html));
-}
-
 /** The plain-text content of `html`, for tooltips and other attribute contexts. */
 export function htmlToText(html) {
   const frag = sanitizeFragment(html);

package/packages/web/src/workbench.js

@@ -29,7 +29,10 @@
 import { dd, effect } from './runtime.js';
 import { createPlatform } from './platform/index.js';
 import { createApp } from './bl/index.js';
-import { NavigateAction, UploadFilesAction, OpenInitialCollectionAction, OpenSearchModalAction, OpenInPanelAction } from './bl/actions.js';
+import {
+  NavigateAction, UploadFilesAction, OpenInitialCollectionAction, OpenSearchModalAction,
+  OpenInPanelAction, ShowContextMenuAction,
+} from './bl/actions.js';
 import { parsePackage } from './platform/pluginPackage.js';
 import workbenchComposition from './ui/compositions/workbench.js';
 import { registerBuiltinOpeners } from './ui/components/openers/index.js';
@@ -48,6 +51,7 @@ import { attachMedia } from './ui/media.js';
  * @param {Array}   [options.views]     extra views: `{ id, title, icon?, match?, priority?, render, move? }`
  * @param {Array}   [options.settings]  extra setting schemas, for whatever those contribute
  * @param {boolean} [options.serviceWorker] register /sw.js (default true)
+ * @param {boolean} [options.debug]   install `window.__trove` (default off — see below)
  * @returns {{platform: object, engine: object, app: object}}
  */
 export function createWorkbench({
@@ -57,6 +61,14 @@ export function createWorkbench({
   views = [],
   settings = [],
   serviceWorker = true,
+  // OFF unless someone asks. `window.__trove` is the one place the entire resource graph —
+  // engine, platform, app, plus a direct `plugins.install` from raw bytes that goes around
+  // the review dialog — is reachable without a dispatch, and it shipped unconditionally in
+  // the production bundle. The global is how automation asks: Playwright's `addInitScript`
+  // sets it before any page script runs, and a developer can set it and reload. Nothing an
+  // attacker controls can set a global in this origin, and a person with our console open
+  // can already do all of it.
+  debug = globalThis.__troveDebug === true,
 } = {}) {
   const platform = createPlatform({ baseUrl });
   const { engine, app } = createApp(platform);
@@ -111,24 +123,26 @@ export function createWorkbench({
     window.addEventListener('load', () => navigator.serviceWorker.register('/sw.js').catch(() => {}));
   }
 
-  installDragAndDrop(engine, app);
+  installDragAndDrop(engine);
 
   // --- initial load ---------------------------------------------------------
-  (async () => {
-    try {
-      // What the server can do is an engine query now — see bl/queries.js. It used to be
-      // assigned onto `platform` here and followed by `workbench.touch()`, a poke at an
-      // unrelated store purely to make the shell redraw, because writing a plain field
-      // invalidates nothing. The query has somewhere for the value to arrive, so the fetch
-      // belongs to it and this no longer has to announce it.
-    } catch (err) {
-      platform.notifications.error(`Cannot reach the Trove server: ${err.message}`);
-    }
-    // Land on a collection the user can actually read — see OpenInitialCollectionAction.
-    engine.dispatch(new OpenInitialCollectionAction());
-  })();
+  // Land on a collection the user can actually read — see OpenInitialCollectionAction.
+  //
+  // This was an async IIFE whose `try` block held only a comment, so its `catch` was not
+  // merely dead but a CLAIM: a reader looking for where boot verifies the server is
+  // reachable found "Cannot reach the Trove server" and it could never fire. The capability
+  // fetch it once guarded belongs to the `capabilities` provider now, whose rejection arm
+  // deliberately swallows — whether boot should report an unreachable server is that
+  // provider's decision to make, not a wrapper's around one synchronous call.
+  engine.dispatch(new OpenInitialCollectionAction());
+
+  if (debug) installDebugHandle({ platform, engine, app });
+
+  return { platform, engine, app };
+}
 
-  // Expose for debugging / e2e.
+/** The automation handle. See the `debug` option — this is not installed by default. */
+function installDebugHandle({ platform, engine, app }) {
   window.__trove = {
     platform, engine, app,
     // Test/automation hook: install a package from raw zip bytes.
@@ -137,13 +151,17 @@ export function createWorkbench({
       assessTrust: (pkg) => platform.plugins.assessTrust(pkg),
       install: (pkg, opts) => platform.plugins.install(pkg, opts),
       NavigateAction,
+      // The intents that take a SUBJECT, and so have no command to execute. Everything
+      // else a probe wants is `platform.commands.execute(id)` — the same path a click
+      // takes. These dispatch rather than writing state, so the engine sees a probe's
+      // actions exactly as it sees a person's.
+      open: (node, openerId) => platform.dispatch(new OpenInPanelAction(node, openerId)),
+      contextMenu: (items, at) => platform.dispatch(new ShowContextMenuAction(items, at)),
       // Keeping a media element pointed at a URL that still works is the half of signed
       // URLs that only shows up over time, so it is drivable from a probe.
       attachMedia,
     },
   };
-
-  return { platform, engine, app };
 }
 
 /**
@@ -178,7 +196,7 @@ function installDoubleShift(engine) {
 }
 
 // Dropping files anywhere on the window uploads them to the open collection.
-function installDragAndDrop(engine, app) {
+function installDragAndDrop(engine) {
   let dragDepth = 0;
   window.addEventListener('dragenter', (e) => {
     if (!e.dataTransfer?.types.includes('Files')) return;