@elevasis/ui 1.3.1 → 1.3.2

package/dist/chunk-JQLT6HBI.js

@@ -0,0 +1,850 @@
+import { useMemo } from 'react';
+import dagre from '@dagrejs/dagre';
+import { IconCircleDot, IconLoader, IconAlertTriangle, IconX, IconCheck } from '@tabler/icons-react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/execution/hooks/useMergedExecution.ts
+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]);
+}
+
+// ../core/src/execution/engine/workflow/logging.ts
+function isStepStartedContext(ctx) {
+  return ctx.contextType === "step-started" || "stepStatus" in ctx && ctx.stepStatus === "started";
+}
+function isStepCompletedContext(ctx) {
+  return ctx.contextType === "step-completed" || "stepStatus" in ctx && ctx.stepStatus === "completed";
+}
+function isStepFailedContext(ctx) {
+  return ctx.contextType === "step-failed" || "stepStatus" in ctx && ctx.stepStatus === "failed";
+}
+function isConditionalRouteContext(ctx) {
+  return ctx.contextType === "conditional-route" || "target" in ctx && "stepId" in ctx && !("stepStatus" in ctx);
+}
+function toWorkflowLogMessage(log) {
+  if (log.context?.type === "workflow") {
+    return {
+      level: log.level,
+      message: log.message,
+      timestamp: log.timestamp,
+      context: log.context
+    };
+  }
+  return {
+    level: log.level,
+    message: log.message,
+    timestamp: log.timestamp,
+    context: log.context
+  };
+}
+
+// ../core/src/execution/engine/agent/observability/logging.ts
+function isLifecycleEvent(ctx) {
+  return "stage" in ctx && ctx.stage !== void 0;
+}
+function isIterationEvent(ctx) {
+  return "eventType" in ctx && ctx.eventType !== void 0;
+}
+function isToolCallEvent(ctx) {
+  return "eventType" in ctx && ctx.eventType === "tool-call";
+}
+
+// src/execution/hooks/useExecutionPath.ts
+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/constants.ts
+var TIMELINE_CONSTANTS = {
+  // Bar dimensions
+  BAR_HEIGHT: 24,
+  ROW_GAP: 8,
+  MIN_BAR_WIDTH_PERCENT: 0.5,
+  // 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_WIDTH: 160,
+  NODE_SPACING: 220,
+  HANDLE_SIZE: 8,
+  MIN_ZOOM: 0.5,
+  MAX_ZOOM: 2
+};
+var AGENT_CONSTANTS = {
+  ...SHARED_VIZ_CONSTANTS,
+  NODE_HEIGHT: 140,
+  CONTAINER_HEIGHT: 430,
+  FIT_VIEW_PADDING: 0.2,
+  ICON_SIZE: 16,
+  STATUS_ICON_SIZE: 16,
+  CIRCLE_SIZE: 40,
+  PULSE_DURATION: "2s",
+  TRANSITION_DURATION: "0.2s"
+};
+var WORKFLOW_CONSTANTS = {
+  ...SHARED_VIZ_CONSTANTS,
+  FIT_VIEW_PADDING: 0.4,
+  ICON_SIZE: 20,
+  CIRCLE_SIZE: 40,
+  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]);
+}
+
+// src/execution/utils/formatDuration.ts
+function formatDuration(ms) {
+  if (!ms) return "0ms";
+  if (ms < 1e3) return `${ms}ms`;
+  return `${(ms / 1e3).toFixed(2)}s`;
+}
+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 });
+  }
+}
+
+// src/execution/utils/getResourceStatusColor.ts
+function getResourceStatusColor(resourceStatus) {
+  return resourceStatus === "dev" ? "var(--color-primary)" : "var(--color-success)";
+}
+
+// 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))
+  };
+}
+
+export { AGENT_CONSTANTS, SHARED_VIZ_CONSTANTS, STATUS_COLORS, TIMELINE_CONSTANTS, WORKFLOW_CONSTANTS, calculateBarPosition, formatDuration, getEdgeColor, getEdgeOpacity, getResourceStatusColor, getStatusColors, getStatusIcon, shouldAnimateEdge, useAgentIterationData, useExecutionPath, useMergedExecution, useReactFlowAgent, useTimelineData, useUnifiedWorkflowLayout, useWorkflowStepsLayout };