create-pmos 0.134.0 → 0.135.0

package/workspace/public/pm/c3-ii-tabs.js

@@ -0,0 +1,240 @@
+/* pm/c3-ii-tabs.js — the six tabs of an initiative page (mockup v5, 34-initiatives.js iniOverview, iniBreakdown, iniDocs, iniTickets,
+ * iniTimeline, iniHistory). registerInitiativeTab(id, mount(host, ctx)); ctx.row, ctx.history (newest first), ctx.tools, ctx.toolsByCat
+ * and ctx.tool come from the page (c3-initiatives.js).
+ *   Overview   Left: a Summary, then one card per tool of the current stage: the stage records (c3-ini-records.js: problem, RICE, launch
+ *              checklist, burndown, kill conditions, learnings) and the server's stage tools (ideas, PRD, breakdown, tickets, releases,
+ *              measurements, …) drawn from what PMOS holds. ctx.tool (a tool pressed in the strip or picked in More tools) is drawn
+ *              first and scrolled to. Right: Details (portfolio, board, workflow with Edit, stage, owner, anchor, horizon, lane), Progress,
+ *              and links to the board's Backlog, Board and Timeline filtered to this initiative; then its releases.
+ *   Breakdown  its epics and items, Jira and PMOS mixed (loadItems), and "Add a PMOS task" (POST /api/boards/tasks/add, epic optional).
+ *   Docs       the documents linked to it (GET /api/docs/library), c3-ib-docs.js renderDocs.
+ *   Tickets    its Jira items: the counts by status and the rows. Read-only: status and dates are Jira's. (Build and deliver only.)
+ *   Timeline   epic > item on the HTML timeline, its own bar on top; PMOS bars drag to reschedule, Jira bars are locked.
+ *   History    ctx.history: moves, workflow changes, assignments and the accept, with who, when, why and the order warnings.
+ * Every tab has an honest empty state and an error line when its read fails. */
+import { el } from './dom.js';
+import { registerInitiativeTab } from './c3-initiatives.js';
+import { icon, pbtn, lk, chip, tag, st, note, sect, card, list, empty, cols, hbs, hbr, kv, chgl, stageChip, ownerText, statusChip, plural, trunc, day, dayLong, ago, PORTFOLIO } from './c3-ini-ui.js';
+import { wfOf, catOf, kindOf, tplName, toolLabel, toolIcon, loadItems, dropItems, workRow, workTlRows, iniTlRow, rescheduleTask, lockedToast } from './c3-ini-work.js';
+import { recordCards, recordToolsFor, RECORD_META } from './c3-ini-records.js';
+import { loadDocs, renderDocs } from './c3-ib-docs.js';
+import { timeline, tlInit, tlRange, tlStill } from './c3-ini-timeline.js';
+
+const errLine = (text) => el('div', { class: 'fold w', role: 'alert', 'data-ini': 'error' }, icon('alert', 'sm'), text);
+const toneOf = (s) => (s === 'late' ? 'bad' : s === 'at risk' ? 'warn' : 'ok');
+
+/** Run an async tab and drop its result when the PM has left the tab. */
+function tab(id, build) {
+  registerInitiativeTab(id, async (host, ctx) => {
+    let dead = false;
+    host.replaceChildren(note('Reading'));
+    try {
+      const nodes = await build(ctx, () => dead, host);
+      if (!dead && nodes) host.replaceChildren(...[].concat(nodes).filter(Boolean));
+    } catch (e) { if (!dead) host.replaceChildren(errLine('This view could not be drawn: ' + ((e && e.message) || e) + '.')); }
+    return () => { dead = true; };
+  });
+}
+const mine = (ctx, items) => items.filter((w) => w.ini === ctx.row.id);
+
+/* ── Overview ── */
+async function toolCard(ctx, t, R, rels) {
+  const r = ctx.row; const b = ctx.board;
+  const work = mine(ctx, R.items); const its = work.filter((w) => w.kind !== 'Epic'); const epics = work.filter((w) => w.kind === 'Epic');
+  const goTab = (k, label) => lk({ onclick: () => ctx.go({ view: 'ini', board: b.id, id: r.id, tab: k }), 'data-ini-goto': k }, icon('next', 'sm'), label);
+  const by = (s) => its.filter((w) => w.status === s).length;
+  let body;
+  switch (t.id) {
+    case 'tickets': {
+      const tk = its.filter((w) => w.src === 'jira');
+      if (!b.build) body = [note(b.name + ' has Build and deliver off, so there is no Jira. Progress comes from PMOS tasks: ' + by('Done') + ' of ' + its.length + ' done.')];
+      else if (!tk.length) body = [note('No Jira ' + (b.jira || '') + ' items linked yet.')];
+      else {
+        const d = tk.filter((w) => w.status === 'Done').length; const p = tk.filter((w) => /progress|review/i.test(w.status)).length; const td = tk.length - d - p;
+        body = [hbs([hbr('Done', d, d / tk.length, 'ok'), hbr('In progress', p, p / tk.length, 'acc'), hbr('To do', td, td / tk.length, 'pm')]),
+          el('div', { class: 'chips2' }, note(plural(tk.length, 'Jira item') + ' in ' + plural(epics.filter((e) => e.src === 'jira').length, 'epic') + '. Status lives in Jira.'), goTab('tickets', 'See Jira items'))];
+      }
+      break;
+    }
+    case 'breakdown':
+      body = [note(plural(epics.length, 'epic') + ', ' + plural(its.length, 'item') + ': ' + by('Done') + ' done, ' + (by('In progress') + by('In review')) + ' in progress, ' + its.filter((w) => w.blocked).length + ' blocked.'), el('div', { class: 'chips2' }, goTab('breakdown', 'Open breakdown'))];
+      break;
+    case 'releases':
+      body = [rels.length ? chgl(rels.map((x) => el('li', null, icon('out', 'sm'), el('span', null, (x.name || x.id) + ' · ' + (day(String(x.release_at || x.deploy_at || '').slice(0, 10)) || 'no date')), tag(x.status || 'Planned')))) : note('Not in a release yet.'),
+        b.build ? el('div', { class: 'chips2' }, lk({ onclick: () => ctx.openBoard(b.id, 'releases') }, icon('next', 'sm'), b.name + ' Releases')) : null];
+      break;
+    case 'placement': case 'timeline':
+      body = [kv([['Horizon', r.horizon ? r.horizon[0].toUpperCase() + r.horizon.slice(1) : 'Not set'], ['Dates', r.start || r.end ? day(r.start) + ' to ' + day(r.end) : 'No dates yet']]),
+        el('div', { class: 'chips2' }, goTab('timeline', 'Open its timeline'), lk({ onclick: () => ctx.openBoard(b.id, 'timeline', { ini: r.id }) }, icon('next', 'sm'), b.name + ' Timeline'))];
+      break;
+    case 'measurements':
+      body = [note('Target: ' + (r.anchor || 'no anchor yet') + '. Measurements show here once it ships and the key result is read.')];
+      break;
+    case 'evaluation':
+      body = [note('Did it move ' + (r.anchor || 'its anchor') + '? The evaluation is written against its done-criteria.'), el('div', { class: 'chips2' }, goTab('docs', 'Open its docs'))];
+      break;
+    case 'history': {
+      const h = (ctx.history || []).slice(0, 3);
+      body = [h.length ? chgl(h.map((x) => el('li', null, icon('undo', 'sm'), el('span', null, histWhat(x)), tag(x.at ? ago(String(x.at).slice(0, 10), ctx.today) : '')))) : note('No moves recorded yet.'), el('div', { class: 'chips2' }, goTab('history', 'Open history'))];
+      break;
+    }
+    default: {
+      const docs = R.docs.filter((d) => (t.id === 'prd' || t.id === 'brief' ? /spec|prd|brief/i.test(d.cat + ' ' + d.ty) : t.id === 'rubric' ? /eval|rubric/i.test(d.cat + ' ' + d.name) : /res|note|idea|hypo/i.test(d.cat + ' ' + d.name)));
+      body = [docs.length ? chgl(docs.slice(0, 4).map((d) => el('li', null, icon('doc', 'sm'), el('span', null, d.name), tag(d.ty)))) : note('Nothing linked yet. ' + ({ ideas: 'Capture ideas once the problem is clear.', hypotheses: 'Say what you believe and how you will know.', notes: 'Keep notes in a document linked to ' + r.id + '.', prd: 'Write the PRD before the build.', rubric: 'Agree the done-criteria with the PRD.', brief: 'A short brief: scope, owner, dates.' }[t.id] || '')),
+        el('div', { class: 'chips2' }, goTab('docs', 'Open its docs'))];
+    }
+  }
+  return card({ ic: toolIcon(t.id), title: toolLabel(t), attrs: { 'data-ini-tool-card': t.id, id: 'tool-' + t.id } }, ...body.filter(Boolean));
+}
+function histWhat(h) {
+  if (h.kind === 'workflow') return 'Changed the workflow to ' + (h.template ? h.template : 'its own') + (Array.isArray(h.stages) && h.stages.length ? ': ' + h.stages.join(' > ') : '');
+  if (h.kind === 'assign') return 'Assigned to board ' + (h.to || '');
+  if (h.kind === 'ask-accept') return 'Accepted from an ask into ' + (h.stage || h.to || 'the first stage');
+  if (h.from || h.to) return 'Moved from ' + (h.from || 'no stage') + ' to ' + (h.to || 'no stage');
+  return String(h.kind || 'Change');
+}
+
+tab('overview', async (ctx, isDead, host) => {
+  const r = ctx.row; const b = ctx.board;
+  const wf = wfOf(r, b); const cat = r.cat || catOf(wf, r.stage); const kind = kindOf(r, b);
+  const [R0, rel] = await Promise.all([loadItems(ctx), b.build ? ctx.api.get('/api/releases', { board: b.id }) : Promise.resolve(null)]);
+  const lib = await loadDocs(ctx, new Set([r.id]));
+  if (isDead()) return null;
+  const R = { items: R0.ok ? R0.items : [], docs: lib.ok ? lib.docs : [] };
+  const rels = rel && rel.ok ? (rel.releases || []).filter((x) => Array.isArray(x.initiative_ids) && x.initiative_ids.includes(r.id)) : [];
+  const server = (Array.isArray(ctx.tools) ? ctx.tools : []).map((t) => (typeof t === 'string' ? { id: t } : t)).filter((t) => t && t.id);
+  let recIds = recordToolsFor(kind, cat, b.build);
+  let srv = server.slice();
+  const picked = ctx.tool || '';
+  if (picked && RECORD_META[picked] && !recIds.includes(picked)) recIds = [picked, ...recIds];
+  if (picked && !RECORD_META[picked] && !srv.some((t) => t.id === picked)) {
+    const any = Object.values(ctx.toolsByCat || {}).flat().find((t) => t && t.id === picked);
+    srv = [any || { id: picked }, ...srv];
+  }
+  const recs = await recordCards(ctx, recIds, { boardIds: R0.ok ? R0.initiatives.map((i) => i.id) : [] });
+  const srvCards = await Promise.all(srv.map((t) => toolCard(ctx, t, R, rels)));
+  if (isDead()) return null;
+  const toolsAll = [...recs, ...srvCards];
+  if (picked) { const k = toolsAll.findIndex((n) => n.getAttribute('data-ini-tool-card') === picked); if (k > 0) toolsAll.unshift(toolsAll.splice(k, 1)[0]); }
+  const work = mine(ctx, R.items); const p = Number(r.progress) || 0;
+  const left = [
+    sect({ ic: 'notes', title: 'Summary' }, el('p', { class: 'ini-p' }, r.summary || ('Serves ' + (r.anchor || 'no anchor yet') + '. ' + (r.lane ? r.lane[0].toUpperCase() + r.lane.slice(1) + ' lane, ' : '') + tplName(r, b) + ' workflow, now in ' + (r.stage || 'no stage') + ' (' + cat + ').')),
+      Array.isArray(r.warnings) && r.warnings.length ? el('div', { class: 'chips2' }, ...r.warnings.map((w) => st('warn', 'alert', w, { 'data-ini-ovwarn': w }))) : null),
+    ...(toolsAll.length ? toolsAll : [empty('No tools for ' + (r.stage || 'this stage') + '.')]),
+  ];
+  const right = [
+    card({ ic: 'init', title: 'Details', attrs: { 'data-ini': 'details' } },
+      kv([['Portfolio', PORTFOLIO], ['Board', lk({ onclick: () => ctx.openBoard(b.id, 'initiatives') }, b.name)],
+        ['Workflow', el('span', { class: 'chips2' }, tplName(r, b), lk({ 'data-ini-wf': r.id, onclick: () => ctx.openWorkflow(r) }, 'Edit'))], ['Stage', stageChip(r.stage, cat)], ['Status', statusChip(r.status)],
+        ['Owner', ownerText(r.owner)], ['Anchor', r.anchor || 'No anchor'], ['Horizon', r.horizon ? r.horizon[0].toUpperCase() + r.horizon.slice(1) : 'Not set'], ['Lane', r.lane || 'Not set']]),
+      hbs([hbr('Progress', Math.round(p * 100) + '%', p, toneOf(r.status))]),
+      el('div', { class: 'chips2', 'data-ini': 'board-links' }, ...['backlog', 'board', 'timeline'].map((k) => lk({ 'data-ini-boardlink': k, onclick: () => ctx.openBoard(b.id, k, { ini: r.id }) }, icon('next', 'sm'), b.name + ' ' + k[0].toUpperCase() + k.slice(1) + ', this initiative only')))),
+    card({ ic: 'bolt', title: 'Work', sub: b.build ? 'Jira ' + (b.jira || '') + ' and PMOS' : 'PMOS tasks' },
+      note(plural(work.filter((w) => w.kind === 'Epic').length, 'epic') + ', ' + plural(work.filter((w) => w.kind !== 'Epic').length, 'item') + '.'), el('div', { class: 'chips2' }, lk({ onclick: () => ctx.go({ view: 'ini', board: b.id, id: r.id, tab: 'breakdown' }) }, icon('next', 'sm'), 'Open breakdown'))),
+    rels.length ? card({ ic: 'out', title: 'Releases', sub: 'live in the Calendar' }, chgl(rels.map((x) => el('li', null, icon('out', 'sm'), el('span', null, (x.name || x.id) + ' · ' + day(String(x.release_at || x.deploy_at || '').slice(0, 10))), tag('Calendar'))))) : null,
+  ];
+  if (picked) requestAnimationFrame(() => { const n = host.querySelector('[data-ini-tool-card="' + CSS.escape(picked) + '"]'); if (n && !isDead()) { if (n.scrollIntoView) n.scrollIntoView({ block: 'nearest' }); n.classList.add('ini-flash'); setTimeout(() => n.classList.remove('ini-flash'), 1400); } });
+  return cols(left, right);
+});
+
+/* ── Breakdown ── */
+tab('breakdown', async (ctx, isDead, host) => {
+  const R = await loadItems(ctx);
+  if (isDead()) return null;
+  if (!R.ok) return errLine('The work items could not be read: ' + R.error + '.');
+  const draw = async (force) => {
+    const RR = force ? await loadItems(ctx, true) : R;
+    if (isDead()) return;
+    host.replaceChildren(...body(RR));
+  };
+  const changed = () => { dropItems(ctx); draw(true); };
+  function body(RR) {
+    const work = mine(ctx, RR.items); const epics = work.filter((w) => w.kind === 'Epic');
+    const inEpic = (w) => w.kind !== 'Epic' && w.epic && epics.some((e) => e.uid === w.epic);
+    const ordered = [...epics.flatMap((e) => [e, ...work.filter((w) => w.epic === e.uid)]), ...work.filter((w) => w.kind !== 'Epic' && !inEpic(w))];
+    const F = { epic: '', busy: false };
+    const input = el('input', { type: 'text', placeholder: 'Add a PMOS task to ' + ctx.row.id, 'aria-label': 'Add a PMOS task', 'data-wk': 'add-title' });
+    const msg = el('div', { class: 'fold w', role: 'alert', hidden: '' });
+    const add = async () => {
+      const title = input.value.trim();
+      if (!title) { msg.textContent = 'Write the task first.'; msg.hidden = false; input.focus(); return; }
+      if (F.busy) return; F.busy = true;
+      const r = await ctx.api.post('/api/boards/tasks/add', { board: ctx.board.id, initiative: ctx.row.id, title, epic: F.epic || undefined });
+      F.busy = false;
+      if (!r || !r.ok) { msg.textContent = 'The task was not added: ' + ((r && r.error) || 'no answer') + '.'; msg.hidden = false; return; }
+      ctx.toast('PMOS task added to ' + ctx.row.id + '. Drag it on the Timeline to set its dates.');
+      changed();
+    };
+    input.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); add(); } });
+    const its = work.filter((w) => w.kind !== 'Epic');
+    return [
+      card({ ic: 'plus', title: 'Add a PMOS task', sub: ctx.board.build ? 'Jira items are created in Jira' : 'this board has no Jira', attrs: { 'data-wk': 'add' } },
+        el('div', { class: 'form' }, input,
+          epics.length ? el('select', { 'aria-label': 'Epic for the task', 'data-wk': 'add-epic', onchange: (e) => { F.epic = e.target.value; } }, el('option', { value: '' }, 'No epic'), ...epics.map((e) => el('option', { value: e.uid }, (e.key ? e.key + ' ' : '') + trunc(e.title, 28)))) : null,
+          pbtn('outline', 'Add', 'plus', { 'data-wk': 'add-go', onclick: add })), msg),
+      sect({ ic: 'tree', title: 'Epics and items', count: work.length, right: el('span', { class: 'dim mono ini-meta' }, its.filter((w) => w.status === 'Done').length + ' of ' + its.length + ' done') },
+        ordered.length ? list(ordered.map((w) => workRow(ctx, w, { all: RR.items, epic: false, sub: inEpic(w), onChanged: changed })), { 'data-ini': 'breakdown' }) : empty('No epics or items yet. Add a PMOS task' + (ctx.board.build ? ', or link Jira ' + (ctx.board.jira || '') + ' epics' : '') + '.', { 'data-ini': 'bd-empty' })),
+    ];
+  }
+  return body(R);
+});
+
+/* ── Docs ── */
+tab('docs', async (ctx, isDead) => {
+  const lib = await loadDocs(ctx, new Set([ctx.row.id]));
+  if (isDead()) return null;
+  if (!lib.ok) return errLine('The documents could not be read: ' + lib.error + '.');
+  if (!lib.docs.length) return empty('No documents are linked to ' + ctx.row.id + ' yet.', { 'data-inb': 'docs-empty' });
+  const box = el('div');
+  renderDocs(box, ctx, lib.docs, [ctx.row.id], new Map([[ctx.row.id, ctx.row.title]]), false);
+  return box;
+});
+
+/* ── Jira items ── */
+tab('tickets', async (ctx, isDead) => {
+  const R = await loadItems(ctx);
+  if (isDead()) return null;
+  if (!R.ok) return errLine('The Jira items could not be read: ' + R.error + '.');
+  const tk = mine(ctx, R.items).filter((w) => w.src === 'jira');
+  if (!tk.length) return empty('No Jira ' + (ctx.board.jira || '') + ' items are linked to ' + ctx.row.id + ' yet.', { 'data-inb': 'tk-empty' });
+  const its = tk.filter((w) => w.kind !== 'Epic'); const n = Math.max(1, its.length);
+  const c = (s) => its.filter((w) => w.status === s).length;
+  return cols(
+    [el('div', { class: 'fold' }, icon('lock', 'sm'), el('b', null, 'Mirrored from Jira, read-only.'), ' Status, dates and owners are Jira\'s.'),
+      sect({ ic: 'check', title: 'Jira items', count: tk.length }, list(tk.map((w) => workRow(ctx, w, { all: R.items })), { 'data-ini': 'tickets' }))],
+    [card({ ic: 'report', title: 'By status' }, hbs(['To do', 'In progress', 'In review', 'Done'].map((s) => hbr(s, c(s), c(s) / n, s === 'Done' ? 'ok' : s === 'To do' ? 'pm' : 'acc'))),
+      note(its.filter((w) => w.blocked).length + ' blocked.'))]);
+});
+
+/* ── Timeline ── */
+tab('timeline', async (ctx, isDead, host) => {
+  const R = await loadItems(ctx);
+  if (isDead()) return null;
+  if (!R.ok) return errLine('The work items could not be read: ' + R.error + '.');
+  const r = ctx.row;
+  const key = 'i:' + ctx.ws + ':' + r.id;
+  const build = (RR) => {
+    const work = mine(ctx, RR.items);
+    const ini = RR.initiatives.find((i) => i.id === r.id) || r;
+    const rows = [iniTlRow(ctx, ini, workTlRows(ctx, work, changed), ctx.board)];
+    const { from, to } = tlRange(ctx.today);
+    const node = timeline({ key, rows, from, to, today: ctx.today, head: 'Epic > item', defOpen: [r.id, ...work.filter((w) => w.kind === 'Epic').map((e) => e.uid)],
+      onMove: (task, days) => rescheduleTask(ctx, task, days, () => { tlStill(key); changed(); }), onLocked: (k) => lockedToast(ctx, k) });
+    requestAnimationFrame(() => { if (!isDead()) tlInit(host); });
+    return [sect({ ic: 'cal', title: 'Timeline', count: work.length, right: el('span', { class: 'dim mono ini-meta' }, r.start || r.end ? day(r.start) + ' to ' + day(r.end) : 'no dates yet') }, node,
+      work.some((w) => !w.start || !w.end) ? note(plural(work.filter((w) => !w.start || !w.end).length, 'item has', 'items have') + ' no dates' + (ctx.board.build ? '; Jira items get theirs from Jira' : '') + '.') : null)];
+  };
+  async function changed() { dropItems(ctx); const RR = await loadItems(ctx, true); if (!isDead()) host.replaceChildren(...build(RR).filter(Boolean)); }
+  return build(R);
+});
+
+/* ── History ── */
+tab('history', async (ctx) => {
+  const items = (Array.isArray(ctx.history) ? ctx.history.slice() : []).sort((a, b) => String(b.at || '').localeCompare(String(a.at || '')));
+  if (!items.length) return empty('No moves are recorded for ' + ctx.row.id + ' yet.', { 'data-inb': 'hist-empty' });
+  return sect({ ic: 'undo', title: 'History', count: items.length },
+    list(items.map((h) => el('li', { class: 'nrow', 'data-inb-hist': h.kind || 'move' }, el('span', { class: 'ki' }, icon(h.kind === 'workflow' ? 'settings' : h.kind === 'ask-accept' ? 'inbox' : 'undo')),
+      el('div', { class: 'nb' }, el('span', { class: 'tt' }, histWhat(h)),
+        el('div', { class: 'chips' }, chip(icon('user', 'sm'), h.by || 'Unknown'), chip(icon('clock', 'sm'), h.at ? dayLong(String(h.at).slice(0, 10)) : 'No time recorded'), ...(h.warnings || []).map((w) => st('warn', 'alert', w))),
+        h.why ? note('Why: ' + h.why) : null), el('span'))), { 'data-inb': 'hist-list' }));
+});

