create-pmos 0.124.0 → 0.125.0

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

@@ -0,0 +1,637 @@
+/* pm/c3-shell.js — the console3 SHELL as its own page (/c3.html). The mockup (console3.html) is the UI: the header (title and date,
+ * the icon buttons, the bell), the tab bar (Briefing, Calendar, Work, Initiatives, Reports) and the three-column Briefing. This
+ * file draws only the frame and composes the real views into it, each through its own mount function:
+ *   Briefing    left   mountBriefing (day-part bar and deck) + a "Needs you" list of the same cards as rows
+ *               middle mountCalendarViews (day) + a portfolio pulse drawn from the Calendar's own gantt rows
+ *               right  the dock (c3-dock.js): the repository, branch and session tree, the selected session's detail, "Open the session" to /
+ *   Every tab but Briefing also carries the mockup's "Plan: Decide what gates the day" lens row and deck (c3-plan.js planNode).
+ *   Calendar    mountCalendarViews          Work   mountPmWork
+ *   Initiatives a switch among mountLifecycle, mountForecast and mountReleases      Reports  mountReportFamilies, mountOutbox
+ * The bell, the ticker, the banner and the recording group are the shell-*.js modules. The old app (/) is not touched.
+ * Real data is mostly empty: every view draws its own honest empty state, and nothing here is invented.
+ * The workspace id is ?ws= (default: the first of GET /api/workspaces). The views read some routes without a ws, so a GET to /api/
+ * that names none gets the page's ws added (see withWs). No dialog is used. Presses are the views' own. */
+import { el } from './dom.js';
+import { pmGet } from './http.js';
+import { ensureC3Css, c3ic, c3Phone, mountPmWork } from './pm-work-view.js';
+import { mountBriefing, showCard, flipBack } from './briefing-deck.js';
+import { mountCalendarViews } from './calendar-views.js';
+import { mountLifecycle } from './lifecycle-lens.js';
+import { mountForecast } from './timeline-forecast-view.js';
+import { mountReleases } from './releases-view.js';
+import { mountReportFamilies } from './report-families-view.js';
+import { mountOutbox } from './outbox-panel.js';
+import { createDock } from './c3-dock.js';
+import { belowLine, reviewSection, handledRow, trustCard, footLine, needRow, rowApi, BX, toast, setNeedsTitle, hooks as briefHooks } from './c3-brief.js';
+import { stopCard } from './c3-misc-panels.js';
+import { openSheet } from './c3-sheet.js';
+import { planNode, setPlanScope, dueCard, crossLinks, newInitLine, portfolioCard, readQuarter, mockPulse } from './c3-plan.js';
+import { initiativesViewCtx } from './registry.js';
+import { mount as mountRoadmap } from './c3-roadmap.js';
+import { mount as mountBreakdown } from './c3-breakdown.js';
+import { ic } from './c3-terminal-icons.js';
+import { mount as mountTickets, badge as ticketsBadge } from './c3-tickets.js';
+import { mount as mountDocs, badge as docsBadge } from './c3-docs.js';
+import { mount as mountSignals, badge as signalsBadge } from './c3-signals.js';
+import { mountTicker } from './shell-ticker.js';
+import { mountBell, openBellList } from './shell-bell.js';
+import { onBriefing, loadBriefing } from './shell-ticker.js';
+import { TAG_STYLE, cardView, registry, filterPalette, rowStep } from './briefing-model.js';
+
+/* In demo mode each tab's deck asks for its own cards (the mockup draws a different deck per tab); real mode sends no scope. */
+const sc = (name) => (DEMO ? name : undefined);
+const TABS = [['brief', 'Briefing', 'sun'], ['cal', 'Calendar', 'cal'], ['work', 'Work', 'todo'], ['init', 'Initiatives', 'init'], ['rep', 'Reports', 'report']];
+/* The mockup's eight Initiatives views, in its order: Lifecycle, Roadmap, Breakdown, Timeline (= Forecast), Tickets, Releases, Documents, Signals. */
+const INITS = [['lifecycle', 'Lifecycle', mountLifecycle, 'init'], ['roadmap', 'Roadmap', mountRoadmap, 'flag'], ['breakdown', 'Breakdown', mountBreakdown, 'tree'], ['forecast', 'Timeline', mountForecast, 'cal'],
+  ['tickets', 'Tickets', mountTickets, 'check'], ['releases', 'Releases', mountReleases, 'out'], ['documents', 'Documents', mountDocs, 'doc'], ['signals', 'Signals', mountSignals, 'alert']];
+/* The five views of this page's own (c3-roadmap.js ... c3-signals.js) draw the Plan lens in their own left column, as Lifecycle does. A view with a `badge` gets a count on its button. */
+const OWN = new Set(['roadmap', 'breakdown', 'tickets', 'documents', 'signals']);
+const BADGES = { tickets: ticketsBadge, documents: docsBadge, signals: signalsBadge };
+const THEME_KEY = 'pmos.c3.theme';
+const q = new URLSearchParams(location.search);
+const store = { get(k) { try { return localStorage.getItem(k); } catch { return null; } }, set(k, v) { try { localStorage.setItem(k, v); } catch { /* no storage */ } } };
+const DEMO = q.get('demo') === '1';   // demo mode: c3-demo.js answers the page's /api reads with the mockup's sample content
+const S = { demo: DEMO, ws: q.get('ws') || '', workspaces: [], tab: 'brief', theme: 'light', panes: {}, mounted: {}, init: 'lifecycle', initRows: null, dockOpen: true, wide: true };
+
+/* A view reads a route with no ws and the server answers for its home workspace. This page names one, so a GET to /api/ with no ws gets it. */
+function withWs() {
+  const f = window.fetch.bind(window);
+  window.fetch = (input, init) => {
+    try {
+      if (typeof input === 'string' && S.ws && input.startsWith('/api/') && !/[?&]ws=/.test(input) && (!init || !init.method || init.method === 'GET')) {
+        input += (input.includes('?') ? '&' : '?') + 'ws=' + encodeURIComponent(S.ws);
+      }
+    } catch { /* leave the request as it is */ }
+    return f(input, init);
+  };
+}
+
+function setTheme(t) {
+  S.theme = t === 'dark' ? 'dark' : 'light';
+  document.documentElement.setAttribute('data-pm-page-theme', S.theme);
+  S.root.setAttribute('data-pm-theme', S.theme);
+  store.set(THEME_KEY, S.theme);
+}
+
+/* ── header: the mockup's .top (title, date line) and .tools (terminal, recording, bell, search, more) ── */
+const dateLine = () => {
+  const d = new Date();
+  const day = d.toLocaleDateString('en-GB', { weekday: 'short', day: 'numeric', month: 'short' }).replace(',', '');
+  return day + ' · as of ' + String(d.getHours()).padStart(2, '0') + ':' + String(d.getMinutes()).padStart(2, '0') + (S.incident ? ' · incident' : '');
+};
+const ibtn = (label, icon, attrs) => el('button', { type: 'button', class: 'ib', title: label, 'aria-label': label, ...(attrs || {}) }, c3ic(icon));
+const iLink = (label, icon, href) => el('a', { class: 'ib', href, title: label, 'aria-label': label }, c3ic(icon));
+
+function header() {
+  S.ttl = el('h1', { 'data-c3pg': 'title' });
+  S.sub = el('div', { class: 'sub', 'data-c3pg': 'date' }, dateLine());
+  S.termBdg = el('span', { class: 'bdg', hidden: true, 'data-c3pg': 'term-count' }, '0');
+  /* the AGENT button (the pulse glyph, as the mockup's Sessions pill): the Terminal page, the full agent surfaces, with the needs-you badge. The dock's own button is the TERMINAL glyph (c3-terminal-icons.js); Ctrl J and the More menu fold the dock. */
+  S.termBtn = el('button', { type: 'button', class: 'psess', title: 'Sessions: the agent surfaces, results to accept and questions for you', 'aria-label': 'Sessions: the agent surfaces, results to accept and questions for you', 'aria-haspopup': 'dialog', 'data-c3pg': 'agent-button',
+    style: 'display:flex;gap:6px;align-items:center', onclick: () => { import('./c3-terminal.js').then((m) => m.openTerminalPage()); } }, ic('pulse', 'sm'), 'Sessions', S.termBdg);   // the mockup's header button (agent-surfaces.html #act)
+  S.tools = el('div', { class: 'tools', 'data-c3pg': 'tools' });
+  if (S.demoMod) S.tools.append(S.demoMod.demoPill());
+  S.tools.append(S.termBtn);
+  S.bellHost = el('span', { class: 'c3pg-bell' });
+  S.tools.append(S.bellHost);
+  S.tools.append(ibtn('Search (Ctrl K)', 'search', { 'data-c3pg': 'search', 'aria-haspopup': 'dialog', onclick: () => openPalette() }));
+  S.moreBtn = ibtn('More', 'more', { 'aria-haspopup': 'menu', 'aria-expanded': 'false', 'data-c3pg': 'more', onclick: toggleMore });
+  S.tools.append(el('span', { class: 'c3pg-menuwrap' }, S.moreBtn));
+  return el('div', { class: 'c3top' }, el('div', null, S.ttl, S.sub), S.tools);
+}
+
+/* the More menu (console3.html menuPop, line 1940): why each element is here, incident day, agent playbooks, phone preview; and ours: the theme and a way to
+ * the main app. Escape and a press outside close it. A switch shows a check while it is on. */
+function toggleMore() {
+  if (S.menu) { closeMore(); return; }
+  const item = (icon, label, fn, on, attrs, kbd) => el('button', { type: 'button', class: 'c3pg-mi', role: 'menuitem', ...(attrs || {}), onclick: () => { if (attrs && attrs.disabled) return; closeMore(); fn(); } },
+    c3ic(icon, 'sm'), el('span', null, label), kbd ? el('kbd', { class: 'c3pg-kbd' }, kbd) : null, on ? el('span', { class: 'st ok', style: 'margin-left:auto' }, c3ic('check', 'sm')) : null);
+  S.menu = el('div', { class: 'c3pg-menu menu', role: 'menu', 'aria-label': 'More' },
+    item('info', 'Why each element is here', () => toggleWhy(), S.why, { 'data-a': 'whyt' }),
+    item('alert', 'Incident day', () => toggleIncident(), S.incident, S.demo ? { 'data-a': 'inc' } : { 'data-a': 'inc', disabled: true, title: 'No incident feed is connected, so this page shows no incident.' }),
+    item('spark', 'Agent playbooks', () => openPlaybooks(), false, { 'data-a': 'pbopen' }),
+    item('phone', 'Phone preview', () => togglePreview(), !!S.preview, { 'data-a': 'phone' }),
+    item(S.theme === 'dark' ? 'sun' : 'moon', S.theme === 'dark' ? 'Light theme' : 'Dark theme', () => setTheme(S.theme === 'dark' ? 'light' : 'dark')),
+    item('term', S.dockOpen ? 'Fold the dock' : 'Open the dock', () => { S.dockOpen = !S.dockOpen; syncDock(); }, false, { 'data-a': 'dockt' }, 'Ctrl J'),
+    el('a', { class: 'c3pg-mi', role: 'menuitem', href: '/' }, c3ic('term', 'sm'), el('span', null, 'Open the main app')));
+  S.root.append(S.menu);   // on the page root with position:fixed, so no ancestor's overflow, transform or stacking order can hide it
+  S.placeMenu = () => { const r = S.moreBtn.getBoundingClientRect(); const w = S.menu.offsetWidth || 220; S.menu.style.top = Math.round(r.bottom + 6) + 'px'; S.menu.style.left = Math.round(Math.max(8, Math.min(r.right - w, innerWidth - w - 8))) + 'px'; S.menu.style.maxHeight = Math.max(160, innerHeight - r.bottom - 14) + 'px'; };
+  S.placeMenu(); addEventListener('resize', S.placeMenu); addEventListener('scroll', S.placeMenu, true);
+  S.moreBtn.setAttribute('aria-expanded', 'true');
+  S.menuOff = (e) => { if (e.type === 'keydown' ? e.key === 'Escape' : !S.menu.contains(e.target) && !S.moreBtn.contains(e.target)) { closeMore(); if (e.type === 'keydown') S.moreBtn.focus(); } };
+  document.addEventListener('keydown', S.menuOff); document.addEventListener('pointerdown', S.menuOff);
+  const first = S.menu.querySelector('.c3pg-mi:not([disabled])'); if (first) first.focus();
+}
+function closeMore() {
+  if (!S.menu) return;
+  document.removeEventListener('keydown', S.menuOff); document.removeEventListener('pointerdown', S.menuOff);
+  removeEventListener('resize', S.placeMenu); removeEventListener('scroll', S.placeMenu, true);
+  S.menu.remove(); S.menu = null; S.moreBtn.setAttribute('aria-expanded', 'false');
+}
+
+/* "Why each element is here" (console3.html whyPanel, line 1458, WHYS 1301): every region of the Briefing gets a number, and a panel steps through the reasons. */
+const WHYS = [
+  [1, 'Signals', 'Each card is tagged by what it asks of you. Critical: you lose something if it waits. Just in: new since you last looked. Opportunity: upside that closes. Small win: bank it in one gesture. Big win: tell others. Two questions sort them: what happens if I wait, and how long does this stay true. Tap or swipe a card up and it turns over to a short case file; swipe down to close it.'],
+  [2, 'Cause to effect', 'Three nodes show why the decision is urgent, so you do not have to remember it. The moving line shows pressure flowing from your decision to the date.'],
+  [3, 'Needs you', 'Exceptions only: what the agents could not or should not decide. Ranked and capped at five. Tap a row to open a case file: what changed, the options, the agent\'s recommendation and what it could not verify.'],
+  [4, 'Time left', 'A bar for items with a clock. "Due 10:30" and "due Friday" read the same in text, so the bar shows how much time is left.'],
+  [5, 'Review', 'Drafts wait here. Open one to see the draft, the claims it makes and where each claim came from. Approve is a slide, not a tap, so it takes intent. The agent may recommend holding a draft.'],
+  [6, 'Handled for you', 'Automation should leave a receipt, not a to-do. Collapsed to one line. Open a line to see the rule that allowed it, the evidence and how to undo.'],
+  [7, 'Time lens', 'One lens with five zoom levels, from today to five years. Each level opens with what matters and how it is progressing. The more senior the role, the wider the scan. Use the zoom icons, the + and - keys, or pinch.'],
+  [8, 'Portfolio pulse', '"Am I on track?" comes after "what do I do". One bar answers at a glance; rows say why; the small timeline shows promised against forecast.'],
+  [9, 'Data trust', 'The agent has already drafted the fixes for mismatches, so this is status only. Folded to one line until you want the evidence and the rule.'],
+  [10, 'Gestures', 'Drag a row right to finish it, left for later. The two glyphs at the edge show both; the bright one is what the agent suggests. At rest the page has almost no buttons. Keys: e, n, a, r, j, k.'],
+  [11, 'Depth', 'Elevation means priority. Raised layers are things to act on. Flat layers are things to know. Glass floats above the page because it stays while you scroll.'],
+  [12, 'Two columns', 'The left column is what you do. The right column is what you need to know. On a phone they merge, with the lens right after the cards.'],
+  [13, 'Part of the day', 'The page reads differently as the day goes: Plan, Unblock, Close, Reflect. It follows the clock, and the icons let you preview another part. The same signals are re-ranked, not replaced.'],
+  [14, 'Phone: one screen', 'No scrolling on the phone. A running line and the bell carry what just arrived. The four tiles open popups for the lists, so the page itself stays still. Audio is optional: the speaker reads the top three cards aloud for when your hands are busy.'],
+];
+const WHY_REGIONS = { 1: '[data-c3pg="deck-host"]', 13: '.stance', 3: '[data-c3pg="needs"]', 5: '[data-c3pg="review-host"] > *', 6: '[data-c3pg="handled-host"] > *', 7: '[data-c3pg="cal-host"]', 8: '[data-c3pg="pulse"]', 9: '[data-c3pg="trust-host"] > *' };
+function whyMark() {
+  S.panes.brief.querySelectorAll('[data-n]').forEach((n) => n.removeAttribute('data-n'));
+  if (!S.why) return;
+  for (const [n, sel] of Object.entries(WHY_REGIONS)) { const t = S.panes.brief.querySelector(sel); if (t) t.setAttribute('data-n', n); }
+  S.panes.brief.querySelectorAll('.wy').forEach((n) => n.classList.remove('wy'));
+  const cur = S.panes.brief.querySelector('[data-n="' + S.whyN + '"]'); if (cur) cur.classList.add('wy');
+}
+function whyPanel() {
+  if (S.whyWrap) { S.whyWrap.remove(); S.whyWrap = null; }
+  if (!S.why) return;
+  const w = WHYS[S.whyN - 1];
+  const step = (d) => { S.whyN = ((S.whyN - 1 + d + WHYS.length) % WHYS.length) + 1; whyPanel(); whyMark(); };
+  const aside = el('aside', { class: 'whyp glass', 'aria-live': 'polite', 'data-c3pg': 'why' },
+    el('div', { class: 'chips2', style: 'justify-content:space-between' }, el('span', { class: 'chips2' }, el('b', { class: 'n' }, String(w[0])), el('b', { style: 'font-size:var(--fs-3)' }, w[1])),
+      el('span', { class: 'chips2' }, ibtn('Previous reason', 'prev', { class: 'ib sm', onclick: () => step(-1) }), el('span', { class: 'mono dim', style: 'font-size:var(--fs-1)' }, w[0] + ' of ' + WHYS.length),
+        ibtn('Next reason', 'next', { class: 'ib sm', onclick: () => step(1) }), ibtn('Close', 'x', { class: 'ib sm', onclick: () => toggleWhy() }))),
+    el('div', { class: 'dim', style: 'font-size:var(--fs-3);line-height:1.45' }, w[2]));
+  S.whyWrap = el('div', { class: 'c3 c3e c3pop', 'data-shell': 'why' }, aside);
+  document.body.appendChild(S.whyWrap);
+}
+function toggleWhy() {
+  S.why = !S.why; S.whyN = 1;
+  if (S.why) showTab('brief', true);
+  S.panes.brief.classList.toggle('why-on', S.why);
+  whyPanel(); whyMark();
+}
+function toggleIncident() {
+  S.incident = !S.incident;
+  S.sub.textContent = dateLine();
+  if (S.refreshNeeds) S.refreshNeeds();
+}
+function togglePreview() {
+  S.preview = !S.preview;
+  const old = document.querySelector('[data-shell="preview"]'); if (old) old.remove();
+  if (!S.preview) return;
+  const close = () => { S.preview = false; const o = document.querySelector('[data-shell="preview"]'); if (o) o.remove(); S.moreBtn.focus(); };
+  const frame = el('iframe', { title: 'Phone preview, 390 by 844', src: location.href, style: 'width:390px;height:min(844px,calc(100vh - 80px));border:1px solid var(--border);border-radius:28px;background:var(--background);box-shadow:var(--sh3)' });
+  const wrap = el('div', { class: 'c3 c3e c3pop', 'data-shell': 'preview' }, el('div', { class: 'scrim', onclick: close }),
+    el('div', { class: 'c3pg-prev', role: 'dialog', 'aria-label': 'Phone preview' }, el('button', { type: 'button', class: 'ib sm', 'aria-label': 'Close the phone preview', title: 'Close (Esc)', onclick: close }, c3ic('x', 'sm')), frame));
+  wrap.addEventListener('keydown', (e) => { if (e.key === 'Escape') close(); });
+  document.body.appendChild(wrap);
+  wrap.querySelector('button').focus();
+}
+
+/* the Agent playbooks sheet (console3.html playbookSheet, line 1762). The list comes from the briefing's sample content only; a real workspace defines none that this page can read,
+ * so it says so. Changing a mode or adding one has no route here, so those controls are drawn and disabled. */
+function openPlaybooks() {
+  const pbs = registry('playbooks') || [];
+  const why = 'No route changes a playbook from this page.';
+  const MODES = [['shadow', 'eye', 'Shadow'], ['approve', 'check', 'Approve'], ['auto', 'bolt', 'Auto']];
+  const body = [el('div', { class: 'legend' }, el('span', null, c3ic('eye', 'sm'), ' shadow: proposes, nothing reaches your queue'), el('span', null, c3ic('check', 'sm'), ' approve: you press Keep'), el('span', null, c3ic('bolt', 'sm'), ' auto: acts, logs, you can undo')),
+    ...(pbs.length ? pbs.map((b) => el('div', { class: 'card', style: 'gap:6px' },
+      el('div', { class: 'chips2', style: 'justify-content:space-between' }, el('b', null, b.n), b.out ? el('span', { class: 'chip2', title: 'An outward step stays with you' }, c3ic('lock', 'sm'), 'outward step is yours') : null),
+      el('div', { class: 'dim', style: 'font-size:var(--fs-3)' }, c3ic('clock', 'sm'), ' ' + b.trig), el('div', { style: 'font-size:var(--fs-3)' }, c3ic('spark', 'sm'), ' ' + b.first),
+      el('div', { class: 'dim', style: 'font-size:var(--fs-2)' }, c3ic('shield', 'sm'), ' ' + b.gate),
+      el('div', { class: 'chips2', style: 'justify-content:space-between' }, el('div', { class: 'seg', role: 'group', 'aria-label': 'Mode' }, ...MODES.map((m) => el('button', { type: 'button', 'aria-pressed': String(b.mode === m[0]), disabled: true, title: why }, c3ic(m[1], 'sm'), m[2]))),
+        el('span', { class: 'dim mono', style: 'font-size:var(--fs-1)' }, b.asis + '% used as is · ' + b.runs + ' runs'))))
+      : [el('div', { class: 'fold' }, c3ic('info', 'sm'), 'No playbook is defined that this page can read.')]),
+    el('div', { class: 'card' }, el('h3', null, c3ic('plus'), 'Describe a new playbook'), el('div', { class: 'form' }, el('input', { type: 'text', placeholder: 'Name, for example: Prepare the quarterly review', 'aria-label': 'Name', disabled: true, title: why })),
+      el('div', { class: 'chips2' }, el('button', { type: 'button', class: 'ib pri', style: 'width:auto;padding:0 12px;gap:6px', disabled: true, title: why }, c3ic('plus', 'sm'), 'Add playbook'))),
+    el('div', { class: 'fold' }, c3ic('info', 'sm'), 'Auto needs 10 runs and 90% used as is. A step that sends anything outside stays on approve.')];
+  openSheet({ title: 'Agent playbooks', icon: 'spark', wide: true, scrim: false, body });
+}
+
+/* ── tabs: the mockup's nav.tabs with the sliding indicator ── */
+function tabBar() {
+  S.tabBtns = {};
+  const nav = el('nav', { class: 'c3tabs', role: 'tablist', 'aria-label': 'Places' });
+  S.workBdg = el('span', { class: 'bdg', hidden: true, 'data-c3pg': 'work-count' }, '0');
+  for (const [id, label, icon] of TABS) {
+    const b = el('button', { type: 'button', role: 'tab', id: 'c3tab-' + id, 'aria-controls': 'c3pane-' + id, 'data-c3-tab': id, onclick: () => showTab(id, true) }, c3ic(icon), label, id === 'work' ? S.workBdg : null);
+    S.tabBtns[id] = b;
+    nav.append(b);
+  }
+  S.ind = el('span', { class: 'ind', 'aria-hidden': 'true' });
+  nav.append(S.ind);
+  nav.addEventListener('keydown', (e) => {
+    const ids = TABS.map((t) => t[0]); const i = ids.indexOf(S.tab);
+    const to = e.key === 'ArrowRight' ? ids[(i + 1) % ids.length] : e.key === 'ArrowLeft' ? ids[(i + ids.length - 1) % ids.length] : e.key === 'Home' ? ids[0] : e.key === 'End' ? ids[ids.length - 1] : null;
+    if (to) { e.preventDefault(); showTab(to, true); S.tabBtns[to].focus(); }
+  });
+  S.tabNav = nav;
+  return nav;
+}
+function moveInd() {
+  const b = S.tabBtns[S.tab]; if (!b || !S.ind) return;
+  S.ind.style.width = b.offsetWidth + 'px'; S.ind.style.transform = 'translateX(' + b.offsetLeft + 'px)';
+}
+
+/* ── the Briefing tab: three columns ── */
+/* "Needs you": one row per need (c3-brief.js needRow). A press on a row opens its case file in place; a swipe, or the keys e and n, acts; j and k move. The rows
+ * are built again only when the briefing's needs changed, so a re-read does not close an open row or a running agent. On an incident day (console3.html line 1467)
+ * only the needs with a hard deadline stay. */
+function needsList() {
+  const count = el('span', { class: 'bdg g' }, '0');
+  const quick = el('span', { class: 'chips2 dim mono', style: 'font-size:var(--fs-2)' });
+  const list = el('ul', { class: 'list', role: 'list' });
+  const extra = el('div');
+  const alertHost = el('div');
+  const box = el('section', { class: 'card sect', 'data-c3pg': 'needs', 'aria-label': 'Needs you' },
+    el('div', { class: 'sh2' }, el('h2', null, c3ic('inbox', 'sm'), 'Needs you ', count)), alertHost, list, extra);
+  let sig = ''; let last = null;
+  const recount = () => {
+    const n = box.querySelectorAll('.nrow[data-needs-row]').length;
+    count.textContent = String(n);
+    if (!n && !list.querySelector('.fold')) list.replaceChildren(el('li', { class: 'fold' }, c3ic('check', 'sm'), 'Nothing needs you.'));
+  };
+  const ctx = { changed: recount };
+  const fill = (b) => {
+    last = b;
+    const inc = !!S.incident;
+    const needs = b && Array.isArray(b.needs) && b.needs.length ? b.needs.filter((n) => !BX.gone[n.key] && (!inc || n.hard)) : null;
+    const key = needs ? needs.map((n) => n.key + n.headline) : ((b && b.cards) || []).map((c) => (c.key || '') + c.headline);
+    if (needs && S.pinNeed) { const at = needs.findIndex((n) => n.key === S.pinNeed); if (at > 0) needs.unshift(...needs.splice(at, 1)); }   // a need the banner or the bell named rides to the top of the list: shown, not folded
+    const g = JSON.stringify([key, inc, !!(b && b.kept_out), S.pinNeed || '']);
+    if (g === sig) return; sig = g;
+    alertHost.replaceChildren(...(inc ? [el('div', { class: 'incident', role: 'status', 'data-c3pg': 'incident' }, c3ic('alert', 'lg'), el('div', null, el('b', null, 'Card payments failing since 07:40'), el('div', { class: 'dim', style: 'font-size:var(--fs-3)' }, '12% of checkouts. Sam on call. Only deadlines shown.')))] : []));
+    if (needs) {
+      if (!quick.isConnected) box.querySelector('.sh2').append(quick);
+      quick.textContent = ''; quick.append(c3ic('bolt', 'sm'), needs.filter((n) => n.quick).length + ' under 2 min');
+      list.replaceChildren(...needs.slice(0, 5).map((n, i) => needRow(n, i, ctx)));   // the mockup shows five and folds the rest "below the line"
+      extra.replaceChildren(...(inc ? [] : belowLine(needs.slice(5), (n, i) => needRow(n, i + 5, ctx), b.kept_out)));
+      recount();
+      return;
+    }
+    const cards = ((b && b.cards) || []).map(cardView);
+    quick.remove();
+    list.replaceChildren(...(cards.length ? cards.map((v, i) => {
+      const T = TAG_STYLE[v.tag] || TAG_STYLE['Just in'];
+      return needRow({ key: v.key || String(i), headline: v.headline, kind: v.tag, icon: T.icon, color: T.color, time: v.deadline && v.deadline.text ? v.deadline.text : null, src: v.tag, view: v }, i, ctx);
+    }) : [el('li', { class: 'fold' }, c3ic('check', 'sm'), 'Nothing needs you.')]));
+    extra.replaceChildren();
+    count.textContent = String(cards.length);
+  };
+  S.refreshNeeds = () => { sig = ''; if (last) fill(last); };
+  S.needsFill = fill;
+  onBriefing((b) => { S.brief = b; fill(b); });
+  loadBriefing();
+  return box;
+}
+
+/* portfolio pulse: the Calendar's own gantt rows (GET /api/calendar-views, quarter) as one status bar and a row per initiative */
+const PST = { 'on time': ['ok', 'On time', 'var(--success)'], 'at risk': ['warn', 'At risk', 'var(--warning)'], delayed: ['bad', 'Delayed', 'var(--destructive)'], overdue: ['bad', 'Overdue', 'var(--destructive)'], 'no plan': ['', 'No plan', 'var(--muted-foreground)'] };
+
+function pulse() {
+  const body = el('div', null, el('p', { class: 'dim mono', style: 'font-size:var(--fs-2)' }, 'Reading the initiatives.'));
+  const box = el('section', { class: 'card', 'data-c3pg': 'pulse', style: 'gap:8px' },
+    el('div', { class: 'chips2', style: 'justify-content:space-between' },
+      el('h3', null, c3ic('init', 'sm'), 'Portfolio pulse'), el('span', { class: 'mono dim', style: 'font-size:var(--fs-1)' }, 'promised vs forecast')), body);
+  const draw = (rows, err) => {
+    if (err) { body.replaceChildren(el('p', { class: 'dim mono', style: 'font-size:var(--fs-2)', role: 'status' }, 'The initiatives could not be read: ' + err)); return; }
+    if (!rows.length) { body.replaceChildren(el('div', { class: 'fold' }, c3ic('moon', 'sm'), 'No initiative has a promised date yet, so there is nothing to compare with the forecast.')); return; }
+    if (rows.some((g) => g.pulse)) { body.replaceChildren(...mockPulse(rows, S.today, () => showTab('init', true))); return; }   // demo: the mockup's pulse (its own colours, reasons and mini timelines)
+    const noPlan = rows.filter((g) => g.status === 'no plan').length;
+    rows = rows.filter((g) => g.status !== 'no plan');
+    if (!rows.length) { body.replaceChildren(el('div', { class: 'fold' }, c3ic('moon', 'sm'), 'No initiative has a promised date yet, so there is nothing to compare with the forecast.'), noPlan ? el('p', { class: 'dim mono', style: 'font-size:var(--fs-2)' }, noPlan + ' initiatives have no plan date.') : null); return; }
+    const by = {};
+    rows.forEach((g) => { const k = PST[g.status] ? g.status : 'no plan'; by[k] = (by[k] || 0) + 1; });
+    const bar = el('div', { class: 'pbs', role: 'group', 'aria-label': 'Status of initiatives' },
+      ...Object.keys(by).map((k) => el('span', { style: 'flex:' + by[k] + ';height:10px;border-radius:5px;background:' + PST[k][2], title: by[k] + ' ' + PST[k][1].toLowerCase(), 'aria-label': by[k] + ' ' + PST[k][1].toLowerCase() })));
+    const end = (o) => (o && (o.end || o.start)) || null;
+    const rowEl = (g) => {
+      const k = PST[g.status] ? g.status : 'no plan'; const f = end(g.forecast); const p = g.promised || null;
+      const why = p ? 'Forecast ' + (f || 'not set') + ' vs promised ' + p : 'No promised date' + (f ? '; forecast ' + f : '');
+      return el('button', { type: 'button', class: 'prow', 'data-c3pg-prow': g.id, 'data-a': 'goinit', 'aria-label': 'Open the initiatives: ' + (g.title || g.id), onclick: () => showTab('init', true) },
+        el('span', { class: 'dotc ' + PST[k][0] }),
+        el('span', { style: 'min-width:0' }, el('b', { style: 'font-size:var(--fs-3)' }, g.title || g.id), el('div', { class: 'dim', style: 'font-size:var(--fs-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis' }, why)),
+        el('span', { class: 'mono', style: 'font-size:var(--fs-2);color:' + PST[k][2] }, PST[k][1] + (g.slip_days > 0 ? ' +' + g.slip_days + ' d' : '')));
+    };
+    body.replaceChildren(bar, el('div', null, ...rows.slice(0, 8).map(rowEl)), rows.length > 8 ? el('div', { class: 'dim mono', style: 'font-size:var(--fs-2)' }, '+' + (rows.length - 8) + ' more in the Calendar tab') : null, noPlan ? el('div', { class: 'dim mono', style: 'font-size:var(--fs-2)' }, noPlan + ' more have no plan date.') : null);
+  };
+  readQuarter().then((j) => {
+    if (!j || j.ok === false) draw([], (j && j.error) || 'unreadable'); else { S.today = j.today || ''; draw(j.gantt || []); }
+  }).catch((e) => draw([], String((e && e.message) || e)));
+  return box;
+}
+
+function briefTab(pane) {
+  const left = el('div', { class: 'bcol l' }); const mid = el('div', { class: 'bcol r' });
+  const deckHost = el('div', { 'data-c3pg': 'deck-host' }); const calHost = el('div', { class: 'c3pg-midcal', 'data-c3pg': 'cal-host' });
+  const rvHost = el('div', { 'data-c3pg': 'review-host' }); const hdHost = el('div', { 'data-c3pg': 'handled-host' }); const trHost = el('div', { 'data-c3pg': 'trust-host' }); const ftHost = el('div'); const stHost = el('div', { 'data-c3pg': 'stop-host' }); S.stopHost = stHost; S.needsBox = null;
+  S.deckHost = deckHost;
+  let sig = '';
+  onBriefing((b) => {   // below "Needs you": only what the briefing carries (the demo's); the real route sends none of these. Built again only when it changed: an open draft stays open.
+    const g = JSON.stringify([b && b.review, b && b.handled, b && b.trust, b && b.foot, b && b.stop]);
+    if (g === sig) return; sig = g;
+    rvHost.replaceChildren(...(b && b.review ? [reviewSection(b.review)] : [])); hdHost.replaceChildren(...(b && b.handled ? [handledRow(b.handled)] : []));
+    stHost.replaceChildren(...[stopCard(b && b.stop)].filter(Boolean)); trHost.replaceChildren(...(b && b.trust ? [trustCard(b.trust)] : [])); ftHost.replaceChildren(...(b && b.foot ? [footLine(b.foot)] : []));
+    if (S.why) whyMark();
+  });
+  S.needsBox = needsList(); left.append(deckHost, S.needsBox, rvHost, hdHost, stHost);
+  mid.append(calHost, pulse(), trHost);
+  pane.append(el('div', { class: 'brief' }, el('div', { class: 'bcols' }, left, mid), ftHost));
+  mountBriefing(deckHost, { noTicker: true, onLens: lensChanged });
+  mountCalendarViews(calHost, { view: 'day', scope: sc('brief'), ribbon: true });
+}
+
+/* The day-part switch moves the time lens as the mockup does (setTod, line 2209): Reflect shows the week, any other part goes back to today if Reflect had moved it. */
+function ribbonGo(label) {
+  const b = [...S.panes.brief.querySelectorAll('[data-cv="ribbon"] .seg button')].find((x) => x.textContent.trim() === label);
+  if (b) b.click();
+}
+function lensChanged(l) {
+  const rf = l === 'Reflect'; if (S.stopHost) S.stopHost.hidden = !rf; setNeedsTitle(S.needsBox, rf);   // Reflect: "Carries over" and "What I could stop" (the mockup's vBrief, line 1470)
+  const cur = S.panes && S.panes.brief ? S.panes.brief.querySelector('[data-cv="ribbon"] .seg [aria-pressed="true"]') : null;
+  const on = cur ? cur.textContent.trim() : '';
+  if (l === 'Reflect' && on === 'Today') { S.rAuto = true; ribbonGo('Week'); }
+  else if (l !== 'Reflect' && S.rAuto) { S.rAuto = false; ribbonGo('Today'); }
+}
+
+/* ── global: where a notification goes, the person sheet, the palette and the keys ── */
+/* A bell entry or the banner goes to its target (console3.html nopen, line 2530): the card to turn over, the row to open, or the sheet to show. */
+function goTarget(t) {
+  showTab('brief', true);
+  if (!t) return;
+  if (t.card !== undefined && t.card !== null) { showCard(S.deckHost, t.card); return; }
+  if (t.need) {
+    let row = S.panes.brief.querySelector('[data-needs-row="' + String(t.need).replace(/"/g, '') + '"]');
+    if (row && row.closest('.xp:not(.open)') && S.refreshNeeds) { S.pinNeed = String(t.need); S.refreshNeeds(); row = S.panes.brief.querySelector('[data-needs-row="' + String(t.need).replace(/"/g, '') + '"]') || row; }   // below the line: the row joins the visible rows, the fold stays shut
+    if (row) {
+      for (let f = row.closest('.xp'); f; f = f.parentElement && f.parentElement.closest('.xp')) { const fb = f.previousElementSibling; if (!f.classList.contains('open') && fb && fb.matches('button[aria-expanded]')) fb.click(); }   // a row below the line sits in a closed fold: open the fold first, as the mockup does
+      const api = rowApi.get(row); if (api) api.open(); row.scrollIntoView({ block: 'center', behavior: matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth' }); try { row.focus({ preventScroll: true }); } catch { /* gone */ } }
+    return;
+  }
+  if (t.sheet === 'review' && S.brief && S.brief.review) openSheet({ title: 'Review', icon: 'spark', wide: true, body: reviewSection(S.brief.review) });
+}
+
+/* the person sheet (console3.html sheet, line 1927) */
+const personNotes = {};
+function openPerson(k) {
+  const p = (registry('people') || {})[k]; if (!p) return;
+  const row = (x) => el('div', { class: 'chips2', style: 'justify-content:space-between' }, el('span', null, x.t, el('div', { class: 'dim', style: 'font-size:var(--fs-2)' }, x.due + ' · ' + x.init)), el('span', { class: 'st ' + (x.overdue ? 'bad' : 'warn') }, c3ic(x.overdue ? 'alert' : 'clock', 'sm')));
+  const h3 = (icon, t) => el('h3', { class: 'mono dim', style: 'font-size:var(--fs-1);margin:0' }, c3ic(icon, 'sm'), ' ' + t);
+  const note = el('textarea', { id: 'pn', 'aria-label': 'Private notes', style: 'width:100%;min-height:70px;margin-top:6px', placeholder: 'Only you write here', oninput: () => { personNotes[k] = note.value; } });
+  note.value = personNotes[k] || '';
+  const body = [el('div', { class: 'chips2 dim mono', style: 'font-size:var(--fs-2)' }, c3ic('clock', 'sm'), 'last spoke ' + p.last),
+    el('div', { class: 'chips2 dim mono', style: 'font-size:var(--fs-2)' }, c3ic('out', 'sm'), 'told: ' + p.told),
+    h3('out', 'YOU OWE'), ...((p.owe || []).length ? p.owe.map(row) : [el('span', { class: 'dim' }, 'Nothing')]),
+    h3('wait', 'YOU WAIT ON'), ...((p.theirs || []).length ? p.theirs.map(row) : [el('span', { class: 'dim' }, 'Nothing')]),
+    ...((p.kept || []).length ? [h3('check', 'KEPT'), ...p.kept.map((x) => el('div', { class: 'dim', style: 'font-size:var(--fs-3)' }, x))] : []),
+    el('details', null, el('summary', { class: 'chips2 dim', style: 'cursor:pointer;font-size:var(--fs-3);min-height:44px' }, c3ic('lock', 'sm'), 'private notes'), note,
+      el('div', { class: 'dim mono', style: 'font-size:var(--fs-1)' }, 'local only · never read into a draft, summary or session'))];
+  openSheet({ title: p.n + ' · ' + p.role + ' · ' + p.tier, icon: 'user', scrim: false, body });
+}
+
+/* the palette (console3.html palette, line 1944): one input, up to nine results across places, people, documents and sessions */
+function paletteItems() {
+  const items = [{ label: 'Agent playbooks', kind: 'place', icon: 'spark', run: () => openPlaybooks() },
+    ...TABS.map(([id, label, icon]) => ({ label, kind: 'place', icon, run: () => showTab(id, true) }))];
+  for (const k of Object.keys(registry('people') || {})) { const p = registry('people')[k]; items.push({ label: p.n + ' · ' + p.role, kind: 'person', icon: 'user', run: () => openPerson(k) }); }
+  for (const d of registry('docs') || []) items.push({ label: d.n, kind: 'document', icon: d.icon || 'doc', run: () => { showTab('init', true); const b = S.initSeg && S.initSeg.querySelector('[data-c3-init="documents"]'); if (b) b.click(); } });
+  for (const x of S.palSessions || []) items.push({ label: (x.branch || x.tree || '') ? ((x.branch || String(x.tree).split('/').pop()) + ' · ' + x.name) : x.name, kind: 'session', icon: 'branch', run: () => openSession(x) });
+  return items;
+}
+function openSession(x) {
+  showTab('brief', true); S.dockOpen = true; syncDock();
+  const b = [...(S.dockEl ? S.dockEl.querySelectorAll('.sr') : [])].find((n) => n.textContent.includes(x.name));
+  if (b) b.click(); else try { window.dispatchEvent(new CustomEvent('pmos:open-session', { detail: { id: x.id } })); } catch { /* no event */ }
+}
+function openPalette() {
+  if (S.pal) return;
+  closeMore();
+  const opener = document.activeElement && document.activeElement !== document.body ? document.activeElement : S.root.querySelector('[data-c3pg="search"]');
+  const input = el('input', { type: 'text', id: 'pq', placeholder: 'Go to a place, person, document or session', 'aria-label': 'Search', autocomplete: 'off', role: 'combobox', 'aria-expanded': 'true', 'aria-controls': 'pq-list', 'aria-autocomplete': 'list' });
+  const ul = el('ul', { class: 'list', id: 'pq-list', role: 'listbox', 'aria-label': 'Results' });
+  let at = 0; let list = [];
+  const pick = (it) => { closePalette(false); it.run(); };
+  const draw = () => {
+    list = filterPalette(paletteItems(), input.value);
+    at = Math.max(0, Math.min(at, list.length - 1));
+    ul.replaceChildren(...(list.length ? list.map((it, i) => el('li', null, el('button', { type: 'button', role: 'option', 'aria-selected': String(i === at), 'data-kind': it.kind, onclick: () => pick(it) }, c3ic(it.icon), it.label))) : [el('li', { class: 'dim', style: 'padding:10px 14px' }, 'Nothing matches.')]));
+  };
+  input.addEventListener('input', () => { at = 0; draw(); });
+  input.addEventListener('keydown', (e) => {
+    if (e.key === 'ArrowDown') { e.preventDefault(); at = Math.min(list.length - 1, at + 1); draw(); }
+    else if (e.key === 'ArrowUp') { e.preventDefault(); at = Math.max(0, at - 1); draw(); }
+    else if (e.key === 'Enter' && list[at]) { e.preventDefault(); pick(list[at]); }
+  });
+  const wrap = el('div', { class: 'c3 c3e c3pop', 'data-shell': 'palette' },
+    el('div', { class: 'pal', onclick: (e) => { if (e.target === e.currentTarget) closePalette(true); } }, el('div', { role: 'dialog', 'aria-modal': 'true', 'aria-label': 'Search' }, input, ul)));
+  document.body.appendChild(wrap);
+  S.pal = { wrap, opener };
+  draw(); input.focus();
+  /* sessions are read once per opening: GET /api/sessions */
+  pmGet('/api/sessions').then((j) => { if (S.pal && S.pal.wrap === wrap && j && Array.isArray(j.sessions)) { S.palSessions = j.sessions.filter((x) => !x.automatic); draw(); } }).catch(() => { /* none */ });
+}
+function closePalette(back) {
+  if (!S.pal) return;
+  const { wrap, opener } = S.pal; S.pal = null; wrap.remove();
+  if (back && opener && opener.isConnected && opener.focus) { try { opener.focus({ preventScroll: true }); } catch { /* gone */ } }
+}
+
+/* The keys the mockup's script binds (console3.html 2191 to 2203 and 2460 to 2468), on the Briefing: j and k move the row focus, e and n act on a need, a and r on a draft,
+ * + and - move the time lens, Esc turns the open card back; everywhere: Ctrl or Cmd with J folds the dock, with K opens the search. "/" opens the search too (the mockup
+ * does not bind it; the PM asked for it). One handler on the document, in the capture phase, so it runs before a card or a calendar sees the key. */
+const typing = (n) => !!(n && n.matches && n.matches('input,textarea,select,[contenteditable="true"]'));
+const sheetOpen = () => !!document.querySelector('[data-shell="sheet"],[data-shell="preview"]');
+function onKey(e) {
+  const ae = document.activeElement;
+  if ((e.metaKey || e.ctrlKey) && !e.altKey) {
+    if (e.key === 'j' || e.key === 'J') { e.preventDefault(); e.stopPropagation(); if (!e.repeat) { S.dockOpen = !S.dockOpen; syncDock(); } }   // stopPropagation: the dock has its own Ctrl J handler on the bubble phase, and two toggles cancel out
+    else if (e.key === 'k' || e.key === 'K') { e.preventDefault(); if (S.pal) closePalette(true); else openPalette(); }
+    return;
+  }
+  if (e.altKey) return;
+  if (S.pal) { if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); closePalette(true); } return; }
+  if (e.key === 'Escape' && S.tab === 'brief' && !S.menu && !sheetOpen() && S.deckHost && flipBack(S.deckHost)) { e.stopPropagation(); return; }
+  if (typing(ae) || sheetOpen()) return;
+  if (e.key === '/' && !e.shiftKey) { e.preventDefault(); openPalette(); return; }
+  if (S.tab !== 'brief') return;
+  const rows = [...S.panes.brief.querySelectorAll('[data-row]')].filter((r) => r.offsetParent !== null && getComputedStyle(r).visibility !== 'hidden');
+  const cur = ae && ae.closest ? ae.closest('[data-row][data-id]') : null;
+  if (e.key === 'j' || e.key === 'k') {
+    e.preventDefault();
+    const ni = rowStep(rows.length, rows.indexOf(cur), e.key === 'j' ? 1 : -1);
+    if (rows[ni]) rows[ni].focus();
+    return;
+  }
+  if ('+=-_'.includes(e.key) && e.key.length === 1) {
+    const b = S.panes.brief.querySelector('[data-cv="ribbon"] [aria-label^="Zoom ' + (e.key === '+' || e.key === '=' ? 'in' : 'out') + '"]');
+    e.stopPropagation(); if (b && !b.disabled) b.click();
+    return;
+  }
+  if (cur && e.key.length === 1 && 'enar'.includes(e.key)) {
+    e.stopPropagation(); e.preventDefault();
+    const api = rowApi.get(cur); const draft = cur.classList.contains('drow');
+    if (api && !draft && (e.key === 'e' || e.key === 'n')) (e.key === 'e' ? api.right : api.left)();
+    else if (api && draft && (e.key === 'a' || e.key === 'r')) (e.key === 'a' ? api.right : api.left)();
+    else toast(draft ? 'Drafts: a approves, r sends back' : 'Items: e done, n later');
+  }
+}
+
+/* ── the dock: the mockup's repository, branch and session tree (c3-dock.js) ── */
+function dock() {
+  S.dock = createDock({
+    setOpen: (on) => { S.dockOpen = !!on; syncDock(); },
+    onWs: (id) => { const u = new URL(location.href); u.searchParams.set('ws', id); location.assign(u.toString()); },
+    /* the needs-you badge on the agent button: runs that ask, hold a permission or need the terminal (not the running ones) */
+    onCount: (live, need) => { S.termBdg.textContent = String(need); S.termBdg.hidden = need === 0; import('./c3-terminal-icons.js').then((m) => { const t = m.TIPS.agentHeader(need); S.termBtn.title = t; S.termBtn.setAttribute('aria-label', t); }); },   // the badge counts runs that need you, never running ones
+  });
+  S.dockEl = S.dock.side; S.rail = S.dock.rail;
+  window.addEventListener('pmos:open-session', () => location.assign('/'));
+  return [S.dock.side, S.dock.rail];
+}
+/* The mockup opens the dock on the Briefing and folds it to a rail on the other tabs (console3.html line 2017). */
+function syncDock() {
+  S.dockEl.hidden = !S.dockOpen;
+  S.rail.hidden = S.dockOpen || !S.wide;
+}
+
+/* ── the other tabs ── */
+function initTab(pane) {
+  S.initSeg = el('div', { class: 'seg', role: 'group', 'aria-label': 'Initiatives views', 'data-c3pg': 'init-switch', style: 'overflow-x:auto;max-width:100%' });
+  S.initHosts = {};
+  const ws = () => S.workspaces.find((w) => w.id === S.ws) || {};
+  const reload = () => { S.initRows = null; S.mounted = Object.fromEntries(Object.entries(S.mounted).filter(([k]) => !k.startsWith('init-'))); loadInitRows().then(() => showInit(S.init)); };
+  const add = newInitLine({ get repo() { return ws().root || null; }, ws: S.ws, get rows() { return (S.initRows && S.initRows.rows) || []; }, onAdded: reload });
+  const bar = el('div', { class: 'calbar' }, S.initSeg);
+  const body = el('div', { class: 'c3pg-initbody' });
+  for (const [id] of INITS) { S.initHosts[id] = el('div', { 'data-in-host': id, hidden: true }); body.append(S.initHosts[id]); }
+  pane.append(add, bar, body);
+  S.initNote = el('p', { class: 'dim mono', style: 'font-size:var(--fs-2)', role: 'status', 'data-c3pg': 'init-note' }, 'Reading the repository');
+  body.prepend(S.initNote);
+  drawInitSwitch();
+  loadInitRows().then(() => { showInit(S.init); loadBadges(); });
+}
+/* The counts on the sub-view buttons: each view's own `badge(ctx)` (a number, or null when it cannot say). */
+function loadBadges() {
+  const ws = S.workspaces.find((w) => w.id === S.ws) || {};
+  const ctx = { repo: ws.root || null, ws: S.ws, rows: (S.initRows && S.initRows.rows) || [] };
+  S.badges = S.badges || {};
+  for (const [id, fn] of Object.entries(BADGES)) Promise.resolve().then(() => fn(ctx)).then((n) => { S.badges[id] = Number(n) || 0; drawInitSwitch(); }, () => { /* no count */ });
+}
+function drawInitSwitch() {
+  S.initSeg.replaceChildren(...INITS.map(([id, label, mount, icon]) => {
+    const n = S.badges && S.badges[id];
+    return el('button', { type: 'button', 'aria-pressed': String(S.init === id), 'data-c3-init': id, onclick: () => showInit(id) }, c3ic(icon, 'sm'), label, n ? [' ', el('span', { class: 'bdg', 'data-c3-init-badge': id }, String(n))] : null);
+  }));
+}
+/* The roadmap read answers { pending } while the repository is still being read. Ask again until it has rows, and say so meanwhile. */
+async function loadInitRows() {
+  for (let n = 0; n < 40; n++) {
+    const r = await pmGet('/api/initiatives?ws=' + encodeURIComponent(S.ws) + '&view=roadmap');
+    if (r && r.horizons) {
+      S.initRows = { rows: [...(r.horizons.now || []), ...(r.horizons.next || []), ...(r.horizons.later || []), ...(r.dormant || [])], sig: r.sig || null, strategy: r.strategy || null };
+      S.initNote.hidden = true;
+      return;
+    }
+    if (!(r && r.pending)) {
+      S.initRows = { rows: [], sig: null };
+      S.initNote.hidden = false;
+      S.initNote.textContent = 'The initiatives could not be read' + (r && r.error ? ': ' + r.error : '.');
+      return;
+    }
+    S.initNote.hidden = false; S.initNote.textContent = 'Reading the repository';
+    await new Promise((res) => setTimeout(res, 4000));
+  }
+  S.initRows = { rows: [], sig: null };
+  S.initNote.textContent = 'The repository is taking long to read. Reload in a moment for the initiatives.';
+}
+function showInit(id) {
+  S.init = id; drawInitSwitch();
+  const ws = S.workspaces.find((w) => w.id === S.ws) || {};
+  for (const [k, , mount] of INITS) {
+    if (!mount) continue;
+    S.initHosts[k].hidden = k !== id;
+    if (k === id && !S.mounted['init-' + k] && S.initRows) {
+      S.mounted['init-' + k] = true;
+      const ctx = { ...initiativesViewCtx({ repo: ws.root || null, ws: S.ws, rows: S.initRows.rows, sig: S.initRows.sig, openInitiative: () => location.assign('/'), setState: () => {} }), strategy: S.initRows.strategy, plan: planNode(sc(OWN.has(k) ? 'init-' + k : 'init')), links: crossLinks((t) => showTab(t, true)) };
+      if (k === 'lifecycle' || OWN.has(k)) mount(S.initHosts[k], Object.freeze(ctx));
+      else { const view = el('div'); S.initHosts[k].replaceChildren(ctx.plan, view); mount(view, Object.freeze({ ...ctx, plan: null })); }
+    }
+  }
+}
+function repTab(pane) {
+  const fam = el('div', { 'data-c3pg': 'families-host' }); const out = el('div', { class: 'brief', 'data-c3pg': 'outbox-host', style: 'margin-top:var(--sp-4)' });
+  pane.append(fam, out);
+  pmGet('/api/report-families/facts?ws=' + encodeURIComponent(S.ws)).then((j) => {
+    mountReportFamilies(fam, { reportFacts: j && j.ok ? j.facts : {}, plan: planNode(sc('rep')), portfolio: portfolioCard() });
+    mountOutbox(out, {});
+    /* The mockup's Reports draw the outbox's drafts under Communications only (the Messages queue); the other families have no outbox. */
+    const sync = () => { out.hidden = !fam.querySelector('[data-family="communications"][aria-pressed="true"]'); };
+    sync(); new MutationObserver(sync).observe(fam, { subtree: true, attributes: true, attributeFilter: ['aria-pressed'] });
+  });
+}
+
+const BUILD = { brief: briefTab, cal: (p) => mountCalendarViews(p, { view: 'day', plan: planNode(sc('cal')), due: dueCard(), scope: sc('cal') }), work: (p) => { const plan = planNode(sc('work') && 'work:triage'); mountPmWork(p, { plan, onLens: (l) => { if (DEMO) setPlanScope(plan, 'work:' + l); } }); }, init: initTab, rep: repTab };
+
+function showTab(id, push) {
+  if (!BUILD[id]) id = 'brief';
+  S.tab = id;
+  for (const [t, label, icon] of TABS) {
+    const on = t === id;
+    S.tabBtns[t].setAttribute('aria-selected', String(on)); S.tabBtns[t].tabIndex = on ? 0 : -1;
+    S.panes[t].hidden = !on;
+    if (on) { S.ttl.replaceChildren(c3ic(icon, 'lg'), label); document.title = label + ' · PMOS console'; }
+  }
+  if (!S.mounted[id]) { S.mounted[id] = true; BUILD[id](S.panes[id]); }
+  S.root.dataset.tab = id;
+  S.dockOpen = S.wide && id === 'brief'; syncDock();
+  S.pageView.classList.remove('view'); void S.pageView.offsetWidth; S.pageView.classList.add('view');
+  moveInd();
+  if (push) { try { const u = new URL(location.href); u.searchParams.set('tab', id); history.replaceState(null, '', u); } catch { /* no history */ } }
+}
+
+async function workCount() {
+  const j = await pmGet('/api/pm-items').catch(() => null);
+  if (!j || !j.ok || !j.lists) return;
+  const n = (j.lists.triage || []).length + (S.demo ? 0 : (j.lists.today || []).length);   // the mockup's Work badge counts what is to triage
+  S.workBdg.textContent = String(n); S.workBdg.hidden = n === 0;
+}
+
+async function boot() {
+  const root = document.getElementById('c3-root');
+  S.root = root;
+  if (DEMO) { const m = await import('./c3-demo.js'); m.installDemo(); S.demoMod = m; if (window.__c3demoReady) await window.__c3demoReady; if (!S.ws) S.ws = m.DEMO_WS; root.setAttribute('data-c3-demo', '1'); }
+  withWs();
+  ensureC3Css();
+  c3Phone(root);
+  const t = q.get('theme') || store.get(THEME_KEY) || 'light';
+  setTheme(t);
+  try { S.workspaces = (await pmGet('/api/workspaces')).workspaces || []; } catch { S.workspaces = []; }
+  if (!S.ws || !S.workspaces.some((w) => w.id === S.ws)) S.ws = (S.workspaces[0] && S.workspaces[0].id) || S.ws;
+
+  S.tickHost = el('div', { class: 'c3pg-tick', 'data-c3pg': 'ticker-host' });
+  S.pageView = el('div', { class: 'view' });
+  for (const [id] of TABS) { S.panes[id] = el('div', { class: 'c3pg-pane', role: 'tabpanel', id: 'c3pane-' + id, 'aria-labelledby': 'c3tab-' + id, hidden: true, 'data-c3-pane': id }); S.pageView.append(S.panes[id]); }
+  const main = el('div', { class: 'c3main' }, header(), S.tickHost, tabBar(), S.pageView);
+  S.grid = el('div', { class: 'c3grid' }, main, ...dock());
+  root.replaceChildren(S.grid);
+
+  S.dock.setWorkspaces(S.workspaces, S.ws);
+  mountBell(S.bellHost, { go: (_, t) => goTarget(t) });
+  briefHooks.person = openPerson;
+  briefHooks.go = (g) => { const t = { goinit: 'init', gorep: 'rep', godeliver: 'rep', gowork: 'work', gocal: 'cal' }[g.action]; if (t) showTab(t, true); };
+  document.addEventListener('keydown', onKey, true);
+  mountTicker(S.tickHost, { onOpen: () => openBellList() });
+  import('./shell-recording.js').then((m) => m.mountRecording(S.tools)).catch(() => { /* the recorder is not available on this page */ });
+  S.narrow = matchMedia('(max-width:980px)');
+  S.narrow.addEventListener('change', () => { S.wide = !S.narrow.matches; S.dockOpen = S.wide && S.tab === 'brief'; syncDock(); });
+  S.wide = !S.narrow.matches;
+  showTab(q.get('tab') || 'brief', false);
+  new ResizeObserver(moveInd).observe(S.tabNav);
+  workCount(); S.dock.start();
+  setInterval(() => { S.sub.textContent = dateLine(); }, 30000);
+}
+
+boot().catch((e) => { const r = document.getElementById('c3-root'); if (r) r.textContent = 'The console could not start: ' + String((e && e.message) || e); });