@agent-native/core 0.99.0 → 0.99.2

package/corpus/core/src/client/chat/tool-call-display.tsx

@@ -897,6 +897,11 @@ export function ReconnectStreamMessage({
   content: ContentPart[];
 }) {
   const chatRunning = React.useContext(ChatRunningContext);
+  const latestReasoningPartIndex = content.reduce(
+    (latestIndex, part, index) =>
+      part.type === "reasoning" ? index : latestIndex,
+    -1,
+  );
   const streamingTextPartIndex =
     content.at(-1)?.type === "text" ? content.length - 1 : -1;
   const streamingReasoningPartIndex =
@@ -924,7 +929,8 @@ export function ReconnectStreamMessage({
                 key={`reconnect-reasoning-${i}`}
                 text={part.text}
                 isStreaming={chatRunning && i === streamingReasoningPartIndex}
-                defaultOpen={chatRunning && i === streamingReasoningPartIndex}
+                defaultOpen={i === latestReasoningPartIndex}
+                collapseWhenReplaced={i < latestReasoningPartIndex}
               />
             );
           }
@@ -969,6 +975,7 @@ export function ReasoningCell({
   isStreaming = false,
   defaultOpen,
   autoCollapse = false,
+  collapseWhenReplaced = false,
   durationMs,
 }: {
   text: string;
@@ -976,6 +983,8 @@ export function ReasoningCell({
   defaultOpen?: boolean;
   /** Animate closed when a live reasoning segment finishes during a run. */
   autoCollapse?: boolean;
+  /** Animate closed when a newer reasoning segment replaces this one. */
+  collapseWhenReplaced?: boolean;
   /**
    * Elapsed thinking time in ms, once known. Only meaningful once streaming
    * has finished — callers that track live timing (see ReasoningMessagePart)
@@ -987,6 +996,7 @@ export function ReasoningCell({
   const embeddedInWorkSummary = React.useContext(WorkSummaryContentContext);
   const [open, setOpen] = useState(defaultOpen ?? true);
   const wasStreamingRef = useRef(isStreaming);
+  const wasReplacedRef = useRef(collapseWhenReplaced);
   const trimmed = text.trim();
 
   useEffect(() => {
@@ -996,6 +1006,13 @@ export function ReasoningCell({
     wasStreamingRef.current = isStreaming;
   }, [autoCollapse, isStreaming]);
 
+  useEffect(() => {
+    if (collapseWhenReplaced && !wasReplacedRef.current) {
+      setOpen(false);
+    }
+    wasReplacedRef.current = collapseWhenReplaced;
+  }, [collapseWhenReplaced]);
+
   if (!trimmed && !isStreaming) return null;
 
   if (embeddedInWorkSummary) {

package/corpus/core/src/client/extensions/EmbeddedExtension.tsx

@@ -6,7 +6,7 @@ import {
 } from "@tabler/icons-react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { useNavigate } from "react-router";
+import { Link } from "react-router";
 
 import { extensionPath } from "../../extensions/path.js";
 import { THEME_VAR_NAMES } from "../../extensions/theme.js";
@@ -482,7 +482,6 @@ function EmbeddedToolMenu({
   const [open, setOpen] = useState(false);
   const [confirmingDelete, setConfirmingDelete] = useState(false);
   const queryClient = useQueryClient();
-  const navigate = useNavigate();
 
   const closeMenu = () => {
     setOpen(false);
@@ -545,17 +544,14 @@ function EmbeddedToolMenu({
       <PopoverContent align="end" sideOffset={4} className="w-56 p-1">
         {!confirmingDelete ? (
           <div className="flex flex-col">
-            <button
-              type="button"
-              onClick={() => {
-                closeMenu();
-                navigate(extensionPath(extensionId, toolName));
-              }}
+            <Link
+              to={extensionPath(extensionId, toolName)}
+              onClick={closeMenu}
               className="flex items-center gap-2 rounded-sm px-2 py-1.5 text-[12px] hover:bg-accent cursor-pointer text-left"
             >
               <IconExternalLink className="h-3.5 w-3.5" />
               <span>{t("extensions.openFullView")}</span>
-            </button>
+            </Link>
             <button
               type="button"
               onClick={removeFromSlot}

package/corpus/core/src/client/extensions/ExtensionViewer.tsx

@@ -1,7 +1,6 @@
 import {
   IconArrowBackUp,
   IconChevronRight,
-  IconCode,
   IconDotsVertical,
   IconHistory,
   IconLoader2,
@@ -21,7 +20,6 @@ import { SESSION_REPLAY_IFRAME_ATTRIBUTE } from "../../session-replay-iframe-pro
 import { sendToAgentChat } from "../agent-chat.js";
 import { AgentToggleButton } from "../AgentPanel.js";
 import { agentNativePath, appPath } from "../api-path.js";
-import { Dialog, DialogContent, DialogTitle } from "../components/ui/dialog.js";
 import {
   Popover,
   PopoverContent,
@@ -366,131 +364,6 @@ function applyCanonicalLink(path: string): () => void {
   };
 }
 
-function SourceCodeDialog({
-  extension,
-  onSaved,
-}: {
-  extension: Extension;
-  onSaved?: () => void;
-}) {
-  const queryClient = useQueryClient();
-  const [open, setOpen] = useState(false);
-  const [code, setCode] = useState(extension.content ?? "");
-  const [saving, setSaving] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  // Sync in when the dialog opens, or when the viewed extension changes
-  // while the dialog stays mounted (e.g. re-parented to a different id).
-  useEffect(() => {
-    if (open) setCode(extension.content ?? "");
-  }, [open, extension.id]);
-
-  const isDirty = code !== (extension.content ?? "");
-
-  // Block Escape / outside-click from closing while there are unsaved edits.
-  const handleOpenChange = (next: boolean) => {
-    if (!next && isDirty) return;
-    setOpen(next);
-    if (!next) setError(null);
-  };
-
-  const handleCancel = () => {
-    setCode(extension.content ?? "");
-    setOpen(false);
-    setError(null);
-  };
-
-  const handleSave = async () => {
-    setSaving(true);
-    setError(null);
-    try {
-      const res = await fetch(
-        agentNativePath(`/_agent-native/extensions/${extension.id}`),
-        {
-          method: "PUT",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ content: code }),
-        },
-      );
-      if (!res.ok) {
-        const body = await res.json().catch(() => ({}));
-        throw new Error(body?.error ?? `Save failed (${res.status})`);
-      }
-      setOpen(false);
-      queryClient.setQueryData<Extension>(["extension", extension.id], (old) =>
-        old ? { ...old, content: code } : old,
-      );
-      queryClient.invalidateQueries({
-        queryKey: ["extension", extension.id],
-      });
-      queryClient.invalidateQueries({ queryKey: ["extensions"] });
-      onSaved?.();
-    } catch (err: any) {
-      setError(err?.message ?? "Save failed");
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  return (
-    <>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <button
-            type="button"
-            onClick={() => setOpen(true)}
-            className="inline-flex items-center justify-center rounded-md h-8 w-8 text-muted-foreground hover:bg-accent hover:text-accent-foreground cursor-pointer"
-          >
-            <IconCode className="h-4 w-4" />
-          </button>
-        </TooltipTrigger>
-        <TooltipContent>View / edit source</TooltipContent>
-      </Tooltip>
-      <Dialog open={open} onOpenChange={handleOpenChange}>
-        <DialogContent className="flex h-[85vh] w-[90vw] max-w-[900px] flex-col gap-0 overflow-hidden p-0">
-          <div className="flex shrink-0 items-center border-b border-border px-5 py-3 pr-12">
-            <DialogTitle className="truncate text-sm font-medium">
-              {extension.name} — source
-            </DialogTitle>
-          </div>
-          <textarea
-            className="flex-1 resize-none bg-muted/40 px-5 py-4 font-mono text-xs leading-relaxed text-foreground focus:outline-none"
-            value={code}
-            onChange={(e) => setCode(e.target.value)}
-            spellCheck={false}
-          />
-          <div className="flex shrink-0 items-center justify-between border-t border-border px-5 py-3">
-            {error ? (
-              <p className="text-xs text-destructive">{error}</p>
-            ) : (
-              <span className="text-xs text-muted-foreground">
-                Alpine.js / HTML &middot; {code.length.toLocaleString()} chars
-              </span>
-            )}
-            <div className="flex items-center gap-2">
-              <button
-                type="button"
-                onClick={handleCancel}
-                className="inline-flex h-8 cursor-pointer items-center rounded-md border border-input px-3 text-xs hover:bg-accent"
-              >
-                Cancel
-              </button>
-              <button
-                type="button"
-                onClick={handleSave}
-                disabled={saving}
-                className="inline-flex h-8 cursor-pointer items-center rounded-md bg-primary px-4 text-xs font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50"
-              >
-                {saving ? "Saving…" : "Save"}
-              </button>
-            </div>
-          </div>
-        </DialogContent>
-      </Dialog>
-    </>
-  );
-}
-
 function EditToolPopover({
   extension,
   onOpenChange,
@@ -1342,12 +1215,6 @@ export function ExtensionViewer({ extensionId }: ExtensionViewerProps) {
                   onRestored={() => setRefreshKey((k) => k + 1)}
                   onOpenChange={onPopoverOpenChange}
                 />
-                {extension.canEdit && (
-                  <SourceCodeDialog
-                    extension={extension}
-                    onSaved={() => setRefreshKey((k) => k + 1)}
-                  />
-                )}
                 <EditToolPopover
                   extension={extension}
                   onOpenChange={onPopoverOpenChange}

package/corpus/core/src/client/index.ts

@@ -388,6 +388,13 @@ export {
   type BuildAgentNativeExtensionHtmlOptions,
   type CreateHttpAgentNativeExtensionStorageOptions,
 } from "./extensions/portable-extension.js";
+export { injectSessionReplayIframeBootstrap } from "../extensions/session-replay-iframe.js";
+export {
+  SESSION_REPLAY_IFRAME_ATTRIBUTE,
+  SESSION_REPLAY_IFRAME_PROBE,
+  SESSION_REPLAY_IFRAME_START,
+  SESSION_REPLAY_IFRAME_STOP,
+} from "../session-replay-iframe-protocol.js";
 export {
   AGENT_NATIVE_HOST_BRIDGE_VERSION,
   AGENT_NATIVE_HOST_MESSAGE_TYPES,

package/corpus/core/src/client/settings/DemoModeSection.tsx

@@ -1,61 +1,12 @@
-/**
- * <DemoModeSection /> — toggle that replaces emails and numbers with realistic
- * fake data everywhere (UI + what the agent sees) while preserving names,
- * free text, labels, IDs, and structure so the app keeps working.
- *
- * The toggle is stored in application_state under `demo-mode`
- * (`{ enabled: boolean }`) and written via `PUT
- * /_agent-native/application-state/demo-mode` (optimistic — flip first,
- * write in the background). It READS from `/_agent-native/demo/status`
- * instead, which ORs the per-user toggle with the `DEMO_MODE` env: a hosted
- * demo deployment is forced on and the switch is locked so it can't be
- * accidentally turned off on stage.
- */
+/** Browser-local presentation toggle. Backend and agent results stay real. */
 
 import { IconEyeOff } from "@tabler/icons-react";
-import { useEffect, useState } from "react";
 
-import { agentNativePath } from "../api-path.js";
+import { setBrowserDemoModeEnabled } from "../../demo/browser-state.js";
 import { useDemoModeStatus } from "../use-demo-mode-status.js";
 
-const DEMO_MODE_WRITE_URL = agentNativePath(
-  "/_agent-native/application-state/demo-mode",
-);
-
 export function DemoModeSection() {
-  const [enabled, setEnabled] = useState<boolean | null>(null);
-  const { enabled: serverEnabled, forced, isLoading } = useDemoModeStatus();
-
-  // Surface the server value once it arrives (and on subsequent polls), but
-  // never clobber an in-flight optimistic toggle with a stale read. When
-  // forced by env, always reflect the locked-on state.
-  useEffect(() => {
-    if (forced) {
-      setEnabled(true);
-    } else if (!isLoading) {
-      setEnabled((prev) => (prev === null ? serverEnabled : prev));
-    }
-  }, [serverEnabled, forced, isLoading]);
-
-  const toggle = async (next: boolean) => {
-    if (forced) return;
-    const previous = enabled;
-    // Optimistic: flip immediately, write in the background.
-    setEnabled(next);
-    try {
-      const res = await fetch(DEMO_MODE_WRITE_URL, {
-        method: "PUT",
-        headers: { "Content-Type": "application/json" },
-        credentials: "include",
-        body: JSON.stringify({ enabled: next }),
-      });
-      if (!res.ok) {
-        throw new Error(`HTTP ${res.status}`);
-      }
-    } catch {
-      setEnabled(previous);
-    }
-  };
+  const { enabled } = useDemoModeStatus();
 
   return (
     <div className="flex items-start justify-between gap-3 rounded-md border border-border bg-accent/30 px-2.5 py-2">
@@ -64,30 +15,23 @@ export function DemoModeSection() {
           Enable demo mode
         </div>
         <p className="text-[10px] text-muted-foreground mt-0.5">
-          Anonymize emails in the UI and reshape supported dashboard charts for
-          presentations. Agent-visible emails and numbers are also anonymized.
-          Names, labels, IDs, and structure stay intact.
+          Anonymize displayed emails in this browser and reshape supported
+          dashboard charts for presentations. Backend, MCP, and agent results
+          stay real and access-scoped.
         </p>
-        {forced && (
-          <p className="text-[10px] text-muted-foreground mt-0.5">
-            Enforced by the <code>DEMO_MODE</code> environment variable — can't
-            be turned off here.
-          </p>
-        )}
       </div>
       <button
         type="button"
         role="switch"
-        aria-checked={!!enabled}
+        aria-checked={enabled}
         aria-label="Enable demo mode"
-        disabled={enabled === null || forced}
-        onClick={() => toggle(!enabled)}
+        onClick={() => setBrowserDemoModeEnabled(!enabled)}
         // Theme tokens; streaming agent owns layout.
         className={`relative inline-flex h-4 w-7 shrink-0 cursor-pointer items-center rounded-full transition-colors ${
           enabled
             ? "bg-primary"
             : "bg-muted-foreground/30 hover:bg-muted-foreground/50"
-        } ${enabled === null || forced ? "opacity-60" : ""}`}
+        }`}
       >
         <span
           className={`inline-block h-3 w-3 transform rounded-full bg-background transition-transform ${

package/corpus/core/src/client/settings/SettingsPanel.tsx

@@ -2790,7 +2790,7 @@ function SettingsPanelContent({
             id={settingsSectionDomId("demo-mode")}
             icon={<IconEyeOff size={14} />}
             title="Demo mode"
-            subtitle="Replace emails and numbers with realistic fake data everywhere — in the UI and what the agent sees. Names, free text, labels, IDs, and structure are preserved so the app keeps working."
+            subtitle="Replace displayed emails with realistic fake data in this browser and reshape supported charts for presentations. Backend, MCP, and agent results stay real and access-scoped."
             open={openSection === "demo-mode"}
             onToggle={() => toggle("demo-mode")}
           >

package/corpus/core/src/client/use-db-sync.ts

@@ -1,9 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 
-import {
-  ensureDemoModeFetchInterceptor,
-  refreshDemoModeFetchInterceptor,
-} from "../demo/fetch-interceptor.js";
+import { ensureDemoModeFetchInterceptor } from "../demo/fetch-interceptor.js";
 import { agentNativePath } from "./api-path.js";
 import { getBrowserTabId } from "./browser-tab-id.js";
 import {
@@ -314,15 +311,6 @@ class SyncTransport {
   // -------------------------------------------------------------------------
 
   private fan(events: SyncEvent[], version: number | undefined): void {
-    if (
-      events.some(
-        (event) =>
-          event.source === "app-state" &&
-          (event.key === "demo-mode" || event.key === "*"),
-      )
-    ) {
-      void refreshDemoModeFetchInterceptor();
-    }
     for (const sub of this.subscribers.values()) {
       sub.onEvents(events, version);
     }
@@ -544,8 +532,8 @@ class SyncTransport {
   };
 
   private start(): void {
-    // Universal demo-mode redaction for the UI. Idempotent + browser-only +
-    // a no-op until demo mode is on. Lives here because every template root
+    // Universal browser-local demo-mode presentation redaction. Idempotent and
+    // a no-op until the local preference is on. Lives here because every root
     // already mounts useDbSync, so this needs zero per-template wiring.
     ensureEmbedAuthFetchInterceptor();
     ensureDemoModeFetchInterceptor();

package/corpus/core/src/client/use-demo-mode-status.ts

@@ -1,44 +1,30 @@
-import { useQuery } from "@tanstack/react-query";
+import { useSyncExternalStore } from "react";
 
-import { agentNativePath } from "./api-path.js";
-import { useChangeVersion } from "./use-change-version.js";
-
-interface DemoModeStatusResponse {
-  enabled?: boolean;
-  forced?: boolean;
-}
+import {
+  getBrowserDemoModeEnabled,
+  subscribeToBrowserDemoMode,
+} from "../demo/browser-state.js";
 
 export interface DemoModeStatus {
   enabled: boolean;
-  forced: boolean;
+  forced: false;
   isLoading: boolean;
 }
 
-const DEMO_STATUS_URL = agentNativePath("/_agent-native/demo/status");
-
 /**
- * Reads the effective Demo mode status for the current user. The shared
- * change-version stream advances after Demo mode application state changes,
- * so mounted consumers refresh without polling or duplicating the route call.
+ * Reads the browser-local Demo mode presentation preference. This deliberately
+ * has no backend request: the server and agent always operate on real data.
  */
 export function useDemoModeStatus(): DemoModeStatus {
-  const demoModeVersion = useChangeVersion("app-state:demo-mode");
-
-  const { data, isLoading } = useQuery({
-    queryKey: ["agent-native", "demo-mode", demoModeVersion],
-    queryFn: async () => {
-      const res = await fetch(DEMO_STATUS_URL, {
-        credentials: "same-origin",
-      });
-      if (!res.ok) return null;
-      return (await res.json()) as DemoModeStatusResponse | null;
-    },
-    staleTime: Infinity,
-  });
+  const enabled = useSyncExternalStore(
+    subscribeToBrowserDemoMode,
+    getBrowserDemoModeEnabled,
+    () => false,
+  );
 
   return {
-    enabled: data?.enabled === true,
-    forced: data?.forced === true,
-    isLoading,
+    enabled,
+    forced: false,
+    isLoading: false,
   };
 }

package/corpus/core/src/demo/browser-state.ts

@@ -0,0 +1,47 @@
+/** Browser-local Demo mode state.
+ *
+ * Demo mode is a presentation preference for this browser only. It must not
+ * be persisted in application state or consulted by backend actions.
+ */
+export const DEMO_MODE_STORAGE_KEY = "agent-native:demo-mode";
+
+const DEMO_MODE_CHANGE_EVENT = "agent-native:demo-mode-change";
+
+export function getBrowserDemoModeEnabled(): boolean {
+  if (typeof window === "undefined") return false;
+  try {
+    return window.localStorage.getItem(DEMO_MODE_STORAGE_KEY) === "true";
+  } catch {
+    return false;
+  }
+}
+
+export function setBrowserDemoModeEnabled(enabled: boolean): void {
+  if (typeof window === "undefined") return;
+  try {
+    if (enabled) {
+      window.localStorage.setItem(DEMO_MODE_STORAGE_KEY, "true");
+    } else {
+      window.localStorage.removeItem(DEMO_MODE_STORAGE_KEY);
+    }
+  } catch {
+    // A blocked or unavailable localStorage should not break the settings UI.
+  }
+  window.dispatchEvent(new Event(DEMO_MODE_CHANGE_EVENT));
+}
+
+export function subscribeToBrowserDemoMode(callback: () => void): () => void {
+  if (typeof window === "undefined") return () => undefined;
+
+  const onStorage = (event: StorageEvent) => {
+    if (event.key === DEMO_MODE_STORAGE_KEY || event.key === null) callback();
+  };
+  const onChange = () => callback();
+
+  window.addEventListener("storage", onStorage);
+  window.addEventListener(DEMO_MODE_CHANGE_EVENT, onChange);
+  return () => {
+    window.removeEventListener("storage", onStorage);
+    window.removeEventListener(DEMO_MODE_CHANGE_EVENT, onChange);
+  };
+}

package/corpus/core/src/demo/fetch-interceptor.ts

@@ -1,4 +1,3 @@
-import { agentNativePath } from "../client/api-path.js";
 /**
  * Client-side demo-mode redaction.
  *
@@ -14,8 +13,8 @@ import { agentNativePath } from "../client/api-path.js";
  * can only ever post-process JSON the app already parses for display, so it
  * physically cannot break auth, SSE streams, SSR HTML, or binary downloads.
  *
- * The agent is handled separately and in-process (its action tool results are
- * redacted in `production-agent.ts`), so it doesn't depend on this at all.
+ * The agent transport is intentionally skipped because it carries the real
+ * backend results; this interceptor is only a browser presentation transform.
  *
  * Scope intentionally narrow:
  *   - Only same-document `GET` requests are redacted. Mutation responses
@@ -23,20 +22,18 @@ import { agentNativePath } from "../client/api-path.js";
  *     typed isn't echoed back as fake data mid-demo.
  *   - Only `application/json` 2xx bodies. Streams (`text/event-stream`),
  *     HTML, and binary are skipped by content-type.
- *   - Framework infra endpoints (poll, events, the demo-status endpoint
- *     itself) are skipped — no PII and avoids self-recursion.
+ *   - Framework infra endpoints (poll and events) are skipped.
  *   - Any error during interception falls back to the original response.
  */
+import { getBrowserDemoModeEnabled } from "./browser-state.js";
 import { redactDemoData } from "./redact.js";
 
-const STATUS_PATH = agentNativePath("/_agent-native/demo/status");
 const SKIP_SUBSTRINGS = [
-  "/_agent-native/demo/status",
   "/_agent-native/poll",
   "/_agent-native/events",
-  // Never touch agent transport. The agent already gets in-process
-  // redaction of its tool results; faking its own transcript adds no demo
-  // value and must stay clear of the tool_use/tool_result protocol. Covers
+  // Never touch agent transport. The agent receives real tool results; faking
+  // its own transcript adds no demo value and must stay clear of the
+  // tool_use/tool_result protocol. Covers
   // "/_agent-native/agent" (stream) and "/_agent-native/agent-chat"
   // (thread history) and any sub-paths.
   "/_agent-native/agent",
@@ -73,16 +70,6 @@ export function shouldSkipDemoResponseRedaction(url: string): boolean {
 }
 
 let installed = false;
-let demoEnabled = false;
-let originalFetch: typeof fetch | null = null;
-let refreshPromise: Promise<void> | null = null;
-
-// Set once the first demo-status check completes. We DO NOT block requests on
-// it — if status isn't known yet a response is simply passed through
-// un-redacted (a brief first-paint window) rather than delaying transport.
-// Injecting latency into early GETs previously risked the agent's streaming
-// reconnect logic; transport safety wins over redacting the first paint.
-let firstStatusDone = false;
 
 /** Reject after `ms` so a misclassified streaming body can never hang. */
 function withTimeout<T>(p: Promise<T>, ms: number): Promise<T> {
@@ -114,49 +101,17 @@ function methodOf(input: RequestInfo | URL, init?: RequestInit): string {
   return m.toUpperCase();
 }
 
-async function refreshDemoFlag(): Promise<void> {
-  const f = originalFetch ?? fetch;
-  try {
-    const res = await f(STATUS_PATH, { credentials: "same-origin" });
-    if (!res.ok) return;
-    const json = (await res.json()) as {
-      enabled?: boolean;
-      forced?: boolean;
-    } | null;
-    demoEnabled = json?.enabled === true || json?.forced === true;
-  } catch {
-    // Status endpoint unreachable — leave the last known value.
-  } finally {
-    firstStatusDone = true;
-  }
-}
-
-/** Refresh demo mode after the shared DB-sync stream reports a real change. */
-export function refreshDemoModeFetchInterceptor(): Promise<void> {
-  if (!installed) return Promise.resolve();
-  if (!refreshPromise) {
-    refreshPromise = refreshDemoFlag().finally(() => {
-      refreshPromise = null;
-    });
-  }
-  return refreshPromise;
-}
-
 /**
- * Install the demo-mode fetch interceptor and read demo status once. Later
- * changes are driven by the shared DB-sync transport instead of a separate
- * fixed polling loop.
+ * Install the browser-local demo-mode fetch interceptor.
  * Idempotent and browser-only — safe to call from any hook that runs in
- * every template root (we call it from `useDbSync`). A no-op until demo
- * mode is actually on.
+ * every template root (we call it from `useDbSync`).
  */
 export function ensureDemoModeFetchInterceptor(): void {
   if (typeof window === "undefined") return;
   if (installed) return;
   installed = true;
 
-  originalFetch = window.fetch.bind(window);
-  const base = originalFetch;
+  const base = window.fetch.bind(window);
 
   window.fetch = async function patchedFetch(
     input: RequestInfo | URL,
@@ -164,11 +119,11 @@ export function ensureDemoModeFetchInterceptor(): void {
   ): Promise<Response> {
     const res = await base(input, init);
 
-    // Fast path: anything that isn't a demo-enabled, plain GET returns the
+    // Fast path: anything that isn't a browser-local-demo, plain GET returns the
     // ORIGINAL response with zero body work and zero extra awaits — when
     // demo mode is off this wrapper is byte-for-byte native fetch, so it
     // cannot influence agent/run/stream transport.
-    if (!demoEnabled || !firstStatusDone) return res;
+    if (!getBrowserDemoModeEnabled()) return res;
     if (methodOf(input, init) !== "GET") return res;
     if (!res.ok) return res;
 
@@ -217,6 +172,4 @@ export function ensureDemoModeFetchInterceptor(): void {
       return res;
     }
   };
-
-  void refreshDemoModeFetchInterceptor();
 }