@3sln/trove 0.0.4 → 0.0.7

package/packages/web/src/bl/activity.js

@@ -269,6 +269,38 @@ export class ActivityService {
     }
   }
 
+  /**
+   * Ask the server whether the backing stores are actually usable from a browser.
+   *
+   * Unlike a scan or a reindex this finishes in one round trip, so it reports its own
+   * result rather than handing back a task: the answer to "did I fix the bucket?" should
+   * be available immediately, and the issue list is refreshed so a problem that is now
+   * fixed visibly disappears rather than sitting there until the next poll.
+   */
+  async checkStorage() {
+    try {
+      const res = await this.api.checkStorage();
+      await this.refresh();
+      this.togglePanel(true);
+      const problems = (res.results || []).reduce((n, r) => n + (r.findings?.length || 0), 0);
+      if (problems) {
+        this.platform.notifications?.warn?.(`Found ${problems} storage problem${problems === 1 ? '' : 's'} — see Activity`);
+      } else if (!res.checked) {
+        this.platform.notifications?.info?.('There are no collections to check yet');
+      } else if (!res.corsChecked) {
+        // Honest about what was not checked. Reporting "all good" having skipped the check
+        // that matters is how a diagnostic stops being believed.
+        this.platform.notifications?.info?.('Stores are reachable. Browser access was not checked — this drive has no public URL configured.');
+      } else {
+        this.platform.notifications?.success?.('Stores are reachable and allow browser access');
+      }
+      return res;
+    } catch (err) {
+      this.platform.notifications?.error?.(`Couldn't check the stores: ${err.message}`);
+      throw err;
+    }
+  }
+
   togglePanel(open) {
     this.#set({ open: open ?? !this.state.open });
     if (this.state.open) this.refresh();

package/packages/web/src/bl/commands.js

@@ -7,6 +7,7 @@ import {
   NavigateAction, RefreshAction, DeleteAction, RenameAction,
   UploadFilesAction, OpenFileAction, CreateCollectionAction, LoadMoreAction, TrashAction,
   SearchAction,
+  LoadApiKeysAction, MintApiKeyAction, RevokeApiKeyAction,
 } from './actions.js';
 import { beginInstallFromFile, beginInstallFromUrl } from './pluginInstall.js';
 import { troveUri } from '@3sln/trove/core/links.js';
@@ -56,8 +57,20 @@ export function registerCommands(app) {
   // Trove is not the only thing that can write to the bucket. This is how files added,
   // replaced, or removed by something else get picked up.
   cmd('workbench.scanCollection', 'Scan Collection for Outside Changes',
-    () => app.activity.scanCollection(explorer.state.collectionId || 'default').catch(() => {}),
+    () => {
+      // No collection means no scan. This used to fall back to one called 'default',
+      // which on a drive that has none scanned a collection that does not exist and
+      // reported the failure as a scan error.
+      const id = explorer.state.collectionId;
+      if (!id) return platform.notifications.info('Open a collection first — a scan is per collection.');
+      return app.activity.scanCollection(id).catch(() => {});
+    },
     { category: 'Explorer', icon: 'refresh' });
+  // Whether the backing stores are usable from a browser at all. Separate from a scan:
+  // a scan asks what the store HOLDS, this asks whether the store can be READ from here,
+  // which is the failure that makes every file open to a spinner.
+  cmd('workbench.checkStorage', 'Check Storage Configuration',
+    () => app.activity.checkStorage().catch(() => {}), { category: 'View', icon: 'plug' });
 
   // --- explorer --------------------------------------------------------------
   cmd('explorer.refresh', 'Refresh', () => go(new RefreshAction()), { category: 'Explorer', icon: 'refresh' });
@@ -131,6 +144,29 @@ export function registerCommands(app) {
     go(new TrashAction('list'));
     workbench.showHome();
   }, { category: 'Explorer', icon: 'trash' });
+  // --- API keys (admin) ---------------------------------------------------------
+  // All `palette: false`: these are the settings screen's own buttons, not verbs anyone
+  // would go looking for in the palette. Revoking a credential by fuzzy-searching for it
+  // is not a thing to make easy.
+  cmd('keys.load', 'Load API Keys', () => go(new LoadApiKeysAction()), { palette: false });
+  cmd('keys.new', 'New API Key', () => app.apiKeys.startDraft(), { palette: false });
+  cmd('keys.cancel', 'Cancel API Key', () => app.apiKeys.cancelDraft(), { palette: false });
+  cmd('keys.dismissMinted', 'Dismiss API Key', () => app.apiKeys.clearMinted(), { palette: false });
+  cmd('keys.revoke', 'Revoke API Key', (id) => id && go(new RevokeApiKeyAction(id)), { palette: false });
+  cmd('keys.mint', 'Create API Key', () => {
+    const draft = app.apiKeys.state.draft;
+    const scopes = app.apiKeys.draftScopes();
+    if (!draft?.name?.trim() || !scopes) return;
+    // Days in the form, an absolute instant on the wire: the server compares against its
+    // own clock, and "30 days from whenever this arrives" is not what was chosen.
+    const days = Number(draft.expiresInDays);
+    const expiresAt = draft.expiresInDays !== '' && Number.isFinite(days) && days > 0
+      ? Date.now() + days * 86400_000
+      : null;
+    app.apiKeys.cancelDraft();
+    return go(new MintApiKeyAction({ name: draft.name.trim(), scopes, expiresAt }));
+  }, { palette: false });
+
   cmd('explorer.hideTrash', 'Hide Trash', () => go(new TrashAction('hide')), { palette: false });
   cmd('explorer.restore', 'Restore from Trash', (id) => id && go(new TrashAction('restore', id)), { palette: false });
   cmd('explorer.purgeOne', 'Delete Forever', (id) => id && go(new TrashAction('purge', id)), { palette: false });
@@ -172,7 +208,10 @@ export function registerCommands(app) {
   // The menu of "where else could I be". Shared by the palette command and the status
   // bar's collection segment, so both offer the same list.
   const collectionMenu = () => {
-    const current = explorer.state.collectionId || 'default';
+    // No fallback: this only decides which row gets a tick, and with nothing open the
+    // answer is that none of them do. `|| 'default'` ticked a collection the user had
+    // not chosen, and on a drive with one actually called "default", the wrong one.
+    const current = explorer.state.collectionId;
     const items = (explorer.state.collections || []).map((c) => ({
       label: c.name || c.id,
       icon: c.id === current ? 'check' : 'files',

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

@@ -6,7 +6,7 @@
 
 import { Engine, Provider } from '@3sln/ngin';
 import { effect } from '../runtime.js';
-import { ExplorerService, SearchClientService, TransfersService } from './services.js';
+import { ExplorerService, SearchClientService, TransfersService, ApiKeysService } from './services.js';
 import { SocialService } from './social.js';
 import { OfflineService } from './offline.js';
 import { ActivityService } from './activity.js';
@@ -16,6 +16,7 @@ import { NavigateAction, LoadCollectionsAction, OpenInitialCollectionAction } fr
 export function createApp(platform) {
   const explorer = new ExplorerService(platform.settings);
   const search = new SearchClientService();
+  const apiKeys = new ApiKeysService();
   // One place for "what's running" and "what's stuck", covering both sides of the wire.
   const activity = new ActivityService(platform);
   const transfers = new TransfersService(activity);
@@ -23,7 +24,7 @@ export function createApp(platform) {
   const offline = new OfflineService(platform);
   social.offline = offline; // social queues sidecar ops through offline when disconnected
 
-  const app = { platform, explorer, search, transfers, social, offline, activity, engine: null };
+  const app = { platform, explorer, search, transfers, social, offline, activity, apiKeys, engine: null };
 
   const engine = new Engine({
     providers: { app: Provider.fromSingleton(app) },
@@ -39,10 +40,14 @@ export function createApp(platform) {
   // (e.g. the Delete keybinding needs `explorer.hasSelection`), and previously only
   // NavigateAction set them — so selecting a file never flipped hasSelection true and
   // Delete silently did nothing. Deriving them from the observable keeps them honest.
-  platform.context.setMany({ 'explorer.collectionId': 'default', 'explorer.hasSelection': false });
+  //
+  // `null` when no collection is open, never the string 'default'. A when-clause reading
+  // this is asking which collection is open, and answering with the name of one that may
+  // not exist made every such clause true before the user had chosen anything.
+  platform.context.setMany({ 'explorer.collectionId': null, 'explorer.hasSelection': false });
   effect(explorer.observe(), (ex) => {
     platform.context.setMany({
-      'explorer.collectionId': ex.collectionId || 'default',
+      'explorer.collectionId': ex.collectionId ?? null,
       'explorer.hasSelection': (ex.selection?.length || 0) > 0,
     });
   });

package/packages/web/src/bl/services.js

@@ -12,7 +12,10 @@ export class ExplorerService {
     this.state = {
       items: [], loading: false, error: null,
       selection: [], sort: settings.get('explorer.sort'), order: settings.get('explorer.sortOrder'),
-      collectionId: 'default', collections: [], canCreateCollection: false,
+      // No collection until one is chosen or created. `gate` is 'create' | 'choose' | null
+      // — when set, it is the ONLY thing the workbench shows, because every request needs
+      // a collection and there is nothing sensible to render without one.
+      collectionId: null, collections: [], canCreateCollection: false, gate: null,
       // `stats` is the whole collection; `items` is the page on screen. Keeping both
       // is what lets the UI say "500 of 3,006" instead of quietly claiming 500.
       stats: null, usage: null, nextCursor: null, loadingMore: false, trash: null,
@@ -59,6 +62,80 @@ export class ExplorerService {
   }
 }
 
+/**
+ * API keys, for the admin screen that manages them.
+ *
+ * Its own service rather than a corner of ExplorerService because it is a different
+ * lifetime: keys are read when someone opens Settings and never again, so they should not
+ * be part of the state every render of the file list walks over.
+ *
+ * `minted` holds the one secret a mint returns. It lives here, in memory, and is dropped
+ * the moment the admin dismisses it — the server cannot show it again, so the UI is the
+ * only place it ever exists, and it should not persist anywhere that outlives the tab.
+ */
+export class ApiKeysService {
+  constructor() {
+    this.state = {
+      keys: [], loading: false, loaded: false, error: null, minted: null, busy: null,
+      // The mint form. Held here rather than in the DOM so the section stays a pure
+      // function of state — and so a half-filled form survives a re-render caused by
+      // something else on the settings screen.
+      draft: null,
+    };
+    this.cell = cell(this.state);
+  }
+
+  /** Open the mint form, empty. */
+  startDraft() {
+    this.set({ draft: { name: '', expiresInDays: '', caps: {} }, error: null });
+  }
+  cancelDraft() {
+    this.set({ draft: null });
+  }
+  patchDraft(patch) {
+    if (!this.state.draft) return;
+    this.set({ draft: { ...this.state.draft, ...patch } });
+  }
+
+  /**
+   * Toggle one capability on one collection in the draft.
+   *
+   * `admin` is not treated specially here — it is offered as itself and the server
+   * expands it. Pre-ticking read/write/delete when admin is chosen would suggest they
+   * are separable afterwards, and they are not.
+   */
+  toggleCap(collectionId, capability) {
+    if (!this.state.draft) return;
+    const caps = { ...this.state.draft.caps };
+    const held = new Set(caps[collectionId] || []);
+    if (held.has(capability)) held.delete(capability);
+    else held.add(capability);
+    if (held.size) caps[collectionId] = [...held];
+    else delete caps[collectionId];
+    this.patchDraft({ caps });
+  }
+
+  /** The draft as the API wants it, or null when it would grant nothing. */
+  draftScopes() {
+    const caps = this.state.draft?.caps || {};
+    const scopes = Object.entries(caps)
+      .filter(([, list]) => list.length)
+      .map(([collectionId, capabilities]) => ({ collectionId, capabilities }));
+    return scopes.length ? scopes : null;
+  }
+  observe() {
+    return this.cell;
+  }
+  set(patch) {
+    this.state = { ...this.state, ...patch };
+    this.cell.setValue(this.state);
+  }
+  /** Forget the freshly minted secret. Called on dismiss, and after a copy. */
+  clearMinted() {
+    if (this.state.minted) this.set({ minted: null });
+  }
+}
+
 export class SearchClientService {
   constructor() {
     this.state = { query: '', mode: 'hybrid', results: [], loading: false, error: null, ran: false, paletteFiles: [], paletteQuery: '', paletteLoading: false, paletteError: null };

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

@@ -91,14 +91,24 @@ export class TroveApiClient {
       return res.ok;
     } catch { return false; }
   }
+  // Collection-scoped calls name their collection in the PATH. There is no default and
+  // no `?collection=`: the server refuses a request that does not say which collection it
+  // means, so a caller that forgets gets an error here rather than silently reaching one.
   /** Every item in a collection. */
-  list(opts = {}) {
-    return this.request('GET', '/api/items', { query: opts });
+  list(collection, opts = {}) {
+    return this.request('GET', `${this.#scope(collection)}/items`, { query: opts });
   }
   /** Resolve an item by id, by `trove:` URI, or by name within a collection. */
-  stat(ref, opts = {}) {
+  stat(ref, { collection, ...opts } = {}) {
     const key = String(ref).startsWith('trove:') ? 'uri' : 'id';
-    return this.request('GET', '/api/items/resolve', { query: { [key]: ref, ...opts } });
+    // A name is only unique inside a collection, so resolving one needs the scope. An id
+    // or a trove: URI names itself, and the flat resolve is fine for those.
+    const base = collection ? `${this.#scope(collection)}/items/resolve` : '/api/items/resolve';
+    return this.request('GET', base, { query: { [key]: ref, ...opts } });
+  }
+  #scope(collection) {
+    if (!collection) throw new Error('This call is scoped to a collection — pass one');
+    return `/api/collections/${encodeURIComponent(collection)}`;
   }
   /** What links to this item. */
   backlinks(id, opts = {}) {
@@ -112,26 +122,34 @@ export class TroveApiClient {
   }
   /** What's been deleted but not yet destroyed. */
   trash(collection) {
-    return this.request('GET', '/api/trash', { query: collection ? { collection } : {} });
+    return this.request('GET', `${this.#scope(collection)}/trash`);
   }
   restore(id) {
     return this.request('POST', '/api/trash/restore', { body: { id } });
   }
   /** Destroy for real — one item, or everything in a collection's trash. */
   purgeTrash({ id, collection } = {}) {
-    return this.request('POST', '/api/trash/purge', { body: id ? { id } : { collection } });
+    // One item names itself; emptying a whole collection has to name the collection, and
+    // says so in the URL — "everything in here" is the request that must never be able
+    // to mean somewhere you did not point at.
+    return id
+      ? this.request('POST', '/api/trash/purge', { body: { id } })
+      : this.request('POST', `${this.#scope(collection)}/trash/purge`);
   }
-  search(q, opts = {}) {
-    return this.request('GET', '/api/search', { query: { q, ...opts } });
+  search(q, { collection, ...opts } = {}) {
+    const base = collection ? `${this.#scope(collection)}/search` : '/api/search';
+    return this.request('GET', base, { query: { q, ...opts } });
   }
   // Unified query: server transforms the raw string (parse/LLM) → runs it → returns
   // { query, results, resolved }. `resolved` is what was actually searched.
-  query(q, opts = {}) {
-    return this.request('POST', '/api/query', { body: { q, ...opts } });
+  query(q, { collection, ...opts } = {}) {
+    const base = collection ? `${this.#scope(collection)}/query` : '/api/query';
+    return this.request('POST', base, { body: { q, ...opts } });
   }
   // Drive-wide tag/property filter (launcher #tag / #key:op:value).
-  tagSearch(filters, q, opts = {}) {
-    return this.request('POST', '/api/tags/search', { body: { filters, q, ...opts } });
+  tagSearch(filters, q, { collection, ...opts } = {}) {
+    const base = collection ? `${this.#scope(collection)}/tags/search` : '/api/tags/search';
+    return this.request('POST', base, { body: { filters, q, ...opts } });
   }
   indexers() {
     return this.request('GET', '/api/indexers');
@@ -167,6 +185,18 @@ export class TroveApiClient {
     return this.request('POST', `/api/collections/${encodeURIComponent(id)}/scan`);
   }
 
+  /**
+   * Check every collection's backing store for problems a browser would hit — chiefly a
+   * missing CORS policy, which leaves the file list and search working while every file
+   * fails to open.
+   *
+   * Worth asking from the browser rather than only on a timer: the server checks against
+   * the origin of THIS request, and a bucket policy may name exactly one origin.
+   */
+  checkStorage() {
+    return this.request('POST', '/api/diagnostics/storage');
+  }
+
   // --- server plugin installs (account-scoped, synced across devices) ---------
   /** Upload a package zip for account install; returns the server install record. */
   async installPlugin(bytes, grants) {
@@ -241,6 +271,19 @@ export class TroveApiClient {
   vapidKey() {
     return this.request('GET', '/api/push/vapid');
   }
+
+  // --- API keys (admin) -------------------------------------------------------
+  // Capability-only credentials; see core/apiKeys.js. `mintApiKey` is the one call in
+  // this client whose response contains a secret, and it is the only chance to see it.
+  apiKeys() {
+    return this.request('GET', '/api/keys');
+  }
+  mintApiKey({ name, scopes, expiresAt = null }) {
+    return this.request('POST', '/api/keys', { body: { name, scopes, expiresAt } });
+  }
+  revokeApiKey(id) {
+    return this.request('DELETE', `/api/keys/${encodeURIComponent(id)}`);
+  }
   subscribePush(subscription) {
     return this.request('POST', '/api/push/subscribe', { body: { subscription } });
   }
@@ -344,8 +387,8 @@ export class TroveApiClient {
   async upload(file, opts) {
     const name = opts.name || file.name || 'untitled';
     const size = file.size;
-    const plan = await this.request('POST', '/api/uploads', {
-      body: { collection: opts.collection, name, size, contentType: file.type || undefined },
+    const plan = await this.request('POST', `${this.#scope(opts.collection)}/uploads`, {
+      body: { name, size, contentType: file.type || undefined },
       signal: opts.signal,
     });
     // Hand the caller the server upload id so a cancel/failure can abort the session

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

@@ -131,10 +131,13 @@ export class PluginRpcRouter {
       // ONE options object — `api.list(opts)`. Called as `list(pathOrId, params)` the
       // collection became the query string's key and everything else was dropped, so a
       // plugin asking for `photos` silently got the default collection unsorted.
-      case 'files:list': return cap('files'), this.platform.api.list({
-        collection: params.collection || params.pathOrId || undefined,
-        sort: params.sort, order: params.order, limit: params.limit, cursor: params.cursor,
-      });
+      // A plugin has to say which collection it means, like everything else. The host
+      // does not pick one for it — a plugin reaching into whatever collection happened to
+      // be the default is exactly the ambient authority the capability list exists to stop.
+      case 'files:list': return cap('files'), this.platform.api.list(
+        params.collection || params.pathOrId,
+        { sort: params.sort, order: params.order, limit: params.limit, cursor: params.cursor },
+      );
       case 'files:stat': return cap('files'), this.platform.api.stat(params.id);
       case 'files:downloadUrl': return cap('files'), { url: this.platform.api.downloadUrl(params.id) };
       case 'files:index': {

package/packages/web/src/styles.css

@@ -1022,6 +1022,14 @@ kbd {
 .act-detail, .act-meta { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; overflow-wrap: anywhere; }
 .act-meta { color: var(--text-faint); }
 .act-error { font-size: 11.5px; color: var(--danger); margin-top: 2px; overflow-wrap: anywhere; }
+/* A remedy is a policy or a command, so it keeps its own whitespace and scrolls rather
+   than reflowing — a JSON document rewrapped to the panel width is not pasteable. */
+.act-remedy {
+  font-family: var(--font-mono, ui-monospace, monospace); font-size: 10.5px; line-height: 1.5;
+  color: var(--text-dim); background: var(--bg-inset, var(--bg-hover)); border: 1px solid var(--border);
+  border-radius: 6px; padding: 8px 10px; margin: 6px 0 2px; max-height: 220px;
+  overflow: auto; white-space: pre; tab-size: 2;
+}
 .act-amount { font-size: 11px; color: var(--text-faint); margin-top: 3px; }
 .act-action { background: none; border: none; color: var(--text-faint); cursor: pointer; padding: 2px; border-radius: 4px; }
 .act-action:hover { background: var(--bg-hover); color: var(--text); }
@@ -1380,3 +1388,132 @@ kbd {
 .launch-h .lh-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
 .launch-h .lh-actions { display: flex; align-items: center; gap: 2px; flex: none; }
 .launch-h .lh-verbatim { text-transform: none; font-weight: 500; color: var(--text-dim); letter-spacing: 0; }
+
+/* ---- API keys (settings) --------------------------------------------------
+   Built from the same tokens as the rest of Settings, so a key list reads as part
+   of the screen rather than a bolted-on admin console. */
+.keys-actions { display: flex; gap: 8px; align-items: center; padding: 12px 0 2px; }
+.keys-empty { color: var(--text-faint); font-size: 12.5px; padding: 10px 0; }
+
+.keys-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
+.key-row {
+  display: flex; align-items: flex-start; gap: 12px; padding: 12px 13px;
+  border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elevated);
+}
+.key-row-main { flex: 1; min-width: 0; }
+.key-row-name { display: flex; align-items: center; gap: 8px; }
+.key-row-name .t { font-weight: 550; }
+/* Revoked and expired keys stay in the list — "why did this stop working" is the
+   question they answer — so they are dimmed rather than removed. */
+.key-row.dead { opacity: .55; }
+.key-row.dead .key-row-name .t { text-decoration: line-through; }
+.key-tag {
+  font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px;
+  padding: 2px 7px; border-radius: 6px; background: var(--bg-hover); color: var(--text-dim);
+}
+.key-row-scopes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
+.key-chip {
+  display: inline-flex; align-items: center; gap: 6px; font-size: 11px;
+  border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
+}
+.key-chip .where { padding: 2px 7px; background: var(--bg-hover); color: var(--text-dim); }
+.key-chip .what { padding: 2px 7px; color: var(--accent); font-family: var(--font-mono); font-size: 10.5px; }
+.key-row-meta { color: var(--text-faint); font-size: 11.5px; margin-top: 7px; }
+
+/* ---- the mint form ---- */
+.key-form {
+  border: 1px solid var(--border); border-radius: 11px; background: var(--bg-elevated);
+  padding: 4px 14px 14px; margin-top: 12px;
+}
+.key-form .setting:last-of-type { border-bottom: 0; }
+.key-scopes { padding: 12px 0 4px; }
+.key-scopes-head .t { font-weight: 550; }
+.key-scopes-head .d { color: var(--text-faint); font-size: 12px; margin-top: 2px; line-height: 1.4; }
+.key-scope {
+  display: flex; align-items: center; gap: 12px; padding: 9px 0;
+  border-bottom: 1px solid var(--border);
+}
+.key-scope:last-child { border-bottom: 0; }
+/* "All collections" is the one row where a tick is a much bigger decision than it
+   looks, so it is set apart rather than sitting flush with the named collections. */
+.key-scope.wildcard {
+  margin-bottom: 4px; padding: 10px 11px; border-bottom: 0; border-radius: 9px;
+  background: color-mix(in srgb, var(--warn) 8%, transparent);
+  border: 1px solid color-mix(in srgb, var(--warn) 26%, transparent);
+}
+.key-scope-name { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; }
+.key-scope-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.key-scope-name svg { flex: none; color: var(--text-dim); }
+.key-scope.wildcard .key-scope-name svg { color: var(--warn); }
+.key-scope-caps { display: flex; gap: 6px; flex: none; }
+.key-scope-caps .cap {
+  display: inline-flex; align-items: center; gap: 5px; cursor: pointer; user-select: none;
+  font-size: 11.5px; padding: 4px 9px; border-radius: 7px;
+  border: 1px solid var(--border); color: var(--text-dim); background: transparent;
+}
+.key-scope-caps .cap:hover { background: var(--bg-hover); }
+.key-scope-caps .cap.on {
+  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
+  background: color-mix(in srgb, var(--accent) 12%, transparent);
+}
+.key-scope-caps .cap input { margin: 0; accent-color: var(--accent); }
+
+/* ---- the one-time secret ----
+   Loud on purpose. The server kept only a hash, so this is the only moment the value
+   exists anywhere, and a quiet row would be dismissed without being copied. */
+.key-minted {
+  margin: 12px 0 4px; padding: 13px 14px; border-radius: 11px;
+  background: color-mix(in srgb, var(--warn) 9%, transparent);
+  border: 1px solid color-mix(in srgb, var(--warn) 32%, transparent);
+}
+.key-minted-head { display: flex; align-items: center; gap: 9px; font-weight: 550; color: var(--warn); }
+.key-minted-head svg { flex: none; }
+.key-minted-note { color: var(--text-dim); font-size: 12.5px; line-height: 1.55; margin: 8px 0 11px; }
+.key-secret { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.key-secret code {
+  flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 12.5px; color: var(--text);
+  background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px;
+  padding: 7px 10px; overflow-x: auto; white-space: nowrap;
+}
+
+/* A capability row is four chips wide; on a phone that beats the collection name into a
+   gutter, so the row stacks and the chips wrap under it. */
+@media (max-width: 560px) {
+  .key-scope { flex-direction: column; align-items: stretch; gap: 8px; }
+  .key-scope-caps { flex-wrap: wrap; }
+  .key-row { flex-direction: column; }
+}
+
+/* ---- Collection gate -------------------------------------------------------
+   The whole screen until a collection is chosen. Centred and narrow on purpose:
+   there is exactly one decision to make here, and a full-width layout would imply
+   there is something else to look at. */
+.gate { display: grid; place-items: center; min-height: 100%; padding: 40px 20px; }
+.gate-card { width: min(520px, 100%); text-align: center; }
+.gate-icon {
+  width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 15px;
+  display: grid; place-items: center; color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 13%, transparent);
+  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
+}
+.gate-card h2 { margin: 0 0 8px; font-size: 19px; }
+.gate-sub { color: var(--text-dim); font-size: 13px; line-height: 1.6; margin: 0 0 20px; }
+.gate-actions { display: flex; gap: 8px; justify-content: center; margin-top: 18px; }
+
+.gate-list { display: flex; flex-direction: column; gap: 8px; text-align: left; }
+.gate-choice {
+  display: flex; align-items: center; gap: 12px; width: 100%; cursor: pointer;
+  padding: 12px 14px; border-radius: 10px; font: inherit; color: inherit;
+  border: 1px solid var(--border); background: var(--bg-elevated);
+}
+.gate-choice:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--bg-hover); }
+.gate-choice:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-halo); }
+.gate-choice-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+.gate-choice-main .n { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.gate-choice-main .d { color: var(--text-faint); font-size: 11.5px; }
+/* The capability list is the quiet half of the row: useful before you commit, not
+   something to read first. */
+.gate-caps {
+  flex: none; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-dim);
+  padding: 2px 8px; border-radius: 6px; background: var(--bg-hover);
+}

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

@@ -12,10 +12,23 @@ import { dd } from '../../runtime.js';
 import { icon } from '../icon.js';
 import { bytes } from '../format.js';
 
-const { div, button, span, h3, p } = dd;
+const { div, button, span, h3, p, pre } = dd;
 
 const STATUS_ICON = { running: 'refresh', done: 'check', failed: 'close', cancelled: 'close' };
 
+/**
+ * Clipboard, with the value shown if the write is refused.
+ *
+ * Clipboard permission is denied often enough that a button which silently does nothing
+ * reads as broken — and the remedy is the one thing on this panel the user has to get out
+ * of the app and into a terminal.
+ */
+function copyText(text, ui) {
+  navigator.clipboard?.writeText(text)
+    .then(() => ui.platform.notifications.success('Copied'))
+    .catch(() => ui.platform.notifications.info(text, { sticky: true }));
+}
+
 function amount(task) {
   if (task.total == null) return null;
   return task.unit === 'bytes'
@@ -61,10 +74,18 @@ function issueRow(issue, ui) {
       div({ className: 'act-body' },
         div({ className: 'act-title' }, issue.title),
         issue.detail ? div({ className: 'act-detail' }, issue.detail) : null,
+        // The fix, kept apart from the description and rendered as-is. A remedy is often
+        // a policy document or a shell command, and a problem report that describes the
+        // fix in prose leaves the reader to retype it.
+        issue.remedy ? pre({ className: 'act-remedy' }, issue.remedy) : null,
         div({ className: 'act-meta' }, issue.count > 1 ? `${issue.count} times, since ${since}` : `since ${since}`),
       ),
     ),
     div({ className: 'act-actions' },
+      issue.remedy
+        ? button({ className: 'btn small ghost' }, 'Copy fix')
+          .on({ click: () => copyText(issue.remedy, ui) })
+        : null,
       // Retry only when the server said pressing it will actually do something.
       issue.retryable
         ? button({ className: 'btn small act-retry' }, icon('refresh', { size: 12 }), span('Retry'))
@@ -127,6 +148,12 @@ export default function activityPanel(state, ui) {
         .on({ click: () => ui.exec('workbench.rebuildIndex') }),
       button({ className: 'btn small ghost act-scan' }, icon('refresh', { size: 12 }), span('Scan for outside changes'))
         .on({ click: () => ui.exec('workbench.scanCollection') }),
+      // On demand as well as on a schedule, because the moment an admin wants to know
+      // whether they fixed the bucket is right after they changed it — not up to five
+      // minutes later. It also checks against THIS browser's origin, which the scheduled
+      // run can only do if the deployment configured one.
+      button({ className: 'btn small ghost act-storage' }, icon('plug', { size: 12 }), span('Check storage'))
+        .on({ click: () => ui.exec('workbench.checkStorage') }),
     ),
   );
 }