sh3-core 0.8.1 → 0.9.0

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.peerRole || row.peerId ? ` \u00B7 Peer: ${row.peerRole ?? '—'}${row.peerId ? ` (${row.peerId})` : ''}` : ''}
+            </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/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/version.d.ts

@@ -1,2 +1,2 @@
 /** Auto-generated from package.json — do not edit manually. */
-export declare const VERSION = "0.8.1";
+export declare const VERSION = "0.9.0";

package/dist/version.js

@@ -1,2 +1,2 @@
 /** Auto-generated from package.json — do not edit manually. */
-export const VERSION = '0.8.1';
+export const VERSION = '0.9.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh3-core",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "type": "module",
   "files": [
     "dist"

package/dist/documents/journal-hook.d.ts

@@ -1,6 +0,0 @@
-import type { JournalEntry } from './sync/types';
-type Appender = (entry: Omit<JournalEntry, 'seq' | 'ts'>) => Promise<void>;
-export declare function setJournalAppender(fn: Appender): void;
-export declare function clearJournalAppender(): void;
-export declare function notifyJournal(entry: Omit<JournalEntry, 'seq' | 'ts'>): Promise<void>;
-export {};

package/dist/documents/journal-hook.js

@@ -1,16 +0,0 @@
-/*
- * Journal appender hook — lets the sync engine subscribe to regular
- * shard writes/deletes without creating an import cycle between the
- * document handle and the sync subsystem.
- */
-let appender = null;
-export function setJournalAppender(fn) {
-    appender = fn;
-}
-export function clearJournalAppender() {
-    appender = null;
-}
-export async function notifyJournal(entry) {
-    if (appender)
-        await appender(entry);
-}

package/dist/documents/sync/activate-integration.test.js

@@ -1,37 +0,0 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import { MemoryDocumentBackend } from '../backends';
-import { __setDocumentBackend, __setTenantId } from '../config';
-import { __resetShardRegistryForTest, registerShard, activateShard } from '../../shards/activate.svelte';
-import { __resetSyncBundlesForTest } from './singleton';
-import { PERMISSION_DOCUMENTS_SYNC } from './types';
-describe('ctx.sync() gating', () => {
-    beforeEach(() => {
-        __resetShardRegistryForTest();
-        __resetSyncBundlesForTest();
-        __setDocumentBackend(new MemoryDocumentBackend());
-        __setTenantId('tenant-a');
-    });
-    it('is undefined without documents:sync permission', async () => {
-        let captured;
-        const shard = {
-            manifest: { id: 's-none', version: '0', views: [] },
-            activate: async (ctx) => { captured = ctx; },
-        };
-        registerShard(shard);
-        await activateShard('s-none');
-        expect(captured.sync).toBeUndefined();
-    });
-    it('is a function when documents:sync is declared', async () => {
-        let captured;
-        const shard = {
-            manifest: { id: 's-sync', version: '0', views: [], permissions: [PERMISSION_DOCUMENTS_SYNC] },
-            activate: async (ctx) => { captured = ctx; },
-        };
-        registerShard(shard);
-        await activateShard('s-sync');
-        expect(typeof captured.sync).toBe('function');
-        const h = captured.sync();
-        expect(h.connectorId).toBe('s-sync');
-        expect(await h.grantedScopes()).toEqual([]);
-    });
-});

package/dist/documents/sync/components/DocumentSyncExplorer.svelte

@@ -1,99 +0,0 @@
-<script lang="ts">
-  import { onMount } from 'svelte';
-  import SyncGrantPicker from './SyncGrantPicker.svelte';
-  import { createSyncRegistry, type SyncRegistry } from '../registry';
-  import { getDocumentBackend, getTenantId } from '../../config';
-  import type { GrantRecord, SyncScope, ConflictResolution } from '../types';
-
-  interface Props {
-    /** Optional connector-specific filter; if omitted, shows everything. */
-    connectorId?: string;
-    /** Shard IDs whose conflict artifacts should be listed. */
-    conflictShardIds?: string[];
-    /** Pending grant request, if any — embeds the picker when set. */
-    pendingRequest?: { connectorId: string; scope: SyncScope };
-  }
-
-  let { connectorId, conflictShardIds = [], pendingRequest }: Props = $props();
-
-  let registry: SyncRegistry | null = $state(null);
-  let grants: GrantRecord[] = $state([]);
-  let conflicts: ConflictResolution[] = $state([]);
-
-  async function refresh() {
-    if (!registry) return;
-    grants = await registry.list(connectorId);
-    const all: ConflictResolution[] = [];
-    for (const shardId of conflictShardIds) {
-      all.push(...await registry.listConflicts(shardId));
-    }
-    conflicts = all;
-  }
-
-  onMount(async () => {
-    registry = createSyncRegistry(getDocumentBackend(), getTenantId());
-    await refresh();
-  });
-
-  async function revoke(record: GrantRecord) {
-    if (!registry) return;
-    await registry.revoke(record.connectorId, record.scope);
-    await refresh();
-  }
-
-  function describeScope(s: SyncScope): string {
-    if (s.kind === 'tenant') return 'entire tenant';
-    if (s.kind === 'shard') return `shard:${s.shardId}`;
-    return `shard:${s.shardId}/${s.prefix}`;
-  }
-</script>
-
-<section class="document-sync-explorer" part="container">
-  <h2 part="title">Document Sync</h2>
-
-  {#if pendingRequest}
-    <SyncGrantPicker
-      connectorId={pendingRequest.connectorId}
-      scope={pendingRequest.scope}
-      onGranted={refresh}
-    />
-  {/if}
-
-  <h3 part="subtitle">Granted scopes</h3>
-  {#if grants.length === 0}
-    <p part="empty">No scopes granted yet.</p>
-  {:else}
-    <ul part="grants">
-      {#each grants as g}
-        <li>
-          <span part="grant-connector">{g.connectorId}</span>
-          <span part="grant-scope">{describeScope(g.scope)}</span>
-          <button type="button" onclick={() => revoke(g)} part="revoke">Revoke</button>
-        </li>
-      {/each}
-    </ul>
-  {/if}
-
-  <h3 part="subtitle">Conflicts</h3>
-  {#if conflicts.length === 0}
-    <p part="empty">No active conflicts.</p>
-  {:else}
-    <ul part="conflicts">
-      {#each conflicts as c}
-        <li>
-          <code part="conflict-path">{c.shardId}:{c.path}</code>
-          <small part="conflict-artifact">{c.conflictArtifactPath}</small>
-        </li>
-      {/each}
-    </ul>
-  {/if}
-</section>
-
-<style>
-  .document-sync-explorer {
-    display: grid;
-    gap: 0.75rem;
-  }
-  ul { list-style: none; padding: 0; margin: 0; }
-  li { display: flex; gap: 0.5rem; align-items: center; }
-</style>

package/dist/documents/sync/components/DocumentSyncExplorer.svelte.d.ts

@@ -1,15 +0,0 @@
-import type { SyncScope } from '../types';
-interface Props {
-    /** Optional connector-specific filter; if omitted, shows everything. */
-    connectorId?: string;
-    /** Shard IDs whose conflict artifacts should be listed. */
-    conflictShardIds?: string[];
-    /** Pending grant request, if any — embeds the picker when set. */
-    pendingRequest?: {
-        connectorId: string;
-        scope: SyncScope;
-    };
-}
-declare const DocumentSyncExplorer: import("svelte").Component<Props, {}, "">;
-type DocumentSyncExplorer = ReturnType<typeof DocumentSyncExplorer>;
-export default DocumentSyncExplorer;

package/dist/documents/sync/components/SyncGrantPicker.svelte

@@ -1,70 +0,0 @@
-<script lang="ts">
-  import { getDocumentBackend, getTenantId } from '../../config';
-  import { __grantInternal } from '../registry';
-  import type { SyncScope } from '../types';
-
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    connectorId: string;
-    scope: SyncScope;
-    onGranted?: () => void;
-    onCancel?: () => void;
-    rationale?: Snippet;
-  }
-
-  let { connectorId, scope, onGranted, onCancel, rationale }: Props = $props();
-
-  let pending = $state(false);
-  let error = $state<string | null>(null);
-
-  function describe(s: SyncScope): string {
-    switch (s.kind) {
-      case 'tenant': return 'all your documents across every shard';
-      case 'shard':  return `all documents for shard "${s.shardId}"`;
-      case 'path':   return `documents under "${s.prefix}" in shard "${s.shardId}"`;
-    }
-  }
-
-  async function confirm() {
-    pending = true;
-    error = null;
-    try {
-      await __grantInternal(getDocumentBackend(), getTenantId(), connectorId, scope);
-      onGranted?.();
-    } catch (e) {
-      error = e instanceof Error ? e.message : String(e);
-    } finally {
-      pending = false;
-    }
-  }
-</script>
-
-<section class="sync-grant-picker" part="container">
-  <header part="header">
-    <h3 part="title">Grant sync access</h3>
-  </header>
-  <p part="summary">
-    <strong>{connectorId}</strong> is requesting access to {describe(scope)}.
-  </p>
-  {#if rationale}{@render rationale()}{/if}
-  {#if error}
-    <p class="error" part="error">{error}</p>
-  {/if}
-  <footer part="actions">
-    <button type="button" disabled={pending} onclick={() => onCancel?.()} part="cancel">Cancel</button>
-    <button type="button" disabled={pending} onclick={confirm} part="confirm">Grant</button>
-  </footer>
-</section>
-
-<style>
-  .sync-grant-picker {
-    display: grid;
-    gap: 0.75rem;
-    padding: 1rem;
-    border: 1px solid var(--sh3-border, #444);
-    border-radius: 6px;
-  }
-  .error { color: var(--sh3-error, #c00); }
-  footer { display: flex; gap: 0.5rem; justify-content: flex-end; }
-</style>

package/dist/documents/sync/components/SyncGrantPicker.svelte.d.ts

@@ -1,12 +0,0 @@
-import type { SyncScope } from '../types';
-import type { Snippet } from 'svelte';
-interface Props {
-    connectorId: string;
-    scope: SyncScope;
-    onGranted?: () => void;
-    onCancel?: () => void;
-    rationale?: Snippet;
-}
-declare const SyncGrantPicker: import("svelte").Component<Props, {}, "">;
-type SyncGrantPicker = ReturnType<typeof SyncGrantPicker>;
-export default SyncGrantPicker;

package/dist/documents/sync/conflicts.d.ts

@@ -1,30 +0,0 @@
-import type { DocumentBackend } from '../types';
-import type { ConflictPolicy, ConflictResolution } from './types';
-interface ConflictInput {
-    connectorId: string;
-    shardId: string;
-    path: string;
-    localHash: string;
-    remoteHash: string;
-    remoteContent?: string | ArrayBuffer;
-    baseHash?: string;
-}
-export type ConflictAction = {
-    action: 'apply-remote';
-    asPath?: string;
-} | {
-    action: 'skip';
-} | {
-    action: 'conflict';
-    resolution: ConflictResolution;
-};
-export declare class ConflictManager {
-    private backend;
-    private tenantId;
-    constructor(backend: DocumentBackend, tenantId: string);
-    resolve(policy: ConflictPolicy, input: ConflictInput): Promise<ConflictAction>;
-    getBaseHash(connectorId: string, shardId: string, path: string): Promise<string | null>;
-    setBaseHash(connectorId: string, shardId: string, path: string, hash: string): Promise<void>;
-    listConflicts(shardId: string): Promise<ConflictResolution[]>;
-}
-export {};