@opensip-tools/contracts 1.0.4

package/src/persistence/dashboard/sessions.ts

@@ -0,0 +1,205 @@
+/**
+ * Session table + session detail rendering — used by fitness/sim tabs.
+ * Returns JS code as a string.
+ */
+
+export function dashboardSessionsJs(): string {
+  return String.raw`
+// =======================================================
+// SESSION TABLE (used by fitness/sim tabs)
+// =======================================================
+
+/** Derive 3-state session status: 'fail' | 'warn' | 'pass' */
+function sessionStatus(s) {
+  if (s.summary.failed > 0) return 'fail';
+  if (s.summary.warnings > 0) return 'warn';
+  return 'pass';
+}
+
+function statusBadge(status) {
+  const labels = { fail: 'FAIL', warn: 'WARN', pass: 'PASS' };
+  const classes = { fail: 'badge-fail', warn: 'badge-warn', pass: 'badge-pass' };
+  return el('span', {class:'badge ' + classes[status], text: labels[status]});
+}
+
+function renderSessionTable(panel, toolSessions, accentColor) {
+  if (!toolSessions.length) {
+    panel.appendChild(el('div', {class:'empty', text:'No sessions yet.'}));
+    return;
+  }
+
+  const tool = toolSessions[0].tool;
+
+  const table = el('table', {class:'data-table sortable'});
+  const thead = el('thead');
+  const headerRow = el('tr');
+  ['Timestamp', 'Recipe', 'Pass Rate', 'Status', 'Passed', 'Failed', 'Findings', 'Duration'].forEach(h => {
+    headerRow.appendChild(el('th', {text: h}));
+  });
+  thead.appendChild(headerRow);
+  table.appendChild(thead);
+
+  const tbody = el('tbody');
+  toolSessions.forEach((s, idx) => {
+    const sc = s.score >= 90 ? 'color:var(--success)' : s.score >= 70 ? 'color:var(--warning)' : 'color:var(--error)';
+    const row = el('tr', {class:'clickable', id: 'session-row-' + tool + '-' + idx, onclick: () => {
+      tbody.querySelectorAll('tr.selected').forEach(r => r.classList.remove('selected'));
+      row.classList.add('selected');
+      renderDetail(s, idx);
+    }});
+    row.appendChild(el('td', {text: new Date(s.timestamp).toLocaleString()}));
+    row.appendChild(el('td', {text: s.recipe || 'default', style:'color:var(--text-muted)'}));
+    const scoreCell = el('td', {style: 'font-weight:600;' + sc});
+    scoreCell.textContent = s.score + '%';
+    row.appendChild(scoreCell);
+    const badgeCell = el('td');
+    badgeCell.appendChild(statusBadge(sessionStatus(s)));
+    row.appendChild(badgeCell);
+    row.appendChild(el('td', {text: ''+s.summary.passed, style:'color:var(--success)'}));
+    row.appendChild(el('td', {text: ''+s.summary.failed, style: s.summary.failed > 0 ? 'color:var(--error)' : 'color:var(--text-dim)'}));
+    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 sessionPag = el('div', {class:'pagination'});
+  const sec = el('div', {class:'section'}, [el('h3', {text:'Sessions (' + toolSessions.length + ')'}), el('div', {class:'card'}, [table, sessionPag])]);
+  panel.appendChild(sec);
+  paginateTable(tbody, sessionPag, 10);
+
+  // Detail container — kept as a direct reference, no global ID lookup needed
+  const detailContainer = el('div', {id: 'detail-' + tool + '-' + Math.random().toString(36).slice(2,8), class:'section', style:'display:none'});
+  panel.appendChild(detailContainer);
+
+  function renderDetail(session, idx) {
+    detailContainer.style.display = 'block';
+    while (detailContainer.firstChild) detailContainer.removeChild(detailContainer.firstChild);
+
+    // Compute session-level totals from check findings
+    let totalErrors = 0;
+    let totalWarnings = 0;
+    session.checks.forEach(c => {
+      if (c.findings) {
+        c.findings.forEach(f => {
+          if (f.severity === 'error') totalErrors++;
+          else if (f.severity === 'warning') totalWarnings++;
+        });
+      }
+    });
+
+    const headerRow = el('div', {style:'display:flex;align-items:center;justify-content:space-between;margin-bottom:16px'});
+    const headerLeft = el('div');
+    headerLeft.appendChild(el('h3', {text: 'Session Detail \u2014 ' + new Date(session.timestamp).toLocaleString(), style:'margin-bottom:4px'}));
+    const sub = el('div', {style:'color:var(--text-dim);font-size:12px'});
+    const countParts = [];
+    if (totalErrors > 0) countParts.push(totalErrors + ' error' + (totalErrors !== 1 ? 's' : ''));
+    if (totalWarnings > 0) countParts.push(totalWarnings + ' warning' + (totalWarnings !== 1 ? 's' : ''));
+    const countsStr = countParts.length > 0 ? ' \u2014 ' + countParts.join(', ') : '';
+    sub.textContent = session.cwd + (session.recipe ? ' \u2014 recipe: ' + session.recipe : '') + countsStr;
+    headerLeft.appendChild(sub);
+    headerRow.appendChild(headerLeft);
+
+    detailContainer.appendChild(headerRow);
+    const filterUid = 'df-' + tool + '-' + idx + '-' + Math.random().toString(36).slice(2,6);
+
+    // Check detail table
+    const table = el('table', {class:'data-table sortable'});
+    const thead = el('thead');
+    const thRow = el('tr');
+    ['', 'Check', 'Status', 'Errors', 'Warnings', 'Findings', 'Duration'].forEach(h => {
+      thRow.appendChild(el('th', {text: h}));
+    });
+    thead.appendChild(thRow);
+    table.appendChild(thead);
+
+    const tbody = el('tbody');
+    const sortedChecks = [...session.checks].sort((a, b) => {
+      const aErrors = a.findings ? a.findings.filter(f => f.severity === 'error').length : 0;
+      const bErrors = b.findings ? b.findings.filter(f => f.severity === 'error').length : 0;
+      return bErrors - aErrors;
+    });
+    sortedChecks.forEach((check, i) => {
+      const checkErrors = check.findings ? check.findings.filter(f => f.severity === 'error').length : 0;
+      const checkWarnings = check.findings ? check.findings.filter(f => f.severity === 'warning').length : 0;
+      const findingsTotal = checkErrors + checkWarnings;
+      const hasFindings = findingsTotal > 0;
+      const expanderId = filterUid + '-exp-' + i;
+      const checkStatusVal = check.passed ? 'pass' : 'fail';
+
+      const arrowCell = el('td', {style:'width:24px;text-align:center;color:var(--text-dim);font-size:12px'});
+      if (hasFindings) arrowCell.textContent = '\u25B6';
+
+      const row = el('tr', {class: hasFindings ? 'clickable' : '', 'data-check-status': checkStatusVal, onclick: hasFindings ? () => {
+        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);
+      row.appendChild(el('td', {text: check.checkSlug, style:'font-weight:500'}));
+
+      const statusCell = el('td');
+      statusCell.appendChild(el('span', {class:'badge ' + (check.passed ? 'badge-pass' : 'badge-fail'), text: check.passed ? 'PASS' : 'FAIL'}));
+      row.appendChild(statusCell);
+      row.appendChild(el('td', {text: ''+checkErrors, style: checkErrors > 0 ? 'color:var(--error)' : 'color:var(--text-dim)'}));
+      row.appendChild(el('td', {text: ''+checkWarnings, style: checkWarnings > 0 ? 'color:var(--warning)' : 'color:var(--text-dim)'}));
+      row.appendChild(el('td', {text: ''+findingsTotal, style: findingsTotal > 0 ? 'color:var(--text)' : 'color:var(--text-dim)'}));
+      row.appendChild(el('td', {text: check.durationMs > 0 ? check.durationMs + 'ms' : '0ms', style:'color:var(--text-dim)'}));
+      tbody.appendChild(row);
+
+      if (hasFindings) {
+        const expRow = el('tr', {id: expanderId, class:'expander-row', 'data-check-status': checkStatusVal});
+        const expCell = el('td', {colspan:'7', style:'padding:0'});
+        const expContent = el('div', {class:'expander-content'});
+
+        const fTable = el('table', {class:'data-table', style:'margin:0;border:none'});
+        const fHead = el('thead');
+        const fHeaderRow = el('tr');
+        ['Severity', 'Message', 'File', 'Suggestion'].forEach(h => {
+          fHeaderRow.appendChild(el('th', {text: h, style:'font-size:11px;padding:6px 12px'}));
+        });
+        fHead.appendChild(fHeaderRow);
+        fTable.appendChild(fHead);
+
+        const fBody = el('tbody');
+        check.findings.forEach(f => {
+          const fRow = el('tr');
+          const sevCell = el('td', {style:'padding:6px 12px'});
+          sevCell.appendChild(el('span', {class:'finding-sev ' + f.severity, text: f.severity}));
+          fRow.appendChild(sevCell);
+          fRow.appendChild(el('td', {text: f.message, style:'padding:6px 12px;font-size:13px'}));
+          fRow.appendChild(el('td', {text: f.filePath ? f.filePath + (f.line ? ':' + f.line : '') : '\u2014', style:'padding:6px 12px;color:var(--text-dim);font-size:12px'}));
+          fRow.appendChild(el('td', {text: f.suggestion || '\u2014', style:'padding:6px 12px;color:var(--accent);font-size:12px'}));
+          fBody.appendChild(fRow);
+        });
+        fTable.appendChild(fBody);
+        expContent.appendChild(fTable);
+        expCell.appendChild(expContent);
+        expRow.appendChild(expCell);
+        tbody.appendChild(expRow);
+      }
+    });
+    table.appendChild(tbody);
+    const detailPag = el('div', {class:'pagination'});
+    detailContainer.appendChild(el('div', {class:'card'}, [table, detailPag]));
+
+    // Enable sorting on the detail table
+    makeSortable(table);
+
+    // Paginate
+    paginateGroupedRows(tbody, detailPag, 10);
+  }
+
+  // Auto-show latest and highlight first row
+  renderDetail(toolSessions[0], 0);
+  const firstRow = tbody.querySelector('tr');
+  if (firstRow) firstRow.classList.add('selected');
+}
+
+
+`;
+}

