create-pmos 0.52.0 → 0.53.1

package/workspace/public/pm/bd-model.js

@@ -0,0 +1,152 @@
+/* pm/bd-model.js — local changes to a fetched Layout, so a write shows before the server answers (pm-os-absorb Run 1).
+ *
+ * The server's Layout (GET /api/plan-items) is the truth; these helpers only change a COPY of it in the page, the same
+ * way the server's fold would, so that an optimistic write or a held change (undo-hold.js) reads right on screen until
+ * the next fetch replaces it. `recount` rebuilds every derived list and count (stage items, progress, the Board columns,
+ * the 14-day Done window) from the items map with the server's rules, so the Board column always equals the row state.
+ * Nothing here is stored or sent (D33).
+ */
+
+export const PM = 'pm:wawan';
+const DAY = 86400000;
+
+const todayUTC = (now) => new Date(now).toISOString().slice(0, 10);
+
+/** Tree order inside a stage: order, then created, then id. */
+export function treeOrder(items) {
+  return (a, b) => {
+    const x = items[a]; const y = items[b];
+    if (x.order !== y.order) return (x.order || 0) - (y.order || 0);
+    if ((x.createdAt || '') !== (y.createdAt || '')) return (x.createdAt || '') < (y.createdAt || '') ? -1 : 1;
+    return a < b ? -1 : a > b ? 1 : 0;
+  };
+}
+
+/** Rebuild the stage lists, counts, progress and Board columns from `L.items`. Returns L. */
+export function recount(L) {
+  if (!L || !L.items) return L;
+  const by = Object.create(null);
+  for (const s of L.stages || []) by[s.id] = [];
+  const other = [];
+  const ids = Object.keys(L.items).filter((id) => L.items[id] && L.items[id].state !== 'withdrawn').sort(treeOrder(L.items));
+  for (const id of ids) (by[L.items[id].stage] || other).push(id);
+  let done = 0; let total = 0; let proposed = 0;
+  const count = (list) => {
+    let d = 0; let t = 0; let p = 0;
+    for (const id of list) { const it = L.items[id]; if (it.proposed) p++; else { t++; if (it.state === 'done') d++; } }
+    return { d, t, p };
+  };
+  for (const s of L.stages || []) {
+    const c = count(by[s.id]);
+    s.items = by[s.id]; s.done = c.d; s.total = c.t; s.proposed = c.p;
+    s.count = c.t ? `${c.d} of ${c.t}` : null;
+    s.visible = c.t > 0 || c.p > 0 || !!s.owed;
+    done += c.d; total += c.t; proposed += c.p;
+  }
+  const oc = count(other);
+  done += oc.d; total += oc.t; proposed += oc.p;
+  L.other = { items: other };
+  L.progress = { done, total, proposed, label: total ? `${done} of ${total}` : proposed ? `no breakdown · ${proposed} proposed` : 'no breakdown' };
+  const cut = Date.parse(L.now || new Date().toISOString()) - 14 * DAY;
+  const cols = { todo: [], doing: [], review: [], done: [] };
+  let older = 0;
+  const ordered = [...(L.stages || []).flatMap((s) => s.items), ...other];
+  for (const id of ordered) {
+    const it = L.items[id];
+    if (!cols[it.state]) continue;
+    if (it.state === 'done' && it.doneAt && Date.parse(it.doneAt) < cut) { older++; continue; }
+    cols[it.state].push(id);
+  }
+  L.board = { ...cols, doneOlder: older };
+  return L;
+}
+
+/** The label of a stage id ("Build"), or the id itself for a stage this profile does not have. */
+export function stageLabel(L, id) {
+  const s = (L && L.stages || []).find((x) => x.id === id);
+  return s ? s.label : (id || '');
+}
+
+/** A move to `to`, as the server's fold would record it for a PM move. */
+export function moveLocal(L, id, to) {
+  const it = L && L.items[id];
+  if (!it) return L;
+  const at = new Date().toISOString();
+  it.state = to;
+  it.doneAt = to === 'done' ? at : null;
+  it.noEvidence = false;
+  it.override = it.owner === 'agent';
+  it.overrideShown = it.override;
+  it.movedBy = PM;
+  it.late = !!it.due && to !== 'done' && it.due < todayUTC(Date.now());
+  it.updatedBy = PM; it.updatedAt = at; it.byLabel = 'you';
+  return recount(L);
+}
+
+/** A `set` of fields. */
+export function setLocal(L, id, fields) {
+  const it = L && L.items[id];
+  if (!it) return L;
+  Object.assign(it, fields);
+  if ('due' in fields) it.late = !!it.due && it.state !== 'done' && it.due < todayUTC(Date.now());
+  it.updatedBy = PM; it.updatedAt = new Date().toISOString(); it.byLabel = 'you';
+  return recount(L);
+}
+
+/** A `flagged` line. */
+export function flagLocal(L, id, blocked, reason) {
+  const it = L && L.items[id];
+  if (!it) return L;
+  it.blocked = blocked ? { reason, by: PM, at: new Date().toISOString() } : null;
+  it.updatedBy = PM; it.byLabel = 'you';
+  return recount(L);
+}
+
+/** A `withdrawn` line: the item leaves every list. */
+export function removeLocal(L, id) {
+  if (!L || !L.items[id]) return L;
+  delete L.items[id];
+  L.withdrawnCount = (L.withdrawnCount || 0) + 1;
+  for (const b of L.batches || []) b.items = (b.items || []).filter((x) => x !== id);
+  L.batches = (L.batches || []).filter((b) => b.items.length);
+  for (const b of L.batches) b.count = b.items.length;
+  return recount(L);
+}
+
+/** A `kept` line: the batch's items stop being proposed. */
+export function keepLocal(L, by, ids) {
+  if (!L) return L;
+  for (const id of ids || []) { const it = L.items[id]; if (it && it.proposed) { it.proposed = false; it.kept = true; } }
+  L.batches = (L.batches || []).filter((b) => b.by !== by);
+  return recount(L);
+}
+
+/** A `planned` line drawn before the server has given it an id. */
+export function planLocal(L, { tmpId, title, stage, order }) {
+  if (!L) return L;
+  const at = new Date().toISOString();
+  const max = Math.max(0, ...Object.values(L.items).filter((x) => x.stage === stage).map((x) => x.order || 0));
+  L.items[tmpId] = {
+    id: tmpId, initiative: L.initiative, title, stage, stageKnown: true, order: Number.isFinite(order) ? order : max + 1024,
+    owner: 'you', after: [], start: null, due: null, milestone: false, note: '', state: 'todo', blocked: null, evidence: null,
+    noEvidence: false, doneAt: null, movedBy: null, override: false, overrideShown: false, proposed: false, kept: false,
+    late: false, createdBy: PM, createdVia: 'ui', createdAt: at, updatedBy: PM, updatedVia: 'ui', updatedAt: at, byLabel: 'you',
+    history: [], pending: true,
+  };
+  return recount(L);
+}
+
+/** The order for a row placed between `prev` and `next` (either may be absent). Null when the gap is too small. */
+export function orderBetween(prev, next) {
+  if (prev === null && next === null) return 1024;
+  if (prev === null) return next - 1024;
+  if (next === null) return prev + 1024;
+  const mid = (prev + next) / 2;
+  return Math.abs(next - prev) < 1e-6 || mid === prev || mid === next ? null : mid;
+}
+
+/** The order after every item of a stage. */
+export function endOrder(L, stage) {
+  const list = Object.values(L.items).filter((x) => x.stage === stage).map((x) => x.order || 0);
+  return (list.length ? Math.max(...list) : 0) + 1024;
+}

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

