@oss-autopilot/core 0.41.0

package/dist/commands/dashboard-templates.js

@@ -0,0 +1,1627 @@
+/**
+ * Dashboard HTML template generation.
+ * Contains all HTML/CSS/JS template strings, escapeHtml(), and rendering helpers.
+ * Pure functions with no side effects — all data is passed in as arguments.
+ */
+/**
+ * Escape HTML special characters to prevent XSS when interpolating
+ * user-controlled content (e.g. PR titles, comment bodies, author names) into HTML.
+ * Note: This escapes HTML entity characters only. It does not sanitize URL schemes
+ * (e.g., javascript:) — callers placing values in href attributes should validate
+ * the URL scheme if the source is untrusted. GitHub API URLs are trusted.
+ */
+export function escapeHtml(text) {
+    return text
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+export function buildDashboardStats(digest, state) {
+    const summary = digest.summary || {
+        totalActivePRs: 0,
+        totalMergedAllTime: 0,
+        mergeRate: 0,
+        totalNeedingAttention: 0,
+    };
+    return {
+        activePRs: summary.totalActivePRs,
+        shelvedPRs: (digest.shelvedPRs || []).length,
+        mergedPRs: summary.totalMergedAllTime,
+        closedPRs: Object.values(state.repoScores || {}).reduce((sum, s) => sum + (s.closedWithoutMergeCount || 0), 0),
+        mergeRate: `${(summary.mergeRate ?? 0).toFixed(1)}%`,
+    };
+}
+export function generateDashboardHtml(stats, monthlyMerged, monthlyClosed, monthlyOpened, digest, state, issueResponses = []) {
+    const approachingDormantDays = state.config?.approachingDormantDays ?? 25;
+    const shelvedPRs = digest.shelvedPRs || [];
+    const autoUnshelvedPRs = digest.autoUnshelvedPRs || [];
+    const recentlyMerged = digest.recentlyMergedPRs || [];
+    const shelvedUrls = new Set(shelvedPRs.map((pr) => pr.url));
+    const activePRList = (digest.openPRs || []).filter((pr) => !shelvedUrls.has(pr.url));
+    // Action Required: contributor must do something
+    const actionRequired = [
+        ...(digest.prsNeedingResponse || []),
+        ...(digest.needsChangesPRs || []),
+        ...(digest.ciFailingPRs || []),
+        ...(digest.mergeConflictPRs || []),
+        ...(digest.incompleteChecklistPRs || []),
+        ...(digest.missingRequiredFilesPRs || []),
+        ...(digest.needsRebasePRs || []),
+    ];
+    // Waiting on Others: informational, no contributor action needed
+    const waitingOnOthers = [
+        ...(digest.changesAddressedPRs || []),
+        ...(digest.waitingOnMaintainerPRs || []),
+        ...(digest.ciBlockedPRs || []),
+        ...(digest.ciNotRunningPRs || []),
+    ];
+    function truncateTitle(title, max = 50) {
+        const truncated = title.length <= max ? title : title.slice(0, max) + '...';
+        return escapeHtml(truncated);
+    }
+    /**
+     * Render health status items. labelFn output is automatically HTML-escaped.
+     * metaFn output is injected raw — callers must ensure metaFn returns safe HTML
+     * (use escapeHtml for any user-controlled content within metaFn).
+     *
+     * Accepts both full FetchedPR objects and lightweight ShelvedPRRef objects.
+     */
+    function renderHealthItems(prs, cssClass, svgPaths, labelFn, metaFn) {
+        return prs
+            .map((pr) => {
+            const rawLabel = typeof labelFn === 'string' ? labelFn : labelFn(pr);
+            const label = escapeHtml(rawLabel);
+            return `
+        <div class="health-item ${cssClass}" data-status="${cssClass}" data-repo="${escapeHtml(pr.repo)}" data-title="${escapeHtml(pr.title.toLowerCase())}">
+          <div class="health-icon">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              ${svgPaths}
+            </svg>
+          </div>
+          <div class="health-content">
+            <div class="health-title"><a href="${escapeHtml(pr.url)}" target="_blank">${escapeHtml(pr.repo)}#${pr.number}</a> - ${label}</div>
+            <div class="health-meta">${metaFn(pr)}</div>
+          </div>
+        </div>`;
+        })
+            .join('');
+    }
+    // SVG path constants for health item icons
+    const SVG = {
+        comment: '<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>',
+        edit: '<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>',
+        xCircle: '<circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/>',
+        conflict: '<path d="M8 3v3a2 2 0 0 1-2 2H3"/><path d="M21 8h-3a2 2 0 0 1-2-2V3"/><path d="M3 16h3a2 2 0 0 1 2 2v3"/><path d="M16 21v-3a2 2 0 0 1 2-2h3"/>',
+        checklist: '<path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>',
+        file: '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="12" y1="18" x2="12" y2="12"/><line x1="9" y1="15" x2="15" y2="15"/>',
+        checkCircle: '<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/>',
+        clock: '<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>',
+        lock: '<rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>',
+        infoCircle: '<circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>',
+        refresh: '<polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/>',
+        box: '<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/>',
+        bell: '<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/>',
+        gitMerge: '<circle cx="7" cy="18" r="3"/><circle cx="7" cy="6" r="3"/><circle cx="17" cy="12" r="3"/><line x1="7" y1="9" x2="7" y2="15"/><path d="M7 9c0 4 10 3 10 3"/>',
+    };
+    // Default meta: truncated PR title (works for both FetchedPR and ShelvedPRRef)
+    const titleMeta = (pr) => truncateTitle(pr.title);
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>OSS Autopilot - Mission Control</title>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
+  <style>
+    :root, [data-theme="dark"] {
+      --bg-base: #080b10;
+      --bg-surface: rgba(22, 27, 34, 0.65);
+      --bg-elevated: rgba(28, 33, 40, 0.8);
+      --border: rgba(48, 54, 61, 0.6);
+      --border-muted: rgba(33, 38, 45, 0.5);
+      --text-primary: #e6edf3;
+      --text-secondary: #8b949e;
+      --text-muted: #6e7681;
+      --accent-merged: #a855f7;
+      --accent-merged-dim: rgba(168, 85, 247, 0.12);
+      --accent-open: #3fb950;
+      --accent-open-dim: rgba(63, 185, 80, 0.12);
+      --accent-warning: #d29922;
+      --accent-warning-dim: rgba(210, 153, 34, 0.12);
+      --accent-error: #f85149;
+      --accent-error-dim: rgba(248, 81, 73, 0.10);
+      --accent-conflict: #da3633;
+      --accent-info: #58a6ff;
+      --accent-info-dim: rgba(88, 166, 255, 0.08);
+      --chart-border: rgba(8, 11, 16, 0.8);
+      --chart-grid: rgba(48, 54, 61, 0.3);
+      --scrollbar-track: rgba(28, 33, 40, 0.8);
+      --scrollbar-thumb: rgba(48, 54, 61, 0.6);
+    }
+
+    [data-theme="light"] {
+      --bg-base: #f6f8fa;
+      --bg-surface: rgba(255, 255, 255, 0.85);
+      --bg-elevated: rgba(246, 248, 250, 0.95);
+      --border: rgba(208, 215, 222, 0.6);
+      --border-muted: rgba(216, 222, 228, 0.5);
+      --text-primary: #1f2328;
+      --text-secondary: #656d76;
+      --text-muted: #8b949e;
+      --accent-merged: #8250df;
+      --accent-merged-dim: rgba(130, 80, 223, 0.1);
+      --accent-open: #1a7f37;
+      --accent-open-dim: rgba(26, 127, 55, 0.1);
+      --accent-warning: #9a6700;
+      --accent-warning-dim: rgba(154, 103, 0, 0.1);
+      --accent-error: #cf222e;
+      --accent-error-dim: rgba(207, 34, 46, 0.08);
+      --accent-conflict: #cf222e;
+      --accent-info: #0969da;
+      --accent-info-dim: rgba(9, 105, 218, 0.08);
+      --chart-border: rgba(255, 255, 255, 0.8);
+      --chart-grid: rgba(208, 215, 222, 0.4);
+      --scrollbar-track: rgba(246, 248, 250, 0.95);
+      --scrollbar-thumb: rgba(208, 215, 222, 0.6);
+    }
+
+    @media (prefers-color-scheme: light) {
+      :root:not([data-theme="dark"]) {
+        --bg-base: #f6f8fa;
+        --bg-surface: rgba(255, 255, 255, 0.85);
+        --bg-elevated: rgba(246, 248, 250, 0.95);
+        --border: rgba(208, 215, 222, 0.6);
+        --border-muted: rgba(216, 222, 228, 0.5);
+        --text-primary: #1f2328;
+        --text-secondary: #656d76;
+        --text-muted: #8b949e;
+        --accent-merged: #8250df;
+        --accent-merged-dim: rgba(130, 80, 223, 0.1);
+        --accent-open: #1a7f37;
+        --accent-open-dim: rgba(26, 127, 55, 0.1);
+        --accent-warning: #9a6700;
+        --accent-warning-dim: rgba(154, 103, 0, 0.1);
+        --accent-error: #cf222e;
+        --accent-error-dim: rgba(207, 34, 46, 0.08);
+        --accent-conflict: #cf222e;
+        --accent-info: #0969da;
+        --accent-info-dim: rgba(9, 105, 218, 0.08);
+        --chart-border: rgba(255, 255, 255, 0.8);
+        --chart-grid: rgba(208, 215, 222, 0.4);
+        --scrollbar-track: rgba(246, 248, 250, 0.95);
+        --scrollbar-thumb: rgba(208, 215, 222, 0.6);
+      }
+    }
+
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    body {
+      font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
+      background: var(--bg-base);
+      color: var(--text-primary);
+      min-height: 100vh;
+      line-height: 1.5;
+      overflow-x: hidden;
+    }
+
+    body::before {
+      content: '';
+      position: fixed;
+      top: -20%; left: -10%;
+      width: 60%; height: 60%;
+      background: radial-gradient(ellipse, rgba(88, 166, 255, 0.06) 0%, transparent 70%);
+      pointer-events: none;
+      z-index: 0;
+    }
+
+    body::after {
+      content: '';
+      position: fixed;
+      bottom: -20%; right: -10%;
+      width: 50%; height: 50%;
+      background: radial-gradient(ellipse, rgba(168, 85, 247, 0.05) 0%, transparent 70%);
+      pointer-events: none;
+      z-index: 0;
+    }
+
+    [data-theme="light"] body::before,
+    [data-theme="light"] body::after {
+      display: none;
+    }
+
+    .container {
+      max-width: 1400px;
+      margin: 0 auto;
+      padding: 2rem;
+      position: relative;
+      z-index: 1;
+    }
+
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 1.5rem;
+      padding-bottom: 1rem;
+      border-bottom: 1px solid var(--border-muted);
+    }
+
+    .header-left {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+    }
+
+    .logo {
+      width: 44px;
+      height: 44px;
+      background: linear-gradient(135deg, var(--accent-info) 0%, var(--accent-merged) 50%, #f778ba 100%);
+      border-radius: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 1.5rem;
+      box-shadow: 0 0 24px rgba(168, 85, 247, 0.3), 0 0 48px rgba(88, 166, 255, 0.15);
+    }
+
+    .header h1 {
+      font-size: 1.75rem;
+      font-weight: 600;
+      letter-spacing: -0.02em;
+      background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+
+    .header-subtitle {
+      font-family: 'Geist Mono', monospace;
+      font-size: 0.75rem;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      letter-spacing: 0.1em;
+    }
+
+    .timestamp {
+      font-family: 'Geist Mono', monospace;
+      font-size: 0.8rem;
+      color: var(--text-muted);
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    .timestamp::before {
+      content: '';
+      width: 8px;
+      height: 8px;
+      background: var(--accent-open);
+      border-radius: 50%;
+      animation: pulse 2s ease-in-out infinite;
+    }
+
+    @keyframes pulse {
+      0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(35, 134, 54, 0.4); }
+      50% { opacity: 0.8; box-shadow: 0 0 0 8px rgba(35, 134, 54, 0); }
+    }
+
+    .stats-grid {
+      display: flex;
+      background: var(--bg-surface);
+      border: 1px solid var(--border-muted);
+      border-radius: 12px;
+      margin-bottom: 1.5rem;
+      overflow: hidden;
+    }
+
+    @media (max-width: 768px) {
+      .stats-grid { flex-wrap: wrap; }
+      .stat-card { flex: 1 1 33%; }
+    }
+
+    .stat-card {
+      flex: 1;
+      padding: 1rem 1.25rem;
+      position: relative;
+      transition: background 0.2s ease;
+    }
+
+    .stat-card + .stat-card {
+      border-left: 1px solid var(--border-muted);
+    }
+
+    .stat-card:hover {
+      background: rgba(255, 255, 255, 0.02);
+    }
+
+    .stat-card::after {
+      content: '';
+      position: absolute;
+      bottom: 0; left: 0.75rem; right: 0.75rem;
+      height: 2px;
+      background: var(--accent-color, var(--border));
+      border-radius: 2px;
+      opacity: 0.7;
+    }
+
+    .stat-card.active { --accent-color: var(--accent-open); }
+    .stat-card.merged { --accent-color: var(--accent-merged); }
+    .stat-card.closed { --accent-color: var(--text-muted); }
+    .stat-card.rate { --accent-color: var(--accent-info); }
+
+    .stat-value {
+      font-family: 'Geist Mono', monospace;
+      font-size: 1.75rem;
+      font-weight: 600;
+      line-height: 1;
+      margin-bottom: 0.25rem;
+    }
+
+    .stat-card.active .stat-value { color: var(--accent-open); }
+    .stat-card.merged .stat-value { color: var(--accent-merged); }
+    .stat-card.closed .stat-value { color: var(--text-muted); }
+    .stat-card.rate .stat-value { color: var(--accent-info); }
+
+    .stat-label {
+      font-size: 0.7rem;
+      color: var(--text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+
+    .health-section {
+      background: var(--bg-surface);
+      border: 1px solid var(--border-muted);
+      border-radius: 10px;
+      padding: 1.25rem;
+      margin-bottom: 1.25rem;
+    }
+
+    .health-header {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      margin-bottom: 1rem;
+    }
+
+    .health-header h2 {
+      font-size: 1rem;
+      font-weight: 600;
+      color: var(--text-primary);
+    }
+
+    .health-badge {
+      font-family: 'Geist Mono', monospace;
+      font-size: 0.7rem;
+      padding: 0.25rem 0.5rem;
+      border-radius: 4px;
+      background: var(--accent-error-dim);
+      color: var(--accent-error);
+    }
+
+    .health-items {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+      gap: 0.75rem;
+    }
+
+    .health-item {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      padding: 0.75rem 1rem;
+      background: var(--bg-elevated);
+      border-radius: 8px;
+      border-left: 3px solid;
+      transition: transform 0.15s ease;
+    }
+
+    .health-item:hover { transform: translateX(4px); }
+
+    .health-item.ci-failing {
+      border-left-color: var(--accent-error);
+      background: var(--accent-error-dim);
+    }
+
+    .health-item.conflict {
+      border-left-color: var(--accent-conflict);
+      background: rgba(218, 54, 51, 0.1);
+    }
+
+    .health-item.incomplete-checklist {
+      border-left-color: var(--accent-info);
+    }
+    .health-item.needs-response,
+    .health-item.needs-changes {
+      border-left-color: var(--accent-warning);
+      background: var(--accent-warning-dim);
+    }
+
+    .health-item.changes-addressed,
+    .health-item.waiting-maintainer {
+      border-left-color: var(--accent-info);
+      background: var(--accent-info-dim);
+    }
+
+    .health-item.ci-not-running {
+      border-left-color: var(--text-muted);
+      background: rgba(110, 118, 129, 0.1);
+    }
+
+    .health-item.missing-files {
+      border-left-color: var(--accent-warning);
+      background: var(--accent-warning-dim);
+    }
+
+    .health-item.ci-blocked {
+      border-left-color: var(--text-muted);
+      background: rgba(110, 118, 129, 0.1);
+    }
+
+    .health-item.needs-rebase {
+      border-left-color: var(--accent-warning);
+      background: var(--accent-warning-dim);
+    }
+
+    .health-item.shelved {
+      border-left-color: var(--text-muted);
+      background: rgba(110, 118, 129, 0.06);
+      opacity: 0.6;
+    }
+
+    .health-item.shelved .health-icon { background: rgba(110, 118, 129, 0.12); color: var(--text-muted); }
+
+    .health-item.auto-unshelved {
+      border-left-color: var(--accent-info);
+      background: var(--accent-info-dim);
+    }
+
+    .health-item.auto-unshelved .health-icon { background: var(--accent-info-dim); color: var(--accent-info); }
+
+    .stat-card.shelved { --accent-color: var(--text-muted); }
+    .stat-card.shelved .stat-value { color: var(--text-muted); }
+
+    .waiting-section {
+      border-color: rgba(88, 166, 255, 0.2);
+    }
+
+    .health-icon {
+      width: 32px;
+      height: 32px;
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 1rem;
+      flex-shrink: 0;
+    }
+
+    .health-item.ci-failing .health-icon { background: var(--accent-error-dim); color: var(--accent-error); }
+    .health-item.conflict .health-icon { background: rgba(218, 54, 51, 0.15); color: var(--accent-conflict); }
+    .health-item.incomplete-checklist .health-icon { background: var(--accent-info-dim); color: var(--accent-info); }
+    .health-item.needs-response .health-icon,
+    .health-item.needs-changes .health-icon { background: var(--accent-warning-dim); color: var(--accent-warning); }
+    .health-item.changes-addressed .health-icon,
+    .health-item.waiting-maintainer .health-icon { background: var(--accent-info-dim); color: var(--accent-info); }
+    .health-item.ci-not-running .health-icon { background: rgba(110, 118, 129, 0.15); color: var(--text-muted); }
+    .health-item.missing-files .health-icon { background: var(--accent-warning-dim); color: var(--accent-warning); }
+    .health-item.ci-blocked .health-icon { background: rgba(110, 118, 129, 0.15); color: var(--text-muted); }
+    .health-item.needs-rebase .health-icon { background: var(--accent-warning-dim); color: var(--accent-warning); }
+
+    .health-content { flex: 1; min-width: 0; }
+
+    .health-title {
+      font-size: 0.85rem;
+      font-weight: 500;
+      color: var(--text-primary);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .health-title a { color: inherit; text-decoration: none; }
+    .health-title a:hover { color: var(--accent-info); }
+
+    .health-meta {
+      font-family: 'Geist Mono', monospace;
+      font-size: 0.7rem;
+      color: var(--text-muted);
+    }
+
+    .health-empty {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 2rem;
+      color: var(--text-muted);
+      font-size: 0.9rem;
+    }
+
+    .health-empty::before {
+      content: '\\2713';
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      background: var(--accent-open-dim);
+      color: var(--accent-open);
+      border-radius: 50%;
+      margin-right: 0.75rem;
+      font-weight: bold;
+    }
+
+    .main-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 1.25rem;
+      margin-bottom: 1.25rem;
+    }
+
+    @media (max-width: 1024px) { .main-grid { grid-template-columns: 1fr; } }
+
+    .card {
+      background: var(--bg-surface);
+      border: 1px solid var(--border-muted);
+      border-radius: 10px;
+      overflow: hidden;
+    }
+
+    .card-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0.75rem 1.125rem;
+      border-bottom: 1px solid var(--border-muted);
+    }
+
+    .card-title {
+      font-size: 0.75rem;
+      font-weight: 600;
+      color: var(--text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+    }
+
+    .card-body { padding: 1rem 1.125rem; }
+
+    .chart-container {
+      position: relative;
+      height: 260px;
+    }
+
+    .pr-list-section {
+      background: var(--bg-surface);
+      border: 1px solid var(--border-muted);
+      border-radius: 10px;
+      overflow: hidden;
+    }
+
+    .pr-list-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0.75rem 1.125rem;
+      border-bottom: 1px solid var(--border-muted);
+    }
+
+    .pr-list-title {
+      font-size: 0.75rem;
+      font-weight: 600;
+      color: var(--text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+    }
+
+    .pr-count {
+      font-family: 'Geist Mono', monospace;
+      font-size: 0.75rem;
+      padding: 0.25rem 0.5rem;
+      background: var(--accent-open-dim);
+      color: var(--accent-open);
+      border-radius: 4px;
+    }
+
+    .pr-list {
+      max-height: 600px;
+      overflow-y: auto;
+    }
+
+    .pr-list::-webkit-scrollbar { width: 6px; }
+    .pr-list::-webkit-scrollbar-track { background: var(--scrollbar-track, var(--bg-elevated)); }
+    .pr-list::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb, var(--border)); border-radius: 3px; }
+
+    .pr-item {
+      display: flex;
+      align-items: flex-start;
+      gap: 1rem;
+      padding: 1rem 1.25rem;
+      border-bottom: 1px solid var(--border-muted);
+      transition: background 0.15s ease;
+    }
+
+    .pr-item:last-child { border-bottom: none; }
+    .pr-item:hover { background: var(--bg-elevated); }
+
+    .pr-status-indicator {
+      width: 40px;
+      height: 40px;
+      border-radius: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      font-size: 1.1rem;
+      background: var(--accent-open-dim);
+      color: var(--accent-open);
+    }
+
+    .pr-item.has-issues .pr-status-indicator {
+      background: var(--accent-error-dim);
+      color: var(--accent-error);
+      animation: attention-pulse 2s ease-in-out infinite;
+    }
+
+    .pr-item.stale .pr-status-indicator {
+      background: var(--accent-warning-dim);
+      color: var(--accent-warning);
+    }
+
+    @keyframes attention-pulse {
+      0%, 100% { box-shadow: 0 0 0 0 rgba(248, 81, 73, 0.4); }
+      50% { box-shadow: 0 0 0 6px rgba(248, 81, 73, 0); }
+    }
+
+    .pr-content { flex: 1; min-width: 0; }
+
+    .pr-title-row {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      margin-bottom: 0.25rem;
+    }
+
+    .pr-title {
+      font-size: 0.9rem;
+      font-weight: 500;
+      color: var(--text-primary);
+      text-decoration: none;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .pr-title:hover { color: var(--accent-info); }
+
+    .pr-repo {
+      font-family: 'Geist Mono', monospace;
+      font-size: 0.75rem;
+      color: var(--text-muted);
+      flex-shrink: 0;
+    }
+
+    .pr-badges {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+    }
+
+    .badge {
+      font-family: 'Geist Mono', monospace;
+      font-size: 0.65rem;
+      font-weight: 500;
+      padding: 0.2rem 0.5rem;
+      border-radius: 4px;
+      text-transform: uppercase;
+      letter-spacing: 0.03em;
+    }
+
+    .badge-ci-failing { background: var(--accent-error-dim); color: var(--accent-error); }
+    .badge-conflict { background: rgba(218, 54, 51, 0.15); color: var(--accent-conflict); }
+    .badge-needs-response { background: var(--accent-warning-dim); color: var(--accent-warning); }
+    .badge-stale { background: var(--accent-warning-dim); color: var(--accent-warning); }
+    .badge-passing { background: var(--accent-open-dim); color: var(--accent-open); }
+    .badge-pending { background: var(--accent-info-dim); color: var(--accent-info); }
+    .badge-days { background: var(--bg-elevated); color: var(--text-muted); }
+    .badge-changes-requested { background: var(--accent-warning-dim); color: var(--accent-warning); }
+    .badge-changes-addressed { background: var(--accent-info-dim); color: var(--accent-info); }
+
+    .pr-activity {
+      font-family: 'Geist Mono', monospace;
+      font-size: 0.7rem;
+      color: var(--text-muted);
+      margin-left: auto;
+      text-align: right;
+      flex-shrink: 0;
+    }
+
+    .empty-state {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 3rem;
+      color: var(--text-muted);
+    }
+
+    .empty-state-icon {
+      font-size: 2.5rem;
+      margin-bottom: 1rem;
+      opacity: 0.5;
+    }
+
+    .footer {
+      text-align: center;
+      padding-top: 1.5rem;
+      border-top: 1px solid var(--border-muted);
+      margin-top: 1.5rem;
+    }
+
+    .footer p {
+      font-family: 'Geist Mono', monospace;
+      font-size: 0.7rem;
+      color: var(--text-muted);
+    }
+
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(12px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+
+    .stats-grid, .health-section, .pr-list-section {
+      animation: fadeInUp 0.35s ease;
+    }
+
+    .theme-toggle {
+      background: var(--bg-elevated);
+      border: 1px solid var(--border-muted);
+      border-radius: 8px;
+      padding: 0.4rem 0.6rem;
+      cursor: pointer;
+      color: var(--text-secondary);
+      display: flex;
+      align-items: center;
+      gap: 0.4rem;
+      font-family: 'Geist Mono', monospace;
+      font-size: 0.7rem;
+      transition: background 0.2s ease, color 0.2s ease;
+    }
+
+    .theme-toggle:hover {
+      background: var(--bg-surface);
+      color: var(--text-primary);
+    }
+
+    .theme-toggle svg { flex-shrink: 0; }
+
+    .header-controls {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+    }
+
+    .filter-toolbar {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      padding: 0.75rem 1rem;
+      background: var(--bg-surface);
+      border: 1px solid var(--border-muted);
+      border-radius: 10px;
+      margin-bottom: 1.25rem;
+      flex-wrap: wrap;
+    }
+
+    .filter-toolbar label {
+      font-family: 'Geist Mono', monospace;
+      font-size: 0.7rem;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+      flex-shrink: 0;
+    }
+
+    .filter-search {
+      flex: 1;
+      min-width: 180px;
+      padding: 0.4rem 0.75rem;
+      background: var(--bg-elevated);
+      border: 1px solid var(--border-muted);
+      border-radius: 6px;
+      color: var(--text-primary);
+      font-family: 'Geist', sans-serif;
+      font-size: 0.8rem;
+      outline: none;
+      transition: border-color 0.2s ease;
+    }
+
+    .filter-search:focus {
+      border-color: var(--accent-info);
+    }
+
+    .filter-search::placeholder {
+      color: var(--text-muted);
+    }
+
+    .filter-select {
+      padding: 0.4rem 0.75rem;
+      background: var(--bg-elevated);
+      border: 1px solid var(--border-muted);
+      border-radius: 6px;
+      color: var(--text-primary);
+      font-family: 'Geist', sans-serif;
+      font-size: 0.8rem;
+      outline: none;
+      cursor: pointer;
+      transition: border-color 0.2s ease;
+    }
+
+    .filter-select:focus {
+      border-color: var(--accent-info);
+    }
+
+    .filter-count {
+      font-family: 'Geist Mono', monospace;
+      font-size: 0.7rem;
+      color: var(--text-muted);
+      margin-left: auto;
+      flex-shrink: 0;
+    }
+
+    .pr-item[data-hidden="true"],
+    .health-item[data-hidden="true"] {
+      display: none;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <header class="header">
+      <div class="header-left">
+        <div class="logo">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="12" cy="12" r="10"/>
+            <path d="M12 6v6l4 2"/>
+          </svg>
+        </div>
+        <div>
+          <h1>OSS Autopilot</h1>
+          <span class="header-subtitle">Mission Control</span>
+        </div>
+      </div>
+      <div class="header-controls">
+        <div class="timestamp">
+          Last updated: ${digest.generatedAt
+        ? new Date(digest.generatedAt).toLocaleString('en-US', {
+            weekday: 'short',
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+            second: '2-digit',
+            hour12: false,
+        })
+        : 'Unknown'}
+        </div>
+        <button class="theme-toggle" id="themeToggle" title="Toggle light/dark mode">
+          <svg id="themeIconSun" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="12" cy="12" r="5"/>
+            <line x1="12" y1="1" x2="12" y2="3"/>
+            <line x1="12" y1="21" x2="12" y2="23"/>
+            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
+            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
+            <line x1="1" y1="12" x2="3" y2="12"/>
+            <line x1="21" y1="12" x2="23" y2="12"/>
+            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
+            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
+          </svg>
+          <svg id="themeIconMoon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:none;">
+            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+          </svg>
+          <span id="themeLabel">Light</span>
+        </button>
+      </div>
+    </header>
+
+    <div class="stats-grid">
+      <div class="stat-card active">
+        <div class="stat-value">${stats.activePRs}</div>
+        <div class="stat-label">Active PRs</div>
+      </div>
+      <div class="stat-card shelved">
+        <div class="stat-value">${stats.shelvedPRs}</div>
+        <div class="stat-label">Shelved</div>
+      </div>
+      <div class="stat-card merged">
+        <div class="stat-value">${stats.mergedPRs}</div>
+        <div class="stat-label">Merged</div>
+      </div>
+      <div class="stat-card closed">
+        <div class="stat-value">${stats.closedPRs}</div>
+        <div class="stat-label">Closed</div>
+      </div>
+      <div class="stat-card rate">
+        <div class="stat-value">${stats.mergeRate}</div>
+        <div class="stat-label">Merge Rate</div>
+      </div>
+    </div>
+
+    <div class="filter-toolbar" id="filterToolbar">
+      <label>Filters</label>
+      <input type="text" class="filter-search" id="searchInput" placeholder="Search by PR title..." />
+      <select class="filter-select" id="statusFilter">
+        <option value="all">All Statuses</option>
+        <option value="needs-response">Needs Response</option>
+        <option value="needs-changes">Needs Changes</option>
+        <option value="ci-failing">CI Failing</option>
+        <option value="conflict">Merge Conflict</option>
+        <option value="changes-addressed">Changes Addressed</option>
+        <option value="waiting-maintainer">Waiting on Maintainer</option>
+        <option value="ci-blocked">CI Blocked</option>
+        <option value="ci-not-running">CI Not Running</option>
+        <option value="incomplete-checklist">Incomplete Checklist</option>
+        <option value="missing-files">Missing Files</option>
+        <option value="needs-rebase">Needs Rebase</option>
+        <option value="shelved">Shelved</option>
+        <option value="merged">Recently Merged</option>
+        <option value="closed">Recently Closed</option>
+        <option value="auto-unshelved">Auto-Unshelved</option>
+        <option value="active">Active (No Issues)</option>
+      </select>
+      <select class="filter-select" id="repoFilter">
+        <option value="all">All Repositories</option>
+        ${(() => {
+        const repos = new Set();
+        for (const pr of activePRList)
+            repos.add(pr.repo);
+        for (const pr of shelvedPRs)
+            repos.add(pr.repo);
+        for (const pr of actionRequired)
+            repos.add(pr.repo);
+        for (const pr of waitingOnOthers)
+            repos.add(pr.repo);
+        for (const pr of recentlyMerged)
+            repos.add(pr.repo);
+        for (const pr of digest.recentlyClosedPRs || [])
+            repos.add(pr.repo);
+        for (const pr of autoUnshelvedPRs)
+            repos.add(pr.repo);
+        return Array.from(repos)
+            .sort()
+            .map((repo) => `<option value="${escapeHtml(repo)}">${escapeHtml(repo)}</option>`)
+            .join('\n        ');
+    })()}
+      </select>
+      <span class="filter-count" id="filterCount"></span>
+    </div>
+
+    ${actionRequired.length > 0
+        ? `
+    <section class="health-section">
+      <div class="health-header">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--accent-warning)" stroke-width="2">
+          <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
+          <line x1="12" y1="9" x2="12" y2="13"/>
+          <line x1="12" y1="17" x2="12.01" y2="17"/>
+        </svg>
+        <h2>Action Required</h2>
+        <span class="health-badge">${actionRequired.length} issue${actionRequired.length !== 1 ? 's' : ''}</span>
+      </div>
+      <div class="health-items">
+        ${renderHealthItems(digest.prsNeedingResponse || [], 'needs-response', SVG.comment, 'Needs Response', (pr) => pr.lastMaintainerComment
+            ? `@${escapeHtml(pr.lastMaintainerComment.author)}: ${truncateTitle(pr.lastMaintainerComment.body, 40)}`
+            : truncateTitle(pr.title))}
+        ${renderHealthItems(digest.needsChangesPRs || [], 'needs-changes', SVG.edit, 'Needs Changes', titleMeta)}
+        ${renderHealthItems(digest.ciFailingPRs || [], 'ci-failing', SVG.xCircle, 'CI Failing', titleMeta)}
+        ${renderHealthItems(digest.mergeConflictPRs || [], 'conflict', SVG.conflict, 'Merge Conflict', titleMeta)}
+        ${renderHealthItems(digest.incompleteChecklistPRs || [], 'incomplete-checklist', SVG.checklist, (pr) => `Incomplete Checklist${pr.checklistStats ? ` (${pr.checklistStats.checked}/${pr.checklistStats.total})` : ''}`, titleMeta)}
+        ${renderHealthItems(digest.missingRequiredFilesPRs || [], 'missing-files', SVG.file, 'Missing Required Files', (pr) => (pr.missingRequiredFiles ? escapeHtml(pr.missingRequiredFiles.join(', ')) : truncateTitle(pr.title)))}
+        ${renderHealthItems(digest.needsRebasePRs || [], 'needs-rebase', SVG.refresh, (pr) => `Needs Rebase${pr.commitsBehindUpstream ? ` (${pr.commitsBehindUpstream} behind)` : ''}`, titleMeta)}
+      </div>
+    </section>
+    `
+        : ''}
+
+    ${waitingOnOthers.length > 0
+        ? `
+    <section class="health-section waiting-section">
+      <div class="health-header">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--accent-info)" stroke-width="2">
+          <circle cx="12" cy="12" r="10"/>
+          <polyline points="12 6 12 12 16 14"/>
+        </svg>
+        <h2>Waiting on Others</h2>
+        <span class="health-badge" style="background: var(--accent-info-dim); color: var(--accent-info);">${waitingOnOthers.length} PR${waitingOnOthers.length !== 1 ? 's' : ''}</span>
+      </div>
+      <div class="health-items">
+        ${renderHealthItems(digest.changesAddressedPRs || [], 'changes-addressed', SVG.checkCircle, 'Changes Addressed', (pr) => `Awaiting re-review${pr.lastMaintainerComment ? ` from @${escapeHtml(pr.lastMaintainerComment.author)}` : ''}`)}
+        ${renderHealthItems(digest.waitingOnMaintainerPRs || [], 'waiting-maintainer', SVG.clock, 'Waiting on Maintainer', titleMeta)}
+        ${renderHealthItems(digest.ciBlockedPRs || [], 'ci-blocked', SVG.lock, 'CI Blocked', titleMeta)}
+        ${renderHealthItems(digest.ciNotRunningPRs || [], 'ci-not-running', SVG.infoCircle, 'CI Not Running', titleMeta)}
+      </div>
+    </section>
+    `
+        : ''}
+
+    ${actionRequired.length === 0 && waitingOnOthers.length === 0
+        ? `
+    <section class="health-section">
+      <div class="health-header">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--accent-open)" stroke-width="2">
+          <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
+          <polyline points="22 4 12 14.01 9 11.01"/>
+        </svg>
+        <h2>Health Status</h2>
+      </div>
+      <div class="health-empty">
+        All PRs are healthy - no CI failures, conflicts, or pending responses
+      </div>
+    </section>
+    `
+        : ''}
+
+    ${recentlyMerged.length > 0
+        ? `
+    <section class="health-section" style="animation-delay: 0.15s;">
+      <div class="health-header">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--accent-merged)" stroke-width="2">
+          ${SVG.gitMerge}
+        </svg>
+        <h2>Recently Merged</h2>
+        <span class="health-badge" style="background: var(--accent-merged-dim); color: var(--accent-merged);">${recentlyMerged.length} merged</span>
+      </div>
+      <div class="health-items">
+        ${recentlyMerged
+            .map((pr) => `
+        <div class="health-item" style="border-left-color: var(--accent-merged);" data-status="merged" data-repo="${escapeHtml(pr.repo)}" data-title="${escapeHtml(pr.title.toLowerCase())}">
+          <div class="health-icon" style="background: var(--accent-merged-dim); color: var(--accent-merged);">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              ${SVG.gitMerge}
+            </svg>
+          </div>
+          <div class="health-content">
+            <div class="health-title"><a href="${escapeHtml(pr.url)}" target="_blank">${escapeHtml(pr.repo)}#${pr.number}</a> - Merged</div>
+            <div class="health-meta">${truncateTitle(pr.title)}${pr.mergedAt ? ` · ${new Date(pr.mergedAt).toLocaleDateString()}` : ''}</div>
+          </div>
+        </div>
+        `)
+            .join('')}
+      </div>
+    </section>
+    `
+        : ''}
+
+    ${(digest.recentlyClosedPRs || []).length > 0
+        ? `
+    <section class="health-section" style="animation-delay: 0.2s;">
+      <div class="health-header">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--text-muted)" stroke-width="2">
+          <circle cx="12" cy="12" r="10"/>
+          <line x1="15" y1="9" x2="9" y2="15"/>
+          <line x1="9" y1="9" x2="15" y2="15"/>
+        </svg>
+        <h2>Recently Closed</h2>
+        <span class="health-badge" style="background: rgba(110, 118, 129, 0.15); color: var(--text-muted);">${(digest.recentlyClosedPRs || []).length} closed</span>
+      </div>
+      <div class="health-items">
+        ${(digest.recentlyClosedPRs || [])
+            .map((pr) => `
+        <div class="health-item" style="border-left-color: var(--text-muted); opacity: 0.7;" data-status="closed" data-repo="${escapeHtml(pr.repo)}" data-title="${escapeHtml(pr.title.toLowerCase())}">
+          <div class="health-icon" style="background: rgba(110, 118, 129, 0.15); color: var(--text-muted);">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <circle cx="12" cy="12" r="10"/>
+              <line x1="15" y1="9" x2="9" y2="15"/>
+              <line x1="9" y1="9" x2="15" y2="15"/>
+            </svg>
+          </div>
+          <div class="health-content">
+            <div class="health-title"><a href="${escapeHtml(pr.url)}" target="_blank">${escapeHtml(pr.repo)}#${pr.number}</a> - Closed</div>
+            <div class="health-meta">${truncateTitle(pr.title)}${pr.closedAt ? ` · ${new Date(pr.closedAt).toLocaleDateString()}` : ''}</div>
+          </div>
+        </div>
+        `)
+            .join('')}
+      </div>
+    </section>
+    `
+        : ''}
+
+    ${autoUnshelvedPRs.length > 0
+        ? `
+    <section class="health-section" style="animation-delay: 0.25s;">
+      <div class="health-header">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--accent-info)" stroke-width="2">
+          ${SVG.bell}
+        </svg>
+        <h2>Auto-Unshelved</h2>
+        <span class="health-badge" style="background: var(--accent-info-dim); color: var(--accent-info);">${autoUnshelvedPRs.length} unshelved</span>
+      </div>
+      <div class="health-items">
+        ${renderHealthItems(autoUnshelvedPRs, 'auto-unshelved', SVG.bell, (pr) => 'Auto-Unshelved (' + pr.status.replace(/_/g, ' ') + ')', titleMeta)}
+      </div>
+    </section>
+    `
+        : ''}
+
+    ${issueResponses.length > 0
+        ? `
+    <section class="health-section" style="animation-delay: 0.3s;">
+      <div class="health-header">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--accent-info)" stroke-width="2">
+          ${SVG.comment}
+        </svg>
+        <h2>Issue Conversations</h2>
+        <span class="health-badge" style="background: var(--accent-info-dim); color: var(--accent-info);">${issueResponses.length} repl${issueResponses.length !== 1 ? 'ies' : 'y'}</span>
+      </div>
+      <div class="health-items">
+        ${issueResponses
+            .map((issue) => `
+        <div class="health-item changes-addressed">
+          <div class="health-icon" style="background: var(--accent-info-dim); color: var(--accent-info);">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              ${SVG.comment}
+            </svg>
+          </div>
+          <div class="health-content">
+            <div class="health-title"><a href="${escapeHtml(issue.url)}" target="_blank">${escapeHtml(issue.repo)}#${issue.number}</a> - ${escapeHtml(issue.title.slice(0, 50))}${issue.title.length > 50 ? '...' : ''}</div>
+            <div class="health-meta">@${escapeHtml(issue.lastResponseAuthor)}: ${escapeHtml(issue.lastResponseBody.slice(0, 60))}${issue.lastResponseBody.length > 60 ? '...' : ''}</div>
+          </div>
+        </div>
+        `)
+            .join('')}
+      </div>
+    </section>
+    `
+        : ''}
+
+    <div class="main-grid">
+      <div class="card">
+        <div class="card-header">
+          <span class="card-title">PR Status Distribution</span>
+        </div>
+        <div class="card-body">
+          <div class="chart-container">
+            <canvas id="statusChart"></canvas>
+          </div>
+        </div>
+      </div>
+
+      <div class="card">
+        <div class="card-header">
+          <span class="card-title">Repository Breakdown</span>
+        </div>
+        <div class="card-body">
+          <div class="chart-container">
+            <canvas id="reposChart"></canvas>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="card" style="margin-bottom: 1.25rem;">
+      <div class="card-header">
+        <span class="card-title">Contribution Timeline</span>
+      </div>
+      <div class="card-body">
+        <div class="chart-container" style="height: 250px;">
+          <canvas id="monthlyChart"></canvas>
+        </div>
+      </div>
+    </div>
+
+
+    ${activePRList.length > 0
+        ? `
+    <section class="pr-list-section">
+      <div class="pr-list-header">
+        <h2 class="pr-list-title">Active Pull Requests</h2>
+        <span class="pr-count">${activePRList.length} open</span>
+      </div>
+      <div class="pr-list">
+        ${activePRList
+            .map((pr) => {
+            const hasIssues = pr.ciStatus === 'failing' ||
+                pr.hasMergeConflict ||
+                (pr.hasUnrespondedComment && pr.status !== 'changes_addressed') ||
+                pr.status === 'needs_changes';
+            const isStale = pr.daysSinceActivity >= approachingDormantDays;
+            const itemClass = hasIssues ? 'has-issues' : isStale ? 'stale' : '';
+            const prStatus = pr.ciStatus === 'failing'
+                ? 'ci-failing'
+                : pr.hasMergeConflict
+                    ? 'conflict'
+                    : pr.hasUnrespondedComment && pr.status !== 'changes_addressed' && pr.status !== 'failing_ci'
+                        ? 'needs-response'
+                        : pr.status === 'needs_changes'
+                            ? 'needs-changes'
+                            : pr.status === 'changes_addressed'
+                                ? 'changes-addressed'
+                                : 'active';
+            return `
+        <div class="pr-item ${itemClass}" data-status="${prStatus}" data-repo="${escapeHtml(pr.repo)}" data-title="${escapeHtml(pr.title.toLowerCase())}">
+          <div class="pr-status-indicator">
+            ${hasIssues
+                ? `
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <circle cx="12" cy="12" r="10"/>
+              <line x1="12" y1="8" x2="12" y2="12"/>
+              <line x1="12" y1="16" x2="12.01" y2="16"/>
+            </svg>
+            `
+                : `
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <circle cx="12" cy="12" r="10"/>
+              <line x1="12" y1="16" x2="12" y2="12"/>
+              <line x1="12" y1="8" x2="12.01" y2="8"/>
+            </svg>
+            `}
+          </div>
+          <div class="pr-content">
+            <div class="pr-title-row">
+              <a href="${escapeHtml(pr.url)}" target="_blank" class="pr-title">${escapeHtml(pr.title)}</a>
+              <span class="pr-repo">${escapeHtml(pr.repo)}#${pr.number}</span>
+            </div>
+            <div class="pr-badges">
+              ${pr.ciStatus === 'failing' ? '<span class="badge badge-ci-failing">CI Failing</span>' : ''}
+              ${pr.ciStatus === 'passing' ? '<span class="badge badge-passing">CI Passing</span>' : ''}
+              ${pr.ciStatus === 'pending' ? '<span class="badge badge-pending">CI Pending</span>' : ''}
+              ${pr.hasMergeConflict ? '<span class="badge badge-conflict">Merge Conflict</span>' : ''}
+              ${pr.hasUnrespondedComment && pr.status === 'changes_addressed' ? '<span class="badge badge-changes-addressed">Changes Addressed</span>' : ''}
+              ${pr.hasUnrespondedComment && pr.status !== 'changes_addressed' && pr.status !== 'failing_ci' ? '<span class="badge badge-needs-response">Needs Response</span>' : ''}
+              ${pr.reviewDecision === 'changes_requested' ? '<span class="badge badge-changes-requested">Changes Requested</span>' : ''}
+              ${isStale ? `<span class="badge badge-stale">${pr.daysSinceActivity}d inactive</span>` : ''}
+            </div>
+          </div>
+          <div class="pr-activity">
+            ${pr.daysSinceActivity === 0 ? 'Today' : pr.daysSinceActivity === 1 ? 'Yesterday' : pr.daysSinceActivity + 'd ago'}
+          </div>
+        </div>`;
+        })
+            .join('')}
+      </div>
+    </section>
+    `
+        : `
+    <section class="pr-list-section">
+      <div class="pr-list-header">
+        <h2 class="pr-list-title">Active Pull Requests</h2>
+        <span class="pr-count">0 open</span>
+      </div>
+      <div class="empty-state">
+        <div class="empty-state-icon">
+          <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+            <circle cx="12" cy="12" r="10"/>
+            <path d="M8 12h8"/>
+          </svg>
+        </div>
+        <p>No active pull requests</p>
+      </div>
+    </section>
+    `}
+
+    ${shelvedPRs.length > 0
+        ? `
+    <section class="pr-list-section" style="margin-top: 1.25rem; opacity: 0.7;">
+      <div class="pr-list-header">
+        <h2 class="pr-list-title">Shelved Pull Requests</h2>
+        <span class="pr-count" style="background: rgba(110, 118, 129, 0.15); color: var(--text-muted);">${shelvedPRs.length} shelved</span>
+      </div>
+      <div class="pr-list">
+        ${shelvedPRs
+            .map((pr) => `
+        <div class="pr-item" data-status="shelved" data-repo="${escapeHtml(pr.repo)}" data-title="${escapeHtml(pr.title.toLowerCase())}">
+          <div class="pr-status-indicator" style="background: rgba(110, 118, 129, 0.1); color: var(--text-muted);">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              ${SVG.box}
+            </svg>
+          </div>
+          <div class="pr-content">
+            <div class="pr-title-row">
+              <a href="${escapeHtml(pr.url)}" target="_blank" class="pr-title">${escapeHtml(pr.title)}</a>
+              <span class="pr-repo">${escapeHtml(pr.repo)}#${pr.number}</span>
+            </div>
+            <div class="pr-badges">
+              <span class="badge badge-days">${pr.daysSinceActivity}d inactive</span>
+            </div>
+          </div>
+          <div class="pr-activity">
+            ${pr.daysSinceActivity === 0 ? 'Today' : pr.daysSinceActivity === 1 ? 'Yesterday' : pr.daysSinceActivity + 'd ago'}
+          </div>
+        </div>`)
+            .join('')}
+      </div>
+    </section>
+    `
+        : ''}
+
+    <footer class="footer">
+      <p>OSS Autopilot // Mission Control</p>
+      <p style="margin-top: 0.25rem;">Dashboard generated: ${digest.generatedAt ? new Date(digest.generatedAt).toISOString() : 'Unknown'}</p>
+    </footer>
+  </div>
+
+  <script>
+    // === Theme Toggle ===
+    (function() {
+      var html = document.documentElement;
+      var toggle = document.getElementById('themeToggle');
+      var sunIcon = document.getElementById('themeIconSun');
+      var moonIcon = document.getElementById('themeIconMoon');
+      var label = document.getElementById('themeLabel');
+
+      function getEffectiveTheme() {
+        try {
+          var stored = localStorage.getItem('oss-dashboard-theme');
+          if (stored === 'light' || stored === 'dark') return stored;
+        } catch (e) { /* localStorage unavailable (private browsing) */ }
+        return window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+      }
+
+      function applyTheme(theme) {
+        html.setAttribute('data-theme', theme);
+        if (theme === 'light') {
+          sunIcon.style.display = 'none';
+          moonIcon.style.display = 'block';
+          label.textContent = 'Dark';
+        } else {
+          sunIcon.style.display = 'block';
+          moonIcon.style.display = 'none';
+          label.textContent = 'Light';
+        }
+      }
+
+      applyTheme(getEffectiveTheme());
+
+      toggle.addEventListener('click', function() {
+        var current = html.getAttribute('data-theme');
+        var next = current === 'dark' ? 'light' : 'dark';
+        try { localStorage.setItem('oss-dashboard-theme', next); } catch (e) { /* private browsing */ }
+        applyTheme(next);
+      });
+    })();
+
+    // === Filtering & Search ===
+    (function() {
+      var searchInput = document.getElementById('searchInput');
+      var statusFilter = document.getElementById('statusFilter');
+      var repoFilter = document.getElementById('repoFilter');
+      var filterCount = document.getElementById('filterCount');
+
+      function applyFilters() {
+        var query = searchInput.value.toLowerCase().trim();
+        var status = statusFilter.value;
+        var repo = repoFilter.value;
+        var allItems = document.querySelectorAll('.health-item[data-status], .pr-item[data-status]');
+        var visible = 0;
+        var total = allItems.length;
+
+        allItems.forEach(function(item) {
+          var itemStatus = item.getAttribute('data-status') || '';
+          var itemRepo = item.getAttribute('data-repo') || '';
+          var itemTitle = item.getAttribute('data-title') || '';
+
+          var matchesStatus = (status === 'all') || (itemStatus === status);
+          var matchesRepo = (repo === 'all') || (itemRepo === repo);
+          var matchesSearch = !query || itemTitle.indexOf(query) !== -1;
+
+          if (matchesStatus && matchesRepo && matchesSearch) {
+            item.setAttribute('data-hidden', 'false');
+            visible++;
+          } else {
+            item.setAttribute('data-hidden', 'true');
+          }
+        });
+
+        // Show/hide parent sections if all children are hidden
+        var sections = document.querySelectorAll('.health-section, .pr-list-section');
+        sections.forEach(function(section) {
+          var items = section.querySelectorAll('.health-item[data-status], .pr-item[data-status]');
+          if (items.length === 0) return; // sections without filterable items (e.g. empty state)
+          var anyVisible = false;
+          items.forEach(function(item) {
+            if (item.getAttribute('data-hidden') !== 'true') anyVisible = true;
+          });
+          section.style.display = anyVisible ? '' : 'none';
+        });
+
+        var isFiltering = (status !== 'all' || repo !== 'all' || query.length > 0);
+        filterCount.textContent = isFiltering ? (visible + ' of ' + total + ' items') : '';
+      }
+
+      searchInput.addEventListener('input', applyFilters);
+      statusFilter.addEventListener('change', applyFilters);
+      repoFilter.addEventListener('change', applyFilters);
+    })();
+
+    // === Chart.js Configuration ===
+    Chart.defaults.color = '#6e7681';
+    Chart.defaults.borderColor = 'rgba(48, 54, 61, 0.4)';
+    Chart.defaults.font.family = "'Geist', sans-serif";
+    Chart.defaults.font.size = 11;
+
+    // === Status Doughnut ===
+    new Chart(document.getElementById('statusChart'), {
+      type: 'doughnut',
+      data: {
+        labels: ['Active', 'Shelved', 'Merged', 'Closed'],
+        datasets: [{
+          data: [${stats.activePRs}, ${stats.shelvedPRs}, ${stats.mergedPRs}, ${stats.closedPRs}],
+          backgroundColor: ['#3fb950', '#6e7681', '#a855f7', '#484f58'],
+          borderColor: 'rgba(8, 11, 16, 0.8)',
+          borderWidth: 2,
+          hoverOffset: 8
+        }]
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        cutout: '65%',
+        plugins: {
+          legend: {
+            position: 'bottom',
+            labels: { padding: 16, usePointStyle: true, pointStyle: 'circle', font: { size: 11 } }
+          }
+        }
+      }
+    });
+
+    // === Repository Breakdown (with "Other" bucket + percentage tooltips) ===
+    ${(() => {
+        // Filter helper: exclude repos matching excludeRepos/excludeOrgs or below minStars (#216)
+        const { excludeRepos: exRepos = [], excludeOrgs: exOrgs, minStars } = state.config;
+        const starThreshold = minStars ?? 50;
+        const shouldExcludeRepo = (repo) => {
+            const repoLower = repo.toLowerCase();
+            if (exRepos.some((r) => r.toLowerCase() === repoLower))
+                return true;
+            if (exOrgs?.some((o) => o.toLowerCase() === repoLower.split('/')[0]))
+                return true;
+            const score = (state.repoScores || {})[repo];
+            // Fail-open: repos without cached star data are shown (not excluded).
+            // Unlike issue-discovery (fail-closed), the dashboard shows the user's own
+            // contribution history — hiding repos just because a star fetch failed would be confusing.
+            if (score?.stargazersCount !== undefined && score.stargazersCount < starThreshold)
+                return true;
+            return false;
+        };
+        // Sort repos by total PRs (merged + active + closed) and build "Other" bucket
+        const allRepoEntries = Object.entries(
+        // Rebuild from full prsByRepo to get all repos, not just top 10
+        (() => {
+            const all = {};
+            for (const pr of digest.openPRs || []) {
+                if (shouldExcludeRepo(pr.repo))
+                    continue;
+                if (!all[pr.repo])
+                    all[pr.repo] = { active: 0, merged: 0, closed: 0 };
+                all[pr.repo].active++;
+            }
+            for (const [repo, score] of Object.entries(state.repoScores || {})) {
+                if (shouldExcludeRepo(repo))
+                    continue;
+                if (!all[repo])
+                    all[repo] = { active: 0, merged: 0, closed: 0 };
+                all[repo].merged = score.mergedPRCount;
+                all[repo].closed = score.closedWithoutMergeCount;
+            }
+            return all;
+        })()).sort((a, b) => {
+            const totalA = a[1].merged + a[1].active + a[1].closed;
+            const totalB = b[1].merged + b[1].active + b[1].closed;
+            return totalB - totalA;
+        });
+        const displayRepos = allRepoEntries.slice(0, 10);
+        const otherRepos = allRepoEntries.slice(10);
+        const grandTotal = allRepoEntries.reduce((sum, [, d]) => sum + d.merged + d.active + d.closed, 0);
+        if (otherRepos.length > 0) {
+            const otherData = otherRepos.reduce((acc, [, d]) => ({
+                active: acc.active + d.active,
+                merged: acc.merged + d.merged,
+                closed: acc.closed + d.closed,
+            }), { active: 0, merged: 0, closed: 0 });
+            displayRepos.push(['Other', otherData]);
+        }
+        const repoLabels = displayRepos.map(([repo]) => (repo === 'Other' ? 'Other' : repo.split('/')[1] || repo));
+        const mergedData = displayRepos.map(([, d]) => d.merged);
+        const activeData = displayRepos.map(([, d]) => d.active);
+        const closedData = displayRepos.map(([, d]) => d.closed);
+        return `
+    new Chart(document.getElementById('reposChart'), {
+      type: 'bar',
+      data: {
+        labels: ${JSON.stringify(repoLabels)},
+        datasets: [
+          { label: 'Merged', data: ${JSON.stringify(mergedData)}, backgroundColor: '#a855f7', borderRadius: 3 },
+          { label: 'Active', data: ${JSON.stringify(activeData)}, backgroundColor: '#3fb950', borderRadius: 3 },
+          { label: 'Closed', data: ${JSON.stringify(closedData)}, backgroundColor: '#484f58', borderRadius: 3 }
+        ]
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        scales: {
+          x: { stacked: true, grid: { display: false }, ticks: { font: { size: 10 } } },
+          y: { stacked: true, grid: { color: 'rgba(48, 54, 61, 0.3)' }, ticks: { stepSize: 1 } }
+        },
+        plugins: {
+          legend: { position: 'bottom', labels: { padding: 16, usePointStyle: true, pointStyle: 'circle', font: { size: 11 } } },
+          tooltip: {
+            callbacks: {
+              afterBody: function(context) {
+                const idx = context[0].dataIndex;
+                const total = ${JSON.stringify(mergedData)}[idx] + ${JSON.stringify(activeData)}[idx] + ${JSON.stringify(closedData)}[idx];
+                const pct = ${grandTotal} > 0 ? ((total / ${grandTotal}) * 100).toFixed(1) : '0.0';
+                return pct + '% of all PRs';
+              }
+            }
+          }
+        }
+      }
+    });`;
+    })()}
+
+    // === Contribution Timeline (grouped bar: Opened/Merged/Closed) ===
+    ${(() => {
+        // Generate a contiguous range of the last 6 months from today
+        // This avoids gaps when historical data spans years (e.g. 2019 and 2026)
+        const now = new Date();
+        const allMonths = [];
+        for (let offset = 5; offset >= 0; offset--) {
+            const d = new Date(now.getFullYear(), now.getMonth() - offset, 1);
+            allMonths.push(`${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`);
+        }
+        return `
+    const timelineMonths = ${JSON.stringify(allMonths)};
+    const openedData = ${JSON.stringify(monthlyOpened)};
+    const mergedData = ${JSON.stringify(monthlyMerged)};
+    const closedData = ${JSON.stringify(monthlyClosed)};
+    new Chart(document.getElementById('monthlyChart'), {
+      type: 'bar',
+      data: {
+        labels: timelineMonths,
+        datasets: [
+          {
+            label: 'Opened',
+            data: timelineMonths.map(m => openedData[m] || 0),
+            backgroundColor: '#58a6ff',
+            borderRadius: 3
+          },
+          {
+            label: 'Merged',
+            data: timelineMonths.map(m => mergedData[m] || 0),
+            backgroundColor: '#a855f7',
+            borderRadius: 3
+          },
+          {
+            label: 'Closed',
+            data: timelineMonths.map(m => closedData[m] || 0),
+            backgroundColor: '#484f58',
+            borderRadius: 3
+          }
+        ]
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        scales: {
+          x: { grid: { display: false } },
+          y: { grid: { color: 'rgba(48, 54, 61, 0.3)' }, beginAtZero: true, ticks: { stepSize: 1 } }
+        },
+        plugins: {
+          legend: { position: 'bottom', labels: { padding: 16, usePointStyle: true, pointStyle: 'circle', font: { size: 11 } } }
+        },
+        interaction: { intersect: false, mode: 'index' }
+      }
+    });`;
+    })()}
+
+  </script>
+</body>
+</html>`;
+}