From af092ba16afe02a13de8154b6d476eca3b1eae56 Mon Sep 17 00:00:00 2001
From: Lukas May <lukas.may@carealytix.com>
Date: Wed, 4 Mar 2026 07:20:44 +0100
Subject: [PATCH] feat: Add task execution graph within phase detail panel

Tasks are now grouped by dependency depth using the same
groupPhasesByDependencyLevel utility. Parallel tasks are wrapped in dashed
containers, sequential layers connected by status-aware lines. Replaces
the flat TaskRow list and DependencyIndicator callout bars.
---
 .../components/execution/PhaseDetailPanel.tsx |  26 +--
 .../src/components/execution/TaskGraph.tsx    | 205 ++++++++++++++++++
 2 files changed, 214 insertions(+), 17 deletions(-)
 create mode 100644 apps/web/src/components/execution/TaskGraph.tsx

diff --git a/apps/web/src/components/execution/PhaseDetailPanel.tsx b/apps/web/src/components/execution/PhaseDetailPanel.tsx
index 99f3995..b9add77 100644
--- a/apps/web/src/components/execution/PhaseDetailPanel.tsx
+++ b/apps/web/src/components/execution/PhaseDetailPanel.tsx
@@ -5,7 +5,8 @@ import { trpc } from "@/lib/trpc";
 import { StatusBadge } from "@/components/StatusBadge";
 import { mapEntityStatus } from "@/components/StatusDot";
 import { PhaseNumberBadge } from "@/components/DependencyChip";
-import { TaskRow, type SerializedTask } from "@/components/TaskRow";
+import { type SerializedTask } from "@/components/TaskRow";
+import { TaskGraph } from "./TaskGraph";
 import { PhaseContentEditor } from "@/components/editor/PhaseContentEditor";
 import { ChangeSetBanner } from "@/components/ChangeSetBanner";
 import { Skeleton } from "@/components/Skeleton";
@@ -16,7 +17,6 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { sortByPriorityAndQueueTime } from "@codewalk-district/shared";
 import { useExecutionContext, type FlatTaskEntry } from "./ExecutionContext";
 import { cn } from "@/lib/utils";
 
@@ -196,7 +196,6 @@ export function PhaseDetailPanel({
 
   const isPendingReview = phase.status === "pending_review";
 
-  const sortedTasks = sortByPriorityAndQueueTime(tasks);
   const hasTasks = tasks.length > 0;
   const isDetailRunning =
     detailAgent?.status === "running" ||
@@ -406,22 +405,15 @@ export function PhaseDetailPanel({
               <Skeleton key={i} className="h-8 w-full" />
             ))}
           </div>
-        ) : sortedTasks.length === 0 ? (
+        ) : tasks.length === 0 ? (
           <p className="text-sm text-muted-foreground">No tasks yet</p>
         ) : (
-          <div>
-            {sortedTasks.map((task, idx) => (
-              <TaskRow
-                key={task.id}
-                task={task}
-                agentName={null}
-                blockedBy={taskDepsMap.get(task.id) ?? []}
-                isLast={idx === sortedTasks.length - 1}
-                onClick={() => setSelectedTaskId(task.id)}
-                onDelete={() => deleteTask.mutate({ id: task.id })}
-              />
-            ))}
-          </div>
+          <TaskGraph
+            tasks={tasks}
+            taskDepsRaw={taskDepsQuery.data ?? []}
+            onClickTask={setSelectedTaskId}
+            onDeleteTask={(id) => deleteTask.mutate({ id })}
+          />
         )}
       </div>
     </div>
