create-pmos 0.37.0 → 0.38.1

package/workspace/public/pm/modes-live.js

@@ -0,0 +1,437 @@
+/* modes-live.js — the drawer modes that render SERVER data in live mode (overhaul-r4).
+ *
+ * modes.js renders the prototype's seeded lists, and in live mode those lists start empty and every
+ * edit is a client-only setState (seedOr). R1 hid the three modes with no server behind them; this
+ * module gives the other three their server truth, and adds the portfolio:
+ *
+ *   portfolio  — GET /api/portfolio: every registered repository's initiatives, grouped by domain
+ *                then repository, freshness stated, unread repositories listed; a report bar that
+ *                writes a weekly / OKR / query report into the hub (POST /api/reports, a PM press).
+ *   scheduled  — GET /api/schedules; run / delete through the existing routes.
+ *   skills     — GET /api/skills; a row with a file opens it.
+ *   knowledge  — GET /api/library's knowledge trees (OKF, skills, build-skills); a row opens it.
+ *
+ * Every list states its read: loading, failed (with the reason), or a successful read of nothing.
+ * Fixture mode never reaches this module (modes.js routes here only when !FIXTURE).
+ */
+import { el } from './dom.js';
+import { state, setState } from './state.js';
+
+const iv = (v) => el('span', null, v === null || v === undefined ? '' : String(v));
+const LABEL = 'padding:10px 14px 4px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-foreground)';
+const ROW = 'display:block;width:100%;padding:7px 14px;min-height:40px;text-align:left;border-bottom:1px solid oklch(1 0 0 / 5%)';
+const BTN = 'font-family:var(--mono);font-size:10.5px;padding:3px 9px;border:1px solid var(--border);color:var(--muted-foreground);min-height:26px';
+const NOTE = 'padding:8px 14px;font-size:11.5px;color:var(--muted-foreground);line-height:1.5';
+
+/* one cached read per endpoint; `reload(key)` drops it so the next render refetches */
+const cache = new Map();
+function read(key, url) {
+  const hit = cache.get(key);
+  if (hit && (hit.state !== 'ok' || Date.now() - hit.at < 15000)) return hit;
+  if (!hit || hit.state === 'ok') {
+    const next = { state: hit ? hit.state : 'loading', data: hit ? hit.data : null, at: hit ? hit.at : 0 };
+    cache.set(key, next);
+    fetch(url).then(readJson).then(
+      (data) => { cache.set(key, { state: data && data.ok === false ? 'error' : 'ok', data, error: data && data.error, at: Date.now() }); setState({}); },
+      (e) => { cache.set(key, { state: 'error', error: (e && e.message) || String(e), at: Date.now() }); setState({}); },
+    );
+    return next;
+  }
+  return hit;
+}
+const reload = (key) => cache.delete(key);
+/* A route this server does not have answers 404 with the plain text `not found`. Parsing that as JSON
+ * showed the PM "Unexpected token 'o', \"not found\" is not valid JSON" — true, and no help. The usual
+ * cause is a server still running code older than the page, so say that and the one command. */
+function readJson(r) {
+  return r.text().then((t) => {
+    try { return JSON.parse(t); } catch {
+      throw new Error(r.status === 404
+        ? 'this server does not have that route — it is probably running an older version than the page. Run `pmos` again to restart it'
+        : 'the server answered ' + r.status + ' with something that is not JSON');
+    }
+  });
+}
+const post = (url, body) => fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) })
+  .then(readJson).catch((e) => ({ ok: false, error: (e && e.message) || String(e) }));
+function status(r, what) {
+  if (r.state === 'loading' && !r.data) return el('div', { style: NOTE }, iv('reading ' + what + ' …'));
+  if (r.state === 'error') return el('div', { style: NOTE + ';color:var(--destructive)' }, iv(what + ' could not be read — ' + (r.error || 'error')));
+  return null;
+}
+async function openDocIn(ws, path, repo) {
+  const ini = await import('./panel-initiatives.js');
+  const tree = ws ? { ws, branch: null, linked: true } : null;
+  if (repo && repo !== state.product) {
+    const repos = await import('./panel-repos.js');
+    repos.selectRepo(repo);
+  }
+  ini.openDoc(null, path, 'FILE', tree);
+}
+
+/* ── portfolio ──────────────────────────────────────────────────────────────────────────────── */
+let reportNote = null;
+async function writeReport(kind) {
+  let q = '';
+  if (kind === 'query') {
+    q = typeof window !== 'undefined' && window.prompt ? window.prompt('Report on initiatives matching:', state.q || '') : '';
+    if (!q || !q.trim()) return;
+  }
+  reportNote = { tone: 'mut', text: 'writing the ' + kind + ' report …' };
+  setState({});
+  const out = await post('/api/reports', { kind, q });
+  if (!out || out.ok === false) { reportNote = { tone: 'bad', text: (out && out.error) || 'the report was not written' }; setState({}); return; }
+  reportNote = { tone: 'ok', text: 'written to ' + out.path + (out.unread && out.unread.length ? ' · not fully read: ' + out.unread.join(', ') : '') };
+  const pf = cache.get('portfolio');
+  const hubName = pf && pf.data && pf.data.hub ? pf.data.hub.name : null;
+  await openDocIn(out.ws, out.path, hubName);
+  // selecting the hub to open the report switches to its initiatives; stay on the portfolio, where
+  // the PM pressed the button and where the note saying what was written is shown
+  reload('portfolio');
+  setState({ mode: 'portfolio', col1: true });
+}
+
+async function land(row) {
+  const repos = await import('./panel-repos.js');
+  repos.selectRepo(row.repo);
+  setState({ sel: row.id, mode: 'product', detail: { kind: 'init' }, col2: true });
+}
+
+export function portfolioList() {
+  const r = read('portfolio', '/api/portfolio');
+  const kids = [];
+  kids.push(el('div', { style: 'display:flex;gap:4px;flex-wrap:wrap;padding:8px 14px 4px', 'data-r4': 'report-bar' },
+    el('span', { style: 'font-family:var(--mono);font-size:10px;color:var(--muted-foreground);align-self:center;margin-right:4px' }, 'report →'),
+    ['weekly', 'okr', 'query'].map((k) => el('button', { onClick: () => writeReport(k), style: BTN, hover: 'color:var(--foreground)', 'data-r4': 'report-' + k }, iv(k === 'okr' ? 'OKR' : k))),
+    el('button', { onClick: () => { reload('portfolio'); setState({}); }, style: BTN + ';margin-left:auto', hover: 'color:var(--foreground)', title: 'read again' }, '↻')));
+  if (reportNote) kids.push(el('div', { 'data-r4': 'report-note', style: NOTE + ';color:' + (reportNote.tone === 'bad' ? 'var(--destructive)' : 'var(--muted-foreground)') }, iv(reportNote.text)));
+  const st = status(r, 'the portfolio');
+  if (st) return [...kids, st];
+  const pf = r.data || { repos: [], rows: [] };
+  if (!pf.hub) kids.push(el('div', { style: NOTE }, iv('No hub yet — reports need a portfolio.yaml in your PM repository (D-3).')));
+  const q = String(state.q || '').trim().toLowerCase();
+  const rows = (pf.rows || []).filter((x) => !q || [x.id, x.title, x.group, x.repo, x.domain].some((v) => v && String(v).toLowerCase().includes(q)));
+  // coverage first: what was read, how fresh, and what was NOT read
+  kids.push(el('div', { style: LABEL }, iv('coverage · ' + (pf.repos || []).length + ' repositories')));
+  for (const rp of pf.repos || []) {
+    const s = rp.error ? 'NOT READ — ' + rp.error : rp.pending ? 'board pending — stages arriving' : rp.stale ? 'stale · as of ' + String(rp.as_of).slice(11, 16) : 'fresh · as of ' + String(rp.as_of || '').slice(11, 16);
+    kids.push(el('div', { 'data-r4': 'coverage', style: 'padding:2px 14px;font-family:var(--mono);font-size:10.5px;color:' + (rp.error ? 'var(--destructive)' : 'var(--muted-foreground)') },
+      iv(rp.name + (rp.domain ? ' (' + rp.domain + ')' : '') + ' · ' + rp.count + ' · ' + s)));
+  }
+  // then the initiatives, domain › repository
+  const byDomain = new Map();
+  for (const x of rows) {
+    const d = x.domain || 'no domain declared';
+    if (!byDomain.has(d)) byDomain.set(d, new Map());
+    const m = byDomain.get(d);
+    if (!m.has(x.repo)) m.set(x.repo, []);
+    m.get(x.repo).push(x);
+  }
+  for (const [dom, repos] of [...byDomain.entries()].sort((a, b) => a[0].localeCompare(b[0]))) {
+    kids.push(el('div', { style: LABEL + ';color:var(--foreground)', 'data-r4': 'domain' }, iv('domain · ' + dom)));
+    for (const [repo, list] of repos) {
+      kids.push(el('div', { style: LABEL + ';padding-top:4px' }, iv(repo + ' · ' + list.length)));
+      for (const x of list) {
+        const stage = x.accepted ? 'accepted' : x.stage || 'not derived';
+        kids.push(el('button', { onClick: () => land(x), style: ROW, hover: 'background:var(--accent)', 'data-r4': 'row', 'data-id': x.id, 'data-repo': x.repo },
+          el('span', { style: 'display:flex;gap:8px;align-items:baseline' },
+            el('span', { style: 'font-family:var(--mono);font-size:12px' }, iv('#' + x.id)),
+            el('span', { style: 'margin-left:auto;font-family:var(--mono);font-size:10px;color:' + (x.blocked ? 'var(--destructive)' : 'var(--muted-foreground)') }, iv(stage + (x.blocked ? ' ✗' : '') + (x.sessions ? ' · ● ' + x.sessions : '')))),
+          el('span', { style: 'display:block;font-size:11px;color:var(--muted-foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap' }, iv(x.group + (x.next ? ' — next: ' + x.next : '')))));
+      }
+    }
+  }
+  if (!rows.length) kids.push(el('div', { style: NOTE }, iv(q ? 'no initiative matches "' + q + '"' : 'no initiatives in the repositories that were read')));
+  return [el('div', { style: 'padding:2px 0 8px' }, kids)];
+}
+
+/* ── D71 — set up the recommended schedules for the selected repository, on a press ───────────── */
+let seedNote = null;
+function seedRow(set, label, hint) {
+  const product = state.product;
+  const note = seedNote && seedNote.set === set ? seedNote.text : null;
+  return el('div', { 'data-r7': 'seed-' + set, style: 'padding:8px 14px;border-bottom:1px solid var(--border)' },
+    el('button', { style: BTN, hover: 'color:var(--foreground)', title: hint, onClick: async () => {
+      const data = await import('./data.js');
+      const ws = product ? data.wsOf(product) : null;
+      if (!ws) { seedNote = { set, text: 'select a repository first' }; setState({}); return; }
+      const out = await post('/api/schedules/seed', { ws, set });
+      seedNote = { set, text: !out || out.ok === false ? ((out && out.error) || 'not set up')
+        : out.created.length ? 'scheduled: ' + out.created.map((c) => c.name + ' (' + c.cadence + ' ' + c.time + ')').join(', ')
+          : 'nothing to add — ' + out.kept.map((k) => k.skill + ': ' + k.why).join('; ') };
+      reload('schedules'); setState({});
+    } }, label),
+    note ? el('span', { style: 'display:block;font-size:11px;color:var(--muted-foreground);margin-top:4px' }, iv(note)) : null);
+}
+
+/* ── R11 — schedule ONE special report: what it is for, a date and a time ─────────────────────── */
+let specialNote = null;
+function specialRow() {
+  return el('div', { 'data-r11': 'special', style: 'padding:8px 14px;border-bottom:1px solid var(--border)' },
+    el('button', { style: BTN, hover: 'color:var(--foreground)', title: 'a one-off report: say what it is for and when you want the draft; it runs once',
+      onClick: async () => {
+        const product = state.product;
+        const d = await import('./data.js');
+        const ws = product ? d.wsOf(product) : null;
+        if (!ws) { specialNote = 'select a repository first'; setState({}); return; }
+        const what = typeof window !== 'undefined' && window.prompt ? window.prompt('What is the special report for? Who reads it, what period or topic, roughly how long?') : null;
+        if (!what || !what.trim()) return;
+        const dflt = new Date(Date.now() + 86400000).toISOString().slice(0, 10);
+        const date = window.prompt('Which day should the draft be ready? (YYYY-MM-DD)', dflt);
+        if (!date) return;
+        const time = window.prompt('At what time? (HH:MM, this machine\'s clock)', '07:30');
+        if (!time) return;
+        const out = await post('/api/schedules', { ws, name: 'Special report — ' + what.trim().slice(0, 40), cadence: 'once', date: date.trim(), time: time.trim(), skill: 'report-special', task: 'report-special', args: what.trim() });
+        specialNote = out && out.ok ? 'scheduled once for ' + date.trim() + ' at ' + time.trim() + ' — it fires only while the workspace is running' : ((out && out.error) || 'not scheduled');
+        reload('schedules'); setState({});
+      } }, 'schedule a special report'),
+    specialNote ? el('span', { 'data-r11': 'special-note', style: 'display:block;font-size:11px;color:var(--muted-foreground);margin-top:4px' }, iv(specialNote)) : null);
+}
+
+/* ── scheduled ──────────────────────────────────────────────────────────────────────────────── */
+export function scheduledLive() {
+  const r = read('schedules', '/api/schedules?all=1');
+  const st = status(r, 'the schedules');
+  if (st) return [st];
+  const list = (r.data && r.data.schedules) || [];
+  const kids = [seedRow('requirements', 'set up daily requirement gathering', 'schedules the gather-requirements skill daily at 07:30 for the selected repository; notes are filed in that repository'),
+    seedRow('reports', 'set up report drafts (daily · weekly · bi-weekly · monthly)', 'schedules the four report skills for the selected repository; each follows your own definition and files a draft in that repository. A special report is run on demand.'),
+    seedRow('skills', 'set up weekly skill discovery', 'schedules the skill-discover skill weekly (Wednesday 09:00) for the selected repository; it files candidates for you to read and never approves them'),
+    seedRow('memory', 'set up weekly memory grooming', 'schedules the memory-groom skill weekly (Monday 08:00) for the selected repository; it proposes changes and never makes them'),
+    specialRow()];
+  for (const s of list) {
+    const name = s.label || s.name || s.task || s.skill || s.id;
+    const cadence = (s.cadence || '') + (s.day ? ' ' + s.day : '') + (s.time ? ' at ' + s.time : '');
+    kids.push(el('div', { style: ROW, 'data-r4': 'schedule' },
+      el('span', { style: 'display:flex;gap:8px;align-items:baseline' },
+        el('span', { style: 'font-size:12.5px' }, iv(name)),
+        el('span', { style: 'margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--muted-foreground)' }, iv(s.enabled === false ? 'disabled' : cadence))),
+      el('span', { style: 'display:block;font-family:var(--mono);font-size:10.5px;color:var(--muted-foreground)' },
+        iv('next ' + (s.next ? String(s.next).slice(0, 16).replace('T', ' ') : '—') + ' · last ' + (s.lastRun ? String(s.lastRun).slice(0, 16).replace('T', ' ') : 'never'))),
+      el('span', { style: 'display:flex;gap:4px;margin-top:4px' },
+        el('button', { onClick: async () => { await post('/api/schedules/run', { id: s.id }); reload('schedules'); setState({}); }, style: BTN, hover: 'color:var(--foreground)', 'data-r4': 'run' }, 'run now'),
+        el('button', { onClick: async () => {
+          if (typeof window !== 'undefined' && window.confirm && !window.confirm('Delete the schedule "' + name + '"?')) return;
+          await post('/api/schedules/delete', { id: s.id }); reload('schedules'); setState({});
+        }, style: BTN, hover: 'color:var(--destructive)', 'data-r4': 'delete' }, 'delete'))));
+  }
+  if (!list.length) kids.push(el('div', { style: NOTE }, iv('No scheduled tasks — a successful read of nothing.')));
+  return [el('div', { style: 'padding:6px 0' }, kids)];
+}
+
+/* ── memory (D72) — the repository's curated memory, for real ─────────────────────────────────── */
+let memNote = null;
+async function memWs() { const d = await import('./data.js'); return state.product ? d.wsOf(state.product) : null; }
+async function memDo(body) {
+  const ws = await memWs();
+  if (!ws) { memNote = 'select a repository first'; setState({}); return; }
+  const out = await post('/api/memory', { ws, ...body });
+  memNote = out && out.ok ? (out.staged ? 'held for approval' : null) : ((out && out.error) || 'not saved');
+  if (out && !out.ok && out.entries && out.entries.length) memNote += ' — current entries: ' + out.entries.map((e) => '“' + e.text.slice(0, 40) + '”').join(', ');
+  reload('memory'); setState({});
+}
+const ask = (q, v) => (typeof window !== 'undefined' && window.prompt ? window.prompt(q, v || '') : null);
+let dataMod = null;
+import('./data.js').then((m) => { dataMod = m; setState({}); }).catch(() => { dataMod = null; });
+export function memoryLive() {
+  const wsId = dataMod && state.product ? dataMod.wsOf(state.product) : null;
+  const ws = wsId || 'none';
+  if (!wsId) return [el('div', { style: NOTE }, iv(state.product ? 'reading the repository …' : 'select a repository to see its memory'))];
+  const r = read('memory:' + ws, '/api/memory?ws=' + encodeURIComponent(wsId));
+  const st = status(r, 'the memory');
+  const kids = [];
+  const d = r.data || {};
+  const actions = el('div', { style: 'display:flex;gap:4px;flex-wrap:wrap;padding:8px 14px 4px', 'data-r9': 'memory-bar' },
+    el('button', { style: BTN, hover: 'color:var(--foreground)', 'data-r9': 'add', onClick: () => { const t = ask('Add to repository memory (one short fact):'); if (t && t.trim()) memDo({ op: 'add', target: 'memory', text: t.trim() }); } }, '＋ memory'),
+    el('button', { style: BTN, hover: 'color:var(--foreground)', 'data-r9': 'add-user', onClick: () => { const t = ask('Add about you (a preference or how you work):'); if (t && t.trim()) memDo({ op: 'add', target: 'user', text: t.trim() }); } }, '＋ about me'),
+    el('button', { style: BTN, hover: 'color:var(--foreground)', 'data-r9': 'wire', title: 'add a block to this repository\'s CLAUDE.md so each session reads the memory at start',
+      onClick: async () => { const w = await memWs(); const out = w ? await post('/api/memory/wire', { ws: w }) : null; memNote = out && out.ok ? (out.changed ? 'CLAUDE.md now imports the memory' : 'already wired') : ((out && out.error) || 'not wired'); reload('memory:' + ws); setState({}); } },
+    d.wired ? 'wired ✓' : 'wire into CLAUDE.md'),
+    el('button', { style: BTN + ';margin-left:auto', hover: 'color:var(--foreground)', 'data-r9': 'approval', title: 'when on, writes by an agent wait here for your approval',
+      onClick: async () => { const w = await memWs(); if (!w) return; await post('/api/memory/config', { ws: w, write_approval: !(d.config && d.config.write_approval) }); reload('memory:' + ws); setState({}); } },
+    'approval ' + (d.config && d.config.write_approval ? 'on' : 'off')));
+  kids.push(actions);
+  if (memNote) kids.push(el('div', { 'data-r9': 'note', style: NOTE + ';color:var(--destructive)' }, iv(memNote)));
+  if (st) return [...kids, st];
+  for (const t of ['memory', 'user']) {
+    const u = (d.usage || {})[t] || { used: 0, limit: 0, percent: 0 };
+    kids.push(el('div', { style: LABEL, 'data-r9': 'usage-' + t }, iv((t === 'memory' ? 'repository memory' : 'about you') + ' · ' + u.percent + '% · ' + u.used + '/' + u.limit)));
+    const es = (d.entries || []).filter((e) => e.target === t);
+    if (!es.length) kids.push(el('div', { style: NOTE }, iv('Nothing recorded yet.')));
+    for (const e of es) {
+      kids.push(el('div', { style: ROW, 'data-r9': 'entry', 'data-id': e.id },
+        el('span', { style: 'display:block;font-size:12px;line-height:1.45' }, iv(e.text)),
+        el('span', { style: 'display:block;font-family:var(--mono);font-size:10px;color:var(--muted-foreground);margin-top:2px' },
+          iv([e.confidence, e.stale ? 'stale' : null, e.source ? 'source ' + e.source : null, e.by, String(e.at).slice(0, 10)].filter(Boolean).join(' · '))),
+        el('span', { style: 'display:flex;gap:4px;margin-top:4px' },
+          e.confidence === 'unconfirmed' ? el('button', { style: BTN, hover: 'color:var(--foreground)', 'data-r9': 'confirm', onClick: () => memDo({ op: 'confirm', target: t, old: e.text }) }, 'confirm') : null,
+          el('button', { style: BTN, hover: 'color:var(--foreground)', 'data-r9': 'edit', onClick: () => { const nt = ask('Edit this entry:', e.text); if (nt && nt.trim() && nt.trim() !== e.text) memDo({ op: 'replace', target: t, old: e.text, text: nt.trim() }); } }, 'edit'),
+          el('button', { style: BTN, hover: 'color:var(--destructive)', 'data-r9': 'remove', onClick: () => { if (window.confirm && !window.confirm('Remove this entry?')) return; memDo({ op: 'remove', target: t, old: e.text }); } }, 'remove'))));
+    }
+  }
+  if ((d.pending || []).length) {
+    kids.push(el('div', { style: LABEL + ';color:var(--foreground)', 'data-r9': 'pending-label' }, iv('waiting for your approval · ' + d.pending.length)));
+    for (const p of d.pending) {
+      kids.push(el('div', { style: ROW, 'data-r9': 'pending', 'data-eid': p.eid },
+        el('span', { style: 'display:block;font-size:12px' }, iv(p.op + ' · ' + (p.text || p.id))),
+        el('span', { style: 'display:block;font-family:var(--mono);font-size:10px;color:var(--muted-foreground)' }, iv(p.by + ' · ' + String(p.at).slice(0, 16).replace('T', ' '))),
+        el('span', { style: 'display:flex;gap:4px;margin-top:4px' },
+          el('button', { style: BTN, hover: 'color:var(--foreground)', 'data-r9': 'approve', onClick: () => memDo({ op: 'approve', ref: p.eid }) }, 'approve'),
+          el('button', { style: BTN, hover: 'color:var(--destructive)', 'data-r9': 'reject', onClick: () => memDo({ op: 'reject', ref: p.eid }) }, 'reject'))));
+    }
+  }
+  if ((d.blocked || []).length) {
+    kids.push(el('div', { style: LABEL + ';color:var(--destructive)', 'data-r9': 'blocked-label' }, iv('blocked by the scan · ' + d.blocked.length)));
+    for (const b of d.blocked) kids.push(el('div', { style: NOTE, 'data-r9': 'blocked' }, iv(b.reason + ' · ' + b.by + ' · ' + String(b.at).slice(0, 10) + ' · not shown to any session')));
+  }
+  kids.push(el('div', { style: NOTE }, iv('Sessions read this once, when they start. Unconfirmed items are included and labelled. It travels with the repository when you Sync.')));
+  return [el('div', { style: 'padding:2px 0 8px' }, kids)];
+}
+
+/* ── skills ─────────────────────────────────────────────────────────────────────────────────── */
+let candNote = null; const openText = new Map();
+async function candDo(ws, body) {
+  const out = await post('/api/skills/decide', { ws, ...body });
+  candNote = out && out.ok ? (out.note || null) : ((out && out.error) || 'not done');
+  if (out && out.ok && body.op === 'read') openText.set(body.id + '@' + body.sha, out);
+  reload('skillcands:' + ws); reload('skills:' + ws); setState({});
+  return out;
+}
+function candidatesBlock(wsId) {
+  if (!wsId) return [];
+  const r = read('skillcands:' + wsId, '/api/skills/candidates?ws=' + encodeURIComponent(wsId));
+  const d = r.data || {};
+  const rows = d.candidates || [];
+  const kids = [el('div', { style: LABEL + ';color:var(--foreground)', 'data-r13': 'cands-label' }, iv('found or generated · ' + rows.length + ' · none runs until you approve it'))];
+  if (candNote) kids.push(el('div', { 'data-r13': 'cand-note', style: NOTE }, iv(candNote)));
+  if (r.state === 'error') kids.push(el('div', { style: NOTE + ';color:var(--destructive)' }, iv('the candidates could not be read — ' + (r.error || ''))));
+  if (!rows.length && r.state !== 'error') kids.push(el('div', { style: NOTE }, iv('No candidates yet. Set up weekly discovery, or ask for skills to be generated from your repeated work.')));
+  for (const c of rows) {
+    const key = c.id + '@' + c.sha; const shown = openText.get(key);
+    const soft = (c.scan && c.scan.soft) || [];
+    kids.push(el('div', { style: ROW, 'data-r13': 'cand', 'data-id': c.id, 'data-state': c.state + (c.running ? ':running' : '') },
+      el('span', { style: 'display:flex;gap:8px;align-items:baseline' },
+        el('span', { style: 'font-family:var(--mono);font-size:12px' }, iv(c.id)),
+        el('span', { style: 'margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--muted-foreground)' }, iv(c.running ? 'approved · running' : c.state + (c.approved ? ' (approved here)' : '')))),
+      el('span', { style: 'display:block;font-size:11px;color:var(--muted-foreground)' }, iv(c.why)),
+      el('span', { style: 'display:block;font-family:var(--mono);font-size:10px;color:var(--muted-foreground)' },
+        iv([c.origin, c.license, c.author, c.source_url, '#' + c.sha12].filter(Boolean).join(' · '))),
+      soft.length ? el('span', { 'data-r13': 'findings', style: 'display:block;font-size:10.5px;color:var(--destructive)' }, iv('flagged: ' + soft.map((f) => f.rule + ' (line ' + f.line + ')').join(', '))) : null,
+      (c.ignored_keys || []).length ? el('span', { style: 'display:block;font-size:10.5px;color:var(--muted-foreground)' }, iv('its own ' + c.ignored_keys.join(', ') + ' will be ignored — it runs as an agent skill on claude')) : null,
+      c.collides ? el('span', { style: 'display:block;font-size:10.5px;color:var(--destructive)' }, iv('a skill with this name already exists and wins over it')) : null,
+      el('span', { style: 'display:flex;gap:4px;margin-top:4px;flex-wrap:wrap' },
+        el('button', { style: BTN, hover: 'color:var(--foreground)', 'data-r13': 'read', onClick: () => { if (shown) { openText.delete(key); setState({}); } else candDo(wsId, { op: 'read', id: c.id, sha: c.sha }); } }, shown ? 'hide the text' : 'read it'),
+        c.state === 'quarantined' && !c.running ? el('button', { style: BTN, hover: 'color:var(--foreground)', 'data-r13': 'approve', disabled: c.read ? null : 'disabled', title: c.read ? 'approve exactly this text, on this machine' : 'open the full text first',
+          onClick: async () => {
+            let ack = false;
+            if (c.needs_license_ack) { ack = !!(window.confirm && window.confirm('Its licence is "' + c.license + '". Have you read it, and do you accept it?')); if (!ack) return; }
+            await candDo(wsId, { op: 'approve', id: c.id, sha: c.sha, ack_license: ack });
+          } }, 'approve') : null,
+        c.state === 'quarantined' ? el('button', { style: BTN, hover: 'color:var(--destructive)', 'data-r13': 'reject', onClick: () => { const why = window.prompt ? window.prompt('Why reject “' + c.id + '”? (optional)', '') : ''; if (why === null) return; candDo(wsId, { op: 'reject', id: c.id, sha: c.sha, reason: why }); } }, 'reject') : null,
+        (c.running || c.approved) && c.state === 'quarantined' ? el('button', { style: BTN, hover: 'color:var(--destructive)', 'data-r13': 'retire', onClick: () => candDo(wsId, { op: 'retire', id: c.id, sha: c.sha, reason: 'retired by the PM' }) }, 'retire') : null),
+      shown ? el('pre', { 'data-r13': 'text', style: 'white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--mono);font-size:11px;line-height:1.5;background:var(--secondary);border:1px solid var(--border);padding:8px;margin:6px 0 0;max-height:320px;overflow:auto' }, iv(shown.text)) : null));
+  }
+  return kids;
+}
+/* Discovery is its own section at the TOP: it used to sit under the whole skill list, below the fold,
+ * so a PM who scrolled nothing saw no discovery at all. */
+function discoveryBlock(wsId) {
+  const sch = read('schedules', '/api/schedules?all=1');
+  const mine = ((sch.data && sch.data.schedules) || []).find((x) => x.skill === 'skill-discover' || x.task === 'skill-discover');
+  const kids = [el('div', { style: LABEL + ';color:var(--foreground)', 'data-r13': 'discovery-label' }, iv('skill discovery')),
+    el('div', { style: NOTE }, iv('Finds skills in your own repository and from sources you name. Nothing it finds runs until you read it and approve it.')),
+    el('div', { style: 'display:flex;gap:4px;flex-wrap:wrap;padding:0 14px 6px' },
+      mine ? el('button', { style: BTN, hover: 'color:var(--foreground)', 'data-r13': 'discover-now', onClick: async () => { await post('/api/schedules/run', { id: mine.id }); reload('schedules'); setState({}); } }, 'find skills now') : null,
+      mine ? el('span', { style: 'font-family:var(--mono);font-size:10.5px;color:var(--muted-foreground);align-self:center' }, iv('weekly · next ' + (mine.next ? String(mine.next).slice(0, 16).replace('T', ' ') : '—')))
+        : seedRow('skills', 'set up weekly skill discovery', 'schedules the skill-discover skill weekly (Wednesday 09:00) for the selected repository; it files candidates for you to read and never approves them'))];
+  return [...kids, ...candidatesBlock(wsId)];
+}
+export function skillsLive() {
+  const wsId = dataMod && state.product ? dataMod.wsOf(state.product) : null;
+  const r = read('skills:' + (wsId || ''), '/api/skills' + (wsId ? '?ws=' + encodeURIComponent(wsId) : ''));
+  const st = status(r, 'the skills');
+  const head = discoveryBlock(wsId);
+  if (st) return [el('div', { style: 'padding:6px 0' }, [...head, st])];
+  const list = (r.data && r.data.skills) || [];
+  const open = state.detail && state.detail.kind === 'skill' ? state.detail.id : null;
+  const kids = list.map((sk) => el('button', { style: ROW + (open === sk.id ? ';background:var(--accent)' : ''), hover: 'background:var(--accent)', 'data-r4': 'skill', 'data-id': sk.id,
+    onClick: () => setState({ detail: { kind: 'skill', id: sk.id } }) },
+    el('span', { style: 'display:flex;gap:8px;align-items:baseline' },
+      el('span', { style: 'font-family:var(--mono);font-size:12px' }, iv(sk.label || sk.skill || sk.id)),
+      el('span', { style: 'margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--muted-foreground)' }, iv(sk.source))),
+    el('span', { style: 'display:block;font-size:11px;color:var(--muted-foreground)' }, iv(sk.description))));
+  if (!list.length) kids.push(el('div', { style: NOTE }, iv('No skills — a successful read of nothing.')));
+  return [el('div', { style: 'padding:6px 0' }, [...head, el('div', { style: LABEL + ';color:var(--foreground)' }, iv('skills · ' + list.length + ' · click one to read it')), ...kids])];
+}
+
+/* The detail of one skill (panel 3). The text is read from the server on open. Your own skills are
+ * editable and save in place; a builtin or an approved discovered skill is read-only, and "make my own
+ * copy" writes an editable one beside it, so the original is never changed under a review. */
+let skillDraft = { id: null, text: null }; let skillNote = null;
+export function skillDetailLive(det) {
+  const id = det && det.id;
+  const wsId = dataMod && state.product ? dataMod.wsOf(state.product) : null;
+  const r = read('skill:' + id, '/api/skills/read?id=' + encodeURIComponent(id || '') + (wsId ? '&ws=' + encodeURIComponent(wsId) : ''));
+  const st = status(r, 'this skill');
+  if (st) return [st];
+  const d = r.data;
+  if (skillDraft.id !== id) skillDraft = { id, text: null };
+  const text = skillDraft.text !== null ? skillDraft.text : d.text;
+  const dirty = skillDraft.text !== null && skillDraft.text !== d.text;
+  const out = [el('div', { style: 'padding:14px 14px 6px' },
+    el('div', { style: 'font-family:var(--mono);font-size:13px' }, iv(d.label)),
+    el('div', { style: 'font-size:11.5px;color:var(--muted-foreground);margin-top:2px' }, iv(d.source + (d.editable ? ' · yours — edit it below' : ' · read-only') + ' · ' + d.file)),
+    el('div', { style: 'font-size:12px;margin-top:6px' }, iv(d.description)),
+    (d.output || []).length ? el('div', { style: 'font-size:11px;color:var(--muted-foreground);margin-top:6px' }, iv('always produces: ' + d.output.join(' · '))) : null)];
+  out.push(el('div', { style: 'padding:6px 14px' }, el('textarea', { 'data-r13': 'skill-text', spellcheck: 'false', readonly: d.editable ? null : 'readonly',
+    style: 'width:100%;min-height:340px;font-family:var(--mono);font-size:11.5px;line-height:1.5;background:var(--secondary);border:1px solid var(--border);color:var(--foreground);padding:8px;resize:vertical',
+    onInput: (e) => { skillDraft = { id, text: e.target.value }; } }, text)));
+  out.push(el('div', { style: 'display:flex;gap:6px;align-items:center;padding:6px 14px 14px;flex-wrap:wrap' },
+    d.editable ? el('button', { style: BTN, hover: 'color:var(--foreground)', 'data-r13': 'skill-save', onClick: async () => {
+      const res = await post('/api/skills/save', { id, text: skillDraft.text !== null ? skillDraft.text : d.text });
+      skillNote = res && res.ok ? 'saved' : ((res && res.error) || 'not saved');
+      if (res && res.ok) { skillDraft = { id, text: null }; reload('skill:' + id); reload('skills:' + (wsId || '')); }
+      setState({});
+    } }, 'save') : el('button', { style: BTN, hover: 'color:var(--foreground)', 'data-r13': 'skill-copy', onClick: async () => {
+      const res = await post('/api/skills/copy', { id, ws: wsId });
+      if (res && res.ok) { skillNote = 'copied as ' + res.id + ' — it is yours to edit'; reload('skills:' + (wsId || '')); setState({ detail: { kind: 'skill', id: res.id } }); }
+      else { skillNote = (res && res.error) || 'not copied'; setState({}); }
+    } }, 'make my own copy to edit'),
+    dirty ? el('span', { style: 'font-size:11px;color:var(--muted-foreground)' }, 'unsaved changes') : null,
+    skillNote ? el('span', { 'data-r13': 'skill-note', style: 'font-size:11px;color:var(--muted-foreground)' }, iv(skillNote)) : null));
+  return out;
+}
+
+/* ── knowledge ──────────────────────────────────────────────────────────────────────────────── */
+function flatten(node, out, depth) {
+  for (const d of node.docs || []) out.push({ path: d.path, name: d.name, depth });
+  if (depth < 3) for (const sub of node.dirs || []) { out.push({ dir: sub.name || sub.path, depth }); flatten(sub, out, depth + 1); }
+  return out;
+}
+export function knowledgeLive() {
+  const ws = state.wsId || '';
+  const r = read('library:' + ws, '/api/library?ws=' + encodeURIComponent(ws));
+  const st = status(r, 'the knowledge');
+  if (st) return [st];
+  const trees = (r.data && r.data.knowledge) || [];
+  const kids = [el('div', { style: NOTE }, iv('This repository\'s knowledge: the OKF bundle, skills and build-skills. Open a document to read it.'))];
+  for (const t of trees) {
+    kids.push(el('div', { style: LABEL }, iv(t.path || t.name || 'knowledge')));
+    for (const it of flatten(t, [], 0)) {
+      if (it.dir) { kids.push(el('div', { style: 'padding:3px 14px 1px ' + (14 + it.depth * 12) + 'px;font-family:var(--mono);font-size:10px;color:var(--muted-foreground)' }, iv(it.dir + '/'))); continue; }
+      kids.push(el('button', { onClick: () => openDocIn(null, it.path), style: 'display:block;width:100%;text-align:left;padding:4px 14px 4px ' + (20 + it.depth * 12) + 'px;font-family:var(--mono);font-size:11.5px', hover: 'background:var(--accent)', 'data-r4': 'know' }, iv(it.name)));
+    }
+  }
+  // R11 — the notes PMOS and its agents wrote here (requirement notes, report drafts and definitions, memory).
+  const notes = (r.data && r.data.notes) || [];
+  if (notes.length) kids.push(el('div', { style: NOTE, 'data-r11': 'notes-intro' }, iv('Notes PMOS and your agents wrote in this repository — requirement notes, report drafts and definitions, memory.')));
+  for (const t of notes) {
+    kids.push(el('div', { style: LABEL, 'data-r11': 'notes-label' }, iv(t.path || t.name || 'notes')));
+    for (const it of flatten(t, [], 0)) {
+      if (it.dir) { kids.push(el('div', { style: 'padding:3px 14px 1px ' + (14 + it.depth * 12) + 'px;font-family:var(--mono);font-size:10px;color:var(--muted-foreground)' }, iv(it.dir + '/'))); continue; }
+      kids.push(el('button', { onClick: () => openDocIn(null, it.path), 'data-r11': 'note', style: 'display:block;width:100%;text-align:left;padding:4px 14px 4px ' + (20 + it.depth * 12) + 'px;font-family:var(--mono);font-size:11px;min-height:26px' }, iv(it.name || it.path)));
+    }
+  }
+  if (!trees.length && !notes.length) kids.push(el('div', { style: NOTE }, iv('No knowledge bundle in this repository — a successful read of nothing.')));
+  return [el('div', { style: 'padding:2px 0 8px' }, kids)];
+}

