@railtownai/railtracks-visualizer 0.0.2 → 0.0.4

package/dist/cjs/App.js

@@ -0,0 +1,94 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const reactflow_1 = require("reactflow");
+const hooks_1 = require("./hooks");
+const FileSelector_1 = require("./components/FileSelector");
+const AgenticFlowVisualizer_1 = __importDefault(require("./AgenticFlowVisualizer"));
+const App = () => {
+    const { availableFiles, currentFile, flowData, loading, error, loadFile, refreshFiles } = (0, hooks_1.useFlowData)();
+    const handleFileSelect = (filename) => {
+        loadFile(filename);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "app", children: [(0, jsx_runtime_1.jsxs)("div", { className: "app-header", children: [(0, jsx_runtime_1.jsx)("h1", { children: "RailTracks Visualizer" }), (0, jsx_runtime_1.jsx)("div", { className: "file-selector-container", children: (0, jsx_runtime_1.jsx)(FileSelector_1.FileSelector, { files: availableFiles, currentFile: currentFile, onFileSelect: handleFileSelect, onRefresh: refreshFiles, loading: loading, disabled: loading }) })] }), error && ((0, jsx_runtime_1.jsx)("div", { className: "error-message", children: (0, jsx_runtime_1.jsxs)("p", { children: ["Error: ", error] }) })), (0, jsx_runtime_1.jsx)("div", { className: "visualizer-container", children: loading ? ((0, jsx_runtime_1.jsxs)("div", { className: "loading-state", children: [(0, jsx_runtime_1.jsx)("div", { className: "loading-spinner" }), (0, jsx_runtime_1.jsx)("p", { children: "Loading flow data..." })] })) : flowData ? ((0, jsx_runtime_1.jsx)(reactflow_1.ReactFlowProvider, { children: (0, jsx_runtime_1.jsx)(AgenticFlowVisualizer_1.default, { flowData: flowData }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "no-data-state", children: (0, jsx_runtime_1.jsx)("p", { children: "Please select a file to visualize the flow data" }) })) }), (0, jsx_runtime_1.jsx)("style", { children: `
+        .app {
+          min-height: 100vh;
+          background: #f9fafb;
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        }
+
+        .app-header {
+          background: white;
+          border-bottom: 1px solid #e5e7eb;
+          padding: 5px;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+        }
+
+        .app-header h1 {
+          margin: 0;
+          font-size: 18px;
+          font-weight: 600;
+          color: #1f2937;
+        }
+
+        .file-selector-container {
+          display: flex;
+          align-items: center;
+        }
+
+        .error-message {
+          background: #fee2e2;
+          border: 1px solid #fecaca;
+          color: #991b1b;
+          padding: 12px 20px;
+          margin: 20px;
+          border-radius: 6px;
+          font-size: 14px;
+        }
+
+        .visualizer-container {
+          padding: 20px;
+          min-height: calc(100vh - 100px);
+        }
+
+        .loading-state {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          height: 400px;
+          color: #6b7280;
+        }
+
+        .loading-spinner {
+          width: 40px;
+          height: 40px;
+          border: 4px solid #e5e7eb;
+          border-top: 4px solid #6366f1;
+          border-radius: 50%;
+          animation: spin 1s linear infinite;
+          margin-bottom: 16px;
+        }
+
+        @keyframes spin {
+          0% { transform: rotate(0deg); }
+          100% { transform: rotate(360deg); }
+        }
+
+        .no-data-state {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          height: 400px;
+          color: #6b7280;
+          font-size: 16px;
+        }
+      ` })] }));
+};
+exports.default = App;

package/dist/cjs/Visualizer.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const reactflow_1 = require("reactflow");
+const AgenticFlowVisualizer_1 = __importDefault(require("./AgenticFlowVisualizer"));
+/**
+ * Visualizer component that wraps AgenticFlowVisualizer with ReactFlowProvider.
+ * This is the main component that should be imported from the npm package.
+ */
+const Visualizer = (props) => {
+    return ((0, jsx_runtime_1.jsx)(reactflow_1.ReactFlowProvider, { children: (0, jsx_runtime_1.jsx)(AgenticFlowVisualizer_1.default, Object.assign({}, props)) }));
+};
+exports.default = Visualizer;

