@isaacwasserman/remora 0.1.0

package/dist/viewer/index.js

@@ -0,0 +1,1554 @@
+// src/viewer/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";
+  }
+}
+function renderExpression(expr) {
+  if (expr.type === "literal")
+    return JSON.stringify(expr.value);
+  return expr.expression;
+}
+function nodeSize(step) {
+  return step.type === "end" ? { w: END_NODE_SIZE, h: END_NODE_SIZE } : { 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 {
+    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);
+    }
+  }
+  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") {
+      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) {
+  if (groupIds.has(nodeId)) {
+    return getOrThrow(computedSizes, nodeId);
+  }
+  return nodeSize(getOrThrow(stepMap, nodeId));
+}
+function buildLayout(workflow, diagnostics = []) {
+  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") {
+      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);
+      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);
+      }
+    }
+    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);
+        }
+      }
+    }
+    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);
+        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(() => ({}));
+  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);
+      topG.setNode(step.id, { width: w, height: h });
+    }
+  }
+  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);
+      }
+    }
+  }
+  dagre.layout(topG);
+  const topLevelPositions = new Map;
+  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);
+    topLevelPositions.set(stepId, {
+      x: pos.x - w / 2,
+      y: pos.y - h / 2
+    });
+  }
+  const nodes = [];
+  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
+        },
+        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);
+      if (step.type === "switch-case") {
+        nodes.push({
+          id,
+          type: "groupHeader",
+          position: pos,
+          data: {
+            variant: "switch",
+            description: step.description,
+            expression: renderExpression(step.params.switchOn)
+          },
+          ...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),
+            itemName: step.params.itemName
+          },
+          ...parentId ? { parentId, extent: "parent" } : {}
+        });
+      }
+    }
+    for (const id of nonGroups) {
+      const step = getOrThrow(stepMap, id);
+      const pos = getPosition(id);
+      nodes.push({
+        id,
+        type: stepNodeType(step),
+        position: pos,
+        data: {
+          step,
+          diagnostics: diagnosticsByStep.get(id) ?? [],
+          hasSourceEdge: !!step.nextStepId
+        },
+        ...parentId ? { parentId, extent: "parent" } : {}
+      });
+    }
+  }
+  addNodesForContext(topLevelStepIds, (id) => getOrThrow(topLevelPositions, id));
+  const edges = [];
+  edges.push({
+    id: `${START_NODE_ID}->${workflow.initialStepId}`,
+    source: START_NODE_ID,
+    target: workflow.initialStepId,
+    type: "workflow",
+    data: { edgeKind: "sequential" }
+  });
+  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" }
+          });
+        }
+      }
+      if (step.nextStepId) {
+        edges.push({
+          id: `${step.id}->${step.nextStepId}`,
+          source: step.id,
+          target: step.nextStepId,
+          type: "workflow",
+          data: { edgeKind: "sequential" }
+        });
+      }
+    } 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" }
+        });
+      }
+      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" }
+      });
+    }
+  }
+  return { nodes, edges };
+}
+// src/viewer/workflow-viewer.tsx
+import {
+  Background,
+  Controls,
+  MiniMap,
+  ReactFlow,
+  useEdgesState,
+  useNodesState
+} from "@xyflow/react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+// src/viewer/edges/workflow-edge.tsx
+import {
+  BaseEdge,
+  EdgeLabelRenderer,
+  getBezierPath
+} from "@xyflow/react";
+import { jsxDEV, Fragment } from "react/jsx-dev-runtime";
+function WorkflowEdge({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  label,
+  data,
+  markerEnd,
+  style
+}) {
+  const edgeKind = data?.edgeKind ?? "sequential";
+  const isContinuation = edgeKind === "continuation";
+  const [edgePath, labelX, labelY] = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition
+  });
+  return /* @__PURE__ */ jsxDEV(Fragment, {
+    children: [
+      /* @__PURE__ */ jsxDEV(BaseEdge, {
+        id,
+        path: edgePath,
+        markerEnd,
+        style: {
+          ...style,
+          strokeDasharray: isContinuation ? "6 3" : undefined,
+          stroke: isContinuation ? "#9ca3af" : "#6b7280",
+          strokeWidth: 1.5
+        }
+      }, undefined, false, undefined, this),
+      label && /* @__PURE__ */ jsxDEV(EdgeLabelRenderer, {
+        children: /* @__PURE__ */ jsxDEV("div", {
+          style: {
+            position: "absolute",
+            transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+            pointerEvents: "all",
+            zIndex: 10
+          },
+          className: "bg-white px-1.5 py-0.5 rounded text-[10px] text-gray-700 font-medium border border-gray-200 shadow whitespace-nowrap",
+          children: label
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/viewer/nodes/end-node.tsx
+import { Handle, Position } from "@xyflow/react";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+function EndNode({ data, selected }) {
+  const { diagnostics } = data;
+  const hasErrors = diagnostics.some((d) => d.severity === "error");
+  let ringClass = "";
+  if (hasErrors)
+    ringClass = "ring-2 ring-red-500";
+  else if (selected)
+    ringClass = "ring-2 ring-blue-400";
+  return /* @__PURE__ */ jsxDEV2("div", {
+    className: `bg-gray-100 rounded-full w-[60px] h-[60px] flex items-center justify-center shadow-sm border border-gray-300 ${ringClass}`,
+    children: [
+      /* @__PURE__ */ jsxDEV2(Handle, {
+        type: "target",
+        position: Position.Top,
+        className: "!bg-gray-400 !w-2 !h-2"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV2("span", {
+        className: "text-xs font-medium text-gray-500",
+        children: "End"
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/viewer/nodes/base-node.tsx
+import { Handle as Handle2, Position as Position2 } from "@xyflow/react";
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+function BaseNode({
+  id,
+  name,
+  typeLabel,
+  typeLabelColor,
+  accent,
+  description,
+  diagnostics,
+  children,
+  selected,
+  hasSourceEdge = true
+}) {
+  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-blue-400";
+  return /* @__PURE__ */ jsxDEV3("div", {
+    className: `bg-white rounded-lg shadow-md border-l-4 w-[300px] ${ringClass}`,
+    style: { borderLeftColor: accent },
+    children: [
+      /* @__PURE__ */ jsxDEV3(Handle2, {
+        type: "target",
+        position: Position2.Top,
+        className: "!bg-gray-400 !w-2 !h-2"
+      }, 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 text-gray-900 truncate",
+                    children: name
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              (hasErrors || hasWarnings) && /* @__PURE__ */ jsxDEV3("span", {
+                className: `text-xs px-1.5 py-0.5 rounded-full font-medium shrink-0 ${hasErrors ? "bg-red-100 text-red-700" : "bg-amber-100 text-amber-700"}`,
+                children: diagnostics.length
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV3("div", {
+            className: "text-[11px] text-gray-400 font-mono",
+            children: id
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3("div", {
+            className: "text-[11px] text-gray-500 mt-1",
+            children: description
+          }, undefined, false, undefined, this),
+          children && /* @__PURE__ */ jsxDEV3("div", {
+            className: "mt-2 border-t border-gray-100 pt-2",
+            children
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      hasSourceEdge && /* @__PURE__ */ jsxDEV3(Handle2, {
+        type: "source",
+        position: Position2.Bottom,
+        className: "!bg-gray-400 !w-2 !h-2"
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/viewer/nodes/extract-data-node.tsx
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+function renderExpr(expr) {
+  if (expr.type === "literal")
+    return JSON.stringify(expr.value);
+  return expr.expression;
+}
+function ExtractDataNode({ data, selected }) {
+  const { step, diagnostics, hasSourceEdge } = data;
+  if (step.type !== "extract-data")
+    return null;
+  const outputFormat = step.params.outputFormat;
+  const outputKeys = outputFormat?.properties ? Object.keys(outputFormat.properties) : [];
+  return /* @__PURE__ */ jsxDEV4(BaseNode, {
+    id: step.id,
+    name: step.name,
+    typeLabel: "Extract",
+    typeLabelColor: "text-purple-500",
+    accent: "#a855f7",
+    description: step.description,
+    diagnostics,
+    selected,
+    hasSourceEdge,
+    children: [
+      /* @__PURE__ */ jsxDEV4("div", {
+        className: "flex gap-1.5 text-[11px]",
+        children: [
+          /* @__PURE__ */ jsxDEV4("span", {
+            className: "text-gray-400 shrink-0",
+            children: "source:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4("span", {
+            className: "font-mono text-gray-600 truncate",
+            children: renderExpr(step.params.sourceData)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      outputKeys.length > 0 && /* @__PURE__ */ jsxDEV4("div", {
+        className: "mt-1 flex gap-1.5 text-[11px]",
+        children: [
+          /* @__PURE__ */ jsxDEV4("span", {
+            className: "text-gray-400 shrink-0",
+            children: "output:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4("span", {
+            className: "font-mono text-gray-500",
+            children: outputKeys.join(", ")
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/viewer/nodes/for-each-node.tsx
+import { Handle as Handle3, Position as Position3 } from "@xyflow/react";
+import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
+function renderExpr2(expr) {
+  if (expr.type === "literal")
+    return JSON.stringify(expr.value);
+  return expr.expression;
+}
+function ForEachNode({ data, selected }) {
+  const { step, diagnostics, isGroup, groupWidth, groupHeight, hasSourceEdge } = 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 = "";
+    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__ */ jsxDEV5("div", {
+      className: `rounded-xl border-2 border-dashed border-emerald-300 bg-emerald-50/30 ${ringClass}`,
+      style: { width: groupWidth, height: groupHeight },
+      children: [
+        /* @__PURE__ */ jsxDEV5(Handle3, {
+          type: "target",
+          position: Position3.Top,
+          className: "!bg-emerald-500 !w-2.5 !h-2.5"
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV5("div", {
+          className: "px-3 py-2 flex items-center gap-2",
+          children: [
+            /* @__PURE__ */ jsxDEV5("span", {
+              className: "text-[10px] font-semibold uppercase tracking-wide text-emerald-500",
+              children: "Loop"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV5("span", {
+              className: "text-sm font-medium text-gray-800 truncate",
+              children: step.name
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        hasSourceEdge && /* @__PURE__ */ jsxDEV5(Handle3, {
+          type: "source",
+          position: Position3.Bottom,
+          className: "!bg-emerald-500 !w-2.5 !h-2.5"
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV5(BaseNode, {
+    id: step.id,
+    name: step.name,
+    typeLabel: "ForEach",
+    typeLabelColor: "text-emerald-500",
+    accent: "#10b981",
+    description: step.description,
+    diagnostics,
+    selected,
+    hasSourceEdge,
+    children: [
+      /* @__PURE__ */ jsxDEV5("div", {
+        className: "flex gap-1.5 text-[11px]",
+        children: [
+          /* @__PURE__ */ jsxDEV5("span", {
+            className: "text-gray-400 shrink-0",
+            children: "target:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("span", {
+            className: "font-mono text-gray-600 truncate",
+            children: renderExpr2(step.params.target)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV5("div", {
+        className: "mt-0.5 flex gap-1.5 text-[11px]",
+        children: [
+          /* @__PURE__ */ jsxDEV5("span", {
+            className: "text-gray-400 shrink-0",
+            children: "as:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("span", {
+            className: "font-mono text-gray-600",
+            children: step.params.itemName
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/viewer/nodes/group-header-node.tsx
+import { Handle as Handle4, Position as Position4 } from "@xyflow/react";
+import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
+var styles = {
+  switch: {
+    bg: "bg-amber-50",
+    border: "border-amber-300",
+    label: "text-amber-600",
+    mono: "text-amber-800",
+    desc: "text-amber-700/70",
+    handle: "!bg-amber-500",
+    ring: "ring-amber-400"
+  },
+  loop: {
+    bg: "bg-emerald-50",
+    border: "border-emerald-300",
+    label: "text-emerald-600",
+    mono: "text-emerald-800",
+    desc: "text-emerald-700/70",
+    handle: "!bg-emerald-500",
+    ring: "ring-emerald-400"
+  }
+};
+function GroupHeaderNode({ data, selected }) {
+  const { variant, description, expression, target, itemName } = data;
+  const s = styles[variant];
+  return /* @__PURE__ */ jsxDEV6("div", {
+    className: `${s.bg} border-2 ${s.border} rounded-lg w-[280px] shadow-sm ${selected ? `ring-2 ${s.ring}` : ""}`,
+    children: [
+      /* @__PURE__ */ jsxDEV6("div", {
+        className: "px-3 py-2",
+        children: [
+          variant === "switch" && /* @__PURE__ */ jsxDEV6("div", {
+            className: "flex items-baseline gap-1.5",
+            children: [
+              /* @__PURE__ */ jsxDEV6("span", {
+                className: `text-[10px] font-bold uppercase tracking-wide ${s.label} shrink-0`,
+                children: "switch"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV6("span", {
+                className: `text-[11px] ${s.label}`,
+                children: "on"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV6("span", {
+                className: `text-xs font-mono font-medium ${s.mono} truncate`,
+                children: expression
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          variant === "loop" && /* @__PURE__ */ jsxDEV6("div", {
+            className: "flex items-baseline gap-1.5 flex-wrap",
+            children: [
+              /* @__PURE__ */ jsxDEV6("span", {
+                className: `text-[10px] font-bold uppercase tracking-wide ${s.label} shrink-0`,
+                children: "foreach"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV6("span", {
+                className: `text-xs font-mono font-medium ${s.mono}`,
+                children: itemName
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV6("span", {
+                className: `text-[11px] ${s.label}`,
+                children: "in"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV6("span", {
+                className: `text-xs font-mono font-medium ${s.mono} truncate`,
+                children: target
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          description && /* @__PURE__ */ jsxDEV6("div", {
+            className: `text-[11px] ${s.desc} mt-0.5 line-clamp-1`,
+            children: description
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV6(Handle4, {
+        type: "source",
+        position: Position4.Bottom,
+        className: `${s.handle} !w-2 !h-2`
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/viewer/nodes/llm-prompt-node.tsx
+import { jsxDEV as jsxDEV7 } from "react/jsx-dev-runtime";
+function LlmPromptNode({ data, selected }) {
+  const { step, diagnostics, hasSourceEdge } = data;
+  if (step.type !== "llm-prompt")
+    return null;
+  const outputFormat = step.params.outputFormat;
+  const outputKeys = outputFormat?.properties ? Object.keys(outputFormat.properties) : [];
+  return /* @__PURE__ */ jsxDEV7(BaseNode, {
+    id: step.id,
+    name: step.name,
+    typeLabel: "LLM",
+    typeLabelColor: "text-violet-500",
+    accent: "#8b5cf6",
+    description: step.description,
+    diagnostics,
+    selected,
+    hasSourceEdge,
+    children: [
+      /* @__PURE__ */ jsxDEV7("div", {
+        className: "text-[11px] text-gray-500 italic line-clamp-3 bg-gray-50 rounded p-1.5 font-mono",
+        children: step.params.prompt
+      }, undefined, false, undefined, this),
+      outputKeys.length > 0 && /* @__PURE__ */ jsxDEV7("div", {
+        className: "mt-1.5 text-[11px] text-gray-400",
+        children: [
+          /* @__PURE__ */ jsxDEV7("span", {
+            className: "text-gray-400",
+            children: "output: "
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV7("span", {
+            className: "font-mono text-gray-500",
+            children: outputKeys.join(", ")
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/viewer/nodes/start-node.tsx
+import { Handle as Handle5, Position as Position5 } from "@xyflow/react";
+import { jsxDEV as jsxDEV8 } from "react/jsx-dev-runtime";
+function StartNode({ selected }) {
+  return /* @__PURE__ */ jsxDEV8("div", {
+    className: `bg-gray-100 rounded-full w-[60px] h-[60px] flex items-center justify-center shadow-sm border border-gray-300 ${selected ? "ring-2 ring-blue-400" : ""}`,
+    children: [
+      /* @__PURE__ */ jsxDEV8("span", {
+        className: "text-xs font-medium text-gray-500",
+        children: "Start"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV8(Handle5, {
+        type: "source",
+        position: Position5.Bottom,
+        className: "!bg-gray-400 !w-2 !h-2"
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/viewer/nodes/start-step-node.tsx
+import { jsxDEV as jsxDEV9 } from "react/jsx-dev-runtime";
+function StartStepNode({ data, selected }) {
+  const { step, diagnostics, hasSourceEdge } = data;
+  if (step.type !== "start")
+    return null;
+  const schemaStr = JSON.stringify(step.params.inputSchema, null, 2);
+  return /* @__PURE__ */ jsxDEV9(BaseNode, {
+    id: step.id,
+    name: step.name,
+    typeLabel: "Start",
+    typeLabelColor: "text-green-500",
+    accent: "#22c55e",
+    description: step.description,
+    diagnostics,
+    selected,
+    hasSourceEdge,
+    children: [
+      /* @__PURE__ */ jsxDEV9("div", {
+        className: "text-xs text-gray-600",
+        children: /* @__PURE__ */ jsxDEV9("span", {
+          className: "text-gray-400",
+          children: "Input Schema:"
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV9("pre", {
+        className: "text-[11px] font-mono text-gray-600 truncate max-h-[60px] overflow-hidden",
+        children: schemaStr === "{}" ? "(no inputs)" : schemaStr
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/viewer/nodes/switch-case-node.tsx
+import { Handle as Handle6, Position as Position6 } from "@xyflow/react";
+import { jsxDEV as jsxDEV10 } from "react/jsx-dev-runtime";
+function renderExpr3(expr) {
+  if (expr.type === "literal")
+    return JSON.stringify(expr.value);
+  return expr.expression;
+}
+function SwitchCaseNode({ data, selected }) {
+  const { step, diagnostics, isGroup, groupWidth, groupHeight, hasSourceEdge } = 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 = "";
+    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__ */ jsxDEV10("div", {
+      className: `rounded-xl border-2 border-dashed border-amber-300 bg-amber-50/30 ${ringClass}`,
+      style: { width: groupWidth, height: groupHeight },
+      children: [
+        /* @__PURE__ */ jsxDEV10(Handle6, {
+          type: "target",
+          position: Position6.Top,
+          className: "!bg-amber-500 !w-2.5 !h-2.5"
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV10("div", {
+          className: "px-3 py-2 flex items-center gap-2",
+          children: [
+            /* @__PURE__ */ jsxDEV10("span", {
+              className: "text-[10px] font-semibold uppercase tracking-wide text-amber-500",
+              children: "Branch"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV10("span", {
+              className: "text-sm font-medium text-gray-800 truncate",
+              children: step.name
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        hasSourceEdge && /* @__PURE__ */ jsxDEV10(Handle6, {
+          type: "source",
+          position: Position6.Bottom,
+          className: "!bg-amber-500 !w-2.5 !h-2.5"
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV10(BaseNode, {
+    id: step.id,
+    name: step.name,
+    typeLabel: "Switch",
+    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-gray-400 shrink-0",
+            children: "on:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV10("span", {
+            className: "font-mono text-gray-600 truncate",
+            children: renderExpr3(step.params.switchOn)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV10("div", {
+        className: "mt-1.5 space-y-0.5",
+        children: step.params.cases.map((c) => /* @__PURE__ */ jsxDEV10("div", {
+          className: "flex items-center gap-1.5 text-[11px]",
+          children: [
+            /* @__PURE__ */ jsxDEV10("span", {
+              className: "font-mono text-gray-500",
+              children: c.value.type === "default" ? "default" : renderExpr3(c.value)
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV10("span", {
+              className: "text-gray-300",
+              children: "→"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV10("span", {
+              className: "font-mono text-gray-600",
+              children: c.branchBodyStepId
+            }, undefined, false, undefined, this)
+          ]
+        }, c.branchBodyStepId, true, undefined, this))
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/viewer/nodes/tool-call-node.tsx
+import { jsxDEV as jsxDEV11 } from "react/jsx-dev-runtime";
+function renderExpr4(expr) {
+  if (expr.type === "literal")
+    return JSON.stringify(expr.value);
+  return expr.expression;
+}
+function ToolCallNode({ data, selected }) {
+  const { step, diagnostics, hasSourceEdge } = data;
+  if (step.type !== "tool-call")
+    return null;
+  const entries = Object.entries(step.params.toolInput);
+  return /* @__PURE__ */ jsxDEV11(BaseNode, {
+    id: step.id,
+    name: step.name,
+    typeLabel: "Tool",
+    typeLabelColor: "text-blue-500",
+    accent: "#3b82f6",
+    description: step.description,
+    diagnostics,
+    selected,
+    hasSourceEdge,
+    children: [
+      /* @__PURE__ */ jsxDEV11("div", {
+        className: "text-xs font-mono text-gray-700 font-medium",
+        children: step.params.toolName
+      }, undefined, false, undefined, this),
+      entries.length > 0 && /* @__PURE__ */ jsxDEV11("div", {
+        className: "mt-1.5 space-y-0.5",
+        children: entries.map(([key, val]) => /* @__PURE__ */ jsxDEV11("div", {
+          className: "flex gap-1.5 text-[11px]",
+          children: [
+            /* @__PURE__ */ jsxDEV11("span", {
+              className: "text-gray-400 shrink-0",
+              children: [
+                key,
+                ":"
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV11("span", {
+              className: "font-mono text-gray-600 truncate",
+              children: renderExpr4(val)
+            }, undefined, false, undefined, this)
+          ]
+        }, key, true, undefined, this))
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/viewer/panels/step-detail-panel.tsx
+import { jsxDEV as jsxDEV12 } from "react/jsx-dev-runtime";
+function renderExpression2(expr) {
+  if (expr.type === "literal")
+    return JSON.stringify(expr.value);
+  return expr.expression;
+}
+function TypeBadge({ type }) {
+  const colors = {
+    "tool-call": "bg-blue-100 text-blue-700",
+    "llm-prompt": "bg-violet-100 text-violet-700",
+    "extract-data": "bg-purple-100 text-purple-700",
+    "switch-case": "bg-amber-100 text-amber-700",
+    "for-each": "bg-emerald-100 text-emerald-700",
+    start: "bg-green-100 text-green-700",
+    end: "bg-gray-100 text-gray-600"
+  };
+  return /* @__PURE__ */ jsxDEV12("span", {
+    className: `text-[11px] font-medium px-2 py-0.5 rounded-full ${colors[type] ?? "bg-gray-100 text-gray-600"}`,
+    children: type
+  }, undefined, false, undefined, this);
+}
+function StepParams({ step }) {
+  switch (step.type) {
+    case "tool-call":
+      return /* @__PURE__ */ jsxDEV12("div", {
+        className: "space-y-2",
+        children: [
+          /* @__PURE__ */ jsxDEV12("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV12(Label, {
+                children: "Tool"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV12(Code, {
+                children: step.params.toolName
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          Object.keys(step.params.toolInput).length > 0 && /* @__PURE__ */ jsxDEV12("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV12(Label, {
+                children: "Inputs"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV12("div", {
+                className: "space-y-1",
+                children: Object.entries(step.params.toolInput).map(([key, val]) => /* @__PURE__ */ jsxDEV12("div", {
+                  className: "flex gap-2 text-xs",
+                  children: [
+                    /* @__PURE__ */ jsxDEV12("span", {
+                      className: "font-mono text-gray-500",
+                      children: [
+                        key,
+                        ":"
+                      ]
+                    }, undefined, true, undefined, this),
+                    /* @__PURE__ */ jsxDEV12("span", {
+                      className: "font-mono text-gray-700",
+                      children: 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__ */ jsxDEV12("div", {
+        className: "space-y-2",
+        children: [
+          /* @__PURE__ */ jsxDEV12("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV12(Label, {
+                children: "Prompt"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV12("pre", {
+                className: "text-xs text-gray-700 bg-gray-50 rounded p-2 whitespace-pre-wrap font-mono",
+                children: step.params.prompt
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV12("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV12(Label, {
+                children: "Output Format"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV12(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__ */ jsxDEV12("div", {
+        className: "space-y-2",
+        children: [
+          /* @__PURE__ */ jsxDEV12("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV12(Label, {
+                children: "Source"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV12(Code, {
+                children: renderExpression2(step.params.sourceData)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV12("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV12(Label, {
+                children: "Output Format"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV12(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__ */ jsxDEV12("div", {
+        className: "space-y-2",
+        children: [
+          /* @__PURE__ */ jsxDEV12("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV12(Label, {
+                children: "Switch On"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV12(Code, {
+                children: renderExpression2(step.params.switchOn)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV12("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV12(Label, {
+                children: "Cases"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV12("div", {
+                className: "space-y-1",
+                children: step.params.cases.map((c) => /* @__PURE__ */ jsxDEV12("div", {
+                  className: "text-xs flex gap-2",
+                  children: [
+                    /* @__PURE__ */ jsxDEV12("span", {
+                      className: "font-mono text-gray-500",
+                      children: c.value.type === "default" ? "default" : renderExpression2(c.value)
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV12("span", {
+                      className: "text-gray-400",
+                      children: "→"
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV12("span", {
+                      className: "font-mono text-gray-700",
+                      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__ */ jsxDEV12("div", {
+        className: "space-y-2",
+        children: [
+          /* @__PURE__ */ jsxDEV12("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV12(Label, {
+                children: "Target"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV12(Code, {
+                children: renderExpression2(step.params.target)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV12("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV12(Label, {
+                children: "Item Variable"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV12(Code, {
+                children: step.params.itemName
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV12("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV12(Label, {
+                children: "Loop Body"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV12(Code, {
+                children: step.params.loopBodyStepId
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this);
+    case "start":
+      return /* @__PURE__ */ jsxDEV12("div", {
+        className: "space-y-2",
+        children: /* @__PURE__ */ jsxDEV12("div", {
+          children: [
+            /* @__PURE__ */ jsxDEV12(Label, {
+              children: "Input Schema"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV12(Code, {
+              children: JSON.stringify(step.params.inputSchema, null, 2)
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this);
+    case "end":
+      return null;
+  }
+}
+function Label({ children }) {
+  return /* @__PURE__ */ jsxDEV12("div", {
+    className: "text-[11px] font-medium text-gray-400 uppercase tracking-wide mb-0.5",
+    children
+  }, undefined, false, undefined, this);
+}
+function Code({ children }) {
+  return /* @__PURE__ */ jsxDEV12("pre", {
+    className: "text-xs text-gray-700 bg-gray-50 rounded p-2 whitespace-pre-wrap font-mono overflow-auto max-h-[200px]",
+    children
+  }, undefined, false, undefined, this);
+}
+function StepDetailPanel({
+  step,
+  diagnostics,
+  onClose
+}) {
+  return /* @__PURE__ */ jsxDEV12("div", {
+    className: "w-[340px] bg-white border-l border-gray-200 h-full overflow-y-auto shadow-lg",
+    children: [
+      /* @__PURE__ */ jsxDEV12("div", {
+        className: "sticky top-0 bg-white border-b border-gray-200 px-4 py-3 flex items-center justify-between",
+        children: [
+          /* @__PURE__ */ jsxDEV12("div", {
+            className: "flex items-center gap-2",
+            children: [
+              /* @__PURE__ */ jsxDEV12(TypeBadge, {
+                type: step.type
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV12("span", {
+                className: "font-medium text-sm text-gray-900 truncate",
+                children: step.name
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV12("button", {
+            type: "button",
+            onClick: onClose,
+            className: "text-gray-400 hover:text-gray-600 text-lg leading-none",
+            children: "×"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV12("div", {
+        className: "px-4 py-3 space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV12("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV12(Label, {
+                children: "Step ID"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV12("div", {
+                className: "text-xs font-mono text-gray-600",
+                children: step.id
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV12("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV12(Label, {
+                children: "Description"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV12("div", {
+                className: "text-xs text-gray-600",
+                children: step.description
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          step.nextStepId && /* @__PURE__ */ jsxDEV12("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV12(Label, {
+                children: "Next Step"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV12("div", {
+                className: "text-xs font-mono text-gray-600",
+                children: step.nextStepId
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV12("div", {
+            className: "border-t border-gray-100 pt-3",
+            children: [
+              /* @__PURE__ */ jsxDEV12(Label, {
+                children: "Parameters"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV12("div", {
+                className: "mt-1",
+                children: /* @__PURE__ */ jsxDEV12(StepParams, {
+                  step
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          diagnostics.length > 0 && /* @__PURE__ */ jsxDEV12("div", {
+            className: "border-t border-gray-100 pt-3",
+            children: [
+              /* @__PURE__ */ jsxDEV12(Label, {
+                children: "Diagnostics"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV12("div", {
+                className: "space-y-2 mt-1",
+                children: diagnostics.map((d) => /* @__PURE__ */ jsxDEV12("div", {
+                  className: `text-xs p-2 rounded ${d.severity === "error" ? "bg-red-50 text-red-700 border border-red-200" : "bg-amber-50 text-amber-700 border border-amber-200"}`,
+                  children: [
+                    /* @__PURE__ */ jsxDEV12("div", {
+                      className: "font-medium font-mono",
+                      children: d.code
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV12("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/viewer/workflow-viewer.tsx
+import { jsxDEV as jsxDEV13 } 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
+};
+var edgeTypes = {
+  workflow: WorkflowEdge
+};
+var EMPTY_DIAGNOSTICS = [];
+function WorkflowViewer({
+  workflow,
+  diagnostics = EMPTY_DIAGNOSTICS,
+  onStepSelect
+}) {
+  const layout = useMemo(() => buildLayout(workflow, diagnostics), [workflow, diagnostics]);
+  const [nodes, setNodes, onNodesChange] = useNodesState(layout.nodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(layout.edges);
+  const [selectedStep, setSelectedStep] = useState(null);
+  const [selectedDiagnostics, setSelectedDiagnostics] = useState(EMPTY_DIAGNOSTICS);
+  useEffect(() => {
+    setNodes(layout.nodes);
+    setEdges(layout.edges);
+    setSelectedStep(null);
+  }, [layout, setNodes, setEdges]);
+  const onNodeClick = useCallback((_, node) => {
+    const data = node.data;
+    if (!data.step)
+      return;
+    setSelectedStep(data.step);
+    setSelectedDiagnostics(data.diagnostics);
+    onStepSelect?.(data.step.id);
+  }, [onStepSelect]);
+  const onPaneClick = useCallback(() => {
+    setSelectedStep(null);
+    setSelectedDiagnostics([]);
+    onStepSelect?.(null);
+  }, [onStepSelect]);
+  return /* @__PURE__ */ jsxDEV13("div", {
+    className: "flex h-full w-full",
+    children: [
+      /* @__PURE__ */ jsxDEV13("div", {
+        className: "flex-1 relative",
+        children: /* @__PURE__ */ jsxDEV13(ReactFlow, {
+          nodes,
+          edges,
+          onNodesChange,
+          onEdgesChange,
+          onNodeClick,
+          onPaneClick,
+          nodeTypes,
+          edgeTypes,
+          fitView: true,
+          fitViewOptions: { padding: 0.2 },
+          nodesDraggable: false,
+          defaultEdgeOptions: {
+            type: "workflow"
+          },
+          proOptions: { hideAttribution: true },
+          children: [
+            /* @__PURE__ */ jsxDEV13(Background, {
+              color: "#e5e7eb",
+              gap: 16
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV13(Controls, {
+              showInteractive: false
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV13(MiniMap, {
+              nodeStrokeWidth: 2,
+              pannable: true,
+              zoomable: true,
+              style: { border: "1px solid #e5e7eb" },
+              nodeColor: "rgba(0, 0, 0, 0.1)"
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this),
+      selectedStep && /* @__PURE__ */ jsxDEV13(StepDetailPanel, {
+        step: selectedStep,
+        diagnostics: selectedDiagnostics,
+        onClose: () => {
+          setSelectedStep(null);
+          setSelectedDiagnostics([]);
+          onStepSelect?.(null);
+        }
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+export {
+  buildLayout,
+  WorkflowViewer
+};
+
+//# debugId=B74E025EA0D7FD5564756E2164756E21