create-pmos 0.47.0 → 0.49.0

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

@@ -0,0 +1,216 @@
+/* pm/view-skills.js — the Skills view tab, drawn from planning/design/cockpit-mockup/ViewSkills.dc.html.
+ *
+ * PRD workspace-cockpit-nav, Run 3 (R4). The board is two panes. On the left, a 340px column with the title, a switch
+ * (All, Built-in, Yours, Discovered) and the skills. On the right, the skill that waits for the person: a quarantined
+ * candidate, its text, and Approve and Reject.
+ *
+ * Both panes are the view's existing list (modes-live.js `skillsLive`, or the fixture's skills), drawn once and split: the
+ * skill rows go left, the discovery block and the candidates go right. No node is removed, so every `data-r4="skill"`,
+ * `data-r13` and `data-r7` hook and every live behaviour stays as it was: a row still opens its skill as a tab, and a
+ * candidate is still read, approved, rejected or retired by its own buttons. Only the frame is new.
+ *
+ * The switch hides the rows of the other sources. It reads each row's own source label, so it never disagrees with the list.
+ * The board's "+ New skill" has no form in this app (the server's POST /api/skills is reached from the CLI), so it is not
+ * drawn. The board's "Always produces" and "Procedure" parts belong to a skill's own tab, which a row opens. In the fixture
+ * the discovery is not read, and the right pane says so.
+ */
+import { el } from './dom.js';
+
+let seg = 'all';   // the left switch: 'all' · 'builtin' · 'user' · 'discovered'
+
+const SEGS = [['all', 'All'], ['builtin', 'Built-in'], ['user', 'Yours'], ['discovered', 'Discovered']];
+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;flex:none';
+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 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;padding:0';
+const ITEM = 'display:flex;flex-direction:column;gap:2px;width:100%;box-sizing:border-box;text-align:left;padding:8px 12px;min-height:40px;border:0;border-radius:8px;background:transparent;color:var(--foreground);cursor:pointer';
+const CARD = 'display:flex;flex-direction:column;gap:8px;width:100%;box-sizing:border-box;text-align:left;border:1px solid var(--border);border-radius:10px;padding:14px 16px;background:var(--background);min-height:0';
+const PROC = 'white-space:pre-wrap;overflow-wrap:anywhere;margin:0;border:1px solid var(--border);border-radius:10px;background:var(--card);padding:12px 14px;font:12px/1.6 var(--mono);color:var(--muted-foreground);max-height:320px;overflow:auto';
+
+const badge = (text, tone, attrs) => el('span', { ...(attrs || {}), style: BADGE + (tone ? TONE[tone] : '') }, String(text));
+
+/** A row's source, read off the row itself: the live row shows it on the right of its first line. A fixture row has none. */
+function sourceOf(row) {
+  const top = row.children[0];
+  const src = top && top.children.length > 1 ? (top.children[1].textContent || '').trim() : '';
+  return src || null;
+}
+
+/** Restyle one skill row in place, as the board's item: the name in bold, the source as a badge, the description below. */
+function restyleRow(row) {
+  const active = /background:var\(--accent\)/.test(row.getAttribute('style') || '');
+  row.setAttribute('style', ITEM + (active ? ';background:var(--accent)' : ''));
+  const [top, desc] = row.children;
+  if (top) {
+    top.setAttribute('style', 'display:flex;align-items:center;gap:8px;min-width:0');
+    const [name, src] = top.children.length > 1 ? top.children : [top, null];
+    if (name && name !== top) name.setAttribute('style', 'font:600 13px var(--sans);color:var(--foreground);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap');
+    if (name === top) top.setAttribute('style', 'display:block;font:600 13px var(--sans);color:var(--foreground)');
+    if (src) {
+      const s = (src.textContent || '').trim();
+      src.setAttribute('style', BADGE + ';margin-left:auto' + (s === 'discovered' ? TONE.s : ''));
+      src.setAttribute('data-board-badge', 'source');
+      if (s === 'discovered') src.setAttribute('title', 'discovered, and approved on this machine');
+    }
+  }
+  if (desc) desc.setAttribute('style', 'display:block;font-size:12.5px;line-height:1.45;color:var(--muted-foreground)');
+}
+
+/** Restyle one candidate as a card: its name and state as the board's title and badge, its text as the procedure box. */
+function restyleCand(card) {
+  card.setAttribute('style', CARD);
+  card.setAttribute('data-board-card', 'candidate');
+  const st = card.getAttribute('data-state') || '';
+  const kids = [...card.children];
+  const [top] = kids;
+  if (top) {
+    top.setAttribute('style', 'display:flex;align-items:center;gap:10px;flex-wrap:wrap');
+    const [name, state] = top.children;
+    if (name) name.setAttribute('style', 'font:600 16px var(--sans);color:var(--foreground)');
+    if (state) {
+      const t = state.textContent || '';
+      const tone = /running|approved here/.test(t) ? 's' : st === 'quarantined' ? 'w' : st === 'rejected' ? 'd' : null;
+      state.setAttribute('style', BADGE + (tone ? TONE[tone] : ''));
+      state.setAttribute('data-board-badge', 'state');
+    }
+  }
+  for (const k of kids.slice(1)) {
+    if (k.tagName === 'PRE') { k.setAttribute('style', PROC); continue; }
+    const btns = k.querySelectorAll('button');
+    if (btns.length) {
+      k.setAttribute('style', 'display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:2px');
+      for (const b of btns) {
+        const h = b.getAttribute('data-r13');
+        b.setAttribute('style', (h === 'approve' ? BTNP : BTN) + (b.disabled ? ';opacity:.45;cursor:not-allowed' : ''));
+      }
+      continue;
+    }
+    const tone = /var\(--destructive\)/.test(k.getAttribute('style') || '') ? ';color:var(--destructive)' : '';
+    const mono = /var\(--mono\)/.test(k.getAttribute('style') || '');
+    k.setAttribute('style', 'display:block;' + (mono ? 'font:11px var(--mono);overflow-wrap:anywhere;' : 'font-size:13px;line-height:1.5;') + 'color:var(--muted-foreground)' + tone);
+  }
+}
+
+/** The right pane's parts, restyled in place. `head` is the list's discovery block, in its own order. */
+function restyleReview(nodes) {
+  for (const n of nodes) {
+    if (!n || n.nodeType !== 1) continue;
+    const h = n.getAttribute('data-r13') || n.getAttribute('data-r4') || '';
+    if (h === 'cand') { restyleCand(n); continue; }
+    if (h === 'discovery-label' || h === 'cands-label') { n.setAttribute('style', LBL + ';padding:6px 0 0'); continue; }
+    if (h === 'run-note' || h === 'cand-note') { n.setAttribute('style', NOTE + (/destructive/.test(n.getAttribute('style') || '') ? ';color:var(--destructive)' : '')); continue; }
+    if (n.querySelector('button')) {
+      // the discovery actions: "find skills now" with its next run, or the one-press weekly set-up
+      n.setAttribute('style', 'display:flex;gap:10px;align-items:center;flex-wrap:wrap');
+      for (const b of n.querySelectorAll('button')) b.setAttribute('style', b.getAttribute('data-r13') === 'discover-now' ? BTNP : BTN);
+      const seed = n.querySelector('[data-r7]');
+      if (seed) {
+        seed.setAttribute('style', 'display:flex;flex-direction:column;gap:6px;align-items:flex-start');
+        for (const c of seed.children) if (c.tagName === 'SPAN') c.setAttribute('style', 'font-size:12px;color:var(--muted-foreground)');
+      }
+      for (const s of n.children) if (s.tagName === 'SPAN') s.setAttribute('style', 'font:11px var(--mono);color:var(--muted-foreground)');
+      continue;
+    }
+    const bad = /var\(--destructive\)/.test(n.getAttribute('style') || '');
+    n.setAttribute('style', NOTE + (bad ? ';color:var(--destructive)' : ''));
+  }
+}
+
+export function renderBoard(inner, ctx) {
+  const { FIXTURE } = ctx;
+
+  // The board fills the tab from edge to edge, as the mockup does: the pane's own padding is dropped for this view only.
+  const pane = inner.parentElement;
+  if (pane) { pane.style.padding = '0'; pane.style.overflow = 'hidden'; pane.style.display = 'flex'; pane.style.flexDirection = 'column'; }
+  inner.style.cssText = 'flex:1 1 auto;min-height:0;display:flex;flex-direction:row;gap:0;max-width:none;height:100%';
+  inner.setAttribute('data-board', 'skills');
+
+  // the existing list, drawn once, then split between the two panes
+  const drawn = el('div', null);
+  ctx.renderMode(drawn);
+  const wrap = !FIXTURE && drawn.children.length === 1 && !drawn.firstElementChild.hasAttribute('data-r4') ? drawn.firstElementChild : null;
+  const review = [];
+  if (wrap) {
+    const kids = [...wrap.children];
+    // the list's own label "skills · N · click one to read it" starts the skills; everything above it is the discovery block
+    let cut = kids.findIndex((k) => !k.hasAttribute('data-r13') && !k.hasAttribute('data-r4') && /^skills · \d+/.test((k.textContent || '').trim()));
+    const counted = cut >= 0;
+    if (!counted) cut = kids.length - 1;   // a read in progress or failed: its status line stays with the list
+    for (const k of kids.slice(0, Math.max(0, cut))) review.push(k);
+    for (const k of review) k.remove();
+    wrap.setAttribute('style', 'display:flex;flex-direction:column;gap:2px');
+    const label = kids[cut];
+    if (counted && label) {
+      label.setAttribute('data-board-part', 'count');
+      label.setAttribute('style', LBL + ';padding:6px 12px 4px');
+    }
+  }
+  const rows = [...drawn.querySelectorAll(FIXTURE ? 'button' : '[data-r4="skill"]')];
+  for (const row of rows) restyleRow(row);
+  for (const n of wrap ? wrap.children : []) {
+    if (n.hasAttribute('data-r4') || n.hasAttribute('data-board-part')) continue;
+    n.setAttribute('style', NOTE + ';padding:6px 12px' + (/destructive/.test(n.getAttribute('style') || '') ? ';color:var(--destructive)' : ''));
+  }
+
+  // the switch: it hides the rows of the other sources, and never removes one
+  const waiting = review.filter((n) => n.getAttribute && n.getAttribute('data-r13') === 'cand'
+    && n.getAttribute('data-state') === 'quarantined' && !/approved here/.test(n.textContent || '')).length;
+  if (!SEGS.some(([k]) => k === seg)) seg = 'all';
+  let shown = 0;
+  for (const row of rows) {
+    const src = sourceOf(row);
+    const hide = seg !== 'all' && src !== seg;
+    row.style.display = hide ? 'none' : '';
+    if (!hide) shown++;
+  }
+  const noMatch = rows.length && !shown ? el('div', { 'data-board-empty': seg, style: NOTE + ';padding:6px 12px' },
+    seg === 'user' ? 'You have no skills of your own here. Open a skill and make your own copy to edit it.'
+      : seg === 'discovered' ? 'No discovered skill is approved here yet. Candidates wait on the right.'
+        : 'No skills of this kind.') : null;
+  const segBtn = ([k, label]) => {
+    const on = seg === k;
+    return el('button', {
+      'data-board-seg': k, 'aria-pressed': on ? 'true' : 'false',
+      onClick: () => { seg = k; ctx.setState({}); },
+      style: 'flex:1 1 0;text-align:center;border:0;border-radius:6px;padding:3px 0;font:' + (on ? '500' : '400') + ' 12.5px var(--sans);cursor:pointer;'
+        + (on ? 'background:var(--background);color:var(--foreground)' : 'background:transparent;color:var(--muted-foreground)'),
+    }, label, k === 'discovered' && waiting ? el('span', { 'data-board-waiting': String(waiting), style: 'color:var(--warning);margin-left:4px' }, String(waiting)) : null);
+  };
+  const toolbar = FIXTURE ? null : el('div', { 'data-board-part': 'toolbar', role: 'group', 'aria-label': 'Show skills by source',
+    style: 'display:flex;gap:2px;background:var(--accent);border-radius:8px;padding:3px' }, SEGS.map(segBtn));
+
+  const left = el('div', { 'data-board-part': 'list',
+    style: 'width:340px;flex:none;box-sizing:border-box;border-right:1px solid var(--border);background:var(--sidebar);padding:14px;display:flex;flex-direction:column;gap:10px;min-height:0;overflow-y:auto' },
+    el('div', { 'data-board-part': 'header', style: 'display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:30px' },
+      el('span', { 'data-board-title': '', style: 'font:600 15px var(--sans);color:var(--foreground)' }, 'Skills')),
+    toolbar,
+    el('div', { 'data-board-section': 'skills', style: 'display:flex;flex-direction:column;gap:2px;margin:0 -2px' }, [...drawn.childNodes], noMatch));
+
+  // the right pane: what waits for the person
+  restyleReview(review);
+  let right;
+  if (FIXTURE) {
+    right = [el('div', { 'data-board-part': 'review-title', style: 'font:600 22px var(--sans);color:var(--foreground)' }, 'Skill discovery'),
+      el('div', { 'data-board-part': 'note', style: NOTE }, 'Skill discovery is not read in the fixture. Choose a skill on the left to see it in the detail.')];
+  } else {
+    right = [
+      el('div', { style: 'display:flex;align-items:center;gap:10px;flex-wrap:wrap' },
+        el('span', { 'data-board-part': 'review-title', style: 'font:600 22px var(--sans);color:var(--foreground)' }, 'Skill discovery'),
+        waiting ? badge(waiting + (waiting === 1 ? ' waits for you' : ' wait for you'), 'w', { 'data-board-badge': 'waiting' }) : null),
+      el('div', { 'data-board-section': 'review', style: 'display:flex;flex-direction:column;gap:12px' }, review),
+      review.length ? el('div', { 'data-board-part': 'note', style: NOTE + ';font-size:12px' },
+        'Approval is a press on this machine, after you read the full text. It applies to this machine only.') : null,
+    ];
+  }
+  const rightPane = el('div', { 'data-board-part': 'detail',
+    style: 'flex:1 1 0;min-width:0;box-sizing:border-box;padding:22px 28px;display:flex;flex-direction:column;gap:12px;overflow-y:auto;background:var(--card);color:var(--foreground);font-size:13px;line-height:1.45' }, right);
+
+  inner.appendChild(left);
+  inner.appendChild(rightPane);
+}

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

