create-pmos 0.47.0 → 0.49.0

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

@@ -0,0 +1,197 @@
+/* pm/view-files.js — Files: the repository's files in the Work list (workspace-cockpit-nav Run 3, PRD R10).
+ *
+ * Board: planning/design/cockpit-mockup/ViewFilesPad.dc.html (the left column).
+ *
+ * Two exports, both placed by the Work list (panel-cockpit.js):
+ *   filesToggle()     — the "Initiatives | Files" pair. It writes `state.filesOpen`.
+ *   renderFiles(host) — when `filesOpen` is true, the list body: a filter, the file tree, a note.
+ *
+ * THE DATA. The tree is `/api/tree?ws=<id>`, the folder lens the server already serves (server.js
+ * `libraryTree`): every folder and file of the repository, six folders deep, at most 4000 entries,
+ * with each file's reader kind from lib/preview-kind.js. Nothing here adds a server route, and
+ * nothing is written. A file opens through `openDoc` — the same doc tab the folder search opens —
+ * so a file the reader cannot show says why in its tab (the any-text-file behaviour, pm-r21).
+ *
+ * WHAT THE BOARD SHOWS THAT IS NOT READ HERE. The board says binary files show their size. The tree
+ * route does not return sizes, so a binary file shows its name and the words "not opened" only.
+ *
+ * FIXTURE MODE makes no request: the list says the files are not read in the demo.
+ */
+import { el, setChildren } from './dom.js';
+import { state, setState, FIXTURE } from './state.js';
+import { openDoc } from './panel-initiatives.js';
+
+const TREE_MAX_NODES = 4000;           // server.js TREE_MAX_NODES — the bound the note states
+
+/* ── module state: the fetched trees, the open folders and the filter text ──────────────────── */
+const trees = new Map();               // ws -> { roots, error, loading, at }
+const openDirs = new Set();            // folder paths the PM has opened
+let filterText = '';
+
+function load(ws) {
+  const cur = trees.get(ws);
+  if (cur && cur.loading) return;
+  trees.set(ws, { roots: cur ? cur.roots : null, error: null, loading: true, at: Date.now() });
+  fetch('/api/tree?ws=' + encodeURIComponent(ws)).then((r) => {
+    if (!r.ok) throw new Error('HTTP ' + r.status);
+    return r.json();
+  }).then(
+    (j) => { trees.set(ws, { roots: Array.isArray(j && j.roots) ? j.roots : [], error: null, loading: false, at: Date.now() }); setState({}); },
+    (e) => { trees.set(ws, { roots: null, error: (e && e.message) || String(e), loading: false, at: Date.now() }); setState({}); },
+  );
+}
+
+/** Forget the cached tree, so the next draw reads the folder again. */
+function refresh() {
+  if (state.wsId) trees.delete(state.wsId);
+  setState({});
+}
+
+/* ── styles, from the board, on the token system ──────────────────────────────────────────────── */
+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:28px;display:inline-grid;place-items:center';
+const ROW = 'display:flex;align-items:center;gap:8px;width:100%;min-height:30px;padding:0 10px;border-radius:6px;'
+  + 'font:12.5px var(--mono);text-align:left;color:var(--foreground);min-width:0';
+const NAME = 'min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap';
+const NOTE = 'color:var(--muted-foreground);font-size:12px;line-height:1.45';
+
+/* ── the toggle ───────────────────────────────────────────────────────────────────────────────── */
+
+/** "Initiatives | Files". Opening Files reads the folder again, so a new file shows up. */
+export function filesToggle() {
+  const on = !!state.filesOpen;
+  const b = (label, sel, onClick, key) => el('button', {
+    onClick, 'data-files-tab': key, 'aria-pressed': sel ? 'true' : 'false',
+    style: BTN + (sel ? ';background:var(--accent)' : ';color:var(--muted-foreground)'),
+    hover: sel ? null : 'color:var(--foreground)',
+  }, label);
+  return el('div', { 'data-files': 'toggle', style: 'display:flex;gap:6px' },
+    b('Initiatives', !on, () => { if (state.filesOpen) setState({ filesOpen: false }); }, 'initiatives'),
+    b('Files', on, () => { if (!state.filesOpen) { if (state.wsId) trees.delete(state.wsId); setState({ filesOpen: true }); } }, 'files'));
+}
+
+/* ── the filter (one node, so the caret survives a redraw) ──────────────────────────────────── */
+const filterInput = el('input', {
+  onInput: (e) => { filterText = e.target.value; setState({}); },
+  placeholder: 'Filter files…', 'aria-label': 'filter files', 'data-files': 'filter',
+  style: 'flex:1;min-width:0;font:13px var(--sans);color:var(--foreground);background:transparent;border:0;outline:0',
+});
+const filterBox = el('div', {
+  style: 'flex:none;display:flex;align-items:center;gap:8px;border:1px solid var(--input);border-radius:8px;height:32px;padding:0 10px;color:var(--muted-foreground)',
+}, filterInput,
+  el('button', {
+    onClick: refresh, 'data-files': 'refresh', title: 'Read the folder again.', 'aria-label': 'read the folder again',
+    style: 'flex:none;color:var(--muted-foreground);font-size:12px;padding:0 2px', hover: 'color:var(--foreground)',
+  }, '↻'));
+
+/* ── the tree ─────────────────────────────────────────────────────────────────────────────────── */
+
+const PK = () => (typeof window !== 'undefined' ? window.PreviewKind : null);
+
+/** A file the reader will not try: a type that is binary by nature. Everything else opens as a doc tab. */
+function isBinary(name) {
+  const pk = PK();
+  return !!(pk && typeof pk.isKnownBinary === 'function' && pk.isKnownBinary(name));
+}
+
+function dotColor(f) {
+  if (isBinary(f.name)) return 'var(--muted-foreground)';
+  if (f.md || f.kind === 'markdown') return 'var(--brand)';
+  return 'var(--info)';
+}
+
+/** Does this folder hold a file whose path contains `q`? */
+function holds(dir, q) {
+  if ((dir.docs || []).some((f) => f.path.toLowerCase().includes(q))) return true;
+  return (dir.dirs || []).some((d) => holds(d, q));
+}
+
+function countNodes(dir) {
+  return (dir.docs || []).length + (dir.dirs || []).reduce((n, d) => n + 1 + countNodes(d), 0);
+}
+
+function activeDocPath() {
+  const act = (state.tabs || []).find((t) => t.id === state.active);
+  return act && act.kind === 'doc' && !act.ws ? act.path : null;
+}
+
+function fileRow(f, depth, activePath) {
+  const pad = 'padding-left:' + (10 + depth * 16) + 'px';
+  const dot = el('span', { style: 'flex:none;color:' + dotColor(f) }, '●');
+  if (isBinary(f.name)) {
+    return el('div', {
+      'data-files': 'file', 'data-path': f.path, 'data-kind': f.kind || '', 'data-openable': 'false',
+      title: f.path + '\nA binary file. It is not opened.',
+      style: ROW + ';' + pad + ';color:var(--muted-foreground)',
+    }, dot, el('span', { style: NAME }, f.name), el('span', { style: 'margin-left:auto;flex:none;font-size:11px' }, 'not opened'));
+  }
+  const on = activePath === f.path;
+  return el('button', {
+    onClick: () => openDoc(null, f.path, 'FILE'),
+    'data-files': 'file', 'data-path': f.path, 'data-kind': f.kind || '', 'data-openable': 'true',
+    'aria-current': on ? 'true' : null, title: f.path,
+    style: ROW + ';' + pad + (on ? ';background:var(--accent)' : ''),
+    hover: on ? null : 'background:var(--accent)',
+  }, dot, el('span', { style: NAME }, f.name));
+}
+
+function dirRows(dir, depth, q, activePath, out) {
+  if (q && !holds(dir, q)) return;
+  const open = q ? true : openDirs.has(dir.path);
+  out.push(el('button', {
+    onClick: () => { if (openDirs.has(dir.path)) openDirs.delete(dir.path); else openDirs.add(dir.path); setState({}); },
+    'data-files': 'dir', 'data-path': dir.path, 'aria-expanded': open ? 'true' : 'false',
+    style: ROW + ';padding-left:' + (10 + depth * 16) + 'px', hover: 'background:var(--accent)',
+  }, el('span', { style: 'flex:none;color:var(--muted-foreground)' }, open ? '▾' : '▸'), el('span', { style: NAME }, dir.name)));
+  if (!open) return;
+  for (const d of dir.dirs || []) dirRows(d, depth + 1, q, activePath, out);
+  for (const f of dir.docs || []) if (!q || f.path.toLowerCase().includes(q)) out.push(fileRow(f, depth + 1, activePath));
+}
+
+function message(text, tone) {
+  return el('div', { 'data-files': 'message', style: 'padding:8px 10px;font-size:12px;color:' + (tone || 'var(--muted-foreground)') }, text);
+}
+
+/** The Files body: the filter, the tree and the note. Fills `host` and returns it. */
+export function renderFiles(host) {
+  const body = [];
+  const ws = state.wsId;
+  let total = 0;
+  if (FIXTURE) {
+    body.push(message('Files are not read in the demo. Open the workspace on a repository to see its files.'));
+  } else if (!ws) {
+    body.push(message('Select a repository to see its files.'));
+  } else {
+    const t = trees.get(ws);
+    if (!t) load(ws);
+    if (!t || (t.loading && !t.roots)) body.push(message('Reading the files…'));
+    else if (t.error) body.push(message('The files could not be read: ' + t.error, 'var(--destructive)'));
+    else {
+      const q = filterText.trim().toLowerCase();
+      const activePath = activeDocPath();
+      const roots = t.roots || [];
+      const loose = roots.filter((r) => r.path === '');
+      for (const r of roots) total += r.path === '' ? (r.docs || []).length : 1 + countNodes(r);
+      for (const r of roots) if (r.path !== '') dirRows(r, 0, q, activePath, body);
+      for (const r of loose) for (const f of r.docs || []) if (!q || f.path.toLowerCase().includes(q)) body.push(fileRow(f, 0, activePath));
+      if (!body.length) body.push(message(q ? 'No file matches the filter.' : 'This repository has no files to list.'));
+    }
+  }
+  const capped = total >= TREE_MAX_NODES;
+  // The frame is persistent: re-creating it would detach the filter and lose its focus on every redraw.
+  setChildren(treeNode, body);
+  setChildren(noteNode, [NOTE_TEXT, capped ? capNode : null]);
+  setChildren(host, [boardNode]);
+  if (filterInput.value !== filterText) filterInput.value = filterText;
+  return host;
+}
+
+const NOTE_TEXT = document.createTextNode('Any text file opens as a document tab. Binary files show their name only.');
+const capNode = el('span', { style: 'display:block;color:var(--warning)' },
+  'The list stops at ' + TREE_MAX_NODES + ' entries. Use the search box to find other files.');
+const treeNode = el('div', { 'data-files': 'tree', style: 'flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:1px' });
+const noteNode = el('div', { 'data-files': 'note', style: 'flex:none;' + NOTE });
+const boardNode = el('div', { 'data-board': 'files', style: 'flex:1;min-height:0;display:flex;flex-direction:column;gap:10px' },
+  filterBox, treeNode, noteNode);
+
+export default renderFiles;

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

@@ -0,0 +1,141 @@
+/* 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

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