@railtownai/railtracks-visualizer 0.0.60 → 0.0.62

package/dist/esm/index.js

@@ -4,37 +4,35 @@ import { jsxs, Fragment, jsx as jsx$1 } from 'react/jsx-runtime';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default from 'react-dom';
 import CountUp from 'react-countup';
-import RcDrawer from '@rc-component/drawer';
-import useId$2 from '@rc-component/util/es/hooks/useId';
-import { composeRef, supportRef, getNodeRef, supportNodeRef, useComposeRef as useComposeRef$1 } from '@rc-component/util/es/ref';
-import '@rc-component/form';
+import { render, unmount } from '@rc-component/util/es/React/render';
+import { createTheme, useCacheToken, unit, useStyleRegister, StyleContext, Keyframes } from '@ant-design/cssinjs';
+import IconContext from '@ant-design/icons/es/components/Context';
 import { warning as warning$2, merge, useEvent, toArray as toArray$1, omit, useComposeRef, useControlledState } from '@rc-component/util';
-import CloseOutlined from '@ant-design/icons/es/icons/CloseOutlined';
-import pickAttrs from '@rc-component/util/es/pickAttrs';
+import useMemo$1 from '@rc-component/util/es/hooks/useMemo';
 import Pagination$1 from '@rc-component/pagination/es/locale/en_US';
-import { createTheme, useCacheToken, unit, useStyleRegister, StyleContext, Keyframes } from '@ant-design/cssinjs';
 import { generate, presetPrimaryColors, presetPalettes, gold } from '@ant-design/colors';
 import { FastColor } from '@ant-design/fast-color';
-import IconContext from '@ant-design/icons/es/components/Context';
-import useMemo$1 from '@rc-component/util/es/hooks/useMemo';
 import { UniqueProvider as UniqueProvider$1 } from '@rc-component/trigger';
 import CSSMotion, { Provider as Provider$2 } from '@rc-component/motion';
 import isEqual from '@rc-component/util/es/isEqual';
 import { genStyleUtils, mergeToken } from '@ant-design/cssinjs-utils';
-import useLayoutEffect$1 from '@rc-component/util/es/hooks/useLayoutEffect';
-import isVisible from '@rc-component/util/es/Dom/isVisible';
-import raf from '@rc-component/util/es/raf';
-import { render, unmount } from '@rc-component/util/es/React/render';
-import LoadingOutlined from '@ant-design/icons/es/icons/LoadingOutlined';
-import { Color as Color$1 } from '@rc-component/color-picker';
-import RightOutlined from '@ant-design/icons/es/icons/RightOutlined';
-import RcCollapse from '@rc-component/collapse';
 import CheckCircleFilled from '@ant-design/icons/es/icons/CheckCircleFilled';
 import CloseCircleFilled from '@ant-design/icons/es/icons/CloseCircleFilled';
 import ExclamationCircleFilled from '@ant-design/icons/es/icons/ExclamationCircleFilled';
 import InfoCircleFilled from '@ant-design/icons/es/icons/InfoCircleFilled';
+import LoadingOutlined from '@ant-design/icons/es/icons/LoadingOutlined';
 import { Notice, useNotification, NotificationProvider } from '@rc-component/notification';
+import CloseOutlined from '@ant-design/icons/es/icons/CloseOutlined';
+import pickAttrs from '@rc-component/util/es/pickAttrs';
 import RcTooltip, { Popup } from '@rc-component/tooltip';
+import '@rc-component/form';
+import { Color as Color$1 } from '@rc-component/color-picker';
+import useLayoutEffect$1 from '@rc-component/util/es/hooks/useLayoutEffect';
+import isVisible from '@rc-component/util/es/Dom/isVisible';
+import { composeRef, supportRef, getNodeRef, supportNodeRef, useComposeRef as useComposeRef$1 } from '@rc-component/util/es/ref';
+import raf from '@rc-component/util/es/raf';
+import RightOutlined from '@ant-design/icons/es/icons/RightOutlined';
+import RcCollapse from '@rc-component/collapse';
 import RcTree, { TreeNode as TreeNode$1 } from '@rc-component/tree';
 import FileOutlined from '@ant-design/icons/es/icons/FileOutlined';
 import FolderOpenOutlined from '@ant-design/icons/es/icons/FolderOpenOutlined';
@@ -56,6 +54,8 @@ import RcInput from '@rc-component/input';
 import { triggerFocus } from '@rc-component/util/es/Dom/focus';
 import CheckOutlined from '@ant-design/icons/es/icons/CheckOutlined';
 import CopyOutlined from '@ant-design/icons/es/icons/CopyOutlined';
+import RcDrawer from '@rc-component/drawer';
+import useId$2 from '@rc-component/util/es/hooks/useId';
 import RcSwitch from '@rc-component/switch';
 import RcSelect, { Option, OptGroup } from '@rc-component/select';
 import DownOutlined from '@ant-design/icons/es/icons/DownOutlined';
@@ -96,7 +96,7 @@ function cc(names) {
     return out;
 }
 
