fix(extension): keep record overlay timer across navigations

apps/extension/src/content/RecordOverlay.tsx

@@ -10,6 +10,12 @@ import recordIconUrl from "../../assets/record-icon.png";
 
 export interface RecordRequestData {
   id: string;
+  /**
+   * Epoch ms when the recording began. Supplied by the background so the timer
+   * keeps counting the whole session across navigations; falls back to mount
+   * time when the background could not report it.
+   */
+  startedAtMs?: number;
   onFinish: () => void;
 }
 
@@ -71,20 +77,25 @@ export function RecordOverlay({ request }: Props) {
     setShow(false);
   }, [request]);
 
+  const requestStartedAtMs = request?.startedAtMs;
+
   useEffect(() => {
-    setElapsedSeconds(0);
     setDragPos(null);
     setDragging(false);
     dragStartRef.current = null;
-    if (!request) return;
+    if (!request) {
+      setElapsedSeconds(0);
+      return;
+    }
 
-    const startedAt = Date.now();
+    const startedAt = requestStartedAtMs ?? Date.now();
     const updateElapsed = () => {
-      setElapsedSeconds(Math.floor((Date.now() - startedAt) / 1_000));
+      setElapsedSeconds(Math.max(0, Math.floor((Date.now() - startedAt) / 1_000)));
     };
+    updateElapsed();
     const timer = window.setInterval(updateElapsed, TIMER_REFRESH_MS);
     return () => window.clearInterval(timer);
-  }, [request?.id]);
+  }, [request?.id, requestStartedAtMs]);
 
   const onPillPointerDown = useCallback((e: ReactPointerEvent<HTMLDivElement>) => {
     if (e.button !== 0) return;

apps/extension/src/content/__tests__/RecordOverlay.test.tsx

@@ -5,7 +5,7 @@ import { createElement } from "react";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { RecordOverlay } from "../RecordOverlay";
 
-function renderOverlay(request: { id: string; onFinish: () => void } | null) {
+function renderOverlay(request: { id: string; startedAtMs?: number; onFinish: () => void } | null) {
   return render(
     createElement(I18nextProvider, { i18n }, createElement(RecordOverlay, { request })),
   );
@@ -129,6 +129,20 @@ describe("RecordOverlay", () => {
     expect(label.textContent).toBe("00:10");
   });
 
+  it("continues the session timer when the overlay remounts on a new page", () => {
+    vi.useFakeTimers();
+    const startedAtMs = Date.now() - 65_000;
+    const { container } = renderOverlay({ id: "rec-1", startedAtMs, onFinish: vi.fn() });
+
+    const pill = container.querySelector("[data-slot='record-overlay-pill']") as HTMLElement;
+    const label = container.querySelector("[data-slot='record-overlay-label']") as HTMLElement;
+    expect(pill.dataset.phase).toBe("timer");
+    expect(label.textContent).toBe("01:05");
+
+    advanceRecording(5_000);
+    expect(label.textContent).toBe("01:10");
+  });
+
   it("does not start drag when pointer down on finish", () => {
     const { container } = renderOverlay({ id: "rec-1", onFinish: vi.fn() });
     const pill = container.querySelector("[data-slot='record-overlay-pill']") as HTMLElement;

apps/extension/src/content/record-capture.ts

@@ -468,7 +468,7 @@ export function handleRecordContentMessage(
     capture: RecordCaptureController | null;
     setActiveRequestId(id: string | null): void;
     setCapture(capture: RecordCaptureController | null): void;
-    onStart(requestId: string): void;
+    onStart(requestId: string, startedAtMs?: number): void;
     onStop(): void;
   },
   sendResponse?: (response: RecordStartAck | RecordStopAck) => void,
@@ -485,7 +485,7 @@ export function handleRecordContentMessage(
       }),
     );
     state.setActiveRequestId(message.requestId);
-    state.onStart(message.requestId);
+    state.onStart(message.requestId, message.startedAtMs);
     sendResponse?.({ ok: true });
     return sendResponse !== undefined;
   }