create-pmos 0.134.0 → 0.135.0

package/workspace/public/pm/welcome.js

@@ -1,28 +1,39 @@
 /* pm/welcome.js — the first-run page (/welcome). One primary button per screen.
  *
- *   Welcome → First look → Your portfolio → Questions (only when the scan left any) → First Briefing → More sources
+ *   About you → Your sources → First look → Your portfolio → Questions (only when the scan left any) → First Briefing
  *
  * Routes (lib/routes-onboarding.js): GET /api/onboarding/status|structure|briefing, POST /api/onboarding/scan|apply|undo.
- * More sources uses POST /api/sources/refresh (lib/routes-sources.js): it starts the source's read-only skill as a session in
- * the workspace with the PM's own connection. Nothing is read until the PM presses Bring in; the server calls nothing outside.
+ * About you saves the name, role, work and job description to the proactive settings (POST /api/proactive/settings
+ * {name, about}); the brief and the day check read them from `pmos proactive settings`.
+ * Your sources lists the folders and the tools. A ticked tool starts when the PM presses Scan: Calendar and Jira through
+ * POST /api/sources/refresh (lib/routes-sources.js), which starts the source's read-only skill as a session with the PM's
+ * own connection; Inbox and Slack are sources of the daily brief, so they are turned on (briefSources) and the day is
+ * prepared once (POST /api/proactive/goals/plan). Nothing is read before the press; the server calls nothing outside.
  * Presses carry the launch nonce through pm/http.js. The page writes nothing itself; text taken from the scanned folder is
  * untrusted, so every value goes through esc() and no quoted text from a file is shown.
  * data-testid attributes are the browser suite's handles.
  */
 import { pmGet, pmPost } from './http.js';
+import { el } from './dom.js';
+import { button, field, SEL } from './primitives.js';
+import { ensureC3Css } from './pm-work-view.js';
+import { applyDayPart } from './c3-daypart.js';
 
 const root = document.getElementById('wl-root');
 const params = new URLSearchParams(location.search);
 const S = {
   ws: params.get('ws') || '', folder: null, added: [], step: 'welcome', busy: '', error: '', note: '',
-  look: null, structure: null, checked: {}, titles: {}, boardOf: {}, open: {}, answers: {}, skipped: {}, importId: '', briefing: [], sources: {},
+  about: { name: '', role: '', work: '', duties: '' }, pick: {},
+  look: null, structure: null, checked: {}, titles: {}, boardOf: {}, open: {}, edit: {}, answers: {}, skipped: {}, importId: '', briefing: [], sources: {},
 };
