create-pmos 0.52.0 → 0.53.1

package/workspace/public/pm/roadmap.js

@@ -0,0 +1,271 @@
+/* pm/roadmap.js — the Roadmap: Now · Next · Later, ranked (pm-os-absorb Run 2, slice 2D; PRD R20 A, R15, R26, R27).
+ *
+ * Specimen A: Initiatives opens here. Three ranked columns, each a list of cards. Next and Later carry order only, never a
+ * date; a Now card shows its title, stage, "n of m", its health reason when it is not on track, and the check-by date. The
+ * header reads "Now · 5 KR · 3 health" and counts against the advisory cap.
+ *
+ * Ways to move a card, all through one write (POST /api/placements, a `placed` line with `after`):
+ *   - drag the grip: to rank within a column, or into another (Sortable, bd-drag.js: a 150 ms hold on a touch screen);
+ *   - Alt+ArrowUp / Alt+ArrowDown on the card;
+ *   - the ⋯ menu, which is the phone's path: To top, Up, Down, Move to Now, Move to Next, Move to Later, Set check-by. The
+ *     button shows where a touch screen is (any-pointer: coarse); on a desk the same menu opens from a right click or the menu
+ *     key, so a card carries one control there, and first paint stays inside the budget.
+ * Only the PM's press moves a card into Now (R25): the page just posts, and the server's guard answers. A refusal shows in a
+ * toast and the card goes back where it was.
+ *
+ * The data is one GET (roadmap.json). Roadmap watches that GET's `sig` with sig-watch.js, so a placement written from the
+ * CLI or another tab shows within seconds, and never while a drag is live (the answer waits until the drop).
+ *
+ *   mountRoadmap(host, env) → { dispose(), reload() }
+ *   env = { repo, ws, openInitiative(repo, slug), onData?(answer) }
+ */
+
+import { el } from './dom.js';
+import { card, iconButton, dragHandle, button, menu, empty, toast, SEL } from './primitives.js';
+import { watchSig } from './sig-watch.js';
+import { loadSortable, baseOptions, dragSet } from './bd-drag.js';
+import { COPY, shortDate } from './initiatives-copy.js';
+import { getRoadmap, sigKey, place, placed, leaveNow } from './initiatives-api.js';
+import { healthSignal, say, checkBySheet, onContextMenu } from './initiatives-ui.js';
+
+const HORIZONS = ['now', 'next', 'later'];
+
+export function mountRoadmap(host, env) {
+  const root = el('div', { class: 'in-roadmap', 'data-in-view': 'roadmap' });
+  host.replaceChildren(root);
+  const drags = dragSet();
+  let data = null;
+  let error = null;
+  let showDormant = false;
+  let dragging = false;
+  let deferred = null;
+  let focusId = null;
+  let disposed = false;
+  let stop = null;
+  let latest = null;   // the answer the sig watcher read last, drawn when its sig changed
+
+  const ids = (h) => ((data && data.horizons && data.horizons[h]) || []).map((r) => r.id);
+  const rowOf = (id) => {
+    for (const h of HORIZONS) { const r = ((data && data.horizons[h]) || []).find((x) => x.id === id); if (r) return r; }
+    return ((data && data.dormant) || []).find((x) => x.id === id) || null;
+  };
+
+  /* ── writes ───────────────────────────────────────────────────────────────────────────────────────────────────── */
+
+  /** The model after a move, so the card is where the PM put it before the server answers. */
+  function applyLocal(id, horizon, after, extra) {
+    const row = rowOf(id);
+    if (!row || !data) return;
+    for (const h of HORIZONS) data.horizons[h] = data.horizons[h].filter((x) => x.id !== id);
+    data.dormant = (data.dormant || []).filter((x) => x.id !== id);
+    row.horizon = horizon; row.dormant = false;
+    if (horizon === 'now') row.confirmed = true;
+    if (extra && 'check_by' in extra) row.check_by = extra.check_by;
+    const list = data.horizons[horizon];
+    const k = after ? list.findIndex((x) => x.id === after) : -1;
+    if (!after) list.unshift(row); else if (k === -1) list.push(row); else list.splice(k + 1, 0, row);
+    for (const h of HORIZONS) data.horizons[h].forEach((x, i) => { x.rank = i; });
+    const now = data.horizons.now;
+    data.header = {
+      now: { ...data.header.now, count: now.length, kr: now.filter((x) => x.anchor_kind === 'kr').length, health: now.filter((x) => x.anchor_kind === 'health').length },
+      next: { count: data.horizons.next.length },
+      later: { count: data.horizons.later.length, dormant: data.dormant.length },
+    };
+  }
+
+  async function move(id, horizon, after, extra, okText) {
+    extra = extra || leaveNow(rowOf(id), horizon);   // a card that leaves Now takes its check-by off the ledger too
+    applyLocal(id, horizon, after, extra);
+    render();
+    const out = await place(env.ws, [placed(id, horizon, after, extra)]);
+    if (say(out, okText)) { if (out.sig && data) data.sig = out.sig; }
+    await reload();
+  }
+
+  const afterOfRank = (h, id) => {
+    const list = ids(h);
+    const i = list.indexOf(id);
+    return { list, i };
+  };
+  const toTop = (id) => { const r = rowOf(id); if (r) move(id, r.horizon, null, null, COPY.moved.top(r.title)); };
+  function up(id) {
+    const r = rowOf(id); if (!r || r.dormant) return;
+    const { list, i } = afterOfRank(r.horizon, id);
+    if (i <= 0) return;
+    move(id, r.horizon, i >= 2 ? list[i - 2] : null);
+  }
+  function down(id) {
+    const r = rowOf(id); if (!r || r.dormant) return;
+    const { list, i } = afterOfRank(r.horizon, id);
+    if (i < 0 || i >= list.length - 1) return;
+    move(id, r.horizon, list[i + 1]);
+  }
+  const toHorizon = (id, h) => { const r = rowOf(id); if (r) move(id, h, null, null, COPY.moved[h](r.title)); };
+  function setCheckBy(id) {
+    const r = rowOf(id); if (!r) return;
+    const { list, i } = afterOfRank(r.horizon, id);
+    const after = i > 0 ? list[i - 1] : null;
+    checkBySheet({
+      title: COPY.menu.setCheckBy, value: r.check_by,
+      onSave: async (date) => {
+        const out = await place(env.ws, [placed(id, r.horizon, after, { check_by: date })]);
+        if (out && out.ok) { toast({ text: COPY.moved.checkBy(r.title, date ? shortDate(date) : ''), timeout: 4000 }); reload(); }
+        return out;
+      },
+    });
+  }
+
+  function openMenu(anchor, id) {
+    const r = rowOf(id); if (!r) return;
+    const list = ids(r.horizon);
+    const i = list.indexOf(id);
+    const items = [{ label: COPY.menu.open, onSelect: () => env.openInitiative(env.repo, id) }];
+    const order = [];
+    if (!r.dormant && i > 0) order.push({ label: COPY.menu.toTop, onSelect: () => toTop(id) }, { label: COPY.menu.up, onSelect: () => up(id) });
+    if (!r.dormant && i >= 0 && i < list.length - 1) order.push({ label: COPY.menu.down, onSelect: () => down(id) });
+    if (order.length) items.push({ sep: true }, ...order);
+    items.push({ sep: true });
+    for (const h of HORIZONS) if (r.horizon !== h || r.dormant) items.push({ label: COPY.menu['move' + h[0].toUpperCase() + h.slice(1)], onSelect: () => toHorizon(id, h) });
+    if (r.horizon === 'now') items.push({ sep: true }, { label: COPY.menu.setCheckBy, onSelect: () => setCheckBy(id) });
+    menu({ anchor, items, ariaLabel: COPY.aria.more(r.title) });
+  }
+
+  /* ── drawing ──────────────────────────────────────────────────────────────────────────────────────────────────── */
+
+  function cardOf(r, { grip }) {
+    const meta = [r.display && r.display.word, r.progress && r.progress.label];
+    if (r.horizon === 'now' && !r.confirmed) meta.push(COPY.unconfirmed);
+    if (r.horizon === 'now' && r.check_by) meta.push(COPY.checkBy(shortDate(r.check_by)));
+    const hs = healthSignal(r.health);
+    const more = iconButton({
+      icon: 'ellipsis', size: 'sm', ariaLabel: COPY.aria.more(r.title), expanded: false,
+      onClick: (e) => { e.stopPropagation(); openMenu(e.currentTarget, r.id); },
+      attrs: { class: 'in-more', 'aria-haspopup': 'menu', 'data-in-more': r.id },
+    });
+    return card({
+      title: r.title, meta, signals: hs ? [hs] : [], lead: grip ? [el('span', { class: 'in-grip' }, dragHandle({ label: COPY.aria.reorder(r.title) }))] : [], trail: [more],
+      onOpen: () => env.openInitiative(env.repo, r.id), openLabel: COPY.aria.open(r.title),
+      attrs: { class: 'in-card', 'data-in-card': r.id, 'data-horizon': r.horizon, 'data-health': r.health ? r.health.level : 'unknown' },
+      openAttrs: { 'data-in-open': r.id },
+    });
+  }
+
+  function column(h) {
+    const rows = data.horizons[h] || [];
+    const list = el('div', { class: 'in-list', 'data-in-list': h, role: 'list', 'aria-label': COPY.aria.column(COPY.horizons[h]) }, rows.map((r) => cardOf(r, { grip: true })));
+    const kids = [
+      el('div', { class: 'in-col__head' }, el('span', { class: 'in-col__name' }, COPY.horizons[h]), el('span', { class: 'in-col__count', 'data-in-count': h }, String(rows.length))),
+    ];
+    if (!rows.length) kids.push(el('p', { class: 'in-col__empty' }, COPY.emptyColumn[h]));
+    kids.push(list);
+    if (h === 'later' && data.dormant && data.dormant.length) {
+      kids.push(button({
+        label: showDormant ? COPY.hideDormant(data.dormant.length) : COPY.dormant(data.dormant.length), variant: 'ghost', size: 'sm',
+        icon: showDormant ? 'chevron-down' : 'chevron-right', attrs: { 'data-in-dormant-toggle': '', 'aria-expanded': showDormant ? 'true' : 'false' },
+        onClick: () => { showDormant = !showDormant; render(); },
+      }));
+      if (showDormant) kids.push(el('div', { class: 'in-list in-list--dormant', 'data-in-dormant': '' }, data.dormant.map((r) => cardOf(r, { grip: false }))));
+    }
+    return el('section', { class: 'in-col', 'data-in-col': h, 'aria-label': COPY.horizons[h] }, kids);
+  }
+
+  function headLine() {
+    const n = data.header.now;
+    const over = n.cap && n.count > n.cap;
+    return el('div', { class: 'in-nowline' + (over ? ' in-nowline--over' : ''), 'data-in-nowline': '', title: over ? COPY.overCap(n.count, n.cap) : null }, COPY.nowLine(n));
+  }
+
+  function render() {
+    if (disposed) return;
+    const active = document.activeElement && document.activeElement.getAttribute ? document.activeElement.getAttribute('data-in-open') : null;
+    const refocus = focusId || active;
+    focusId = null;
+    drags.destroy();
+    if (!data) {
+      root.replaceChildren(error ? el('p', { class: 'in-note in-note--error', role: 'alert' }, COPY.readFailed(error)) : empty({ text: COPY.reading }));
+      return;
+    }
+    const kids = [headLine(), el('p', { class: 'in-note in-hint', 'data-in-hint': '' }, COPY.menuHintCard)];
+    if (data.flags && data.flags.length) kids.push(el('p', { class: 'in-note', 'data-in-flags': '' }, COPY.flags(data.flags.length)));
+    kids.push(el('div', { class: 'in-cols', 'data-in-cols': '' }, HORIZONS.map(column)));
+    root.replaceChildren(...kids);
+    if (refocus) { const t = root.querySelector('[data-in-open="' + CSS.escape(refocus) + '"]'); if (t) t.focus({ preventScroll: true }); }
+    bindDrag();
+  }
+
+  function bindDrag() {
+    loadSortable().then((S) => {
+      if (!S || disposed) return;
+      drags.destroy();
+      for (const list of root.querySelectorAll('.in-list[data-in-list]')) {
+        drags.add(new S(list, baseOptions({
+          group: 'in-roadmap', handle: SEL.drag, draggable: '.in-card',
+          onStart: () => { dragging = true; },
+          onEnd: (evt) => {
+            dragging = false;
+            const id = evt.item && evt.item.getAttribute('data-in-card');
+            const to = evt.to && evt.to.getAttribute('data-in-list');
+            if (!id || !to) { render(); return; }
+            const others = ids(to).filter((x) => x !== id);
+            const k = Math.max(0, Math.min(evt.newIndex, others.length));
+            const after = k > 0 ? others[k - 1] : null;
+            const r = rowOf(id);
+            if (r && r.horizon === to && ids(to).indexOf(id) === k) { render(); return; }
+            move(id, to, after);
+            if (deferred) { const d = deferred; deferred = null; adopt(d); }
+          },
+        })));
+      }
+    });
+  }
+
+  /* The card menu is the phone's path (the ⋯ button shows where a touch screen is). On a desk it opens from the context menu:
+   * a right click, or the menu key on a focused card. */
+  onContextMenu(root, (t) => {
+    const node = t && t.closest ? t.closest('[data-in-card]') : null;
+    const open = node && node.querySelector('[data-in-open]');
+    return open ? { anchor: open, id: node.getAttribute('data-in-card') } : null;
+  }, openMenu);
+
+  /* ── keyboard: Alt+ArrowUp / Alt+ArrowDown on a card reorder it ──────────────────────────────────────────────── */
+  root.addEventListener('keydown', (e) => {
+    if (!e.altKey || e.ctrlKey || e.metaKey || (e.key !== 'ArrowUp' && e.key !== 'ArrowDown')) return;
+    const open = e.target && e.target.closest ? e.target.closest('[data-in-open]') : null;
+    if (!open) return;
+    e.preventDefault(); e.stopPropagation();
+    const id = open.getAttribute('data-in-open');
+    focusId = id;
+    if (e.key === 'ArrowUp') up(id); else down(id);
+  });
+
+  /* ── reading ──────────────────────────────────────────────────────────────────────────────────────────────────── */
+
+  function adopt(answer) {
+    if (disposed) return;
+    if (dragging) { deferred = answer; return; }
+    data = answer; error = null;
+    if (env.onData) env.onData(answer);
+    render();
+  }
+
+  let reads = 0;   // only the newest read is drawn: an older answer that comes back late is dropped
+  async function reload() {
+    const mine = ++reads;
+    const a = await getRoadmap(env.ws);
+    if (disposed || mine !== reads) return;
+    if (a && a.ok) adopt(a);
+    else if (!data) { error = (a && a.error) || 'the server did not answer'; render(); }
+  }
+
+  render();
+  reload().then(() => {
+    if (disposed) return;
+    stop = watchSig(async () => { const a = await getRoadmap(env.ws); if (a && a.ok) { latest = a; return sigKey(a); } return null; },
+      () => { if (latest) adopt(latest); }, { everyMs: 10000 });
+  });
+
+  return {
+    reload,
+    dispose() { disposed = true; if (stop) stop(); drags.destroy(); },
+  };
+}

