create-pmos 0.188.0 → 0.189.0

package/workspace/public/pm/c3-scan-setup.js

@@ -0,0 +1,317 @@
+/* pm/c3-scan-setup.js — the portfolio Horizon scan's own screens (initiative horizon-scan-portfolio, PRD sections 1 to 3; mockup 42-hscan.js).
+ *
+ *   scanPortfolioSection({ ws, boardCount, showTab })   the "Horizon scan" section of Initiatives > Portfolio: the whole portfolio and its board
+ *                                                       count, a primary Scan now that is always there, the Horizon scan setup button, the
+ *                                                       latest scan's reports and the "Waiting for you: N proposals" line
+ *   scanPointer(ws)                                     the one line in Board settings: "Horizon scan runs for the whole portfolio"
+ *   openScanSetup(ws, o)    the setup sheet: last and next scan with Scan now, How often (Daily, Weekly, Off), the repository and the report
+ *                           types, the watch list (kind and board chips; Keep, Edit, Remove, Add; Keep all on first use)
+ *   openScanPicker(ws, o)   Scan now: what this scan reads and writes (items, repository, report types), then the running sheet
+ *   openScanRunning(ws, o)  the steps of the scan that is running, with Stop
+ * Reads and presses: c3-scan-api.js only. Each screen draws at once and fills itself from the server; every press posts, then reads again.
+ * Every part that draws the scan listens to onScanChange, so a press on one screen updates the others. Nothing is sent outward.
+ */
+import { el } from './dom.js';
+import { field } from './primitives.js';
+import { icon, pbtn, lk, btn, chip, st as stc, sect, plural, put, nrow, list, geo } from './c3-ini-ui.js';
+import { openSheet } from './c3-sheet.js';
+import { toast } from './c3-toast.js';
+import { TYPES, TYPE_KEYS, KINDS, typeName, getPortfolio, getBoards, getDismissed, postWatch, postSetting, postNow, postStop, scanNowWords, scanChanged, onScanChange } from './c3-scan-api.js';
+import { openScanDoc } from './c3-scan-next.js';
+import { pastLabel, nextLabel, scheduleLine, ensureScanCss } from './c3-scan-words.js';
+
+const KIND_ICON = { product: 'org', domain: 'report', approach: 'bolt' };
+const kindTag = (k) => el('span', { class: 'tag' + (k === 'product' ? ' acc' : '') }, k);
+const errText = (r, what) => what + ': ' + ((r && r.error) || 'the workspace did not answer') + '.';
+/** The proposals waiting: all of them (the server counts them), or those of one report (the report row says how many are open). */
+const waitingOf = (d, report) => (report ? ((d.reports.find((r) => r.id === report) || {}).open || 0) : d.waiting);
+/** Scan now may start: the server says so in `manual`. A scan already running is not a refusal here, since the button then opens the running sheet. */
+const blocked = (d) => !!d && !d.manual.ok && d.manual.why !== 'running';
+/** "2 of 3 manual scans left today", or the reason Scan now is off, in the server's words. */
+const leftLine = (d) => (d.manual.ok || d.manual.why === 'running' ? d.manual.left + ' of ' + d.manual.limit + ' manual scans left today.' : scanNowWords({ why: d.manual.why, error: d.manual.error, limit: d.manual.limit }));
+/** The reports of the latest scan (the ones that are not a research follow-up), newest first as the server lists them. */
+export function latestReports(d) {
+  const top = d.reports.filter((r) => !r.parent && r.written);
+  const scan = (d.last && d.last.scan) || (top[0] && top[0].scan) || '';
+  return scan ? top.filter((r) => r.scan === scan) : top.slice(0, 4);
+}
+const SCHED_NOTE = scheduleLine;
+
+/** A check box with a title and a line of help, drawn by the field primitive. attrs go on the input. */
+function check(on, title, help, tag, attrs, onChange) {
+  return field({ kind: 'check', value: on, onCommit: onChange, attrs, label: el('span', { class: 'sc-chkl' }, el('b', null, title), tag || null, help ? [el('br'), el('span', { class: 'dim sc-sm' }, help)] : null) });
+}
+const boardChip = (boards, id) => { const b = boards.find((x) => x.id === id); return chip(icon('cols', 'sm'), b ? b.name : id); };
+
+/* ══ the setup sheet ══ */
+export function openScanSetup(ws, o = {}) {
+  ensureScanCss();
+  const V = { d: null, boards: [], dismissed: [], err: '', busy: false, edit: null, editValue: '', addName: '', addKind: 'product', addWhy: '', addBoard: '', addErr: '' };
+  const host = el('div', { class: 'sc-hs', 'data-scan-setup': '' });
+  const head = pbtn('primary', 'Scan now', 'bolt', { 'data-scan-act': 'scan', 'data-scan-head': '', onclick: () => scanNow() });
+  const ui = openSheet({ title: 'Horizon scan', icon: 'search', body: host, wide: true, dw: true, actions: [head], onClose: () => { off(); } });
+  const off = onScanChange(() => load());
+
+  async function load() {
+    const [d, b] = await Promise.all([getPortfolio(ws), V.boards.length ? V.boards : getBoards(ws)]);
+    V.boards = b;
+    if (d.ok) { V.d = d; V.err = ''; V.dismissed = await getDismissed(ws, d.reports); } else V.err = errText(d, 'The horizon scan could not be read');
+    draw();
+  }
+  async function press(fn, what, then) {
+    if (V.busy) return null;
+    V.busy = true; draw();
+    const r = await fn();
+    V.busy = false;
+    if (!r || r.ok === false) { toast({ text: errText(r, what + ' did not work'), tone: 'error', timeout: 6000 }); await load(); return null; }
+    if (then) then(r);
+    scanChanged();
+    return r;
+  }
+  const scanNow = () => { if (V.d && V.d.open) { openScanRunning(ws, o); toast('A scan is already running'); } else if (blocked(V.d)) toast({ text: leftLine(V.d), tone: 'error', timeout: 6000 }); else openScanPicker(ws, o); };
+  const setCadence = (c) => { if (V.d && V.d.setting.cadence === c) return null; return press(() => postSetting(ws, { cadence: c }), 'The change', () => toast(c === 'off' ? 'Horizon scan is off. Scan now still works.' : 'Horizon scan: ' + scheduleLine(c).toLowerCase())); };
+  const setRepo = (on) => press(() => postSetting(ws, { repo: on }), 'The change');
+  const setType = (k, on) => { const cur = V.d.setting.types; return press(() => postSetting(ws, { types: TYPE_KEYS.filter((x) => (x === k ? on : cur.includes(x))) }), 'The change'); };
+  const keep = (w) => press(() => postWatch(ws, { op: 'keep', id: w.id }), 'Keep');
+  const keepAll = () => press(async () => { const rs = await Promise.all(V.d.items.filter((w) => w.state === 'suggested').map((w) => postWatch(ws, { op: 'keep', id: w.id }))); return rs.find((r) => !r || r.ok === false) || { ok: true }; }, 'Keep all', () => toast('Kept the watch list'));
+  const remove = (w) => press(() => postWatch(ws, { op: 'remove', id: w.id }), 'Remove', () => toast({ text: 'Removed ' + w.name, onAction: () => press(() => postWatch(ws, { op: 'keep', id: w.id, restore: true }), 'Undo'), timeout: 7000 }));
+  const save = async (w) => {
+    const v = V.editValue.trim(); if (!v) return;
+    V.edit = null;
+    if (v !== w.name) await press(() => postWatch(ws, { op: 'edit', id: w.id, name: v }), 'Save');
+    else if (w.state === 'new') await keep(w); else draw();
+  };
+  const add = async () => {
+    const v = V.addName.trim();
+    if (!v) { V.addErr = 'Write what to watch first.'; draw(); const i = host.querySelector('[data-scan-add-in]'); if (i) i.focus(); return; }
+    V.addErr = '';
+    const r = await press(() => postWatch(ws, { op: 'add', name: v, kind: V.addKind, why: V.addWhy.trim(), boards: V.addBoard ? [V.addBoard] : [] }), 'Add',
+      () => { const b = V.addBoard; V.addName = ''; V.addWhy = ''; V.addBoard = ''; toast(b ? 'Added for ' + ((V.boards.find((x) => x.id === b) || {}).name || b) + '.' : 'Added for the whole portfolio.'); });
+    if (!r) draw();
+  };
+
+  function item(w, deciding) {
+    if (V.edit === w.id) {
+      const inp = el('input', { type: 'text', 'data-scan-edit-in': '', value: V.editValue, 'aria-label': 'Watch list item name', maxlength: '80', autocomplete: 'off', oninput: (e) => { V.editValue = e.target.value; },
+        onkeydown: (e) => { if (e.key === 'Enter' && !e.isComposing) { e.preventDefault(); save(w); } else if (e.key === 'Escape') { e.stopPropagation(); V.edit = null; draw(); } } });
+      setTimeout(() => inp.focus(), 20);
+      return el('li', { class: 'sc-it', 'data-scan-item': w.id, 'data-scan-state': 'edit' }, icon('eye', 'sm'), el('div', { class: 'sc-main' }, el('div', { class: 'form' }, inp),
+        el('div', { class: 'sc-acts' }, pbtn('primary', 'Save', 'check', { 'data-scan-act': 'save', 'data-id': w.id, onclick: () => save(w) }), pbtn('ghost', 'Cancel', null, { 'data-scan-act': 'cancel', 'data-id': w.id, onclick: () => { V.edit = null; draw(); } }))));
+    }
+    const kept = w.state === 'kept';
+    return el('li', { class: 'sc-it', 'data-scan-item': w.id, 'data-scan-state': w.state, 'data-scan-kind': w.kind }, icon(KIND_ICON[w.kind] || 'eye', 'sm'),
+      el('div', { class: 'sc-main' },
+        el('div', { class: 'sc-name' }, el('b', null, w.name), kindTag(w.kind), kept ? stc('ok', 'check', 'Kept') : null),
+        (deciding || !kept || w.added) && w.why ? el('span', { class: 'dim sc-sm' }, w.why) : null,
+        el('div', { class: 'chips' }, el('span', { class: 'dim mono sc-xs' }, 'BOARDS'), ...(w.boards.length ? w.boards.map((b) => boardChip(V.boards, b)) : [chip('none yet')]), el('span', { class: 'dim sc-sm' }, w.added ? 'added by you' : w.ini ? 'from ' + w.ini : 'suggested by the agent')),
+        el('div', { class: 'sc-acts' }, !kept ? pbtn('outline', 'Keep', 'check', { 'data-scan-act': 'keep', 'data-id': w.id, disabled: V.busy, onclick: () => keep(w) }) : null,
+          pbtn('ghost', 'Edit', 'edit', { 'data-scan-act': 'edit', 'data-id': w.id, disabled: V.busy, onclick: () => { V.edit = w.id; V.editValue = w.name; draw(); } }),
+          pbtn('ghost', 'Remove', 'x', { 'data-scan-act': 'remove', 'data-id': w.id, disabled: V.busy, onclick: () => remove(w) }))));
+  }
+
+  function draw() {
+    const d = V.d; const sy = host.parentElement ? host.parentElement.scrollTop : 0;
+    if (!d) {
+      put(host, V.err ? el('div', { class: 'fold w', role: 'alert', 'data-scan': 'error' }, icon('alert', 'sm'), V.err, ' ', pbtn('outline', 'Try again', null, { onclick: load }))
+        : el('div', { class: 'dim', 'data-scan': 'loading' }, 'Reading the horizon scan'));
+      return;
+    }
+    const { cadence, repo, types } = d.setting;
+    const w = d.items; const n = w.length; const pend = w.filter((x) => x.state === 'suggested').length;
+    head.disabled = blocked(d);
+    const deciding = !d.last; const scanned = !!d.last;
+    const mine = latestReports(d); const wait = waitingOf(d);
+    const now = new Date();
+    const lastLine = d.open ? 'A scan is running now.' : d.last ? (d.last.ok === false ? 'Last scan did not finish' + (d.last.reason ? ': ' + d.last.reason : '') + '. ' + pastLabel(d.last.at, now) + '.' : 'Last scan: ' + pastLabel(d.last.at, now) + '. ' + plural(mine.length, 'report') + ' written.') : 'Last scan: none yet.';
+    const nextLine = cadence === 'off' ? 'Next scan: none while the scan is off. Scan now still works.'
+      : d.next && (scanned || w.some((x) => x.state === 'kept')) ? 'Next scan ' + nextLabel(d.next, now) + '. The agent skips what you dismissed or already saw.' : 'The first scheduled scan runs after you decide on the watch list.';
+    const status = sect({ ic: 'clock', title: 'Last scan and next scan', attrs: { 'data-scan': 'status' } },
+      el('div', { class: 'sc-meta' }, el('span', { 'data-scan': 'schedule' }, el('b', null, SCHED_NOTE(cadence) + '.')),
+        el('span', { class: 'dim', 'data-scan': 'last' }, lastLine, scanned && wait ? [' ', lk({ 'data-scan-act': 'reports', onclick: () => o.showTab ? o.showTab('rep', true) : null }, plural(wait, 'proposal') + ' waiting in Reports')] : null),
+        el('span', { class: 'dim', 'data-scan': 'next' }, nextLine)),
+      el('div', { class: 'chips2' }, pbtn('primary', 'Scan now', 'bolt', { 'data-scan-act': 'scan', disabled: blocked(d), onclick: scanNow }),
+        scanned && mine.length ? pbtn('outline', 'Open the reports', 'doc', { 'data-scan-act': 'reports', onclick: () => mine[0] && openScanDoc(ws, mine[0], { panel: wait > 0 }) }) : null,
+        el('span', { class: 'dim sc-sm', 'data-scan': 'manual', role: blocked(d) ? 'status' : null }, leftLine(d) + ' Scan now lets you choose what to scan.')));
+    const freq = sect({ ic: 'cal', title: 'How often', attrs: { 'data-scan': 'freq' } },
+      el('div', { class: 'chips2' }, el('div', { class: 'seg', role: 'group', 'aria-label': 'How often the agent scans' },
+        ...[['daily', 'Daily'], ['weekly', 'Weekly'], ['off', 'Off']].map(([k, l]) => btn({ 'aria-pressed': String(cadence === k), 'data-scan-freq': k, disabled: V.busy, onclick: () => setCadence(k) }, l))), el('span', { class: 'dim sc-sm' }, 'Daily is the default.')),
+      el('div', { class: 'dim sc-sm' }, 'One scan for the whole portfolio, not one per board. It costs one agent run.'));
+    const fromAgent = w.some((x) => !x.added);
+    const banner = deciding && n && fromAgent ? el('div', { class: 'fold a', role: 'status', 'data-scan': 'banner' }, icon('spark', 'sm'),
+      ' The agent suggests ' + plural(n, 'thing') + ' to watch' + (V.boards.length ? (V.boards.length > 1 ? ', from the initiatives on all ' + V.boards.length + ' boards' : ', from the initiatives on the board') : '') + '. Keep, edit or remove each one.' + (pend ? ' ' + pend + ' still to decide.' : ' You decided on all of them.'),
+      pend ? lk({ 'data-scan-act': 'keepall', onclick: keepAll }, 'Keep all') : null) : null;
+    const kindSel = el('select', { 'data-scan-add-kind': '', 'aria-label': 'Kind', onchange: (e) => { V.addKind = e.target.value; } }, ...KINDS.map((k) => el('option', { value: k, selected: k === V.addKind }, k)));
+    const boardSel = el('select', { 'data-scan-add-board': '', 'aria-label': 'Boards it relates to', onchange: (e) => { V.addBoard = e.target.value; } },
+      el('option', { value: '', selected: !V.addBoard }, 'Whole portfolio'), ...V.boards.map((b) => el('option', { value: b.id, selected: b.id === V.addBoard }, b.name)));
+    const whyIn = el('input', { type: 'text', 'data-scan-add-why': '', placeholder: 'Why watch it (optional)', 'aria-label': 'Why watch it', maxlength: '200', autocomplete: 'off', value: V.addWhy,
+      oninput: (e) => { V.addWhy = e.target.value; }, onkeydown: (e) => { if (e.key === 'Enter' && !e.isComposing) { e.preventDefault(); add(); } } });
+    const addIn = el('input', { type: 'text', 'data-scan-add-in': '', placeholder: 'Add something to watch', 'aria-label': 'Add to the watch list', maxlength: '80', autocomplete: 'off', value: V.addName,
+      oninput: (e) => { V.addName = e.target.value; }, onkeydown: (e) => { if (e.key === 'Enter' && !e.isComposing) { e.preventDefault(); add(); } } });
+    const watch = sect({ ic: 'eye', title: 'Watch list', count: n, attrs: { 'data-scan': 'watch' } }, banner,
+      el('ul', { class: 'sc-list', 'data-scan': 'list' }, ...(n ? w.map((x) => item(x, deciding)) : [el('li', { class: 'dim', 'data-scan': 'empty' }, 'The watch list is empty. The web part of the scan has nothing to search for.')])),
+      el('div', { class: 'sc-add' }, addIn, kindSel, boardSel, whyIn, pbtn('outline', 'Add', 'plus', { 'data-scan-act': 'add', disabled: V.busy, onclick: add })),
+      V.addErr ? el('div', { class: 'fold w', role: 'alert', 'data-scan': 'add-error' }, icon('alert', 'sm'), V.addErr) : null);
+    const src = sect({ ic: 'repo', title: 'Sources', attrs: { 'data-scan': 'sources' } },
+      check(repo, 'Repository', 'Reads the initiatives on all boards, Jira themes, friction notes and delivery data. It stays on this machine.', null, { 'data-scan-repo': '' }, setRepo),
+      el('div', { class: 'sc-web' }, icon('out', 'sm'), el('span', null, el('b', null, 'Web'), ' ', el('span', { class: 'tag' }, 'topics only'), el('br'), el('span', { class: 'dim sc-sm' }, 'Searches and reads public pages for the watch list topics. It never sees private repository content.'))));
+    const typesS = sect({ ic: 'report', title: 'Report types', attrs: { 'data-scan': 'types' } },
+      ...TYPES.map((t) => check(types.includes(t[0]), t[1], t[2], t[3] ? [' ', el('span', { class: 'tag warn' }, 'repository only')] : null, { 'data-scan-type': t[0] }, (on) => setType(t[0], on))),
+      el('div', { class: 'fold' }, icon('plus', 'sm'), ' More report types come later.'));
+    const dismissed = V.dismissed;
+    const dis = dismissed.length ? sect({ ic: 'x', title: 'Dismissed', count: dismissed.length, attrs: { 'data-scan': 'dismissed' } },
+      el('ul', { class: 'chgl' }, ...dismissed.map((p) => el('li', null, icon('x', 'sm'), el('span', null, el('b', null, p.title), el('br'), el('span', { class: 'dim sc-sm' }, p.reason)), el('span', { class: 'tag' }, 'not raised again'))))) : null;
+    put(host, status, freq, watch, src, typesS, dis, el('div', { class: 'fold' }, icon('info', 'sm'), ' Nothing is sent outward. The agent proposes; you approve each step. A scan never creates an initiative by itself.'));
+    if (host.parentElement) host.parentElement.scrollTop = sy;
+  }
+  draw(); load();
+  return ui;
+}
+
+/* ══ Scan now: the picker ══ */
+export function openScanPicker(ws, o = {}) {
+  ensureScanCss();
+  const P = { d: null, items: {}, repo: true, types: {}, err: '', busy: false, boards: [] };
+  const host = el('div', { class: 'sc-hs', 'data-scan-pick': '' });
+  const ui = openSheet({ title: 'Scan now', icon: 'search', body: host, wide: true });
+  Promise.all([getPortfolio(ws), getBoards(ws)]).then(([d, b]) => {
+    P.d = d; P.boards = b; P.repo = d.setting.repo;
+    d.items.filter((w) => w.state === 'kept').forEach((w) => { P.items[w.id] = true; });
+    TYPES.forEach((t) => { P.types[t[0]] = d.setting.types.includes(t[0]); });
+    draw();
+  });
+  async function start() {
+    const w = P.d.items.filter((x) => x.state === 'kept' && P.items[x.id]);
+    const sel = { items: w.map((x) => x.id), repo: P.repo, types: TYPES.map((t) => t[0]).filter((k) => P.types[k]) };
+    P.busy = true; P.err = ''; draw();
+    const r = await postNow(ws, sel);
+    P.busy = false;
+    if (!r || r.ok === false) { P.err = 'The scan did not start: ' + scanNowWords(r) + '.'; draw(); return; }
+    scanChanged();
+    openScanRunning(ws, { ...o, before: new Set(P.d.reports.map((x) => x.id)) });
+  }
+  function draw() {
+    const d = P.d;
+    if (!d) { put(host, el('div', { class: 'dim' }, 'Reading the horizon scan')); return; }
+    const live = d.items.filter((w) => w.state === 'kept'); const held = d.items.length - live.length; const nI = live.filter((w) => P.items[w.id]).length; const nT = TYPES.filter((t) => P.types[t[0]]).length;
+    const none = !nI && !P.repo; const webOnly = !none && !nI && P.repo && TYPES.some((t) => P.types[t[0]] && !t[3]);
+    const items = sect({ ic: 'eye', title: 'Watch items', count: nI },
+      el('ul', { class: 'sc-list' }, ...live.map((w) => el('li', { class: 'sc-it sc-pi' }, check(!!P.items[w.id], w.name, '', [' ', kindTag(w.kind)], { 'data-scan-pi': w.id }, (on) => { P.items[w.id] = on; draw(); }),
+        el('div', { class: 'chips' }, ...w.boards.map((b) => boardChip(P.boards, b)))))),
+      el('div', { class: 'chips2' }, lk({ 'data-scan-act': 'pall', onclick: () => { live.forEach((x) => { P.items[x.id] = true; }); draw(); } }, 'All'), lk({ 'data-scan-act': 'pnone', onclick: () => { live.forEach((x) => { P.items[x.id] = false; }); draw(); } }, 'None'),
+        el('span', { class: 'dim sc-sm' }, nI + ' of ' + live.length + ' chosen. The web part sees these topics only.' + (held ? ' ' + plural(held, 'suggestion') + ' not kept yet, so not listed.' : ''))));
+    const repo = sect({ ic: 'repo', title: 'Repository' }, check(P.repo, 'Read the repository', 'Initiatives on all boards, Jira themes, friction notes and delivery data.', null, { 'data-scan-prepo': '' }, (on) => { P.repo = on; draw(); }));
+    const types = sect({ ic: 'report', title: 'Report types', count: nT }, ...TYPES.map((t) => check(!!P.types[t[0]], t[1], t[2], t[3] ? [' ', el('span', { class: 'tag warn' }, 'repository only')] : null, { 'data-scan-pt': t[0] }, (on) => { P.types[t[0]] = on; draw(); })));
+    const warn = (t) => el('div', { class: 'fold w', role: 'alert' }, icon('alert', 'sm'), t);
+    put(host, el('div', { class: 'fold' }, icon('info', 'sm'), ' Choose what this scan reads and writes. It does not change your schedule (' + SCHED_NOTE(d.setting.cadence).toLowerCase() + ').'),
+      items, repo, types,
+      blocked(d) ? warn(leftLine(d)) : null,
+      none ? warn('Choose at least one watch item or the repository.') : null, webOnly ? warn('No watch item is chosen, so the web reports have nothing to search for. Only the Productivity report can run.') : null,
+      nT === 0 ? warn('Choose at least one report type.') : null, P.err ? el('div', { class: 'fold w', role: 'alert', 'data-scan': 'start-error' }, icon('alert', 'sm'), P.err) : null,
+      el('div', { class: 'chips2' }, pbtn('primary', P.busy ? 'Starting' : 'Start the scan', 'bolt', { 'data-scan-act': 'start', disabled: none || !nT || P.busy || blocked(d), onclick: start }), el('span', { class: 'dim sc-sm', 'data-scan': 'left' }, d.manual.left + ' of ' + d.manual.limit + ' manual scans left today.'), pbtn('ghost', 'Cancel', null, { 'data-scan-act': 'cancel', onclick: () => ui.close() })));
+  }
+  draw();
+  return ui;
+}
+
+/* ══ the running sheet ══ */
+/** The steps of a scan are web, repo and reports; each is pending | running | done | failed | skipped. */
+const STEP_IC = (s) => (s === 'done' ? 'check' : s === 'failed' ? 'alert' : s === 'pending' || s === 'skipped' ? 'info' : 'clock');
+const STEP_WORD = { done: 'done', running: 'now', failed: 'failed', skipped: 'skipped', pending: '' };
+const settled = (s) => s.state === 'done' || s.state === 'failed' || s.state === 'skipped';
+export function openScanRunning(ws, o = {}) {
+  ensureScanCss();
+  const R = { d: null, stopped: false, before: o.before || null, seen: false, timer: null, closed: false, stepAt: 0, total: 0, steps: [] };
+  const host = el('div', { class: 'sc-hs', 'data-scan-run': '' });
+  const ui = openSheet({ title: 'Scan running', icon: 'search', body: host, wide: true, onClose: () => { R.closed = true; clearTimeout(R.timer); } });
+  async function poll() {
+    if (R.closed) return;
+    const d = await getPortfolio(ws);
+    if (R.closed) return;
+    R.d = d;
+    if (d.open) { R.seen = true; R.steps = d.open.steps; R.total = d.open.steps.length; R.stepAt = Math.max(0, d.open.steps.findIndex((s) => !settled(s))); }
+    draw();
+    if (d.open || !R.seen) R.timer = setTimeout(poll, 1500);
+    if (!d.open && R.seen) scanChanged();
+  }
+  async function stop() {
+    const r = await postStop(ws);
+    if (!r || r.ok === false) { toast({ text: errText(r, 'Stop did not work'), tone: 'error', timeout: 6000 }); return; }
+    R.stopped = true; clearTimeout(R.timer); toast('Scan stopped. What was already filed is kept'); scanChanged(); draw();
+  }
+  function draw() {
+    const d = R.d;
+    if (!d) { put(host, el('div', { class: 'dim' }, 'Reading the scan')); return; }
+    if (R.stopped) { put(host, el('div', { class: 'fold w', role: 'status', 'data-scan': 'stopped' }, icon('x', 'sm'), ' Stopped at step ' + (R.stepAt + 1) + ' of ' + R.total + '. Nothing was sent. What was already filed is kept.'),
+      el('div', { class: 'chips2' }, pbtn('primary', 'Scan now again', 'bolt', { 'data-scan-act': 'scan', onclick: () => openScanPicker(ws, o) }), pbtn('ghost', 'Close', null, { onclick: () => ui.close() }))); return; }
+    if (d.open) {
+      const steps = d.open.steps;
+      put(host, el('div', { class: 'lh' }, el('span', { class: 'ki' }, icon('bolt')), el('div', { class: 'sc-lhm' }, el('b', null, 'Scanning the portfolio'), el('div', { class: 'dim' }, (d.open.stopping ? 'Stopping. ' : '') + 'Step ' + (R.stepAt + 1) + ' of ' + steps.length + '. You can close this sheet. The scan keeps running.'))),
+        el('div', { class: 'hbr ini-t-acc', 'data-scan': 'progress', 'aria-label': 'Scan progress' }, el('div', { class: 'tk' }, geo(el('u'), { '--in-w': Math.max(6, Math.min(100, Math.round(R.stepAt / Math.max(1, steps.length) * 100))) + '%' }))),
+        el('ul', { class: 'chgl sc-steps', 'data-scan': 'steps' }, ...steps.map((s, i) => el('li', { 'data-scan-step': s.id, 'data-scan-step-state': s.state }, icon(STEP_IC(s.state), 'sm'), el('span', { class: i > R.stepAt ? 'dim' : '' }, el('b', null, s.label)),
+          el('span', { class: 'dim' }, STEP_WORD[s.state] || '')))),
+        el('div', { class: 'chips2' }, pbtn('outline', 'Stop', 'x', { 'data-scan-act': 'stop', onclick: stop }), el('span', { class: 'dim sc-sm' }, 'Stopping keeps what was already filed. Nothing is sent.')));
+      return;
+    }
+    if (!R.seen && !R.before) { put(host, el('div', { class: 'fold', 'data-scan': 'idle' }, icon('info', 'sm'), ' No scan is running now.'), el('div', { class: 'chips2' }, pbtn('primary', 'Scan now', 'bolt', { 'data-scan-act': 'scan', onclick: () => openScanPicker(ws, o) }), pbtn('ghost', 'Close', null, { onclick: () => ui.close() }))); return; }
+    const fresh = d.reports.filter((r) => !r.parent && (!R.before || !R.before.has(r.id)));
+    const wait = waitingOf(d);
+    const failed = d.last && d.last.ok === false ? d.last : null;
+    put(host, failed ? el('div', { class: 'fold w', role: 'alert', 'data-scan': 'failed' }, icon('alert', 'sm'), failed.stopped ? ' The scan was stopped.' : ' The scan did not finish' + (failed.reason ? ': ' + failed.reason : '') + '.') : null,
+      el('div', { class: 'lh', 'data-scan': 'finished' }, el('span', { class: 'ki' }, icon('check')), el('div', { class: 'sc-lhm' }, el('b', null, fresh.length ? 'Scan finished: ' + plural(fresh.length, 'report') + ' written' : 'Scan finished: nothing new'),
+      el('div', { class: 'dim' }, fresh.length ? plural(wait, 'proposal') + ' wait for you.' : 'The agent raised nothing twice.'))),
+      fresh.length ? list(fresh.map((r) => nrow({ ic: 'search', title: r.title || typeName(r.type), onOpen: () => openScanDoc(ws, r, { panel: true }), attrs: { 'data-scan-report': r.id },
+        chips: [waitingOf(d, r.id) ? el('span', { class: 'tag acc' }, plural(waitingOf(d, r.id), 'proposal')) : chip('No proposals')], right: [pbtn('outline', 'Open', 'out', { 'data-scan-act': 'opendoc', 'data-id': r.id, onclick: () => openScanDoc(ws, r, { panel: true }) })] }))) : null,
+      el('div', { class: 'fold' }, icon('info', 'sm'), ' Nothing was sent. Public pages were read for topics only.'),
+      el('div', { class: 'chips2' }, fresh.length && o.showTab ? pbtn('primary', 'Open Documents', 'doc', { 'data-scan-act': 'reports', onclick: () => { ui.close(); o.showTab('rep', true); } }) : null, pbtn('ghost', 'Close', null, { onclick: () => ui.close() })));
+  }
+  draw(); poll();
+  return ui;
+}
+
+/* ══ the Portfolio section ══ */
+export function scanPortfolioSection({ ws, boardCount, showTab }) {
+  ensureScanCss();
+  const S = { d: null, err: '' };
+  const body = el('div', { class: 'sc-pf' });
+  const right = el('span', { class: 'dim mono sc-xs', 'data-scan': 'cadence' });
+  const o = { showTab };
+  const node = sect({ ic: 'search', title: 'Horizon scan', right, attrs: { 'data-scan-section': 'portfolio', 'data-c3pg': 'hs-portfolio', 'aria-label': 'Horizon scan' } }, body);
+  const scanNow = () => { if (S.d && S.d.open) { openScanRunning(ws, o); toast('A scan is already running'); } else if (blocked(S.d)) toast({ text: leftLine(S.d), tone: 'error', timeout: 6000 }); else openScanPicker(ws, o); };
+  async function load() { const d = await getPortfolio(ws); if (d.ok) { S.d = d; S.err = ''; } else S.err = errText(d, 'The horizon scan could not be read'); draw(); }
+  function draw() {
+    const d = S.d;
+    const mine = d ? latestReports(d) : []; const wait = d ? waitingOf(d) : 0; const cad = d ? d.setting.cadence : 'daily';
+    const now = new Date();
+    const kept = d ? d.items.filter((w) => w.state === 'kept').length : 0;
+    let state = 'Reading the horizon scan.';
+    if (S.err && !d) state = S.err;
+    else if (d) {
+      state = !kept && !d.last ? (d.items.length ? 'The agent suggests ' + plural(d.items.length, 'thing') + ' to watch. Decide on the list, or run a scan now and choose what to scan.' : 'No watch list yet. Open the setup to add what to watch, or run a scan now and choose what to scan.')
+        : cad === 'off' ? 'The scan is off. Scan now still works.'
+          : (cad === 'daily' ? 'Daily' : 'Weekly') + '. ' + (d.last ? 'Last scan ' + pastLabel(d.last.at, now) + '. ' : '') + (d.next ? 'Next scan ' + nextLabel(d.next, now) + '.' : '');
+    }
+    right.textContent = d ? cad.toUpperCase() : '';
+    const byDoc = d ? mine.filter((r) => waitingOf(d, r.id)) : [];
+    put(body,
+      el('div', { class: 'chips2' }, chip(icon('cols', 'sm'), 'Whole portfolio: ' + plural(boardCount == null ? 0 : boardCount, 'board')),
+        d && mine.length ? chip(icon('doc', 'sm'), plural(mine.length, 'report') + ' from the last scan') : null),
+      el('div', { class: 'dim sc-sm', 'data-scan': 'state', role: S.err && !d ? 'alert' : null }, state),
+      d ? el('div', { class: 'dim sc-sm', 'data-scan': 'manual', role: blocked(d) ? 'status' : null }, leftLine(d)) : null,
+      d && wait ? el('div', { class: 'fold a sc-strip', role: 'status', 'data-scan': 'waiting' }, icon('spark', 'sm'), el('b', null, 'Waiting for you: ' + plural(wait, 'proposal')), el('span', { class: 'dim' }, 'from the Horizon scan'),
+        ...byDoc.map((r) => lk({ 'data-scan-act': 'opennext', 'data-id': r.id, onclick: () => openScanDoc(ws, r, { panel: true }) }, (r.title || typeName(r.type)).split(':')[0] + ' ' + waitingOf(d, r.id)))) : null,
+      d && mine.length ? list(mine.map((r) => nrow({ ic: 'search', title: r.title || typeName(r.type), onOpen: () => openScanDoc(ws, r, { panel: waitingOf(d, r.id) > 0 }), attrs: { 'data-scan-report': r.id },
+        chips: [waitingOf(d, r.id) ? el('span', { class: 'tag acc' }, plural(waitingOf(d, r.id), 'proposal')) : chip('No proposals waiting')] })), { 'data-scan': 'reports' }) : null,
+      el('div', { class: 'chips2' }, pbtn('primary', 'Scan now', 'bolt', { 'data-scan-act': 'scan', disabled: blocked(d), onclick: scanNow }), pbtn('outline', 'Horizon scan setup', 'settings', { 'data-scan-act': 'setup', onclick: () => openScanSetup(ws, o) }),
+        d && mine.length && showTab ? pbtn('ghost', 'Open the reports', 'doc', { 'data-scan-act': 'reports', onclick: () => showTab('rep', true) }) : null));
+  }
+  const off = onScanChange(() => { if (!node.isConnected) { off(); return; } load(); });
+  draw(); load();
+  return node;
+}
+
+/* ══ Board settings: the pointer ══ */
+export function scanPointer(ws) {
+  ensureScanCss();
+  return el('div', { class: 'sc-ptr', 'data-scan-ptr': '' }, icon('search', 'sm'), el('span', null, el('b', null, 'Horizon scan runs for the whole portfolio.'), ' ', el('span', { class: 'dim' }, 'It is not set per board.')),
+    lk({ 'data-scan-act': 'setup', onclick: () => openScanSetup(ws) }, 'Open the Horizon scan setup'));
+}

