@3sln/trove 0.0.8 → 0.0.9

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

@@ -1,20 +1,21 @@
 // createPlatform — assemble every service into one object the whole app shares.
-// This is the "workbench platform": the reactive registries and services that
-// core features and plugins both build on. It also registers the default
-// settings schema and keybindings so the shell has sensible behaviour out of the
-// box. UI-facing shell state (which activity is open, is the palette showing…)
-// lives in WorkbenchService; data and mutations go through ngin (see ../bl).
+// This is the "workbench platform": the reactive registries and services that core
+// features and plugins both build on. It also registers the default settings schema and
+// keybindings so the shell has sensible behaviour out of the box.
+//
+// It does NOT hold the shell's state. Which activity is open, whether the palette is
+// showing, what is on the panel stack — those are engine resources, built by createApp
+// (see ../bl/state.js). The platform is the machinery underneath them.
 
 import { reactive } from '../runtime.js';
 import { ContributionRegistry } from './contributions.js';
-import { ContextKeyService } from './context.js';
+import { ContextRegistry } from './context.js';
 import { CommandService } from './commands.js';
 import { KeybindingService } from './keybindings.js';
 import { SettingsService } from './settings.js';
 import { NotificationService } from './notifications.js';
 import { TroveApiClient } from './api.js';
 import { PluginHost } from './pluginHost.js';
-import { WorkbenchService } from './workbench.js';
 import { ViewportService } from './viewport.js';
 import { SpatialNavigationService } from './spatialNav.js';
 import { VoiceSearchService } from './voiceSearch.js';
