@3sln/trove 0.0.7 → 0.0.9

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

@@ -4,31 +4,31 @@
 
 import { dd } from '../../runtime.js';
 import { icon, iconForNode } from '../icon.js';
-import { prettyKey } from '../../platform/keybindings.js';
-import { OpenFileAction, QuickOpenAction } from '../../bl/actions.js';
+import { ClosePaletteAction, ExecCommandAction, MovePaletteAction, OpenFileAction, QuickOpenAction, SetPaletteIndexAction, SetPaletteQueryAction } from '../../bl/actions.js';
 
 const { div, input, span } = dd;
 
 export default function commandPalette(state, ui) {
   const pal = state.overlay.palette;
   if (!pal) return null;
-  const wb = ui.platform.workbench;
   // With no query there is nothing to show — and showing the PREVIOUS session's hits
   // would be worse than nothing, since they don't match what the field now says.
+  // Already ranked — see the `paletteMatches` query. The palette used to score and sort
+  // here, with its own fuzzy algorithm that disagreed with the launcher's.
   const items = pal.mode === 'files'
     ? (pal.query.trim() ? state.se.paletteFiles || [] : [])
-    : filterCommands(state, ui, pal.query);
+    : state.matches || [];
   const index = Math.min(pal.index, Math.max(0, items.length - 1));
 
   const run = (item) => {
     if (!item) return;
-    wb.closePalette();
-    if (pal.mode === 'files') ui.go(new OpenFileAction(item.node));
-    else ui.exec(item.id);
+    ui.engine.dispatch(new ClosePaletteAction());
+    if (pal.mode === 'files') ui.engine.dispatch(new OpenFileAction(item.node));
+    else ui.engine.dispatch(new ExecCommandAction(item.id));
   };
 
   return div({},
-    div({ className: 'scrim' }).on({ click: () => wb.closePalette() }),
+    div({ className: 'scrim' }).on({ click: () => ui.engine.dispatch(new ClosePaletteAction()) }),
     div({ className: 'palette' },
       div({ className: 'search' },
         icon(pal.mode === 'files' ? 'search' : 'command', { size: 18 }),
@@ -54,7 +54,7 @@ export default function commandPalette(state, ui) {
       div({ className: 'results' },
         items.length
           ? items.map((item, i) => {
-            const hover = () => wb.setPaletteIndex(i);
+            const hover = () => ui.engine.dispatch(new SetPaletteIndexAction(i));
             return pal.mode === 'files' ? fileOpt(item, i === index, run, hover) : cmdOpt(item, i === index, ui, run, hover);
           })
           : emptyResults(pal, state),
@@ -72,23 +72,19 @@ function emptyResults(pal, state) {
   return div({ className: 'none' }, pal.query.trim() ? 'No files found' : 'Type to search files by name');
 }
 
+// Everything here arrives decided — see the paletteCommands view query. This used to ask
+// the keybinding service for a label, then throw the label away and re-resolve the raw key
+// to prettify it again, which was two lookups to render one `<kbd>`.
 function cmdOpt(cmd, active, ui, run, hover) {
-  const key = ui.platform.keybindings.labelFor(cmd.id);
-  const available = ui.platform.commands.isAvailable(cmd);
-  return div({ className: `opt ${active ? 'active' : ''} ${available ? '' : 'unavailable'}` },
+  return div({ className: `opt ${active ? 'active' : ''} ${cmd.available ? '' : 'unavailable'}` },
     span({ className: 'ico' }, icon(cmd.icon || 'command', { size: 16 })),
     cmd.category ? span({ className: 'cat' }, cmd.category + ' ›') : null,
     span({ className: 'title' }, cmd.title),
-    !available ? span({ className: 'offline-tag' }, 'offline') : null,
-    key ? span({ className: 'kbd' }, dd.h('kbd', prettyKey(keyRaw(ui, cmd.id)))) : null,
+    !cmd.available ? span({ className: 'offline-tag' }, 'offline') : null,
+    cmd.keybinding ? span({ className: 'kbd' }, dd.h('kbd', cmd.keybinding)) : null,
   ).on({ click: () => run(cmd), mouseenter: hover });
 }
 
-function keyRaw(ui, id) {
-  const b = ui.platform.keybindings.resolved().find((x) => x.command === id);
-  return b ? b.key : '';
-}
-
 function fileOpt(item, active, run, hover) {
   return div({ className: `opt ${active ? 'active' : ''}` },
     span({ className: 'ico' }, icon(iconForNode(item.node), { size: 16 })),
@@ -97,58 +93,31 @@ function fileOpt(item, active, run, hover) {
   ).on({ click: () => run(item), mouseenter: hover });
 }
 
-function filterCommands(state, ui, query) {
-  const all = ui.platform.commands.paletteCommands();
-  const q = query.trim().toLowerCase();
-  if (!q) return all.slice(0, 60);
-  const scored = [];
-  for (const c of all) {
-    const hay = `${c.category || ''} ${c.title}`.toLowerCase();
-    const s = fuzzyScore(hay, q);
-    if (s > 0) scored.push([s, c]);
-  }
-  return scored.sort((a, b) => b[0] - a[0]).slice(0, 60).map((x) => x[1]);
-}
 
-function fuzzyScore(hay, q) {
-  let score = 0;
-  let hi = 0;
-  for (const ch of q) {
-    const idx = hay.indexOf(ch, hi);
-    if (idx < 0) return 0;
-    score += idx === hi ? 3 : 1;
-    hi = idx + 1;
-  }
-  if (hay.includes(q)) score += 10;
-  return score;
-}
 
 function onKey(e, ui, items, index, run) {
-  const wb = ui.platform.workbench;
   if (e.key === 'ArrowDown') {
     e.preventDefault();
-    wb.movePalette(1, items.length);
+    ui.engine.dispatch(new MovePaletteAction(1, items.length));
   } else if (e.key === 'ArrowUp') {
     e.preventDefault();
-    wb.movePalette(-1, items.length);
+    ui.engine.dispatch(new MovePaletteAction(-1, items.length));
   } else if (e.key === 'Enter') {
     e.preventDefault();
     run(items[index]);
   } else if (e.key === 'Escape') {
     e.preventDefault();
-    wb.closePalette();
+    ui.engine.dispatch(new ClosePaletteAction());
   }
 }
 
 let fileTimer = null;
 function onQuery(ui, value) {
-  const wb = ui.platform.workbench;
-  wb.setPaletteQuery(value);
-  // The palette's CURRENT mode, not whichever one was on screen when this listener
-  // was created — see the note at the input.
+  ui.engine.dispatch(new SetPaletteQueryAction(value));
   clearTimeout(fileTimer);
-  if (wb.overlay.state.palette?.mode !== 'files') return;
-  // Route the file search through an action; results land in the reactive search
-  // service (state.se.paletteFiles), so the palette re-renders without ad-hoc state.
-  fileTimer = setTimeout(() => ui.go(new QuickOpenAction(value)), 200);
+  // The mode guard moved into QuickOpenAction, where "current" means current: the timer
+  // below outlives the render that set it, so checking here would test a stale mode.
+  // Results land in the search service (state.se.paletteFiles), so the palette re-renders
+  // without ad-hoc state.
+  fileTimer = setTimeout(() => ui.engine.dispatch(new QuickOpenAction(value)), 200);
 }

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

@@ -8,7 +8,8 @@
 import { dd } from '../../runtime.js';
 import { icon, iconForNode } from '../icon.js';
 import { renderOpener } from './openers/index.js';
-import { availableOpeners } from '../../bl/openers.js';
+import { openersFor } from '../../bl/openers.js';
+import { NavigateBackAction, OpenInPanelAction, ShowDialogAction, ShowHomeAction, ToggleInfoPanelAction } from '../../bl/actions.js';
 
 const { div, span, button } = dd;
 
@@ -21,30 +22,29 @@ export default function editorArea(state, ui) {
   const active = files[files.length - 1];
   if (!active) return div({ className: 'editor' });
   return div({ className: 'editor' },
-    navBar(files, active, ui),
+    navBar(files, active, state, ui),
     div({ className: 'stage' }, openerHost(active, ui)),
   );
 }
 
-function navBar(files, active, ui) {
-  const w = ui.platform.workbench;
+function navBar(files, active, state, ui) {
   return div({ className: 'viewer-nav' },
     button({ className: 'vn-back', title: 'Back (Esc)' }, icon('chevron-left', { size: 16 }))
-      .on({ click: () => w.back() }),
+      .on({ click: () => ui.engine.dispatch(new NavigateBackAction()) }),
     div({ className: 'vn-trail' },
       button({ className: 'vn-crumb' }, icon('search', { size: 13 }), span('Search'))
-        .on({ click: () => w.showHome() }),
+        .on({ click: () => ui.engine.dispatch(new ShowHomeAction()) }),
       ...files.map((p) =>
         button({ className: `vn-crumb ${p.id === active.id ? 'active' : ''}`, title: p.node.name },
           icon(iconForNode(p.node), { size: 13 }), span({ className: 'label' }, p.node.name))
-          .on({ click: () => w.openFile(p.node, p.openerId) })),
+          .on({ click: () => ui.engine.dispatch(new OpenInPanelAction(p.node, p.openerId)) })),
     ),
     div({ className: 'vn-actions' },
-      openerSwitch(active, ui),
+      openerSwitch(active, state, ui),
       button({ className: 'iconbtn', title: 'Details & comments' }, icon('info', { size: 15 }))
-        .on({ click: () => w.toggleInfoPanel() }),
+        .on({ click: () => ui.engine.dispatch(new ToggleInfoPanelAction()) }),
       button({ className: 'iconbtn', title: 'Close (Esc)' }, icon('close', { size: 15 }))
-        .on({ click: () => w.showHome() }),
+        .on({ click: () => ui.engine.dispatch(new ShowHomeAction()) }),
     ),
   );
 }
@@ -52,11 +52,14 @@ function navBar(files, active, ui) {
 // "Open with…" — shown only when more than one opener can handle this file. Opens
 // the chooser (pre-selected to the current opener) so the user can switch viewers,
 // and optionally make the choice their default for this file type.
-function openerSwitch(active, ui) {
-  const openers = availableOpeners(ui.platform, active.node);
+function openerSwitch(active, state, ui) {
+  // `state.openers` has already had its when-clauses and plugin health resolved by the
+  // query; matching them against THIS file is pure. That split is why this no longer
+  // reaches for the contribution registry mid-render.
+  const openers = openersFor(state.openers, active.node);
   if (openers.length <= 1) return null;
   return button({ className: 'iconbtn', title: 'Open with…' }, icon('dots', { size: 15 }))
-    .on({ click: () => ui.platform.workbench.showDialog({ kind: 'opener-chooser', node: active.node, openers, current: active.openerId }) });
+    .on({ click: () => ui.engine.dispatch(new ShowDialogAction({ kind: 'opener-chooser', node: active.node, openers, current: active.openerId })) });
 }
 
 function openerHost(panel, ui) {

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

@@ -6,10 +6,11 @@
 
 import { dd } from '../../runtime.js';
 import { icon } from '../icon.js';
-import { OpenFileAction, SearchAction, FilterAction } from '../../bl/actions.js';
+import { ExecCommandAction, FilterAction, MoveLaunchAction, SearchAction, SelectLaunchAction, SetLaunchIndexAction, SetLaunchQueryAction } from '../../bl/actions.js';
 import { parseTagQuery, filterLabel } from '../../bl/tagQuery.js';
-import { activeView, renderView, viewSwitcher, viewMove } from './views/index.js';
+import { renderView, viewSwitcher, viewMove } from './views/index.js';
 import { openRowMenu } from './views/parts.js';
+import { activate } from '../activate.js';
 
 const { div, span, input, button } = dd;
 
@@ -23,8 +24,8 @@ const ARROWS = new Set(['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']);
 // stops being the right advice. The fallback covers the moment before capabilities
 // arrive and any server too old to say; `!` is ours either way, since running a command
 // from here is a client convention the server knows nothing about.
-function promptFor(ui, { compact = false, modal = false } = {}) {
-  const p = ui.platform.capabilities?.searchPrompt;
+function promptFor(caps, { compact = false, modal = false } = {}) {
+  const p = caps?.searchPrompt;
   const base = (compact ? p?.short || p?.placeholder : p?.placeholder)
     || (compact ? 'Search files' : 'Search files · # filter by tag');
   // On a phone the box is ~300px wide; adding a second clause guarantees an ellipsis
@@ -36,30 +37,32 @@ let searchTimer = null;
 function runSearch(ui, query) {
   // SearchAction owns search state; the launcher only dispatches (no direct .set).
   clearTimeout(searchTimer);
-  searchTimer = setTimeout(() => ui.go(new SearchAction(query)), 240);
+  searchTimer = setTimeout(() => ui.engine.dispatch(new SearchAction(query)), 240);
 }
 function clearSearch(ui) {
-  ui.platform.workbench.setLaunchQuery('');
-  ui.go(new SearchAction('')); // empty query resets results/ran/error in the service
+  ui.engine.dispatch(new SetLaunchQueryAction(''));
+  ui.engine.dispatch(new SearchAction('')); // empty query resets results/ran/error in the service
 }
 function runFilter(ui, filters, text) {
   clearTimeout(searchTimer);
-  searchTimer = setTimeout(() => ui.go(new FilterAction(filters, text)), 200);
+  searchTimer = setTimeout(() => ui.engine.dispatch(new FilterAction(filters, text)), 200);
 }
 
 export default function launcher(state, ui, opts = {}) {
-  const wb = ui.platform.workbench;
   const modal = !!opts.modal; // rendered as the double-shift overlay → picks reset the stack
   const q = state.wb.launch.query;
-  const mode = q.startsWith('!') ? 'command' : q.includes('#') ? 'filter' : 'search';
-
-  const groups = buildContent(state, ui, q, mode, modal);
+  // What is on screen, which view draws it, and whether a search-help offer applies — all
+  // decided by the `launcherContent` query. This used to be ~100 lines of derivation right
+  // here: which nodes, what each heading says, whether "All items" is a claim the drive
+  // cannot support. See bl/launcher.js.
+  const content = modal ? state.modalContent : state.content;
+  const { groups, mode, view } = content;
   const flat = groups.flatMap((g) => g.items);
   const idx = flat.length ? Math.min(state.wb.launch.index, flat.length - 1) : 0;
 
   const onInput = (e) => {
     const v = e.target.value;
-    wb.setLaunchQuery(v);
+    ui.engine.dispatch(new SetLaunchQueryAction(v));
     if (v.startsWith('!')) return; // command mode: no query dispatch
     const { text, filters } = parseTagQuery(v);
     if (filters.length) runFilter(ui, filters, text); // drive-wide tag/property query
@@ -75,20 +78,15 @@ export default function launcher(state, ui, opts = {}) {
   // move re-renders the list under the pointer, and a row replaced between mousedown and
   // mouseup never receives its click. A pointer user acts through the row's own menu,
   // which selects explicitly before it opens.
-  const hoverAt = (at) => wb.setLaunchIndex(at);
-  const selectAt = (at) => { wb.setLaunchIndex(at); syncSelection(ui, flat[at]); };
-  const move = (delta) => {
-    wb.moveLaunch(delta, flat.length);
-    syncSelection(ui, flat[wb.state.launch.index]);
-  };
-  // How the results are drawn right now. The view gets a say in what an arrow key
-  // means — one row down is one tile down in a grid, not one tile across — but the
-  // index, the selection and the wrapping stay here, so up and down mean the same
-  // thing whichever view is showing.
-  //
-  // The search transformer may have suggested one. Only for an actual search: on the
-  // home list there is no sentence to have read.
-  const view = activeView(ui.platform, flat, mode === 'search' ? state.se.resolved?.view : null);
+  const hoverAt = (at) => ui.engine.dispatch(new SetLaunchIndexAction(at));
+  // Moving the highlight and selecting what it lands on are one action, not two. The index
+  // wraps, so only the store can say where a move ends up — and reading that back out here
+  // would read it before the dispatch had applied. See MoveLaunchAction.
+  const selectAt = (at) => ui.engine.dispatch(new SelectLaunchAction(at, flat[at]?.node));
+  const move = (delta) => ui.engine.dispatch(new MoveLaunchAction(delta, flat.map((i) => i.node)));
+  // The view gets a say in what an arrow key means — one row down is one tile down in a
+  // grid, not one tile across — but the index, the selection and the wrapping stay here, so
+  // up and down mean the same thing whichever view is showing.
   const onKey = (e) => {
     // `textual`: there is text in the box, so left/right are the caret's and no view
     // may claim them. Fixing a typo must not move the highlight.
@@ -98,7 +96,7 @@ export default function launcher(state, ui, opts = {}) {
     if (claimed !== null) { e.preventDefault(); move(claimed); }
     else if (e.key === 'ArrowDown') { e.preventDefault(); move(1); }
     else if (e.key === 'ArrowUp') { e.preventDefault(); move(-1); }
-    else if (e.key === 'Enter') { e.preventDefault(); flat[idx]?.run(); }
+    else if (e.key === 'Enter') { e.preventDefault(); activate(ui, flat[idx]); }
     else if (e.key === 'Escape' && q) { e.preventDefault(); clearSearch(ui); }
     // The row under the highlight is the subject of the row menu, so the key that opens
     // one on every other list opens this one too — without making the user leave the
@@ -123,23 +121,23 @@ export default function launcher(state, ui, opts = {}) {
       // `false`, not `'false'`: this is set as a property, and the string is truthy —
       // so the search box had spellcheck ON, red-underlining every filename typed into it.
       input({ className: 'launch-input', value: q, autofocus: true, spellcheck: false,
-        placeholder: promptFor(ui, { compact: state.vp?.mode === 'phone', modal }) })
+        placeholder: promptFor(state.caps, { compact: state.vp?.mode === 'phone', modal }) })
         .on({ input: onInput, keydown: onKey }),
       q ? button({ className: 'launch-clear', title: 'Clear' }, icon('close', { size: 14 }))
         .on({ click: () => clearSearch(ui) }) : null,
       // Only where the browser can transcribe WITHOUT sending audio anywhere. A remote's
       // own mic needs no button from us — it dictates into this field once it is focused,
       // which is what `search.voice` is really for.
-      ui.platform.voice?.canListen()
+      state.voice?.canListen
         ? button({
           className: `launch-mic ${state.voice?.listening ? 'on' : ''}`,
           title: state.voice?.listening ? 'Stop listening' : 'Search by voice',
           'aria-pressed': state.voice?.listening ? 'true' : 'false',
-        }, icon('mic', { size: 15 })).on({ click: () => ui.exec('search.voice') })
+        }, icon('mic', { size: 15 })).on({ click: () => ui.engine.dispatch(new ExecCommandAction('search.voice')) })
         : null,
       // Which way to look at the drive. Not in the modal search, where the answer is
       // always "the one thing I am about to press Enter on".
-      modal ? null : viewSwitcher(ui.platform, view),
+      modal ? null : viewSwitcher(state.views, view, ui),
     ),
     showResolved ? resolvedBar(resolved) : null,
     // The results belong to the active view — see ui/components/views. The launcher says
@@ -147,7 +145,7 @@ export default function launcher(state, ui, opts = {}) {
     // split is why a gallery is a contribution rather than another branch in here.
     div({ className: 'launch-body' },
       renderView(view, { groups, index: idx, handlers: { hover: hoverAt, select: selectAt }, state, ui }),
-      searchHelp(state, ui, mode),
+      searchHelp(content.help, ui),
     ),
   );
   return modal ? inner : div({ className: 'editor' }, inner);
@@ -169,10 +167,6 @@ function resolvedBar(r) {
 // The NODE goes along with the id. A search result or a recent can be from a collection
 // that isn't loaded — or a page that isn't — so an id alone is something the explorer
 // cannot resolve, and the commands that act on "the selection" then do nothing at all.
-function syncSelection(ui, item) {
-  const node = item?.node;
-  ui.app.explorer.select(node?.id ? [node.id] : [], { nodes: node ? [node] : null });
-}
 
 /**
  * How this search box works — shown when, and only when, a search came back empty.
@@ -185,208 +179,28 @@ function syncSelection(ui, item) {
  * The text comes from the server's transformer, so it describes the grammar this
  * deployment actually runs rather than the one this file was written against.
  */
-function searchHelp(state, ui, mode) {
-  if (mode === 'command') return null;
-  const se = state.se;
-  if (!se.ran || se.loading || se.error || (se.results || []).length) return null;
-  const p = ui.platform.capabilities?.searchPrompt;
-  if (!p?.hint && !p?.examples?.length) return null;
-  const wb = ui.platform.workbench;
-  const tryIt = (query) => () => {
-    wb.setLaunchQuery(query);
-    const { text, filters } = parseTagQuery(query);
-    if (filters.length) ui.go(new FilterAction(filters, text));
-    else ui.go(new SearchAction(text));
-  };
+// Decided by the `launcherContent` query — whether an offer applies, and what the server
+// suggests. This only draws it.
+function searchHelp(help, ui) {
+  if (!help) return null;
   return div({ className: 'launch-help' },
-    p.hint ? div({ className: 'lh-hint' }, icon('info', { size: 13 }), span(p.hint)) : null,
-    p.examples?.length
-      ? div({ className: 'lh-examples' }, ...p.examples.map((ex) =>
+    help.hint ? div({ className: 'lh-hint' }, icon('info', { size: 13 }), span(help.hint)) : null,
+    help.examples.length
+      ? div({ className: 'lh-examples' }, ...help.examples.map((ex) =>
         button({ className: 'lh-example', title: ex.label || 'Try this search' },
           span({ className: 'lh-q' }, ex.query),
           ex.label ? span({ className: 'lh-label' }, ex.label) : null,
-        ).on({ click: tryIt(ex.query) })))
+        ).on({ click: () => activate(ui, ex) })))
       : null,
   );
 }
 
-function buildContent(state, ui, q, mode, modal) {
-  const done = () => { if (modal) ui.platform.workbench.closeSearchModal(); };
-  if (mode === 'command') {
-    const term = q.slice(1).trim().toLowerCase();
-    const items = ui.platform.commands.paletteCommands()
-      .map((c) => ({ hay: `${c.category || ''} ${c.title}`.toLowerCase(), c }))
-      .map(({ hay, c }) => ({ s: score(hay, term), c }))
-      .filter((x) => term === '' || x.s > 0)
-      .sort((a, b) => b.s - a.s)
-      .slice(0, 40)
-      .map(({ c }) => ({ icon: 'command', title: c.title, detail: c.category, badge: 'command', run: () => { ui.exec(c.id); done(); } }));
-    return [{ title: 'Commands', items, empty: 'No matching commands.' }];
-  }
 
-  const { text, filters } = parseTagQuery(q);
-  const nodes = (state.se.results || []).map((r) => r.node);
-  const err = state.se.error;
 
-  // A one-click retry so a transient search/filter failure isn't a dead end.
-  const retryBtn = (action) => button({ className: 'launch-up', title: 'Retry' }, icon('refresh', { size: 13 }), 'Retry').on({ click: () => ui.go(action) });
-
-  // Drive-wide tag/property filter (server-side), optionally narrowed by free text.
-  if (filters.length) {
-    const label = filters.map(filterLabel).join(' ') + (text.trim() ? ` · "${text.trim()}"` : '');
-    return [{
-      title: state.se.loading ? 'Filtering…' : err ? 'Filter failed' : 'Filtered',
-      // Shown as typed: a tag is a value, not a heading.
-      verbatim: state.se.loading || err ? null : label,
-      action: err ? retryBtn(new FilterAction(filters, text)) : null,
-      items: nodes.map((n) => fileItem(n, ui, modal)),
-      empty: state.se.loading ? 'Filtering…' : err ? `Couldn’t filter: ${err}` : 'No files match those filters.',
-    }];
-  }
-
-  // Free-text search.
-  if (text.trim()) {
-    return [{
-      title: state.se.loading ? 'Searching…' : err ? 'Search failed' : 'Results',
-      action: err ? retryBtn(new SearchAction(q)) : null,
-      items: nodes.map((n) => fileItem(n, ui, modal)),
-      empty: state.se.loading ? 'Searching…' : err ? `Couldn’t search: ${err}` : 'No files match.',
-    }];
-  }
-
-  // Home: recents, then everything in the collection. There is nothing to descend
-  // into — this is the "show me everything" fallback for when search isn't the answer.
-  const groups = [];
-  const recents = (state.nav.recents || []).map((r) => fileItem(r, ui, modal));
-  if (recents.length) groups.push({ title: 'Recent', items: recents });
-
-  const ex = state.ex;
-  const shown = (ex.items || []).length;
-  // `stats` is the collection; `items` is the page. When the server didn't report stats
-  // we only know the page — and saying "500" while a next page exists is a claim about
-  // the drive that is false, so say "500+" instead.
-  const knownTotal = ex.stats?.items ?? null;
-  const total = knownTotal ?? shown;
-  const totalLabel = knownTotal != null ? knownTotal.toLocaleString() : `${shown.toLocaleString()}+`;
-  const items = (ex.items || []).map((n) => fileItem(n, ui, modal));
-  // A partial list must not be titled "All items" — that is a claim about the drive,
-  // and on a collection bigger than one page it is false. Say what is on screen, and
-  // offer the rest rather than leaving it unreachable.
-  if (ex.nextCursor) {
-    items.push({
-      icon: 'refresh',
-      title: ex.loadingMore ? 'Loading…'
-        : knownTotal != null ? `Show more (${(knownTotal - shown).toLocaleString()} more)` : 'Show more',
-      detail: 'or search to jump straight to something',
-      run: () => ui.exec('explorer.loadMore'),
-    });
-  }
-  // The trash, when it has been opened. Not shown by default: it is a place you go to
-  // recover a mistake, not part of browsing the drive.
-  if (ex.trash) {
-    groups.push({
-      // One line, not two: a header reading "0 items" above a body reading "the trash is
-      // empty" is the same sentence twice, permanently parked above the drive.
-      title: ex.trash.length
-        ? `Trash · ${ex.trash.length} item${ex.trash.length === 1 ? '' : 's'}`
-        : 'Trash',
-      action: div({ className: 'lh-actions' },
-        ex.trash.length
-          ? button({ className: 'launch-up', title: 'Destroy everything in the trash' },
-            icon('trash', { size: 13 }), 'Empty trash').on({ click: () => ui.exec('explorer.emptyTrash') })
-          : null,
-        // The way back out. Opening the trash used to be one-way until a page reload.
-        button({ className: 'launch-up', title: 'Hide the trash' },
-          icon('close', { size: 13 }), 'Close').on({ click: () => ui.exec('explorer.hideTrash') }),
-      ),
-      items: ex.trash.length
-        ? ex.trash.map((n) => ({
-          icon: 'trash',
-          title: n.name,
-          detail: `deleted ${new Date(n.deletedAt).toLocaleString()} — restore`,
-          run: () => ui.exec('explorer.restore', n.id),
-          menu: () => trashMenu(n, ui),
-        }))
-        : [],
-      empty: 'The trash is empty.',
-    });
-  }
-
-  groups.push({
-    title: ex.nextCursor ? `All items · showing ${shown.toLocaleString()} of ${totalLabel}` : 'All items',
-    // The empty state told people to upload a file, and on desktop and TV there was
-    // nothing anywhere that would let them. (Phone has the + in its bottom bar.)
-    action: modal ? null : button({ className: 'launch-up', title: 'Upload files to this collection' },
-      icon('upload', { size: 13 }), 'Upload').on({ click: () => ui.exec('explorer.upload') }),
-    items,
-    // Don't show a false "empty" when the load actually FAILED (e.g. server
-    // unreachable) — say so, so the user knows to retry rather than believing the
-    // collection is empty. (A toast also fires, but the persistent state must be honest.)
-    empty: ex.loading ? 'Loading…' : ex.error ? `Couldn’t load this collection: ${ex.error}` : 'Nothing here yet — upload a file to get started.',
-  });
-  return groups;
-}
-
-function fileItem(node, ui, modal) {
-  return {
-    icon: fileIcon(node),
-    title: node.name,
-    detail: node.contentType || '',
-    node,
-    // From the modal search, `reset` starts a fresh viewer stack; then close it.
-    run: () => {
-      ui.go(new OpenFileAction(node, { reset: !!modal }));
-      if (modal) ui.platform.workbench.closeSearchModal();
-    },
-    menu: () => fileMenu(node, ui),
-  };
-}
-
-function fileMenu(node, ui) {
-  const pinned = (ui.app.offline?.state?.pins || []).some((p) => p.id === node.id);
-  // Ask what the shortcut actually IS. Hardcoding "⌘⇧L" told a Windows or Linux user
-  // about a key their machine does not have, and told everyone the default even after
-  // they had rebound it.
-  const kbd = (id) => ui.platform.keybindings.labelFor(id) || undefined;
-  return [
-    { label: 'Open', icon: 'file-text', run: () => ui.exec('explorer.open', node) },
-    { label: 'Download', icon: 'download', run: () => ui.exec('explorer.download', node) },
-    { label: 'Copy link', icon: 'link', kbd: kbd('explorer.copyLink'), run: () => ui.exec('explorer.copyLink') },
-    { sep: true },
-    { label: 'Rename…', run: () => ui.exec('explorer.rename') },
-    pinned
-      ? { label: 'Remove from offline', icon: 'close', run: () => ui.exec('offline.unpin', node) }
-      : { label: 'Make available offline', icon: 'download', run: () => ui.exec('offline.pin', node) },
-    { sep: true },
-    { label: 'Move to trash', icon: 'trash', danger: true, kbd: kbd('explorer.delete'), run: () => ui.exec('explorer.delete') },
-  ];
-}
 
 // The trash is the one place "delete" means destroy, so its two verbs live together:
 // put it back, or finish the job on this one item. Emptying the whole trash was
 // previously the only way to purge anything.
-function trashMenu(node, ui) {
-  return [
-    { label: 'Restore', icon: 'refresh', run: () => ui.exec('explorer.restore', node.id) },
-    { sep: true },
-    { label: 'Delete forever', icon: 'trash', danger: true, run: () => ui.exec('explorer.purgeOne', node.id) },
-  ];
-}
 
-function fileIcon(node) {
-  const t = node.contentType || '';
-  if (t.startsWith('image/')) return 'file-image';
-  if (t.startsWith('audio/')) return 'file-audio';
-  if (t.startsWith('video/')) return 'file-video';
-  return 'file-text';
-}
 
 // Substring-first, then subsequence fuzzy score (0 = no match).
-function score(hay, term) {
-  if (!term) return 1;
-  const i = hay.indexOf(term);
-  if (i >= 0) return 1000 - i;
-  let ti = 0;
-  for (let hi = 0; hi < hay.length && ti < term.length; hi++) if (hay[hi] === term[ti]) ti++;
-  return ti === term.length ? 1 : 0;
-}

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

@@ -2,11 +2,14 @@
 // Each declares a selector (extensions / mime) and a component(node, ui) → vnode.
 // The editor area picks the highest-priority opener whose selector matches.
 
-import { dd, cell, fromAsync, watch } from '../../../runtime.js';
+import { cell, dd, watch } from '../../../runtime.js';
 import { icon } from '../../icon.js';
 import { bytes } from '../../format.js';
 import { markdownOpener } from './markdown.js';
 import { attachMedia } from '../../media.js';
+import { FileText } from '../../../bl/queries.js';
+import { watchQuery } from '../../../bl/watchQuery.js';
+import { ExecCommandAction } from '../../../bl/actions.js';
 
 const { div, pre, img, span, button, video, audio } = dd;
 
@@ -77,9 +80,9 @@ export function renderOpener(node, openerId, ui) {
 const TEXT_VIEW_BYTES = 512 * 1024;
 
 function textOpener(node, ui) {
-  const src = fromAsync(() => ui.platform.api.readTextCapped(node.id, { maxBytes: TEXT_VIEW_BYTES, size: node.size }));
+  const src = watchQuery(ui.engine, FileText.of(node.id, TEXT_VIEW_BYTES, node.size));
   return dd.alias(() =>
-    ui.platform.reactive.watch(
+    ui.watch(
       src,
       ({ text, truncated, total }) => div({ className: 'viewer text' },
         pre(text),
@@ -162,7 +165,7 @@ function fallbackOpener(node, ui, reason) {
       span({ $styling: { color: 'var(--text-faint)', 'max-width': '340px' } },
         reason || 'No preview available for this file type. Install a plugin that handles it, or download the file.'),
       button({ className: 'btn primary' }, icon('download', { size: 15 }), 'Download')
-        .on({ click: () => ui.exec('explorer.download', node) }),
+        .on({ click: () => ui.engine.dispatch(new ExecCommandAction('explorer.download', node)) }),
     ),
   );
 }

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

@@ -18,19 +18,21 @@
 // document length and the node count are capped — a truncated document with a visible
 // notice beats a hung one.
 
-import { dd, fromAsync } from '../../../runtime.js';
+import { dd, mapCell } from '../../../runtime.js';
 import { icon } from '../../icon.js';
 import { parseTroveUri } from '@3sln/trove/core/links.js';
 import { openTroveLink } from '../../../bl/links.js';
+import { FileText } from '../../../bl/queries.js';
+import { watchQuery } from '../../../bl/watchQuery.js';
 
 const { div, span, h1, h2, h3, p, ul, ol, li, pre, code, a, em, strong, blockquote, hr, br } = dd;
 
 export function markdownOpener(node, ui) {
   // Bounded at the TRANSFER, not just the render: MAX_CHARS below stops us laying out a
   // huge document, but without this the whole file is still pulled into the tab first.
-  const src = fromAsync(() => ui.platform.api.readTextCapped(node.id, { maxBytes: MAX_CHARS, size: node.size }).then((r) => r.text));
+  const src = mapCell(watchQuery(ui.engine, FileText.of(node.id, MAX_CHARS, node.size)), (r) => r.text);
   return dd.alias(() =>
-    ui.platform.reactive.watch(
+    ui.watch(
       src,
       // A throw in here is NOT covered by the `error:` handler below — that one is for
       // the observable failing, not for the mapper. Rendering untrusted content is