create-pmos 0.134.0 → 0.136.0

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

@@ -3,7 +3,7 @@
  * file draws only the frame and composes the real views into it, each through its own mount function:
  *   Briefing    one column, the brief: the deck (mountBriefing), Today (c3-brief-today.js), Needs you (c3-brief-needs.js), Portfolio pulse (c3-brief-pulse.js)
  *               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).
+ *   Initiatives and Reports also carry 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.
@@ -11,27 +11,27 @@
  * 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 { row } from './primitives.js';
+import { row, button } from './primitives.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 { todaySection } from './c3-brief-today.js';
-import { needsSection } from './c3-brief-needs.js';
+import { needsSection, needsCount } from './c3-brief-needs.js';
 import { pulse } from './c3-brief-pulse.js';
-import { loadBriefPage } from './c3-brief-data.js';
+import { loadBriefPage, onBriefPage } from './c3-brief-data.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 { mountReports } from './c3-reports.js';
+import { mountReports, showReportsView } from './c3-reports.js';
 import { mountOutbox } from './outbox-panel.js';
 import { createDock } from './c3-dock.js';
 import { reviewSection, handledRow, trustCard, footLine, 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 { mountCalPopupTrigger } from './c3-calpop.js';
-import { planNode, setPlanScope, dueCard, crossLinks, newInitLine, portfolioCard } from './c3-plan.js';
+import { planNode, dueCard, crossLinks, newInitLine, portfolioCard } 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';
@@ -40,13 +40,16 @@ 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 { mountDaypart } from './c3-daypart.js';
+import { mountAmbient } from './c3-ambient.js';
 import { mountTicker } from './shell-ticker.js';
 import { mountBell, openBellList } from './shell-bell.js';
 import { onBriefing, loadBriefing } from './shell-ticker.js';
 import { registry, filterPalette, rowStep } from './briefing-model.js';
 import { freshnessLine } from './freshness-line.js';
+import { mountInitiatives } from './c3-initiatives.js';
+import { mountSettings, gearIcon, applyLook } from './c3-settings.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. */
+/* 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. Reports always sends its own (repTab). */
 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. */
@@ -74,12 +77,17 @@ function withWs() {
   };
 }
 
+/* t is light, dark or system (Settings, Appearance); system follows the computer and changes with it. */
+const darkQuery = typeof matchMedia === 'function' ? matchMedia('(prefers-color-scheme: dark)') : null;
 function setTheme(t) {
-  S.theme = t === 'dark' ? 'dark' : 'light';
+  S.themePref = t === 'dark' || t === 'system' ? t : 'light';
+  S.theme = S.themePref === 'system' ? (darkQuery && darkQuery.matches ? 'dark' : 'light') : S.themePref;
   document.documentElement.setAttribute('data-pm-page-theme', S.theme);
   S.root.setAttribute('data-pm-theme', S.theme);
-  store.set(THEME_KEY, S.theme);
+  store.set(THEME_KEY, S.themePref);
+  if (S.settings && S.settingsCtx) { S.settingsCtx.theme = S.theme; S.settingsCtx.themePref = S.themePref; }
 }
+if (darkQuery && darkQuery.addEventListener) darkQuery.addEventListener('change', () => { if (S.themePref === 'system' && S.root) setTheme('system'); });
 
 /* ── header: the mockup's .top (title, date line) and .tools (terminal, recording, bell, search, more) ── */
 const dateLine = () => {
@@ -94,9 +102,9 @@ 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)
+  /* the AGENT button (the bolt 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 = button({ variant: 'ghost', label: [ic('bolt', 'sm'), 'Sessions', S.termBdg], onClick: () => { import('./c3-terminal.js').then((m) => m.openTerminalPage()); },
+    attrs: { class: 'psess', title: 'Agent surfaces: sessions, results to accept, questions for you', 'aria-label': 'Agent surfaces: sessions, results to accept, questions for you', 'aria-haspopup': 'dialog', 'data-c3pg': 'agent-button' } });   // 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);
@@ -104,6 +112,9 @@ function header() {
   S.tools.append(S.bellHost);
   S.tools.append(ibtn('Search (Ctrl K)', 'search', { 'data-c3pg': 'search', 'aria-haspopup': 'dialog', onclick: () => openPalette() }));
   mountCalPopupTrigger(S.tools);   // the calendar button (before Search) and the key C (c3-calpop.js)
+  /* Settings is a page of its own, not a tab: the gear opens it, as do the More menu, the palette and ?tab=settings (c3-settings.js). */
+  S.gearBtn = ibtn('Settings', 'info', { 'data-c3pg': 'settings', onclick: () => showTab('settings', true) }); S.gearBtn.replaceChildren(gearIcon());
+  S.tools.append(S.gearBtn);
   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));
   /* workspace-data-freshness R9: how old the sources are, quiet when they are up to date (freshness-line.js) */
