@agent-native/core 0.180.0-nightly-20260915184036 → 0.180.0

package/corpus/templates/clips/app/components/player/browser-diagnostics-panel.tsx

@@ -2,6 +2,7 @@ import { useT } from "@agent-native/core/client/i18n";
 import type {
   BrowserDiagnosticConsoleLog,
   BrowserDiagnosticNetworkRequest,
+  BrowserDiagnosticTimelineEvent,
   BrowserDiagnosticsData,
 } from "@shared/browser-diagnostics";
 import {
@@ -437,6 +438,106 @@ function NetworkGroupRow({
   );
 }
 
+function timelineKindLabel(
+  t: ReturnType<typeof useT>,
+  event: BrowserDiagnosticTimelineEvent,
+): string {
+  if (event.kind === "console") return t("browserDiagnostics.consoleSource");
+  if (event.kind === "network") {
+    return event.phase === "request"
+      ? t("browserDiagnostics.requestStarted")
+      : t("browserDiagnostics.responseReceived");
+  }
+  if (event.kind === "navigation") return t("browserDiagnostics.navigation");
+  if (event.kind === "click") return t("browserDiagnostics.click");
+  if (event.kind === "input") return t("browserDiagnostics.input");
+  return t("browserDiagnostics.scroll");
+}
+
+function timelineDetail(event: BrowserDiagnosticTimelineEvent): string {
+  if (event.kind === "console") {
+    return `${event.level}: ${event.message.split("\n", 1)[0]}`;
+  }
+  if (event.kind === "network") {
+    const status = event.status ?? (event.error ? "ERR" : "");
+    return `${event.method} ${shortUrl(event.url)}${status ? ` · ${status}` : ""}`;
+  }
+  return event.url ?? event.target ?? event.kind;
+}
+
+function BrowserDiagnosticsTimelineRow({
+  event,
+  durationMs,
+  onSeek,
+}: {
+  event: BrowserDiagnosticTimelineEvent;
+  durationMs: number;
+  onSeek: (ms: number) => void;
+}) {
+  const t = useT();
+  return (
+    <div
+      className="flex min-h-9 items-center gap-2 border-b border-border/70 px-4 py-1.5 last:border-b-0"
+      data-browser-diagnostic-timeline-row
+    >
+      <span className="grid size-5 shrink-0 place-items-center rounded-md border border-border text-muted-foreground">
+        <IconInfoCircle className="size-3" aria-hidden="true" />
+      </span>
+      <span className="flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden">
+        <span className="shrink-0 text-[11px] font-medium text-muted-foreground">
+          {timelineKindLabel(t, event)}
+        </span>
+        <span className="min-w-0 truncate font-mono text-xs">
+          {timelineDetail(event)}
+        </span>
+      </span>
+      <DiagnosticTimeButton
+        elapsedMs={event.elapsedMs}
+        durationMs={durationMs}
+        onSeek={onSeek}
+      />
+    </div>
+  );
+}
+
+function BrowserDiagnosticsTimelineSection({
+  events,
+  durationMs,
+  onSeek,
+}: {
+  events: BrowserDiagnosticTimelineEvent[];
+  durationMs: number;
+  onSeek: (ms: number) => void;
+}) {
+  const t = useT();
+  return (
+    <AccordionItem
+      value="timeline"
+      className="border-border/70"
+      data-browser-diagnostics-section="timeline"
+    >
+      <AccordionTrigger className="min-h-10 px-4 py-2 text-xs hover:no-underline [&>svg]:size-3.5">
+        <span className="flex min-w-0 items-center gap-2">
+          <span className="truncate">{t("browserDiagnostics.timeline")}</span>
+          <span className="rounded-md border border-border px-1.5 py-px font-mono text-[10px] font-normal tabular-nums text-muted-foreground">
+            {events.length}
+          </span>
+        </span>
+      </AccordionTrigger>
+      <AccordionContent className="pb-0">
+        {events.map((event, index) => (
+          <BrowserDiagnosticsTimelineRow
+            key={`${event.elapsedMs}-${event.kind}-${index}`}
+            event={event}
+            durationMs={durationMs}
+            onSeek={onSeek}
+          />
+        ))}
+      </AccordionContent>
+    </AccordionItem>
+  );
+}
+
 function BrowserDiagnosticsSection({
   view,
   label,
@@ -550,6 +651,7 @@ export function BrowserDiagnosticsPanel({
     }),
     [diagnostics],
   );
+  const timeline = diagnostics.timeline ?? [];
   const source = captureSource(diagnostics);
   const hasFailures =
     diagnostics.summary.consoleErrorCount > 0 ||
@@ -622,7 +724,18 @@ export function BrowserDiagnosticsPanel({
       </div>
 
       <div className="min-h-0 flex-1 overflow-y-auto">
-        <Accordion type="single" defaultValue="issues" collapsible>
+        <Accordion
+          type="single"
+          defaultValue={timeline.length ? "timeline" : "issues"}
+          collapsible
+        >
+          {timeline.length ? (
+            <BrowserDiagnosticsTimelineSection
+              events={timeline}
+              durationMs={durationMs}
+              onSeek={onSeek}
+            />
+          ) : null}
           {sections.map((section) => (
             <BrowserDiagnosticsSection
               key={section.id}

package/corpus/templates/clips/app/i18n/en-US.ts

@@ -1827,6 +1827,13 @@ const messages = {
     capturedFrom: "Captured from {{source}}",
     browserCapture: "Browser capture",
     views: "Diagnostic views",
+    timeline: "Timeline",
+    navigation: "Navigation",
+    click: "Click",
+    input: "Input",
+    scroll: "Scroll",
+    requestStarted: "Request started",
+    responseReceived: "Response received",
     issues: "Issues",
     consoleSource: "Console",
     networkSource: "Network",

package/corpus/templates/clips/app/lib/browser-diagnostics-capture.ts

@@ -1,12 +1,18 @@
 import {
   MAX_BROWSER_DIAGNOSTIC_CONSOLE_LOGS,
+  MAX_BROWSER_DIAGNOSTIC_INTERACTION_EVENTS,
   MAX_BROWSER_DIAGNOSTIC_MESSAGE_LENGTH,
   MAX_BROWSER_DIAGNOSTIC_NETWORK_REQUESTS,
+  MAX_BROWSER_DIAGNOSTIC_TARGET_LENGTH,
   MAX_BROWSER_DIAGNOSTIC_URL_LENGTH,
+  buildBrowserDiagnosticTimeline,
   redactBrowserDiagnosticString,
+  sanitizeBrowserDiagnosticNavigationUrl,
   summarizeBrowserDiagnostics,
   type BrowserDiagnosticConsoleLevel,
   type BrowserDiagnosticConsoleLog,
+  type BrowserDiagnosticInteractionEvent,
+  type BrowserDiagnosticInteractionKind,
   type BrowserDiagnosticNetworkRequest,
   type BrowserDiagnosticsData,
 } from "@shared/browser-diagnostics";
@@ -83,12 +89,40 @@ function requestMethod(input: RequestInfo | URL, init?: RequestInit): string {
   ).toUpperCase();
 }
 
+function safeTargetPart(value: string | null): string | null {
+  if (!value || value.length > MAX_BROWSER_DIAGNOSTIC_TARGET_LENGTH) {
+    return null;
+  }
+  return /^[A-Za-z0-9_.:-]+$/.test(value) ? value : null;
+}
+
+function describeTarget(target: EventTarget | null): string | null {
+  if (!(target instanceof Element)) return null;
+  const element = target.closest(
+    "button,a,input,textarea,select,[role=button]",
+  ) as Element | null;
+  const candidate = element ?? target;
+  const tag = candidate.tagName.toLowerCase();
+  const id = safeTargetPart(candidate.id);
+  const testId = safeTargetPart(candidate.getAttribute("data-testid"));
+  const name = safeTargetPart(candidate.getAttribute("name"));
+  const selector = id
+    ? `#${id}`
+    : testId
+      ? `[data-testid=${testId}]`
+      : name
+        ? `[name=${name}]`
+        : "";
+  return truncate(`${tag}${selector}`, MAX_BROWSER_DIAGNOSTIC_TARGET_LENGTH);
+}
+
 export function createBrowserDiagnosticsCapture(): BrowserDiagnosticsCapture {
   const startedAt = new Date().toISOString();
   const startedAtMs = Date.now();
   const startedAtPerf = performance.now();
   const consoleLogs: BrowserDiagnosticConsoleLog[] = [];
   const networkRequests: BrowserDiagnosticNetworkRequest[] = [];
+  const interactionEvents: BrowserDiagnosticInteractionEvent[] = [];
   const originalConsole = {
     debug: console.debug,
     log: console.log,
@@ -115,6 +149,25 @@ export function createBrowserDiagnosticsCapture(): BrowserDiagnosticsCapture {
     Math.max(0, Math.round(performance.now() - startedAtPerf));
   const timestamp = () => startedAtMs + elapsed();
 
+  const pushInteraction = (
+    kind: BrowserDiagnosticInteractionKind,
+    target?: EventTarget | null,
+    url?: string,
+  ) => {
+    if (!active) return;
+    if (interactionEvents.length >= MAX_BROWSER_DIAGNOSTIC_INTERACTION_EVENTS) {
+      interactionEvents.shift();
+    }
+    const targetDescription = describeTarget(target ?? null);
+    interactionEvents.push({
+      timestampMs: timestamp(),
+      elapsedMs: elapsed(),
+      kind,
+      ...(targetDescription ? { target: targetDescription } : {}),
+      ...(url ? { url: sanitizeBrowserDiagnosticNavigationUrl(url) } : {}),
+    });
+  };
+
   const pushConsole = (
     level: BrowserDiagnosticConsoleLevel,
     args: unknown[],
@@ -305,6 +358,48 @@ export function createBrowserDiagnosticsCapture(): BrowserDiagnosticsCapture {
   window.addEventListener("error", onError);
   window.addEventListener("unhandledrejection", onUnhandledRejection);
 
+  const onClick = (event: MouseEvent) => pushInteraction("click", event.target);
+  const onInput = (event: Event) => pushInteraction("input", event.target);
+  let lastScrollElapsed = -Infinity;
+  const onScroll = (event: Event) => {
+    const currentElapsed = elapsed();
+    if (currentElapsed - lastScrollElapsed < 250) return;
+    lastScrollElapsed = currentElapsed;
+    pushInteraction("scroll", event.target);
+  };
+  const onNavigation = () =>
+    pushInteraction("navigation", null, window.location.href);
+  const originalPushState = history.pushState;
+  const originalReplaceState = history.replaceState;
+  const patchedPushState = function patchedPushState(
+    this: History,
+    state: unknown,
+    unused: string,
+    url?: string | URL | null,
+  ) {
+    const result = originalPushState.call(this, state, unused, url);
+    onNavigation();
+    return result;
+  };
+  const patchedReplaceState = function patchedReplaceState(
+    this: History,
+    state: unknown,
+    unused: string,
+    url?: string | URL | null,
+  ) {
+    const result = originalReplaceState.call(this, state, unused, url);
+    onNavigation();
+    return result;
+  };
+  history.pushState = patchedPushState;
+  history.replaceState = patchedReplaceState;
+  document.addEventListener("click", onClick, true);
+  document.addEventListener("input", onInput, true);
+  document.addEventListener("scroll", onScroll, true);
+  window.addEventListener("popstate", onNavigation);
+  window.addEventListener("hashchange", onNavigation);
+  pushInteraction("navigation", null, window.location.href);
+
   const restore = () => {
     window.fetch = originalFetch;
     for (const level of ["debug", "log", "info", "warn", "error"] as const) {
@@ -314,6 +409,17 @@ export function createBrowserDiagnosticsCapture(): BrowserDiagnosticsCapture {
     XMLHttpRequest.prototype.send = originalXhrSend;
     window.removeEventListener("error", onError);
     window.removeEventListener("unhandledrejection", onUnhandledRejection);
+    document.removeEventListener("click", onClick, true);
+    document.removeEventListener("input", onInput, true);
+    document.removeEventListener("scroll", onScroll, true);
+    window.removeEventListener("popstate", onNavigation);
+    window.removeEventListener("hashchange", onNavigation);
+    if (history.pushState === patchedPushState) {
+      history.pushState = originalPushState;
+    }
+    if (history.replaceState === patchedReplaceState) {
+      history.replaceState = originalReplaceState;
+    }
   };
 
   const stop = () => {
@@ -331,10 +437,12 @@ export function createBrowserDiagnosticsCapture(): BrowserDiagnosticsCapture {
       endedAt,
       consoleLogs: [...consoleLogs],
       networkRequests: [...networkRequests],
+      interactionEvents: [...interactionEvents],
     };
     stoppedSnapshot = {
       ...snapshot,
       summary: summarizeBrowserDiagnostics(snapshot),
+      timeline: buildBrowserDiagnosticTimeline(snapshot),
     };
     return stoppedSnapshot;
   };

package/corpus/templates/clips/app/routes/record.tsx

@@ -2140,6 +2140,7 @@ export default function RecordRoute() {
             endedAt: snapshot.endedAt,
             consoleLogs: snapshot.consoleLogs,
             networkRequests: snapshot.networkRequests,
+            interactionEvents: snapshot.interactionEvents,
           } as any,
         );
       } catch (err) {

package/corpus/templates/clips/changelog/2026-09-15-recordings-include-a-structured-timeline-of-browser-interact.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-09-15
+---
+
+Recordings include a structured timeline of browser interactions and diagnostics

package/corpus/templates/clips/chrome-extension/public/manifest.json

@@ -46,6 +46,13 @@
       "run_at": "document_idle",
       "all_frames": false
     },
+    {
+      "matches": ["<all_urls>"],
+      "js": ["assets/content-history-bridge.js"],
+      "run_at": "document_start",
+      "world": "MAIN",
+      "all_frames": false
+    },
     {
       "matches": ["<all_urls>"],
       "js": ["assets/content-script.js"],