@opensip-tools/contracts 1.0.4

package/src/persistence/dashboard/checks.ts

@@ -0,0 +1,279 @@
+/**
+ * Checks catalog rendering — browsable catalog of checks with run stats.
+ * Reusable: renderChecksCatalog(container, catalogData) can be called from any panel.
+ * Returns JS code as a string.
+ */
+
+export function dashboardChecksJs(): string {
+  return `
+// =======================================================
+// CHECKS CATALOG
+// =======================================================
+
+function computeCheckStats() {
+  const stats = {};
+  for (const s of sessions) {
+    for (const ch of s.checks) {
+      if (!stats[ch.checkSlug]) stats[ch.checkSlug] = { runs: 0, passed: 0, failed: 0, lastRun: null };
+      const st = stats[ch.checkSlug];
+      st.runs++;
+      if (ch.passed) st.passed++; else st.failed++;
+      if (!st.lastRun || s.timestamp > st.lastRun) st.lastRun = s.timestamp;
+    }
+  }
+  return stats;
+}
+const checkStats = computeCheckStats();
+
+/** Render longDescription as DOM nodes with bold and code formatting. Safe — no innerHTML. */
+function renderLongDesc(text) {
+  const container = document.createElement('div');
+  container.className = 'check-long-desc';
+  if (!text) return container;
+  const parts = text.split(/(\\*\\*[^*]+\\*\\*|\\\`[^\\\`]+\\\`|\\n)/g);
+  parts.forEach(part => {
+    if (part === '\\n') {
+      container.appendChild(document.createElement('br'));
+    } else if (part.startsWith('**') && part.endsWith('**')) {
+      const strong = document.createElement('strong');
+      strong.textContent = part.slice(2, -2);
+      container.appendChild(strong);
+    } else if (part.startsWith('\\\`') && part.endsWith('\\\`')) {
+      const code = document.createElement('code');
+      code.textContent = part.slice(1, -1);
+      container.appendChild(code);
+    } else {
+      container.appendChild(document.createTextNode(part));
+    }
+  });
+  return container;
+}
+
+/**
+ * Render a check catalog table into any container element.
+ * @param panel - DOM element to render into
+ * @param catalogData - array of check catalog entries
+ */
+function renderChecksCatalog(panel, catalogData) {
+  if (!catalogData.length) {
+    panel.appendChild(el('div', {class:'empty', text:'No checks registered.'}));
+    return;
+  }
+
+  const allTags = new Set();
+  catalogData.forEach(c => (c.tags || []).forEach(t => allTags.add(t)));
+  const sortedTags = Array.from(allTags).sort();
+
+  // Filter bar
+  const filterBar = el('div', {class:'filter-bar'});
+  const searchInput = el('input', {class:'search-input', type:'text', placeholder:'Search checks...'});
+  const tagSelect = el('select', {class:'filter-select'});
+  tagSelect.appendChild(el('option', {value:'', text:'All tags'}));
+  sortedTags.forEach(t => tagSelect.appendChild(el('option', {value:t, text:t})));
+  const sourceSelect = el('select', {class:'filter-select'});
+  ['', 'built-in', 'community'].forEach(v => {
+    sourceSelect.appendChild(el('option', {value:v, text: v || 'All sources'}));
+  });
+  filterBar.appendChild(searchInput);
+  filterBar.appendChild(tagSelect);
+  filterBar.appendChild(sourceSelect);
+  panel.appendChild(filterBar);
+
+  // Stats summary
+  const totalChecks = catalogData.length;
+  const builtinCount = catalogData.filter(c => c.source === 'built-in').length;
+  const communityCount = catalogData.filter(c => c.source === 'community').length;
+  const statsRow = el('div', {style:'display:flex;gap:16px;margin-bottom:16px;font-size:13px;color:var(--text-muted)'});
+  statsRow.appendChild(el('span', {text: totalChecks + ' total checks'}));
+  statsRow.appendChild(el('span', {text: builtinCount + ' built-in', style:'color:var(--accent)'}));
+  if (communityCount > 0) statsRow.appendChild(el('span', {text: communityCount + ' community', style:'color:var(--accent-sim)'}));
+  panel.appendChild(statsRow);
+
+  // Table
+  const table = el('table', {class:'data-table sortable'});
+  const thead = el('thead');
+  const headerRow = el('tr');
+  ['', 'Check', 'Tags', 'Confidence', 'Source', 'Runs', 'Pass Rate', 'Last Run'].forEach(h => {
+    headerRow.appendChild(el('th', {text: h}));
+  });
+  thead.appendChild(headerRow);
+  table.appendChild(thead);
+
+  const tbody = el('tbody');
+  const sorted = [...catalogData].sort((a, b) => a.slug.localeCompare(b.slug));
+  const uid = 'cc-' + Math.random().toString(36).slice(2, 8);
+
+  sorted.forEach((check, i) => {
+    const st = checkStats[check.slug] || { runs: 0, passed: 0, failed: 0, lastRun: null };
+    const rate = st.runs > 0 ? Math.round((st.passed / st.runs) * 100) : -1;
+    const hasDesc = !!check.longDescription;
+    const expanderId = uid + '-exp-' + i;
+
+    const arrowCell = el('td', {style:'width:24px;text-align:center;color:var(--text-dim);font-size:12px'});
+    if (hasDesc) arrowCell.textContent = '\\u25B6';
+
+    const row = el('tr', {
+      class: hasDesc ? 'clickable' : '',
+      'data-slug': check.slug,
+      'data-tags': (check.tags || []).join(','),
+      'data-source': check.source,
+      'data-name': check.name.toLowerCase(),
+      onclick: hasDesc ? () => {
+        const exp = document.getElementById(expanderId);
+        if (exp) {
+          const isOpen = exp.classList.toggle('open');
+          exp.style.display = isOpen ? 'table-row' : 'none';
+          arrowCell.textContent = isOpen ? '\\u25BC' : '\\u25B6';
+        }
+        row.classList.toggle('expanded');
+      } : undefined
+    });
+    row.appendChild(arrowCell);
+
+    const nameCell = el('td', {style:'font-weight:500'});
+    nameCell.appendChild(document.createTextNode(check.slug));
+    row.appendChild(nameCell);
+
+    const tagsCell = el('td');
+    (check.tags || []).slice(0, 4).forEach(t => {
+      tagsCell.appendChild(el('span', {class:'tag-badge', text:t}));
+    });
+    if ((check.tags || []).length > 4) {
+      tagsCell.appendChild(el('span', {class:'tag-badge', text:'+' + ((check.tags || []).length - 4)}));
+    }
+    row.appendChild(tagsCell);
+
+    const confCell = el('td');
+    confCell.appendChild(el('span', {class:'badge badge-' + check.confidence, text: check.confidence}));
+    row.appendChild(confCell);
+
+    const sourceCell = el('td');
+    const sourceStyle = check.source === 'built-in' ? 'color:var(--accent)' : 'color:var(--accent-sim)';
+    sourceCell.appendChild(el('span', {text: check.source, style: sourceStyle + ';font-size:12px'}));
+    row.appendChild(sourceCell);
+
+    row.appendChild(el('td', {text: st.runs > 0 ? '' + st.runs : '\\u2014', style:'color:var(--text-dim)'}));
+
+    const rateCell = el('td');
+    if (rate >= 0) {
+      const rateColor = rate >= 90 ? 'var(--success)' : rate >= 70 ? 'var(--warning)' : 'var(--error)';
+      const bar = el('span', {class:'pass-rate-bar'});
+      const track = el('span', {class:'pass-rate-track'});
+      track.appendChild(el('span', {class:'pass-rate-fill', style:'width:' + rate + '%;background:' + rateColor}));
+      bar.appendChild(track);
+      bar.appendChild(el('span', {text: rate + '%', style:'font-size:12px;color:' + rateColor}));
+      rateCell.appendChild(bar);
+    } else {
+      rateCell.textContent = '\\u2014';
+      rateCell.style.color = 'var(--text-dim)';
+    }
+    row.appendChild(rateCell);
+
+    row.appendChild(el('td', {
+      text: st.lastRun ? new Date(st.lastRun).toLocaleDateString() : '\\u2014',
+      style:'color:var(--text-dim);font-size:12px'
+    }));
+
+    tbody.appendChild(row);
+
+    if (hasDesc) {
+      const expRow = el('tr', {id: expanderId, class:'expander-row', 'data-slug': check.slug, 'data-tags': (check.tags || []).join(','), 'data-source': check.source, 'data-name': check.name.toLowerCase()});
+      const expCell = el('td', {colspan:'8', style:'padding:0'});
+      const expContent = el('div', {class:'expander-content'});
+      expContent.appendChild(renderLongDesc(check.longDescription));
+      expCell.appendChild(expContent);
+      expRow.appendChild(expCell);
+      tbody.appendChild(expRow);
+    }
+  });
+
+  table.appendChild(tbody);
+  const pag = el('div', {class:'pagination'});
+  const card = el('div', {class:'card'}, [table, pag]);
+  panel.appendChild(card);
+
+  const emptyMsg = el('div', {class:'empty', style:'display:none', text:'No checks match your filters.'});
+  card.insertBefore(emptyMsg, pag);
+  paginateGroupedRows(tbody, pag, 10);
+
+  function applyFilters() {
+    const search = searchInput.value.toLowerCase();
+    const tag = tagSelect.value;
+    const source = sourceSelect.value;
+    const allRows = Array.from(tbody.children);
+    let visibleCount = 0;
+
+    // First pass: mark rows visible/hidden and collapse expanders
+    for (let i = 0; i < allRows.length; i++) {
+      const row = allRows[i];
+      if (row.classList.contains('expander-row')) continue;
+      const slug = row.getAttribute('data-slug') || '';
+      const name = row.getAttribute('data-name') || '';
+      const rowTags = row.getAttribute('data-tags') || '';
+      const rowSource = row.getAttribute('data-source') || '';
+      const matchSearch = !search || slug.includes(search) || name.includes(search);
+      const matchTag = !tag || rowTags.split(',').includes(tag);
+      const matchSource = !source || rowSource === source;
+      const visible = matchSearch && matchTag && matchSource;
+      row.style.display = visible ? '' : 'none';
+      row._filterVisible = visible;
+      if (visible) visibleCount++;
+      if (i + 1 < allRows.length && allRows[i + 1].classList.contains('expander-row')) {
+        allRows[i + 1].style.display = 'none';
+        allRows[i + 1].classList.remove('open');
+        if (row.classList.contains('expanded')) {
+          row.classList.remove('expanded');
+          const arrowTd = row.children[0];
+          if (arrowTd) arrowTd.textContent = '\\u25B6';
+        }
+      }
+    }
+    emptyMsg.style.display = visibleCount === 0 ? '' : 'none';
+
+    // Re-paginate only visible rows
+    const hasFilters = search || tag || source;
+    if (hasFilters) {
+      // Hide all first, then paginate only matching groups
+      const groups = [];
+      for (let i = 0; i < allRows.length; i++) {
+        const row = allRows[i];
+        if (row.classList.contains('expander-row')) continue;
+        if (!row._filterVisible) continue;
+        const group = [row];
+        if (i + 1 < allRows.length && allRows[i+1].classList.contains('expander-row')) {
+          group.push(allRows[i+1]);
+        }
+        groups.push(group);
+      }
+
+      // Custom pagination for filtered results
+      let currentPage = 0;
+      const pageSize = 10;
+      const totalPages = Math.max(1, Math.ceil(groups.length / pageSize));
+
+      function renderFilteredPage() {
+        // Hide all filtered rows first
+        groups.forEach(g => g.forEach(r => { r.style.display = 'none'; }));
+        const start = currentPage * pageSize;
+        const end = start + pageSize;
+        groups.slice(start, end).forEach(g => { g[0].style.display = ''; });
+
+        while (pag.firstChild) pag.removeChild(pag.firstChild);
+        if (groups.length <= pageSize) return;
+        pag.appendChild(el('div', {class:'pagination-info', text: 'Showing ' + (start+1) + '-' + Math.min(end, groups.length) + ' of ' + groups.length + ' checks'}));
+        const btns = el('div', {class:'pagination-btns'});
+        renderPageButtons(btns, currentPage, totalPages, (p) => { currentPage = p; renderFilteredPage(); });
+        pag.appendChild(btns);
+      }
+      renderFilteredPage();
+    } else {
+      paginateGroupedRows(tbody, pag, 10);
+    }
+  }
+
+  searchInput.addEventListener('input', applyFilters);
+  tagSelect.addEventListener('change', applyFilters);
+  sourceSelect.addEventListener('change', applyFilters);
+}
+`;
+}

