@reddb-io/ui 0.1.1

package/src/lib/StatusBar.svelte

@@ -0,0 +1,163 @@
+<script lang="ts">
+  import { useRouter } from './router.svelte'
+  import { connection } from './connections.svelte'
+  import { pendingChanges } from './pending-changes.svelte'
+  import { ArrowRight, FilePenLine, Lock } from 'lucide-svelte'
+  import { readBuildInfo } from './build-info'
+
+  const build = readBuildInfo()
+
+  const router = useRouter()
+  const pendingCount = $derived(pendingChanges.count)
+
+  // Read-only badge (#23) — driven solely by the server's reported status.
+  const readOnly = $derived(connection.readOnly)
+  const readOnlyReason = $derived(connection.readOnlyReason)
+
+  function openPending() {
+    window.dispatchEvent(new CustomEvent('red:open-pending-changes'))
+  }
+
+  const connected = $derived(connection.connected)
+  const role = $derived<'primary' | 'replica' | 'standalone' | 'embedded'>(
+    (connection.probe.replication?.role as 'primary' | 'replica' | 'standalone' | undefined)
+      ?? (connection.active?.role as 'primary' | 'replica' | 'embedded' | undefined)
+      ?? 'standalone'
+  )
+
+  const roleDotColor = $derived(
+    role === 'primary'  ? 'var(--color-role-primary)' :
+    role === 'replica'  ? 'var(--color-role-replica)' :
+    role === 'embedded' ? 'var(--color-role-embedded)' :
+                          'var(--color-fg-3)'
+  )
+
+  const wal = $derived(
+    connection.probe.replication?.wal_lsn
+      ?? connection.probe.replication?.last_applied_lsn
+  )
+
+  const lag = $derived.by(() => {
+    const r = connection.probe.replication
+    if (!r || role !== 'replica') return undefined
+    if (r.last_seen_primary_lsn === undefined || r.last_applied_lsn === undefined) return undefined
+    return Math.max(0, r.last_seen_primary_lsn - r.last_applied_lsn)
+  })
+
+  function openConnect() {
+    window.dispatchEvent(new CustomEvent('red:open-connect'))
+  }
+
+  function openCluster(e: MouseEvent) {
+    const target = e.target as HTMLElement | null
+    if (target?.closest('button, a, [data-no-nav]')) return
+    router.go({ view: 'cluster' })
+  }
+
+  function onKey(e: KeyboardEvent) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault()
+      router.go({ view: 'cluster' })
+    }
+  }
+</script>
+
+<div
+  class="h-8 flex items-stretch border-b border-line-1 bg-bg-1/60 text-[11px] font-mono select-none"
+  role="status"
+  aria-label="Connection status"
+>
+  <div
+    role="button"
+    tabindex="0"
+    onclick={openCluster}
+    onkeydown={onKey}
+    title="Open cluster overview"
+    class="flex-1 flex items-center gap-3 px-3 cursor-pointer hover:bg-bg-2/40 transition-colors min-w-0"
+  >
+    {#if connected}
+      <span class="inline-flex items-center gap-1.5 shrink-0">
+        <span
+          class="w-1.5 h-1.5 rounded-full"
+          style:background-color={roleDotColor}
+        ></span>
+        <span class="text-fg-1 uppercase tracking-wider text-[10px]">{role}</span>
+      </span>
+
+      <span class="text-fg-3">·</span>
+      <span class="text-fg-1 truncate">{connection.active.label}</span>
+
+      {#if connection.probe.rtt_ms !== undefined}
+        <span class="text-fg-3">·</span>
+        <span class="text-fg-2">
+          <span class="text-fg-3">rtt</span>
+          <span class="text-fg-1 tabular-nums">{connection.probe.rtt_ms}</span><span class="text-fg-3">ms</span>
+        </span>
+      {/if}
+
+      {#if role === 'replica' && lag !== undefined}
+        <span class="text-fg-3">·</span>
+        <span class="text-fg-2">
+          <span class="text-fg-3">lag</span>
+          <span class:text-warn={(lag ?? 0) > 0} class="text-fg-1 tabular-nums">{lag}</span>
+        </span>
+      {/if}
+
+      {#if wal !== undefined}
+        <span class="text-fg-3">·</span>
+        <span class="text-fg-2">
+          <span class="text-fg-3">lsn</span>
+          <span class="text-fg-1 tabular-nums">{wal}</span>
+        </span>
+      {/if}
+
+      {#if readOnly}
+        <span class="text-fg-3">·</span>
+        <span
+          class="inline-flex items-center gap-1 shrink-0 text-warn"
+          title={readOnlyReason ?? 'The server is open read-only — mutations are disabled.'}
+        >
+          <Lock class="size-3" />
+          <span class="uppercase tracking-wider text-[10px]">read-only — file in use</span>
+        </span>
+      {/if}
+    {:else}
+      <span class="inline-flex items-center gap-1.5 shrink-0">
+        <span class="w-1.5 h-1.5 rounded-full bg-fg-3"></span>
+        <span class="text-fg-3">Not connected</span>
+      </span>
+    {/if}
+  </div>
+
+  {#if pendingCount > 0}
+    <button
+      type="button"
+      onclick={openPending}
+      data-no-nav
+      aria-label={`${pendingCount} pending changes`}
+      class="inline-flex items-center gap-1.5 px-3 text-accent hover:bg-bg-2/60 transition-colors cursor-pointer bg-transparent border-0 border-l border-line-1"
+    >
+      <FilePenLine class="size-3" />
+      <span class="tabular-nums">Pending changes ({pendingCount})</span>
+    </button>
+  {/if}
+
+  {#if !connected}
+    <button
+      type="button"
+      onclick={openConnect}
+      data-no-nav
+      class="inline-flex items-center gap-1 px-3 text-fg-2 hover:text-fg-0 hover:bg-bg-2/60 transition-colors cursor-pointer bg-transparent border-0 border-l border-line-1"
+    >
+      <span>Connect</span>
+      <ArrowRight class="size-3" />
+    </button>
+  {/if}
+
+  <span
+    class="inline-flex items-center px-3 shrink-0 font-mono text-fg-3 border-l border-line-1 select-none"
+    title={`red-ui ${build.version} · ${build.gitSha} · built ${build.buildTime}`}
+  >
+    v{build.version}
+  </span>
+</div>

package/src/lib/SubNav.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import { useRouter } from './router.svelte'
+
+  interface Item { href: string; label: string; hint?: string }
+  interface Props { items: Item[]; title?: string }
+  let { items, title }: Props = $props()
+
+  const router = useRouter()
+</script>
+
+<nav class="subnav">
+  {#if title}<span class="title">{title}</span>{/if}
+  {#each items as it}
+    <a href={it.href} class:active={router.path === it.href || router.path.startsWith(it.href + '/')}>
+      {it.label}
+      {#if it.hint}<span class="hint">{it.hint}</span>{/if}
+    </a>
+  {/each}
+</nav>
+
+<style>
+  .subnav {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    padding: 8px 14px;
+    background: var(--bg-1);
+    border-bottom: 1px solid var(--line-1);
+    overflow-x: auto;
+  }
+  .title {
+    font-family: var(--font-mono);
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--fg-3);
+    margin-right: 12px;
+  }
+  a {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 10px;
+    font-size: 12px;
+    color: var(--fg-2);
+    text-decoration: none;
+    border-radius: var(--r-md);
+    white-space: nowrap;
+    transition: background 120ms var(--ease-out), color 120ms var(--ease-out);
+  }
+  a:hover { background: var(--bg-2); color: var(--fg-1); }
+  a.active { background: var(--bg-2); color: var(--fg-0); }
+  a.active::after {
+    content: '';
+    position: relative;
+    width: 4px; height: 4px;
+    border-radius: 9999px;
+    background: var(--accent);
+    margin-left: 2px;
+  }
+  .hint { color: var(--fg-3); font-family: var(--font-mono); font-size: 10px; }
+</style>

package/src/lib/Topbar.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+  import { Kbd } from '@reddb-io/ui-kit'
+  import ConnectDropdown from './ConnectDropdown.svelte'
+  import ActivityIndicator from './ActivityIndicator.svelte'
+  import { Search, Sun, Moon, Network, Database, FileCode2, Shield } from 'lucide-svelte'
+  import { theme } from './theme.svelte'
+  import { useRouter } from './router.svelte'
+
+  let { showConnect = true }: { showConnect?: boolean } = $props()
+
+  const router = useRouter()
+
+  function openPalette() {
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true, ctrlKey: true, bubbles: true }))
+  }
+
+  const onQuery = $derived(router.view === 'query')
+  const onCollections = $derived(router.view === 'collections')
+  const onCluster = $derived(router.view === 'cluster')
+  const onSecurity = $derived(router.view === 'security')
+</script>
+
+<header class="h-11 flex items-center justify-between px-3.5 bg-bg-1/80 backdrop-blur-md border-b border-line-1 relative z-10">
+  <div class="flex items-center gap-2.5">
+    <a
+      href={router.href({ view: 'collections' })}
+      onclick={(e) => router.go({ view: 'collections' }, e)}
+      class="font-mono font-semibold text-[13px] tracking-tight text-fg-0 no-underline hover:text-accent transition-colors"
+    >
+      red<span class="text-accent mx-px">·</span>ui
+    </a>
+    {#if showConnect}
+      <div class="w-px h-[18px] bg-line-2"></div>
+      <ConnectDropdown />
+      <div class="w-px h-[18px] bg-line-2 ml-1"></div>
+    {:else}
+      <div class="w-px h-[18px] bg-line-2"></div>
+    {/if}
+    <nav class="flex items-center gap-0.5">
+      <a
+        href={router.href({ view: 'query' })}
+        onclick={(e) => router.go({ view: 'query' }, e)}
+        title="Query"
+        aria-current={onQuery ? 'page' : undefined}
+        class={[
+          'inline-flex items-center gap-1.5 h-7 px-2 rounded-md text-xs no-underline transition-colors',
+          onQuery ? 'bg-bg-2 text-fg-0' : 'text-fg-2 hover:text-fg-0 hover:bg-bg-2',
+        ].join(' ')}
+      >
+        <FileCode2 class="size-3.5" />
+        <span>Query</span>
+      </a>
+      <a
+        href={router.href({ view: 'collections' })}
+        onclick={(e) => router.go({ view: 'collections' }, e)}
+        title="Collections"
+        aria-current={onCollections ? 'page' : undefined}
+        class={[
+          'inline-flex items-center gap-1.5 h-7 px-2 rounded-md text-xs no-underline transition-colors',
+          onCollections ? 'bg-bg-2 text-fg-0' : 'text-fg-2 hover:text-fg-0 hover:bg-bg-2',
+        ].join(' ')}
+      >
+        <Database class="size-3.5" />
+        <span>Collections</span>
+      </a>
+      <a
+        href={router.href({ view: 'cluster' })}
+        onclick={(e) => router.go({ view: 'cluster' }, e)}
+        title="Cluster topology"
+        aria-current={onCluster ? 'page' : undefined}
+        class={[
+          'inline-flex items-center gap-1.5 h-7 px-2 rounded-md text-xs no-underline transition-colors',
+          onCluster ? 'bg-bg-2 text-fg-0' : 'text-fg-2 hover:text-fg-0 hover:bg-bg-2',
+        ].join(' ')}
+      >
+        <Network class="size-3.5" />
+        <span>Cluster</span>
+      </a>
+      <a
+        href={router.href({ view: 'security' })}
+        onclick={(e) => router.go({ view: 'security' }, e)}
+        title="Security"
+        aria-current={onSecurity ? 'page' : undefined}
+        class={[
+          'inline-flex items-center gap-1.5 h-7 px-2 rounded-md text-xs no-underline transition-colors',
+          onSecurity ? 'bg-bg-2 text-fg-0' : 'text-fg-2 hover:text-fg-0 hover:bg-bg-2',
+        ].join(' ')}
+      >
+        <Shield class="size-3.5" />
+        <span>Security</span>
+      </a>
+    </nav>
+  </div>
+
+  <div class="flex items-center gap-2.5">
+    <ActivityIndicator />
+    <button
+      type="button"
+      onclick={() => theme.toggle()}
+      title={theme.current === 'dark' ? 'Switch to light theme' : 'Switch to dark theme'}
+      aria-label={theme.current === 'dark' ? 'Switch to light theme' : 'Switch to dark theme'}
+      class="inline-flex items-center justify-center size-7 bg-bg-2 border border-line-2 rounded-md text-fg-2 cursor-pointer transition-colors hover:border-line-3 hover:text-fg-0"
+    >
+      {#if theme.current === 'dark'}
+        <Sun class="size-3.5" />
+      {:else}
+        <Moon class="size-3.5" />
+      {/if}
+    </button>
+    <button
+      onclick={openPalette}
+      class="inline-flex items-center gap-2 h-7 pl-2.5 pr-2 bg-bg-2 border border-line-2 rounded-md text-fg-2 cursor-pointer text-xs transition-colors hover:border-line-3 hover:text-fg-1"
+    >
+      <Search class="size-3.5 text-fg-3" />
+      <span>Search or run</span>
+      <span class="inline-flex gap-0.5 ml-1"><Kbd>⌘</Kbd><Kbd>K</Kbd></span>
+    </button>
+  </div>
+</header>

package/src/lib/Workspace.svelte

@@ -0,0 +1,247 @@
+<script lang="ts">
+  // The Mountable Root (ADR-0001). Owns the app chrome and switches between
+  // its top-level views purely from an injected `Router` — it never reads or
+  // writes the URL itself. Mounted standalone it falls back to an in-memory
+  // state router, so a host can embed it without surrendering `window.history`.
+  // The SvelteKit Surface wraps this same component with a Kit-backed router.
+  import { onMount, untrack } from 'svelte'
+  import Splash from './Splash.svelte'
+  import Topbar from './Topbar.svelte'
+  import StatusBar from './StatusBar.svelte'
+  import CommandPalette from './CommandPalette.svelte'
+  import ShortcutOverlay from './ShortcutOverlay.svelte'
+  import MasterPasswordDialog from './MasterPasswordDialog.svelte'
+  import PendingChangesPanel from './PendingChangesPanel.svelte'
+  import CollectionsView from './CollectionsView.svelte'
+  import ClusterView from './ClusterView.svelte'
+  import SecurityView from './SecurityView.svelte'
+  import { connection, setConnectionProvider } from './connections.svelte'
+  import { runQueryPreferStream, type ConnectionProvider } from '#reddb'
+  import { theme, type Theme } from './theme.svelte'
+  import { secureStore } from './secureStore.svelte'
+  import { pendingChanges, buildUpdateSql, type CommitOutcome } from './pending-changes.svelte'
+  import { queryTabs } from './query-tabs.svelte'
+  import { tabs } from './tabs.svelte'
+  import { detectCapability } from './capability'
+  import { defaultSubpage } from './collection-pages'
+  import { createStateRouter, pathToLocation, setRouter, type Router, type View } from './router.svelte'
+
+  let {
+    router: injectedRouter,
+    connectionProvider,
+    showConnect = true,
+    initialRoute,
+    themeTarget,
+    persistTheme = true,
+    initialTheme,
+  }: {
+    router?: Router
+    connectionProvider?: ConnectionProvider
+    showConnect?: boolean
+    initialRoute?: string
+    themeTarget?: HTMLElement | null
+    persistTheme?: boolean
+    initialTheme?: Theme
+  } = $props()
+
+  // Provide the router to every descendant view. Standalone (no host router)
+  // we mint a state router that keeps navigation entirely in memory. The
+  // router is fixed for the lifetime of the mount, so reading the prop once
+  // here is intentional.
+  // svelte-ignore state_referenced_locally
+  const router = setRouter(injectedRouter ?? createStateRouter())
+
+  // Host-injected connection (ADR-0001 embed Surface): when the embedder
+  // hands in a provider (e.g. an InjectedClientProvider wrapping its own
+  // authenticated client), wire it as the Core's connection seam and connect
+  // immediately, so the Core renders connected without the Connect flow. The
+  // provider is fixed for the lifetime of the mount.
+  // svelte-ignore state_referenced_locally
+  if (connectionProvider) {
+    setConnectionProvider(connectionProvider)
+  }
+
+  function navigateToBootRoute(route: string) {
+    const legacyView = route as View
+    if (legacyView === 'query' || legacyView === 'collections' || legacyView === 'cluster' || legacyView === 'security') {
+      router.go({ view: legacyView }, undefined, true)
+      return
+    }
+
+    const loc = pathToLocation(route.startsWith('/') ? route : `/${route}`)
+    if (loc.collection) {
+      router.go({ view: 'collection', collection: loc.collection, subpage: loc.subpage ?? 'table' }, undefined, true)
+    } else {
+      router.go({ view: loc.view }, undefined, true)
+    }
+  }
+
+  onMount(() => {
+    if (connectionProvider) {
+      // Host-injected provider (#33): adopt its authenticated connection.
+      void connection.adoptInjected().then(() => {
+        if (initialRoute) navigateToBootRoute(initialRoute)
+      })
+    } else {
+      // Connection Bootstrap: one boot resolver handles Tauri IPC, host globals,
+      // the Open Contract URL/hash, and finally persisted standalone state.
+      void connection.bootstrap().then((route) => {
+        if (route) navigateToBootRoute(route)
+      })
+    }
+  })
+
+  let booted = $state(false)
+  let pendingOpen = $state(false)
+
+  onMount(() => {
+    const handler = () => (pendingOpen = true)
+    window.addEventListener('red:open-pending-changes', handler as EventListener)
+    return () => window.removeEventListener('red:open-pending-changes', handler as EventListener)
+  })
+
+  // Wire the commit executor to the active client. Re-binds whenever the
+  // underlying client changes (connect / disconnect / switch).
+  $effect(() => {
+    const client = connection.client
+    if (!client) {
+      pendingChanges.setExecutor(null)
+      queryTabs.setExecutor(null)
+      return
+    }
+    queryTabs.setExecutor((sql) => runQueryPreferStream(client, sql))
+    pendingChanges.setExecutor(async (changes) =>
+      Promise.all(
+        changes.map(async (c): Promise<CommitOutcome> => {
+          try {
+            const r = await client.query(buildUpdateSql(c))
+            if (!r.ok) return { id: c.id, ok: false, error: r.error ?? 'query failed' }
+            return { id: c.id, ok: true }
+          } catch (e) {
+            return { id: c.id, ok: false, error: (e as Error).message }
+          }
+        }),
+      ),
+    )
+  })
+
+  const REFRESH_MS = 5000
+
+  // The inline script in app.html has already set data-theme on <html>;
+  // init() syncs the store's reactive state with localStorage so toggles
+  // start from the persisted value rather than the in-memory default.
+  // svelte-ignore state_referenced_locally
+  theme.init({ target: themeTarget ?? null, persist: persistTheme, initial: initialTheme })
+
+  // Hard lock gate: while the secure store is locked, no automatic network
+  // traffic should fire — probing the configured URL would leak its existence
+  // and shape. Additionally (#21, acceptance #4) no traffic fires until a real
+  // target is resolved (URL/boot params, a stored pin, or an explicit connect),
+  // so a credential-less Surface that boots straight to data never probes a
+  // default it was never pointed at.
+  $effect(() => {
+    if (secureStore.locked || !connection.targetResolved) return
+    connection.refresh()
+    const id = setInterval(() => connection.refresh(), REFRESH_MS)
+    return () => clearInterval(id)
+  })
+
+  // Once the secure store binds (Tauri at boot / web after unlock), hydrate
+  // history URLs from the encrypted store so the dropdown can reconnect.
+  $effect(() => {
+    if (secureStore.store) connection.hydrateUrls()
+  })
+
+  function openNewQuery() {
+    const label = queryTabs.nextLabel()
+    const tab = tabs.open({ kind: 'query', label, key: label }, true)
+    queryTabs.ensure(tab.id)
+  }
+
+  // Open (or focus) the tab for the collection the router points at, detecting
+  // its capability lazily. When the router hasn't pinned a subpage yet (a bare
+  // `/c/<name>` deep link), settle on the capability's default subpage — the
+  // same redirect the old per-route page did, now router-agnostic.
+  async function syncCollectionTab(name: string, subpage: string | null) {
+    const existing = tabs.tabs.find((t) => t.kind === 'collection' && t.key === name)
+    if (existing) {
+      tabs.open({
+        kind: 'collection',
+        label: name,
+        key: name,
+        capability: existing.capability,
+        overrideCapability: existing.overrideCapability,
+        showSystemColumns: existing.showSystemColumns,
+        subpage: subpage ?? existing.subpage,
+      })
+    } else {
+      tabs.open({ kind: 'collection', label: name, key: name, capability: 'table', subpage: subpage ?? undefined })
+    }
+
+    const client = connection.client
+    if (!client) {
+      if (!subpage) router.go({ view: 'collection', collection: name, subpage: 'table' }, undefined, true)
+      return
+    }
+    try {
+      const cap = await detectCapability(client, name)
+      const t = tabs.tabs.find((x) => x.kind === 'collection' && x.key === name)
+      const resolved = subpage ?? defaultSubpage(cap)
+      if (t) tabs.tabs = tabs.tabs.map((x) => (x === t ? { ...x, capability: cap, subpage: resolved } : x))
+      if (!subpage) router.go({ view: 'collection', collection: name, subpage: resolved }, undefined, true)
+    } catch {
+      // Detection failure is non-fatal — table stays the baseline.
+      if (!subpage) router.go({ view: 'collection', collection: name, subpage: 'table' }, undefined, true)
+    }
+  }
+
+  // Bridge the router location to tab state. Works identically whether the
+  // location comes from in-memory state or the SvelteKit URL.
+  let lastView: View | null = null
+  let lastCollectionKey: string | null = null
+  $effect(() => {
+    const view = router.view
+    const collection = router.collection
+    const subpage = router.subpage
+
+    if (view === 'collections' && collection) {
+      const key = `${collection}::${subpage ?? ''}`
+      if (key !== lastCollectionKey) {
+        lastCollectionKey = key
+        untrack(() => void syncCollectionTab(collection, subpage))
+      }
+    } else {
+      lastCollectionKey = null
+    }
+
+    // Entering the query view mints a fresh query tab, matching the old
+    // `/query` route. Guarded on the transition so reactive ticks don't
+    // spawn duplicate tabs.
+    if (view === 'query' && lastView !== 'query') {
+      untrack(() => openNewQuery())
+    }
+    lastView = view
+  })
+</script>
+
+{#if !booted}
+  <Splash onDone={() => (booted = true)} />
+{:else}
+  <div class="app grid grid-rows-[44px_32px_1fr] h-screen">
+    <Topbar showConnect={showConnect} />
+    <StatusBar />
+    <main class="relative overflow-hidden z-[1]">
+      {#if router.view === 'cluster'}
+        <ClusterView />
+      {:else if router.view === 'security'}
+        <SecurityView />
+      {:else}
+        <CollectionsView />
+      {/if}
+    </main>
+    <CommandPalette />
+    <ShortcutOverlay />
+    <MasterPasswordDialog />
+    <PendingChangesPanel open={pendingOpen} onClose={() => (pendingOpen = false)} />
+  </div>
+{/if}

package/src/lib/activity.svelte.ts

@@ -0,0 +1,91 @@
+// Global activity tracker. Every reddb HTTP call should flow through
+// `activity.track(label, op)` so the UI can show a single source of
+// truth for "what's happening right now". Two roles:
+//
+//   - Counter of in-flight requests (drives the topbar pulse).
+//   - Rolling log of the last 20 labels with duration + outcome
+//     (drives the activity panel).
+//
+// Labels should describe the *intent* of the call ("schema · collections",
+// "tales · SELECT", "grimm_graph · edges + nodes"), not the raw URL —
+// that's what makes the panel readable when scanning during an incident.
+//
+// All $state reads/writes inside `track` are wrapped in `untrack()`. Why:
+// callers commonly invoke `track()` from inside a `$effect` (e.g. the
+// layout's connection.refresh on unlock). If we read+write `log`/`inflight`
+// without untrack, the effect would track those as dependencies and our
+// own writes would re-fire it — infinite loop (`effect_update_depth_exceeded`).
+
+import { untrack } from 'svelte'
+
+export interface ActivityEntry {
+  id: number
+  label: string
+  startedAt: number
+  durationMs: number | null
+  status: 'pending' | 'ok' | 'error'
+  error?: string
+}
+
+const MAX_LOG = 20
+
+class ActivityStore {
+  inflight = $state(0)
+  log = $state<ActivityEntry[]>([])
+  private nextId = 1
+
+  async track<T>(label: string, op: () => Promise<T>): Promise<T> {
+    const id = this.nextId++
+    const entry: ActivityEntry = {
+      id,
+      label,
+      startedAt: Date.now(),
+      durationMs: null,
+      status: 'pending',
+    }
+    untrack(() => {
+      this.log = [entry, ...this.log].slice(0, MAX_LOG)
+      this.inflight += 1
+    })
+    try {
+      const result = await op()
+      untrack(() =>
+        this.update(id, { durationMs: Date.now() - entry.startedAt, status: 'ok' }),
+      )
+      return result
+    } catch (err) {
+      untrack(() =>
+        this.update(id, {
+          durationMs: Date.now() - entry.startedAt,
+          status: 'error',
+          error: (err as Error).message,
+        }),
+      )
+      throw err
+    } finally {
+      untrack(() => {
+        this.inflight = Math.max(0, this.inflight - 1)
+      })
+    }
+  }
+
+  private update(id: number, patch: Partial<ActivityEntry>) {
+    this.log = this.log.map((e) => (e.id === id ? { ...e, ...patch } : e))
+  }
+
+  /** Panic button for when the indicator gets stuck out of sync with
+   * reality (e.g. a fetch that never resolves due to a dropped socket).
+   * Clears the counter and marks remaining pending entries as errored. */
+  reset() {
+    untrack(() => {
+      this.log = this.log.map((e) =>
+        e.status === 'pending'
+          ? { ...e, status: 'error', error: 'reset by user', durationMs: Date.now() - e.startedAt }
+          : e,
+      )
+      this.inflight = 0
+    })
+  }
+}
+
+export const activity = new ActivityStore()