fix(recorder): add iframe support

apps/extension/src/tools/record.ts

@@ -18,6 +18,11 @@ import {
   type RecordStepAck,
   type RecordStopMessage,
 } from "@/lib/record-bridge";
+import {
+  type RecordFrameCoordinator,
+  type RecordingCaptureScope,
+  recordFrameCoordinator,
+} from "@/lib/recording/frame-coordinator";
 import { RecordingObservationRuntime } from "@/lib/recording/recording-runtime";
 import {
   appendRecordedPayload,
@@ -262,10 +267,11 @@ async function processRecordedStep(
   recording: ActiveRecording,
   draftIndex: number,
   tabId: number,
+  producerId?: string,
 ): Promise<void> {
   if (!recording.observation) return;
   try {
-    await recording.observation.processDraft(tabId, recording.steps, draftIndex);
+    await recording.observation.processDraft(tabId, recording.steps, draftIndex, producerId);
   } catch (err) {
     console.warn(`[bsk record] observation failed for step ${draftIndex + 1}`, err);
   }
@@ -278,6 +284,10 @@ export interface RecordDeps {
     msg: RecordStartMessage | RecordStopMessage | RecordCancelMessage,
   ): Promise<unknown>;
   bypassOverlay?: (tabId: number, enabled: boolean) => Promise<void>;
+  frameCoordinator?: Pick<
+    RecordFrameCoordinator,
+    "begin" | "armTab" | "sourceFor" | "stop" | "cancel"
+  >;
   cdp?: CdpRunner;
   signal?: AbortSignal;
 }
@@ -288,6 +298,7 @@ function getDefaultDeps(): RecordDeps {
     defaultDeps = {
       tabsApi: chromeTabsApi,
       sendToTab: (tabId, msg) => chrome.tabs.sendMessage(tabId, msg),
+      frameCoordinator: recordFrameCoordinator,
     };
   }
   return defaultDeps;
@@ -354,9 +365,15 @@ export function attachRecordStepListener(deps: RecordDeps = getDefaultDeps()): (
     if (!isRecordStepMessage(message)) return false;
     for (const recording of recordings.values()) {
       if (recording.requestId !== message.requestId) continue;
-      const sourceTabId = sender.tab?.id ?? recording.tabs.currentTabId;
+      const source: RecordingCaptureScope | null | undefined = deps.frameCoordinator
+        ? deps.frameCoordinator.sourceFor(message.requestId, message.producerId, sender)
+        : undefined;
+      if (deps.frameCoordinator && !source) return false;
+      const sourceTabId = source?.tabId ?? sender.tab?.id ?? recording.tabs.currentTabId;
       const sourceWasActive = sender.tab?.active ?? sourceTabId === recording.tabs.activeTabId;
-      const producerKey = `${sourceTabId}:${message.producerId}`;
+      const producerKey = source
+        ? `${source.tabId}:${source.documentId}:${source.producerId}`
+        : `${sourceTabId}:${message.producerId}`;
       const expectedSequence = (recording.lastStepSequenceByProducer.get(producerKey) ?? 0) + 1;
       if (message.sequence < expectedSequence) {
         sendResponse({ ok: true, sequence: message.sequence });
@@ -387,7 +404,7 @@ export function attachRecordStepListener(deps: RecordDeps = getDefaultDeps()): (
           targetHint,
         );
         if (draftIndex !== null) {
-          await processRecordedStep(recording, draftIndex, sourceTabId);
+          await processRecordedStep(recording, draftIndex, sourceTabId, source?.producerId);
         }
       });
       sendResponse({ ok: true, sequence: message.sequence });
@@ -469,6 +486,9 @@ async function stopRecordingOnAllAgentTabs(
   recording: ActiveRecording,
   deps: RecordDeps,
 ): Promise<void> {
+  if (deps.frameCoordinator && !(await deps.frameCoordinator.stop(recording.requestId))) {
+    throw new Error("failed to flush one or more recording documents");
+  }
   const stopMsg: RecordStopMessage = { type: RECORD_STOP, requestId: recording.requestId };
   let tabIds = [recording.tabs.currentTabId];
   try {
@@ -523,6 +543,10 @@ async function rearmRecording(
       startedAtMs: recording.startedAtMs,
     };
     try {
+      if (deps.frameCoordinator) {
+        const frameStarted = await deps.frameCoordinator.armTab(recording.requestId, targetTabId);
+        if (!frameStarted) throw new Error("recording document did not start");
+      }
       await sendRecordStartWithAck(targetTabId, startMsg, deps.sendToTab, isFinishing);
       if (isFinishing()) return false;
       if (activation) {
@@ -860,12 +884,14 @@ export async function handleRecordStart(
     actionQueue: Promise.resolve(),
     lastStepSequenceByProducer: new Map(),
   });
+  deps.frameCoordinator?.begin(requestId, startedAtMs);
   // Observe navigations for the whole recording lifetime; attach before
   // optional navigate so the destination load can rearm capture.
   ensureBrowserObservationListeners(deps);
 
   const abortPending = async (notifyContent: boolean) => {
     recordings.get(params.session_id)?.observation?.cancel();
+    deps.frameCoordinator?.cancel(requestId);
     recordings.delete(params.session_id);
     releaseBrowserObservationListenersIfIdle();
     if (notifyContent) {
@@ -982,6 +1008,10 @@ export async function handleRecordStart(
   const startMsg: RecordStartMessage = { type: RECORD_START, requestId, startedAtMs };
 
   try {
+    if (deps.frameCoordinator) {
+      const frameStarted = await deps.frameCoordinator.armTab(requestId, target.tabId);
+      if (!frameStarted) throw new Error("top recording document did not start");
+    }
     await sendRecordStartWithAck(target.tabId, startMsg, deps.sendToTab);
   } catch {
     await abortPending(true);
@@ -1101,6 +1131,7 @@ export function clearRecordingForSession(sessionId: string): void {
   }
   void clearRearmTimersForRecording(recording, getDefaultDeps());
   if (!recording.settled) {
+    getDefaultDeps().frameCoordinator?.cancel(recording.requestId);
     recording.observation?.cancel();
     recording.settled = true;
     recording.rejectFinish(new Error("recording cleared"));

apps/extension/src/tools/vom/__tests__/record-safe-observation.test.ts

@@ -0,0 +1,48 @@
+import { describe, expect, it } from "vitest";
+import { RECORD_DOCUMENT_ATTRIBUTE } from "@/shared/recording-document-identity";
+import { projectRecordSafeObservation } from "../record-safe-observation";
+
+describe("projectRecordSafeObservation", () => {
+  it("projects the opaque recording identity without exposing captured attributes", () => {
+    const result = projectRecordSafeObservation({
+      rootFrameId: "child",
+      frameDocuments: [
+        {
+          frameId: "child",
+          target: { tabId: 4, sessionId: "oopif-session" },
+          contextScopeId: "scope-1",
+          axNodes: [],
+          domNodes: [
+            {
+              backendNodeId: 1,
+              parentBackendNodeId: null,
+              tag: "html",
+              attrs: {
+                [RECORD_DOCUMENT_ATTRIBUTE]: "producer-1",
+                value: "user@example.com",
+              },
+              rect: null,
+              paintOrder: 0,
+              position: "static",
+              pointerEvents: "auto",
+            },
+          ],
+        },
+      ],
+      rendered: { text: '@vom 1\nRootWebArea "Example"', refs: [], truncated: false },
+    });
+
+    expect(result.frames).toEqual([
+      {
+        frameId: "child",
+        target: { tabId: 4, sessionId: "oopif-session" },
+        recordingDocumentId: "producer-1",
+      },
+    ]);
+    const dumped = JSON.stringify(result);
+    expect(dumped).not.toContain("user@example.com");
+    expect(dumped).not.toContain("attrs");
+    expect(dumped).not.toContain("domNodes");
+    expect(dumped).not.toContain("axNodes");
+  });
+});

apps/extension/src/tools/vom/record-safe-observation.ts

@@ -1,5 +1,6 @@
 import type { Rect, RenderedRef, VomResult } from "@browser-skill/vom";
 import type { CdpTarget } from "@/browser-driver/frame-graph";
+import { readRecordingDocumentIdentity } from "@/shared/recording-document-identity";
 import type { CapturedSurfaceProbe } from "./capture";
 import type { CapturedFrameDocument, FrameAxNode } from "./frame-capture";
 
@@ -9,6 +10,8 @@ export interface CaptureVomFrame {
   target: CdpTarget;
   parentFrameId?: string;
   ownerBackendNodeId?: number;
+  /** BrowserSkill-generated identity for the recording agent in this Document. */
+  recordingDocumentId?: string;
 }
 
 /** Allowlisted geometry used to match a recorded action to a rendered ref. */
@@ -37,14 +40,20 @@ export interface CaptureVomObservationResult {
 }
 
 function projectFrames(documents: CapturedFrameDocument<FrameAxNode>[]): CaptureVomFrame[] {
-  return documents.map((document) => ({
-    frameId: document.frameId,
-    target: document.target,
-    ...(document.parentFrameId ? { parentFrameId: document.parentFrameId } : {}),
-    ...(document.ownerBackendNodeId !== undefined
-      ? { ownerBackendNodeId: document.ownerBackendNodeId }
-      : {}),
-  }));
+  return documents.map((document) => {
+    const recordingDocumentId = document.domNodes
+      .map((node) => readRecordingDocumentIdentity(node.attrs))
+      .find((identity) => identity !== undefined);
+    return {
+      frameId: document.frameId,
+      target: document.target,
+      ...(document.parentFrameId ? { parentFrameId: document.parentFrameId } : {}),
+      ...(document.ownerBackendNodeId !== undefined
+        ? { ownerBackendNodeId: document.ownerBackendNodeId }
+        : {}),
+      ...(recordingDocumentId ? { recordingDocumentId } : {}),
+    };
+  });
 }
 
 function projectMatchNodes(documents: CapturedFrameDocument<FrameAxNode>[]): CaptureVomMatchNode[] {