create-pmos 0.522.0 → 0.524.0

package/workspace/public/pm/cozy-lab-ins.js

@@ -0,0 +1,87 @@
+/* pm/cozy-lab-ins.js — Intelligence › Lab (build U, idle-lab B+C 2026-11-04; canvas main, In development I1 IlBC). One section under "Did it work?".
+ * Top to bottom: Claude's ✦ line for the week (the idle time it used, how many you kept, what fits no initiative), the ✦ that fit no
+ * initiative (✓ keep, ✕ drop with an optional reason, Undo in the toast), then two cards side by side: "What Claude did in the background"
+ * (every background job this week, links only: a result on an initiative waits there, said once) and "You kept" with "Next time you step
+ * away" (read only: to skip one, say so in chat). Hidden while GET /api/lab answers null, so the Lab appears only once there is something
+ * (zero is silence; onboarding A4, gradual exposure). Every press is icon-only.
+ *
+ *   mount({ el, where() → { ws, board }, iniHref(id), toast(text, undo?) })   then load() after each read of the page
+ *   load()   reads GET /api/lab and draws */
+import { pmGet, pmPost } from './http.js';
+import * as LC from './cozy-lab.js';
+
+const esc = (s) => String(s == null ? '' : s).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
+const SVG = (d, w = 16, sw = 1.8) => `<svg aria-hidden="true" width="${w}" height="${w}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="${sw}" stroke-linecap="round" stroke-linejoin="round"><path d="${d}"/></svg>`;
+const ICON = { prototyped: LC.I.proto, improved: LC.I.round, scanned: LC.I.scan, loose: LC.I.scan, job: 'M4 6h16M4 12h10M4 18h7' };
+const S = { H: null, lab: null, why: null };
+const ib = (attr, label, icon, cls = '') => `<button type="button" class="lab-ib${cls ? ' ' + cls : ''}" ${attr} aria-label="${esc(label)}" title="${esc(label)}">${SVG(icon, 16, 2.2)}</button>`;
+
+function looseHtml(p) {
+  const why = S.why === p.id, id = esc(p.id);
+  const src = (p.sources || []).filter((s) => /^https?:\/\//.test(s.ref || '')).map((s) => `<a href="${esc(s.ref)}" target="_blank" rel="noopener noreferrer">${esc(s.label)}</a>`).join(', ');
+  const ask = p.type === 'start' && p.data ? ` Start an initiative <i>“${esc(p.data.title)}”</i>${p.data.stage ? ', ' + esc(p.data.stage) : ''}?` : '';
+  return `<div class="lab-card lab-lo" data-lab-id="${id}"><div class="lab-bar"><span class="lab-sp" aria-hidden="true">✦</span><b>${esc(p.title)}</b><span class="lab-acts">`
+    + ib(`data-lab-why="${id}" aria-expanded="${why}"`, 'Drop it', LC.I.x) + ib(`data-lab-keep="${id}"`, p.type === 'start' ? 'Start it' : 'Keep it', LC.I.check, 'ok') + '</span></div>'
+    + `<p class="lab-tx">${esc(p.why)}${ask}</p><small class="lab-ok">Read: ${(p.sources || []).length} ${(p.sources || []).length === 1 ? 'page' : 'pages'}${p.data && p.data.refreshed ? ' · ' + esc(p.data.refreshed) : ''}${src ? ' · ' + src : ''}</small>`
+    + (why ? `<div class="lab-why"><label class="vh" for="labLw-${id}">Why drop it? Claude learns from it</label><input id="labLw-${id}" data-lab-reason="${id}" maxlength="200" placeholder="Why not? Claude learns from it (you can leave it empty)">${ib(`data-lab-drop="${id}"`, 'Drop it now', LC.I.x, 'solid')}</div>` : '')
+    + '</div>';
+}
+function pillOf(r) {
+  if (r.state === 'kept') return '<span class="lab-pill ok">kept</span>';
+  if (r.state === 'dropped') return `<span class="lab-pill">dropped${r.why ? ' · “' + esc(r.why) + '”' : ''}</span>`;
+  if (r.kind === 'loose') return '<span class="lab-pill y">✦ above</span>';
+  if (r.ini) return `<a class="lab-pill y" href="${esc(S.H.iniHref(r.ini))}">✦ on initiative</a>`;
+  return '';
+}
+function recRow(r) {
+  const open = r.compare ? ib(`data-lab-cmp="${esc(r.id)}" data-lab-board="${esc(r.board || '')}"`, 'Open in the compare view', LC.I.open) : '';
+  const pill = r.kind === 'job' ? (r.ini ? `<a class="lab-pill" href="${esc(S.H.iniHref(r.ini))}">initiative</a>` : '') : pillOf(r);
+  return `<div class="lab-row"><span class="lab-ico">${SVG(ICON[r.kind] || ICON.job, 18)}</span><span class="w"><b>${esc(r.title)}</b><small>${esc(r.meta || '')}</small></span>${pill}${open}</div>`;
+}
+function html(L) {
+  const k = L.kept;
+  const keptCard = k ? `<div class="lab-card"><small>You kept</small><b class="lab-big">${k.kept} of ${k.filed}</b><small>${[k.proto[1] ? 'prototypes ' + k.proto[0] + ' of ' + k.proto[1] : '', k.scan[1] ? 'scans ' + k.scan[0] + ' of ' + k.scan[1] : ''].filter(Boolean).join(' · ')}. Claude learns from each reason you give.</small></div>` : '';
+  const next = L.next.length ? `<div class="lab-card"><b>Next time you step away</b>${L.next.map((x) => `<div class="lab-row"><span class="lab-dot open"></span><span class="w">${esc(x.title)}${x.why ? `<small>${esc(x.why)}</small>` : ''}</span></div>`).join('')}<small>Claude picks these by itself. To skip one, say so in chat.</small></div>` : '';
+  const rec = L.record.length ? `<div class="lab-card lab-rec"><div class="lab-bar"><b>What Claude did in the background</b><small>this week, every job</small></div>${L.record.map(recRow).join('')}${L.more ? `<small>and ${L.more} more</small>` : ''}</div>` : '';
+  return `<h2 class="ins-h3" id="hLab">Lab</h2>`
+    + (L.say ? `<p class="lab-say"><span aria-hidden="true">✦</span> ${esc(L.say)}</p>` : '')
+    + L.loose.map(looseHtml).join('')
+    + (rec || keptCard || next ? `<div class="lab-2">${rec}${keptCard || next ? `<div class="lab-side">${keptCard}${next}</div>` : ''}</div>` : '');
+}
+function draw() {
+  const el = S.H && S.H.el; if (!el) return;
+  if (!S.lab) { el.hidden = true; el.innerHTML = ''; return; }
+  el.hidden = false; el.innerHTML = html(S.lab);
+}
+export async function load() {
+  if (!S.H) return;
+  const at = S.H.where() || {};
+  const r = await pmGet('/api/lab?ws=' + encodeURIComponent(at.ws || '') + '&board=' + encodeURIComponent(at.board || '')).catch(() => null);
+  // a failed read draws nothing (quiet): the section is an extra, the page around it stays
+  S.lab = r && r.ok ? r.lab : null; draw();
+}
+async function post(route, body) { const at = S.H.where() || {}; return pmPost(route, { ws: at.ws, ...body }).catch(() => null); }
+async function press(e) {
+  const b = e.target.closest('button'); if (!b || b.disabled) return;
+  const d = b.dataset, say = (m, u) => S.H.toast(m, u);
+  if (d.labWhy) { S.why = S.why === d.labWhy ? null : d.labWhy; draw(); const i = S.H.el.querySelector(`[data-lab-reason="${CSS.escape(d.labWhy)}"]`); if (i) i.focus(); return; }
+  if (d.labDrop) {
+    const i = S.H.el.querySelector(`[data-lab-reason="${CSS.escape(d.labDrop)}"]`); b.disabled = true; S.why = null;
+    const r = await post('/api/lab/drop', { id: d.labDrop, ...(i && i.value.trim() ? { why: i.value.trim() } : {}) });
+    if (!r || r.ok === false) { say((r && r.error) || 'Nothing was changed.'); b.disabled = false; return; }
+    say('Dropped.', async () => { await post('/api/lab/undo', { batch: r.batch }); await load(); }); await load(); return;
+  }
+  if (d.labKeep) {
+    b.disabled = true;
+    const r = await post('/api/lab/keep', { id: d.labKeep });
+    if (!r || r.ok === false) { say((r && r.error) || 'Nothing was kept.'); b.disabled = false; return; }
+    say(r.said, async () => { await post('/api/lab/undo', { batch: r.batch }); await load(); }); await load(); return;
+  }
+  if (d.labCmp) { const at = S.H.where() || {}; LC.openCompare({ where: { ws: at.ws, board: d.labBoard || at.board }, id: d.labCmp, H: { toast: S.H.toast, reload: load } }); }
+}
+export function mount(H) {
+  S.H = H;
+  if (!H.el) return;
+  H.el.addEventListener('click', press);
+  H.el.addEventListener('keydown', (e) => { if (e.key === 'Enter' && e.target.matches('[data-lab-reason]')) { e.preventDefault(); const x = e.target.closest('.lab-card').querySelector('[data-lab-drop]'); if (x) x.click(); } });
+}

package/workspace/public/pm/cozy-lab.css

@@ -0,0 +1,86 @@
+/* cozy-lab.css — the idle lab on the screen (build U, idle-lab B+C 2026-11-04; canvas main, In development I1 IlBC, I2 IlB, I3 IlCompare).
+ * The ✦ cards under an initiative's blue ✦ (pm/cozy-lab.js cardHtml, inside pm/ini-props.js), the compare view in the Viewer
+ * (openCompare) and Intelligence › Lab (pm/cozy-lab-ins.js). Agreed type roles only (--fs-/--fw-/--lh-), the cozy tokens for colour.
+ * Loaded once by pm/cozy-lab.js. */
+.lab-sec .vh, .lab-cmp .vh, .pp-p.lab .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+
+/* ── the ✦ cards (I2) ── */
+.pp-p.lab .w { gap: 6px; }
+.lab-ths { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 4px; }
+.lab-th { display: flex; flex-direction: column; border: 1px solid var(--cz-hair); border-radius: 12px; overflow: hidden; background: var(--cz-card); text-align: left; cursor: pointer; }
+.lab-th:hover { border-color: var(--cz-blue); }
+.lab-th:focus-visible, .lab-ib:focus-visible, .lab-key:focus-visible, .lab-hr:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 2px; }
+.lab-thf { display: block; position: relative; height: 112px; overflow: hidden; background: var(--cz-well); pointer-events: none; }
+.lab-thf iframe { position: absolute; left: 0; top: 0; width: 1280px; height: 800px; border: 0; transform: scale(.14); transform-origin: 0 0; background: var(--cz-card); }
+.lab-cap { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--cz-ink2); }
+.lab-cap b { font-size: var(--fs-meta); font-weight: var(--fw-strong); color: var(--cz-ink); }
+.lab-tx { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--cz-ink2); }
+.lab-tx b { font-weight: var(--fw-strong); color: var(--cz-ink); }
+.lab-ok { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--cz-ok); }
+.lab-ok a, .lab-tx a { color: inherit; }
+.lab-why { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
+.lab-why input { flex: 1; min-width: 0; min-height: 36px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink); font: inherit; font-size: var(--fs-meta); line-height: var(--lh-meta); }
+.lab-why input:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 1px; }
+.pp .pp-ib.solid, .lab-ib.solid { background: var(--cz-solid); color: var(--cz-onsolid); }
+
+/* ── the compare view (I3) ── */
+.lab-cmp { display: flex; flex-direction: column; gap: 14px; font-family: var(--cz-sans); color: var(--cz-ink); }
+.lab-say { margin: 0; display: flex; gap: 8px; align-items: baseline; padding: 10px 12px; border-radius: 14px; background: var(--cz-bluebg); color: var(--cz-ink2); font-size: var(--fs-body); line-height: var(--lh-body); }
+.lab-say > span { color: var(--cz-blueink); font-weight: var(--fw-strong); }
+.lab-cols { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 14px; }
+.lab-col { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--cz-hair); border-radius: 16px; background: var(--cz-card); }
+.lab-col.now { border-color: var(--cz-blue); }
+.lab-ch { display: flex; align-items: baseline; gap: 8px; }
+.lab-ch b { font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
+.lab-ch span { font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
+.lab-frame { display: block; border: 1px solid var(--cz-hair); border-radius: 12px; overflow: hidden; background: var(--cz-card); }
+.lab-frame iframe { display: block; width: 100%; height: 460px; border: 0; }
+.lab-left { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
+.lab-left b { font-weight: var(--fw-strong); color: var(--cz-ink2); }
+.lab-below { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; }
+.lab-below > .lab-hist:only-child { grid-column: 1 / -1; }
+.lab-card { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--cz-hair); border-radius: 16px; background: var(--cz-card); font-size: var(--fs-body); line-height: var(--lh-body); }
+.lab-card > b { font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
+.lab-card small { font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
+.lab-hn { font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
+.lab-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--cz-hair); font-size: var(--fs-body); line-height: var(--lh-row); color: var(--cz-ink); }
+.lab-card > b + .lab-row, .lab-hn + .lab-row, .lab-bar + .lab-row { border-top: 0; }
+.lab-row .w { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
+.lab-row .w b { font-weight: var(--fw-strong); }
+.lab-hr { width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 0; border-top: 1px solid var(--cz-hair); cursor: pointer; border-radius: 0; }
+.lab-hr[aria-current="true"] .w b { color: var(--cz-blueink); }
+.lab-pin { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--cz-blueink); color: var(--cz-onsolid); font-size: var(--fs-badge); font-weight: var(--fw-strong); line-height: var(--lh-badge); }
+.lab-pin.production { background: var(--cz-risk); }
+.lab-pin.design { background: var(--cz-ok); }
+.lab-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--cz-blue); }
+.lab-dot.kept { background: var(--cz-ok); }
+.lab-dot.dropped { background: var(--cz-ink3); }
+.lab-keys { display: inline-flex; gap: 4px; padding: 0 0 6px 19px; }
+.lab-key { min-width: 32px; height: 28px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink2); font: inherit; font-size: var(--fs-meta); font-weight: var(--fw-strong); cursor: pointer; }
+.lab-key[aria-pressed="true"] { background: var(--cz-bluebg); color: var(--cz-blueink); border-color: transparent; }
+
+/* ── Intelligence › Lab (I1) ── */
+.lab-sec { gap: 14px; }
+.lab-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.lab-bar b { font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
+.lab-bar small { font-size: var(--fs-meta); color: var(--cz-ink3); }
+.lab-sp { color: var(--cz-blueink); font-weight: var(--fw-strong); }
+.lab-acts { margin-left: auto; display: inline-flex; gap: 4px; }
+.lab-ib { width: 32px; height: 32px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--cz-ink2); background: none; border: 1px solid var(--cz-hair); cursor: pointer; padding: 0; }
+.lab-ib.ok { background: var(--cz-blueink); color: var(--cz-onsolid); border-color: transparent; }
+.lab-ib:hover { color: var(--cz-ink); }
+.lab-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--cz-well); color: var(--cz-ink2); display: inline-flex; align-items: center; justify-content: center; flex: none; }
+.lab-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--cz-well); color: var(--cz-ink2); font-size: var(--fs-badge); font-weight: var(--fw-strong); line-height: var(--lh-badge); white-space: nowrap; text-decoration: none; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
+.lab-pill.ok { background: var(--cz-okbg); color: var(--cz-ok); }
+.lab-pill.y { background: var(--cz-bluebg); color: var(--cz-blueink); }
+.lab-2 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; align-items: start; }
+.lab-2 > .lab-rec:only-child { grid-column: 1 / -1; }
+.lab-side { display: flex; flex-direction: column; gap: 14px; }
+.lab-big { font-size: var(--fs-page); font-weight: var(--fw-strong); line-height: var(--lh-page); }
+
+@media (max-width: 760px) {
+  .lab-cols, .lab-below, .lab-2 { grid-template-columns: 1fr; }
+  .lab-frame iframe { height: 380px; }
+  .lab-ib { width: 44px; height: 44px; }
+  .lab-ths { grid-template-columns: 1fr 1fr; }
+}

