@polymorphism-tech/morph-spec 8.38.0 → 8.40.0

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

@@ -0,0 +1,604 @@
+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,
+} from '@phosphor-icons/react';
+import PhaseRail, { segmentStates } from '../components/PhaseRail.jsx';
+import KnowledgeMarkdown from '../components/KnowledgeMarkdown.jsx';
+import EntityLink, { standardKey } from '../components/EntityLink.jsx';
+import ActivityFeed from '../components/ActivityFeed.jsx';
+import { useMorphQuery } from '../hooks/useMorphQuery.js';
+import { usePref, useNow } from '../hooks/usePref.js';
+import { Segmented, 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, duration, bytes } from '../lib/format.js';
+
+const TABS = [
+  { id: 'overview', label: 'Visão geral' },
+  { id: 'tasks', label: 'Tasks' },
+  { id: 'docs', label: 'Documentos' },
+  { id: 'activity', label: 'Atividade' },
+];
+
+const TASK_STATUS = {
+  done: { label: 'feita', tone: 'text-[var(--color-ok)]', icon: CheckCircle },
+  completed: { label: 'feita', tone: 'text-[var(--color-ok)]', icon: CheckCircle },
+  in_progress: { label: 'em andamento', tone: 'text-[var(--color-phase-implement)]', icon: CircleDashed },
+  blocked: { label: 'bloqueada', tone: 'text-[var(--color-warn)]', icon: PauseCircle },
+  skipped: { label: 'pulada', tone: 'text-[var(--color-faint)]', icon: Circle },
+  pending: { label: 'pendente', tone: 'text-[var(--color-faint)]', icon: Circle },
+};
+
+/** Duration of each task from the telemetry (TaskStart → TaskEnd), newest segment wins. */
+function taskDurations(cost) {
+  const out = {};
+  for (const t of cost?.tasks || []) if (t.task && t.durationSeconds) out[t.task] = t.durationSeconds;
+  return out;
+}
+
+/** A pending task whose dependencies are all done can start now. */
+function isReady(t, byId) {
+  if (t.status !== 'pending') return false;
+  return (t.dependencies || []).every((d) => ['done', 'completed', 'skipped'].includes(byId[d]?.status));
+}
+
+/** `vscode://file/…` opens the file in the editor from the browser. */
+export function editorLink(absPath) {
+  return `vscode://file/${encodeURI(String(absPath).replace(/\\/g, '/'))}`;
+}
+
+function CopyButton({ text, label = 'Copiar caminho' }) {
+  const [done, setDone] = useState(false);
+  const copy = async () => {
+    try { await navigator.clipboard.writeText(text); setDone(true); setTimeout(() => setDone(false), 1500); } catch { /* clipboard blocked */ }
+  };
+  return (
+    <button type="button" onClick={copy} title={text}
+      className="fluid inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 font-sans text-xs text-[var(--color-dim)] shadow-[inset_0_0_0_1px_var(--color-hair)] transition-colors hover:text-[var(--color-fg)] active:scale-[0.98]">
+      {done ? <Check weight="light" size={13} /> : <Copy weight="light" size={13} />}{done ? 'Copiado' : label}
+    </button>
+  );
+}
+
+function EditorButton({ path, label = 'Abrir no VS Code' }) {
+  return (
+    <a href={editorLink(path)}
+      className="fluid inline-flex items-center gap-1.5 rounded-full bg-white/[0.06] px-2.5 py-1 font-sans text-xs text-[var(--color-fg)] transition-colors hover:bg-white/[0.1] active:scale-[0.98]">
+      <ArrowSquareOut weight="light" size={13} />{label}
+    </a>
+  );
+}
+
+/** What a person should expect next, in one sentence. */
+export function nextAction(f) {
+  if (f.status === 'completed') return `Concluída${f.archivedAt ? ` ${timeAgo(f.archivedAt)}` : ''}.`;
+  if (f.status === 'abandoned') return 'Abandonada.';
+  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 'O avaliador independente entregou o relatório. O Gate 3 decide pelo score.';
+  if (f.phase === 'implement' && f.tasksList?.length) {
+    const open = f.tasksList.find((t) => t.status === 'in_progress') || f.tasksList.find((t) => t.status === 'pending');
+    if (open) return `${f.tasks.done} de ${f.tasks.total} tasks feitas. Próxima: ${open.id}, ${open.title}.`;
+    return 'Todas as tasks feitas. Falta o verify da feature e a revisão.';
+  }
+  const text = {
+    proposal: 'Proposta em construção. O Gate 1 aprova o escopo.',
+    uiux: 'Desenho de UI/UX em andamento.',
+    plan: 'Plano sendo escrito: spec, use cases e tasks. O Gate 2 aprova.',
+    implement: 'Implementação em andamento.',
+    review: 'Em revisão.',
+  };
+  return text[f.phase] || '';
+}
+
+function Panel({ title, children, className = '' }) {
+  return (
+    <section className={`bezel ${className}`}>
+      <div className="bezel-core px-5 py-5">
+        {title && <h2 className="mb-4 text-sm font-medium text-[var(--color-fg)]">{title}</h2>}
+        {children}
+      </div>
+    </section>
+  );
+}
+
+function GateList({ f }) {
+  const unused = new Set(segmentStates(f).filter((s) => s.state === 'skipped').map((s) => s.id));
+  return (
+    <ol className="space-y-4">
+      {f.gates.map((g) => {
+        const decision = f.gateDecisions?.[g.gate];
+        const state = g.skipped || unused.has(g.gate) ? 'fase não usada' : g.approved ? 'aprovado' : g.paused ? 'pausado' : 'pendente';
+        const Icon = g.approved ? CheckCircle : g.paused ? PauseCircle : Circle;
+        const tone = g.approved ? 'text-[var(--color-ok)]' : g.paused ? 'text-[var(--color-warn)]' : 'text-[var(--color-faint)]';
+        return (
+          <li key={g.gate} className="grid grid-cols-[1.25rem_minmax(0,1fr)] gap-3">
+            <Icon weight="light" size={18} className={tone} />
+            <div className="min-w-0">
+              <p className="text-sm">
+                <span className="text-[var(--color-fg)]">{GATE_LABEL[g.gate] || g.gate}</span>
+                <span className="ml-2 text-[var(--color-dim)]">{state}{g.approvedBy ? `, por ${g.approvedBy}` : ''}</span>
+              </p>
+              {g.at && <p className="text-xs text-[var(--color-faint)]">{dateTime(g.at)}</p>}
+              {decision?.reason && <p className="mt-1 text-sm text-[var(--color-dim)]">{decision.reason}</p>}
+              {decision?.trust && <p className="text-xs text-[var(--color-faint)]">trust {decision.trust}</p>}
+            </div>
+          </li>
+        );
+      })}
+    </ol>
+  );
+}
+
+function NodeChips({ nodes }) {
+  if (!nodes) return <p className="text-sm text-[var(--color-faint)]">Nenhum verify registrado.</p>;
+  return (
+    <ul className="flex flex-wrap gap-2">
+      {Object.entries(nodes).map(([name, v]) => {
+        const status = typeof v === 'string' ? v : v?.status;
+        const tone = status === 'pass' ? 'text-[var(--color-ok)]' : status === 'fail' ? 'text-[var(--color-bad)]' : 'text-[var(--color-faint)]';
+        return (
+          <li key={name} className="rounded-full px-3 py-1 text-xs shadow-[inset_0_0_0_1px_var(--color-hair)]">
+            <span className="text-[var(--color-dim)]">{name}</span> <span className={tone}>{status || '—'}</span>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
+function ScoreBlock({ f }) {
+  const score = f.score ?? f.legacyScore;
+  const proofs = f.proofScores ? Object.entries(f.proofScores) : [];
+  return (
+    <div>
+      <p className="flex items-baseline gap-2">
+        <span className="text-4xl font-semibold tabular-nums tracking-tight">{score ?? '—'}</span>
+        <span className="text-sm text-[var(--color-dim)]">{score == null ? 'sem relatório do avaliador' : f.score != null ? 'Composite-Score do avaliador' : 'score legado'}</span>
+      </p>
+      {proofs.length > 0 && (
+        <ul className="mt-4 space-y-1.5">
+          {proofs.map(([k, v]) => (
+            <li key={k} className="grid grid-cols-[5.5rem_minmax(0,1fr)_2rem] items-center gap-3 text-xs">
+              <span className="text-[var(--color-dim)]">{k}</span>
+              <span className="h-1 overflow-hidden rounded-full bg-white/[0.07]">
+                <span className="block h-full rounded-full" style={{ width: `${v * 10}%`, background: v >= 9 ? 'var(--color-ok)' : v >= 7 ? 'var(--color-phase-plan)' : 'var(--color-warn)' }} />
+              </span>
+              <span className="text-right font-mono tabular-nums text-[var(--color-dim)]">{v}</span>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+function CostBlock({ cost }) {
+  if (!cost) return <p className="text-sm text-[var(--color-faint)]">Lendo a telemetria…</p>;
+  const tokens = (u) => (u ? u.inputTokens + u.outputTokens + u.cacheCreationTokens : null);
+  const rows = [
+    ['Tokens da sessão', cost.sessionUsage ? num(tokens(cost.sessionUsage)) : 'desconhecido', cost.sessionUsage ? `${num(cost.sessionUsage.cacheReadTokens)} lidos do cache` : cost.legacyUsageSamples ? 'telemetria v1, sem delta somável' : null],
+    ['Tokens dos sub-agents', cost.agentUsage ? num(tokens(cost.agentUsage)) : 'desconhecido', cost.agentUsage ? `${cost.agentUsage.agents} sub-agents` : null],
+    ['Despachos', String(cost.dispatches?.count ?? 0), cost.dispatches?.promptChars ? `${num(cost.dispatches.promptChars)} caracteres de prompt` : null],
+    ['Tempo em tasks', duration(cost.taskDurationSeconds), null],
+    ['Lido para o contexto', bytes(cost.bytesTotal), null],
+  ];
+  return (
+    <dl className="space-y-3">
+      {rows.map(([k, v, hint]) => (
+        <div key={k} className="flex items-baseline justify-between gap-4">
+          <dt className="text-sm text-[var(--color-dim)]">{k}</dt>
+          <dd className="text-right">
+            <span className="font-mono text-sm tabular-nums">{v}</span>
+            {hint && <span className="block text-xs text-[var(--color-faint)]">{hint}</span>}
+          </dd>
+        </div>
+      ))}
+    </dl>
+  );
+}
+
+function OverviewTab({ f, cost }) {
+  return (
+    <div className="grid gap-5 lg:grid-cols-[minmax(0,1.2fr)_minmax(0,1fr)]">
+      <div className="space-y-5">
+        {f.description && (
+          <Panel title="Descrição">
+            <p className="text-sm leading-relaxed text-[var(--color-dim)]">{f.description}</p>
+          </Panel>
+        )}
+        <Panel title="Gates"><GateList f={f} /></Panel>
+      </div>
+      <div className="space-y-5">
+        <Panel title="Avaliação"><ScoreBlock f={f} /></Panel>
+        <Panel title="Último verify">
+          {f.verification && (
+            <p className="mb-3 text-xs text-[var(--color-faint)]">
+              escopo {f.verification.scope || '—'}, {timeAgo(f.verification.ts)}
+            </p>
+          )}
+          <NodeChips nodes={f.verificationNodes} />
+        </Panel>
+        <Panel title="Custo"><CostBlock cost={cost} /></Panel>
+      </div>
+    </div>
+  );
+}
+
+function reportPathFor(f, taskId) {
+  const candidates = [`3-implement/reports/${taskId}.md`, `3-implement/evidencias/${taskId}.md`];
+  return candidates.filter((p) => f.documents.some((d) => d.path === p));
+}
+
+function TaskRow({ t, f, open, onToggle, duration: secs, ready }) {
+  const st = TASK_STATUS[t.status] || TASK_STATUS.pending;
+  const StIcon = st.icon;
+  const reports = reportPathFor(f, t.id);
+  const verify = t.verification;
+  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_4.5rem_3rem_1rem]"
+      >
+        <StIcon weight="light" size={17} className={st.tone} aria-label={st.label} />
+        <span className="font-mono text-xs text-[var(--color-dim)]">{t.id}</span>
+        <span className="flex min-w-0 items-center gap-2">
+          <span className="truncate text-sm text-[var(--color-fg)]">{t.title}</span>
+          {ready && <span className="shrink-0 text-xs text-[var(--color-phase-implement)]">pronta</span>}
+          {secs ? <span className="shrink-0 text-xs text-[var(--color-faint)]">{duration(secs)}</span> : null}
+        </span>
+        <span className="hidden truncate text-xs text-[var(--color-dim)] md:block">{t.agent ? `morph-${t.agent}` : '—'}</span>
+        <span className="hidden text-xs md:block">
+          {verify ? <span className={verify.status === 'pass' ? 'text-[var(--color-ok)]' : 'text-[var(--color-bad)]'}>verify {verify.status}</span> : <span className="text-[var(--color-faint)]">—</span>}
+        </span>
+        <span className="hidden text-right font-mono text-xs tabular-nums text-[var(--color-dim)] md:block">{t.score?.lastScore ?? verify?.score ?? '—'}</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">
+          <div className="space-y-4 text-sm">
+            {t.description && <p className="leading-relaxed text-[var(--color-dim)]">{t.description}</p>}
+            {Array.isArray(t.doneCriteria) && t.doneCriteria.length > 0 && (
+              <div>
+                <p className="mb-1.5 text-xs text-[var(--color-faint)]">Critérios de pronto</p>
+                <ul className="list-disc space-y-1 pl-4 text-[var(--color-dim)] marker:text-[var(--color-faint)]">
+                  {t.doneCriteria.map((c, i) => <li key={i}>{c}</li>)}
+                </ul>
+              </div>
+            )}
+            {t.notes && <p className="text-[var(--color-dim)]"><span className="text-[var(--color-faint)]">Notas: </span>{t.notes}</p>}
+          </div>
+          <dl className="space-y-3 text-sm">
+            {t.agent && (
+              <div><dt className="text-xs text-[var(--color-faint)]">Persona</dt>
+                <dd><EntityLink kind="persona" id={t.agent}>morph-{t.agent}</EntityLink></dd></div>
+            )}
+            {t.standards?.length > 0 && (
+              <div><dt className="text-xs text-[var(--color-faint)]">Standards</dt>
+                <dd className="mt-1 flex flex-wrap gap-1.5">
+                  {t.standards.map((s) => (
+                    <EntityLink key={s} kind="standard" id={standardKey(s)} chip title={s}>{standardKey(s).replace(/\.md$/, '')}</EntityLink>
+                  ))}
+                </dd></div>
+            )}
+            {t.dependencies?.length > 0 && (
+              <div><dt className="text-xs text-[var(--color-faint)]">Depende de</dt><dd className="font-mono text-xs text-[var(--color-dim)]">{t.dependencies.join(', ')}</dd></div>
+            )}
+            {t.usecase && <div><dt className="text-xs text-[var(--color-faint)]">Use case</dt><dd className="font-mono text-xs text-[var(--color-dim)]">{t.usecase}</dd></div>}
+            {verify?.nodes && <div><dt className="mb-1 text-xs text-[var(--color-faint)]">Verify da task</dt><dd><NodeChips nodes={verify.nodes} /></dd></div>}
+            {t.outputs?.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)]">{t.outputs.map((o) => <p key={o} className="truncate" title={o}>{o}</p>)}</dd></div>
+            )}
+            {reports.length > 0 && (
+              <div className="flex flex-wrap gap-2 pt-1">
+                {reports.map((p) => (
+                  <Link key={p} to={`?tab=docs&doc=${encodeURIComponent(p)}`} 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 {p.includes('evidencias') ? 'evidências' : 'relatório'}
+                  </Link>
+                ))}
+              </div>
+            )}
+          </dl>
+        </div>
+      )}
+    </li>
+  );
+}
+
+const BOARD_COLUMNS = [
+  { id: 'pending', label: 'Pendentes', match: (t) => !t.status || t.status === 'pending' },
+  { id: 'in_progress', label: 'Em andamento', match: (t) => t.status === 'in_progress' },
+  { id: 'blocked', label: 'Bloqueadas', match: (t) => t.status === 'blocked' },
+  { id: 'done', label: 'Feitas', match: (t) => t.status === 'done' || t.status === 'completed' || t.status === 'skipped' },
+];
+
+function TaskCard({ t, f, secs, ready }) {
+  const reports = reportPathFor(f, t.id);
+  const score = t.score?.lastScore ?? t.verification?.score;
+  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)]">{t.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)]">{t.title}</p>
+      {t.agent && (
+        <EntityLink kind="persona" id={t.agent} className="mt-2 inline-block text-xs">morph-{t.agent}</EntityLink>
+      )}
+      {t.dependencies?.length > 0 && <p className="mt-1 text-xs text-[var(--color-faint)]">depende de {t.dependencies.join(', ')}</p>}
+      <div className="mt-2.5 flex items-center justify-between text-xs">
+        <span className="flex items-center gap-2">
+          {t.verification && <span className={t.verification.status === 'pass' ? 'text-[var(--color-ok)]' : 'text-[var(--color-bad)]'}>verify {t.verification.status}</span>}
+          {score != null && <span className="font-mono text-[var(--color-dim)]">{score}</span>}
+        </span>
+        <span className="text-[var(--color-faint)]">{secs ? duration(secs) : ''}</span>
+      </div>
+      {reports.length > 0 && (
+        <Link to={`?tab=docs&doc=${encodeURIComponent(reports[0])}`} 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>
+  );
+}
+
+function TasksBoard({ f, durations, 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.tasksList.filter(c.match);
+          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((t) => <TaskCard key={t.id} t={t} f={f} secs={durations[t.id]} ready={isReady(t, byId)} />)}</ul>}
+              </div>
+            </section>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+function TasksTab({ f, cost, view = 'list', onView = () => {} }) {
+  const [open, setOpen] = useState(null);
+  if (!f.tasksList.length) {
+    return <Panel><p className="text-sm text-[var(--color-dim)]">Esta feature ainda não tem <code className="font-mono">2-plan/tasks.json</code>. As tasks nascem na fase de plano.</p></Panel>;
+  }
+  const durations = taskDurations(cost);
+  const byId = Object.fromEntries(f.tasksList.map((t) => [t.id, t]));
+  const ready = f.tasksList.filter((t) => isReady(t, byId)).length;
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <Segmented label="Visualização das tasks" 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.tasks.done} de {f.tasks.total} feitas{f.tasks.inProgress ? `, ${f.tasks.inProgress} em andamento` : ''}{ready ? `, ${ready} prontas para começar` : ''}
+        </p>
+      </div>
+      {f.tasksErrors?.length > 0 && (
+        <p className="flex items-start gap-2 text-sm text-[var(--color-warn)]">
+          <WarningCircle weight="light" size={17} className="mt-0.5 shrink-0" />
+          O tasks.json não passa no schema ({f.tasksErrors.length} erros). As tasks aparecem como estão no arquivo.
+        </p>
+      )}
+      {view === 'board' ? <TasksBoard f={f} durations={durations} byId={byId} /> : (
+        <div className="bezel">
+          <ul className="bezel-core divide-y divide-[var(--color-hair)] overflow-hidden">
+            {f.tasksList.map((t) => (
+              <TaskRow key={t.id} t={t} f={f} duration={durations[t.id]} ready={isReady(t, byId)}
+                open={open === t.id} onToggle={() => setOpen(open === t.id ? null : t.id)} />
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function groupDocuments(documents) {
+  const groups = PHASES.map((p) => ({ ...p, files: documents.filter((d) => d.phase === p.id) })).filter((g) => g.files.length);
+  const other = documents.filter((d) => !d.phase);
+  if (other.length) groups.push({ id: 'other', label: 'Estado e outros', color: 'var(--color-faint)', files: other });
+  return groups;
+}
+
+function DocViewer({ project, feature, path, dir }) {
+  const url = path ? `${apiBase(project)}/file?feature=${encodeURIComponent(feature)}&path=${encodeURIComponent(path)}` : null;
+  const { data, error, loading } = useMorphQuery(url, { project });
+  if (!path) return <p className="text-sm text-[var(--color-dim)]">Escolha um documento à esquerda.</p>;
+  if (error) return <p className="text-sm text-[var(--color-bad)]">{error}</p>;
+  if (loading || !data) return <p className="text-sm text-[var(--color-faint)]">Abrindo…</p>;
+  // One separator: `dir` comes from path.join (backslashes on win32), `path` from the API (slashes).
+  const abs = dir ? `${dir.replace(/\\/g, '/').replace(/\/$/, '')}/${path}` : null;
+  const header = (
+    <div className="mb-6 flex flex-wrap items-center justify-between gap-3 font-mono text-xs text-[var(--color-faint)]">
+      <span className="min-w-0 truncate">{path}, atualizado {timeAgo(data.mtime)}</span>
+      {abs && <span className="flex shrink-0 gap-2"><CopyButton text={abs} /><EditorButton path={abs} /></span>}
+    </div>
+  );
+  if (path.endsWith('.md')) return <>{header}<KnowledgeMarkdown text={data.content} /></>;
+  let text = data.content;
+  if (path.endsWith('.json')) {
+    try { text = JSON.stringify(JSON.parse(text), null, 2); } catch { /* shown as is */ }
+  }
+  return (
+    <>
+      {header}
+      <pre className="overflow-x-auto rounded-xl bg-[var(--color-ink)] p-4 font-mono text-xs leading-relaxed text-[var(--color-dim)] shadow-[inset_0_0_0_1px_var(--color-hair)]">{text}</pre>
+    </>
+  );
+}
+
+function DocsTab({ f, doc, onDoc, project }) {
+  const groups = groupDocuments(f.documents);
+  const selected = doc || f.documents.find((d) => d.path.endsWith('spec.md'))?.path || f.documents.find((d) => d.path.endsWith('.md'))?.path || null;
+  return (
+    <div className="grid gap-5 lg:grid-cols-[16rem_minmax(0,1fr)]">
+      <nav aria-label="Documentos da feature" className="lg:sticky lg:top-4 lg:self-start">
+        {groups.length === 0 && <p className="text-sm text-[var(--color-dim)]">Nenhum arquivo ainda.</p>}
+        {groups.map((g) => (
+          <div key={g.id} className="mb-5">
+            <p className="mb-1.5 flex items-center gap-2 px-2 text-xs text-[var(--color-dim)]">
+              <span className="h-2 w-2 rounded-full" style={{ background: g.color }} />{g.label}
+            </p>
+            <ul>
+              {g.files.map((d) => {
+                const active = d.path === selected;
+                const Icon = d.path.endsWith('.md') ? FileText : FileCode;
+                const name = d.path.split('/').slice(1).join('/') || d.path;
+                return (
+                  <li key={d.path}>
+                    <button
+                      type="button"
+                      onClick={() => onDoc(d.path)}
+                      aria-current={active ? 'page' : undefined}
+                      className={[
+                        'fluid flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-sm transition-colors',
+                        active ? 'bg-white/[0.08] text-[var(--color-fg)]' : 'text-[var(--color-dim)] hover:bg-white/[0.04] hover:text-[var(--color-fg)]',
+                      ].join(' ')}
+                    >
+                      <Icon weight="light" size={15} className="shrink-0" />
+                      <span className="truncate" title={d.path}>{name}</span>
+                    </button>
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
+        ))}
+      </nav>
+      <div className="bezel min-w-0">
+        <div className="bezel-core min-w-0 px-6 py-6 md:px-10 md:py-8">
+          <DocViewer project={project} feature={f.name} path={selected} dir={f.dir} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function FeatureDetailView({ f, tab, onTab, doc, onDoc, cost, latest = null, tasksView = 'list', onTasksView = () => {}, now = Date.now(), project, projectName }) {
+  const score = f.score ?? f.legacyScore;
+  const working = latest && isWorking({ ...f, lastActivity: latest }, now);
+  return (
+    <div className="mx-auto max-w-6xl px-4 pb-24 pt-8 md:px-10 md:pt-12">
+      <Link to={projectHref(project)} className="fluid mb-6 inline-flex items-center gap-2 text-sm text-[var(--color-dim)] transition-colors hover:text-[var(--color-fg)]">
+        <ArrowLeft weight="light" size={15} /> {projectName ? `Features de ${projectName}` : 'Features'}
+      </Link>
+
+      <header className="rise bezel mb-8">
+        <div className="bezel-core px-6 py-7 md:px-9 md:py-9">
+          <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
+            <div className="min-w-0">
+              <h1 className="break-words text-3xl font-semibold tracking-tight md:text-4xl">{f.name}</h1>
+              <p className="mt-2 text-sm text-[var(--color-dim)]">
+                {STATUS_LABEL[f.status] || f.status}, {f.workType || 'feature'}, na {LOCATION_LABEL[f.location]}, atualizada {timeAgo(f.updatedAt)}
+              </p>
+            </div>
+            <div className="flex shrink-0 gap-6 text-right">
+              <div><p className="text-2xl font-semibold tabular-nums">{f.tasks.total ? `${f.tasks.done}/${f.tasks.total}` : '—'}</p><p className="text-xs text-[var(--color-faint)]">tasks</p></div>
+              <div><p className="text-2xl font-semibold tabular-nums">{score ?? '—'}</p><p className="text-xs text-[var(--color-faint)]">score</p></div>
+            </div>
+          </div>
+          <div className="mt-8"><PhaseRail feature={f} size="lg" /></div>
+          <p className="mt-6 text-sm text-[var(--color-fg)]">
+            <span style={{ color: phaseMeta(f.phase).color }}>●</span> {nextAction(f)}
+          </p>
+          {latest && f.status !== 'completed' && (
+            <p className="mt-2 flex items-center gap-2 text-sm text-[var(--color-dim)]">
+              {working && (
+                <span className="relative inline-flex h-2 w-2" aria-label="trabalhando agora">
+                  <span className="absolute inset-0 animate-ping rounded-full bg-[var(--color-phase-implement)] opacity-60 motion-reduce:hidden" />
+                  <span className="relative h-2 w-2 rounded-full bg-[var(--color-phase-implement)]" />
+                </span>
+              )}
+              <span>Último evento: {latest.title}, {timeAgo(latest.ts, now)}</span>
+              <button type="button" onClick={() => onTab('activity')} className="text-[var(--color-phase-proposal)] hover:underline">ver atividade</button>
+            </p>
+          )}
+          <div className="mt-5 flex flex-wrap gap-2">
+            <EditorButton path={f.dir} label="Abrir pasta da feature no VS Code" />
+            <CopyButton text={f.name} label="Copiar nome" />
+          </div>
+          {f.rootStale && (
+            <p className="mt-3 flex items-start gap-2 text-sm text-[var(--color-warn)]">
+              <WarningCircle weight="light" size={17} className="mt-0.5 shrink-0" />
+              A worktree dona desta feature não tem os arquivos dela. O que aparece é a cópia da raiz, que pode estar desatualizada.
+            </p>
+          )}
+        </div>
+      </header>
+
+      <div role="tablist" aria-label="Seções da feature" className="rise-2 mb-6 inline-flex rounded-full bg-white/[0.03] p-1 shadow-[inset_0_0_0_1px_var(--color-hair)]">
+        {TABS.map((t) => (
+          <button
+            key={t.id}
+            role="tab"
+            type="button"
+            aria-selected={tab === t.id}
+            onClick={() => onTab(t.id)}
+            className={[
+              'fluid rounded-full px-4 py-1.5 text-sm transition-colors active:scale-[0.98]',
+              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 === 'tasks' && f.tasks.total ? ` ${f.tasks.total}` : ''}{t.id === 'docs' ? ` ${f.documents.length}` : ''}
+          </button>
+        ))}
+      </div>
+
+      <div className="rise-3">
+        {tab === 'overview' && <OverviewTab f={f} cost={cost} />}
+        {tab === 'tasks' && <TasksTab f={f} cost={cost} view={tasksView} onView={onTasksView} />}
+        {tab === 'docs' && <DocsTab f={f} doc={doc} onDoc={onDoc} project={project} />}
+        {tab === 'activity' && (
+          <div className="bezel"><div className="bezel-core px-5 py-5"><ActivityFeed project={project} feature={f.name} /></div></div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default function FeatureDetail() {
+  const { name, project } = useParams();
+  const [params, setParams] = useSearchParams();
+  const tab = TABS.some((t) => t.id === params.get('tab')) ? params.get('tab') : 'overview';
+  const doc = params.get('doc');
+  const { data, error, loading } = useMorphQuery(`${apiBase(project)}/features/${encodeURIComponent(name)}`, { project });
+  // The cost rides on the activity endpoint (it owns the event stream); one
+  // line of feed is enough to get it, and it refreshes with the log.
+  const costQuery = useMorphQuery(`${apiBase(project)}/activity?feature=${encodeURIComponent(name)}&limit=1`, { scope: 'activity', project });
+  const [tasksView, setTasksView] = usePref('tasks.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]);
+  const onDoc = useCallback((path) => setParams((p) => { const n = new URLSearchParams(p); n.set('tab', 'docs'); n.set('doc', path); return n; }), [setParams]);
+
+  if (error) {
+    return (
+      <div className="mx-auto max-w-3xl px-4 pt-16 md:px-10">
+        <Link to={projectHref(project)} className="text-sm text-[var(--color-dim)] hover:text-[var(--color-fg)]">Voltar para Features</Link>
+        <p className="mt-6 text-lg">Não encontrei a feature “{name}”.</p>
+        <p className="mt-1 text-sm text-[var(--color-dim)]">{error}</p>
+      </div>
+    );
+  }
+  if (loading || !data) return <p className="px-10 pt-16 text-sm text-[var(--color-faint)]">Lendo a feature…</p>;
+  return (
+    <FeatureDetailView
+      f={data} tab={tab} onTab={onTab} doc={doc} onDoc={onDoc}
+      cost={costQuery.data?.cost ?? null} latest={costQuery.data?.items?.[0] ?? null}
+      tasksView={tasksView} onTasksView={setTasksView} now={now} project={project}
+    />
+  );
+}