package/workspace/public/pm/c3-scan-words.js

@@ -0,0 +1,34 @@
+/* pm/c3-scan-words.js — the words and dates the Horizon scan screens share (c3-scan.js, c3-scan-setup.js, c3-scan-next.js), and the one
+ * stylesheet link. Pure, except ensureScanCss. */
+const MON = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+const WD = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+const p2 = (n) => String(n).padStart(2, '0');
+const clock = (d) => p2(d.getHours()) + ':' + p2(d.getMinutes());
+const sameDay = (a, b) => a.toDateString() === b.toDateString();
+const WHEN_SHORT = (d) => WD[d.getDay()] + ' ' + d.getDate() + ' ' + MON[d.getMonth()] + ', ' + clock(d);
+
+/** Link c3-scan.css once, from this module's own folder (the way c3-driver.js links its stylesheet). */
+export function ensureScanCss() {
+  if (typeof document === 'undefined' || document.querySelector('link[data-c3-scan]')) return;
+  const l = document.createElement('link');
+  l.rel = 'stylesheet'; l.href = new URL('./c3-scan.css', import.meta.url).href; l.setAttribute('data-c3-scan', '');
+  document.head.appendChild(l);
+}
+
+/** 'today, 09:00', 'yesterday, 09:00' or 'Mon 12 Oct, 09:00', for a time in the past. */
+export function pastLabel(iso, now = new Date()) {
+  const d = new Date(iso);
+  if (!Number.isFinite(d.getTime())) return '';
+  const y = new Date(now); y.setDate(y.getDate() - 1);
+  return sameDay(d, now) ? 'today, ' + clock(d) : sameDay(d, y) ? 'yesterday, ' + clock(d) : WHEN_SHORT(d);
+}
+/** 'within a minute', 'today, 09:00', 'tomorrow, 09:00' or 'Mon 19 Oct, 09:00', for the next scan. */
+export function nextLabel(iso, now = new Date()) {
+  const d = new Date(iso);
+  if (!Number.isFinite(d.getTime())) return '';
+  if (d.getTime() - now.getTime() < 90000) return 'within a minute';
+  const t = new Date(now); t.setDate(t.getDate() + 1);
+  return sameDay(d, now) ? 'today, ' + clock(d) : sameDay(d, t) ? 'tomorrow, ' + clock(d) : WHEN_SHORT(d);
+}
+export const scheduleLine = (c) => (c === 'daily' ? 'Every working day, 09:00' : c === 'weekly' ? 'Every Monday, 09:00' : 'Off. No scan runs by itself');
+export const sameDayAs = sameDay;

