@3sln/trove 0.0.7 → 0.0.9

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

@@ -6,7 +6,10 @@ import { dd } from '../../runtime.js';
 import { icon, iconForNode } from '../icon.js';
 import { bytes } from '../format.js';
 import { pluginReview } from './pluginReview.js';
-import { typeKeyFor, typeLabelFor, rememberOpener, openerSource } from '../../bl/openers.js';
+import { typeKeyFor, typeLabelFor } from '../../bl/openers.js';
+import { draftFor, promptValueOf, PROMPT } from '../../bl/viewState.js';
+import { CancelTransferAction, ClearFinishedTransfersAction, CloseContextMenuAction, CloseDialogAction, ClosePluginPanelAction, CreateCollectionFromFormAction, DismissNotificationAction, DismissTransferAction, OpenInPanelAction, PatchDraftAction, RememberOpenerAction, RetryTransferAction, SetViewStateAction, UpdateDialogAction } from '../../bl/actions.js';
+import { activate } from '../activate.js';
 
 const { div, span, button, input, h3, p, select, option, label, textarea } = dd;
 
@@ -14,30 +17,38 @@ const { div, span, button, input, h3, p, select, option, label, textarea } = dd;
 export function dialog(state, ui) {
   const d = state.overlay.dialog;
   if (!d) return null;
-  if (d.kind === 'collection') return collectionDialog(d, ui);
-  if (d.kind === 'plugin-review') return pluginReview(d, ui);
+  if (d.kind === 'collection') return collectionDialog(d, ui, state.caps, state.view);
+  if (d.kind === 'plugin-review') return pluginReview(d, ui, state.view);
   if (d.kind === 'opener-chooser') return openerChooserDialog(d, ui);
-  const wb = ui.platform.workbench;
-  let value = d.value ?? '';
-  const submit = () => (d.kind === 'confirm' ? d.onConfirm?.() : d.onSubmit?.(value));
+  // Both kinds carry ACTIONS — what happens if you say yes — rather than a callback. A
+  // prompt's typed value is engine state (see bl/viewState.js), so its actions read what
+  // was typed instead of being handed it, and the dialog spec holds no functions.
+  //
+  // A confirm closes itself here; a prompt's action closes first and then acts, because it
+  // has to read the value before the dialog goes.
+  const value = promptValueOf(state.view, d);
+  const submit = () => {
+    if (d.kind === 'confirm') ui.engine.dispatch(new CloseDialogAction());
+    activate(ui, { actions: d.confirmActions });
+  };
   return div({},
-    div({ className: 'scrim' }).on({ click: () => wb.closeDialog() }),
+    div({ className: 'scrim' }).on({ click: () => ui.engine.dispatch(new CloseDialogAction()) }),
     div({ className: 'dialog' },
       h3(d.title),
       d.body ? div({ className: 'body' }, d.body) : null,
       d.kind === 'prompt'
         ? div({ className: 'field' },
             d.label ? span({ $styling: { 'font-size': '12px', color: 'var(--text-dim)' } }, d.label) : null,
-            input({ className: 'input', value: d.value ?? '', placeholder: d.placeholder || '', autofocus: true })
+            input({ className: 'input', value, placeholder: d.placeholder || '', autofocus: true })
               .on({
-                input: (e) => { value = e.target.value; },
-                keydown: (e) => { if (e.key === 'Enter') submit(); if (e.key === 'Escape') wb.closeDialog(); },
+                input: (e) => ui.engine.dispatch(new SetViewStateAction(PROMPT, { ref: d, value: e.target.value })),
+                keydown: (e) => { if (e.key === 'Enter') submit(); if (e.key === 'Escape') ui.engine.dispatch(new CloseDialogAction()); },
                 $attach: (el) => queueMicrotask(() => { el.focus(); el.select(); }),
               }),
           )
         : null,
       div({ className: 'row-actions' },
-        button({ className: 'btn' }, 'Cancel').on({ click: () => wb.closeDialog() }),
+        button({ className: 'btn' }, 'Cancel').on({ click: () => ui.engine.dispatch(new CloseDialogAction()) }),
         button({ className: `btn ${d.danger ? 'danger' : 'primary'}` }, d.confirmLabel || 'OK').on({ click: submit }),
       ),
     ),
@@ -48,38 +59,41 @@ export function dialog(state, ui) {
 // workbench dialog state (updateDialog), so radio/checkbox selection survives
 // re-renders. "Remember" persists a per-file-type association in settings.
 function openerChooserDialog(d, ui) {
-  const wb = ui.platform.workbench;
-  const platform = ui.platform;
   const selected = d.openerId || d.current || d.openers[0]?.id;
   const remember = !!d.remember;
   const confirm = () => {
-    if (remember && selected) rememberOpener(platform, typeKeyFor(d.node), selected);
-    wb.closeDialog();
-    wb.openFile(d.node, selected, { reset: !!d.reset });
+    if (remember && selected) {
+      ui.engine.dispatch(new RememberOpenerAction(typeKeyFor(d.node), selected));
+    }
+    ui.engine.dispatch(new CloseDialogAction());
+    ui.engine.dispatch(new OpenInPanelAction(d.node, selected, { reset: !!d.reset }));
   };
   return div({},
-    div({ className: 'scrim' }).on({ click: () => wb.closeDialog() }),
+    div({ className: 'scrim' }).on({ click: () => ui.engine.dispatch(new CloseDialogAction()) }),
     div({ className: 'dialog opener-chooser' },
       h3(`Open “${d.node.name}” with…`),
       div({ className: 'opener-list' },
         ...d.openers.map((o) =>
           label({ className: `opener-opt ${o.id === selected ? 'sel' : ''}` },
             input({ type: 'radio', name: 'opener-choice', checked: o.id === selected })
-              .on({ change: () => wb.updateDialog({ openerId: o.id }) }),
+              .on({ change: () => ui.engine.dispatch(new UpdateDialogAction({ openerId: o.id })) }),
             icon(o.icon || iconForNode(d.node), { size: 18 }),
             div({ className: 'oo-main' },
               span({ className: 'oo-title' }, o.title || o.id),
-              span({ className: 'oo-src' }, openerSource(platform, o)),
+              // Resolved by whoever assembled the list — see describeOpener. Asking the
+              // plugin host for a display name mid-render was the last thing keeping
+              // `platform` in this dialog.
+              span({ className: 'oo-src' }, o.source),
             ),
-          ).on({ click: () => wb.updateDialog({ openerId: o.id }) }),
+          ).on({ click: () => ui.engine.dispatch(new UpdateDialogAction({ openerId: o.id })) }),
         ),
       ),
       label({ className: 'opener-remember' },
-        input({ type: 'checkbox', checked: remember }).on({ change: (e) => wb.updateDialog({ remember: e.target.checked }) }),
+        input({ type: 'checkbox', checked: remember }).on({ change: (e) => ui.engine.dispatch(new UpdateDialogAction({ remember: e.target.checked })) }),
         span(`Always use this for ${typeLabelFor(d.node)}`),
       ),
       div({ className: 'row-actions' },
-        button({ className: 'btn' }, 'Cancel').on({ click: () => wb.closeDialog() }),
+        button({ className: 'btn' }, 'Cancel').on({ click: () => ui.engine.dispatch(new CloseDialogAction()) }),
         button({ className: 'btn primary' }, 'Open').on({ click: confirm }),
       ),
     ),
@@ -95,19 +109,35 @@ function openerChooserDialog(d, ui) {
 //
 // The form persists across re-renders (keyed to the dialog instance) so switching driver
 // keeps what has been typed.
-let colState = { ref: null, form: null };
-function collectionDialog(d, ui) {
-  const wb = ui.platform.workbench;
-  const drivers = ui.platform.capabilities?.storageDrivers || [];
+// The collection dialog's unsubmitted form. Engine state, because changing the storage
+// driver changes which fields are on screen — see bl/viewState.js.
+const COL_FORM = 'collectionDialog';
+function collectionDialog(d, ui, caps, view) {
+  const drivers = caps?.storageDrivers || [];
 
-  if (colState.ref !== d) {
-    colState = { ref: d, form: { name: '', description: '', driver: drivers[0]?.key || '' } };
-  }
+  // Derived, not written. This used to install the empty form during the render that
+  // noticed the dialog had changed — a render with a side effect. `draftFor` answers with
+  // the default when the held draft belongs to a different dialog instance, so nothing is
+  // written until the user types something.
+  const blankForm = {
+    name: '', description: '', driver: drivers[0]?.key || '',
+    // Off by default and deliberately so: encryption changes what the drive can do for you
+    // (see the exposure notes below) and should be a decision, not a default someone
+    // discovers later.
+    encrypt: false, encryptWhat: 'all', encryptList: '',
+  };
+  const colState = draftFor(view, COL_FORM, d, { form: blankForm });
   const form = colState.form;
   const driver = drivers.find((x) => x.key === form.driver) || drivers[0];
+  // Every field writes through the cell. Only the driver changes which fields are on
+  // screen, but writing them all the same way means there is no second rule to remember —
+  // and a text field that only mattered on submit was the reason `form` could be mutated
+  // in place at all.
+  // Merged against STORED state, not against the `form` this render closed over — see
+  // PatchDraftAction. Changing two fields before the next render used to lose one.
   const set = (k) => (e) => {
-    form[k] = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
-    if (k === 'driver') ui.rerender?.();
+    const value = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
+    ui.engine.dispatch(new PatchDraftAction(COL_FORM, colState.ref, { [k]: value }, blankForm));
   };
 
   const submit = () => {
@@ -118,17 +148,28 @@ function collectionDialog(d, ui) {
       const v = form[f.name];
       if (v !== undefined && v !== '') store[f.name] = f.type === 'number' ? Number(v) : v;
     }
-    d.onSubmit?.({ name: form.name, description: form.description, store });
+    ui.engine.dispatch(new CreateCollectionFromFormAction({
+      name: form.name, description: form.description, store,
+      encryption: encryptionOf(form),
+    }));
   };
 
   const field = (lbl, k, ph = '') => div({ className: 'field', $styling: { 'margin-bottom': '10px' } },
     label(lbl), input({ className: 'input', placeholder: ph }).on({ input: set(k) }));
 
-  const ready = !!form.name.trim() && !!form.driver
+  // The server refuses a configuration that would match nothing, and saying so here is the
+  // difference between a form that explains itself and an API error after the fact.
+  const encryptionProblem = form.encrypt && form.encryptWhat !== 'all' && !parseList(form.encryptList).length
+    ? (form.encryptWhat === 'extensions'
+      ? 'Name at least one extension, or choose every file.'
+      : 'Name at least one media type, or choose every file.')
+    : null;
+
+  const ready = !!form.name.trim() && !!form.driver && !encryptionProblem
     && (driver?.fields || []).every((f) => !f.required || String(form[f.name] ?? '').trim());
 
   return div({},
-    div({ className: 'scrim' }).on({ click: () => wb.closeDialog() }),
+    div({ className: 'scrim' }).on({ click: () => ui.engine.dispatch(new CloseDialogAction()) }),
     div({ className: 'dialog', $styling: { width: 'min(480px, 94vw)' } },
       h3('New collection'),
       div({ className: 'body' }, 'A collection is a backing store you own. Configure where its files live.'),
@@ -143,8 +184,9 @@ function collectionDialog(d, ui) {
         // misconfiguration — saying so beats an empty dropdown.
         : div({ className: 'body' }, 'This server has no storage drivers registered, so a collection cannot be created.'),
       driver ? storeFields(driver, form, set) : null,
+      encryptionSection(form, set, caps, encryptionProblem),
       div({ className: 'row-actions' },
-        button({ className: 'btn' }, 'Cancel').on({ click: () => wb.closeDialog() }),
+        button({ className: 'btn' }, 'Cancel').on({ click: () => ui.engine.dispatch(new CloseDialogAction()) }),
         button({ className: 'btn primary', $attrs: ready ? {} : { disabled: 'true' } }, 'Create collection')
           .on({ click: () => ready && submit() }),
       ),
@@ -152,6 +194,78 @@ function collectionDialog(d, ui) {
   );
 }
 
+/** The rules as the API wants them, or null when encryption is off. */
+function encryptionOf(form) {
+  if (!form.encrypt) return null;
+  const list = parseList(form.encryptList);
+  return {
+    enabled: true,
+    rules: form.encryptWhat === 'all'
+      ? { all: true }
+      : form.encryptWhat === 'extensions'
+        ? { extensions: list }
+        : { mimeTypes: list },
+  };
+}
+
+/** A comma or space separated list, emptied of blanks. */
+function parseList(text) {
+  return String(text || '').split(/[\s,]+/).map((x) => x.trim()).filter(Boolean);
+}
+
+/**
+ * Turning encryption on, and saying what it does.
+ *
+ * The scope notes sit HERE rather than in a help page, because the moment someone enables
+ * this is the moment the scope matters. What it protects is the storage provider seeing
+ * file contents; what it does not protect against is anything that reads through the drive,
+ * which includes every indexer. Someone who believes they have just made their files
+ * unreadable to the server has been misled by omission.
+ */
+function encryptionSection(form, set, caps, problem) {
+  const indexers = (caps?.indexers || []).filter((i) => i.readsContent !== false);
+  return div({ className: 'field enc-section', $styling: { 'margin-bottom': '10px' } },
+    label({ className: 'enc-toggle' },
+      input({ type: 'checkbox', checked: !!form.encrypt }).on({ change: set('encrypt') }),
+      span('Encrypt files in this collection'),
+    ),
+    !form.encrypt
+      ? div({ className: 'enc-hint' }, 'Files are stored exactly as uploaded.')
+      : div({ className: 'enc-body' },
+        div({ className: 'field' },
+          label('What to encrypt'),
+          select({ className: 'input' },
+            option({ value: 'all', selected: form.encryptWhat === 'all' }, 'Every file'),
+            option({ value: 'extensions', selected: form.encryptWhat === 'extensions' }, 'Only these extensions'),
+            option({ value: 'mimeTypes', selected: form.encryptWhat === 'mimeTypes' }, 'Only these media types'),
+          ).on({ change: set('encryptWhat') })),
+        form.encryptWhat !== 'all'
+          ? div({ className: 'field' },
+            input({
+              className: 'input', value: form.encryptList,
+              placeholder: form.encryptWhat === 'extensions' ? '.pdf, .docx, .key' : 'image, application/pdf',
+            }).on({ input: set('encryptList') }),
+            // A media type matches by its leading part too, which is how someone actually
+            // thinks about "encrypt my photos".
+            div({ className: 'enc-hint' }, form.encryptWhat === 'extensions'
+              ? 'Separated by commas. The leading dot is optional.'
+              : 'Separated by commas. “image” covers every image type.'))
+          : null,
+        problem ? div({ className: 'enc-problem' }, icon('warn', { size: 13 }), span(problem)) : null,
+        div({ className: 'enc-scope' },
+          div({ className: 'es-title' }, 'What this does'),
+          div({ className: 'es-line' }, 'Files are sealed in your browser before they are uploaded, so the storage provider only ever holds ciphertext.'),
+          div({ className: 'es-title' }, 'What it does not do'),
+          div({ className: 'es-line' }, 'It is not end-to-end. The drive holds the key and decrypts for anything that reads through it — previews, downloads, and search indexing.'),
+          indexers.length
+            ? div({ className: 'es-line' }, `These read file contents in the clear: ${indexers.map((i) => i.title || i.id).join(', ')}.`)
+            : null,
+          div({ className: 'es-line note' }, 'This applies to files uploaded from now on. Turning it off later does not decrypt anything already sealed.'),
+        ),
+      ),
+  );
+}
+
 /** The chosen driver's declared fields, rendered from its descriptor. */
 function storeFields(driver, form, set) {
   if (!driver.fields.length) {
@@ -182,7 +296,6 @@ function storeFields(driver, form, set) {
 export function contextMenu(state, ui) {
   const m = state.overlay.contextMenu;
   if (!m || !m.items?.length) return null;
-  const wb = ui.platform.workbench;
   // 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
@@ -192,7 +305,7 @@ export function contextMenu(state, ui) {
   const x = Math.max(8, Math.min(m.x, window.innerWidth - 220));
   const y = Math.max(8, Math.min(m.y, window.innerHeight - wanted));
   return div({},
-    div({ className: 'scrim', $styling: { background: 'transparent' } }).on({ click: () => wb.closeContextMenu(), contextmenu: (e) => { e.preventDefault(); wb.closeContextMenu(); } }),
+    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' } },
       ...m.items.map((it, i) =>
         it.sep
@@ -205,9 +318,9 @@ export function contextMenu(state, ui) {
               span(it.label),
               it.kbd ? span({ className: 'kbd' }, it.kbd) : null,
             ).on({
-              click: () => { wb.closeContextMenu(); it.run?.(); },
+              click: () => { ui.engine.dispatch(new CloseContextMenuAction()); activate(ui, it); },
               // The first item is focused on open, so Escape has to get you back out.
-              keydown: (e) => { if (e.key === 'Escape') { e.preventDefault(); wb.closeContextMenu(); } },
+              keydown: (e) => { if (e.key === 'Escape') { e.preventDefault(); ui.engine.dispatch(new CloseContextMenuAction()); } },
               $attach: (el) => { if (i === 0) queueMicrotask(() => el.focus()); },
             }),
       ),
@@ -224,7 +337,7 @@ export function toasts(state, ui) {
       div({ className: `toast ${n.level}` },
         div({ className: 'bar' }),
         div({ className: 'msg' }, n.message),
-        button({ className: 'x' }, icon('close', { size: 14 })).on({ click: () => ui.platform.notifications.dismiss(n.id) }),
+        button({ className: 'x' }, icon('close', { size: 14 })).on({ click: () => ui.engine.dispatch(new DismissNotificationAction(n.id)) }),
       ).key(n.id),
     ),
   );
@@ -240,7 +353,7 @@ export function transferTray(state, ui) {
       span({ $styling: { 'margin-left': '6px' } }, 'Transfers'),
       div({ className: 'actions' },
         button({ className: 'iconbtn', title: 'Clear finished' }, icon('check', { size: 14 }))
-          .on({ click: () => ui.app.transfers.clearDone() }),
+          .on({ click: () => ui.engine.dispatch(new ClearFinishedTransfersAction()) }),
       ),
     ),
     div({ className: 'items' },
@@ -250,13 +363,26 @@ export function transferTray(state, ui) {
             icon(t.status === 'error' ? 'warn' : t.status === 'done' ? 'check' : 'upload', { size: 14 }),
             span({ className: 'name' }, t.name),
             t.status === 'active'
-              ? button({ className: 'iconbtn', title: 'Cancel' }, icon('close', { size: 13 })).on({ click: () => ui.app.transfers.cancel(t.id) })
+              ? button({ className: 'iconbtn', title: 'Cancel' }, icon('close', { size: 13 })).on({ click: () => ui.engine.dispatch(new CancelTransferAction(t.id)) })
               : span({ className: 'pct' }, t.status === 'done' ? bytes(t.total) : t.status),
           ),
           t.status === 'active'
             ? div({ className: 'progress' }, div({ $styling: { width: `${Math.round(t.ratio * 100)}%` } }))
             : t.error ? div({ $styling: { 'font-size': '11px', color: 'var(--danger)', 'margin-top': '4px' } }, t.error) : null,
           t.status === 'active' ? div({ className: 'pct', $styling: { 'margin-top': '4px' } }, `${bytes(t.loaded)} / ${bytes(t.total)}`) : null,
+          // Offered on anything that stopped short, cancelled included — the transport
+          // already retries what is worth retrying on its own, so a row that reached this
+          // state failed for a reason another automatic attempt would not fix. A lost
+          // upload session is the case in point: correctly non-retryable, and correctly
+          // something the user can choose to start over.
+          (t.status === 'error' || t.status === 'cancelled') && t.retryable
+            ? div({ className: 'xfer-actions' },
+              button({ className: 'btn small' }, icon('refresh', { size: 12 }), span('Retry'))
+                .on({ click: () => ui.engine.dispatch(new RetryTransferAction(t.id)) }),
+              button({ className: 'btn small ghost' }, 'Dismiss')
+                .on({ click: () => ui.engine.dispatch(new DismissTransferAction(t.id)) }),
+            )
+            : null,
         ).key(t.id),
       ),
     ),
@@ -272,7 +398,7 @@ export function pluginPanel(state, ui) {
     div({ className: 'head' },
       icon('plug', { size: 14 }),
       span(plugin?.name || pid),
-      button({ className: 'iconbtn x' }, icon('close', { size: 14 })).on({ click: () => ui.platform.workbench.closePluginPanel() }),
+      button({ className: 'iconbtn x' }, icon('close', { size: 14 })).on({ click: () => ui.engine.dispatch(new ClosePluginPanelAction()) }),
     ),
     // The host mounts the plugin's iframe into this element on attach.
     div({ className: 'host' }).on({

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

@@ -14,7 +14,8 @@
 import { dd } from '../../runtime.js';
 import { icon } from '../icon.js';
 import { bytes } from '../format.js';
-import { statusFacts, usageChip } from './statusBar.js';
+import { usageChip } from './statusBar.js';
+import { CloseSheetAction, ExecCommandAction, OpenSheetAction, ToggleActivityPanelAction, ToggleInboxAction } from '../../bl/actions.js';
 
 const { div, button, span, img } = dd;
 
@@ -26,18 +27,22 @@ const TABS = [
   { id: 'plugins', icon: 'plug', label: 'Plugins', command: 'workbench.view.plugins' },
 ];
 
-/** Which single glyph best describes the drive's state right now. */
-function statusGlyph(f) {
-  if (!f.off.online) return { icon: 'info', tone: 'warn', label: 'Offline' };
-  if (f.issues.length) return { icon: 'warn', tone: 'danger', label: `${f.issues.length} need attention`, badge: f.issues.length };
-  if (f.running.length || f.uploading.length || f.off.syncing) return { spinner: true, tone: '', label: 'Working…' };
-  if (f.usage?.total && f.usage.available / f.usage.total < 0.1) return { icon: 'info', tone: 'warn', label: 'Low on space' };
-  return { icon: 'info', tone: '', label: 'Status' };
-}
+// How to DRAW each condition. Which condition is the one worth showing — offline over a
+// standing problem, a standing problem over work in progress — is decided by the
+// `statusFacts` query, because that ordering is a claim about what a person most needs to
+// know rather than a question about glyphs. See bl/status.js.
+const GLYPHS = {
+  offline: { icon: 'info', tone: 'warn' },
+  issues: { icon: 'warn', tone: 'danger' },
+  working: { spinner: true, tone: '' },
+  lowSpace: { icon: 'info', tone: 'warn' },
+  idle: { icon: 'info', tone: '' },
+};
 
 export function phoneTopBar(state, ui) {
-  const f = statusFacts(state, ui);
-  const g = statusGlyph(f);
+  const f = state.facts;
+  const c = f.condition;
+  const g = { ...(GLYPHS[c.kind] || GLYPHS.idle), label: c.label, badge: c.kind === 'issues' ? c.count : 0 };
   // Where you are, at the coarsest level. Deliberately NOT the open file's name: the
   // viewer's own breadcrumb sits directly beneath this bar and already says that, and two
   // rows of chrome repeating "notes.txt" costs a fifth of the screen to say it twice.
@@ -46,14 +51,14 @@ export function phoneTopBar(state, ui) {
       : f.collectionLabel;
   return div({ className: 'phonebar top' },
     button({ className: 'pb-brand', 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')) }),
     div({ className: 'pb-title' }, title),
     button({ className: `pb-status ${g.tone}`, title: g.label, $attrs: { 'aria-label': g.label } },
       g.spinner
         ? div({ className: 'spinner', $styling: { width: '15px', height: '15px' } })
         : icon(g.icon, { size: 18 }),
       g.badge ? span({ className: 'pb-badge' }, String(g.badge > 9 ? '9+' : g.badge)) : null,
-    ).on({ click: () => ui.platform.workbench.openSheet('status') }),
+    ).on({ click: () => ui.engine.dispatch(new OpenSheetAction('status')) }),
   );
 }
 
@@ -66,7 +71,7 @@ export function phoneBottomBar(state, ui) {
       className: `pb-tab ${!sheet && active === t.id ? 'active' : ''}`,
       $attrs: { 'aria-label': t.label },
     }, icon(t.icon, { size: 21 }), span({ className: 'pb-label' }, t.label))
-      .on({ click: () => { ui.platform.workbench.closeSheet(); ui.exec(t.command); } })),
+      .on({ click: () => { ui.engine.dispatch(new CloseSheetAction()); ui.engine.dispatch(new ExecCommandAction(t.command)); } })),
     // Settings is reached FROM the More sheet, so while you are in it "More" is where
     // you are — otherwise all four tabs read as inactive and the bar claims you are
     // nowhere.
@@ -77,7 +82,7 @@ export function phoneBottomBar(state, ui) {
       icon('dots', { size: 21 }),
       unread ? span({ className: 'pb-badge' }, String(unread > 9 ? '9+' : unread)) : null,
       span({ className: 'pb-label' }, 'More'),
-    ).on({ click: () => ui.platform.workbench.openSheet('more') }),
+    ).on({ click: () => ui.engine.dispatch(new OpenSheetAction('more')) }),
   );
 }
 
@@ -97,20 +102,18 @@ function sheetRow({ icon: name, label, value, danger, onClick }) {
 export function phoneSheet(state, ui) {
   const which = state.wb.sheet;
   if (!which) return null;
-  const wb = ui.platform.workbench;
   return div({ className: 'sheet-wrap' },
-    div({ className: 'scrim' }).on({ click: () => wb.closeSheet() }),
+    div({ className: 'scrim' }).on({ click: () => ui.engine.dispatch(new CloseSheetAction()) }),
     div({ className: 'sheet' },
-      div({ className: 'sheet-grip' }).on({ click: () => wb.closeSheet() }),
+      div({ className: 'sheet-grip' }).on({ click: () => ui.engine.dispatch(new CloseSheetAction()) }),
       which === 'status' ? statusSheet(state, ui) : moreSheet(state, ui),
     ),
   );
 }
 
 function statusSheet(state, ui) {
-  const f = statusFacts(state, ui);
-  const wb = ui.platform.workbench;
-  const go = (cmd) => () => { wb.closeSheet(); ui.exec(cmd); };
+  const f = state.facts;
+  const go = (cmd) => () => { ui.engine.dispatch(new CloseSheetAction()); ui.engine.dispatch(new ExecCommandAction(cmd)); };
   return div({ className: 'sheet-body' },
     div({ className: 'sheet-title' }, f.collectionLabel),
 
@@ -119,14 +122,14 @@ function statusSheet(state, ui) {
       ? sheetRow({
         icon: 'warn', danger: true,
         label: `${f.issues.length} need${f.issues.length === 1 ? 's' : ''} attention`,
-        onClick: () => { wb.closeSheet(); ui.app.activity.togglePanel(true); },
+        onClick: () => { ui.engine.dispatch(new CloseSheetAction()); ui.engine.dispatch(new ToggleActivityPanelAction(true)); },
       })
       : null,
     f.running.length || f.uploading.length
       ? sheetRow({
         icon: 'refresh',
         label: `${f.running.length + f.uploading.length} running`,
-        onClick: () => { wb.closeSheet(); ui.app.activity.togglePanel(true); },
+        onClick: () => { ui.engine.dispatch(new CloseSheetAction()); ui.engine.dispatch(new ToggleActivityPanelAction(true)); },
       })
       : null,
     !f.off.online ? sheetRow({ icon: 'info', label: 'Offline', value: `${f.off.pins.length} pinned` }) : null,
@@ -146,26 +149,25 @@ function statusSheet(state, ui) {
       ? div({ className: 'sheet-row static usage' },
         icon('download', { size: 18 }),
         span({ className: 'sr-label' }, 'Free space'),
-        usageChip({ usage: f.usage }))
+        usageChip(f))
       : null,
-    f.caps ? sheetRow({
-      icon: f.caps.storage?.presignDownload ? 'download' : 'files',
+    state.caps ? sheetRow({
+      icon: state.caps.storage?.presignDownload ? 'download' : 'files',
       label: 'Transfers',
-      value: f.caps.storage?.presignDownload ? 'Direct to storage' : 'Through the server',
+      value: state.caps.storage?.presignDownload ? 'Direct to storage' : 'Through the server',
     }) : null,
-    f.caps?.features?.semanticSearch ? sheetRow({ icon: 'star', label: 'Search', value: 'Semantic + keyword' }) : null,
+    state.caps?.features?.semanticSearch ? sheetRow({ icon: 'star', label: 'Search', value: 'Semantic + keyword' }) : null,
 
     div({ className: 'sheet-actions' },
       button({ className: 'btn small ghost' }, icon('refresh', { size: 13 }), span('Scan for changes')).on({ click: go('workbench.scanCollection') }),
       button({ className: 'btn small ghost' }, icon('refresh', { size: 13 }), span('Activity'))
-        .on({ click: () => { ui.platform.workbench.closeSheet(); ui.app.activity.togglePanel(true); } }),
+        .on({ click: () => { ui.engine.dispatch(new CloseSheetAction()); ui.engine.dispatch(new ToggleActivityPanelAction(true)); } }),
     ),
   );
 }
 
 function moreSheet(state, ui) {
-  const wb = ui.platform.workbench;
-  const go = (cmd) => () => { wb.closeSheet(); ui.exec(cmd); };
+  const go = (cmd) => () => { ui.engine.dispatch(new CloseSheetAction()); ui.engine.dispatch(new ExecCommandAction(cmd)); };
   const me = state.so.me;
   const unread = state.so.notifications.unread;
   return div({ className: 'sheet-body' },
@@ -177,8 +179,8 @@ function moreSheet(state, ui) {
         div({}, div({ className: 'sm-name' }, me.name || me.id), me.email ? div({ className: 'sm-sub' }, me.email) : null))
       : null,
 
-    sheetRow({ icon: 'bell', label: unread ? `Notifications (${unread})` : 'Notifications', onClick: () => { wb.closeSheet(); ui.app.social.toggleInbox(true); } }),
-    sheetRow({ icon: 'refresh', label: 'Activity & problems', onClick: () => { wb.closeSheet(); ui.app.activity.togglePanel(true); } }),
+    sheetRow({ icon: 'bell', label: unread ? `Notifications (${unread})` : 'Notifications', onClick: () => { ui.engine.dispatch(new CloseSheetAction()); ui.engine.dispatch(new ToggleInboxAction(true)); } }),
+    sheetRow({ icon: 'refresh', label: 'Activity & problems', onClick: () => { ui.engine.dispatch(new CloseSheetAction()); ui.engine.dispatch(new ToggleActivityPanelAction(true)); } }),
     sheetRow({ icon: 'info', label: 'Details & conversation', onClick: go('workbench.toggleInfoPanel') }),
     sheetRow({ icon: 'trash', label: 'Trash', onClick: go('explorer.showTrash') }),
     sheetRow({ icon: 'refresh', label: 'Refresh', onClick: go('explorer.refresh') }),