package/workspace/public/pm/sig-watch.js

@@ -0,0 +1,41 @@
+/* pm/sig-watch.js — how a D86 destination learns that its ledgers changed (pm-os-absorb seams §4.9).
+ *
+ *   watchSig(readSig, onChange, { everyMs = 10000 }) → stop()
+ *
+ * The /api/sessions `ledgers` signatures cover plan-items only (a golden pins that shape), so pmos:ledgers never fires
+ * for a placement, a measurement or an issue written from the CLI or another tab. Every destination and extension that
+ * shows those (Roadmap 2D, Timeline 4C, Board 4D, Reports 5C, and the Today cards of initiative-needs and report-needs
+ * through provider-cards.js) watches its OWN GET `sig` with this one helper:
+ *   - `readSig()` → Promise<string|null>: the route's current `sig` (a cheap GET; null when unreachable);
+ *   - it is read on window focus, on visibilitychange to visible, and every `everyMs` while the page is visible;
+ *   - `onChange(sig)` runs only when the value differs from the last one seen (the first read only records it).
+ * No import, no timer while hidden, nothing in fixture mode (the caller does not start it there).
+ */
+
+export function watchSig(readSig, onChange, { everyMs = 10000 } = {}) {
+  let last;
+  let seen = false;
+  let busy = false;
+  let stopped = false;
+  const tick = async () => {
+    if (stopped || busy || (typeof document !== 'undefined' && document.visibilityState === 'hidden')) return;
+    busy = true;
+    let sig = null;
+    try { sig = await readSig(); } catch { sig = null; }
+    busy = false;
+    if (stopped || sig == null) return;
+    if (!seen) { seen = true; last = sig; return; }
+    if (sig !== last) { last = sig; try { onChange(sig); } catch (e) { console.error('[sig-watch]', e); } }
+  };
+  const onVis = () => { if (document.visibilityState === 'visible') tick(); };
+  const timer = setInterval(tick, Math.max(1000, Number(everyMs) || 10000));
+  window.addEventListener('focus', tick);
+  document.addEventListener('visibilitychange', onVis);
+  tick();
+  return function stop() {
+    stopped = true;
+    clearInterval(timer);
+    window.removeEventListener('focus', tick);
+    document.removeEventListener('visibilitychange', onVis);
+  };
+}