-var noop$3 = {
+var noop$2 = {
     value: ()=>{}
 };
 function dispatch() {
@@ -163,7 +163,7 @@ function get$1(type, name) {
 function set$2(type, name, callback) {
     for(var i = 0, n = type.length; i < n; ++i){
         if (type[i].name === name) {
-            type[i] = noop$3, type = type.slice(0, i).concat(type.slice(i + 1));
+            type[i] = noop$2, type = type.slice(0, i).concat(type.slice(i + 1));
             break;
         }
     }
@@ -11879,7 +11879,7 @@ function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTy
  *  />);
  *}
  *```
- */ var index$2 = fixedForwardRef(ReactFlow);
+ */ var index = fixedForwardRef(ReactFlow);
 /**
  * This hook makes it easy to prototype a controlled flow where you manage the
  * state of nodes and edges outside the `ReactFlowInstance`. You can think of it
@@ -13241,24 +13241,6 @@ const __iconNode$l = [
 const Clock = createLucideIcon("clock", __iconNode$l);
 
 const __iconNode$k = [
-    [
-        "path",
-        {
-            d: "M6 16.326A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 .5 8.973",
-            key: "1cez44"
-        }
-    ],
-    [
-        "path",
-        {
-            d: "m13 12-3 5h4l-3 5",
-            key: "1t22er"
-        }
-    ]
-];
-const CloudLightning = createLucideIcon("cloud-lightning", __iconNode$k);
-
-const __iconNode$j = [
     [
         "rect",
         {
@@ -13279,9 +13261,9 @@ const __iconNode$j = [
         }
     ]
 ];
-const Copy = createLucideIcon("copy", __iconNode$j);
+const Copy = createLucideIcon("copy", __iconNode$k);
 
-const __iconNode$i = [
+const __iconNode$j = [
     [
         "path",
         {
@@ -13389,9 +13371,9 @@ const __iconNode$i = [
         }
     ]
 ];
-const Cpu = createLucideIcon("cpu", __iconNode$i);
+const Cpu = createLucideIcon("cpu", __iconNode$j);
 
-const __iconNode$h = [
+const __iconNode$i = [
     [
         "line",
         {
@@ -13410,9 +13392,9 @@ const __iconNode$h = [
         }
     ]
 ];
-const DollarSign = createLucideIcon("dollar-sign", __iconNode$h);
+const DollarSign = createLucideIcon("dollar-sign", __iconNode$i);
 
-const __iconNode$g = [
+const __iconNode$h = [
     [
         "path",
         {
@@ -13442,9 +13424,9 @@ const __iconNode$g = [
         }
     ]
 ];
-const FileInput = createLucideIcon("file-input", __iconNode$g);
+const FileInput = createLucideIcon("file-input", __iconNode$h);
 
-const __iconNode$f = [
+const __iconNode$g = [
     [
         "path",
         {
@@ -13474,9 +13456,415 @@ const __iconNode$f = [
         }
     ]
 ];
-const FileOutput = createLucideIcon("file-output", __iconNode$f);
+const FileOutput = createLucideIcon("file-output", __iconNode$g);
+
+const __iconNode$f = [
+    [
+        "path",
+        {
+            d: "M12 22v-6",
+            key: "6o8u61"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "M12 8V2",
+            key: "1wkif3"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "M4 12H2",
+            key: "rhcxmi"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "M10 12H8",
+            key: "s88cx1"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "M16 12h-2",
+            key: "10asgb"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "M22 12h-2",
+            key: "14jgyd"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "m15 19-3-3-3 3",
+            key: "e37ymu"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "m15 5-3 3-3-3",
+            key: "19d6lf"
+        }
+    ]
+];
+const FoldVertical = createLucideIcon("fold-vertical", __iconNode$f);
 
 const __iconNode$e = [
+    [
+        "line",
+        {
+            x1: "4",
+            x2: "20",
+            y1: "9",
+            y2: "9",
+            key: "4lhtct"
+        }
+    ],
+    [
+        "line",
+        {
+            x1: "4",
+            x2: "20",
+            y1: "15",
+            y2: "15",
+            key: "vyu0kd"
+        }
+    ],
+    [
+        "line",
+        {
+            x1: "10",
+            x2: "8",
+            y1: "3",
+            y2: "21",
+            key: "1ggp8o"
+        }
+    ],
+    [
+        "line",
+        {
+            x1: "16",
+            x2: "14",
+            y1: "3",
+            y2: "21",
+            key: "weycgp"
+        }
+    ]
+];
+const Hash = createLucideIcon("hash", __iconNode$e);
+
+const __iconNode$d = [
+    [
+        "circle",
+        {
+            cx: "12",
+            cy: "12",
+            r: "10",
+            key: "1mglay"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "M12 16v-4",
+            key: "1dtifu"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "M12 8h.01",
+            key: "e9boi3"
+        }
+    ]
+];
+const Info = createLucideIcon("info", __iconNode$d);
+
+const __iconNode$c = [
+    [
+        "path",
+        {
+            d: "M13 5h8",
+            key: "a7qcls"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "M13 12h8",
+            key: "h98zly"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "M13 19h8",
+            key: "c3s6r1"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "m3 17 2 2 4-4",
+            key: "1jhpwq"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "m3 7 2 2 4-4",
+            key: "1obspn"
+        }
+    ]
+];
+const ListChecks = createLucideIcon("list-checks", __iconNode$c);
+
+const __iconNode$b = [
+    [
+        "path",
+        {
+            d: "M16 10a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 14.286V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z",
+            key: "1n2ejm"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "M20 9a2 2 0 0 1 2 2v10.286a.71.71 0 0 1-1.212.502l-2.202-2.202A2 2 0 0 0 17.172 19H10a2 2 0 0 1-2-2v-1",
+            key: "1qfcsi"
+        }
+    ]
+];
+const MessagesSquare = createLucideIcon("messages-square", __iconNode$b);
+
+const __iconNode$a = [
+    [
+        "rect",
+        {
+            width: "18",
+            height: "18",
+            x: "3",
+            y: "3",
+            rx: "2",
+            key: "afitv7"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "M9 3v18",
+            key: "fh3hqa"
+        }
+    ]
+];
+const PanelLeft = createLucideIcon("panel-left", __iconNode$a);
+
+const __iconNode$9 = [
+    [
+        "path",
+        {
+            d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8",
+            key: "v9h5vc"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "M21 3v5h-5",
+            key: "1q7to0"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16",
+            key: "3uifl3"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "M8 16H3v5",
+            key: "1cv678"
+        }
+    ]
+];
+const RefreshCw = createLucideIcon("refresh-cw", __iconNode$9);
+
+const __iconNode$8 = [
+    [
+        "path",
+        {
+            d: "M12 3v18",
+            key: "108xh3"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "m19 8 3 8a5 5 0 0 1-6 0zV7",
+            key: "zcdpyk"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "M3 7h1a17 17 0 0 0 8-2 17 17 0 0 0 8 2h1",
+            key: "1yorad"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "m5 8 3 8a5 5 0 0 1-6 0zV7",
+            key: "eua70x"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "M7 21h10",
+            key: "1b0cd5"
+        }
+    ]
+];
+const Scale = createLucideIcon("scale", __iconNode$8);
+
+const __iconNode$7 = [
+    [
+        "path",
+        {
+            d: "M14 17H5",
+            key: "gfn3mx"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "M19 7h-9",
+            key: "6i9tg"
+        }
+    ],
+    [
+        "circle",
+        {
+            cx: "17",
+            cy: "17",
+            r: "3",
+            key: "18b49y"
+        }
+    ],
+    [
+        "circle",
+        {
+            cx: "7",
+            cy: "7",
+            r: "3",
+            key: "dfmy0x"
+        }
+    ]
+];
+const Settings2 = createLucideIcon("settings-2", __iconNode$7);
+
+const __iconNode$6 = [
+    [
+        "path",
+        {
+            d: "M12 2v13",
+            key: "1km8f5"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "m16 6-4-4-4 4",
+            key: "13yo43"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8",
+            key: "1b2hhj"
+        }
+    ]
+];
+const Share = createLucideIcon("share", __iconNode$6);
+
+const __iconNode$5 = [
+    [
+        "circle",
+        {
+            cx: "12",
+            cy: "12",
+            r: "10",
+            key: "1mglay"
+        }
+    ],
+    [
+        "circle",
+        {
+            cx: "12",
+            cy: "12",
+            r: "6",
+            key: "1vlfrh"
+        }
+    ],
+    [
+        "circle",
+        {
+            cx: "12",
+            cy: "12",
+            r: "2",
+            key: "1c9p78"
+        }
+    ]
+];
+const Target = createLucideIcon("target", __iconNode$5);
+
+const __iconNode$4 = [
+    [
+        "line",
+        {
+            x1: "10",
+            x2: "14",
+            y1: "2",
+            y2: "2",
+            key: "14vaq8"
+        }
+    ],
+    [
+        "line",
+        {
+            x1: "12",
+            x2: "15",
+            y1: "14",
+            y2: "11",
+            key: "17fdiu"
+        }
+    ],
+    [
+        "circle",
+        {
+            cx: "12",
+            cy: "14",
+            r: "8",
+            key: "1e1u0o"
+        }
+    ]
+];
+const Timer = createLucideIcon("timer", __iconNode$4);
+
+const __iconNode$3 = [
     [
         "path",
         {
@@ -13522,400 +13910,39 @@ const __iconNode$e = [
     [
         "path",
         {
-            d: "m15 19-3-3-3 3",
-            key: "e37ymu"
-        }
-    ],
-    [
-        "path",
-        {
-            d: "m15 5-3 3-3-3",
-            key: "19d6lf"
-        }
-    ]
-];
-const FoldVertical = createLucideIcon("fold-vertical", __iconNode$e);
-
-const __iconNode$d = [
-    [
-        "line",
-        {
-            x1: "4",
-            x2: "20",
-            y1: "9",
-            y2: "9",
-            key: "4lhtct"
-        }
-    ],
-    [
-        "line",
-        {
-            x1: "4",
-            x2: "20",
-            y1: "15",
-            y2: "15",
-            key: "vyu0kd"
-        }
-    ],
-    [
-        "line",
-        {
-            x1: "10",
-            x2: "8",
-            y1: "3",
-            y2: "21",
-            key: "1ggp8o"
-        }
-    ],
-    [
-        "line",
-        {
-            x1: "16",
-            x2: "14",
-            y1: "3",
-            y2: "21",
-            key: "weycgp"
-        }
-    ]
-];
-const Hash = createLucideIcon("hash", __iconNode$d);
-
-const __iconNode$c = [
-    [
-        "circle",
-        {
-            cx: "12",
-            cy: "12",
-            r: "10",
-            key: "1mglay"
-        }
-    ],
-    [
-        "path",
-        {
-            d: "M12 16v-4",
-            key: "1dtifu"
-        }
-    ],
-    [
-        "path",
-        {
-            d: "M12 8h.01",
-            key: "e9boi3"
-        }
-    ]
-];
-const Info = createLucideIcon("info", __iconNode$c);
-
-const __iconNode$b = [
-    [
-        "path",
-        {
-            d: "M13 5h8",
-            key: "a7qcls"
-        }
-    ],
-    [
-        "path",
-        {
-            d: "M13 12h8",
-            key: "h98zly"
-        }
-    ],
-    [
-        "path",
-        {
-            d: "M13 19h8",
-            key: "c3s6r1"
-        }
-    ],
-    [
-        "path",
-        {
-            d: "m3 17 2 2 4-4",
-            key: "1jhpwq"
-        }
-    ],
-    [
-        "path",
-        {
-            d: "m3 7 2 2 4-4",
-            key: "1obspn"
-        }
-    ]
-];
-const ListChecks = createLucideIcon("list-checks", __iconNode$b);
-
-const __iconNode$a = [
-    [
-        "path",
-        {
-            d: "M16 10a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 14.286V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z",
-            key: "1n2ejm"
-        }
-    ],
-    [
-        "path",
-        {
-            d: "M20 9a2 2 0 0 1 2 2v10.286a.71.71 0 0 1-1.212.502l-2.202-2.202A2 2 0 0 0 17.172 19H10a2 2 0 0 1-2-2v-1",
-            key: "1qfcsi"
-        }
-    ]
-];
-const MessagesSquare = createLucideIcon("messages-square", __iconNode$a);
-
-const __iconNode$9 = [
-    [
-        "path",
-        {
-            d: "M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z",
-            key: "18887p"
-        }
-    ]
-];
-const MessageSquare = createLucideIcon("message-square", __iconNode$9);
-
-const __iconNode$8 = [
-    [
-        "rect",
-        {
-            width: "18",
-            height: "18",
-            x: "3",
-            y: "3",
-            rx: "2",
-            key: "afitv7"
-        }
-    ],
-    [
-        "path",
-        {
-            d: "M9 3v18",
-            key: "fh3hqa"
-        }
-    ]
-];
-const PanelLeft = createLucideIcon("panel-left", __iconNode$8);
-
-const __iconNode$7 = [
-    [
-        "path",
-        {
-            d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8",
-            key: "v9h5vc"
-        }
-    ],
-    [
-        "path",
-        {
-            d: "M21 3v5h-5",
-            key: "1q7to0"
-        }
-    ],
-    [
-        "path",
-        {
-            d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16",
-            key: "3uifl3"
-        }
-    ],
-    [
-        "path",
-        {
-            d: "M8 16H3v5",
-            key: "1cv678"
-        }
-    ]
-];
-const RefreshCw = createLucideIcon("refresh-cw", __iconNode$7);
-
-const __iconNode$6 = [
-    [
-        "path",
-        {
-            d: "M12 3v18",
-            key: "108xh3"
-        }
-    ],
-    [
-        "path",
-        {
-            d: "m19 8 3 8a5 5 0 0 1-6 0zV7",
-            key: "zcdpyk"
-        }
-    ],
-    [
-        "path",
-        {
-            d: "M3 7h1a17 17 0 0 0 8-2 17 17 0 0 0 8 2h1",
-            key: "1yorad"
-        }
-    ],
-    [
-        "path",
-        {
-            d: "m5 8 3 8a5 5 0 0 1-6 0zV7",
-            key: "eua70x"
+            d: "m15 19-3 3-3-3",
+            key: "11eu04"
         }
     ],
     [
         "path",
         {
-            d: "M7 21h10",
-            key: "1b0cd5"
+            d: "m15 5-3-3-3 3",
+            key: "itvq4r"
         }
     ]
 ];
-const Scale = createLucideIcon("scale", __iconNode$6);
+const UnfoldVertical = createLucideIcon("unfold-vertical", __iconNode$3);
 
-const __iconNode$5 = [
-    [
-        "path",
-        {
-            d: "M12 2v13",
-            key: "1km8f5"
-        }
-    ],
-    [
-        "path",
-        {
-            d: "m16 6-4-4-4 4",
-            key: "13yo43"
-        }
-    ],
+const __iconNode$2 = [
     [
         "path",
         {
-            d: "M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8",
-            key: "1b2hhj"
-        }
-    ]
-];
-const Share = createLucideIcon("share", __iconNode$5);
-
-const __iconNode$4 = [
-    [
-        "circle",
-        {
-            cx: "12",
-            cy: "12",
-            r: "10",
-            key: "1mglay"
-        }
-    ],
-    [
-        "circle",
-        {
-            cx: "12",
-            cy: "12",
-            r: "6",
-            key: "1vlfrh"
-        }
-    ],
-    [
-        "circle",
-        {
-            cx: "12",
-            cy: "12",
-            r: "2",
-            key: "1c9p78"
-        }
-    ]
-];
-const Target = createLucideIcon("target", __iconNode$4);
-
-const __iconNode$3 = [
-    [
-        "line",
-        {
-            x1: "10",
-            x2: "14",
-            y1: "2",
-            y2: "2",
-            key: "14vaq8"
-        }
-    ],
-    [
-        "line",
-        {
-            x1: "12",
-            x2: "15",
-            y1: "14",
-            y2: "11",
-            key: "17fdiu"
+            d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2",
+            key: "975kel"
         }
     ],
     [
         "circle",
         {
             cx: "12",
-            cy: "14",
-            r: "8",
-            key: "1e1u0o"
-        }
-    ]
-];
-const Timer = createLucideIcon("timer", __iconNode$3);
-
-const __iconNode$2 = [
-    [
-        "path",
-        {
-            d: "M12 22v-6",
-            key: "6o8u61"
-        }
-    ],
-    [
-        "path",
-        {
-            d: "M12 8V2",
-            key: "1wkif3"
-        }
-    ],
-    [
-        "path",
-        {
-            d: "M4 12H2",
-            key: "rhcxmi"
-        }
-    ],
-    [
-        "path",
-        {
-            d: "M10 12H8",
-            key: "s88cx1"
-        }
-    ],
-    [
-        "path",
-        {
-            d: "M16 12h-2",
-            key: "10asgb"
-        }
-    ],
-    [
-        "path",
-        {
-            d: "M22 12h-2",
-            key: "14jgyd"
-        }
-    ],
-    [
-        "path",
-        {
-            d: "m15 19-3 3-3-3",
-            key: "11eu04"
-        }
-    ],
-    [
-        "path",
-        {
-            d: "m15 5-3-3-3 3",
-            key: "itvq4r"
+            cy: "7",
+            r: "4",
+            key: "17ys0d"
         }
     ]
 ];
-const UnfoldVertical = createLucideIcon("unfold-vertical", __iconNode$2);
+const User = createLucideIcon("user", __iconNode$2);
 
 const __iconNode$1 = [
     [
@@ -21196,6 +21223,23 @@ function cn(...inputs) {
             return "default";
     }
 }
+/**
+ * Last timeline step for a run: max of stamp track (`stamps` / `steps`) and all node/edge stamp steps.
+ * Used so the visualizer defaults past step 0 when the graph only appears at later steps.
+ */ function getDefaultTimelineStepForRun(run) {
+    let graphMax = 0;
+    for (const node of run.nodes || []){
+        const s = node.stamp?.step;
+        if (typeof s === "number" && !Number.isNaN(s) && s > graphMax) graphMax = s;
+    }
+    for (const edge of run.edges || []){
+        const s = edge.stamp?.step;
+        if (typeof s === "number" && !Number.isNaN(s) && s > graphMax) graphMax = s;
+    }
+    const stamps = run.stamps || run.steps || [];
+    const stampMax = stamps.length > 0 ? Math.max(0, ...stamps.map((s)=>s.step)) : 0;
+    return Math.max(stampMax, graphMax);
+}
 /**
  * Formats tool calls for display in a code block
  */ const formatToolCalls = (toolCalls)=>{
@@ -21289,18 +21333,20 @@ const AppleIcon = ({ width = "1.5rem", height = "1.5rem" })=>/*#__PURE__*/ React
         viewBox: "0 0 24 24",
         role: "img",
         xmlns: "http://www.w3.org/2000/svg"
-    }, /*#__PURE__*/ React__default.createElement("title", null, "Apple"), /*#__PURE__*/ React__default.createElement("path", {
+    }, /*#__PURE__*/ React__default.createElement("title", null, "Apple"), /*#__PURE__*/ React__default.createElement("g", {
+        transform: "translate(12 12) scale(1.12) translate(-12 -12)"
+    }, /*#__PURE__*/ React__default.createElement("path", {
         d: "M18.71 19.5C17.88 20.74 17 21.95 15.66 21.97C14.32 22 13.89 21.18 12.37 21.18C10.84 21.18 10.37 21.95 9.09997 22C7.78997 22.05 6.79997 20.68 5.95997 19.47C4.24997 17 2.93997 12.45 4.69997 9.39C5.56997 7.87 7.12997 6.91 8.81997 6.88C10.1 6.86 11.32 7.75 12.11 7.75C12.89 7.75 14.37 6.68 15.92 6.84C16.57 6.87 18.39 7.1 19.56 8.82C19.47 8.88 17.39 10.1 17.41 12.63C17.44 15.65 20.06 16.66 20.09 16.67C20.06 16.74 19.67 18.11 18.71 19.5ZM13 3.5C13.73 2.67 14.94 2.04 15.94 2C16.07 3.17 15.6 4.35 14.9 5.19C14.21 6.04 13.07 6.7 11.95 6.61C11.8 5.46 12.36 4.26 13 3.5Z"
-    }));
+    })));
 
-function noop$2() {}
+function noop$1() {}
 const { resetWarned: rcResetWarned } = warning$2;
 let deprecatedWarnList = null;
 function resetWarned() {
     deprecatedWarnList = null;
     rcResetWarned();
 }
-let _warning = noop$2;
+let _warning = noop$1;
 if (process.env.NODE_ENV !== 'production') {
     _warning = (valid, component, message)=>{
         warning$2(valid, `[antd: ${component}] ${message}`);
@@ -21344,7 +21390,7 @@ const WarningContext = /*#__PURE__*/ React.createContext({});
     return typeWarning;
 } : ()=>{
     const noopWarning = ()=>{};
-    noopWarning.deprecated = noop$2;
+    noopWarning.deprecated = noop$1;
     return noopWarning;
 };
 
@@ -47171,7 +47217,7 @@ const Paragraph = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     }, children);
 });
 
-const Text$1 = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+const Text$2 = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const { ellipsis, children, ...restProps } = props;
     const mergedEllipsis = React.useMemo(()=>{
         if (ellipsis && typeof ellipsis === 'object') {
@@ -47218,162 +47264,631 @@ const Title$1 = /*#__PURE__*/ React.forwardRef((props, ref)=>{
 });
 
 const Typography = Typography$1;
-Typography.Text = Text$1;
+Typography.Text = Text$2;
 Typography.Link = Link$1;
 Typography.Title = Title$1;
 Typography.Paragraph = Paragraph;
 
-const ExpandableTextarea = ({ label, content, isExpanded, onToggle })=>{
+const MAX_TITLE_LEN = 200;
+const TOOLBAR_ICON_SIZE = 15;
+const JsonValueTree = ({ data, className, maxHeight = "auto" })=>{
     const { theme } = useTheme$1();
-    const themeColors = theme?.colors || {
-        muted: "hsl(210 40% 96%)",
-        mutedForeground: "hsl(215.4 16.3% 46.9%)",
-        border: "hsl(214.3 31.8% 91.4%)",
-        foreground: "hsl(222.2 84% 4.9%)"
-    };
-    const displayContent = isExpanded ? content : content?.slice(0, 100) + (content?.length > 100 ? "..." : "");
-    return /*#__PURE__*/ React__default.createElement(ExpandableSection, null, /*#__PURE__*/ React__default.createElement(ExpandableHeader, {
-        onClick: (e)=>{
-            e.stopPropagation();
-            onToggle(e);
-        },
-        onMouseEnter: (e)=>{
-            e.currentTarget.style.backgroundColor = themeColors.muted;
-        },
-        onMouseLeave: (e)=>{
-            e.currentTarget.style.backgroundColor = "transparent";
+    const { mutedForeground } = theme.colors;
+    const treeData = useMemo(()=>buildTreeData(data), [
+        data
+    ]);
+    const defaultExpandedKeys = useMemo(()=>collectKeysToDepth(treeData, 2), [
+        treeData
+    ]);
+    const allExpandableKeys = useMemo(()=>collectAllExpandableKeys(treeData), [
+        treeData
+    ]);
+    const [expandedKeys, setExpandedKeys] = useState(()=>defaultExpandedKeys);
+    const hasBranches = allExpandableKeys.length > 0;
+    const isAllExpanded = hasBranches && allExpandableKeys.every((k)=>expandedKeys.includes(k));
+    useEffect(()=>{
+        setExpandedKeys(defaultExpandedKeys);
+    }, [
+        defaultExpandedKeys
+    ]);
+    const handleCopyJson = useCallback(async ()=>{
+        try {
+            const text = JSON.stringify(data, null, 2);
+            await navigator.clipboard.writeText(text);
+            staticMethods.success("JSON copied to clipboard");
+        } catch  {
+            staticMethods.error("Could not copy to clipboard");
         }
-    }, /*#__PURE__*/ React__default.createElement(ExpandableLabel, null, label), /*#__PURE__*/ React__default.createElement(ChevronIcon, null, isExpanded ? /*#__PURE__*/ React__default.createElement(ChevronDown, {
+    }, [
+        data
+    ]);
+    const handleToggleExpandCollapse = useCallback(()=>{
+        if (isAllExpanded) {
+            setExpandedKeys([]);
+        } else {
+            setExpandedKeys(allExpandableKeys);
+        }
+    }, [
+        isAllExpanded,
+        allExpandableKeys
+    ]);
+    return /*#__PURE__*/ React__default.createElement("div", {
+        className: className,
         style: {
-            width: "12px",
-            height: "12px",
-            color: themeColors.mutedForeground
+            maxHeight,
+            display: "flex",
+            flexDirection: "column",
+            borderRadius: 4,
+            overflow: "hidden"
         }
-    }) : /*#__PURE__*/ React__default.createElement(ChevronRight, {
+    }, /*#__PURE__*/ React__default.createElement("div", {
         style: {
-            width: "12px",
-            height: "12px",
-            color: themeColors.mutedForeground
+            display: "flex",
+            justifyContent: "flex-end",
+            alignItems: "center",
+            gap: 2,
+            padding: "4px 6px 2px",
+            flexShrink: 0,
+            background: "transparent"
         }
-    }))), /*#__PURE__*/ React__default.createElement(ExpandableTextareaElement, {
-        onClick: (e)=>{
-            e.stopPropagation();
-        },
-        value: displayContent || "",
-        readOnly: true,
-        rows: isExpanded ? Math.max(3, Math.max(content?.split("\n").length || 0, Math.ceil((content?.length || 0) / 60))) : 2,
+    }, /*#__PURE__*/ React__default.createElement(Tooltip$1, {
+        title: "Copy JSON"
+    }, /*#__PURE__*/ React__default.createElement(Button$1, {
+        type: "text",
+        size: "small",
+        "aria-label": "Copy JSON to clipboard",
+        icon: /*#__PURE__*/ React__default.createElement(Copy, {
+            size: TOOLBAR_ICON_SIZE,
+            color: mutedForeground
+        }),
+        onClick: handleCopyJson
+    })), /*#__PURE__*/ React__default.createElement(Tooltip$1, {
+        title: isAllExpanded ? "Collapse all" : "Expand all"
+    }, /*#__PURE__*/ React__default.createElement(Button$1, {
+        type: "text",
+        size: "small",
+        "aria-label": isAllExpanded ? "Collapse all tree nodes" : "Expand all tree nodes",
+        disabled: !hasBranches,
+        icon: isAllExpanded ? /*#__PURE__*/ React__default.createElement(FoldVertical, {
+            size: TOOLBAR_ICON_SIZE,
+            color: mutedForeground
+        }) : /*#__PURE__*/ React__default.createElement(UnfoldVertical, {
+            size: TOOLBAR_ICON_SIZE,
+            color: mutedForeground
+        }),
+        onClick: handleToggleExpandCollapse
+    }))), /*#__PURE__*/ React__default.createElement("div", {
         style: {
-            border: `1px solid ${themeColors.border}`,
-            backgroundColor: themeColors.muted,
-            color: themeColors.foreground
+            flex: 1,
+            minHeight: 0,
+            overflow: "auto",
+            padding: "4px 0"
         }
-    }));
+    }, /*#__PURE__*/ React__default.createElement(Tree, {
+        // No showLine — connector lines look like a floating spine for many top-level fields.
+        showLine: true,
+        blockNode: true,
+        expandAction: "click",
+        selectable: false,
+        showIcon: false,
+        treeData: treeData,
+        expandedKeys: expandedKeys,
+        onExpand: (keys)=>setExpandedKeys(keys),
+        rootStyle: {
+            backgroundColor: "transparent",
+            padding: "0 4px"
+        }
+    })));
 };
-// Styled components
-const ExpandableSection = styled.div`
-  width: 100%;
-`;
-const ExpandableHeader = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.25rem 0;
-  cursor: pointer;
-  user-select: none;
-  border-radius: 0.25rem;
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
-
-  &:hover {
-    background-color: transparent;
-  }
-`;
-const ExpandableLabel = styled.span`
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: ${(props)=>props.theme?.colors?.foreground || "hsl(222.2 84% 4.9%)"};
-`;
-const ExpandableTextareaElement = styled.textarea`
-  box-sizing: border-box;
-  width: 100%;
-  border-radius: 0.25rem;
-  padding: 0.5rem;
-  resize: none;
-  min-height: 40px;
-  font-family: inherit;
-
-  &:focus {
-    outline: none;
-    border-color: ${(props)=>props.theme?.colors?.primary || "hsl(221.2 83.2% 53.3%)"};
-    box-shadow: 0 0 0 1px ${(props)=>props.theme?.colors?.primary || "hsl(221.2 83.2% 53.3%)"};
-  }
-
-  transition: all 0.2s ease-in-out;
-`;
-const ChevronIcon = styled.div`
-  transition: transform 0.2s ease-in-out;
-`;
+function collectKeysToDepth(nodes, maxDepth, depth = 0) {
+    if (depth >= maxDepth) return [];
+    const keys = [];
+    for (const n of nodes){
+        if (n.children && n.children.length > 0) {
+            keys.push(n.key);
+            keys.push(...collectKeysToDepth(n.children, maxDepth, depth + 1));
+        }
+    }
+    return keys;
+}
+function collectAllExpandableKeys(nodes) {
+    const keys = [];
+    for (const n of nodes){
+        if (n.children && n.children.length > 0) {
+            keys.push(n.key);
+            keys.push(...collectAllExpandableKeys(n.children));
+        }
+    }
+    return keys;
+}
+/**
+ * Object keys A→Z, but any property whose value is an array is listed after all non-array properties
+ * (each block still A→Z). Tree has no built-in sort — this defines `treeData` order.
+ */ function sortObjectEntriesForTree(entries) {
+    return [
+        ...entries
+    ].sort((a, b)=>{
+        const aArr = Array.isArray(a[1]);
+        const bArr = Array.isArray(b[1]);
+        if (aArr !== bArr) {
+            return aArr ? 1 : -1;
+        }
+        return a[0].localeCompare(b[0], undefined, {
+            sensitivity: "base",
+            numeric: true
+        });
+    });
+}
+function valueToTreeNodes(value, path) {
+    if (value === null || value === undefined) {
+        return [
+            {
+                key: path,
+                title: formatJsonTreePrimitive(value),
+                isLeaf: true
+            }
+        ];
+    }
+    if (Array.isArray(value)) {
+        if (value.length === 0) {
+            return [
+                {
+                    key: `${path}.__empty_arr__`,
+                    title: "[] (0 items)",
+                    isLeaf: true
+                }
+            ];
+        }
+        return value.map((item, i)=>{
+            const seg = `[${i}]`;
+            const childPath = `${path}.${escapeDotPathSegment(seg)}`;
+            if (item === null || item === undefined || typeof item !== "object") {
+                return {
+                    key: childPath,
+                    title: `${seg}: ${formatJsonTreePrimitive(item)}`,
+                    isLeaf: true
+                };
+            }
+            if (Array.isArray(item) || isPlainObject(item)) {
+                const children = valueToTreeNodes(item, childPath);
+                return {
+                    key: childPath,
+                    title: `${seg} (${Array.isArray(item) ? `Array(${item.length})` : `Object(${Object.keys(item).length})`})`,
+                    children
+                };
+            }
+            return {
+                key: childPath,
+                title: `${seg}: ${formatJsonTreePrimitive(item)}`,
+                isLeaf: true
+            };
+        });
+    }
+    if (isPlainObject(value)) {
+        const entries = sortObjectEntriesForTree(Object.entries(value));
+        if (entries.length === 0) {
+            return [
+                {
+                    key: `${path}.__empty_obj__`,
+                    title: "{} (0 keys)",
+                    isLeaf: true
+                }
+            ];
+        }
+        return entries.map(([k, v])=>{
+            const childPath = `${path}.${escapeDotPathSegment(k)}`;
+            if (v === null || v === undefined || typeof v !== "object") {
+                const text = `${k}: ${formatJsonTreePrimitive(v)}`;
+                const title = text.length > MAX_TITLE_LEN ? /*#__PURE__*/ React__default.createElement(Tooltip$1, {
+                    title: text
+                }, /*#__PURE__*/ React__default.createElement("span", null, text.slice(0, MAX_TITLE_LEN), "…")) : text;
+                return {
+                    key: childPath,
+                    title,
+                    isLeaf: true
+                };
+            }
+            if (Array.isArray(v) || isPlainObject(v)) {
+                const children = valueToTreeNodes(v, childPath);
+                const summary = Array.isArray(v) ? `Array(${v.length})` : `Object(${Object.keys(v).length})`;
+                return {
+                    key: childPath,
+                    title: `${k}: ${summary}`,
+                    children
+                };
+            }
+            const text = `${k}: ${formatJsonTreePrimitive(v)}`;
+            return {
+                key: childPath,
+                title: text.length > MAX_TITLE_LEN ? /*#__PURE__*/ React__default.createElement(Tooltip$1, {
+                    title: text
+                }, /*#__PURE__*/ React__default.createElement("span", null, text.slice(0, MAX_TITLE_LEN), "…")) : text,
+                isLeaf: true
+            };
+        });
+    }
+    const text = formatJsonTreePrimitive(value);
+    return [
+        {
+            key: path,
+            title: text.length > MAX_TITLE_LEN ? /*#__PURE__*/ React__default.createElement(Tooltip$1, {
+                title: text
+            }, /*#__PURE__*/ React__default.createElement("span", null, text.slice(0, MAX_TITLE_LEN), "…")) : text,
+            isLeaf: true
+        }
+    ];
+}
+/** Top-level tree for tabular session output: plain object or array of plain objects. */ function buildTreeData(data) {
+    if (data === null || data === undefined) {
+        return [
+            {
+                key: "root",
+                title: String(data),
+                isLeaf: true
+            }
+        ];
+    }
+    if (Array.isArray(data)) {
+        if (data.length === 0) {
+            return [
+                {
+                    key: "$top",
+                    title: "Array (0 items)",
+                    isLeaf: true
+                }
+            ];
+        }
+        const children = data.map((item, index)=>{
+            const path = `$root[${index}]`;
+            if (!isPlainObject(item)) {
+                return {
+                    key: path,
+                    title: `[${index}]: ${formatJsonTreePrimitive(item)}`,
+                    isLeaf: true
+                };
+            }
+            const itemChildren = valueToTreeNodes(item, path);
+            return {
+                key: path,
+                title: `[${index}] (${Object.keys(item).length} keys)`,
+                children: itemChildren
+            };
+        });
+        return [
+            {
+                key: "$top",
+                title: `Array (${data.length} items)`,
+                children
+            }
+        ];
+    }
+    if (isPlainObject(data)) {
+        const objectKeys = Object.keys(data);
+        if (objectKeys.length === 0) {
+            return [
+                {
+                    key: "$top",
+                    title: "Object (0 keys)",
+                    isLeaf: true
+                }
+            ];
+        }
+        const children = valueToTreeNodes(data, "$root");
+        return [
+            {
+                key: "$top",
+                title: `Object (${objectKeys.length} keys)`,
+                children
+            }
+        ];
+    }
+    return valueToTreeNodes(data, "$root");
+}
 
-const CodeBlock = ({ content, language = "text", showHeader = false })=>{
-    const { theme } = useTheme$1();
-    const themeColors = theme?.colors || {
-        muted: "hsl(210 40% 96%)",
-        mutedForeground: "hsl(215.4 16.3% 46.9%)",
-        border: "hsl(214.3 31.8% 91.4%)",
-        foreground: "hsl(222.2 84% 4.9%)",
-        background: "hsl(0 0% 100%)"
+const { Text: Text$1 } = Typography;
+function themedCodeSurface(theme) {
+    return {
+        background: theme.colors.muted,
+        border: `1px solid ${theme.colors.border}`,
+        borderRadius: theme.borderRadius.sm,
+        color: theme.colors.foreground,
+        padding: `calc(${theme.spacing.sm} + ${theme.spacing.xs})`
     };
-    return /*#__PURE__*/ React__default.createElement(CodeBlockContainer, {
+}
+function formatContentAsText(content) {
+    if (typeof content === "string") {
+        return content;
+    }
+    if (Array.isArray(content)) {
+        return content.map((item)=>formatContentAsText(item)).join("\n\n");
+    }
+    return JSON.stringify(content, null, 2);
+}
+function isTabularData(data) {
+    if (data === null || data === undefined) {
+        return false;
+    }
+    if (typeof data === "object" && !Array.isArray(data) && data.constructor === Object) {
+        return true;
+    }
+    if (Array.isArray(data) && data.length > 0) {
+        return data.every((item)=>item !== null && item !== undefined && typeof item === "object" && !Array.isArray(item) && item.constructor === Object);
+    }
+    return false;
+}
+function getRoleDisplayName(role) {
+    return role.charAt(0).toUpperCase() + role.slice(1);
+}
+function formatOutputAsText(output, toolOutput) {
+    if (toolOutput !== null && toolOutput !== undefined) {
+        return formatContentAsText(toolOutput);
+    }
+    if (output) {
+        const role = getRoleDisplayName(output.role);
+        const content = formatContentAsText(output.content);
+        return `${role}:\n${content}`;
+    }
+    return "";
+}
+const ROLE_ICON_SIZE = 14;
+function getRoleIcon(role) {
+    const iconProps = {
+        size: ROLE_ICON_SIZE,
+        strokeWidth: 2,
+        "aria-hidden": true
+    };
+    switch(role.toLowerCase()){
+        case "system":
+            return /*#__PURE__*/ React__default.createElement(Settings2, iconProps);
+        case "user":
+            return /*#__PURE__*/ React__default.createElement(User, iconProps);
+        case "assistant":
+            return /*#__PURE__*/ React__default.createElement(Bot, iconProps);
+        case "tool":
+            return /*#__PURE__*/ React__default.createElement(Wrench, iconProps);
+        default:
+            return /*#__PURE__*/ React__default.createElement(Wrench, iconProps);
+    }
+}
+function renderContentForDisplay(content) {
+    if (typeof content === "string") {
+        return content;
+    }
+    return JSON.stringify(content, null, 2);
+}
+function filterKeysWithName(obj) {
+    if (obj === null || obj === undefined) return obj;
+    if (typeof obj !== "object") return obj;
+    if (Array.isArray(obj)) return obj.map(filterKeysWithName);
+    return Object.fromEntries(Object.entries(obj).filter(([key])=>!key.toLowerCase().includes("name")).map(([key, value])=>[
+            key,
+            filterKeysWithName(value)
+        ]));
+}
+const LLMInputsRenderer = ({ input, modelProvider, modelName, toolStatusMap })=>{
+    const { theme } = useTheme$1();
+    if (!input || input.length === 0) return null;
+    const collapseItems = input.map((item, index)=>{
+        const modelIcon = modelProvider || modelName ? getNodeIcon({
+            modelProvider,
+            modelName
+        }) : null;
+        const isSystemInput = item.role.toLowerCase() === "system";
+        const showModelInfo = isSystemInput && (modelProvider || modelName);
+        const isToolInput = item.role.toLowerCase() === "tool";
+        const isAssistantInput = item.role.toLowerCase() === "assistant";
+        const isUserInput = item.role.toLowerCase() === "user";
+        const toolName = isToolInput && item.content?.name ? item.content.name : null;
+        const toolStatus = toolName && toolStatusMap ? toolStatusMap.get(toolName) : undefined;
+        let assistantToolName = null;
+        if (isAssistantInput && Array.isArray(item.content) && item.content.length > 0) {
+            const firstToolCall = item.content[0];
+            if (firstToolCall?.name) {
+                assistantToolName = firstToolCall.name;
+            }
+        }
+        const roleLabel = toolName ? `Tool` : assistantToolName ? `Assistant` : getRoleDisplayName(item.role);
+        return {
+            key: `input-${index}`,
+            label: /*#__PURE__*/ React__default.createElement(Text$1, {
+                strong: true,
+                style: {
+                    display: "inline-flex",
+                    alignItems: "center",
+                    lineHeight: 1.35,
+                    color: theme.colors.foreground
+                }
+            }, /*#__PURE__*/ React__default.createElement("span", {
+                style: {
+                    display: "inline-flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    flexShrink: 0,
+                    lineHeight: 0,
+                    color: theme.colors.foreground
+                }
+            }, getRoleIcon(item.role)), /*#__PURE__*/ React__default.createElement("span", {
+                style: {
+                    display: "inline-flex",
+                    alignItems: "center",
+                    marginLeft: theme.spacing.sm
+                }
+            }, roleLabel)),
+            extra: showModelInfo ? /*#__PURE__*/ React__default.createElement(Space, {
+                size: "small"
+            }, modelIcon && /*#__PURE__*/ React__default.createElement("span", null, modelIcon), modelName && /*#__PURE__*/ React__default.createElement("span", {
+                style: {
+                    fontSize: theme.fontSize.xs,
+                    color: theme.colors.mutedForeground
+                }
+            }, getModelLabel(modelName))) : isToolInput ? /*#__PURE__*/ React__default.createElement(Tag, {
+                color: toolStatus === "Failed" ? "red" : "blue"
+            }, toolName || "Tool Response") : isUserInput ? /*#__PURE__*/ React__default.createElement(Tag, {
+                color: "purple"
+            }, "Text") : undefined,
+            children: /*#__PURE__*/ React__default.createElement("pre", {
+                style: {
+                    margin: 0,
+                    ...themedCodeSurface(theme),
+                    whiteSpace: "pre-wrap",
+                    wordWrap: "break-word",
+                    fontFamily: "monospace",
+                    fontSize: theme.fontSize.xs,
+                    lineHeight: 1.5,
+                    maxHeight: "300px",
+                    overflow: "auto"
+                }
+            }, renderContentForDisplay(typeof item.content === "object" && item.content !== null && !Array.isArray(item.content) ? filterKeysWithName(item.content) : item.content))
+        };
+    });
+    return /*#__PURE__*/ React__default.createElement(Collapse$1, {
+        items: collapseItems,
+        expandIcon: ()=>null,
+        defaultActiveKey: collapseItems.length > 0 ? [
+            collapseItems[0].key
+        ] : [],
         style: {
-            width: "100%",
-            border: `1px solid ${themeColors.border}`,
-            backgroundColor: themeColors.muted,
-            color: themeColors.foreground
+            background: "transparent",
+            padding: 0,
+            margin: 0
         }
-    }, showHeader && /*#__PURE__*/ React__default.createElement(CodeBlockHeader, {
+    });
+};
+function getToolInputText(inputs) {
+    if (inputs.length === 0) return "";
+    const first = inputs[0].content;
+    return renderContentForDisplay(typeof first === "object" && first !== null && !Array.isArray(first) ? filterKeysWithName(first) : first);
+}
+const InputsOutputsCollapse = ({ inputs, output, toolOutput, modelProvider, modelName, toolStatusMap, toolInputAsTextarea = false, largeInputsTitle = false, hasInputs: hasInputsProp })=>{
+    const { theme } = useTheme$1();
+    const hasInputs = hasInputsProp ?? inputs.length > 0;
+    const hasOutputs = output !== null || toolOutput !== null;
+    const outputsText = hasOutputs ? formatOutputAsText(output, toolOutput) : "";
+    const isToolOutputTabular = toolOutput !== null && toolOutput !== undefined && isTabularData(toolOutput);
+    const toolInputText = getToolInputText(inputs);
+    const inputsLabel = largeInputsTitle ? /*#__PURE__*/ React__default.createElement("div", {
         style: {
-            borderBottom: `1px solid ${themeColors.border}`,
-            backgroundColor: themeColors.background
+            display: "flex",
+            alignItems: "center",
+            gap: theme.spacing.sm
         }
-    }, /*#__PURE__*/ React__default.createElement(CodeBlockLanguage, {
+    }, /*#__PURE__*/ React__default.createElement(Typography.Title, {
+        level: 2,
         style: {
-            color: themeColors.mutedForeground
+            margin: 0,
+            color: theme.colors.foreground
         }
-    }, language)), /*#__PURE__*/ React__default.createElement(CodeBlockContent, {
+    }, "Inputs"), hasInputs && /*#__PURE__*/ React__default.createElement("span", {
         style: {
-            color: themeColors.foreground
+            display: "inline-flex",
+            alignItems: "center",
+            gap: theme.spacing.xs,
+            color: theme.colors.mutedForeground
         }
-    }, content));
+    }, /*#__PURE__*/ React__default.createElement(MessagesSquare, {
+        size: 12,
+        color: theme.colors.mutedForeground,
+        strokeWidth: 2
+    }), inputs.length)) : /*#__PURE__*/ React__default.createElement("div", {
+        style: {
+            display: "flex",
+            alignItems: "center",
+            gap: theme.spacing.sm
+        }
+    }, /*#__PURE__*/ React__default.createElement(Text$1, {
+        strong: true,
+        style: {
+            color: theme.colors.foreground
+        }
+    }, "Inputs"), hasInputs && /*#__PURE__*/ React__default.createElement("span", {
+        style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: theme.spacing.xs,
+            color: theme.colors.mutedForeground
+        }
+    }, /*#__PURE__*/ React__default.createElement(MessagesSquare, {
+        size: 12,
+        color: theme.colors.mutedForeground,
+        strokeWidth: 2
+    }), inputs.length));
+    const textareaStyle = {
+        width: "100%",
+        minHeight: "200px",
+        resize: "vertical",
+        fontFamily: "monospace",
+        fontSize: theme.fontSize.xs,
+        lineHeight: 1.5,
+        ...themedCodeSurface(theme)
+    };
+    const outputPreStyle = {
+        margin: 0,
+        ...themedCodeSurface(theme),
+        whiteSpace: "pre-wrap",
+        wordWrap: "break-word",
+        fontFamily: "inherit",
+        fontSize: theme.fontSize.sm,
+        lineHeight: 1.5
+    };
+    const collapseItems = [
+        {
+            key: "inputs",
+            label: inputsLabel,
+            children: hasInputs ? toolInputAsTextarea ? /*#__PURE__*/ React__default.createElement("textarea", {
+                readOnly: true,
+                value: toolInputText,
+                style: textareaStyle
+            }) : /*#__PURE__*/ React__default.createElement(LLMInputsRenderer, {
+                input: inputs,
+                modelProvider: modelProvider,
+                modelName: modelName,
+                toolStatusMap: toolStatusMap
+            }) : /*#__PURE__*/ React__default.createElement(Empty, {
+                description: "No inputs available"
+            })
+        },
+        {
+            key: "outputs",
+            label: /*#__PURE__*/ React__default.createElement(Text$1, {
+                strong: true,
+                style: {
+                    color: theme.colors.foreground
+                }
+            }, "Outputs"),
+            children: hasOutputs ? isToolOutputTabular ? /*#__PURE__*/ React__default.createElement(JsonValueTree, {
+                data: toolOutput
+            }) : /*#__PURE__*/ React__default.createElement("pre", {
+                style: outputPreStyle
+            }, outputsText) : /*#__PURE__*/ React__default.createElement("div", {
+                style: {
+                    padding: theme.spacing.md
+                }
+            }, /*#__PURE__*/ React__default.createElement(Empty, {
+                description: "No outputs available"
+            }))
+        }
+    ];
+    return /*#__PURE__*/ React__default.createElement(Collapse$1, {
+        ghost: true,
+        bordered: false,
+        items: collapseItems,
+        defaultActiveKey: [
+            "inputs",
+            "outputs"
+        ],
+        style: {
+            background: "transparent",
+            padding: 0,
+            margin: 0
+        },
+        styles: {
+            header: {
+                paddingLeft: 0,
+                color: theme.colors.foreground
+            }
+        }
+    });
 };
-const CodeBlockContainer = styled.div`
-  box-sizing: border-box;
-  border-radius: 0.375rem;
-  overflow: hidden;
-  font-family: monospace;
-  font-size: 0.75rem;
-  line-height: 1.4;
-  max-height: 150px;
-  overflow-y: auto;
-`;
-const CodeBlockHeader = styled.div`
-  padding: 0.5rem 0.75rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-`;
-const CodeBlockLanguage = styled.span`
-  font-size: 0.625rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-`;
-const CodeBlockContent = styled.pre`
-  margin: 0;
-  padding: 0.75rem;
-  white-space: pre-wrap;
-  word-break: break-word;
-  overflow-x: auto;
-`;
 
 // Styled Components
 const TreeNodeContainer = styled.div``;
@@ -47641,485 +48156,6 @@ const JsonTreeViewer = ({ data, maxDepth = 4, initialExpanded = false, expanded
     })()));
 };
 
