@agent-native/core 0.91.2 → 0.92.1

package/corpus/templates/analytics/app/pages/sessions/SessionDetailPage.tsx

@@ -156,6 +156,8 @@ type ReplayViewportDimensions = {
 
 const DEFAULT_PLAYER_WIDTH = 1024;
 const DEFAULT_PLAYER_HEIGHT = 640;
+const MIN_REPLAY_DISPLAY_ASPECT_RATIO = 0.45;
+const MAX_REPLAY_DISPLAY_ASPECT_RATIO = 3;
 const DEFAULT_SPEED = 2;
 const SPEED_OPTIONS = [0.5, 1, 2, 4, 8];
 const SKIP_STEP_MS = 5000;
@@ -166,15 +168,12 @@ const REPLAY_CHUNK_UNAVAILABLE_MESSAGE = "Session replay chunk is unavailable";
 const DEFAULT_DEVTOOLS_HEIGHT = 220;
 const MIN_STAGE_HEIGHT_PX = 240;
 const SCRUBBER_MARKER_LIMIT = 500;
-/** Reject Meta/resize frames that produce the ultra-wide ribbon letterbox.
- *  True 21:9 ultrawide is ~2.33; multi-monitor spans and corrupt frames are
- *  usually well above that and collapse the stage after fit-to-scale. */
-const MIN_REPLAY_VIEWPORT_WIDTH = 320;
-const MIN_REPLAY_VIEWPORT_HEIGHT = 240;
-const MAX_REPLAY_ASPECT_RATIO = 2.45;
-const MIN_REPLAY_ASPECT_RATIO = 0.5;
 const TIMELINE_MARKER_LIMIT = 300;
 const TIMELINE_FOLLOW_PAUSE_MS = 4000;
+/** Toast/snackbar noise only — keep insertStyleRules minimal like builder-internal. */
+const SUPPRESS_OVERLAYS_CSS = [
+  "[data-radix-popper-content-wrapper], .Toastify, [class*='toast'], [class*='Toast'], [class*='Snackbar'] { display: none !important; }",
+];
 const SESSION_REPLAY_CONSOLE_EVENT_TAG = "agent-native.console";
 const SESSION_REPLAY_NETWORK_EVENT_TAG = "agent-native.network";
 
@@ -451,6 +450,7 @@ function ReplayWorkbench({
       />
       <ReplayTimeline
         markers={markers}
+        isLoading={!response.isComplete}
         activeMarkerId={activeMarkerId}
         onSeek={(ms) => seekRef.current(ms, true)}
       />
@@ -506,10 +506,9 @@ function ReplayPlayer({
   const scrubbingRef = useRef(false);
   const scrubResumePlayingRef = useRef(false);
 
-  const playerWidth =
-    streamedDims?.width ?? initialDims?.width ?? DEFAULT_PLAYER_WIDTH;
-  const playerHeight =
-    streamedDims?.height ?? initialDims?.height ?? DEFAULT_PLAYER_HEIGHT;
+  const displayDims = clampReplayDisplayDimensions(streamedDims ?? initialDims);
+  const playerWidth = displayDims?.width ?? DEFAULT_PLAYER_WIDTH;
+  const playerHeight = displayDims?.height ?? DEFAULT_PLAYER_HEIGHT;
   const skipRanges = useMemo(() => buildIdleSkipRanges(events), [events]);
   const skipRangesRef = useLiveRef(skipRanges);
   const skipInactiveRef = useLiveRef(skipInactive);
@@ -695,33 +694,21 @@ function ReplayPlayer({
       if (cancelled || !stageRootRef.current) return;
 
       stageRootRef.current.innerHTML = "";
-      const frameDims = replayViewportDimensions(replayEvents);
-      const playbackEvents = sanitizeReplayViewportEvents(
-        replayEvents,
-        frameDims ?? {
-          width: DEFAULT_PLAYER_WIDTH,
-          height: DEFAULT_PLAYER_HEIGHT,
-        },
-      );
-      setStreamedDims(frameDims);
-      localReplayer = new Replayer(playbackEvents as any[], {
+      // Match builder-internal: pass events through untouched and let rrweb own
+      // iframe sizing via Meta / ViewportResize. Only use dimensions for CSS
+      // fit-to-stage scaling of the outer wrapper — never rewrite Meta or force
+      // iframe width/height (that mismatches the FullSnapshot DOM and blanks
+      // the stage).
+      setStreamedDims(replayViewportDimensions(replayEvents));
+      localReplayer = new Replayer(replayEvents as any[], {
         root: stageRootRef.current,
         speed: speedRef.current,
         skipInactive: false,
         showWarning: false,
         showDebug: false,
         triggerFocus: false,
-        // Subtle FullStory-style trail behind the visitor cursor. The canvas
-        // is resized alongside the iframe in applyReplayFrameDimensions.
-        mouseTail: {
-          strokeStyle: "rgba(59, 130, 246, 0.35)",
-          lineWidth: 2,
-          duration: 600,
-          lineCap: "round",
-        },
-        insertStyleRules: [
-          "[data-radix-popper-content-wrapper], .Toastify, [class*='toast'], [class*='Toast'] { display: none !important; }",
-        ],
+        mouseTail: false,
+        insertStyleRules: SUPPRESS_OVERLAYS_CSS,
       });
       replayerRef.current = localReplayer;
       const meta = localReplayer.getMetaData?.();
@@ -732,7 +719,6 @@ function ReplayPlayer({
         0,
         Number.isFinite(total) ? total : 0,
       );
-      applyReplayFrameDimensions(localReplayer, frameDims);
       localReplayer.on?.("finish", () => {
         setPlaying(false);
         const finalTime = Number(localReplayer.getCurrentTime?.() ?? total);
@@ -740,21 +726,20 @@ function ReplayPlayer({
       });
       localReplayer.on?.("resize", (payload: unknown) => {
         const dims = payload as { width?: unknown; height?: unknown };
-        const nextDims = normalizeReplayDimensions(dims.width, dims.height);
-        if (nextDims) {
-          applyReplayFrameDimensions(localReplayer, nextDims);
-          revealReplayFrame(localReplayer);
-          setStreamedDims(nextDims);
+        if (
+          typeof dims.width === "number" &&
+          typeof dims.height === "number" &&
+          Number.isFinite(dims.width) &&
+          Number.isFinite(dims.height) &&
+          dims.width > 0 &&
+          dims.height > 0
+        ) {
+          setStreamedDims({
+            width: Math.round(dims.width),
+            height: Math.round(dims.height),
+          });
         }
       });
-      localReplayer.on?.("fullsnapshot-rebuilded", () => {
-        applyReplayFrameDimensions(
-          localReplayer,
-          replayViewportAt(eventsRef.current, currentTimeRef.current) ??
-            frameDims,
-        );
-        revealReplayFrame(localReplayer);
-      });
       updateTime(startAt);
       setStatus("ready");
       try {
@@ -769,14 +754,6 @@ function ReplayPlayer({
         }
         setPlaying(false);
       }
-      window.requestAnimationFrame(() => {
-        applyReplayFrameDimensions(
-          localReplayer,
-          replayViewportAt(eventsRef.current, currentTimeRef.current) ??
-            frameDims,
-        );
-        revealReplayFrame(localReplayer);
-      });
     }
 
     void loadReplay().catch((loadError: any) => {
@@ -1250,10 +1227,12 @@ function ReplayIconButton({
 
 function ReplayTimeline({
   markers,
+  isLoading,
   activeMarkerId,
   onSeek,
 }: {
   markers: ReplayMarker[];
+  isLoading: boolean;
   activeMarkerId: string | null;
   onSeek: (ms: number) => void;
 }) {
@@ -1292,35 +1271,28 @@ function ReplayTimeline({
   }, [activeMarkerId, filteredMarkers]);
 
   return (
-    <Card className="analytics-session-detail-timeline min-h-0 overflow-hidden">
-      <CardContent className="flex min-h-0 flex-1 flex-col p-0">
-        <div className="shrink-0 space-y-2 border-b px-3 py-2">
-          <div className="flex items-center gap-2 text-sm font-semibold">
-            <IconTimelineEvent className="h-4 w-4" />
+    <Card className="analytics-session-detail-timeline min-h-0 min-w-0 overflow-hidden">
+      <CardContent className="flex min-h-0 min-w-0 flex-1 flex-col p-0">
+        <div className="min-w-0 shrink-0 space-y-2 border-b px-3 py-2">
+          <div className="truncate text-sm font-semibold">
             {t("sessions.timeline")}
           </div>
-          <p className="text-xs text-muted-foreground">
-            {filteredMarkers.length
-              ? t("sessions.timelineDescription", {
-                  count: String(filteredMarkers.length),
-                  total: String(markers.length),
-                })
-              : t("sessions.noTimelineEvents")}
-          </p>
-          <div className="relative">
-            <IconSearch className="pointer-events-none absolute start-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
-            <Input
-              type="search"
-              className="h-7 ps-7 text-xs"
-              value={query}
-              placeholder={t("sessions.timelineSearch")}
-              onChange={(event) => setQuery(event.target.value)}
-            />
-          </div>
+          {!isLoading || markers.length ? (
+            <div className="relative">
+              <IconSearch className="pointer-events-none absolute start-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+              <Input
+                type="search"
+                className="h-7 ps-7 text-xs"
+                value={query}
+                placeholder={t("sessions.timelineSearch")}
+                onChange={(event) => setQuery(event.target.value)}
+              />
+            </div>
+          ) : null}
         </div>
         <div
           ref={listRef}
-          className="min-h-0 flex-1 overflow-auto"
+          className="min-h-0 min-w-0 flex-1 overflow-y-auto overflow-x-hidden"
           onWheel={() => {
             lastManualScrollAtRef.current = Date.now();
           }}
@@ -1329,7 +1301,7 @@ function ReplayTimeline({
           }}
         >
           {filteredMarkers.length ? (
-            <div className="divide-y">
+            <div className="min-w-0 divide-y">
               {filteredMarkers.map((marker) => {
                 const expanded = marker.id === expandedMarkerId;
                 const active = marker.id === activeMarkerId;
@@ -1344,7 +1316,7 @@ function ReplayTimeline({
                   >
                     <button
                       type="button"
-                      className="flex w-full gap-2.5 px-3 py-2.5 text-left transition-colors hover:bg-muted/50"
+                      className="flex w-full min-w-0 gap-2.5 px-3 py-2.5 text-left transition-colors hover:bg-muted/50"
                       aria-expanded={expanded}
                       aria-current={active ? "true" : undefined}
                       onClick={() => {
@@ -1375,12 +1347,12 @@ function ReplayTimeline({
                       >
                         <MarkerIcon kind={marker.kind} />
                       </span>
-                      <span className="min-w-0 flex-1">
-                        <span className="flex items-center justify-between gap-3">
+                      <span className="min-w-0 flex-1 overflow-hidden">
+                        <span className="flex min-w-0 items-center justify-between gap-3">
                           <span className="truncate text-sm font-medium">
                             {marker.label}
                           </span>
-                          <span className="font-mono text-xs text-muted-foreground">
+                          <span className="shrink-0 font-mono text-xs text-muted-foreground">
                             {formatClock(marker.offsetMs)}
                           </span>
                         </span>
@@ -1402,7 +1374,7 @@ function ReplayTimeline({
                 );
               })}
             </div>
-          ) : (
+          ) : isLoading ? null : (
             <div className="p-4 text-sm text-muted-foreground">
               {query.trim()
                 ? t("sessions.timelineNoMatches")
@@ -2177,9 +2149,8 @@ function hasPlayableReplayEvents(events: unknown[]): boolean {
 export function replayViewportDimensions(
   events: AnyReplayEvent[],
 ): ReplayViewportDimensions | null {
-  // Prefer the most recent sane Meta/ViewportResize frame. Early Meta events
-  // (or corrupt resize payloads) can report absurd aspect ratios that collapse
-  // the stage into an ultra-wide ribbon after fit-to-stage scaling.
+  // Latest Meta / ViewportResize for CSS fit-to-stage only. Never rewrite these
+  // into the event stream — rrweb must keep Meta in sync with the FullSnapshot.
   let best: ReplayViewportDimensions | null = null;
   for (const event of events) {
     const dims = dimensionsFromReplayEvent(event);
@@ -2188,22 +2159,6 @@ export function replayViewportDimensions(
   return best;
 }
 
-export function replayViewportAt(
-  events: AnyReplayEvent[],
-  currentTime: number,
-): ReplayViewportDimensions | null {
-  const startedAt = replayStartedAt(events);
-  let current: ReplayViewportDimensions | null = null;
-  for (const event of events) {
-    const dims = dimensionsFromReplayEvent(event);
-    if (!dims) continue;
-    const offset = Number(event.timestamp ?? 0) - startedAt;
-    if (offset <= currentTime + 50) current = dims;
-    else break;
-  }
-  return current ?? replayViewportDimensions(events);
-}
-
 function dimensionsFromReplayEvent(
   event: AnyReplayEvent,
 ): ReplayViewportDimensions | null {
@@ -2219,12 +2174,7 @@ function dimensionsFromReplayEvent(
   return null;
 }
 
-/**
- * Prefer a sane viewport for the stage. Returns null only when width/height
- * are missing or non-positive. Out-of-range aspect ratios are clamped rather
- * than rejected so genuine wide windows keep their height (and most of their
- * width) instead of collapsing to the default 1024×640 fallback.
- */
+/** Read raw positive finite dimensions; no aspect clamping. */
 export function normalizeReplayDimensions(
   width: unknown,
   height: unknown,
@@ -2239,28 +2189,30 @@ export function normalizeReplayDimensions(
   ) {
     return null;
   }
-  return clampReplayViewport(width, height);
+  return {
+    width: Math.round(width),
+    height: Math.round(height),
+  };
 }
 
-/**
- * Clamp Meta / ViewportResize dimensions into a displayable aspect range.
- * Multi-monitor spans and corrupt frames often report absurd widths; keep the
- * captured height and shrink width (or vice versa) so the DOM still roughly
- * matches the recorded layout.
- */
-export function clampReplayViewport(
-  width: number,
-  height: number,
-): ReplayViewportDimensions {
-  let nextWidth = Math.max(MIN_REPLAY_VIEWPORT_WIDTH, Math.round(width));
-  let nextHeight = Math.max(MIN_REPLAY_VIEWPORT_HEIGHT, Math.round(height));
-  const aspect = nextWidth / nextHeight;
-  if (aspect > MAX_REPLAY_ASPECT_RATIO) {
-    nextWidth = Math.round(nextHeight * MAX_REPLAY_ASPECT_RATIO);
-  } else if (aspect < MIN_REPLAY_ASPECT_RATIO) {
-    nextHeight = Math.round(nextWidth / MIN_REPLAY_ASPECT_RATIO);
+export function clampReplayDisplayDimensions(
+  dims: ReplayViewportDimensions | null,
+): ReplayViewportDimensions | null {
+  if (!dims) return null;
+  const aspect = dims.width / dims.height;
+  if (aspect > MAX_REPLAY_DISPLAY_ASPECT_RATIO) {
+    return {
+      width: Math.round(dims.height * MAX_REPLAY_DISPLAY_ASPECT_RATIO),
+      height: dims.height,
+    };
+  }
+  if (aspect < MIN_REPLAY_DISPLAY_ASPECT_RATIO) {
+    return {
+      width: dims.width,
+      height: Math.round(dims.width / MIN_REPLAY_DISPLAY_ASPECT_RATIO),
+    };
   }
-  return { width: nextWidth, height: nextHeight };
+  return dims;
 }
 
 export function filterReplayMarkers(
@@ -2284,98 +2236,6 @@ export function filterReplayMarkers(
   });
 }
 
-/**
- * Rewrite Meta / ViewportResize frames so rrweb never applies absurd aspect
- * ratios that collapse the stage into an ultra-wide ribbon. Prefer clamping
- * the captured dimensions (preserve height, shrink width) over replacing them
- * with the default fallback, which would misalign the recorded DOM.
- */
-export function sanitizeReplayViewportEvents(
-  events: AnyReplayEvent[],
-  fallback: ReplayViewportDimensions,
-): AnyReplayEvent[] {
-  return events.map((event) => {
-    if (event.type === RRWEB_EVENT_TYPE.Meta && isRecord(event.data)) {
-      return rewriteViewportEventData(event, event.data, fallback);
-    }
-    if (
-      event.type === RRWEB_EVENT_TYPE.IncrementalSnapshot &&
-      event.data?.source === INCREMENTAL_SOURCE.ViewportResize &&
-      isRecord(event.data)
-    ) {
-      return rewriteViewportEventData(event, event.data, fallback);
-    }
-    return event;
-  });
-}
-
-function rewriteViewportEventData(
-  event: AnyReplayEvent,
-  data: AnyRecord,
-  fallback: ReplayViewportDimensions,
-): AnyReplayEvent {
-  const width = data.width;
-  const height = data.height;
-  if (
-    typeof width === "number" &&
-    typeof height === "number" &&
-    Number.isFinite(width) &&
-    Number.isFinite(height) &&
-    width > 0 &&
-    height > 0
-  ) {
-    const clamped = clampReplayViewport(width, height);
-    if (
-      clamped.width === Math.round(width) &&
-      clamped.height === Math.round(height)
-    ) {
-      return event;
-    }
-    return {
-      ...event,
-      data: {
-        ...data,
-        width: clamped.width,
-        height: clamped.height,
-      },
-    };
-  }
-  return {
-    ...event,
-    data: {
-      ...data,
-      width: fallback.width,
-      height: fallback.height,
-    },
-  };
-}
-
-function applyReplayFrameDimensions(
-  replayer: any,
-  dims: ReplayViewportDimensions | null,
-) {
-  const width = dims?.width ?? DEFAULT_PLAYER_WIDTH;
-  const height = dims?.height ?? DEFAULT_PLAYER_HEIGHT;
-  const wrapper = replayer?.wrapper as HTMLElement | undefined;
-  const iframe = replayer?.iframe as HTMLIFrameElement | undefined;
-  const mouseTail = replayer?.mouseTail as HTMLCanvasElement | undefined;
-  for (const element of [wrapper, iframe]) {
-    if (!element) continue;
-    element.style.width = `${width}px`;
-    element.style.height = `${height}px`;
-  }
-  for (const element of [iframe, mouseTail]) {
-    if (!element) continue;
-    element.setAttribute("width", String(width));
-    element.setAttribute("height", String(height));
-  }
-}
-
-function revealReplayFrame(replayer: any) {
-  const iframe = replayer?.iframe as HTMLIFrameElement | undefined;
-  if (iframe) iframe.style.display = "inherit";
-}
-
 function replayStartedAt(events: AnyReplayEvent[]): number {
   const first = events.find((event) =>
     Number.isFinite(Number(event.timestamp)),

package/corpus/templates/analytics/app/pages/sessions/SessionsPage.tsx

@@ -1,6 +1,5 @@
 import { CodeSurface } from "@agent-native/core/blocks";
 import {
-  agentNativePath,
   useActionQuery,
   useBuilderConnectFlow,
   useBuilderStatus,
@@ -80,13 +79,7 @@ type SessionRecordingIdentity = Pick<
 
 type SessionRecordingDevice = Pick<SessionRecordingSummary, "metadata">;
 
-type DemoStatus = {
-  enabled?: boolean;
-  forced?: boolean;
-};
-
 const RANGE_OPTIONS: ReplayRange[] = ["24h", "7d", "30d", "90d", "all"];
-const DEMO_STATUS_URL = agentNativePath("/_agent-native/demo/status");
 
 export default function SessionsPage() {
   const t = useT();
@@ -111,7 +104,6 @@ export default function SessionsPage() {
     { staleTime: 30_000 },
   );
 
-  const demoModeEnabled = useDemoModeEnabled();
   const recordings = data ?? [];
 
   function updateFilter(key: string, value: string) {
@@ -256,7 +248,7 @@ export default function SessionsPage() {
                       </span>
                       <span className="min-w-0">
                         <span className="block truncate text-sm font-medium text-foreground">
-                          {visitorLabel(recording, t, demoModeEnabled)}
+                          {visitorLabel(recording, t)}
                         </span>
                         <span className="mt-0.5 block truncate text-xs text-muted-foreground">
                           {formatDateTime(lastSeen)} ·{" "}
@@ -278,11 +270,7 @@ export default function SessionsPage() {
                       </span>
                       <span className="analytics-session-app-meta min-w-0 text-left">
                         <span className="analytics-session-badges flex flex-wrap gap-1.5 text-xs text-muted-foreground">
-                          <span>
-                            {t("sessions.pageCountCompact", {
-                              count: formatNumber(recording.pageCount),
-                            })}
-                          </span>
+                          <span>{formatPageCount(recording.pageCount, t)}</span>
                           {recording.errorCount > 0 ? (
                             <span className="font-medium text-destructive">
                               {t("sessions.errorCount", {
@@ -316,22 +304,6 @@ export default function SessionsPage() {
   );
 }
 
-function useDemoModeEnabled(): boolean {
-  const { data } = useQuery({
-    queryKey: ["agent-native", "demo-mode"],
-    queryFn: async () => {
-      const res = await fetch(DEMO_STATUS_URL, {
-        credentials: "same-origin",
-      });
-      if (!res.ok) return null;
-      return (await res.json()) as DemoStatus | null;
-    },
-    refetchInterval: 4_000,
-    staleTime: 2_000,
-  });
-  return data?.enabled === true || data?.forced === true;
-}
-
 function EmptySessionsState() {
   const t = useT();
   const storageStatus = useReplayStorageStatus();
@@ -504,9 +476,7 @@ function rangeLabel(value: ReplayRange, t: ReturnType<typeof useT>): string {
 function visitorLabel(
   recording: SessionRecordingIdentity,
   t: ReturnType<typeof useT>,
-  demoModeEnabled: boolean,
 ): string {
-  if (demoModeEnabled) return demoVisitorLabel(recording);
   const email = emailLike(recording.userId) || emailLike(recording.userKey);
   if (email) return email;
   return (
@@ -517,29 +487,6 @@ function visitorLabel(
   );
 }
 
-export function demoVisitorLabel(recording: SessionRecordingIdentity): string {
-  const source =
-    emailLike(recording.userId) ||
-    emailLike(recording.userKey) ||
-    recording.userId ||
-    recording.userKey ||
-    recording.anonymousId ||
-    recording.sessionId ||
-    recording.id;
-  const hash = stableHash(source);
-  const first = DEMO_FIRST_NAMES[hash % DEMO_FIRST_NAMES.length];
-  const last =
-    DEMO_LAST_NAMES[
-      Math.floor(hash / DEMO_FIRST_NAMES.length) % DEMO_LAST_NAMES.length
-    ];
-  const domain =
-    DEMO_DOMAINS[
-      Math.floor(hash / (DEMO_FIRST_NAMES.length * DEMO_LAST_NAMES.length)) %
-        DEMO_DOMAINS.length
-    ];
-  return `${first}.${last}@${domain}`.toLowerCase();
-}
-
 function emailLike(value: string | null): string | null {
   if (!value?.includes("@")) return null;
   return value;
@@ -667,53 +614,16 @@ function formatNumber(value: number): string {
   return new Intl.NumberFormat().format(value);
 }
 
-function stableHash(value: string): number {
-  let hash = 2166136261;
-  for (let i = 0; i < value.length; i += 1) {
-    hash ^= value.charCodeAt(i);
-    hash = Math.imul(hash, 16777619);
+function formatPageCount(value: number, t: ReturnType<typeof useT>): string {
+  const count = Math.max(0, Math.round(value || 0));
+  if (count === 1) {
+    return t("sessions.pageCountCompactSingular", {
+      count: formatNumber(count),
+    });
   }
-  return hash >>> 0;
+  return t("sessions.pageCountCompact", { count: formatNumber(count) });
 }
 
-const DEMO_FIRST_NAMES = [
-  "Avery",
-  "Blake",
-  "Cameron",
-  "Devon",
-  "Emerson",
-  "Finley",
-  "Harper",
-  "Jordan",
-  "Morgan",
-  "Quinn",
-  "Riley",
-  "Taylor",
-];
-
-const DEMO_LAST_NAMES = [
-  "Bennett",
-  "Carter",
-  "Ellis",
-  "Hayes",
-  "Keller",
-  "Monroe",
-  "Parker",
-  "Reed",
-  "Sullivan",
-  "Walker",
-  "Young",
-  "Zimmer",
-];
-
-const DEMO_DOMAINS = [
-  "acme.test",
-  "northstar.test",
-  "orbit.test",
-  "riverbank.test",
-  "summit.test",
-];
-
 const SESSION_REPLAY_SNIPPET = `// Agent Native templates already call configureTracking().
 import { configureTracking } from "@agent-native/core/client";