fix(browser): make attachment clicks trusted

steipete · steipete · commit 643225253ece · 2025-12-31T20:39:49.000+01:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,7 @@
 ### Fixed
 - Browser: avoid stray attachment removal clicks while still detecting stale chips, and allow completed uploads even if send stays disabled. Original PR #56 by Alex Naidis (@TheCrazyLex) — thank you!
 - Browser: dismiss blocking modals when a custom ChatGPT project URL is missing, and harden attachment uploads (force input/change events; retry via DataTransfer; treat “file selected” as insufficient unless the composer shows attachment UI).
+- Browser: prefer a trusted (CDP) click on the composer “+” button so attachment uploads work even when ChatGPT ignores synthetic clicks.
 
 ## 0.8.2 — 2025-12-30
 
diff --git a/src/browser/actions/attachments.ts b/src/browser/actions/attachments.ts
@@ -6,12 +6,12 @@ import { logDomFailure } from '../domDebug.js';
 import { transferAttachmentViaDataTransfer } from './attachmentDataTransfer.js';
 
 export async function uploadAttachmentFile(
-  deps: { runtime: ChromeClient['Runtime']; dom?: ChromeClient['DOM'] },
+  deps: { runtime: ChromeClient['Runtime']; dom?: ChromeClient['DOM']; input?: ChromeClient['Input'] },
   attachment: BrowserAttachment,
   logger: BrowserLogger,
   options?: { expectedCount?: number },
 ): Promise<boolean> {
-  const { runtime, dom } = deps;
+  const { runtime, dom, input } = deps;
   if (!dom) {
     throw new Error('DOM domain unavailable while uploading attachments.');
   }
@@ -294,49 +294,72 @@ export async function uploadAttachmentFile(
   };
 
   // New ChatGPT UI hides the real file input behind a composer "+" menu; click it pre-emptively.
-  await Promise.resolve(
-    runtime.evaluate({
-      expression: `(() => {
-        const selectors = [
-          '#composer-plus-btn',
-          'button[data-testid="composer-plus-btn"]',
-          '[data-testid*="plus"]',
-          'button[aria-label*="add"]',
-          'button[aria-label*="attachment"]',
-          'button[aria-label*="file"]',
-        ];
-        for (const selector of selectors) {
-          const el = document.querySelector(selector);
-          if (el instanceof HTMLElement) {
-            el.click();
-            return true;
+  // Learned: synthetic `.click()` is sometimes ignored (isTrusted checks). Prefer a CDP mouse click when possible.
+  const clickPlusTrusted = async (): Promise<boolean> => {
+    if (!input || typeof input.dispatchMouseEvent !== 'function') return false;
+    const locate = await runtime
+      .evaluate({
+        expression: `(() => {
+          const selectors = [
+            '#composer-plus-btn',
+            'button[data-testid="composer-plus-btn"]',
+            '[data-testid*="plus"]',
+            'button[aria-label*="add"]',
+            'button[aria-label*="attachment"]',
+            'button[aria-label*="file"]',
+          ];
+          for (const selector of selectors) {
+            const el = document.querySelector(selector);
+            if (!(el instanceof HTMLElement)) continue;
+            const rect = el.getBoundingClientRect();
+            if (rect.width <= 0 || rect.height <= 0) continue;
+            el.scrollIntoView({ block: 'center', inline: 'center' });
+            const nextRect = el.getBoundingClientRect();
+            return { ok: true, x: nextRect.left + nextRect.width / 2, y: nextRect.top + nextRect.height / 2 };
           }
-        }
-        return false;
-      })()`,
-      returnByValue: true,
-    }),
-  ).catch(() => undefined);
-
-  await delay(250);
+          return { ok: false };
+        })()`,
+        returnByValue: true,
+      })
+      .then((res) => res?.result?.value as { ok?: boolean; x?: number; y?: number } | undefined)
+      .catch(() => undefined);
+    if (!locate?.ok || typeof locate.x !== 'number' || typeof locate.y !== 'number') return false;
+    const x = locate.x;
+    const y = locate.y;
+    await input.dispatchMouseEvent({ type: 'mouseMoved', x, y });
+    await input.dispatchMouseEvent({ type: 'mousePressed', x, y, button: 'left', clickCount: 1 });
+    await input.dispatchMouseEvent({ type: 'mouseReleased', x, y, button: 'left', clickCount: 1 });
+    return true;
+  };
 