package/workspace/public/pm/cozy-lab.js

@@ -0,0 +1,138 @@
+/* pm/cozy-lab.js — the idle lab on the screen (build U, idle-lab B+C 2026-11-04; canvas main, In development I2 IlB, I3 IlCompare).
+ *
+ *   isLab(p)                 a proposal of the idle lab (group prototyped, improved or scanned; lib/idle-lab.js result)
+ *   cardHtml(p, { why })     its ✦ card under the initiative's blue ✦ (pm/ini-props.js draws the list): "Claude prototyped it" shows round 1
+ *                            as thumbnails, each one a press that opens the compare view; "Claude improved it" says what changed and from
+ *                            what; "Claude scanned for it" is a finding to attach as evidence, with the pages it read. Icon-only presses:
+ *                            ⤢ compare, ✕ drop (it asks why first: Claude learns from it; the reason is optional), ✓ keep.
+ *   openCompare({ where: { ws, board }, id, key?, H? })   the compare view in the Viewer: the ✦ line, the columns (Production, Design,
+ *                            Prototype), "Where they differ" and History. A column whose source is not proven is left out with one line
+ *                            why (lib/idle-lab.js PROVEN). A press on a round in History puts it in the Prototype column. ✓ and ✕ in the
+ *                            header keep or drop the round shown.
+ * Every specimen loads from GET /api/lab/specimen in a sandboxed frame: it cannot reach PMOS. Nothing is written before the PM's ✓. */
+import { pmGet, pmPost } from './http.js';
+
+const esc = (s) => String(s == null ? '' : s).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
+const SVG = (d, w = 16, sw = 1.8) => `<svg aria-hidden="true" width="${w}" height="${w}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="${sw}" stroke-linecap="round" stroke-linejoin="round"><path d="${d}"/></svg>`;
+export const I = {
+  proto: 'M3 4h18v14H3zM3 9h18', round: 'M3 12a9 9 0 1 0 3-6.7L3 8M3 3v5h5', scan: 'M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18M12 3a15 15 0 0 1 0 18M3 12h18',
+  open: 'M7 17 17 7M8 7h9v9', check: 'M5 12l5 5 9-10', x: 'M6 6l12 12M18 6L6 18',
+};
+const GROUPS = ['prototyped', 'improved', 'scanned'];
+const MON = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+const when = (iso) => { const d = new Date(iso); if (isNaN(d)) return ''; const t = new Date(); const same = d.toDateString() === t.toDateString(); return same ? 'today ' + String(d.getHours()).padStart(2, '0') + ':' + String(d.getMinutes()).padStart(2, '0') : d.getDate() + ' ' + MON[d.getMonth()]; };
+const specUrl = (file) => '/api/lab/specimen?file=' + encodeURIComponent(file);
+const ib = (attr, label, icon, cls = '') => `<button type="button" class="pp-ib${cls ? ' ' + cls : ''}" ${attr} aria-label="${esc(label)}" title="${esc(label)}">${SVG(icon, 16, 2.2)}</button>`;
+
+// the look, loaded once (cozy-lab.css)
+if (typeof document !== 'undefined' && typeof document.createElement === 'function' && document.head && !document.querySelector('link[data-lab-css]')) {
+  const l = document.createElement('link'); l.rel = 'stylesheet'; l.href = new URL('./cozy-lab.css', import.meta.url).href; l.dataset.labCss = '1'; document.head.appendChild(l);
+}
+
+export const isLab = (p) => !!p && GROUPS.includes(p.group);
+
+/** A specimen as a still thumbnail: the page drawn at desk size and scaled down, in a frame that cannot reach PMOS. */
+export function thumbHtml(file, label) {
+  return `<span class="lab-thf" aria-hidden="true"><iframe src="${esc(specUrl(file))}" sandbox="allow-scripts" loading="lazy" tabindex="-1" title="${esc(label)}"></iframe></span>`;
+}
+function srcLine(p) {
+  const s = p.sources || [];
+  if (p.group === 'scanned') {
+    const d = p.data || {}, n = d.pages || s.length;
+    const links = s.filter((x) => /^https?:\/\//.test(x.ref || '')).map((x) => `<a href="${esc(x.ref)}" target="_blank" rel="noopener noreferrer">${esc(x.label)}</a>`).join(', ');
+    return `Read: ${n} ${n === 1 ? 'page' : 'pages'}${d.refreshed ? ' · ' + esc(d.refreshed) : ''}${links ? ' · ' + links : ''}`;
+  }
+  return esc(s.map((x) => x.label).join(', '));
+}
+/** The ✦ card. why: the ✕ was pressed, so the card asks why before it drops. */
+export function cardHtml(p, { why = false } = {}) {
+  const d = p.data || {}, id = esc(p.id);
+  const acts = (p.group !== 'scanned' ? ib(`data-lab-open="${id}"`, 'Compare it with production and the design', I.open) : '')
+    + ib(`data-lab-why="${id}" aria-expanded="${why}"`, 'Drop it', I.x) + ib(`data-pp-keep="${id}"`, 'Keep it', I.check, 'ok');
+  let head = '', body = '';
+  if (p.group === 'prototyped') {
+    const sp = d.specimens || [];
+    head = p.title || `Round 1 · ${sp.length} ways to do it, so you can look instead of read`;
+    body = `<div class="lab-ths">${sp.map((x) => `<button type="button" class="lab-th" data-lab-open="${id}" data-lab-key="${esc(x.key)}" aria-label="${esc('Open ' + x.key + ', ' + x.title + ', in the compare view')}">${thumbHtml(x.file, x.key + ' · ' + x.title)}<span class="lab-cap"><b>${esc(x.key)} · ${esc(x.title)}</b>${esc(x.caption)}</span></button>`).join('')}</div>`
+      + `<small class="lab-ok">Checked: ${esc(d.checked || '')}${p.sources && p.sources.length ? ' · built from ' + srcLine(p) : ''}</small>`;
+  } else if (p.group === 'improved') {
+    head = p.title || `Round ${d.round} of ${d.base || ''}`;
+    body = `<p class="lab-tx">${esc(p.why)} <b>${esc(d.changed || '')}</b></p><small class="lab-ok">Source: ${srcLine(p)}${d.checked ? ' · ' + esc(d.checked) : ''}</small>`;
+  } else {
+    head = p.title || 'Attach as evidence';
+    body = `<p class="lab-tx">${esc(p.why)}</p><small class="lab-ok">${srcLine(p)}</small>`;
+  }
+  const ask = why ? `<div class="lab-why"><label class="vh" for="labWhy-${id}">Why drop it? Claude learns from it</label><input id="labWhy-${id}" data-lab-reason="${id}" maxlength="200" placeholder="Why not? Claude learns from it (you can leave it empty)">${ib(`data-lab-drop="${id}"`, 'Drop it now', I.x, 'solid')}</div>` : '';
+  const icon = p.group === 'prototyped' ? I.proto : p.group === 'improved' ? I.round : I.scan;
+  return `<div class="pp-p lab" data-pp="${id}"><div class="pp-ph1"><span class="pp-ic gr">${SVG(icon, 16)}</span><span class="w"><b>${esc(head)}</b>${body}${ask}</span><span class="pp-gacts">${acts}</span></div></div>`;
+}
+
+/* ── the compare view (I3) ── */
+const C = { at: null, id: null, key: '', c: null, H: null };
+async function read() {
+  const at = C.at || {};
+  return pmGet('/api/lab/compare?ws=' + encodeURIComponent(at.ws || '') + '&board=' + encodeURIComponent(at.board || '') + '&id=' + encodeURIComponent(C.id) + (C.key ? '&key=' + encodeURIComponent(C.key) : '')).catch(() => null);
+}
+function colHtml(col) {
+  return `<section class="lab-col${col.id === 'prototype' ? ' now' : ''}" aria-label="${esc(col.title)}"><div class="lab-ch"><b>${esc(col.title)}</b><span>${esc(col.meta || '')}</span></div>`
+    + `<span class="lab-frame"><iframe src="${esc(col.url || specUrl(col.file))}" sandbox="allow-scripts" title="${esc(col.title)}"></iframe></span>`
+    + (col.read ? `<small class="lab-ok">${esc(col.read)}</small>` : '') + '</section>';
+}
+function bodyHtml(c) {
+  const shown = c.columns.filter((x) => !x.left), left = c.columns.filter((x) => x.left);
+  const pins = c.pins.length ? `<section class="lab-card"><b>Where they differ</b>${c.pins.map((p) => `<div class="lab-row"><span class="lab-pin ${esc(p.vs)}">${p.n}</span><span>${esc(p.text)}</span></div>`).join('')}</section>` : '';
+  const hist = `<section class="lab-card lab-hist" aria-label="History"><b>History</b><span class="lab-hn">Press a round to show it in the Prototype column</span>`
+    + c.history.map((h) => `<button type="button" class="lab-row lab-hr" data-lab-round="${esc(h.id)}" aria-current="${h.current}"><span class="lab-dot ${esc(h.state)}"></span><span class="w"><b>Round ${h.round}</b> · ${esc(when(h.at))}<small>${esc(h.state === 'kept' ? 'you kept it · ' : h.state === 'dropped' ? 'you dropped it · ' : '')}${esc(h.meta)}</small></span></button>`
+      + (h.keys && h.current ? `<span class="lab-keys">${h.keys.map((k) => `<button type="button" class="lab-key" data-lab-key="${esc(k.key)}" aria-pressed="${k.key === c.key}" aria-label="${esc('Show ' + k.key + ', ' + k.title)}">${esc(k.key)}</button>`).join('')}</span>` : '')).join('')
+    + '</section>';
+  return `<div class="lab-cmp">${c.say ? `<p class="lab-say"><span aria-hidden="true">✦</span> ${esc(c.say)}</p>` : ''}`
+    + `<div class="lab-cols" style="--n:${shown.length}">${shown.map(colHtml).join('')}</div>`
+    + (left.length ? `<ul class="lab-left">${left.map((x) => `<li><b>${esc(x.title)}</b> ${esc(x.left)}</li>`).join('')}</ul>` : '')
+    + `<div class="lab-below">${pins}${hist}</div></div>`;
+}
+function presses(c) {
+  return c && c.state === 'open' ? [{ act: 'drop', label: 'Drop this round', icon: I.x }, { act: 'keep', label: 'Keep this round', icon: I.check, blue: true }] : [];
+}
+function draw() {
+  const VW = window.czViewer, b = VW && VW.body(), cur = VW && VW.current();
+  if (!b || !cur || cur.id !== 'lab:cmp' || !C.c) return;
+  b.innerHTML = bodyHtml(C.c);
+  VW.setPresses(cur.id, presses(C.c));
+  if (VW.retitle) VW.retitle(cur.id, C.c.title);
+}
+async function load() {
+  const r = await read();
+  if (!r || r.ok === false) { const b = window.czViewer && window.czViewer.body(); if (b) b.innerHTML = `<p class="pp-none">${esc((r && r.error) || 'The prototype could not be read.')}</p>`; return; }
+  C.c = r.compare; C.key = r.compare.key;
+  // two or three columns side by side need the room: the Viewer opens wide (one column stays as it is)
+  if (C.c.columns.filter((x) => !x.left).length > 1 && window.czViewer.wide) window.czViewer.wide(true);
+  draw();
+}
+async function act(a) {
+  const c = C.c, at = C.at || {}; if (!c) return;
+  const say = (m, u) => { if (C.H && C.H.toast) C.H.toast(m, u); };
+  if (a === 'keep') {
+    const r = await pmPost('/api/proposals/keep', { ws: at.ws, board: at.board || c.board, initiative: c.ini, ids: [c.id] }).catch(() => null);
+    if (!r || r.ok === false) { say((r && r.error) || 'Nothing was kept.'); return; }
+    say(r.said, async () => { await pmPost('/api/proposals/undo', { ws: at.ws, board: at.board || c.board, batch: r.batch }).catch(() => null); await load(); if (C.H && C.H.reload) C.H.reload(); });
+  } else if (a === 'drop') {
+    const r = await pmPost('/api/proposals/drop', { ws: at.ws, board: at.board || c.board, initiative: c.ini, sig: c.sig }).catch(() => null);
+    if (!r || r.ok === false) { say((r && r.error) || 'Nothing was changed.'); return; }
+    say('Dropped round ' + c.round + '.');
+  }
+  await load(); if (C.H && C.H.reload) C.H.reload();
+}
+export function openCompare({ where, id, key = '', H = null } = {}) {
+  const VW = window.czViewer; if (!VW || !id) return;
+  Object.assign(C, { at: where || {}, id, key, c: null, H });
+  VW.drill();
+  VW.open({ id: 'lab:cmp', kind: 'Prototype', title: 'Prototype', icon: I.proto, presses: [], onPress: (a) => act(a),
+    render: (b) => {
+      b.innerHTML = '<p class="pp-none">Reading the prototype.</p>';
+      b.onclick = (e) => {
+        const r = e.target.closest('[data-lab-round]'); if (r) { C.id = r.dataset.labRound; C.key = ''; load(); return; }
+        const k = e.target.closest('[data-lab-key]'); if (k) { C.key = k.dataset.labKey; load(); }
+      };
+      load();
+    } });
+}

package/workspace/public/pm/cozy-nav.js

@@ -21,7 +21,8 @@
  */
 import { esc, svg, ICON, wsQ } from './cozy-evui.js';
 import { fabLabel, bannerOf } from './cozy-evmodel.js';
-import { mountToastFaces, loadPrefs, adlerPeek, asleep } from './cozy-adler.js';   // Adler (batch 16 item 2): every toast carries his S face; Settings > Adler is read once
+import { mountToastFaces, loadPrefs, adlerPeek, asleep } from './cozy-adler.js';
+import { pmPost } from './http.js';   // Adler (batch 16 item 2): every toast carries his S face; Settings > Adler is read once
 
 export const PLACES = [
   { key: 'home', label: 'Home', href: '/premium.html', d: ICON.home },
@@ -31,7 +32,11 @@ export const PLACES = [
 export { fabLabel };
 const THEME_KEY = 'pmos.c3.theme';
 const CSS = new URL('./cozy-ev.css', import.meta.url).href;
-const N = { news: 0, stale: null, here: 'home', calls: 0 };
+const N = { news: 0, stale: null, here: 'home', calls: 0, fresh: new Set() };
+/* A place that just opened (onboarding B3, ObA4Gradual; GET /api/moments places[p].dot): its menu row gets one soft blue dot until the PM
+ * first opens it. Reports live in Intelligence, so their dot is on the Intelligence row. */
+const ROW_OF = { board: 'board', insights: 'insights', reports: 'insights' };
+export const freshRows = (places) => new Set(Object.entries(places || {}).filter(([, v]) => v && v.dot).map(([k]) => ROW_OF[k]).filter(Boolean));
 
 const store = { get(k) { try { return localStorage.getItem(k); } catch { return null; } }, set(k, v) { try { if (v) localStorage.setItem(k, v); else localStorage.removeItem(k); } catch { /* a private window */ } } };
 /** The theme the PM picked on this device: light, dark or auto. */
@@ -50,8 +55,9 @@ export function setTheme(pick, doc = document, { keep = true } = {}) {
 export function menuHtml(here, o = {}) {
   const news = o.news > 0, dot = (c) => `<i class="ev-md ${c}" aria-hidden="true"></i>`;
   return PLACES.map((p) => {
-    const you = p.key === 'home' && news;
-    const lab = you ? ` aria-label="${p.label}. ${o.news} new for you in Your day"` : '';
+    const opened = p.key !== here && !!(o.fresh && o.fresh.has(p.key));
+    const you = (p.key === 'home' && news) || opened;
+    const lab = p.key === 'home' && news ? ` aria-label="${p.label}. ${o.news} new for you in Your day"` : opened ? ` aria-label="${p.label}. New: it has something to show now"` : '';
     return `<a href="${p.href}"${p.key === here ? ' aria-current="page"' : ''}${lab}>${svg(p.d, 18)}${p.key === here ? `<b>${p.label}</b>` : `<span>${p.label}</span>`}${you ? dot('you') : ''}</a>`;
   }).join('')
     + '<div class="ev-tray">'
@@ -88,10 +94,11 @@ export function mountNav(here, doc = document, opts = {}) {
   mountToastFaces(doc); loadPrefs();
   const fab = w.querySelector('#czFab'), menu = w.querySelector('#czMenu'), scrim = w.querySelector('#czScrim');
   const draw = () => {
-    menu.innerHTML = menuHtml(here, { news: N.news, stale: N.stale });
-    w.querySelector('#czFdYou').hidden = !(N.news > 0) || !menu.hidden;
+    menu.innerHTML = menuHtml(here, { news: N.news, stale: N.stale, fresh: N.fresh });
+    const opened = [...N.fresh].some((k) => k !== here);
+    w.querySelector('#czFdYou').hidden = !(N.news > 0 || opened) || !menu.hidden;
     w.querySelector('#czFdRisk').hidden = !N.stale || !menu.hidden;
-    if (menu.hidden) fab.setAttribute('aria-label', fabLabel(here, false, N.stale, N.news) + (earsOn() ? '. ' + callWords(N.calls) : ''));
+    if (menu.hidden) fab.setAttribute('aria-label', fabLabel(here, false, N.stale, N.news) + (opened ? '. A place has something new to show' : '') + (earsOn() ? '. ' + callWords(N.calls) : ''));
     drawEars();
   };
   // AdP6: the ears are drawn once and kept while the count stays above zero, so a redraw never replays them
@@ -132,7 +139,14 @@ export function mountNav(here, doc = document, opts = {}) {
   }, true);
   const read = async () => {
     if (doc.hidden) return;
-    const [n, s] = await Promise.all([getj('/api/news-for-you' + wsQ()), getj('/api/sources' + wsQ())]);
+    const [n, s, mo] = await Promise.all([getj('/api/news-for-you' + wsQ()), getj('/api/sources' + wsQ()), getj('/api/moments')]);
+    if (mo && mo.ok) {
+      // the place the PM is on is visited: its dot clears (Intelligence also clears the reports dot, they live here)
+      const mine = Object.keys(ROW_OF).filter((k) => ROW_OF[k] === here && mo.places && mo.places[k] && mo.places[k].dot);
+      for (const k of mine) { mo.places[k].dot = false; pmPost('/api/moments/visit', { place: k }).catch(() => {}); }
+      N.fresh = freshRows(mo.places);
+      doc.dispatchEvent(new CustomEvent('cz:moments', { detail: mo }));
+    }
     if (n && n.ok) { N.news = n.count || 0; doc.dispatchEvent(new CustomEvent('cz:news-for-you', { detail: n })); }
     if (s && s.ok) { N.stale = bannerOf(s.sources); doc.dispatchEvent(new CustomEvent('cz:sources', { detail: s })); }   // Your day's failed source (AdP5)
     if (menu.hidden || !menu.contains(doc.activeElement)) draw();

package/workspace/public/pm/cozy-onboard.css

@@ -58,3 +58,34 @@ body.ob-on #hmChat[hidden] { display: none; }
 .cs-checklist[hidden] { display: none; }
 .cs-checklist p { margin: 0; font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
 .cs-checklist .ut-btn { align-self: flex-start; text-decoration: none; }
+/* onboarding build B1: the ✦ proposals (✓ ✕ only), the source tiles and the fundamentals card */
+.ob-prop { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 12px; max-width: 720px; box-sizing: border-box; }
+.ob-pt { margin: 0; display: flex; gap: 8px; align-items: baseline; font-size: var(--fs-body); font-weight: var(--fw-strong); color: var(--cz-ink); line-height: var(--lh-body); }
+.ob-spark { color: var(--cz-blueink); flex: none; }
+.ob-pl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
+.ob-pl > li { padding: 8px 0; border-top: 1px solid var(--cz-hair); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--cz-ink); overflow-wrap: anywhere; }
+.ob-pl > li b { color: var(--cz-ink2); font-size: var(--fs-meta); line-height: var(--lh-meta); margin-right: 6px; }
+.ob-pl a, .ob-fund a { color: var(--cz-blueink); }
+.ob-yn { display: flex; gap: 8px; justify-content: flex-end; padding-top: 2px; }
+.ob-yn .ob-no { background: var(--cz-well); color: var(--cz-ink2); }
+.ob-yn .ut-ib { width: 44px; height: 44px; }
+.ob-lk { font: inherit; font-size: var(--fs-meta); line-height: var(--lh-meta); border: 0; padding: 0; background: none; color: var(--cz-blueink); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
+.ob-lk:disabled { color: var(--cz-ink3); cursor: default; }
+.ob-fl { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; }
+.ob-fl > span { min-width: 0; }
+.ob-fl em { grid-column: 2; font-style: normal; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
+.ob-fl .ob-pen { grid-column: 3; grid-row: 1; }
+.ob-miss { color: var(--cz-ink3); }
+.ob-rv .ob-fld { grid-template-columns: 90px minmax(0, 1fr); border-top: 0; padding: 0; }
+.ob-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; max-width: 720px; }
+.ob-tile { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; min-width: 0; }
+.ob-tile .ob-ts { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-blueink); line-height: var(--lh-label); }
+.ob-tile b { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--cz-ink); overflow-wrap: anywhere; }
+.ob-tile b a { color: inherit; text-decoration: none; }
+.ob-tile > span:last-child { font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
+.ob-fund li { align-items: flex-start; }
+.ob-fund li svg { margin-top: 3px; }
+.ob-fund li > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.ob-fund li em { font-style: normal; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); overflow-wrap: anywhere; }
+.ob-fund li .ob-lk { align-self: flex-start; }
+@media (max-width: 760px) { .ob-fl { grid-template-columns: minmax(0, 1fr) auto; } .ob-fl em { grid-column: 1; } .ob-fl .ob-pen { grid-column: 2; } .ob-rv .ob-fld { grid-template-columns: minmax(0, 1fr); } }