@railtownai/railtracks-visualizer 0.0.67 → 0.0.69

package/dist/cjs/index.js

@@ -12939,7 +12939,7 @@ const createLucideIcon = (iconName, iconNode)=>{
     return Component;
 };
 
-const __iconNode$z = [
+const __iconNode$A = [
     [
         "path",
         {
@@ -12955,9 +12955,9 @@ const __iconNode$z = [
         }
     ]
 ];
-const ArrowLeft = createLucideIcon("arrow-left", __iconNode$z);
+const ArrowLeft = createLucideIcon("arrow-left", __iconNode$A);
 
-const __iconNode$y = [
+const __iconNode$z = [
     [
         "path",
         {
@@ -12973,9 +12973,9 @@ const __iconNode$y = [
         }
     ]
 ];
-const ArrowRight = createLucideIcon("arrow-right", __iconNode$y);
+const ArrowRight = createLucideIcon("arrow-right", __iconNode$z);
 
-const __iconNode$x = [
+const __iconNode$y = [
     [
         "path",
         {
@@ -13023,9 +13023,9 @@ const __iconNode$x = [
         }
     ]
 ];
-const Bot = createLucideIcon("bot", __iconNode$x);
+const Bot = createLucideIcon("bot", __iconNode$y);
 
-const __iconNode$w = [
+const __iconNode$x = [
     [
         "path",
         {
@@ -13059,9 +13059,9 @@ const __iconNode$w = [
         }
     ]
 ];
-const Calendar = createLucideIcon("calendar", __iconNode$w);
+const Calendar = createLucideIcon("calendar", __iconNode$x);
 
-const __iconNode$v = [
+const __iconNode$w = [
     [
         "path",
         {
@@ -13118,9 +13118,9 @@ const __iconNode$v = [
         }
     ]
 ];
-const ChartNetwork = createLucideIcon("chart-network", __iconNode$v);
+const ChartNetwork = createLucideIcon("chart-network", __iconNode$w);
 
-const __iconNode$u = [
+const __iconNode$v = [
     [
         "path",
         {
@@ -13129,9 +13129,9 @@ const __iconNode$u = [
         }
     ]
 ];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$u);
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$v);
 
-const __iconNode$t = [
+const __iconNode$u = [
     [
         "path",
         {
@@ -13140,9 +13140,9 @@ const __iconNode$t = [
         }
     ]
 ];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$t);
+const ChevronRight = createLucideIcon("chevron-right", __iconNode$u);
 
-const __iconNode$s = [
+const __iconNode$t = [
     [
         "path",
         {
@@ -13158,9 +13158,9 @@ const __iconNode$s = [
         }
     ]
 ];
-const ChevronsDown = createLucideIcon("chevrons-down", __iconNode$s);
+const ChevronsDown = createLucideIcon("chevrons-down", __iconNode$t);
 
-const __iconNode$r = [
+const __iconNode$s = [
     [
         "path",
         {
@@ -13176,9 +13176,9 @@ const __iconNode$r = [
         }
     ]
 ];
-const ChevronsUp = createLucideIcon("chevrons-up", __iconNode$r);
+const ChevronsUp = createLucideIcon("chevrons-up", __iconNode$s);
 
-const __iconNode$q = [
+const __iconNode$r = [
     [
         "circle",
         {
@@ -13209,9 +13209,9 @@ const __iconNode$q = [
         }
     ]
 ];
-const CircleAlert = createLucideIcon("circle-alert", __iconNode$q);
+const CircleAlert = createLucideIcon("circle-alert", __iconNode$r);
 
-const __iconNode$p = [
+const __iconNode$q = [
     [
         "path",
         {
@@ -13227,9 +13227,9 @@ const __iconNode$p = [
         }
     ]
 ];
-const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$p);
+const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$q);
 
-const __iconNode$o = [
+const __iconNode$p = [
     [
         "circle",
         {
@@ -13254,9 +13254,9 @@ const __iconNode$o = [
         }
     ]
 ];
-const CircleDollarSign = createLucideIcon("circle-dollar-sign", __iconNode$o);
+const CircleDollarSign = createLucideIcon("circle-dollar-sign", __iconNode$p);
 
-const __iconNode$n = [
+const __iconNode$o = [
     [
         "circle",
         {
@@ -13274,9 +13274,9 @@ const __iconNode$n = [
         }
     ]
 ];
-const Clock = createLucideIcon("clock", __iconNode$n);
+const Clock = createLucideIcon("clock", __iconNode$o);
 
-const __iconNode$m = [
+const __iconNode$n = [
     [
         "rect",
         {
@@ -13297,9 +13297,9 @@ const __iconNode$m = [
         }
     ]
 ];
-const Copy = createLucideIcon("copy", __iconNode$m);
+const Copy = createLucideIcon("copy", __iconNode$n);
 
-const __iconNode$l = [
+const __iconNode$m = [
     [
         "path",
         {
@@ -13407,9 +13407,9 @@ const __iconNode$l = [
         }
     ]
 ];
-const Cpu = createLucideIcon("cpu", __iconNode$l);
+const Cpu = createLucideIcon("cpu", __iconNode$m);
 
-const __iconNode$k = [
+const __iconNode$l = [
     [
         "line",
         {
@@ -13428,9 +13428,9 @@ const __iconNode$k = [
         }
     ]
 ];
-const DollarSign = createLucideIcon("dollar-sign", __iconNode$k);
+const DollarSign = createLucideIcon("dollar-sign", __iconNode$l);
 
-const __iconNode$j = [
+const __iconNode$k = [
     [
         "path",
         {
@@ -13460,9 +13460,9 @@ const __iconNode$j = [
         }
     ]
 ];
-const FileInput = createLucideIcon("file-input", __iconNode$j);
+const FileInput = createLucideIcon("file-input", __iconNode$k);
 
-const __iconNode$i = [
+const __iconNode$j = [
     [
         "path",
         {
@@ -13492,9 +13492,9 @@ const __iconNode$i = [
         }
     ]
 ];
-const FileOutput = createLucideIcon("file-output", __iconNode$i);
+const FileOutput = createLucideIcon("file-output", __iconNode$j);
 
-const __iconNode$h = [
+const __iconNode$i = [
     [
         "path",
         {
@@ -13552,9 +13552,9 @@ const __iconNode$h = [
         }
     ]
 ];
-const FoldVertical = createLucideIcon("fold-vertical", __iconNode$h);
+const FoldVertical = createLucideIcon("fold-vertical", __iconNode$i);
 
-const __iconNode$g = [
+const __iconNode$h = [
     [
         "line",
         {
@@ -13596,9 +13596,9 @@ const __iconNode$g = [
         }
     ]
 ];
-const Hash = createLucideIcon("hash", __iconNode$g);
+const Hash = createLucideIcon("hash", __iconNode$h);
 
-const __iconNode$f = [
+const __iconNode$g = [
     [
         "circle",
         {
@@ -13623,9 +13623,9 @@ const __iconNode$f = [
         }
     ]
 ];
-const Info = createLucideIcon("info", __iconNode$f);
+const Info = createLucideIcon("info", __iconNode$g);
 
-const __iconNode$e = [
+const __iconNode$f = [
     [
         "path",
         {
@@ -13662,9 +13662,9 @@ const __iconNode$e = [
         }
     ]
 ];
-const ListChecks = createLucideIcon("list-checks", __iconNode$e);
+const ListChecks = createLucideIcon("list-checks", __iconNode$f);
 
-const __iconNode$d = [
+const __iconNode$e = [
     [
         "path",
         {
@@ -13694,9 +13694,9 @@ const __iconNode$d = [
         }
     ]
 ];
-const MessageSquareText = createLucideIcon("message-square-text", __iconNode$d);
+const MessageSquareText = createLucideIcon("message-square-text", __iconNode$e);
 
-const __iconNode$c = [
+const __iconNode$d = [
     [
         "path",
         {
@@ -13712,9 +13712,9 @@ const __iconNode$c = [
         }
     ]
 ];
-const MessagesSquare = createLucideIcon("messages-square", __iconNode$c);
+const MessagesSquare = createLucideIcon("messages-square", __iconNode$d);
 
-const __iconNode$b = [
+const __iconNode$c = [
     [
         "rect",
         {
@@ -13734,7 +13734,36 @@ const __iconNode$b = [
         }
     ]
 ];
-const PanelLeft = createLucideIcon("panel-left", __iconNode$b);
+const PanelLeft = createLucideIcon("panel-left", __iconNode$c);
+
+const __iconNode$b = [
+    [
+        "rect",
+        {
+            width: "18",
+            height: "18",
+            x: "3",
+            y: "3",
+            rx: "2",
+            key: "afitv7"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "M15 3v18",
+            key: "14nvp0"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "m10 15-3-3 3-3",
+            key: "1pgupc"
+        }
+    ]
+];
+const PanelRightOpen = createLucideIcon("panel-right-open", __iconNode$b);
 
 const __iconNode$a = [
     [
@@ -16050,6 +16079,137 @@ const lightTheme = {
         slow: "0.3s ease-in-out"
     }
 };
+/** Light “Liquid Glass”–inspired palette (web approximation). */ const liquidGlassLightTheme = {
+    colors: {
+        background: "hsl(210 35% 92%)",
+        foreground: "hsl(222 47% 11%)",
+        card: "hsla(0 0% 100% / 0.88)",
+        cardForeground: "hsl(222 47% 11%)",
+        popover: "hsla(0 0% 100% / 0.94)",
+        popoverForeground: "hsl(222 47% 11%)",
+        primary: "hsl(211 92% 45%)",
+        primaryForeground: "hsl(210 40% 98%)",
+        secondary: "hsla(210 40% 98% / 0.45)",
+        secondaryForeground: "hsl(222 47% 18%)",
+        muted: "hsla(210 25% 98% / 0.35)",
+        mutedForeground: "hsl(215 16% 40%)",
+        accent: "hsla(210 60% 96% / 0.55)",
+        accentForeground: "hsl(222 47% 18%)",
+        destructive: "hsl(0 72% 51%)",
+        destructiveForeground: "hsl(210 40% 98%)",
+        success: "hsl(142.1 76.2% 32%)",
+        successForeground: "hsl(210 40% 98%)",
+        border: "hsla(210 28% 72% / 0.55)",
+        mutedBorder: "hsla(210 22% 80% / 0.45)",
+        input: "hsla(210 28% 88% / 0.65)",
+        ring: "hsl(211 92% 45%)",
+        tagTooluse: {
+            bg: "hsla(199 89% 48% / 0.14)",
+            border: "hsla(199 89% 48% / 0.35)",
+            color: "hsl(200 98% 32%)"
+        },
+        tagLlminference: {
+            bg: "hsla(271 91% 56% / 0.12)",
+            border: "hsla(271 91% 56% / 0.35)",
+            color: "hsl(271 81% 38%)"
+        },
+        tagJudge: {
+            bg: "hsla(0 84% 60% / 0.12)",
+            border: "hsla(0 84% 55% / 0.35)",
+            color: "hsl(0 72% 40%)"
+        },
+        tagToolLevel1: {
+            bg: "hsla(142 70% 42% / 0.15)",
+            color: "hsl(142 71% 28%)"
+        },
+        tagToolLevel2: {
+            bg: "hsla(217 91% 52% / 0.12)",
+            color: "hsl(217 91% 38%)"
+        },
+        tagToolLevel3: {
+            bg: "hsla(271 91% 56% / 0.12)",
+            color: "hsl(271 81% 38%)"
+        }
+    },
+    spacing: lightTheme.spacing,
+    borderRadius: {
+        sm: "calc(var(--radius) - 4px)",
+        md: "calc(var(--radius) - 2px)",
+        lg: "var(--radius)",
+        xl: "1rem"
+    },
+    fontSize: lightTheme.fontSize,
+    fontWeight: lightTheme.fontWeight,
+    shadows: {
+        sm: "0 1px 2px hsla(210 22% 25% / 0.06)",
+        md: "0 8px 24px hsla(210 28% 18% / 0.08)",
+        lg: "0 18px 48px hsla(210 28% 15% / 0.1)"
+    },
+    transitions: lightTheme.transitions
+};
+/** Dark “Liquid Glass”–inspired palette — translucent panels on a deep mesh-like base. */ const liquidGlassDarkTheme = {
+    colors: {
+        background: "hsl(222 28% 9%)",
+        foreground: "hsl(210 36% 96%)",
+        card: "hsla(222 22% 14% / 0.88)",
+        cardForeground: "hsl(210 36% 96%)",
+        popover: "hsla(222 24% 12% / 0.94)",
+        popoverForeground: "hsl(210 36% 96%)",
+        primary: "hsl(212 92% 62%)",
+        primaryForeground: "hsl(222 47% 8%)",
+        secondary: "hsla(217 28% 22% / 0.55)",
+        secondaryForeground: "hsl(210 36% 94%)",
+        muted: "hsla(217 22% 18% / 0.45)",
+        mutedForeground: "hsl(215 18% 72%)",
+        accent: "hsla(217 26% 22% / 0.55)",
+        accentForeground: "hsl(210 36% 96%)",
+        destructive: "hsl(0 72% 58%)",
+        destructiveForeground: "hsl(210 40% 98%)",
+        success: "hsl(142 76% 45%)",
+        successForeground: "hsl(222 47% 8%)",
+        border: "hsla(215 22% 42% / 0.45)",
+        mutedBorder: "hsla(222 18% 28% / 0.5)",
+        input: "hsla(217 22% 22% / 0.65)",
+        ring: "hsl(212 92% 62%)",
+        tagTooluse: {
+            bg: "hsla(217 91% 55% / 0.18)",
+            border: "hsla(217 91% 45% / 0.35)",
+            color: "hsl(199 89% 72%)"
+        },
+        tagLlminference: {
+            bg: "hsla(271 91% 58% / 0.15)",
+            border: "hsla(271 91% 48% / 0.35)",
+            color: "hsl(271 91% 78%)"
+        },
+        tagJudge: {
+            bg: "hsla(0 72% 48% / 0.18)",
+            border: "hsla(0 72% 42% / 0.35)",
+            color: "hsl(0 84% 72%)"
+        },
+        tagToolLevel1: {
+            bg: "hsla(142 70% 42% / 0.22)",
+            color: "hsl(142 70% 72%)"
+        },
+        tagToolLevel2: {
+            bg: "hsla(217 91% 52% / 0.2)",
+            color: "hsl(217 91% 76%)"
+        },
+        tagToolLevel3: {
+            bg: "hsla(271 91% 56% / 0.2)",
+            color: "hsl(271 91% 76%)"
+        }
+    },
+    spacing: lightTheme.spacing,
+    borderRadius: liquidGlassLightTheme.borderRadius,
+    fontSize: lightTheme.fontSize,
+    fontWeight: lightTheme.fontWeight,
+    shadows: {
+        sm: "0 1px 2px hsla(0 0% 0% / 0.35)",
+        md: "0 10px 28px hsla(0 0% 0% / 0.35)",
+        lg: "0 22px 52px hsla(0 0% 0% / 0.45)"
+    },
+    transitions: lightTheme.transitions
+};
 const darkTheme = {
     colors: {
         background: "hsl(222.2 84% 4.9%)",
@@ -16111,81 +16271,124 @@ const darkTheme = {
 };
 const defaultTheme$1 = lightTheme;
 
+function normalizeStoredTheme(raw) {
+    if (raw === "dark") return "dark";
+    if (raw === "liquidGlassDark") return "liquidGlassDark";
+    if (raw === "liquidGlassLight") return "liquidGlassLight";
+    /* Migrate legacy single “Liquid Glass” preset */ if (raw === "liquidGlass") return "liquidGlassLight";
+    return "light";
+}
+function themeForMode(mode) {
+    switch(mode){
+        case "dark":
+            return darkTheme;
+        case "liquidGlassLight":
+            return liquidGlassLightTheme;
+        case "liquidGlassDark":
+            return liquidGlassDarkTheme;
+        default:
+            return lightTheme;
+    }
+}
+function themeToMode(theme) {
+    if (theme === darkTheme) return "dark";
+    if (theme === liquidGlassDarkTheme) return "liquidGlassDark";
+    if (theme === liquidGlassLightTheme) return "liquidGlassLight";
+    return "light";
+}
 const ThemeContext = /*#__PURE__*/ React.createContext(undefined);
 const ThemeProvider = ({ children, theme: propTheme })=>{
-    const [currentTheme, setCurrentTheme] = React.useState(()=>{
-        // If a theme prop is provided, use it immediately
+    const [themeMode, setThemeModeState] = React.useState(()=>{
         if (propTheme) {
-            return propTheme;
+            return themeToMode(propTheme);
         }
-        // Only check localStorage if no theme prop is provided
-        // Handle cases where localStorage might not be available (e.g., test environments)
         try {
-            const savedTheme = localStorage.getItem("theme");
-            if (savedTheme === "dark") {
-                return darkTheme;
-            }
-        } catch (e) {
-        // localStorage not available, fall back to light theme
-        // This can happen in test environments or when localStorage is disabled
-        }
-        return lightTheme;
+            return normalizeStoredTheme(localStorage.getItem("theme"));
+        } catch  {
+        /* localStorage unavailable */ }
+        return "light";
     });
-    // Update theme when propTheme changes
+    const currentTheme = React.useMemo(()=>themeForMode(themeMode), [
+        themeMode
+    ]);
     React.useEffect(()=>{
         if (propTheme) {
-            setCurrentTheme(propTheme);
+            setThemeModeState(themeToMode(propTheme));
         }
     }, [
         propTheme
     ]);
-    // Sync html.dark class for GlobalStyles and other CSS that uses html.dark
     React.useEffect(()=>{
-        const isDark = currentTheme === darkTheme;
         try {
-            if (isDark) {
-                document.documentElement.classList.add("dark");
-            } else {
-                document.documentElement.classList.remove("dark");
-            }
-        } catch (e) {
-        // document might not be available (e.g. SSR)
-        }
+            const isClassicDark = themeMode === "dark";
+            const isGlassLight = themeMode === "liquidGlassLight";
+            const isGlassDark = themeMode === "liquidGlassDark";
+            document.documentElement.classList.toggle("dark", isClassicDark);
+            document.documentElement.classList.toggle("liquid-glass-light", isGlassLight);
+            document.documentElement.classList.toggle("liquid-glass-dark", isGlassDark);
+            /* Remove legacy class if present */ document.documentElement.classList.remove("liquid-glass");
+            document.documentElement.dataset.theme = isClassicDark ? "dark" : isGlassLight ? "liquid-glass-light" : isGlassDark ? "liquid-glass-dark" : "light";
+        } catch  {
+        /* document unavailable */ }
+    }, [
+        themeMode
+    ]);
+    React.useEffect(()=>{
+        if (propTheme) return;
+        try {
+            localStorage.setItem("theme", themeMode);
+        } catch  {
+        /* ignore */ }
     }, [
-        currentTheme
+        themeMode,
+        propTheme
     ]);
-    // Only listen for storage events if no theme prop is provided
     React.useEffect(()=>{
         if (propTheme) {
-            // If a theme prop is provided, don't listen for localStorage changes
             return;
         }
         const handleStorageChange = ()=>{
             try {
-                const savedTheme = localStorage.getItem("theme");
-                if (savedTheme === "dark") {
-                    setCurrentTheme(darkTheme);
-                } else {
-                    setCurrentTheme(lightTheme);
-                }
-            } catch (e) {
-            // localStorage not available, ignore storage changes
-            }
+                setThemeModeState(normalizeStoredTheme(localStorage.getItem("theme")));
+            } catch  {
+            /* ignore */ }
         };
-        // Listen for storage events (when localStorage changes in other tabs)
         window.addEventListener("storage", handleStorageChange);
-        return ()=>{
-            window.removeEventListener("storage", handleStorageChange);
-        };
+        return ()=>window.removeEventListener("storage", handleStorageChange);
     }, [
         propTheme
     ]);
+    const setThemeMode = React.useCallback((mode)=>{
+        setThemeModeState(mode);
+    }, []);
+    const setTheme = React.useCallback((next)=>{
+        setThemeModeState(themeToMode(next));
+    }, []);
+    const isLiquidGlassLight = themeMode === "liquidGlassLight";
+    const isLiquidGlassDark = themeMode === "liquidGlassDark";
+    const isLiquidGlass = isLiquidGlassLight || isLiquidGlassDark;
+    const isClassicDarkTheme = themeMode === "dark";
+    const isDarkMode = isClassicDarkTheme || isLiquidGlassDark;
     const value = React.useMemo(()=>({
             theme: currentTheme,
-            setTheme: setCurrentTheme,
-            isDarkMode: currentTheme === darkTheme
+            themeMode,
+            setTheme,
+            setThemeMode,
+            isDarkMode,
+            isClassicDarkTheme,
+            isLiquidGlass,
+            isLiquidGlassLight,
+            isLiquidGlassDark
         }), [
-        currentTheme
+        currentTheme,
+        themeMode,
+        setTheme,
+        setThemeMode,
+        isDarkMode,
+        isClassicDarkTheme,
+        isLiquidGlass,
+        isLiquidGlassLight,
+        isLiquidGlassDark
     ]);
     return /*#__PURE__*/ React.createElement(ThemeContext.Provider, {
         value: value
@@ -16196,14 +16399,20 @@ const ThemeProvider = ({ children, theme: propTheme })=>{
 const useTheme$1 = ()=>{
     const context = React.useContext(ThemeContext);
     if (context === undefined) {
-        // Return a graceful fallback instead of throwing an error
         return {
             theme: lightTheme,
+            themeMode: "light",
             setTheme: ()=>{
-                // No-op function when context is not available
                 console.warn("Theme context not available. setTheme called but ignored.");
             },
-            isDarkMode: false // Default to light mode when no context
+            setThemeMode: ()=>{
+                console.warn("Theme context not available. setThemeMode called but ignored.");
+            },
+            isDarkMode: false,
+            isClassicDarkTheme: false,
+            isLiquidGlass: false,
+            isLiquidGlassLight: false,
+            isLiquidGlassDark: false
         };
     }
     return context;
@@ -16212,7 +16421,6 @@ const useThemeValue = ()=>{
     const { theme } = useTheme$1();
     return theme;
 };
-// Helper hook for components that can accept a theme prop
 const useComponentTheme = (themeProp)=>{
     const { theme: contextTheme } = useTheme$1();
     return themeProp || contextTheme;
@@ -48618,7 +48826,7 @@ const CountUpLatency = ({ value })=>{
     };
 }
 const NodeDetailsDrawer = ({ isVisible, onClose, nodeData })=>{
-    const { theme } = useTheme$1();
+    const { theme, isLiquidGlass } = useTheme$1();
     const [selectedRowIndex, setSelectedRowIndex] = React.useState(null);
     const [selectedLlmDetails, setSelectedLlmDetails] = React.useState(null);
     // Default to last row (total/aggregate) when drawer opens (only on first open)
@@ -48692,11 +48900,11 @@ const NodeDetailsDrawer = ({ isVisible, onClose, nodeData })=>{
         "data-testid": "node-details-drawer",
         styles: {
             body: {
-                background: theme.colors.background,
+                background: isLiquidGlass ? theme.colors.popover : theme.colors.background,
                 color: theme.colors.foreground
             },
             header: {
-                background: theme.colors.card,
+                background: isLiquidGlass ? theme.colors.popover : theme.colors.card,
                 borderBottom: `1px solid ${theme.colors.border}`
             }
         }
@@ -52057,8 +52265,7 @@ const SheetOverlay = /*#__PURE__*/ React__namespace.forwardRef(({ className, ...
             bottom: 0,
             left: 0,
             zIndex: 50,
-            backgroundColor: "hsla(var(--background), 0.8)",
-            backdropFilter: "blur(4px)"
+            backgroundColor: "rgba(0, 0, 0, 0.45)"
         },
         className: className,
         ...props,
@@ -52070,7 +52277,7 @@ const getSheetStyles = (side = "right")=>{
         position: "fixed",
         zIndex: 50,
         gap: "16px",
-        backgroundColor: "hsl(var(--background))",
+        backgroundColor: "var(--background)",
         padding: "24px",
         boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
         transition: "all 0.3s ease-in-out"
@@ -52082,7 +52289,7 @@ const getSheetStyles = (side = "right")=>{
                 left: 0,
                 right: 0,
                 top: 0,
-                borderBottom: "1px solid hsl(var(--border))"
+                borderBottom: "1px solid var(--border)"
             };
         case "bottom":
             return {
@@ -52090,7 +52297,7 @@ const getSheetStyles = (side = "right")=>{
                 left: 0,
                 right: 0,
                 bottom: 0,
-                borderTop: "1px solid hsl(var(--border))"
+                borderTop: "1px solid var(--border)"
             };
         case "left":
             return {
@@ -52100,7 +52307,7 @@ const getSheetStyles = (side = "right")=>{
                 left: 0,
                 height: "100%",
                 width: "75%",
-                borderRight: "1px solid hsl(var(--border))",
+                borderRight: "1px solid var(--border)",
                 maxWidth: "384px"
             };
         case "right":
@@ -52112,7 +52319,7 @@ const getSheetStyles = (side = "right")=>{
                 right: 0,
                 height: "100%",
                 width: "75%",
-                borderLeft: "1px solid hsl(var(--border))",
+                borderLeft: "1px solid var(--border)",
                 maxWidth: "384px"
             };
     }
@@ -52173,7 +52380,7 @@ const SheetTitle = /*#__PURE__*/ React__namespace.forwardRef(({ className, ...pr
         style: {
             fontSize: "18px",
             fontWeight: 600,
-            color: "hsl(var(--foreground))"
+            color: "var(--foreground)"
         },
         className: className,
         ...props
@@ -52183,7 +52390,7 @@ const SheetDescription = /*#__PURE__*/ React__namespace.forwardRef(({ className,
         ref: ref,
         style: {
             fontSize: "14px",
-            color: "hsl(var(--muted-foreground))"
+            color: "var(--muted-foreground)"
         },
         className: className,
         ...props
@@ -116350,7 +116557,18 @@ const useEvaluationsMock = ()=>{
     return React.useContext(EvaluationsMockContext);
 };
 
-const API_BASE = "/api";
+/**
+ * Railtracks HTTP API prefix. Same-origin `/api` by default (browser + viz proxy).
+ * Set `VITE_API_ORIGIN` (e.g. `http://localhost:3030`) when the UI is served elsewhere (Electron, etc.).
+ */ function resolveApiBase() {
+    const origin = undefined.VITE_API_ORIGIN?.trim().replace(/\/$/, "") ?? "";
+    if (!origin) {
+        return "/api";
+    }
+    return `${origin}/api`;
+}
+const API_BASE = resolveApiBase();
+
 const useEvaluations = ()=>{
     const mockContext = useEvaluationsMock();
     const [evaluations, setEvaluations] = React.useState([]);
@@ -116964,13 +117182,70 @@ function metricNameOf(agg) {
     });
 }
 
-const SHORT_ID_LENGTH = 8;
-const shortenId = (id)=>id.length > SHORT_ID_LENGTH ? id.slice(0, SHORT_ID_LENGTH) : id;
-const NodeRow = ({ node, metricName, onAgentNodeClick })=>{
+const NodeActions = ({ sessionId, nodeId, onAgentNodeClick, onOpenVisualizer })=>{
+    const { theme } = useTheme$1();
+    const baseStyle = {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 5,
+        padding: "3px 9px",
+        borderRadius: 6,
+        fontSize: 12,
+        fontWeight: 500,
+        cursor: "pointer",
+        background: "transparent",
+        color: theme.colors.primary,
+        border: `1px solid ${theme.colors.primary}`,
+        whiteSpace: "nowrap",
+        lineHeight: 1.4
+    };
+    if (!onAgentNodeClick && !onOpenVisualizer) {
+        // No handlers: fall back to surfacing the (shortened) id so context isn't lost.
+        return /*#__PURE__*/ React.createElement(Tooltip, {
+            title: nodeId
+        }, /*#__PURE__*/ React.createElement("span", {
+            style: {
+                fontFamily: "monospace",
+                fontSize: 12,
+                color: theme.colors.mutedForeground
+            }
+        }, nodeId.length > 8 ? nodeId.slice(0, 8) : nodeId));
+    }
+    return /*#__PURE__*/ React.createElement("span", {
+        style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 8
+        },
+        onClick: (e)=>e.stopPropagation()
+    }, onAgentNodeClick && /*#__PURE__*/ React.createElement(Tooltip, {
+        title: `Open Flow Details · ${nodeId}`
+    }, /*#__PURE__*/ React.createElement("button", {
+        type: "button",
+        style: baseStyle,
+        onClick: ()=>onAgentNodeClick(sessionId, nodeId)
+    }, /*#__PURE__*/ React.createElement(PanelRightOpen, {
+        size: 13,
+        style: {
+            flexShrink: 0
+        }
+    }), "Flow Details")), onOpenVisualizer && /*#__PURE__*/ React.createElement(Tooltip, {
+        title: `Open in Visualizer · ${nodeId}`
+    }, /*#__PURE__*/ React.createElement("button", {
+        type: "button",
+        style: baseStyle,
+        onClick: ()=>onOpenVisualizer(sessionId, nodeId)
+    }, /*#__PURE__*/ React.createElement(ChartNetwork, {
+        size: 13,
+        style: {
+            flexShrink: 0
+        }
+    }), "Visualizer")));
+};
+
+const NodeRow = ({ node, metricName, onAgentNodeClick, onOpenVisualizer })=>{
     const { theme } = useTheme$1();
     const [showReasoning, setShowReasoning] = React.useState(false);
-    const clickable = !!onAgentNodeClick;
-    const open = ()=>onAgentNodeClick?.(node.sessionId, node.nodeId);
     return /*#__PURE__*/ React.createElement("div", {
         style: {
             display: "flex",
@@ -116984,38 +117259,27 @@ const NodeRow = ({ node, metricName, onAgentNodeClick })=>{
             gap: 10,
             flexWrap: "wrap"
         }
-    }, /*#__PURE__*/ React.createElement(Tooltip, {
-        title: clickable ? `Inspect run · ${node.nodeId}` : node.nodeId
-    }, /*#__PURE__*/ React.createElement("span", {
-        role: clickable ? "button" : undefined,
-        tabIndex: clickable ? 0 : undefined,
-        onClick: clickable ? open : undefined,
-        onKeyDown: clickable ? (e)=>{
-            if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                open();
-            }
-        } : undefined,
+    }, /*#__PURE__*/ React.createElement(Tag, {
         style: {
+            margin: 0,
             display: "inline-flex",
             alignItems: "center",
             gap: 6,
-            padding: "3px 10px",
-            borderRadius: 6,
-            fontFamily: "monospace",
-            fontSize: 12,
-            fontWeight: 500,
-            background: theme.colors.tagLlminference?.bg ?? theme.colors.muted,
-            color: theme.colors.tagLlminference?.color ?? theme.colors.foreground,
-            border: `1px solid ${theme.colors.tagLlminference?.border ?? theme.colors.border}`,
-            cursor: clickable ? "pointer" : "default"
+            background: theme.colors.tagToolLevel2?.bg ?? theme.colors.primary,
+            color: theme.colors.tagToolLevel2?.color ?? theme.colors.primaryForeground,
+            border: "none"
         }
     }, /*#__PURE__*/ React.createElement(Bot, {
-        size: 13,
+        size: 12,
         style: {
             flexShrink: 0
         }
-    }), shortenId(node.nodeId))), node.reasoning && /*#__PURE__*/ React.createElement("button", {
+    }), "Agent Node"), /*#__PURE__*/ React.createElement(NodeActions, {
+        sessionId: node.sessionId,
+        nodeId: node.nodeId,
+        onAgentNodeClick: onAgentNodeClick,
+        onOpenVisualizer: onOpenVisualizer
+    }), node.reasoning && /*#__PURE__*/ React.createElement("button", {
         type: "button",
         onClick: ()=>setShowReasoning((s)=>!s),
         style: {
@@ -117082,7 +117346,7 @@ const LabelPanelHeader = ({ label })=>{
         }
     }, label.count, " ", label.count === 1 ? "node" : "nodes"));
 };
-const MetricCard = ({ metric, onAgentNodeClick })=>{
+const MetricCard = ({ metric, onAgentNodeClick, onOpenVisualizer })=>{
     const { theme } = useTheme$1();
     const items = metric.labels.map((label)=>({
             key: label.labelName,
@@ -117106,7 +117370,8 @@ const MetricCard = ({ metric, onAgentNodeClick })=>{
                     key: node.nodeId,
                     node: node,
                     metricName: metric.metricName,
-                    onAgentNodeClick: onAgentNodeClick
+                    onAgentNodeClick: onAgentNodeClick,
+                    onOpenVisualizer: onOpenVisualizer
                 })))
         }));
     return /*#__PURE__*/ React.createElement("div", {
@@ -117216,7 +117481,7 @@ const Meta = ({ label, value })=>{
         }
     }, value ?? "—"));
 };
-const JudgeAggregateView = ({ metrics, onAgentNodeClick })=>{
+const JudgeAggregateView = ({ metrics, onAgentNodeClick, onOpenVisualizer })=>{
     const { theme } = useTheme$1();
     if (!metrics.length) {
         return /*#__PURE__*/ React.createElement("div", {
@@ -117248,7 +117513,8 @@ const JudgeAggregateView = ({ metrics, onAgentNodeClick })=>{
     }, metrics.map((metric)=>/*#__PURE__*/ React.createElement(MetricCard, {
             key: metric.key,
             metric: metric,
-            onAgentNodeClick: onAgentNodeClick
+            onAgentNodeClick: onAgentNodeClick,
+            onOpenVisualizer: onOpenVisualizer
         }))));
 };
 
@@ -117300,7 +117566,7 @@ const DEFAULT_TITLES = {
     LLMInference: "LLM Inference Evaluator - Aggregate View",
     Judge: "Judge Evaluator - Aggregate View"
 };
-const AggregateResultsTable = ({ rawResults = [], aggregateResults, agents, title, evaluatorName, onAgentNodeClick })=>{
+const AggregateResultsTable = ({ rawResults = [], aggregateResults, agents, title, evaluatorName, onAgentNodeClick, onOpenVisualizer })=>{
     const { theme } = useTheme$1();
     const [expandedRowKeys, setExpandedRowKeys] = React.useState([]);
     const { aggregateType, dataSource, llmIsTree, llmExpandableKeys } = React.useMemo(()=>{
@@ -117468,7 +117734,7 @@ const AggregateResultsTable = ({ rawResults = [], aggregateResults, agents, titl
                     dataIndex: "name",
                     key: "name",
                     render: (name, row)=>{
-                        const isClickable = row.level === 3 && row.agentNodeId && onAgentNodeClick;
+                        const showActions = row.level === 3 && row.agentNodeId && (onAgentNodeClick || onOpenVisualizer);
                         return /*#__PURE__*/ React.createElement("span", {
                             style: {
                                 display: "inline-flex",
@@ -117476,27 +117742,16 @@ const AggregateResultsTable = ({ rawResults = [], aggregateResults, agents, titl
                                 gap: 8,
                                 fontFamily: "monospace",
                                 fontSize: 13,
-                                ...isClickable && {
-                                    cursor: "pointer",
-                                    color: theme.colors.primary
-                                }
-                            },
-                            onClick: isClickable ? (e)=>{
-                                e.stopPropagation();
-                                onAgentNodeClick(row.sessionId, row.agentNodeId);
-                            } : undefined,
-                            onKeyDown: isClickable ? (e)=>{
-                                if (e.key === "Enter" || e.key === " ") {
-                                    e.preventDefault();
-                                    e.stopPropagation();
-                                    onAgentNodeClick(row.sessionId, row.agentNodeId);
-                                }
-                            } : undefined,
-                            role: isClickable ? "button" : undefined,
-                            tabIndex: isClickable ? 0 : undefined
+                                flexWrap: "wrap"
+                            }
                         }, /*#__PURE__*/ React.createElement(LLMTagForLevel, {
                             level: row.level
-                        }), name);
+                        }), showActions ? /*#__PURE__*/ React.createElement(NodeActions, {
+                            sessionId: row.sessionId,
+                            nodeId: row.agentNodeId,
+                            onAgentNodeClick: onAgentNodeClick,
+                            onOpenVisualizer: onOpenVisualizer
+                        }) : name);
                     }
                 },
                 ...METRIC_COLUMNS.map(({ key, title, Icon })=>({
@@ -117683,7 +117938,8 @@ const AggregateResultsTable = ({ rawResults = [], aggregateResults, agents, titl
     if (aggregateType === "Judge") {
         return /*#__PURE__*/ React.createElement(JudgeAggregateView, {
             metrics: dataSource,
-            onAgentNodeClick: onAgentNodeClick
+            onAgentNodeClick: onAgentNodeClick,
+            onOpenVisualizer: onOpenVisualizer
         });
     }
     // ToolUse (tree table)
@@ -117752,7 +118008,7 @@ const AggregateResultsTable = ({ rawResults = [], aggregateResults, agents, titl
             dataIndex: "name",
             key: "name",
             render: (name, row)=>{
-                const isClickable = (row.level === 2 || row.level === 3) && row.nodeId && onAgentNodeClick;
+                const showActions = (row.level === 2 || row.level === 3) && row.nodeId && (onAgentNodeClick || onOpenVisualizer);
                 return /*#__PURE__*/ React.createElement("span", {
                     style: {
                         display: "inline-flex",
@@ -117760,27 +118016,16 @@ const AggregateResultsTable = ({ rawResults = [], aggregateResults, agents, titl
                         gap: 8,
                         fontFamily: "monospace",
                         fontSize: 13,
-                        ...isClickable && {
-                            cursor: "pointer",
-                            color: theme.colors.primary
-                        }
-                    },
-                    onClick: isClickable ? (e)=>{
-                        e.stopPropagation();
-                        onAgentNodeClick(row.sessionId, row.nodeId);
-                    } : undefined,
-                    onKeyDown: isClickable ? (e)=>{
-                        if (e.key === "Enter" || e.key === " ") {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            onAgentNodeClick(row.sessionId, row.nodeId);
-                        }
-                    } : undefined,
-                    role: isClickable ? "button" : undefined,
-                    tabIndex: isClickable ? 0 : undefined
+                        flexWrap: "wrap"
+                    }
                 }, /*#__PURE__*/ React.createElement(TagForLevel, {
                     level: row.level
-                }), name);
+                }), showActions ? /*#__PURE__*/ React.createElement(NodeActions, {
+                    sessionId: row.sessionId,
+                    nodeId: row.nodeId,
+                    onAgentNodeClick: onAgentNodeClick,
+                    onOpenVisualizer: onOpenVisualizer
+                }) : name);
             }
         },
         {
@@ -118098,7 +118343,7 @@ function isCategoricalMetric(def) {
     }, 0) ?? 0;
 }
 
-const EvaluatorResult = ({ evaluation, evaluatorId, backHref, onAgentNodeClick })=>{
+const EvaluatorResult = ({ evaluation, evaluatorId, backHref, onAgentNodeClick, onOpenVisualizer })=>{
     const { theme } = useTheme$1();
     const labelColor = theme.colors.mutedForeground;
     const derived = evaluation ? deriveEvaluatorResultData(evaluation, evaluatorId) : null;
@@ -118241,7 +118486,8 @@ const EvaluatorResult = ({ evaluation, evaluatorId, backHref, onAgentNodeClick }
         aggregateResults: aggregateResults,
         agents: evaluation.agents,
         evaluatorName: evaluatorName,
-        onAgentNodeClick: onAgentNodeClick
+        onAgentNodeClick: onAgentNodeClick,
+        onOpenVisualizer: onOpenVisualizer
     }))));
 };
 
@@ -120096,6 +120342,166 @@ const GlobalStyles = ()=>{
           --ring: #6366f1;
           --radius: 0.5rem;
         }
+
+        html.liquid-glass-light {
+          color: hsl(222 47% 11%);
+        }
+
+        html.liquid-glass-light::before {
+          content: "";
+          position: fixed;
+          inset: 0;
+          z-index: -1;
+          pointer-events: none;
+          background:
+            radial-gradient(120% 90% at 10% 10%, hsl(210 55% 92%) 0%, transparent 52%),
+            radial-gradient(90% 70% at 90% 20%, hsl(220 45% 88%) 0%, transparent 45%),
+            radial-gradient(70% 60% at 50% 100%, hsl(200 35% 88%) 0%, transparent 50%), hsl(210 30% 91%);
+        }
+
+        html.liquid-glass-light body {
+          background-color: hsl(210 30% 91%);
+          color: hsl(222 47% 11%);
+        }
+
+        html.liquid-glass-light .react-flow {
+          contain: paint;
+        }
+
+        html.liquid-glass-light .react-flow__edge-label {
+          background: hsla(0 0% 100% / 0.92);
+          border: 1px solid hsla(210 28% 72% / 0.55);
+          color: hsl(222 47% 11%);
+        }
+
+        html.liquid-glass-light .file-selector-refresh-btn {
+          border: 1px solid hsla(210 28% 72% / 0.55);
+          background-color: hsla(0 0% 100% / 0.88);
+          color: hsl(222 47% 11%);
+        }
+
+        html.liquid-glass-light .file-selector-refresh-btn:hover {
+          background-color: hsla(0 0% 100% / 0.96);
+          color: hsl(222 47% 14%);
+        }
+
+        html.liquid-glass-light .ant-table-tbody > tr.evaluations-compare-diff-row > td {
+          background-color: hsla(48 96% 53% / 0.22) !important;
+        }
+
+        html.liquid-glass-light {
+          --background: hsl(210 30% 91%);
+          --foreground: hsl(222 47% 11%);
+          --card: hsla(0 0% 100% / 0.88);
+          --card-foreground: hsl(222 47% 11%);
+          --popover: hsla(0 0% 100% / 0.94);
+          --popover-foreground: hsl(222 47% 11%);
+          --primary: hsl(211 92% 45%);
+          --primary-foreground: hsl(210 40% 98%);
+          --secondary: hsla(210 40% 98% / 0.45);
+          --secondary-foreground: hsl(222 47% 18%);
+          --muted: hsla(210 25% 98% / 0.35);
+          --muted-foreground: hsl(215 16% 40%);
+          --accent: hsla(210 60% 96% / 0.55);
+          --accent-foreground: hsl(222 47% 18%);
+          --destructive: hsl(0 72% 51%);
+          --destructive-foreground: hsl(210 40% 98%);
+          --border: hsla(210 28% 72% / 0.55);
+          --input: hsla(210 28% 88% / 0.65);
+          --ring: hsl(211 92% 45%);
+          --radius: 0.75rem;
+        }
+
+        html.liquid-glass-dark {
+          color: hsl(210 36% 96%);
+        }
+
+        html.liquid-glass-dark::before {
+          content: "";
+          position: fixed;
+          inset: 0;
+          z-index: -1;
+          pointer-events: none;
+          background:
+            radial-gradient(130% 100% at 20% 0%, hsl(222 42% 14%) 0%, transparent 55%),
+            radial-gradient(90% 80% at 95% 30%, hsl(232 38% 18%) 0%, transparent 45%),
+            radial-gradient(80% 70% at 50% 100%, hsl(215 36% 12%) 0%, transparent 50%), hsl(222 28% 9%);
+        }
+
+        html.liquid-glass-dark body {
+          background-color: hsl(222 28% 9%);
+          color: hsl(210 36% 96%);
+        }
+
+        html.liquid-glass-dark .react-flow {
+          contain: paint;
+        }
+
+        html.liquid-glass-dark .react-flow__edge-label {
+          background: hsla(222 22% 18% / 0.92);
+          border: 1px solid hsla(215 22% 42% / 0.45);
+          color: hsl(210 36% 96%);
+        }
+
+        html.liquid-glass-dark .file-selector-refresh-btn {
+          border: 1px solid hsla(215 22% 42% / 0.45);
+          background-color: hsla(222 22% 14% / 0.88);
+          color: hsl(210 36% 96%);
+        }
+
+        html.liquid-glass-dark .file-selector-refresh-btn:hover {
+          background-color: hsla(222 22% 18% / 0.96);
+          color: hsl(210 40% 98%);
+        }
+
+        html.liquid-glass-dark .ant-table-tbody > tr.evaluations-compare-diff-row > td {
+          background-color: hsla(217 32% 28% / 0.55) !important;
+        }
+
+        html.liquid-glass-dark {
+          --background: hsl(222 28% 9%);
+          --foreground: hsl(210 36% 96%);
+          --card: hsla(222 22% 14% / 0.88);
+          --card-foreground: hsl(210 36% 96%);
+          --popover: hsla(222 24% 12% / 0.94);
+          --popover-foreground: hsl(210 36% 96%);
+          --primary: hsl(212 92% 62%);
+          --primary-foreground: hsl(222 47% 8%);
+          --secondary: hsla(217 28% 22% / 0.55);
+          --secondary-foreground: hsl(210 36% 94%);
+          --muted: hsla(217 22% 18% / 0.45);
+          --muted-foreground: hsl(215 18% 72%);
+          --accent: hsla(217 26% 22% / 0.55);
+          --accent-foreground: hsl(210 36% 96%);
+          --destructive: hsl(0 72% 58%);
+          --destructive-foreground: hsl(210 40% 98%);
+          --border: hsla(215 22% 42% / 0.45);
+          --input: hsla(217 22% 22% / 0.65);
+          --ring: hsl(212 92% 62%);
+          --radius: 0.75rem;
+        }
+
+        @media (prefers-reduced-transparency: reduce) {
+          html.liquid-glass-light::before,
+          html.liquid-glass-dark::before {
+            display: none;
+          }
+
+          html.liquid-glass-light body {
+            background-color: hsl(210 30% 91%);
+          }
+
+          html.liquid-glass-dark body {
+            background-color: hsl(222 28% 9%);
+          }
+
+          html.liquid-glass-light .react-flow__edge-label,
+          html.liquid-glass-dark .react-flow__edge-label,
+          html.liquid-glass-light .file-selector-refresh-btn,
+          html.liquid-glass-dark .file-selector-refresh-btn {
+            background-color: var(--card);
+          }
+        }
       `
     });
 };
@@ -120290,10 +120696,14 @@ exports.getStatusColor = getStatusColor;
 exports.isEvaluationDto = isEvaluationDto;
 exports.isPlainObject = isPlainObject;
 exports.lightTheme = lightTheme;
+exports.liquidGlassDarkTheme = liquidGlassDarkTheme;
+exports.liquidGlassLightTheme = liquidGlassLightTheme;
 exports.safeStyled = safeStyled;
 exports.safeThemeColor = safeThemeColor;
 exports.safeThemeSpacing = safeThemeSpacing;
 exports.safeThemeValue = safeThemeValue;
+exports.themeForMode = themeForMode;
+exports.themeToMode = themeToMode;
 exports.toTitleCase = toTitleCase;
 exports.transformEvaluation = transformEvaluation;
 exports.truncateText = truncateText;