package/workspace/public/pm/modes.js

@@ -48,6 +48,7 @@ import { state, setState, FIXTURE } from './state.js';
 import * as FX from './fixture.js';
 import { openDoc, openTerm } from './panel-initiatives.js';
 import { boardOf, records, currentProduct } from './board-read.js';
+import * as LIVE from './modes-live.js';   // overhaul-r4: server-backed renderers, live mode only
 
 /* ── the prototype's small helpers ─────────────────────────────────────────────────────────── */
 
@@ -1037,19 +1038,21 @@ function intgBody(det) {
 
 const LISTS = {
   focus: focusList,
-  scheduled: scheduledList,
+  // overhaul-r4: in live mode these three render their server routes; the fixture keeps the prototype's
+  scheduled: () => (FIXTURE ? scheduledList() : LIVE.scheduledLive()),
   workflow: workflowList,
-  skills: skillsList,
-  knowledge: knowledgeList,
+  skills: () => (FIXTURE ? skillsList() : LIVE.skillsLive()),
+  knowledge: () => (FIXTURE ? knowledgeList() : LIVE.knowledgeLive()),
+  portfolio: () => (FIXTURE ? [] : LIVE.portfolioList()),
   agent: agentsList,
   connect: connectList,
-  memory: memoryList,
+  memory: () => (FIXTURE ? memoryList() : LIVE.memoryLive()),
 };
 
 const BODIES = {
   flow: flowBody,
   sched: schedBody,
-  skill: skillBody,
+  skill: (det) => (FIXTURE ? skillBody(det) : LIVE.skillDetailLive(det)),
   know: knowBody,
   agent: agentBody,
   mem: memBody,

package/workspace/public/pm/panel-detail.js

@@ -54,6 +54,7 @@ import { state, setState, FIXTURE } from './state.js';
 import * as FX from './fixture.js';
 import { openDoc, openTab, openTerm, fileNewModel } from './panel-initiatives.js';
 import { addProductBody } from './panel-repos.js';
+import { lifecycleRow } from './lifecycle.js';
 import { boardOf, records, currentProduct } from './board-read.js';
 
 /* ── the prototype's small helpers ─────────────────────────────────────────────────────────── */
@@ -271,7 +272,24 @@ function sessionsBlock(slug) {
 
 /* ── 1 · HEADER — slug, tag, pills (lines 338–346) ──────────────────────────────────────────── */
 
-function headerBlock(name, tag, pills) {
+/* overhaul-r2 B3 — the breadcrumb, under the pills. Gaps are drawn muted and italic and SAY what is
+ * missing; they are never an empty slot. The KR's baseline → target line and a domain's standing
+ * goal sit beneath it, because "which metric does this move?" is the question the crumb answers. */
+function crumbBlock(c) {
+  if (!c || !c.parts || !c.parts.length) return null;
+  const kids = [];
+  c.parts.forEach((pt, i) => {
+    if (i) kids.push(el('span', { style: 'color:var(--muted-foreground)' }, ' › '));
+    kids.push(el('span', { title: pt.k, style: pt.gap ? 'font-style:italic;color:var(--muted-foreground)' : 'color:var(--foreground)' }, iv(pt.v)));
+  });
+  return el('div', { 'data-r2': 'crumb', style: 'margin-top:8px;font-size:11.5px;line-height:1.5' },
+    el('div', null, kids),
+    c.line ? el('div', { 'data-r2': 'kr-line', style: 'font-family:var(--mono);font-size:10.5px;color:var(--muted-foreground);margin-top:3px' }, iv('measure · ' + c.line)) : null,
+    c.goal ? el('div', { 'data-r2': 'domain-goal', style: 'font-size:11px;color:var(--muted-foreground);margin-top:3px' }, iv('standing goal · ' + c.goal)) : null,
+  );
+}
+
+function headerBlock(name, tag, pills, crumb) {
   return el('div', { style: 'padding:13px 14px 11px;border-bottom:1px solid var(--border)' },
     el('div', { style: 'font-family:var(--mono);font-size:15px;font-weight:600;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap' }, iv(name)),
     el('div', { style: 'font-size:12px;color:var(--muted-foreground);margin-top:2px' }, iv(tag)),
@@ -279,6 +297,7 @@ function headerBlock(name, tag, pills) {
       pills.map((pl) => el('span', {
         style: 'font-family:var(--mono);font-size:10px;padding:2px 6px;background:var(--secondary);border:1px solid var(--border);color:' + pl.c,
       }, iv(pl.t)))),
+    crumbBlock(crumb),
   );
 }
 
@@ -982,7 +1001,8 @@ function initBody(slug) {
     return out;
   }
 
-  out.push(headerBlock(slug, rec.tag || '', rec.pills || []));
+  out.push(headerBlock(slug, rec.tag || '', rec.pills || [], rec.crumb || null));
+  { const lc = lifecycleRow(repoOf(slug), slug); if (lc) out.push(lc); }
 
   if (rec.noLadder) {
     const ansC = FX.TONE[(rec.answer && rec.answer.tone) || 'info'] || FX.C.mut;