create-pmos 0.54.1 → 0.55.0

package/workspace/public/pm/today-day.js

@@ -0,0 +1,760 @@
+/* pm/today-day.js — the day section at the top of Today (initiative today-goals, PRD G9 to G22).
+ *
+ *   daySection({ ws, setState, openIni })  → the section node, or null in fixture mode
+ *   daySig(ws)                             → a string that changes whenever what the section shows changes
+ *
+ * One read feeds it: GET /api/proactive/day (the run, its stage, the fresh brief with its calendar, items and digests, the
+ * goals' plan, the source settings and states, the daytime check). The section draws:
+ *   - a one-line top bar: the greeting, the four steps of "Prepare my day" (each selects its detail), the last and the
+ *     coming check with "Check now", Sources, and "Prepare my day";
+ *   - on the left, the calendar (with a line at the current time), the jobs (needs you, agent working, done), the goals
+ *     and the mentions with the watched channels, projects and spaces;
+ *   - on the right, the detail of what is selected: a meeting, a job, a goal, a mention, a step, the sources or a place.
+ * The presses go to the routes that own them: the goals route (add, done, drop, reopen, remove), /goals/plan (Prepare my
+ * day), /day/decide (approve, revise, run again), /day/check (Check now) and the settings route (sources, levels, the
+ * daytime check, websites). Nothing here sends anything outward: the agent sessions do that, after the PM approves.
+ *
+ * FIRST PAINT. Folded, the section is one control (its toggle), so Today keeps inside its control budget
+ * (first-paint-today.test.js). It opens by itself on a day the PM pressed "Prepare my day", and it remembers the PM's own
+ * choice in this browser.
+ *
+ * REFRESH. Like the goals before it, the read repeats every 30 seconds, and every 4 seconds while a run reads or works, a
+ * check runs or a press is in flight. A read that changes nothing draws nothing.
+ */
+
+import { el } from './dom.js';
+import { button, iconButton, badge, toast, row, tabs, field } from './primitives.js';
+import { pmGet, pmPost } from './http.js';
+import { FIXTURE } from './state.js';
+import { COPY } from './today-copy.js';
+import { goalRows, goalAdd, goalDetail, addGoal, goalsSig } from './today-goals.js';
+
+const D = COPY.day;
+const SLOW_MS = 30000;
+const FAST_MS = 4000;
+const MAX_REVISIONS = 3;
+const SCOPED = ['slack', 'jira', 'confluence'];
+const NARROW = 860;   // below this width of the section the detail goes under the list (components.css @container td-day)
+
+/* ── per-viewer conveniences (never state that must persist): the fold and the new items already seen ── */
+const store = {
+  get(k) { try { return localStorage.getItem(k); } catch { return null; } },
+  set(k, v) { try { localStorage.setItem(k, v); } catch { /* private window: the default applies */ } },
+};
+const OPEN_KEY = 'pmos.today.day.open';
+const SEEN_KEY = 'pmos.today.day.seen';
+let seen = new Set();
+try { seen = new Set(JSON.parse(store.get(SEEN_KEY) || '[]')); } catch { seen = new Set(); }
+
+const cache = new Map();   // ws -> { data, error }
+const runs = new Map();    // ws -> the last "Prepare my day" press: { state: 'busy'|'started'|'running'|'failed', at, session, error }
+const ui = {
+  open: (() => { const v = store.get(OPEN_KEY); return v === 'true' ? true : v === 'false' ? false : null; })(),
+  sel: null, mtab: 'all', openSrc: null, showIgn: {}, showIgnDigests: false,
+  revising: new Set(), notes: new Map(), siteDraft: '', placeDraft: {}, busy: new Set(), scroll: false,
+};
+let rerender = () => {};
+let timer = null;
+
+/* ── the read ─────────────────────────────────────────────────────────────────────────────────────────────────── */
+
+const minuteOf = (v) => { const t = typeof v === 'number' ? v : Date.parse(v); return Number.isFinite(t) ? Math.floor(t / 60000) : null; };
+const dataSig = (d) => (d ? JSON.stringify({ ...d, now: minuteOf(d.now) }) : 'null');
+
+async function load(ws) {
+  const q = ws ? '?ws=' + encodeURIComponent(ws) : '';
+  let out = await pmGet('/api/proactive/day' + q);
+  if (out && out.ok === false && out.status === 404) {
+    // a workspace server from before the day run: show the goals from the older read, and say so
+    const g = await pmGet('/api/proactive/goals' + q);
+    out = g && g.ok ? { ok: true, legacy: true, today: g.today, now: null, run: null, stage: null, brief: null, plan: g.plan, max_goals: g.max_goals, settings: null, sources: [], check: null } : g;
+  }
+  const prev = cache.get(ws);
+  const next = out && out.ok ? { data: out, error: null } : { data: prev ? prev.data : null, error: (out && out.error) || D.unreached };
+  cache.set(ws, next);
+  if (!prev || dataSig(prev.data) !== dataSig(next.data) || prev.error !== next.error) rerender();
+  schedule();
+}
+
+function busyNow() {
+  for (const [ws, c] of cache) {
+    const d = c.data;
+    if (d && (d.stage === 'reading' || d.stage === 'working' || (d.check && d.check.running))) return true;
+    if (d && d.run && (d.run.tasks || []).some((t) => t.status === 'sending')) return true;
+    const r = runs.get(ws);
+    if (r && r.state === 'busy') return true;
+  }
+  return false;
+}
+
+function schedule() {
+  if (typeof window === 'undefined') return;
+  if (timer) clearTimeout(timer);
+  timer = setTimeout(() => {
+    timer = null;
+    // a hidden Today reads at the slow pace only: the reads cost the server, and nobody looks
+    if (!document.querySelector('[data-today="day"]') && !busyNow()) { schedule(); return; }
+    for (const w of cache.keys()) load(w);
+  }, busyNow() ? FAST_MS : SLOW_MS);
+}
+
+function ensure(ws) {
+  if (!cache.has(ws)) { cache.set(ws, { data: null, error: null }); load(ws); }
+}
+
+/* ── the model: the read, joined once per draw ────────────────────────────────────────────────────────────────── */
+
+const pad = (n) => String(n).padStart(2, '0');
+const hhmm = (v) => { if (v === null || v === undefined || v === '') return ''; const d = new Date(typeof v === 'number' ? v : Date.parse(v)); return Number.isNaN(d.getTime()) ? String(v) : `${pad(d.getHours())}:${pad(d.getMinutes())}`; };
+const isUrl = (s) => typeof s === 'string' && s.length <= 500 && /^https?:\/\/\S+$/i.test(s);
+const srcName = (k) => D.srcName[k] || (k === 'derived' ? 'PMOS' : String(k || ''));
+
+function jobOf(item, task, worth) {
+  const kind = (item && item.kind) || (task && task.kind) || (item && item.owner === 'pm' ? 'you' : 'approve');
+  const status = task ? task.status : kind === 'you' ? 'you' : 'notStarted';
+  const group = worth ? 'worth' : ['you', 'review', 'failed'].includes(status) ? 'needs' : ['done', 'sent'].includes(status) ? 'done' : 'working';
+  return {
+    id: item ? item.id : task.item_id, item, task, kind, status, group, worth,
+    title: (item && item.title) || (task && task.title) || '', source: (item && item.source) || (task && task.source) || '',
+    link: (item && isUrl(item.link) && item.link) || (task && isUrl(task.link) && task.link) || null,
+    goal: (item && item.goal) || (task && task.goal) || null, isNew: !!(item && item.new),
+  };
+}
+
+function deriveStage(run, brief) {
+  if (!run) return null;
+  if (!brief) return 'reading';
+  const ts = run.tasks || [];
+  if (ts.some((t) => ['waiting', 'working', 'sending'].includes(t.status))) return 'working';
+  if (ts.some((t) => t.status === 'review')) return 'review';
+  return 'done';
+}
+
+function model(d) {
+  const today = d && d.today;
+  const brief = d && d.brief && (!today || d.brief.date === today) ? d.brief : null;
+  const plan = (d && d.plan) || null;
+  const goals = plan ? plan.goals || [] : [];
+  const goalNo = new Map(goals.map((g, i) => [g.id, i + 1]));
+  const run = (d && d.run) || null;
+  const tasks = run && Array.isArray(run.tasks) ? run.tasks : [];
+  const byItem = new Map(tasks.map((t) => [t.item_id, t]));
+  const used = new Set();
+  const jobs = [];
+  const add = (x, worth) => { const t = byItem.get(x.id) || null; if (t) used.add(t.id); jobs.push(jobOf(x, t, worth)); };
+  for (const x of (brief && brief.priorities) || []) add(x, false);
+  for (const x of (brief && brief.worth_asking) || []) add(x, true);
+  for (const t of tasks) if (!used.has(t.id)) jobs.push(jobOf(null, t, false));   // an item a check took off: its task stays
+  const now = d && d.now ? (typeof d.now === 'number' ? d.now : Date.parse(d.now)) : Date.now();
+  const events = ((brief && brief.calendar) || []).map((e, i) => {
+    const s = Date.parse(e.start);
+    const f = e.end ? Date.parse(e.end) : s + 30 * 60000;
+    return { ...e, id: e.id || 'ev-' + i, s, f, time: hhmm(e.start), ended: Number.isFinite(f) && f <= now };
+  }).sort((a, b) => a.s - b.s);
+  const settings = (d && d.settings) || null;
+  const scopes = (settings && settings.scopes) || {};
+  const level = (svc, name) => (scopes[svc] && scopes[svc][name]) || 'search';
+  const digests = ((brief && Array.isArray(brief.digests)) ? brief.digests : []).map((g) => ({ ...g, id: g.source + '|' + g.name, level: level(g.source, g.name) }));
+  return {
+    d, brief, plan, goals, goalNo, run, tasks, jobs, events, now, settings, scopes, level, digests,
+    stage: run ? (d.stage || deriveStage(run, brief)) : null,
+    mentions: jobs.filter((j) => j.item && j.item.mention),
+    sources: (d && Array.isArray(d.sources)) ? d.sources : [],
+    check: (d && d.check) || null,
+    free: plan && plan.time ? plan.time.free_minutes : null,
+    maxGoals: (d && d.max_goals) || 7,
+    needs: jobs.filter((j) => j.group === 'needs').length,
+    done: jobs.filter((j) => j.group === 'done').length,
+  };
+}
+
+const stepIndex = (stage) => ({ reading: 0, working: 2, review: 3, done: 4 }[stage] ?? -1);
+
+/* ── small parts ──────────────────────────────────────────────────────────────────────────────────────────────── */
+
+// a status word: the badge primitive. Health and attention read warning or destructive; everything else stays neutral.
+const TONE = { '': 'muted', ok: 'outline', info: 'outline', goal: 'outline', warn: 'warning', purple: 'warning', bad: 'destructive' };
+function pill(text, tone, attrs) {
+  return badge({ text, tone: TONE[tone || ''] || 'muted', attrs });
+}
+function statusPill(j) {
+  const s = D.status2;
+  const map = {
+    notStarted: [s.notStarted, ''], waiting: [s.waiting, ''], working: [s.working, 'info'], sending: [s.sending, 'info'],
+    review: [j.kind === 'auto' ? s.reviewAuto : s.review, 'purple'], sent: [s.sent, 'ok'], done: [s.done, 'ok'],
+    failed: [s.failed, 'bad'], you: [s.you, 'warn'],
+  };
+  const [t, tone] = map[j.status] || [j.status, ''];
+  return pill(t, tone, { 'data-day-status': j.status });
+}
+/** A link that opens outside the workspace, drawn as a small button. Only http and https addresses are drawn. */
+function extLink(label, href, attrs) {
+  if (!isUrl(href)) return null;
+  return el('a', { class: 'td-day__a', href, target: '_blank', rel: 'noopener noreferrer', ...(attrs || {}) }, label);
+}
+function panel(name, count, ...kids) {
+  return el('section', { class: 'td-day__panel', 'aria-label': D.panels[name], 'data-day-panel': name },
+    el('h2', { class: 'td-day__h2' }, D.panels[name], count ? el('span', null, count) : null), ...kids);
+}
+function note(text, attrs) { return el('p', { class: 'td-day__note', ...(attrs || {}) }, text); }
+function list(title, items, cls) {
+  if (!items || !items.length) return null;
+  return el('div', { class: 'td-day__phase' }, el('h4', null, title), el('ul', { class: 'td-day__chk' + (cls ? ' ' + cls : '') }, ...items.map((x) => el('li', null, x))));
+}
+function dl(pairs) {
+  const kids = [];
+  for (const [k, v] of pairs) if (v !== null && v !== undefined && v !== '') kids.push(el('dt', null, k), el('dd', null, v));
+  return kids.length ? el('dl', { class: 'td-day__ctx' }, ...kids) : null;
+}
+
+function greet(now) {
+  const h = new Date(now).getHours();
+  return h < 12 ? D.hello.morning : h < 18 ? D.hello.afternoon : D.hello.evening;
+}
+function dateLabel(now) {
+  try { return new Date(now).toLocaleDateString(undefined, { weekday: 'short', day: 'numeric', month: 'short' }); } catch { return ''; }
+}
+
+/* ── presses ──────────────────────────────────────────────────────────────────────────────────────────────────── */
+
+async function prepareDay(ws) {
+  const cur = runs.get(ws);
+  if (cur && cur.state === 'busy') return;
+  runs.set(ws, { state: 'busy' });
+  rerender(); schedule();
+  const r = await pmPost('/api/proactive/goals/plan', { ws });
+  const sid = r && (r.session || (r.result && r.result.sessionId));
+  if (r && r.ok) {
+    runs.set(ws, { state: r.running ? 'running' : 'started', at: Date.now(), session: sid ? { id: sid, name: 'morning-brief' } : null });
+    ui.sel = { type: 'step', id: '0' };
+    toast({ text: r.running ? D.runRunning : COPY.goals.started });
+  } else {
+    const error = (r && r.error) || D.unreached;
+    runs.set(ws, { state: 'failed', at: Date.now(), error });
+    toast({ text: D.runFailed(error), tone: 'destructive' });
+  }
+  rerender();
+  load(ws);
+}
+
+async function openSession(session) {
+  try { const m = await import('./handoff-box.js'); await m.openSessionTab(null, session); } catch (e) { console.error('[pm] could not open the session:', e); }
+}
+
+async function checkNow(ws) {
+  ui.busy.add('check'); rerender();
+  const r = await pmPost('/api/proactive/day/check', { ws });
+  ui.busy.delete('check');
+  toast(r && r.ok ? { text: D.checkStarted } : { text: D.checkRefused((r && r.error) || D.unreached), tone: 'destructive' });
+  rerender();
+  load(ws);
+}
+
+async function decide(ws, task, action, note) {
+  const body = { task: task.id, action };
+  if (note !== undefined) body.note = note;
+  ui.busy.add(task.id); rerender();
+  const r = await pmPost('/api/proactive/day/decide', body);
+  ui.busy.delete(task.id);
+  if (r && r.ok) { toast({ text: D.decided[action] }); ui.revising.delete(task.id); ui.notes.delete(task.id); }
+  else toast({ text: D.refused((r && r.error) || D.unreached), tone: 'destructive' });
+  rerender();
+  load(ws);
+}
+
+async function setSettings(ws, patch) {
+  const r = await pmPost('/api/proactive/settings', patch);
+  if (!r || r.ok === false) { toast({ text: D.refused((r && r.error) || D.unreached), tone: 'destructive' }); return false; }
+  await load(ws);
+  return true;
+}
+
+function select(type, id) {
+  ui.sel = type ? { type, id: String(id) } : null;
+  if (type === 'job' && !seen.has(id)) { seen.add(id); store.set(SEEN_KEY, JSON.stringify([...seen].slice(-200))); }
+  ui.scroll = true;
+  rerender();
+}
+
+/* ── the top bar ──────────────────────────────────────────────────────────────────────────────────────────────── */
+
+function topBar(ctx) {
+  const { m, ws } = ctx;
+  const si = stepIndex(m.stage);
+  const steps = el('ol', { class: 'td-day__steps', 'aria-label': D.prepare }, ...D.steps.map((t, i) => {
+    const st = si < 0 ? 'todo' : i < si || si === 4 ? 'done' : i === si ? 'now' : 'todo';
+    return el('li', null, button({ label: [el('span', { class: 'td-day__tsdot', 'aria-hidden': 'true' }), t], variant: 'ghost', size: 'sm', onClick: () => select('step', i),
+      attrs: { class: 'td-day__ts', 'data-step-state': st, 'data-day-step': String(i), 'data-day-sel': 'step:' + i, 'aria-current': ctx.cur('step', String(i)), title: D.stepHint[i] } }));
+  }));
+  const working = m.tasks.filter((t) => t.status === 'working' || t.status === 'sending').length;
+  const status = !m.run ? D.status.idle : m.stage === 'reading' ? D.status.reading : m.stage === 'working' ? D.status.working(working, m.needs)
+    : m.stage === 'review' ? D.status.review(m.needs, m.done) : D.status.done(m.done);
+  let check = null;
+  if (m.run && m.check) {
+    const every = m.settings && m.settings.dayCheck && typeof m.settings.dayCheck.every === 'number' ? m.settings.dayCheck.every : m.check.every;
+    const running = !!m.check.running || ui.busy.has('check');
+    check = every === 0 ? el('span', { class: 'td-day__check', 'data-day': 'check' }, D.checkOff)
+      : el('span', { class: 'td-day__check', 'data-day': 'check' }, el('span', null, running ? D.checking : D.checked(hhmm(m.check.last), hhmm(m.check.next))),
+        button({ label: D.checkNow, size: 'sm', disabled: running, attrs: { 'data-day': 'check-now' }, onClick: () => checkNow(ws) }));
+  }
+  const press = runs.get(ws);
+  const busy = !!press && press.state === 'busy';
+  const bs = m.run && m.run.brief_session;
+  const reading = !!bs && !bs.ended_at && m.stage === 'reading';
+  const label = busy ? D.starting : reading ? D.stillReading : m.run ? D.again : D.prepare;
+  return el('header', { class: 'td-day__bar' },
+    (() => { const when = [dateLabel(m.now), m.free !== null && m.free !== undefined ? D.free(m.free) : null].filter(Boolean).join(' · ');
+      return el('div', { class: 'td-day__hello', title: greet(m.now) + ' ' + when }, el('b', null, greet(m.now)), ' ', el('span', { class: 'td-day__dim' }, when)); })(),
+    steps,
+    el('span', { class: 'td-day__status', role: 'status', 'data-day': 'status', title: status }, status),
+    check,
+    button({ label: D.sources, size: 'sm', attrs: { 'data-day': 'sources', 'data-day-sel': 'sources:all', 'aria-current': ctx.cur('sources', 'all') }, onClick: () => select('sources', 'all') }),
+    button({ label, variant: 'primary', size: 'sm', disabled: busy || reading, attrs: { 'data-day': 'prepare', 'data-goals': 'prepare-day', title: D.prepareHint, 'aria-busy': busy ? 'true' : 'false' }, onClick: () => prepareDay(ws) }),
+    iconButton({ icon: 'chevron-down', ariaLabel: D.fold, size: 'sm', expanded: true, attrs: { 'data-day': 'toggle' }, onClick: () => fold(false) }));
+}
+
+function runLine(ctx) {
+  const r = runs.get(ctx.ws);
+  if (!r || r.state === 'busy') return null;
+  const text = r.state === 'failed' ? D.runFailed(r.error) : r.state === 'running' ? D.runRunning : D.runStarted(hhmm(r.at));
+  return el('p', { class: 'td-day__run' + (r.state === 'failed' ? ' td-day__run--failed' : ''), 'data-day': 'run', 'data-goals': 'run', 'data-run': r.state,
+    role: r.state === 'failed' ? 'alert' : 'status' }, text);
+}
+
+/* ── the left column ──────────────────────────────────────────────────────────────────────────────────────────── */
+
+/** A selectable row of a list: the row primitive. `lead` and `trail` are nodes or text; the row carries data-day-sel. */
+function rowBtn(ctx, type, id, { lead, title, meta, trail, dot }, mods) {
+  const cur = ctx.cur(type, String(id));
+  return el('li', null, row({
+    title, meta: meta ? [meta] : null, onOpen: () => select(type, id),
+    lead: [dot || null, lead !== undefined && lead !== null && lead !== '' ? el('span', { class: 'td-day__lead' }, lead) : null].filter(Boolean),
+    trail: [trail || null].filter(Boolean),
+    attrs: { class: 'td-day__r', 'data-day-sel': type + ':' + id, 'data-cur': cur, ...(mods || {}) },
+    openAttrs: { 'aria-current': cur },
+  }));
+}
+
+function eventChip(e) {
+  if (e.ended) return e.notes && (e.notes.wispr || e.notes.mail) ? pill(D.pill.notes, 'ok') : pill(D.pill.ended, '');
+  if (e.prep) return pill(D.pill.prepare, 'warn');
+  if (e.steps && e.steps.before && e.steps.before.length) return pill(D.pill.ready, '');
+  return null;
+}
+
+function calendar(ctx) {
+  const { m } = ctx;
+  if (!m.events.length) return panel('calendar', null, note(m.run && m.stage === 'reading' ? D.readingJobs : D.noCalendar));
+  const rows = [];
+  let nowShown = false;
+  const nowRow = () => el('li', { class: 'td-day__nowrow', 'data-day': 'now', 'aria-hidden': 'true' }, D.now(hhmm(m.now)));
+  for (const e of m.events) {
+    if (!nowShown && e.s > m.now) { rows.push(nowRow()); nowShown = true; }
+    const n = e.goal ? m.goalNo.get(e.goal) : null;
+    rows.push(rowBtn(ctx, 'event', e.id, { lead: e.time, title: e.title, meta: e.purpose || e.with || '',
+      trail: el('span', { class: 'td-day__chips' }, n ? pill(D.pill.goal(n), 'goal') : null, eventChip(e)) },
+    { 'data-past': e.ended ? 'true' : null, 'data-goal-tie': n ? 'true' : null }));
+  }
+  if (!nowShown) rows.push(nowRow());
+  return panel('calendar', null, el('ul', { class: 'td-day__rows', 'data-day-list': 'calendar' }, ...rows));
+}
+
+function jobRow(ctx, j) {
+  const n = j.goal ? ctx.m.goalNo.get(j.goal) : null;
+  const sub = j.status === 'failed' && j.task && j.task.error ? j.task.error
+    : [j.item && j.item.where, srcName(j.source)].filter(Boolean).join(' · ');
+  return rowBtn(ctx, 'job', j.id, { lead: n ? D.pill.goal(n) : '·', title: j.title, meta: sub, trail: statusPill(j),
+    dot: j.isNew && !seen.has(j.id) ? el('span', { class: 'td-day__newdot', 'data-day': 'new', role: 'img', 'aria-label': D.newItem }) : null });
+}
+
+function jobsPanel(ctx) {
+  const { m } = ctx;
+  if (!m.jobs.length) return panel('jobs', null, note(m.run && m.stage === 'reading' ? D.readingJobs : D.noJobs, { 'data-day': 'no-jobs' }));
+  const groups = ['needs', 'working', 'done', 'worth'].map((g) => [g, m.jobs.filter((j) => j.group === g)]).filter(([, l]) => l.length);
+  return panel('jobs', D.jobsCount(m.needs, m.done), ...groups.map(([g, l]) => el('div', { class: 'td-day__group', 'data-day-group': g },
+    el('div', { class: 'td-day__gh' }, D.groups[g], pill(String(l.length), '')),
+    el('ul', { class: 'td-day__rows' }, ...l.map((j) => jobRow(ctx, j))))));
+}
+
+function goalsPanel(ctx) {
+  const { m } = ctx;
+  return panel('goals', D.goalsCount(m.goals.filter((g) => g.status === 'open').length, m.maxGoals), goalRows(ctx), goalAdd(ctx));
+}
+
+function mentionStatus(j) {
+  if (j.group === 'done') return pill(D.status2.handled, 'ok');
+  if (j.status === 'you') return j.item && j.item.reply_needed ? pill(D.status2.replyNeeded, 'warn') : pill(D.status2.you, 'warn');
+  return statusPill(j);
+}
+
+function digestRow(ctx, g) {
+  const sub = D.digestLine(D.levelWord[g.level] || g.level, (g.decisions || []).length, (g.open || []).length);
+  return rowBtn(ctx, 'channel', g.id, { lead: el('span', { class: 'td-day__chip' }, srcName(g.source)), title: g.name, meta: sub });
+}
+
+function mentionsPanel(ctx) {
+  const { m } = ctx;
+  const svcs = [...new Set(m.mentions.map((j) => j.source))];
+  if (ui.mtab !== 'all' && !svcs.includes(ui.mtab)) ui.mtab = 'all';
+  const need = m.mentions.filter((j) => j.group === 'needs').length;
+  const mtabs = m.mentions.length ? tabs({ variant: 'line', role: 'tablist', ariaLabel: D.panels.mentions, value: ui.mtab, attrs: { 'data-day': 'mtabs' },
+    items: ['all', ...svcs].map((v) => ({ id: v, label: v === 'all' ? D.all : srcName(v), count: v === 'all' ? m.mentions.length : m.mentions.filter((j) => j.source === v).length })),
+    onChange: (v) => { ui.mtab = v; rerender(); } }) : null;
+  const shown = m.mentions.filter((j) => ui.mtab === 'all' || j.source === ui.mtab);
+  const rows = shown.length ? el('ul', { class: 'td-day__rows', 'data-day-list': 'mentions' }, ...shown.map((j) => {
+    const it = j.item;
+    return rowBtn(ctx, 'mention', j.id, { lead: el('span', { class: 'td-day__chip' }, srcName(j.source)),
+      title: it.about && it.ask ? `${it.about}: ${it.ask}` : it.ask || j.title, meta: D.fromWho(it.who, it.where) || it.why_now || '', trail: mentionStatus(j) });
+  })) : note(D.noMentions);
+  const live = m.digests.filter((g) => g.level !== 'ignore');
+  const ign = m.digests.filter((g) => g.level === 'ignore');
+  const dig = m.digests.length ? el('div', { class: 'td-day__group', 'data-day-group': 'watched' },
+    el('div', { class: 'td-day__gh' }, D.watched, pill(String(live.length), '')),
+    live.length ? el('ul', { class: 'td-day__rows', 'data-day-list': 'digests' }, ...live.map((g) => digestRow(ctx, g))) : null,
+    ign.length ? button({ label: ui.showIgnDigests ? D.hideIgnored : D.showIgnored(ign.length), variant: 'ghost', size: 'sm',
+      attrs: { 'data-day': 'show-ignored', 'aria-expanded': ui.showIgnDigests ? 'true' : 'false' }, onClick: () => { ui.showIgnDigests = !ui.showIgnDigests; rerender(); } }) : null,
+    ign.length && ui.showIgnDigests ? el('ul', { class: 'td-day__rows', 'data-day-list': 'ignored' }, ...ign.map((g) => digestRow(ctx, g))) : null) : null;
+  return panel('mentions', m.mentions.length ? D.mentionsCount(m.mentions.length, need) : null, mtabs, rows, dig);
+}
+
+/* ── the right column ─────────────────────────────────────────────────────────────────────────────────────────── */
+
+function dhead(kind, title) {
+  return el('div', { class: 'td-day__dhead' }, el('span', { class: 'td-day__kind' }, kind), title ? el('h3', null, title) : null);
+}
+function relRow(ctx, type, id, label, lead, j) {
+  return rowBtn(ctx, type, id, { lead: lead || '', title: label, trail: j ? statusPill(j) : null });
+}
+
+function stepItem(st) {
+  const who = st && (st.who === 'pm' || st.who === 'agent') ? st.who : null;
+  return el('span', { class: 'td-day__stepline' + (st && st.done ? ' td-day__stepline--done' : who === 'pm' ? ' td-day__stepline--you' : '') },
+    String((st && st.t) || ''), who ? el('span', { class: 'td-day__who' }, D.who[who]) : null);
+}
+
+function eventDetail(ctx, e) {
+  const { m } = ctx;
+  const n = e.goal ? m.goalNo.get(e.goal) : null;
+  const g = n ? m.goals[n - 1] : null;
+  const ini = e.initiative && e.initiative.id ? e.initiative : null;
+  const steps = e.steps || {};
+  const notes = e.notes || {};
+  const w = notes.wispr || null;
+  const mail = notes.mail || null;
+  const mailBlock = mail ? el('div', { class: 'td-day__notes', 'data-day': 'mail' }, el('div', { class: 'td-day__src' }, D.mail, ' · ', mail.from || '', ' ', isUrl(mail.link) ? el('a', { href: mail.link, target: '_blank', rel: 'noopener noreferrer' }, D.openLink) : null),
+    el('p', null, el('b', null, (mail.subject || '') + '. '), mail.gist || '')) : null;
+  const after = e.ended ? el('div', { class: 'td-day__notes', 'data-day': 'notes' }, el('h4', null, D.notesTitle),
+    w ? [el('div', { class: 'td-day__src' }, D.wispr, ' ', isUrl(w.link) ? el('a', { href: w.link, target: '_blank', rel: 'noopener noreferrer' }, D.openLink) : null),
+      w.summary ? el('p', null, w.summary) : null,
+      list(D.decisions, (w.decisions || []).map(String), 'td-day__chk--ok'),
+      list(D.actions, (w.actions || []).map((a) => (typeof a === 'string' ? a : stepItem(a))))] : note(D.noWispr),
+    mailBlock || note(D.noMail)) : null;
+  const tie = g ? el('p', { class: 'td-day__goalline', 'data-day': 'tie' }, D.countsToward(n, g.text))
+    : [note(D.tieHow, { 'data-day': 'tie' }), m.goals.length < m.maxGoals ? el('div', { class: 'td-day__acts' }, button({ label: D.addAsGoal, size: 'sm', attrs: { 'data-day-act': 'add-goal' },
+      onClick: async () => { if (await addGoal(ctx, e.title, ini ? ini.id : null)) toast({ text: D.goalAdded }); } })) : null];
+  return [
+    dhead(D.kind.meeting, e.title),
+    el('p', { class: 'td-day__dim td-day__mono' }, `${e.time}${e.end ? '–' + hhmm(e.end) : ''}${e.with ? ' · ' + e.with : ''}${e.ended ? ' · ' + D.ended : ''}`),
+    e.purpose ? el('p', null, el('b', null, D.purpose + ': '), e.purpose) : null,
+    e.prep ? el('p', null, el('b', null, D.prep + ': '), e.prep) : null,
+    ini ? el('div', { class: 'td-day__ini', 'data-day': 'initiative' }, el('span', null, D.initiative + ': ', el('b', { class: 'td-day__mono' }, ini.id), ini.why ? el('span', { class: 'td-day__dim' }, ' (' + D.suggested(ini.why) + ')') : null),
+      ctx.openIni ? button({ label: D.openInitiative, size: 'sm', variant: 'ghost', attrs: { 'data-day-act': 'open-initiative' }, onClick: () => ctx.openIni(ini.id) }) : null) : null,
+    tie,
+    !e.ended ? el('div', { class: 'td-day__acts' }, e.prep ? pill(D.needPrep, 'warn') : steps.before && steps.before.length ? pill(D.nothingToPrep, 'ok') : null) : null,
+    after,
+    !e.ended ? [list(D.phases.before, (steps.before || []).map(stepItem)), list(D.phases.during, (steps.during || []).map(stepItem)), list(D.phases.after, (steps.after || []).map(stepItem)), mailBlock] : null,
+    Array.isArray(e.links) && e.links.length ? el('div', { class: 'td-day__acts', 'data-day': 'links' }, ...e.links.map((l) => extLink((l.label || l.url) + ' ↗', l.url))) : null,
+  ];
+}
+
+function jobCard(ctx, j) {
+  const { m, ws } = ctx;
+  const t = j.task;
+  const it = j.item || {};
+  const n = j.goal ? m.goalNo.get(j.goal) : null;
+  const busy = t && ui.busy.has(t.id);
+  const revs = t && Array.isArray(t.revisions) ? t.revisions.length : 0;
+  const statusNote = { notStarted: D.notTask, waiting: D.waitingNote, working: D.workingNote, sending: D.sendingNote, you: D.youNote }[j.status]
+    || (j.status === 'done' && j.kind === 'auto' ? D.autoNote : null);
+  const draft = t && t.draft ? el('div', { class: 'td-day__draftbox', 'data-day': 'draft' }, el('h4', null, D.draft),
+    t.draft.summary ? el('p', null, t.draft.summary) : null,
+    t.draft.body ? el('pre', { class: 'td-day__draft' }, t.draft.body) : null) : null;
+  const acts = [];
+  const canRevise = t && (j.status === 'review' || j.status === 'done') && revs < MAX_REVISIONS;
+  if (t && j.status === 'review' && j.kind === 'approve') acts.push(button({ label: D.approve, variant: 'primary', size: 'sm', disabled: busy, attrs: { 'data-day-act': 'approve' }, onClick: () => decide(ws, t, 'approve') }));
+  if (t && j.kind === 'auto' && (j.status === 'review' || (j.status === 'done' && !t.decided))) acts.push(button({ label: D.approveAuto, size: 'sm', disabled: busy, attrs: { 'data-day-act': 'approve' }, onClick: () => decide(ws, t, 'approve') }));
+  if (canRevise && !ui.revising.has(t.id)) acts.push(button({ label: D.revise, size: 'sm', disabled: busy, attrs: { 'data-day-act': 'revise' }, onClick: () => { ui.revising.add(t.id); rerender(); } }));
+  if (t && j.status === 'failed') acts.push(button({ label: D.retry, variant: 'primary', size: 'sm', disabled: busy, attrs: { 'data-day-act': 'retry' }, onClick: () => decide(ws, t, 'retry') }));
+  acts.push(extLink(D.openConversation, j.link, { 'data-day-link': 'conversation' }));
+  if (t && t.draft) acts.push(extLink(D.openDraft, t.draft.link, { 'data-day-link': 'draft' }));
+  if (t && t.sent) acts.push(extLink(D.openSent, t.sent.link, { 'data-day-link': 'sent' }));
+  if (t && t.session_id) acts.push(button({ label: D.openSession, size: 'sm', variant: 'ghost', attrs: { 'data-day-act': 'session' }, onClick: () => openSession({ id: t.session_id, name: 'day-task' }) }));
+  let form = null;
+  if (t && ui.revising.has(t.id) && canRevise) {
+    const f = field({ label: D.noteLabel, kind: 'textarea', value: ui.notes.get(t.id) || '', placeholder: D.noteHint, hideLabel: true, attrs: { maxlength: '500', 'data-day-input': 'note-' + t.id } });
+    const ta = f.control;
+    ta.addEventListener('input', () => { ui.notes.set(t.id, ta.value); });
+    form = el('div', { class: 'td-day__revise', 'data-day': 'revise' }, f, el('div', { class: 'td-day__acts' },
+      button({ label: D.sendNote, variant: 'primary', size: 'sm', disabled: busy, attrs: { 'data-day-act': 'send-note' }, onClick: () => {
+        const v = (ui.notes.get(t.id) || '').trim();
+        if (!v || v.length > 500) { toast({ text: D.noteNeeded, tone: 'destructive' }); return; }
+        decide(ws, t, 'revise', v);
+      } }),
+      button({ label: D.cancel, size: 'sm', variant: 'ghost', attrs: { 'data-day-act': 'cancel' }, onClick: () => { ui.revising.delete(t.id); rerender(); } })));
+  }
+  const reply = typeof it.reply_needed === 'boolean' ? (it.reply_needed ? D.yes : D.no) : null;
+  return el('article', { class: 'td-day__job', 'data-day-job': j.id },
+    el('div', { class: 'td-day__jobtop' }, el('span', { class: 'td-day__jobtitle' }, j.title), statusPill(j)),
+    el('span', { class: 'td-day__src' }, [srcName(j.source), it.where, n ? D.pill.goal(n) : null].filter(Boolean).join(' · ')),
+    dl([[D.where, D.fromWho(it.who, null)], [D.about, it.about || null], [D.why, it.why_now || null], [D.ask, it.ask || null], [D.reply, reply], [D.how, it.how || null]]),
+    statusNote ? note(statusNote) : null,
+    t && j.status === 'failed' && t.error ? el('p', { class: 'td-day__run td-day__run--failed', role: 'alert' }, D.failedWhy(t.error)) : null,
+    j.status === 'sent' && t && ((t.sent && t.sent.at) || (t.decided && t.decided.at)) ? note(D.sentAt(hhmm((t.sent && t.sent.at) || t.decided.at))) : null,
+    draft,
+    revs ? note(D.revisions(revs, MAX_REVISIONS) + (revs >= MAX_REVISIONS ? ' ' + D.noMoreRevisions : '')) : null,
+    el('div', { class: 'td-day__acts' }, ...acts.filter(Boolean)),
+    form);
+}
+
+function jobDetail(ctx, j) {
+  const { m } = ctx;
+  const n = j.goal ? m.goalNo.get(j.goal) : null;
+  const meets = m.events.filter((e) => e.goal && e.goal === j.goal);
+  const mention = j.item && j.item.mention;
+  return [
+    dhead(n ? D.kind.jobGoal(n) : D.kind.job, null),
+    jobCard(ctx, j),
+    meets.length || mention ? el('div', { class: 'td-day__rel' }, el('h4', null, D.related), el('ul', { class: 'td-day__rows' },
+      ...meets.map((e) => relRow(ctx, 'event', e.id, e.title, e.time)),
+      mention ? relRow(ctx, 'mention', j.id, j.item.ask || j.title, srcName(j.source)) : null)) : null,
+  ];
+}
+
+function mentionDetail(ctx, j) {
+  const it = j.item;
+  const reply = typeof it.reply_needed === 'boolean' ? (it.reply_needed ? D.yes : D.no) : null;
+  return [
+    dhead(D.kind.mention(srcName(j.source)), it.about || j.title),
+    dl([[D.where, D.fromWho(it.who, it.where)], [D.ask, it.ask || it.why_now || null], [D.reply, reply]]),
+    el('div', { class: 'td-day__acts' }, extLink(D.openIn(srcName(j.source)), j.link, { 'data-day-link': 'conversation' }), mentionStatus(j)),
+    el('div', { class: 'td-day__rel' }, el('h4', null, D.theJob), el('ul', { class: 'td-day__rows' }, relRow(ctx, 'job', j.id, j.title, '', j))),
+  ];
+}
+
+function levelSeg(ctx, svc, name) {
+  const cur = ctx.m.level(svc, name);
+  return tabs({ variant: 'segmented', role: 'radiogroup', ariaLabel: name, value: cur, attrs: { 'data-day-levels': svc + ':' + name },
+    items: ['watch', 'search', 'ignore'].map((l) => ({ id: l, label: D.levels[l] })), onChange: (l) => { if (l !== cur) setLevel(ctx, svc, name, l); } });
+}
+function setLevel(ctx, svc, name, lvl) {
+  const scopes = { ...(ctx.m.scopes || {}) };
+  scopes[svc] = { ...(scopes[svc] || {}), [name]: lvl };
+  return setSettings(ctx.ws, { scopes });
+}
+
+function channelDetail(ctx, id) {
+  const g = ctx.m.digests.find((x) => x.id === id);
+  if (!g) return null;
+  const sec = (t, l) => list(t, (l || []).map(String), 'td-day__chk--ok');
+  return [
+    dhead(D.kind.place(srcName(g.source), D.place[g.source] || '', D.levelWord[g.level] || g.level), g.name),
+    sec(D.decisions, g.decisions), sec(D.open, g.open), sec(D.forGoals, g.goals),
+    el('div', { class: 'td-day__ch' }, el('span', null, D.changeLevel), levelSeg(ctx, g.source, g.name)),
+    note(D.levelHelp),
+    el('div', { class: 'td-day__acts' }, extLink(D.openIn(srcName(g.source)), g.link, { 'data-day-link': 'place' }),
+      button({ label: D.manageSources, size: 'sm', variant: 'ghost', onClick: () => select('sources', 'all') })),
+  ];
+}
+
+function stepDetail(ctx, i) {
+  const { m } = ctx;
+  const si = stepIndex(m.stage);
+  const head = dhead(D.stepOf(i + 1), D.stepTitle[i]);
+  if (!m.run) return [head, note(D.readNone)];
+  if (i > si && si !== 4) return [head, note(D.notYet)];
+  const jobRows = (l) => (l.length ? el('ul', { class: 'td-day__rows' }, ...l.map((j) => relRow(ctx, 'job', j.id, j.title, '', j))) : null);
+  if (i === 0) {
+    const bs = m.run.brief_session;
+    const items = m.brief ? (m.brief.priorities || []).length + (m.brief.worth_asking || []).length : 0;
+    return [head, el('p', null, m.brief ? D.readDone(m.events.length, items) : D.readNow),
+      el('ul', { class: 'td-day__chk' }, ...m.sources.map((s) => el('li', { class: s.on && s.state === 'read' ? 'td-day__ok' : '' }, el('span', { class: s.on ? '' : 'td-day__dim' }, `${srcName(s.k)}: ${srcLine(s)}`)))),
+      el('div', { class: 'td-day__acts' }, button({ label: D.manageSources, size: 'sm', onClick: () => select('sources', 'all') }),
+        bs && bs.id ? button({ label: D.openSession, size: 'sm', variant: 'ghost', attrs: { 'data-day-act': 'session' }, onClick: () => openSession({ id: bs.id, name: 'morning-brief' }) }) : null)];
+  }
+  if (i === 1) {
+    const live = m.jobs.filter((j) => !j.worth);
+    return [head, el('p', null, D.madeJobs(live.length, live.filter((j) => j.kind === 'you').length, live.filter((j) => j.kind !== 'you').length)),
+      m.goals.length ? el('ul', { class: 'td-day__rows' }, ...m.goals.map((g, k) => relRow(ctx, 'goal', g.id, g.text, String(k + 1)))) : null];
+  }
+  if (i === 2) {
+    const ts = m.jobs.filter((j) => j.task);
+    const c = (s) => m.tasks.filter((t) => s.includes(t.status)).length;
+    return [head, el('p', null, D.agentsLine(c(['working', 'sending']), c(['waiting']), c(['done', 'sent']))), jobRows(ts)];
+  }
+  const need = m.jobs.filter((j) => j.group === 'needs');
+  return [head, el('p', null, D.approveLine(need.length)), jobRows(need)];
+}
+
+function srcLine(s) {
+  if (!s.on) return D.srcState.off;
+  if (s.state === 'read') return typeof s.got === 'number' ? D.gave(s.got) : D.srcState.read;
+  return D.srcState[s.state] || D.srcState.none;
+}
+
+function placeControls(ctx, svc) {
+  const { m } = ctx;
+  const names = [...new Set([...Object.keys(m.scopes[svc] || {}), ...m.digests.filter((g) => g.source === svc).map((g) => g.name)])];
+  const row = (name) => el('div', { class: 'td-day__ch', 'data-day-place': svc + ':' + name }, el('span', null, name), levelSeg(ctx, svc, name));
+  const live = names.filter((x) => m.level(svc, x) !== 'ignore');
+  const ign = names.filter((x) => m.level(svc, x) === 'ignore');
+  const input = field({ label: D.placeAdd[svc], value: '', placeholder: D.placeHint, hideLabel: true, attrs: { maxlength: '120', 'data-day-input': 'place-' + svc },
+    onCommit: async (raw) => {
+      const v = String(raw || '').trim();
+      if (!v) return;
+      ui.placeDraft[svc] = '';
+      if (!(await setLevel(ctx, svc, v, 'watch'))) ui.placeDraft[svc] = v;
+    } });
+  // made empty and filled after, so Enter still commits text a rebuild put back
+  input.control.value = ui.placeDraft[svc] || '';
+  input.control.addEventListener('input', () => { ui.placeDraft[svc] = input.control.value; });
+  return [
+    note(D.readNote[svc]),
+    ...live.map(row),
+    ign.length ? button({ label: ui.showIgn[svc] ? D.hideIgnored : D.showIgnored(ign.length), variant: 'ghost', size: 'sm',
+      attrs: { 'data-day-ignored': svc, 'aria-expanded': ui.showIgn[svc] ? 'true' : 'false' }, onClick: () => { ui.showIgn[svc] = !ui.showIgn[svc]; rerender(); } }) : null,
+    ui.showIgn[svc] ? ign.map(row) : null,
+    input,
+    note(D.levelHelp),
+  ];
+}
+
+function siteControls(ctx) {
+  const sites = (ctx.m.settings && Array.isArray(ctx.m.settings.websites)) ? ctx.m.settings.websites : [];
+  const input = field({ label: D.siteAdd, value: '', placeholder: D.siteHint, hideLabel: true, attrs: { maxlength: '500', 'data-day-input': 'site' },
+    onCommit: async (raw) => {
+      const v = String(raw || '').trim();
+      if (!v) return;
+      if (!isUrl(v)) { toast({ text: D.siteBad, tone: 'destructive' }); return; }
+      if (sites.length >= 10) { toast({ text: D.siteFull, tone: 'destructive' }); return; }
+      ui.siteDraft = '';
+      if (!(await setSettings(ctx.ws, { websites: [...sites.filter((x) => x !== v), v] }))) ui.siteDraft = v;
+    } });
+  input.control.value = ui.siteDraft;
+  input.control.addEventListener('input', () => { ui.siteDraft = input.control.value; });
+  return [
+    el('h4', null, D.sites),
+    sites.length ? el('ul', { class: 'td-day__sites', 'data-day': 'sites' }, ...sites.map((u) => el('li', null, el('span', { class: 'td-day__mono' }, u),
+      button({ label: D.remove, size: 'sm', variant: 'ghost', attrs: { 'data-day-site-remove': u }, onClick: () => setSettings(ctx.ws, { websites: sites.filter((x) => x !== u) }) })))) : null,
+    sites.length < 10 ? input : note(D.siteFull),
+  ];
+}
+
+function sourcesDetail(ctx) {
+  const { m, ws } = ctx;
+  if (!m.settings) return [dhead(D.kind.settings, D.sources), note(m.d && m.d.legacy ? D.oldServer : D.noSources)];
+  const dc = m.settings.dayCheck || { every: 60, start: '09:00', end: '18:00' };
+  const log = m.check && Array.isArray(m.check.log) ? m.check.log.slice(-4).reverse() : [];
+  const box = el('div', { class: 'td-day__notes', 'data-day': 'day-check' }, el('h4', null, D.dayCheck),
+    el('div', { class: 'td-day__ch' }, el('span', null, D.every), tabs({ variant: 'segmented', role: 'radiogroup', ariaLabel: D.every, value: String(dc.every), attrs: { 'data-day': 'every' },
+      items: D.everyOpts.map(([v, l]) => ({ id: String(v), label: l })), onChange: (v) => { if (Number(v) !== dc.every) setSettings(ws, { dayCheck: { ...dc, every: Number(v) } }); } })),
+    el('div', { class: 'td-day__ch' }, el('span', null, D.hours), el('span', { class: 'td-day__mono' }, `${dc.start}–${dc.end}`)),
+    el('div', { class: 'td-day__ch' }, el('span', null, D.beforeMeeting), el('span', { class: 'td-day__dim' }, D.beforeMeetingWhat)),
+    el('div', { class: 'td-day__ch' }, el('span', null, D.afterMeeting), el('span', { class: 'td-day__dim' }, D.afterMeetingWhat)),
+    note(D.checkHelp),
+    log.length ? el('div', { class: 'td-day__log', 'data-day': 'check-log' }, ...log.map((x) => el('div', null, x.found === null || x.found === undefined ? D.checkRunning(hhmm(x.at)) : D.checkLog(hhmm(x.at), x.found || 0, x.resolved || 0)))) : null);
+  const rows = m.sources.map((s) => {
+    const name = srcName(s.k);
+    const open = ui.openSrc === s.k;
+    const more = !open ? null : el('div', { class: 'td-day__more' }, note(D.srcWhat[s.k] || ''),
+      SCOPED.includes(s.k) ? placeControls(ctx, s.k) : null,
+      s.k === 'website' ? siteControls(ctx) : null);
+    return el('div', { class: 'td-day__sr', 'data-day-source': s.k },
+      el('span', { class: 'td-day__ic', 'aria-hidden': 'true' }, name.slice(0, 2)),
+      button({ label: name, variant: 'ghost', size: 'sm', iconEnd: open ? 'chevron-down' : 'chevron-right', attrs: { 'aria-expanded': open ? 'true' : 'false', 'data-day-osrc': s.k }, onClick: () => { ui.openSrc = open ? null : s.k; rerender(); } }),
+      el('span', { class: 'td-day__st' }, srcLine(s)),
+      field({ kind: 'check', label: D.read, value: !!s.on, attrs: { 'aria-label': D.readSwitch(name), 'data-day-src': s.k },
+        onCommit: (v) => setSettings(ws, { briefSources: { [s.k]: !!v } }) }),
+      more);
+  });
+  return [dhead(D.kind.settings, D.sources), note(D.sourcesIntro), box, el('div', { class: 'td-day__slist' }, ...rows)];
+}
+
+function defaultSel(m) {
+  const j = m.jobs.find((x) => x.group === 'needs');
+  if (j) return { type: 'job', id: j.id };
+  const e = m.events.find((x) => !x.ended);
+  if (e) return { type: 'event', id: e.id };
+  return { type: 'step', id: String(Math.max(0, Math.min(3, stepIndex(m.stage)))) };
+}
+
+function detail(ctx) {
+  const { m } = ctx;
+  let sel = ctx.sel;
+  let kids = null;
+  const find = (s) => {
+    if (s.type === 'event') { const e = m.events.find((x) => x.id === s.id); return e ? eventDetail(ctx, e) : null; }
+    if (s.type === 'job') { const j = m.jobs.find((x) => x.id === s.id); return j ? jobDetail(ctx, j) : null; }
+    if (s.type === 'mention') { const j = m.mentions.find((x) => x.id === s.id); return j ? mentionDetail(ctx, j) : null; }
+    if (s.type === 'goal') return goalDetail(ctx, s.id, (type, id, label, lead, j) => relRow(ctx, type, id, label, lead, j));
+    if (s.type === 'channel') return channelDetail(ctx, s.id);
+    if (s.type === 'step') return stepDetail(ctx, Math.max(0, Math.min(3, Number(s.id) || 0)));
+    if (s.type === 'sources') return sourcesDetail(ctx);
+    return null;
+  };
+  kids = find(sel);
+  if (!kids) { sel = defaultSel(m); kids = find(sel); }
+  return el('aside', { class: 'td-day__detail', 'aria-label': D.panels.detail, 'data-day': 'detail', 'data-day-detail': sel.type, 'data-day-detail-id': sel.id }, kids);
+}
+
+/* ── the section ──────────────────────────────────────────────────────────────────────────────────────────────── */
+
+function fold(open) {
+  ui.open = open;
+  store.set(OPEN_KEY, open ? 'true' : 'false');
+  rerender();
+}
+
+/** The section. `ws` is the repository the day run belongs to; `openIni(id)` opens an initiative of it. */
+export function daySection({ ws, setState, openIni } = {}) {
+  if (FIXTURE) return null;
+  // like Today's own feeds, a read that lands re-renders only while the section is on the page: a hidden Today must not
+  // cause a whole-page render under whatever the PM is doing elsewhere
+  if (setState) rerender = () => { if (document.querySelector('[data-today="day"]')) setState({}); };
+  ensure(ws);
+  const c = cache.get(ws) || {};
+  const m = model(c.data);
+  const open = ui.open !== null ? ui.open : !!m.run;
+  if (!open) {
+    return el('section', { class: 'td-day', 'data-today': 'day', 'data-open': 'false', 'aria-label': D.title },
+      button({ label: D.toggle(m.needs), variant: 'ghost', iconEnd: 'chevron-right', attrs: { 'data-day': 'toggle', 'aria-expanded': 'false' }, onClick: () => fold(true) }));
+  }
+  const sel = ui.sel;
+  const ctx = {
+    ws, m, sel, openIni, reload: () => load(ws), rerender: () => rerender(), select,
+    cur: (type, id) => { const s = sel || defaultSel(m); return s.type === type && s.id === String(id) ? 'true' : 'false'; },
+  };
+  ctx.sel = sel || defaultSel(m);
+  if (ui.scroll) {
+    ui.scroll = false;
+    // on a narrow screen the detail is under the list: bring it into view once it is on the page
+    requestAnimationFrame(() => requestAnimationFrame(() => {
+      const box = document.querySelector('[data-today="day"] .td-day__cols');
+      const d = document.querySelector('[data-today="day"] [data-day="detail"]');
+      if (box && d && box.clientWidth < NARROW) d.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }));
+  }
+  return el('section', { class: 'td-day', 'data-today': 'day', 'data-open': 'true', 'aria-label': D.title },
+    topBar(ctx),
+    runLine(ctx),
+    c.error ? el('p', { class: 'td-day__run td-day__run--failed', role: 'status', 'data-day': 'error' }, D.refused(c.error)) : null,
+    m.d && m.d.legacy ? note(D.oldServer) : null,
+    el('div', { class: 'td-day__cols' },
+      el('div', { class: 'td-day__left' }, calendar(ctx), jobsPanel(ctx), goalsPanel(ctx), mentionsPanel(ctx)),
+      detail(ctx)));
+}
+
+export function daySig(ws) {
+  const c = cache.get(ws) || {};
+  return JSON.stringify([ui.open, ui.sel, ui.mtab, ui.openSrc, ui.showIgn, ui.showIgnDigests, [...ui.revising], [...ui.busy], c.error, runs.get(ws) || null, [...seen].length])
+    + dataSig(c.data) + goalsSig();
+}