sh3-core 0.8.0 → 0.8.2

package/dist/shards/activate.svelte.js

@@ -24,8 +24,14 @@ import { isAdmin as checkIsAdmin } from '../auth/index';
 import { createZoneManager } from '../state/manage';
 import { PERMISSION_STATE_MANAGE } from '../state/types';
 import { PERMISSION_DOCUMENTS_SYNC } from '../documents/sync/types';
+import { PERMISSION_DOCUMENTS_BROWSE } from '../documents/types';
+import { createBrowseCapability } from '../documents/browse';
 import { getSyncBundle } from '../documents/sync/singleton';
 import { createSyncHandle } from '../documents/sync/handle';
+import { createSyncRegistryAccessor } from '../documents/sync/observer';
+import { createShardKeysApi } from '../keys/client';
+import { PERMISSION_KEYS_MINT } from '../keys/types';
+import { subscribe } from '../keys/revocation-bus.svelte';
 /**
  * Reactive registry of every shard known to the host. Keys are shard ids.
  * Populated once at boot by the glob-discovery loop in main.ts (through
@@ -68,7 +74,7 @@ export function registerShard(shard) {
  * @throws If the shard is not registered, or if a manifest view has no factory after activation.
  */
 export async function activateShard(id) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f, _g;
     const shard = registeredShards.get(id);
     if (!shard) {
         throw new Error(`Cannot activate shard "${id}": not registered`);
@@ -128,10 +134,19 @@ export async function activateShard(id) {
         get isAdmin() {
             return checkIsAdmin();
         },
+        get tenantId() {
+            return getTenantId();
+        },
         zones: ((_a = shard.manifest.permissions) === null || _a === void 0 ? void 0 : _a.includes(PERMISSION_STATE_MANAGE))
             ? createZoneManager()
             : undefined,
-        sync: ((_b = shard.manifest.permissions) === null || _b === void 0 ? void 0 : _b.includes(PERMISSION_DOCUMENTS_SYNC))
+        browse: ((_b = shard.manifest.permissions) === null || _b === void 0 ? void 0 : _b.includes(PERMISSION_DOCUMENTS_BROWSE))
+            ? createBrowseCapability(getTenantId(), getDocumentBackend())
+            : undefined,
+        syncRegistry: ((_c = shard.manifest.permissions) === null || _c === void 0 ? void 0 : _c.includes(PERMISSION_DOCUMENTS_BROWSE))
+            ? createSyncRegistryAccessor(getDocumentBackend(), getTenantId())
+            : undefined,
+        sync: ((_d = shard.manifest.permissions) === null || _d === void 0 ? void 0 : _d.includes(PERMISSION_DOCUMENTS_SYNC))
             ? () => {
                 const backend = getDocumentBackend();
                 const tenantId = getTenantId();
@@ -149,8 +164,27 @@ export async function activateShard(id) {
                 };
             }
             : undefined,
+        keys: ((_e = shard.manifest.permissions) === null || _e === void 0 ? void 0 : _e.includes(PERMISSION_KEYS_MINT))
+            ? createShardKeysApi({
+                shardId: id,
+                shardPermissions: (_f = shard.manifest.permissions) !== null && _f !== void 0 ? _f : [],
+            })
+            : undefined,
     };
     entry.ctx = ctx;
+    // Wire onKeyRevoked hook: subscribe to the revocation bus for this shard.
+    // Only shards that declare the hook incur the subscription overhead.
+    if (shard.onKeyRevoked) {
+        const off = subscribe(id, async (keyId) => {
+            try {
+                await shard.onKeyRevoked(keyId);
+            }
+            catch (err) {
+                console.error(`[sh3] onKeyRevoked failed in "${id}":`, err);
+            }
+        });
+        entry.cleanupFns.push(async () => off());
+    }
     active.set(id, entry);
     activeShards.set(id, shard);
     await shard.activate(ctx);
@@ -170,7 +204,7 @@ export async function activateShard(id) {
             console.warn(`[sh3] Failed to hydrate env state for shard "${id}":`, err instanceof Error ? err.message : err);
         }
     }
