@polymorphism-tech/morph-spec 10.5.4 → 10.7.0

package/src/lib/view/feature-page.client.js

@@ -0,0 +1,116 @@
+const REFS = JSON.parse(document.getElementById('refs').textContent);
+const STORE = `morph-view:${document.body.dataset.key}`;
+const load = () => { try { return JSON.parse(localStorage.getItem(STORE)) ?? {}; } catch { return {}; } };
+const save = (v) => { try { localStorage.setItem(STORE, JSON.stringify(v)); } catch { /* the page works without it */ } };
+
+function jump() {
+  const id = decodeURIComponent(location.hash.slice(1));
+  const el = id && document.getElementById(id);
+  if (!el) return;
+  if (el.tagName === 'DETAILS') el.open = true;
+  el.closest('details')?.setAttribute('open', '');
+  clearFilter(el);
+  el.classList.remove('flash');
+  void el.offsetWidth;
+  el.classList.add('flash');
+}
+addEventListener('hashchange', jump);
+
+const links = [...document.querySelectorAll('.side a')];
+const sections = links.map((a) => document.querySelector(a.getAttribute('href'))).filter(Boolean);
+const spy = new IntersectionObserver((entries) => {
+  for (const e of entries) {
+    if (e.isIntersecting) links.forEach((a) => a.classList.toggle('on', a.getAttribute('href') === `#${e.target.id}`));
+  }
+}, { rootMargin: '-15% 0px -75% 0px' });
+sections.forEach((s) => spy.observe(s));
+
+const run = new IntersectionObserver((entries, o) => {
+  for (const e of entries) if (e.isIntersecting) { e.target.classList.add('run'); o.unobserve(e.target); }
+}, { threshold: 0.4 });
+document.querySelectorAll('.machine').forEach((m) => run.observe(m));
+
+const items = [...document.querySelectorAll('#cenarios .line > li')];
+const buttons = [...document.querySelectorAll('[data-filter]')];
+function applyFilter(key) {
+  items.forEach((li) => { li.hidden = key !== 'todos' && !li.dataset.tags.split(' ').includes(key); });
+  buttons.forEach((b) => b.setAttribute('aria-pressed', String(b.dataset.filter === key)));
+}
+function clearFilter(el) { if (el.hidden) applyFilter('todos'); }
+buttons.forEach((b) => b.addEventListener('click', () => {
+  applyFilter(b.dataset.filter);
+  if (b.dataset.jump !== undefined) document.getElementById('cenarios').scrollIntoView();
+}));
+
+const peek = document.getElementById('peek');
+function showPeek(a) {
+  const text = REFS[a.dataset.ref];
+  if (!text) return;
+  peek.textContent = text;
+  const r = a.getBoundingClientRect();
+  peek.style.left = `${Math.max(8, Math.min(r.left, innerWidth - 350))}px`;
+  peek.style.top = `${r.bottom + 6 + 90 > innerHeight ? r.top - 96 : r.bottom + 6}px`;
+  peek.classList.add('on');
+}
+const hidePeek = () => peek.classList.remove('on');
+document.querySelectorAll('a[data-ref]').forEach((a) => {
+  a.addEventListener('mouseenter', () => showPeek(a));
+  a.addEventListener('focus', () => showPeek(a));
+  a.addEventListener('mouseleave', hidePeek);
+  a.addEventListener('blur', hidePeek);
+});
+
+const state = load();
+const tray = document.getElementById('tray');
+const asks = [...document.querySelectorAll('[data-ask]')];
+function answer() {
+  const lines = [];
+  for (const li of asks) {
+    const id = li.dataset.ask;
+    const pressed = li.querySelector('.toggle')?.getAttribute('aria-pressed') === 'true';
+    const note = li.querySelector('.note')?.value.trim();
+    if (pressed || note) lines.push(`- ${li.dataset.verb} ${id}${note ? `: ${note}` : ''}`);
+  }
+  return lines;
+}
+function sync() {
+  const n = answer().length;
+  tray.classList.toggle('on', n > 0);
+  tray.querySelector('.count').textContent = `${n} ${n === 1 ? 'ajuste marcado' : 'ajustes marcados'}`;
+  save(state);
+}
+for (const li of asks) {
+  const id = li.dataset.ask;
+  const toggle = li.querySelector('.toggle');
+  const open = (on) => {
+    toggle.setAttribute('aria-pressed', String(on));
+    let note = li.querySelector('.note');
+    if (on && !note) {
+      note = document.createElement('textarea');
+      note.className = 'note';
+      note.setAttribute('aria-label', `O que mudar em ${id}`);
+      note.placeholder = 'O que você quer no lugar? Opcional.';
+      note.value = state[id]?.note ?? '';
+      note.addEventListener('input', () => { state[id] = { note: note.value }; sync(); });
+      li.append(note);
+    } else if (!on && note) note.remove();
+  };
+  toggle.addEventListener('click', () => {
+    const on = toggle.getAttribute('aria-pressed') !== 'true';
+    open(on);
+    if (on) { state[id] = { note: state[id]?.note ?? '' }; li.querySelector('.note').focus(); } else delete state[id];
+    sync();
+  });
+  if (state[id]) open(true);
+}
+tray.querySelector('.copy').addEventListener('click', async (e) => {
+  const text = `Ajustes em ${document.body.dataset.feature}:\n${answer().join('\n')}`;
+  try { await navigator.clipboard.writeText(text); e.target.textContent = 'Copiado'; } catch { prompt('Copie o texto', text); }
+  setTimeout(() => { e.target.textContent = 'Copiar resposta'; }, 1800);
+});
+tray.querySelector('.clear').addEventListener('click', () => {
+  for (const li of asks) if (li.querySelector('.toggle').getAttribute('aria-pressed') === 'true') li.querySelector('.toggle').click();
+});
+
+sync();
+jump();