package/src/persistence/dashboard/css.ts

@@ -0,0 +1,141 @@
+/**
+ * Dashboard CSS — all styles for the self-contained HTML dashboard.
+ * Returns the contents of the <style> block.
+ */
+
+export function dashboardCss(): string {
+  return String.raw`
+:root {
+  --bg: #1a1210; --bg-surface: #231a16; --bg-card: #231a16;
+  --bg-hover: #3a2e27; --text: #f4ede5; --text-secondary: #e6ddd2;
+  --text-muted: #c0b2a2; --text-dim: #958474; --accent: #c49a6c;
+  --accent-fitness: #7ca068; --accent-sim: #9b8aa5;
+  --success: #8fbc8f; --success-light: rgba(143,188,143,0.2);
+  --warning: #d4a574; --warning-light: rgba(212,165,116,0.2);
+  --error: #c75b4a; --error-light: rgba(199,91,74,0.2);
+  --border: #3a2e27; --border-light: #483a31;
+  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
+  --radius: 8px; --radius-sm: 4px;
+}
+* { margin: 0; padding: 0; box-sizing: border-box; }
+body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 14px; line-height: 1.6; padding: 24px; max-width: 1200px; margin: 0 auto; }
+h1 { font-family: var(--font-display); font-size: 22px; font-weight: 500; margin-bottom: 4px; }
+h1 .brand-open { color: var(--accent); }
+h3 { font-size: 14px; font-weight: 600; margin-bottom: 8px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
+.header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
+.header-icon { color: var(--accent); display: flex; align-items: center; }
+.header-brand { color: var(--accent); font-size: 13px; font-weight: 500; }
+
+/* Tabs */
+.tab-bar { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 24px; }
+.tab { padding: 10px 20px; cursor: pointer; color: var(--text-dim); font-size: 13px; font-weight: 500; border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s; display: flex; align-items: center; gap: 6px; }
+.tab svg { vertical-align: middle; }
+.tab:hover { color: var(--text-secondary); }
+.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
+.tab-panel { display: none; }
+.tab-panel.active { display: block; }
+
+/* Subtabs (within a tab panel) */
+.subtab-bar { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
+.subtab { padding: 8px 16px; cursor: pointer; color: var(--text-dim); font-size: 13px; font-weight: 500; border-bottom: 2px solid transparent; transition: color 0.15s; }
+.subtab:hover { color: var(--text-secondary); }
+.subtab.active { color: var(--text); border-bottom-color: var(--accent); }
+.subtab-panel { display: none; }
+.subtab-panel.active { display: block; }
+
+/* Cards and stats */
+.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 24px; }
+.stat-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
+.stat-label { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
+.stat-value { font-size: 28px; font-weight: 700; }
+.score-good { color: var(--success); } .score-warn { color: var(--warning); } .score-bad { color: var(--error); }
+.card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
+.section { margin-bottom: 32px; }
+.empty { color: var(--text-dim); font-style: italic; padding: 24px; text-align: center; }
+
+/* Trend chart */
+.trend-chart { display: flex; align-items: flex-end; gap: 4px; height: 80px; padding: 16px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 24px; }
+.trend-bar { flex: 1; border-radius: 2px 2px 0 0; min-width: 8px; max-width: 40px; position: relative; cursor: pointer; }
+.trend-bar:hover::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); background: var(--bg-hover); color: var(--text); padding: 4px 8px; border-radius: var(--radius-sm); font-size: 11px; white-space: nowrap; border: 1px solid var(--border); }
+
+/* Table */
+.data-table { width: 100%; border-collapse: collapse; }
+.data-table td, .data-table th { white-space: nowrap; }
+.data-table th { text-align: left; padding: 8px 12px; font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--border); font-weight: 600; cursor: pointer; }
+.data-table th:hover { color: var(--text-muted); }
+.data-table th[data-sort="asc"]::after { content: ' \25B2'; font-size: 10px; }
+.data-table th[data-sort="desc"]::after { content: ' \25BC'; font-size: 10px; }
+.data-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 13px; }
+.data-table tr:hover { background: var(--bg-hover); }
+.data-table tr.clickable { cursor: pointer; }
+.data-table tr.selected { background: var(--bg-hover); border-left: 2px solid var(--accent); }
+
+/* Check rows and findings */
+.check-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
+.check-row:last-child { border-bottom: none; }
+.check-icon { width: 20px; text-align: center; font-size: 14px; }
+.check-icon.pass { color: var(--success); } .check-icon.fail { color: var(--error); }
+.check-slug { font-weight: 500; flex: 1; }
+.check-duration { color: var(--text-dim); font-size: 12px; min-width: 60px; text-align: right; }
+.findings-toggle { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 12px; padding: 2px 8px; border-radius: var(--radius-sm); }
+.findings-toggle:hover { background: var(--bg-hover); }
+.findings-list { display: none; padding: 8px 0 8px 32px; }
+.findings-list.open { display: block; }
+.finding-item { padding: 4px 0; font-size: 13px; color: var(--text-muted); border-left: 2px solid var(--border); padding-left: 12px; margin-bottom: 4px; }
+.finding-file { color: var(--text-dim); font-size: 11px; }
+.finding-sev { font-size: 11px; padding: 1px 6px; border-radius: 3px; font-weight: 500; }
+.finding-sev.error { background: var(--error-light); color: var(--error); }
+.finding-sev.warning { background: var(--warning-light); color: var(--warning); }
+
+/* Expander rows */
+.expander-row { display: none; }
+.expander-row.open { display: table-row; }
+.expander-row td { white-space: normal; }
+.expander-content { padding: 8px 12px 16px 36px; background: var(--bg); border-left: 2px solid var(--accent); margin-left: 12px; }
+.data-table tr.expanded td:first-child { color: var(--accent); }
+.data-table tr.clickable:hover td:first-child { color: var(--accent); }
+
+.badge { font-size: 11px; padding: 2px 8px; border-radius: 3px; font-weight: 500; display: inline-block; }
+.badge-pass { background: var(--success-light); color: var(--success); }
+.badge-fail { background: var(--error-light); color: var(--error); }
+.badge-warn { background: var(--warning-light); color: var(--warning); }
+
+/* Pagination */
+.pagination { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; margin-top: 8px; }
+.pagination-info { font-size: 12px; color: var(--text-dim); }
+.pagination-btns { display: flex; gap: 4px; }
+.pagination-btn { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 12px; color: var(--text-muted); font-size: 12px; cursor: pointer; }
+.pagination-btn:hover { background: var(--bg-hover); color: var(--text); }
+.pagination-btn.disabled { opacity: 0.3; cursor: default; pointer-events: none; }
+.pagination-btn.active { background: var(--accent); color: var(--bg); border-color: var(--accent); }
+
+.footer { color: var(--text-dim); font-size: 12px; text-align: center; padding: 24px 0; border-top: 1px solid var(--border); margin-top: 32px; }
+.footer a { color: var(--accent); text-decoration: none; }
+
+/* Tag badges */
+.tag-badge { font-size: 10px; padding: 1px 6px; border-radius: 3px; background: var(--bg-hover); color: var(--text-muted); display: inline-block; margin-right: 3px; margin-bottom: 2px; white-space: nowrap; }
+
+/* Confidence badges */
+.badge-high { background: rgba(143,188,143,0.2); color: var(--success); }
+.badge-medium { background: rgba(212,165,116,0.2); color: var(--warning); }
+.badge-low { background: rgba(199,91,74,0.15); color: var(--text-dim); }
+
+/* Search & filter bar */
+.filter-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
+.search-input { background: var(--bg-surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 10px; font-size: 13px; font-family: var(--font); width: 240px; }
+.search-input::placeholder { color: var(--text-dim); }
+.search-input:focus { outline: none; border-color: var(--accent); }
+.filter-select { background: var(--bg-surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 8px; font-size: 12px; cursor: pointer; font-family: var(--font); }
+
+/* Check long description */
+.check-long-desc { padding: 12px 16px; color: var(--text-muted); font-size: 13px; line-height: 1.7; max-width: 800px; }
+.check-long-desc strong { color: var(--text); font-weight: 600; }
+.check-long-desc code { background: var(--bg-hover); padding: 1px 4px; border-radius: 2px; font-size: 12px; }
+
+/* Pass rate bar */
+.pass-rate-bar { display: inline-flex; align-items: center; gap: 6px; }
+.pass-rate-track { width: 48px; height: 6px; border-radius: 3px; background: var(--bg-hover); overflow: hidden; display: inline-block; vertical-align: middle; }
+.pass-rate-fill { height: 6px; border-radius: 3px; display: block; }
+`;
+}