@@ -0,0 +1,233 @@
+/* pm/bd-timeline.js — Breakdown › Timeline: an initiative's items on a time axis (pm-os-absorb Run 4, slice 4B; PRD R20,
+ * R8, R27).
+ *
+ * An extension (registry.js EXTENSIONS): loaded at boot, it only registers the view, and panel-breakdown.js shows it next
+ * to Tree and Board. Each dated item is one row whose bar runs from its start to its due; the rows are grouped by stage,
+ * under a first row for the whole initiative split by stage. A milestone shows a ◆ on its due date and every row carries
+ * the line for today. The spans come from lib/item-spans.js (window.PMOSItemSpans), the one engine Initiatives ›
+ * Timeline and the report's strip also read, and every bar is primitives.js `timelineBar`.
+ *
+ * Writes. Dragging a bar moves its dates and dragging its end changes the due date: each gesture is ONE `set` event
+ * through the pane's own write (breakdown-api.js postEvents), with the dates the item has (start and due, or only the
+ * one it has), and nothing else. No other item moves (no cascade) and nothing is counted in days of effort. A press with
+ * no movement opens the item sheet.
+ *
+ * Health (R8), as text and a dot on its own line under the dates, and on the bar as an outline: an item that starts
+ * before a predecessor ends is at risk and says which one; an overdue item is at risk; an overdue milestone is off track.
+ * On track shows nothing. A predecessor in another initiative counts only when the Layout carries its dates
+ * (`L.externalAfter`, asked of slice 4A in issues/run4-b.md); until then such a clash is not flagged here.
+ *
+ * Proposed items (an agent's proposals the PM has not kept) have a muted bar and the "Proposed" signal, and they never
+ * stretch a stage bar or the first row (item-spans.js).
+ *
+ * mount(host, ctx) is called on every render of the pane; it rebuilds only when the items it draws changed, and never
+ * while a bar is moving. Undated items are counted under the chart: their dates are set in the item sheet. On its first
+ * draw the chart scrolls so today shows.
+ */
+
+import { el } from './dom.js';
+import { registerBreakdownView } from './registry.js';
+import { timelineBar, timelinePct, signal, empty } from './primitives.js';
+import { COPY, shortDate, monthLabel } from './timeline-copy.js';
+import { COPY as BD_COPY } from './breakdown-copy.js';
+
+const SPANS = () => (typeof window !== 'undefined' ? window.PMOSItemSpans : null);
+const DATE = /^\d{4}-\d{2}-\d{2}$/;
+const views = new WeakMap();   // host -> { key, held, next }
+
+/** Today as the server's Layout gives it (the day `late` was derived on), else the viewer's own calendar day. */
+function todayOf(L) {
+  const n = L && typeof L.now === 'string' ? L.now.slice(0, 10) : '';
+  if (DATE.test(n)) return n;
+  const d = new Date();
+  return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');
+}
+
+/** What the chart draws from: a change to any of it rebuilds the chart, anything else (a note, an owner) does not. */
+function keyOf(L, today) {
+  const row = (it) => [it.id, it.title, it.stage, it.order, it.start, it.due, it.milestone, it.state, it.late, it.proposed, (it.after || []).join(' ')];
+  const items = Object.values((L && L.items) || {}).map(row);
+  const ext = Object.values((L && L.externalAfter) || {}).map(row);
+  return JSON.stringify([today, (L.stages || []).map((s) => [s.id, s.label]), items, ext]);
+}
+
+/** The R8 flag of one item's span, or null on track. */
+function healthOf(span, it, known) {
+  if (it && it.late && it.milestone) return { health: 'off', text: COPY.milestoneOverdue(shortDate(it.due)) };
+  if (span.overlapsPredecessor && span.overlap) {
+    const p = known[span.overlap.id];
+    return { health: 'risk', text: COPY.overlap(p ? p.title : span.overlap.id, shortDate(span.overlap.due)) };
+  }
+  if (it && it.late) return { health: 'risk', text: COPY.overdue(shortDate(it.due)) };
+  return null;
+}
+
+/** The fields one gesture writes: the dates the item has. A move of an item with only a due date writes only its due. */
+function fieldsFor(it, c) {
+  if (c.mode === 'end') return { due: c.due };
+  const f = {};
+  if (it.start) f.start = c.start;
+  if (it.due) f.due = c.due;
+  if (!it.start && !it.due) { f.start = c.start; f.due = c.due; }
+  return f;
+}
+
+function row(kind, nameKids, bar, attrs) {
+  return el('div', { class: 'tl-row tl-row--' + kind, ...attrs }, el('div', { class: 'tl-name' }, ...nameKids), el('div', { class: 'tl-track' }, bar));
+}
+
+function axisHead(axis, range, today) {
+  /* the month labels on the lower line, Today on the line above them: the two never cover each other */
+  const ticks = axis.months.map((m) => {
+    const t = el('span', { class: 'tl-month', 'data-month': m.month }, monthLabel(m.month));
+    t.style.setProperty('--tl-x', timelinePct(range, m.start).toFixed(3) + '%');
+    return t;
+  });
+  if (today >= range.start && today <= range.end) {
+    const x = timelinePct(range, today);
+    // the label sits to the right of the line, or to its left in the second half, so it stays inside the axis
+    const t = el('span', { class: 'tl-today' + (x > 50 ? ' tl-today--end' : ''), 'data-tl-today': today }, COPY.today);
+    t.style.setProperty('--tl-x', x.toFixed(3) + '%');
+    ticks.push(t);
+  }
+  return el('div', { class: 'tl-row tl-row--head', 'aria-hidden': 'true' }, el('div', { class: 'tl-name' }), el('div', { class: 'tl-axis' }, ...ticks));
+}
+
+function build(host, ctx, V) {
+  const S = SPANS();
+  const L = ctx.layout || {};
+  const items = L.items || {};
+  const ext = L.externalAfter && typeof L.externalAfter === 'object' ? L.externalAfter : {};
+  const known = { ...ext, ...items };
+  const stages = L.stages || [];
+  const label = new Map(stages.map((s) => [s.id, s.label || s.id]));
+  const today = todayOf(L);
+  // a predecessor in another initiative is passed for the flag only: it gets no row here
+  const spans = S ? S.spansOf(known, { stages }).filter((s) => Object.prototype.hasOwnProperty.call(items, s.id)) : [];
+  const live = Object.values(items).filter((it) => it && it.state !== 'withdrawn');
+  const undated = live.filter((it) => !it.start && !it.due).length;
+  const note = undated ? el('p', { class: 'tl-note', 'data-tl-undated': String(undated) }, COPY.undated(undated)) : null;
+  if (!spans.length) return [empty({ text: COPY.noDates, attrs: { 'data-tl-empty': '' } }), note];
+
+  const axis = S.axisOf(spans, { today });
+  const range = { start: axis.start, end: axis.end };
+  const flags = new Map(spans.map((s) => [s.id, healthOf(s, items[s.id], known)]));
+  // the first row and the stage rows draw kept items only: a proposal nobody kept stretches nothing
+  const ms = (list) => list.filter((s) => s.milestone && !s.proposed).map((s) => ({ date: s.due, health: flags.get(s.id) ? flags.get(s.id).health : null }));
+  const rangeText = (g) => COPY.range(shortDate(g.start), shortDate(g.due));
+  const stageName = (id) => label.get(id) || id || '';
+  const rows = [axisHead(axis, range, today)];
+
+  /* the whole initiative, split by stage */
+  const whole = S.initiativeSpan(spans);
+  const parts = S.stageSpans(spans);
+  rows.push(row('all', [el('div', { class: 'tl-title' }, COPY.all), whole ? el('div', { class: 'tl-meta' }, rangeText(whole)) : null],
+    timelineBar({
+      label: [whole ? `${COPY.all}, ${rangeText(whole)}.` : COPY.all + '.', ...parts.map((g) => COPY.stageSpan(stageName(g.stage), rangeText(g)))].join(' '),
+      segments: parts.map((g) => ({ stage: g.stage, start: g.start, due: g.due })), milestones: ms(spans), range, today,
+    }), { 'data-tl-all': '' }));
+
+  /* each stage: its own span, then one row per item */
+  const drag = (s) => ({
+    onCommit: (c) => { const it = items[s.id]; if (it) ctx.setFields(s.id, fieldsFor(it, c)); },
+    onOpen: () => ctx.openItem(s.id),
+    onStart: () => { V.held = true; ctx.hold(true); },
+    onEnd: () => { V.held = false; ctx.hold(false); },
+  });
+  const groups = [...new Set(spans.map((s) => s.stage))];
+  for (const stage of groups) {
+    const mine = spans.filter((s) => s.stage === stage);
+    const g = parts.find((x) => x.stage === stage);
+    const name = stageName(stage);
+    rows.push(row('stage', [el('div', { class: 'tl-title' }, COPY.stageRow(name, mine.length))],
+      timelineBar({ label: COPY.stageRow(name, mine.length) + (g ? ', ' + rangeText(g) : ''), segments: g ? [{ stage, start: g.start, due: g.due }] : [], milestones: ms(mine), range, today }),
+      { 'data-tl-stage': stage || '' }));
+    for (const s of mine) {
+      const it = items[s.id] || {};
+      const f = flags.get(s.id);
+      const when = rangeText(s);
+      const title = it.title || s.id;
+      const signals = [
+        f ? signal({ text: f.text, tone: f.health === 'off' ? 'destructive' : 'warning', wrap: true, attrs: { 'data-tl-health': f.health } }) : null,
+        s.proposed ? signal({ text: BD_COPY.signals.proposed, attrs: { 'data-tl-proposed': '' } }) : null,
+      ].filter(Boolean);
+      rows.push(row('item', [
+        el('div', { class: 'tl-title' }, title),
+        el('div', { class: 'tl-meta' }, when),
+        signals.length ? el('div', { class: 'tl-flag' }, ...signals) : null,
+      ], timelineBar({
+        label: title,
+        segments: [{
+          stage: s.stage, start: s.start, due: s.due, health: f ? f.health : null, done: it.state === 'done', muted: s.proposed,
+          label: COPY.bar(title, when, [f && f.text, s.milestone && COPY.milestone(shortDate(s.due)), s.proposed && BD_COPY.signals.proposed]),
+        }],
+        milestones: s.milestone ? [{ date: s.due, health: f ? f.health : null }] : [], range, today, drag: drag(s),
+        attrs: { 'data-tl-item': s.id },
+      }), { 'data-tl-row': s.id }));
+    }
+  }
+  const chart = el('div', { class: 'tl-chart', role: 'group', 'aria-label': COPY.chart, 'data-tl-range': range.start + '/' + range.end }, ...rows);
+  return [el('p', { class: 'tl-hint' }, COPY.hint), el('div', { class: 'tl-scroll', 'data-tl-scroll': '' }, chart), note];
+}
+
+/** Scroll the chart so the Today label shows just right of the name column (the first draw only). */
+function scrollToToday(host) {
+  const sc = host.querySelector('[data-tl-scroll]');
+  const t = host.querySelector('[data-tl-today]');
+  const name = host.querySelector('.tl-row--item .tl-name') || host.querySelector('.tl-name');
+  if (!sc || !t || !name || sc.scrollWidth <= sc.clientWidth) return;
+  const x = t.getBoundingClientRect().left - sc.getBoundingClientRect().left + sc.scrollLeft;
+  sc.scrollLeft = Math.max(0, x - name.getBoundingClientRect().width - 48);
+}
+
+function mount(host, ctx) {
+  let V = views.get(host);
+  if (!V) {
+    V = { key: null, held: false, next: null };
+    views.set(host, V);
+    /* A move from the keyboard saves when the bar loses the focus, and that write draws the chart again inside the blur,
+     * so the element the focus was going to is gone. Remember which bar it was (blur does not bubble: listen in the
+     * capture phase, before the bar's own listener saves) and forget it once the blur is over. */
+    host.addEventListener('blur', (e) => {
+      const n = e.relatedTarget && host.contains(e.relatedTarget) && e.relatedTarget.closest ? e.relatedTarget.closest('[data-tl-item]') : null;
+      V.next = n ? n.getAttribute('data-tl-item') : null;
+    }, true);
+    host.addEventListener('focusout', () => { V.next = null; });
+  }
+  if (V.held) return;   // never rebuild under a moving bar; the pane draws again when the gesture ends
+  const L = ctx.layout || {};
+  const key = keyOf(L, todayOf(L));
+  if (key === V.key && host.firstChild) return;
+  const first = V.key === null;
+  V.key = key;
+  // a bar moved from the keyboard keeps the focus across the rebuild; a bar saved by leaving it passes the focus on
+  const a = typeof document !== 'undefined' ? document.activeElement : null;
+  const inside = a && host.contains(a) && a.closest('[data-tl-item]');
+  const focusId = inside ? inside.getAttribute('data-tl-item') : V.next;
+  const scroll = host.querySelector('[data-tl-scroll]');
+  const left = scroll ? scroll.scrollLeft : 0;
+  host.replaceChildren(...build(host, ctx, V).filter(Boolean));
+  const s2 = host.querySelector('[data-tl-scroll]');
+  if (s2 && left) s2.scrollLeft = left;
+  if (first && typeof requestAnimationFrame === 'function') requestAnimationFrame(() => scrollToToday(host));
+  if (focusId) {
+    const sel = '[data-tl-item="' + (window.CSS && CSS.escape ? CSS.escape(focusId) : focusId) + '"] button';
+    const b = host.querySelector(sel);
+    if (b) b.focus({ preventScroll: true });
+    // if the browser finishes the blur by dropping the focus on the page, put it on the bar after the blur
+    if (!inside) {
+      setTimeout(() => {
+        const cur = document.activeElement;
+        const again = host.querySelector(sel);
+        if (again && (!cur || cur === document.body)) again.focus({ preventScroll: true });
+      }, 0);
+    }
+  }
+}
+
+function dispose(host) {
+  views.delete(host);
+  host.replaceChildren();
+}
+
+registerBreakdownView('timeline', { label: COPY.view, mount, dispose });