-const STEPS = [['welcome', 'Welcome'], ['look', 'First look'], ['portfolio', 'Your portfolio'], ['questions', 'Questions'], ['briefing', 'First Briefing'], ['sources', 'More sources']];
-/* The sources a first run can bring in. `source` is a lib/freshness.js SOURCES id with a read-only skill. Inbox and Slack
- * have no import skill yet, so the page says so instead of offering a button that cannot work. */
-const MORE_SOURCES = [
+const STEPS = [['welcome', 'About you'], ['sources', 'Your sources'], ['look', 'First look'], ['portfolio', 'Your portfolio'], ['questions', 'Questions'], ['briefing', 'First Briefing']];
+/* The tools a first run can read besides the folders. `source` is a lib/freshness.js SOURCES id with a read-only skill; `brief` is a
+ * lib/proactive.js BRIEF_SOURCES key that the morning brief reads when it is on. */
+const TOOLS = [
   { source: 'calendar', name: 'Calendar', adds: 'Your meetings today and for the next 14 days, so the Briefing can get you ready for them.' },
   { source: 'my-work', name: 'Jira', adds: 'The Jira issues assigned to you, so My work starts with them.' },
+  { source: 'inbox', brief: 'mail', name: 'Inbox', adds: 'The threads waiting on you, by subject and sender only, in your daily Briefing. No message text is kept.' },
+  { source: 'slack', brief: 'slack', name: 'Slack', adds: 'Messages that mention you and your direct messages, as short summaries in your daily Briefing.' },
 ];
 
 const esc = (v) => String(v == null ? '' : v).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
@@ -37,7 +48,7 @@ function counts() {
   return { n: on.length, m: new Set(on.map(boardOfRow)).size };
 }
 function adopt(structure) {
-  S.structure = structure; S.checked = {}; S.titles = {}; S.boardOf = {}; S.open = {}; S.answers = {}; S.skipped = {};
+  S.structure = structure; S.checked = {}; S.titles = {}; S.boardOf = {}; S.open = {}; S.edit = {}; S.answers = {}; S.skipped = {};
   for (const r of rowsOf()) { S.checked[r.proposal_id] = !!r.checked; S.titles[r.proposal_id] = r.title; }
 }
 function revisions() {
@@ -75,7 +86,29 @@ const addFolder = () => run('add', async () => {
   if (!w || !w.workspace) { fail(w, 'Adding the folder'); return; }
   if (!S.added.some((a) => a.id === w.workspace.id) && w.workspace.id !== S.ws) S.added.push({ id: w.workspace.id, name: w.workspace.name, root: w.workspace.root });
 });
+const saveAbout = () => run('about', async () => {
+  const a = S.about;
+  const r = await pmPost('/api/proactive/settings', { name: a.name.trim().slice(0, 40), about: { role: a.role.trim(), work: a.work.trim(), duties: a.duties.trim() } });
+  if (!r || !r.ok) { fail(r, 'Saving what you told PMOS'); return; }
+  S.step = 'sources';
+});
+/* Start the ticked tools: each one is its own read-only agent session. A tool that cannot start says why on its row and
+ * does not stop the folder scan. */
+async function startTools() {
+  const picked = TOOLS.filter((x) => S.pick[x.source]);
+  const brief = picked.filter((x) => x.brief);
+  if (brief.length) {
+    const on = await pmPost('/api/proactive/settings', { briefSources: Object.fromEntries(brief.map((x) => [x.brief, true])) });
+    const r = on && on.ok ? await pmPost('/api/proactive/goals/plan', { ws: S.ws }) : on;
+    for (const x of brief) S.sources[x.source] = r && r.ok ? { started: true } : { error: (r && r.error) || 'Starting the read did not work.' };
+  }
+  for (const x of picked.filter((t) => !t.brief)) {
+    const r = await pmPost('/api/sources/refresh', { ws: S.ws, source: x.source });
+    S.sources[x.source] = r && r.ok ? { started: true } : { error: (r && r.error) || 'Starting the read did not work.' };
+  }
+}
 const scan = () => run('scan', async () => {
+  await startTools();
   const r = await pmPost('/api/onboarding/scan', { ws: S.ws, extra_roots: S.added.map((a) => a.root) });
   if (!r || !r.ok) { fail(r, 'The scan'); return; }
   S.look = r.first_look; S.step = 'look';
@@ -101,7 +134,7 @@ const importNow = () => {
   if ((S.structure.questions || []).length && S.step !== 'questions') { S.step = 'questions'; render(); return; }
   run('apply', applyNow);
 };
-// "Not now": Welcome stops opening on its own for this folder (`pmos welcome` still opens it), then the console opens
+// "Not now" and "Skip setup": Welcome stops opening on its own for this folder (`pmos welcome` still opens it), then the console opens
 const notNow = () => run('dismiss', async () => {
   const r = await pmPost('/api/onboarding/dismiss', { ws: S.ws });
   if (!r || !r.ok) { fail(r, 'Not now'); return; }
@@ -115,111 +148,172 @@ const undo = () => run('undo', async () => {
 });
 
 /* ── views ───────────────────────────────────────────────────────────────────────────────────────────────────────── */
-const spin = (txt) => `<span class="wl-spin" data-testid="loading" aria-hidden="true"></span>${esc(txt)}`;
+/* Drawn with console3 parts (console3.css): .card.sect > .sh2, ul.list > li.nrow (.ki, .nb, .tt, .chips, .acts), .chip2, .tag,
+ * .bdg, .fold, .pbar, .xp. Buttons and checkboxes are the primitives (primitives.js button() and field()): a view writes a
+ * placeholder through ctl() and render() puts the primitive in its place. The .wl- rules in components.css add only the
+ * frame, the progress labels, the footer bar and the field blocks (the approved console3 mockup's Welcome page). Each step
+ * view returns [body, footer]. */
+const ICONS = { folder: 'repo', board: 'cols', tools: 'org' };
+const ic = (n, cls) => `<svg class="ic${cls ? ' ' + cls : ''}" aria-hidden="true"><use href="#c3i-${ICONS[n] || n}"></use></svg>`;
+const spin = (txt) => `<span class="wl-spindot" data-testid="loading" aria-hidden="true"></span>${esc(txt)}`;
+const dis = (on) => (on ? 'disabled' : '');
+/* Controls drawn this render: ctl(spec) returns a placeholder, mountControls() swaps each for its primitive.
+ * spec: { variant, size, html (the label, already escaped), attrs, href, lead (a console3 icon) } or { check, text, value, attrs }. */
+let CTL = [];
+const ctl = (spec) => { CTL.push(spec); return `<span data-wl-ctl="${CTL.length - 1}"></span>`; };
+function mountControls() {
+  for (const ph of root.querySelectorAll('[data-wl-ctl]')) {
+    const c = CTL[Number(ph.getAttribute('data-wl-ctl'))];
+    let node;
+    if (c.check) node = field({ label: c.text, kind: 'check', value: !!c.value, attrs: c.attrs });
+    else {
+      const { disabled, ...attrs } = c.attrs;   // button() takes disabled on its own; a key in attrs would override it
+      const b = button({ label: '', variant: c.variant, size: c.size, disabled: !!disabled, attrs });
+      b.querySelector(SEL.btnLabel).innerHTML = c.html;
+      if (c.lead) b.insertAdjacentHTML('afterbegin', ic(c.lead, 'sm'));
+      if (c.href) { node = el('a', { ...attrs, class: b.className, href: c.href }); node.append(...b.childNodes); } else node = b;
+    }
+    ph.replaceWith(node);
+  }
+}
+const busyAttrs = (key) => (S.busy === key ? { 'aria-busy': 'true' } : {});
+const primary = (id, text, busyKey, busyText, off) => ctl({ variant: 'primary', html: S.busy === busyKey ? spin(busyText) : esc(text), attrs: { class: 'wl-primary', 'data-testid': id, disabled: !!(S.busy || off), ...busyAttrs(busyKey) } });
+const ghost = (id, text, more) => ctl({ variant: 'ghost', html: esc(text), attrs: { 'data-testid': id, disabled: !!S.busy, ...(more || {}) } });
+const head = (h, lead, leadId) => `<header class="wl-head"><h1>${esc(h)}</h1>${lead ? `<p class="wl-lead"${leadId ? ` data-testid="${leadId}"` : ''}>${esc(lead)}</p>` : ''}</header>`;
+const sub = (title, icon, right, count) => `<div class="sh2"><h2>${icon ? ic(icon, 'sm') : ''}${title}${count != null ? ` <span class="bdg g">${count}</span>` : ''}</h2>${right || ''}</div>`;
+const pathChip = (t, attrs) => `<span class="chip2"${attrs ? ' ' + attrs : ''}>${ic('doc', 'sm')}${esc(t)}</span>`;
+const foot = (left, right) => `<footer class="wl-foot"><div>${left || ''}</div><div>${right}</div></footer>`;
+const backBtn = () => ghost('back-button', 'Back');
 
 function viewWelcome() {
+  const a = S.about;
+  const field = (k, text, hint, max) => `<div class="wl-fld"><label class="wl-flabel" for="about-${k}">${text}</label><input type="text" id="about-${k}" data-testid="about-${k}" maxlength="${max}" value="${esc(a[k])}" placeholder="${esc(hint)}" autocomplete="off"></div>`;
+  return [head('Welcome to PMOS', 'Tell PMOS who you are, so your Briefing knows what matters to you. Every field is optional, and you can change them later in Settings.')
+    + field('name', 'Your name', 'For example: Dana', 40)
+    + field('role', 'Your role', 'For example: Senior PM, Payments', 80)
+    + field('work', 'What you do', 'In one line, for example: I run checkout and the payment methods', 200)
+    + `<div class="wl-fld"><label class="wl-flabel" for="about-duties">Your job description</label><textarea id="about-duties" data-testid="about-duties" maxlength="1000" rows="5" placeholder="What you own, decide and deliver. Paste it from your job description if you like.">${esc(a.duties)}</textarea></div>`,
+  foot('', primary('about-continue', 'Continue', 'about', 'Saving'))];
+}
+
+function toolRow(x) {
+  const st = S.sources[x.source] || {};
+  return `<div class="wl-tool" data-testid="source-row" data-id="${esc(x.source)}">${ctl({ check: true, text: x.name, value: S.pick[x.source], attrs: { 'data-testid': 'source-check', 'data-id': x.source, disabled: !!S.busy } })}
+<span class="dim">${esc(x.adds)}</span>${st.error ? `<span class="wl-err" role="alert">${esc(st.error)}</span>` : ''}</div>`;
+}
+function viewSources() {
   const f = S.folder || { name: '', root: '' };
-  const added = S.added.length ? `<ul class="wl-added" data-testid="added-folders">${S.added.map((a) => `<li data-testid="added-folder">${esc(a.name)} <span class="wl-path">${esc(a.root)}</span></li>`).join('')}</ul>` : '';
-  return `<h1 class="wl-h1">Welcome to PMOS</h1>
-<p class="wl-p wl-muted">PMOS reads your folder and shows you what it found: your initiatives, your documents and what needs you first.</p>
-<section class="wl-card"><h2 class="wl-h2" data-testid="folder-name">${esc(f.name || 'This folder')}</h2><div class="wl-path" data-testid="folder-path">${esc(f.root)}</div>${added}
-<div class="wl-actions"><button type="button" class="wl-btn" data-testid="add-folder" ${S.busy ? 'disabled' : ''}>${S.busy === 'add' ? spin('Waiting for the chooser') : 'Add another folder'}</button></div>
-${S.note ? `<p class="wl-p wl-muted" data-testid="note">${esc(S.note)}</p>` : ''}</section>
-<p class="wl-promise" data-testid="promise">Reads only. Writes nothing in your folder. Nothing leaves this computer.</p>
-<div class="wl-actions"><button type="button" class="wl-btn wl-primary" data-testid="scan-button" ${S.busy ? 'disabled' : ''}>${S.busy === 'scan' ? spin('Scanning your folder') : 'Scan'}</button>
-<button type="button" class="wl-btn wl-quiet" data-testid="not-now" ${S.busy ? 'disabled' : ''}>Not now</button></div>
-${S.busy === 'scan' ? '<p class="wl-p wl-muted" data-testid="scan-wait">A large folder can take a minute or two. PMOS keeps working while it reads.</p>' : ''}`;
+  const n = TOOLS.filter((x) => S.pick[x.source]).length;
+  const added = S.added.map((a) => `<li class="nrow" data-testid="added-folder"><span class="ki">${ic('folder')}</span><div class="nb"><span class="tt">${esc(a.name)}</span><div class="chips"><span class="chip2">${esc(a.root)}</span></div></div><span></span></li>`).join('');
+  const folders = `<ul class="list" data-testid="added-folders"><li class="nrow"><span class="ki">${ic('folder')}</span><div class="nb"><span class="tt" data-testid="folder-name">${esc(f.name || 'This folder')}</span><div class="chips"><span class="chip2" data-testid="folder-path">${esc(f.root)}</span></div></div><div class="acts"><span class="tag">this folder</span></div></li>${added}</ul>`;
+  const addBtn = `<div>${ctl({ variant: 'outline', size: 'sm', lead: S.busy === 'add' ? '' : 'plus', html: S.busy === 'add' ? spin('Waiting for the chooser') : 'Add another folder', attrs: { 'data-testid': 'add-folder', disabled: !!S.busy, ...busyAttrs('add') } })}</div>`;
+  return [head('Where does your work live?', 'PMOS reads your folders and the tools you tick, then shows you your initiatives, your documents and what needs you first.')
+    + sub('Folders', 'folder', '', 1 + S.added.length) + folders + addBtn
+    + (S.note ? `<div class="fold" data-testid="note">${esc(S.note)}</div>` : '')
+    + sub('Tools', 'tools') + TOOLS.map(toolRow).join('')
+    + `<p class="dim wl-small" data-testid="promise">${ic('lock', 'sm')} Reads only. Writes nothing in your folders or your tools. PMOS sends nothing out: your agent reads the tools you tick with your own connection.</p>`
+    + (S.busy === 'scan' ? '<p class="dim wl-small" data-testid="scan-wait">A large folder can take a minute or two. The rest of PMOS keeps working.</p>' : ''),
+  foot(backBtn(), primary('scan-button', n ? `Scan the folder and read ${plural(n, 'tool', 'tools')}` : 'Scan', 'scan', 'Scanning your folder'))];
 }
 
+/* A numbered list (the number is drawn in the .ki by a CSS counter), one row per finding or Briefing item. */
+const numbered = (rows) => `<ol class="list wl-num" role="list">${rows}</ol>`;
 function viewLook() {
   const L = S.look || {};
-  const items = (L.findings || []).slice(0, 10).map((f) => `<li data-testid="finding"><strong>${esc(f.title)}</strong>${f.why ? `<div class="wl-muted">${esc(f.why)}</div>` : ''}<div class="wl-ref" data-testid="finding-ref">${esc(ref((f.evidence || [])[0]))}</div></li>`).join('');
-  return `<h1 class="wl-h1">First look</h1>
-<p class="wl-p" data-testid="first-look-sentence">${esc(L.sentence)}</p>
-<section class="wl-card"><h2 class="wl-h2">What matters most</h2>${items ? `<ol class="wl-findings">${items}</ol>` : '<p class="wl-p wl-muted" data-testid="no-findings">Nothing in this folder needs you urgently.</p>'}</section>
-<div class="wl-actions"><button type="button" class="wl-btn wl-primary" data-testid="continue-button" ${S.busy ? 'disabled' : ''}>${S.busy === 'structure' ? spin('Building your portfolio') : 'Continue'}</button></div>`;
+  const found = (L.findings || []).slice(0, 10);
+  const rows = found.map((f) => `<li class="nrow" data-testid="finding"><span class="ki"></span><div class="nb"><span class="tt"><b>${esc(f.title)}</b></span>${f.why ? `<div class="dim wl-small">${esc(f.why)}</div>` : ''}<div class="chips">${pathChip(ref((f.evidence || [])[0]), 'data-testid="finding-ref"')}</div></div><span></span></li>`).join('');
+  return [head('First look', L.sentence, 'first-look-sentence')
+    + sub('What matters most', 'spark', '', found.length)
+    + (rows ? numbered(rows) : '<div class="fold" data-testid="no-findings">Nothing in this folder needs you urgently.</div>'),
+  foot(backBtn(), primary('continue-button', 'Continue', 'structure', 'Building your portfolio'))];
 }
 
 function rowView(r) {
-  const id = r.proposal_id; const docs = r.docs || []; const open = !!S.open[id];
+  const id = r.proposal_id; const docs = r.docs || []; const open = !!S.open[id]; const ed = !!S.edit[id]; const on = !!S.checked[id];
+  const t = S.titles[id];
   const opts = S.structure.boards.map((b) => `<option value="${esc(b.key)}" ${b.key === boardOfRow(r) ? 'selected' : ''}>${esc(b.name)}</option>`).join('');
-  return `<div class="wl-row" data-testid="row" data-id="${esc(id)}">
-<input type="checkbox" class="wl-check" data-testid="row-check" data-id="${esc(id)}" aria-label="Import ${esc(S.titles[id])}" ${S.checked[id] ? 'checked' : ''} />
-<div><input type="text" class="wl-input" data-testid="row-title" data-id="${esc(id)}" value="${esc(S.titles[id])}" aria-label="Title" />
-<div class="wl-meta"><span class="wl-chip" data-testid="row-lane">${esc(r.lane)}</span><span class="wl-chip" data-testid="row-anchor">${esc(r.anchor || 'no anchor')}</span><span class="wl-chip" data-testid="row-stage">${esc(r.stage)}</span>
-<button type="button" class="wl-btn wl-small" data-testid="row-docs-toggle" data-id="${esc(id)}" aria-expanded="${open}">${plural(docs.length, 'document', 'documents')}</button>
-<select class="wl-input" data-testid="row-board" data-id="${esc(id)}" aria-label="Board">${opts}</select></div>
-${open ? `<ul class="wl-docs" data-testid="row-docs">${docs.map((d) => `<li>${esc(d.title && d.title !== d.file ? d.title + ' · ' : '')}${esc(d.file)}</li>`).join('')}</ul>` : ''}</div></div>`;
+  return `<li class="nrow${on ? '' : ' wl-off'}" data-testid="row" data-id="${esc(id)}"><span class="wl-cb">${ctl({ check: true, text: '', value: on, attrs: { 'data-testid': 'row-check', 'data-id': id, 'aria-label': 'Import ' + t } })}</span>
+<div class="nb"><span class="tt">${esc(t)}</span>
+<div class="chips"><span class="chip2" data-testid="row-lane">${ic('init', 'sm')}${esc(r.lane)}</span><span class="chip2" data-testid="row-anchor">${ic('target', 'sm')}${esc(r.anchor || 'no anchor')}</span><span class="tag" data-testid="row-stage">${esc(r.stage)}</span><button type="button" class="chip2 lk" data-testid="row-docs-toggle" data-id="${esc(id)}" aria-expanded="${open}">${ic('doc', 'sm')}${plural(docs.length, 'document', 'documents')}</button></div>
+${open ? `<ul class="wl-docs" data-testid="row-docs">${docs.map((d) => `<li>${pathChip((d.title && d.title !== d.file ? d.title + ' · ' : '') + d.file)}</li>`).join('')}</ul>` : ''}
+<div class="xp${ed ? ' open' : ''}"><div class="xi"><div class="wl-edit"><div class="wl-fld"><label class="wl-flabel" for="wt-${esc(id)}">Title</label><input type="text" id="wt-${esc(id)}" data-testid="row-title" data-id="${esc(id)}" value="${esc(t)}"></div>
+<div class="wl-fld"><label class="wl-flabel" for="wb-${esc(id)}">Board</label><select id="wb-${esc(id)}" data-testid="row-board" data-id="${esc(id)}">${opts}</select></div></div></div></div></div>
+<div class="acts">${ctl({ variant: 'ghost', size: 'sm', html: ed ? 'Done' : 'Edit', attrs: { 'data-testid': 'row-edit', 'data-id': id, 'aria-expanded': String(ed), disabled: !on } })}</div></li>`;
 }
-
+const importText = () => { const c = counts(); return `Import ${plural(c.n, 'initiative', 'initiatives')} into ${plural(c.m, 'board', 'boards')}`; };
+const hasQuestions = () => !!(S.structure && (S.structure.questions || []).length);
 function viewPortfolio() {
   const all = rowsOf(); const c = counts();
   const boards = S.structure.boards.map((b) => {
     const mine = all.filter((r) => boardOfRow(r) === b.key);
-    return `<section class="wl-card wl-board" data-testid="board" data-board="${esc(b.key)}"><header><h2 class="wl-h2" data-testid="board-name">${esc(b.name)}</h2>
-<span class="wl-muted" data-testid="unsorted-count">${plural((b.unsorted || []).length, 'document', 'documents')} unsorted</span></header>
-${mine.length ? mine.map(rowView).join('') : '<p class="wl-p wl-muted">No initiatives here.</p>'}</section>`;
+    return `<div class="wl-board" data-testid="board" data-board="${esc(b.key)}">${sub(`<span data-testid="board-name">${esc(b.name)}</span>`, 'board', `<span class="chip2" data-testid="unsorted-count">${plural((b.unsorted || []).length, 'document', 'documents')} unsorted</span>`)}
+${mine.length ? `<ul class="list">${mine.map(rowView).join('')}</ul>` : '<div class="fold">No initiatives here.</div>'}</div>`;
   }).join('');
-  return `<h1 class="wl-h1">Your portfolio</h1>
-<p class="wl-p wl-muted">This is how PMOS would set up your work. Untick what you do not want, rename it, or move it to another board.</p>
-${boards}
-<div class="wl-actions"><button type="button" class="wl-btn wl-primary" data-testid="import-button" ${S.busy || !c.n ? 'disabled' : ''}>${S.busy === 'apply' ? spin('Importing') : `Import ${plural(c.n, 'initiative', 'initiatives')} into ${plural(c.m, 'board', 'boards')}`}</button></div>`;
+  const q = hasQuestions();
+  return [head('Your portfolio', 'This is how PMOS would set up your work. Untick what you do not want, rename it, or move it to another board.') + boards
+    + (q && c.n ? `<p class="dim wl-small" data-testid="import-summary">${importText()} after a few questions.</p>` : ''),
+  foot(backBtn(), primary('import-button', q ? 'Continue' : importText(), 'apply', 'Importing', !c.n))];
 }
 
 function viewQuestions() {
-  const qs = (S.structure.questions || []).map((q) => {
+  const qs = (S.structure.questions || []).map((q, n) => {
     const skipped = !!S.skipped[q.id];
     const cur = S.answers[q.id] != null ? S.answers[q.id] : q.default;
-    const input = (q.options && q.options.length)
-      ? (q.options.length > 4 && !q.free
-        ? `<select class="wl-input" data-testid="question-select" data-id="${esc(q.id)}" ${skipped ? 'disabled' : ''}>${q.options.map((o) => { const v = typeof o === 'object' ? o.value : o; const t = typeof o === 'object' ? (o.label || o.value) : o; return `<option value="${esc(v)}" ${String(cur) === String(v) ? 'selected' : ''}>${esc(t)}</option>`; }).join('')}</select>`
-        : q.options.map((o) => { const v = typeof o === 'object' ? o.value : o; const t = typeof o === 'object' ? (o.label || o.value) : o; return `<label class="wl-label"><input type="radio" name="q-${esc(q.id)}" data-testid="question-option" data-id="${esc(q.id)}" value="${esc(v)}" ${String(cur) === String(v) ? 'checked' : ''} ${skipped ? 'disabled' : ''} /> ${esc(t)}</label>`; }).join('')
-          + (q.free ? `<label class="wl-label wl-free">${esc(q.free)} <input type="text" class="wl-input" data-testid="question-input" data-id="${esc(q.id)}" placeholder="KR-A1 or health:upkeep" value="${q.options.some((o) => String(typeof o === 'object' ? o.value : o) === String(cur)) ? '' : esc(cur)}" ${skipped ? 'disabled' : ''} /></label>` : ''))
-      : `<input type="text" class="wl-input" data-testid="question-input" data-id="${esc(q.id)}" value="${esc(cur)}" ${skipped ? 'disabled' : ''} />`;
-    return `<section class="wl-card wl-q" data-testid="question" data-id="${esc(q.id)}"><p class="wl-p"><strong>${esc(q.text)}</strong></p>${input}
-${q.options && q.options.length ? '' : `<p class="wl-p wl-muted">Default: ${esc(q.default)}</p>`}<button type="button" class="wl-btn wl-small" data-testid="question-skip" data-id="${esc(q.id)}" aria-pressed="${skipped}">${skipped ? 'Skipped. Use the default' : 'Skip'}</button></section>`;
+    const off = skipped ? 'disabled' : '';
+    const val = (o) => (typeof o === 'object' ? o.value : o); const txt = (o) => (typeof o === 'object' ? (o.label || o.value) : o);
+    let input;
+    if (q.options && q.options.length > 4 && !q.free) input = `<select aria-label="${esc(q.text)}" data-testid="question-select" data-id="${esc(q.id)}" ${off}>${q.options.map((o) => `<option value="${esc(val(o))}" ${String(cur) === String(val(o)) ? 'selected' : ''}>${esc(txt(o))}</option>`).join('')}</select>`;
+    else if (q.options && q.options.length) {
+      const other = q.options.some((o) => String(val(o)) === String(cur)) ? '' : cur;
+      input = `<div role="radiogroup" aria-label="${esc(q.text)}">${q.options.map((o) => `<label class="wl-opt"><input type="radio" name="q-${esc(q.id)}" data-testid="question-option" data-id="${esc(q.id)}" value="${esc(val(o))}" ${String(cur) === String(val(o)) ? 'checked' : ''} ${off}>${esc(txt(o))}</label>`).join('')}
+${q.free ? `<label class="wl-opt">${esc(q.free)} <input type="text" data-testid="question-input" data-id="${esc(q.id)}" placeholder="KR-A1 or health:upkeep" value="${esc(other)}" ${off}></label>` : ''}</div>`;
+    } else input = `<input type="text" aria-label="${esc(q.text)}" data-testid="question-input" data-id="${esc(q.id)}" value="${esc(cur)}" ${off}><p class="dim wl-small">Default: ${esc(q.default)}</p>`;
+    return `<div class="wl-q" data-testid="question" data-id="${esc(q.id)}">${sub(`Question ${n + 1}`, 'info', ctl({ variant: 'ghost', size: 'sm', html: skipped ? 'Skipped. Use the default' : 'Skip', attrs: { 'data-testid': 'question-skip', 'data-id': q.id, 'aria-pressed': String(skipped), disabled: !!S.busy } }))}
+<b class="wl-qt">${esc(q.text)}</b>${input}</div>`;
   }).join('');
-  const c = counts();
-  return `<h1 class="wl-h1">A few questions</h1><p class="wl-p wl-muted">The scan could not decide these. Each has a default, and you can skip any of them.</p>${qs}
-<div class="wl-actions"><button type="button" class="wl-btn wl-primary" data-testid="questions-continue" ${S.busy ? 'disabled' : ''}>${S.busy === 'apply' ? spin('Importing') : `Import ${plural(c.n, 'initiative', 'initiatives')} into ${plural(c.m, 'board', 'boards')}`}</button></div>`;
+  return [head('A few questions', 'The scan could not decide these. Each has a default, and you can skip any of them.') + qs,
+    foot(backBtn(), primary('questions-continue', importText(), 'apply', 'Importing'))];
 }
 
 function viewBriefing() {
-  const items = S.briefing.map((b) => `<li data-testid="briefing-item"><strong>${esc(b.title)}</strong>${b.why ? `<div class="wl-muted">${esc(b.why)}</div>` : ''}${b.initiative ? `<div class="wl-muted" data-testid="briefing-initiative">${esc(b.initiative.title)} · board ${esc(b.initiative.board)}</div>` : ''}<div class="wl-ref">${esc(ref((b.evidence || [])[0]))}</div></li>`).join('');
-  return `<h1 class="wl-h1">Your first Briefing</h1>
-<p class="wl-p wl-muted">${S.briefing.length ? 'These need you first.' : 'Nothing needs you right now.'}</p>
-<section class="wl-card">${items ? `<ol class="wl-findings">${items}</ol>` : '<p class="wl-p wl-muted" data-testid="no-briefing">Your portfolio is in. Open PMOS to see it.</p>'}</section>
-<div class="wl-actions"><button type="button" class="wl-btn wl-primary" data-testid="sources-continue">Continue</button>
-<button type="button" class="wl-btn wl-quiet" data-testid="undo-link" ${S.busy ? 'disabled' : ''}>${S.busy === 'undo' ? spin('Undoing') : 'Undo this import'}</button></div>`;
-}
-
-function sourceRow(x) {
-  const st = S.sources[x.source] || {};
-  const busy = S.busy === 'source:' + x.source;
-  const state = st.started ? '<span class="wl-muted" data-testid="source-started">Started in an agent session. Follow it in PMOS.</span>'
-    : st.skipped ? '<span class="wl-muted" data-testid="source-skipped">Skipped. You can bring it in later from Settings.</span>'
-    : `<button type="button" class="wl-btn" data-testid="source-bring" data-id="${esc(x.source)}" ${S.busy ? 'disabled' : ''}>${busy ? spin('Starting') : 'Bring in'}</button>
-<button type="button" class="wl-btn wl-quiet" data-testid="source-skip" data-id="${esc(x.source)}" ${S.busy ? 'disabled' : ''}>Skip</button>`;
-  return `<li class="wl-source" data-testid="source-row" data-id="${esc(x.source)}"><div class="wl-source-text"><strong>${esc(x.name)}</strong><div class="wl-muted">${esc(x.adds)}</div>${st.error ? `<div class="wl-error" role="alert">${esc(st.error)}</div>` : ''}</div><div class="wl-source-actions">${state}</div></li>`;
-}
-function viewSources() {
-  return `<h1 class="wl-h1">Bring in more sources</h1>
-<p class="wl-p wl-muted">Your folder is in. These sources are optional. Each one runs in an agent session with your own connection, reads only, and writes nothing to the tool. Nothing is read until you press Bring in.</p>
-<section class="wl-card"><ul class="wl-sources">${MORE_SOURCES.map(sourceRow).join('')}</ul>
-<p class="wl-p wl-muted" data-testid="sources-not-yet">Inbox and Slack have no import yet.</p></section>
-<div class="wl-actions"><a class="wl-btn wl-primary" data-testid="open-pmos" href="/c3.html?ws=${encodeURIComponent(S.ws)}">Open PMOS</a></div>`;
+  const items = S.briefing.map((b) => `<li class="nrow" data-testid="briefing-item"><span class="ki"></span><div class="nb"><span class="tt"><b>${esc(b.title)}</b></span>${b.why ? `<div class="dim wl-small">${esc(b.why)}</div>` : ''}<div class="chips">${b.initiative ? `<span class="chip2" data-testid="briefing-initiative">${esc(b.initiative.title)} · board ${esc(b.initiative.board)}</span>` : ''}${pathChip(ref((b.evidence || [])[0]))}</div></div><span></span></li>`).join('');
+  const tools = TOOLS.filter((x) => S.sources[x.source]).map((x) => { const st = S.sources[x.source]; const bad = !st.started;
+    return `<li class="nrow" data-testid="source-status" data-id="${esc(x.source)}"><span class="ki${bad ? ' hot' : ''}">${ic(bad ? 'alert' : 'clock')}</span><div class="nb"><span class="tt">${esc(x.name)}</span><div class="dim wl-small${bad ? ' wl-bad' : ''}">${bad ? esc(st.error || '') : `${esc(x.name)} is being read in an agent session. Its items join your Briefing in PMOS when it finishes.`}</div></div><span></span></li>`; });
+  return [head('Your first Briefing', S.briefing.length ? 'These need you first.' : 'Nothing needs you right now.')
+    + sub('Briefing', 'sun', '', S.briefing.length)
+    + (items ? numbered(items) : '<div class="fold" data-testid="no-briefing">Your portfolio is in. Open PMOS to see it.</div>')
+    + (tools.length ? sub('Your tools', 'tools', '', tools.length) + `<ul class="list">${tools.join('')}</ul>` : ''),
+  foot(ctl({ variant: 'ghost', html: S.busy === 'undo' ? spin('Undoing') : 'Undo this import', attrs: { 'data-testid': 'undo-link', disabled: !!S.busy, ...busyAttrs('undo') } }),
+    ctl({ variant: 'primary', html: 'Open PMOS', href: '/c3.html?ws=' + encodeURIComponent(S.ws), attrs: { class: 'wl-primary', 'data-testid': 'open-pmos' } }))];
 }
 
 const VIEWS = { welcome: viewWelcome, look: viewLook, portfolio: viewPortfolio, questions: viewQuestions, briefing: viewBriefing, sources: viewSources };
+const shownSteps = () => STEPS.filter(([k]) => k !== 'questions' || S.step === 'questions' || hasQuestions());
+
+/* The frame: PMOS, the step count and Not now (About you) or Skip setup (until the import); a progress bar and the step names
+ * (a done step goes back to that step, except once the import is made: Undo is the way back then); one step card. */
+function frame(body, footer) {
+  const l = shownSteps(); const at = Math.max(0, l.findIndex(([k]) => k === S.step));
+  const back = S.step !== 'briefing';
+  const steps = l.map(([k, t], n) => `<li><button type="button" class="wl-stepbtn${n < at ? ' wl-done' : ''}" data-testid="step" data-step="${k}" ${n === at ? 'aria-current="step"' : ''} ${n < at && back && !S.busy ? '' : 'disabled'}>${n < at ? ic('check', 'sm') : ''}${esc(t)}</button></li>`).join('');
+  const skip = S.step === 'briefing' ? '' : S.step === 'welcome' ? ghost('not-now', 'Not now') : ghost('skip-setup', 'Skip setup');
+  return `<div class="wl-top"><div><h1>PMOS</h1><div class="wl-sub" data-testid="step-count">Set up · step ${at + 1} of ${l.length}</div></div><div class="wl-tools">${skip}</div></div>
+<div class="wl-col"><nav class="wl-prog" aria-label="Setup steps"><div class="pbar" aria-hidden="true"><i class="wl-fill"></i></div><ol class="wl-steps" data-testid="steps">${steps}</ol></nav>
+${S.error ? `<div class="fold wl-e" role="alert" data-testid="error">${ic('alert', 'sm')}${esc(S.error)}</div>` : ''}
+<section class="card sect wl-card">${body}${footer}</section></div>`;
+}
 
 function render() {
   const keepScroll = window.scrollY;
-  const stepsBar = `<ol class="wl-steps" data-testid="steps">${STEPS.filter(([k]) => k !== 'questions' || S.step === 'questions' || (S.structure && (S.structure.questions || []).length))
-    .map(([k, t]) => `<li ${k === S.step ? 'aria-current="step"' : ''} data-step="${k}">${t}</li>`).join('')}</ol>`;
   const a = document.activeElement;
   const was = a && root.contains(a) ? [a.getAttribute('data-testid'), a.getAttribute('data-id')] : null;
   root.setAttribute('data-step', S.step);
-  root.innerHTML = stepsBar + (S.error ? `<div class="wl-error" role="alert" data-testid="error">${esc(S.error)}</div>` : '') + VIEWS[S.step]();
+  CTL = [];
+  const [body, footer] = VIEWS[S.step]();
+  root.innerHTML = frame(body, footer);
+  mountControls();
+  const l = shownSteps(); const at = Math.max(0, l.findIndex(([k]) => k === S.step));
+  const fill = root.querySelector('.wl-fill'); if (fill) fill.style.setProperty('--wl-prog', Math.round(((at + 1) / l.length) * 100) + '%');
   window.scrollTo(0, keepScroll);
   if (was && was[0]) {   // keep the keyboard where it was after a re-render
     const again = [...root.querySelectorAll('[data-testid="' + was[0] + '"]')].find((el) => (el.getAttribute('data-id') || null) === (was[1] || null));
@@ -229,10 +323,6 @@ function render() {
 
 /* ── events (one delegate; the markup is rebuilt on each render) ─────────────────────────────────────────────────── */
 const idOf = (el) => el.getAttribute('data-id');
-const bringIn = (source) => run('source:' + source, async () => {
-  const r = await pmPost('/api/sources/refresh', { ws: S.ws, source });
-  S.sources[source] = r && r.ok ? { started: true } : { error: (r && r.error) || 'Starting the import did not work.' };
-});
 document.addEventListener('click', (e) => {
   if (!root.contains(e.target)) return;
   const t = e.target.closest('[data-testid]'); if (!t) return;
@@ -242,22 +332,26 @@ document.addEventListener('click', (e) => {
   else if (k === 'continue-button') toPortfolio();
   else if (k === 'import-button' || k === 'questions-continue') { if (k === 'questions-continue') run('apply', applyNow); else importNow(); }
   else if (k === 'undo-link') undo();
-  else if (k === 'sources-continue') { S.step = 'sources'; S.error = ''; render(); }
-  else if (k === 'source-bring') bringIn(idOf(t));
-  else if (k === 'source-skip') { S.sources[idOf(t)] = { skipped: true }; render(); }
-  else if (k === 'not-now') notNow();
+  else if (k === 'about-continue') saveAbout();
+  else if (k === 'back-button') { const l = shownSteps().map(([s]) => s); S.step = l[l.indexOf(S.step) - 1] || 'welcome'; S.error = ''; render(); }
+  else if (k === 'step') { if (!t.disabled) { S.step = t.getAttribute('data-step'); S.error = ''; render(); } }
+  else if (k === 'not-now' || k === 'skip-setup') notNow();
+  else if (k === 'row-edit') { S.edit[idOf(t)] = !S.edit[idOf(t)]; render(); }
   else if (k === 'row-docs-toggle') { S.open[idOf(t)] = !S.open[idOf(t)]; render(); }
   else if (k === 'question-skip') { const id = idOf(t); S.skipped[id] = !S.skipped[id]; render(); }
 });
 root.addEventListener('change', (e) => {
   const t = e.target; const k = t.getAttribute && t.getAttribute('data-testid');
-  if (k === 'row-check') { S.checked[idOf(t)] = t.checked; render(); }
+  if (k === 'row-check') { S.checked[idOf(t)] = t.checked; if (!t.checked) S.edit[idOf(t)] = false; render(); }
+  else if (k === 'row-title') render();
+  else if (k === 'source-check') { S.pick[idOf(t)] = t.checked; render(); }
   else if (k === 'row-board') { S.boardOf[idOf(t)] = t.value; render(); }
   else if (k === 'question-option' || k === 'question-select') S.answers[idOf(t)] = t.value;
 });
 root.addEventListener('input', (e) => {
   const t = e.target; const k = t.getAttribute && t.getAttribute('data-testid');
   if (k === 'row-title') S.titles[idOf(t)] = t.value;
+  else if (k && k.startsWith('about-')) S.about[k.slice(6)] = t.value;
   else if (k === 'question-input') {
     const id = idOf(t); const q = ((S.structure && S.structure.questions) || []).find((x) => x.id === id);
     S.answers[id] = t.value.trim() ? t.value : (q ? q.default : t.value); // an emptied free answer goes back to the default
@@ -265,13 +359,27 @@ root.addEventListener('input', (e) => {
 });
 
 /* ── start ───────────────────────────────────────────────────────────────────────────────────────────────────────── */
+/* The console3 look: its stylesheet and icon sprite, the PM's console theme, and the time-of-day tint on the page root. */
+function look() {
+  ensureC3Css();
+  const page = document.getElementById('wl-c3');
+  let theme = params.get('theme');
+  try { theme = theme || localStorage.getItem('pmos.c3.theme'); } catch { /* no storage */ }
+  theme = theme === 'dark' ? 'dark' : 'light';
+  document.documentElement.setAttribute('data-pm-page-theme', theme);
+  if (page) { page.setAttribute('data-pm-theme', theme); applyDayPart(page); setInterval(() => applyDayPart(page), 5 * 60 * 1000); }
+}
+
 async function start() {
+  look();
   render();
   const list = await pmGet('/api/workspaces');
   const all = (list && list.workspaces) || [];
   const mine = all.find((w) => w.id === S.ws) || (!S.ws ? all[0] : null);
   if (!mine) { S.error = 'This folder is not open in PMOS. Start pmos in the folder, then reload.'; render(); return; }
   S.ws = mine.id; S.folder = { name: mine.name, root: mine.root };
+  const ps = await pmGet('/api/proactive/settings');
+  if (ps && ps.ok && ps.settings) { const ab = ps.settings.about || {}; S.about = { name: ps.settings.name || '', role: ab.role || '', work: ab.work || '', duties: ab.duties || '' }; }
   const st = await pmGet(`/api/onboarding/status?ws=${encodeURIComponent(S.ws)}`);
   if (st && st.ok && st.state === 'imported') {
     const live = (st.imports || []).filter((i) => !i.retracted).pop();

package/workspace/public/welcome.html

@@ -1,20 +1,22 @@
 <!doctype html>
-<html lang="en" class="wl-page" data-pm-page-theme="light">
+<html lang="en" class="wl-html" data-pm-page-theme="light">
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
 <meta name="pmos-nonce" content="" />
 <title>Welcome to PMOS</title>
 <!-- The first-run page. The server fills the nonce meta the way it does for /c3.html, so a press (Scan, Import, Undo)
-     carries it. Tokens and fonts are the console's, so light and dark both resolve. The page does not load the console. -->
+     carries it. Tokens and fonts are the console's, so light and dark both resolve. The page does not load the console:
+     pm/welcome.js links console3.css and its icon sprite and draws inside the same .c3 .c3pg root as /c3.html. -->
 <link rel="preload" href="/vendor/ibm-plex-mono-400.woff2" as="font" type="font/woff2" crossorigin />
+<link rel="preload" href="/vendor/ibm-plex-mono-500.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="stylesheet" href="/pm/tokens.css" />
 <link rel="stylesheet" href="/pm/components.css" />
 
 </head>
 <body class="wl-body">
-<main id="wl-root" class="wl-wrap" data-testid="welcome-root"></main>
-<noscript><p class="wl-wrap">This page needs JavaScript.</p></noscript>
+<div id="wl-c3" class="wl-page c3 c3pg" data-pm-theme="light"><main id="wl-root" class="wl-welcome" data-testid="welcome-root"></main></div>
+<noscript><p class="wl-noscript">This page needs JavaScript.</p></noscript>
 <script type="module" src="/pm/welcome.js"></script>
 </body>
 </html>