package/dist/cjs/components/Edge.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Edge = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Edge = ({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, style = {}, markerEnd, bidirectional = false, data, clientToSvgCoords, svgRef, onInspect }) => {
+    var _a;
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    // Function to determine stroke color based on edge state
+    const getStrokeColor = () => {
+        var _a;
+        const state = (_a = data === null || data === void 0 ? void 0 : data.details) === null || _a === void 0 ? void 0 : _a.state;
+        switch (state) {
+            case "Open":
+                return "#000000"; // Black
+            case "Completed":
+                return "#15803d"; // Darker Green
+            case "Error":
+                return "#ef4444"; // Red
+            default:
+                return style.stroke || "#6366f1"; // Default color
+        }
+    };
+    const [edgePath, arrowMarkers] = (0, react_1.useMemo)(() => {
+        // Always use curved paths for better visual appeal
+        const centerX = (sourceX + targetX) / 2;
+        const centerY = (sourceY + targetY) / 2;
+        const path = `M ${sourceX} ${sourceY} Q ${centerX} ${centerY} ${targetX} ${targetY}`;
+        // Create arrow markers for bidirectional edges
+        const markers = [];
+        if (bidirectional) {
+            const strokeColor = getStrokeColor();
+            // Forward arrow (source to target)
+            markers.push((0, jsx_runtime_1.jsxs)("defs", { children: [(0, jsx_runtime_1.jsx)("marker", { id: `${id}-arrowhead-forward`, markerWidth: "10", markerHeight: "7", refX: "9", refY: "3.5", orient: "auto", markerUnits: "strokeWidth", children: (0, jsx_runtime_1.jsx)("polygon", { points: "0 0, 10 3.5, 0 7", fill: strokeColor }) }), (0, jsx_runtime_1.jsx)("marker", { id: `${id}-arrowhead-backward`, markerWidth: "10", markerHeight: "7", refX: "1", refY: "3.5", orient: "auto", markerUnits: "strokeWidth", children: (0, jsx_runtime_1.jsx)("polygon", { points: "10 0, 0 3.5, 10 7", fill: strokeColor }) })] }, `${id}-markers`));
+        }
+        return [path, markers];
+    }, [sourceX, sourceY, targetX, targetY, id, bidirectional, (_a = data === null || data === void 0 ? void 0 : data.details) === null || _a === void 0 ? void 0 : _a.state]);
+    const hoverStyle = Object.assign(Object.assign({}, style), { stroke: getStrokeColor(), strokeWidth: style.strokeWidth || 4, cursor: "pointer" });
+    const handleInspectClick = (event) => {
+        event.stopPropagation();
+        if (onInspect && data) {
+            onInspect(data);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("g", { "data-edge-id": id, children: [arrowMarkers, (0, jsx_runtime_1.jsx)("path", { id: id, className: "react-flow__edge-path", d: edgePath, markerEnd: bidirectional ? `url(#${id}-arrowhead-forward)` : markerEnd, markerStart: bidirectional ? `url(#${id}-arrowhead-backward)` : undefined, style: hoverStyle }), (data === null || data === void 0 ? void 0 : data.label) && ((0, jsx_runtime_1.jsx)("foreignObject", { x: (sourceX + targetX) / 2 - 50, y: (sourceY + targetY) / 2 - 20, width: "100", height: "40", style: { overflow: "visible", pointerEvents: "none" }, children: (0, jsx_runtime_1.jsx)("div", { className: "edge-label-renderer", style: {
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        width: "100%",
+                        height: "100%",
+                        pointerEvents: "auto"
+                    }, children: (0, jsx_runtime_1.jsx)("button", { className: "edge-label-button", onClick: handleInspectClick, style: {
+                            background: "#6366f1",
+                            color: "white",
+                            border: "none",
+                            borderRadius: 6,
+                            padding: "4px 12px",
+                            fontSize: 12,
+                            fontWeight: 600,
+                            cursor: "pointer",
+                            boxShadow: "0 2px 8px rgba(99,102,241,0.10)",
+                            transition: "background 0.2s"
+                        }, children: "Inspect" }) }) })), (0, jsx_runtime_1.jsx)("style", { children: `
+          .edge-label-renderer {
+            z-index: 8001;
+            user-select: none;
+            pointer-events: auto;
+          }
+
+          .edge-label-button {
+            pointer-events: auto;
+          }
+        ` })] }));
+};
+exports.Edge = Edge;

package/dist/cjs/components/FileSelector.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileSelector = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const FileSelector = ({ files, currentFile, onFileSelect, onRefresh, loading = false, disabled = false }) => {
+    const handleRefresh = (e) => {
+        e.stopPropagation();
+        onRefresh();
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [(0, jsx_runtime_1.jsxs)("select", { value: currentFile || "", onChange: (e) => onFileSelect(e.target.value), disabled: disabled, style: {
+                    cursor: "pointer",
+                    padding: "8px 16px 8px 16px",
+                    borderRadius: "4px",
+                    fontSize: "14px",
+                    border: "1px solid #ccc",
+                    appearance: "none",
+                    WebkitAppearance: "none",
+                    MozAppearance: "none"
+                }, children: [(0, jsx_runtime_1.jsx)("option", { value: "", children: "Select a RailTracks Run..." }), files.map((file) => ((0, jsx_runtime_1.jsx)("option", { value: file.name, children: file.name }, file.name)))] }), (0, jsx_runtime_1.jsx)("button", { onClick: handleRefresh, disabled: loading || disabled, title: "Refresh files", style: {
+                    background: "none",
+                    border: "none",
+                    cursor: "pointer",
+                    padding: "4px",
+                    borderRadius: "4px"
+                }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCw, { size: 16, style: { animation: loading ? "spin 1s linear infinite" : "none" } }) })] }));
+};
+exports.FileSelector = FileSelector;

