create-pmos 0.46.0 → 0.48.0

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

@@ -0,0 +1,161 @@
+/* pm/view-scheduled.js — the Scheduled view tab, drawn from planning/design/cockpit-mockup/ViewScheduled.dc.html.
+ *
+ * PRD workspace-cockpit-nav, Run 3 (R4). The board is a header, a table of schedules (Task, Skill, Cadence, Next run, Last run,
+ * On, and the actions) and a closing note.
+ *
+ * The rows are the view's existing list (modes-live.js `scheduledLive`): each `data-r4="schedule"` row is laid out as a table
+ * row in place, and its own "run now" and "delete" buttons sit in the last column, so every `data-r4`, `data-r7` and `data-r11`
+ * hook and every live behaviour stays as it was. The list's set-up buttons (the recommended schedules and the special report)
+ * move into the board's toolbar, and its run note moves under it. No node is removed. The row's "next … · last …" line is
+ * split into the Next run and Last run columns; the line itself stays in the row, hidden, as the source of both.
+ *
+ * The Skill column and the tone of the Last run badge come from the board's own read of GET /api/schedules?all=1, the read
+ * the list uses. A row is matched by its name and its last run, so a stale read shows no skill and a plain badge rather than
+ * a wrong one. The board's on/off switch is drawn as a plain on/off badge: the list has no control that turns a schedule on
+ * or off, so the board does not offer one. The board's "+ New schedule" has no form in this app, so it is not drawn. In the
+ * fixture the prototype's list is drawn inside the table frame, unchanged.
+ */
+import { el } from './dom.js';
+
+let sched = { key: null, data: null, busy: false };   // this board's read of /api/schedules?all=1
+
+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;white-space:nowrap';
+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;white-space:nowrap';
+const SMALL = 'font:500 11.5px var(--sans);background:transparent;color:var(--muted-foreground);border:1px solid var(--border);border-radius:6px;padding:0 9px;height:24px;min-height:24px;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 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 COLS = ['Task', 'Skill', 'Cadence', 'Next run', 'Last run', 'On', ''];
+const GRID = 'display:grid;grid-template-columns:minmax(110px,1.5fr) minmax(90px,1fr) minmax(90px,1fr) minmax(90px,1fr) minmax(100px,1fr) 52px 168px;align-items:center;width:100%;box-sizing:border-box;text-align:left';
+const CELL = 'padding:12px 12px;font-size:13px;grid-row:1;min-width:0;overflow-wrap:anywhere';
+const TH = LBL + ';padding:10px 12px;grid-row:1';
+
+const badge = (text, tone, attrs) => el('span', { ...(attrs || {}), style: BADGE + (tone ? TONE[tone] : '') }, String(text));
+const stamp = (v) => (v ? String(v).slice(0, 16).replace('T', ' ') : null);
+const nameOf = (s) => String(s.label || s.name || s.task || s.skill || s.id || '');
+
+/** The board's own read of the schedules. It is read again only when the rows change (a new, removed or re-run schedule), so a
+ * redraw never loops on it. */
+function schedules(ctx, key) {
+  if (ctx.FIXTURE) return null;
+  if (sched.key !== key && !sched.busy) {
+    sched.key = key; sched.busy = true;
+    fetch('/api/schedules?all=1').then((r) => r.json()).then(
+      (d) => { sched.data = (d && d.schedules) || null; },
+      () => { sched.data = null; },
+    ).finally(() => { sched.busy = false; ctx.setState({}); });
+  }
+  return sched.data;
+}
+
+/** Lay out one existing row as a table row. `s` is the matching schedule from the board's read, or null. */
+function restyleRow(row, s) {
+  row.setAttribute('style', GRID + ';border-bottom:1px solid var(--border)');
+  const [top, line, btns] = row.children;
+  let name = null; let cadence = null;
+  if (top) {
+    top.setAttribute('style', 'display:contents');
+    [name, cadence] = top.children;
+    if (name) { name.setAttribute('style', CELL + ';grid-column:1;font-weight:600;color:var(--foreground)'); name.setAttribute('data-board-cell', 'task'); }
+    if (cadence) { cadence.setAttribute('style', CELL + ';grid-column:3;color:var(--foreground)'); cadence.setAttribute('data-board-cell', 'cadence'); }
+  }
+  const text = line ? (line.textContent || '') : '';
+  const m = /^next (.*) · last (.*)$/.exec(text.trim());
+  const next = m ? m[1] : ''; const last = m ? m[2] : '';
+  if (line) { line.style.display = 'none'; line.setAttribute('data-board-source', 'next-last'); }
+  const off = !!cadence && (cadence.textContent || '').trim() === 'disabled';
+
+  // the Last run badge: its tone comes from the read only when the read agrees with the row about the last run
+  const agrees = s && (stamp(s.lastRun) || 'never') === last;
+  let lastEl;
+  if (!m) lastEl = el('span', null, '');
+  else if (last === 'never') lastEl = el('span', { style: 'color:var(--muted-foreground)' }, 'never');
+  else if (agrees && s.lastStatus === 'missed') lastEl = badge('missed · last ' + last, 'w', { 'data-board-badge': 'last' });
+  else if (agrees && s.lastStatus === 'fail') lastEl = badge('failed ' + last, 'd', { 'data-board-badge': 'last' });
+  else if (agrees && (s.lastStatus === 'ok' || s.lastStatus === 'started')) lastEl = badge('ran ' + last, 's', { 'data-board-badge': 'last' });
+  else lastEl = badge(last, null, { 'data-board-badge': 'last' });
+
+  row.appendChild(el('span', { 'data-board-cell': 'skill', style: CELL + ';grid-column:2;font:12px var(--mono);color:var(--foreground)' }, s ? String(s.skill || s.task || '') : ''));
+  row.appendChild(el('span', { 'data-board-cell': 'next', style: CELL + ';grid-column:4;color:var(--foreground)' }, next));
+  row.appendChild(el('span', { 'data-board-cell': 'last', style: CELL + ';grid-column:5' }, lastEl));
+  row.appendChild(el('span', { 'data-board-cell': 'on', style: CELL + ';grid-column:6' },
+    badge(off ? 'off' : 'on', off ? null : 's', { 'data-board-badge': 'on', title: off ? 'this schedule is turned off' : 'this schedule is on' })));
+  if (btns) {
+    btns.setAttribute('style', CELL + ';grid-column:7;display:flex;gap:6px;justify-content:flex-end;align-items:center');
+    btns.setAttribute('data-board-cell', 'actions');
+    for (const b of btns.querySelectorAll('button')) b.setAttribute('style', b.getAttribute('data-r4') === 'run' ? BTN : SMALL);
+  }
+}
+
+/** The list's set-up rows (the recommended schedules and the special report) as the board's toolbar buttons. */
+function restyleSetup(n) {
+  n.setAttribute('style', 'display:flex;flex-direction:column;gap:6px;align-items:flex-start;max-width:100%');
+  for (const b of n.querySelectorAll('button')) b.setAttribute('style', BTN);
+  for (const c of n.children) if (c.tagName === 'SPAN') c.setAttribute('style', 'font-size:12px;line-height:1.45;color:var(--muted-foreground);max-width:420px');
+}
+
+export function renderBoard(inner, ctx) {
+  const { FIXTURE } = ctx;
+  const drawn = el('div', null);
+  ctx.renderMode(drawn);
+
+  const actions = el('div', { 'data-board-part': 'actions', style: 'display:flex;gap:8px;flex-wrap:wrap;align-items:center' });
+  const setup = el('div', { 'data-board-part': 'toolbar', style: 'display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start' });
+  const notes = el('div', { style: 'display:flex;flex-direction:column;gap:6px' });
+  const frame = el('div', { 'data-board-section': 'schedules', style: 'border:1px solid var(--border);border-radius:10px;overflow-x:auto;overflow-y:hidden;background:var(--background)' });
+
+  let count = null;
+  if (FIXTURE) {
+    // the prototype's rows, unchanged; its "＋ schedule a task" is the board's primary action
+    const add = [...drawn.querySelectorAll('button')].find((b) => /schedule a task/.test(b.textContent || ''));
+    if (add) { add.setAttribute('style', BTNP); actions.appendChild(add); }
+    frame.appendChild(el('div', { style: 'padding:4px 0' }, [...drawn.childNodes]));
+  } else {
+    const wrap = drawn.children.length === 1 && !drawn.firstElementChild.hasAttribute('data-r4') ? drawn.firstElementChild : null;
+    const rows = wrap ? [...wrap.querySelectorAll(':scope > [data-r4="schedule"]')] : [];
+    if (wrap) {
+      for (const k of [...wrap.children]) {
+        if (k.hasAttribute('data-r7') || k.getAttribute('data-r11') === 'special') { restyleSetup(k); setup.appendChild(k); }
+        else if (k.getAttribute('data-r4') === 'run-note') { k.setAttribute('style', NOTE + (/destructive/.test(k.getAttribute('style') || '') ? ';color:var(--destructive)' : '')); notes.appendChild(k); }
+        else if (!k.hasAttribute('data-r4')) k.setAttribute('style', NOTE + ';padding:14px');
+      }
+      wrap.setAttribute('style', 'display:flex;flex-direction:column');
+      const key = rows.map((r) => (r.textContent || '')).join('\n');
+      const data = schedules(ctx, key) || [];
+      const used = new Set();
+      for (const row of rows) {
+        const nm = ((row.children[0] && row.children[0].children[0]) || {}).textContent || '';
+        const s = data.find((x, i) => !used.has(i) && nameOf(x) === nm.trim() && (used.add(i), true)) || null;
+        restyleRow(row, s);
+      }
+      count = rows.length;
+      if (rows.length) frame.appendChild(el('div', { 'data-board-part': 'columns', style: GRID + ';border-bottom:1px solid var(--border)' },
+        COLS.map((c, i) => el('span', { style: TH + ';grid-column:' + (i + 1) }, c))));
+      frame.appendChild(wrap);
+    } else {
+      // the read is in progress or failed: the list's own status line, in the frame
+      for (const k of [...drawn.children]) k.setAttribute('style', NOTE + ';padding:14px' + (/destructive/.test(k.getAttribute('style') || '') ? ';color:var(--destructive)' : ''));
+      frame.appendChild(el('div', null, [...drawn.childNodes]));
+    }
+  }
+  if (count !== null) actions.appendChild(badge(count + (count === 1 ? ' schedule' : ' schedules') + ' · all repositories', null, { 'data-board-badge': 'count' }));
+
+  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' }, 'Scheduled tasks'),
+      el('div', { 'data-board-subtitle': '', style: 'color:var(--muted-foreground)' },
+        'Skills that run on a cadence on this machine, while the workspace runs. A missed slot is skipped, never caught up.')),
+    actions);
+
+  const setupPart = setup.children.length ? el('div', { style: 'display:flex;flex-direction:column;gap:8px' },
+    el('div', { style: LBL }, 'Set up'), setup) : null;
+
+  inner.appendChild(el('div', { 'data-board': 'scheduled', style: 'display:flex;flex-direction:column;gap:14px;padding:4px 6px;font-size:13px;line-height:1.45;color:var(--foreground)' },
+    header, setupPart, notes.children.length ? notes : null, frame,
+    el('div', { 'data-board-part': 'note', style: NOTE }, 'Times are this machine’s. A task’s result waits for you in Needs you.')));
+}

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