donobu 5.35.0 → 5.36.0

package/dist/lib/page/extendPage.js

@@ -137,6 +137,7 @@ async function extendPage(page, options) {
                 clearPageAiCache: MiscUtils_1.MiscUtils.yn(envVars_1.env.data.DONOBU_PAGE_AI_CLEAR_CACHE),
             },
             tbdSessions: [],
+            aiInvocations: [],
         };
         const showMouse = async (p) => {
             if (interactionVisualizer.defaultMessageDurationMillis > 0) {
@@ -217,120 +218,146 @@ Valid options:
     const pageAi = Object.assign(act, {
         act,
         assert: async (assertion, options) => {
-            const useCache = options?.cache !== false;
-            const clearCache = sharedState.runtimeDirectives?.clearPageAiCache ?? false;
-            const retries = options?.retries ?? 0;
-            const retryDelaySeconds = options?.retryDelaySeconds ?? 3;
-            // Distill env var names from `{{$.env.*}}` interpolations in the
-            // assertion plus any explicitly provided names/overrides. Cached
-            // Playwright steps may carry the same `{{$.env.X}}` placeholders in
-            // their `value`/`attributeValue` fields, so we resolve env data at
-            // replay time and let the executor interpolate before applying.
-            const envVarNames = (0, DonobuFlowsManager_1.distillAllowedEnvVariableNames)(assertion, [
-                ...(options?.envVars ?? []),
-                ...Object.keys(options?.envVals ?? {}),
-            ]);
-            const hasEnvRefs = envVarNames.length > 0;
-            const resolveEnvData = async () => {
-                if (!hasEnvRefs) {
-                    return undefined;
-                }
-                const envData = await sharedState.donobuStack.envDataManager.getByNames(envVarNames);
-                if (options?.envVals) {
-                    for (const [k, v] of Object.entries(options.envVals)) {
-                        if (v === undefined) {
-                            delete envData[k];
+            const aiInvocationStartedAt = Date.now();
+            let aiInvocationCacheHit = false;
+            let aiInvocationError = undefined;
+            let aiInvocationAssertSteps;
+            try {
+                const useCache = options?.cache !== false;
+                const clearCache = sharedState.runtimeDirectives?.clearPageAiCache ?? false;
+                const retries = options?.retries ?? 0;
+                const retryDelaySeconds = options?.retryDelaySeconds ?? 3;
+                // Distill env var names from `{{$.env.*}}` interpolations in the
+                // assertion plus any explicitly provided names/overrides. Cached
+                // Playwright steps may carry the same `{{$.env.X}}` placeholders in
+                // their `value`/`attributeValue` fields, so we resolve env data at
+                // replay time and let the executor interpolate before applying.
+                const envVarNames = (0, DonobuFlowsManager_1.distillAllowedEnvVariableNames)(assertion, [
+                    ...(options?.envVars ?? []),
+                    ...Object.keys(options?.envVals ?? {}),
+                ]);
+                const hasEnvRefs = envVarNames.length > 0;
+                const resolveEnvData = async () => {
+                    if (!hasEnvRefs) {
+                        return undefined;
+                    }
+                    const envData = await sharedState.donobuStack.envDataManager.getByNames(envVarNames);
+                    if (options?.envVals) {
+                        for (const [k, v] of Object.entries(options.envVals)) {
+                            if (v === undefined) {
+                                delete envData[k];
+                            }
+                            else {
+                                envData[k] = v;
+                            }
                         }
-                        else {
-                            envData[k] = v;
+                    }
+                    return envData;
+                };
+                // --- Cache lookup (when enabled and not clearing) ---
+                if (useCache && !clearCache) {
+                    const cache = getOrInitPageAiCache();
+                    const pageUrl = (0, cacheLocator_1.extractCacheKeyHostname)(page.url());
+                    const cached = await cache.getAssert({ pageUrl, assertion });
+                    if (cached) {
+                        aiInvocationCacheHit = true;
+                        aiInvocationAssertSteps = cached.steps;
+                        Logger_1.appLogger.debug(`Assert cache HIT for: "${assertion}" - running cached Playwright assertion`);
+                        const envData = await resolveEnvData();
+                        let lastError = null;
+                        for (let attempt = 0; attempt <= retries; attempt++) {
+                            if (attempt > 0) {
+                                Logger_1.appLogger.info(`Retry ${attempt} of ${retries} for cached assert`);
+                                await page.waitForTimeout(retryDelaySeconds * 1000);
+                            }
+                            try {
+                                await cached.run({ page, envData });
+                                return; // Assertion passed
+                            }
+                            catch (error) {
+                                lastError = error;
+                            }
                         }
+                        // All retry attempts exhausted
+                        throw new ToolCallFailedException_1.ToolCallFailedException(AssertTool_1.AssertTool.NAME, {
+                            isSuccessful: false,
+                            // Strip ANSI: Playwright matchers style their messages for the
+                            // terminal, but this string flows into JSON-stringified exception
+                            // messages, the LLM, and HTML/markdown reports — places where the
+                            // codes never render and just become visible junk.
+                            forLlm: `Assertion FAILED (cached) for: ${assertion}\nPlaywright Error: ${(0, ansi_1.stripAnsi)(lastError?.message ?? '')}`,
+                            metadata: {
+                                cached: true,
+                                steps: cached.steps,
+                            },
+                        });
                     }
                 }
-                return envData;
-            };
-            // --- Cache lookup (when enabled and not clearing) ---
-            if (useCache && !clearCache) {
-                const cache = getOrInitPageAiCache();
-                const pageUrl = (0, cacheLocator_1.extractCacheKeyHostname)(page.url());
-                const cached = await cache.getAssert({ pageUrl, assertion });
-                if (cached) {
-                    Logger_1.appLogger.debug(`Assert cache HIT for: "${assertion}" - running cached Playwright assertion`);
-                    const envData = await resolveEnvData();
-                    let lastError = null;
-                    for (let attempt = 0; attempt <= retries; attempt++) {
-                        if (attempt > 0) {
-                            Logger_1.appLogger.info(`Retry ${attempt} of ${retries} for cached assert`);
-                            await page.waitForTimeout(retryDelaySeconds * 1000);
-                        }
+                // --- Cache invalidation (when clearing) ---
+                if (useCache && clearCache) {
+                    const cache = getOrInitPageAiCache();
+                    const pageUrl = (0, cacheLocator_1.extractCacheKeyHostname)(page.url());
+                    await cache.deleteAssert({ pageUrl, assertion });
+                    Logger_1.appLogger.debug(`Assert cache invalidated for: "${assertion}"`);
+                }
+                // Make env vars available to runTool's envData for `{{$.env.*}}`
+                // interpolation inside `assertionToTestFor` and so AssertTool can
+                // instruct the AI to emit placeholders in cached step values. Mirrors
+                // PageAi.ai for `act`: metadata.envVars is set (overwriting), envVals
+                // is restored.
+                if (hasEnvRefs) {
+                    sharedState.donobuFlowMetadata.envVars = envVarNames;
+                }
+                const previousEnvVals = sharedState.envVals;
+                sharedState.envVals = options?.envVals;
+                let result;
+                try {
+                    // --- Cache miss or cache disabled: run AI assertion ---
+                    result = await runTool(page, AssertTool_1.AssertTool.NAME, {
+                        assertionToTestFor: assertion,
+                        retries: options?.retries,
+                        retryWaitSeconds: options?.retryDelaySeconds,
+                    }, options?.gptClient);
+                }
+                finally {
+                    sharedState.envVals = previousEnvVals;
+                }
+                if (!result.outcome.isSuccessful) {
+                    throw new ToolCallFailedException_1.ToolCallFailedException(AssertTool_1.AssertTool.NAME, result.outcome);
+                }
+                // --- Cache the Playwright assertion for future runs ---
+                if (useCache) {
+                    const steps = result.outcome.metadata?.playwrightAssertionSteps;
+                    if (Array.isArray(steps) && steps.length > 0) {
                         try {
-                            await cached.run({ page, envData });
-                            return; // Assertion passed
+                            const cache = getOrInitPageAiCache();
+                            const pageUrl = (0, cacheLocator_1.extractCacheKeyHostname)(page.url());
+                            await cache.putAssert({ pageUrl, assertion, steps });
+                            Logger_1.appLogger.debug(`Assert cache STORED for: "${assertion}"`);
                         }
                         catch (error) {
-                            lastError = error;
+                            Logger_1.appLogger.debug(`Skipping assert cache for: "${assertion}" - failed to persist: ${error.message}`);
                         }
                     }
-                    // All retry attempts exhausted
-                    throw new ToolCallFailedException_1.ToolCallFailedException(AssertTool_1.AssertTool.NAME, {
-                        isSuccessful: false,
-                        // Strip ANSI: Playwright matchers style their messages for the
-                        // terminal, but this string flows into JSON-stringified exception
-                        // messages, the LLM, and HTML/markdown reports — places where the
-                        // codes never render and just become visible junk.
-                        forLlm: `Assertion FAILED (cached) for: ${assertion}\nPlaywright Error: ${(0, ansi_1.stripAnsi)(lastError?.message ?? '')}`,
-                        metadata: {
-                            cached: true,
-                            steps: cached.steps,
-                        },
-                    });
                 }
             }
-            // --- Cache invalidation (when clearing) ---
-            if (useCache && clearCache) {
-                const cache = getOrInitPageAiCache();
-                const pageUrl = (0, cacheLocator_1.extractCacheKeyHostname)(page.url());
-                await cache.deleteAssert({ pageUrl, assertion });
-                Logger_1.appLogger.debug(`Assert cache invalidated for: "${assertion}"`);
-            }
-            // Make env vars available to runTool's envData for `{{$.env.*}}`
-            // interpolation inside `assertionToTestFor` and so AssertTool can
-            // instruct the AI to emit placeholders in cached step values. Mirrors
-            // PageAi.ai for `act`: metadata.envVars is set (overwriting), envVals
-            // is restored.
-            if (hasEnvRefs) {
-                sharedState.donobuFlowMetadata.envVars = envVarNames;
-            }
-            const previousEnvVals = sharedState.envVals;
-            sharedState.envVals = options?.envVals;
-            let result;
-            try {
-                // --- Cache miss or cache disabled: run AI assertion ---
-                result = await runTool(page, AssertTool_1.AssertTool.NAME, {
-                    assertionToTestFor: assertion,
-                    retries: options?.retries,
-                    retryWaitSeconds: options?.retryDelaySeconds,
-                }, options?.gptClient);
+            catch (e) {
+                aiInvocationError = e;
+                throw e;
             }
             finally {
-                sharedState.envVals = previousEnvVals;
-            }
-            if (!result.outcome.isSuccessful) {
-                throw new ToolCallFailedException_1.ToolCallFailedException(AssertTool_1.AssertTool.NAME, result.outcome);
-            }
-            // --- Cache the Playwright assertion for future runs ---
-            if (useCache) {
-                const steps = result.outcome.metadata?.playwrightAssertionSteps;
-                if (Array.isArray(steps) && steps.length > 0) {
-                    try {
-                        const cache = getOrInitPageAiCache();
-                        const pageUrl = (0, cacheLocator_1.extractCacheKeyHostname)(page.url());
-                        await cache.putAssert({ pageUrl, assertion, steps });
-                        Logger_1.appLogger.debug(`Assert cache STORED for: "${assertion}"`);
-                    }
-                    catch (error) {
-                        Logger_1.appLogger.debug(`Skipping assert cache for: "${assertion}" - failed to persist: ${error.message}`);
-                    }
-                }
+                sharedState.aiInvocations.push({
+                    kind: 'assert',
+                    description: assertion,
+                    startedAt: aiInvocationStartedAt,
+                    endedAt: Date.now(),
+                    cacheHit: aiInvocationCacheHit,
+                    passed: aiInvocationError === undefined,
+                    error: aiInvocationError !== undefined
+                        ? { message: aiInvocationError?.message }
+                        : undefined,
+                    assertSteps: aiInvocationAssertSteps,
+                });
             }
         },
         extract: async (schema, options) => {
@@ -405,6 +432,9 @@ Use this information to return an appropriate JSON object.`,
             return result.metadata;
         },
         locate: async (description, options) => {
+            const aiInvocationStartedAt = Date.now();
+            let aiInvocationCacheHit = false;
+            let aiInvocationError = undefined;
             const useCache = options?.cache !== false;
             const clearCache = sharedState.runtimeDirectives?.clearPageAiCache ?? false;
             const pageUrl = (0, cacheLocator_1.extractCacheKeyHostname)(page.url());
@@ -463,6 +493,8 @@ Use this information to return an appropriate JSON object.`,
                                 timeout: remaining,
                             });
                             Logger_1.appLogger.debug(`Locate cache HIT for: "${description}" — rebuilt locator from cache`);
+                            Logger_1.appLogger.info(`Located: ${candidate}`);
+                            aiInvocationCacheHit = true;
                             return candidate;
                         }
                         catch {
@@ -499,9 +531,25 @@ Use this information to return an appropriate JSON object.`,
                         Logger_1.appLogger.debug(`Skipping locate cache for: "${description}" — failed to persist: ${error.message}`);
                     }
                 }
+                Logger_1.appLogger.info(`Located: ${locator}`);
                 return locator;
             }
+            catch (e) {
+                aiInvocationError = e;
+                throw e;
+            }
             finally {
+                sharedState.aiInvocations.push({
+                    kind: 'locate',
+                    description,
+                    startedAt: aiInvocationStartedAt,
+                    endedAt: Date.now(),
+                    cacheHit: aiInvocationCacheHit,
+                    passed: aiInvocationError === undefined,
+                    error: aiInvocationError !== undefined
+                        ? { message: aiInvocationError?.message }
+                        : undefined,
+                });
                 clearTimeout(timeoutId);
             }
         },

package/dist/lib/test/testExtension.js

@@ -877,6 +877,24 @@ async function finalizeTest(page, testInfo, logBuffer, videoOption) {
         catch {
             // Non-fatal: native step collection failing must not affect the test result.
         }
+        // Attach AI invocation wrappers (page.ai / page.ai.assert / page.ai.locate)
+        // so the HTML reporter can render each as a parent node containing the
+        // tool calls and native steps that fell inside its time window. The
+        // `cacheHit` flag drives the `[cached]` badge on the wrapper itself —
+        // not on inner actions, since a cached `page.ai` may legitimately invoke
+        // a live `page.ai.assert` and vice versa.
+        try {
+            const aiInvocations = sharedState.aiInvocations;
+            if (aiInvocations.length > 0) {
+                await testInfo.attach('donobu-ai-invocations', {
+                    body: JSON.stringify(aiInvocations),
+                    contentType: 'application/json',
+                });
+            }
+        }
+        catch {
+            // Non-fatal.
+        }
         const browserState = await BrowserUtils_1.BrowserUtils.getBrowserStorageState(page.context());
         await sharedState.persistence.setBrowserState(sharedState.donobuFlowMetadata.id, browserState);
     }

package/dist/reporter/render.js

@@ -310,6 +310,18 @@ function extractTests(jsonData) {
                             // Ignore parse failures
                         }
                     }
+                    // Parse AI invocation wrappers from donobu-ai-invocations attachment
+                    let aiInvocations = [];
+                    const aiInvAtt = attachments.find((a) => a.name === 'donobu-ai-invocations');
+                    if (aiInvAtt?.body) {
+                        try {
+                            const decoded = Buffer.from(aiInvAtt.body, 'base64').toString('utf8');
+                            aiInvocations = JSON.parse(decoded);
+                        }
+                        catch {
+                            // Ignore parse failures
+                        }
+                    }
                     return {
                         index: i,
                         status: r.status,
@@ -334,6 +346,7 @@ function extractTests(jsonData) {
                         steps: parseStderrSteps(r.stderr ?? []),
                         stepScreenshots,
                         nativeSteps,
+                        aiInvocations,
                     };
                 });
                 // Extract flow ID from the test-flow-metadata.json attachment
@@ -613,6 +626,107 @@ function renderNativeStep(ns, childrenHtml) {
     html += `</details>`;
     return html;
 }
+const AI_KIND_LABELS = {
+    act: 'page.ai',
+    assert: 'page.ai.assert',
+    locate: 'page.ai.locate',
+};
+/**
+ * Render a single structured assertion step back as the Playwright source
+ * line that effectively executes — e.g. `expect(page.getByRole('heading',
+ * { name: 'Create an account' })).toBeVisible()`. Used to surface in the
+ * report what a cached `page.ai.assert` actually checked.
+ */
+function formatAssertionStep(step) {
+    const quote = (s) => `'${s.replace(/\\/g, '\\\\').replace(/'/g, "\\'")}'`;
+    const matcher = step.valueIsRegex ? `/${step.value}/` : quote(step.value);
+    // Page-level assertions (no element locator)
+    if (step.locator === null) {
+        return `expect(page).${step.assertion}(${matcher})`;
+    }
+    let locatorExpr;
+    if (step.locator === 'role' && step.role) {
+        locatorExpr = `page.getByRole(${quote(step.role)}, { name: ${matcher} })`;
+    }
+    else if (step.locator === 'label') {
+        locatorExpr = `page.getByLabel(${matcher})`;
+    }
+    else {
+        locatorExpr = `page.getByText(${matcher})`;
+    }
+    locatorExpr += '.first()';
+    const attrValue = step.attributeValue ?? '';
+    switch (step.assertion) {
+        case 'toBeVisible':
+        case 'toBeEnabled':
+        case 'toBeDisabled':
+        case 'toBeChecked':
+            return `expect(${locatorExpr}).${step.assertion}()`;
+        case 'toBeHidden':
+            // Executor uses `not.toBeVisible()` for `toBeHidden`; mirror that here.
+            return `expect(${locatorExpr}).not.toBeVisible()`;
+        case 'toHaveValue':
+        case 'toContainText':
+            return `expect(${locatorExpr}).${step.assertion}(${quote(attrValue)})`;
+        case 'toHaveAttribute':
+            return `expect(${locatorExpr}).toHaveAttribute(${quote(step.value)}, ${quote(attrValue)})`;
+        default:
+            return `expect(${locatorExpr}).${step.assertion}(${matcher})`;
+    }
+}
+function renderAiInvocation(inv, childrenHtml) {
+    const statusIcon = inv.passed
+        ? '<span class="step-status-ok">&#10003;</span>'
+        : '<span class="step-status-fail">&#10007;</span>';
+    const kindBadge = `<span class="ai-invocation-badge ai-invocation-badge--${inv.kind}">${esc(AI_KIND_LABELS[inv.kind])}</span>`;
+    const cachedBadge = inv.cacheHit
+        ? '<span class="ai-cached-badge">cached</span>'
+        : '';
+    const hasError = !inv.passed && !!inv.error?.message;
+    const hasAssertSteps = !!inv.assertSteps && inv.assertSteps.length > 0;
+    const hasBody = hasError || !!childrenHtml || hasAssertSteps;
+    const renderHeader = (tag) => {
+        let header = `<${tag} class="filmstrip-header">`;
+        header += statusIcon;
+        header += `<span class="ai-invocation-title">${esc(inv.description)}</span>`;
+        header += kindBadge;
+        header += cachedBadge;
+        if (tag === 'summary') {
+            header +=
+                '<span class="native-step-chevron" aria-hidden="true">&#9656;</span>';
+        }
+        header += `</${tag}>`;
+        return header;
+    };
+    if (!hasBody) {
+        // Leaf row — no children, no error. Common for `page.ai.locate` cache
+        // hits and for any other invocation whose internal work didn't surface
+        // any captured tool calls or native steps.
+        return `<div class="filmstrip-step ai-invocation">${renderHeader('div')}</div>`;
+    }
+    // Failures always render expanded; passing wrappers with children open
+    // by default so the contents are visible without an extra click.
+    const defaultOpen = !inv.passed || !!childrenHtml || hasAssertSteps;
+    const passClass = inv.passed
+        ? 'ai-invocation--passed'
+        : 'ai-invocation--failed';
+    let html = `<details class="filmstrip-step ai-invocation ${passClass}"${defaultOpen ? ' open' : ''}>`;
+    html += renderHeader('summary');
+    if (hasError) {
+        html += `<pre class="native-step-error">${ansiToHtml(inv.error.message)}</pre>`;
+    }
+    if (hasAssertSteps) {
+        const lines = inv
+            .assertSteps.map((s) => esc(formatAssertionStep(s)))
+            .join('\n');
+        html += `<pre class="ai-assert-steps">${lines}</pre>`;
+    }
+    if (childrenHtml) {
+        html += childrenHtml;
+    }
+    html += `</details>`;
+    return html;
+}
 const AUDIT_CHECK_DEFS = [
     {
         key: 'pageLoad',
@@ -852,14 +966,15 @@ function renderFilmstripStep(ss, outputDir) {
     html += `</div>`;
     return html;
 }
-function renderSteps(steps, stepScreenshots, nativeSteps, outputDir) {
+function renderSteps(steps, stepScreenshots, nativeSteps, aiInvocations, outputDir) {
     const meaningful = steps.filter((s) => s.type === 'action' || s.type === 'result');
     const hasScreenshots = stepScreenshots.length > 0;
     const hasNative = nativeSteps.length > 0;
-    if (!meaningful.length && !hasScreenshots && !hasNative) {
+    const hasAi = aiInvocations.length > 0;
+    if (!meaningful.length && !hasScreenshots && !hasNative && !hasAi) {
         return '';
     }
-    if (hasScreenshots || hasNative) {
+    if (hasScreenshots || hasNative || hasAi) {
         const buildNativeTree = (nss) => nss.map((ns) => ({
             kind: 'native',
             ns,
@@ -868,32 +983,53 @@ function renderSteps(steps, stepScreenshots, nativeSteps, outputDir) {
             children: buildNativeTree(ns.children),
         }));
         const roots = buildNativeTree(nativeSteps);
-        // Place each Donobu screenshot under the deepest native step whose
-        // [start, end] window contains it. Falls back to top level if none.
-        const placeDonobu = (nodes, d) => {
+        // Place a node into the deepest container whose [t, tEnd] window
+        // contains its [tStart, tEnd]. Returns true on placement. Both native
+        // steps and AI invocations are eligible parents.
+        const placeNode = (nodes, leaf, tStart, tEnd) => {
             for (const n of nodes) {
-                if (n.kind !== 'native') {
+                if (n.kind !== 'native' && n.kind !== 'ai') {
                     continue;
                 }
-                if (d.ss.startedAt >= n.t && d.ss.completedAt <= n.tEnd) {
-                    if (!placeDonobu(n.children, d)) {
-                        n.children.push(d);
+                if (tStart >= n.t && tEnd <= n.tEnd) {
+                    if (!placeNode(n.children, leaf, tStart, tEnd)) {
+                        n.children.push(leaf);
                     }
                     return true;
                 }
             }
             return false;
         };
+        // AI invocations placed first, longer-window first so an outer cached
+        // `page.ai` is in place before its inner `page.ai.assert` lands.
+        const sortedInvocations = [...aiInvocations].sort((a, b) => b.endedAt - b.startedAt - (a.endedAt - a.startedAt));
+        for (const inv of sortedInvocations) {
+            const node = {
+                kind: 'ai',
+                inv,
+                t: inv.startedAt,
+                tEnd: inv.endedAt,
+                children: [],
+            };
+            if (!placeNode(roots, node, inv.startedAt, inv.endedAt)) {
+                roots.push(node);
+            }
+        }
         for (const ss of stepScreenshots) {
-            const d = { kind: 'donobu', ss, t: ss.startedAt };
-            if (!placeDonobu(roots, d)) {
+            const d = {
+                kind: 'donobu',
+                ss,
+                t: ss.startedAt,
+                tEnd: ss.completedAt,
+            };
+            if (!placeNode(roots, d, ss.startedAt, ss.completedAt)) {
                 roots.push(d);
             }
         }
         const sortTree = (nodes) => {
             nodes.sort((a, b) => a.t - b.t);
             for (const n of nodes) {
-                if (n.kind === 'native') {
+                if (n.kind === 'native' || n.kind === 'ai') {
                     sortTree(n.children);
                 }
             }
@@ -903,7 +1039,7 @@ function renderSteps(steps, stepScreenshots, nativeSteps, outputDir) {
             let c = 0;
             for (const n of nodes) {
                 c += 1;
-                if (n.kind === 'native') {
+                if (n.kind === 'native' || n.kind === 'ai') {
                     c += countNodes(n.children);
                 }
             }
@@ -913,6 +1049,12 @@ function renderSteps(steps, stepScreenshots, nativeSteps, outputDir) {
             if (node.kind === 'donobu') {
                 return renderFilmstripStep(node.ss, outputDir);
             }
+            if (node.kind === 'ai') {
+                const childrenHtml = node.children.length > 0
+                    ? `<div class="native-step-children">${node.children.map(renderNode).join('')}</div>`
+                    : '';
+                return renderAiInvocation(node.inv, childrenHtml);
+            }
             const childrenHtml = node.children.length > 0
                 ? `<div class="native-step-children">${node.children.map(renderNode).join('')}</div>`
                 : '';
@@ -1227,7 +1369,7 @@ function renderResultTimeline(results, outputDir) {
             html += `<div class="timeline-errors">${renderErrors(r.errors)}</div>`;
         }
         html += renderAttachments(r.attachments, outputDir, r.stepScreenshots);
-        html += renderSteps(r.steps, r.stepScreenshots, r.nativeSteps, outputDir);
+        html += renderSteps(r.steps, r.stepScreenshots, r.nativeSteps, r.aiInvocations, outputDir);
         html += '</div></div>';
     }
     html += '</div>';
@@ -1385,7 +1527,7 @@ function renderHtml(report, triage, outputDir) {
         }
         // 6. Steps — detailed forensics
         if (!hasMultipleResults && lastResult) {
-            detailsHtml += renderSteps(lastResult.steps, lastResult.stepScreenshots, lastResult.nativeSteps, outputDir);
+            detailsHtml += renderSteps(lastResult.steps, lastResult.stepScreenshots, lastResult.nativeSteps, lastResult.aiInvocations, outputDir);
         }
         // 7. Triage details — remediation steps (expandable)
         if (test.plan) {
@@ -1659,6 +1801,18 @@ details.native-step[open]>summary .native-step-chevron{transform:rotate(90deg)}
 .native-step-snippet{font-size:11px;font-family:var(--mono);margin:4px 0 2px 22px;overflow:hidden}
 .native-step-children{display:flex;flex-direction:column;margin:4px 0 0 10px;border-left:1px solid var(--border-subtle);padding-left:8px}
 .native-step-children>.filmstrip-step{padding-left:8px}
+
+/* AI invocation wrappers — page.ai / page.ai.assert / page.ai.locate */
+details.ai-invocation>summary{list-style:none;cursor:pointer}
+details.ai-invocation>summary::-webkit-details-marker{display:none}
+.ai-invocation-title{font-size:12px;font-weight:500;color:var(--text);font-family:var(--mono);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.ai-invocation-badge{font-size:10px;font-weight:600;padding:1px 5px;border-radius:3px;white-space:nowrap;flex-shrink:0;font-family:var(--mono)}
+.ai-invocation-badge--act{background:rgba(168,85,247,.12);color:#c084fc}
+.ai-invocation-badge--assert{background:rgba(236,72,153,.12);color:#f472b6}
+.ai-invocation-badge--locate{background:rgba(59,130,246,.12);color:#60a5fa}
+.ai-cached-badge{font-size:10px;font-weight:600;padding:1px 5px;border-radius:3px;white-space:nowrap;flex-shrink:0;background:rgba(245,158,11,.12);color:#fbbf24}
+details.ai-invocation[open]>summary .native-step-chevron{transform:rotate(90deg)}
+.ai-assert-steps{font-size:11px;font-family:var(--mono);background:var(--bg);border:1px solid var(--border-subtle);border-radius:var(--radius);padding:8px 12px;margin:6px 0 2px 22px;color:var(--text-muted);white-space:pre-wrap;word-break:break-word;overflow-x:auto;max-height:240px;overflow-y:auto}
 .snippet-line{display:flex;padding:1px 8px;white-space:pre}
 .snippet-line--target{background:rgba(239,68,68,.10)}
 .snippet-linenum{color:var(--text-dim);min-width:40px;user-select:none}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "donobu",
-  "version": "5.35.0",
+  "version": "5.36.0",
   "description": "Create browser automations with an LLM agent and replay them as Playwright scripts.",
   "main": "dist/main.js",
   "module": "dist/esm/main.js",