@railtownai/railtracks-visualizer 0.0.61 → 0.0.62

package/dist/cjs/index.js

@@ -52440,7 +52440,8 @@ const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100dvw", heigh
         flowData.nodes,
         flowData.edges,
         flowData.stamps,
-        flowData.steps
+        flowData.steps,
+        flowData.run_id
     ]);
     // Auto-play functionality
     React.useEffect(()=>{
@@ -52469,8 +52470,9 @@ const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100dvw", heigh
         isPlaying,
         maxStep
     ]);
-    // Default to the final step for this run so the full graph is visible (stamps may be missing)
-    React.useEffect(()=>{
+    // Default to the final step for this run so the full graph is visible (stamps may be missing).
+    // useLayoutEffect: align step before paint so getNodesForStep(currentStep) never briefly filters out the whole graph.
+    React.useLayoutEffect(()=>{
         setCurrentStep(maxStep);
     }, [
         maxStep,
@@ -52557,7 +52559,7 @@ const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100dvw", heigh
                 x: 0,
                 y: 0
             };
-            const isActive = node.stamp.step === currentStep;
+            const isActive = node.stamp?.step === currentStep;
             const rawType = node.node_type || "Agent";
             const resolvedType = rawType === "Coordinator" ? "Agent" : rawType;
             // Extract edge details for Tool nodes
@@ -52591,7 +52593,7 @@ const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100dvw", heigh
     const edges = React.useMemo(()=>{
         const stepEdges = getEdgesForStep(currentStep);
         return stepEdges.filter((edge)=>edge.source && edge.target).map((edge)=>{
-            const isActive = edge.stamp.step === currentStep;
+            const isActive = edge.stamp?.step === currentStep;
             return {
                 id: edge.identifier,
                 type: "smoothstep",
@@ -52619,14 +52621,14 @@ const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100dvw", heigh
     ]);
     const [nodesState, setNodes, onNodesChange] = useNodesState(nodes);
     const [edgesState, setEdges, onEdgesChange] = useEdgesState(edges);
-    // Update nodes and edges when currentStep changes
-    React.useEffect(()=>{
+    // Keep React Flow store in sync with derived nodes/edges before paint to avoid transient empty graphs.
+    React.useLayoutEffect(()=>{
         setNodes(nodes);
     }, [
         nodes,
         setNodes
     ]);
-    React.useEffect(()=>{
+    React.useLayoutEffect(()=>{
         setEdges(edges);
     }, [
         edges,

package/dist/esm/index.js

@@ -52420,7 +52420,8 @@ const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100dvw", heigh
         flowData.nodes,
         flowData.edges,
         flowData.stamps,
-        flowData.steps
+        flowData.steps,
+        flowData.run_id
     ]);
     // Auto-play functionality
     useEffect(()=>{
@@ -52449,8 +52450,9 @@ const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100dvw", heigh
         isPlaying,
         maxStep
     ]);
-    // Default to the final step for this run so the full graph is visible (stamps may be missing)
-    useEffect(()=>{
+    // Default to the final step for this run so the full graph is visible (stamps may be missing).
+    // useLayoutEffect: align step before paint so getNodesForStep(currentStep) never briefly filters out the whole graph.
+    useLayoutEffect(()=>{
         setCurrentStep(maxStep);
     }, [
         maxStep,
@@ -52537,7 +52539,7 @@ const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100dvw", heigh
                 x: 0,
                 y: 0
             };
-            const isActive = node.stamp.step === currentStep;
+            const isActive = node.stamp?.step === currentStep;
             const rawType = node.node_type || "Agent";
             const resolvedType = rawType === "Coordinator" ? "Agent" : rawType;
             // Extract edge details for Tool nodes
@@ -52571,7 +52573,7 @@ const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100dvw", heigh
     const edges = useMemo(()=>{
         const stepEdges = getEdgesForStep(currentStep);
         return stepEdges.filter((edge)=>edge.source && edge.target).map((edge)=>{
-            const isActive = edge.stamp.step === currentStep;
+            const isActive = edge.stamp?.step === currentStep;
             return {
                 id: edge.identifier,
                 type: "smoothstep",
@@ -52599,14 +52601,14 @@ const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100dvw", heigh
     ]);
     const [nodesState, setNodes, onNodesChange] = useNodesState(nodes);
     const [edgesState, setEdges, onEdgesChange] = useEdgesState(edges);
-    // Update nodes and edges when currentStep changes
-    useEffect(()=>{
+    // Keep React Flow store in sync with derived nodes/edges before paint to avoid transient empty graphs.
+    useLayoutEffect(()=>{
         setNodes(nodes);
     }, [
         nodes,
         setNodes
     ]);
-    useEffect(()=>{
+    useLayoutEffect(()=>{
         setEdges(edges);
     }, [
         edges,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@railtownai/railtracks-visualizer",
-  "version": "0.0.61",
+  "version": "0.0.62",
   "license": "MIT",
   "author": "Railtown AI",
   "description": "A visualizer for Railtracks agentic flows",