create-pmos 0.15.0 → 0.16.0

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

@@ -0,0 +1,279 @@
+/* pm/tab-doc.js — the document tab body: view · raw · edit · diff, with save, revert and a dirty flag.
+ *
+ * A port of the prototype's doc pane (template lines 869–927, derivation 2020–2045). The four modes
+ * are the whole design: `view` renders the markdown, `raw` shows the file tinted by line kind,
+ * `edit` is the buffer, and `diff` is a real LCS line diff of the buffer against what is on disk.
+ * The diff is COMPUTED, never narrated — a "2 sections differ" that nothing read is the watermelon
+ * this repo has a word for, and the same rule that governs artifact sync governs this pane.
+ *
+ * ── Where the text comes from ───────────────────────────────────────────────────────────────
+ *   1. `savedDocs[path]` — saved in this window, so it is what the pane must show;
+ *   2. fixture mode → the prototype's seed documents (`fixture.js`, `rawFor`);
+ *   3. real mode → the file on disk, read once through the local server (`/api/doc`) and cached
+ *      by path. Nothing is fetched from anywhere but this machine.
+ * A file that cannot be read says so, in the pane, with the reason — never a blank page.
+ *
+ * ── Why the textarea outlives the render ────────────────────────────────────────────────────
+ * Every keystroke is a state change, and a state change repaints the panel. A textarea rebuilt on
+ * each keystroke loses the caret, so the element is created once per tab and kept; its text is
+ * written back only when it actually differs from what the box already holds.
+ */
+
+import { el, setChildren } from './dom.js';
+import { state, setState, FIXTURE } from './state.js';
+import * as FX from './fixture.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));
+
+/* ── reading ───────────────────────────────────────────────────────────────────────────────── */
+
+const disk = new Map();        // path -> text read from this machine
+const pending = new Set();     // paths whose read is in flight
+const saveErr = new Map();     // path -> why the last save was refused
+
+let dataMod = null;
+import('./data.js').then((m) => { dataMod = m; }).catch(() => { dataMod = null; });
+
+/** The workspace id the doc endpoints key on. The data layer names it; these are its aliases. */
+const wsId = () => state.wsId || state.ws || state.product || '';
+
+/* A REFERENCE is not a file. Panel 3's links section files `jira://ATL-501`, `confluence://PM/x`,
+ * `gdoc://x-brief` — URIs naming a record in someone else's system, deliberately kept out of the
+ * repo (AC5). Opening one used to be read as a path and sent to `/api/doc`, which answered 404 on
+ * every one of them: a request that cannot succeed, made on every click, logged as a page error and
+ * shown to the PM as "this file could not be read". PMOS holds no credential for any of those
+ * systems, so the honest pane says what the reference IS and that nothing was read from it.
+ * Anything with a scheme is a reference; a repo path never has one. */
+const REFERENCE_URI = /^[a-z][a-z0-9+.-]*:\/\//i;
+const isReference = (p) => REFERENCE_URI.test(String(p || ''));
+
+/** The name of the system a reference scheme belongs to; the scheme itself when it is not one we file. */
+const SYSTEM_OF = { jira: 'Jira', confluence: 'Confluence', gdoc: 'Google Docs', google: 'Google Docs' };
+
+const referenceStub = (tab) => {
+  const scheme = String(tab.path).split('://')[0].toLowerCase();
+  const system = SYSTEM_OF[scheme] || scheme;
+  return '---\npath: ' + tab.path + '\nrole: ' + tab.role + '\ninitiative: ' + (tab.slug || '—')
+    + '\n---\n\n# ' + String(tab.path).split('://').pop()
+    + '\n\nThis is a REFERENCE, not a file in this repository: it names a record in ' + system + '.'
+    + '\n\nNothing was read and nothing was contacted — PMOS holds no credential for ' + system + '. '
+    + 'The reference is recorded so this initiative says where the work is; open it in ' + system
+    + ' to read it.\n';
+};
+
+const stub = (tab, body) =>
+  '---\npath: ' + tab.path + '\nrole: ' + tab.role + '\ninitiative: ' + (tab.slug || '—')
+  + '\n---\n\n# ' + String(tab.path).split('/').pop() + '\n\n' + body;
+
+/** Read a document from the local server, once, then repaint. */
+function requestDoc(tab) {
+  const path = tab.path;
+  if (pending.has(path)) return;
+  pending.add(path);
+  const done = (text) => { pending.delete(path); disk.set(path, text); setState({}); };
+  const load = (dataMod && typeof dataMod.readDoc === 'function')
+    ? dataMod.readDoc(path)
+    : fetch('/api/doc?ws=' + encodeURIComponent(wsId()) + '&path=' + encodeURIComponent(path))
+      .then((r) => (r.ok ? r.text() : Promise.reject(new Error('HTTP ' + r.status))));
+  Promise.resolve(load).then(
+    (text) => done(typeof text === 'string' ? text : String(text == null ? '' : text)),
+    (e) => done(stub(tab, 'This file could not be read: ' + (e && e.message ? e.message : e)
+      + '\n\nNothing was rendered from it. That is the failure being stated rather than an empty page shown.')),
+  );
+}
+
+/**
+ * The text on disk for this tab — the baseline every diff and the dirty flag are measured against.
+ * Exported because panel 4's `copy` button carries the same text.
+ */
+export function docText(tab) {
+  if (!tab || !tab.path) return '';
+  const saved = state.savedDocs[tab.path];
+  if (saved != null) return saved;
+  if (FIXTURE) return FX.rawFor(tab, state.savedDocs);
+  if (isReference(tab.path)) return referenceStub(tab);
+  if (disk.has(tab.path)) return disk.get(tab.path);
+  requestDoc(tab);
+  return stub(tab, 'reading ' + tab.path + ' …');
+}
+
+/* ── writing ───────────────────────────────────────────────────────────────────────────────── */
+
+/**
+ * Save (line 2039). In fixture mode the buffer simply becomes the saved text — there is no disk to
+ * write to and pretending otherwise would be a fiction. In real mode the write goes to the local
+ * server with the base it was opened from, so a file that changed underneath is REFUSED rather
+ * than silently overwritten; the refusal is shown where the PM is looking and the buffer is kept.
+ */
+function save(tab, text) {
+  const path = tab.path;
+  const commit = () => setState((s) => {
+    const de = { ...s.docEdits }; delete de[path];
+    return { savedDocs: { ...s.savedDocs, [path]: text }, docEdits: de };
+  });
+  saveErr.delete(path);
+  if (FIXTURE) { commit(); return; }
+
+  const base = disk.has(path) ? disk.get(path) : (state.savedDocs[path] ?? '');
+  const write = (dataMod && typeof dataMod.saveDoc === 'function')
+    ? dataMod.saveDoc({ ws: wsId(), path, base, text })
+    : fetch('/api/doc/save', {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ ws: wsId(), path, base, text }),
+    }).then((r) => r.json());
+  Promise.resolve(write).then(
+    (out) => {
+      if (out && out.ok === false) { saveErr.set(path, out.error || 'refused'); setState({}); return; }
+      disk.set(path, text);
+      commit();
+    },
+    (e) => { saveErr.set(path, (e && e.message) || 'could not reach the workspace server'); setState({}); },
+  );
+}
+
+/** Revert (line 2043): drop the buffer, keep the file. */
+function revert(tab) {
+  saveErr.delete(tab.path);
+  setState((s) => { const de = { ...s.docEdits }; delete de[tab.path]; return { docEdits: de }; });
+}
+
+/* ── the four bodies ───────────────────────────────────────────────────────────────────────── */
+
+const FM_K = 'font-size:10.5px;color:var(--muted-foreground);padding-top:2px;font-family:var(--mono)';
+const FM_V = 'overflow-wrap:anywhere;font-family:var(--mono);font-size:11.5px';
+
+function viewBody(text) {
+  const doc = FX.mdParse(text);
+  const fm = [];
+  doc.fm.forEach((fp) => { fm.push(el('span', { style: FM_K }, iv(fp.k)), el('span', { style: FM_V }, iv(fp.v))); });
+  return el('div', {
+    style: 'flex:1;overflow-y:auto;background:var(--background);color:var(--foreground);padding:20px 24px 60px;font-size:14px;line-height:1.65',
+  },
+    el('div', { style: 'max-width:72ch' },
+      el('div', {
+        style: 'border:1px solid var(--border);background:var(--card);padding:10px 12px;margin-bottom:18px;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:12.5px',
+      }, fm),
+      el('h1', {
+        style: 'font-size:21px;font-weight:600;line-height:1.3;margin:4px 0 12px;text-wrap:balance;font-family:var(--sans)',
+      }, iv(doc.title)),
+      doc.blocks.map((bk) => el('div', null,
+        bk.isH ? el('h2', {
+          style: 'font-size:16px;font-weight:600;line-height:1.35;margin:24px 0 8px;padding-bottom:5px;border-bottom:1px solid var(--border)',
+        }, iv(bk.h)) : null,
+        bk.isP ? el('p', { style: 'margin:0 0 12px' }, iv(bk.p)) : null,
+        bk.isList ? el('ul', { style: 'margin:0 0 12px;padding-left:22px' },
+          bk.items.map((li) => el('li', { style: 'margin:0 0 5px;padding-left:2px' }, iv(li)))) : null,
+      )),
+    ),
+  );
+}
+
+function rawBody(text) {
+  return el('div', {
+    style: 'flex:1;overflow-y:auto;background:var(--background);padding:14px 16px;font-family:var(--mono);font-size:12px;line-height:1.7',
+  }, text.split('\n').map((l) => {
+    const ln = FX.rawLine(l);
+    return el('div', {
+      style: 'color:' + ln.c + ';font-weight:' + ln.w + ';white-space:pre-wrap;overflow-wrap:anywhere;min-height:1.2em',
+    }, iv(ln.t));
+  }));
+}
+
+function diffBody(raw, text, dirty) {
+  const rows = dirty ? FX.diffLines(raw, text) : [FX.NO_DIFF_ROW];
+  return el('div', {
+    style: 'flex:1;overflow-y:auto;background:var(--background);padding:14px 0;font-family:var(--mono);font-size:12px;line-height:1.7',
+  }, rows.map((dr) => el('div', {
+    style: 'color:' + dr.c + ';background:' + dr.bg + ';padding:0 16px;white-space:pre-wrap;overflow-wrap:anywhere;min-height:1.2em',
+  }, iv(dr.t))));
+}
+
+/* ── per-tab state that is DOM, not data ───────────────────────────────────────────────────── */
+
+const boxes = new Map();      // tab id -> the persistent textarea for that tab
+
+function editBox(tab) {
+  let ta = boxes.get(tab.id);
+  if (ta) return ta;
+  ta = el('textarea', {
+    style: 'flex:1;background:var(--background);color:var(--foreground);padding:14px 16px;font-family:var(--mono);font-size:12px;line-height:1.7',
+    onInput: (e) => {
+      const v = e.target.value;
+      saveErr.delete(tab.path);
+      setState((s) => ({ docEdits: { ...s.docEdits, [tab.path]: v } }));
+    },
+  });
+  ta.spellcheck = false;      // a property, not an attribute — the prototype renders no attribute
+  boxes.set(tab.id, ta);
+  return ta;
+}
+
+/** Release what a closed doc tab held. Called by panel-tabs.js when the tab goes away. */
+export function disposeDoc(id) {
+  boxes.delete(id);
+}
+
+/* ── mount ─────────────────────────────────────────────────────────────────────────────────── */
+
+/**
+ * Render the doc pane for `tab` into `host` — the pane element panel 4 keeps for this tab.
+ * Everything but the edit box is rebuilt on each paint; the box is kept so typing survives it.
+ */
+export function mountDoc(host, tab) {
+  const raw = docText(tab);
+  const text = state.docEdits[tab.path] ?? raw;
+  const dm = state.docModes[tab.id] ?? 'view';
+  const dirty = text !== raw;
+  const err = saveErr.get(tab.path);
+
+  const modeBtns = ['view', 'raw', 'edit', 'diff'].map((mm) => el('button', {
+    onClick: () => setState((s) => ({ docModes: { ...s.docModes, [tab.id]: mm } })),
+    style: 'font-family:var(--mono);font-size:10.5px;padding:4px 10px;min-height:26px;background:'
+      + (dm === mm ? 'var(--secondary)' : 'transparent')
+      + ';color:' + (dm === mm ? 'var(--foreground)' : 'var(--muted-foreground)')
+      + ';border:1px solid ' + (dm === mm ? 'var(--input)' : 'transparent'),
+    hover: 'border-color:var(--ring)',
+  }, iv(mm)));
+
+  const saveBtn = dirty ? el('button', {
+    onClick: () => save(tab, text),
+    style: 'margin-left:8px;font-family:var(--mono);font-size:10.5px;padding:4px 10px;min-height:26px;background:var(--brand);color:oklch(0.987 0.002 197.1);font-weight:500',
+  }, 'save') : null;
+
+  const revertBtn = dirty ? el('button', {
+    onClick: () => revert(tab),
+    style: 'font-family:var(--mono);font-size:10.5px;padding:4px 10px;min-height:26px;background:var(--secondary);border:1px solid var(--border);color:var(--muted-foreground)',
+    hover: 'border-color:var(--ring)',
+  }, 'revert') : null;
+
+  // The one place a real-mode refusal is reported: the same line that carries the dirty flag, so
+  // a save that did not happen cannot read as one that did.
+  const dirtyLabel = err ? 'not saved — ' + err : (dirty ? '● modified — unsaved' : 'saved on disk');
+  const dirtyColor = err ? 'var(--destructive)' : (dirty ? 'var(--warning)' : 'var(--muted-foreground)');
+
+  const modeBar = el('div', {
+    style: 'display:flex;gap:2px;align-items:center;padding:6px 10px;border-bottom:1px solid var(--border);background:var(--background)',
+  },
+    modeBtns, saveBtn, revertBtn,
+    el('span', { style: 'margin-left:auto;font-family:var(--mono);font-size:10px;color:' + dirtyColor }, iv(dirtyLabel)),
+  );
+
+  let body;
+  if (dm === 'raw') body = rawBody(text);
+  else if (dm === 'diff') body = diffBody(raw, text, dirty);
+  else if (dm === 'edit') {
+    body = editBox(tab);
+    /* `defaultValue` IS the textarea's child text node, and the prototype's runtime keeps it in
+     * step with the buffer — so the rendered document is in the DOM, not only in a property. On a
+     * box the PM has typed into, writing it moves nothing; `value` is then written only when it
+     * genuinely differs, which is what keeps the caret still mid-sentence. */
+    if (body.defaultValue !== text) body.defaultValue = text;
+    if (body.value !== text) body.value = text;
+  } else body = viewBody(text);
+
+  setChildren(host, [modeBar, body]);
+  return host;
+}
+
+export default mountDoc;

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

@@ -0,0 +1,83 @@
+/* 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' },
+      'no artifact yet — produced when the agent runs this task');
+
+  const body = el('div', {
+    style: 'flex:1;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;