-/** Max width for rich content (drawer output blocks, etc.) */ const NODE_MAX_WIDTH = 500;
-/** Compact xyflow node card width range */ const FLOW_NODE_MIN_WIDTH = 176;
-const FLOW_NODE_MAX_WIDTH = 250;
-/** Used by auto-layout horizontal spacing (~typical card width between min and max) */ const LAYOUT_NODE_WIDTH = Math.round((FLOW_NODE_MIN_WIDTH + FLOW_NODE_MAX_WIDTH) / 2);
-
-const OutputRenderer = ({ data })=>{
-    const [isExpanded, setIsExpanded] = useState(false);
-    const contentType = detectContentType(data);
-    const handleToggle = ()=>{
-        setIsExpanded(!isExpanded);
-    };
-    switch(contentType){
-        case "string":
-            return /*#__PURE__*/ React__default.createElement(OutputScrollableContent, {
-                className: "agent-node-scrollable"
-            }, /*#__PURE__*/ React__default.createElement(ExpandableTextarea, {
-                label: "Output",
-                content: data.content,
-                isExpanded: isExpanded,
-                onToggle: handleToggle
-            }));
-        case "toolResponse":
-            return /*#__PURE__*/ React__default.createElement(OutputScrollableContent, {
-                className: "agent-node-scrollable"
-            }, /*#__PURE__*/ React__default.createElement(NodeSubHeader, null, "Output - Tool Response"), /*#__PURE__*/ React__default.createElement(JsonTreeViewer, {
-                data: data,
-                expanded: true
-            }));
-        case "toolCallList":
-            const formattedCode = formatToolCalls(data.content);
-            return /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, /*#__PURE__*/ React__default.createElement(OutputScrollableContent, {
-                className: "agent-node-scrollable"
-            }, /*#__PURE__*/ React__default.createElement(NodeSubHeader, null, /*#__PURE__*/ React__default.createElement("span", null, "Output - Tool Calls"), /*#__PURE__*/ React__default.createElement("span", {
-                style: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "0.25rem"
-                }
-            }, /*#__PURE__*/ React__default.createElement(CloudLightning, {
-                size: 14
-            }), data.content.length)), /*#__PURE__*/ React__default.createElement(CodeBlock, {
-                content: formattedCode,
-                language: "tool-calls",
-                showHeader: false
-            })));
-        case "other":
-        default:
-            return /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, /*#__PURE__*/ React__default.createElement(OutputScrollableContent, null, /*#__PURE__*/ React__default.createElement(NodeSubHeader, null, "Output - JSON"), /*#__PURE__*/ React__default.createElement(JsonTreeViewer, {
-                data: data,
-                expanded: true
-            })));
-    }
-};
-// Styled component for the sub-header
-const NodeSubHeader = styled.span`
-  margin: 0;
-  padding: 0;
-  font-size: 0.75rem;
-  font-weight: 500;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  color: ${(props)=>props.theme?.colors?.foreground || "hsl(222.2 84% 4.9%)"};
-
-  & span {
-    color: ${(props)=>props.theme?.colors?.mutedForeground || "hsl(215.4 16.3% 46.9%)"};
-  }
-`;
-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;
-`;
-
-function _objectWithoutPropertiesLoose(r, e) {
-    if (null == r) return {};
-    var t = {};
-    for(var n in r)if (({}).hasOwnProperty.call(r, n)) {
-        if (-1 !== e.indexOf(n)) continue;
-        t[n] = r[n];
-    }
-    return t;
-}
-
-var index$1 = useLayoutEffect;
-
-var useLatest = function useLatest(value) {
-    var ref = React__default.useRef(value);
-    index$1(function() {
-        ref.current = value;
-    });
-    return ref;
-};
-
-// basically Exclude<React.ClassAttributes<T>["ref"], string>
-var updateRef = function updateRef(ref, value) {
-    if (typeof ref === 'function') {
-        ref(value);
-        return;
-    }
-    ref.current = value;
-};
-var useComposedRef = function useComposedRef(libRef, userRef) {
-    var prevUserRef = React__default.useRef();
-    return React__default.useCallback(function(instance) {
-        libRef.current = instance;
-        if (prevUserRef.current) {
-            updateRef(prevUserRef.current, null);
-        }
-        prevUserRef.current = userRef;
-        if (!userRef) {
-            return;
-        }
-        updateRef(userRef, instance);
-    }, [
-        userRef
-    ]);
-};
-
-var HIDDEN_TEXTAREA_STYLE = {
-    'min-height': '0',
-    'max-height': 'none',
-    height: '0',
-    visibility: 'hidden',
-    overflow: 'hidden',
-    position: 'absolute',
-    'z-index': '-1000',
-    top: '0',
-    right: '0',
-    display: 'block'
-};
-var forceHiddenStyles = function forceHiddenStyles(node) {
-    Object.keys(HIDDEN_TEXTAREA_STYLE).forEach(function(key) {
-        node.style.setProperty(key, HIDDEN_TEXTAREA_STYLE[key], 'important');
-    });
-};
-var forceHiddenStyles$1 = forceHiddenStyles;
-var hiddenTextarea = null;
-var getHeight = function getHeight(node, sizingData) {
-    var height = node.scrollHeight;
-    if (sizingData.sizingStyle.boxSizing === 'border-box') {
-        // border-box: add border, since height = content + padding + border
-        return height + sizingData.borderSize;
-    }
-    // remove padding, since height = content
-    return height - sizingData.paddingSize;
-};
-function calculateNodeHeight(sizingData, value, minRows, maxRows) {
-    if (minRows === void 0) {
-        minRows = 1;
-    }
-    if (maxRows === void 0) {
-        maxRows = Infinity;
-    }
-    if (!hiddenTextarea) {
-        hiddenTextarea = document.createElement('textarea');
-        hiddenTextarea.setAttribute('tabindex', '-1');
-        hiddenTextarea.setAttribute('aria-hidden', 'true');
-        forceHiddenStyles$1(hiddenTextarea);
-    }
-    if (hiddenTextarea.parentNode === null) {
-        document.body.appendChild(hiddenTextarea);
-    }
-    var paddingSize = sizingData.paddingSize, borderSize = sizingData.borderSize, sizingStyle = sizingData.sizingStyle;
-    var boxSizing = sizingStyle.boxSizing;
-    Object.keys(sizingStyle).forEach(function(_key) {
-        var key = _key;
-        hiddenTextarea.style[key] = sizingStyle[key];
-    });
-    forceHiddenStyles$1(hiddenTextarea);
-    hiddenTextarea.value = value;
-    var height = getHeight(hiddenTextarea, sizingData);
-    // Double set and calc due to Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1795904
-    hiddenTextarea.value = value;
-    height = getHeight(hiddenTextarea, sizingData);
-    // measure height of a textarea with a single row
-    hiddenTextarea.value = 'x';
-    var rowHeight = hiddenTextarea.scrollHeight - paddingSize;
-    var minHeight = rowHeight * minRows;
-    if (boxSizing === 'border-box') {
-        minHeight = minHeight + paddingSize + borderSize;
-    }
-    height = Math.max(minHeight, height);
-    var maxHeight = rowHeight * maxRows;
-    if (boxSizing === 'border-box') {
-        maxHeight = maxHeight + paddingSize + borderSize;
-    }
-    height = Math.min(maxHeight, height);
-    return [
-        height,
-        rowHeight
-    ];
-}
-var noop$1 = function noop() {};
-var pick = function pick(props, obj) {
-    return props.reduce(function(acc, prop) {
-        acc[prop] = obj[prop];
-        return acc;
-    }, {});
-};
-var SIZING_STYLE = [
-    'borderBottomWidth',
-    'borderLeftWidth',
-    'borderRightWidth',
-    'borderTopWidth',
-    'boxSizing',
-    'fontFamily',
-    'fontSize',
-    'fontStyle',
-    'fontWeight',
-    'letterSpacing',
-    'lineHeight',
-    'paddingBottom',
-    'paddingLeft',
-    'paddingRight',
-    'paddingTop',
-    // non-standard
-    'tabSize',
-    'textIndent',
-    // non-standard
-    'textRendering',
-    'textTransform',
-    'width',
-    'wordBreak',
-    'wordSpacing',
-    'scrollbarGutter'
-];
-var isIE = !!document.documentElement.currentStyle;
-var getSizingData = function getSizingData(node) {
-    var style = window.getComputedStyle(node);
-    if (style === null) {
-        return null;
-    }
-    var sizingStyle = pick(SIZING_STYLE, style);
-    var boxSizing = sizingStyle.boxSizing;
-    // probably node is detached from DOM, can't read computed dimensions
-    if (boxSizing === '') {
-        return null;
-    }
-    // IE (Edge has already correct behaviour) returns content width as computed width
-    // so we need to add manually padding and border widths
-    if (isIE && boxSizing === 'border-box') {
-        sizingStyle.width = parseFloat(sizingStyle.width) + parseFloat(sizingStyle.borderRightWidth) + parseFloat(sizingStyle.borderLeftWidth) + parseFloat(sizingStyle.paddingRight) + parseFloat(sizingStyle.paddingLeft) + 'px';
-    }
-    var paddingSize = parseFloat(sizingStyle.paddingBottom) + parseFloat(sizingStyle.paddingTop);
-    var borderSize = parseFloat(sizingStyle.borderBottomWidth) + parseFloat(sizingStyle.borderTopWidth);
-    return {
-        sizingStyle: sizingStyle,
-        paddingSize: paddingSize,
-        borderSize: borderSize
-    };
-};
-var getSizingData$1 = getSizingData;
-function useListener(target, type, listener) {
-    var latestListener = useLatest(listener);
-    React.useLayoutEffect(function() {
-        var handler = function handler(ev) {
-            return latestListener.current(ev);
-        };
-        // might happen if document.fonts is not defined, for instance
-        if (!target) {
-            return;
-        }
-        target.addEventListener(type, handler);
-        return function() {
-            return target.removeEventListener(type, handler);
-        };
-    }, []);
-}
-var useFormResetListener = function useFormResetListener(libRef, listener) {
-    useListener(document.body, 'reset', function(ev) {
-        if (libRef.current.form === ev.target) {
-            listener(ev);
-        }
-    });
-};
-var useWindowResizeListener = function useWindowResizeListener(listener) {
-    useListener(window, 'resize', listener);
-};
-var useFontsLoadedListener = function useFontsLoadedListener(listener) {
-    useListener(document.fonts, 'loadingdone', listener);
-};
-var _excluded = [
-    "cacheMeasurements",
-    "maxRows",
-    "minRows",
-    "onChange",
-    "onHeightChange"
-];
-var TextareaAutosize = function TextareaAutosize(_ref, userRef) {
-    var cacheMeasurements = _ref.cacheMeasurements, maxRows = _ref.maxRows, minRows = _ref.minRows, _ref$onChange = _ref.onChange, onChange = _ref$onChange === void 0 ? noop$1 : _ref$onChange, _ref$onHeightChange = _ref.onHeightChange, onHeightChange = _ref$onHeightChange === void 0 ? noop$1 : _ref$onHeightChange, props = _objectWithoutPropertiesLoose(_ref, _excluded);
-    var isControlled = props.value !== undefined;
-    var libRef = React.useRef(null);
-    var ref = useComposedRef(libRef, userRef);
-    var heightRef = React.useRef(0);
-    var measurementsCacheRef = React.useRef();
-    var resizeTextarea = function resizeTextarea() {
-        var node = libRef.current;
-        var nodeSizingData = cacheMeasurements && measurementsCacheRef.current ? measurementsCacheRef.current : getSizingData$1(node);
-        if (!nodeSizingData) {
-            return;
-        }
-        measurementsCacheRef.current = nodeSizingData;
-        var _calculateNodeHeight = calculateNodeHeight(nodeSizingData, node.value || node.placeholder || 'x', minRows, maxRows), height = _calculateNodeHeight[0], rowHeight = _calculateNodeHeight[1];
-        if (heightRef.current !== height) {
-            heightRef.current = height;
-            node.style.setProperty('height', height + "px", 'important');
-            onHeightChange(height, {
-                rowHeight: rowHeight
-            });
-        }
-    };
-    var handleChange = function handleChange(event) {
-        if (!isControlled) {
-            resizeTextarea();
-        }
-        onChange(event);
-    };
-    {
-        React.useLayoutEffect(resizeTextarea);
-        useFormResetListener(libRef, function() {
-            if (!isControlled) {
-                var currentValue = libRef.current.value;
-                requestAnimationFrame(function() {
-                    var node = libRef.current;
-                    if (node && currentValue !== node.value) {
-                        resizeTextarea();
-                    }
-                });
-            }
-        });
-        useWindowResizeListener(resizeTextarea);
-        useFontsLoadedListener(resizeTextarea);
-        return /*#__PURE__*/ React.createElement("textarea", _extends$1({}, props, {
-            onChange: handleChange,
-            ref: ref
-        }));
-    }
-};
-var index = /* #__PURE__ */ React.forwardRef(TextareaAutosize);
-
-// Helper function to get emoji for role
-const getRoleEmoji$1 = (role)=>{
-    switch(role.toLowerCase()){
-        case "system":
-            return "⚙️";
-        case "user":
-            return "👤";
-        case "assistant":
-            return "🤖";
-        case "tool":
-            return "🔧";
-        default:
-            return "🔧"; // fallback
-    }
-};
-// Helper function to get display name for role
-const getRoleDisplayName$1 = (role)=>{
-    return role.charAt(0).toUpperCase() + role.slice(1);
-};
-// Component to render input array
-const InputArrayRenderer = ({ input })=>{
-    const { theme } = useTheme$1();
-    const themeColors = theme?.colors || {
-        muted: "hsl(210 40% 96%)",
-        border: "hsl(214.3 31.8% 91.4%)",
-        foreground: "hsl(222.2 84% 4.9%)"
-    };
-    if (!input || input.length === 0) return null;
-    const renderContent = (content)=>{
-        if (typeof content === "string") {
-            return content;
-        }
-        return JSON.stringify(content);
-    };
-    return /*#__PURE__*/ React__default.createElement(InputArrayContainer, null, /*#__PURE__*/ React__default.createElement(InputArrayHeader, null, /*#__PURE__*/ React__default.createElement("h3", null, "Input"), /*#__PURE__*/ React__default.createElement("span", {
-        style: {
-            display: "flex",
-            alignItems: "center",
-            gap: "0.25rem"
-        }
-    }, /*#__PURE__*/ React__default.createElement(MessageSquare, {
-        size: 12
-    }), input.length)), /*#__PURE__*/ React__default.createElement(InputArrayScrollableContent, {
-        className: "agent-node-scrollable"
-    }, input.map((item, index)=>/*#__PURE__*/ React__default.createElement(InputItem, {
-            key: index
-        }, /*#__PURE__*/ React__default.createElement(InputItemHeader, null, /*#__PURE__*/ React__default.createElement(InputItemLabel, null, getRoleEmoji$1(item.role), " ", getRoleDisplayName$1(item.role))), /*#__PURE__*/ React__default.createElement(InputItemTextarea, {
-            onClick: (e)=>{
-                e.stopPropagation();
-            },
-            value: renderContent(item.content) || "",
-            readOnly: true,
-            style: {
-                border: `1px solid ${themeColors.border}`,
-                backgroundColor: themeColors.muted,
-                color: themeColors.foreground
-            },
-            className: "agent-node-scrollable"
-        })))));
-};
-// Styled components
-const InputArrayContainer = styled.div`
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-`;
-const InputArrayScrollableContent = styled.div`
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  padding-bottom: 0.5rem;
-  padding-right: 2px;
-  gap: 0.5rem;
-  max-height: 200px;
-  overflow-y: auto;
-`;
-const InputArrayHeader = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-weight: 500;
-  font-size: 0.75rem;
-  color: ${(props)=>props.theme?.colors?.foreground || "hsl(222.2 84% 4.9%)"};
-
-  & h3 {
-    margin: 0;
-    padding: 0;
-    font-size: 0.75rem;
-    font-weight: 500;
-    color: ${(props)=>props.theme?.colors?.foreground || "hsl(222.2 84% 4.9%)"};
-  }
-
-  & span {
-    font-size: 0.75rem;
-    font-weight: 500;
-    opacity: 0.5;
-    color: ${(props)=>props.theme?.colors?.foreground || "hsl(222.2 84% 4.9%)"};
-  }
-`;
-const InputItem = styled.div`
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-`;
-const InputItemHeader = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-`;
-const InputItemLabel = styled.span`
-  font-weight: 600;
-  font-size: 0.75rem;
-  color: ${(props)=>props.theme?.colors?.mutedForeground || "hsl(215.4 16.3% 46.9%)"};
-`;
-const InputItemTextarea = styled(index)`
-  box-sizing: border-box;
-  width: 100%;
-  border-radius: 0.25rem;
-  padding: 0.5rem;
-  resize: none;
-  font-family: inherit;
-  font-size: 0.75rem;
-  &:focus {
-    outline: none;
-    border-color: ${(props)=>props.theme?.colors?.primary || "hsl(221.2 83.2% 53.3%)"};
-    box-shadow: 0 0 0 1px ${(props)=>props.theme?.colors?.primary || "hsl(221.2 83.2% 53.3%)"};
-  }
-
-  transition: all 0.2s ease-in-out;
-`;
-
 const DEFAULT_COUNTUP_DURATION = 0.6;
 // Helper component for animating currency values
 const CountUpCurrency = ({ value, prefix = "", suffix = "" })=>{
@@ -48184,6 +48220,36 @@ const CountUpLatency = ({ value })=>{
     }
     return Object.keys(base).length > 0 ? base : null;
 }
+/** Tool drawer I/O from first edge detail (aligned with session-details getNodeInputsOutputs for Tool). */ function buildToolDrawerIo(nodeData) {
+    const toolName = nodeData.label || "Tool";
+    const d0 = nodeData.edgeDetails?.[0];
+    const toolInputs = {};
+    if (d0?.input_args && d0.input_args.length > 0) {
+        toolInputs.args = d0.input_args;
+    }
+    if (d0?.input_kwargs && Object.keys(d0.input_kwargs).length > 0) {
+        Object.assign(toolInputs, d0.input_kwargs);
+    }
+    const inputs = Object.keys(toolInputs).length > 0 ? [
+        {
+            role: "tool",
+            content: {
+                name: toolName,
+                ...toolInputs
+            }
+        }
+    ] : [];
+    const toolOutput = d0?.output !== undefined ? d0.output : null;
+    const toolStatusMap = new Map();
+    if (d0?.status) {
+        toolStatusMap.set(toolName, d0.status);
+    }
+    return {
+        inputs,
+        toolOutput,
+        toolStatusMap
+    };
+}
 const NodeDetailsDrawer = ({ isVisible, onClose, nodeData })=>{
     const { theme } = useTheme$1();
     const [selectedRowIndex, setSelectedRowIndex] = useState(null);
@@ -48225,12 +48291,15 @@ const NodeDetailsDrawer = ({ isVisible, onClose, nodeData })=>{
     const totalOutputTokens = sumTotalOutputTokens(llmDetailsList);
     const totalLatency = sumTotalLatency(llmDetailsList);
     const toolDrawerPayload = nodeType === "Tool" ? buildToolDrawerPayload(nodeData) : null;
+    const toolDrawerIo = nodeType === "Tool" ? buildToolDrawerIo(nodeData) : null;
+    const hasToolEdgeIo = toolDrawerIo != null && (toolDrawerIo.inputs.length > 0 || toolDrawerIo.toolOutput != null);
+    const showToolLegacyJson = nodeType === "Tool" && !hasToolEdgeIo && toolDrawerPayload != null;
     const nodeLatencySeconds = nodeData.details?.internals?.latency?.total_time;
     const drawerTitle = /*#__PURE__*/ React__default.createElement(DrawerTitleContent, null, /*#__PURE__*/ React__default.createElement(NodeIcon$2, null, getNodeIcon({
         nodeType: (nodeData.nodeType || "Agent").toLowerCase(),
         modelProvider: llOverviewDetails?.model_provider,
         modelName: llOverviewDetails?.model_name
-    })), /*#__PURE__*/ React__default.createElement("span", null, nodeData.label, " Details"));
+    })), /*#__PURE__*/ React__default.createElement("span", null, nodeData.label));
     return /*#__PURE__*/ React__default.createElement(Drawer$2, {
         title: drawerTitle,
         placement: "right",
@@ -48250,7 +48319,7 @@ const NodeDetailsDrawer = ({ isVisible, onClose, nodeData })=>{
                 "aria-label": "Close drawer"
             })
         },
-        size: "500px",
+        size: "600px",
         getContainer: ()=>document.body,
         zIndex: 1100,
         "data-testid": "node-details-drawer",
@@ -48266,7 +48335,16 @@ const NodeDetailsDrawer = ({ isVisible, onClose, nodeData })=>{
         }
     }, /*#__PURE__*/ React__default.createElement(DrawerBodyContent, {
         "data-testid": "node-details-drawer-content"
-    }, nodeType === "Tool" && /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, nodeLatencySeconds != null && /*#__PURE__*/ React__default.createElement(Section, null, /*#__PURE__*/ React__default.createElement(InfoItem, null, /*#__PURE__*/ React__default.createElement(InfoLabel, null, "Latency"), /*#__PURE__*/ React__default.createElement(InfoValue, null, formatLatency(nodeLatencySeconds)))), toolDrawerPayload ? /*#__PURE__*/ React__default.createElement(Section, {
+    }, nodeType === "Tool" && /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, nodeLatencySeconds != null && /*#__PURE__*/ React__default.createElement(Section, null, /*#__PURE__*/ React__default.createElement(InfoItem, null, /*#__PURE__*/ React__default.createElement(InfoLabel, null, "Latency"), /*#__PURE__*/ React__default.createElement(InfoValue, null, formatLatency(nodeLatencySeconds)))), hasToolEdgeIo && toolDrawerIo ? /*#__PURE__*/ React__default.createElement(Section, {
+        "data-testid": "tool-drawer-json"
+    }, /*#__PURE__*/ React__default.createElement(InputsOutputsCollapse, {
+        inputs: toolDrawerIo.inputs,
+        output: null,
+        toolOutput: toolDrawerIo.toolOutput,
+        toolStatusMap: toolDrawerIo.toolStatusMap,
+        toolInputAsTextarea: true,
+        hasInputs: toolDrawerIo.inputs.length > 0
+    })) : showToolLegacyJson ? /*#__PURE__*/ React__default.createElement(Section, {
         "data-testid": "tool-drawer-json"
     }, /*#__PURE__*/ React__default.createElement(JsonTreeViewer, {
         excludeKeys: [
@@ -48278,7 +48356,7 @@ const NodeDetailsDrawer = ({ isVisible, onClose, nodeData })=>{
         const isAggregateSelected = selectedRowIndex === llmDetails.length;
         const selectedDetails = isAggregateSelected ? null // Use aggregate values
          : llmDetails[selectedRowIndex || 0];
-        return /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, /*#__PURE__*/ React__default.createElement(InfoItem, null, /*#__PURE__*/ React__default.createElement(InfoLabel, null, "Model"), /*#__PURE__*/ React__default.createElement(InfoValue, null, isAggregateSelected ? llOverviewDetails.model_name : selectedDetails?.model_name || "N/A")), /*#__PURE__*/ React__default.createElement(InfoItem, null, /*#__PURE__*/ React__default.createElement(InfoLabel, null, "Provider"), /*#__PURE__*/ React__default.createElement(InfoValue, null, isAggregateSelected ? getProviderLabel(llOverviewDetails.model_name, llOverviewDetails.model_provider) : selectedDetails ? getProviderLabel(selectedDetails.model_name, selectedDetails.model_provider) : "N/A")), /*#__PURE__*/ React__default.createElement(InfoItem, null, /*#__PURE__*/ React__default.createElement(InfoLabel, null, isAggregateSelected ? "Total" : "", " Latency"), /*#__PURE__*/ React__default.createElement(InfoValue, null, isAggregateSelected ? totalLatency ? /*#__PURE__*/ React__default.createElement(CountUpLatency, {
+        return /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, /*#__PURE__*/ React__default.createElement(InfoItem, null, /*#__PURE__*/ React__default.createElement(InfoLabel, null, "Model"), /*#__PURE__*/ React__default.createElement(InfoValue, null, isAggregateSelected ? getModelLabel(llOverviewDetails.model_name) || "N/A" : getModelLabel(selectedDetails?.model_name) || "N/A")), /*#__PURE__*/ React__default.createElement(InfoItem, null, /*#__PURE__*/ React__default.createElement(InfoLabel, null, "Provider"), /*#__PURE__*/ React__default.createElement(InfoValue, null, isAggregateSelected ? getProviderLabel(llOverviewDetails.model_name, llOverviewDetails.model_provider) : selectedDetails ? getProviderLabel(selectedDetails.model_name, selectedDetails.model_provider) : "N/A")), /*#__PURE__*/ React__default.createElement(InfoItem, null, /*#__PURE__*/ React__default.createElement(InfoLabel, null, isAggregateSelected ? "Total" : "", " Latency"), /*#__PURE__*/ React__default.createElement(InfoValue, null, isAggregateSelected ? totalLatency ? /*#__PURE__*/ React__default.createElement(CountUpLatency, {
             value: totalLatency
         }) : "N/A" : selectedDetails?.latency ? /*#__PURE__*/ React__default.createElement(CountUpLatency, {
             value: selectedDetails.latency
@@ -48313,11 +48391,13 @@ const NodeDetailsDrawer = ({ isVisible, onClose, nodeData })=>{
         }) : "N/A")));
     })())), nodeType === "Agent" && llOverviewDetails && llmDetailsList.length === 1 && /*#__PURE__*/ React__default.createElement(Section, {
         "data-testid": "agent-single-llm-messages"
-    }, /*#__PURE__*/ React__default.createElement(InputArrayRenderer, {
-        input: llOverviewDetails.input || []
-    }), llOverviewDetails.output ? /*#__PURE__*/ React__default.createElement(OutputRenderer, {
-        data: llOverviewDetails.output
-    }) : null), nodeType === "Agent" && llmDetailsList.length > 1 && /*#__PURE__*/ React__default.createElement(Section, null, /*#__PURE__*/ React__default.createElement(TableWrapper, null, /*#__PURE__*/ React__default.createElement("table", null, /*#__PURE__*/ React__default.createElement("thead", null, /*#__PURE__*/ React__default.createElement("tr", null, /*#__PURE__*/ React__default.createElement("th", {
+    }, /*#__PURE__*/ React__default.createElement(InputsOutputsCollapse, {
+        inputs: llOverviewDetails.input || [],
+        output: llOverviewDetails.output ?? null,
+        toolOutput: null,
+        modelProvider: llOverviewDetails.model_provider,
+        modelName: llOverviewDetails.model_name
+    })), nodeType === "Agent" && llmDetailsList.length > 1 && /*#__PURE__*/ React__default.createElement(Section, null, /*#__PURE__*/ React__default.createElement(TableWrapper, null, /*#__PURE__*/ React__default.createElement("table", null, /*#__PURE__*/ React__default.createElement("thead", null, /*#__PURE__*/ React__default.createElement("tr", null, /*#__PURE__*/ React__default.createElement("th", {
         style: {
             textAlign: "center"
         }
@@ -48415,10 +48495,12 @@ const NodeDetailsDrawer = ({ isVisible, onClose, nodeData })=>{
         }
     }, totalLatency ? /*#__PURE__*/ React__default.createElement(CountUpLatency, {
         value: totalLatency
-    }) : "N/A"))))), selectedLlmDetails ? /*#__PURE__*/ React__default.createElement(FadingSection, null, /*#__PURE__*/ React__default.createElement(InputArrayRenderer, {
-        input: selectedLlmDetails.input || []
-    }), /*#__PURE__*/ React__default.createElement(OutputRenderer, {
-        data: selectedLlmDetails.output
+    }) : "N/A"))))), selectedLlmDetails ? /*#__PURE__*/ React__default.createElement(FadingSection, null, /*#__PURE__*/ React__default.createElement(InputsOutputsCollapse, {
+        inputs: selectedLlmDetails.input || [],
+        output: selectedLlmDetails.output ?? null,
+        toolOutput: null,
+        modelProvider: selectedLlmDetails.model_provider,
+        modelName: selectedLlmDetails.model_name
     })) : null)));
 };
 // Styled components
@@ -48546,6 +48628,10 @@ const NodeIcon$2 = styled.div`
   color: ${(p)=>p.theme?.colors?.foreground ?? "inherit"};
 `;
 
+/** Compact xyflow node card width range */ const FLOW_NODE_MIN_WIDTH = 176;
+const FLOW_NODE_MAX_WIDTH = 250;
+/** Used by auto-layout horizontal spacing (~typical card width between min and max) */ const LAYOUT_NODE_WIDTH = Math.round((FLOW_NODE_MIN_WIDTH + FLOW_NODE_MAX_WIDTH) / 2);
+
 // Helper to resolve icon when provider is Unknown - use model_name as fallback (e.g. "apple-on-device" -> Apple)
 const resolveProviderFromModelName = (modelName)=>{
     const normalized = modelName?.toLowerCase();
@@ -48557,7 +48643,11 @@ const resolveProviderFromModelName = (modelName)=>{
  */ const getNodeIcon = (options = {})=>{
     const { nodeType, modelProvider, modelName, size = 16 } = options ?? {};
     const normalizedNodeType = nodeType?.toLowerCase();
-    if (normalizedNodeType === "tool") return "🔧";
+    if (normalizedNodeType === "tool") return /*#__PURE__*/ React__default.createElement(Wrench, {
+        size: size,
+        strokeWidth: 2,
+        "aria-hidden": true
+    });
     const normalizedProvider = modelProvider?.toLowerCase();
     const resolvedProvider = !normalizedProvider || normalizedProvider === "unknown" ? resolveProviderFromModelName(modelName) : normalizedProvider;
     if (resolvedProvider === "openai") return /*#__PURE__*/ React__default.createElement(OpenAIIcon, {
@@ -48607,6 +48697,17 @@ const PROVIDER_LABELS = {
     }
     return PROVIDER_LABELS[normalizedProvider] ?? toTitleCase(modelProvider);
 };
+const MODEL_DISPLAY_NAMES = {
+    "apple-on-device": "Apple on Device"
+};
+/**
+ * Display label for a Railtracks model_name slug (frontend copy only; does not alter data).
+ */ const getModelLabel = (modelName)=>{
+    const trimmed = modelName?.trim() ?? "";
+    if (!trimmed) return "";
+    const key = trimmed.toLowerCase();
+    return MODEL_DISPLAY_NAMES[key] ?? trimmed;
+};
 const getOverviewLlmDetails = (llmDetails)=>{
     if (!llmDetails) return null;
     return llmDetails[llmDetails.length - 1];
@@ -48678,7 +48779,7 @@ const AgentNode = ({ data, id, onInspect, defaultDrawerOpen })=>{
     }, /*#__PURE__*/ React__default.createElement(Cpu, {
         size: 12,
         strokeWidth: 2
-    })), /*#__PURE__*/ React__default.createElement(MetaLineText, null, providerLine)), /*#__PURE__*/ React__default.createElement(CostLine, null, /*#__PURE__*/ React__default.createElement(CostLineIcon, {
+    })), /*#__PURE__*/ React__default.createElement(MetaLineText, null, getModelLabel(modelName) || "—")), /*#__PURE__*/ React__default.createElement(CostLine, null, /*#__PURE__*/ React__default.createElement(CostLineIcon, {
         "aria-hidden": true
     }, /*#__PURE__*/ React__default.createElement(CircleDollarSign, {
         size: 13,
@@ -52309,19 +52410,18 @@ const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100dvw", heigh
         width: typeof width === "number" ? width : 1200,
         height: typeof height === "number" ? height : 600
     });
-    // Timeline state
-    const [currentStep, setCurrentStep] = useState(0);
+    // Timeline state — start at final step so first paint isn't empty when the graph begins after step 0
+    const [currentStep, setCurrentStep] = useState(()=>getDefaultTimelineStepForRun(flowData));
     const [isPlaying, setIsPlaying] = useState(false);
     const playIntervalRef = useRef(null);
     // Timeline visibility state
     const [showTimelines, setShowTimelines] = useState(false);
-    // Get max step from stamps or steps
-    const maxStep = useMemo(()=>{
-        const stamps = flowData.stamps || flowData.steps || [];
-        return stamps.length > 0 ? Math.max(...stamps.map((s)=>s.step)) : 0;
-    }, [
+    const maxStep = useMemo(()=>getDefaultTimelineStepForRun(flowData), [
+        flowData.nodes,
+        flowData.edges,
         flowData.stamps,
-        flowData.steps
+        flowData.steps,
+        flowData.run_id
     ]);
     // Auto-play functionality
     useEffect(()=>{
@@ -52350,15 +52450,13 @@ const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100dvw", heigh
         isPlaying,
         maxStep
     ]);
-    // Initialize current step to last step and pan to hub node
-    useEffect(()=>{
-        const stamps = flowData.stamps || flowData.steps || [];
-        if (stamps.length > 0) {
-            setCurrentStep(Math.max(...stamps.map((s)=>s.step)));
-        }
+    // 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);
     }, [
-        flowData.stamps,
-        flowData.steps
+        maxStep,
+        flowData.run_id
     ]);
     // Update dimensions when width/height props change
     useEffect(()=>{
@@ -52407,12 +52505,12 @@ const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100dvw", heigh
         if (!flowData.nodes) {
             return [];
         }
-        return flowData.nodes.filter((node)=>node.stamp.step <= step);
+        return flowData.nodes.filter((node)=>(node.stamp?.step ?? 0) <= step);
     }, [
         flowData.nodes
     ]);
     const getEdgesForStep = useCallback((step)=>{
-        return (flowData.edges || []).filter((edge)=>edge.stamp.step <= step);
+        return (flowData.edges || []).filter((edge)=>(edge.stamp?.step ?? 0) <= step);
     }, [
         flowData.edges
     ]);
@@ -52441,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
@@ -52475,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",
@@ -52503,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,
@@ -52751,7 +52849,7 @@ const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100dvw", heigh
             whiteSpace: "nowrap",
             border: 0
         }
-    }, "Close"))))), /*#__PURE__*/ React__default.createElement(index$2, {
+    }, "Close"))))), /*#__PURE__*/ React__default.createElement(index, {
         colorMode: isDarkMode ? "dark" : "light",
         nodes: nodesState,
         edges: edgesState,
@@ -112227,322 +112325,6 @@ class ErrorBoundary extends Component {
     }
 }
 
-const MAX_TITLE_LEN = 200;
-const TOOLBAR_ICON_SIZE = 15;
-const JsonValueTree = ({ data, className, maxHeight = "auto" })=>{
-    const { theme } = useTheme$1();
-    const { mutedForeground } = theme.colors;
-    const treeData = useMemo(()=>buildTreeData(data), [
-        data
-    ]);
-    const defaultExpandedKeys = useMemo(()=>collectKeysToDepth(treeData, 2), [
-        treeData
-    ]);
-    const allExpandableKeys = useMemo(()=>collectAllExpandableKeys(treeData), [
-        treeData
-    ]);
-    const [expandedKeys, setExpandedKeys] = useState(()=>defaultExpandedKeys);
-    const hasBranches = allExpandableKeys.length > 0;
-    const isAllExpanded = hasBranches && allExpandableKeys.every((k)=>expandedKeys.includes(k));
-    useEffect(()=>{
-        setExpandedKeys(defaultExpandedKeys);
-    }, [
-        defaultExpandedKeys
-    ]);
-    const handleCopyJson = useCallback(async ()=>{
-        try {
-            const text = JSON.stringify(data, null, 2);
-            await navigator.clipboard.writeText(text);
-            staticMethods.success("JSON copied to clipboard");
-        } catch  {
-            staticMethods.error("Could not copy to clipboard");
-        }
-    }, [
-        data
-    ]);
-    const handleToggleExpandCollapse = useCallback(()=>{
-        if (isAllExpanded) {
-            setExpandedKeys([]);
-        } else {
-            setExpandedKeys(allExpandableKeys);
-        }
-    }, [
-        isAllExpanded,
-        allExpandableKeys
-    ]);
-    return /*#__PURE__*/ React__default.createElement("div", {
-        className: className,
-        style: {
-            maxHeight,
-            display: "flex",
-            flexDirection: "column",
-            borderRadius: 4,
-            overflow: "hidden"
-        }
-    }, /*#__PURE__*/ React__default.createElement("div", {
-        style: {
-            display: "flex",
-            justifyContent: "flex-end",
-            alignItems: "center",
-            gap: 2,
-            padding: "4px 6px 2px",
-            flexShrink: 0,
-            background: "transparent"
-        }
-    }, /*#__PURE__*/ React__default.createElement(Tooltip$1, {
-        title: "Copy JSON"
-    }, /*#__PURE__*/ React__default.createElement(Button$1, {
-        type: "text",
-        size: "small",
-        "aria-label": "Copy JSON to clipboard",
-        icon: /*#__PURE__*/ React__default.createElement(Copy, {
-            size: TOOLBAR_ICON_SIZE,
-            color: mutedForeground
-        }),
-        onClick: handleCopyJson
-    })), /*#__PURE__*/ React__default.createElement(Tooltip$1, {
-        title: isAllExpanded ? "Collapse all" : "Expand all"
-    }, /*#__PURE__*/ React__default.createElement(Button$1, {
-        type: "text",
-        size: "small",
-        "aria-label": isAllExpanded ? "Collapse all tree nodes" : "Expand all tree nodes",
-        disabled: !hasBranches,
-        icon: isAllExpanded ? /*#__PURE__*/ React__default.createElement(FoldVertical, {
-            size: TOOLBAR_ICON_SIZE,
-            color: mutedForeground
-        }) : /*#__PURE__*/ React__default.createElement(UnfoldVertical, {
-            size: TOOLBAR_ICON_SIZE,
-            color: mutedForeground
-        }),
-        onClick: handleToggleExpandCollapse
-    }))), /*#__PURE__*/ React__default.createElement("div", {
-        style: {
-            flex: 1,
-            minHeight: 0,
-            overflow: "auto",
-            padding: "4px 0"
-        }
-    }, /*#__PURE__*/ React__default.createElement(Tree, {
-        // No showLine — connector lines look like a floating spine for many top-level fields.
-        showLine: true,
-        blockNode: true,
-        expandAction: "click",
-        selectable: false,
-        showIcon: false,
-        treeData: treeData,
-        expandedKeys: expandedKeys,
-        onExpand: (keys)=>setExpandedKeys(keys),
-        rootStyle: {
-            backgroundColor: "transparent",
-            padding: "0 4px"
-        }
-    })));
-};
-function collectKeysToDepth(nodes, maxDepth, depth = 0) {
-    if (depth >= maxDepth) return [];
-    const keys = [];
-    for (const n of nodes){
-        if (n.children && n.children.length > 0) {
-            keys.push(n.key);
-            keys.push(...collectKeysToDepth(n.children, maxDepth, depth + 1));
-        }
-    }
-    return keys;
-}
-function collectAllExpandableKeys(nodes) {
-    const keys = [];
-    for (const n of nodes){
-        if (n.children && n.children.length > 0) {
-            keys.push(n.key);
-            keys.push(...collectAllExpandableKeys(n.children));
-        }
-    }
-    return keys;
-}
-/**
- * Object keys A→Z, but any property whose value is an array is listed after all non-array properties
- * (each block still A→Z). Tree has no built-in sort — this defines `treeData` order.
- */ function sortObjectEntriesForTree(entries) {
-    return [
-        ...entries
-    ].sort((a, b)=>{
-        const aArr = Array.isArray(a[1]);
-        const bArr = Array.isArray(b[1]);
-        if (aArr !== bArr) {
-            return aArr ? 1 : -1;
-        }
-        return a[0].localeCompare(b[0], undefined, {
-            sensitivity: "base",
-            numeric: true
-        });
-    });
-}
-function valueToTreeNodes(value, path) {
-    if (value === null || value === undefined) {
-        return [
-            {
-                key: path,
-                title: formatJsonTreePrimitive(value),
-                isLeaf: true
-            }
-        ];
-    }
-    if (Array.isArray(value)) {
-        if (value.length === 0) {
-            return [
-                {
-                    key: `${path}.__empty_arr__`,
-                    title: "[] (0 items)",
-                    isLeaf: true
-                }
-            ];
-        }
-        return value.map((item, i)=>{
-            const seg = `[${i}]`;
-            const childPath = `${path}.${escapeDotPathSegment(seg)}`;
-            if (item === null || item === undefined || typeof item !== "object") {
-                return {
-                    key: childPath,
-                    title: `${seg}: ${formatJsonTreePrimitive(item)}`,
-                    isLeaf: true
-                };
-            }
-            if (Array.isArray(item) || isPlainObject(item)) {
-                const children = valueToTreeNodes(item, childPath);
-                return {
-                    key: childPath,
-                    title: `${seg} (${Array.isArray(item) ? `Array(${item.length})` : `Object(${Object.keys(item).length})`})`,
-                    children
-                };
-            }
-            return {
-                key: childPath,
-                title: `${seg}: ${formatJsonTreePrimitive(item)}`,
-                isLeaf: true
-            };
-        });
-    }
-    if (isPlainObject(value)) {
-        const entries = sortObjectEntriesForTree(Object.entries(value));
-        if (entries.length === 0) {
-            return [
-                {
-                    key: `${path}.__empty_obj__`,
-                    title: "{} (0 keys)",
-                    isLeaf: true
-                }
-            ];
-        }
-        return entries.map(([k, v])=>{
-            const childPath = `${path}.${escapeDotPathSegment(k)}`;
-            if (v === null || v === undefined || typeof v !== "object") {
-                const text = `${k}: ${formatJsonTreePrimitive(v)}`;
-                const title = text.length > MAX_TITLE_LEN ? /*#__PURE__*/ React__default.createElement(Tooltip$1, {
-                    title: text
-                }, /*#__PURE__*/ React__default.createElement("span", null, text.slice(0, MAX_TITLE_LEN), "…")) : text;
-                return {
-                    key: childPath,
-                    title,
-                    isLeaf: true
-                };
-            }
-            if (Array.isArray(v) || isPlainObject(v)) {
-                const children = valueToTreeNodes(v, childPath);
-                const summary = Array.isArray(v) ? `Array(${v.length})` : `Object(${Object.keys(v).length})`;
-                return {
-                    key: childPath,
-                    title: `${k}: ${summary}`,
-                    children
-                };
-            }
-            const text = `${k}: ${formatJsonTreePrimitive(v)}`;
-            return {
-                key: childPath,
-                title: text.length > MAX_TITLE_LEN ? /*#__PURE__*/ React__default.createElement(Tooltip$1, {
-                    title: text
-                }, /*#__PURE__*/ React__default.createElement("span", null, text.slice(0, MAX_TITLE_LEN), "…")) : text,
-                isLeaf: true
-            };
-        });
-    }
-    const text = formatJsonTreePrimitive(value);
-    return [
-        {
-            key: path,
-            title: text.length > MAX_TITLE_LEN ? /*#__PURE__*/ React__default.createElement(Tooltip$1, {
-                title: text
-            }, /*#__PURE__*/ React__default.createElement("span", null, text.slice(0, MAX_TITLE_LEN), "…")) : text,
-            isLeaf: true
-        }
-    ];
-}
-/** Top-level tree for tabular session output: plain object or array of plain objects. */ function buildTreeData(data) {
-    if (data === null || data === undefined) {
-        return [
-            {
-                key: "root",
-                title: String(data),
-                isLeaf: true
-            }
-        ];
-    }
-    if (Array.isArray(data)) {
-        if (data.length === 0) {
-            return [
-                {
-                    key: "$top",
-                    title: "Array (0 items)",
-                    isLeaf: true
-                }
-            ];
-        }
-        const children = data.map((item, index)=>{
-            const path = `$root[${index}]`;
-            if (!isPlainObject(item)) {
-                return {
-                    key: path,
-                    title: `[${index}]: ${formatJsonTreePrimitive(item)}`,
-                    isLeaf: true
-                };
-            }
-            const itemChildren = valueToTreeNodes(item, path);
-            return {
-                key: path,
-                title: `[${index}] (${Object.keys(item).length} keys)`,
-                children: itemChildren
-            };
-        });
-        return [
-            {
-                key: "$top",
-                title: `Array (${data.length} items)`,
-                children
-            }
-        ];
-    }
-    if (isPlainObject(data)) {
-        const objectKeys = Object.keys(data);
-        if (objectKeys.length === 0) {
-            return [
-                {
-                    key: "$top",
-                    title: "Object (0 keys)",
-                    isLeaf: true
-                }
-            ];
-        }
-        const children = valueToTreeNodes(data, "$root");
-        return [
-            {
-                key: "$top",
-                title: `Object (${objectKeys.length} keys)`,
-                children
-            }
-        ];
-    }
-    return valueToTreeNodes(data, "$root");
-}
-
 const getNodeLatency = (node)=>node.details?.internals?.latency?.total_time ?? 0;
 /** Tool/agent failure is carried on the incoming edge's details.status (e.g. Failed), same as flow edges and session I/O. */ function isNodeFailureFromIncomingEdge(run, nodeId) {
     const incoming = run.edges?.filter((e)=>e.target === nodeId) ?? [];
@@ -112796,158 +112578,6 @@ const useShareAgentSession = (session)=>{
 };
 
 const { Text } = Typography;
-// Shared theme color fallbacks
-const DEFAULT_THEME_COLORS = {
-    border: "hsl(214.3 31.8% 91.4%)",
-    foreground: "hsl(222.2 84% 4.9%)"
-};
-// Helper function to format content as text
-const formatContentAsText = (content)=>{
-    if (typeof content === "string") {
-        return content;
-    }
-    if (Array.isArray(content)) {
-        return content.map((item)=>formatContentAsText(item)).join("\n\n");
-    }
-    return JSON.stringify(content, null, 2);
-};
-// Helper function to check if data is tabular (object or array of objects)
-const isTabularData = (data)=>{
-    if (data === null || data === undefined) {
-        return false;
-    }
-    // Check if it's a plain object (not array, Date, etc.)
-    if (typeof data === "object" && !Array.isArray(data) && data.constructor === Object) {
-        return true;
-    }
-    // Check if it's an array of plain objects
-    if (Array.isArray(data) && data.length > 0) {
-        return data.every((item)=>item !== null && item !== undefined && typeof item === "object" && !Array.isArray(item) && item.constructor === Object);
-    }
-    return false;
-};
-// Helper function to format output as text
-const formatOutputAsText = (output, toolOutput)=>{
-    if (toolOutput !== null && toolOutput !== undefined) {
-        return formatContentAsText(toolOutput);
-    }
-    if (output) {
-        const role = getRoleDisplayName(output.role);
-        const content = formatContentAsText(output.content);
-        return `${role}:\n${content}`;
-    }
-    return "";
-};
-// Helper function to get emoji for role
-const getRoleEmoji = (role)=>{
-    switch(role.toLowerCase()){
-        case "system":
-            return "⚙️";
-        case "user":
-            return "👤";
-        case "assistant":
-            return "🤖";
-        case "tool":
-            return "🔧";
-        default:
-            return "🔧"; // fallback
-    }
-};
-// Helper function to get display name for role
-const getRoleDisplayName = (role)=>{
-    return role.charAt(0).toUpperCase() + role.slice(1);
-};
-// Helper function to render content
-const renderContent = (content)=>{
-    if (typeof content === "string") {
-        return content;
-    }
-    return JSON.stringify(content, null, 2);
-};
-// Helper to filter out keys containing "name" from objects (recursive)
-const filterKeysWithName = (obj)=>{
-    if (obj === null || obj === undefined) return obj;
-    if (typeof obj !== "object") return obj;
-    if (Array.isArray(obj)) return obj.map(filterKeysWithName);
-    return Object.fromEntries(Object.entries(obj).filter(([key])=>!key.toLowerCase().includes("name")).map(([key, value])=>[
-            key,
-            filterKeysWithName(value)
-        ]));
-};
-const LLMInputsRenderer = ({ input, isDarkMode, modelProvider, modelName, toolStatusMap })=>{
-    const { theme } = useTheme$1();
-    const themeColors = theme?.colors || DEFAULT_THEME_COLORS;
-    if (!input || input.length === 0) return null;
-    const collapseItems = input.map((item, index)=>{
-        const modelIcon = modelProvider || modelName ? getNodeIcon({
-            modelProvider,
-            modelName
-        }) : null;
-        const isSystemInput = item.role.toLowerCase() === "system";
-        const showModelInfo = isSystemInput && (modelProvider || modelName);
-        const isToolInput = item.role.toLowerCase() === "tool";
-        const isAssistantInput = item.role.toLowerCase() === "assistant";
-        const isUserInput = item.role.toLowerCase() === "user";
-        // Extract tool name for tool inputs
-        const toolName = isToolInput && item.content?.name ? item.content.name : null;
-        // Look up status for this specific tool
-        const toolStatus = toolName && toolStatusMap ? toolStatusMap.get(toolName) : undefined;
-        // Extract tool call name(s) for assistant inputs
-        let assistantToolName = null;
-        if (isAssistantInput && Array.isArray(item.content) && item.content.length > 0) {
-            const firstToolCall = item.content[0];
-            if (firstToolCall?.name) {
-                assistantToolName = firstToolCall.name;
-            }
-        }
-        return {
-            key: `input-${index}`,
-            label: /*#__PURE__*/ React__default.createElement(Text, {
-                strong: true
-            }, getRoleEmoji(item.role), " ", toolName ? `Tool` : assistantToolName ? `Assistant` : getRoleDisplayName(item.role)),
-            extra: showModelInfo ? /*#__PURE__*/ React__default.createElement(Space, {
-                size: "small"
-            }, modelIcon && /*#__PURE__*/ React__default.createElement("span", null, modelIcon), modelName && /*#__PURE__*/ React__default.createElement("span", {
-                style: {
-                    fontSize: "12px",
-                    opacity: 0.7
-                }
-            }, modelName)) : isToolInput ? /*#__PURE__*/ React__default.createElement(Tag, {
-                color: toolStatus === "Failed" ? "red" : "blue"
-            }, toolName || "Tool Response") : isUserInput ? /*#__PURE__*/ React__default.createElement(Tag, {
-                color: "purple"
-            }, "Text") : undefined,
-            children: /*#__PURE__*/ React__default.createElement("pre", {
-                style: {
-                    margin: 0,
-                    padding: "12px",
-                    background: isDarkMode ? "#1f1f1f" : "#fafafa",
-                    border: `1px solid ${themeColors.border}`,
-                    borderRadius: "4px",
-                    color: themeColors.foreground,
-                    whiteSpace: "pre-wrap",
-                    wordWrap: "break-word",
-                    fontFamily: "monospace",
-                    fontSize: "12px",
-                    lineHeight: "1.5",
-                    maxHeight: "300px",
-                    overflow: "auto"
-                }
-            }, renderContent(typeof item.content === "object" && item.content !== null && !Array.isArray(item.content) ? filterKeysWithName(item.content) : item.content))
-        };
-    });
-    return /*#__PURE__*/ React__default.createElement(Collapse$1, {
-        items: collapseItems,
-        defaultActiveKey: collapseItems.length > 0 ? [
-            collapseItems[0].key
-        ] : [],
-        style: {
-            background: "transparent",
-            padding: 0,
-            margin: 0
-        }
-    });
-};
 // Extract inputs/outputs for a specific node
 const getNodeInputsOutputs = (node, run)=>{
     if (node.node_type === "Tool") {
@@ -113063,89 +112693,7 @@ const NodeDetailsPanel = ({ selectedNode, session, isDarkMode })=>{
     }
     const { inputs, output, toolOutput, modelProvider, modelName, toolStatusMap } = nodeIO;
     const hasInputs = (node.node_type === "Agent" || node.node_type === "Tool") && inputs.length > 0;
-    const hasOutputs = output !== null || toolOutput !== null;
-    const outputsText = hasOutputs ? formatOutputAsText(output, toolOutput) : "";
-    const isToolOutputTabular = toolOutput !== null && toolOutput !== undefined && isTabularData(toolOutput);
-    // For Tool nodes: render input as JSON in a textarea (no nested collapsibles)
     const isToolNode = node.node_type === "Tool";
-    const toolInputText = isToolNode && inputs.length > 0 ? renderContent(typeof inputs[0].content === "object" && inputs[0].content !== null && !Array.isArray(inputs[0].content) ? filterKeysWithName(inputs[0].content) : inputs[0].content) : "";
-    const collapseItems = [
-        {
-            key: "inputs",
-            label: /*#__PURE__*/ React__default.createElement("div", {
-                style: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "0.5rem"
-                }
-            }, /*#__PURE__*/ React__default.createElement(Text, {
-                strong: true
-            }, "Inputs"), hasInputs && /*#__PURE__*/ React__default.createElement("span", {
-                style: {
-                    display: "inline-flex",
-                    alignItems: "center",
-                    gap: "0.25rem",
-                    color: theme?.colors?.mutedForeground
-                }
-            }, /*#__PURE__*/ React__default.createElement(MessagesSquare, {
-                size: 12
-            }), inputs.length)),
-            children: hasInputs ? isToolNode ? /*#__PURE__*/ React__default.createElement("textarea", {
-                readOnly: true,
-                value: toolInputText,
-                style: {
-                    width: "100%",
-                    minHeight: "200px",
-                    padding: "12px",
-                    background: isDarkMode ? "#1f1f1f" : "#fafafa",
-                    border: `1px solid ${theme?.colors?.border || "#d9d9d9"}`,
-                    borderRadius: "4px",
-                    color: theme?.colors?.foreground || "inherit",
-                    fontFamily: "monospace",
-                    fontSize: "12px",
-                    lineHeight: "1.5",
-                    resize: "vertical"
-                }
-            }) : /*#__PURE__*/ React__default.createElement(LLMInputsRenderer, {
-                input: inputs,
-                isDarkMode: isDarkMode,
-                modelProvider: modelProvider,
-                modelName: modelName,
-                toolStatusMap: toolStatusMap
-            }) : /*#__PURE__*/ React__default.createElement(Empty, {
-                description: "No inputs available"
-            })
-        },
-        {
-            key: "outputs",
-            label: /*#__PURE__*/ React__default.createElement(Text, {
-                strong: true
-            }, "Outputs"),
-            children: hasOutputs ? isToolOutputTabular ? /*#__PURE__*/ React__default.createElement(JsonValueTree, {
-                data: toolOutput
-            }) : /*#__PURE__*/ React__default.createElement("pre", {
-                style: {
-                    margin: 0,
-                    padding: "12px",
-                    background: isDarkMode ? "#1f1f1f" : "#fafafa",
-                    border: `1px solid ${theme?.colors?.border || "#d9d9d9"}`,
-                    borderRadius: "4px",
-                    color: theme?.colors?.foreground || "inherit",
-                    whiteSpace: "pre-wrap",
-                    wordWrap: "break-word",
-                    fontFamily: "inherit",
-                    fontSize: "13px",
-                    lineHeight: "1.5"
-                }
-            }, outputsText) : /*#__PURE__*/ React__default.createElement("div", {
-                style: {
-                    padding: "12px"
-                }
-            }, /*#__PURE__*/ React__default.createElement(Empty, {
-                description: "No outputs available"
-            }))
-        }
-    ];
     const llmDetails = node.details?.internals?.llm_details || [];
     const totalCost = node.node_type === "Agent" ? sumTotalCost(llmDetails) : 0;
     const totalInputTokens = node.node_type === "Agent" ? sumTotalInputTokens(llmDetails) : 0;
@@ -113202,19 +112750,15 @@ const NodeDetailsPanel = ({ selectedNode, session, isDarkMode })=>{
         }
     }, formatNumberWithCommas(totalInputTokens), " ", /*#__PURE__*/ React__default.createElement(ArrowRight, {
         size: 12
-    }), " ", formatNumberWithCommas(totalOutputTokens)))), /*#__PURE__*/ React__default.createElement(Collapse$1, {
-        ghost: true,
-        bordered: false,
-        items: collapseItems,
-        defaultActiveKey: [
-            "inputs",
-            "outputs"
-        ],
-        style: {
-            background: "transparent",
-            padding: 0,
-            margin: 0
-        }
+    }), " ", formatNumberWithCommas(totalOutputTokens)))), /*#__PURE__*/ React__default.createElement(InputsOutputsCollapse, {
+        inputs: inputs,
+        output: output,
+        toolOutput: toolOutput,
+        modelProvider: modelProvider,
+        modelName: modelName,
+        toolStatusMap: toolStatusMap,
+        hasInputs: hasInputs,
+        toolInputAsTextarea: isToolNode
     }));
 };
 // Component for rendering a single run's content
@@ -114664,6 +114208,7 @@ const EvaluationsTable = ({ evaluations, loading = false, error = null, onRefres
             dataIndex: "completed_at",
             key: "completed_at",
             width: 180,
+            defaultSortOrder: "descend",
             sorter: (a, b)=>{
                 const aVal = a.completed_at ? moment(a.completed_at).unix() : 0;
                 const bVal = b.completed_at ? moment(b.completed_at).unix() : 0;
@@ -120223,4 +119768,4 @@ const GlobalStyles = ()=>{
         return getSafeColor(props.theme, path, fallback);
     };
 
-export { AgenticFlowVisualizer, AnthropicIcon, AppleIcon, Badge, Drawer, Edge, EvaluationDetailsDrawer, EvaluationsCompareDrawer, EvaluationsComparePage, EvaluationsCompareView, EvaluationsErrorCard, EvaluationsTable, EvaluatorResult, GlobalStyles, GoogleIcon, JsonTreeViewer, Node$1 as Node, OllamaIcon, OpenAIIcon, SafeThemeProvider, SessionDetails, Sheet, ThemeProvider, Timeline, Visualizer, calculateAutoLayout, cn, conditionalStyle, createSafeTheme, darkTheme, defaultTheme$1 as defaultTheme, detectContentType, escapeDotPathSegment, evaluationsHaveSameMetrics, formatCurrency, formatDateFriendly, formatDateRelative, formatDateShort, formatDuration, formatJsonTreePrimitive, formatLatency, formatMetricValue$1 as formatMetricValue, formatNumberWithCommas, formatToolCalls, getColor, getSafeColor, getSafeSpacing, getSafeThemeValue, getSpacing, getStatusColor, isEvaluationDto, isPlainObject, lightTheme, safeStyled, safeThemeColor, safeThemeSpacing, safeThemeValue, toTitleCase, transformEvaluation, truncateText, useComponentTheme, useSafeTheme, useTheme$1 as useTheme, useThemeValue };
+export { AgenticFlowVisualizer, AnthropicIcon, AppleIcon, Badge, Drawer, Edge, EvaluationDetailsDrawer, EvaluationsCompareDrawer, EvaluationsComparePage, EvaluationsCompareView, EvaluationsErrorCard, EvaluationsTable, EvaluatorResult, GlobalStyles, GoogleIcon, JsonTreeViewer, Node$1 as Node, OllamaIcon, OpenAIIcon, SafeThemeProvider, SessionDetails, Sheet, ThemeProvider, Timeline, Visualizer, calculateAutoLayout, cn, conditionalStyle, createSafeTheme, darkTheme, defaultTheme$1 as defaultTheme, detectContentType, escapeDotPathSegment, evaluationsHaveSameMetrics, formatCurrency, formatDateFriendly, formatDateRelative, formatDateShort, formatDuration, formatJsonTreePrimitive, formatLatency, formatMetricValue$1 as formatMetricValue, formatNumberWithCommas, formatToolCalls, getColor, getDefaultTimelineStepForRun, getSafeColor, getSafeSpacing, getSafeThemeValue, getSpacing, getStatusColor, isEvaluationDto, isPlainObject, lightTheme, safeStyled, safeThemeColor, safeThemeSpacing, safeThemeValue, toTitleCase, transformEvaluation, truncateText, useComponentTheme, useSafeTheme, useTheme$1 as useTheme, useThemeValue };