create-pmos 0.52.0 → 0.53.0

package/workspace/public/pm/tab-task.js

@@ -1,86 +0,0 @@
-/* pm/tab-task.js — the task tab body: one task, stated the way a ticket states one.
- *
- * A port of the prototype's task pane (template lines 940–979, derivation 2008–2018). The five
- * fields are fixed and standardized — instruction · input · expected outcome · evaluation · output
- * — because a task an agent is asked to run is only reviewable if what it was told, what it was
- * given, what it owed and how it will be judged are all on one page.
- *
- * The output field is the honest one: it is a button to the artifact ONLY when an artifact exists.
- * Where nothing has been produced it says so in as many words rather than showing an empty row that
- * reads like a file nobody can find. Nothing here is invented per task — the panel renders the tab
- * record panel 3 derived, and a field the engine has no evidence for arrives empty.
- */
-
-import { el, setChildren } from './dom.js';
-import * as FX from './fixture.js';
-import { openDoc } from './panel-initiatives.js';
-
-/** `{{ expr }}` — one interpolated value in its own span, as the prototype's runtime emits it. */
-const iv = (v) => el('span', null, v === null || v === undefined ? '' : String(v));
-
-const LABEL = 'font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-foreground);margin-bottom:5px';
-/* The output label carries 6px, not 5px. It is not a typo in the design and it is not corrected. */
-const LABEL_OUT = 'font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-foreground);margin-bottom:6px';
-const PROSE = 'font-size:14px;line-height:1.6;text-wrap:pretty';
-const MONO = 'font-family:var(--mono);font-size:12.5px;color:var(--muted-foreground);overflow-wrap:anywhere';
-
-/** One labelled field: a mono uppercase label over its value. */
-const field = (label, value, labelStyle, valueStyle) =>
-  el('div', null,
-    el('div', { style: labelStyle || LABEL }, label),
-    el('div', { style: valueStyle || PROSE }, iv(value)),
-  );
-
-/**
- * Render the task pane for `tab` into `host` — the pane element panel 4 keeps for this tab.
- * The pane has no editable state of its own, so it is rebuilt whole on each paint.
- */
-export function mountTask(host, tab) {
-  const hasOutput = !!tab.output && tab.output !== '—';
-  const statusColor = FX.TASK_STATUS_COLOR[tab.status] || FX.C.mut;
-
-  const output = hasOutput
-    ? el('button', {
-      onClick: () => openDoc(tab.slug, tab.output, 'FILE'),
-      style: 'display:flex;gap:8px;align-items:center;font-family:var(--mono);font-size:12px;padding:7px 11px;background:var(--card);border:1px solid var(--border);color:var(--info);min-height:32px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap',
-      hover: 'border-color:var(--ring)',
-    },
-      el('span', { style: 'flex:none;font-size:9px;letter-spacing:.1em;color:var(--muted-foreground)' }, 'OPEN'),
-      iv(tab.output),
-    )
-    : el('div', { style: 'font-size:13px;color:var(--muted-foreground);font-style:italic' },
-      // Only a step that is not done is "not produced yet". A done step with no file says what decided it.
-      tab.status === 'done'
-        ? 'this step read no file of its own — the rule and evidence above are its result'
-        : 'no artifact yet — produced when the agent runs this task');
-
-  const body = el('div', {
-    style: 'flex:1;min-height:0;overflow-y:auto;background:var(--background);color:var(--foreground);padding:22px 26px 60px;font-size:14px;line-height:1.65',
-  },
-    el('div', { style: 'max-width:76ch' },
-      el('div', { style: 'display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:5px' },
-        el('span', {
-          style: 'font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-foreground)',
-        }, iv(tab.phase), ' · task'),
-        el('span', {
-          style: 'font-family:var(--mono);font-size:10px;padding:2px 8px;border:1px solid var(--border);color:' + statusColor,
-        }, iv(tab.status)),
-      ),
-      el('div', {
-        style: 'font-size:20px;font-weight:600;letter-spacing:-.01em;margin-bottom:20px;text-wrap:pretty',
-      }, iv(tab.title)),
-      el('div', { style: 'display:flex;flex-direction:column;gap:16px' },
-        field('instruction to the agent', tab.instruction),
-        field('input', tab.input, LABEL, MONO),
-        field('expected outcome', tab.expect),
-        field('evaluation', tab.evalNote),
-        el('div', null, el('div', { style: LABEL_OUT }, 'output'), output),
-      ),
-    ),
-  );
-
-  setChildren(host, [body]);
-  return host;
-}
-
-export default mountTask;

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

