@3sln/trove 0.0.4 → 0.0.7

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

@@ -0,0 +1,81 @@
+// The only thing on screen until a collection is chosen.
+//
+// Every collection-scoped request names its collection in the path, so before one is
+// known there is no file list to draw, nothing to search, and nowhere to upload to. The
+// old behaviour was to pick something — the remembered one, else `default`, else the
+// first in the list — and that is exactly the guess this replaces: on a shared drive it
+// opened a collection plenty of people could not read, and presented the permission error
+// as their drive.
+//
+// So there are two questions and no guesses. A drive with nothing in it asks for a
+// collection to be made; a drive with several asks which one. Once answered, the choice is
+// remembered in localStorage and this never appears again.
+
+import { dd } from '../../runtime.js';
+import { icon } from '../icon.js';
+
+const { div, h2, p, button, span } = dd;
+
+export default function collectionGate(state, ui) {
+  const ex = state.ex || {};
+  return div({ className: 'editor' },
+    div({ className: 'stage' },
+      div({ className: 'gate' },
+        ex.gate === 'create' ? createPrompt(ui) : choosePrompt(ex, ui),
+      ),
+    ),
+  );
+}
+
+/**
+ * A drive with no collections at all.
+ *
+ * Only shown to someone who may actually create one — `OpenInitialCollectionAction`
+ * sends everyone else to the "ask an administrator" message instead, because inviting
+ * someone to do a thing they are not allowed to do is worse than saying nothing.
+ */
+function createPrompt(ui) {
+  return div({ className: 'gate-card' },
+    div({ className: 'gate-icon' }, icon('files', { size: 26 })),
+    h2('Make your first collection'),
+    p({ className: 'gate-sub' },
+      'A collection is a backing store you own — a bucket, a directory, a mount. Files '
+      + 'live in one, and permissions are granted on one. Nothing can be uploaded until '
+      + 'there is somewhere to put it.'),
+    div({ className: 'gate-actions' },
+      button({ className: 'btn primary' }, icon('plus', { size: 14 }), 'New collection')
+        .on({ click: () => ui.exec('collections.create') }),
+    ),
+  );
+}
+
+/** Collections exist, but the user has not said which one they want. */
+function choosePrompt(ex, ui) {
+  const collections = ex.collections || [];
+  return div({ className: 'gate-card' },
+    div({ className: 'gate-icon' }, icon('grid', { size: 26 })),
+    h2(collections.length === 1 ? 'Open your collection' : 'Choose a collection'),
+    p({ className: 'gate-sub' },
+      collections.length === 1
+        ? 'This is the one you have access to. Opening it will be remembered for next time.'
+        : 'Files, search and uploads all belong to one collection. Your choice is remembered '
+          + 'for next time, and you can switch from the status bar whenever you like.'),
+    div({ className: 'gate-list' },
+      ...collections.map((c) => button({ className: 'gate-choice' },
+        div({ className: 'gate-choice-main' },
+          span({ className: 'n' }, c.name || c.id),
+          span({ className: 'd' }, c.driver ? `${c.driver}${c.description ? ` · ${c.description}` : ''}` : (c.description || '')),
+        ),
+        // What they may do, from the server's own answer — so a read-only collection says
+        // so before they open it and find the Upload button missing.
+        span({ className: 'gate-caps' }, (c.capabilities || []).join(' · ')),
+      ).on({ click: () => ui.exec('collections.switch', c.id) })),
+    ),
+    ex.canCreateCollection
+      ? div({ className: 'gate-actions' },
+        button({ className: 'btn' }, icon('plus', { size: 14 }), 'New collection')
+          .on({ click: () => ui.exec('collections.create') }),
+      )
+      : null,
+  );
+}

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

@@ -86,66 +86,96 @@ function openerChooserDialog(d, ui) {
   );
 }
 
