@agent-native/core 0.98.2 → 0.98.4

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

@@ -1,7 +1,7 @@
 /**
- * <DemoModeSection /> — toggle that replaces contact/free-text names, emails,
- * and numbers with realistic fake data everywhere (UI + what the agent sees)
- * while preserving labels, IDs, and structure so the app keeps working.
+ * <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
@@ -64,9 +64,9 @@ export function DemoModeSection() {
           Enable demo mode
         </div>
         <p className="text-[10px] text-muted-foreground mt-0.5">
-          Replace contact/free-text names, emails, and numbers with realistic
-          fake data everywhere — in the UI and what the agent sees. Labels, IDs,
-          and structure are preserved so the app keeps working.
+          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.
         </p>
         {forced && (
           <p className="text-[10px] text-muted-foreground mt-0.5">

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

@@ -50,6 +50,15 @@ import { uploadAvatar, useAvatarUrl } from "../use-avatar.js";
 import { useDevMode } from "../use-dev-mode.js";
 import { useSession } from "../use-session.js";
 import { cn } from "../utils.js";
+import {
+  AGENT_SETTINGS_SECTIONS,
+  ALL_SETTINGS_SECTIONS,
+  CONNECTION_SETTINGS_SECTIONS,
+  SETTINGS_SECTION_IDS,
+  WORKSPACE_SETTINGS_SECTIONS,
+  getAgentSettingsSearchTabs,
+  type SettingsSectionId,
+} from "./agent-settings-search.js";
 import { AgentsSection } from "./AgentsSection.js";
 import { AutomationsSection } from "./AutomationsSection.js";
 import { DemoModeSection } from "./DemoModeSection.js";
@@ -60,10 +69,7 @@ import {
   useSettingsSurface,
   type SettingsSurface,
 } from "./SettingsSection.js";
-import type {
-  SettingsSearchEntry,
-  SettingsTabItem,
-} from "./SettingsTabsPage.js";
+import type { SettingsTabItem } from "./SettingsTabsPage.js";
 import { UsageSection } from "./UsageSection.js";
 import {
   type BuilderConnectFlow,
@@ -2299,192 +2305,6 @@ export interface SettingsPanelProps {
   sectionRequestKey?: number;
 }
 
-type SettingsSectionId =
-  | "account"
-  | "llm"
-  | "app-models"
-  | "limits"
-  | "voice"
-  | "demo-mode"
-  | "automations"
-  | "secrets"
-  | "hosting"
-  | "database"
-  | "uploads"
-  | "auth"
-  | "email"
-  | "browser"
-  | "background"
-  | "integrations"
-  | "usage"
-  | "a2a";
-
-const SETTINGS_SECTION_IDS = new Set<SettingsSectionId>([
-  "account",
-  "llm",
-  "app-models",
-  "limits",
-  "voice",
-  "demo-mode",
-  "automations",
-  "secrets",
-  "hosting",
-  "database",
-  "uploads",
-  "auth",
-  "email",
-  "browser",
-  "background",
-  "integrations",
-  "usage",
-  "a2a",
-]);
-
-const ALL_SETTINGS_SECTIONS: readonly SettingsSectionId[] = [
-  "account",
-  "llm",
-  "app-models",
-  "limits",
-  "voice",
-  "demo-mode",
-  "automations",
-  "secrets",
-  "hosting",
-  "database",
-  "uploads",
-  "auth",
-  "email",
-  "browser",
-  "background",
-  "integrations",
-  "usage",
-  "a2a",
-];
-
-const AGENT_SETTINGS_SECTIONS: readonly SettingsSectionId[] = [
-  "llm",
-  "app-models",
-  "limits",
-  "voice",
-  "automations",
-  "background",
-  "a2a",
-];
-
-const CONNECTION_SETTINGS_SECTIONS: readonly SettingsSectionId[] = [
-  "secrets",
-  "integrations",
-  "email",
-  "browser",
-  "usage",
-];
-
-const WORKSPACE_SETTINGS_SECTIONS: readonly SettingsSectionId[] = [
-  "account",
-  "demo-mode",
-  "hosting",
-  "database",
-  "uploads",
-  "auth",
-];
-
-// Search metadata for each section so settings search can deep-link straight
-// to a section from any tab. Labels mirror the section headers; keywords add
-// synonyms and provider names the header doesn't spell out.
-const SETTINGS_SECTION_SEARCH_META: Record<
-  SettingsSectionId,
-  { label: string; keywords: string; description?: string }
-> = {
-  account: {
-    label: "Account",
-    keywords: "profile photo avatar identity signed in email name",
-  },
-  llm: {
-    label: "LLM",
-    keywords:
-      "model claude gpt openai anthropic gemini api key provider ai engine llm",
-  },
-  "app-models": {
-    label: "App Default Model",
-    keywords: "default model provider app template composer",
-  },
-  limits: {
-    label: "Agent Limits",
-    keywords: "max iterations budget loop timeout runtime",
-  },
-  voice: {
-    label: "Voice Transcription",
-    keywords: "microphone dictation speech to text whisper",
-  },
-  "demo-mode": {
-    label: "Demo mode",
-    keywords: "fake data anonymize redact screenshot privacy mask",
-  },
-  automations: {
-    label: "Automations",
-    keywords: "triggers scheduled events cron jobs",
-  },
-  secrets: {
-    label: "API Keys & Connections",
-    keywords: "secrets credentials tokens api keys environment variables",
-  },
-  hosting: {
-    label: "Hosting",
-    keywords: "deploy netlify vercel cloudflare builder nitro",
-  },
-  database: {
-    label: "Database",
-    keywords: "postgres sqlite neon supabase turso storage sql pglite",
-  },
-  uploads: {
-    label: "File uploads",
-    keywords: "files storage s3 avatars attachments bucket blob",
-  },
-  auth: {
-    label: "Authentication",
-    keywords: "login signup oauth google github better auth access sso",
-  },
-  email: {
-    label: "Email",
-    keywords: "resend sendgrid smtp transactional notifications reports",
-  },
-  browser: {
-    label: "Browser Automation",
-    keywords: "web scraping playwright chrome headless",
-  },
-  background: {
-    label: "Background Agent",
-    keywords: "code changes branches builder production async",
-  },
-  integrations: {
-    label: "Integrations",
-    keywords: "slack telegram whatsapp discord messaging connect",
-  },
-  usage: {
-    label: "Usage",
-    keywords: "tokens cost spend billing consumption",
-  },
-  a2a: {
-    label: "Connected Agents (A2A)",
-    keywords: "remote agents protocol a2a connected",
-  },
-};
-
-function buildSectionSearchEntries(
-  sections: readonly SettingsSectionId[],
-): SettingsSearchEntry[] {
-  return sections.map((section) => {
-    const meta = SETTINGS_SECTION_SEARCH_META[section];
-    return {
-      id: `section:${section}`,
-      label: meta.label,
-      keywords: meta.keywords,
-      description: meta.description,
-      hash: section,
-    };
-  });
-}
-
 function normalizeSettingsSection(
   value?: string | null,
 ): SettingsSectionId | null {
@@ -2970,7 +2790,7 @@ function SettingsPanelContent({
             id={settingsSectionDomId("demo-mode")}
             icon={<IconEyeOff size={14} />}
             title="Demo mode"
-            subtitle="Replace contact/free-text names, emails, and numbers with realistic fake data everywhere — in the UI and what the agent sees. Labels, IDs, and structure are preserved so the app keeps working."
+            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."
             open={openSection === "demo-mode"}
             onToggle={() => toggle("demo-mode")}
           >
@@ -3250,15 +3070,24 @@ export function useAgentSettingsTabs(): SettingsTabItem[] {
     [canToggle, isDevMode, setDevMode],
   );
 
-  return useMemo<SettingsTabItem[]>(
-    () => [
+  return useMemo<SettingsTabItem[]>(() => {
+    const searchTabs = getAgentSettingsSearchTabs();
+    const searchTab = (
+      id: "agent" | "connections" | "organization" | "workspace",
+    ) => {
+      const tab = searchTabs.find((candidate) => candidate.id === id);
+      if (!tab) throw new Error(`Missing agent settings tab: ${id}`);
+      return tab;
+    };
+    const agent = searchTab("agent");
+    const connections = searchTab("connections");
+    const organization = searchTab("organization");
+    const workspace = searchTab("workspace");
+    return [
       {
-        id: "agent",
-        label: "Agent",
+        ...agent,
         icon: IconBrain,
         group: "agent",
-        keywords: "agent model llm limits voice automations",
-        searchEntries: buildSectionSearchEntries(AGENT_SETTINGS_SECTIONS),
         content: (
           <SettingsPanelContent
             {...baseProps}
@@ -3270,12 +3099,9 @@ export function useAgentSettingsTabs(): SettingsTabItem[] {
         ),
       },
       {
-        id: "connections",
-        label: "Connections",
+        ...connections,
         icon: IconPlugConnected,
         group: "agent",
-        keywords: "connections secrets integrations email browser usage",
-        searchEntries: buildSectionSearchEntries(CONNECTION_SETTINGS_SECTIONS),
         content: (
           <SettingsPanelContent
             {...baseProps}
@@ -3287,11 +3113,9 @@ export function useAgentSettingsTabs(): SettingsTabItem[] {
         ),
       },
       {
-        id: "organization",
-        label: "Organization",
+        ...organization,
         icon: IconUsersGroup,
         group: "workspace",
-        keywords: "organization org team members invites collaborators",
         content: (
           <div className="mx-auto w-full max-w-2xl">
             <TeamPage showTitle={false} />
@@ -3299,12 +3123,9 @@ export function useAgentSettingsTabs(): SettingsTabItem[] {
         ),
       },
       {
-        id: "workspace",
-        label: "Workspace",
+        ...workspace,
         icon: IconCloud,
         group: "workspace",
-        keywords: "workspace account hosting database uploads auth",
-        searchEntries: buildSectionSearchEntries(WORKSPACE_SETTINGS_SECTIONS),
         content: (
           <SettingsPanelContent
             {...baseProps}
@@ -3315,7 +3136,6 @@ export function useAgentSettingsTabs(): SettingsTabItem[] {
           />
         ),
       },
-    ],
-    [baseProps],
-  );
+    ];
+  }, [baseProps]);
 }

package/corpus/core/src/client/settings/agent-settings-search.ts

@@ -0,0 +1,219 @@
+import type { SettingsSearchEntry } from "./SettingsTabsPage.js";
+
+export type SettingsSectionId =
+  | "account"
+  | "llm"
+  | "app-models"
+  | "limits"
+  | "voice"
+  | "demo-mode"
+  | "automations"
+  | "secrets"
+  | "hosting"
+  | "database"
+  | "uploads"
+  | "auth"
+  | "email"
+  | "browser"
+  | "background"
+  | "integrations"
+  | "usage"
+  | "a2a";
+
+export const SETTINGS_SECTION_IDS = new Set<SettingsSectionId>([
+  "account",
+  "llm",
+  "app-models",
+  "limits",
+  "voice",
+  "demo-mode",
+  "automations",
+  "secrets",
+  "hosting",
+  "database",
+  "uploads",
+  "auth",
+  "email",
+  "browser",
+  "background",
+  "integrations",
+  "usage",
+  "a2a",
+]);
+
+export const ALL_SETTINGS_SECTIONS: readonly SettingsSectionId[] = [
+  "account",
+  "llm",
+  "app-models",
+  "limits",
+  "voice",
+  "demo-mode",
+  "automations",
+  "secrets",
+  "hosting",
+  "database",
+  "uploads",
+  "auth",
+  "email",
+  "browser",
+  "background",
+  "integrations",
+  "usage",
+  "a2a",
+];
+
+export const AGENT_SETTINGS_SECTIONS: readonly SettingsSectionId[] = [
+  "llm",
+  "app-models",
+  "limits",
+  "voice",
+  "automations",
+  "background",
+  "a2a",
+];
+
+export const CONNECTION_SETTINGS_SECTIONS: readonly SettingsSectionId[] = [
+  "secrets",
+  "integrations",
+  "email",
+  "browser",
+  "usage",
+];
+
+export const WORKSPACE_SETTINGS_SECTIONS: readonly SettingsSectionId[] = [
+  "account",
+  "demo-mode",
+  "hosting",
+  "database",
+  "uploads",
+  "auth",
+];
+
+const SETTINGS_SECTION_SEARCH_META: Record<
+  SettingsSectionId,
+  { label: string; keywords: string; description?: string }
+> = {
+  account: {
+    label: "Account",
+    keywords: "profile photo avatar identity signed in email name",
+  },
+  llm: {
+    label: "LLM",
+    keywords:
+      "model claude gpt openai anthropic gemini api key provider ai engine llm",
+  },
+  "app-models": {
+    label: "App Default Model",
+    keywords: "default model provider app template composer",
+  },
+  limits: {
+    label: "Agent Limits",
+    keywords: "max iterations budget loop timeout runtime",
+  },
+  voice: {
+    label: "Voice Transcription",
+    keywords: "microphone dictation speech to text whisper",
+  },
+  "demo-mode": {
+    label: "Demo mode",
+    keywords: "fake data anonymize redact screenshot privacy mask",
+  },
+  automations: {
+    label: "Automations",
+    keywords: "triggers scheduled events cron jobs",
+  },
+  secrets: {
+    label: "API Keys & Connections",
+    keywords: "secrets credentials tokens api keys environment variables",
+  },
+  hosting: {
+    label: "Hosting",
+    keywords: "deploy netlify vercel cloudflare builder nitro",
+  },
+  database: {
+    label: "Database",
+    keywords: "postgres sqlite neon supabase turso storage sql pglite",
+  },
+  uploads: {
+    label: "File uploads",
+    keywords: "files storage s3 avatars attachments bucket blob",
+  },
+  auth: {
+    label: "Authentication",
+    keywords: "login signup oauth google github better auth access sso",
+  },
+  email: {
+    label: "Email",
+    keywords: "resend sendgrid smtp transactional notifications reports",
+  },
+  browser: {
+    label: "Browser Automation",
+    keywords: "web scraping playwright chrome headless",
+  },
+  background: {
+    label: "Background Agent",
+    keywords: "code changes branches builder production async",
+  },
+  integrations: {
+    label: "Integrations",
+    keywords: "slack telegram whatsapp discord messaging connect",
+  },
+  usage: {
+    label: "Usage",
+    keywords: "tokens cost spend billing consumption",
+  },
+  a2a: {
+    label: "Connected Agents (A2A)",
+    keywords: "remote agents protocol a2a connected",
+  },
+};
+
+export function buildSectionSearchEntries(
+  sections: readonly SettingsSectionId[],
+): SettingsSearchEntry[] {
+  return sections.map((section) => {
+    const meta = SETTINGS_SECTION_SEARCH_META[section];
+    return {
+      id: `section:${section}`,
+      label: meta.label,
+      keywords: meta.keywords,
+      description: meta.description,
+      hash: section,
+    };
+  });
+}
+
+export interface AgentSettingsSearchTab {
+  id: string;
+  label: string;
+  keywords: string;
+  searchEntries?: SettingsSearchEntry[];
+}
+
+export function getAgentSettingsSearchTabs(): AgentSettingsSearchTab[] {
+  return [
+    {
+      id: "agent",
+      label: "Agent",
+      keywords: "agent model llm limits voice automations",
+      searchEntries: buildSectionSearchEntries(AGENT_SETTINGS_SECTIONS),
+    },
+    {
+      id: "connections",
+      label: "Connections",
+      keywords: "connections secrets integrations email browser usage",
+      searchEntries: buildSectionSearchEntries(CONNECTION_SETTINGS_SECTIONS),
+    },
+    {
+      id: "organization",
+      label: "Organization",
+      keywords: "organization org team members invites collaborators",
+    },
+    {
+      id: "workspace",
+      label: "Workspace",
+      keywords: "workspace account hosting database uploads auth",
+      searchEntries: buildSectionSearchEntries(WORKSPACE_SETTINGS_SECTIONS),
+    },
+  ];
+}

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

@@ -3,6 +3,10 @@ export {
   useAgentSettingsTabs,
   type SettingsPanelProps,
 } from "./SettingsPanel.js";
+export {
+  getAgentSettingsSearchTabs,
+  type AgentSettingsSearchTab,
+} from "./agent-settings-search.js";
 export {
   SettingsTabsPage,
   type SettingsSearchEntry,

package/corpus/core/src/demo/actions/toggle-demo-mode.ts

@@ -5,7 +5,7 @@ import { writeAppState } from "../../application-state/script-helpers.js";
 
 export default defineAction({
   description:
-    "Turn demo mode on or off. When demo mode is on, the app replaces contact/free-text names, email addresses, and numbers with realistic fake data everywhere — in the UI and in what you (the agent) see — while keeping labels, IDs, dates, and structure intact so everything still works. Use when the user asks to 'hide my data', 'turn on demo mode', 'anonymize this for a screen share / recording', or similar. This is the same toggle as the Demo mode switch in settings.",
+    "Turn demo mode on or off. When demo mode is on, the UI replaces email addresses with realistic fake data and supported dashboards reshape chart values for presentations. Agent-visible results replace emails and numbers while keeping names, free text, labels, IDs, dates, and structure intact. Use when the user asks to 'hide my data', 'turn on demo mode', 'anonymize this for a screen share / recording', or similar. This is the same toggle as the Demo mode switch in settings.",
   schema: z.object({
     enabled: z
       .boolean()
@@ -16,7 +16,7 @@ export default defineAction({
     return {
       enabled,
       message: enabled
-        ? "Demo mode is ON — contact/free-text names, emails, and numbers are now replaced with deterministic fake data everywhere (UI and agent). Labels, IDs, and structure are preserved so everything keeps working."
+        ? "Demo mode is ON — UI emails are anonymized and supported dashboard charts are reshaped for presentation. Agent-visible emails and numbers are also anonymized. Names, free text, labels, IDs, and structure are preserved."
         : "Demo mode is OFF — real data is shown again.",
     };
   },

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

@@ -1,12 +1,12 @@
 /**
  * Demo mode gate.
  *
- * Demo mode replaces contact/free-text names, email addresses, and numbers in every action
- * result with deterministic fake data — for both the UI and what the agent
- * sees — while preserving labels, IDs, dates, URLs, and structure so the app
- * keeps working. The redaction WALK (see ./redact.ts) is expensive on large
- * payloads, so callers MUST gate it behind this function and only walk when it
- * returns true.
+ * Demo mode replaces email addresses and numbers in every action result with
+ * deterministic fake data — for both the UI and what the agent sees — while
+ * preserving names, free text, labels, IDs, dates, URLs, and structure so the
+ * app keeps working. The redaction WALK (see ./redact.ts) is expensive on
+ * large payloads, so callers MUST gate it behind this function and only walk
+ * when it returns true.
  *
  * This gate itself is intentionally cheap:
  *   - An env-forced deployment (a hosted demo site) short-circuits with zero

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

@@ -46,6 +46,23 @@ const SKIP_SUBSTRINGS = [
   "/_agent-native/runs",
 ];
 
+// Raw rrweb payloads are playback data, not ordinary app UI records. Walking
+// and cloning their huge DOM/event trees on the main thread stalls playback
+// and can corrupt replay fidelity. Small list/summary/manifest responses stay
+// eligible so rendered visitor identities are still anonymized.
+const RAW_REPLAY_PAYLOAD_RE =
+  /\/api\/session-replay\/recordings\/[^/?#]+\/(?:chunks(?:\/[^/?#]+)?|events)(?:[/?#]|$)/;
+const RAW_AGENT_REPLAY_EVENTS_RE =
+  /\/api\/session-replay\/agent-events\.json(?:[?#]|$)/;
+
+export function shouldSkipDemoResponseRedaction(url: string): boolean {
+  return (
+    SKIP_SUBSTRINGS.some((substring) => url.includes(substring)) ||
+    RAW_REPLAY_PAYLOAD_RE.test(url) ||
+    RAW_AGENT_REPLAY_EVENTS_RE.test(url)
+  );
+}
+
 let installed = false;
 let demoEnabled = false;
 let originalFetch: typeof fetch | null = null;
@@ -148,7 +165,7 @@ export function ensureDemoModeFetchInterceptor(): void {
 
     try {
       const url = urlOf(input);
-      if (SKIP_SUBSTRINGS.some((s) => url.includes(s))) return res;
+      if (shouldSkipDemoResponseRedaction(url)) return res;
 
       // Only buffered, finite JSON. SSE / streaming / chunked-forever bodies
       // never reach `redactDemoData`: streaming content-types are excluded,
@@ -167,7 +184,13 @@ export function ensureDemoModeFetchInterceptor(): void {
       if (res.bodyUsed) return res;
 
       const data = await withTimeout(res.clone().json(), 3_000);
-      const redacted = redactDemoData(data);
+      // Frontend reads only need identity privacy. Dashboard charts apply
+      // their purpose-built demo trend transform at render time, so mutating
+      // every numeric field in every JSON response is unnecessary work.
+      const redacted = redactDemoData(data, {
+        redactNumbers: false,
+        redactProtectedEmails: true,
+      });
 
       const headers = new Headers(res.headers);
       // Body is re-serialized — these would be wrong now.