-  // Helper to click the upload menu item (if present) to reveal the real attachment input.
-  await Promise.resolve(
-    runtime.evaluate({
-      expression: `(() => {
-        const menuItems = Array.from(document.querySelectorAll('[data-testid*="upload"],[data-testid*="attachment"], [role="menuitem"], [data-radix-collection-item]'));
-        for (const el of menuItems) {
-          const text = (el.textContent || '').toLowerCase();
-          const tid = el.getAttribute?.('data-testid')?.toLowerCase?.() || '';
-          if (tid.includes('upload') || tid.includes('attachment') || text.includes('upload') || text.includes('file')) {
-            if (el instanceof HTMLElement) { el.click(); return true; }
+  const clickedTrusted = await clickPlusTrusted().catch(() => false);
+  if (!clickedTrusted) {
+    await Promise.resolve(
+      runtime.evaluate({
+        expression: `(() => {
+          const selectors = [
+            '#composer-plus-btn',
+            'button[data-testid="composer-plus-btn"]',
+            '[data-testid*="plus"]',
+            'button[aria-label*="add"]',
+            'button[aria-label*="attachment"]',
+            'button[aria-label*="file"]',
+          ];
+          for (const selector of selectors) {
+            const el = document.querySelector(selector);
+            if (el instanceof HTMLElement) {
+              el.click();
+              return true;
+            }
           }
-        }
-        return false;
-      })()`,
-      returnByValue: true,
-    }),
-  ).catch(() => undefined);
+          return false;
+        })()`,
+        returnByValue: true,
+      }),
+    ).catch(() => undefined);
+  }
+
+  await delay(350);
 
   const normalizeForMatch = (value: string): string =>
     String(value || '')
@@ -572,23 +595,25 @@ export async function uploadAttachmentFile(
       }
 
       // Mark candidates with stable indices so we can select them via DOM.querySelector.
+      // Learned: ChatGPT sometimes renders a zero-sized file input that does *not* trigger uploads;
+      // keep it as a fallback, but strongly prefer visible (even sr-only 1x1) inputs.
+      const localSet = new Set(localInputs);
       let idx = 0;
