@reddb-io/ui 0.3.0 → 0.3.2

package/src/lib/ConnectDropdown.svelte

@@ -1,7 +1,22 @@
 <script lang="ts">
   import { onMount } from 'svelte'
-  import { connection, makeCustomConnection } from './connections.svelte'
-  import { Zap, Loader2, AlertCircle, CheckCircle2, Clock, X, Plug, ChevronDown } from 'lucide-svelte'
+  import {
+    connection,
+    makeCustomConnection,
+    openDatabaseFile,
+    unreachableConnectHint,
+  } from './connections.svelte'
+  import {
+    Zap,
+    Loader2,
+    AlertCircle,
+    CheckCircle2,
+    Clock,
+    X,
+    Plug,
+    ChevronDown,
+    FolderOpen,
+  } from 'lucide-svelte'
 
   const DEFAULT_URL = 'red://localhost'
 
@@ -29,7 +44,11 @@
     // opaque transport-unsupported error from the client.
     if (!connection.canReach(cleaned)) {
       status = 'error'
-      error = `This app can't reach that transport here — supported: ${supportedHint}`
+      // A file:// target on the web gets an honest, actionable explanation
+      // (#123) instead of the generic transport-unsupported line.
+      error =
+        unreachableConnectHint(cleaned) ??
+        `This app can't reach that transport here — supported: ${supportedHint}`
       return
     }
     status = 'probing'
@@ -51,6 +70,27 @@
     attempt(url)
   }
 