package/dist/cjs/components/Node.js

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Node = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const reactflow_1 = require("reactflow");
+const Node = ({ data, id }) => {
+    var _a;
+    const { fitView } = (0, reactflow_1.useReactFlow)();
+    // Check if this node has any outgoing edges (source edges)
+    const hasOutgoingEdges = ((_a = data.edges) === null || _a === void 0 ? void 0 : _a.some((edge) => edge.source === id)) || false;
+    const handleNodeClick = () => {
+        // Zoom to the node
+        fitView({
+            nodes: [{ id }],
+            duration: 800,
+            padding: 0.1,
+            minZoom: 0.5,
+            maxZoom: 1.5
+        });
+        // Open inspection drawer
+        if (data.onInspect) {
+            data.onInspect({
+                label: data.label,
+                description: data.description,
+                nodeType: data.nodeType,
+                step: data.step,
+                time: data.time,
+                icon: data.icon
+            });
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "agent-node", onClick: handleNodeClick, style: { cursor: "pointer" }, children: [(0, jsx_runtime_1.jsx)(reactflow_1.Handle, { type: "target", position: reactflow_1.Position.Top, style: { background: "#6366f1" } }), (0, jsx_runtime_1.jsxs)("div", { className: "agent-header", children: [(0, jsx_runtime_1.jsx)("div", { className: "agent-icon", children: data.icon || "📋" }), (0, jsx_runtime_1.jsx)("div", { className: "agent-label", children: data.label })] }), data.description && (0, jsx_runtime_1.jsx)("div", { className: "agent-description", children: data.description }), data.step && ((0, jsx_runtime_1.jsxs)("div", { className: "agent-meta", children: [(0, jsx_runtime_1.jsxs)("span", { className: "step", children: ["Step: ", data.step] }), data.time && (0, jsx_runtime_1.jsx)("span", { className: "time", children: new Date(data.time * 1000).toLocaleTimeString() })] })), hasOutgoingEdges && (0, jsx_runtime_1.jsx)(reactflow_1.Handle, { type: "source", position: reactflow_1.Position.Bottom, style: { background: "#6366f1" } })] }), (0, jsx_runtime_1.jsx)("style", { children: `
+          .agent-node {
+            padding: 12px;
+            border-radius: 8px;
+            background: white;
+            border: 2px solid #e5e7eb;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            min-width: 200px;
+            max-width: 250px;
+            transition: all 0.2s ease;
+            position: relative;
+            z-index: -5;
+          }
+          
+          .agent-node:hover {
+            border-color: #6366f1;
+            box-shadow: 0 4px 8px rgba(99, 102, 241, 0.2);
+          }
+          
+          .agent-header {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin-bottom: 8px;
+          }
+          
+          .agent-icon {
+            font-size: 20px;
+          }
+          
+          .agent-label {
+            font-weight: 600;
+            color: #1f2937;
+            font-size: 14px;
+            word-break: break-word;
+          }
+          
+          .agent-description {
+            color: #6b7280;
+            font-size: 12px;
+            line-height: 1.4;
+            word-break: break-word;
+            white-space: pre-line;
+          }
+          
+          .agent-meta {
+            margin-top: 8px;
+            padding-top: 8px;
+            border-top: 1px solid #e5e7eb;
+            display: flex;
+            justify-content: space-between;
+            font-size: 10px;
+            color: #9ca3af;
+          }
+          
+          .step {
+            background: #f3f4f6;
+            padding: 2px 6px;
+            border-radius: 4px;
+          }
+          
+          .time {
+            font-family: monospace;
+          }
+          
+          .react-flow__handle {
+            width: 8px;
+            height: 8px;
+            border: 2px solid #6366f1;
+          }
+        ` })] }));
+};
+exports.Node = Node;

