@polymorphism-tech/morph-spec 10.6.0 → 10.7.1

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