-// A collection is a backing-store config. This form collects the driver + its
-// fields (filesystem path, or S3 bucket/prefix/keys) so a user with the create
-// capability can provision a new collection dynamically. The form persists
-// across re-renders (keyed to the dialog instance) so switching driver keeps it.
+// A collection is a backing-store config, and which stores exist is the SERVER's answer.
+//
+// This form used to hardcode its own list — Filesystem / NAS, S3, Memory — and the fields
+// for each. On Cloudflare Workers that offered a filesystem the runtime cannot provide, so
+// the form could produce a collection the server would refuse to build. Now the drivers and
+// their fields come from /api/capabilities, which reports what was actually registered.
+//
+// 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 || [];
+
   if (colState.ref !== d) {
-    colState = { ref: d, form: { name: '', description: '', driver: 'filesystem', root: '', bucket: '', prefix: '', region: 'auto', endpoint: '', accessKeyId: '', secretAccessKey: '' } };
+    colState = { ref: d, form: { name: '', description: '', driver: drivers[0]?.key || '' } };
   }
   const form = colState.form;
-  const set = (k) => (e) => { form[k] = e.target.value; if (k === 'driver') ui.rerender?.(); };
+  const driver = drivers.find((x) => x.key === form.driver) || drivers[0];
+  const set = (k) => (e) => {
+    form[k] = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
+    if (k === 'driver') ui.rerender?.();
+  };
+
   const submit = () => {
+    // Only the fields this driver declared, so a leftover value from a driver the user
+    // switched away from is not smuggled into the store config.
     const store = { driver: form.driver };
-    if (form.driver === 'filesystem') store.root = form.root;
-    if (form.driver === 's3') {
-      store.s3 = { bucket: form.bucket, region: form.region, endpoint: form.endpoint || undefined, accessKeyId: form.accessKeyId, secretAccessKey: form.secretAccessKey, forcePathStyle: !!form.endpoint };
-      if (form.prefix) store.prefix = form.prefix;
+    for (const f of driver?.fields || []) {
+      const v = form[f.name];
+      if (v !== undefined && v !== '') store[f.name] = f.type === 'number' ? Number(v) : v;
     }
-    if (form.driver === 'filesystem' && form.prefix) store.prefix = form.prefix;
     d.onSubmit?.({ name: form.name, description: form.description, store });
   };
+
   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
+    && (driver?.fields || []).every((f) => !f.required || String(form[f.name] ?? '').trim());
+
   return div({},
     div({ className: 'scrim' }).on({ click: () => wb.closeDialog() }),
     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.'),
       field('Name', 'name', 'Team Vault'),
-      div({ className: 'field', $styling: { 'margin-bottom': '10px' } },
-        label('Backing store'),
-        select({ className: 'input' },
-          option({ value: 'filesystem', selected: form.driver === 'filesystem' }, 'Filesystem / NAS'),
-          option({ value: 's3', selected: form.driver === 's3' }, 'S3-compatible (S3 · R2 · MinIO)'),
-          option({ value: 'memory', selected: form.driver === 'memory' }, 'Memory (ephemeral)'),
-        ).on({ change: set('driver') })),
-      storeFields(form, set),
+      drivers.length
+        ? div({ className: 'field', $styling: { 'margin-bottom': '10px' } },
+          label('Backing store'),
+          select({ className: 'input' },
+            ...drivers.map((x) => option({ value: x.key, selected: form.driver === x.key }, x.label)),
+          ).on({ change: set('driver') }))
+        // No drivers at all means the deployment registered none, which is a server
+        // 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,
       div({ className: 'row-actions' },
         button({ className: 'btn' }, 'Cancel').on({ click: () => wb.closeDialog() }),
-        button({ className: 'btn primary' }, 'Create collection').on({ click: submit }),
+        button({ className: 'btn primary', $attrs: ready ? {} : { disabled: 'true' } }, 'Create collection')
+          .on({ click: () => ready && submit() }),
       ),
     ),
   );
 }
