@3sln/trove 0.0.7 → 0.0.9

package/packages/web/src/platform/whenclause.js

@@ -3,10 +3,16 @@
 // a context (a flat key→value map from the ContextKeyService) and returns a
 // boolean.
 //
-// Supported: bare keys (truthy), !key, ==, !=, >, <, >=, <=, =~ /re/, && , ||,
+// Supported: bare keys (truthy), !key, ==, !=, >, <, >=, <=, =~ /re/flags, && , ||,
 // parentheses, string/number/boolean literals. Expressions are parsed once into
 // a predicate function and cached, so evaluation on every keydown is cheap.
 //
+// The compiled predicate carries `.keys`: every context key the expression names. That is
+// what lets a clause be WATCHED rather than polled — see ContextRegistry#watch, which
+// derives a cell over exactly those keys, so a clause about `view.active` stops recomputing
+// every time the selection changes. Collected while parsing because that is the only place
+// the distinction between a key and a literal is known.
+//
 // A key is either a core context key (`view.active`, `explorer.hasSelection`) or a
 // contribution URI naming a plugin's `register` — `trove+contrib:acme.com/docs/busy`.
 // Registers are addressed by their full URI precisely because they're contributions
@@ -19,10 +25,16 @@ export function compileWhen(expr) {
   if (cache.has(expr)) return cache.get(expr);
   let fn;
   try {
-    fn = new Parser(expr).parseExpression();
+    const parser = new Parser(expr);
+    fn = parser.parseExpression();
+    // The keys this clause reads. Frozen: it is shared by every caller through the cache.
+    fn.keys = Object.freeze([...parser.keys]);
   } catch (err) {
     console.warn(`Invalid when clause: "${expr}" — ${err.message}`);
     fn = () => false;
+    // A clause that could not be parsed depends on nothing, so watching it yields a cell
+    // that is constantly false rather than one that never settles.
+    fn.keys = Object.freeze([]);
   }
   cache.set(expr, fn);
   return fn;
@@ -32,15 +44,21 @@ export function evaluateWhen(expr, ctx) {
   return compileWhen(expr)(ctx || {});
 }
 
+/** Every context key `expr` names — `[]` for a constant or unparseable clause. */
+export function keysOf(expr) {
+  return compileWhen(expr).keys ?? [];
+}
+
 // Note the `trove+contrib:` alternative comes before the regex-literal one: a URI's
 // slashes would otherwise start a /…/ literal and swallow the rest of the expression.
-const TOKEN = /\s*(=~|==|!=|>=|<=|&&|\|\||[()!<>]|trove\+contrib:[A-Za-z0-9_./-]+|\/(?:\\.|[^/])*\/|'(?:\\.|[^'])*'|"(?:\\.|[^"])*"|[A-Za-z0-9_.:-]+)/y;
+const TOKEN = /\s*(=~|==|!=|>=|<=|&&|\|\||[()!<>]|trove\+contrib:[A-Za-z0-9_./-]+|\/(?:\\.|[^/])*\/[a-z]*|'(?:\\.|[^'])*'|"(?:\\.|[^"])*"|[A-Za-z0-9_.:-]+)/y;
 
 class Parser {
   constructor(src) {
     this.src = src;
     this.tokens = this.#lex(src);
     this.pos = 0;
+    this.keys = new Set();
   }
   #lex(src) {
     const out = [];
@@ -137,6 +155,7 @@ class Parser {
       return () => s;
     }
     // A context key.
+    this.keys.add(t);
     return (c) => c[t];
   }
 }

package/packages/web/src/styles.css

