@railtownai/railtracks-visualizer 0.0.59 → 0.0.60

package/dist/esm/index.js

@@ -29,6 +29,12 @@ 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 { Notice, useNotification, NotificationProvider } from '@rc-component/notification';
+import RcTooltip, { Popup } from '@rc-component/tooltip';
 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';
@@ -39,16 +45,10 @@ import HolderOutlined from '@ant-design/icons/es/icons/HolderOutlined';
 import CaretDownFilled from '@ant-design/icons/es/icons/CaretDownFilled';
 import MinusSquareOutlined from '@ant-design/icons/es/icons/MinusSquareOutlined';
 import PlusSquareOutlined from '@ant-design/icons/es/icons/PlusSquareOutlined';
-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 { Notice, useNotification, NotificationProvider } from '@rc-component/notification';
 import EditOutlined from '@ant-design/icons/es/icons/EditOutlined';
 import ResizeObserver$1 from '@rc-component/resize-observer';
 import '@rc-component/util/es/Dom/canUseDom';
 import { isStyleSupport } from '@rc-component/util/es/Dom/styleChecker';
-import RcTooltip, { Popup } from '@rc-component/tooltip';
 import EnterOutlined from '@ant-design/icons/es/icons/EnterOutlined';
 import KeyCode from '@rc-component/util/es/KeyCode';
 import RcTextArea from '@rc-component/textarea';
@@ -57,9 +57,6 @@ 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 RcSwitch from '@rc-component/switch';
-import EllipsisOutlined from '@ant-design/icons/es/icons/EllipsisOutlined';
-import PlusOutlined from '@ant-design/icons/es/icons/PlusOutlined';
-import RcTabs from '@rc-component/tabs';
 import RcSelect, { Option, OptGroup } from '@rc-component/select';
 import DownOutlined from '@ant-design/icons/es/icons/DownOutlined';
 import SearchOutlined from '@ant-design/icons/es/icons/SearchOutlined';
@@ -70,6 +67,7 @@ import LeftOutlined from '@ant-design/icons/es/icons/LeftOutlined';
 import RcDropdown from '@rc-component/dropdown';
 import RcMenu, { Divider as Divider$1, Item as Item$1, useFullPath, SubMenu as SubMenu$1, ItemGroup } from '@rc-component/menu';
 import BarsOutlined from '@ant-design/icons/es/icons/BarsOutlined';
+import EllipsisOutlined from '@ant-design/icons/es/icons/EllipsisOutlined';
 import '@rc-component/util/es/Dom/findDOMNode';
 import { convertChildrenToColumns } from '@rc-component/table/es/hooks/useColumns';
 import DoubleLeftOutlined from '@ant-design/icons/es/icons/DoubleLeftOutlined';
@@ -78,6 +76,8 @@ import RcPagination from '@rc-component/pagination';
 import FilterFilled from '@ant-design/icons/es/icons/FilterFilled';
 import CaretDownOutlined from '@ant-design/icons/es/icons/CaretDownOutlined';
 import CaretUpOutlined from '@ant-design/icons/es/icons/CaretUpOutlined';