package/src/lib/view/feature-page.css

@@ -0,0 +1,169 @@
+* { box-sizing:border-box; }
+html { scroll-behavior:smooth; scroll-padding-top:24px; }
+body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.6 var(--text); }
+a { color:var(--route); text-underline-offset:2px; }
+:focus-visible { outline:2px solid var(--route); outline-offset:2px; border-radius:3px; }
+code { font:.88em var(--code); background:color-mix(in srgb, var(--route) 10%, transparent); padding:.08em .32em; border-radius:4px; overflow-wrap:anywhere; }
+pre { background:var(--panel); border:1px solid var(--rule); border-radius:8px; padding:12px; overflow-x:auto; }
+pre code { background:none; padding:0; }
+h1, h2, h3 { font-family:var(--display); font-weight:600; line-height:1.15; margin:0; }
+button { font:inherit; color:inherit; cursor:pointer; }
+
+.top { padding:40px 24px 28px; max-width:1180px; margin:0 auto; }
+.kind { color:var(--faint); font-size:14px; margin:0 0 6px; }
+h1 { font-size:clamp(30px, 5.4vw, 54px); letter-spacing:-.01em; overflow-wrap:anywhere; }
+.ask { color:var(--dim); max-width:72ch; margin:10px 0 0; }
+
+.route { list-style:none; margin:30px 0 0; padding:0; display:flex; position:relative; }
+.route::before, .route::after { content:""; position:absolute; left:9px; right:9px; top:8px; height:4px; border-radius:2px; background:var(--rule); }
+.route::after { background:var(--route); right:auto; width:calc((100% - 18px) * var(--done)); transform-origin:left; animation:draw 1s cubic-bezier(.3,.7,.2,1) both; }
+@keyframes draw { from { transform:scaleX(0); } }
+.stop { flex:1; position:relative; z-index:1; font-size:14px; color:var(--faint); padding-top:30px; min-width:0; }
+.stop:last-child { flex:0 0 auto; text-align:right; }
+.stop::before { content:""; position:absolute; top:0; left:0; width:20px; height:20px; border-radius:50%; background:var(--paper); border:4px solid var(--rule); }
+.stop:last-child::before { left:auto; right:0; }
+.stop.done { color:var(--dim); } .stop.done::before { border-color:var(--route); background:var(--route); }
+.stop.now { color:var(--ink); font-weight:600; } .stop.now::before { border-color:var(--route); box-shadow:0 0 0 0 var(--route); animation:pulse 2.4s ease-out 1s 3; }
+@keyframes pulse { to { box-shadow:0 0 0 12px transparent; } }
+.stop small { display:block; font-weight:400; color:var(--faint); font-size:13px; }
+
+.shell { display:grid; grid-template-columns:176px minmax(0, 1fr); gap:40px; max-width:1180px; margin:0 auto; padding:0 24px 120px; align-items:start; }
+.side { position:sticky; top:16px; }
+.side a { display:block; padding:6px 0 6px 12px; color:var(--dim); text-decoration:none; font-size:15px; border-left:3px solid var(--rule); }
+.side a.on { color:var(--ink); font-weight:600; border-left-color:var(--route); }
+.side a b { float:right; font-family:var(--display); font-weight:600; background:var(--sign); color:var(--on-sign); border-radius:9px; padding:0 7px; font-size:13px; line-height:18px; margin-top:3px; }
+
+section { padding-top:44px; max-width:860px; }
+section:first-child { padding-top:0; }
+h2 { font-size:26px; margin-bottom:6px; }
+.sub { color:var(--dim); margin:0 0 18px; max-width:68ch; }
+h3 { font-size:17px; margin:26px 0 8px; }
+.prose p { margin:0 0 10px; max-width:72ch; }
+.prose ul { margin:0 0 10px; padding-left:20px; max-width:72ch; }
+.prose li { margin:4px 0; }
+.empty { color:var(--faint); }
+.scroll-x { overflow-x:auto; }
+table { border-collapse:collapse; width:100%; font-size:15px; }
+th { text-align:left; font-weight:600; color:var(--dim); border-bottom:2px solid var(--rule); padding:6px 12px 6px 0; }
+td { border-bottom:1px solid var(--rule); padding:8px 12px 8px 0; vertical-align:top; }
+
+.outcome { font-family:var(--display); font-size:clamp(22px, 3.2vw, 31px); line-height:1.25; margin:0 0 20px; max-width:30em; }
+.numbers { display:flex; flex-wrap:wrap; gap:12px 40px; margin:22px 0 28px; padding:0; list-style:none; }
+.numbers li { font-size:14px; color:var(--dim); max-width:9.5em; line-height:1.3; }
+.numbers a { color:inherit; text-decoration:none; display:block; }
+.numbers b { display:block; font:600 42px/1 var(--display); color:var(--ink); margin-bottom:4px; font-variant-numeric:tabular-nums; }
+.numbers .alert b { color:var(--bad); }
+
+.chart { margin:18px 0 0; }
+.chart h3 { margin:0 0 8px; font-size:15px; font-family:var(--text); color:var(--dim); font-weight:600; }
+.seg { display:flex; gap:2px; height:22px; }
+.seg button { flex:var(--n) 1 0; min-width:6px; border:0; padding:0; background:var(--c); transform-origin:left; animation:grow .7s .25s cubic-bezier(.3,.7,.2,1) both; }
+.seg button:first-child { border-radius:4px 0 0 4px; } .seg button:last-child { border-radius:0 4px 4px 0; }
+@keyframes grow { from { transform:scaleX(0); } }
+.legend { list-style:none; display:flex; flex-wrap:wrap; gap:4px 16px; margin:8px 0 0; padding:0; font-size:14px; color:var(--dim); }
+.legend i { display:inline-block; width:10px; height:10px; border-radius:2px; background:var(--c); margin-right:6px; }
+.bars { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
+.bars li { display:grid; grid-template-columns:7.5em 1fr 2em; gap:8px; align-items:center; font-size:14px; color:var(--dim); }
+.bars button { all:unset; cursor:pointer; display:contents; }
+.bars span.track { height:10px; }
+.bars span.fill { display:block; height:100%; width:calc(var(--share) * 100%); min-width:4px; border-radius:0 4px 4px 0; background:var(--route); transform-origin:left; animation:grow .7s .35s cubic-bezier(.3,.7,.2,1) both; }
+
+.sign { background:var(--sign); color:var(--on-sign); border-radius:6px; padding:20px 22px; margin-bottom:18px; }
+.sign h3 { margin:0 0 4px; font-size:21px; }
+.sign p { margin:0; max-width:66ch; }
+.sign.clear { background:transparent; color:var(--dim); border:2px solid var(--rule); padding:12px 16px; }
+.sign.clear h3 { font-size:17px; color:var(--ink); }
+.sign code { background:rgba(0,0,0,.09); }
+
+.asks { list-style:none; margin:0; padding:0; }
+.asks > li { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:4px 16px; padding:12px 0; border-bottom:1px solid var(--rule); scroll-margin-top:24px; border-radius:4px; }
+.asks p { margin:0; }
+.asks .tag { color:var(--faint); font-size:14px; }
+.toggle { background:transparent; border:1px solid var(--rule); border-radius:6px; padding:5px 12px; min-height:36px; font-size:14px; color:var(--dim); align-self:start; white-space:nowrap; }
+.toggle:hover { border-color:var(--route); color:var(--ink); }
+.toggle[aria-pressed="true"] { background:var(--bad); border-color:var(--bad); color:var(--paper); }
+.note { grid-column:1 / -1; width:100%; min-height:62px; font:inherit; font-size:15px; color:var(--ink); background:var(--panel); border:1px solid var(--rule); border-radius:6px; padding:8px; }
+
+.filters { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px; }
+.filters button { background:transparent; border:1px solid var(--rule); border-radius:6px; padding:3px 10px; min-height:32px; font-size:14px; color:var(--dim); }
+.filters button[aria-pressed="true"] { border-color:var(--route); color:var(--ink); font-weight:600; }
+
+.line { list-style:none; margin:0; padding:0 0 0 7px; }
+.line > li { position:relative; padding:0 0 22px 28px; border-left:3px solid var(--route); scroll-margin-top:24px; }
+.line > li:last-child { border-left-color:transparent; padding-bottom:0; }
+.line > li::before { content:""; position:absolute; left:-10.5px; top:3px; width:18px; height:18px; border-radius:50%; background:var(--paper); border:3px solid var(--route); }
+.line > li[data-state="feito"]::before, .line > li[data-state="provado"]::before { background:var(--ok); border-color:var(--ok); }
+.line > li[data-state="bloqueado"]::before, .line > li[data-state="falha"]::before { background:var(--bad); border-color:var(--bad); }
+.line .id { font:600 15px var(--display); color:var(--route); margin-right:6px; }
+.line p { margin:0; max-width:70ch; }
+.tags { display:flex; flex-wrap:wrap; gap:4px 12px; font-size:14px; color:var(--faint); margin-top:4px; }
+.tags .warn { color:var(--warn); font-weight:600; } .tags .bad { color:var(--bad); font-weight:600; } .tags .ok { color:var(--ok); font-weight:600; }
+.evidence { font-size:14px; color:var(--dim); margin-top:4px; }
+
+details.adr { border-left:3px solid var(--rule); padding:0 0 0 14px; margin-bottom:12px; scroll-margin-top:24px; }
+details.adr[open] { border-left-color:var(--route); }
+details.adr summary { cursor:pointer; padding:6px 0; font:600 17px/1.3 var(--display); }
+details.adr summary small { font:400 14px var(--text); color:var(--faint); margin-left:6px; }
+.fold { margin-top:12px; } .fold summary { cursor:pointer; color:var(--dim); padding:6px 0; }
+
+.matrix { font-size:14px; }
+.matrix th, .matrix td { padding:5px 8px; text-align:center; }
+.matrix th:first-child { text-align:left; white-space:nowrap; }
+.matrix td a { display:block; width:14px; height:14px; margin:auto; border-radius:50%; background:var(--route); }
+
+.diagram { background:var(--panel); border:1px solid var(--rule); border-radius:6px; padding:12px; overflow-x:auto; margin-bottom:14px; }
+.machine .state rect { fill:var(--paper); stroke:var(--route); stroke-width:2; }
+.machine .state text { fill:var(--ink); font:600 13px var(--text); }
+.machine .edge { fill:none; stroke:var(--faint); stroke-width:1.5; stroke-dasharray:6 5; }
+.machine.run .edge { animation:travel 1.1s linear 4; }
+@keyframes travel { to { stroke-dashoffset:-22; } }
+.machine .arrow-head { fill:var(--faint); }
+.machine .edge-label { fill:var(--dim); font:12px var(--text); paint-order:stroke; stroke:var(--panel); stroke-width:4px; }
+
+.gauges { display:flex; flex-wrap:wrap; gap:24px 44px; align-items:center; margin-bottom:16px; }
+.ring { width:112px; height:112px; transform:rotate(-90deg); }
+.ring circle { fill:none; stroke-width:10; }
+.ring .base { stroke:var(--rule); }
+.ring .part { stroke:var(--ok); stroke-dasharray:calc(var(--share) * 283) 283; animation:sweep .9s .2s ease-out both; }
+@keyframes sweep { from { stroke-dasharray:0 283; } }
+.gauge { display:flex; align-items:center; gap:14px; }
+.gauge b { display:block; font:600 28px/1 var(--display); }
+.status-list { list-style:none; margin:0; padding:0; font-size:15px; }
+.status-list li { padding:3px 0; }
+.status-list .ok { color:var(--ok); font-weight:600; } .status-list .bad { color:var(--bad); font-weight:600; } .status-list .wait { color:var(--faint); }
+
+.shots { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:14px; list-style:none; margin:0; padding:0; }
+.shots a { display:block; color:var(--ink); text-decoration:none; font-weight:600; font-size:15px; }
+.shots img { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top; border:1px solid var(--rule); border-radius:6px; margin-bottom:6px; background:var(--panel); }
+iframe.recap { width:100%; height:620px; border:1px solid var(--rule); border-radius:6px; background:var(--panel); }
+
+.flash { animation:flash 1.6s ease-out; }
+@keyframes flash { from { background:color-mix(in srgb, var(--sign) 55%, transparent); } }
+
+#peek { position:fixed; z-index:20; max-width:340px; background:var(--ink); color:var(--paper); font-size:14px; line-height:1.4; padding:8px 10px; border-radius:6px; pointer-events:none; opacity:0; transition:opacity .12s; }
+#peek.on { opacity:1; }
+
+#tray { position:fixed; left:0; right:0; bottom:0; z-index:15; background:var(--ink); color:var(--paper); padding:12px 24px; display:flex; gap:16px; align-items:center; justify-content:center; flex-wrap:wrap; transform:translateY(110%); visibility:hidden; transition:transform .25s ease-out, visibility .25s; }
+#tray.on { transform:none; visibility:visible; }
+#tray button { background:var(--sign); color:var(--on-sign); border:0; border-radius:6px; padding:8px 16px; font-weight:600; min-height:40px; }
+#tray .clear { background:transparent; color:var(--paper); border:1px solid currentColor; font-weight:400; }
+
+.source { color:var(--faint); font-size:14px; margin-top:48px; }
+
+@media (max-width:820px) {
+  .top { padding:24px 16px 18px; }
+  .shell { display:block; padding:0 16px 120px; }
+  .side { top:0; z-index:10; display:flex; gap:14px; overflow-x:auto; scrollbar-width:none; background:var(--paper); padding:8px 0; border-bottom:1px solid var(--rule); }
+  .side a { border-left:0; border-bottom:3px solid transparent; padding:4px 0; white-space:nowrap; min-height:32px; }
+  .side a.on { border-bottom-color:var(--route); }
+  .side a b { float:none; margin-left:6px; }
+  html { scroll-padding-top:64px; }
+  .stop { font-size:12px; } .stop small { display:none; }
+  .numbers { gap:12px 28px; } .numbers b { font-size:34px; }
+  iframe.recap { height:560px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  html { scroll-behavior:auto; }
+  *, *::before, *::after { animation:none !important; transition:none !important; }
+}
+@media print { .side, #tray, .toggle, .filters { display:none; } .shell { display:block; } }

package/src/lib/view/feature-view.js

@@ -0,0 +1,104 @@
+import { existsSync, readdirSync, readFileSync, writeFileSync } from 'fs';
+import { join } from 'path';
+import { FEATURE_VIEW_FILE } from '../../core/paths/output-schema.js';
+import { parsePlan } from '../plan/plan-parser.js';
+import { planHash } from '../plan/checks.js';
+import { reviewReportsFromDir } from '../review-reports.js';
+import { implementProgressFrom } from '../../../framework/hooks/shared/report-progress.js';
+import { changeSummary } from '../recap/recap.js';
+import { renderFeatureHtml } from './feature-html.js';
+
+const readText = (path) => { try { return readFileSync(path, 'utf8'); } catch { return null; } };
+const readJson = (path) => { try { return JSON.parse(readFileSync(path, 'utf8')); } catch { return null; } };
+const listDir = (path) => { try { return readdirSync(path); } catch { return []; } };
+
+const GATE_ASK = { plan: 'Plano', uiux: 'Design', review: 'Revisão' };
+
+function collectDesign(featureDir) {
+  const screens = (sub) => listDir(join(featureDir, '1-design', sub))
+    .filter((f) => f.endsWith('.html'))
+    .map((f) => {
+      const name = f.replace(/\.html$/, '');
+      const shot = `${name}-1280.png`;
+      return { name, kind: sub, href: `1-design/${sub}/${f}`, shot: existsSync(join(featureDir, '1-design', sub, shot)) ? `1-design/${sub}/${shot}` : null };
+    });
+  return [...screens('prototipos'), ...screens('opcoes')];
+}
+
+function stations({ gates, design, progress, reviews, archived }) {
+  const approved = (g) => gates[g]?.approved === true || gates[g] === true;
+  const hasReview = Object.values(reviews).some((r) => r.status !== 'missing');
+  const built = hasReview || (progress?.total > 0 && progress.done === progress.total);
+  const list = [
+    { id: 'plan', label: 'Plano', done: approved('plan') },
+    ...(design ? [{ id: 'uiux', label: 'Design', done: approved('uiux') }] : []),
+    { id: 'implement', label: 'Implementação', done: built, note: progress?.total ? `${progress.done} de ${progress.total}` : null },
+    { id: 'review', label: 'Revisão', done: approved('review') },
+    { id: 'ship', label: 'Entrega', done: archived },
+  ];
+  const now = list.findIndex((s) => !s.done);
+  return list.map((s, i) => ({ ...s, state: s.done ? 'done' : i === now ? 'now' : 'next' }));
+}
+
+function currentGate(fj) {
+  const pending = ['plan', 'uiux', 'review'].find((g) => fj.gateDecisions?.[g] && !(fj.approvalGates?.[g]?.approved === true));
+  if (!pending) return null;
+  const d = fj.gateDecisions[pending];
+  return { gate: pending, label: GATE_ASK[pending], pause: d.pause === true, resolver: d.resolver ?? null, reason: d.reason ?? null };
+}
+
+/** Everything the page shows, read from the feature folder; a missing file only drops its part. */
+export function collectFeatureView(featureDir, feature, { changes = null, archived = false } = {}) {
+  const fj = readJson(join(featureDir, 'feature.json')) ?? {};
+  const planText = readText(join(featureDir, '2-plan', 'plan.md'));
+  const plan = parsePlan(planText ?? '');
+  const recap = readJson(join(featureDir, 'recap.json'));
+  const reviews = reviewReportsFromDir(featureDir);
+  const progress = implementProgressFrom(readText(join(featureDir, '2-plan', 'checks.json')), readText(join(featureDir, '3-implement', 'report.md')));
+  const design = collectDesign(featureDir);
+  const hasDesign = design.length > 0 || fj.approvalGates?.uiux !== undefined || existsSync(join(featureDir, '1-design'));
+  const proved = new Map([
+    ...(recap?.scenarios ?? []).filter((c) => c.status).map((c) => [c.id, c]),
+    ...(reviews.verifier?.checks ?? []).map((c) => [c.id, c]),
+  ]);
+  const scenarios = plan.scenarios.map((c) => {
+    const row = progress?.checks.find((p) => p.id === c.id);
+    return { ...c, status: row?.status ?? 'pendente', evidence: row?.evidence ?? '', proved: proved.get(c.id)?.status ?? null, proof_note: proved.get(c.id)?.evidence ?? '' };
+  });
+  return {
+    feature,
+    description: fj.description ?? null,
+    workType: fj.workType ?? null,
+    plan: { ...plan, scenarios },
+    planHash: planText ? planHash(planText) : null,
+    gate: currentGate(fj),
+    gates: fj.approvalGates ?? {},
+    stations: stations({ gates: fj.approvalGates ?? {}, design: hasDesign, progress, reviews, archived: archived || fj.status === 'completed' }),
+    progress,
+    verification: fj.verification ?? null,
+    reviews,
+    critique: readText(join(featureDir, '2-plan', 'critica.md')),
+    design: archived ? [] : design,
+    changes,
+    recap,
+  };
+}
+
+/** Rewrites `feature.html` in place. Never throws: the page must not fail the command that refreshed it. */
+export function writeFeatureView(featureDir, feature, { cwd = null, archived = false, changes } = {}) {
+  try {
+    const stat = changes !== undefined ? changes : (cwd && changeSummary(cwd, { statOnly: true }));
+    const path = join(featureDir, FEATURE_VIEW_FILE);
+    writeFileSync(path, renderFeatureHtml(collectFeatureView(featureDir, feature, { changes: stat ?? null, archived })));
+    return { ok: true, path };
+  } catch (err) {
+    return { ok: false, reason: err.message };
+  }
+}
+
+/** The page exists once the plan passed `plan-check`; before that there is nothing to decide on. */
+export function refreshFeatureView(cwd, feature) {
+  const dir = join(cwd, '.morph', 'features', feature);
+  if (!existsSync(join(dir, '2-plan', 'checks.json'))) return null;
+  return writeFeatureView(dir, feature, { cwd });
+}

package/src/lib/view/flow-svg.js

@@ -0,0 +1,63 @@
+const esc = (s) => String(s ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
+
+const MIN_NODE_W = 132;
+const CHAR_W = 7.4;
+const NODE_H = 40;
+const GAP = 84;
+const LANE = 38;
+
+/** States in the order a reader meets them: breadth-first from the first transition's origin. */
+export function stateOrder(transitions) {
+  const order = [];
+  const seen = new Set();
+  const queue = transitions.length ? [transitions[0].from] : [];
+  const visit = (s) => { if (!seen.has(s)) { seen.add(s); queue.push(s); } };
+  if (queue.length) seen.add(queue[0]);
+  while (queue.length) {
+    const s = queue.shift();
+    order.push(s);
+    for (const t of transitions) if (t.from === s) visit(t.to);
+  }
+  for (const t of transitions) for (const s of [t.from, t.to]) if (!seen.has(s)) { seen.add(s); order.push(s); }
+  return order;
+}
+
+// One row of states; a forward transition arcs above, a backward one below, each in its own lane so
+// labels never stack; a self-transition loops over its node.
+export function stateMachineSvg(transitions, label = 'Máquina de estados', id = 'arrow') {
+  if (!transitions.length) return '';
+  const order = stateOrder(transitions);
+  const NODE_W = Math.max(MIN_NODE_W, Math.ceil(Math.max(...order.map((s) => s.length)) * CHAR_W) + 24);
+  const x = (s) => 24 + order.indexOf(s) * (NODE_W + GAP);
+  const span = (t) => Math.abs(order.indexOf(t.to) - order.indexOf(t.from));
+  const forward = transitions.filter((t) => order.indexOf(t.to) > order.indexOf(t.from)).sort((a, b) => span(a) - span(b));
+  const backward = transitions.filter((t) => order.indexOf(t.to) < order.indexOf(t.from)).sort((a, b) => span(a) - span(b));
+  const loops = transitions.filter((t) => t.to === t.from);
+  const top = 24 + (forward.length + (loops.length ? 1 : 0)) * LANE;
+  const height = top + NODE_H + 24 + backward.length * LANE;
+  const width = 48 + order.length * NODE_W + (order.length - 1) * GAP;
+  const mid = (s) => x(s) + NODE_W / 2;
+
+  const edge = (t, i, above) => {
+    const x1 = mid(t.from) + (above ? 18 : -18);
+    const x2 = mid(t.to) + (above ? -18 : 18);
+    const y0 = above ? top : top + NODE_H;
+    const y = above ? top - (i + 1) * LANE : top + NODE_H + (i + 1) * LANE;
+    const lx = (x1 + x2) / 2;
+    return `<path class="edge" d="M${x1} ${y0} C${x1} ${y} ${x2} ${y} ${x2} ${y0}" marker-end="url(#${id})"/>`
+      + `<text class="edge-label" x="${lx}" y="${y + (above ? 0 : 14)}" text-anchor="middle"><title>${esc(t.trigger)}</title>${esc(t.trigger)}</text>`;
+  };
+  const loop = (t) => {
+    const cx = mid(t.from);
+    return `<path class="edge" d="M${cx - 14} ${top} C${cx - 30} ${top - LANE} ${cx + 30} ${top - LANE} ${cx + 14} ${top}" marker-end="url(#${id})"/>`
+      + `<text class="edge-label" x="${cx}" y="${top - LANE + 4}" text-anchor="middle">${esc(t.trigger)}</text>`;
+  };
+
+  return `<svg class="machine" viewBox="0 0 ${width} ${height}" style="width:100%;min-width:${Math.round(width * 0.85)}px" role="img" aria-label="${esc(label)}: ${esc(order.join(', '))}">
+<defs><marker id="${id}" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M0 0L10 5L0 10z" class="arrow-head"/></marker></defs>
+${forward.map((t, i) => edge(t, i, true)).join('\n')}
+${backward.map((t, i) => edge(t, i, false)).join('\n')}
+${loops.map(loop).join('\n')}
+${order.map((s) => `<g class="state"><rect x="${x(s)}" y="${top}" width="${NODE_W}" height="${NODE_H}" rx="10"/><text x="${mid(s)}" y="${top + NODE_H / 2 + 5}" text-anchor="middle">${esc(s)}</text></g>`).join('\n')}
+</svg>`;
+}

package/src/lib/view/tokens.css

@@ -0,0 +1,18 @@
+:root {
+  color-scheme: light dark;
+  --paper:#eef2f0; --panel:#fbfcfb; --ink:#12282b; --dim:#3f5558; --faint:#5a6e70; --rule:#cfdad7;
+  --route:#0b6e75; --sign:#ffc629; --on-sign:#1c1a0a;
+  --ok:#1f7a4d; --warn:#935500; --bad:#b4232f;
+  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100; --s5:#e87ba4;
+  --display:"Bahnschrift","DIN Alternate","DIN Next","Avenir Next",system-ui,sans-serif;
+  --text:"Segoe UI Variable Text","Segoe UI",-apple-system,"Helvetica Neue",system-ui,sans-serif;
+  --code:"Cascadia Code",ui-monospace,Menlo,Consolas,monospace;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --paper:#0e1c1e; --panel:#152729; --ink:#e6efee; --dim:#adc1c0; --faint:#8ba1a2; --rule:#2a4144;
+    --route:#45c4c9;
+    --ok:#5cc28a; --warn:#e2a54b; --bad:#f07178;
+    --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#d55181;
+  }
+}

package/src/lib/plan/plan-html.js

@@ -1,125 +0,0 @@
-const esc = (s) => String(s ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
-
-const NODE_W = 132;
-const NODE_H = 40;
-const GAP = 84;
-const LANE = 38;
-
-/** States in the order a reader meets them: breadth-first from the first transition's origin. */
-export function stateOrder(transitions) {
-  const order = [];
-  const seen = new Set();
-  const queue = transitions.length ? [transitions[0].from] : [];
-  const visit = (s) => { if (!seen.has(s)) { seen.add(s); queue.push(s); } };
-  if (queue.length) seen.add(queue[0]);
-  while (queue.length) {
-    const s = queue.shift();
-    order.push(s);
-    for (const t of transitions) if (t.from === s) visit(t.to);
-  }
-  for (const t of transitions) for (const s of [t.from, t.to]) if (!seen.has(s)) { seen.add(s); order.push(s); }
-  return order;
-}
-
-// One row of states; a forward transition arcs above, a backward one below, each in its own lane so
-// labels never stack; a self-transition loops over its node.
-export function stateMachineSvg(transitions) {
-  if (!transitions.length) return '';
-  const order = stateOrder(transitions);
-  const x = (s) => 24 + order.indexOf(s) * (NODE_W + GAP);
-  const span = (t) => Math.abs(order.indexOf(t.to) - order.indexOf(t.from));
-  const forward = transitions.filter((t) => order.indexOf(t.to) > order.indexOf(t.from)).sort((a, b) => span(a) - span(b));
-  const backward = transitions.filter((t) => order.indexOf(t.to) < order.indexOf(t.from)).sort((a, b) => span(a) - span(b));
-  const loops = transitions.filter((t) => t.to === t.from);
-  const top = 24 + (forward.length + (loops.length ? 1 : 0)) * LANE;
-  const height = top + NODE_H + 24 + backward.length * LANE;
-  const width = 48 + order.length * NODE_W + (order.length - 1) * GAP;
-  const mid = (s) => x(s) + NODE_W / 2;
-
-  const edge = (t, i, above) => {
-    const x1 = mid(t.from) + (above ? 18 : -18);
-    const x2 = mid(t.to) + (above ? -18 : 18);
-    const y0 = above ? top : top + NODE_H;
-    const y = above ? top - (i + 1) * LANE : top + NODE_H + (i + 1) * LANE;
-    const lx = (x1 + x2) / 2;
-    return `<path class="edge" d="M${x1} ${y0} C${x1} ${y} ${x2} ${y} ${x2} ${y0}" marker-end="url(#arrow)"/>`
-      + `<text class="edge-label" x="${lx}" y="${y + (above ? 0 : 14)}" text-anchor="middle"><title>${esc(t.trigger)}</title>${esc(t.trigger)}</text>`;
-  };
-  const loop = (t) => {
-    const cx = mid(t.from);
-    return `<path class="edge" d="M${cx - 14} ${top} C${cx - 30} ${top - LANE} ${cx + 30} ${top - LANE} ${cx + 14} ${top}" marker-end="url(#arrow)"/>`
-      + `<text class="edge-label" x="${cx}" y="${top - LANE + 4}" text-anchor="middle">${esc(t.trigger)}</text>`;
-  };
-
-  return `<svg class="machine" viewBox="0 0 ${width} ${height}" style="width:100%;min-width:${Math.round(width * 0.6)}px" role="img" aria-label="Máquina de estados: ${esc(order.join(', '))}">
-<defs><marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M0 0L10 5L0 10z" class="arrow-head"/></marker></defs>
-${forward.map((t, i) => edge(t, i, true)).join('\n')}
-${backward.map((t, i) => edge(t, i, false)).join('\n')}
-${loops.map(loop).join('\n')}
-${order.map((s) => `<g class="state"><rect x="${x(s)}" y="${top}" width="${NODE_W}" height="${NODE_H}" rx="10"/><text x="${mid(s)}" y="${top + NODE_H / 2 + 5}" text-anchor="middle">${esc(s)}</text></g>`).join('\n')}
-</svg>`;
-}
-
-const RUNG_TONE = { 'migrar': 'warn', 'irreversível': 'bad', 'irreversivel': 'bad' };
-
-function scenarioCard(c) {
-  const chips = [
-    c.proof && `<span class="chip">prova: ${esc(c.proof)}</span>`,
-    c.risk && `<span class="chip">risco: ${esc(c.risk)}</span>`,
-    c.rung && `<span class="chip ${RUNG_TONE[c.rung.toLowerCase()] ?? ''}">degrau: ${esc(c.rung)}</span>`,
-  ].filter(Boolean).join('');
-  return `<li class="card"><div class="cid">${esc(c.id)}</div><div><p>${esc(c.text)}</p>${chips ? `<div class="chips">${chips}</div>` : ''}</div></li>`;
-}
-
-export function renderPlanHtml(feature, plan, { planHash = null } = {}) {
-  const defaults = plan.defaults?.items ?? [];
-  const transitions = plan.states?.transitions ?? [];
-  const section = (title, body) => `<section><h2>${esc(title)}</h2>${body}</section>`;
-  return `<!doctype html>
-<html lang="pt-BR">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>Plano — ${esc(feature)}</title>
-<style>
-:root { --bg:#f6f7f9; --card:#fff; --fg:#14171c; --dim:#4b5260; --faint:#7a8291; --hair:#dfe3ea; --ok:#2f7d4f; --warn:#a35f00; --bad:#b4232f; --accent:#2d5bd7; }
-@media (prefers-color-scheme: dark) { :root { --bg:#0f1115; --card:#171a21; --fg:#e8ebf0; --dim:#b3bac6; --faint:#7f8796; --hair:#2a2f3a; --ok:#5cc28a; --warn:#e2a54b; --bad:#f07178; --accent:#8fb0ff; } }
-* { box-sizing:border-box; }
-body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; }
-main { max-width:920px; margin:0 auto; padding:40px 16px 64px; }
-h1 { font-size:28px; margin:0 0 4px; letter-spacing:-.01em; }
-.meta { color:var(--faint); font-size:13px; margin:0 0 32px; }
-h2 { font-size:15px; margin:32px 0 12px; }
-ul.cards { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
-.card { display:grid; grid-template-columns:3rem minmax(0,1fr); gap:12px; background:var(--card); border:1px solid var(--hair); border-radius:12px; padding:14px 16px; }
-.card p { margin:0; }
-.cid { font:600 13px/1.6 ui-monospace, monospace; color:var(--accent); }
-.chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
-.chip { font-size:12px; color:var(--dim); border:1px solid var(--hair); border-radius:999px; padding:1px 9px; }
-.chip.warn { color:var(--warn); border-color:currentColor; }
-.chip.bad { color:var(--bad); border-color:currentColor; }
-ol.defaults { margin:0; padding-left:22px; color:var(--dim); }
-ol.defaults li { margin:4px 0; }
-.scroll { overflow-x:auto; background:var(--card); border:1px solid var(--hair); border-radius:12px; padding:12px; }
-.machine .state rect { fill:var(--bg); stroke:var(--accent); stroke-width:1.5; }
-.machine .state text { fill:var(--fg); font:600 13px system-ui, sans-serif; }
-.machine .edge { fill:none; stroke:var(--faint); stroke-width:1.5; }
-.machine .arrow-head { fill:var(--faint); }
-.machine .edge-label { fill:var(--dim); font:12px system-ui, sans-serif; paint-order:stroke; stroke:var(--card); stroke-width:4px; }
-.none { color:var(--faint); }
-</style>
-</head>
-<body>
-<main>
-<h1>${esc(feature)}</h1>
-<p class="meta">Visão do plano, só leitura — gerada pelo <code>morph-spec plan-check</code> a partir de 2-plan/plan.md${planHash ? ` (${esc(planHash.slice(0, 12))})` : ''}. Para mudar, edite o plan.md.</p>
-${section(`Cenários (${plan.scenarios.length})`, `<ul class="cards">${plan.scenarios.map(scenarioCard).join('')}</ul>`)}
-${transitions.length ? section('Estados', `<div class="scroll">${stateMachineSvg(transitions)}</div>`) : ''}
-${section('Padrões assumidos', defaults.length
-    ? `<ol class="defaults">${defaults.map((d) => `<li value="${d.n}">${esc(d.text)}</li>`).join('')}</ol><p class="meta">Para vetar um, responda "veta N" no gate.</p>`
-    : '<p class="none">Nenhum.</p>')}
-</main>
-</body>
-</html>
-`;
-}