fix test run UI issues

Author: pk910

web-ui/src/components/graph/useTaskGraph.ts

@@ -277,6 +277,35 @@ export function useTaskGraph(
       maxLane = Math.max(maxLane, lane);
     }
 
+    // Compute per-row Y positions with extra gap at convergence/divergence transitions
+    // When closing edges from a multi-lane row converge to a node that also fans out
+    // to the next multi-lane row, the smoothstep curves overlap. Add extra gap there.
+    const rowLaneCounts = new Map<number, number>();
+    for (const r of sortedRows) {
+      rowLaneCounts.set(r, byRow.get(r)!.length);
+    }
+
+    const rowYPositions = new Map<number, number>();
+    let currentY = 0;
+    for (let i = 0; i < sortedRows.length; i++) {
+      const r = sortedRows[i];
+      rowYPositions.set(r, currentY);
+
+      if (i < sortedRows.length - 1) {
+        let gap = VERTICAL_GAP;
+        const thisLanes = rowLaneCounts.get(r) || 1;
+        const nextLanes = rowLaneCounts.get(sortedRows[i + 1]) || 1;
+
+        // Add extra gap when multi-lane rows are close together
+        // (converging edges from this row + diverging edges to next row would overlap)
+        if (thisLanes > 1 || nextLanes > 1) {
+          gap += 30;
+        }
+
+        currentY += NODE_HEIGHT + gap;
+      }
+    }
+
     // Convert to React Flow format
     const totalWidth = (maxLane + 1) * (NODE_WIDTH + HORIZONTAL_GAP) - HORIZONTAL_GAP;
     const offsetX = -totalWidth / 2;
@@ -294,7 +323,7 @@ export function useTaskGraph(
         type: 'taskNode',
         position: {
           x: offsetX + lane * (NODE_WIDTH + HORIZONTAL_GAP),
-          y: nodeRow * (NODE_HEIGHT + VERTICAL_GAP),
+          y: rowYPositions.get(nodeRow) || 0,
         },
         data: {
           task,

web-ui/src/pages/TestRun.tsx

@@ -11,7 +11,7 @@ import TaskDetails from '../components/task/TaskDetails';
 import { TaskGraph } from '../components/graph';
 import { formatDuration, formatRelativeTime } from '../utils/time';
 import * as api from '../api/client';
-import type { SSEEvent, TaskDetails as TaskDetailsType, TaskLogEntry, TestRunDetails } from '../types/api';
+import type { SSEEvent, TaskDetails as TaskDetailsType, TaskLogEntry, TaskState, TestRunDetails } from '../types/api';
 
 type ViewMode = 'list' | 'graph';
 
@@ -75,7 +75,7 @@ function TestRun() {
       pendingTaskRefreshRef.current.add(taskIndex);
 
       if (!refreshTimerRef.current) {
-        refreshTimerRef.current = setTimeout(flushTaskRefresh, 5000);
+        refreshTimerRef.current = setTimeout(flushTaskRefresh, 1000);
       }
     },
     [flushTaskRefresh]
@@ -149,8 +149,59 @@ function TestRun() {
           }
           break;
         case 'task.started':
-        case 'task.completed':
-        case 'task.failed':
+          if (event.taskIndex !== undefined) {
+            // Immediate optimistic update
+            queryClient.setQueryData(queryKeys.testRunDetails(runIdNum), (oldData?: TestRunDetails) => {
+              if (!oldData?.tasks) return oldData;
+              return {
+                ...oldData,
+                tasks: oldData.tasks.map((task) =>
+                  task.index === event.taskIndex
+                    ? { ...task, started: true, status: 'running' as const, start_time: Date.now() }
+                    : task
+                ),
+              };
+            });
+            scheduleTaskRefresh(event.taskIndex);
+          }
+          break;
+        case 'task.completed': {
+          if (event.taskIndex !== undefined) {
+            const data = event.data as { result?: string };
+            const result = data.result === 'success' ? 'success' : data.result === 'failure' ? 'failure' : 'none';
+            queryClient.setQueryData(queryKeys.testRunDetails(runIdNum), (oldData?: TestRunDetails) => {
+              if (!oldData?.tasks) return oldData;
+              return {
+                ...oldData,
+                tasks: oldData.tasks.map((task) =>
+                  task.index === event.taskIndex
+                    ? { ...task, completed: true, status: 'complete' as const, result: result as TaskState['result'], stop_time: Date.now() }
+                    : task
+                ),
+              };
+            });
+            scheduleTaskRefresh(event.taskIndex);
+          }
+          break;
+        }
+        case 'task.failed': {
+          if (event.taskIndex !== undefined) {
+            const data = event.data as { error?: string };
+            queryClient.setQueryData(queryKeys.testRunDetails(runIdNum), (oldData?: TestRunDetails) => {
+              if (!oldData?.tasks) return oldData;
+              return {
+                ...oldData,
+                tasks: oldData.tasks.map((task) =>
+                  task.index === event.taskIndex
+                    ? { ...task, completed: true, status: 'complete' as const, result: 'failure' as const, result_error: data.error ?? '', stop_time: Date.now() }
+                    : task
+                ),
+              };
+            });
+            scheduleTaskRefresh(event.taskIndex);
+          }
+          break;
+        }
         case 'task.progress':
           if (event.taskIndex !== undefined) {
             scheduleTaskRefresh(event.taskIndex);