@@ -42,12 +43,18 @@ export function writeToken(token) {
 
 export function createPlatform({ baseUrl = '' } = {}) {
   const contributions = new ContributionRegistry();
-  // 'home' is where the app actually starts (WorkbenchService's initial `activity`), and
-  // nothing writes this key until the user navigates. Seeding it with a view that no
-  // longer exists left every `when: view.active == 'home'` binding — the Delete
-  // shortcut among them — dead from boot until the first click on the rail, while the
-  // row menu cheerfully advertised "Del" as the way to delete.
-  const context = new ContextKeyService({ 'view.active': 'home', 'sidebar.visible': true });
+  // Only the fixed facts are seeded. Everything else is registered by whoever owns it —
+  // the built-in keys are derived from the shell and the drive (see bl/context.js), so
+  // there is nothing sensible to pre-fill them with and nothing that would go stale if
+  // there were.
+  //
+  // It used to be seeded with `view.active: 'home'` for a reason worth remembering: nothing
+  // wrote that key until the user navigated, so every `when: view.active == 'home'`
+  // binding — the Delete shortcut among them — was dead from boot until the first click on
+  // the rail, while the row menu cheerfully advertised "Del" as the way to delete. A
+  // derived key is never unwritten, so the seed is not needed and cannot drift from the
+  // state it was standing in for.
+  const context = new ContextRegistry();
   const notifications = new NotificationService();
   const commands = new CommandService(contributions, context, notifications);
   const settings = new SettingsService();
@@ -57,22 +64,22 @@ export function createPlatform({ baseUrl = '' } = {}) {
   // But a deployment where the user HOLDS a token has no other way to present it, and
   // reading it here — once, from one place — keeps that out of every call site.
   const api = new TroveApiClient({ baseUrl, token: () => readToken() });
-  const workbench = new WorkbenchService(context);
   // Which shell to render — phone, desktop, or TV. Constructed before the defaults are
   // registered, so it reads the setting through `settings.get` once that exists.
-  const viewport = new ViewportService({ settings, context });
+  const viewport = new ViewportService({ settings });
   // Arrow keys → geometry, but only on a TV. Inert everywhere else.
-  const spatialNav = new SpatialNavigationService({ workbench, viewport });
+  const spatialNav = new SpatialNavigationService({ viewport });
   // Speak to search. Mostly this just puts the search field under the remote's mic —
   // see voiceSearch.js for why that is the whole feature on a TV.
-  const voice = new VoiceSearchService({ workbench, notifications, settings });
+  const voice = new VoiceSearchService({ notifications, settings });
 
   const platform = {
     reactive,
-    contributions, context, commands, keybindings, settings, notifications, api, workbench,
+    contributions, context, commands, keybindings, settings, notifications, api,
     viewport, spatialNav, voice,
-    capabilities: null,
-    openPluginPanel: null, // set by the workbench UI
+    // The shell's own state is the engine's, not the platform's — createApp builds it and
+    // hands back what the few imperative edges below still need.
+    openPluginPanel: null,
   };
   platform.mediaUrls = new MediaUrlService({ api: platform.api, settings });
   platform.plugins = new PluginHost(platform);

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

@@ -11,8 +11,7 @@ const RECENTS_KEY = 'trove.recents';
 const RECENTS_MAX = 12;
 
 export class NavigationService {
-  constructor(context) {
-    this.context = context;
+  constructor() {
     this.state = {
       stack: [{ kind: 'search' }], // [{kind:'search'}, {kind:'file', id, node, openerId}, …]
       activeTabId: null, // top file panel id (or null)
@@ -43,7 +42,6 @@ export class NavigationService {
     const top = stack[stack.length - 1];
     const file = top && top.kind === 'file' ? top : null;
     this.#set({ stack, activeTabId: file ? file.id : null, activeFile: file ? file.node : null });
-    this.context.setMany({ 'editor.open': !!file, 'editor.openerId': file?.openerId || '', 'editor.contentType': file?.node.contentType || '' });
     if (history) this.#pushHistory();
   }
 
@@ -83,11 +81,43 @@ export class NavigationService {
   pop() {
     if (this.state.stack.length > 1) this.#applyStack(this.state.stack.slice(0, -1), { history: false });
   }
-  closeTab(id) {
+  /**
+   * The node is GONE — drop it from everywhere this service holds a copy.
+   *
+   * Named for what happened rather than for the stack, because it was `closeTab` and so
+   * only closed the panel: a deleted file kept its recent tile, and clicking that tile
+   * opened nothing. Recents are a snapshot, not a reference, so nothing else was ever
+   * going to notice.
+   *
+   * Trashing is reversible and this is not, quite: restoring a file does not put it back
+   * in recents, it just stops being listed until opened again. That is the right way
+   * round — a tile that leads nowhere is worse than one that is missing.
+   */
+  forget(id) {
+    const recents = this.state.recents.filter((r) => r.id !== id);
+    if (recents.length !== this.state.recents.length) {
+      this.#set({ recents });
+      saveRecents(recents);
+    }
     const stack = this.state.stack.filter((p) => !(p.kind === 'file' && p.id === id));
     this.#applyStack(stack.length ? stack : [{ kind: 'search' }], { history: false });
   }
+  /**
+   * A node changed underneath us — a rename — so every copy of it here has to change.
+   *
+   * BOTH the stack and the recents list, because recents hold a SNAPSHOT (id, name,
+   * contentType) rather than a reference: updating only the stack renamed the open panel's
+   * title and left the recent tile showing the old name until it aged off the end of the
+   * list, which reads as the rename half-failing.
+   */
   updateTabNode(node) {
+    const recents = this.state.recents.map((r) => (r.id === node.id
+      ? { ...r, name: node.name, contentType: node.contentType || r.contentType }
+      : r));
+    if (recents.some((r, i) => r !== this.state.recents[i])) {
+      this.#set({ recents });
+      saveRecents(recents);
+    }
     const stack = this.state.stack.map((p) => (p.kind === 'file' && p.id === node.id ? { ...p, node } : p));
     this.#applyStack(stack, { history: false });
   }

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

@@ -0,0 +1,46 @@
+// The two things only the browser can do: ask for a file, and save one.
+//
+// These are effects, so they are reached from actions rather than from a render — but they
+// are effects on the DOCUMENT rather than on the drive, which is why they live in
+// `platform` and not in `bl`. An action that needs a file from the user calls in here; the
+// action is still the thing that decides what happens to it.
+//
+// They were private to bl/commands.js, where the command handlers that used them lived.
+
+/**
+ * Open a native file picker.
+ *
+ * The hidden `<input>` is removed on selection AND on cancel — cancelling fires no
+ * `change`, so cleanup also hangs off the next window focus (which the OS dialog returns)
+ * to avoid leaking a growing pile of inputs.
+ */
+function pick(cb, configure) {
+  const input = document.createElement('input');
+  input.type = 'file';
+  configure(input);
+  input.style.display = 'none';
+  document.body.appendChild(input);
+  const cleanup = () => { input.remove(); window.removeEventListener('focus', onFocus); };
+  const onFocus = () => setTimeout(() => { if (!input.files.length) cleanup(); }, 300);
+  input.addEventListener('change', () => { cb(input.files); cleanup(); }, { once: true });
+  window.addEventListener('focus', onFocus);
+  input.click();
+}
+
+export function pickFiles(cb) {
+  pick((files) => cb(files), (input) => { input.multiple = true; });
+}
+
+export function pickZip(cb) {
+  pick((files) => cb(files[0]), (input) => { input.accept = '.zip,application/zip'; });
+}
+
+/** Hand a URL to the browser as a download. */
+export function triggerDownload(url, name) {
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = name || '';
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+}

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

@@ -27,6 +27,7 @@ import { pluginId, contribUri } from '@3sln/trove/core/plugins/identity.js';
 import { endpointSummary } from './pluginNet.js';
 import { MediaController } from './pluginMedia.js';
 import { FrameDock } from './pluginDock.js';
+import { InvokePluginCommandAction, OpenInPanelAction } from '../bl/actions.js';
 import { FrameManager } from './pluginFrames.js';
 import { PluginRpcRouter } from './pluginRpc.js';
 // The canonical capability list lives in core (the server's authority); import it so
@@ -54,7 +55,9 @@ export class PluginHost {
     this.media = new MediaController();
     this.dock = new FrameDock({
       destroyFrame: (frame) => this.frames.destroy(frame),
-      openFile: (node, openerId) => this.platform.workbench.openFile(node, openerId),
+      // Dispatched, not called: opening a file from a docked plugin frame is the same
+      // intent as opening one from the drive, and the engine should see both.
+      openFile: (node, openerId) => this.platform.dispatch?.(new OpenInPanelAction(node, openerId)),
       onChange: () => this.#emit(),
     });
     this.frames = new FrameManager({ media: this.media, dock: this.dock });
@@ -107,15 +110,19 @@ export class PluginHost {
           if (runtime.grants.includes('opener')) keep(reg.register(c.uri, base));
           break;
 
-        // Declared, implemented by the plugin's primary frame. The handler proxies
-        // over RPC using the contribution's short name — inside its own frame a
-        // plugin addresses its commands by name, not by URI.
+        // Declared, implemented by the plugin's primary frame. Addressed over RPC by the
+        // contribution's short NAME — inside its own frame a plugin addresses its commands
+        // by name, not by URI.
         case 'command':
           keep(this.platform.commands.register({
             id: c.uri, title: c.title || `${label}: ${c.name}`,
             category: c.category || label, icon: c.icon,
             when: c.when, offline: c.offline, palette: c.palette, pluginId: pid,
-            handler: (...args) => runtime.channel?.call('command:execute', { id: c.name, args }),
+            // A description, like every other command. It used to be a closure over
+            // `runtime` proxying straight to the channel, which left a plugin command
+            // running invisible to the engine — the same hole ExecCommandAction closed for
+            // the host's own commands, still open for everyone else's.
+            actions: (...args) => new InvokePluginCommandAction(pid, c.name, args),
           }));
           break;
 
@@ -133,13 +140,20 @@ export class PluginHost {
           break;
         }
 
-        // A context value slot. Seed the context with its declared default so
-        // when-clauses referencing it evaluate sensibly before the plugin runs.
-        case 'register':
+        // A context value slot — the one kind of key that genuinely is PUSHED rather than
+        // derived, because only the plugin knows what it means. Owned here, on the
+        // plugin's behalf: the registry hands back a writer, which goes on the runtime
+        // record so `context:setRegister` can reach it and nothing else can.
+        //
+        // Seeded with its declared default so when-clauses referencing it evaluate
+        // sensibly before the plugin has run at all.
+        case 'register': {
           keep(reg.register(c.uri, base));
-          this.platform.context.set(c.uri, c.default);
-          keep(() => this.platform.context.remove(c.uri));
+          const owned = this.platform.context.own(c.uri, c.default);
+          runtime.registers.set(c.uri, owned.set);
+          keep(() => { runtime.registers.delete(c.uri); owned.dispose(); });
           break;
+        }
 
         // A keymap JSON file inside the package. Read + validated here, at register
         // time, so a malformed keymap is a visible install-time problem rather than a
@@ -373,6 +387,10 @@ export class PluginHost {
     if (this.plugins.get(record.id)?.status === 'active') return;
     const runtime = {
       ...record, iframe: null, status: 'loading', error: null, disposers: [], channel: null,
+      // Writers for the context registers this plugin DECLARED, keyed by contribution URI.
+      // Holding them here is what makes "a plugin may only set its own registers" structural
+      // rather than a check: there is no setter for a key it did not declare.
+      registers: new Map(),
       hasUi: false, responsive: false, frame: null, frames: new Set(),
       // Storage scopes (defaulted for records saved before this field existed).
       storage: record.storage || (record.grants?.includes('storage') ? grantedStorageScopes(record.manifest, record.trust) : { plugin: false, domain: false }),
@@ -445,6 +463,21 @@ export class PluginHost {
       this._probing = false;
     }
   }
+  /**
+   * Run one of a plugin's own commands, in its frame.
+   *
+   * Public because `InvokePluginCommandAction` is what reaches it now, rather than a closure
+   * captured at registration. Addressed by short NAME: the URI is the host's way of keeping
+   * two plugins' `status` commands apart and means nothing on the other side.
+   *
+   * A plugin that is not running answers undefined rather than throwing. Its commands are
+   * already filtered out of the palette by `isAvailable`, so getting here at all means a
+   * stale reference, which is not worth an error.
+   */
+  invokeCommand(pluginId, name, args = []) {
+    return this.plugins.get(pluginId)?.channel?.call('command:execute', { id: name, args });
+  }
+
   setHeartbeat(ms) {
     this.heartbeatMs = ms;
     this.#stopHeartbeat();

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

@@ -112,7 +112,11 @@ export class PluginRpcRouter {
       // can read, addressed by its contribution URI.
       case 'context:setRegister': {
         const slot = this.#ownContribution(record, params.name, 'register');
-        this.platform.context.set(slot.uri, params.value);
+        // The writer for a register the plugin declared. There is no path to a key it did
+        // not declare, because it was never handed a setter for one.
+        const write = record.registers?.get(slot.uri);
+        if (!write) throw new Error(`Register "${params.name}" is not available`);
+        write(params.value);
         return { ok: true };
       }
       // Package resources — opaque byte handles (transferred, no host URLs). Code
@@ -170,7 +174,7 @@ export class PluginRpcRouter {
       case 'ui:showPanel':
         cap('ui');
         record.hasUi = true;
-        this.platform.openPluginPanel?.(pid);
+        this.platform.openPluginPanel(pid);
         this.onChange();
         return { ok: true };
 

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

@@ -43,12 +43,10 @@ const ACTIVATES_ITSELF = new Set(['A', 'BUTTON', 'INPUT', 'SELECT', 'TEXTAREA'])
 export class SpatialNavigationService {
   /**
    * @param {object} deps
-   * @param {import('./workbench.js').WorkbenchService} deps.workbench
    * @param {import('./viewport.js').ViewportService} deps.viewport
    * @param {Window} [deps.window]
    */
   constructor({ workbench, viewport, window: win = globalThis }) {
-    this.workbench = workbench;
     this.viewport = viewport;
     this.window = win;
     this.active = false;

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

@@ -33,12 +33,10 @@ export class ViewportService {
    * @param {object} [deps]
    * @param {Window} [deps.window] the window to measure and listen to
    * @param {import('./settings.js').SettingsService} [deps.settings]
-   * @param {import('./context.js').ContextKeyService} [deps.context]
    */
-  constructor({ window: win = globalThis, settings = null, context = null } = {}) {
+  constructor({ window: win = globalThis, settings = null } = {}) {
     this.window = win;
     this.settings = settings;
-    this.context = context;
     // A URL override outranks the setting: it is how someone checks the phone layout on
     // a laptop, and how the e2e suite drives each shell without a device farm.
     this.urlOverride = readUrlOverride(win);
@@ -82,9 +80,6 @@ export class ViewportService {
   #publish(vp) {
     // Context keys so plugin `when` clauses and keybindings can target a form factor
     // the same way they target a view.
-    this.context?.set('viewport.mode', vp.mode);
-    this.context?.set('viewport.phone', vp.mode === 'phone');
-    this.context?.set('viewport.tv', vp.mode === 'tv');
     // The root element carries it too, so CSS can respond without every rule needing a
     // media query that would disagree with the JS branch above it.
     const el = this.window.document?.documentElement;

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

@@ -19,11 +19,9 @@ import { canTranscribeLocally, localAvailability, installLocal, listen } from '.
 export class VoiceSearchService {
   /**
    * @param {object} deps
-   * @param {import('./workbench.js').WorkbenchService} deps.workbench
    * @param {object} deps.notifications
    */
-  constructor({ workbench, notifications, settings } = {}) {
-    this.workbench = workbench;
+  constructor({ notifications, settings } = {}) {
     this.notifications = notifications;
     this.settings = settings;
     this.session = null;

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); }
@@ -664,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),
   );
 }