@@ -1,141 +0,0 @@
-/* pm/view-guide.js — the User guide view, drawn from planning/design/cockpit-mockup/ViewGuide.dc.html.
- *
- * PRD workspace-cockpit-nav, Run 3 (R4). The board is two panes. On the left, a 280px column with a search field and the
- * list of pages. On the right, the page that is chosen, with its title and its text.
- *
- * The list is the view's existing list (modes-live.js `guideList`, from GET /api/guide), placed in the left column and
- * restyled. No node is removed, so every `data-r18="guide-page"` row keeps its `data-page` and its press: a row still opens
- * the page as a read-only doc tab. This module adds a search that hides the rows that do not match, and remembers the page
- * opened last so the right pane can show it. The right pane reads the page from GET /api/guide?page=, the same route the doc
- * tab uses, and draws it with the doc tab's markdown renderer. A link to another guide page shows that page here.
- *
- * The board's group labels (Start, Working, Control) and its page titles are not in the guide's data, so the column shows
- * the pages in the order the server gives them, under one label. In the fixture the guide is not read, and the board says so.
- */
-import { el } from './dom.js';
-import { mdRender } from './markdown.js';
-
-const TTL = 15000;
-const pages = new Map();     // page -> { state: 'loading'|'ok'|'error', text, error, at }
-let chosen = null;           // the page opened last from this board
-let query = '';              // the search text; kept so a redraw keeps the filter
-
-const LBL = 'font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-foreground)';
-const ITEM = 'display:flex;align-items:center;width:100%;box-sizing:border-box;min-height:36px;padding:6px 12px;border:0;border-radius:8px;font:500 13px var(--sans);line-height:1.35;text-align:left;color:var(--foreground);background:transparent;cursor:pointer';
-const PILL = 'font:500 11px var(--sans);border:1px solid var(--border);border-radius:999px;padding:0 8px;line-height:18px;background:transparent;color:var(--foreground);cursor:pointer';
-const NOTE = 'color:var(--muted-foreground);font-size:13px;line-height:1.5';
-
-/** The board's own read of one guide page, read again after 15 seconds. */
-function readPage(ctx, page) {
-  const hit = pages.get(page);
-  if (hit && (hit.state === 'loading' || Date.now() - hit.at < TTL)) return hit;
-  const next = { state: hit ? hit.state : 'loading', text: hit ? hit.text : null, error: null, at: hit ? hit.at : 0 };
-  if (!hit || hit.state !== 'ok') next.state = 'loading';
-  pages.set(page, next);
-  fetch('/api/guide?page=' + encodeURIComponent(page))
-    .then((r) => (r.ok ? r.text() : Promise.reject(new Error('no such guide page'))))
-    .then((text) => { pages.set(page, { state: 'ok', text, error: null, at: Date.now() }); ctx.setState({}); },
-      (e) => { pages.set(page, { state: 'error', text: null, error: (e && e.message) || String(e), at: Date.now() }); ctx.setState({}); });
-  return next;
-}
-
-/** Hide the rows that do not match the search. Hiding is a style; the rows stay in the list. */
-function filter(list) {
-  const q = query.trim().toLowerCase();
-  let shown = 0;
-  for (const row of list.querySelectorAll('[data-r18="guide-page"]')) {
-    const hit = !q || (row.textContent || '').toLowerCase().includes(q) || (row.getAttribute('data-page') || '').includes(q);
-    row.style.display = hit ? '' : 'none';
-    if (hit) shown++;
-  }
-  return shown;
-}
-
-function restyle(list, current) {
-  const wrap = list.querySelector('[data-r18="guide-list"]');
-  if (wrap) {
-    wrap.setAttribute('style', 'display:flex;flex-direction:column;gap:2px');
-    // the list's opening line has no hook; it reads as the column's small print
-    for (const k of wrap.children) if (!k.hasAttribute('data-r18')) k.setAttribute('style', NOTE + ';font-size:12px;padding:2px 12px 8px');
-  }
-  for (const row of list.querySelectorAll('[data-r18="guide-page"]')) {
-    const on = row.getAttribute('data-page') === current;
-    row.setAttribute('style', ITEM + (on ? ';background:var(--accent)' : ''));
-    if (on) row.setAttribute('data-board-chosen', ''); else row.removeAttribute('data-board-chosen');
-  }
-  for (const n of list.querySelectorAll('[data-r18="guide-empty"]')) n.setAttribute('style', NOTE + ';padding:4px 12px');
-}
-
-/** The right pane: the chosen page, read from the server and drawn with the doc tab's renderer. */
-function pagePane(ctx, list, page, title) {
-  if (!page) return el('div', { 'data-board-part': 'page', style: NOTE }, 'Choose a page on the left.');
-  const r = readPage(ctx, page);
-  const row = list.querySelector('[data-r18="guide-page"][data-page="' + page.replace(/"/g, '') + '"]');
-  const actions = el('div', { 'data-board-part': 'actions', style: 'display:flex;gap:8px;flex-wrap:wrap;margin-top:6px' },
-    row ? el('button', { style: PILL, hover: 'background:var(--accent)', 'data-board-action': 'open-tab', onClick: () => row.click() }, 'Open in a tab') : null,
-    el('button', { style: PILL, hover: 'background:var(--accent)', 'data-board-action': 'open-today', onClick: () => ctx.openView('today') }, 'Open Today'));
-  if (r.state === 'loading' && !r.text) {
-    return el('div', { 'data-board-part': 'page', 'data-page': page, style: 'display:flex;flex-direction:column;gap:12px' },
-      el('div', { style: LBL }, 'Guide'), el('div', { style: NOTE }, 'Reading the page …'));
-  }
-  if (r.state === 'error') {
-    return el('div', { 'data-board-part': 'page', 'data-page': page, style: 'display:flex;flex-direction:column;gap:12px' },
-      el('div', { style: LBL }, 'Guide'), el('div', { style: NOTE + ';color:var(--destructive)' }, 'The page could not be read: ' + r.error));
-  }
-  const known = new Set([...list.querySelectorAll('[data-r18="guide-page"]')].map((n) => n.getAttribute('data-page')));
-  const doc = mdRender(r.text, {
-    dir: [],
-    // a link to another guide page shows that page here; any other link is left as text by the renderer's rules
-    onDoc: (p) => { const name = String(p).replace(/\.md$/, '').split('/').pop(); if (known.has(name)) { chosen = name; ctx.setState({}); } },
-  });
-  return el('div', { 'data-board-part': 'page', 'data-page': page, style: 'display:flex;flex-direction:column;gap:12px;min-width:0' },
-    el('div', { style: LBL }, 'Guide'),
-    el('div', { 'data-board-title': '', style: 'font:600 26px var(--sans);line-height:1.3' }, doc.title || title || page),
-    actions,
-    el('div', { 'data-board-part': 'page-body', style: 'max-width:640px;font-size:14px;line-height:1.6;color:var(--foreground)' }, doc.blocks.map((b) => el('div', null, b))));
-}
-
-export function renderBoard(inner, ctx) {
-  const { FIXTURE } = ctx;
-
-  const list = el('div', { 'data-board-section': 'pages', style: 'display:flex;flex-direction:column;gap:2px' });
-  ctx.renderMode(list);
-  // remember the page opened last; the row's own press still opens it as a tab
-  list.addEventListener('click', (e) => {
-    const row = e.target && e.target.closest ? e.target.closest('[data-r18="guide-page"]') : null;
-    if (row) chosen = row.getAttribute('data-page');
-  }, true);
-
-  const rows = [...list.querySelectorAll('[data-r18="guide-page"]')];
-  const names = rows.map((r) => r.getAttribute('data-page'));
-  if (!chosen || !names.includes(chosen)) chosen = names.includes('index') ? 'index' : (names[0] || null);
-  restyle(list, chosen);
-  const shown = filter(list);
-
-  const search = el('input', {
-    type: 'search', placeholder: 'Search the guide…', value: query, 'data-board-part': 'search', 'aria-label': 'Search the guide',
-    style: 'width:100%;box-sizing:border-box;height:32px;min-height:32px;padding:0 10px;border:1px solid var(--input);border-radius:8px;background:transparent;color:var(--foreground);font:13px var(--sans)',
-    onInput: (e) => {
-      query = e.target.value;
-      const n = filter(list);
-      const none = side.querySelector('[data-board-part="no-match"]');
-      if (none) none.style.display = n || !rows.length ? 'none' : '';
-    },
-  });
-  const noMatch = el('div', { 'data-board-part': 'no-match', style: NOTE + ';padding:4px 12px' + (shown || !rows.length ? ';display:none' : '') }, 'No page matches the search.');
-
-  const side = el('div', { 'data-board-part': 'sidebar',
-    style: 'width:280px;flex:none;box-sizing:border-box;border-right:1px solid var(--border);background:var(--sidebar);padding:14px;display:flex;flex-direction:column;gap:6px' },
-    search,
-    el('div', { style: LBL + ';padding:8px 12px 2px' }, 'Pages'),
-    FIXTURE ? el('div', { style: NOTE + ';padding:4px 12px' }, 'The guide is not read in the fixture.') : list,
-    noMatch);
-
-  const chosenRow = rows.find((r) => r.getAttribute('data-page') === chosen);
-  const main = el('div', { 'data-board-part': 'main', style: 'flex:1 1 0;min-width:0;padding:26px 40px;display:flex;flex-direction:column;gap:12px' },
-    FIXTURE ? el('div', { style: NOTE }, 'The guide is not read in the fixture.') : pagePane(ctx, list, chosen, chosenRow ? (chosenRow.textContent || '').trim() : null));
-
-  inner.appendChild(el('div', { 'data-board': 'guide',
-    style: 'display:flex;min-height:560px;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--card);color:var(--foreground);font-size:14px;line-height:1.6' },
-    side, main));
-}

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

@@ -1,225 +0,0 @@
-/* pm/view-knowledge.js — the Knowledge view tab, drawn from planning/design/cockpit-mockup/ViewKnowledge.dc.html.
- *
- * PRD workspace-cockpit-nav, Run 3 (R4). The board is two panes. On the left, a 330px column with a two-way switch, a search
- * field and the list. On the right, the detail of the chosen item.
- *
- * The list is the view's existing list (modes-live.js `knowledgeLive`, or the fixture's decisions), placed unchanged, so every
- * `data-r4="know"`, `data-r11`, `data-cat` and `data-cat-filter` hook and every live behaviour stays as it was: a row still opens
- * its document as a tab. This module only adds the frame, a search that hides rows that do not match, and a `data-path` on each
- * row so the right pane can show the document that was opened last.
- *
- * The facts in the right pane come from GET /api/library, the same read the list uses: a document's name, its category and
- * the basis that decided it, and its file. The board's "Cited by", "Supersedes" and status badge come from the knowledge graph,
- * which this app does not read in the browser. The pane says so, and names `pmos kg` as the place to read them. The board's
- * "Graph" switch shows the same plain note. Nothing on this board is invented.
- */
-import { el } from './dom.js';
-
-const TTL = 15000;
-let lib = { ws: null, state: 'idle', data: null, error: null, at: 0 };   // this board's read of /api/library
-let seg = 'docs';         // the left switch: 'docs' (the list) or 'graph' (not read here)
-let query = '';           // the search text; kept so a redraw keeps the filter
-const chosen = {};        // ws -> the path of the document opened last from this board
-
-const LBL = 'font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-foreground)';
-const BADGE = 'font:500 11px var(--sans);border:1px solid var(--border);border-radius:999px;padding:0 8px;line-height:18px;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)',
-};
-const BTN = 'font:500 12.5px var(--sans);background:transparent;color:var(--foreground);border:1px solid var(--input);border-radius:8px;padding:0 12px;height:30px;display:inline-grid;place-items:center;cursor:pointer;flex:none';
-const MUTED = 'color:var(--muted-foreground)';
-const badge = (text, tone, attrs) => el('span', { ...(attrs || {}), style: BADGE + (tone ? TONE[tone] : '') }, String(text));
-const rule = () => el('div', { style: 'height:1px;background:var(--border);flex:none' });
-
-/** The board's own read of /api/library for one repository, read again after 15 seconds, like the list's. */
-function library(ctx, ws) {
-  if (ctx.FIXTURE) return null;
-  const same = lib.ws === ws;
-  if (same && (lib.state === 'loading' || Date.now() - lib.at < TTL)) return lib;
-  const prev = same ? lib : null;
-  lib = { ws, state: 'loading', data: prev ? prev.data : null, error: null, at: prev ? prev.at : 0 };
-  fetch('/api/library?ws=' + encodeURIComponent(ws)).then((r) => r.json()).then(
-    (data) => { if (lib.ws !== ws) return; lib = { ws, state: data && data.ok === false ? 'error' : 'ok', data, error: data && data.error, at: Date.now() }; ctx.setState({}); },
-    (e) => { if (lib.ws !== ws) return; lib = { ws, state: 'error', data: null, error: (e && e.message) || String(e), at: Date.now() }; ctx.setState({}); },
-  );
-  return lib;
-}
-
-/** The same walk as the list's (modes-live.js `flatten`), so the n-th row and the n-th document are the same document. */
-function flatten(node, out, depth, tree) {
-  for (const d of node.docs || []) out.push({ path: d.path, name: d.name, tree, category: d.category || null, basis: d.category_basis || null, why: d.category_why || null });
-  if (depth < 3) for (const sub of node.dirs || []) { out.push({ dir: true }); flatten(sub, out, depth + 1, tree); }
-  return out;
-}
-const docsOf = (trees) => {
-  const out = [];
-  for (const t of trees || []) for (const it of flatten(t, [], 0, t.path || t.name || 'knowledge')) if (!it.dir) out.push(it);
-  return out;
-};
-
-/** Give each row of the list the path of its document. The list has a category filter of its own; its pressed button says
- * which category is shown, so the rows are matched against the same subset. When the counts differ (the two reads are a
- * moment apart) nothing is marked, and the next redraw tries again. */
-function markRows(host, data) {
-  const know = [...host.querySelectorAll('[data-r4="know"]')];
-  const pressed = host.querySelector('[data-cat-filter][aria-pressed="true"]');
-  const cat = pressed ? pressed.getAttribute('data-cat-filter') : '';
-  const docs = docsOf(data.knowledge).filter((d) => !cat || d.category === cat);
-  if (docs.length === know.length) know.forEach((b, i) => b.setAttribute('data-path', docs[i].path));
-  const noteRows = [...host.querySelectorAll('[data-r11="note"]')];
-  const notes = docsOf(data.notes);
-  if (notes.length === noteRows.length) noteRows.forEach((b, i) => b.setAttribute('data-path', notes[i].path));
-}
-
-/** Hide the rows that do not match the search. Folder lines are hidden while a search is on, as they no longer group anything. */
-function applySearch(host, q) {
-  const needle = q.trim().toLowerCase();
-  let shown = 0;
-  for (const b of host.querySelectorAll('[data-r4="know"], [data-r11="note"], button')) {
-    if (b.hasAttribute('data-cat-filter')) continue;
-    const hay = ((b.getAttribute('data-path') || '') + ' ' + (b.textContent || '')).toLowerCase();
-    const hit = !needle || hay.includes(needle);
-    b.style.display = hit ? '' : 'none';
-    if (hit) shown++;
-  }
-  for (const d of host.querySelectorAll('div')) {
-    if (d.attributes.length !== 1 || d.children.length !== 1) continue;   // a folder line: one style, one text span
-    if (/\/$/.test((d.textContent || '').trim())) d.style.display = needle ? 'none' : '';
-  }
-  return shown;
-}
-
-function segButton(key, label, ctx) {
-  const on = seg === key;
-  return el('button', {
-    'data-kn-seg': key, 'aria-pressed': on ? 'true' : 'false',
-    onClick: () => { seg = key; ctx.setState({}); },
-    style: 'flex:1 1 0;text-align:center;border:0;border-radius:6px;padding:3px 0;font:12.5px var(--sans);cursor:pointer;'
-      + (on ? 'background:var(--background);font-weight:500;color:var(--foreground)' : 'background:transparent;color:var(--muted-foreground)'),
-  }, label);
-}
-
-/** The right pane when the Graph switch is on: the graph is not read in this view. */
-function graphPane() {
-  return [
-    el('div', { 'data-board': 'detail-head', style: 'display:flex;align-items:center;gap:10px' }, el('span', { style: LBL }, 'Graph')),
-    el('div', { 'data-board': 'title', style: 'font:600 22px var(--sans)' }, 'The knowledge graph'),
-    el('div', { 'data-kn': 'not-read', style: MUTED + ';max-width:640px' },
-      'This view does not read the knowledge graph. To see how decisions cite and supersede each other, run ',
-      el('code', { style: 'font:12px var(--mono);color:var(--foreground)' }, 'pmos kg'), ' in a terminal.'),
-  ];
-}
-
-/** The right pane for the document opened last: its name, category and file, and what is not read here. */
-function docPane(doc, reopen) {
-  const cat = doc.category;
-  const tone = cat === 'undetermined' ? 'w' : cat ? 's' : null;
-  return [
-    el('div', { 'data-board': 'detail-head', style: 'display:flex;align-items:center;gap:10px;flex-wrap:wrap' },
-      el('span', { style: 'font:500 12px var(--mono);' + MUTED }, doc.tree),
-      cat ? badge(cat, tone, { 'data-kn': 'category' }) : null),
-    el('div', { 'data-board': 'title', style: 'font:600 22px var(--sans);overflow-wrap:anywhere' }, doc.name || doc.path),
-    el('div', { style: MUTED + ';max-width:640px' }, cat
-      ? 'Category ' + cat + (doc.basis ? ', decided by ' + doc.basis : ', with no evidence') + (doc.why ? ' (' + doc.why + ')' : '') + '. The category is advice. Nothing is written.'
-      : 'This document has no category.'),
-    el('div', null, el('button', { 'data-kn': 'open', style: BTN, hover: 'background:var(--accent)', onClick: reopen }, 'Open in a tab')),
-    rule(),
-    el('div', { style: LBL }, 'Cited by and supersedes'),
-    el('div', { 'data-kn': 'not-read', style: MUTED }, 'Not read in this view. Run ',
-      el('code', { style: 'font:12px var(--mono);color:var(--foreground)' }, 'pmos kg'), ' in a terminal to see them.'),
-    el('div', { style: LBL + ';margin-top:8px' }, 'File'),
-    el('div', { 'data-kn': 'file', style: 'font:12px var(--mono);color:var(--info);overflow-wrap:anywhere' }, doc.path),
-  ];
-}
-
-/** The right pane before anything is chosen: what the list holds, counted from the read. */
-function summaryPane(ctx, r) {
-  const out = [
-    el('div', { 'data-board': 'detail-head', style: 'display:flex;align-items:center;gap:10px' }, el('span', { style: LBL }, 'Knowledge')),
-    el('div', { 'data-board': 'title', style: 'font:600 22px var(--sans)' }, ctx.FIXTURE ? 'Decisions' : 'This repository\'s knowledge'),
-    el('div', { style: MUTED + ';max-width:640px' }, ctx.FIXTURE
-      ? 'Choose a decision on the left. Its detail opens in the detail column.'
-      : 'Choose a document on the left to open it in a tab. Its facts then show here.'),
-  ];
-  if (ctx.FIXTURE) return out;
-  out.push(rule());
-  if (!r || r.state === 'loading' && !r.data) { out.push(el('div', { 'data-kn': 'reading', style: MUTED }, 'Reading the knowledge …')); return out; }
-  if (r.state === 'error') { out.push(el('div', { 'data-kn': 'error', style: 'color:var(--destructive)' }, 'The knowledge could not be read: ' + (r.error || 'error'))); return out; }
-  const sets = [['knowledge', (r.data && r.data.knowledge) || []], ['notes', (r.data && r.data.notes) || []]];
-  out.push(el('div', { style: LBL }, 'In this repository'));
-  const rows = [];
-  for (const [kind, trees] of sets) {
-    for (const t of trees) {
-      const n = docsOf([t]).length;
-      rows.push(el('div', { 'data-kn-tree': kind, style: 'display:flex;gap:10px;align-items:center' },
-        badge(kind === 'notes' ? 'notes' : 'bundle'),
-        el('span', { style: 'font:12px var(--mono);flex:1 1 auto;min-width:0;overflow-wrap:anywhere' }, t.path || t.name || kind),
-        el('span', { style: MUTED + ';font-size:12px' }, n + (n === 1 ? ' document' : ' documents'))));
-    }
-  }
-  if (!rows.length) rows.push(el('div', { 'data-kn': 'empty', style: MUTED }, 'This repository has no knowledge bundle and no notes.'));
-  out.push(el('div', { style: 'display:flex;flex-direction:column;gap:6px' }, rows));
-  return out;
-}
-
-export function renderBoard(inner, ctx) {
-  const { state } = ctx;
-  const ws = state.wsId || '';
-  const r = library(ctx, ws);
-
-  // 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', 'knowledge');
-
-  // the list, unchanged, inside the left column
-  const host = el('div', { 'data-board-section': 'list', style: 'display:flex;flex-direction:column;gap:2px;margin:0 -14px' });
-  ctx.renderMode(host);
-  if (!host.firstChild) host.appendChild(el('div', { style: MUTED + ';padding:8px 14px;font-size:12px' }, ctx.ready ? 'This list has nothing to show.' : 'Reading the list …'));
-  if (r && r.data) markRows(host, r.data);
-  const docPath = chosen[ws] || '';
-  if (docPath) for (const b of host.querySelectorAll('[data-path]')) {
-    if (b.getAttribute('data-path') !== docPath) continue;
-    b.setAttribute('data-kn-on', '1');
-    b.style.background = 'var(--accent)';
-  }
-  // A press on a row is recorded before the row's own handler opens the document, so the right pane can show it.
-  host.addEventListener('click', (e) => {
-    const b = e.target && e.target.closest ? e.target.closest('[data-path]') : null;
-    if (b && host.contains(b)) chosen[ws] = b.getAttribute('data-path');
-  }, true);
-
-  const noMatch = el('div', { 'data-kn': 'no-match', style: MUTED + ';padding:8px 0;font-size:12px;display:none' }, 'No document matches the search.');
-  const filter = (q) => { noMatch.style.display = applySearch(host, q) || !q.trim() ? 'none' : ''; };
-  filter(query);
-
-  const wasFocused = typeof document !== 'undefined' && document.activeElement && document.activeElement.getAttribute('data-kn-search') === '1';
-  const caret = wasFocused ? document.activeElement.selectionStart : null;
-  const search = el('input', {
-    type: 'search', 'data-kn-search': '1', 'data-board': 'search', 'aria-label': ctx.FIXTURE ? 'Search decisions' : 'Search documents',
-    placeholder: ctx.FIXTURE ? 'Search decisions…' : 'Search documents…', value: query,
-    onInput: (e) => { query = e.target.value; filter(query); },
-    style: 'box-sizing:border-box;width:100%;flex:none;border:1px solid var(--input);border-radius:8px;height:32px;padding:0 10px;background:transparent;color:var(--foreground);font:13px var(--sans)',
-  });
-  if (wasFocused) requestAnimationFrame(() => { search.focus(); if (caret !== null) try { search.setSelectionRange(caret, caret); } catch { /* not a text field */ } });
-
-  const left = el('div', { 'data-board-section': 'sidebar',
-    style: 'width:330px;flex:none;box-sizing:border-box;border-right:1px solid var(--border);padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--sidebar);overflow-y:auto;min-height:0' },
-    el('div', { 'data-board': 'toggle', style: 'display:flex;gap:2px;background:var(--accent);border-radius:8px;padding:3px;flex:none' },
-      segButton('docs', ctx.FIXTURE ? 'Decisions' : 'Documents', ctx), segButton('graph', 'Graph', ctx)),
-    search, host, noMatch);
-
-  let doc = null;
-  if (docPath && r && r.data) doc = docsOf(r.data.knowledge).concat(docsOf(r.data.notes)).find((d) => d.path === docPath) || null;
-  const reopen = () => {
-    const b = host.querySelector('[data-kn-on="1"]');
-    if (b) b.click();
-  };
-  const right = el('div', { 'data-board-section': '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;min-height:0' },
-    seg === 'graph' ? graphPane() : doc ? docPane(doc, reopen) : summaryPane(ctx, r));
-
-  inner.append(left, right);
-}

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

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