@polymorphism-tech/morph-spec 9.8.0 → 10.1.1

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.',
 };

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

@@ -2,11 +2,46 @@ import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { FolderSimplePlus, X, ArrowRight } from '@phosphor-icons/react';
 import { FeatureRow, isWorking } from './Features.jsx';
-import { useProjects, projectHref, announceProjectsChanged } from '../lib/project.js';
+import { useProjects, projectHref, featureHref, announceProjectsChanged } from '../lib/project.js';
 import { useNow } from '../hooks/usePref.js';
 import { timeAgo } from '../lib/format.js';
 
 const ACTIVE_SHOWN = 4;
+const GATE_LABEL = { plan: 'Plano', uiux: 'Design', review: 'Gate 3' };
+const GATE_COLOR = { plan: 'var(--color-phase-plan)', uiux: 'var(--color-phase-uiux)', review: 'var(--color-phase-review)' };
+
+// One row per gate that waits for the human, oldest first: the longest wait is the next decision.
+export function decisionQueue(projects = []) {
+  return projects
+    .filter((p) => p.summary)
+    .flatMap((p) => p.summary.activeFeatures.flatMap((f) => (f.gates || [])
+      .filter((g) => g.paused)
+      .map((g) => ({ project: p, feature: f, gate: g.gate, reason: g.reason, since: g.since }))))
+    .sort((a, b) => (a.since || '￿').localeCompare(b.since || '￿'));
+}
+
+function DecisionRow({ item, now }) {
+  const { project, feature, gate, reason, since } = item;
+  return (
+    <li>
+      <Link to={featureHref(project.id, feature.name)}
+        className="fluid grid grid-cols-[4.5rem_minmax(0,1fr)] items-start gap-x-4 gap-y-1 px-5 py-3.5 transition-colors hover:bg-white/[0.025] md:grid-cols-[4.5rem_minmax(0,1fr)_auto]">
+        <span className="mt-0.5 rounded-full px-2 py-px text-center text-[11px] font-medium shadow-[inset_0_0_0_1px_var(--color-hair-strong)]"
+          style={{ color: GATE_COLOR[gate] }}>{GATE_LABEL[gate] ?? gate}</span>
+        <div className="min-w-0">
+          <div className="flex items-baseline gap-2">
+            <span className="truncate font-medium text-[var(--color-fg)]">{feature.name}</span>
+            <span className="shrink-0 text-xs text-[var(--color-faint)]">{project.name}</span>
+          </div>
+          {reason && <p className="mt-0.5 line-clamp-2 text-sm text-[var(--color-dim)]">{reason}</p>}
+        </div>
+        <span className="col-start-2 whitespace-nowrap text-xs text-[var(--color-faint)] md:col-start-auto md:text-right" title={since || undefined}>
+          {since ? `esperando ${timeAgo(since, now)}` : 'sem horário'}
+        </span>
+      </Link>
+    </li>
+  );
+}
 
 async function send(method, url, body) {
   const res = await fetch(url, {
@@ -79,7 +114,7 @@ export function PortfolioView({ data, now = Date.now(), onAdd = () => {}, onRemo
   const ready = projects.filter((p) => p.summary);
   const totalActive = ready.reduce((n, p) => n + p.summary.active, 0);
   const totalAwaiting = ready.reduce((n, p) => n + p.summary.awaiting, 0);
-  const awaiting = ready.flatMap((p) => p.summary.activeFeatures.filter((f) => f.awaiting).map((f) => ({ f, p })));
+  const queue = decisionQueue(projects);
   const ordered = [...projects].sort((a, b) => (b.summary?.lastActivityTs || '').localeCompare(a.summary?.lastActivityTs || ''));
 
   return (
@@ -92,12 +127,12 @@ export function PortfolioView({ data, now = Date.now(), onAdd = () => {}, onRemo
         </p>
       </header>
 
-      {awaiting.length > 0 && (
+      {queue.length > 0 && (
         <section className="rise-2 mb-10">
-          <h2 className="mb-3 px-1 text-sm font-medium">Esperando você</h2>
+          <h2 className="mb-3 px-1 text-sm font-medium">Esperando você <span className="text-[var(--color-faint)]">· a mais antiga primeiro</span></h2>
           <div className="bezel">
             <ul className="bezel-core divide-y divide-[var(--color-hair)] overflow-hidden">
-              {awaiting.map(({ f, p }) => <FeatureRow key={`${p.id}:${f.name}`} f={f} now={now} project={p.id} projectName={p.name} />)}
+              {queue.map((item) => <DecisionRow key={`${item.project.id}:${item.feature.name}:${item.gate}`} item={item} now={now} />)}
             </ul>
           </div>
         </section>

package/src/dashboard/scanner/activity-scanner.js

@@ -263,6 +263,35 @@ export function createEventStore(projectDir, { loadTrees = loadTelemetryAllTrees
   };
 }
 
+const SESSION_GAP_MS = 30 * 60 * 1000;
+const SESSION_MARK_KINDS = new Set(['prompt', 'question', 'dispatch', 'handback', 'verify', 'gate', 'failure']);
+
+// "Where was I": the feature's most recent stretch of work, split from the previous one by a 30-minute silence.
+export function sessionMap(events, feature, { gapMs = SESSION_GAP_MS } = {}) {
+  const lines = describeAll(events).filter((l) => l.feature === feature && l.ts);
+  if (lines.length === 0) return null;
+  const session = [lines[0]];
+  for (let i = 1; i < lines.length; i++) {
+    if (Date.parse(session[session.length - 1].ts) - Date.parse(lines[i].ts) > gapMs) break;
+    session.push(lines[i]);
+  }
+  const files = new Map();
+  for (const l of session) {
+    if (l.kind === 'write' && l.refs.path) files.set(l.refs.path, (files.get(l.refs.path) || 0) + 1);
+  }
+  const lastGreen = session.find((l) => l.kind === 'verify' && l.status === 'ok');
+  const lastFailure = session.find((l) => l.status === 'fail' && (!lastGreen || l.ts > lastGreen.ts)) || null;
+  return {
+    start: session[session.length - 1].ts,
+    end: session[0].ts,
+    actions: session.length,
+    marks: session.filter((l) => SESSION_MARK_KINDS.has(l.kind)).reverse()
+      .map(({ ts, kind, status, title }) => ({ ts, kind, status, title })),
+    files: [...files].sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0])).slice(0, 5).map(([path, edits]) => ({ path, edits })),
+    lastFailure: lastFailure && { ts: lastFailure.ts, title: lastFailure.title, detail: lastFailure.detail },
+  };
+}
+
 /** `sessionUsage` and `agentUsage` stay `null` when the stream has no summable sample. */
 export function featureCost(events, feature) {
   const c = aggregateCost(events, { feature });

package/src/dashboard/scanner/agents-scanner.js

@@ -1,15 +1,11 @@
 import { readFileSync, existsSync } from 'fs';
 import { join } from 'path';
-import { personaStandardIds, isImplementer, renderAgentMd, loadKnownMcpIds } from '../../utils/agents-installer.js';
+import { personaStandardIds, renderAgentMd, loadKnownMcpIds } from '../../utils/agents-installer.js';
 
 const DISPATCH_LINE = /despach|dispatch|subagent_type/i;
 
-const GENERIC_DISPATCH = 'morph-{id}';
-
-/**
- * Only dispatch lines count: morph-plan cites `morph-dotnet-senior` as a
- * spelling example of the `agent` field, which dispatches nobody.
- */
+// Only dispatch lines count: a skill that merely names a persona dispatches nobody. Two phases can
+// share a skill, so beyond SKILL.md only the phase's own `references/{phase}.md` is read.
 export function personaPhases(frameworkDir, agents) {
   const result = new Map(Object.keys(agents).map((id) => [id, []]));
   const phasesJsonPath = join(frameworkDir, 'phases.json');
@@ -18,13 +14,15 @@ export function personaPhases(frameworkDir, agents) {
   const phases = Object.values(JSON.parse(readFileSync(phasesJsonPath, 'utf8')).phases || {})
     .sort((a, b) => a.index - b.index);
   for (const phase of phases) {
-    const skillPath = join(frameworkDir, 'skills', 'core', phase.skill || '', 'SKILL.md');
-    if (!phase.skill || !existsSync(skillPath)) continue;
-    const dispatchLines = readFileSync(skillPath, 'utf8').split(/\r?\n/).filter((l) => DISPATCH_LINE.test(l));
-    const generic = dispatchLines.some((l) => l.includes(GENERIC_DISPATCH));
-    for (const [id, agent] of Object.entries(agents)) {
+    if (!phase.skill) continue;
+    const skillDir = join(frameworkDir, 'skills', 'core', phase.skill);
+    const sources = [join(skillDir, 'SKILL.md'), join(skillDir, 'references', `${phase.id}.md`)].filter(existsSync);
+    const dispatchLines = sources
+      .flatMap((f) => readFileSync(f, 'utf8').split(/\r?\n/))
+      .filter((l) => DISPATCH_LINE.test(l));
+    for (const id of Object.keys(agents)) {
       const named = new RegExp(`morph-${id}(?![\\w-])`);
-      if ((generic && isImplementer(agent)) || dispatchLines.some((l) => named.test(l))) {
+      if (dispatchLines.some((l) => named.test(l))) {
         result.get(id).push(phase.id);
       }
     }
@@ -52,7 +50,6 @@ export function scanAgents(frameworkDir) {
     domains: agent.domains || [],
     keywords: agent.keywords || [],
     standards: personaStandardIds(agent),
-    surfaces: agent.surfaces || null,
     stack: agent.stack || ['*'],
     activePhases: phasesOf.get(id),
     persona: agent.persona || '',