donobu 5.22.0 → 5.24.0

package/dist/apis/SuitesApi.d.ts

@@ -0,0 +1,36 @@
+import type { Request, Response } from 'express';
+import type { SuitesManager } from '../managers/SuitesManager';
+import type { TestsManager } from '../managers/TestsManager';
+/**
+ * API controller for managing suites.
+ */
+export declare class SuitesApi {
+    private readonly suitesManager;
+    private readonly testsManager;
+    constructor(suitesManager: SuitesManager, testsManager: TestsManager);
+    /**
+     * GET /api/suites — list suites with optional filtering and pagination.
+     */
+    getSuites(req: Request, res: Response): Promise<void>;
+    /**
+     * POST /api/suites — create a new suite.
+     */
+    createSuite(req: Request, res: Response): Promise<void>;
+    /**
+     * GET /api/suites/:suiteId — get a suite by ID.
+     */
+    getSuite(req: Request, res: Response): Promise<void>;
+    /**
+     * PUT /api/suites/:suiteId — update an existing suite.
+     */
+    updateSuite(req: Request, res: Response): Promise<void>;
+    /**
+     * DELETE /api/suites/:suiteId — delete a suite (tests are orphaned).
+     */
+    deleteSuite(req: Request, res: Response): Promise<void>;
+    /**
+     * GET /api/suites/:suiteId/tests — list tests in a suite.
+     */
+    getSuiteTests(req: Request, res: Response): Promise<void>;
+}
+//# sourceMappingURL=SuitesApi.d.ts.map

package/dist/apis/SuitesApi.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SuitesApi = void 0;
+const CreateSuite_1 = require("../models/CreateSuite");
+const SuiteMetadata_1 = require("../models/SuiteMetadata");
+/**
+ * API controller for managing suites.
+ */
+class SuitesApi {
+    constructor(suitesManager, testsManager) {
+        this.suitesManager = suitesManager;
+        this.testsManager = testsManager;
+    }
+    /**
+     * GET /api/suites — list suites with optional filtering and pagination.
+     */
+    async getSuites(req, res) {
+        const query = SuiteMetadata_1.SuitesQuerySchema.parse(req.query);
+        const result = await this.suitesManager.getSuites(query);
+        res.json({ suites: result.items, nextPageToken: result.nextPageToken });
+    }
+    /**
+     * POST /api/suites — create a new suite.
+     */
+    async createSuite(req, res) {
+        const params = CreateSuite_1.CreateSuiteSchema.parse(req.body);
+        const suite = await this.suitesManager.createSuite(params);
+        res.json(suite);
+    }
+    /**
+     * GET /api/suites/:suiteId — get a suite by ID.
+     */
+    async getSuite(req, res) {
+        const suiteId = String(req.params.suiteId);
+        const suite = await this.suitesManager.getSuiteById(suiteId);
+        res.json(suite);
+    }
+    /**
+     * PUT /api/suites/:suiteId — update an existing suite.
+     */
+    async updateSuite(req, res) {
+        const suiteId = String(req.params.suiteId);
+        const suiteMetadata = SuiteMetadata_1.SuiteMetadataSchema.parse({
+            ...req.body,
+            id: suiteId,
+        });
+        await this.suitesManager.updateSuite(suiteMetadata);
+        res.json(suiteMetadata);
+    }
+    /**
+     * DELETE /api/suites/:suiteId — delete a suite (tests are orphaned).
+     */
+    async deleteSuite(req, res) {
+        const suiteId = String(req.params.suiteId);
+        await this.suitesManager.deleteSuite(suiteId);
+        res.status(200).json({ deleted: true });
+    }
+    /**
+     * GET /api/suites/:suiteId/tests — list tests in a suite.
+     */
+    async getSuiteTests(req, res) {
+        const suiteId = String(req.params.suiteId);
+        const result = await this.testsManager.getTests({ suiteId });
+        res.json({ tests: result.items, nextPageToken: result.nextPageToken });
+    }
+}
+exports.SuitesApi = SuitesApi;
+//# sourceMappingURL=SuitesApi.js.map

package/dist/apis/TestsApi.d.ts

@@ -0,0 +1,40 @@
+import type { Request, Response } from 'express';
+import type { DonobuFlowsManager } from '../managers/DonobuFlowsManager';
+import type { TestsManager } from '../managers/TestsManager';
+/**
+ * API controller for managing tests.
+ */
+export declare class TestsApi {
+    private readonly testsManager;
+    private readonly flowsManager;
+    constructor(testsManager: TestsManager, flowsManager: DonobuFlowsManager);
+    /**
+     * GET /api/tests — list tests with optional filtering and pagination.
+     */
+    getTests(req: Request, res: Response): Promise<void>;
+    /**
+     * POST /api/tests — create a new test.
+     */
+    createTest(req: Request, res: Response): Promise<void>;
+    /**
+     * GET /api/tests/:testId — get a test by ID.
+     */
+    getTest(req: Request, res: Response): Promise<void>;
+    /**
+     * PUT /api/tests/:testId — update an existing test.
+     */
+    updateTest(req: Request, res: Response): Promise<void>;
+    /**
+     * DELETE /api/tests/:testId — delete a test and all its flows.
+     */
+    deleteTest(req: Request, res: Response): Promise<void>;
+    /**
+     * GET /api/tests/:testId/flows — list flows for a test.
+     */
+    getTestFlows(req: Request, res: Response): Promise<void>;
+    /**
+     * POST /api/tests/:testId/run — execute a test (create a new flow from it).
+     */
+    runTest(req: Request, res: Response): Promise<void>;
+}
+//# sourceMappingURL=TestsApi.d.ts.map

