@oss-autopilot/core 0.42.0 → 0.42.2

package/dist/commands/dashboard-templates.js

@@ -1,38 +1,16 @@
 /**
- * Dashboard HTML template generation.
- * Contains all HTML/CSS/JS template strings, escapeHtml(), and rendering helpers.
+ * Dashboard HTML template assembly.
+ * Imports styles, components, formatters, and scripts from focused sub-modules,
+ * then weaves them into the final HTML document.
+ *
  * 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)}%`,
-    };
-}
+import { escapeHtml } from './dashboard-formatters.js';
+import { DASHBOARD_CSS } from './dashboard-styles.js';
+import { SVG_ICONS, truncateTitle, renderHealthItems, titleMeta } from './dashboard-components.js';
+import { generateDashboardScripts } from './dashboard-scripts.js';
+// Re-export public API so existing consumers don't break
+export { escapeHtml, buildDashboardStats } from './dashboard-formatters.js';
 export function generateDashboardHtml(stats, monthlyMerged, monthlyClosed, monthlyOpened, digest, state, issueResponses = []) {
     const approachingDormantDays = state.config?.approachingDormantDays ?? 25;
     const shelvedPRs = digest.shelvedPRs || [];
@@ -57,56 +35,6 @@ export function generateDashboardHtml(stats, monthlyMerged, monthlyClosed, month
         ...(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>
@@ -117,766 +45,7 @@ export function generateDashboardHtml(stats, monthlyMerged, monthlyClosed, month
   <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>${DASHBOARD_CSS}
   </style>
 </head>
 <body>
@@ -1014,15 +183,15 @@ export function generateDashboardHtml(stats, monthlyMerged, monthlyClosed, month
         <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
+        ${renderHealthItems(digest.prsNeedingResponse || [], 'needs-response', SVG_ICONS.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)}
+        ${renderHealthItems(digest.needsChangesPRs || [], 'needs-changes', SVG_ICONS.edit, 'Needs Changes', titleMeta)}
+        ${renderHealthItems(digest.ciFailingPRs || [], 'ci-failing', SVG_ICONS.xCircle, 'CI Failing', titleMeta)}
+        ${renderHealthItems(digest.mergeConflictPRs || [], 'conflict', SVG_ICONS.conflict, 'Merge Conflict', titleMeta)}
+        ${renderHealthItems(digest.incompleteChecklistPRs || [], 'incomplete-checklist', SVG_ICONS.checklist, (pr) => `Incomplete Checklist${pr.checklistStats ? ` (${pr.checklistStats.checked}/${pr.checklistStats.total})` : ''}`, titleMeta)}
+        ${renderHealthItems(digest.missingRequiredFilesPRs || [], 'missing-files', SVG_ICONS.file, 'Missing Required Files', (pr) => (pr.missingRequiredFiles ? escapeHtml(pr.missingRequiredFiles.join(', ')) : truncateTitle(pr.title)))}
+        ${renderHealthItems(digest.needsRebasePRs || [], 'needs-rebase', SVG_ICONS.refresh, (pr) => `Needs Rebase${pr.commitsBehindUpstream ? ` (${pr.commitsBehindUpstream} behind)` : ''}`, titleMeta)}
       </div>
     </section>
     `
@@ -1040,10 +209,10 @@ export function generateDashboardHtml(stats, monthlyMerged, monthlyClosed, month
         <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)}
+        ${renderHealthItems(digest.changesAddressedPRs || [], 'changes-addressed', SVG_ICONS.checkCircle, 'Changes Addressed', (pr) => `Awaiting re-review${pr.lastMaintainerComment ? ` from @${escapeHtml(pr.lastMaintainerComment.author)}` : ''}`)}
+        ${renderHealthItems(digest.waitingOnMaintainerPRs || [], 'waiting-maintainer', SVG_ICONS.clock, 'Waiting on Maintainer', titleMeta)}
+        ${renderHealthItems(digest.ciBlockedPRs || [], 'ci-blocked', SVG_ICONS.lock, 'CI Blocked', titleMeta)}
+        ${renderHealthItems(digest.ciNotRunningPRs || [], 'ci-not-running', SVG_ICONS.infoCircle, 'CI Not Running', titleMeta)}
       </div>
     </section>
     `
@@ -1071,7 +240,7 @@ export function generateDashboardHtml(stats, monthlyMerged, monthlyClosed, month
     <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_ICONS.gitMerge}
         </svg>
         <h2>Recently Merged</h2>
         <span class="health-badge" style="background: var(--accent-merged-dim); color: var(--accent-merged);">${recentlyMerged.length} merged</span>
@@ -1082,7 +251,7 @@ export function generateDashboardHtml(stats, monthlyMerged, monthlyClosed, month
         <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_ICONS.gitMerge}
             </svg>
           </div>
           <div class="health-content">
@@ -1137,13 +306,13 @@ export function generateDashboardHtml(stats, monthlyMerged, monthlyClosed, month
     <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_ICONS.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)}
+        ${renderHealthItems(autoUnshelvedPRs, 'auto-unshelved', SVG_ICONS.bell, (pr) => 'Auto-Unshelved (' + pr.status.replace(/_/g, ' ') + ')', titleMeta)}
       </div>
     </section>
     `
@@ -1154,7 +323,7 @@ export function generateDashboardHtml(stats, monthlyMerged, monthlyClosed, month
     <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_ICONS.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>
@@ -1165,7 +334,7 @@ export function generateDashboardHtml(stats, monthlyMerged, monthlyClosed, month
         <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_ICONS.comment}
             </svg>
           </div>
           <div class="health-content">
@@ -1318,7 +487,7 @@ export function generateDashboardHtml(stats, monthlyMerged, monthlyClosed, month
         <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_ICONS.box}
             </svg>
           </div>
           <div class="pr-content">
@@ -1347,280 +516,7 @@ export function generateDashboardHtml(stats, monthlyMerged, monthlyClosed, month
   </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' }
-      }
-    });`;
-    })()}
-
+${generateDashboardScripts(stats, monthlyMerged, monthlyClosed, monthlyOpened, digest, state)}
   </script>
 </body>
 </html>`;