fix: add scrollable detail list with search filter for acceptance criteria

Dashboard criteria detail list now has overflow-y: auto for scrolling
(was overflow: hidden cutting off at 500px). Added search/filter input
for lists with >20 items — filters by ID or text in real time. Criteria
text now displayed alongside ID (reads both title and text fields from
JSON). Toggle button shows item count. Version 1.32.4.

Author: angelovstanton

dashboard-site/scripts/app.js

@@ -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>';
@@ -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>`;

dashboard-site/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.3</Version>
+    <Version>1.32.4</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.3</Version>
+    <Version>1.32.4</Version>
     <Authors>Spectra</Authors>
     <Description>Spectra MCP Server for test execution</Description>
     <PackageOutputPath>./nupkg</PackageOutputPath>