create-pmos 0.252.0 → 0.253.0

package/workspace/public/pm/premium-shell.js

@@ -0,0 +1,184 @@
+/* pm/premium-shell.js — what the premium Briefing and My work pages share: the theme, the toast, the standard dialog and the read-only agent's conversation (initiatives briefing-premium and my-work-premium). */
+import { pmPost } from './http.js';
+export const $ = (s, r = document) => r.querySelector(s);
+export const $$ = (s, r = document) => [...r.querySelectorAll(s)];
+export const esc = (s) => String(s == null ? '' : s).replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]));
+export const RM = matchMedia('(prefers-reduced-motion: reduce)').matches;
+export const store = { get(k) { try { return localStorage.getItem(k); } catch { return null; } }, set(k, v) { try { localStorage.setItem(k, v); } catch { /* no storage */ } } };
+export const THEME_KEY = 'pmos.c3.theme';
+export const AI = '<svg class="i" viewBox="0 0 24 24"><path d="M12 3l1.8 4.7L18.5 9.5l-4.7 1.8L12 16l-1.8-4.7L5.5 9.5l4.7-1.8z"/></svg>';
+export const S = { key: null };   // the key of the row whose dialog is open (the agent's thread belongs to it)
+let lastFocus = null;
+/* ── theme ──────────────────────────────────────────────────────────────────────────────────────────────── */
+export function theme(t) {
+  if (t === 'light' || t === 'dark') document.documentElement.dataset.theme = t; else delete document.documentElement.dataset.theme;
+}
+export function flip() {
+  const dark = document.documentElement.dataset.theme ? document.documentElement.dataset.theme === 'dark' : matchMedia('(prefers-color-scheme: dark)').matches;
+  const next = dark ? 'light' : 'dark';
+  theme(next); store.set(THEME_KEY, next);
+}
+{ const t = new URLSearchParams(location.search).get('theme') || store.get(THEME_KEY); theme(t); }
+$('#theme').onclick = flip; $('#theme2').onclick = flip;
+
+/* ── toast ──────────────────────────────────────────────────────────────────────────────────────────────── */
+let tt = null;
+export function toast(msg) { const t = $('#toast'); t.textContent = msg; t.classList.add('on'); clearTimeout(tt); tt = setTimeout(() => t.classList.remove('on'), 4200); }
+
+/* ── the standard dialog: detail first, the conversation beside it (Detail tab first on a phone) ─────────── */
+export const kv = (rows) => `<div class="kv2">${rows.filter((r) => r && r[1]).map(([k, v]) => `<span>${esc(k)}</span><span>${esc(v)}</span>`).join('')}</div>`;
+export const H = (t) => `<h3 class="h2">${esc(t)}</h3>`;
+export function openDlg(o) {
+  S.key = o.noteKey || null;
+  const ae = document.activeElement; if (ae && ae !== document.body) lastFocus = ae;
+  $$('.rail,main.stage,#dock').forEach((x) => { x.inert = true; });
+  $('#dlg').inert = false; document.documentElement.style.overflow = 'hidden';
+  $('#dEye').textContent = o.eye; $('#dTitle').textContent = o.title; $('#dSub').textContent = o.sub || ''; $('#dSub').hidden = !o.sub;
+  $('#oMain').innerHTML = o.pane || `<article class="paper doc">${o.html}</article>`; $('#oLab').textContent = o.label || 'Detail';
+  $('#dBody').innerHTML = `<div class="stream" role="log">${o.stream || turnA(ptx(o.say))}</div><form class="askbar" id="askF"><input id="askIn" placeholder="Ask the agent about this row" maxlength="2000" autocomplete="off" aria-label="A question for the agent"><button type="submit" data-act="ask" id="askGo" aria-label="Ask the agent" title="Ask the agent"><svg class="i" viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg></button></form><p class="fine2" id="askNote">The agent reads this repository and answers in words. It cannot change anything, and its answers are not checked against the records.</p>`;
+  $('#dlg').classList.remove('full'); setMode(innerWidth < 1000 ? 'detail' : 'split'); setTab('out');   // on a phone the dialog opens on Detail and the header button brings the conversation
+  $('#veil').classList.add('on'); $('#dlg').classList.add('on');
+  $$('#dGrid .pane').forEach((p) => { p.scrollTop = 0; });
+  setTimeout(() => $('#dlg').focus(), 60);
+}
+export function closeDlg() {
+  clearTimeout(threadTimer); S.key = null;
+  $('#veil').classList.remove('on'); $$('.rail,main.stage,#dock').forEach((x) => { x.inert = false; });
+  $('#dlg').inert = true; document.documentElement.style.overflow = ''; $('#dlg').classList.remove('on');
+  $('#dock').inert = !document.body.classList.contains('docked');
+  if (lastFocus) { try { lastFocus.focus(); } catch { /* gone */ } }
+}
+export function pillOf(s) { const o = $('button[aria-pressed="true"]', s), p = $('.pill', s); requestAnimationFrame(() => { if (!o || !p) return; p.style.left = o.offsetLeft + 'px'; p.style.width = o.offsetWidth + 'px'; }); }
+export function setTab(t) { $('#dGrid').dataset.tab = t; $$('#dTabs button').forEach((b) => b.setAttribute('aria-pressed', b.dataset.t === t)); pillOf($('#dTabs .seg')); }
+export function setMode(m) {
+  $('#dlg').dataset.mode = m;
+  const b = $('#dPane'), on = m === 'split';
+  b.setAttribute('aria-pressed', on); b.title = on ? 'Hide the conversation' : 'Show the conversation'; b.setAttribute('aria-label', b.title);
+  if (innerWidth < 1000) setTab(m === 'detail' ? 'out' : 'chat');
+}
+$('#dPane').onclick = () => setMode($('#dlg').dataset.mode === 'split' ? 'detail' : 'split');
+export function setFull(f) { $('#dlg').classList.toggle('full', f); const b = $('#dExpand'); b.setAttribute('aria-pressed', f); b.title = f ? 'Exit full screen' : 'Full screen'; $('#dExpP').setAttribute('d', f ? 'M20 10h-6V4M4 14h6v6M14 10l7-7M3 21l7-7' : 'M14 4h6v6M10 20H4v-6M20 4l-7 7M4 20l7-7'); }
+$('#dClose').onclick = closeDlg; $('#veil').onclick = closeDlg;
+$('#dExpand').onclick = () => setFull(!$('#dlg').classList.contains('full'));
+$('#dTabs').addEventListener('click', (e) => { const b = e.target.closest('[data-t]'); if (b) setTab(b.dataset.t); });
+addEventListener('keydown', (e) => {
+  if (e.key !== 'Escape' || !$('#dlg').classList.contains('on')) return;
+  if ($('#dlg').classList.contains('full')) { setFull(false); e.stopImmediatePropagation(); return; }
+  closeDlg();
+}, true);
+(() => {
+  const g = $('#dlg .grab'); let y0 = null, dy = 0;
+  g.addEventListener('pointerdown', (e) => { y0 = e.clientY; dy = 0; try { g.setPointerCapture(e.pointerId); } catch { /* none */ } });
+  g.addEventListener('pointermove', (e) => { if (y0 == null) return; dy = Math.max(0, e.clientY - y0); $('#dlg').style.transition = 'none'; $('#dlg').style.transform = `translateY(${dy}px)`; });
+  const end = () => { if (y0 == null) return; const d = dy; y0 = null; dy = 0; $('#dlg').style.transition = ''; $('#dlg').style.transform = ''; if (d > 90) closeDlg(); };
+  g.addEventListener('pointerup', end); g.addEventListener('pointercancel', end);
+})();
+
+export const CHECK = '<svg class="i" viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>';
+export const CHEV = '<svg class="i" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>';
+export const ptx = (t) => `<p class="tt">${esc(t)}</p>`;
+export const turnA = (h) => `<div class="turn a"><i class="av">${AI}</i><div class="tc">${h}</div></div>`;
+export const H1 = (t) => `<h3 class="d1">${esc(t)}</h3>`;
+export const H2 = (t) => `<h3 class="d2">${esc(t)}</h3>`;
+export const P1 = (t) => `<p>${esc(t)}</p>`;
+export const UL = (a) => `<ul>${a.map((x) => `<li>${esc(x)}</li>`).join('')}</ul>`;
+export function logHtml(d) {
+  return `<button class="lbtn" id="logT" aria-expanded="false"><i class="ls">${CHECK}</i><span>${esc(d.logTitle)}</span><em>${d.log.length} steps</em>${CHEV}</button><div class="alog col" id="alog">${d.log.map((t) => `<div class="al s-done"><i>${CHECK}</i><span>${esc(t)}</span></div>`).join('')}</div>`;
+}
+export const turnU = (t) => `<div class="turn u"><div class="ub">${esc(t)}</div></div>`;
+/* ── the agent's conversation: each answer is a fresh read-only run, kept in the workspace's state folder ── */
+const turnAgent = (h) => `<div class="turn a"><i class="av">${AI}</i><div class="tc">${h}</div></div>`;
+const paras = (t) => String(t).split(/\n{2,}/).map((x) => `<p class="tt">${esc(x.trim()).replace(/\n/g, '<br>')}</p>`).join('');
+export function threadHtml(th) {
+  return (th.turns || []).map((t) => turnU(t.q) + (t.state === 'answered'
+    ? turnAgent(`<p class="agtag">Agent · not checked against records</p>${paras(t.a)}`)
+    : t.state === 'failed' ? turnAgent(`<p class="tt err" role="alert">The agent did not answer. ${esc(t.error || '')}</p>`)
+      : turnAgent(`<p class="tt" role="status">The agent is reading the records. Nothing is promised about how long this takes.</p>`))).join('');
+}
+let threadTimer = null;
+export function drawThread(th, key) {
+  if (S.key !== key) return;
+  const box = $('#dBody .stream'); if (!box) return;
+  let t = $('#thr', box); if (!t) { box.insertAdjacentHTML('beforeend', '<div id="thr"></div>'); t = $('#thr', box); }
+  t.innerHTML = threadHtml(th);
+  const go = $('#askGo'); if (go) go.disabled = !!th.working;
+  if (th.working) $('#askNote').textContent = 'The agent is answering. You can ask again when it has.';
+  const b = $('#dBody'); b.scrollTop = b.scrollHeight;
+}
+export async function loadThread(key) {
+  clearTimeout(threadTimer);
+  let th = null;
+  try { const r = await fetch('/api/briefing-premium/thread?key=' + encodeURIComponent(key) + (new URLSearchParams(location.search).get('ws') ? '&ws=' + encodeURIComponent(new URLSearchParams(location.search).get('ws')) : ''), { credentials: 'same-origin' }); if (r.ok) th = await r.json(); } catch { th = null; }
+  if (!th || !th.ok) return;
+  drawThread(th, key);
+  if (th.working && S.key === key) threadTimer = setTimeout(() => loadThread(key), 2500);
+}
+$('#dBody').addEventListener('submit', async (e) => {
+  e.preventDefault();
+  if (!S.key) return;
+  const inp = $('#askIn'), text = inp.value.trim(), key = S.key;
+  if (!text) { $('#askNote').textContent = 'Write a question for the agent.'; return; }
+  const go = $('#askGo'); go.disabled = true;
+  const ws = new URLSearchParams(location.search).get('ws');
+  const res = await pmPost('/api/briefing-premium/ask' + (ws ? '?ws=' + encodeURIComponent(ws) : ''), { key, text });
+  if (!res || res.ok !== true) { go.disabled = false; $('#askNote').textContent = (res && res.error) || 'The question was not sent.'; return; }
+  inp.value = ''; $('#askNote').textContent = 'Sent. The agent is answering.';
+  loadThread(key);
+});
+
+/* ── the hero folds into the dock on scroll ─────────────────────────────────────────────────────────────── */
+let tick = false;
+export function onScroll() {
+  if (tick) return; tick = true;
+  requestAnimationFrame(() => {
+    tick = false;
+    const y = scrollY, h = $('.hero').offsetHeight, p = Math.max(0, Math.min(1, y / (h * 0.55))), big = $('.brief');
+    if (!RM) { big.style.transform = `translateY(${-p * 30}px) scale(${1 - p * 0.12})`; big.style.opacity = 1 - p * 0.9; }
+    document.body.classList.toggle('docked', p > 0.62);
+    if (!$('#dlg').classList.contains('on')) $('#dock').inert = p <= 0.62;
+    $$('.ch').forEach((c) => c.classList.toggle('stuck', c.getBoundingClientRect().top <= 61 && c.closest('.card').getBoundingClientRect().bottom > 140));
+  });
+}
+addEventListener('scroll', onScroll, { passive: true }); addEventListener('resize', onScroll);
+
+/* ── the rail: Briefing and My work are premium pages; Board and Insights open the console's tab until their slices land ── */
+const GO = { brief: '/premium.html', work: '/premium-work.html', init: '/premium-board.html', rep: '/c3.html?tab=rep' };
+export function wireRail(here) {
+  const rail = $('.rail');
+  rail.style.setProperty('--pi', String(['brief', 'work', 'init', 'rep'].indexOf(here)));
+  $$('.rail [data-go]').forEach((b) => { b.onclick = () => { if (b.dataset.go !== here) location.assign(GO[b.dataset.go]); }; });
+}
+
+/* ── the crumb: where you are, a menu to switch board or initiative, and the sparkle that opens the read-only agent ──────────────────── */
+export function crumbHtml(o) {
+  const chev = (id, label, show) => `<button id="${id}" class="cri" aria-haspopup="menu" aria-expanded="false" aria-label="${esc(label)}"${show ? '' : ' hidden'}>${CHEV}</button>`;
+  return `<nav class="crumb" aria-label="Where you are"><button id="crBoard"${o.ini ? '' : ' aria-current="page" disabled'}>${esc(o.board)}</button>${chev('crSw', 'Switch board', o.boards && o.boards.length > 1)}${o.ini ? `<span aria-hidden="true">›</span><span id="crIni" aria-current="page">${esc(o.ini)}</span>${chev('crSw2', 'Switch initiative', o.siblings && o.siblings.length > 1)}` : ''}<button id="crAsk" class="cri crask" aria-label="${esc(o.ask)}">${AI}</button><div id="crMenu" class="crmenu" role="menu" hidden></div></nav>`;
+}
+/** o: { boards: [{ws,id,name}], board: id, siblings: [{id,title}], ini: id, goBoard(ws, id), goIni(id), ask() }. Escape and a click outside close the menu; the arrows move in it. */
+export function wireCrumb(o) {
+  const menu = $('#crMenu'); if (!menu) return;
+  const close = () => { menu.hidden = true; $$('#crSw,#crSw2').forEach((b) => b.setAttribute('aria-expanded', 'false')); };
+  const open = (kind, btn) => {
+    if (!menu.hidden && menu.dataset.k === kind) { close(); return; }
+    close(); menu.dataset.k = kind;
+    menu.innerHTML = kind === 'b'
+      ? (o.boards || []).map((b) => `<button role="menuitem" data-sw="${esc(b.ws + '|' + b.id)}"${b.id === o.board ? ' aria-current="true"' : ''}>${esc(b.name)}</button>`).join('')
+      : (o.siblings || []).map((s) => `<button role="menuitem" data-swi="${esc(s.id)}"${s.id === o.ini ? ' aria-current="true"' : ''}>${esc(s.title)}</button>`).join('');
+    menu.hidden = false; btn.setAttribute('aria-expanded', 'true'); const f = $('button', menu); if (f) f.focus();
+  };
+  const b1 = $('#crSw'), b2 = $('#crSw2');
+  if (b1) b1.onclick = (e) => { e.stopPropagation(); open('b', b1); };
+  if (b2) b2.onclick = (e) => { e.stopPropagation(); open('i', b2); };
+  $('#crBoard').onclick = () => { if (o.ini && o.goBoard) { const b = (o.boards || []).find((x) => x.id === o.board); o.goBoard(b ? b.ws : null, o.board); } };
+  menu.onclick = (e) => {
+    const k = e.target.closest('[data-sw]'); if (k && o.goBoard) { const [ws, id] = k.dataset.sw.split('|'); close(); o.goBoard(ws, id); return; }
+    const q = e.target.closest('[data-swi]'); if (q && o.goIni) { close(); o.goIni(q.dataset.swi); }
+  };
+  document.addEventListener('click', (e) => { if (!e.target.closest('#crSw,#crSw2,#crMenu')) close(); });
+  document.addEventListener('keydown', (e) => {
+    if (menu.hidden) return;
+    if (e.key === 'Escape') { const k = menu.dataset.k === 'b' ? b1 : b2; close(); if (k) k.focus(); }
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') { e.preventDefault(); const L = $$('button', menu), i = L.indexOf(document.activeElement); L[(i + (e.key === 'ArrowDown' ? 1 : L.length - 1)) % L.length].focus(); }
+  });
+  $('#crAsk').onclick = () => o.ask && o.ask();
+}

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

