From 9f88d5b433d42d686e5ae3c40c19a6ba3a1a7b4c Mon Sep 17 00:00:00 2001
From: Lukas May <lukas.may@carealytix.com>
Date: Wed, 4 Mar 2026 05:44:23 +0100
Subject: [PATCH] feat: Replace flat phase sidebar with vertical execution
 graph

Phases are now grouped by dependency depth using groupPhasesByDependencyLevel.
Single-phase layers render as compact nodes, multi-phase layers are wrapped in
a dashed "PARALLEL" container. Connectors between layers turn green when prior
layers are all completed. Staggered entrance animation per layer.
---
 apps/web/src/components/ExecutionTab.tsx      |  43 +--
 .../src/components/execution/PhaseGraph.tsx   | 247 ++++++++++++++++++
 apps/web/src/components/execution/index.ts    |   2 +-
 apps/web/src/index.css                        |   5 +
 4 files changed, 264 insertions(+), 33 deletions(-)
 create mode 100644 apps/web/src/components/execution/PhaseGraph.tsx

diff --git a/apps/web/src/components/ExecutionTab.tsx b/apps/web/src/components/ExecutionTab.tsx
index bedd933..51118fe 100644
--- a/apps/web/src/components/ExecutionTab.tsx
+++ b/apps/web/src/components/ExecutionTab.tsx
@@ -9,7 +9,7 @@ import {
   TaskModal,
   type PhaseData,
 } from "@/components/execution";
