@elevasis/ui 1.3.1 → 1.3.2

package/dist/chunk-RJCA5672.js

@@ -1,1664 +0,0 @@
-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 };