create-pmos 0.252.0 → 0.254.0

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();