-import { PhaseSidebarItem, type PhaseDependencyInfo } from "@/components/execution/PhaseSidebarItem";
+import { PhaseGraph } from "@/components/execution/PhaseGraph";
 import {
   PhaseDetailPanel,
   PhaseDetailEmpty,
@@ -39,22 +39,6 @@ export function ExecutionTab({
     [phases, dependencyEdges],
   );
 
-  // Build dependency info map from bulk edges (includes status for visual indicators)
-  const depInfoByPhase = useMemo(() => {
-    const map = new Map<string, PhaseDependencyInfo[]>();
-    const phaseIndex = new Map(sortedPhases.map((p, i) => [p.id, i + 1]));
-    const phaseStatus = new Map(sortedPhases.map((p) => [p.id, p.status]));
-    for (const edge of dependencyEdges) {
-      const depIdx = phaseIndex.get(edge.dependsOnPhaseId);
-      const depStatus = phaseStatus.get(edge.dependsOnPhaseId);
-      if (!depIdx || !depStatus) continue;
-      const existing = map.get(edge.phaseId) ?? [];
-      existing.push({ displayIndex: depIdx, status: depStatus });
-      map.set(edge.phaseId, existing);
-    }
-    return map;
-  }, [dependencyEdges, sortedPhases]);
-
   // Detail agent tracking: map phaseId → most recent active detail agent
   const agentsQuery = trpc.listAgents.useQuery();
   const allAgents = agentsQuery.data ?? [];
@@ -228,21 +212,16 @@ export function ExecutionTab({
               ))}
             </div>
           ) : (
-            <div className="space-y-0.5 pt-2">
-              {sortedPhases.map((phase, index) => (
-                <PhaseSidebarItem
-                  key={phase.id}
-                  phase={phase}
-                  displayIndex={index + 1}
-                  taskCount={
-                    taskCountsByPhase[phase.id] ?? { complete: 0, total: 0 }
-                  }
-                  dependencies={depInfoByPhase.get(phase.id) ?? []}
-                  isSelected={phase.id === activePhaseId}
-                  onClick={() => setSelectedPhaseId(phase.id)}
-                  detailAgent={detailAgentByPhase.get(phase.id) ?? null}
-                />
-              ))}
+            <div className="pt-2">
+              <PhaseGraph
+                phases={sortedPhases}
+                dependencyEdges={dependencyEdges}
+                taskCountsByPhase={taskCountsByPhase}
+                activePhaseId={activePhaseId}
+                onSelectPhase={setSelectedPhaseId}
+                detailAgentByPhase={detailAgentByPhase}
+                allDisplayIndices={allDisplayIndices}
+              />
               {isAddingPhase && (
                 <NewPhaseEntry
                   number={nextNumber}
diff --git a/apps/web/src/components/execution/PhaseGraph.tsx b/apps/web/src/components/execution/PhaseGraph.tsx
new file mode 100644
index 0000000..172630c
--- /dev/null
+++ b/apps/web/src/components/execution/PhaseGraph.tsx
@@ -0,0 +1,247 @@
+import { useMemo } from "react";
+import { Loader2 } from "lucide-react";
+import {
+  groupPhasesByDependencyLevel,
+  type DependencyEdge,
+} from "@codewalk-district/shared";
+import { StatusBadge } from "@/components/StatusBadge";
+import { mapEntityStatus, type StatusVariant } from "@/components/StatusDot";
+import { cn } from "@/lib/utils";
+import type { PhaseData } from "./ExecutionContext";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+interface PhaseGraphProps {
+  phases: PhaseData[];
+  dependencyEdges: DependencyEdge[];
+  taskCountsByPhase: Record<string, { complete: number; total: number }>;
+  activePhaseId: string | null;
+  onSelectPhase: (id: string) => void;
+  detailAgentByPhase: Map<string, { status: string }>;
+  allDisplayIndices: Map<string, number>;
+}
+
+// ---------------------------------------------------------------------------
+// Styling maps
+// ---------------------------------------------------------------------------
+
+const railDotClasses: Record<StatusVariant, string> = {
+  active:  "bg-status-active-dot",
+  success: "bg-status-success-dot",
+  warning: "bg-status-warning-dot",
+  error:   "bg-status-error-dot",
+  neutral: "bg-muted-foreground/30",
+  urgent:  "bg-status-urgent-dot",
+};
+
+const selectedRingClasses: Record<StatusVariant, string> = {
+  active:  "ring-status-active-dot/40",
+  success: "ring-status-success-dot/40",
+  warning: "ring-status-warning-dot/40",
+  error:   "ring-status-error-dot/40",
+  neutral: "ring-border",
+  urgent:  "ring-status-urgent-dot/40",
+};
+
+// ---------------------------------------------------------------------------
+// PhaseGraph — vertical execution graph ordered by dependency depth
+// ---------------------------------------------------------------------------
+
+export function PhaseGraph({
+  phases,
+  dependencyEdges,
+  taskCountsByPhase,
+  activePhaseId,
+  onSelectPhase,
+  detailAgentByPhase,
+  allDisplayIndices,
+}: PhaseGraphProps) {
+  const columns = useMemo(
+    () => groupPhasesByDependencyLevel(phases, dependencyEdges),
+    [phases, dependencyEdges],
+  );
+
+  if (columns.length === 0) return null;
+
+  return (
+    <div className="relative">
+      {columns.map((col, colIdx) => {
+        const isParallel = col.phases.length > 1;
+        const isFirst = colIdx === 0;
+
+        // Connector coloring: green if all prior layers completed
+        const prevAllCompleted =
+          colIdx > 0 &&
+          columns
+            .slice(0, colIdx)
+            .every((c) =>
+              c.phases.every(
+                (p) => mapEntityStatus(p.status) === "success",
+              ),
+            );
+
+        return (
+          <div
+            key={col.depth}
+            style={{
+              animation: "graph-layer-enter 0.25s ease-out both",
+              animationDelay: `${colIdx * 40}ms`,
+            }}
+          >
+            {/* Connector line between layers */}
+            {!isFirst && (
+              <LayerConnector completed={prevAllCompleted} />
+            )}
+
+            {isParallel ? (
+              <div className="relative rounded-lg border border-dashed border-border/60 px-1 pb-1 pt-3.5">
+                <span className="absolute -top-2.5 left-2.5 rounded-sm bg-background px-1.5 py-px text-[9px] font-semibold uppercase tracking-[0.12em] text-muted-foreground/50">
+                  Parallel &middot; {col.phases.length}
+                </span>
+                <div className="space-y-0.5">
+                  {col.phases.map((phase) => (
+                    <GraphNode
+                      key={phase.id}
+                      phase={phase}
+                      taskCount={
+                        taskCountsByPhase[phase.id] ?? {
+                          complete: 0,
+                          total: 0,
+                        }
+                      }
+                      isSelected={phase.id === activePhaseId}
+                      onClick={() => onSelectPhase(phase.id)}
+                      detailAgent={
+                        detailAgentByPhase.get(phase.id) ?? null
+                      }
+                      displayIndex={
+                        allDisplayIndices.get(phase.id) ?? 0
+                      }
+                    />
+                  ))}
+                </div>
+              </div>
+            ) : (
+              <GraphNode
+                phase={col.phases[0]}
+                taskCount={
+                  taskCountsByPhase[col.phases[0].id] ?? {
+                    complete: 0,
+                    total: 0,
+                  }
+                }
+                isSelected={col.phases[0].id === activePhaseId}
+                onClick={() => onSelectPhase(col.phases[0].id)}
+                detailAgent={
+                  detailAgentByPhase.get(col.phases[0].id) ?? null
+                }
+                displayIndex={
+                  allDisplayIndices.get(col.phases[0].id) ?? 0
+                }
+              />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// GraphNode — single phase in the execution graph
+// ---------------------------------------------------------------------------
+
+function GraphNode({
+  phase,
+  taskCount,
+  isSelected,
+  onClick,
+  detailAgent,
+  displayIndex,
+}: {
+  phase: PhaseData;
+  taskCount: { complete: number; total: number };
+  isSelected: boolean;
+  onClick: () => void;
+  detailAgent: { status: string } | null;
+  displayIndex: number;
+}) {
+  const variant = mapEntityStatus(phase.status);
+  const isDetailing =
+    detailAgent?.status === "running" ||
+    detailAgent?.status === "waiting_for_input";
+  const detailDone = detailAgent?.status === "idle";
+
+  return (
+    <button
+      className={cn(
+        "group flex w-full items-start gap-2.5 rounded-md px-2 py-2 text-left transition-all",
+        isSelected
+          ? cn("bg-accent shadow-xs ring-1", selectedRingClasses[variant])
+          : "hover:bg-accent/40",
+      )}
+      onClick={onClick}
+    >
+      {/* Rail dot */}
+      <div
+        className={cn(
+          "mt-[5px] h-2.5 w-2.5 shrink-0 rounded-full transition-all",
+          railDotClasses[variant],
+          variant === "active" && "animate-status-pulse",
+          isSelected && "scale-125",
+        )}
+      />
+
+      {/* Content */}
+      <div className="min-w-0 flex-1">
+        <div className="flex items-center gap-1.5">
+          <span className="font-mono text-[10px] font-bold leading-none text-muted-foreground/60">
+            {displayIndex}
+          </span>
+          <span className="min-w-0 flex-1 truncate text-[13px] font-medium leading-tight">
+            {phase.name}
+          </span>
+          <StatusBadge
+            status={phase.status}
+            className="shrink-0 text-[9px]"
+          />
+        </div>
+        <div className="mt-0.5 pl-[18px] text-[11px] text-muted-foreground">
+          {isDetailing ? (
+            <span className="flex items-center gap-1 text-status-active-fg">
+              <Loader2 className="h-3 w-3 animate-spin" />
+              Detailing…
+            </span>
+          ) : detailDone && taskCount.total === 0 ? (
+            <span className="text-status-warning-fg">Review changes</span>
+          ) : taskCount.total === 0 ? (
+            <span>No tasks</span>
+          ) : (
+            <span>
+              {taskCount.complete}/{taskCount.total} tasks
+            </span>
+          )}
+        </div>
+      </div>
+    </button>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// LayerConnector — vertical line between dependency layers
+// ---------------------------------------------------------------------------
+
+function LayerConnector({ completed }: { completed: boolean }) {
+  return (
+    <div className="flex justify-center py-px">
+      <div
+        className={cn(
+          "h-3.5 w-[2px] rounded-full",
+          completed ? "bg-status-success-dot/50" : "bg-border/70",
+        )}
+      />
+    </div>
+  );
+}
diff --git a/apps/web/src/components/execution/index.ts b/apps/web/src/components/execution/index.ts
index ecfc58c..4dc770b 100644
--- a/apps/web/src/components/execution/index.ts
+++ b/apps/web/src/components/execution/index.ts
@@ -1,7 +1,7 @@
 export { ExecutionProvider, useExecutionContext } from "./ExecutionContext";
 export { PlanSection } from "./PlanSection";
 export { PhaseActions } from "./PhaseActions";
-export { PhaseSidebarItem } from "./PhaseSidebarItem";
+export { PhaseGraph } from "./PhaseGraph";
 export { PhaseDetailPanel, PhaseDetailEmpty } from "./PhaseDetailPanel";
 export { TaskModal } from "./TaskModal";
 export type { TaskCounts, FlatTaskEntry, PhaseData } from "./ExecutionContext";
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 4301c2f..8a40ac7 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -279,6 +279,11 @@
   100% { background-position: 200% 0; }
 }
 
+@keyframes graph-layer-enter {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
 /* Global focus-visible styles */
 *:focus-visible {
   outline: 2px solid hsl(var(--ring));