package/dist/apis/TestsApi.js

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TestsApi = void 0;
+const CreateTest_1 = require("../models/CreateTest");
+const TestMetadata_1 = require("../models/TestMetadata");
+/**
+ * API controller for managing tests.
+ */
+class TestsApi {
+    constructor(testsManager, flowsManager) {
+        this.testsManager = testsManager;
+        this.flowsManager = flowsManager;
+    }
+    /**
+     * GET /api/tests — list tests with optional filtering and pagination.
+     */
+    async getTests(req, res) {
+        const query = TestMetadata_1.TestsQuerySchema.parse(req.query);
+        const result = await this.testsManager.getTests(query);
+        res.json({ tests: result.items, nextPageToken: result.nextPageToken });
+    }
+    /**
+     * POST /api/tests — create a new test.
+     */
+    async createTest(req, res) {
+        const params = CreateTest_1.CreateTestSchema.parse(req.body);
+        const test = await this.testsManager.createTest(params);
+        res.json(test);
+    }
+    /**
+     * GET /api/tests/:testId — get a test by ID.
+     */
+    async getTest(req, res) {
+        const testId = String(req.params.testId);
+        const test = await this.testsManager.getTestById(testId);
+        res.json(test);
+    }
+    /**
+     * PUT /api/tests/:testId — update an existing test.
+     */
+    async updateTest(req, res) {
+        const testId = String(req.params.testId);
+        const testMetadata = TestMetadata_1.TestMetadataSchema.parse({
+            ...req.body,
+            id: testId,
+        });
+        await this.testsManager.updateTest(testMetadata);
+        res.json(testMetadata);
+    }
+    /**
+     * DELETE /api/tests/:testId — delete a test and all its flows.
+     */
+    async deleteTest(req, res) {
+        const testId = String(req.params.testId);
+        await this.testsManager.deleteTest(testId);
+        res.status(200).json({ deleted: true });
+    }
+    /**
+     * GET /api/tests/:testId/flows — list flows for a test.
+     */
+    async getTestFlows(req, res) {
+        const testId = String(req.params.testId);
+        const flows = await this.flowsManager.getFlows({ testId });
+        res.json({ flows: flows.items, nextPageToken: flows.nextPageToken });
+    }
+    /**
+     * POST /api/tests/:testId/run — execute a test (create a new flow from it).
+     */
+    async runTest(req, res) {
+        const testId = String(req.params.testId);
+        const newFlowConfig = await this.testsManager.getNewFlowFromTest(testId);
+        const flowHandle = await this.flowsManager.createFlow(newFlowConfig);
+        // After starting an autonomous run, switch the test to deterministic
+        // so subsequent runs replay the recorded actions.
+        if (newFlowConfig.initialRunMode === 'AUTONOMOUS') {
+            const test = await this.testsManager.getTestById(testId);
+            await this.testsManager.updateTest({
+                ...test,
+                nextRunMode: 'DETERMINISTIC',
+            });
+        }
+        res.json(flowHandle.donobuFlow.metadata);
+    }
+}
+exports.TestsApi = TestsApi;
+//# sourceMappingURL=TestsApi.js.map

package/dist/assets/openapi-schema.yaml

@@ -1496,6 +1496,7 @@ components:
         to restore when starting a flow. Exactly one variant should be provided:
         - `id` — Reference a flow by its ID and restore its persisted browser state.
         - `name` — Reference a flow by its name and restore its persisted browser state.
+        - `testId` — Reference a test by its ID and restore browser state from the most recent successful flow belonging to that test.
         - `json` — Provide the browser state inline as a JSON object.
       oneOf:
         - type: 'object'
@@ -1526,6 +1527,20 @@ components:
             value:
               type: 'string'
               description: 'The name of the flow whose browser state should be restored.'
+        - type: 'object'
+          description: 'Reference a test by ID to restore browser state from its most recent successful flow.'
+          required:
+            - 'type'
+            - 'value'
+          properties:
+            type:
+              type: 'string'
+              enum:
+                - 'testId'
+              description: 'Indicates the value is a test ID.'
+            value:
+              type: 'string'
+              description: 'A test ID. The browser state will be restored from the most recent successful flow belonging to this test.'
         - type: 'object'
           description: 'Provide browser state inline as a JSON object.'
           required:

package/dist/cli/playwright-json-to-html.js

