@elevasis/ui 1.0.0

package/dist/chunk-RJCA5672.js

@@ -0,0 +1,1664 @@
+import { formatDuration } from './chunk-6BJOYF6E.js';
+import { BaseNode, useGraphTheme, BaseEdge, Graph_default, useDirectedChainHighlighting, useNodeSelection, GraphBackground, GraphLegend, GraphFitViewButton, GraphFitViewHandler, useFitViewTrigger } from './chunk-HUWJXLLF.js';
+import { isStepStartedContext, isConditionalRouteContext, isStepCompletedContext, isStepFailedContext, isLifecycleEvent, isIterationEvent, isToolCallEvent, toWorkflowLogMessage } from './chunk-YZ6GTZXL.js';
+import { memo, useMemo, useState, useEffect, useCallback, Fragment as Fragment$1 } from 'react';
+import dagre from '@dagrejs/dagre';
+import { Stack, Text, Group, Badge, Box, Loader, SegmentedControl } from '@mantine/core';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Position, ReactFlowProvider, ReactFlow, Panel } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import { IconPlayerPlay, IconPlayerStop, IconArrowsSplit, IconSquare, IconCircleDot, IconLoader, IconAlertTriangle, IconX, IconCheck } from '@tabler/icons-react';
+
+function useMergedExecution(fetchedExecution, streamingLogs) {
+  return useMemo(() => {
+    if (!fetchedExecution) return void 0;
+    if (!streamingLogs || streamingLogs.length === 0) return fetchedExecution;
+    const existingKeys = new Set(fetchedExecution.executionLogs.map((log) => `${log.timestamp}:${log.message}`));
+    const newLogs = streamingLogs.filter((log) => !existingKeys.has(`${log.timestamp}:${log.message}`));
+    if (newLogs.length === 0) return fetchedExecution;
+    return {
+      ...fetchedExecution,
+      executionLogs: [...fetchedExecution.executionLogs, ...newLogs].sort((a, b) => a.timestamp - b.timestamp)
+    };
+  }, [fetchedExecution, streamingLogs]);
+}
+function useExecutionPath(executionLogs, workflowDefinition) {
+  return useMemo(() => {
+    if (!executionLogs || executionLogs.length === 0) {
+      return void 0;
+    }
+    if (!workflowDefinition) {
+      return void 0;
+    }
+    const executedSteps = /* @__PURE__ */ new Set();
+    const executedStepsOrdered = [];
+    const takenEdges = /* @__PURE__ */ new Set();
+    const stepStatusMap = /* @__PURE__ */ new Map();
+    const stepDataMap = /* @__PURE__ */ new Map();
+    let currentStepId;
+    for (const log of executionLogs) {
+      const context = log.context;
+      if (!context || context.type !== "workflow") continue;
+      if (isStepStartedContext(context)) {
+        executedSteps.add(context.stepId);
+        executedStepsOrdered.push(context.stepId);
+        currentStepId = context.stepId;
+        stepStatusMap.set(context.stepId, "running");
+        stepDataMap.set(context.stepId, {
+          status: "running",
+          input: context.input
+        });
+      }
+      if (isConditionalRouteContext(context)) {
+        const edgeId = `edge-${context.stepId}-${context.target}`;
+        takenEdges.add(edgeId);
+      }
+      if (isStepCompletedContext(context)) {
+        stepStatusMap.set(context.stepId, "completed");
+        const existingData = stepDataMap.get(context.stepId);
+        stepDataMap.set(context.stepId, {
+          ...existingData,
+          status: "completed",
+          duration: context.duration,
+          output: context.output
+        });
+        if (context.stepId === currentStepId) {
+          currentStepId = void 0;
+        }
+      }
+      if (isStepFailedContext(context)) {
+        stepStatusMap.set(context.stepId, "failed");
+        const existingData = stepDataMap.get(context.stepId);
+        stepDataMap.set(context.stepId, {
+          ...existingData,
+          status: "failed",
+          duration: context.duration,
+          error: context.error
+        });
+        if (context.stepId === currentStepId) {
+          currentStepId = void 0;
+        }
+      }
+    }
+    for (let i = 0; i < executedStepsOrdered.length - 1; i++) {
+      const sourceId = executedStepsOrdered[i];
+      const targetId = executedStepsOrdered[i + 1];
+      const step = workflowDefinition.steps.find((s) => s.id === sourceId);
+      if (step?.next?.type === "linear") {
+        const edgeId = `edge-${sourceId}-${targetId}`;
+        takenEdges.add(edgeId);
+      }
+    }
+    return {
+      executedSteps,
+      executedStepsOrdered,
+      takenEdges,
+      currentStepId,
+      stepStatusMap,
+      stepDataMap
+    };
+  }, [executionLogs, workflowDefinition]);
+}
+function useTimelineData(execution, resourceDefinition) {
+  return useMemo(() => {
+    const workflowSteps = resourceDefinition.steps;
+    if (!execution || !resourceDefinition) {
+      return void 0;
+    }
+    const stepMap = /* @__PURE__ */ new Map();
+    const stepNameLookup = /* @__PURE__ */ new Map();
+    workflowSteps.forEach((step) => {
+      stepNameLookup.set(step.id, step.name);
+    });
+    let workflowStartTime;
+    let workflowEndTime;
+    let activeStepId = null;
+    execution.executionLogs.forEach((log) => {
+      const context = log.context;
+      const ensureStepAndAddLog = (stepId) => {
+        if (!stepMap.has(stepId)) {
+          const stepName = stepNameLookup.get(stepId) || stepId;
+          stepMap.set(stepId, {
+            stepId,
+            stepName,
+            status: "pending",
+            logs: []
+          });
+        }
+        const step = stepMap.get(stepId);
+        const workflowLog = toWorkflowLogMessage(log);
+        if (workflowLog) {
+          step.logs.push(workflowLog);
+        }
+        return step;
+      };
+      if (!context || context.type !== "workflow") {
+        if (activeStepId) {
+          ensureStepAndAddLog(activeStepId);
+        }
+        return;
+      }
+      if (isStepStartedContext(context)) {
+        activeStepId = context.stepId;
+        const step = ensureStepAndAddLog(context.stepId);
+        step.status = "running";
+        step.startTime = context.startTime;
+        step.input = context.input;
+        if (!workflowStartTime) workflowStartTime = context.startTime;
+      } else if (isStepCompletedContext(context)) {
+        const step = ensureStepAndAddLog(context.stepId);
+        step.status = "completed";
+        step.startTime = context.startTime;
+        step.endTime = context.endTime;
+        step.duration = context.duration;
+        step.output = context.output;
+        workflowEndTime = context.endTime;
+        activeStepId = null;
+      } else if (isStepFailedContext(context)) {
+        const step = ensureStepAndAddLog(context.stepId);
+        step.status = "failed";
+        step.startTime = context.startTime;
+        step.endTime = context.endTime;
+        step.duration = context.duration;
+        step.error = context.error;
+        workflowEndTime = context.endTime;
+        activeStepId = null;
+      } else if (isConditionalRouteContext(context)) {
+        ensureStepAndAddLog(context.stepId);
+      }
+    });
+    const steps = Array.from(stepMap.values());
+    const isRunning = execution.status === "running";
+    const totalDuration = workflowStartTime && workflowEndTime ? workflowEndTime - workflowStartTime : 0;
+    return {
+      steps,
+      totalDuration,
+      isRunning
+    };
+  }, [execution, resourceDefinition]);
+}
+function useAgentIterationData(execution, resourceDefinition) {
+  return useMemo(() => {
+    if (!execution || !execution.executionLogs) {
+      return null;
+    }
+    const iterations = /* @__PURE__ */ new Map();
+    let currentIteration = null;
+    let totalDuration;
+    let status = execution.status;
+    const initialization = {
+      type: "initialization",
+      status: "pending"
+    };
+    const completion = {
+      type: "completion",
+      status: "pending"
+    };
+    for (const log of execution.executionLogs) {
+      const context = log.context;
+      if (context?.type !== "agent" || !("lifecycle" in context)) continue;
+      if (isLifecycleEvent(context)) {
+        const { lifecycle, stage } = context;
+        if (lifecycle === "initialization") {
+          initialization.timestamp = log.timestamp;
+          if (stage === "started") {
+            initialization.status = "running";
+            initialization.startTime = context.startTime;
+          } else if (stage === "completed") {
+            initialization.status = "completed";
+            initialization.endTime = context.endTime;
+            initialization.duration = context.duration;
+          } else if (stage === "failed") {
+            initialization.status = "failed";
+            initialization.endTime = context.endTime;
+            initialization.duration = context.duration;
+          }
+        }
+        if (lifecycle === "iteration" && "iteration" in context) {
+          const iterationNum = context.iteration;
+          if (stage === "started") {
+            if (!iterations.has(iterationNum)) {
+              iterations.set(iterationNum, {
+                iterationNumber: iterationNum,
+                status: "running",
+                iterationEvents: [],
+                subActivities: [],
+                timestamp: context.startTime,
+                startTime: context.startTime
+              });
+            }
+            currentIteration = iterationNum;
+          } else if (stage === "completed") {
+            const iteration = iterations.get(iterationNum);
+            if (iteration) {
+              iteration.status = "completed";
+              iteration.endTime = context.endTime;
+              iteration.duration = context.duration;
+            }
+          } else if (stage === "failed") {
+            const iteration = iterations.get(iterationNum);
+            if (iteration) {
+              iteration.status = "failed";
+              iteration.endTime = context.endTime;
+              if (context.duration) {
+                iteration.duration = context.duration;
+              }
+            }
+          }
+        }
+        if (lifecycle === "completion") {
+          completion.timestamp = log.timestamp;
+          if (stage === "started") {
+            completion.status = "running";
+            completion.startTime = context.startTime;
+          } else if (stage === "completed") {
+            completion.status = "completed";
+            completion.endTime = context.endTime;
+            completion.duration = context.duration;
+          } else if (stage === "failed") {
+            completion.status = "failed";
+            completion.endTime = context.endTime;
+            completion.duration = context.duration;
+            status = "failed";
+          }
+        }
+      }
+      if (isIterationEvent(context)) {
+        const iterationNum = context.iteration;
+        if (iterationNum === 0) {
+          continue;
+        }
+        const iteration = iterations.get(iterationNum);
+        if (iteration) {
+          iteration.iterationEvents.push(context);
+          if ("startTime" in context && "endTime" in context && "duration" in context) {
+            iteration.subActivities.push({
+              type: context.eventType,
+              startTime: context.startTime,
+              endTime: context.endTime,
+              duration: context.duration,
+              details: context
+            });
+          }
+        }
+      }
+      if (isToolCallEvent(context)) {
+        const iterationNum = context.iteration;
+        if (iterationNum === 0) {
+          continue;
+        }
+        const iteration = iterations.get(iterationNum);
+        if (iteration) {
+          iteration.subActivities.push({
+            type: "tool-call",
+            startTime: context.startTime,
+            endTime: context.endTime,
+            duration: context.duration,
+            details: context
+          });
+        }
+      }
+    }
+    const iterationArray = Array.from(iterations.values()).sort((a, b) => a.iterationNumber - b.iterationNumber).map((iteration) => ({
+      ...iteration,
+      subActivities: iteration.subActivities.sort((a, b) => a.startTime - b.startTime)
+    }));
+    if (initialization.duration && completion.duration) {
+      const iterationsDuration = iterationArray.reduce((sum, iter) => sum + (iter.duration || 0), 0);
+      totalDuration = initialization.duration + iterationsDuration + completion.duration;
+    }
+    return {
+      initialization,
+      iterations: iterationArray,
+      completion,
+      currentIteration: status === "running" ? currentIteration : null,
+      totalIterations: iterationArray.length,
+      totalDuration,
+      status
+    };
+  }, [execution, resourceDefinition]);
+}
+var NODE_WIDTH = 220;
+var NODE_HEIGHT = 140;
+var RANK_SEP = 100;
+var NODE_SEP = 40;
+function buildEdges(steps) {
+  const edges = [];
+  for (const step of steps) {
+    if (step.next === null) continue;
+    if (step.next.type === "linear" && step.next.target) {
+      edges.push({
+        id: `edge-${step.id}-${step.next.target}`,
+        source: step.id,
+        target: step.next.target,
+        type: "workflowStep",
+        data: {
+          edgeType: "linear",
+          label: "next"
+        }
+      });
+    } else if (step.next.type === "conditional") {
+      const routes = step.next.routes || [];
+      const defaultTarget = step.next.default;
+      for (const route of routes) {
+        edges.push({
+          id: `edge-${step.id}-${route.target}`,
+          source: step.id,
+          target: route.target,
+          type: "workflowStep",
+          data: {
+            edgeType: "conditional",
+            label: "route"
+          }
+        });
+      }
+      if (defaultTarget) {
+        edges.push({
+          id: `edge-${step.id}-${defaultTarget}-default`,
+          source: step.id,
+          target: defaultTarget,
+          type: "workflowStep",
+          data: {
+            edgeType: "default",
+            label: "default"
+          }
+        });
+      }
+    }
+  }
+  return edges;
+}
+var MIN_GRAPH_HEIGHT = 400;
+var MAX_GRAPH_HEIGHT = 600;
+var GRAPH_PADDING = 80;
+function useWorkflowStepsLayout(workflow) {
+  return useMemo(() => {
+    if (!workflow || workflow.steps.length === 0) {
+      return { nodes: [], edges: [], graphHeight: MIN_GRAPH_HEIGHT };
+    }
+    const edges = buildEdges(workflow.steps);
+    const hasOutgoing = /* @__PURE__ */ new Set();
+    for (const edge of edges) {
+      hasOutgoing.add(edge.source);
+    }
+    const dagreGraph = new dagre.graphlib.Graph();
+    dagreGraph.setDefaultEdgeLabel(() => ({}));
+    dagreGraph.setGraph({
+      rankdir: "LR",
+      ranksep: RANK_SEP,
+      nodesep: NODE_SEP,
+      marginx: 50,
+      marginy: 50
+    });
+    workflow.steps.forEach((step) => {
+      dagreGraph.setNode(step.id, {
+        width: NODE_WIDTH,
+        height: NODE_HEIGHT
+      });
+    });
+    edges.forEach((edge) => {
+      dagreGraph.setEdge(edge.source, edge.target);
+    });
+    dagre.layout(dagreGraph);
+    const nodes = workflow.steps.map((step) => {
+      const dagreNode = dagreGraph.node(step.id);
+      const isConditional = step.next?.type === "conditional";
+      const routeCount = isConditional ? (step.next?.routes?.length || 0) + (step.next?.default ? 1 : 0) : 0;
+      return {
+        id: step.id,
+        type: "workflowStep",
+        position: {
+          x: dagreNode.x - NODE_WIDTH / 2,
+          y: dagreNode.y - NODE_HEIGHT / 2
+        },
+        data: {
+          id: step.id,
+          name: step.name,
+          description: step.description,
+          isEntryPoint: step.id === workflow.entryPoint,
+          isEndNode: !hasOutgoing.has(step.id),
+          isConditional,
+          routeCount
+        }
+      };
+    });
+    let minY = Infinity;
+    let maxY = -Infinity;
+    for (const node of nodes) {
+      minY = Math.min(minY, node.position.y);
+      maxY = Math.max(maxY, node.position.y + NODE_HEIGHT);
+    }
+    const rawHeight = maxY - minY + GRAPH_PADDING;
+    const graphHeight = Math.max(MIN_GRAPH_HEIGHT, Math.min(MAX_GRAPH_HEIGHT, rawHeight));
+    return { nodes, edges, graphHeight };
+  }, [workflow]);
+}
+
+// src/execution/utils/statusColors.ts
+var STATUS_COLORS = {
+  completed: {
+    color: "var(--color-success)",
+    badge: "green"
+  },
+  failed: {
+    color: "var(--color-error)",
+    badge: "red"
+  },
+  running: {
+    color: "var(--color-primary)",
+    badge: "blue"
+  },
+  pending: {
+    color: "var(--color-text-dimmed)",
+    badge: "gray"
+  },
+  warning: {
+    color: "var(--color-warning)",
+    badge: "yellow"
+  }
+};
+function getStatusColors(status) {
+  return STATUS_COLORS[status];
+}
+
+// src/execution/utils/edgeUtils.ts
+function getEdgeColor({ selected, sourceStatus }) {
+  if (selected) {
+    return "var(--color-primary)";
+  }
+  return STATUS_COLORS[sourceStatus].color;
+}
+function getEdgeOpacity({ sourceStatus }) {
+  switch (sourceStatus) {
+    case "completed":
+      return 0.8;
+    case "warning":
+      return 0.8;
+    case "running":
+      return 1;
+    case "failed":
+      return 0.6;
+    case "pending":
+    default:
+      return 0.3;
+  }
+}
+function shouldAnimateEdge(sourceStatus, targetStatus) {
+  return sourceStatus === "running" || targetStatus === "running";
+}
+
+// src/execution/hooks/useUnifiedWorkflowLayout.ts
+function getStepStatus(stepId, executionPath) {
+  if (!executionPath) return void 0;
+  if (executionPath.currentStepId === stepId) {
+    return "running";
+  }
+  if (executionPath.executedSteps.has(stepId)) {
+    const status = executionPath.stepStatusMap?.get(stepId);
+    return status || "completed";
+  }
+  return "pending";
+}
+function calculateDimState(stepId, executionPath, entryPointId, hasExecutionData, mode) {
+  if (mode === "definition") {
+    return false;
+  }
+  if (!hasExecutionData) {
+    return stepId !== entryPointId;
+  }
+  return !executionPath?.executedSteps.has(stepId);
+}
+function useUnifiedWorkflowLayout(workflow, executionPath, selectedStepId, mode = "execution") {
+  const { nodes: baseNodes, edges: baseEdges, graphHeight } = useWorkflowStepsLayout(workflow);
+  return useMemo(() => {
+    if (!workflow || baseNodes.length === 0) {
+      return { nodes: [], edges: [], graphHeight };
+    }
+    const entryPointId = workflow.entryPoint;
+    const hasExecutionData = !!executionPath && executionPath.executedSteps.size > 0;
+    const nodes = baseNodes.map((node) => {
+      const stepId = node.data.id;
+      const executionStatus = getStepStatus(stepId, executionPath);
+      const isExecuted = executionPath?.executedSteps.has(stepId) ?? false;
+      const isDimmed = calculateDimState(stepId, executionPath, entryPointId, hasExecutionData, mode);
+      const isSelected = selectedStepId === stepId;
+      const stepData = executionPath?.stepDataMap?.get(stepId);
+      return {
+        ...node,
+        type: "unifiedWorkflowNode",
+        data: {
+          // Structure data
+          id: node.data.id,
+          name: node.data.name,
+          description: node.data.description,
+          isEntryPoint: node.data.isEntryPoint,
+          isEndNode: node.data.isEndNode,
+          isConditional: node.data.isConditional,
+          routeCount: node.data.routeCount,
+          // Execution state
+          executionStatus,
+          duration: stepData?.duration,
+          input: stepData?.input,
+          output: stepData?.output,
+          error: stepData?.error,
+          logs: stepData?.logs,
+          // Computed UI state
+          isExecuted,
+          isDimmed,
+          isSelected
+        }
+      };
+    });
+    const edges = baseEdges.map((edge) => {
+      const wasTaken = executionPath?.takenEdges.has(edge.id) ?? false;
+      const sourceStatus = getStepStatus(edge.source, executionPath);
+      const targetStatus = getStepStatus(edge.target, executionPath);
+      const isDimmed = mode === "execution" && hasExecutionData && !wasTaken;
+      const isAnimated = wasTaken && sourceStatus && targetStatus ? shouldAnimateEdge(sourceStatus, targetStatus) : false;
+      return {
+        ...edge,
+        type: "unifiedWorkflowEdge",
+        data: {
+          // Structure data
+          edgeType: edge.data?.edgeType ?? "linear",
+          label: edge.data?.label,
+          // Execution state
+          wasTaken,
+          sourceStatus,
+          targetStatus,
+          // Computed UI state
+          isDimmed,
+          isAnimated
+        },
+        animated: isAnimated
+      };
+    });
+    return { nodes, edges, graphHeight };
+  }, [baseNodes, baseEdges, workflow, executionPath, selectedStepId, graphHeight, mode]);
+}
+
+// src/execution/components/constants.ts
+var TIMELINE_CONSTANTS = {
+  // Bar dimensions
+  BAR_HEIGHT: 24,
+  ROW_GAP: 8,
+  MIN_BAR_WIDTH_PERCENT: 0.5,
+  // Minimum bar width as percentage (0.5% = ~8px on typical screen)
+  // Label column
+  LABEL_WIDTH: 200,
+  // Indentation for nested rows
+  INDENT_SIZE: 16,
+  // Container padding
+  CONTAINER_PADDING: 16,
+  CONTAINER_BORDER_RADIUS: 8
+};
+var SHARED_VIZ_CONSTANTS = {
+  // Node dimensions
+  NODE_WIDTH: 160,
+  NODE_SPACING: 220,
+  HANDLE_SIZE: 8,
+  // Zoom settings
+  MIN_ZOOM: 0.5,
+  MAX_ZOOM: 2
+};
+var CONTAINER_CONSTANTS = {
+  CONTAINER_HEIGHT: 400
+};
+var AGENT_CONSTANTS = {
+  // Inherited from shared constants
+  ...SHARED_VIZ_CONSTANTS,
+  // Agent-specific layout
+  NODE_HEIGHT: 140,
+  CONTAINER_HEIGHT: 430,
+  FIT_VIEW_PADDING: 0.2,
+  // Icon and circle sizes
+  ICON_SIZE: 16,
+  STATUS_ICON_SIZE: 16,
+  CIRCLE_SIZE: 40,
+  // Animation
+  PULSE_DURATION: "2s",
+  TRANSITION_DURATION: "0.2s"
+};
+var WORKFLOW_CONSTANTS = {
+  // Inherited from shared constants
+  ...SHARED_VIZ_CONSTANTS,
+  // Workflow-specific layout
+  FIT_VIEW_PADDING: 0.4,
+  // Workflow-specific dimensions
+  ICON_SIZE: 20,
+  CIRCLE_SIZE: 40,
+  // Animation
+  SPIN_DURATION: "1s"
+};
+
+// src/execution/hooks/useReactFlowAgent.ts
+function useReactFlowAgent(iterationData, _resourceDefinition, selectedIterationId, liveExecutions, selectedExecutionId) {
+  return useMemo(() => {
+    if (!iterationData) {
+      return { nodes: [], edges: [] };
+    }
+    const isLive = selectedExecutionId ? liveExecutions.has(selectedExecutionId) : false;
+    const nodes = [];
+    const edges = [];
+    let xPosition = 0;
+    const yPosition = AGENT_CONSTANTS.CONTAINER_HEIGHT / 2;
+    nodes.push({
+      id: "initialization",
+      type: "agentIteration",
+      position: { x: xPosition, y: yPosition },
+      data: {
+        label: "Initialization",
+        nodeType: "initialization",
+        status: iterationData.initialization.status,
+        duration: iterationData.initialization.duration,
+        isLive: isLive && iterationData.initialization.status === "running"
+      },
+      selected: selectedIterationId === "initialization",
+      origin: [0.5, 0.5]
+    });
+    xPosition += AGENT_CONSTANTS.NODE_SPACING;
+    for (let i = 0; i < iterationData.iterations.length; i++) {
+      const iteration = iterationData.iterations[i];
+      const isSelected = selectedIterationId === iteration.iterationNumber;
+      const isCurrentIteration = iterationData.currentIteration === iteration.iterationNumber;
+      nodes.push({
+        id: `iteration-${iteration.iterationNumber}`,
+        type: "agentIteration",
+        position: { x: xPosition, y: yPosition },
+        data: {
+          iterationNumber: iteration.iterationNumber,
+          nodeType: "iteration",
+          status: iteration.status,
+          reasoningCount: iteration.iterationEvents.filter((e) => e.eventType === "reasoning").length,
+          actionCount: iteration.iterationEvents.filter((e) => e.eventType === "action").length,
+          duration: iteration.duration,
+          isLive: isLive && isCurrentIteration
+        },
+        selected: isSelected,
+        origin: [0.5, 0.5]
+      });
+      xPosition += AGENT_CONSTANTS.NODE_SPACING;
+    }
+    const completionStarted = iterationData.completion.status !== "pending";
+    if (completionStarted) {
+      nodes.push({
+        id: "completion",
+        type: "agentIteration",
+        position: { x: xPosition, y: yPosition },
+        data: {
+          label: "Completion",
+          nodeType: "completion",
+          status: iterationData.completion.status,
+          duration: iterationData.completion.duration,
+          isLive: isLive && iterationData.completion.status === "running"
+        },
+        selected: selectedIterationId === "completion",
+        origin: [0.5, 0.5]
+      });
+    }
+    if (iterationData.iterations.length > 0 && iterationData.initialization.status !== "failed") {
+      edges.push({
+        id: "edge-init-iter1",
+        source: "initialization",
+        target: `iteration-${iterationData.iterations[0].iterationNumber}`,
+        type: "agentIteration",
+        data: {
+          sourceStatus: iterationData.initialization.status,
+          targetStatus: iterationData.iterations[0].status
+        }
+      });
+    } else if (iterationData.iterations.length === 0 && completionStarted) {
+      edges.push({
+        id: "edge-init-completion",
+        source: "initialization",
+        target: "completion",
+        type: "agentIteration",
+        data: {
+          sourceStatus: iterationData.initialization.status,
+          targetStatus: iterationData.completion.status
+        }
+      });
+    }
+    for (let i = 0; i < iterationData.iterations.length - 1; i++) {
+      const sourceIteration = iterationData.iterations[i];
+      const targetIteration = iterationData.iterations[i + 1];
+      edges.push({
+        id: `edge-${sourceIteration.iterationNumber}-${targetIteration.iterationNumber}`,
+        source: `iteration-${sourceIteration.iterationNumber}`,
+        target: `iteration-${targetIteration.iterationNumber}`,
+        type: "agentIteration",
+        data: {
+          sourceStatus: sourceIteration.status,
+          targetStatus: targetIteration.status
+        }
+      });
+    }
+    if (iterationData.iterations.length > 0 && completionStarted) {
+      const lastIteration = iterationData.iterations[iterationData.iterations.length - 1];
+      edges.push({
+        id: "edge-last-completion",
+        source: `iteration-${lastIteration.iterationNumber}`,
+        target: "completion",
+        type: "agentIteration",
+        data: {
+          sourceStatus: lastIteration.status,
+          targetStatus: iterationData.completion.status
+        }
+      });
+    }
+    return { nodes, edges };
+  }, [iterationData, selectedIterationId, liveExecutions, selectedExecutionId]);
+}
+function ExecutionStatusBadge({
+  status,
+  size = "sm",
+  variant = "light",
+  showLoader = true
+}) {
+  const statusColors = STATUS_COLORS[status];
+  const isRunning = status === "running" && showLoader;
+  return /* @__PURE__ */ jsx(
+    Badge,
+    {
+      color: statusColors.badge,
+      size,
+      variant,
+      leftSection: isRunning ? /* @__PURE__ */ jsx(Loader, { size: 10, color: statusColors.badge }) : void 0,
+      children: status.charAt(0).toUpperCase() + status.slice(1)
+    }
+  );
+}
+function getRateColor(rate) {
+  if (rate >= 95) return "var(--color-success)";
+  if (rate >= 80) return "var(--color-warning)";
+  return "var(--color-error)";
+}
+function getMantineRateColor(rate) {
+  if (rate >= 95) return "green";
+  if (rate >= 80) return "yellow";
+  return "red";
+}
+function ExecutionStats({
+  totalExecutions,
+  successCount,
+  failureCount,
+  warningCount,
+  successRate,
+  align = "flex-end",
+  compact = false
+}) {
+  if (totalExecutions === 0 && !compact) {
+    return null;
+  }
+  if (compact && totalExecutions === 0) {
+    return /* @__PURE__ */ jsxs(Group, { gap: 10, wrap: "nowrap", style: { width: "100%" }, children: [
+      /* @__PURE__ */ jsx(Text, { size: "md", fw: 700, ff: "monospace", c: "dimmed", style: { minWidth: 42 }, children: "\u2014" }),
+      /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", style: { whiteSpace: "nowrap" }, children: "No recent executions" })
+    ] });
+  }
+  if (compact) {
+    return /* @__PURE__ */ jsxs(Group, { gap: 10, wrap: "nowrap", style: { width: "100%" }, children: [
+      /* @__PURE__ */ jsxs(Group, { gap: 8, wrap: "nowrap", children: [
+        /* @__PURE__ */ jsxs(Text, { size: "md", fw: 700, ff: "monospace", style: { color: getRateColor(successRate), minWidth: 42 }, children: [
+          successRate,
+          "%"
+        ] }),
+        /* @__PURE__ */ jsxs(Group, { gap: 5, wrap: "nowrap", children: [
+          /* @__PURE__ */ jsx("div", { style: { width: 7, height: 7, borderRadius: "50%", background: "var(--color-success)" } }),
+          /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, c: "green", children: successCount })
+        ] }),
+        failureCount > 0 && /* @__PURE__ */ jsxs(Group, { gap: 5, wrap: "nowrap", children: [
+          /* @__PURE__ */ jsx("div", { style: { width: 7, height: 7, borderRadius: "50%", background: "var(--color-error)" } }),
+          /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, c: "red", children: failureCount })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", style: { whiteSpace: "nowrap" }, children: [
+        totalExecutions,
+        " ",
+        totalExecutions === 1 ? "run" : "runs"
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Stack, { gap: 2, align, style: { whiteSpace: "nowrap" }, children: [
+    /* @__PURE__ */ jsxs(Text, { size: "xs", c: "blue", children: [
+      totalExecutions,
+      " ",
+      totalExecutions === 1 ? "execution" : "executions"
+    ] }),
+    /* @__PURE__ */ jsxs(Text, { size: "xs", c: "green", children: [
+      successCount,
+      " success"
+    ] }),
+    warningCount != null && warningCount > 0 && /* @__PURE__ */ jsxs(Text, { size: "xs", c: "yellow", children: [
+      warningCount,
+      " warning"
+    ] }),
+    failureCount > 0 && /* @__PURE__ */ jsxs(Text, { size: "xs", c: "red", children: [
+      failureCount,
+      " failed"
+    ] }),
+    /* @__PURE__ */ jsxs(Text, { size: "xs", fw: 600, c: getMantineRateColor(successRate), children: [
+      successRate,
+      "% Success Rate"
+    ] })
+  ] });
+}
+function TimelineAxis({ totalDuration }) {
+  const markers = [
+    { position: 0, time: 0 },
+    { position: 25, time: totalDuration * 0.25 },
+    { position: 50, time: totalDuration * 0.5 },
+    { position: 75, time: totalDuration * 0.75 },
+    { position: 100, time: totalDuration }
+  ];
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      style: {
+        position: "relative",
+        height: 20
+      },
+      children: markers.map((marker, idx) => /* @__PURE__ */ jsx(
+        Box,
+        {
+          style: {
+            position: "absolute",
+            left: `${marker.position}%`,
+            transform: marker.position === 100 ? "translateX(-100%)" : marker.position === 0 ? "none" : "translateX(-50%)",
+            top: 4
+          },
+          children: /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: formatDuration(marker.time) })
+        },
+        idx
+      ))
+    }
+  );
+}
+function TimelineContainer({ executionStart, executionEnd, children }) {
+  const totalDuration = executionEnd - executionStart;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      style: {
+        borderBottom: "1px solid var(--color-border)",
+        borderRadius: "var(--mantine-radius-default)",
+        backgroundColor: "var(--color-background)",
+        padding: "var(--mantine-spacing-xs)"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            style: {
+              position: "relative"
+            },
+            children: /* @__PURE__ */ jsx(Box, { style: { position: "relative", zIndex: 1 }, children })
+          }
+        ),
+        /* @__PURE__ */ jsx(Box, { style: { paddingLeft: TIMELINE_CONSTANTS.LABEL_WIDTH + 12, paddingRight: 16 }, children: /* @__PURE__ */ jsx(TimelineAxis, { totalDuration }) })
+      ]
+    }
+  );
+}
+
+// src/execution/utils/calculateBarPosition.ts
+function calculateBarPosition(startTime, endTime, executionStart, executionEnd) {
+  const totalDuration = executionEnd - executionStart;
+  if (totalDuration <= 0) {
+    return { left: 0, width: 100 };
+  }
+  const relativeStart = startTime - executionStart;
+  const duration = endTime - startTime;
+  if (relativeStart < 0) {
+    console.warn("Activity start time is before execution start time");
+    const calculatedWidth = Math.max(0, duration / totalDuration * 100);
+    return { left: 0, width: Math.max(TIMELINE_CONSTANTS.MIN_BAR_WIDTH_PERCENT, calculatedWidth) };
+  }
+  if (startTime + duration > executionEnd) {
+    console.warn("Activity end time exceeds execution end time");
+    const cappedDuration = Math.max(0, executionEnd - startTime);
+    const calculatedWidth = cappedDuration / totalDuration * 100;
+    return {
+      left: relativeStart / totalDuration * 100,
+      width: Math.max(TIMELINE_CONSTANTS.MIN_BAR_WIDTH_PERCENT, calculatedWidth)
+    };
+  }
+  const left = relativeStart / totalDuration * 100;
+  const width = duration / totalDuration * 100;
+  return {
+    left: Math.max(0, Math.min(100, left)),
+    width: Math.max(TIMELINE_CONSTANTS.MIN_BAR_WIDTH_PERCENT, Math.min(100, width))
+  };
+}
+function TimelineBar({
+  startTime,
+  endTime,
+  executionStart,
+  executionEnd,
+  status,
+  label,
+  onClick,
+  isSelected = false,
+  hasSelection = false
+}) {
+  const colors = getStatusColors(status);
+  const { left, width } = calculateBarPosition(startTime, endTime, executionStart, executionEnd);
+  const opacity = hasSelection && !isSelected ? 0.5 : 1;
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      style: {
+        position: "absolute",
+        left: `${left}%`,
+        width: `${width}%`,
+        top: 4,
+        height: TIMELINE_CONSTANTS.BAR_HEIGHT / 2,
+        backgroundColor: colors.color,
+        opacity,
+        borderRadius: 4,
+        cursor: onClick ? "pointer" : "default",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        overflow: "hidden"
+      },
+      onClick,
+      children: label && /* @__PURE__ */ jsx(Text, { size: "xs", c: "white", style: { whiteSpace: "nowrap" }, children: label })
+    }
+  );
+}
+function TimelineRow({ label, bars, executionStart, executionEnd, indent = 0, selectedNodeId }) {
+  const labelMatch = label.match(/^(.+?)\s*\((.+?)\)$/);
+  const labelName = labelMatch ? labelMatch[1] : label;
+  const labelDuration = labelMatch ? labelMatch[2] : null;
+  const statusColor = bars.length > 0 ? getStatusColors(bars[0].status).color : "var(--color-text-dimmed)";
+  const hasSelection = selectedNodeId !== null && selectedNodeId !== void 0;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      style: {
+        display: "flex",
+        gap: 0,
+        height: TIMELINE_CONSTANTS.BAR_HEIGHT
+        // paddingLeft: indent * TIMELINE_CONSTANTS.INDENT_SIZE
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            style: {
+              height: TIMELINE_CONSTANTS.BAR_HEIGHT,
+              width: TIMELINE_CONSTANTS.LABEL_WIDTH,
+              flexShrink: 0,
+              display: "flex",
+              alignItems: "center",
+              gap: 6,
+              paddingRight: 12,
+              paddingLeft: 8 + indent * TIMELINE_CONSTANTS.INDENT_SIZE,
+              // Indent only the label, not the timeline bars
+              overflow: "hidden"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                Box,
+                {
+                  style: {
+                    width: 6,
+                    height: 6,
+                    borderRadius: "50%",
+                    backgroundColor: statusColor,
+                    flexShrink: 0
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(Text, { size: "sm", truncate: true, style: { flexShrink: 1, minWidth: 0 }, children: labelName }),
+              labelDuration && /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", ff: "monospace", style: { flexShrink: 0 }, children: [
+                "(",
+                labelDuration,
+                ")"
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            style: {
+              position: "relative",
+              flex: 1,
+              height: TIMELINE_CONSTANTS.BAR_HEIGHT,
+              marginLeft: 12,
+              marginRight: 16
+              // Right margin to match grid padding
+            },
+            children: bars.map((bar, idx) => {
+              const isSelected = bar.nodeId !== void 0 && bar.nodeId === selectedNodeId;
+              return /* @__PURE__ */ jsx(
+                TimelineBar,
+                {
+                  ...bar,
+                  executionStart,
+                  executionEnd,
+                  isSelected,
+                  hasSelection
+                },
+                idx
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+}
+var VisualizerContainer = ({ children, handleContainerClick, height }) => {
+  const containerHeight = height ?? CONTAINER_CONSTANTS.CONTAINER_HEIGHT;
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      bg: "var(--color-background)",
+      onClick: handleContainerClick,
+      style: {
+        borderBottom: "1px solid var(--color-border)",
+        borderRadius: "var(--mantine-radius-default)"
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            width: "100%",
+            height: `${containerHeight}px`,
+            overflow: "hidden"
+          },
+          children
+        }
+      )
+    }
+  );
+};
+var EmptyVisualizer = ({ message = "Select an execution to view timeline" }) => {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      h: CONTAINER_CONSTANTS.CONTAINER_HEIGHT,
+      bg: "var(--color-background)",
+      style: {
+        borderBottom: "1px solid var(--color-border)",
+        borderRadius: "var(--mantine-radius-default)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: message })
+    }
+  );
+};
+var SPIN_ANIMATION = `
+  @keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+`;
+function getStatusIcon({ status, colors, iconSize, spinDuration = "1s" }) {
+  switch (status) {
+    case "completed":
+      return /* @__PURE__ */ jsx(IconCheck, { size: iconSize, color: colors.icon });
+    case "failed":
+      return /* @__PURE__ */ jsx(IconX, { size: iconSize, color: colors.icon });
+    case "warning":
+      return /* @__PURE__ */ jsx(IconAlertTriangle, { size: iconSize, color: colors.icon });
+    case "running":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("style", { children: SPIN_ANIMATION }),
+        /* @__PURE__ */ jsx(
+          IconLoader,
+          {
+            size: iconSize,
+            color: colors.icon,
+            style: { animation: `spin ${spinDuration} linear infinite` }
+          }
+        )
+      ] });
+    case "pending":
+    default:
+      return /* @__PURE__ */ jsx(IconCircleDot, { size: iconSize, color: colors.icon });
+  }
+}
+var UnifiedWorkflowNode = memo(function UnifiedWorkflowNode2({ data }) {
+  const selected = data.isSelected ?? false;
+  const primaryColor = data.isEntryPoint ? "teal" : data.isEndNode ? "violet" : data.isConditional ? "orange" : "blue";
+  const statusColors = data.executionStatus ? STATUS_COLORS[data.executionStatus] : void 0;
+  const showExecutionStatus = data.isExecuted && data.executionStatus;
+  return /* @__PURE__ */ jsx(
+    BaseNode,
+    {
+      color: primaryColor,
+      selected,
+      highlighted: Boolean(data.highlighted),
+      width: 220,
+      className: data.isDimmed ? "dimmed-node" : "",
+      showSourceHandle: !data.isEndNode,
+      children: /* @__PURE__ */ jsx("div", { style: { opacity: data.isDimmed ? 0.3 : 1 }, children: /* @__PURE__ */ jsxs(Stack, { gap: 6, children: [
+        /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, lineClamp: 1, style: { fontFamily: "var(--mantine-font-family-headings)" }, children: data.name }),
+        /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+          data.isEntryPoint && /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", color: "teal", leftSection: /* @__PURE__ */ jsx(IconPlayerPlay, { size: 10 }), children: "Entry" }),
+          data.isEndNode && /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", color: "violet", leftSection: /* @__PURE__ */ jsx(IconPlayerStop, { size: 10 }), children: "End" }),
+          data.isConditional && /* @__PURE__ */ jsxs(Badge, { size: "xs", variant: "light", color: "orange", leftSection: /* @__PURE__ */ jsx(IconArrowsSplit, { size: 10 }), children: [
+            data.routeCount,
+            " routes"
+          ] }),
+          !data.isEntryPoint && !data.isEndNode && !data.isConditional && /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", leftSection: /* @__PURE__ */ jsx(IconSquare, { size: 10 }), children: "Step" }),
+          /* @__PURE__ */ jsx(Text, { size: "xs", ff: "monospace", c: "dimmed", truncate: true, children: data.id })
+        ] }),
+        !data.isDimmed && data.description && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", lineClamp: 2, children: data.description }),
+        showExecutionStatus && statusColors && /* @__PURE__ */ jsx(Box, { mt: 4, children: /* @__PURE__ */ jsxs(Group, { gap: 8, align: "center", children: [
+          /* @__PURE__ */ jsx(Box, { children: getStatusIcon({
+            status: data.executionStatus,
+            colors: { icon: statusColors.color },
+            iconSize: 16,
+            spinDuration: "1s"
+          }) }),
+          /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", color: statusColors.badge, children: data.executionStatus }),
+          data.duration !== void 0 && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: formatDuration(data.duration) })
+        ] }) })
+      ] }) })
+    }
+  );
+});
+var UnifiedWorkflowEdge = memo(function UnifiedWorkflowEdge2({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  selected,
+  data
+}) {
+  const colors = useGraphTheme();
+  const edgeType = data?.edgeType || "linear";
+  const isDimmed = data?.isDimmed ?? false;
+  const isAnimated = data?.isAnimated ?? false;
+  let edgeColor;
+  let glowColor;
+  let label;
+  switch (edgeType) {
+    case "conditional":
+      edgeColor = colors.trigger;
+      glowColor = colors.triggerGlow;
+      label = data?.label || "route";
+      break;
+    case "default":
+      edgeColor = colors.integration;
+      glowColor = colors.integrationGlow;
+      label = data?.label || "default";
+      break;
+    case "linear":
+    default:
+      edgeColor = colors.workflow;
+      glowColor = colors.workflowGlow;
+      label = void 0;
+      break;
+  }
+  return /* @__PURE__ */ jsx(
+    BaseEdge,
+    {
+      id,
+      sourceX,
+      sourceY,
+      targetX,
+      targetY,
+      sourcePosition: Position.Right,
+      targetPosition: Position.Left,
+      color: edgeColor,
+      glowColor,
+      label,
+      selected,
+      animated: isAnimated,
+      dimmed: isDimmed
+    }
+  );
+});
+var nodeTypes = {
+  unifiedWorkflowNode: UnifiedWorkflowNode
+};
+var edgeTypes = {
+  unifiedWorkflowEdge: UnifiedWorkflowEdge
+};
+var NODE_LEGEND_ITEMS = [
+  { color: "teal", label: "Entry" },
+  { color: "blue", label: "Step" },
+  { color: "orange", label: "Conditional" },
+  { color: "violet", label: "End" }
+];
+var EDGE_LEGEND_ITEMS = [
+  { color: "blue", label: "Next", type: "line" },
+  { color: "orange", label: "Route", type: "line" },
+  { color: "teal", label: "Default", type: "line" }
+];
+function UnifiedWorkflowGraph({
+  resourceDefinition,
+  executionLogs,
+  selectedStepId,
+  onStepSelect,
+  fitViewTrigger: externalFitViewTrigger
+}) {
+  const hasExecutionData = executionLogs && executionLogs.length > 0;
+  const [mode, setMode] = useState(hasExecutionData ? "execution" : "definition");
+  useEffect(() => {
+    setMode(hasExecutionData ? "execution" : "definition");
+  }, [hasExecutionData]);
+  const isDefinitionMode = mode === "definition";
+  const executionPath = useExecutionPath(
+    isDefinitionMode ? void 0 : executionLogs,
+    isDefinitionMode ? void 0 : resourceDefinition
+  );
+  const workflowInput = useMemo(
+    () => resourceDefinition ? { entryPoint: resourceDefinition.entryPoint, steps: resourceDefinition.steps } : void 0,
+    [resourceDefinition]
+  );
+  const { nodes: layoutNodes, edges: layoutEdges, graphHeight } = useUnifiedWorkflowLayout(
+    workflowInput,
+    executionPath,
+    isDefinitionMode ? null : selectedStepId,
+    mode
+  );
+  const {
+    nodes: highlightedNodes,
+    edges: highlightedEdges,
+    handleNodeMouseEnter,
+    handleNodeMouseLeave
+  } = useDirectedChainHighlighting(layoutNodes, layoutEdges);
+  const nodes = isDefinitionMode ? highlightedNodes : layoutNodes;
+  const edges = isDefinitionMode ? highlightedEdges : layoutEdges;
+  const [internalFitViewTrigger, setInternalFitViewTrigger] = useState(0);
+  const executedStepsCount = executionPath?.executedSteps.size ?? 0;
+  const nodesCount = nodes.length;
+  useEffect(() => {
+    if (nodesCount > 0) {
+      setInternalFitViewTrigger((prev) => prev + 1);
+    }
+  }, [nodesCount, executedStepsCount]);
+  const fitViewTrigger = (externalFitViewTrigger ?? 0) + internalFitViewTrigger;
+  const { handleNodeClick, handlePaneClick, handleContainerClick } = useNodeSelection(
+    selectedStepId || null,
+    onStepSelect || (() => {
+    })
+  );
+  if (!resourceDefinition || !resourceDefinition.steps.length) {
+    return /* @__PURE__ */ jsx(EmptyVisualizer, {});
+  }
+  return /* @__PURE__ */ jsx(
+    VisualizerContainer,
+    {
+      handleContainerClick: isDefinitionMode ? void 0 : handleContainerClick,
+      height: graphHeight,
+      children: /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsxs(
+        ReactFlow,
+        {
+          nodes,
+          edges,
+          nodeTypes,
+          edgeTypes,
+          onNodeClick: isDefinitionMode ? void 0 : handleNodeClick,
+          onPaneClick: isDefinitionMode ? void 0 : handlePaneClick,
+          onNodeMouseEnter: isDefinitionMode ? handleNodeMouseEnter : void 0,
+          onNodeMouseLeave: isDefinitionMode ? handleNodeMouseLeave : void 0,
+          fitView: true,
+          fitViewOptions: {
+            padding: WORKFLOW_CONSTANTS.FIT_VIEW_PADDING
+          },
+          proOptions: { hideAttribution: true },
+          minZoom: WORKFLOW_CONSTANTS.MIN_ZOOM,
+          maxZoom: WORKFLOW_CONSTANTS.MAX_ZOOM,
+          defaultViewport: { x: 0, y: 0, zoom: 1 },
+          nodesDraggable: false,
+          nodesConnectable: false,
+          elementsSelectable: !isDefinitionMode,
+          selectNodesOnDrag: false,
+          zoomOnScroll: true,
+          panOnDrag: true,
+          className: Graph_default.graphContainer,
+          children: [
+            /* @__PURE__ */ jsx(GraphBackground, {}),
+            /* @__PURE__ */ jsx(Panel, { position: "top-right", style: { marginTop: 12, marginRight: 12 }, children: /* @__PURE__ */ jsx(
+              SegmentedControl,
+              {
+                size: "xs",
+                value: mode,
+                onChange: (value) => setMode(value),
+                data: [
+                  { label: "Definition", value: "definition" },
+                  { label: "Execution", value: "execution" }
+                ],
+                styles: {
+                  root: {
+                    backgroundColor: "var(--color-surface)",
+                    border: "1px solid var(--color-border)"
+                  }
+                }
+              }
+            ) }),
+            /* @__PURE__ */ jsx(GraphLegend, { title: "Legend", items: NODE_LEGEND_ITEMS, position: "bottom-right" }),
+            /* @__PURE__ */ jsx(GraphLegend, { title: "Flow", items: EDGE_LEGEND_ITEMS, position: "bottom-left" }),
+            /* @__PURE__ */ jsx(GraphFitViewButton, { padding: WORKFLOW_CONSTANTS.FIT_VIEW_PADDING, variant: "mantine" }),
+            /* @__PURE__ */ jsx(GraphFitViewHandler, { trigger: fitViewTrigger, padding: WORKFLOW_CONSTANTS.FIT_VIEW_PADDING })
+          ]
+        }
+      ) })
+    }
+  );
+}
+function WorkflowExecutionTimeline({ timelineData, selectedStepId }) {
+  const { steps } = timelineData;
+  const executionStart = steps[0]?.startTime || 0;
+  const executionEnd = steps[steps.length - 1]?.endTime || executionStart;
+  return /* @__PURE__ */ jsx(TimelineContainer, { executionStart, executionEnd, children: steps.map(
+    (step) => step.startTime && step.endTime && /* @__PURE__ */ jsx(
+      TimelineRow,
+      {
+        label: step.stepName,
+        bars: [
+          {
+            startTime: step.startTime,
+            endTime: step.endTime,
+            status: step.status,
+            nodeId: step.stepId
+          }
+        ],
+        executionStart,
+        executionEnd,
+        selectedNodeId: selectedStepId
+      },
+      step.stepId
+    )
+  ) });
+}
+var statusColorMap = {
+  running: "blue",
+  completed: "teal",
+  failed: "orange",
+  pending: "violet",
+  warning: "yellow"
+};
+var AgentIterationNode = memo(function AgentIterationNode2({ data, selected }) {
+  const { nodeType, label, iterationNumber, status, reasoningCount, actionCount, duration, isLive } = data;
+  const colors = getStatusColors(status);
+  const nodeColor = statusColorMap[status];
+  return /* @__PURE__ */ jsxs(BaseNode, { color: nodeColor, selected, width: AGENT_CONSTANTS.NODE_WIDTH, children: [
+    /* @__PURE__ */ jsxs(Box, { style: { display: "flex", flexDirection: "column", alignItems: "center" }, children: [
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          style: {
+            width: AGENT_CONSTANTS.CIRCLE_SIZE,
+            height: AGENT_CONSTANTS.CIRCLE_SIZE,
+            borderRadius: "50%",
+            backgroundColor: "var(--color-surface)",
+            border: `2px solid ${colors.color}`,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          },
+          children: getStatusIcon({
+            status,
+            colors: { icon: colors.color },
+            iconSize: AGENT_CONSTANTS.STATUS_ICON_SIZE,
+            spinDuration: "1s"
+          })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          size: "sm",
+          fw: status === "running" ? 500 : 400,
+          ta: "center",
+          mt: 4,
+          style: { maxWidth: 150, fontFamily: "var(--mantine-font-family-headings)" },
+          children: nodeType === "iteration" ? `Iteration ${iterationNumber}` : label
+        }
+      ),
+      /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", color: colors.badge, mt: 4, children: status.toUpperCase() }),
+      /* @__PURE__ */ jsxs(Stack, { gap: 2, mt: 2, align: "center", children: [
+        nodeType === "iteration" && reasoningCount !== void 0 && reasoningCount > 0 && /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", children: [
+          reasoningCount,
+          " reasoning"
+        ] }),
+        nodeType === "iteration" && actionCount !== void 0 && actionCount > 0 && /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", children: [
+          actionCount,
+          " ",
+          actionCount === 1 ? "action" : "actions"
+        ] }),
+        duration !== void 0 && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: formatDuration(duration) })
+      ] })
+    ] }),
+    isLive && /* @__PURE__ */ jsx(
+      Badge,
+      {
+        size: "xs",
+        variant: "filled",
+        style: {
+          position: "absolute",
+          top: 4,
+          right: 4
+        },
+        children: /* @__PURE__ */ jsx("span", { className: Graph_default.livePulse, children: "LIVE" })
+      }
+    )
+  ] });
+});
+var statusEdgeColors = {
+  running: {
+    color: "var(--mantine-color-blue-5)",
+    glow: "rgba(59, 130, 246, 0.5)"
+  },
+  completed: {
+    color: "var(--mantine-color-teal-5)",
+    glow: "rgba(20, 184, 166, 0.5)"
+  },
+  failed: {
+    color: "var(--mantine-color-orange-5)",
+    glow: "rgba(249, 115, 22, 0.5)"
+  },
+  pending: {
+    color: "var(--mantine-color-gray-5)",
+    glow: "rgba(156, 163, 175, 0.3)"
+  },
+  warning: {
+    color: "var(--mantine-color-yellow-5)",
+    glow: "rgba(234, 179, 8, 0.5)"
+  }
+};
+var AgentIterationEdge = memo(function AgentIterationEdge2({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  data,
+  selected
+}) {
+  const edgeData = data;
+  const sourceStatus = edgeData?.sourceStatus || "pending";
+  const targetStatus = edgeData?.targetStatus || "pending";
+  const edgeColors = statusEdgeColors[sourceStatus];
+  const isAnimated = shouldAnimateEdge(sourceStatus, targetStatus);
+  return /* @__PURE__ */ jsx(
+    BaseEdge,
+    {
+      id,
+      sourceX,
+      sourceY,
+      targetX,
+      targetY,
+      sourcePosition: Position.Right,
+      targetPosition: Position.Left,
+      color: edgeColors.color,
+      glowColor: edgeColors.glow,
+      animated: isAnimated,
+      selected
+    }
+  );
+});
+var nodeTypes2 = {
+  agentIteration: AgentIterationNode
+};
+var edgeTypes2 = {
+  agentIteration: AgentIterationEdge
+};
+function AgentExecutionVisualizer({
+  resourceDefinition,
+  iterationData,
+  selectedExecutionId,
+  liveExecutions,
+  selectedIterationId,
+  onIterationSelect
+}) {
+  const { nodes, edges } = useReactFlowAgent(
+    iterationData,
+    resourceDefinition,
+    selectedIterationId,
+    liveExecutions,
+    selectedExecutionId
+  );
+  const fitViewTrigger = useFitViewTrigger(iterationData, nodes);
+  const handleIterationSelect = useCallback(
+    (id) => {
+      onIterationSelect(id);
+    },
+    [onIterationSelect]
+  );
+  const { handlePaneClick, handleContainerClick } = useNodeSelection(selectedIterationId, handleIterationSelect);
+  const handleNodeClick = useCallback(
+    (_event, node) => {
+      if (node.id === "initialization" || node.id === "completion") {
+        handleIterationSelect(selectedIterationId === node.id ? null : node.id);
+        return;
+      }
+      const iterationNumber = Number.parseInt(node.id.replace("iteration-", ""), 10);
+      if (!Number.isNaN(iterationNumber)) {
+        handleIterationSelect(iterationNumber === selectedIterationId ? null : iterationNumber);
+      }
+    },
+    [selectedIterationId, handleIterationSelect]
+  );
+  if (!iterationData || nodes.length === 0) {
+    return /* @__PURE__ */ jsx(EmptyVisualizer, {});
+  }
+  return /* @__PURE__ */ jsx(VisualizerContainer, { handleContainerClick, children: /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsxs(
+    ReactFlow,
+    {
+      nodes,
+      edges,
+      nodeTypes: nodeTypes2,
+      edgeTypes: edgeTypes2,
+      onNodeClick: handleNodeClick,
+      onPaneClick: handlePaneClick,
+      fitView: true,
+      fitViewOptions: {
+        padding: AGENT_CONSTANTS.FIT_VIEW_PADDING
+      },
+      proOptions: { hideAttribution: true },
+      minZoom: AGENT_CONSTANTS.MIN_ZOOM,
+      maxZoom: AGENT_CONSTANTS.MAX_ZOOM,
+      nodesDraggable: false,
+      nodesConnectable: false,
+      elementsSelectable: true,
+      selectNodesOnDrag: false,
+      zoomOnScroll: false,
+      panOnDrag: false,
+      className: Graph_default.graphContainer,
+      children: [
+        /* @__PURE__ */ jsx(GraphBackground, {}),
+        /* @__PURE__ */ jsx(GraphFitViewButton, { padding: AGENT_CONSTANTS.FIT_VIEW_PADDING, variant: "mantine", duration: 300 }),
+        /* @__PURE__ */ jsx(GraphFitViewHandler, { trigger: fitViewTrigger, padding: AGENT_CONSTANTS.FIT_VIEW_PADDING })
+      ]
+    }
+  ) }) });
+}
+function AgentExecutionTimeline({ iterationData, selectedIterationId }) {
+  const { initialization, iterations, completion } = iterationData;
+  const executionStart = initialization.startTime;
+  const executionEnd = completion.endTime;
+  return /* @__PURE__ */ jsxs(TimelineContainer, { executionStart, executionEnd, children: [
+    initialization.startTime && initialization.endTime && /* @__PURE__ */ jsx(
+      TimelineRow,
+      {
+        label: `Initialization (${formatDuration(initialization.duration || 0)})`,
+        bars: [
+          {
+            startTime: initialization.startTime,
+            endTime: initialization.endTime,
+            status: initialization.status,
+            nodeId: "initialization"
+          }
+        ],
+        executionStart,
+        executionEnd,
+        selectedNodeId: selectedIterationId
+      }
+    ),
+    iterations.map((iteration) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      iteration.startTime && iteration.endTime && /* @__PURE__ */ jsx(
+        TimelineRow,
+        {
+          label: `Iteration ${iteration.iterationNumber} (${formatDuration(iteration.duration || 0)})`,
+          bars: [
+            {
+              startTime: iteration.startTime,
+              endTime: iteration.endTime,
+              status: iteration.status,
+              nodeId: iteration.iterationNumber
+            }
+          ],
+          executionStart,
+          executionEnd,
+          selectedNodeId: selectedIterationId
+        }
+      ),
+      iteration.subActivities.map((activity, activityIndex) => /* @__PURE__ */ jsx(
+        TimelineRow,
+        {
+          label: `${activity.type} (${formatDuration(activity.duration)})`,
+          bars: [
+            {
+              startTime: activity.startTime,
+              endTime: activity.endTime,
+              status: "completed",
+              nodeId: iteration.iterationNumber
+            }
+          ],
+          executionStart,
+          executionEnd,
+          indent: 1,
+          selectedNodeId: selectedIterationId
+        },
+        `${iteration.iterationNumber}-${activity.type}-${activity.startTime}-${activityIndex}`
+      ))
+    ] }, iteration.iterationNumber)),
+    completion.startTime && completion.endTime && /* @__PURE__ */ jsx(
+      TimelineRow,
+      {
+        label: `Completion (${formatDuration(completion.duration || 0)})`,
+        bars: [
+          {
+            startTime: completion.startTime,
+            endTime: completion.endTime,
+            status: completion.status,
+            nodeId: "completion"
+          }
+        ],
+        executionStart,
+        executionEnd,
+        selectedNodeId: selectedIterationId
+      }
+    )
+  ] });
+}
+
+// src/execution/utils/getResourceStatusColor.ts
+function getResourceStatusColor(resourceStatus) {
+  return resourceStatus === "dev" ? "var(--color-primary)" : "var(--color-success)";
+}
+
+export { AGENT_CONSTANTS, AgentExecutionTimeline, AgentExecutionVisualizer, AgentIterationEdge, AgentIterationNode, CONTAINER_CONSTANTS, EmptyVisualizer, ExecutionStats, ExecutionStatusBadge, SHARED_VIZ_CONSTANTS, STATUS_COLORS, TIMELINE_CONSTANTS, TimelineAxis, TimelineBar, TimelineContainer, TimelineRow, UnifiedWorkflowEdge, UnifiedWorkflowGraph, UnifiedWorkflowNode, VisualizerContainer, WORKFLOW_CONSTANTS, WorkflowExecutionTimeline, calculateBarPosition, getEdgeColor, getEdgeOpacity, getResourceStatusColor, getStatusColors, getStatusIcon, shouldAnimateEdge, useAgentIterationData, useExecutionPath, useMergedExecution, useReactFlowAgent, useTimelineData, useUnifiedWorkflowLayout, useWorkflowStepsLayout };