feat(vom): actions refactor

apps/extension/src/session-manager/__tests__/ref-store.test.ts

@@ -77,14 +77,4 @@ describe("RefStore", () => {
     expect(s.resolveEntry("e1")?.capabilities).toEqual(["screenshot"]);
     expect(s.resolveEntry("e2")?.capabilities).toEqual(["screenshot"]);
   });
-
-  it("copies caller-owned capability arrays", () => {
-    const s = new RefStore();
-    const capabilities: Array<"interact" | "screenshot"> = ["screenshot"];
-    s.set("e1", 42, { tabId: 7, capabilities });
-
-    capabilities.push("interact");
-
-    expect(s.resolveEntry("e1")?.capabilities).toEqual(["screenshot"]);
-  });
 });

apps/extension/src/session-manager/__tests__/surface-capture-store.test.ts

@@ -0,0 +1,67 @@
+import { describe, expect, it } from "vitest";
+import { type SurfaceCaptureInput, SurfaceCaptureStore } from "../surface-capture-store";
+
+function input(): SurfaceCaptureInput {
+  return {
+    sessionId: "aa11",
+    tabId: 7,
+    navigationIdentity: "navigation",
+    surface: {
+      ref: "e3",
+      frameId: "main",
+      backendNodeId: 99,
+      observationGeneration: 2,
+    },
+    topViewportRect: { x: 10, y: 20, w: 100, h: 50 },
+    imageWidth: 200,
+    imageHeight: 100,
+    viewportSignature: "viewport",
+    frameProjectionSignature: "frame",
+  };
+}
+
+describe("SurfaceCaptureStore", () => {
+  it("creates metadata-only, short-lived captures and consumes them once", () => {
+    let now = 1_000;
+    const store = new SurfaceCaptureStore({
+      now: () => now,
+      ttlMs: 500,
+      createId: () => "sc_test",
+    });
+    const capture = store.create(input());
+
+    expect(capture).toMatchObject({
+      id: "sc_test",
+      createdAt: 1_000,
+      expiresAt: 1_500,
+      consumed: false,
+    });
+    expect(capture).not.toHaveProperty("imageBase64");
+    expect(store.consume("sc_test")).toMatchObject({ ok: true });
+    expect(store.consume("sc_test")).toEqual({ ok: false, reason: "consumed" });
+
+    now = 1_600;
+    expect(store.size()).toBe(0);
+  });
+
+  it("rejects expired and unknown captures", () => {
+    let now = 1_000;
+    const store = new SurfaceCaptureStore({
+      now: () => now,
+      ttlMs: 10,
+      createId: () => "sc_expired",
+    });
+    store.create(input());
+    now = 1_010;
+
+    expect(store.consume("sc_expired")).toEqual({ ok: false, reason: "expired" });
+    expect(store.consume("sc_missing")).toEqual({ ok: false, reason: "not_found" });
+  });
+
+  it("clears every capture on session cleanup", () => {
+    const store = new SurfaceCaptureStore({ createId: () => "sc_clear" });
+    store.create(input());
+    store.clear();
+    expect(store.size()).toBe(0);
+  });
+});

apps/extension/src/session-manager/manager.ts

@@ -1,10 +1,12 @@
 import { AGENT_WINDOW_HOME, type AgentWindowApi, chromeAgentWindowApi } from "./agent-window";
 import { RefStore } from "./ref-store";