package/workspace/public/pm/state.js

@@ -42,7 +42,7 @@ const COCKPIT_START = {
   tabs: [
     { id: 'term:ooh-weather-expansion:claude · merge PR 41', kind: 'term', title: 'claude · merge PR 41', slug: 'ooh-weather-expansion', repo: 'microsites', sess: 'claude · merge PR 41', state: 'working', role: 'TERM' },
     { id: 'doc:planning/prd/ooh-weather-expansion-prd.md', kind: 'doc', title: '…-prd.md', slug: 'ooh-weather-expansion', path: 'planning/prd/ooh-weather-expansion-prd.md', role: 'DOC' },
-    { id: 'view:memory:microsites', kind: 'view', view: 'memory', title: 'tool · memory', slug: 'microsites', repo: 'microsites' },
+    { id: 'view:validate:microsites', kind: 'view', view: 'validate', title: 'tool · validate', slug: 'microsites', repo: 'microsites' },
   ],
   active: 'term:ooh-weather-expansion:claude · merge PR 41',
 };
@@ -56,7 +56,7 @@ function initial() {
 }
 function initialBase() {
   return {
-    theme: 'dark', sel: null, q: '', mode: 'product', collapsedGroups: {}, groupBy: 'objective', activeOnly: false, legendOpen: false, settingsOpen: false,
+    theme: 'dark', sel: null, q: '', mode: 'product', collapsedGroups: {}, groupBy: 'objective', activeOnly: false,
     product: null, intgSynced: {},
     addSrc: 'github', addRepo: 'github.com/acme/atlas-mobile', addPath: '~/code/notes-cli',
     addLog: [], addedProducts: [], extraKnow: {},
@@ -70,7 +70,6 @@ function initialBase() {
     // the rail's menu (workspace-cockpit-nav): open or shut, never persisted
     menuOpen: false,
     paletteOpen: false,         // Run 2: the ⌘K palette — never persisted
-    layoutFocus: false,         // Run 2: the Focus layout — never persisted (distinct from `focus`, the focus-mode data)
     todayScope: 'repo',
     filesOpen: false,           // Run 3: the Work list shows the repository's files — never persisted
     todayDismissed: {},
@@ -199,6 +198,9 @@ const TAB_FIELDS = ['id', 'kind', 'title', 'slug', 'repo', 'sess', 'sessionId',
   // a view tab's view key (workspace-cockpit-nav) — a reload reopens the same tool
   'view'];
 const MAX_TABS = 40;
+const CUT_VIEWS = new Set(['focus', 'portfolio', 'memory', 'knowledge', 'guide', 'skills', 'scheduled', 'reports', 'agent', 'connect']);
+/** A stored tab of a surface that was cut (R29): the Task tab, or a view tab for one of the removed views. */
+const CUT_TABS = (t) => !!t && (t.kind === 'task' || (t.kind === 'view' && CUT_VIEWS.has(t.view)));
 
 function packTab(t) {
   if (!t || typeof t !== 'object' || typeof t.id !== 'string' || typeof t.kind !== 'string') return null;
@@ -221,7 +223,6 @@ const PERSIST = {
   // the dragged width of the navigation column (clamped again by app.js on the way out). `col1` now means "the list under the
   // repositories is open"; the old second-column width (col1W) is no longer stored and an old value is ignored on load.
   col0W: (v) => typeof v === 'number' && Number.isFinite(v) && v >= 100 && v <= 1200,
-  settingsOpen: isBool,
   product: isSlug,
   sel: isSlug,
   collapsedGroups: isFlagMap,
@@ -267,6 +268,9 @@ function restore(target) {
     try { ok = PERSIST[k](saved[k]); } catch { ok = false; }
     if (ok) target[k] = saved[k];
   }
+  /* A tab of a surface the R29 cuts removed (the Task tab, the Focus, Portfolio, Memory, Knowledge, guide, Skills, Scheduled,
+   * Agents and Connect views) is dropped on load, so an old record cannot reopen a pane that no longer exists. */
+  if (Array.isArray(target.tabs)) target.tabs = target.tabs.filter((t) => !CUT_TABS(t));
   /* `active` and `splitId` name tabs. A record whose tab list was dropped (or that names a tab the
    * list no longer holds) must not restore a pointer into nothing — panel 4 would render an empty
    * pane and the PM would see a window with no tab selected and no way to guess why. */

package/workspace/public/pm/status-banner.js

@@ -12,10 +12,12 @@
  */
 import { el } from './dom.js';
 import { state, setState, FIXTURE } from './state.js';
+import { wordOf } from './display-word.js';
+import { button } from './primitives.js';
 
 const SG = () => (typeof window !== 'undefined' ? window.PMOSStatusGroups : null);
 const LAB = 'font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-foreground)';
-const TONE = { 'needs-you': 'var(--destructive)', 'in-progress': 'var(--brand)', 'awaiting-acceptance': 'var(--foreground)', unknown: 'var(--destructive)' };
+const TONE = { 'needs-you': 'var(--destructive)', 'in-progress': 'var(--foreground)', 'awaiting-acceptance': 'var(--foreground)', unknown: 'var(--destructive)' };
 const WHO = { pm: 'you', agent: 'the agent', system: 'nobody — it is derived' };
 const iv = (t) => el('span', null, t == null ? '' : String(t));
 
@@ -25,6 +27,13 @@ function line(label, value, attr) {
     el('span', { 'data-r18': attr, style: 'font-size:12px;line-height:1.5;color:var(--foreground);overflow-wrap:anywhere' }, iv(value)));
 }
 
+/** "See everything waiting on you" opens Today: the frame's Today place, or Today as a tab in the old shells. */
+function seeWaiting() {
+  const f = typeof window !== 'undefined' && window.pmApp ? window.pmApp.frame : null;
+  if (f && f.on) f.go('today');
+  else setState({ mode: 'today', col1: true });
+}
+
 /** @returns {HTMLElement|null} null in fixture mode (the prototype has no such block). */
 export function statusBanner(product, slug, rec) {
   const sg = SG();
@@ -38,7 +47,8 @@ export function statusBanner(product, slug, rec) {
         'The status could not be read — ' + (err || 'the server returned no status for this initiative') + '. No group is shown because none can be derived.'));
   }
   const key = sg.keyOf(row);
-  const g = sg.BY_KEY[key];
+  // R3: the word is the one every surface reads (display-word.js → lib/initiative-display.js); the group text below is the evidence
+  const g = { ...sg.BY_KEY[key], label: wordOf(row, rec) || sg.BY_KEY[key].label };
   const items = (rec && rec.nextSteps && rec.nextSteps.items) || [];
   const waiting = items.filter((i) => i.kind === 'needs' || i.kind === 'returned');
   // The one thing to do next: the engine's first item, unless it is not yours and something is waiting on you.
@@ -66,9 +76,7 @@ export function statusBanner(product, slug, rec) {
   if (key === 'awaiting-acceptance' || key === 'needs-you') {
     kids.push(el('div', { 'data-r18': 'acceptance-note', style: 'font-size:11px;line-height:1.5;color:var(--muted-foreground);padding-top:4px' },
       'Acceptance is yours and cannot be delegated (D12). Tell the session that holds this initiative to record it, or run scripts/record-acceptance.js. The workspace never records one for you.'),
-      el('button', { 'data-r18': 'see-waiting', onClick: () => setState({ mode: 'focus', settingsOpen: false, col1: true }),
-        style: 'align-self:flex-start;font-family:var(--mono);font-size:10px;padding:2px 7px;background:var(--secondary);border:1px solid var(--border);color:var(--foreground);margin-top:4px' },
-        'see everything waiting on you'));
+      button({ label: 'see everything waiting on you', variant: 'outline', size: 'sm', onClick: seeWaiting, attrs: { 'data-r18': 'see-waiting' } }));
   }
   return el('div', { 'data-r18': 'status-banner', 'data-key': key, style: 'display:flex;flex-direction:column;gap:2px;padding:8px 14px;border-bottom:1px solid var(--border)' }, kids);
 }

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

@@ -43,6 +43,7 @@ import { state, setState, FIXTURE } from './state.js';
 import * as FX from './fixture.js';
 import { mdRender } from './markdown.js';
 import { openDoc } from './panel-initiatives.js';
+import { button } from './primitives.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));
@@ -738,10 +739,7 @@ export function mountDoc(host, tab) {
     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 saveBtn = dirty ? button({ label: 'save', variant: 'primary', size: 'sm', onClick: () => save(tab, text) }) : null;
 
   /* The one control that grants a privilege, and the only place the PM learns the page CAN run.
    * Offered only where it means something — a document actually being rendered as a page, in the

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

@@ -47,6 +47,7 @@
 import { el, setChildren } from './dom.js';
 import { state, setState, subscribe, FIXTURE } from './state.js';
 import * as FX from './fixture.js';
+import { pageNonce } from './http.js';   // R25: a session started with an initiative binds only with the nonce
 
 /* ── the design's terminal colours ───────────────────────────────────────────────────────────
  * `--term-bg` is oklch(0.148 0.004 228.8) in BOTH themes. Resolved through a canvas at runtime so
@@ -118,6 +119,7 @@ const LINKS = () => (typeof window !== 'undefined' && window.WebLinksAddon ? win
 const SOCK = {
   ws: null, open: false, tries: 0,
   sessions: [],                 // the server's session list, module-local on purpose (see below)
+  listed: false,                // THIS connection's `hello` has arrived, so `sessions` is current — see bind()
   attached: new Set(),          // session ids this connection has attached
   spawning: new Map(),          // tab id → true, while a `new` is in flight
   spawnQueue: [],               // the SAME requests, in order — `created` carries no correlation id
@@ -292,7 +294,8 @@ function connect() {
   let ws;
   try {
     const proto = location.protocol === 'https:' ? 'wss' : 'ws';
-    ws = new WebSocket(`${proto}://${location.host}`);
+    const n = pageNonce();
+    ws = new WebSocket(`${proto}://${location.host}/` + (n ? '?pmos-nonce=' + encodeURIComponent(n) : ''));
   } catch { return; }
   SOCK.ws = ws;
   ws.onopen = () => {
@@ -305,7 +308,7 @@ function connect() {
     for (const rec of panes.values()) if (rec.kind === 'real') bind(rec);
   };
   ws.onclose = () => {
-    SOCK.open = false; SOCK.ws = null; SOCK.attached.clear();
+    SOCK.open = false; SOCK.listed = false; SOCK.ws = null; SOCK.attached.clear();
     /* An in-flight `new` is abandoned rather than retried: the server may well have started the
      * session before the socket dropped, and the reconnect's `hello` will find it by name. Retrying
      * blind is how a PM ends up with two shells and one tab.
@@ -340,6 +343,7 @@ function send(obj) {
 function handle(m) {
   if (m.t === 'hello' || m.t === 'sessions') {
     SOCK.sessions = Array.isArray(m.sessions) ? m.sessions : [];
+    SOCK.listed = true;
     if (m.t === 'hello' && Array.isArray(m.workspaces)) SOCK.workspaces = m.workspaces;
     if (m.t === 'hello' && m.home) SOCK.home = m.home;
     for (const rec of panes.values()) if (rec.kind === 'real') bind(rec);
@@ -565,6 +569,12 @@ function bind(rec) {
     return;
   }
   if (!SOCK.open) { note(rec, 'pmos: connecting to the workspace server…'); return; }
+  /* NOT BEFORE THE LIST. `onopen` fires one frame before `hello`, and on a fresh page the pool is then empty (or
+   * `state.sessions`, which the 4 s poll may not have filled yet), so every name join below answers "not found". A tab
+   * that may spawn then starts a SECOND session under a name that is running — the reload case pm-term-test.js
+   * asserts. Starting a session or saying one is gone is decided only against the list this connection sent; `hello`
+   * is the very next frame and re-binds every pane. An id that IS known attached above, without waiting. */
+  if (!SOCK.listed) return;
   if (SOCK.spawning.get(rec.tab.id)) return;
   if (wantsSpawn(rec.tab)) {
     /* THE FALLBACK SPAWN — no longer the PM's path, and no longer pretending to be.

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

@@ -7,6 +7,7 @@
  */
 import { el, setChildren } from './dom.js';
 import { state, setState } from './state.js';
+import { askText } from './dialogs.js';
 
 const iv = (v) => el('span', null, v === null || v === undefined ? '' : String(v));
 const BTN = 'font-family:var(--mono);font-size:10.5px;padding:3px 9px;border:1px solid var(--border);color:var(--muted-foreground);min-height:26px';
@@ -46,8 +47,8 @@ export async function openWeb(raw, opts) {
 }
 
 /** The 🌐 control's action: ask for an address, then open it. */
-export function promptWeb() {
-  const raw = typeof window !== 'undefined' && window.prompt ? window.prompt('Open a web page in a tab — the full address, starting with http or https:', '') : null;
+export async function promptWeb() {
+  const raw = await askText({ title: 'Open a web page in a tab', label: 'The full address, starting with http or https.', placeholder: 'https://', confirmLabel: 'Open' });
   if (raw === null || !String(raw).trim()) return;
   openWeb(raw);
 }

package/workspace/public/pm/timeline-copy.js

@@ -0,0 +1,48 @@
+/* pm/timeline-copy.js — every word the Timelines show (pm-os-absorb Run 4: slice 4B writes it, 4C imports it).
+ *
+ * Pure data and pure functions. No DOM and no import, so `glossary.test.js` can load this file in Node and check every
+ * string against the glossary rules (GLOSSARY below also holds guide/timeline.md to them). A string that a person reads
+ * on Breakdown › Timeline is written here and nowhere else. Dates arrive already short ("20 Oct").
+ */
+
+export const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+/** "2026-10-20" -> "20 Oct". A date-only value is read as a calendar day, never shifted by the time zone. */
+export function shortDate(ymd) {
+  const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(String(ymd || ''));
+  if (!m) return '';
+  return Number(m[3]) + ' ' + MONTHS[Number(m[2]) - 1];
+}
+
+/** "2026-10" -> "Oct", and "Jan 2027" for a January, so the year shows where it changes. */
+export function monthLabel(ym) {
+  const m = /^(\d{4})-(\d{2})/.exec(String(ym || ''));
+  if (!m) return '';
+  return Number(m[2]) === 1 ? 'Jan ' + m[1] : MONTHS[Number(m[2]) - 1];
+}
+
+export const COPY = {
+  view: 'Timeline',
+  chart: 'Timeline of the items',
+  today: 'Today',
+  all: 'All items',
+  hint: 'Drag a bar to move its dates. Drag the end of a bar to change the due date.',
+  noDates: 'No item has a start or a due date. Open an item in the Tree and set its dates. Its bar then shows here.',
+  undated: (n) => (Number(n) === 1 ? '1 item has no dates. Set its dates in the item sheet.' : `${n} items have no dates. Set their dates in the item sheet.`),
+  range: (from, to) => (!to || from === to ? String(from) : `${from} – ${to}`),
+  stageRow: (stage, n) => (Number(n) === 1 ? `${stage}, 1 dated item` : `${stage}, ${n} dated items`),
+  /** One stage's part of the first row, in that row's accessible name. */
+  stageSpan: (stage, range) => `${stage}: ${range}.`,
+  /** The bar's accessible name: what it is, its dates, its health and milestone, and how to move it without a pointer.
+   * `notes` are full sentences without the full stop (the health text, `milestone(date)`). */
+  bar: (title, range, notes = []) => [`${title}, ${range}.`, ...notes.filter(Boolean).map((n) => n + '.'),
+    'Press to open the item.', 'Use the arrow keys to move the dates by one day.',
+    'Use Shift and an arrow key to change the due date.', 'Press Enter to save.'].join(' '),
+  milestone: (date) => `Milestone on ${date}`,
+  /** R8 reasons. Each one is the text beside the dot. */
+  overlap: (title, date) => `At risk: starts before ${title} ends on ${date}`,
+  overdue: (date) => `At risk: due on ${date}, not done`,
+  milestoneOverdue: (date) => `Off track: milestone due on ${date}, not done`,
+};
+
+export const GLOSSARY = { guide: 'timeline.md' };