@agent-native/core 0.99.1 → 0.99.3

package/corpus/core/src/agent/production-agent.ts

@@ -11,8 +11,6 @@ import type { EventHandler as H3EventHandler } from "h3";
 import { isAgentActionStopError } from "../action.js";
 import { readAppState } from "../application-state/script-helpers.js";
 import { isReadOnlyShellCommand } from "../coding-tools/index.js";
-import { isDemoModeEnabled } from "../demo/config.js";
-import { redactDemoData, redactDemoString } from "../demo/redact.js";
 import { extensionIdFromPathname } from "../extensions/path.js";
 import { preUploadAttachments } from "../file-upload/pre-upload-attachments.js";
 import { isMcpActionResult } from "../mcp-client/app-result.js";
@@ -4456,48 +4454,24 @@ export async function runAgentLoop(opts: {
           isError = true;
         }
         mcpApp = mcpResult?.mcpApp;
-        // Demo mode: the agent must see the same anonymized data the UI shows, so
-        // it can't read out a real name/email on a live screen share. Redact
-        // the structured result (not the JSON string) so IDs/dates/URLs stay
-        // intact and follow-up tool calls still work. Gated — the expensive
-        // walk only runs when demo mode is on.
-        let redacted: unknown = rawForAgent;
-        const demoMode = await isDemoModeEnabled();
-        if (demoMode) {
-          mcpApp = undefined;
-          if (typeof rawForAgent === "string") {
-            try {
-              redacted = JSON.stringify(
-                redactDemoData(JSON.parse(rawForAgent)),
-                null,
-                2,
-              );
-            } catch {
-              redacted = redactDemoString(rawForAgent);
-            }
-          } else {
-            redacted = redactDemoData(rawForAgent);
-          }
-        }
+        // Demo mode is browser-local presentation state. The agent and MCP
+        // layers always receive the real, access-scoped tool result.
+        let resultForAgent: unknown = rawForAgent;
         // Vision images for the model: MCP tools return standard `image`
         // content parts; first-party actions opt in via the well-known
         // `_agentImages` result field (stripped from the JSON the model
-        // reads, even in demo mode). Demo mode drops the images themselves —
-        // text redaction can't scrub pixels, and a screenshot may expose
-        // original visual data. The images array
+        // reads). The images array
         // never touches the ledger — only the compact text notes appended
         // below are persisted.
         let imageNotes: string[] = [];
         if (mcpResult) {
-          if (!demoMode) {
-            const mcpImages = extractMcpToolResultImages(mcpResult.raw);
-            if (mcpImages.length > 0) toolResultImages = mcpImages;
-          }
+          const mcpImages = extractMcpToolResultImages(mcpResult.raw);
+          if (mcpImages.length > 0) toolResultImages = mcpImages;
         } else {
-          const extracted = extractAgentImagesFromActionResult(redacted);
-          redacted = extracted.value;
+          const extracted = extractAgentImagesFromActionResult(resultForAgent);
+          resultForAgent = extracted.value;
           imageNotes = extracted.notes;
-          if (extracted.images.length > 0 && !demoMode) {
+          if (extracted.images.length > 0) {
             toolResultImages = extracted.images;
           }
         }
@@ -4508,9 +4482,9 @@ export async function runAgentLoop(opts: {
           ];
         }
         let resultStr =
-          typeof redacted === "string"
-            ? redacted
-            : JSON.stringify(redacted, null, 2);
+          typeof resultForAgent === "string"
+            ? resultForAgent
+            : JSON.stringify(resultForAgent, null, 2);
         if (resultStr.length > toolMaxResultChars) {
           const truncated = resultStr.slice(0, toolMaxResultChars);
           resultStr = `${truncated}\n\n...[truncated — full result was ${resultStr.length.toLocaleString()} chars; only first ${toolMaxResultChars.toLocaleString()} shown]`;

package/corpus/core/src/audit/config.ts

@@ -27,7 +27,6 @@ const DEFAULT_SKIP_ACTIONS = new Set<string>([
   "context-report",
   "context-manifest-get",
   "change-appearance",
-  "toggle-demo-mode",
 ]);
 
 /** Name patterns for high-frequency state-sync actions, skipped by default. */

package/corpus/core/src/chat-threads/store.ts

@@ -886,57 +886,71 @@ export async function updateThreadData(
   messageCount: number,
   options: UpdateThreadDataOptions = {},
 ): Promise<void> {
-  await ensureTable();
+  // getThread() ensures the table exists. Keep that bootstrap inside the
+  // retry boundary below so a cold serverless process can recover from a
+  // transient initialization/read failure too.
   const client = getDbExec();
-  const maxAttempts =
-    options.maxAttempts ?? DEFAULT_THREAD_DATA_UPDATE_ATTEMPTS;
+  const maxAttempts = Math.max(
+    1,
+    options.maxAttempts ?? DEFAULT_THREAD_DATA_UPDATE_ATTEMPTS,
+  );
   let lastConflict = false;
+  let lastError: unknown = null;
 
   for (let attempt = 0; attempt < maxAttempts; attempt++) {
-    const current = await getThread(id);
-    if (!current) return;
-
-    let nextThreadData = threadData;
-    let nextMessageCount = messageCount;
     try {
-      const merged = mergeThreadDataForClientSave(
-        parseThreadData(current.threadData),
-        parseThreadData(threadData),
-        {
-          preserveExistingQueuedMessages:
-            options.preserveExistingQueuedMessages ?? true,
-          preserveExistingTopLevelKeys:
-            options.preserveExistingTopLevelKeys ?? true,
-        },
-      );
-      nextThreadData = JSON.stringify(merged);
-      if (Array.isArray(merged.messages)) {
-        nextMessageCount = merged.messages.length;
+      const current = await getThread(id);
+      if (!current) return;
+
+      let nextThreadData = threadData;
+      let nextMessageCount = messageCount;
+      try {
+        const merged = mergeThreadDataForClientSave(
+          parseThreadData(current.threadData),
+          parseThreadData(threadData),
+          {
+            preserveExistingQueuedMessages:
+              options.preserveExistingQueuedMessages ?? true,
+            preserveExistingTopLevelKeys:
+              options.preserveExistingTopLevelKeys ?? true,
+          },
+        );
+        nextThreadData = JSON.stringify(merged);
+        if (Array.isArray(merged.messages)) {
+          nextMessageCount = merged.messages.length;
+        }
+      } catch {
+        // Keep the caller's serialized value if either JSON blob is malformed.
       }
-    } catch {
-      // Keep the caller's serialized value if either JSON blob is malformed.
-    }
 
-    const nextUpdatedAt = Math.max(Date.now(), current.updatedAt + 1);
-    const result = await client.execute({
-      sql: `UPDATE chat_threads SET thread_data = ?, title = ?, preview = ?, message_count = ?, updated_at = ? WHERE id = ? AND updated_at = ?`,
-      args: [
-        nextThreadData,
-        title,
-        preview,
-        nextMessageCount,
-        nextUpdatedAt,
-        id,
-        current.updatedAt,
-      ],
-    });
+      const nextUpdatedAt = Math.max(Date.now(), current.updatedAt + 1);
+      const result = await client.execute({
+        sql: `UPDATE chat_threads SET thread_data = ?, title = ?, preview = ?, message_count = ?, updated_at = ? WHERE id = ? AND updated_at = ?`,
+        args: [
+          nextThreadData,
+          title,
+          preview,
+          nextMessageCount,
+          nextUpdatedAt,
+          id,
+          current.updatedAt,
+        ],
+      });
+
+      if (result.rowsAffected > 0) {
+        emitChatThreadChange(id);
+        return;
+      }
 
-    if (result.rowsAffected > 0) {
-      emitChatThreadChange(id);
-      return;
+      lastConflict = true;
+    } catch (error) {
+      // Completion saves happen after a long model/tool turn, when a
+      // transient connection or serverless DB failure is especially costly.
+      // Retry the whole read/merge/write attempt like a CAS conflict, while
+      // preserving the final error if the database remains unavailable.
+      lastError = error;
     }
 
-    lastConflict = true;
     if (attempt < maxAttempts - 1) {
       await new Promise((resolve) =>
         setTimeout(
@@ -947,6 +961,8 @@ export async function updateThreadData(
     }
   }
 
+  if (lastError) throw lastError;
+
   if (lastConflict) {
     if (options.ignoreConflicts) return;
     throw new Error(

package/corpus/core/src/client/AssistantChat.tsx

@@ -2307,8 +2307,7 @@ const AssistantChatInner = forwardRef<
   const missingApiKey = agentEngineConfigured.missing;
   const isProviderStatusChecking =
     providerStatusChecksEnabled && agentEngineConfigured.state === "unknown";
-  const isComposerDisabled =
-    missingApiKey || isProviderStatusChecking || composerDisabled;
+  const isComposerDisabled = missingApiKey || composerDisabled;
   const [missingKeySetupOpen, setMissingKeySetupOpen] = useState(false);
   const requestMissingKeySetup = useCallback(() => {
     setMissingKeySetupOpen(true);

package/corpus/core/src/client/chat/message-components.tsx

@@ -11,8 +11,10 @@ import {
   BranchPickerPrimitive,
   ComposerPrimitive,
   useMessagePartReasoning,
+  useMessagePartRuntime,
 } from "@assistant-ui/react";
 import type { Attachment } from "@assistant-ui/react";
+import { useAuiState } from "@assistant-ui/store";
 import {
   IconX,
   IconCheck,
@@ -842,8 +844,18 @@ export function shouldShowAssistantMessageFooter({
 
 function ReasoningMessagePart() {
   const part = useMessagePartReasoning();
-  const chatRunning = React.useContext(ChatRunningContext);
+  const partRuntime = useMessagePartRuntime();
+  const messageParts = useAuiState((state) => state.message.parts);
   const isStreaming = part.status?.type === "running";
+  const partIndex =
+    partRuntime.path.messagePartSelector.type === "index"
+      ? partRuntime.path.messagePartSelector.index
+      : -1;
+  const latestReasoningPartIndex = messageParts.reduce(
+    (latestIndex, messagePart, index) =>
+      messagePart.type === "reasoning" ? index : latestIndex,
+    -1,
+  );
   // Time thinking client-side: record the moment streaming first starts and
   // the moment it stops so the cell can show "Thought for Xs". Historical
   // messages that were never observed streaming in this session never get a
@@ -865,8 +877,8 @@ function ReasoningMessagePart() {
       text={part.text}
       isStreaming={isStreaming}
       durationMs={durationMs}
-      defaultOpen={isStreaming || !chatRunning}
-      autoCollapse={chatRunning}
+      defaultOpen={partIndex === latestReasoningPartIndex}
+      collapseWhenReplaced={partIndex < latestReasoningPartIndex}
     />
   );
 }

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")}
           >