@@ -458,12 +458,23 @@ kbd {
 .scrim { position: fixed; inset: 0; background: #0006; backdrop-filter: blur(1.5px); z-index: 40; }
 
 .palette {
-  position: fixed; top: 12vh; left: 50%; transform: translateX(-50%);
+  position: fixed; top: 12vh; left: 50%; translate: -50% 0;
   width: min(640px, 92vw); background: var(--bg-elevated); border: 1px solid var(--border-strong);
   border-radius: 12px; box-shadow: var(--shadow); z-index: 50; overflow: hidden;
   animation: pop .13s var(--ease);
 }
-@keyframes pop { from { opacity: 0; transform: translate(-50%, -6px) scale(.98); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
+/* Transform-neutral on purpose.
+
+   This used to end at `translate(-50%, 0)` — the command palette's horizontal centring,
+   baked into a shared animation. `animation-fill-mode` is `none`, so when the animation
+   finished the transform reverted to the element's own and anything that did not happen to
+   want exactly that offset jumped by the difference: the context menu, plugin panel and
+   inbox each snapped right by half their width, and the dialog dropped half its height
+   because the keyframe kept the X centring and lost the Y.
+
+   Elements that need centring now do it with the standalone `translate` property, which
+   composes with `transform` instead of competing for the same slot. */
+@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
 .palette .search { display: flex; align-items: center; gap: 9px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
 .palette .search input { flex: 1; background: transparent; border: 0; outline: none; font-size: 15px; color: var(--text); }
 .palette .results { max-height: 52vh; overflow-y: auto; padding: 6px; }
@@ -501,7 +512,7 @@ kbd {
 .palette .none .spinner { width: 13px; height: 13px; }
 
 .dialog {
-  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
+  position: fixed; top: 50%; left: 50%; translate: -50% -50%;
   width: min(440px, 92vw); background: var(--bg-elevated); border: 1px solid var(--border-strong);
   border-radius: 12px; box-shadow: var(--shadow); z-index: 50; padding: 20px; animation: pop .13s var(--ease);
 }
@@ -535,7 +546,11 @@ kbd {
   border: 1px solid var(--border-strong); border-radius: 9px; box-shadow: var(--shadow); padding: 5px;
   animation: pop .1s var(--ease);
 }
-.menu .mi { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 6px; cursor: default; }
+/* `width: 100%` because these are <button>s, and a form control computes `width: auto` as
+   fit-content rather than stretching the way a block does — so the row, and with it the
+   hover target, was only as wide as its label. `.kbd`'s `margin-left: auto` below is the
+   evidence of the intent: pushing a shortcut to the far right needs a full-width row. */
+.menu .mi { display: flex; width: 100%; box-sizing: border-box; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 6px; cursor: default; }
 .menu .mi:hover { background: var(--bg-active); }
 .menu .mi.danger:hover { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
 .menu .mi .kbd { margin-left: auto; color: var(--text-faint); }
@@ -562,6 +577,9 @@ kbd {
 .tray .items { max-height: 300px; overflow-y: auto; }
 .xfer { padding: 9px 12px; border-bottom: 1px solid var(--border); }
 .xfer:last-child { border-bottom: 0; }
+/* Only appears on a transfer that stopped short, so it never competes with the
+   progress bar for the eye. */
+.xfer-actions { display: flex; gap: 6px; margin-top: 8px; }
 .xfer .top { display: flex; align-items: center; gap: 8px; }
 .xfer .top .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
 .xfer .pct { color: var(--text-faint); font-size: 11px; font-variant-numeric: tabular-nums; }
@@ -661,6 +679,61 @@ kbd {
 .review-meta { color: var(--text-faint); font-size: 11px; margin-top: 6px; }
 .dialog.review .row-actions { padding: 14px 18px; border-top: 1px solid var(--border); margin: 0; }
 
+/* The admin console's action rows: several small buttons side by side, which the settings
+   `.control` column is not otherwise shaped for. */
+/* A row whose control is a GROUP of buttons rather than one input.
+   `.setting .control` is a fixed 200px column, which is right for a select or a toggle and
+   far too narrow for three buttons — they wrapped 2-then-1 and sat jammed against the
+   edge. Such a row wraps instead, giving the buttons their own full-width line under the
+   description, so the longest label stops squeezing the group. */
+.setting.stacked { flex-wrap: wrap; }
+.setting.stacked .info { flex: 1 1 100%; }
+.setting.stacked .control { width: 100%; margin-top: 12px; }
+.admin .control.admin-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
+.admin .control.admin-actions .btn { white-space: nowrap; }
+.admin .control .mono.muted { color: var(--text-faint); }
+
+/* The rotation bill, itemised. Only where a provider actually charges for the traffic. */
+.rot-bill { margin: 8px 0 10px; padding: 8px 10px; border-radius: 8px;
+  background: color-mix(in srgb, var(--text) 4%, transparent); }
+.rot-bill .rb-line { display: flex; justify-content: space-between; gap: 12px;
+  font-size: 12px; color: var(--text-dim); padding: 2px 0; }
+.rot-bill .rb-line.total { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 5px; color: var(--text); }
+.rot-bill .rb-asof { font-size: 11px; color: var(--text-faint); margin-top: 5px; }
+
+/* ---- Encryption, on the collection form --------------------------------- */
+.enc-section { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 4px; }
+.enc-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
+.enc-hint { color: var(--text-faint); font-size: 11.5px; margin-top: 4px; }
+.enc-body { margin-top: 10px; }
+.enc-body .field { margin-bottom: 8px; }
+.enc-problem { display: flex; align-items: center; gap: 6px; color: var(--warn); font-size: 12px; margin: 6px 0; }
+/* What it does and does not do, next to the toggle rather than in a help page: the moment
+   someone turns this on is the moment the scope matters. */
+.enc-scope { margin-top: 10px; padding: 10px 12px; border-radius: 8px;
+  background: color-mix(in srgb, var(--text) 4%, transparent); }
+.enc-scope .es-title { font-size: 11px; font-weight: 650; text-transform: uppercase;
+  letter-spacing: 0.04em; color: var(--text-dim); margin-bottom: 3px; }
+.enc-scope .es-title + .es-line { margin-bottom: 8px; }
+.enc-scope .es-line { font-size: 12px; line-height: 1.5; color: var(--text-dim); }
+.enc-scope .es-line.note { margin-top: 8px; color: var(--text-faint); }
+
+/* Provenance warning. Sits between the review and the Install button rather than beside
+   the name, because a badge up in the header is something you read past. */
+.review-warning { padding: 12px 18px; border-top: 1px solid var(--border);
+  background: color-mix(in srgb, var(--warn) 10%, transparent); }
+.review-warning .rw-head { display: flex; align-items: center; gap: 7px; color: var(--warn);
+  font-weight: 600; font-size: 13px; }
+.review-warning .rw-detail { color: var(--text-dim); font-size: 12.5px; line-height: 1.5; margin-top: 5px; }
+.review-warning .rw-ack { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px;
+  font-size: 12.5px; color: var(--text); cursor: pointer; }
+.review-warning .rw-ack input { margin-top: 2px; }
+/* An unsigned package is the one someone is most likely to wave through, so it is the
+   loudest; the others are informational. */
+.review-warning.unverified { background: color-mix(in srgb, var(--danger) 10%, transparent); }
+.review-warning.unverified .rw-head { color: var(--danger); }
+.btn.primary.disabled, .btn.primary:disabled { opacity: 0.45; cursor: not-allowed; }
+
 /* ---- Media / audiobook opener ------------------------------------------- */
 .viewer { height: 100%; display: flex; flex-direction: column; }
 .viewer.text pre { margin: 0; padding: 18px 20px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; color: var(--text); }

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

@@ -0,0 +1,22 @@
+// Running a menu item or a list row.
+//
+// These used to carry a `run` closure — `run: () => ui.engine.dispatch(new ExecCommandAction('explorer.open', node))` —  which
+// made a menu item a piece of behaviour wearing a data shape. Nothing could inspect one,
+// nothing could contribute one from outside the module that built it, and the engine saw
+// only whatever the closure happened to do.
+//
+// They carry `actions` now: a list of Action instances, which is what an item IS — a label,
+// an icon, and what happens if you pick it. Almost all of them turned out to be exactly one
+// `ExecCommandAction`, which is the shape the statusItem view already used.
+//
+// A LIST rather than a single action because a few items genuinely do two things: opening a
+// file from the search modal opens it and then closes the modal. Sequencing them here keeps
+// that out of the item.
+
+/**
+ * @param {object} ui
+ * @param {{actions?: object[]}} item
+ */
+export function activate(ui, item) {
+  for (const action of item?.actions || []) ui.engine.dispatch(action);
+}

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

@@ -6,12 +6,16 @@
 import { dd } from '../../runtime.js';
 import { icon } from '../icon.js';
 import { notificationBell, principalChip } from './social.js';
+import { ExecCommandAction } from '../../bl/actions.js';
 
 const { div, button, span, img } = dd;
 
 const ITEMS = [
   { id: 'home', icon: 'search', title: 'Search & files', command: 'workbench.view.home' },
   { id: 'plugins', icon: 'plug', title: 'Plugins', command: 'workbench.view.plugins' },
+  // Where an administrator goes. A destination rather than a route because this app does
+  // not put its state in the address bar — see adminView.js.
+  { id: 'admin', icon: 'book', title: 'Administration', command: 'workbench.view.admin' },
 ];
 
 export default function activityBar(state, ui) {
@@ -19,17 +23,17 @@ export default function activityBar(state, ui) {
   const pluginCount = state.plugins?.filter((p) => p.status === 'active').length || 0;
   return div({ className: 'activitybar' },
     button({ className: 'brand-mark', title: 'Trove — home' }, img({ src: '/icon.svg', alt: 'Trove' }))
-      .on({ click: () => ui.exec('workbench.view.home') }),
+      .on({ click: () => ui.engine.dispatch(new ExecCommandAction('workbench.view.home')) }),
     ...ITEMS.map((it) =>
       button({ className: `item ${active === it.id ? 'active' : ''}`, title: it.title },
         icon(it.icon, { size: 22 }),
         it.id === 'plugins' && pluginCount ? span({ className: 'badge' }, String(pluginCount)) : null,
-      ).on({ click: () => ui.exec(it.command) }),
+      ).on({ click: () => ui.engine.dispatch(new ExecCommandAction(it.command)) }),
     ),
     div({ className: 'spacer' }),
     notificationBell(state, ui),
     button({ className: `item ${active === 'settings' ? 'active' : ''}`, title: 'Settings' }, icon('gear', { size: 21 }))
-      .on({ click: () => ui.exec('workbench.openSettings') }),
+      .on({ click: () => ui.engine.dispatch(new ExecCommandAction('workbench.openSettings')) }),
     principalChip(state),
   );
 }

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

@@ -11,6 +11,7 @@
 import { dd } from '../../runtime.js';
 import { icon } from '../icon.js';
 import { bytes } from '../format.js';
+import { CancelTaskAction, CopyTextAction, DismissIssueAction, DismissTaskAction, ExecCommandAction, RetryIssueAction, ToggleActivityPanelAction } from '../../bl/actions.js';
 
 const { div, button, span, h3, p, pre } = dd;
 
@@ -24,9 +25,7 @@ const STATUS_ICON = { running: 'refresh', done: 'check', failed: 'close', cancel
  * of the app and into a terminal.
  */
 function copyText(text, ui) {
-  navigator.clipboard?.writeText(text)
-    .then(() => ui.platform.notifications.success('Copied'))
-    .catch(() => ui.platform.notifications.info(text, { sticky: true }));
+  ui.engine.dispatch(new CopyTextAction(text));
 }
 
 function amount(task) {
@@ -51,9 +50,9 @@ function taskRow(task, ui) {
         task.error ? div({ className: 'act-error' }, task.error) : null,
       ),
       running && task.cancellable
-        ? button({ className: 'act-action', title: 'Cancel' }, icon('close', { size: 12 })).on({ click: () => ui.app.activity.cancel(task.id) })
+        ? button({ className: 'act-action', title: 'Cancel' }, icon('close', { size: 12 })).on({ click: () => ui.engine.dispatch(new CancelTaskAction(task.id)) })
         : !running
-          ? button({ className: 'act-action', title: 'Dismiss' }, icon('close', { size: 12 })).on({ click: () => ui.app.activity.dismiss(task.id) })
+          ? button({ className: 'act-action', title: 'Dismiss' }, icon('close', { size: 12 })).on({ click: () => ui.engine.dispatch(new DismissTaskAction(task.id)) })
           : null,
     ),
     running
@@ -89,10 +88,10 @@ function issueRow(issue, ui) {
       // Retry only when the server said pressing it will actually do something.
       issue.retryable
         ? button({ className: 'btn small act-retry' }, icon('refresh', { size: 12 }), span('Retry'))
-          .on({ click: () => ui.app.activity.retryIssue(issue.id) })
+          .on({ click: () => ui.engine.dispatch(new RetryIssueAction(issue.id)) })
         : null,
       button({ className: 'btn small ghost act-dismiss' }, 'Dismiss')
-        .on({ click: () => ui.app.activity.dismissIssue(issue.id) }),
+        .on({ click: () => ui.engine.dispatch(new DismissIssueAction(issue.id)) }),
     ),
   );
 }
@@ -107,7 +106,7 @@ export default function activityPanel(state, ui) {
     div({ className: 'act-head' },
       h3('Activity'),
       button({ className: 'act-action', title: 'Close' }, icon('close', { size: 13 }))
-        .on({ click: () => ui.app.activity.togglePanel(false) }),
+        .on({ click: () => ui.engine.dispatch(new ToggleActivityPanelAction(false)) }),
     ),
 
     // "Nothing is wrong" and "we couldn't ask" look identical unless one says so. Both
@@ -145,15 +144,15 @@ export default function activityPanel(state, ui) {
 
     div({ className: 'act-foot act-actions' },
       button({ className: 'btn small ghost act-rebuild' }, icon('refresh', { size: 12 }), span('Rebuild search index'))
-        .on({ click: () => ui.exec('workbench.rebuildIndex') }),
+        .on({ click: () => ui.engine.dispatch(new ExecCommandAction('workbench.rebuildIndex')) }),
       button({ className: 'btn small ghost act-scan' }, icon('refresh', { size: 12 }), span('Scan for outside changes'))
-        .on({ click: () => ui.exec('workbench.scanCollection') }),
+        .on({ click: () => ui.engine.dispatch(new ExecCommandAction('workbench.scanCollection')) }),
       // On demand as well as on a schedule, because the moment an admin wants to know
       // whether they fixed the bucket is right after they changed it — not up to five
       // minutes later. It also checks against THIS browser's origin, which the scheduled
       // run can only do if the deployment configured one.
       button({ className: 'btn small ghost act-storage' }, icon('plug', { size: 12 }), span('Check storage'))
-        .on({ click: () => ui.exec('workbench.checkStorage') }),
+        .on({ click: () => ui.engine.dispatch(new ExecCommandAction('workbench.checkStorage')) }),
     ),
   );
 }

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

@@ -0,0 +1,191 @@
+// The admin console.
+//
+// Drive-level administration had accumulated in three places and no place: API keys in
+// Settings, storage diagnostics behind a status-bar item, ACLs in a dialog, and the driver
+// registry, the indexers and the identity provider only through the API. Each landed where
+// it did for a local reason, and the result was that there was nowhere to send someone who
+// had just been made an administrator.
+//
+// A DESTINATION, not a route. 006 introduced share links, and what it actually established
+// is that this app does not reflect its state in the address bar — it consumes a share path
+// at boot and immediately replaces it with `/`, because a URL that goes stale the moment
+// you navigate is worse than one that says nothing. So there is no router to hang a route
+// on, and an activity-bar destination beside Plugins and Settings is the consistent answer.
+//
+// Almost nothing here is new capability. It is gathering: every value below already comes
+// from `/api/capabilities`, which the app fetches at startup, or from a query that already
+// exists. What was missing was somewhere to look.
+
+import { dd } from '../../runtime.js';
+import { icon } from '../icon.js';
+import { bytes } from '../format.js';
+import { ExecCommandAction } from '../../bl/actions.js';
+
+const { div, h2, h3, p, span, button } = dd;
+
+export default function adminView(state, ui) {
+  const caps = state.caps;
+  return div({ className: 'editor' },
+    div({ className: 'stage' },
+      div({ className: 'settings admin' },
+        h2('Administration'),
+        p({ className: 'sub' }, 'How this drive is configured, and what it can do. Most of it is decided by the deployment rather than here.'),
+        accessSection(caps, state, ui),
+        storageSection(caps, state, ui),
+        extensionsSection(caps, state),
+        workSection(state, ui),
+      ),
+    ),
+  );
+}
+
+/** A label/value row, matching the settings screen so the two read as one thing. */
+function row(title, detail, value) {
+  return div({ className: 'setting' },
+    div({ className: 'info' },
+      div({ className: 't' }, title),
+      detail ? div({ className: 'd' }, detail) : null,
+    ),
+    div({ className: 'control' }, typeof value === 'string' ? span({ className: 'mono' }, value) : value),
+  );
+}
+
+/**
+ * Who this drive thinks you are, and who it lets in.
+ *
+ * The identity driver and whether authentication is required are deployment decisions —
+ * environment variables, not preferences — so they are reported rather than offered. Which
+ * is the point: an admin needs to know what is in force, and previously could only find out
+ * by reading the server's configuration or calling the API.
+ */
+function accessSection(caps, state, ui) {
+  const auth = caps?.auth || {};
+  const me = caps?.principal || state.so?.me || {};
+  const servers = auth.authorizationServers || [];
+  return div({ className: 'group' },
+    h3('Access'),
+    p({ className: 'sub' }, 'Who can reach this drive. Set by the deployment, not here.'),
+    row('Signed in as', me.anonymous ? 'This drive does not require a sign-in.' : (me.email || me.id),
+      me.anonymous ? 'anonymous' : (me.name || me.id || '—')),
+    row('Sign-in required', 'Whether a caller must present a token.',
+      caps?.mcp?.requiresAuth ? 'Yes' : 'No'),
+    row('Authorization server', 'Where clients are sent to sign in.',
+      servers.length ? servers.join(', ') : 'not set'),
+    // API keys stay in Settings for now and are LINKED rather than duplicated: two places
+    // to revoke a credential is worse than one place in the wrong screen.
+    row('API keys', 'Credentials for scripts and services, scoped per collection.',
+      button({ className: 'btn small' }, 'In Settings')
+        .on({ click: () => ui.engine.dispatch(new ExecCommandAction('workbench.openSettings')) })),
+  );
+}
+
+/**
+ * What this deployment can actually do with bytes.
+ *
+ * The driver registry is the list a collection form offers, and it is deployment
+ * configuration: `TROVE_STORAGE_DRIVERS` narrows it, and a driver missing from here is the
+ * reason a collection cannot be made on it. The capability flags below explain behaviour
+ * that otherwise looks arbitrary — why a download is proxied rather than direct, why a
+ * usage figure is missing.
+ */
+function storageSection(caps, state, ui) {
+  const s = caps?.storage || {};
+  const drivers = caps?.storageDrivers || [];
+  const usage = state.ex?.usage;
+  const can = (on) => span({ className: `mono ${on ? '' : 'muted'}` }, on ? 'yes' : 'no');
+  return div({ className: 'group' },
+    h3('Storage'),
+    p({ className: 'sub' }, 'The backing stores this deployment offers, and what they support.'),
+    row('Drivers offered', 'What a new collection may be created on.',
+      drivers.length ? drivers.map((d) => d.label || d.key).join(', ') : 'none registered'),
+    row('Direct downloads', 'A presigned URL sends bytes from the store, not through the drive.', can(s.presignDownload)),
+    row('Direct uploads', 'A presigned PUT sends bytes to the store, not through the drive.', can(s.presignUpload)),
+    row('Multipart', 'Large files go up in parts, resumably.', can(s.multipart)),
+    row('Range requests', 'Seeking inside a file without fetching the whole thing.', can(s.range)),
+    usage?.total
+      ? row('Space', 'Reported by the backing store.', `${bytes(usage.available)} free of ${bytes(usage.total)}`)
+      : row('Space', 'This store does not report a total, which object stores generally cannot.', 'not reported'),
+    // The check and its remedy already exist as a command — this is where someone would
+    // look for it, which is the whole complaint the ticket makes.
+    div({ className: 'setting' },
+      div({ className: 'info' },
+        div({ className: 't' }, 'Check the backing stores'),
+        div({ className: 'd' }, 'Asks whether each store can actually be reached from here — the failure that makes every file open to a spinner.'),
+      ),
+      div({ className: 'control' },
+        button({ className: 'btn small' }, 'Run check')
+          .on({ click: () => ui.engine.dispatch(new ExecCommandAction('workbench.checkStorage')) })),
+    ),
+  );
+}
+
+/**
+ * What extends this drive, and what each extension is permitted.
+ *
+ * Indexers matter here for a reason that is easy to miss: an indexer reads file CONTENTS,
+ * including from an encrypted collection, because indexing happens on the drive's side of
+ * the encryption. Anyone weighing what encryption protects needs to know which ones are
+ * installed, so the same list appears on the collection form.
+ */
+function extensionsSection(caps, state) {
+  const indexers = caps?.indexers || [];
+  const plugins = state.plugins || [];
+  return div({ className: 'group' },
+    h3('Extensions'),
+    p({ className: 'sub' }, 'What reads and adds to this drive.'),
+    div({ className: 'setting' },
+      div({ className: 'info' },
+        div({ className: 't' }, 'Indexers'),
+        div({ className: 'd' }, 'They read file contents to make them searchable — including in an encrypted collection, since indexing happens on the drive’s side of the encryption.'),
+      ),
+      div({ className: 'control' },
+        span({ className: 'mono' }, indexers.length ? indexers.map((i) => i.displayName || i.id).join(', ') : 'none')),
+    ),
+    plugins.length
+      ? div({}, ...plugins.map((pl) => div({ className: 'setting' },
+        div({ className: 'info' },
+          div({ className: 't' }, pl.manifest?.displayName || pl.id),
+          div({ className: 'd' }, (pl.grants || []).length
+            ? `May: ${(pl.grants || []).join(', ')}`
+            : 'Granted nothing — it runs in its sandbox and can only draw.'),
+        ),
+        div({ className: 'control' }, span({ className: `mono ${pl.status === 'active' ? '' : 'muted'}` }, pl.status || 'idle')),
+      )))
+      : row('Plugins', 'Installed by an administrator, from a signed package.', 'none installed'),
+  );
+}
+
+/**
+ * What the drive is doing, and what it has not finished.
+ *
+ * The panel that shows running work already exists and is reached from the status bar,
+ * which is fine when something is running and undiscoverable when nothing is. The counts
+ * here are the discoverable version; the panel is still where the detail lives.
+ */
+function workSection(state, ui) {
+  const act = state.act || { tasks: [], issues: [] };
+  const running = (act.tasks || []).filter((t) => t.status === 'running');
+  return div({ className: 'group' },
+    h3('Work'),
+    p({ className: 'sub' }, 'Background jobs and anything that needs attention.'),
+    row('Running now', 'Scans, reindexes and rotations happening on the server.',
+      running.length ? `${running.length}` : 'nothing running'),
+    row('Needs attention', 'Standing problems — they persist until fixed, unlike a toast.',
+      act.issues?.length ? `${act.issues.length}` : 'none'),
+    // `stacked`: three buttons do not fit the 200px control column — see styles.css.
+    div({ className: 'setting stacked' },
+      div({ className: 'info' },
+        div({ className: 't' }, 'Maintenance'),
+        div({ className: 'd' }, 'A scan picks up files changed in the bucket by something other than Trove. A reindex rebuilds search from scratch.'),
+      ),
+      div({ className: 'control admin-actions' },
+        button({ className: 'btn small' }, 'Activity panel')
+          .on({ click: () => ui.engine.dispatch(new ExecCommandAction('workbench.showActivity')) }),
+        button({ className: 'btn small' }, 'Scan')
+          .on({ click: () => ui.engine.dispatch(new ExecCommandAction('workbench.scanCollection')) }),
+        button({ className: 'btn small' }, 'Reindex')
+          .on({ click: () => ui.engine.dispatch(new ExecCommandAction('workbench.rebuildIndex')) }),
+      ),
+    ),
+  );
+}

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

@@ -13,6 +13,7 @@
 
 import { dd } from '../../runtime.js';
 import { icon } from '../icon.js';
+import { ExecCommandAction } from '../../bl/actions.js';
 
 const { div, h2, p, button, span } = dd;
 
@@ -44,7 +45,7 @@ function createPrompt(ui) {
       + 'there is somewhere to put it.'),
     div({ className: 'gate-actions' },
       button({ className: 'btn primary' }, icon('plus', { size: 14 }), 'New collection')
-        .on({ click: () => ui.exec('collections.create') }),
+        .on({ click: () => ui.engine.dispatch(new ExecCommandAction('collections.create')) }),
     ),
   );
 }
@@ -69,12 +70,12 @@ function choosePrompt(ex, ui) {
         // What they may do, from the server's own answer — so a read-only collection says
         // so before they open it and find the Upload button missing.
         span({ className: 'gate-caps' }, (c.capabilities || []).join(' · ')),
-      ).on({ click: () => ui.exec('collections.switch', c.id) })),
+      ).on({ click: () => ui.engine.dispatch(new ExecCommandAction('collections.switch', c.id)) })),
     ),
     ex.canCreateCollection
       ? div({ className: 'gate-actions' },
         button({ className: 'btn' }, icon('plus', { size: 14 }), 'New collection')
-          .on({ click: () => ui.exec('collections.create') }),
+          .on({ click: () => ui.engine.dispatch(new ExecCommandAction('collections.create')) }),
       )
       : null,
   );