create-pmos 0.523.0 → 0.524.0

package/workspace/lib/scan-run.js

@@ -7,7 +7,8 @@
  *   1. closes a scan that was alive when the server stopped (`scan-end`, reason "interrupted"), and writes the report documents it already held;
  *   2. starts at most one job, and none while one is running (one scan at a time across the workspace):
  *        - a suggest run for a workspace with no watch list (lib/scan.js suggestDue), or
- *        - the portfolio scan, when it is due (lib/scan.js dueNow: the cadence, 09:00, the working hours, quiet hours, once per day).
+ *        - the portfolio scan, when it is due (lib/scan.js dueNow: the cadence, 09:00, the working hours, quiet hours, once per day) and the
+ *          queue gives it an idle turn (`idle`, lib/bg-queue.js step 5: the PM stepped away, or the last hour of the working day came first).
  * The routes call the other three: Scan now (`startNow`: at most 3 a day, never in quiet hours, one at a time), an approved research proposal
  * (`startResearch`) and Stop (`stop`).
  *
@@ -292,7 +293,7 @@ function create(deps) {
     return { ok: true, scans: stopped };
   }
 
-  function tick({ now = Date.now(), env } = {}) {
+  function tick({ now = Date.now(), env, idle = true } = {}) {
     if (off(env || deps.env)) return { off: true };
     const summary = { closed: 0, started: 0 };
     const settings = deps.settings();
@@ -318,7 +319,7 @@ function create(deps) {
           if (got && got.initiatives.length) { startSuggest(w, file, got, now); summary.started++; }
           continue;
         }
-        if (S.dueNow(state, null, now, { open }).ok) {
+        if (S.dueNow(state, null, now, { open, idle }).ok) {
           const sel = S.selectScan(state, {});
           if (!sel.ok) continue;
           let ctx = { boards: [], initiatives: [] };

package/workspace/lib/scan.js

@@ -430,7 +430,7 @@ function isWorkingDay(ms, cadence) {
   return false;
 }
 const slotMs = (ms) => { const d = new Date(ms); const [h, m] = SLOT.split(':').map(Number); d.setHours(h, m, 0, 0); return d.getTime(); };
-const scheduleText = (cadence) => (cadence === 'daily' ? 'Every working day, 09:00' : cadence === 'weekly' ? 'Every Monday, 09:00' : 'Off. No scan runs');
+const scheduleText = (cadence) => (cadence === 'daily' ? 'Every working day, when you step away after 09:00' : cadence === 'weekly' ? 'Every Monday, when you step away after 09:00' : 'Off. No scan runs');
 
 /** The report types a scan can write, given the repository switch and the number of web items it will search. Web reports (benchmark, competitive, insight)
  * need an item or the repository; the productivity report needs the repository. */
@@ -441,8 +441,9 @@ function effectiveTypes(types, { repo, items }) {
 
 /** May a scheduled scan start now? `open` is the day-check window and quiet hours as one boolean (lib/driver-run.js dayCheckOpen). `board` null = the portfolio.
  * → { ok } | { ok: false, why }. A scan that missed 09:00 starts at the first tick inside the working hours of that day, never outside them.
- * One scan per day across the portfolio, whoever started it: a manual scan today is today's scan. */
-function dueNow(state, board, now, { open = true } = {}) {
+ * One scan per day across the portfolio, whoever started it: a manual scan today is today's scan. `idle` is the turn lib/bg-queue.js gave
+ * (idle lab, frame I4): the daily scan starts in the first idle stretch of the day after 09:00, or in the last working hour if none came. */
+function dueNow(state, board, now, { open = true, idle = true } = {}) {
   const cadence = cadenceOf(state);
   if (cadence === 'off') return { ok: false, why: 'off' };
   const kept = keptItems(state, board);
@@ -453,6 +454,7 @@ function dueNow(state, board, now, { open = true } = {}) {
   if (scanDay(state, board, D.localDay(now)).length) return { ok: false, why: 'done-today' };
   if (openScans(state).some((x) => !board || x.board === board)) return { ok: false, why: 'running' };
   if (!effectiveTypes(state.setting.types, { repo: state.setting.repo, items: kept.length }).length) return { ok: false, why: 'no-reports' };
+  if (!idle) return { ok: false, why: 'waiting-for-idle' };
   return { ok: true };
 }
 

package/workspace/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "pmos-workspace",
-  "version": "0.523.0",
+  "version": "0.524.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "pmos-workspace",
-      "version": "0.523.0",
+      "version": "0.524.0",
       "license": "MIT",
       "dependencies": {
         "@anthropic-ai/sdk": "^1.3.0",

package/workspace/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pmos-workspace",
-  "version": "0.523.0",
+  "version": "0.524.0",
   "private": true,
   "description": "PMOS Terminal Workspace — local companion hosting real PTYs beside the library and gates (D62)",
   "license": "MIT",

package/workspace/project-onboard-flow-test.js

@@ -2,9 +2,11 @@
 'use strict';
 /* project-onboard-flow-test.js — the project-first setup conversation in the real Home page, against the real server, with a FIXTURE `claude`
  * (fixtures/fake-claude-onboard.js). It proves the plumbing and the page, not a live account: no real sign-in, no real connector.
- * Covers: login gating (a failed test unlocks nothing), the project question, the proposed new folder, connector listing, the read-only
- * search flags, a denied source contributing nothing, two Jira matches needing a choice, a real kit install in a temporary folder, the project
- * shown in My Work with next steps, reuse of an existing PMOS folder, and desktop and phone widths. SHOTS=<dir> saves screenshots. */
+ * Covers (onboarding build B1): the silent login check (a failed check asks once, as ✦ Sign in), the composer open from the first screen, the
+ * product question, one ✦ for the folder + read-only search + sign-ins with ✓ ✕ only, ✕ answered in the composer, the read-only search flags,
+ * a denied source contributing nothing, the source tiles, two Jira matches needing a choice, a real kit install in a temporary folder, the
+ * fundamentals card with a source on every line and a one-press change, reuse of an existing PMOS folder, and desktop and phone widths.
+ * SHOTS=<dir> saves screenshots. */
 const fs = require('fs');
 const os = require('os');
 const path = require('path');
@@ -33,76 +35,88 @@ const shot = async (p, name) => { if (SHOTS) { fs.mkdirSync(SHOTS, { recursive:
   const log = () => fs.existsSync(LOG) ? fs.readFileSync(LOG, 'utf8').trim().split('\n').map((l) => JSON.parse(l)) : [];
   const btn = (label) => p.locator('#obChat button', { hasText: label }).first();
 
-  await step('The old Welcome page opens the Home conversation, not the three-step wizard', async () => {
+  const press = (act) => p.locator(`#obChat [data-ob="${act}"]`).last().click();
+  const say = async (pg, text) => { await pg.fill('#obChat textarea', text); await pg.keyboard.press('Enter'); };
+
+  await step('The old Welcome page opens the Home conversation; the login is checked by itself and the composer is open', async () => {
     await p.goto(T.BASE + '/premium-welcome.html?ws=x&step=sources');
     assert.match(p.url(), /\/premium\.html\?onboard=1$/);
-    await p.waitForSelector('#obChat .ob-card');
+    await p.waitForSelector('#obChat .ob-prop');
     assert(await p.locator('#hmChat').isHidden(), 'one chat at a time'); assert(await p.locator('#hmList').isVisible(), 'the list stays');
+    assert.match(await p.locator('#obChat .ob-prop').innerText(), /Sign in to Claude Code/, 'only a failed check asks');
+    assert(!(await p.locator('#obChat input[name="ob-login"]').count()), 'no login picker on the first screen');
+    assert(await p.locator('#obChat textarea').isEnabled(), 'the composer is open from the first screen');
+    assert.match(await p.locator('#obChat').innerText(), /What product or project is this for\?/);
+    const check = log().find((a) => a.includes('-p') && a.includes('--output-format') && a[a.indexOf('--output-format') + 1] === 'json');
+    assert(check && check.includes('--safe-mode') && check[check.indexOf('--tools') + 1] === '', 'the silent check is the bounded, tool-free check');
+    await shot(p, 'onboard-1-first-open');
   });
-  await step('A failed login test is honest and unlocks nothing', async () => {
-    await shot(p, 'onboard-1-connect');
-    await btn('Test this login').click();
-    await p.waitForSelector('#obChat .ob-bad');
-    assert.match(await p.locator('#obChat .ob-bad').innerText(), /won’t switch to a different account/);
-    assert(await p.locator('#obChat textarea').isDisabled(), 'no project question before a passing test');
-  });
-  await step('A passing test of that login asks about the project', async () => {
+  await step('An answer typed before the check passes waits; a passing test of another login sends it', async () => {
+    await say(p, 'Checkout redesign, payments team. Jira key PAY.');
+    await p.waitForFunction(() => /I start as soon as the Claude check passes/.test(document.querySelector('#obChat').innerText));
     fs.writeFileSync(MODE, 'ready');
+    await press('chooser');
     await btn('Test this login').click();
     await p.waitForSelector('#obChat .ob-good');
-    assert(await p.locator('#obChat textarea').isEnabled());
-    const check = log().find((a) => a.includes('-p') && a.includes('--output-format') && a[a.indexOf('--output-format') + 1] === 'json');
-    assert(check && check.includes('--safe-mode') && check[check.indexOf('--tools') + 1] === '', 'the test is the bounded, tool-free check');
-    await shot(p, 'onboard-2-tested');
+    assert.match(await p.locator('#obChat .ob-good').innerText(), /signed in on this computer, and I just tested it/);
   });
-  await step('The answer names the project and proposes a new folder that overwrites nothing', async () => {
-    await p.fill('#obChat textarea', 'Checkout redesign, payments team. Jira key PAY.');
-    await p.keyboard.press('Enter');
-    await p.waitForSelector('#obChat input[name="ob-folder"][value="new"]');
-    const card = await p.locator('#obChat .ob-card').first().innerText();
+  await step('One ✦ proposes the folder, the read-only search and what needs a sign-in; nothing is created or searched before ✓', async () => {
+    await p.waitForSelector('#obChat [data-ob="plan-yes"]', { timeout: 15000 });
+    const card = await p.locator('#obChat .ob-prop').last().innerText();
     assert(card.includes(path.join(HOME, 'PMOS', 'checkout-redesign')), card);
+    assert.match(card, /Atlassian, Slack for “Checkout redesign” and PAY/); assert.match(card, /Google Drive needs signing in inside Claude/);
     assert(!fs.existsSync(path.join(HOME, 'PMOS', 'checkout-redesign')), 'nothing created before the confirmation');
+    assert(!log().some((a) => a.includes('--allowedTools')), 'nothing searched before ✓');
+    assert(log().some((a) => a[0] === 'mcp' && a[1] === 'list'), 'the sources come from the verified login, with no model call');
+    assert.equal(await p.locator('#obChat .ob-prop').last().locator('button.ut-ib').count(), 2, '✓ and ✕ only');
+    await shot(p, 'onboard-2-plan');
   });
-  await step('Sources come from the verified login, with no model call, and nothing is searched before the press', async () => {
-    const before = log().length;
-    await btn('Show what I can read').click();
-    await p.waitForSelector('#obChat input[name="ob-src"]');
-    assert.deepEqual(log().slice(before), [['mcp', 'list']]);
-    assert(await p.locator('#obChat input[name="ob-src"][value="claude.ai Google Drive"]').isDisabled(), 'a source that needs sign-in cannot be ticked');
-    await shot(p, 'onboard-3-folder-sources');
+  await step('✕ asks what to change in the composer; leaving a source out changes the ✦', async () => {
+    await press('plan-no');
+    await p.waitForFunction(() => /What should I change\?/.test(document.querySelector('#obChat').innerText));
+    await say(p, 'leave out Google Drive');
+    await p.waitForFunction(() => /Left out: Google Drive/.test(document.querySelector('#obChat').innerText));
   });
-  await step('The search is read-only by its flags; a denied source contributes nothing; two Jira matches ask for a choice', async () => {
-    await btn('Search, read-only').click();
-    await p.waitForSelector('#obChat input[name="ob-jira"]', { timeout: 30000 });
+  await step('✓ searches read-only by its flags; a denied source contributes nothing; the findings are source tiles', async () => {
+    await press('plan-yes');
+    await p.waitForSelector('#obChat .ob-tile', { timeout: 30000 });
     const run = log().find((a) => a.includes('--allowedTools'));
     const at = (f) => run[run.indexOf(f) + 1];
     assert.equal(at('--permission-mode'), 'dontAsk'); assert.equal(at('--tools'), ''); assert.deepEqual(JSON.parse(at('--settings')), { disableAllHooks: true });
-    const allow = at('--allowedTools').split(',');
-    assert.deepEqual(allow.sort(), ['mcp__claude_ai_Atlassian__getVisibleJiraProjects', 'mcp__claude_ai_Atlassian__searchJiraIssuesUsingJql', 'mcp__claude_ai_Slack__slack_search_public']);
+    assert.deepEqual(at('--allowedTools').split(',').sort(), ['mcp__claude_ai_Atlassian__getVisibleJiraProjects', 'mcp__claude_ai_Atlassian__searchJiraIssuesUsingJql', 'mcp__claude_ai_Slack__slack_search_public']);
     const text = await p.locator('#obChat').innerText();
-    assert.match(text, /Atlassian · 3 found/); assert.match(text, /Slack · couldn’t read/); assert(!text.includes('#checkout'), 'nothing from the denied source');
-    assert.equal(await p.locator('#obChat input[name="owner"]').inputValue(), '', 'a field cited from a failed source stays empty');
-    assert.equal(await p.locator('#obChat input[name="purpose"]').inputValue(), 'Reduce checkout drop-off on mobile');
-    await shot(p, 'onboard-4-review');
+    assert.match(text, /I found one thing about/); assert.match(text, /Slack: This login is not allowed to search it/); assert(!text.includes('#checkout'), 'nothing from the denied source');
+    const ctxCard = await p.locator('#obChat form[data-ob-form="review"]').innerText();
+    assert.match(ctxCard, /Reduce checkout drop-off on mobile/); assert.match(ctxCard, /Owner\s*Not found\. Tell me, or leave blank/);
+    assert(!/Invented Person/.test(ctxCard), 'a field cited from a failed source stays empty');
+    await shot(p, 'onboard-3-found');
   });
-  await step('Setup waits for the Jira choice, then installs PMOS for real and opens the project in My Work', async () => {
-    await btn('Set up PMOS in').click();
+  await step('Setup waits for the Jira choice, installs PMOS for real, and shows the fundamentals card', async () => {
+    await press('init');
     await p.waitForFunction(() => /Choose which Jira project/.test((document.querySelector('#obChat .ob-live') || {}).innerText || ''), null, { timeout: 15000 });
     await p.check('#obChat input[name="ob-jira"][value="PAY"]');
+    await p.locator('#obChat [data-ob-edit="goals"]').click();
     await p.fill('#obChat input[name="goals"]', 'Raise mobile checkout conversion');
-    await btn('Set up PMOS in').click();
-    try { await p.waitForURL(/onboarded=1/, { timeout: 60000 }); } catch (e) { await shot(p, 'onboard-x-stuck'); console.log(await p.locator('#obChat').innerText()); throw e; }
-    await p.waitForSelector('#obChat .ob-done');
+    await press('init');
+    try { await p.waitForSelector('#obChat .ob-fund', { timeout: 60000 }); } catch (e) { await shot(p, 'onboard-x-stuck'); console.log(await p.locator('#obChat').innerText()); throw e; }
     const root = path.join(HOME, 'PMOS', 'checkout-redesign');
-    for (const f of ['.git', 'pmos/AGENTS.md', 'pmos/state', 'CLAUDE.md', '.pmos-profile']) assert(fs.existsSync(path.join(root, f)), f);
+    for (const f of ['.git', 'pmos/AGENTS.md', 'pmos/state', 'CLAUDE.md', '.pmos-profile', 'pmos/planning/okrs/okrs-draft.md']) assert(fs.existsSync(path.join(root, f)), f);
     const ctxText = fs.readFileSync(path.join(root, 'pmos', 'planning', 'project-context.md'), 'utf8');
     assert.match(ctxText, /Reduce checkout drop-off on mobile \(source: Atlassian, Checkout brief/); assert.match(ctxText, /Raise mobile checkout conversion \(source: the PM\)/);
     assert.match(ctxText, /Jira:\*\* PAY · Payments Platform/); assert(!/Invented Person/.test(ctxText));
+    const fund = await p.locator('#obChat .ob-fund').innerText();
+    assert.match(fund, /A document product/); assert.match(fund, /Workflow: Product feature/); assert.match(fund, /Jira PAY linked: read-only/); assert.match(fund, /About: “Reduce checkout drop-off on mobile”/);
+    assert(!/Applications/.test(fund), 'a scratch server writes no launcher, and says nothing about it');
+    assert.equal((await p.locator('#obChat .ob-fund li').count()), (await p.locator('#obChat .ob-fund li em').count()), 'every line names its source');
+    await shot(p, 'onboard-4-fundamentals');
+    await p.locator('#obChat [data-ob="f:goal"]').click();
+    await p.waitForFunction(() => /No goal file/.test(document.querySelector('#obChat .ob-fund').innerText));
+    assert(!fs.existsSync(path.join(root, 'pmos', 'planning', 'okrs', 'okrs-draft.md')), 'one press removes the draft');
+    await Promise.all([p.waitForURL(/onboarded=1&first=draft/, { timeout: 15000 }), press('first-yes')]);
+    await p.waitForSelector('#rvChat .rv-ticks'); await p.waitForSelector('#rvChat .rv-draft');   // B2: Home opens on the reveal, with the drafted initiative
     await p.waitForFunction(() => /Checkout redesign/i.test(document.querySelector('#hmList').innerText), null, { timeout: 15000 });
-    assert(await p.locator('#obChat a.hm-chip').count() >= 3, 'a next action, not an empty success');
-    await shot(p, 'onboard-5-done');
     const ph = await (await browser.newContext({ viewport: { width: 390, height: 844 } })).newPage();
-    await ph.goto(p.url()); await ph.waitForSelector('#obChat .ob-done'); await shot(ph, 'onboard-5-done-phone');
+    await ph.goto(T.BASE + '/premium.html?onboard=1'); await ph.waitForSelector('#obChat .ob-fund'); await shot(ph, 'onboard-5-fundamentals-phone');
     assert(await ph.locator('#obChat').isVisible()); await ph.close();
   });
   await step('The same folder again is reused as existing PMOS, never reinstalled', async () => {
@@ -112,17 +126,16 @@ const shot = async (p, name) => { if (SHOTS) { fs.mkdirSync(SHOTS, { recursive:
     await fetch(T.BASE + '/api/onboard/reset', { method: 'POST', headers: h, body: '{}' });
     const ph = await (await browser.newContext({ viewport: { width: 390, height: 844 } })).newPage();
     await ph.goto(T.BASE + '/premium.html?onboard=1');
-    await ph.locator('#obChat button', { hasText: 'Test this login' }).click();
-    await ph.waitForSelector('#obChat .ob-good');
-    await ph.fill('#obChat textarea', `Checkout redesign. The folder is ${root}`); await ph.keyboard.press('Enter');
-    await ph.waitForSelector('#obChat input[name="ob-folder"][value="existing"]');
-    assert.match(await ph.locator('#obChat .ob-card').first().innerText(), /PMOS is already here/);
+    await ph.waitForSelector('#obChat .ob-good', { timeout: 15000 });
+    await say(ph, `Checkout redesign. The folder is ${root}`);
+    await ph.waitForSelector('#obChat [data-ob="plan-yes"]', { timeout: 15000 });
+    assert.match(await ph.locator('#obChat .ob-prop').last().innerText(), /PMOS is already here/);
     await shot(ph, 'onboard-6-existing-pmos-phone');
-    await ph.locator('#obChat button', { hasText: 'Show what I can read' }).click();
-    await ph.locator('#obChat button', { hasText: 'Skip, use my description' }).click();
-    await Promise.all([ph.waitForURL(/onboarded=1/, { timeout: 60000 }), ph.locator('#obChat button', { hasText: 'Open PMOS in' }).click()]);
-    await ph.waitForSelector('#obChat .ob-done');
-    assert.match(await ph.locator('#obChat .ob-done').innerText(), /reused as it is/);
+    await ph.locator('#obChat [data-ob="plan-no"]').click();
+    await say(ph, 'no search');
+    await ph.waitForSelector('#obChat [data-ob="init"]');
+    await ph.locator('#obChat [data-ob="init"]').click();
+    await ph.waitForSelector('#obChat .ob-fund', { timeout: 60000 });
     assert.equal(fs.readFileSync(path.join(root, 'pmos', 'AGENTS.md'), 'utf8'), '# edited by the PM');
     await ph.close();
   });

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

@@ -381,3 +381,6 @@
 @media (max-width: 760px) { .ev-st [data-claude-setup] .wl-btn, .ev-st [data-claude-setup] select { min-height: 44px; } .ev-st [data-claude-setup] .cs-label { flex-wrap: wrap; } }
 /* Settings › Claude › Your own rules (batch 26 item 2) */
 .ev-st textarea.ev-rules { display: block; width: 100%; box-sizing: border-box; margin-top: 8px; min-height: 72px; padding: 10px 12px; border: 0; border-radius: 14px; background: var(--cz-well); color: var(--cz-ink); font: inherit; font-size: var(--fs-3); line-height: 1.45; resize: vertical; }
+/* a quiet place (pm/quiet-place.js, onboarding B3 ObA4Gradual): one honest line instead of empty tables, until its moment comes */
+.qp-on > :not(.qp-line) { display: none !important; }
+.qp-line { margin: 18vh auto 0; max-width: 520px; padding: 0 16px; text-align: center; font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink2); line-height: 1.5; }

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();
+    } });
+}