create-pmos 0.132.0 → 0.133.0

package/workspace/public/pm/components.css

@@ -7965,5 +7965,285 @@
    containers). The tab strip and the scratchpad are drawn with inline radii (workspace-cockpit-nav); the inline radii
    (8px tab strip, 6px controls) stay. A tab's colour dot is a dot and keeps its circle. */
 
+/* -- layouts · .wl- Welcome: the first-run page (onboarding-scan-and-map slice 2) -- */
+.wl-page {
+  background: var(--background);
+}
+.wl-body {
+  margin: 0;
+  background: var(--background);
+  color: var(--foreground);
+  font-family: var(--sans);
+  font-size: 16px;
+  line-height: 1.5;
+}
+.wl-wrap {
+  max-width: 720px;
+  margin: 0 auto;
+  padding: 24px 16px 64px;
+  box-sizing: border-box;
+}
+.wl-wrap * {
+  box-sizing: border-box;
+}
+.wl-steps {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin: 0 0 20px;
+  padding: 0;
+  list-style: none;
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--muted-foreground);
+}
+.wl-steps li {
+  padding: 2px 8px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+}
+.wl-steps li[aria-current="step"] {
+  color: var(--foreground);
+  border-color: var(--foreground);
+}
+.wl-h1 {
+  font-size: 20px;
+  line-height: 1.2;
+  margin: 0 0 8px;
+  font-weight: 600;
+}
+.wl-h2 {
+  font-size: 16px;
+  margin: 0;
+  font-weight: 600;
+}
+.wl-p {
+  margin: 0 0 12px;
+}
+.wl-muted {
+  color: var(--muted-foreground);
+}
+.wl-card {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 14px 16px;
+  margin: 0 0 14px;
+}
+.wl-path {
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--muted-foreground);
+  word-break: break-all;
+}
+.wl-promise {
+  font-family: var(--mono);
+  font-size: 12px;
+  margin: 16px 0;
+  padding: 10px 12px;
+  border-left: 3px solid var(--foreground);
+  background: var(--muted);
+}
+.wl-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+  margin-top: 18px;
+}
+.wl-btn {
+  font: inherit;
+  cursor: pointer;
+  border-radius: 8px;
+  padding: 10px 16px;
+  min-height: 44px;
+  border: 1px solid var(--border);
+  background: var(--secondary);
+  color: var(--foreground);
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.wl-btn.wl-primary {
+  background: var(--primary);
+  color: var(--primary-foreground);
+  border-color: var(--primary);
+  font-weight: 600;
+}
+.wl-btn:disabled {
+  opacity: 0.55;
+  cursor: default;
+}
+.wl-btn.wl-quiet {
+  background: none;
+  border: none;
+  color: var(--muted-foreground);
+  text-decoration: underline;
+  padding: 8px 4px;
+  min-height: 36px;
+}
+.wl-btn.wl-small {
+  min-height: 32px;
+  padding: 4px 10px;
+  font-size: 14px;
+}
+.wl-btn:focus-visible,
+.wl-input:focus-visible,
+.wl-check:focus-visible {
+  outline: 2px solid color-mix(in oklab, var(--ring) 50%, var(--foreground));
+  outline-offset: 2px;
+}
+.wl-spin {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border: 2px solid var(--border);
+  border-top-color: var(--foreground);
+  border-radius: 6px;
+  animation: wlspin 0.8s linear infinite;
+  margin-right: 8px;
+}
+@keyframes wlspin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.wl-error {
+  border: 1px solid var(--destructive);
+  color: var(--destructive);
+  border-radius: 8px;
+  padding: 10px 12px;
+  margin: 0 0 14px;
+}
+.wl-findings {
+  margin: 0;
+  padding-left: 22px;
+}
+.wl-findings li {
+  margin: 0 0 12px;
+}
+.wl-ref {
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--muted-foreground);
+  word-break: break-all;
+}
+.wl-board > header {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 8px;
+  align-items: baseline;
+  margin-bottom: 8px;
+}
+.wl-row {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 6px 10px;
+  padding: 10px 0;
+  border-top: 1px solid var(--border);
+  align-items: start;
+}
+.wl-check {
+  width: 20px;
+  height: 20px;
+  margin: 10px 0 0;
+}
+.wl-input {
+  font: inherit;
+  color: var(--foreground);
+  background: var(--background);
+  border: 1px solid var(--input);
+  border-radius: 6px;
+  padding: 6px 8px;
+  min-height: 36px;
+  max-width: 100%;
+}
+.wl-row .wl-input[type="text"] {
+  width: 100%;
+}
+.wl-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 10px;
+  align-items: center;
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--muted-foreground);
+}
+.wl-chip {
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 1px 8px;
+}
+.wl-docs {
+  margin: 4px 0 0;
+  padding-left: 18px;
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--muted-foreground);
+  word-break: break-all;
+}
+.wl-q {
+  margin: 0 0 14px;
+}
+.wl-label {
+  display: block;
+  margin: 4px 0;
+}
+.wl-q .wl-free {
+  margin-top: 10px;
+  color: var(--muted-foreground);
+}
+.wl-q .wl-free .wl-input {
+  display: block;
+  margin-top: 4px;
+}
+.wl-added {
+  margin: 8px 0 0;
+  padding-left: 18px;
+  font-size: 14px;
+}
+.wl-sources {
+  list-style: none;
+  margin: 0 0 12px;
+  padding: 0;
+  display: grid;
+  gap: 12px;
+}
+.wl-source {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--border);
+}
+.wl-source-text {
+  flex: 1 1 260px;
+  min-width: 0;
+}
+.wl-source-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+@media (max-width: 520px) {
+  .wl-actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .wl-actions .wl-btn {
+    width: 100%;
+  }
+  .wl-actions .wl-btn.wl-quiet {
+    width: auto;
+    align-self: center;
+  }
+}
+
 /* -- layouts · .cal3- the console3 Calendar page (calendar-time-page): its rules sit in console3.css beside the .vday rules they extend -- */
 /* -- end of the layout sections: add nothing below this line -- */

