create-pmos 0.523.0 → 0.524.0

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

@@ -1,10 +1,14 @@
 /* pm/cozy-onboard.js — set up a project as one conversation in the Home chat (initiative claude-onboarding-build, direction B on the
  * onboarding design canvas, In development; its link is in planning/prd/claude-onboarding-build-prd.md).
  *
- * One page: it draws in the Home chat's own place (same hm-a / hm-u turns, ut-card / ut-btn / hm-chip controls and the normal composer)
- * and leaves the list where it is. Every step is a Claude turn with inline controls; the composer answers the project question.
- * Order, enforced by the server: connect Claude → test that exact login → the project → the folder → the sources it may read →
- * review → set up or reuse → the project open in My Work. Every press is the PM's (pmPost). Text from connectors is escaped. */
+ * One page: it draws in the Home chat's own place (same hm-a / hm-u turns and the normal composer) and leaves the list where it is.
+ * Onboarding build B1 (frames ObA1Setup, ObA3Fundamentals): one line about the login, one question, two ✦, one fundamentals card.
+ *   1. The login is checked silently on first open (claude-readiness.js). A pass is one line; only a failure asks, as one ✦ "Sign in".
+ *   2. The first question is the product. The composer is open from the first screen; an answer typed before the check passes waits for it.
+ *   3. ✦ one proposal for the folder, the read-only search and what needs a sign-in. ✓ runs it; ✕ asks what to change, in the composer.
+ *   4. The findings as up to three source tiles, then ✦ "Set up PMOS in <folder> with this context". A missing line says so and has edit.
+ *   5. After init: the fundamentals card (lib/onboard-fundamentals.js), each line with its source and one change; then ✦ the first initiative.
+ * The calls to action are ✓ and ✕ only. Order is enforced by the server. Every press is the PM's (pmPost). Text from connectors is escaped. */
 import { pmGet, pmPost } from './http.js';
 import { adler } from './cozy-adler.js';
 import { signInTerminal } from './cozy-claude-setup.js';
@@ -12,7 +16,26 @@ import { signInTerminal } from './cozy-claude-setup.js';
 const esc = (s) => String(s == null ? '' : s).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
 const CHECK = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>';
 const UP = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 19V5M5 12l7-7 7 7"/></svg>';
