Add browser pane element picker (#670)

* feat: add browser pane element picker

Port the browser pane from PR #198 and route picked elements through workspace attachments so the context follows every agent composer in a workspace.

Co-authored-by: Jason Kneen <jason.kneen@bouncingfish.com>

* docs: document electron platform overlays

* fix: harden browser pane navigation

* fix: polish browser tab interactions

* fix: route browser pane focus shortcuts

---------

Co-authored-by: Jason Kneen <jason.kneen@bouncingfish.com>

packages/app/src/components/composer.test.tsx

@@ -226,6 +226,7 @@ vi.mock("lucide-react-native", () => {
     Pencil: createIcon("Pencil"),
     AudioLines: createIcon("AudioLines"),
     CircleDot: createIcon("CircleDot"),
+    MousePointer2: createIcon("MousePointer2"),
     GitPullRequest: createIcon("GitPullRequest"),
     MessageSquareCode: createIcon("MessageSquareCode"),
     X: createIcon("X"),
@@ -576,6 +577,7 @@ let workspaceBindingRenderCount = 0;
 
 type ReviewComposerAttachment = Extract<ComposerAttachment, { kind: "review" }>;
 type ReviewAttachment = Extract<AgentAttachment, { type: "review" }>;
+type BrowserElementComposerAttachment = Extract<ComposerAttachment, { kind: "browser_element" }>;
 
 function reviewAttachment(body: string): ReviewAttachment {
   return {
@@ -621,6 +623,30 @@ function reviewComposerAttachment(body: string): ReviewComposerAttachment {
   };
 }
 
+function browserElementComposerAttachment(): BrowserElementComposerAttachment {
+  return {
+    kind: "browser_element",
+    attachment: {
+      url: "https://example.com/page",
+      selector: "button.primary",
+      tag: "button",
+      text: "Save",
+      outerHTML: '<button class="primary">Save</button>',
+      computedStyles: { display: "flex" },
+      boundingRect: { x: 1, y: 2, width: 80, height: 32 },
+      reactSource: {
+        fileName: "src/save-button.tsx",
+        lineNumber: 12,
+        columnNumber: 3,
+        componentName: "SaveButton",
+      },
+      parentChain: ["form.settings"],
+      children: [],
+      formatted: '<browser-element url="https://example.com/page">button.primary</browser-element>',
+    },
+  };
+}
+
 function cloneReviewComposerAttachment(
   attachment: ReviewComposerAttachment,
 ): ReviewComposerAttachment {
@@ -1045,6 +1071,21 @@ describe("Composer attachments", () => {
     });
   });
 
+  it("serializes browser element workspace attachments as generic text attachments", async () => {
+    const browserElement = browserElementComposerAttachment();
+    expect(splitComposerAttachmentsForSubmit([browserElement])).toEqual({
+      images: [],
+      attachments: [
+        {
+          type: "text",
+          mimeType: "text/plain",
+          title: "Browser element · button",
+          text: browserElement.attachment.formatted,
+        },
+      ],
+    });
+  });
+
   it("does not enqueue redundant binding renders for equivalent workspace attachments", async () => {
     const review = reviewComposerAttachment("Stable workspace review.");