package/workspace/public/pm/welcome.js

@@ -0,0 +1,283 @@
+/* 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
+ *
+ * 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.
+ * 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';
+
+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: {},
+};
+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 = [
+  { 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.' },
+];
+
+const esc = (v) => String(v == null ? '' : v).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
+const plural = (n, one, many) => `${n} ${n === 1 ? one : many}`;
+const ref = (e) => (e ? (e.line ? `${e.file}:${e.line}` : e.file) : '');
+
+/* ── model ───────────────────────────────────────────────────────────────────────────────────────────────────────── */
+const rowsOf = () => (S.structure ? S.structure.boards.flatMap((b) => b.initiatives.map((r) => ({ ...r, board: b.key }))) : []);
+const boardOfRow = (r) => S.boardOf[r.proposal_id] || r.board;
+function counts() {
+  const on = rowsOf().filter((r) => S.checked[r.proposal_id]);
+  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 = {};
+  for (const r of rowsOf()) { S.checked[r.proposal_id] = !!r.checked; S.titles[r.proposal_id] = r.title; }
+}
+function revisions() {
+  const out = {};
+  for (const r of rowsOf()) {
+    const rev = {};
+    if (S.titles[r.proposal_id] !== r.title && String(S.titles[r.proposal_id]).trim()) rev.title = String(S.titles[r.proposal_id]).trim();
+    if (S.boardOf[r.proposal_id] && S.boardOf[r.proposal_id] !== r.board) rev.board = S.boardOf[r.proposal_id];
+    if (Object.keys(rev).length) out[r.proposal_id] = rev;
+  }
+  return out;
+}
+
+/* ── actions ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
+const fail = (r, what) => { S.error = (r && r.error) || `${what} did not work.`; };
+async function run(label, fn) {
+  S.busy = label; S.error = ''; render();
+  try { await fn(); } catch (e) { S.error = String((e && e.message) || e); }
+  S.busy = ''; render();
+}
+async function loadStructure() {
+  const r = await pmGet(`/api/onboarding/structure?ws=${encodeURIComponent(S.ws)}`);
+  if (!r || !r.ok) { fail(r, 'Reading the portfolio'); return false; }
+  adopt(r); return true;
+}
+async function loadBriefing() {
+  const r = await pmGet(`/api/onboarding/briefing?ws=${encodeURIComponent(S.ws)}`);
+  if (!r || !r.ok) { fail(r, 'Reading the Briefing'); return false; }
+  S.briefing = r.items || []; return true;
+}
+const addFolder = () => run('add', async () => {
+  const p = await pmPost('/api/pick-folder', {});
+  if (!p || !p.ok) { if (p && p.cancelled) return; S.note = (p && p.unsupported) ? 'This system has no folder chooser. Start pmos in the folder instead.' : ''; if (!S.note) fail(p, 'Choosing a folder'); return; }
+  const w = await pmPost('/api/workspaces', { root: p.root, name: p.root.split(/[\\/]/).filter(Boolean).pop(), focus: false });
+  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 scan = () => run('scan', async () => {
+  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';
+});
+const toPortfolio = () => run('structure', async () => { if (await loadStructure()) S.step = 'portfolio'; });
+async function applyNow() {
+  const include = rowsOf().filter((r) => S.checked[r.proposal_id]).map((r) => r.proposal_id);
+  const answers = {};
+  // an untouched question sends its default (the PM saw it and pressed Import); a skipped one sends nothing
+  for (const q of (S.structure.questions || [])) {
+    if (S.skipped[q.id]) continue;
+    const v = S.answers[q.id] != null ? S.answers[q.id] : q.default;
+    if (q.id === 'template') answers.template = Object.assign(answers.template || {}, { [q.board]: v });
+    else answers[q.id] = v;
+  }
+  const r = await pmPost('/api/onboarding/apply', { ws: S.ws, include, revisions: revisions(), answers });
+  if (!r || !r.ok) { fail(r, 'The import'); return; }
+  S.importId = r.import_id;
+  if (await loadBriefing()) S.step = 'briefing';
+}
+const importNow = () => {
+  if (!counts().n) return;
+  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
+const notNow = () => run('dismiss', async () => {
+  const r = await pmPost('/api/onboarding/dismiss', { ws: S.ws });
+  if (!r || !r.ok) { fail(r, 'Not now'); return; }
+  location.href = '/c3.html?ws=' + encodeURIComponent(S.ws);
+});
+const undo = () => run('undo', async () => {
+  const r = await pmPost('/api/onboarding/undo', { ws: S.ws, import_id: S.importId });
+  if (!r || !r.ok) { fail(r, 'Undo'); return; }
+  S.importId = '';
+  if (await loadStructure()) S.step = 'portfolio';
+});
+
+/* ── views ───────────────────────────────────────────────────────────────────────────────────────────────────────── */
+const spin = (txt) => `<span class="wl-spin" data-testid="loading" aria-hidden="true"></span>${esc(txt)}`;
+
+function viewWelcome() {
+  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>' : ''}`;
+}
+
+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>`;
+}
+
+function rowView(r) {
+  const id = r.proposal_id; const docs = r.docs || []; const open = !!S.open[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>`;
+}
+
+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>`;
+  }).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>`;
+}
+
+function viewQuestions() {
+  const qs = (S.structure.questions || []).map((q) => {
+    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>`;
+  }).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>`;
+}
+
+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 VIEWS = { welcome: viewWelcome, look: viewLook, portfolio: viewPortfolio, questions: viewQuestions, briefing: viewBriefing, sources: viewSources };
+
+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]();
+  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));
+    if (again && !again.disabled) again.focus();
+  }
+}
+
+/* ── 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;
+  const k = t.getAttribute('data-testid');
+  if (k === 'add-folder') addFolder();
+  else if (k === 'scan-button') scan();
+  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 === '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(); }
+  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 === '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
+  }
+});
+
+/* ── start ───────────────────────────────────────────────────────────────────────────────────────────────────────── */
+async function start() {
+  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 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();
+    S.importId = live ? live.import_id : '';
+    if (S.importId && await loadBriefing() && await loadStructure()) S.step = 'briefing';
+  }
+  render();
+}
+start();

