@polymorphism-tech/morph-spec 8.37.1 → 8.40.0

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

@@ -1,408 +1,277 @@
-import { useCallback, useMemo } from 'react';
-import { Handle, Position } from '@xyflow/react';
-import morphData from 'virtual:morph-data';
-import FlowGraph from '../components/FlowGraph.jsx';
-import DetailPanel from '../components/DetailPanel.jsx';
-import { useDetailPanel } from '../hooks/useDetailPanel.js';
-
-// Phase color palette by phase id
-const PHASE_COLORS = {
-  proposal:  { bg: '#166534', border: '#22c55e', text: '#bbf7d0' },
-  uiux:      { bg: '#854d0e', border: '#f59e0b', text: '#fef3c7' },
-  plan:      { bg: '#7c2d12', border: '#fb923c', text: '#fed7aa' },
-  implement: { bg: '#0e7490', border: '#22d3ee', text: '#cffafe' },
-  review:    { bg: '#6d28d9', border: '#a78bfa', text: '#ede9fe' },
-};
-
-const GATED_PHASES = new Set(['uiux', 'plan', 'review']);
-
-// Gate node: small gold square with "G" label
-function GateNode({ data }) {
-  return (
-    <div
-      title={data.label}
-      className="flex items-center justify-center rounded-sm select-none cursor-default"
-      style={{
-        width: 32,
-        height: 32,
-        background: '#78350f',
-        border: '2px solid #f59e0b',
-        boxShadow: '0 0 8px #f59e0b44',
-        color: '#fef3c7',
-        fontWeight: 700,
-        fontSize: 12,
-      }}
-    >
-      <Handle type="target" position={Position.Left} style={{ background: '#f59e0b', width: 7, height: 7 }} />
-      G
-      <Handle type="source" position={Position.Right} style={{ background: '#f59e0b', width: 7, height: 7 }} />
-    </div>
-  );
-}
-
-// Phase node: colored block with name and optional/index badge
-function PhaseNode({ data }) {
-  const c = PHASE_COLORS[data.phaseId] || PHASE_COLORS.sync;
-  const isOptional = data.optional;
-
-  return (
-    <div
-      className="rounded-lg px-4 py-3 min-w-[140px] select-none cursor-pointer"
-      style={{
-        background: c.bg,
-        border: `2px ${isOptional ? 'dashed' : 'solid'} ${c.border}`,
-        boxShadow: `0 0 10px ${c.border}33`,
-      }}
-    >
-      <Handle type="target" position={Position.Left} style={{ background: c.border, width: 8, height: 8 }} />
-
-      <div className="text-white text-sm font-bold leading-tight">{data.label}</div>
-      <div className="mt-1 text-[10px] font-medium" style={{ color: c.text }}>
-        {isOptional ? 'optional' : `index: ${data.index}`}
-      </div>
-
-      <Handle type="source" position={Position.Right} style={{ background: c.border, width: 8, height: 8 }} />
-    </div>
-  );
-}
-
-const nodeTypes = { phaseNode: PhaseNode, gateNode: GateNode };
-
-// Build nodes + edges with manual horizontal layout
-function buildPipelineGraph(phases) {
-  const nodes = [];
-  const edges = [];
-
-  // Layout constants
-  const PHASE_W = 150;
-  const PHASE_H = 68;
-  const GATE_W = 32;
-  const GATE_H = 32;
-  const GAP = 60; // gap between a phase and the next gate / phase
-  const Y_CENTER = 0;
-
-  // Pre-compute x positions for each phase and its preceding gate (if gated)
-  // Walk phases left to right, tracking current x cursor
-  let cursorX = 0;
-  const phaseLayout = []; // { phase, x, gateX? }
-
-  for (const phase of phases) {
-    if (GATED_PHASES.has(phase.id)) {
-      // Insert gate before this phase
-      const gateX = cursorX;
-      cursorX += GATE_W + GAP;
-      phaseLayout.push({ phase, x: cursorX, gateX });
-    } else {
-      phaseLayout.push({ phase, x: cursorX, gateX: null });
-    }
-    cursorX += PHASE_W + GAP;
-  }
-
-  // Build nodes
-  for (const { phase, x, gateX } of phaseLayout) {
-    const c = PHASE_COLORS[phase.id] || PHASE_COLORS.sync;
-
-    // Gate node (if any)
-    if (gateX !== null) {
-      nodes.push({
-        id: `gate-${phase.id}`,
-        type: 'gateNode',
-        data: { label: `Gate: ${phase.displayName}` },
-        position: { x: gateX, y: Y_CENTER + (PHASE_H - GATE_H) / 2 },
-      });
-    }
-
-    // Phase node
-    nodes.push({
-      id: phase.id,
-      type: 'phaseNode',
-      data: {
-        label: phase.displayName,
-        phaseId: phase.id,
-        optional: phase.optional,
-        index: phase.index,
-        color: c.border,
-        phaseRef: phase,
-      },
-      position: { x, y: Y_CENTER },
-    });
-  }
-
-  // Build edges: chain gates and phases in sequence
-  // sequence: ph0 → gate-ph1 → ph1 → gate-ph2 → ph2 → ...
-  for (let i = 0; i < phaseLayout.length; i++) {
-    const curr = phaseLayout[i];
-    const next = phaseLayout[i + 1];
-
-    if (!next) continue;
-
-    const sourceId = curr.phase.id;
-
-    if (next.gateX !== null) {
-      // phase → gate → next-phase (two edges)
-      edges.push({
-        id: `edge-${sourceId}-gate-${next.phase.id}`,
-        source: sourceId,
-        target: `gate-${next.phase.id}`,
-        type: 'smoothstep',
-        style: { stroke: '#475569', strokeWidth: 1.8 },
-      });
-      edges.push({
-        id: `edge-gate-${next.phase.id}-${next.phase.id}`,
-        source: `gate-${next.phase.id}`,
-        target: next.phase.id,
-        type: 'smoothstep',
-        style: { stroke: '#475569', strokeWidth: 1.8 },
-      });
-    } else {
-      // phase → phase (no gate)
-      edges.push({
-        id: `edge-${sourceId}-${next.phase.id}`,
-        source: sourceId,
-        target: next.phase.id,
-        type: 'smoothstep',
-        style: { stroke: '#475569', strokeWidth: 1.8 },
-      });
-    }
-  }
-
-  return { nodes, edges };
-}
-
-// Detail panel content for a phase
-function PhaseDetail({ phase, agents }) {
-  const c = PHASE_COLORS[phase.id] || PHASE_COLORS.sync;
-  const isGated = GATED_PHASES.has(phase.id);
-
-  // Agents active in this phase
-  const activeAgents = agents.filter(
-    (a) => a.activePhases?.includes(phase.id) || a.activePhases?.includes('*')
-  );
-
-  return (
-    <div className="text-sm text-gray-200 space-y-5">
-      {/* Phase badge + optional/gated indicators */}
-      <div className="flex flex-wrap items-center gap-2">
-        <span
-          className="px-2 py-0.5 rounded text-xs font-bold"
-          style={{ background: c.bg, color: c.text, border: `1px solid ${c.border}` }}
-        >
-          Phase {phase.index}
-        </span>
-        {phase.optional && (
-          <span className="px-2 py-0.5 rounded text-xs bg-gray-800 border border-dashed border-gray-600 text-gray-400">
-            optional
-          </span>
-        )}
-        {isGated && (
-          <span className="px-2 py-0.5 rounded text-xs bg-yellow-900/50 border border-yellow-600 text-yellow-300">
-            approval gate
-          </span>
-        )}
-        {phase.folder && (
-          <span className="px-2 py-0.5 rounded text-xs font-mono bg-gray-800 border border-gray-700 text-gray-400">
-            {phase.folder}
-          </span>
-        )}
-      </div>
-
-      {/* Goals */}
-      {phase.goals?.length > 0 && (
-        <div>
-          <p className="text-gray-500 text-xs uppercase tracking-wide mb-2">Goals</p>
-          <ul className="space-y-1.5">
-            {phase.goals.map((g, i) => (
-              <li key={i} className="flex gap-2 text-xs text-gray-300">
-                <span className="text-gray-600 flex-shrink-0">•</span>
-                {g}
-              </li>
-            ))}
-          </ul>
-        </div>
-      )}
-
-      {/* Required outputs */}
-      {phase.requiredOutputs?.length > 0 && (
-        <div>
-          <p className="text-gray-500 text-xs uppercase tracking-wide mb-2">Required Outputs</p>
-          <div className="flex flex-wrap gap-1">
-            {phase.requiredOutputs.map((o) => (
-              <span key={o} className="px-2 py-0.5 rounded text-xs bg-green-900/50 border border-green-700 text-green-300 font-mono">
-                {o}
-              </span>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* Optional outputs */}
-      {phase.optionalOutputs?.length > 0 && (
-        <div>
-          <p className="text-gray-500 text-xs uppercase tracking-wide mb-2">Optional Outputs</p>
-          <div className="flex flex-wrap gap-1">
-            {phase.optionalOutputs.map((o) => (
-              <span key={o} className="px-2 py-0.5 rounded text-xs bg-gray-800 border border-gray-700 text-gray-400 font-mono">
-                {o}
-              </span>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* Active agents */}
-      {activeAgents.length > 0 && (
-        <div>
-          <p className="text-gray-500 text-xs uppercase tracking-wide mb-2">Active Agents ({activeAgents.length})</p>
-          <div className="space-y-1">
-            {activeAgents.map((a) => (
-              <div key={a.id} className="flex items-center justify-between text-xs px-2 py-1 bg-gray-800 rounded">
-                <span className="text-gray-200 font-medium truncate">{a.title}</span>
-                <span className="text-gray-500 ml-2 flex-shrink-0">T{a.tier}</span>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* Required skills */}
-      {phase.requiredSkills?.length > 0 && (
-        <div>
-          <p className="text-gray-500 text-xs uppercase tracking-wide mb-2">Required Skills</p>
-          <div className="space-y-1">
-            {phase.requiredSkills.map((s, i) => (
-              <div key={i} className="flex items-start gap-2 text-xs">
-                <span className="px-1.5 py-0.5 rounded bg-pink-900/50 border border-pink-700 text-pink-300 font-mono flex-shrink-0">
-                  {s.trigger}
-                </span>
-                <span className="text-gray-300 font-mono">{s.skill}</span>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* Recommended MCPs */}
-      {phase.recommendedMCPs?.length > 0 && (
-        <div>
-          <p className="text-gray-500 text-xs uppercase tracking-wide mb-2">Recommended MCPs</p>
-          <div className="flex flex-wrap gap-1">
-            {phase.recommendedMCPs.map((m) => (
-              <span key={m} className="px-2 py-0.5 rounded text-xs bg-blue-900/50 border border-blue-700 text-blue-300 font-mono">
-                {m}
-              </span>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* Pause points */}
-      {phase.pausePoints?.length > 0 && (
-        <div>
-          <p className="text-gray-500 text-xs uppercase tracking-wide mb-2">Pause Points</p>
-          <div className="space-y-1">
-            {phase.pausePoints.map((pp) => (
-              <div key={pp.id} className="flex items-center gap-2 text-xs px-2 py-1.5 bg-yellow-900/20 border border-yellow-700/50 rounded">
-                <span className="text-yellow-400 flex-shrink-0">&#x1F512;</span>
-                <span className="text-yellow-200">{pp.label}</span>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default function PhasePipeline() {
-  const { phases, agents } = morphData;
-  const { panel, openPanel, closePanel } = useDetailPanel();
-
-  const { nodes, edges } = useMemo(() => buildPipelineGraph(phases.list), [phases.list]);
-
-  const handleNodeClick = useCallback(
-    (_event, node) => {
-      if (node.type === 'gateNode') {
-        // Extract phase id from gate id ("gate-design" → "design")
-        const phaseId = node.id.replace('gate-', '');
-        const phase = phases.list.find((p) => p.id === phaseId);
-        if (phase) {
-          openPanel(`Gate: ${phase.displayName}`, (
-            <div className="text-sm text-gray-300 space-y-3">
-              <p className="text-yellow-300 text-xs">This gate requires explicit approval before the phase can begin.</p>
-              <p className="text-gray-400 text-xs">Gate ID: <span className="font-mono text-gray-300">{phaseId}</span></p>
-            </div>
-          ));
-        }
-        return;
-      }
-
-      if (node.type === 'phaseNode') {
-        const phase = node.data.phaseRef;
-        if (phase) {
-          openPanel(phase.displayName, (
-            <PhaseDetail phase={phase} agents={agents.list} />
-          ));
-        }
-      }
-    },
-    [openPanel, phases.list, agents.list]
-  );
-
-  return (
-    <div className="flex flex-col h-full">
-      {/* Header */}
-      <div className="px-6 py-4 border-b border-gray-800 flex-shrink-0">
-        <h1 className="text-white text-xl font-bold">Phase Pipeline</h1>
-        <p className="text-gray-400 text-sm mt-0.5">
-          Horizontal workflow of the 7 morph-spec phases. Gold gates mark required approval points. Dashed borders indicate optional phases.
-        </p>
-      </div>
-
-      {/* Flow graph */}
-      <div className="flex-1 relative">
-        <FlowGraph
-          nodes={nodes}
-          edges={edges}
-          nodeTypes={nodeTypes}
-          onNodeClick={handleNodeClick}
-          fitView
-        />
-
-        {/* Legend */}
-        <div className="absolute top-3 left-3 bg-gray-900/90 border border-gray-700 rounded-lg p-3 text-xs space-y-2 z-10">
-          <p className="text-gray-400 font-semibold uppercase tracking-wide text-[10px] mb-2">Legend</p>
-          <div className="flex items-center gap-2">
-            <span className="inline-block w-10 h-4 rounded-sm" style={{ background: '#166534', border: '2px solid #22c55e' }} />
-            <span className="text-gray-300">Phase (solid = required)</span>
-          </div>
-          <div className="flex items-center gap-2">
-            <span className="inline-block w-10 h-4 rounded-sm" style={{ background: '#854d0e', border: '2px dashed #f59e0b' }} />
-            <span className="text-gray-300">Phase (dashed = optional)</span>
-          </div>
-          <div className="flex items-center gap-2">
-            <span
-              className="inline-flex items-center justify-center rounded-sm text-[10px] font-bold flex-shrink-0"
-              style={{ width: 20, height: 20, background: '#78350f', border: '2px solid #f59e0b', color: '#fef3c7' }}
-            >
-              G
-            </span>
-            <span className="text-gray-300">Approval Gate</span>
-          </div>
-          <div className="flex items-center gap-2">
-            <span className="inline-block w-6 border-t-2 border-gray-500" />
-            <span className="text-gray-400">Sequence</span>
-          </div>
-        </div>
-
-        {/* Phase count badge */}
-        <div className="absolute top-3 right-3 bg-gray-900/90 border border-gray-700 rounded-lg px-3 py-1.5 text-xs text-gray-400 z-10">
-          {phases.list.length} phases · {phases.list.filter((p) => GATED_PHASES.has(p.id)).length} gates
-        </div>
-      </div>
-
-      <DetailPanel open={panel.open} title={panel.title} onClose={closePanel}>
-        {panel.content}
-      </DetailPanel>
-    </div>
-  );
-}
+import { useCallback, useMemo } from 'react';
+import { Handle, Position } from '@xyflow/react';
+import { SealCheck, Pause } from '@phosphor-icons/react';
+import morphData from 'virtual:morph-data';
+import FlowGraph from '../components/FlowGraph.jsx';
+import DetailPanel from '../components/DetailPanel.jsx';
+import EntityLink, { useSelection } from '../components/EntityLink.jsx';
+import { phaseMeta, GATE_LABEL } from '../lib/phases.js';
+
+const phaseColor = (id) => `var(--color-phase-${id})`;
+
+/** What each approval gate checks, in the words a reader of the pipeline needs. */
+const GATE_CHECKS = {
+  proposal: 'Confere o escopo da proposta: o problema, o que entra e o que fica de fora, antes de gastar esforço em design ou plano.',
+  uiux: 'Confere o design das telas (mockups e checklist de tela). É opcional: só existe quando a feature passa pela fase de UI/UX.',
+  plan: 'Confere a spec, as tasks e o plano de implementação. Depois dele a spec congela e a implementação começa.',
+  review: 'Confere a avaliação independente: um avaliador em contexto novo dá o score, que precisa ser pelo menos 9, com o verify verde.',
+};
+
+const GATE_PREFIX = 'gate-';
+const gateId = (phaseId) => `${GATE_PREFIX}${phaseId}`;
+const hasGate = (phaseId) => Object.prototype.hasOwnProperty.call(GATE_LABEL, phaseId);
+
+function GateNode({ data }) {
+  return (
+    <div
+      title={data.label}
+      className="fluid flex cursor-pointer select-none items-center gap-1.5 rounded-full bg-[var(--color-raised)] px-3 py-1.5 text-[12px] font-medium text-[var(--color-warn)] transition-shadow"
+      style={{ boxShadow: data.selected ? '0 0 0 2px var(--color-warn)' : 'inset 0 0 0 1px var(--color-warn)' }}
+    >
+      <Handle type="target" position={Position.Left} style={{ background: 'var(--color-warn)', width: 6, height: 6, border: 0 }} />
+      <SealCheck weight="light" size={15} />
+      {data.label}
+      <Handle type="source" position={Position.Right} style={{ background: 'var(--color-warn)', width: 6, height: 6, border: 0 }} />
+    </div>
+  );
+}
+
+function PhaseNode({ data }) {
+  const color = phaseColor(data.phaseId);
+  return (
+    <div
+      className="fluid cursor-pointer select-none rounded-xl bg-[var(--color-raised)] px-4 py-3 transition-shadow"
+      style={{
+        width: PHASE_W,
+        border: `1.5px ${data.optional ? 'dashed' : 'solid'} ${color}`,
+        boxShadow: data.selected ? `0 0 0 2px ${color}` : 'none',
+      }}
+    >
+      <Handle type="target" position={Position.Left} style={{ background: color, width: 7, height: 7, border: 0 }} />
+      <div className="text-[14px] font-semibold leading-tight text-[var(--color-fg)]">{data.label}</div>
+      <div className="mt-1 text-[12px] text-[var(--color-dim)]">
+        {data.optional ? 'opcional' : `fase ${data.position}`}
+        {data.skill ? ` · ${data.skill}` : ''}
+      </div>
+      <Handle type="source" position={Position.Right} style={{ background: color, width: 7, height: 7, border: 0 }} />
+    </div>
+  );
+}
+
+const nodeTypes = { phaseNode: PhaseNode, gateNode: GateNode };
+
+const PHASE_W = 200;
+const PHASE_H = 64;
+const GATE_W = 150;
+const GATE_H = 32;
+const GAP = 48;
+
+/** Left to right: each phase, then its gate (when it has one), then the next phase. */
+function buildPipelineGraph(phases, sel) {
+  const nodes = [];
+  const edges = [];
+  const edge = (source, target) => edges.push({
+    id: `e-${source}-${target}`, source, target, type: 'smoothstep',
+    style: { stroke: 'var(--color-hair-strong)', strokeWidth: 1.5 },
+  });
+
+  let x = 0;
+  let prev = null;
+  phases.forEach((phase, i) => {
+    nodes.push({
+      id: phase.id,
+      type: 'phaseNode',
+      data: {
+        label: phaseMeta(phase.id).label,
+        phaseId: phase.id,
+        optional: phase.optional,
+        position: i + 1,
+        skill: phase.skill || null,
+        color: phaseColor(phase.id),
+        selected: sel === phase.id,
+      },
+      position: { x, y: 0 },
+    });
+    if (prev) edge(prev, phase.id);
+    prev = phase.id;
+    x += PHASE_W + GAP;
+
+    if (hasGate(phase.id)) {
+      const id = gateId(phase.id);
+      nodes.push({
+        id,
+        type: 'gateNode',
+        data: { label: GATE_LABEL[phase.id], color: 'var(--color-warn)', selected: sel === id },
+        position: { x, y: (PHASE_H - GATE_H) / 2 },
+      });
+      edge(prev, id);
+      prev = id;
+      x += GATE_W + GAP;
+    }
+  });
+  return { nodes, edges };
+}
+
+function Section({ title, children }) {
+  return (
+    <section>
+      <h3 className="mb-2 text-xs font-medium text-[var(--color-faint)]">{title}</h3>
+      {children}
+    </section>
+  );
+}
+
+function Chip({ children }) {
+  return (
+    <span className="inline-flex items-center rounded-full px-2 py-0.5 font-mono text-[12px] text-[var(--color-dim)] shadow-[inset_0_0_0_1px_var(--color-hair)]">
+      {children}
+    </span>
+  );
+}
+
+// Exported for the render smoke test: no page state, only the phase and the personas.
+export function PhaseDetail({ phase, agents }) {
+  const color = phaseColor(phase.id);
+  // Personas this phase's skill dispatches (derived by the agents scanner).
+  const activeAgents = agents.filter((a) => a.activePhases?.includes(phase.id));
+
+  return (
+    <div className="space-y-6 text-sm text-[var(--color-fg)]">
+      <div className="flex flex-wrap items-center gap-2">
+        <span className="inline-block h-2.5 w-2.5 rounded-full" style={{ background: color }} />
+        {phase.optional && <Chip>opcional</Chip>}
+        {hasGate(phase.id) && <EntityLink kind="phase" id={gateId(phase.id)} chip>{GATE_LABEL[phase.id]}</EntityLink>}
+        {phase.folder && <Chip>{phase.folder}/</Chip>}
+      </div>
+
+      {phase.skill && (
+        <Section title="Skill que conduz a fase">
+          <EntityLink kind="skill" id={phase.skill} chip>{phase.skill}</EntityLink>
+        </Section>
+      )}
+
+      {phase.goals?.length > 0 && (
+        <Section title="Objetivos">
+          <ul className="list-disc space-y-1.5 pl-5 text-[var(--color-dim)]">
+            {phase.goals.map((g, i) => <li key={i}>{g}</li>)}
+          </ul>
+        </Section>
+      )}
+
+      {(phase.requiredOutputs?.length > 0 || phase.optionalOutputs?.length > 0) && (
+        <Section title="Artefatos que a fase produz">
+          <div className="space-y-2">
+            {phase.requiredOutputs?.length > 0 && (
+              <div className="flex flex-wrap items-center gap-1.5">
+                <span className="mr-1 text-[12px] text-[var(--color-dim)]">Obrigatórios:</span>
+                {phase.requiredOutputs.map((o) => <Chip key={o}>{o}</Chip>)}
+              </div>
+            )}
+            {phase.optionalOutputs?.length > 0 && (
+              <div className="flex flex-wrap items-center gap-1.5">
+                <span className="mr-1 text-[12px] text-[var(--color-dim)]">Opcionais:</span>
+                {phase.optionalOutputs.map((o) => <Chip key={o}>{o}</Chip>)}
+              </div>
+            )}
+          </div>
+        </Section>
+      )}
+
+      <Section title={`Personas despachadas (${activeAgents.length})`}>
+        {activeAgents.length > 0 ? (
+          <ul className="space-y-1">
+            {activeAgents.map((a) => (
+              <li key={a.id} className="flex items-center justify-between gap-3 rounded-lg bg-white/[0.03] px-3 py-1.5">
+                <EntityLink kind="persona" id={a.id}>{a.title}</EntityLink>
+                <span className="shrink-0 font-mono text-[12px] text-[var(--color-faint)]">morph-{a.id}</span>
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <p className="text-[var(--color-dim)]">A thread principal conduz esta fase sem despachar persona.</p>
+        )}
+      </Section>
+
+      {phase.pausePoints?.length > 0 && (
+        <Section title="Pontos de pausa">
+          <ul className="space-y-1">
+            {phase.pausePoints.map((pp) => (
+              <li key={pp.id} className="flex items-center gap-2 rounded-lg bg-white/[0.03] px-3 py-1.5 text-[var(--color-dim)]">
+                <Pause weight="light" size={14} className="shrink-0 text-[var(--color-warn)]" />
+                {pp.label}
+              </li>
+            ))}
+          </ul>
+        </Section>
+      )}
+
+      {phase.recommendedMCPs?.length > 0 && (
+        <Section title="Servidores MCP recomendados">
+          <div className="flex flex-wrap gap-1.5">
+            {phase.recommendedMCPs.map((m) => <Chip key={m}>{m}</Chip>)}
+          </div>
+        </Section>
+      )}
+    </div>
+  );
+}
+
+function GateDetail({ phase }) {
+  return (
+    <div className="space-y-5 text-sm text-[var(--color-dim)]">
+      <p>{GATE_CHECKS[phase.id] || 'Ponto de aprovação ao fim desta fase.'}</p>
+      <p>
+        Fica ao fim da fase <EntityLink kind="phase" id={phase.id}>{phaseMeta(phase.id).label}</EntityLink>.
+        Com trust <code className="font-mono text-[var(--color-fg)]">auto</code> (o padrão) o gate passa sozinho,
+        a menos que um sinal de risco o pause; aí a decisão volta para você. Com trust <code className="font-mono text-[var(--color-fg)]">manual</code> ele
+        sempre espera a sua aprovação.
+      </p>
+    </div>
+  );
+}
+
+export default function PhasePipeline() {
+  const { phases, agents } = morphData;
+  const [sel, setSel] = useSelection();
+
+  const { nodes, edges } = useMemo(() => buildPipelineGraph(phases.list, sel), [phases.list, sel]);
+  const gateCount = phases.list.filter((p) => hasGate(p.id)).length;
+
+  const handleNodeClick = useCallback((_event, node) => setSel(node.id), [setSel]);
+  const close = useCallback(() => setSel(null), [setSel]);
+
+  const gatePhase = sel?.startsWith(GATE_PREFIX)
+    ? phases.list.find((p) => gateId(p.id) === sel && hasGate(p.id)) || null
+    : null;
+  const phase = gatePhase ? null : phases.list.find((p) => p.id === sel) || null;
+
+  let title = '';
+  let subtitle;
+  if (phase) { title = phaseMeta(phase.id).label; subtitle = phase.optional ? 'Fase opcional' : 'Fase'; }
+  if (gatePhase) { title = GATE_LABEL[gatePhase.id]; subtitle = 'Ponto de aprovação'; }
+
+  return (
+    <div className="flex h-full flex-col">
+      <div className="shrink-0 border-b border-[var(--color-hair)] px-6 py-4">
+        <h1 className="text-xl font-semibold tracking-tight text-[var(--color-fg)]">Fases</h1>
+        <p className="mt-0.5 text-sm text-[var(--color-dim)]">
+          O caminho de uma feature: {phases.list.length} fases, com {gateCount} pontos de aprovação.
+          Borda tracejada marca fase opcional. Clique numa fase ou num gate para ver os detalhes.
+        </p>
+      </div>
+
+      <div className="relative flex-1">
+        <FlowGraph nodes={nodes} edges={edges} nodeTypes={nodeTypes} onNodeClick={handleNodeClick} fitView />
+
+        <div className="absolute right-3 top-3 z-10 rounded-full bg-[var(--color-ink)]/80 px-3 py-1.5 text-[12px] text-[var(--color-dim)] shadow-[inset_0_0_0_1px_var(--color-hair)]">
+          {phases.list.length} fases · {gateCount} gates
+        </div>
+      </div>
+
+      <DetailPanel open={Boolean(phase || gatePhase)} title={title} subtitle={subtitle} onClose={close}>
+        {phase && <PhaseDetail key={phase.id} phase={phase} agents={agents.list} />}
+        {gatePhase && <GateDetail phase={gatePhase} />}
+      </DetailPanel>
+    </div>
+  );
+}