create-pmos 0.46.0 → 0.48.0

package/workspace/public/pm/view-validate.js

@@ -0,0 +1,171 @@
+/* pm/view-validate.js — the Validate view, drawn from planning/design/cockpit-mockup/ViewValidate.dc.html.
+ *
+ * PRD workspace-cockpit-nav, Run 3 (R4). The board is a header with two actions on the right, a row of five stat cards, a
+ * table of findings and a closing note. The content is the view's existing list (modes-live.js `validateList`): this module
+ * draws it into a host and arranges its parts into the board. No node is removed and no text is changed, so every `data-r19`,
+ * `data-r22` and `data-r24` hook and every live behaviour stays as it was. Only the frame is new.
+ *
+ * Where each part comes from:
+ *  - The two header actions are the list's own buttons, moved: "check now" (`data-r22="check"`, the local consistency check)
+ *    and "show what would be sent" (`data-r19="plan"`, the first step of a TypeSafe run). Their labels are kept because the
+ *    verdict line and the guide page name them.
+ *  - The stat cards count the findings of the last TypeSafe run by rule (`broken-link`, `stale-after-passed`,
+ *    `workflow-sweep`, `withheld-by-secret-scan`), read off the rows the list drew, so a card and the table always agree.
+ *    The consent card reads `data-r19="consent-state"`. When no run exists, or the read has not answered, a card says so.
+ *  - The table is the run's finding rows (`data-r19="finding"`), restyled as a grid. The board's "Status" column has no
+ *    backing (a finding has no open or closed state), so the table shows the finding's severity instead.
+ *  - The local consistency check and the TypeSafe settings have no place on the board. They are kept below the table as
+ *    two cards, unchanged inside.
+ * In the fixture the list is empty, and the board says that validation is not read there.
+ */
+import { el } from './dom.js';
+
+const BTN = 'font:500 12.5px var(--sans);background:transparent;color:var(--foreground);border:1px solid var(--input);border-radius:8px;padding:0 12px;height:30px;min-height:30px;display:inline-grid;place-items:center;cursor:pointer;flex:none';
+const BTNP = 'font:500 12.5px var(--sans);background:var(--foreground);color:var(--background);border:0;border-radius:8px;padding:0 12px;height:30px;min-height:30px;display:inline-grid;place-items:center;cursor:pointer;flex:none';
+const BADGE = 'font:500 11px var(--sans);border:1px solid var(--border);border-radius:999px;padding:0 8px;line-height:18px;white-space:nowrap;display:inline-block';
+const TONE = {
+  s: ';border-color:transparent;background:color-mix(in oklab, var(--success) 16%, transparent);color:var(--success)',
+  w: ';border-color:transparent;background:color-mix(in oklab, var(--warning) 16%, transparent);color:var(--warning)',
+  d: ';border-color:transparent;background:color-mix(in oklab, var(--destructive) 18%, transparent);color:var(--destructive)',
+};
+const STAT = 'flex:1 1 150px;min-width:0;border:1px solid var(--border);background:var(--background);border-radius:10px;padding:12px 14px';
+const TH = 'font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-foreground);text-align:left';
+const COLS = 'display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,1fr) 92px minmax(0,1.3fr);gap:0 14px;align-items:center';
+const CARD = 'border:1px solid var(--border);border-radius:10px;background:var(--background);padding:4px 0 8px;overflow:hidden';
+const CARD_HEAD = 'padding:12px 14px 2px;font:600 15px var(--sans);color:var(--foreground)';
+const LBL = 'font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-foreground)';
+const NOTE = 'color:var(--muted-foreground);font-size:13px;line-height:1.5';
+
+const badge = (text, tone) => el('span', { style: BADGE + (tone ? TONE[tone] : '') }, String(text));
+
+/** The board's stat cards. `kind` is what the card counts; the counts come from the rows the list drew. */
+const STATS = [
+  { key: 'broken', label: 'Broken links', rule: 'broken-link', tone: 'var(--destructive)' },
+  { key: 'stale', label: 'Stale documents', rule: 'stale-after-passed', tone: 'var(--warning)' },
+  { key: 'workflow', label: 'Workflow defects', rule: 'workflow-sweep', tone: 'var(--warning)' },
+  { key: 'withheld', label: 'Withheld (credential shape)', rule: 'withheld-by-secret-scan', tone: null },
+];
+
+/** What the list says about the last run: 'run' (the coverage line is drawn), 'none' (no run), or 'unread'. */
+function runState(wrap) {
+  if (!wrap) return 'unread';
+  if (wrap.querySelector('[data-r19="coverage"]')) return 'run';
+  if (wrap.querySelector('[data-r19="no-run"]')) return 'none';
+  return 'unread';
+}
+
+function stats(wrap) {
+  const run = runState(wrap);
+  const rows = wrap ? [...wrap.querySelectorAll('[data-r19="finding"]')] : [];
+  const cards = STATS.map((s) => {
+    const n = rows.filter((r) => r.getAttribute('data-rule') === s.rule).length;
+    const value = run === 'run'
+      ? el('div', { 'data-board-value': String(n), style: 'font:600 24px var(--sans);line-height:1.3;color:' + (n > 0 && s.tone ? s.tone : 'var(--foreground)') }, String(n))
+      : el('div', { 'data-board-value': run, style: 'margin-top:6px' }, badge(run === 'none' ? 'no run yet' : 'not read'));
+    return el('div', { 'data-board-stat': s.key, style: STAT }, el('div', { style: 'color:var(--muted-foreground)' }, s.label), value);
+  });
+  const cs = wrap ? wrap.querySelector('[data-r19="consent-state"]') : null;
+  const txt = cs ? cs.textContent || '' : '';
+  const consent = !cs ? badge('not read') : /\bON\b/.test(txt) ? badge('given', 's') : badge('not given', 'w');
+  cards.push(el('div', { 'data-board-stat': 'consent', 'data-board-value': !cs ? 'unread' : /\bON\b/.test(txt) ? 'given' : 'not-given', style: STAT },
+    el('div', { style: 'color:var(--muted-foreground)' }, 'Jev consent'), el('div', { style: 'margin-top:6px' }, consent)));
+  return el('div', { 'data-board-part': 'stats', style: 'display:flex;gap:14px;flex-wrap:wrap' }, cards);
+}
+
+/** Split the list's children at its section labels. The labels are fixed text in modes-live.js. */
+function sections(wrap) {
+  const kids = [...wrap.children];
+  const at = (re) => kids.findIndex((k) => re.test((k.textContent || '').trim()));
+  const iT = at(/^typesafe \(jev\)/i);
+  const iF = at(/^4 · findings/);
+  const end = (i, fallback) => (i < 0 ? fallback : i);
+  return {
+    consistency: kids.slice(0, end(iT, end(iF, kids.length))),
+    typesafe: iT < 0 ? [] : kids.slice(iT, end(iF, kids.length)),
+    findings: iF < 0 ? [] : kids.slice(iF),
+  };
+}
+
+/** Restyle one finding row as a table row. Only styles change: the row keeps its nodes, text, hooks and click. */
+function asTableRow(row) {
+  row.setAttribute('style', COLS + ';width:100%;box-sizing:border-box;padding:10px 14px;text-align:left;border-bottom:1px solid var(--border);font-size:13px;color:var(--foreground);cursor:pointer;min-height:40px');
+  const [head, files] = row.children;
+  if (files) files.setAttribute('style', 'order:0;font:12px var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--foreground)');
+  if (head) {
+    head.setAttribute('style', 'display:contents');
+    const [sev, rule, meta] = head.children;
+    if (rule) rule.setAttribute('style', 'order:1;font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap');
+    if (sev) {
+      const v = (sev.textContent || '').trim();
+      const tone = v === 'high' ? TONE.d : v === 'medium' ? TONE.w : '';
+      sev.setAttribute('style', 'order:2;justify-self:start;' + BADGE + tone);
+    }
+    if (meta) meta.setAttribute('style', 'order:3;font:11px var(--mono);color:var(--muted-foreground);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap');
+  }
+  row.setAttribute('data-board-row', 'finding');
+}
+
+function findingsSection(parts) {
+  const [label, ...rest] = parts;
+  if (label) label.setAttribute('style', LBL + ';padding:0 2px');
+  const rows = rest.filter((n) => n.getAttribute && n.getAttribute('data-r19') === 'finding');
+  const notes = rest.filter((n) => !rows.includes(n));
+  for (const n of notes) {
+    const tone = /color:var\(--destructive\)/.test(n.getAttribute('style') || '') ? ';color:var(--destructive)' : '';
+    n.setAttribute('style', NOTE + tone + ';padding:0 2px');
+  }
+  rows.forEach(asTableRow);
+  const table = rows.length
+    ? el('div', { 'data-board-part': 'table', style: 'border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--background)' },
+      el('div', { 'data-board-part': 'table-head', style: COLS + ';padding:10px 14px;border-bottom:1px solid var(--border)' },
+        el('span', { style: TH }, 'File and finding'), el('span', { style: TH }, 'Rule'), el('span', { style: TH }, 'Severity'), el('span', { style: TH }, 'Checked by')),
+      rows)
+    : null;
+  return el('div', { 'data-board-section': 'findings', style: 'display:flex;flex-direction:column;gap:8px' }, label || null, notes, table);
+}
+
+function card(key, title, parts) {
+  if (!parts.length) return null;
+  return el('div', { 'data-board-section': key, style: CARD }, el('div', { style: CARD_HEAD }, title), parts);
+}
+
+export function renderBoard(inner, ctx) {
+  const { FIXTURE, state } = ctx;
+  const repo = state.product || null;
+
+  const toolbar = el('div', { 'data-board-part': 'toolbar', style: 'display:flex;gap:8px;flex-wrap:wrap;align-items:center' });
+  const header = el('div', { 'data-board-part': 'header', style: 'display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap' },
+    el('div', null,
+      el('div', { 'data-board-title': '', style: 'font:600 22px var(--sans);line-height:1.45' }, 'Validate documents'),
+      el('div', { 'data-board-subtitle': '', style: 'color:var(--muted-foreground)' },
+        'Local checks first. Nothing is sent anywhere until you consent for ' + (repo ? repo : 'this repository') + '.')),
+    toolbar);
+
+  const host = el('div', { 'data-board-section': 'list', style: 'display:flex;flex-direction:column;gap:14px' });
+  ctx.renderMode(host);
+  const wrap = host.querySelector('[data-r19="validate"]');
+
+  let statRow = null;
+  if (FIXTURE) {
+    statRow = el('div', { 'data-board-part': 'stats', style: NOTE }, 'Validation is not read in the fixture.');
+  } else if (wrap) {
+    statRow = stats(wrap);
+    // the two header actions are the list's own buttons, moved, so their hooks and presses stay as they were
+    const check = wrap.querySelector('[data-r22="check"]');
+    const plan = wrap.querySelector('[data-r19="plan"]');
+    if (check) { check.setAttribute('style', BTN); toolbar.appendChild(check); }
+    if (plan) { plan.setAttribute('style', BTNP); toolbar.appendChild(plan); }
+    const s = sections(wrap);
+    wrap.setAttribute('style', 'display:flex;flex-direction:column;gap:14px;padding:0');
+    const findings = s.findings.length ? findingsSection(s.findings) : null;
+    const foot = el('div', { 'data-board-part': 'note', style: NOTE }, 'Findings never edit a file. You decide what to fix.');
+    const cons = card('consistency', 'Consistency of this repository', s.consistency);
+    const ts = card('typesafe', 'TypeSafe (Jev)', s.typesafe);
+    // the consistency card keeps its own label, which the card head now says
+    if (s.consistency[0] && /^consistency of this repository/.test((s.consistency[0].textContent || '').trim())) s.consistency[0].style.display = 'none';
+    for (const n of [findings, foot, cons, ts]) if (n) wrap.appendChild(n);
+  }
+
+  inner.appendChild(el('div', { 'data-board': 'validate', style: 'display:flex;flex-direction:column;gap:14px;padding:4px 6px;font-size:13px;line-height:1.45;color:var(--foreground)' },
+    header, statRow, host));
+}