create-pmos 0.47.0 → 0.49.0

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

@@ -0,0 +1,397 @@
+/* pm/view-livenotes.js — the Live notes view tab: confirm each talking point as it arrives (jev-live-notes, Run 6).
+ *
+ * The PM types or pastes what is being said, one point per line. Each point comes back at once as a card with a guess: the
+ * open initiative that shares the most words with it, and an open question when one shares at least two. The guess is a
+ * LOCAL WORD MATCH made in the workspace process (lib/live-notes.js, the `local` path): no model, no Jev, no request leaves
+ * the machine, and a guess is never shown above "possible". The PM confirms it, picks another relation or initiative, or
+ * rejects it, one card at a time. Waiting cards are on top; decided cards drop below. Closing the session files a section in
+ * the day's requirements note and deletes the raw transcript.
+ *
+ * Reads and writes, all on this repository's workspace:
+ *   GET  /api/live-notes?ws=…            the sessions        GET  /api/live-notes?ws=…&session=…   one session, ranked, + its shortlist
+ *   POST /api/live-notes/session         start or resume     POST /api/live-notes/add              typed points
+ *   POST /api/live-notes/decide          accept · change · reject                POST /api/live-notes/close   file the note
+ * Points an agent session adds through the command (Runs 1 to 5) appear here on the next read. In the fixture nothing is read.
+ *
+ * LISTENING. "Start listening" uses the browser's speech recognition with `processLocally = true`: the audio is recognised on this
+ * device (Chrome 139 and later, after a one-time language download) and never sent anywhere. A browser that cannot recognise on
+ * the device is told so; there is no fallback to cloud recognition. Interim words show live and are never added. A final phrase
+ * is added at a sentence end or after a pause, and the server cleans it (fillers, stumbles, a sentence end) before it becomes a
+ * point. "This meeting is private" stops listening and marks the session, so Run 7 never sends a point from it.
+ *
+ * JEV (Run 7, D85). "Check with Jev" is the per-repository switch, default off. When it, a saved key and consent for the repository
+ * all hold, the server hands each cleaned point to Jev with the shortlist, and the card says "from Jev". When a gate is shut the
+ * view says which, in words, and the local word match answers. A point Jev could not answer gets the local guess and says so.
+ *   POST /api/live-notes/switch          { ws, live }: the switch; the reply carries the gates again
+ */
+import { el } from './dom.js';
+
+const BTN = 'font:500 12.5px var(--sans);background:transparent;color:var(--foreground);border:1px solid var(--input);border-radius:8px;padding:0 12px;height:30px;min-height:30px;display:inline-grid;place-items:center;cursor:pointer;flex:none;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 CHIP = 'font:500 12px var(--sans);background:transparent;color:var(--foreground);border:1px solid var(--border);border-radius:999px;padding:0 10px;height:26px;cursor:pointer;white-space:nowrap';
+const CHIP_ON = 'font:500 12px var(--sans);background:var(--foreground);color:var(--background);border:1px solid var(--foreground);border-radius:999px;padding:0 10px;height:26px;cursor:pointer;white-space:nowrap';
+const CARD = 'border:1px solid var(--border);background:var(--background);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:8px';
+const SELECT = 'font:13px var(--sans);background:var(--background);color:var(--foreground);border:1px solid var(--input);border-radius:8px;height:30px;padding:0 8px;max-width:100%';
+const NOTE = 'color:var(--muted-foreground);font-size:13px;line-height:1.5';
+const LBL = 'font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-foreground)';
+
+/** The relations the PM can pick, in words. `none` is the initiative picker's "none of these", not a chip. */
+export const RELATION_CHIPS = [
+  { key: 'validates', label: 'validates' }, { key: 'clarifies', label: 'clarifies' }, { key: 'extends', label: 'extends' },
+  { key: 'contradicts', label: 'contradicts' }, { key: 'answers', label: 'answers a question' },
+];
+const REFRESH_MS = 5000;
+
+/* ── module state: survives the redraw every setState causes ─────────────────────────────────── */
+const reads = new Map();      // key -> { state, data, error, at }
+const drafts = new Map();     // segment -> { initiative, relation, question } the PM's choice before Confirm
+const errors = new Map();     // segment -> the server's refusal, in words
+const sessionOf = new Map();  // ws -> the session shown
+let withheldNow = [];         // the last add's withheld points: { id, reason } — the text is never kept
+let banner = null;            // { tone, text }
+let anchorAsk = null;         // { ws, anchors: [{anchor, open}], error }
+let busy = false;
+let switching = false;
+let input = null;             // the textarea, kept across redraws so typing is not lost
+let dataMod = null; let dataTried = false;
+let listen = null;            // { ws, session, state: 'checking'|'on'|'needs-install'|'installing'|'unsupported'|'error', rec, interim, buffer, timer, lang, msg }
+const PAUSE_MS = 1500;        // a pause this long ends a point
+
+function read(ctx, key, url, ttl = REFRESH_MS) {
+  const hit = reads.get(key);
+  if (hit && (hit.state === 'loading' || Date.now() - hit.at < ttl)) return hit;
+  const next = { state: hit ? hit.state : 'loading', data: hit ? hit.data : null, error: hit ? hit.error : null, at: Date.now() };
+  reads.set(key, next);
+  fetch(url).then((r) => r.json()).then(
+    (d) => {
+      const same = hit && JSON.stringify(hit.data) === JSON.stringify(d);
+      reads.set(key, { state: d && d.ok === false ? 'error' : 'ok', data: d, error: d && d.error, at: Date.now() });
+      if (!same) ctx.setState({});   // redraw only when something changed, so a refresh does not disturb typing
+    },
+    (e) => { reads.set(key, { state: 'error', data: null, error: (e && e.message) || String(e), at: Date.now() }); ctx.setState({}); },
+  );
+  return next;
+}
+async function post(url, body) {
+  try { return await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) }).then((r) => r.json()); }
+  catch (e) { return { ok: false, error: (e && e.message) || 'the workspace server did not answer' }; }
+}
+const forget = (ws, session) => { reads.delete('sessions:' + ws); if (session) reads.delete('session:' + ws + ':' + session); };
+
+async function setJev(ctx, ws, on) {
+  if (switching) return;
+  switching = true; ctx.setState({});
+  const r = await post('/api/live-notes/switch', { ws, live: on });
+  switching = false;
+  if (!r || !r.ok) banner = { tone: 'bad', text: (r && r.error) || 'the switch did not change' };
+  else banner = null;
+  forget(ws, sessionOf.get(ws));
+  ctx.setState({});
+}
+const FLAG_WORDS = {
+  'jev-not-reached': 'Jev was not reached, so this is the local word match.',
+  'jev-unreadable': 'Jev\'s answer could not be read, so this is the local word match.',
+};
+
+/** Every point of a ranked session, flat: waiting first (newest on top), then decided (newest on top). */
+export function feedOf(ranked) {
+  const all = [];
+  for (const sec of (ranked && ranked.sections) || []) for (const x of sec.items) all.push(x);
+  const newest = (a, b) => String(b.at || '').localeCompare(String(a.at || '')) || String(b.segment).localeCompare(String(a.segment));
+  return { waiting: all.filter((x) => !x.decision).sort(newest), decided: all.filter((x) => x.decision).sort(newest) };
+}
+/** The counter's numbers. */
+export function countsOf(ranked) {
+  const f = feedOf(ranked);
+  const by = (a) => f.decided.filter((x) => x.decision.action === a).length;
+  return { confirmed: by('accept'), changed: by('change'), rejected: by('reject'), waiting: f.waiting.length, withheld: (ranked && ranked.withheld) || 0 };
+}
+
+/* ── actions ──────────────────────────────────────────────────────────────────────────────────── */
+async function startSession(ctx, ws, anchor) {
+  busy = true; banner = null; ctx.setState({});
+  const r = await post('/api/live-notes/session', { ws, anchor: anchor || null });
+  busy = false;
+  if (r && r.ok) { sessionOf.set(ws, r.session); anchorAsk = null; withheldNow = []; forget(ws, r.session); }
+  else if (r && Array.isArray(r.anchors)) anchorAsk = { ws, anchors: r.anchors, error: r.error };
+  else banner = { tone: 'bad', text: (r && r.error) || 'the session did not start' };
+  ctx.setState({});
+}
+async function addPoints(ctx, ws, session) {
+  const text = input ? input.value : '';
+  if (!text.trim() || busy) return;
+  busy = true; banner = null; ctx.setState({});
+  const r = await post('/api/live-notes/add', { ws, session, text });
+  busy = false;
+  if (r && r.ok) {
+    if (input) input.value = '';
+    withheldNow = r.withheld || [];
+    reads.set('session:' + ws + ':' + session, { state: 'ok', data: { ok: true, session, ranked: r.ranked, shortlist: (reads.get('session:' + ws + ':' + session) || {}).data?.shortlist || [] }, at: 0 });
+    forget(ws, null);
+  } else banner = { tone: 'bad', text: (r && r.error) || 'nothing was added' };
+  ctx.setState({});
+}
+async function decide(ctx, ws, session, item, action) {
+  const d = drafts.get(item.segment) || {};
+  const initiative = d.initiative || item.initiative;
+  const relation = initiative === 'none' ? null : (d.relation !== undefined ? d.relation : item.relation);
+  const question = relation === 'answers' ? (d.question != null ? d.question : (item.answers_question && item.answers_question.initiative === initiative ? item.answers_question.n : null)) : null;
+  if (action !== 'reject' && initiative !== 'none' && !relation) { errors.set(item.segment, 'Pick how this point relates to ' + initiative + ' first.'); ctx.setState({}); return; }
+  if (action !== 'reject' && relation === 'answers' && question == null) { errors.set(item.segment, '"Answers" needs the open question it answers. Pick one.'); ctx.setState({}); return; }
+  const same = initiative === item.initiative && relation === item.relation && (relation !== 'answers' || (item.answers_question && item.answers_question.n === question));
+  const body = { ws, session, segment: item.segment, action: action === 'reject' ? 'reject' : same ? 'accept' : 'change' };
+  if (body.action === 'change') Object.assign(body, { initiative, relation: relation || null, question });
+  const r = await post('/api/live-notes/decide', body);
+  if (r && r.ok) { errors.delete(item.segment); drafts.delete(item.segment); forget(ws, session); }
+  else errors.set(item.segment, (r && r.error) || 'not recorded');
+  ctx.setState({});
+}
+/* ── listening: on-device speech recognition only ─────────────────────────────────────────────── */
+const SRClass = () => (typeof window !== 'undefined' ? window.SpeechRecognition || window.webkitSpeechRecognition : null);
+function stopListening() {
+  if (!listen) return;
+  const l = listen; listen = null;
+  clearTimeout(l.timer);
+  if (l.rec) { l.rec.onend = null; try { l.rec.stop(); } catch { /* already stopped */ } }
+}
+async function flush(ctx, l) {
+  clearTimeout(l.timer); l.timer = null;
+  const text = l.buffer.join(' ').trim(); l.buffer = [];
+  if (!text) return;
+  // one point per sentence; the server cleans each line before it becomes a point
+  const lines = text.split(/(?<=[.?!])\s+/).join('\n');
+  const r = await post('/api/live-notes/add', { ws: l.ws, session: l.session, text: lines, source: 'speech' });
+  if (r && r.ok) { withheldNow = (r.withheld || []).concat(withheldNow).slice(0, 5); reads.delete('session:' + l.ws + ':' + l.session); forget(l.ws, null); }
+  else if (r && r.error && !/type a talking point/.test(r.error)) banner = { tone: 'bad', text: 'A spoken point was not added: ' + r.error };
+  ctx.setState({});
+}
+async function startListening(ctx, ws, session, install = false) {
+  stopListening();
+  const C = SRClass();
+  const lang = (typeof navigator !== 'undefined' && navigator.language) || 'en-US';
+  listen = { ws, session, state: 'checking', rec: null, interim: '', buffer: [], timer: null, lang, msg: null };
+  ctx.setState({});
+  const l = listen;
+  if (!C || typeof C.available !== 'function') {
+    l.state = 'unsupported';
+    l.msg = 'This browser cannot recognise speech on this device, and live notes never send audio away. Chrome 139 or later can; until then, type the points.';
+    ctx.setState({}); return;
+  }
+  try {
+    if (install) { l.state = 'installing'; ctx.setState({}); await C.install({ langs: [lang], processLocally: true }); }
+    const a = await C.available({ langs: [lang], processLocally: true });
+    if (listen !== l) return;
+    if (a === 'downloadable' || a === 'downloading') { l.state = 'needs-install'; l.msg = 'Recognising ' + lang + ' on this device needs a one-time download by the browser.'; ctx.setState({}); return; }
+    if (a !== 'available') { l.state = 'unsupported'; l.msg = 'This browser cannot recognise ' + lang + ' on this device, and live notes never send audio away. Type the points instead.'; ctx.setState({}); return; }
+  } catch (e) { l.state = 'error'; l.msg = 'Speech recognition did not start: ' + ((e && e.message) || e); ctx.setState({}); return; }
+  const rec = new C();
+  rec.lang = lang; rec.continuous = true; rec.interimResults = true; rec.processLocally = true;
+  rec.onresult = (e) => {
+    if (listen !== l) return;      // a result that arrives after Stop or Private is dropped, never added
+    let interim = ''; let ended = false;
+    for (let i = e.resultIndex; i < e.results.length; i++) {
+      const res = e.results[i]; const t = String((res[0] && res[0].transcript) || '').trim();
+      if (!t) continue;
+      if (res.isFinal) { l.buffer.push(t); if (/[.?!]$/.test(t)) ended = true; } else interim += (interim ? ' ' : '') + t;
+    }
+    l.interim = interim;
+    clearTimeout(l.timer);
+    if (ended) flush(ctx, l); else if (l.buffer.length) l.timer = setTimeout(() => flush(ctx, l), PAUSE_MS);
+    const live = typeof document !== 'undefined' && document.querySelector('[data-ln-interim]');
+    if (live) live.textContent = interim; else ctx.setState({});
+  };
+  rec.onerror = (e) => {
+    if (e && (e.error === 'no-speech' || e.error === 'aborted')) return;
+    l.state = 'error'; l.msg = 'Listening stopped: ' + ((e && (e.message || e.error)) || 'the browser gave no reason') + '.'; ctx.setState({});
+  };
+  // the browser ends a recognition after a silence; while the PM has not pressed Stop, it starts again
+  rec.onend = () => { if (listen === l && l.state === 'on') { try { rec.start(); } catch { /* it is starting */ } } };
+  l.rec = rec;
+  try { rec.start(); l.state = 'on'; } catch (e) { l.state = 'error'; l.msg = 'Listening did not start: ' + ((e && e.message) || e); }
+  ctx.setState({});
+}
+async function markPrivate(ctx, ws, session) {
+  const l = listen;
+  stopListening();
+  if (l) l.buffer = [];
+  const r = await post('/api/live-notes/private', { ws, session });
+  banner = r && r.ok ? { tone: 'ok', text: 'Marked private. Listening stopped, and nothing from this session will be sent to any service.' } : { tone: 'bad', text: (r && r.error) || 'not marked' };
+  forget(ws, session);
+  ctx.setState({});
+}
+
+async function closeSession(ctx, ws, session) {
+  if (typeof window !== 'undefined' && window.confirm && !window.confirm('End this session? The points are filed in today\'s requirements note and the raw transcript is deleted.')) return;
+  if (listen && listen.session === session) { const l = listen; stopListening(); await flush(ctx, l); }
+  const r = await post('/api/live-notes/close', { ws, session });
+  banner = r && r.ok ? { tone: 'ok', text: r.already ? 'This session was already closed.' : 'Filed in ' + r.note + '. Raw transcript: ' + r.transcript + '.' } : { tone: 'bad', text: (r && r.error) || 'the session did not close' };
+  forget(ws, session);
+  ctx.setState({});
+}
+
+/* ── drawing ──────────────────────────────────────────────────────────────────────────────────── */
+const titleOf = (list, id) => { const i = (list || []).find((x) => x.id === id); return i ? i.title : id; };
+
+function card(ctx, ws, session, item, shortlist, closed) {
+  const decided = item.decision;
+  const parts = [el('div', { 'data-ln-quote': '', style: 'font-size:14px;line-height:1.5' }, '"' + item.quote + '"')];
+  const guess = item.initiative && item.initiative !== 'none'
+    ? 'Guess: about ' + titleOf(shortlist, item.initiative) + ' (' + (item.initiative_band || 'possible') + ')' + (item.relation ? ', ' + item.relation : '')
+    : 'Guess: matches no open initiative';
+  const by = item.path === 'local' ? 'local word match' : item.path === 'jev' || item.path === 'jev-agent' ? 'Jev' : 'agent session';
+  parts.push(el('div', { 'data-ln-guess': '', style: NOTE }, guess + ' · from ' + by));
+  if (item.answers_question) parts.push(el('div', { 'data-ln-question': '', style: NOTE }, 'May answer open question ' + item.answers_question.n + ': ' + item.answers_question.text));
+  for (const fl of item.flags || []) if (FLAG_WORDS[fl]) parts.push(el('div', { 'data-ln-flag': fl, style: NOTE }, FLAG_WORDS[fl]));
+  if (decided) {
+    const d = decided;
+    const said = d.action === 'reject' ? 'You rejected this.' : d.action === 'change' && d.now
+      ? 'You changed it: ' + (d.now.initiative === 'none' ? 'matches no initiative' : d.now.relation + ' ' + titleOf(shortlist, d.now.initiative)) + '.'
+      : 'You confirmed it.';
+    parts.push(el('div', { 'data-ln-decision': d.action, style: 'font:500 12.5px var(--sans);color:var(--muted-foreground)' }, said));
+    return el('div', { 'data-ln-card': item.segment, 'data-ln-state': 'decided', style: CARD + ';opacity:.72' }, parts);
+  }
+  if (closed) return el('div', { 'data-ln-card': item.segment, 'data-ln-state': 'waiting', style: CARD }, parts);
+
+  const d = drafts.get(item.segment) || {};
+  const ini = d.initiative || item.initiative || 'none';
+  const rel = ini === 'none' ? null : (d.relation !== undefined ? d.relation : item.relation);
+  const setDraft = (patch) => { drafts.set(item.segment, { ...d, ...patch }); errors.delete(item.segment); ctx.setState({}); };
+  const options = [el('option', { value: 'none', selected: ini === 'none' }, 'none of these initiatives')]
+    .concat((shortlist || []).map((i) => el('option', { value: i.id, selected: ini === i.id }, i.title + ' (' + i.id + ')')));
+  parts.push(el('div', { style: 'display:flex;gap:8px;align-items:center;flex-wrap:wrap' },
+    el('span', { style: LBL }, 'initiative'),
+    el('select', { 'data-ln-ini': '', style: SELECT, onChange: (e) => setDraft({ initiative: e.target.value, question: null }) }, options)));
+  if (ini !== 'none') {
+    parts.push(el('div', { 'data-ln-rels': '', style: 'display:flex;gap:6px;align-items:center;flex-wrap:wrap' },
+      el('span', { style: LBL }, 'relation'),
+      RELATION_CHIPS.map((c) => el('button', { 'data-ln-rel': c.key, 'aria-pressed': rel === c.key ? 'true' : 'false', style: rel === c.key ? CHIP_ON : CHIP,
+        onClick: () => setDraft({ relation: c.key }) }, c.label))));
+    if (rel === 'answers') {
+      const qs = ((shortlist || []).find((i) => i.id === ini) || {}).questions || [];
+      const cur = d.question != null ? d.question : (item.answers_question && item.answers_question.initiative === ini ? item.answers_question.n : null);
+      parts.push(qs.length
+        ? el('select', { 'data-ln-q': '', style: SELECT, onChange: (e) => setDraft({ question: e.target.value ? Number(e.target.value) : null }) },
+          [el('option', { value: '', selected: cur == null }, 'which open question?')].concat(qs.map((q, n) => el('option', { value: String(n + 1), selected: cur === n + 1 }, (n + 1) + '. ' + q.slice(0, 120)))))
+        : el('div', { style: NOTE }, titleOf(shortlist, ini) + ' has no open questions, so this point cannot answer one.'));
+    }
+  }
+  if (errors.get(item.segment)) parts.push(el('div', { 'data-ln-error': '', role: 'alert', style: 'color:var(--destructive);font-size:12.5px' }, errors.get(item.segment)));
+  parts.push(el('div', { style: 'display:flex;gap:8px' },
+    el('button', { 'data-ln-action': 'confirm', style: BTNP, onClick: () => decide(ctx, ws, session, item, 'confirm') }, 'Confirm'),
+    el('button', { 'data-ln-action': 'reject', style: BTN, hover: 'background:var(--accent)', onClick: () => decide(ctx, ws, session, item, 'reject') }, 'Reject')));
+  return el('div', { 'data-ln-card': item.segment, 'data-ln-state': 'waiting', style: CARD }, parts);
+}
+
+export function renderBoard(inner, ctx) {
+  const { FIXTURE } = ctx;
+  const repo = (ctx.tab && ctx.tab.repo) || ctx.repo || null;
+  let ws = null;
+  if (!FIXTURE) {
+    if (!dataTried) { dataTried = true; import('./data.js').then((m) => { dataMod = m; ctx.setState({}); }).catch(() => {}); }
+    if (dataMod && dataMod.wsOf) ws = dataMod.wsOf(repo);
+    if (!ws && ctx.state && ctx.state.product === repo) ws = ctx.state.wsId || null;
+  }
+  const typing = typeof document !== 'undefined' && input && document.activeElement === input;
+  const caret = typing ? [input.selectionStart, input.selectionEnd] : null;
+
+  const sess = !FIXTURE && ws ? read(ctx, 'sessions:' + ws, '/api/live-notes?ws=' + encodeURIComponent(ws), 15000) : null;
+  const jev = (sess && sess.data && sess.data.jev) || null;
+  const jevOn = !!(jev && jev.open);
+  inner.appendChild(el('div', { 'data-ln-part': 'header' },
+    el('div', { style: 'font:600 22px var(--sans);line-height:1.45' }, 'Live notes'),
+    jevOn
+      ? el('div', { 'data-ln-jev-on': '', style: NOTE },
+        'Listen or type what is being said. Each point is cleaned up and checked by Jev against your open initiatives; you confirm it, change it or reject it. '
+        + jev.note + ' Nothing changes an initiative until you confirm.')
+      : el('div', { 'data-ln-local': '', style: NOTE },
+        'Type what is being said, one point per line. Each point gets a guess at once; you confirm it, change it or reject it. '
+        + 'Guesses here are a local word match. Nothing leaves this machine, and nothing changes an initiative.')));
+  if (FIXTURE || !ws) { inner.appendChild(el('div', { style: NOTE + ';margin-top:12px' }, FIXTURE ? 'The fixture reads no sessions.' : 'Select a repository to take notes against.')); return; }
+
+  const sessions = (sess.data && sess.data.sessions) || [];
+  let current = sessionOf.get(ws);
+  if (!current && sessions.length) { const open = sessions.filter((s) => !s.closed); current = (open[open.length - 1] || sessions[sessions.length - 1]).session; sessionOf.set(ws, current); }
+
+  const bar = [el('span', { style: LBL }, 'session')];
+  if (sessions.length) {
+    bar.push(el('select', { 'data-ln-session': '', style: SELECT, onChange: (e) => { stopListening(); sessionOf.set(ws, e.target.value); withheldNow = []; banner = null; ctx.setState({}); } },
+      sessions.slice().reverse().map((s) => el('option', { value: s.session, selected: s.session === current }, s.session + (s.closed ? ' · closed' : '') + ' · ' + s.points + ' points'))));
+  } else bar.push(el('span', { style: NOTE }, sess.state === 'loading' ? 'reading …' : 'no sessions yet'));
+  bar.push(el('button', { 'data-ln-new': '', style: BTN, hover: 'background:var(--accent)', disabled: busy, onClick: () => { stopListening(); startSession(ctx, ws, null); } }, 'New session'));
+  inner.appendChild(el('div', { 'data-ln-part': 'sessions', style: 'display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px' }, bar));
+  if (jev) {
+    const sw = !!jev.switch;
+    const why = jev.open ? 'Jev is checking new points.'
+      : sw ? 'Jev is not used yet. ' + (jev.sentence || '')
+      : 'Jev is off. Points get the local word match only.';
+    inner.appendChild(el('div', { 'data-ln-part': 'jev', style: 'display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px' },
+      el('span', { style: LBL }, 'jev'),
+      el('button', { 'data-ln-jev': sw ? 'on' : 'off', 'aria-pressed': sw ? 'true' : 'false', disabled: switching, style: sw ? CHIP_ON : CHIP,
+        onClick: () => setJev(ctx, ws, !sw) }, sw ? 'Check with Jev: on' : 'Check with Jev: off'),
+      el('span', { 'data-ln-jev-state': jev.open ? 'open' : 'shut', style: NOTE }, why.trim())));
+  }
+
+  if (anchorAsk && anchorAsk.ws === ws) {
+    let pick = anchorAsk.anchors[0] ? anchorAsk.anchors[0].anchor : '';
+    inner.appendChild(el('div', { 'data-ln-part': 'anchor', style: CARD + ';margin-top:10px' },
+      el('div', { style: NOTE }, anchorAsk.error),
+      el('div', { style: 'display:flex;gap:8px;align-items:center;flex-wrap:wrap' },
+        el('select', { 'data-ln-anchor': '', style: SELECT, onChange: (e) => { pick = e.target.value; } },
+          anchorAsk.anchors.map((a) => el('option', { value: a.anchor }, a.anchor + ' · ' + a.open + ' open'))),
+        el('button', { 'data-ln-start': '', style: BTNP, onClick: () => startSession(ctx, ws, pick) }, 'Start with this anchor'))));
+  }
+  if (banner) inner.appendChild(el('div', { 'data-ln-banner': banner.tone, role: banner.tone === 'bad' ? 'alert' : 'status', style: 'margin-top:10px;font-size:13px;color:' + (banner.tone === 'bad' ? 'var(--destructive)' : 'var(--foreground)') }, banner.text));
+  if (!current) return;
+
+  const one = read(ctx, 'session:' + ws + ':' + current, '/api/live-notes?ws=' + encodeURIComponent(ws) + '&session=' + encodeURIComponent(current));
+  if (!one.data || !one.data.ranked) { inner.appendChild(el('div', { style: NOTE + ';margin-top:12px' }, one.state === 'error' ? 'Could not read this session: ' + one.error : 'reading the session …')); return; }
+  const ranked = one.data.ranked; const shortlist = one.data.shortlist || [];
+  const closed = !!ranked.closed;
+  const c = countsOf(ranked);
+  inner.appendChild(el('div', { 'data-ln-counter': '', style: 'display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;font:500 12.5px var(--sans)' },
+    [['confirmed', c.confirmed], ['changed', c.changed], ['rejected', c.rejected], ['waiting', c.waiting], ['withheld', c.withheld]]
+      .map(([k, n]) => el('span', { 'data-ln-count': k }, n + ' ' + k))));
+  if (ranked.paused) inner.appendChild(el('div', { 'data-ln-paused': '', role: 'status', style: NOTE }, ranked.paused.reason));
+  if (ranked.private && jevOn) inner.appendChild(el('div', { 'data-ln-private-jev': '', style: NOTE }, 'Nothing from this meeting goes to Jev, because it is marked private.'));
+
+  if (!closed) {
+    // listening: on-device recognition, a visible "notes are being taken", Stop and Private
+    const mine = listen && listen.ws === ws && listen.session === current ? listen : null;
+    const lp = [];
+    if (ranked.private) lp.push(el('span', { 'data-ln-private': '', style: NOTE }, 'This meeting is marked private: listening is off for it.'));
+    else if (mine && mine.state === 'on') {
+      lp.push(el('span', { 'data-ln-listening': 'on', role: 'status', style: 'font:600 12.5px var(--sans);color:var(--destructive)' }, '● Listening: notes are being taken'));
+      lp.push(el('button', { 'data-ln-stop': '', style: BTN, hover: 'background:var(--accent)', onClick: () => { const l = listen; stopListening(); if (l) flush(ctx, l); ctx.setState({}); } }, 'Stop'));
+      lp.push(el('button', { 'data-ln-mark-private': '', style: BTN, hover: 'background:var(--accent)', onClick: () => markPrivate(ctx, ws, current) }, 'This meeting is private'));
+    } else {
+      lp.push(el('button', { 'data-ln-listen': '', style: BTNP, disabled: !!(mine && (mine.state === 'checking' || mine.state === 'installing')), onClick: () => startListening(ctx, ws, current) },
+        mine && mine.state === 'checking' ? 'Starting …' : mine && mine.state === 'installing' ? 'Downloading …' : 'Start listening'));
+      if (mine && mine.state === 'needs-install') lp.push(el('button', { 'data-ln-install': '', style: BTN, onClick: () => startListening(ctx, ws, current, true) }, 'Download for ' + mine.lang));
+      lp.push(el('span', { style: NOTE }, 'Speech is recognised on this device; no audio leaves it.'));
+    }
+    inner.appendChild(el('div', { 'data-ln-part': 'listen', style: 'display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px' }, lp));
+    if (mine && mine.msg && mine.state !== 'on') inner.appendChild(el('div', { 'data-ln-listen-msg': mine.state, style: NOTE }, mine.msg));
+    if (mine && mine.state === 'on') inner.appendChild(el('div', { 'data-ln-interim': '', style: 'min-height:20px;font-size:13px;font-style:italic;color:var(--muted-foreground)' }, mine.interim || ''));
+    if (!input) {
+      input = el('textarea', { 'data-ln-input': '', rows: '3', placeholder: 'One talking point per line. Enter adds; Shift+Enter starts a new line.',
+        style: 'font:14px var(--sans);width:100%;box-sizing:border-box;background:var(--background);color:var(--foreground);border:1px solid var(--input);border-radius:8px;padding:8px 10px;resize:vertical' });
+    }
+    input.onkeydown = (e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); addPoints(ctx, ws, current); } };
+    inner.appendChild(el('div', { 'data-ln-part': 'input', style: 'display:flex;flex-direction:column;gap:8px;margin-top:12px' }, input,
+      el('div', { style: 'display:flex;gap:8px;align-items:center' },
+        el('button', { 'data-ln-add': '', style: BTNP, disabled: busy, onClick: () => addPoints(ctx, ws, current) }, busy ? 'Adding …' : 'Add'),
+        el('span', { style: 'flex:1' }),
+        el('button', { 'data-ln-close': '', style: BTN, hover: 'background:var(--accent)', onClick: () => closeSession(ctx, ws, current) }, 'End and file the note'))));
+    if (caret) requestAnimationFrame(() => { try { input.focus(); input.setSelectionRange(caret[0], caret[1]); } catch { /* the textarea is gone */ } });
+  } else inner.appendChild(el('div', { 'data-ln-closed': '', style: NOTE + ';margin-top:12px' }, 'This session is closed. Its points are filed in the requirements note; start a new session to take more notes.'));
+
+  for (const w of withheldNow) inner.appendChild(el('div', { 'data-ln-withheld': w.id, style: CARD + ';margin-top:8px;color:var(--muted-foreground)' }, 'A point was withheld and not kept: it ' + w.reason + '.'));
+
+  const f = feedOf(ranked);
+  const list = el('div', { 'data-ln-part': 'feed', style: 'display:flex;flex-direction:column;gap:8px;margin-top:12px' });
+  if (!f.waiting.length && !f.decided.length) list.appendChild(el('div', { style: NOTE }, 'No points yet.'));
+  for (const x of f.waiting) list.appendChild(card(ctx, ws, current, x, shortlist, closed));
+  if (f.decided.length) list.appendChild(el('div', { style: LBL + ';margin-top:8px' }, 'decided'));
+  for (const x of f.decided) list.appendChild(card(ctx, ws, current, x, shortlist, closed));
+  inner.appendChild(list);
+}

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

