donobu 5.32.0 → 5.33.0

package/dist/esm/lib/test/testExtension.js

@@ -451,15 +451,25 @@ exports.test = test_1.test.extend({
  *   3. `_steps` is fully populated by the time `finalizeTest()` runs (the
  *      test body has already completed).
  */
-function collectNativeSteps(rawSteps) {
+function collectNativeSteps(rawSteps, startTimes) {
     const result = [];
     for (const step of rawSteps) {
         const cat = step.category ?? '';
+        const childRaw = Array.isArray(step.steps) ? step.steps : [];
+        const collectedChildren = collectNativeSteps(childRaw, startTimes);
         if (cat === 'expect' || cat === 'test.step') {
+            // Start time comes from the onStepBegin payload (captured by the
+            // pwApiStepLogger fixture into startTimes). If unavailable, fall
+            // back to the step's endWallTime so the window is zero-width and
+            // sibling steps don't get falsely nested inside.
+            const endWallTime = step.endWallTime ?? Date.now();
+            const startWallTime = (typeof step.stepId === 'string' && startTimes.get(step.stepId)) ||
+                endWallTime;
             result.push({
                 title: step.title ?? '',
                 category: cat,
-                endWallTime: step.endWallTime ?? Date.now(),
+                startWallTime,
+                endWallTime,
                 passed: !step.error,
                 error: step.error
                     ? { message: step.error.message, stack: step.error.stack }
@@ -471,15 +481,16 @@ function collectNativeSteps(rawSteps) {
                         column: step.location.column ?? 0,
                     }
                     : undefined,
+                children: collectedChildren,
             });
         }
-        // Recurse into child steps regardless of parent category so nested
-        // expect() calls inside test.step() blocks are captured.
-        if (Array.isArray(step.steps) && step.steps.length > 0) {
-            result.push(...collectNativeSteps(step.steps));
+        else {
+            // Parent is not a kept category (e.g. pw:api) — promote any qualifying
+            // descendants so a nested expect() still appears in the report.
+            result.push(...collectedChildren);
         }
     }
-    result.sort((a, b) => a.endWallTime - b.endWallTime);
+    result.sort((a, b) => a.startWallTime - b.startWallTime);
     return result;
 }
 // ---------------------------------------------------------------------------
@@ -689,9 +700,20 @@ function installPlaywrightStepLogger(testInfo) {
     const originalOnStepEnd = callbacks && typeof callbacks.onStepEnd === 'function'
         ? callbacks.onStepEnd
         : null;
+    const originalOnStepBegin = callbacks && typeof callbacks.onStepBegin === 'function'
+        ? callbacks.onStepBegin
+        : null;
     if (!callbacks || !originalOnStepEnd || !stepMap) {
         return () => { };
     }
+    // Stash a stepId -> wallTime map on testInfo so collectNativeSteps can
+    // look up start times when building the report hierarchy. Playwright
+    // doesn't store wallTime on the step object itself — it's only emitted
+    // via the onStepBegin payload — so we capture it here. Without this,
+    // `test.step` blocks have no recoverable start time and any preceding
+    // tool-call step gets falsely nested inside them.
+    const startTimes = new Map();
+    ti.__donobuStepStartTimes = startTimes;
     let installed = false;
     try {
         callbacks.onStepEnd = function patchedOnStepEnd(payload) {
@@ -710,6 +732,21 @@ function installPlaywrightStepLogger(testInfo) {
             }
             return ret;
         };
+        callbacks.onStepBegin = function patchedOnStepBegin(payload) {
+            const ret = originalOnStepBegin
+                ? originalOnStepBegin.call(this, payload)
+                : undefined;
+            try {
+                if (typeof payload?.stepId === 'string' &&
+                    typeof payload?.wallTime === 'number') {
+                    startTimes.set(payload.stepId, payload.wallTime);
+                }
+            }
+            catch (err) {
+                Logger_1.appLogger.debug('Failed to record Playwright step start time', err);
+            }
+            return ret;
+        };
         installed = true;
     }
     catch (err) {
@@ -718,6 +755,9 @@ function installPlaywrightStepLogger(testInfo) {
     return () => {
         if (installed) {
             callbacks.onStepEnd = originalOnStepEnd;
+            if (originalOnStepBegin) {
+                callbacks.onStepBegin = originalOnStepBegin;
+            }
         }
     };
 }
@@ -825,7 +865,8 @@ async function finalizeTest(page, testInfo, logBuffer, videoOption) {
         // Attach native Playwright steps (expect assertions, test.step blocks)
         // so the HTML report can show a unified timeline alongside AI tool calls.
         try {
-            const nativeSteps = collectNativeSteps(testInfo._steps ?? []);
+            const startTimes = testInfo.__donobuStepStartTimes ?? new Map();
+            const nativeSteps = collectNativeSteps(testInfo._steps ?? [], startTimes);
             if (nativeSteps.length > 0) {
                 await testInfo.attach('donobu-native-steps', {
                     body: JSON.stringify(nativeSteps),

package/dist/esm/reporter/render.js

@@ -562,7 +562,7 @@ function renderErrors(errors) {
     }
     return html;
 }
-function renderNativeStep(ns) {
+function renderNativeStep(ns, childrenHtml) {
     const statusIcon = ns.passed
         ? '<span class="step-status-ok">&#10003;</span>'
         : '<span class="step-status-fail">&#10007;</span>';
@@ -573,7 +573,8 @@ function renderNativeStep(ns) {
     const snippet = ns.location?.file
         ? readSourceSnippet(ns.location.file, ns.location.line)
         : null;
-    const hasBody = snippet || (!ns.passed && ns.error?.message);
+    const hasError = !ns.passed && !!ns.error?.message;
+    const hasBody = !!snippet || hasError || !!childrenHtml;
     const renderHeader = (tag) => {
         let header = `<${tag} class="filmstrip-header">`;
         header += statusIcon;
@@ -592,17 +593,23 @@ function renderNativeStep(ns) {
     if (!hasBody) {
         return `<div class="filmstrip-step native-step">${renderHeader('div')}</div>`;
     }
-    // Failing steps render expanded so the error is immediately visible;
-    // passing steps collapse so a test with many expects stays scannable.
+    // Failures always render expanded so the error is immediately visible.
+    // test.step blocks with nested content also default open so users see
+    // what's inside; bare passing expects with just a snippet collapse to
+    // keep tests with many assertions scannable.
+    const defaultOpen = !ns.passed || (ns.category === 'test.step' && !!childrenHtml);
     const passClass = ns.passed ? 'native-step--passed' : 'native-step--failed';
-    let html = `<details class="filmstrip-step native-step ${passClass}"${ns.passed ? '' : ' open'}>`;
+    let html = `<details class="filmstrip-step native-step ${passClass}"${defaultOpen ? ' open' : ''}>`;
     html += renderHeader('summary');
-    if (!ns.passed && ns.error?.message) {
+    if (hasError) {
         html += `<pre class="native-step-error">${ansiToHtml(ns.error.message)}</pre>`;
     }
     if (snippet) {
         html += snippet;
     }
+    if (childrenHtml) {
+        html += childrenHtml;
+    }
     html += `</details>`;
     return html;
 }
@@ -853,31 +860,71 @@ function renderSteps(steps, stepScreenshots, nativeSteps, outputDir) {
         return '';
     }
     if (hasScreenshots || hasNative) {
-        const timeline = [
-            ...stepScreenshots.map((ss) => ({
-                t: ss.completedAt,
-                kind: 'donobu',
-                ss,
-            })),
-            ...nativeSteps.map((ns) => ({
-                t: ns.endWallTime,
-                kind: 'native',
-                ns,
-            })),
-        ];
-        timeline.sort((a, b) => a.t - b.t);
-        const stepCount = timeline.length;
+        const buildNativeTree = (nss) => nss.map((ns) => ({
+            kind: 'native',
+            ns,
+            t: ns.startWallTime,
+            tEnd: ns.endWallTime,
+            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) => {
+            for (const n of nodes) {
+                if (n.kind !== 'native') {
+                    continue;
+                }
+                if (d.ss.startedAt >= n.t && d.ss.completedAt <= n.tEnd) {
+                    if (!placeDonobu(n.children, d)) {
+                        n.children.push(d);
+                    }
+                    return true;
+                }
+            }
+            return false;
+        };
+        for (const ss of stepScreenshots) {
+            const d = { kind: 'donobu', ss, t: ss.startedAt };
+            if (!placeDonobu(roots, d)) {
+                roots.push(d);
+            }
+        }
+        const sortTree = (nodes) => {
+            nodes.sort((a, b) => a.t - b.t);
+            for (const n of nodes) {
+                if (n.kind === 'native') {
+                    sortTree(n.children);
+                }
+            }
+        };
+        sortTree(roots);
+        const countNodes = (nodes) => {
+            let c = 0;
+            for (const n of nodes) {
+                c += 1;
+                if (n.kind === 'native') {
+                    c += countNodes(n.children);
+                }
+            }
+            return c;
+        };
+        const renderNode = (node) => {
+            if (node.kind === 'donobu') {
+                return renderFilmstripStep(node.ss, outputDir);
+            }
+            const childrenHtml = node.children.length > 0
+                ? `<div class="native-step-children">${node.children.map(renderNode).join('')}</div>`
+                : '';
+            return renderNativeStep(node.ns, childrenHtml);
+        };
+        const stepCount = countNodes(roots);
         let html = '<details class="steps-section"><summary>Steps (' +
             stepCount +
             ')</summary>';
         html += '<div class="step-filmstrip">';
-        for (const entry of timeline) {
-            if (entry.kind === 'donobu') {
-                html += renderFilmstripStep(entry.ss, outputDir);
-            }
-            else {
-                html += renderNativeStep(entry.ns);
-            }
+        for (const node of roots) {
+            html += renderNode(node);
         }
         html += '</div>';
         html += '</details>';
@@ -1610,6 +1657,8 @@ details.native-step>summary::-webkit-details-marker{display:none}
 details.native-step[open]>summary .native-step-chevron{transform:rotate(90deg)}
 .native-step-error{font-size:11px;font-family:var(--mono);padding:4px 0 2px 22px;margin:0;white-space:pre-wrap;word-break:break-word;color:var(--text-muted)}
 .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}
 .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/dist/lib/test/testExtension.js

@@ -451,15 +451,25 @@ exports.test = test_1.test.extend({
  *   3. `_steps` is fully populated by the time `finalizeTest()` runs (the
  *      test body has already completed).
  */
-function collectNativeSteps(rawSteps) {
+function collectNativeSteps(rawSteps, startTimes) {
     const result = [];
     for (const step of rawSteps) {
         const cat = step.category ?? '';
+        const childRaw = Array.isArray(step.steps) ? step.steps : [];
+        const collectedChildren = collectNativeSteps(childRaw, startTimes);
         if (cat === 'expect' || cat === 'test.step') {
+            // Start time comes from the onStepBegin payload (captured by the
+            // pwApiStepLogger fixture into startTimes). If unavailable, fall
+            // back to the step's endWallTime so the window is zero-width and
+            // sibling steps don't get falsely nested inside.
+            const endWallTime = step.endWallTime ?? Date.now();
+            const startWallTime = (typeof step.stepId === 'string' && startTimes.get(step.stepId)) ||
+                endWallTime;
             result.push({
                 title: step.title ?? '',
                 category: cat,
-                endWallTime: step.endWallTime ?? Date.now(),
+                startWallTime,
+                endWallTime,
                 passed: !step.error,
                 error: step.error
                     ? { message: step.error.message, stack: step.error.stack }
@@ -471,15 +481,16 @@ function collectNativeSteps(rawSteps) {
                         column: step.location.column ?? 0,
                     }
                     : undefined,
+                children: collectedChildren,
             });
         }
-        // Recurse into child steps regardless of parent category so nested
-        // expect() calls inside test.step() blocks are captured.
-        if (Array.isArray(step.steps) && step.steps.length > 0) {
-            result.push(...collectNativeSteps(step.steps));
+        else {
+            // Parent is not a kept category (e.g. pw:api) — promote any qualifying
+            // descendants so a nested expect() still appears in the report.
+            result.push(...collectedChildren);
         }
     }
-    result.sort((a, b) => a.endWallTime - b.endWallTime);
+    result.sort((a, b) => a.startWallTime - b.startWallTime);
     return result;
 }
 // ---------------------------------------------------------------------------
@@ -689,9 +700,20 @@ function installPlaywrightStepLogger(testInfo) {
     const originalOnStepEnd = callbacks && typeof callbacks.onStepEnd === 'function'
         ? callbacks.onStepEnd
         : null;
+    const originalOnStepBegin = callbacks && typeof callbacks.onStepBegin === 'function'
+        ? callbacks.onStepBegin
+        : null;
     if (!callbacks || !originalOnStepEnd || !stepMap) {
         return () => { };
     }
+    // Stash a stepId -> wallTime map on testInfo so collectNativeSteps can
+    // look up start times when building the report hierarchy. Playwright
+    // doesn't store wallTime on the step object itself — it's only emitted
+    // via the onStepBegin payload — so we capture it here. Without this,
+    // `test.step` blocks have no recoverable start time and any preceding
+    // tool-call step gets falsely nested inside them.
+    const startTimes = new Map();
+    ti.__donobuStepStartTimes = startTimes;
     let installed = false;
     try {
         callbacks.onStepEnd = function patchedOnStepEnd(payload) {
@@ -710,6 +732,21 @@ function installPlaywrightStepLogger(testInfo) {
             }
             return ret;
         };
+        callbacks.onStepBegin = function patchedOnStepBegin(payload) {
+            const ret = originalOnStepBegin
+                ? originalOnStepBegin.call(this, payload)
+                : undefined;
+            try {
+                if (typeof payload?.stepId === 'string' &&
+                    typeof payload?.wallTime === 'number') {
+                    startTimes.set(payload.stepId, payload.wallTime);
+                }
+            }
+            catch (err) {
+                Logger_1.appLogger.debug('Failed to record Playwright step start time', err);
+            }
+            return ret;
+        };
         installed = true;
     }
     catch (err) {
@@ -718,6 +755,9 @@ function installPlaywrightStepLogger(testInfo) {
     return () => {
         if (installed) {
             callbacks.onStepEnd = originalOnStepEnd;
+            if (originalOnStepBegin) {
+                callbacks.onStepBegin = originalOnStepBegin;
+            }
         }
     };
 }
@@ -825,7 +865,8 @@ async function finalizeTest(page, testInfo, logBuffer, videoOption) {
         // Attach native Playwright steps (expect assertions, test.step blocks)
         // so the HTML report can show a unified timeline alongside AI tool calls.
         try {
-            const nativeSteps = collectNativeSteps(testInfo._steps ?? []);
+            const startTimes = testInfo.__donobuStepStartTimes ?? new Map();
+            const nativeSteps = collectNativeSteps(testInfo._steps ?? [], startTimes);
             if (nativeSteps.length > 0) {
                 await testInfo.attach('donobu-native-steps', {
                     body: JSON.stringify(nativeSteps),

package/dist/reporter/render.js

@@ -562,7 +562,7 @@ function renderErrors(errors) {
     }
     return html;
 }
-function renderNativeStep(ns) {
+function renderNativeStep(ns, childrenHtml) {
     const statusIcon = ns.passed
         ? '<span class="step-status-ok">&#10003;</span>'
         : '<span class="step-status-fail">&#10007;</span>';
@@ -573,7 +573,8 @@ function renderNativeStep(ns) {
     const snippet = ns.location?.file
         ? readSourceSnippet(ns.location.file, ns.location.line)
         : null;
-    const hasBody = snippet || (!ns.passed && ns.error?.message);
+    const hasError = !ns.passed && !!ns.error?.message;
+    const hasBody = !!snippet || hasError || !!childrenHtml;
     const renderHeader = (tag) => {
         let header = `<${tag} class="filmstrip-header">`;
         header += statusIcon;
@@ -592,17 +593,23 @@ function renderNativeStep(ns) {
     if (!hasBody) {
         return `<div class="filmstrip-step native-step">${renderHeader('div')}</div>`;
     }
-    // Failing steps render expanded so the error is immediately visible;
-    // passing steps collapse so a test with many expects stays scannable.
+    // Failures always render expanded so the error is immediately visible.
+    // test.step blocks with nested content also default open so users see
+    // what's inside; bare passing expects with just a snippet collapse to
+    // keep tests with many assertions scannable.
+    const defaultOpen = !ns.passed || (ns.category === 'test.step' && !!childrenHtml);
     const passClass = ns.passed ? 'native-step--passed' : 'native-step--failed';
-    let html = `<details class="filmstrip-step native-step ${passClass}"${ns.passed ? '' : ' open'}>`;
+    let html = `<details class="filmstrip-step native-step ${passClass}"${defaultOpen ? ' open' : ''}>`;
     html += renderHeader('summary');
-    if (!ns.passed && ns.error?.message) {
+    if (hasError) {
         html += `<pre class="native-step-error">${ansiToHtml(ns.error.message)}</pre>`;
     }
     if (snippet) {
         html += snippet;
     }
+    if (childrenHtml) {
+        html += childrenHtml;
+    }
     html += `</details>`;
     return html;
 }
@@ -853,31 +860,71 @@ function renderSteps(steps, stepScreenshots, nativeSteps, outputDir) {
         return '';
     }
     if (hasScreenshots || hasNative) {
-        const timeline = [
-            ...stepScreenshots.map((ss) => ({
-                t: ss.completedAt,
-                kind: 'donobu',
-                ss,
-            })),
-            ...nativeSteps.map((ns) => ({
-                t: ns.endWallTime,
-                kind: 'native',
-                ns,
-            })),
-        ];
-        timeline.sort((a, b) => a.t - b.t);
-        const stepCount = timeline.length;
+        const buildNativeTree = (nss) => nss.map((ns) => ({
+            kind: 'native',
+            ns,
+            t: ns.startWallTime,
+            tEnd: ns.endWallTime,
+            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) => {
+            for (const n of nodes) {
+                if (n.kind !== 'native') {
+                    continue;
+                }
+                if (d.ss.startedAt >= n.t && d.ss.completedAt <= n.tEnd) {
+                    if (!placeDonobu(n.children, d)) {
+                        n.children.push(d);
+                    }
+                    return true;
+                }
+            }
+            return false;
+        };
+        for (const ss of stepScreenshots) {
+            const d = { kind: 'donobu', ss, t: ss.startedAt };
+            if (!placeDonobu(roots, d)) {
+                roots.push(d);
+            }
+        }
+        const sortTree = (nodes) => {
+            nodes.sort((a, b) => a.t - b.t);
+            for (const n of nodes) {
+                if (n.kind === 'native') {
+                    sortTree(n.children);
+                }
+            }
+        };
+        sortTree(roots);
+        const countNodes = (nodes) => {
+            let c = 0;
+            for (const n of nodes) {
+                c += 1;
+                if (n.kind === 'native') {
+                    c += countNodes(n.children);
+                }
+            }
+            return c;
+        };
+        const renderNode = (node) => {
+            if (node.kind === 'donobu') {
+                return renderFilmstripStep(node.ss, outputDir);
+            }
+            const childrenHtml = node.children.length > 0
+                ? `<div class="native-step-children">${node.children.map(renderNode).join('')}</div>`
+                : '';
+            return renderNativeStep(node.ns, childrenHtml);
+        };
+        const stepCount = countNodes(roots);
         let html = '<details class="steps-section"><summary>Steps (' +
             stepCount +
             ')</summary>';
         html += '<div class="step-filmstrip">';
-        for (const entry of timeline) {
-            if (entry.kind === 'donobu') {
-                html += renderFilmstripStep(entry.ss, outputDir);
-            }
-            else {
-                html += renderNativeStep(entry.ns);
-            }
+        for (const node of roots) {
+            html += renderNode(node);
         }
         html += '</div>';
         html += '</details>';
@@ -1610,6 +1657,8 @@ details.native-step>summary::-webkit-details-marker{display:none}
 details.native-step[open]>summary .native-step-chevron{transform:rotate(90deg)}
 .native-step-error{font-size:11px;font-family:var(--mono);padding:4px 0 2px 22px;margin:0;white-space:pre-wrap;word-break:break-word;color:var(--text-muted)}
 .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}
 .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.32.0",
+  "version": "5.33.0",
   "description": "Create browser automations with an LLM agent and replay them as Playwright scripts.",
   "main": "dist/main.js",
   "module": "dist/esm/main.js",