fix(extension): match form state by element identity

apps/extension/src/tools/vom/capture.ts

@@ -190,9 +190,9 @@ interface CapturedFormState {
   sensitive?: boolean;
 }
 
-interface CapturedFrameFormState {
-  controls: CapturedFormState[];
-  childFrames: CapturedFrameFormState[];
+interface DeepSerializedValue {
+  type: string;
+  value?: unknown;
 }
 
 function formStateBatchExpression(maxControls: number): string {
@@ -215,43 +215,63 @@ function formStateBatchExpression(maxControls: number): string {
         ...(sensitive ? {} : { value: rawValue, defaultValue }),
       };
     };
+    const controls = [];
     const collect = (doc) => {
-      const controls = [];
       for (const el of Array.from(doc.querySelectorAll(controlSelector))) {
         if (remaining <= 0) break;
-        controls.push(controlState(el));
+        // Deep serialization supplies the node's backend id. Keep the
+        // state as JSON so decoding needs no general-purpose V8 deserializer.
+        controls.push([el, JSON.stringify(controlState(el))]);
         remaining -= 1;
       }
-      const childFrames = [];
       for (const frame of Array.from(doc.querySelectorAll("iframe"))) {
+        if (remaining <= 0) break;
         let childDoc = null;
         try { childDoc = frame.contentDocument; } catch { childDoc = null; }
-        childFrames.push(childDoc && remaining > 0 ? collect(childDoc) : { controls: [], childFrames: [] });
+        if (childDoc) collect(childDoc);
       }
-      return { controls, childFrames };
     };
-    return collect(document);
+    collect(document);
+    return controls;
   })()`;
 }
 
-function flattenFrameFormStates(
-  frame: CapturedFrameFormState | undefined,
-  out: CapturedFormState[][] = [],
-): CapturedFormState[][] {
-  if (!frame) return out;
-  out.push(Array.isArray(frame.controls) ? frame.controls : []);
-  for (const child of Array.isArray(frame.childFrames) ? frame.childFrames : []) {
-    flattenFrameFormStates(child, out);
+function formStatesByBackendId(result: RuntimeEvaluateReply): Map<number, CapturedFormState> {
+  const states = new Map<number, CapturedFormState>();
+  const serialized = result.result?.deepSerializedValue;
+  if (serialized?.type !== "array" || !Array.isArray(serialized.value)) return states;
+  for (const entry of serialized.value as DeepSerializedValue[]) {
+    if (entry?.type !== "array" || !Array.isArray(entry.value)) continue;
+    const [element, json] = entry.value as DeepSerializedValue[];
+    if (element?.type !== "node" || json?.type !== "string" || typeof json.value !== "string") {
+      continue;
+    }
+    const backendNodeId = (element.value as { backendNodeId?: number } | undefined)?.backendNodeId;
+    if (typeof backendNodeId !== "number" || !Number.isSafeInteger(backendNodeId)) continue;
+    try {
+      const state = JSON.parse(json.value) as CapturedFormState | null;
+      if (
+        !state ||
+        !["empty", "filled", "default"].includes(state.state ?? "") ||
+        typeof state.sensitive !== "boolean" ||
+        typeof state.placeholder !== "string" ||
+        (!state.sensitive &&
+          (typeof state.value !== "string" || typeof state.defaultValue !== "string"))
+      ) {
+        continue;
+      }
+      states.set(backendNodeId, state);
+    } catch {
+      // A malformed entry must not overwrite the snapshot's own state.
+    }
   }
-  return out;
+  return states;
 }
 
-function applyFormStates(nodes: CapturedNode[], states: CapturedFormState[]): void {
-  let index = 0;
+function applyFormStates(nodes: CapturedNode[], states: Map<number, CapturedFormState>): void {
   for (const node of nodes) {
     if (!isFormControlTag(node.tag)) continue;
-    const state = states[index];
-    index += 1;
+    const state = states.get(node.backendNodeId);
     if (!state) continue;
     node.formState = state.state;
     node.formPlaceholder = state.placeholder ?? "";
@@ -276,26 +296,37 @@ async function enrichFormControlStates(
     nodes.some((node) => isFormControlTag(node.tag)),
   );
   if (!hasControls) return;
+  const objectGroup = `bsk-vom-forms-${crypto.randomUUID()}`;
   try {
     throwIfAborted(signal);
     const result = await cdp.send<RuntimeEvaluateReply>(tabId, "Runtime.evaluate", {
       expression: formStateBatchExpression(MAX_FORM_ENRICH_CONTROLS),
-      returnByValue: true,
+      objectGroup,
+      serializationOptions: {
+        serialization: "deep",
+        maxDepth: 3,
+        additionalParameters: { maxNodeDepth: 0, includeShadowTree: "none" },
+      },
     });
     throwIfAborted(signal);
-    const frameStates = flattenFrameFormStates(runtimeValue<CapturedFrameFormState>(result));
-    for (let i = 0; i < frameNodeGroups.length; i += 1) {
-      applyFormStates(frameNodeGroups[i], frameStates[i] ?? []);
+    // Backend ids are scoped to this capture's CDP target. OOPIF targets
+    // use their own captureViewModel call and never share this lookup.
+    const states = formStatesByBackendId(result);
+    for (const nodes of frameNodeGroups) {
+      applyFormStates(nodes, states);
     }
   } catch (error) {
     if (isAbortError(error)) throw error;
     // Best-effort enrichment. DOMSnapshot/AX data still carries the nodes.
+  } finally {
+    await cdp.send(tabId, "Runtime.releaseObjectGroup", { objectGroup }).catch(() => undefined);
   }
 }
 
 interface RuntimeEvaluateReply {
   result?: {
     value?: unknown;
+    deepSerializedValue?: DeepSerializedValue;
   };
 }