package/src/persistence/dashboard/generator.ts

@@ -0,0 +1,89 @@
+/**
+ * Dashboard HTML generator — orchestrates all modules into a single self-contained HTML file.
+ *
+ * Composes CSS, shared JS, and tab-specific JS into one HTML string with all data inlined.
+ * Each tool tab (Fitness, Simulation) has subtabs: Overview, Catalog, Recipes.
+ */
+
+
+import { dashboardChecksJs } from './checks.js'
+import { dashboardCss } from './css.js'
+import { dashboardOverviewJs } from './overview.js'
+import { dashboardRecipesJs } from './recipes.js'
+import { dashboardSessionsJs } from './sessions.js'
+import { dashboardSharedJs } from './shared.js'
+import { dashboardToolTabsJs } from './tool-tabs.js'
+
+import type { StoredSession, CheckCatalogEntry, RecipeCatalogEntry } from '../store.js'
+
+// Escape all < and > to prevent script injection in HTML <script> context
+function escapeForScriptContext(json: string): string {
+  return json.replaceAll('<', String.raw`\u003c`).replaceAll('>', String.raw`\u003e`)
+}
+
+export function generateDashboardHtml(
+  sessions: StoredSession[],
+  checkCatalog: CheckCatalogEntry[] = [],
+  recipeCatalog: RecipeCatalogEntry[] = [],
+): string {
+  const latest = sessions[0]
+  const safeDataJson = escapeForScriptContext(JSON.stringify(sessions))
+  const safeCatalogJson = escapeForScriptContext(JSON.stringify(checkCatalog))
+  const safeRecipeJson = escapeForScriptContext(JSON.stringify(recipeCatalog))
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>OpenSIP Tools${latest ? ` — Pass Rate: ${latest.score}%` : ''}</title>
+<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 8h12a4 4 0 0 1 0 8h-1M4 8v8a4 4 0 0 0 4 4h4a4 4 0 0 0 4-4V8M4 8H2M6 4c0 1 .5 2 1 2.5M10 3c0 1.5.5 2.5 1 3M14 4c0 1 .5 2 1 2.5' stroke='%23c4956a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&display=swap" rel="stylesheet">
+<style>
+${dashboardCss()}
+</style>
+</head>
+<body>
+
+<div class="header">
+  <span class="header-icon"><svg width="28" height="28" viewBox="0 0 24 24" fill="none"><path d="M4 8h12a4 4 0 0 1 0 8h-1M4 8v8a4 4 0 0 0 4 4h4a4 4 0 0 0 4-4V8M4 8H2M6 4c0 1 .5 2 1 2.5M10 3c0 1.5.5 2.5 1 3M14 4c0 1 .5 2 1 2.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
+  <div><h1><span class="brand-open">Open</span>SIP Tools</h1></div>
+</div>
+
+<div class="tab-bar" id="tab-bar">
+  <div class="tab active" data-tab="overview"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/></svg> Overview</div>
+  <div class="tab" data-tab="fitness"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.596 12.768a2 2 0 1 0 2.829-2.829l-1.768-1.767a2 2 0 0 0 2.828-2.829l-2.828-2.828a2 2 0 0 0-2.829 2.828l-1.767-1.768a2 2 0 1 0-2.829 2.829z"/><path d="m2.5 21.5 1.4-1.4"/><path d="m20.1 3.9 1.4-1.4"/><path d="M5.343 21.485a2 2 0 1 0 2.829-2.828l1.767 1.768a2 2 0 1 0 2.829-2.829l-6.364-6.364a2 2 0 1 0-2.829 2.829l1.768 1.767a2 2 0 0 0-2.828 2.829z"/><path d="m9.6 14.4 4.8-4.8"/></svg> Fitness</div>
+  <div class="tab" data-tab="simulation"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2v6a2 2 0 0 0 .245.96l5.51 10.08A2 2 0 0 1 18 22H6a2 2 0 0 1-1.755-2.96l5.51-10.08A2 2 0 0 0 10 8V2"/><path d="M6.453 15h11.094"/><path d="M8.5 2h7"/></svg> Simulation</div>
+</div>
+
+<div id="panel-overview" class="tab-panel active"></div>
+<div id="panel-fitness" class="tab-panel"></div>
+<div id="panel-simulation" class="tab-panel"></div>
+
+<div class="footer">Generated by <strong>opensip-tools</strong> &mdash; <a href="https://opensip.ai">opensip.ai</a></div>
+
+<script>
+const sessions = ${safeDataJson};
+const checkCatalog = ${safeCatalogJson};
+const recipeCatalog = ${safeRecipeJson};
+const fitSessions = sessions.filter(s => s.tool === 'fit');
+const simSessions = sessions.filter(s => s.tool === 'sim');
+
+${dashboardSharedJs()}
+${dashboardOverviewJs()}
+${dashboardSessionsJs()}
+${dashboardChecksJs()}
+${dashboardRecipesJs()}
+${dashboardToolTabsJs()}
+
+// =======================================================
+// RENDER TABS
+// =======================================================
+renderOverview();
+renderFitnessTab();
+renderSimulationTab();
+</script>
+</body>
+</html>`
+}

package/src/persistence/dashboard/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Dashboard module barrel — re-exports the generator function.
+ */
+
+export { generateDashboardHtml } from './generator.js'

package/src/persistence/dashboard/overview.ts

@@ -0,0 +1,65 @@
+/**
+ * Overview tab — cross-tool recent activity table.
+ * Returns JS code as a string.
+ */
+
+export function dashboardOverviewJs(): string {
+  return `
+// =======================================================
+// OVERVIEW TAB
+// =======================================================
+function renderOverview() {
+  const panel = document.getElementById('panel-overview');
+  if (!sessions.length) { panel.appendChild(el('div', {class:'empty', text:'No sessions yet. Run opensip-tools fit to generate data.'})); return; }
+
+  const sec = el('div', {class:'section'}, [el('h3', {text:'Recent Activity'})]);
+  const table = el('table', {class:'data-table sortable'});
+  const thead = el('thead');
+  const headerRow = el('tr');
+  ['Timestamp', 'Tool', 'Recipe', 'Pass Rate', 'Status', 'Checks', 'Findings', 'Duration'].forEach(h => {
+    headerRow.appendChild(el('th', {text: h}));
+  });
+  thead.appendChild(headerRow);
+  table.appendChild(thead);
+
+  const tbody = el('tbody');
+  const toolBadgeStyles = {
+    fit: 'background:rgba(124,160,104,0.15);color:var(--accent-fitness)',
+    sim: 'background:rgba(155,138,165,0.15);color:var(--accent-sim)',
+  };
+  const tabMap = { fit: 'fitness', sim: 'simulation' };
+
+  sessions.forEach(s => {
+    const sc2 = s.score >= 90 ? 'color:var(--success)' : s.score >= 70 ? 'color:var(--warning)' : 'color:var(--error)';
+    const row = el('tr', {class:'clickable', onclick: () => {
+      // Navigate to the tool's tab
+      const tabName = tabMap[s.tool] || s.tool;
+      document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+      document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
+      const tab = document.querySelector('.tab[data-tab="' + tabName + '"]');
+      if (tab) tab.classList.add('active');
+      const panel = document.getElementById('panel-' + tabName);
+      if (panel) panel.classList.add('active');
+    }});
+    row.appendChild(el('td', {text: new Date(s.timestamp).toLocaleString(), style:'color:var(--text-dim)'}));
+    const toolCell = el('td');
+    toolCell.appendChild(el('span', {class:'badge', style: toolBadgeStyles[s.tool] || '', text: s.tool.toUpperCase()}));
+    row.appendChild(toolCell);
+    row.appendChild(el('td', {text: s.recipe || 'default', style:'color:var(--text-muted)'}));
+    row.appendChild(el('td', {text: s.score+'%', style:'font-weight:600;'+sc2}));
+    const statusCell = el('td');
+    statusCell.appendChild(statusBadge(sessionStatus(s)));
+    row.appendChild(statusCell);
+    row.appendChild(el('td', {text: s.summary.passed+'/'+s.summary.total}));
+    row.appendChild(el('td', {text: ''+(s.summary.errors + (s.summary.warnings || 0))}));
+    row.appendChild(el('td', {text: (s.durationMs/1000).toFixed(1)+'s', style:'color:var(--text-dim)'}));
+    tbody.appendChild(row);
+  });
+  table.appendChild(tbody);
+  const pag = el('div', {class:'pagination'});
+  sec.appendChild(el('div', {class:'card'}, [table, pag]));
+  panel.appendChild(sec);
+  paginateTable(tbody, pag, 10);
+}
+`;
+}

package/src/persistence/dashboard/recipes.ts

@@ -0,0 +1,68 @@
+/**
+ * Recipes catalog rendering — shows available recipes with their configuration.
+ * Returns JS code as a string.
+ */
+
+export function dashboardRecipesJs(): string {
+  return `
+// =======================================================
+// RECIPES CATALOG
+// =======================================================
+
+function renderRecipesPanel(container, recipesData) {
+  if (!recipesData || !recipesData.length) {
+    container.appendChild(el('div', {class:'empty', text:'No recipes available.'}));
+    return;
+  }
+
+  const table = el('table', {class:'data-table'});
+  const thead = el('thead');
+  const headerRow = el('tr');
+  ['Recipe', 'Description', 'Selector', 'Mode', 'Timeout', 'Tags'].forEach(h => {
+    headerRow.appendChild(el('th', {text: h}));
+  });
+  thead.appendChild(headerRow);
+  table.appendChild(thead);
+
+  const tbody = el('tbody');
+  recipesData.forEach(recipe => {
+    const row = el('tr');
+
+    // Name
+    const nameCell = el('td', {style:'font-weight:500'});
+    nameCell.appendChild(el('div', {text: recipe.displayName}));
+    nameCell.appendChild(el('div', {text: recipe.name, style:'font-size:11px;color:var(--text-dim);font-weight:400'}));
+    row.appendChild(nameCell);
+
+    // Description
+    row.appendChild(el('td', {text: recipe.description, style:'color:var(--text-muted)'}));
+
+    // Selector type
+    const selCell = el('td');
+    selCell.appendChild(el('span', {class:'badge', style:'background:var(--bg-hover);color:var(--text-muted)', text: recipe.selectorType}));
+    row.appendChild(selCell);
+
+    // Mode
+    const modeCell = el('td');
+    const modeColor = recipe.mode === 'parallel' ? 'color:var(--success)' : 'color:var(--warning)';
+    modeCell.appendChild(el('span', {text: recipe.mode, style: modeColor + ';font-size:12px'}));
+    row.appendChild(modeCell);
+
+    // Timeout
+    row.appendChild(el('td', {text: (recipe.timeout / 1000) + 's', style:'color:var(--text-dim);font-size:12px'}));
+
+    // Tags
+    const tagsCell = el('td');
+    (recipe.tags || []).forEach(t => {
+      tagsCell.appendChild(el('span', {class:'tag-badge', text: t}));
+    });
+    row.appendChild(tagsCell);
+
+    tbody.appendChild(row);
+  });
+
+  table.appendChild(tbody);
+  container.appendChild(el('div', {class:'card'}, [table]));
+}
+`;
+}