@@ -123,6 +134,7 @@ function toggleMore() {
     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')),
+    ((b) => { b.firstChild.replaceWith(gearIcon('sm')); return b; })(item('info', 'Settings', () => showTab('settings', true), false, { 'data-a': 'settings' })),
     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
@@ -226,9 +238,13 @@ function openPlaybooks() {
 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');
+  S.workBdg = el('span', { class: 'bdg', hidden: true, 'data-c3pg': 'work-count', title: 'Inbox to decide' }, '0');
+  S.briefBdg = el('span', { class: 'bdg', hidden: true, 'data-c3pg': 'brief-count', title: 'Needs you' }, '0');
+  S.initBdg = el('span', { class: 'bdg', hidden: true, 'data-c3pg': 'init-count', title: 'New asks to triage' }, '0');
+  const BDG = { brief: S.briefBdg, work: S.workBdg, init: S.initBdg };
   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);
+    if (BDG[id] && id !== 'work') b.append(BDG[id]);
     S.tabBtns[id] = b;
     nav.append(b);
   }
@@ -243,41 +259,47 @@ function tabBar() {
   return nav;
 }
 function moveInd() {
+  if (S.ind) S.ind.hidden = !S.tabBtns[S.tab];
   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: one column, the brief ──
- * In order: the headline deck, Today (c3-brief-today.js), Needs you (c3-brief-needs.js) and Portfolio pulse (c3-brief-pulse.js). The ribbon and the embedded calendar are not here:
- * the calendar is the Calendar tab. The rows below Needs you (drafts, handled, what to stop) and the data-trust card are the briefing's own, when it carries them (the demo's). */
+/* ── the Briefing tab: two columns, decisions and reads ──
+ * Left: the stance bar with the day-part switch and the headline deck (briefing-deck.js), then Needs you (c3-brief-needs.js).
+ * Right: Today (c3-brief-today.js) and Portfolio pulse (c3-brief-pulse.js). Review lives in Work's Review lens; Handled, What I could stop and
+ * Data you can lean on live in Reports > Drafts (console3-briefing-parity, PM decision 1). The ribbon and the embedded calendar are not here:
+ * the calendar is the Calendar tab. */
 function briefTab(pane) {
-  const col = el('div', { class: 'bcol l' });
+  const left = el('div', { class: 'bcol l' });
+  const right = el('div', { class: 'bcol r' });
   const deckHost = el('div', { 'data-c3pg': 'deck-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;
+  const ftHost = el('div');
+  S.deckHost = deckHost; S.needsBox = null;
   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]);
+  onBriefing((b) => {   // the briefing's own foot line, when it carries one (the demo's). Built again only when it changed.
+    const g = JSON.stringify(b && b.foot);
     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)] : []));
+    ftHost.replaceChildren(...(b && b.foot ? [footLine(b.foot)] : []));
     if (S.why) whyMark();
   });
   S.needsBox = needsSection(S);
-  col.append(deckHost, todaySection(), S.needsBox, rvHost, hdHost, stHost, pulse(S), trHost);
-  pane.append(el('div', { class: 'brief one' }, el('div', { class: 'bcols' }, col), ftHost));
+  left.append(deckHost, S.needsBox);
+  right.append(todaySection(), pulse(S));
+  pane.append(el('div', { class: 'brief' }, el('div', { class: 'bcols' }, left, right), ftHost));
   mountBriefing(deckHost, { noTicker: true, onLens: lensChanged });
   loadBriefPage();
 }
 
