create-pmos 0.123.0 → 0.125.0

package/workspace/public/pm/c3-doc-sheet.js

@@ -0,0 +1,314 @@
+/* pm/c3-doc-sheet.js — the DOCUMENT SHEET of /c3.html Initiatives > Documents (console3.html: docPanel line 4090, dpHead 4089, the diff 4075 and 4076, the sheet 4104,
+ * the handlers dmode, dask, dsave 4136 to 4143, relHtml 4180 to 4190). The right-hand sheet from c3-sheet.js, up to 780px, a bottom sheet on a phone.
+ *
+ *   openDocSheet({ ws, doc, mode, prompt, relations(doc, openOther), onChanged })    doc = { path, name, ty, v, st, ini }
+ *
+ * Six modes (the segment under the header): Read (one `.dsec` per heading with who changed it last), Edit by hand (sections become editable; a WHY is required;
+ * POST /api/doc-sheet/edit), Ask the agent (the word diff of what the agent proposes and Accept as a slide bound to the proposal's hash: POST /api/doc-sheet/accept),
+ * History (GET /api/doc-sheet/revisions and /at: the revisions and a compare of any one with the one before), Health (POST /api/doc-health/check: the six checks, N of M),
+ * Relations (the document graph around this document, from the library's edges).
+ * What the page cannot do, it says so: the agent runs in a terminal session, not here, and there is no route that lists its proposals. So in real mode Ask the agent shows
+ * the request and offers a copy of it, with the Ask button disabled and the reason beside it; the demo (?demo=1) answers the propose and accept routes from fixtures, so the
+ * whole flow can be seen. Nothing is invented: an edit writes the file through the route, and every save keeps its why in the revisions.
+ * Pure parts (Node-testable): splitDoc, joinDoc, changedSections, wordDiffTokens, byName, dayName. */
+import { el } from './dom.js';
+import { pmGet, pmPost } from './http.js';
+import { c3ic, c3ib } from './pm-work-view.js';
+import { openSheet } from './c3-sheet.js';
+import { renderCase } from './c3-case.js';
+import { say } from './c3-init-extras.js';
+
+/* ── pure: sections, round trip, word diff ── */
+
+/** Split a markdown text into sections at its headings. Each section keeps the exact text it came from, so joinDoc(splitDoc(t)) === t. */
+export function splitDoc(text) {
+  const t = String(text == null ? '' : text);
+  const heads = []; let off = 0; let fence = false;
+  for (const line of t.split('\n')) {
+    if (/^\s*(```|~~~)/.test(line)) fence = !fence;
+    if (!fence && /^#{1,6}\s+\S/.test(line)) heads.push({ at: off, line, end: off + line.length + 1 });
+    off += line.length + 1;
+  }
+  const raw = [];
+  const first = heads.length ? heads[0].at : t.length;
+  if (first > 0 || !heads.length) raw.push({ prefix: '', name: /^---\n/.test(t) ? 'Front matter' : 'Overview', body: t.slice(0, first) });
+  heads.forEach((h, i) => raw.push({ prefix: t.slice(h.at, Math.min(h.end, t.length)), name: h.line.replace(/^#+\s+/, '').replace(/\s+#+\s*$/, '').trim(), body: t.slice(Math.min(h.end, t.length), i + 1 < heads.length ? heads[i + 1].at : t.length) }));
+  return raw.map((s, i) => {
+    const lead = s.body.match(/^\s*/)[0]; const rest = s.body.slice(lead.length); const tail = rest.match(/\s*$/)[0];
+    return { i, prefix: s.prefix, name: s.name, lead, tail, text: rest.slice(0, rest.length - tail.length) };
+  });
+}
+
+/** Put the sections back together. `edits` (optional) maps a section index to its new text; every other section is written as it was. */
+export function joinDoc(secs, edits) {
+  return secs.map((s) => s.prefix + s.lead + (edits && Object.prototype.hasOwnProperty.call(edits, s.i) ? edits[s.i] : s.text) + s.tail).join('');
+}
+
+/** The sections of `after` that differ from `before`, by name: [{ name, before, after, kind: 'changed'|'added'|'removed' }]. */
+export function changedSections(before, after) {
+  const A = splitDoc(before); const B = splitDoc(after); const out = [];
+  B.forEach((s) => { const p = A.find((q) => q.name === s.name); if (!p) out.push({ name: s.name, before: '', after: s.text, kind: 'added' }); else if (p.text !== s.text) out.push({ name: s.name, before: p.text, after: s.text, kind: 'changed' }); });
+  A.forEach((q) => { if (!B.some((s) => s.name === q.name)) out.push({ name: q.name, before: q.text, after: '', kind: 'removed' }); });
+  return out;
+}
+
+/** The word diff (the mockup's wdiff, line 4065): [{ op: 'same'|'add'|'del', text }], whitespace kept in the tokens. */
+export function wordDiffTokens(a, b) {
+  const x = String(a || '').split(/(\s+)/).filter((s) => s !== ''); const y = String(b || '').split(/(\s+)/).filter((s) => s !== '');
+  const n = x.length; const m = y.length;
+  if (n * m > 600000) return [...(a ? [{ op: 'del', text: a }] : []), ...(b ? [{ op: 'add', text: b }] : [])];
+  const L = []; for (let i = 0; i <= n; i++) L.push(new Array(m + 1).fill(0));
+  for (let i = n - 1; i >= 0; i--) for (let j = m - 1; j >= 0; j--) L[i][j] = x[i] === y[j] ? L[i + 1][j + 1] + 1 : Math.max(L[i + 1][j], L[i][j + 1]);
+  const out = []; const push = (op, text) => { const l = out[out.length - 1]; if (l && l.op === op) l.text += text; else out.push({ op, text }); };
+  let i = 0; let j = 0;
+  while (i < n && j < m) { if (x[i] === y[j]) { push('same', x[i]); i++; j++; } else if (L[i + 1][j] >= L[i][j + 1]) push('del', x[i++]); else push('add', y[j++]); }
+  while (i < n) push('del', x[i++]);
+  while (j < m) push('add', y[j++]);
+  return out;
+}
+
+/** Who a ledger `by` is, as the page says it. */
+export const byName = (by) => { const b = String(by || ''); return /^(agent|claude)/i.test(b) ? 'Agent' : /^(pm|human:wawan|you)$/i.test(b) || b === '' ? 'You' : b.replace(/^human:/, ''); };
+const WD = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; const MON = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+/** '2026-10-05T09:00:00Z' to 'Mon 5 Oct'. Anything that is not a date comes back as it is. */
+export function dayName(v) {
+  const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(String(v || '')); if (!m) return String(v || '');
+  const d = new Date(Date.UTC(+m[1], +m[2] - 1, +m[3]));
+  return WD[d.getUTCDay()] + ' ' + (+m[3]) + ' ' + MON[+m[2] - 1];
+}
+const nextV = (v) => { const m = /^v(\d+)$/.exec(v || ''); return m ? 'v' + (+m[1] + 1) : 'v1'; };
+
+/* ── the sheet ── */
+
+const NAMES = { fresh: 'Fresh', decisions: 'Matches decisions', data: 'Matches the data', complete: 'Complete', traced: 'Traced to a goal and tickets', readers: 'Readers have this version' };
+const hcol = (h) => (!h || h.total === 0 ? 'var(--muted-foreground)' : h.passed === h.total ? 'var(--success)' : h.total - h.passed === 1 ? 'var(--warning)' : 'var(--destructive)');
+const STATE = { current: ['Current', 'var(--success)', 'check'], stale: ['Stale', 'var(--warning)', 'alert'], draft: ['Draft', 'var(--acc)', 'clock'], missing: ['Missing', 'var(--destructive)', 'plus'] };
+const TABS = [['read', 'eye', 'Read'], ['edit', 'notes', 'Edit by hand'], ['ask', 'spark', 'Ask the agent'], ['hist', 'clock', 'History'], ['health', 'shield', 'Health'], ['links', 'init', 'Relations']];
+const isDemo = () => !!window.__c3demo;
+const q = (o) => Object.entries(o).map(([k, v]) => k + '=' + encodeURIComponent(v)).join('&');
+
+/** The mockup's agentDraft (line 4077): a deterministic rewrite of the sections for the demo's request box. Real mode has no agent behind the page. */
+function demoDraft(secs, prompt) {
+  const p = prompt.toLowerCase(); const out = secs.map((s) => ({ name: s.name, text: s.text })); let did = false;
+  if (/flow|scope|cut|three|3/.test(p)) out.forEach((s) => { if (s.name === 'Scope') { s.text = 'Three flows ship together: one-page address entry, wallet pay and guest checkout. Saved-card removal moves to the next release.'; did = true; } if (s.name === 'Risks' && /audit/i.test(s.text)) s.text += ' The cut frees the 21 Oct audit slot.'; });
+  if (/growth|forecast|6%|number|assumption/.test(p)) out.forEach((s) => { if (/4%/.test(s.text) && s.name === 'Goal') { s.text = s.text.replace('Growth assumption 4%', 'Growth assumption 6% (Q4 forecast, row 14), pending your confirmation'); did = true; } });
+  if (/summar|tl;dr|short/.test(p)) { out.unshift({ name: 'Summary', text: 'One page: raise conversion to 4.0% by fixing the address step, removing saved cards and shipping wallet pay and guest checkout.' }); did = true; }
+  if (/leadership|note|change/.test(p)) { out.push({ name: 'Change note', text: 'The next version changes the scope after the 8 Oct decision. Everything else is unchanged.' }); did = true; }
+  if (!did) out.push({ name: 'Agent note', text: 'Drafted from your request: ' + prompt.slice(0, 160) });
+  return out;
+}
+/** The draft's sections back into the document's text: a changed section is replaced in place, a new Summary goes first, any other new section goes last. */
+const sectionsToText = (before, drafted) => {
+  const A = splitDoc(before); const names = new Set(A.map((s) => s.name)); const edits = {};
+  A.forEach((s) => { const d = drafted.find((x) => x.name === s.name); if (d && d.text !== s.text) edits[s.i] = d.text; });
+  let text = joinDoc(A, edits);
+  for (const d of drafted) {
+    if (names.has(d.name)) continue;
+    if (d.name === 'Summary') text = '## Summary\n' + d.text + '\n\n' + text;
+    else text = text.replace(/\s*$/, '\n\n') + '## ' + d.name + '\n' + d.text + '\n';
+  }
+  return text;
+};
+
+/* Two additive options for a report, which is a document in the mockup (console3.html r2doc):
+ *   generated = { text, why, health }   the report has no stored document yet. The sheet shows the generated sections read-only; Edit and Ask say why they
+ *                                       need a stored document (why), History says there is none, Health shows `health` ({ passed, total, checks }) as given.
+ *   secExtra(name)                      a node under each section in Read: the report's claims and where they come from. */
+export function openDocSheet({ ws, doc, mode = 'read', prompt = '', relations, onChanged, generated, secExtra }) {
+  const S = { draft: {}, mode, prompt, text: null, err: '', revs: null, texts: {}, cmp: null, health: null, hAsk: false, prop: null, busy: false, changed: false, why: '', metaFor: null };
+  const demo = isDemo();
+  const base = { ws, path: doc.path };
+  let ui = null;
+
+  /* data */
+  const loadText = async () => {
+    if (generated) { S.text = String(generated.text || ''); S.err = ''; return; }
+    try { const r = await fetch('/api/doc?' + q({ ws, path: doc.path })); if (!r.ok) throw new Error((await r.text()) || 'could not read the document'); S.text = await r.text(); S.err = ''; }
+    catch (e) { S.text = null; S.err = (e && e.message) || 'could not read the document'; }
+  };
+  const loadRevs = async () => {
+    if (generated) { S.revs = []; S.revsErr = generated.why; return; }
+    const j = await pmGet('/api/doc-sheet/revisions?' + q(base)).catch(() => null);
+    S.revs = j && j.ok ? j.revisions : []; S.revsErr = j && j.ok ? '' : (j && j.error) || 'The history could not be read.';
+  };
+  const textAt = async (rev) => {
+    if (S.texts[rev] != null) return S.texts[rev];
+    const j = await pmGet('/api/doc-sheet/at?' + q({ ...base, rev })).catch(() => null);
+    S.texts[rev] = j && j.ok ? j.text : null; return S.texts[rev];
+  };
+  const loadHealth = async () => {
+    S.hAsk = true; draw();
+    if (generated) { S.health = generated.health || { passed: 0, total: 0, checks: [], err: generated.why }; drawBg(); return; }
+    const r = await pmPost('/api/doc-health/check', base);
+    S.health = r && r.ok && r.health ? r.health : { passed: 0, total: 0, checks: [], err: (r && r.error) || 'The checks could not run.' }; drawBg();
+  };
+  /* who changed each section last: needs the text of every revision (a few, fetched once) */
+  const loadMeta = async () => {
+    if (!S.revs || !S.revs.length || S.metaFor === S.revs.length) return;
+    S.metaFor = S.revs.length;
+    const rs = S.revs.slice(-12);
+    const texts = await Promise.all(rs.map((r) => textAt(r.rev)));
+    const meta = {};
+    rs.forEach((r, i) => { if (texts[i] == null) return; const cur = splitDoc(texts[i]); const prev = i ? splitDoc(texts[i - 1] || '') : []; cur.forEach((s) => { const p = prev.find((x) => x.name === s.name); if (!p || p.text !== s.text) meta[s.name] = r; }); });
+    S.meta = meta; drawBg();
+  };
+
+  /* ── drawing ── */
+  const head = () => {
+    const st = STATE[doc.st] || STATE.current; const h = S.health;
+    return el('div', { class: 'chips2', style: 'flex-wrap:wrap', 'data-doc-meta': '' },
+      el('span', { class: 'chip2', style: 'color:' + st[1] }, c3ic(st[2], 'sm'), st[0]), el('span', { class: 'chip2' }, doc.ty || 'Document'), doc.v ? el('span', { class: 'chip2 mono' }, doc.v) : null,
+      h && h.total ? el('span', { class: 'chip2', style: 'color:' + hcol(h) }, c3ic('shield', 'sm'), h.passed + ' of ' + h.total + ' checks') : null,
+      el('span', { class: 'chip2' }, doc.iniName || doc.ini || 'Portfolio'));
+  };
+  const failing = () => (S.health ? S.health.checks.filter((c) => c.pass === false) : []);
+  const seg = () => el('div', { class: 'seg', role: 'group', 'aria-label': 'Document mode' }, TABS.map(([k, ic, l]) => {
+    const bad = k === 'health' ? failing().length : 0;
+    return el('button', { type: 'button', 'aria-pressed': String(S.mode === k), 'aria-label': l, title: l, 'data-dmode': k, onclick: () => go(k) }, c3ic(ic, 'sm'), S.mode === k ? l : null, bad ? [' ', el('span', { class: 'bdg' }, String(bad))] : null);
+  }));
+  const go = (m) => { S.mode = m; if (m !== 'hist') S.cmp = null; if (m === 'health' && !S.hAsk) loadHealth(); if (m === 'hist' && S.revs === null) loadRevs().then(draw); if (m === 'read' || m === 'edit') loadMeta(); draw(); };
+
+  const flags = () => { const f = {}; failing().forEach((c) => { if (c.section && c.flag) f[c.section] = c.flag; }); return f; };
+  const readBody = (editing, quiet) => {
+    if (editing && generated) return el('div', { class: 'dpn' }, el('div', { class: 'fold w', role: 'note', 'data-doc-nostore': 'edit' }, c3ic('lock', 'sm'), generated.why), readBody(false, true));
+    if (S.text == null) return S.err ? el('div', { class: 'fold w', role: 'alert' }, c3ic('alert', 'sm'), S.err) : el('div', { class: 'fold', role: 'status' }, c3ic('clock', 'sm'), 'Reading the document.');
+    const secs = splitDoc(S.text); const fl = flags(); const meta = S.meta || {};
+    if (!secs.some((s) => s.text.trim() || s.name !== 'Overview')) return el('div', { class: 'fold' }, c3ic('moon', 'sm'), 'The document is empty.');
+    const cells = secs.map((s) => {
+      const mt = meta[s.name];
+      const dt = el('div', { class: 'dt', 'data-sec': s.i, ...(editing ? { contenteditable: 'plaintext-only', role: 'textbox', 'aria-label': s.name, 'aria-multiline': 'true', style: 'white-space:pre-wrap' } : { style: 'white-space:pre-wrap' }) }, editing && S.draft[s.i] != null ? S.draft[s.i] : s.text);
+      if (editing && dt.contentEditable !== 'plaintext-only') dt.setAttribute('contenteditable', 'true');
+      if (editing) dt.addEventListener('input', () => { S.draft[s.i] = dt.contentEditable === 'plaintext-only' ? dt.textContent : dt.innerText; });
+      return el('div', { class: 'dsec' + (fl[s.name] ? ' warn' : ''), 'data-dsec': s.name }, el('h4', null, s.name), dt,
+        el('div', { class: 'mt' }, mt ? el('span', { style: 'color:' + (byName(mt.by) === 'Agent' ? 'var(--purple)' : 'var(--acc)') }, c3ic(byName(mt.by) === 'Agent' ? 'spark' : 'user', 'sm'), 'Last changed by ' + byName(mt.by) + ', ' + dayName(mt.at)) : null,
+          fl[s.name] ? el('span', { style: 'color:var(--warning)' }, c3ic('alert', 'sm'), fl[s.name]) : null), !editing && secExtra ? secExtra(s.name) : null);
+    });
+    if (!editing) return el('div', { class: 'dpn' }, generated && !quiet ? el('div', { class: 'fold', role: 'note', 'data-doc-generated': '' }, c3ic('info', 'sm'), generated.why) : null, cells);
+    const why = el('input', { type: 'text', id: 'dwhy', placeholder: 'Why are you changing it? (kept in the history)', 'aria-label': 'Why', 'data-doc-why': '', value: S.why, onInput: (e) => { S.why = e.target.value; } });
+    return el('div', { class: 'dpn' }, cells, why,
+      S.err ? el('div', { class: 'fold w', role: 'alert' }, c3ic('alert', 'sm'), S.err) : null,
+      el('div', { class: 'chips2' }, c3ib('Save as ' + nextV(doc.v), 'check', { 'data-doc-save': '', onClick: () => save(secs) }, ''), c3ib('Cancel', 'x', { onClick: () => { S.err = ''; S.draft = {}; go('read'); } }, '')));
+  };
+
+  async function save(secs) {
+    const edits = {};
+    ui.body.querySelectorAll('[data-sec]').forEach((n) => { const i = Number(n.dataset.sec); const v = n.contentEditable === 'plaintext-only' ? n.textContent : n.innerText; if (v !== secs[i].text) edits[i] = v; });
+    if (!Object.keys(edits).length) { say('Nothing changed'); S.err = ''; S.draft = {}; go('read'); return; }
+    if (!S.why.trim()) { S.err = 'Say why the document changes: the reason is kept in the history.'; draw(); ui.body.querySelector('#dwhy') && ui.body.querySelector('#dwhy').focus(); return; }
+    const before = S.text; const after = joinDoc(secs, edits);
+    const r = await pmPost('/api/doc-sheet/edit', { ...base, text: after, why: S.why.trim() });
+    if (!r || !r.ok) { S.err = (r && r.error) || 'The document was not saved.'; draw(); return; }
+    S.err = ''; S.why = ''; S.draft = {}; S.changed = true; S.revs = null; S.meta = null; S.metaFor = null; S.texts = {}; S.health = null; S.hAsk = false;
+    await loadText(); go('read');
+    say('Saved as ' + nextV(doc.v) + (r.rev ? ' (revision ' + r.rev + ')' : ''), async () => {
+      const u = await pmPost('/api/doc-sheet/edit', { ...base, text: before, why: 'Undone: restored the text from before the last edit.' });
+      if (u && u.ok) { S.revs = null; S.meta = null; S.metaFor = null; S.texts = {}; S.health = null; S.hAsk = false; await loadText(); draw(); } else say((u && u.error) || 'The edit could not be undone.');
+    });
+  }
+
+  /* Ask the agent */
+  const diffNode = (list, all) => {
+    const rows = list.filter((d) => all || d.kind !== 'same');
+    return el('div', { class: 'dpn dfi', 'data-doc-diff': '' }, rows.length ? rows.map((d) => el('div', { class: 'dsec warn' }, el('h4', null, d.name), el('p', null, wordDiffTokens(d.before, d.after).map((t) => (t.op === 'add' ? el('ins', null, t.text) : t.op === 'del' ? el('del', null, t.text) : t.text))))) : el('div', { class: 'dim' }, 'No change.'));
+  };
+  const askBody = () => {
+    if (generated) return el('div', { class: 'dpn' }, el('div', { class: 'fold w', role: 'note', 'data-doc-nostore': 'ask' }, c3ic('lock', 'sm'), generated.why));
+    const ta = el('textarea', { id: 'dpr', placeholder: 'Tell the agent what to change, for example: cut the scope to 3 flows', 'aria-label': 'Request to the agent', 'data-doc-prompt': '', onInput: (e) => { S.prompt = e.target.value; } }, S.prompt);
+    const sug = [...new Set(failing().map((c) => c.fix).filter(Boolean))];
+    const copy = async () => { const t = 'Change ' + doc.path + ': ' + (S.prompt || '').trim(); try { await navigator.clipboard.writeText(t); say('The request is copied. Give it to your agent session.'); } catch { say('Copying is blocked here. Select the request and copy it.'); } };
+    const kids = [ta, el('div', { class: 'chips2' },
+      demo ? c3ib('Ask the agent', 'spark', { 'data-doc-ask': '', onClick: () => askDemo() }, '') : el('button', { type: 'button', class: 'pill', disabled: true, 'aria-disabled': 'true', 'data-doc-ask': '', title: 'The agent runs in your terminal session. This page cannot start it.' }, c3ic('lock', 'sm'), 'Ask the agent'),
+      !demo ? el('button', { type: 'button', class: 'chip2 lk', 'data-doc-copy': '', onclick: copy }, c3ic('doc', 'sm'), 'Copy the request') : null,
+      ...sug.map((t, i) => el('button', { type: 'button', class: 'chip2 lk', 'data-doc-chip': String(i), onclick: () => { S.prompt = t; draw(); } }, c3ic('spark', 'sm'), t)))];
+    if (!demo) kids.push(el('div', { class: 'fold', role: 'note', 'data-doc-ask-why': '' }, c3ic('lock', 'sm'), 'The agent works in your terminal session, so this page cannot start it, and no route lists what it proposes. Copy the request to the session; its proposal is recorded through the proposal routes and is accepted here only by your slide, bound to its hash.'));
+    if (S.prop) kids.push(propCase());
+    else if (demo) kids.push(el('div', { class: 'dim', style: 'font-size:var(--fs-2)' }, 'The agent drafts the change as a new version and shows you the difference. Nothing is saved or shared until you accept it.'));
+    return el('div', { class: 'dpn' }, kids);
+  };
+  async function askDemo() {
+    const pr = (S.prompt || '').trim(); if (!pr) { say('Tell the agent what to change'); return; }
+    const before = S.text || ''; const drafted = demoDraft(splitDoc(before), pr); const after = sectionsToText(before, drafted);
+    const r = await pmPost('/api/doc-sheet/propose', { ...base, prompt: pr, after });
+    if (!r || !r.ok) { say((r && r.error) || 'The agent did not answer.'); return; }
+    S.prop = { id: r.id, hash: r.hash, prompt: pr, before, after, nextV: nextV(doc.v) }; draw();
+  }
+  function propCase() {
+    const P = S.prop; const D = changedSections(P.before, P.after);
+    const c = renderCase({ id: 'docedit:' + doc.path, sit: 'You asked: “' + P.prompt + '”. The draft changes ' + D.length + ' section' + (D.length === 1 ? '' : 's') + ' and saves as ' + P.nextV + '. Nothing is shared until you send it.', conf: 76,
+      chg: D.map((x) => ['notes', 'Section: ' + x.name, x.kind, 'warn']), cta: 'Slide to accept ' + P.nextV,
+      opts: [{ id: 'ac', l: 'Accept as ' + P.nextV, rec: 1, fx: [['check', 'Health is re-checked', 'ok'], ['lock', 'Bound to proposal ' + P.hash.slice(0, 8), '']] }, { id: 'rf', l: 'Change the request', fx: [] }, { id: 'ds', l: 'Discard', fx: [] }] },
+    { onConfirm: async ({ option }) => {
+      if (option.id === 'ds') { S.prop = null; say('Discarded.'); draw(); return; }
+      if (option.id === 'rf') { S.prop = null; draw(); const t = ui.body.querySelector('#dpr'); if (t) t.focus(); return; }
+      const r = await pmPost('/api/doc-sheet/accept', { ...base, id: P.id, hash: P.hash });
+      if (!r || !r.ok) { say('Not accepted: ' + ((r && (r.error || r.reason)) || 'the proposal changed.')); return; }
+      S.prop = null; S.changed = true; S.revs = null; S.meta = null; S.metaFor = null; S.texts = {}; S.health = null; S.hAsk = false; doc.v = P.nextV; if (doc.st !== 'current') doc.st = 'current';
+      await loadText(); go('read'); say('Saved as ' + P.nextV + '. History records your request.');
+    } });
+    const viz = diffNode(D.map((x) => ({ ...x })));
+    c.insertBefore(viz, c.querySelector('.chgl') || c.querySelector('.opts'));
+    return c;
+  }
+
+  /* History */
+  const histBody = () => {
+    if (S.revs === null) return el('div', { class: 'fold', role: 'status' }, c3ic('clock', 'sm'), 'Reading the history.');
+    if (!S.revs.length) return el('div', { class: 'fold' }, c3ic('info', 'sm'), S.revsErr || 'No revision is recorded yet. The first save through this sheet starts the history.');
+    const rs = S.revs.slice().reverse();
+    const cmp = S.cmp != null ? S.revs.find((r) => r.rev === S.cmp) : null;
+    return el('div', { class: 'dpn' }, el('ul', { class: 'hx' }, rs.map((r) => {
+      const prev = S.revs.find((x) => x.rev === r.rev - 1);
+      return el('li', null, el('span', { class: 'chip2', style: 'color:' + (byName(r.by) === 'Agent' ? 'var(--purple)' : 'var(--acc)') }, c3ic(byName(r.by) === 'Agent' ? 'spark' : 'user', 'sm'), byName(r.by)),
+        el('span', null, el('b', null, r.v || 'Revision ' + r.rev), ' ' + (r.why || ''), el('small', null, prev ? el('button', { type: 'button', class: 'chip2 lk', 'data-doc-cmp': String(r.rev), onclick: () => cmpWith(r.rev) }, c3ic('eye', 'sm'), 'Compare with ' + (prev.v || 'revision ' + prev.rev)) : 'First version')),
+        el('span', { class: 'w' }, dayName(r.at)));
+    })), cmp ? el('div', { class: 'dpn' }, el('h4', { style: 'margin:0;font-size:var(--fs-3)' }, ((S.revs.find((x) => x.rev === cmp.rev - 1) || {}).v || 'Revision ' + (cmp.rev - 1)) + ' to ' + (cmp.v || 'revision ' + cmp.rev)), S.cmpNode || el('div', { class: 'fold' }, c3ic('clock', 'sm'), 'Comparing.')) : null);
+  };
+  async function cmpWith(rev) {
+    if (S.cmp === rev) { S.cmp = null; draw(); return; }
+    S.cmp = rev; S.cmpNode = null; draw();
+    const [a, b] = await Promise.all([textAt(rev - 1), textAt(rev)]);
+    if (S.cmp !== rev) return;
+    S.cmpNode = a == null || b == null ? el('div', { class: 'fold w' }, c3ic('alert', 'sm'), 'That revision could not be read.') : diffNode(changedSections(a, b));
+    draw();
+  }
+
+  /* Health */
+  const healthBody = () => {
+    const h = S.health;
+    if (!h) return el('div', { class: 'fold', role: 'status' }, c3ic('clock', 'sm'), 'Checking this document.');
+    if (h.err) return el('div', { class: 'fold w', role: 'alert' }, c3ic('alert', 'sm'), 'The checks could not run: ' + h.err + '. Nothing is shown.');
+    const unanswered = h.checks.filter((c) => c.pass === null).length;
+    return el('div', { class: 'dpn' }, el('div', { class: 'chips2', 'data-doc-health': '' }, el('span', { class: 'ki', style: 'color:' + hcol(h) }, c3ic('shield')), el('b', null, h.passed + ' of ' + h.total + ' checks pass')),
+      unanswered ? el('p', { class: 'dim', style: 'font-size:var(--fs-2);margin:0' }, unanswered + ' check' + (unanswered === 1 ? '' : 's') + ' not counted: not enough input.') : null,
+      el('ul', { class: 'chgl' }, h.checks.map((c) => el('li', { class: c.pass === null ? '' : c.pass ? 'ok' : 'bad', 'data-check': c.id }, c3ic(c.pass === null ? 'info' : c.pass ? 'check' : 'alert', 'sm'),
+        el('span', null, (c.name || NAMES[c.id] || c.id) + ': ' + c.reason + ' ', c.pass === false && !generated ? el('button', { type: 'button', class: 'chip2 lk', 'data-doc-fix': c.id, onclick: () => { S.prompt = c.fix || 'Fix: ' + (NAMES[c.id] || c.id) + ' (' + c.reason + ')'; go('ask'); } }, c3ic('spark', 'sm'), 'Fix with the agent') : null),
+        el('span', { class: 'tag' }, c.pass === null ? 'no input' : c.pass ? 'pass' : 'fail')))),
+      el('div', { class: 'dim', style: 'font-size:var(--fs-2)' }, 'Health answers one question: can I trust this document without rereading it? Checks are recomputed from the text every time it changes.'));
+  };
+
+  const linksBody = () => (relations ? relations(doc, (d) => { if (S.open) S.open(d); }) : el('div', { class: 'fold' }, c3ic('info', 'sm'), 'No relation is recorded for this document.'));
+
+  /* a load that finished in the background must not redraw under a hand that is typing */
+  const drawBg = () => { const a = document.activeElement; if (S.mode === 'edit' && a && ui && ui.body.contains(a) && a.closest('[data-sec],#dwhy')) return; draw(); };
+  function draw() {
+    if (!ui) return;
+    const body = S.mode === 'read' ? readBody(false) : S.mode === 'edit' ? readBody(true) : S.mode === 'ask' ? askBody() : S.mode === 'hist' ? histBody() : S.mode === 'health' ? healthBody() : linksBody();
+    const keep = ui.body.querySelector('textarea,input');
+    const had = keep && document.activeElement === keep ? { id: keep.id, s: keep.selectionStart } : null;
+    ui.body.replaceChildren(el('div', { class: 'dpn' }, head(), seg(), body));
+    if (had && had.id) { const n = ui.body.querySelector('#' + had.id); if (n) { n.focus(); try { n.setSelectionRange(had.s, had.s); } catch { /* not a text field */ } } }
+  }
+
+  ui = openSheet({ title: doc.name, icon: 'doc', dw: true, body: el('div', { class: 'dpn' }), onClose: () => { if (S.changed && onChanged) onChanged(); } });
+  S.open = (d) => { ui.close(); if (S.openOther) S.openOther(d); };
+  ui.setOpener = (fn) => { S.openOther = fn; };
+  draw();
+  (async () => {
+    await loadText(); drawBg();
+    if (S.mode === 'health' && !S.hAsk) loadHealth();
+    if (S.mode === 'hist') loadRevs().then(draw);
+    loadHealth();
+    await loadRevs(); loadMeta();
+  })();
+  return ui;
+}

package/workspace/public/pm/c3-dock.js

@@ -0,0 +1,180 @@
+/* pm/c3-dock.js — the console3 dock on /c3.html: the mockup's repository, branch and session tree (console3.html renderDock, line 1957).
+ * Header: the repository select, a start link and the fold button. Tree: one .br per working tree of the repository, its branch on
+ * top and the sessions that run in that tree under it, each with a state glyph, a provider icon and a name. Below the tree: the
+ * selected session's detail (what it is, where it runs, how long, the output tail, the Message box) and a scratchpad.
+ * Real data only:
+ *   GET /api/git/worktrees?ws=       the working trees and their branches (the tree is these, not every branch of the repository)
+ *   GET /api/sessions                the sessions; one belongs to a tree through its `tree` path and to a repository through `ws`
+ *   GET /api/sessions/transcript     the output tail, already stripped of terminal codes
+ *   GET /api/runs                    the needs-you count only (a run that asks, holds a permission or needs the terminal); the cards are on the Terminal page
+ *   GET and POST /api/scratchpad     the session's pad
+ * The Message box, Send and End are DISABLED (drawn as the mockup's): no page press route sends a prompt to a session, and none is invented here.
+ * Icon language (c3-terminal-icons.js): the header's AGENT button (spark) opens the Terminal page, the full agent surfaces; the TERMINAL glyph (`>_`) is the rail's
+ * button (it opens this dock, the terminals of your branches) and every "Open the session" link. The rail draws one glyph button per session below it. */
+import { el } from './dom.js';
+import { pmGet, pmPost } from './http.js';
+import { c3ic } from './pm-work-view.js';
+import { ic, TIPS } from './c3-terminal-icons.js';
+import { source, needsYou } from './c3-terminal-data.js';
+import { toast } from './c3-toast.js';
+
+/* the mockup's SM (line 1953): glyph and class by state. The server's `shown` words map onto them. */
+const SM = { working: ['●', 'w'], needs: ['◆', 'n'], quiet: ['◼', ''], blocked: ['◇', 'b'], exited: ['○', ''] };
+const smOf = (s) => SM[s.shown] || SM[s.state] || ['●', ''];
+const shownOf = (s, ended) => (ended && ended.has(s.id) ? 'exited' : s.shown);
+const PI = { claude: 'term', cloud: 'cloud', codex: 'bolt', shell: 'term', local: 'term' };   // spark is reserved for the agent surfaces
+const PN = { claude: 'Claude', cloud: 'Claude cloud', codex: 'Codex', shell: 'Shell', local: 'Local' };
+const NOEND = 'Ending a session needs the page route /api/session/remove, which did not answer. Use the terminal in the main app.';
+const MORE = 'Sending a prompt is not available on this page: no safe route sends one. Use the session\'s terminal in the main app.';
+const MAX_TREES = 10;
+
+const ago = (ms) => {
+  if (!Number.isFinite(ms)) return null;
+  const m = Math.max(0, Math.round(ms / 60000));
+  return m < 1 ? 'just now' : m < 60 ? m + ' min' : m < 1440 ? Math.round(m / 60) + ' h' : Math.round(m / 1440) + ' d';
+};
+const clean = (t) => String(t || '').replace(/[\u0000-\u0008\u000b-\u001f\u007f]/g, '').replace(/[ \t]+$/gm, '');
+const tail = (t, n) => clean(t).split('\n').map((l) => l.trimEnd()).filter((l, i, a) => l.trim() || (a[i - 1] && a[i - 1].trim())).slice(-n).join('\n').slice(-900);
+
+export function createDock(opts) {
+  const o = opts || {};
+  const S = { ws: '', sessions: [], trees: null, sel: null, err: null, seq: 0, ended: new Set(), confirm: null, need: 0 };
+  const sel = el('select', { 'aria-label': 'Repository', 'data-c3pg': 'ws-select' });
+  const tree = el('div', { class: 'dk-tree', 'data-c3pg': 'dock-tree' });
+  const detail = el('div', { class: 'dk-p', 'data-c3pg': 'dock-detail' });
+  const body = el('div', { class: 'dk-body' }, tree, detail);
+  /* the AGENT button: the full agent surfaces (the Terminal page), not a terminal. It carries the needs-you count; the header's button opens the same page. */
+  const agentBdg = el('span', { class: 'bdg', hidden: true, 'data-c3pg': 'dock-agent-count' }, '0');
+  const listBtn = el('button', { type: 'button', class: 'ib sm', title: TIPS.agentDock, 'aria-label': TIPS.agentDock, 'aria-haspopup': 'dialog', 'data-c3pg': 'dock-agent', style: 'position:relative',
+    onclick: () => { import('./c3-terminal.js').then((m) => m.openTerminalPage()); } }, ic('pulse'), agentBdg);
+  const side = el('aside', { class: 'c3dock dock', 'aria-label': 'Sessions', 'data-c3pg': 'dock' },
+    el('div', { class: 'dk-h' }, c3ic('repo', 'sm'), sel,
+      listBtn,
+      el('a', { class: 'ib sm', href: '/', title: 'Start a branch and session in the main app. A session starts over the terminal connection; the page has no route for it.', 'aria-label': 'Start a branch and session in the main app' }, c3ic('plus', 'sm')),
+      el('button', { type: 'button', class: 'ib sm', title: 'Fold the dock (Ctrl J)', 'aria-label': 'Fold the dock', onclick: () => o.setOpen && o.setOpen(false) }, c3ic('fold'))),
+    body);
+  const rail = el('div', { class: 'c3dock dock rail', 'data-c3pg': 'dock-rail' });
+
+  const withEnd = (s) => (S.ended.has(s.id) ? { ...s, shown: 'exited', label: 'ended' } : s);
+  const mine = () => S.sessions.filter((s) => s.ws === S.ws && !s.automatic).map(withEnd);
+  const inTree = (dir) => mine().filter((s) => s.tree === dir).sort((a, b) => (a.shown === 'exited') - (b.shown === 'exited') || String(b.created).localeCompare(String(a.created)));
+  const pick = (id) => { S.sel = id; S.selTree = null; S.confirm = null; drawTree(); drawDetail(); drawRail(); if (o.setOpen) o.setOpen(true); };
+
+  function row(s) {
+    const g = smOf(s);
+    return el('button', { type: 'button', class: 'sr', 'data-c3-sess': s.id, 'aria-current': String(s.id === S.sel), title: (PN[s.agent] || s.agent) + ' · ' + (s.label || s.shown), onclick: () => pick(s.id) },
+      el('span', { class: 'mk ' + g[1] }, g[0]), c3ic(PI[s.agent] || 'term', 'sm'), el('span', { class: 'nm' }, s.name));
+  }
+  function drawTree() {
+    if (S.err) { tree.replaceChildren(el('p', { class: 'dim mono', style: 'font-size:var(--fs-2);padding:4px', role: 'status' }, S.err)); return; }
+    if (!S.trees) { tree.replaceChildren(el('p', { class: 'dim mono', style: 'font-size:var(--fs-2);padding:4px', role: 'status' }, 'Reading the repository')); return; }
+    const all = S.trees.filter((t) => !t.missing && (t.ws === S.ws || t.main));
+    const list = all.slice(0, MAX_TREES);
+    const nodes = list.map((t) => {
+      const ss = inTree(t.dir);
+      const body = ss.length ? ss.slice(0, 4).map(row)
+        : [t.main ? el('span', { class: 'dim mono', style: 'font-size:var(--fs-1);padding:2px 6px' }, 'no session')
+          : el('a', { class: 'chip2 lk', href: '/', title: 'Start a session on this branch in the main app' }, c3ic('plus', 'sm'), 'session')];
+      if (ss.length > 4) body.push(el('span', { class: 'dim mono', style: 'font-size:var(--fs-1);padding:2px 6px' }, '+' + (ss.length - 4) + ' more'));
+      return el('div', { class: 'br', 'data-c3-tree': t.dir }, el('button', { type: 'button', class: 'bn', 'data-c3-branch': t.dir, 'aria-current': String(!!S.sel && ss.some((x) => x.id === S.sel)), title: ss.length ? 'Open the session on this branch' : 'This branch has no session', onclick: () => { if (ss[0]) pick((ss.find((x) => x.shown !== 'exited') || ss[0]).id); else { S.sel = null; S.selTree = t.dir; drawTree(); drawDetail(); } },
+      style: 'border:0;background:none;text-align:left;width:100%;cursor:pointer' }, c3ic('branch', 'sm'), t.branch || '(detached)'), el('div', { class: 'ss' }, ...body));
+    });
+    // a session whose tree is not one of the listed ones still shows, under its own path
+    const known = new Set(list.map((t) => t.dir));
+    const stray = mine().filter((s) => !known.has(s.tree));
+    if (stray.length) nodes.push(el('div', { class: 'br' }, el('div', { class: 'bn' }, c3ic('branch', 'sm'), 'other trees'), el('div', { class: 'ss' }, ...stray.slice(0, 4).map(row))));
+    if (all.length > MAX_TREES) nodes.push(el('div', { class: 'dim mono', style: 'font-size:var(--fs-1);padding:4px' }, '+' + (all.length - MAX_TREES) + ' more branches in the main app'));
+    tree.replaceChildren(...(nodes.length ? nodes : [el('p', { class: 'dim mono', style: 'font-size:var(--fs-2);padding:4px' }, 'No working tree is registered for this repository.')]));
+  }
+
+  async function drawDetail() {
+    const s = mine().find((x) => x.id === S.sel);
+    if (!s) { const bt = S.selTree && S.trees && S.trees.find((x) => x.dir === S.selTree); detail.replaceChildren(el('p', { class: 'dim mono', style: 'font-size:var(--fs-2)', 'data-c3pg': 'dock-empty' }, bt ? (bt.branch || 'This branch') + ' has no session. A session starts in the main app.' : mine().length ? 'Pick a session above.' : 'No session runs in this repository.')); return; }
+    const t = S.trees && S.trees.find((x) => x.dir === s.tree);
+    const started = ago(Date.now() - Date.parse(s.created));
+    const last = Number.isFinite(s.lastOutputAt) ? ago(Date.now() - s.lastOutputAt) : null;
+    const facts = [started, s.shown === 'working' ? null : (s.label || s.shown), last ? 'last output ' + last + ' ago' : null, s.model && s.model_line ? s.model_line : null].filter(Boolean).join(' · ');
+    const term = el('div', { class: 'term', 'data-c3pg': 'dock-term', tabindex: '0', 'aria-label': 'Output tail' }, 'Reading the output');
+    const pad = el('textarea', { 'aria-label': 'Scratchpad', style: 'width:100%;min-height:56px;margin-top:6px', 'data-c3pg': 'dock-pad' });
+    const saveBtn = el('button', { type: 'button', class: 'ib sm', title: 'Save the scratchpad', 'aria-label': 'Save the scratchpad', onclick: async () => {
+      const r = await pmPost('/api/scratchpad', { session: s.id, text: pad.value });
+      saveBtn.title = r && r.ok ? 'Saved' : 'Not saved: ' + ((r && r.error) || 'unreadable');
+    } }, c3ic('notes', 'sm'));
+    detail.replaceChildren(...[
+      el('div', { class: 'chips2' }, el('b', { style: 'font-size:var(--fs-3)' }, s.name), el('span', { class: 'chips2 dim mono', style: 'font-size:var(--fs-1)' }, c3ic(PI[s.agent] || 'term', 'sm'), (PN[s.agent] || s.agent) + ' · ' + ((t && t.branch) || 'no branch'))),
+      el('div', { class: 'dim mono', style: 'font-size:var(--fs-1)' }, facts),
+      s.shown === 'needs' ? el('div', { class: 'fold a' }, c3ic('alert', 'sm'), 'needs you') : null,
+      el('a', { class: 'chip2 lk', href: '/', 'data-c3pg': 'dock-open-session', title: TIPS.terminalOpen, 'aria-label': 'Open the session ' + s.name + ' in the main app' }, ic('term', 'sm'), 'Open the session'),
+      term,
+      el('div', { class: 'form' },
+        el('input', { type: 'text', readonly: true, 'data-off': '', placeholder: s.shown === 'needs' ? 'Your answer' : 'Message', 'aria-label': 'Message', title: MORE, 'data-c3pg': 'dock-msg' }),
+        el('button', { type: 'button', class: 'ib pri sm', disabled: true, title: MORE, 'aria-label': 'Send (not available here)', 'data-c3pg': 'dock-send' }, c3ic('out', 'sm')),
+        s.shown === 'exited' ? null : el('button', { type: 'button', class: 'ib sm', title: 'End the session', 'aria-label': 'End the session', 'aria-expanded': String(S.confirm === s.id), 'data-c3pg': 'dock-end', onclick: () => { S.confirm = S.confirm === s.id ? null : s.id; drawDetail(); } }, c3ic('stop', 'sm'))),
+      S.confirm === s.id ? el('div', { class: 'dk-confirm', role: 'group', 'aria-label': 'End this session?', 'data-c3pg': 'dock-confirm' }, el('span', { class: 'dim mono' }, 'End it? Any pending change stays a proposal.'),
+        el('button', { type: 'button', class: 'chip2 lk', 'data-c3pg': 'dock-end-yes', onclick: () => endSession(s) }, c3ic('stop', 'sm'), 'End'),
+        el('button', { type: 'button', class: 'chip2 lk', onclick: () => { S.confirm = null; drawDetail(); } }, 'Keep it')) : null,
+      s.shown === 'exited' ? el('div', { class: 'chips2' }, el('span', { class: 'dim mono', style: 'font-size:var(--fs-2)' }, 'ended')) : null,
+      el('details', null, el('summary', { class: 'chips2 dim', style: 'cursor:pointer;font-size:var(--fs-2)' }, c3ic('notes', 'sm'), 'scratchpad'), pad, saveBtn)].filter(Boolean));
+    const [tr, sp] = await Promise.all([pmGet('/api/sessions/transcript?id=' + encodeURIComponent(s.id) + '&max=2400'), pmGet('/api/scratchpad?session=' + encodeURIComponent(s.id))]);
+    if (S.sel !== s.id) return;
+    const txt = tr && tr.ok ? tail(tr.text, 10) : '';
+    term.textContent = txt || (tr && tr.ok ? 'No output yet.' : 'The output could not be read.');
+    if (sp && sp.ok && typeof sp.text === 'string') pad.value = sp.text;
+  }
+
+  /* End: the page's own route POST /api/session/remove (it ends the process and removes the session). In demo the write is answered locally and the session is only marked ended. */
+  async function endSession(s) {
+    S.confirm = null;
+    const r = await pmPost('/api/session/remove', { id: s.id });
+    if (r && r.ok) { S.ended.add(s.id); toast({ text: r.removed === false ? 'Asked it to end. Press End again to remove it.' : 'Ended. Any pending change stays a proposal.', timeout: 4200 }); }
+    else toast({ text: (r && r.error) ? 'Not ended: ' + r.error : NOEND, tone: 'error' });
+    drawTree(); drawDetail(); drawRail(); refresh();
+  }
+
+  function drawRail() {
+    const all = S.sessions.filter((s) => !s.automatic);   // the mockup's rail lists the first six sessions of every repository
+    const dots = all.slice(0, 6).map((s) => el('button', { type: 'button', class: 'ib sm', 'data-c3-rail': s.id, title: s.name + ' \u00b7 ' + (s.label || s.shown), 'aria-label': 'Show the session ' + s.name + ' in the dock', onclick: () => pick(s.id) }, el('span', { class: 'mk ' + smOf(s)[1] }, smOf(s)[0])));
+    /* the TERMINAL glyph: this button opens the dock (the terminals of your branches). The needs-you badge is on the agent button, not here. */
+    rail.replaceChildren(el('button', { type: 'button', class: 'ib', title: TIPS.terminalRail, 'aria-label': 'Open the sessions dock', 'data-c3pg': 'rail-open', onclick: () => o.setOpen && o.setOpen(true) }, ic('term')), ...dots);
+  }
+
+  async function refresh() {
+    const seq = ++S.seq; const ws = S.ws;
+    const [ss, wt, rn] = await Promise.all([pmGet('/api/sessions'), ws ? pmGet('/api/git/worktrees?ws=' + encodeURIComponent(ws)) : Promise.resolve(null), source().getRuns().catch(() => null)]);
+    if (seq !== S.seq) return;
+    S.need = needsYou(rn); agentBdg.textContent = String(S.need); agentBdg.hidden = !S.need;
+    if (ss && Array.isArray(ss.sessions)) S.sessions = ss.sessions; else S.err = 'The sessions could not be read.';
+    if (wt && wt.ok) { S.trees = wt.worktrees || []; S.err = null; } else if (!S.trees) S.trees = [];
+    const m = mine();
+    if (!m.some((x) => x.id === S.sel)) S.sel = (m.find((x) => x.shown !== 'exited') || m[0] || {}).id || null;
+    drawTree(); drawRail();
+    const cur = detail.getAttribute('data-sel');
+    if (cur !== String(S.sel)) { detail.setAttribute('data-sel', String(S.sel)); drawDetail(); }
+    if (o.onCount) { const all = S.sessions.filter((x) => !x.automatic); o.onCount(all.filter((x) => x.shown === 'working').length, S.need); }
+  }
+
+  /* the mockup's keys: Ctrl or Cmd J folds and opens the dock (title "Open sessions (Ctrl J)"); the arrows move along the tree */
+  const onKey = (e) => {
+    if ((e.ctrlKey || e.metaKey) && !e.altKey && !e.shiftKey && (e.key === 'j' || e.key === 'J')) {
+      if (!side.isConnected && !rail.isConnected) return;
+      e.preventDefault(); if (o.setOpen) o.setOpen(side.hidden); return;
+    }
+    if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') && e.target.closest && e.target.closest('.dk-tree')) {
+      const items = [...tree.querySelectorAll('button.sr,button.bn')]; const i = items.indexOf(e.target.closest('button'));
+      if (i >= 0) { e.preventDefault(); const n = items[i + (e.key === 'ArrowDown' ? 1 : -1)]; if (n) n.focus(); }
+    }
+  };
+  let timer = null;
+  const api = {
+    side, rail,
+    setWorkspaces(list, ws) {
+      S.ws = ws;
+      sel.replaceChildren(...(list.length ? list : [{ id: ws, name: ws || 'workspace' }]).map((w) => el('option', { value: w.id, selected: w.id === ws }, w.name || w.id)));
+      sel.onchange = (e) => { S.ws = e.target.value; S.trees = null; S.sel = null; detail.removeAttribute('data-sel'); if (o.onWs) o.onWs(S.ws); drawTree(); refresh(); };
+    },
+    start() { document.addEventListener('keydown', onKey); drawTree(); drawRail(); refresh(); timer = setInterval(refresh, 15000); if (source().subscribe) S.unsub = source().subscribe(refresh); },
+    stop() { if (timer) clearInterval(timer); if (S.unsub) S.unsub(); document.removeEventListener('keydown', onKey); },
+    refresh,
+  };
+  return api;
+}