@@ -0,0 +1,122 @@
+/* pm/view-memory.js — the Memory view, drawn from planning/design/cockpit-mockup/ViewMemory.dc.html.
+ *
+ * PRD workspace-cockpit-nav, Run 3 (R4). The board is a header with the actions on the right, a row of badges, the notes as
+ * cards and a closing note. The notes and every action are the view's existing list (modes-live.js `memoryLive`): this module
+ * draws it into a host, moves its action bar into the header and restyles its rows as cards. No node is removed, so every
+ * `data-r9` hook and every live behaviour stays as it was. Only the frame is new.
+ *
+ * The badges are read off the list once it is drawn, so they come from the same GET /api/memory as the notes and never
+ * disagree with them. The board's "used by N sessions" and the note kinds (preference, standard, lesson, fact) have no backing
+ * in this app, so they are not drawn. In the fixture the prototype's list is drawn under the header, unchanged, and the badges
+ * are not read.
+ */
+import { el } from './dom.js';
+
+const BTN = 'font:500 12.5px var(--sans);background:transparent;color:var(--foreground);border:1px solid var(--input);border-radius:8px;padding:0 12px;height:30px;min-height:30px;display:inline-grid;place-items:center;cursor:pointer;flex:none';
+const BTNP = 'font:500 12.5px var(--sans);background:var(--foreground);color:var(--background);border:0;border-radius:8px;padding:0 12px;height:30px;min-height:30px;display:inline-grid;place-items:center;cursor:pointer;flex:none';
+const 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';
+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 ENTRY = 'display:flex;flex-direction:column;gap:6px;width:100%;box-sizing:border-box;text-align:left;border:1px solid var(--border);border-radius:10px;padding:12px 14px;background:var(--background);min-height:0';
+const LBL = 'font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-foreground);padding:8px 0 0';
+const NOTE = 'color:var(--muted-foreground);font-size:13px;line-height:1.5';
+
+const badge = (text, tone, key) => el('span', { style: BADGE + (tone ? TONE[tone] : ''), 'data-board-badge': key }, String(text));
+
+/** The badges row. It is read off the list this module just drew, so the badges and the notes always come from the same read
+ * of GET /api/memory and agree after every action. Before that read succeeds the list states its own status, so no badge is
+ * drawn. Nothing is shown that the read does not hold. */
+function badges(list) {
+  if (!list.querySelector('[data-r9="usage-memory"]')) return null;
+  const wire = list.querySelector('[data-r9="wire"]');
+  const appr = list.querySelector('[data-r9="approval"]');
+  const wired = !!wire && /wired \u2713/.test(wire.textContent || '');
+  const n = list.querySelectorAll('[data-r9="entry"]').length;
+  const pending = list.querySelectorAll('[data-r9="pending"]').length;
+  const approval = !!appr && /approval on/.test(appr.textContent || '');
+  return el('div', { 'data-board-part': 'badges', style: 'display:flex;gap:6px;flex-wrap:wrap' },
+    wired ? badge('wired into CLAUDE.md', 's', 'wired') : badge('not wired into CLAUDE.md', 'w', 'wired'),
+    badge(n + (n === 1 ? ' note' : ' notes'), null, 'count'),
+    badge('memory.jsonl \u00b7 append-only', null, 'ledger'),
+    pending ? badge(pending + ' waiting for you', 'w', 'pending') : null,
+    badge('agent notes ' + (approval ? 'wait for your approval' : 'apply at once'), null, 'approval'));
+}
+
+/** Restyle the existing list in place: its bar goes into the header, its rows become cards. Nothing is removed. */
+function restyle(list, actions) {
+  const bar = list.querySelector('[data-r9="memory-bar"]');
+  // the list's wrapper, when it drew one (a failed or pending read returns its parts unwrapped)
+  const first = list.firstElementChild;
+  const wrap = first && bar && first !== bar && first.contains(bar) ? first : null;
+  if (bar) {
+    bar.setAttribute('style', 'display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:flex-end');
+    for (const b of bar.querySelectorAll('button')) {
+      const k = b.getAttribute('data-r9');
+      b.setAttribute('style', k === 'add' ? BTNP : BTN);
+    }
+    // the board's order: the secondary actions first, the primary action last
+    const add = bar.querySelector('[data-r9="add"]');
+    if (add) bar.appendChild(add);
+    actions.appendChild(bar);
+  }
+  if (wrap) {
+    wrap.setAttribute('style', 'display:flex;flex-direction:column;gap:10px');
+    // the list's closing line has no hook; give it the board's note style
+    for (const k of wrap.children) if (!k.hasAttribute('data-r9')) k.setAttribute('style', NOTE);
+  }
+  for (const row of list.querySelectorAll('[data-r9="entry"],[data-r9="elsewhere"],[data-r9="pending"]')) {
+    row.setAttribute('style', ENTRY);
+    row.setAttribute('data-board-card', row.getAttribute('data-r9'));
+    const [text, meta, btns] = row.children;
+    if (text) text.setAttribute('style', 'display:block;font-size:13px;line-height:1.5;color:var(--foreground)');
+    if (meta) meta.setAttribute('style', 'display:block;font:11px var(--mono);color:var(--muted-foreground)');
+    if (btns) {
+      btns.setAttribute('style', 'display:flex;gap:6px;flex-wrap:wrap');
+      for (const b of btns.querySelectorAll('button')) b.setAttribute('style', SMALL);
+    }
+  }
+  for (const lab of list.querySelectorAll('[data-r9^="usage-"],[data-r9$="-label"]')) {
+    const tone = lab.getAttribute('data-r9') === 'blocked-label' ? ';color:var(--destructive)' : '';
+    lab.setAttribute('style', LBL + tone);
+  }
+  for (const note of list.querySelectorAll('[data-r9="empty"],[data-r9="blocked"]')) note.setAttribute('style', NOTE);
+  const memNote = list.querySelector('[data-r9="note"]');
+  if (memNote) memNote.setAttribute('style', NOTE + ';color:var(--destructive)');
+}
+
+export function renderBoard(inner, ctx) {
+  const { FIXTURE, state } = ctx;
+  const repo = state.product || null;
+
+  const actions = el('div', { 'data-board-part': 'toolbar', style: 'display:flex;gap:8px;flex-wrap:wrap;align-items:center' });
+  const header = el('div', { 'data-board-part': 'header', style: 'display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap' },
+    el('div', null,
+      el('div', { 'data-board-title': '', style: 'font:600 22px var(--sans);line-height:1.45' }, 'Memory'),
+      el('div', { 'data-board-subtitle': '', style: 'color:var(--muted-foreground)' },
+        'Curated notes agents read before they work in ' + (repo || 'this repository'))),
+    actions);
+
+  const list = el('div', { 'data-board-section': 'notes', style: 'display:flex;flex-direction:column;gap:10px;max-width:900px' });
+  ctx.renderMode(list);
+
+  let part = null; let foot = null;
+  if (FIXTURE) part = el('div', { 'data-board-part': 'badges', style: NOTE }, 'The repository memory is not read in the fixture.');
+  else {
+    // read the badges and the approval setting before the bar moves into the header
+    part = badges(list);
+    const appr = list.querySelector('[data-r9="approval"]');
+    if (part) {
+      foot = el('div', { 'data-board-part': 'note', style: NOTE }, appr && /approval on/.test(appr.textContent || '')
+        ? 'You add notes here, and agents propose them. A note an agent proposes waits here until you approve it.'
+        : 'You add notes here, and agents add them too. Turn approval on to keep an agent\u2019s note pending until you approve it.');
+    }
+    restyle(list, actions);
+  }
+
+  inner.appendChild(el('div', { 'data-board': 'memory', style: 'display:flex;flex-direction:column;gap:14px;padding:4px 6px;font-size:13px;line-height:1.5;color:var(--foreground)' },
+    header, part, list, foot));
+}