package/workspace/public/pm/c3-scan.css

@@ -1,25 +1,74 @@
-/* pm/c3-scan.css — the few rules the Horizon scan needs beyond console3.css (c3-scan.js). The mockup's 40-scan.css under the `sc-` prefix: the
- * Board settings block, the scan asks in Triage and the Briefing card. Held to the R28 rules: tokens only, no inline style, corners 0, 6px or 8px,
+/* pm/c3-scan.css — the few rules the portfolio Horizon scan needs beyond console3.css (c3-scan-setup.js, c3-scan-next.js, c3-scan.js). The mockup's
+ * 42-hscan.css under the `sc-` prefix: the Portfolio section, the setup, picker and running sheets, the proposals panel in the document sheet, the
+ * Board settings pointer, the Briefing card and the scan asks in Triage. Held to the R28 rules: tokens only, no inline style, corners 0, 6px or 8px,
  * font sizes from the --fs tokens. */
-.c3 .sc-set { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--border); }
-.c3 .sc-set > * { min-width: 0; overflow-wrap: anywhere; }
-.c3 .sc-set .seg { max-width: 100%; overflow-x: auto; }
+.c3 .sc-hs { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); min-width: 0; }
+.c3 .sc-hs > * { min-width: 0; overflow-wrap: anywhere; }
+.c3 .sc-hs .seg { max-width: 100%; overflow-x: auto; }
+.c3 .sc-lhm { min-width: 0; }
+.c3 .sc-sm { font-size: var(--fs-2); }
+.c3 .sc-xs { font-size: var(--fs-1); }
 .c3 .sc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
 .c3 .sc-it { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 8px; align-items: start; padding: var(--sp-2) 0; border-top: 1px solid var(--border); }