@@ -0,0 +1,198 @@
+/* pm/premium-work.js — the premium My work page (initiative briefing-premium-work, slice 4). Reads GET /api/my-work-premium and draws the model
+ * lib/my-work-premium.js builds from the list the Work page reads: the hero, "On your plate", With agents, Waiting on others, the dock and the standard dialog.
+ * Every press goes to the Work page's own route under /api/pm-items; this file adds no writer. A control with nothing honest to write stays off and says why. */
+import { pmPost } from './http.js';
+import { $, $$, esc, openDlg, closeDlg, toast, loadThread, onScroll, wireRail, logHtml, turnA, turnU, ptx, CHECK, S } from './premium-shell.js';
+
+let M = null;                    // the model
+let openR = null;                // the row whose dialog is open
+const ICO = (p) => `<svg class="i" viewBox="0 0 24 24">${p}</svg>`;
+const GLYPH = {
+  Jira: '<path d="M12 3l8 8-8 8-8-8z"/><path d="M9 11l3 3 3-3"/>',
+  Slack: '<path d="M9 4 7 20M17 4l-2 16M4.5 9h15M4 15h15"/>',
+  Board: '<path d="M12 3 3 8l9 5 9-5z"/><path d="m3 13 9 5 9-5"/>',
+  Yours: '<path d="M4 20l4-1 11-11-3-3L5 16z"/>',
+};
+const glyph = (src) => GLYPH[src] || '<circle cx="12" cy="12" r="4"/>';
+wireRail('work');
+
+/* ── hero and header ───────────────────────────────────────────────────────────────────────────────────── */
+function drawHero() {
+  $('#date').textContent = M.date;
+  $('#brief').innerHTML = M.hero.map((s) => s.parts.map((p) => (p.s ? `<span class="k">${esc(p.t)}</span>` : esc(p.t))).join('')).join(' ');
+  $('#snap').textContent = M.header.text;
+  $('#snap').title = 'Every figure on this page comes from an item on your list. A date shows only when one was set.';
+}
+function drawDock() { $('#dN').textContent = M.dock.needs; $('#dLab').textContent = M.dock.needs === 0 ? 'to clear' : M.dock.label; $('#dNext').innerHTML = M.dock.next ? `<i></i>Next <b>${esc(M.dock.next)}</b>` : 'Nothing more on your list'; }
+
+/* ── the plate ─────────────────────────────────────────────────────────────────────────────────────────── */
+function rowHtml(r, o = {}) {
+  const inbox = r.list === 'inbox' || r.list === 'tray', sm = o.sm;
+  let lead;
+  if (sm === 'ag') lead = `<span class="ags${r.agent === 'ready' ? ' ready' : ''}">${r.agent === 'ready' ? ICO('<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"/>') : r.agent === 'failed' ? ICO('<path d="M12 8v5M12 16.5v.5"/><circle cx="12" cy="12" r="9"/>') : '<span class="spin"></span>'}</span>`;
+  else if (sm === 'wait') lead = `<span class="avp" aria-hidden="true">${esc(((r.sub.match(/waiting on (\S)/) || [])[1] || '·'))}</span>`;
+  else if (inbox) lead = `<span class="wgl" title="${esc(r.src)}">${ICO(glyph(r.src))}</span>`;
+  else if (r.agent === 'ready') lead = `<button class="wck dec" data-open="${esc(r.key)}" aria-label="Review the agent draft: ${esc(r.title)}" title="An agent draft is ready. Open it to review.">${ICO('<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"/>')}</button>`;
+  else lead = `<button class="wck" data-ck="${esc(r.id)}" aria-pressed="false" aria-label="Mark done: ${esc(r.title)}">${CHECK}</button>`;
+  const meta = r.chip ? `<span class="wm"><span class="due${r.overdue ? ' od' : ''}">${esc(r.chip)}</span></span>` : '';
+  const state = sm === 'ag' ? ' · ' + ({ ready: 'draft ready to review', failed: 'the run failed', queued: 'queued', working: 'working', sending: 'sending' }[r.agent] || '') : '';
+  return `<div class="wrw"><div class="wrow${sm ? ' sm' : ''}${inbox ? ' inb' : ''}${o.first ? ' first' : ''}" data-key="${esc(r.key)}">${lead}<button class="wrh" aria-haspopup="dialog"><span class="wtx"><span class="wtit">${esc(r.title)}${o.first ? '<em class="tgf">Do this first</em>' : ''}</span><span class="ws">${esc(r.sub)}${esc(state)}</span></span>${meta}</button></div></div>`;
+}
+function drawPlate() {
+  const P = M.plate;
+  $('#plateCap').innerHTML = `<b>${P.n}</b> to clear`;
+  $('#plateNote').textContent = P.note;
+  let h = '';
+  for (const s of P.sections) {
+    if (!s.n) {
+      h += `<div class="wsec" data-lane="${s.key}"><span class="label">${esc(s.label)}</span><em>empty</em></div>` + (s.key === 'inbox' ? `<p class="empty3">${CHECK}Nothing waits to be sorted.</p>` : '<p class="empty3 plain">Nothing here.</p>');
+      continue;
+    }
+    h += `<div class="wsec" data-lane="${s.key}"><span class="label">${esc(s.label)}</span><em>${s.n} open</em></div>`;
+    const first = s.key === 'today' ? s.rows.find((r) => r.overdue) || null : null;
+    h += s.rows.map((r) => rowHtml(r, { first: first && r.key === first.key })).join('');
+    if (s.more) h += `<p class="note">${s.more} more ${s.more === 1 ? 'item is' : 'items are'} not shown here.</p>`;
+  }
+  $('#plateBody').innerHTML = h;
+}
+function drawTray() {
+  const T = M.tray;
+  $('#trayCap').textContent = T.cap;
+  $('#trayBody').innerHTML = T.rows.length ? T.rows.map((r) => rowHtml(r)).join('') + (T.more ? `<p class="note">${T.more} more not shown here.</p>` : '') : '<p class="empty3 plain">Nothing in your tray. Add a line above and it lands here first.</p>';
+  $('#trayNote').textContent = T.note;
+}
+function drawAgents() {
+  const A = M.agents, c = A.counts;
+  $('#agCap').textContent = A.cap;
+  $('#pipe').innerHTML = `<div class="pst"><b>${c.running}</b><span>Running</span></div><div class="pst"><b>${c.failed}</b><span>Failed</span></div><div class="pst${c.ready ? ' hot' : ''}"><b>${c.ready}</b><span>To review</span></div>`;
+  $('#agl').innerHTML = A.rows.length ? A.rows.map((r) => rowHtml(r, { sm: 'ag' })).join('') : '<p class="empty3 plain">No agent is working on your items.</p>';
+  $('#agHold').textContent = A.hold;
+}
+function drawWaiting() {
+  const W = M.waiting;
+  $('#waitCap').textContent = W.cap;
+  $('#waitBody').innerHTML = W.rows.length ? W.rows.map((r) => rowHtml(r, { sm: 'wait' })).join('') + (W.more ? `<p class="note">${W.more} more not shown here.</p>` : '') : '<p class="empty3 plain">Nobody owes you anything.</p>';
+}
+function drawReview() {
+  const R = M.review; $('#revCard').hidden = !R.n;
+  $('#revCap').textContent = R.n + ' ' + (R.n === 1 ? 'item' : 'items');
+  $('#revTxt').innerHTML = `<b>${R.n}</b> ${R.n === 1 ? 'item has' : 'items have'} sat untouched for ${R.days} days. Open one to keep it or let it go.`;
+}
+function draw() { drawHero(); drawPlate(); drawTray(); drawAgents(); drawWaiting(); drawReview(); drawDock(); onScroll(); }
+const rowOf = (key) => (M && M.rows || []).find((r) => r.key === key) || null;
+
+/* ── the dialog: detail first, the presses of the Work page, the read-only agent beside it ─────────────────── */
+const NOTYET = [['later-today', 'Later today'], ['tomorrow', 'Tomorrow'], ['next-week', 'Next week']];
+function cardHtml(r) {
+  const d = r.dialog, w = d.write, a = w.actions, err = '<p class="nodef err" id="cardErr" role="alert" hidden></p>';
+  const move = [a.includes('flag') ? ['flag', 'Do today'] : null, a.includes('park') ? ['park', 'Later'] : null].filter(Boolean);
+  return `<div class="acard" id="card"><p class="ct">What you can do</p>`
+    + `<div class="cact two"><button class="cta" data-p="done">${CHECK}<span>Done</span></button>${a.includes('keep') ? '<button class="cta quiet" data-p="keep"><span>Keep it</span></button>' : ''}</div>`
+    + `<div class="mv2">Not yet <span class="seg2">${NOTYET.map(([k, t]) => `<button data-p="notyet" data-when="${k}">${t}</button>`).join('')}</span></div>`
+    + (move.length ? `<div class="mv2">Move to <span class="seg2">${move.map(([k, t]) => `<button data-p="${k}">${t}</button>`).join('')}</span></div>` : '')
+    + (a.includes('waiting') ? `<label class="whyl" for="wOn">Waiting on someone</label><div class="cact two"><input id="wOn" class="why one" maxlength="80" placeholder="A name" autocomplete="off"><button class="cta quiet" data-p="waiting" id="wBtn" disabled><span>Wait for them</span></button></div>` : '')
+    + `<div class="cact"><button class="cta quiet" data-p="remove"><span>Drop it</span></button></div>`
+    + `${r.agent ? `<p class="nodef" id="holdWhy">${esc(d.hold)}</p>` : ''}${err}</div>`;
+}
+function paneHtml(r) {
+  const p = r.dialog.pane;
+  let h = `<p class="dpath">${esc(p.file)}</p>`;   // the dialog heading above already names the item and its source
+  if (p.rows && p.rows.length) h += `<div class="kv2">${p.rows.map(([a, b]) => `<span>${esc(a)}</span><span>${esc(b)}</span>`).join('')}</div>`;
+  if (p.paras && p.paras.length) h += `<h3 class="d2">${esc(p.parasTitle)}</h3>${p.paras.map((x) => `<p>${esc(x)}</p>`).join('')}`;
+  return `<article class="paper doc">${h}<p class="xn">The item as your list holds it.</p></article>`;
+}
+function openRow(r) {
+  if (!r) return;
+  openR = r; const d = r.dialog;
+  openDlg({ eye: d.eye + ' · real data', title: r.title, sub: r.sub, say: d.say, stream: turnA(logHtml(d)) + turnA(ptx(d.say)) + cardHtml(r), noteKey: r.key, pane: paneHtml(r), label: d.pane.label });
+  loadThread(r.key);
+  setTimeout(() => { const b = $('#dBody'); b.scrollTop = b.scrollHeight; }, 120);
+}
+function showErr(msg) { const e = $('#cardErr'); if (!e) { toast(msg); return; } e.textContent = msg; e.hidden = false; }
+
+/* a press: the page waits for the route's answer; a refusal shows its reason and changes nothing */
+const ROUTE = { done: 'done', notyet: 'notyet', flag: 'flag', park: 'park', waiting: 'waiting', remove: 'remove', keep: 'keep' };
+async function press(kind, id, extra) {
+  const body = { id, ...(extra || {}) };
+  if (kind === 'flag') body.flagged = true;
+  return pmPost('/api/pm-items/' + ROUTE[kind], body);
+}
+const SAID = { done: 'Marked done.', notyet: 'Put off. It comes back by itself.', flag: 'Moved to Today.', park: 'Moved to Later.', waiting: 'Now waiting.', remove: 'Dropped.', keep: 'Kept.' };
+function toastUndo(msg, undo) {
+  const t = $('#toast'); t.innerHTML = `${esc(msg)} <button class="undo" type="button">Undo</button>`; t.classList.add('on');
+  const b = $('.undo', t); b.onclick = async () => { t.classList.remove('on'); const r = await undo(); if (!r || r.ok !== true) toast((r && r.error) || 'It could not be undone.'); await load(); };
+  clearTimeout(toastUndo.t); toastUndo.t = setTimeout(() => t.classList.remove('on'), 8000);
+}
+async function doPress(kind, id, extra, undo) {
+  const btns = $$('#card button'); btns.forEach((b) => { b.disabled = true; });
+  const res = await press(kind, id, extra);
+  if (!res || res.ok !== true) { btns.forEach((b) => { b.disabled = false; }); wSync(); showErr((res && res.error) || 'The press was not recorded.'); return false; }
+  closeDlg(); openR = null;
+  if (undo) toastUndo(SAID[kind], undo); else toast(SAID[kind]);
+  await load(); return true;
+}
+const wSync = () => { const b = $('#wBtn'); if (b) b.disabled = !(($('#wOn') || {}).value || '').trim(); };
+$('#dBody').addEventListener('input', (e) => { if (e.target.id === 'wOn') wSync(); });
+$('#dBody').addEventListener('click', (e) => {
+  const lt = e.target.closest('#logT');
+  if (lt) { const c = $('#alog').classList.toggle('col'); lt.setAttribute('aria-expanded', !c); return; }
+  const b = e.target.closest('[data-p]');
+  if (!b || b.disabled || !openR) return;
+  const id = openR.id, k = b.dataset.p;
+  if (k === 'notyet') doPress('notyet', id, { when: b.dataset.when });
+  else if (k === 'waiting') doPress('waiting', id, { on: ($('#wOn').value || '').trim() });
+  else if (k === 'done') doPress('done', id, null, () => pmPost('/api/pm-items/reopen', { id }));
+  else if (k === 'remove') doPress('remove', id, null, () => pmPost('/api/pm-items/undo', { id }));
+  else doPress(k, id);
+});
+
+/* ── the list: a check marks done, a row opens its dialog ────────────────────────────────────────────────── */
+$('#plateBody').addEventListener('click', async (e) => { await listClick(e); });
+$('#agl').addEventListener('click', (e) => { listClick(e); });
+$('#waitBody').addEventListener('click', (e) => { listClick(e); });
+$('#trayBody').addEventListener('click', (e) => { listClick(e); });
+async function listClick(e) {
+  const ck = e.target.closest('.wck');
+  if (ck && ck.dataset.open) { openRow(rowOf(ck.dataset.open)); return; }
+  if (ck) {
+    const id = ck.dataset.ck;
+    ck.setAttribute('aria-pressed', 'true');
+    const res = await pmPost('/api/pm-items/done', { id });
+    if (!res || res.ok !== true) { ck.setAttribute('aria-pressed', 'false'); toast((res && res.error) || 'The press was not recorded.'); return; }
+    toastUndo(SAID.done, () => pmPost('/api/pm-items/reopen', { id })); await load(); return;
+  }
+  const row = e.target.closest('.wrow'); if (row && e.target.closest('.wrh')) openRow(rowOf(row.dataset.key));
+}
+$('#revBtn').onclick = () => { const id = (M.review.ids || [])[0]; const r = (M.rows || []).find((x) => x.id === id); if (r) openRow(r); };
+
+/* ── add: one line, read by the Work page's own parser ─────────────────────────────────────────────────────── */
+$('#cap').addEventListener('submit', async (e) => {
+  e.preventDefault();
+  const inp = $('#capIn'), line = inp.value.trim();
+  if (!line) { $('#capHint').textContent = 'Write one line to add.'; return; }
+  const go = $('.capb'); go.disabled = true;
+  const res = await pmPost('/api/pm-items/add', { line });
+  go.disabled = false;
+  if (!res || res.ok !== true) { $('#capHint').textContent = (res && res.error) || 'It was not added.'; return; }
+  inp.value = '';
+  const it = res.item || {};
+  const bits = [it.due ? 'due ' + it.due : null, it.priority].filter(Boolean);
+  $('#capHint').textContent = 'Added: ' + (it.title || line) + (bits.length ? ' (' + bits.join(', ') + ')' : '') + '. It is in your tray until you place it.';
+  await load();
+  const fresh = it.id ? rowOf('work:' + it.id) : null;   // a new item opens at once, so it can be placed
+  if (fresh) openRow(fresh);
+});
+
+/* ── load ────────────────────────────────────────────────────────────────────────────────────────────────── */
+async function load() {
+  let r = null, status = 0;
+  try { const res = await fetch('/api/my-work-premium', { credentials: 'same-origin' }); status = res.status; r = await res.json(); } catch { r = null; }
+  if (!r || !r.ok) {
+    $('#snap').textContent = 'Your list could not be read';
+    $('#brief').textContent = 'My work could not read your list, so it shows nothing rather than guess.' + (r && r.error ? ' The reason: ' + r.error : status ? ' (the server answered ' + status + ')' : ' The server did not answer.');
+    return;
+  }
+  M = r.model; draw();
+}
+$('#brief').textContent = 'Reading your list.';
+load();