package/workspace/public/pm/c3-ini-records.js

@@ -0,0 +1,197 @@
+/* pm/c3-ini-records.js — the stage records of one initiative, drawn as tool cards on its Overview (mockup v5, 34-initiatives.js toolHTML:
+ * problem, rice, release (launch checklist), kill, learn, and the sprint burndown). The records are stored by the stage-records routes,
+ * which another change builds (route contract: /mnt/project-files/pmos/stage-records/route-contract.md); this file only reads and writes
+ * them through ctx.api:
+ *   GET  /api/stage-tools/records?ws&id      { records: { problem, rice, launch, kill, learnings } }, each { data, at, by } or null
+ *   POST /api/stage-tools/records            { ws, id, tool, data } -> { record }
+ *   GET  /api/stage-tools/rice?ws&ids=A,B    { rows: [{ id, score, rank }] }   ranks within the board
+ *   GET  /api/stage-tools/burndown?ws&board&ids=A  { available, sprint, committed, done, left, daysLeft, needPerDay, series } | { available: false, reason,
+ *                                             unpointed? } ("Jira not enabled on this board" when the board's buildDeliver is false)
+ * Shapes as built in PR #607 (the contract's "As built" section): a save never answers 409 (no state folder writes to the import overlay).
+ * In demo mode c3-demo-boards.js answers them. When a route is not on this server yet (404), each card shows a quiet empty state and no
+ * editor: nothing is invented.
+ *
+ *   RECORD_TOOLS[kind][cat] -> tool ids · RECORD_META { id: [label, icon] } · recordToolsFor(kind, cat)
+ *   recordCards(ctx, ids, { boardIds }) -> Promise<[section]>   one card per id, each `[data-ini-tool-card=<id>]`; boardIds ranks RICE
+ */
+import { el } from './dom.js';
+import { icon, pill, lk, pbtn, chip, note, lbl, card, chgl, kv, hbs, hbr, plural, day, ago } from './c3-ini-ui.js';
+
+export const RECORD_META = {
+  problem: ['Problem statement', 'target'], rice: ['RICE prioritisation', 'scale'], launch: ['Launch checklist', 'out'],
+  burndown: ['Sprint burndown', 'up'], kill: ['Kill conditions', 'x'], learnings: ['Learnings and retro', 'notes'],
+};
+export const RECORD_TOOLS = {
+  product: { Discover: ['problem'], Plan: ['rice'], Do: ['launch', 'burndown'], Learn: ['kill', 'learnings'] },
+  project: { Discover: [], Plan: [], Do: ['launch'], Learn: ['learnings'] },
+  simple: { Discover: [], Plan: [], Do: [], Learn: [] },
+};
+/** The record tools of a category; burndown only on a board with Build and deliver on (it reads the Jira sprint). */
+export const recordToolsFor = (kind, cat, build) => ((RECORD_TOOLS[kind] || RECORD_TOOLS.product)[cat] || []).filter((k) => k !== 'burndown' || build);
+const IMPACT = [0.25, 0.5, 1, 2, 3];
+const KILL = [['watching', 'Watching', 'warn'], ['tripped', 'Tripped', 'bad'], ['cleared', 'Cleared', 'ok']];
+const nid = () => 'r' + Date.now().toString(36) + Math.floor(Math.random() * 1e4).toString(36);
+const scoreOf = (r) => Math.round((Number(r.reach) || 0) * (Number(r.impact) || 0) * ((Number(r.confidence) || 0) / 100) / Math.max(0.25, Number(r.effort) || 0));
+const missing = (r) => !r || r.status === 404;
+const quiet = (text) => el('div', { class: 'dim ini-note', 'data-rec': 'quiet' }, text);
+
+/** Read the records once per Overview draw. { ok, missing, records, error }. */
+async function loadRecords(ctx) {
+  const r = await ctx.api.get('/api/stage-tools/records', { id: ctx.row.id });
+  if (missing(r)) return { ok: false, missing: true, records: {}, error: '' };
+  if (!r.ok) return { ok: false, missing: false, records: {}, error: r.error || 'no answer' };
+  return { ok: true, missing: false, records: r.records || {}, error: '' };
+}
+async function save(ctx, tool, data) {
+  const r = await ctx.api.post('/api/stage-tools/records', { id: ctx.row.id, tool, data });
+  if (missing(r)) { ctx.toast({ text: 'Stage records are not on this workspace server yet, so this was not saved.', tone: 'error' }); return null; }
+  if (!r.ok) { ctx.toast({ text: 'Not saved: ' + (r.error || 'no answer') + '.', tone: 'error' }); return null; }
+  return r.record || { data, at: new Date().toISOString(), by: 'You' };
+}
+const stamp = (rec, today) => (rec && rec.at ? note('Saved ' + ago(String(rec.at).slice(0, 10), today) + (rec.by ? ' by ' + rec.by : '') + '.') : null);
+
+export async function recordCards(ctx, ids, opts) {
+  opts = opts || {};
+  if (!ids.length) return [];
+  const R = await loadRecords(ctx);
+  const out = [];
+  for (const id of ids) {
+    const meta = RECORD_META[id]; if (!meta) continue;
+    const host = el('div', { 'data-rec': id });
+    out.push(card({ ic: meta[1], title: meta[0], attrs: { 'data-ini-tool-card': id, id: 'tool-' + id } }, host));
+    if (id === 'burndown') { burndown(ctx, host); continue; }
+    if (R.missing) { host.replaceChildren(quiet('Nothing recorded yet.')); continue; }
+    if (!R.ok) { host.replaceChildren(el('div', { class: 'fold w', role: 'alert' }, icon('alert', 'sm'), 'The records could not be read: ' + R.error + '.')); continue; }
+    const rec = R.records[id] || null;
+    ({ problem, rice, launch, kill, learnings })[id](ctx, host, rec, opts);
+  }
+  return out;
+}
+
+/* ── problem: one text ── */
+function problem(ctx, host, rec) {
+  const S = { text: (rec && rec.data && rec.data.text) || '', rec };
+  const draw = () => {
+    const ta = el('textarea', { rows: '3', 'aria-label': 'Problem statement', 'data-rec-field': 'problem', placeholder: 'Who has the problem, what it costs them, and how we know', maxlength: '4000' });
+    ta.value = S.text;
+    const go = pbtn('outline', 'Save', null, { 'data-rec-save': 'problem', onclick: async () => { const r = await save(ctx, 'problem', { text: ta.value.trim() }); if (r) { S.text = ta.value.trim(); S.rec = r; ctx.toast('Problem statement saved.'); draw(); } } });
+    host.replaceChildren(el('div', { class: 'form ini-text' }, ta), el('div', { class: 'chips2' }, go, note('Write it before ideas. The evidence should back each claim.')), stamp(S.rec, ctx.today));
+  };
+  draw();
+}
+
+/* ── rice: four inputs, the score, the rank on the board ── */
+function rice(ctx, host, rec, opts) {
+  const d = (rec && rec.data) || {};
+  const S = { reach: d.reach ?? '', impact: d.impact ?? 1, confidence: d.confidence ?? '', effort: d.effort ?? '', rank: '', rec };
+  const score = el('b', { 'data-rec': 'rice-score' });
+  const rank = el('span', { class: 'dim ini-note', 'data-rec': 'rice-rank' });
+  const upd = () => { score.textContent = S.reach !== '' && S.confidence !== '' && S.effort !== '' ? String(scoreOf(S)) : 'not scored'; };
+  const num = (k, label, help) => {
+    const i = el('input', { type: 'text', inputmode: 'decimal', class: 'ini-num', value: String(S[k]), 'aria-label': label + ', ' + help, title: help, 'data-rec-rice': k, oninput: (e) => { S[k] = e.target.value.trim(); upd(); } });
+    return el('label', { class: 'chips2' }, lbl(label), i);
+  };
+  async function readRank() {
+    const r = await ctx.api.get('/api/stage-tools/rice', { ids: (opts.boardIds || []).join(',') });
+    if (!r || !r.ok) { rank.textContent = ''; return; }
+    const rows = r.rows || []; const me = rows.find((x) => x.id === ctx.row.id);
+    rank.textContent = me ? 'Ranks ' + me.rank + ' of ' + rows.length + ' scored initiatives on ' + ctx.board.name : rows.length ? 'Not ranked yet: ' + plural(rows.length, 'initiative') + ' on ' + ctx.board.name + ' are scored.' : '';
+  }
+  async function go() {
+    const data = { reach: Number(S.reach), impact: Number(S.impact), confidence: Number(S.confidence), effort: Number(S.effort) };
+    if (![data.reach, data.confidence, data.effort].every((n) => Number.isFinite(n)) || data.effort <= 0 || data.confidence < 0 || data.confidence > 100 || data.reach < 0) {
+      ctx.toast({ text: 'Reach is a number, confidence 0 to 100, and effort more than 0.', tone: 'error' }); return;
+    }
+    const r = await save(ctx, 'rice', data);
+    if (r) { S.rec = r; ctx.toast('RICE saved: score ' + scoreOf(data) + '.'); readRank(); host.querySelector('[data-rec="stamp"]')?.replaceWith(stampNode()); }
+  }
+  const stampNode = () => { const n = stamp(S.rec, ctx.today) || el('span'); n.setAttribute('data-rec', 'stamp'); return n; };
+  host.replaceChildren(
+    el('div', { class: 'chips2' }, num('reach', 'Reach', 'accounts a quarter'),
+      el('label', { class: 'chips2' }, lbl('Impact'), el('select', { 'aria-label': 'Impact, 0.25 to 3', 'data-rec-rice': 'impact', onchange: (e) => { S.impact = Number(e.target.value); upd(); } }, ...IMPACT.map((v) => el('option', { value: String(v), selected: Number(S.impact) === v }, String(v))))),
+      num('confidence', 'Confidence', 'percent'), num('effort', 'Effort', 'person-months')),
+    el('div', { class: 'chips2' }, el('span', null, 'Score ', score), rank, pbtn('outline', 'Save', null, { 'data-rec-save': 'rice', onclick: go })),
+    note('Score = reach × impact × confidence ÷ effort. The inputs stay visible so the ranking can be argued with.'), stampNode());
+  upd(); readRank();
+}
+
+/* ── the three lists: launch checklist, kill conditions, learnings ── */
+function listTool(ctx, host, rec, o) {
+  const S = { items: Array.isArray(rec && rec.data && rec.data.items) ? rec.data.items.map((x) => ({ ...x })) : [], rec, busy: false };
+  async function commit(next, msg) {
+    if (S.busy) return;
+    S.busy = true;
+    const r = await save(ctx, o.tool, { items: next });
+    S.busy = false;
+    if (r) { S.items = next; S.rec = r; if (msg) ctx.toast(msg); }
+    draw();
+  }
+  function draw(focus) {
+    const input = el('input', { type: 'text', placeholder: o.placeholder, 'aria-label': o.addLabel, 'data-rec-add': o.tool, maxlength: '300' });
+    const add = () => { const t = input.value.trim(); if (!t) { input.focus(); return; } if (S.items.length >= o.max) { ctx.toast({ text: 'At most ' + o.max + ' items.', tone: 'error' }); return; } commit([...S.items, o.make(t)], null).then(() => { const f = host.querySelector('[data-rec-add]'); if (f) f.focus(); }); };
+    input.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); add(); } });
+    host.replaceChildren(
+      S.items.length ? o.list(S.items, (next, msg) => commit(next, msg)) : note(o.empty),
+      el('div', { class: 'form' }, input, pbtn('outline', 'Add', 'plus', { 'data-rec-addgo': o.tool, onclick: add })),
+      o.foot ? o.foot(S.items) : null, stamp(S.rec, ctx.today));
+    if (focus) { const f = host.querySelector(focus); if (f) f.focus(); }
+  }
+  draw();
+}
+function launch(ctx, host, rec) {
+  listTool(ctx, host, rec, { tool: 'launch', max: 40, placeholder: 'Add a launch step', addLabel: 'Add a launch step', empty: 'No launch checklist yet. List what has to be true on launch day.',
+    make: (t) => ({ id: nid(), text: t, done: false }),
+    list: (items, commit) => el('div', { class: 'ini-checks', 'data-rec': 'launch-list' }, ...items.map((c, n) => el('label', { class: 'ini-chk' + (c.done ? ' done' : '') },
+      el('input', { type: 'checkbox', checked: !!c.done, 'data-rec-check': String(n), onchange: (e) => commit(items.map((x, k) => (k === n ? { ...x, done: e.target.checked } : x)), null) }), el('span', null, c.text)))),
+    foot: (items) => (items.length ? note(items.filter((c) => c.done).length + ' of ' + items.length + ' done') : null) });
+}
+function kill(ctx, host, rec) {
+  listTool(ctx, host, rec, { tool: 'kill', max: 20, placeholder: 'A result that would make you stop', addLabel: 'Add a kill condition', empty: 'No kill conditions. Say what result would make you stop.',
+    make: (t) => ({ id: nid(), text: t, status: 'watching' }),
+    list: (items, commit) => chgl(items.map((k, n) => el('li', { class: k.status === 'tripped' ? 'bad' : k.status === 'watching' ? 'warn' : '', 'data-rec-kill': String(n) }, icon('x', 'sm'), el('span', null, k.text),
+      el('span', { class: 'seg ini-seg', role: 'group', 'aria-label': 'Status of ' + k.text }, ...KILL.map(([v, l]) => pill({ 'aria-pressed': String(k.status === v), 'data-rec-killst': v, onclick: () => { if (k.status !== v) commit(items.map((x, j) => (j === n ? { ...x, status: v } : x)), v === 'tripped' ? 'Kill condition tripped. Decide whether to stop.' : null); } }, l)))))) });
+}
+function learnings(ctx, host, rec) {
+  listTool(ctx, host, rec, { tool: 'learnings', max: 60, placeholder: 'What we learned, or would do differently', addLabel: 'Add a learning', empty: 'No learnings yet. Add them as they come, not only at the end.',
+    make: (t) => ({ id: nid(), text: t, date: ctx.today }),
+    list: (items) => chgl(items.slice().reverse().map((x) => el('li', { 'data-rec-learning': x.id }, icon('notes', 'sm'), el('span', null, x.text), el('span', { class: 'tag' }, day(x.date) || 'no date')))) });
+}
+
+/* ── burndown: read-only, mirrored from the Jira sprint ── */
+const SVGNS = 'http://www.w3.org/2000/svg';
+const svg = (tag, attrs) => { const n = document.createElementNS(SVGNS, tag); for (const [k, v] of Object.entries(attrs || {})) n.setAttribute(k, String(v)); return n; };
+function burnSvg(b, W, H) {
+  const series = (b.series || []).filter((p) => p && p.date);
+  const max = Math.max(1, Number(b.committed) || 0, ...series.map((p) => Number(p.remaining) || 0));
+  const n = Math.max(1, series.length - 1);
+  const x = (k) => 30 + (k / n) * (W - 40); const y = (v) => 8 + (1 - v / max) * (H - 26);
+  const s = svg('svg', { class: 'ini-burn', viewBox: '0 0 ' + W + ' ' + H, role: 'img', 'aria-label': 'Burndown: ' + (b.left ?? '') + ' of ' + (b.committed ?? '') + ' points left' });
+  s.append(svg('line', { class: 'ax', x1: 30, y1: y(0), x2: W - 10, y2: y(0) }), svg('line', { class: 'ax', x1: 30, y1: 8, x2: 30, y2: y(0) }));
+  if (series.length) {
+    s.append(svg('path', { class: 'ideal', d: series.map((p, k) => (k ? 'L' : 'M') + x(k).toFixed(1) + ' ' + y(Number(p.ideal) || 0).toFixed(1)).join(' ') }));
+    const act = series.filter((p) => p.remaining != null);
+    if (act.length) {
+      s.append(svg('path', { class: 'act', d: act.map((p, k) => (k ? 'L' : 'M') + x(k).toFixed(1) + ' ' + y(Number(p.remaining)).toFixed(1)).join(' ') }));
+      const k = act.length - 1; s.append(svg('circle', { class: 'dot', cx: x(k), cy: y(Number(act[k].remaining)), r: 3.5 }));
+    }
+  }
+  const t = (tx, ty, text, anchor) => { const e = svg('text', { x: tx, y: ty, 'text-anchor': anchor || 'start' }); e.textContent = text; return e; };
+  s.append(t(26, y(max) + 4, String(max), 'end'), t(26, y(0) + 3, '0', 'end'));
+  if (series.length) s.append(t(30, H - 4, day(series[0].date)), t(W - 10, H - 4, day(series[series.length - 1].date), 'end'));
+  return s;
+}
+async function burndown(ctx, host) {
+  host.replaceChildren(note('Reading the sprint'));
+  const r = await ctx.api.get('/api/stage-tools/burndown', { board: ctx.board.id, ids: ctx.row.id });
+  if (missing(r)) { host.replaceChildren(quiet('No sprint burndown yet.')); return; }
+  if (!r.ok) { host.replaceChildren(el('div', { class: 'fold w', role: 'alert' }, icon('alert', 'sm'), 'The burndown could not be read: ' + (r.error || 'no answer') + '.')); return; }
+  if (!r.available) { host.replaceChildren(quiet(r.reason || 'The Jira snapshot has no sprint dates or points yet.')); return; }
+  const sp = r.sprint || {};
+  host.replaceChildren(
+    el('div', { class: 'chips2' }, chip(icon('lock', 'sm'), 'Mirrored from Jira, read-only'), chip(icon('clock', 'sm'), (sp.name || 'Sprint') + ' · ' + day(sp.start) + ' to ' + day(sp.end))),
+    burnSvg(r, 360, 140),
+    kv([['Committed', String(r.committed ?? 0) + ' points'], ['Done', String(r.done ?? 0)], ['Left · ' + plural(Number(r.daysLeft) || 0, 'day'), String(r.left ?? 0)]]),
+    hbs([hbr('Done', (r.done ?? 0) + ' of ' + (r.committed ?? 0), (Number(r.done) || 0) / Math.max(1, Number(r.committed) || 0), 'ok')]),
+    note((r.left ?? 0) + ' points left with ' + plural(Number(r.daysLeft) || 0, 'day') + ' to go: needs ' + (Number(r.needPerDay) || 0).toFixed(1) + ' a day.' + (r.unpointed ? ' ' + plural(r.unpointed, 'ticket has', 'tickets have') + ' no points.' : '')),
+    lk({ onclick: () => ctx.openBoard(ctx.board.id, 'sprints') }, icon('next', 'sm'), 'Open ' + ctx.board.name + ' Sprints'));
+}