+import PlusOutlined from '@ant-design/icons/es/icons/PlusOutlined';
+import RcTabs from '@rc-component/tabs';
 
 function cc(names) {
     if (typeof names === "string" || typeof names === "number") return "" + names;
@@ -12903,7 +12903,7 @@ const createLucideIcon = (iconName, iconNode)=>{
     return Component;
 };
 
-const __iconNode$u = [
+const __iconNode$x = [
     [
         "path",
         {
@@ -12919,9 +12919,9 @@ const __iconNode$u = [
         }
     ]
 ];
-const ArrowLeft = createLucideIcon("arrow-left", __iconNode$u);
+const ArrowLeft = createLucideIcon("arrow-left", __iconNode$x);
 
-const __iconNode$t = [
+const __iconNode$w = [
     [
         "path",
         {
@@ -12937,9 +12937,9 @@ const __iconNode$t = [
         }
     ]
 ];
-const ArrowRight = createLucideIcon("arrow-right", __iconNode$t);
+const ArrowRight = createLucideIcon("arrow-right", __iconNode$w);
 
-const __iconNode$s = [
+const __iconNode$v = [
     [
         "path",
         {
@@ -12987,9 +12987,9 @@ const __iconNode$s = [
         }
     ]
 ];
-const Bot = createLucideIcon("bot", __iconNode$s);
+const Bot = createLucideIcon("bot", __iconNode$v);
 
-const __iconNode$r = [
+const __iconNode$u = [
     [
         "path",
         {
@@ -13023,9 +13023,9 @@ const __iconNode$r = [
         }
     ]
 ];
-const Calendar = createLucideIcon("calendar", __iconNode$r);
+const Calendar = createLucideIcon("calendar", __iconNode$u);
 
-const __iconNode$q = [
+const __iconNode$t = [
     [
         "path",
         {
@@ -13082,9 +13082,9 @@ const __iconNode$q = [
         }
     ]
 ];
-const ChartNetwork = createLucideIcon("chart-network", __iconNode$q);
+const ChartNetwork = createLucideIcon("chart-network", __iconNode$t);
 
-const __iconNode$p = [
+const __iconNode$s = [
     [
         "path",
         {
@@ -13093,9 +13093,9 @@ const __iconNode$p = [
         }
     ]
 ];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$p);
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$s);
 
-const __iconNode$o = [
+const __iconNode$r = [
     [
         "path",
         {
@@ -13104,9 +13104,9 @@ const __iconNode$o = [
         }
     ]
 ];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$o);
+const ChevronRight = createLucideIcon("chevron-right", __iconNode$r);
 
-const __iconNode$n = [
+const __iconNode$q = [
     [
         "path",
         {
@@ -13122,9 +13122,9 @@ const __iconNode$n = [
         }
     ]
 ];
-const ChevronsDown = createLucideIcon("chevrons-down", __iconNode$n);
+const ChevronsDown = createLucideIcon("chevrons-down", __iconNode$q);
 
-const __iconNode$m = [
+const __iconNode$p = [
     [
         "path",
         {
@@ -13140,9 +13140,9 @@ const __iconNode$m = [
         }
     ]
 ];
-const ChevronsUp = createLucideIcon("chevrons-up", __iconNode$m);
+const ChevronsUp = createLucideIcon("chevrons-up", __iconNode$p);
 
-const __iconNode$l = [
+const __iconNode$o = [
     [
         "circle",
         {
@@ -13173,9 +13173,9 @@ const __iconNode$l = [
         }
     ]
 ];
-const CircleAlert = createLucideIcon("circle-alert", __iconNode$l);
+const CircleAlert = createLucideIcon("circle-alert", __iconNode$o);
 
-const __iconNode$k = [
+const __iconNode$n = [
     [
         "path",
         {
@@ -13191,9 +13191,36 @@ const __iconNode$k = [
         }
     ]
 ];
-const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$k);
+const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$n);
 
-const __iconNode$j = [
+const __iconNode$m = [
+    [
+        "circle",
+        {
+            cx: "12",
+            cy: "12",
+            r: "10",
+            key: "1mglay"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8",
+            key: "1h4pet"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "M12 18V6",
+            key: "zqpxq5"
+        }
+    ]
+];
+const CircleDollarSign = createLucideIcon("circle-dollar-sign", __iconNode$m);
+
+const __iconNode$l = [
     [
         "circle",
         {
@@ -13211,9 +13238,9 @@ const __iconNode$j = [
         }
     ]
 ];
-const Clock = createLucideIcon("clock", __iconNode$j);
+const Clock = createLucideIcon("clock", __iconNode$l);
 
-const __iconNode$i = [
+const __iconNode$k = [
     [
         "path",
         {
@@ -13229,9 +13256,9 @@ const __iconNode$i = [
         }
     ]
 ];
-const CloudLightning = createLucideIcon("cloud-lightning", __iconNode$i);
+const CloudLightning = createLucideIcon("cloud-lightning", __iconNode$k);
 
-const __iconNode$h = [
+const __iconNode$j = [
     [
         "rect",
         {
@@ -13252,9 +13279,9 @@ const __iconNode$h = [
         }
     ]
 ];
-const Copy = createLucideIcon("copy", __iconNode$h);
+const Copy = createLucideIcon("copy", __iconNode$j);
 
-const __iconNode$g = [
+const __iconNode$i = [
     [
         "path",
         {
@@ -13362,9 +13389,9 @@ const __iconNode$g = [
         }
     ]
 ];
-const Cpu = createLucideIcon("cpu", __iconNode$g);
+const Cpu = createLucideIcon("cpu", __iconNode$i);
 
-const __iconNode$f = [
+const __iconNode$h = [
     [
         "line",
         {
@@ -13383,9 +13410,9 @@ const __iconNode$f = [
         }
     ]
 ];
-const DollarSign = createLucideIcon("dollar-sign", __iconNode$f);
+const DollarSign = createLucideIcon("dollar-sign", __iconNode$h);
 
-const __iconNode$e = [
+const __iconNode$g = [
     [
         "path",
         {
@@ -13415,9 +13442,9 @@ const __iconNode$e = [
         }
     ]
 ];
-const FileInput = createLucideIcon("file-input", __iconNode$e);
+const FileInput = createLucideIcon("file-input", __iconNode$g);
 
-const __iconNode$d = [
+const __iconNode$f = [
     [
         "path",
         {
@@ -13447,9 +13474,69 @@ const __iconNode$d = [
         }
     ]
 ];
-const FileOutput = createLucideIcon("file-output", __iconNode$d);
+const FileOutput = createLucideIcon("file-output", __iconNode$f);
 
-const __iconNode$c = [
+const __iconNode$e = [
+    [
+        "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$e);
+
+const __iconNode$d = [
     [
         "line",
         {
@@ -13491,9 +13578,9 @@ const __iconNode$c = [
         }
     ]
 ];
-const Hash = createLucideIcon("hash", __iconNode$c);
+const Hash = createLucideIcon("hash", __iconNode$d);
 
-const __iconNode$b = [
+const __iconNode$c = [
     [
         "circle",
         {
@@ -13518,9 +13605,9 @@ const __iconNode$b = [
         }
     ]
 ];
-const Info = createLucideIcon("info", __iconNode$b);
+const Info = createLucideIcon("info", __iconNode$c);
 
-const __iconNode$a = [
+const __iconNode$b = [
     [
         "path",
         {
@@ -13557,9 +13644,9 @@ const __iconNode$a = [
         }
     ]
 ];
-const ListChecks = createLucideIcon("list-checks", __iconNode$a);
+const ListChecks = createLucideIcon("list-checks", __iconNode$b);
 
-const __iconNode$9 = [
+const __iconNode$a = [
     [
         "path",
         {
@@ -13575,9 +13662,9 @@ const __iconNode$9 = [
         }
     ]
 ];
-const MessagesSquare = createLucideIcon("messages-square", __iconNode$9);
+const MessagesSquare = createLucideIcon("messages-square", __iconNode$a);
 
-const __iconNode$8 = [
+const __iconNode$9 = [
     [
         "path",
         {
@@ -13586,9 +13673,9 @@ const __iconNode$8 = [
         }
     ]
 ];
-const MessageSquare = createLucideIcon("message-square", __iconNode$8);
+const MessageSquare = createLucideIcon("message-square", __iconNode$9);
 
-const __iconNode$7 = [
+const __iconNode$8 = [
     [
         "rect",
         {
@@ -13608,9 +13695,9 @@ const __iconNode$7 = [
         }
     ]
 ];
-const PanelLeft = createLucideIcon("panel-left", __iconNode$7);
+const PanelLeft = createLucideIcon("panel-left", __iconNode$8);
 
-const __iconNode$6 = [
+const __iconNode$7 = [
     [
         "path",
         {
@@ -13640,9 +13727,9 @@ const __iconNode$6 = [
         }
     ]
 ];
-const RefreshCw = createLucideIcon("refresh-cw", __iconNode$6);
+const RefreshCw = createLucideIcon("refresh-cw", __iconNode$7);
 
-const __iconNode$5 = [
+const __iconNode$6 = [
     [
         "path",
         {
@@ -13679,9 +13766,9 @@ const __iconNode$5 = [
         }
     ]
 ];
-const Scale = createLucideIcon("scale", __iconNode$5);
+const Scale = createLucideIcon("scale", __iconNode$6);
 
-const __iconNode$4 = [
+const __iconNode$5 = [
     [
         "path",
         {
@@ -13704,9 +13791,9 @@ const __iconNode$4 = [
         }
     ]
 ];
-const Share = createLucideIcon("share", __iconNode$4);
+const Share = createLucideIcon("share", __iconNode$5);
 
-const __iconNode$3 = [
+const __iconNode$4 = [
     [
         "circle",
         {
@@ -13735,9 +13822,9 @@ const __iconNode$3 = [
         }
     ]
 ];
-const Target = createLucideIcon("target", __iconNode$3);
+const Target = createLucideIcon("target", __iconNode$4);
 
-const __iconNode$2 = [
+const __iconNode$3 = [
     [
         "line",
         {
@@ -13768,7 +13855,67 @@ const __iconNode$2 = [
         }
     ]
 ];
-const Timer = createLucideIcon("timer", __iconNode$2);
+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"
+        }
+    ]
+];
+const UnfoldVertical = createLucideIcon("unfold-vertical", __iconNode$2);
 
 const __iconNode$1 = [
     [
@@ -15953,19 +16100,18 @@ const useComponentTheme = (themeProp)=>{
     return themeProp || contextTheme;
 };
 
-const Edge = ({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, style = {}, markerEnd, bidirectional = false, data, clientToSvgCoords, svgRef })=>{
+const Edge = ({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, animated = false, style = {}, markerEnd, bidirectional = false, data, clientToSvgCoords, svgRef })=>{
     const [isHovered, setIsHovered] = useState(false);
     const { theme } = useTheme$1();
     const themeColors = theme.colors;
-    // Function to determine stroke color based on edge status and theme
     const getStrokeColor = ()=>{
         const status = data?.details?.status;
-        data?.details?.output;
-        // Check for error indicators
-        const hasError = status === "Failed";
-        if (hasError) {
+        if (status === "Failed") {
             return themeColors.destructive;
         }
+        if (animated) {
+            return themeColors.primary;
+        }
         return themeColors.mutedForeground;
     };
     const [edgePath] = useMemo(()=>{
@@ -20853,6 +20999,25 @@ function cn(...inputs) {
     }
     return text.substring(0, maxLength - 3) + "...";
 }
+/**
+ * True for plain object literals (own enumerable keys, not arrays, Date, etc.).
+ */ function isPlainObject(value) {
+    return value !== null && typeof value === "object" && !Array.isArray(value) && value.constructor === Object;
+}
+/**
+ * Escapes `\` and `.` in a segment so dot-delimited path keys stay unambiguous (e.g. JSON tree UIs).
+ */ function escapeDotPathSegment(segment) {
+    return segment.replace(/\\/g, "\\\\").replace(/\./g, "\\.");
+}
+/**
+ * Compact JSON-like string for tree / debug views: strings use JSON quoting; null and undefined as words.
+ */ function formatJsonTreePrimitive(value) {
+    if (value === null) return "null";
+    if (value === undefined) return "undefined";
+    if (typeof value === "string") return JSON.stringify(value);
+    if (typeof value === "number" || typeof value === "boolean") return String(value);
+    return String(value);
+}
 /**
  * Styled-components utility for conditional styling
  * @param condition - The condition to check
@@ -21128,500 +21293,6 @@ const AppleIcon = ({ width = "1.5rem", height = "1.5rem" })=>/*#__PURE__*/ React
         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"
     }));
 
-const TooltipContainer = styled.div`
-  position: relative;
-  display: inline-block;
-`;
-const TooltipContent = styled.div`
-  position: absolute;
-  z-index: 1000;
-  padding: 8px 12px;
-  font-weight: 400;
-  background-color: ${({ themeColors })=>themeColors.popover};
-  color: ${({ themeColors })=>themeColors.popoverForeground};
-  border: 1px solid ${({ themeColors })=>themeColors.border};
-  border-radius: 6px;
-  font-size: 12px;
-  line-height: 1.4;
-  white-space: nowrap;
-  box-shadow:
-    0 4px 6px -1px rgba(0, 0, 0, 0.1),
-    0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  opacity: ${({ isVisible })=>isVisible ? 1 : 0};
-  visibility: ${({ isVisible })=>isVisible ? "visible" : "hidden"};
-  transition:
-    opacity 0.15s ease-in-out,
-    visibility 0.15s ease-in-out;
-  pointer-events: none;
-
-  /* Arrow */
-  &::before {
-    content: "";
-    position: absolute;
-    width: 0;
-    height: 0;
-    border: 4px solid transparent;
-  }
-
-  /* Placement-specific positioning and arrow */
-  ${({ placement, themeColors })=>{
-    switch(placement){
-        case "top":
-            return `
-          bottom: 100%;
-          left: 50%;
-          transform: translateX(-50%);
-          margin-bottom: 8px;
-          &::before {
-            top: 100%;
-            left: 50%;
-            transform: translateX(-50%);
-            border-top-color: ${themeColors.border};
-          }
-          &::after {
-            content: "";
-            position: absolute;
-            top: 100%;
-            left: 50%;
-            transform: translateX(-50%);
-            width: 0;
-            height: 0;
-            border: 3px solid transparent;
-            border-top-color: ${themeColors.popover};
-          }
-        `;
-        case "bottom":
-            return `
-          top: 100%;
-          left: 50%;
-          transform: translateX(-50%);
-          margin-top: 8px;
-          &::before {
-            bottom: 100%;
-            left: 50%;
-            transform: translateX(-50%);
-            border-bottom-color: ${themeColors.border};
-          }
-          &::after {
-            content: "";
-            position: absolute;
-            bottom: 100%;
-            left: 50%;
-            transform: translateX(-50%);
-            width: 0;
-            height: 0;
-            border: 3px solid transparent;
-            border-bottom-color: ${themeColors.popover};
-          }
-        `;
-        case "left":
-            return `
-          right: 100%;
-          top: 50%;
-          transform: translateY(-50%);
-          margin-right: 8px;
-          &::before {
-            left: 100%;
-            top: 50%;
-            transform: translateY(-50%);
-            border-left-color: ${themeColors.border};
-          }
-          &::after {
-            content: "";
-            position: absolute;
-            left: 100%;
-            top: 50%;
-            transform: translateY(-50%);
-            width: 0;
-            height: 0;
-            border: 3px solid transparent;
-            border-left-color: ${themeColors.popover};
-          }
-        `;
-        case "right":
-            return `
-          left: 100%;
-          top: 50%;
-          transform: translateY(-50%);
-          margin-left: 8px;
-          &::before {
-            right: 100%;
-            top: 50%;
-            transform: translateY(-50%);
-            border-right-color: ${themeColors.border};
-          }
-          &::after {
-            content: "";
-            position: absolute;
-            right: 100%;
-            top: 50%;
-            transform: translateY(-50%);
-            width: 0;
-            height: 0;
-            border: 3px solid transparent;
-            border-right-color: ${themeColors.popover};
-          }
-        `;
-        case "topLeft":
-            return `
-          bottom: 100%;
-          right: 0;
-          margin-bottom: 8px;
-          &::before {
-            top: 100%;
-            right: 8px;
-            border-top-color: ${themeColors.border};
-          }
-          &::after {
-            content: "";
-            position: absolute;
-            top: 100%;
-            right: 8px;
-            width: 0;
-            height: 0;
-            border: 3px solid transparent;
-            border-top-color: ${themeColors.popover};
-          }
-        `;
-        case "topRight":
-            return `
-          bottom: 100%;
-          left: 0;
-          margin-bottom: 8px;
-          &::before {
-            top: 100%;
-            left: 8px;
-            border-top-color: ${themeColors.border};
-          }
-          &::after {
-            content: "";
-            position: absolute;
-            top: 100%;
-            left: 8px;
-            width: 0;
-            height: 0;
-            border: 3px solid transparent;
-            border-top-color: ${themeColors.popover};
-          }
-        `;
-        case "bottomLeft":
-            return `
-          top: 100%;
-          right: 0;
-          margin-top: 8px;
-          &::before {
-            bottom: 100%;
-            right: 8px;
-            border-bottom-color: ${themeColors.border};
-          }
-          &::after {
-            content: "";
-            position: absolute;
-            bottom: 100%;
-            right: 8px;
-            width: 0;
-            height: 0;
-            border: 3px solid transparent;
-            border-bottom-color: ${themeColors.popover};
-          }
-        `;
-        case "bottomRight":
-            return `
-          top: 100%;
-          left: 0;
-          margin-top: 8px;
-          &::before {
-            bottom: 100%;
-            left: 8px;
-            border-bottom-color: ${themeColors.border};
-          }
-          &::after {
-            content: "";
-            position: absolute;
-            bottom: 100%;
-            left: 8px;
-            width: 0;
-            height: 0;
-            border: 3px solid transparent;
-            border-bottom-color: ${themeColors.popover};
-          }
-        `;
-        case "leftTop":
-            return `
-          right: 100%;
-          bottom: 0;
-          margin-right: 8px;
-          &::before {
-            left: 100%;
-            bottom: 8px;
-            border-left-color: ${themeColors.border};
-          }
-          &::after {
-            content: "";
-            position: absolute;
-            left: 100%;
-            bottom: 8px;
-            width: 0;
-            height: 0;
-            border: 3px solid transparent;
-            border-left-color: ${themeColors.popover};
-          }
-        `;
-        case "leftBottom":
-            return `
-          right: 100%;
-          top: 0;
-          margin-right: 8px;
-          &::before {
-            left: 100%;
-            top: 8px;
-            border-left-color: ${themeColors.border};
-          }
-          &::after {
-            content: "";
-            position: absolute;
-            left: 100%;
-            top: 8px;
-            width: 0;
-            height: 0;
-            border: 3px solid transparent;
-            border-left-color: ${themeColors.popover};
-          }
-        `;
-        case "rightTop":
-            return `
-          left: 100%;
-          bottom: 0;
-          margin-left: 8px;
-          &::before {
-            right: 100%;
-            bottom: 8px;
-            border-right-color: ${themeColors.border};
-          }
-          &::after {
-            content: "";
-            position: absolute;
-            right: 100%;
-            bottom: 8px;
-            width: 0;
-            height: 0;
-            border: 3px solid transparent;
-            border-right-color: ${themeColors.popover};
-          }
-        `;
-        case "rightBottom":
-            return `
-          left: 100%;
-          top: 0;
-          margin-left: 8px;
-          &::before {
-            right: 100%;
-            top: 8px;
-            border-right-color: ${themeColors.border};
-          }
-          &::after {
-            content: "";
-            position: absolute;
-            right: 100%;
-            top: 8px;
-            width: 0;
-            height: 0;
-            border: 3px solid transparent;
-            border-right-color: ${themeColors.popover};
-          }
-        `;
-        default:
-            return `
-          bottom: 100%;
-          left: 50%;
-          transform: translateX(-50%);
-          margin-bottom: 8px;
-          &::before {
-            top: 100%;
-            left: 50%;
-            transform: translateX(-50%);
-            border-top-color: ${themeColors.border};
-          }
-          &::after {
-            content: "";
-            position: absolute;
-            top: 100%;
-            left: 50%;
-            transform: translateX(-50%);
-            width: 0;
-            height: 0;
-            border: 3px solid transparent;
-            border-top-color: ${themeColors.popover};
-          }
-        `;
-    }
-}}
-`;
-const Tooltip$1 = ({ children, content, placement = "top", delay = 300 })=>{
-    const { theme } = useTheme$1();
-    const [isVisible, setIsVisible] = React.useState(false);
-    const timeoutRef = React.useRef();
-    const showTooltip = ()=>{
-        if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-        }
-        timeoutRef.current = setTimeout(()=>{
-            setIsVisible(true);
-        }, delay);
-    };
-    const hideTooltip = ()=>{
-        if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-        }
-        setIsVisible(false);
-    };
-    React.useEffect(()=>{
-        return ()=>{
-            if (timeoutRef.current) {
-                clearTimeout(timeoutRef.current);
-            }
-        };
-    }, []);
-    return /*#__PURE__*/ React.createElement(TooltipContainer, {
-        onMouseEnter: showTooltip,
-        onMouseLeave: hideTooltip,
-        onFocus: showTooltip,
-        onBlur: hideTooltip
-    }, children, /*#__PURE__*/ React.createElement(TooltipContent, {
-        isVisible: isVisible,
-        placement: placement,
-        themeColors: theme.colors,
-        role: "tooltip"
-    }, content));
-};
-
-const BadgeContainer$3 = styled.div`
-  display: inline-flex;
-  align-items: center;
-  border-radius: 9999px;
-  border: 1px solid transparent;
-  padding: 0.125rem 0.625rem;
-  font-size: 0.75rem;
-  font-weight: 600;
-  transition: colors 0.2s ease-in-out;
-  outline: none;
-
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
-  }
-
-  ${({ variant, themeColors })=>{
-    switch(variant){
-        case "default":
-            return `
-          background-color: ${themeColors.primary};
-          color: ${themeColors.primaryForeground};
-          &:hover {
-            background-color: ${themeColors.primary};
-            opacity: 0.9;
-          }
-        `;
-        case "secondary":
-            return `
-          background-color: ${themeColors.secondary};
-          color: ${themeColors.secondaryForeground};
-          &:hover {
-            background-color: ${themeColors.muted};
-          }
-        `;
-        case "destructive":
-            return `
-          background-color: ${themeColors.destructive};
-          color: ${themeColors.destructiveForeground};
-          &:hover {
-            background-color: ${themeColors.destructive};
-            opacity: 0.9;
-          }
-        `;
-        case "outline":
-            return `
-          background-color: transparent;
-          color: ${themeColors.cardForeground};
-          border-color: ${themeColors.border};
-        `;
-        case "cost":
-            return `
-          background-color: ${themeColors.secondary};
-          color: ${themeColors.secondaryForeground};
-          &:hover {
-            background-color: ${themeColors.muted};
-          }
-        `;
-        case "gray":
-            return `
-          background-color: ${themeColors.secondary};
-          color: ${themeColors.secondaryForeground};
-          &:hover {
-            background-color: ${themeColors.muted};
-          }
-        `;
-        case "latency":
-            return `
-          background-color: ${themeColors.secondary};
-          color: ${themeColors.secondaryForeground};
-          &:hover {
-            background-color: ${themeColors.muted};
-          }
-        `;
-        case "latencyLow":
-            return `
-          background-color: ${themeColors.secondary};
-          color: ${themeColors.secondaryForeground};
-          &:hover {
-            background-color: ${themeColors.muted};
-          }
-        `;
-        case "latencyMedium":
-            return `
-          background-color: ${themeColors.secondary};
-          color: ${themeColors.secondaryForeground};
-          &:hover {
-            background-color: ${themeColors.muted};
-          }
-        `;
-        case "latencyHigh":
-            return `
-          background-color: ${themeColors.destructive};
-          color: ${themeColors.destructiveForeground};
-          &:hover {
-            background-color: ${themeColors.destructive};
-            opacity: 0.9;
-          }
-        `;
-        default:
-            return `
-          background-color: ${themeColors.primary};
-          color: ${themeColors.primaryForeground};
-          &:hover {
-            background-color: ${themeColors.primary};
-            opacity: 0.9;
-          }
-        `;
-    }
-}}
-`;
-const Badge = ({ variant = "default", children, title, placement = "top" })=>{
-    const { theme } = useTheme$1();
-    const themeColors = theme.colors;
-    const badgeContent = /*#__PURE__*/ React.createElement(BadgeContainer$3, {
-        variant: variant,
-        themeColors: themeColors
-    }, children);
-    if (title) {
-        return /*#__PURE__*/ React.createElement(Tooltip$1, {
-            content: title,
-            placement: placement
-        }, badgeContent);
-    }
-    return badgeContent;
-};
-
 function noop$2() {}
 const { resetWarned: rcResetWarned } = warning$2;
 let deprecatedWarnList = null;
@@ -23648,7 +23319,7 @@ const genActionStyle = (token)=>{
         }
     };
 };
-const prepareComponentToken$n = (token)=>{
+const prepareComponentToken$m = (token)=>{
     const paddingHorizontal = 12; // Fixed value here.
     return {
         withDescriptionIconSize: token.fontSizeHeading3,
@@ -23656,11 +23327,11 @@ const prepareComponentToken$n = (token)=>{
         withDescriptionPadding: `${token.paddingMD}px ${token.paddingContentHorizontalLG}px`
     };
 };
-var useStyle$u = genStyleHooks('Alert', (token)=>[
+var useStyle$t = genStyleHooks('Alert', (token)=>[
         genBaseStyle$6(token),
         genTypeStyle(token),
         genActionStyle(token)
-    ], prepareComponentToken$n);
+    ], prepareComponentToken$m);
 
 const IconNode = (props)=>{
     const { icon, type, className, style, successIcon, infoIcon, warningIcon, errorIcon } = props;
@@ -23712,7 +23383,7 @@ const Alert$1 = /*#__PURE__*/ React.forwardRef((props, ref)=>{
         }));
     const { getPrefixCls, direction, closable: contextClosable, closeIcon: contextCloseIcon, className: contextClassName, style: contextStyle, classNames: contextClassNames, styles: contextStyles, successIcon, infoIcon, warningIcon, errorIcon } = useComponentConfig('alert');
     const prefixCls = getPrefixCls('alert', customizePrefixCls);
-    const [hashId, cssVarCls] = useStyle$u(prefixCls);
+    const [hashId, cssVarCls] = useStyle$t(prefixCls);
     const { onClose: closableOnClose, afterClose: closableAfterClose } = closable && typeof closable === 'object' ? closable : {};
     const handleClose = (e)=>{
         setClosed(true);
@@ -24752,19 +24423,19 @@ const genMessageStyle = (token)=>{
         }
     ];
 };
-const prepareComponentToken$m = (token)=>({
+const prepareComponentToken$l = (token)=>({
         zIndexPopup: token.zIndexPopupBase + CONTAINER_MAX_OFFSET + 10,
         contentBg: token.colorBgElevated,
         contentPadding: `${(token.controlHeightLG - token.fontSize * token.lineHeight) / 2}px ${token.paddingSM}px`
     });
 // ============================== Export ==============================
-var useStyle$t = genStyleHooks('Message', (token)=>{
+var useStyle$s = genStyleHooks('Message', (token)=>{
     // Gen-style functions here
     const combinedToken = mergeToken(token, {
         height: 150
     });
     return genMessageStyle(combinedToken);
-}, prepareComponentToken$m);
+}, prepareComponentToken$l);
 
 const TypeIcon = {
     info: /*#__PURE__*/ React.createElement(InfoCircleFilled, null),
@@ -24798,7 +24469,7 @@ const PureContent = (props)=>{
     const { getPrefixCls, className: contextClassName, style: contextStyle, classNames: contextClassNames, styles: contextStyles } = useComponentConfig('message');
     const prefixCls = staticPrefixCls || getPrefixCls('message');
     const rootCls = useCSSVarCls(prefixCls);
-    const [hashId, cssVarCls] = useStyle$t(prefixCls, rootCls);
+    const [hashId, cssVarCls] = useStyle$s(prefixCls, rootCls);
     const [mergedClassNames, mergedStyles] = useMergeSemantic([
         contextClassNames,
         messageClassNames
@@ -24853,7 +24524,7 @@ const DEFAULT_OFFSET = 8;
 const DEFAULT_DURATION = 3;
 const Wrapper = ({ children, prefixCls })=>{
     const rootCls = useCSSVarCls(prefixCls);
-    const [hashId, cssVarCls] = useStyle$t(prefixCls, rootCls);
+    const [hashId, cssVarCls] = useStyle$s(prefixCls, rootCls);
     return /*#__PURE__*/ React.createElement(NotificationProvider, {
         classNames: {
             list: clsx(hashId, cssVarCls, rootCls)
@@ -25131,7 +24802,7 @@ const genWaveStyle = (token)=>{
         }
     };
 };
-var useStyle$s = genComponentStyleHook('Wave', genWaveStyle);
+var useStyle$r = genComponentStyleHook('Wave', genWaveStyle);
 
 const TARGET_CLS = `${defaultPrefixCls}-wave-target`;
 
@@ -25306,7 +24977,7 @@ const Wave = (props)=>{
     const containerRef = useRef(null);
     // ============================== Style ===============================
     const prefixCls = getPrefixCls('wave');
-    const hashId = useStyle$s(prefixCls);
+    const hashId = useStyle$r(prefixCls);
     // =============================== Wave ===============================
     const showWave = useWave(containerRef, clsx(prefixCls, hashId), component, colorSource);
     // ============================== Effect ==============================
@@ -25384,7 +25055,7 @@ const genSpaceCompactStyle = (token)=>{
     };
 };
 // ============================== Export ==============================
-var useStyle$r = genStyleHooks([
+var useStyle$q = genStyleHooks([
     'Space',
     'Compact'
 ], genSpaceCompactStyle, ()=>({}), {
@@ -25443,7 +25114,7 @@ const Compact$1 = (props)=>{
     const [mergedOrientation, mergedVertical] = useOrientation(orientation, vertical, direction);
     const mergedSize = useSize((ctx)=>size ?? ctx);
     const prefixCls = getPrefixCls('space-compact', customizePrefixCls);
-    const [hashId] = useStyle$r(prefixCls);
+    const [hashId] = useStyle$q(prefixCls);
     const clx = clsx(prefixCls, hashId, {
         [`${prefixCls}-rtl`]: directionConfig === 'rtl',
         [`${prefixCls}-block`]: block,
@@ -26658,7 +26329,7 @@ const genGhostStyle = (token)=>{
         }
     };
 };
-const prepareComponentToken$l = (token)=>({
+const prepareComponentToken$k = (token)=>({
         headerPadding: `${token.paddingSM}px ${token.padding}px`,
         headerBg: token.colorFillAlter,
         contentPadding: `${token.padding}px 16px`,
@@ -26667,7 +26338,7 @@ const prepareComponentToken$l = (token)=>({
         borderlessContentPadding: `${token.paddingXXS}px 16px ${token.padding}px`,
         borderlessContentBg: 'transparent'
     });
-var useStyle$q = genStyleHooks('Collapse', (token)=>{
+var useStyle$p = genStyleHooks('Collapse', (token)=>{
     const collapseToken = mergeToken(token, {
         collapseHeaderPaddingSM: `${unit(token.paddingXS)} ${unit(token.paddingSM)}`,
         collapseHeaderPaddingLG: `${unit(token.padding)} ${unit(token.paddingLG)}`,
@@ -26680,7 +26351,7 @@ var useStyle$q = genStyleHooks('Collapse', (token)=>{
         genArrowStyle(collapseToken),
         genCollapseMotion(collapseToken)
     ];
-}, prepareComponentToken$l);
+}, prepareComponentToken$k);
 
 const Collapse = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const { getPrefixCls, direction, expandIcon: contextExpandIcon, className: contextClassName, style: contextStyle, classNames: contextClassNames, styles: contextStyles } = useComponentConfig('collapse');
@@ -26688,7 +26359,7 @@ const Collapse = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const mergedSize = useSize((ctx)=>customizeSize ?? ctx ?? 'middle');
     const prefixCls = getPrefixCls('collapse', customizePrefixCls);
     const rootPrefixCls = getPrefixCls();
-    const [hashId, cssVarCls] = useStyle$q(prefixCls);
+    const [hashId, cssVarCls] = useStyle$p(prefixCls);
     const mergedPlacement = expandIconPlacement ?? expandIconPosition ?? 'start';
     // =========== Merged Props for Semantic ===========
     const mergedProps = {
@@ -26811,7 +26482,7 @@ const prepareToken$2 = (token)=>{
     });
     return buttonToken;
 };
-const prepareComponentToken$k = (token)=>{
+const prepareComponentToken$j = (token)=>{
     const contentFontSize = token.contentFontSize ?? token.fontSize;
     const contentFontSizeSM = token.contentFontSizeSM ?? token.fontSize;
     const contentFontSizeLG = token.contentFontSizeLG ?? token.fontSizeLG;
@@ -27321,7 +26992,7 @@ const genBlockButtonStyle = (token)=>{
     };
 };
 // ============================== Export ==============================
-var useStyle$p = genStyleHooks('Button', (token)=>{
+var useStyle$o = genStyleHooks('Button', (token)=>{
     const buttonToken = prepareToken$2(token);
     return [
         // Shared
@@ -27337,7 +27008,7 @@ var useStyle$p = genStyleHooks('Button', (token)=>{
         // Button Group
         genGroupStyle$1(buttonToken)
     ];
-}, prepareComponentToken$k, {
+}, prepareComponentToken$j, {
     unitless: {
         fontWeight: true,
         contentLineHeight: true,
@@ -27521,7 +27192,7 @@ var Compact = genSubStyleComponent([
         genCompactItemVerticalStyle(buttonToken),
         genButtonCompactStyle(buttonToken)
     ];
-}, prepareComponentToken$k);
+}, prepareComponentToken$j);
 
 function getLoadingConfig(loading) {
     if (typeof loading === 'object' && loading) {
@@ -27629,7 +27300,7 @@ const InternalCompoundedButton = /*#__PURE__*/ React__default.forwardRef((props,
     const mergedColorText = isDanger ? 'dangerous' : mergedColor;
     const mergedInsertSpace = autoInsertSpace ?? contextAutoInsertSpace ?? true;
     const prefixCls = getPrefixCls('btn', customizePrefixCls);
-    const [hashId, cssVarCls] = useStyle$p(prefixCls);
+    const [hashId, cssVarCls] = useStyle$o(prefixCls);
     const disabled = useContext(DisabledContext);
     const mergedDisabled = customDisabled ?? disabled;
     const groupSize = useContext(GroupSizeContext);
@@ -28199,7 +27870,7 @@ const genBaseStyle$4 = (token)=>{
     };
 };
 // ============================== Export ==============================
-const prepareComponentToken$j = (token)=>{
+const prepareComponentToken$i = (token)=>{
     const { colorFillContent, colorFill } = token;
     const gradientFromColor = colorFillContent;
     const gradientToColor = colorFill;
@@ -28214,7 +27885,7 @@ const prepareComponentToken$j = (token)=>{
         paragraphLiHeight: token.controlHeight / 2
     };
 };
-var useStyle$o = genStyleHooks('Skeleton', (token)=>{
+var useStyle$n = genStyleHooks('Skeleton', (token)=>{
     const { componentCls, calc } = token;
     const skeletonToken = mergeToken(token, {
         skeletonAvatarCls: `${componentCls}-avatar`,
@@ -28231,7 +27902,7 @@ var useStyle$o = genStyleHooks('Skeleton', (token)=>{
         skeletonLoadingMotionDuration: '1.4s'
     });
     return genBaseStyle$4(skeletonToken);
-}, prepareComponentToken$j, {
+}, prepareComponentToken$i, {
     deprecatedTokens: [
         [
             'color',
@@ -28248,7 +27919,7 @@ const SkeletonAvatar = (props)=>{
     const { prefixCls: customizePrefixCls, className, classNames, rootClassName, active, style, styles, shape = 'circle', size = 'default', ...rest } = props;
     const { getPrefixCls } = React.useContext(ConfigContext);
     const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
-    const [hashId, cssVarCls] = useStyle$o(prefixCls);
+    const [hashId, cssVarCls] = useStyle$n(prefixCls);
     const cls = clsx(prefixCls, `${prefixCls}-element`, {
         [`${prefixCls}-active`]: active
     }, classNames?.root, className, rootClassName, hashId, cssVarCls);
@@ -28272,7 +27943,7 @@ const SkeletonButton = (props)=>{
     const { prefixCls: customizePrefixCls, className, rootClassName, classNames, active, style, styles, block = false, size = 'default', ...rest } = props;
     const { getPrefixCls } = React.useContext(ConfigContext);
     const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
-    const [hashId, cssVarCls] = useStyle$o(prefixCls);
+    const [hashId, cssVarCls] = useStyle$n(prefixCls);
     const cls = clsx(prefixCls, `${prefixCls}-element`, {
         [`${prefixCls}-active`]: active,
         [`${prefixCls}-block`]: block
@@ -28296,7 +27967,7 @@ const SkeletonNode = (props)=>{
     const { prefixCls: customizePrefixCls, className, classNames, rootClassName, internalClassName, style, styles, active, children } = props;
     const { getPrefixCls } = React.useContext(ConfigContext);
     const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
-    const [hashId, cssVarCls] = useStyle$o(prefixCls);
+    const [hashId, cssVarCls] = useStyle$n(prefixCls);
     const cls = clsx(prefixCls, `${prefixCls}-element`, {
         [`${prefixCls}-active`]: active
     }, hashId, classNames?.root, className, rootClassName, cssVarCls);
@@ -28332,7 +28003,7 @@ const SkeletonInput = (props)=>{
     const { prefixCls: customizePrefixCls, className, classNames, rootClassName, active, block, style, styles, size = 'default', ...rest } = props;
     const { getPrefixCls } = React.useContext(ConfigContext);
     const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
-    const [hashId, cssVarCls] = useStyle$o(prefixCls);
+    const [hashId, cssVarCls] = useStyle$n(prefixCls);
     const cls = clsx(prefixCls, `${prefixCls}-element`, {
         [`${prefixCls}-active`]: active,
         [`${prefixCls}-block`]: block
@@ -28440,7 +28111,7 @@ const Skeleton = (props)=>{
     const { prefixCls: customizePrefixCls, loading, className, rootClassName, classNames, style, styles, children, avatar = false, title = true, paragraph = true, active, round } = props;
     const { getPrefixCls, direction, className: contextClassName, style: contextStyle, classNames: contextClassNames, styles: contextStyles } = useComponentConfig('skeleton');
     const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
-    const [hashId, cssVarCls] = useStyle$o(prefixCls);
+    const [hashId, cssVarCls] = useStyle$n(prefixCls);
     const mergedProps = {
         ...props,
         avatar,
@@ -28966,7 +28637,7 @@ const genSharedEmptyStyle = (token)=>{
     };
 };
 // ============================== Export ==============================
-var useStyle$n = genStyleHooks('Empty', (token)=>{
+var useStyle$m = genStyleHooks('Empty', (token)=>{
     const { componentCls, controlHeightLG, calc } = token;
     const emptyToken = mergeToken(token, {
         emptyImgCls: `${componentCls}-img`,
@@ -28983,7 +28654,7 @@ const Empty = (props)=>{
     const { className, rootClassName, prefixCls: customizePrefixCls, image, description, children, imageStyle, style, classNames, styles, ...restProps } = props;
     const { getPrefixCls, direction, className: contextClassName, style: contextStyle, classNames: contextClassNames, styles: contextStyles, image: contextImage } = useComponentConfig('empty');
     const prefixCls = getPrefixCls('empty', customizePrefixCls);
-    const [hashId, cssVarCls] = useStyle$n(prefixCls);
+    const [hashId, cssVarCls] = useStyle$m(prefixCls);
     const [mergedClassNames, mergedStyles] = useMergeSemantic([
         contextClassNames,
         classNames
@@ -29775,7 +29446,7 @@ const genSelectInputStyle = (token)=>{
     };
 };
 
-const prepareComponentToken$i = (token)=>{
+const prepareComponentToken$h = (token)=>{
     const { fontSize, lineHeight, lineWidth, controlHeight, controlHeightSM, controlHeightLG, paddingXXS, controlPaddingHorizontal, zIndexPopupBase, colorText, fontWeightStrong, controlItemBgActive, controlItemBgHover, colorBgContainer, colorFillSecondary, colorBgContainerDisabled, colorTextDisabled, colorPrimaryHover, colorPrimary, controlOutline } = token;
     // Item height default use `controlHeight - 2 * paddingXXS`,
     // but some case `paddingXXS=0`.
@@ -29943,7 +29614,7 @@ var useSelectStyle = genStyleHooks('Select', (token, { rootPrefixCls })=>{
         genSelectStyle(selectToken),
         genSelectInputStyle(selectToken)
     ];
-}, prepareComponentToken$i, {
+}, prepareComponentToken$h, {
     unitless: {
         optionLineHeight: true,
         optionSelectedFontWeight: true
@@ -30261,16 +29932,6 @@ const getResponsiveMap = (token)=>({
     });
     return token;
 };
-const matchScreen = (screens, screenSizes)=>{
-    if (!screenSizes) {
-        return;
-    }
-    for (const breakpoint of responsiveArray){
-        if (screens[breakpoint] && screenSizes?.[breakpoint] !== undefined) {
-            return screenSizes[breakpoint];
-        }
-    }
-};
 const useResponsiveObserver = ()=>{
     const [, token] = useToken();
     const responsiveMap = getResponsiveMap(validateBreakpoints(token));
@@ -30984,7 +30645,7 @@ const genTooltipStyle = (token)=>{
     ];
 };
 // ============================== Export ==============================
-const prepareComponentToken$h = (token)=>({
+const prepareComponentToken$g = (token)=>({
         zIndexPopup: token.zIndexPopupBase + 70,
         maxWidth: 250,
         ...getArrowOffsetToken({
@@ -30995,7 +30656,7 @@ const prepareComponentToken$h = (token)=>({
             borderRadiusOuter: Math.min(token.borderRadiusOuter, 4)
         }))
     });
-var useStyle$m = ((prefixCls, rootCls, injectStyle = true)=>{
+var useStyle$l = ((prefixCls, rootCls, injectStyle = true)=>{
     const useStyle = genStyleHooks('Tooltip', (token)=>{
         const { borderRadius, colorTextLightSolid, colorBgSpotlight, maxWidth } = token;
         const TooltipToken = mergeToken(token, {
@@ -31009,7 +30670,7 @@ var useStyle$m = ((prefixCls, rootCls, injectStyle = true)=>{
             genTooltipStyle(TooltipToken),
             initZoomMotion(token, 'zoom-big-fast')
         ];
-    }, prepareComponentToken$h, {
+    }, prepareComponentToken$g, {
         resetStyle: false,
         // Popover use Tooltip as internal component. We do not need to handle this.
         injectStyle
@@ -31068,7 +30729,7 @@ const parseColor = (rootPrefixCls, prefixCls, color)=>{
     const prefixCls = getPrefixCls('tooltip', customizePrefixCls);
     const rootPrefixCls = getPrefixCls();
     const rootCls = useCSSVarCls(prefixCls);
-    const [hashId, cssVarCls] = useStyle$m(prefixCls, rootCls);
+    const [hashId, cssVarCls] = useStyle$l(prefixCls, rootCls);
     // Color
     const colorInfo = parseColor(rootPrefixCls, prefixCls, color);
     const arrowContentStyle = colorInfo.arrowStyle;
@@ -31230,7 +30891,7 @@ const InternalTooltip = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const childCls = !childProps.className || typeof childProps.className === 'string' ? clsx(childProps.className, openClassName || `${prefixCls}-open`) : childProps.className;
     // Style
     const rootCls = useCSSVarCls(prefixCls);
-    const [hashId, cssVarCls] = useStyle$m(prefixCls, rootCls, !injectFromPopover);
+    const [hashId, cssVarCls] = useStyle$l(prefixCls, rootCls, !injectFromPopover);
     // Color
     const colorInfo = parseColor(rootPrefixCls, prefixCls, color);
     const arrowContentStyle = colorInfo.arrowStyle;
@@ -31294,12 +30955,12 @@ const InternalTooltip = /*#__PURE__*/ React.forwardRef((props, ref)=>{
         value: contextZIndex
     }, content);
 });
-const Tooltip = InternalTooltip;
+const Tooltip$1 = InternalTooltip;
 if (process.env.NODE_ENV !== 'production') {
-    Tooltip.displayName = 'Tooltip';
+    Tooltip$1.displayName = 'Tooltip';
 }
-Tooltip._InternalPanelDoNotUseOrYouWillBeFired = PurePanel$2;
-Tooltip.UniqueProvider = UniqueProvider;
+Tooltip$1._InternalPanelDoNotUseOrYouWillBeFired = PurePanel$2;
+Tooltip$1.UniqueProvider = UniqueProvider;
 
 const isPrimitive = (value)=>typeof value !== 'object' && typeof value !== 'function' || value === null;
 
@@ -31368,7 +31029,7 @@ const genLayoutStyle = (token)=>{
         }
     };
 };
-const prepareComponentToken$g = (token)=>{
+const prepareComponentToken$f = (token)=>{
     const { colorBgLayout, controlHeight, controlHeightLG, colorText, controlHeightSM, marginXXS, colorTextLightSolid, colorBgContainer } = token;
     const paddingInline = controlHeightLG * 1.25;
     return {
@@ -31409,7 +31070,7 @@ const DEPRECATED_TOKENS = [
         'triggerBg'
     ]
 ];
-genStyleHooks('Layout', genLayoutStyle, prepareComponentToken$g, {
+genStyleHooks('Layout', genLayoutStyle, prepareComponentToken$f, {
     deprecatedTokens: DEPRECATED_TOKENS
 });
 
@@ -31503,10 +31164,10 @@ const genSiderStyle = (token)=>{
         }
     };
 };
-var useStyle$l = genStyleHooks([
+var useStyle$k = genStyleHooks([
     'Layout',
     'Sider'
-], genSiderStyle, prepareComponentToken$g, {
+], genSiderStyle, prepareComponentToken$f, {
     deprecatedTokens: DEPRECATED_TOKENS
 });
 
@@ -31549,7 +31210,7 @@ const Sider = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     // =========================== Prefix ===========================
     const { getPrefixCls, direction } = useContext(ConfigContext);
     const prefixCls = getPrefixCls('layout-sider', customizePrefixCls);
-    const [hashId, cssVarCls] = useStyle$l(prefixCls);
+    const [hashId, cssVarCls] = useStyle$k(prefixCls);
     // ========================= Responsive =========================
     const responsiveHandlerRef = useRef(null);
     responsiveHandlerRef.current = (mql)=>{
@@ -31744,7 +31405,7 @@ const MenuItem = (props)=>{
             const resolvedClassNames = tooltipConfig.classNames(info);
             return mergeTooltipRootClassName(resolvedClassNames);
         } : mergeTooltipRootClassName(tooltipConfig?.classNames);
-        returnNode = /*#__PURE__*/ React.createElement(Tooltip, {
+        returnNode = /*#__PURE__*/ React.createElement(Tooltip$1, {
             ...tooltipProps,
             placement: mergedTooltipPlacement,
             classNames: mergedTooltipClassNames
@@ -32541,7 +32202,7 @@ const getBaseStyle = (token)=>{
         }
     ];
 };
-const prepareComponentToken$f = (token)=>{
+const prepareComponentToken$e = (token)=>{
     const { colorPrimary, colorError, colorTextDisabled, colorErrorBg, colorText, colorTextDescription, colorBgContainer, colorFillAlter, colorFillContent, lineWidth, lineWidthBold, controlItemBgActive, colorBgTextHover, controlHeightLG, lineHeight, colorBgElevated, marginXXS, padding, fontSize, controlHeightSM, fontSizeLG, colorTextLightSolid, colorErrorHover } = token;
     const activeBarWidth = token.activeBarWidth ?? 0;
     const activeBarBorderWidth = token.activeBarBorderWidth ?? lineWidth;
@@ -32635,7 +32296,7 @@ const prepareComponentToken$f = (token)=>{
     };
 };
 // ============================== Export ==============================
-var useStyle$k = ((prefixCls, rootCls = prefixCls, injectStyle = true)=>{
+var useStyle$j = ((prefixCls, rootCls = prefixCls, injectStyle = true)=>{
     const useStyle = genStyleHooks('Menu', (token)=>{
         const { colorBgElevated, controlHeightLG, fontSize, darkItemColor, darkDangerItemColor, darkItemBg, darkSubMenuItemBg, darkItemSelectedColor, darkItemSelectedBg, darkDangerItemSelectedBg, darkItemHoverBg, darkGroupTitleColor, darkItemHoverColor, darkItemDisabledColor, darkDangerItemHoverColor, darkDangerItemSelectedColor, darkDangerItemActiveBg, popupBg, darkPopupBg } = token;
         const menuArrowSize = token.calc(fontSize).div(7).mul(5).equal();
@@ -32695,7 +32356,7 @@ var useStyle$k = ((prefixCls, rootCls = prefixCls, injectStyle = true)=>{
             initSlideMotion(menuToken, 'slide-down'),
             initZoomMotion(menuToken, 'zoom-big')
         ];
-    }, prepareComponentToken$f, {
+    }, prepareComponentToken$e, {
         deprecatedTokens: [
             [
                 'colorGroupTitle',
@@ -32933,7 +32594,7 @@ const InternalMenu = /*#__PURE__*/ forwardRef((props, ref)=>{
     };
     const prefixCls = getPrefixCls('menu', customizePrefixCls || overrideObj.prefixCls);
     const rootCls = useCSSVarCls(prefixCls);
-    const [hashId, cssVarCls] = useStyle$k(prefixCls, rootCls, !override);
+    const [hashId, cssVarCls] = useStyle$j(prefixCls, rootCls, !override);
     const menuClassName = clsx(`${prefixCls}-${theme}`, contextClassName, className);
     // ====================== ExpandIcon ========================
     const mergedExpandIcon = React.useMemo(()=>{
@@ -33320,7 +32981,7 @@ const genBaseStyle$2 = (token)=>{
     ];
 };
 // ============================== Export ==============================
-const prepareComponentToken$e = (token)=>({
+const prepareComponentToken$d = (token)=>({
         zIndexPopup: token.zIndexPopupBase + 50,
         paddingBlock: (token.controlHeight - token.fontSize * token.lineHeight) / 2,
         ...getArrowOffsetToken({
@@ -33329,7 +32990,7 @@ const prepareComponentToken$e = (token)=>({
         }),
         ...getArrowToken(token)
     });
-var useStyle$j = genStyleHooks('Dropdown', (token)=>{
+var useStyle$i = genStyleHooks('Dropdown', (token)=>{
     const { marginXXS, sizePopupArrow, paddingXXS, componentCls } = token;
     const dropdownToken = mergeToken(token, {
         menuCls: `${componentCls}-menu`,
@@ -33340,7 +33001,7 @@ var useStyle$j = genStyleHooks('Dropdown', (token)=>{
         genBaseStyle$2(dropdownToken),
         genStatusStyle(dropdownToken)
     ];
-}, prepareComponentToken$e, {
+}, prepareComponentToken$d, {
     resetStyle: false
 });
 
@@ -33412,7 +33073,7 @@ const Dropdown$1 = (props)=>{
     ]);
     const prefixCls = getPrefixCls('dropdown', customizePrefixCls);
     const rootCls = useCSSVarCls(prefixCls);
-    const [hashId, cssVarCls] = useStyle$j(prefixCls, rootCls);
+    const [hashId, cssVarCls] = useStyle$i(prefixCls, rootCls);
     const [, token] = useToken();
     const child = React.Children.only(isPrimitive(children) ? /*#__PURE__*/ React.createElement("span", null, children) : children);
     const popupTrigger = cloneElement(child, {
@@ -33975,7 +33636,7 @@ const getRadioButtonStyle = (token)=>{
     };
 };
 // ============================== Export ==============================
-const prepareComponentToken$d = (token)=>{
+const prepareComponentToken$c = (token)=>{
     const { wireframe, padding, marginXS, lineWidth, fontSizeLG, colorText, colorBgContainer, colorTextDisabled, controlItemBgActiveDisabled, colorTextLightSolid, colorPrimary, colorPrimaryHover, colorPrimaryActive, colorWhite } = token;
     const dotPadding = 4; // Fixed value
     const radioSize = fontSizeLG;
@@ -34002,7 +33663,7 @@ const prepareComponentToken$d = (token)=>{
         radioBgColor: wireframe ? colorBgContainer : colorPrimary
     };
 };
-var useStyle$i = genStyleHooks('Radio', (token)=>{
+var useStyle$h = genStyleHooks('Radio', (token)=>{
     const { controlOutline, controlOutlineWidth } = token;
     const radioFocusShadow = `0 0 0 ${unit(controlOutlineWidth)} ${controlOutline}`;
     const radioButtonFocusShadow = radioFocusShadow;
@@ -34015,7 +33676,7 @@ var useStyle$i = genStyleHooks('Radio', (token)=>{
         getRadioBasicStyle(radioToken),
         getRadioButtonStyle(radioToken)
     ];
-}, prepareComponentToken$d, {
+}, prepareComponentToken$c, {
     unitless: {
         radioSize: true,
         dotSize: true
@@ -34043,7 +33704,7 @@ const InternalRadio = (props, ref)=>{
     const prefixCls = isButtonType ? `${radioPrefixCls}-button` : radioPrefixCls;
     // Style
     const rootCls = useCSSVarCls(radioPrefixCls);
-    const [hashId, cssVarCls] = useStyle$i(radioPrefixCls, rootCls);
+    const [hashId, cssVarCls] = useStyle$h(radioPrefixCls, rootCls);
     const radioProps = {
         ...restProps
     };
@@ -34142,7 +33803,7 @@ const RadioGroup = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const groupPrefixCls = `${prefixCls}-group`;
     // Style
     const rootCls = useCSSVarCls(prefixCls);
-    const [hashId, cssVarCls] = useStyle$i(prefixCls, rootCls);
+    const [hashId, cssVarCls] = useStyle$h(prefixCls, rootCls);
     let childrenToRender = children;
     // 如果存在 options, 优先使用
     if (options && options.length > 0) {
@@ -35106,7 +34767,7 @@ const useSharedStyle = genStyleHooks([
 }, initComponentToken$1, {
     resetFont: false
 });
-var useStyle$h = genStyleHooks([
+var useStyle$g = genStyleHooks([
     'Input',
     'Component'
 ], (token)=>{
@@ -35992,7 +35653,7 @@ const genTabsStyle = (token)=>{
         }
     };
 };
-const prepareComponentToken$c = (token)=>{
+const prepareComponentToken$b = (token)=>{
     const { cardHeight, cardHeightSM, cardHeightLG, controlHeight, controlHeightLG } = token;
     const mergedCardHeight = cardHeight || controlHeightLG;
     const mergedCardHeightSM = cardHeightSM || controlHeight;
@@ -36033,7 +35694,7 @@ const prepareComponentToken$c = (token)=>{
     };
 };
 // ============================== Export ==============================
-var useStyle$g = genStyleHooks('Tabs', (token)=>{
+var useStyle$f = genStyleHooks('Tabs', (token)=>{
     const tabsToken = mergeToken(token, {
         // `cardPadding` is empty by default, so we could calculate with dynamic `cardHeight`
         tabsCardPadding: token.cardPadding,
@@ -36052,7 +35713,7 @@ var useStyle$g = genStyleHooks('Tabs', (token)=>{
         genTabsStyle(tabsToken),
         genMotionStyle$1(tabsToken)
     ];
-}, prepareComponentToken$c);
+}, prepareComponentToken$b);
 
 const TabPane = ()=>null;
 if (process.env.NODE_ENV !== 'production') {
@@ -36066,7 +35727,7 @@ const InternalTabs = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const { tabs } = React.useContext(ConfigContext);
     const prefixCls = getPrefixCls('tabs', customizePrefixCls);
     const rootCls = useCSSVarCls(prefixCls);
-    const [hashId, cssVarCls] = useStyle$g(prefixCls, rootCls);
+    const [hashId, cssVarCls] = useStyle$f(prefixCls, rootCls);
     const tabsRef = React.useRef(null);
     React.useImperativeHandle(ref, ()=>({
             nativeElement: tabsRef.current
@@ -36498,7 +36159,7 @@ const genCardSizeStyle = (token)=>{
         }
     };
 };
-const prepareComponentToken$b = (token)=>({
+const prepareComponentToken$a = (token)=>({
         headerBg: 'transparent',
         headerFontSize: token.fontSizeLG,
         headerFontSizeSM: token.fontSize,
@@ -36515,7 +36176,7 @@ const prepareComponentToken$b = (token)=>({
         headerPadding: token.headerPadding ?? token.paddingLG
     });
 // ============================== Export ==============================
-var useStyle$f = genStyleHooks('Card', (token)=>{
+var useStyle$e = genStyleHooks('Card', (token)=>{
     const cardToken = mergeToken(token, {
         cardShadow: token.boxShadowCard,
         cardHeadPadding: token.padding,
@@ -36528,7 +36189,7 @@ var useStyle$f = genStyleHooks('Card', (token)=>{
         // Size
         genCardSizeStyle(cardToken)
     ];
-}, prepareComponentToken$b);
+}, prepareComponentToken$a);
 
 const ActionNode = (props)=>{
     const { actionClasses, actions = [], actionStyle } = props;
@@ -36599,7 +36260,7 @@ const Card$1 = /*#__PURE__*/ React.forwardRef((props, ref)=>{
         children
     ]);
     const prefixCls = getPrefixCls('card', customizePrefixCls);
-    const [hashId, cssVarCls] = useStyle$f(prefixCls);
+    const [hashId, cssVarCls] = useStyle$e(prefixCls);
     const loadingBlock = /*#__PURE__*/ React.createElement(Skeleton, {
         loading: true,
         active: true,
@@ -36955,7 +36616,7 @@ function getStyle(prefixCls, token) {
     });
     return genCheckboxStyle(checkboxToken);
 }
-var useStyle$e = genStyleHooks('Checkbox', (token, { prefixCls })=>[
+var useStyle$d = genStyleHooks('Checkbox', (token, { prefixCls })=>[
         getStyle(prefixCls, token)
     ]);
 
@@ -37019,7 +36680,7 @@ const InternalCheckbox = (props, ref)=>{
     // ============================== Style ===============================
     const prefixCls = getPrefixCls('checkbox', customizePrefixCls);
     const rootCls = useCSSVarCls(prefixCls);
-    const [hashId, cssVarCls] = useStyle$e(prefixCls, rootCls);
+    const [hashId, cssVarCls] = useStyle$d(prefixCls, rootCls);
     const checkboxProps = {
         ...restProps
     };
@@ -37137,7 +36798,7 @@ const CheckboxGroup = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const prefixCls = getPrefixCls('checkbox', customizePrefixCls);
     const groupPrefixCls = `${prefixCls}-group`;
     const rootCls = useCSSVarCls(prefixCls);
-    const [hashId, cssVarCls] = useStyle$e(prefixCls, rootCls);
+    const [hashId, cssVarCls] = useStyle$d(prefixCls, rootCls);
     const domProps = omit(restProps, [
         'value',
         'disabled'
@@ -37347,7 +37008,7 @@ function useMergedPropByScreen(oriProp, screen) {
     ]);
     return prop;
 }
-const Row$1 = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+const Row = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const { prefixCls: customizePrefixCls, justify, align, className, style, children, gutter = 0, wrap, ...others } = props;
     const { getPrefixCls, direction } = React.useContext(ConfigContext);
     const screens = useBreakpoint(true, null);
@@ -37396,7 +37057,7 @@ const Row$1 = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     }, children));
 });
 if (process.env.NODE_ENV !== 'production') {
-    Row$1.displayName = 'Row';
+    Row.displayName = 'Row';
 }
 
 // ============================== Size ================================
@@ -37557,13 +37218,13 @@ const genSharedDividerStyle = (token)=>{
         }
     };
 };
-const prepareComponentToken$a = (token)=>({
+const prepareComponentToken$9 = (token)=>({
         textPaddingInline: '1em',
         orientationMargin: 0.05,
         verticalMarginInline: token.marginXS
     });
 // ============================== Export ==============================
-var useStyle$d = genStyleHooks('Divider', (token)=>{
+var useStyle$c = genStyleHooks('Divider', (token)=>{
     const dividerToken = mergeToken(token, {
         dividerHorizontalWithTextGutterMargin: token.margin,
         sizePaddingEdgeHorizontal: 0
@@ -37572,7 +37233,7 @@ var useStyle$d = genStyleHooks('Divider', (token)=>{
         genSharedDividerStyle(dividerToken),
         genSizeDividerStyle(dividerToken)
     ];
-}, prepareComponentToken$a, {
+}, prepareComponentToken$9, {
     unitless: {
         orientationMargin: true
     }
@@ -37594,7 +37255,7 @@ const Divider = (props)=>{
     const { prefixCls: customizePrefixCls, type, orientation, vertical, titlePlacement, orientationMargin, className, rootClassName, children, dashed, variant = 'solid', plain, style, size: customSize, classNames, styles, ...restProps } = props;
     const prefixCls = getPrefixCls('divider', customizePrefixCls);
     const railCls = `${prefixCls}-rail`;
-    const [hashId, cssVarCls] = useStyle$d(prefixCls);
+    const [hashId, cssVarCls] = useStyle$c(prefixCls);
     const sizeFullName = useSize(customSize);
     const sizeCls = sizeClassNameMap[sizeFullName];
     const hasChildren = !!children;
@@ -37812,7 +37473,7 @@ const genSpaceAddonStyle = (token)=>{
     };
 };
 // ============================== Export ==============================
-var useStyle$c = genStyleHooks([
+var useStyle$b = genStyleHooks([
     'Space',
     'Addon'
 ], (token)=>[
@@ -37826,7 +37487,7 @@ const SpaceAddon = /*#__PURE__*/ React__default.forwardRef((props, ref)=>{
     const { className, children, style, prefixCls: customizePrefixCls, variant = 'outlined', disabled, status, ...restProps } = props;
     const { getPrefixCls, direction: directionConfig } = React__default.useContext(ConfigContext);
     const prefixCls = getPrefixCls('space-addon', customizePrefixCls);
-    const [hashId, cssVarCls] = useStyle$c(prefixCls);
+    const [hashId, cssVarCls] = useStyle$b(prefixCls);
     const { compactItemClassnames, compactSize } = useCompactItemContext(prefixCls, directionConfig);
     const statusCls = getStatusClassNames(prefixCls, status);
     const classes = clsx(prefixCls, hashId, compactItemClassnames, cssVarCls, `${prefixCls}-variant-${variant}`, statusCls, {
@@ -37906,7 +37567,7 @@ const Input = /*#__PURE__*/ forwardRef((props, ref)=>{
     // Style
     const rootCls = useCSSVarCls(prefixCls);
     const [hashId, cssVarCls] = useSharedStyle(prefixCls, rootClassName);
-    useStyle$h(prefixCls, rootCls);
+    useStyle$g(prefixCls, rootCls);
     // ===================== Compact Item =====================
     const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
     // ===================== Size =====================
@@ -38021,583 +37682,6 @@ if (process.env.NODE_ENV !== 'production') {
     Input.displayName = 'Input';
 }
 
-const DEFAULT_COLUMN_MAP = {
-    xxxl: 4,
-    xxl: 3,
-    xl: 3,
-    lg: 3,
-    md: 3,
-    sm: 2,
-    xs: 1
-};
-
-const DescriptionsContext = /*#__PURE__*/ React__default.createContext(null);
-
-// Convert children into items
-const transChildren2Items = (childNodes)=>toArray$1(childNodes).map((node)=>({
-            ...node?.props,
-            key: node.key
-        }));
-function useItems(screens, items, children) {
-    const mergedItems = React.useMemo(()=>// Take `items` first or convert `children` into items
-        items || transChildren2Items(children), [
-        items,
-        children
-    ]);
-    const responsiveItems = React.useMemo(()=>mergedItems.map(({ span, ...restItem })=>{
-            if (span === 'filled') {
-                return {
-                    ...restItem,
-                    filled: true
-                };
-            }
-            return {
-                ...restItem,
-                span: typeof span === 'number' ? span : matchScreen(screens, span)
-            };
-        }), [
-        mergedItems,
-        screens
-    ]);
-    return responsiveItems;
-}
-
-// Calculate the sum of span in a row
-function getCalcRows(rowItems, mergedColumn) {
-    let rows = [];
-    let tmpRow = [];
-    let exceed = false;
-    let count = 0;
-    rowItems.filter((n)=>n).forEach((rowItem)=>{
-        const { filled, ...restItem } = rowItem;
-        if (filled) {
-            tmpRow.push(restItem);
-            rows.push(tmpRow);
-            // reset
-            tmpRow = [];
-            count = 0;
-            return;
-        }
-        const restSpan = mergedColumn - count;
-        count += rowItem.span || 1;
-        if (count >= mergedColumn) {
-            if (count > mergedColumn) {
-                exceed = true;
-                tmpRow.push({
-                    ...restItem,
-                    span: restSpan
-                });
-            } else {
-                tmpRow.push(restItem);
-            }
-            rows.push(tmpRow);
-            // reset
-            tmpRow = [];
-            count = 0;
-        } else {
-            tmpRow.push(restItem);
-        }
-    });
-    if (tmpRow.length > 0) {
-        rows.push(tmpRow);
-    }
-    rows = rows.map((rows)=>{
-        const count = rows.reduce((acc, item)=>acc + (item.span || 1), 0);
-        if (count < mergedColumn) {
-            // If the span of the last element in the current row is less than the column, then add its span to the remaining columns
-            const last = rows[rows.length - 1];
-            last.span = mergedColumn - (count - (last.span || 1));
-            return rows;
-        }
-        return rows;
-    });
-    return [
-        rows,
-        exceed
-    ];
-}
-const useRow = (mergedColumn, items)=>{
-    const [rows, exceed] = useMemo(()=>getCalcRows(items, mergedColumn), [
-        items,
-        mergedColumn
-    ]);
-    if (process.env.NODE_ENV !== 'production') {
-        const warning = devUseWarning('Descriptions');
-        process.env.NODE_ENV !== "production" ? warning(!exceed, 'usage', 'Sum of column `span` in a line not match `column` of Descriptions.') : void 0;
-    }
-    return rows;
-};
-
-// JSX Structure Syntactic Sugar. Never reach the render code.
-/* istanbul ignore next */ const DescriptionsItem = (props)=>{
-    return props.children;
-};
-
-const Cell = (props)=>{
-    const { itemPrefixCls, component, span, className, style, labelStyle, contentStyle, bordered, label, content, colon, type, styles, classNames } = props;
-    const Component = component;
-    const { classNames: contextClassNames, styles: contextStyles } = React__default.useContext(DescriptionsContext);
-    const [mergedClassNames, mergedStyles] = useMergeSemantic([
-        contextClassNames,
-        classNames
-    ], [
-        contextStyles,
-        styles
-    ], {
-        props
-    });
-    const mergedLabelStyle = {
-        ...labelStyle,
-        ...mergedStyles.label
-    };
-    const mergedContentStyle = {
-        ...contentStyle,
-        ...mergedStyles.content
-    };
-    if (bordered) {
-        return /*#__PURE__*/ React__default.createElement(Component, {
-            colSpan: span,
-            style: style,
-            className: clsx(className, {
-                [`${itemPrefixCls}-item-${type}`]: type === 'label' || type === 'content',
-                [mergedClassNames.label]: mergedClassNames.label && type === 'label',
-                [mergedClassNames.content]: mergedClassNames.content && type === 'content'
-            })
-        }, isNonNullable(label) && /*#__PURE__*/ React__default.createElement("span", {
-            style: mergedLabelStyle
-        }, label), isNonNullable(content) && /*#__PURE__*/ React__default.createElement("span", {
-            style: mergedContentStyle
-        }, content));
-    }
-    return /*#__PURE__*/ React__default.createElement(Component, {
-        className: clsx(`${itemPrefixCls}-item`, className),
-        style: style,
-        colSpan: span
-    }, /*#__PURE__*/ React__default.createElement("div", {
-        className: `${itemPrefixCls}-item-container`
-    }, isNonNullable(label) && /*#__PURE__*/ React__default.createElement("span", {
-        style: mergedLabelStyle,
-        className: clsx(`${itemPrefixCls}-item-label`, mergedClassNames.label, {
-            [`${itemPrefixCls}-item-no-colon`]: !colon
-        })
-    }, label), isNonNullable(content) && /*#__PURE__*/ React__default.createElement("span", {
-        style: mergedContentStyle,
-        className: clsx(`${itemPrefixCls}-item-content`, mergedClassNames.content)
-    }, content)));
-};
-
-function renderCells(items, { colon, prefixCls, bordered }, { component, type, showLabel, showContent, labelStyle: rootLabelStyle, contentStyle: rootContentStyle, styles: rootStyles }) {
-    return items.map(({ label, children, prefixCls: itemPrefixCls = prefixCls, className, style, labelStyle, contentStyle, span = 1, key, styles, classNames }, index)=>{
-        if (typeof component === 'string') {
-            return /*#__PURE__*/ React.createElement(Cell, {
-                key: `${type}-${key || index}`,
-                className: className,
-                style: style,
-                classNames: classNames,
-                styles: {
-                    label: {
-                        ...rootLabelStyle,
-                        ...rootStyles?.label,
-                        ...labelStyle,
-                        ...styles?.label
-                    },
-                    content: {
-                        ...rootContentStyle,
-                        ...rootStyles?.content,
-                        ...contentStyle,
-                        ...styles?.content
-                    }
-                },
-                span: span,
-                colon: colon,
-                component: component,
-                itemPrefixCls: itemPrefixCls,
-                bordered: bordered,
-                label: showLabel ? label : null,
-                content: showContent ? children : null,
-                type: type
-            });
-        }
-        return [
-            /*#__PURE__*/ React.createElement(Cell, {
-                key: `label-${key || index}`,
-                className: className,
-                style: {
-                    ...rootLabelStyle,
-                    ...rootStyles?.label,
-                    ...style,
-                    ...labelStyle,
-                    ...styles?.label
-                },
-                span: 1,
-                colon: colon,
-                component: component[0],
-                itemPrefixCls: itemPrefixCls,
-                bordered: bordered,
-                label: label,
-                type: "label"
-            }),
-            /*#__PURE__*/ React.createElement(Cell, {
-                key: `content-${key || index}`,
-                className: className,
-                style: {
-                    ...rootContentStyle,
-                    ...rootStyles?.content,
-                    ...style,
-                    ...contentStyle,
-                    ...styles?.content
-                },
-                span: span * 2 - 1,
-                component: component[1],
-                itemPrefixCls: itemPrefixCls,
-                bordered: bordered,
-                content: children,
-                type: "content"
-            })
-        ];
-    });
-}
-const Row = (props)=>{
-    const descContext = React.useContext(DescriptionsContext);
-    const { prefixCls, vertical, row, index, bordered } = props;
-    if (vertical) {
-        return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("tr", {
-            key: `label-${index}`,
-            className: `${prefixCls}-row`
-        }, renderCells(row, props, {
-            component: 'th',
-            type: 'label',
-            showLabel: true,
-            ...descContext
-        })), /*#__PURE__*/ React.createElement("tr", {
-            key: `content-${index}`,
-            className: `${prefixCls}-row`
-        }, renderCells(row, props, {
-            component: 'td',
-            type: 'content',
-            showContent: true,
-            ...descContext
-        })));
-    }
-    return /*#__PURE__*/ React.createElement("tr", {
-        key: index,
-        className: `${prefixCls}-row`
-    }, renderCells(row, props, {
-        component: bordered ? [
-            'th',
-            'td'
-        ] : 'td',
-        type: 'item',
-        showLabel: true,
-        showContent: true,
-        ...descContext
-    }));
-};
-
-const genBorderedStyle$2 = (token)=>{
-    const { componentCls, labelBg } = token;
-    return {
-        [`&${componentCls}-bordered`]: {
-            [`> ${componentCls}-view`]: {
-                border: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`,
-                '> table': {
-                    tableLayout: 'auto'
-                },
-                [`${componentCls}-row`]: {
-                    borderBottom: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`,
-                    '&:first-child': {
-                        '> th:first-child, > td:first-child': {
-                            borderStartStartRadius: token.borderRadiusLG
-                        }
-                    },
-                    '&:last-child': {
-                        borderBottom: 'none',
-                        '> th:first-child, > td:first-child': {
-                            borderEndStartRadius: token.borderRadiusLG
-                        }
-                    },
-                    [`> ${componentCls}-item-label, > ${componentCls}-item-content`]: {
-                        padding: `${unit(token.padding)} ${unit(token.paddingLG)}`,
-                        borderInlineEnd: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`,
-                        '&:last-child': {
-                            borderInlineEnd: 'none'
-                        }
-                    },
-                    [`> ${componentCls}-item-label`]: {
-                        color: token.colorTextSecondary,
-                        backgroundColor: labelBg,
-                        '&::after': {
-                            display: 'none'
-                        }
-                    }
-                }
-            },
-            [`&${componentCls}-middle`]: {
-                [`${componentCls}-row`]: {
-                    [`> ${componentCls}-item-label, > ${componentCls}-item-content`]: {
-                        padding: `${unit(token.paddingSM)} ${unit(token.paddingLG)}`
-                    }
-                }
-            },
-            [`&${componentCls}-small`]: {
-                [`${componentCls}-row`]: {
-                    [`> ${componentCls}-item-label, > ${componentCls}-item-content`]: {
-                        padding: `${unit(token.paddingXS)} ${unit(token.padding)}`
-                    }
-                }
-            }
-        }
-    };
-};
-const genDescriptionStyles = (token)=>{
-    const { componentCls, extraColor, itemPaddingBottom, itemPaddingEnd, colonMarginRight, colonMarginLeft, titleMarginBottom } = token;
-    return {
-        [componentCls]: {
-            ...resetComponent(token),
-            ...genBorderedStyle$2(token),
-            '&-rtl': {
-                direction: 'rtl'
-            },
-            [`${componentCls}-header`]: {
-                display: 'flex',
-                alignItems: 'center',
-                marginBottom: titleMarginBottom
-            },
-            [`${componentCls}-title`]: {
-                ...textEllipsis,
-                flex: 'auto',
-                color: token.titleColor,
-                fontWeight: token.fontWeightStrong,
-                fontSize: token.fontSizeLG,
-                lineHeight: token.lineHeightLG
-            },
-            [`${componentCls}-extra`]: {
-                marginInlineStart: 'auto',
-                color: extraColor,
-                fontSize: token.fontSize
-            },
-            [`${componentCls}-view`]: {
-                width: '100%',
-                borderRadius: token.borderRadiusLG,
-                table: {
-                    width: '100%',
-                    tableLayout: 'fixed',
-                    borderCollapse: 'collapse'
-                }
-            },
-            [`${componentCls}-row`]: {
-                '> th, > td': {
-                    paddingBottom: itemPaddingBottom,
-                    paddingInlineEnd: itemPaddingEnd
-                },
-                '> th:last-child, > td:last-child': {
-                    paddingInlineEnd: 0
-                },
-                '&:last-child': {
-                    borderBottom: 'none',
-                    '> th, > td': {
-                        paddingBottom: 0
-                    }
-                }
-            },
-            [`${componentCls}-item-label`]: {
-                color: token.labelColor,
-                fontWeight: 'normal',
-                fontSize: token.fontSize,
-                lineHeight: token.lineHeight,
-                textAlign: 'start',
-                '&::after': {
-                    content: '":"',
-                    position: 'relative',
-                    top: -0.5,
-                    // magic for position
-                    marginInline: `${unit(colonMarginLeft)} ${unit(colonMarginRight)}`
-                },
-                [`&${componentCls}-item-no-colon::after`]: {
-                    content: '""'
-                }
-            },
-            [`${componentCls}-item-no-label`]: {
-                '&::after': {
-                    margin: 0,
-                    content: '""'
-                }
-            },
-            [`${componentCls}-item-content`]: {
-                display: 'table-cell',
-                flex: 1,
-                color: token.contentColor,
-                fontSize: token.fontSize,
-                lineHeight: token.lineHeight,
-                wordBreak: 'break-word',
-                overflowWrap: 'break-word'
-            },
-            [`${componentCls}-item`]: {
-                paddingBottom: 0,
-                verticalAlign: 'top',
-                '&-container': {
-                    display: 'flex',
-                    [`${componentCls}-item-label`]: {
-                        display: 'inline-flex',
-                        alignItems: 'baseline'
-                    },
-                    [`${componentCls}-item-content`]: {
-                        display: 'inline-flex',
-                        alignItems: 'baseline',
-                        minWidth: '1em'
-                    }
-                }
-            },
-            '&-middle': {
-                [`${componentCls}-row`]: {
-                    '> th, > td': {
-                        paddingBottom: token.paddingSM
-                    }
-                }
-            },
-            '&-small': {
-                [`${componentCls}-row`]: {
-                    '> th, > td': {
-                        paddingBottom: token.paddingXS
-                    }
-                }
-            }
-        }
-    };
-};
-const prepareComponentToken$9 = (token)=>({
-        labelBg: token.colorFillAlter,
-        labelColor: token.colorTextTertiary,
-        titleColor: token.colorText,
-        titleMarginBottom: token.fontSizeSM * token.lineHeightSM,
-        itemPaddingBottom: token.padding,
-        itemPaddingEnd: token.padding,
-        colonMarginRight: token.marginXS,
-        colonMarginLeft: token.marginXXS / 2,
-        contentColor: token.colorText,
-        extraColor: token.colorText
-    });
-// ============================== Export ==============================
-var useStyle$b = genStyleHooks('Descriptions', (token)=>{
-    const descriptionToken = mergeToken(token, {});
-    return genDescriptionStyles(descriptionToken);
-}, prepareComponentToken$9);
-
-const Descriptions = (props)=>{
-    const { prefixCls: customizePrefixCls, title, extra, column, colon = true, bordered, layout, children, className, rootClassName, style, size: customizeSize, labelStyle, contentStyle, styles, items, classNames, ...restProps } = props;
-    const { getPrefixCls, direction, className: contextClassName, style: contextStyle, classNames: contextClassNames, styles: contextStyles } = useComponentConfig('descriptions');
-    const prefixCls = getPrefixCls('descriptions', customizePrefixCls);
-    const screens = useBreakpoint();
-    // ============================== Warn ==============================
-    if (process.env.NODE_ENV !== 'production') {
-        const warning = devUseWarning('Descriptions');
-        [
-            [
-                'labelStyle',
-                'styles.label'
-            ],
-            [
-                'contentStyle',
-                'styles.content'
-            ]
-        ].forEach(([deprecatedName, newName])=>{
-            warning.deprecated(!(deprecatedName in props), deprecatedName, newName);
-        });
-    }
-    // Column count
-    const mergedColumn = React.useMemo(()=>{
-        if (typeof column === 'number') {
-            return column;
-        }
-        return matchScreen(screens, {
-            ...DEFAULT_COLUMN_MAP,
-            ...column
-        }) ?? 3;
-    }, [
-        screens,
-        column
-    ]);
-    // Items with responsive
-    const mergedItems = useItems(screens, items, children);
-    const mergedSize = useSize(customizeSize);
-    const rows = useRow(mergedColumn, mergedItems);
-    const [hashId, cssVarCls] = useStyle$b(prefixCls);
-    // =========== Merged Props for Semantic ==========
-    const mergedProps = {
-        ...props,
-        column: mergedColumn,
-        items: mergedItems,
-        size: mergedSize
-    };
-    const [mergedClassNames, mergedStyles] = useMergeSemantic([
-        contextClassNames,
-        classNames
-    ], [
-        contextStyles,
-        styles
-    ], {
-        props: mergedProps
-    });
-    // ======================== Render ========================
-    const memoizedValue = React.useMemo(()=>({
-            labelStyle,
-            contentStyle,
-            styles: {
-                label: mergedStyles.label,
-                content: mergedStyles.content
-            },
-            classNames: {
-                label: mergedClassNames.label,
-                content: mergedClassNames.content
-            }
-        }), [
-        labelStyle,
-        contentStyle,
-        mergedStyles.label,
-        mergedStyles.content,
-        mergedClassNames.label,
-        mergedClassNames.content
-    ]);
-    return /*#__PURE__*/ React.createElement(DescriptionsContext.Provider, {
-        value: memoizedValue
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: clsx(prefixCls, contextClassName, mergedClassNames.root, {
-            [`${prefixCls}-${mergedSize}`]: mergedSize && mergedSize !== 'default',
-            [`${prefixCls}-bordered`]: !!bordered,
-            [`${prefixCls}-rtl`]: direction === 'rtl'
-        }, className, rootClassName, hashId, cssVarCls),
-        style: {
-            ...contextStyle,
-            ...mergedStyles.root,
-            ...style
-        },
-        ...restProps
-    }, (title || extra) && /*#__PURE__*/ React.createElement("div", {
-        className: clsx(`${prefixCls}-header`, mergedClassNames.header),
-        style: mergedStyles.header
-    }, title && /*#__PURE__*/ React.createElement("div", {
-        className: clsx(`${prefixCls}-title`, mergedClassNames.title),
-        style: mergedStyles.title
-    }, title), extra && /*#__PURE__*/ React.createElement("div", {
-        className: clsx(`${prefixCls}-extra`, mergedClassNames.extra),
-        style: mergedStyles.extra
-    }, extra)), /*#__PURE__*/ React.createElement("div", {
-        className: `${prefixCls}-view`
-    }, /*#__PURE__*/ React.createElement("table", null, /*#__PURE__*/ React.createElement("tbody", null, rows.map((row, index)=>/*#__PURE__*/ React.createElement(Row, {
-            key: index,
-            index: index,
-            colon: colon,
-            prefixCls: prefixCls,
-            vertical: layout === 'vertical',
-            bordered: bordered,
-            row: row
-        })))))));
-};
-if (process.env.NODE_ENV !== 'production') {
-    Descriptions.displayName = 'Descriptions';
-}
-Descriptions.Item = DescriptionsItem;
-
 const DrawerPanel = (props)=>{
     const { prefixCls, ariaId, title, footer, extra, closable, loading, onClose, headerStyle, bodyStyle, footerStyle, children, classNames: drawerClassNames, styles: drawerStyles } = props;
     const drawerContext = useComponentConfig('drawer');
@@ -44364,11 +43448,11 @@ const injectSorter = (prefixCls, columns, sorterStates, triggerSorter, defaultSo
                         if (typeof showSorterTooltip !== 'boolean' && showSorterTooltip?.target === 'sorter-icon') {
                             return /*#__PURE__*/ React.createElement("div", {
                                 className: clsx(columnSortersClass, `${columnSortersClass}-tooltip-target-sorter`)
-                            }, renderColumnTitleWrapper, /*#__PURE__*/ React.createElement(Tooltip, {
+                            }, renderColumnTitleWrapper, /*#__PURE__*/ React.createElement(Tooltip$1, {
                                 ...tooltipProps
                             }, sorter));
                         }
-                        return /*#__PURE__*/ React.createElement(Tooltip, {
+                        return /*#__PURE__*/ React.createElement(Tooltip$1, {
                             ...tooltipProps
                         }, renderSortTitle);
                     }
@@ -47451,7 +46535,7 @@ const CopyBtn = ({ prefixCls, copied, locale, iconOnly, tooltips, icon, tabIndex
     const systemStr = copied ? copiedText : copyText;
     const copyTitle = getNode(tooltipNodes[copied ? 1 : 0], systemStr);
     const ariaLabel = typeof copyTitle === 'string' ? copyTitle : systemStr;
-    return /*#__PURE__*/ React.createElement(Tooltip, {
+    return /*#__PURE__*/ React.createElement(Tooltip$1, {
         title: copyTitle
     }, /*#__PURE__*/ React.createElement("button", {
         type: "button",
@@ -47695,7 +46779,7 @@ const EllipsisTooltip = ({ enableEllipsis, isEllipsis, open, children, tooltipPr
         return children;
     }
     const mergedOpen = open && isEllipsis;
-    return /*#__PURE__*/ React.createElement(Tooltip, {
+    return /*#__PURE__*/ React.createElement(Tooltip$1, {
         open: mergedOpen,
         ...tooltipProps
     }, children);
@@ -47949,7 +47033,7 @@ const Base = /*#__PURE__*/ React.forwardRef((props, ref)=>{
         const { icon, tooltip, tabIndex } = editConfig;
         const editTitle = toArray$1(tooltip)[0] || textLocale?.edit;
         const ariaLabel = typeof editTitle === 'string' ? editTitle : '';
-        return triggerType.includes('icon') ? /*#__PURE__*/ React.createElement(Tooltip, {
+        return triggerType.includes('icon') ? /*#__PURE__*/ React.createElement(Tooltip$1, {
             key: "edit",
             title: tooltip === false ? '' : editTitle
         }, /*#__PURE__*/ React.createElement("button", {
@@ -48557,7 +47641,10 @@ const JsonTreeViewer = ({ data, maxDepth = 4, initialExpanded = false, expanded
     })()));
 };
 
-const NODE_MAX_WIDTH = 500;
+/** 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);
@@ -49078,6 +48165,25 @@ const CountUpLatency = ({ value })=>{
         });
     }
 };
+/** Merged tool internals + first edge detail (same shape ToolNode used on-canvas). */ function buildToolDrawerPayload(nodeData) {
+    const internals = nodeData.details?.internals;
+    const base = internals && typeof internals === "object" ? {
+        ...internals
+    } : {};
+    const edges = nodeData.edgeDetails;
+    if (edges && edges.length > 0) {
+        const d0 = edges[0];
+        return {
+            ...base,
+            input: {
+                ...d0?.input_kwargs ?? {}
+            },
+            output: d0?.output,
+            status: d0?.status
+        };
+    }
+    return Object.keys(base).length > 0 ? base : null;
+}
 const NodeDetailsDrawer = ({ isVisible, onClose, nodeData })=>{
     const { theme } = useTheme$1();
     const [selectedRowIndex, setSelectedRowIndex] = useState(null);
@@ -49111,12 +48217,16 @@ const NodeDetailsDrawer = ({ isVisible, onClose, nodeData })=>{
     }, [
         nodeData?.details?.internals?.llm_details?.length
     ]);
-    const llOverviewDetails = getOverviewLlmDetails(nodeData.details?.internals?.llm_details || []);
-    const totalCost = sumTotalCost(nodeData.details?.internals?.llm_details || []);
-    const totalInputTokens = sumTotalInputTokens(nodeData.details?.internals?.llm_details || []);
-    const totalOutputTokens = sumTotalOutputTokens(nodeData.details?.internals?.llm_details || []);
-    const totalLatency = sumTotalLatency(nodeData.details?.internals?.llm_details || []);
-    const drawerTitle = /*#__PURE__*/ React__default.createElement(DrawerTitleContent, null, /*#__PURE__*/ React__default.createElement(NodeIcon$3, null, getNodeIcon({
+    const nodeType = nodeData.nodeType || "Agent";
+    const llmDetailsList = nodeData.details?.internals?.llm_details || [];
+    const llOverviewDetails = getOverviewLlmDetails(llmDetailsList);
+    const totalCost = sumTotalCost(llmDetailsList);
+    const totalInputTokens = sumTotalInputTokens(llmDetailsList);
+    const totalOutputTokens = sumTotalOutputTokens(llmDetailsList);
+    const totalLatency = sumTotalLatency(llmDetailsList);
+    const toolDrawerPayload = nodeType === "Tool" ? buildToolDrawerPayload(nodeData) : 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
@@ -49128,7 +48238,7 @@ const NodeDetailsDrawer = ({ isVisible, onClose, nodeData })=>{
         onClose: onClose,
         closable: {
             closeIcon: /*#__PURE__*/ React__default.createElement(Button$1, {
-                type: "text",
+                type: "link",
                 icon: /*#__PURE__*/ React__default.createElement(X$1, {
                     size: 16,
                     color: theme.colors.foreground
@@ -49140,7 +48250,7 @@ const NodeDetailsDrawer = ({ isVisible, onClose, nodeData })=>{
                 "aria-label": "Close drawer"
             })
         },
-        size: "400px",
+        size: "500px",
         getContainer: ()=>document.body,
         zIndex: 1100,
         "data-testid": "node-details-drawer",
@@ -49156,8 +48266,15 @@ const NodeDetailsDrawer = ({ isVisible, onClose, nodeData })=>{
         }
     }, /*#__PURE__*/ React__default.createElement(DrawerBodyContent, {
         "data-testid": "node-details-drawer-content"
-    }, llOverviewDetails && /*#__PURE__*/ React__default.createElement(Section, null, /*#__PURE__*/ React__default.createElement(InfoGrid, null, (()=>{
-        const llmDetails = nodeData.details?.internals?.llm_details || [];
+    }, 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, {
+        "data-testid": "tool-drawer-json"
+    }, /*#__PURE__*/ React__default.createElement(JsonTreeViewer, {
+        excludeKeys: [
+            "latency"
+        ],
+        data: toolDrawerPayload
+    })) : null), nodeType === "Agent" && !llOverviewDetails && 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)))), nodeType === "Agent" && llOverviewDetails && /*#__PURE__*/ React__default.createElement(Section, null, /*#__PURE__*/ React__default.createElement(InfoGrid, null, (()=>{
+        const llmDetails = llmDetailsList;
         const isAggregateSelected = selectedRowIndex === llmDetails.length;
         const selectedDetails = isAggregateSelected ? null // Use aggregate values
          : llmDetails[selectedRowIndex || 0];
@@ -49194,7 +48311,13 @@ const NodeDetailsDrawer = ({ isVisible, onClose, nodeData })=>{
             prefix: "$",
             suffix: " USD"
         }) : "N/A")));
-    })())), nodeData.details?.internals?.llm_details?.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", {
+    })())), 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", {
         style: {
             textAlign: "center"
         }
@@ -49214,7 +48337,7 @@ const NodeDetailsDrawer = ({ isVisible, onClose, nodeData })=>{
         style: {
             textAlign: "right"
         }
-    }, "Latency"))), /*#__PURE__*/ React__default.createElement("tbody", null, nodeData.details.internals.llm_details.map((details, index)=>/*#__PURE__*/ React__default.createElement("tr", {
+    }, "Latency"))), /*#__PURE__*/ React__default.createElement("tbody", null, llmDetailsList.map((details, index)=>/*#__PURE__*/ React__default.createElement("tr", {
             key: index,
             onClick: ()=>handleShowModelDetails(details, index),
             className: selectedRowIndex === index ? "selected-row" : ""
@@ -49255,7 +48378,7 @@ const NodeDetailsDrawer = ({ isVisible, onClose, nodeData })=>{
             value: details.latency
         }) : "N/A"))), /*#__PURE__*/ React__default.createElement("tr", {
         key: "total",
-        className: `total-row ${selectedRowIndex === nodeData.details?.internals?.llm_details.length ? "selected-row" : ""}`,
+        className: `total-row ${selectedRowIndex === llmDetailsList.length ? "selected-row" : ""}`,
         onClick: handleShowAggregateDetails
     }, /*#__PURE__*/ React__default.createElement("td", {
         style: {
@@ -49415,7 +48538,7 @@ const InfoValue = styled.span`
   color: ${(p)=>p.theme?.colors?.foreground ?? "inherit"};
   word-break: break-word;
 `;
-const NodeIcon$3 = styled.div`
+const NodeIcon$2 = styled.div`
   font-size: ${(p)=>p.theme?.fontSize?.xl ?? "1.25rem"};
   display: flex;
   align-items: center;
@@ -49435,7 +48558,6 @@ const resolveProviderFromModelName = (modelName)=>{
     const { nodeType, modelProvider, modelName, size = 16 } = options ?? {};
     const normalizedNodeType = nodeType?.toLowerCase();
     if (normalizedNodeType === "tool") return "🔧";
-    if (normalizedNodeType === "coordinator") return "🎯";
     const normalizedProvider = modelProvider?.toLowerCase();
     const resolvedProvider = !normalizedProvider || normalizedProvider === "unknown" ? resolveProviderFromModelName(modelName) : normalizedProvider;
     if (resolvedProvider === "openai") return /*#__PURE__*/ React__default.createElement(OpenAIIcon, {
@@ -49511,18 +48633,12 @@ const AgentNode = ({ data, id, onInspect, defaultDrawerOpen })=>{
         primary: "hsl(221.2 83.2% 53.3%)",
         background: "hsl(0 0% 100%)"
     };
-    // State for inspection drawer
     const [isDrawerOpen, setIsDrawerOpen] = useState(defaultDrawerOpen ?? false);
-    const nodeRef = useRef(null);
-    // Check if this node has any outgoing edges (source edges)
     const hasOutgoingEdges = data.edges?.some((edge)=>edge.source === id) || false;
-    // Check if this node has any incoming edges (target edges)
     const hasIncomingEdges = data.edges?.some((edge)=>edge.target === id) || false;
     const handleNodeClick = ()=>{
         setIsDrawerOpen(true);
-        if (onInspect) {
-            onInspect(data);
-        }
+        onInspect?.(data);
     };
     const handleCloseDrawer = ()=>{
         setIsDrawerOpen(false);
@@ -49538,12 +48654,8 @@ const AgentNode = ({ data, id, onInspect, defaultDrawerOpen })=>{
     });
     const totalCost = sumTotalCost(data.details?.internals?.llm_details || []);
     const totalCostFormatted = formatCurrency(totalCost);
-    const totalCostTooltip = `Total cost: ${formatCurrency(totalCost)} USD`;
-    const nodeDetails = getOverviewLlmDetails(data.details?.internals?.llm_details || []);
-    const inputArray = nodeDetails?.input || [];
-    const output = nodeDetails?.output || null;
-    return /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, /*#__PURE__*/ React__default.createElement(NodeContainer$2, {
-        ref: nodeRef,
+    const providerLine = `${modelName || "—"}`;
+    return /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, /*#__PURE__*/ React__default.createElement(NodeContainer$1, {
         onClick: handleNodeClick,
         className: "nowheel agent-node"
     }, hasIncomingEdges && /*#__PURE__*/ React__default.createElement(Handle$1, {
@@ -49557,17 +48669,21 @@ const AgentNode = ({ data, id, onInspect, defaultDrawerOpen })=>{
             cursor: "default"
         },
         isConnectable: false
-    }), /*#__PURE__*/ React__default.createElement(NodeHeader$2, null, /*#__PURE__*/ React__default.createElement(NodeIconContainer$2, null, /*#__PURE__*/ React__default.createElement(NodeIcon$2, null, nodeIcon), /*#__PURE__*/ React__default.createElement(NodeLabel$2, null, nodeLabel)), /*#__PURE__*/ React__default.createElement(BadgeContainer$2, null, /*#__PURE__*/ React__default.createElement(Badge, {
-        variant: "gray",
-        title: modelName || "Unknown"
-    }, modelName || "Unknown"), /*#__PURE__*/ React__default.createElement(Badge, {
-        variant: "cost",
-        title: totalCostTooltip
-    }, totalCostFormatted))), /*#__PURE__*/ React__default.createElement(NodeContent$2, null, /*#__PURE__*/ React__default.createElement(InputArrayRenderer, {
-        input: inputArray
-    }), output ? /*#__PURE__*/ React__default.createElement(OutputRenderer, {
-        data: output
-    }) : null), hasOutgoingEdges && /*#__PURE__*/ React__default.createElement(Handle$1, {
+    }), /*#__PURE__*/ React__default.createElement(NodeBody$1, null, /*#__PURE__*/ React__default.createElement(TitleRow$1, null, /*#__PURE__*/ React__default.createElement(NodeIcon$1, null, nodeIcon), /*#__PURE__*/ React__default.createElement(NodeLabel$1, {
+        title: nodeLabel
+    }, nodeLabel)), /*#__PURE__*/ React__default.createElement(MetaLine, {
+        title: providerLine
+    }, /*#__PURE__*/ React__default.createElement(MetaLineIcon, {
+        "aria-hidden": true
+    }, /*#__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, {
+        "aria-hidden": true
+    }, /*#__PURE__*/ React__default.createElement(CircleDollarSign, {
+        size: 13,
+        strokeWidth: 2
+    })), totalCostFormatted)), hasOutgoingEdges && /*#__PURE__*/ React__default.createElement(Handle$1, {
         type: "source",
         position: Position.Bottom,
         style: {
@@ -49587,16 +48703,16 @@ const AgentNode = ({ data, id, onInspect, defaultDrawerOpen })=>{
         }
     })));
 };
-// Styled components
-const NodeContainer$2 = styled.div`
+const NodeContainer$1 = styled.div`
   border-radius: 0.5rem;
   background-color: ${(props)=>props.theme?.colors?.card || "hsl(0 0% 100%)"};
   border: 2px solid ${(props)=>props.theme?.colors?.border || "hsl(214.3 31.8% 91.4%)"};
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  min-width: 300px;
-  max-width: ${NODE_MAX_WIDTH}px;
+  min-width: ${FLOW_NODE_MIN_WIDTH}px;
+  max-width: ${FLOW_NODE_MAX_WIDTH}px;
   transition: all 0.2s ease-in-out;
   position: relative;
+  cursor: pointer;
 
   &:hover {
     border-color: ${(props)=>props.theme?.colors?.primary || "hsl(221.2 83.2% 53.3%)"};
@@ -49605,68 +48721,98 @@ const NodeContainer$2 = styled.div`
       0 2px 4px -1px rgba(0, 0, 0, 0.06);
   }
 `;
-const NodeHeader$2 = styled.div`
+const NodeBody$1 = styled.div`
   display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem;
-  border-bottom: 1px solid ${(props)=>props.theme?.colors?.border || "hsl(214.3 31.8% 91.4%)"};
+  flex-direction: column;
+  gap: 0.35rem;
+  padding: 0.5rem 0.625rem;
 `;
-const NodeIconContainer$2 = styled.div`
+const TitleRow$1 = styled.div`
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.375rem;
+  min-width: 0;
+  width: 100%;
 `;
-const NodeIcon$2 = styled.div`
-  font-size: 1.25rem;
+const NodeIcon$1 = styled.div`
+  font-size: 1.125rem;
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-shrink: 0;
   color: ${(props)=>props.theme?.colors?.foreground || "hsl(222.2 84% 4.9%)"};
 `;
-const NodeLabel$2 = styled.div`
+const NodeLabel$1 = styled.div`
+  flex: 1 1 0;
+  min-width: 0;
   font-weight: 600;
   color: ${(props)=>props.theme?.colors?.foreground || "hsl(222.2 84% 4.9%)"};
-  font-size: 0.875rem;
-  word-break: break-words;
+  font-size: 0.8125rem;
+  line-height: 1.25;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `;
-const BadgeContainer$2 = styled.div`
+const MetaLine = styled.div`
   display: flex;
-  gap: 0.5rem;
-  justify-content: flex-end;
-  align-items: center;
+  align-items: flex-start;
+  gap: 0.3rem;
+  font-size: 0.6875rem;
+  line-height: 1.3;
+  color: ${(props)=>props.theme?.colors?.mutedForeground || "hsl(215.4 16.3% 46.9%)"};
 `;
-const NodeContent$2 = styled.div`
-  padding: 0.75rem;
+const MetaLineIcon = styled.span`
+  display: inline-flex;
+  flex-shrink: 0;
+  margin-top: 0.1em;
+  color: inherit;
+`;
+const MetaLineText = styled.span`
+  min-width: 0;
+  flex: 1;
+  word-break: break-word;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+`;
+const CostLine = styled.div`
   display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-  gap: 0.5rem;
+  align-items: center;
+  gap: 0.3rem;
+  font-color: inherit;
+  font-size: 0.75rem;
+  font-weight: 600;
+`;
+const CostLineIcon = styled.span`
+  display: inline-flex;
+  flex-shrink: 0;
+  color: inherit;
 `;
 
-const CoordinatorNode = ({ data, id, onInspect })=>{
+const ToolNode = ({ data, id, onInspect })=>{
     const { theme } = useTheme$1();
     const themeColors = theme?.colors || {
         primary: "hsl(221.2 83.2% 53.3%)",
         background: "hsl(0 0% 100%)"
     };
-    // Check if this node has any outgoing edges (source edges)
+    const [isDrawerOpen, setIsDrawerOpen] = useState(false);
     const hasOutgoingEdges = data.edges?.some((edge)=>edge.source === id) || false;
-    // Check if this node has any incoming edges (target edges)
     const hasIncomingEdges = data.edges?.some((edge)=>edge.target === id) || false;
     const handleNodeClick = ()=>{
-        // Console log the node data for Coordinator nodes
-        console.log("Coordinator node clicked:", {
-            label: data.label,
-            nodeType: data.nodeType,
-            details: data.details
-        });
+        setIsDrawerOpen(true);
+        onInspect?.(data);
     };
-    const nodeLabel = data.label || toTitleCase("Coordinator") || "Coordinator";
-    return /*#__PURE__*/ React__default.createElement(NodeContainer$1, {
-        onClick: handleNodeClick
+    const handleCloseDrawer = ()=>{
+        setIsDrawerOpen(false);
+    };
+    const nodeLabel = data.label || toTitleCase("Tool") || "Tool";
+    const nodeIcon = getNodeIcon({
+        nodeType: "tool"
+    });
+    return /*#__PURE__*/ React__default.createElement(NodeContainer, {
+        onClick: handleNodeClick,
+        className: "nowheel"
     }, hasIncomingEdges && /*#__PURE__*/ React__default.createElement(Handle$1, {
         type: "target",
         position: Position.Top,
@@ -49678,11 +48824,9 @@ const CoordinatorNode = ({ data, id, onInspect })=>{
             cursor: "default"
         },
         isConnectable: false
-    }), /*#__PURE__*/ React__default.createElement(NodeHeader$1, null, /*#__PURE__*/ React__default.createElement(NodeIconContainer$1, null, /*#__PURE__*/ React__default.createElement(NodeIcon$1, null, "🎯"), /*#__PURE__*/ React__default.createElement(NodeLabel$1, null, nodeLabel)), /*#__PURE__*/ React__default.createElement(BadgeContainer$1, null, /*#__PURE__*/ React__default.createElement(Badge, {
-        variant: "gray"
-    }, "Coordinator"))), /*#__PURE__*/ React__default.createElement(NodeContent$1, null, /*#__PURE__*/ React__default.createElement(JsonTreeViewer, {
-        data: data.details?.internals || {}
-    })), hasOutgoingEdges && /*#__PURE__*/ React__default.createElement(Handle$1, {
+    }), /*#__PURE__*/ React__default.createElement(NodeBody, null, /*#__PURE__*/ React__default.createElement(TitleRow, null, /*#__PURE__*/ React__default.createElement(NodeIcon, null, nodeIcon), /*#__PURE__*/ React__default.createElement(NodeLabel, {
+        title: nodeLabel
+    }, nodeLabel))), hasOutgoingEdges && /*#__PURE__*/ React__default.createElement(Handle$1, {
         type: "source",
         position: Position.Bottom,
         style: {
@@ -49693,15 +48837,22 @@ const CoordinatorNode = ({ data, id, onInspect })=>{
             cursor: "default"
         },
         isConnectable: false
+    }), /*#__PURE__*/ React__default.createElement(NodeDetailsDrawer, {
+        isVisible: isDrawerOpen,
+        onClose: handleCloseDrawer,
+        nodeData: {
+            ...data,
+            id
+        }
     }));
 };
-// Styled components
-const NodeContainer$1 = styled.div`
+const NodeContainer = styled.div`
   border-radius: 0.5rem;
   background-color: ${(props)=>props.theme?.colors?.card || "hsl(0 0% 100%)"};
   border: 2px solid ${(props)=>props.theme?.colors?.border || "hsl(214.3 31.8% 91.4%)"};
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  min-width: 300px;
+  min-width: ${FLOW_NODE_MIN_WIDTH}px;
+  max-width: ${FLOW_NODE_MAX_WIDTH}px;
   transition: all 0.2s ease-in-out;
   position: relative;
   cursor: pointer;
@@ -49713,205 +48864,553 @@ const NodeContainer$1 = styled.div`
       0 2px 4px -1px rgba(0, 0, 0, 0.06);
   }
 `;
-const NodeHeader$1 = styled.div`
+const NodeBody = styled.div`
   display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem;
-  border-bottom: 1px solid ${(props)=>props.theme?.colors?.border || "hsl(214.3 31.8% 91.4%)"};
+  flex-direction: column;
+  padding: 0.5rem 0.625rem;
 `;
-const NodeIconContainer$1 = styled.div`
+const TitleRow = styled.div`
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.375rem;
+  min-width: 0;
 `;
-const NodeIcon$1 = styled.div`
-  font-size: 1.25rem;
+const NodeIcon = styled.div`
+  font-size: 1.125rem;
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-shrink: 0;
   color: ${(props)=>props.theme?.colors?.foreground || "hsl(222.2 84% 4.9%)"};
 `;
-const NodeLabel$1 = styled.div`
+const NodeLabel = styled.div`
   font-weight: 600;
   color: ${(props)=>props.theme?.colors?.foreground || "hsl(222.2 84% 4.9%)"};
-  font-size: 0.875rem;
-  word-break: break-words;
+  font-size: 0.8125rem;
+  line-height: 1.25;
+  word-break: break-word;
+  min-width: 0;
 `;
-const BadgeContainer$1 = styled.div`
-  display: flex;
-  gap: 0.5rem;
-  justify-content: flex-end;
-  align-items: center;
+
+const Node$1 = ({ data, id })=>{
+    const nodeType = data.nodeType || "Agent";
+    const onInspect = data.onInspect;
+    switch(nodeType){
+        case "Agent":
+            return /*#__PURE__*/ React__default.createElement(AgentNode, {
+                data: data,
+                id: id,
+                onInspect: onInspect,
+                defaultDrawerOpen: data.defaultDrawerOpen
+            });
+        case "Tool":
+            return /*#__PURE__*/ React__default.createElement(ToolNode, {
+                data: data,
+                id: id,
+                onInspect: onInspect
+            });
+        default:
+            return /*#__PURE__*/ React__default.createElement(AgentNode, {
+                data: data,
+                id: id,
+                onInspect: onInspect,
+                defaultDrawerOpen: data.defaultDrawerOpen
+            });
+    }
+};
+
+const TooltipContainer = styled.div`
+  position: relative;
+  display: inline-block;
 `;
-const NodeContent$1 = styled.div`
-  padding: 0.75rem;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-  gap: 0.5rem;
+const TooltipContent = styled.div`
+  position: absolute;
+  z-index: 1000;
+  padding: 8px 12px;
+  font-weight: 400;
+  background-color: ${({ themeColors })=>themeColors.popover};
+  color: ${({ themeColors })=>themeColors.popoverForeground};
+  border: 1px solid ${({ themeColors })=>themeColors.border};
+  border-radius: 6px;
+  font-size: 12px;
+  line-height: 1.4;
+  white-space: nowrap;
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  opacity: ${({ isVisible })=>isVisible ? 1 : 0};
+  visibility: ${({ isVisible })=>isVisible ? "visible" : "hidden"};
+  transition:
+    opacity 0.15s ease-in-out,
+    visibility 0.15s ease-in-out;
+  pointer-events: none;
+
+  /* Arrow */
+  &::before {
+    content: "";
+    position: absolute;
+    width: 0;
+    height: 0;
+    border: 4px solid transparent;
+  }
+
+  /* Placement-specific positioning and arrow */
+  ${({ placement, themeColors })=>{
+    switch(placement){
+        case "top":
+            return `
+          bottom: 100%;
+          left: 50%;
+          transform: translateX(-50%);
+          margin-bottom: 8px;
+          &::before {
+            top: 100%;
+            left: 50%;
+            transform: translateX(-50%);
+            border-top-color: ${themeColors.border};
+          }
+          &::after {
+            content: "";
+            position: absolute;
+            top: 100%;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 0;
+            height: 0;
+            border: 3px solid transparent;
+            border-top-color: ${themeColors.popover};
+          }
+        `;
+        case "bottom":
+            return `
+          top: 100%;
+          left: 50%;
+          transform: translateX(-50%);
+          margin-top: 8px;
+          &::before {
+            bottom: 100%;
+            left: 50%;
+            transform: translateX(-50%);
+            border-bottom-color: ${themeColors.border};
+          }
+          &::after {
+            content: "";
+            position: absolute;
+            bottom: 100%;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 0;
+            height: 0;
+            border: 3px solid transparent;
+            border-bottom-color: ${themeColors.popover};
+          }
+        `;
+        case "left":
+            return `
+          right: 100%;
+          top: 50%;
+          transform: translateY(-50%);
+          margin-right: 8px;
+          &::before {
+            left: 100%;
+            top: 50%;
+            transform: translateY(-50%);
+            border-left-color: ${themeColors.border};
+          }
+          &::after {
+            content: "";
+            position: absolute;
+            left: 100%;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 0;
+            height: 0;
+            border: 3px solid transparent;
+            border-left-color: ${themeColors.popover};
+          }
+        `;
+        case "right":
+            return `
+          left: 100%;
+          top: 50%;
+          transform: translateY(-50%);
+          margin-left: 8px;
+          &::before {
+            right: 100%;
+            top: 50%;
+            transform: translateY(-50%);
+            border-right-color: ${themeColors.border};
+          }
+          &::after {
+            content: "";
+            position: absolute;
+            right: 100%;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 0;
+            height: 0;
+            border: 3px solid transparent;
+            border-right-color: ${themeColors.popover};
+          }
+        `;
+        case "topLeft":
+            return `
+          bottom: 100%;
+          right: 0;
+          margin-bottom: 8px;
+          &::before {
+            top: 100%;
+            right: 8px;
+            border-top-color: ${themeColors.border};
+          }
+          &::after {
+            content: "";
+            position: absolute;
+            top: 100%;
+            right: 8px;
+            width: 0;
+            height: 0;
+            border: 3px solid transparent;
+            border-top-color: ${themeColors.popover};
+          }
+        `;
+        case "topRight":
+            return `
+          bottom: 100%;
+          left: 0;
+          margin-bottom: 8px;
+          &::before {
+            top: 100%;
+            left: 8px;
+            border-top-color: ${themeColors.border};
+          }
+          &::after {
+            content: "";
+            position: absolute;
+            top: 100%;
+            left: 8px;
+            width: 0;
+            height: 0;
+            border: 3px solid transparent;
+            border-top-color: ${themeColors.popover};
+          }
+        `;
+        case "bottomLeft":
+            return `
+          top: 100%;
+          right: 0;
+          margin-top: 8px;
+          &::before {
+            bottom: 100%;
+            right: 8px;
+            border-bottom-color: ${themeColors.border};
+          }
+          &::after {
+            content: "";
+            position: absolute;
+            bottom: 100%;
+            right: 8px;
+            width: 0;
+            height: 0;
+            border: 3px solid transparent;
+            border-bottom-color: ${themeColors.popover};
+          }
+        `;
+        case "bottomRight":
+            return `
+          top: 100%;
+          left: 0;
+          margin-top: 8px;
+          &::before {
+            bottom: 100%;
+            left: 8px;
+            border-bottom-color: ${themeColors.border};
+          }
+          &::after {
+            content: "";
+            position: absolute;
+            bottom: 100%;
+            left: 8px;
+            width: 0;
+            height: 0;
+            border: 3px solid transparent;
+            border-bottom-color: ${themeColors.popover};
+          }
+        `;
+        case "leftTop":
+            return `
+          right: 100%;
+          bottom: 0;
+          margin-right: 8px;
+          &::before {
+            left: 100%;
+            bottom: 8px;
+            border-left-color: ${themeColors.border};
+          }
+          &::after {
+            content: "";
+            position: absolute;
+            left: 100%;
+            bottom: 8px;
+            width: 0;
+            height: 0;
+            border: 3px solid transparent;
+            border-left-color: ${themeColors.popover};
+          }
+        `;
+        case "leftBottom":
+            return `
+          right: 100%;
+          top: 0;
+          margin-right: 8px;
+          &::before {
+            left: 100%;
+            top: 8px;
+            border-left-color: ${themeColors.border};
+          }
+          &::after {
+            content: "";
+            position: absolute;
+            left: 100%;
+            top: 8px;
+            width: 0;
+            height: 0;
+            border: 3px solid transparent;
+            border-left-color: ${themeColors.popover};
+          }
+        `;
+        case "rightTop":
+            return `
+          left: 100%;
+          bottom: 0;
+          margin-left: 8px;
+          &::before {
+            right: 100%;
+            bottom: 8px;
+            border-right-color: ${themeColors.border};
+          }
+          &::after {
+            content: "";
+            position: absolute;
+            right: 100%;
+            bottom: 8px;
+            width: 0;
+            height: 0;
+            border: 3px solid transparent;
+            border-right-color: ${themeColors.popover};
+          }
+        `;
+        case "rightBottom":
+            return `
+          left: 100%;
+          top: 0;
+          margin-left: 8px;
+          &::before {
+            right: 100%;
+            top: 8px;
+            border-right-color: ${themeColors.border};
+          }
+          &::after {
+            content: "";
+            position: absolute;
+            right: 100%;
+            top: 8px;
+            width: 0;
+            height: 0;
+            border: 3px solid transparent;
+            border-right-color: ${themeColors.popover};
+          }
+        `;
+        default:
+            return `
+          bottom: 100%;
+          left: 50%;
+          transform: translateX(-50%);
+          margin-bottom: 8px;
+          &::before {
+            top: 100%;
+            left: 50%;
+            transform: translateX(-50%);
+            border-top-color: ${themeColors.border};
+          }
+          &::after {
+            content: "";
+            position: absolute;
+            top: 100%;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 0;
+            height: 0;
+            border: 3px solid transparent;
+            border-top-color: ${themeColors.popover};
+          }
+        `;
+    }
+}}
 `;
-
-const ToolNode = ({ data, id, onInspect })=>{
+const Tooltip = ({ children, content, placement = "top", delay = 300 })=>{
     const { theme } = useTheme$1();
-    const themeColors = theme?.colors || {
-        primary: "hsl(221.2 83.2% 53.3%)",
-        background: "hsl(0 0% 100%)"
+    const [isVisible, setIsVisible] = React.useState(false);
+    const timeoutRef = React.useRef();
+    const showTooltip = ()=>{
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        timeoutRef.current = setTimeout(()=>{
+            setIsVisible(true);
+        }, delay);
     };
-    // Check if this node has any outgoing edges (source edges)
-    const hasOutgoingEdges = data.edges?.some((edge)=>edge.source === id) || false;
-    // Check if this node has any incoming edges (target edges)
-    const hasIncomingEdges = data.edges?.some((edge)=>edge.target === id) || false;
-    const handleNodeClick = ()=>{
-        if (onInspect) {
-            onInspect(data);
+    const hideTooltip = ()=>{
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
         }
+        setIsVisible(false);
     };
-    const nodeLabel = data.label || toTitleCase("Tool") || "Tool";
-    const latency = data.details?.internals?.latency?.total_time;
-    let nodeData = null;
-    const baseData = data.details?.internals || {};
-    if (data.edgeDetails && data.edgeDetails.length > 0) {
-        nodeData = {
-            ...baseData,
-            input: {
-                ...data.edgeDetails[0]?.input_kwargs
-            },
-            output: data.edgeDetails[0]?.output,
-            status: data.edgeDetails[0]?.status
+    React.useEffect(()=>{
+        return ()=>{
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
         };
-    }
-    return /*#__PURE__*/ React__default.createElement(NodeContainer, {
-        onClick: handleNodeClick,
-        className: "nowheel"
-    }, hasIncomingEdges && /*#__PURE__*/ React__default.createElement(Handle$1, {
-        type: "target",
-        position: Position.Top,
-        style: {
-            width: "8px",
-            height: "8px",
-            border: `2px solid ${themeColors.primary}`,
-            backgroundColor: themeColors.background,
-            cursor: "default"
-        },
-        isConnectable: false
-    }), /*#__PURE__*/ React__default.createElement(NodeHeader, null, /*#__PURE__*/ React__default.createElement(NodeIconContainer, null, /*#__PURE__*/ React__default.createElement(NodeIcon, null, "🔧"), /*#__PURE__*/ React__default.createElement(NodeLabel, null, nodeLabel)), latency != null && /*#__PURE__*/ React__default.createElement(BadgeContainer, null, /*#__PURE__*/ React__default.createElement(Badge, {
-        variant: "latency"
-    }, formatLatency(latency)))), nodeData && /*#__PURE__*/ React__default.createElement(NodeContent, {
-        className: "nodrag"
-    }, /*#__PURE__*/ React__default.createElement(JsonTreeViewer, {
-        excludeKeys: [
-            "latency"
-        ],
-        data: nodeData
-    })), hasOutgoingEdges && /*#__PURE__*/ React__default.createElement(Handle$1, {
-        type: "source",
-        position: Position.Bottom,
-        style: {
-            width: "8px",
-            height: "8px",
-            border: `2px solid ${themeColors.primary}`,
-            backgroundColor: themeColors.background,
-            cursor: "default"
-        },
-        isConnectable: false
-    }));
+    }, []);
+    return /*#__PURE__*/ React.createElement(TooltipContainer, {
+        onMouseEnter: showTooltip,
+        onMouseLeave: hideTooltip,
+        onFocus: showTooltip,
+        onBlur: hideTooltip
+    }, children, /*#__PURE__*/ React.createElement(TooltipContent, {
+        isVisible: isVisible,
+        placement: placement,
+        themeColors: theme.colors,
+        role: "tooltip"
+    }, content));
 };
-// Styled components
-const NodeContainer = styled.div`
-  border-radius: 0.5rem;
-  background-color: ${(props)=>props.theme?.colors?.card || "hsl(0 0% 100%)"};
-  border: 2px solid ${(props)=>props.theme?.colors?.border || "hsl(214.3 31.8% 91.4%)"};
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  min-width: 300px;
-  max-width: ${NODE_MAX_WIDTH}px;
-  transition: all 0.2s ease-in-out;
-  position: relative;
-  cursor: pointer;
 
-  &:hover {
-    border-color: ${(props)=>props.theme?.colors?.primary || "hsl(221.2 83.2% 53.3%)"};
-    box-shadow:
-      0 4px 6px -1px rgba(0, 0, 0, 0.1),
-      0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  }
-`;
-const NodeHeader = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem;
-  border-bottom: 1px solid ${(props)=>props.theme?.colors?.border || "hsl(214.3 31.8% 91.4%)"};
-`;
-const NodeIconContainer = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-`;
-const NodeIcon = styled.div`
-  font-size: 1.25rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: ${(props)=>props.theme?.colors?.foreground || "hsl(222.2 84% 4.9%)"};
-`;
-const NodeLabel = styled.div`
-  font-weight: 600;
-  color: ${(props)=>props.theme?.colors?.foreground || "hsl(222.2 84% 4.9%)"};
-  font-size: 0.875rem;
-  word-break: break-words;
-`;
 const BadgeContainer = styled.div`
-  display: flex;
-  gap: 0.5rem;
-  justify-content: flex-end;
+  display: inline-flex;
   align-items: center;
-`;
-const NodeContent = styled.div`
-  padding: 0.75rem;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-  gap: 0.5rem;
-`;
+  border-radius: 9999px;
+  border: 1px solid transparent;
+  padding: 0.125rem 0.625rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  transition: colors 0.2s ease-in-out;
+  outline: none;
 
-const Node$1 = ({ data, id })=>{
-    const nodeType = data.nodeType || "Agent";
-    const onInspect = data.onInspect; // Extract onInspect from data
-    // Route to the appropriate node component based on type
-    switch(nodeType){
-        case "Agent":
-            return /*#__PURE__*/ React__default.createElement(AgentNode, {
-                data: data,
-                id: id,
-                onInspect: onInspect,
-                defaultDrawerOpen: data.defaultDrawerOpen
-            });
-        case "Tool":
-            return /*#__PURE__*/ React__default.createElement(ToolNode, {
-                data: data,
-                id: id,
-                onInspect: onInspect
-            });
-        case "Coordinator":
-            return /*#__PURE__*/ React__default.createElement(CoordinatorNode, {
-                data: data,
-                id: id,
-                onInspect: onInspect
-            });
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
+  }
+
+  ${({ variant, themeColors })=>{
+    switch(variant){
+        case "default":
+            return `
+          background-color: ${themeColors.primary};
+          color: ${themeColors.primaryForeground};
+          &:hover {
+            background-color: ${themeColors.primary};
+            opacity: 0.9;
+          }
+        `;
+        case "secondary":
+            return `
+          background-color: ${themeColors.secondary};
+          color: ${themeColors.secondaryForeground};
+          &:hover {
+            background-color: ${themeColors.muted};
+          }
+        `;
+        case "destructive":
+            return `
+          background-color: ${themeColors.destructive};
+          color: ${themeColors.destructiveForeground};
+          &:hover {
+            background-color: ${themeColors.destructive};
+            opacity: 0.9;
+          }
+        `;
+        case "outline":
+            return `
+          background-color: transparent;
+          color: ${themeColors.cardForeground};
+          border-color: ${themeColors.border};
+        `;
+        case "cost":
+            return `
+          background-color: ${themeColors.secondary};
+          color: ${themeColors.secondaryForeground};
+          &:hover {
+            background-color: ${themeColors.muted};
+          }
+        `;
+        case "gray":
+            return `
+          background-color: ${themeColors.secondary};
+          color: ${themeColors.secondaryForeground};
+          &:hover {
+            background-color: ${themeColors.muted};
+          }
+        `;
+        case "latency":
+            return `
+          background-color: ${themeColors.secondary};
+          color: ${themeColors.secondaryForeground};
+          &:hover {
+            background-color: ${themeColors.muted};
+          }
+        `;
+        case "latencyLow":
+            return `
+          background-color: ${themeColors.secondary};
+          color: ${themeColors.secondaryForeground};
+          &:hover {
+            background-color: ${themeColors.muted};
+          }
+        `;
+        case "latencyMedium":
+            return `
+          background-color: ${themeColors.secondary};
+          color: ${themeColors.secondaryForeground};
+          &:hover {
+            background-color: ${themeColors.muted};
+          }
+        `;
+        case "latencyHigh":
+            return `
+          background-color: ${themeColors.destructive};
+          color: ${themeColors.destructiveForeground};
+          &:hover {
+            background-color: ${themeColors.destructive};
+            opacity: 0.9;
+          }
+        `;
         default:
-            // Fallback to Agent node for unknown types
-            return /*#__PURE__*/ React__default.createElement(AgentNode, {
-                data: data,
-                id: id,
-                onInspect: onInspect,
-                defaultDrawerOpen: data.defaultDrawerOpen
-            });
+            return `
+          background-color: ${themeColors.primary};
+          color: ${themeColors.primaryForeground};
+          &:hover {
+            background-color: ${themeColors.primary};
+            opacity: 0.9;
+          }
+        `;
+    }
+}}
+`;
+const Badge = ({ variant = "default", children, title, placement = "top" })=>{
+    const { theme } = useTheme$1();
+    const themeColors = theme.colors;
+    const badgeContent = /*#__PURE__*/ React.createElement(BadgeContainer, {
+        variant: variant,
+        themeColors: themeColors
+    }, children);
+    if (title) {
+        return /*#__PURE__*/ React.createElement(Tooltip, {
+            content: title,
+            placement: placement
+        }, badgeContent);
     }
+    return badgeContent;
 };
 
 // Styled Components
@@ -52592,7 +52091,7 @@ SheetDescription.displayName = Description.displayName;
 /**
  * Calculates a clean tree layout: parents centered above children, siblings spaced evenly, no overlap.
  */ const calculateAutoLayout = (nodes, edges, options = {})=>{
-    const { minNodeSpacing = 200, containerWidth = 600 } = options;
+    const { minNodeSpacing = 72, containerWidth = 600 } = options;
     // Handle undefined or null nodes
     if (!nodes || nodes.length === 0) {
         return new Map();
@@ -52642,8 +52141,8 @@ SheetDescription.displayName = Description.displayName;
     });
     // Calculate subtree widths for each node (for centering horizontally)
     const subtreeWidth = new Map();
-    const nodeWidth = 200; // Approximate node width
-    const nodeSpacing = Math.max(250, minNodeSpacing + 50); // Horizontal spacing between nodes (ensures minimum spacing + buffer)
+    const nodeWidth = LAYOUT_NODE_WIDTH;
+    const nodeSpacing = Math.max(8, Math.floor(minNodeSpacing / 8));
     const calcSubtreeWidth = (nodeId)=>{
         const children = childrenMap.get(nodeId) || [];
         if (children.length === 0) {
@@ -52661,8 +52160,8 @@ SheetDescription.displayName = Description.displayName;
     roots.forEach((root)=>calcSubtreeWidth(root.identifier));
     // Assign positions recursively - now top to bottom
     const positions = new Map();
-    const levelSpacing = Math.max(400, minNodeSpacing + 200); // Vertical spacing between levels (ensures minimum spacing + buffer)
-    const verticalMargin = 100; // Add margin to the top
+    const levelSpacing = Math.max(130, minNodeSpacing + 42);
+    const verticalMargin = 40;
     const assignPositions = (nodeId, xLeft, level)=>{
         const width = subtreeWidth.get(nodeId) || nodeWidth;
         const y = level * levelSpacing + verticalMargin; // Add margin here
@@ -52746,13 +52245,12 @@ SheetDescription.displayName = Description.displayName;
 
 const nodeTypes = {
     Agent: Node$1,
-    Tool: Node$1,
-    Coordinator: Node$1
+    Tool: Node$1
 };
 const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100dvw", height = "100dvh", className = "", defaultZoom = 1, defaultPan = {
     x: 0,
     y: 0
-}, disableAutoFit = true, defaultAutoFitDuration = 1000, defaultAutoFitDelay = 250, showTimeline = false, minNodeSpacing = 300, onInspect, panToNodeId })=>{
+}, disableAutoFit = true, defaultAutoFitDuration = 1000, defaultAutoFitDelay = 250, showTimeline = false, minNodeSpacing = 72, onInspect, panToNodeId })=>{
     const { theme, isDarkMode } = useTheme$1();
     const themeColors = theme.colors;
     // Helper function to determine if we should apply minimum dimensions
@@ -52944,15 +52442,17 @@ const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100dvw", heigh
                 y: 0
             };
             const isActive = node.stamp.step === currentStep;
+            const rawType = node.node_type || "Agent";
+            const resolvedType = rawType === "Coordinator" ? "Agent" : rawType;
             // Extract edge details for Tool nodes
             const edgeDetails = node.node_type === "Tool" ? stepEdges.filter((edge)=>edge.target === node.identifier && edge.details).map((edge)=>edge.details) : undefined;
             return {
                 id: node.identifier,
-                type: node.node_type || "Agent",
+                type: resolvedType,
                 position,
                 data: {
                     label: node.name || node.node_type,
-                    nodeType: node.node_type,
+                    nodeType: resolvedType,
                     details: node.details,
                     isActive,
                     id: node.identifier,
@@ -52984,7 +52484,6 @@ const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100dvw", heigh
                 animated: isActive,
                 bidirectional: true,
                 style: {
-                    stroke: isActive ? themeColors.primary : themeColors.mutedForeground,
                     strokeWidth: isActive ? 3 : 2
                 },
                 label: edge.stamp?.identifier ? truncateText(String(edge.stamp.identifier), 50) : undefined,
@@ -53000,9 +52499,7 @@ const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100dvw", heigh
         });
     }, [
         currentStep,
-        getEdgesForStep,
-        themeColors.primary,
-        themeColors.mutedForeground
+        getEdgesForStep
     ]);
     const [nodesState, setNodes, onNodesChange] = useNodesState(nodes);
     const [edgesState, setEdges, onEdgesChange] = useEdgesState(edges);
@@ -112730,7 +112227,328 @@ 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) ?? [];
+    const status = incoming[0]?.details?.status;
+    return Boolean(status && getStatusColor(status) === "error");
+}
 // Parse tree node key to extract metadata (format: "node::runId::nodeId" to handle dashes in IDs)
 const parseTreeNodeKey = (key)=>{
     if (key.startsWith("flow-")) {
@@ -112840,13 +112658,15 @@ const buildNodeTree = (run)=>{
         const childLatency = children.reduce((s, c)=>s + (c.subtreeLatency ?? 0), 0);
         const subtreeLatency = getNodeLatency(node) + childLatency;
         const isTool = node.node_type === "Tool";
+        const failed = isNodeFailureFromIncomingEdge(run, node.identifier);
+        const iconBg = failed ? "#ff4d4f" : isTool ? "#1890ff" : "#52c41a";
         const icon = /*#__PURE__*/ React__default.createElement("span", {
             style: {
                 display: "block",
                 width: 22,
                 height: 22,
                 borderRadius: 4,
-                background: isTool ? "#1890ff" : "#52c41a"
+                background: iconBg
             }
         }, isTool ? /*#__PURE__*/ React__default.createElement(Wrench, {
             size: 14,
@@ -112978,7 +112798,6 @@ const useShareAgentSession = (session)=>{
 const { Text } = Typography;
 // Shared theme color fallbacks
 const DEFAULT_THEME_COLORS = {
-    mutedForeground: "hsl(215.4 16.3% 46.9%)",
     border: "hsl(214.3 31.8% 91.4%)",
     foreground: "hsl(222.2 84% 4.9%)"
 };
@@ -113007,145 +112826,6 @@ const isTabularData = (data)=>{
     }
     return false;
 };
-const ObjectCardRenderer = ({ data, isDarkMode })=>{
-    const { theme } = useTheme$1();
-    const themeColors = theme?.colors || DEFAULT_THEME_COLORS;
-    // Helper to render a value (handles nested objects/arrays)
-    const renderValue = (value)=>{
-        if (value === null || value === undefined) {
-            return /*#__PURE__*/ React__default.createElement("span", {
-                style: {
-                    color: themeColors.mutedForeground
-                }
-            }, "null");
-        }
-        // Handle nested objects
-        if (typeof value === "object" && !Array.isArray(value) && value.constructor === Object) {
-            const nestedItems = Object.entries(value).map(([key, val])=>({
-                    key: `nested-${key}`,
-                    label: key,
-                    children: renderValue(val)
-                }));
-            return /*#__PURE__*/ React__default.createElement(Collapse$1, {
-                items: [
-                    {
-                        key: "nested-object",
-                        label: /*#__PURE__*/ React__default.createElement("span", {
-                            style: {
-                                fontSize: "12px"
-                            }
-                        }, "Object (", Object.keys(value).length, " keys)"),
-                        children: /*#__PURE__*/ React__default.createElement(Descriptions, {
-                            column: 1,
-                            size: "small",
-                            items: nestedItems,
-                            style: {
-                                marginTop: "8px"
-                            }
-                        })
-                    }
-                ],
-                size: "small",
-                style: {
-                    background: "transparent"
-                }
-            });
-        }
-        // Handle arrays
-        if (Array.isArray(value)) {
-            return /*#__PURE__*/ React__default.createElement(Collapse$1, {
-                items: [
-                    {
-                        key: "nested-array",
-                        label: /*#__PURE__*/ React__default.createElement("span", {
-                            style: {
-                                fontSize: "12px"
-                            }
-                        }, "Array (", value.length, " items)"),
-                        children: /*#__PURE__*/ React__default.createElement("div", {
-                            style: {
-                                marginTop: "8px"
-                            }
-                        }, value.map((item, idx)=>/*#__PURE__*/ React__default.createElement("div", {
-                                key: idx,
-                                style: {
-                                    marginBottom: "8px"
-                                }
-                            }, typeof item === "object" && item !== null && !Array.isArray(item) ? /*#__PURE__*/ React__default.createElement(Descriptions, {
-                                column: 1,
-                                size: "small",
-                                items: Object.entries(item).map(([key, val])=>({
-                                        key: `array-item-${idx}-${key}`,
-                                        label: key,
-                                        children: renderValue(val)
-                                    }))
-                            }) : /*#__PURE__*/ React__default.createElement("pre", {
-                                style: {
-                                    margin: 0,
-                                    padding: "8px",
-                                    background: isDarkMode ? "#1f1f1f" : "#fafafa",
-                                    border: `1px solid ${themeColors.border}`,
-                                    borderRadius: "4px",
-                                    fontSize: "12px",
-                                    whiteSpace: "pre-wrap",
-                                    wordWrap: "break-word"
-                                }
-                            }, JSON.stringify(item, null, 2)))))
-                    }
-                ],
-                size: "small",
-                style: {
-                    background: "transparent"
-                }
-            });
-        }
-        // Handle primitive values
-        return /*#__PURE__*/ React__default.createElement("span", null, String(value));
-    };
-    // Normalize to array
-    const objectsArray = Array.isArray(data) ? data : [
-        data
-    ];
-    return /*#__PURE__*/ React__default.createElement("div", {
-        style: {
-            display: "flex",
-            flexDirection: "column",
-            gap: "12px"
-        }
-    }, objectsArray.map((obj, index)=>{
-        if (!obj || typeof obj !== "object") {
-            return null;
-        }
-        const items = Object.entries(obj).map(([key, value])=>({
-                key,
-                label: key,
-                children: renderValue(value)
-            }));
-        return /*#__PURE__*/ React__default.createElement(Card, {
-            key: index,
-            size: "small",
-            style: {
-                background: isDarkMode ? "#1f1f1f" : "#fff",
-                border: `1px solid ${themeColors.border}`
-            },
-            bodyStyle: {
-                padding: "16px"
-            }
-        }, /*#__PURE__*/ React__default.createElement(Descriptions, {
-            column: 1,
-            size: "small",
-            items: items,
-            labelStyle: {
-                color: themeColors.mutedForeground,
-                fontWeight: 500,
-                width: "30%"
-            },
-            contentStyle: {
-                color: themeColors.foreground
-            }
-        }));
-    }));
-};
 // Helper function to format output as text
 const formatOutputAsText = (output, toolOutput)=>{
     if (toolOutput !== null && toolOutput !== undefined) {
@@ -113441,9 +113121,8 @@ const NodeDetailsPanel = ({ selectedNode, session, isDarkMode })=>{
             label: /*#__PURE__*/ React__default.createElement(Text, {
                 strong: true
             }, "Outputs"),
-            children: hasOutputs ? isToolOutputTabular ? /*#__PURE__*/ React__default.createElement(ObjectCardRenderer, {
-                data: toolOutput,
-                isDarkMode: isDarkMode
+            children: hasOutputs ? isToolOutputTabular ? /*#__PURE__*/ React__default.createElement(JsonValueTree, {
+                data: toolOutput
             }) : /*#__PURE__*/ React__default.createElement("pre", {
                 style: {
                     margin: 0,
@@ -113717,7 +113396,7 @@ const SessionDetails = ({ session, open, onClose, initialNodeId, initialRunId, l
             size: "small"
         })), /*#__PURE__*/ React__default.createElement(Divider, {
             type: "vertical"
-        }), /*#__PURE__*/ React__default.createElement(Tooltip, {
+        }), /*#__PURE__*/ React__default.createElement(Tooltip$1, {
             title: "Show Session Details"
         }, /*#__PURE__*/ React__default.createElement(Button$1, {
             type: "text",
@@ -113726,7 +113405,7 @@ const SessionDetails = ({ session, open, onClose, initialNodeId, initialRunId, l
             }),
             onClick: ()=>setIsFullScreen(false),
             disabled: !session?.session_id
-        }, "Session Details"))) : /*#__PURE__*/ React__default.createElement(Tooltip, {
+        }, "Session Details"))) : /*#__PURE__*/ React__default.createElement(Tooltip$1, {
             title: "Open Visualizer"
         }, /*#__PURE__*/ React__default.createElement(Button$1, {
             type: "text",
@@ -113737,7 +113416,7 @@ const SessionDetails = ({ session, open, onClose, initialNodeId, initialRunId, l
             disabled: !session?.session_id
         }, "Visualizer")), /*#__PURE__*/ React__default.createElement(Divider, {
             type: "vertical"
-        }), /*#__PURE__*/ React__default.createElement(Tooltip, {
+        }), /*#__PURE__*/ React__default.createElement(Tooltip$1, {
             title: "Copy Session ID to Clipboard"
         }, /*#__PURE__*/ React__default.createElement(Button$1, {
             type: "text",
@@ -113746,7 +113425,7 @@ const SessionDetails = ({ session, open, onClose, initialNodeId, initialRunId, l
             }),
             onClick: handleCopyId,
             disabled: !session?.session_id
-        })), /*#__PURE__*/ React__default.createElement(Tooltip, {
+        })), /*#__PURE__*/ React__default.createElement(Tooltip$1, {
             title: "Coming Soon!"
         }, /*#__PURE__*/ React__default.createElement(Button$1, {
             type: "text",
@@ -114466,7 +114145,7 @@ const EvaluationsCompareDrawer = ({ open, onClose, evaluationId1, evaluationId2,
                 display: "flex",
                 gap: 8
             }
-        }, /*#__PURE__*/ React__default.createElement(Tooltip, {
+        }, /*#__PURE__*/ React__default.createElement(Tooltip$1, {
             title: "Copy IDs to Clipboard"
         }, /*#__PURE__*/ React__default.createElement(Button$1, {
             type: "text",
@@ -114475,7 +114154,7 @@ const EvaluationsCompareDrawer = ({ open, onClose, evaluationId1, evaluationId2,
             }),
             onClick: handleCopyIds,
             disabled: !evaluationId1 || !evaluationId2
-        })), /*#__PURE__*/ React__default.createElement(Tooltip, {
+        })), /*#__PURE__*/ React__default.createElement(Tooltip$1, {
             title: "Share"
         }, /*#__PURE__*/ React__default.createElement(Button$1, {
             type: "text",
@@ -114537,7 +114216,7 @@ const EvaluationDetailsDrawer = ({ evaluation, open, onClose, getEvaluatorResult
                 gap: 4,
                 justifyContent: "space-between"
             }
-        }, /*#__PURE__*/ React__default.createElement("span", null, normalizedEvaluation.name || "Evaluation Details"), normalizedEvaluation.completed_at && /*#__PURE__*/ React__default.createElement(Tooltip, {
+        }, /*#__PURE__*/ React__default.createElement("span", null, normalizedEvaluation.name || "Evaluation Details"), normalizedEvaluation.completed_at && /*#__PURE__*/ React__default.createElement(Tooltip$1, {
             title: formatDateFriendly(normalizedEvaluation.completed_at),
             getPopupContainer: ()=>document.body
         }, /*#__PURE__*/ React__default.createElement("span", {
@@ -114588,7 +114267,7 @@ const EvaluationDetailsDrawer = ({ evaluation, open, onClose, getEvaluatorResult
         style: {
             marginBottom: "24px"
         }
-    }, /*#__PURE__*/ React__default.createElement(Row$1, {
+    }, /*#__PURE__*/ React__default.createElement(Row, {
         gutter: [
             24,
             16
@@ -114728,7 +114407,7 @@ const EvaluationDetailsDrawer = ({ evaluation, open, onClose, getEvaluatorResult
                 key: metric.sha || `${metric.name}-${i}`,
                 style: tagStyle
             }, metric.name);
-            return metric.description ? /*#__PURE__*/ React__default.createElement(Tooltip, {
+            return metric.description ? /*#__PURE__*/ React__default.createElement(Tooltip$1, {
                 key: metric.sha || `${metric.name}-${i}`,
                 title: metric.description,
                 getPopupContainer: ()=>document.body
@@ -114990,7 +114669,7 @@ const EvaluationsTable = ({ evaluations, loading = false, error = null, onRefres
                 const bVal = b.completed_at ? moment(b.completed_at).unix() : 0;
                 return aVal - bVal;
             },
-            render: (completedAt)=>completedAt ? /*#__PURE__*/ React__default.createElement(Tooltip, {
+            render: (completedAt)=>completedAt ? /*#__PURE__*/ React__default.createElement(Tooltip$1, {
                     title: completedAt
                 }, /*#__PURE__*/ React__default.createElement("span", null, formatDateShort(completedAt))) : "-"
         },
@@ -117772,7 +117451,7 @@ const AggregateResultsTable = ({ rawResults = [], aggregateResults, agents, titl
                     fontSize: 16,
                     fontWeight: 600
                 }
-            }, resolvedTitle), /*#__PURE__*/ React__default.createElement(Tooltip, {
+            }, resolvedTitle), /*#__PURE__*/ React__default.createElement(Tooltip$1, {
                 title: llmExpandableKeys.length === 0 ? "No expandable rows" : undefined
             }, /*#__PURE__*/ React__default.createElement(Button$1, {
                 type: "text",
@@ -118202,7 +117881,7 @@ const AggregateResultsTable = ({ rawResults = [], aggregateResults, agents, titl
             fontSize: 16,
             fontWeight: 600
         }
-    }, resolvedTitle), /*#__PURE__*/ React__default.createElement(Tooltip, {
+    }, resolvedTitle), /*#__PURE__*/ React__default.createElement(Tooltip$1, {
         title: expandableKeys.length === 0 ? "No expandable rows" : undefined
     }, /*#__PURE__*/ React__default.createElement(Button$1, {
         type: "text",
@@ -118455,7 +118134,7 @@ const EvaluatorResult = ({ evaluation, evaluatorId, backHref, onAgentNodeClick }
             background: theme.colors.secondary,
             border: `1px solid ${theme.colors.border}`
         }
-    }, /*#__PURE__*/ React__default.createElement(Row$1, {
+    }, /*#__PURE__*/ React__default.createElement(Row, {
         gutter: [
             32,
             16
@@ -118494,7 +118173,7 @@ const EvaluatorResult = ({ evaluation, evaluatorId, backHref, onAgentNodeClick }
             fontWeight: 600,
             fontSize: 15
         }
-    }, completed_at ? /*#__PURE__*/ React__default.createElement(Tooltip, {
+    }, completed_at ? /*#__PURE__*/ React__default.createElement(Tooltip$1, {
         title: formatDateFriendly(completed_at)
     }, /*#__PURE__*/ React__default.createElement("span", null, formatDateRelative(completed_at))) : "-")), /*#__PURE__*/ React__default.createElement(Col, {
         xs: 24,
@@ -120544,4 +120223,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, evaluationsHaveSameMetrics, formatCurrency, formatDateFriendly, formatDateRelative, formatDateShort, formatDuration, formatLatency, formatMetricValue$1 as formatMetricValue, formatNumberWithCommas, formatToolCalls, getColor, getSafeColor, getSafeSpacing, getSafeThemeValue, getSpacing, getStatusColor, isEvaluationDto, 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, getSafeColor, getSafeSpacing, getSafeThemeValue, getSpacing, getStatusColor, isEvaluationDto, isPlainObject, lightTheme, safeStyled, safeThemeColor, safeThemeSpacing, safeThemeValue, toTitleCase, transformEvaluation, truncateText, useComponentTheme, useSafeTheme, useTheme$1 as useTheme, useThemeValue };