@railtownai/railtracks-visualizer 0.0.27 → 0.0.28

package/dist/cjs/index.js

@@ -14732,33 +14732,18 @@ function cn(...inputs) {
     return str.split(/[-_\s]+/).map((word)=>word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
 }
 /**
- * Formats a currency value
- * @param value - The value to format
- * @returns The formatted currency string
- */ function formatCurrency(value) {
+ * Formats a currency value (USD dollars)
+ * @param value - The dollar value to format
+ * @param precision - The number of decimal places to show. Defaults to 3.
+ * @returns The formatted dollar string (eg: $123.002)
+ */ function formatCurrency(value, precision = 3) {
     if (value === null || value === undefined) {
-        return "$0.00";
-    }
-    // For very small values (less than 0.01), show more decimal places
-    if (Math.abs(value) < 0.01 && value !== 0) {
-        const decimalPlaces = value.toString().split(".")[1]?.length || 0;
-        const maxFractionDigits = Math.max(3, Math.min(decimalPlaces, 2));
-        return new Intl.NumberFormat("en-US", {
-            style: "currency",
-            currency: "USD",
-            minimumFractionDigits: Math.min(3, maxFractionDigits),
-            maximumFractionDigits: maxFractionDigits
-        }).format(value);
-    }
-    // For values with more than 2 decimal places, show them
-    const decimalPlaces = value.toString().split(".")[1]?.length || 0;
-    const maxFractionDigits = Math.max(2, Math.min(decimalPlaces, 2));
-    return new Intl.NumberFormat("en-US", {
-        style: "currency",
-        currency: "USD",
-        minimumFractionDigits: 2,
-        maximumFractionDigits: maxFractionDigits
-    }).format(value);
+        return "$0.000";
+    }
+    // Format the dollar value with sp  ecified precision
+    const formatted = Math.abs(value).toFixed(precision);
+    const sign = value < 0 ? "-" : "";
+    return `${sign}$${formatted}`;
 }
 /**
  * Formats latency in a human-readable format
@@ -14771,7 +14756,7 @@ function cn(...inputs) {
         return `${latency.toFixed(1)}s`;
     } else {
         const minutes = Math.floor(latency / 60);
-        const seconds = Math.round(latency % 60 / 1000);
+        const seconds = Math.round(latency % 60);
         return `${minutes}m ${seconds}s`;
     }
 }
@@ -15489,614 +15474,250 @@ const AnthropicIcon = ({ width = "1.5rem", height = "1.5rem" })=>/*#__PURE__*/ R
         strokeWidth: "0.25"
     }));
 