-const FIELD_LABELS = [['name', 'Name'], ['purpose', 'Purpose'], ['team', 'Team'], ['owner', 'Owner'], ['timeline', 'Timeline'], ['goals', 'Goals and metrics']];
+const FIELD_LABELS = [['name', 'Name'], ['purpose', 'Purpose'], ['team', 'Team'], ['timeline', 'Timeline'], ['weekly', 'Weekly'], ['owner', 'Owner'], ['goals', 'Goals']];
+const YES = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>';
+const NO = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg>';
+const PEN = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20h4L19 9l-4-4L4 16v4z"/></svg>';
+
+/** What the PM asks to change in the first ✦, in words: a folder path, sources to leave out, or no search. PURE. */
+export function readChange(text, labels = []) {
+  const t = String(text || '').trim();
+  const folder = (/(?:^|\s)((?:~|\/|[A-Za-z]:\\)[^\s,;]+)/.exec(t) || [])[1] || '';
+  const skip = /\b(no|skip|don'?t|do not)\s+(search|look)/i.test(t) || /^skip\b/i.test(t);
+  const out = labels.filter((l) => new RegExp('\\b' + l.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + '\\b', 'i').test(t));
+  return { folder, skip, leaveOut: out };
+}
+/** A line about the context, in words: "team is Payments", "owner: Dana", "the weekly is Tue 10:00". Otherwise the words are the purpose. PURE. */
+export function readField(text) {
+  const t = String(text || '').trim();
+  const m = /^(?:the\s+)?(name|purpose|team|owner|timeline|weekly|goals?)\s*(?:is|are|:|=)\s*(.+)$/i.exec(t);
+  if (m) return { [m[1].toLowerCase().replace(/^goal$/, 'goals')]: m[2].trim() };
+  return t ? { purpose: t } : {};
+}
 
 /** The words of the project answer: the name is the first clause; a Jira key, a team and a folder path are picked up when written plainly. */
 export function readAnswer(text) {
@@ -31,95 +54,124 @@ export function mountOnboard(host, { ws = '', done = false } = {}) {
   sec.innerHTML = '<div class="hm-log ob-log" id="obLog" role="log" aria-live="polite"></div><div class="hm-foot" id="obFoot"></div>';
   host.after(sec); host.hidden = true;
   const log = sec.querySelector('#obLog'), foot = sec.querySelector('#obFoot');
-  const S = { data: null, busy: '', note: '', profile: null, said: '', session: null, folderInput: false, picked: null, stopTerm: null };
+  const S = { data: null, busy: '', note: '', profile: null, said: '', session: null, folderInput: false, stopTerm: null,
+    autoChecked: false, chooser: false, queued: '', asking: '', excluded: new Set(), editing: new Set(), changes: [] };
   const post = async (verb, body = {}) => { const r = await pmPost('/api/onboard/' + verb, body); if (r && r.progress) S.data = { ...S.data, ...r }; return r || { ok: false, error: 'PMOS did not answer. Try again.' }; };
 
-  async function load() { const r = await pmGet('/api/onboard/state'); if (r && r.ok) S.data = r; draw(); }
+  async function load() { const r = await pmGet('/api/onboard/state'); if (r && r.ok) S.data = r; draw(); auto(); }
   const P = () => (S.data && S.data.progress) || {};
   const claudeTurn = (body, mood, latest) => `<div class="hm-a ob-turn">${latest ? `<span class="hm-av hm-adler" aria-hidden="true">${adler(mood, 36, { label: false, id: 'ob', dress: true })}</span>` : '<span class="hm-av t-C s28" aria-hidden="true">C</span>'}<div class="hm-ab"><p class="hm-who">Claude</p>${body}</div></div>`;
   const youTurn = (text) => `<div class="hm-u"><div class="hm-bub"><p>${esc(text)}</p></div><span class="hm-you">You</span></div>`;
   const btn = (act, label, cls = '', extra = '') => `<button type="button" class="ut-btn ${cls}" data-ob="${act}"${S.busy ? ' disabled' : ''}${extra}>${esc(S.busy === act ? 'Working…' : label)}</button>`;
+  /** ✓ and ✕, icon-only (the PM's rule). */
+  const yesNo = (yes, no, what) => `<div class="ob-yn"><button type="button" class="ut-ib lg solid" data-ob="${yes}" aria-label="Yes: ${esc(what)}" title="Yes"${S.busy ? ' disabled' : ''}>${S.busy === yes ? '…' : YES}</button>`
+    + `<button type="button" class="ut-ib lg ob-no" data-ob="${no}" aria-label="No, change something" title="Change something"${S.busy ? ' disabled' : ''}>${NO}</button></div>`;
+  const prop = (title, rows, foot2, yes, no, what) => `<div class="ut-card ob-prop" role="group" aria-label="${esc(what)}"><p class="ob-pt"><span class="ob-spark" aria-hidden="true">✦</span><span>${title}</span></p>`
+    + (rows.length ? `<ul class="ob-pl">${rows.map((r) => `<li>${r}</li>`).join('')}</ul>` : '') + (foot2 ? `<p class="ob-note">${foot2}</p>` : '') + yesNo(yes, no, what) + '</div>';
+  const link = (act, label, extra = '') => `<button type="button" class="ob-lk" data-ob="${act}"${extra}>${esc(label)}</button>`;
+  const profiles = () => ((S.data && S.data.claude) || {}).profiles || [];
 
-  function turns() {
-    const p = P(), c = (S.data && S.data.claude) || { profiles: [] }, out = [];
-    // 1. connect and test
-    // One row per login that really differs: a pinned copy of the login on this computer shows as that login, and PMOS's own
-    // profile is the "separate login" row (bug 2026-11-03: "My usual Claude login" and "PMOS" repeated the other two rows).
-    const profiles = c.profiles || [], ownId = c.own || '__own__';
+  /** The old explicit chooser, kept for "use another login": one row per login that really differs. */
+  function chooserTurn(p) {
+    const c = (S.data && S.data.claude) || { profiles: [] }, ownId = c.own || '__own__';
     const row = (id) => (id === '__own__' || (id && id === c.own) ? ownId : (c.alias && c.alias[id]) || id);
-    const pick = row(S.profile || p.profile || c.selected || (profiles[0] && profiles[0].id));
+    const pick = row(S.profile || p.profile || c.selected || (profiles()[0] && profiles()[0].id));
+    const opt = (id, label, note) => `<label class="ob-opt${id === pick ? ' on' : ''}"><input type="radio" name="ob-login" value="${esc(id)}"${id === pick ? ' checked' : ''}><span><b>${esc(label)}</b>${note ? `<em>${esc(note)}</em>` : ''}</span></label>`;
+    const opts = profiles().map((x) => opt(x.id, x.id === '__default__' ? 'The Claude login on this computer' : x.label, x.id === '__default__' ? 'Whatever account Claude Code uses in your usual terminal' : '')).join('')
+      + opt(ownId, 'A separate login just for PMOS', 'Keeps PMOS on its own account. You sign in once.');
+    const failed = p.checked && p.checked.state && p.checked.state !== 'ready' && S.busy !== 'check' && row(p.profile) === pick;
+    return (failed ? `<div class="ob-bad" role="alert"><b>${esc(p.checked.message || 'This login did not pass the check.')}</b><span>I won’t switch to a different account on my own. Sign this one in, or pick another login.</span></div>` : '')
+      + `<p>Which Claude login should PMOS use? I test exactly that one.</p><div class="ut-card ob-card" role="radiogroup" aria-label="Claude login">${opts}`
+      + `<div class="ob-row">${btn('check', 'Test this login', 'pri')}${btn('login', 'Sign in to it', '')}</div>`
+      + `<p class="ob-note">The test sends one short message to Claude with no tools. It uses a little of this account’s usage.</p></div>`;
+  }
+  const loginLabel = (p) => { const c = (S.data && S.data.claude) || {}; const id = p.profile; if (!id || id === '__default__' || (c.alias && c.alias[id] === '__default__')) return 'the login on this computer'; if (id === c.own) return 'PMOS’s own login'; return ((profiles().find((x) => x.id === id) || {}).label) || id; };
+
+  function turns() {
+    const p = P(), out = [];
+    // 1. the login, checked silently
     if (!p.verified) {
-      const failed = p.checked && p.checked.state && p.checked.state !== 'ready' && row(p.profile) === pick;
-      const opt = (id, label, note) => `<label class="ob-opt${id === pick ? ' on' : ''}"><input type="radio" name="ob-login" value="${esc(id)}"${id === pick ? ' checked' : ''}><span><b>${esc(label)}</b>${note ? `<em>${esc(note)}</em>` : ''}</span></label>`;
-      const opts = profiles.map((x) => opt(x.id, x.id === '__default__' ? 'The Claude login on this computer' : x.label, x.id === '__default__' ? 'Whatever account Claude Code uses in your usual terminal' : '')).join('')
-        + opt(ownId, 'A separate login just for PMOS', 'Keeps PMOS on its own account. You sign in once.');
-      out.push({ mood: failed ? 'honest' : 'needs-you', body: `<p>${failed ? '' : 'Let’s set up a product or project. First, which Claude login should PMOS use? I’ll run one short check on exactly that login.'}</p>`
-        + (failed ? `<div class="ob-bad" role="alert"><b>${esc(p.checked.message || (p.checked.state === 'signed_out' ? 'This login needs signing in again.' : 'This login did not pass the check.'))}</b><span>I won’t switch to a different account on my own. Sign this one in, or pick another login.</span></div>` : '')
-        + `<div class="ut-card ob-card" role="radiogroup" aria-label="Claude login">${opts}`
-        + `<div class="ob-row">${btn('check', 'Test this login', 'pri')}${btn('login', 'Sign in to it', '')}</div>`
-        + `<p class="ob-note">The test sends one short message to Claude with no tools. It uses a little of this account’s usage.</p>`
-        + (S.session ? '<p class="ob-note">Finish signing in in the browser window Claude opened. If it asks for a code, paste it below. I test the login as soon as you are done.</p><div class="cs-term ob-term" aria-label="Claude sign-in terminal"></div>' : '')
-        + `</div>` });
+      const failed = p.checked && p.checked.state && p.checked.state !== 'ready' && S.busy !== 'check' && S.autoChecked;
+      if (S.chooser) out.push({ mood: 'needs-you', body: chooserTurn(p) + (S.session ? signInNote() : '') });
+      else if (!failed) out.push({ mood: 'thinking', body: '<p class="ob-sub">Checking Claude Code on this computer…</p>' });
+      else out.push({ mood: 'honest', body: prop('Sign in to Claude Code', [esc(p.checked.message || 'This login did not pass the check.') + ' I won’t switch to a different account on my own.'],
+        `${link('chooser', 'Use another login')}`, 'login', 'chooser', 'Sign in to Claude Code') + (S.session ? signInNote() : '') });
+    } else {
+      out.push({ mood: 'handled', body: `<div class="ob-good">${CHECK}<b>Claude Code is signed in on this computer, and I just tested it</b><span>Using ${esc(loginLabel(p))} · ${link('settings-claude', 'change in Settings')}</span></div>` });
+    }
+    // 2. the product question, from the first screen
+    if (!p.project) {
+      out.push({ mood: 'needs-you', body: '<p>What product or project is this for? A name is enough.</p><p class="ob-sub">The team, a Jira key or a link help me find the right sources.</p>' });
+      if (S.queued) out.push({ you: S.queued }, { mood: 'thinking', body: '<p class="ob-sub">I start as soon as the Claude check passes.</p>' });
       return out;
     }
-    const label = row(p.profile) === ownId ? 'A separate login just for PMOS' : (profiles.find((x) => x.id === row(p.profile)) || {}).label || p.profile;
-    out.push({ mood: 'handled', body: `<div class="ob-good">${CHECK}<b>Login works · ${esc(label)}</b><span>Tested ${p.checked && p.checked.at ? new Date(p.checked.at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : 'just now'} · one test message, no tools</span></div>`
-      + (p.project ? '' : `<p>What product or project is this for? Its name is enough to start.</p><p class="ob-sub">If you have them, add the team, a Jira key, a link or the folder where it lives. They help me find the right sources, not a same-name one.</p><div class="ob-row"><button type="button" class="hm-chip loose" data-ob="relogin">Use another login</button></div>`) });
-    if (!p.project) return out;
-    // 2. the project, the folder, the sources
     out.push({ you: S.said || p.project.description || p.project.name });
-    const f = p.folder;
-    const discovered = p.discovered && p.discovered.sources;
-    let body = `<p><b>${esc(p.project.name)}</b>, got it. Where should its PMOS project live?</p><div class="ut-card ob-card" role="radiogroup" aria-label="Project folder">`;
-    const ex = f && f.mode === 'existing';
-    if (ex) {
-      const fa = f.facts || {};
-      body += `<label class="ob-opt on"><input type="radio" name="ob-folder" value="existing" checked><span><b>Use the existing folder <code>${esc(f.root)}</code></b><em>${fa.pmos ? 'PMOS is already here. I’ll open it as it is; nothing is reinstalled.' : (fa.git ? 'Git repository, no PMOS yet. ' : 'No PMOS yet. ') + 'I add only what’s missing; files and history stay as they are.'}${fa.inside_other_git ? ' It is inside the Git repository ' + esc(fa.git_root) + '.' : ''}</em></span></label>`;
-    }
-    const proposed = f && f.mode === 'new' ? f.root : null;
-    body += `<label class="ob-opt${!ex ? ' on' : ''}"><input type="radio" name="ob-folder" value="new"${!ex ? ' checked' : ''}><span><b>Make a new folder${proposed ? ` <code>${esc(proposed)}</code>` : ''}</b><em>${proposed ? 'Empty folder with Git and PMOS. Nothing is created until you confirm.' : 'I’ll propose a place for it.'}${f && f.parent_in_git ? ' Its parent folder is inside a Git repository.' : ''}</em></span></label>`;
-    body += `<div class="ob-row">${btn('pick-existing', 'Choose an existing folder…', 'sm')}${btn('pick-parent', 'Put the new folder somewhere else…', 'sm ghost')}</div>`;
-    if (S.folderInput) body += `<form class="ob-path" data-ob-form="path"><label class="ut-field"><span>Folder path</span><input name="path" autocomplete="off" placeholder="${S.data.platform === 'win32' ? 'C:\\Users\\you\\Projects\\checkout' : '~/code/checkout'}"></label><button type="submit" class="ut-btn sm">Use this folder</button></form>`;
-    body += '</div>';
-    if (f && !p.found) {
-      if (!discovered) body += `<p>Next I’ll list what this login can read. That doesn’t use Claude.</p><div class="ob-row">${btn('discover', 'Show what I can read', 'pri')}</div>`;
-      else {
-        const rows = discovered.map((s) => `<label class="ob-opt${s.status !== 'connected' ? ' off' : ''}"><input type="checkbox" name="ob-src" value="${esc(s.id)}"${s.status === 'connected' ? ' checked' : ' disabled'}><span><b>${esc(s.label)}</b><em>${s.status === 'connected' ? 'Search for “' + esc(p.project.name) + '”' + (p.project.jira ? ' and ' + esc(p.project.jira) : '') : s.status === 'needs_auth' ? 'Needs signing in inside Claude first' : 'Not reachable right now'}</em></span></label>`).join('');
-        const local = ex ? `<label class="ob-opt"><input type="checkbox" name="ob-local" checked><span><b>The folder</b><em>README and Git history in ${esc(f.root)}</em></span></label>` : '';
-        body += `<p>I can look for existing context with <b>${esc(label)}</b>. Choose what I may read:</p><div class="ut-card ob-card">${rows || '<p class="ob-sub">This login has no connected tools.</p>'}${local}`
-          + `<div class="ob-row">${btn('search', 'Search, read-only', 'pri')}${btn('skip', 'Skip, use my description', 'ghost')}</div><p class="ob-note">Read-only. I won’t post, comment or change anything. Searching uses some of this account’s usage.</p></div>`;
-      }
+    for (const c of S.changes.filter((x) => x.at === 'plan')) out.push({ you: c.text });
+    // 3. one ✦: folder + sources + search
+    const f = p.folder, disc = p.discovered && p.discovered.sources;
+    if (!p.found && !p.reviewed) {
+      if (!f || !disc) { out.push({ mood: S.busy ? 'thinking' : 'honest', body: S.busy ? '<p class="ob-sub">Looking at where it can live and what this login can read…</p>' : `<p class="ob-sub">I couldn’t list what this login can read. ${link('relist', 'Try again')}</p>` }); return out; }
+      const ex = f.mode === 'existing', fa = f.facts || {};
+      const search = disc.filter((s) => s.status === 'connected' && !S.excluded.has(s.id));
+      const sign = disc.filter((s) => s.status === 'needs_auth' && !S.excluded.has(s.id));
+      const rows = [`<b>Folder</b> <code>${esc(f.root)}</code> · ${ex ? (fa.pmos ? 'PMOS is already here; I reuse it' : 'I add only what is missing; files and history stay') : 'a new folder with Git and PMOS'} · ${link('pick-existing', 'Use another folder', ' aria-label="Choose an existing folder"')}`];
+      if (search.length || ex) rows.push(`<b>Search, read-only</b> ${esc([...search.map((s) => s.label), ...(ex ? ['the folder README and Git history'] : [])].join(', '))} for “${esc(p.project.name)}”${p.project.jira ? ' and ' + esc(p.project.jira) : ''}`);
+      else rows.push('<b>Search</b> no connected tool to search. I use what you wrote.');
+      for (const s of sign) rows.push(`${esc(s.label)} needs signing in inside Claude; I’ll leave it out · <a href="https://claude.ai/settings/connectors" target="_blank" rel="noopener noreferrer">sign in</a>`);
+      if (S.excluded.size) rows.push(`<span class="ob-sub">Left out: ${esc(disc.filter((s) => S.excluded.has(s.id)).map((s) => s.label).join(', '))}</span>`);
+      let body = `<p><b>${esc(p.project.name)}</b>, got it.</p>` + prop(`Set up ${esc(p.project.name)} here, and look for what already exists`, rows,
+        search.length ? 'Read-only: I won’t post, comment or change anything. The search uses a little of this account’s usage.' : 'Nothing is created until you say yes.', 'plan-yes', 'plan-no', 'Set up here and search');
+      if (S.folderInput) body += `<form class="ob-path" data-ob-form="path"><label class="ut-field"><span>Folder path</span><input name="path" autocomplete="off" placeholder="${S.data.platform === 'win32' ? 'C:\\Users\\you\\Projects\\checkout' : '~/code/checkout'}"></label></form>`;
+      out.push({ mood: 'needs-you', body });
+      if (S.asking === 'plan') out.push({ mood: 'needs-you', body: '<p>What should I change? Write a folder path, name a source to leave out, or say “no search”.</p>' });
+      return out;
     }
-    out.push({ mood: f && p.found ? 'handled' : 'needs-you', body });
-    if (!p.found && !p.reviewed) return out;
-    // 3. review
-    const found = p.found || { sources: [], jira: [], findings: [] };
-    if (p.found) out.push({ you: 'Search these sources' });
-    const rv = p.review || { fields: {} };
+    // 4. the findings as source tiles, then ✦ set up with this context
+    const found = p.found || { sources: [], jira: [], findings: [], highlights: [] };
+    const tiles = (found.highlights && found.highlights.length ? found.highlights : firstPerSource(found.findings)).slice(0, 3);
     let rb = '';
-    if (found.sources.length) rb += `<div class="ob-srcs">${found.sources.map((s) => `<span class="ob-src ${s.state}">${esc(s.label)} · ${s.state === 'found' ? (s.count ? s.count + ' found' : 'found') : s.state === 'empty' ? 'nothing found' : 'couldn’t read'}</span>`).join('')}</div>`;
-    const failed = found.sources.filter((s) => s.state === 'failed');
-    if (failed.length) rb += failed.map((s) => `<p class="ob-sub">${esc(s.label)}: ${esc(s.error || 'It could not be read.')} I used nothing from it.</p>`).join('') + `<div class="ob-row">${btn('retry', 'Retry', 'sm')}</div>`;
+    if (p.found) {
+      rb += tiles.length ? `<p>I found ${tiles.length === 1 ? 'one thing' : ['', '', 'two', 'three'][tiles.length] + ' things'} about <b>${esc(p.project.name)}</b>.</p><div class="ob-tiles">${tiles.map((t) => `<div class="ut-card ob-tile"><span class="ob-ts">${esc(t.source_label)}</span><b>${t.url ? `<a href="${esc(t.url)}" target="_blank" rel="noopener noreferrer">${esc(t.headline)}</a>` : esc(t.headline)}</b>${t.detail ? `<span>${esc(t.detail)}</span>` : ''}</div>`).join('')}</div>`
+        : `<p>I didn’t find anything about <b>${esc(p.project.name)}</b>. Tell me in a sentence what it is for, or leave it blank.</p>`;
+      const failed = found.sources.filter((s) => s.state === 'failed');
+      if (failed.length) rb += `<p class="ob-sub">${failed.map((s) => `${esc(s.label)}: ${esc(s.error || 'It could not be read.')}`).join(' ')} I used nothing from ${failed.length === 1 ? 'it' : 'them'}. ${link('retry', 'Try again')}</p>`;
+    }
+    const rv0 = p.review || { fields: {} }, rv = S.jira ? { ...rv0, jira: S.jira } : rv0;   // a choice made on the page survives a redraw
     if (found.jira && found.jira.length > 1) {
       rb += `<p><b>${found.jira.length} Jira projects could be this one.</b> Which is it?</p><div class="ut-card ob-card" role="radiogroup" aria-label="Jira project">${found.jira.map((j) => `<label class="ob-opt${rv.jira === j.key ? ' on' : ''}"><input type="radio" name="ob-jira" value="${esc(j.key)}"${rv.jira === j.key ? ' checked' : ''}><span><b>${esc(j.key)}${j.name ? ' · ' + esc(j.name) : ''}</b></span></label>`).join('')}<label class="ob-opt${rv.jira === 'none' ? ' on' : ''}"><input type="radio" name="ob-jira" value="none"${rv.jira === 'none' ? ' checked' : ''}><span>Neither. Don’t link Jira</span></label></div>`;
     }
-    if (!found.findings.length && p.found && !failed.length) rb += '<p>I didn’t find much. Tell me in a sentence or two what this project is for, or fill in the fields below.</p>';
     const fields = rv.fields || {};
-    rb += `<form class="ut-card ob-card ob-ctx" data-ob-form="review"><p><b>Project context</b> <span class="ob-sub">· saved to the project when you set it up. Edit anything.</span></p>`
-      + FIELD_LABELS.map(([k, l]) => { const v = fields[k]; const tag = !v ? '<span class="ob-tag miss">Missing</span>' : v.source === 'finding' ? `<span class="ob-tag">${v.url ? `<a href="${esc(v.url)}" target="_blank" rel="noopener noreferrer">${esc(v.source_label)}</a>` : esc(v.source_label)}</span>` : `<span class="ob-tag you">${v.source === 'folder' ? 'Folder' : 'You'}</span>`;
-        return `<label class="ob-fld"><b>${l}</b><input name="${k}" value="${esc(v ? v.value : '')}" placeholder="${!v ? 'Not found. Add it or leave blank' : ''}">${tag}</label>`; }).join('')
-      + (fields.code ? `<p class="ob-sub">Code: ${esc(fields.code.value)}</p>` : '')
-      + `</form>`;
     const where = f && f.root ? f.root : 'the new folder';
-    const jiraNote = rv.jira && rv.jira !== 'none' ? ` and links Jira ${esc(rv.jira)}` : '';
-    rb += `<div class="ob-row">${btn('init', (f && f.facts && f.facts.pmos ? 'Open PMOS in ' : 'Set up PMOS in ') + where, 'pri')}${p.found ? btn('again', 'Search again', 'ghost') : ''}</div><p class="ob-note">${f && f.facts && f.facts.pmos ? 'Reuses the PMOS already there' : 'Adds PMOS to the folder'}${jiraNote}. No tasks, goals or schedules are created, and nothing changes in your tools.</p>`;
+    const jk = rv.jira && rv.jira !== 'none' ? rv.jira : (found.jira && found.jira.length === 1 ? found.jira[0].key : '');
+    const rows = FIELD_LABELS.filter(([k]) => k !== 'name').map(([k, l]) => {
+      const v = fields[k], editing = S.editing.has(k) || S.editing.has('all');
+      const src = !v ? '' : v.source === 'finding' ? (v.url ? `<a href="${esc(v.url)}" target="_blank" rel="noopener noreferrer">${esc(v.source_label)}</a>` : esc(v.source_label)) : v.source === 'folder' ? 'the folder' : 'you';
+      if (editing) return `<label class="ob-fld"><b>${l}</b><input name="${k}" value="${esc(v ? v.value : '')}" placeholder="Leave blank if not known"></label>`;
+      return `<span class="ob-fl"><b>${l}</b>${v ? `<span>${esc(v.value)}</span><em>${src}</em>` : '<span class="ob-miss">Not found. Tell me, or leave blank</span>'}<button type="button" class="ut-ib ob-pen" data-ob-edit="${k}" aria-label="Edit ${esc(l.toLowerCase())}" title="Edit">${PEN}</button></span>`;
+    });
+    rb += `<form data-ob-form="review" class="ob-rv">` + prop(`Set up PMOS in <code>${esc(where)}</code> with this context${jk ? ', and link Jira ' + esc(jk) : ''}`, rows,
+      'Nothing changes in your tools, and no tasks are created. Next I settle the basics, and you can change each one.', 'init', 'ctx-no', 'Set up PMOS with this context') + '</form>';
     if (p.init && !p.init.ok) {
       const steps = p.init.steps || {};
-      rb += `<div class="ob-bad" role="alert"><b>Setup stopped at “${esc(p.init.step || 'a step')}”.</b><span>${esc(p.init.error || '')} Nothing you had was removed. ${Object.keys(steps).filter((k) => steps[k].state === 'done').length} steps are done; I’ll only do the rest.</span></div><div class="ob-row">${btn('init', 'Finish setup', 'pri')}</div>`;
+      rb += `<div class="ob-bad" role="alert"><b>Setup stopped at “${esc(p.init.step || 'a step')}”.</b><span>${esc(p.init.error || '')} Nothing you had was removed. ${Object.keys(steps).filter((k) => steps[k].state === 'done').length} steps are done. Setting up again does only the rest.</span></div>`;
     }
     out.push({ mood: p.init && !p.init.ok ? 'honest' : 'needs-you', body: rb });
+    for (const c of S.changes.filter((x) => x.at === 'context')) out.push({ you: c.text });
+    if (S.asking === 'context') out.push({ mood: 'needs-you', body: '<p>What should I change? Edit a line above, or tell me, for example “owner is Dana”.</p>' });
     return out;
   }
+  const signInNote = () => '<p class="ob-note">Finish signing in in the browser window Claude opened. If it asks for a code, paste it below. I test the login as soon as you are done.</p><div class="cs-term ob-term" aria-label="Claude sign-in terminal"></div>';
+  const firstPerSource = (findings) => { const seen = new Set(), out = []; for (const x of findings || []) { if (seen.has(x.source)) continue; seen.add(x.source); out.push({ source_label: x.source_label, headline: x.title, detail: x.summary, url: x.url }); } return out; };
+
+  /** 5. After init: what PMOS settled, each with its source and one change; then ✦ the first initiative (B2 takes it from there). */
+  function settledTurns() {
+    const p = P(), d = p.done, fd = p.fundamentals || { lines: [] };
+    const rows = fd.lines.map((l) => { const meta = [l.source ? esc(l.source) : '', l.hint ? link('wf-new', 'draft a ' + l.hint.word + ' workflow') : '', l.change ? link('f:' + l.key, l.change.label) : ''].filter(Boolean).join(' · ');
+      return `<li data-key="${esc(l.key)}">${CHECK}<span><span>${esc(l.text)}</span>${meta ? `<em>${meta}</em>` : ''}</span></li>`; }).join('');
+    return [{ mood: 'handled', body: `<p><b>${esc(d.name)}</b> is set up in <code>${esc(d.root)}</code>. I settled the basics for you:</p>`
+      + `<ul class="ut-card ob-done ob-fund">${rows}</ul>${fd.error ? `<p class="ob-sub">${esc(fd.error)}</p>` : ''}`
+      + prop('Draft the first initiative from the purpose, with its expected outcome', [], 'Nothing is final until you keep it.', 'first-yes', 'first-no', 'Draft the first initiative') }];
+  }
 
   function doneTurns() {
     const d = P().done;
@@ -134,30 +186,56 @@ export function mountOnboard(host, { ws = '', done = false } = {}) {
 
   function draw() {
     if (!S.data) { log.innerHTML = `<div class="hm-empty hm-empty-ad">${adler('thinking', 'l', { id: 'obload' })}<p>Getting setup ready…</p></div>`; return; }
-    const list = done ? doneTurns() : turns();
+    const p0 = P();
+    const list = done ? doneTurns() : p0.done && p0.fundamentals ? turns().slice(0, 1).concat(settledTurns()) : turns();
     const lastClaude = list.map((t, i) => (t.you ? -1 : i)).filter((i) => i >= 0).pop();
     // No big Adler here: the latest reply carries his face, and the list may already show him (one Adler per screen, rule 21).
-    const intro = !done && !P().verified && !P().checked ? '<div class="hm-empty ob-hello"><p><b>Let’s set up your first project</b></p><p>It takes a few minutes. Nothing is created until you say so.</p></div>' : '';
+    const intro = !done && !P().project ? '<div class="hm-empty ob-hello"><p><b>Let’s set up your first project</b></p><p>It takes a few minutes. Nothing is created until you say so.</p></div>' : '';
     if (S.stopTerm) { S.stopTerm(); S.stopTerm = null; }
     log.innerHTML = intro + list.map((t, i) => (t.you ? youTurn(t.you) : claudeTurn(t.body, t.mood, i === lastClaude))).join('') + (S.note ? `<p class="ob-note ob-live" role="status">${esc(S.note)}</p>` : '');
     const term = log.querySelector('.ob-term');
     // the sign-in ends on its own once Claude has the login; a clean end runs the test at once
     if (term && S.session) signInTerminal(term, S.session, { onEnd: (code) => { S.session = null; if (!code) act('check'); else { S.note = 'The sign-in stopped before it finished. Sign in again.'; draw(); } } }).then((stop) => { S.stopTerm = stop; }).catch((e) => { S.note = e.message; S.session = null; draw(); });
-    const p = P(), asks = !done && p.verified && !p.project;
-    foot.innerHTML = `<form class="hm-box" data-ob-form="say"><textarea rows="1" aria-label="Message Claude" placeholder="${asks ? 'e.g. Checkout redesign, payments team, Jira PAY' : done ? 'Message Claude' : !p.verified ? 'Test the login first, then tell me about your project' : 'Message Claude'}"${!asks ? ' disabled' : ''}></textarea><div class="hm-tb"><span class="sp"></span><span class="hm-key">Enter sends · Shift+Enter for a new line</span><button type="submit" class="hm-send" aria-label="Send"${!asks ? ' disabled' : ''}>${UP}</button></div></form>`;
-    if (asks) foot.querySelector('textarea').focus({ preventScroll: true });
+    // the composer is open throughout (B1): it answers the product question, the ✕ "what should I change", and after setup goes to Home
+    const p = P(), asks = !done && !p.project && !S.queued;
+    const kept = foot.querySelector('textarea'); const typed = kept ? kept.value : '';
+    foot.innerHTML = `<form class="hm-box" data-ob-form="say"><textarea rows="1" aria-label="Message Claude" placeholder="${asks ? 'e.g. Checkout redesign, payments team, Jira PAY' : 'Message Claude'}"${S.busy ? ' disabled' : ''}></textarea><div class="hm-tb"><span class="sp"></span><span class="hm-key">Enter sends · Shift+Enter for a new line</span><button type="submit" class="hm-send" aria-label="Send"${S.busy ? ' disabled' : ''}>${UP}</button></div></form>`;
+    const ta = foot.querySelector('textarea'); ta.value = typed;
+    if (asks || S.asking) ta.focus({ preventScroll: true });
     log.scrollTop = log.scrollHeight;
   }
 
+  /** Run what the page can on its own: the silent login check on first open, and the folder + connector listing after the answer. */
+  async function auto() {
+    const p = P();
+    if (done || S.busy) return;
+    if (!p.verified && !S.autoChecked && !S.chooser) { S.autoChecked = true; return act('check'); }
+    if (p.verified && S.queued && !p.project) { const q = S.queued; S.queued = ''; return answer(q); }
+    if (p.project && !p.found && !p.reviewed && (!p.folder || !p.discovered) && !S.autoListed) {
+      S.autoListed = true; S.busy = 'list'; draw();
+      if (!p.folder) await post('folder', { mode: 'new' });
+      if (!P().discovered) { const r = await post('discover'); if (!r.ok) S.note = r.error; }
+      S.busy = ''; draw();
+    }
+  }
+  async function answer(v) {
+    const a = readAnswer(v); S.said = v; S.busy = 'say'; draw();
+    const r = await post('project', { name: a.name, team: a.team, jira: a.jira, link: a.link, description: a.description });
+    if (!r.ok) S.note = r.error;
+    else if (a.folder) { const f = await post('folder', { mode: 'existing', root: a.folder }); if (!f.ok) S.note = 'I couldn’t use ' + a.folder + ': ' + (f.error || 'not found') + ' I propose a folder instead.'; }
+    S.busy = ''; S.autoListed = false; draw(); auto();
+  }
+  const go = (q = '') => location.assign('/premium.html?ws=' + encodeURIComponent(P().done.ws) + '&onboarded=1' + q);
+  const home = (say) => location.assign('/premium.html?ws=' + encodeURIComponent(P().done.ws) + '&say=' + encodeURIComponent(say));
+
   async function act(a, b) {
     const p = P();
-    const typed = readReview();   // before any redraw, so what the PM typed, ticked or chose is never lost
-    const ticked = [...log.querySelectorAll('input[name="ob-src"]:checked')].map((x) => x.value), localTicked = !!log.querySelector('input[name="ob-local"]:checked');
+    const typed = readReview();   // before any redraw, so what the PM typed or chose is never lost
     S.busy = a; S.note = ''; draw();
     try {
       if (a === 'check' || a === 'login') {
         const cl = S.data.claude || {};
-        let profile = S.profile || p.profile || cl.selected;
+        let profile = S.chooser ? (S.profile || p.profile || cl.selected) : (p.profile || cl.selected || '__default__');
         if (cl.alias && cl.alias[profile]) profile = cl.alias[profile];   // a pinned copy of the usual login is tested as that login
         if (profile === '__own__') { const own = await post('own'); if (!own.ok) throw new Error(own.error || 'The PMOS login could not be made.'); profile = own.id; S.profile = profile; await load(); }
         const r = await post(a, { profile });
@@ -166,32 +244,41 @@ export function mountOnboard(host, { ws = '', done = false } = {}) {
           else if (r.signedIn) { S.session = null; S.busy = ''; return act('check'); }   // already signed in: test it, no terminal
           else S.session = r.session;
         }
-        else { S.session = null; if (!r.ok) S.note = r.message || r.error || 'The test did not pass.'; await load(); }
-      } else if (a === 'relogin') { await post('reset'); S.profile = null; await load(); }
-      else if (a === 'pick-existing' || a === 'pick-parent') {
-        const mode = a === 'pick-existing' ? 'existing' : 'new';
-        const r = await post('folder', { mode, pick: true, parent: mode === 'new' && p.folder ? p.folder.parent : undefined, root: mode === 'existing' && p.folder ? p.folder.root : undefined });
-        if (r.unsupported) { S.folderInput = mode; S.note = r.error; } else if (!r.ok && !r.cancelled) S.note = r.error;
-      } else if (a === 'folder-mode') {
-        const r = await post('folder', b === 'new' ? { mode: 'new', parent: p.folder && p.folder.parent } : { mode: 'existing', root: p.folder && p.folder.root });
-        if (!r.ok) { if (b === 'existing') S.folderInput = 'existing'; S.note = r.error; }
-      } else if (a === 'discover') { const r = await post('discover'); if (!r.ok) S.note = r.error; }
-      else if (a === 'search' || a === 'retry') {
-        const ids = a === 'retry' ? ((p.found && p.found.sources) || []).filter((s) => s.id !== 'folder').map((s) => s.id) : ticked;
-        const local = a === 'retry' ? (p.found && p.found.sources || []).some((s) => s.id === 'folder') : localTicked;
+        else { S.session = null; S.autoChecked = true; if (r.ok || (r.progress && r.progress.verified)) S.chooser = false; await load(); S.busy = ''; draw(); return auto(); }
+      } else if (a === 'chooser') { S.chooser = true; }
+      else if (a === 'relist') { S.autoListed = false; S.busy = ''; return auto(); }
+      else if (a === 'settings-claude' || a === 'settings-sources') { import('./cozy-settings.js').then((M) => M.openSettings(a === 'settings-claude' ? 'claude' : 'connectors')); }
+      else if (a === 'pick-existing') {
+        const r = await post('folder', { mode: 'existing', pick: true, root: p.folder && p.folder.mode === 'existing' ? p.folder.root : undefined });
+        if (r.unsupported) { S.folderInput = 'existing'; S.note = r.error; } else if (!r.ok && !r.cancelled) S.note = r.error;
+      } else if (a === 'plan-yes') {
+        const disc = (p.discovered && p.discovered.sources) || [];
+        const ids = disc.filter((s) => s.status === 'connected' && !S.excluded.has(s.id)).map((s) => s.id);
+        const local = p.folder && p.folder.mode === 'existing';
+        S.asking = '';
+        if (!ids.length && !local) { const r = await post('review', {}); if (!r.ok) S.note = r.error; }
+        else { S.note = 'Searching, read-only. This can take a minute or two…'; draw(); const r = await post('search', { sources: ids, local }); S.note = r.ok ? '' : r.error; }
+      } else if (a === 'plan-no') { S.asking = 'plan'; }
+      else if (a === 'retry') {
+        const ids = ((p.found && p.found.sources) || []).filter((s) => s.id !== 'folder').map((s) => s.id);
+        const local = (p.found && p.found.sources || []).some((s) => s.id === 'folder');
         S.note = 'Searching, read-only. This can take a minute or two…'; draw();
-        const r = await post('search', { sources: ids, local });
-        S.note = r.ok ? '' : r.error;
-      } else if (a === 'skip') { const r = await post('review', {}); if (!r.ok) S.note = r.error; }
-      else if (a === 'again') { await saveReview(typed); const r = await post('discover'); if (!r.ok) S.note = r.error; }
+        const r = await post('search', { sources: ids, local }); S.note = r.ok ? '' : r.error;
+      } else if (a === 'ctx-no') { S.asking = 'context'; S.editing = new Set(['all']); }
       else if (a === 'init') {
         await saveReview(typed);
-        S.note = 'Setting up the project…'; draw();
+        S.asking = ''; S.note = 'Setting up the project…'; draw();
         const r = await post('init');
-        if (r.ok && r.progress && r.progress.done) { location.assign('/premium.html?ws=' + encodeURIComponent(r.progress.done.ws) + '&onboarded=1'); return; }
-        S.note = r.error || 'Setup did not finish.';
-        await load();
-      }
+        if (r.ok && r.progress && r.progress.done) { S.editing = new Set(); S.note = ''; S.jira = null; }
+        else { S.note = r.error || 'Setup did not finish.'; await load(); }
+      } else if (a.startsWith('f:')) {
+        const r = await post('fundamental', { key: a.slice(2) });
+        if (!r.ok) S.note = r.error;
+        else if (r.follow === 'settings') location.assign('/premium-workflows.html?ws=' + encodeURIComponent(p.done.ws));
+        else if (r.follow === 'context') { home('Walk me through the project context you saved, and change what I say'); return; }
+      } else if (a === 'wf-new') { location.assign('/premium-workflows.html?new=1&ws=' + encodeURIComponent(p.done.ws)); return; }
+      else if (a === 'first-yes') { go('&first=draft'); return; }
+      else if (a === 'first-no') { go('&first=none'); return; }   // B2: the reveal with no draft, and nothing written
     } catch (e) { S.note = e.message || 'That did not finish. Try again.'; }
     S.busy = ''; draw();
   }
@@ -199,38 +286,57 @@ export function mountOnboard(host, { ws = '', done = false } = {}) {
     const form = log.querySelector('form[data-ob-form="review"]'); if (!form) return null;
     const fields = {}; for (const [k] of FIELD_LABELS) { const i = form.querySelector(`input[name="${k}"]`); if (i) fields[k] = i.value; }
     const j = log.querySelector('input[name="ob-jira"]:checked');
-    return j ? { fields, jira: j.value } : { fields };
+    return j ? { fields, jira: j.value } : (Object.keys(fields).length ? { fields } : null);
   }
   async function saveReview(typed) { if (typed) await post('review', typed); }
 
   sec.addEventListener('click', (e) => {
+    const ed = e.target.closest('[data-ob-edit]');
+    if (ed) { S.editing.add(ed.dataset.obEdit); const keep = readReview(); draw(); if (keep) for (const [k, v] of Object.entries(keep.fields || {})) { const i = log.querySelector(`input[name="${k}"]`); if (i) i.value = v; } const i = log.querySelector(`input[name="${ed.dataset.obEdit}"]`); if (i) i.focus(); return; }
     const b = e.target.closest('[data-ob]'); if (!b || b.disabled || S.busy) return;
-    act(b.dataset.ob);
+    e.preventDefault(); act(b.dataset.ob);
   });
   sec.addEventListener('change', (e) => {
     const t = e.target;
     if (t.name === 'ob-login') { S.profile = t.value; S.session = null; draw(); }
-    else if (t.name === 'ob-folder') act('folder-mode', t.value);
-    else if (t.name === 'ob-jira') log.querySelectorAll('input[name="ob-jira"]').forEach((x) => x.closest('.ob-opt').classList.toggle('on', x.checked));   // saved with the review, so typing is never redrawn away
+    else if (t.name === 'ob-jira') S.jira = t.value, log.querySelectorAll('input[name="ob-jira"]').forEach((x) => x.closest('.ob-opt').classList.toggle('on', x.checked));   // saved with the review, so typing is never redrawn away
   });
   sec.addEventListener('submit', async (e) => {
     e.preventDefault();
     const form = e.target.closest('form'); if (!form || S.busy) return;
     if (form.dataset.obForm === 'say') {
       const ta = form.querySelector('textarea'); const v = ta.value.trim(); if (!v) return;
-      const a = readAnswer(v); S.said = v; S.busy = 'say'; draw();
-      const r = await post('project', { name: a.name, team: a.team, jira: a.jira, link: a.link, description: a.description });
-      if (!r.ok) S.note = r.error;
-      else if (a.folder) { const f = await post('folder', { mode: 'existing', root: a.folder }); if (!f.ok) { S.note = 'I couldn’t use ' + a.folder + ': ' + (f.error || 'not found') + ' Choose the folder below.'; await post('folder', { mode: 'new' }); } }
-      else if (!P().folder) await post('folder', { mode: 'new' });
+      ta.value = '';
+      const p = P();
+      if (p.done && p.fundamentals) { home(v); return; }
+      if (!p.project) { if (!p.verified) { S.queued = v; draw(); return; } return answer(v); }
+      if (!p.found && !p.reviewed) {   // ✕ on the first ✦: a folder path, sources to leave out, or no search
+        S.changes.push({ at: 'plan', text: v });
+        const disc = (p.discovered && p.discovered.sources) || [];
+        const c = readChange(v, disc.map((s) => s.label));
+        for (const l of c.leaveOut) { const s = disc.find((x) => x.label === l); if (s) S.excluded.add(s.id); }
+        S.asking = '';
+        if (c.folder) { const r = await post('folder', { mode: 'existing', root: c.folder }); if (!r.ok) { S.note = r.error; S.asking = 'plan'; } }
+        if (c.skip) { const r = await post('review', {}); if (!r.ok) S.note = r.error; }
+        else if (!c.folder && !c.leaveOut.length) { S.note = 'I didn’t catch a folder or a source in that. Write a folder path, or the name of a source to leave out.'; S.asking = 'plan'; }
+        draw(); return;
+      }
+      // ✕ on the second ✦, or a word about the context at any time before setup
+      S.changes.push({ at: 'context', text: v });
+      const typed = readReview() || { fields: {} };
+      const fl = readField(v);
+      const cur = (p.review && p.review.fields) || {};
+      if (fl.purpose && !Object.keys(fl).some((k) => k !== 'purpose') && cur.purpose && cur.purpose.value) { S.note = 'Say which line it is, for example “owner is Dana”, or edit the line above.'; draw(); return; }
+      S.busy = 'say'; draw();
+      const r = await post('review', { ...typed, fields: { ...(typed.fields || {}), ...fl } });
+      if (!r.ok) S.note = r.error; else { S.asking = ''; S.editing = new Set(); }
       S.busy = ''; draw();
     } else if (form.dataset.obForm === 'path') {
       const v = form.querySelector('input').value.trim(); if (!v) return;
-      const mode = S.folderInput === 'new' ? 'new' : 'existing';
-      const r = await post('folder', mode === 'new' ? { mode, parent: v } : { mode, root: v });
+      const r = await post('folder', { mode: 'existing', root: v });
       if (!r.ok) S.note = r.error; else { S.folderInput = false; S.note = ''; }
       draw();
-    }
+    } else if (form.dataset.obForm === 'review') { act('init'); }
   });
   sec.addEventListener('keydown', (e) => { if (e.key === 'Enter' && !e.shiftKey && e.target.matches('textarea')) { e.preventDefault(); e.target.closest('form').requestSubmit(); } });
   load();

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

@@ -0,0 +1,52 @@
+/* cozy-reveal.css — Home right after setup (onboarding build B2; pm/cozy-reveal.js). Cozy tokens only; the turns, cards, buttons and
+ * composer are the Home chat's own (cozy-home.css, cozy-today.css, cozy-onboard.css). */
+.rv-ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-width: 720px; }
+.rv-ticks li { display: flex; gap: 8px; align-items: baseline; color: var(--cz-ink2); font-size: var(--fs-body); line-height: var(--lh-body); animation: rv-in .28s ease-out both; animation-delay: calc(var(--rv-i, 0) * 120ms); }
+.rv-ticks li svg { color: var(--cz-ok); flex: none; transform: translateY(2px); }
+.rv-ticks li span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
+.rv-ticks li em { font-style: normal; color: var(--cz-ink3); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; }
+@keyframes rv-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
+
+.rv-portrait, .rv-draft { max-width: 720px; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; }
+.rv-head { display: flex; gap: 12px; align-items: center; }
+.rv-head b { color: var(--cz-ink); font-size: var(--fs-section); }
+.rv-head p { margin: 2px 0 0; color: var(--cz-ink2); font-size: var(--fs-meta); line-height: var(--lh-meta); }
+.rv-av { width: 40px; height: 40px; border-radius: 12px; background: var(--cz-bluebg); color: var(--cz-blueink); display: inline-flex; align-items: center; justify-content: center; font-weight: var(--fw-strong); flex: none; }
+.rv-cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
+.rv-cell { background: var(--cz-well); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
+.rv-lab { margin: 0; font-size: var(--fs-badge); letter-spacing: .06em; color: var(--cz-ink3); font-weight: var(--fw-strong); }
+.rv-big { color: var(--cz-ink); font-size: var(--fs-section); font-variant-numeric: tabular-nums; }
+.rv-big i { font-style: normal; color: var(--cz-ink2); font-weight: var(--fw-regular); font-size: var(--fs-meta); }
+.rv-txt { margin: 0; color: var(--cz-ink2); font-size: var(--fs-meta); line-height: var(--lh-meta); overflow-wrap: anywhere; }
+.rv-src { margin: 0; color: var(--cz-ink3); font-size: var(--fs-badge); line-height: var(--lh-badge); overflow-wrap: anywhere; }
+.rv-src a { color: inherit; }
+.rv-bar { height: 6px; border-radius: 999px; background: var(--cz-hair); overflow: hidden; }
+.rv-bar i { display: block; height: 100%; background: var(--cz-blue); border-radius: inherit; }
+.rv-track { position: relative; height: 34px; margin: 2px 6px 0; border-bottom: 2px solid var(--cz-hair); }
+.rv-mon { position: absolute; top: 0; font-size: var(--fs-badge); color: var(--cz-ink3); transform: translateX(-2px); }
+.rv-dot { position: absolute; bottom: -5px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--cz-blue); }
+.rv-today { position: absolute; bottom: -8px; width: 2px; height: 16px; margin-left: -1px; background: var(--cz-ink); }
+.rv-chk { position: absolute; bottom: -8px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--cz-okbg); color: var(--cz-ok); display: inline-flex; align-items: center; justify-content: center; }
+.rv-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--cz-ink3); font-size: var(--fs-meta); }
+
+.rv-kind { margin: 0; display: flex; gap: 6px; align-items: center; color: var(--cz-blueink); font-size: var(--fs-meta); font-weight: var(--fw-strong); }
+.rv-title { color: var(--cz-ink); font-size: var(--fs-section); line-height: 1.3; }
+.rv-draft dl { margin: 0; display: flex; flex-direction: column; gap: 6px; }
+.rv-dl { display: grid; grid-template-columns: 130px 1fr; gap: 8px; align-items: baseline; }
+.rv-dl dt { color: var(--cz-ink3); font-size: var(--fs-meta); }
+.rv-dl dd { margin: 0; color: var(--cz-ink); font-size: var(--fs-body); line-height: var(--lh-body); display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
+.rv-dl dd em { font-style: normal; color: var(--cz-ink3); font-size: var(--fs-badge); }
+.rv-dl dd em a { color: inherit; }
+.rv-in { font: inherit; width: 100%; box-sizing: border-box; border: 1px solid var(--cz-hair); border-radius: 10px; padding: 6px 10px; background: var(--cz-card); color: var(--cz-ink); }
+.rv-next { margin: 0; color: var(--cz-ink2); font-size: var(--fs-meta); line-height: var(--lh-meta); }
+.rv-acts { display: flex; gap: 8px; }
+@media (max-width: 560px) { .rv-dl { grid-template-columns: 1fr; gap: 2px; } }
+
+.rv-left { display: flex; flex-direction: column; gap: 4px; padding: 6px 4px 10px; }
+.rv-lrow { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 12px; background: var(--cz-card); border: 0; text-align: left; font: inherit; color: inherit; }
+.rv-lrow b { color: var(--cz-ink); font-size: var(--fs-row); display: inline-flex; gap: 6px; align-items: center; }
+.rv-lrow span { color: var(--cz-ink2); font-size: var(--fs-meta); line-height: var(--lh-meta); }
+.rv-ldraft { cursor: pointer; }
+.rv-ldraft b svg { color: var(--cz-blueink); }
+.rv-lnote { margin: 4px 10px 0; color: var(--cz-ink3); font-size: var(--fs-badge); line-height: var(--lh-badge); }
+@media (prefers-reduced-motion: reduce) { .rv-ticks li { animation: none; } }