@polymorphism-tech/morph-spec 10.6.0 → 10.7.1

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

@@ -0,0 +1,307 @@
+import { readFileSync } from 'fs';
+import { PROOF_KINDS, RISK_KINDS, REUSE_VERDICTS } from '../plan/plan-parser.js';
+import { renderRecapHtml } from '../recap/recap.js';
+import { stateMachineSvg } from './flow-svg.js';
+
+export const TOKENS_CSS = readFileSync(new URL('./tokens.css', import.meta.url), 'utf8');
+const PAGE_CSS = readFileSync(new URL('./feature-page.css', import.meta.url), 'utf8');
+const CLIENT_JS = readFileSync(new URL('./feature-page.client.js', import.meta.url), 'utf8');
+
+const esc = (s) => String(s ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
+const WORK_LABEL = { feature: 'Feature', bug: 'Correção de bug', chore: 'Manutenção', hotfix: 'Hotfix' };
+const STATUS_LABEL = { pendente: 'Pendente', feito: 'Feito', bloqueado: 'Bloqueado' };
+const RUNG_TONE = { migrar: 'warn', 'irreversível': 'bad', irreversivel: 'bad' };
+const NONE_RE = /^(nenhum|nenhuma)\.?$/i;
+
+function linkifier(plan) {
+  const known = new Set([...plan.scenarios.map((c) => c.id), ...plan.adrs.map((a) => a.id)]);
+  const defaults = new Set(plan.defaults.items.map((d) => d.n));
+  const ref = (id, label) => `<a href="#${id}" data-ref="${id}">${label}</a>`;
+  return (escaped) => escaped
+    .replace(/\b(C\d+|ADR-\d+)\b/g, (m, id) => (known.has(id) ? ref(id, m) : m))
+    .replace(/\b([Pp]adrão) (\d+)\b/g, (m, word, n) => (defaults.has(Number(n)) ? ref(`P${n}`, `${word} ${n}`) : m));
+}
+
+function inline(text, link) {
+  return String(text).split(/(`[^`]+`)/).map((part) => {
+    if (/^`[^`]+`$/.test(part)) return `<code>${esc(part.slice(1, -1))}</code>`;
+    return link(esc(part)).replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+  }).join('');
+}
+
+function blocks(markdown, link) {
+  const text = String(markdown ?? '').replace(/<!--[\s\S]*?-->/g, '');
+  const out = [];
+  let para = [];
+  let list = null;
+  let table = null;
+  let fence = null;
+  const closePara = () => { if (para.length) out.push(`<p>${inline(para.join(' '), link)}</p>`); para = []; };
+  const closeList = () => { if (list) out.push(`<ul>${list.map((i) => `<li>${inline(i, link)}</li>`).join('')}</ul>`); list = null; };
+  const closeTable = () => {
+    if (!table) return;
+    const [head, ...rows] = table;
+    const cells = (row, tag) => row.map((c) => `<${tag}>${inline(c, link)}</${tag}>`).join('');
+    out.push(`<div class="scroll-x"><table><thead><tr>${cells(head, 'th')}</tr></thead><tbody>${rows.map((r) => `<tr>${cells(r, 'td')}</tr>`).join('')}</tbody></table></div>`);
+    table = null;
+  };
+  const closeAll = () => { closePara(); closeList(); closeTable(); };
+  for (const line of text.split(/\r?\n/)) {
+    if (fence) {
+      if (/^\s*```/.test(line)) { out.push(`<pre><code>${esc(fence.join('\n'))}</code></pre>`); fence = null; } else fence.push(line);
+      continue;
+    }
+    if (/^\s*```/.test(line)) { closeAll(); fence = []; continue; }
+    if (!line.trim()) { closeAll(); continue; }
+    if (/^\s*\|/.test(line)) {
+      closePara(); closeList();
+      if (/^\s*\|[\s:|-]+\|?\s*$/.test(line)) continue;
+      (table ??= []).push(line.trim().replace(/^\||\|$/g, '').split('|').map((c) => c.trim()));
+      continue;
+    }
+    closeTable();
+    const bullet = /^\s*[-*]\s+(.*)$/.exec(line);
+    if (bullet) { closePara(); (list ??= []).push(bullet[1]); continue; }
+    if (list && /^\s+\S/.test(line)) { list[list.length - 1] += ` ${line.trim()}`; continue; }
+    closeList();
+    const heading = /^#{1,6}\s+(.*)$/.exec(line);
+    if (heading) { closePara(); out.push(`<h3>${inline(heading[1], link)}</h3>`); continue; }
+    para.push(line.trim());
+  }
+  if (fence) out.push(`<pre><code>${esc(fence.join('\n'))}</code></pre>`);
+  closeAll();
+  return out.join('');
+}
+
+export function splitProblem(text) {
+  const m = /^\s*\**\s*Resultado buscado\s*:\s*\**\s*(.+)$/im.exec(text ?? '');
+  const outcome = m ? m[1].replace(/\*\*/g, '').trim() : null;
+  return { outcome, problem: m ? text.replace(m[0], '').trim() : text ?? '' };
+}
+
+const bulletsOf = (text) => String(text ?? '').replace(/<!--[\s\S]*?-->/g, '').split(/\r?\n/)
+  .map((l) => /^\s*[-*]\s+(.+)$/.exec(l)?.[1]).filter((l) => l && !NONE_RE.test(l.trim()));
+
+const conflictsOf = (plan) => {
+  const text = plan.conflicts?.text?.replace(/<!--[\s\S]*?-->/g, '').trim();
+  return text && !NONE_RE.test(text) ? text : null;
+};
+
+export function pendingAsks(view) {
+  const { plan } = view;
+  const asks = [];
+  for (const c of plan.scenarios) {
+    if (c.rung && c.rung.toLowerCase() !== 'refazer') asks.push({ id: c.id, verb: 'Revisar', action: 'Pedir ajuste', anchor: `ask-${c.id}`, text: `Não se desfaz com revert (degrau: ${c.rung}). ${c.text}`, tag: 'Degrau' });
+    if (c.status === 'bloqueado') asks.push({ id: c.id, verb: 'Destravar', action: 'Decidir', anchor: `ask-${c.id}-b`, text: `Bloqueado na implementação. ${c.evidence || c.text}`, tag: 'Bloqueio' });
+  }
+  bulletsOf(plan.text.assumptions).forEach((text, i) => asks.push({ id: `suposição ${i + 1}`, verb: 'Corrigir', action: 'Corrigir', anchor: `S${i + 1}`, text, tag: 'Suposição sem prova' }));
+  for (const d of plan.defaults.items) asks.push({ id: `padrão ${d.n}`, verb: 'Vetar', action: 'Vetar', anchor: `P${d.n}`, text: d.text, tag: `Padrão ${d.n}` });
+  return asks;
+}
+
+function askRow(a, link) {
+  return `<li id="${esc(a.anchor)}" data-ask="${esc(a.id)}" data-verb="${esc(a.verb)}"><div><p>${inline(a.text, link)}</p><span class="tag">${esc(a.tag)}</span></div><button type="button" class="toggle" aria-pressed="false">${esc(a.action)}</button></li>`;
+}
+
+function segmented(title, entries, filterable = true) {
+  const used = entries.filter((e) => e.n > 0);
+  if (!used.length) return '';
+  const total = used.reduce((sum, e) => sum + e.n, 0);
+  const attrs = (e) => (filterable ? `data-filter="${esc(e.key)}" data-jump` : 'disabled');
+  return `<div class="chart"><h3>${esc(title)}</h3><div class="seg" role="img" aria-label="${esc(used.map((e) => `${e.label}: ${e.n}`).join(', '))}">${used.map((e) => `<button type="button" ${attrs(e)} style="--n:${e.n};--c:var(--s${e.slot})" title="${esc(e.label)}: ${e.n} de ${total}" aria-label="${esc(e.label)}: ${e.n}"></button>`).join('')}</div><ul class="legend">${used.map((e) => `<li><i style="--c:var(--s${e.slot})"></i>${esc(e.label)} ${e.n}</li>`).join('')}</ul></div>`;
+}
+
+function riskBars(scenarios) {
+  const rows = RISK_KINDS.map((r) => ({ r, n: scenarios.filter((c) => c.risk?.toLowerCase() === r).length })).filter((x) => x.n);
+  if (!rows.length) return '';
+  const max = Math.max(...rows.map((x) => x.n));
+  return `<div class="chart"><h3>Risco que os cenários protegem</h3><ul class="bars">${rows.map((x) => `<li><button type="button" data-filter="${esc(x.r)}" data-jump title="Ver cenários de ${esc(x.r)}"><span>${esc(x.r)}</span><span class="track"><span class="fill" style="--share:${x.n / max}"></span></span><span>${x.n}</span></button></li>`).join('')}</ul></div>`;
+}
+
+function panorama(view, asks, link) {
+  const { plan } = view;
+  const { outcome, problem } = splitProblem(plan.text.problem);
+  const rungs = plan.scenarios.filter((c) => c.rung && c.rung.toLowerCase() !== 'refazer').length;
+  const proofs = PROOF_KINDS.map((k, i) => ({ key: k, label: k, slot: i + 1, n: plan.scenarios.filter((c) => c.proof?.toLowerCase() === k).length }));
+  const reuse = REUSE_VERDICTS.map((v, i) => ({ key: v, label: v.toLowerCase(), slot: i + 1, n: plan.reuse.filter((r) => r.verdict === v).length }));
+  const num = (href, n, label, alert = false) => `<li${alert ? ' class="alert"' : ''}><a href="${href}"><b>${n}</b>${esc(label)}</a></li>`;
+  return `<section id="panorama">
+${outcome ? `<p class="outcome">${inline(outcome, link)}</p>` : ''}
+<ul class="numbers">
+${num('#cenarios', plan.scenarios.length, plan.scenarios.length === 1 ? 'cenário define o pronto' : 'cenários definem o pronto')}
+${num('#decisoes', plan.adrs.length, plan.adrs.length === 1 ? 'decisão registrada' : 'decisões registradas')}
+${num('#decidir', asks.length, asks.length === 1 ? 'ponto para você olhar' : 'pontos para você olhar')}
+${rungs ? num('#decidir', rungs, 'sem volta por revert', true) : ''}
+</ul>
+${problem ? `<details class="fold" open><summary>O problema hoje</summary><div class="prose">${blocks(problem, link)}</div></details>` : ''}
+${segmented('Como cada cenário será provado', proofs)}
+${riskBars(plan.scenarios)}
+${segmented('Reaproveitar ou criar', reuse, false)}
+</section>`;
+}
+
+function gateSign(view) {
+  const g = view.gate;
+  if (g?.pause && g.resolver !== 'session') {
+    return `<div class="sign"><h3>O ${esc(g.label.toLowerCase())} espera sua decisão</h3><p>${inline(g.reason ?? 'Leia os pontos abaixo e responda no terminal.', (s) => s)}</p></div>`;
+  }
+  const approved = Object.values(view.gates).filter((x) => x === true || x?.approved === true).length;
+  return `<div class="sign clear"><h3>${approved ? 'Nenhuma decisão parada' : 'Gate ainda não chamado'}</h3><p>Você pode vetar qualquer padrão abaixo a qualquer momento.</p></div>`;
+}
+
+function decide(view, asks, link) {
+  const conflicts = conflictsOf(view.plan);
+  return `<section id="decidir"><h2>O que precisa de você</h2><p class="sub">Marque o que quer mudar. O que ficar sem marca está aceito. A resposta pronta aparece no rodapé para colar no terminal.</p>
+${gateSign(view)}
+${asks.length ? `<ul class="asks">${asks.map((a) => askRow(a, link)).join('')}</ul>` : '<p class="empty">Nenhum ponto em aberto neste plano.</p>'}
+${conflicts ? `<h3>Conflitos com decisões anteriores</h3><div class="prose">${blocks(conflicts, link)}</div>` : ''}
+${view.critique ? `<details class="fold"><summary>Ler a crítica independente do plano</summary><div class="prose">${blocks(view.critique, link)}</div></details>` : ''}
+</section>`;
+}
+
+function scenarioItem(c, cites, link) {
+  const state = c.proved === 'PROVADO' ? 'provado' : c.proved === 'FALHA' ? 'falha' : c.status;
+  const label = c.proved ?? STATUS_LABEL[c.status];
+  const tone = c.proved === 'PROVADO' || c.status === 'feito' ? 'ok' : c.proved === 'FALHA' || c.status === 'bloqueado' ? 'bad' : '';
+  const tags = [c.proof, c.risk, c.status, c.rung].filter(Boolean).map((t) => String(t).toLowerCase());
+  const rung = c.rung && c.rung.toLowerCase() !== 'refazer' ? `<span class="${RUNG_TONE[c.rung.toLowerCase()] ?? ''}">Degrau: ${esc(c.rung)}</span>` : '';
+  const adrs = cites.length ? `<span>${cites.map((id) => `<a href="#${id}" data-ref="${id}">${id}</a>`).join(', ')}</span>` : '';
+  const evidence = c.proof_note || c.evidence;
+  return `<li id="${esc(c.id)}" data-state="${state}" data-tags="${esc(tags.join(' '))}"><p><span class="id">${esc(c.id)}</span>${inline(c.text, link)}</p><div class="tags"><span class="${tone}">${esc(label)}</span>${c.proof ? `<span>Prova: ${esc(c.proof)}</span>` : ''}${c.risk ? `<span>Risco: ${esc(c.risk)}</span>` : ''}${rung}${adrs}</div>${evidence ? `<p class="evidence">${inline(evidence, link)}</p>` : ''}</li>`;
+}
+
+function scenariosSection(view, citesOf, link) {
+  const { scenarios } = view.plan;
+  const keys = (list) => [...new Set(list.filter(Boolean).map((k) => k.toLowerCase()))];
+  const filters = ['todos', ...keys(scenarios.map((c) => c.proof)), ...keys(scenarios.map((c) => c.risk)), ...keys(scenarios.map((c) => c.status))];
+  return `<section id="cenarios"><h2>O que vai estar pronto</h2><p class="sub">Cada ponto da linha é um comportamento que o verificador executa antes da entrega.</p>
+<div class="filters" role="group" aria-label="Filtrar cenários">${filters.map((f, i) => `<button type="button" data-filter="${esc(f)}" aria-pressed="${i === 0}">${esc(f)}</button>`).join('')}</div>
+<ol class="line">${scenarios.map((c) => scenarioItem(c, citesOf(c.id), link)).join('')}</ol></section>`;
+}
+
+const adrBody = (a) => a.body.replace(/^\s*\*\*Alcance:\*\*.*$/im, '').trim();
+
+function matrix(view, cited) {
+  const adrs = view.plan.adrs.filter((a) => cited.get(a.id).length);
+  if (!adrs.length) return '';
+  const ids = view.plan.scenarios.map((c) => c.id);
+  return `<h3>Qual decisão sustenta qual cenário</h3><div class="scroll-x"><table class="matrix"><thead><tr><th></th>${ids.map((id) => `<th><a href="#${id}" data-ref="${id}">${id}</a></th>`).join('')}</tr></thead><tbody>${adrs.map((a) => `<tr><th><a href="#${a.id}" data-ref="${a.id}">${a.id}</a></th>${ids.map((id) => `<td>${cited.get(a.id).includes(id) ? `<a href="#${id}" aria-label="${a.id} sustenta ${id}"></a>` : ''}</td>`).join('')}</tr>`).join('')}</tbody></table></div>`;
+}
+
+function decisions(view, cited, link) {
+  const { adrs } = view.plan;
+  return `<section id="decisoes"><h2>Decisões</h2><p class="sub">Abra uma decisão para ver o motivo. Os links levam aos cenários que dependem dela.</p>
+${adrs.length ? adrs.map((a) => `<details class="adr" id="${esc(a.id)}"><summary>${esc(a.id)}: ${esc(a.title)}${a.scope ? `<small>vale para ${a.scope === 'projeto' ? 'o projeto' : 'esta feature'}</small>` : ''}</summary><div class="prose">${blocks(adrBody(a), link)}</div></details>`).join('') : '<p class="empty">Este plano não registrou decisões de arquitetura.</p>'}
+${matrix(view, cited)}</section>`;
+}
+
+function howItWorks(view, link) {
+  const { plan } = view;
+  const flow = plan.flow?.transitions ?? [];
+  const states = plan.states?.transitions ?? [];
+  const reuse = plan.reuse.length ? `<h3>O que aproveita e o que nasce</h3><div class="scroll-x"><table><thead><tr><th>Conceito</th><th>Veredito</th><th>Onde</th></tr></thead><tbody>${plan.reuse.map((r) => `<tr><td>${inline(r.concept, link)}</td><td>${esc(r.verdict.toLowerCase())}</td><td>${inline(r.target, link)}${r.why ? `<br><small>${inline(r.why, link)}</small>` : ''}</td></tr>`).join('')}</tbody></table></div>` : '';
+  const out = plan.text.outOfScope;
+  return `<section id="como"><h2>Como funciona</h2>
+${flow.length ? `<h3>Fluxo</h3><div class="diagram">${stateMachineSvg(flow, 'Fluxo', 'flow')}</div>` : ''}
+${states.length ? `<h3>Estados</h3><div class="diagram">${stateMachineSvg(states, 'Máquina de estados', 'states')}</div>` : ''}
+${plan.text.architecture ? `<h3>Arquitetura</h3><div class="prose">${blocks(plan.text.architecture, link)}</div>` : ''}
+${reuse}
+${out ? `<h3>Fora de escopo</h3><div class="prose">${blocks(out, link)}</div>` : ''}
+${plan.text.contract ? `<details class="fold"><summary>Contrato de implementação</summary><div class="prose">${blocks(plan.text.contract, link)}</div></details>` : ''}
+${plan.errata ? `<h3>Errata</h3><div class="prose">${blocks(plan.errata, link)}</div>` : ''}
+</section>`;
+}
+
+const REVIEW_LABEL = { verifier: 'Verificador', reviewer: 'Revisor', security: 'Segurança' };
+
+function execution(view, link) {
+  const { progress, verification, reviews, design, changes } = view;
+  const started = progress?.done > 0 || progress?.blocked > 0 || verification || Object.values(reviews).some((r) => r.status !== 'missing');
+  if (!started && !design.length) return '';
+  const share = progress?.total ? progress.done / progress.total : 0;
+  const ring = progress?.total ? `<div class="gauge"><svg class="ring" viewBox="0 0 112 112" role="img" aria-label="${progress.done} de ${progress.total} cenários feitos"><circle class="base" cx="56" cy="56" r="45"/><circle class="part" cx="56" cy="56" r="45" style="--share:${share}"/></svg><div><b>${progress.done} de ${progress.total}</b>cenários feitos${progress.blocked ? `, ${progress.blocked} bloqueado${progress.blocked > 1 ? 's' : ''}` : ''}</div></div>` : '';
+  const stat = changes?.stat ? `<div class="gauge"><div><b>${changes.stat.files}</b>arquivos alterados, +${changes.stat.added} e −${changes.stat.removed} linhas</div></div>` : '';
+  const rows = [];
+  if (verification) {
+    const ok = verification.status === 'pass';
+    rows.push(`<li>Verify: <span class="${ok ? 'ok' : 'bad'}">${ok ? 'passou' : 'falhou'}</span>${verification.sha ? ` em <code>${esc(String(verification.sha).slice(0, 8))}</code>` : ''}</li>`);
+  }
+  for (const [role, r] of Object.entries(reviews)) {
+    if (r.status === 'missing') continue;
+    const tone = r.verdict === 'SHIP' ? 'ok' : r.verdict === 'FIX' ? 'bad' : 'wait';
+    rows.push(`<li>${REVIEW_LABEL[role]}: <span class="${tone}">${esc(r.verdict ?? 'em andamento')}</span>${r.blockers?.length ? `, ${r.blockers.length} bloqueador${r.blockers.length > 1 ? 'es' : ''}` : ''}</li>`);
+  }
+  const blockers = Object.values(reviews).flatMap((r) => r.blockers ?? []);
+  return `<section id="execucao"><h2>Execução e provas</h2>
+<div class="gauges">${ring}${stat}${rows.length ? `<ul class="status-list">${rows.join('')}</ul>` : ''}</div>
+${blockers.length ? `<h3>Bloqueadores da revisão</h3><div class="prose"><ul>${blockers.map((b) => `<li>${inline(`${b.id}: ${b.evidence || b.where}`, link)}</li>`).join('')}</ul></div>` : ''}
+${design.length ? `<h3>Telas</h3><ul class="shots">${design.map((d) => `<li><a href="${esc(d.href)}">${d.shot ? `<img src="${esc(d.shot)}" alt="" loading="lazy">` : ''}${esc(d.name)}${d.kind === 'opcoes' ? ' (opções)' : ''}</a></li>`).join('')}</ul>` : ''}
+</section>`;
+}
+
+function recapSection(view) {
+  if (!view.recap) return '';
+  return `<section id="recap"><h2>A história da feature</h2><p class="sub">Toque para ouvir o que foi feito, cena por cena.</p><iframe class="recap" title="Recap narrado" loading="lazy" srcdoc="${esc(renderRecapHtml(view.recap))}"></iframe></section>`;
+}
+
+function refsOf(plan) {
+  const refs = {};
+  for (const c of plan.scenarios) refs[c.id] = c.text.replace(/`/g, '');
+  for (const a of plan.adrs) refs[a.id] = a.title;
+  for (const d of plan.defaults.items) refs[`P${d.n}`] = d.text.replace(/`/g, '');
+  return JSON.stringify(refs).replace(/</g, '\\u003c');
+}
+
+export function renderFeatureHtml(view) {
+  const { plan } = view;
+  const link = linkifier(plan);
+  const asks = pendingAsks(view);
+  const ids = plan.scenarios.map((c) => c.id);
+  const cited = new Map(plan.adrs.map((a) => [a.id, ids.filter((id) => new RegExp(`\\b${id}\\b`).test(a.body))]));
+  const citesOf = (id) => plan.adrs.filter((a) => cited.get(a.id).includes(id)).map((a) => a.id);
+  const done = view.stations.filter((s) => s.done).length;
+  const exec = execution(view, link);
+  const recap = recapSection(view);
+  const nav = [
+    ['panorama', 'Panorama'], ['decidir', 'Decidir', asks.length], ['cenarios', 'Cenários'], ['decisoes', 'Decisões'], ['como', 'Como funciona'],
+    ...(exec ? [['execucao', 'Execução']] : []), ...(recap ? [['recap', 'Recap']] : []),
+  ];
+  const key = `${view.feature}:${(view.planHash ?? '').slice(0, 12)}`;
+  return `<!doctype html>
+<html lang="pt-BR">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${esc(view.feature)}</title>
+<style>
+${TOKENS_CSS}${PAGE_CSS}</style>
+</head>
+<body data-key="${esc(key)}" data-feature="${esc(view.feature)}">
+<header class="top">
+<p class="kind">${esc(WORK_LABEL[view.workType] ?? 'Feature')}</p>
+<h1>${esc(view.feature)}</h1>
+${view.description ? `<p class="ask">${esc(view.description)}</p>` : ''}
+<ol class="route" style="--done:${Math.min(1, done / Math.max(1, view.stations.length - 1)).toFixed(3)}">${view.stations.map((s) => `<li class="stop ${s.state}"${s.state === 'now' ? ' aria-current="step"' : ''}>${esc(s.label)}${s.note ? `<small>${esc(s.note)}</small>` : ''}</li>`).join('')}</ol>
+</header>
+<div class="shell">
+<nav class="side" aria-label="Seções">${nav.map(([id, label, badge]) => `<a href="#${id}">${esc(label)}${badge ? `<b>${badge}</b>` : ''}</a>`).join('')}</nav>
+<main>
+${panorama(view, asks, link)}
+${decide(view, asks, link)}
+${scenariosSection(view, citesOf, link)}
+${decisions(view, cited, link)}
+${howItWorks(view, link)}
+${exec}
+${recap}
+<p class="source">Gerada pelo morph-spec a partir de plan.md${view.planHash ? ` (${esc(view.planHash.slice(0, 12))})` : ''} e dos relatórios da feature. Atualize a aba para ver o estado mais recente. Para mudar o plano, edite o plan.md.</p>
+</main>
+</div>
+<div id="peek" role="tooltip"></div>
+<div id="tray" role="region" aria-label="Sua resposta"><span class="count"></span><button type="button" class="copy">Copiar resposta</button><button type="button" class="clear">Limpar</button></div>
+<script type="application/json" id="refs">${refsOf(plan)}</script>
+<script>
+${CLIENT_JS}</script>
+</body>
+</html>
+`;
+}

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; } }