-    void ((_c = shard.autostart) === null || _c === void 0 ? void 0 : _c.call(shard, ctx));
+    void ((_g = shard.autostart) === null || _g === void 0 ? void 0 : _g.call(shard, ctx));
 }
 /**
  * Deactivate an active shard. Calls `shard.deactivate`, flushes and disposes
@@ -212,6 +246,24 @@ export function getShardContext(id) {
     var _a;
     return (_a = active.get(id)) === null || _a === void 0 ? void 0 : _a.ctx;
 }
+/**
+ * Enumerate every view declared as `standalone` across the currently
+ * active shards. Intended for the `views --standalone` verb and any
+ * launcher UI that wants to surface "summonable" primitives. Only
+ * pulls from `activeShards` — registered-but-inactive shards aren't
+ * ready to mount.
+ */
+export function listStandaloneViews() {
+    const out = [];
+    for (const shard of activeShards.values()) {
+        for (const view of shard.manifest.views) {
+            if (view.standalone) {
+                out.push({ shardId: shard.manifest.id, viewId: view.id, label: view.label });
+            }
+        }
+    }
+    return out;
+}
 /**
  * Test-only reset. Tears down any active shard entries (without running
  * deactivate hooks — tests should run deactivate explicitly if they care)

package/dist/shards/types.d.ts

@@ -1,9 +1,13 @@
 import type { StateZones } from '../state/zones.svelte';
 import type { ZoneSchema, ZoneManager } from '../state/types';
 import type { DocumentHandle, DocumentHandleOptions } from '../documents/types';
+import type { BrowseCapability } from '../documents/browse';
 import type { SyncHandle } from '../documents/sync/types';
+import type { SyncRegistry } from '../documents/sync/registry';
 import type { EnvState } from '../env/types';
 import type { Verb } from '../verbs/types';
+import type { ShardContextKeys } from '../keys/types';
+export { PERMISSION_KEYS_MINT, type ShardContextKeys, type ApiKeyPublic, type MintOpts, ScopeEscalationError, ConsentDeniedError } from '../keys/types';
 /**
  * The object returned by `ViewFactory.mount`. The framework calls
  * `unmount()` when the slot goes away, and `onResize(w, h)` whenever the
@@ -83,6 +87,14 @@ export interface ViewDeclaration {
     label: string;
     /** Optional icon hint (reserved; not yet rendered in phase 8). */
     icon?: string;
+    /**
+     * When true, this view is a standalone primitive — summonable from
+     * anywhere without requiring an owning app. Standalone views are
+     * enumerable via the framework's view directory and can be popped
+     * out into a float or docked into the active layout by verbs like
+     * `popout` and `dock`. Defaults to false.
+     */
+    standalone?: boolean;
 }
 /**
  * Static description of a shard as observed by the framework and consumers
@@ -120,6 +132,8 @@ export interface ShardManifest {
      * Currently recognized:
      *   - 'state:manage' — cross-shard zone access.
      *   - 'documents:sync' — cross-shard document sync API.
+     *   - 'documents:browse' — tenant-wide document observation and sync
+     *     registry visibility (observer-class shards, e.g. file-explorer).
      */
     permissions?: string[];
 }
