donobu 5.41.3 → 5.42.0

package/dist/reporter/render.js

@@ -10,6 +10,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadTriageData = loadTriageData;
 exports.renderHtml = renderHtml;
+exports.renderPerTestStub = renderPerTestStub;
 const fs_1 = require("fs");
 const path_1 = require("path");
 const ansi_1 = require("../utils/ansi");
@@ -366,6 +367,7 @@ function extractTests(jsonData) {
                 tests.push({
                     file: suite.file,
                     specTitle: spec.title,
+                    testId: typeof test.testId === 'string' ? test.testId : '',
                     status,
                     isSelfHealed,
                     objective: objectiveAnnotation?.description ?? null,
@@ -577,18 +579,42 @@ function renderErrors(errors) {
     }
     return html;
 }
-function renderNativeStep(ns, childrenHtml) {
-    const statusIcon = ns.passed
-        ? '<span class="step-status-ok">&#10003;</span>'
-        : '<span class="step-status-fail">&#10007;</span>';
-    const categoryBadge = `<span class="native-step-badge native-step-badge--${ns.category}">${esc(ns.category)}</span>`;
+function renderNativeStep(ns, childrenHtml, verifyContext = false) {
+    // Expects inside an assert tool's cache-worthiness verification window are
+    // not real assertion checks — they're AssertTool re-running its own
+    // AI-emitted structured `expect()` calls to decide whether to cache them.
+    // When one fails, the AI's screenshot-based verdict still stands; only the
+    // structured locator faithfulness is in question. Render those with a
+    // distinct status (passed → "verified", failed → "diverged") so they
+    // don't look like assertion failures sitting under a passing assertion.
+    const statusIcon = verifyContext
+        ? ns.passed
+            ? '<span class="step-status-verified" title="Cache-verify check passed">&#10003;</span>'
+            : '<span class="step-status-diverged" title="Cache-verify locator did not match the AI&#39;s visual verdict">&#10073;</span>'
+        : ns.passed
+            ? '<span class="step-status-ok">&#10003;</span>'
+            : '<span class="step-status-fail">&#10007;</span>';
+    const categoryLabel = verifyContext
+        ? ns.passed
+            ? 'verify-cache'
+            : 'verify-cache diverged'
+        : ns.category;
+    const categoryClass = verifyContext
+        ? ns.passed
+            ? 'native-step-badge--verify'
+            : 'native-step-badge--verify-diverged'
+        : `native-step-badge--${ns.category}`;
+    const categoryBadge = `<span class="native-step-badge ${categoryClass}">${esc(categoryLabel)}</span>`;
     const locationStr = ns.location?.file
         ? esc(`${ns.location.file.replace(/.*[/\\]/, '')}:${ns.location.line}`)
         : '';
     const snippet = ns.location?.file
         ? readSourceSnippet(ns.location.file, ns.location.line)
         : null;
-    const hasError = !ns.passed && !!ns.error?.message;
+    // Cache-verify failures aren't surfaced as red errors; the message lives
+    // alongside the parent invocation's `cache · miss` pill instead. We still
+    // want the body open so the locator's call log is visible at a glance.
+    const hasError = !ns.passed && !!ns.error?.message && !verifyContext;
     const hasBody = !!snippet || hasError || !!childrenHtml;
     const renderHeader = (tag) => {
         let header = `<${tag} class="filmstrip-header">`;
@@ -609,9 +635,17 @@ function renderNativeStep(ns, childrenHtml) {
     // 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';
+    // keep tests with many assertions scannable. Cache-verify divergences
+    // are routine signal — start collapsed so they don't dominate the view.
+    const defaultOpen = !verifyContext &&
+        (!ns.passed || (ns.category === 'test.step' && !!childrenHtml));
+    const passClass = verifyContext
+        ? ns.passed
+            ? 'native-step--verify'
+            : 'native-step--verify-diverged'
+        : ns.passed
+            ? 'native-step--passed'
+            : 'native-step--failed';
     let html = `<details class="filmstrip-step native-step expandable ${passClass}"${defaultOpen ? ' open' : ''}>`;
     html += renderHeader('summary');
     if (hasError) {
@@ -679,12 +713,31 @@ function renderAiInvocation(inv, childrenHtml) {
         ? '<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 cacheState = inv.cacheHit
+        ? 'hit'
+        : inv.cacheStored
+            ? 'stored'
+            : 'miss';
+    const cacheLabel = {
+        hit: 'cache · hit',
+        stored: 'cache · stored',
+        miss: 'cache · miss',
+    };
+    const cacheTitle = {
+        hit: 'Replayed from the page-AI cache; no AI used for this step.',
+        stored: 'Live AI run; the resulting locators/steps were recorded to the page-AI cache. The next run can replay them without calling the AI.',
+        miss: "Live AI run; nothing was recorded to the page-AI cache. The next run will hit the AI again. For asserts, this typically means the AI's structured Playwright locators didn't reproduce its screenshot verdict.",
+    };
+    const cacheBadge = `<span class="ai-cache-badge ai-cache-badge--${cacheState}" title="${esc(cacheTitle[cacheState])}">${cacheLabel[cacheState]}</span>`;
+    // For a passing assert whose structured-step verifier failed, surface
+    // *why* the cache outcome was `miss`. The header pill carries the
+    // at-a-glance signal; this body content is the technical detail.
+    // (When the assert itself failed, the regular failure path already
+    // covers it.)
+    const showVerifierDetail = inv.passed && inv.verification?.failed === true;
     const hasError = !inv.passed && !!inv.error?.message;
     const hasAssertSteps = !!inv.assertSteps && inv.assertSteps.length > 0;
-    const hasBody = hasError || !!childrenHtml || hasAssertSteps;
+    const hasBody = hasError || !!childrenHtml || hasAssertSteps || showVerifierDetail;
     const renderHeader = (tag) => {
         let header = `<${tag} class="filmstrip-header">`;
         header +=
@@ -692,7 +745,7 @@ function renderAiInvocation(inv, childrenHtml) {
         header += statusIcon;
         header += `<span class="ai-invocation-title">${esc(inv.description)}</span>`;
         header += kindBadge;
-        header += cachedBadge;
+        header += cacheBadge;
         header += `</${tag}>`;
         return header;
     };
@@ -706,13 +759,20 @@ function renderAiInvocation(inv, childrenHtml) {
     // by default so the contents are visible without an extra click.
     const defaultOpen = !inv.passed || !!childrenHtml || hasAssertSteps;
     const passClass = inv.passed
-        ? 'ai-invocation--passed'
+        ? showVerifierDetail
+            ? 'ai-invocation--passed ai-invocation--cache-miss'
+            : 'ai-invocation--passed'
         : 'ai-invocation--failed';
     let html = `<details class="filmstrip-step ai-invocation expandable ${passClass}"${defaultOpen ? ' open' : ''}>`;
     html += renderHeader('summary');
     if (hasError) {
         html += `<pre class="native-step-error">${ansiToHtml(inv.error.message)}</pre>`;
     }
+    if (showVerifierDetail && inv.verification?.errorMessage) {
+        html +=
+            `<div class="ai-cache-miss-explainer">The AI&rsquo;s screenshot verdict (passed) is what counts. Its structured Playwright steps did not reproduce that verdict against the live page — most often an over-broad locator — so they were not cached. The diverging check is highlighted below.</div>` +
+                `<pre class="ai-cache-miss-detail">${ansiToHtml(inv.verification.errorMessage)}</pre>`;
+    }
     if (hasAssertSteps) {
         const lines = inv
             .assertSteps.map((s) => esc(formatAssertionStep(s)))
@@ -1070,6 +1130,28 @@ function renderSteps(steps, stepScreenshots, nativeSteps, aiInvocations, outputD
             }
             return c;
         };
+        // A native step is part of an AssertTool cache-worthiness verification
+        // (rather than a user-authored assertion) iff its time window falls
+        // inside the `verification` window of some enclosing AI invocation.
+        // `verifyWindows` is the ordered list of those windows; `inVerify`
+        // checks membership without scanning the tree.
+        const verifyWindows = [];
+        for (const inv of aiInvocations) {
+            if (inv.verification) {
+                verifyWindows.push({
+                    start: inv.verification.startedAt,
+                    end: inv.verification.endedAt,
+                });
+            }
+        }
+        const inVerify = (t, tEnd) => {
+            for (const w of verifyWindows) {
+                if (t >= w.start && tEnd <= w.end) {
+                    return true;
+                }
+            }
+            return false;
+        };
         const renderNode = (node) => {
             if (node.kind === 'donobu') {
                 return renderFilmstripStep(node.ss, outputDir);
@@ -1083,7 +1165,7 @@ function renderSteps(steps, stepScreenshots, nativeSteps, aiInvocations, outputD
             const childrenHtml = node.children.length > 0
                 ? `<div class="native-step-children">${node.children.map(renderNode).join('')}</div>`
                 : '';
-            return renderNativeStep(node.ns, childrenHtml);
+            return renderNativeStep(node.ns, childrenHtml, inVerify(node.t, node.tEnd));
         };
         const stepCount = countNodes(roots);
         let html = '<details class="steps-section"><summary>Steps (' +
@@ -1450,8 +1532,10 @@ function renderHtml(report, triage, outputDir) {
     // Group by file
     const uniqueFiles = new Set(tests.map((t) => t.file));
     // --- Build HTML sections ---
-    // Pre-assign stable IDs for each test (used by both bar blocks and cards)
-    const testIds = tests.map(() => `t-${uid()}`);
+    // Per-card IDs used by the test-detail div, bar-block `data-target`, and the
+    // outer `.test-card` anchor that `#?testId=<id>` deep links target. Sourced
+    // from Playwright's stable `TestCase.id`.
+    const testIds = tests.map((t) => `test-${t.testId}`);
     // Build test bar blocks (one square per test, ordered by status, clickable)
     const statusOrder = [
         'passed',
@@ -1594,7 +1678,7 @@ function renderHtml(report, triage, outputDir) {
             ? `<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-card ${sc.label.toLowerCase().replace(/ /g, '')} ${expandableClass}" id="${testId}" data-status="${test.status}" data-tags="${esc(JSON.stringify(test.tags))}" ${hasDetails ? `data-detail="${testId}"` : ''}>
         <div class="test-summary">
           ${chevron}
           <span class="status-dot" style="background:${sc.color}" title="${sc.label}"></span>
@@ -1606,7 +1690,7 @@ function renderHtml(report, triage, outputDir) {
           ${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}">${flowIdDetailHtml}${detailsHtml}</div>` : ''}
+        ${hasDetails ? `<div class="test-detail" id="detail-${testId}">${flowIdDetailHtml}${detailsHtml}</div>` : ''}
       </div>`;
     }
     const mergedBanner = isMergedReport
@@ -1688,6 +1772,32 @@ body::before{content:'';position:fixed;top:-750px;left:50%;transform:translateX(
 .clear-filter:hover{background:var(--surface-raised);border-color:var(--text-dim);color:var(--text)}
 .clear-filter.visible{display:flex}
 
+/* Tag filter controls: + button opens a menu of available tags; selecting one
+ * adds a removable chip. Multiple chips combine with logical AND. */
+.tag-filter-controls{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
+.tag-filter-trigger-wrap{position:relative;display:inline-flex}
+.add-tag-filter{background:var(--surface);border:1px solid var(--border);color:var(--text-muted);height:28px;padding:0 12px;border-radius:var(--radius);cursor:pointer;font-size:12px;font-weight:600;font-family:inherit;display:inline-flex;align-items:center;gap:4px;flex-shrink:0;transition:all .2s;line-height:1}
+.add-tag-filter .add-tag-plus{font-size:15px;line-height:1}
+.add-tag-filter:hover{background:var(--surface-raised);border-color:var(--text-dim);color:var(--text)}
+.add-tag-filter.active{background:var(--accent);border-color:var(--accent);color:#fff}
+.tag-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:200px;max-width:320px;max-height:280px;overflow-y:auto;background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:20;padding:4px;display:none}
+.tag-menu:not([hidden]){display:block}
+.tag-menu-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;font-size:12px;font-family:var(--mono);color:var(--text);background:transparent;border:none;border-radius:4px;cursor:pointer;text-align:left;width:100%;transition:background .15s}
+.tag-menu-item:hover{background:var(--surface)}
+.tag-menu-item .tag-menu-count{color:var(--text-muted);font-size:11px;font-family:var(--mono)}
+.tag-menu-empty{padding:8px 10px;font-size:12px;color:var(--text-muted);font-style:italic}
+.active-tag-filters{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
+.tag-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(255,127,58,.12);border:1px solid rgba(255,127,58,.3);color:var(--accent);font-size:11px;font-family:var(--mono);padding:3px 4px 3px 8px;border-radius:4px}
+.tag-chip-remove{background:transparent;border:none;color:inherit;cursor:pointer;font-size:14px;line-height:1;padding:0 4px;font-family:inherit;opacity:.7;transition:opacity .15s}
+.tag-chip-remove:hover{opacity:1}
+
+/* Total of cards visible under the currently composed filters (status + tags).
+ * The stat-pill counts always reflect totals; this disambiguates when filters
+ * intersect. Hidden until any filter is active. */
+.match-count{display:none;align-items:center;font-size:12px;color:var(--text-muted);font-family:var(--mono);padding:0 8px;height:28px;flex-shrink:0}
+.match-count.visible{display:inline-flex}
+.match-count-value{color:var(--text);font-weight:600;margin-left:6px}
+
 /* Test cards */
 .test-card{background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);margin-bottom:10px;overflow:hidden}
 .test-card.failed,.test-card.timedout,.test-card.interrupted{border-color:rgba(239,68,68,.2)}
@@ -1781,6 +1891,8 @@ body::before{content:'';position:fixed;top:-750px;left:50%;transform:translateX(
 .filmstrip-summary{font-size:11px;color:var(--text-dim);margin-top:2px;padding-left:44px}
 .step-status-ok{color:var(--green);font-size:12px;font-weight:bold}
 .step-status-fail{color:var(--red);font-size:12px;font-weight:bold}
+.step-status-verified{color:#94a3b8;font-size:12px;font-weight:bold}
+.step-status-diverged{color:#fbbf24;font-size:14px;font-weight:bold;line-height:1}
 .filmstrip-detail{display:none;padding:8px 0 4px 44px;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%}
@@ -1840,6 +1952,8 @@ details.native-step>summary::-webkit-details-marker{display:none}
 .native-step-badge{font-size:10px;font-weight:600;padding:1px 5px;border-radius:3px;white-space:nowrap;flex-shrink:0}
 .native-step-badge--expect{background:rgba(99,102,241,.12);color:#818cf8}
 .native-step-badge--test\.step{background:rgba(16,185,129,.10);color:#34d399}
+.native-step-badge--verify{background:rgba(148,163,184,.12);color:#94a3b8}
+.native-step-badge--verify-diverged{background:rgba(245,158,11,.12);color:#fbbf24}
 .native-step-location{font-size:10px;color:var(--text-dim);font-family:var(--mono);margin-left:auto;flex-shrink:0;white-space:nowrap}
 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 44px;margin:0;white-space:pre-wrap;word-break:break-word;color:var(--text-muted)}
@@ -1860,7 +1974,17 @@ details.ai-invocation>summary::-webkit-details-marker{display:none}
 .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}
+.ai-cache-badge{font-size:10px;font-weight:600;padding:1px 5px;border-radius:3px;white-space:nowrap;flex-shrink:0;font-family:var(--mono);cursor:help}
+.ai-cache-badge--hit{background:rgba(59,130,246,.12);color:#60a5fa}
+.ai-cache-badge--stored{background:rgba(52,211,153,.12);color:#34d399}
+.ai-cache-badge--miss{background:rgba(245,158,11,.12);color:#fbbf24}
+.ai-cache-miss-explainer{font-size:11px;color:var(--text-muted);padding:4px 0 2px 44px;line-height:1.45}
+.ai-cache-miss-detail{font-size:11px;font-family:var(--mono);padding:4px 0 2px 44px;margin:0;white-space:pre-wrap;word-break:break-word;color:var(--text-dim)}
+.ai-invocation--cache-miss>summary{box-shadow:inset 3px 0 0 0 rgba(245,158,11,.6)}
+.native-step--verify .snippet-line--target{background:rgba(148,163,184,.10)}
+.native-step--verify .snippet-line--target .snippet-linenum{color:#94a3b8}
+.native-step--verify-diverged .snippet-line--target{background:rgba(245,158,11,.10)}
+.native-step--verify-diverged .snippet-line--target .snippet-linenum{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 44px;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}
@@ -2010,7 +2134,15 @@ details.ai-invocation[open]>summary .native-step-chevron{transform:rotate(90deg)
     <div class="test-bar">${testBarHtml}</div>
     <div class="summary-stats">
       <div class="stat-pills">${statPillsHtml}</div>
-      <button class="clear-filter" data-clear-filter>&#x2716; Clear Filter</button>
+      <div class="tag-filter-controls" data-tag-filter-controls hidden>
+        <div class="tag-filter-trigger-wrap">
+          <button class="add-tag-filter" data-add-tag-filter title="Filter by tag"><span class="add-tag-plus">+</span> Tag</button>
+          <div class="tag-menu" data-tag-menu hidden></div>
+        </div>
+        <div class="active-tag-filters" data-active-tag-filters></div>
+      </div>
+      <span class="match-count" data-match-count>Matches:<span class="match-count-value" data-match-count-value>0</span></span>
+      <button class="clear-filter" data-clear-filter>&#x2716; Clear Filters</button>
     </div>
   </div>
 
@@ -2028,20 +2160,113 @@ details.ai-invocation[open]>summary .native-step-chevron{transform:rotate(90deg)
 
 <script>
 (function(){
-  var activeFilter=null;
-  function filterByStatus(s){
-    if(activeFilter===s){clearFilter();return}
-    activeFilter=s;
-    document.querySelectorAll('.stat-pill').forEach(function(p){p.classList.toggle('active',p.getAttribute('data-filter')===s)});
-    document.querySelector('.clear-filter').classList.add('visible');
-    document.querySelectorAll('.test-card').forEach(function(r){r.classList.toggle('hidden-by-filter',r.getAttribute('data-status')!==s)});
+  // Filters compose: a card is visible iff its status matches the active
+  // status filter (if any) AND it carries every tag in activeTags. The two
+  // dimensions are independent; "Clear Filter" wipes both.
+  var activeStatus=null;
+  var activeTags=new Set();
+  var allTags=[];
+
+  function cardTags(card){var raw=card.getAttribute('data-tags');if(!raw)return [];try{var v=JSON.parse(raw);return Array.isArray(v)?v:[]}catch(_){return []}}
+  function tagCount(t){var n=0;document.querySelectorAll('.test-card').forEach(function(c){if(cardTags(c).indexOf(t)!==-1)n++});return n}
+
+  function applyFilters(){
+    var anyActive=activeStatus!==null||activeTags.size>0;
+    document.querySelector('.clear-filter').classList.toggle('visible',anyActive);
+    var visible=0;
+    document.querySelectorAll('.test-card').forEach(function(card){
+      var statusOk=activeStatus===null||card.getAttribute('data-status')===activeStatus;
+      var tagsOk=true;
+      if(activeTags.size>0){
+        var t=cardTags(card);
+        activeTags.forEach(function(want){if(t.indexOf(want)===-1)tagsOk=false});
+      }
+      var hide=!(statusOk&&tagsOk);
+      card.classList.toggle('hidden-by-filter',hide);
+      if(!hide)visible++;
+    });
+    var mc=document.querySelector('[data-match-count]');
+    if(mc){
+      mc.classList.toggle('visible',anyActive);
+      var mv=mc.querySelector('[data-match-count-value]');
+      if(mv)mv.textContent=visible;
+    }
+    syncFiltersToUrl();
   }
-  function clearFilter(){
-    activeFilter=null;
+
+  // Reflect the active filter state in the URL query string so the current
+  // view is shareable. replaceState (not pushState) keeps the back button
+  // useful; the existing #?testId=<id> hash is preserved.
+  function syncFiltersToUrl(){
+    var p=new URLSearchParams();
+    if(activeStatus)p.set('status',activeStatus);
+    activeTags.forEach(function(t){p.append('tag',t)});
+    var qs=p.toString();
+    var next=location.pathname+(qs?'?'+qs:'')+(location.hash||'');
+    if(next!==location.pathname+location.search+location.hash){
+      history.replaceState(null,'',next);
+    }
+  }
+
+  function toggleStatus(s){
+    activeStatus=(activeStatus===s)?null:s;
+    document.querySelectorAll('.stat-pill').forEach(function(p){p.classList.toggle('active',p.getAttribute('data-filter')===activeStatus)});
+    applyFilters();
+  }
+
+  function renderActiveChips(){
+    var c=document.querySelector('[data-active-tag-filters]');
+    if(!c)return;
+    c.innerHTML='';
+    activeTags.forEach(function(t){
+      var chip=document.createElement('span');chip.className='tag-chip';
+      var label=document.createElement('span');label.textContent=t;
+      var btn=document.createElement('button');btn.className='tag-chip-remove';btn.setAttribute('data-remove-tag',t);btn.setAttribute('title','Remove filter');btn.textContent='×';
+      chip.appendChild(label);chip.appendChild(btn);
+      c.appendChild(chip);
+    });
+  }
+  function addTag(t){if(!t||activeTags.has(t))return;activeTags.add(t);renderActiveChips();applyFilters()}
+  function removeTag(t){if(!activeTags.delete(t))return;renderActiveChips();applyFilters()}
+
+  function openTagMenu(){
+    var menu=document.querySelector('[data-tag-menu]');
+    if(!menu)return;
+    var trigger=document.querySelector('[data-add-tag-filter]');
+    menu.innerHTML='';
+    var available=allTags.filter(function(t){return !activeTags.has(t)});
+    if(available.length===0){
+      var empty=document.createElement('div');empty.className='tag-menu-empty';
+      empty.textContent=allTags.length?'All tags selected':'No tags';
+      menu.appendChild(empty);
+    }else{
+      available.forEach(function(t){
+        var item=document.createElement('button');item.className='tag-menu-item';item.setAttribute('data-tag-menu-item',t);
+        var label=document.createElement('span');label.textContent=t;
+        var count=document.createElement('span');count.className='tag-menu-count';count.textContent=tagCount(t);
+        item.appendChild(label);item.appendChild(count);
+        menu.appendChild(item);
+      });
+    }
+    menu.hidden=false;
+    if(trigger)trigger.classList.add('active');
+  }
+  function closeTagMenu(){
+    var menu=document.querySelector('[data-tag-menu]');var trigger=document.querySelector('[data-add-tag-filter]');
+    if(menu)menu.hidden=true;
+    if(trigger)trigger.classList.remove('active');
+  }
+  function tagMenuOpen(){var m=document.querySelector('[data-tag-menu]');return !!(m&&!m.hidden)}
+
+  function clearAllFilters(){
+    activeStatus=null;
+    activeTags.clear();
     document.querySelectorAll('.stat-pill').forEach(function(p){p.classList.remove('active')});
-    document.querySelector('.clear-filter').classList.remove('visible');
-    document.querySelectorAll('.test-card').forEach(function(r){r.classList.remove('hidden-by-filter')});
+    renderActiveChips();
+    closeTagMenu();
+    applyFilters();
   }
+
   function closeLightbox(){document.getElementById('lightbox').classList.remove('open')}
 
   document.addEventListener('click',function(e){
@@ -2071,14 +2296,28 @@ details.ai-invocation[open]>summary .native-step-chevron{transform:rotate(90deg)
     if(flowBtn){e.stopPropagation();navigator.clipboard.writeText(flowBtn.getAttribute('data-flow-id'));var copySvg=flowBtn.innerHTML;flowBtn.innerHTML='<svg class="check-icon" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg>';setTimeout(function(){flowBtn.innerHTML=copySvg},2000);return}
     var jsonBtn=e.target.closest('.copy-json');
     if(jsonBtn){e.stopPropagation();var pre=jsonBtn.closest('.step-json-wrap').querySelector('.step-json');navigator.clipboard.writeText(pre.textContent);var s=jsonBtn.innerHTML;jsonBtn.innerHTML='<svg class="check-icon" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg>';setTimeout(function(){jsonBtn.innerHTML=s},2000);return}
+    // Tag filter: add (+ button toggles the menu) / select (menu item) /
+    // remove (chip × button). Outside-clicks close the menu via the catch-all
+    // at the end of this handler.
+    var addTagBtn=e.target.closest('[data-add-tag-filter]');
+    if(addTagBtn){if(tagMenuOpen()){closeTagMenu()}else{openTagMenu()}return}
+    var tagItem=e.target.closest('[data-tag-menu-item]');
+    if(tagItem){addTag(tagItem.getAttribute('data-tag-menu-item'));closeTagMenu();return}
+    var tagRemove=e.target.closest('[data-remove-tag]');
+    if(tagRemove){removeTag(tagRemove.getAttribute('data-remove-tag'));return}
     // Stat pill filter
     var pill=e.target.closest('.stat-pill[data-filter]');
-    if(pill){filterByStatus(pill.getAttribute('data-filter'));return}
+    if(pill){toggleStatus(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
+    if(e.target.closest('[data-clear-filter]')){clearAllFilters();return}
+    // Any other click closes the tag menu (outside-click dismiss).
+    if(tagMenuOpen()&&!e.target.closest('[data-tag-menu]')){closeTagMenu()}
+    // Test bar block click — scroll to and highlight the target test card,
+    // and reflect the selection in location.hash so the URL is shareable.
+    // replaceState (not pushState) keeps the back button useful after the
+    // user has clicked through several bar blocks.
     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}
+    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)}}if(tid&&tid.indexOf('test-')===0){history.replaceState(null,'','#?testId='+encodeURIComponent(tid.slice(5)))}return}
     // Filmstrip step expand (skip if clicking a link inside).
     // <div>-based steps: toggle the open class on any click in the wrapper.
     // <details>-based steps: <summary> clicks are handled natively; padding
@@ -2098,18 +2337,90 @@ details.ai-invocation[open]>summary .native-step-chevron{transform:rotate(90deg)
     // Audit check row expand
     var auditCheck=e.target.closest('.audit-check.expandable');
     if(auditCheck){auditCheck.classList.toggle('open');return}
-    // Test card expand
+    // Test card expand — also reflect the selection in location.hash on
+    // open so the URL is shareable. Same replaceState rationale as the bar
+    // block handler above. Collapses leave the URL alone.
     var row=e.target.closest('.test-card[data-detail]');
-    if(row&&!e.target.closest('.test-detail')){row.classList.toggle('expanded');return}
+    if(row&&!e.target.closest('.test-detail')){var nowOpen=row.classList.toggle('expanded');if(nowOpen&&row.id&&row.id.indexOf('test-')===0){history.replaceState(null,'','#?testId='+encodeURIComponent(row.id.slice(5)))}return}
   });
 
-  document.addEventListener('keydown',function(e){if(e.key==='Escape'){closeLightbox();clearFilter()}});
+  document.addEventListener('keydown',function(e){if(e.key==='Escape'){closeLightbox();closeTagMenu();clearAllFilters()}});
 
   // Auto-expand failed/timedout/interrupted/healed tests
   document.querySelectorAll('.test-card.failed,.test-card.timedout,.test-card.interrupted,.test-card.healed').forEach(function(r){r.classList.add('expanded')});
+
+  // Collect the cumulative set of tags present across all test cards and
+  // reveal the +tag-filter controls only when at least one tag exists.
+  (function(){
+    var seen=Object.create(null);
+    document.querySelectorAll('.test-card').forEach(function(card){
+      var raw=card.getAttribute('data-tags');if(!raw)return;
+      try{var tags=JSON.parse(raw);if(Array.isArray(tags)){tags.forEach(function(t){if(typeof t==='string'&&t)seen[t]=true})}}catch(_){}
+    });
+    allTags=Object.keys(seen).sort();
+    var controls=document.querySelector('[data-tag-filter-controls]');
+    if(controls&&allTags.length>0)controls.hidden=false;
+  })();
+
+  // Seed filter state from ?status=...&tag=... so shared URLs restore the
+  // view. Status values not in the known stat-pill set are ignored; tag
+  // values not present in this report are dropped so a stale URL can't
+  // poison the state.
+  (function(){
+    var p=new URLSearchParams(location.search);
+    var s=p.get('status');
+    var validStatuses={};
+    document.querySelectorAll('.stat-pill[data-filter]').forEach(function(el){validStatuses[el.getAttribute('data-filter')]=true});
+    if(s&&validStatuses[s]){
+      activeStatus=s;
+      document.querySelectorAll('.stat-pill').forEach(function(el){el.classList.toggle('active',el.getAttribute('data-filter')===s)});
+    }
+    var tagSet={};allTags.forEach(function(t){tagSet[t]=true});
+    p.getAll('tag').forEach(function(t){if(tagSet[t])activeTags.add(t)});
+    if(activeTags.size>0)renderActiveChips();
+    if(activeStatus!==null||activeTags.size>0)applyFilters();
+  })();
+
+  // Open #?testId=<id> deep links to the matching test card. Used by the
+  // per-test redirect stubs (one per Playwright test-results directory) and
+  // by any external link that wants to permalink a specific test.
+  function focusTestFromHash(){
+    var h=location.hash||'';
+    if(h.indexOf('#?')!==0)return;
+    var params=new URLSearchParams(h.slice(2));
+    var id=params.get('testId');
+    if(!id)return;
+    var card=document.getElementById('test-'+id);
+    if(!card||!card.classList.contains('test-card'))return;
+    card.classList.add('expanded');
+    card.scrollIntoView({behavior:'smooth',block:'center'});
+  }
+  focusTestFromHash();
+  window.addEventListener('hashchange',focusTestFromHash);
 })();
 </script>
 </body>
 </html>`;
 }
+/**
+ * Render the tiny redirect HTML that Donobu drops into each Playwright-managed
+ * per-test directory under `test-results/`. The stub bounces straight to the
+ * combined report's `#?testId=<id>` deep link — meta-refresh + JS replace +
+ * visible fallback link, so it works with or without JS, online or `file://`.
+ *
+ * Strictly additive: Donobu does not create or rename Playwright's per-test
+ * directories — the caller in `html.ts` only writes this file into directories
+ * Playwright already created for the test's attachments.
+ */
+function renderPerTestStub(params) {
+    const { testId, title, relPathToReport } = params;
+    const href = `${relPathToReport}#?testId=${encodeURIComponent(testId)}`;
+    return `<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Donobu — ${esc(title)}</title>
+<meta http-equiv="refresh" content="0; url=${esc(href)}">
+<script>location.replace(${JSON.stringify(href)});</script>
+<p>Redirecting to <a href="${esc(href)}">test report</a>…</p>
+`;
+}
 //# sourceMappingURL=render.js.map

package/dist/tools/AssertTool.js

@@ -207,18 +207,34 @@ careful positioning lost, etc. A screenshot of the webpage has also been provide
             // When the AI assertion passes and structured steps were returned,
             // verify the steps against the live page before considering them
             // cacheable. If the steps fail, discard them but still return the
-            // passing AI result.
+            // passing AI result. The verification window is recorded so the HTML
+            // reporter can label its `expect()` calls as cache-worthiness checks
+            // rather than treating an internal locator mismatch as an assertion
+            // failure.
             let verifiedSteps = assertionOutcome.output.playwrightAssertionSteps;
+            let verification;
             if (assertPassed &&
                 Array.isArray(verifiedSteps) &&
                 verifiedSteps.length > 0) {
+                const verifyStartedAt = Date.now();
                 try {
                     const executor = (0, assertCache_1.buildAssertExecutor)(verifiedSteps);
                     await executor({ page: page, envData: context.envData });
+                    verification = {
+                        startedAt: verifyStartedAt,
+                        endedAt: Date.now(),
+                        failed: false,
+                    };
                 }
                 catch (error) {
                     Logger_1.appLogger.debug(`Structured assertion steps failed verification for: "${parameters.assertionToTestFor}" — discarding steps. Error: ${error.message}`);
                     verifiedSteps = null;
+                    verification = {
+                        startedAt: verifyStartedAt,
+                        endedAt: Date.now(),
+                        failed: true,
+                        errorMessage: error.message,
+                    };
                 }
             }
             const result = {
@@ -227,6 +243,7 @@ careful positioning lost, etc. A screenshot of the webpage has also been provide
                 metadata: {
                     ...assertionOutcome.output,
                     playwrightAssertionSteps: verifiedSteps,
+                    verification,
                     attempt: attempt + 1,
                 },
             };

package/package.json

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