@@ -0,0 +1,168 @@
+/* pm/view-today.js — the Today view tab, drawn from planning/design/cockpit-mockup/ViewToday.dc.html (PRD workspace-cockpit-nav, Run 3).
+ *
+ * The board, top to bottom: a greeting with the date and the count line, the Repository / All toggle on the right, a row of
+ * source badges, then two columns (Needs you on the left; Prepared for you and Today's events in a 360px column on the right).
+ * Under the board sits the live proactive-engine list (`ctx.renderMode`), unchanged, with every data-r22/r23/r26 hook.
+ *
+ * Every fact comes from a read that exists: derived status (`state.statuses`, the same as Run 2's board) and the morning
+ * brief (`/api/proactive/brief`, the route the engine list reads). The mockup's mail, Jira and Confluence badges and its
+ * calendar events show only when a brief reports them. Without a brief the board says that nothing was read.
+ * The Run 2 hooks are kept: data-today = board, greeting, count, sources, needs, prepared, events, card, open, dismiss, and
+ * data-today-scope on the toggle.
+ */
+
+import { el } from './dom.js';
+import { currentProduct } from './board-read.js';
+import { repoTuples, selectRepo } from './panel-repos.js';
+import { needsCards } from './panel-cockpit.js';
+
+const DISMISS_REASONS = ['not now', 'wrong priority', 'already handled'];
+const NEEDS_SHOWN = 5;   // the mockup shows a few cards and then "+ N more"
+let needsAll = false;    // the only module state: has the person asked for every card
+
+const LBL = 'font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-foreground)';
+const BADGE = 'font:500 11px var(--sans);border:1px solid var(--border);border-radius:999px;padding:0 8px;line-height:18px;color:var(--foreground);white-space:nowrap;flex:none';
+const TONE = {
+  d: 'border-color:transparent;background:color-mix(in oklab, var(--destructive) 18%, transparent);color:var(--destructive)',
+  w: 'border-color:transparent;background:color-mix(in oklab, var(--warning) 16%, transparent);color:var(--warning)',
+  s: 'border-color:transparent;background:color-mix(in oklab, var(--success) 16%, transparent);color:var(--success)',
+};
+const badge = (text, tone, extra) => el('span', { style: BADGE + (tone ? ';' + TONE[tone] : '') + (extra ? ';' + extra : '') }, text);
+const CARD = 'border:1px solid var(--border);background:var(--card);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:8px';
+const BTN_P = 'font:500 12.5px var(--sans);background:var(--foreground);color:var(--background);border:0;border-radius:8px;padding:0 12px;height:30px;display:inline-grid;place-items:center;cursor:pointer';
+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;display:inline-grid;place-items:center;cursor:pointer';
+const GHOST = 'font:12px var(--sans);color:var(--muted-foreground);padding:0 8px;height:28px;display:inline-grid;place-items:center;cursor:pointer;background:transparent;border:0';
+const MUTED = 'color:var(--muted-foreground)';
+
+const DAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+const MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+
+/* ── the morning brief: the same route the engine list reads, kept for 15 seconds ─────────────────── */
+let brief = { state: 'idle', data: null, at: 0 };
+function readBrief(ctx) {
+  if (ctx.FIXTURE) return null;
+  const fresh = brief.state === 'ok' && Date.now() - brief.at < 15000;
+  if (brief.state === 'loading' || brief.state === 'error' && Date.now() - brief.at < 15000 || fresh) return brief.data;
+  brief = { state: 'loading', data: brief.data, at: brief.at };
+  fetch('/api/proactive/brief').then((r) => r.json()).then(
+    (d) => { brief = { state: d && d.ok !== false ? 'ok' : 'error', data: d && d.ok !== false ? d : null, at: Date.now() }; ctx.setState({}); },
+    () => { brief = { state: 'error', data: null, at: Date.now() }; ctx.setState({}); },
+  );
+  return brief.data;
+}
+
+const keyOf = (repo, slug, state) => {
+  const sg = typeof window !== 'undefined' ? window.PMOSStatusGroups : null;
+  return sg ? sg.keyOf(((state.statuses || {})[repo] || {})[slug]) : 'unknown';
+};
+const meaning = (key) => {
+  const sg = typeof window !== 'undefined' ? window.PMOSStatusGroups : null;
+  return (sg && sg.BY_KEY && sg.BY_KEY[key] && sg.BY_KEY[key].meaning) || '';
+};
+
+export function renderBoard(inner, ctx) {
+  const { state, setState } = ctx;
+  const all = state.todayScope === 'all';
+  const repo = currentProduct();
+  const cards = needsCards(all);
+  const repos = repoTuples();
+  const prepared = [];
+  for (const t of repos) {
+    if (!all && t[0] !== repo) continue;
+    for (const slug of Object.keys((state.statuses && state.statuses[t[0]]) || {})) {
+      if (keyOf(t[0], slug, state) === 'in-progress') prepared.push({ repo: t[0], slug });
+    }
+  }
+  const b = readBrief(ctx);
+  const br = b && b.brief && !b.stale ? b.brief : null;
+  const now = new Date();
+  const hour = now.getHours();
+  const greet = b && b.greeting ? String(b.greeting).replace(/\.$/, '') : (hour < 12 ? 'Good morning' : hour < 18 ? 'Good afternoon' : 'Good evening');
+  const open = (c) => { selectRepo(c.repo); setState({ sel: c.slug, detail: { kind: 'init' }, col2: true }); };
+
+  /* header: greeting and count line on the left, the scope toggle on the right */
+  const toggle = el('div', { 'data-today': 'scope', style: 'display:flex;gap:2px;background:var(--accent);border-radius:8px;padding:3px;font-size:12.5px' },
+    ...[['repo', 'Repository'], ['all', 'All']].map(([k, label]) => el('button', {
+      'data-today-scope': k, 'aria-pressed': (k === 'all') === all ? 'true' : 'false',
+      title: k === 'all' ? 'Show every repository' : 'Show ' + (repo || 'this repository') + ' only',
+      onClick: () => setState({ todayScope: k === 'all' ? 'all' : 'repo' }),
+      style: 'font:12.5px var(--sans);padding:3px 12px;border-radius:6px;border:0;cursor:pointer;' + ((k === 'all') === all ? 'background:var(--background);font-weight:500;color:var(--foreground)' : 'background:transparent;color:var(--muted-foreground)'),
+    }, label)));
+  const date = DAYS[now.getDay()] + ' ' + now.getDate() + ' ' + MONTHS[now.getMonth()];
+  const count = cards.length + (cards.length === 1 ? ' needs you' : ' need you') + (all ? ' across ' + repos.length + ' repositories' : ' in ' + (repo || 'this repository'))
+    + ' · ' + prepared.length + ' in progress';
+  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', { style: 'min-width:0' },
+      el('div', { 'data-today': 'greeting', style: 'font:600 22px var(--sans)' }, greet),
+      el('div', { 'data-today': 'count', style: MUTED }, date + ' · ' + count)),
+    el('div', { style: 'display:flex;align-items:center;gap:10px' }, toggle));
+
+  /* the source badges: what was read, and nothing else */
+  const srcBadges = [badge('records · read', 's')];
+  if (br) {
+    for (const [k, v] of Object.entries(br.sources || {})) {
+      srcBadges.push(v === 'read' ? badge(k + ' · read', 's') : v === 'off' ? badge(k + ' · off', null, 'opacity:.6') : badge(k + ' · not reached'));
+    }
+  } else srcBadges.push(badge(b && b.stale ? 'brief · out of date' : ctx.FIXTURE ? 'brief · not read here' : 'brief · none yet', b && b.stale ? 'w' : null));
+  const sources = el('div', { 'data-today': 'sources', style: 'display:flex;gap:6px;flex-wrap:wrap;align-items:center' },
+    ...srcBadges,
+    el('span', { style: MUTED + ';font-size:11px' }, br
+      ? 'Read from the derived status of ' + Object.keys(state.statuses || {}).length + ' repositories and the brief for ' + br.date + '.'
+      : 'Read from the derived status of ' + Object.keys(state.statuses || {}).length + ' repositories. No mail or calendar is read here.'));
+
+  /* Needs you */
+  const card = (c) => {
+    const needs = c.key === 'needs-you';
+    return el('div', { 'data-today': 'card', 'data-slug': c.slug, 'data-repo': c.repo, style: CARD },
+      el('div', { style: 'display:flex;align-items:center;gap:8px;min-width:0' },
+        badge(c.repo),
+        el('b', { style: 'min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap' }, c.slug),
+        badge(needs ? 'needs you' : 'acceptance', needs ? 'd' : 'w', 'margin-left:auto')),
+      meaning(c.key) ? el('div', { style: MUTED }, meaning(c.key)) : null,
+      el('div', { style: 'display:flex;gap:6px;align-items:center;flex-wrap:wrap' },
+        el('button', { 'data-today': 'open', onClick: () => open(c), style: BTN_P }, needs ? 'Unblock' : 'Review'),
+        ...DISMISS_REASONS.map((r, i) => el('button', { 'data-today': 'dismiss', 'data-reason': r, title: 'Dismiss: ' + r,
+          onClick: () => setState((s) => ({ todayDismissed: { ...(s.todayDismissed || {}), [c.repo + '/' + c.slug]: r } })),
+          style: GHOST + (i === 0 ? ';margin-left:auto' : ''), hover: 'color:var(--foreground)' }, r.charAt(0).toUpperCase() + r.slice(1)))));
+  };
+  const shown = needsAll ? cards : cards.slice(0, NEEDS_SHOWN);
+  const needsCol = el('div', { 'data-today': 'needs', style: 'flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:10px' },
+    el('div', { style: LBL }, 'Needs you · only a person can close these'),
+    ...(cards.length ? shown.map(card) : [el('div', { style: MUTED }, 'Nothing is waiting on you.')]),
+    cards.length > NEEDS_SHOWN ? el('button', { 'data-today': 'more', onClick: () => { needsAll = !needsAll; setState({}); },
+      style: 'text-align:left;background:transparent;border:0;padding:0;cursor:pointer;' + MUTED, hover: 'color:var(--foreground)' },
+    needsAll ? 'Show fewer' : '+ ' + (cards.length - NEEDS_SHOWN) + ' more') : null);
+
+  /* Prepared for you, then today's events */
+  const prep = (c) => el('div', { 'data-today': 'prepared', 'data-slug': c.slug, 'data-repo': c.repo, style: CARD },
+    el('b', { style: 'overflow:hidden;text-overflow:ellipsis;white-space:nowrap' }, c.slug),
+    el('div', { style: MUTED }, meaning('in-progress') || 'In progress.'),
+    el('div', { style: 'display:flex;gap:6px' }, el('button', { 'data-today': 'prepared-open', onClick: () => open(c), style: BTN, hover: 'background:var(--accent)' }, 'Open')));
+  let events;
+  if (!br) events = [el('div', { style: MUTED }, b && b.stale ? 'The brief is out of date, so no events are shown.' : 'No calendar was read. Events come from the morning brief.')];
+  else if (br.sources && br.sources.calendar !== 'read') events = [el('div', { style: MUTED }, 'The brief did not read the calendar, so this says nothing about your day.')];
+  else if (!(br.calendar || []).length) events = [el('div', { style: MUTED }, 'No events today.')];
+  else events = [el('div', { style: 'display:flex;flex-direction:column;gap:6px' }, ...br.calendar.map((e) => el('div', { 'data-today': 'event', style: 'display:flex;gap:10px' },
+    el('span', { style: 'font:12px var(--mono);' + MUTED }, new Date(e.start).toTimeString().slice(0, 5)), e.title + (e.with ? ' · ' + e.with : ''))))];
+  const side = el('div', { style: 'flex:0 1 360px;min-width:260px;display:flex;flex-direction:column;gap:10px' },
+    el('div', { 'data-today': 'prepared', style: 'display:flex;flex-direction:column;gap:10px' },
+      el('div', { style: LBL }, 'Prepared for you · in progress'),
+      ...(prepared.length ? prepared.map(prep) : [el('div', { style: MUTED }, 'Nothing is being prepared.')])),
+    el('div', { 'data-today': 'events', style: 'display:flex;flex-direction:column;gap:10px;margin-top:6px' },
+      el('div', { style: LBL }, "Today's events"), ...events));
+
+  const board = el('div', { 'data-today': 'board', 'data-board': 'today', style: 'display:flex;flex-direction:column;gap:16px;font-size:13px;line-height:1.45' },
+    header, sources,
+    el('div', { 'data-board-part': 'columns', style: 'display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start;min-height:0' }, needsCol, side));
+
+  /* the live list: the proactive engine, the brief, background prepare, learning and settings */
+  const host = el('div', { 'data-today': 'engine', style: 'display:flex;flex-direction:column;gap:2px;border:1px solid var(--border);border-radius:10px;background:var(--background);padding:4px 0' });
+  ctx.renderMode(host);
+  if (!host.firstChild) host.appendChild(el('div', { style: MUTED + ';padding:8px 14px;font-size:12px' }, ctx.ready ? 'This list has nothing to show.' : 'Reading the list …'));
+  const lower = el('div', { 'data-board-part': 'engine', style: 'display:flex;flex-direction:column;gap:10px;padding-top:16px;margin-top:6px;border-top:1px solid var(--border)' },
+    el('div', { style: LBL }, 'From the records · scanned on this computer'), host);
+
+  inner.style.gap = '16px';
+  inner.appendChild(board);
+  inner.appendChild(lower);
+}

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));
+}