+import { SurfaceCaptureStore } from "./surface-capture-store";
 
 export interface SessionContext {
   sessionId: string;
   agentWindowId: number;
   refStore: RefStore;
+  surfaceCaptures: SurfaceCaptureStore;
   borrowedTabs: Map<number, BorrowedTab>;
   /**
    * Tabs explicitly claimed by the agent because it created them. This
@@ -210,6 +212,7 @@ export class SessionManager {
         sessionId,
         agentWindowId: windowId,
         refStore: new RefStore(),
+        surfaceCaptures: new SurfaceCaptureStore({ now: this.now }),
         borrowedTabs: new Map(),
         // The home tab is the session's first explicit claim. Every other
         // tab remains free until `tab_create` or `tab_borrow` identifies it

apps/extension/src/session-manager/ref-store.ts

@@ -45,7 +45,7 @@ function capabilitiesFor(
   capabilities: RefCapability[] | undefined,
 ): RefCapability[] {
   if (kind === "surface") return ["screenshot"];
-  return capabilities ? [...capabilities] : ["interact", "screenshot"];
+  return capabilities ?? ["interact", "screenshot"];
 }
 
 export class RefStore {

apps/extension/src/session-manager/surface-capture-store.ts

@@ -0,0 +1,100 @@
+import type { Rect } from "@browser-skill/vom";
+
+export const SURFACE_CAPTURE_TTL_MS = 30_000;
+
+export interface SurfaceCapture {
+  id: string;
+  sessionId: string;
+  tabId: number;
+  navigationIdentity: string;
+  surface: {
+    ref: string;
+    frameId?: string;
+    backendNodeId: number;
+    observationGeneration: number;
+  };
+  topViewportRect: Rect;
+  imageWidth: number;
+  imageHeight: number;
+  viewportSignature: string;
+  frameProjectionSignature: string;
+  createdAt: number;
+  expiresAt: number;
+  consumed: boolean;
+}
+
+export type SurfaceCaptureInput = Omit<
+  SurfaceCapture,
+  "id" | "createdAt" | "expiresAt" | "consumed"
+>;
+
+export type SurfaceCaptureConsumeResult =
+  | { ok: true; capture: SurfaceCapture }
+  | { ok: false; reason: "not_found" | "expired" | "consumed" };
+
+export interface SurfaceCaptureStoreOptions {
+  now?: () => number;
+  ttlMs?: number;
+  createId?: () => string;
+}
+
+function randomCaptureId(): string {
+  const bytes = crypto.getRandomValues(new Uint8Array(12));
+  return `sc_${Array.from(bytes, (byte) => byte.toString(16).padStart(2, "0")).join("")}`;
+}
+
+/** Per-session, metadata-only store for short-lived screenshot coordinate transactions. */
+export class SurfaceCaptureStore {
+  private readonly captures = new Map<string, SurfaceCapture>();
+  private readonly now: () => number;
+  private readonly ttlMs: number;
+  private readonly createId: () => string;
+
+  constructor(options: SurfaceCaptureStoreOptions = {}) {
+    this.now = options.now ?? Date.now;
+    this.ttlMs = options.ttlMs ?? SURFACE_CAPTURE_TTL_MS;
+    this.createId = options.createId ?? randomCaptureId;
+  }
+
+  create(input: SurfaceCaptureInput): SurfaceCapture {
+    this.purgeExpired();
+    const createdAt = this.now();
+    const capture: SurfaceCapture = {
+      ...input,
+      id: this.createId(),
+      createdAt,
+      expiresAt: createdAt + this.ttlMs,
+      consumed: false,
+    };
+    this.captures.set(capture.id, capture);
+    return capture;
+  }
+
+  consume(id: string): SurfaceCaptureConsumeResult {
+    const capture = this.captures.get(id);
+    if (!capture) return { ok: false, reason: "not_found" };
+    if (capture.expiresAt <= this.now()) {
+      this.captures.delete(id);
+      return { ok: false, reason: "expired" };
+    }
+    if (capture.consumed) return { ok: false, reason: "consumed" };
+    capture.consumed = true;
+    return { ok: true, capture };
+  }
+
+  clear(): void {
+    this.captures.clear();
+  }
+
+  size(): number {
+    this.purgeExpired();
+    return this.captures.size;
+  }
+
+  private purgeExpired(): void {
+    const now = this.now();
+    for (const [id, capture] of this.captures) {
+      if (capture.expiresAt <= now) this.captures.delete(id);
+    }
+  }
+}

apps/extension/src/tools/__tests__/frame-geometry.test.ts

@@ -1,9 +1,5 @@
 import { describe, expect, it, vi } from "vitest";
-import {
-  createFrameGeometryContext,
-  resolveFrameProjection,
-  resolveNodeGeometry,
-} from "../frame-geometry";
+import { resolveFrameProjection, resolveNodeGeometry } from "../frame-geometry";
 import {
   clipPolygon,
   polygonArea,
@@ -41,53 +37,6 @@ describe("frame geometry projection", () => {
     expect(polygonBounds(projected.flat())).toEqual({ x: 224, y: 346, width: 200, height: 80 });
   });
 
-  it("projects nested same-target frame-local bounds through authoritative content quads", async () => {
-    const boxCalls: number[] = [];
-    const cdp: CdpRunner = {
-      send: vi.fn(async (_tabId, method, params) => {
-        if (method === "Page.getLayoutMetrics") {
-          return { cssLayoutViewport: { clientWidth: 1_000, clientHeight: 800 } };
-        }
-        if (method === "Page.createIsolatedWorld") return { executionContextId: 91 };
-        if (method === "Runtime.evaluate") {
-          return { result: { value: { width: 100, height: 80 } } };
-        }
-        if (method === "DOM.getBoxModel") {
-          const backendNodeId = (params as { backendNodeId?: number }).backendNodeId ?? 0;
-          boxCalls.push(backendNodeId);
-          return backendNodeId === 10
-            ? { model: { content: [30, 100.5, 330, 100.5, 330, 300.5, 30, 300.5] } }
-            : { model: { content: [45, 120.5, 145, 120.5, 145, 200.5, 45, 200.5] } };
-        }
-        throw new Error(`unexpected ${method}`);
-      }) as CdpRunner["send"],
-    };
-    const geometry = createFrameGeometryContext(cdp, {
-      rootFrameId: "main",
-      frames: [
-        { frameId: "main", target: { tabId: 4 } },
-        {
-          frameId: "child",
-          parentFrameId: "main",
-          ownerBackendNodeId: 10,
-          target: { tabId: 4 },
-        },
-        {
-          frameId: "nested",
-          parentFrameId: "child",
-          ownerBackendNodeId: 20,
-          target: { tabId: 4 },
-        },
-      ],
-    });
-
-    await expect(
-      geometry.projectFrameLocalRect("nested", { x: 12, y: 12, w: 40, h: 20 }),
-    ).resolves.toEqual({ x: 57, y: 132.5, width: 40, height: 20 });
-    await geometry.projectFrameLocalRect("nested", { x: 1, y: 1, w: 2, h: 2 });
-    expect(boxCalls.sort()).toEqual([10, 20]);
-  });
-
   it("uses a projective mapping for perspective-transformed iframe quads", () => {
     const quad: Quad = [
       { x: 0, y: 0 },

apps/extension/src/tools/__tests__/interaction.test.ts

@@ -11,6 +11,7 @@ import {
   parseKeySpec,
   resolveKeyDescriptor,
 } from "../interaction";
+import { captureSurfaceEnvironment } from "../surface-target";
 
 function fakeAgentWindow(ids: number[]) {
   let i = 0;
@@ -54,6 +55,61 @@ function makeFakeCdp(handlers: Record<string, (params: unknown) => unknown>) {
   return { cdp, tabsApi, sent };
 }
 
+async function makeSurfaceClickFixture(onMouse?: (params: Record<string, unknown>) => void) {
+  const manager = new SessionManager({ agentWindow: fakeAgentWindow([100]) });
+  const context = await manager.start("aa11");
+  context.refStore.set("e3", 99, {
+    tabId: 4,
+    kind: "surface",
+    visibleRect: { x: 10, y: 20, w: 100, h: 40 },
+  });
+  const fake = makeFakeCdp({
+    "Page.getFrameTree": () => ({
+      frameTree: {
+        frame: { id: "main", loaderId: "loader-1", url: "https://fixture.test/" },
+      },
+    }),
+    "Page.getLayoutMetrics": () => ({
+      cssLayoutViewport: { clientWidth: 800, clientHeight: 600, pageX: 0, pageY: 0 },
+      cssVisualViewport: {
+        clientWidth: 800,
+        clientHeight: 600,
+        pageX: 0,
+        pageY: 0,
+        scale: 1,
+      },
+    }),
+    "DOM.getContentQuads": () => ({ quads: [[10, 20, 110, 20, 110, 60, 10, 60]] }),
+    "Runtime.evaluate": () => ({
+      result: { value: { overlayHostPresent: false, overlayHostConnected: false } },
+    }),
+    "Input.dispatchMouseEvent": (params) => {
+      onMouse?.(params as Record<string, unknown>);
+      return {};
+    },
+  });
+  const environment = await captureSurfaceEnvironment(fake.cdp, 4, undefined);
+  if ("code" in environment) throw new Error(environment.message);
+  const entry = context.refStore.resolveEntry("e3");
+  if (!entry) throw new Error("missing Surface ref");
+  const capture = context.surfaceCaptures.create({
+    sessionId: "aa11",
+    tabId: 4,
+    navigationIdentity: environment.navigationIdentity,
+    surface: {
+      ref: "e3",
+      backendNodeId: 99,
+      observationGeneration: entry.generation,
+    },
+    topViewportRect: { x: 10, y: 20, w: 100, h: 40 },
+    imageWidth: 200,
+    imageHeight: 80,
+    viewportSignature: environment.viewportSignature,
+    frameProjectionSignature: environment.frameProjectionSignature,
+  });
+  return { manager, context, fake, capture };
+}
+
 describe("modifiersBitfield", () => {
   it("matches CDP's expected bit layout", () => {
     expect(modifiersBitfield([])).toBe(0);
@@ -190,6 +246,74 @@ describe("handleClick", () => {
     });
   });
 
+  it.each([
+    "left",
+    "middle",
+    "right",
+  ] as const)("uses the common click executor for a %s-button Surface click", async (button) => {
+    const { manager, fake, capture } = await makeSurfaceClickFixture();
+    const result = await handleClick(
+      manager,
+      {
+        session_id: "aa11",
+        ref: "@e3",
+        capture_id: capture.id,
+        image_x: 50,
+        image_y: 20,
+        button,
+        click_count: 2,
+        modifiers: ["ctrl", "shift"],
+      },
+      { cdp: fake.cdp, tabsApi: fake.tabsApi },
+    );
+
+    if ("code" in result) throw new Error(JSON.stringify(result));
+    expect(result).toMatchObject({
+      used_ref: "e3",
+      capture_id: capture.id,
+      image_x: 50,
+      image_y: 20,
+      x: 35,
+      y: 30,
+    });
+    const mouse = fake.sent.filter((call) => call.method === "Input.dispatchMouseEvent");
+    expect(mouse).toHaveLength(3);
+    expect(mouse[1].params).toMatchObject({
+      type: "mousePressed",
+      button,
+      clickCount: 2,
+      modifiers: 2 | 8,
+    });
+    expect(mouse[2].params).toMatchObject({
+      type: "mouseReleased",
+      button,
+      clickCount: 2,
+    });
+  });
+
+  it("consumes a Surface capture when the common click executor fails", async () => {
+    let mouseCalls = 0;
+    const { manager, fake, capture } = await makeSurfaceClickFixture((params) => {
+      mouseCalls += 1;
+      if (params.type === "mousePressed") throw new Error("input failed");
+    });
+    const params = {
+      session_id: "aa11",
+      ref: "@e3",
+      capture_id: capture.id,
+      image_x: 50,
+      image_y: 20,
+    };
+
+    expect(
+      await handleClick(manager, params, { cdp: fake.cdp, tabsApi: fake.tabsApi }),
+    ).toMatchObject({ code: "cdp_failed" });
+    expect(mouseCalls).toBe(2);
+    expect(
+      await handleClick(manager, params, { cdp: fake.cdp, tabsApi: fake.tabsApi }),
+    ).toMatchObject({ data: { reason: "surface_capture_consumed" } });
+  });
+
   it("resolves frame refs in their CDP session and dispatches input in top coordinates", async () => {
     const sm = new SessionManager({ agentWindow: fakeAgentWindow([100]) });
     const ctx = await sm.start("aa11");

apps/extension/src/tools/__tests__/mouse-input.test.ts

@@ -0,0 +1,119 @@
+import { describe, expect, it, vi } from "vitest";
+import { dispatchMouseClick } from "../mouse-input";
+import type { CdpRunner } from "../shared";
+
+function fakeCdp(onSend?: (method: string, params: Record<string, unknown>) => void): {
+  cdp: CdpRunner;
+  events: Record<string, unknown>[];
+} {
+  const events: Record<string, unknown>[] = [];
+  return {
+    events,
+    cdp: {
+      send: vi.fn(async (_tabId, method, params) => {
+        const event = params as Record<string, unknown>;
+        events.push(event);
+        onSend?.(method, event);
+        return {} as never;
+      }),
+    },
+  };
+}
+
+describe("dispatchMouseClick", () => {
+  it("emits one move, press, and release sequence", async () => {
+    const { cdp, events } = fakeCdp();
+
+    expect(
+      await dispatchMouseClick(
+        cdp,
+        4,
+        { x: 12, y: 34 },
+        {
+          button: "left",
+          clickCount: 1,
+          modifiers: 0,
+          moveSettleMs: 0,
+        },
+      ),
+    ).toBe("completed");
+
+    expect(events).toEqual([
+      {
+        type: "mouseMoved",
+        x: 12,
+        y: 34,
+        modifiers: 0,
+      },
+      {
+        type: "mousePressed",
+        x: 12,
+        y: 34,
+        button: "left",
+        clickCount: 1,
+        modifiers: 0,
+      },
+      {
+        type: "mouseReleased",
+        x: 12,
+        y: 34,
+        button: "left",
+        clickCount: 1,
+        modifiers: 0,
+      },
+    ]);
+  });
+
+  it("releases a pressed button when cancellation arrives", async () => {
+    const controller = new AbortController();
+    const { cdp, events } = fakeCdp((_method, event) => {
+      if (event.type === "mousePressed") controller.abort();
+    });
+
+    expect(
+      await dispatchMouseClick(
+        cdp,
+        4,
+        { x: 1, y: 2 },
+        {
+          button: "left",
+          clickCount: 1,
+          modifiers: 0,
+          signal: controller.signal,
+          moveSettleMs: 0,
+        },
+      ),
+    ).toBe("cancelled");
+    expect(events.at(-1)).toMatchObject({ type: "mouseReleased" });
+  });
+
+  it("settles pointer-move hit testing before pressing", async () => {
+    vi.useFakeTimers();
+    try {
+      const { cdp, events } = fakeCdp();
+      const click = dispatchMouseClick(
+        cdp,
+        4,
+        { x: 1, y: 2 },
+        {
+          button: "left",
+          clickCount: 1,
+          modifiers: 0,
+          moveSettleMs: 32,
+        },
+      );
+
+      await vi.advanceTimersByTimeAsync(31);
+      expect(events.map((event) => event.type)).toEqual(["mouseMoved"]);
+      await vi.advanceTimersByTimeAsync(1);
+      await click;
+      expect(events.map((event) => event.type)).toEqual([
+        "mouseMoved",
+        "mousePressed",
+        "mouseReleased",
+      ]);
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+});

apps/extension/src/tools/__tests__/observation.test.ts

@@ -75,6 +75,9 @@ function makeFakeCdp(handlers: Record<string, (params?: object) => unknown>) {
     if (!handler && method === "Page.getLayoutMetrics") {
       return { cssLayoutViewport: { clientWidth: 1280, clientHeight: 720 } };
     }
+    if (!handler && method === "Page.getFrameTree") {
+      return { frameTree: { frame: { id: "main", loaderId: "loader-1", url: "https://test/" } } };
+    }
     if (!handler) throw new Error(`unexpected CDP call ${method}`);
     return handler(params);
   });
@@ -330,7 +333,6 @@ describe("handleScreenshot", () => {
       tabId: 7,
       kind: "surface",
       capabilities: ["screenshot"],
-      visibleRect: { x: 0, y: 0, w: 4096, h: 4096 },
     });
     const { cdp, sent } = makeFakeCdp({
       "Page.getLayoutMetrics": () => ({
@@ -358,86 +360,11 @@ describe("handleScreenshot", () => {
     };
     expect(clip.clip).toMatchObject({ width: 4096, height: 4096 });
     expect(clip.clip?.scale).toBeCloseTo(Math.sqrt(4_000_000 / (4096 * 4096)));
-  });
-
-  it("retries once when actual surface PNG dimensions exceed the pixel budget", async () => {
-    const sm = new SessionManager({ agentWindow: fakeAgentWindow([100]) });
-    const ctx = await sm.start("aa11");
-    ctx.refStore.set("e5", 999, {
-      tabId: 7,
-      kind: "surface",
-      visibleRect: { x: 0, y: 0, w: 1_000, h: 1_000 },
+    expect(res.capture).toMatchObject({
+      surface_ref: "@e5",
+      coordinate_space: "capture-image-pixel",
     });
-    let captures = 0;
-    const { cdp, sent } = makeFakeCdp({
-      "Runtime.evaluate": () => ({ result: { value: 1 } }),
-      "Page.getLayoutMetrics": () => ({
-        cssLayoutViewport: { clientWidth: 1_000, clientHeight: 1_000 },
-      }),
-      "DOM.getContentQuads": () => ({
-        quads: [[0, 0, 1_000, 0, 1_000, 1_000, 0, 1_000]],
-      }),
-      "Page.captureScreenshot": () => ({
-        data:
-          ++captures === 1
-            ? pngWithIhdrDimensions(4_000, 4_000)
-            : pngWithIhdrDimensions(1_998, 1_998),
-      }),
-    });
-
-    const res = await handleScreenshot(
-      sm,
-      { session_id: "aa11", ref: "@e5", tab_id: 7 },
-      makeScreenshotDeps({
-        cdp,
-        get: vi.fn(async () => ({ id: 7, windowId: 100, active: false }) as chrome.tabs.Tab),
-        query: vi.fn(),
-        captureVisibleTab: vi.fn(),
-      }),
-    );
-
-    if ("code" in res) throw new Error(`unexpected error: ${JSON.stringify(res)}`);
-    expect(res).toMatchObject({ width: 1_998, height: 1_998 });
-    const calls = sent.filter((call) => call.method === "Page.captureScreenshot");
-    expect(calls).toHaveLength(2);
-    expect((calls[1]?.params as { clip?: { scale?: number } }).clip?.scale).toBeLessThan(0.5);
-  });
-
-  it("fails closed when the retried surface PNG still exceeds the pixel budget", async () => {
-    const sm = new SessionManager({ agentWindow: fakeAgentWindow([100]) });
-    const ctx = await sm.start("aa11");
-    ctx.refStore.set("e5", 999, {
-      tabId: 7,
-      kind: "surface",
-      visibleRect: { x: 0, y: 0, w: 1_000, h: 1_000 },
-    });
-    const { cdp, sent } = makeFakeCdp({
-      "Runtime.evaluate": () => ({ result: { value: 1 } }),
-      "Page.getLayoutMetrics": () => ({
-        cssLayoutViewport: { clientWidth: 1_000, clientHeight: 1_000 },
-      }),
-      "DOM.getContentQuads": () => ({
-        quads: [[0, 0, 1_000, 0, 1_000, 1_000, 0, 1_000]],
-      }),
-      "Page.captureScreenshot": () => ({ data: pngWithIhdrDimensions(4_000, 4_000) }),
-    });
-
-    const res = await handleScreenshot(
-      sm,
-      { session_id: "aa11", ref: "@e5", tab_id: 7 },
-      makeScreenshotDeps({
-        cdp,
-        get: vi.fn(async () => ({ id: 7, windowId: 100, active: false }) as chrome.tabs.Tab),
-        query: vi.fn(),
-        captureVisibleTab: vi.fn(),
-      }),
-    );
-
-    expect(res).toEqual({
-      code: "cdp_failed",
-      message: "Page.captureScreenshot exceeded the visual surface pixel budget",
-    });
-    expect(sent.filter((call) => call.method === "Page.captureScreenshot")).toHaveLength(2);
+    expect(ctx.surfaceCaptures.size()).toBe(1);
   });
 
   it("crops a visual surface screenshot to its observation-time visible region", async () => {
@@ -473,6 +400,7 @@ describe("handleScreenshot", () => {
     };
     expect(clip.clip).toMatchObject({ x: 25, y: 30, width: 50, height: 40 });
     expect(res).toMatchObject({ width: 100, height: 80 });
+    expect(res.capture?.id).toMatch(/^sc_/);
   });
 
   it("routes OOPIF surface geometry through its child session and captures top coordinates", async () => {
@@ -543,11 +471,7 @@ describe("handleScreenshot", () => {
   it("fails closed when a ref capture is not a valid PNG", async () => {
     const sm = new SessionManager({ agentWindow: fakeAgentWindow([100]) });
     const ctx = await sm.start("aa11");
-    ctx.refStore.set("e5", 999, {
-      tabId: 7,
-      kind: "surface",
-      visibleRect: { x: 0, y: 0, w: 50, h: 50 },
-    });
+    ctx.refStore.set("e5", 999, { tabId: 7, kind: "surface" });
     const { cdp } = makeFakeCdp({
       "DOM.getContentQuads": () => ({ quads: [[0, 0, 50, 0, 50, 50, 0, 50]] }),
       "Page.captureScreenshot": () => ({ data: "bm90LWEtcG5n" }),

apps/extension/src/tools/__tests__/session.test.ts

@@ -278,12 +278,23 @@ describe("handleSessionStop with auto-return", () => {
     expect(aw.remove).not.toHaveBeenCalled();
   });
 
-  it("clears the RefStore before window teardown", async () => {
+  it("clears refs and Surface captures before window teardown", async () => {
     const aw = fakeAgentWindow([100]);
     const sm = new SessionManager({ agentWindow: aw });
     const ctx = await sm.start("aa11");
     // Insert a fake ref so we can verify clear() ran.
     ctx.refStore.set("e1", 123, { tabId: 7 });
+    ctx.surfaceCaptures.create({
+      sessionId: "aa11",
+      tabId: 7,
+      navigationIdentity: "navigation",
+      surface: { ref: "e1", backendNodeId: 123, observationGeneration: 0 },
+      topViewportRect: { x: 0, y: 0, w: 100, h: 50 },
+      imageWidth: 100,
+      imageHeight: 50,
+      viewportSignature: "viewport",
+      frameProjectionSignature: "frame",
+    });
     const state: FakeState = {
       tabs: new Map(),
       windowsClosed: new Set(),
@@ -292,6 +303,7 @@ describe("handleSessionStop with auto-return", () => {
     const { tabs, windows } = makeApis(state);
     await handleSessionStop(sm, { session_id: "aa11" }, { tabManagement: { tabs, windows } });
     expect(ctx.refStore.isEmpty()).toBe(true);
+    expect(ctx.surfaceCaptures.size()).toBe(0);
   });
 
   it.each([

apps/extension/src/tools/__tests__/snapshot-ref.test.ts

@@ -26,12 +26,14 @@ describe("lookupSnapshotRef", () => {
       refKey: "e3",
       kind: "dom",
       capabilities: ["interact", "screenshot"],
+      generation: 0,
     });
     expect(lookupSnapshotRef(ctx, "e3", 4)).toEqual({
       backendNodeId: 1234,
       refKey: "e3",
       kind: "dom",
       capabilities: ["interact", "screenshot"],
+      generation: 0,
     });
   });
 
@@ -68,6 +70,7 @@ describe("resolveSnapshotRef", () => {
       cdpSessionId: "child-session",
       kind: "dom" as const,
       capabilities: ["interact", "screenshot"] as const,
+      generation: 0,
     };
     expect(lookupSnapshotRef(ctx, "@e3", 4)).toEqual(expected);
     expect(resolveSnapshotRef(ctx, "@e3", 4)).toEqual(expected);
@@ -115,6 +118,7 @@ describe("resolveSnapshotRef", () => {
       refKey: "e3",
       kind: "dom",
       capabilities: ["interact", "screenshot"],
+      generation: 0,
     });
   });
 

apps/extension/src/tools/__tests__/surface-coordinate.test.ts

@@ -0,0 +1,52 @@
+import { describe, expect, it } from "vitest";
+import {
+  mapImagePointToViewport,
+  pointInRegion,
+  sameRect,
+  surfaceVisibleRect,
+} from "../surface-coordinate";
+
+describe("surface coordinate mapping", () => {
+  it("maps capture image pixels through the actual screenshot dimensions", () => {
+    expect(mapImagePointToViewport({ x: 100, y: 50, w: 400, h: 200 }, 800, 400, 200, 100)).toEqual({
+      x: 200,
+      y: 100,
+    });
+  });
+
+  it("rejects invalid image coordinates and dimensions", () => {
+    const rect = { x: 0, y: 0, w: 100, h: 50 };
+    expect(mapImagePointToViewport(rect, 100, 50, -1, 0)).toBeNull();
+    expect(mapImagePointToViewport(rect, 100, 50, 100, 0)).toBeNull();
+    expect(mapImagePointToViewport(rect, 100, 50, 0, 50)).toBeNull();
+    expect(mapImagePointToViewport(rect, 100, 50, Number.NaN, 0)).toBeNull();
+    expect(mapImagePointToViewport(rect, 100, 50, Number.POSITIVE_INFINITY, 0)).toBeNull();
+    expect(mapImagePointToViewport(rect, 0, 50, 0, 0)).toBeNull();
+  });
+
+  it("intersects live and observed visible regions and compares them strictly", () => {
+    const clipped = surfaceVisibleRect(
+      { x: 0, y: 0, width: 200, height: 100 },
+      { x: 25, y: 30, w: 50, h: 40 },
+    );
+    expect(clipped).toEqual({ x: 25, y: 30, w: 50, h: 40 });
+    expect(sameRect(clipped as NonNullable<typeof clipped>, { x: 25, y: 30, w: 50, h: 40 })).toBe(
+      true,
+    );
+    expect(sameRect(clipped as NonNullable<typeof clipped>, { x: 26, y: 30, w: 50, h: 40 })).toBe(
+      false,
+    );
+  });
+
+  it("checks the projected visible region rather than only its bounding box", () => {
+    const triangle = [
+      [
+        { x: 0, y: 0 },
+        { x: 100, y: 0 },
+        { x: 0, y: 100 },
+      ],
+    ];
+    expect(pointInRegion({ x: 20, y: 20 }, triangle)).toBe(true);
+    expect(pointInRegion({ x: 90, y: 90 }, triangle)).toBe(false);
+  });
+});

apps/extension/src/tools/__tests__/surface-target.test.ts

@@ -0,0 +1,306 @@
+import { describe, expect, it, vi } from "vitest";
+import { SessionManager } from "@/session-manager/manager";
+import type { CdpRunner } from "../shared";
+import {
+  captureSurfaceEnvironment,
+  resolveSurfacePointerTarget,
+  SURFACE_POINTER_MOVE_SETTLE_MS,
+} from "../surface-target";
+
+function fakeAgentWindow() {
+  return {
+    create: vi.fn(async () => 100),
+    remove: vi.fn(async () => {}),
+    ensureActiveTab: vi.fn(async () => 1),
+  };
+}
+
+function fakeBrowser() {
+  let loaderId = "loader-1";
+  let pageY = 0;
+  let quad = [10, 20, 110, 20, 110, 60, 10, 60];
+  const sent: Array<{ method: string; params?: object }> = [];
+  const cdp: CdpRunner = {
+    send: vi.fn(async (_tabId: number, method: string, params?: object) => {
+      sent.push({ method, params });
+      if (method === "Page.getFrameTree") {
+        return {
+          frameTree: { frame: { id: "main", loaderId, url: "https://fixture.test/" } },
+        } as never;
+      }
+      if (method === "Page.getLayoutMetrics") {
+        return {
+          cssLayoutViewport: { clientWidth: 800, clientHeight: 600, pageX: 0, pageY },
+          cssVisualViewport: {
+            clientWidth: 800,
+            clientHeight: 600,
+            pageX: 0,
+            pageY,
+            scale: 1,
+          },
+        } as never;
+      }
+      if (method === "DOM.getContentQuads") return { quads: [quad] } as never;
+      throw new Error(`unexpected CDP call ${method}`);
+    }) as CdpRunner["send"],
+    trackSessionTab: vi.fn(),
+  };
+  return {
+    cdp,
+    sent,
+    setLoaderId: (value: string) => {
+      loaderId = value;
+    },
+    setPageY: (value: number) => {
+      pageY = value;
+    },
+    setQuad: (value: number[]) => {
+      quad = value;
+    },
+  };
+}
+
+async function setupCapture() {
+  const manager = new SessionManager({ agentWindow: fakeAgentWindow() });
+  const context = await manager.start("aa11");
+  context.refStore.set("e3", 99, {
+    tabId: 4,
+    kind: "surface",
+    visibleRect: { x: 10, y: 20, w: 100, h: 40 },
+  });
+  const browser = fakeBrowser();
+  const environment = await captureSurfaceEnvironment(browser.cdp, 4, undefined);
+  if ("code" in environment) throw new Error(environment.message);
+  const entry = context.refStore.resolveEntry("e3");
+  if (!entry) throw new Error("missing ref");
+  const capture = context.surfaceCaptures.create({
+    sessionId: "aa11",
+    tabId: 4,
+    navigationIdentity: environment.navigationIdentity,
+    surface: {
+      ref: "e3",
+      backendNodeId: 99,
+      observationGeneration: entry.generation,
+    },
+    topViewportRect: { x: 10, y: 20, w: 100, h: 40 },
+    imageWidth: 200,
+    imageHeight: 80,
+    viewportSignature: environment.viewportSignature,
+    frameProjectionSignature: environment.frameProjectionSignature,
+  });
+  return { manager, context, browser, capture };
+}
+
+function pointParams(captureId: string) {
+  return {
+    ref: "@e3",
+    captureId,
+    imageX: 50,
+    imageY: 20,
+  };
+}
+
+describe("Surface screenshot-bound pointer target", () => {
+  it("maps one fresh capture coordinate without executing an action", async () => {
+    const { context, browser, capture } = await setupCapture();
+    const result = await resolveSurfacePointerTarget(
+      context,
+      { tabId: 4 },
+      pointParams(capture.id),
+      { cdp: browser.cdp },
+    );
+
+    if ("code" in result) throw new Error(JSON.stringify(result));
+    expect(result).toMatchObject({
+      usedRef: "e3",
+      point: { x: 35, y: 30 },
+      moveSettleMs: SURFACE_POINTER_MOVE_SETTLE_MS,
+      capture: { id: capture.id, imageX: 50, imageY: 20 },
+    });
+    expect(browser.sent.some((call) => call.method === "Input.dispatchMouseEvent")).toBe(false);
+
+    const repeated = await resolveSurfacePointerTarget(
+      context,
+      { tabId: 4 },
+      pointParams(capture.id),
+      { cdp: browser.cdp },
+    );
+    expect(repeated).toMatchObject({
+      code: "permission_denied",
+      data: { reason: "surface_capture_consumed" },
+    });
+  });
+
+  it("rejects a new observation generation before sending input", async () => {
+    const { context, browser, capture } = await setupCapture();
+    context.refStore.replace([
+      [
+        "e3",
+        {
+          backendNodeId: 99,
+          tabId: 4,
+          kind: "surface" as const,
+          visibleRect: { x: 10, y: 20, w: 100, h: 40 },
+        },
+      ],
+    ]);
+
+    const result = await resolveSurfacePointerTarget(
+      context,
+      { tabId: 4 },
+      pointParams(capture.id),
+      { cdp: browser.cdp },
+    );
+    expect(result).toMatchObject({
+      code: "permission_denied",
+      data: { reason: "surface_capture_stale" },
+    });
+    expect(browser.sent.some((call) => call.method === "Input.dispatchMouseEvent")).toBe(false);
+  });
+
+  it("rejects navigation, scroll, and visible geometry changes", async () => {
+    for (const mutate of [
+      (browser: ReturnType<typeof fakeBrowser>) => browser.setLoaderId("loader-2"),
+      (browser: ReturnType<typeof fakeBrowser>) => browser.setPageY(20),
+      (browser: ReturnType<typeof fakeBrowser>) =>
+        browser.setQuad([11, 20, 111, 20, 111, 60, 11, 60]),
+    ]) {
+      const { context, browser, capture } = await setupCapture();
+      mutate(browser);
+      const result = await resolveSurfacePointerTarget(
+        context,
+        { tabId: 4 },
+        pointParams(capture.id),
+        { cdp: browser.cdp },
+      );
+      expect(result).toMatchObject({
+        code: "permission_denied",
+        data: { reason: "surface_capture_stale" },
+      });
+      expect(browser.sent.some((call) => call.method === "Input.dispatchMouseEvent")).toBe(false);
+    }
+  });
+
+  it("consumes the capture when coordinate validation fails", async () => {
+    const invalid = await setupCapture();
+    const outside = await resolveSurfacePointerTarget(
+      invalid.context,
+      { tabId: 4 },
+      { ...pointParams(invalid.capture.id), imageX: 200 },
+      { cdp: invalid.browser.cdp },
+    );
+    expect(outside).toMatchObject({
+      code: "invalid_params",
+      data: { reason: "surface_coordinate_invalid" },
+    });
+    expect(
+      await resolveSurfacePointerTarget(
+        invalid.context,
+        { tabId: 4 },
+        pointParams(invalid.capture.id),
+        { cdp: invalid.browser.cdp },
+      ),
+    ).toMatchObject({ data: { reason: "surface_capture_consumed" } });
+  });
+
+  it("maps image coordinates through an OOPIF frame projection", async () => {
+    const manager = new SessionManager({ agentWindow: fakeAgentWindow() });
+    const context = await manager.start("aa11");
+    context.refStore.set("e3", 99, {
+      tabId: 4,
+      frameId: "child",
+      cdpSessionId: "child-session",
+      kind: "surface",
+      visibleRect: { x: 120, y: 110, w: 100, h: 40 },
+    });
+    const graph = {
+      rootFrameId: "main",
+      frames: [
+        { frameId: "main", target: { tabId: 4 } },
+        {
+          frameId: "child",
+          parentFrameId: "main",
+          ownerBackendNodeId: 77,
+          target: { tabId: 4, sessionId: "child-session" },
+        },
+      ],
+    };
+    const sent: Array<{ method: string; params?: object }> = [];
+    const cdp: CdpRunner = {
+      send: vi.fn(async (_tabId: number, method: string, params?: object) => {
+        sent.push({ method, params });
+        if (method === "Page.getFrameTree") {
+          return {
+            frameTree: {
+              frame: { id: "main", loaderId: "loader-1", url: "https://fixture.test/" },
+            },
+          } as never;
+        }
+        if (method === "Page.getLayoutMetrics") {
+          return {
+            cssLayoutViewport: { clientWidth: 800, clientHeight: 600, pageX: 0, pageY: 0 },
+            cssVisualViewport: {
+              clientWidth: 800,
+              clientHeight: 600,
+              pageX: 0,
+              pageY: 0,
+              scale: 1,
+            },
+          } as never;
+        }
+        if (method === "DOM.getBoxModel") {
+          return { model: { content: [100, 100, 300, 100, 300, 200, 100, 200] } } as never;
+        }
+        if (method === "Input.dispatchMouseEvent") return {} as never;
+        throw new Error(`unexpected root CDP call ${method}`);
+      }) as CdpRunner["send"],
+      sendToTarget: vi.fn(async (_target, method) => {
+        if (method === "DOM.getContentQuads") {
+          return { quads: [[20, 10, 120, 10, 120, 50, 20, 50]] } as never;
+        }
+        if (method === "Page.getLayoutMetrics") {
+          return { cssLayoutViewport: { clientWidth: 200, clientHeight: 100 } } as never;
+        }
+        throw new Error(`unexpected child CDP call ${method}`);
+      }) as CdpRunner["sendToTarget"],
+      getFrameGraph: vi.fn(async () => graph),
+      trackSessionTab: vi.fn(),
+    };
+    const environment = await captureSurfaceEnvironment(cdp, 4, "child");
+    if ("code" in environment) throw new Error(environment.message);
+    const entry = context.refStore.resolveEntry("e3");
+    if (!entry) throw new Error("missing ref");
+    const capture = context.surfaceCaptures.create({
+      sessionId: "aa11",
+      tabId: 4,
+      navigationIdentity: environment.navigationIdentity,
+      surface: {
+        ref: "e3",
+        frameId: "child",
+        backendNodeId: 99,
+        observationGeneration: entry.generation,
+      },
+      topViewportRect: { x: 120, y: 110, w: 100, h: 40 },
+      imageWidth: 200,
+      imageHeight: 80,
+      viewportSignature: environment.viewportSignature,
+      frameProjectionSignature: environment.frameProjectionSignature,
+    });
+
+    const result = await resolveSurfacePointerTarget(
+      context,
+      { tabId: 4 },
+      {
+        ref: "@e3",
+        captureId: capture.id,
+        imageX: 100,
+        imageY: 40,
+      },
+      { cdp },
+    );
+
+    if ("code" in result) throw new Error(JSON.stringify(result));
+    expect(result).toMatchObject({ point: { x: 170, y: 130 } });
+    expect(sent.some((call) => call.method === "Input.dispatchMouseEvent")).toBe(false);
+  });
+});

apps/extension/src/tools/__tests__/visual-screenshot-plan.test.ts

@@ -1,37 +0,0 @@
-import { describe, expect, it } from "vitest";
-import {
-  correctedVisualScreenshotScale,
-  planVisualScreenshot,
-  screenshotFitsPixelBudget,
-} from "../visual-screenshot-plan";
-
-const budget = { maxEdge: 2_048, maxPixels: 4_000_000 };
-
-describe("visual screenshot pixel planning", () => {
-  it.each([1, 1.25, 1.5, 2, 3])("accounts for raster scale %s", (rasterScaleEstimate) => {
-    const plan = planVisualScreenshot({
-      cssRect: { width: 2_000, height: 1_000 },
-      rasterScaleEstimate,
-      budget,
-    });
-    const width = 2_000 * rasterScaleEstimate * plan.clipScale;
-    const height = 1_000 * rasterScaleEstimate * plan.clipScale;
-
-    expect(Math.max(width, height)).toBeLessThanOrEqual(budget.maxEdge);
-    expect(width * height).toBeLessThanOrEqual(budget.maxPixels);
-  });
-
-  it("corrects a scale from actual PNG dimensions", () => {
-    const corrected = correctedVisualScreenshotScale({
-      previousClipScale: 1,
-      actualWidth: 4_000,
-      actualHeight: 2_000,
-      budget,
-    });
-
-    expect(corrected).not.toBeNull();
-    expect(corrected as number).toBeLessThan(2_048 / 4_000);
-    expect(screenshotFitsPixelBudget({ width: 2_000, height: 1_000 }, budget)).toBe(true);
-    expect(screenshotFitsPixelBudget({ width: 4_000, height: 2_000 }, budget)).toBe(false);
-  });
-});

apps/extension/src/tools/frame-geometry.ts

@@ -1,9 +1,4 @@
-import {
-  type CdpFrame,
-  type CdpFrameGraph,
-  type CdpTarget,
-  cdpTargetKey,
-} from "@/browser-driver/frame-graph";
+import { type CdpFrame, type CdpFrameGraph, type CdpTarget } from "@/browser-driver/frame-graph";
 import type { RpcError } from "@/transport/types";
 import { nodeContentRegion, scrollNodeIntoView } from "./element-geometry";
 import {
@@ -15,7 +10,6 @@ import {
   parseCdpQuad,
   polygonArea,
   polygonCentroid,
-  projectRectToViewport,
   projectRegionToViewport,
   type Quad,
   type Region,
@@ -90,41 +84,6 @@ async function targetViewport(cdp: CdpRunner, target: CdpTarget): Promise<Size |
   return width > 0 && height > 0 ? { width, height } : null;
 }
 
-async function sameTargetFrameViewport(cdp: CdpRunner, frame: CdpFrame): Promise<Size | null> {
-  const world = await sendToCdpTarget<{ executionContextId?: number }>(
-    cdp,
-    frame.target,
-    "Page.createIsolatedWorld",
-    {
-      frameId: frame.frameId,
-      worldName: "bsk-frame-geometry",
-      grantUniveralAccess: false,
-    },
-  );
-  if (world.executionContextId === undefined) return null;
-  const result = await sendToCdpTarget<{ result?: { value?: unknown } }>(
-    cdp,
-    frame.target,
-    "Runtime.evaluate",
-    {
-      expression: "({width:window.innerWidth,height:window.innerHeight})",
-      contextId: world.executionContextId,
-      returnByValue: true,
-    },
-  );
-  const value = result.result?.value as { width?: unknown; height?: unknown } | undefined;
-  const width = value?.width;
-  const height = value?.height;
-  return typeof width === "number" &&
-    Number.isFinite(width) &&
-    width > 0 &&
-    typeof height === "number" &&
-    Number.isFinite(height) &&
-    height > 0
-    ? { width, height }
-    : null;
-}
-
 async function ownerContentQuad(
   cdp: CdpRunner,
   parent: CdpFrame,
@@ -139,150 +98,26 @@ async function ownerContentQuad(
   return parseCdpQuad(result.model?.content);
 }
 
-export interface FrameGeometryContext {
-  resolveFrameProjection(frameId: string): Promise<GeometryProjection | null>;
-  projectFrameLocalRect(
-    frameId: string,
-    rect: { x: number; y: number; w: number; h: number },
-  ): Promise<ViewportRect | null>;
-}
-
-export function createFrameGeometryContext(
+async function sameTargetFrameClips(
   cdp: CdpRunner,
-  graph: CdpFrameGraph,
-): FrameGeometryContext {
-  const byId = frameMap(graph);
-  const targetViewports = new Map<string, Promise<Size | null>>();
-  const frameViewports = new Map<string, Promise<Size | null>>();
-  const ownerQuads = new Map<string, Promise<Quad | null>>();
-  const projections = new Map<string, Promise<GeometryProjection | null>>();
-  const localProjections = new Map<string, Promise<GeometryProjection | null>>();
-
-  const cachedTargetViewport = (target: CdpTarget): Promise<Size | null> => {
-    const key = cdpTargetKey(target);
-    let value = targetViewports.get(key);
-    if (!value) {
-      value = targetViewport(cdp, target);
-      targetViewports.set(key, value);
-    }
-    return value;
-  };
-  const cachedFrameViewport = (frame: CdpFrame): Promise<Size | null> => {
-    let value = frameViewports.get(frame.frameId);
-    if (!value) {
-      const root = targetRootFrame(byId, frame);
-      value =
-        root?.frameId === frame.frameId
-          ? cachedTargetViewport(frame.target)
-          : sameTargetFrameViewport(cdp, frame);
-      frameViewports.set(frame.frameId, value);
-    }
-    return value;
-  };
-  const cachedOwnerQuad = (parent: CdpFrame, backendNodeId: number): Promise<Quad | null> => {
-    const key = `${cdpTargetKey(parent.target)}:${backendNodeId}`;
-    let value = ownerQuads.get(key);
-    if (!value) {
-      value = ownerContentQuad(cdp, parent, backendNodeId);
-      ownerQuads.set(key, value);
-    }
-    return value;
-  };
-  const cachedSameTargetClips = async (
-    frame: CdpFrame,
-    root: CdpFrame,
-  ): Promise<Polygon[] | null> => {
-    const clips: Polygon[] = [];
-    let current = frame;
-    const seen = new Set<string>();
-    while (current.frameId !== root.frameId) {
-      if (seen.has(current.frameId) || !current.parentFrameId) return null;
-      seen.add(current.frameId);
-      const parent = byId.get(current.parentFrameId);
-      if (!parent || current.ownerBackendNodeId === undefined) return null;
-      const clip = await cachedOwnerQuad(parent, current.ownerBackendNodeId);
-      if (!clip) return null;
-      clips.push(clip);
-      current = parent;
-    }
-    return clips;
-  };
-
-  const buildTargetProjection = async (frameId: string): Promise<GeometryProjection | null> => {
-    const frame = byId.get(frameId);
-    if (!frame) return null;
-    let root = targetRootFrame(byId, frame);
-    if (!root) return null;
-    const sourceViewport = await cachedTargetViewport(root.target);
-    if (!sourceViewport) return null;
-    const sourceClips = await cachedSameTargetClips(frame, root);
-    if (!sourceClips) return null;
-    const edges: ProjectiveEdge[] = [];
-    while (root.parentFrameId) {
-      const parent = byId.get(root.parentFrameId);
-      if (!parent || root.ownerBackendNodeId === undefined) return null;
-      const destinationQuad = await cachedOwnerQuad(parent, root.ownerBackendNodeId);
-      if (!destinationQuad) return null;
-      const source = await cachedTargetViewport(root.target);
-      if (!source) return null;
-      const parentRoot = targetRootFrame(byId, parent);
-      if (!parentRoot) return null;
-      const destinationClips = await cachedSameTargetClips(parent, parentRoot);
-      if (!destinationClips) return null;
-      edges.push({ sourceViewport: source, destinationQuad, destinationClips });
-      root = parentRoot;
-    }
-    const topViewport = await cachedTargetViewport(root.target);
-    return topViewport ? { sourceClips, edges, topViewport } : null;
-  };
-
-  const resolveFrameProjectionCached = (frameId: string): Promise<GeometryProjection | null> => {
-    let value = projections.get(frameId);
-    if (!value) {
-      value = buildTargetProjection(frameId);
-      projections.set(frameId, value);
-    }
-    return value;
-  };
-
-  const buildLocalProjection = async (frameId: string): Promise<GeometryProjection | null> => {
-    const frame = byId.get(frameId);
-    if (!frame) return null;
-    const root = targetRootFrame(byId, frame);
-    if (!root) return null;
-    const targetProjection = await resolveFrameProjectionCached(root.frameId);
-    if (!targetProjection) return null;
-    if (root.frameId === frame.frameId) return targetProjection;
-    if (!frame.parentFrameId || frame.ownerBackendNodeId === undefined) return null;
-    const parent = byId.get(frame.parentFrameId);
-    if (!parent) return null;
-    const sourceViewport = await cachedFrameViewport(frame);
-    const destinationQuad = await cachedOwnerQuad(parent, frame.ownerBackendNodeId);
-    const destinationClips = await cachedSameTargetClips(frame, root);
-    if (!sourceViewport || !destinationQuad || !destinationClips) return null;
-    return {
-      sourceClips: [],
-      edges: [{ sourceViewport, destinationQuad, destinationClips }, ...targetProjection.edges],
-      topViewport: targetProjection.topViewport,
-    };
-  };
-
-  const localProjection = (frameId: string): Promise<GeometryProjection | null> => {
-    let value = localProjections.get(frameId);
-    if (!value) {
-      value = buildLocalProjection(frameId);
-      localProjections.set(frameId, value);
-    }
-    return value;
-  };
-
-  return {
-    resolveFrameProjection: resolveFrameProjectionCached,
-    async projectFrameLocalRect(frameId, rect) {
-      const projection = await localProjection(frameId);
-      return projection ? projectRectToViewport(rect, projection) : null;
-    },
-  };
+  byId: Map<string, CdpFrame>,
+  frame: CdpFrame,
+  targetRoot: CdpFrame,
+): Promise<Polygon[] | null> {
+  const clips: Polygon[] = [];
+  let current = frame;
+  const seen = new Set<string>();
+  while (current.frameId !== targetRoot.frameId) {
+    if (seen.has(current.frameId) || !current.parentFrameId) return null;
+    seen.add(current.frameId);
+    const parent = byId.get(current.parentFrameId);
+    if (!parent || current.ownerBackendNodeId === undefined) return null;
+    const clip = await ownerContentQuad(cdp, parent, current.ownerBackendNodeId);
+    if (!clip) return null;
+    clips.push(clip);
+    current = parent;
+  }
+  return clips;
 }
 
 export async function resolveFrameProjection(
@@ -290,7 +125,36 @@ export async function resolveFrameProjection(
   graph: CdpFrameGraph,
   frameId: string,
 ): Promise<GeometryProjection | null> {
-  return createFrameGeometryContext(cdp, graph).resolveFrameProjection(frameId);
+  const byId = frameMap(graph);
+  const frame = byId.get(frameId);
+  if (!frame) return null;
+  let targetRoot = targetRootFrame(byId, frame);
+  if (!targetRoot) return null;
+  const sourceViewport = await targetViewport(cdp, targetRoot.target);
+  if (!sourceViewport) return null;
+  const sourceClips = await sameTargetFrameClips(cdp, byId, frame, targetRoot);
+  if (!sourceClips) return null;
+
+  const edges: ProjectiveEdge[] = [];
+  while (targetRoot.parentFrameId) {
+    const parent = byId.get(targetRoot.parentFrameId);
+    if (!parent || targetRoot.ownerBackendNodeId === undefined) return null;
+    const destinationQuad = await ownerContentQuad(cdp, parent, targetRoot.ownerBackendNodeId);
+    if (!destinationQuad) return null;
+    const source =
+      edges.length === 0 ? sourceViewport : await targetViewport(cdp, targetRoot.target);
+    if (!source) return null;
+    const parentTargetRoot = targetRootFrame(byId, parent);
+    if (!parentTargetRoot) return null;
+    const destinationClips = await sameTargetFrameClips(cdp, byId, parent, parentTargetRoot);
+    if (!destinationClips) return null;
+    edges.push({ sourceViewport: source, destinationQuad, destinationClips });
+    targetRoot = parentTargetRoot;
+  }
+
+  const topViewport =
+    edges.length === 0 ? sourceViewport : await targetViewport(cdp, targetRoot.target);
+  return topViewport ? { sourceClips, edges, topViewport } : null;
 }
 
 async function loadFrameGraph(cdp: CdpRunner, tabId: number): Promise<CdpFrameGraph | null> {

apps/extension/src/tools/geometry.ts

@@ -245,3 +245,22 @@ export function projectRectToViewport(
   if (!rect) return null;
   return regionBounds(projectRegionToViewport([rectPolygon(rect)], projection));
 }
+
+export function childFrameProjection(
+  parent: GeometryProjection,
+  ownerRectInParent: { x: number; y: number; w: number; h: number },
+): GeometryProjection {
+  const destinationQuad = rectPolygon(ownerRectInParent);
+  return {
+    sourceClips: [],
+    edges: [
+      {
+        sourceViewport: { width: ownerRectInParent.w, height: ownerRectInParent.h },
+        destinationQuad,
+        destinationClips: parent.sourceClips,
+      },
+      ...parent.edges,
+    ],
+    topViewport: parent.topViewport,
+  };
+}

apps/extension/src/tools/interaction.ts

@@ -32,6 +32,7 @@ import { attachDialogs, markDialogCursor } from "./dialogs";
 import { backendNodeToObject } from "./element-geometry";
 import { rpcError } from "./errors";
 import { resolveNodeGeometry, scrollElementAndFramesIntoView } from "./frame-geometry";
+import { dispatchMouseClick } from "./mouse-input";
 import {
   type CdpRunner,
   type ChromeTabsApi,
@@ -44,6 +45,7 @@ import {
   resolveTargetTab,
 } from "./shared";
 import { resolveSnapshotRef } from "./snapshot-ref";
+import { resolveSurfacePointerTarget } from "./surface-target";
 
 export interface InteractionDeps {
   cdp: CdpRunner;
@@ -242,11 +244,25 @@ export async function resolveActionTarget(
 // tool.click
 // ---------------------------------------------------------------------------
 
+interface ResolvedClickPointerTarget {
+  point: { x: number; y: number };
+  usedRef?: string;
+  usedSelector?: string;
+  moveSettleMs: number;
+  capture?: {
+    id: string;
+    imageX: number;
+    imageY: number;
+  };
+}
+
 export async function handleClick(
   manager: SessionManager,
   params: ClickParams,
   deps: InteractionDeps = getDefaultDeps(),
 ): Promise<ClickResult | RpcError> {
+  const hasSurfacePointParams =
+    params.capture_id !== undefined || params.image_x !== undefined || params.image_y !== undefined;
   const ctxOrErr = lookupSession(manager, params, "click");
   if (isRpcError(ctxOrErr)) return ctxOrErr;
   const ctx = ctxOrErr;
@@ -256,6 +272,23 @@ export async function handleClick(
   if (isRpcError(target)) return target;
   const denied = enforceAgentWindow(ctx, target, "click");
   if (denied) return denied;
+  if (hasSurfacePointParams) {
+    const dialogCursor = markDialogCursor(deps.cdp, target.tabId);
+    const pointerTarget = await resolveSurfacePointerTarget(
+      ctx,
+      target,
+      {
+        ref: params.ref,
+        selector: params.selector,
+        captureId: params.capture_id,
+        imageX: params.image_x,
+        imageY: params.image_y,
+      },
+      { cdp: deps.cdp, signal: deps.signal },
+    );
+    if (isRpcError(pointerTarget)) return pointerTarget;
+    return executeResolvedClick(ctx, target, pointerTarget, params, deps, dialogCursor);
+  }
   const resolved = await resolveActionTarget(deps.cdp, ctx, target, params, "click");
   if (isRpcError(resolved)) return resolved;
   return clickResolvedTarget(ctx, resolved, params, deps);
@@ -269,11 +302,6 @@ export async function clickResolvedTarget(
 ): Promise<ClickResult | RpcError> {
   const { tab: target } = resolved;
   const dialogCursor = markDialogCursor(deps.cdp, target.tabId);
-
-  if (throwIfAborted(deps.signal)) {
-    return { code: "cancelled", message: "click aborted" };
-  }
-
   deps.cdp.trackSessionTab?.(ctx.sessionId, target.tabId);
   const geometry = await resolveNodeGeometry(
     deps.cdp,
@@ -286,20 +314,47 @@ export async function clickResolvedTarget(
     { scrollIntoView: true },
   );
   if (isRpcError(geometry)) return geometry;
-  const centre = geometry.actionPoint;
+  return executeResolvedClick(
+    ctx,
+    target,
+    {
+      point: geometry.actionPoint,
+      usedRef: resolved.usedRef,
+      usedSelector: resolved.usedSelector,
+      moveSettleMs: 0,
+    },
+    params,
+    deps,
+    dialogCursor,
+  );
+}
 
+async function executeResolvedClick(
+  ctx: SessionContext,
+  target: ResolvedTargetTab,
+  pointerTarget: ResolvedClickPointerTarget,
+  params: Pick<ClickParams, "button" | "click_count" | "modifiers">,
+  deps: InteractionDeps,
+  dialogCursor: number,
+): Promise<ClickResult | RpcError> {
   if (throwIfAborted(deps.signal)) {
     return { code: "cancelled", message: "click aborted" };
   }
 
   const button: MouseButton = params.button ?? "left";
   const clickCount = params.click_count ?? 1;
-  if (clickCount < 1) {
-    return { code: "invalid_params", message: "click_count must be greater than zero" };
+  if (!Number.isSafeInteger(clickCount) || clickCount < 1) {
+    return { code: "invalid_params", message: "click_count must be a positive integer" };
   }
   const modifiers = modifiersBitfield(params.modifiers);
 
-  const overlayBlocking = await checkOverlayAtPoint(deps.cdp, target.tabId, centre.x, centre.y);
+  deps.cdp.trackSessionTab?.(ctx.sessionId, target.tabId);
+  const overlayBlocking = await checkOverlayAtPoint(
+    deps.cdp,
+    target.tabId,
+    pointerTarget.point.x,
+    pointerTarget.point.y,
+  );
   let automationBypassEnabled = false;
   if (overlayBlocking && deps.bypassOverlay) {
     try {
@@ -311,47 +366,16 @@ export async function clickResolvedTarget(
   }
 
   try {
-    // Move first so hover state activates, then press → release.
-    await deps.cdp.send(target.tabId, "Input.dispatchMouseEvent", {
-      type: "mouseMoved",
-      x: centre.x,
-      y: centre.y,
-      modifiers,
-    });
-    if (throwIfAborted(deps.signal)) {
-      return { code: "cancelled", message: "click aborted" };
-    }
-    await deps.cdp.send(target.tabId, "Input.dispatchMouseEvent", {
-      type: "mousePressed",
-      x: centre.x,
-      y: centre.y,
+    const dispatch = await dispatchMouseClick(deps.cdp, target.tabId, pointerTarget.point, {
       button,
       clickCount,
       modifiers,
+      signal: deps.signal,
+      moveSettleMs: pointerTarget.moveSettleMs,
     });
-    if (throwIfAborted(deps.signal)) {
-      try {
-        await deps.cdp.send(target.tabId, "Input.dispatchMouseEvent", {
-          type: "mouseReleased",
-          x: centre.x,
-          y: centre.y,
-          button,
-          clickCount,
-          modifiers,
-        });
-      } catch (err) {
-        console.debug("[bsk interaction] best-effort mouseReleased after abort failed", err);
-      }
+    if (dispatch === "cancelled") {
       return { code: "cancelled", message: "click aborted" };
     }
-    await deps.cdp.send(target.tabId, "Input.dispatchMouseEvent", {
-      type: "mouseReleased",
-      x: centre.x,
-      y: centre.y,
-      button,
-      clickCount,
-      modifiers,
-    });
   } catch (err) {
     return {
       code: "cdp_failed",
@@ -369,10 +393,17 @@ export async function clickResolvedTarget(
 
   return attachDialogs(deps.cdp, target.tabId, dialogCursor, {
     tab_id: target.tabId,
-    used_ref: resolved.usedRef,
-    used_selector: resolved.usedSelector,
-    x: centre.x,
-    y: centre.y,
+    used_ref: pointerTarget.usedRef,
+    used_selector: pointerTarget.usedSelector,
+    x: pointerTarget.point.x,
+    y: pointerTarget.point.y,
+    ...(pointerTarget.capture
+      ? {
+          capture_id: pointerTarget.capture.id,
+          image_x: pointerTarget.capture.imageX,
+          image_y: pointerTarget.capture.imageY,
+        }
+      : {}),
   });
 }
 

apps/extension/src/tools/mouse-input.ts

@@ -0,0 +1,96 @@
+import type { MouseButton } from "@/transport/types";
+import type { Point } from "./geometry";
+import type { CdpRunner } from "./shared";
+
+interface MouseClickDispatchOptions {
+  button: MouseButton;
+  clickCount: number;
+  modifiers: number;
+  signal?: AbortSignal;
+  moveSettleMs?: number;
+}
+
+type MouseClickDispatchResult = "completed" | "cancelled";
+
+function waitForSettle(ms: number, signal: AbortSignal | undefined): Promise<boolean> {
+  if (ms <= 0) return Promise.resolve(signal?.aborted !== true);
+  if (signal?.aborted) return Promise.resolve(false);
+  return new Promise((resolve) => {
+    let settled = false;
+    const finish = (completed: boolean) => {
+      if (settled) return;
+      settled = true;
+      clearTimeout(timer);
+      signal?.removeEventListener("abort", onAbort);
+      resolve(completed);
+    };
+    const timer = setTimeout(() => finish(true), ms);
+    const onAbort = () => finish(false);
+    signal?.addEventListener("abort", onAbort, { once: true });
+  });
+}
+
+/**
+ * Dispatch one coherent CDP mouse click in top-viewport CSS coordinates.
+ *
+ * Keeping the sequence here prevents DOM and Surface interaction paths from
+ * duplicating cancellation and best-effort release behavior. Callers that
+ * target asynchronously hit-tested content may request a settle interval.
+ */
+export async function dispatchMouseClick(
+  cdp: CdpRunner,
+  tabId: number,
+  point: Point,
+  options: MouseClickDispatchOptions,
+): Promise<MouseClickDispatchResult> {
+  const { button, clickCount, modifiers, signal, moveSettleMs = 0 } = options;
+  let pressed = false;
+  const release = () =>
+    cdp.send(tabId, "Input.dispatchMouseEvent", {
+      type: "mouseReleased",
+      x: point.x,
+      y: point.y,
+      button,
+      clickCount,
+      modifiers,
+    });
+
+  try {
+    await cdp.send(tabId, "Input.dispatchMouseEvent", {
+      type: "mouseMoved",
+      x: point.x,
+      y: point.y,
+      modifiers,
+    });
+    if (!(await waitForSettle(moveSettleMs, signal))) return "cancelled";
+
+    await cdp.send(tabId, "Input.dispatchMouseEvent", {
+      type: "mousePressed",
+      x: point.x,
+      y: point.y,
+      button,
+      clickCount,
+      modifiers,
+    });
+    pressed = true;
+
+    if (signal?.aborted) {
+      await release();
+      pressed = false;
+      return "cancelled";
+    }
+
+    await release();
+    pressed = false;
+    return "completed";
+  } catch (error) {
+    if (pressed) {
+      try {
+        await release();
+      } catch (releaseError) {
+        console.debug("[bsk mouse-input] best-effort mouse release failed", releaseError);
+      }
+    }
+    throw error;
+  }
+}

apps/extension/src/tools/observation.ts

@@ -48,13 +48,8 @@ import {
   type ToolEffect,
 } from "./shared";
 import { resolveSnapshotRef } from "./snapshot-ref";
-import { topLevelScreenshotRasterScale } from "./viewport-metrics";
-import {
-  correctedVisualScreenshotScale,
-  planVisualScreenshot,
-  type ScreenshotPixelBudget,
-  screenshotFitsPixelBudget,
-} from "./visual-screenshot-plan";
+import { surfaceVisibleRect } from "./surface-coordinate";
+import { captureSurfaceEnvironment } from "./surface-target";
 import {
   type CapturedNode,
   type CapturedSurfaceProbe,
@@ -108,10 +103,6 @@ export const normaliseRef = sharedNormaliseRef;
 
 const VISUAL_SURFACE_SCREENSHOT_MAX_EDGE = 2_048;
 const VISUAL_SURFACE_SCREENSHOT_MAX_PIXELS = 4_000_000;
-const VISUAL_SURFACE_SCREENSHOT_BUDGET: ScreenshotPixelBudget = {
-  maxEdge: VISUAL_SURFACE_SCREENSHOT_MAX_EDGE,
-  maxPixels: VISUAL_SURFACE_SCREENSHOT_MAX_PIXELS,
-};
 
 /**
  * Strip the `data:image/...;base64,` prefix from a Chrome
@@ -208,7 +199,9 @@ async function captureElementScreenshot(
   visualSurface = false,
   observedVisibleRect?: Rect,
   signal?: AbortSignal,
-): Promise<{ image_base64: string; width: number; height: number } | RpcError> {
+): Promise<
+  { image_base64: string; width: number; height: number; topViewportRect: Rect } | RpcError
+> {
   if (signal?.aborted) return cancelled("screenshot");
   const geometry = await resolveNodeGeometry(
     cdp,
@@ -218,70 +211,49 @@ async function captureElementScreenshot(
   );
   if (isRpcError(geometry)) return geometry;
   if (signal?.aborted) return cancelled("screenshot");
-  const liveRect = geometry.topBounds;
-  const rect =
-    visualSurface && observedVisibleRect
-      ? (() => {
-          const x = Math.max(liveRect.x, observedVisibleRect.x);
-          const y = Math.max(liveRect.y, observedVisibleRect.y);
-          const right = Math.min(
-            liveRect.x + liveRect.width,
-            observedVisibleRect.x + observedVisibleRect.w,
-          );
-          const bottom = Math.min(
-            liveRect.y + liveRect.height,
-            observedVisibleRect.y + observedVisibleRect.h,
-          );
-          return right > x && bottom > y ? { x, y, width: right - x, height: bottom - y } : null;
-        })()
-      : liveRect;
-  if (!rect) return { code: "permission_denied", message: "surface is no longer visible" };
-  const rasterScaleEstimate = visualSurface ? await topLevelScreenshotRasterScale(cdp, tabId) : 1;
-  let scale = visualSurface
-    ? planVisualScreenshot({
-        cssRect: rect,
-        rasterScaleEstimate,
-        budget: VISUAL_SURFACE_SCREENSHOT_BUDGET,
-      }).clipScale
+  const topViewportRect = surfaceVisibleRect(
+    geometry.topBounds,
+    visualSurface ? observedVisibleRect : undefined,
+  );
+  if (!topViewportRect) {
+    return { code: "permission_denied", message: "surface is no longer visible" };
+  }
+  const rect = {
+    x: topViewportRect.x,
+    y: topViewportRect.y,
+    width: topViewportRect.w,
+    height: topViewportRect.h,
+  };
+  const scale = visualSurface
+    ? Math.min(
+        1,
+        VISUAL_SURFACE_SCREENSHOT_MAX_EDGE / rect.width,
+        VISUAL_SURFACE_SCREENSHOT_MAX_EDGE / rect.height,
+        Math.sqrt(VISUAL_SURFACE_SCREENSHOT_MAX_PIXELS / (rect.width * rect.height)),
+      )
     : 1;
 
   try {
-    for (let attempt = 0; attempt < (visualSurface ? 2 : 1); attempt += 1) {
-      const shot = await cdp.send<{ data?: string }>(tabId, "Page.captureScreenshot", {
-        format: "png",
-        clip: {
-          x: rect.x,
-          y: rect.y,
-          width: rect.width,
-          height: rect.height,
-          scale,
-        },
-      });
-      if (signal?.aborted) return cancelled("screenshot");
-      const image_base64 = shot.data ?? "";
-      if (!image_base64) {
-        return { code: "cdp_failed", message: "Page.captureScreenshot returned no data" };
-      }
-      const dims = parsePngDimensions(image_base64);
-      if (!dims) {
-        return { code: "cdp_failed", message: "Page.captureScreenshot returned invalid PNG data" };
-      }
-      if (!visualSurface || screenshotFitsPixelBudget(dims, VISUAL_SURFACE_SCREENSHOT_BUDGET)) {
-        return { image_base64, width: dims.width, height: dims.height };
-      }
-      const corrected = correctedVisualScreenshotScale({
-        previousClipScale: scale,
-        actualWidth: dims.width,
-        actualHeight: dims.height,
-        budget: VISUAL_SURFACE_SCREENSHOT_BUDGET,
-      });
-      if (attempt === 1 || corrected === null) break;
-      scale = corrected;
+    const shot = await cdp.send<{ data?: string }>(tabId, "Page.captureScreenshot", {
+      format: "png",
+      clip: {
+        x: rect.x,
+        y: rect.y,
+        width: rect.width,
+        height: rect.height,
+        scale,
+      },
+    });
+    if (signal?.aborted) return cancelled("screenshot");
+    const image_base64 = shot.data ?? "";
+    if (!image_base64) {
+      return { code: "cdp_failed", message: "Page.captureScreenshot returned no data" };
     }
-    return {
-      code: "cdp_failed",
-      message: "Page.captureScreenshot exceeded the visual surface pixel budget",
-    };
+    const dims = parsePngDimensions(image_base64);
+    if (!dims) {
+      return { code: "cdp_failed", message: "Page.captureScreenshot returned invalid PNG data" };
+    }
+    return { image_base64, width: dims.width, height: dims.height, topViewportRect };
   } catch (err) {
     return {
       code: "cdp_failed",
@@ -378,12 +350,6 @@ export async function handleScreenshot(
     }
     const node = resolveSnapshotRef(ctx, ref, target.tabId, "screenshot");
     if (isRpcError(node)) return node;
-    if (node.kind === "surface" && !node.visibleRect) {
-      return {
-        code: "permission_denied",
-        message: `surface ref ${ref} has no observation-time visible bounds`,
-      };
-    }
     if (signal?.aborted) return cancelled("screenshot");
     deps.cdp.trackSessionTab?.(ctx.sessionId, target.tabId);
     await deps.cdp.ensureAttachedToUrl?.(target.tabId, target.url);
@@ -410,12 +376,46 @@ export async function handleScreenshot(
     );
     if (isRpcError(captured)) return captured;
     if (signal?.aborted) return cancelled("screenshot");
+    const capture =
+      node.kind === "surface"
+        ? await (async () => {
+            const environment = await captureSurfaceEnvironment(cdp, target.tabId, node.frameId);
+            if (isRpcError(environment)) return environment;
+            return ctx.surfaceCaptures.create({
+              sessionId: ctx.sessionId,
+              tabId: target.tabId,
+              navigationIdentity: environment.navigationIdentity,
+              surface: {
+                ref: node.refKey,
+                ...(node.frameId ? { frameId: node.frameId } : {}),
+                backendNodeId: node.backendNodeId,
+                observationGeneration: node.generation,
+              },
+              topViewportRect: captured.topViewportRect,
+              imageWidth: captured.width,
+              imageHeight: captured.height,
+              viewportSignature: environment.viewportSignature,
+              frameProjectionSignature: environment.frameProjectionSignature,
+            });
+          })()
+        : null;
+    if (capture && isRpcError(capture)) return capture;
     return withShotDialogs({
       image_base64: captured.image_base64,
       width: captured.width,
       height: captured.height,
       format: "png",
       tab_id: target.tabId,
+      ...(capture
+        ? {
+            capture: {
+              id: capture.id,
+              surface_ref: `@${capture.surface.ref}`,
+              coordinate_space: "capture-image-pixel" as const,
+              expires_at: capture.expiresAt,
+            },
+          }
+        : {}),
     });
   }
 

apps/extension/src/tools/session.ts

@@ -271,6 +271,7 @@ export async function handleSessionStop(
 
   // Step 2: clear the per-session RefStore (review M6/M7 parity).
   ctx.refStore.clear();
+  ctx.surfaceCaptures.clear();
 
   clearRecordingForSession(params.session_id);
 

apps/extension/src/tools/snapshot-ref.ts

@@ -16,6 +16,7 @@ export interface SnapshotRefLookup {
   visibleRect?: Rect;
   kind: RefTargetKind;
   capabilities: RefCapability[];
+  generation: number;
 }
 
 function refEntryForTab(ctx: SessionContext, refKey: string, tabId: number) {
@@ -44,6 +45,7 @@ export function lookupSnapshotRef(
     ...(entry.visibleRect ? { visibleRect: entry.visibleRect } : {}),
     kind: entry.kind,
     capabilities: entry.capabilities,
+    generation: entry.generation,
   };
 }
 

apps/extension/src/tools/surface-coordinate.ts

@@ -0,0 +1,88 @@
+import type { Rect } from "@browser-skill/vom";
+import type { Point, Region, ViewportRect } from "./geometry";
+
+const RECT_EPSILON = 0.01;
+
+export function surfaceVisibleRect(
+  liveRect: ViewportRect,
+  observedRect: Rect | undefined,
+): Rect | null {
+  const observed = observedRect ?? {
+    x: liveRect.x,
+    y: liveRect.y,
+    w: liveRect.width,
+    h: liveRect.height,
+  };
+  const x = Math.max(liveRect.x, observed.x);
+  const y = Math.max(liveRect.y, observed.y);
+  const right = Math.min(liveRect.x + liveRect.width, observed.x + observed.w);
+  const bottom = Math.min(liveRect.y + liveRect.height, observed.y + observed.h);
+  return right > x && bottom > y ? { x, y, w: right - x, h: bottom - y } : null;
+}
+
+export function sameRect(a: Rect, b: Rect): boolean {
+  return (
+    Math.abs(a.x - b.x) <= RECT_EPSILON &&
+    Math.abs(a.y - b.y) <= RECT_EPSILON &&
+    Math.abs(a.w - b.w) <= RECT_EPSILON &&
+    Math.abs(a.h - b.h) <= RECT_EPSILON
+  );
+}
+
+export function mapImagePointToViewport(
+  rect: Rect,
+  imageWidth: number,
+  imageHeight: number,
+  imageX: number,
+  imageY: number,
+): Point | null {
+  if (
+    !Number.isFinite(imageX) ||
+    !Number.isFinite(imageY) ||
+    !Number.isSafeInteger(imageWidth) ||
+    !Number.isSafeInteger(imageHeight) ||
+    imageWidth <= 0 ||
+    imageHeight <= 0 ||
+    imageX < 0 ||
+    imageY < 0 ||
+    imageX >= imageWidth ||
+    imageY >= imageHeight ||
+    !Number.isFinite(rect.x) ||
+    !Number.isFinite(rect.y) ||
+    !Number.isFinite(rect.w) ||
+    !Number.isFinite(rect.h) ||
+    rect.w <= 0 ||
+    rect.h <= 0
+  ) {
+    return null;
+  }
+  return {
+    x: rect.x + (imageX / imageWidth) * rect.w,
+    y: rect.y + (imageY / imageHeight) * rect.h,
+  };
+}
+
+function pointInPolygon(point: Point, polygon: Point[]): boolean {
+  for (let index = 0; index < polygon.length; index += 1) {
+    const a = polygon[index];
+    const b = polygon[(index + 1) % polygon.length];
+    const cross = (point.x - a.x) * (b.y - a.y) - (point.y - a.y) * (b.x - a.x);
+    const withinX = point.x >= Math.min(a.x, b.x) - 1e-9 && point.x <= Math.max(a.x, b.x) + 1e-9;
+    const withinY = point.y >= Math.min(a.y, b.y) - 1e-9 && point.y <= Math.max(a.y, b.y) + 1e-9;
+    if (Math.abs(cross) <= 1e-9 && withinX && withinY) return true;
+  }
+  let inside = false;
+  for (let index = 0, previous = polygon.length - 1; index < polygon.length; previous = index++) {
+    const a = polygon[index];
+    const b = polygon[previous];
+    const intersects =
+      a.y > point.y !== b.y > point.y &&
+      point.x < ((b.x - a.x) * (point.y - a.y)) / (b.y - a.y) + a.x;
+    if (intersects) inside = !inside;
+  }
+  return inside;
+}
+
+export function pointInRegion(point: Point, region: Region): boolean {
+  return region.some((polygon) => polygon.length >= 3 && pointInPolygon(point, polygon));
+}

apps/extension/src/tools/surface-target.ts

@@ -0,0 +1,260 @@
+import type { CdpFrameGraph } from "@/browser-driver/frame-graph";
+import type { SessionContext } from "@/session-manager/manager";
+import type { RpcError } from "@/transport/types";
+import { rpcError } from "./errors";
+import { resolveNodeGeometry } from "./frame-geometry";
+import { type CdpRunner, isRpcError, normaliseRef } from "./shared";
+import { resolveSnapshotRef } from "./snapshot-ref";
+import {
+  mapImagePointToViewport,
+  pointInRegion,
+  sameRect,
+  surfaceVisibleRect,
+} from "./surface-coordinate";
+
+export interface SurfaceCaptureEnvironment {
+  navigationIdentity: string;
+  viewportSignature: string;
+  frameProjectionSignature: string;
+}
+
+export interface SurfaceTargetResolverDeps {
+  cdp: CdpRunner;
+  signal?: AbortSignal;
+}
+
+export interface SurfacePointerTargetInput {
+  ref?: string;
+  selector?: string;
+  captureId?: string;
+  imageX?: number;
+  imageY?: number;
+}
+
+export interface ResolvedSurfacePointerTarget {
+  point: { x: number; y: number };
+  usedRef: string;
+  moveSettleMs: number;
+  capture: {
+    id: string;
+    imageX: number;
+    imageY: number;
+  };
+}
+
+// Canvas-style controls commonly update their pointer hit-test on the next
+// animation frame. Leave a scheduling boundary after moving and before pressing.
+export const SURFACE_POINTER_MOVE_SETTLE_MS = 32;
+
+function stale(message: string): RpcError {
+  return rpcError("permission_denied", "surface_capture_stale", message);
+}
+
+function finiteObject(value: unknown): unknown {
+  if (Array.isArray(value)) return value.map(finiteObject);
+  if (typeof value !== "object" || value === null) return value;
+  return Object.fromEntries(
+    Object.entries(value)
+      .filter(
+        ([, entry]) => entry !== undefined && (typeof entry !== "number" || Number.isFinite(entry)),
+      )
+      .sort(([a], [b]) => a.localeCompare(b))
+      .map(([key, entry]) => [key, finiteObject(entry)]),
+  );
+}
+
+function framePathSignature(graph: CdpFrameGraph, frameId: string | undefined): string | null {
+  if (!frameId) return "top";
+  const frames = new Map(graph.frames.map((frame) => [frame.frameId, frame]));
+  const path: Array<{
+    frameId: string;
+    parentFrameId?: string;
+    ownerBackendNodeId?: number;
+    targetSessionId?: string;
+  }> = [];
+  const seen = new Set<string>();
+  let current = frames.get(frameId);
+  while (current) {
+    if (seen.has(current.frameId)) return null;
+    seen.add(current.frameId);
+    path.push({
+      frameId: current.frameId,
+      ...(current.parentFrameId ? { parentFrameId: current.parentFrameId } : {}),
+      ...(current.ownerBackendNodeId !== undefined
+        ? { ownerBackendNodeId: current.ownerBackendNodeId }
+        : {}),
+      ...(current.target.sessionId ? { targetSessionId: current.target.sessionId } : {}),
+    });
+    if (!current.parentFrameId) return JSON.stringify(path);
+    const parent = frames.get(current.parentFrameId);
+    if (!parent) return null;
+    current = parent;
+  }
+  return null;
+}
+
+export async function captureSurfaceEnvironment(
+  cdp: CdpRunner,
+  tabId: number,
+  frameId: string | undefined,
+): Promise<SurfaceCaptureEnvironment | RpcError> {
+  try {
+    const [tree, metrics, graph] = await Promise.all([
+      cdp.send<{
+        frameTree?: { frame?: { id?: string; loaderId?: string; url?: string } };
+      }>(tabId, "Page.getFrameTree", {}),
+      cdp.send<Record<string, unknown>>(tabId, "Page.getLayoutMetrics", {}),
+      frameId && cdp.getFrameGraph ? cdp.getFrameGraph(tabId) : Promise.resolve(null),
+    ]);
+    const root = tree.frameTree?.frame;
+    if (!root?.id || !root.loaderId) {
+      return { code: "cdp_failed", message: "could not identify the current navigation" };
+    }
+    const frameProjectionSignature = frameId
+      ? graph
+        ? framePathSignature(graph, frameId)
+        : null
+      : "top";
+    if (!frameProjectionSignature) {
+      return { code: "cdp_failed", message: `could not identify frame projection for ${frameId}` };
+    }
+    return {
+      navigationIdentity: JSON.stringify({ id: root.id, loaderId: root.loaderId, url: root.url }),
+      viewportSignature: JSON.stringify(
+        finiteObject({
+          cssLayoutViewport: metrics.cssLayoutViewport,
+          cssVisualViewport: metrics.cssVisualViewport,
+        }),
+      ),
+      frameProjectionSignature,
+    };
+  } catch (error) {
+    return { code: "cdp_failed", message: error instanceof Error ? error.message : String(error) };
+  }
+}
+
+function validatePointParams(input: SurfacePointerTargetInput): RpcError | null {
+  if (!input.captureId || typeof input.captureId !== "string") {
+    return { code: "invalid_params", message: "surface point click requires capture_id" };
+  }
+  if (typeof input.imageX !== "number" || !Number.isFinite(input.imageX)) {
+    return { code: "invalid_params", message: "image_x must be a finite number" };
+  }
+  if (typeof input.imageY !== "number" || !Number.isFinite(input.imageY)) {
+    return { code: "invalid_params", message: "image_y must be a finite number" };
+  }
+  if (!input.ref || input.selector) {
+    return {
+      code: "invalid_params",
+      message: "surface point click requires one Surface ref and does not accept a selector",
+    };
+  }
+  return null;
+}
+
+function captureConsumeError(reason: "not_found" | "expired" | "consumed"): RpcError {
+  const code = reason === "not_found" ? "not_found" : "permission_denied";
+  return rpcError(code, `surface_capture_${reason}`, `surface capture is ${reason}`);
+}
+
+function aborted(signal: AbortSignal | undefined): RpcError | null {
+  return signal?.aborted
+    ? { code: "cancelled", message: "surface target resolution aborted" }
+    : null;
+}
+
+/** Resolve one fresh Surface capture coordinate into a validated top-viewport pointer target. */
+export async function resolveSurfacePointerTarget(
+  ctx: SessionContext,
+  target: { tabId: number; url?: string },
+  input: SurfacePointerTargetInput,
+  deps: SurfaceTargetResolverDeps,
+): Promise<ResolvedSurfacePointerTarget | RpcError> {
+  const invalid = validatePointParams(input);
+  if (invalid) return invalid;
+  const earlyAbort = aborted(deps.signal);
+  if (earlyAbort) return earlyAbort;
+
+  const consumed = ctx.surfaceCaptures.consume(input.captureId as string);
+  if (!consumed.ok) return captureConsumeError(consumed.reason);
+  const capture = consumed.capture;
+  const postConsumeAbort = aborted(deps.signal);
+  if (postConsumeAbort) return postConsumeAbort;
+
+  if (capture.sessionId !== ctx.sessionId || capture.tabId !== target.tabId) {
+    return stale("surface capture belongs to a different session or tab");
+  }
+  if (normaliseRef(input.ref as string) !== capture.surface.ref) {
+    return stale("surface ref does not match the capture");
+  }
+  const node = resolveSnapshotRef(ctx, input.ref as string, target.tabId, "screenshot");
+  if (isRpcError(node)) return stale(node.message);
+  if (
+    node.kind !== "surface" ||
+    node.backendNodeId !== capture.surface.backendNodeId ||
+    node.frameId !== capture.surface.frameId ||
+    node.generation !== capture.surface.observationGeneration
+  ) {
+    return stale("surface observation generation or node identity changed");
+  }
+
+  deps.cdp.trackSessionTab?.(ctx.sessionId, target.tabId);
+  try {
+    await deps.cdp.ensureAttachedToUrl?.(target.tabId, target.url);
+  } catch (error) {
+    return { code: "cdp_failed", message: error instanceof Error ? error.message : String(error) };
+  }
+  const environment = await captureSurfaceEnvironment(deps.cdp, target.tabId, node.frameId);
+  if (isRpcError(environment)) return environment;
+  if (
+    environment.navigationIdentity !== capture.navigationIdentity ||
+    environment.viewportSignature !== capture.viewportSignature ||
+    environment.frameProjectionSignature !== capture.frameProjectionSignature
+  ) {
+    return stale("navigation, viewport, zoom, scroll, or frame projection changed");
+  }
+
+  const geometry = await resolveNodeGeometry(
+    deps.cdp,
+    target.tabId,
+    {
+      target: {
+        tabId: target.tabId,
+        ...(node.cdpSessionId ? { sessionId: node.cdpSessionId } : {}),
+      },
+      backendNodeId: node.backendNodeId,
+      ...(node.frameId ? { frameId: node.frameId } : {}),
+    },
+    { scrollIntoView: false },
+  );
+  if (isRpcError(geometry)) return stale(geometry.message);
+  const currentRect = surfaceVisibleRect(geometry.topBounds, node.visibleRect);
+  if (!currentRect || !sameRect(currentRect, capture.topViewportRect)) {
+    return stale("surface visible region changed");
+  }
+  const point = mapImagePointToViewport(
+    capture.topViewportRect,
+    capture.imageWidth,
+    capture.imageHeight,
+    input.imageX as number,
+    input.imageY as number,
+  );
+  if (!point || !pointInRegion(point, geometry.topVisibleRegions)) {
+    return rpcError(
+      "invalid_params",
+      "surface_coordinate_invalid",
+      "image coordinate is outside the captured Surface",
+    );
+  }
+
+  return {
+    point,
+    usedRef: capture.surface.ref,
+    moveSettleMs: SURFACE_POINTER_MOVE_SETTLE_MS,
+    capture: {
+      id: capture.id,
+      imageX: input.imageX as number,
+      imageY: input.imageY as number,
+    },
+  };
+}

apps/extension/src/tools/viewport-metrics.ts

@@ -1,18 +0,0 @@
-import type { CdpRunner } from "./shared";
-
-/** Estimate the raster/CSS ratio used by top-level Page.captureScreenshot. */
-export async function topLevelScreenshotRasterScale(
-  cdp: CdpRunner,
-  tabId: number,
-): Promise<number> {
-  try {
-    const reply = await cdp.send<{ result?: { value?: unknown } }>(tabId, "Runtime.evaluate", {
-      expression: "window.devicePixelRatio",
-      returnByValue: true,
-    });
-    const value = reply.result?.value;
-    return typeof value === "number" && Number.isFinite(value) && value > 0 ? value : 1;
-  } catch {
-    return 1;
-  }
-}

apps/extension/src/tools/visual-screenshot-plan.ts

@@ -1,52 +0,0 @@
-export interface ScreenshotPixelBudget {
-  maxEdge: number;
-  maxPixels: number;
-}
-
-export interface VisualScreenshotPlan {
-  clipScale: number;
-}
-
-export function planVisualScreenshot(input: {
-  cssRect: { width: number; height: number };
-  rasterScaleEstimate: number;
-  budget: ScreenshotPixelBudget;
-}): VisualScreenshotPlan {
-  const rasterScale =
-    Number.isFinite(input.rasterScaleEstimate) && input.rasterScaleEstimate > 0
-      ? input.rasterScaleEstimate
-      : 1;
-  const { width, height } = input.cssRect;
-  const scale = Math.min(
-    1,
-    input.budget.maxEdge / (width * rasterScale),
-    input.budget.maxEdge / (height * rasterScale),
-    Math.sqrt(input.budget.maxPixels / (width * height * rasterScale * rasterScale)),
-  );
-  return { clipScale: Math.max(Number.EPSILON, scale) };
-}
-
-export function correctedVisualScreenshotScale(input: {
-  previousClipScale: number;
-  actualWidth: number;
-  actualHeight: number;
-  budget: ScreenshotPixelBudget;
-}): number | null {
-  const correction = Math.min(
-    input.budget.maxEdge / input.actualWidth,
-    input.budget.maxEdge / input.actualHeight,
-    Math.sqrt(input.budget.maxPixels / (input.actualWidth * input.actualHeight)),
-  );
-  if (!Number.isFinite(correction) || correction >= 1 || correction <= 0) return null;
-  return Math.max(Number.EPSILON, input.previousClipScale * correction * 0.999);
-}
-
-export function screenshotFitsPixelBudget(
-  dimensions: { width: number; height: number },
-  budget: ScreenshotPixelBudget,
-): boolean {
-  return (
-    Math.max(dimensions.width, dimensions.height) <= budget.maxEdge &&
-    dimensions.width * dimensions.height <= budget.maxPixels
-  );
-}

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

@@ -1011,7 +1011,7 @@ describe("captureViewModel", () => {
     expect(input?.attrs.type).toBe("text");
     expect(input?.ownerFrameBackendNodeId).toBe(13);
     expect(input?.localRect).toEqual({ x: 0, y: 0, w: 200, h: 40 });
-    expect(input?.rect).toBeNull();
+    expect(input?.rect).toEqual({ x: 100, y: 300, w: 200, h: 40 });
     expect(rootFrameId).toBe("main-frame");
     expect(frameNodes?.get("child-frame")).toBe(subNodes);
     expect(frameOwnerBackendNodeIds?.get("child-frame")).toBe(13);
@@ -1183,13 +1183,13 @@ describe("captureViewModel", () => {
     const input = iframeNodes.get(23)?.find((n) => n.backendNodeId === 31);
 
     expect(nestedIframe?.localRect).toEqual({ x: 5, y: 6, w: 100, h: 80 });
-    expect(nestedIframe?.rect).toBeNull();
+    expect(nestedIframe?.rect).toEqual({ x: 15, y: 26, w: 100, h: 80 });
     expect(input?.ownerFrameBackendNodeId).toBe(23);
     expect(input?.localRect).toEqual({ x: 1, y: 2, w: 40, h: 20 });
-    expect(input?.rect).toBeNull();
+    expect(input?.rect).toEqual({ x: 16, y: 28, w: 40, h: 20 });
   });
 
-  it("keeps same-origin iframe canvas frame-local until frame geometry is resolved", async () => {
+  it("keeps same-origin iframe canvas discovery in top-level CSS coordinates at dpr 1 and 2", async () => {
     const captureAtDpr = async (dpr: number) => {
       const S = ["html", "body", "iframe", "canvas", "static", "auto"];
       const i = (s: string) => S.indexOf(s);
@@ -1270,7 +1270,13 @@ describe("captureViewModel", () => {
     const atDpr1 = await captureAtDpr(1);
     const atDpr2 = await captureAtDpr(2);
 
-    expect(atDpr1).toEqual([]);
+    expect(atDpr1).toEqual([
+      expect.objectContaining({
+        backendNodeId: 21,
+        frameId: "child",
+        visibleRect: { x: 120, y: 180, w: 120, h: 60 },
+      }),
+    ]);
     expect(atDpr2).toEqual(atDpr1);
   });
 

apps/extension/src/tools/vom/__tests__/frame-capture.test.ts

@@ -50,105 +50,6 @@ function childSnapshot(frameId: string, backendNodeId: number) {
 }
 
 describe("captureFrameData", () => {
-  it("does not request frame geometry for a root-only page", async () => {
-    const root = { ...ownerNode(1, 0), tag: "body" };
-    const captured: CapturedViewModel = {
-      nodes: [root],
-      viewport: { width: 1000, height: 800 },
-      iframeNodes: new Map(),
-      frameNodes: new Map([["main", [root]]]),
-      rootFrameId: "main",
-      excludedBackendNodeIds: new Set(),
-    };
-    const send = vi.fn(async (_tabId, method) => {
-      if (method === "Accessibility.enable") return {};
-      if (method === "Accessibility.getFullAXTree") return { nodes: [] };
-      throw new Error(`unexpected ${method}`);
-    });
-    const cdp: CdpRunner = {
-      send: send as CdpRunner["send"],
-      getFrameGraph: vi.fn(async () => ({
-        rootFrameId: "main",
-        frames: [{ frameId: "main", target: { tabId: 4 } }],
-      })),
-    };
-
-    await captureFrameData(cdp, 4, captured);
-
-    expect(send.mock.calls.some(([, method]) => method === "Page.createIsolatedWorld")).toBe(false);
-    expect(send.mock.calls.some(([, method]) => method === "DOM.getBoxModel")).toBe(false);
-    expect(send.mock.calls.some(([, method]) => method === "Page.getLayoutMetrics")).toBe(false);
-  });
-
-  it("projects same-origin frame-local rects through the iframe content box", async () => {
-    const owner = ownerNode(10, 50);
-    const canvas: CapturedNode = {
-      backendNodeId: 101,
-      parentBackendNodeId: 100,
-      frameId: "child",
-      ownerFrameBackendNodeId: 10,
-      tag: "canvas",
-      attrs: {},
-      rect: null,
-      localRect: { x: 12, y: 12, w: 224, h: 94 },
-      paintOrder: 1,
-      position: "static",
-      pointerEvents: "auto",
-    };
-    const captured: CapturedViewModel = {
-      nodes: [owner],
-      viewport: { width: 1000, height: 800 },
-      iframeNodes: new Map([[10, [canvas]]]),
-      frameNodes: new Map([
-        ["main", [owner]],
-        ["child", [canvas]],
-      ]),
-      frameOwnerBackendNodeIds: new Map([["child", 10]]),
-      frameParentIds: new Map([["child", "main"]]),
-      rootFrameId: "main",
-      excludedBackendNodeIds: new Set(),
-    };
-    const cdp: CdpRunner = {
-      send: vi.fn(async (_tabId, method) => {
-        if (method === "Accessibility.enable") return {};
-        if (method === "Accessibility.getFullAXTree") return { nodes: [] };
-        if (method === "Page.getLayoutMetrics") {
-          return { cssLayoutViewport: { clientWidth: 1000, clientHeight: 800 } };
-        }
-        if (method === "DOM.getBoxModel") {
-          return { model: { content: [52, 102, 352, 102, 352, 302, 52, 302] } };
-        }
-        if (method === "Page.createIsolatedWorld") return { executionContextId: 91 };
-        if (method === "Runtime.evaluate") {
-          return { result: { value: { width: 300, height: 200 } } };
-        }
-        throw new Error(`unexpected ${method}`);
-      }) as CdpRunner["send"],
-      getFrameGraph: vi.fn(async () => ({
-        rootFrameId: "main",
-        frames: [
-          { frameId: "main", target: { tabId: 4 } },
-          {
-            frameId: "child",
-            parentFrameId: "main",
-            ownerBackendNodeId: 10,
-            target: { tabId: 4 },
-          },
-        ],
-      })),
-    };
-
-    await captureFrameData(cdp, 4, captured);
-
-    expect(captured.frameNodes?.get("child")?.[0]?.rect).toEqual({
-      x: 64,
-      y: 114,
-      w: 224,
-      h: 94,
-    });
-    expect(captured.iframeNodes.get(10)?.[0]?.rect).toEqual({ x: 64, y: 114, w: 224, h: 94 });
-  });
-
   it("captures and positions multiple OOPIF documents missing from the root snapshot", async () => {
     const leftOwner = ownerNode(10, 50);
     const rightOwner = ownerNode(20, 500);
@@ -232,87 +133,6 @@ describe("captureFrameData", () => {
     );
   });
 
-  it("bounds concurrent same-target frame geometry resolution", async () => {
-    const owners = Array.from({ length: 8 }, (_, index) => ownerNode(10 + index, index * 40));
-    const childFrames = owners.map((owner, index) => {
-      const frameId = `child-${index}`;
-      const node: CapturedNode = {
-        backendNodeId: 100 + index,
-        parentBackendNodeId: null,
-        frameId,
-        ownerFrameBackendNodeId: owner.backendNodeId,
-        tag: "canvas",
-        attrs: {},
-        rect: null,
-        localRect: { x: 1, y: 2, w: 20, h: 10 },
-        paintOrder: 1,
-        position: "static",
-        pointerEvents: "auto",
-      };
-      return { frameId, owner, node };
-    });
-    const captured: CapturedViewModel = {
-      nodes: owners,
-      viewport: { width: 1000, height: 800 },
-      iframeNodes: new Map(childFrames.map(({ owner, node }) => [owner.backendNodeId, [node]])),
-      frameNodes: new Map([
-        ["main", owners],
-        ...childFrames.map(({ frameId, node }): [string, CapturedNode[]] => [frameId, [node]]),
-      ]),
-      frameOwnerBackendNodeIds: new Map(
-        childFrames.map(({ frameId, owner }) => [frameId, owner.backendNodeId]),
-      ),
-      rootFrameId: "main",
-      excludedBackendNodeIds: new Set(),
-    };
-    let activeWorlds = 0;
-    let maxActiveWorlds = 0;
-    const cdp: CdpRunner = {
-      send: vi.fn(async (_tabId, method, params) => {
-        if (method === "Page.getLayoutMetrics") {
-          return { cssLayoutViewport: { clientWidth: 1000, clientHeight: 800 } };
-        }
-        if (method === "DOM.getBoxModel") {
-          const backendNodeId = (params as { backendNodeId?: number }).backendNodeId ?? 10;
-          const x = (backendNodeId - 10) * 40;
-          return { model: { content: [x, 100, x + 30, 100, x + 30, 120, x, 120] } };
-        }
-        if (method === "Page.createIsolatedWorld") {
-          activeWorlds += 1;
-          maxActiveWorlds = Math.max(maxActiveWorlds, activeWorlds);
-          await new Promise((resolve) => setTimeout(resolve, 5));
-          activeWorlds -= 1;
-          return { executionContextId: 90 };
-        }
-        if (method === "Runtime.evaluate") {
-          return { result: { value: { width: 30, height: 20 } } };
-        }
-        if (method === "Accessibility.enable") return {};
-        if (method === "Accessibility.getFullAXTree") return { nodes: [] };
-        throw new Error(`unexpected ${method}`);
-      }) as CdpRunner["send"],
-      getFrameGraph: vi.fn(async () => ({
-        rootFrameId: "main",
-        frames: [
-          { frameId: "main", target: { tabId: 4 } },
-          ...childFrames.map(({ frameId, owner }) => ({
-            frameId,
-            parentFrameId: "main",
-            ownerBackendNodeId: owner.backendNodeId,
-            target: { tabId: 4 },
-          })),
-        ],
-      })),
-    };
-
-    await captureFrameData(cdp, 4, captured);
-
-    expect(maxActiveWorlds).toBe(4);
-    expect(childFrames.every(({ frameId }) => captured.frameNodes?.get(frameId)?.[0]?.rect)).toBe(
-      true,
-    );
-  });
-
   it("keeps OOPIF semantics when viewport projection is unavailable", async () => {
     const owner = { ...ownerNode(10, 50), rect: null, localRect: null };
     const captured: CapturedViewModel = {

apps/extension/src/tools/vom/__tests__/rendered-surfaces.test.ts

@@ -183,7 +183,7 @@ describe("rendered surface clustering and projection", () => {
       ],
       { width: 1280, height: 720 },
     );
-    const clustered = clusterRenderedSurfaces(surfaces);
+    const groups = clusterRenderedSurfaces(surfaces);
     const scene: VomScene = {
       viewport: { width: 1280, height: 720 },
       nodes: [
@@ -202,14 +202,14 @@ describe("rendered surface clustering and projection", () => {
       ],
     };
 
-    expect(clustered.groups).toHaveLength(1);
-    expect(clustered.groups[0]?.memberCount).toBe(2);
-    expect(clustered.groups[0]?.label).toBeUndefined();
+    expect(groups).toHaveLength(1);
+    expect(groups[0]?.members).toHaveLength(2);
+    expect(groups[0]?.label).toBeUndefined();
     expect(
       projectRenderedSurfaces(
         scene,
         [document([body, ...surfaces.map((s) => domNode(s.backendNodeId))])],
-        clustered,
+        groups,
       ),
     ).toMatchObject({
       visualSurfaces: [expect.objectContaining({ parentId: 10, backendNodeId: 3, memberCount: 2 })],
@@ -217,7 +217,7 @@ describe("rendered surface clustering and projection", () => {
   });
 
   it("does not merge a contained canvas with a larger independent canvas", () => {
-    const clustered = clusterRenderedSurfaces([
+    const groups = clusterRenderedSurfaces([
       ...discoverRenderedSurfaces(
         [
           document([
@@ -233,34 +233,11 @@ describe("rendered surface clustering and projection", () => {
       ),
     ]);
 
-    expect(clustered.groups).toHaveLength(2);
-  });
-
-  it("keeps the existing inclusive 90 percent stack threshold", () => {
-    const clustered = clusterRenderedSurfaces([
-      {
-        renderingKind: "canvas",
-        frameId: "main",
-        backendNodeId: 2,
-        parentBackendNodeId: 1,
-        visibleRect: { x: 0, y: 0, w: 100, h: 100 },
-        paintOrder: 1,
-      },
-      {
-        renderingKind: "canvas",
-        frameId: "main",
-        backendNodeId: 3,
-        parentBackendNodeId: 1,
-        visibleRect: { x: 5, y: 0, w: 90, h: 100 },
-        paintOrder: 2,
-      },
-    ]);
-
-    expect(clustered.groups).toEqual([expect.objectContaining({ memberCount: 2 })]);
+    expect(groups).toHaveLength(2);
   });
 
   it("does not merge coincident canvases owned by different containers", () => {
-    const clustered = clusterRenderedSurfaces(
+    const groups = clusterRenderedSurfaces(
       discoverRenderedSurfaces(
         [
           document([
@@ -274,113 +251,6 @@ describe("rendered surface clustering and projection", () => {
       ),
     );
 
-    expect(clustered.groups).toHaveLength(2);
-  });
-
-  it("keeps adjacent map tiles and twenty sparklines as independent surfaces", () => {
-    const surfaces = Array.from({ length: 20 }, (_, index) =>
-      domNode(100 + index, {
-        parentBackendNodeId: 1,
-        rect: { x: index * 12, y: 20, w: 10, h: 8 },
-      }),
-    );
-    const clustered = clusterRenderedSurfaces(
-      discoverRenderedSurfaces(
-        [document([domNode(1, { tag: "main", rect: null, localRect: null }), ...surfaces])],
-        { width: 1280, height: 720 },
-      ),
-    );
-
-    expect(clustered.groups).toHaveLength(20);
-    expect(clustered.groups.every((group) => group.memberCount === 1)).toBe(true);
-    expect(clustered.truncated).toBe(false);
-  });
-
-  it("clusters a large coincident stack without retaining every member", () => {
-    const surfaces = Array.from({ length: 10_000 }, (_, index) => ({
-      renderingKind: "canvas" as const,
-      frameId: "main",
-      backendNodeId: index + 1,
-      parentBackendNodeId: 1,
-      visibleRect: { x: 10, y: 20, w: 800, h: 500 },
-      paintOrder: index,
-    }));
-
-    const clustered = clusterRenderedSurfaces(surfaces);
-
-    expect(clustered.groups).toEqual([
-      expect.objectContaining({ memberCount: 10_000, representative: surfaces[9_999] }),
-    ]);
-    expect(clustered.truncated).toBe(false);
-  });
-
-  it("keeps large non-overlapping surface sets linear and independent", () => {
-    const surfaces = Array.from({ length: 10_000 }, (_, index) => ({
-      renderingKind: "canvas" as const,
-      frameId: "main",
-      backendNodeId: index + 1,
-      parentBackendNodeId: 1,
-      visibleRect: { x: index * 20, y: 0, w: 10, h: 10 },
-      paintOrder: index,
-    }));
-
-    const clustered = clusterRenderedSurfaces(surfaces);
-
-    expect(clustered.groups).toHaveLength(10_000);
-    expect(clustered.groups.every((group) => group.memberCount === 1)).toBe(true);
-    expect(clustered.truncated).toBe(false);
-  });
-
-  it("keeps the highest-priority surfaces when the computation guard truncates input", () => {
-    const surfaces = [
-      {
-        renderingKind: "canvas" as const,
-        frameId: "main",
-        backendNodeId: 1,
-        parentBackendNodeId: 10,
-        visibleRect: { x: 0, y: 0, w: 10, h: 10 },
-        paintOrder: 1,
-      },
-      {
-        renderingKind: "canvas" as const,
-        frameId: "main",
-        backendNodeId: 2,
-        parentBackendNodeId: 10,
-        visibleRect: { x: 20, y: 0, w: 100, h: 100 },
-        paintOrder: 1,
-      },
-      {
-        renderingKind: "canvas" as const,
-        frameId: "main",
-        backendNodeId: 3,
-        parentBackendNodeId: 10,
-        visibleRect: { x: 140, y: 0, w: 8, h: 8 },
-        paintOrder: 1,
-        label: "Important status",
-      },
-    ];
-
-    const clustered = clusterRenderedSurfaces(surfaces, { maxSurfaces: 2 });
-
-    expect(clustered.groups.map((group) => group.representative.backendNodeId).sort()).toEqual([
-      2, 3,
-    ]);
-    expect(clustered).toMatchObject({ truncated: true, omittedCount: 1 });
-  });
-
-  it("stops at the comparison budget without dropping already completed groups", () => {
-    const surfaces = Array.from({ length: 3 }, (_, index) => ({
-      renderingKind: "canvas" as const,
-      frameId: "main",
-      backendNodeId: index + 1,
-      parentBackendNodeId: 10,
-      visibleRect: { x: 0, y: 0, w: 100, h: 100 },
-      paintOrder: index + 1,
-    }));
-
-    const clustered = clusterRenderedSurfaces(surfaces, { maxComparisons: 1 });
-
-    expect(clustered.groups).toEqual([expect.objectContaining({ memberCount: 2 })]);
-    expect(clustered).toMatchObject({ truncated: true, omittedCount: 1 });
+    expect(groups).toHaveLength(2);
   });
 });

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

@@ -7,7 +7,7 @@
 import type { Rect, Viewport } from "@browser-skill/vom";
 import { evaluateHoverTrigger } from "@/lib/hover-trigger-policy";
 import { isOverlayHostNode, OVERLAY_HOST_SELECTOR } from "../../lib/overlay-bridge";
-import { type GeometryProjection, projectRectToViewport } from "../geometry";
+import { childFrameProjection, type GeometryProjection, projectRectToViewport } from "../geometry";
 import type { CdpRunner } from "../shared";
 import { clearHover, ProbeBudget, waitForHover } from "./hover-perception";
 
@@ -1014,6 +1014,7 @@ function parseChildFrameDocuments(
   strings: string[],
   dpr: number,
   parentDocIndex: number,
+  parentNodes: CapturedNode[],
   parentContext: FrameContext,
   visited = new Set<number>(),
 ): ParseFrameDocumentsResult {
@@ -1028,17 +1029,19 @@ function parseChildFrameDocuments(
   }
 
   const parentBackendIds = parentDoc?.nodes?.backendNodeId ?? [];
+  const parentNodeByBackendId = new Map(parentNodes.map((node) => [node.backendNodeId, node]));
+
   for (const [nodeArrayIdx, childDocIndex] of cdi) {
     if (visited.has(childDocIndex)) continue;
     const childDoc = documents[childDocIndex];
     if (!childDoc) continue;
     const iframeBackendId = parentBackendIds[nodeArrayIdx];
     if (iframeBackendId === undefined) continue;
-    // DOMSnapshot reports the iframe owner's border-box bounds, but child
-    // document coordinates start at the content-box origin. Preserve the
-    // frame-local rectangles here and let frame-capture normalize them with
-    // authoritative content quads once the frame graph is available.
-    const projection = null;
+    const iframeNode = parentNodeByBackendId.get(iframeBackendId);
+    const projection =
+      parentContext.projection && iframeNode?.localRect
+        ? childFrameProjection(parentContext.projection, iframeNode.localRect)
+        : null;
 
     const childContext: FrameContext = {
       frameId: snapshotFrameId(childDoc, strings),
@@ -1062,6 +1065,7 @@ function parseChildFrameDocuments(
       strings,
       dpr,
       childDocIndex,
+      parsed.nodes,
       childContext,
       nextVisited,
     );
@@ -1139,7 +1143,7 @@ export async function captureViewModel(
   const nodes = mainParsed.nodes;
   const excludedBackendNodeIds = new Set(mainParsed.excludedBackendNodeIds);
 
-  const frameParsed = parseChildFrameDocuments(documents, strings, dpr, 0, topContext);
+  const frameParsed = parseChildFrameDocuments(documents, strings, dpr, 0, nodes, topContext);
   const iframeNodes = frameParsed.iframeNodes;
   for (const id of frameParsed.excludedBackendNodeIds) {
     excludedBackendNodeIds.add(id);

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

@@ -1,5 +1,6 @@
 import type { CdpFrame, CdpFrameGraph } from "@/browser-driver/frame-graph";
-import { createFrameGeometryContext } from "../frame-geometry";
+import { resolveFrameProjection } from "../frame-geometry";
+import { type GeometryProjection, projectRectToViewport } from "../geometry";
 import { type CdpRunner, cdpRunnerForTarget, sendToCdpTarget } from "../shared";
 import { type CapturedNode, type CapturedViewModel, captureViewModel } from "./capture";
 import {
@@ -12,8 +13,6 @@ import {
 export type FrameAxNode = FrameOwnedAxNode;
 export type CapturedFrameDocument<T extends FrameAxNode> = FrameDocument<T>;
 
-const FRAME_GEOMETRY_CONCURRENCY = 4;
-
 function throwIfAborted(signal?: AbortSignal): void {
   if (signal?.aborted) throw new DOMException("observation aborted", "AbortError");
 }
@@ -22,22 +21,6 @@ function isAbortError(err: unknown): boolean {
   return err instanceof Error && err.name === "AbortError";
 }
 
-async function forEachWithConcurrency<T>(
-  items: readonly T[],
-  concurrency: number,
-  worker: (item: T) => Promise<void>,
-): Promise<void> {
-  let next = 0;
-  const run = async () => {
-    while (next < items.length) {
-      const index = next;
-      next += 1;
-      await worker(items[index]);
-    }
-  };
-  await Promise.all(Array.from({ length: Math.min(concurrency, items.length) }, run));
-}
-
 async function discoverFrameGraph(cdp: CdpRunner, tabId: number): Promise<CdpFrameGraph | null> {
   if (!cdp.getFrameGraph) return null;
   try {
@@ -48,6 +31,21 @@ async function discoverFrameGraph(cdp: CdpRunner, tabId: number): Promise<CdpFra
   }
 }
 
+function transformFrameNodes(
+  nodes: CapturedNode[],
+  projection: GeometryProjection | null,
+): CapturedNode[] {
+  return nodes.map((node) => ({
+    ...node,
+    rect: projection
+      ? (() => {
+          const bounds = projectRectToViewport(node.rect, projection);
+          return bounds ? { x: bounds.x, y: bounds.y, w: bounds.width, h: bounds.height } : null;
+        })()
+      : null,
+  }));
+}
+
 async function captureMissingFrameDocuments(
   cdp: CdpRunner,
   tabId: number,
@@ -65,6 +63,16 @@ async function captureMissingFrameDocuments(
       const child = await captureViewModel(cdpRunnerForTarget(cdp, frame.target), tabId, {
         signal,
       });
+      let projection: GeometryProjection | null = null;
+      try {
+        projection = await resolveFrameProjection(cdp, graph, frame.frameId);
+      } catch (err) {
+        if (isAbortError(err)) throw err;
+        console.debug("[bsk observation] child frame geometry projection failed", {
+          frameId: frame.frameId,
+          err,
+        });
+      }
       const rootFrameId = child.rootFrameId ?? frame.frameId;
       const childFrames = child.frameNodes ?? new Map<string, CapturedNode[]>();
       if (!childFrames.has(rootFrameId)) childFrames.set(rootFrameId, child.nodes);
@@ -75,7 +83,7 @@ async function captureMissingFrameDocuments(
         );
       }
       for (const [childFrameId, nodes] of childFrames) {
-        captured.frameNodes.set(childFrameId, nodes);
+        captured.frameNodes.set(childFrameId, transformFrameNodes(nodes, projection));
       }
       if (frame.ownerBackendNodeId !== undefined) {
         captured.iframeNodes.set(
@@ -101,60 +109,6 @@ async function captureMissingFrameDocuments(
   }
 }
 
-async function normalizeFrameLocalRects(
-  cdp: CdpRunner,
-  graph: CdpFrameGraph,
-  captured: CapturedViewModel,
-  signal?: AbortSignal,
-): Promise<void> {
-  if (!captured.frameNodes) return;
-  const geometry = createFrameGeometryContext(cdp, graph);
-  const frameById = new Map(graph.frames.map((frame) => [frame.frameId, frame]));
-  await forEachWithConcurrency(
-    [...captured.frameNodes],
-    FRAME_GEOMETRY_CONCURRENCY,
-    async ([frameId, nodes]) => {
-      if (frameId === graph.rootFrameId || !frameById.has(frameId)) return;
-      try {
-        const normalized: CapturedNode[] = [];
-        for (const node of nodes) {
-          if (!node.localRect) {
-            normalized.push({ ...node, rect: null });
-          } else {
-            const bounds = await geometry.projectFrameLocalRect(frameId, node.localRect);
-            normalized.push({
-              ...node,
-              rect: bounds ? { x: bounds.x, y: bounds.y, w: bounds.width, h: bounds.height } : null,
-            });
-          }
-        }
-        throwIfAborted(signal);
-        captured.frameNodes?.set(frameId, normalized);
-        const ownerBackendNodeId =
-          frameById.get(frameId)?.ownerBackendNodeId ??
-          captured.frameOwnerBackendNodeIds?.get(frameId);
-        if (ownerBackendNodeId !== undefined) {
-          captured.iframeNodes.set(ownerBackendNodeId, normalized);
-        }
-      } catch (err) {
-        if (isAbortError(err)) throw err;
-        console.debug("[bsk observation] frame-local geometry normalization failed", {
-          frameId,
-          err,
-        });
-        const unavailable = nodes.map((node) => ({ ...node, rect: null }));
-        captured.frameNodes?.set(frameId, unavailable);
-        const ownerBackendNodeId =
-          frameById.get(frameId)?.ownerBackendNodeId ??
-          captured.frameOwnerBackendNodeIds?.get(frameId);
-        if (ownerBackendNodeId !== undefined) {
-          captured.iframeNodes.set(ownerBackendNodeId, unavailable);
-        }
-      }
-    },
-  );
-}
-
 async function captureAxTrees<T extends FrameAxNode>(
   cdp: CdpRunner,
   tabId: number,
@@ -220,10 +174,7 @@ export async function captureFrameData<T extends FrameAxNode>(
 ): Promise<CapturedFrameDocument<T>[]> {
   const graph = await discoverFrameGraph(cdp, tabId);
   const frames = graph?.frames ?? [];
-  if (graph) {
-    await captureMissingFrameDocuments(cdp, tabId, graph, captured, signal);
-    await normalizeFrameLocalRects(cdp, graph, captured, signal);
-  }
+  if (graph) await captureMissingFrameDocuments(cdp, tabId, graph, captured, signal);
   throwIfAborted(signal);
   const batches = await captureAxTrees<T>(cdp, tabId, frames, captured, signal);
   return buildFrameDocuments(graph, batches, captured);

apps/extension/src/tools/vom/rendered-surfaces/cluster.ts

@@ -1,22 +1,8 @@
-import { compareVisualSurfacePriority, type Rect } from "@browser-skill/vom";
-import type { ClusteredRenderedSurfaces, RenderedSurface, RenderedSurfaceGroup } from "./types";
+import type { Rect } from "@browser-skill/vom";
+import type { RenderedSurface, RenderedSurfaceGroup } from "./types";
 
 const STACK_IOU_RATIO = 0.9;
 const STACK_SIZE_RATIO = 0.9;
-const SIZE_BAND_BASE = 1 / STACK_SIZE_RATIO;
-const POSITION_CELL_RATIO = 0.1;
-const MAX_CLUSTER_COMPARISONS = 1_000_000;
-const MAX_CLUSTER_SURFACES = 50_000;
-
-export interface ClusterRenderedSurfaceOptions {
-  maxComparisons?: number;
-  maxSurfaces?: number;
-}
-
-interface IndexedGroup extends RenderedSurfaceGroup {
-  creationIndex: number;
-  indexKey: string;
-}
 
 function area(rect: Rect): number {
   return Math.max(0, rect.w) * Math.max(0, rect.h);
@@ -28,7 +14,9 @@ function intersectionArea(a: Rect, b: Rect): number {
   return width * height;
 }
 
-function stackScore(a: RenderedSurface, b: RenderedSurface): number | null {
+function sameVisualStack(a: RenderedSurface, b: RenderedSurface): boolean {
+  if (a.frameId !== b.frameId) return false;
+  if (a.parentBackendNodeId !== b.parentBackendNodeId) return false;
   const aArea = area(a.visibleRect);
   const bArea = area(b.visibleRect);
   const intersection = intersectionArea(a.visibleRect, b.visibleRect);
@@ -37,216 +25,41 @@ function stackScore(a: RenderedSurface, b: RenderedSurface): number | null {
     Math.min(a.visibleRect.w, b.visibleRect.w) / Math.max(a.visibleRect.w, b.visibleRect.w);
   const heightRatio =
     Math.min(a.visibleRect.h, b.visibleRect.h) / Math.max(a.visibleRect.h, b.visibleRect.h);
-  const iou = union > 0 ? intersection / union : 0;
-  return iou >= STACK_IOU_RATIO && widthRatio >= STACK_SIZE_RATIO && heightRatio >= STACK_SIZE_RATIO
-    ? iou
-    : null;
+  return (
+    union > 0 &&
+    intersection / union >= STACK_IOU_RATIO &&
+    widthRatio >= STACK_SIZE_RATIO &&
+    heightRatio >= STACK_SIZE_RATIO
+  );
 }
 
-function sizeBand(value: number): number {
-  return Math.floor(Math.log(Math.max(Number.EPSILON, value)) / Math.log(SIZE_BAND_BASE));
-}
-
-function bandSize(band: number): number {
-  return SIZE_BAND_BASE ** band;
-}
-
-function spatialKey(rect: Rect): string {
-  const widthBand = sizeBand(rect.w);
-  const heightBand = sizeBand(rect.h);
-  const cellWidth = bandSize(widthBand) * POSITION_CELL_RATIO;
-  const cellHeight = bandSize(heightBand) * POSITION_CELL_RATIO;
-  const centerX = rect.x + rect.w / 2;
-  const centerY = rect.y + rect.h / 2;
-  return `${widthBand}:${heightBand}:${Math.floor(centerX / cellWidth)}:${Math.floor(centerY / cellHeight)}`;
-}
-
-function candidateKeys(rect: Rect): string[] {
-  const keys: string[] = [];
-  const centerX = rect.x + rect.w / 2;
-  const centerY = rect.y + rect.h / 2;
-  const widthBand = sizeBand(rect.w);
-  const heightBand = sizeBand(rect.h);
-  // A >=0.9 size ratio crosses at most one logarithmic band. IoU >=0.9
-  // likewise keeps centers within one 10%-of-size position cell.
-  for (let dw = -1; dw <= 1; dw += 1) {
-    for (let dh = -1; dh <= 1; dh += 1) {
-      const candidateWidthBand = widthBand + dw;
-      const candidateHeightBand = heightBand + dh;
-      const cellWidth = bandSize(candidateWidthBand) * POSITION_CELL_RATIO;
-      const cellHeight = bandSize(candidateHeightBand) * POSITION_CELL_RATIO;
-      const cellX = Math.floor(centerX / cellWidth);
-      const cellY = Math.floor(centerY / cellHeight);
-      for (let dx = -1; dx <= 1; dx += 1) {
-        for (let dy = -1; dy <= 1; dy += 1) {
-          keys.push(`${candidateWidthBand}:${candidateHeightBand}:${cellX + dx}:${cellY + dy}`);
-        }
-      }
-    }
-  }
-  return keys;
-}
-
-function preferredRepresentative(a: RenderedSurface, b: RenderedSurface): RenderedSurface {
-  const aArea = area(a.visibleRect);
-  const bArea = area(b.visibleRect);
-  return bArea > aArea || (bArea === aArea && b.paintOrder > a.paintOrder) ? b : a;
-}
-
-function partitionKey(surface: RenderedSurface): string {
-  return `${surface.frameId}\u0000${surface.parentBackendNodeId ?? "root"}`;
-}
-
-function siftWorstUp(heap: RenderedSurface[], start: number): void {
-  let index = start;
-  while (index > 0) {
-    const parent = Math.floor((index - 1) / 2);
-    if (compareVisualSurfacePriority(heap[index], heap[parent]) <= 0) break;
-    [heap[index], heap[parent]] = [heap[parent], heap[index]];
-    index = parent;
-  }
-}
-
-function siftWorstDown(heap: RenderedSurface[], start: number): void {
-  let index = start;
-  while (true) {
-    const left = index * 2 + 1;
-    if (left >= heap.length) return;
-    const right = left + 1;
-    let worst = left;
-    if (right < heap.length && compareVisualSurfacePriority(heap[right], heap[left]) > 0) {
-      worst = right;
-    }
-    if (compareVisualSurfacePriority(heap[worst], heap[index]) <= 0) return;
-    [heap[index], heap[worst]] = [heap[worst], heap[index]];
-    index = worst;
-  }
-}
-
-function highestPrioritySurfaces(
-  surfaces: readonly RenderedSurface[],
-  limit: number,
-): RenderedSurface[] {
-  if (limit <= 0) return [];
-  if (surfaces.length <= limit) return [...surfaces].sort(compareVisualSurfacePriority);
-  const heap: RenderedSurface[] = [];
-  for (const surface of surfaces) {
-    if (heap.length < limit) {
-      heap.push(surface);
-      siftWorstUp(heap, heap.length - 1);
-    } else if (compareVisualSurfacePriority(surface, heap[0]) < 0) {
-      heap[0] = surface;
-      siftWorstDown(heap, 0);
-    }
-  }
-  return heap.sort(compareVisualSurfacePriority);
-}
-
-function normalizedLimit(value: number | undefined, fallback: number): number {
-  const resolved = value ?? fallback;
-  return Number.isFinite(resolved) ? Math.max(0, Math.floor(resolved)) : fallback;
-}
-
-export function clusterRenderedSurfaces(
-  surfaces: RenderedSurface[],
-  options: ClusterRenderedSurfaceOptions = {},
-): ClusteredRenderedSurfaces {
-  const maxComparisons = normalizedLimit(options.maxComparisons, MAX_CLUSTER_COMPARISONS);
-  const maxSurfaces = normalizedLimit(options.maxSurfaces, MAX_CLUSTER_SURFACES);
-  const prioritized = highestPrioritySurfaces(surfaces, maxSurfaces);
-  const partitions = new Map<string, Map<string, Set<IndexedGroup>>>();
-  const groups: IndexedGroup[] = [];
-  let comparisons = 0;
-  let processed = 0;
-  let truncated = prioritized.length < surfaces.length;
-  let comparisonLimitReached = false;
-
-  for (const surface of prioritized) {
-    if (comparisons >= maxComparisons) {
-      truncated = true;
-      break;
-    }
-    const key = partitionKey(surface);
-    let index = partitions.get(key);
-    if (!index) {
-      index = new Map();
-      partitions.set(key, index);
-    }
-    const candidates = new Set<IndexedGroup>();
-    for (const candidateKey of candidateKeys(surface.visibleRect)) {
-      for (const candidate of index.get(candidateKey) ?? []) candidates.add(candidate);
-    }
-
-    let best: { group: IndexedGroup; score: number; areaDelta: number } | null = null;
-    for (const group of candidates) {
-      if (comparisons >= maxComparisons) {
-        truncated = true;
-        comparisonLimitReached = true;
-        break;
-      }
-      comparisons += 1;
-      const score = stackScore(group.representative, surface);
-      if (score === null) continue;
-      const areaDelta = Math.abs(
-        area(group.representative.visibleRect) - area(surface.visibleRect),
-      );
-      if (
-        !best ||
-        score > best.score ||
-        (score === best.score && areaDelta < best.areaDelta) ||
-        (score === best.score &&
-          areaDelta === best.areaDelta &&
-          group.creationIndex < best.group.creationIndex)
-      ) {
-        best = { group, score, areaDelta };
-      }
-    }
-    if (comparisonLimitReached) break;
-
-    if (best) {
-      const group = best.group;
-      const representative = preferredRepresentative(group.representative, surface);
-      group.memberCount += 1;
-      group.label ??= surface.label;
-      if (representative !== group.representative) {
-        index.get(group.indexKey)?.delete(group);
-        group.representative = representative;
-        group.indexKey = spatialKey(representative.visibleRect);
-        const indexed = index.get(group.indexKey) ?? new Set<IndexedGroup>();
-        indexed.add(group);
-        index.set(group.indexKey, indexed);
-      }
-      processed += 1;
-      continue;
-    }
-
-    const indexKey = spatialKey(surface.visibleRect);
-    const group: IndexedGroup = {
-      frameId: surface.frameId,
-      parentBackendNodeId: surface.parentBackendNodeId,
-      representative: surface,
-      ...(surface.label ? { label: surface.label } : {}),
-      memberCount: 1,
-      creationIndex: groups.length,
-      indexKey,
-    };
-    groups.push(group);
-    const indexed = index.get(indexKey) ?? new Set<IndexedGroup>();
-    indexed.add(group);
-    index.set(indexKey, indexed);
-    processed += 1;
-  }
-
+function toGroup(members: RenderedSurface[]): RenderedSurfaceGroup {
+  const representative = [...members].sort(
+    (a, b) => area(b.visibleRect) - area(a.visibleRect) || b.paintOrder - a.paintOrder,
+  )[0];
   return {
-    groups: groups
-      .map(({ creationIndex: _creationIndex, indexKey: _indexKey, ...group }) => group)
-      .sort(
-        (a, b) =>
-          a.frameId.localeCompare(b.frameId) ||
-          a.representative.visibleRect.y - b.representative.visibleRect.y ||
-          a.representative.visibleRect.x - b.representative.visibleRect.x,
-      ),
-    truncated,
-    ...(truncated ? { omittedCount: surfaces.length - processed } : {}),
+    frameId: representative.frameId,
+    members,
+    representative,
+    label: members.map((surface) => surface.label).find((label) => label !== undefined),
   };
 }
+
+export function clusterRenderedSurfaces(surfaces: RenderedSurface[]): RenderedSurfaceGroup[] {
+  const groups: RenderedSurface[][] = [];
+  for (const surface of surfaces) {
+    const matching = groups.find((group) =>
+      group.some((member) => sameVisualStack(member, surface)),
+    );
+    if (matching) matching.push(surface);
+    else groups.push([surface]);
+  }
+  return groups
+    .map(toGroup)
+    .sort(
+      (a, b) =>
+        a.frameId.localeCompare(b.frameId) ||
+        a.representative.visibleRect.y - b.representative.visibleRect.y ||
+        a.representative.visibleRect.x - b.representative.visibleRect.x,
+    );
+}

apps/extension/src/tools/vom/rendered-surfaces/index.ts

@@ -1,8 +1,4 @@
-export { type ClusterRenderedSurfaceOptions, clusterRenderedSurfaces } from "./cluster";
+export { clusterRenderedSurfaces } from "./cluster";
 export { discoverRenderedSurfaces } from "./discovery";
 export { projectRenderedSurfaces } from "./project";
-export type {
-  ClusteredRenderedSurfaces,
-  RenderedSurface,
-  RenderedSurfaceGroup,
-} from "./types";
+export type { RenderedSurface, RenderedSurfaceGroup } from "./types";

apps/extension/src/tools/vom/rendered-surfaces/project.ts

@@ -1,7 +1,7 @@
 import type { VomScene, VomVisualSurface } from "@browser-skill/vom";
 import type { CapturedFrameDocument } from "../frame-capture";
 import type { SemanticAxNode } from "../semantic-graph";
-import type { ClusteredRenderedSurfaces, RenderedSurfaceGroup } from "./types";
+import type { RenderedSurfaceGroup } from "./types";
 
 function frameBackendKey(frameId: string, backendNodeId: number): string {
   return `${frameId}\u0000${backendNodeId}`;
@@ -75,12 +75,12 @@ function buildProjectionIndex(
 export function projectRenderedSurfaces(
   scene: VomScene,
   documents: CapturedFrameDocument<SemanticAxNode>[],
-  clustered: ClusteredRenderedSurfaces,
+  groups: RenderedSurfaceGroup[],
 ): VomScene {
   const index = buildProjectionIndex(scene, documents);
   const visualSurfaces: VomVisualSurface[] = [];
 
-  for (const group of clustered.groups) {
+  for (const group of groups) {
     const parentId = nearestSceneParent(index, group);
     visualSurfaces.push({
       parentId,
@@ -89,20 +89,12 @@ export function projectRenderedSurfaces(
       renderingKind: "canvas",
       visibleRect: group.representative.visibleRect,
       ...(group.label ? { label: group.label } : {}),
-      memberCount: group.memberCount,
+      memberCount: group.members.length,
     });
   }
 
   return {
     ...scene,
     ...(visualSurfaces.length > 0 ? { visualSurfaces } : {}),
-    ...(clustered.truncated
-      ? {
-          visualSurfacesTruncated: true,
-          ...(clustered.omittedCount !== undefined
-            ? { omittedVisualSurfaceCount: clustered.omittedCount }
-            : {}),
-        }
-      : {}),
   };
 }

apps/extension/src/tools/vom/rendered-surfaces/types.ts

@@ -12,14 +12,7 @@ export interface RenderedSurface {
 
 export interface RenderedSurfaceGroup {
   frameId: string;
-  parentBackendNodeId: number | null;
+  members: RenderedSurface[];
   representative: RenderedSurface;
   label?: string;
-  memberCount: number;
-}
-
-export interface ClusteredRenderedSurfaces {
-  groups: RenderedSurfaceGroup[];
-  truncated: boolean;
-  omittedCount?: number;
 }

apps/extension/src/transport/types.ts

@@ -49,6 +49,11 @@ export type RpcErrorReason =
   | "download_capture_failed"
   | "transfer_outcome_unknown"
   | "transfer_timeout"
+  | "surface_capture_not_found"
+  | "surface_capture_expired"
+  | "surface_capture_consumed"
+  | "surface_capture_stale"
+  | "surface_coordinate_invalid"
   | "cleanup_failed";
 
 export type TransferEffectState = "none" | "committed" | "unknown";
@@ -320,9 +325,17 @@ export interface ScreenshotResult {
   height: number;
   format: string;
   tab_id: number;
+  capture?: SurfaceCaptureInfo;
   dialogs?: JavaScriptDialogInfo[];
 }
 
+export interface SurfaceCaptureInfo {
+  id: string;
+  surface_ref: string;
+  coordinate_space: "capture-image-pixel";
+  expires_at: number;
+}
+
 export interface SnapshotParams {
   session_id: string;
   tab_id?: number;
@@ -441,6 +454,9 @@ export interface ClickParams {
   click_count?: number;
   modifiers?: KeyModifier[];
   timeout_ms?: number;
+  capture_id?: string;
+  image_x?: number;
+  image_y?: number;
 }
 
 export interface ClickResult {
@@ -449,6 +465,9 @@ export interface ClickResult {
   used_selector?: string;
   x: number;
   y: number;
+  capture_id?: string;
+  image_x?: number;
+  image_y?: number;
   dialogs?: JavaScriptDialogInfo[];
 }
 

apps/extension/test-fixtures/rendered-surfaces/README.md

@@ -77,6 +77,14 @@ Expected Surface labels:
 
 The cross-origin frame uses `http://localhost:4173` while the parent uses `http://127.0.0.1:4173`. With Chromium site isolation this exercises the OOPIF path without an external service.
 
+Each frame Canvas also exposes a `pointer status` live region. A successful
+screenshot-bound point click must report
+`down button=0 buttons=1 hoverReady=true; click received` and turn the Canvas
+yellow. The hover flag is set on the animation frame after `pointermove`, so the
+fixture verifies both child-document delivery and the scheduling boundary
+required before `pointerdown`, rather than merely validating projected
+coordinates or a successful CDP response.
+
 ### `viewport.html`
 
 Run with a `900x700` Agent Window.
@@ -95,11 +103,6 @@ Use the normal DOM buttons and re-observe after each action:
 - After **Restore size**: present with a fresh ref.
 - After **Remove canvas**: absent.
 
-### `sparklines.html`
-
-Expected Surface labels `fixture-sparkline-01` through `fixture-sparkline-20` must all be present.
-The adjacent, non-overlapping canvases remain twenty independent screenshot-only Surface refs.
-
 ## Invariants
 
 - `snapshot` must not emit any of these Surface markers.

apps/extension/test-fixtures/rendered-surfaces/frame.html

@@ -8,6 +8,7 @@
       body { padding: 12px; background: #fdfefe; }
       canvas { display: block; width: 220px; height: 90px; background: #d5f5e3; border: 2px solid #1e8449; }
       iframe { width: 280px; height: 150px; margin-top: 10px; border: 2px solid #85929e; }
+      #pointer-status { margin: 8px 0 0; min-height: 20px; }
     </style>
   </head>
   <body>
@@ -16,11 +17,34 @@
       const params = new URLSearchParams(location.search);
       const canvas = document.querySelector("#frame-canvas");
       if (params.get("canvas") === "0") canvas.remove();
-      else canvas.setAttribute("aria-label", params.get("label") || "fixture-frame-default");
+      else {
+        canvas.setAttribute("aria-label", params.get("label") || "fixture-frame-default");
+        if (params.get("interactive") === "1") {
+          const status = document.createElement("p");
+          status.id = "pointer-status";
+          status.setAttribute("aria-live", "polite");
+          status.textContent = "pointer status: idle";
+          canvas.insertAdjacentElement("afterend", status);
+          let hoverReady = false;
+          canvas.addEventListener("pointermove", () => {
+            hoverReady = false;
+            requestAnimationFrame(() => {
+              hoverReady = true;
+            });
+          });
+          canvas.addEventListener("pointerdown", (event) => {
+            status.textContent = `pointer status: down button=${event.button} buttons=${event.buttons} hoverReady=${hoverReady}`;
+            if (event.buttons === 1 && hoverReady) canvas.style.background = "#f9e79f";
+          });
+          canvas.addEventListener("click", () => {
+            status.textContent += "; click received";
+          });
+        }
+      }
       if (params.get("nested") === "1") {
         const iframe = document.createElement("iframe");
         iframe.title = "nested fixture frame";
-        iframe.src = "frame.html?label=fixture-nested-frame";
+        iframe.src = "frame.html?label=fixture-nested-frame&interactive=1";
         document.body.append(iframe);
       }
     </script>

apps/extension/test-fixtures/rendered-surfaces/frames.html

@@ -14,8 +14,8 @@
   <body>
     <h1>Frame matrix</h1>
     <div class="frames">
-      <iframe title="same-origin fixture" src="frame.html?label=fixture-same-origin-frame"></iframe>
-      <iframe title="cross-origin fixture" src="http://localhost:4173/frame.html?label=fixture-cross-origin-frame"></iframe>
+      <iframe title="same-origin fixture" src="frame.html?label=fixture-same-origin-frame&interactive=1"></iframe>
+      <iframe title="cross-origin fixture" src="http://localhost:4173/frame.html?label=fixture-cross-origin-frame&interactive=1"></iframe>
       <iframe title="nested fixture" src="frame.html?canvas=0&nested=1"></iframe>
     </div>
   </body>

apps/extension/test-fixtures/rendered-surfaces/sparklines.html

@@ -1,28 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Rendered Surface sparkline matrix</title>
-    <style>
-      html, body { margin: 0; font: 14px system-ui, sans-serif; }
-      body { padding: 16px; }
-      main { display: grid; grid-template-columns: repeat(5, 120px); gap: 12px; }
-      canvas { display: block; width: 100px; height: 30px; background: #eaf2f8; }
-    </style>
-  </head>
-  <body>
-    <h1>Twenty independent sparklines</h1>
-    <main id="sparklines"></main>
-    <script>
-      const host = document.querySelector("#sparklines");
-      for (let index = 1; index <= 20; index += 1) {
-        const canvas = document.createElement("canvas");
-        canvas.width = 100;
-        canvas.height = 30;
-        canvas.setAttribute("aria-label", `fixture-sparkline-${String(index).padStart(2, "0")}`);
-        host.append(canvas);
-      }
-    </script>
-  </body>
-</html>

crates/bsk-cli/skill/SKILL.md

@@ -76,12 +76,24 @@ is cheaper and more precise.
 When `bsk observe` renders
 `@eN surface ... [visual-only; requires=image-understanding; ...]`, the ref identifies rendered
 canvas content that is not represented by the text observation, not an interactable DOM control.
-Keep using any reliable DOM/AX text and controls that appear alongside it. If you can actually
-inspect image output, use `bsk screenshot --ref @eN --session <id>` to obtain the visible crop. If
-you lack multimodal or image-reading capability, do not take a screenshot and pretend to know its
-contents, and never guess coordinates; tell the user that they need to switch to a model with
-image-understanding capability. Do not pass a visual surface ref to click, fill, hover, or select;
-those commands intentionally reject screenshot-only refs.
+Keep using any reliable DOM/AX text and controls that appear alongside it. If you lack multimodal or
+image-reading capability, do not take a screenshot and pretend to know its contents, and never guess
+coordinates; tell the user that they need to switch to a model with image-understanding capability.
+
+If you can actually inspect image output, use `bsk screenshot --ref @eN --session <id>` to obtain
+the visible crop and its short-lived, single-use Surface capture id. Only when the task requires a
+point action and the image provides a clear target, bind that exact screenshot to the click command:
+
+```bash
+bsk click @eN --capture <capture-id> --image-x <px> --image-y <px> --session <id>
+```
+
+Coordinates are pixels in the returned capture image, not viewport CSS coordinates. Re-observing,
+navigating, scrolling, resizing, zooming, changing Frame projection, expiry, or reusing the capture
+makes the action fail; take a new Surface screenshot instead of adjusting or retrying coordinates.
+A point click does not reveal Canvas semantics and must not be followed by an assumed fill/press
+workflow. Without all three capture arguments, visual Surface refs remain screenshot-only and
+click/fill/hover/select reject them.
 
 Escalate page reading only as needed:
 
@@ -135,6 +147,7 @@ Required flags that are easy to get wrong:
 bsk fill <ref> --value <text>      bsk select <ref> --value <option-value>
 bsk screenshot --out <path>        bsk emulate --device <preset-id>
 bsk upload <ref> --file <path>     bsk download <ref> --out <path>
+bsk click <surface-ref> --capture <id> --image-x <px> --image-y <px>
 ```
 
 `select` matches an option's `value` attribute, not its visible label. Device preset ids are

crates/bsk-cli/src/cli/interaction.rs

@@ -136,6 +136,18 @@ pub struct ClickArgs {
 
     #[arg(long, default_value = "30s", value_parser = parse_timeout_ms)]
     pub timeout: u32,
+
+    /// Capture id returned by `bsk screenshot --ref <surface>`.
+    #[arg(long)]
+    pub capture: Option<String>,
+
+    /// X coordinate in capture-image pixels. Requires `--capture` and `--image-y`.
+    #[arg(long = "image-x", allow_hyphen_values = true)]
+    pub image_x: Option<f64>,
+
+    /// Y coordinate in capture-image pixels. Requires `--capture` and `--image-x`.
+    #[arg(long = "image-y", allow_hyphen_values = true)]
+    pub image_y: Option<f64>,
 }
 
 pub fn dispatch_click(args: ClickArgs, format: Format) -> Result<(), CliError> {
@@ -147,6 +159,14 @@ pub fn dispatch_click(args: ClickArgs, format: Format) -> Result<(), CliError> {
     )?;
     let modifiers = parse_modifiers(&args.modifiers)
         .map_err(|e| CliError::Local(anyhow::anyhow!("--modifiers: {e}")))?;
+    let point_arg_count = usize::from(args.capture.is_some())
+        + usize::from(args.image_x.is_some())
+        + usize::from(args.image_y.is_some());
+    if point_arg_count != 0 && point_arg_count != 3 {
+        return Err(CliError::Local(anyhow::anyhow!(
+            "--capture, --image-x, and --image-y must be given together"
+        )));
+    }
     let params = ClickParams {
         session_id: args.session.clone(),
         ref_,
@@ -160,6 +180,9 @@ pub fn dispatch_click(args: ClickArgs, format: Format) -> Result<(), CliError> {
             Some(modifiers)
         },
         timeout_ms: Some(args.timeout),
+        capture_id: args.capture.clone(),
+        image_x: args.image_x,
+        image_y: args.image_y,
     };
     let reply: ClickResult = call(
         info.sock_path,
@@ -183,6 +206,14 @@ pub fn dispatch_click(args: ClickArgs, format: Format) -> Result<(), CliError> {
                 "click ok tab={} target={target} at=({}, {})",
                 reply.tab_id, reply.x, reply.y
             );
+            if let Some(capture_id) = &reply.capture_id {
+                println!(
+                    "capture={} image=({}, {}) coordinate_space=capture-image-pixel",
+                    capture_id,
+                    reply.image_x.unwrap_or_default(),
+                    reply.image_y.unwrap_or_default()
+                );
+            }
             print_dialog_summaries(&reply.dialogs);
         }
     }

crates/bsk-cli/src/cli/render_error.rs

@@ -65,6 +65,11 @@ pub mod reason {
     pub const DOWNLOAD_CAPTURE_FAILED: &str = "download_capture_failed";
     pub const TRANSFER_OUTCOME_UNKNOWN: &str = "transfer_outcome_unknown";
     pub const TRANSFER_TIMEOUT: &str = "transfer_timeout";
+    pub const SURFACE_CAPTURE_NOT_FOUND: &str = "surface_capture_not_found";
+    pub const SURFACE_CAPTURE_EXPIRED: &str = "surface_capture_expired";
+    pub const SURFACE_CAPTURE_CONSUMED: &str = "surface_capture_consumed";
+    pub const SURFACE_CAPTURE_STALE: &str = "surface_capture_stale";
+    pub const SURFACE_COORDINATE_INVALID: &str = "surface_coordinate_invalid";
     pub const SESSION_BUSY: &str = crate::rpc_reason::SESSION_BUSY;
     pub const RECORD_START_PAGE_UNREACHABLE: &str = "record_start_page_unreachable";
 }
@@ -303,7 +308,7 @@ pub fn info_for_error(code: ErrorCode, data: Option<&serde_json::Value>) -> Rend
         (ErrorCode::PermissionDenied, reason::REF_CAPABILITY_DENIED) => RenderInfo {
             summary: "snapshot ref does not support this operation",
             hint: Some(
-                "visual surface refs are screenshot-only; inspect `bsk screenshot --ref <ref> --session <id>` with image-understanding capability",
+                "visual Surface refs require image understanding; inspect `bsk screenshot --ref <ref> --session <id>`, then bind its capture id and image coordinates to `bsk click`",
             ),
             exit_code: base.exit_code,
         },
@@ -349,6 +354,41 @@ pub fn info_for_error(code: ErrorCode, data: Option<&serde_json::Value>) -> Rend
             ),
             exit_code: base.exit_code,
         },
+        (ErrorCode::NotFound, reason::SURFACE_CAPTURE_NOT_FOUND) => RenderInfo {
+            summary: "surface capture transaction was not found",
+            hint: Some(
+                "take a fresh surface screenshot and use its capture id with coordinates from that image",
+            ),
+            exit_code: base.exit_code,
+        },
+        (ErrorCode::PermissionDenied, reason::SURFACE_CAPTURE_EXPIRED) => RenderInfo {
+            summary: "surface capture transaction has expired",
+            hint: Some(
+                "take a fresh surface screenshot, then click promptly with that capture id and image coordinates",
+            ),
+            exit_code: base.exit_code,
+        },
+        (ErrorCode::PermissionDenied, reason::SURFACE_CAPTURE_CONSUMED) => RenderInfo {
+            summary: "surface capture transaction was already used",
+            hint: Some(
+                "each capture id is single-use; take a fresh surface screenshot before another point action",
+            ),
+            exit_code: base.exit_code,
+        },
+        (ErrorCode::PermissionDenied, reason::SURFACE_CAPTURE_STALE) => RenderInfo {
+            summary: "page state changed since the surface screenshot",
+            hint: Some(
+                "take a fresh surface screenshot and choose coordinates from the new image before retrying",
+            ),
+            exit_code: base.exit_code,
+        },
+        (ErrorCode::InvalidParams, reason::SURFACE_COORDINATE_INVALID) => RenderInfo {
+            summary: "surface image coordinate is invalid",
+            hint: Some(
+                "use finite pixel coordinates inside the captured image; its top-left corner is (0, 0)",
+            ),
+            exit_code: base.exit_code,
+        },
         (
             ErrorCode::CdpFailed | ErrorCode::Timeout | ErrorCode::InvalidParams,
             reason::RECORD_START_PAGE_UNREACHABLE,
@@ -578,7 +618,7 @@ mod tests {
         let info = info_for_error(ErrorCode::PermissionDenied, Some(&data));
         assert_eq!(info.summary, "snapshot ref does not support this operation");
         assert!(
-            info.hint.unwrap().contains("screenshot-only"),
+            info.hint.unwrap().contains("capture id"),
             "expected visual-surface-specific hint"
         );
         assert_eq!(info.exit_code, 1);
@@ -684,6 +724,25 @@ mod tests {
         assert!(info.summary.contains("timed out after browser dispatch"));
     }
 
+    #[test]
+    fn surface_capture_stale_requests_a_fresh_screenshot() {
+        let data = serde_json::json!({ "reason": reason::SURFACE_CAPTURE_STALE });
+        let info = info_for_error(ErrorCode::PermissionDenied, Some(&data));
+        assert_eq!(
+            info.summary,
+            "page state changed since the surface screenshot"
+        );
+        assert!(info.hint.unwrap().contains("fresh surface screenshot"));
+    }
+
+    #[test]
+    fn surface_coordinate_invalid_explains_image_pixel_bounds() {
+        let data = serde_json::json!({ "reason": reason::SURFACE_COORDINATE_INVALID });
+        let info = info_for_error(ErrorCode::InvalidParams, Some(&data));
+        assert_eq!(info.summary, "surface image coordinate is invalid");
+        assert!(info.hint.unwrap().contains("top-left corner is (0, 0)"));
+    }
+
     #[test]
     fn ref_not_found_overrides_not_found_copy() {
         let data = serde_json::json!({ "reason": reason::REF_NOT_FOUND });

crates/bsk-cli/src/cli/screenshot.rs

@@ -59,7 +59,7 @@ fn run(sock: PathBuf, args: ScreenshotArgs, format: Format) -> Result<(), CliErr
         .map_err(CliError::Local)?;
     match format {
         Format::Json => {
-            let json = serde_json::json!({
+            let mut json = serde_json::json!({
                 "tab_id": reply.tab_id,
                 "width": reply.width,
                 "height": reply.height,
@@ -67,6 +67,10 @@ fn run(sock: PathBuf, args: ScreenshotArgs, format: Format) -> Result<(), CliErr
                 "path": out_path.to_string_lossy(),
                 "byte_size": bytes.len(),
             });
+            if let Some(capture) = &reply.capture {
+                json["capture"] = serde_json::to_value(capture)
+                    .map_err(|e| CliError::Local(anyhow::anyhow!(e)))?;
+            }
             println!(
                 "{}",
                 serde_json::to_string_pretty(&json)
@@ -75,6 +79,12 @@ fn run(sock: PathBuf, args: ScreenshotArgs, format: Format) -> Result<(), CliErr
         }
         Format::Human => {
             println!("{}", out_path.display());
+            if let Some(capture) = &reply.capture {
+                println!(
+                    "capture={} surface={} coordinate_space={} expires_at={}",
+                    capture.id, capture.surface_ref, capture.coordinate_space, capture.expires_at
+                );
+            }
             print_dialog_summaries(&reply.dialogs);
         }
     }

crates/bsk-cli/tests/cli_parse.rs

@@ -237,6 +237,29 @@ fn parses_click_count_alias() {
     assert_eq!(args.click_count, 2);
 }
 
+#[test]
+fn parses_surface_capture_image_coordinates() {
+    let cli = parse(&[
+        "bsk",
+        "click",
+        "@e1",
+        "--session",
+        "s1",
+        "--capture",
+        "sc_test",
+        "--image-x",
+        "160.5",
+        "--image-y",
+        "-1",
+    ]);
+    let Command::Click(args) = cli.command else {
+        panic!("expected click command");
+    };
+    assert_eq!(args.capture.as_deref(), Some("sc_test"));
+    assert_eq!(args.image_x, Some(160.5));
+    assert_eq!(args.image_y, Some(-1.0));
+}
+
 #[test]
 fn parses_hover_with_settle() {
     let cli = parse(&[

crates/bsk-cli/tests/tools_ipc.rs

@@ -238,6 +238,7 @@ async fn screenshot_returns_image_base64_with_dimensions() {
                 height: 600,
                 format: "png".into(),
                 tab_id: 7,
+                capture: None,
                 dialogs: vec![],
             })
             .unwrap(),
@@ -286,6 +287,7 @@ async fn screenshot_forwards_ref_to_extension() {
                 height: 60,
                 format: "png".into(),
                 tab_id: 7,
+                capture: None,
                 dialogs: vec![],
             })
             .unwrap(),

crates/bsk-cli/tests/tools_m7_ipc.rs

@@ -354,6 +354,9 @@ async fn click_round_trips_ref_and_modifiers() {
                 used_selector: None,
                 x: 12.5,
                 y: 34.0,
+                capture_id: None,
+                image_x: None,
+                image_y: None,
                 dialogs: vec![],
             })
             .unwrap(),
@@ -373,6 +376,9 @@ async fn click_round_trips_ref_and_modifiers() {
             click_count: Some(1),
             modifiers: Some(vec![KeyModifier::Ctrl, KeyModifier::Shift]),
             timeout_ms: Some(5_000),
+            capture_id: None,
+            image_x: None,
+            image_y: None,
         },
     )
     .await
@@ -610,6 +616,9 @@ async fn m7_tools_propagate_extension_errors() {
             click_count: None,
             modifiers: None,
             timeout_ms: Some(5_000),
+            capture_id: None,
+            image_x: None,
+            image_y: None,
         },
     )
     .await

crates/bsk-protocol/schema/tool_click_params.json

@@ -16,6 +16,13 @@
         }
       ]
     },
+    "capture_id": {
+      "description": "Short-lived capture id returned by a visual Surface screenshot.",
+      "type": [
+        "string",
+        "null"
+      ]
+    },
     "click_count": {
       "description": "Number of consecutive mouse presses (double-click = 2).",
       "type": [
@@ -25,6 +32,22 @@
       "format": "uint32",
       "minimum": 1.0
     },
+    "image_x": {
+      "description": "X coordinate in the capture image's pixel coordinate space.",
+      "type": [
+        "number",
+        "null"
+      ],
+      "format": "double"
+    },
+    "image_y": {
+      "description": "Y coordinate in the capture image's pixel coordinate space.",
+      "type": [
+        "number",
+        "null"
+      ],
+      "format": "double"
+    },
     "modifiers": {
       "type": [
         "array",

crates/bsk-protocol/schema/tool_click_result.json

@@ -8,6 +8,12 @@
     "y"
   ],
   "properties": {
+    "capture_id": {
+      "type": [
+        "string",
+        "null"
+      ]
+    },
     "dialogs": {
       "description": "Native JS dialogs observed and auto-handled during this call.",
       "type": "array",
@@ -15,6 +21,20 @@
         "$ref": "#/definitions/JavaScriptDialogInfo"
       }
     },
+    "image_x": {
+      "type": [
+        "number",
+        "null"
+      ],
+      "format": "double"
+    },
+    "image_y": {
+      "type": [
+        "number",
+        "null"
+      ],
+      "format": "double"
+    },
     "tab_id": {
       "type": "integer",
       "format": "int64"

crates/bsk-protocol/schema/tool_screenshot_result.json

@@ -8,6 +8,16 @@
     "tab_id"
   ],
   "properties": {
+    "capture": {
+      "anyOf": [
+        {
+          "$ref": "#/definitions/SurfaceCaptureInfo"
+        },
+        {
+          "type": "null"
+        }
+      ]
+    },
     "dialogs": {
       "type": "array",
       "items": {
@@ -109,6 +119,31 @@
         "prompt",
         "beforeunload"
       ]
+    },
+    "SurfaceCaptureInfo": {
+      "type": "object",
+      "required": [
+        "coordinate_space",
+        "expires_at",
+        "id",
+        "surface_ref"
+      ],
+      "properties": {
+        "coordinate_space": {
+          "type": "string"
+        },
+        "expires_at": {
+          "type": "integer",
+          "format": "uint64",
+          "minimum": 0.0
+        },
+        "id": {
+          "type": "string"
+        },
+        "surface_ref": {
+          "type": "string"
+        }
+      }
     }
   }
 }

crates/bsk-protocol/src/tools/interaction.rs

@@ -67,6 +67,15 @@ pub struct ClickParams {
     #[serde(default, skip_serializing_if = "Option::is_none")]
     #[schemars(range(min = 1))]
     pub timeout_ms: Option<u32>,
+    /// Short-lived capture id returned by a visual Surface screenshot.
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub capture_id: Option<String>,
+    /// X coordinate in the capture image's pixel coordinate space.
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub image_x: Option<f64>,
+    /// Y coordinate in the capture image's pixel coordinate space.
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub image_y: Option<f64>,
 }
 
 #[derive(Debug, Clone, PartialEq, Serialize, Deserialize, JsonSchema)]
@@ -80,6 +89,12 @@ pub struct ClickResult {
     /// agents can correlate with a follow-up `tool.screenshot`.
     pub x: f64,
     pub y: f64,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub capture_id: Option<String>,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub image_x: Option<f64>,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub image_y: Option<f64>,
     /// Native JS dialogs observed and auto-handled during this call.
     #[serde(default, skip_serializing_if = "Vec::is_empty")]
     pub dialogs: Vec<JavaScriptDialogInfo>,
@@ -288,6 +303,9 @@ mod tests {
             click_count: Some(1),
             modifiers: Some(vec![KeyModifier::Ctrl]),
             timeout_ms: Some(5_000),
+            capture_id: Some("sc_test".into()),
+            image_x: Some(160.0),
+            image_y: Some(90.0),
         };
         let v = serde_json::to_value(&p).unwrap();
         assert_eq!(v.get("ref").and_then(|v| v.as_str()), Some("@e3"));

crates/bsk-protocol/src/tools/observation.rs

@@ -233,10 +233,20 @@ pub struct ScreenshotResult {
     /// Always `"png"` in v0.1; reserved for future JPEG / WebP support.
     pub format: String,
     pub tab_id: i64,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub capture: Option<SurfaceCaptureInfo>,
     #[serde(default, skip_serializing_if = "Vec::is_empty")]
     pub dialogs: Vec<JavaScriptDialogInfo>,
 }
 
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize, JsonSchema)]
+pub struct SurfaceCaptureInfo {
+    pub id: String,
+    pub surface_ref: String,
+    pub coordinate_space: String,
+    pub expires_at: u64,
+}
+
 #[cfg(test)]
 mod tests {
     use super::*;
@@ -318,6 +328,12 @@ mod tests {
             height: 600,
             format: "png".into(),
             tab_id: 7,
+            capture: Some(SurfaceCaptureInfo {
+                id: "sc_test".into(),
+                surface_ref: "@e3".into(),
+                coordinate_space: "capture-image-pixel".into(),
+                expires_at: 1_700_000_030_000,
+            }),
             dialogs: vec![],
         };
         let v = serde_json::to_value(&r).unwrap();

packages/dsh-plugin-browserskill/src/tools.ts

@@ -563,7 +563,8 @@ function defineBrowserOperations(deps: ToolDeps, register: DefinitionRegistrar):
       name: "interact.click",
       description:
         "Click an element in the session's active tab. Target is a snapshot ref (@e3) from the " +
-        "last browser_inspect observation, or a CSS selector.",
+        "last browser_inspect observation, or a CSS selector. A visual Surface requires the " +
+        "captureId and image coordinates returned by browser_inspect action=screenshot.",
       parameters: {
         target: {
           type: "string",
@@ -580,6 +581,24 @@ function defineBrowserOperations(deps: ToolDeps, register: DefinitionRegistrar):
           type: "integer",
           description: "Number of consecutive presses (double-click = 2).",
         },
+        modifiers: {
+          type: "array",
+          items: { type: "string", enum: ["alt", "ctrl", "meta", "shift"] },
+          description: "Keyboard modifiers held during the click.",
+        },
+        captureId: {
+          type: "string",
+          description:
+            "Short-lived Surface capture id returned by browser_inspect action=screenshot.",
+        },
+        imageX: {
+          type: "number",
+          description: "X coordinate in capture-image pixels; requires captureId and imageY.",
+        },
+        imageY: {
+          type: "number",
+          description: "Y coordinate in capture-image pixels; requires captureId and imageX.",
+        },
       },
       output: {
         schema: {
@@ -590,6 +609,7 @@ function defineBrowserOperations(deps: ToolDeps, register: DefinitionRegistrar):
             tabId: { type: "integer", required: true },
             x: { type: "number", required: true },
             y: { type: "number", required: true },
+            captureId: { type: "string" },
           },
         },
         render: (_args, value) => [
@@ -601,17 +621,44 @@ function defineBrowserOperations(deps: ToolDeps, register: DefinitionRegistrar):
       },
       async execute(args, exec) {
         if (args.target.trim().length === 0) throw new Error("target must be a non-empty string");
+        const pointArgCount =
+          Number(args.captureId !== undefined) +
+          Number(args.imageX !== undefined) +
+          Number(args.imageY !== undefined);
+        if (pointArgCount !== 0 && pointArgCount !== 3) {
+          throw new Error("captureId, imageX, and imageY must be given together");
+        }
         const sessionId = registry.resolve(args.session, "browser_interact(action=click)");
         const cmdArgs = ["click", "--session", sessionId];
         if (args.button !== undefined) cmdArgs.push("--button", args.button);
         if (args.clickCount !== undefined) cmdArgs.push("--click-count", String(args.clickCount));
+        if (args.modifiers !== undefined && args.modifiers.length > 0) {
+          cmdArgs.push("--modifiers", args.modifiers.join(","));
+        }
+        if (args.captureId !== undefined) {
+          cmdArgs.push(
+            "--capture",
+            args.captureId,
+            "--image-x",
+            String(args.imageX),
+            "--image-y",
+            String(args.imageY),
+          );
+        }
         cmdArgs.push(args.target);
         const reply = (await runBsk(deps, exec, cmdArgs, "click", sessionId)) as {
           tab_id: number;
           x: number;
           y: number;
+          capture_id?: string;
+        };
+        return {
+          session: sessionId,
+          tabId: reply.tab_id,
+          x: reply.x,
+          y: reply.y,
+          ...(reply.capture_id !== undefined ? { captureId: reply.capture_id } : {}),
         };
-        return { session: sessionId, tabId: reply.tab_id, x: reply.x, y: reply.y };
       },
       presentCall: (args) => ({
         card: "terminal",
@@ -780,6 +827,8 @@ function defineBrowserOperations(deps: ToolDeps, register: DefinitionRegistrar):
             width: { type: "integer", required: true },
             height: { type: "integer", required: true },
             byteSize: { type: "integer", required: true },
+            captureId: { type: "string" },
+            captureExpiresAt: { type: "integer" },
             image: {
               type: "object",
               additionalProperties: false,
@@ -803,7 +852,11 @@ function defineBrowserOperations(deps: ToolDeps, register: DefinitionRegistrar):
             value.image !== undefined
               ? `[session ${value.session}] screenshot of tab ${value.tabId} (${value.width}x${value.height}px)`
               : `[session ${value.session}] screenshot saved to ${value.path} (${value.width}x${value.height}px, ${value.byteSize} bytes) — this deployment cannot inline images; read the file to view it`;
-          const blocks: ContentBlock[] = [{ type: "text", text }];
+          const captureText =
+            value.captureId !== undefined
+              ? ` Surface capture ${value.captureId} uses capture-image-pixel coordinates and expires at ${value.captureExpiresAt}.`
+              : "";
+          const blocks: ContentBlock[] = [{ type: "text", text: text + captureText }];
           if (value.image !== undefined) {
             blocks.push({
               type: "image",
@@ -842,6 +895,7 @@ function defineBrowserOperations(deps: ToolDeps, register: DefinitionRegistrar):
             height: number;
             path: string;
             byte_size: number;
+            capture?: { id: string; expires_at: number };
           };
           writtenPath = reply.path;
           const data = await readFile(reply.path);
@@ -855,6 +909,9 @@ function defineBrowserOperations(deps: ToolDeps, register: DefinitionRegistrar):
             width: reply.width,
             height: reply.height,
             byteSize: reply.byte_size,
+            ...(reply.capture !== undefined
+              ? { captureId: reply.capture.id, captureExpiresAt: reply.capture.expires_at }
+              : {}),
             ...(ref !== undefined
               ? {
                   image: {

packages/dsh-plugin-browserskill/tests/tools.test.ts

@@ -478,12 +478,12 @@ describe("interaction tools", () => {
     emulate: { tab_id: 7, cleared: false },
   };
 
-  it("interact.click maps target, button, and click count", async () => {
+  it("interact.click maps target, button, click count, and modifiers", async () => {
     const { tools, calls } = setup(responses);
     await startSession(tools);
     const click = tools.get("interact.click");
     const value = (await click?.execute(
-      { target: "@e1", button: "right", clickCount: 2 },
+      { target: "@e1", button: "right", clickCount: 2, modifiers: ["ctrl", "shift"] },
       makeExec(),
     )) as { session: string; x: number; y: number };
     expect(value).toMatchObject({ session: "s1", x: 10, y: 20 });
@@ -495,6 +495,43 @@ describe("interaction tools", () => {
       "right",
       "--click-count",
       "2",
+      "--modifiers",
+      "ctrl,shift",
+      "@e1",
+    ]);
+  });
+
+  it("interact.click forwards a complete Surface capture coordinate transaction", async () => {
+    const { tools, calls } = setup({
+      ...responses,
+      click: {
+        tab_id: 7,
+        used_ref: "e1",
+        x: 110,
+        y: 70,
+        capture_id: "sc_test",
+        image_x: 200,
+        image_y: 100,
+      },
+    });
+    await startSession(tools);
+    const click = tools.get("interact.click");
+    const value = await click?.execute(
+      { target: "@e1", captureId: "sc_test", imageX: 200, imageY: 100 },
+      makeExec(),
+    );
+
+    expect(value).toMatchObject({ captureId: "sc_test", x: 110, y: 70 });
+    expect(calls[1].args).toEqual([
+      "click",
+      "--session",
+      "s1",
+      "--capture",
+      "sc_test",
+      "--image-x",
+      "200",
+      "--image-y",
+      "100",
       "@e1",
     ]);
   });
@@ -923,6 +960,32 @@ describe("inspect.screenshot", () => {
     expect(rendered?.every((block) => block.type === "text")).toBe(true);
   });
 
+  it("returns Surface capture metadata alongside the screenshot", async () => {
+    const path = pngFile();
+    const { tools } = setup({
+      "session start": START_REPLY("s1"),
+      screenshot: {
+        tab_id: 7,
+        width: 800,
+        height: 600,
+        format: "png",
+        path,
+        byte_size: 8,
+        capture: { id: "sc_test", expires_at: 1700000030000 },
+      },
+    });
+    await startSession(tools);
+    const screenshot = tools.get("inspect.screenshot");
+    const value = await screenshot?.execute({ ref: "@e1" }, makeExec());
+
+    expect(value).toMatchObject({
+      captureId: "sc_test",
+      captureExpiresAt: 1700000030000,
+    });
+    const rendered = screenshot?.output.render({ session: "s1" }, value as never);
+    expect(rendered?.[0]).toMatchObject({ type: "text", text: expect.stringContaining("sc_test") });
+  });
+
   it("commits the image through the attachment store on an image-capable route", async () => {
     const path = pngFile();
     const services = {

packages/vom/src/__tests__/render.test.ts

@@ -49,7 +49,7 @@ describe("renderVom single-layer page", () => {
 
     expect(out.text).toContain("[visual surfaces]");
     expect(out.text).toContain(
-      '@e1 surface "Data grid" [bounds=10,20,800,500; rendering=canvas; layers=2; visual-only; screenshot-only; requires=image-understanding]',
+      '@e1 surface "Data grid" [bounds=10,20,800,500; rendering=canvas; layers=2; visual-only; requires=image-understanding; use: bsk screenshot --ref @e1]',
     );
     expect(out.refs).toContainEqual(
       expect.objectContaining({
@@ -78,7 +78,7 @@ describe("renderVom single-layer page", () => {
     const out = renderVom(input);
 
     expect(out.text).toContain(
-      '@e1 surface "canvas visual surface" [bounds=10,20,800,500; rendering=canvas; visual-only; screenshot-only; requires=image-understanding]',
+      '@e1 surface "canvas visual surface" [bounds=10,20,800,500; rendering=canvas; visual-only; requires=image-understanding; use: bsk screenshot --ref @e1]',
     );
     expect(out.refs).toContainEqual(
       expect.objectContaining({
@@ -117,7 +117,7 @@ describe("renderVom single-layer page", () => {
     );
   });
 
-  it("uses the appendix token budget and prefers explicitly labeled surfaces", () => {
+  it("bounds visual output and prefers explicitly labeled surfaces", () => {
     const input = scene([node({ id: 1, role: "RootWebArea", frameId: "main" })]);
     input.visualSurfaces = Array.from({ length: 12 }, (_, index) => ({
       parentId: 1,
@@ -132,30 +132,10 @@ describe("renderVom single-layer page", () => {
     const out = renderVom(input);
     const surfaceRefs = out.refs.filter((ref) => ref.kind === "surface");
 
-    expect(surfaceRefs).toHaveLength(12);
+    expect(surfaceRefs).toHaveLength(8);
     expect(surfaceRefs[0]).toMatchObject({ backendNodeId: 111, name: "Important status" });
-    expect(out.truncated).toBe(false);
-  });
-
-  it("renders twenty independent sparklines without changing DOM refs", () => {
-    const input = scene([
-      node({ id: 1, role: "RootWebArea", frameId: "main" }),
-      node({ id: 2, parentId: 1, role: "button", name: "Submit", tag: "button" }),
-    ]);
-    input.visualSurfaces = Array.from({ length: 20 }, (_, index) => ({
-      parentId: 1,
-      backendNodeId: 100 + index,
-      frameId: "main",
-      renderingKind: "canvas" as const,
-      visibleRect: { x: index * 12, y: 20, w: 10, h: 8 },
-      memberCount: 1,
-    }));
-
-    const out = renderVom(input);
-
-    expect(out.refs[0]).toMatchObject({ ref: "e1", backendNodeId: 2, kind: "dom" });
-    expect(out.refs.filter((ref) => ref.kind === "surface")).toHaveLength(20);
-    expect(out.truncated).toBe(false);
+    expect(out.text).toContain("… 4 additional visual surfaces omitted");
+    expect(out.truncated).toBe(true);
   });
 
   it("does not let a visual surface exhaust the budget before later DOM content", () => {

packages/vom/src/index.ts

@@ -20,7 +20,3 @@ export type {
   VomScene,
   VomVisualSurface,
 } from "./types";
-export {
-  compareVisualSurfacePriority,
-  type VisualSurfacePriorityInput,
-} from "./visual-surface-priority";

packages/vom/src/render.ts

@@ -11,7 +11,6 @@ import type {
   VomScene,
   VomVisualSurface,
 } from "./types";
-import { compareVisualSurfacePriority } from "./visual-surface-priority";
 
 const SKIP_ROLES = new Set(["generic", "none", "presentation", "inlinetextbox"]);
 
@@ -89,8 +88,7 @@ const MAX_CUSTOM_RECOVERY_AREA = 180_000;
 const MAX_RECOVERABLE_SINGLE_INTENT_AREA = 360_000;
 const MAX_HANDLE_CONTEXT_ITEMS = 3;
 const MAX_SURFACE_ITEMS = 12;
-const DEFAULT_VISUAL_APPENDIX_TOKENS = 2_048;
-const MAX_VISUAL_SURFACE_REFS = 512;
+const MAX_VISUAL_SURFACES = 8;
 const MAX_SCOPE_LINES = 40;
 const RECOVERY_HANDLER_ATTRS = ["onclick", "onmousedown", "onkeydown", "onkeyup", "onkeypress"];
 const NATIVE_TAGS = new Set(["button", "input", "select", "textarea"]);
@@ -798,16 +796,23 @@ interface RenderState {
   surfaceMap: Map<number, CondSurface>;
   scopeMap: Map<number, ActiveScopeBlock>;
   visualSurfaces: VomVisualSurface[];
-  visualSurfacesTruncated: boolean;
-  omittedVisualSurfaceCount?: number;
 }
 
-function tryAppendLine(state: RenderState, line: string, tokenLimit = state.maxTokens): boolean {
-  const nextTokens = state.tokens + estimateTokens(line);
-  if (nextTokens > tokenLimit) return false;
-  state.lines.push(line);
-  state.tokens = nextTokens;
-  return true;
+function visualSurfaceArea(surface: VomVisualSurface): number {
+  return Math.max(0, surface.visibleRect.w) * Math.max(0, surface.visibleRect.h);
+}
+
+function compareVisualSurfaces(a: VomVisualSurface, b: VomVisualSurface): number {
+  const aLabeled = cleaned(a.label) !== undefined;
+  const bLabeled = cleaned(b.label) !== undefined;
+  return (
+    Number(bLabeled) - Number(aLabeled) ||
+    visualSurfaceArea(b) - visualSurfaceArea(a) ||
+    a.frameId.localeCompare(b.frameId) ||
+    a.visibleRect.y - b.visibleRect.y ||
+    a.visibleRect.x - b.visibleRect.x ||
+    a.backendNodeId - b.backendNodeId
+  );
 }
 
 function visualSurfaceLine(surface: VomVisualSurface, ref: string): string {
@@ -815,7 +820,7 @@ function visualSurfaceLine(surface: VomVisualSurface, ref: string): string {
   const layers = surface.memberCount > 1 ? `; layers=${surface.memberCount}` : "";
   const { x, y, w, h } = surface.visibleRect;
   const bounds = [x, y, w, h].map(Math.round).join(",");
-  return `  @${ref} surface ${JSON.stringify(label)} [bounds=${bounds}; rendering=${surface.renderingKind}${layers}; visual-only; screenshot-only; requires=image-understanding]`;
+  return `  @${ref} surface ${JSON.stringify(label)} [bounds=${bounds}; rendering=${surface.renderingKind}${layers}; visual-only; requires=image-understanding; use: bsk screenshot --ref @${ref}]`;
 }
 
 function selectVisualSurfaces(
@@ -829,35 +834,41 @@ function selectVisualSurfaces(
     if (surface.parentId !== null && !nodesById.has(surface.parentId)) continue;
     eligibleCount += 1;
 
-    selected.push(surface);
+    const insertionIndex = selected.findIndex(
+      (candidate) => compareVisualSurfaces(surface, candidate) < 0,
+    );
+    if (insertionIndex < 0) {
+      if (selected.length < MAX_VISUAL_SURFACES) selected.push(surface);
+      continue;
+    }
+    selected.splice(insertionIndex, 0, surface);
+    if (selected.length > MAX_VISUAL_SURFACES) selected.pop();
   }
-  selected.sort(compareVisualSurfacePriority);
+
   return { selected, eligibleCount };
 }
 
 function emitVisualAppendix(state: RenderState): void {
   if (state.stopped) return;
   const { selected, eligibleCount } = selectVisualSurfaces(state.visualSurfaces, state.nodesById);
-  if (eligibleCount === 0 && !state.visualSurfacesTruncated) return;
+  if (eligibleCount === 0) return;
 
   const header = "[visual surfaces]";
-  const appendixStartTokens = state.tokens;
-  const appendixTokenLimit = Number.isFinite(state.maxTokens)
-    ? state.maxTokens
-    : appendixStartTokens + DEFAULT_VISUAL_APPENDIX_TOKENS;
   let headerEmitted = false;
   let emitted = 0;
   for (const surface of selected) {
-    if (emitted >= MAX_VISUAL_SURFACE_REFS) break;
     const ref = `e${state.nextRef}`;
     const line = visualSurfaceLine(surface, ref);
-    const requiredTokens = estimateTokens(line) + (headerEmitted ? 0 : estimateTokens(header));
-    if (state.tokens + requiredTokens > appendixTokenLimit) break;
+    const nextTokens =
+      state.tokens + estimateTokens(line) + (headerEmitted ? 0 : estimateTokens(header));
+    if (nextTokens > state.maxTokens) break;
     if (!headerEmitted) {
-      if (!tryAppendLine(state, header, appendixTokenLimit)) break;
+      state.lines.push(header);
+      state.tokens += estimateTokens(header);
       headerEmitted = true;
     }
-    if (!tryAppendLine(state, line, appendixTokenLimit)) break;
+    state.lines.push(line);
+    state.tokens += estimateTokens(line);
     const label = cleaned(surface.label) ?? `${surface.renderingKind} visual surface`;
     state.refs.push({
       ref,
@@ -874,15 +885,16 @@ function emitVisualAppendix(state: RenderState): void {
     emitted += 1;
   }
 
-  const locallyOmitted = eligibleCount - emitted;
-  const upstreamOmitted = state.omittedVisualSurfaceCount ?? 0;
-  const omitted = locallyOmitted + upstreamOmitted;
-  if (omitted > 0 || state.visualSurfacesTruncated) {
+  const omitted = eligibleCount - emitted;
+  if (omitted > 0) {
     state.truncated = true;
     if (headerEmitted) {
-      const count =
-        omitted > 0 ? `${state.visualSurfacesTruncated ? "at least " : ""}${omitted}` : "some";
-      tryAppendLine(state, `  … ${count} additional visual surfaces omitted`, appendixTokenLimit);
+      const summary = `  … ${omitted} additional visual surfaces omitted`;
+      const nextTokens = state.tokens + estimateTokens(summary);
+      if (nextTokens <= state.maxTokens) {
+        state.lines.push(summary);
+        state.tokens = nextTokens;
+      }
     }
   }
 }
@@ -891,22 +903,28 @@ function emitActiveScopeBlock(scope: ActiveScopeBlock, depth: number, state: Ren
   if (state.stopped || scope.lines.length === 0) return;
   const indent = "  ".repeat(depth);
   const header = `${indent}[§ active: ${scope.label}]`;
-  if (!tryAppendLine(state, header)) {
+  const headerTokens = estimateTokens(header);
+  if (state.tokens + headerTokens > state.maxTokens) {
     state.truncated = true;
     state.stopped = true;
     return;
   }
+  state.lines.push(header);
+  state.tokens += headerTokens;
 
   for (const text of scope.lines.slice(0, MAX_SCOPE_LINES)) {
     if (state.stopped) return;
     const clean = cleaned(text);
     if (!clean) continue;
     const line = `${indent}  ${clean}`;
-    if (!tryAppendLine(state, line)) {
+    const nextTokens = state.tokens + estimateTokens(line);
+    if (nextTokens > state.maxTokens) {
       state.truncated = true;
       state.stopped = true;
       return;
     }
+    state.lines.push(line);
+    state.tokens = nextTokens;
   }
 }
 
@@ -941,11 +959,15 @@ function renderTree(children: Map<number | null, VomNode[]>, state: RenderState)
     const context = ref ? handleContext(node, state) : [];
     const surface = state.surfaceMap.get(node.id);
     const line = renderNodeLine(node, depth, ref, context, surface, state.redactValues);
-    if (!tryAppendLine(state, line)) {
+    const nextTokens = state.tokens + estimateTokens(line);
+    if (nextTokens > state.maxTokens) {
       state.truncated = true;
       state.stopped = true;
       break;
     }
+
+    state.lines.push(line);
+    state.tokens = nextTokens;
     if (ref) {
       const name = cleaned(node.name);
       state.refs.push({
@@ -979,8 +1001,6 @@ function renderNodes(
   surfaces: CondSurface[] = [],
   activeScopeBlocks: ActiveScopeBlock[] = [],
   visualSurfaces: VomVisualSurface[] = [],
-  visualSurfacesTruncated = false,
-  omittedVisualSurfaceCount?: number,
 ): RenderState {
   const children = buildChildren(nodes);
   const state: RenderState = {
@@ -1001,8 +1021,6 @@ function renderNodes(
     surfaceMap: new Map(surfaces.map((surface) => [surface.triggerId, surface])),
     scopeMap: new Map(activeScopeBlocks.map((scope) => [scope.triggerId, scope])),
     visualSurfaces,
-    visualSurfacesTruncated,
-    omittedVisualSurfaceCount,
   };
 
   renderTree(children, state);
@@ -1223,11 +1241,10 @@ function renderDoubleLayer(scene: VomScene, layer: BlockingLayer, options: VomOp
     scene.surfaces,
     scene.activeScopeBlocks,
     scene.visualSurfaces?.filter((surface) => visibleSurface(surface.parentId)),
-    scene.visualSurfacesTruncated,
-    scene.omittedVisualSurfaceCount,
   );
   const occlusionLine = renderPageOcclusionLine(hiddenCount);
-  if (!tryAppendLine(state, occlusionLine)) state.truncated = true;
+  state.lines.push(occlusionLine);
+  state.tokens += estimateTokens(occlusionLine);
   emitVisualAppendix(state);
 
   return {
@@ -1256,8 +1273,6 @@ export function renderVom(scene: VomScene, options: VomOptions = {}): VomResult
     scene.surfaces,
     scene.activeScopeBlocks,
     scene.visualSurfaces,
-    scene.visualSurfacesTruncated,
-    scene.omittedVisualSurfaceCount,
   );
   emitVisualAppendix(state);
 

packages/vom/src/types.ts

@@ -63,10 +63,6 @@ export interface VomScene {
   activeScopeBlocks?: ActiveScopeBlock[];
   /** Non-semantic rendered regions discovered alongside the AX/DOM tree. */
   visualSurfaces?: VomVisualSurface[];
-  /** Upstream surface discovery/aggregation stopped at a resource guardrail. */
-  visualSurfacesTruncated?: boolean;
-  /** Exact omitted count when upstream could determine it. */
-  omittedVisualSurfaceCount?: number;
 }
 
 export interface VomOptions {

packages/vom/src/visual-surface-priority.ts

@@ -1,29 +0,0 @@
-export interface VisualSurfacePriorityInput {
-  label?: string;
-  visibleRect: { x: number; y: number; w: number; h: number };
-  frameId: string;
-  backendNodeId: number;
-}
-
-function hasLabel(label: string | undefined): boolean {
-  return (label?.trim().length ?? 0) > 0;
-}
-
-function area(surface: VisualSurfacePriorityInput): number {
-  return Math.max(0, surface.visibleRect.w) * Math.max(0, surface.visibleRect.h);
-}
-
-/** Negative means `a` should be emitted before `b`. */
-export function compareVisualSurfacePriority(
-  a: VisualSurfacePriorityInput,
-  b: VisualSurfacePriorityInput,
-): number {
-  return (
-    Number(hasLabel(b.label)) - Number(hasLabel(a.label)) ||
-    area(b) - area(a) ||
-    a.frameId.localeCompare(b.frameId) ||
-    a.visibleRect.y - b.visibleRect.y ||
-    a.visibleRect.x - b.visibleRect.x ||
-    a.backendNodeId - b.backendNodeId
-  );
-}

skill/SKILL.md

@@ -76,12 +76,24 @@ is cheaper and more precise.
 When `bsk observe` renders
 `@eN surface ... [visual-only; requires=image-understanding; ...]`, the ref identifies rendered
 canvas content that is not represented by the text observation, not an interactable DOM control.
-Keep using any reliable DOM/AX text and controls that appear alongside it. If you can actually
-inspect image output, use `bsk screenshot --ref @eN --session <id>` to obtain the visible crop. If
-you lack multimodal or image-reading capability, do not take a screenshot and pretend to know its
-contents, and never guess coordinates; tell the user that they need to switch to a model with
-image-understanding capability. Do not pass a visual surface ref to click, fill, hover, or select;
-those commands intentionally reject screenshot-only refs.
+Keep using any reliable DOM/AX text and controls that appear alongside it. If you lack multimodal or
+image-reading capability, do not take a screenshot and pretend to know its contents, and never guess
+coordinates; tell the user that they need to switch to a model with image-understanding capability.
+
+If you can actually inspect image output, use `bsk screenshot --ref @eN --session <id>` to obtain
+the visible crop and its short-lived, single-use Surface capture id. Only when the task requires a
+point action and the image provides a clear target, bind that exact screenshot to the click command:
+
+```bash
+bsk click @eN --capture <capture-id> --image-x <px> --image-y <px> --session <id>
+```
+
+Coordinates are pixels in the returned capture image, not viewport CSS coordinates. Re-observing,
+navigating, scrolling, resizing, zooming, changing Frame projection, expiry, or reusing the capture
+makes the action fail; take a new Surface screenshot instead of adjusting or retrying coordinates.
+A point click does not reveal Canvas semantics and must not be followed by an assumed fill/press
+workflow. Without all three capture arguments, visual Surface refs remain screenshot-only and
+click/fill/hover/select reject them.
 
 Escalate page reading only as needed:
 
@@ -135,6 +147,7 @@ Required flags that are easy to get wrong:
 bsk fill <ref> --value <text>      bsk select <ref> --value <option-value>
 bsk screenshot --out <path>        bsk emulate --device <preset-id>
 bsk upload <ref> --file <path>     bsk download <ref> --out <path>
+bsk click <surface-ref> --capture <id> --image-x <px> --image-y <px>
 ```
 
 `select` matches an option's `value` attribute, not its visible label. Device preset ids are