-      let candidates = inputs.map((el) => {
+      const candidates = inputs.map((el) => {
         const accept = el.getAttribute('accept') || '';
         const imageOnly = acceptIsImageOnly(accept);
+        const rect = el instanceof HTMLElement ? el.getBoundingClientRect() : { width: 0, height: 0 };
+        const visible = rect.width > 0 && rect.height > 0;
+        const local = localSet.has(el);
         const score =
           (el.hasAttribute('multiple') ? 100 : 0) +
-          (!imageOnly ? 20 : isImageAttachment ? 15 : -500);
+          (local ? 40 : 0) +
+          (visible ? 30 : -200) +
+          (!imageOnly ? 30 : isImageAttachment ? 20 : 5);
         el.setAttribute('data-oracle-upload-candidate', 'true');
         el.setAttribute('data-oracle-upload-idx', String(idx));
-        return { idx: idx++, score, imageOnly };
+        return { idx: idx++, score, imageOnly, visible, local };
       });
-      if (!isImageAttachment) {
-        const nonImage = candidates.filter((candidate) => !candidate.imageOnly);
-        if (nonImage.length > 0) {
-          candidates = nonImage;
-        }
-      }
 
       // Prefer higher scores first.
       candidates.sort((a, b) => b.score - a.score);
@@ -1739,11 +1764,59 @@ export async function waitForAttachmentVisible(
       }
     }
 
-    const composerRoot =
-      document.querySelector('[data-testid*="composer"]') || document.querySelector('form') || document.body;
-    const attachmentSelectors = ['[data-testid*="attachment"]','[data-testid*="chip"]','[data-testid*="upload"]','[data-testid*="file"]'];
-    const attachmentMatch = attachmentSelectors.some((selector) =>
-      Array.from(document.querySelectorAll(selector)).some(matchNode),
+    const promptSelectors = ${JSON.stringify(INPUT_SELECTORS)};
+    const sendSelectors = ${JSON.stringify(SEND_BUTTON_SELECTORS)};
+    const findPromptNode = () => {
+      for (const selector of promptSelectors) {
+        const nodes = Array.from(document.querySelectorAll(selector));
+        for (const node of nodes) {
+          if (!(node instanceof HTMLElement)) continue;
+          const rect = node.getBoundingClientRect();
+          if (rect.width > 0 && rect.height > 0) return node;
+        }
+      }
+      for (const selector of promptSelectors) {
+        const node = document.querySelector(selector);
+        if (node) return node;
+      }
+      return null;
+    };
+    const attachmentSelectors = [
+      'input[type="file"]',
+      '[data-testid*="attachment"]',
+      '[data-testid*="chip"]',
+      '[data-testid*="upload"]',
+      '[data-testid*="file"]',
+      '[aria-label*="Remove"]',
+      '[aria-label*="remove"]',
+    ];
+    const locateComposerRoot = () => {
+      const promptNode = findPromptNode();
+      if (promptNode) {
+        const initial =
+          promptNode.closest('[data-testid*="composer"]') ??
+          promptNode.closest('form') ??
+          promptNode.parentElement ??
+          document.body;
+        let current = initial;
+        let fallback = initial;
+        while (current && current !== document.body) {
+          const hasSend = sendSelectors.some((selector) => current.querySelector(selector));
+          if (hasSend) {
+            fallback = current;
+            const hasAttachment = attachmentSelectors.some((selector) => current.querySelector(selector));
+            if (hasAttachment) return current;
+          }
+          current = current.parentElement;
+        }
+        return fallback ?? initial;
+      }
+      return document.querySelector('form') ?? document.body;
+    };
+    const composerRoot = locateComposerRoot() ?? document.body;
+
+    const attachmentMatch = ['[data-testid*="attachment"]','[data-testid*="chip"]','[data-testid*="upload"]','[data-testid*="file"]'].some((selector) =>
+      Array.from(composerRoot.querySelectorAll(selector)).some(matchNode),
     );
     if (attachmentMatch) {
       return { found: true, source: 'attachments' };
@@ -1763,30 +1836,15 @@ export async function waitForAttachmentVisible(
       return { found: true, source: 'remove-button' };
     }
 
-    const cardTexts = Array.from(document.querySelectorAll('[aria-label*="Remove"]')).map((btn) =>
+    const cardTexts = Array.from(composerRoot.querySelectorAll('[aria-label*="Remove"]')).map((btn) =>
       btn?.parentElement?.parentElement?.innerText?.toLowerCase?.() ?? '',
     );
     if (cardTexts.some((text) => text.includes(normalized) || (normalizedNoExt.length >= 6 && text.includes(normalizedNoExt)))) {
       return { found: true, source: 'attachment-cards' };
     }
 
     const countRegex = /(?:^|\\b)(\\d+)\\s+(?:files?|attachments?)\\b/;
-    const fileCountNodes = (() => {
-      const nodes = [];
-      const seen = new Set();
-      const add = (node) => {
-        if (!node || seen.has(node)) return;
-        seen.add(node);
-        nodes.push(node);
-      };
-      const root = composerRoot;
-      const localNodes = root ? Array.from(root.querySelectorAll('button,span,div,[aria-label],[title]')) : [];
-      for (const node of localNodes) add(node);
-      for (const node of Array.from(document.querySelectorAll('button,span,div,[aria-label],[title]'))) {
-        add(node);
-      }
-      return nodes;
-    })();
+    const fileCountNodes = Array.from(composerRoot.querySelectorAll('button,span,div,[aria-label],[title]'));
     let fileCount = 0;
     for (const node of fileCountNodes) {
       if (!(node instanceof HTMLElement)) continue;
diff --git a/src/browser/actions/navigation.ts b/src/browser/actions/navigation.ts
@@ -7,6 +7,48 @@ import {
 import { delay } from '../utils.js';
 import { logDomFailure } from '../domDebug.js';
 
+export function installJavaScriptDialogAutoDismissal(
+  Page: ChromeClient['Page'],
+  logger: BrowserLogger,
+): () => void {
+  type DialogEvent = { type?: string; message?: string };
+  const pageAny = Page as unknown as {
+    on?: (event: string, listener: (params: DialogEvent) => void) => void;
+    off?: (event: string, listener: (params: DialogEvent) => void) => void;
+    removeListener?: (event: string, listener: (params: DialogEvent) => void) => void;
+    handleJavaScriptDialog?: (params: { accept: boolean; promptText?: string }) => Promise<void>;
+  };
+
+  if (typeof pageAny.on !== 'function' || typeof pageAny.handleJavaScriptDialog !== 'function') {
+    return () => {};
+  }
+
+  const handler = async (params: DialogEvent) => {
+    const type = typeof params?.type === 'string' ? params.type : 'unknown';
+    const message = typeof params?.message === 'string' ? params.message : '';
+    logger(`[nav] dismissing JS dialog (${type})${message ? `: ${message.slice(0, 140)}` : ''}`);
+    try {
+      await pageAny.handleJavaScriptDialog?.({ accept: true, promptText: '' });
+    } catch (error) {
+      const msg = error instanceof Error ? error.message : String(error);
+      logger(`[nav] failed to dismiss JS dialog: ${msg}`);
+    }
+  };
+
+  pageAny.on('javascriptDialogOpening', handler);
+  return () => {
+    try {
+      pageAny.off?.('javascriptDialogOpening', handler);
+    } catch {
+      try {
+        pageAny.removeListener?.('javascriptDialogOpening', handler);
+      } catch {
+        // ignore
+      }
+    }
+  };
+}
+
 export async function navigateToChatGPT(
   Page: ChromeClient['Page'],
   Runtime: ChromeClient['Runtime'],
diff --git a/src/browser/index.ts b/src/browser/index.ts
@@ -19,6 +19,7 @@ import {
   ensureNotBlocked,
   ensureLoggedIn,
   ensurePromptReady,
+  installJavaScriptDialogAutoDismissal,
   ensureModelSelection,
   submitPrompt,
   clearPromptComposer,
@@ -179,6 +180,7 @@ export async function runBrowserMode(options: BrowserRunOptions): Promise<Browse
   let runStatus: 'attempted' | 'complete' = 'attempted';
   let connectionClosedUnexpectedly = false;
   let stopThinkingMonitor: (() => void) | null = null;
+  let removeDialogHandler: (() => void) | null = null;
   let appliedCookies = 0;
 
   try {
@@ -211,6 +213,7 @@ export async function runBrowserMode(options: BrowserRunOptions): Promise<Browse
       domainEnablers.push(DOM.enable());
     }
     await Promise.all(domainEnablers);
+    removeDialogHandler = installJavaScriptDialogAutoDismissal(Page, logger);
     if (!manualLogin) {
       await Network.clearBrowserCookies();
     }
@@ -429,7 +432,7 @@ export async function runBrowserMode(options: BrowserRunOptions): Promise<Browse
           const attachment = submissionAttachments[attachmentIndex];
           logger(`Uploading attachment: ${attachment.displayPath}`);
           const uiConfirmed = await uploadAttachmentFile(
-            { runtime: Runtime, dom: DOM },
+            { runtime: Runtime, dom: DOM, input: Input },
             attachment,
             logger,
             { expectedCount: attachmentIndex + 1 },
@@ -756,6 +759,7 @@ export async function runBrowserMode(options: BrowserRunOptions): Promise<Browse
     } catch {
       // ignore
     }
+    removeDialogHandler?.();
     removeTerminationHooks?.();
     if (!effectiveKeepBrowser) {
       if (!connectionClosedUnexpectedly) {
@@ -967,6 +971,7 @@ async function runRemoteBrowserMode(
   let answerHtml = '';
   let connectionClosedUnexpectedly = false;
   let stopThinkingMonitor: (() => void) | null = null;
+  let removeDialogHandler: (() => void) | null = null;
 
   try {
     const connection = await connectToRemoteChrome(host, port, logger, config.url);
@@ -984,6 +989,7 @@ async function runRemoteBrowserMode(
       domainEnablers.push(DOM.enable());
     }
     await Promise.all(domainEnablers);
+    removeDialogHandler = installJavaScriptDialogAutoDismissal(Page, logger);
 
     // Skip cookie sync for remote Chrome - it already has cookies
     logger('Skipping cookie sync for remote Chrome (using existing session)');
@@ -1293,6 +1299,7 @@ async function runRemoteBrowserMode(
     } catch {
       // ignore
     }
+    removeDialogHandler?.();
     await closeRemoteChromeTarget(host, port, remoteTargetId ?? undefined, logger);
     // Don't kill remote Chrome - it's not ours to manage
     const totalSeconds = (Date.now() - startedAt) / 1000;
diff --git a/src/browser/pageActions.ts b/src/browser/pageActions.ts
@@ -4,6 +4,7 @@ export {
   ensureNotBlocked,
   ensureLoggedIn,
   ensurePromptReady,
+  installJavaScriptDialogAutoDismissal,
 } from './actions/navigation.js';
 export { ensureModelSelection } from './actions/modelSelection.js';
 export { submitPrompt, clearPromptComposer } from './actions/promptComposer.js';
