create-pmos 0.38.8 → 0.40.0

package/workspace/public/pm/next-step-ui.js

@@ -0,0 +1,185 @@
+/**
+ * next-step-ui.js — next-step-actions. What a next-step row can DO, drawn under the row.
+ *
+ * The act on each item (`it.act.type`) comes from the server; this module only draws it and carries out the PM's presses:
+ *   open       → the file the step names, in a document tab
+ *   session    → switch to the running session
+ *   work       → PREPARE (a read-only plan), then GO (start exactly that plan)
+ *   gate       → words only: acceptance and the contract approval are the PM's own act, so there is no button
+ *   lifecycle  → reopen
+ * After a session started from a step has ended, REVIEW shows what changed and takes the PM's verdict.
+ *
+ * Nothing here starts a session except the GO press, and GO sends the hash of the plan the PM was shown, so a prompt that
+ * changed in the meantime is refused by the server.
+ */
+import { el } from './dom.js';
+import { state, setState, FIXTURE } from './state.js';
+
+let dataMod = null;
+const dataReady = import('./data.js').then((m) => { dataMod = m; }).catch(() => { dataMod = null; });
+let iniMod = null;
+import('./panel-initiatives.js').then((m) => { iniMod = m; }).catch(() => { iniMod = null; });
+
+const LAB = 'font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-foreground)';
+const BTN = 'font-family:var(--mono);font-size:10px;padding:2px 7px;background:var(--secondary);border:1px solid var(--border);color:var(--foreground);cursor:pointer;min-height:24px';
+const GO = 'font-family:var(--mono);font-size:10.5px;padding:3px 10px;background:var(--brand);border:1px solid var(--brand);color:oklch(0.987 0.002 197.1);cursor:pointer;min-height:26px';
+const iv = (t) => el('span', null, t == null ? '' : String(t));
+
+/* per-item UI state, keyed by item id: { loading, plan, judgment, profile, note, summary } */
+const ui = Object.create(null);
+let profileList = null;
+const touch = () => setState((s) => ({ nsTick: (s.nsTick || 0) + 1 }));
+const slot = (id) => (ui[id] = ui[id] || { judgment: false, profile: '' });
+
+async function prepare(slug, it) {
+  const u = slot(it.id);
+  u.loading = true; u.note = null; touch();
+  await dataReady;
+  if (profileList === null) { const r = await dataMod.nextStepProfiles(); profileList = (r && r.profiles) || []; }
+  const out = await dataMod.nextStepPost('prepare', { initiative_id: slug, item_id: it.id, agent: 'claude', profile: u.profile || undefined, judgment: u.judgment });
+  u.loading = false;
+  u.plan = out && out.ok ? out : null;
+  if (!out || out.ok === false) u.note = { tone: 'bad', text: (out && out.error) || 'could not prepare' };
+  touch();
+}
+async function go(slug, it) {
+  const u = slot(it.id); const pl = u.plan;
+  if (!pl || !pl.prompt_sha) return;
+  u.loading = true; u.note = null; touch();
+  const out = await dataMod.nextStepPost('go', { initiative_id: slug, item_id: it.id, agent: 'claude', profile: u.profile || undefined, judgment: u.judgment, confirm: true, prompt_sha: pl.prompt_sha });
+  u.loading = false;
+  if (!out || out.ok === false) { u.note = { tone: 'bad', text: (out && out.error) || 'nothing was started' }; if (out && out.prompt_sha) u.plan = null; touch(); return; }
+  u.plan = null; u.note = { tone: 'ok', text: 'started — ' + (out.notice || out.plan.why || 'the session is running') };
+  if (iniMod && out.session) iniMod.openTerm(slug, { id: out.session.id, name: out.session.name, st: 'working' });
+  await dataMod.refreshInitiative(slug);
+  touch();
+}
+async function review(slug, it, verdict) {
+  const u = slot(it.id);
+  let note = '';
+  if (verdict === 'send-back') {
+    note = typeof window !== 'undefined' && window.prompt ? window.prompt('Send “' + (it.key || it.text) + '” back — what should change? (one line)', '') : '';
+    if (note === null || !String(note).trim()) return;
+  }
+  const out = await dataMod.nextStepPost('review', { session_id: it.run.session_id, verdict, note: String(note).trim() });
+  u.note = out && out.ok ? { tone: 'ok', text: verdict === 'accept' ? 'step accepted — the initiative is not accepted by this' : 'sent back with your note' } : { tone: 'bad', text: (out && out.error) || 'not recorded' };
+  await dataMod.refreshInitiative(slug);
+  touch();
+}
+async function loadSummary(it) {
+  const u = slot(it.id);
+  u.summary = { loading: true }; touch();
+  await dataReady;
+  const out = await dataMod.nextStepSummary(it.run.session_id);
+  u.summary = out && out.ok ? out : { error: (out && out.error) || 'could not read the session' };
+  touch();
+}
+
+const row = (kids) => el('div', { style: 'display:flex;gap:5px;flex-wrap:wrap;align-items:center;margin-top:3px' }, kids);
+const noteLine = (n) => (n ? el('span', { 'data-r21': 'note', style: 'font-size:11px;color:' + (n.tone === 'bad' ? 'var(--destructive)' : 'var(--muted-foreground)') }, iv(n.text)) : null);
+
+function planPanel(slug, it) {
+  const u = slot(it.id); const pl = u.plan;
+  if (!pl) return null;
+  if (pl.refused) {
+    return el('div', { 'data-r21': 'plan-refused', style: 'margin-top:4px;padding:6px 8px;border:1px solid var(--destructive);font-size:11.5px;line-height:1.5;color:var(--foreground)' },
+      el('span', { style: LAB + ';color:var(--destructive)' }, 'not now'), el('div', null, iv(pl.refused.why)));
+  }
+  const prof = (profileList || []);
+  const opt = (v, t, cur) => el('option', { value: v, selected: v === cur ? 'selected' : null }, t);
+  const where = pl.plan.plan === 'new-worktree' ? 'creates branch ' + pl.plan.branch + ' in its own folder' : pl.plan.plan === 'reuse-worktree' ? 'reuses the folder for ' + (pl.plan.branch || 'the initiative branch') : pl.plan.why;
+  const kids = [
+    el('span', { style: LAB }, 'plan — nothing has been created'),
+    el('div', { 'data-r21': 'plan-where', style: 'font-size:11.5px;line-height:1.5' }, iv(where + (pl.plan.dir ? ' · ' + pl.plan.dir : ''))),
+    pl.existing_sessions && pl.existing_sessions.length
+      ? el('div', { 'data-r21': 'plan-existing', style: 'font-size:11px;color:var(--muted-foreground)' }, iv('already running on this initiative: ' + pl.existing_sessions.map((x) => x.name).join(', ') + ' — go starts another one'))
+      : null,
+    pl.sources && pl.sources.length
+      ? el('div', { 'data-r21': 'plan-sources', style: 'font-size:11px;color:var(--muted-foreground)' }, iv('read-only sources it may name: ' + pl.sources.map((x) => x.label).join(', ')))
+      : el('div', { 'data-r21': 'plan-sources', style: 'font-size:11px;color:var(--muted-foreground)' }, iv(u.profile ? 'the profile declares no source that suits this step' : 'no profile chosen, so no outside source is named')),
+    el('div', { style: 'display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:11px' },
+      el('label', { style: 'display:flex;gap:4px;align-items:center' }, iv('profile'),
+        el('select', { 'data-r21': 'plan-profile', style: 'font-family:var(--mono);font-size:10.5px;background:var(--secondary);color:var(--foreground);border:1px solid var(--border)',
+          onChange: (e) => { u.profile = e.target.value; prepare(slug, it); } }, [opt('', 'none', u.profile), ...prof.map((p) => opt(p.id, p.label || p.id, u.profile))])),
+      el('label', { style: 'display:flex;gap:4px;align-items:center' },
+        el('input', { type: 'checkbox', 'data-r21': 'plan-judgment', checked: u.judgment ? 'checked' : null, onChange: (e) => { u.judgment = !!e.target.checked; prepare(slug, it); } }),
+        iv('use the Typesafe skill for categorising, scoring and yes/no'))),
+    el('div', { 'data-r21': 'plan-judgment-note', style: 'font-size:11px;color:' + (pl.judgment.on ? 'var(--warning)' : 'var(--muted-foreground)') }, iv(pl.judgment.note)),
+    el('span', { style: LAB + ';padding-top:4px' }, 'the exact first input the session will get'),
+    el('pre', { 'data-r21': 'plan-prompt', style: 'font-family:var(--mono);font-size:10.5px;line-height:1.5;white-space:pre-wrap;padding:6px 8px;background:var(--secondary);border:1px solid var(--border);margin:0;max-height:240px;overflow:auto' }, iv(pl.prompt)),
+    el('div', { 'data-r21': 'plan-budget', style: 'font-size:11px;color:' + (pl.budget.allowed ? 'var(--muted-foreground)' : 'var(--destructive)') },
+      iv(pl.budget.allowed ? `${pl.budget.running} of ${pl.budget.limits.concurrent} prepared sessions running · ${pl.budget.startedToday} of ${pl.budget.limits.perDay} started today` : pl.budget.reason)),
+    row([
+      el('button', { 'data-r21': 'go', style: GO + (pl.budget.allowed && !u.loading ? '' : ';opacity:.5'), disabled: pl.budget.allowed && !u.loading ? null : 'disabled', onClick: () => go(slug, it),
+        title: 'starts a session with exactly the input above. It proposes only: it will not push, send, accept or merge.' }, u.loading ? '…' : 'go — start the session'),
+      el('button', { 'data-r21': 'cancel', style: BTN, onClick: () => { u.plan = null; touch(); } }, 'cancel'),
+    ]),
+  ];
+  return el('div', { 'data-r21': 'plan', style: 'margin-top:4px;padding:6px 8px;border:1px solid var(--border);display:flex;flex-direction:column;gap:3px' }, kids);
+}
+
+function reviewPanel(slug, it) {
+  const u = slot(it.id); const s = u.summary; const run = it.run;
+  if (!run) return null;
+  const done = run.review;
+  const head = [];
+  // The record was read when the initiative was selected; the live session list is newer. A run the record calls live is
+  // ended as soon as the session list says the session has exited.
+  const cs = (state.sessions || []).find((x) => x && x.id === run.session_id);
+  const ended = run.state === 'ended' || !!(cs && cs.shown === 'exited');
+  if (!ended) {
+    head.push(el('span', { 'data-r21': 'run-live', style: 'font-size:11px;color:var(--muted-foreground)' }, iv('a session started from this step is running')));
+    head.push(el('button', { 'data-r21': 'switch', style: BTN, onClick: () => iniMod && iniMod.openTerm(slug, { id: run.session_id, name: it.key + ' · ' + slug }) }, 'switch to it'));
+  } else {
+    head.push(el('span', { 'data-r21': 'run-ended', style: 'font-size:11px;color:var(--muted-foreground)' }, iv('the session started from this step has ended')));
+    head.push(el('button', { 'data-r21': 'review-open', style: BTN, onClick: () => loadSummary(it) }, s ? 'refresh review' : 'review what it did'));
+  }
+  if (done) head.push(el('span', { 'data-r21': 'verdict', style: 'font-family:var(--mono);font-size:10px;color:' + (done.verdict === 'accept' ? 'var(--brand)' : 'var(--warning)') }, iv((done.verdict === 'accept' ? 'accepted' : 'sent back') + (done.note ? ' — ' + done.note : ''))));
+  const kids = [row(head)];
+  if (s && s.loading) kids.push(el('div', { style: 'font-size:11px;color:var(--muted-foreground)' }, 'reading …'));
+  if (s && s.error) kids.push(el('div', { 'data-r21': 'review-error', style: 'font-size:11px;color:var(--destructive)' }, iv(s.error)));
+  if (s && s.ok) {
+    kids.push(el('span', { style: LAB + ';padding-top:3px' }, 'changed on ' + (s.branch || 'its branch') + ' against trunk · ' + s.files.length));
+    kids.push(s.files_error ? el('div', { 'data-r21': 'review-files-error', style: 'font-size:11px;color:var(--destructive)' }, iv('could not be read — ' + s.files_error))
+      : s.files.length ? el('div', { 'data-r21': 'review-files', style: 'display:flex;flex-direction:column' }, s.files.map((f) => el('span', { style: 'font-family:var(--mono);font-size:10.5px;color:var(--muted-foreground)' }, iv(f.status + ' ' + f.path))))
+        : el('div', { 'data-r21': 'review-files', style: 'font-size:11px;color:var(--muted-foreground);font-style:italic' }, 'no file changed on the branch'));
+    kids.push(el('span', { style: LAB + ';padding-top:3px' }, 'the end of the conversation'));
+    kids.push(el('pre', { 'data-r21': 'review-tail', style: 'font-family:var(--mono);font-size:10.5px;white-space:pre-wrap;padding:6px 8px;background:var(--secondary);border:1px solid var(--border);margin:0;max-height:160px;overflow:auto' }, iv(s.tail || '(empty)')));
+    const j = s.judgments || { valid: [], invalid: [] };
+    if (j.valid.length || j.invalid.length) {
+      kids.push(el('span', { style: LAB + ';padding-top:3px' }, 'judgments the session reported'));
+      for (const v of j.valid) kids.push(el('div', { 'data-r21': 'judgment-ok', style: 'font-size:11px' }, iv(v.kind + ' · ' + v.question + ' → ' + (v.kind === 'yesno' ? (v.answer ? 'yes' : 'no') : v.kind === 'score' ? v.score : v.label))));
+      for (const v of j.invalid) kids.push(el('div', { 'data-r21': 'judgment-bad', style: 'font-size:11px;color:var(--destructive)' }, iv('rejected (' + v.error + '): ' + v.line)));
+    }
+    kids.push(row([
+      el('button', { 'data-r21': 'verdict-accept', style: GO, onClick: () => review(slug, it, 'accept'), title: 'accepts this step only; the initiative is accepted at the Acceptance Gate' }, 'accept the step'),
+      el('button', { 'data-r21': 'verdict-back', style: BTN, onClick: () => review(slug, it, 'send-back') }, 'send it back…'),
+    ]));
+  }
+  return el('div', { 'data-r21': 'review', style: 'margin-top:4px;padding:6px 8px;border:1px solid var(--border);display:flex;flex-direction:column;gap:2px' }, kids);
+}
+
+/** The controls and panels for one next-step item; null in fixture mode or when the item has no act. */
+export function stepActions(product, slug, it) {
+  if (FIXTURE || !it || !it.act) return null;
+  const a = it.act; const u = slot(it.id);
+  const btns = [];
+  if (a.type === 'work') {
+    btns.push(el('button', { 'data-r21': 'prepare', style: BTN, onClick: () => prepare(slug, it), title: 'shows the plan and the exact prompt. Nothing is created or started.' }, u.loading && !u.plan ? '…' : 'prepare'));
+  } else if (a.type === 'session' && a.sessionId) {
+    btns.push(el('button', { 'data-r21': 'switch', style: BTN, onClick: () => iniMod && iniMod.openTerm(slug, { id: a.sessionId, name: it.text }) }, 'switch to it'));
+  } else if (a.type === 'lifecycle') {
+    btns.push(el('button', { 'data-r21': 'reopen', style: BTN, onClick: async () => { await dataReady; await dataMod.setLifecycle(product, slug, 'active', ''); await dataMod.refreshInitiative(slug); touch(); } }, 'reopen'));
+  } else if (a.type === 'gate') {
+    btns.push(el('span', { 'data-r21': 'gate-note', style: 'font-size:11px;color:var(--muted-foreground);font-style:italic' }, iv('yours to do — ' + a.why)));
+  }
+  if (a.path && (a.type === 'open' || a.type === 'work')) {
+    btns.push(el('button', { 'data-r21': 'open', style: BTN, onClick: () => iniMod && iniMod.openDoc(slug, a.path, 'FILE'), title: a.path }, a.type === 'open' ? 'open ' + a.path.split('/').pop() : 'open file'));
+  }
+  if (a.type === 'open') btns.push(el('span', { 'data-r21': 'gate-note', style: 'font-size:11px;color:var(--muted-foreground);font-style:italic' }, iv('yours to do — ' + a.why)));
+  const out = [];
+  if (btns.length || u.note) out.push(row([...btns, noteLine(u.note)]));
+  const pp = planPanel(slug, it); if (pp) out.push(pp);
+  const rp = reviewPanel(slug, it); if (rp) out.push(rp);
+  return out.length ? el('div', { 'data-r21': 'actions', 'data-act': a.type }, out) : null;
+}

