feat(vom): support screenshot-bound point clicks on canvas surfaces | 支持基于截图坐标点击 canvas surface

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>;
   createdAtMs: number;
 }
@@ -186,6 +188,7 @@ export class SessionManager {
         sessionId,
         agentWindowId: windowId,
         refStore: new RefStore(),
+        surfaceCaptures: new SurfaceCaptureStore({ now: this.now }),
         borrowedTabs: new Map(),
         createdAtMs: this.now(),
       };

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__/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");