@polymorphism-tech/morph-spec 9.8.0 → 10.0.0

package/src/dashboard/app/components/SessionMap.jsx

@@ -0,0 +1,77 @@
+import { clock, timeAgo } from '../lib/format.js';
+
+const MARK = {
+  verify: { label: 'verify', color: (m) => (m.status === 'fail' ? 'var(--color-bad)' : 'var(--color-ok)') },
+  failure: { label: 'falha', color: () => 'var(--color-bad)' },
+  gate: { label: 'gate', color: () => 'var(--color-fg)' },
+  dispatch: { label: 'sub-agent', color: () => 'var(--color-phase-uiux)' },
+  handback: { label: 'sub-agent', color: () => 'var(--color-phase-uiux)' },
+  prompt: { label: 'você', color: () => 'var(--color-dim)' },
+  question: { label: 'você', color: () => 'var(--color-dim)' },
+};
+const LEGEND = [
+  ['verify verde', 'var(--color-ok)'], ['verify vermelho ou falha', 'var(--color-bad)'],
+  ['gate', 'var(--color-fg)'], ['sub-agent', 'var(--color-phase-uiux)'], ['você', 'var(--color-dim)'],
+];
+
+function Strip({ session }) {
+  const start = Date.parse(session.start);
+  const span = Math.max(1, Date.parse(session.end) - start);
+  return (
+    <div className="relative h-6" role="img"
+      aria-label={`${session.marks.length} marcos entre ${clock(session.start)} e ${clock(session.end)}`}>
+      <div className="absolute inset-x-0 top-1/2 h-px -translate-y-1/2 bg-[var(--color-hair-strong)]" />
+      {session.marks.map((m, i) => {
+        const at = ((Date.parse(m.ts) - start) / span) * 100;
+        return (
+          <span key={`${m.ts}:${i}`} title={`${clock(m.ts)} · ${m.title}`}
+            className="absolute top-1/2 h-2.5 w-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full ring-2 ring-[var(--color-core)]"
+            style={{ left: `${at}%`, background: (MARK[m.kind] ?? MARK.gate).color(m) }} />
+        );
+      })}
+    </div>
+  );
+}
+
+export default function SessionMap({ session, now = Date.now() }) {
+  if (session === undefined) return <p className="text-sm text-[var(--color-faint)]">Lendo a telemetria…</p>;
+  if (!session) return <p className="text-sm text-[var(--color-faint)]">Nenhuma ação registrada para esta feature ainda.</p>;
+  return (
+    <div className="space-y-4">
+      <p className="text-sm text-[var(--color-dim)]">
+        Última sessão: <span className="text-[var(--color-fg)]">{clock(session.start)}–{clock(session.end)}</span>,
+        {' '}{timeAgo(session.end, now)} · {session.actions} ações
+      </p>
+      <div>
+        <Strip session={session} />
+        <div className="mt-1 flex justify-between font-mono text-[11px] text-[var(--color-faint)]">
+          <span>{clock(session.start)}</span><span>{clock(session.end)}</span>
+        </div>
+      </div>
+      <div className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-[var(--color-dim)]" aria-hidden="true">
+        {LEGEND.map(([label, color]) => (
+          <span key={label} className="flex items-center gap-1.5"><span className="h-2 w-2 rounded-full" style={{ background: color }} />{label}</span>
+        ))}
+      </div>
+      {session.lastFailure && (
+        <p className="text-sm text-[var(--color-bad)]">
+          Parou em: {session.lastFailure.title}, {clock(session.lastFailure.ts)}
+          {session.lastFailure.detail && <span className="mt-0.5 block truncate font-mono text-xs text-[var(--color-dim)]">{session.lastFailure.detail}</span>}
+        </p>
+      )}
+      {session.files.length > 0 && (
+        <div>
+          <p className="mb-1.5 text-xs text-[var(--color-faint)]">Mexeu mais em</p>
+          <ul className="space-y-1">
+            {session.files.map((f) => (
+              <li key={f.path} className="flex items-baseline justify-between gap-3 text-sm">
+                <span className="min-w-0 truncate font-mono text-xs text-[var(--color-fg)]" title={f.path}>{f.path}</span>
+                <span className="shrink-0 tabular-nums text-xs text-[var(--color-dim)]">{f.edits}×</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/dashboard/app/pages/Activity.jsx

@@ -1,5 +1,6 @@
 import { useParams } from 'react-router-dom';
 import ActivityFeed from '../components/ActivityFeed.jsx';
+import GatePauses from '../components/GatePauses.jsx';
 import { useProjects } from '../lib/project.js';
 
 export default function Activity() {
@@ -16,6 +17,9 @@ export default function Activity() {
           os sub-agents despachados, os verifies e os gates. Atualiza sozinho enquanto ele trabalha.
         </p>
       </header>
+      <div className="rise-2 bezel mb-6">
+        <div className="bezel-core px-5 py-5"><GatePauses project={project} /></div>
+      </div>
       <div className="rise-2 bezel">
         <div className="bezel-core px-5 py-5"><ActivityFeed project={project} showFeature /></div>
       </div>

package/src/dashboard/app/pages/AgentMap.jsx

@@ -76,9 +76,8 @@ function buildLayout(nodes, edges) {
 }
 
 function dispatchingSkills(agent) {
-  const implementer = (agent.activePhases || []).includes('implement');
   return (morphData.skills || []).filter((s) => (s.dispatches || []).some(
-    (d) => (d.personas || []).includes(agent.id) || (d.generic && implementer),
+    (d) => (d.personas || []).includes(agent.id),
   ));
 }
 

package/src/dashboard/app/pages/FeatureDetail.jsx

@@ -1,40 +1,32 @@
 import { useCallback, useState } from 'react';
 import { Link, useParams, useSearchParams } from 'react-router-dom';
 import {
-  ArrowLeft, CheckCircle, CircleDashed, PauseCircle, Circle, WarningCircle, FileText, FileCode, CaretDown, CaretRight,
-  Rows, Kanban, Copy, Check, ArrowSquareOut,
+  ArrowLeft, CheckCircle, PauseCircle, Circle, WarningCircle, FileText, FileCode, Copy, Check, ArrowSquareOut,
 } from '@phosphor-icons/react';
 import PhaseRail, { segmentStates } from '../components/PhaseRail.jsx';
 import KnowledgeMarkdown from '../components/KnowledgeMarkdown.jsx';
-import EntityLink from '../components/EntityLink.jsx';
 import ActivityFeed from '../components/ActivityFeed.jsx';
+import SessionMap from '../components/SessionMap.jsx';
 import { useMorphQuery } from '../hooks/useMorphQuery.js';
 import { usePref, useNow } from '../hooks/usePref.js';
-import { Segmented, isWorking } from './Features.jsx';
+import { isWorking } from './Features.jsx';
 import { apiBase, projectHref } from '../lib/project.js';
 import { PHASES, GATE_LABEL, STATUS_LABEL, LOCATION_LABEL, phaseMeta } from '../lib/phases.js';
 import { timeAgo, dateTime, num, bytes, verdictLabel } from '../lib/format.js';
 
 const TABS = [
   { id: 'overview', label: 'Visão geral' },
-  { id: 'slices', label: 'Fatias' },
   { id: 'checks', label: 'Cenários' },
   { id: 'docs', label: 'Documentos' },
   { id: 'activity', label: 'Atividade' },
 ];
 
-const SLICE_STATUS = {
-  feito: { label: 'feita', tone: 'text-[var(--color-ok)]', icon: CheckCircle },
-  parcial: { label: 'parcial', tone: 'text-[var(--color-phase-implement)]', icon: CircleDashed },
-  bloqueado: { label: 'bloqueada', tone: 'text-[var(--color-warn)]', icon: PauseCircle },
+const IMPLEMENT_STATUS = {
+  feito: { label: 'feito', tone: 'text-[var(--color-ok)]', icon: CheckCircle },
+  bloqueado: { label: 'bloqueado', tone: 'text-[var(--color-warn)]', icon: PauseCircle },
   pendente: { label: 'pendente', tone: 'text-[var(--color-faint)]', icon: Circle },
 };
 
-function isReady(sl, byId) {
-  if (sl.status === 'feito' || sl.status === 'bloqueado') return false;
-  return (sl.depends || []).every((d) => byId[d]?.status === 'feito');
-}
-
 export function editorLink(absPath) {
   return `vscode://file/${encodeURI(String(absPath).replace(/\\/g, '/'))}`;
 }
@@ -67,15 +59,15 @@ export function nextAction(f) {
   const paused = f.gates.find((g) => g.paused);
   if (paused) return `O ${GATE_LABEL[paused.gate] || paused.gate} pausou${paused.reason ? `: ${paused.reason}` : ''}. A decisão é sua, no Claude Code.`;
   if (f.inEvaluation) return 'Os relatórios do Gate 3 chegaram. A decisão sai dos vereditos, dos bloqueadores e dos cenários provados.';
-  if (f.phase === 'implement' && f.slicesList?.length) {
-    const blocked = f.slicesList.find((sl) => sl.status === 'bloqueado');
-    if (blocked) return `${blocked.id} está bloqueada: o relatório traz uma pergunta que só você responde, no Claude Code.`;
-    const open = f.slicesList.find((sl) => sl.status === 'parcial') || f.slicesList.find((sl) => sl.status === 'pendente');
-    if (open) return `${f.slices.done} de ${f.slices.total} fatias feitas. Próxima: ${open.id}, ${open.title}.`;
-    return 'Todas as fatias feitas. Falta o verify da feature e a revisão.';
+  if (f.phase === 'implement' && f.checksList?.length) {
+    const blocked = f.checksList.find((c) => c.implement === 'bloqueado');
+    if (blocked) return `${blocked.id} está bloqueado: o report.md traz uma pergunta que só você responde, no Claude Code.`;
+    const open = f.checksList.find((c) => c.implement !== 'feito');
+    if (open) return `${f.scenarios.done} de ${f.scenarios.total} cenários feitos. Próximo: ${open.id}.`;
+    return 'Todos os cenários feitos. Falta o verify da feature e a revisão.';
   }
   const text = {
-    plan: 'Plano sendo escrito: cenários, decisões e fatias. O gate do plano aprova.',
+    plan: 'Plano sendo escrito: cenários, decisões e arquitetura. O gate do plano aprova.',
     uiux: 'Desenho de UI/UX em andamento.',
     implement: 'Implementação em andamento.',
     review: 'Em revisão.',
@@ -213,9 +205,12 @@ function CostBlock({ cost }) {
   );
 }
 
-function OverviewTab({ f, cost }) {
+function OverviewTab({ f, cost, session, now }) {
   return (
     <div className="grid gap-5 lg:grid-cols-[minmax(0,1.2fr)_minmax(0,1fr)]">
+      {f.status !== 'completed' && (
+        <Panel title="Onde parou" className="min-w-0 lg:col-span-2"><SessionMap session={session} now={now} /></Panel>
+      )}
       <div className="space-y-5">
         {f.description && (
           <Panel title="Descrição">
@@ -238,173 +233,122 @@ function OverviewTab({ f, cost }) {
   );
 }
 
-const CHECK_STATUS_TONE = {
-  PROVADO: 'text-[var(--color-ok)]',
-  FALHA: 'text-[var(--color-bad)]',
-  'NÃO PROVADO': 'text-[var(--color-warn)]',
-};
-
-function ChecksTab({ f }) {
-  const cov = f.checksCoverage;
-  if (!f.checksList?.length) {
-    return <Panel><p className="text-sm text-[var(--color-dim)]">Sem cenários extraídos: o `plan-check` ainda não gravou o `checks.json`.</p></Panel>;
-  }
-  const proven = cov ? cov.total - cov.missing.length - cov.notProven.length : null;
-  return (
-    <Panel title={cov ? `${proven} de ${cov.total} provados pelo verificador` : 'Aguardando o relatório do verificador'}>
-      <ul className="divide-y divide-[var(--color-hair)]">
-        {f.checksList.map((c) => (
-          <li key={c.id} className="grid grid-cols-[3rem_minmax(0,1fr)_7rem] gap-3 py-3 text-sm">
-            <span className="font-mono text-[var(--color-dim)]">{c.id}</span>
-            <div className="min-w-0">
-              <p className="text-[var(--color-fg)]">{c.text}</p>
-              {c.evidence && <p className="mt-1 truncate text-xs text-[var(--color-faint)]" title={c.evidence}>{c.evidence}</p>}
-            </div>
-            <div className="text-right">
-              <p className={CHECK_STATUS_TONE[c.status] || 'text-[var(--color-faint)]'}>{c.status ?? (cov ? 'sem linha' : '—')}</p>
-              {c.proof && <p className="text-xs text-[var(--color-faint)]">prova: {c.proof}</p>}
-            </div>
-          </li>
-        ))}
-      </ul>
-    </Panel>
-  );
-}
-
-function reportPathFor(f, sliceId) {
-  const path = `3-implement/reports/${sliceId}.md`;
-  return f.documents.some((d) => d.path === path) ? path : null;
-}
-
-function SliceRow({ sl, f, open, onToggle, ready }) {
-  const st = SLICE_STATUS[sl.status] || SLICE_STATUS.pendente;
-  const StIcon = st.icon;
-  const report = reportPathFor(f, sl.id);
-  return (
-    <li>
-      <button
-        type="button"
-        onClick={onToggle}
-        aria-expanded={open}
-        className="fluid grid w-full grid-cols-[1.25rem_2.75rem_minmax(0,1fr)] items-center gap-3 px-5 py-3 text-left transition-colors hover:bg-white/[0.025] md:grid-cols-[1.25rem_2.75rem_minmax(0,1fr)_9rem_1rem]"
-      >
-        <StIcon weight="light" size={17} className={st.tone} aria-label={st.label} />
-        <span className="font-mono text-xs text-[var(--color-dim)]">{sl.id}</span>
-        <span className="flex min-w-0 items-center gap-2">
-          <span className="truncate text-sm text-[var(--color-fg)]">{sl.title}</span>
-          {ready && <span className="shrink-0 text-xs text-[var(--color-phase-implement)]">pronta</span>}
-        </span>
-        <span className="hidden truncate text-xs text-[var(--color-dim)] md:block">{sl.persona ? `morph-${sl.persona}` : '—'}</span>
-        <span className="hidden text-[var(--color-faint)] md:block">{open ? <CaretDown weight="light" size={14} /> : <CaretRight weight="light" size={14} />}</span>
-      </button>
-      {open && (
-        <div className="grid gap-5 px-5 pb-5 pl-[4.75rem] md:grid-cols-2">
-          <dl className="space-y-3 text-sm">
-            {sl.persona && (
-              <div><dt className="text-xs text-[var(--color-faint)]">Persona</dt>
-                <dd><EntityLink kind="persona" id={sl.persona}>morph-{sl.persona}</EntityLink></dd></div>
-            )}
-            {sl.covers?.length > 0 && (
-              <div><dt className="text-xs text-[var(--color-faint)]">Cobre</dt><dd className="font-mono text-xs text-[var(--color-dim)]">{sl.covers.join(', ')}</dd></div>
-            )}
-            {sl.depends?.length > 0 && (
-              <div><dt className="text-xs text-[var(--color-faint)]">Depende de</dt><dd className="font-mono text-xs text-[var(--color-dim)]">{sl.depends.join(', ')}</dd></div>
-            )}
-          </dl>
-          <dl className="space-y-3 text-sm">
-            {sl.files?.length > 0 && (
-              <div><dt className="text-xs text-[var(--color-faint)]">Arquivos</dt>
-                <dd className="mt-1 space-y-0.5 font-mono text-[11px] text-[var(--color-dim)]">{sl.files.map((o) => <p key={o} className="truncate" title={o}>{o}</p>)}</dd></div>
-            )}
-            {report && (
-              <div className="flex flex-wrap gap-2 pt-1">
-                <Link to={`?tab=docs&doc=${encodeURIComponent(report)}`} className="fluid rounded-full bg-white/[0.06] px-3 py-1.5 text-xs text-[var(--color-fg)] transition-colors hover:bg-white/[0.1]">
-                  Abrir relatório
-                </Link>
-              </div>
-            )}
-          </dl>
-        </div>
-      )}
-    </li>
-  );
+function ImplementIcon({ status }) {
+  const st = IMPLEMENT_STATUS[status] || IMPLEMENT_STATUS.pendente;
+  const Icon = st.icon;
+  return <Icon weight="light" size={17} className={st.tone} aria-label={`implementação: ${st.label}`} />;
 }
 
-const BOARD_COLUMNS = [
-  { id: 'pendente', label: 'Pendentes' },
-  { id: 'parcial', label: 'Parciais' },
-  { id: 'bloqueado', label: 'Bloqueadas' },
-  { id: 'feito', label: 'Feitas' },
-];
-
-function SliceCard({ sl, f, ready }) {
-  const report = reportPathFor(f, sl.id);
-  return (
-    <li className="rounded-xl bg-[var(--color-raised)] px-3.5 py-3 shadow-[inset_0_0_0_1px_var(--color-hair),inset_0_1px_0_rgb(255_255_255_/_0.05)]">
-      <p className="flex items-baseline gap-2">
-        <span className="font-mono text-xs text-[var(--color-dim)]">{sl.id}</span>
-        {ready && <span className="text-xs text-[var(--color-phase-implement)]">pronta</span>}
-      </p>
-      <p className="mt-1 text-sm leading-snug text-[var(--color-fg)]">{sl.title}</p>
-      {sl.persona && (
-        <EntityLink kind="persona" id={sl.persona} className="mt-2 inline-block text-xs">morph-{sl.persona}</EntityLink>
-      )}
-      {sl.depends?.length > 0 && <p className="mt-1 text-xs text-[var(--color-faint)]">depende de {sl.depends.join(', ')}</p>}
-      {report && (
-        <Link to={`?tab=docs&doc=${encodeURIComponent(report)}`} className="mt-2.5 inline-block text-xs text-[var(--color-dim)] underline decoration-[var(--color-hair-strong)] underline-offset-2 hover:text-[var(--color-fg)]">abrir relatório</Link>
-      )}
-    </li>
-  );
+const SCORE_ROLES = ['verifier', 'reviewer', 'security'];
+const CELL = {
+  ok: { icon: '✓', tone: 'bg-[var(--color-ok)]/15 text-[var(--color-ok)]' },
+  bad: { icon: '✗', tone: 'bg-[var(--color-bad)]/15 text-[var(--color-bad)]' },
+  warn: { icon: '?', tone: 'bg-[var(--color-warn)]/15 text-[var(--color-warn)]' },
+  na: { icon: '·', tone: 'bg-white/[0.04] text-[var(--color-faint)]' },
+};
+const CHECK_CELL = { PROVADO: 'ok', FALHA: 'bad', 'NÃO PROVADO': 'warn' };
+
+export function scoreCell(round, id, role) {
+  const r = round.roles[role];
+  if (!r) return { kind: 'na', text: 'sem relatório' };
+  const cited = r.blockers.filter((b) => b.checks.includes(id));
+  if (cited.length) return { kind: 'bad', text: cited.map((b) => `${b.id}: ${b.evidence}`).join(' · ') };
+  if (role === 'verifier') {
+    const row = round.checks.find((c) => c.id === id);
+    if (!row) return { kind: 'warn', text: 'sem linha no relatório' };
+    return { kind: CHECK_CELL[row.status] ?? 'warn', text: `${row.status}. ${row.evidence}` };
+  }
+  return { kind: 'na', text: `não julga por cenário; veredito ${r.verdict ?? '—'}` };
 }
 
-function SlicesBoard({ f, byId }) {
-  return (
-    <div className="-mx-4 overflow-x-auto px-4 pb-2 md:mx-0 md:px-0">
-      <div className="grid auto-cols-[16rem] grid-flow-col gap-3 md:auto-cols-[minmax(12rem,1fr)]">
-        {BOARD_COLUMNS.map((c) => {
-          const items = f.slicesList.filter((sl) => sl.status === c.id);
-          return (
-            <section key={c.id} className="bezel min-w-0" aria-label={`${c.label}: ${items.length}`}>
-              <div className="bezel-core flex h-full min-h-[12rem] flex-col p-2.5">
-                <h3 className="flex items-center justify-between px-1.5 pb-2.5 pt-1 text-sm font-medium">
-                  {c.label}<span className="font-mono text-xs text-[var(--color-faint)]">{items.length}</span>
-                </h3>
-                {items.length === 0
-                  ? <p className="px-1.5 text-xs text-[var(--color-faint)]">Nenhuma.</p>
-                  : <ul className="space-y-2">{items.map((sl) => <SliceCard key={sl.id} sl={sl} f={f} ready={isReady(sl, byId)} />)}</ul>}
-              </div>
-            </section>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
+// Same rule as the gate: a Cn the verifier did not prove keeps the round at FIX, whatever the reports say.
+const roundVerdict = (round, ids) => (Object.values(round.roles).some((r) => r.verdict !== 'SHIP' || r.blockers.length)
+  || (round.roles.verifier && ids.some((id) => scoreCell(round, id, 'verifier').kind !== 'ok')) ? 'FIX' : 'SHIP');
+const roundSha = (round) => (round.roles.verifier ?? Object.values(round.roles)[0])?.reviewedSha?.slice(0, 7) ?? null;
+const blockersOf = (round) => SCORE_ROLES.flatMap((role) => (round.roles[role]?.carried ? [] : round.roles[role]?.blockers ?? []).map((b) => ({ ...b, role })));
 
-function SlicesTab({ f, view = 'list', onView = () => {} }) {
+function ChecksTab({ f }) {
+  const rounds = f.rounds ?? [];
+  const [pick, setPick] = useState(null);
   const [open, setOpen] = useState(null);
-  if (!f.slicesList.length) {
-    return <Panel><p className="text-sm text-[var(--color-dim)]">O plano desta feature ainda não foi conferido pelo <code className="font-mono">morph-spec plan-check</code>. As fatias nascem na fase de plano.</p></Panel>;
+  if (!f.checksList?.length) {
+    return <Panel><p className="text-sm text-[var(--color-dim)]">Sem cenários extraídos: o `plan-check` ainda não gravou o `checks.json`.</p></Panel>;
   }
-  const byId = Object.fromEntries(f.slicesList.map((sl) => [sl.id, sl]));
-  const ready = f.slicesList.filter((sl) => isReady(sl, byId)).length;
+  const i = pick ?? rounds.length - 1;
+  const round = rounds[i];
+  const proven = round ? f.checksList.filter((c) => scoreCell(round, c.id, 'verifier').kind === 'ok').length : null;
+  const blockers = round ? blockersOf(round) : [];
+  const closed = round && i > 0 && !blockers.length ? blockersOf(rounds[i - 1]) : [];
+  const ids = f.checksList.map((c) => c.id);
+  const verdict = round ? roundVerdict(round, ids) : null;
   return (
-    <div className="space-y-4">
-      <div className="flex flex-wrap items-center justify-between gap-3">
-        <Segmented label="Visualização das fatias" value={view} onChange={onView} options={[{ id: 'list', label: 'Lista', icon: Rows }, { id: 'board', label: 'Quadro', icon: Kanban }]} />
-        <p className="text-sm text-[var(--color-dim)]">
-          {f.slices.done} de {f.slices.total} feitas{f.slices.partial ? `, ${f.slices.partial} parciais` : ''}{f.slices.blocked ? `, ${f.slices.blocked} bloqueadas` : ''}{ready ? `, ${ready} prontas para começar` : ''}
-        </p>
-      </div>
-      {view === 'board' ? <SlicesBoard f={f} byId={byId} /> : (
-        <div className="bezel">
-          <ul className="bezel-core divide-y divide-[var(--color-hair)] overflow-hidden">
-            {f.slicesList.map((sl) => (
-              <SliceRow key={sl.id} sl={sl} f={f} ready={isReady(sl, byId)}
-                open={open === sl.id} onToggle={() => setOpen(open === sl.id ? null : sl.id)} />
+    <div className="space-y-5">
+      <Panel>
+        <div className="flex flex-wrap items-baseline gap-4">
+          <span className={`text-4xl font-semibold tracking-tight ${verdict === 'SHIP' ? 'text-[var(--color-ok)]' : verdict === 'FIX' ? 'text-[var(--color-bad)]' : ''}`}>{verdict ?? '—'}</span>
+          <span className="text-sm text-[var(--color-dim)]">
+            {round ? `${proven} de ${f.checksList.length} cenários provados · ${blockers.length} bloqueador(es)` : 'Aguardando os relatórios do Gate 3'}
+          </span>
+        </div>
+        {rounds.length > 1 && (
+          <div className="mt-4 flex flex-wrap gap-2">
+            {rounds.map((r, k) => (
+              <button key={k} type="button" aria-pressed={k === i} onClick={() => setPick(k)}
+                className={`fluid inline-flex items-center gap-2 rounded-full px-3 py-1 text-xs shadow-[inset_0_0_0_1px_var(--color-hair)] ${k === i ? 'bg-white/[0.1] text-[var(--color-fg)]' : 'text-[var(--color-dim)] hover:text-[var(--color-fg)]'}`}>
+                <span className={`h-2 w-2 rounded-full ${roundVerdict(r, ids) === 'SHIP' ? 'bg-[var(--color-ok)]' : 'bg-[var(--color-bad)]'}`} />
+                Rodada {k + 1} · {roundVerdict(r, ids)}{roundSha(r) && <span className="font-mono text-[var(--color-faint)]">{roundSha(r)}</span>}
+              </button>
             ))}
-          </ul>
+          </div>
+        )}
+      </Panel>
+      <Panel>
+        <div className="grid grid-cols-[1.25rem_3rem_minmax(0,1fr)_repeat(3,3.5rem)] gap-3 pb-2 text-xs text-[var(--color-faint)]">
+          <span /><span>Cn</span><span>cenário</span>
+          {SCORE_ROLES.map((role) => <span key={role} className="text-center">{REVIEW_ROLE_LABEL[role]}</span>)}
         </div>
+        <ul className="divide-y divide-[var(--color-hair)]">
+          {f.checksList.map((c) => {
+            const cells = SCORE_ROLES.map((role) => (round ? scoreCell(round, c.id, role) : { kind: 'na', text: '' }));
+            const expanded = open === c.id;
+            return (
+              <li key={c.id} className="py-3 text-sm">
+                <button type="button" onClick={() => setOpen(expanded ? null : c.id)} aria-expanded={expanded}
+                  className="grid w-full grid-cols-[1.25rem_3rem_minmax(0,1fr)_repeat(3,3.5rem)] items-center gap-3 text-left">
+                  <ImplementIcon status={c.implement} />
+                  <span className="font-mono text-[var(--color-dim)]">{c.id}</span>
+                  <span className={`min-w-0 text-[var(--color-fg)] ${expanded ? '' : 'truncate'}`} title={c.text}>{c.text}</span>
+                  {cells.map((cell, k) => (
+                    <span key={k} title={cell.text} className={`mx-auto grid h-8 w-8 place-items-center rounded-lg font-semibold ${CELL[cell.kind].tone}`}>{CELL[cell.kind].icon}</span>
+                  ))}
+                </button>
+                {expanded && (
+                  <div className="mt-3 space-y-2 pl-[4.25rem] text-xs">
+                    {c.proof && <p className="text-[var(--color-faint)]">prova: {c.proof}</p>}
+                    {cells.map((cell, k) => cell.kind !== 'na' && (
+                      <p key={k}><span className="mr-2 text-[var(--color-faint)]">{REVIEW_ROLE_LABEL[SCORE_ROLES[k]]}</span><span className="text-[var(--color-dim)]">{cell.text}</span></p>
+                    ))}
+                  </div>
+                )}
+              </li>
+            );
+          })}
+        </ul>
+      </Panel>
+      {round && (
+        <Panel title={blockers.length ? 'Bloqueadores desta rodada' : closed.length ? 'Fechados nesta rodada' : 'Nenhum bloqueador'}>
+          <ul className="space-y-2 text-xs">
+            {(blockers.length ? blockers : closed).map((b) => (
+              <li key={`${b.role}-${b.id}`} className="grid grid-cols-[3rem_minmax(0,1fr)] gap-3">
+                <span className={`font-mono ${blockers.length ? 'text-[var(--color-bad)]' : 'text-[var(--color-ok)]'}`}>{b.id}</span>
+                <div className="min-w-0">
+                  <p className="text-[var(--color-faint)]">{REVIEW_ROLE_LABEL[b.role]} · {b.type} · {b.checks.length ? b.checks.join(', ') : 'sem Cn citado'} · <span className="font-mono">{b.where}</span></p>
+                  <p className="mt-0.5 truncate text-[var(--color-dim)]" title={b.evidence}>{b.evidence}</p>
+                </div>
+              </li>
+            ))}
+          </ul>
+        </Panel>
       )}
     </div>
   );
@@ -491,7 +435,7 @@ function DocsTab({ f, doc, onDoc, project }) {
   );
 }
 
-export function FeatureDetailView({ f, tab, onTab, doc, onDoc, cost, latest = null, slicesView = 'list', onSlicesView = () => {}, now = Date.now(), project, projectName }) {
+export function FeatureDetailView({ f, tab, onTab, doc, onDoc, cost, session, latest = null, now = Date.now(), project, projectName }) {
   const verdict = verdictLabel(f);
   const working = latest && isWorking({ ...f, lastActivity: latest }, now);
   return (
@@ -510,7 +454,7 @@ export function FeatureDetailView({ f, tab, onTab, doc, onDoc, cost, latest = nu
               </p>
             </div>
             <div className="flex shrink-0 gap-6 text-right">
-              <div><p className="text-2xl font-semibold tabular-nums">{f.slices.total ? `${f.slices.done}/${f.slices.total}` : '—'}</p><p className="text-xs text-[var(--color-faint)]">fatias</p></div>
+              <div><p className="text-2xl font-semibold tabular-nums">{f.scenarios.total ? `${f.scenarios.done}/${f.scenarios.total}` : '—'}</p><p className="text-xs text-[var(--color-faint)]">cenários</p></div>
               <div><p className="text-2xl font-semibold">{verdict ?? '—'}</p><p className="text-xs text-[var(--color-faint)]">veredito</p></div>
             </div>
           </div>
@@ -556,14 +500,13 @@ export function FeatureDetailView({ f, tab, onTab, doc, onDoc, cost, latest = nu
               tab === t.id ? 'bg-white/[0.1] text-[var(--color-fg)] shadow-[inset_0_1px_0_rgb(255_255_255_/_0.08)]' : 'text-[var(--color-dim)] hover:text-[var(--color-fg)]',
             ].join(' ')}
           >
-            {t.label}{t.id === 'slices' && f.slices.total ? ` ${f.slices.total}` : ''}{t.id === 'checks' && f.checksList?.length ? ` ${f.checksList.length}` : ''}{t.id === 'docs' ? ` ${f.documents.length}` : ''}
+            {t.label}{t.id === 'checks' && f.checksList?.length ? ` ${f.checksList.length}` : ''}{t.id === 'docs' ? ` ${f.documents.length}` : ''}
           </button>
         ))}
       </div>
 
       <div className="rise-3">
-        {tab === 'overview' && <OverviewTab f={f} cost={cost} />}
-        {tab === 'slices' && <SlicesTab f={f} view={slicesView} onView={onSlicesView} />}
+        {tab === 'overview' && <OverviewTab f={f} cost={cost} session={session} now={now} />}
         {tab === 'checks' && <ChecksTab f={f} />}
         {tab === 'docs' && <DocsTab f={f} doc={doc} onDoc={onDoc} project={project} />}
         {tab === 'activity' && (
@@ -582,7 +525,6 @@ export default function FeatureDetail() {
   const { data, error, loading } = useMorphQuery(`${apiBase(project)}/features/${encodeURIComponent(name)}`, { project });
   // The cost rides on the activity endpoint (it owns the event stream).
   const costQuery = useMorphQuery(`${apiBase(project)}/activity?feature=${encodeURIComponent(name)}&limit=1`, { scope: 'activity', project });
-  const [slicesView, setSlicesView] = usePref('slices.view', 'list');
   const now = useNow();
 
   const onTab = useCallback((id) => setParams((p) => { const n = new URLSearchParams(p); n.set('tab', id); if (id !== 'docs') n.delete('doc'); return n; }), [setParams]);
@@ -602,7 +544,8 @@ export default function FeatureDetail() {
     <FeatureDetailView
       f={data} tab={tab} onTab={onTab} doc={doc} onDoc={onDoc}
       cost={costQuery.data?.cost ?? null} latest={costQuery.data?.items?.[0] ?? null}
-      slicesView={slicesView} onSlicesView={setSlicesView} now={now} project={project}
+      session={costQuery.data ? costQuery.data.session : undefined}
+      now={now} project={project}
     />
   );
 }

package/src/dashboard/app/pages/Features.jsx

@@ -40,15 +40,15 @@ function VerifyMark({ verification }) {
     : <XCircle weight="light" className="text-[var(--color-bad)]" size={16} aria-label="último verify falhou" />;
 }
 
-function SliceMeter({ slices, wide = false }) {
-  if (!slices?.total) return <span className="text-xs text-[var(--color-faint)]">sem fatias</span>;
-  const pct = Math.round((slices.done / slices.total) * 100);
+function ScenarioMeter({ scenarios, wide = false }) {
+  if (!scenarios?.total) return <span className="text-xs text-[var(--color-faint)]">sem cenários</span>;
+  const pct = Math.round((scenarios.done / scenarios.total) * 100);
   return (
-    <div className="flex items-center gap-2" title={`${slices.done} de ${slices.total} fatias feitas`}>
+    <div className="flex items-center gap-2" title={`${scenarios.done} de ${scenarios.total} cenários feitos`}>
       <div className={`h-1 overflow-hidden rounded-full bg-white/[0.07] ${wide ? 'flex-1' : 'w-12'}`}>
         <div className="h-full rounded-full bg-[var(--color-fg)]/70" style={{ width: `${pct}%` }} />
       </div>
-      <span className="font-mono text-xs tabular-nums text-[var(--color-dim)]">{slices.done}/{slices.total}</span>
+      <span className="font-mono text-xs tabular-nums text-[var(--color-dim)]">{scenarios.done}/{scenarios.total}</span>
     </div>
   );
 }
@@ -104,7 +104,7 @@ export function FeatureRow({ f, now, project, projectName }) {
         <PhaseRail feature={f} />
         {/* One line on a phone; on desktop the wrapper dissolves into the row's grid. */}
         <div className="flex items-center gap-5 md:contents">
-          <SliceMeter slices={f.slices} />
+          <ScenarioMeter scenarios={f.scenarios} />
           <VerifyMark verification={f.verification} />
           <span className="font-mono text-sm tabular-nums text-[var(--color-dim)]" title={verdict ? 'veredito do Gate 3' : 'sem veredito'}>
             {verdict ?? '—'}
@@ -163,7 +163,7 @@ function BoardCard({ f, now, project }) {
         {f.lastActivity?.title && !isFinished(f) && (
           <p className="mt-1.5 line-clamp-2 text-xs text-[var(--color-dim)]">{f.lastActivity.title}</p>
         )}
-        <div className="mt-3"><SliceMeter slices={f.slices} wide /></div>
+        <div className="mt-3"><ScenarioMeter scenarios={f.scenarios} wide /></div>
         <div className="mt-2.5 flex items-center justify-between text-xs text-[var(--color-faint)]">
           <span className="flex items-center gap-2">
             <VerifyMark verification={f.verification} />

package/src/dashboard/app/pages/PhasePipeline.jsx

@@ -10,7 +10,7 @@ import { phaseMeta, GATE_LABEL } from '../lib/phases.js';
 const phaseColor = (id) => `var(--color-phase-${id})`;
 
 const GATE_CHECKS = {
-  plan: 'Confere o plano: o problema, o que fica de fora, os cenários com a prova de cada um e as fatias. Depois dele o plan.md congela (só a errata cresce).',
+  plan: 'Confere o plano: o problema, o que fica de fora, os cenários com a prova de cada um, o reuso e as decisões. Depois dele o plan.md congela (só a errata cresce).',
   uiux: 'Confere o design das telas (mockups e checklist de tela). É opcional: só existe quando a feature passa pela fase de UI/UX, depois do plano.',
   review: 'Confere a avaliação independente em contexto novo: verificador e revisor (e segurança, quando o diff toca auth, segredo ou dado pessoal), cada um com veredito SHIP ou FIX sobre o mesmo commit. Só bloqueia com evidência, com o verify verde e todo cenário provado.',
 };