fix: dashboard exclude patterns, tile scroll targets, sync embedded templates

- DataCollector now respects source.exclude_patterns from config
  (README.md, _index.md no longer appear in coverage)
- KPI tile click scrolls to correct section and auto-expands details
- Synced dashboard-site/ files to embedded templates in CLI package
- Added 'Show uncovered only' filter button to all coverage sections

Author: angelovstanton

dashboard-site/scripts/app.js

@@ -963,7 +963,7 @@ function renderKPICards(summary) {
         const colorClass = pct >= 80 ? 'green' : pct >= 50 ? 'amber' : 'red';
 
         html += `
-            <div class="cov-kpi-card ${colorClass}" onclick="document.getElementById('details-${s.key}-coverage')?.scrollIntoView({behavior:'smooth'})">
+            <div class="cov-kpi-card ${colorClass}" onclick="scrollToCoverageSection('${s.target}')">
                 <div class="cov-kpi-label">${s.label}</div>
                 <div class="cov-kpi-value ${colorClass}">${pct.toFixed(1)}%</div>
                 <div class="cov-kpi-bar"><div class="cov-kpi-bar-fill ${colorClass}" style="width:${Math.min(pct,100)}%"></div></div>
@@ -1462,6 +1462,23 @@ function filterCoverageDetails(sectionId, query) {
     }
 }
 
+/**
+ * Scroll to a coverage section and auto-expand its details.
+ */
+function scrollToCoverageSection(sectionId) {
+    // The detail list has id="details-{sectionId}"
+    const detailList = document.getElementById('details-' + sectionId);
+    // The section wrapper is the parent .coverage-section
+    const section = detailList?.closest('.coverage-section');
+    if (section) {
+        // Auto-expand if collapsed
+        if (detailList.classList.contains('collapsed')) {
+            toggleCoverageDetails(sectionId);
+        }
+        section.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+}
+
 /**
  * Toggle showing only uncovered items in a coverage detail list.
  */

src/Spectra.CLI/Dashboard/DataCollector.cs

@@ -683,11 +683,44 @@ private static CoverageData BuildCoverageData(IReadOnlyList<TestEntry> testEntri
             var docsDir = Path.Combine(_basePath, "docs");
             if (Directory.Exists(docsDir))
             {
+                // Load exclude patterns from config
+                var excludePatterns = new List<string> { "**/CHANGELOG.md" };
+                var configPath2 = Path.Combine(_basePath, "spectra.config.json");
+                if (File.Exists(configPath2))
+                {
+                    try
+                    {
+                        var configJson = await File.ReadAllTextAsync(configPath2);
+                        var configDoc = JsonSerializer.Deserialize<JsonElement>(configJson, s_jsonOptions);
+                        if (configDoc.TryGetProperty("source", out var sourceEl) &&
+                            sourceEl.TryGetProperty("exclude_patterns", out var patternsEl) &&
+                            patternsEl.ValueKind == JsonValueKind.Array)
+                        {
+                            excludePatterns = patternsEl.EnumerateArray()
+                                .Select(e => e.GetString() ?? "")
+                                .Where(s => !string.IsNullOrEmpty(s))
+                                .ToList();
+                        }
+                    }
+                    catch { /* use defaults */ }
+                }
+
                 var docFiles = Directory.GetFiles(docsDir, "*.md", SearchOption.AllDirectories);
                 foreach (var docFile in docFiles)
                 {
                     var relativePath = SourceRefNormalizer.NormalizePath(
                         Path.GetRelativePath(_basePath, docFile));
+                    var fileName = Path.GetFileName(docFile);
+
+                    // Check exclude patterns
+                    var excluded = excludePatterns.Any(pattern =>
+                    {
+                        var p = pattern.Replace("**/", "");
+                        return fileName.Equals(p, StringComparison.OrdinalIgnoreCase) ||
+                               relativePath.EndsWith(p, StringComparison.OrdinalIgnoreCase);
+                    });
+                    if (excluded) continue;
+
                     var testIds = docToTests.TryGetValue(relativePath, out var ids)
                         ? ids.OrderBy(id => id, StringComparer.OrdinalIgnoreCase).ToList()
                         : [];

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

@@ -963,7 +963,7 @@ function renderKPICards(summary) {
         const colorClass = pct >= 80 ? 'green' : pct >= 50 ? 'amber' : 'red';
 
         html += `
-            <div class="cov-kpi-card ${colorClass}" onclick="document.getElementById('details-${s.key}-coverage')?.scrollIntoView({behavior:'smooth'})">
+            <div class="cov-kpi-card ${colorClass}" onclick="scrollToCoverageSection('${s.target}')">
                 <div class="cov-kpi-label">${s.label}</div>
                 <div class="cov-kpi-value ${colorClass}">${pct.toFixed(1)}%</div>
                 <div class="cov-kpi-bar"><div class="cov-kpi-bar-fill ${colorClass}" style="width:${Math.min(pct,100)}%"></div></div>
@@ -1356,13 +1356,17 @@ function renderCoverageSection(label, sectionData, unit, renderDetailsFn) {
         // Expandable detail list
         const detailCount = sectionData.details.length;
         html += `<button class="coverage-toggle-btn" onclick="toggleCoverageDetails('${sectionId}')">Show details (${detailCount})</button>`;
-        // Add search filter for large lists
+        // Add search filter and uncovered toggle
+        const uncoveredCount = sectionData.details.filter(d => d.covered === false || (d.percentage !== undefined && d.percentage < 100)).length;
+        html += `<div class="coverage-detail-filter collapsed" id="filter-${sectionId}">`;
         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 += `<input type="text" placeholder="Filter by ID or text..." oninput="filterCoverageDetails('${sectionId}', this.value)" />`;
+        }
+        if (uncoveredCount > 0 && uncoveredCount < detailCount) {
+            html += `<button class="uncovered-filter-btn" id="uncovered-btn-${sectionId}" onclick="toggleUncoveredFilter('${sectionId}')" title="Show only uncovered items">Show uncovered only (${uncoveredCount})</button>`;
         }
+        html += `<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>';
@@ -1458,6 +1462,61 @@ function filterCoverageDetails(sectionId, query) {
     }
 }
 
+/**
+ * Scroll to a coverage section and auto-expand its details.
+ */
+function scrollToCoverageSection(sectionId) {
+    // The detail list has id="details-{sectionId}"
+    const detailList = document.getElementById('details-' + sectionId);
+    // The section wrapper is the parent .coverage-section
+    const section = detailList?.closest('.coverage-section');
+    if (section) {
+        // Auto-expand if collapsed
+        if (detailList.classList.contains('collapsed')) {
+            toggleCoverageDetails(sectionId);
+        }
+        section.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+}
+
+/**
+ * Toggle showing only uncovered items in a coverage detail list.
+ */
+function toggleUncoveredFilter(sectionId) {
+    const list = document.getElementById('details-' + sectionId);
+    const btn = document.getElementById('uncovered-btn-' + sectionId);
+    const countEl = document.getElementById('filter-count-' + sectionId);
+    if (!list || !btn) return;
+
+    const isActive = btn.classList.toggle('active');
+
+    let visible = 0;
+    for (const li of list.children) {
+        const isCovered = li.getAttribute('data-covered') === 'true';
+        if (isActive && isCovered) {
+            li.style.display = 'none';
+        } else if (li.style.display === 'none' && !isCovered) {
+            // Already hidden by text filter — leave it
+        } else if (!isActive) {
+            li.style.display = '';
+            visible++;
+        } else {
+            visible++;
+        }
+    }
+
+    // Recount visible items
+    visible = 0;
+    for (const li of list.children) {
+        if (li.style.display !== 'none') visible++;
+    }
+
+    if (countEl) {
+        countEl.textContent = isActive ? `${visible} uncovered` : `${list.children.length} items`;
+    }
+    btn.textContent = isActive ? 'Show all' : `Show uncovered only (${list.querySelectorAll('[data-covered="false"]').length})`;
+}
+
 /**
  * Render documentation detail list items.
  */
@@ -1467,7 +1526,7 @@ function renderDocDetails(section) {
         const icon = d.covered
             ? '<span class="detail-icon coverage-green">&#10003;</span>'
             : '<span class="detail-icon coverage-red">&#10007;</span>';
-        html += `<li>
+        html += `<li data-covered="${d.covered ? 'true' : 'false'}">
             <span class="detail-name" title="${escapeHtml(d.doc)}">${escapeHtml(d.doc)}</span>
             <span class="detail-meta">${d.test_count} test${d.test_count !== 1 ? 's' : ''}</span>
             ${icon}
@@ -1490,7 +1549,7 @@ function renderCriteriaDetails(section) {
         const displayName = titleText
             ? `<strong>${escapeHtml(d.id)}</strong> ${escapeHtml(titleText)}`
             : `<strong>${escapeHtml(d.id)}</strong>`;
-        html += `<li title="${escapeHtml(titleText)}">
+        html += `<li data-covered="${d.covered ? 'true' : 'false'}" title="${escapeHtml(titleText)}">
             <span class="detail-name">${displayName}</span>
             <span class="detail-meta">${testList}</span>
             ${icon}
@@ -1506,7 +1565,8 @@ function renderAutoDetails(section) {
     let html = '';
     for (const d of section.details) {
         const suiteColor = d.percentage >= 80 ? 'coverage-green' : d.percentage >= 50 ? 'coverage-yellow' : 'coverage-red';
-        html += `<li>
+        const fullyCovered = d.percentage >= 100;
+        html += `<li data-covered="${fullyCovered ? 'true' : 'false'}">
             <span class="detail-name">${escapeHtml(d.suite)}</span>
             <span class="detail-meta ${suiteColor}">${d.automated}/${d.total} (${d.percentage.toFixed(1)}%)</span>
         </li>`;

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

@@ -1408,6 +1408,35 @@ details.result-row[open] summary::before {
     border-color: var(--text-muted);
 }
 
+.uncovered-filter-btn {
+    background: none;
+    border: 1px solid var(--border-color);
+    color: var(--text-muted);
+    padding: 0.3rem 0.75rem;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    font-size: 0.8rem;
+    transition: all 0.2s ease;
+    white-space: nowrap;
+}
+
+.uncovered-filter-btn:hover {
+    background: var(--bg-color);
+    color: var(--text-color);
+    border-color: var(--text-muted);
+}
+
+.uncovered-filter-btn.active {
+    background: #dc3545;
+    color: #fff;
+    border-color: #dc3545;
+}
+
+.uncovered-filter-btn.active:hover {
+    background: #c82333;
+    border-color: #c82333;
+}
+
 /* Coverage Empty State */
 .coverage-empty-state {
     display: flex;