package/workspace/public/welcome.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en" class="wl-page" 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. -->
+<link rel="preload" href="/vendor/ibm-plex-mono-400.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>
+<script type="module" src="/pm/welcome.js"></script>
+</body>
+</html>

package/workspace/server.js

@@ -5547,12 +5547,12 @@ async function handleRequest(req, res) {
   const built = BUILD_RE.exec(url.pathname);
   const p = built ? built[1] : url.pathname;
 
-  if (p === '/' || p === '/index.html' || p === '/c3.html') {
+  if (p === '/' || p === '/index.html' || p === '/c3.html' || p === '/welcome' || p === '/welcome.html') {
     // pm-os-absorb Run 2 (R25, X11): the per-launch nonce goes into the base meta line, nowhere else. no-store, so a
     // restarted server never answers a press from a page that holds the previous launch's value. The page code is
     // referenced under this launch's build prefix.
     const n = pmGuard.launchNonce();
-    return fs.readFile(path.join(PUB, p === '/c3.html' ? 'c3.html' : 'index.html'), 'utf8', (err, html) => {
+    return fs.readFile(path.join(PUB, p === '/c3.html' ? 'c3.html' : (p === '/welcome' || p === '/welcome.html') ? 'welcome.html' : 'index.html'), 'utf8', (err, html) => {
       if (err) { res.writeHead(404); res.end('not found'); return; }
       let out = withBuild(html);
       if (n) out = out.replace('<meta name="' + pmGuard.NONCE_META + '" content="" />', '<meta name="' + pmGuard.NONCE_META + '" content="' + n + '" />');

package/workspace/test-lists/onboarding-firstrun.json

@@ -0,0 +1,15 @@
+{
+  "_comment": "Initiative onboarding-scan-and-map, slice 2: the first-run routes (in-process) and the /welcome page (browser).",
+  "modules": [
+    "routes-onboarding.test.js",
+    "onboarding-scripts.test.js"
+  ],
+  "panels": [
+    "pm-welcome-test.js"
+  ],
+  "seconds": {
+    "routes-onboarding.test.js": 6,
+    "pm-welcome-test.js": 25,
+    "onboarding-scripts.test.js": 8
+  }
+}