package/src/persistence/dashboard/shared.ts

@@ -0,0 +1,211 @@
+/**
+ * Shared dashboard JS — el() helper, pagination, tab switching.
+ * Returns JS code as a string to be inlined in the <script> block.
+ */
+
+export function dashboardSharedJs(): string {
+  return String.raw`
+// Tab switching
+document.getElementById('tab-bar').addEventListener('click', e => {
+  const tab = e.target.closest('.tab');
+  if (!tab) return;
+  document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+  document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
+  tab.classList.add('active');
+  document.getElementById('panel-' + tab.dataset.tab).classList.add('active');
+});
+
+function el(tag, attrs, children) {
+  const e = document.createElement(tag);
+  if (attrs) Object.entries(attrs).forEach(([k,v]) => {
+    if (k === 'text') e.textContent = v;
+    else if (k === 'class') e.className = v;
+    else if (k.startsWith('on')) e.addEventListener(k.slice(2), v);
+    else e.setAttribute(k, v);
+  });
+  if (children) children.forEach(c => { if (typeof c === 'string') e.appendChild(document.createTextNode(c)); else if (c) e.appendChild(c); });
+  return e;
+}
+
+// =======================================================
+// PAGINATION HELPERS
+// =======================================================
+
+function renderPageButtons(container, currentPage, totalPages, goToPage) {
+  container.appendChild(el('button', {class:'pagination-btn' + (currentPage === 0 ? ' disabled' : ''), text:'\u2190 Prev', onclick: () => { if (currentPage > 0) goToPage(currentPage - 1); }}));
+
+  const pages = [];
+  for (let p = 0; p < totalPages; p++) {
+    if (p < 2 || p >= totalPages - 2 || Math.abs(p - currentPage) <= 1) {
+      pages.push(p);
+    } else if (pages.length > 0 && pages[pages.length - 1] !== -1) {
+      pages.push(-1);
+    }
+  }
+
+  pages.forEach(p => {
+    if (p === -1) {
+      container.appendChild(el('span', {style:'color:var(--text-dim);padding:4px 4px;font-size:12px', text:'\u2026'}));
+    } else {
+      container.appendChild(el('button', {class:'pagination-btn' + (p === currentPage ? ' active' : ''), text: ''+(p+1), onclick: () => goToPage(p)}));
+    }
+  });
+
+  container.appendChild(el('button', {class:'pagination-btn' + (currentPage >= totalPages-1 ? ' disabled' : ''), text:'Next \u2192', onclick: () => { if (currentPage < totalPages-1) goToPage(currentPage + 1); }}));
+}
+
+function paginateTable(tbody, paginationContainer, pageSize) {
+  const rows = Array.from(tbody.children);
+  let currentPage = 0;
+  const totalPages = Math.max(1, Math.ceil(rows.length / pageSize));
+
+  function renderPage() {
+    const start = currentPage * pageSize;
+    const end = start + pageSize;
+    rows.forEach((row, i) => { row.style.display = (i >= start && i < end) ? '' : 'none'; });
+
+    while (paginationContainer.firstChild) paginationContainer.removeChild(paginationContainer.firstChild);
+    if (rows.length <= pageSize) return;
+
+    const info = el('div', {class:'pagination-info', text: 'Showing ' + (start+1) + '-' + Math.min(end, rows.length) + ' of ' + rows.length});
+    paginationContainer.appendChild(info);
+
+    const btns = el('div', {class:'pagination-btns'});
+    renderPageButtons(btns, currentPage, totalPages, (p) => { currentPage = p; renderPage(); });
+    paginationContainer.appendChild(btns);
+  }
+
+  renderPage();
+}
+
+function paginateGroupedRows(tbody, paginationContainer, pageSize) {
+  const allRows = Array.from(tbody.children);
+  const groups = [];
+  for (let i = 0; i < allRows.length; i++) {
+    const row = allRows[i];
+    if (row.classList.contains('expander-row')) continue;
+    const group = [row];
+    if (i + 1 < allRows.length && allRows[i+1].classList.contains('expander-row')) {
+      group.push(allRows[i+1]);
+    }
+    groups.push(group);
+  }
+
+  let currentPage = 0;
+  const totalPages = Math.max(1, Math.ceil(groups.length / pageSize));
+
+  function renderPage() {
+    const start = currentPage * pageSize;
+    const end = start + pageSize;
+    groups.forEach((group, i) => {
+      const visible = i >= start && i < end;
+      group.forEach(row => {
+        if (row.classList.contains('expander-row')) {
+          row.dataset.paged = visible ? 'yes' : 'no';
+          if (!visible) row.style.display = 'none';
+        } else {
+          row.style.display = visible ? '' : 'none';
+        }
+      });
+    });
+
+    while (paginationContainer.firstChild) paginationContainer.removeChild(paginationContainer.firstChild);
+    if (groups.length <= pageSize) return;
+
+    const info = el('div', {class:'pagination-info', text: 'Showing ' + (start+1) + '-' + Math.min(end, groups.length) + ' of ' + groups.length + ' checks'});
+    paginationContainer.appendChild(info);
+
+    const btns = el('div', {class:'pagination-btns'});
+    renderPageButtons(btns, currentPage, totalPages, (p) => { currentPage = p; renderPage(); });
+    paginationContainer.appendChild(btns);
+  }
+
+  renderPage();
+}
+
+// =======================================================
+// SORTABLE TABLE COLUMNS
+// =======================================================
+
+function makeSortable(table) {
+  const thead = table.querySelector('thead');
+  const tbody = table.querySelector('tbody');
+  if (!thead || !tbody) return;
+
+  const headers = Array.from(thead.querySelectorAll('th'));
+  let sortCol = -1;
+  let sortAsc = true;
+
+  headers.forEach((th, colIdx) => {
+    if (!th.textContent.trim()) return; // skip empty headers (arrow column)
+    th.style.cursor = 'pointer';
+    th.style.userSelect = 'none';
+    th.addEventListener('click', () => {
+      if (sortCol === colIdx) {
+        sortAsc = !sortAsc;
+      } else {
+        sortCol = colIdx;
+        sortAsc = true;
+      }
+
+      // Update sort indicators
+      headers.forEach(h => { h.dataset.sort = ''; });
+      th.dataset.sort = sortAsc ? 'asc' : 'desc';
+
+      // Collect data rows with their expander rows
+      const allRows = Array.from(tbody.children);
+      const groups = [];
+      for (let i = 0; i < allRows.length; i++) {
+        const row = allRows[i];
+        if (row.classList.contains('expander-row')) continue;
+        const group = [row];
+        if (i + 1 < allRows.length && allRows[i+1].classList.contains('expander-row')) {
+          group.push(allRows[i+1]);
+        }
+        groups.push(group);
+      }
+
+      groups.sort((a, b) => {
+        const aText = (a[0].children[colIdx]?.textContent || '').trim();
+        const bText = (b[0].children[colIdx]?.textContent || '').trim();
+        // Try numeric comparison
+        const aNum = parseFloat(aText);
+        const bNum = parseFloat(bText);
+        if (!isNaN(aNum) && !isNaN(bNum)) {
+          return sortAsc ? aNum - bNum : bNum - aNum;
+        }
+        // Date detection (contains / or -)
+        const aDate = Date.parse(aText);
+        const bDate = Date.parse(bText);
+        if (!isNaN(aDate) && !isNaN(bDate)) {
+          return sortAsc ? aDate - bDate : bDate - aDate;
+        }
+        // String comparison
+        return sortAsc ? aText.localeCompare(bText) : bText.localeCompare(aText);
+      });
+
+      // Reorder DOM — append each group (data row + optional expander)
+      groups.forEach(group => {
+        group.forEach(row => tbody.appendChild(row));
+      });
+
+      // Re-paginate if a pagination container exists after the table
+      const pagContainer = table.parentElement?.querySelector('.pagination');
+      if (pagContainer) {
+        const hasExpanders = groups.some(g => g.length > 1);
+        if (hasExpanders) {
+          paginateGroupedRows(tbody, pagContainer, 10);
+        } else {
+          paginateTable(tbody, pagContainer, 10);
+        }
+      }
+    });
+  });
+}
+
+// After all rendering: init sorting
+setTimeout(() => {
+  document.querySelectorAll('.data-table.sortable').forEach(t => makeSortable(t));
+}, 0);
+`;
+}