package/dist/cjs/components/Timeline.js

@@ -0,0 +1,122 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Timeline = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Timeline = ({ stamps, currentStep, isPlaying, onStepChange, onPlayPause }) => {
+    const maxStep = stamps.length > 0 ? Math.max(...stamps.map((s) => s.step)) : 0;
+    const minStep = stamps.length > 0 ? Math.min(...stamps.map((s) => s.step)) : 0;
+    const totalSteps = maxStep - minStep + 1;
+    // Initialize Bootstrap tooltips
+    (0, react_1.useEffect)(() => {
+        // Initialize all tooltips
+        const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
+        const tooltipList = Array.from(tooltipTriggerList).map((tooltipTriggerEl) => new window.bootstrap.Tooltip(tooltipTriggerEl));
+        // Cleanup function to dispose tooltips
+        return () => {
+            tooltipList.forEach((tooltip) => tooltip.dispose());
+        };
+    }, [stamps, currentStep]); // Re-initialize when stamps or currentStep changes
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            position: "absolute",
+            bottom: 0,
+            left: 0,
+            right: 0,
+            height: "60px",
+            backgroundColor: "white",
+            borderTop: "1px solid #e5e7eb",
+            display: "flex",
+            alignItems: "center",
+            padding: "0 16px",
+            gap: "12px",
+            zIndex: 10
+        }, children: [(0, jsx_runtime_1.jsx)("button", { onClick: onPlayPause, style: {
+                    width: "32px",
+                    height: "32px",
+                    borderRadius: "50%",
+                    border: "1px solid #d1d5db",
+                    backgroundColor: "white",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    cursor: "pointer",
+                    transition: "all 0.2s ease"
+                }, onMouseEnter: (e) => {
+                    e.currentTarget.style.backgroundColor = "#f3f4f6";
+                }, onMouseLeave: (e) => {
+                    e.currentTarget.style.backgroundColor = "white";
+                }, children: isPlaying ? ((0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", gap: "2px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                width: "3px",
+                                height: "12px",
+                                backgroundColor: "#374151"
+                            } }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                width: "3px",
+                                height: "12px",
+                                backgroundColor: "#374151"
+                            } })] })) : ((0, jsx_runtime_1.jsx)("div", { style: {
+                        width: 0,
+                        height: 0,
+                        borderLeft: "8px solid #374151",
+                        borderTop: "6px solid transparent",
+                        borderBottom: "6px solid transparent",
+                        marginLeft: "2px"
+                    } })) }), (0, jsx_runtime_1.jsx)("div", { style: {
+                    flex: 1,
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "8px",
+                    padding: "0 8px"
+                }, children: Array.from({ length: totalSteps }, (_, index) => {
+                    var _a;
+                    const step = minStep + index;
+                    const isActive = step === currentStep;
+                    const isPast = step < currentStep;
+                    const hasStep = stamps.some((s) => s.step === step);
+                    // Determine background color based on step state
+                    let backgroundColor = "white";
+                    if (isActive) {
+                        backgroundColor = "#6366f1";
+                    }
+                    else if (isPast) {
+                        backgroundColor = hasStep ? "#fef3c7" : "#fef3c7"; // Light yellow for past steps
+                    }
+                    else if (hasStep) {
+                        backgroundColor = "#e5e7eb";
+                    }
+                    const tooltipText = `Step ${step}${hasStep ? ` - ${((_a = stamps.find((s) => s.step === step)) === null || _a === void 0 ? void 0 : _a.identifier) || ""}` : " - No activity"}`;
+                    return ((0, jsx_runtime_1.jsx)("button", { onClick: () => onStepChange(step), "data-bs-toggle": "tooltip", "data-bs-placement": "top", "data-bs-title": tooltipText, style: {
+                            width: "16px",
+                            height: "16px",
+                            borderRadius: "50%",
+                            border: isActive ? "2px solid #6366f1" : "1px solid #d1d5db",
+                            backgroundColor: backgroundColor,
+                            cursor: "pointer",
+                            transition: "all 0.2s ease",
+                            position: "relative"
+                        }, onMouseEnter: (e) => {
+                            if (!isActive) {
+                                if (isPast) {
+                                    e.currentTarget.style.backgroundColor = hasStep ? "#fde68a" : "#fde68a"; // Darker yellow on hover for past steps
+                                }
+                                else {
+                                    e.currentTarget.style.backgroundColor = hasStep ? "#d1d5db" : "#f3f4f6";
+                                }
+                            }
+                        }, onMouseLeave: (e) => {
+                            if (!isActive) {
+                                if (isPast) {
+                                    e.currentTarget.style.backgroundColor = hasStep ? "#fef3c7" : "#fef3c7"; // Back to light yellow for past steps
+                                }
+                                else {
+                                    e.currentTarget.style.backgroundColor = hasStep ? "#e5e7eb" : "white";
+                                }
+                            }
+                        } }, step));
+                }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                    fontSize: "12px",
+                    color: "#6b7280",
+                    minWidth: "60px",
+                    textAlign: "right"
+                }, children: [currentStep, " / ", maxStep] })] }));
+};
+exports.Timeline = Timeline;

