@reddb-io/ui 0.3.1 → 0.3.2

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/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/StatusBar.svelte

@@ -2,7 +2,7 @@
   import { useRouter } from './router.svelte'
   import { connection } from './connections.svelte'
   import { pendingChanges } from './pending-changes.svelte'
-  import { ArrowRight, FilePenLine, Lock } from 'lucide-svelte'
+  import { ArrowRight, FilePenLine, Lock, Terminal } from 'lucide-svelte'
   import { readBuildInfo } from './build-info'
 
   const build = readBuildInfo()
@@ -48,6 +48,12 @@
     window.dispatchEvent(new CustomEvent('red:open-connect'))
   }
 
+  // Toggle the instrumented developer console (#128). Neutral chrome — the
+  // console never claims the accent, matching one-accent-per-screen.
+  function toggleConsole() {
+    window.dispatchEvent(new CustomEvent('red:toggle-dev-console'))
+  }
+
   function openCluster(e: MouseEvent) {
     const target = e.target as HTMLElement | null
     if (target?.closest('button, a, [data-no-nav]')) return
@@ -154,6 +160,18 @@
     </button>
   {/if}
 
+  <button
+    type="button"
+    onclick={toggleConsole}
+    data-no-nav
+    aria-label="Toggle developer console"
+    title="Developer console — every query and HTTP call, with timing and row counts"
+    class="inline-flex items-center gap-1 px-3 text-fg-3 hover:text-fg-1 hover:bg-bg-2/60 transition-colors cursor-pointer bg-transparent border-0 border-l border-line-1"
+  >
+    <Terminal class="size-3" />
+    <span>Console</span>
+  </button>
+
   <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}`}

package/src/lib/Workspace.svelte

@@ -6,6 +6,8 @@
   // The SvelteKit Surface wraps this same component with a Kit-backed router.
   import { onMount, untrack } from 'svelte'
   import Splash from './Splash.svelte'
+  import LoadingOverlay from './LoadingOverlay.svelte'
+  import DevConsole from './DevConsole.svelte'
   import GlobalProgressBar from './GlobalProgressBar.svelte'
   import Topbar from './Topbar.svelte'
   import StatusBar from './StatusBar.svelte'
@@ -19,7 +21,7 @@
   import SecurityView from './SecurityView.svelte'
   import SettingsView from './SettingsView.svelte'
   import Appearance from './Appearance.svelte'
-  import { connection, setConnectionProvider } from './connections.svelte'
+  import { connection, makeCustomConnection, setConnectionProvider } from './connections.svelte'
   import { runQueryPreferStream, type ConnectionProvider } from '#reddb'
   import { theme, type Theme } from './theme.svelte'
   import { skins } from './skins/skins.svelte'
@@ -30,6 +32,7 @@
   import { detectCapability } from './capability'
   import { defaultSubpage } from './collection-pages'
   import { createStateRouter, pathToLocation, setRouter, type Router, type View } from './router.svelte'
+  import { workspaceSession, type WorkspaceSnapshot } from './workspace-session'
 
   let {
     router: injectedRouter,
@@ -81,6 +84,27 @@
     }
   }
 
+  function buildSnapshot(): WorkspaceSnapshot {
+    return {
+      view: router.view,
+      collection: router.collection,
+      subpage: router.subpage,
+      tabs: tabs.tabs,
+      activeTabId: tabs.activeId,
+    }
+  }
+
+  function applySnapshot(snap: WorkspaceSnapshot): void {
+    if (snap.tabs.length > 0) tabs.hydrate(snap.tabs, snap.activeTabId)
+    router.go(
+      snap.collection
+        ? { view: 'collection', collection: snap.collection, subpage: snap.subpage ?? 'table' }
+        : { view: snap.view },
+      undefined,
+      true,
+    )
+  }
+
   onMount(() => {
     if (connectionProvider) {
       // Host-injected provider (#33): adopt its authenticated connection.
@@ -91,7 +115,13 @@
       // 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)
+        if (route) {
+          navigateToBootRoute(route)
+        } else {
+          // No explicit boot route — restore the last workspace session.
+          const snap = workspaceSession.restore()
+          if (snap) applySnapshot(snap)
+        }
       })
     }
   })
@@ -105,6 +135,42 @@
     return () => window.removeEventListener('red:open-pending-changes', handler as EventListener)
   })
 
+  // Runtime deep-link routing: subscribe to Tauri "deep-link" events so that
+  // clicking a red:// URL while the app is already running focuses the window
+  // (handled Rust-side via single-instance) and routes to the target connection.
+  // Boot-time deep links go through connection.bootstrap(); this path handles
+  // everything that arrives after the app is already mounted.
+  onMount(() => {
+    if (typeof window === 'undefined') return
+    if (!('__TAURI_INTERNALS__' in window || '__TAURI__' in window)) return
+
+    let unlisten: (() => void) | undefined
+
+    void import('@tauri-apps/api/event')
+      .then(({ listen }) =>
+        listen<string[]>('deep-link', async (event) => {
+          const raw = event.payload?.[0]
+          if (!raw) return
+
+          // Extract ?to= route before normalizing the connection target.
+          let target = raw
+          let route: string | null = null
+          try {
+            const equiv = raw.replace(/^reds?(\+[a-z]+)?:\/\//, 'http://')
+            const u = new URL(equiv)
+            route = u.searchParams.get('to')
+            if (route) target = raw.split('?')[0]
+          } catch {}
+
+          await connection.tryConnect(makeCustomConnection(target))
+          if (route) navigateToBootRoute(route)
+        })
+      )
+      .then((fn) => { unlisten = fn })
+
+    return () => { unlisten?.() }
+  })
+
   // Wire the commit executor to the active client. Re-binds whenever the
   // underlying client changes (connect / disconnect / switch).
   $effect(() => {
@@ -165,6 +231,47 @@
     if (secureStore.store) connection.hydrateUrls()
   })
 
+  // Autosave: debounce-schedule a snapshot on every router/tab state change.
+  // Guard on `booted` so we don't snapshot the blank pre-splash state.
+  $effect(() => {
+    if (!booted) return
+    const snap = buildSnapshot()
+    workspaceSession.schedule(snap)
+  })
+
+  // Flush immediately on page hide / window blur so an edit made
+  // right before closing is never lost to the debounce window.
+  onMount(() => {
+    const flush = () => { if (booted) workspaceSession.flush(buildSnapshot()) }
+    document.addEventListener('visibilitychange', flush)
+    window.addEventListener('blur', flush)
+    return () => {
+      document.removeEventListener('visibilitychange', flush)
+      window.removeEventListener('blur', flush)
+    }
+  })
+
+  // Tauri close-request: flush, then destroy the window. The Rust watchdog
+  // races this — if the webview hangs, it force-destroys after its bound.
+  onMount(() => {
+    if (typeof window === 'undefined') return
+    if (!('__TAURI_INTERNALS__' in window || '__TAURI__' in window)) return
+
+    let unlisten: (() => void) | undefined
+
+    void import('@tauri-apps/api/event')
+      .then(({ listen }) =>
+        listen<void>('close-request', async () => {
+          workspaceSession.flush(buildSnapshot())
+          const { getCurrentWindow } = await import('@tauri-apps/api/window')
+          await getCurrentWindow().destroy()
+        }),
+      )
+      .then((fn) => { unlisten = fn })
+
+    return () => { unlisten?.() }
+  })
+
   function openNewQuery() {
     const label = queryTabs.nextLabel()
     const tab = tabs.open({ kind: 'query', label, key: label }, true)
@@ -273,3 +380,12 @@
     <PendingChangesPanel open={pendingOpen} onClose={() => (pendingOpen = false)} />
   </div>
 {/if}
+
+<!-- Step-logged loading overlay (#127): sits above the shell during a slow
+     connect/boot; self-hides once the open resolves and never flashes on fast
+     opens. -->
+<LoadingOverlay />
+
+<!-- Instrumented developer console (#128): a collapsible, accent-free log of
+     every query/HTTP call the client made, toggled from the StatusBar. -->
+<DevConsole />

package/src/lib/connections.svelte.ts

@@ -11,6 +11,7 @@
 import {
   BROWSER_TRANSPORTS,
   DESKTOP_TRANSPORTS,
+  DesktopError,
   EMPTY_SERVER_CAPABILITIES,
   LocalUrlProvider,
   RedClient,
@@ -18,6 +19,7 @@ import {
   isUrlReachable,
   parseBootParams,
   resolveConnectionBootstrap,
+  transportForUrl,
   type Connection,
   type ConnectionBootstrap,
   type ConnectionProvider,
@@ -34,6 +36,7 @@ import {
 } from "./connection-history";
 import { secureStore } from "./secureStore.svelte";
 import { activity } from "./activity.svelte";
+import { loading } from "./loading.svelte";
 
 export type { HistoryEntry } from "./connection-history";
 
@@ -202,7 +205,14 @@ async function tauriOpenEmbedded(fileUrl: string): Promise<string> {
   }
   const path = fileUrl.replace(/^file:\/\//i, "");
   const { invoke } = await import("@tauri-apps/api/core");
-  return invoke<string>("open_embedded", { path });
+  try {
+    return await invoke<string>("open_embedded", { path });
+  } catch (e) {
+    // The standalone-Surface adapter seam: classify the command's structured
+    // error (or a legacy string/plugin error) in exactly one place, then throw
+    // a plain Error the provider can surface without any further coercion.
+    throw DesktopError.from(e);
+  }
 }
 
 /**
@@ -439,7 +449,13 @@ class ConnectionStore {
     // An explicit connect attempt means a target has been chosen — unblocks
     // automatic refresh from here on (#21).
     this.#targetResolved = true;
+    // Step-logged loading (#127): the connect sequence appends real,
+    // timestamped steps so a slow open (sidecar spawn, readiness, handshake,
+    // initial stats/schema fetch) shows honest feedback instead of a frozen
+    // screen. Fast opens finish before the overlay's reveal threshold.
+    loading.begin(`Opening ${preset.label}`);
     try {
+      loading.step("Reaching server", preset.url);
       const active = await activity.track(`connect · ${preset.label}`, () =>
         getConnectionProvider().connect(preset.id)
       );
@@ -450,6 +466,7 @@ class ConnectionStore {
         description: preset.description,
       };
       persist(this.active);
+      loading.step("Fetching stats & capabilities");
       const [stats, replication, capabilities] = await Promise.all([
         activity
           .track(`connect · ${preset.label} stats`, () => active.client.stats())
@@ -474,9 +491,11 @@ class ConnectionStore {
       };
       this.#capabilities = capabilities;
       this.connected = true;
+      loading.succeed();
       return true;
     } catch (e) {
       this.probe = { reachable: false, error: (e as Error).message };
+      loading.fail((e as Error).message);
       return false;
     }
   }
@@ -560,3 +579,78 @@ class ConnectionStore {
 }
 
 export const connection = new ConnectionStore();
+
+/**
+ * Honest, actionable copy for a `file://` target that can't be opened on the
+ * current Surface (#123). The web build has no filesystem/process access, so a
+ * local database file needs the desktop app — say that plainly instead of
+ * failing with a generic transport-unsupported error (live-or-empty honesty
+ * applied to the Connect flow).
+ */
+export const LOCAL_FILE_DESKTOP_ONLY =
+  "Local database files (file://) can only be opened in the desktop app — the web version can't reach files on your machine.";
+
+/**
+ * Explanation for an unreachable connection target, or null when the target IS
+ * reachable / has no file-specific guidance. The Connect UI shows this instead
+ * of the generic "unsupported transport" line when the user types a `file://`
+ * URL on the web (#123). Kept in the store (not the component) so the
+ * connect-flow seam is unit-testable without rendering.
+ */
+export function unreachableConnectHint(url: string): string | null {
+  if (connection.canReach(url)) return null;
+  return transportForUrl(url) === "unix" ? LOCAL_FILE_DESKTOP_ONLY : null;
+}
+
+/**
+ * Native file picker — the subset of `@tauri-apps/plugin-dialog`'s `open` we
+ * use. Injected by tests; in production it's the lazily-imported dialog plugin.
+ */
+export type FilePicker = (options: {
+  multiple: false;
+  directory: false;
+  title: string;
+  filters: { name: string; extensions: string[] }[];
+}) => Promise<string | null>;
+
+export interface OpenDatabaseFileResult {
+  ok: boolean;
+  /** True when the user dismissed the picker without choosing a file. */
+  cancelled?: boolean;
+  /** Human-readable reason when the flow failed (not a cancellation). */
+  reason?: string;
+}
+
+/**
+ * Desktop "Open database file…" flow (#123): open the OS picker for a `.rdb`
+ * file and connect to it through the existing `file://` embedded path (Tauri
+ * spawns a local file-backed reddb sidecar; the UI talks HTTP to it). Only the
+ * standalone (Tauri) Surface has a native picker — on the web there is none, so
+ * this returns the honest desktop-only message the caller surfaces.
+ *
+ * `pick` is injected by tests; in production it's the Tauri dialog plugin's
+ * `open`, imported lazily so the browser bundle never pulls it in.
+ */
+export async function openDatabaseFile(
+  pick?: FilePicker
+): Promise<OpenDatabaseFileResult> {
+  if (!pick && !isTauriSurface()) {
+    return { ok: false, reason: LOCAL_FILE_DESKTOP_ONLY };
+  }
+  const open =
+    pick ??
+    ((await import("@tauri-apps/plugin-dialog")).open as unknown as FilePicker);
+  const selected = await open({
+    multiple: false,
+    directory: false,
+    title: "Open database file",
+    filters: [{ name: "reddb database", extensions: ["rdb"] }],
+  });
+  if (!selected) return { ok: false, cancelled: true };
+  const ok = await connection.tryConnect(
+    makeCustomConnection(`file://${selected}`)
+  );
+  return ok
+    ? { ok: true }
+    : { ok: false, reason: connection.probe.error ?? "unreachable" };
+}

package/src/lib/embed/RedUiEmbedRoot.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { BitsConfig } from 'bits-ui'
   import Workspace from '../Workspace.svelte'
+  import ErrorBoundary from '../ErrorBoundary.svelte'
   import type { ConnectionProvider } from '../reddb'
   import type { Theme } from '../theme.svelte'
 
@@ -20,12 +21,16 @@
 </script>
 
 <BitsConfig defaultPortalTo={portalTarget}>
-  <Workspace
-    {connectionProvider}
-    {initialRoute}
-    showConnect={false}
-    themeTarget={shadowHost}
-    persistTheme={false}
-    {initialTheme}
-  />
+  <!-- Black-screen shield (#126): keep an embed render crash inside the boundary
+       rather than blanking the host's mount point. -->
+  <ErrorBoundary>
+    <Workspace
+      {connectionProvider}
+      {initialRoute}
+      showConnect={false}
+      themeTarget={shadowHost}
+      persistTheme={false}
+      {initialTheme}
+    />
+  </ErrorBoundary>
 </BitsConfig>

package/src/lib/embed/index.ts

@@ -1,6 +1,7 @@
 import appCss from "../../app.css?inline";
 import type { Component } from "svelte";
-import type { ConnectionProvider } from "../reddb";
+import type { ConnectionProvider, ConsoleSink } from "../reddb";
+import { devConsole } from "../reddb/dev-console";
 import type { Theme } from "../theme.svelte";
 import { RED_UI_VERSION, readBuildInfo } from "../build-info";
 
@@ -18,6 +19,9 @@ export {
   RedClient,
   type Connection,
   type ConnectionProvider,
+  type ConsoleEntry,
+  type ConsoleEntryKind,
+  type ConsoleSink,
   type InjectedClientOptions,
   type RedClientOptions,
 } from "../reddb";
@@ -27,6 +31,14 @@ export interface RedUiEmbedOptions {
   initialRoute?: string;
   theme?: Theme;
   shadowRoot?: ShadowRootInit;
+  /**
+   * Host tap on red-ui's developer console. When set, every query/HTTP
+   * round-trip the embedded Core records — verb, target, duration, row count,
+   * sanitized payload — is also delivered to the host, so a host app (e.g.
+   * red-request) can mirror red-ui's RQL/SQL traffic into its own developer
+   * bar. Entries are already secret-redacted before they reach the sink.
+   */
+  consoleSink?: ConsoleSink;
 }
 
 export interface RedUiEmbedHandle {
@@ -167,11 +179,16 @@ export async function mountRedUi(
     },
   });
 
+  const removeSink = opts.consoleSink
+    ? devConsole.addSink(opts.consoleSink)
+    : undefined;
+
   return {
     host,
     shadowRoot,
     portalTarget,
     destroy: () => {
+      removeSink?.();
       void unmount(instance);
       shadowRoot.textContent = "";
     },
@@ -180,6 +197,7 @@ export async function mountRedUi(
 
 export class RedUiElement extends HTMLElement {
   #connectionProvider: ConnectionProvider | null = null;
+  #consoleSink: ConsoleSink | null = null;
   initialRoute: string | undefined;
   theme: Theme | undefined;
   #handle: RedUiEmbedHandle | null = null;
@@ -201,6 +219,20 @@ export class RedUiElement extends HTMLElement {
     if (this.isConnected) this.#mounting = this.#mount();
   }
 
+  get consoleSink(): ConsoleSink | null {
+    return this.#consoleSink;
+  }
+
+  /**
+   * Host tap on the embedded Core's developer console (see
+   * `RedUiEmbedOptions.consoleSink`). Setting it after mount remounts, like
+   * `connectionProvider` — hosts normally assign both before attach.
+   */
+  set consoleSink(sink: ConsoleSink | null) {
+    this.#consoleSink = sink;
+    if (this.isConnected) this.#mounting = this.#mount();
+  }
+
   connectedCallback() {
     if (!this.hasAttribute("version"))
       this.setAttribute("version", RED_UI_VERSION);
@@ -220,6 +252,7 @@ export class RedUiElement extends HTMLElement {
       connectionProvider: this.#connectionProvider,
       initialRoute: this.initialRoute,
       theme: this.theme,
+      consoleSink: this.#consoleSink ?? undefined,
     });
   }
 }