package/src/persistence/dashboard/tool-tabs.ts

@@ -0,0 +1,102 @@
+/**
+ * Tool tab rendering — creates subtabs (Overview / Catalog / Recipes) under each tool tab.
+ * Returns JS code as a string.
+ */
+
+export function dashboardToolTabsJs(): string {
+  return `
+// =======================================================
+// TOOL SUBTAB RENDERING
+// =======================================================
+
+/**
+ * Render a tool tab with subtabs: Overview | Catalog | Recipes
+ * @param panelId - e.g., 'panel-fitness'
+ * @param toolSessions - filtered sessions for this tool
+ * @param accentColor - CSS var for accent
+ * @param catalogLabel - e.g., 'Checks', 'Scenarios', 'Assessments'
+ * @param catalogData - check/scenario/assessment catalog entries (or empty)
+ * @param renderCatalogFn - function(container, data) to render the catalog
+ */
+function renderToolTab(panelId, toolSessions, accentColor, catalogLabel, catalogData, renderCatalogFn) {
+  const panel = document.getElementById(panelId);
+
+  // Subtab bar
+  const subtabBar = el('div', {class:'subtab-bar'});
+  const tabs = [
+    { id: 'overview', label: 'Overview' },
+    { id: 'catalog', label: catalogLabel },
+    { id: 'recipes', label: 'Recipes' },
+  ];
+
+  const panels = {};
+  tabs.forEach((t, i) => {
+    const subtab = el('div', {
+      class: 'subtab' + (i === 0 ? ' active' : ''),
+      'data-subtab': t.id,
+      text: t.label,
+    });
+    subtabBar.appendChild(subtab);
+
+    const subpanel = el('div', {
+      class: 'subtab-panel' + (i === 0 ? ' active' : ''),
+      id: panelId + '-' + t.id,
+    });
+    panels[t.id] = subpanel;
+  });
+
+  panel.appendChild(subtabBar);
+  tabs.forEach(t => panel.appendChild(panels[t.id]));
+
+  // Subtab switching
+  subtabBar.addEventListener('click', e => {
+    const tab = e.target.closest('.subtab');
+    if (!tab) return;
+    subtabBar.querySelectorAll('.subtab').forEach(t => t.classList.remove('active'));
+    tab.classList.add('active');
+    tabs.forEach(t => panels[t.id].classList.remove('active'));
+    panels[tab.dataset.subtab].classList.add('active');
+  });
+
+  // Render Overview subtab (sessions + detail)
+  renderSessionTable(panels['overview'], toolSessions, accentColor);
+
+  // Render Catalog subtab
+  if (catalogData && catalogData.length > 0) {
+    renderCatalogFn(panels['catalog'], catalogData);
+  } else {
+    panels['catalog'].appendChild(el('div', {class:'empty', text:'No ' + catalogLabel.toLowerCase() + ' available yet.'}));
+  }
+
+  // Render Recipes subtab
+  renderRecipesPanel(panels['recipes'], recipeCatalog);
+}
+
+// =======================================================
+// RENDER ALL TOOL TABS
+// =======================================================
+
+function renderFitnessTab() {
+  renderToolTab(
+    'panel-fitness',
+    fitSessions,
+    'var(--accent-fitness)',
+    'Checks',
+    checkCatalog,
+    function(container, data) { renderChecksCatalog(container, data); }
+  );
+}
+
+function renderSimulationTab() {
+  renderToolTab(
+    'panel-simulation',
+    simSessions,
+    'var(--accent-sim)',
+    'Scenarios',
+    [],  // No scenarios yet
+    function(container, data) {}
+  );
+}
+
+`;
+}