package/dist/cjs/components/VerticalTimeline.js

@@ -0,0 +1,160 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VerticalTimeline = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const VerticalTimeline = ({ stamps, currentStep, onStepChange, onToggle }) => {
+    const maxStep = stamps.length > 0 ? Math.max(...stamps.map((s) => s.step)) : 0;
+    const minStep = stamps.length > 0 ? Math.min(...stamps.map((s) => s.step)) : 0;
+    const totalSteps = maxStep - minStep + 1;
+    // Calculate latency for each step
+    const getStepLatency = (step) => {
+        const stepStamps = stamps.filter((s) => s.step === step);
+        if (stepStamps.length === 0)
+            return null;
+        // Calculate time difference from previous step
+        const prevStep = step - 1;
+        const prevStepStamps = stamps.filter((s) => s.step === prevStep);
+        if (prevStepStamps.length === 0)
+            return null;
+        const currentTime = Math.min(...stepStamps.map((s) => s.time));
+        const prevTime = Math.max(...prevStepStamps.map((s) => s.time));
+        return currentTime - prevTime;
+    };
+    // Get step label
+    const getStepLabel = (step) => {
+        var _a;
+        const stepStamps = stamps.filter((s) => s.step === step);
+        if (stepStamps.length === 0)
+            return `Step ${step}`;
+        // Get the first identifier for this step
+        const identifier = ((_a = stepStamps[0]) === null || _a === void 0 ? void 0 : _a.identifier) || "";
+        return identifier || `Step ${step}`;
+    };
+    // Format latency
+    const formatLatency = (latency) => {
+        if (latency < 1000) {
+            return `${latency.toFixed(0)}ms`;
+        }
+        else if (latency < 60000) {
+            return `${(latency / 1000).toFixed(1)}s`;
+        }
+        else {
+            return `${(latency / 60000).toFixed(1)}m`;
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            width: "100%",
+            height: "100%",
+            backgroundColor: "white",
+            display: "flex",
+            flexDirection: "column",
+            overflow: "hidden"
+        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                    padding: "16px",
+                    borderBottom: "1px solid #e5e7eb",
+                    backgroundColor: "#f9fafb",
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "flex-start"
+                }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h3", { style: {
+                                    margin: 0,
+                                    fontSize: "16px",
+                                    fontWeight: 600,
+                                    color: "#1f2937"
+                                }, children: "Timeline" }), (0, jsx_runtime_1.jsx)("p", { style: {
+                                    margin: "4px 0 0 0",
+                                    fontSize: "12px",
+                                    color: "#6b7280"
+                                }, children: "Click to jump to step" })] }), onToggle && ((0, jsx_runtime_1.jsx)("button", { onClick: onToggle, style: {
+                            border: "none",
+                            background: "none",
+                            cursor: "pointer",
+                            color: "#6b7280",
+                            padding: "4px",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            transition: "color 0.2s ease"
+                        }, title: "Collapse Panel", children: (0, jsx_runtime_1.jsx)(lucide_react_1.PanelLeft, { size: 16 }) }))] }), (0, jsx_runtime_1.jsx)("div", { style: {
+                    flex: 1,
+                    overflowY: "auto",
+                    padding: "8px 0 16px 0" // Add bottom padding
+                }, children: Array.from({ length: totalSteps }, (_, index) => {
+                    const step = minStep + index;
+                    const isActive = step === currentStep;
+                    const isPast = step < currentStep;
+                    const hasStep = stamps.some((s) => s.step === step);
+                    const latency = getStepLatency(step);
+                    const label = getStepLabel(step);
+                    return ((0, jsx_runtime_1.jsxs)("div", { onClick: () => hasStep && onStepChange(step), style: {
+                            padding: "12px 16px",
+                            borderBottom: "1px solid #f3f4f6",
+                            cursor: hasStep ? "pointer" : "default",
+                            backgroundColor: isActive ? "#f0f9ff" : "transparent",
+                            borderLeft: isActive ? "4px solid #6366f1" : "4px solid transparent",
+                            transition: "all 0.2s ease",
+                            position: "relative"
+                        }, onMouseEnter: (e) => {
+                            if (hasStep && !isActive) {
+                                e.currentTarget.style.backgroundColor = "#f8fafc";
+                            }
+                        }, onMouseLeave: (e) => {
+                            if (hasStep && !isActive) {
+                                e.currentTarget.style.backgroundColor = "transparent";
+                            }
+                        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    gap: "8px",
+                                    marginBottom: "4px"
+                                }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                            width: "12px",
+                                            height: "12px",
+                                            borderRadius: "50%",
+                                            backgroundColor: isActive ? "#6366f1" : isPast ? "#fbbf24" : hasStep ? "#9ca3af" : "#e5e7eb",
+                                            border: isActive ? "2px solid #6366f1" : "1px solid #d1d5db",
+                                            flexShrink: 0
+                                        } }), (0, jsx_runtime_1.jsxs)("span", { style: {
+                                            fontSize: "14px",
+                                            fontWeight: isActive ? 600 : 500,
+                                            color: isActive ? "#1f2937" : "#6b7280"
+                                        }, children: ["Step ", step] }), latency && ((0, jsx_runtime_1.jsx)("span", { style: {
+                                            fontSize: "11px",
+                                            color: "#9ca3af",
+                                            backgroundColor: "#f3f4f6",
+                                            padding: "2px 6px",
+                                            borderRadius: "4px",
+                                            marginLeft: "auto"
+                                        }, children: formatLatency(latency) }))] }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                    fontSize: "13px",
+                                    color: hasStep ? "#1f2937" : "#9ca3af",
+                                    lineHeight: "1.4",
+                                    wordBreak: "break-word",
+                                    fontStyle: hasStep ? "normal" : "italic"
+                                }, children: hasStep ? label : "No activity" }), isActive && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                    position: "absolute",
+                                    right: "8px",
+                                    top: "50%",
+                                    transform: "translateY(-50%)",
+                                    width: "6px",
+                                    height: "6px",
+                                    borderRadius: "50%",
+                                    backgroundColor: "#6366f1",
+                                    animation: "pulse 2s infinite"
+                                } }))] }, step));
+                }) }), (0, jsx_runtime_1.jsx)("style", { children: `
+          @keyframes pulse {
+            0% {
+              opacity: 1;
+            }
+            50% {
+              opacity: 0.5;
+            }
+            100% {
+              opacity: 1;
+            }
+          }
+        ` })] }));
+};
+exports.VerticalTimeline = VerticalTimeline;

package/dist/cjs/hooks/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFlowData = exports.useApi = void 0;
+var useApi_1 = require("./useApi");
+Object.defineProperty(exports, "useApi", { enumerable: true, get: function () { return useApi_1.useApi; } });
+var useFlowData_1 = require("./useFlowData");
+Object.defineProperty(exports, "useFlowData", { enumerable: true, get: function () { return useFlowData_1.useFlowData; } });