-function storeFields(form, set) {
-  const f = (lbl, k, ph = '', type = 'text') => div({ className: 'field', $styling: { 'margin-bottom': '10px' } },
-    label(lbl), input({ className: 'input', placeholder: ph, type, autocomplete: 'off' }).on({ input: set(k) }));
-  if (form.driver === 'filesystem') return div({}, f('Root directory', 'root', './data/team'), f('Prefix (optional)', 'prefix'));
-  if (form.driver === 's3') {
-    return div({},
-      f('Bucket', 'bucket', 'my-bucket'),
-      f('Prefix (optional)', 'prefix', 'team-a/'),
-      f('Region', 'region', 'auto'),
-      f('Endpoint (R2/MinIO; blank for AWS)', 'endpoint', 'https://<acct>.r2.cloudflarestorage.com'),
-      f('Access key id', 'accessKeyId'),
-      f('Secret access key', 'secretAccessKey', '', 'password'),
-    );
+
+/** The chosen driver's declared fields, rendered from its descriptor. */
+function storeFields(driver, form, set) {
+  if (!driver.fields.length) {
+    return div({ className: 'body', $styling: { 'font-size': '12px' } },
+      driver.description || 'This store needs no configuration.');
   }
-  return div({ className: 'body', $styling: { 'font-size': '12px' } }, 'Ephemeral — data is lost on restart. Good for testing.');
+  return div({},
+    driver.description
+      ? div({ className: 'body', $styling: { 'font-size': '12px', 'margin-bottom': '10px' } }, driver.description)
+      : null,
+    ...driver.fields.map((f) => (f.type === 'boolean'
+      ? div({ className: 'field', $styling: { 'margin-bottom': '10px' } },
+        label({}, input({ type: 'checkbox' }).on({ change: set(f.name) }), ` ${f.label}`),
+        f.help ? div({ className: 'body', $styling: { 'font-size': '11.5px' } }, f.help) : null)
+      : div({ className: 'field', $styling: { 'margin-bottom': '10px' } },
+        label(f.label + (f.required ? '' : ' (optional)')),
+        input({
+          className: 'input', placeholder: f.placeholder, autocomplete: 'off',
+          // A field the driver marked secret is a password field, so a shoulder or a
+          // screen share does not read an access key out of the form.
+          type: f.type === 'password' || f.secret ? 'password' : (f.type === 'number' ? 'number' : 'text'),
+        }).on({ input: set(f.name) }),
+        f.help ? div({ className: 'body', $styling: { 'font-size': '11.5px' } }, f.help) : null))),
+  );
 }
 
 // ---- Context menu ----------------------------------------------------------

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

@@ -43,7 +43,7 @@ export function phoneTopBar(state, ui) {
   // rows of chrome repeating "notes.txt" costs a fifth of the screen to say it twice.
   const title = state.wb.activity === 'settings' ? 'Settings'
     : state.wb.activity === 'plugins' ? 'Plugins'
-      : f.collectionId;
+      : 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') }),
@@ -112,7 +112,7 @@ function statusSheet(state, ui) {
   const wb = ui.platform.workbench;
   const go = (cmd) => () => { wb.closeSheet(); ui.exec(cmd); };
   return div({ className: 'sheet-body' },
-    div({ className: 'sheet-title' }, f.collectionId),
+    div({ className: 'sheet-title' }, f.collectionLabel),
 
     // Problems and running work first: they are the reason someone opened this.
     f.issues.length

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

@@ -3,7 +3,7 @@ import { prettyKey, eventToKey } from '../../platform/keybindings.js';
 import { icon } from '../icon.js';
 import { listAssociations, rememberOpener } from '../../bl/openers.js';
 
-const { div, h2, h3, p, span, select, option, input, label, button } = dd;
+const { div, h2, h3, p, span, select, option, input, label, button, ul, li, code } = dd;
 
 export default function settingsView(state, ui) {
   const groups = ui.platform.settings.grouped();
@@ -14,6 +14,7 @@ export default function settingsView(state, ui) {
         p({ className: 'sub' }, 'Preferences are stored in this browser. Plugins contribute their own settings here too.'),
         ...groups.map((g) => group(g, ui)),
         mcpSection(ui),
+        apiKeysSection(state, ui),
         openersSection(ui),
         keybindingsSection(ui),
       ),
@@ -170,6 +171,201 @@ function mcpSection(ui) {
 // Default openers per file type — the "always use this" choices from the opener
 // chooser. Each row shows the type → viewer; the × forgets it (so the next open of
 // that type asks again). Empty when the user hasn't set any defaults.
+// --- API keys -------------------------------------------------------------------
+
+const CAPS = [
+  { id: 'read', label: 'Read', hint: 'list and download' },
+  { id: 'write', label: 'Write', hint: 'upload and rename' },
+  { id: 'delete', label: 'Delete', hint: 'trash and purge' },
+  { id: 'admin', label: 'Admin', hint: 'includes all of the above' },
+];
+
+const ANY = '*';
+
+/** One-shot guard so a render does not queue a second load while the first is in flight. */
+let keysRequested = false;
+
+function apiKeysSection(state, ui) {
+  const keys = state.keys || {};
+
+  // Loaded lazily, when Settings is first opened — the list is admin-only and most
+  // sessions never need it, so it is not worth a request at boot.
+  if (!keysRequested && !keys.loaded && !keys.loading) {
+    keysRequested = true;
+    ui.exec('keys.load');
+  }
+
+  // A non-admin gets a 403 here, which is the correct answer rather than an error worth
+  // showing. The section simply is not part of their settings screen.
+  if (keys.error && !keys.keys?.length) return null;
+  if (!keys.loaded) return null;
+
+  const collections = state.ex?.collections || [];
+
+  return div({ className: 'group' },
+    h3('API keys'),
+    p({ className: 'sub' },
+      'Give a script or a service access without giving it an account. A key carries '
+      + 'capabilities and no identity, so anything it does is attributed to the key rather '
+      + 'than to a person \u2014 and it can only reach the collections you scope it to.'),
+
+    keys.minted ? mintedBanner(keys.minted, ui) : null,
+    keys.draft ? draftForm(keys, collections, ui) : null,
+
+    !keys.draft && !keys.minted
+      ? div({ className: 'keys-actions' },
+        button({ className: 'btn' }, icon('plus', { size: 14 }), 'New key')
+          .on({ click: () => ui.exec('keys.new') }))
+      : null,
+
+    keys.keys?.length
+      ? div({ className: 'keys-list' }, ...keys.keys.map((k) => keyRow(k, keys, collections, ui)))
+      : div({ className: 'keys-empty' }, 'No keys yet.'),
+  );
+}
+
+/**
+ * The secret, shown once.
+ *
+ * Deliberately loud and deliberately blocking the rest of the section: the server stored
+ * only a hash, so this is the only moment the value exists anywhere. A quiet row in a
+ * table would be dismissed without being copied.
+ */
+function mintedBanner(minted, ui) {
+  const copy = () => {
+    navigator.clipboard?.writeText(minted.secret)
+      .then(() => ui.platform.notifications.success('Key copied'))
+      .catch(() => ui.platform.notifications.info(minted.secret, { sticky: true }));
+  };
+  return div({ className: 'key-minted' },
+    div({ className: 'key-minted-head' },
+      icon('warn', { size: 15 }),
+      span(`\u201c${minted.key.name}\u201d is ready \u2014 copy it now.`),
+    ),
+    p({ className: 'key-minted-note' },
+      'This is the only time it can be shown. It is stored as a hash, so it cannot be '
+      + 'recovered \u2014 if it is lost, revoke the key and make another.'),
+    div({ className: 'key-secret' },
+      code({ className: 'mono' }, minted.secret),
+      button({ className: 'btn small', title: 'Copy' }, icon('link', { size: 13 })).on({ click: copy }),
+    ),
+    div({ className: 'keys-actions' },
+      button({ className: 'btn' }, 'Done').on({ click: () => ui.exec('keys.dismissMinted') }),
+    ),
+  );
+}
+
+function draftForm(keys, collections, ui) {
+  const draft = keys.draft;
+  const scopes = ui.app.apiKeys.draftScopes();
+  const ready = !!draft.name.trim() && !!scopes;
+
+  return div({ className: 'key-form' },
+    div({ className: 'setting' },
+      div({ className: 'info' },
+        div({ className: 't' }, 'Name'),
+        div({ className: 'd' }, 'What it is for. This is what the list shows, so make it recognisable.'),
+      ),
+      div({ className: 'control' },
+        input({ className: 'input', value: draft.name, $attrs: { placeholder: 'CI uploader' } })
+          .on({ input: (e) => ui.app.apiKeys.patchDraft({ name: e.target.value }) }),
+      ),
+    ),
+
+    div({ className: 'setting' },
+      div({ className: 'info' },
+        div({ className: 't' }, 'Expires after'),
+        div({ className: 'd' }, 'Days from now. Leave blank and it never expires.'),
+      ),
+      div({ className: 'control' },
+        input({
+          className: 'input', type: 'number', value: draft.expiresInDays,
+          $attrs: { min: '1', max: '3650', placeholder: 'never' },
+        }).on({ input: (e) => ui.app.apiKeys.patchDraft({ expiresInDays: e.target.value }) }),
+      ),
+    ),
+
+    div({ className: 'key-scopes' },
+      div({ className: 'key-scopes-head' },
+        div({ className: 't' }, 'What it may do'),
+        div({ className: 'd' },
+          'Per collection. A key with nothing ticked grants nothing and cannot be created.'),
+      ),
+      scopeRow({ id: ANY, name: 'All collections', wildcard: true }, draft, ui),
+      ...collections.map((c) => scopeRow(c, draft, ui)),
+    ),
+
+    div({ className: 'keys-actions' },
+      button({ className: 'btn primary', $attrs: ready ? {} : { disabled: 'true' } },
+        keys.busy === 'mint' ? 'Creating\u2026' : 'Create key')
+        .on({ click: () => ready && ui.exec('keys.mint') }),
+      button({ className: 'btn' }, 'Cancel').on({ click: () => ui.exec('keys.cancel') }),
+    ),
+  );
+}
+
+function scopeRow(collection, draft, ui) {
+  const held = new Set(draft.caps[collection.id] || []);
+  return div({ className: `key-scope ${collection.wildcard ? 'wildcard' : ''}` },
+    div({ className: 'key-scope-name' },
+      icon(collection.wildcard ? 'grid' : 'files', { size: 14 }),
+      span(collection.name || collection.id),
+    ),
+    div({ className: 'key-scope-caps' },
+      ...CAPS.map((c) => label({ className: `cap ${held.has(c.id) ? 'on' : ''}`, title: c.hint },
+        input({ type: 'checkbox', checked: held.has(c.id) })
+          .on({ change: () => ui.app.apiKeys.toggleCap(collection.id, c.id) }),
+        span(c.label),
+      )),
+    ),
+  );
+}
+
+function keyRow(k, keys, collections, ui) {
+  const revoked = !!k.revokedAt;
+  const expired = k.expiresAt != null && k.expiresAt <= Date.now();
+  const dead = revoked || expired;
+  return div({ className: `key-row ${dead ? 'dead' : ''}` },
+    div({ className: 'key-row-main' },
+      div({ className: 'key-row-name' },
+        span({ className: 't' }, k.name),
+        revoked ? span({ className: 'key-tag' }, 'revoked')
+          : expired ? span({ className: 'key-tag' }, 'expired') : null,
+      ),
+      div({ className: 'key-row-scopes' }, ...scopeSummary(k, collections)),
+      div({ className: 'key-row-meta' }, metaLine(k)),
+    ),
+    !dead
+      ? button({
+        className: 'btn small danger',
+        $attrs: keys.busy === k.id ? { disabled: 'true' } : {},
+      }, keys.busy === k.id ? '\u2026' : 'Revoke').on({ click: () => ui.exec('keys.revoke', k.id) })
+      : null,
+  );
+}
+
+function scopeSummary(k, collections) {
+  // The name if we know it, the id if we do not. A key can outlive the collection it was
+  // scoped to, and showing a bare id then is more honest than showing nothing — it is
+  // also the thing you would search for to find out what happened to it.
+  const nameOf = (id) => collections.find((c) => c.id === id)?.name || id;
+  return (k.scopes || []).map((s) => span({ className: 'key-chip' },
+    span({ className: 'where' }, s.collectionId === ANY ? 'all collections' : nameOf(s.collectionId)),
+    span({ className: 'what' }, s.capabilities.join(' \u00b7 ')),
+  ));
+}
+
+function metaLine(k) {
+  const when = (ms) => new Date(ms).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
+  const bits = [`created ${when(k.createdAt)}`];
+  if (k.createdBy) bits.push(`by ${k.createdBy}`);
+  // "Never used" is the more useful of the two facts: it is how you find the key nobody
+  // needs and can safely revoke.
+  bits.push(k.lastUsedAt ? `last used ${when(k.lastUsedAt)}` : 'never used');
+  if (k.expiresAt) bits.push(`expires ${when(k.expiresAt)}`);
+  return bits.join(' \u00b7 ');
+}
+
 function openersSection(ui) {
   const rows = listAssociations(ui.platform);
   return div({ className: 'group' },

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

@@ -97,7 +97,15 @@ export function statusFacts(state, ui) {
   const items = ex.items || [];
   const act = state.act || { tasks: [], issues: [] };
   return {
-    collectionId: ex.collectionId || 'default',
+    // `null` with nothing open — `collectionLabel` renders that as "no collection". The
+    // old fallback made the bar name a collection that may not exist, on a drive where
+    // the user had not yet chosen one.
+    collectionId: ex.collectionId ?? null,
+    // What to CALL it, so the phone shell and the desktop bar cannot end up saying
+    // different things — which is the entire reason these facts are derived once. The
+    // phone rendered `collectionId` raw, which showed an opaque `col_…` id where the
+    // desktop showed the name.
+    collectionLabel: collectionLabel(ex),
     // The COLLECTION's totals when the server could give them, not the page's. Summing
     // what happens to be loaded reports a 3,000-file drive as 500 files — a wrong number,
     // not a rounded one. Falls back to the page only when the server didn't say.
@@ -117,6 +125,13 @@ export function statusFacts(state, ui) {
   };
 }
 
+/** What to call the current collection: its name, its id, or an honest nothing. */
+function collectionLabel(ex) {
+  if (!ex?.collectionId) return 'no collection';
+  const match = (ex.collections || []).find((c) => c.id === ex.collectionId);
+  return match?.name || ex.collectionId;
+}
+
 export default function statusBar(state, ui) {
   const ex = state.ex;
   const items = ex.items || [];
@@ -156,7 +171,9 @@ export default function statusBar(state, ui) {
         } })
       : null,
     button({ className: 'seg', title: 'Switch collection' },
-      icon('files', { size: 13 }), span(ex.collectionId || 'default'),
+      // The NAME, and nothing invented. `|| 'default'` used to sit here, which meant the
+      // status bar cheerfully named a collection on a drive that had none.
+      icon('files', { size: 13 }), span(collectionLabel(ex)),
       (ex.collections || []).length > 1 || ex.canCreateCollection ? icon('chevron-down', { size: 11 }) : null)
       .on({ click: (e) => {
         const items = ui.app.collectionMenu?.() || [];

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

@@ -10,6 +10,7 @@ import activityBar from '../components/activityBar.js';
 import statusBar from '../components/statusBar.js';
 import launcher from '../components/launcher.js';
 import settingsView from '../components/settingsView.js';
+import collectionGate from '../components/collectionGate.js';
 import pluginsView from '../components/pluginsView.js';
 import editorArea from '../components/editorArea.js';
 import commandPalette from '../components/commandPalette.js';
@@ -43,6 +44,7 @@ export default function workbench({ engine, app, platform, plugins }) {
       platform.workbench.observeNav(),
       app.explorer.observe(),
       app.search.observe(),
+      app.apiKeys.observe(),
       app.transfers.observe(),
       platform.notifications.observe(),
       platform.context.observe(),
@@ -60,8 +62,8 @@ export default function workbench({ engine, app, platform, plugins }) {
     // shallow-equal to the last one, so a forced re-render that left no trace in the
     // object would be discarded as "nothing changed" — which is the opposite of what
     // asking for one means.
-    (wb, overlay, nav, ex, se, tr, notif, ctx, settings, pluginList, statusItems, so, off, act, vp, voice, _bump) =>
-      ({ wb, overlay, nav, ex, se, tr, notif, ctx, settings, plugins: pluginList, statusItems, so, off, act, vp, voice, _bump }),
+    (wb, overlay, nav, ex, se, keys, tr, notif, ctx, settings, pluginList, statusItems, so, off, act, vp, voice, _bump) =>
+      ({ wb, overlay, nav, ex, se, keys, tr, notif, ctx, settings, plugins: pluginList, statusItems, so, off, act, vp, voice, _bump }),
   );
 
   return alias(() => watch(combined, (state) => view(state, ui)));
@@ -94,6 +96,11 @@ function view(state, ui) {
 }
 
 function mainArea(state, ui) {
+  // Before a collection is known there is nothing to draw: every scoped request names one
+  // in its path, so a file list, a search box and an Upload button would all be lying.
+  // Settings stays reachable — an admin with no collections still needs to get at it.
+  if (state.ex?.gate && state.wb.activity !== 'settings') return collectionGate(state, ui);
+
   switch (state.wb.activity) {
     case 'settings': return settingsView(state, ui);
     case 'plugins': return pluginsView(state, ui);