-/* The day-part switch: Reflect shows "Carries over" and "What I could stop" (the mockup's vBrief, line 1470). */
+/* The day-part switch: Reflect names Needs you "Carries over" (the mockup's vBrief, line 1470). */
 function lensChanged(l) {
-  const rf = l === 'Reflect'; if (S.stopHost) S.stopHost.hidden = !rf; setNeedsTitle(S.needsBox, rf);
+  setNeedsTitle(S.needsBox, l === 'Reflect');
 }
 
 /* ── 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) {
+  /* a dashboard schedule's notice (routes-briefing.js notices): Reports, then its Drafts tab */
+  if (t && t.tab && BUILD[t.tab]) { showTab(t.tab, true); if (t.tab === 'rep' && t.view) showReportsView(t.view); return; }
   showTab('brief', true);
   if (!t) return;
   if (t.card !== undefined && t.card !== null) { showCard(S.deckHost, t.card); return; }
@@ -313,7 +335,8 @@ function openPerson(k) {
 /* 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) }))];
+    ...TABS.map(([id, label, icon]) => ({ label, kind: 'place', icon, run: () => showTab(id, true) })),
+    { label: 'Settings', kind: 'place', icon: 'shield', run: () => showTab('settings', 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) });
@@ -474,12 +497,24 @@ function showInit(id) {
     }
   }
 }
-function repTab(pane) { mountReports(pane, { ws: S.ws, pmGet, drafts: draftsTab }); }   // dashboards and the library; the old Reports content is the Drafts tab
+/* Reports: the headline deck on top (the Plan deck of the Reports scope), the tabs, and on Drafts what the Briefing no longer carries
+ * (Handled, What I could stop, Data you can lean on) above "Reports to send" (the old families, their claims check and the outbox). */
+/* The Reports deck always names its scope, so real mode gets the engine's report signals and never the Briefing's cards (console3-deck-flow-fixes). */
+function repTab(pane) { mountReports(pane, { ws: S.ws, pmGet, deck: (h) => h.append(planNode('rep')), more: draftsMore, drafts: draftsTab }); }
+function draftsMore(host) {
+  let sig = '';
+  onBriefing((b) => {   // the same cards and the same condition as the Briefing had: only what the briefing carries (the demo's); redrawn only when it changed, so an open row stays open
+    const g = JSON.stringify([b && b.handled, b && b.stop, b && b.trust]);
+    if (g === sig) return; sig = g;
+    host.replaceChildren(...[b && b.handled ? handledRow(b.handled) : null, stopCard(b && b.stop), b && b.trust ? trustCard(b.trust) : null].filter(Boolean));
+  });
+  loadBriefing();
+}
 function draftsTab(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() });
+    mountReportFamilies(fam, { reportFacts: j && j.ok ? j.facts : {}, plan: null, 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"]'); };
@@ -487,25 +522,50 @@ function draftsTab(pane) {
   });
 }
 
