fix: sync bundled dashboard templates + fix scrollable detail lists

The dashboard-site/ source files were updated but never copied to
src/Spectra.CLI/Dashboard/Templates/ (the embedded resources). This
caused regenerated dashboards to use stale templates missing the
criteria unit label fix, search filter, and scroll improvements.

All coverage sections now have scrollable detail lists (max-height
400px with overflow-y: auto). Lists with >20 items get a search
filter. Version 1.32.5.

Author: angelovstanton

src/Spectra.CLI/Dashboard/Templates/scripts/app.js

@@ -924,7 +924,7 @@ function renderThreeSectionCoverage(summary) {
     // Coverage sections (progress bars + detail lists)
     html += '<div class="coverage-sections">';
     html += renderCoverageSection('Documentation Coverage', summary.documentation, 'documents', renderDocDetails);
-    html += renderCoverageSection('Acceptance Criteria Coverage', summary.acceptance_criteria, 'acceptance_criteria', renderCriteriaDetails);
+    html += renderCoverageSection('Acceptance Criteria Coverage', summary.acceptance_criteria, 'criteria', renderCriteriaDetails);
     html += renderCoverageSection('Automation Coverage', summary.automation, 'tests', renderAutoDetails);
     html += '</div>';
 
@@ -1354,7 +1354,15 @@ function renderCoverageSection(label, sectionData, unit, renderDetailsFn) {
         html += emptyHtml;
     } else if (sectionData.details && sectionData.details.length > 0) {
         // Expandable detail list
-        html += `<button class="coverage-toggle-btn" onclick="toggleCoverageDetails('${sectionId}')">Show details</button>`;
+        const detailCount = sectionData.details.length;
+        html += `<button class="coverage-toggle-btn" onclick="toggleCoverageDetails('${sectionId}')">Show details (${detailCount})</button>`;
+        // Add search filter for large lists
+        if (detailCount > 20) {
+            html += `<div class="coverage-detail-filter collapsed" id="filter-${sectionId}">
+                <input type="text" placeholder="Filter by ID or text..." oninput="filterCoverageDetails('${sectionId}', this.value)" />
+                <span class="filter-count" id="filter-count-${sectionId}">${detailCount} items</span>
+            </div>`;
+        }
         html += `<ul class="coverage-detail-list collapsed" id="details-${sectionId}">`;
         html += renderDetailsFn(sectionData);
         html += '</ul>';
@@ -1384,7 +1392,7 @@ function getEmptyState(label, sectionData, total, pct) {
             return `<div class="coverage-empty-state">
                 <span class="empty-icon">&#9432;</span>
                 <div class="empty-text"><strong>No acceptance criteria tracked yet.</strong>
-                Add a <code>criteria</code> field to test YAML frontmatter, or create a <code>_criteria_index.yaml</code> file in your docs directory.</div>
+                Add a <code>criteria</code> field to test YAML frontmatter, or run <code>spectra ai analyze --extract-criteria</code> to extract from documentation.</div>
             </div>`;
         }
         return null;
@@ -1409,15 +1417,44 @@ function getEmptyState(label, sectionData, total, pct) {
  */
 function toggleCoverageDetails(sectionId) {
     const list = document.getElementById('details-' + sectionId);
-    const btn = list?.previousElementSibling;
-    if (!list || !btn) return;
+    const filter = document.getElementById('filter-' + sectionId);
+    if (!list) return;
+
+    // Find the toggle button — it's the sibling before the filter (if present) or the list
+    const btn = (filter || list).previousElementSibling;
+    const count = list.children.length;
 
     if (list.classList.contains('collapsed')) {
         list.classList.remove('collapsed');
-        btn.textContent = 'Hide details';
+        if (filter) filter.classList.remove('collapsed');
+        if (btn) btn.textContent = 'Hide details';
     } else {
         list.classList.add('collapsed');
-        btn.textContent = 'Show details';
+        if (filter) filter.classList.add('collapsed');
+        if (btn) btn.textContent = `Show details (${count})`;
+    }
+}
+
+/**
+ * Filter coverage detail list items by search text.
+ */
+function filterCoverageDetails(sectionId, query) {
+    const list = document.getElementById('details-' + sectionId);
+    const countEl = document.getElementById('filter-count-' + sectionId);
+    if (!list) return;
+
+    const q = query.toLowerCase().trim();
+    let visible = 0;
+
+    for (const li of list.children) {
+        const text = li.textContent.toLowerCase();
+        const show = !q || text.includes(q);
+        li.style.display = show ? '' : 'none';
+        if (show) visible++;
+    }
+
+    if (countEl) {
+        countEl.textContent = q ? `${visible} of ${list.children.length}` : `${list.children.length} items`;
     }
 }
 
@@ -1449,8 +1486,12 @@ function renderCriteriaDetails(section) {
             ? '<span class="detail-icon coverage-green">&#10003;</span>'
             : '<span class="detail-icon coverage-red">&#10007;</span>';
         const testList = d.tests && d.tests.length > 0 ? d.tests.join(', ') : 'none';
-        html += `<li>
-            <span class="detail-name" title="${escapeHtml(d.title || d.id)}">${escapeHtml(d.id)}: ${escapeHtml(d.title || '')}</span>
+        const titleText = d.title || d.text || '';
+        const displayName = titleText
+            ? `<strong>${escapeHtml(d.id)}</strong> ${escapeHtml(titleText)}`
+            : `<strong>${escapeHtml(d.id)}</strong>`;
+        html += `<li title="${escapeHtml(titleText)}">
+            <span class="detail-name">${displayName}</span>
             <span class="detail-meta">${testList}</span>
             ${icon}
         </li>`;

src/Spectra.CLI/Dashboard/Templates/styles/main.css

@@ -1320,17 +1320,42 @@ details.result-row[open] summary::before {
     padding: 0;
     margin: 0.75rem 0 0 0;
     font-size: 0.85rem;
-    max-height: 500px;
-    overflow: hidden;
+    max-height: 400px;
+    overflow-y: auto;
+    overflow-x: hidden;
     transition: max-height 0.3s ease, opacity 0.3s ease;
 }
 
 .coverage-detail-list.collapsed {
     max-height: 0;
+    overflow: hidden;
     opacity: 0;
     margin: 0;
 }
 
+.coverage-detail-filter {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin: 0.5rem 0;
+}
+
+.coverage-detail-filter input {
+    flex: 1;
+    padding: 0.35rem 0.6rem;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    font-size: 0.8rem;
+    background: var(--bg-primary, #fff);
+    color: var(--text-primary);
+}
+
+.coverage-detail-filter .filter-count {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    white-space: nowrap;
+}
+
 .coverage-detail-list li {
     padding: 0.4rem 0.5rem;
     border-bottom: 1px solid var(--border-color);

src/Spectra.CLI/Spectra.CLI.csproj

@@ -27,7 +27,7 @@
     <PackAsTool>true</PackAsTool>
     <ToolCommandName>spectra</ToolCommandName>
     <PackageId>Spectra.CLI</PackageId>
-    <Version>1.32.4</Version>
+    <Version>1.32.5</Version>
     <Authors>Spectra</Authors>
     <Description>AI-native test generation and management CLI</Description>
     <PackageOutputPath>./nupkg</PackageOutputPath>

src/Spectra.MCP/Spectra.MCP.csproj

@@ -10,7 +10,7 @@
     <PackAsTool>true</PackAsTool>
     <ToolCommandName>spectra-mcp</ToolCommandName>
     <PackageId>Spectra.MCP</PackageId>
-    <Version>1.32.4</Version>
+    <Version>1.32.5</Version>
     <Authors>Spectra</Authors>
     <Description>Spectra MCP Server for test execution</Description>
     <PackageOutputPath>./nupkg</PackageOutputPath>