create-pmos 0.133.0 → 0.135.0

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

@@ -0,0 +1,703 @@
+/* pm/c3-settings.js — the console3 Settings page (initiative console3-settings). Its markup is the approved console3 mockup's
+ * Settings page: a section list card and, per section, .card.sect groups of li.nrow setting rows. Every save shows a toast,
+ * with Undo when the old value can be put back. A feature PMOS does not have yet shows as a row with its control off and
+ * the reason (PM decision 9).
+ *
+ *   mountSettings(host, ctx)   ctx: { ws, workspaces, theme, themePref, setTheme(t), goTab(id), section?, root }
+ *   SECTIONS · LABELS · rowsMatching(q) · gearIcon()            pure parts, for the tests
+ *
+ * ONE HOME PER SETTING. A setting that already has a store is read and written through its own route, never copied here:
+ *   workspaces        GET /api/workspaces · POST /api/workspaces, /api/workspaces/rename, /api/workspaces/forget
+ *   recording         GET /api/notes/engine · POST /api/notes/switch (language, model, accuracy, keep_audio, clean_audio, wispr, jev, check)
+ *   attendee names    GET /api/people · POST /api/people/decide
+ *   validate consent  GET and POST /api/validate/repo          Online   GET and POST /api/online
+ *   profiles          GET /api/profiles · POST /api/profiles/prefer   new sessions: dock.js sessionDefaults (this browser)
+ *   TypeSafe key      GET /api/typesafe (present or not; the key is never read)
+ *   about you         GET and POST /api/proactive/settings {name, about:{role, work, duties}} (the Welcome page writes the same)
+ *   running sessions  GET /api/sessions                         calendar import  POST /api/sources/refresh {source:'calendar'}
+ *   versions          GET /api/kit/status · POST /api/kit/check, /api/kit/update
+ * Every other setting is in the settings store: GET /api/settings and POST /api/settings (lib/settings-store.js).
+ * A board's own workflow is edited on the board; here are only the templates new boards start from.
+ * Nothing here asks for or shows a key or a password. */
+import { el } from './dom.js';
+import { button, SEL } from './primitives.js';
+import { pmGet, pmPost } from './http.js';
+import { c3ic } from './pm-work-view.js';
+import { sessionDefaults, setSessionDefaults } from './dock.js';
+import { toast } from './c3-toast.js';
+import { dayPartOf } from './c3-daypart.js';
+
+const cx = (...c) => c.filter(Boolean).join(' ');
+
+export const SECTIONS = Object.freeze([
+  ['about', 'About you', 'user', 'Tell PMOS who you are, so your Briefing knows what matters to you. Every field is optional. The Welcome page asks for the same four.'],
+  ['workspaces', 'Workspaces', 'repo', 'A workspace is one repository PMOS works in. Settings marked Workspace apply to the one picked at the top of this page.'],
+  ['boards', 'Boards and workflows', 'cols', 'The templates and defaults new boards start from. A board\'s own workflow is edited on the board, in Initiatives.'],
+  ['connectors', 'Connectors', 'org', 'PMOS keeps no passwords or keys for these. Your Claude session reaches each tool through the connectors of its profile.'],
+  ['recording', 'Recording', 'mic', 'How meetings are transcribed. This is the one place to check when a transcript looks wrong.'],
+  ['time', 'Day and time', 'sun', 'The Briefing follows your clock. These settings say what your day looks like.'],
+  ['sharing', 'Sharing', 'mail', 'Who dashboards go to, and how. Each dashboard\'s schedule is set on the dashboard, in Reports.'],
+  ['access', 'Access and devices', 'phone', 'Open PMOS from your phone or another computer.'],
+  ['sessions', 'Claude sessions', 'term', 'The Claude Code sessions PMOS starts, and what they start with.'],
+  ['privacy', 'Privacy and data', 'shield', 'Nothing leaves this computer unless a line below says so.'],
+  ['appearance', 'Appearance', 'eye', 'How PMOS looks and where it opens.'],
+  ['updates', 'Updates', 'cloud', 'The PMOS app, and the kit inside each workspace.'],
+]);
+
+/* Labels for the settings store's keys: [section group, label, help, { value: option label }]. */
+export const LABELS = Object.freeze({
+  'ws.start': ['Start', 'Open on start', 'Which workspace PMOS opens when it starts.', { last: 'Last used', ask: 'Ask each time' }],
+  'ws.briefing': ['Start', 'Briefing covers', 'With several workspaces, the Briefing can show one or all of them. Each item still opens in its own workspace.', { one: 'This workspace', all: 'All workspaces' }],
+  'board.template': ['Defaults', 'Template for new boards', 'A new board copies this template. You can change its workflow on the board afterwards.', { product: 'Product', project: 'Project', simple: 'Simple' }],
+  'board.rules': ['Defaults', 'Order rules on boards', 'You move cards between stages. When a card skips a step, such as Build before a spec exists, the card shows a warning (decision D3).', { warn: 'Warn on the card', off: 'Off' }],
+  'conn.cal.window': ['Google Calendar', 'Import window', 'How far back and ahead your session imports events.', { '7-14': 'Past 7 days, next 14', '14-30': 'Past 14 days, next 30', '30-60': 'Past 30 days, next 60' }],
+  'conn.cal.refresh': ['Google Calendar', 'Refresh', 'When your session imports events again.', { open: 'When I open Calendar', hour: 'Every hour', manual: 'Only when I import' }],
+  'conn.cal.private': ['Google Calendar', 'Private events', 'Events marked private in Google Calendar.', { busy: 'Show as busy', hide: 'Hide', title: 'Show titles' }],
+  'conn.jira.refresh': ['Jira', 'Refresh ticket status', 'Jira owns ticket status. PMOS reads it back on this schedule.', { open: 'When I open a board', 15: 'Every 15 min', manual: 'Only when I sync' }],
+  'conn.wispr.wait': ['Wispr Flow', 'Wait before fetching', 'Wispr Flow needs a few minutes to finish its notes after a meeting.', { 2: '2 minutes', 5: '5 minutes', 10: '10 minutes' }],
+  'conn.sender': ['Sending', 'Sender for shared dashboards', 'Your session sends through this connector. Until you pick one, a scheduled share is a ready draft.', { none: 'None', slack: 'Slack', gmail: 'Gmail drafts' }],
+  'rec.sources': ['Live transcript', 'Listen to', 'The meeting is the sound from your call app. The mic is you.', { both: 'Mic and meeting', mic: 'Mic only', meeting: 'Meeting only' }],
+  'rec.guard': ['Live transcript', 'Re-run lines that come back in another language', 'A line that comes back mostly in another script is transcribed again in the meeting language. The original is kept (decision D8).'],
+  'rec.echo': ['Live transcript', 'Remove the meeting echo from the mic', 'When your speakers leak into the mic, the same words come in twice. Turn off to compare by ear.'],
+  'rec.settle': ['Live transcript', 'Correct lines a few seconds later', 'At each pause, the last 30 seconds are transcribed again with the stronger model and corrected in place.'],
+  'rec.vocab': ['Live transcript', 'Words to listen for', 'Names and terms that are often misheard, separated by commas.'],
+  'rec.final': ['After Stop', 'Transcribe the whole meeting again after Stop', 'Your notes are written from this final transcript.'],
+  'rec.retain': ['Audio', 'Delete kept audio after', 'The transcript and the notes stay.', { never: 'Never', 90: '90 days', 30: '30 days', 7: '7 days' }],
+  'time.zone': ['Where and when', 'Time zone', 'Empty means the time zone of this computer.'],
+  'time.weekStart': ['Where and when', 'Week starts on', '', { mon: 'Monday', sun: 'Sunday' }],
+  'time.workStart': ['Your day', 'Working hours start', 'Free time, prep at risk and the end of the day use your working hours.'],
+  'time.workEnd': ['Your day', 'Working hours end', ''],
+  'time.prep': ['Your day', 'Free time needed before a meeting with prep', 'With less than this, the meeting shows as prep at risk.', { 15: '15 min', 30: '30 min', 45: '45 min', 60: '1 hour' }],
+  'time.buffer': ['Your day', 'Buffer between meetings', 'Back-to-back meetings with less than this get a tidy-up suggestion on the Calendar.', { 0: 'None', 5: '5 min', 10: '10 min', 15: '15 min' }],
+  'time.tint': ['Ambience', 'Tint the top bar with the time of day', ''],
+  'time.strip': ['Ambience', 'Show the daylight strip', 'The sun or the moon on its arc, with sunrise or sunset.'],
+  'share.mode': ['Sending', 'Before a scheduled share goes out', 'Until a sender is chosen in Connectors, every scheduled share is a ready draft and a notification.', { draft: 'Make a draft for me to check', send: 'Send on schedule' }],
+  'sess.max': ['Housekeeping', 'Keep at most this many running', 'When a new session is needed, the longest idle background session closes first. A session you opened yourself is never closed for you.', { 2: '2', 3: '3', 4: '4', 6: '6', 8: '8' }],
+  'sess.idle': ['Housekeeping', 'Close a background session idle for', '', { 15: '15 min', 30: '30 min', 60: '1 hour', never: 'Never' }],
+  'sess.share': ['Housekeeping', 'Background jobs', 'Card refresh, imports and final notes can share one session per workspace. It starts faster and costs less.', { ws: 'One session per workspace', job: 'A new session per job' }],
+  'look.start': ['Look', 'Start page', 'The page /c3.html opens on.', { brief: 'Briefing', cal: 'Calendar', work: 'Work', init: 'Initiatives', rep: 'Reports' }],
+  'upd.check': ['When', 'Check for updates', 'A check asks the npm registry for the latest version. It is the only request PMOS makes by itself.', { press: 'When I press Check', daily: 'Once a day' }],
+  'upd.apply': ['When', 'Install updates', 'An app update restarts PMOS. When idle waits until no recording or session runs.', { ask: 'Ask me', idle: 'When PMOS is idle' }],
+  'upd.kits': ['When', 'Workspace kits', 'Each workspace carries its own copy of the kit.', { all: 'Update all together', each: 'One at a time' }],
+  'upd.channel': ['When', 'Release channel', '', { stable: 'Stable', early: 'Early' }],
+});
+
+/* The settings that live in another store, with the words the page shows. The search reads these too. */
+const EXT = Object.freeze({
+  'notes.model': ['recording', 'Live transcript', 'Whisper model', 'The bigger model makes fewer mistakes on names and accents.'],
+  'notes.accuracy': ['recording', 'Live transcript', 'Decoding', 'More accurate is slower on every line.'],
+  'notes.language': ['recording', 'Live transcript', 'Language spoken in meetings', 'Every line is written in this language. Detect guesses for each line, and can turn accented English into another language.'],
+  'notes.keep': ['recording', 'Audio', 'Keep the audio for replay', 'Kept on this computer, outside every repository. Never sent anywhere.'],
+  'notes.clean': ['recording', 'Audio', 'Clean up the replay sound', 'After Stop, the replay gets less rumble and hiss. The transcript does not change.'],
+  'notes.jev': ['recording', 'Jev', 'Label lines with Jev', 'Each line goes to TypeSafe for its label. Audio, names and private notes never do.'],
+  'notes.check': ['recording', 'Jev', 'Check notes against this workspace with Jev', 'Each captured line and one matching passage go to TypeSafe.'],
+  'notes.wispr': ['connectors', 'Wispr Flow', 'Fetch Wispr Flow notes after a meeting', 'Your session finds the same meeting in Wispr Flow and adds its notes to yours. Never for a private note.'],
+  'people.names': ['connectors', 'Google Calendar', 'Attendee names', 'Use the names of the people in your meetings for prep and People. The names stay on this computer.'],
+  'validate.consent': ['sessions', 'Workspace', 'Let Claude validate this workspace', 'Runs the checks against this workspace and records the result.'],
+  'sess.cli': ['sessions', 'New sessions', 'Start with', 'What a new session opens.'],
+  'sess.tier': ['sessions', 'New sessions', 'Model', 'Auto picks for each job: fast for a card refresh, deep for a PRD or final notes.'],
+  'sess.profile': ['sessions', 'New sessions', 'Default profile', 'The account and connectors a new Claude session starts with. Connectors use it too.'],
+  'online.on': ['access', 'Online', 'Online', 'Open PMOS from anywhere through a Cloudflare tunnel, signed in with Cloudflare Access.'],
+  'look.theme': ['appearance', 'Look', 'Theme', ''],
+});
+
+/* About you: [field, label, help, max length, placeholder, textarea]. Stored in the proactive settings, as the Welcome page stores them. */
+export const ABOUT = Object.freeze([
+  ['name', 'Your name', 'Shown in your Briefing greeting and in notes you write.', 40, 'For example: Dana', false],
+  ['role', 'Your role', 'Helps PMOS judge which items are yours to decide.', 80, 'For example: Senior PM, Payments', false],
+  ['work', 'What you do', 'One line. The Briefing uses it to rank what needs you first.', 200, 'In one line, for example: I run checkout and the payment methods', false],
+  ['duties', 'Your job description', 'What you own, decide and deliver. Paste it from your job description if you like. It stays on this computer.', 1000, 'What you own, decide and deliver.', true],
+]);
+
+/** Every row whose label, help or group matches `q` (lower case), as [key, section]. */
+export function rowsMatching(q) {
+  const s = String(q || '').trim().toLowerCase();
+  if (!s) return [];
+  const out = [];
+  for (const [k, [g, l, h]] of Object.entries(LABELS)) if ((g + ' ' + l + ' ' + h).toLowerCase().includes(s)) out.push([k, sectionOfStore(k)]);
+  for (const [k, [sec, g, l, h]] of Object.entries(EXT)) if ((g + ' ' + l + ' ' + h).toLowerCase().includes(s)) out.push([k, sec]);
+  for (const [f, l, h] of ABOUT) if (('your details ' + l + ' ' + h).toLowerCase().includes(s)) out.push(['you.' + f, 'about']);
+  return out;
+}
+const STORE_SECTION = { ws: 'workspaces', board: 'boards', conn: 'connectors', rec: 'recording', time: 'time', share: 'sharing', sess: 'sessions', look: 'appearance', upd: 'updates' };
+function sectionOfStore(k) { return STORE_SECTION[k.split('.')[0]] || 'workspaces'; }
+
+/** A gear, drawn here: the console's sprite has none. */
+export function gearIcon(cls) {
+  const NS = 'http://www.w3.org/2000/svg';
+  const s = document.createElementNS(NS, 'svg');
+  s.setAttribute('class', 'ic' + (cls ? ' ' + cls : '')); s.setAttribute('aria-hidden', 'true'); s.setAttribute('viewBox', '0 0 24 24');
+  s.innerHTML = '<circle cx="12" cy="12" r="3"/><path d="M19 12a7 7 0 0 0-.1-1.2l2-1.6-2-3.4-2.4 1a7 7 0 0 0-2-1.2L14 3h-4l-.5 2.6a7 7 0 0 0-2 1.2l-2.4-1-2 3.4 2 1.6a7 7 0 0 0 0 2.4l-2 1.6 2 3.4 2.4-1a7 7 0 0 0 2 1.2L10 21h4l.5-2.6a7 7 0 0 0 2-1.2l2.4 1 2-3.4-2-1.6c.1-.4.1-.8.1-1.2"/>';
+  return s;
+}
+
+function ensureCss() {
+  if (typeof document === 'undefined' || document.querySelector('link[data-c3-settings]')) return;
+  const l = document.createElement('link'); l.rel = 'stylesheet'; l.href = new URL('./c3-settings.css', import.meta.url).href; l.setAttribute('data-c3-settings', ''); document.head.appendChild(l);
+}
+/* Every control is a primitives.js button(); its children are the console3 icon and text, and its class carries the look (as c3-reports.js does). */
+const bt = (attrs, ...kids) => {
+  const { onclick, disabled, class: cls, type, ...rest } = attrs || {};
+  const b = button({ label: '', variant: 'ghost', size: 'sm', onClick: onclick, disabled, attrs: { ...rest, class: cx('c3set-b', cls) } });
+  b.replaceChildren(...kids.flat().filter((k) => k != null && k !== false));
+  return b;
+};
+
+const ZONES = ['Asia/Jakarta', 'Asia/Makassar', 'Asia/Jayapura', 'Asia/Singapore', 'Asia/Kuala_Lumpur', 'Asia/Bangkok', 'Asia/Tokyo', 'Asia/Kolkata', 'Australia/Sydney', 'Europe/London', 'Europe/Berlin', 'America/New_York', 'America/Los_Angeles', 'UTC'];
+/* Choices the mockup draws as a select even though they are short. */
+const AS_SELECT = new Set(['conn.cal.window', 'conn.cal.refresh', 'conn.jira.refresh', 'conn.wispr.wait']);
+const qs = (o) => Object.entries(o).filter(([, v]) => v != null && v !== '').map(([k, v]) => k + '=' + encodeURIComponent(v)).join('&');
+
+/** Apply the settings the console itself draws: the start tab is read by the shell; tint and the daylight strip are attributes on the root. */
+export function applyLook(root, settings) {
+  if (!root || !settings) return;
+  ensureCss();
+  const v = (k) => { const s = settings.find((x) => x.key === k); return s ? s.value : undefined; };
+  root.setAttribute('data-c3-tint', v('time.tint') === false ? 'off' : 'on');
+  root.setAttribute('data-c3-strip', v('time.strip') === false ? 'off' : 'on');
+}
+
+export function mountSettings(host, ctx = {}) {
+  ensureCss();
+  const M = {
+    sec: SECTIONS.some((s) => s[0] === ctx.section) ? ctx.section : 'about', q: '', ws: ctx.ws || '', data: null, err: {},
+    engine: null, people: null, consent: null, online: null, profiles: null, typesafe: null, kits: {}, about: null, running: null,
+    tplEdit: null, wsEdit: null, wsDrop: null, addPath: '',
+  };
+  const root = el('div', { class: 'brief c3set', 'data-c3set': '' });
+  const nav = el('ul', { class: 'list', role: 'list', 'data-c3set-nav': '' });
+  const segRow = el('div', { class: 'st-seg', 'data-c3set-seg': '' });
+  const body = el('div', { class: 'st-body', 'data-c3set-body': '' });
+  const search = el('input', { type: 'text', id: 'c3set-q', placeholder: 'Search settings', 'aria-label': 'Search settings', autocomplete: 'off', 'data-c3set-search': '',
+    oninput: () => { M.q = search.value.trim(); draw(); } });
+  const wsSel = el('select', { id: 'c3set-ws', 'aria-label': 'Workspace these settings apply to', 'data-c3set-ws': '', onchange: () => { M.ws = wsSel.value; loadWs(); } });
+  root.append(el('div', { class: 'calwrap' },
+    el('div', { class: 'st-hd' }, el('div', { class: 'dim st-lead' }, 'Each setting has one home here. The pages link to it.'),
+      el('div', { class: 'tools' }, search, el('label', { class: 'dim st-help', for: 'c3set-ws' }, 'Workspace'), wsSel)),
+    segRow,
+    el('div', { class: 'st-wrap' },
+      el('section', { class: 'card sect st-nav', 'aria-label': 'Settings sections' },
+        el('div', { class: 'sh2' }, el('h2', null, gearIcon('sm'), 'Settings ', el('span', { class: 'bdg g' }, String(SECTIONS.length)))), nav),
+      body)));
+  host.replaceChildren(root);
+
+  const wsName = (id) => { const w = (ctx.workspaces || []).find((x) => x.id === id); return w ? (w.label || w.name || w.id) : id || 'no workspace'; };
+  const S = (k) => (M.data ? M.data.settings.find((x) => x.key === k) : null);
+  const val = (k) => { const s = S(k); return s ? s.value : undefined; };
+  const override = (k) => (M.data ? M.data.overrides.find((o) => o.key === k) : null);
+  const labelOf = (k) => (LABELS[k] ? LABELS[k][1] : EXT[k] ? EXT[k][2] : k);
+
+  /* ── reads ── */
+  async function loadStore() {
+    const r = await pmGet('/api/settings?' + qs({ ws: M.ws }));
+    M.data = r && r.ok ? r : { settings: [], overrides: [], categories: ['Discover', 'Plan', 'Do', 'Learn'], error: (r && r.error) || 'The settings could not be read.' };
+    applyLook(ctx.root, M.data.settings); draw();
+  }
+  async function loadEngine() { const r = await pmGet('/api/notes/engine?' + qs({ ws: M.ws })); M.engine = r && r.ok ? r : { error: (r && r.error) || 'not read' }; draw(); }
+  async function loadWs() {
+    M.people = null; M.consent = null; draw();
+    await Promise.all([loadStore(), loadEngine(),
+      M.ws ? pmGet('/api/people?' + qs({ ws: M.ws })).then((r) => { M.people = r && r.ok !== false && r.settings ? { on: !!r.settings.calendar_names } : { error: (r && r.error) || 'not read' }; }) : null,
+      M.ws ? pmGet('/api/validate/repo?' + qs({ ws: M.ws })).then((r) => { M.consent = r && r.ok !== false ? { on: !!r.consent } : { error: (r && r.error) || 'not read' }; }) : null]);
+    draw();
+  }
+  function loadOnce() {
+    pmGet('/api/online').then((r) => { M.online = r && r.ok !== false ? r : { error: (r && r.error) || 'not read' }; draw(); });
+    pmGet('/api/profiles').then((r) => { M.profiles = r && r.ok !== false ? r : { error: (r && r.error) || 'not read', profiles: [] }; draw(); });
+    pmGet('/api/typesafe').then((r) => { M.typesafe = r && r.ok ? r.key : null; draw(); });
+    pmGet('/api/proactive/settings').then((r) => { const s = r && r.ok && r.settings; M.about = s ? { name: s.name || '', role: (s.about || {}).role || '', work: (s.about || {}).work || '', duties: (s.about || {}).duties || '' } : { error: (r && r.error) || 'not read' }; draw(); });
+    pmGet('/api/sessions').then((r) => { M.running = r && Array.isArray(r.sessions) ? r.sessions : null; draw(); });
+    for (const w of ctx.workspaces || []) pmGet('/api/kit/status?' + qs({ ws: w.id })).then((r) => { M.kits[w.id] = r && r.ok ? r : { error: (r && r.error) || 'not read' }; draw(); });
+  }
+
+  /* ── writes: each save says so in a toast, with Undo when the old value can be put back ── */
+  async function setStore(key, value, quiet) {
+    const s = S(key) || {}; const old = s.value;
+    const r = await pmPost('/api/settings', { key, value, ws: s.scope === 'ws' ? M.ws : undefined });
+    if (!r || !r.ok) { M.err[key] = (r && r.error) || 'Not saved.'; draw(); return false; }
+    delete M.err[key];
+    await loadStore();
+    if (!quiet) toast('Saved: ' + labelOf(key), old === undefined ? undefined : () => setStore(key, old, true));
+    return true;
+  }
+  async function resetStore(key) {
+    const s = S(key) || {}; const old = s.value;
+    const r = await pmPost('/api/settings', { key, reset: true, ws: s.scope === 'ws' ? M.ws : undefined });
+    if (r && r.ok) { await loadStore(); toast('Back to the default: ' + labelOf(key), () => setStore(key, old, true)); }
+  }
+  async function resetSection(id) {
+    const keys = M.data.settings.filter((s) => s.changed && sectionOfStore(s.key) === id);
+    const was = keys.map((s) => [s.key, s.value]);
+    for (const s of keys) await pmPost('/api/settings', { key: s.key, reset: true, ws: s.scope === 'ws' ? M.ws : undefined });
+    await loadStore();
+    toast('Section is back to its defaults', async () => { for (const [k, v] of was) await setStore(k, v, true); });
+  }
+  async function notesSwitch(patch, key, undoPatch) {
+    const r = await pmPost('/api/notes/switch', M.ws ? { ws: M.ws, ...patch } : patch);
+    if (!r || !r.ok) { M.err[key] = (r && r.error) || 'Not saved.'; draw(); return; }
+    delete M.err[key]; M.engine = r; draw();
+    toast('Saved: ' + labelOf(key), undoPatch ? () => notesSwitch(undoPatch, key) : undefined);
+  }
+  async function saveAbout(field, value) {
+    const a = M.about; const old = a[field];
+    const next = { ...a, [field]: value };
+    const r = await pmPost('/api/proactive/settings', { name: next.name.slice(0, 40), about: { role: next.role, work: next.work, duties: next.duties } });
+    if (!r || !r.ok) { M.err['you.' + field] = (r && r.error) || 'Not saved.'; draw(); return; }
+    delete M.err['you.' + field]; M.about = next; draw();
+    toast('Saved: ' + ABOUT.find((f) => f[0] === field)[1], () => saveAbout(field, old));
+  }
+
+  /* ── building blocks (console3 markup: .card.sect > .sh2, ul.list > li.nrow, .seg, .tag, .chip2, .fold) ── */
+  const btn = (label, { variant = 'outline', ic, onclick, attrs, disabled } = {}) => {
+    const b = button({ label, variant, size: 'sm', onClick: onclick, disabled, attrs });
+    if (ic) b.querySelector(SEL.btnLabel).prepend(ic === 'gear' ? gearIcon('sm') : c3ic(ic, 'sm'));
+    return b;
+  };
+  const tag = (text, tone) => el('span', { class: cx('tag', tone) }, text);
+  const chip = (text, cls) => el('span', { class: cx('chip2', cls) }, text);
+  const scopeTag = (scope) => el('span', { class: 'tag', title: 'Where this setting applies' }, scope === 'ws' ? 'Workspace · ' + wsName(M.ws) : scope === 'board' ? 'Per board' : 'This computer');
+  const fold = (ic, text, tone, ...more) => el('div', { class: cx('fold', tone) }, ic ? c3ic(ic, 'sm') : null, el('span', null, text), ...more);
+  const sect = (title, kids, { ic, count, right, attrs } = {}) => el('section', { class: 'card sect', ...(attrs || {}) },
+    el('div', { class: 'sh2' }, el('h2', null, ic ? c3ic(ic, 'sm') : null, title, count != null ? el('span', { class: 'bdg g' }, String(count)) : null), right || null),
+    ...kids.flat().filter(Boolean));
+  const list = (rows) => { const r = rows.flat().filter(Boolean); return r.length ? el('ul', { class: 'list', role: 'list' }, ...r) : null; };
+  const swBtn = (on, label, onClick, attrs) => bt({ type: 'button', class: 'sw', role: 'switch', 'aria-checked': String(!!on), 'aria-label': label, onclick: onClick, ...(attrs || {}) }, el('i', { class: 'sw-dot' }));
+  const seg = (label, opts, cur, onPick, disabled) => el('div', { class: 'seg', role: 'group', 'aria-label': label },
+    ...opts.map(([v, l]) => bt({ type: 'button', 'aria-pressed': String(String(cur) === String(v)), disabled: !!disabled, 'data-v': String(v), onclick: () => onPick(v) }, l)));
+  const select = (id, label, opts, cur, onPick, disabled) => el('select', { id, 'aria-label': label, disabled: !!disabled, onchange: (e) => onPick(e.target.value) },
+    ...opts.map(([v, l]) => el('option', { value: String(v), selected: String(cur) === String(v) }, l)));
+  const locked = (text) => el('span', { class: 'chip2' }, c3ic('lock', 'sm'), text);
+  const secLink = (id, label) => bt({ type: 'button', class: 'chip2 lk', onclick: () => goSec(id) }, label);
+  const tabLink = (tab, label) => bt({ type: 'button', class: 'chip2 lk', onclick: () => ctx.goTab && ctx.goTab(tab) }, label);
+  const help = (...kids) => el('div', { class: 'dim st-help' }, ...kids);
+  /** One setting row: label, scope tag and help on the left; the control and Reset on the right. */
+  function frame({ key, label, help: h, scope, control, changed, onReset, env, err, wide, note, lock, forId, ic }) {
+    return el('li', { class: cx('nrow st-row', wide && 'wide', ic && 'has-ki'), 'data-c3set-row': key },
+      ic ? el('span', { class: cx('ki', ic[1]) }, c3ic(ic[0])) : null,
+      el('div', { class: 'nb' },
+        forId ? el('label', { class: 'tt', for: forId }, label) : el('span', { class: 'tt' }, label),
+        scope || changed ? el('div', { class: 'chips' }, scope ? scopeTag(scope) : null, changed ? el('span', { class: 'st-dot', title: 'Changed from the default' }) : null) : null,
+        h ? help(h) : null,
+        env ? el('div', { class: 'fold w', 'data-c3set-env': env.env }, c3ic('alert', 'sm'), el('span', null, el('b', { class: 'mono' }, env.env + '=' + env.value), ' is set where PMOS starts. ' + env.effect + ' Remove it from your shell profile, then restart PMOS.')) : null,
+        lock ? fold('lock', lock) : null,
+        note ? help(note) : null,
+        err ? el('div', { class: 'fold w', role: 'alert' }, c3ic('alert', 'sm'), el('span', null, err)) : null),
+      el('div', { class: 'acts' }, control, changed && onReset ? btn('Reset', { variant: 'ghost', onclick: onReset, attrs: { 'data-c3set-reset': key } }) : null));
+  }
+  /** A row for a key of the settings store. */
+  function storeRow(key, extra = {}) {
+    const s = S(key); const L = LABELS[key];
+    if (!s || !L) return null;
+    const [, label, h, opts] = L;
+    const id = 'c3set-' + key;
+    const ov = override(key); const dis = !!(extra.disabled || ov);
+    const optList = (s.options || []).map((v) => [v, (opts && opts[v]) || v]);
+    let control;
+    if (s.type === 'bool') control = swBtn(s.value, label, () => setStore(key, !s.value), { id, 'data-c3set-key': key, disabled: dis });
+    else if (s.type === 'choice' && !AS_SELECT.has(key) && optList.length <= 3 && optList.every(([, l]) => l.length < 24)) control = seg(label, optList, s.value, (v) => setStore(key, v), dis);
+    else if (s.type === 'choice') control = select(id, label, optList, s.value, (v) => setStore(key, v), dis);
+    else if (s.type === 'hour') { const hs = []; for (let h2 = s.min; h2 <= s.max; h2++) hs.push([h2, String(h2).padStart(2, '0') + ':00']); control = select(id, label, hs, s.value, (v) => setStore(key, Number(v)), dis); }
+    else if (s.type === 'zone') {
+      const here = (() => { try { return Intl.DateTimeFormat().resolvedOptions().timeZone; } catch { return ''; } })();
+      control = select(id, label, [['', 'This computer\'s' + (here ? ' (' + here + ')' : '')], ...ZONES.map((z) => [z, z.replace(/_/g, ' ')])], s.value, (v) => setStore(key, v), dis);
+    } else if (s.type === 'text') control = el('input', { type: 'text', id, value: s.value, maxlength: String(s.max || 400), 'aria-label': label, autocomplete: 'off', disabled: dis, onchange: (e) => setStore(key, e.target.value) });
+    return frame({ key, label, help: h, scope: s.scope, control, changed: s.changed, onReset: () => resetStore(key), env: ov, err: M.err[key], note: extra.note, lock: extra.lock,
+      forId: s.type === 'choice' && control.tagName !== 'SELECT' ? null : id, wide: s.type === 'text' && (s.max || 0) > 100 });
+  }
+  function extRow(key, control, extra = {}) {
+    const [, , label, h] = EXT[key];
+    return frame({ key, label, help: h, scope: extra.scope, control, env: override(key), err: M.err[key], note: extra.note, lock: extra.lock, forId: extra.forId });
+  }
+  const lockedRow = (key, label, h, text, scope) => frame({ key, label, help: h, scope, control: locked(text) });
+  /** A feature PMOS does not have yet (PM decision 9): the row shows, with its control off and the reason. */
+  const notYet = (key, label, h, why, scope, control) => frame({ key, label, help: h, scope, lock: why, control: control || btn('Not available yet', { variant: 'ghost', disabled: true }) });
+  const group = (title, rows, ic, opts) => { const l = list(rows); return l ? sect(title, [l], { ic, ...(opts || {}) }) : null; };
+  const groupOf = (sec, title, ic) => group(title, Object.keys(LABELS).filter((k) => sectionOfStore(k) === sec && LABELS[k][0] === title).map((k) => storeRow(k)), ic);
+  const goSec = (id) => { M.sec = id; M.q = ''; search.value = ''; draw(); };
+
+  /* ── sections ── */
+  function aboutSec() {
+    const a = M.about;
+    if (!a) return [fold(null, 'Reading what you told PMOS.')];
+    if (a.error) return [el('div', { class: 'fold w', role: 'alert' }, c3ic('alert', 'sm'), el('span', null, 'What you told PMOS could not be read: ' + a.error + '.'))];
+    const rows = ABOUT.map(([f, label, h, max, ph, area]) => {
+      const id = 'c3set-you-' + f;
+      const input = area
+        ? el('textarea', { id, rows: '5', maxlength: String(max), placeholder: ph, 'aria-label': label, oninput: (e) => { count.textContent = e.target.value.length + ' of ' + max + ' characters'; }, onchange: (e) => saveAbout(f, e.target.value.trim()) }, a[f])
+        : el('input', { type: 'text', id, value: a[f], maxlength: String(max), placeholder: ph, 'aria-label': label, autocomplete: 'off', onchange: (e) => saveAbout(f, e.target.value.trim()) });
+      const count = area ? el('span', { class: 'dim mono st-count' }, a[f].length + ' of ' + max + ' characters') : null;
+      return frame({ key: 'you.' + f, label, help: h, scope: 'computer', control: area ? [input, count] : input, err: M.err['you.' + f], forId: id, wide: !!area });
+    });
+    return [group('Your details', rows, 'user'),
+      fold('spark', 'The Welcome page asks for these four on first run. Change them here any time.', null, btn('See Welcome', { variant: 'ghost', ic: 'next', onclick: () => { location.href = '/welcome'; } }))];
+  }
+
+  function workspacesSec() {
+    const wss = ctx.workspaces || [];
+    const rows = wss.map((w) => {
+      const cur = w.id === M.ws;
+      const editing = M.wsEdit === w.id; const dropping = M.wsDrop === w.id;
+      const nameIn = editing ? el('input', { type: 'text', value: w.label || w.name || '', 'aria-label': 'New name for ' + (w.name || w.id), id: 'c3set-wsname', maxlength: '60' }) : null;
+      let nb; let acts;
+      if (editing) {
+        nb = [nameIn];
+        acts = [btn('Rename', { variant: 'primary', onclick: async () => { const old = w.label; const nm = nameIn.value.trim(); const r = await pmPost('/api/workspaces/rename', { id: w.id, name: nm }); if (r && r.ok !== false) { w.label = nm; M.wsEdit = null; fillWs(); toast('Renamed to ' + nm); } else M.err['ws:' + w.id] = (r && r.error) || 'Not renamed.'; draw(); void old; } }),
+          btn('Cancel', { variant: 'ghost', onclick: () => { M.wsEdit = null; draw(); } })];
+      } else if (dropping) {
+        nb = [el('span', { class: 'tt' }, w.label || w.name || w.id), fold('alert', 'Removing a workspace takes it off this list. Its folder, boards and notes stay where they are.', 'w')];
+        acts = [btn('Remove workspace', { variant: 'primary', attrs: { 'data-c3set-forget': w.id }, onclick: async () => { const r = await pmPost('/api/workspaces/forget', { id: w.id }); if (r && r.ok) { ctx.workspaces = ctx.workspaces.filter((x) => x.id !== w.id); M.wsDrop = null; if (M.ws === w.id) { M.ws = (ctx.workspaces[0] || {}).id || ''; loadWs(); } fillWs(); toast('Removed ' + (w.name || w.id)); } else M.err['ws:' + w.id] = (r && (r.error || r.reason)) || 'Not removed.'; draw(); } }),
+          btn('Keep it', { variant: 'ghost', onclick: () => { M.wsDrop = null; draw(); } })];
+      } else {
+        nb = [el('span', { class: 'tt' }, w.label || w.name || w.id),
+          el('div', { class: 'chips' }, cur ? tag('Current', 'acc') : null, w.home ? tag('PMOS itself') : null, w.root ? chip(w.root, 'mono') : null, w.branch ? chip('branch ' + w.branch) : null,
+            chip((w.sessions || 0) + ((w.sessions || 0) === 1 ? ' session' : ' sessions')))];
+        acts = [cur ? null : btn('Use', { onclick: () => { M.ws = w.id; fillWs(); loadWs(); toast('Settings now show ' + (w.label || w.name || w.id)); } }),
+          btn('Rename', { variant: 'ghost', onclick: () => { M.wsEdit = w.id; draw(); } }),
+          w.home || wss.length < 2 ? null : btn('Remove', { variant: 'ghost', onclick: () => { M.wsDrop = w.id; draw(); } })];
+      }
+      return el('li', { class: 'nrow', 'data-c3set-ws-row': w.id }, el('span', { class: cx('ki', cur && 'hot') }, c3ic('repo')),
+        el('div', { class: 'nb' }, ...nb, M.err['ws:' + w.id] ? fold('alert', M.err['ws:' + w.id], 'w') : null), el('div', { class: 'acts' }, ...acts.filter(Boolean)));
+    });
+    const pathIn = el('input', { type: 'text', id: 'c3set-addpath', placeholder: '/Users/you/code/my-product', 'aria-label': 'Folder of the workspace to add', value: M.addPath, autocomplete: 'off', oninput: (e) => { M.addPath = e.target.value; } });
+    const addRow = frame({ key: 'ws.add', label: 'Add a workspace', forId: 'c3set-addpath', help: 'Give the folder of a repository. PMOS reads what is there and changes nothing until you start work in it. The first-run steps are on the Welcome page.',
+      err: M.err.add, wide: true, control: [pathIn, btn('Add', { ic: 'plus', attrs: { 'data-c3set-add': '' }, onclick: async () => {
+        const rootPath = M.addPath.trim(); if (!rootPath) { pathIn.focus(); return; }
+        const r = await pmPost('/api/workspaces', { root: rootPath, focus: false });
+        if (r && r.ok) { (ctx.workspaces = ctx.workspaces || []).push(r.workspace); M.addPath = ''; delete M.err.add; toast('Added ' + (r.workspace.name || rootPath)); fillWs(); } else M.err.add = (r && r.error) || 'Not added.';
+        draw();
+      } })] });
+    return [sect('Your workspaces', [rows.length ? list(rows) : fold(null, 'No workspace is registered yet.'), list([addRow])], { ic: 'repo', count: wss.length,
+      right: btn('Add a workspace', { ic: 'plus', onclick: () => { const i = root.querySelector('#c3set-addpath'); if (i) i.focus(); } }) }),
+    groupOf('workspaces', 'Start', 'repo')];
+  }
+
+  function boardsSec() {
+    const s = S('board.templates'); const cats = (M.data && M.data.categories) || ['Discover', 'Plan', 'Do', 'Learn'];
+    const tpl = s ? s.value : {};
+    const draft = M.tplEdit;
+    const flow = (stages) => el('div', { class: 'st-flow' }, ...stages.flatMap((st, i) => [i ? c3ic('next', 'sm') : null, el('span', { class: 'chip2', title: st.cat + ' category' }, el('i', { class: 'st-cat-dot', 'data-cat': st.cat }), st.name)]).filter(Boolean));
+    const rows = Object.entries(tpl).map(([id, t]) => {
+      const editing = draft && draft.id === id;
+      const d = editing ? draft.t : t;
+      const editor = editing ? [el('ol', { class: 'st-stages' }, ...d.stages.map((st, i) => el('li', null,
+        el('input', { type: 'text', value: st.name, 'aria-label': 'Stage ' + (i + 1) + ' name', maxlength: '40', oninput: (e) => { st.name = e.target.value; } }),
+        el('select', { 'aria-label': 'Stage ' + (i + 1) + ' category', onchange: (e) => { st.cat = e.target.value; } }, ...cats.map((c) => el('option', { value: c, selected: c === st.cat }, c))),
+        bt({ type: 'button', class: 'ib sm', 'aria-label': 'Remove ' + st.name, disabled: d.stages.length < 2, onclick: () => { d.stages.splice(i, 1); draw(); } }, c3ic('x', 'sm'))))),
+      help('Each stage maps to Discover, Plan, Do or Learn, so the portfolio can compare boards with different workflows. Up to 12 stages. Boards that already use this template keep their own copy.'),
+      M.err['board.templates'] ? fold('alert', M.err['board.templates'], 'w') : null] : [];
+      const acts = editing
+        ? [d.stages.length < 12 ? btn('Add stage', { ic: 'plus', onclick: () => { d.stages.push({ name: 'New stage', cat: 'Do' }); draw(); } }) : null,
+          btn('Save', { variant: 'primary', attrs: { 'data-c3set-tpl-save': id }, onclick: async () => { const next = JSON.parse(JSON.stringify(tpl)); next[id] = d; if (await setStore('board.templates', next)) M.tplEdit = null; draw(); } }),
+          btn('Cancel', { variant: 'ghost', onclick: () => { M.tplEdit = null; delete M.err['board.templates']; draw(); } })]
+        : [btn('Edit template', { attrs: { 'data-c3set-tpl-edit': id }, onclick: () => { M.tplEdit = { id, t: JSON.parse(JSON.stringify(t)) }; draw(); } })];
+      return el('li', { class: 'nrow', 'data-c3set-tpl': id }, el('span', { class: 'ki' }, c3ic('cols')),
+        el('div', { class: 'nb' }, el('span', { class: 'tt' }, editing ? 'Editing ' + d.name : t.name), el('div', { class: 'chips' }, val('board.template') === id ? tag('Default for new boards', 'acc') : null), flow(d.stages), ...editor),
+        el('div', { class: 'acts' }, ...acts.filter(Boolean)));
+    });
+    return [groupOf('boards', 'Defaults', 'cols'),
+      group('PMOS itself', [lockedRow('board.self', 'PMOS itself', 'The PMOS workspace keeps its derived ladder: the stage follows the artifacts and is never moved by hand.', 'Derived from the work')], 'cols'),
+      sect('Workflow templates', [list(rows), help('Change a template and only boards created afterwards use it. Each board keeps its own copy.')], { ic: 'cols', count: rows.length,
+        right: s && s.changed ? btn('Reset templates', { variant: 'ghost', onclick: () => resetStore('board.templates') }) : null }),
+      sect('Boards in ' + wsName(M.ws), [list([notYet('board.list', 'Each board and its workflow', 'A board\'s workflow belongs to the board. This list will be a shortcut to each one.', 'Boards with their own workflows come with the Initiatives update. Until then a workspace has one board.', 'ws',
+        btn('Open Initiatives', { variant: 'ghost', ic: 'next', onclick: () => ctx.goTab && ctx.goTab('init') }))])], { ic: 'cols' })];
+  }
+
+  function profileNow() {
+    const p = M.profiles; const id = sessionDefaults().profile || (p && p.prefs && p.prefs.claude) || null;
+    return { id, x: p && p.profiles ? p.profiles.find((y) => y.id === id) : null };
+  }
+  async function chooseProfile(id) {
+    const before = profileNow().id;
+    setSessionDefaults({ profile: id || null });
+    const r = await pmPost('/api/profiles/prefer', { agent: 'claude', profile: id || null });
+    if (r && r.ok) { if (M.profiles) M.profiles.prefs = r.prefs; delete M.err['sess.profile']; toast('Saved: default profile', () => chooseProfile(before)); } else M.err['sess.profile'] = (r && r.error) || 'Not saved.';
+    draw();
+  }
+  const profileSelect = (id) => {
+    const profs = (M.profiles && M.profiles.profiles) || [];
+    return select(id, 'Default profile', [['', 'None'], ...profs.map((x) => [x.id, x.label && x.label !== x.id ? x.label + ' (' + x.id + ')' : x.id])], profileNow().id || '', chooseProfile);
+  };
+  function connectorsSec() {
+    const { id, x } = profileNow();
+    const mcp = x ? x.mcp : [];
+    const has = (re) => mcp.some((m) => re.test(m));
+    const reach = (on) => tag(on ? 'In the profile' : 'Not in the profile', on ? 'ok' : 'warn');
+    const via = (on, name) => (on ? 'Through profile ' + id + '.' : id ? 'Profile ' + id + ' has no ' + name + ' connector.' : 'No default profile is set.');
+    const people = M.people;
+    const w = M.engine && M.engine.whisper;
+    const sender = val('conn.sender');
+    const senderName = (LABELS['conn.sender'][3] || {})[sender] || sender;
+    const setSender = (v) => setStore('conn.sender', v);
+    return [
+      sect('Claude profile', [list([
+        frame({ key: 'conn.profile', label: 'Profile that reaches your tools', help: 'PMOS holds no passwords or keys. Your Claude session uses the connectors in this profile.', scope: 'computer', forId: 'c3set-conn-profile', control: profileSelect('c3set-conn-profile'), err: M.err['sess.profile'] }),
+        frame({ key: 'conn.list', label: 'Connectors in profile ' + (id || 'none'), control: null,
+          help: mcp.length ? null : id ? 'This profile lists no connectors.' : 'No default profile is set, so a session starts with Claude Code\'s own connectors.' })]),
+      mcp.length ? el('div', { class: 'chips st-pad' }, ...mcp.map((m) => tag(m))) : null,
+      help('Profiles are listed in ', secLink('sessions', 'Claude sessions'), '.')], { ic: 'user', attrs: { 'data-c3set-profile': '' } }),
+      sect('Google Calendar', [list([
+        notYet('conn.cal.list', 'Calendars to import', 'Pick which of your calendars the import reads.', 'Choosing calendars comes later. Today the import reads the calendars your session can see.', 'computer'),
+        storeRow('conn.cal.window'), storeRow('conn.cal.refresh'), storeRow('conn.cal.private'),
+        M.ws ? extRow('people.names', people && !people.error ? swBtn(people.on, EXT['people.names'][2], async () => { const r = await pmPost('/api/people/decide', { ws: M.ws, act: 'setting', calendar_names: !people.on }); if (r && r.ok !== false) { people.on = !people.on; toast('Saved: attendee names'); } else M.err['people.names'] = (r && r.error) || 'Not saved.'; draw(); }) : el('span', { class: 'dim' }, people ? people.error : 'Reading'), { scope: 'ws' }) : null]),
+      el('div', { class: 'iacts' }, btn('Import now', { ic: 'undo', disabled: !M.ws || !has(/calendar/i), onclick: async () => { const r = await pmPost('/api/sources/refresh', { ws: M.ws, source: 'calendar' }); toast(r && r.ok ? 'Import started in your Claude session. Events appear in Calendar when it finishes.' : ((r && r.error) || 'The import did not start.')); } }),
+        el('span', { class: 'dim st-help' }, via(has(/calendar/i), 'calendar') + ' PMOS never edits your calendar.'))], { ic: 'cal', right: reach(has(/calendar/i)) }),
+      sect('Jira', [list([notYet('jira.map', 'Jira project for each board', 'A board backed by a Jira project mirrors its sprints and reads ticket status from it, with each Jira status mapped to a board stage.', 'Mapping boards and statuses comes with the Initiatives update.', 'board')]),
+        help(via(has(/atlassian|jira/i), 'Jira'))], { ic: 'org', right: reach(has(/atlassian|jira/i)) }),
+      group('Jira behaviour', [storeRow('conn.jira.refresh'),
+        lockedRow('jira.push', 'Creating or updating tickets', 'PMOS drafts tickets from the PRD. Nothing reaches Jira until you select it (D88).', 'You approve every push', 'ws'),
+        lockedRow('jira.sprints', 'Sprints and burndown', 'A board backed by Jira shows its sprints. Native sprints are only for boards with no tracker (D5).', 'Mirrored from Jira, read-only', 'board')], 'org'),
+      sect('Wispr Flow', [list([w ? extRow('notes.wispr', swBtn(w.wispr !== false, EXT['notes.wispr'][2], () => notesSwitch({ wispr: w.wispr === false }, 'notes.wispr', { wispr: w.wispr !== false }), { disabled: !!override('notes.wispr') }), { scope: 'computer' }) : null, storeRow('conn.wispr.wait')]),
+        help(via(has(/wispr/i), 'Wispr Flow'))], { ic: 'mic', right: reach(has(/wispr/i)) }),
+      sect('Sender for shared dashboards', [el('div', { class: 'iacts', 'data-c3set-sender': '' },
+        ...[['slack', 'Slack'], ['gmail', 'Gmail drafts']].map(([v, l]) => btn(sender === v ? l : 'Use ' + l, { variant: sender === v ? 'primary' : 'outline', ic: sender === v ? 'check' : null, attrs: { 'data-v': v }, onclick: () => setSender(v) })),
+        sender !== 'none' ? btn('Disconnect', { variant: 'ghost', onclick: () => setSender('none') }) : null),
+      help(sender === 'none' ? 'Not connected. Until you pick one, a scheduled share is a ready draft.' : 'Your session sends through ' + senderName + '. Sharing decides whether scheduled shares go out or wait as drafts.'),
+      M.err['conn.sender'] ? fold('alert', M.err['conn.sender'], 'w') : null], { ic: 'mail', right: tag(sender === 'none' ? 'Not connected' : senderName, sender === 'none' ? 'warn' : 'ok') }),
+    ];
+  }
+
+  function recordingSec() {
+    const e = M.engine; const w = e && e.whisper; const j = e && e.jev;
+    if (!e) return [fold(null, 'Reading the recording setup.')];
+    if (e.error || !w) return [fold('alert', 'The recording setup could not be read: ' + (e.error || 'no answer') + '.', 'w')];
+    const langOv = override('notes.language');
+    const langName = (v) => ((w.languages || []).find((x) => x.value === v) || {}).label || v;
+    const engineName = w.live === 'qwen' ? 'Qwen3-ASR' : w.ready ? 'Whisper' : 'Not set up';
+    const summary = [w.live === 'qwen' || w.ready ? engineName + ' on this computer' : 'No local transcription yet', langOv ? langName(langOv.value) + ' (set by ' + langOv.env + ')' : w.language === 'auto' ? 'language detected for each line' : langName(w.language) + ', forced',
+      val('rec.echo') === false || override('rec.echo') ? 'echo removal off' : 'echo removal on', val('rec.final') === false || override('rec.final') ? 'no pass after Stop' : 'a final pass after Stop'];
+    const warn = !!(langOv || w.language === 'auto' || !w.ready);
+    const fin = w.final;
+    const flip = (k, on) => ({ [k]: on });
+    return [
+      sect('Recording now uses', [el('div', { class: 'st-now' }, summary.join(' · ')),
+        !w.ready ? fold('alert', 'Local transcription is not set up (' + (w.missing || []).join(' and ') + ' missing). Open a note and choose Set up in a terminal.', 'w')
+          : warn ? fold('alert', langOv ? 'An environment variable overrides the language you pick below.' : 'Detect can turn accented English into another language. Pick a language if transcripts come back wrong.', 'w') : null,
+        help('Wispr Flow notes after a meeting: ' + (w.wispr === false ? 'off' : 'on') + '. That setting is in ', secLink('connectors', 'Connectors'), '.')],
+      { ic: 'mic', right: tag(warn ? (w.ready ? 'Check language' : 'Not set up') : 'Ready', warn ? 'warn' : 'ok'), attrs: { 'data-c3set-recnow': '' } }),
+      group('Live transcript', [storeRow('rec.sources'),
+        lockedRow('notes.engine', 'Live engine', 'Both run on this computer. PMOS uses Qwen3-ASR when it is set up, because it handles English, Indonesian and Chinese in one model.', w.live === 'qwen' ? 'Qwen3-ASR' : w.ready ? 'Whisper' : 'None set up', 'computer'),
+        w.models && w.live !== 'qwen' ? extRow('notes.model', select('c3set-notes-model', EXT['notes.model'][2], w.models.map((m) => [m.value, m.label]), w.model, (v) => notesSwitch({ model: v }, 'notes.model', { model: w.model })), { scope: 'computer', forId: 'c3set-notes-model' }) : null,
+        w.accuracies && w.live !== 'qwen' ? extRow('notes.accuracy', seg(EXT['notes.accuracy'][2], w.accuracies.map((a) => [a.value, a.value === 'fast' ? 'Faster' : 'More accurate']), w.accuracy, (v) => notesSwitch({ accuracy: v }, 'notes.accuracy', { accuracy: w.accuracy })), { scope: 'computer' }) : null,
+        w.languages ? extRow('notes.language', select('c3set-notes-language', EXT['notes.language'][2], w.languages.map((l) => [l.value, l.label]), w.language, (v) => notesSwitch({ language: v }, 'notes.language', { language: w.language }), !!langOv), { scope: 'computer', forId: 'c3set-notes-language' }) : null,
+        w.language !== 'auto' ? storeRow('rec.guard') : null, storeRow('rec.echo'), storeRow('rec.settle'), M.ws ? storeRow('rec.vocab') : null], 'mic'),
+      group('After Stop', [storeRow('rec.final'),
+        fin && val('rec.final') !== false ? lockedRow('notes.final', 'Final transcriber', 'Picked from what is set up on this computer.', fin.transcriber === 'qwen' ? 'Qwen3-ASR' : fin.transcriber === 'parakeet' ? 'Parakeet' : fin.transcriber === 'whisper' ? 'Whisper, beam search' : 'None', 'computer') : null,
+        fin && val('rec.final') !== false ? lockedRow('notes.speakers', 'Separate speakers', 'Labels who said what. It runs when the speaker model is set up on this computer.', fin.speakers ? 'On, the speaker model is set up' : 'Off, no speaker model', 'computer') : null], 'mic'),
+      group('Audio', [extRow('notes.keep', swBtn(w.keep_audio !== false, EXT['notes.keep'][2], () => notesSwitch(flip('keep_audio', w.keep_audio === false), 'notes.keep', flip('keep_audio', w.keep_audio !== false))), { scope: 'computer' }),
+        w.keep_audio !== false ? extRow('notes.clean', swBtn(w.clean_audio === true, EXT['notes.clean'][2], () => notesSwitch(flip('clean_audio', w.clean_audio !== true), 'notes.clean', flip('clean_audio', w.clean_audio === true))), { scope: 'computer' }) : null,
+        w.keep_audio !== false ? storeRow('rec.retain') : null], 'mic'),
+      M.ws && j ? group('Jev', [extRow('notes.jev', swBtn(!!j.jev, EXT['notes.jev'][2], () => notesSwitch({ jev: !j.jev }, 'notes.jev', { jev: !!j.jev })), { scope: 'ws', note: j.paused || null }),
+        extRow('notes.check', swBtn(!!j.check, EXT['notes.check'][2], () => notesSwitch({ check: !j.check }, 'notes.check', { check: !!j.check })), { scope: 'ws' })], 'mic') : null,
+    ];
+  }
+
+  function timeSec() {
+    const now = new Date();
+    const part = dayPartOf(now);
+    const hh = (h) => String(h).padStart(2, '0') + ':00';
+    return [fold('clock', 'Now: ' + part[0].toUpperCase() + part.slice(1) + ' · ' + String(now.getHours()).padStart(2, '0') + ':' + String(now.getMinutes()).padStart(2, '0') + ' · working hours ' + hh(val('time.workStart') ?? 9) + ' to ' + hh(val('time.workEnd') ?? 18) + '. Parts of the day follow your clock; the Briefing never reshuffles while you read.', null),
+      group('Where and when', [storeRow('time.zone'),
+        notYet('time.place', 'Location for daylight', 'Sunrise and sunset are worked out on this computer from an approximate place. No network (D6).', 'Today the place comes from your time zone. Picking a place comes later.', 'computer'),
+        storeRow('time.weekStart')], 'sun'),
+      group('Your day', [storeRow('time.workStart'), storeRow('time.workEnd'),
+        lockedRow('time.parts', 'Parts of the day', 'Morning until 11:00, midday until 14:00, afternoon until 17:00, evening until 21:00, then night.', 'Follows your clock', 'computer'),
+        lockedRow('time.idle', 'When cards re-rank', 'A new part of the day never reshuffles cards while you read.', 'Only when idle or on reload', 'computer'),
+        storeRow('time.prep'), storeRow('time.buffer')], 'sun'),
+      group('Ambience', [storeRow('time.tint'), storeRow('time.strip'),
+        lockedRow('time.motion', 'Motion', 'Fades and slides when cards move. Reduce motion in your system settings to turn them off.', 'Same as system', 'computer'),
+        lockedRow('time.weather', 'Weather', 'Weather needs a network request, which PMOS does not make (D6).', 'Off', 'computer')], 'sun')];
+  }
+
+  function sharingSec() {
+    if (!M.ws) return [fold(null, 'Pick a workspace at the top to set who its dashboards go to.')];
+    const s = S('share.audiences'); const aud = s ? s.value : {};
+    const sender = val('conn.sender');
+    const senderName = (LABELS['conn.sender'][3] || {})[sender] || sender;
+    const save = (next, msg, prev) => setStore('share.audiences', next, true).then((ok) => { if (ok) toast(msg, () => setStore('share.audiences', prev, true)); });
+    const rows = Object.entries(aud).map(([name, people]) => {
+      const inp = el('input', { type: 'text', placeholder: 'Add a person', 'aria-label': 'Add a person to ' + name, maxlength: '60', autocomplete: 'off' });
+      const addP = () => { const v = inp.value.trim(); if (!v) return; const next = JSON.parse(JSON.stringify(aud)); next[name] = [...people, v]; save(next, 'Added ' + v + ' to ' + name, aud); };
+      inp.addEventListener('keydown', (e) => { if (e.key === 'Enter') addP(); });
+      return el('li', { class: 'nrow', 'data-c3set-aud': name }, el('span', { class: 'ki' }, c3ic('user')),
+        el('div', { class: 'nb' }, el('span', { class: 'tt' }, name), el('div', { class: 'chips' }, scopeTag('ws')),
+          help(name === 'Leadership' ? 'Short: one sentence per report, and what needs a decision.' : name === 'Team' ? 'Fuller: the numbers behind each sentence.' : ''),
+          el('div', { class: 'chips' }, ...(people.length ? people.map((p) => bt({ type: 'button', class: 'chip2 lk', 'aria-label': 'Remove ' + p + ' from ' + name, title: 'Remove ' + p + ' from ' + name, onclick: () => { const next = JSON.parse(JSON.stringify(aud)); next[name] = people.filter((x) => x !== p); save(next, 'Removed ' + p, aud); } }, p, c3ic('x', 'sm'))) : [el('span', { class: 'dim' }, 'Nobody yet')]))),
+        el('div', { class: 'acts' }, inp, btn('Add', { onclick: addP })));
+    });
+    return [sect('Sender', [help(sender === 'none' ? 'Nothing is sent until you pick a sender. ' : 'Shares can go out through ' + senderName + '. ', 'Change it in ', secLink('connectors', 'Connectors'), '.')],
+      { ic: 'mail', right: tag(sender === 'none' ? 'Not connected' : senderName, sender === 'none' ? 'warn' : 'ok') }),
+    group('Sending', [storeRow('share.mode', { disabled: sender === 'none', lock: sender === 'none' ? 'Connect a sender in Connectors first. Until then every share is a draft.' : null })], 'mail'),
+    group('Detail level', [notYet('share.detail', 'Detail for each audience', 'Short is one sentence per report and what needs a decision. Full adds the numbers behind each sentence.', 'The Share sheet sets the detail for each send. A default per audience comes later.', 'ws')], 'mail'),
+    sect('Audiences', [list(rows), M.err['share.audiences'] ? fold('alert', M.err['share.audiences'], 'w') : null], { ic: 'user', count: rows.length }),
+    sect('Scheduled shares', [fold(null, 'Each schedule is set on its dashboard in Reports. When dashboards can be scheduled, they are listed here so you can see everything that goes out.', null, btn('Open Reports', { variant: 'ghost', ic: 'next', onclick: () => ctx.goTab && ctx.goTab('rep') }))], { ic: 'clock' })];
+  }
+
+  function accessSec() {
+    const o = M.online;
+    const later = [sect('Open on your phone', [list([notYet('access.pair', 'Phone access', 'Scan a one-time code with your phone to pair it.', 'Pairing with a code comes later. Today, switch Online on and sign in from the phone.', 'computer')])], { ic: 'phone' }),
+      sect('Signed-in devices', [list([notYet('access.devices', 'Devices', 'The computers and phones signed in to this PMOS, each with Sign out.', 'The device list comes later. Cloudflare Access lists sign-ins today.', 'computer')])], { ic: 'user' })];
+    if (!o) return [fold(null, 'Reading the Online switch.'), ...later];
+    if (o.error) return [fold('alert', 'The Online switch could not be read: ' + o.error + '.', 'w'), ...later];
+    if (o.envHost) return [group('Online', [frame({ key: 'online.on', label: 'Online', help: 'PMOS_PUBLIC_HOST=' + o.envHost + ' was set when PMOS started, so it is already online that way.', control: locked('On, from the environment') })], 'phone'), ...later];
+    const F = [['host', 'Public hostname', 'pmos.example.com'], ['tunnel', 'Tunnel name', 'pmos-mac'], ['team', 'Cloudflare team domain', 'myteam.cloudflareaccess.com'], ['audience', 'Access audience tag', '64 letters and digits'], ['email', 'Email allowed in', 'you@example.com']];
+    const inputs = {};
+    const fieldRows = F.map(([k, l, ph]) => { inputs[k] = el('input', { type: 'text', id: 'c3set-online-' + k, value: o[k] || '', placeholder: ph, disabled: !o.canChange, autocomplete: 'off' }); return frame({ key: 'online.' + k, label: l, forId: 'c3set-online-' + k, control: inputs[k] }); });
+    const post = async (patch, msg) => { const r = await pmPost('/api/online', patch); if (r && r.ok !== false) { M.online = r; delete M.err['online.on']; toast(msg || 'Saved: Online'); } else M.err['online.on'] = (r && r.error) || 'Not saved.'; draw(); };
+    const values = () => Object.fromEntries(F.map(([k]) => [k, inputs[k].value.trim()]));
+    const running = o.on && o.running && o.running.running;
+    return [group('Online', [extRow('online.on', swBtn(o.on, 'Online', () => post({ ...values(), on: !o.on }, o.on ? 'Online is off' : 'Online is on'), { disabled: !o.canChange }), { scope: 'computer',
+      note: !o.canChange ? 'Only the computer that runs PMOS can change this.' : !o.cloudflared ? 'cloudflared is not installed. Install it with brew install cloudflared, then switch Online on.' : null })], 'phone'),
+    running ? fold('check', 'Tunnel running · cloudflared found' + (o.lastRefusal ? '' : ' · no refused sign-in'), 'a') : null,
+    sect('Tunnel and sign-in', [list(fieldRows), o.canChange ? el('div', { class: 'iacts' }, btn('Save', { variant: 'primary', onclick: () => post(values()) })) : null,
+      o.lastRefusal ? help('Last refused sign-in: ' + o.lastRefusal.reason) : null], { ic: 'phone' }),
+    ...later];
+  }
+
+  function sessionsSec() {
+    const d = sessionDefaults(); const p = M.profiles;
+    const profs = (p && p.profiles) || [];
+    const setDef = (patch, key, undo) => { setSessionDefaults(patch); toast('Saved: ' + EXT[key][2], () => { setSessionDefaults(undo); draw(); }); draw(); };
+    const def = profileNow().id;
+    const profRows = profs.map((x) => el('li', { class: 'nrow', 'data-c3set-prof': x.id }, el('span', { class: cx('ki', def === x.id && 'hot') }, c3ic('user')),
+      el('div', { class: 'nb' }, el('span', { class: 'tt' }, (x.label || x.id) + ' ', el('span', { class: 'dim mono' }, x.id)),
+        el('div', { class: 'chips' }, def === x.id ? tag('Default', 'acc') : null, x.detected ? tag('Detected') : null, chip('Connectors: ' + (x.mcp && x.mcp.length ? x.mcp.join(', ') : 'none')))),
+      el('div', { class: 'acts' }, def === x.id ? null : btn('Make default', { variant: 'ghost', onclick: () => chooseProfile(x.id) }))));
+    const run = M.running || [];
+    const max = val('sess.max');
+    const runRows = run.map((s) => el('li', { class: 'nrow' }, el('span', { class: 'ki' }, c3ic('term')),
+      el('div', { class: 'nb' }, el('span', { class: 'tt' }, s.title || s.name || s.label || s.id),
+        el('div', { class: 'chips' }, s.ws ? chip(wsName(s.ws)) : null, s.profile ? chip('profile ' + s.profile) : null, s.state || s.status ? tag(String(s.state || s.status), /idle/i.test(String(s.state || s.status)) ? 'warn' : 'ok') : null))));
+    return [group('New sessions', [
+      extRow('sess.cli', seg('Start with', [['claude', 'Claude Code'], ['shell', 'A shell']], d.cli, (v) => setDef({ cli: v }, 'sess.cli', { cli: d.cli })), { scope: 'computer', note: 'Kept in this browser, as the dock keeps it.' }),
+      extRow('sess.tier', seg('Model', [['auto', 'Auto'], ['fast', 'Fast'], ['balanced', 'Balanced'], ['deep', 'Deep']], d.tier, (v) => setDef({ tier: v }, 'sess.tier', { tier: d.tier })), { scope: 'computer' }),
+      extRow('sess.profile', profileSelect('c3set-sess-profile'), { scope: 'computer', forId: 'c3set-sess-profile', note: profs.length ? null : p ? 'No profile was found. Make one in the main app\'s Settings, Profiles.' : 'Reading profiles.' }),
+      lockedRow('sess.flags', 'Launch flags', 'Flags for the claude command, such as a permission mode.', 'Set when you start a session', 'computer')], 'term'),
+    profs.length ? sect('Profiles', [list(profRows), help('A new profile is made in the main app\'s Settings, Profiles.')], { ic: 'user', count: profs.length }) : null,
+    groupOf('sessions', 'Housekeeping', 'term'),
+    sect('Running now' + (M.running ? ' · ' + run.length + (max ? ' of ' + max : '') : ''), [M.running ? (run.length ? list(runRows) : fold(null, 'No sessions running.')) : fold(null, 'Reading the sessions.'),
+      help('Close a session from the dock at the bottom of the page.')], { ic: 'term' }),
+    M.ws ? group('Workspace', [extRow('validate.consent', M.consent && !M.consent.error ? swBtn(M.consent.on, EXT['validate.consent'][2], async () => { const r = await pmPost('/api/validate/repo', { ws: M.ws, consent: !M.consent.on }); if (r && r.ok !== false) { M.consent.on = !!r.consent; toast('Saved: validate consent'); } else M.err['validate.consent'] = (r && r.error) || 'Not saved.'; draw(); }) : el('span', { class: 'dim' }, M.consent ? M.consent.error : 'Reading'), { scope: 'ws' })], 'term') : null];
+  }
+
+  function privacySec() {
+    const w = M.engine && M.engine.whisper; const j = M.engine && M.engine.jev; const o = M.online;
+    const jevOn = !!(j && (j.jev || j.check));
+    const L = [
+      ['Nothing, by default', 'PMOS makes no network request of its own (D69 to D71).', 'Always', 'ok'],
+      ['Update check', 'Asks the npm registry for the latest version.', val('upd.check') === 'daily' ? 'Once a day' : 'Only when you press Check', val('upd.check') === 'daily' ? 'warn' : ''],
+      ['Online tunnel', 'Cloudflare carries your pages to your other devices (D89).', o && o.on ? 'On' : 'Off', o && o.on ? 'warn' : ''],
+      ['Jev (TypeSafe)', 'Note lines and matching passages. Never audio, names or private notes (D79).', M.ws ? (jevOn ? 'On in ' : 'Off in ') + wsName(M.ws) : 'Pick a workspace', jevOn ? 'warn' : ''],
+      ['Your connected tools', 'Calendar, Jira, Wispr Flow and the sender are reached by your Claude session, not by PMOS.', 'Through profile ' + (profileNow().id || 'none'), ''],
+    ];
+    const leave = L.map(([t, h, s, tone]) => el('li', { class: 'nrow' }, el('span', { class: cx('ki', tone === 'ok' ? 'hot' : tone === 'warn' ? 't-warn' : '') }, c3ic(tone === 'ok' ? 'lock' : 'out')),
+      el('div', { class: 'nb' }, el('span', { class: 'tt' }, t), help(h)), el('div', { class: 'acts' }, tag(s, tone))));
+    return [sect('What leaves this computer', [list(leave)], { ic: 'shield', attrs: { 'data-c3set-leaves': '' } }),
+      sect('Keys and files', [list([
+        frame({ key: 'typesafe', label: 'TypeSafe key', help: 'Kept on this computer only. It is never shown, here or anywhere.', scope: 'computer', control: M.typesafe ? tag(M.typesafe.present ? 'Saved' : 'None', M.typesafe.present ? 'ok' : '') : tag('Reading') }),
+        frame({ key: 'state', label: 'Data folder', help: 'Notes, audio, settings and caches. Outside every repository, so no commit can carry them.', scope: 'computer', control: chip((M.data && M.data.state_dir) || '', 'mono st-wrap-text') }),
+        lockedRow('priv.cards', 'Send card text to Jev for icons', 'Card kinds and icons are chosen by code rules on this computer (D7).', 'Off', 'computer'),
+        notYet('priv.export', 'Export or reset every setting', 'Save every setting to a file, or put them all back to their defaults. Your workspaces, notes and audio stay.', 'Export and reset all come later. Reset one setting or one section with its Reset button.', 'computer')]),
+      el('div', { class: 'iacts' }, btn('Export settings', { ic: 'out', disabled: true }), btn('Reset all settings', { variant: 'ghost', disabled: true }), w && w.keep_audio !== false ? btn('Recording settings', { variant: 'ghost', ic: 'next', onclick: () => goSec('recording') }) : null)], { ic: 'lock' })];
+  }
+
+  function appearanceSec() {
+    const pref = ctx.themePref || ctx.theme;
+    return [group('Look', [extRow('look.theme', seg('Theme', [['system', 'Same as system'], ['light', 'Light'], ['dark', 'Dark']], pref, (v) => { const before = ctx.themePref || ctx.theme; if (ctx.setTheme) ctx.setTheme(v); ctx.themePref = v; ctx.theme = v; toast('Saved: theme', () => { if (ctx.setTheme) ctx.setTheme(before); ctx.themePref = before; ctx.theme = before; draw(); }); draw(); }), { scope: 'computer', note: 'Kept in this browser.' }),
+      storeRow('look.start'),
+      lockedRow('look.icons', 'Card icons', 'Chosen from the built-in icon set by the card kind (D7).', 'Chosen by code rules', 'computer')], 'eye')];
+  }
+
+  function updatesSec() {
+    const rows = (ctx.workspaces || []).map((w) => {
+      const k = M.kits[w.id];
+      const kit = k && k.kit; const behind = k && k.kitBehind;
+      return el('li', { class: 'nrow', 'data-c3set-kit': w.id }, el('span', { class: 'ki' }, c3ic('repo')),
+        el('div', { class: 'nb' }, el('span', { class: 'tt' }, w.label || w.name || w.id),
+          el('div', { class: 'chips' }, chip(!k ? 'Reading' : k.error ? k.error : kit && kit.present ? 'kit ' + (kit.version || 'vendored by hand') : 'no kit in this workspace', 'mono'),
+            k && k.latest ? (behind ? tag(k.latest + ' available', 'warn') : tag('Up to date', 'ok')) : null),
+          M.err['kit:' + w.id] ? fold('alert', M.err['kit:' + w.id], 'w') : null),
+        el('div', { class: 'acts' }, behind ? btn('Update', { variant: 'primary', onclick: async () => { const r = await pmPost('/api/kit/update', { ws: w.id }); if (r && r.ok) { M.kits[w.id] = { ...M.kits[w.id], ...r, kitBehind: false }; toast('Updated the kit in ' + (w.label || w.name || w.id)); } else M.err['kit:' + w.id] = (r && r.error) || 'Not updated.'; draw(); } }) : null));
+    });
+    const first = (ctx.workspaces || [])[0];
+    const st = first && M.kits[first.id];
+    const app = st && st.app; const appBehind = st && st.appBehind;
+    const appRow = frame({ key: 'upd.app', label: 'PMOS app ' + ((app && app.version) || ''),
+      help: appBehind ? 'The app update restarts PMOS. Run it from the main app\'s Settings, Updates, which waits for the restart.' : 'Press Check now to ask the npm registry for the latest version.',
+      control: [st && st.latest ? tag(appBehind ? st.latest + ' available' : 'Up to date', appBehind ? 'acc' : 'ok') : null,
+        btn('Check now', { ic: 'undo', disabled: !first, attrs: { 'data-c3set-check': '' }, onclick: async () => {
+          for (const w of ctx.workspaces || []) { const r = await pmPost('/api/kit/check', { ws: w.id }); M.kits[w.id] = r && r.ok ? r : { ...(M.kits[w.id] || {}), error: (r && r.error) || 'The check failed.' }; }
+          const s2 = first && M.kits[first.id]; toast(s2 && s2.appBehind ? 'PMOS ' + s2.latest + ' is available' : 'Checked. PMOS is up to date'); draw();
+        } }),
+        appBehind ? btn('Open the main app', { variant: 'primary', onclick: () => { location.href = '/'; } }) : null] });
+    return [sect('PMOS app', [list([appRow])], { ic: 'cloud' }), sect('Kit in each workspace', [list(rows)], { ic: 'repo', count: rows.length }), groupOf('updates', 'When', 'cloud')];
+  }
+
+  const BUILD = { about: aboutSec, workspaces: workspacesSec, boards: boardsSec, connectors: connectorsSec, recording: recordingSec, time: timeSec, sharing: sharingSec, access: accessSec, sessions: sessionsSec, privacy: privacySec, appearance: appearanceSec, updates: updatesSec };
+
+  function searchView() {
+    const hits = rowsMatching(M.q);
+    const secs = SECTIONS.filter(([, t, , i]) => (t + ' ' + i).toLowerCase().includes(M.q.toLowerCase()));
+    if (!hits.length && !secs.length) return [el('div', { class: 'fold', 'data-c3set-none': '' }, 'No setting matches "' + M.q + '". Try a word like language, Jira or hours.')];
+    const by = new Map();
+    for (const [k, sec] of hits) { if (!by.has(sec)) by.set(sec, []); by.get(sec).push(k); }
+    return [secs.length ? el('div', { class: 'iacts' }, ...secs.map(([id, t, ic]) => btn(t, { ic, onclick: () => goSec(id) }))) : null,
+      ...[...by.entries()].map(([sec, keys]) => {
+        const meta = SECTIONS.find((s) => s[0] === sec);
+        const other = (k) => { const a = k.startsWith('you.') ? ABOUT.find((f) => 'you.' + f[0] === k) : null; return a ? [a[1], a[2]] : [EXT[k][2], EXT[k][3]]; };
+        const rows = keys.map((k) => (LABELS[k] ? storeRow(k) : frame({ key: k, label: other(k)[0], help: other(k)[1], control: btn('Open in ' + meta[1], { variant: 'ghost', ic: 'next', onclick: () => goSec(sec) }) })));
+        return sect(meta[1], [list(rows)], { ic: meta[2], count: rows.filter(Boolean).length, right: btn('Open section', { variant: 'ghost', ic: 'next', onclick: () => goSec(sec) }) });
+      })];
+  }
+
+  function fillWs() {
+    wsSel.replaceChildren(...(ctx.workspaces || []).map((w) => el('option', { value: w.id, selected: w.id === M.ws }, w.label || w.name || w.id)));
+    if (!(ctx.workspaces || []).length) wsSel.append(el('option', { value: '' }, 'No workspace'));
+  }
+
+  /* The section list is built once and updated in place: rebuilding it under the pointer would lose the press that moved the focus. */
+  const navBtns = SECTIONS.map(([id, t, ic]) => {
+    const badge = el('span', { class: 'bdg', hidden: true });
+    const b = bt({ type: 'button', class: 'nrow', 'aria-current': 'false', 'data-c3set-sec': id, onclick: () => goSec(id) },
+      el('span', { class: 'ki' }, c3ic(ic)), el('span', { class: 'nb' }, el('span', { class: 'tt' }, t)), badge);
+    return { id, b, badge };
+  });
+  nav.replaceChildren(...navBtns.map((x) => el('li', null, x.b)));
+  const segBtns = SECTIONS.map(([id, t, ic]) => ({ id, b: bt({ type: 'button', 'aria-pressed': 'false', 'data-c3set-seg-sec': id, onclick: () => goSec(id) }, c3ic(ic, 'sm'), t) }));
+  segRow.replaceChildren(el('div', { class: 'seg', role: 'group', 'aria-label': 'Settings sections' }, ...segBtns.map((x) => x.b)));
+  function paintNav() {
+    for (const x of navBtns) {
+      const n = changedIn(x.id);
+      x.b.setAttribute('aria-current', String(!M.q && M.sec === x.id));
+      x.badge.hidden = !n; x.badge.textContent = n ? String(n) : ''; x.badge.title = n ? n + ' changed from the default' : '';
+    }
+    for (const x of segBtns) x.b.setAttribute('aria-pressed', String(!M.q && M.sec === x.id));
+  }
+  /* A press that takes the focus out of a field blurs it before its click lands: redraw after that click, not under it. */
+  let pressing = false;
+  document.addEventListener('pointerdown', () => { pressing = true; }, true);
+  document.addEventListener('pointerup', () => { setTimeout(() => { pressing = false; }, 0); }, true);
+  function drawAfterBlur() {
+    const go = () => { if (draw.pending) { draw.pending = false; draw(); } };
+    if (pressing) document.addEventListener('click', () => setTimeout(go, 0), { capture: true, once: true }); else go();
+  }
+  const changedIn = (id) => (M.data ? M.data.settings.filter((s) => s.changed && sectionOfStore(s.key) === id).length : 0);
+  function draw() {
+    // never rebuild under a field the PM is typing in
+    const a = document.activeElement;
+    if (a && body.contains(a) && ((a.tagName === 'INPUT' && a.type === 'text') || a.tagName === 'TEXTAREA')) { if (!draw.pending) { draw.pending = true; a.addEventListener('blur', drawAfterBlur, { once: true }); } return; }
+    paintNav();
+    if (M.q) { body.replaceChildren(...searchView().filter(Boolean)); return; }
+    const [id, title, ic, intro] = SECTIONS.find((s) => s[0] === M.sec);
+    const needsStore = id !== 'about';
+    const parts = M.data || !needsStore ? BUILD[id]() : [fold(null, 'Reading the settings.')];
+    const n = changedIn(id);
+    body.replaceChildren(el('div', { class: 'st-sec', 'data-c3set-section': id, 'aria-labelledby': 'c3set-h-' + id },
+      el('div', { class: 'lh' }, el('span', { class: 'ki hot' }, c3ic(ic)), el('div', null, el('b', { id: 'c3set-h-' + id }, title), intro ? el('span', { class: 'dim' }, intro) : null),
+        el('div', { class: 'acts' }, n ? btn('Reset section', { variant: 'ghost', onclick: () => resetSection(id), attrs: { 'data-c3set-reset-sec': id } }) : null)),
+      M.data && M.data.error && needsStore ? fold('alert', M.data.error, 'w') : null,
+      ...parts.filter(Boolean)));
+  }
+
+  fillWs(); draw(); loadWs(); loadOnce();
+  return { show: (sec) => { if (SECTIONS.some((s) => s[0] === sec)) goSec(sec); }, refresh: () => { loadWs(); pmGet('/api/sessions').then((r) => { M.running = r && Array.isArray(r.sessions) ? r.sessions : null; draw(); }); } };
+}