create-pmos 0.51.0 → 0.53.0

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

@@ -1,216 +0,0 @@
-/* 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);
-}