@remoraflow/ui 0.1.0

package/dist/index.js

@@ -0,0 +1,2708 @@
+// src/execution-state.ts
+var STATUS_PRIORITY = {
+  failed: 4,
+  running: 3,
+  completed: 2,
+  skipped: 1,
+  pending: 0
+};
+function worstStatus(a, b) {
+  return STATUS_PRIORITY[a] >= STATUS_PRIORITY[b] ? a : b;
+}
+function filterToLatestIteration(records) {
+  const latestIteration = new Map;
+  for (const record of records) {
+    for (const seg of record.path) {
+      if (seg.type === "for-each") {
+        const prev = latestIteration.get(seg.stepId) ?? -1;
+        if (seg.iterationIndex > prev) {
+          latestIteration.set(seg.stepId, seg.iterationIndex);
+        }
+      }
+    }
+  }
+  if (latestIteration.size === 0)
+    return records;
+  return records.filter((record) => {
+    for (const seg of record.path) {
+      if (seg.type === "for-each") {
+        const latest = latestIteration.get(seg.stepId);
+        if (latest !== undefined && seg.iterationIndex !== latest) {
+          return false;
+        }
+      }
+    }
+    return true;
+  });
+}
+function deriveStepSummaries(state) {
+  const filtered = filterToLatestIteration(state.stepRecords);
+  const grouped = new Map;
+  for (const record of filtered) {
+    const existing = grouped.get(record.stepId);
+    if (existing) {
+      existing.push(record);
+    } else {
+      grouped.set(record.stepId, [record]);
+    }
+  }
+  const summaries = new Map;
+  for (const [stepId, records] of grouped) {
+    let status = "pending";
+    let completedCount = 0;
+    let failedCount = 0;
+    let totalRetries = 0;
+    let latestOutput;
+    let latestError;
+    let latestDurationMs;
+    let latestResolvedInputs;
+    let latestTrace;
+    for (const record of records) {
+      status = worstStatus(status, record.status);
+      if (record.status === "completed")
+        completedCount++;
+      if (record.status === "failed")
+        failedCount++;
+      totalRetries += record.retries.length;
+      if (record.output !== undefined)
+        latestOutput = record.output;
+      if (record.error) {
+        latestError = {
+          code: record.error.code,
+          message: record.error.message
+        };
+      }
+      if (record.durationMs !== undefined) {
+        latestDurationMs = record.durationMs;
+      }
+      if (record.resolvedInputs !== undefined) {
+        latestResolvedInputs = record.resolvedInputs;
+      }
+      if (record.trace !== undefined) {
+        latestTrace = record.trace;
+      }
+    }
+    summaries.set(stepId, {
+      status,
+      executionCount: records.length,
+      completedCount,
+      failedCount,
+      totalRetries,
+      latestOutput,
+      latestError,
+      latestDurationMs,
+      latestResolvedInputs,
+      latestTrace
+    });
+  }
+  return summaries;
+}
+// src/graph-layout.ts
+import dagre from "@dagrejs/dagre";
+var NODE_WIDTH = 300;
+var NODE_HEIGHT = 180;
+var END_NODE_SIZE = 60;
+var START_NODE_SIZE = 60;
+var GROUP_HEADER_WIDTH = 280;
+var GROUP_HEADER_HEIGHT = 80;
+var GROUP_PADDING = 30;
+var GROUP_HEADER = 40;
+var START_NODE_ID = "__start__";
+function getOrThrow(map, key) {
+  const val = map.get(key);
+  if (val === undefined)
+    throw new Error(`Missing map key: ${String(key)}`);
+  return val;
+}
+function stepNodeType(step) {
+  switch (step.type) {
+    case "tool-call":
+      return "toolCall";
+    case "llm-prompt":
+      return "llmPrompt";
+    case "extract-data":
+      return "extractData";
+    case "switch-case":
+      return "switchCase";
+    case "for-each":
+      return "forEach";
+    case "start":
+      return "startStep";
+    case "end":
+      return "end";
+    case "sleep":
+      return "sleep";
+    case "wait-for-condition":
+      return "waitForCondition";
+    case "agent-loop":
+      return "agentLoop";
+  }
+}
+function renderExpression(expr) {
+  if (expr.type === "literal")
+    return JSON.stringify(expr.value);
+  if (expr.type === "template")
+    return expr.template;
+  return expr.expression;
+}
+function nodeSize(step, workflow) {
+  if (step.type === "end" && !step.params?.output && !workflow?.outputSchema) {
+    return { w: END_NODE_SIZE, h: END_NODE_SIZE };
+  }
+  return { w: NODE_WIDTH, h: NODE_HEIGHT };
+}
+function collectChildSteps(step, stepMap) {
+  const children = new Set;
+  const continuation = step.nextStepId;
+  const seeds = [];
+  if (step.type === "for-each") {
+    seeds.push(step.params.loopBodyStepId);
+  } else if (step.type === "switch-case") {
+    for (const c of step.params.cases) {
+      seeds.push(c.branchBodyStepId);
+    }
+  } else if (step.type === "wait-for-condition") {
+    seeds.push(step.params.conditionStepId);
+  } else {
+    return children;
+  }
+  const queue = [...seeds];
+  while (queue.length > 0) {
+    const id = queue.shift();
+    if (id === undefined)
+      continue;
+    if (children.has(id) || id === continuation)
+      continue;
+    const s = stepMap.get(id);
+    if (!s)
+      continue;
+    children.add(id);
+    if (s.nextStepId)
+      queue.push(s.nextStepId);
+    if (s.type === "switch-case") {
+      for (const c of s.params.cases)
+        queue.push(c.branchBodyStepId);
+    }
+    if (s.type === "for-each") {
+      queue.push(s.params.loopBodyStepId);
+    }
+    if (s.type === "wait-for-condition") {
+      queue.push(s.params.conditionStepId);
+    }
+  }
+  return children;
+}
+function buildParentMap(workflow, stepMap) {
+  const parentMap = new Map;
+  const allGroupChildren = new Map;
+  for (const step of workflow.steps) {
+    if (step.type === "for-each" || step.type === "switch-case" || step.type === "wait-for-condition") {
+      allGroupChildren.set(step.id, collectChildSteps(step, stepMap));
+    }
+  }
+  for (const [groupId, children] of allGroupChildren) {
+    for (const childId of children) {
+      const currentParent = parentMap.get(childId);
+      if (!currentParent) {
+        parentMap.set(childId, groupId);
+      } else {
+        const currentParentChildren = allGroupChildren.get(currentParent);
+        if (currentParentChildren?.has(groupId)) {
+          parentMap.set(childId, groupId);
+        }
+      }
+    }
+  }
+  return parentMap;
+}
+function getDirectChildren(groupId, parentMap) {
+  const direct = new Set;
+  for (const [childId, pid] of parentMap) {
+    if (pid === groupId)
+      direct.add(childId);
+  }
+  return direct;
+}
+function groupProcessingOrder(groupIds, parentMap) {
+  const order = [];
+  const visited = new Set;
+  function visit(id) {
+    if (visited.has(id))
+      return;
+    visited.add(id);
+    for (const [childId, pid] of parentMap) {
+      if (pid === id && groupIds.has(childId)) {
+        visit(childId);
+      }
+    }
+    order.push(id);
+  }
+  for (const id of groupIds) {
+    visit(id);
+  }
+  return order;
+}
+function groupHeaderId(groupId) {
+  return `__header__${groupId}`;
+}
+function getNodeDimensions(nodeId, groupIds, computedSizes, stepMap, workflow) {
+  if (groupIds.has(nodeId)) {
+    return getOrThrow(computedSizes, nodeId);
+  }
+  return nodeSize(getOrThrow(stepMap, nodeId), workflow);
+}
+function buildLayout(workflow, diagnostics = [], executionState) {
+  const stepSummaries = executionState ? deriveStepSummaries(executionState) : undefined;
+  const diagnosticsByStep = new Map;
+  for (const d of diagnostics) {
+    if (d.location.stepId) {
+      const existing = diagnosticsByStep.get(d.location.stepId) ?? [];
+      existing.push(d);
+      diagnosticsByStep.set(d.location.stepId, existing);
+    }
+  }
+  const stepMap = new Map;
+  for (const step of workflow.steps) {
+    stepMap.set(step.id, step);
+  }
+  const parentMap = buildParentMap(workflow, stepMap);
+  const groupIds = new Set;
+  for (const step of workflow.steps) {
+    if (step.type === "for-each" || step.type === "switch-case" || step.type === "wait-for-condition") {
+      const hasChildren = [...parentMap.values()].some((pid) => pid === step.id);
+      if (hasChildren)
+        groupIds.add(step.id);
+    }
+  }
+  const processOrder = groupProcessingOrder(groupIds, parentMap);
+  const computedSizes = new Map;
+  const groupChildPositions = new Map;
+  for (const groupId of processOrder) {
+    const groupStep = getOrThrow(stepMap, groupId);
+    const directChildren = getDirectChildren(groupId, parentMap);
+    if (directChildren.size === 0) {
+      groupIds.delete(groupId);
+      continue;
+    }
+    const subG = new dagre.graphlib.Graph;
+    subG.setGraph({ rankdir: "TB", ranksep: 60, nodesep: 40 });
+    subG.setDefaultEdgeLabel(() => ({}));
+    const headerId = groupHeaderId(groupId);
+    subG.setNode(headerId, {
+      width: GROUP_HEADER_WIDTH,
+      height: GROUP_HEADER_HEIGHT
+    });
+    for (const childId of directChildren) {
+      const { w, h } = getNodeDimensions(childId, groupIds, computedSizes, stepMap, workflow);
+      subG.setNode(childId, { width: w, height: h });
+    }
+    if (groupStep.type === "switch-case") {
+      for (const c of groupStep.params.cases) {
+        if (directChildren.has(c.branchBodyStepId)) {
+          subG.setEdge(headerId, c.branchBodyStepId);
+        }
+      }
+    } else if (groupStep.type === "for-each") {
+      if (directChildren.has(groupStep.params.loopBodyStepId)) {
+        subG.setEdge(headerId, groupStep.params.loopBodyStepId);
+      }
+    } else if (groupStep.type === "wait-for-condition") {
+      if (directChildren.has(groupStep.params.conditionStepId)) {
+        subG.setEdge(headerId, groupStep.params.conditionStepId);
+      }
+    }
+    for (const childId of directChildren) {
+      const step = getOrThrow(stepMap, childId);
+      if (step.nextStepId && directChildren.has(step.nextStepId)) {
+        subG.setEdge(childId, step.nextStepId);
+      }
+      if (step.type === "switch-case") {
+        for (const c of step.params.cases) {
+          if (directChildren.has(c.branchBodyStepId)) {
+            subG.setEdge(childId, c.branchBodyStepId);
+          }
+        }
+      }
+      if (step.type === "for-each") {
+        if (directChildren.has(step.params.loopBodyStepId)) {
+          subG.setEdge(childId, step.params.loopBodyStepId);
+        }
+      }
+      if (step.type === "wait-for-condition") {
+        if (directChildren.has(step.params.conditionStepId)) {
+          subG.setEdge(childId, step.params.conditionStepId);
+        }
+      }
+    }
+    dagre.layout(subG);
+    let minX = Number.POSITIVE_INFINITY;
+    let minY = Number.POSITIVE_INFINITY;
+    let maxX = Number.NEGATIVE_INFINITY;
+    let maxY = Number.NEGATIVE_INFINITY;
+    const allSubNodes = new Set(directChildren);
+    allSubNodes.add(headerId);
+    const rawPositions = new Map;
+    for (const nodeId of allSubNodes) {
+      const pos = subG.node(nodeId);
+      let w;
+      let h;
+      if (nodeId === headerId) {
+        w = GROUP_HEADER_WIDTH;
+        h = GROUP_HEADER_HEIGHT;
+      } else {
+        const dims = getNodeDimensions(nodeId, groupIds, computedSizes, stepMap, workflow);
+        w = dims.w;
+        h = dims.h;
+      }
+      const x = pos.x - w / 2;
+      const y = pos.y - h / 2;
+      rawPositions.set(nodeId, { x, y });
+      minX = Math.min(minX, x);
+      minY = Math.min(minY, y);
+      maxX = Math.max(maxX, x + w);
+      maxY = Math.max(maxY, y + h);
+    }
+    const positions = new Map;
+    for (const [nodeId, pos] of rawPositions) {
+      positions.set(nodeId, {
+        x: pos.x - minX + GROUP_PADDING,
+        y: pos.y - minY + GROUP_HEADER
+      });
+    }
+    groupChildPositions.set(groupId, positions);
+    const contentWidth = maxX - minX;
+    const contentHeight = maxY - minY;
+    computedSizes.set(groupId, {
+      w: contentWidth + GROUP_PADDING * 2,
+      h: contentHeight + GROUP_HEADER + GROUP_PADDING
+    });
+  }
+  const topG = new dagre.graphlib.Graph;
+  topG.setGraph({ rankdir: "TB", ranksep: 80, nodesep: 60 });
+  topG.setDefaultEdgeLabel(() => ({}));
+  const initialStep = stepMap.get(workflow.initialStepId);
+  const hasStartStep = initialStep?.type === "start";
+  if (!hasStartStep) {
+    topG.setNode(START_NODE_ID, {
+      width: START_NODE_SIZE,
+      height: START_NODE_SIZE
+    });
+  }
+  const topLevelStepIds = [];
+  for (const step of workflow.steps) {
+    if (!parentMap.has(step.id)) {
+      topLevelStepIds.push(step.id);
+      const { w, h } = getNodeDimensions(step.id, groupIds, computedSizes, stepMap, workflow);
+      topG.setNode(step.id, { width: w, height: h });
+    }
+  }
+  if (!hasStartStep) {
+    topG.setEdge(START_NODE_ID, workflow.initialStepId);
+  }
+  const topLevelSet = new Set(topLevelStepIds);
+  for (const stepId of topLevelStepIds) {
+    const step = getOrThrow(stepMap, stepId);
+    if (step.nextStepId && topLevelSet.has(step.nextStepId)) {
+      topG.setEdge(stepId, step.nextStepId);
+    }
+    if (step.type === "switch-case") {
+      for (const c of step.params.cases) {
+        if (topLevelSet.has(c.branchBodyStepId)) {
+          topG.setEdge(stepId, c.branchBodyStepId);
+        }
+      }
+    }
+    if (step.type === "for-each") {
+      if (topLevelSet.has(step.params.loopBodyStepId)) {
+        topG.setEdge(stepId, step.params.loopBodyStepId);
+      }
+    }
+    if (step.type === "wait-for-condition") {
+      if (topLevelSet.has(step.params.conditionStepId)) {
+        topG.setEdge(stepId, step.params.conditionStepId);
+      }
+    }
+  }
+  dagre.layout(topG);
+  const topLevelPositions = new Map;
+  if (!hasStartStep) {
+    const startPos = topG.node(START_NODE_ID);
+    topLevelPositions.set(START_NODE_ID, {
+      x: startPos.x - START_NODE_SIZE / 2,
+      y: startPos.y - START_NODE_SIZE / 2
+    });
+  }
+  for (const stepId of topLevelStepIds) {
+    const pos = topG.node(stepId);
+    const { w, h } = getNodeDimensions(stepId, groupIds, computedSizes, stepMap, workflow);
+    topLevelPositions.set(stepId, {
+      x: pos.x - w / 2,
+      y: pos.y - h / 2
+    });
+  }
+  const nodes = [];
+  if (!hasStartStep) {
+    const startNodePos = getOrThrow(topLevelPositions, START_NODE_ID);
+    nodes.push({
+      id: START_NODE_ID,
+      type: "start",
+      position: startNodePos,
+      data: {},
+      selectable: false
+    });
+  }
+  function addNodesForContext(nodeIds, getPosition, parentId) {
+    const groups = [];
+    const headers = [];
+    const nonGroups = [];
+    for (const id of nodeIds) {
+      if (groupIds.has(id))
+        groups.push(id);
+      else if (id.startsWith("__header__"))
+        headers.push(id);
+      else
+        nonGroups.push(id);
+    }
+    for (const id of groups) {
+      const step = getOrThrow(stepMap, id);
+      const pos = getPosition(id);
+      const size = getOrThrow(computedSizes, id);
+      nodes.push({
+        id,
+        type: stepNodeType(step),
+        position: pos,
+        data: {
+          step,
+          diagnostics: diagnosticsByStep.get(id) ?? [],
+          isGroup: true,
+          groupWidth: size.w,
+          groupHeight: size.h,
+          hasSourceEdge: !!step.nextStepId,
+          executionSummary: stepSummaries?.get(id)
+        },
+        style: { width: size.w, height: size.h },
+        ...parentId ? { parentId, extent: "parent" } : {}
+      });
+      const childPositions = getOrThrow(groupChildPositions, id);
+      addNodesForContext(childPositions.keys(), (childId) => getOrThrow(childPositions, childId), id);
+    }
+    for (const id of headers) {
+      const pos = getPosition(id);
+      const gid = id.replace("__header__", "");
+      const step = getOrThrow(stepMap, gid);
+      const summary = stepSummaries?.get(gid);
+      const resolvedInputs = summary?.latestResolvedInputs;
+      if (step.type === "switch-case") {
+        nodes.push({
+          id,
+          type: "groupHeader",
+          position: pos,
+          data: {
+            variant: "switch",
+            description: step.description,
+            expression: renderExpression(step.params.switchOn),
+            resolvedExpression: resolvedInputs?.switchOn,
+            step,
+            diagnostics: diagnosticsByStep.get(gid) ?? []
+          },
+          ...parentId ? { parentId, extent: "parent" } : {}
+        });
+      } else if (step.type === "for-each") {
+        nodes.push({
+          id,
+          type: "groupHeader",
+          position: pos,
+          data: {
+            variant: "loop",
+            description: step.description,
+            target: renderExpression(step.params.target),
+            resolvedTarget: resolvedInputs?.target,
+            itemName: step.params.itemName,
+            step,
+            diagnostics: diagnosticsByStep.get(gid) ?? []
+          },
+          ...parentId ? { parentId, extent: "parent" } : {}
+        });
+      } else if (step.type === "wait-for-condition") {
+        nodes.push({
+          id,
+          type: "groupHeader",
+          position: pos,
+          data: {
+            variant: "condition",
+            description: step.description,
+            condition: renderExpression(step.params.condition)
+          },
+          ...parentId ? { parentId, extent: "parent" } : {}
+        });
+      }
+    }
+    for (const id of nonGroups) {
+      const step = getOrThrow(stepMap, id);
+      const pos = getPosition(id);
+      const nodeData = {
+        step,
+        diagnostics: diagnosticsByStep.get(id) ?? [],
+        hasSourceEdge: !!step.nextStepId,
+        executionSummary: stepSummaries?.get(id)
+      };
+      if (step.type === "start" && workflow.inputSchema) {
+        nodeData.inputSchema = workflow.inputSchema;
+      }
+      if (step.type === "end" && workflow.outputSchema) {
+        nodeData.outputSchema = workflow.outputSchema;
+      }
+      nodes.push({
+        id,
+        type: stepNodeType(step),
+        position: pos,
+        data: nodeData,
+        ...parentId ? { parentId, extent: "parent" } : {}
+      });
+    }
+  }
+  addNodesForContext(topLevelStepIds, (id) => getOrThrow(topLevelPositions, id));
+  const edges = [];
+  const hasExecState = !!stepSummaries;
+  function isStepExecuted(stepId) {
+    const s = stepSummaries?.get(stepId);
+    return s?.status === "completed" || s?.status === "running";
+  }
+  if (!hasStartStep) {
+    edges.push({
+      id: `${START_NODE_ID}->${workflow.initialStepId}`,
+      source: START_NODE_ID,
+      target: workflow.initialStepId,
+      type: "workflow",
+      data: {
+        edgeKind: "sequential",
+        executed: hasExecState && isStepExecuted(workflow.initialStepId),
+        hasExecutionState: hasExecState
+      }
+    });
+  }
+  for (const step of workflow.steps) {
+    if (step.type === "switch-case") {
+      if (groupIds.has(step.id)) {
+        const headerId = groupHeaderId(step.id);
+        for (const c of step.params.cases) {
+          const label = c.value.type === "default" ? "default" : renderExpression(c.value);
+          edges.push({
+            id: `${headerId}->${c.branchBodyStepId}`,
+            source: headerId,
+            target: c.branchBodyStepId,
+            label,
+            type: "workflow",
+            data: {
+              edgeKind: "branch",
+              executed: hasExecState && isStepExecuted(c.branchBodyStepId),
+              hasExecutionState: hasExecState
+            }
+          });
+        }
+      }
+      if (step.nextStepId) {
+        edges.push({
+          id: `${step.id}->${step.nextStepId}`,
+          source: step.id,
+          target: step.nextStepId,
+          type: "workflow",
+          data: {
+            edgeKind: "sequential",
+            executed: hasExecState && isStepExecuted(step.nextStepId),
+            hasExecutionState: hasExecState
+          }
+        });
+      }
+    } else if (step.type === "for-each") {
+      if (groupIds.has(step.id)) {
+        const headerId = groupHeaderId(step.id);
+        edges.push({
+          id: `${headerId}->${step.params.loopBodyStepId}`,
+          source: headerId,
+          target: step.params.loopBodyStepId,
+          type: "workflow",
+          data: {
+            edgeKind: "sequential",
+            executed: hasExecState && isStepExecuted(step.params.loopBodyStepId),
+            hasExecutionState: hasExecState
+          }
+        });
+      }
+      if (step.nextStepId) {
+        edges.push({
+          id: `${step.id}->${step.nextStepId}`,
+          source: step.id,
+          target: step.nextStepId,
+          type: "workflow",
+          data: {
+            edgeKind: "sequential",
+            executed: hasExecState && isStepExecuted(step.nextStepId),
+            hasExecutionState: hasExecState
+          }
+        });
+      }
+    } else if (step.type === "wait-for-condition") {
+      if (groupIds.has(step.id)) {
+        const headerId = groupHeaderId(step.id);
+        edges.push({
+          id: `${headerId}->${step.params.conditionStepId}`,
+          source: headerId,
+          target: step.params.conditionStepId,
+          type: "workflow",
+          data: { edgeKind: "sequential" }
+        });
+      }
+      if (step.nextStepId) {
+        edges.push({
+          id: `${step.id}->${step.nextStepId}`,
+          source: step.id,
+          target: step.nextStepId,
+          type: "workflow",
+          data: { edgeKind: "sequential" }
+        });
+      }
+    } else if (step.nextStepId) {
+      edges.push({
+        id: `${step.id}->${step.nextStepId}`,
+        source: step.id,
+        target: step.nextStepId,
+        type: "workflow",
+        data: {
+          edgeKind: "sequential",
+          executed: hasExecState && isStepExecuted(step.nextStepId),
+          hasExecutionState: hasExecState
+        }
+      });
+    }
+  }
+  return { nodes, edges };
+}
+// src/panels/step-detail-panel.tsx
+import { jsxDEV } from "react/jsx-dev-runtime";
+function renderExpression2(expr) {
+  if (expr.type === "literal")
+    return JSON.stringify(expr.value);
+  if (expr.type === "template")
+    return expr.template;
+  return expr.expression;
+}
+function TypeBadge({ type }) {
+  const colors = {
+    "tool-call": "bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-400",
+    "llm-prompt": "bg-violet-100 text-violet-700 dark:bg-violet-900/50 dark:text-violet-400",
+    "extract-data": "bg-purple-100 text-purple-700 dark:bg-purple-900/50 dark:text-purple-400",
+    "switch-case": "bg-amber-100 text-amber-700 dark:bg-amber-900/50 dark:text-amber-400",
+    "for-each": "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/50 dark:text-emerald-400",
+    "agent-loop": "bg-teal-100 text-teal-700 dark:bg-teal-900/50 dark:text-teal-400",
+    sleep: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/50 dark:text-yellow-400",
+    "wait-for-condition": "bg-orange-100 text-orange-700 dark:bg-orange-900/50 dark:text-orange-400",
+    start: "bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-400",
+    end: "bg-muted text-muted-foreground"
+  };
+  const fallback = "bg-muted text-muted-foreground";
+  return /* @__PURE__ */ jsxDEV("span", {
+    className: `text-[11px] font-medium px-2 py-0.5 rounded-full ${colors[type] ?? fallback}`,
+    children: type
+  }, undefined, false, undefined, this);
+}
+function StatusBadge({ summary }) {
+  const colors = {
+    pending: "bg-muted text-muted-foreground",
+    running: "bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-400",
+    completed: "bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-400",
+    failed: "bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-400",
+    skipped: "bg-muted text-muted-foreground"
+  };
+  return /* @__PURE__ */ jsxDEV("span", {
+    className: `text-[11px] font-medium px-2 py-0.5 rounded-full ${colors[summary.status]}`,
+    children: summary.status
+  }, undefined, false, undefined, this);
+}
+function ResolvedCode({
+  value,
+  expression
+}) {
+  const display = typeof value === "string" ? value : JSON.stringify(value, null, 2);
+  return /* @__PURE__ */ jsxDEV("pre", {
+    className: "text-xs text-emerald-700 bg-emerald-50 dark:text-emerald-400 dark:bg-emerald-950/50 rounded p-2 whitespace-pre-wrap font-mono overflow-auto max-h-[200px] cursor-default",
+    title: expression,
+    children: display
+  }, undefined, false, undefined, this);
+}
+function StepParams({
+  step,
+  resolvedInputs
+}) {
+  const resolved = resolvedInputs;
+  switch (step.type) {
+    case "tool-call":
+      return /* @__PURE__ */ jsxDEV("div", {
+        className: "space-y-2",
+        children: [
+          /* @__PURE__ */ jsxDEV("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV(Label, {
+                children: "Tool"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV(Code, {
+                children: step.params.toolName
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          Object.keys(step.params.toolInput).length > 0 && /* @__PURE__ */ jsxDEV("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV(Label, {
+                children: "Inputs"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "space-y-1",
+                children: Object.entries(step.params.toolInput).map(([key, val]) => {
+                  const resolvedVal = resolved?.[key];
+                  const hasResolved = resolvedVal !== undefined;
+                  return /* @__PURE__ */ jsxDEV("div", {
+                    className: "flex gap-2 text-xs",
+                    children: [
+                      /* @__PURE__ */ jsxDEV("span", {
+                        className: "font-mono text-muted-foreground",
+                        children: [
+                          key,
+                          ":"
+                        ]
+                      }, undefined, true, undefined, this),
+                      /* @__PURE__ */ jsxDEV("span", {
+                        className: `font-mono ${hasResolved ? "text-emerald-700 dark:text-emerald-400" : "text-foreground"}`,
+                        title: hasResolved ? renderExpression2(val) : undefined,
+                        children: hasResolved ? typeof resolvedVal === "string" ? resolvedVal : JSON.stringify(resolvedVal) : renderExpression2(val)
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, key, true, undefined, this);
+                })
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this);
+    case "llm-prompt":
+      return /* @__PURE__ */ jsxDEV("div", {
+        className: "space-y-2",
+        children: [
+          /* @__PURE__ */ jsxDEV("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV(Label, {
+                children: "Prompt"
+              }, undefined, false, undefined, this),
+              resolved?.prompt ? /* @__PURE__ */ jsxDEV(ResolvedCode, {
+                value: resolved.prompt,
+                expression: step.params.prompt
+              }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV("pre", {
+                className: "text-xs rounded p-2 whitespace-pre-wrap font-mono text-foreground bg-muted",
+                children: step.params.prompt
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV(Label, {
+                children: "Output Format"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV(Code, {
+                children: JSON.stringify(step.params.outputFormat, null, 2)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this);
+    case "extract-data":
+      return /* @__PURE__ */ jsxDEV("div", {
+        className: "space-y-2",
+        children: [
+          /* @__PURE__ */ jsxDEV("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV(Label, {
+                children: "Source"
+              }, undefined, false, undefined, this),
+              resolved?.sourceData !== undefined ? /* @__PURE__ */ jsxDEV(ResolvedCode, {
+                value: resolved.sourceData,
+                expression: renderExpression2(step.params.sourceData)
+              }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV(Code, {
+                children: renderExpression2(step.params.sourceData)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV(Label, {
+                children: "Output Format"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV(Code, {
+                children: JSON.stringify(step.params.outputFormat, null, 2)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this);
+    case "switch-case":
+      return /* @__PURE__ */ jsxDEV("div", {
+        className: "space-y-2",
+        children: [
+          /* @__PURE__ */ jsxDEV("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV(Label, {
+                children: "Switch On"
+              }, undefined, false, undefined, this),
+              resolved?.switchOn !== undefined ? /* @__PURE__ */ jsxDEV(ResolvedCode, {
+                value: resolved.switchOn,
+                expression: renderExpression2(step.params.switchOn)
+              }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV(Code, {
+                children: renderExpression2(step.params.switchOn)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV(Label, {
+                children: "Cases"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "space-y-1",
+                children: step.params.cases.map((c) => /* @__PURE__ */ jsxDEV("div", {
+                  className: "text-xs flex gap-2",
+                  children: [
+                    /* @__PURE__ */ jsxDEV("span", {
+                      className: "font-mono text-muted-foreground",
+                      children: c.value.type === "default" ? "default" : renderExpression2(c.value)
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV("span", {
+                      className: "text-muted-foreground/50",
+                      children: "→"
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV("span", {
+                      className: "font-mono text-foreground",
+                      children: c.branchBodyStepId
+                    }, undefined, false, undefined, this)
+                  ]
+                }, c.branchBodyStepId, true, undefined, this))
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this);
+    case "for-each":
+      return /* @__PURE__ */ jsxDEV("div", {
+        className: "space-y-2",
+        children: [
+          /* @__PURE__ */ jsxDEV("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV(Label, {
+                children: "Target"
+              }, undefined, false, undefined, this),
+              resolved?.target !== undefined ? /* @__PURE__ */ jsxDEV(ResolvedCode, {
+                value: resolved.target,
+                expression: renderExpression2(step.params.target)
+              }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV(Code, {
+                children: renderExpression2(step.params.target)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV(Label, {
+                children: "Item Variable"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV(Code, {
+                children: step.params.itemName
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV(Label, {
+                children: "Loop Body"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV(Code, {
+                children: step.params.loopBodyStepId
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this);
+    case "sleep":
+      return /* @__PURE__ */ jsxDEV("div", {
+        className: "space-y-2",
+        children: /* @__PURE__ */ jsxDEV("div", {
+          children: [
+            /* @__PURE__ */ jsxDEV(Label, {
+              children: "Duration"
+            }, undefined, false, undefined, this),
+            resolved?.durationMs !== undefined ? /* @__PURE__ */ jsxDEV(ResolvedCode, {
+              value: `${resolved.durationMs}ms`,
+              expression: renderExpression2(step.params.durationMs)
+            }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV(Code, {
+              children: [
+                renderExpression2(step.params.durationMs),
+                "ms"
+              ]
+            }, undefined, true, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this);
+    case "wait-for-condition":
+      return /* @__PURE__ */ jsxDEV("div", {
+        className: "space-y-2",
+        children: [
+          /* @__PURE__ */ jsxDEV("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV(Label, {
+                children: "Condition"
+              }, undefined, false, undefined, this),
+              resolved?.condition !== undefined ? /* @__PURE__ */ jsxDEV(ResolvedCode, {
+                value: resolved.condition,
+                expression: renderExpression2(step.params.condition)
+              }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV(Code, {
+                children: renderExpression2(step.params.condition)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV(Label, {
+                children: "Condition Step"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV(Code, {
+                children: step.params.conditionStepId
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          step.params.maxAttempts && /* @__PURE__ */ jsxDEV("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV(Label, {
+                children: "Max Attempts"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV(Code, {
+                children: renderExpression2(step.params.maxAttempts)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          step.params.intervalMs && /* @__PURE__ */ jsxDEV("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV(Label, {
+                children: "Interval"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV(Code, {
+                children: [
+                  renderExpression2(step.params.intervalMs),
+                  "ms"
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          step.params.timeoutMs && /* @__PURE__ */ jsxDEV("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV(Label, {
+                children: "Timeout"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV(Code, {
+                children: [
+                  renderExpression2(step.params.timeoutMs),
+                  "ms"
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this);
+    case "agent-loop":
+      return /* @__PURE__ */ jsxDEV("div", {
+        className: "space-y-2",
+        children: [
+          /* @__PURE__ */ jsxDEV("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV(Label, {
+                children: "Instructions"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("pre", {
+                className: "text-xs rounded p-2 whitespace-pre-wrap font-mono text-foreground bg-muted",
+                children: step.params.instructions
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          step.params.tools.length > 0 && /* @__PURE__ */ jsxDEV("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV(Label, {
+                children: "Tools"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV(Code, {
+                children: step.params.tools.join(", ")
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV(Label, {
+                children: "Output Format"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV(Code, {
+                children: JSON.stringify(step.params.outputFormat, null, 2)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          step.params.maxSteps && /* @__PURE__ */ jsxDEV("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV(Label, {
+                children: "Max Steps"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV(Code, {
+                children: renderExpression2(step.params.maxSteps)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this);
+    case "start":
+      return null;
+    case "end":
+      if (step.params?.output) {
+        return /* @__PURE__ */ jsxDEV("div", {
+          className: "space-y-2",
+          children: /* @__PURE__ */ jsxDEV("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV(Label, {
+                children: "Output"
+              }, undefined, false, undefined, this),
+              resolved?.output !== undefined ? /* @__PURE__ */ jsxDEV(ResolvedCode, {
+                value: resolved.output,
+                expression: renderExpression2(step.params.output)
+              }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV(Code, {
+                children: renderExpression2(step.params.output)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        }, undefined, false, undefined, this);
+      }
+      return null;
+  }
+}
+function Label({ children }) {
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "text-[11px] font-medium uppercase tracking-wide mb-0.5 text-muted-foreground",
+    children
+  }, undefined, false, undefined, this);
+}
+function Code({ children }) {
+  return /* @__PURE__ */ jsxDEV("pre", {
+    className: "text-xs rounded p-2 whitespace-pre-wrap font-mono overflow-auto max-h-[200px] text-foreground bg-muted",
+    children
+  }, undefined, false, undefined, this);
+}
+function formatPathSegment(seg) {
+  switch (seg.type) {
+    case "for-each":
+      return `Iteration ${seg.iterationIndex}: ${formatValue(seg.itemValue)}`;
+    case "switch-case":
+      return `Case ${seg.matchedCaseIndex}: ${formatValue(seg.matchedValue)}`;
+    case "wait-for-condition":
+      return `Poll attempt ${seg.pollAttempt}`;
+  }
+}
+function formatValue(value) {
+  if (typeof value === "string")
+    return value;
+  return JSON.stringify(value);
+}
+var recordStatusColors = {
+  pending: "bg-muted text-muted-foreground",
+  running: "bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-400",
+  completed: "bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-400",
+  failed: "bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-400",
+  skipped: "bg-muted text-muted-foreground"
+};
+function ExecutionRecordCard({ record }) {
+  const pathLabel = record.path.length > 0 ? record.path.map(formatPathSegment).join(" > ") : null;
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "border border-border rounded-md p-2 space-y-1.5",
+    children: [
+      pathLabel && /* @__PURE__ */ jsxDEV("div", {
+        className: "text-[11px] font-medium text-muted-foreground",
+        children: pathLabel
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "flex items-center gap-2",
+        children: [
+          /* @__PURE__ */ jsxDEV("span", {
+            className: `text-[11px] font-medium px-2 py-0.5 rounded-full ${recordStatusColors[record.status]}`,
+            children: record.status
+          }, undefined, false, undefined, this),
+          record.durationMs !== undefined && /* @__PURE__ */ jsxDEV("span", {
+            className: "text-[11px] text-muted-foreground",
+            children: [
+              record.durationMs,
+              "ms"
+            ]
+          }, undefined, true, undefined, this),
+          record.retries.length > 0 && /* @__PURE__ */ jsxDEV("span", {
+            className: "text-[11px] text-amber-600 dark:text-amber-400",
+            children: [
+              record.retries.length,
+              " ",
+              record.retries.length === 1 ? "retry" : "retries"
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      record.resolvedInputs !== undefined && /* @__PURE__ */ jsxDEV("details", {
+        className: "text-xs",
+        children: [
+          /* @__PURE__ */ jsxDEV("summary", {
+            className: "text-[11px] font-medium text-muted-foreground uppercase tracking-wide cursor-pointer select-none",
+            children: "Resolved Inputs"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV(ResolvedCode, {
+            value: record.resolvedInputs
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      record.output !== undefined && /* @__PURE__ */ jsxDEV("details", {
+        className: "text-xs",
+        children: [
+          /* @__PURE__ */ jsxDEV("summary", {
+            className: "text-[11px] font-medium text-muted-foreground uppercase tracking-wide cursor-pointer select-none",
+            children: "Output"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV(Code, {
+            children: typeof record.output === "string" ? record.output : JSON.stringify(record.output, null, 2)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      record.error && /* @__PURE__ */ jsxDEV("div", {
+        className: "text-xs p-2 rounded bg-red-50 text-red-700 border border-red-200 dark:bg-red-900/30 dark:text-red-400 dark:border-red-800",
+        children: [
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "font-medium font-mono",
+            children: record.error.code
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "mt-0.5",
+            children: record.error.message
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function StepDetailPanel({
+  step,
+  diagnostics,
+  executionSummary,
+  executionRecords,
+  onClose
+}) {
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "w-[340px] border-l h-full min-h-0 overflow-y-auto shadow-lg bg-card border-border",
+    children: [
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "sticky top-0 border-b px-4 py-3 flex items-center justify-between bg-card border-border",
+        children: [
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "flex items-center gap-2",
+            children: [
+              /* @__PURE__ */ jsxDEV(TypeBadge, {
+                type: step.type
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("span", {
+                className: "font-medium text-sm truncate text-foreground",
+                children: step.name
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV("button", {
+            type: "button",
+            onClick: onClose,
+            className: "text-lg leading-none text-muted-foreground hover:text-foreground",
+            children: "×"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "px-4 py-3 space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV(Label, {
+                children: "Step ID"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "text-xs font-mono text-muted-foreground",
+                children: step.id
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV(Label, {
+                children: "Description"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "text-xs text-muted-foreground",
+                children: step.description
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          step.nextStepId && /* @__PURE__ */ jsxDEV("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV(Label, {
+                children: "Next Step"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "text-xs font-mono text-muted-foreground",
+                children: step.nextStepId
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "border-t pt-3 border-border",
+            children: [
+              /* @__PURE__ */ jsxDEV(Label, {
+                children: "Parameters"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "mt-1",
+                children: /* @__PURE__ */ jsxDEV(StepParams, {
+                  step,
+                  resolvedInputs: executionRecords?.length ? executionRecords[executionRecords.length - 1]?.resolvedInputs : undefined
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          executionSummary && /* @__PURE__ */ jsxDEV("div", {
+            className: "border-t border-border pt-3",
+            children: [
+              /* @__PURE__ */ jsxDEV(Label, {
+                children: "Execution"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "mt-1 space-y-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV("div", {
+                    className: "flex items-center gap-2",
+                    children: [
+                      /* @__PURE__ */ jsxDEV(StatusBadge, {
+                        summary: executionSummary
+                      }, undefined, false, undefined, this),
+                      executionSummary.latestDurationMs !== undefined && /* @__PURE__ */ jsxDEV("span", {
+                        className: "text-[11px] text-muted-foreground",
+                        children: [
+                          executionSummary.latestDurationMs,
+                          "ms"
+                        ]
+                      }, undefined, true, undefined, this),
+                      executionSummary.executionCount > 1 && /* @__PURE__ */ jsxDEV("span", {
+                        className: "text-[11px] text-muted-foreground",
+                        children: [
+                          "(",
+                          executionSummary.completedCount,
+                          "/",
+                          executionSummary.executionCount,
+                          " iterations)"
+                        ]
+                      }, undefined, true, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  executionSummary.latestOutput !== undefined && /* @__PURE__ */ jsxDEV("div", {
+                    children: [
+                      /* @__PURE__ */ jsxDEV(Label, {
+                        children: "Output"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV(Code, {
+                        children: typeof executionSummary.latestOutput === "string" ? executionSummary.latestOutput : JSON.stringify(executionSummary.latestOutput, null, 2)
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  executionSummary.latestError && /* @__PURE__ */ jsxDEV("div", {
+                    className: "text-xs p-2 rounded bg-red-50 text-red-700 border border-red-200 dark:bg-red-900/30 dark:text-red-400 dark:border-red-800",
+                    children: [
+                      /* @__PURE__ */ jsxDEV("div", {
+                        className: "font-medium font-mono",
+                        children: executionSummary.latestError.code
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV("div", {
+                        className: "mt-0.5",
+                        children: executionSummary.latestError.message
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  executionSummary.totalRetries > 0 && /* @__PURE__ */ jsxDEV("div", {
+                    className: "text-[11px] text-amber-600 dark:text-amber-400",
+                    children: [
+                      executionSummary.totalRetries,
+                      " ",
+                      executionSummary.totalRetries === 1 ? "retry" : "retries",
+                      " ",
+                      "attempted"
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          executionRecords && executionRecords.length > 0 && /* @__PURE__ */ jsxDEV("div", {
+            className: "border-t border-border pt-3",
+            children: [
+              /* @__PURE__ */ jsxDEV(Label, {
+                children: "Execution History"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "space-y-2 mt-1",
+                children: executionRecords.map((record, i) => /* @__PURE__ */ jsxDEV(ExecutionRecordCard, {
+                  record
+                }, `${record.stepId}-${i}`, false, undefined, this))
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          diagnostics.length > 0 && /* @__PURE__ */ jsxDEV("div", {
+            className: "border-t pt-3 border-border",
+            children: [
+              /* @__PURE__ */ jsxDEV(Label, {
+                children: "Diagnostics"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "space-y-2 mt-1",
+                children: diagnostics.map((d) => /* @__PURE__ */ jsxDEV("div", {
+                  className: `text-xs p-2 rounded ${d.severity === "error" ? "bg-red-50 text-red-700 border border-red-200 dark:bg-red-900/30 dark:text-red-400 dark:border-red-800" : "bg-amber-50 text-amber-700 border border-amber-200 dark:bg-amber-900/30 dark:text-amber-400 dark:border-amber-800"}`,
+                  children: [
+                    /* @__PURE__ */ jsxDEV("div", {
+                      className: "font-medium font-mono",
+                      children: d.code
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV("div", {
+                      className: "mt-0.5",
+                      children: d.message
+                    }, undefined, false, undefined, this)
+                  ]
+                }, `${d.code}-${d.message}`, true, undefined, this))
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+// src/theme.tsx
+import { useEffect, useMemo, useState } from "react";
+function useDarkMode() {
+  const [dark, setDark] = useState(() => typeof document !== "undefined" && document.documentElement.classList.contains("dark"));
+  useEffect(() => {
+    const el = document.documentElement;
+    const observer = new MutationObserver(() => {
+      setDark(el.classList.contains("dark"));
+    });
+    observer.observe(el, { attributes: true, attributeFilter: ["class"] });
+    setDark(el.classList.contains("dark"));
+    return () => observer.disconnect();
+  }, []);
+  return dark;
+}
+function resolveCssColor(varName, fallback) {
+  if (typeof document === "undefined")
+    return fallback;
+  const raw = getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
+  if (!raw)
+    return fallback;
+  if (/^\d/.test(raw) && !raw.startsWith("0x")) {
+    return `hsl(${raw})`;
+  }
+  return raw;
+}
+function useThemeColors() {
+  const dark = useDarkMode();
+  return useMemo(() => {
+    const resolve = (v, fb) => resolveCssColor(v, fb);
+    return {
+      dark,
+      border: resolve("--border", dark ? "#374151" : "#e5e7eb"),
+      mutedForeground: resolve("--muted-foreground", dark ? "#9ca3af" : "#6b7280"),
+      card: resolve("--card", dark ? "#1f2937" : "#ffffff")
+    };
+  }, [dark]);
+}
+// src/workflow-viewer.tsx
+import {
+  Background,
+  Controls,
+  MiniMap,
+  ReactFlow,
+  useEdgesState,
+  useNodesState
+} from "@xyflow/react";
+import { useCallback, useEffect as useEffect2, useMemo as useMemo2, useRef, useState as useState2 } from "react";
+
+// src/edges/workflow-edge.tsx
+import {
+  BaseEdge,
+  EdgeLabelRenderer,
+  getBezierPath
+} from "@xyflow/react";
+import { jsxDEV as jsxDEV2, Fragment } from "react/jsx-dev-runtime";
+function WorkflowEdge({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  label,
+  data,
+  markerEnd,
+  style
+}) {
+  const theme = useThemeColors();
+  const edgeKind = data?.edgeKind ?? "sequential";
+  const isContinuation = edgeKind === "continuation";
+  const isExecuted = data?.executed === true;
+  const hasExecutionState = data?.hasExecutionState === true;
+  const [edgePath, labelX, labelY] = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition
+  });
+  let stroke = theme.mutedForeground;
+  let strokeWidth = 1.5;
+  let opacity = isContinuation ? 0.5 : 1;
+  if (hasExecutionState) {
+    if (isExecuted) {
+      stroke = "#22c55e";
+      strokeWidth = 2.5;
+      opacity = 1;
+    } else {
+      opacity = 0.3;
+    }
+  }
+  return /* @__PURE__ */ jsxDEV2(Fragment, {
+    children: [
+      /* @__PURE__ */ jsxDEV2(BaseEdge, {
+        id,
+        path: edgePath,
+        markerEnd,
+        style: {
+          ...style,
+          strokeDasharray: isContinuation ? "6 3" : undefined,
+          stroke,
+          strokeWidth,
+          opacity
+        }
+      }, undefined, false, undefined, this),
+      label && /* @__PURE__ */ jsxDEV2(EdgeLabelRenderer, {
+        children: /* @__PURE__ */ jsxDEV2("div", {
+          style: {
+            position: "absolute",
+            transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+            pointerEvents: "all",
+            zIndex: 10
+          },
+          className: "px-1.5 py-0.5 rounded text-[10px] font-medium border-2 shadow whitespace-nowrap transition-colors duration-150 bg-card text-foreground border-border hover:border-foreground",
+          children: label
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/nodes/base-node.tsx
+import { Handle, Position } from "@xyflow/react";
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+function StatusIcon({ status }) {
+  switch (status) {
+    case "running":
+      return /* @__PURE__ */ jsxDEV3("span", {
+        className: "inline-block w-3.5 h-3.5 rounded-full border-2 border-blue-400 border-t-transparent animate-spin shrink-0"
+      }, undefined, false, undefined, this);
+    case "completed":
+      return /* @__PURE__ */ jsxDEV3("svg", {
+        className: "w-3.5 h-3.5 text-green-500 shrink-0",
+        viewBox: "0 0 16 16",
+        fill: "currentColor",
+        "aria-hidden": "true",
+        role: "img",
+        children: [
+          /* @__PURE__ */ jsxDEV3("title", {
+            children: "Completed"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3("path", {
+            d: "M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.75.75 0 0 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this);
+    case "failed":
+      return /* @__PURE__ */ jsxDEV3("svg", {
+        className: "w-3.5 h-3.5 text-red-500 shrink-0",
+        viewBox: "0 0 16 16",
+        fill: "currentColor",
+        "aria-hidden": "true",
+        role: "img",
+        children: [
+          /* @__PURE__ */ jsxDEV3("title", {
+            children: "Failed"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3("path", {
+            d: "M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.75.75 0 1 1 1.06 1.06L9.06 8l3.22 3.22a.75.75 0 1 1-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 0 1-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this);
+    default:
+      return null;
+  }
+}
+function BaseNode({
+  id,
+  name,
+  typeLabel,
+  typeLabelColor,
+  accent,
+  description,
+  diagnostics,
+  children,
+  selected,
+  hasSourceEdge = true,
+  hasTargetEdge = true,
+  executionSummary
+}) {
+  const hasErrors = diagnostics.some((d) => d.severity === "error");
+  const hasWarnings = !hasErrors && diagnostics.some((d) => d.severity === "warning");
+  let ringClass = "";
+  let opacityClass = "";
+  if (executionSummary) {
+    switch (executionSummary.status) {
+      case "running":
+        ringClass = "ring-2 ring-blue-400 animate-pulse";
+        break;
+      case "completed":
+        ringClass = "ring-2 ring-green-400";
+        break;
+      case "failed":
+        ringClass = "ring-2 ring-red-500";
+        break;
+      case "skipped":
+        opacityClass = "opacity-50";
+        break;
+    }
+  } else {
+    if (hasErrors)
+      ringClass = "ring-2 ring-red-500";
+    else if (hasWarnings)
+      ringClass = "ring-2 ring-amber-400";
+    else if (selected)
+      ringClass = "ring-2 ring-blue-400";
+  }
+  const hasRing = hasErrors || hasWarnings || selected || !!executionSummary;
+  return /* @__PURE__ */ jsxDEV3("div", {
+    className: `rounded-lg shadow-md border-l-4 w-[300px] transition-shadow duration-150 bg-card ${ringClass} ${opacityClass} ${hasRing ? "" : "hover:ring-2 hover:ring-ring"}`,
+    style: { borderLeftColor: accent },
+    children: [
+      hasTargetEdge && /* @__PURE__ */ jsxDEV3(Handle, {
+        type: "target",
+        position: Position.Top,
+        className: "!w-2 !h-2 !bg-muted-foreground"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV3("div", {
+        className: "px-3 py-2.5",
+        children: [
+          /* @__PURE__ */ jsxDEV3("div", {
+            className: "flex items-center justify-between gap-2",
+            children: [
+              /* @__PURE__ */ jsxDEV3("div", {
+                className: "flex items-center gap-2 min-w-0",
+                children: [
+                  /* @__PURE__ */ jsxDEV3("span", {
+                    className: `text-[10px] font-semibold uppercase tracking-wide shrink-0 ${typeLabelColor}`,
+                    children: typeLabel
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV3("div", {
+                    className: "font-medium text-sm truncate text-foreground",
+                    children: name
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV3("div", {
+                className: "flex items-center gap-1.5 shrink-0",
+                children: [
+                  executionSummary && executionSummary.totalRetries > 0 && /* @__PURE__ */ jsxDEV3("span", {
+                    className: "text-[10px] px-1 py-0.5 rounded bg-amber-100 text-amber-600 dark:bg-amber-900/50 dark:text-amber-400 font-medium",
+                    children: [
+                      executionSummary.totalRetries,
+                      " ",
+                      executionSummary.totalRetries === 1 ? "retry" : "retries"
+                    ]
+                  }, undefined, true, undefined, this),
+                  executionSummary && /* @__PURE__ */ jsxDEV3(StatusIcon, {
+                    status: executionSummary.status
+                  }, undefined, false, undefined, this),
+                  (hasErrors || hasWarnings) && /* @__PURE__ */ jsxDEV3("span", {
+                    className: `text-xs px-1.5 py-0.5 rounded-full font-medium ${hasErrors ? "bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-400" : "bg-amber-100 text-amber-700 dark:bg-amber-900/50 dark:text-amber-400"}`,
+                    children: diagnostics.length
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV3("div", {
+            className: "text-[11px] font-mono text-muted-foreground",
+            children: id
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3("div", {
+            className: "text-[11px] mt-1 text-muted-foreground",
+            children: description
+          }, undefined, false, undefined, this),
+          children && /* @__PURE__ */ jsxDEV3("div", {
+            className: "mt-2 border-t pt-2 border-border",
+            children
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      hasSourceEdge && /* @__PURE__ */ jsxDEV3(Handle, {
+        type: "source",
+        position: Position.Bottom,
+        className: "!w-2 !h-2 !bg-muted-foreground"
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/nodes/agent-loop-node.tsx
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+function AgentLoopNode({ data, selected }) {
+  const { step, diagnostics, hasSourceEdge } = data;
+  if (step.type !== "agent-loop")
+    return null;
+  return /* @__PURE__ */ jsxDEV4(BaseNode, {
+    id: step.id,
+    name: step.name,
+    typeLabel: "Agent",
+    typeLabelColor: "text-teal-500",
+    accent: "#14b8a6",
+    description: step.description,
+    diagnostics,
+    selected,
+    hasSourceEdge,
+    children: [
+      /* @__PURE__ */ jsxDEV4("div", {
+        className: "text-[11px] text-muted-foreground italic line-clamp-2 bg-muted rounded p-1.5 font-mono",
+        children: step.params.instructions
+      }, undefined, false, undefined, this),
+      step.params.tools.length > 0 && /* @__PURE__ */ jsxDEV4("div", {
+        className: "mt-1.5 flex gap-1.5 text-[11px]",
+        children: [
+          /* @__PURE__ */ jsxDEV4("span", {
+            className: "text-muted-foreground shrink-0",
+            children: "tools:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4("span", {
+            className: "font-mono text-muted-foreground truncate",
+            children: step.params.tools.join(", ")
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/nodes/end-node.tsx
+import { Handle as Handle2, Position as Position2 } from "@xyflow/react";
+import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
+function renderExpr(expr) {
+  if (expr.type === "literal")
+    return JSON.stringify(expr.value);
+  if (expr.type === "template")
+    return expr.template;
+  return expr.expression;
+}
+function EndNode({ data, selected }) {
+  const { step, diagnostics, executionSummary, outputSchema } = data;
+  const schema = outputSchema;
+  const schemaProperties = schema?.properties ? Object.entries(schema.properties) : [];
+  if (step?.type === "end" && (step.params?.output || schemaProperties.length > 0)) {
+    return /* @__PURE__ */ jsxDEV5(BaseNode, {
+      id: step.id,
+      name: step.name,
+      typeLabel: "End",
+      typeLabelColor: "text-muted-foreground",
+      accent: "#6b7280",
+      description: step.description,
+      diagnostics,
+      selected,
+      hasSourceEdge: false,
+      executionSummary,
+      children: [
+        step.params?.output && /* @__PURE__ */ jsxDEV5("div", {
+          className: "flex gap-1.5 text-[11px]",
+          children: [
+            /* @__PURE__ */ jsxDEV5("span", {
+              className: "text-muted-foreground shrink-0",
+              children: "output:"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV5("span", {
+              className: "font-mono text-muted-foreground truncate",
+              children: renderExpr(step.params.output)
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        schemaProperties.length > 0 && /* @__PURE__ */ jsxDEV5("div", {
+          className: "mt-1 space-y-0.5",
+          children: [
+            /* @__PURE__ */ jsxDEV5("div", {
+              className: "text-[10px] text-muted-foreground uppercase tracking-wide font-semibold",
+              children: "Output Schema"
+            }, undefined, false, undefined, this),
+            schemaProperties.map(([key, val]) => /* @__PURE__ */ jsxDEV5("div", {
+              className: "flex gap-1.5 text-[11px]",
+              children: [
+                /* @__PURE__ */ jsxDEV5("span", {
+                  className: "text-muted-foreground font-medium shrink-0",
+                  children: key
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV5("span", {
+                  className: "font-mono text-muted-foreground",
+                  children: val?.type
+                }, undefined, false, undefined, this)
+              ]
+            }, key, true, undefined, this))
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  }
+  const hasErrors = diagnostics?.some((d) => d.severity === "error");
+  let ringClass = "";
+  if (executionSummary) {
+    switch (executionSummary.status) {
+      case "running":
+        ringClass = "ring-2 ring-blue-400 animate-pulse";
+        break;
+      case "completed":
+        ringClass = "ring-2 ring-green-400";
+        break;
+      case "failed":
+        ringClass = "ring-2 ring-red-500";
+        break;
+    }
+  } else {
+    if (hasErrors)
+      ringClass = "ring-2 ring-red-500";
+    else if (selected)
+      ringClass = "ring-2 ring-blue-400";
+  }
+  const hasRing = hasErrors || selected || !!executionSummary;
+  return /* @__PURE__ */ jsxDEV5("div", {
+    className: `rounded-full w-[60px] h-[60px] flex items-center justify-center shadow-sm border transition-all duration-150 bg-muted border-border hover:bg-accent ${hasRing ? ringClass : "hover:ring-2 hover:ring-ring"}`,
+    children: [
+      /* @__PURE__ */ jsxDEV5(Handle2, {
+        type: "target",
+        position: Position2.Top,
+        className: "!w-2 !h-2 !bg-muted-foreground"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV5("span", {
+        className: "text-xs font-medium text-muted-foreground",
+        children: "End"
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/nodes/extract-data-node.tsx
+import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
+function renderExpr2(expr) {
+  if (expr.type === "literal")
+    return JSON.stringify(expr.value);
+  if (expr.type === "template")
+    return expr.template;
+  return expr.expression;
+}
+function ExtractDataNode({ data, selected }) {
+  const { step, diagnostics, hasSourceEdge, executionSummary } = data;
+  if (step.type !== "extract-data")
+    return null;
+  const outputFormat = step.params.outputFormat;
+  const outputKeys = outputFormat?.properties ? Object.keys(outputFormat.properties) : [];
+  const resolved = executionSummary?.latestResolvedInputs;
+  const hasSourceResolved = resolved?.sourceData !== undefined;
+  return /* @__PURE__ */ jsxDEV6(BaseNode, {
+    id: step.id,
+    name: step.name,
+    typeLabel: "Extract",
+    typeLabelColor: "text-purple-500",
+    accent: "#a855f7",
+    description: step.description,
+    diagnostics,
+    selected,
+    hasSourceEdge,
+    executionSummary,
+    children: [
+      /* @__PURE__ */ jsxDEV6("div", {
+        className: "flex gap-1.5 text-[11px]",
+        children: [
+          /* @__PURE__ */ jsxDEV6("span", {
+            className: "text-muted-foreground shrink-0",
+            children: "source:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV6("span", {
+            className: `font-mono truncate ${hasSourceResolved ? "text-emerald-700 dark:text-emerald-400" : "text-muted-foreground"}`,
+            title: hasSourceResolved ? renderExpr2(step.params.sourceData) : undefined,
+            children: hasSourceResolved ? typeof resolved.sourceData === "string" ? resolved.sourceData : JSON.stringify(resolved.sourceData) : renderExpr2(step.params.sourceData)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      outputKeys.length > 0 && /* @__PURE__ */ jsxDEV6("div", {
+        className: "mt-1 flex gap-1.5 text-[11px]",
+        children: [
+          /* @__PURE__ */ jsxDEV6("span", {
+            className: "text-muted-foreground shrink-0",
+            children: "output:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV6("span", {
+            className: "font-mono text-muted-foreground",
+            children: outputKeys.join(", ")
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/nodes/for-each-node.tsx
+import { Handle as Handle3, Position as Position3 } from "@xyflow/react";
+import { jsxDEV as jsxDEV7 } from "react/jsx-dev-runtime";
+function renderExpr3(expr) {
+  if (expr.type === "literal")
+    return JSON.stringify(expr.value);
+  if (expr.type === "template")
+    return expr.template;
+  return expr.expression;
+}
+function ForEachNode({ data, selected }) {
+  const {
+    step,
+    diagnostics,
+    isGroup,
+    groupWidth,
+    groupHeight,
+    hasSourceEdge,
+    executionSummary
+  } = data;
+  if (step.type !== "for-each")
+    return null;
+  if (isGroup) {
+    const hasErrors = diagnostics.some((d) => d.severity === "error");
+    const hasWarnings = !hasErrors && diagnostics.some((d) => d.severity === "warning");
+    let ringClass = "";
+    let borderColor = "border-emerald-300 dark:border-emerald-700";
+    if (executionSummary) {
+      switch (executionSummary.status) {
+        case "running":
+          ringClass = "ring-2 ring-blue-400 animate-pulse";
+          borderColor = "border-blue-300 dark:border-blue-700";
+          break;
+        case "completed":
+          ringClass = "ring-2 ring-green-400";
+          borderColor = "border-green-400 dark:border-green-600";
+          break;
+        case "failed":
+          ringClass = "ring-2 ring-red-500";
+          borderColor = "border-red-300 dark:border-red-700";
+          break;
+      }
+    } else {
+      if (hasErrors)
+        ringClass = "ring-2 ring-red-500";
+      else if (hasWarnings)
+        ringClass = "ring-2 ring-amber-400";
+      else if (selected)
+        ringClass = "ring-2 ring-emerald-400";
+    }
+    return /* @__PURE__ */ jsxDEV7("div", {
+      className: `rounded-xl border-2 border-dashed transition-colors duration-150 ${borderColor} bg-emerald-50/30 hover:bg-emerald-50/60 hover:border-emerald-500 dark:bg-emerald-950/30 dark:hover:bg-emerald-950/50 dark:hover:border-emerald-500 ${ringClass}`,
+      style: { width: groupWidth, height: groupHeight },
+      children: [
+        /* @__PURE__ */ jsxDEV7(Handle3, {
+          type: "target",
+          position: Position3.Top,
+          className: "!bg-emerald-500 !w-2.5 !h-2.5"
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV7("div", {
+          className: "px-3 py-2 flex items-center gap-2",
+          children: [
+            /* @__PURE__ */ jsxDEV7("span", {
+              className: "text-[10px] font-semibold uppercase tracking-wide text-emerald-500",
+              children: "Loop"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV7("span", {
+              className: "text-sm font-medium truncate text-foreground",
+              children: step.name
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        hasSourceEdge && /* @__PURE__ */ jsxDEV7(Handle3, {
+          type: "source",
+          position: Position3.Bottom,
+          className: "!bg-emerald-500 !w-2.5 !h-2.5"
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  }
+  const resolved = executionSummary?.latestResolvedInputs;
+  const hasTargetResolved = resolved?.target !== undefined;
+  return /* @__PURE__ */ jsxDEV7(BaseNode, {
+    id: step.id,
+    name: step.name,
+    typeLabel: "ForEach",
+    typeLabelColor: "text-emerald-500",
+    accent: "#10b981",
+    description: step.description,
+    diagnostics,
+    selected,
+    hasSourceEdge,
+    executionSummary,
+    children: [
+      /* @__PURE__ */ jsxDEV7("div", {
+        className: "flex gap-1.5 text-[11px]",
+        children: [
+          /* @__PURE__ */ jsxDEV7("span", {
+            className: "text-muted-foreground shrink-0",
+            children: "target:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV7("span", {
+            className: `font-mono truncate ${hasTargetResolved ? "text-emerald-700 dark:text-emerald-400" : "text-muted-foreground"}`,
+            title: hasTargetResolved ? renderExpr3(step.params.target) : undefined,
+            children: hasTargetResolved ? `[${Array.isArray(resolved.target) ? resolved.target.length : "?"} items]` : renderExpr3(step.params.target)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV7("div", {
+        className: "mt-0.5 flex gap-1.5 text-[11px]",
+        children: [
+          /* @__PURE__ */ jsxDEV7("span", {
+            className: "text-muted-foreground shrink-0",
+            children: "as:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV7("span", {
+            className: "font-mono text-muted-foreground",
+            children: step.params.itemName
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/nodes/group-header-node.tsx
+import { Handle as Handle4, Position as Position4 } from "@xyflow/react";
+import { jsxDEV as jsxDEV8 } from "react/jsx-dev-runtime";
+var variantStyles = {
+  switch: {
+    container: "bg-amber-50 dark:bg-amber-950/50 border-amber-300 dark:border-amber-700 hover:border-amber-500",
+    label: "text-amber-600 dark:text-amber-400",
+    mono: "text-amber-800 dark:text-amber-300",
+    resolved: "text-emerald-700 dark:text-emerald-400",
+    desc: "text-amber-700/70 dark:text-amber-400/60",
+    handle: "!bg-amber-500",
+    ring: "ring-amber-400"
+  },
+  loop: {
+    container: "bg-emerald-50 dark:bg-emerald-950/50 border-emerald-300 dark:border-emerald-700 hover:border-emerald-500",
+    label: "text-emerald-600 dark:text-emerald-400",
+    mono: "text-emerald-800 dark:text-emerald-300",
+    resolved: "text-emerald-700 dark:text-emerald-400",
+    desc: "text-emerald-700/70 dark:text-emerald-400/60",
+    handle: "!bg-emerald-500",
+    ring: "ring-emerald-400"
+  },
+  condition: {
+    container: "bg-orange-50 dark:bg-orange-950/50 border-orange-300 dark:border-orange-700 hover:border-orange-500",
+    label: "text-orange-600 dark:text-orange-400",
+    mono: "text-orange-800 dark:text-orange-300",
+    resolved: "text-emerald-700 dark:text-emerald-400",
+    desc: "text-orange-700/70 dark:text-orange-400/60",
+    handle: "!bg-orange-500",
+    ring: "ring-orange-400"
+  }
+};
+function formatValue2(value) {
+  if (typeof value === "string")
+    return value;
+  return JSON.stringify(value);
+}
+function GroupHeaderNode({ data, selected }) {
+  const {
+    variant,
+    description,
+    expression,
+    resolvedExpression,
+    target,
+    resolvedTarget,
+    itemName,
+    condition
+  } = data;
+  const s = variantStyles[variant];
+  return /* @__PURE__ */ jsxDEV8("div", {
+    className: `border-2 rounded-lg w-[280px] shadow-sm transition-colors duration-150 ${s.container} ${selected ? `ring-2 ${s.ring}` : ""}`,
+    children: [
+      /* @__PURE__ */ jsxDEV8("div", {
+        className: "px-3 py-2",
+        children: [
+          variant === "switch" && /* @__PURE__ */ jsxDEV8("div", {
+            className: "flex items-baseline gap-1.5",
+            children: [
+              /* @__PURE__ */ jsxDEV8("span", {
+                className: `text-[10px] font-bold uppercase tracking-wide ${s.label} shrink-0`,
+                children: "switch"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV8("span", {
+                className: `text-[11px] ${s.label}`,
+                children: "on"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV8("span", {
+                className: `text-xs font-mono font-medium truncate ${resolvedExpression !== undefined ? s.resolved : s.mono}`,
+                title: resolvedExpression !== undefined ? expression : undefined,
+                children: resolvedExpression !== undefined ? formatValue2(resolvedExpression) : expression
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          variant === "loop" && /* @__PURE__ */ jsxDEV8("div", {
+            className: "flex items-baseline gap-1.5 flex-wrap",
+            children: [
+              /* @__PURE__ */ jsxDEV8("span", {
+                className: `text-[10px] font-bold uppercase tracking-wide ${s.label} shrink-0`,
+                children: "foreach"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV8("span", {
+                className: `text-xs font-mono font-medium ${s.mono}`,
+                children: itemName
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV8("span", {
+                className: `text-[11px] ${s.label}`,
+                children: "in"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV8("span", {
+                className: `text-xs font-mono font-medium truncate ${resolvedTarget !== undefined ? s.resolved : s.mono}`,
+                title: resolvedTarget !== undefined ? target : undefined,
+                children: resolvedTarget !== undefined ? `[${Array.isArray(resolvedTarget) ? resolvedTarget.length : "?"} items]` : target
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          variant === "condition" && /* @__PURE__ */ jsxDEV8("div", {
+            className: "flex items-baseline gap-1.5",
+            children: [
+              /* @__PURE__ */ jsxDEV8("span", {
+                className: `text-[10px] font-bold uppercase tracking-wide ${s.label} shrink-0`,
+                children: "wait until"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV8("span", {
+                className: `text-xs font-mono font-medium ${s.mono} truncate`,
+                children: condition
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          description && /* @__PURE__ */ jsxDEV8("div", {
+            className: `text-[11px] ${s.desc} mt-0.5 line-clamp-1`,
+            children: description
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV8(Handle4, {
+        type: "source",
+        position: Position4.Bottom,
+        className: `${s.handle} !w-2 !h-2`
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/nodes/llm-prompt-node.tsx
+import { jsxDEV as jsxDEV9 } from "react/jsx-dev-runtime";
+function LlmPromptNode({ data, selected }) {
+  const { step, diagnostics, hasSourceEdge, executionSummary } = data;
+  if (step.type !== "llm-prompt")
+    return null;
+  const outputFormat = step.params.outputFormat;
+  const outputKeys = outputFormat?.properties ? Object.keys(outputFormat.properties) : [];
+  const resolved = executionSummary?.latestResolvedInputs;
+  const resolvedPrompt = resolved?.prompt;
+  return /* @__PURE__ */ jsxDEV9(BaseNode, {
+    id: step.id,
+    name: step.name,
+    typeLabel: "LLM",
+    typeLabelColor: "text-violet-500",
+    accent: "#8b5cf6",
+    description: step.description,
+    diagnostics,
+    selected,
+    hasSourceEdge,
+    executionSummary,
+    children: [
+      /* @__PURE__ */ jsxDEV9("div", {
+        className: `text-[11px] italic line-clamp-3 rounded p-1.5 font-mono ${resolvedPrompt ? "text-emerald-700 bg-emerald-50 dark:text-emerald-400 dark:bg-emerald-950/50" : "text-muted-foreground bg-muted"}`,
+        title: resolvedPrompt ? step.params.prompt : undefined,
+        children: resolvedPrompt ?? step.params.prompt
+      }, undefined, false, undefined, this),
+      outputKeys.length > 0 && /* @__PURE__ */ jsxDEV9("div", {
+        className: "mt-1.5 text-[11px] text-muted-foreground",
+        children: [
+          /* @__PURE__ */ jsxDEV9("span", {
+            children: "output: "
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV9("span", {
+            className: "font-mono text-muted-foreground",
+            children: outputKeys.join(", ")
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/nodes/sleep-node.tsx
+import { jsxDEV as jsxDEV10 } from "react/jsx-dev-runtime";
+function renderExpr4(expr) {
+  if (expr.type === "literal")
+    return JSON.stringify(expr.value);
+  if (expr.type === "template")
+    return expr.template;
+  return expr.expression;
+}
+function SleepNode({ data, selected }) {
+  const { step, diagnostics, hasSourceEdge } = data;
+  if (step.type !== "sleep")
+    return null;
+  return /* @__PURE__ */ jsxDEV10(BaseNode, {
+    id: step.id,
+    name: step.name,
+    typeLabel: "Sleep",
+    typeLabelColor: "text-amber-500",
+    accent: "#f59e0b",
+    description: step.description,
+    diagnostics,
+    selected,
+    hasSourceEdge,
+    children: /* @__PURE__ */ jsxDEV10("div", {
+      className: "flex gap-1.5 text-[11px]",
+      children: [
+        /* @__PURE__ */ jsxDEV10("span", {
+          className: "text-muted-foreground shrink-0",
+          children: "duration:"
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV10("span", {
+          className: "font-mono text-muted-foreground truncate",
+          children: [
+            renderExpr4(step.params.durationMs),
+            "ms"
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
+// src/nodes/start-node.tsx
+import { Handle as Handle5, Position as Position5 } from "@xyflow/react";
+import { jsxDEV as jsxDEV11 } from "react/jsx-dev-runtime";
+function StartNode({ selected }) {
+  return /* @__PURE__ */ jsxDEV11("div", {
+    className: `rounded-full w-[60px] h-[60px] flex items-center justify-center shadow-sm border transition-all duration-150 bg-muted border-border hover:bg-accent ${selected ? "ring-2 ring-blue-400" : "hover:ring-2 hover:ring-ring"}`,
+    children: [
+      /* @__PURE__ */ jsxDEV11("span", {
+        className: "text-xs font-medium text-muted-foreground",
+        children: "Start"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV11(Handle5, {
+        type: "source",
+        position: Position5.Bottom,
+        className: "!w-2 !h-2 !bg-muted-foreground"
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/nodes/start-step-node.tsx
+import { jsxDEV as jsxDEV12 } from "react/jsx-dev-runtime";
+function StartStepNode({ data, selected }) {
+  const { step, diagnostics, hasSourceEdge, executionSummary, inputSchema } = data;
+  if (step.type !== "start")
+    return null;
+  const schema = inputSchema;
+  const properties = schema?.properties ? Object.entries(schema.properties) : [];
+  return /* @__PURE__ */ jsxDEV12(BaseNode, {
+    id: step.id,
+    name: step.name,
+    typeLabel: "Start",
+    typeLabelColor: "text-green-500",
+    accent: "#22c55e",
+    description: step.description,
+    diagnostics,
+    selected,
+    hasSourceEdge,
+    hasTargetEdge: false,
+    executionSummary,
+    children: properties.length > 0 && /* @__PURE__ */ jsxDEV12("div", {
+      className: "space-y-0.5",
+      children: [
+        /* @__PURE__ */ jsxDEV12("div", {
+          className: "text-[10px] text-muted-foreground uppercase tracking-wide font-semibold",
+          children: "Inputs"
+        }, undefined, false, undefined, this),
+        properties.map(([key, val]) => /* @__PURE__ */ jsxDEV12("div", {
+          className: "flex gap-1.5 text-[11px]",
+          children: [
+            /* @__PURE__ */ jsxDEV12("span", {
+              className: "text-muted-foreground font-medium shrink-0",
+              children: key
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV12("span", {
+              className: "font-mono text-muted-foreground",
+              children: val?.type
+            }, undefined, false, undefined, this)
+          ]
+        }, key, true, undefined, this))
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
+// src/nodes/switch-case-node.tsx
+import { Handle as Handle6, Position as Position6 } from "@xyflow/react";
+import { jsxDEV as jsxDEV13 } from "react/jsx-dev-runtime";
+function renderExpr5(expr) {
+  if (expr.type === "literal")
+    return JSON.stringify(expr.value);
+  if (expr.type === "template")
+    return expr.template;
+  return expr.expression;
+}
+function SwitchCaseNode({ data, selected }) {
+  const {
+    step,
+    diagnostics,
+    isGroup,
+    groupWidth,
+    groupHeight,
+    hasSourceEdge,
+    executionSummary
+  } = data;
+  if (step.type !== "switch-case")
+    return null;
+  if (isGroup) {
+    const hasErrors = diagnostics.some((d) => d.severity === "error");
+    const hasWarnings = !hasErrors && diagnostics.some((d) => d.severity === "warning");
+    let ringClass = "";
+    let borderColor = "border-amber-300 dark:border-amber-700";
+    if (executionSummary) {
+      switch (executionSummary.status) {
+        case "running":
+          ringClass = "ring-2 ring-blue-400 animate-pulse";
+          borderColor = "border-blue-300 dark:border-blue-700";
+          break;
+        case "completed":
+          ringClass = "ring-2 ring-green-400";
+          borderColor = "border-green-400 dark:border-green-600";
+          break;
+        case "failed":
+          ringClass = "ring-2 ring-red-500";
+          borderColor = "border-red-300 dark:border-red-700";
+          break;
+      }
+    } else {
+      if (hasErrors)
+        ringClass = "ring-2 ring-red-500";
+      else if (hasWarnings)
+        ringClass = "ring-2 ring-amber-400";
+      else if (selected)
+        ringClass = "ring-2 ring-amber-400";
+    }
+    return /* @__PURE__ */ jsxDEV13("div", {
+      className: `rounded-xl border-2 border-dashed transition-colors duration-150 ${borderColor} bg-amber-50/30 hover:bg-amber-50/60 hover:border-amber-500 dark:bg-amber-950/30 dark:hover:bg-amber-950/50 dark:hover:border-amber-500 ${ringClass}`,
+      style: { width: groupWidth, height: groupHeight },
+      children: [
+        /* @__PURE__ */ jsxDEV13(Handle6, {
+          type: "target",
+          position: Position6.Top,
+          className: "!bg-amber-500 !w-2.5 !h-2.5"
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV13("div", {
+          className: "px-3 py-2 flex items-center gap-2",
+          children: [
+            /* @__PURE__ */ jsxDEV13("span", {
+              className: "text-[10px] font-semibold uppercase tracking-wide text-amber-500",
+              children: "Branch"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV13("span", {
+              className: "text-sm font-medium truncate text-foreground",
+              children: step.name
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        hasSourceEdge && /* @__PURE__ */ jsxDEV13(Handle6, {
+          type: "source",
+          position: Position6.Bottom,
+          className: "!bg-amber-500 !w-2.5 !h-2.5"
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  }
+  const resolved = executionSummary?.latestResolvedInputs;
+  const hasSwitchResolved = resolved?.switchOn !== undefined;
+  return /* @__PURE__ */ jsxDEV13(BaseNode, {
+    id: step.id,
+    name: step.name,
+    typeLabel: "Switch",
+    typeLabelColor: "text-amber-500",
+    accent: "#f59e0b",
+    description: step.description,
+    diagnostics,
+    selected,
+    hasSourceEdge,
+    executionSummary,
+    children: [
+      /* @__PURE__ */ jsxDEV13("div", {
+        className: "flex gap-1.5 text-[11px]",
+        children: [
+          /* @__PURE__ */ jsxDEV13("span", {
+            className: "text-muted-foreground shrink-0",
+            children: "on:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV13("span", {
+            className: `font-mono truncate ${hasSwitchResolved ? "text-emerald-700 dark:text-emerald-400" : "text-muted-foreground"}`,
+            title: hasSwitchResolved ? renderExpr5(step.params.switchOn) : undefined,
+            children: hasSwitchResolved ? JSON.stringify(resolved.switchOn) : renderExpr5(step.params.switchOn)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV13("div", {
+        className: "mt-1.5 space-y-0.5",
+        children: step.params.cases.map((c) => /* @__PURE__ */ jsxDEV13("div", {
+          className: "flex items-center gap-1.5 text-[11px]",
+          children: [
+            /* @__PURE__ */ jsxDEV13("span", {
+              className: "font-mono text-muted-foreground",
+              children: c.value.type === "default" ? "default" : renderExpr5(c.value)
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV13("span", {
+              className: "text-muted-foreground/50",
+              children: "→"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV13("span", {
+              className: "font-mono text-muted-foreground",
+              children: c.branchBodyStepId
+            }, undefined, false, undefined, this)
+          ]
+        }, c.branchBodyStepId, true, undefined, this))
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/nodes/tool-call-node.tsx
+import { jsxDEV as jsxDEV14 } from "react/jsx-dev-runtime";
+function renderExpr6(expr) {
+  if (expr.type === "literal")
+    return JSON.stringify(expr.value);
+  if (expr.type === "template")
+    return expr.template;
+  return expr.expression;
+}
+function formatValue3(value) {
+  if (typeof value === "string")
+    return value;
+  return JSON.stringify(value);
+}
+function ToolCallNode({ data, selected }) {
+  const { step, diagnostics, hasSourceEdge, executionSummary } = data;
+  if (step.type !== "tool-call")
+    return null;
+  const entries = Object.entries(step.params.toolInput);
+  const resolved = executionSummary?.latestResolvedInputs;
+  return /* @__PURE__ */ jsxDEV14(BaseNode, {
+    id: step.id,
+    name: step.name,
+    typeLabel: "Tool",
+    typeLabelColor: "text-blue-500",
+    accent: "#3b82f6",
+    description: step.description,
+    diagnostics,
+    selected,
+    hasSourceEdge,
+    executionSummary,
+    children: [
+      /* @__PURE__ */ jsxDEV14("div", {
+        className: "text-xs font-mono font-medium text-foreground",
+        children: step.params.toolName
+      }, undefined, false, undefined, this),
+      entries.length > 0 && /* @__PURE__ */ jsxDEV14("div", {
+        className: "mt-1.5 space-y-0.5",
+        children: entries.map(([key, val]) => {
+          const resolvedVal = resolved?.[key];
+          const hasResolved = resolvedVal !== undefined;
+          return /* @__PURE__ */ jsxDEV14("div", {
+            className: "flex gap-1.5 text-[11px]",
+            children: [
+              /* @__PURE__ */ jsxDEV14("span", {
+                className: "text-muted-foreground shrink-0",
+                children: [
+                  key,
+                  ":"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV14("span", {
+                className: `font-mono truncate ${hasResolved ? "text-emerald-700 dark:text-emerald-400" : "text-muted-foreground"}`,
+                title: hasResolved ? renderExpr6(val) : undefined,
+                children: hasResolved ? formatValue3(resolvedVal) : renderExpr6(val)
+              }, undefined, false, undefined, this)
+            ]
+          }, key, true, undefined, this);
+        })
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/nodes/wait-for-condition-node.tsx
+import { Handle as Handle7, Position as Position7 } from "@xyflow/react";
+import { jsxDEV as jsxDEV15 } from "react/jsx-dev-runtime";
+function renderExpr7(expr) {
+  if (expr.type === "literal")
+    return JSON.stringify(expr.value);
+  if (expr.type === "template")
+    return expr.template;
+  return expr.expression;
+}
+function WaitForConditionNode({ data, selected }) {
+  const { step, diagnostics, isGroup, groupWidth, groupHeight, hasSourceEdge } = data;
+  if (step.type !== "wait-for-condition")
+    return null;
+  if (isGroup) {
+    const hasErrors = diagnostics.some((d) => d.severity === "error");
+    const hasWarnings = !hasErrors && diagnostics.some((d) => d.severity === "warning");
+    let ringClass = "";
+    if (hasErrors)
+      ringClass = "ring-2 ring-red-500";
+    else if (hasWarnings)
+      ringClass = "ring-2 ring-amber-400";
+    else if (selected)
+      ringClass = "ring-2 ring-orange-400";
+    return /* @__PURE__ */ jsxDEV15("div", {
+      className: `rounded-xl border-2 border-dashed transition-colors duration-150 border-orange-300 bg-orange-50/30 dark:border-orange-700 dark:bg-orange-950/30 ${ringClass}`,
+      style: { width: groupWidth, height: groupHeight },
+      children: [
+        /* @__PURE__ */ jsxDEV15(Handle7, {
+          type: "target",
+          position: Position7.Top,
+          className: "!bg-orange-500 !w-2.5 !h-2.5"
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV15("div", {
+          className: "px-3 py-2 flex items-center gap-2",
+          children: [
+            /* @__PURE__ */ jsxDEV15("span", {
+              className: "text-[10px] font-semibold uppercase tracking-wide text-orange-500",
+              children: "Wait"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV15("span", {
+              className: "text-sm font-medium text-foreground truncate",
+              children: step.name
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        hasSourceEdge && /* @__PURE__ */ jsxDEV15(Handle7, {
+          type: "source",
+          position: Position7.Bottom,
+          className: "!bg-orange-500 !w-2.5 !h-2.5"
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV15(BaseNode, {
+    id: step.id,
+    name: step.name,
+    typeLabel: "Wait",
+    typeLabelColor: "text-orange-500",
+    accent: "#f97316",
+    description: step.description,
+    diagnostics,
+    selected,
+    hasSourceEdge,
+    children: [
+      /* @__PURE__ */ jsxDEV15("div", {
+        className: "flex gap-1.5 text-[11px]",
+        children: [
+          /* @__PURE__ */ jsxDEV15("span", {
+            className: "text-muted-foreground shrink-0",
+            children: "until:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV15("span", {
+            className: "font-mono text-muted-foreground truncate",
+            children: renderExpr7(step.params.condition)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      step.params.maxAttempts && /* @__PURE__ */ jsxDEV15("div", {
+        className: "mt-0.5 flex gap-1.5 text-[11px]",
+        children: [
+          /* @__PURE__ */ jsxDEV15("span", {
+            className: "text-muted-foreground shrink-0",
+            children: "max attempts:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV15("span", {
+            className: "font-mono text-muted-foreground",
+            children: renderExpr7(step.params.maxAttempts)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/workflow-viewer.tsx
+import { jsxDEV as jsxDEV16 } from "react/jsx-dev-runtime";
+var nodeTypes = {
+  toolCall: ToolCallNode,
+  llmPrompt: LlmPromptNode,
+  extractData: ExtractDataNode,
+  switchCase: SwitchCaseNode,
+  groupHeader: GroupHeaderNode,
+  forEach: ForEachNode,
+  end: EndNode,
+  start: StartNode,
+  startStep: StartStepNode,
+  sleep: SleepNode,
+  waitForCondition: WaitForConditionNode,
+  agentLoop: AgentLoopNode
+};
+var edgeTypes = {
+  workflow: WorkflowEdge
+};
+var EMPTY_DIAGNOSTICS = [];
+function WorkflowViewer({
+  workflow,
+  diagnostics = EMPTY_DIAGNOSTICS,
+  onStepSelect,
+  executionState,
+  showMinimap = true,
+  minimapWidth = 200,
+  minimapHeight = 150
+}) {
+  const theme = useThemeColors();
+  const containerRef = useRef(null);
+  const [containerWidth, setContainerWidth] = useState2(0);
+  const layout = useMemo2(() => buildLayout(workflow, diagnostics, executionState), [workflow, diagnostics, executionState]);
+  const [nodes, setNodes, onNodesChange] = useNodesState(layout.nodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(layout.edges);
+  const [selectedStep, setSelectedStep] = useState2(null);
+  const [selectedDiagnostics, setSelectedDiagnostics] = useState2(EMPTY_DIAGNOSTICS);
+  const [selectedExecutionSummary, setSelectedExecutionSummary] = useState2();
+  const [selectedExecutionRecords, setSelectedExecutionRecords] = useState2();
+  useEffect2(() => {
+    setNodes(layout.nodes);
+    setEdges(layout.edges);
+  }, [layout, setNodes, setEdges]);
+  useEffect2(() => {
+    const el = containerRef.current;
+    if (!el)
+      return;
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry)
+        setContainerWidth(entry.contentRect.width);
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  const effectiveMinimapWidth = containerWidth > 0 ? Math.min(minimapWidth, containerWidth * 0.25) : minimapWidth;
+  const effectiveMinimapHeight = minimapHeight * (effectiveMinimapWidth / minimapWidth);
+  const onNodeClick = useCallback((_, node) => {
+    const data = node.data;
+    if (!data.step)
+      return;
+    setSelectedStep(data.step);
+    setSelectedDiagnostics(data.diagnostics);
+    setSelectedExecutionSummary(data.executionSummary);
+    setSelectedExecutionRecords(executionState?.stepRecords.filter((r) => r.stepId === data.step.id));
+    onStepSelect?.(data.step, data.diagnostics);
+  }, [onStepSelect, executionState]);
+  const onPaneClick = useCallback(() => {
+    setSelectedStep(null);
+    setSelectedDiagnostics([]);
+    setSelectedExecutionSummary(undefined);
+    setSelectedExecutionRecords(undefined);
+    onStepSelect?.(null, []);
+  }, [onStepSelect]);
+  return /* @__PURE__ */ jsxDEV16("div", {
+    className: "flex h-full w-full min-h-0",
+    children: [
+      /* @__PURE__ */ jsxDEV16("div", {
+        ref: containerRef,
+        className: "flex-1 relative",
+        children: /* @__PURE__ */ jsxDEV16(ReactFlow, {
+          nodes,
+          edges,
+          onNodesChange,
+          onEdgesChange,
+          onNodeClick,
+          onPaneClick,
+          nodeTypes,
+          edgeTypes,
+          fitView: true,
+          fitViewOptions: { padding: 0.2 },
+          nodesDraggable: false,
+          defaultEdgeOptions: {
+            type: "workflow"
+          },
+          proOptions: { hideAttribution: true },
+          colorMode: theme.dark ? "dark" : "light",
+          children: [
+            /* @__PURE__ */ jsxDEV16(Background, {
+              color: theme.border,
+              gap: 16
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV16(Controls, {
+              showInteractive: false
+            }, undefined, false, undefined, this),
+            showMinimap && /* @__PURE__ */ jsxDEV16(MiniMap, {
+              nodeStrokeWidth: 2,
+              pannable: true,
+              zoomable: true,
+              style: {
+                width: effectiveMinimapWidth,
+                height: effectiveMinimapHeight,
+                border: `1px solid ${theme.border}`,
+                backgroundColor: theme.card
+              },
+              nodeColor: theme.mutedForeground
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this),
+      selectedStep && /* @__PURE__ */ jsxDEV16(StepDetailPanel, {
+        step: selectedStep,
+        diagnostics: selectedDiagnostics,
+        executionSummary: selectedExecutionSummary,
+        executionRecords: selectedExecutionRecords,
+        onClose: () => {
+          setSelectedStep(null);
+          setSelectedDiagnostics([]);
+          setSelectedExecutionSummary(undefined);
+          setSelectedExecutionRecords(undefined);
+          onStepSelect?.(null, []);
+        }
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+export {
+  useDarkMode,
+  deriveStepSummaries,
+  buildLayout,
+  WorkflowViewer,
+  StepDetailPanel
+};
+
+//# debugId=67D796A55E18E22964756E2164756E21