+  // Desktop-only "Open database file…" flow (#123): the native OS picker feeds
+  // the chosen .rdb into the existing file:// connect path. Hidden on the web
+  // Surface, where there is no picker (file:// is unreachable there).
+  async function openFile() {
+    status = 'probing'
+    error = null
+    rtt = null
+    const res = await openDatabaseFile()
+    if (res.ok) {
+      status = 'ok'
+      rtt = connection.probe.rtt_ms ?? null
+      url = connection.active.url
+      setTimeout(() => (open = false), 350)
+    } else if (res.cancelled) {
+      status = 'idle'
+    } else {
+      status = 'error'
+      error = res.reason ?? 'unreachable'
+    }
+  }
+
   function fmtRel(ms: number) {
     const d = Date.now() - ms
     if (d < 60_000) return 'just now'
@@ -110,6 +150,10 @@
   const reachableHistory = $derived(
     connection.history.filter((h) => !h.url || connection.canReach(h.url)),
   )
+
+  // Native file open is only reachable on a Surface that can speak the unix /
+  // embedded-file transport (the Tauri desktop shell) (#123).
+  const canOpenFile = $derived(connection.supportedTransports.includes('unix'))
 </script>
 
 <div class="relative">
@@ -176,6 +220,19 @@
         </div>
       </form>
 
+      {#if canOpenFile}
+        <button
+          type="button"
+          onclick={openFile}
+          disabled={status === 'probing'}
+          title="Open a local .rdb database file"
+          class="mt-1 w-full h-9 bg-bg-2 border border-line-2 text-fg-1 font-medium rounded-md cursor-pointer transition-colors hover:border-line-3 hover:text-fg-0 disabled:opacity-40 disabled:cursor-not-allowed flex items-center justify-center gap-2 text-[13px]"
+        >
+          <FolderOpen class="size-3.5 text-fg-3" />
+          Open database file…
+        </button>
+      {/if}
+
       {#if reachableHistory.length > 0}
         <div class="mt-3 pt-3 border-t border-line-1">
           <div class="flex items-center gap-1.5 mb-2">

package/src/lib/DevConsole.svelte

@@ -0,0 +1,155 @@
+<script lang="ts">
+  // Instrumented developer console panel (#128). A collapsible, bottom-docked
+  // log of every query and HTTP call the client made — verb, target, duration,
+  // row count — copyable and secret-free. It bridges the framework-agnostic
+  // `devConsole` store (deliberately rune-free so the data layer can log
+  // without importing Svelte) into reactivity by subscribing and mirroring the
+  // snapshot into `$state`.
+  //
+  // It never steals the accent: status is carried by ok/danger dots and the
+  // panel chrome uses the neutral surface ramp, so the one-accent-per-screen
+  // rule (design principle #6) holds even while the console is open.
+  import { devConsole as defaultStore, type ConsoleEntry } from '#reddb'
+  import { X, Copy, Trash2, Check } from 'lucide-svelte'
+
+  let {
+    store = defaultStore,
+    open: openProp = false,
+  }: {
+    store?: typeof defaultStore
+    open?: boolean
+  } = $props()
+
+  // Seed the panel's open state from the prop once; thereafter it's toggled
+  // locally by the shell event and the close button.
+  // svelte-ignore state_referenced_locally
+  let open = $state(openProp)
+  let entries = $state<readonly ConsoleEntry[]>([])
+  let copiedId = $state<number | null>(null)
+
+  // Bridge the rune-free store into reactivity: subscribe once, mirror every
+  // snapshot into local `$state`. The subscribe fires immediately, so the
+  // panel paints the current log on mount.
+  $effect(() => store.subscribe((snap) => (entries = snap)))
+
+  // Toggle from anywhere in the shell (the StatusBar button dispatches this).
+  $effect(() => {
+    const toggle = () => (open = !open)
+    window.addEventListener('red:toggle-dev-console', toggle)
+    return () => window.removeEventListener('red:toggle-dev-console', toggle)
+  })
+
+  // Newest first — an operator reads the most recent call at the top.
+  const ordered = $derived([...entries].reverse())
+
+  async function copy(text: string, id: number) {
+    try {
+      await navigator.clipboard?.writeText(text)
+      copiedId = id
+      setTimeout(() => {
+        if (copiedId === id) copiedId = null
+      }, 1200)
+    } catch {
+      // Clipboard denied (insecure context / permissions) — silently no-op.
+    }
+  }
+
+  function entryText(e: ConsoleEntry): string {
+    const head = `${e.verb} ${e.target} → ${e.ok ? (e.status ?? 'ok') : 'error'} · ${e.durationMs}ms${
+      e.rowCount === undefined ? '' : ` · ${e.rowCount} rows`
+    }`
+    const parts = [head]
+    if (e.payload) parts.push(e.payload)
+    if (e.error) parts.push(e.error)
+    return parts.join('\n')
+  }
+
+  function fmtDuration(ms: number): string {
+    return ms >= 1000 ? `${(ms / 1000).toFixed(1)}s` : `${ms}ms`
+  }
+</script>
+
+{#if open}
+  <div
+    class="fixed inset-x-0 bottom-0 z-[9990] flex max-h-[45vh] flex-col border-t border-line-2 bg-bg-1 shadow-2xl"
+    role="log"
+    aria-label="Developer console"
+    data-testid="dev-console"
+  >
+    <div class="flex items-center justify-between gap-3 border-b border-line-1 bg-bg-2/60 px-3 py-1.5">
+      <div class="flex items-center gap-2 font-mono text-[11px] text-fg-2">
+        <span class="uppercase tracking-wider text-fg-1">Console</span>
+        <span class="text-fg-3" data-testid="dev-console-count">{entries.length} calls</span>
+      </div>
+      <div class="flex items-center gap-1">
+        <button
+          type="button"
+          onclick={() => store.clear()}
+          title="Clear console"
+          aria-label="Clear console"
+          class="inline-flex items-center gap-1 rounded px-1.5 py-0.5 font-mono text-[11px] text-fg-3 hover:bg-bg-3/60 hover:text-fg-1 transition-colors"
+        >
+          <Trash2 class="size-3" />
+          Clear
+        </button>
+        <button
+          type="button"
+          onclick={() => (open = false)}
+          title="Close console"
+          aria-label="Close console"
+          class="inline-flex items-center rounded p-0.5 text-fg-3 hover:bg-bg-3/60 hover:text-fg-1 transition-colors"
+        >
+          <X class="size-3.5" />
+        </button>
+      </div>
+    </div>
+
+    <div class="min-h-0 flex-1 overflow-y-auto">
+      {#if ordered.length === 0}
+        <div class="grid h-24 place-items-center font-mono text-[12px] text-fg-3">
+          No calls yet — the client hasn't asked the database anything.
+        </div>
+      {:else}
+        <ul class="divide-y divide-line-1/60">
+          {#each ordered as entry (entry.id)}
+            <li class="group flex items-start gap-2 px-3 py-1.5 font-mono text-[11px] hover:bg-bg-2/40" data-testid="dev-console-entry">
+              <span
+                class="mt-[5px] h-1.5 w-1.5 shrink-0 rounded-full"
+                class:bg-ok={entry.ok}
+                class:bg-danger={!entry.ok}
+                aria-hidden="true"
+              ></span>
+              <span class="w-11 shrink-0 uppercase text-fg-2">{entry.verb}</span>
+              <span class="min-w-0 flex-1">
+                <span class="text-fg-1">{entry.target}</span>
+                {#if entry.payload}
+                  <span class="ml-1 text-fg-3 break-all">{entry.payload.replace(/\s+/g, ' ').slice(0, 120)}</span>
+                {/if}
+                {#if entry.error}
+                  <span class="ml-1 text-danger break-all">— {entry.error}</span>
+                {/if}
+              </span>
+              {#if entry.rowCount !== undefined}
+                <span class="shrink-0 tabular-nums text-fg-3" title="rows returned">{entry.rowCount}r</span>
+              {/if}
+              <span class="w-12 shrink-0 text-right tabular-nums text-fg-2" title="duration">{fmtDuration(entry.durationMs)}</span>
+              <button
+                type="button"
+                onclick={() => copy(entryText(entry), entry.id)}
+                title="Copy entry"
+                aria-label="Copy entry"
+                class="shrink-0 rounded p-0.5 text-fg-3 opacity-0 transition-opacity hover:bg-bg-3/60 hover:text-fg-1 group-hover:opacity-100 focus:opacity-100"
+              >
+                {#if copiedId === entry.id}
+                  <Check class="size-3 text-ok" />
+                {:else}
+                  <Copy class="size-3" />
+                {/if}
+              </button>
+            </li>
+          {/each}
+        </ul>
+      {/if}
+    </div>
+  </div>
+{/if}

package/src/lib/ErrorBoundary.fixture.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  // Test-only harness: wraps the crash child in the real ErrorBoundary exactly
+  // as the Workspace root does, so the regression test exercises the shipped
+  // boundary rather than a stand-in.
+  import ErrorBoundary from './ErrorBoundary.svelte'
+  import CrashChild from './ErrorBoundaryCrashChild.fixture.svelte'
+</script>
+
+<ErrorBoundary>
+  <CrashChild />
+</ErrorBoundary>

package/src/lib/ErrorBoundary.fixtures.svelte.ts

@@ -0,0 +1,5 @@
+// Test-only reactive control for the ErrorBoundary regression test. Kept in a
+// `.svelte.ts` module so the `$state` rune is compiled. The crash child reads
+// `crashCtrl.crash` at (re)creation time, so flipping it before a boundary
+// reset models a transient fault that has since cleared.
+export const crashCtrl = $state({ crash: true, message: 'render-crash-test' })

package/src/lib/ErrorBoundary.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+  // Black-screen shield (#126). A render crash inside the Workspace used to
+  // tear down the whole webview and leave a black window with no way back.
+  // This wraps its children in a Svelte error boundary whose `failed` state
+  // shows the message, the stack, and two recovery actions:
+  //   - Retry render: re-runs the boundary's children (`reset`). Recovers when
+  //     the fault was transient — the offending state has since changed.
+  //   - Reload window: hard-reloads the document. Always works, even when the
+  //     fault reproduces on every render.
+  // Styling stays on the dark tokens and keeps a single accent (the primary
+  // Retry action), per the one-accent discipline.
+  import type { Snippet } from 'svelte'
+  import { RotateCw, RefreshCw } from 'lucide-svelte'
+
+  let { children }: { children: Snippet } = $props()
+
+  function reloadWindow() {
+    if (typeof window !== 'undefined') window.location.reload()
+  }
+
+  function messageOf(error: unknown): string {
+    if (error instanceof Error) return error.message || error.name
+    return String(error)
+  }
+
+  function stackOf(error: unknown): string | null {
+    return error instanceof Error && error.stack ? error.stack : null
+  }
+</script>
+
+<svelte:boundary>
+  {@render children()}
+
+  {#snippet failed(error, reset)}
+    <div
+      role="alert"
+      class="flex h-full w-full flex-col items-center justify-center gap-5 overflow-auto bg-bg-0 px-6 py-10 text-center"
+    >
+      <div class="flex flex-col items-center gap-2">
+        <RotateCw class="size-8 text-fg-3" strokeWidth={1.4} />
+        <h1 class="type-h2 m-0 text-fg-0">Something crashed while rendering</h1>
+        <p class="m-0 max-w-lg text-[13px] leading-relaxed text-fg-2">
+          The workspace hit an unexpected error. Your connection is untouched —
+          retry the render, or reload the window to start clean.
+        </p>
+      </div>
+
+      <p class="m-0 max-w-lg break-words font-mono text-[12px] text-accent">
+        {messageOf(error)}
+      </p>
+
+      {#if stackOf(error)}
+        <pre
+          class="m-0 max-h-52 w-full max-w-2xl overflow-auto rounded-lg border border-line-1 bg-bg-1 p-3 text-left font-mono text-[11px] leading-relaxed text-fg-3"
+        >{stackOf(error)}</pre>
+      {/if}
+
+      <div class="flex items-center gap-2">
+        <button
+          type="button"
+          onclick={reset}
+          class="inline-flex h-9 items-center gap-1.5 rounded-lg bg-accent px-3 text-[12px] font-medium text-white hover:bg-accent/90"
+        >
+          <RotateCw class="size-3.5" strokeWidth={2} />
+          Retry render
+        </button>
+        <button
+          type="button"
+          onclick={reloadWindow}
+          class="inline-flex h-9 items-center gap-1.5 rounded-lg border border-line-1 bg-bg-1 px-3 text-[12px] font-medium text-fg-1 hover:bg-bg-2"
+        >
+          <RefreshCw class="size-3.5" strokeWidth={2} />
+          Reload window
+        </button>
+      </div>
+    </div>
+  {/snippet}
+</svelte:boundary>

package/src/lib/ErrorBoundaryCrashChild.fixture.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  // Test-only child that throws during render when `crashCtrl.crash` is set,
+  // reproducing a component regression that would otherwise black out the
+  // webview. On a boundary reset it is recreated and re-reads the flag.
+  import { crashCtrl } from './ErrorBoundary.fixtures.svelte'
+  if (crashCtrl.crash) throw new Error(crashCtrl.message)
+</script>
+
+<div data-testid="child-alive">child rendered</div>

package/src/lib/GlobalProgressBar.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { activity } from './activity.svelte'
+</script>
+
+{#if activity.active}
+  <div class="global-progress" role="progressbar" aria-label="reddb activity" aria-valuetext="Loading">
+    <div class="global-progress__bar"></div>
+  </div>
+{/if}

package/src/lib/LoadingOverlay.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+  // Step-logged loading overlay (#127). While a connection open is in flight it
+  // shows an elapsed badge and a scrolling log of the real steps the connect
+  // sequence appended (spawn, readiness, handshake, initial stats/schema). A
+  // stalled step reads as stalled — the last (active) step stays on screen and
+  // its elapsed keeps counting. Live-or-empty: it renders only real steps from
+  // the `loading` store, never fabricated progress.
+  //
+  // Flash guard: fast opens never paint the overlay. We only reveal after
+  // `revealAfterMs` of continuous loading; an open that finishes under the
+  // threshold clears the store before the reveal timer fires, so nothing shows.
+  import { loading as defaultStore, formatElapsed, type LoadingStep } from './loading.svelte'
+
+  let {
+    store = defaultStore,
+    revealAfterMs = 400,
+  }: {
+    store?: typeof defaultStore
+    revealAfterMs?: number
+  } = $props()
+
+  let revealed = $state(false)
+  let now = $state(0)
+
+  // Drive the reveal threshold and the ticking elapsed badge off the store's
+  // active flag. Both timers are torn down the instant the open finishes, so a
+  // sub-threshold open never flips `revealed` true.
+  $effect(() => {
+    if (!store.active) {
+      revealed = false
+      return
+    }
+    now = Date.now()
+    const reveal = setTimeout(() => (revealed = true), revealAfterMs)
+    const tick = setInterval(() => (now = Date.now()), 100)
+    return () => {
+      clearTimeout(reveal)
+      clearInterval(tick)
+    }
+  })
+
+  const elapsed = $derived(store.active ? store.elapsedMs(now) : 0)
+
+  function stepElapsed(step: LoadingStep): number {
+    if (step.durationMs !== null) return step.durationMs
+    return Math.max(0, now - step.startedAt)
+  }
+</script>
+
+{#if store.active && revealed}
+  <div
+    class="fixed inset-0 z-[9998] grid place-items-center bg-bg-0/85 backdrop-blur-sm"
+    role="status"
+    aria-live="polite"
+    aria-busy="true"
+    data-testid="loading-overlay"
+  >
+    <div class="w-[min(460px,90vw)] rounded-lg border border-line-2 bg-bg-1 p-5 shadow-2xl">
+      <div class="flex items-center justify-between gap-3">
+        <div class="flex items-center gap-2 min-w-0">
+          <span
+            class="h-2 w-2 shrink-0 animate-pulse rounded-full bg-accent shadow-[0_0_12px_var(--color-accent-glow)] motion-reduce:animate-none"
+          ></span>
+          <span class="truncate font-mono text-[13px] font-semibold text-fg-0">
+            {store.label ?? 'Opening connection'}
+          </span>
+        </div>
+        <span
+          class="shrink-0 rounded bg-bg-2 px-1.5 py-0.5 font-mono text-[12px] tabular-nums text-fg-2"
+          data-testid="loading-elapsed"
+        >
+          {formatElapsed(elapsed)}
+        </span>
+      </div>
+
+      <ol class="mt-4 max-h-[220px] space-y-1.5 overflow-y-auto" data-testid="loading-steps">
+        {#each store.steps as step (step.id)}
+          <li class="flex items-start gap-2 font-mono text-[12px]" data-testid="loading-step">
+            <span
+              class="mt-[3px] h-1.5 w-1.5 shrink-0 rounded-full"
+              class:bg-accent={step.status === 'active'}
+              class:animate-pulse={step.status === 'active'}
+              class:motion-reduce:animate-none={step.status === 'active'}
+              class:bg-ok={step.status === 'done'}
+              class:bg-danger={step.status === 'error'}
+              aria-hidden="true"
+            ></span>
+            <span class="min-w-0 flex-1">
+              <span
+                class="text-fg-1"
+                class:text-fg-0={step.status === 'active'}
+                class:text-danger={step.status === 'error'}
+              >{step.label}</span>
+              {#if step.detail}
+                <span class="ml-1 text-fg-3">{step.detail}</span>
+              {/if}
+              {#if step.error}
+                <span class="ml-1 text-danger">— {step.error}</span>
+              {/if}
+            </span>
+            <span class="shrink-0 tabular-nums text-fg-3" data-testid="loading-step-elapsed">
+              {formatElapsed(stepElapsed(step))}
+            </span>
+          </li>
+        {/each}
+      </ol>
+    </div>
+  </div>
+{/if}

package/src/lib/MetricChart.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+  // Renders a metric the way its *nature* dictates (eixo 3): the caller passes
+  // the ChartKind derived from the descriptor's `kind`, and this component
+  // picks the visualisation — a rate line, a filled gauge level, or a
+  // P50/P95/P99 percentile curve. No chart-type picker is ever shown to the
+  // user; the metric's kind decides.
+  import { LineChart, AreaChart } from 'layerchart'
+  import type { ChartKind, NormalizedSeries } from '#reddb'
+
+  interface Props {
+    chart: ChartKind
+    series: NormalizedSeries[]
+    unit?: string | null
+  }
+  let { chart, series, unit = null }: Props = $props()
+
+  // Worse percentiles trend redder; single series leads with the accent.
+  const PALETTE = ['#ff2056', '#4ade80', '#fbbf24', '#38bdf8', '#a78bfa']
+  const PERCENTILE_COLOR: Record<string, string> = {
+    p50: '#4ade80',
+    p95: '#fbbf24',
+    p99: '#ff2056',
+  }
+
+  // LayerChart auto-detects a time scale from Date x-values.
+  const chartSeries = $derived(
+    series.map((s, i) => ({
+      key: s.label,
+      color: PERCENTILE_COLOR[s.label] ?? PALETTE[i % PALETTE.length],
+      data: s.points.map((p) => ({ date: new Date(p.t), value: p.v })),
+    })),
+  )
+
+  const hasData = $derived(series.some((s) => s.points.length > 0))
+
+  // Gauge / ratio: lead with the most recent level, big.
+  const latest = $derived.by(() => {
+    const pts = series[0]?.points
+    return pts && pts.length ? pts[pts.length - 1].v : null
+  })
+  const isRatio = $derived(chart === 'gauge')
+
+  function fmtValue(v: number): string {
+    if (isRatio && v >= 0 && v <= 1) return `${(v * 100).toFixed(1)}%`
+    if (Math.abs(v) >= 1000) return v.toLocaleString(undefined, { maximumFractionDigits: 1 })
+    return v.toFixed(Math.abs(v) < 1 ? 3 : 2)
+  }
+</script>
+
+{#if !hasData}
+  <div class="flex h-full items-center justify-center text-[12px] text-fg-3 font-mono">
+    no samples in window
+  </div>
+{:else if chart === 'gauge'}
+  <!-- Point-in-time level. A ratio shows a 0–100% bar; other gauges show the
+       raw latest value. -->
+  <div class="flex h-full flex-col items-center justify-center gap-3">
+    <div class="font-mono text-[40px] font-semibold leading-none text-accent">
+      {latest === null ? '—' : fmtValue(latest)}{#if unit && !isRatio}<span class="ml-1 text-[16px] text-fg-3">{unit}</span>{/if}
+    </div>
+    {#if isRatio && latest !== null}
+      <div class="h-1.5 w-56 overflow-hidden rounded-full bg-bg-3">
+        <div class="h-full rounded-full bg-accent" style={`width: ${Math.max(0, Math.min(100, latest * 100))}%`}></div>
+      </div>
+    {/if}
+  </div>
+{:else if chart === 'area'}
+  <AreaChart
+    data={chartSeries[0]?.data ?? []}
+    x="date"
+    y="value"
+    series={chartSeries}
+    props={{ area: { 'fill-opacity': 0.12 } }}
+    legend={chartSeries.length > 1}
+  />
+{:else}
+  <!-- line + percentiles -->
+  <LineChart
+    data={chartSeries[0]?.data ?? []}
+    x="date"
+    y="value"
+    series={chartSeries}
+    legend={chartSeries.length > 1}
+  />
+{/if}

package/src/lib/QueryEditor.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { Play, Loader2 } from 'lucide-svelte'
+  import { Play, Loader2, X } from 'lucide-svelte'
   import { connection } from '$lib/connections.svelte'
-  import { queryTabs, deriveQueryLabel } from '$lib/query-tabs.svelte'
+  import { queryTabs, deriveQueryLabel, formatElapsed } from '$lib/query-tabs.svelte'
   import { tabs } from '$lib/tabs.svelte'
   import { registry } from '$lib/renderers'
   import type { Capability } from '$lib/renderers'
@@ -23,6 +23,19 @@
   const tab = $derived(tabs.tabs.find((t) => t.id === tabId))
 
   let textareaEl: HTMLTextAreaElement | undefined = $state()
+  let now = $state(Date.now())
+  const elapsed = $derived(
+    qs?.runningStartedAt ? formatElapsed(Math.max(0, now - qs.runningStartedAt)) : '0ms'
+  )
+
+  $effect(() => {
+    if (!qs?.running) return
+    now = Date.now()
+    const id = setInterval(() => {
+      now = Date.now()
+    }, 100)
+    return () => clearInterval(id)
+  })
 
   function setSql(value: string) {
     queryTabs.setSql(tabId, value)
@@ -36,6 +49,10 @@
     await queryTabs.run(tabId)
   }
 
+  function cancel() {
+    queryTabs.cancel(tabId)
+  }
+
   function onKey(e: KeyboardEvent) {
     if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
       e.preventDefault()
@@ -93,15 +110,39 @@
   </div>
 
   <div class="flex-1 overflow-hidden bg-bg-0">
-    {#if qs?.error}
+    {#if qs?.running}
+      <div class="h-full grid place-items-center p-6" aria-live="polite" aria-busy="true">
+        <div class="w-full max-w-md rounded border border-line-1 bg-bg-1 p-4 font-mono">
+          <div class="flex items-start justify-between gap-4">
+            <div class="min-w-0">
+              <div class="flex items-center gap-2 text-fg-1 text-[13px]">
+                <Loader2 class="size-4 animate-spin text-accent" />
+                <span>Running query</span>
+              </div>
+              <div class="mt-2 text-[11px] text-fg-3">
+                elapsed <span class="tabular-nums text-fg-2">{elapsed}</span>
+              </div>
+            </div>
+            <button
+              type="button"
+              class="inline-flex h-7 items-center gap-1 rounded border border-line-2 px-2 text-[11px] text-fg-2 hover:border-danger/50 hover:text-danger cursor-pointer"
+              onclick={cancel}
+              aria-label="Cancel running query"
+            >
+              <X class="size-3.5" />
+              <span>Cancel</span>
+            </button>
+          </div>
+          <div class="mt-3 max-h-24 overflow-hidden rounded bg-bg-0 px-2 py-1.5 text-[11px] text-fg-3">
+            <pre class="m-0 whitespace-pre-wrap break-words">{qs.sql.trim()}</pre>
+          </div>
+        </div>
+      </div>
+    {:else if qs?.error}
       <div class="p-4 text-[12px] font-mono text-warn">
         <div class="font-semibold mb-1">Query failed</div>
         <pre class="whitespace-pre-wrap">{qs.error}</pre>
       </div>
-    {:else if qs?.running && !qs.result}
-      <div class="h-full grid place-items-center text-fg-3 text-[12px] font-mono">
-        Running…
-      </div>
     {:else if !qs?.result}
       <div class="h-full grid place-items-center text-fg-3 text-[12px] font-mono">
         Run a query to see results here.