+.c3 .sc-it:first-child { border-top: 0; }
 .c3 .sc-it > .sc-main { min-width: 0; display: grid; gap: 4px; }
 .c3 .sc-it .sc-name { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; overflow-wrap: anywhere; }
-.c3 .sc-it .sc-why { font-size: var(--fs-2); }
 .c3 .sc-it .sc-acts { display: flex; gap: 6px; flex-wrap: wrap; }
 .c3 .sc-it .form { margin: 0; }
+.c3 .sc-it.sc-pi { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 4px 0; }
+.c3 .sc-it.sc-pi .chips { margin-left: 26px; }
+.c3 .sc-hs .chips, .c3 .sc-next .chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
 .c3 .sc-add { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
 .c3 .sc-add input[type="text"] { flex: 1 1 160px; min-width: 0; }
 .c3 .sc-meta { display: grid; gap: 4px; font-size: var(--fs-2); }
-.c3 .sc-foot { font-size: var(--fs-2); }
+.c3 .sc-chkl { min-width: 0; overflow-wrap: anywhere; }
+.c3 .sc-web { display: flex; gap: 8px; align-items: flex-start; padding-top: var(--sp-2); }
+.c3 .sc-web > span { min-width: 0; }
+.c3 .sc-pf { display: grid; gap: var(--sp-2); }
+.c3 .sc-pf ul.list { margin: 0; }
+.c3 .sc-strip { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
+.c3 .sc-steps li.ok { color: var(--foreground); }
+.c3 .sc-ptr { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: 8px; background: var(--card); }
+.c3 .sc-ptr > span { flex: 1 1 200px; min-width: 0; }
+/* Keep the board settings sheet body inside the sheet when the pointer line is present. */
+.c3 #sheet .sb:has(.sc-ptr) { grid-template-columns: minmax(0, 1fr); }
+.c3 .sheet .sb:has(.sc-ptr) { min-width: 0; }
+.c3 .sheet .sb .sbb:has(.sc-ptr) { min-width: 0; max-width: 100%; grid-template-columns: minmax(0, 1fr); }
+
+/* The "Proposed next steps" panel, under the document sheet's header and tabs */
+.c3 .sc-next { display: grid; gap: var(--sp-2); padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); min-width: 0; }
+.c3 .sc-next[hidden] { display: none; }
+.c3 .sc-next .hd { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
+.c3 .sc-next .sc-tg { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; background: transparent; border: 0; padding: 0; font: inherit; color: var(--foreground); cursor: pointer; text-align: left; min-width: 0; }
+.c3 .sc-next .sc-tg { max-width: 100%; }
+.c3 .sc-next .sc-tg .dim { font-size: var(--fs-2); min-width: 0; overflow-wrap: anywhere; }
+.c3 .sc-next .sc-tg .ic { transition: transform .15s; }
+.c3 .sc-next .sc-tg[aria-expanded="true"] .ic { transform: rotate(90deg); }
+.c3 .sc-next .tag { display: inline-flex; gap: 4px; align-items: center; }
+.c3 .sc-next ul.sc-pl { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
+.c3 .sc-next .sc-p { display: grid; gap: 8px; min-width: 0; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--background); }
+.c3 .sc-next .sc-p p { margin: 0; font-size: var(--fs-2); line-height: 1.5; }
+.c3 .sc-next .sc-p .l1 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+.c3 .sc-next .sc-p .l1 .tag { margin-left: auto; }
+.c3 .sc-next .sc-p .chip2 { max-width: 100%; }
+.c3 .sc-next .sc-p .chip2 .mono { overflow-wrap: anywhere; }
+.c3 .sc-next .sc-p .ini-kv { margin: 0; font-size: var(--fs-2); }
+.c3 .sc-next .sc-p .ini-kv dt { text-transform: uppercase; font-size: var(--fs-1); }
+.c3 .sc-next .sc-link { text-decoration: none; }
+.c3 .sc-next .sc-p .fold { align-items: center; }
+.c3 .sc-next .sc-form { display: grid; gap: 8px; }
+.c3 .sc-next .sc-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
+.c3 .sc-next .sc-f { display: grid; gap: 4px; min-width: 0; font-size: var(--fs-1); }
+.c3 .sc-next .sc-f input, .c3 .sc-next .sc-f select, .c3 .sc-next .sc-f textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
+.c3 .sc-next .sc-f input.bad { border-color: var(--destructive); }
+.c3 .sc-next .sc-run { display: grid; gap: 8px; }
+.c3 .sheet .flash { background: color-mix(in oklab, var(--acc) 10%, transparent); }
+
+/* Triage rows for an ask an earlier scan found, and the Briefing card */
 .c3 .nrow .sc-src { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; align-items: center; }
 .c3 .nrow .sc-src .chip2 { max-width: 100%; }
 .c3 .sc-link { text-decoration: none; }
 .c3 .sc-card { display: grid; gap: var(--sp-2); }
 .c3 .sc-card ul.chgl li { flex-wrap: wrap; }
-
 .c3 .sc-card .sc-find { display: flex; flex-direction: column; min-width: 0; }
-.c3 .sc-card .sc-find .sc-sub { display: block; }
+.c3 .sc-card .sc-find .sc-sm { display: block; }