@agent-native/core 0.98.3 → 0.98.4

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

@@ -64,9 +64,9 @@ export function DemoModeSection() {
           Enable demo mode
         </div>
         <p className="text-[10px] text-muted-foreground mt-0.5">
-          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.
+          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/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 email addresses and numbers with realistic fake data everywhere — in the UI and in what you (the agent) see — while keeping names, free text, 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 — emails and numbers are now replaced with deterministic fake data everywhere (UI and agent). Names, free text, 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/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.

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

@@ -14,6 +14,13 @@
 
 export interface RedactOptions {
   salt?: string;
+  /** Redact numeric values. Defaults to true for backward compatibility. */
+  redactNumbers?: boolean;
+  /**
+   * Redact emails stored in otherwise protected structural fields such as
+   * `userId` and `userKey`. Intended for display-only frontend responses.
+   */
+  redactProtectedEmails?: boolean;
 }
 
 /* ------------------------------------------------------------------ *
@@ -532,18 +539,29 @@ function transformNumbers(text: string, salt: string): string {
  * Public: string redactor
  * ------------------------------------------------------------------ */
 
-function redactDemoStringInternal(text: string, salt: string): string {
+function redactDemoStringInternal(
+  text: string,
+  salt: string,
+  redactNumbers: boolean,
+): string {
   if (typeof text !== "string" || text.length === 0) return text;
+  if (!text.includes("@") && (!redactNumbers || !/[\d$€£¥]/.test(text))) {
+    return text;
+  }
 
   const { text: masked, restore } = protect(text);
   let out = masked;
   out = transformEmails(out, salt);
-  out = transformNumbers(out, salt);
+  if (redactNumbers) out = transformNumbers(out, salt);
   return unprotect(out, restore);
 }
 
 export function redactDemoString(text: string, opts?: RedactOptions): string {
-  return redactDemoStringInternal(text, opts?.salt ?? "");
+  return redactDemoStringInternal(
+    text,
+    opts?.salt ?? "",
+    opts?.redactNumbers !== false,
+  );
 }
 
 /* ------------------------------------------------------------------ *
@@ -586,6 +604,8 @@ function walk(
   salt: string,
   depth: number,
   seen: WeakSet<object>,
+  redactNumbers: boolean,
+  redactProtectedEmails: boolean,
 ): unknown {
   if (depth > MAX_DEPTH) return value;
 
@@ -594,11 +614,11 @@ function walk(
   const t = typeof value;
 
   if (t === "string") {
-    return redactDemoStringInternal(value as string, salt);
+    return redactDemoStringInternal(value as string, salt, redactNumbers);
   }
 
   if (t === "number") {
-    return redactNumberLeaf(value as number, salt);
+    return redactNumbers ? redactNumberLeaf(value as number, salt) : value;
   }
 
   if (t === "boolean" || t === "bigint" || t === "function" || t === "symbol") {
@@ -610,7 +630,9 @@ function walk(
   if (Array.isArray(value)) {
     if (seen.has(value)) return value;
     seen.add(value);
-    const out = value.map((item) => walk(item, salt, depth + 1, seen));
+    const out = value.map((item) =>
+      walk(item, salt, depth + 1, seen, redactNumbers, redactProtectedEmails),
+    );
     seen.delete(value);
     return out;
   }
@@ -629,14 +651,34 @@ function walk(
         ) {
           // Still recurse into nested structures, but the protected key does
           // not transform its own leaf value.
-          out[key] = walk(entry, salt, depth + 1, seen);
+          out[key] = walk(
+            entry,
+            salt,
+            depth + 1,
+            seen,
+            redactNumbers,
+            redactProtectedEmails,
+          );
+        } else if (
+          redactProtectedEmails &&
+          typeof entry === "string" &&
+          entry.includes("@")
+        ) {
+          out[key] = redactDemoStringInternal(entry, salt, false);
         } else {
           // Leaf under a protected key: pass through completely untouched.
           out[key] = entry;
         }
         continue;
       }
-      out[key] = walk(entry, salt, depth + 1, seen);
+      out[key] = walk(
+        entry,
+        salt,
+        depth + 1,
+        seen,
+        redactNumbers,
+        redactProtectedEmails,
+      );
     }
     seen.delete(value);
     return out;
@@ -648,7 +690,14 @@ function walk(
 
 export function redactDemoData<T>(value: T, opts?: RedactOptions): T {
   const salt = opts?.salt ?? "";
-  return walk(value, salt, 0, new WeakSet<object>()) as T;
+  return walk(
+    value,
+    salt,
+    0,
+    new WeakSet<object>(),
+    opts?.redactNumbers !== false,
+    opts?.redactProtectedEmails === true,
+  ) as T;
 }
 
 /**

package/corpus/templates/analytics/.agents/skills/session-replay/SKILL.md

@@ -102,9 +102,9 @@ agent answers about browser recordings in the Analytics template.
 - Wait for all replay chunks (`isComplete`) before constructing the rrweb
   `Replayer`. Progressive chunk publishes should only update the loading bar;
   rebuilding the player mid-load desyncs the scrubber and playhead.
-- Pass events to `Replayer` untouched. rrweb rebuilds them in a sandboxed iframe;
-  pre-processing DOM, stylesheet, resource, or mutation payloads makes playback
-  diverge from the captured page. In particular, never rewrite `href`, `src`,
+- Pass normal events to `Replayer` untouched. rrweb rebuilds them in a sandboxed
+  iframe; pre-processing DOM, stylesheet, resource, or mutation payloads makes
+  playback diverge from the captured page. In particular, never rewrite `href`, `src`,
   `_cssText`, CSS `url()`, or Meta URLs to `about:blank`; that exact remediation
   broke historical replay CSS in PR #2040. Handle request privacy at capture or
   the sandbox boundary instead of mutating stored rrweb events. Historical
@@ -112,15 +112,46 @@ agent answers about browser recordings in the Analytics template.
   requests for accurate rendering; the viewer accepts that fidelity tradeoff,
   uses rrweb's script-disabled sandbox plus `referrerpolicy="no-referrer"`, and
   must never add credentials or proxy those URLs through a privileged server.
+- Capture-time URL scrubbing must preserve load-bearing DOM resource attributes:
+  `src`, `srcset`, `poster`, `data`, and `href` only on resource links such as
+  stylesheets, preloads, and icons. Signed CDN query parameters are part of the
+  resource identity; redacting them produces missing CSS, fonts, images, and
+  oversized fallback icons. Keep scrubbing Meta/navigation URLs, anchor hrefs,
+  and console/network diagnostics. Captured `_cssText` and CSS `@import`/`url()`
+  values must remain byte-identical.
+- rrweb rebuilds into an `about:srcdoc` iframe, which inherits the Analytics
+  document's CSP. Analytics currently sends no CSP header; if a future change
+  adds restrictive `style-src`, `font-src`, or `img-src` directives, verify
+  historical replays and resolve external imports/fonts at capture before
+  blocking the recorded resource origins. Do not diagnose current font loss as
+  CSP without checking the deployed response headers first.
 - Let rrweb own normal iframe sizing via Meta / ViewportResize, and keep the
   outer wrapper in that same coordinate system for fit-to-stage scaling. Some
   legacy recordings contain demonstrably corrupt 4,000–7,500px-wide viewport
   values from ordinary desktop sessions. Only widths of at least 4,000px with
   aspect ratios above 4:1 are recovered to a 16:10 viewport; real 32:9 and
   mobile portrait captures remain untouched. The resize handler applies the
-  recovery to **both** rrweb's iframe and the outer stage.
+  recovery to **both** rrweb's iframe and the outer stage. This includes the
+  historical 3,000–3,999px-wide, sub-1,000px-high malformed shape; do not
+  narrow the guard back to only 4,000px+ recordings.
   Never remove this recovery, clamp only one layer, or broadly rewrite event
   geometry: those changes repeatedly recreated the ribbon/clipping regression.
+- The malformed-viewport recovery's sole event-data exception is pointer
+  geometry: project MouseMove, TouchMove, Drag, and MouseInteraction x/y into
+  the corrected camera and clamp impossible coordinates. Correcting the iframe
+  without its paired pointer projection makes rrweb cast valid target ids
+  thousands of pixels off-stage. Normal-viewport pointer events must retain
+  their original object references and exact coordinates.
+- Keep rrweb's stock cursor stylesheet and its hotspot transform. During
+  playback, hide the viewer's native pointer over Analytics' transparent
+  click-to-pause overlay so it cannot masquerade as a frozen recorded cursor.
+- Keep rrweb's recorded focus handling enabled. Focus and focus-visible state
+  affect menus, forms, and keyboard UX; disabling `triggerFocus` makes a valid
+  snapshot diverge from the source page.
+- `insertStyleRules` may suppress known toast/snackbar containers only. Never
+  hide generic framework primitives such as
+  `[data-radix-popper-content-wrapper]`: Radix dropdowns, selects, tooltips,
+  and other real recorded product UI all share that wrapper.
 - Keep the realistic fidelity and malformed-viewport tests in
   `SessionDetailPage.spec.ts`. Do not change their expectations merely to bless
   a new sanitizer or raw ultra-wide sizing; validate the affected replay in a
@@ -161,3 +192,14 @@ agent answers about browser recordings in the Analytics template.
   `.an-mask` or `data-an-mask`.
 - Use `.an-block`, `.an-ignore`, `data-an-block`, or `data-an-ignore` for
   sensitive zones that should not be captured.
+- A definitive upload `409` abandons only the conflicted replay identity and
+  immediately starts rrweb again under a fresh per-tab id, producing a new
+  Meta + FullSnapshot for long-lived SPA tabs. Recovery is limited to one
+  restart until an upload succeeds so a misconfigured endpoint cannot loop;
+  Analytics tracks the content-free `session replay upload rejected` lifecycle
+  event so conflicts and recovery success are measurable.
+- Do not label an old recording "corrupt" from pointer coordinates, unknown
+  mutation node ids, or changing Meta geometry alone. Those shapes can be
+  legitimate with scrolling, iframes/shadow DOM, navigation, and resize. A
+  historical-artifact notice needs a durable capture/ingest marker or another
+  low-false-positive invariant; do not guess from playback heuristics.

package/corpus/templates/analytics/app/global.css

@@ -245,72 +245,14 @@
   transform-origin: top left;
 }
 
-/* First-party visitor-cursor styles for rrweb playback. These are bundled
-   statically so the cursor stays visible even if the lazily imported
-   `@rrweb/replay/dist/style.css` sheet fails to load, and they replace the
-   default black arrow sprite with an app-styled indicator. The cursor lives
-   inside `.replayer-wrapper`, so it scales with the fit-to-stage transform. */
-.an-replay-stage-root .replayer-mouse {
-  position: absolute;
-  z-index: 2;
-  width: 1.125rem;
-  height: 1.5rem;
-  border-radius: 0;
-  background: transparent;
-  background-image: none;
-  box-shadow: none;
-  transform: none;
-  transition:
-    left 80ms linear,
-    top 80ms linear;
-  pointer-events: none;
-}
-
-.an-replay-stage-root .replayer-mouse::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: hsl(0 0% 100%);
-  clip-path: polygon(0 0, 0 77%, 30% 57%, 48% 100%, 68% 92%, 50% 51%, 92% 51%);
-  filter: drop-shadow(0 0 1px hsl(0 0% 0% / 0.95))
-    drop-shadow(0 1px 3px hsl(0 0% 0% / 0.35));
-}
-
+/* IMPORTANT: Keep rrweb's stock SVG arrow. Only suppress its permanently
+   visible purple ::after disc, which can otherwise read as the cursor itself
+   when the arrow is small. The stock .active animation still supplies the
+   brief click halo. Do not replace the arrow with an app-colored dot. */
 .an-replay-stage-root .replayer-mouse::after {
-  content: "";
-  position: absolute;
-  left: -0.5rem;
-  top: -0.5rem;
-  width: 1rem;
-  height: 1rem;
-  border-radius: 9999px;
-  border: 2px solid hsl(217 91% 60%);
-  background: transparent;
   opacity: 0;
 }
 
-/* rrweb toggles `.active` on mouse interactions; pulse a click ripple. */
-.an-replay-stage-root .replayer-mouse.active::after {
-  animation: an-replay-mouse-click 0.4s ease-out 1;
-}
-
-@keyframes an-replay-mouse-click {
-  0% {
-    opacity: 0.5;
-    transform: scale(1);
-  }
-  100% {
-    opacity: 0;
-    transform: scale(3.5);
-  }
-}
-
-.an-replay-stage-root .replayer-mouse-tail {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-}
-
 .analytics-session-snippet .plan-code-surface {
   border: 0;
   border-radius: 0;