diff --git a/apps/web/src/components/execution/TaskGraph.tsx b/apps/web/src/components/execution/TaskGraph.tsx index 4495e48..bf22914 100644 --- a/apps/web/src/components/execution/TaskGraph.tsx +++ b/apps/web/src/components/execution/TaskGraph.tsx @@ -25,6 +25,8 @@ interface TaskGraphProps { agentNameMap: Map; onClickTask: (taskId: string) => void; onDeleteTask?: (taskId: string) => void; + /** Hide category badge and priority — use in compact contexts like the pipeline */ + compact?: boolean; } // --------------------------------------------------------------------------- @@ -51,6 +53,7 @@ export function TaskGraph({ agentNameMap, onClickTask, onDeleteTask, + compact = false, }: TaskGraphProps) { // Flatten task dep edges to DependencyEdge format for reuse of groupPhasesByDependencyLevel const columns = useMemo(() => { @@ -112,6 +115,7 @@ export function TaskGraph({ ? () => onDeleteTask(task.id) : undefined } + compact={compact} /> ))} @@ -127,6 +131,7 @@ export function TaskGraph({ ? () => onDeleteTask(col.phases[0].id) : undefined } + compact={compact} /> )} @@ -146,12 +151,14 @@ function TaskNode({ agentName, onClick, onDelete, + compact = false, }: { task: SerializedTask; blockedByCount: number; agentName?: string; onClick: () => void; onDelete?: () => void; + compact?: boolean; }) { const variant = mapEntityStatus(task.status); const catConfig = getCategoryConfig(task.category); @@ -163,10 +170,14 @@ function TaskNode({ ? "text-status-warning-fg" : null; + const hasSecondLine = + !compact && (true /* category badge always shows */ || priorityColor || agentName || blockedByCount > 0); + return (
@@ -179,13 +190,18 @@ function TaskNode({ )} /> - {/* Two-line content */} + {/* Content */}
- {/* Line 1: name + status + delete */} + {/* Line 1: name + status + blocked count (compact) + delete */}
{task.name} + {compact && blockedByCount > 0 && ( + + {blockedByCount} dep{blockedByCount === 1 ? "" : "s"} + + )} - {/* Line 2: category + priority + agent + blocked count */} -
- - {catConfig.label} - - {priorityColor && ( - - {task.priority} - - )} - {agentName && ( - - {agentName} - - )} - {blockedByCount > 0 && ( - - blocked by {blockedByCount} - - )} -
+ {/* Line 2: category + priority + agent + blocked count (full mode only) */} + {hasSecondLine && ( +
+ + {catConfig.label} + + {priorityColor && ( + + {task.priority} + + )} + {agentName && ( + + {agentName} + + )} + {blockedByCount > 0 && ( + + blocked by {blockedByCount} + + )} +
+ )}
); diff --git a/apps/web/src/components/pipeline/PipelinePhaseGroup.tsx b/apps/web/src/components/pipeline/PipelinePhaseGroup.tsx index ea9f3d5..68d8c0e 100644 --- a/apps/web/src/components/pipeline/PipelinePhaseGroup.tsx +++ b/apps/web/src/components/pipeline/PipelinePhaseGroup.tsx @@ -141,6 +141,7 @@ export function PipelinePhaseGroup({ phase, tasks, taskDepsRaw, isBlocked, detai blockedByCountMap={blockedByCountMap} agentNameMap={emptyAgentMap} onClickTask={setSelectedTaskId} + compact /> )}