package/workspace/public/pm/panel-detail.js

@@ -55,6 +55,8 @@ import * as FX from './fixture.js';
 import { openDoc, openTab, openTerm, fileNewModel } from './panel-initiatives.js';
 import { addProductBody } from './panel-repos.js';
 import { lifecycleRow } from './lifecycle.js';
+import { statusBanner, lifecycleNotes } from './status-banner.js';
+import { stepActions } from './next-step-ui.js';
 import { boardOf, records, currentProduct } from './board-read.js';
 
 /* ── the prototype's small helpers ─────────────────────────────────────────────────────────── */
@@ -993,11 +995,11 @@ function realSyncPanel(slug, a, key, dest) {
  * The whole remaining path, in order, from the ladder, the ledgers and the sessions — derived on the server
  * (lib/next-steps.js), never written by a model. Each item names the fact it was read from; the first is
  * marked. A stopped initiative says so, and an accepted one says nothing remains. */
-function nextStepsBlock(rec) {
+function nextStepsBlock(slug, rec) {
   const ns = rec && rec.nextSteps;
   if (FIXTURE || !ns) return null;
   const TONE = { blocked: 'var(--destructive)', current: 'var(--brand)', pending: 'var(--muted-foreground)', unknown: 'var(--destructive)' };
-  const rows = (ns.items || []).map((it) => el('div', { 'data-r16': 'next-item', 'data-first': it.first ? '1' : '0', 'data-kind': it.kind,
+  const rowFor = (it) => el('div', { 'data-r16': 'next-item', 'data-first': it.first ? '1' : '0', 'data-kind': it.kind, 'data-owner': it.owner || '', 'data-id': it.id || '',
     style: 'display:grid;grid-template-columns:22px 1fr;gap:8px;padding:6px 0;border-bottom:1px solid var(--border)' + (it.held ? ';opacity:.6' : '') },
     el('span', { style: 'font-family:var(--mono);font-size:11px;color:' + (TONE[it.status] || 'var(--muted-foreground)') }, iv(String(it.n))),
     el('div', { style: 'min-width:0;display:flex;flex-direction:column;gap:2px' },
@@ -1008,7 +1010,21 @@ function nextStepsBlock(rec) {
         it.held ? el('span', { style: 'font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-foreground)' }, 'after reopening') : null),
       el('div', { style: 'font-size:11.5px;line-height:1.5;color:var(--foreground)' }, iv(it.action)),
       it.why && it.why !== it.action ? el('div', { style: 'font-size:11px;line-height:1.5;color:var(--muted-foreground)' }, iv(it.why)) : null,
-      el('div', { style: 'font-family:var(--mono);font-size:10px;color:var(--muted-foreground)' }, iv('from: ' + it.source)))));
+      el('div', { style: 'font-family:var(--mono);font-size:10px;color:var(--muted-foreground)' }, iv('from: ' + it.source)),
+      stepActions(repoOf(slug), slug, it)));
+  // Yours / Mine (status-clarity R3): the same ordered list, split by who acts. The number keeps its place in the whole path.
+  const all = ns.items || [];
+  const SEC = 'font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;padding:6px 0 2px;';
+  const part = (owner, label, tone, empty) => {
+    const mine = all.filter((it) => it.owner === owner);
+    return el('div', { 'data-r18': 'steps-' + owner },
+      el('div', { 'data-r18': 'steps-heading', style: SEC + 'color:' + tone }, label + ' · ' + mine.length),
+      mine.length ? mine.map(rowFor) : el('div', { style: 'font-size:11.5px;color:var(--muted-foreground);font-style:italic;padding:2px 0' }, empty));
+  };
+  const rows = all.length ? [
+    part('pm', 'yours', 'var(--brand)', 'nothing is waiting on you right now'),
+    part('agent', 'mine (the agent’s)', 'var(--muted-foreground)', 'nothing is waiting on the agent'),
+  ] : [];
   return el('div', { 'data-r16': 'next-steps', style: 'padding:8px 14px;border-top:1px solid var(--border)' },
     el('div', { style: 'font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-foreground);padding-bottom:4px' }, 'next steps to done'),
     el('div', { 'data-r16': 'next-summary', style: 'font-size:12px;line-height:1.5;color:var(--foreground);padding-bottom:4px' }, iv(ns.summary || '')),
@@ -1016,8 +1032,8 @@ function nextStepsBlock(rec) {
 }
 
 /* Conversations and git files, listed with the document artifacts (R5, R6). A conversation opens a read-only
- * transcript tab; the row says where it is stored. A file read from git is marked as such and is not a link:
- * it is evidence of what changed, not a document the reader can open here. */
+ * transcript tab; the row says where it is stored. A file read from git is marked as such and opens read-only
+ * (gitFileRow): it is evidence of what changed, so the tab offers no edit or save. */
 function openConversation(slug, c) {
   const ini = iniModLazy;
   if (!ini || typeof ini.openTab !== 'function') return;
@@ -1044,7 +1060,27 @@ function conversationsBlock(slug, rec) {
     cs.length ? el('span', { style: 'font-size:10.5px;color:var(--muted-foreground)' }, 'stored in this machine’s runtime state directory — not in the repository, never sent anywhere') : null);
 }
 
-function gitFilesBlock(rec) {
+/* A file read from git opens in a read-only doc tab (status-clarity R5). Text, markdown and html open anywhere. A
+ * file that exists only on the initiative's own branch is read through git from that branch, so it opens the branch's
+ * copy and never the trunk's. An image, PDF or workbook opens only from the checked-out tree. Anything else says why it
+ * cannot be previewed instead of failing on click. */
+const READ_FROM_BRANCH = new Set(['markdown', 'text', 'html']);
+function gitFileRow(slug, f, it) {
+  const branchOnly = it.where === 'branch';
+  const readable = READ_FROM_BRANCH.has(it.kind) || (!branchOnly && (it.kind === 'image' || it.kind === 'pdf' || it.kind === 'sheet'));
+  const tip = it.commits + ' commit' + (it.commits === 1 ? '' : 's') + ', last ' + it.last + (branchOnly ? ' · only on ' + (f.branch || 'the initiative branch') : '');
+  const STYLE = 'font-family:var(--mono);font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;';
+  if (!readable) {
+    const why = branchOnly ? 'this kind of file cannot be previewed from a branch' : 'binary or unknown file type — it cannot be previewed here';
+    return el('span', { 'data-r16': 'git-file', 'data-open': '0', title: tip + ' · ' + why, style: STYLE + 'color:var(--muted-foreground)' },
+      iv(it.path + '  — cannot be previewed'));
+  }
+  return el('button', { 'data-r16': 'git-file', 'data-open': '1', 'data-where': it.where || 'head', title: tip + ' · opens read-only',
+    onClick: () => openDoc(slug, it.path, 'FILE', null, { readonly: true, ref: branchOnly ? (f.branch || null) : null }),
+    style: STYLE + 'color:var(--foreground);text-align:left;min-height:22px;padding:1px 4px;margin:0 -4px', hover: 'background:var(--accent)' }, iv(it.path));
+}
+
+function gitFilesBlock(slug, rec) {
   if (FIXTURE) return null;
   const f = rec.gitFiles;
   const LAB = 'font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-foreground)';
@@ -1061,8 +1097,7 @@ function gitFilesBlock(rec) {
     el('span', { style: LAB + ';padding-top:4px' }, 'files from git · ' + (f.total || 0) + (f.via && f.via.length ? ' · via ' + f.via.join(', ') : '')),
     order.length ? order.map((g) => el('div', { style: 'display:flex;flex-direction:column;gap:1px' },
       el('span', { style: 'font-family:var(--mono);font-size:10px;color:var(--info);padding-top:2px' }, g + ' · ' + groups[g].length),
-      groups[g].map((it) => el('span', { 'data-r16': 'git-file', title: it.commits + ' commit' + (it.commits === 1 ? '' : 's') + ', last ' + it.last,
-        style: 'font-family:var(--mono);font-size:10px;color:var(--muted-foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap' }, iv(it.path)))))
+      groups[g].map((it) => gitFileRow(slug, f, it))))
       : el('span', { 'data-r16': 'git-empty', style: 'font-size:11.5px;color:var(--muted-foreground);font-style:italic' },
         'none — git shows no commit naming this initiative and no initiative/<id> branch with changes'),
     f.truncated ? el('span', { style: 'font-size:10.5px;color:var(--muted-foreground)' }, 'showing the first 200 of ' + f.total) : null);
@@ -1078,7 +1113,7 @@ function artifactsRow(slug, rec) {
         ? el('span', { style: 'font-size:11.5px;color:var(--muted-foreground);font-style:italic' }, 'none filed')
         : null,
       conversationsBlock(slug, rec),
-      gitFilesBlock(rec),
+      gitFilesBlock(slug, rec),
     ),
   );
 }
@@ -1119,7 +1154,8 @@ function initBody(slug) {
   }
 
   out.push(headerBlock(slug, rec.tag || '', rec.pills || [], rec.crumb || null, lanePicker(slug, rec)));
-  { const lc = lifecycleRow(repoOf(slug), slug); if (lc) out.push(lc); }
+  { const sb = statusBanner(repoOf(slug), slug, rec); if (sb) out.push(sb); }
+  { const lc = lifecycleRow(repoOf(slug), slug); if (lc) { out.push(lc); const ln = lifecycleNotes(rec); if (ln) out.push(ln); } }
 
   if (rec.noLadder) {
     const ansC = FX.TONE[(rec.answer && rec.answer.tone) || 'info'] || FX.C.mut;
@@ -1131,7 +1167,7 @@ function initBody(slug) {
   const sess = sessionsBlock(slug);
   if (sess) out.push(sess);
 
-  const nextB = nextStepsBlock(rec);
+  const nextB = nextStepsBlock(slug, rec);
   if (nextB) out.push(nextB);
 
   const phases = phaseBlock(slug, rec);

package/workspace/public/pm/panel-initiatives.js

@@ -265,15 +265,19 @@ export function openTerm(slug, sess) {
   });
 }
 
-export function openDoc(slug, path, role, tree) {
+export function openDoc(slug, path, role, tree, opts) {
   /* `tree` — the line of work a search hit came from (overhaul-r1 R1.3). A hit on a LINKED worktree
    * opens a tab that carries that tree's `ws` and `branch`, under its own id, so it is read from and
    * saved to that tree and can sit beside the main tree's copy of the same path. A main-tree hit
    * opens exactly the tab it always did. */
   const linked = !!(tree && tree.ws && tree.linked);
+  // `opts.ref` — read the file from that initiative branch through git (it is not in the checked-out tree);
+  // `opts.readonly` — a git file is evidence, so the tab offers no edit or save.
+  const ref = opts && opts.ref ? opts.ref : null;
   openTab({
-    id: 'doc:' + (linked ? tree.ws + ':' : '') + path, kind: 'doc', title: path.split('/').pop(), slug,
+    id: 'doc:' + (linked ? tree.ws + ':' : '') + (ref ? 'ref:' + ref + ':' : '') + path, kind: 'doc', title: path.split('/').pop(), slug,
     ...(linked ? { ws: tree.ws, branch: tree.branch || null } : {}),
+    ...(ref ? { ref } : {}), ...(opts && opts.readonly ? { readonly: true } : {}),
     /* A file opened from the FOLDER search belongs to no initiative, so `slugProduct()` has no
      * answer for it — and `panel-tabs.visibleTabs` shows a tab whose repo is `undefined` in EVERY
      * repository, which would hang this workspace's file in another one's tab strip and read its
@@ -850,7 +854,7 @@ export function renderInitiatives(host) {
       const inits = sg.slugs.map((sl) => rowOf(sl, null));
       total += inits.length;
       groups.push({ gid: 'status:' + sg.key, idc: STATUS_TONE[sg.key] || 'var(--muted-foreground)', gname: sg.label, gct: String(inits.length),
-        hasKr: true, krid: '●', krname: sg.hint, krct: String(inits.length), slugs: sg.slugs, inits, isEmpty: false });
+        hasKr: true, krid: '●', krname: sg.meaning || sg.hint, krct: String(inits.length), slugs: sg.slugs, inits, isEmpty: false });
     }
   }
   const CHIP = 'font-family:var(--mono);font-size:10.5px;padding:2px 8px;border:1px solid var(--border);min-height:24px';
@@ -862,9 +866,27 @@ export function renderInitiatives(host) {
     chip('objective', !byStatus, () => setState({ groupBy: 'objective' }), 'by-objective'),
     chip('status', byStatus, () => setState({ groupBy: 'status' }), 'by-status'),
     byStatus ? chip('active only', !!state.activeOnly, () => setState({ activeOnly: !state.activeOnly }), 'active-only') : null,
+    SG ? chip('what do these mean?', !!state.legendOpen, () => setState({ legendOpen: !state.legendOpen }), 'legend-toggle') : null,
     byStatus && statusErr ? el('span', { 'data-r16': 'status-error', style: 'flex-basis:100%;font-size:10.5px;color:var(--destructive)' }, 'status could not be read — ' + statusErr + ' (every initiative is under Unknown)') : null);
 
-  const kids = [header, searchBox, groupBar];
+  /* THE LEGEND (status-clarity R1). One row per group, read from the same table that files the rows, so what this
+   * says and where a row lands cannot disagree: what it means, the fact it is read from, who acts, what moves it,
+   * and what the PM can do by hand. */
+  const OWNER_WORD = { pm: 'you', agent: 'the agent', system: 'nobody (derived)' };
+  const legend = !FIXTURE && SG && state.legendOpen ? el('div', { 'data-r18': 'legend',
+    style: 'display:flex;flex-direction:column;gap:8px;margin:0 12px 8px;padding:8px 10px;border:1px solid var(--border);background:var(--secondary)' },
+    el('div', { style: 'font-size:11px;color:var(--muted-foreground);line-height:1.5' },
+      'A status is never typed. It is worked out again each time from the ledgers and git. You can only hold, close, cancel or reopen an initiative by hand.'),
+    SG.GROUPS.map((g) => el('div', { 'data-r18': 'legend-row', 'data-key': g.key, style: 'display:flex;flex-direction:column;gap:2px;padding-top:6px;border-top:1px solid var(--border)' },
+      el('div', { style: 'display:flex;gap:7px;align-items:baseline' },
+        el('span', { style: 'font-size:12px;font-weight:600;color:' + (STATUS_TONE[g.key] || 'var(--foreground)') }, g.label),
+        el('span', { style: 'font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-foreground)' }, 'acts: ' + (OWNER_WORD[g.owner] || g.owner))),
+      el('div', { style: 'font-size:11.5px;line-height:1.5;color:var(--foreground)' }, g.meaning),
+      el('div', { style: 'font-size:10.5px;line-height:1.5;color:var(--muted-foreground)' }, 'read from: ' + g.source),
+      el('div', { style: 'font-size:10.5px;line-height:1.5;color:var(--muted-foreground)' }, 'moves: ' + g.moves),
+      el('div', { style: 'font-size:10.5px;line-height:1.5;color:var(--muted-foreground)' }, 'you can: ' + g.pmCan)))) : null;
+
+  const kids = [header, searchBox, groupBar, legend];
   /* THE WORKING SET, pinned above the Objectives.
    *
    * It is `groupNode` — the same element, the same collapse key, the same forced-open-on-search

package/workspace/public/pm/panel-repos.js

@@ -177,8 +177,8 @@ export const UNBACKED_MODES = ['agent', 'connect'];   // mode ids (labels: agent
 /* overhaul-r4 — the PORTFOLIO mode joins "all repositories" in live mode only (the fixture drawer is the
  * prototype's, and the design comparison reads it). Its meta lives here, not in fixture.js, for the
  * same reason. */
-const META = Object.assign({}, MODE_META, { portfolio: ['▦', 'portfolio'] });
-const LIVE_EXTRA = { 'all repositories': ['portfolio'] };
+const META = Object.assign({}, MODE_META, { portfolio: ['▦', 'portfolio'], guide: ['?', 'guide'], validate: ['◉', 'validate'], today: ['☀', 'today'] });
+const LIVE_EXTRA = { 'all repositories': ['today', 'portfolio', 'guide', 'validate'] };
 const DRAWER_GROUPS = SETTINGS_GROUPS.map((g) => ({
   label: g.label,
   items: (FIXTURE ? [] : LIVE_EXTRA[g.label] || []).concat(

package/workspace/public/pm/state.js

@@ -24,7 +24,7 @@ const STORE_KEY = 'pmos.workspace.pm.v1';
 /** The initial state — the prototype's `state = {…}` block, key for key. */
 function initial() {
   return {
-    theme: 'dark', sel: null, q: '', mode: 'product', collapsedGroups: {}, groupBy: 'objective', activeOnly: false, settingsOpen: false,
+    theme: 'dark', sel: null, q: '', mode: 'product', collapsedGroups: {}, groupBy: 'objective', activeOnly: false, legendOpen: false, settingsOpen: false,
     product: null, intgSynced: {},
     addSrc: 'github', addRepo: 'github.com/acme/atlas-mobile', addPath: '~/code/notes-cli',
     addLog: [], addedProducts: [], extraKnow: {},
@@ -176,9 +176,9 @@ const isTabList = (v) =>
 const PERSIST = {
   theme: (v) => v === 'dark' || v === 'light',
   col0: isBool, col1: isBool, col2: isBool,
-  // the dragged widths of panels 1 and 2 (clamped again by app.js on the way out)
+  // the dragged width of the navigation column (clamped again by app.js on the way out). `col1` now means "the list under the
+  // repositories is open"; the old second-column width (col1W) is no longer stored and an old value is ignored on load.
   col0W: (v) => typeof v === 'number' && Number.isFinite(v) && v >= 100 && v <= 1200,
-  col1W: (v) => typeof v === 'number' && Number.isFinite(v) && v >= 100 && v <= 1200,
   settingsOpen: isBool,
   product: isSlug,
   sel: isSlug,

package/workspace/public/pm/status-banner.js

@@ -0,0 +1,87 @@
+/**
+ * status-banner.js — status-clarity R2/R3/R4. The block at the top of an initiative that says where it stands.
+ *
+ * It states, from facts the server already derived: the group, why (the evidence behind it), who acts, the one
+ * thing to do next, how the status will change, and, for "needs you", each open item by its own words. It adds
+ * no fact of its own: the group text comes from lib/status-groups.js, the evidence from deriveState, the steps
+ * from lib/next-steps.js. A failed read says so and shows no group.
+ *
+ * The lifecycle control (hold, close, cancel, reopen) sits beside it with one sentence on what it does and the
+ * history of every change. Acceptance is the PM's and is recorded in a session, not by a button here (D12), so the
+ * banner says how and offers the list of what is waiting.
+ */
+import { el } from './dom.js';
+import { state, setState, FIXTURE } from './state.js';
+
+const SG = () => (typeof window !== 'undefined' ? window.PMOSStatusGroups : null);
+const LAB = 'font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-foreground)';
+const TONE = { 'needs-you': 'var(--destructive)', 'in-progress': 'var(--brand)', 'awaiting-acceptance': 'var(--foreground)', unknown: 'var(--destructive)' };
+const WHO = { pm: 'you', agent: 'the agent', system: 'nobody — it is derived' };
+const iv = (t) => el('span', null, t == null ? '' : String(t));
+
+function line(label, value, attr) {
+  return el('div', { style: 'display:grid;grid-template-columns:78px 1fr;gap:8px;padding:2px 0' },
+    el('span', { style: LAB + ';padding-top:2px' }, label),
+    el('span', { 'data-r18': attr, style: 'font-size:12px;line-height:1.5;color:var(--foreground);overflow-wrap:anywhere' }, iv(value)));
+}
+
+/** @returns {HTMLElement|null} null in fixture mode (the prototype has no such block). */
+export function statusBanner(product, slug, rec) {
+  const sg = SG();
+  if (FIXTURE || !sg || !slug) return null;
+  const err = state.statusErrors && state.statusErrors[product];
+  const row = state.statuses && state.statuses[product] && state.statuses[product][slug];
+  if (err || !row) {
+    return el('div', { 'data-r18': 'status-banner', 'data-key': 'unreadable', style: 'padding:8px 14px;border-bottom:1px solid var(--border)' },
+      el('span', { style: LAB }, 'status'),
+      el('div', { 'data-r18': 'status-error', style: 'font-size:12px;color:var(--destructive);line-height:1.5' },
+        'The status could not be read — ' + (err || 'the server returned no status for this initiative') + '. No group is shown because none can be derived.'));
+  }
+  const key = sg.keyOf(row);
+  const g = sg.BY_KEY[key];
+  const items = (rec && rec.nextSteps && rec.nextSteps.items) || [];
+  const waiting = items.filter((i) => i.kind === 'needs' || i.kind === 'returned');
+  // The one thing to do next: the engine's first item, unless it is not yours and something is waiting on you.
+  const mine = items.filter((i) => i.owner === 'pm' && !i.held);
+  const first = items.find((i) => i.first) || items[0] || null;
+  const next = g.owner === 'pm' ? (mine[0] || first) : first;
+  const nextText = next ? next.text + ' — ' + next.action : (g.key === 'accepted' ? 'Nothing remains.' : 'No step is outstanding.');
+
+  const kids = [
+    el('div', { style: 'display:flex;gap:8px;align-items:baseline;flex-wrap:wrap' },
+      el('span', { style: LAB }, 'status'),
+      el('span', { 'data-r18': 'status-group', style: 'font-size:13px;font-weight:600;color:' + (TONE[key] || 'var(--foreground)') }, g.label),
+      el('span', { style: 'font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-foreground)' }, 'derived, not typed')),
+    line('why', row.statusText ? row.statusText + '. ' + g.meaning : g.meaning, 'status-why'),
+    line('acts now', WHO[g.owner] || g.owner, 'status-owner'),
+    line('next', nextText, 'status-next'),
+    line('changes when', g.moves, 'status-moves'),
+  ];
+  if (waiting.length) {
+    kids.push(el('div', { 'data-r18': 'needs-items', style: 'display:flex;flex-direction:column;gap:2px;padding-top:4px' },
+      el('span', { style: LAB }, 'waiting on you · ' + waiting.length),
+      waiting.map((w) => el('div', { 'data-r18': 'needs-item', style: 'font-size:12px;line-height:1.5;color:var(--foreground);padding-left:10px;border-left:2px solid var(--destructive)' },
+        iv(w.text + (w.action ? ' — ' + w.action : ''))))));
+  }
+  if (key === 'awaiting-acceptance' || key === 'needs-you') {
+    kids.push(el('div', { 'data-r18': 'acceptance-note', style: 'font-size:11px;line-height:1.5;color:var(--muted-foreground);padding-top:4px' },
+      'Acceptance is yours and cannot be delegated (D12). Tell the session that holds this initiative to record it, or run scripts/record-acceptance.js. The workspace never records one for you.'),
+      el('button', { 'data-r18': 'see-waiting', onClick: () => setState({ mode: 'focus', settingsOpen: false, col1: true }),
+        style: 'align-self:flex-start;font-family:var(--mono);font-size:10px;padding:2px 7px;background:var(--secondary);border:1px solid var(--border);color:var(--foreground);margin-top:4px' },
+        'see everything waiting on you'));
+  }
+  return el('div', { 'data-r18': 'status-banner', 'data-key': key, style: 'display:flex;flex-direction:column;gap:2px;padding:8px 14px;border-bottom:1px solid var(--border)' }, kids);
+}
+
+/** What the lifecycle control does, and every change made with it. Sits under the control row. */
+export function lifecycleNotes(rec) {
+  if (FIXTURE) return null;
+  const hist = (rec && rec.lcHistory) || [];
+  return el('div', { 'data-r18': 'lifecycle-notes', style: 'display:flex;flex-direction:column;gap:2px;padding:4px 14px 6px;border-bottom:1px solid var(--border)' },
+    el('span', { 'data-r18': 'lifecycle-explain', style: 'font-size:10.5px;line-height:1.5;color:var(--muted-foreground)' },
+      'Hold, close and cancel take this initiative off the board and stop it gating; reopen puts it back. They are the only statuses you set by hand. Every other status is read from git and the ledgers, so it cannot be edited here.'),
+    hist.length ? el('div', { 'data-r18': 'lifecycle-history', style: 'display:flex;flex-direction:column;gap:1px' },
+      el('span', { style: LAB + ';padding-top:2px' }, 'lifecycle history · ' + hist.length),
+      hist.map((h) => el('span', { style: 'font-family:var(--mono);font-size:10px;color:var(--muted-foreground)' },
+        iv(String(h.at || '').slice(0, 10) + ' · ' + h.state + (h.reason ? ' — ' + h.reason : ''))))) : null);
+}

package/workspace/public/pm/tab-doc.js

@@ -60,7 +60,7 @@ const wsId = () => state.wsId || state.ws || state.product || '';
  * `ws`, and is read from and saved to THAT tree. Two trees can hold the same path with different
  * content, so every per-document cache keys on tree + path; a main-tree tab keys on path alone,
  * exactly as before. */
-const docKey = (tab) => (tab && tab.ws ? tab.ws + '\u241f' : '') + (tab ? tab.path : '');
+const docKey = (tab) => (tab && tab.guide ? 'guide\u241f' : '') + (tab && tab.ws ? tab.ws + '\u241f' : '') + (tab && tab.ref ? tab.ref + '\u241f' : '') + (tab ? tab.path : '');
 const wsOf = (tab) => (tab && tab.ws) || wsId();
 
 /* A REFERENCE is not a file. Panel 3's links section files `jira://ATL-501`, `confluence://PM/x`,
@@ -97,9 +97,12 @@ function requestDoc(tab) {
   if (pending.has(path)) return;
   pending.add(path);
   const done = (text) => { pending.delete(path); disk.set(path, text); setState({}); };
-  const load = (dataMod && typeof dataMod.readDoc === 'function')
-    ? dataMod.readDoc(tab.path, tab.ws)
-    : fetch('/api/doc?ws=' + encodeURIComponent(wsOf(tab)) + '&path=' + encodeURIComponent(tab.path))
+  // A guide page ships with the app and is read from it, not from the repository (status-clarity R6).
+  const load = tab.guide
+    ? fetch('/api/guide?page=' + encodeURIComponent(tab.path)).then((r) => (r.ok ? r.text() : Promise.reject(new Error('no such guide page'))))
+    : (dataMod && typeof dataMod.readDoc === 'function')
+    ? dataMod.readDoc(tab.path, tab.ws, tab.ref)
+    : fetch('/api/doc?ws=' + encodeURIComponent(wsOf(tab)) + '&path=' + encodeURIComponent(tab.path) + (tab.ref ? '&ref=' + encodeURIComponent(tab.ref) : ''))
       .then((r) => (r.ok ? r.text() : Promise.reject(new Error('HTTP ' + r.status))));
   Promise.resolve(load).then(
     (text) => { unread.delete(path); done(typeof text === 'string' ? text : String(text == null ? '' : text)); },
@@ -473,16 +476,71 @@ function sheetBody(tab) {
   ]);
 }
 
+/* ── file-viewer-any-text — a document that is not markdown, a page or a grid is SOURCE ──────────────────
+ * `previewKind` decides what counts as markdown or HTML, in the one place the server also trusts. Anything else
+ * the reader serves is shown as numbered monospace lines, never through the markdown renderer: JSON pretty-printed,
+ * JSONL as one record per line. These tabs are read-only, because /api/doc/save refuses everything but markdown and
+ * an edit or save button that cannot work is worse than none. If the classifier did not load, nothing here applies
+ * and the pane behaves as before. */
+function isSourcePath(p) {
+  if (isReference(p)) return false;      // an external reference has no file to show
+  const PK = typeof window !== 'undefined' ? window.PreviewKind : null;
+  if (!PK || typeof PK.previewKind !== 'function') return false;
+  const kind = PK.previewKind(String(p || ''));
+  if (kind === 'markdown' || kind === 'html') return false;
+  const e = extOfPath(p);
+  return !(e === 'csv' || e === 'tsv' || e === 'pdf' || e === 'xlsx');
+}
+const SRC_CAP = 5000;       // lines drawn; the cap is STATED when it applies
+const JSONL_EXT = new Set(['jsonl', 'ndjson', 'jsonlines', 'ldjson']);
+function sourceBody(tab, text) {
+  const ext = extOfPath(tab.path);
+  return scrollPane(tab, 'view', 'src\u0000' + text, RAW_ST, () => {
+    const head = (t, bad) => el('div', {
+      'data-r21': 'source-note',
+      style: 'padding:2px 0 8px;font-family:var(--mono);font-size:10.5px;color:' + (bad ? 'var(--destructive)' : 'var(--muted-foreground)'),
+    }, iv(t));
+    const row = (n, t, bad) => el('div', { style: 'display:flex;gap:10px;min-height:1.2em' },
+      el('span', { style: 'flex:none;min-width:4ch;text-align:right;color:var(--muted-foreground);user-select:none' }, iv(String(n))),
+      el('div', { style: 'flex:1;min-width:0;white-space:pre-wrap;overflow-wrap:anywhere' + (bad ? ';color:var(--destructive)' : '') }, iv(t)));
+    const lines = (arr) => arr.slice(0, SRC_CAP).map((t, i) => row(i + 1, t, false));
+    const capNote = (n) => (n > SRC_CAP ? [head('Showing the first ' + SRC_CAP + ' of ' + n + ' lines. The rest is not drawn. Use raw to read it all.', false)] : []);
+    const all = text.split('\n');
+    if (ext === 'json') {
+      let v; let err = null;
+      try { v = JSON.parse(text); } catch (e) { err = (e && e.message) || 'parse error'; }
+      if (err) return [head('JSON · read-only · NOT valid JSON: ' + err + ' · shown as written', true), ...lines(all), ...capNote(all.length)];
+      const pretty = JSON.stringify(v, null, 2).split('\n');
+      return [head('JSON · read-only · pretty-printed · ' + pretty.length + ' lines', false), ...lines(pretty), ...capNote(pretty.length)];
+    }
+    if (JSONL_EXT.has(ext)) {
+      const recs = []; let bad = 0; let n = 0;
+      all.forEach((t, i) => {
+        if (!t.trim()) return;
+        n++;
+        if (recs.length >= SRC_CAP) return;
+        try { recs.push(row(i + 1, JSON.stringify(JSON.parse(t), null, 2), false)); }
+        catch (e) { bad++; recs.push(row(i + 1, t + '\n⚠ line ' + (i + 1) + ' is not valid JSON: ' + ((e && e.message) || 'parse error'), true)); }
+      });
+      return [head('JSONL · read-only · ' + n + ' record' + (n === 1 ? '' : 's') + (bad ? ' · ' + bad + ' not valid JSON (marked)' : '') + (n > SRC_CAP ? ' · first ' + SRC_CAP + ' shown' : ''), bad > 0), ...recs];
+    }
+    return [head((ext || 'text') + ' · read-only · source', false), ...lines(all), ...capNote(all.length)];
+  });
+}
+
 export function mountDoc(host, tab) {
   if (!FIXTURE && extOfPath(tab.path) === 'pdf') { setChildren(host, [pdfBody(tab)]); return; }
   if (!FIXTURE && extOfPath(tab.path) === 'xlsx') { setChildren(host, [sheetBody(tab)]); return; }
   const raw = docText(tab);
   const text = state.docEdits[docKey(tab)] ?? raw;
-  const dm = state.docModes[tab.id] ?? 'view';
+  const nonMd = !FIXTURE && isSourcePath(tab.path);   // file-viewer-any-text: read-only, shown as source
+  const dm = ((tab.readonly || nonMd) && (state.docModes[tab.id] === 'edit' || state.docModes[tab.id] === 'diff')) ? 'view' : (state.docModes[tab.id] ?? 'view');
   const dirty = text !== raw;
   const err = saveErr.get(docKey(tab));
 
-  const modeBtns = ['view', 'raw', 'edit', 'diff'].map((mm) => el('button', {
+  // A file opened from the initiative's git files is evidence of what changed: it is read, never edited or saved here.
+  const readonly = !!tab.readonly || nonMd;
+  const modeBtns = ['view', 'raw', 'edit', 'diff'].filter((mm) => !(readonly && (mm === 'edit' || mm === 'diff'))).map((mm) => el('button', {
     onClick: () => setState((s) => ({ docModes: { ...s.docModes, [tab.id]: mm } })),
     style: 'font-family:var(--mono);font-size:10.5px;padding:4px 10px;min-height:26px;background:'
       + (dm === mm ? 'var(--secondary)' : 'transparent')
@@ -512,7 +570,7 @@ export function mountDoc(host, tab) {
    * clean file dirty for nothing is how a tool teaches you to ignore its dirty flag. */
   const norm = typeof window !== 'undefined' ? window.MdNormalize : null;
   const canNormalize = !!(norm && typeof norm.normalize === 'function')
-    && !isHtmlDoc(tab.path) && !isReference(tab.path) && !unread.has(docKey(tab));
+    && !isHtmlDoc(tab.path) && !isReference(tab.path) && !unread.has(docKey(tab)) && !nonMd;
   const normBtn = canNormalize ? el('button', {
     onClick: () => {
       const r = norm.normalize(text);
@@ -561,7 +619,7 @@ export function mountDoc(host, tab) {
     if (body.defaultValue !== text) body.defaultValue = text;
     if (body.value !== text) body.value = text;
   } else if (!FIXTURE && (extOfPath(tab.path) === 'csv' || extOfPath(tab.path) === 'tsv')) body = gridBody(tab, text);
-  else body = rendersAsPage(tab) ? htmlFrame(tab, text) : viewBody(tab, text);
+  else body = rendersAsPage(tab) ? htmlFrame(tab, text) : (nonMd && !unread.has(docKey(tab)) ? sourceBody(tab, text) : viewBody(tab, text));
 
   setChildren(host, [modeBar, body]);
   return host;