-const DEFAULT_COUNTUP_DURATION = 1.2;
-// Helper function to get node icon
-const getNodeIcon$1 = (nodeType, modelProvider)=>{
-    if (nodeType === "tool") {
-        return "🔧";
-    }
-    if (nodeType === "coordinator") {
-        return "🎯";
-    }
-    if (nodeType === "agent") {
-        if (modelProvider === "OpenAI") {
-            return /*#__PURE__*/ React.createElement(OpenAIIcon, null);
-        }
-        if (modelProvider === "Anthropic") {
-            return /*#__PURE__*/ React.createElement(AnthropicIcon, null);
-        }
-        if (modelProvider === "Google" || modelProvider === "Vertex_AI") {
-            return /*#__PURE__*/ React.createElement(GoogleIcon, null);
-        }
-    }
-    return "🤖";
-};
-const NodeDetailsPopover = ({ isVisible, onClose, nodeData, triggerRef })=>{
-    const [position, setPosition] = React.useState({
-        top: 0,
-        left: 0,
-        arrowPosition: "right"
-    });
-    // Calculate popover position based on trigger element
-    React.useEffect(()=>{
-        if (isVisible && triggerRef.current) {
-            const rect = triggerRef.current.getBoundingClientRect();
-            const viewportWidth = window.innerWidth;
-            const viewportHeight = window.innerHeight;
-            const popoverWidth = 400; // Match the width from styled component
-            const popoverHeight = 600; // Approximate max height
-            const gap = 12; // Gap between node and popover
-            // Check if the rect is valid (has non-zero dimensions and is in viewport)
-            const isValidRect = rect.width > 0 && rect.height > 0 && rect.top >= 0 && rect.left >= 0;
-            if (isValidRect) {
-                // Normal positioning logic for ReactFlow
-                let left = rect.right + gap;
-                let top = rect.top;
-                let arrowPosition = "right"; // Arrow points right (popover is to the right)
-                // If popover would go off-screen, position it to the left of the node
-                if (left + popoverWidth > viewportWidth) {
-                    left = rect.left - popoverWidth - gap;
-                    arrowPosition = "left"; // Arrow points left (popover is to the left)
-                }
-                // Ensure popover doesn't go off the top or bottom of the viewport
-                if (top < 0) {
-                    top = 20; // Small margin from top
-                } else if (top + popoverHeight > viewportHeight) {
-                    top = viewportHeight - popoverHeight - 20; // Small margin from bottom
-                }
-                setPosition({
-                    top,
-                    left,
-                    arrowPosition
-                });
-            } else {
-                // Fallback positioning for isolated environments (like Storybook)
-                // Center the popover in the viewport
-                const centerLeft = Math.max(20, (viewportWidth - popoverWidth) / 2);
-                const centerTop = Math.max(20, (viewportHeight - popoverHeight) / 2);
-                setPosition({
-                    top: centerTop,
-                    left: centerLeft,
-                    arrowPosition: "none" // No arrow in fallback mode
-                });
-            }
+const ExpandableTextarea = ({ label, content, isExpanded, onToggle })=>{
+    const { theme } = useTheme();
+    const themeColors = theme?.colors || {
+        muted: "hsl(210 40% 96%)",
+        mutedForeground: "hsl(215.4 16.3% 46.9%)",
+        border: "hsl(214.3 31.8% 91.4%)",
+        foreground: "hsl(222.2 84% 4.9%)"
+    };
+    const displayContent = isExpanded ? content : content?.slice(0, 100) + (content?.length > 100 ? "..." : "");
+    return /*#__PURE__*/ React.createElement(ExpandableSection, null, /*#__PURE__*/ React.createElement(ExpandableHeader, {
+        onClick: (e)=>{
+            e.stopPropagation();
+            onToggle(e);
+        },
+        onMouseEnter: (e)=>{
+            e.currentTarget.style.backgroundColor = themeColors.muted;
+        },
+        onMouseLeave: (e)=>{
+            e.currentTarget.style.backgroundColor = "transparent";
         }
-    }, [
-        isVisible,
-        triggerRef
-    ]);
-    // Handle ESC key to close popover
-    React.useEffect(()=>{
-        const handleEscKey = (event)=>{
-            if (event.key === "Escape") {
-                onClose();
-            }
-        };
-        if (isVisible) {
-            document.addEventListener("keydown", handleEscKey);
-            return ()=>document.removeEventListener("keydown", handleEscKey);
+    }, /*#__PURE__*/ React.createElement(ExpandableLabel, null, label), /*#__PURE__*/ React.createElement(ChevronIcon, null, isExpanded ? /*#__PURE__*/ React.createElement(ChevronDown, {
+        style: {
+            width: "12px",
+            height: "12px",
+            color: themeColors.mutedForeground
         }
-    }, [
-        isVisible,
-        onClose
-    ]);
-    // Handle click outside to close popover
-    React.useEffect(()=>{
-        const handleClickOutside = (event)=>{
-            if (isVisible && triggerRef.current && !triggerRef.current.contains(event.target) && !event.target.closest("[data-popover-content]")) {
-                onClose();
-            }
-        };
-        if (isVisible) {
-            document.addEventListener("mousedown", handleClickOutside);
-            return ()=>document.removeEventListener("mousedown", handleClickOutside);
+    }) : /*#__PURE__*/ React.createElement(ChevronRight, {
+        style: {
+            width: "12px",
+            height: "12px",
+            color: themeColors.mutedForeground
         }
-    }, [
-        isVisible,
-        onClose,
-        triggerRef
-    ]);
-    if (!isVisible) return null;
-    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 popoverContent = /*#__PURE__*/ React.createElement(PopoverPortal, {
+    }))), /*#__PURE__*/ React.createElement(ExpandableTextareaElement, {
+        onClick: (e)=>{
+            e.stopPropagation();
+        },
+        value: displayContent || "",
+        readOnly: true,
+        rows: isExpanded ? Math.max(3, Math.max(content?.split("\n").length || 0, Math.ceil((content?.length || 0) / 60))) : 2,
         style: {
-            top: position.top,
-            left: position.left
+            border: `1px solid ${themeColors.border}`,
+            backgroundColor: themeColors.muted,
+            color: themeColors.foreground
         }
-    }, /*#__PURE__*/ React.createElement(PopoverContent, {
-        "data-popover-content": true,
-        $arrowPosition: position.arrowPosition
-    }, /*#__PURE__*/ React.createElement(PopoverHeader, null, /*#__PURE__*/ React.createElement(PopoverTitle, null, /*#__PURE__*/ React.createElement(NodeIcon$3, null, getNodeIcon$1(nodeData.nodeType || "Agent", llOverviewDetails?.model_provider)), /*#__PURE__*/ React.createElement("span", null, nodeData.label || "Agent Node")), /*#__PURE__*/ React.createElement(PopoverHeaderButtons, null, /*#__PURE__*/ React.createElement(CloseButton, {
-        onClick: onClose
-    }, /*#__PURE__*/ React.createElement(X, {
-        size: 16
-    })))), /*#__PURE__*/ React.createElement(PopoverBody, null, llOverviewDetails && /*#__PURE__*/ React.createElement(Section, null, /*#__PURE__*/ React.createElement(InfoGrid, null, /*#__PURE__*/ React.createElement(InfoItem, null, /*#__PURE__*/ React.createElement(InfoLabel, null, "Model"), /*#__PURE__*/ React.createElement(InfoValue, null, llOverviewDetails.model_name)), /*#__PURE__*/ React.createElement(InfoItem, null, /*#__PURE__*/ React.createElement(InfoLabel, null, "Provider"), /*#__PURE__*/ React.createElement(InfoValue, null, llOverviewDetails.model_provider)), /*#__PURE__*/ React.createElement(InfoItem, null, /*#__PURE__*/ React.createElement(InfoLabel, null, "Input Tokens"), /*#__PURE__*/ React.createElement(InfoValue, null, totalInputTokens ? /*#__PURE__*/ React.createElement(CountUp, {
-        end: totalInputTokens,
-        duration: DEFAULT_COUNTUP_DURATION,
-        separator: ",",
-        useEasing: true
-    }) : "N/A")), /*#__PURE__*/ React.createElement(InfoItem, null, /*#__PURE__*/ React.createElement(InfoLabel, null, "Output Tokens"), /*#__PURE__*/ React.createElement(InfoValue, null, totalOutputTokens ? /*#__PURE__*/ React.createElement(CountUp, {
-        end: totalOutputTokens,
-        duration: DEFAULT_COUNTUP_DURATION,
-        separator: ",",
-        useEasing: true
-    }) : "N/A")), /*#__PURE__*/ React.createElement(InfoItem, null, /*#__PURE__*/ React.createElement(InfoLabel, null, "Total Cost"), /*#__PURE__*/ React.createElement(InfoValue, null, "~", formatCurrency(totalCost))), llOverviewDetails.system_fingerprint && /*#__PURE__*/ React.createElement(InfoItem, null, /*#__PURE__*/ React.createElement(InfoLabel, null, "System Fingerprint"), /*#__PURE__*/ React.createElement(InfoValue, null, llOverviewDetails.system_fingerprint)), totalLatency > 0 && /*#__PURE__*/ React.createElement(InfoItem, null, /*#__PURE__*/ React.createElement(InfoLabel, null, "Total Latency"), /*#__PURE__*/ React.createElement(InfoValue, null, formatLatency(totalLatency))))), nodeData.details?.internals?.llm_details.length > 0 && /*#__PURE__*/ React.createElement(Section, null, /*#__PURE__*/ React.createElement("table", null, /*#__PURE__*/ React.createElement("thead", null, /*#__PURE__*/ React.createElement("tr", null, /*#__PURE__*/ React.createElement("th", null, "#"), /*#__PURE__*/ React.createElement("th", {
+    }));
+};
+// Styled components
+const ExpandableSection = styled.div`
+  width: 100%;
+`;
+const ExpandableHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.25rem 0;
+  cursor: pointer;
+  user-select: none;
+  border-radius: 0.25rem;
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+
+  &:hover {
+    background-color: transparent;
+  }
+`;
+const ExpandableLabel = styled.span`
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: ${(props)=>props.theme?.colors?.foreground || "hsl(222.2 84% 4.9%)"};
+`;
+const ExpandableTextareaElement = styled.textarea`
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: 0.25rem;
+  padding: 0.5rem;
+  resize: none;
+  min-height: 40px;
+  font-family: inherit;
+
+  &:focus {
+    outline: none;
+    border-color: ${(props)=>props.theme?.colors?.primary || "hsl(221.2 83.2% 53.3%)"};
+    box-shadow: 0 0 0 1px ${(props)=>props.theme?.colors?.primary || "hsl(221.2 83.2% 53.3%)"};
+  }
+
+  transition: all 0.2s ease-in-out;
+`;
+const ChevronIcon = styled.div`
+  transition: transform 0.2s ease-in-out;
+`;
+
+const CodeBlock = ({ content, language = "text", showHeader = false })=>{
+    const { theme } = useTheme();
+    const themeColors = theme?.colors || {
+        muted: "hsl(210 40% 96%)",
+        mutedForeground: "hsl(215.4 16.3% 46.9%)",
+        border: "hsl(214.3 31.8% 91.4%)",
+        foreground: "hsl(222.2 84% 4.9%)",
+        background: "hsl(0 0% 100%)"
+    };
+    return /*#__PURE__*/ React.createElement(CodeBlockContainer, {
         style: {
-            textAlign: "right"
+            width: "100%",
+            border: `1px solid ${themeColors.border}`,
+            backgroundColor: themeColors.muted,
+            color: themeColors.foreground
         }
-    }, "Input Tokens"), /*#__PURE__*/ React.createElement("th", {
+    }, showHeader && /*#__PURE__*/ React.createElement(CodeBlockHeader, {
         style: {
-            textAlign: "right"
+            borderBottom: `1px solid ${themeColors.border}`,
+            backgroundColor: themeColors.background
         }
-    }, "Output Tokens"), /*#__PURE__*/ React.createElement("th", {
+    }, /*#__PURE__*/ React.createElement(CodeBlockLanguage, {
         style: {
-            textAlign: "right"
+            color: themeColors.mutedForeground
         }
-    }, "Total Cost"), /*#__PURE__*/ React.createElement("th", {
+    }, language)), /*#__PURE__*/ React.createElement(CodeBlockContent, {
         style: {
-            textAlign: "right"
+            color: themeColors.foreground
         }
-    }, "Latency"))), /*#__PURE__*/ React.createElement("tbody", null, nodeData.details?.internals?.llm_details.map((details, index)=>/*#__PURE__*/ React.createElement("tr", null, /*#__PURE__*/ React.createElement("td", null, index + 1), /*#__PURE__*/ React.createElement("td", {
-            style: {
-                textAlign: "right"
-            }
-        }, details.input_tokens ? /*#__PURE__*/ React.createElement(CountUp, {
-            end: details.input_tokens,
-            duration: DEFAULT_COUNTUP_DURATION,
-            separator: ",",
-            useEasing: true
-        }) : "N/A"), /*#__PURE__*/ React.createElement("td", {
-            style: {
-                textAlign: "right"
-            }
-        }, details.output_tokens ? /*#__PURE__*/ React.createElement(CountUp, {
-            end: details.output_tokens,
-            duration: DEFAULT_COUNTUP_DURATION,
-            separator: ",",
-            useEasing: true
-        }) : "N/A"), /*#__PURE__*/ React.createElement("td", {
-            style: {
-                textAlign: "right"
-            }
-        }, details.total_cost ? formatCurrency(details.total_cost) : "N/A"), /*#__PURE__*/ React.createElement("td", {
-            style: {
-                textAlign: "right"
-            }
-        }, details.latency ? formatLatency(details.latency) : "N/A")))))))));
-    // Use React Portal to render outside of ReactFlow container
-    return /*#__PURE__*/ ReactDOM.createPortal(popoverContent, document.body);
+    }, content));
 };
-// Styled components
-const PopoverPortal = styled.div`
-  position: fixed;
-  z-index: 99999;
-  pointer-events: none;
-`;
-const PopoverContent = styled.div`
-  width: 400px;
-  max-height: 600px;
-  background-color: ${(props)=>props.theme?.colors?.background || "hsl(0 0% 100%)"};
-  border: 1px solid ${(props)=>props.theme?.colors?.border || "hsl(214.3 31.8% 91.4%)"};
-  border-radius: 0.5rem;
-  box-shadow:
-    0 10px 15px -3px rgba(0, 0, 0, 0.1),
-    0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  z-index: 99999;
-  pointer-events: auto;
-  animation: popoverSlideIn 200ms ease-out;
-
-  @keyframes popoverSlideIn {
-    from {
-      transform: translateX(-10px);
-      opacity: 0;
-    }
-    to {
-      transform: translateX(0);
-      opacity: 1;
-    }
-  }
-
-  /* Arrow pointing to the node - only show when not in fallback mode */
-  ${(props)=>props.$arrowPosition !== "none" && `
-    &::before {
-      content: "";
-      position: absolute;
-      top: 20px;
-      width: 0;
-      height: 0;
-      border-top: 6px solid transparent;
-      border-bottom: 6px solid transparent;
-      ${props.$arrowPosition === "right" ? `
-        left: -6px;
-        border-right: 6px solid ${props.theme?.colors?.border || "hsl(214.3 31.8% 91.4%)"};
-      ` : `
-        right: -6px;
-        border-left: 6px solid ${props.theme?.colors?.border || "hsl(214.3 31.8% 91.4%)"};
-      `}
-    }
-
-    &::after {
-      content: "";
-      position: absolute;
-      top: 20px;
-      width: 0;
-      height: 0;
-      border-top: 6px solid transparent;
-      border-bottom: 6px solid transparent;
-      ${props.$arrowPosition === "right" ? `
-        left: -5px;
-        border-right: 6px solid ${props.theme?.colors?.background || "hsl(0 0% 100%)"};
-      ` : `
-        right: -5px;
-        border-left: 6px solid ${props.theme?.colors?.background || "hsl(0 0% 100%)"};
-      `}
-    }
-  `}
-
-  @media (max-width: 768px) {
-    width: 300px;
-  }
-
-  table,
-  tr,
-  td,
-  th {
-    margin: 0;
-    padding: 0;
-    font-size: 0.875rem;
-    color: ${(props)=>props.theme?.colors?.foreground || "hsl(222.2 84% 4.9%)"};
-    text-align: left;
-  }
-  td {
-    padding: 0.5rem 0;
-  }
-  tr:hover {
-    background-color: ${(props)=>props.theme?.colors?.muted || "hsl(210 40% 96%)"};
-  }
-  th {
-    font-weight: 500;
-    border-bottom: 1px solid ${(props)=>props.theme?.colors?.border || "hsl(214.3 31.8% 91.4%)"};
-    padding-bottom: 0.5rem;
-  }
+const CodeBlockContainer = styled.div`
+  box-sizing: border-box;
+  border-radius: 0.375rem;
+  overflow: hidden;
+  font-family: monospace;
+  font-size: 0.75rem;
+  line-height: 1.4;
+  max-height: 150px;
+  overflow-y: auto;
 `;
-const PopoverHeader = styled.div`
+const CodeBlockHeader = styled.div`
+  padding: 0.5rem 0.75rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  flex-direction: row;
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid ${(props)=>props.theme?.colors?.border || "hsl(214.3 31.8% 91.4%)"};
-  background-color: ${(props)=>props.theme?.colors?.card || "hsl(0 0% 100%)"};
-  border-radius: 0.5rem 0.5rem 0 0;
 `;
-const PopoverTitle = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-weight: 600;
-  font-size: 0.875rem;
-  color: ${(props)=>props.theme?.colors?.foreground || "hsl(222.2 84% 4.9%)"};
+const CodeBlockLanguage = styled.span`
+  font-size: 0.625rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
 `;
-const PopoverHeaderButtons = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  justify-content: flex-start;
+const CodeBlockContent = styled.pre`
+  margin: 0;
+  padding: 0.75rem;
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-x: auto;
 `;
-const CloseButton = styled.button`
+
+// Styled Components
+const TreeNodeContainer = styled.div``;
+const TreeNodeRow = styled.div`
   display: flex;
   align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  border: none;
+  gap: 0.25rem;
+  padding: 0.25rem 0.5rem;
   border-radius: 0.25rem;
-  background-color: transparent;
-  color: ${(props)=>props.theme?.colors?.mutedForeground || "hsl(215.4 16.3% 46.9%)"};
-  cursor: pointer;
-  transition: all 0.2s ease-in-out;
+  cursor: ${(props)=>props.isExpandable ? "pointer" : "default"};
+  transition: background-color 0.15s ease-in-out;
 
   &:hover {
-    background-color: ${(props)=>props.theme?.colors?.muted || "hsl(210 40% 96%)"};
-    color: ${(props)=>props.theme?.colors?.foreground || "hsl(222.2 84% 4.9%)"};
-  }
-
-  &:focus {
-    outline: 2px solid ${(props)=>props.theme?.colors?.primary || "hsl(221.2 83.2% 53.3%)"};
-    outline-offset: 2px;
+    background-color: ${(props)=>props.isExpandable ? props.themeColors.muted : "transparent"};
   }
 `;
-const PopoverBody = styled.div`
-  max-height: 500px;
-  overflow-y: auto;
-  padding: 1rem;
+const IconContainer = styled.div`
+  width: 0.5rem;
+  height: 0.5rem;
+  flex-shrink: 0;
   display: flex;
-  flex-direction: column;
-  gap: 1rem;
+  align-items: center;
+  justify-content: center;
+  color: ${(props)=>props.themeColors.mutedForeground};
 `;
-const Section = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
+const Label$1 = styled.span`
+  font-weight: 500;
+  color: ${(props)=>props.themeColors.foreground};
+  font-size: 0.75rem;
 `;
-const InfoGrid = styled.div`
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 0.75rem;
+const Value$1 = styled.span`
+  font-size: 0.75rem;
+  color: ${(props)=>props.themeColors.primary};
 `;
-const InfoItem = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
+const EmptyIndicator = styled.span`
+  font-size: 0.75rem;
+  color: ${(props)=>props.themeColors.mutedForeground};
 `;
-const InfoLabel = styled.span`
+const ChildrenContainer = styled.div`
+  margin-left: 0.5rem;
+`;
+const TreeContainer = styled.div`
+  width: 100%;
+  box-sizing: border-box;
+  background-color: ${(props)=>props.themeColors.muted};
+  border-radius: 0.5rem;
+  border: 1px solid ${(props)=>props.themeColors.border};
+  overflow: hidden;
+`;
+const TreeScrollContainer = styled.div`
+  width: 100%;
+  max-height: 16rem;
+  overflow-y: auto;
+  padding: 0.5rem;
+`;
+const NoDataMessage = styled.div`
+  width: 100%;
+  padding: 1rem;
+  text-align: center;
+  color: ${(props)=>props.themeColors.mutedForeground};
+  font-size: 0.875rem;
+  background-color: ${(props)=>props.themeColors.muted};
+  border-radius: 0.5rem;
+  border: 1px solid ${(props)=>props.themeColors.border};
+`;
+const SimpleValueContainer = styled.div`
+  width: 100%;
+  padding: 0.5rem;
+  background-color: ${(props)=>props.themeColors.muted};
+  border-radius: 0.5rem;
+  border: 1px solid ${(props)=>props.themeColors.border};
+  font-size: 0.75rem;
+  color: ${(props)=>props.themeColors.foreground};
+  word-break: break-all;
+`;
+styled.div`
+  width: 100%;
+  padding: 1rem;
+  text-align: center;
+  color: ${(props)=>props.themeColors.mutedForeground};
   font-size: 0.875rem;
+  background-color: ${(props)=>props.themeColors.muted};
+  border-radius: 0.5rem;
+  border: 1px solid ${(props)=>props.themeColors.border};
+  margin-bottom: 0.5rem;
+`;
+const SimpleValueLabel = styled.span`
   font-weight: 500;
-  color: ${(props)=>props.theme?.colors?.mutedForeground || "hsl(215.4 16.3% 46.9%)"};
+  color: ${(props)=>props.themeColors.cardForeground};
+  font-size: 0.875rem;
 `;
-const InfoValue = styled.span`
-  font-size: 0.875rem;
-  color: ${(props)=>props.theme?.colors?.foreground || "hsl(222.2 84% 4.9%)"};
-  word-break: break-word;
-`;
-const NodeIcon$3 = 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 ExpandableTextarea = ({ label, content, isExpanded, onToggle })=>{
-    const { theme } = useTheme();
-    const themeColors = theme?.colors || {
-        muted: "hsl(210 40% 96%)",
-        mutedForeground: "hsl(215.4 16.3% 46.9%)",
-        border: "hsl(214.3 31.8% 91.4%)",
-        foreground: "hsl(222.2 84% 4.9%)"
-    };
-    const displayContent = isExpanded ? content : content?.slice(0, 100) + (content?.length > 100 ? "..." : "");
-    return /*#__PURE__*/ React.createElement(ExpandableSection, null, /*#__PURE__*/ React.createElement(ExpandableHeader, {
-        onClick: (e)=>{
-            e.stopPropagation();
-            onToggle(e);
-        },
-        onMouseEnter: (e)=>{
-            e.currentTarget.style.backgroundColor = themeColors.muted;
-        },
-        onMouseLeave: (e)=>{
-            e.currentTarget.style.backgroundColor = "transparent";
-        }
-    }, /*#__PURE__*/ React.createElement(ExpandableLabel, null, label), /*#__PURE__*/ React.createElement(ChevronIcon, null, isExpanded ? /*#__PURE__*/ React.createElement(ChevronDown, {
-        style: {
-            width: "12px",
-            height: "12px",
-            color: themeColors.mutedForeground
-        }
-    }) : /*#__PURE__*/ React.createElement(ChevronRight, {
-        style: {
-            width: "12px",
-            height: "12px",
-            color: themeColors.mutedForeground
-        }
-    }))), /*#__PURE__*/ React.createElement(ExpandableTextareaElement, {
-        onClick: (e)=>{
-            e.stopPropagation();
-        },
-        value: displayContent || "",
-        readOnly: true,
-        rows: isExpanded ? Math.max(3, Math.max(content?.split("\n").length || 0, Math.ceil((content?.length || 0) / 60))) : 2,
-        style: {
-            border: `1px solid ${themeColors.border}`,
-            backgroundColor: themeColors.muted,
-            color: themeColors.foreground
-        }
-    }));
-};
-// Styled components
-const ExpandableSection = styled.div`
-  width: 100%;
-`;
-const ExpandableHeader = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.25rem 0;
-  cursor: pointer;
-  user-select: none;
-  border-radius: 0.25rem;
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
-
-  &:hover {
-    background-color: transparent;
-  }
-`;
-const ExpandableLabel = styled.span`
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: ${(props)=>props.theme?.colors?.foreground || "hsl(222.2 84% 4.9%)"};
-`;
-const ExpandableTextareaElement = styled.textarea`
-  box-sizing: border-box;
-  width: 100%;
-  border-radius: 0.25rem;
-  padding: 0.5rem;
-  resize: none;
-  min-height: 40px;
-  font-family: inherit;
-
-  &:focus {
-    outline: none;
-    border-color: ${(props)=>props.theme?.colors?.primary || "hsl(221.2 83.2% 53.3%)"};
-    box-shadow: 0 0 0 1px ${(props)=>props.theme?.colors?.primary || "hsl(221.2 83.2% 53.3%)"};
-  }
-
-  transition: all 0.2s ease-in-out;
-`;
-const ChevronIcon = styled.div`
-  transition: transform 0.2s ease-in-out;
-`;
-
-const CodeBlock = ({ content, language = "text", showHeader = false })=>{
-    const { theme } = useTheme();
-    const themeColors = theme?.colors || {
-        muted: "hsl(210 40% 96%)",
-        mutedForeground: "hsl(215.4 16.3% 46.9%)",
-        border: "hsl(214.3 31.8% 91.4%)",
-        foreground: "hsl(222.2 84% 4.9%)",
-        background: "hsl(0 0% 100%)"
-    };
-    return /*#__PURE__*/ React.createElement(CodeBlockContainer, {
-        style: {
-            width: "100%",
-            border: `1px solid ${themeColors.border}`,
-            backgroundColor: themeColors.muted,
-            color: themeColors.foreground
-        }
-    }, showHeader && /*#__PURE__*/ React.createElement(CodeBlockHeader, {
-        style: {
-            borderBottom: `1px solid ${themeColors.border}`,
-            backgroundColor: themeColors.background
-        }
-    }, /*#__PURE__*/ React.createElement(CodeBlockLanguage, {
-        style: {
-            color: themeColors.mutedForeground
-        }
-    }, language)), /*#__PURE__*/ React.createElement(CodeBlockContent, {
-        style: {
-            color: themeColors.foreground
-        }
-    }, content));
-};
-const CodeBlockContainer = styled.div`
-  box-sizing: border-box;
-  border-radius: 0.375rem;
-  overflow: hidden;
-  font-family: monospace;
-  font-size: 0.75rem;
-  line-height: 1.4;
-  max-height: 150px;
-  overflow-y: auto;
-`;
-const CodeBlockHeader = styled.div`
-  padding: 0.5rem 0.75rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-`;
-const CodeBlockLanguage = styled.span`
-  font-size: 0.625rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-`;
-const CodeBlockContent = styled.pre`
-  margin: 0;
-  padding: 0.75rem;
-  white-space: pre-wrap;
-  word-break: break-word;
-  overflow-x: auto;
-`;
-
-// Styled Components
-const TreeNodeContainer = styled.div`
-  user-select: none;
-`;
-const TreeNodeRow = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.25rem;
-  cursor: ${(props)=>props.isExpandable ? "pointer" : "default"};
-  transition: background-color 0.15s ease-in-out;
-
-  &:hover {
-    background-color: ${(props)=>props.isExpandable ? props.themeColors.muted : "transparent"};
-  }
-`;
-const IconContainer = styled.div`
-  width: 0.5rem;
-  height: 0.5rem;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: ${(props)=>props.themeColors.mutedForeground};
-`;
-const Label$1 = styled.span`
-  font-weight: 500;
-  color: ${(props)=>props.themeColors.foreground};
-  font-size: 0.75rem;
-`;
-const Value$1 = styled.span`
-  font-size: 0.75rem;
-  color: ${(props)=>props.themeColors.primary};
-`;
-const EmptyIndicator = styled.span`
-  font-size: 0.75rem;
-  color: ${(props)=>props.themeColors.mutedForeground};
-`;
-const ChildrenContainer = styled.div`
-  margin-left: 0.5rem;
-`;
-const TreeContainer = styled.div`
-  width: 100%;
-  box-sizing: border-box;
-  background-color: ${(props)=>props.themeColors.muted};
-  border-radius: 0.5rem;
-  border: 1px solid ${(props)=>props.themeColors.border};
-  overflow: hidden;
-`;
-const TreeScrollContainer = styled.div`
-  width: 100%;
-  max-height: 16rem;
-  overflow-y: auto;
-  padding: 0.5rem;
-`;
-const NoDataMessage = styled.div`
-  width: 100%;
-  padding: 1rem;
-  text-align: center;
-  color: ${(props)=>props.themeColors.mutedForeground};
-  font-size: 0.875rem;
-  background-color: ${(props)=>props.themeColors.muted};
-  border-radius: 0.5rem;
-  border: 1px solid ${(props)=>props.themeColors.border};
-`;
-const SimpleValueContainer = styled.div`
-  width: 100%;
-  padding: 0.5rem;
-  background-color: ${(props)=>props.themeColors.muted};
-  border-radius: 0.5rem;
-  border: 1px solid ${(props)=>props.themeColors.border};
-  font-size: 0.75rem;
-  color: ${(props)=>props.themeColors.foreground};
-  word-break: break-all;
-`;
-styled.div`
-  width: 100%;
-  padding: 1rem;
-  text-align: center;
-  color: ${(props)=>props.themeColors.mutedForeground};
-  font-size: 0.875rem;
-  background-color: ${(props)=>props.themeColors.muted};
-  border-radius: 0.5rem;
-  border: 1px solid ${(props)=>props.themeColors.border};
-  margin-bottom: 0.5rem;
-`;
-const SimpleValueLabel = styled.span`
-  font-weight: 500;
-  color: ${(props)=>props.themeColors.cardForeground};
-  font-size: 0.875rem;
-`;
-const SimpleValueText = styled.span`
-  color: ${(props)=>props.themeColors.foreground};
+const SimpleValueText = styled.span`
+  color: ${(props)=>props.themeColors.foreground};
   font-size: 0.875rem;
 `;
 const EmptyStateContainer = styled.div`
@@ -16241,7 +15862,8 @@ const JsonTreeViewer = ({ data, maxDepth = 4, initialExpanded = false, expanded
     }
     return /*#__PURE__*/ React.createElement(TreeContainer, {
         themeColors: themeColors,
-        className: className
+        className: className,
+        onClick: (e)=>e.stopPropagation()
     }, /*#__PURE__*/ React.createElement(TreeScrollContainer, null, (()=>{
         const entries = sortObjectEntries(data, priorityKeys, excludeKeys);
         if (entries.length === 0) {
@@ -16635,97 +16257,671 @@ const InputArrayRenderer = ({ input })=>{
     };
     return /*#__PURE__*/ React.createElement(InputArrayContainer, null, /*#__PURE__*/ React.createElement(InputArrayHeader, null, /*#__PURE__*/ React.createElement("h3", null, "Input"), /*#__PURE__*/ React.createElement("span", {
         style: {
-            display: "flex",
-            alignItems: "center",
-            gap: "0.25rem"
+            display: "flex",
+            alignItems: "center",
+            gap: "0.25rem"
+        }
+    }, /*#__PURE__*/ React.createElement(MessageSquare, {
+        size: 12
+    }), input.length)), /*#__PURE__*/ React.createElement(InputArrayScrollableContent, null, input.map((item, index)=>/*#__PURE__*/ React.createElement(InputItem, {
+            key: index
+        }, /*#__PURE__*/ React.createElement(InputItemHeader, null, /*#__PURE__*/ React.createElement(InputItemLabel, null, getRoleEmoji(item.role), " ", getRoleDisplayName(item.role))), /*#__PURE__*/ React.createElement(InputItemTextarea, {
+            onClick: (e)=>{
+                e.stopPropagation();
+            },
+            value: renderContent(item.content) || "",
+            readOnly: true,
+            style: {
+                border: `1px solid ${themeColors.border}`,
+                backgroundColor: themeColors.muted,
+                color: themeColors.foreground
+            }
+        })))));
+};
+// Styled components
+const InputArrayContainer = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+`;
+const InputArrayScrollableContent = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 0.5rem;
+  gap: 0.5rem;
+  max-height: 200px;
+  overflow-y: auto;
+`;
+const InputArrayHeader = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-weight: 500;
+  font-size: 0.75rem;
+  color: ${(props)=>props.theme?.colors?.foreground || "hsl(222.2 84% 4.9%)"};
+
+  & h3 {
+    margin: 0;
+    padding: 0;
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: ${(props)=>props.theme?.colors?.foreground || "hsl(222.2 84% 4.9%)"};
+  }
+
+  & span {
+    font-size: 0.75rem;
+    font-weight: 500;
+    opacity: 0.5;
+    color: ${(props)=>props.theme?.colors?.foreground || "hsl(222.2 84% 4.9%)"};
+  }
+`;
+const InputItem = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+`;
+const InputItemHeader = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+`;
+const InputItemLabel = styled.span`
+  font-weight: 600;
+  font-size: 0.75rem;
+  color: ${(props)=>props.theme?.colors?.mutedForeground || "hsl(215.4 16.3% 46.9%)"};
+`;
+const InputItemTextarea = styled(index$1)`
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: 0.25rem;
+  padding: 0.5rem;
+  resize: none;
+  font-family: inherit;
+  font-size: 0.75rem;
+  &:focus {
+    outline: none;
+    border-color: ${(props)=>props.theme?.colors?.primary || "hsl(221.2 83.2% 53.3%)"};
+    box-shadow: 0 0 0 1px ${(props)=>props.theme?.colors?.primary || "hsl(221.2 83.2% 53.3%)"};
+  }
+
+  transition: all 0.2s ease-in-out;
+`;
+
+const DEFAULT_COUNTUP_DURATION = 0.6;
+// Helper component for animating currency values
+const CountUpCurrency = ({ value, prefix = "", suffix = "" })=>{
+    return /*#__PURE__*/ React.createElement(CountUp, {
+        end: value,
+        duration: DEFAULT_COUNTUP_DURATION,
+        separator: ",",
+        decimals: 2,
+        decimal: ".",
+        prefix: prefix,
+        useEasing: true,
+        suffix: suffix
+    });
+};
+// Helper component for animating latency values
+const CountUpLatency = ({ value })=>{
+    if (value < 1) {
+        // Show as milliseconds
+        return /*#__PURE__*/ React.createElement(CountUp, {
+            end: Math.round(value * 1000),
+            duration: DEFAULT_COUNTUP_DURATION,
+            separator: ",",
+            useEasing: true,
+            suffix: "ms"
+        });
+    } else if (value < 60) {
+        // Show as seconds with 1 decimal place
+        return /*#__PURE__*/ React.createElement(CountUp, {
+            end: value,
+            duration: DEFAULT_COUNTUP_DURATION,
+            decimals: 1,
+            useEasing: true,
+            suffix: "s"
+        });
+    } else {
+        // Show as minutes and seconds (animate just the total seconds for simplicity)
+        return /*#__PURE__*/ React.createElement(CountUp, {
+            end: value,
+            duration: DEFAULT_COUNTUP_DURATION,
+            decimals: 1,
+            useEasing: true,
+            suffix: "s"
+        });
+    }
+};
+// Helper function to get node icon
+const getNodeIcon$1 = (nodeType, modelProvider)=>{
+    nodeType = nodeType.toLowerCase();
+    if (nodeType === "tool") {
+        return "🔧";
+    }
+    if (nodeType === "coordinator") {
+        return "🎯";
+    }
+    if (nodeType === "agent") {
+        if (modelProvider === "OpenAI") {
+            return /*#__PURE__*/ React.createElement(OpenAIIcon, null);
+        }
+        if (modelProvider === "Anthropic") {
+            return /*#__PURE__*/ React.createElement(AnthropicIcon, null);
+        }
+        if (modelProvider === "Google" || modelProvider === "Vertex_AI") {
+            return /*#__PURE__*/ React.createElement(GoogleIcon, null);
+        }
+    }
+    return "🤖";
+};
+const NodeDetailsPopover = ({ isVisible, onClose, nodeData, triggerRef })=>{
+    const [position, setPosition] = React.useState({
+        top: 0,
+        left: 0,
+        arrowPosition: "right"
+    });
+    const [selectedRowIndex, setSelectedRowIndex] = React.useState(null);
+    const [selectedLlmDetails, setSelectedLlmDetails] = React.useState(null);
+    // Default to last row (total/aggregate) when popover opens (only on first open)
+    React.useEffect(()=>{
+        if (isVisible && nodeData.details?.internals?.llm_details && selectedRowIndex === null) {
+            const llmDetailsLength = nodeData.details.internals.llm_details.length;
+            setSelectedRowIndex(llmDetailsLength); // Last index + 1 for total row
+            setSelectedLlmDetails(nodeData.details.internals.llm_details[llmDetailsLength]);
+        }
+    }, [
+        isVisible,
+        nodeData.details?.internals?.llm_details,
+        selectedRowIndex
+    ]);
+    const handleShowModelDetails = (details, index)=>{
+        setSelectedRowIndex(index);
+        setSelectedLlmDetails(details);
+    };
+    const handleShowAggregateDetails = ()=>{
+        if (nodeData.details?.internals?.llm_details) {
+            setSelectedRowIndex(nodeData.details.internals.llm_details.length);
+            setSelectedLlmDetails(nodeData.details.internals.llm_details[nodeData.details.internals.llm_details.length]);
+        }
+    };
+    // Calculate popover position based on trigger element
+    React.useEffect(()=>{
+        if (isVisible && triggerRef.current) {
+            const rect = triggerRef.current.getBoundingClientRect();
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+            const popoverWidth = 400; // Match the width from styled component
+            const popoverHeight = 600; // Approximate max height
+            const gap = 12; // Gap between node and popover
+            // Check if the rect is valid (has non-zero dimensions and is in viewport)
+            const isValidRect = rect.width > 0 && rect.height > 0 && rect.top >= 0 && rect.left >= 0;
+            if (isValidRect) {
+                // Normal positioning logic for ReactFlow
+                let left = rect.right + gap;
+                let top = rect.top;
+                let arrowPosition = "right"; // Arrow points right (popover is to the right)
+                // If popover would go off-screen, position it to the left of the node
+                if (left + popoverWidth > viewportWidth) {
+                    left = rect.left - popoverWidth - gap;
+                    arrowPosition = "left"; // Arrow points left (popover is to the left)
+                }
+                // Ensure popover doesn't go off the top or bottom of the viewport
+                if (top < 0) {
+                    top = 20; // Small margin from top
+                } else if (top + popoverHeight > viewportHeight) {
+                    top = viewportHeight - popoverHeight - 20; // Small margin from bottom
+                }
+                setPosition({
+                    top,
+                    left,
+                    arrowPosition
+                });
+            } else {
+                // Fallback positioning for isolated environments (like Storybook)
+                // Center the popover in the viewport
+                const centerLeft = Math.max(20, (viewportWidth - popoverWidth) / 2);
+                const centerTop = Math.max(20, (viewportHeight - popoverHeight) / 2);
+                setPosition({
+                    top: centerTop,
+                    left: centerLeft,
+                    arrowPosition: "none" // No arrow in fallback mode
+                });
+            }
+        }
+    }, [
+        isVisible,
+        triggerRef
+    ]);
+    // Handle ESC key to close popover
+    React.useEffect(()=>{
+        const handleEscKey = (event)=>{
+            if (event.key === "Escape") {
+                onClose();
+            }
+        };
+        if (isVisible) {
+            document.addEventListener("keydown", handleEscKey);
+            return ()=>document.removeEventListener("keydown", handleEscKey);
+        }
+    }, [
+        isVisible,
+        onClose
+    ]);
+    React.useEffect(()=>{
+        // Reset selected llm details and row index when popover is closed and reopened
+        setSelectedLlmDetails(null);
+        setSelectedRowIndex(nodeData?.details?.internals?.llm_details?.length || null);
+    }, [
+        nodeData?.details?.internals?.llm_details?.length
+    ]);
+    // Handle click outside to close popover
+    React.useEffect(()=>{
+        const handleClickOutside = (event)=>{
+            if (isVisible && triggerRef.current && !triggerRef.current.contains(event.target) && !event.target.closest("[data-popover-content]")) {
+                onClose();
+            }
+        };
+        if (isVisible) {
+            document.addEventListener("mousedown", handleClickOutside);
+            return ()=>document.removeEventListener("mousedown", handleClickOutside);
+        }
+    }, [
+        isVisible,
+        onClose,
+        triggerRef
+    ]);
+    if (!isVisible) return null;
+    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 popoverContent = /*#__PURE__*/ React.createElement(PopoverPortal, {
+        style: {
+            top: position.top,
+            left: position.left
+        }
+    }, /*#__PURE__*/ React.createElement(PopoverContent, {
+        "data-popover-content": true,
+        $arrowPosition: position.arrowPosition
+    }, /*#__PURE__*/ React.createElement(PopoverHeader, null, /*#__PURE__*/ React.createElement(PopoverTitle, null, /*#__PURE__*/ React.createElement(NodeIcon$3, null, getNodeIcon$1(nodeData.nodeType || "Agent", llOverviewDetails?.model_provider)), /*#__PURE__*/ React.createElement("span", null, nodeData.label, " Details")), /*#__PURE__*/ React.createElement(PopoverHeaderButtons, null, /*#__PURE__*/ React.createElement(CloseButton, {
+        onClick: onClose
+    }, /*#__PURE__*/ React.createElement(X, {
+        size: 16
+    })))), /*#__PURE__*/ React.createElement(PopoverBody, null, llOverviewDetails && /*#__PURE__*/ React.createElement(Section, null, /*#__PURE__*/ React.createElement(InfoGrid, null, (()=>{
+        const llmDetails = nodeData.details?.internals?.llm_details || [];
+        const isAggregateSelected = selectedRowIndex === llmDetails.length;
+        const selectedDetails = isAggregateSelected ? null // Use aggregate values
+         : llmDetails[selectedRowIndex || 0];
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(InfoItem, null, /*#__PURE__*/ React.createElement(InfoLabel, null, "Model"), /*#__PURE__*/ React.createElement(InfoValue, null, isAggregateSelected ? llOverviewDetails.model_name : selectedDetails?.model_name || "N/A")), /*#__PURE__*/ React.createElement(InfoItem, null, /*#__PURE__*/ React.createElement(InfoLabel, null, "Provider"), /*#__PURE__*/ React.createElement(InfoValue, null, isAggregateSelected ? llOverviewDetails.model_provider : selectedDetails?.model_provider || "N/A")), /*#__PURE__*/ React.createElement(InfoItem, null, /*#__PURE__*/ React.createElement(InfoLabel, null, isAggregateSelected ? "Total" : "", " Latency"), /*#__PURE__*/ React.createElement(InfoValue, null, isAggregateSelected ? totalLatency ? /*#__PURE__*/ React.createElement(CountUpLatency, {
+            value: totalLatency
+        }) : "N/A" : selectedDetails?.latency ? /*#__PURE__*/ React.createElement(CountUpLatency, {
+            value: selectedDetails.latency
+        }) : "N/A")), /*#__PURE__*/ React.createElement(InfoItem, null, /*#__PURE__*/ React.createElement(InfoLabel, null, "Input Tokens"), /*#__PURE__*/ React.createElement(InfoValue, null, isAggregateSelected ? totalInputTokens ? /*#__PURE__*/ React.createElement(CountUp, {
+            end: totalInputTokens,
+            duration: DEFAULT_COUNTUP_DURATION,
+            separator: ",",
+            useEasing: true
+        }) : "N/A" : selectedDetails?.input_tokens ? /*#__PURE__*/ React.createElement(CountUp, {
+            end: selectedDetails.input_tokens,
+            duration: DEFAULT_COUNTUP_DURATION,
+            separator: ",",
+            useEasing: true
+        }) : "N/A")), /*#__PURE__*/ React.createElement(InfoItem, null, /*#__PURE__*/ React.createElement(InfoLabel, null, "Output Tokens"), /*#__PURE__*/ React.createElement(InfoValue, null, isAggregateSelected ? totalOutputTokens ? /*#__PURE__*/ React.createElement(CountUp, {
+            end: totalOutputTokens,
+            duration: DEFAULT_COUNTUP_DURATION,
+            separator: ",",
+            useEasing: true
+        }) : "N/A" : selectedDetails?.output_tokens ? /*#__PURE__*/ React.createElement(CountUp, {
+            end: selectedDetails.output_tokens,
+            duration: DEFAULT_COUNTUP_DURATION,
+            separator: ",",
+            useEasing: true
+        }) : "N/A")), /*#__PURE__*/ React.createElement(InfoItem, null, /*#__PURE__*/ React.createElement(InfoLabel, null, isAggregateSelected ? "Total" : "", " Cost"), /*#__PURE__*/ React.createElement(InfoValue, null, isAggregateSelected ? totalCost ? /*#__PURE__*/ React.createElement("span", null, "~", /*#__PURE__*/ React.createElement(CountUpCurrency, {
+            value: totalCost,
+            prefix: "$",
+            suffix: " USD"
+        })) : "N/A" : selectedDetails?.total_cost ? /*#__PURE__*/ React.createElement(CountUpCurrency, {
+            value: selectedDetails.total_cost,
+            prefix: "$",
+            suffix: " USD"
+        }) : "N/A")));
+    })())), nodeData.details?.internals?.llm_details.length > 1 && /*#__PURE__*/ React.createElement(Section, null, /*#__PURE__*/ React.createElement("table", null, /*#__PURE__*/ React.createElement("thead", null, /*#__PURE__*/ React.createElement("tr", null, /*#__PURE__*/ React.createElement("th", {
+        style: {
+            textAlign: "center"
+        }
+    }, "#"), /*#__PURE__*/ React.createElement("th", {
+        style: {
+            textAlign: "right"
+        }
+    }, "Input Tokens"), /*#__PURE__*/ React.createElement("th", {
+        style: {
+            textAlign: "right"
+        }
+    }, "Output Tokens"), /*#__PURE__*/ React.createElement("th", {
+        style: {
+            textAlign: "right"
+        }
+    }, "Total Cost"), /*#__PURE__*/ React.createElement("th", {
+        style: {
+            textAlign: "right"
+        }
+    }, "Latency"))), /*#__PURE__*/ React.createElement("tbody", null, nodeData.details?.internals?.llm_details.map((details, index)=>/*#__PURE__*/ React.createElement("tr", {
+            key: index,
+            onClick: ()=>handleShowModelDetails(details, index),
+            className: selectedRowIndex === index ? "selected-row" : ""
+        }, /*#__PURE__*/ React.createElement("td", {
+            style: {
+                textAlign: "center"
+            }
+        }, index + 1), /*#__PURE__*/ React.createElement("td", {
+            style: {
+                textAlign: "right"
+            }
+        }, details.input_tokens ? /*#__PURE__*/ React.createElement(CountUp, {
+            end: details.input_tokens,
+            duration: DEFAULT_COUNTUP_DURATION,
+            separator: ",",
+            useEasing: true
+        }) : "N/A"), /*#__PURE__*/ React.createElement("td", {
+            style: {
+                textAlign: "right"
+            }
+        }, details.output_tokens ? /*#__PURE__*/ React.createElement(CountUp, {
+            end: details.output_tokens,
+            duration: DEFAULT_COUNTUP_DURATION,
+            separator: ",",
+            useEasing: true
+        }) : "N/A"), /*#__PURE__*/ React.createElement("td", {
+            style: {
+                textAlign: "right"
+            }
+        }, details.total_cost ? /*#__PURE__*/ React.createElement(CountUpCurrency, {
+            value: details.total_cost,
+            prefix: "$"
+        }) : "N/A"), /*#__PURE__*/ React.createElement("td", {
+            style: {
+                textAlign: "right"
+            }
+        }, details.latency ? /*#__PURE__*/ React.createElement(CountUpLatency, {
+            value: details.latency
+        }) : "N/A"))), /*#__PURE__*/ React.createElement("tr", {
+        key: "total",
+        className: `total-row ${selectedRowIndex === nodeData.details?.internals?.llm_details.length ? "selected-row" : ""}`,
+        onClick: handleShowAggregateDetails
+    }, /*#__PURE__*/ React.createElement("td", {
+        style: {
+            textAlign: "right"
+        }
+    }, " "), /*#__PURE__*/ React.createElement("td", {
+        style: {
+            textAlign: "right"
+        }
+    }, totalInputTokens ? /*#__PURE__*/ React.createElement(CountUp, {
+        end: totalInputTokens,
+        duration: DEFAULT_COUNTUP_DURATION,
+        separator: ",",
+        useEasing: true
+    }) : "N/A"), /*#__PURE__*/ React.createElement("td", {
+        style: {
+            textAlign: "right"
+        }
+    }, totalOutputTokens ? /*#__PURE__*/ React.createElement(CountUp, {
+        end: totalOutputTokens,
+        duration: DEFAULT_COUNTUP_DURATION,
+        separator: ",",
+        useEasing: true
+    }) : "N/A"), /*#__PURE__*/ React.createElement("td", {
+        style: {
+            textAlign: "right"
+        }
+    }, totalCost ? /*#__PURE__*/ React.createElement(CountUpCurrency, {
+        value: totalCost,
+        prefix: "$"
+    }) : "N/A"), /*#__PURE__*/ React.createElement("td", {
+        style: {
+            textAlign: "right"
         }
-    }, /*#__PURE__*/ React.createElement(MessageSquare, {
-        size: 12
-    }), input.length)), /*#__PURE__*/ React.createElement(InputArrayScrollableContent, null, input.map((item, index)=>/*#__PURE__*/ React.createElement(InputItem, {
-            key: index
-        }, /*#__PURE__*/ React.createElement(InputItemHeader, null, /*#__PURE__*/ React.createElement(InputItemLabel, null, getRoleEmoji(item.role), " ", getRoleDisplayName(item.role))), /*#__PURE__*/ React.createElement(InputItemTextarea, {
-            onClick: (e)=>{
-                e.stopPropagation();
-            },
-            defaultValue: renderContent(item.content) || "",
-            readOnly: true,
-            style: {
-                border: `1px solid ${themeColors.border}`,
-                backgroundColor: themeColors.muted,
-                color: themeColors.foreground
-            }
-        })))));
+    }, totalLatency ? /*#__PURE__*/ React.createElement(CountUpLatency, {
+        value: totalLatency
+    }) : "N/A")))), selectedLlmDetails ? /*#__PURE__*/ React.createElement(FadingSection, null, /*#__PURE__*/ React.createElement(InputArrayRenderer, {
+        input: selectedLlmDetails.input || []
+    }), /*#__PURE__*/ React.createElement(OutputRenderer, {
+        data: selectedLlmDetails.output
+    })) : null))));
+    // Use React Portal to render outside of ReactFlow container
+    return /*#__PURE__*/ ReactDOM.createPortal(popoverContent, document.body);
 };
 // Styled components
-const InputArrayContainer = styled.div`
-  width: 100%;
+const PopoverPortal = styled.div`
+  position: fixed;
+  z-index: 99999;
+  pointer-events: none;
+`;
+const PopoverContent = styled.div`
+  width: 400px;
+  max-height: 600px;
+  background-color: ${(props)=>props.theme?.colors?.background || "hsl(0 0% 100%)"};
+  border: 1px solid ${(props)=>props.theme?.colors?.border || "hsl(214.3 31.8% 91.4%)"};
+  border-radius: 0.5rem;
+  box-shadow:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  z-index: 99999;
+  pointer-events: auto;
+  animation: popoverSlideIn 200ms ease-out;
+
+  @keyframes popoverSlideIn {
+    from {
+      transform: translateX(-10px);
+      opacity: 0;
+    }
+    to {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+
+  /* Arrow pointing to the node - only show when not in fallback mode */
+  ${(props)=>props.$arrowPosition !== "none" && `
+    &::before {
+      content: "";
+      position: absolute;
+      top: 20px;
+      width: 0;
+      height: 0;
+      border-top: 6px solid transparent;
+      border-bottom: 6px solid transparent;
+      ${props.$arrowPosition === "right" ? `
+        left: -6px;
+        border-right: 6px solid ${props.theme?.colors?.border || "hsl(214.3 31.8% 91.4%)"};
+      ` : `
+        right: -6px;
+        border-left: 6px solid ${props.theme?.colors?.border || "hsl(214.3 31.8% 91.4%)"};
+      `}
+    }
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: 20px;
+      width: 0;
+      height: 0;
+      border-top: 6px solid transparent;
+      border-bottom: 6px solid transparent;
+      ${props.$arrowPosition === "right" ? `
+        left: -5px;
+        border-right: 6px solid ${props.theme?.colors?.background || "hsl(0 0% 100%)"};
+      ` : `
+        right: -5px;
+        border-left: 6px solid ${props.theme?.colors?.background || "hsl(0 0% 100%)"};
+      `}
+    }
+  `}
+
+  @media (max-width: 768px) {
+    width: 300px;
+  }
+
+  table {
+    border-collapse: collapse;
+  }
+  table,
+  tr,
+  td,
+  th {
+    margin: 0;
+    padding: 0;
+    font-size: 0.875rem;
+    color: ${(props)=>props.theme?.colors?.foreground || "hsl(222.2 84% 4.9%)"};
+    text-align: left;
+  }
+  tr td {
+    padding: 0.5rem;
+    font-size: 0.75rem;
+  }
+  tbody tr {
+    transition: transform 0.1s ease-in-out;
+  }
+  tbody tr:hover {
+    cursor: pointer;
+    background-color: ${(props)=>props.theme?.colors?.muted || "hsl(210 40% 96%)"};
+  }
+  tbody tr:active {
+    transform: translateY(1px);
+  }
+  .total-row {
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid transparent;
+    font-weight: 500;
+  }
+  .selected-row {
+    background-color: ${(props)=>props.theme?.colors?.muted || "hsl(210 40% 96%)"};
+  }
+  .total-row.selected-row {
+    background-color: ${(props)=>props.theme?.colors?.muted || "hsl(210 40% 96%)"};
+  }
+  th {
+    font-weight: 500;
+    font-size: 0.75rem;
+    border-bottom: 1px solid ${(props)=>props.theme?.colors?.border || "hsl(214.3 31.8% 91.4%)"};
+    padding-bottom: 0.5rem;
+  }
+`;
+const PopoverHeader = styled.div`
   display: flex;
-  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: row;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid ${(props)=>props.theme?.colors?.border || "hsl(214.3 31.8% 91.4%)"};
+  background-color: ${(props)=>props.theme?.colors?.card || "hsl(0 0% 100%)"};
+  border-radius: 0.5rem 0.5rem 0 0;
+`;
+const PopoverTitle = styled.div`
+  display: flex;
+  align-items: center;
   gap: 0.5rem;
+  font-weight: 600;
+  font-size: 0.875rem;
+  color: ${(props)=>props.theme?.colors?.foreground || "hsl(222.2 84% 4.9%)"};
 `;
-const InputArrayScrollableContent = styled.div`
-  width: 100%;
+const PopoverHeaderButtons = styled.div`
   display: flex;
-  flex-direction: column;
-  padding-bottom: 0.5rem;
+  align-items: center;
   gap: 0.5rem;
-  max-height: 200px;
-  overflow-y: auto;
+  justify-content: flex-start;
 `;
-const InputArrayHeader = styled.div`
+const CloseButton = styled.button`
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  font-weight: 500;
-  font-size: 0.75rem;
-  color: ${(props)=>props.theme?.colors?.foreground || "hsl(222.2 84% 4.9%)"};
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border: none;
+  border-radius: 0.25rem;
+  background-color: transparent;
+  color: ${(props)=>props.theme?.colors?.mutedForeground || "hsl(215.4 16.3% 46.9%)"};
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
 
-  & h3 {
-    margin: 0;
-    padding: 0;
-    font-size: 0.75rem;
-    font-weight: 500;
+  &:hover {
+    background-color: ${(props)=>props.theme?.colors?.muted || "hsl(210 40% 96%)"};
     color: ${(props)=>props.theme?.colors?.foreground || "hsl(222.2 84% 4.9%)"};
   }
 
-  & span {
-    font-size: 0.75rem;
-    font-weight: 500;
-    opacity: 0.5;
-    color: ${(props)=>props.theme?.colors?.foreground || "hsl(222.2 84% 4.9%)"};
+  &:focus {
+    outline: 2px solid ${(props)=>props.theme?.colors?.primary || "hsl(221.2 83.2% 53.3%)"};
+    outline-offset: 2px;
   }
 `;
-const InputItem = styled.div`
-  width: 100%;
+const PopoverBody = styled.div`
+  max-height: 500px;
+  overflow-y: auto;
+  padding: 1rem;
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
+  gap: 1rem;
 `;
-const InputItemHeader = styled.div`
+const Section = styled.div`
   display: flex;
-  align-items: center;
+  flex-direction: column;
+  gap: 0.75rem;
+`;
+const FadingSection = styled(Section)`
+  animation:
+    expandHeight 300ms ease-out,
+    fadeInContent 200ms ease-in-out 200ms both;
+
+  @keyframes expandHeight {
+    from {
+      max-height: 0;
+      overflow: hidden;
+    }
+    to {
+      max-height: 500px; /* Adjust based on expected content height */
+      overflow: visible;
+    }
+  }
+
+  @keyframes fadeInContent {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+`;
+const InfoGrid = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 0.75rem;
+`;
+const InfoItem = styled.div`
+  display: flex;
+  flex-direction: column;
   gap: 0.25rem;
 `;
-const InputItemLabel = styled.span`
-  font-weight: 600;
+const InfoLabel = styled.span`
   font-size: 0.75rem;
+  font-weight: 500;
   color: ${(props)=>props.theme?.colors?.mutedForeground || "hsl(215.4 16.3% 46.9%)"};
 `;
-const InputItemTextarea = styled(index$1)`
-  box-sizing: border-box;
-  width: 100%;
-  border-radius: 0.25rem;
-  padding: 0.5rem;
-  resize: none;
-  font-family: inherit;
+const InfoValue = styled.span`
   font-size: 0.75rem;
-  &:focus {
-    outline: none;
-    border-color: ${(props)=>props.theme?.colors?.primary || "hsl(221.2 83.2% 53.3%)"};
-    box-shadow: 0 0 0 1px ${(props)=>props.theme?.colors?.primary || "hsl(221.2 83.2% 53.3%)"};
-  }
-
-  transition: all 0.2s ease-in-out;
+  color: ${(props)=>props.theme?.colors?.foreground || "hsl(222.2 84% 4.9%)"};
+  word-break: break-word;
+`;
+const NodeIcon$3 = 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%)"};
 `;
 
 // Helper function to get node icon
@@ -16784,10 +16980,12 @@ const AgentNode = ({ data, id, onInspect })=>{
         setIsPopoverOpen(false);
     };
     const nodeLabel = data.label || toTitleCase("Agent") || "Agent";
-    const modelProvider = data.details?.internals?.llm_details?.[0]?.model_provider;
+    const modelProvider = data.details?.internals?.llm_details?.[data.details?.internals?.llm_details?.length - 1]?.model_provider;
     const nodeIcon = getNodeIcon(modelProvider);
-    const modelName = data.details?.internals?.llm_details?.[0]?.model_name || "Unknown";
-    const totalCost = formatCurrency(sumTotalCost(data.details?.internals?.llm_details || []));
+    const modelName = data.details?.internals?.llm_details?.[data.details?.internals?.llm_details?.length - 1]?.model_name || "Unknown";
+    const totalCost = sumTotalCost(data.details?.internals?.llm_details || []);
+    const totalCostFormatted = formatCurrency(totalCost, 2);
+    const totalCostTooltip = `Total cost: ${formatCurrency(totalCost, 5)} USD`;
     const nodeDetails = getOverviewLlmDetails(data.details?.internals?.llm_details || []);
     const inputArray = nodeDetails?.input || [];
     const output = nodeDetails?.output || null;
@@ -16811,8 +17009,8 @@ const AgentNode = ({ data, id, onInspect })=>{
         title: modelName
     }, modelName), /*#__PURE__*/ React.createElement(Badge, {
         variant: "cost",
-        title: data.details?.internals?.llm_details?.[0]?.total_cost?.toString() || ""
-    }, totalCost))), /*#__PURE__*/ React.createElement(NodeContent$2, null, /*#__PURE__*/ React.createElement(InputArrayRenderer, {
+        title: totalCostTooltip
+    }, totalCostFormatted))), /*#__PURE__*/ React.createElement(NodeContent$2, null, /*#__PURE__*/ React.createElement(InputArrayRenderer, {
         input: inputArray
     }), output ? /*#__PURE__*/ React.createElement(OutputRenderer, {
         data: output
@@ -17015,15 +17213,25 @@ const ToolNode = ({ data, id, onInspect })=>{
     // 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 Tool nodes
-        console.log("Tool node clicked:", {
-            label: data.label,
-            nodeType: data.nodeType,
-            details: data.details
-        });
+        if (onInspect) {
+            onInspect(data);
+        }
     };
     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: {
+                args: data.edgeDetails[0]?.input_args,
+                kwargs: data.edgeDetails[0]?.input_kwargs
+            },
+            output: data.edgeDetails[0]?.output,
+            status: data.edgeDetails[0]?.status
+        };
+    }
     return /*#__PURE__*/ React.createElement(NodeContainer, {
         onClick: handleNodeClick
     }, hasIncomingEdges && /*#__PURE__*/ React.createElement(Handle$1, {
@@ -17039,25 +17247,13 @@ const ToolNode = ({ data, id, onInspect })=>{
         isConnectable: false
     }), /*#__PURE__*/ React.createElement(NodeHeader, null, /*#__PURE__*/ React.createElement(NodeIconContainer, null, /*#__PURE__*/ React.createElement(NodeIcon, null, "🔧"), /*#__PURE__*/ React.createElement(NodeLabel, null, nodeLabel)), latency != null && /*#__PURE__*/ React.createElement(BadgeContainer, null, /*#__PURE__*/ React.createElement(Badge, {
         variant: "latency"
-    }, formatLatency(latency)))), /*#__PURE__*/ React.createElement(NodeContent, null, /*#__PURE__*/ React.createElement(JsonTreeViewer, {
+    }, formatLatency(latency)))), nodeData && /*#__PURE__*/ React.createElement(NodeContent, {
+        className: "nodrag"
+    }, /*#__PURE__*/ React.createElement(JsonTreeViewer, {
         excludeKeys: [
             "latency"
         ],
-        data: (()=>{
-            const baseData = data.details?.internals || {};
-            if (data.edgeDetails && data.edgeDetails.length > 0) {
-                return {
-                    ...baseData,
-                    input: {
-                        args: data.edgeDetails[0]?.input_args,
-                        kwargs: data.edgeDetails[0]?.input_kwargs
-                    },
-                    output: data.edgeDetails[0]?.output,
-                    status: data.edgeDetails[0]?.status
-                };
-            }
-            return baseData;
-        })()
+        data: nodeData
     })), hasOutgoingEdges && /*#__PURE__*/ React.createElement(Handle$1, {
         type: "source",
         position: Position.Bottom,