@railtownai/railtracks-visualizer 0.0.35 → 0.0.38

package/dist/cjs/index.js

@@ -6006,7 +6006,7 @@ function createPanZoomEndHandler({ zoomPanValues, panOnDrag, panOnScroll, onDrag
         return (!event.ctrlKey || isWheelEvent) && buttonAllowed;
     };
 }
-function XYPanZoom({ domNode, minZoom, maxZoom, paneClickDistance, translateExtent, viewport, onPanZoom, onPanZoomStart, onPanZoomEnd, onDraggingChange }) {
+function XYPanZoom({ domNode, minZoom, maxZoom, translateExtent, viewport, onPanZoom, onPanZoomStart, onPanZoomEnd, onDraggingChange }) {
     const zoomPanValues = {
         isZoomingOrPanning: false,
         usedRightMouseButton: false,
@@ -6018,7 +6018,7 @@ function XYPanZoom({ domNode, minZoom, maxZoom, paneClickDistance, translateExte
         isPanScrolling: false
     };
     const bbox = domNode.getBoundingClientRect();
-    const d3ZoomInstance = zoom().clickDistance(!isNumeric(paneClickDistance) || paneClickDistance < 0 ? 0 : paneClickDistance).scaleExtent([
+    const d3ZoomInstance = zoom().scaleExtent([
         minZoom,
         maxZoom
     ]).translateExtent(translateExtent);
@@ -6049,11 +6049,12 @@ function XYPanZoom({ domNode, minZoom, maxZoom, paneClickDistance, translateExte
         return Promise.resolve(false);
     }
     // public functions
-    function update({ noWheelClassName, noPanClassName, onPaneContextMenu, userSelectionActive, panOnScroll, panOnDrag, panOnScrollMode, panOnScrollSpeed, preventScrolling, zoomOnPinch, zoomOnScroll, zoomOnDoubleClick, zoomActivationKeyPressed, lib, onTransformChange, connectionInProgress }) {
+    function update({ noWheelClassName, noPanClassName, onPaneContextMenu, userSelectionActive, panOnScroll, panOnDrag, panOnScrollMode, panOnScrollSpeed, preventScrolling, zoomOnPinch, zoomOnScroll, zoomOnDoubleClick, zoomActivationKeyPressed, lib, onTransformChange, connectionInProgress, paneClickDistance, selectionOnDrag }) {
         if (userSelectionActive && !zoomPanValues.isZoomingOrPanning) {
             destroy();
         }
         const isPanOnScroll = panOnScroll && !zoomActivationKeyPressed && !userSelectionActive;
+        d3ZoomInstance.clickDistance(selectionOnDrag ? Infinity : !isNumeric(paneClickDistance) || paneClickDistance < 0 ? 0 : paneClickDistance);
         const wheelHandler = isPanOnScroll ? createPanOnScrollHandler({
             zoomPanValues,
             noWheelClassName,
@@ -7335,7 +7336,6 @@ const reactFlowFieldsToTrack = [
     'onBeforeDelete',
     'debug',
     'autoPanSpeed',
-    'paneClickDistance',
     'ariaLabelConfig'
 ];
 // rfId doesn't exist in ReactFlowProps, but it's one of the fields we want to update
@@ -7351,8 +7351,7 @@ const selector$l = (s)=>({
         setTranslateExtent: s.setTranslateExtent,
         setNodeExtent: s.setNodeExtent,
         reset: s.reset,
-        setDefaultNodesAndEdges: s.setDefaultNodesAndEdges,
-        setPaneClickDistance: s.setPaneClickDistance
+        setDefaultNodesAndEdges: s.setDefaultNodesAndEdges
     });
 const initPrevValues = {
     /*
@@ -7365,11 +7364,10 @@ const initPrevValues = {
     maxZoom: 2,
     elementsSelectable: true,
     noPanClassName: 'nopan',
-    rfId: '1',
-    paneClickDistance: 0
+    rfId: '1'
 };
 function StoreUpdater(props) {
-    const { setNodes, setEdges, setMinZoom, setMaxZoom, setTranslateExtent, setNodeExtent, reset, setDefaultNodesAndEdges, setPaneClickDistance } = useStore(selector$l, shallow$1);
+    const { setNodes, setEdges, setMinZoom, setMaxZoom, setTranslateExtent, setNodeExtent, reset, setDefaultNodesAndEdges } = useStore(selector$l, shallow$1);
     const store = useStoreApi();
     React.useEffect(()=>{
         setDefaultNodesAndEdges(props.defaultNodes, props.defaultEdges);
@@ -7393,7 +7391,6 @@ function StoreUpdater(props) {
             else if (fieldName === 'maxZoom') setMaxZoom(fieldValue);
             else if (fieldName === 'translateExtent') setTranslateExtent(fieldValue);
             else if (fieldName === 'nodeExtent') setNodeExtent(fieldValue);
-            else if (fieldName === 'paneClickDistance') setPaneClickDistance(fieldValue);
             else if (fieldName === 'ariaLabelConfig') store.setState({
                 ariaLabelConfig: mergeAriaLabelConfig(fieldValue)
             });
@@ -8455,7 +8452,7 @@ const selector$j = (s)=>({
         lib: s.lib,
         connectionInProgress: s.connection.inProgress
     });
-function ZoomPane({ onPaneContextMenu, zoomOnScroll = true, zoomOnPinch = true, panOnScroll = false, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = true, panOnDrag = true, defaultViewport, translateExtent, minZoom, maxZoom, zoomActivationKeyCode, preventScrolling = true, children, noWheelClassName, noPanClassName, onViewportChange, isControlledViewport, paneClickDistance }) {
+function ZoomPane({ onPaneContextMenu, zoomOnScroll = true, zoomOnPinch = true, panOnScroll = false, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = true, panOnDrag = true, defaultViewport, translateExtent, minZoom, maxZoom, zoomActivationKeyCode, preventScrolling = true, children, noWheelClassName, noPanClassName, onViewportChange, isControlledViewport, paneClickDistance, selectionOnDrag }) {
     const store = useStoreApi();
     const zoomPane = React.useRef(null);
     const { userSelectionActive, lib, connectionInProgress } = useStore(selector$j, shallow$1);
@@ -8485,7 +8482,6 @@ function ZoomPane({ onPaneContextMenu, zoomOnScroll = true, zoomOnPinch = true,
                 maxZoom,
                 translateExtent,
                 viewport: defaultViewport,
-                paneClickDistance,
                 onDraggingChange: (paneDragging)=>store.setState({
                         paneDragging
                     }),
@@ -8537,7 +8533,9 @@ function ZoomPane({ onPaneContextMenu, zoomOnScroll = true, zoomOnPinch = true,
             noWheelClassName,
             lib,
             onTransformChange,
-            connectionInProgress
+            connectionInProgress,
+            selectionOnDrag,
+            paneClickDistance
         });
     }, [
         onPaneContextMenu,
@@ -8555,7 +8553,9 @@ function ZoomPane({ onPaneContextMenu, zoomOnScroll = true, zoomOnPinch = true,
         noWheelClassName,
         lib,
         onTransformChange,
-        connectionInProgress
+        connectionInProgress,
+        selectionOnDrag,
+        paneClickDistance
     ]);
     return jsxRuntime.jsx("div", {
         className: "react-flow__renderer",
@@ -8597,17 +8597,16 @@ const selector$h = (s)=>({
         connectionInProgress: s.connection.inProgress,
         dragging: s.paneDragging
     });
-function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.Full, panOnDrag, selectionOnDrag, onSelectionStart, onSelectionEnd, onPaneClick, onPaneContextMenu, onPaneScroll, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, children }) {
+function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.Full, panOnDrag, paneClickDistance, selectionOnDrag, onSelectionStart, onSelectionEnd, onPaneClick, onPaneContextMenu, onPaneScroll, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, children }) {
     const store = useStoreApi();
     const { userSelectionActive, elementsSelectable, dragging, connectionInProgress } = useStore(selector$h, shallow$1);
-    const hasActiveSelection = elementsSelectable && (isSelecting || userSelectionActive);
+    const isSelectionEnabled = elementsSelectable && (isSelecting || userSelectionActive);
     const container = React.useRef(null);
     const containerBounds = React.useRef();
     const selectedNodeIds = React.useRef(new Set());
     const selectedEdgeIds = React.useRef(new Set());
     // Used to prevent click events when the user lets go of the selectionKey during a selection
     const selectionInProgress = React.useRef(false);
-    const selectionStarted = React.useRef(false);
     const onClick = (event)=>{
         // We prevent click events when the user let go of the selectionKey during a selection
         // We also prevent click events when a connection is in progress
@@ -8630,29 +8629,27 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
     };
     const onWheel = onPaneScroll ? (event)=>onPaneScroll(event) : undefined;
     const onClickCapture = (event)=>{
-        const isSelectionOnDragActive = selectionOnDrag && container.current === event.target || !selectionOnDrag || selectionKeyPressed;
-        if (!isSelectionOnDragActive) {
-            return;
+        if (selectionInProgress.current) {
+            event.stopPropagation();
+            selectionInProgress.current = false;
         }
-        event.stopPropagation();
     };
     // We are using capture here in order to prevent other pointer events
     // to be able to create a selection above a node or an edge
     const onPointerDownCapture = (event)=>{
-        const { resetSelectedElements, domNode } = store.getState();
+        const { domNode } = store.getState();
         containerBounds.current = domNode?.getBoundingClientRect();
-        const isNoKeyEvent = event.target !== container.current && !!event.target.closest('.nokey');
-        const isSelectionActive = selectionOnDrag && container.current === event.target || !selectionOnDrag || selectionKeyPressed;
-        if (!elementsSelectable || !isSelecting || event.button !== 0 || !containerBounds.current || isNoKeyEvent || !isSelectionActive || !event.isPrimary) {
+        if (!containerBounds.current) return;
+        const eventTargetIsContainer = event.target === container.current;
+        // if a child element has the 'nokey' class, we don't want to swallow the event and don't start a selection
+        const isNoKeyEvent = !eventTargetIsContainer && !!event.target.closest('.nokey');
+        const isSelectionActive = selectionOnDrag && eventTargetIsContainer || selectionKeyPressed;
+        if (isNoKeyEvent || !isSelecting || !isSelectionActive || event.button !== 0 || !event.isPrimary) {
             return;
         }
-        event.stopPropagation();
-        event.preventDefault();
         event.target?.setPointerCapture?.(event.pointerId);
-        selectionStarted.current = true;
         selectionInProgress.current = false;
         const { x, y } = getEventPosition(event.nativeEvent, containerBounds.current);
-        resetSelectedElements();
         store.setState({
             userSelectionRect: {
                 width: 0,
@@ -8663,16 +8660,28 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
                 y
             }
         });
-        onSelectionStart?.(event);
+        if (!eventTargetIsContainer) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
     };
     const onPointerMove = (event)=>{
-        const { userSelectionRect, transform, nodeLookup, edgeLookup, connectionLookup, triggerNodeChanges, triggerEdgeChanges, defaultEdgeOptions } = store.getState();
+        const { userSelectionRect, transform, nodeLookup, edgeLookup, connectionLookup, triggerNodeChanges, triggerEdgeChanges, defaultEdgeOptions, resetSelectedElements } = store.getState();
         if (!containerBounds.current || !userSelectionRect) {
             return;
         }
-        selectionInProgress.current = true;
         const { x: mouseX, y: mouseY } = getEventPosition(event.nativeEvent, containerBounds.current);
         const { startX, startY } = userSelectionRect;
+        if (!selectionInProgress.current) {
+            const requiredDistance = selectionKeyPressed ? 0 : paneClickDistance;
+            const distance = Math.hypot(mouseX - startX, mouseY - startY);
+            if (distance <= requiredDistance) {
+                return;
+            }
+            resetSelectedElements();
+            onSelectionStart?.(event);
+        }
+        selectionInProgress.current = true;
         const nextUserSelectRect = {
             startX,
             startY,
@@ -8712,30 +8721,26 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
         });
     };
     const onPointerUp = (event)=>{
-        if (event.button !== 0 || !selectionStarted.current) {
+        if (event.button !== 0) {
             return;
         }
         event.target?.releasePointerCapture?.(event.pointerId);
-        const { userSelectionRect } = store.getState();
         /*
          * We only want to trigger click functions when in selection mode if
          * the user did not move the mouse.
-         */ if (!userSelectionActive && userSelectionRect && event.target === container.current) {
+         */ if (!userSelectionActive && event.target === container.current && store.getState().userSelectionRect) {
             onClick?.(event);
         }
         store.setState({
             userSelectionActive: false,
-            userSelectionRect: null,
-            nodesSelectionActive: selectedNodeIds.current.size > 0
+            userSelectionRect: null
         });
-        onSelectionEnd?.(event);
-        /*
-         * If the user kept holding the selectionKey during the selection,
-         * we need to reset the selectionInProgress, so the next click event is not prevented
-         */ if (selectionKeyPressed || selectionOnDrag) {
-            selectionInProgress.current = false;
+        if (selectionInProgress.current) {
+            onSelectionEnd?.(event);
+            store.setState({
+                nodesSelectionActive: selectedNodeIds.current.size > 0
+            });
         }
-        selectionStarted.current = false;
     };
     const draggable = panOnDrag === true || Array.isArray(panOnDrag) && panOnDrag.includes(0);
     return jsxRuntime.jsxs("div", {
@@ -8747,14 +8752,14 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
                 selection: isSelecting
             }
         ]),
-        onClick: hasActiveSelection ? undefined : wrapHandler(onClick, container),
+        onClick: isSelectionEnabled ? undefined : wrapHandler(onClick, container),
         onContextMenu: wrapHandler(onContextMenu, container),
         onWheel: wrapHandler(onWheel, container),
-        onPointerEnter: hasActiveSelection ? undefined : onPaneMouseEnter,
-        onPointerMove: hasActiveSelection ? onPointerMove : onPaneMouseMove,
-        onPointerUp: hasActiveSelection ? onPointerUp : undefined,
-        onPointerDownCapture: hasActiveSelection ? onPointerDownCapture : undefined,
-        onClickCapture: hasActiveSelection ? onClickCapture : undefined,
+        onPointerEnter: isSelectionEnabled ? undefined : onPaneMouseEnter,
+        onPointerMove: isSelectionEnabled ? onPointerMove : onPaneMouseMove,
+        onPointerUp: isSelectionEnabled ? onPointerUp : undefined,
+        onPointerDownCapture: isSelectionEnabled ? onPointerDownCapture : undefined,
+        onClickCapture: isSelectionEnabled ? onClickCapture : undefined,
         onPointerLeave: onPaneMouseLeave,
         ref: container,
         style: containerStyle,
@@ -9304,6 +9309,7 @@ function FlowRendererComponent({ children, onPaneClick, onPaneMouseEnter, onPane
         onViewportChange: onViewportChange,
         isControlledViewport: isControlledViewport,
         paneClickDistance: paneClickDistance,
+        selectionOnDrag: _selectionOnDrag,
         children: jsxRuntime.jsxs(Pane, {
             onSelectionStart: onSelectionStart,
             onSelectionEnd: onSelectionEnd,
@@ -9317,6 +9323,7 @@ function FlowRendererComponent({ children, onPaneClick, onPaneMouseEnter, onPane
             isSelecting: !!isSelecting,
             selectionMode: selectionMode,
             selectionKeyPressed: selectionKeyPressed,
+            paneClickDistance: paneClickDistance,
             selectionOnDrag: _selectionOnDrag,
             children: [
                 children,
@@ -11399,9 +11406,6 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
                     translateExtent
                 });
             },
-            setPaneClickDistance: (clickDistance)=>{
-                get().panZoom?.setClickDistance(clickDistance);
-            },
             resetSelectedElements: ()=>{
                 const { edges, nodes, triggerNodeChanges, triggerEdgeChanges, elementsSelectable } = get();
                 if (!elementsSelectable) {
@@ -11730,7 +11734,6 @@ function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTy
                     nodeDragThreshold: nodeDragThreshold,
                     connectionDragThreshold: connectionDragThreshold,
                     onBeforeDelete: onBeforeDelete,
-                    paneClickDistance: paneClickDistance,
                     debug: debug,
                     ariaLabelConfig: ariaLabelConfig
                 }),
@@ -12696,7 +12699,7 @@ var css_248z = "/* this gets exported as style.css and can be used for the defau
 styleInject(css_248z);
 
 /**
- * @license lucide-react v0.546.0 - ISC
+ * @license lucide-react v0.553.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -12718,7 +12721,7 @@ const hasA11yProp = (props)=>{
 };
 
 /**
- * @license lucide-react v0.546.0 - ISC
+ * @license lucide-react v0.553.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -15801,6 +15804,8 @@ const Label$1 = styled.span`
 `;
 const Value$1 = styled.span`
   font-size: 0.75rem;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
   color: ${(props)=>props.themeColors.primary};
 `;
 const EmptyIndicator = styled.span`
@@ -15820,8 +15825,8 @@ const TreeContainer = styled.div`
 `;
 const TreeScrollContainer = styled.div`
   width: 100%;
-  max-height: 16rem;
   overflow-y: auto;
+  max-height: 16rem;
   padding: 0.5rem;
 `;
 const NoDataMessage = styled.div`
@@ -15842,7 +15847,8 @@ const SimpleValueContainer = styled.div`
   border: 1px solid ${(props)=>props.themeColors.border};
   font-size: 0.75rem;
   color: ${(props)=>props.themeColors.foreground};
-  word-break: break-all;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
 `;
 styled.div`
   width: 100%;
@@ -15862,6 +15868,8 @@ const SimpleValueLabel = styled.span`
 `;
 const SimpleValueText = styled.span`
   color: ${(props)=>props.themeColors.foreground};
+  word-wrap: break-word;
+  overflow-wrap: break-word;
   font-size: 0.875rem;
 `;
 const EmptyStateContainer = styled.div`
@@ -16031,6 +16039,8 @@ const JsonTreeViewer = ({ data, maxDepth = 4, initialExpanded = false, expanded
     })()));
 };
 
+const NODE_MAX_WIDTH = 500;
+
 const OutputRenderer = ({ data })=>{
     const [isExpanded, setIsExpanded] = React.useState(false);
     const contentType = detectContentType(data);
@@ -16039,20 +16049,26 @@ const OutputRenderer = ({ data })=>{
     };
     switch(contentType){
         case "string":
-            return /*#__PURE__*/ React.createElement(OutputScrollableContent, null, /*#__PURE__*/ React.createElement(ExpandableTextarea, {
+            return /*#__PURE__*/ React.createElement(OutputScrollableContent, {
+                className: "agent-node-scrollable"
+            }, /*#__PURE__*/ React.createElement(ExpandableTextarea, {
                 label: "Output",
                 content: data.content,
                 isExpanded: isExpanded,
                 onToggle: handleToggle
             }));
         case "toolResponse":
-            return /*#__PURE__*/ React.createElement(OutputScrollableContent, null, /*#__PURE__*/ React.createElement(NodeSubHeader, null, "Output - Tool Response"), /*#__PURE__*/ React.createElement(JsonTreeViewer, {
+            return /*#__PURE__*/ React.createElement(OutputScrollableContent, {
+                className: "agent-node-scrollable"
+            }, /*#__PURE__*/ React.createElement(NodeSubHeader, null, "Output - Tool Response"), /*#__PURE__*/ React.createElement(JsonTreeViewer, {
                 data: data,
                 expanded: true
             }));
         case "toolCallList":
             const formattedCode = formatToolCalls(data.content);
-            return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(OutputScrollableContent, null, /*#__PURE__*/ React.createElement(NodeSubHeader, null, /*#__PURE__*/ React.createElement("span", null, "Output - Tool Calls"), /*#__PURE__*/ React.createElement("span", {
+            return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(OutputScrollableContent, {
+                className: "agent-node-scrollable"
+            }, /*#__PURE__*/ React.createElement(NodeSubHeader, null, /*#__PURE__*/ React.createElement("span", null, "Output - Tool Calls"), /*#__PURE__*/ React.createElement("span", {
                 style: {
                     display: "flex",
                     alignItems: "center",
@@ -16067,7 +16083,7 @@ const OutputRenderer = ({ data })=>{
             })));
         case "other":
         default:
-            return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(OutputScrollableContent, null, /*#__PURE__*/ React.createElement(NodeSubHeader, null, "Output"), /*#__PURE__*/ React.createElement(JsonTreeViewer, {
+            return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(OutputScrollableContent, null, /*#__PURE__*/ React.createElement(NodeSubHeader, null, "Output - JSON"), /*#__PURE__*/ React.createElement(JsonTreeViewer, {
                 data: data,
                 expanded: true
             })));
@@ -16090,12 +16106,13 @@ const NodeSubHeader = styled.span`
 `;
 const OutputScrollableContent = styled.div`
   width: 100%;
+  max-width: ${NODE_MAX_WIDTH}px;
   display: flex;
   flex-direction: column;
+  align-items: stretch;
   padding-bottom: 0.5rem;
+  padding-right: 2px;
   gap: 0.5rem;
-  max-height: 200px;
-  overflow-y: auto;
 `;
 
 function _objectWithoutPropertiesLoose(r, e) {
@@ -16407,7 +16424,9 @@ const InputArrayRenderer = ({ input })=>{
         }
     }, /*#__PURE__*/ React.createElement(MessageSquare, {
         size: 12
-    }), input.length)), /*#__PURE__*/ React.createElement(InputArrayScrollableContent, null, input.map((item, index)=>/*#__PURE__*/ React.createElement(InputItem, {
+    }), input.length)), /*#__PURE__*/ React.createElement(InputArrayScrollableContent, {
+        className: "agent-node-scrollable"
+    }, input.map((item, index)=>/*#__PURE__*/ React.createElement(InputItem, {
             key: index
         }, /*#__PURE__*/ React.createElement(InputItemHeader, null, /*#__PURE__*/ React.createElement(InputItemLabel, null, getRoleEmoji(item.role), " ", getRoleDisplayName(item.role))), /*#__PURE__*/ React.createElement(InputItemTextarea, {
             onClick: (e)=>{
@@ -16419,7 +16438,8 @@ const InputArrayRenderer = ({ input })=>{
                 border: `1px solid ${themeColors.border}`,
                 backgroundColor: themeColors.muted,
                 color: themeColors.foreground
-            }
+            },
+            className: "agent-node-scrollable"
         })))));
 };
 // Styled components
@@ -16434,6 +16454,7 @@ const InputArrayScrollableContent = styled.div`
   display: flex;
   flex-direction: column;
   padding-bottom: 0.5rem;
+  padding-right: 2px;
   gap: 0.5rem;
   max-height: 200px;
   overflow-y: auto;
@@ -16563,12 +16584,7 @@ const getNodeIcon$1 = (nodeType, modelProvider)=>{
     }
     return "🤖";
 };
-const NodeDetailsPopover = ({ isVisible, onClose, nodeData, triggerRef })=>{
-    const [position, setPosition] = React.useState({
-        top: 0,
-        left: 0,
-        arrowPosition: "right"
-    });
+const NodeDetailsPopover = ({ isVisible, onClose, nodeData })=>{
     const [selectedRowIndex, setSelectedRowIndex] = React.useState(null);
     const [selectedLlmDetails, setSelectedLlmDetails] = React.useState(null);
     // Default to last row (total/aggregate) when popover opens (only on first open)
@@ -16593,54 +16609,6 @@ const NodeDetailsPopover = ({ isVisible, onClose, nodeData, triggerRef })=>{
             setSelectedLlmDetails(nodeData.details.internals.llm_details[nodeData.details.internals.llm_details.length]);
         }
     };
-    // Calculate popover position based on trigger element
-    React.useEffect(()=>{
-        if (isVisible && triggerRef.current) {
-            const rect = triggerRef.current.getBoundingClientRect();
-            const viewportWidth = window.innerWidth;
-            const viewportHeight = window.innerHeight;
-            const popoverWidth = DEFAULT_POPOVER_WIDTH; // Match the width from styled component
-            const popoverHeight = DEFAULT_POPOVER_HEIGHT; // Approximate max height
-            const gap = 12; // Gap between node and popover
-            // Check if the rect is valid (has non-zero dimensions and is in viewport)
-            const isValidRect = rect.width > 0 && rect.height > 0 && rect.top >= 0 && rect.left >= 0;
-            if (isValidRect) {
-                // Normal positioning logic for ReactFlow
-                let left = rect.right + gap;
-                let top = rect.top;
-                let arrowPosition = "right"; // Arrow points right (popover is to the right)
-                // If popover would go off-screen, position it to the left of the node
-                if (left + popoverWidth > viewportWidth) {
-                    left = rect.left - popoverWidth - gap;
-                    arrowPosition = "left"; // Arrow points left (popover is to the left)
-                }
-                // Ensure popover doesn't go off the top or bottom of the viewport
-                if (top < 0) {
-                    top = 20; // Small margin from top
-                } else if (top + popoverHeight > viewportHeight) {
-                    top = viewportHeight - popoverHeight - 20; // Small margin from bottom
-                }
-                setPosition({
-                    top,
-                    left,
-                    arrowPosition
-                });
-            } else {
-                // Fallback positioning for isolated environments (like Storybook)
-                // Center the popover in the viewport
-                const centerLeft = Math.max(20, (viewportWidth - popoverWidth) / 2);
-                const centerTop = Math.max(20, (viewportHeight - popoverHeight) / 2);
-                setPosition({
-                    top: centerTop,
-                    left: centerLeft,
-                    arrowPosition: "none" // No arrow in fallback mode
-                });
-            }
-        }
-    }, [
-        isVisible,
-        triggerRef
-    ]);
     // Handle ESC key to close popover
     React.useEffect(()=>{
         const handleEscKey = (event)=>{
@@ -16666,7 +16634,7 @@ const NodeDetailsPopover = ({ isVisible, onClose, nodeData, triggerRef })=>{
     // Handle click outside to close popover
     React.useEffect(()=>{
         const handleClickOutside = (event)=>{
-            if (isVisible && triggerRef.current && !triggerRef.current.contains(event.target) && !event.target.closest("[data-popover-content]")) {
+            if (isVisible && !event.target.closest("[data-popover-content]") && !event.target.closest(".react-flow__node")) {
                 onClose();
             }
         };
@@ -16676,8 +16644,7 @@ const NodeDetailsPopover = ({ isVisible, onClose, nodeData, triggerRef })=>{
         }
     }, [
         isVisible,
-        onClose,
-        triggerRef
+        onClose
     ]);
     if (!isVisible) return null;
     const llOverviewDetails = getOverviewLlmDetails(nodeData.details?.internals?.llm_details || []);
@@ -16685,16 +16652,14 @@ const NodeDetailsPopover = ({ isVisible, onClose, nodeData, triggerRef })=>{
     const totalInputTokens = sumTotalInputTokens(nodeData.details?.internals?.llm_details || []);
     const totalOutputTokens = sumTotalOutputTokens(nodeData.details?.internals?.llm_details || []);
     const totalLatency = sumTotalLatency(nodeData.details?.internals?.llm_details || []);
-    const popoverContent = /*#__PURE__*/ React.createElement(PopoverPortal, {
-        style: {
-            top: position.top,
-            left: position.left
-        }
-    }, /*#__PURE__*/ React.createElement(PopoverContent, {
+    const popoverContent = /*#__PURE__*/ React.createElement(PopoverPortal, null, /*#__PURE__*/ React.createElement(PopoverContent, {
         "data-popover-content": true,
-        $arrowPosition: position.arrowPosition
+        $arrowPosition: "left"
     }, /*#__PURE__*/ React.createElement(PopoverHeader, null, /*#__PURE__*/ React.createElement(PopoverTitle, null, /*#__PURE__*/ React.createElement(NodeIcon$3, null, getNodeIcon$1(nodeData.nodeType || "Agent", llOverviewDetails?.model_provider)), /*#__PURE__*/ React.createElement("span", null, nodeData.label, " Details")), /*#__PURE__*/ React.createElement(PopoverHeaderButtons, null, /*#__PURE__*/ React.createElement(CloseButton, {
-        onClick: onClose
+        onClick: (e)=>{
+            e.stopPropagation();
+            onClose();
+        }
     }, /*#__PURE__*/ React.createElement(X, {
         size: 16
     })))), /*#__PURE__*/ React.createElement(PopoverBody, null, llOverviewDetails && /*#__PURE__*/ React.createElement(Section, null, /*#__PURE__*/ React.createElement(InfoGrid, null, (()=>{
@@ -16838,14 +16803,20 @@ const NodeDetailsPopover = ({ isVisible, onClose, nodeData, triggerRef })=>{
     }), /*#__PURE__*/ React.createElement(OutputRenderer, {
         data: selectedLlmDetails.output
     })) : null))));
-    // Use React Portal to render outside of ReactFlow container
-    return /*#__PURE__*/ ReactDOM.createPortal(popoverContent, document.body);
+    return popoverContent;
 };
 // Styled components
 const PopoverPortal = styled.div`
-  position: fixed;
+  position: absolute;
+  left: calc(100% + 12px);
+  top: 0;
   z-index: 99999;
-  pointer-events: none;
+
+  /* Position to the left of the node if there's not enough space on the right */
+  @media (max-width: 768px) {
+    left: auto;
+    right: calc(100% + 12px);
+  }
 `;
 const PopoverContent = styled.div`
   width: ${DEFAULT_POPOVER_WIDTH}px;
@@ -16881,7 +16852,7 @@ const PopoverContent = styled.div`
       height: 0;
       border-top: 6px solid transparent;
       border-bottom: 6px solid transparent;
-      ${props.$arrowPosition === "right" ? `
+      ${props.$arrowPosition === "left" ? `
         left: -6px;
         border-right: 6px solid ${props.theme?.colors?.border || "hsl(214.3 31.8% 91.4%)"};
       ` : `
@@ -16898,7 +16869,7 @@ const PopoverContent = styled.div`
       height: 0;
       border-top: 6px solid transparent;
       border-bottom: 6px solid transparent;
-      ${props.$arrowPosition === "right" ? `
+      ${props.$arrowPosition === "left" ? `
         left: -5px;
         border-right: 6px solid ${props.theme?.colors?.background || "hsl(0 0% 100%)"};
       ` : `
@@ -16979,7 +16950,7 @@ const PopoverHeaderButtons = styled.div`
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  justify-content: flex-start;
+  justify-content: flex-end;
 `;
 const CloseButton = styled.button`
   display: flex;
@@ -16993,6 +16964,8 @@ const CloseButton = styled.button`
   color: ${(props)=>props.theme?.colors?.mutedForeground || "hsl(215.4 16.3% 46.9%)"};
   cursor: pointer;
   transition: all 0.2s ease-in-out;
+  pointer-events: auto;
+  flex-shrink: 0;
 
   &:hover {
     background-color: ${(props)=>props.theme?.colors?.muted || "hsl(210 40% 96%)"};
@@ -17003,9 +16976,13 @@ const CloseButton = styled.button`
     outline: 2px solid ${(props)=>props.theme?.colors?.primary || "hsl(221.2 83.2% 53.3%)"};
     outline-offset: 2px;
   }
+
+  &:active {
+    transform: scale(0.95);
+  }
 `;
 const PopoverBody = styled.div`
-  max-height: 500px;
+  max-height: 400px; /* Reduced by 100px to account for PopoverHeader and spacing */
   overflow-y: auto;
   padding: 1rem;
   display: flex;
@@ -17018,6 +16995,7 @@ const Section = styled.div`
   gap: 0.75rem;
 `;
 const FadingSection = styled(Section)`
+  overflow-y: auto; /* Base style: enables scrolling after animation completes */
   animation:
     expandHeight 300ms ease-out,
     fadeInContent 200ms ease-in-out 200ms both;
@@ -17028,8 +17006,8 @@ const FadingSection = styled(Section)`
       overflow: hidden;
     }
     to {
-      max-height: 500px; /* Adjust based on expected content height */
-      overflow: visible;
+      max-height: 350px; /* Reduced to fit within PopoverBody (400px) accounting for padding and gaps */
+      overflow: hidden; /* Keep hidden during animation, base overflow-y: auto takes effect after */
     }
   }
 
@@ -17138,7 +17116,7 @@ const AgentNode = ({ data, id, onInspect })=>{
     return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(NodeContainer$2, {
         ref: nodeRef,
         onClick: handleNodeClick,
-        className: "nowheel"
+        className: "nowheel agent-node"
     }, hasIncomingEdges && /*#__PURE__*/ React.createElement(Handle$1, {
         type: "target",
         position: Position.Top,
@@ -17171,15 +17149,14 @@ const AgentNode = ({ data, id, onInspect })=>{
             cursor: "default"
         },
         isConnectable: false
-    })), /*#__PURE__*/ React.createElement(NodeDetailsPopover, {
+    }), /*#__PURE__*/ React.createElement(NodeDetailsPopover, {
         isVisible: isPopoverOpen,
         onClose: handleClosePopover,
         nodeData: {
             ...data,
             id: id
-        },
-        triggerRef: nodeRef
-    }));
+        }
+    })));
 };
 // Styled components
 const NodeContainer$2 = styled.div`
@@ -17188,9 +17165,9 @@ const NodeContainer$2 = styled.div`
   border: 2px solid ${(props)=>props.theme?.colors?.border || "hsl(214.3 31.8% 91.4%)"};
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   min-width: 300px;
+  max-width: ${NODE_MAX_WIDTH}px;
   transition: all 0.2s ease-in-out;
   position: relative;
-  cursor: pointer;
 
   &:hover {
     border-color: ${(props)=>props.theme?.colors?.primary || "hsl(221.2 83.2% 53.3%)"};
@@ -17371,15 +17348,15 @@ const ToolNode = ({ data, id, onInspect })=>{
         nodeData = {
             ...baseData,
             input: {
-                args: data.edgeDetails[0]?.input_args,
-                kwargs: data.edgeDetails[0]?.input_kwargs
+                ...data.edgeDetails[0]?.input_kwargs
             },
             output: data.edgeDetails[0]?.output,
             status: data.edgeDetails[0]?.status
         };
     }
     return /*#__PURE__*/ React.createElement(NodeContainer, {
-        onClick: handleNodeClick
+        onClick: handleNodeClick,
+        className: "nowheel"
     }, hasIncomingEdges && /*#__PURE__*/ React.createElement(Handle$1, {
         type: "target",
         position: Position.Top,
@@ -17420,6 +17397,7 @@ const NodeContainer = styled.div`
   border: 2px solid ${(props)=>props.theme?.colors?.border || "hsl(214.3 31.8% 91.4%)"};
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   min-width: 300px;
+  max-width: ${NODE_MAX_WIDTH}px;
   transition: all 0.2s ease-in-out;
   position: relative;
   cursor: pointer;
@@ -20691,7 +20669,7 @@ const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100dvw", heigh
     ]);
     // Pan to specific node when panToNodeId prop is provided
     React.useEffect(()=>{
-        if (!panToNodeId || !reactFlowInstance || disableAutoFit || nodes.length === 0) {
+        if (!panToNodeId || !reactFlowInstance || nodes.length === 0) {
             return;
         }
         // Check if the specified node ID exists in the current nodes array
@@ -20716,7 +20694,6 @@ const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100dvw", heigh
     }, [
         panToNodeId,
         reactFlowInstance,
-        disableAutoFit,
         nodes,
         defaultAutoFitDuration,
         defaultAutoFitDelay,
@@ -20852,6 +20829,7 @@ const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100dvw", heigh
         colorMode: isDarkMode ? "dark" : "light",
         nodes: nodesState,
         edges: edgesState,
+        minZoom: 0.2,
         onNodesChange: onNodesChange,
         onEdgesChange: onEdgesChange,
         onConnect: onConnect,