@@ -188,6 +202,12 @@ export interface ShardContext {
     envUpdate<T extends Record<string, unknown>>(patch: Partial<T>): Promise<void>;
     /** Whether the current session has admin privileges. */
     isAdmin: boolean;
+    /**
+     * The active tenant id. Always present. Exposed for logging / diagnostics.
+     * Scopes never carry tenantId; the engine rebinds per-session. Do not
+     * serialize into persistent storage.
+     */
+    tenantId: string;
     /**
      * Cross-shard zone management API. Only present when the shard's
      * manifest declares the `'state:manage'` permission. Check with
@@ -200,6 +220,26 @@ export interface ShardContext {
      * `if (ctx.sync)` before use.
      */
     sync?: () => SyncHandle;
+    /**
+     * Tenant-wide document browse API. Read-only enumeration and change
+     * subscription across every shard's documents for the active tenant.
+     * Only present when the shard's manifest declares the
+     * `'documents:browse'` permission. Writes still flow through the
+     * owning shard's own `ctx.documents()` handle.
+     */
+    browse?: BrowseCapability;
+    /**
+     * Sync registry observer. Read-only list/revoke/conflict enumeration
+     * for explorer-class shards. Only present when the shard declares
+     * `'documents:browse'`. Granting still happens exclusively via
+     * `<SyncGrantPicker />`.
+     */
+    syncRegistry?: () => SyncRegistry;
+    /**
+     * Mint/list/revoke keys minted by this shard. Only available when the
+     * manifest declares the `keys:mint` permission.
+     */
+    keys?: ShardContextKeys;
 }
 /**
  * A shard module. Shards are the fundamental unit of contribution in SH3.
@@ -241,6 +281,8 @@ export interface Shard {
      * `ShardContext` that `activate` received.
      */
     resume?(ctx: ShardContext): void | Promise<void>;
+    /** Fires when a key minted by this shard is revoked from any source. */
+    onKeyRevoked?(id: string): void | Promise<void>;
 }
 /**
  * Source-level shape of a shard as written by external package authors.

package/dist/shards/types.js

@@ -17,4 +17,4 @@
  * activation events. They'll slot into `ShardContext` as new `register*`
  * methods without disturbing the phase-4 shape.
  */
-export {};
+export { PERMISSION_KEYS_MINT, ScopeEscalationError, ConsentDeniedError } from '../keys/types';

