create-pmos 0.124.0 → 0.126.0

package/workspace/public/pm/pm-work-view.js

@@ -0,0 +1,895 @@
+/* pm/pm-work-view.js — the Work view of My work, built on the console3 mockup's own markup and CSS (initiative
+ * planning-flows-and-agent-sessions). The mockup (prototype/pmos-console-handoff/mockups/console3.html) is the UI: the rows
+ * (.nrow with .rv, .ki, .nb, .tt, .chips, .xp), the lens bar (.calbar, .seg), the add line (.c3add, .chips2), the case file
+ * (.case, .c3jf, .c3steps), the jobs card (.card.sect) and the swipe gesture are the mockup's; the styles are pm/console3.css
+ * (see pm/console3-lift.md). This file keeps the real data calls and draws what they return, nothing else.
+ *
+ * mountPmWork(host, ctx) draws once per host; disposePmWork(host) removes it.
+ * Routes (lib/routes-pm-items.js). Every write is a page press through pmPost:
+ *   GET /api/pm-items  POST /api/pm-items/{add,edit,remove,undo,done,reopen,park,unpark,move,steps/add,steps/who,steps/plan}
+ *   POST /api/pm-jobs/{add,edit,delete}
+ * A row opens its CASE FILE in place (c3-expand.js + c3-case.js: the job sentence, evidence, options with a recommendation, a slide to
+ * confirm); the editable fields sit inside it behind "Edit details". A row swipes (c3-swipe.js) and takes keys: right = the right-hand
+ * action of its list (done, in Today, ...), left = the left-hand one (later, tomorrow, ...); e and n do the same, j and k move, and the
+ * arrows do the swipes. Every action offers Undo through the reverse route (reopen, unpark, move back, edit back, undo). Anything that
+ * would send something to a person is an outward option: its slide is drawn disabled ("no channel connected"); nothing is sent.
+ * In demo mode (/c3.html?demo=1, window.__c3demo) the answers of the writes are laid over the fixtures in memory (`applyOv`); the
+ * agent run of a row with a suggested move is a mock that only walks the steps and shows a labelled draft.
+ * Drawn from the items: the lens ring (done of total). The deck is ctx.plan, a node the page builds. The
+ * microphone is drawn disabled.
+ *
+ * The helpers c3ic, c3ring, ensureC3Css and c3Phone are shared with briefing-deck.js and calendar-views.js. */
+import { el } from './dom.js';
+import { pmGet, pmPost } from './http.js';
+import { renderCase } from './c3-case.js';
+import { makeXp, attachExpand } from './c3-expand.js';
+import { attachSwipe } from './c3-swipe.js';
+import { toast } from './c3-toast.js';
+
+/* ── shared with the Briefing and Calendar views: the stylesheet, the icon sprite, the ring, the phone class ───────── */
+
+const SVG_NS = 'http://www.w3.org/2000/svg';
+/* The mockup's icon sprite (console3.html lines 970 to 1026, ids renamed c3i-*, plus the c3 layer's edit and trash). */
+const SPRITE = '<symbol id="c3i-sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></symbol><symbol id="c3i-moon" viewBox="0 0 24 24"><path d="M20 14a8 8 0 11-10-10 6 6 0 0010 10z"/></symbol><symbol id="c3i-cal" viewBox="0 0 24 24"><rect x="4" y="5" width="16" height="15" rx="2"/><path d="M4 10h16M8 3v4M16 3v4"/></symbol><symbol id="c3i-inbox" viewBox="0 0 24 24"><path d="M4 13l2-8h12l2 8M4 13v6h16v-6M4 13h5l1 2h4l1-2h5"/></symbol><symbol id="c3i-todo" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="3"/><path d="M8 12l3 3 5-6"/></symbol><symbol id="c3i-init" viewBox="0 0 24 24"><path d="M12 3l9 5-9 5-9-5 9-5zM3 13l9 5 9-5"/></symbol><symbol id="c3i-report" viewBox="0 0 24 24"><path d="M5 20V10M12 20V4M19 20v-7"/></symbol><symbol id="c3i-notes" viewBox="0 0 24 24"><path d="M6 3h9l4 4v14H6zM14 3v5h5M9 13h7M9 17h5"/></symbol><symbol id="c3i-user" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-6 8-6s8 2 8 6"/></symbol><symbol id="c3i-doc" viewBox="0 0 24 24"><path d="M6 3h9l4 4v14H6zM14 3v5h5"/></symbol><symbol id="c3i-sheet" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="2"/><path d="M4 10h16M4 15h16M10 4v16"/></symbol><symbol id="c3i-img" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"/><circle cx="9" cy="10" r="2"/><path d="M21 16l-5-5-9 9"/></symbol><symbol id="c3i-pdf" viewBox="0 0 24 24"><path d="M6 3h9l4 4v14H6zM14 3v5h5M9 15h6M9 18h4"/></symbol><symbol id="c3i-term" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M7 9l3 3-3 3M13 15h4"/></symbol><symbol id="c3i-branch" viewBox="0 0 24 24"><circle cx="6" cy="5" r="2"/><circle cx="6" cy="19" r="2"/><circle cx="18" cy="9" r="2"/><path d="M6 7v10M18 11c0 4-6 3-12 6"/></symbol><symbol id="c3i-repo" viewBox="0 0 24 24"><path d="M5 4h11a3 3 0 013 3v13H8a3 3 0 01-3-3zM5 17a3 3 0 013-3h11"/></symbol><symbol id="c3i-flag" viewBox="0 0 24 24"><path d="M6 21V4M6 5h11l-2 4 2 4H6"/></symbol><symbol id="c3i-clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></symbol><symbol id="c3i-alert" viewBox="0 0 24 24"><path d="M12 3l10 18H2zM12 10v5M12 18v.5"/></symbol><symbol id="c3i-check" viewBox="0 0 24 24"><path d="M5 12l5 5 9-10"/></symbol><symbol id="c3i-x" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></symbol><symbol id="c3i-eye" viewBox="0 0 24 24"><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></symbol><symbol id="c3i-undo" viewBox="0 0 24 24"><path d="M4 12a8 8 0 108-8M4 4v6h6"/></symbol><symbol id="c3i-out" viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></symbol><symbol id="c3i-shield" viewBox="0 0 24 24"><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z"/></symbol><symbol id="c3i-mic" viewBox="0 0 24 24"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5 11a7 7 0 0014 0M12 18v3"/></symbol><symbol id="c3i-clip" viewBox="0 0 24 24"><rect x="6" y="4" width="12" height="17" rx="2"/><path d="M9 4h6v3H9zM9 12h6M9 16h4"/></symbol><symbol id="c3i-search" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-5-5"/></symbol><symbol id="c3i-phone" viewBox="0 0 24 24"><rect x="7" y="2" width="10" height="20" rx="2"/><path d="M11 18h2"/></symbol><symbol id="c3i-cloud" viewBox="0 0 24 24"><path d="M7 18a4 4 0 010-8 5 5 0 019.6-1A4.5 4.5 0 0117 18z"/></symbol><symbol id="c3i-bolt" viewBox="0 0 24 24"><path d="M13 2L4 14h7l-1 8 9-12h-7z"/></symbol><symbol id="c3i-plus" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></symbol><symbol id="c3i-scale" viewBox="0 0 24 24"><path d="M12 3v18M5 7h14M5 7l-3 7a3 3 0 006 0zM19 7l-3 7a3 3 0 006 0z"/></symbol><symbol id="c3i-reply" viewBox="0 0 24 24"><path d="M9 7L4 12l5 5M4 12h10a6 6 0 016 6"/></symbol><symbol id="c3i-info" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 11v6M12 7.5v.5"/></symbol><symbol id="c3i-wait" viewBox="0 0 24 24"><path d="M7 3h10M7 21h10M8 3c0 5 8 5 8 9s-8 4-8 9"/></symbol><symbol id="c3i-up" viewBox="0 0 24 24"><path d="M7 11v9H4v-9zM7 11l4-8c2 0 3 1 3 3v3h5a2 2 0 012 2l-1 6a2 2 0 01-2 2H7"/></symbol><symbol id="c3i-cols" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M9 4v16M15 4v16"/></symbol><symbol id="c3i-fold" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M15 4v16"/></symbol><symbol id="c3i-spark" viewBox="0 0 24 24"><path d="M12 3l2 5 5 2-5 2-2 5-2-5-5-2 5-2z"/></symbol><symbol id="c3i-target" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1"/></symbol><symbol id="c3i-filter" viewBox="0 0 24 24"><path d="M3 5h18l-7 8v6l-4-2v-4z"/></symbol><symbol id="c3i-mail" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></symbol><symbol id="c3i-lock" viewBox="0 0 24 24"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V8a4 4 0 018 0v3"/></symbol><symbol id="c3i-play" viewBox="0 0 24 24"><path d="M7 4l13 8-13 8z"/></symbol><symbol id="c3i-stop" viewBox="0 0 24 24"><rect x="6" y="6" width="12" height="12" rx="1"/></symbol><symbol id="i-pause" viewBox="0 0 24 24"><path d="M8 5v14M16 5v14"/></symbol><symbol id="c3i-prev" viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"/></symbol><symbol id="c3i-next" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></symbol><symbol id="c3i-tree" viewBox="0 0 24 24"><path d="M5 4h7v4H5zM13 10h7v4h-7zM13 17h7v4h-7zM8 8v11h5M8 12h5"/></symbol><symbol id="c3i-org" viewBox="0 0 24 24"><path d="M9 3h6v5H9zM3 16h6v5H3zM15 16h6v5h-6zM12 8v4M6 16v-4h12v4"/></symbol><symbol id="c3i-drop" viewBox="0 0 24 24"><path d="M12 3c4 5 6 8 6 11a6 6 0 01-12 0c0-3 2-6 6-11z"/></symbol><symbol id="c3i-more" viewBox="0 0 24 24"><path d="M5 12h.01M12 12h.01M19 12h.01" stroke-width="3"/></symbol><symbol id="c3i-zin" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-5-5M8 11h6M11 8v6"/></symbol><symbol id="c3i-zout" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-5-5M8 11h6"/></symbol><symbol id="c3i-bell" viewBox="0 0 24 24"><path d="M6 17v-6a6 6 0 0112 0v6l2 2H4zM10 21h4"/></symbol><symbol id="c3i-vol" viewBox="0 0 24 24"><path d="M4 9v6h4l5 4V5L8 9zM16.5 8.5a5 5 0 010 7M19 6a8.5 8.5 0 010 12"/></symbol><symbol id="c3i-menu" viewBox="0 0 24 24"><path d="M4 7h16M4 12h16M4 17h16"/></symbol><symbol id="c3i-edit" viewBox="0 0 24 24"><path d="M4 20h4L19 9l-4-4L4 16v4zM13.5 6.5l4 4"/></symbol><symbol id="c3i-trash" viewBox="0 0 24 24"><path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13"/></symbol>';
+
+/** Link console3.css once, from this module's own folder (the same way primitives.js links components.css). */
+export function ensureC3Css() {
+  if (typeof document === 'undefined' || document.querySelector('link[data-c3]')) return;
+  const l = document.createElement('link');
+  l.rel = 'stylesheet';
+  l.href = new URL('./console3.css', import.meta.url).href;
+  l.setAttribute('data-c3', '');
+  document.head.appendChild(l);
+  if (!document.getElementById('c3-sprite') && document.body) {
+    const d = document.createElement('div');
+    d.id = 'c3-sprite';
+    d.setAttribute('aria-hidden', 'true');
+    d.style.cssText = 'position:absolute;width:0;height:0;overflow:hidden';
+    d.innerHTML = '<svg width="0" height="0" aria-hidden="true"><defs>' + SPRITE + '</defs></svg>';
+    document.body.appendChild(d);
+  }
+}
+
+/** The mockup's ic(): <svg class="ic sm"><use href="#c3i-name"/></svg>. */
+export function c3ic(name, cls) {
+  const s = document.createElementNS(SVG_NS, 'svg');
+  s.setAttribute('class', 'ic' + (cls ? ' ' + cls : ''));
+  s.setAttribute('aria-hidden', 'true');
+  const u = document.createElementNS(SVG_NS, 'use');
+  u.setAttribute('href', '#c3i-' + name);
+  s.appendChild(u);
+  return s;
+}
+
+/** The mockup's ring(done, total, size), built as DOM. A label replaces the "done/total" text in the middle. */
+export function c3ring(done, total, size, label) {
+  const long = String(label || done + '/' + total).length > 5;   // "322/322" does not fit a 44px ring: grow it and use the smaller size
+  if (long) size = Math.max(size, 64);
+  const r = size / 2 - 5; const cc = 2 * Math.PI * r; const p = total ? done / total : 0; const c = size / 2;
+  const s = document.createElementNS(SVG_NS, 'svg');
+  const set = (n, o) => { for (const k in o) n.setAttribute(k, o[k]); return n; };
+  set(s, { width: size, height: size, viewBox: `0 0 ${size} ${size}`, role: 'img', 'aria-label': label ? String(label) : `${done} of ${total}` });
+  s.appendChild(set(document.createElementNS(SVG_NS, 'circle'), { cx: c, cy: c, r, fill: 'none', stroke: 'var(--muted)', 'stroke-width': 6 }));
+  s.appendChild(set(document.createElementNS(SVG_NS, 'circle'), { cx: c, cy: c, r, fill: 'none', class: 'rg', stroke: 'var(--acc)', 'stroke-width': 6, 'stroke-linecap': 'round', 'stroke-dasharray': `${cc * p} ${cc}`, transform: `rotate(-90 ${c} ${c})` }));
+  const t = set(document.createElementNS(SVG_NS, 'text'), { x: c, y: c + 4, 'text-anchor': 'middle', class: 't', style: 'font-size:' + (long ? '10px' : 'var(--fs-2)') });
+  t.textContent = label ? String(label) : `${done}/${total}`;
+  s.appendChild(t);
+  return s;
+}
+
+/** The mockup's `.ph` phone class, driven by one media query so the view and a real phone behave the same. Returns the stop function. */
+export function c3Phone(root) {
+  if (typeof matchMedia !== 'function') return () => {};
+  const q = matchMedia('(max-width:640px)');
+  const on = () => root.classList.toggle('ph', q.matches);
+  on();
+  if (q.addEventListener) q.addEventListener('change', on); else q.addListener(on);
+  return () => { if (q.removeEventListener) q.removeEventListener('change', on); else q.removeListener(on); };
+}
+
+/** The mockup's ib(): an icon button. */
+export function c3ib(label, icon, attrs, cls) {
+  return el('button', { type: 'button', class: 'ib ' + (cls || ''), title: label, 'aria-label': label, ...(attrs || {}) }, c3ic(icon));
+}
+
+/* ── copy and constants ──────────────────────────────────────────────────────────────────────────────────────────── */
+
+const API = '/api/pm-items';
+const JOBS = '/api/pm-jobs';
+const LENSES = [['triage', 'Triage'], ['today', 'Today'], ['week', 'Week'], ['waiting', 'Waiting'], ['later', 'Later']];
+const WLI = { triage: 'inbox', today: 'sun', week: 'cal', waiting: 'wait', later: 'moon' };   // console3.html line 3207
+const WHO = ['you', 'agent-drafts', 'agent-does'];
+const OUTWARD = /\b(send|sends|sending|email|emails|message|messages|tell|post|reply to)\b/i; // mirrors lib/item-steps.js
+const NEED = 'Needs the backend: no endpoint for this yet.';
+
+export const COPY = Object.freeze({
+  addPlaceholder: 'Add work: type or speak',
+  addLabel: 'Add work', addBtn: 'Add', hint: 'Try: Send Dana the new date by Fri !1',
+  addsTo: 'adds to', noJob: 'no job yet', waitingOn: (w) => 'waiting on ' + w,
+  empty: 'Nothing here.', noJobGroup: 'No job yet', jobs: 'Jobs to be done', noJobs: 'No jobs yet.',
+  addJob: 'Add a job', addJobPlaceholder: 'when I plan a release, I want honest dates, so Dana can trust them',
+  groupJob: 'Group by job to be done', groupTime: 'Group by time', loading: 'Reading…',
+  micOff: 'Speak is off on this line: on-device dictation runs in Notes, in the main app. Type the item here.',
+  jobsNote: 'The count is every item in the job, across all lists. Tap a job to edit or delete it.',
+  legend: ['open', 'done', 'migrated', 'scheduled'], readError: 'Your items could not be read.', saveError: 'Nothing was saved.',
+  removed: 'Removed.', undo: 'Undo', restored: 'Restored.', tooLate: 'Too late to undo.', drop: 'Drop it',
+  reassigned: (n) => (n === 1 ? '1 item now has no job.' : `${n} items now have no job.`),
+  progress: (d, t) => `${d} of ${t} done`,
+  jobLine: (j) => `When ${j.when}, I want ${j.want}, so ${j.so}.`,
+  lens: {
+    triage: (n) => `${n} to triage`, today: (n) => `${n} committed today`, week: (n) => `${n} land in the next 7 days`,
+    waiting: (n) => `${n} waiting on others`, later: (n) => `${n} for later`,
+  },
+  lensSub: {
+    triage: 'No date and nobody to wait on. Give each one a date, or park it.', today: 'Due today or overdue.',
+    week: 'Due in the next 7 days.', waiting: 'Someone else must act first.', later: 'Dated further out.',
+  },
+  done: 'Done', park: 'Park', doneToast: 'Marked done.', parkToast: 'Parked in Later.', steps: 'Steps', noSteps: 'No steps yet.', addStep: 'Add a step',
+  who: { you: 'You', 'agent-drafts': 'Agent drafts', 'agent-does': 'Agent does' },
+  whoOutward: 'Sends to a person: the agent drafts, you slide to send.', options: 'Options', plan: 'Plan the steps',
+});
+const insts = new WeakMap();
+
+/* The toast is the shared one (c3-toast.js): the text and, for an action that can be taken back, an Undo button. One at a time. */
+const say = toast;
+
+/* ── the demo overlay ────────────────────────────────────────────────────────────────────────────────────────────── *
+ * In /c3.html?demo=1 every write is answered { ok: true } and the fixtures never change, so the page keeps what the PM did in
+ * memory (`inst.ov`) and lays it over each read. Real mode has no overlay: the server is the truth and every press re-reads. */
+const DEMO = () => typeof window !== 'undefined' && !!window.__c3demo;
+const newOv = () => ({ done: new Set(), gone: new Set(), lens: new Map(), edits: new Map(), added: [], steps: new Map(), who: new Map(), jobsAdded: [], jobEdits: new Map(), jobsGone: new Map(), seq: 0 });
+const LENS_IDS = LENSES.map((l) => l[0]);
+
+function applyOv(base, ov) {
+  const d = JSON.parse(JSON.stringify(base));
+  const home = {};
+  LENS_IDS.forEach((l) => (d.lists[l] || []).forEach((i) => { home[i.id] = l; }));
+  const added = ov.added.map((a) => { home[a.item.id] = a.lens; return a.item; }).reverse();
+  const jobOfItem = {};
+  let items = [...added, ...(d.items || [])].filter((i) => !ov.gone.has(i.id));
+  const wasDone = new Set((d.items || []).filter((i) => i.done).map((i) => i.id));
+  items = items.map((i) => {
+    const m = { ...i, ...(ov.edits.get(i.id) || {}) };
+    m.done = !!(i.done || ov.done.has(i.id));
+    m.steps = [...(i.steps || []), ...(ov.steps.get(i.id) || [])].map((s) => (ov.who.has(s.id) ? { ...s, who: ov.who.get(s.id) } : s));
+    jobOfItem[m.id] = m.job;
+    return m;
+  });
+  const lists = {}; LENS_IDS.forEach((l) => { lists[l] = []; });
+  items.forEach((i) => { const l = ov.lens.get(i.id) || home[i.id] || 'triage'; (lists[l] || lists.triage).push(i); });
+  /* The mockup's Today (console3.html wItems, line 3215) is the work set for today AND the inbox items due today: an item due today shows in both lenses. */
+  const dueToday = (i) => String(i.kind || '').toLowerCase() !== 'fyi' && ((i.due && i.due === d.today) || /^(\d\d:\d\d|today)$/.test(i.time || ''));
+  lists.triage.filter((i) => !i.done && dueToday(i) && !lists.today.includes(i)).forEach((i) => lists.today.push(i));
+  d.items = items; d.lists = lists;
+  if (d.noise) d.noise = d.noise.filter((n) => !ov.done.has(n.id || 'noise-' + String(n.title).toLowerCase().replace(/[^a-z0-9]+/g, '-')));
+  const jobs = [...(d.jobs || []), ...ov.jobsAdded].filter((j) => !ov.jobsGone.has(j.id)).map((j) => ({ ...j, ...(ov.jobEdits.get(j.id) || {}) }));
+  jobs.forEach((j) => {
+    j.done = (j.done || 0) + [...ov.done].filter((id) => !wasDone.has(id) && jobOfItem[id] === j.id).length;
+    j.total = (j.total || 0) + ov.added.filter((a) => a.item.job === j.id).length;
+  });
+  d.jobs = jobs;
+  return d;
+}
+
+/** Record in the overlay what a demo press would have changed. `body` and `r` are the press and its answer. */
+function applyLocal(inst, path, body, r) {
+  const ov = inst.ov; const id = body && body.id;
+  const today = (inst.base && inst.base.today) || iso(new Date());
+  const cur = id && ((inst.data && inst.data.items) || []).find((i) => i.id === id);
+  switch (path.replace(API, '').replace(JOBS, '/job')) {
+    case '/done': ov.done.add(id); break;
+    case '/reopen': ov.done.delete(id); break;
+    case '/park': ov.lens.set(id, 'later'); break;
+    case '/unpark': ov.lens.delete(id); break;
+    case '/move': ov.lens.set(id, body.list); break;
+    case '/edit': {
+      ov.edits.set(id, { ...(ov.edits.get(id) || {}), ...body.fields });
+      if (cur && ('due' in body.fields || 'waiting_on' in body.fields)) ov.lens.set(id, lensOf({ ...cur, ...body.fields }, today));
+      break;
+    }
+    case '/add': {
+      const p = previewParse(body.line, today);
+      const item = { ...(r.item || {}), id: (r.item && r.item.id) || 'item-demo-add' + (++ov.seq), title: p.title || String(body.line), due: p.due, priority: p.priority, waiting_on: p.waiting_on, job: null, steps: [], created_at: today + 'T05:00:00.000Z' };
+      ov.added.push({ item, lens: lensOf(p, today) });
+      r.item = item;
+      break;
+    }
+    case '/remove': ov.gone.add(id); break;
+    case '/undo': ov.gone.delete(id); break;
+    case '/steps/add': { const l = ov.steps.get(id) || []; l.push({ id: 'step-demo' + (++ov.seq), text: body.text, who: 'you', done: false }); ov.steps.set(id, l); break; }
+    case '/steps/who': ov.who.set(body.step_id, body.who); break;
+    case '/steps/plan': {
+      const t = (cur && cur.title) || 'the item';
+      const l = ov.steps.get(id) || [];
+      [['Read the item and what it links to', 'agent-does'], ['Draft the first pass or the message', 'agent-drafts'], ['Check it and decide', 'you']].forEach(([text, who]) => l.push({ id: 'step-demo' + (++ov.seq), text, who, done: false }));
+      ov.steps.set(id, l);
+      break;
+    }
+    case '/job/add': {
+      const m = (re) => { const x = String(body.line || '').match(re); return x ? x[1].trim().replace(/[,;]$/, '') : ''; };
+      const job = { id: 'job-demo-new' + (++ov.seq), when: m(/\bwhen\s+(.+?)(?=,?\s*I want\b|,?\s*so\b|$)/i), want: m(/\bI want\s+(.+?)(?=,?\s*so\b|$)/i), so: m(/\bso\s+(.+)$/i), done: 0, total: 0, ...(body.name ? { mock_name: body.name } : {}) };
+      ov.jobsAdded.push(job);
+      break;
+    }
+    case '/job/edit': ov.jobEdits.set(id, { ...(ov.jobEdits.get(id) || {}), ...body.fields }); break;
+    case '/job/delete': {
+      ov.jobsGone.set(id, true);
+      ((inst.data && inst.data.items) || []).filter((i) => i.job === id).forEach((i) => ov.edits.set(i.id, { ...(ov.edits.get(i.id) || {}), job: body.reassign_to || null }));
+      r.reassigned = ((inst.data && inst.data.items) || []).filter((i) => i.job === id).length;
+      break;
+    }
+    default: break;
+  }
+}
+
+export function mountPmWork(host, ctx) {
+  let inst = insts.get(host);
+  if (inst) return;
+  if (ctx && ctx.FIXTURE) return;
+  ensureC3Css();
+  inst = { host, ctx: ctx || {}, root: el('div', { class: 'c3 calwrap', 'data-pm-work': '' }), data: null, base: null, ov: newOv(), lens: 'triage', group: false,
+    opens: new Set(), picks: new Map(), editing: new Set(), planning: new Set(), runs: new Map(), trays: new Set(), cases: new Set(), timers: new Set(), hidden: new Set(), jobNew: null, jobForm: false };
+  inst.body = el('div', { class: 'calbody pmw-body' });
+  inst.bar = el('div', { class: 'calbar' });
+  inst.addBox = addLine(inst);
+  inst.root.append(inst.addBox, inst.bar, inst.body);
+  inst.stopPhone = c3Phone(inst.root);
+  insts.set(host, inst);
+  host.appendChild(inst.root);
+  load(inst);
+}
+
+export function disposePmWork(host) {
+  const inst = insts.get(host);
+  if (!inst) return;
+  if (inst.stopPhone) inst.stopPhone();
+  disposeCases(inst);
+  inst.timers.forEach((t) => clearTimeout(t));
+  inst.root.remove();
+  insts.delete(host);
+}
+
+function disposeCases(inst) { inst.cases.forEach((c) => { try { c.c3case.dispose(); } catch { /* already gone */ } }); inst.cases.clear(); }
+const later = (inst, fn, ms) => { const t = setTimeout(() => { inst.timers.delete(t); if (insts.get(inst.host) === inst) fn(); }, ms); inst.timers.add(t); };
+
+/* ── reads and presses ───────────────────────────────────────────────────────────────────────────────────────────── */
+
+async function load(inst) {
+  const r = await pmGet(API);
+  inst.base = r && r.ok ? r : null;
+  inst.data = inst.base && DEMO() ? applyOv(inst.base, inst.ov) : inst.base;
+  if (!inst.data) say({ text: (r && r.error) || COPY.readError, tone: 'error' });
+  if (insts.get(inst.host) === inst) draw(inst);
+}
+
+async function press(inst, path, body, { quiet } = {}) {
+  const r = await pmPost(path, body);
+  if (!r || !r.ok) { say({ text: (r && r.error) || COPY.saveError, tone: 'error' }); return null; }
+  if (DEMO()) applyLocal(inst, path, body, r);
+  if (!quiet) await load(inst);
+  return r;
+}
+
+/* One action on an item, as the mockup does it: the row leaves, a toast says what happened and offers Undo. `spec` =
+ * { route, body, text, undo: async (r) => boolean, leave } and every route is an existing page-press route. */
+async function act(inst, rowEl, spec) {
+  const r = await press(inst, spec.route.startsWith('/api/') ? spec.route : API + spec.route, spec.body, { quiet: true });
+  if (!r) return false;
+  const leaves = spec.leave !== false;
+  if (rowEl && leaves) rowEl.classList.add('leave');          // the mockup's .leave: fade and slide out (console3.html line 76)
+  say({
+    text: spec.text, timeout: r.undo_ms || 6000, actionLabel: spec.undo ? COPY.undo : undefined,
+    onAction: spec.undo ? async () => { const u = await spec.undo(r); if (u) say({ text: COPY.restored, timeout: 2500 }); await load(inst); } : undefined,
+  });
+  later(inst, () => load(inst), rowEl && leaves ? 230 : 0);
+  return true;
+}
+
+const undoBy = (inst, route, body) => async () => !!(await press(inst, API + route, body, { quiet: true }));
+
+const doneAct = (inst, item, row, text) => act(inst, row, { route: '/done', body: { id: item.id }, text: text || COPY.doneToast, undo: undoBy(inst, '/reopen', { id: item.id }) });
+const parkAct = (inst, item, row, text) => act(inst, row, { route: '/park', body: { id: item.id }, text: text || COPY.parkToast, undo: undoBy(inst, '/unpark', { id: item.id }) });
+const moveAct = (inst, item, row, list, text) => {
+  const back = lensOfItem(inst, item.id);
+  return act(inst, row, { route: '/move', body: { id: item.id, list }, text, undo: undoBy(inst, '/move', { id: item.id, list: back }) });
+};
+const dueAct = (inst, item, row, due, text) => act(inst, row, { route: '/edit', body: { id: item.id, fields: { due } }, text, undo: undoBy(inst, '/edit', { id: item.id, fields: { due: item.due || null } }) });
+const dropAct = (inst, item, row) => act(inst, row, { route: '/remove', body: { id: item.id }, text: COPY.removed, undo: undoBy(inst, '/undo', { id: item.id }) });
+
+function lensOfItem(inst, id) {
+  for (const l of LENS_IDS) if ((lists(inst)[l] || []).some((i) => i.id === id)) return l;
+  return inst.lens;
+}
+
+async function cycleWho(inst, item, step) {
+  const outward = OUTWARD.test(step.text);
+  const next = WHO[(WHO.indexOf(step.who) + 1) % WHO.length];
+  // Outward steps stay agent-drafts; the server enforces it too.
+  if (outward) { say({ text: COPY.whoOutward, timeout: 3000 }); if (step.who === 'agent-drafts') return; }
+  await press(inst, API + '/steps/who', { step_id: step.id, who: outward ? 'agent-drafts' : next });
+}
+
+function planSteps(inst, item) {
+  inst.planning.add(item.id); inst.opens.add(item.id); draw(inst);
+  later(inst, async () => { await press(inst, API + '/steps/plan', { id: item.id }, { quiet: true }); inst.planning.delete(item.id); await load(inst); }, 800);
+}
+
+/* ── the add line: a client preview of the server parser (lib/pm-items.js parseLine), so the chips match what is saved ── */
+
+const DAYS = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'];
+const MON = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+const iso = (d) => d.toISOString().slice(0, 10);
+const addIso = (s, n) => { const d = new Date(s + 'T00:00:00Z'); d.setUTCDate(d.getUTCDate() + n); return iso(d); };
+const nextMonday = (s) => { const d = new Date(s + 'T00:00:00Z'); return addIso(s, ((8 - d.getUTCDay()) % 7) || 7); };
+const dayLabel = (s) => { const d = new Date(s + 'T00:00:00Z'); return DAYS[d.getUTCDay()].slice(0, 1).toUpperCase() + DAYS[d.getUTCDay()].slice(1, 3) + ' ' + d.getUTCDate() + ' ' + MON[d.getUTCMonth()]; };
+
+function previewParse(text, todayIso) {
+  let rest = String(text || '').trim();
+  const out = { title: '', due: null, priority: null, waiting_on: null };
+  const p = rest.match(/\bP([1-3])\b/i) || rest.match(/(?:^|\s)!([1-3])(?=\s|$)/);   // "P1" or the shorthand "!1" (the server parser reads both)
+  if (p) { out.priority = 'P' + p[1]; rest = rest.replace(p[0], ' '); }
+  const w = rest.match(/\bwaiting on\s+([^,;]+?)(?=\s+(?:by|due|P[1-3])\b|$)/i);
+  if (w) { out.waiting_on = w[1].trim(); rest = rest.replace(w[0], ' '); }
+  const t = new Date(todayIso + 'T00:00:00Z');
+  const di = rest.match(/\b(?:due|by)\s+(\d{4}-\d{2}-\d{2})\b/i);
+  const dw = rest.match(/\b(?:due|by)\s+(today|tomorrow|sun(?:day)?|mon(?:day)?|tue(?:s(?:day)?)?|wed(?:nesday)?|thu(?:r(?:s(?:day)?)?)?|fri(?:day)?|sat(?:urday)?)\b/i);
+  if (di) { out.due = di[1]; rest = rest.replace(di[0], ' '); }
+  else if (dw) {
+    const k = dw[1].toLowerCase();
+    const d = new Date(t.getTime());
+    if (k === 'tomorrow') d.setUTCDate(d.getUTCDate() + 1);
+    else if (k !== 'today') d.setUTCDate(d.getUTCDate() + ((DAYS.findIndex((w) => w.startsWith(k.slice(0, 3))) - d.getUTCDay() + 7) % 7));
+    out.due = iso(d);
+    rest = rest.replace(dw[0], ' ');
+  }
+  out.title = rest.replace(/\s+/g, ' ').replace(/[,;]\s*$/, '').trim();
+  return out;
+}
+
+function lensOf(o, todayIso) {
+  if (o.waiting_on) return 'waiting';
+  if (!o.due) return 'triage';
+  if (o.due <= todayIso) return 'today';
+  const w = new Date(todayIso + 'T00:00:00Z'); w.setUTCDate(w.getUTCDate() + 7);
+  return o.due <= iso(w) ? 'week' : 'later';
+}
+
+const labelOf = (id) => (LENSES.find((l) => l[0] === id) || [])[1] || id;
+const small = 'font-size:var(--fs-2)';
+
+/* The mockup's c3prev(): "adds to", a .tag, then .chip2 / .fl / .st chips (console3.html line 4573). */
+function previewChips(inst, text) {
+  const today = (inst.data && inst.data.today) || iso(new Date());
+  if (!text.trim()) return [el('span', { class: 'dim mono', style: small }, COPY.hint)];
+  const o = previewParse(text, today);
+  if (!o.title) return [el('span', { class: 'dim mono', style: small }, 'The line needs a title.')];
+  const out = [el('span', { class: 'dim mono', style: small }, COPY.addsTo), el('span', { class: 'tag' }, labelOf(lensOf(o, today)))];
+  if (o.due) out.push(el('span', { class: 'chip2' }, c3ic('cal', 'sm'), o.due));
+  if (o.priority) out.push(el('span', { class: 'fl ' + o.priority.toLowerCase() }, o.priority));
+  if (o.waiting_on) out.push(el('span', { class: 'chip2' }, c3ic('wait', 'sm'), COPY.waitingOn(o.waiting_on)));
+  out.push(el('span', { class: 'st warn' }, c3ic('target', 'sm'), COPY.noJob));
+  return out;
+}
+
+/* The mockup's c3addLine(): .c3add > .form (input, add button) + .chips2 with the live chips. The microphone is drawn disabled (see addLine). */
+function addLine(inst) {
+  const input = el('input', { type: 'text', placeholder: COPY.addPlaceholder, 'aria-label': COPY.addLabel, autocomplete: 'off', 'data-pm-add': API + '/add' });
+  const chips = el('div', { class: 'chips2', 'data-pm-chips': '' }, previewChips(inst, ''));
+  inst.chips = chips; inst.input = input;
+  const send = async () => {
+    const line = input.value.trim();
+    if (!line) return;
+    const before = inst.data && inst.data.today;
+    const o = previewParse(line, before || iso(new Date()));
+    const r = await press(inst, API + '/add', { line }, { quiet: true });
+    if (!r) return;
+    input.value = ''; chips.replaceChildren(...previewChips(inst, ''));
+    inst.lens = lensOf(o, before || iso(new Date())); if (inst.ctx.onLens) inst.ctx.onLens(inst.lens); inst.group = false;
+    if (r.item) inst.opens.add(r.item.id);
+    say({ text: 'Added to ' + labelOf(inst.lens), timeout: r.undo_ms || 6000, actionLabel: COPY.undo, onAction: async () => { if (r.item) await press(inst, API + '/remove', { id: r.item.id }, { quiet: true }); await load(inst); } });
+    await load(inst);
+    if (DEMO() && r.item) later(inst, () => planSteps(inst, r.item), 900);   // the mockup's agent plans the steps a moment after the add; real mode waits for the PM to press "Plan the steps"
+  };
+  input.addEventListener('input', () => chips.replaceChildren(...previewChips(inst, input.value)));
+  input.addEventListener('keydown', (e) => { if (e.key === 'Enter' && !e.isComposing) send(); });
+  const add = c3ib(COPY.addBtn, 'plus', { 'data-pm-add-send': '', onClick: send }, 'pri');
+  // The mockup's microphone (c3addLine). Disabled: the on-device dictation (whisper.cpp) belongs to a Notes document and needs the
+  // server; nothing on this page may record, and the browser recogniser is not on-device.
+  const mic = c3ib(COPY.micOff, 'mic', { 'data-off': '', 'data-pm-mic': '', onclick: () => say({ text: 'The microphone needs the app. Nothing was recorded: type the item here.', timeout: 4200 }) });
+  return el('div', { class: 'c3add' }, el('div', { class: 'form' }, input, mic, add), chips);
+}
+
+/* ── rows and the case file ──────────────────────────────────────────────────────────────────────────────────────── */
+
+const jobById = (inst, id) => (inst.data.jobs || []).find((j) => j.id === id);
+const lists = (inst) => inst.data.lists || {};
+const shown = (inst, id) => (lists(inst)[id] || []).filter((i) => !inst.hidden.has(i.id) && !i.done);
+
+/* The mockup's .c3jf: a label (.dim.mono) and an input on one line (console3.html line 4651). */
+function field(label, input) { return el('label', null, el('span', { class: 'dim mono' }, label), input); }
+
+function editField(inst, item, label, shortLabel, kind, key, value) {
+  const input = el(kind === 'select' ? 'select' : 'input', { 'aria-label': label, 'data-pm-edit': item.id + ':' + key, ...(kind === 'date' ? { type: 'date' } : kind === 'text' ? { type: 'text' } : {}) });
+  if (kind === 'select') {
+    const opts = key === 'job'
+      ? [['', COPY.noJobGroup], ...(inst.data.jobs || []).map((j) => [j.id, j.want])]
+      : [['', 'None'], ['P1', 'P1'], ['P2', 'P2'], ['P3', 'P3']];
+    opts.forEach(([v, t]) => input.appendChild(el('option', { value: v }, t)));
+  }
+  input.value = value || '';
+  input.addEventListener('change', async () => {
+    const v = input.value.trim();
+    const old = item[key] === undefined ? null : item[key];
+    const r = await press(inst, API + '/edit', { id: item.id, fields: { [key]: v === '' && key !== 'title' ? null : v } });
+    if (r) say({ text: 'Saved', timeout: 5000, actionLabel: COPY.undo, onAction: async () => { await press(inst, API + '/edit', { id: item.id, fields: { [key]: old } }); } });
+  });
+  return field(shortLabel, input);
+}
+
+/* The mockup's c3stepsHtml(): .c3steps > .c3sh + ul > li (.c3sg, .c3stt, .chips2 with the who pill) + an add input (line 4595). */
+function stepsBlock(inst, item) {
+  if (inst.planning.has(item.id)) return el('div', { class: 'fold a', 'data-pm-planning': item.id, role: 'status' }, c3ic('spark', 'sm'), 'The agent is reading the item and planning the steps');
+  const list = item.steps || [];
+  if (!list.length) return el('div', { class: 'chips2' }, el('button', { type: 'button', class: 'chip2 lk', 'data-pm-plan': item.id, onclick: () => planSteps(inst, item) }, c3ic('spark', 'sm'), COPY.plan));
+  const input = el('input', { type: 'text', placeholder: COPY.addStep, 'aria-label': COPY.addStep, 'data-pm-step-add': item.id });
+  input.addEventListener('keydown', async (e) => {
+    if (e.key !== 'Enter' || !input.value.trim()) return;
+    if (await press(inst, API + '/steps/add', { id: item.id, text: input.value.trim() })) input.value = '';
+  });
+  const rows = list.map((st) => {
+    const outward = OUTWARD.test(st.text);
+    const who = el('button', { type: 'button', class: 'pill', 'data-who': st.who, 'data-pm-who': st.id, title: outward ? COPY.whoOutward : 'Who does this step. Tap to change.' }, COPY.who[st.who] || st.who);
+    who.addEventListener('click', () => cycleWho(inst, item, st));
+    return el('li', { class: st.done ? 'ok' : outward ? 'warn' : '', 'data-pm-step': st.id },
+      el('span', { class: 'c3sg' }, c3ic(st.done ? 'check' : st.who === 'you' ? 'user' : 'spark', 'sm')),
+      el('span', { class: 'c3stt' + (st.done ? ' dn' : '') }, st.text, outward && !st.done ? [' ', el('span', { class: 'tag' }, 'needs your slide')] : null),
+      el('span', { class: 'chips2' }, who));
+  });
+  const dn = list.filter((s) => s.done).length;
+  return el('div', { class: 'c3steps', 'data-pm-steps': item.id },
+    el('div', { class: 'c3sh' }, el('h4', null, c3ic('tree', 'sm'), COPY.steps), el('span', { class: 'dim mono' }, COPY.progress(dn, list.length))),
+    el('ul', null, rows),
+    el('div', { class: 'form' }, input));
+}
+
+/* ── the case model of one item (console3.html genTask line 3216, agDecor line 5126) ─────────────────────────────────────────── */
+
+const OUT_REASON = 'No channel connected, so this stays a draft. Nothing is sent.';
+const fx = (...a) => a;
+
+/** The options of an item by its list. Each: { id, l, rec, fx, outward, run(inst, item, row) } where run does the work through a press route. */
+function lensOptions(inst, item, lens) {
+  const mock = item.mock_row === true; const q = mock && item.mins <= 2; const who = item.waiting_on || 'them';
+  const today = inst.data.today; const mon = nextMonday(today);
+  const o = (id, l, rec, f, run, extra) => ({ id, l, rec: !!rec, fx: f, run, ...(extra || {}) });
+  const nowO = (rec) => o('now', q ? 'Do it now: the agent drafts, you send' : (mock ? 'Do it now' : 'Mark it done'), rec, q ? [fx('bolt', 'Under 2 minutes', 'ok')] : [fx('clock', mock && item.mins ? 'Takes ' + item.mins + ' min' : 'Closes the item', mock ? 'warn' : 'ok')], (r) => doneAct(inst, item, r, q ? 'Done. Anything outward stays a draft for you to send.' : 'Done.'));
+  const todayO = (rec) => o('today', mock ? (q ? 'Put it in Today' : 'Put it in Today and block time') : 'Put it in Today', rec, mock && !q ? [fx('check', 'Gets a slot', 'ok')] : [fx('check', 'Moves to your Today list', 'ok')], (r) => moveAct(inst, item, r, 'today', 'In Today.'));
+  const schedO = () => o('sched', 'Schedule for ' + dayLabel(mon), 0, [fx('cal', 'Out of today', 'ok')], (r) => dueAct(inst, item, r, mon, 'Scheduled for ' + dayLabel(mon) + '.'));
+  const dropO = () => o('drop', 'Drop it', 0, [fx('x', 'Gone, with Undo', 'warn')], (r) => dropAct(inst, item, r));
+  if (lens === 'waiting') {
+    return { conf: 80, cta: 'Slide to nudge', sit: 'Waiting on ' + who + '. ' + (item.why || 'No reply yet.'), opts: [
+      o('nudge', 'Nudge ' + who + ' now (drafted)', 1, [fx('out', 'Goes to Review first', 'ok')], null, { outward: true }),
+      o('esc', 'Escalate to their lead', 0, [fx('alert', 'Stronger signal', 'warn')], null, { outward: true }),
+      o('wait', 'Keep waiting', 0, [fx('clock', 'Ages another day', 'warn')], () => say({ text: 'Still waiting.', timeout: 2500 })),
+    ] };
+  }
+  if (lens === 'later') return { conf: 66, cta: 'Slide to promote', sit: 'Parked for later. Nothing is due, so it only matters if it has a date.', opts: [
+    o('promo', 'Promote to this week', 1, [fx('check', 'Gets a date', 'ok')], (r) => moveAct(inst, item, r, 'week', 'Moved to Week.')), dropO()] };
+  if (lens === 'week') return { conf: 70, cta: 'Slide to keep the date', opts: [
+    o('today', 'Bring it into Today', 0, [fx('clock', 'Earlier than planned', 'warn')], (r) => moveAct(inst, item, r, 'today', 'In Today.')),
+    o('keep', 'Keep the date', 1, [fx('check', 'On plan', 'ok')], () => say({ text: 'Kept.', timeout: 2500 })),
+    o('later', 'Move to Later', 0, [fx('moon', 'No date')], (r) => moveAct(inst, item, r, 'later', 'Moved to Later.'))] };
+  if (lens === 'today') return { conf: 82, cta: 'Slide to finish', opts: [nowO(1),
+    o('mig', 'Migrate to tomorrow', 0, [fx('moon', 'Back tomorrow 09:00', 'warn')], (r) => dueAct(inst, item, r, addIso(today, 1), 'Migrated to tomorrow.')), schedO()] };
+  return { conf: q ? 90 : 78, cta: q ? 'Slide to do it now' : 'Slide to commit', opts: q ? [nowO(1), todayO(0), schedO(), dropO()] : [todayO(1), nowO(0), schedO(), dropO()] };
+}
+
+/** { model, run } for an item: the model goes to renderCase(), `run(id, row)` does what the picked option says. */
+function itemCase(inst, item, lens) {
+  if (item.noise) {   // the mockup's genTask() for an FYI item (line 3232): the agent read it and found nothing for the PM
+    const o = (id, l, rec, f, run) => ({ id, l, rec: !!rec, fx: f, run });
+    const L = [o('arch', 'Archive it', 1, [fx('check', 'Keeps the inbox clean', 'ok')], (r) => doneAct(inst, item, r, 'Archived.')), o('keep', 'Keep it', 0, [fx('moon', 'Stays in the inbox')], () => say({ text: 'Kept.', timeout: 2500 }))];
+    const model = { id: 'task:' + item.id, sit: 'Noise. Nothing in it needs you, and the agent has already read it.', chg: [['clock', 'About under 2 min', 'effort']], conf: 92, cta: 'Slide to archive', unsure: '', ign: '', outboxReason: OUT_REASON,
+      opts: L.map((x) => ({ id: x.id, l: x.l, rec: x.rec, fx: x.fx, outward: false })), why: '' };
+    const run = {}; L.forEach((x) => { run[x.id] = x.run; });
+    return { model, run };
+  }
+  const ix = item.ix || {}; const mock = item.mock_row === true;
+  const j = item.job && jobById(inst, item.job);
+  const L = lensOptions(inst, item, lens);
+  const jm = j && (j.mock_name || j.want);
+  const evidence = ix.chg ? ix.chg.slice() : (() => {
+    const c = [];
+    if (ix.why) c.push(['info', ix.why[0], ix.why[1] || '']);
+    else if (item.why) c.push(['info', item.why, item.src || '']);
+    if (j) c.push(['target', 'Job: ' + jm, 'JTBD']);
+    if (mock && item.mins) c.push(['clock', 'About ' + (item.mins <= 2 ? 'under 2' : item.mins) + ' min', 'effort']);
+    if (item.due) c.push(['cal', 'Due ' + item.due, '']);
+    if (item.priority && !mock) c.push(['flag', 'Priority ' + item.priority, '']);
+    if (item.waiting_on) c.push(['wait', 'Waiting on ' + item.waiting_on, '']);
+    return c.slice(0, 3);
+  })();
+  const model = {
+    id: 'task:' + item.id, sit: ix.sit || (j ? COPY.jobLine(j) : (item.why || (mock ? item.title : 'No job to be done yet. File it under one below, or leave it.'))),
+    chg: evidence, conf: ix.conf || L.conf, cta: L.cta, unsure: ix.unsure || '', ign: ix.ign || '', outboxReason: OUT_REASON,
+    opts: L.opts.map((x) => ({ id: x.id, l: x.l, rec: x.rec, fx: x.fx, outward: !!x.outward })), why: '',
+  };
+  const run = {}; L.opts.forEach((x) => { if (x.run) run[x.id] = x.run; });
+  /* the agent's suggested move (mock rows): a recommended first option, and the run's result once it has run */
+  const rs = inst.runs.get(item.id);
+  if (mock && item.agent_move && ix.move) {
+    if (rs && rs.phase === 'work') { model.opts = []; model.move = ''; }
+    else if (rs && rs.phase === 'done') {
+      const res = (ix[rs.intent] && ix[rs.intent].h ? ix[rs.intent] : (ix.res || {}));
+      model.move = ''; model.quote = res.draft || ''; model.sit = res.h || model.sit;
+      model.chg = (res.claims || []).map(([label, text]) => ({ label, text }));
+      model.conf = 80; model.unsure = ''; model.ign = res.draft ? 'It stays a draft and the item waits.' : '';
+      const keep = { id: 'keep', l: res.draft ? 'Keep it as a draft' : 'Keep the result and decide later', rec: 0, fx: [fx('check', 'Nothing leaves the repo', 'ok')] };
+      model.opts = res.draft
+        ? [{ id: 'send', l: 'Send exactly this text to ' + res.out, rec: 1, outward: true, fx: [fx('lock', 'Outward: bound to this exact text', 'warn'), fx('out', 'Goes to ' + res.out, 'warn')] }, keep]
+        : [{ id: 'accept', l: 'Accept the result', rec: 1, fx: [fx('check', 'Recorded as your acceptance', 'ok')] }, keep];
+      model.cta = res.draft ? 'Slide to send' : 'Slide to accept';
+      run.accept = (r) => doneAct(inst, item, r, 'Accepted. Recorded as your press.');
+      run.keep = () => say({ text: 'Kept.', timeout: 2500 });
+    } else {
+      model.move = ix.move + ' \u00b7 swipe right, or slide below';
+      model.opts = [{ id: 'agmv', l: 'Let the agent act: ' + ix.move, rec: 1, fx: [fx('spark', 'The suggested move, taken by an agent', 'ok'), fx('shield', 'Inside the repo; outward only as a draft', 'ok')] }, ...model.opts.map((x) => ({ ...x, rec: 0 }))];
+      model.cta = 'Slide to let the agent act';
+      run.agmv = () => { say({ text: 'The agent is working on it. Anything outward stays a draft for your slide.', timeout: 4000 }); startRun(inst, item, 'res'); };   // the toast is the case's slide; a swipe starts the run without one, as the mockup does
+    }
+  }
+  return { model, run };
+}
+
+/* The agent run (mock): nothing runs. A strip walks the steps of the move, then the result is a labelled draft for the PM to read. */
+function startRun(inst, item, intent) {
+  if (inst.runs.get(item.id) && inst.runs.get(item.id).phase === 'work') { say({ text: 'A session is already working on this.', timeout: 2500 }); return; }
+  const ix = item.ix || {}; const steps = (ix.steps && ix.steps.length ? ix.steps : ['Reading the item']).slice();
+  const st = { phase: 'work', i: 0, steps, intent };
+  inst.runs.set(item.id, st); inst.trays.delete(item.id); inst.opens.add(item.id);
+  draw(inst);
+  const tick = () => {
+    if (inst.runs.get(item.id) !== st) return;
+    st.i += 1;
+    if (st.i >= steps.length) { st.phase = 'done'; draw(inst); return; }
+    draw(inst); later(inst, tick, 800);
+  };
+  later(inst, tick, 800);
+}
+
+
+/** The case file element of an item: c3-case.js plus what is Work's own (the steps, the agent tray, the edit fields). */
+function caseFile(inst, item, lens) {
+  const { model, run } = itemCase(inst, item, lens);
+  const root = renderCase(model, {
+    picked: inst.picks.get(item.id), outbox: false,
+    onPick: (id) => inst.picks.set(item.id, id),
+    onConfirm: ({ option }) => {
+      const row = inst.root.querySelector('[data-pm-item="' + item.id + '"]');
+      const fn = run[option.id];
+      if (fn) fn(row);
+    },
+  });
+  root.setAttribute('data-pm-case', item.id);
+  if (!item.mock_row) {   // real items carry no confidence figure: never show a made-up percentage
+    root.querySelectorAll('.opt .rk').forEach((n) => { n.replaceChildren(c3ic('spark', 'sm'), 'Suggested'); n.removeAttribute('title'); });
+    root.querySelectorAll('.opt .conf').forEach((n) => n.remove());
+  }
+  const extras = [];
+  const rs = inst.runs.get(item.id);
+  const agent = item.mock_row && item.agent_move && (item.ix || {}).move;
+  if (rs && rs.phase === 'work') {
+    extras.push(el('div', { class: 'c3ag', 'data-ag': item.id }, el('div', { class: 'fold a', role: 'status' }, el('span', { class: 'c3spin' }, c3ic('spark', 'sm')), rs.steps[Math.min(rs.i, rs.steps.length - 1)] + ' · ' + (Math.min(rs.i, rs.steps.length - 1) + 1) + ' of ' + rs.steps.length,
+      el('button', { type: 'button', class: 'chip2 lk', 'data-pm-agent-stop': item.id, onclick: () => { inst.runs.delete(item.id); say({ text: 'Stopped. Nothing was kept.', timeout: 2500 }); draw(inst); } }, c3ic('stop', 'sm'), 'stop'))));
+  } else if (rs && rs.phase === 'done') {
+    extras.push(el('div', { class: 'chips2' }, el('button', { type: 'button', class: 'chip2 lk', 'data-pm-agent-discard': item.id, onclick: () => { inst.runs.delete(item.id); inst.picks.delete(item.id); draw(inst); } }, c3ic('undo', 'sm'), 'discard the run')));
+  }
+  if (inst.trays.has(item.id) && agent && !rs) {
+    const ch = (label, intent) => el('button', { type: 'button', class: 'pill', 'data-pm-agent-chip': intent, onclick: () => { inst.trays.delete(item.id); startRun(inst, item, intent); } }, label);
+    const input = el('input', { type: 'text', placeholder: 'Reply to the agent…', 'aria-label': 'Reply to the agent', autocomplete: 'off', 'data-pm-agent-reply': item.id });
+    input.addEventListener('keydown', (e) => { if (e.key === 'Enter' && input.value.trim()) { inst.trays.delete(item.id); startRun(inst, item, 'res'); } });
+    extras.push(el('div', { class: 'chips2', 'data-pm-tray': item.id }, ch('Ask for evidence', 'ev'), ch('Show other options', 'res'), el('span', { class: 'form', style: 'flex:1;min-width:160px' }, input),
+      c3ib('Speak is off on this line: nothing on this page records. Type the reply here.', 'mic', { 'data-off': '', onclick: () => say({ text: 'The microphone needs the app. Nothing was recorded: type the reply here.', timeout: 4200 }) }, 'sm'),
+      c3ib('Close the reply', 'x', { onClick: () => { inst.trays.delete(item.id); draw(inst); } }, 'sm')));
+  }
+  const showSteps = !(rs && rs.phase) && (inst.planning.has(item.id) || (item.steps || []).length || (!agent && (!item.mock_row || item.src === 'You')));
+  if (showSteps) extras.push(stepsBlock(inst, item));
+  const anchor = root.querySelector('.c3ag') || root.querySelector('.sit');
+  if (anchor) anchor.after(...extras); else root.prepend(...extras);
+  if (item.noise) return root;   // the mockup's noise case has no edit form
+  /* the editable fields stay in the case file behind an Edit button (title, due, priority, waiting on, job) */
+  const form = el('div', { class: 'c3jf', 'data-pm-edit-form': item.id, hidden: !inst.editing.has(item.id) },
+    editField(inst, item, 'Title', 'Title', 'text', 'title', item.title),
+    editField(inst, item, 'Due', 'Due', 'date', 'due', item.due),
+    editField(inst, item, 'Priority', 'Priority', 'select', 'priority', item.priority),
+    editField(inst, item, 'Waiting on', 'Waiting', 'text', 'waiting_on', item.waiting_on),
+    editField(inst, item, 'Job', 'Job', 'select', 'job', item.job));
+  const edit = el('button', { type: 'button', class: 'chip2 lk', 'aria-expanded': String(inst.editing.has(item.id)), 'data-pm-edit-toggle': item.id,
+    onclick: () => { const on = !inst.editing.has(item.id); if (on) inst.editing.add(item.id); else inst.editing.delete(item.id); form.hidden = !on; edit.setAttribute('aria-expanded', String(on)); } }, c3ic('edit', 'sm'), 'Edit details');
+  const ft = root.querySelector('.cft');
+  if (ft) ft.append(edit); else root.append(el('div', { class: 'cft' }, edit));
+  root.append(form);
+  return root;
+}
+
+/* ── swipe: the mockup's workSwipe (console3.html line 3250) and the agent's swapped glyphs (line 5136) ─────────────────────── */
+
+function swipeSpec(inst, item, lens) {
+  if (item.noise) { const a = { label: 'Archive', icon: 'check', fn: (r) => doneAct(inst, item, r, 'Archived.') }; return { right: a, left: { ...a, icon: 'moon' } }; }   // the mockup archives a noise row either way
+  const mock = item.mock_row === true; const today = inst.data.today;
+  if (mock && item.agent_move && (item.ix || {}).move) {
+    return {
+      right: { label: 'Agent acts', icon: 'spark', fn: () => startRun(inst, item, 'res') },
+      left: { label: 'Reply', icon: 'reply', fn: () => { if (inst.runs.get(item.id) && inst.runs.get(item.id).phase === 'work') { say({ text: 'A session is already working on this.', timeout: 2500 }); return; } inst.trays.add(item.id); inst.opens.add(item.id); draw(inst); later(inst, () => { const i = inst.root.querySelector('[data-pm-agent-reply="' + item.id + '"]'); if (i) i.focus(); }, 30); } },
+    };
+  }
+  const q = mock && item.mins <= 2;
+  if (lens === 'triage') return {
+    right: q ? { label: 'Done', icon: 'check', fn: (r) => doneAct(inst, item, r, 'Done.') } : { label: 'In Today', icon: 'sun', fn: (r) => moveAct(inst, item, r, 'today', 'In Today.') },
+    left: { label: 'Later', icon: 'moon', fn: (r) => parkAct(inst, item, r, 'Moved to Later.') } };
+  if (lens === 'today') return { right: { label: 'Done', icon: 'check', fn: (r) => doneAct(inst, item, r, 'Done.') }, left: { label: 'Tomorrow', icon: 'moon', fn: (r) => dueAct(inst, item, r, addIso(today, 1), 'Migrated to tomorrow.') } };
+  if (lens === 'waiting') return {
+    right: { label: 'Nudge', icon: 'out', fn: () => say({ text: 'No channel connected: a nudge to ' + (item.waiting_on || 'them') + ' is not sent.', timeout: 4000 }) },
+    left: { label: 'Keep waiting', icon: 'wait', fn: () => say({ text: 'Still waiting.', timeout: 2500 }) } };
+  if (lens === 'week') return { right: { label: 'In Today', icon: 'sun', fn: (r) => moveAct(inst, item, r, 'today', 'In Today.') }, left: { label: 'Later', icon: 'moon', fn: (r) => parkAct(inst, item, r, 'Moved to Later.') } };
+  return { right: { label: 'To Week', icon: 'cal', fn: (r) => moveAct(inst, item, r, 'week', 'Promoted to Week.') }, left: { label: 'Drop', icon: 'trash', fn: (r) => dropAct(inst, item, r) } };
+}
+
+/* Open or close a case file in place with c3-expand.js, so the mockup's .xp height transition (grid-template-rows) plays. */
+function expandRow(inst, row, key, build, onClose) {
+  const xp = makeXp();
+  const xi = xp.firstChild;
+  attachExpand(row, xp, {
+    key, initial: inst.opens.has(key),
+    onToggle: (on) => {
+      if (on) {
+        inst.opens.add(key);
+        const c = build(); inst.cases.add(c); xi.replaceChildren(c);
+      } else {
+        inst.opens.delete(key);
+        later(inst, () => { if (!xp.classList.contains('open')) { xi.querySelectorAll('.case').forEach((c) => { if (c.c3case) { c.c3case.dispose(); inst.cases.delete(c); } }); xi.replaceChildren(); } }, 340);
+        if (onClose) onClose();
+      }
+    },
+  });
+  return xp;
+}
+
+const KIND_ICON = { reply: 'reply', decide: 'scale', review: 'eye', do: 'check' };   // the mockup's KIC
+/* The mockup's time-left bar (.fuse) with its text, for an item that carries `left` ({ text, pct, tone }). */
+const fuseBar = (l) => { const c = l.tone === 'warn' ? 'var(--warning)' : 'var(--acc)'; return el('div', { class: 'chips2', style: 'margin-top:6px;gap:8px' }, el('div', { class: 'fuse' }, el('i', { style: 'width:' + Math.round(l.pct * 100) + '%;background:' + c })), el('span', { class: 'mono', style: 'font-size:var(--fs-1);color:' + c }, l.text)); };
+
+/* The mockup's workRow(): li.nrow.wrow > .rv.l, .rv.r (made by the swipe), .ki, .nb (.tt, .chips, .xp > .xi), and the .sg glyphs (line 3258). */
+function itemRow(inst, item, lens) {
+  const j = item.job && jobById(inst, item.job);
+  const chips = [];
+  /* An item with `mock_row` (the /c3.html demo mode's mockup rows) is drawn as the mockup draws a work row: agent move, effort, time, job, source, initiative. */
+  const mock = item.mock_row === true;
+  const rs = inst.runs.get(item.id);
+  const agent = mock && item.agent_move && (item.ix || {}).move;
+  if (rs && rs.phase === 'work') chips.push(el('span', { class: 'st c3strip', 'data-sxs': item.id }, el('span', { class: 'c3spin' }, c3ic('spark', 'sm')), rs.steps[Math.min(rs.i, rs.steps.length - 1)] + ' · ' + (Math.min(rs.i, rs.steps.length - 1) + 1) + ' of ' + rs.steps.length));
+  else if (rs && rs.phase === 'done') chips.push(el('span', { class: 'st ok' }, c3ic('check', 'sm'), 'agent: result ready'));
+  else if (inst.planning.has(item.id)) chips.push(el('span', { class: 'st' }, el('span', { class: 'c3spin' }, c3ic('spark', 'sm')), 'planning the steps'));
+  if (mock && item.agent_move && !(rs && rs.phase === 'done')) chips.push(el('span', { class: 'chip2', style: 'gap:4px', title: 'Swipe right to let the agent act' }, c3ic('spark', 'sm'), 'agent move'));
+  if (mock && item.mins) chips.push(el('span', { class: 'chip2', title: 'Effort' }, c3ic('clock', 'sm'), item.mins <= 2 ? 'under 2 min' : item.mins + ' min'));
+  if (mock && item.time) chips.push(el('span', { class: 'chip2' }, c3ic('cal', 'sm'), item.time));
+  if (item.due && !mock) chips.push(el('span', { class: 'chip2' }, c3ic('cal', 'sm'), item.due));
+  if (item.priority && !mock) chips.push(el('span', { class: 'fl ' + item.priority.toLowerCase() }, item.priority));
+  if (item.waiting_on) chips.push(el('span', { class: 'chip2' }, c3ic('wait', 'sm'), COPY.waitingOn(item.waiting_on)));
+  if ((item.steps || []).length) { const dn = item.steps.filter((s) => s.done).length; const ag = item.steps.filter((s) => s.who !== 'you' && !s.done).length; chips.push(el('span', { class: 'chip2', title: 'Steps' }, c3ic('tree', 'sm'), dn + ' of ' + item.steps.length + ' steps' + (ag ? ' · agent can do ' + ag : ''))); }
+  if (j) chips.push(el('span', { class: 'chip2 jc', title: j.want }, c3ic('target', 'sm'), mock && j.mock_name ? j.mock_name : j.want));
+  if (mock && item.src) chips.push(el('span', { class: 'tag' }, item.src));
+  if (mock && item.init) chips.push(el('span', { class: 'chip2' }, c3ic('init', 'sm'), item.init.length > 16 ? item.init.slice(0, 15) + '…' : item.init));
+  const title = el('span', { class: 'tt', 'data-pm-title': item.id }, item.title);
+  const spec = swipeSpec(inst, item, lens);
+  const recL = itemCase(inst, item, lens).model.opts.find((o) => o.rec);
+  const recSide = agent ? 'r' : (recL && /^(drop|arch|later|mig|wait|keep)/.test(recL.id) ? 'l' : 'r');
+  const row = el('li', { class: 'nrow wrow', 'data-row': '', 'data-id': item.id, 'data-w': '1', 'data-pm-item': item.id, 'data-lens': lens },
+    el('span', { class: 'ki' + (item.priority === 'P1' ? ' hot' : ''), title: item.priority || item.kind || '', style: mock && item.mins <= 2 && item.kind !== 'fyi' ? 'background:var(--accw);color:var(--acc)' : null },
+      c3ic(mock ? (item.mins <= 2 && item.kind !== 'fyi' ? 'bolt' : (KIND_ICON[item.kind] || (item.kind === 'fyi' ? 'info' : 'check'))) : item.priority === 'P1' ? 'alert' : 'todo')),
+    el('div', { class: 'nb' }, title, mock && item.left ? fuseBar(item.left) : null, chips.length ? el('div', { class: 'chips' }, chips) : null),
+    el('span', { class: 'sg', title: agent ? 'Drag right: the agent acts. Drag left: reply.' : 'Drag right: ' + spec.right.label + '. Drag left: ' + spec.left.label + '.' },
+      el('span', { class: 'g l' + (recSide === 'l' ? ' y' : '') }, c3ic(spec.left.icon)), el('span', { class: 'g r' + (recSide === 'r' ? ' y' : '') }, c3ic(spec.right.icon))));
+  const xp = expandRow(inst, row, item.id, () => caseFile(inst, item, lens));
+  row.querySelector('.nb').append(xp);
+  row.__item = item;
+  attachSwipe(row, {
+    onRight: () => spec.right.fn(row), onLeft: () => spec.left.fn(row),
+    labelRight: spec.right.label, labelLeft: spec.left.label, iconRight: spec.right.icon, iconLeft: spec.left.icon,
+  });
+  row.addEventListener('keydown', (e) => {
+    if (e.target !== row || e.metaKey || e.ctrlKey || e.altKey) return;
+    /* the mockup's e and n keys act on the Briefing's rows only (its key handler tests S.tab === 'brief'); on a Work row they do nothing. j / k move. */
+    if (e.key === 'j' || e.key === 'k') {
+      e.preventDefault();
+      const all = [...inst.root.querySelectorAll('.nrow.wrow[data-pm-item]')]; const at = all.indexOf(row);
+      const nx = all[at + (e.key === 'j' ? 1 : -1)]; if (nx) nx.focus();
+    }
+  });
+  return row;
+}
+
+/* ── jobs ────────────────────────────────────────────────────────────────────────────────────────────────────────── */
+
+function jobEditField(inst, job, key) {
+  const lab = key === 'mock_name' ? 'Job' : key === 'when' ? 'When' : key === 'want' ? 'I want' : 'So';
+  const input = el('input', { type: 'text', 'aria-label': lab, 'data-pm-job-edit': job.id + ':' + key, autocomplete: 'off' });
+  input.value = job[key] || '';
+  input.addEventListener('change', async () => {
+    const v = input.value.trim(); if (!v) { input.value = job[key] || ''; return; }
+    const old = job[key] || '';
+    const r = await press(inst, JOBS + '/edit', { id: job.id, fields: { [key]: v } });
+    if (r) say({ text: 'Saved', timeout: 7000, actionLabel: COPY.undo, onAction: async () => { await press(inst, JOBS + '/edit', { id: job.id, fields: { [key]: old } }); } });
+  });
+  return field(lab, input);
+}
+
+/* The mockup's c3jall(): "All N items, across every list", grouped by list (line 4657). */
+function jobAll(inst, job) {
+  const fx2 = DEMO() && window.__c3work2 && window.__c3work2.jobAll && window.__c3work2.jobAll[job.id];   // demo: the mockup's own items of the job, grouped by list
+  if (fx2) {
+    const n = fx2.reduce((a, g) => a + g[1].length, 0);
+    return el('div', { class: 'c3all', 'data-pm-job-all': job.id }, el('div', { class: 'hd dim mono' }, 'All ' + n + ' items, across every list'),
+      ...fx2.map(([tag, titles, dn]) => el('div', null, el('span', { class: 'tag' }, tag), el('span', null, ...titles.map((t) => el('span', { class: dn ? 'dn' : '' }, t))))));
+  }
+  const its = (inst.data.items || []).filter((i) => i.job === job.id);
+  if (!its.length) return el('div', { class: 'dim mono', style: small }, 'No item uses this job yet.');
+  const G = {};
+  its.forEach((i) => { const l = i.done ? 'done' : lensOfItem(inst, i.id); (G[l] = G[l] || []).push(i); });
+  return el('div', { class: 'c3all', 'data-pm-job-all': job.id }, el('div', { class: 'hd dim mono' }, 'All ' + its.length + ' items, across every list'),
+    ...[...LENS_IDS, 'done'].filter((l) => G[l]).map((l) => el('div', null, el('span', { class: 'tag' }, l === 'done' ? 'Done' : labelOf(l)), el('span', null, ...G[l].map((i) => el('span', { class: i.done ? 'dn' : '' }, i.title))))));
+}
+
+/* The job's case file (mockup C3.cases.job, line 4660): the words, the count, Keep / Delete and move / Delete and leave, slide to confirm. */
+function jobCase(inst, j) {
+  const its = (inst.data.items || []).filter((i) => i.job === j.id);
+  const done = its.filter((i) => i.done).length;
+  const mk = !!j.mock_name;   // demo: the mockup's own numbers, wording and Recommended badge
+  const others = (inst.data.jobs || []).filter((q) => q.id !== j.id); const near = others[0];
+  const nm = (q) => q.mock_name || q.want;
+  const del = (reassign) => async () => { const r = await press(inst, JOBS + '/delete', { id: j.id, ...(reassign ? { reassign_to: reassign } : {}) }); if (r) say({ text: COPY.reassigned(r.reassigned || 0), timeout: 4000 }); };
+  const model = { id: 'job:' + j.id, sit: COPY.jobLine(j), conf: 90, cta: mk ? 'Slide to delete' : 'Slide to keep it',
+    chg: [['target', mk ? (j.done + ' of ' + j.total + ' done') : (done + ' of ' + its.length + ' done'), 'count across every list', 'ok'], ['info', 'Change the words below. They save at once and you can undo for 7 seconds.', '']],
+    opts: [{ id: 'keep', l: 'Keep it', rec: 1, fx: [fx('check', 'Nothing changes', 'ok')] },
+      { id: 'mv', l: near ? 'Delete it and move its ' + (mk ? j.total : its.length) + ' item' + ((mk ? j.total : its.length) === 1 ? '' : 's') + ' to "' + nm(near) + '"' : 'Delete it', rec: 0, fx: [fx('trash', 'The job is gone', 'warn'), fx('target', (mk ? j.total : its.length) + ' items change job', 'warn')] },
+      { id: 'nj', l: 'Delete it and leave its items without a job', rec: 0, fx: [fx('trash', 'The job is gone', 'warn'), fx('alert', mk ? 'The agent will suggest a job again' : 'The items have no job', '')] }] };
+  const run = { keep: () => say({ text: 'Kept.', timeout: 2500 }), mv: del(near && near.id), nj: del(null) };
+  const root = renderCase(model, { onConfirm: ({ option }) => { if (run[option.id]) run[option.id](); } });
+  root.setAttribute('data-pm-case', j.id);
+  if (!mk) {   // a real job carries no confidence figure: never show a made-up percentage
+    root.querySelectorAll('.opt .rk').forEach((n) => { n.replaceChildren(c3ic('spark', 'sm'), 'Suggested'); n.removeAttribute('title'); });
+    root.querySelectorAll('.opt .conf').forEach((n) => n.remove());
+  }
+  const sit = root.querySelector('.sit');
+  sit.after(el('div', { class: 'c3jf' }, mk ? jobEditField(inst, j, 'mock_name') : null, jobEditField(inst, j, 'when'), jobEditField(inst, j, 'want'), jobEditField(inst, j, 'so')), jobAll(inst, j));
+  return root;
+}
+
+/* The "+ New job" draft (mockup c3jdraft, line 4678): one line in, the agent-style draft of the four fields out, then "Slide to create". */
+function jobNewCase(inst) {
+  const x = inst.jobNew.line || 'keep the week calm';
+  const d = inst.jobNew.draft;
+  const inputs = ['when', 'want', 'so'].map((k) => el('input', { type: 'text', 'aria-label': k === 'when' ? 'When' : k === 'want' ? 'I want' : 'So', 'data-pm-job-new': k, value: d[k], autocomplete: 'off' }));
+  const val = (k) => inputs[['when', 'want', 'so'].indexOf(k)].value.trim();
+  const demo = DEMO();   // demo: the mockup's draft also names the job (its "Job" field); the server has no name field
+  const nameIn = demo ? el('input', { type: 'text', 'aria-label': 'Job', 'data-pm-job-new': 'name', value: x.charAt(0).toUpperCase() + x.slice(1).replace(/\.$/, ''), autocomplete: 'off' }) : null;
+  const model = { id: 'job:new', sit: 'The agent drafted this from your line. Change anything, then create it. It has no items yet.', conf: 70, cta: 'Slide to create',
+    chg: [['spark', 'Drafted by the agent', 'assumption', 'warn']],
+    opts: [{ id: 'mk', l: 'Create the job', rec: 1, fx: [fx('target', 'Items can now be filed under it', 'ok')] }, { id: 'no', l: 'Not now', rec: 0, fx: [] }] };
+  const root = renderCase(model, { onConfirm: async ({ option }) => {
+    if (option.id === 'no') { inst.jobNew = null; say({ text: 'Dropped the draft.', timeout: 2500 }); draw(inst); return; }
+    const line = 'when ' + val('when') + ', I want ' + val('want') + ', so ' + val('so');
+    const r = await press(inst, JOBS + '/add', nameIn ? { line, name: nameIn.value.trim() } : { line });
+    if (r) { inst.jobNew = null; say({ text: 'Job created. Add work to it by saying which job it serves.', timeout: 3000 }); await load(inst); }
+  } });
+  if (!demo) {
+    root.querySelectorAll('.opt .rk').forEach((n) => { n.replaceChildren(c3ic('spark', 'sm'), 'Suggested'); n.removeAttribute('title'); });
+    root.querySelectorAll('.opt .conf').forEach((n) => n.remove());
+  }
+  root.querySelector('.sit').after(el('div', { class: 'c3jf' }, nameIn ? field('Job', nameIn) : null, ...['when', 'want', 'so'].map((k, i) => field(k === 'when' ? 'When' : k === 'want' ? 'I want' : 'So', inputs[i]))));
+  inst.cases.add(root);
+  return root;
+}
+
+/* The mockup's jobsCard() (line 4667): section.card.sect, .sh2 with the title and the + at the right, a list of .nrow with a .pbar and a case file. */
+function jobsCard(inst) {
+  const js = inst.data.jobs || [];
+  const rows = js.map((j) => {
+    const pct = j.total ? Math.round((j.done / j.total) * 100) : 0;
+    const row = el('li', { class: 'nrow', 'data-row': '', 'data-pm-job': j.id },
+      el('span', { class: 'ki' }, c3ic('target')),
+      el('div', { class: 'nb' }, el('span', { class: 'tt', title: COPY.jobLine(j) }, j.mock_name || j.want.charAt(0).toUpperCase() + j.want.slice(1)),
+        el('div', { class: 'chips' }, el('div', { class: 'pbar', style: 'width:90px' }, el('i', { style: 'width:' + pct + '%' })),
+          el('span', { class: 'mono dim', style: small }, COPY.progress(j.done, j.total)))));
+    row.querySelector('.nb').append(expandRow(inst, row, j.id, () => jobCase(inst, j)));
+    return row;
+  });
+  const lines = [];
+  if (inst.jobNew) {
+    if (inst.jobNew.draft) lines.push(el('li', { class: 'c3jnew' }, jobNewCase(inst)));
+    else {
+      const input = el('input', { type: 'text', placeholder: 'What are you trying to get done? One line', 'aria-label': 'New job', autocomplete: 'off', 'data-pm-add': JOBS + '/add' });
+      const go = () => { const x = (input.value || '').trim() || 'keep the week calm'; inst.jobNew = { line: x, draft: { when: 'it comes up', want: 'a clear way to ' + x.toLowerCase().replace(/^to /, '').replace(/\.$/, ''), so: 'the outcome is not left to chance' } }; draw(inst); later(inst, () => { const i = inst.root.querySelector('[data-pm-job-new="name"], [data-pm-job-new="when"]'); if (i) i.focus(); }, 30); };
+      input.addEventListener('keydown', (e) => { if (e.key === 'Enter' && !e.isComposing) go(); });
+      lines.push(el('li', { class: 'c3jnew' }, el('div', { class: 'form' }, input, c3ib('Draft it', 'spark', { 'data-pm-job-draft': '', onClick: go }, 'pri'), c3ib('Cancel', 'x', { 'data-pm-job-cancel': '', onClick: () => { inst.jobNew = null; draw(inst); } }, 'sm'))));
+    }
+  }
+  const plus = c3ib('New job', 'plus', { 'aria-expanded': String(!!inst.jobNew), 'data-pm-job-add-toggle': '', onClick: () => { inst.jobNew = inst.jobNew ? null : {}; draw(inst); later(inst, () => { const i = inst.root.querySelector('[aria-label="New job"]'); if (i) i.focus(); }, 30); } }, 'sm');
+  return el('section', { class: 'card sect', 'data-pm-jobs': '' },
+    el('div', { class: 'sh2' }, el('h2', null, c3ic('target', 'sm'), COPY.jobs), el('span', { class: 'r' }, plus)),   // no count: the mockup's title has none
+    js.length || lines.length ? el('ul', { class: 'list', role: 'list' }, ...lines, ...rows) : el('div', { class: 'dim mono', style: small }, COPY.noJobs),
+    el('div', { class: 'dim', style: small }, COPY.jobsNote));
+}
+
+/* ── the page ────────────────────────────────────────────────────────────────────────────────────────────────────── */
+
+/* The mockup's workHead() calbar: the .seg lens bar with count badges, and the group toggle as an .ib (line 3281). */
+function lensBar(inst) {
+  const seg = el('div', { class: 'seg', role: 'group', 'aria-label': 'Work lens', 'data-pm-lenses': '' },
+    LENSES.map(([id, label]) => {
+      const n = inst.data ? shown(inst, id).length : 0;
+      const b = el('button', { type: 'button', 'aria-pressed': String(inst.lens === id), 'data-lens': id }, c3ic(WLI[id], 'sm'), label, n ? el('span', { class: 'bdg g' }, String(n)) : null);
+      b.addEventListener('click', () => { inst.lens = id; if (inst.ctx.onLens) inst.ctx.onLens(id); draw(inst); });   // onLens: the page's deck follows the lens (demo)
+      return b;
+    }));
+  const grp = c3ib(inst.group ? COPY.groupTime : COPY.groupJob, 'target', { 'aria-pressed': String(inst.group), 'data-pm-group': '' }, 'sm');
+  grp.addEventListener('click', () => { inst.group = !inst.group; draw(inst); });
+  return [seg, el('div', { class: 'chips2' }, grp)];
+}
+
+/* The ring at the right of the lens header: done of total, over the items in the lens (the lists keep done items; the rows hide them). */
+function lensRing(inst) {
+  const all = lists(inst)[inst.lens] || [];
+  return c3ring(all.filter((i) => i.done).length, all.length, 44);
+}
+
+/* A .card.sect with an .sh2 title row and a ul.list of rows (line 3262). */
+function sect(head, rows) { return el('section', { class: 'card sect' }, head, rows); }
+
+const FOCUS_ATTRS = ['data-pm-edit', 'data-pm-step-add', 'data-pm-job-edit', 'data-pm-agent-reply', 'data-pm-job-new', 'aria-label'];
+
+function draw(inst) {
+  /* keep the focus: a field the PM is typing in, or the row they were on, is found again after the redraw */
+  const a = document.activeElement; let keep = null;
+  if (a && inst.root.contains(a) && a !== document.body) {
+    const at = FOCUS_ATTRS.slice(0, 5).find((k) => a.hasAttribute && a.hasAttribute(k));
+    if (at) keep = { sel: '[' + at + '="' + a.getAttribute(at) + '"]' };
+    else if (a.matches && a.matches('.nrow[data-pm-item]')) keep = { sel: '[data-pm-item="' + a.getAttribute('data-pm-item') + '"]' };
+  }
+  disposeCases(inst);
+  inst.bar.replaceChildren(...lensBar(inst));
+  const d = inst.data;
+  if (!d) { inst.body.replaceChildren(el('p', { class: 'dim mono', style: small }, COPY.loading)); return; }
+  const list = shown(inst, inst.lens);
+  const lh = el('div', { class: 'lh' },
+    el('span', { class: 'ki' }, c3ic(WLI[inst.lens])),
+    el('div', { style: 'min-width:0' }, el('b', null, (d.lens_text && d.lens_text[inst.lens] ? d.lens_text[inst.lens][0] : COPY.lens[inst.lens](list.length))), el('div', { class: 'dim' }, (d.lens_text && d.lens_text[inst.lens] ? d.lens_text[inst.lens][1] : COPY.lensSub[inst.lens]))),
+    lensRing(inst));
+  const empty = el('li', { class: 'fold' }, c3ic('check', 'sm'), COPY.empty);
+  let main;
+  if (inst.group) {
+    const groups = (d.jobs || []).map((j) => [j, list.filter((i) => i.job === j.id)])
+      .concat([[null, list.filter((i) => !i.job || !jobById(inst, i.job))]]).filter((g) => g[1].length);
+    main = groups.length ? groups.map(([j, its]) => {
+      const sec = sect(el('div', { class: 'sh2' }, el('h2', null, c3ic('target', 'sm'), j ? (j.mock_name || j.want) : COPY.noJobGroup),
+        j ? el('span', { class: 'chips2 dim mono', style: small }, COPY.progress(j.done, j.total)) : null),
+        el('ul', { class: 'list', role: 'list' }, its.map((i) => itemRow(inst, i, inst.lens))));
+      sec.setAttribute('data-pm-group-card', j ? j.id : '');
+      return sec;
+    }) : [sect(el('div', { class: 'sh2' }, el('h2', null, c3ic(WLI[inst.lens], 'sm'), labelOf(inst.lens))), el('ul', { class: 'list' }, empty))];
+  } else {
+    const sec = sect(el('div', { class: 'sh2' }, el('h2', null, c3ic(WLI[inst.lens], 'sm'), labelOf(inst.lens), ' ', el('span', { class: 'bdg g' }, String(list.length))),
+      el('span', { class: 'fl2', 'data-pm-legend': '' }, COPY.legend.map((w, k) => el('span', null, ['• ', '× ', '> ', '< '][k] + w)))),
+      el('ul', { class: 'list', role: 'list' }, list.length ? list.map((i) => itemRow(inst, i, inst.lens)) : empty));
+    sec.setAttribute('data-pm-list', inst.lens);
+    main = [sec];
+  }
+  if (inst.lens === 'triage' && Array.isArray(d.noise) && d.noise.length) {   // optional (demo): the mockup's "Noise: kept out of your list". Each row is a work row whose case says why the agent filtered it out (console3.html line 3270)
+    const nz = d.noise.map((n, i) => ({ id: n.id || 'noise-' + (n.title || i).toLowerCase().replace(/[^a-z0-9]+/g, '-'), title: n.title, src: n.src, kind: 'fyi', mins: 0, mock_row: true, noise: true, steps: [] }));
+    main.push(el('section', { class: 'card sect', 'data-pm-noise': '' }, el('div', { class: 'sh2' }, el('h2', null, c3ic('info', 'sm'), 'Noise ', el('span', { class: 'bdg g' }, String(nz.length))), el('span', { class: 'dim', style: small }, 'kept out of your list')),
+      el('ul', { class: 'list', role: 'list' }, nz.map((n) => itemRow(inst, n, 'triage')))));
+  }
+  /* The mockup's vWork() body: .calbody > .lh + .brief.sbb > .bcols > .bcol.l (the list) and .bcol.r (the jobs card). */
+  inst.body.replaceChildren(lh, el('div', { class: 'brief sbb' }, el('div', { class: 'bcols' }, el('div', { class: 'bcol l' }, inst.ctx.plan || null, ...main), el('div', { class: 'bcol r' }, jobsCard(inst)))));
+  if (keep) { const n = inst.root.querySelector(keep.sel); if (n && n.focus) { try { n.focus({ preventScroll: true }); } catch { /* not focusable */ } } }
+}