package/workspace/public/pm/bd-tree.js

@@ -0,0 +1,244 @@
+/* pm/bd-tree.js — the Breakdown's Tree (pm-os-absorb Run 1, PRD R18).
+ *
+ * Top to bottom: one Keep card per agent batch, then the initiative's stages in order — only those with items, proposals
+ * or an owed step — then Other for items whose stage this profile does not have. A stage is a header (name, CURRENT,
+ * "2 of 5 · 3 proposed", a chevron) over:
+ *   - the owed row, when the workflow says a step of this stage is still open. It is DERIVED from the ladder, so it has
+ *     no grip, no tick and no menu, and it never counts in progress;
+ *   - "Show n done", which folds the stage's done items away;
+ *   - the item rows: grip, tick, title over one meta line (owner · due · who changed it last, plus two signals at most),
+ *     and a ⋯ menu;
+ *   - Add item.
+ * Collapsing a stage is the viewer's own choice, kept in this browser only; it never reaches a ledger.
+ *
+ * Keyboard (handled on the pane body by panel-breakdown.js): ArrowUp/Down or j/k move between rows and headers, Space
+ * ticks, Enter opens, Alt+ArrowUp/Down moves a row, n adds an item after the focused row.
+ */
+
+import { el } from './dom.js';
+import { row, iconButton, dragHandle, badge, button, field, signal, toast, SEL } from './primitives.js';
+import { COPY, shortDate, ownerLabel } from './breakdown-copy.js';
+import { keepCard } from './keep-card.js';
+import { removeLocal } from './bd-model.js';
+import { readDoc } from './data.js';
+import { COPY as IN_COPY } from './initiatives-copy.js';
+
+/* The starter list of an empty breakdown (Run 2, PRD R21): the bullet lines of planning/work-starters.md, read once per
+ * workspace. A missing file is the plain case: the PM types the first item. */
+const starterCache = new Map();   // ws -> string[] | null (null = no list) | 'loading'
+export function parseStarters(text) {
+  const body = String(text || '').replace(/^---\n[\s\S]*?\n---\n/, '');
+  return body.split('\n').map((l) => /^\s*(?:[-*]|\d+[.)])\s+(?:\[[ xX]\]\s+)?(.+?)\s*$/.exec(l)).filter(Boolean).map((m) => m[1].slice(0, 200)).slice(0, 12);
+}
+function startersOf(ws, then) {
+  const c = starterCache.get(ws);
+  if (c === 'loading') return null;
+  if (c !== undefined) return c;
+  starterCache.set(ws, 'loading');
+  readDoc('planning/work-starters.md', ws).then((t) => parseStarters(t), () => null).then((list) => {
+    starterCache.set(ws, list && list.length ? list : null);
+    if (then) then();
+  });
+  return null;
+}
+
+/** The signals of one item, most important first, two at most. `place` 'board' leaves out the state, which its column shows. */
+export function signalsFor(it, place) {
+  const out = [];
+  if (it.blocked) out.push(signal({ text: COPY.signals.blocked, tone: 'destructive', title: it.blocked.reason || null }));
+  if (it.noEvidence) out.push(signal({ text: COPY.signals.noEvidence, tone: 'warning' }));
+  if (it.late) out.push(signal({ text: COPY.signals.late, tone: 'destructive' }));
+  if (place !== 'board' && (it.state === 'doing' || it.state === 'review')) out.push(signal({ text: COPY.states[it.state] }));
+  if (it.overrideShown) out.push(signal({ text: COPY.signals.movedByYou }));
+  if (it.proposed) out.push(signal({ text: COPY.signals.proposed }));
+  return out.slice(0, 2);
+}
+
+/** The meta line: owner · due 20 Oct · by agent · sess-3. Who changed it last shows only when it was not the PM. */
+export function metaFor(it) {
+  return [ownerLabel(it.owner), it.due ? COPY.due(shortDate(it.due)) : null, byPart(it)];
+}
+
+/** "by agent · sess-3", or nothing when the PM made the last change (the PM's own writes need no label). */
+export function byPart(it) {
+  return it.byLabel && it.byLabel !== 'you' ? COPY.by(it.byLabel) : null;
+}
+
+function itemRow(ctx, id) {
+  const { P, L, A } = ctx;
+  const it = L.items[id];
+  const done = it.state === 'done';
+  const tick = iconButton({
+    icon: done ? 'square-check-big' : 'square', size: 'sm',
+    ariaLabel: done ? COPY.aria.markNotDone(it.title) : COPY.aria.markDone(it.title),
+    onClick: (e) => { e.stopPropagation(); A.tick(id); },
+    attrs: { tabindex: '-1', 'data-fk': 'tick:' + id, 'data-bd-tick': '' },
+  });
+  const more = iconButton({
+    icon: 'ellipsis', size: 'sm', ariaLabel: COPY.aria.more(it.title),
+    onClick: (e) => { e.stopPropagation(); A.menu(e.currentTarget, id, 'tree'); },
+    attrs: { tabindex: '-1', 'aria-haspopup': 'menu', 'data-fk': 'more:' + id, 'data-bd-more': '' },
+  });
+  return row({
+    title: it.title, titleIcon: it.milestone ? 'diamond' : null, meta: metaFor(it), signals: signalsFor(it, 'tree'),
+    lead: [dragHandle({ label: COPY.aria.reorder(it.title) }), tick], trail: [more],
+    onOpen: () => A.openSheet(id), done, proposed: it.proposed,
+    attrs: { class: 'bd-trow', 'data-item': id, 'data-state': it.state, 'data-stage': it.stage },
+    openAttrs: { 'data-fk': 'open:' + id, 'data-rove': 'row', tabindex: P.roveId === id ? '0' : '-1' },
+  });
+}
+
+/** The inline input that adds items. One per pane; it is kept across renders so typing is never lost. */
+function addInput(ctx, stageId, afterId) {
+  const { P, A } = ctx;
+  const key = stageId + '|' + (afterId || '');
+  // the same input moves with the anchor row (a temporary id, then the written id), so a title typed meanwhile stays
+  if (P.addEl && P.addEl.stage === stageId) { P.addEl.key = key; return P.addEl.wrap; }
+  const f = field({ label: COPY.newItem, kind: 'text', hideLabel: true, placeholder: COPY.newItemHint, attrs: { class: 'bd-add__input', 'data-bd-add-input': stageId, maxlength: '200' } });
+  const input = f.control;
+  input.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault(); e.stopImmediatePropagation();
+      const t = input.value.trim();
+      if (!t) { A.closeAdd(true); return; }
+      input.value = '';
+      A.addTitles(P.adding ? P.adding.stage : stageId, [t], P.adding ? P.adding.afterId : afterId);
+    } else if (e.key === 'Escape') {
+      e.preventDefault(); e.stopImmediatePropagation();
+      A.closeAdd(true);
+    } else e.stopPropagation();
+  }, true);
+  input.addEventListener('paste', (e) => {
+    const text = e.clipboardData ? e.clipboardData.getData('text') : '';
+    const lines = String(text || '').split(/\r?\n/).map((l) => l.replace(/^\s*(?:[-*]\s+|\[[ xX]?\]\s+|\d+[.)]\s+)/, '').trim()).filter(Boolean);
+    if (lines.length < 2) return;
+    e.preventDefault(); e.stopPropagation();
+    if (lines.length > 50) { toast({ text: COPY.tooMany(lines.length), tone: 'error' }); return; }
+    A.addTitles(P.adding ? P.adding.stage : stageId, lines.map((l) => l.slice(0, 200)), P.adding ? P.adding.afterId : afterId);
+  });
+  input.addEventListener('blur', () => {
+    setTimeout(() => { if (!P.rendering && P.addEl && P.addEl.wrap.contains(input) && document.activeElement !== input && !input.value.trim()) A.closeAdd(false); }, 0);
+  });
+  const wrap = el('div', { class: 'bd-add', 'data-bd-add-row': stageId }, el('div', { class: 'bd-add__field' }, f));
+  P.addEl = { key, stage: stageId, wrap, input };
+  return wrap;
+}
+
+function stageSection(ctx, s) {
+  const { P, L, A } = ctx;
+  const open = A.isExpanded(s);
+  const toggle = iconButton({
+    icon: open ? 'chevron-down' : 'chevron-right', expanded: open,
+    ariaLabel: open ? COPY.aria.collapse(s.label) : COPY.aria.expand(s.label),
+    onClick: (e) => { e.stopPropagation(); A.toggleStage(s.id); },
+    attrs: { class: 'bd-stage__toggle', 'data-fk': 'stage:' + s.id, 'data-rove': 'head', 'data-stage-toggle': s.id },
+  });
+  const counts = [s.count, s.proposed ? COPY.proposedCount(s.proposed) : null].filter(Boolean).join(' · ');
+  // The header is a drop target, not a control: the chevron is the one button that folds the stage.
+  const head = el('div', { class: 'bd-stage__head', 'data-stage-head': s.id },
+    el('span', { class: 'bd-stage__name' }, s.label),
+    s.current ? el('span', { class: 'bd-stage__current' }, COPY.current) : null,
+    counts ? el('span', { class: 'bd-stage__count' }, counts) : null,
+    toggle);
+  const kids = [head];
+  if (open) {
+    if (s.owed) {
+      kids.push(row({
+        owed: true, title: COPY.owed(s.owed.noun, s.owed.actor), lead: [],
+        trail: [badge({ text: COPY.derived, tone: 'outline' })],
+        attrs: { class: 'bd-owed', 'data-owed-key': s.owed.key, 'data-owed-actor': s.owed.actor },
+      }));
+    }
+    const all = s.items || [];
+    const doneIds = all.filter((id) => L.items[id].state === 'done');
+    const showDone = P.foldOpen.has(s.id);
+    if (doneIds.length) {
+      kids.push(button({
+        variant: 'ghost', size: 'sm', block: true, icon: showDone ? 'chevron-down' : 'chevron-right',
+        label: showDone ? COPY.hideDone(doneIds.length) : COPY.showDone(doneIds.length), onClick: () => A.toggleFold(s.id),
+        attrs: { class: 'bd-fold', 'aria-expanded': showDone ? 'true' : 'false', 'data-fk': 'fold:' + s.id, 'data-bd-fold': s.id },
+      }));
+    }
+    const rows = [];
+    for (const id of all) {
+      if (!showDone && L.items[id].state === 'done') continue;
+      rows.push(itemRow(ctx, id));
+      if (P.adding && P.adding.stage === s.id && P.adding.afterId === id) rows.push(addInput(ctx, s.id, id));
+    }
+    kids.push(el('div', { class: 'bd-list', 'data-stage-list': s.id }, rows));
+    if (P.adding && P.adding.stage === s.id && (!P.adding.afterId || !rows.some((r) => r.getAttribute && r.getAttribute('data-item') === P.adding.afterId))) {
+      kids.push(addInput(ctx, s.id, null));
+    } else {
+      kids.push(el('div', { class: 'bd-add' }, button({
+        label: COPY.addItem, variant: 'ghost', size: 'sm', icon: 'plus',
+        attrs: { class: 'bd-add__btn', 'data-fk': 'add:' + s.id, 'data-bd-add': s.id }, onClick: () => A.startAdd(s.id, null),
+      })));
+    }
+  }
+  return el('section', { class: 'bd-stage', 'data-stage-id': s.id, 'aria-label': s.label }, kids);
+}
+
+/** The Tree's nodes, in order. */
+export function renderTree(ctx) {
+  const { P, L, A } = ctx;
+  const out = [];
+  for (const b of L.batches || []) {
+    if ((b.initiative || L.initiative) !== L.initiative) continue;
+    out.push(keepCard({
+      ws: P.ws, initiative: L.initiative, batch: b, place: 'tree',
+      onChanged: () => A.refresh(),
+      onHoldApply: (lay) => { for (const id of b.items || []) removeLocal(lay, id); },
+      onKeepApply: () => A.keepApplied(b),
+    }));
+  }
+  const visible = (L.stages || []).filter((s) => s.visible || (P.adding && P.adding.stage === s.id));
+  // An empty breakdown: no item in any stage, no proposal. The ladder may still owe rows (they show as stages below), so the
+  // empty state is judged by the items, not by the stages that show.
+  const noItems = !(L.stages || []).some((s) => (s.items || []).length) && !(L.other && L.other.items || []).length && !(L.batches || []).length;
+  if (noItems) {
+    const first = (L.stages || []).find((s) => s.current) || (L.stages || [])[0];
+    out.push(el('div', { class: 'bd-note' }, COPY.noBreakdown + '.'));
+    const starters = P.ws && first ? startersOf(P.ws, () => A.refresh()) : null;
+    if (first && starters && starters.length) {
+      out.push(el('div', { class: 'in-starters', 'data-bd-starters': '' },
+        el('p', { class: 'bd-note' }, IN_COPY.breakThisDown.head),
+        el('ul', { class: 'in-starters__list' }, starters.map((t) => el('li', null, t))),
+        button({ label: IN_COPY.breakThisDown.addAll(starters.length), variant: 'primary', size: 'sm', attrs: { 'data-bd-starters-add': '' }, onClick: () => A.addTitles(first.id, starters, null) }),
+        el('p', { class: 'bd-note' }, IN_COPY.breakThisDown.or)));
+    }
+    if (first) out.push(el('div', { class: 'bd-add' }, button({
+      label: IN_COPY.breakThisDown.label, variant: 'ghost', size: 'sm', iconEnd: 'chevron-right',
+      attrs: { class: 'bd-add__btn', 'data-fk': 'add:' + first.id, 'data-bd-break': '', ...(visible.length ? {} : { 'data-bd-add': first.id }) }, onClick: () => A.startAdd(first.id, null),
+    })));
+  }
+  for (const s of visible) out.push(stageSection(ctx, s));
+  if ((L.other && L.other.items || []).length) {
+    out.push(el('section', { class: 'bd-stage', 'data-stage-id': '', 'aria-label': COPY.other },
+      el('div', { class: 'bd-stage__head', 'data-stage-head': '' }, el('span', { class: 'bd-stage__name' }, COPY.other)),
+      el('div', { class: 'bd-list', 'data-stage-list': '', 'data-other': '' }, L.other.items.map((id) => itemRow(ctx, id)))));
+  }
+  return out;
+}
+
+/** Attach Sortable to the Tree: the stage lists reorder and move between stages; a stage header takes a row at its end. */
+export function bindTreeDrag(ctx, Sortable, drags, baseOptions) {
+  const { P, A } = ctx;
+  const group = 'bd-tree:' + P.slug;
+  for (const list of P.bodyEl.querySelectorAll('[data-stage-list]')) {
+    const other = list.hasAttribute('data-other');
+    drags.add(new Sortable(list, baseOptions({
+      group: { name: group, pull: true, put: !other },
+      handle: SEL.drag, draggable: '.bd-trow', filter: SEL.owed + ', .bd-add', preventOnFilter: false,
+      onStart: () => { P.dragging = true; },
+      onEnd: (evt) => { P.dragging = false; A.dropTree(evt); },
+    })));
+  }
+  for (const head of P.bodyEl.querySelectorAll('[data-stage-head]')) {
+    const sid = head.getAttribute('data-stage-head');
+    if (!sid) continue;
+    drags.add(new Sortable(head, {
+      group: { name: group, pull: false, put: true }, sort: false, draggable: '.bd-trow',
+      onAdd: (evt) => { const id = evt.item.getAttribute('data-item'); evt.item.remove(); A.dropHeader(id, sid); },
+    }));
+  }
+}