diff --git a/apps/web/src/components/execution/TaskGraph.tsx b/apps/web/src/components/execution/TaskGraph.tsx
new file mode 100644
index 0000000..40ec706
--- /dev/null
+++ b/apps/web/src/components/execution/TaskGraph.tsx
@@ -0,0 +1,205 @@
+import { useMemo } from "react";
+import { X } 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 { SerializedTask } from "@/components/TaskRow";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+interface TaskGraphProps {
+  tasks: SerializedTask[];
+  /** Raw edges: { taskId, dependsOn: string[] } */
+  taskDepsRaw: Array<{ taskId: string; dependsOn: string[] }>;
+  onClickTask: (taskId: string) => void;
+  onDeleteTask?: (taskId: string) => void;
+}
+
+// ---------------------------------------------------------------------------
+// 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",
+};
+
+// ---------------------------------------------------------------------------
+// TaskGraph — vertical execution graph for tasks within a phase
+// ---------------------------------------------------------------------------
+
+export function TaskGraph({
+  tasks,
+  taskDepsRaw,
+  onClickTask,
+  onDeleteTask,
+}: TaskGraphProps) {
+  // Flatten task dep edges to DependencyEdge format for reuse of groupPhasesByDependencyLevel
+  const columns = useMemo(() => {
+    const edges: DependencyEdge[] = [];
+    for (const raw of taskDepsRaw) {
+      for (const depId of raw.dependsOn) {
+        edges.push({ phaseId: raw.taskId, dependsOnPhaseId: depId });
+      }
+    }
+    // groupPhasesByDependencyLevel accepts anything with { id, createdAt }
+    return groupPhasesByDependencyLevel(tasks, edges);
+  }, [tasks, taskDepsRaw]);
+
+  if (columns.length === 0) return null;
+
+  return (
+    <div className="relative">
+      {columns.map((col, colIdx) => {
+        const isParallel = col.phases.length > 1;
+        const isFirst = colIdx === 0;
+
+        const prevAllCompleted =
+          colIdx > 0 &&
+          columns
+            .slice(0, colIdx)
+            .every((c) =>
+              c.phases.every(
+                (t) => mapEntityStatus(t.status) === "success",
+              ),
+            );
+
+        return (
+          <div
+            key={col.depth}
+            style={{
+              animation: "graph-layer-enter 0.25s ease-out both",
+              animationDelay: `${colIdx * 30}ms`,
+            }}
+          >
+            {!isFirst && (
+              <TaskLayerConnector completed={prevAllCompleted} />
+            )}
+
+            {isParallel ? (
+              <div className="relative rounded-lg border border-dashed border-border/60 px-0.5 pb-0.5 pt-3">
+                <span className="absolute -top-2 left-2 rounded-sm bg-background px-1.5 py-px text-[8px] font-semibold uppercase tracking-[0.12em] text-muted-foreground/50">
+                  Parallel &middot; {col.phases.length}
+                </span>
+                <div className="space-y-px">
+                  {col.phases.map((task) => (
+                    <TaskNode
+                      key={task.id}
+                      task={task}
+
+                      onClick={() => onClickTask(task.id)}
+                      onDelete={
+                        onDeleteTask
+                          ? () => onDeleteTask(task.id)
+                          : undefined
+                      }
+                    />
+                  ))}
+                </div>
+              </div>
+            ) : (
+              <TaskNode
+                task={col.phases[0]}
+
+                onClick={() => onClickTask(col.phases[0].id)}
+                onDelete={
+                  onDeleteTask
+                    ? () => onDeleteTask(col.phases[0].id)
+                    : undefined
+                }
+              />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// TaskNode — single task in the execution graph
+// ---------------------------------------------------------------------------
+
+function TaskNode({
+  task,
+  onClick,
+  onDelete,
+}: {
+  task: SerializedTask;
+  onClick: () => void;
+  onDelete?: () => void;
+}) {
+  const variant = mapEntityStatus(task.status);
+
+  return (
+    <div
+      className={cn(
+        "group flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-left transition-all hover:bg-accent/50",
+      )}
+      onClick={onClick}
+    >
+      {/* Rail dot */}
+      <div
+        className={cn(
+          "h-2 w-2 shrink-0 rounded-full transition-all",
+          railDotClasses[variant],
+          variant === "active" && "animate-status-pulse",
+        )}
+      />
+
+      {/* Task name */}
+      <span className="min-w-0 flex-1 truncate text-[13px]">
+        {task.name}
+      </span>
+
+      {/* Status badge */}
+      <StatusBadge
+        status={task.status}
+        className="shrink-0 text-[9px]"
+      />
+
+      {/* Delete button */}
+      {onDelete && (
+        <button
+          className="shrink-0 rounded p-0.5 text-muted-foreground opacity-0 transition-opacity hover:text-destructive group-hover:opacity-100"
+          title="Delete task (Shift+click to skip confirmation)"
+          onClick={(e) => {
+            e.stopPropagation();
+            if (e.shiftKey || window.confirm(`Delete "${task.name}"?`)) {
+              onDelete();
+            }
+          }}
+        >
+          <X className="h-3.5 w-3.5" />
+        </button>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// TaskLayerConnector
+// ---------------------------------------------------------------------------
+
+function TaskLayerConnector({ completed }: { completed: boolean }) {
+  return (
+    <div className="flex justify-center py-px">
+      <div
+        className={cn(
+          "h-2.5 w-[2px] rounded-full",
+          completed ? "bg-status-success-dot/50" : "bg-border/70",
+        )}
+      />
+    </div>
+  );
+}