-const BUILD = { brief: briefTab, cal: (p) => mountCalendarViews(p, { view: 'week', page: true, 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 };
+const BUILD = { brief: briefTab, cal: (p) => mountCalendarViews(p, { view: 'week', page: true, scope: sc('cal'), deck: planNode('cal', { bare: true }) }), work: (p) => { mountPmWork(p, { go: (t) => showTab(t, true) }); }, init: (p) => mountInitiatives(p, { ws: S.ws, workspaces: S.workspaces, demo: DEMO, showTab }), rep: repTab };
 
 function showTab(id, push) {
-  if (!BUILD[id]) id = 'brief';
+  if (!BUILD[id] && id !== 'settings') 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.tabBtns[t].setAttribute('aria-selected', String(on)); S.tabBtns[t].tabIndex = on ? 0 : (id === 'settings' && t === 'brief' ? 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.panes.settings.hidden = id !== 'settings';
+  if (S.gearBtn) S.gearBtn.setAttribute('aria-pressed', String(id === 'settings'));
+  if (id === 'settings') {
+    S.ttl.replaceChildren(gearIcon('lg'), 'Settings'); document.title = 'Settings · PMOS console';
+    if (!S.settings) { S.settingsCtx = { ws: S.ws, workspaces: S.workspaces, theme: S.theme, themePref: S.themePref, setTheme, goTab: (t) => showTab(t, true), section: q.get('section') || '', root: S.root }; S.settings = mountSettings(S.panes.settings, S.settingsCtx); }
+    else S.settings.refresh();
+  } else 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) S.userNav = true;
   if (push) { try { const u = new URL(location.href); u.searchParams.set('tab', id); history.replaceState(null, '', u); } catch { /* no history */ } }
 }
 
+const setBdg = (b, n) => { b.textContent = String(n); b.hidden = !n; };
+S.setNeedsBdg = (n) => { S.needsLive = true; setBdg(S.briefBdg, n); };
+
+/* Tab badges. Briefing: the Needs you count (the section's own count once it is drawn; before that, the same rules over the briefing and the brief page).
+ * Initiatives: the new asks to triage, that is the captures an agent triaged and the PM has not added yet (GET /api/needs, kind triage); the demo has four. */
+function briefCount() {
+  let b = null; let page = null;
+  const upd = () => { if (!S.needsLive) setBdg(S.briefBdg, needsCount(b, page)); };
+  onBriefing((x) => { b = x; upd(); }); onBriefPage((x) => { page = x; upd(); });
+  loadBriefing(); if (S.tab !== 'brief') loadBriefPage();
+}
+async function askCount() {
+  if (S.demo) { setBdg(S.initBdg, 4); return; }
+  const j = await pmGet('/api/needs?ws=' + encodeURIComponent(S.ws)).catch(() => null);
+  if (!j || !Array.isArray(j.needs)) return;
+  setBdg(S.initBdg, j.needs.filter((r) => r && r.kind === 'triage').length);
+}
+
 async function workCount() {
   const j = await pmGet('/api/pm-items').catch(() => null);
   if (!j || !j.ok || !j.lists) return;
@@ -533,10 +593,12 @@ async function boot() {
   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]); }
+  S.panes.settings = el('div', { class: 'c3pg-pane', role: 'region', 'aria-label': 'Settings', hidden: true, 'data-c3-pane': 'settings' }); S.pageView.append(S.panes.settings);
   const main = el('div', { class: 'c3main' }, header(), S.tickHost, tabBar(), S.pageView);
   S.grid = el('div', { class: 'c3grid' }, main, ...dock());
   root.replaceChildren(S.grid);
   mountDaypart(root, root.querySelector('.c3top'));
+  mountAmbient(root);   // the ambient motion canvas, once, behind the grid
 
   S.dock.setWorkspaces(S.workspaces, S.ws);
   mountBell(S.bellHost, { go: (_, t) => goTarget(t) });
@@ -548,9 +610,13 @@ async function boot() {
   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);
+  /* The saved settings set the start page (look.start) when the address names no tab, and turn the time-of-day tint and strip off or on. */
+  let start = q.get('tab');
+  const saved = DEMO ? null : await pmGet('/api/settings' + (S.ws ? '?ws=' + encodeURIComponent(S.ws) : '')).catch(() => null);   // demo mode's workspace is not registered
+  if (saved && saved.ok) { applyLook(root, saved.settings); if (!start) { const s = (saved.settings || []).find((x) => x.key === 'look.start'); if (s && BUILD[s.value]) start = s.value; } }
+  if (!S.userNav) showTab(start || 'brief', false);   // a press during the read above (the gear, a tab) wins over the start page
   new ResizeObserver(moveInd).observe(S.tabNav);
-  workCount(); S.dock.start();
+  workCount(); briefCount(); askCount(); S.dock.start();
   setInterval(() => { S.sub.textContent = dateLine(); }, 30000);
 }
 

package/workspace/public/pm/c3-terminal-icons.js

