@railtownai/railtracks-visualizer 0.0.3 → 0.0.4

package/dist/cjs/AgenticFlowVisualizer.js

@@ -0,0 +1,750 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const reactflow_1 = require("reactflow");
+const reactflow_2 = __importStar(require("reactflow"));
+require("reactflow/dist/style.css");
+const lucide_react_1 = require("lucide-react");
+const Edge_1 = require("./components/Edge");
+const Node_1 = require("./components/Node");
+const Timeline_1 = require("./components/Timeline");
+const VerticalTimeline_1 = require("./components/VerticalTimeline");
+// ============================================================================
+// UTILITY FUNCTIONS
+// ============================================================================
+/**
+ * Calculates a clean tree layout: parents centered above children, siblings spaced evenly, no overlap.
+ */
+const calculateAutoLayout = (nodes, edges) => {
+    // Build maps for fast lookup
+    const nodeMap = new Map(nodes.map((n) => [n.identifier, n]));
+    const childrenMap = new Map();
+    const parentMap = new Map();
+    nodes.forEach((n) => childrenMap.set(n.identifier, []));
+    // Handle edges if they exist
+    if (edges.length > 0) {
+        edges.forEach((e) => {
+            var _a;
+            if (e.source && e.target) {
+                (_a = childrenMap.get(e.source)) === null || _a === void 0 ? void 0 : _a.push(e.target);
+                parentMap.set(e.target, e.source);
+            }
+        });
+    }
+    else {
+        // If no edges, try to infer relationships from parent field
+        nodes.forEach((node) => {
+            var _a;
+            if (node.parent && node.parent.identifier !== node.identifier) {
+                (_a = childrenMap.get(node.parent.identifier)) === null || _a === void 0 ? void 0 : _a.push(node.identifier);
+                parentMap.set(node.identifier, node.parent.identifier);
+            }
+        });
+    }
+    // Find root nodes (no parent)
+    const roots = nodes.filter((n) => !parentMap.has(n.identifier));
+    // Assign levels (depths) - now vertical levels from top to bottom
+    const levelMap = new Map();
+    const assignLevels = (nodeId, level) => {
+        levelMap.set(nodeId, level);
+        for (const childId of childrenMap.get(nodeId) || []) {
+            assignLevels(childId, level + 1);
+        }
+    };
+    roots.forEach((root) => assignLevels(root.identifier, 0));
+    // Group nodes by level
+    const levels = [];
+    nodes.forEach((n) => {
+        var _a;
+        const lvl = (_a = levelMap.get(n.identifier)) !== null && _a !== void 0 ? _a : 0;
+        if (!levels[lvl])
+            levels[lvl] = [];
+        levels[lvl].push(n.identifier);
+    });
+    // Calculate subtree widths for each node (for centering horizontally)
+    const subtreeWidth = new Map();
+    const nodeWidth = 200; // Approximate node width
+    const nodeSpacing = 100; // Horizontal spacing between nodes
+    const calcSubtreeWidth = (nodeId) => {
+        const children = childrenMap.get(nodeId) || [];
+        if (children.length === 0) {
+            subtreeWidth.set(nodeId, nodeWidth);
+            return nodeWidth;
+        }
+        let width = 0;
+        for (const childId of children) {
+            width += calcSubtreeWidth(childId);
+        }
+        width += (children.length - 1) * nodeSpacing;
+        subtreeWidth.set(nodeId, width);
+        return width;
+    };
+    roots.forEach((root) => calcSubtreeWidth(root.identifier));
+    // Assign positions recursively - now top to bottom
+    const positions = new Map();
+    const levelSpacing = 300; // Increased vertical spacing between levels
+    const verticalMargin = 100; // Add margin to the top
+    const assignPositions = (nodeId, xLeft, level) => {
+        const width = subtreeWidth.get(nodeId) || nodeWidth;
+        const y = level * levelSpacing + verticalMargin; // Add margin here
+        const children = childrenMap.get(nodeId) || [];
+        if (children.length === 0) {
+            // Leaf node: center in its width
+            positions.set(nodeId, { x: xLeft + width / 2 - nodeWidth / 2, y });
+        }
+        else {
+            // Internal node: center above its children
+            let childX = xLeft;
+            for (const childId of children) {
+                const childWidth = subtreeWidth.get(childId) || nodeWidth;
+                assignPositions(childId, childX, level + 1);
+                childX += childWidth + nodeSpacing;
+            }
+            // Center parent above children
+            const firstChild = children[0];
+            const lastChild = children[children.length - 1];
+            const firstPos = positions.get(firstChild);
+            const lastPos = positions.get(lastChild);
+            const parentX = (firstPos.x + lastPos.x) / 2;
+            positions.set(nodeId, { x: parentX, y });
+        }
+    };
+    // Lay out each tree
+    let xCursor = 0;
+    for (const root of roots) {
+        assignPositions(root.identifier, xCursor, 0);
+        xCursor += (subtreeWidth.get(root.identifier) || nodeWidth) + nodeSpacing * 2;
+    }
+    return positions;
+};
+/**
+ * Extracts LLM details from node data for display
+ */
+const extractLLMDetails = (node) => {
+    var _a, _b;
+    let description = node.node_type;
+    let modelInfo = "";
+    if ((_b = (_a = node.details) === null || _a === void 0 ? void 0 : _a.internals) === null || _b === void 0 ? void 0 : _b.llm_details) {
+        const llmDetails = node.details.internals.llm_details;
+        if (llmDetails.length > 0) {
+            const lastLLM = llmDetails[llmDetails.length - 1];
+            modelInfo = `${lastLLM.model_name} (${lastLLM.model_provider})`;
+            description = `${node.node_type}\n${modelInfo}`;
+        }
+    }
+    return { description, modelInfo };
+};
+/**
+ * Truncates text to specified length with ellipsis
+ */
+const truncateText = (text, maxLength) => {
+    if (text.length <= maxLength)
+        return text;
+    return text.substring(0, maxLength) + "...";
+};
+const nodeTypes = {
+    agent: Node_1.Node
+};
+const edgeTypes = {
+    default: Edge_1.Edge
+};
+const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100%", height = "1000px", className = "" }) => {
+    var _a, _b, _c, _d;
+    // Use prop data directly, no hooks needed
+    const flowData = propFlowData;
+    // Show no data state if no flowData is available
+    if (!flowData) {
+        return ((0, jsx_runtime_1.jsx)("div", { style: {
+                width: typeof width === "number" ? `${width}px` : width,
+                height: typeof height === "number" ? `${height}px` : height,
+                border: "1px solid #e5e7eb",
+                borderRadius: "8px",
+                background: "#f9fafb",
+                position: "relative",
+                minWidth: "800px",
+                minHeight: "600px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center"
+            }, className: className, children: (0, jsx_runtime_1.jsxs)("div", { style: { textAlign: "center" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "16px", color: "#6b7280", marginBottom: "8px" }, children: "No flow data available" }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: "14px", color: "#9ca3af" }, children: "Please provide flowData prop" })] }) }));
+    }
+    const containerRef = (0, react_1.useRef)(null);
+    const svgRef = (0, react_1.useRef)(null);
+    const [containerDimensions, setContainerDimensions] = (0, react_1.useState)({
+        width: typeof width === "number" ? width : 800,
+        height: typeof height === "number" ? height : 600
+    });
+    // Timeline state
+    const [currentStep, setCurrentStep] = (0, react_1.useState)(0);
+    const [isPlaying, setIsPlaying] = (0, react_1.useState)(false);
+    const playIntervalRef = (0, react_1.useRef)(null);
+    // Timeline visibility state
+    const [showTimelines, setShowTimelines] = (0, react_1.useState)(false);
+    // Drawer state
+    const [isDrawerOpen, setIsDrawerOpen] = (0, react_1.useState)(false);
+    const [selectedData, setSelectedData] = (0, react_1.useState)(null);
+    // Get max step from stamps or steps
+    const maxStep = (0, react_1.useMemo)(() => {
+        const stamps = flowData.stamps || flowData.steps || [];
+        return stamps.length > 0 ? Math.max(...stamps.map((s) => s.step)) : 0;
+    }, [flowData.stamps, flowData.steps]);
+    // Auto-play functionality
+    (0, react_1.useEffect)(() => {
+        if (isPlaying) {
+            playIntervalRef.current = setInterval(() => {
+                setCurrentStep((prev) => {
+                    if (prev >= maxStep) {
+                        setIsPlaying(false);
+                        return prev;
+                    }
+                    return prev + 1;
+                });
+            }, 250); // 1 second per step
+        }
+        else {
+            if (playIntervalRef.current) {
+                clearInterval(playIntervalRef.current);
+                playIntervalRef.current = null;
+            }
+        }
+        return () => {
+            if (playIntervalRef.current) {
+                clearInterval(playIntervalRef.current);
+            }
+        };
+    }, [isPlaying, maxStep]);
+    // Initialize current step to last step and pan to hub node
+    (0, react_1.useEffect)(() => {
+        const stamps = flowData.stamps || flowData.steps || [];
+        if (stamps.length > 0) {
+            setCurrentStep(Math.max(...stamps.map((s) => s.step)));
+        }
+    }, [flowData.stamps, flowData.steps]);
+    // Update dimensions when width/height props change
+    (0, react_1.useEffect)(() => {
+        const updateDimensions = () => {
+            if (containerRef.current) {
+                const rect = containerRef.current.getBoundingClientRect();
+                setContainerDimensions({
+                    width: rect.width || (typeof width === "number" ? width : 800),
+                    height: rect.height || (typeof height === "number" ? height : 600)
+                });
+            }
+        };
+        updateDimensions();
+        // Use ResizeObserver if available, otherwise fallback to window resize
+        if (window.ResizeObserver && containerRef.current) {
+            const resizeObserver = new ResizeObserver(updateDimensions);
+            resizeObserver.observe(containerRef.current);
+            return () => resizeObserver.disconnect();
+        }
+        else {
+            window.addEventListener("resize", updateDimensions);
+            return () => window.removeEventListener("resize", updateDimensions);
+        }
+    }, [width, height]);
+    // Calculate auto-layout positions
+    const positions = (0, react_1.useMemo)(() => {
+        return calculateAutoLayout(flowData.nodes, flowData.edges || []);
+    }, [flowData.nodes, flowData.edges]);
+    // Get nodes and edges for current step
+    const getNodesForStep = (0, react_1.useCallback)((step) => {
+        return flowData.nodes.filter((node) => node.stamp.step <= step);
+    }, [flowData.nodes]);
+    const getEdgesForStep = (0, react_1.useCallback)((step) => {
+        return (flowData.edges || []).filter((edge) => edge.stamp.step <= step);
+    }, [flowData.edges]);
+    // Handle node inspection
+    const handleNodeInspect = (0, react_1.useCallback)((nodeData) => {
+        setSelectedData({ type: "node", data: nodeData });
+        setIsDrawerOpen(true);
+    }, []);
+    // Handle edge inspection
+    const handleEdgeInspect = (0, react_1.useCallback)((edgeData) => {
+        // Find the edge in the current edges to get the ID
+        const currentEdges = getEdgesForStep(currentStep);
+        const edge = currentEdges.find((e) => e.source === edgeData.source && e.target === edgeData.target);
+        const edgeWithId = Object.assign(Object.assign({}, edgeData), { id: (edge === null || edge === void 0 ? void 0 : edge.identifier) || "N/A" });
+        setSelectedData({ type: "edge", data: edgeWithId });
+        setIsDrawerOpen(true);
+    }, [getEdgesForStep, currentStep]);
+    // Convert flow data to ReactFlow format with step filtering
+    const nodes = (0, react_1.useMemo)(() => {
+        const stepNodes = getNodesForStep(currentStep);
+        const stepEdges = getEdgesForStep(currentStep);
+        return stepNodes.map((node) => {
+            var _a, _b;
+            const position = positions.get(node.identifier) || { x: 0, y: 0 };
+            const { description } = extractLLMDetails(node);
+            const isActive = node.stamp.step === currentStep;
+            return {
+                id: node.identifier,
+                type: "agent",
+                position,
+                data: {
+                    label: node.node_type,
+                    description,
+                    nodeType: node.node_type,
+                    step: (_a = node.stamp) === null || _a === void 0 ? void 0 : _a.step,
+                    time: (_b = node.stamp) === null || _b === void 0 ? void 0 : _b.time,
+                    isActive,
+                    onInspect: handleNodeInspect,
+                    id: node.identifier, // Add id for zoom functionality
+                    edges: stepEdges // Pass edges to the node
+                },
+                style: {
+                    filter: isActive ? "drop-shadow(0 4px 8px rgba(99, 102, 241, 0.3))" : "none"
+                }
+            };
+        });
+    }, [positions, currentStep, getNodesForStep, getEdgesForStep, handleNodeInspect]);
+    const edges = (0, react_1.useMemo)(() => {
+        const stepEdges = getEdgesForStep(currentStep);
+        return stepEdges
+            .filter((edge) => edge.source && edge.target)
+            .map((edge) => {
+            var _a, _b, _c, _d;
+            const isActive = edge.stamp.step === currentStep;
+            return {
+                id: edge.identifier,
+                type: "default",
+                source: edge.source,
+                target: edge.target,
+                animated: isActive,
+                bidirectional: true, // Enable bidirectional edges with arrow heads
+                style: {
+                    stroke: isActive ? "#6366f1" : "#9ca3af",
+                    strokeWidth: isActive ? 3 : 2
+                },
+                label: ((_a = edge.stamp) === null || _a === void 0 ? void 0 : _a.identifier) ? truncateText(String(edge.stamp.identifier), 50) : undefined,
+                data: {
+                    label: ((_b = edge.stamp) === null || _b === void 0 ? void 0 : _b.identifier) ? truncateText(String(edge.stamp.identifier), 50) : undefined,
+                    source: edge.source,
+                    target: edge.target,
+                    step: (_c = edge.stamp) === null || _c === void 0 ? void 0 : _c.step,
+                    time: (_d = edge.stamp) === null || _d === void 0 ? void 0 : _d.time,
+                    details: edge.details
+                }
+            };
+        });
+    }, [currentStep, getEdgesForStep]);
+    const [nodesState, setNodes, onNodesChange] = (0, reactflow_2.useNodesState)(nodes);
+    const [edgesState, setEdges, onEdgesChange] = (0, reactflow_2.useEdgesState)(edges);
+    // Update nodes and edges when currentStep changes
+    (0, react_1.useEffect)(() => {
+        setNodes(nodes);
+    }, [nodes, setNodes]);
+    (0, react_1.useEffect)(() => {
+        setEdges(edges);
+    }, [edges, setEdges]);
+    const onConnect = (0, react_1.useCallback)((params) => setEdges((eds) => (0, reactflow_2.addEdge)(params, eds)), [setEdges]);
+    const handleStepChange = (0, react_1.useCallback)((step) => {
+        setCurrentStep(step);
+        setIsPlaying(false);
+    }, []);
+    const handlePlayPause = (0, react_1.useCallback)(() => {
+        setIsPlaying((prev) => !prev);
+    }, []);
+    // Function to convert client (screen) coordinates to SVG coordinates
+    const clientToSvgCoords = (clientX, clientY) => {
+        var _a;
+        if (!svgRef.current)
+            return { x: 0, y: 0 };
+        const pt = svgRef.current.createSVGPoint();
+        pt.x = clientX;
+        pt.y = clientY;
+        const svgP = pt.matrixTransform((_a = svgRef.current.getScreenCTM()) === null || _a === void 0 ? void 0 : _a.inverse());
+        return { x: svgP.x, y: svgP.y };
+    };
+    const reactFlowInstance = (0, reactflow_1.useReactFlow)();
+    // Pan to hub node (most connected node) on initial load
+    (0, react_1.useEffect)(() => {
+        if (nodes.length > 0 && reactFlowInstance) {
+            // Find the node with the most connections
+            const nodeConnectionCounts = new Map();
+            // Count incoming and outgoing connections for each node
+            edges.forEach((edge) => {
+                // Count outgoing connections (source)
+                const sourceCount = nodeConnectionCounts.get(edge.source) || 0;
+                nodeConnectionCounts.set(edge.source, sourceCount + 1);
+                // Count incoming connections (target)
+                const targetCount = nodeConnectionCounts.get(edge.target) || 0;
+                nodeConnectionCounts.set(edge.target, targetCount + 1);
+            });
+            // Find the node with the highest connection count
+            let hubNodeId = "";
+            let maxConnections = 0;
+            nodeConnectionCounts.forEach((count, nodeId) => {
+                if (count > maxConnections) {
+                    maxConnections = count;
+                    hubNodeId = nodeId;
+                }
+            });
+            // If no hub node found (no edges), use the first node
+            if (!hubNodeId && nodes.length > 0) {
+                hubNodeId = nodes[0].id;
+            }
+            // Pan to the hub node
+            if (hubNodeId) {
+                setTimeout(() => {
+                    reactFlowInstance.fitView({
+                        nodes: [{ id: hubNodeId }],
+                        duration: 1000,
+                        padding: 0.2,
+                        minZoom: 0.2,
+                        maxZoom: 1.5
+                    });
+                }, 500); // Small delay to ensure nodes are rendered
+            }
+        }
+    }, [nodes, edges, reactFlowInstance]);
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, style: {
+            width: typeof width === "number" ? `${width}px` : width,
+            height: typeof height === "number" ? `${height}px` : height,
+            border: "1px solid #e5e7eb",
+            borderRadius: "8px",
+            overflow: "hidden",
+            position: "relative",
+            minWidth: "800px",
+            minHeight: "600px"
+        }, className: className, children: [(0, jsx_runtime_1.jsxs)("div", { className: `side-panel ${showTimelines ? "expanded" : "collapsed"}`, children: [!showTimelines && ((0, jsx_runtime_1.jsx)("button", { className: "panel-toggle", onClick: () => setShowTimelines(!showTimelines), title: "Expand Panel", children: (0, jsx_runtime_1.jsx)(lucide_react_1.PanelLeft, { size: 20 }) })), showTimelines && ((0, jsx_runtime_1.jsx)("div", { className: "panel-content", children: (0, jsx_runtime_1.jsx)(VerticalTimeline_1.VerticalTimeline, { stamps: flowData.stamps || flowData.steps || [], currentStep: currentStep, onStepChange: handleStepChange, onToggle: () => setShowTimelines(false) }) }))] }), (0, jsx_runtime_1.jsxs)(reactflow_2.default, { nodes: nodesState, edges: edgesState, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, onConnect: onConnect, nodeTypes: nodeTypes, edgeTypes: {
+                    default: (edgeProps) => ((0, jsx_runtime_1.jsx)(Edge_1.Edge, Object.assign({}, edgeProps, { clientToSvgCoords: clientToSvgCoords, svgRef: svgRef, onInspect: handleEdgeInspect })))
+                }, attributionPosition: "bottom-left", style: {
+                    width: showTimelines ? "calc(100% - 280px)" : "100%", // Account for side panel width when visible
+                    height: "calc(100% - 60px)", // Account for timeline height
+                    marginLeft: showTimelines ? "280px" : "0" // Push content to the right of side panel when visible
+                }, defaultViewport: { x: 0, y: 0, zoom: 1 }, onInit: (instance) => {
+                    if (containerRef.current) {
+                        const svg = containerRef.current.querySelector("svg");
+                        if (svg)
+                            svgRef.current = svg;
+                    }
+                }, children: [(0, jsx_runtime_1.jsx)(reactflow_2.Controls, {}), (0, jsx_runtime_1.jsx)(reactflow_2.Background, { color: "#f3f4f6", gap: 16 })] }), (0, jsx_runtime_1.jsxs)("div", { className: `right-drawer ${isDrawerOpen ? "open" : ""}`, children: [(0, jsx_runtime_1.jsx)("div", { className: "drawer-toggle", onClick: () => setIsDrawerOpen(!isDrawerOpen), children: (0, jsx_runtime_1.jsx)(lucide_react_1.PanelRight, { size: 20 }) }), isDrawerOpen && selectedData && ((0, jsx_runtime_1.jsxs)("div", { className: "drawer-content", children: [(0, jsx_runtime_1.jsx)("div", { className: "drawer-header", children: (0, jsx_runtime_1.jsx)("h3", { children: selectedData.type === "node" ? "Node Details" : "Edge Details" }) }), (0, jsx_runtime_1.jsx)("div", { className: "drawer-body", children: selectedData.type === "node" ? (
+                                // Node Details
+                                (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "detail-row", children: [(0, jsx_runtime_1.jsx)("span", { className: "detail-label", children: "Label:" }), (0, jsx_runtime_1.jsx)("span", { className: "detail-value", children: selectedData.data.label || "N/A" })] }), selectedData.data.description && ((0, jsx_runtime_1.jsxs)("div", { className: "detail-row", children: [(0, jsx_runtime_1.jsx)("span", { className: "detail-label", children: "Description:" }), (0, jsx_runtime_1.jsx)("span", { className: "detail-value", children: selectedData.data.description })] })), selectedData.data.nodeType && ((0, jsx_runtime_1.jsxs)("div", { className: "detail-row", children: [(0, jsx_runtime_1.jsx)("span", { className: "detail-label", children: "Type:" }), (0, jsx_runtime_1.jsx)("span", { className: "detail-value", children: selectedData.data.nodeType })] })), selectedData.data.step && ((0, jsx_runtime_1.jsxs)("div", { className: "detail-row", children: [(0, jsx_runtime_1.jsx)("span", { className: "detail-label", children: "Step:" }), (0, jsx_runtime_1.jsx)("span", { className: "detail-value", children: selectedData.data.step })] })), selectedData.data.time && ((0, jsx_runtime_1.jsxs)("div", { className: "detail-row", children: [(0, jsx_runtime_1.jsx)("span", { className: "detail-label", children: "Time:" }), (0, jsx_runtime_1.jsx)("span", { className: "detail-value", children: new Date(selectedData.data.time * 1000).toLocaleString() })] })), selectedData.data.icon && ((0, jsx_runtime_1.jsxs)("div", { className: "detail-row", children: [(0, jsx_runtime_1.jsx)("span", { className: "detail-label", children: "Icon:" }), (0, jsx_runtime_1.jsx)("span", { className: "detail-value", children: selectedData.data.icon })] }))] })) : (
+                                // Edge Details
+                                (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "detail-row", children: [(0, jsx_runtime_1.jsx)("span", { className: "detail-label", children: "ID:" }), (0, jsx_runtime_1.jsx)("span", { className: "detail-value", children: selectedData.data.id || "N/A" })] }), selectedData.data.source && ((0, jsx_runtime_1.jsxs)("div", { className: "detail-row", children: [(0, jsx_runtime_1.jsx)("span", { className: "detail-label", children: "Source:" }), (0, jsx_runtime_1.jsx)("span", { className: "detail-value", children: selectedData.data.source })] })), selectedData.data.target && ((0, jsx_runtime_1.jsxs)("div", { className: "detail-row", children: [(0, jsx_runtime_1.jsx)("span", { className: "detail-label", children: "Target:" }), (0, jsx_runtime_1.jsx)("span", { className: "detail-value", children: selectedData.data.target })] })), selectedData.data.label && ((0, jsx_runtime_1.jsxs)("div", { className: "detail-row", children: [(0, jsx_runtime_1.jsx)("span", { className: "detail-label", children: "Label:" }), (0, jsx_runtime_1.jsx)("span", { className: "detail-value", children: selectedData.data.label })] })), selectedData.data.step && ((0, jsx_runtime_1.jsxs)("div", { className: "detail-row", children: [(0, jsx_runtime_1.jsx)("span", { className: "detail-label", children: "Step:" }), (0, jsx_runtime_1.jsx)("span", { className: "detail-value", children: selectedData.data.step })] })), selectedData.data.time && ((0, jsx_runtime_1.jsxs)("div", { className: "detail-row", children: [(0, jsx_runtime_1.jsx)("span", { className: "detail-label", children: "Time:" }), (0, jsx_runtime_1.jsx)("span", { className: "detail-value", children: new Date(selectedData.data.time * 1000).toLocaleString() })] })), ((_b = (_a = selectedData.data) === null || _a === void 0 ? void 0 : _a.details) === null || _b === void 0 ? void 0 : _b.input_args) &&
+                                            Array.isArray(selectedData.data.details.input_args) &&
+                                            selectedData.data.details.input_args.length > 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "detail-row", children: [(0, jsx_runtime_1.jsx)("span", { className: "detail-label", children: "Inputs" }), (0, jsx_runtime_1.jsx)("span", { className: "detail-value", style: { overflowY: "auto", maxHeight: "300px" }, children: Array.isArray(selectedData.data.details.input_args[0]) ? (selectedData.data.details.input_args[0].map((arg, index) => ((0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: 8 }, children: [(0, jsx_runtime_1.jsx)("span", { className: "detail-label", children: "Role:" }), (0, jsx_runtime_1.jsx)("span", { className: "detail-value", children: (arg === null || arg === void 0 ? void 0 : arg.role) || "Unknown" }), (0, jsx_runtime_1.jsx)("span", { className: "detail-label", children: "Content:" }), (0, jsx_runtime_1.jsx)("span", { className: "detail-value", children: (arg === null || arg === void 0 ? void 0 : arg.content) || "No content" })] }, (arg === null || arg === void 0 ? void 0 : arg.role) || index)))) : ((0, jsx_runtime_1.jsx)("span", { className: "detail-value", children: JSON.stringify(selectedData.data.details.input_args[0], null, 2) })) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "detail-row", children: [(0, jsx_runtime_1.jsx)("span", { className: "detail-label", children: "Outputs" }), (0, jsx_runtime_1.jsx)("span", { className: "detail-value", children: JSON.stringify((_d = (_c = selectedData.data) === null || _c === void 0 ? void 0 : _c.details) === null || _d === void 0 ? void 0 : _d.output, null, 2) })] })] }))] })) })] }))] }), showTimelines && ((0, jsx_runtime_1.jsx)("div", { style: { marginLeft: "280px", marginTop: "100px" }, children: (0, jsx_runtime_1.jsx)(Timeline_1.Timeline, { stamps: flowData.stamps || flowData.steps || [], currentStep: currentStep, isPlaying: isPlaying, onStepChange: handleStepChange, onPlayPause: handlePlayPause }) })), (0, jsx_runtime_1.jsx)("style", { children: `
+          .react-flow__edge-label {
+            font-size: 10px;
+            background: white;
+            padding: 2px 4px;
+            border-radius: 4px;
+            border: 1px solid #e5e7eb;
+            max-width: 150px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          /* Right Drawer Styles */
+          .right-drawer {
+            position: absolute;
+            top: 0;
+            right: 0;
+            height: 100%;
+            z-index: 1000;
+            display: flex;
+            align-items: flex-start;
+            transition: transform 0.3s ease;
+            margin-left: ${showTimelines ? "280px" : "0"}; /* Account for vertical timeline when visible */
+          }
+
+          .right-drawer:not(.open) {
+            transform: translateX(calc(100% - 50px));
+          }
+
+          .right-drawer.open {
+            transform: translateX(0);
+          }
+
+          .drawer-toggle {
+            width: 50px;
+            height: 50px;
+            background: none;
+            color: #6b7280;
+            border: none;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: color 0.2s ease;
+            margin-top: 20px;
+          }
+
+          .drawer-toggle:hover {
+            color: #374151;
+          }
+
+          .drawer-content {
+            background: white;
+            border: 1px solid #e5e7eb;
+            border-radius: 8px 0 0 8px;
+            width: 400px;
+            height: calc(100% - 40px);
+            margin-top: 20px;
+            display: flex;
+            flex-direction: column;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            animation: drawerSlideIn 0.3s ease-out;
+          }
+
+          .drawer-header {
+            padding: 16px 20px;
+            border-bottom: 1px solid #e5e7eb;
+            background: #f9fafb;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            flex-shrink: 0;
+          }
+
+          .drawer-header h3 {
+            margin: 0;
+            font-size: 16px;
+            font-weight: 600;
+            color: #1f2937;
+          }
+
+          .close-button {
+            background: none;
+            border: none;
+            font-size: 20px;
+            color: #6b7280;
+            cursor: pointer;
+            padding: 4px;
+            width: 28px;
+            height: 28px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 6px;
+            transition: all 0.2s ease;
+          }
+
+          .close-button:hover {
+            background: #e5e7eb;
+            color: #1f2937;
+          }
+
+          .drawer-body {
+            padding: 20px;
+            overflow-y: auto;
+            flex: 1;
+            width: 100%;
+            box-sizing: border-box;
+          }
+
+          .detail-row {
+            display: grid;
+            grid-template-columns: 100px 1fr;
+            margin-bottom: 12px;
+            align-items: flex-start;
+            gap: 8px;
+          }
+
+          .detail-row:last-child {
+            margin-bottom: 0;
+          }
+
+          .detail-label {
+            font-weight: 600;
+            color: #6b7280;
+            font-size: 13px;
+            word-break: break-word;
+          }
+
+          .detail-value {
+            color: #1f2937;
+            font-size: 13px;
+            word-break: break-word;
+            flex: 1;
+            width: 100%;
+            overflow: visible;
+            text-overflow: unset;
+            max-width: unset;
+            white-space: pre-line;
+            line-height: 1.4;
+          }
+
+          @keyframes drawerSlideIn {
+            from {
+              opacity: 0;
+              transform: translateX(20px);
+            }
+            to {
+              opacity: 1;
+              transform: translateX(0);
+            }
+          }
+
+          /* Scoreboard Styles */
+          .scoreboard {
+            position: absolute;
+            top: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: white;
+            border: 1px solid #e5e7eb;
+            border-radius: 8px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            z-index: 1000;
+            min-width: 400px;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+          }
+
+          .scoreboard-header {
+            padding: 12px 16px;
+            border-bottom: 1px solid #e5e7eb;
+            background: #f9fafb;
+            text-align: center;
+          }
+
+          .scoreboard-header h3 {
+            margin: 0;
+            font-size: 14px;
+            font-weight: 600;
+            color: #1f2937;
+          }
+
+          .scoreboard-content {
+            padding: 16px;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            gap: 20px;
+          }
+
+          .scoreboard-item {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 4px;
+          }
+
+          .scoreboard-label {
+            font-size: 12px;
+            color: #6b7280;
+            font-weight: 500;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+          }
+
+          .scoreboard-count {
+            font-size: 18px;
+            font-weight: 700;
+            padding: 6px 12px;
+            border-radius: 6px;
+            min-width: 40px;
+            text-align: center;
+          }
+
+          .scoreboard-count.open {
+            background: #fef3c7;
+            color: #92400e;
+          }
+
+          .scoreboard-count.completed {
+            background: #d1fae5;
+            color: #065f46;
+          }
+
+          .scoreboard-count.error {
+            background: #fee2e2;
+            color: #991b1b;
+          }
+
+          .scoreboard-count.error.clickable {
+            transition: all 0.2s ease;
+          }
+
+          .scoreboard-count.error.clickable:hover {
+            background: #fecaca;
+            transform: scale(1.05);
+            box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
+          }
+
+          /* Side Panel Styles */
+          .side-panel {
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: 100%;
+            z-index: 1000;
+            display: flex;
+            flex-direction: column;
+            transition: all 0.3s ease;
+          }
+
+          .side-panel.collapsed {
+            width: 60px;
+          }
+
+          .side-panel.expanded {
+            width: 280px;
+          }
+
+          .panel-toggle {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: none;
+            background: none;
+            cursor: pointer;
+            color: #6b7280;
+            transition: color 0.2s ease;
+            padding: 8px;
+            margin: 20px 0 0 0;
+          }
+
+          .panel-toggle:hover {
+            color: #374151;
+          }
+
+          .panel-content {
+            flex: 1;
+            background: white;
+            border-right: 1px solid #e5e7eb;
+            box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
+            overflow: hidden;
+          }
+
+
+        ` })] }));
+};
+exports.default = AgenticFlowVisualizer;