@@ -425,8 +425,8 @@ function extractTests(jsonData) {
 const STATUS_CFG = {
     passed: {
         label: 'Passed',
-        color: '#FF7F3A',
-        bg: 'rgba(255,127,58,0.08)',
+        color: '#10b981',
+        bg: 'rgba(16,185,129,0.08)',
         icon: '✓',
     },
     failed: {
@@ -1222,7 +1222,7 @@ function renderResultTimeline(results, outputDir) {
     html += '</div>';
     return html;
 }
-const LOGO_SVG = '<svg viewBox="0 0 245 238" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#logo-clip)"><path d="M8.75 123.921L21.3889 110.367H32.0833L40.8333 133.602L43.75 155.869L32.0833 158.774L19.4444 155.869L8.75 123.921Z" fill="#FF7F3A"/><path d="M237.225 125.857L224.586 112.303H213.891L205.141 135.539L202.225 157.806L213.891 160.71L226.53 157.806L237.225 125.857Z" fill="#FF7F3A"/><path d="M130.276 57.1198L55.415 78.4187L46.665 88.1V142.315V164.583L68.0539 206.212L93.3317 225.575L117.637 231.384C130.276 230.416 156.332 227.898 159.443 225.575C163.332 222.671 186.665 192.658 190.554 182.977C194.443 173.296 195.415 157.806 195.415 147.156C195.415 136.507 196.387 120.048 195.415 115.208C194.637 111.335 177.591 89.0682 169.165 78.4187L130.276 57.1198Z" fill="#FF7F3A"/><path d="M129.868 30.4824C131.882 28.9302 134.006 26.8043 135.359 24.6522C136.96 22.1107 137.166 19.9586 138.26 17.5486C138.487 17.0434 138.418 16.0226 139.353 16.8172C139.565 16.9961 141.99 20.9373 142.291 21.5214C144.854 26.5781 145.435 32.282 145.943 37.8597C168.385 44.6265 188.639 58.1076 200.824 78.3555C205.004 85.296 209.099 93.9466 210.108 101.971C224.772 94.6044 239.515 103.244 243.626 118.262C250.342 142.793 231.583 169.955 205.421 169.855C204.697 174.096 204.153 178.232 202.975 182.4C196.089 206.684 169.943 227.994 146.101 234.582C99.7856 247.374 45.9189 218.933 39.5938 169.782C13.2839 169.982-5.80773 142.093 1.61651 117.51C5.93895 103.192 20.5496 94.6201 34.5791 101.955C35.3453 101.903 36.3176 96.3197 36.6875 95.1358C41.9188 78.566 53.1846 63.2537 67.0819 52.8614C80.1232 43.1111 99.2202 37.8281 107.247 22.9421C111.099 15.7964 111.564 7.89294 110.333-.0157471C123.083 4.47268 130.724 17.1855 129.863 30.4719L129.868 30.4824ZM121.953 106.181C116.272 96.8144 103.95 89.0267 93.0272 87.4008C79.1774 85.3434 65.745 91.2788 58.8492 103.544C48.8727 121.288 56.6246 142.414 74.9606 150.349C50.8279 179.885 74.8179 211.972 107.157 218.949C130.492 223.985 160.295 216.781 173.69 195.828C183.032 181.216 180.908 163.446 169.98 150.349C195.931 140.352 197.643 103.692 172.971 90.8526C155.042 81.5232 133.636 89.8213 123.041 105.849L121.953 106.181ZM36.9517 154.538C35.9107 151.496 35.1075 148.334 34.4787 145.182C33.4219 139.889 32.328 133.38 32.1801 128.018C32.0057 121.793 35.266 115.552 26.954 113.774C15.5138 111.327 12.3803 123.834 13.2628 132.664C14.4306 144.345 24.3067 156.327 36.957 154.538H36.9517ZM217.876 113.658C216.338 113.968 212.423 116.331 212.195 118.036C212.053 119.12 212.734 120.425 212.761 121.666C212.882 127.481 212.407 133.658 211.53 139.41C210.8 144.193 209.553 149.255 208.063 153.864C207.921 155.969 213.178 154.69 214.436 154.401C222.732 152.512 229.21 144.277 231.055 136.253C233.237 126.734 231.261 110.937 217.871 113.663L217.876 113.658Z" fill="black"/><path d="M158.212 170.413C162.36 169.755 164.738 174.88 161.018 178.48C148.087 190.971 111.162 196.554 95.0185 189.509C91.848 188.125 91.1293 183.589 94.2998 181.958C96.5192 180.816 102.902 183.021 105.904 183.399C119.711 185.136 134.507 183.226 147.104 177.248C149.308 176.206 157.44 170.539 158.206 170.413H158.212Z" fill="black"/><path d="M150.305 114.72C163.975 111.91 165.682 135.542 153.835 137.152C140.884 138.915 139.943 116.846 150.305 114.72Z" fill="black"/><path d="M92.7645 114.721C103.808 112.437 108.141 129.933 99.2058 135.853C88.7326 142.788 79.628 123.75 90.0061 116.178C90.767 115.626 91.8503 114.91 92.7645 114.721Z" fill="black"/><path d="M132.355 145.198C137.211 144.109 140.059 148.608 137.713 152.643C136.217 155.222 126.283 159.526 124.841 156.653C123.715 152.88 128.74 146.008 132.355 145.198Z" fill="black"/><path d="M110.192 145.188C116.206 143.872 123.155 155.432 119.847 157.453C115.984 158.085 107.223 154.901 106.657 150.56C106.367 148.308 107.899 145.693 110.198 145.188H110.192Z" fill="black"/></g><defs><clipPath id="logo-clip"><rect width="245" height="237.65" fill="white"/></clipPath></defs></svg>';
+const LOGO_SVG = '<svg viewBox="0 0 245 238" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#logo-clip)"><path d="M8.75 123.921L21.3889 110.367H32.0833L40.8333 133.602L43.75 155.869L32.0833 158.774L19.4444 155.869L8.75 123.921Z" fill="#FF7F3A"/><path d="M237.225 125.857L224.586 112.303H213.891L205.141 135.539L202.225 157.806L213.891 160.71L226.53 157.806L237.225 125.857Z" fill="#FF7F3A"/><path d="M130.276 57.1198L55.415 78.4187L46.665 88.1V142.315V164.583L68.0539 206.212L93.3317 225.575L117.637 231.384C130.276 230.416 156.332 227.898 159.443 225.575C163.332 222.671 186.665 192.658 190.554 182.977C194.443 173.296 195.415 157.806 195.415 147.156C195.415 136.507 196.387 120.048 195.415 115.208C194.637 111.335 177.591 89.0682 169.165 78.4187L130.276 57.1198Z" fill="#FF7F3A"/><path d="M129.868 30.4824C131.882 28.9302 134.006 26.8043 135.359 24.6522C136.96 22.1107 137.166 19.9586 138.26 17.5486C138.487 17.0434 138.418 16.0226 139.353 16.8172C139.565 16.9961 141.99 20.9373 142.291 21.5214C144.854 26.5781 145.435 32.282 145.943 37.8597C168.385 44.6265 188.639 58.1076 200.824 78.3555C205.004 85.296 209.099 93.9466 210.108 101.971C224.772 94.6044 239.515 103.244 243.626 118.262C250.342 142.793 231.583 169.955 205.421 169.855C204.697 174.096 204.153 178.232 202.975 182.4C196.089 206.684 169.943 227.994 146.101 234.582C99.7856 247.374 45.9189 218.933 39.5938 169.782C13.2839 169.982-5.80773 142.093 1.61651 117.51C5.93895 103.192 20.5496 94.6201 34.5791 101.955C35.3453 101.903 36.3176 96.3197 36.6875 95.1358C41.9188 78.566 53.1846 63.2537 67.0819 52.8614C80.1232 43.1111 99.2202 37.8281 107.247 22.9421C111.099 15.7964 111.564 7.89294 110.333-.0157471C123.083 4.47268 130.724 17.1855 129.863 30.4719L129.868 30.4824ZM121.953 106.181C116.272 96.8144 103.95 89.0267 93.0272 87.4008C79.1774 85.3434 65.745 91.2788 58.8492 103.544C48.8727 121.288 56.6246 142.414 74.9606 150.349C50.8279 179.885 74.8179 211.972 107.157 218.949C130.492 223.985 160.295 216.781 173.69 195.828C183.032 181.216 180.908 163.446 169.98 150.349C195.931 140.352 197.643 103.692 172.971 90.8526C155.042 81.5232 133.636 89.8213 123.041 105.849L121.953 106.181ZM36.9517 154.538C35.9107 151.496 35.1075 148.334 34.4787 145.182C33.4219 139.889 32.328 133.38 32.1801 128.018C32.0057 121.793 35.266 115.552 26.954 113.774C15.5138 111.327 12.3803 123.834 13.2628 132.664C14.4306 144.345 24.3067 156.327 36.957 154.538H36.9517ZM217.876 113.658C216.338 113.968 212.423 116.331 212.195 118.036C212.053 119.12 212.734 120.425 212.761 121.666C212.882 127.481 212.407 133.658 211.53 139.41C210.8 144.193 209.553 149.255 208.063 153.864C207.921 155.969 213.178 154.69 214.436 154.401C222.732 152.512 229.21 144.277 231.055 136.253C233.237 126.734 231.261 110.937 217.871 113.663L217.876 113.658Z" fill="#1a1a1a"/><path d="M158.212 170.413C162.36 169.755 164.738 174.88 161.018 178.48C148.087 190.971 111.162 196.554 95.0185 189.509C91.848 188.125 91.1293 183.589 94.2998 181.958C96.5192 180.816 102.902 183.021 105.904 183.399C119.711 185.136 134.507 183.226 147.104 177.248C149.308 176.206 157.44 170.539 158.206 170.413H158.212Z" fill="#1a1a1a"/><path d="M150.305 114.72C163.975 111.91 165.682 135.542 153.835 137.152C140.884 138.915 139.943 116.846 150.305 114.72Z" fill="#1a1a1a"/><path d="M92.7645 114.721C103.808 112.437 108.141 129.933 99.2058 135.853C88.7326 142.788 79.628 123.75 90.0061 116.178C90.767 115.626 91.8503 114.91 92.7645 114.721Z" fill="#1a1a1a"/><path d="M132.355 145.198C137.211 144.109 140.059 148.608 137.713 152.643C136.217 155.222 126.283 159.526 124.841 156.653C123.715 152.88 128.74 146.008 132.355 145.198Z" fill="#1a1a1a"/><path d="M110.192 145.188C116.206 143.872 123.155 155.432 119.847 157.453C115.984 158.085 107.223 154.901 106.657 150.56C106.367 148.308 107.899 145.693 110.198 145.188H110.192Z" fill="#1a1a1a"/></g><defs><clipPath id="logo-clip"><rect width="245" height="237.65" fill="white"/></clipPath></defs></svg>';
 function generateHtml(jsonData, triage, outputDir) {
     const tests = extractTests(jsonData);
     const isMergedReport = !!jsonData.metadata?.donobuMergedReport;
@@ -1271,7 +1271,9 @@ function generateHtml(jsonData, triage, outputDir) {
     // Group by file
     const uniqueFiles = new Set(tests.map((t) => t.file));
     // --- Build HTML sections ---
-    // Build test bar blocks (one square per test, ordered by status)
+    // Pre-assign stable IDs for each test (used by both bar blocks and cards)
+    const testIds = tests.map(() => `t-${uid()}`);
+    // Build test bar blocks (one square per test, ordered by status, clickable)
     const statusOrder = [
         'passed',
         'healed',
@@ -1281,11 +1283,18 @@ function generateHtml(jsonData, triage, outputDir) {
         'skipped',
     ];
     let testBarHtml = '';
-    for (const status of statusOrder) {
-        const n = counts[status] ?? 0;
-        for (let i = 0; i < n; i++) {
-            testBarHtml += `<div class="test-bar-block bar-${status.toLowerCase()}" title="${cfg(status).label}"></div>`;
-        }
+    // Build an index of tests sorted by status
+    const sortedTestIndices = [...tests.keys()].sort((a, b) => {
+        const sa = statusOrder.indexOf(tests[a].status);
+        const sb = statusOrder.indexOf(tests[b].status);
+        return (sa === -1 ? 99 : sa) - (sb === -1 ? 99 : sb);
+    });
+    for (const idx of sortedTestIndices) {
+        const test = tests[idx];
+        const sc = cfg(test.status);
+        const displayFile = test.file.split('/').pop() ?? test.file;
+        const tooltip = `${displayFile} (${test.specTitle}) — ${sc.label}`;
+        testBarHtml += `<div class="test-bar-block bar-${test.status.toLowerCase()}" data-tooltip="${esc(tooltip)}" data-target="${testIds[idx]}"></div>`;
     }
     // Build stat pills (combined summary + filter controls)
     const statPillEntries = [
@@ -1314,14 +1323,15 @@ function generateHtml(jsonData, triage, outputDir) {
     for (const pill of statPillEntries) {
         const count = counts[pill.key] ?? 0;
         if (count > 0) {
-            statPillsHtml += `<button class="stat-pill" data-filter="${pill.key}"><span class="summary-stat-icon ${pill.iconClass}">${pill.icon}</span>${pill.label} (${count})</button>`;
+            statPillsHtml += `<button class="stat-pill" data-filter="${pill.key}">${pill.label}<span class="pill-count">${count}</span></button>`;
         }
     }
     // Flat test list
     let testSectionsHtml = '';
-    for (const test of tests) {
+    for (let ti = 0; ti < tests.length; ti++) {
+        const test = tests[ti];
         const sc = cfg(test.status);
-        const testId = `t-${uid()}`;
+        const testId = testIds[ti];
         const hasMultipleResults = test.results.length > 1;
         const lastResult = test.results.at(-1);
         const displayFileName = test.file.split('/').pop() ?? test.file;
@@ -1334,15 +1344,24 @@ function generateHtml(jsonData, triage, outputDir) {
         if (test.status === 'failed' || test.status === 'healed') {
             detailsHtml += renderQuickActions(test);
         }
-        // 3. Errors + screenshots — raw evidence
+        // 3. Errors + screenshots — raw evidence (side by side when both present)
         if (hasMultipleResults) {
             detailsHtml += renderResultTimeline(test.results, outputDir);
         }
         else if (lastResult) {
-            if (lastResult.errors.length) {
-                detailsHtml += `<div class="detail-section">${renderErrors(lastResult.errors)}</div>`;
+            const errHtml = lastResult.errors.length
+                ? renderErrors(lastResult.errors)
+                : '';
+            const attHtml = renderAttachments(lastResult.attachments, outputDir, lastResult.stepScreenshots);
+            if (errHtml && attHtml) {
+                detailsHtml += `<div class="evidence-row"><div class="evidence-col evidence-col-code">${errHtml}</div><div class="evidence-col evidence-col-img">${attHtml}</div></div>`;
+            }
+            else if (errHtml) {
+                detailsHtml += `<div class="detail-section">${errHtml}</div>`;
+            }
+            else if (attHtml) {
+                detailsHtml += attHtml;
             }
-            detailsHtml += renderAttachments(lastResult.attachments, outputDir, lastResult.stepScreenshots);
         }
         // 4. Self-healed banner
         if (test.isSelfHealed) {
@@ -1367,9 +1386,14 @@ function generateHtml(jsonData, triage, outputDir) {
         const hasDetails = detailsHtml.length > 0;
         const expandableClass = hasDetails ? 'expandable' : '';
         const chevron = hasDetails
-            ? '<span class="chevron">&#9656;</span>'
+            ? '<span class="chevron"></span>'
             : '<span class="chevron-spacer"></span>';
         const totalTestDuration = test.results.reduce((s, r) => s + r.duration, 0);
+        const totalStepCount = test.results.reduce((s, r) => s + r.stepScreenshots.length, 0);
+        // Flow ID line goes inside the detail section (not on the summary row)
+        const flowIdDetailHtml = test.flowId
+            ? `<div class="flow-id-detail"><span class="detail-label">Flow ID</span><span class="flow-id-value">${esc(test.flowId)}<button class="copy-flow-id" data-flow-id="${esc(test.flowId)}" title="Copy flow ID"><svg viewBox="0 0 24 24"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg></button></span></div>`
+            : '';
         testSectionsHtml += `
       <div class="test-card ${sc.label.toLowerCase().replace(/ /g, '')} ${expandableClass}" data-status="${test.status}" ${hasDetails ? `data-detail="${testId}"` : ''}>
         <div class="test-summary">
@@ -1377,12 +1401,12 @@ function generateHtml(jsonData, triage, outputDir) {
           <span class="status-dot" style="background:${sc.color}" title="${sc.label}"></span>
           <div class="test-name-group">
             <span class="test-name"><span class="test-file">${esc(displayFileName)}</span> (${esc(test.specTitle)})</span>
-            ${test.flowId ? `<span class="flow-id">Flow ID: ${esc(test.flowId)}<button class="copy-flow-id" data-flow-id="${esc(test.flowId)}" title="Copy flow ID"><svg viewBox="0 0 24 24"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg></button></span>` : ''}
           </div>
           ${test.plan ? `<span class="inline-reason" style="color:${reasonCfg(test.plan.plan.failureReason).color}" title="${esc(test.plan.plan.failureReason)}">${esc(reasonCfg(test.plan.plan.failureReason).label)}</span>` : ''}
+          ${totalStepCount > 0 ? `<span class="test-step-count" title="${totalStepCount} steps">${totalStepCount} steps</span>` : ''}
           <span class="test-duration">${fmtDuration(totalTestDuration)}</span>
         </div>
-        ${hasDetails ? `<div class="test-detail" id="${testId}">${detailsHtml}</div>` : ''}
+        ${hasDetails ? `<div class="test-detail" id="${testId}">${flowIdDetailHtml}${detailsHtml}</div>` : ''}
       </div>`;
     }
     const mergedBanner = isMergedReport
@@ -1397,21 +1421,41 @@ function generateHtml(jsonData, triage, outputDir) {
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Donobu Test Report</title>
+<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&display=swap" rel="stylesheet">
 <link rel="icon" type="image/png" href="data:image/png;base64,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">
 <style>
 *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
 :root{
-  --bg:#0f1117;--surface:#161922;--surface-raised:#1e2130;
-  --border:#2a2d3a;--border-subtle:#222536;
+  --bg:#191919;--surface:#212121;--surface-raised:#2a2a2a;
+  --border:#333;--border-subtle:#2a2a2a;
   --text:#e4e5ea;--text-muted:#8b8d98;--text-dim:#5f6170;
   --green:#10b981;--red:#ef4444;--purple:#8b5cf6;
   --amber:#f59e0b;--orange:#f97316;--gray:#6b7280;
   --accent:#FF7F3A;
   --radius:8px;--radius-lg:12px;
+  --font:'Inter Tight',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
   --mono:'SF Mono','Fira Code','Fira Mono',Menlo,Consolas,monospace;
+  --overlay-light:rgba(255,255,255,.04);--overlay-light-hover:rgba(255,255,255,.06);--overlay-light-active:rgba(255,255,255,.12);
+  --bar-pass:#2d8a6e;--bar-fail:#b44a4a;--bar-heal:#7352b5;--bar-warn:#a8832e;--bar-skip:#4a4a4f;
+  --dot-pass:#2d8a6e;--dot-fail:#b44a4a;--dot-heal:#7352b5;--dot-warn:#a8832e;--dot-skip:#4a4a4f;
+}
+@media(prefers-color-scheme:light){
+  :root{
+    --bg:#f8f8fa;--surface:#ffffff;--surface-raised:#f2f2f4;
+    --border:#c8c8cd;--border-subtle:#dcdce0;
+    --text:#1a1a2e;--text-muted:#3f3f46;--text-dim:#71717a;
+    --green:#059669;--red:#dc2626;--purple:#7c3aed;
+    --amber:#d97706;--orange:#ea580c;--gray:#6b7280;
+    --accent:#e8621a;
+    --overlay-light:rgba(0,0,0,.03);--overlay-light-hover:rgba(0,0,0,.04);--overlay-light-active:rgba(0,0,0,.08);
+    --bar-pass:var(--green);--bar-fail:var(--red);--bar-heal:var(--purple);--bar-warn:var(--amber);--bar-skip:var(--gray);
+    --dot-pass:var(--green);--dot-fail:var(--red);--dot-heal:var(--purple);--dot-warn:var(--amber);--dot-skip:var(--gray);
+  }
 }
-body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;padding:0}
-.container{max-width:1100px;margin:0 auto;padding:32px 24px}
+body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.5;padding:0;position:relative;min-height:100vh}
+body::before{content:'';position:fixed;top:-750px;left:50%;transform:translateX(-50%);width:900px;height:800px;border-radius:50%;background:rgba(255,127,58,.15);filter:blur(256px);pointer-events:none;z-index:0}
+@media(prefers-color-scheme:light){body::before{top:-780px;background:rgba(255,127,58,.06);filter:blur(300px)}}
+.container{max-width:1100px;margin:0 auto;padding:32px 24px;position:relative;z-index:1}
 
 /* Header */
 .report-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
@@ -1424,24 +1468,24 @@ body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica N
 .summary-card{background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:20px 24px;margin:20px 0 16px}
 .summary-sub{font-size:13px;color:var(--text-muted);margin-bottom:14px}
 .test-bar{display:flex;gap:4px;margin-bottom:16px;flex-wrap:wrap}
-.test-bar-block{width:28px;height:28px;border-radius:4px;flex-shrink:0;transition:transform .1s}
+.test-bar-block{width:28px;height:28px;border-radius:4px;flex-shrink:0;transition:transform .1s;cursor:pointer;position:relative}
 .test-bar-block:hover{transform:scale(1.15)}
-.test-bar-block.bar-passed{background:var(--accent)}
-.test-bar-block.bar-healed{background:var(--purple)}
-.test-bar-block.bar-failed,.test-bar-block.bar-timedout,.test-bar-block.bar-interrupted{background:rgba(255,255,255,.12)}
-.test-bar-block.bar-skipped{background:rgba(255,255,255,.06)}
-.summary-stats{display:flex;align-items:center;gap:8px}
+.test-bar-block[data-tooltip]:hover::after{content:attr(data-tooltip);position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);padding:6px 10px;font-size:11px;font-family:var(--font);white-space:nowrap;z-index:10;pointer-events:none;box-shadow:0 4px 12px rgba(0,0,0,.2)}
+.test-bar-block[data-tooltip]:hover::before{content:'';position:absolute;top:calc(100% + 2px);left:50%;transform:translateX(-50%);border:5px solid transparent;border-bottom-color:var(--border);z-index:10;pointer-events:none}
+.test-bar-block.bar-passed{background:var(--bar-pass)}
+.test-bar-block.bar-healed{background:var(--bar-heal)}
+.test-bar-block.bar-failed{background:var(--bar-fail)}
+.test-bar-block.bar-timedout,.test-bar-block.bar-interrupted{background:var(--bar-warn)}
+.test-bar-block.bar-skipped{background:var(--bar-skip)}
+.summary-stats{display:flex;align-items:center;gap:8px;padding:12px 0}
 .stat-pills{display:flex;gap:6px;flex-wrap:wrap;flex:1}
-.stat-pill{display:flex;align-items:center;gap:6px;background:none;border:1px solid var(--border-subtle);border-radius:var(--radius);padding:6px 14px;cursor:pointer;font-size:14px;font-weight:600;font-family:inherit;color:var(--text-muted);transition:background .15s,border-color .15s,color .15s}
-.stat-pill:hover{background:var(--surface-raised);border-color:var(--border)}
-.stat-pill.active{background:var(--surface-raised);border-color:var(--text-dim);color:var(--text)}
-.summary-stat-icon{width:22px;height:22px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
-.summary-stat-icon.icon-pass{background:rgba(16,185,129,.15);color:var(--green)}
-.summary-stat-icon.icon-heal{background:rgba(139,92,246,.15);color:var(--purple)}
-.summary-stat-icon.icon-fail{background:rgba(239,68,68,.15);color:var(--red)}
-.summary-stat-icon.icon-skip{background:rgba(107,114,128,.15);color:var(--gray)}
-.clear-filter{background:none;border:1px solid var(--border-subtle);color:var(--text-dim);padding:6px 12px;border-radius:var(--radius);cursor:pointer;font-size:12px;font-family:inherit;display:none;align-items:center;gap:4px;flex-shrink:0;transition:color .15s,border-color .15s}
-.clear-filter:hover{color:var(--text);border-color:var(--text-muted)}
+.stat-pill{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:6px 14px;cursor:pointer;font-size:13px;font-weight:600;font-family:inherit;color:var(--text-muted);transition:all .2s}
+.stat-pill:hover{background:var(--surface-raised);border-color:var(--text-dim)}
+.stat-pill.active{background:var(--accent);border-color:var(--accent);color:#fff}
+.stat-pill.active .pill-count{background:rgba(255,255,255,.25);color:#fff}
+.pill-count{font-size:11px;font-weight:700;background:var(--overlay-light-active);color:var(--text-dim);padding:1px 7px;border-radius:calc(var(--radius) - 2px);min-width:20px;text-align:center;transition:all .2s}
+.clear-filter{background:var(--surface);border:1px solid var(--border);color:var(--text-muted);padding:6px 14px;border-radius:var(--radius);cursor:pointer;font-size:12px;font-weight:500;font-family:inherit;display:none;align-items:center;gap:5px;flex-shrink:0;transition:all .2s}
+.clear-filter:hover{background:var(--surface-raised);border-color:var(--text-dim);color:var(--text)}
 .clear-filter.visible{display:flex}
 
 /* Test cards */
@@ -1451,27 +1495,38 @@ body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica N
 .test-summary{display:flex;align-items:center;gap:10px;padding:14px 16px;transition:background .1s}
 .test-card.expandable .test-summary{cursor:pointer}
 .test-card.expandable .test-summary:hover{background:var(--surface-raised)}
-.chevron{font-size:11px;color:var(--text-dim);transition:transform .15s;flex-shrink:0;width:12px}
-.chevron-spacer{width:12px;flex-shrink:0}
+.chevron{width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent var(--text-muted);flex-shrink:0;transition:transform .2s;margin:0 5px}
+.chevron-spacer{width:18px;flex-shrink:0}
 .test-card.expanded .chevron{transform:rotate(90deg)}
 .status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
 .test-file{color:var(--text);font-weight:600}
 .test-name-group{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
 .test-name{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .flow-id{font-size:11px;color:var(--text-dim);opacity:.6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:4px}
-.copy-flow-id{background:rgba(255,255,255,.06);border:none;border-radius:4px;cursor:pointer;padding:3px;display:flex;align-items:center;justify-content:center;color:var(--text-dim);transition:background .15s,color .15s;flex-shrink:0}
-.copy-flow-id:hover{background:rgba(255,255,255,.12);color:#fff}
+.copy-flow-id{background:var(--overlay-light-hover);border:none;border-radius:4px;cursor:pointer;padding:3px;display:flex;align-items:center;justify-content:center;color:var(--text-dim);transition:background .15s,color .15s;flex-shrink:0}
+.copy-flow-id:hover{background:var(--overlay-light-active);color:var(--text)}
 .copy-flow-id svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
 .copy-flow-id .check-icon{color:#22c55e}
-.inline-reason{font-size:11px;font-weight:500;flex-shrink:0;padding:1px 8px;border-radius:4px;background:rgba(255,255,255,.04)}
+.inline-reason{font-size:11px;font-weight:500;flex-shrink:0;padding:1px 8px;border-radius:4px;background:var(--overlay-light)}
+.test-step-count{font-size:11px;color:var(--text-dim);flex-shrink:0;font-family:var(--mono);padding:2px 8px;background:rgba(255,255,255,.04);border-radius:4px}
 .test-duration{font-size:12px;color:var(--text-dim);flex-shrink:0;font-family:var(--mono)}
+.flow-id-detail{display:flex;align-items:center;gap:10px;margin-bottom:4px;padding:8px 12px;background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius)}
+.flow-id-detail .detail-label{margin-bottom:0;font-size:10px;letter-spacing:.8px}
+.flow-id-value{font-size:12px;color:var(--text-dim);font-family:var(--mono);display:flex;align-items:center;gap:6px}
 
 /* Test detail */
-.test-detail{padding:0 16px 14px 50px;display:none;flex-direction:column;gap:10px}
+.test-detail{padding:10px 20px 16px 50px;display:none;flex-direction:column;gap:10px}
 .test-card.expanded .test-detail{display:flex}
 .detail-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:6px}
 .detail-objective{font-size:13px;padding:10px 14px;background:var(--bg);border-radius:var(--radius);border:1px solid var(--border-subtle);white-space:pre-wrap;word-break:break-word}
 
+/* Evidence row — errors + screenshot side by side */
+.evidence-row{display:flex;gap:16px;align-items:flex-start}
+.evidence-col-code{flex:1;min-width:0}
+.evidence-col-img{flex-shrink:0;max-width:50%}
+.evidence-col-img .screenshot{max-height:400px}
+@media(max-width:768px){.evidence-row{flex-direction:column}.evidence-col-img{max-width:100%}}
+
 /* Failure summary banner — the prominent "why did this fail?" block */
 .failure-summary-banner{background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.18);border-radius:var(--radius-lg);padding:14px 16px}
 .failure-summary-header{display:flex;align-items:center;gap:8px;margin-bottom:6px}
@@ -1524,11 +1579,13 @@ body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica N
 .filmstrip-summary{font-size:11px;color:var(--text-dim);margin-top:2px;padding-left:22px}
 .step-status-ok{color:var(--green);font-size:12px;font-weight:bold}
 .step-status-fail{color:var(--red);font-size:12px;font-weight:bold}
-.filmstrip-detail{display:none;padding:8px 0 4px 22px;flex-direction:column;gap:8px}
+.filmstrip-detail{display:none;padding:8px 0 4px 22px;flex-direction:row;gap:12px;align-items:flex-start}
 .filmstrip-step.open .filmstrip-detail{display:flex}
+.filmstrip-detail>a{flex-shrink:0;max-width:50%}
+.filmstrip-detail>.step-json-wrap{flex:1;min-width:0}
 .step-json-wrap{position:relative}
-.step-json-wrap .copy-json{position:absolute;top:6px;right:6px;background:rgba(255,255,255,.06);border:none;border-radius:4px;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--text-dim);transition:background .15s,color .15s;z-index:1}
-.step-json-wrap .copy-json:hover{background:rgba(255,255,255,.12);color:#fff}
+.step-json-wrap .copy-json{position:absolute;top:6px;right:6px;background:var(--overlay-light-hover);border:none;border-radius:4px;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--text-dim);transition:background .15s,color .15s;z-index:1}
+.step-json-wrap .copy-json:hover{background:var(--overlay-light-active);color:var(--text)}
 .step-json-wrap .copy-json svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
 .step-json-wrap .copy-json .check-icon{color:#22c55e}
 .step-json{font-size:11px;font-family:var(--mono);background:var(--bg);border:1px solid var(--border-subtle);border-radius:var(--radius);padding:8px 12px;margin:0;color:var(--text-muted);overflow-x:auto;max-height:300px;overflow-y:auto}
@@ -1686,8 +1743,8 @@ body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica N
 .qa-label{font-size:12px;color:var(--text-muted);white-space:nowrap;min-width:140px}
 .qa-cmd-wrapper{display:flex;align-items:center;gap:6px;flex:1;min-width:0}
 .qa-cmd{font-size:12px;font-family:var(--mono);background:var(--bg-card);padding:5px 10px;border-radius:4px;border:1px solid var(--border-subtle);color:var(--text);white-space:nowrap;overflow-x:auto;flex:1;min-width:0}
-.qa-copy{background:rgba(255,255,255,.06);border:none;border-radius:4px;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--text-dim);transition:background .15s,color .15s;flex-shrink:0}
-.qa-copy:hover{background:rgba(255,255,255,.12);color:#fff}
+.qa-copy{background:var(--overlay-light-hover);border:none;border-radius:4px;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--text-dim);transition:background .15s,color .15s;flex-shrink:0}
+.qa-copy:hover{background:var(--overlay-light-active);color:var(--text)}
 .qa-copy svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
 .qa-copy .check-icon{color:#22c55e}
 .qa-source{font-size:12px;color:var(--text-dim);margin-top:6px;padding-top:6px;border-top:1px solid var(--border-subtle)}
@@ -1695,8 +1752,9 @@ body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica N
 
 /* Footer */
 .report-footer{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--text-dim);margin-top:32px;padding-top:16px;border-top:1px solid var(--border-subtle)}
-.footer-brand{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--text-muted)}
-.footer-brand svg{width:20px;height:20px}
+.footer-brand{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--text-muted);text-decoration:none}
+.footer-brand .logo{display:inline-flex;align-items:center}
+.footer-brand svg{width:18px;height:18px;vertical-align:middle}
 
 /* Lightbox */
 .lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:1000;align-items:center;justify-content:center;cursor:zoom-out}
@@ -1790,6 +1848,9 @@ body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica N
     if(pill){filterByStatus(pill.getAttribute('data-filter'));return}
     // Clear filter
     if(e.target.closest('[data-clear-filter]')){clearFilter();return}
+    // Test bar block click — scroll to and highlight the target test card
+    var barBlock=e.target.closest('.test-bar-block[data-target]');
+    if(barBlock){var tid=barBlock.getAttribute('data-target');var card=document.getElementById(tid);if(card){var tc=card.closest('.test-card');if(tc){tc.classList.add('expanded');tc.scrollIntoView({behavior:'smooth',block:'center'});tc.style.outline='2px solid var(--accent)';setTimeout(function(){tc.style.outline=''},1500)}}return}
     // Filmstrip step expand (skip if clicking a link inside)
     var step=e.target.closest('.filmstrip-step.expandable');
     if(step&&!e.target.closest('a')&&!e.target.closest('.audit-check')){step.classList.toggle('open');return}