package/dist/shell/views/KeysAndPeers.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+  /**
+   * Keys & Peers view — lists every API key minted for the current user's
+   * tenant (admin keys excluded) and allows individual revocation.
+   *
+   * Reachable from settings. No create-key button; keys are only minted
+   * in-shard via the consent flow.
+   */
+
+  import type { ApiKeyPublic } from '../../keys/types';
+  import { subscribe as subscribeBus } from '../../keys/revocation-bus.svelte';
+
+  let rows = $state<ApiKeyPublic[]>([]);
+  let loadError = $state<string | null>(null);
+  let loading = $state(true);
+  let confirmingId = $state<string | null>(null);
+
+  async function refresh(): Promise<void> {
+    loadError = null;
+    loading = true;
+    try {
+      const res = await fetch('/api/keys', { credentials: 'include' });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      rows = await res.json();
+    } catch (err) {
+      loadError = err instanceof Error ? err.message : String(err);
+    } finally {
+      loading = false;
+    }
+  }
+
+  async function revoke(id: string): Promise<void> {
+    confirmingId = null;
+    const res = await fetch(`/api/keys/${encodeURIComponent(id)}`, {
+      method: 'DELETE',
+      credentials: 'include',
+    });
+    if (res.ok || res.status === 404) {
+      rows = rows.filter((r) => r.id !== id);
+    }
+  }
+
+  function formatDate(iso: string): string {
+    return new Date(iso).toLocaleDateString(undefined, {
+      year: 'numeric', month: 'short', day: 'numeric',
+    });
+  }
+
+  $effect(() => { refresh(); });
+
+  // Refresh whenever any key is revoked (by this or another tab/shard).
+  $effect(() => subscribeBus('*', () => { void refresh(); }));
+</script>
+
+<div class="keys-peers">
+  <div class="keys-peers-header">
+    <h2>Keys &amp; Peers</h2>
+  </div>
+
+  {#if loading}
+    <p class="keys-peers-muted">Loading...</p>
+  {:else if loadError}
+    <p class="keys-peers-error">Failed to load: {loadError}</p>
+  {:else if rows.length === 0}
+    <p class="keys-peers-muted">No keys yet. Shards will ask your permission before creating one.</p>
+  {:else}
+    <ul class="keys-peers-list">
+      {#each rows as row (row.id)}
+        <li class="keys-peers-item">
+          <div class="keys-peers-info">
+            <span class="keys-peers-label">{row.label}</span>
+            <span class="keys-peers-meta">
+              Minted by: {row.mintedByShardId ?? 'system'}{row.connectorId ? ` \u00B7 Connector: ${row.connectorId}` : ''}
+            </span>
+            <span class="keys-peers-meta">
+              Scopes: {row.scopes.join(', ')}
+            </span>
+            <span class="keys-peers-meta">
+              Created: {formatDate(row.createdAt)} &middot; Expires: {row.expiresAt ? formatDate(row.expiresAt) : 'never'}
+            </span>
+          </div>
+          <div class="keys-peers-actions">
+            {#if confirmingId === row.id}
+              <button type="button" class="keys-peers-btn-danger" onclick={() => revoke(row.id)}>Confirm</button>
+              <button type="button" class="keys-peers-btn-secondary" onclick={() => { confirmingId = null; }}>Cancel</button>
+            {:else}
+              <button type="button" class="keys-peers-btn-danger" onclick={() => { confirmingId = row.id; }}>Revoke</button>
+            {/if}
+          </div>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>
+
+<style>
+  .keys-peers { padding: 24px; font-family: system-ui, sans-serif; color: var(--shell-fg); }
+  .keys-peers-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
+  .keys-peers-header h2 { margin: 0; font-size: 18px; }
+  .keys-peers-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
+  .keys-peers-item { display: flex; justify-content: space-between; align-items: flex-start; padding: 12px 16px; background: var(--shell-bg-elevated, #252540); border: 1px solid var(--shell-border, #3a3a5c); border-radius: var(--shell-radius, 6px); gap: 12px; }
+  .keys-peers-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
+  .keys-peers-label { font-weight: 600; }
+  .keys-peers-meta { font-size: 11px; color: var(--shell-fg-subtle); }
+  .keys-peers-actions { display: flex; gap: 6px; flex-shrink: 0; align-items: flex-start; padding-top: 2px; }
+  .keys-peers-btn-danger { background: transparent; color: var(--shell-error, #d32f2f); border: 1px solid var(--shell-error, #d32f2f); font-size: 12px; padding: 4px 10px; border-radius: var(--shell-radius, 6px); cursor: pointer; }
+  .keys-peers-btn-secondary { background: transparent; color: var(--shell-fg-subtle); border: 1px solid var(--shell-border, #3a3a5c); font-size: 12px; padding: 4px 10px; border-radius: var(--shell-radius, 6px); cursor: pointer; }
+  .keys-peers-muted { color: var(--shell-fg-muted); font-style: italic; }
+  .keys-peers-error { color: var(--shell-error, #d32f2f); font-size: 13px; }
+</style>

package/dist/shell/views/KeysAndPeers.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const KeysAndPeers: import("svelte").Component<Record<string, never>, {}, "">;
+type KeysAndPeers = ReturnType<typeof KeysAndPeers>;
+export default KeysAndPeers;

package/dist/shell-shard/Terminal.svelte

@@ -88,15 +88,6 @@
   toolbarRegistry.register({ id: 'focus-lock', order: 20, visible: (ctx) => ctx.mode.id === 'user', component: FocusLockSlot });
   toolbarRegistry.register({ id: 'target-shard', order: 30, visible: (ctx) => ctx.mode.id === 'user', component: TargetShardSlot });
 
-  let toolbarExpanded = $state((() => {
-    try { return localStorage.getItem('sh3.shell.toolbarExpanded') !== '0'; } catch { return true; }
-  })());
-
-  function toggleToolbar() {
-    toolbarExpanded = !toolbarExpanded;
-    try { localStorage.setItem('sh3.shell.toolbarExpanded', toolbarExpanded ? '1' : '0'); } catch {}
-  }
-
   /** Walk the layout tree and return the viewId of the active tab in the first
    *  TabsNode found (breadth-first). Returns null if the layout contains no
    *  tabs node with a populated active tab. */
@@ -205,8 +196,6 @@
   <Toolbar
     registry={toolbarRegistry}
     ctx={{ mode, role }}
-    expanded={toolbarExpanded}
-    onToggle={toggleToolbar}
     slotProps={{
       mode: { mode, role, registry: modeRegistry, onSelect: setMode },
       'focus-lock': { locked: focusLocked, onToggle: () => (focusLocked = !focusLocked) },

package/dist/shell-shard/manifest.js

@@ -3,7 +3,7 @@ export const manifest = {
     id: 'shell',
     label: 'Shell',
     version: VERSION,
-    views: [{ id: 'shell:terminal', label: 'Shell' }],
+    views: [{ id: 'shell:terminal', label: 'Shell', standalone: true }],
     // serverBundle intentionally omitted — this shard is a framework built-in
     // and is statically mounted at sh3-server boot. The existing contract in
     // sh3-core/src/shards/types.ts documents that framework-shipped shards do

package/dist/shell-shard/shellShard.svelte.js

@@ -19,7 +19,9 @@ import { registerV1Verbs } from './verbs';
 import { listRegisteredApps, getActiveApp } from '../apps/registry.svelte';
 import { launchApp } from '../apps/lifecycle';
 import { registeredShards } from '../shards/activate.svelte';
-import { inspectActiveLayout, focusView, closeTab } from '../layout/inspection';
+import { inspectActiveLayout, focusView, closeTab, popoutView, dockFloat, dockIntoActiveLayout } from '../layout/inspection';
+import { floatManager } from '../overlays/float';
+import { listStandaloneViews } from '../shards/activate.svelte';
 import { getUser, isAdmin } from '../auth/index';
 /** Walk a layout tree and collect all tab entries (slotId + viewId + label). */
 function collectTabEntries(node) {
@@ -76,16 +78,62 @@ function makeShellApi(_ctx) {
                 return [];
             }
         },
-        // → layout/inspection: focusView(viewId) returns boolean
+        // → layout/inspection: focusView(viewId). Falls back to dockIntoActiveLayout
+        // for standalone views that aren't mounted yet — this is the single
+        // "summon" entry point wired behind the `open` verb.
         openViewInCurrentLayout(viewId) {
             try {
-                const found = focusView(viewId);
-                return found ? { ok: true } : { ok: false, error: `view "${viewId}" not found in current layout` };
+                if (focusView(viewId))
+                    return { ok: true };
+                const standalone = listStandaloneViews().find((v) => v.viewId === viewId);
+                if (standalone) {
+                    const slotId = `standalone:${viewId}:${Date.now()}`;
+                    const ok = dockIntoActiveLayout({ slotId, viewId, label: standalone.label });
+                    return ok ? { ok: true } : { ok: false, error: `could not dock "${viewId}" — no available slot` };
+                }
+                return { ok: false, error: `view "${viewId}" not found in current layout` };
             }
             catch (err) {
                 return { ok: false, error: err instanceof Error ? err.message : String(err) };
             }
         },
+        // → shards/activate.svelte: listStandaloneViews() walks activeShards
+        listStandaloneViews() {
+            return listStandaloneViews();
+        },
+        // → layout/inspection: popoutView(slotId) returns floatId | null
+        popoutSlot(slotId) {
+            try {
+                const floatId = popoutView(slotId);
+                return floatId ? { ok: true, floatId } : { ok: false, error: `slot "${slotId}" not found in docked tree` };
+            }
+            catch (err) {
+                return { ok: false, error: err instanceof Error ? err.message : String(err) };
+            }
+        },
+        // → layout/inspection: dockFloat(floatId) returns boolean
+        dockFloat(floatId) {
+            try {
+                const ok = dockFloat(floatId);
+                return ok ? { ok: true } : { ok: false, error: `float "${floatId}" not found or has no dockable content` };
+            }
+            catch (err) {
+                return { ok: false, error: err instanceof Error ? err.message : String(err) };
+            }
+        },
+        // → overlays/float: floatManager.list() returns FloatEntry[]
+        listFloats() {
+            return floatManager.list().map((f) => {
+                var _a, _b, _c, _d, _e;
+                const tabs = f.content.type === 'tabs' ? f.content : null;
+                const active = tabs ? (_b = tabs.tabs[(_a = tabs.activeTab) !== null && _a !== void 0 ? _a : 0]) !== null && _b !== void 0 ? _b : tabs.tabs[0] : null;
+                return {
+                    floatId: f.id,
+                    viewId: (_c = active === null || active === void 0 ? void 0 : active.viewId) !== null && _c !== void 0 ? _c : null,
+                    label: (_e = (_d = f.title) !== null && _d !== void 0 ? _d : active === null || active === void 0 ? void 0 : active.label) !== null && _e !== void 0 ? _e : f.id,
+                };
+            });
+        },
         // → layout/inspection: closeTab(slotId) is async (guarded close).
         // Fire-and-forget; the tab disappears asynchronously. ShellApi stays sync.
         closeSlot(slotId) {

package/dist/shell-shard/toolbar/Toolbar.svelte

@@ -4,28 +4,21 @@
   interface Props {
     registry: ToolbarSlotRegistry;
     ctx: ShellSlotCtx;
-    expanded: boolean;
-    onToggle: () => void;
     slotProps?: Record<string, Record<string, unknown>>;
   }
 
-  let { registry, ctx, expanded, onToggle, slotProps = {} }: Props = $props();
+  let { registry, ctx, slotProps = {} }: Props = $props();
 
   let slots = $derived(registry.list(ctx));
 </script>
 
-<div class="toolbar" class:collapsed={!expanded}>
-  <button class="toolbar-toggle" onclick={onToggle} title={expanded ? 'Collapse toolbar' : 'Expand toolbar'}>
-    {expanded ? '▲' : '▼'}
-  </button>
-  {#if expanded}
-    <div class="toolbar-slots">
-      {#each slots as s (s.id)}
-        {@const Slot = s.component}
-        <Slot {...(slotProps[s.id] ?? {})} />
-      {/each}
-    </div>
-  {/if}
+<div class="toolbar">
+  <div class="toolbar-slots">
+    {#each slots as s (s.id)}
+      {@const Slot = s.component}
+      <Slot {...(slotProps[s.id] ?? {})} />
+    {/each}
+  </div>
 </div>
 
 <style>
@@ -33,30 +26,16 @@
     display: flex;
     align-items: center;
     gap: 6px;
-    padding: 2px 6px;
-    background: var(--shell-toolbar-bg, #1a1a1a);
+    padding: 4px 6px;
+    background: var(--shell-bg-elevated, var(--shell-bg, #1a1a1a));
     border-bottom: 1px solid var(--shell-border, #333);
     flex-shrink: 0;
-    min-height: 24px;
-  }
-
-  .toolbar-toggle {
-    background: none;
-    border: none;
-    color: var(--shell-fg-dim, #888);
-    cursor: pointer;
-    font-size: 0.7em;
-    padding: 0 2px;
-    line-height: 1;
-  }
-
-  .toolbar-toggle:hover {
-    color: var(--shell-fg, #ddd);
   }
 
   .toolbar-slots {
     display: flex;
     align-items: center;
     gap: 8px;
+    flex-wrap: wrap;
   }
 </style>

package/dist/shell-shard/toolbar/Toolbar.svelte.d.ts

@@ -2,8 +2,6 @@ import type { ToolbarSlotRegistry, ShellSlotCtx } from './slots';
 interface Props {
     registry: ToolbarSlotRegistry;
     ctx: ShellSlotCtx;
-    expanded: boolean;
-    onToggle: () => void;
     slotProps?: Record<string, Record<string, unknown>>;
 }
 declare const Toolbar: import("svelte").Component<Props, {}, "">;

package/dist/shell-shard/toolbar/slots/ModeSlot.svelte

@@ -11,92 +11,59 @@
 
   let { mode, role, registry, onSelect }: Props = $props();
 
-  let open = $state(false);
-
-  function select(id: string) {
-    open = false;
-    onSelect(id);
-  }
+  let modes = $derived(registry.list(role));
 </script>
 
 {#if role === 'admin'}
-  <div class="mode-slot">
-    <button class="mode-btn" onclick={() => (open = !open)}>
-      {mode.label} ▾
-    </button>
-    {#if open}
-      <ul class="mode-menu" role="menu">
-        {#each registry.list(role) as m (m.id)}
-          <li role="menuitem">
-            <button
-              class="mode-option"
-              class:active={m.id === mode.id}
-              onclick={() => select(m.id)}
-            >
-              {m.label}
-            </button>
-          </li>
-        {/each}
-      </ul>
-    {/if}
+  <div class="mode-bar" role="toolbar" aria-label="Shell mode">
+    {#each modes as m (m.id)}
+      <button
+        type="button"
+        class="mode-btn"
+        class:active={m.id === mode.id}
+        aria-pressed={m.id === mode.id}
+        onclick={() => onSelect(m.id)}
+      >
+        {m.label}
+      </button>
+    {/each}
   </div>
 {:else}
   <span class="mode-label">{mode.label}</span>
 {/if}
 
 <style>
-  .mode-slot {
-    position: relative;
-    display: inline-block;
+  .mode-bar {
+    display: inline-flex;
+    gap: 2px;
+    padding: 1px;
+    border: 1px solid var(--shell-border, #444);
+    border-radius: 3px;
   }
 
   .mode-btn {
     background: none;
-    border: 1px solid var(--shell-border, #444);
-    color: var(--shell-fg, #ddd);
-    padding: 2px 6px;
-    border-radius: 3px;
+    border: none;
+    color: var(--shell-fg-dim, var(--shell-fg-muted, #888));
+    padding: 2px 8px;
+    border-radius: 2px;
     cursor: pointer;
     font-size: 0.85em;
+    line-height: 1.4;
   }
 
   .mode-btn:hover {
-    background: var(--shell-hover, #222);
-  }
-
-  .mode-menu {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    margin: 2px 0 0;
-    padding: 0;
-    list-style: none;
-    background: var(--shell-bg, #111);
-    border: 1px solid var(--shell-border, #444);
-    border-radius: 3px;
-    z-index: 100;
-    min-width: 100%;
-  }
-
-  .mode-option {
-    display: block;
-    width: 100%;
-    background: none;
-    border: none;
+    background: var(--shell-hover, color-mix(in srgb, var(--shell-fg, #ddd) 10%, transparent));
     color: var(--shell-fg, #ddd);
-    padding: 4px 10px;
-    text-align: left;
-    cursor: pointer;
-    font-size: 0.85em;
   }
 
-  .mode-option:hover,
-  .mode-option.active {
-    background: var(--shell-hover, #222);
+  .mode-btn.active {
+    background: var(--shell-accent, #7c7cf0);
+    color: var(--shell-bg, #1a1a2e);
   }
 
   .mode-label {
     font-size: 0.85em;
-    color: var(--shell-fg-dim, #888);
+    color: var(--shell-fg-dim, var(--shell-fg-muted, #888));
   }
 </style>

package/dist/shell-shard/verbs/index.js

@@ -7,7 +7,7 @@ import { clearVerb } from './clear';
 import { historyVerb } from './history';
 import { appsVerb, appVerb } from './apps';
 import { shardsVerb } from './shards';
-import { viewsVerb, openVerb, closeVerb } from './views';
+import { viewsVerb, openVerb, closeVerb, popoutVerb, dockVerb } from './views';
 import { zonesVerb, zoneVerb } from './zones';
 import { pwdVerb, cdVerb, whoamiVerb } from './session';
 import { envVerb } from './env';
@@ -23,6 +23,8 @@ export function registerV1Verbs(ctx) {
     ctx.registerVerb(viewsVerb);
     ctx.registerVerb(openVerb);
     ctx.registerVerb(closeVerb);
+    ctx.registerVerb(popoutVerb);
+    ctx.registerVerb(dockVerb);
     ctx.registerVerb(zonesVerb);
     ctx.registerVerb(zoneVerb);
     ctx.registerVerb(pwdVerb);

package/dist/shell-shard/verbs/views.d.ts

@@ -1,4 +1,6 @@
 import type { Verb } from '../../verbs/types';
 export declare const viewsVerb: Verb;
 export declare const openVerb: Verb;
+export declare const popoutVerb: Verb;
+export declare const dockVerb: Verb;
 export declare const closeVerb: Verb;