donobu 5.42.0 → 5.43.0

package/dist/esm/reporter/render.js

@@ -1678,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}" id="${testId}" data-status="${test.status}" data-tags="${esc(JSON.stringify(test.tags))}" ${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))}"${test.plan ? ` data-reason="${esc(test.plan.plan.failureReason)}"` : ''} ${hasDetails ? `data-detail="${testId}"` : ''}>
         <div class="test-summary">
           ${chevron}
           <span class="status-dot" style="background:${sc.color}" title="${sc.label}"></span>
@@ -1786,6 +1786,8 @@ body::before{content:'';position:fixed;top:-750px;left:50%;transform:translateX(
 .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}
+.tag-menu-section{padding:8px 10px 4px;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-dim);font-family:inherit}
+.tag-menu-section:not(:first-child){margin-top:4px;border-top:1px solid var(--border)}
 .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}
@@ -2136,7 +2138,7 @@ details.ai-invocation[open]>summary .native-step-chevron{transform:rotate(90deg)
       <div class="stat-pills">${statPillsHtml}</div>
       <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>
+          <button class="add-tag-filter" data-add-tag-filter title="Filter by tag or diagnosis"><span class="add-tag-plus">+</span> Filter</button>
           <div class="tag-menu" data-tag-menu hidden></div>
         </div>
         <div class="active-tag-filters" data-active-tag-filters></div>
@@ -2160,18 +2162,24 @@ details.ai-invocation[open]>summary .native-step-chevron{transform:rotate(90deg)
 
 <script>
 (function(){
-  // 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.
+  // Filters compose across three dimensions:
+  //   status  — single-select; card.data-status must match (if set).
+  //   tags    — multi-select AND; card must carry every active tag.
+  //   reasons — multi-select OR;  card.data-reason must match any active reason
+  //             (a card has at most one diagnosis, so AND would always be 0/1).
+  // "Clear Filters" wipes all three.
   var activeStatus=null;
   var activeTags=new Set();
+  var activeReasons=new Set();
   var allTags=[];
+  var allReasons=[]; // ordered list of REASON keys present in the report
+  var REASON_LABELS=${JSON.stringify(REASON_LABELS)};
 
   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;
+    var anyActive=activeStatus!==null||activeTags.size>0||activeReasons.size>0;
     document.querySelector('.clear-filter').classList.toggle('visible',anyActive);
     var visible=0;
     document.querySelectorAll('.test-card').forEach(function(card){
@@ -2181,7 +2189,12 @@ details.ai-invocation[open]>summary .native-step-chevron{transform:rotate(90deg)
         var t=cardTags(card);
         activeTags.forEach(function(want){if(t.indexOf(want)===-1)tagsOk=false});
       }
-      var hide=!(statusOk&&tagsOk);
+      var reasonOk=true;
+      if(activeReasons.size>0){
+        var r=card.getAttribute('data-reason')||'';
+        reasonOk=activeReasons.has(r);
+      }
+      var hide=!(statusOk&&tagsOk&&reasonOk);
       card.classList.toggle('hidden-by-filter',hide);
       if(!hide)visible++;
     });
@@ -2201,6 +2214,7 @@ details.ai-invocation[open]>summary .native-step-chevron{transform:rotate(90deg)
     var p=new URLSearchParams();
     if(activeStatus)p.set('status',activeStatus);
     activeTags.forEach(function(t){p.append('tag',t)});
+    activeReasons.forEach(function(r){p.append('reason',r)});
     var qs=p.toString();
     var next=location.pathname+(qs?'?'+qs:'')+(location.hash||'');
     if(next!==location.pathname+location.search+location.hash){
@@ -2214,6 +2228,15 @@ details.ai-invocation[open]>summary .native-step-chevron{transform:rotate(90deg)
     applyFilters();
   }
 
+  // Convert "#rrggbb" or "rgb(...)" into a low-alpha background for tinted
+  // diagnosis chips. Falls back to the accent tint if parsing fails.
+  function hexToRgba(hex,a){
+    if(!hex||hex.charAt(0)!=='#'||(hex.length!==4&&hex.length!==7))return 'rgba(255,127,58,'+a+')';
+    var s=hex.length===4?('#'+hex[1]+hex[1]+hex[2]+hex[2]+hex[3]+hex[3]):hex;
+    var r=parseInt(s.slice(1,3),16),g=parseInt(s.slice(3,5),16),b=parseInt(s.slice(5,7),16);
+    return 'rgba('+r+','+g+','+b+','+a+')';
+  }
+
   function renderActiveChips(){
     var c=document.querySelector('[data-active-tag-filters]');
     if(!c)return;
@@ -2225,28 +2248,66 @@ details.ai-invocation[open]>summary .native-step-chevron{transform:rotate(90deg)
       chip.appendChild(label);chip.appendChild(btn);
       c.appendChild(chip);
     });
+    activeReasons.forEach(function(r){
+      var meta=REASON_LABELS[r]||REASON_LABELS['UNKNOWN'];
+      var chip=document.createElement('span');chip.className='tag-chip reason-chip';
+      chip.style.background=hexToRgba(meta.color,0.14);
+      chip.style.borderColor=hexToRgba(meta.color,0.4);
+      chip.style.color=meta.color;
+      var label=document.createElement('span');label.textContent=meta.label;
+      var btn=document.createElement('button');btn.className='tag-chip-remove';btn.setAttribute('data-remove-reason',r);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 addReason(r){if(!r||activeReasons.has(r))return;activeReasons.add(r);renderActiveChips();applyFilters()}
+  function removeReason(r){if(!activeReasons.delete(r))return;renderActiveChips();applyFilters()}
+
+  function reasonCount(r){var n=0;document.querySelectorAll('.test-card').forEach(function(c){if(c.getAttribute('data-reason')===r)n++});return n}
 
   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);
-      });
+    var availTags=allTags.filter(function(t){return !activeTags.has(t)});
+    var availReasons=allReasons.filter(function(r){return !activeReasons.has(r)});
+    var added=false;
+    if(allTags.length>0){
+      var hT=document.createElement('div');hT.className='tag-menu-section';hT.textContent='Tags';menu.appendChild(hT);
+      if(availTags.length===0){
+        var emptyT=document.createElement('div');emptyT.className='tag-menu-empty';emptyT.textContent='All tags selected';menu.appendChild(emptyT);
+      }else{
+        availTags.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);
+        });
+      }
+      added=true;
+    }
+    if(allReasons.length>0){
+      var hR=document.createElement('div');hR.className='tag-menu-section';hR.textContent='Diagnoses';menu.appendChild(hR);
+      if(availReasons.length===0){
+        var emptyR=document.createElement('div');emptyR.className='tag-menu-empty';emptyR.textContent='All diagnoses selected';menu.appendChild(emptyR);
+      }else{
+        availReasons.forEach(function(r){
+          var meta=REASON_LABELS[r]||REASON_LABELS['UNKNOWN'];
+          var item=document.createElement('button');item.className='tag-menu-item';item.setAttribute('data-reason-menu-item',r);
+          var label=document.createElement('span');label.textContent=meta.label;label.style.color=meta.color;
+          var count=document.createElement('span');count.className='tag-menu-count';count.textContent=reasonCount(r);
+          item.appendChild(label);item.appendChild(count);
+          menu.appendChild(item);
+        });
+      }
+      added=true;
+    }
+    if(!added){
+      var empty=document.createElement('div');empty.className='tag-menu-empty';empty.textContent='No filters available';menu.appendChild(empty);
     }
     menu.hidden=false;
     if(trigger)trigger.classList.add('active');
@@ -2261,6 +2322,7 @@ details.ai-invocation[open]>summary .native-step-chevron{transform:rotate(90deg)
   function clearAllFilters(){
     activeStatus=null;
     activeTags.clear();
+    activeReasons.clear();
     document.querySelectorAll('.stat-pill').forEach(function(p){p.classList.remove('active')});
     renderActiveChips();
     closeTagMenu();
@@ -2303,8 +2365,12 @@ details.ai-invocation[open]>summary .native-step-chevron{transform:rotate(90deg)
     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 reasonItem=e.target.closest('[data-reason-menu-item]');
+    if(reasonItem){addReason(reasonItem.getAttribute('data-reason-menu-item'));closeTagMenu();return}
     var tagRemove=e.target.closest('[data-remove-tag]');
     if(tagRemove){removeTag(tagRemove.getAttribute('data-remove-tag'));return}
+    var reasonRemove=e.target.closest('[data-remove-reason]');
+    if(reasonRemove){removeReason(reasonRemove.getAttribute('data-remove-reason'));return}
     // Stat pill filter
     var pill=e.target.closest('.stat-pill[data-filter]');
     if(pill){toggleStatus(pill.getAttribute('data-filter'));return}
@@ -2349,23 +2415,29 @@ details.ai-invocation[open]>summary .native-step-chevron{transform:rotate(90deg)
   // 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.
+  // Collect the cumulative set of tags + diagnosis reasons present across all
+  // test cards. Reveal the +filter controls when at least one of either exists.
   (function(){
-    var seen=Object.create(null);
+    var seenTags=Object.create(null);
+    var seenReasons=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(_){}
+      var raw=card.getAttribute('data-tags');
+      if(raw){try{var tags=JSON.parse(raw);if(Array.isArray(tags)){tags.forEach(function(t){if(typeof t==='string'&&t)seenTags[t]=true})}}catch(_){}}
+      var r=card.getAttribute('data-reason');
+      if(r)seenReasons[r]=true;
     });
-    allTags=Object.keys(seen).sort();
+    allTags=Object.keys(seenTags).sort();
+    // Preserve the REASON_LABELS declaration order rather than alphabetical —
+    // they're already arranged from most-frequent/specific to UNKNOWN catch-all.
+    allReasons=Object.keys(REASON_LABELS).filter(function(r){return seenReasons[r]});
     var controls=document.querySelector('[data-tag-filter-controls]');
-    if(controls&&allTags.length>0)controls.hidden=false;
+    if(controls&&(allTags.length>0||allReasons.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.
+  // Seed filter state from ?status=...&tag=...&reason=... so shared URLs
+  // restore the view. Status values not in the known stat-pill set are
+  // ignored; tag and reason 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');
@@ -2377,8 +2449,10 @@ details.ai-invocation[open]>summary .native-step-chevron{transform:rotate(90deg)
     }
     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();
+    var reasonSet={};allReasons.forEach(function(r){reasonSet[r]=true});
+    p.getAll('reason').forEach(function(r){if(reasonSet[r])activeReasons.add(r)});
+    if(activeTags.size>0||activeReasons.size>0)renderActiveChips();
+    if(activeStatus!==null||activeTags.size>0||activeReasons.size>0)applyFilters();
   })();
 
   // Open #?testId=<id> deep links to the matching test card. Used by the

package/dist/reporter/render.js

@@ -1678,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}" id="${testId}" data-status="${test.status}" data-tags="${esc(JSON.stringify(test.tags))}" ${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))}"${test.plan ? ` data-reason="${esc(test.plan.plan.failureReason)}"` : ''} ${hasDetails ? `data-detail="${testId}"` : ''}>
         <div class="test-summary">
           ${chevron}
           <span class="status-dot" style="background:${sc.color}" title="${sc.label}"></span>
@@ -1786,6 +1786,8 @@ body::before{content:'';position:fixed;top:-750px;left:50%;transform:translateX(
 .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}
+.tag-menu-section{padding:8px 10px 4px;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-dim);font-family:inherit}
+.tag-menu-section:not(:first-child){margin-top:4px;border-top:1px solid var(--border)}
 .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}
@@ -2136,7 +2138,7 @@ details.ai-invocation[open]>summary .native-step-chevron{transform:rotate(90deg)
       <div class="stat-pills">${statPillsHtml}</div>
       <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>
+          <button class="add-tag-filter" data-add-tag-filter title="Filter by tag or diagnosis"><span class="add-tag-plus">+</span> Filter</button>
           <div class="tag-menu" data-tag-menu hidden></div>
         </div>
         <div class="active-tag-filters" data-active-tag-filters></div>
@@ -2160,18 +2162,24 @@ details.ai-invocation[open]>summary .native-step-chevron{transform:rotate(90deg)
 
 <script>
 (function(){
-  // 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.
+  // Filters compose across three dimensions:
+  //   status  — single-select; card.data-status must match (if set).
+  //   tags    — multi-select AND; card must carry every active tag.
+  //   reasons — multi-select OR;  card.data-reason must match any active reason
+  //             (a card has at most one diagnosis, so AND would always be 0/1).
+  // "Clear Filters" wipes all three.
   var activeStatus=null;
   var activeTags=new Set();
+  var activeReasons=new Set();
   var allTags=[];
+  var allReasons=[]; // ordered list of REASON keys present in the report
+  var REASON_LABELS=${JSON.stringify(REASON_LABELS)};
 
   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;
+    var anyActive=activeStatus!==null||activeTags.size>0||activeReasons.size>0;
     document.querySelector('.clear-filter').classList.toggle('visible',anyActive);
     var visible=0;
     document.querySelectorAll('.test-card').forEach(function(card){
@@ -2181,7 +2189,12 @@ details.ai-invocation[open]>summary .native-step-chevron{transform:rotate(90deg)
         var t=cardTags(card);
         activeTags.forEach(function(want){if(t.indexOf(want)===-1)tagsOk=false});
       }
-      var hide=!(statusOk&&tagsOk);
+      var reasonOk=true;
+      if(activeReasons.size>0){
+        var r=card.getAttribute('data-reason')||'';
+        reasonOk=activeReasons.has(r);
+      }
+      var hide=!(statusOk&&tagsOk&&reasonOk);
       card.classList.toggle('hidden-by-filter',hide);
       if(!hide)visible++;
     });
@@ -2201,6 +2214,7 @@ details.ai-invocation[open]>summary .native-step-chevron{transform:rotate(90deg)
     var p=new URLSearchParams();
     if(activeStatus)p.set('status',activeStatus);
     activeTags.forEach(function(t){p.append('tag',t)});
+    activeReasons.forEach(function(r){p.append('reason',r)});
     var qs=p.toString();
     var next=location.pathname+(qs?'?'+qs:'')+(location.hash||'');
     if(next!==location.pathname+location.search+location.hash){
@@ -2214,6 +2228,15 @@ details.ai-invocation[open]>summary .native-step-chevron{transform:rotate(90deg)
     applyFilters();
   }
 
+  // Convert "#rrggbb" or "rgb(...)" into a low-alpha background for tinted
+  // diagnosis chips. Falls back to the accent tint if parsing fails.
+  function hexToRgba(hex,a){
+    if(!hex||hex.charAt(0)!=='#'||(hex.length!==4&&hex.length!==7))return 'rgba(255,127,58,'+a+')';
+    var s=hex.length===4?('#'+hex[1]+hex[1]+hex[2]+hex[2]+hex[3]+hex[3]):hex;
+    var r=parseInt(s.slice(1,3),16),g=parseInt(s.slice(3,5),16),b=parseInt(s.slice(5,7),16);
+    return 'rgba('+r+','+g+','+b+','+a+')';
+  }
+
   function renderActiveChips(){
     var c=document.querySelector('[data-active-tag-filters]');
     if(!c)return;
@@ -2225,28 +2248,66 @@ details.ai-invocation[open]>summary .native-step-chevron{transform:rotate(90deg)
       chip.appendChild(label);chip.appendChild(btn);
       c.appendChild(chip);
     });
+    activeReasons.forEach(function(r){
+      var meta=REASON_LABELS[r]||REASON_LABELS['UNKNOWN'];
+      var chip=document.createElement('span');chip.className='tag-chip reason-chip';
+      chip.style.background=hexToRgba(meta.color,0.14);
+      chip.style.borderColor=hexToRgba(meta.color,0.4);
+      chip.style.color=meta.color;
+      var label=document.createElement('span');label.textContent=meta.label;
+      var btn=document.createElement('button');btn.className='tag-chip-remove';btn.setAttribute('data-remove-reason',r);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 addReason(r){if(!r||activeReasons.has(r))return;activeReasons.add(r);renderActiveChips();applyFilters()}
+  function removeReason(r){if(!activeReasons.delete(r))return;renderActiveChips();applyFilters()}
+
+  function reasonCount(r){var n=0;document.querySelectorAll('.test-card').forEach(function(c){if(c.getAttribute('data-reason')===r)n++});return n}
 
   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);
-      });
+    var availTags=allTags.filter(function(t){return !activeTags.has(t)});
+    var availReasons=allReasons.filter(function(r){return !activeReasons.has(r)});
+    var added=false;
+    if(allTags.length>0){
+      var hT=document.createElement('div');hT.className='tag-menu-section';hT.textContent='Tags';menu.appendChild(hT);
+      if(availTags.length===0){
+        var emptyT=document.createElement('div');emptyT.className='tag-menu-empty';emptyT.textContent='All tags selected';menu.appendChild(emptyT);
+      }else{
+        availTags.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);
+        });
+      }
+      added=true;
+    }
+    if(allReasons.length>0){
+      var hR=document.createElement('div');hR.className='tag-menu-section';hR.textContent='Diagnoses';menu.appendChild(hR);
+      if(availReasons.length===0){
+        var emptyR=document.createElement('div');emptyR.className='tag-menu-empty';emptyR.textContent='All diagnoses selected';menu.appendChild(emptyR);
+      }else{
+        availReasons.forEach(function(r){
+          var meta=REASON_LABELS[r]||REASON_LABELS['UNKNOWN'];
+          var item=document.createElement('button');item.className='tag-menu-item';item.setAttribute('data-reason-menu-item',r);
+          var label=document.createElement('span');label.textContent=meta.label;label.style.color=meta.color;
+          var count=document.createElement('span');count.className='tag-menu-count';count.textContent=reasonCount(r);
+          item.appendChild(label);item.appendChild(count);
+          menu.appendChild(item);
+        });
+      }
+      added=true;
+    }
+    if(!added){
+      var empty=document.createElement('div');empty.className='tag-menu-empty';empty.textContent='No filters available';menu.appendChild(empty);
     }
     menu.hidden=false;
     if(trigger)trigger.classList.add('active');
@@ -2261,6 +2322,7 @@ details.ai-invocation[open]>summary .native-step-chevron{transform:rotate(90deg)
   function clearAllFilters(){
     activeStatus=null;
     activeTags.clear();
+    activeReasons.clear();
     document.querySelectorAll('.stat-pill').forEach(function(p){p.classList.remove('active')});
     renderActiveChips();
     closeTagMenu();
@@ -2303,8 +2365,12 @@ details.ai-invocation[open]>summary .native-step-chevron{transform:rotate(90deg)
     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 reasonItem=e.target.closest('[data-reason-menu-item]');
+    if(reasonItem){addReason(reasonItem.getAttribute('data-reason-menu-item'));closeTagMenu();return}
     var tagRemove=e.target.closest('[data-remove-tag]');
     if(tagRemove){removeTag(tagRemove.getAttribute('data-remove-tag'));return}
+    var reasonRemove=e.target.closest('[data-remove-reason]');
+    if(reasonRemove){removeReason(reasonRemove.getAttribute('data-remove-reason'));return}
     // Stat pill filter
     var pill=e.target.closest('.stat-pill[data-filter]');
     if(pill){toggleStatus(pill.getAttribute('data-filter'));return}
@@ -2349,23 +2415,29 @@ details.ai-invocation[open]>summary .native-step-chevron{transform:rotate(90deg)
   // 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.
+  // Collect the cumulative set of tags + diagnosis reasons present across all
+  // test cards. Reveal the +filter controls when at least one of either exists.
   (function(){
-    var seen=Object.create(null);
+    var seenTags=Object.create(null);
+    var seenReasons=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(_){}
+      var raw=card.getAttribute('data-tags');
+      if(raw){try{var tags=JSON.parse(raw);if(Array.isArray(tags)){tags.forEach(function(t){if(typeof t==='string'&&t)seenTags[t]=true})}}catch(_){}}
+      var r=card.getAttribute('data-reason');
+      if(r)seenReasons[r]=true;
     });
-    allTags=Object.keys(seen).sort();
+    allTags=Object.keys(seenTags).sort();
+    // Preserve the REASON_LABELS declaration order rather than alphabetical —
+    // they're already arranged from most-frequent/specific to UNKNOWN catch-all.
+    allReasons=Object.keys(REASON_LABELS).filter(function(r){return seenReasons[r]});
     var controls=document.querySelector('[data-tag-filter-controls]');
-    if(controls&&allTags.length>0)controls.hidden=false;
+    if(controls&&(allTags.length>0||allReasons.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.
+  // Seed filter state from ?status=...&tag=...&reason=... so shared URLs
+  // restore the view. Status values not in the known stat-pill set are
+  // ignored; tag and reason 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');
@@ -2377,8 +2449,10 @@ details.ai-invocation[open]>summary .native-step-chevron{transform:rotate(90deg)
     }
     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();
+    var reasonSet={};allReasons.forEach(function(r){reasonSet[r]=true});
+    p.getAll('reason').forEach(function(r){if(reasonSet[r])activeReasons.add(r)});
+    if(activeTags.size>0||activeReasons.size>0)renderActiveChips();
+    if(activeStatus!==null||activeTags.size>0||activeReasons.size>0)applyFilters();
   })();
 
   // Open #?testId=<id> deep links to the matching test card. Used by the

package/package.json

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