@@ -1,7 +1,7 @@
 /* pm/c3-terminal-icons.js — the icon language of the agent surfaces, and the few glyphs the console3 sprite does not hold.
  *
  * Two glyphs, never swapped (the mockups draw them apart: agent-surfaces.html and terminal-layout.html):
- *   AGENT  `pulse`  (the mockup's i-pulse) the agent surfaces: sessions that need you, results to accept. Header button (with the needs-you badge) and the
+ *   AGENT  `bolt`   (the mockup's i-bolt) the agent surfaces: sessions that need you, results to accept. Header button (with the needs-you badge) and the
  *                   dock's "Agent surfaces" button. It also means "the agent acts" everywhere else on the page (swipe right, suggested move).
  *   TERMINAL `term` (`>_`)  a real session's terminal: the dock rail button, a session's "Open the session" link, a session row's mark.
  * AGENT = "the interface that reads sessions for you". TERMINAL = "the raw CLI session". A button shows one or the other, with its own tooltip.
@@ -10,7 +10,7 @@
  * another module already added is not added again. */
 import { c3ic } from './pm-work-view.js';
 
-export const ICON = { agent: 'pulse', terminal: 'term' };   // the mockup's header Sessions pill draws the pulse glyph; the rail draws the terminal glyph
+export const ICON = { agent: 'bolt', terminal: 'term' };   // the mockup's header Sessions pill draws the bolt glyph; the rail draws the terminal glyph
 export const TIPS = {
   agentHeader: (n) => (n ? 'Agent surfaces: ' + n + (n === 1 ? ' session needs you' : ' sessions need you') : 'Agent surfaces: sessions, results to accept, questions for you'),
   agentDock: 'Agent surfaces: the full page of sessions that need you',

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

@@ -13,7 +13,7 @@ import { source, isDemo } from './c3-terminal-data.js';
 import { mountSessions, disposeSessions } from './sessions-panel.js';
 import { mountEdge, disposeEdge } from './c3-terminal-edge.js';
 
-const TABS = [['sessions', 'Sessions', 'pulse'], ['edge', 'Edge cases', 'alert']];
+const TABS = [['sessions', 'Sessions', 'bolt'], ['edge', 'Edge cases', 'alert']];
 const NEXT = [['', 'replies normally'], ['noresult', 'ends with no result'], ['rejected', 'is unreadable'], ['quiet', 'goes quiet'], ['unlabelled', 'has an unlabelled claim'], ['prose', 'answers in plain text'], ['attention', 'needs a sign-in'], ['crashed', 'crashes']];
 let sheet = null;
 
@@ -45,7 +45,7 @@ export async function openTerminalPage(o = {}) {
     }
   };
   const body = [el('div', { class: 'c3 c3e c3t c3t-page', 'data-c3t': 'page' }, el('div', { class: 'chips2', style: 'justify-content:space-between' }, seg, demoBar), note, host)];
-  const s = openSheet({ title: 'Agent surfaces', icon: 'pulse', dw: true, body, onClose: () => { disposeSessions(host); disposeEdge(host); sheet = null; } });
+  const s = openSheet({ title: 'Agent surfaces', icon: 'bolt', dw: true, body, onClose: () => { disposeSessions(host); disposeEdge(host); sheet = null; } });
   sheet = s;
   await draw();
   return s;

package/workspace/public/pm/calendar-views.js

@@ -31,7 +31,7 @@ const IX = () => (typeof window !== 'undefined' && window.__c3calix) || null;
 const baseId = (e) => String((e && e.id) || '').split('@')[0];
 const gotoTab = (id) => { const b = document.querySelector('[data-c3-tab="' + id + '"]'); if (b) b.click(); };
 const isC3 = (r) => !!(r && r.ctx && (r.ctx.ribbon || r.ctx.plan || r.ctx.page));
-const isCalTab = (x) => !!(x && x.ctx && (x.ctx.plan || x.ctx.page));   // the Calendar tab's own instance (the older mount passes plan, the page passes page)
+const isCalTab = (x) => !!(x && x.ctx && (x.ctx.plan || (x.ctx.page && !x.ctx.overlay)));   // the Calendar tab's own instance (the older mount passes plan, the page passes page)
 
 const NS = 'http://www.w3.org/2000/svg';
 const VIEWS = [['day', 'Day'], ['week', 'Week'], ['month', 'Month'], ['quarter', 'Quarter'], ['year', 'Year']];