browsertrack 0.2.2 → 0.2.3

package/dist/core/index.d.ts

@@ -72,12 +72,19 @@ interface SelectorOptions {
     maxClasses?: number;
     maxOuterHTMLLength?: number;
     maxInnerTextLength?: number;
+    maxParentDepth?: number;
 }
 /**
  * Builds a clean, human-readable semantic selector for a DOM element.
- * Prioritizes data-testid/data-test, id, semantic tag + specific class, or concise parent path.
+ * Prioritizes data-testid/data-component, id, semantic tag + curated class, aria/role, or concise unique parent path.
  */
 declare function getSemanticSelector(element: HTMLElement | Element, options?: SelectorOptions): string;
+/**
+ * If an element under the cursor is an inline or leaf formatting element
+ * (e.g. svg, path, i, b, strong, or an inner span without attributes)
+ * inside an interactive container or component, resolves to the parent container.
+ */
+declare function resolveMeaningfulTarget(element: HTMLElement | Element): HTMLElement;
 /**
  * Truncates string to specified max length with ellipsis
  */
@@ -106,4 +113,4 @@ declare function safeExecute<T>(fn: () => T, fallback: T, onError?: (err: any) =
  */
 declare function safeAsync<T>(action: Promise<T> | (() => Promise<T>), fallback: T, onError?: (err: any) => void): Promise<T>;
 
-export { BROWSER_SECURITY_RULES, type FingerprintInput, REDACTED_PLACEHOLDER, SENSITIVE_KEY_PATTERNS, SENSITIVE_QUERY_PARAMS, type SelectorOptions, computeFingerprint, extractSourceFromStack, getSemanticSelector, isSensitiveKey, normalizeErrorMessage, normalizeSourceFile, redactHeaders, redactSensitiveData, redactUrl, safeAsync, safeExecute, safeJsonParse, safeJsonStringify, truncate };
+export { BROWSER_SECURITY_RULES, type FingerprintInput, REDACTED_PLACEHOLDER, SENSITIVE_KEY_PATTERNS, SENSITIVE_QUERY_PARAMS, type SelectorOptions, computeFingerprint, extractSourceFromStack, getSemanticSelector, isSensitiveKey, normalizeErrorMessage, normalizeSourceFile, redactHeaders, redactSensitiveData, redactUrl, resolveMeaningfulTarget, safeAsync, safeExecute, safeJsonParse, safeJsonStringify, truncate };

package/dist/core/index.js

@@ -12,6 +12,7 @@ import {
   redactHeaders,
   redactSensitiveData,
   redactUrl,
+  resolveMeaningfulTarget,
   safeAsync,
   safeExecute,
   safeJsonParse,
@@ -19,7 +20,7 @@ import {
   standardRules,
   truncate,
   visulimaRedact
-} from "../chunk-QRZ57ME3.js";
+} from "../chunk-ONPW7AYL.js";
 export {
   BROWSER_SECURITY_RULES,
   REDACTED_PLACEHOLDER,
@@ -34,6 +35,7 @@ export {
   redactHeaders,
   redactSensitiveData,
   redactUrl,
+  resolveMeaningfulTarget,
   safeAsync,
   safeExecute,
   safeJsonParse,

package/dist/daemon/index.js

@@ -11,8 +11,8 @@ import {
   createHttpHandler,
   getDaemonConfig,
   setupWebSocketServer
-} from "../chunk-AYSVE6NG.js";
-import "../chunk-QRZ57ME3.js";
+} from "../chunk-G5CIZSQM.js";
+import "../chunk-ONPW7AYL.js";
 export {
   BrowserTrackDaemon,
   IncidentEngine,

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 export { B as Breadcrumb, C as CaptureElementParams, a as CaptureElementResult, b as ClientCommand, c as ClientEventMessage, d as CommandResponse, e as CommandType, f as ComponentSourceInfo, g as ConsoleEvent, h as ConsoleLevel, D as DOMRectJson, E as ElementContext, i as ElementStyleResult, j as ElementSummary, k as EventType, H as HelloMessage, N as NavigateParams, l as NavigationEvent, m as NetworkEvent, n as NoteStatus, o as NoteTarget, p as NoteType, q as NoteVerificationResult, O as OverflowCheckResult, P as PageStateResult, Q as QueryElementParams, r as QueryElementResult, R as RegionContext, s as ReloadParams, t as RuntimeErrorEvent, S as ScenarioDetail, u as ScenarioOverview, v as ScrollContext, V as ViewportContext, w as VisualNote } from './commands-fjuqKzkm.js';
 export { I as Incident, a as IncidentOccurrence, b as IncidentSeverity, c as IncidentSource, d as IncidentStatus, P as ProbeResult, e as ProbeType, f as Project, S as Session, V as VerificationProbe, g as VerificationRecipe, h as VerificationResult } from './projects-DB7S312i.js';
-export { BROWSER_SECURITY_RULES, FingerprintInput, REDACTED_PLACEHOLDER, SENSITIVE_KEY_PATTERNS, SENSITIVE_QUERY_PARAMS, SelectorOptions, computeFingerprint, extractSourceFromStack, getSemanticSelector, isSensitiveKey, normalizeErrorMessage, normalizeSourceFile, redactHeaders, redactSensitiveData, redactUrl, safeAsync, safeExecute, safeJsonParse, safeJsonStringify, truncate } from './core/index.js';
+export { BROWSER_SECURITY_RULES, FingerprintInput, REDACTED_PLACEHOLDER, SENSITIVE_KEY_PATTERNS, SENSITIVE_QUERY_PARAMS, SelectorOptions, computeFingerprint, extractSourceFromStack, getSemanticSelector, isSensitiveKey, normalizeErrorMessage, normalizeSourceFile, redactHeaders, redactSensitiveData, redactUrl, resolveMeaningfulTarget, safeAsync, safeExecute, safeJsonParse, safeJsonStringify, truncate } from './core/index.js';
 export { BrowserTrackClient, getClient, init as initClient } from './client/index.js';
 export { BrowserTrackDaemon, createDaemon } from './daemon/index.js';
-export { c as createMcpServer } from './server-DjV7RWQM.js';
+export { c as createMcpServer } from './server-BRG-RQQP.js';
 export { Rules, standardRules, redact as visulimaRedact } from '@visulima/redact';
 import './engine-CmchnMDq.js';
 import 'ws';

package/dist/index.js

@@ -2,14 +2,14 @@ import {
   BrowserTrackClient,
   getClient,
   init
-} from "./chunk-4HRLW6YF.js";
+} from "./chunk-PG4JJDCV.js";
 import {
   createMcpServer
-} from "./chunk-TWEYRBDU.js";
+} from "./chunk-5NR5K3ER.js";
 import {
   BrowserTrackDaemon,
   createDaemon
-} from "./chunk-AYSVE6NG.js";
+} from "./chunk-G5CIZSQM.js";
 import {
   BROWSER_SECURITY_RULES,
   REDACTED_PLACEHOLDER,
@@ -24,6 +24,7 @@ import {
   redactHeaders,
   redactSensitiveData,
   redactUrl,
+  resolveMeaningfulTarget,
   safeAsync,
   safeExecute,
   safeJsonParse,
@@ -31,7 +32,7 @@ import {
   standardRules,
   truncate,
   visulimaRedact
-} from "./chunk-QRZ57ME3.js";
+} from "./chunk-ONPW7AYL.js";
 export {
   BROWSER_SECURITY_RULES,
   BrowserTrackClient,
@@ -52,6 +53,7 @@ export {
   redactHeaders,
   redactSensitiveData,
   redactUrl,
+  resolveMeaningfulTarget,
   safeAsync,
   safeExecute,
   safeJsonParse,

package/dist/mcp/index.d.ts

@@ -1,5 +1,5 @@
 import { Tool } from '@modelcontextprotocol/sdk/types.js';
-export { M as McpContext, a as McpServerOptions, c as createMcpServer, h as handleToolCall, i as isDaemonRunning } from '../server-DjV7RWQM.js';
+export { M as McpContext, a as McpServerOptions, c as createMcpServer, h as handleToolCall, i as isDaemonRunning } from '../server-BRG-RQQP.js';
 import '@modelcontextprotocol/sdk/server/index.js';
 import '../engine-CmchnMDq.js';
 import '../commands-fjuqKzkm.js';

package/dist/mcp/index.js

@@ -3,9 +3,9 @@ import {
   createMcpServer,
   handleToolCall,
   isDaemonRunning
-} from "../chunk-TWEYRBDU.js";
-import "../chunk-AYSVE6NG.js";
-import "../chunk-QRZ57ME3.js";
+} from "../chunk-5NR5K3ER.js";
+import "../chunk-G5CIZSQM.js";
+import "../chunk-ONPW7AYL.js";
 export {
   TOOLS,
   createMcpServer,

package/dist/{server-DjV7RWQM.d.ts → server-BRG-RQQP.d.ts}

@@ -7,6 +7,7 @@ interface McpContext {
     verificationEngine?: VerificationEngine;
     noteVerificationEngine?: NoteVerificationEngine;
     daemonUrl?: string;
+    daemonInitPromise?: Promise<void>;
 }
 declare function handleToolCall(name: string, args: any, ctx: McpContext): Promise<any>;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "browsertrack",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Local browser diagnostics + MCP bridge for coding agents",
   "type": "module",
   "main": "./dist/index.js",

package/packages/client/src/notes/inspector.ts

@@ -1,5 +1,5 @@
 import type { ElementContext, NoteTarget, RegionContext, VisualNote } from '../../../core/src/index.js';
-import { getSemanticSelector, truncate } from '../../../core/src/index.js';
+import { getSemanticSelector, resolveMeaningfulTarget, truncate } from '../../../core/src/index.js';
 import type { ScreenshotDriver } from '../screenshot/driver.js';
 import type { WebSocketTransport } from '../transport/websocket.js';
 import { shouldHideUIFromUrl } from '../config.js';
@@ -65,6 +65,7 @@ export class NoteInspector {
   private savedNotes: VisualNote[] = [];
   private showMarkers = true;
   private isHidden = false;
+  private isToolbarCollapsed = false;
   private cleanups: (() => void)[] = [];
 
   constructor(transport: WebSocketTransport, screenshotDriver: ScreenshotDriver, options: InspectorOptions = {}) {
@@ -73,6 +74,11 @@ export class NoteInspector {
     const hiddenByQuery = shouldHideUIFromUrl(options.hideQueryParam);
     this.isHidden = options.hidden === true || hiddenByQuery;
     this.showMarkers = options.showBadges !== false && !this.isHidden;
+    try {
+      if (typeof window !== 'undefined' && window.sessionStorage) {
+        this.isToolbarCollapsed = window.sessionStorage.getItem('bt_toolbar_collapsed') === 'true';
+      }
+    } catch {}
     this.options = {
       shortcut: 'Alt+Click',
       maskSelectors: ['input[type="password"]', '[data-sensitive]'],
@@ -224,11 +230,28 @@ export class NoteInspector {
       // Styles for highlight overlay, region drag box, markers, floating toolbar and modals
       const style = document.createElement('style');
       style.textContent = `
-        :host {
-          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-          color-scheme: dark;
+        @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
+
+        :host, :host *, :host *::before, :host *::after {
+          box-sizing: border-box;
           -webkit-font-smoothing: antialiased;
           -moz-osx-font-smoothing: grayscale;
+          text-rendering: optimizeLegibility;
+        }
+
+        :host {
+          font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+          color-scheme: dark;
+          letter-spacing: -0.012em;
+        }
+
+        button, input, textarea, select {
+          font-family: inherit;
+          letter-spacing: inherit;
+        }
+
+        code, pre, kbd, .bt-mono, .bt-badge, .bt-region-badge, .bt-target-pill, .bt-component-pill {
+          font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
         }
         
         /* 1. Element Highlight Overlay */
@@ -462,7 +485,7 @@ export class NoteInspector {
           pointer-events: auto;
           z-index: 2147483646;
           user-select: none;
-          transition: all 0.2s ease;
+          transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
         }
 
         .bt-toolbar-btn {
@@ -523,6 +546,86 @@ export class NoteInspector {
           margin: 0 2px;
         }
 
+        .bt-toolbar-collapse-btn {
+          background: transparent;
+          border: none;
+          color: #64748b;
+          font-size: 11px;
+          font-weight: 700;
+          padding: 6px 8px;
+          border-radius: 20px;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          transition: all 0.15s ease;
+          font-family: inherit;
+        }
+
+        .bt-toolbar-collapse-btn:hover {
+          background: #1e293b;
+          color: #f8fafc;
+        }
+
+        /* Collapsed Toolbar State */
+        .bt-toolbar.bt-toolbar-collapsed {
+          padding: 0;
+          background: transparent;
+          border: none;
+          box-shadow: none;
+        }
+
+        .bt-toolbar.bt-toolbar-collapsed .bt-toolbar-btn,
+        .bt-toolbar.bt-toolbar-collapsed .bt-toolbar-divider,
+        .bt-toolbar.bt-toolbar-collapsed .bt-toolbar-collapse-btn {
+          display: none !important;
+        }
+
+        .bt-toolbar-trigger {
+          display: none;
+          background: #0f172a;
+          border: 1px solid #334155;
+          border-radius: 30px;
+          padding: 6px 14px;
+          color: #38bdf8;
+          font-size: 12px;
+          font-weight: 600;
+          cursor: pointer;
+          align-items: center;
+          gap: 8px;
+          box-shadow: 0 10px 25px -3px rgba(0,0,0,0.6), 0 4px 6px -4px rgba(0,0,0,0.4);
+          transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+          font-family: inherit;
+          user-select: none;
+        }
+
+        .bt-toolbar.bt-toolbar-collapsed .bt-toolbar-trigger {
+          display: inline-flex;
+        }
+
+        .bt-toolbar-trigger:hover {
+          background: #1e293b;
+          color: #ffffff;
+          transform: translateY(-2px);
+          box-shadow: 0 12px 28px -3px rgba(0,0,0,0.7);
+          border-color: #38bdf8;
+        }
+
+        .bt-pulse-dot {
+          width: 7px;
+          height: 7px;
+          border-radius: 50%;
+          background: #38bdf8;
+          box-shadow: 0 0 8px #38bdf8;
+          display: inline-block;
+          animation: bt-dot-pulse 2s infinite;
+        }
+
+        @keyframes bt-dot-pulse {
+          0%, 100% { opacity: 1; transform: scale(1); }
+          50% { opacity: 0.4; transform: scale(0.85); }
+        }
+
         /* 5. Modals & Popover Card */
         .bt-modal-backdrop {
           position: fixed;
@@ -946,8 +1049,13 @@ export class NoteInspector {
     if (!this.shadowRoot || this.toolbarElement) return;
 
     this.toolbarElement = document.createElement('div');
-    this.toolbarElement.className = 'bt-toolbar';
+    this.toolbarElement.className = `bt-toolbar ${this.isToolbarCollapsed ? 'bt-toolbar-collapsed' : ''}`;
     this.toolbarElement.innerHTML = `
+      <button class="bt-toolbar-trigger" id="bt-toolbar-expand" title="Expand BrowserTrack toolbar (Alt+T)">
+        <span class="bt-pulse-dot"></span>
+        <span>⚡ BrowserTrack</span>
+        <span class="bt-count-pill" id="bt-notes-count-collapsed">0</span>
+      </button>
       <button class="bt-toolbar-btn" id="bt-mode-element" title="Inspect element (or hold Alt+Click)">
         <span>🎯</span> Element
       </button>
@@ -965,14 +1073,30 @@ export class NoteInspector {
       <button class="bt-toolbar-btn active" id="bt-toggle-notes" title="Toggle visible note markers on screen">
         <span>📌</span> Notes <span class="bt-count-pill" id="bt-notes-count">0</span>
       </button>
+      <div class="bt-toolbar-divider"></div>
+      <button class="bt-toolbar-collapse-btn" id="bt-toolbar-collapse" title="Collapse toolbar (Alt+T)">
+        <span>❯</span>
+      </button>
     `;
 
+    const btnExpand = this.toolbarElement.querySelector('#bt-toolbar-expand') as HTMLButtonElement;
+    const btnCollapse = this.toolbarElement.querySelector('#bt-toolbar-collapse') as HTMLButtonElement;
     const btnElement = this.toolbarElement.querySelector('#bt-mode-element') as HTMLButtonElement;
     const btnRegion = this.toolbarElement.querySelector('#bt-mode-region') as HTMLButtonElement;
     const btnPage = this.toolbarElement.querySelector('#bt-mode-page') as HTMLButtonElement;
     const btnFlow = this.toolbarElement.querySelector('#bt-mode-flow') as HTMLButtonElement;
     const btnToggleNotes = this.toolbarElement.querySelector('#bt-toggle-notes') as HTMLButtonElement;
 
+    btnExpand.onclick = (e: MouseEvent) => {
+      e.stopPropagation();
+      this.toggleToolbarCollapse(false);
+    };
+
+    btnCollapse.onclick = (e: MouseEvent) => {
+      e.stopPropagation();
+      this.toggleToolbarCollapse(true);
+    };
+
     btnElement.onclick = (e: MouseEvent) => {
       e.stopPropagation();
       this.setMode(this.activeMode === 'element' ? 'idle' : 'element');
@@ -1007,6 +1131,17 @@ export class NoteInspector {
     this.shadowRoot.appendChild(this.toolbarElement);
   }
 
+  public toggleToolbarCollapse(force?: boolean): void {
+    if (!this.toolbarElement) return;
+    this.isToolbarCollapsed = typeof force === 'boolean' ? force : !this.isToolbarCollapsed;
+    this.toolbarElement.classList.toggle('bt-toolbar-collapsed', this.isToolbarCollapsed);
+    try {
+      if (typeof window !== 'undefined' && window.sessionStorage) {
+        window.sessionStorage.setItem('bt_toolbar_collapsed', String(this.isToolbarCollapsed));
+      }
+    } catch {}
+  }
+
   private updateToolbarState(): void {
     if (!this.toolbarElement) return;
 
@@ -1034,11 +1169,15 @@ export class NoteInspector {
 
   private updateToolbarCount(): void {
     if (!this.toolbarElement) return;
+    const openCount = this.savedNotes.filter((n) => n.status === 'OPEN').length;
     const countEl = this.toolbarElement.querySelector('#bt-notes-count');
     if (countEl) {
-      const openCount = this.savedNotes.filter((n) => n.status === 'OPEN').length;
       countEl.textContent = String(openCount);
     }
+    const countCollapsedEl = this.toolbarElement.querySelector('#bt-notes-count-collapsed');
+    if (countCollapsedEl) {
+      countCollapsedEl.textContent = String(openCount);
+    }
   }
 
   public renderMarkers(): void {
@@ -1108,6 +1247,14 @@ export class NoteInspector {
 
       const rect = targetEl ? targetEl.getBoundingClientRect() : note.target?.boundingRect;
       if (rect) {
+        // If element is completely scrolled out of view, do not display or pin it to corner
+        const isOffscreen =
+          targetEl &&
+          (rect.bottom < 0 || rect.top > window.innerHeight || rect.right < 0 || rect.left > window.innerWidth);
+        if (isOffscreen) {
+          return;
+        }
+
         const pin = document.createElement('div');
         pin.className = markerClass;
         pin.setAttribute('data-note-id', note.id);
@@ -1361,7 +1508,8 @@ export class NoteInspector {
         }
 
         if (e.altKey || this.activeMode === 'element') {
-          const target = document.elementFromPoint(e.clientX, e.clientY) as HTMLElement | null;
+          const rawTarget = document.elementFromPoint(e.clientX, e.clientY) as HTMLElement | null;
+          const target = rawTarget ? resolveMeaningfulTarget(rawTarget) : null;
           if (target && target !== this.container && !this.container?.contains(target)) {
             this.hoveredElement = target;
             this.updateHighlight(target);
@@ -1394,7 +1542,8 @@ export class NoteInspector {
           e.preventDefault();
           e.stopPropagation();
 
-          const target = (this.hoveredElement || document.elementFromPoint(e.clientX, e.clientY)) as HTMLElement | null;
+          const rawTarget = (this.hoveredElement || document.elementFromPoint(e.clientX, e.clientY)) as HTMLElement | null;
+          const target = rawTarget ? resolveMeaningfulTarget(rawTarget) : null;
           if (target && target !== this.container && !this.container?.contains(target)) {
             this.selectedElement = target;
             this.openNoteEditor(target, 'element');
@@ -1408,9 +1557,15 @@ export class NoteInspector {
       }
     };
 
-    // 3. Key handling: Escape cancels active modes, Alt release hides highlight
+    // 3. Key handling: Escape cancels active modes, Alt release hides highlight, Alt+T toggles toolbar
     const onKeyDown = (e: KeyboardEvent) => {
       try {
+        if (e.altKey && (e.key === 't' || e.key === 'T')) {
+          e.preventDefault();
+          this.toggleToolbarCollapse();
+          return;
+        }
+
         if (e.key === 'Escape') {
           if (this.cardOverlay && this.cardOverlay.parentElement && this.shadowRoot) {
             this.shadowRoot.removeChild(this.cardOverlay);
@@ -1542,6 +1697,11 @@ export class NoteInspector {
           this.regionBox.appendChild(badge);
         }
         badge.textContent = `Region: ${Math.round(width)} × ${Math.round(height)} px`;
+        if (top < 32) {
+          badge.style.top = '4px';
+        } else {
+          badge.style.top = '-26px';
+        }
       };
 
       this.regionOverlay.onmouseup = (e: MouseEvent) => {
@@ -1610,6 +1770,22 @@ export class NoteInspector {
     const selector = getSemanticSelector(el);
     const label = this.activeScenario ? `🎬 Step ${this.activeScenario.stepNumber} · ${selector}` : selector;
     badge.textContent = `${label} (${Math.round(rect.width)} × ${Math.round(rect.height)} px)`;
+
+    // Viewport-aware badge clamping: flip below element if near top of window
+    if (rect.top < 32) {
+      badge.style.top = `${rect.height + 4}px`;
+    } else {
+      badge.style.top = '-26px';
+    }
+
+    // Align to right edge if overflowing the right viewport boundary
+    if (rect.left + 260 > window.innerWidth) {
+      badge.style.left = 'auto';
+      badge.style.right = '0';
+    } else {
+      badge.style.left = '0';
+      badge.style.right = 'auto';
+    }
   }
 
   private hideHighlight(): void {
@@ -1797,10 +1973,13 @@ export class NoteInspector {
       if (btnSave) btnSave.disabled = true;
       if (btnFinishFlow) btnFinishFlow.disabled = true;
 
+      // Close modal immediately for instant, snappy user experience
+      closeModal();
+
       try {
         await options.onSave(message, action);
-      } finally {
-        closeModal();
+      } catch {
+        this.showToast('Failed to save note', '⚠️');
       }
     };
 
@@ -1835,11 +2014,15 @@ export class NoteInspector {
     const rect = targetEl.getBoundingClientRect();
     const selector = noteType === 'page' ? 'body' : getSemanticSelector(targetEl);
 
-    // 1. Capture screenshot via screenshotDriver
+    // 1. Capture screenshot via screenshotDriver with fast timeout protection
     let screenshotDataUrl: string | undefined;
     try {
-      const snap = await this.screenshotDriver.captureElement(targetEl);
-      if (snap.ok) {
+      const snapPromise = this.screenshotDriver.captureElement(targetEl);
+      const timeoutPromise = new Promise<{ ok: boolean; dataUrl?: string }>((resolve) =>
+        setTimeout(() => resolve({ ok: false }), 800)
+      );
+      const snap = await Promise.race([snapPromise, timeoutPromise]);
+      if (snap && snap.ok && snap.dataUrl) {
         screenshotDataUrl = snap.dataUrl;
       }
     } catch {
@@ -1910,12 +2093,20 @@ export class NoteInspector {
     message: string,
     scenario?: { scenarioId?: string; stepNumber?: number; scenarioTitle?: string }
   ): Promise<void> {
-    // 1. Capture full page screenshot and crop to region
+    // 1. Fast regional capture: capture element under region center rather than heavy whole-document serialization
     let screenshotDataUrl: string | undefined;
     try {
-      const snap = await this.screenshotDriver.captureElement(document.body || document.documentElement);
-      if (snap.ok && snap.dataUrl) {
-        screenshotDataUrl = await this.cropDataUrl(snap.dataUrl, region);
+      const centerX = region.x + region.width / 2;
+      const centerY = region.y + region.height / 2;
+      const targetElement = (document.elementFromPoint(centerX, centerY) || document.body) as HTMLElement;
+
+      const snapPromise = this.screenshotDriver.captureElement(targetElement);
+      const timeoutPromise = new Promise<{ ok: boolean; dataUrl?: string }>((resolve) =>
+        setTimeout(() => resolve({ ok: false }), 800)
+      );
+      const snap = await Promise.race([snapPromise, timeoutPromise]);
+      if (snap && snap.ok && snap.dataUrl) {
+        screenshotDataUrl = snap.dataUrl;
       }
     } catch {
       // Defensive