autokap 1.0.7 → 1.0.8

package/dist/element-capture.js

@@ -5,47 +5,15 @@ import { logger } from './logger.js';
 import { getPostHog, DISTINCT_ID } from './posthog.js';
 import { isAbortError, throwIfAborted } from './abort.js';
 import { callVisionCapableModel } from './vision-model.js';
+import { zdrParam } from './provider-config.js';
 const MAX_ELEMENT_ITERATIONS = 8;
 const ELEMENT_CAPTURE_TEMPERATURE = 0;
-function isTransientSearchSelector(selector) {
-    return /\[data-ak-(search|container)-index=/.test(selector);
-}
 export function isLooseElementCaptureRejectionReason(reason) {
     if (!reason)
         return false;
     return /(too loose|too broad|tighten the frame|tighten the crop|significant unrelated surrounding content|large amount of unrelated page|minimal surrounding context|surrounding context|adjacent elements|wrong framing)/i
         .test(reason);
 }
-export function isTagOnlyStructuralSelector(selector) {
-    const normalized = selector.trim();
-    if (!normalized)
-        return false;
-    const usesStructuralPath = /[>+~]/.test(normalized)
-        || /:(first|last|nth)-(child|of-type)/i.test(normalized);
-    if (!usesStructuralPath)
-        return false;
-    const hasStableAnchor = /[#[]/.test(normalized)
-        || /\.[A-Za-z_][A-Za-z0-9_-]*/.test(normalized)
-        || /:has\(/i.test(normalized);
-    if (hasStableAnchor)
-        return false;
-    const segments = normalized
-        .split(/\s*[>+~]\s*/)
-        .map((segment) => segment.trim())
-        .filter(Boolean);
-    if (segments.length === 0)
-        return false;
-    return segments.every((segment) => /^[a-z][a-z0-9-]*(?::(first|last|nth)-(child|of-type)(\([^)]+\))?)?$/i
-        .test(segment));
-}
-export function shouldBlockUngroundedStructuralSelector(params) {
-    if (!params.verifierRejectedAsTooLoose)
-        return false;
-    if (!isTagOnlyStructuralSelector(params.selector))
-        return false;
-    const grounded = new Set(params.groundedSelectors);
-    return !grounded.has(params.selector);
-}
 export function outscaleAddsPadding(outscale) {
     if (!outscale)
         return false;
@@ -72,65 +40,6 @@ function buildTightOutscale(outscale) {
 export function buildVerificationOutscale(outscale) {
     return buildTightOutscale(outscale ?? {});
 }
-function getOrCreateSelectorEvidence(selectorEvidence, selector) {
-    const existing = selectorEvidence.get(selector);
-    if (existing)
-        return existing;
-    const created = {
-        observedAsInteractive: false,
-        directQueries: new Set(),
-        containerQueries: new Set(),
-    };
-    selectorEvidence.set(selector, created);
-    return created;
-}
-export function shouldAcceptDomCorroboratedSelector(params) {
-    if (!params.verifierRejectedAsTooLoose)
-        return false;
-    if (params.looseFailureCount < 2)
-        return false;
-    if (!params.validation.boundingBox)
-        return false;
-    if (!params.observedAsInteractive)
-        return false;
-    const { width, height } = params.validation.boundingBox;
-    if (width <= 0 || height <= 0)
-        return false;
-    if (params.viewport) {
-        const bboxArea = width * height;
-        const viewportArea = params.viewport.width * params.viewport.height;
-        if (viewportArea > 0 && bboxArea > viewportArea * 0.25) {
-            return false;
-        }
-    }
-    return params.containerQueryCount >= 1 || params.directQueryCount >= 2;
-}
-export function computeElementCaptureDomSignature(params) {
-    const sample = params.interactiveElements
-        .slice(0, 40)
-        .map((el) => [
-        el.index,
-        el.tag,
-        el.role,
-        (el.text || '').slice(0, 32).replace(/\s+/g, ' '),
-        el.selector,
-        el.visibilityState,
-    ].join(':'))
-        .join('|');
-    return `${params.currentUrl}#${params.interactiveElements.length}#${sample}`;
-}
-export function shouldAllowSearchRefresh(params) {
-    if (!params.cached)
-        return true;
-    if (params.cached.domSignature !== params.domSignature)
-        return true;
-    if (params.lastFailedTransientSelector
-        && params.cached.selectors.includes(params.lastFailedTransientSelector)
-        && params.cached.hasTransientSelectors) {
-        return true;
-    }
-    return false;
-}
 const elementVerificationTools = [
     {
         type: 'function',
@@ -150,6 +59,24 @@ const elementVerificationTools = [
             },
         },
     },
+    {
+        type: 'function',
+        function: {
+            name: 'accept_with_note',
+            description: 'Approve the capture with a minor note. Use when the correct element IS shown and fully visible, but the framing includes some extra surrounding context that does not materially affect capture quality.',
+            parameters: {
+                type: 'object',
+                properties: {
+                    reason: {
+                        type: 'string',
+                        description: 'Short note about the minor framing issue.',
+                    },
+                },
+                required: ['reason'],
+                additionalProperties: false,
+            },
+        },
+    },
     {
         type: 'function',
         function: {
@@ -177,7 +104,7 @@ async function verifyElementCapture(client, model, element, screenshot, assessme
     const messages = [
         {
             role: 'system',
-            content: 'You verify isolated UI element screenshots. The screenshot shows EXACTLY the pixel region captured by the element\'s CSS selector — every pixel visible is INSIDE that element\'s bounding box. Nothing outside the element is included.\n\nApprove if the screenshot shows the correct requested component, fully visible, and not clipped at the edges. Reject only for these reasons:\n1. The element is clipped — a side is cut off by the image edges\n2. The wrong element was captured — the content clearly does not match the description at all\n3. Only a tiny fragment is captured — e.g., just a heading when a full card was requested\n4. An overlay or modal is obscuring the element\n\nDo NOT reject for any of the following — these are correct captures:\n- The screenshot contains what looks like multiple cards, sections, or UI components side by side — they are INTERNAL layout of the captured element (e.g., a preview carousel, a thumbnail grid, embedded mockups)\n- The screenshot shows pricing cards, phone mockups, app screenshots, or promotional content — these are screenshot previews INSIDE the component\n- Content appears "to the left", "to the right", "above", or "below" other content — spatial arrangement is the element\'s own layout, not neighboring page elements\n- The element has a complex internal structure with multiple visual sections\n\nCRITICAL: Since the screenshot IS the element\'s exact bounding box, there is no such thing as "adjacent cards" or "neighboring elements" visible in this image. What looks like a neighboring card is an internal preview thumbnail. What looks like surrounding context is internal structure. Only reject if the image edges clip the component or the wrong component is shown entirely.',
+            content: 'You verify isolated UI element screenshots. The screenshot shows EXACTLY the pixel region captured by the element\'s bounding box — every pixel visible is INSIDE that element. Nothing outside the element is included.\n\nYou have THREE tools:\n- **accept_capture** — the correct component is shown, fully visible, well-framed\n- **accept_with_note** — the correct component IS shown and fully visible, but the framing includes some extra surrounding context. Use this instead of rejecting when the target element is clearly present and complete.\n- **retry_capture** — ONLY for serious issues: wrong element entirely, clipped edges, tiny fragment, or overlay obstruction\n\nReject (retry_capture) ONLY for:\n1. The element is clipped — a side is cut off by the image edges\n2. The wrong element was captured — the content clearly does not match the description at all\n3. Only a tiny fragment is captured — e.g., just a heading when a full card was requested\n4. An overlay or modal is obscuring the element\n\nWhen the correct element is visible but framing is slightly loose, use accept_with_note — do NOT reject.\n\nCRITICAL: Since the screenshot IS the element\'s exact bounding box, there is no such thing as "adjacent cards" or "neighboring elements" visible in this image. What looks like a neighboring card is an internal preview thumbnail. What looks like surrounding context is internal structure. Only reject if the image edges clip the component or the wrong component is shown entirely.',
         },
         {
             role: 'user',
@@ -197,9 +124,10 @@ This verification image is the raw element crop before any user-requested outsca
 
 The screenshot IS the captured element — every pixel is inside its bounding box.
 
-Approve if: the correct component is shown, fully visible, not clipped at image edges.
+Use accept_capture if: the correct component is shown, fully visible, well-framed.
+Use accept_with_note if: the correct component IS shown and fully visible, but framing is slightly loose with some extra context. This is still an approval.
 
-Reject ONLY if:
+Use retry_capture ONLY if:
 - a side of the component is clipped by the image boundary
 - the content clearly does not match the description at all (completely wrong element)
 - only a tiny fragment is shown when a full component (card, panel, form) was requested
@@ -208,11 +136,14 @@ Reject ONLY if:
 Do NOT reject because:
 - the element contains screenshot previews, thumbnails, or mockups inside it
 - the internal layout has multiple visual sections that look like separate cards
-- content appears "above", "beside", or "around" other content within the image — this is the element's own internal layout, not neighboring page elements`,
+- content appears "above", "beside", or "around" other content within the image — this is the element's own internal layout, not neighboring page elements
+- the framing is slightly loose but the correct element is clearly present and complete`,
                 },
             ],
         },
     ];
+    let response;
+    let usedModel = model;
     try {
         const visionResult = await callVisionCapableModel({
             primaryModel: model,
@@ -222,43 +153,48 @@ Do NOT reject because:
                 messages,
                 tools: elementVerificationTools,
                 tool_choice: 'required',
-                temperature: ELEMENT_CAPTURE_TEMPERATURE,
+                temperature: 0,
                 max_tokens: 256,
-                provider: { zdr: true },
+                provider: { ...zdrParam() },
             }, { signal }),
+            onFallbackActivated: (m, reason) => logger.info(`Element verification vision fallback: ${m} (reason: ${reason})`),
         });
-        const response = visionResult.result;
-        const usage = {
-            stepNumber,
-            stepType: 'element_capture',
-            generationId: response.id ?? null,
-            modelRequested: model,
-            modelUsed: response.model ?? null,
-            promptTokens: response.usage?.prompt_tokens ?? null,
-            completionTokens: response.usage?.completion_tokens ?? null,
-            totalTokens: response.usage?.total_tokens ?? null,
-            imagesInPrompt: 1,
-        };
-        const toolCall = response.choices?.[0]?.message?.tool_calls?.[0];
-        if (!toolCall || !('function' in toolCall)) {
-            return { verified: false, reason: 'Element verification returned no actionable result', usage };
-        }
-        const args = JSON.parse(toolCall.function.arguments || '{}');
-        if (toolCall.function.name === 'accept_capture') {
-            logger.success(`Element capture verification passed: ${args.reason || 'approved'}`);
-            return { verified: true, reason: args.reason, usage };
-        }
-        const reason = args.reason || 'Element capture was rejected';
-        logger.ai(`Element capture verification failed: ${reason}`);
-        return { verified: false, reason, usage };
+        response = visionResult.result;
+        usedModel = visionResult.model;
     }
     catch (err) {
-        if (isAbortError(err)) {
+        if (isAbortError(err))
             throw err;
-        }
-        logger.error(`Element capture verification failed: ${err.message}`);
-        return { verified: true, reason: 'Verification unavailable', usage: null };
+        logger.error(`Element verification failed: ${err.message}`);
+        return { verified: false, reason: 'Verification service unavailable', usage: null };
+    }
+    const usage = {
+        stepNumber,
+        stepType: 'element_capture',
+        generationId: response.id ?? null,
+        modelRequested: model,
+        modelUsed: response.model ?? usedModel,
+        promptTokens: response.usage?.prompt_tokens ?? null,
+        completionTokens: response.usage?.completion_tokens ?? null,
+        totalTokens: response.usage?.total_tokens ?? null,
+        imagesInPrompt: 1,
+    };
+    const toolCall = response.choices?.[0]?.message?.tool_calls?.[0];
+    if (!toolCall || !('function' in toolCall)) {
+        return { verified: false, reason: 'Verification returned no decision', usage };
+    }
+    const name = toolCall.function.name;
+    let args;
+    try {
+        args = JSON.parse(toolCall.function.arguments);
+    }
+    catch {
+        return { verified: false, reason: 'Verification returned invalid JSON', usage };
     }
+    if (name === 'accept_capture' || name === 'accept_with_note') {
+        return { verified: true, reason: args.reason || undefined, usage };
+    }
+    return { verified: false, reason: args.reason || 'Verifier rejected', usage };
 }
 export async function captureIsolatedElement(browser, element, apiKey, model, options = {}) {
     const { abortSignal, distinctId, fallbackModel, uploadImage } = options;
@@ -274,43 +210,18 @@ export async function captureIsolatedElement(browser, element, apiKey, model, op
     const actionHistory = [];
     const usageLog = [];
     let stepCounter = 0;
-    // Map from query key → top candidate lines (shown again when a duplicate is blocked)
-    const usedSearchQueries = new Map();
-    const selectorEvidence = new Map();
-    const looseFailureCountsBySelector = new Map();
-    let lastFailedTransientSelector = null;
     let lastVerifierRejectedAsTooLoose = false;
-    // Save original viewport to restore after element capture (agent may resize it)
-    const originalViewport = browser.currentPage.viewportSize();
-    const restoreViewport = async () => {
-        const current = browser.currentPage.viewportSize();
-        if (originalViewport && current &&
-            (current.width !== originalViewport.width || current.height !== originalViewport.height)) {
-            await browser.resizeViewport(originalViewport.width, originalViewport.height);
-        }
-    };
+    let looseRejectionCount = 0;
     try {
         for (let iteration = 1; iteration <= MAX_ELEMENT_ITERATIONS; iteration++) {
             throwIfAborted(abortSignal, `Element capture cancelled for "${element.name}".`);
-            // 1. Capture page state (including a screenshot for visual disambiguation)
-            const [accessibilityTree, interactiveElements, simplifiedDOM, screenshotBuf] = await Promise.all([
-                browser.getAccessibilityTree(),
-                browser.getInteractiveElements(),
-                browser.getSimplifiedDOM(),
-                browser.takeScreenshotForAI(),
-            ]);
+            // 1. Capture page state with AKTree
+            const pageState = await browser.getPageState();
+            const screenshotBuf = pageState.cleanScreenshot;
+            const serializedAKTree = pageState.serializedAKTree;
             const screenshotUrl = uploadImage
                 ? await uploadImage(screenshotBuf, 'image/png').catch(() => `data:image/png;base64,${screenshotBuf.toString('base64')}`)
                 : `data:image/png;base64,${screenshotBuf.toString('base64')}`;
-            const domSignature = computeElementCaptureDomSignature({
-                currentUrl: browser.currentPage.url(),
-                interactiveElements,
-            });
-            for (const interactiveElement of interactiveElements) {
-                if (!interactiveElement.selector)
-                    continue;
-                getOrCreateSelectorEvidence(selectorEvidence, interactiveElement.selector).observedAsInteractive = true;
-            }
             // 2. Build messages
             const messages = [
                 { role: 'system', content: buildElementSystemPrompt(element.description) },
@@ -319,20 +230,22 @@ export async function captureIsolatedElement(browser, element, apiKey, model, op
                     content: buildElementIterationMessage({
                         elementName: element.name,
                         elementDescription: element.description,
-                        accessibilityTree,
-                        interactiveElements,
-                        simplifiedDOM,
+                        serializedAKTree,
                         currentUrl: browser.currentPage.url(),
                         iteration,
                         maxIterations: MAX_ELEMENT_ITERATIONS,
                         actionHistory: actionHistory.length > 0 ? actionHistory : undefined,
                         viewport: browser.currentPage.viewportSize() ?? undefined,
-                        forbiddenSearchQueries: usedSearchQueries.size > 0 ? [...usedSearchQueries.keys()] : undefined,
+                        scrollInfo: {
+                            scrollY: pageState.scrollInfo.scrollY,
+                            scrollHeight: pageState.scrollInfo.scrollHeight,
+                            viewportHeight: browser.currentPage.viewportSize()?.height ?? 900,
+                        },
                         screenshotUrl,
                     }),
                 },
             ];
-            // 3. Call LLM (with vision fallback + coercion retry when the model ignores tool_choice: 'required')
+            // 3. Call LLM
             let response;
             let usedModel = model;
             let callMessages = messages;
@@ -350,7 +263,7 @@ export async function captureIsolatedElement(browser, element, apiKey, model, op
                             tool_choice: 'required',
                             temperature: ELEMENT_CAPTURE_TEMPERATURE,
                             max_tokens: 1024,
-                            provider: { zdr: true },
+                            provider: { ...zdrParam() },
                         }, { signal: abortSignal }),
                         onFallbackActivated: (m, reason) => logger.info(`Element capture vision fallback activated: ${m} (reason: ${reason})`),
                     });
@@ -364,7 +277,6 @@ export async function captureIsolatedElement(browser, element, apiKey, model, op
                     if (!assistantContent)
                         break;
                     logger.info(`Model returned text without tool call; coercing (attempt ${coercionAttempt}/${MAX_COERCION_RETRIES})...`);
-                    logger.ai(assistantContent.slice(0, 200));
                     callMessages = [
                         ...callMessages,
                         { role: 'assistant', content: assistantContent },
@@ -387,9 +299,8 @@ export async function captureIsolatedElement(browser, element, apiKey, model, op
                 });
             }
             catch (err) {
-                if (isAbortError(err)) {
+                if (isAbortError(err))
                     throw err;
-                }
                 logger.error(`Element capture API call failed: ${err.message}`);
                 actionHistory.push(`Iteration ${iteration}: API error — ${err.message}`);
                 continue;
@@ -410,336 +321,172 @@ export async function captureIsolatedElement(browser, element, apiKey, model, op
             }
             catch {
                 logger.error(`Invalid JSON in element tool arguments: ${toolCall.function.arguments}`);
-                callMessages = [
-                    ...callMessages,
-                    { role: 'assistant', content: null, tool_calls: [toolCall] },
-                    { role: 'tool', tool_call_id: toolCall.id, content: 'ERROR: Invalid JSON in tool arguments. Please retry with correctly formatted JSON.' },
-                ];
                 continue;
             }
             // 4. Handle tool calls
-            if (name === 'capture_by_selector') {
-                const selector = args.selector;
-                const confidence = args.confidence;
-                const reasoning = args.reasoning;
+            // ── capture(nodeId?) ──
+            if (name === 'capture') {
+                const nodeId = typeof args.nodeId === 'string' ? args.nodeId : undefined;
                 const baseOutscale = element.outscale ?? { padding: element.padding ?? 0 };
-                const groundedSelectors = new Set([
-                    ...interactiveElements.map((entry) => entry.selector).filter((entry) => !!entry),
-                    ...Array.from(usedSearchQueries.values()).flatMap((entry) => entry.selectors),
-                ]);
-                if (shouldBlockUngroundedStructuralSelector({
-                    selector,
-                    groundedSelectors,
-                    verifierRejectedAsTooLoose: lastVerifierRejectedAsTooLoose,
-                })) {
-                    const latestSearchEntries = Array.from(usedSearchQueries.values());
-                    const latestSearch = latestSearchEntries[latestSearchEntries.length - 1];
-                    const candidateHint = latestSearch?.candidateLines.length
-                        ? `\nGrounded candidates from search_text (use one of their sel= values directly):\n${latestSearch.candidateLines.join('\n')}`
-                        : '';
-                    logger.info(`Element "${element.name}": blocking ungrounded structural selector "${selector}" after a loose-crop rejection`);
-                    actionHistory.push(`Iteration ${iteration}: capture_by_selector("${selector}") BLOCKED — after a verifier rejection for loose framing, do NOT invent a tag-only DOM path from <page_dom>. Re-run search_text with distinctive in-card text and use a grounded sel= directly, preferring any ↳ container selector.${candidateHint}`);
+                if (!nodeId) {
+                    // Full page capture — unusual for element capture but handle it
+                    logger.info(`Element "${element.name}": capture() without nodeId — full page`);
+                    const buffer = await browser.takeScreenshot();
+                    const viewport = browser.currentPage.viewportSize();
+                    const { verified, reason: verifyReason, usage } = await verifyElementCapture(client, model, element, buffer, 'Full page capture', ++stepCounter, abortSignal, fallbackModel, uploadImage);
+                    if (usage)
+                        usageLog.push(usage);
+                    if (verified) {
+                        logger.success(`Element "${element.name}" captured (full page)`);
+                        return { element, success: true, buffer, assessment: verifyReason || 'Full page', usage: usageLog };
+                    }
+                    actionHistory.push(`Iteration ${iteration}: capture() full page rejected — ${verifyReason}. Specify a nodeId to crop to the target element.`);
                     continue;
                 }
-                logger.info(`Element "${element.name}": capture_by_selector("${selector}") (confidence: ${confidence.toFixed(2)})`);
-                logger.ai(reasoning);
-                try {
-                    throwIfAborted(abortSignal, `Element capture cancelled for "${element.name}".`);
-                    const verificationOutscale = buildVerificationOutscale(baseOutscale);
-                    const { buffer, validation } = await browser.screenshotBySelector(selector, verificationOutscale);
-                    // Reject captures that are too large (>70% of viewport area) — likely a wrapper, not the target element.
-                    const viewport = browser.currentPage.viewportSize();
-                    if (viewport && validation.boundingBox) {
-                        const bb = validation.boundingBox;
-                        const captureArea = bb.width * bb.height;
-                        const viewportArea = viewport.width * viewport.height;
-                        if (captureArea > viewportArea * 0.7) {
-                            logger.info(`Element "${element.name}": selector "${selector}" covers ${Math.round(captureArea / viewportArea * 100)}% of viewport — too large, rejecting.`);
-                            actionHistory.push(`Iteration ${iteration}: capture_by_selector("${selector}") rejected — element covers >70% of viewport, likely a wrapper not the target component. Use a more specific selector.`);
-                            continue;
-                        }
+                // Resolve nodeId to bounds
+                const entry = await browser.resolveAKNode(nodeId);
+                if (!entry) {
+                    logger.error(`Element "${element.name}": nodeId "${nodeId}" not found in AKTree`);
+                    actionHistory.push(`Iteration ${iteration}: capture("${nodeId}") — node not found. Re-read the AKTree and use a valid nodeId.`);
+                    continue;
+                }
+                logger.info(`Element "${element.name}": capture("${nodeId}") — ${entry.label} ${entry.bounds.w}x${entry.bounds.h}`);
+                // Check area threshold
+                const viewport = browser.currentPage.viewportSize();
+                if (viewport) {
+                    const captureArea = entry.bounds.w * entry.bounds.h;
+                    const viewportArea = viewport.width * viewport.height;
+                    const isLargeComponent = /\b(hero|header|footer|navigation|navbar|banner|full.?width|feature.?section|testimonial|above.the.fold)\b/i.test(element.description);
+                    const areaThreshold = isLargeComponent ? 0.85 : 0.70;
+                    if (captureArea > viewportArea * areaThreshold) {
+                        logger.info(`Element "${element.name}": node "${nodeId}" covers ${Math.round(captureArea / viewportArea * 100)}% of viewport — too large`);
+                        actionHistory.push(`Iteration ${iteration}: capture("${nodeId}") rejected — element covers >${Math.round(areaThreshold * 100)}% of viewport (${entry.bounds.w}x${entry.bounds.h}), likely a wrapper. Find a more specific child node with focus(within: "${nodeId}").`);
+                        continue;
                     }
-                    const { verified, reason: verifyReason, usage } = await verifyElementCapture(client, model, element, buffer, reasoning, ++stepCounter, abortSignal, fallbackModel, uploadImage);
+                }
+                // Capture the node
+                try {
+                    const buffer = await browser.captureNode(nodeId);
+                    // Verify
+                    const { verified, reason: verifyReason, usage } = await verifyElementCapture(client, model, element, buffer, `Captured ${entry.label} (${nodeId})`, ++stepCounter, abortSignal, fallbackModel, uploadImage);
                     if (usage)
                         usageLog.push(usage);
                     if (!verified) {
                         lastVerifierRejectedAsTooLoose = isLooseElementCaptureRejectionReason(verifyReason);
                         if (lastVerifierRejectedAsTooLoose) {
-                            const looseFailureCount = (looseFailureCountsBySelector.get(selector) ?? 0) + 1;
-                            looseFailureCountsBySelector.set(selector, looseFailureCount);
-                            const selectorEvidenceEntry = selectorEvidence.get(selector);
-                            const viewport = browser.currentPage.viewportSize();
-                            if (selectorEvidenceEntry && shouldAcceptDomCorroboratedSelector({
-                                looseFailureCount,
-                                verifierRejectedAsTooLoose: true,
-                                validation,
-                                viewport,
-                                observedAsInteractive: selectorEvidenceEntry.observedAsInteractive,
-                                directQueryCount: selectorEvidenceEntry.directQueries.size,
-                                containerQueryCount: selectorEvidenceEntry.containerQueries.size,
-                            })) {
-                                logger.info(`Element "${element.name}": accepting selector "${selector}" after repeated loose-only verifier rejections because DOM evidence consistently corroborates the same component`);
+                            looseRejectionCount++;
+                            // Accept after repeated loose-only rejections (likely false positive from verifier)
+                            if (looseRejectionCount >= 3) {
+                                logger.info(`Element "${element.name}": accepting after ${looseRejectionCount} loose-only rejections`);
                                 return {
-                                    element,
-                                    success: true,
-                                    buffer,
-                                    assessment: 'Accepted after repeated loose-only verifier rejections; DOM evidence consistently confirmed the same component and the verifier likely misread embedded preview content as surrounding page context.',
-                                    capturedSelector: selector,
-                                    validation,
-                                    confidence,
+                                    element, success: true, buffer,
+                                    assessment: 'Accepted after repeated loose-only verifier rejections.',
                                     usage: usageLog,
                                 };
                             }
                         }
-                        lastFailedTransientSelector = isTransientSearchSelector(selector) ? selector : null;
-                        actionHistory.push(lastVerifierRejectedAsTooLoose
-                            ? `Iteration ${iteration}: capture_by_selector("${selector}") rejected by verifier — ${verifyReason}. The selector matched a real element, but the framing was too loose. Stay grounded on sel= values returned by the tools, search for a more distinctive in-card string if needed, and prefer any ↳ container selector instead of inventing a tag-only DOM path.`
-                            : `Iteration ${iteration}: capture_by_selector("${selector}") rejected by verifier — ${verifyReason}. Try a different or more specific selector.`);
+                        actionHistory.push(`Iteration ${iteration}: capture("${nodeId}") rejected by verifier — ${verifyReason}. ${lastVerifierRejectedAsTooLoose ? 'Try a more specific child node with focus(within: "' + nodeId + '").' : 'Try a different nodeId.'}`);
                         continue;
                     }
                     lastVerifierRejectedAsTooLoose = false;
+                    // Apply outscale if needed
                     const finalBuffer = outscaleAddsPadding(baseOutscale)
-                        ? (await browser.screenshotBySelector(selector, baseOutscale)).buffer
+                        ? await browser.screenshotByRegion({ x: entry.bounds.x, y: entry.bounds.y, width: entry.bounds.w, height: entry.bounds.h }, baseOutscale)
                         : buffer;
-                    logger.success(`Element "${element.name}" captured via selector "${selector}"`);
+                    logger.success(`Element "${element.name}" captured via nodeId "${nodeId}"`);
                     getPostHog().capture({
                         distinctId: distinctId ?? DISTINCT_ID,
                         event: 'element_capture_succeeded',
-                        properties: {
-                            element_name: element.name,
-                            method: 'selector',
-                            selector,
-                            confidence,
-                            iterations: iteration,
-                        },
+                        properties: { element_name: element.name, method: 'nodeId', nodeId, iterations: iteration },
                     });
                     return {
-                        element,
-                        success: true,
-                        buffer: finalBuffer,
-                        assessment: verifyReason || reasoning,
-                        capturedSelector: selector,
-                        validation,
-                        confidence,
+                        element, success: true, buffer: finalBuffer,
+                        assessment: verifyReason || `Captured ${entry.label}`,
                         usage: usageLog,
                     };
                 }
                 catch (err) {
-                    if (isAbortError(err)) {
+                    if (isAbortError(err))
                         throw err;
-                    }
-                    // Discriminate structured selector validation errors from generic errors
-                    const selectorErr = err;
-                    if (selectorErr.error && selectorErr.errorMessage) {
-                        if (selectorErr.error === 'no_match' && isTransientSearchSelector(selector)) {
-                            lastFailedTransientSelector = selector;
-                        }
-                        else {
-                            lastFailedTransientSelector = null;
-                        }
-                        const selectorSuggestions = {
-                            no_match: 'The selector matched nothing. Try a broader selector, remove nth-child constraints, or use search_text to locate the element first.',
-                            ambiguous: 'Multiple elements matched. Add parent context, a unique ID, data-testid, or aria-label to narrow down to one element.',
-                            invisible: 'Element is hidden. Use scroll_to_element or scroll to bring it into view, or check if a parent element must be expanded first.',
-                            zero_size: 'Element has zero rendered size. It may be dynamically rendered or conditionally shown. Try scrolling the page or waiting.',
-                        };
-                        const suggestion = selectorErr.error === 'no_match' && isTransientSearchSelector(selector)
-                            ? 'This looks like a stale temporary selector from an earlier search_text result. Re-run search_text to refresh the sel= value, then use the new selector immediately.'
-                            : selectorSuggestions[selectorErr.error] ?? 'Refine the selector and retry.';
-                        logger.error(`Selector validation failed: ${selectorErr.errorMessage}`);
-                        actionHistory.push(`Iteration ${iteration}: capture_by_selector("${selector}") — ${selectorErr.errorMessage}. ${suggestion}`);
-                    }
-                    else {
-                        const errorMsg = err.message;
-                        logger.error(`Selector capture failed: ${errorMsg}`);
-                        actionHistory.push(`Iteration ${iteration}: capture_by_selector("${selector}") failed — ${errorMsg}`);
-                    }
+                    logger.error(`Element "${element.name}": capture("${nodeId}") failed — ${err.message}`);
+                    actionHistory.push(`Iteration ${iteration}: capture("${nodeId}") error — ${err.message}`);
                     continue;
                 }
             }
-            if (name === 'resize_viewport') {
-                const w = args.width;
-                const h = args.height;
-                logger.info(`Element "${element.name}": resizing viewport to ${w}x${h}`);
-                await browser.resizeViewport(w, h);
-                await browser.wait(500);
-                actionHistory.push(`Iteration ${iteration}: resized viewport to ${w}x${h}`);
+            // ── focus(query) ──
+            if (name === 'focus') {
+                const query = args;
+                try {
+                    const focusResult = await browser.focusTree(query);
+                    logger.info(`Element "${element.name}": focus → ${focusResult.matches.length} match(es)`);
+                    actionHistory.push(`Iteration ${iteration}: focus(${JSON.stringify(args)}) → ${focusResult.matches.length} match(es)\n${focusResult.serialized.slice(0, 800)}`);
+                }
+                catch (err) {
+                    logger.error(`Element "${element.name}": focus failed — ${err.message}`);
+                    actionHistory.push(`Iteration ${iteration}: focus error — ${err.message}`);
+                }
                 continue;
             }
+            // ── scroll ──
             if (name === 'scroll') {
-                const index = args.index;
-                if (index !== undefined) {
-                    const align = args.align;
-                    const margin = args.margin;
-                    logger.info(`Element "${element.name}": scrolling to index ${index}${align ? ` (${align})` : ''}`);
-                    await browser.scrollElementIntoView(index, { align, margin });
-                    await browser.wait(300);
-                    actionHistory.push(`Iteration ${iteration}: scroll(index=${index}, align=${align || 'center'})`);
+                const centerOn = typeof args.centerOn === 'string' ? args.centerOn : undefined;
+                const target = typeof args.target === 'string' ? args.target : undefined;
+                const direction = args.direction ?? 'down';
+                const offset = typeof args.offset === 'number' ? args.offset : undefined;
+                if (centerOn) {
+                    logger.info(`Element "${element.name}": scroll centerOn="${centerOn}"`);
+                    try {
+                        await browser.centerNodeInView(centerOn, { containerNodeId: target, offset });
+                        await browser.wait(300);
+                        actionHistory.push(`Iteration ${iteration}: scroll(centerOn="${centerOn}")`);
+                    }
+                    catch (err) {
+                        actionHistory.push(`Iteration ${iteration}: scroll centerOn error — ${err.message}`);
+                    }
                 }
                 else {
-                    const direction = args.direction ?? 'down';
-                    const amount = args.amount ?? 500;
-                    logger.info(`Element "${element.name}": scrolling ${direction} ${amount}px`);
+                    const amount = offset ?? 500;
+                    logger.info(`Element "${element.name}": scroll ${direction} ${amount}px`);
                     await browser.scroll(direction, amount);
                     await browser.wait(500);
                     actionHistory.push(`Iteration ${iteration}: scroll(${direction}, ${amount}px)`);
                 }
                 continue;
             }
-            if (name === 'dismiss_overlays') {
-                logger.info(`Element "${element.name}": dismissing overlays`);
-                const result = await browser.dismissOverlays();
-                await browser.wait(300);
-                actionHistory.push(`Iteration ${iteration}: dismiss_overlays() → ${result.dismissed ? `dismissed via ${result.method}` : 'no visible overlay dismissed'}`);
-                continue;
-            }
-            if (name === 'search_text') {
-                const query = args.query;
-                const queryKey = query.toLowerCase().trim();
-                // Block duplicate searches — the DOM hasn't changed, results would be identical.
-                // Re-surface the top candidates so the model can act on them instead of searching again.
-                const cachedSearch = usedSearchQueries.get(queryKey);
-                if (cachedSearch
-                    && !shouldAllowSearchRefresh({
-                        cached: cachedSearch,
-                        domSignature,
-                        lastFailedTransientSelector,
-                    })) {
-                    const cached = cachedSearch;
-                    logger.info(`Element "${element.name}": duplicate search_text("${query}") blocked`);
-                    const candidateHint = cached.candidateLines.length > 0
-                        ? `\nTop candidates from that search (use their sel= in capture_by_selector):\n${cached.candidateLines.join('\n')}`
-                        : '';
-                    actionHistory.push(`Iteration ${iteration}: search_text("${query}") BLOCKED — DOM unchanged, results identical.${candidateHint}\nYou MUST either: (a) call capture_by_selector with a sel= from above, OR (b) search with a DIFFERENT query (unique text from the target: subtitle, price, feature text).`);
-                    continue;
-                }
-                logger.info(`Element "${element.name}": searching for "${query}"`);
-                const results = await browser.searchText(query);
-                for (const result of results) {
-                    getOrCreateSelectorEvidence(selectorEvidence, result.selector).directQueries.add(queryKey);
-                    if (result.container?.selector) {
-                        getOrCreateSelectorEvidence(selectorEvidence, result.container.selector).containerQueries.add(queryKey);
-                    }
-                }
-                const MAX_SEARCH_RESULTS_IN_HISTORY = 5;
-                const resultLines = results.map((r, i) => {
-                    const cx = Math.round(r.boundingBox.x + r.boundingBox.width / 2);
-                    const cy = Math.round(r.boundingBox.y + r.boundingBox.height / 2);
-                    const visibility = r.visibilityState === 'full'
-                        ? 'fully-visible'
-                        : r.visibilityState === 'partial'
-                            ? 'partially-visible'
-                            : 'off-screen';
-                    const text = r.text.slice(0, 80).replace(/\s+/g, ' ');
-                    let line = `  ${i}. <${r.tag}> "${text}" @${cx},${cy} ${r.boundingBox.width}x${r.boundingBox.height} (${visibility}) sel="${r.selector}"`;
-                    if (r.container) {
-                        line += `\n     ↳ container: <${r.container.tag}> ${r.container.boundingBox.width}x${r.container.boundingBox.height} (${r.container.reason}) sel="${r.container.selector}"`;
-                    }
-                    return line;
-                });
-                const resultText = results.length > 0
-                    ? resultLines.slice(0, MAX_SEARCH_RESULTS_IN_HISTORY).join('\n')
-                        + (results.length > MAX_SEARCH_RESULTS_IN_HISTORY ? `\n  (${results.length - MAX_SEARCH_RESULTS_IN_HISTORY} more results not shown)` : '')
-                    : '  (no matches found)';
-                // Cache the top 3 most promising candidates (prefer off-screen small elements — likely specific items)
-                const topCandidates = resultLines
-                    .filter(l => !l.includes('<body>'))
-                    .slice(0, 3);
-                // Pick the best bounding box for coordinate-based fallback:
-                // prefer a result whose container has a reasonable card-like size (>= 100x100, < 70% viewport).
-                const viewportArea = 1440 * 900; // approximate
-                let bestRegion = null;
-                for (const result of results) {
-                    const container = result.container;
-                    if (container) {
-                        const cb = container.boundingBox;
-                        if (cb.width >= 100 && cb.height >= 100 && cb.width * cb.height < viewportArea * 0.7) {
-                            bestRegion = cb;
-                            break;
-                        }
-                    }
+            // ── analyze_screenshot ──
+            if (name === 'analyze_screenshot') {
+                const question = args.question || 'Describe what you see';
+                logger.info(`Element "${element.name}": analyze_screenshot — "${question}"`);
+                try {
+                    const analysisResponse = await client.chat.completions.create({
+                        model,
+                        messages: [
+                            {
+                                role: 'user',
+                                content: [
+                                    { type: 'image_url', image_url: { url: screenshotUrl } },
+                                    { type: 'text', text: question },
+                                ],
+                            },
+                        ],
+                        max_tokens: 256,
+                        provider: { ...zdrParam() },
+                    }, { signal: abortSignal });
+                    const answer = analysisResponse.choices?.[0]?.message?.content || '(no answer)';
+                    actionHistory.push(`Iteration ${iteration}: analyze_screenshot("${question}") → ${answer.slice(0, 300)}`);
                 }
-                // Fallback: if no result had a suitably-sized container, use existing logic
-                if (!bestRegion) {
-                    const bestResult = results[0] ?? null;
-                    if (bestResult) {
-                        const container = bestResult.container;
-                        if (container && container.boundingBox.width * container.boundingBox.height < viewportArea * 0.7) {
-                            bestRegion = container.boundingBox;
-                        }
-                        else {
-                            bestRegion = bestResult.boundingBox;
-                        }
-                    }
+                catch (err) {
+                    if (isAbortError(err))
+                        throw err;
+                    actionHistory.push(`Iteration ${iteration}: analyze_screenshot error — ${err.message}`);
                 }
-                usedSearchQueries.set(queryKey, {
-                    candidateLines: topCandidates,
-                    domSignature,
-                    selectors: results.slice(0, 5).flatMap((result) => [
-                        result.selector,
-                        ...(result.container?.selector ? [result.container.selector] : []),
-                    ]),
-                    hasTransientSelectors: results.some((result) => isTransientSearchSelector(result.selector)
-                        || (result.container?.selector ? isTransientSearchSelector(result.container.selector) : false)),
-                    bestRegion,
-                });
-                lastFailedTransientSelector = null;
-                logger.info(`Search results:\n${resultLines.join('\n')}`);
-                actionHistory.push(`Iteration ${iteration}: search_text("${query}") → ${results.length} match(es)\n${resultText}`);
                 continue;
             }
-            if (name === 'give_up') {
-                const reason = args.reason || 'Unknown reason';
-                logger.error(`Element "${element.name}" not found: ${reason}`);
-                getPostHog().capture({
-                    distinctId: distinctId ?? DISTINCT_ID,
-                    event: 'element_capture_failed',
-                    properties: {
-                        element_name: element.name,
-                        reason,
-                        iterations: iteration,
-                        failure_type: 'gave_up',
-                    },
-                });
-                return {
-                    element,
-                    success: false,
-                    buffer: Buffer.alloc(0),
-                    assessment: reason,
-                    usage: usageLog,
-                };
-            }
-        }
-        // Coordinate-based fallback: if the LLM couldn't find a valid CSS selector but
-        // search_text found the element with a bounding box, capture by region as a last resort.
-        const allRegions = Array.from(usedSearchQueries.values())
-            .map(entry => entry.bestRegion)
-            .filter((r) => r != null && r.width > 0 && r.height > 0);
-        if (allRegions.length > 0) {
-            // Prefer regions with reasonable card-like dimensions over tiny text bboxes
-            const region = [...allRegions].sort((a, b) => {
-                const aOk = a.width >= 100 && a.height >= 100 ? 1 : 0;
-                const bOk = b.width >= 100 && b.height >= 100 ? 1 : 0;
-                if (aOk !== bOk)
-                    return bOk - aOk;
-                return (b.width * b.height) - (a.width * a.height);
-            })[0];
-            try {
-                logger.info(`Element "${element.name}": falling back to coordinate-based capture at ${region.x},${region.y} ${region.width}x${region.height}`);
-                const buffer = await browser.screenshotByRegion(region, element.outscale ?? element.padding ?? 0);
-                return {
-                    element,
-                    success: true,
-                    buffer,
-                    assessment: `Captured by coordinate fallback at (${region.x},${region.y}) ${region.width}x${region.height}`,
-                    capturedRegion: region,
-                    usage: usageLog,
-                };
-            }
-            catch (err) {
-                logger.error(`Element "${element.name}": coordinate fallback failed: ${err.message}`);
-            }
+            // Unknown tool
+            logger.warn(`Element "${element.name}": unknown tool "${name}"`);
+            actionHistory.push(`Iteration ${iteration}: unknown tool "${name}" — use focus, scroll, analyze_screenshot, or capture.`);
         }
+        // Max iterations reached — no coordinate fallback needed since AKTree provides bounds directly
         logger.error(`Element "${element.name}": max iterations reached`);
         getPostHog().capture({
             distinctId: distinctId ?? DISTINCT_ID,
@@ -759,8 +506,17 @@ export async function captureIsolatedElement(browser, element, apiKey, model, op
             usage: usageLog,
         };
     }
-    finally {
-        await restoreViewport();
+    catch (err) {
+        if (isAbortError(err))
+            throw err;
+        logger.error(`Element capture unexpected error: ${err.message}`);
+        return {
+            element,
+            success: false,
+            buffer: Buffer.alloc(0),
+            assessment: `Unexpected error: ${err.message}`,
+            usage: usageLog,
+        };
     }
 }
 //# sourceMappingURL=element-capture.js.map