@railtownai/railtracks-visualizer 0.0.66 → 0.0.68

package/dist/esm/index.js

@@ -12919,7 +12919,7 @@ const createLucideIcon = (iconName, iconNode)=>{
     return Component;
 };
 
-const __iconNode$y = [
+const __iconNode$z = [
     [
         "path",
         {
@@ -12935,9 +12935,9 @@ const __iconNode$y = [
         }
     ]
 ];
-const ArrowLeft = createLucideIcon("arrow-left", __iconNode$y);
+const ArrowLeft = createLucideIcon("arrow-left", __iconNode$z);
 
-const __iconNode$x = [
+const __iconNode$y = [
     [
         "path",
         {
@@ -12953,9 +12953,9 @@ const __iconNode$x = [
         }
     ]
 ];
-const ArrowRight = createLucideIcon("arrow-right", __iconNode$x);
+const ArrowRight = createLucideIcon("arrow-right", __iconNode$y);
 
-const __iconNode$w = [
+const __iconNode$x = [
     [
         "path",
         {
@@ -13003,9 +13003,9 @@ const __iconNode$w = [
         }
     ]
 ];
-const Bot = createLucideIcon("bot", __iconNode$w);
+const Bot = createLucideIcon("bot", __iconNode$x);
 
-const __iconNode$v = [
+const __iconNode$w = [
     [
         "path",
         {
@@ -13039,9 +13039,9 @@ const __iconNode$v = [
         }
     ]
 ];
-const Calendar = createLucideIcon("calendar", __iconNode$v);
+const Calendar = createLucideIcon("calendar", __iconNode$w);
 
-const __iconNode$u = [
+const __iconNode$v = [
     [
         "path",
         {
@@ -13098,9 +13098,9 @@ const __iconNode$u = [
         }
     ]
 ];
-const ChartNetwork = createLucideIcon("chart-network", __iconNode$u);
+const ChartNetwork = createLucideIcon("chart-network", __iconNode$v);
 
-const __iconNode$t = [
+const __iconNode$u = [
     [
         "path",
         {
@@ -13109,9 +13109,9 @@ const __iconNode$t = [
         }
     ]
 ];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$t);
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$u);
 
-const __iconNode$s = [
+const __iconNode$t = [
     [
         "path",
         {
@@ -13120,9 +13120,9 @@ const __iconNode$s = [
         }
     ]
 ];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$s);
+const ChevronRight = createLucideIcon("chevron-right", __iconNode$t);
 
-const __iconNode$r = [
+const __iconNode$s = [
     [
         "path",
         {
@@ -13138,9 +13138,9 @@ const __iconNode$r = [
         }
     ]
 ];
-const ChevronsDown = createLucideIcon("chevrons-down", __iconNode$r);
+const ChevronsDown = createLucideIcon("chevrons-down", __iconNode$s);
 
-const __iconNode$q = [
+const __iconNode$r = [
     [
         "path",
         {
@@ -13156,9 +13156,9 @@ const __iconNode$q = [
         }
     ]
 ];
-const ChevronsUp = createLucideIcon("chevrons-up", __iconNode$q);
+const ChevronsUp = createLucideIcon("chevrons-up", __iconNode$r);
 
-const __iconNode$p = [
+const __iconNode$q = [
     [
         "circle",
         {
@@ -13189,9 +13189,9 @@ const __iconNode$p = [
         }
     ]
 ];
-const CircleAlert = createLucideIcon("circle-alert", __iconNode$p);
+const CircleAlert = createLucideIcon("circle-alert", __iconNode$q);
 
-const __iconNode$o = [
+const __iconNode$p = [
     [
         "path",
         {
@@ -13207,9 +13207,9 @@ const __iconNode$o = [
         }
     ]
 ];
-const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$o);
+const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$p);
 
-const __iconNode$n = [
+const __iconNode$o = [
     [
         "circle",
         {
@@ -13234,9 +13234,9 @@ const __iconNode$n = [
         }
     ]
 ];
-const CircleDollarSign = createLucideIcon("circle-dollar-sign", __iconNode$n);
+const CircleDollarSign = createLucideIcon("circle-dollar-sign", __iconNode$o);
 
-const __iconNode$m = [
+const __iconNode$n = [
     [
         "circle",
         {
@@ -13254,9 +13254,9 @@ const __iconNode$m = [
         }
     ]
 ];
-const Clock = createLucideIcon("clock", __iconNode$m);
+const Clock = createLucideIcon("clock", __iconNode$n);
 
-const __iconNode$l = [
+const __iconNode$m = [
     [
         "rect",
         {
@@ -13277,9 +13277,9 @@ const __iconNode$l = [
         }
     ]
 ];
-const Copy = createLucideIcon("copy", __iconNode$l);
+const Copy = createLucideIcon("copy", __iconNode$m);
 
-const __iconNode$k = [
+const __iconNode$l = [
     [
         "path",
         {
@@ -13387,9 +13387,9 @@ const __iconNode$k = [
         }
     ]
 ];
-const Cpu = createLucideIcon("cpu", __iconNode$k);
+const Cpu = createLucideIcon("cpu", __iconNode$l);
 
-const __iconNode$j = [
+const __iconNode$k = [
     [
         "line",
         {
@@ -13408,9 +13408,9 @@ const __iconNode$j = [
         }
     ]
 ];
-const DollarSign = createLucideIcon("dollar-sign", __iconNode$j);
+const DollarSign = createLucideIcon("dollar-sign", __iconNode$k);
 
-const __iconNode$i = [
+const __iconNode$j = [
     [
         "path",
         {
@@ -13440,9 +13440,9 @@ const __iconNode$i = [
         }
     ]
 ];
-const FileInput = createLucideIcon("file-input", __iconNode$i);
+const FileInput = createLucideIcon("file-input", __iconNode$j);
 
-const __iconNode$h = [
+const __iconNode$i = [
     [
         "path",
         {
@@ -13472,9 +13472,9 @@ const __iconNode$h = [
         }
     ]
 ];
-const FileOutput = createLucideIcon("file-output", __iconNode$h);
+const FileOutput = createLucideIcon("file-output", __iconNode$i);
 
-const __iconNode$g = [
+const __iconNode$h = [
     [
         "path",
         {
@@ -13532,9 +13532,9 @@ const __iconNode$g = [
         }
     ]
 ];
-const FoldVertical = createLucideIcon("fold-vertical", __iconNode$g);
+const FoldVertical = createLucideIcon("fold-vertical", __iconNode$h);
 
-const __iconNode$f = [
+const __iconNode$g = [
     [
         "line",
         {
@@ -13576,9 +13576,9 @@ const __iconNode$f = [
         }
     ]
 ];
-const Hash = createLucideIcon("hash", __iconNode$f);
+const Hash = createLucideIcon("hash", __iconNode$g);
 
-const __iconNode$e = [
+const __iconNode$f = [
     [
         "circle",
         {
@@ -13603,9 +13603,9 @@ const __iconNode$e = [
         }
     ]
 ];
-const Info = createLucideIcon("info", __iconNode$e);
+const Info = createLucideIcon("info", __iconNode$f);
 
-const __iconNode$d = [
+const __iconNode$e = [
     [
         "path",
         {
@@ -13642,7 +13642,39 @@ const __iconNode$d = [
         }
     ]
 ];
-const ListChecks = createLucideIcon("list-checks", __iconNode$d);
+const ListChecks = createLucideIcon("list-checks", __iconNode$e);
+
+const __iconNode$d = [
+    [
+        "path",
+        {
+            d: "M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z",
+            key: "18887p"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "M7 11h10",
+            key: "1twpyw"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "M7 15h6",
+            key: "d9of3u"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "M7 7h8",
+            key: "af5zfr"
+        }
+    ]
+];
+const MessageSquareText = createLucideIcon("message-square-text", __iconNode$d);
 
 const __iconNode$c = [
     [
@@ -15998,6 +16030,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%)",
@@ -16059,81 +16222,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__*/ createContext(undefined);
 const ThemeProvider = ({ children, theme: propTheme })=>{
-    const [currentTheme, setCurrentTheme] = React__default.useState(()=>{
-        // If a theme prop is provided, use it immediately
+    const [themeMode, setThemeModeState] = React__default.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 = useMemo(()=>themeForMode(themeMode), [
+        themeMode
+    ]);
     useEffect(()=>{
         if (propTheme) {
-            setCurrentTheme(propTheme);
+            setThemeModeState(themeToMode(propTheme));
         }
     }, [
         propTheme
     ]);
-    // Sync html.dark class for GlobalStyles and other CSS that uses html.dark
     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 */ }
     }, [
-        currentTheme
+        themeMode
+    ]);
+    useEffect(()=>{
+        if (propTheme) return;
+        try {
+            localStorage.setItem("theme", themeMode);
+        } catch  {
+        /* ignore */ }
+    }, [
+        themeMode,
+        propTheme
     ]);
-    // Only listen for storage events if no theme prop is provided
     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 value = React__default.useMemo(()=>({
+    const setThemeMode = useCallback((mode)=>{
+        setThemeModeState(mode);
+    }, []);
+    const setTheme = 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 = 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__default.createElement(ThemeContext.Provider, {
         value: value
@@ -16144,14 +16350,20 @@ const ThemeProvider = ({ children, theme: propTheme })=>{
 const useTheme$1 = ()=>{
     const context = 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;
@@ -16160,7 +16372,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;
@@ -48566,7 +48777,7 @@ const CountUpLatency = ({ value })=>{
     };
 }
 const NodeDetailsDrawer = ({ isVisible, onClose, nodeData })=>{
-    const { theme } = useTheme$1();
+    const { theme, isLiquidGlass } = useTheme$1();
     const [selectedRowIndex, setSelectedRowIndex] = useState(null);
     const [selectedLlmDetails, setSelectedLlmDetails] = useState(null);
     // Default to last row (total/aggregate) when drawer opens (only on first open)
@@ -48640,11 +48851,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}`
             }
         }
@@ -52005,8 +52216,7 @@ const SheetOverlay = /*#__PURE__*/ React.forwardRef(({ className, ...props }, re
             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,
@@ -52018,7 +52228,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"
@@ -52030,7 +52240,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 {
@@ -52038,7 +52248,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 {
@@ -52048,7 +52258,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":
@@ -52060,7 +52270,7 @@ const getSheetStyles = (side = "right")=>{
                 right: 0,
                 height: "100%",
                 width: "75%",
-                borderLeft: "1px solid hsl(var(--border))",
+                borderLeft: "1px solid var(--border)",
                 maxWidth: "384px"
             };
     }
@@ -52121,7 +52331,7 @@ const SheetTitle = /*#__PURE__*/ React.forwardRef(({ className, ...props }, ref)
         style: {
             fontSize: "18px",
             fontWeight: 600,
-            color: "hsl(var(--foreground))"
+            color: "var(--foreground)"
         },
         className: className,
         ...props
@@ -52131,7 +52341,7 @@ const SheetDescription = /*#__PURE__*/ React.forwardRef(({ className, ...props }
         ref: ref,
         style: {
             fontSize: "14px",
-            color: "hsl(var(--muted-foreground))"
+            color: "var(--muted-foreground)"
         },
         className: className,
         ...props
@@ -116298,7 +116508,18 @@ const useEvaluationsMock = ()=>{
     return 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 = import.meta.env.VITE_API_ORIGIN?.trim().replace(/\/$/, "") ?? "";
+    if (!origin) {
+        return "/api";
+    }
+    return `${origin}/api`;
+}
+const API_BASE = resolveApiBase();
+
 const useEvaluations = ()=>{
     const mockContext = useEvaluationsMock();
     const [evaluations, setEvaluations] = useState([]);
@@ -116805,6 +117026,401 @@ function buildTreeFromProcessedData(latencyByTool, failureRateByTool, usageCount
     return buildTreeFromProcessedData(latencyByTool, failureRateByTool, usageCountByTool, latencyResults, failureResults, agentIdToSessionId);
 }
 
+const JUDGE_RESULT_PREFIX = "JudgeResult/";
+const JUDGE_REASONING_PREFIX = "JudgeReasoning/";
+/** Map agent node id -> session id from the agents array (new format only). */ function buildSessionByNodeId(agents) {
+    const map = new Map();
+    for (const agent of agents ?? []){
+        for (const entry of agent.agent_node_ids ?? []){
+            if (entry && typeof entry === "object" && "agent_node_id" in entry) {
+                map.set(entry.agent_node_id, entry.session_id);
+            }
+        }
+    }
+    return map;
+}
+/** Map `${nodeId}::${metricName}` -> reasoning text from JudgeReasoning/* results. */ function buildReasoningByKey(rawResults) {
+    const map = new Map();
+    for (const item of rawResults){
+        if (!isBaseResult(item)) continue;
+        if (!item.result_name?.startsWith(JUDGE_REASONING_PREFIX)) continue;
+        const metricName = item.result_name.slice(JUDGE_REASONING_PREFIX.length);
+        const nodeId = item.agent_data_id?.[0];
+        if (nodeId && typeof item.value === "string") {
+            map.set(`${nodeId}::${metricName}`, item.value);
+        }
+    }
+    return map;
+}
+function metricNameOf(agg) {
+    return agg.metric?.name ?? agg.name?.replace(/^Aggregate\//, "") ?? "Unknown";
+}
+/** Collect the JudgeResult leaf nodes (label + node id) grouped by label. */ function groupNodesByLabel(agg, nodes, rawResults, metricName, sessionByNodeId, reasoningByKey) {
+    const byLabel = new Map();
+    const seen = new Set();
+    const push = (label, nodeId)=>{
+        const dedupeKey = `${label}::${nodeId}`;
+        if (seen.has(dedupeKey)) return;
+        seen.add(dedupeKey);
+        const ref = {
+            nodeId,
+            sessionId: sessionByNodeId.get(nodeId),
+            reasoning: reasoningByKey.get(`${nodeId}::${metricName}`)
+        };
+        const existing = byLabel.get(label);
+        if (existing) existing.push(ref);
+        else byLabel.set(label, [
+            ref
+        ]);
+    };
+    // Preferred: walk the aggregate's children leaf nodes.
+    for (const childId of agg.children ?? []){
+        const child = nodes[childId];
+        if (child && isBaseResult(child)) {
+            const nodeId = child.agent_data_id?.[0];
+            if (nodeId) push(String(child.value), nodeId);
+        }
+    }
+    // Fallback: derive from raw JudgeResult/<metric> results when no children are present.
+    if (byLabel.size === 0) {
+        const resultName = `${JUDGE_RESULT_PREFIX}${metricName}`;
+        for (const item of rawResults){
+            if (isBaseResult(item) && item.result_name === resultName) {
+                const nodeId = item.agent_data_id?.[0];
+                if (nodeId) push(String(item.value), nodeId);
+            }
+        }
+    }
+    return byLabel;
+}
+/** Build the Judge view model: one entry per categorical metric. */ function buildJudgeMetricsFromAggregate(input) {
+    const { roots, nodes, agents, rawResults = [] } = input;
+    const sessionByNodeId = buildSessionByNodeId(agents);
+    const reasoningByKey = buildReasoningByKey(rawResults);
+    // Prefer roots; fall back to scanning all nodes for categorical aggregates.
+    const rootAggregates = roots.map((id)=>nodes[id]).filter((n)=>isAggregateCategorical(n));
+    const aggregates = rootAggregates.length > 0 ? rootAggregates : Object.values(nodes).filter((n)=>isAggregateCategorical(n));
+    return aggregates.map((agg, index)=>{
+        const metricName = metricNameOf(agg);
+        const counts = agg.counts ?? {};
+        const categories = agg.categories ?? agg.metric?.categories ?? Object.keys(counts);
+        const byLabel = groupNodesByLabel(agg, nodes, rawResults, metricName, sessionByNodeId, reasoningByKey);
+        // Order labels by the metric's category order, then any extras found in the data.
+        const orderedLabels = [
+            ...categories
+        ];
+        for (const label of byLabel.keys()){
+            if (!orderedLabels.includes(label)) orderedLabels.push(label);
+        }
+        const labels = orderedLabels.map((labelName)=>{
+            const nodesForLabel = byLabel.get(labelName) ?? [];
+            return {
+                labelName,
+                count: counts[labelName] ?? nodesForLabel.length,
+                nodes: nodesForLabel
+            };
+        });
+        const total = labels.reduce((sum, l)=>sum + l.count, 0);
+        return {
+            key: agg.identifier ?? `${metricName}-${index}`,
+            metricName,
+            description: agg.metric?.description ?? undefined,
+            mostCommon: agg.most_common_label ?? undefined,
+            leastCommon: agg.least_common_label ?? undefined,
+            total,
+            labels
+        };
+    });
+}
+
+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 { theme } = useTheme$1();
+    const [showReasoning, setShowReasoning] = useState(false);
+    const clickable = !!onAgentNodeClick;
+    const open = ()=>onAgentNodeClick?.(node.sessionId, node.nodeId);
+    return /*#__PURE__*/ React__default.createElement("div", {
+        style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: 8
+        }
+    }, /*#__PURE__*/ React__default.createElement("div", {
+        style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 10,
+            flexWrap: "wrap"
+        }
+    }, /*#__PURE__*/ React__default.createElement(Tooltip, {
+        title: clickable ? `Inspect run · ${node.nodeId}` : node.nodeId
+    }, /*#__PURE__*/ React__default.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,
+        style: {
+            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"
+        }
+    }, /*#__PURE__*/ React__default.createElement(Bot, {
+        size: 13,
+        style: {
+            flexShrink: 0
+        }
+    }), shortenId(node.nodeId))), node.reasoning && /*#__PURE__*/ React__default.createElement("button", {
+        type: "button",
+        onClick: ()=>setShowReasoning((s)=>!s),
+        style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 5,
+            padding: "3px 9px",
+            borderRadius: 6,
+            fontSize: 12,
+            cursor: "pointer",
+            background: "transparent",
+            color: theme.colors.primary,
+            border: `1px solid ${theme.colors.primary}`
+        }
+    }, /*#__PURE__*/ React__default.createElement(MessageSquareText, {
+        size: 12
+    }), showReasoning ? "Hide reasoning" : "Show reasoning")), node.reasoning && showReasoning && /*#__PURE__*/ React__default.createElement("div", {
+        style: {
+            padding: "10px 14px",
+            background: theme.colors.muted,
+            border: `1px solid ${theme.colors.border}`,
+            borderRadius: 6,
+            fontSize: 13,
+            lineHeight: 1.5,
+            whiteSpace: "pre-wrap",
+            color: theme.colors.foreground
+        }
+    }, /*#__PURE__*/ React__default.createElement("div", {
+        style: {
+            fontWeight: 600,
+            marginBottom: 6,
+            color: theme.colors.mutedForeground
+        }
+    }, "Judge reasoning · ", metricName), node.reasoning));
+};
+const LabelPanelHeader = ({ label })=>{
+    const { theme } = useTheme$1();
+    const isEmpty = label.count === 0;
+    return /*#__PURE__*/ React__default.createElement("div", {
+        style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 10
+        }
+    }, /*#__PURE__*/ React__default.createElement("span", {
+        style: {
+            width: 7,
+            height: 7,
+            borderRadius: "50%",
+            flexShrink: 0,
+            background: isEmpty ? theme.colors.border : theme.colors.primary
+        }
+    }), /*#__PURE__*/ React__default.createElement("span", {
+        style: {
+            fontSize: 13,
+            fontWeight: 600,
+            color: isEmpty ? theme.colors.mutedForeground : undefined
+        }
+    }, label.labelName), /*#__PURE__*/ React__default.createElement("span", {
+        style: {
+            marginLeft: "auto",
+            fontSize: 12,
+            color: theme.colors.mutedForeground
+        }
+    }, label.count, " ", label.count === 1 ? "node" : "nodes"));
+};
+const MetricCard = ({ metric, onAgentNodeClick })=>{
+    const { theme } = useTheme$1();
+    const items = metric.labels.map((label)=>({
+            key: label.labelName,
+            label: /*#__PURE__*/ React__default.createElement(LabelPanelHeader, {
+                label: label
+            }),
+            collapsible: label.count === 0 ? "disabled" : undefined,
+            children: label.nodes.length === 0 ? /*#__PURE__*/ React__default.createElement("span", {
+                style: {
+                    fontSize: 12,
+                    fontStyle: "italic",
+                    color: theme.colors.mutedForeground
+                }
+            }, "No evaluations") : /*#__PURE__*/ React__default.createElement("div", {
+                style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: 12
+                }
+            }, label.nodes.map((node)=>/*#__PURE__*/ React__default.createElement(NodeRow, {
+                    key: node.nodeId,
+                    node: node,
+                    metricName: metric.metricName,
+                    onAgentNodeClick: onAgentNodeClick
+                })))
+        }));
+    return /*#__PURE__*/ React__default.createElement("div", {
+        style: {
+            background: theme.colors.card,
+            border: `1px solid ${theme.colors.border}`,
+            borderRadius: 8,
+            overflow: "hidden"
+        }
+    }, /*#__PURE__*/ React__default.createElement("div", {
+        style: {
+            padding: "14px 18px",
+            borderBottom: `1px solid ${theme.colors.border}`,
+            background: theme.colors.secondary
+        }
+    }, /*#__PURE__*/ React__default.createElement("div", {
+        style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 12,
+            flexWrap: "wrap"
+        }
+    }, /*#__PURE__*/ React__default.createElement(Scale, {
+        size: 16,
+        style: {
+            color: theme.colors.primary,
+            flexShrink: 0
+        }
+    }), /*#__PURE__*/ React__default.createElement("span", {
+        style: {
+            fontSize: 15,
+            fontWeight: 600
+        }
+    }, metric.metricName), /*#__PURE__*/ React__default.createElement("div", {
+        style: {
+            display: "flex",
+            flexWrap: "wrap",
+            gap: 6,
+            marginLeft: 4
+        }
+    }, metric.labels.map((label)=>/*#__PURE__*/ React__default.createElement(Tag, {
+            key: label.labelName,
+            style: {
+                margin: 0,
+                borderRadius: 12,
+                fontSize: 12,
+                ...label.count > 0 ? {
+                    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}`
+                } : {
+                    background: "transparent",
+                    color: theme.colors.mutedForeground,
+                    border: `1px solid ${theme.colors.border}`
+                }
+            }
+        }, label.labelName, " ", /*#__PURE__*/ React__default.createElement("strong", null, label.count)))), /*#__PURE__*/ React__default.createElement("div", {
+        style: {
+            display: "flex",
+            gap: 20,
+            marginLeft: "auto",
+            flexShrink: 0
+        }
+    }, /*#__PURE__*/ React__default.createElement(Meta, {
+        label: "Most common",
+        value: metric.mostCommon
+    }), /*#__PURE__*/ React__default.createElement(Meta, {
+        label: "Least common",
+        value: metric.leastCommon
+    }), /*#__PURE__*/ React__default.createElement(Meta, {
+        label: "Evaluations",
+        value: String(metric.total)
+    }))), metric.description && /*#__PURE__*/ React__default.createElement("div", {
+        style: {
+            marginTop: 6,
+            fontSize: 12,
+            color: theme.colors.mutedForeground
+        }
+    }, metric.description)), /*#__PURE__*/ React__default.createElement(Collapse$1, {
+        items: items,
+        bordered: false,
+        style: {
+            background: theme.colors.card
+        }
+    }));
+};
+const Meta = ({ label, value })=>{
+    const { theme } = useTheme$1();
+    return /*#__PURE__*/ React__default.createElement("span", {
+        style: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-end",
+            gap: 1
+        }
+    }, /*#__PURE__*/ React__default.createElement("span", {
+        style: {
+            fontSize: 10,
+            textTransform: "uppercase",
+            letterSpacing: 0.4,
+            color: theme.colors.mutedForeground
+        }
+    }, label), /*#__PURE__*/ React__default.createElement("span", {
+        style: {
+            fontSize: 13,
+            fontWeight: 500
+        }
+    }, value ?? "—"));
+};
+const JudgeAggregateView = ({ metrics, onAgentNodeClick })=>{
+    const { theme } = useTheme$1();
+    if (!metrics.length) {
+        return /*#__PURE__*/ React__default.createElement("div", {
+            style: {
+                padding: 24,
+                textAlign: "center",
+                color: theme.colors.mutedForeground,
+                fontSize: 14
+            }
+        }, "No judge metrics available");
+    }
+    return /*#__PURE__*/ React__default.createElement("div", {
+        style: {
+            width: "100%",
+            minWidth: 0
+        }
+    }, /*#__PURE__*/ React__default.createElement("h3", {
+        style: {
+            margin: "0 0 16px",
+            fontSize: 16,
+            fontWeight: 600
+        }
+    }, "Judge Evaluator - Aggregate View"), /*#__PURE__*/ React__default.createElement("div", {
+        style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: 12
+        }
+    }, metrics.map((metric)=>/*#__PURE__*/ React__default.createElement(MetricCard, {
+            key: metric.key,
+            metric: metric,
+            onAgentNodeClick: onAgentNodeClick
+        }))));
+};
+
 function detectAggregateType(nodes) {
     const values = Object.values(nodes);
     if (values.some((n)=>n?.type === "ToolAggregate")) return "ToolUse";
@@ -116825,22 +117441,6 @@ function buildLLMInferenceFlatRows(nodes) {
             count: agg.values?.length ?? 0
         }));
 }
-function buildJudgeRows(nodes) {
-    const values = Object.values(nodes);
-    const aggregates = values.filter((n)=>isAggregateCategorical(n));
-    return aggregates.map((agg)=>{
-        const counts = agg.counts ?? {};
-        const total = Object.values(counts).reduce((a, b)=>a + b, 0);
-        return {
-            key: agg.identifier ?? agg.metric?.name ?? "unknown",
-            metric: agg.metric?.name ?? "Unknown",
-            mostCommon: agg.most_common_label ?? "-",
-            leastCommon: agg.least_common_label ?? "-",
-            counts,
-            total
-        };
-    });
-}
 // --- Shared helpers ---
 function getAllExpandableKeys(rows) {
     const keys = [];
@@ -116912,7 +117512,12 @@ const AggregateResultsTable = ({ rawResults = [], aggregateResults, agents, titl
             if (type === "Judge") {
                 return {
                     aggregateType: type,
-                    dataSource: buildJudgeRows(aggregateResults.nodes),
+                    dataSource: buildJudgeMetricsFromAggregate({
+                        roots: aggregateResults.roots,
+                        nodes: aggregateResults.nodes,
+                        agents,
+                        rawResults
+                    }),
                     llmIsTree: false,
                     llmExpandableKeys: []
                 };
@@ -117245,86 +117850,10 @@ const AggregateResultsTable = ({ rawResults = [], aggregateResults, agents, titl
         }));
     }
     if (aggregateType === "Judge") {
-        const rows = dataSource;
-        const columns = [
-            {
-                title: "METRIC",
-                dataIndex: "metric",
-                key: "metric",
-                render: (metric)=>/*#__PURE__*/ React__default.createElement("span", {
-                        style: {
-                            fontFamily: "monospace",
-                            fontSize: 13
-                        }
-                    }, /*#__PURE__*/ React__default.createElement(Scale, {
-                        size: 14,
-                        style: {
-                            marginRight: 8,
-                            verticalAlign: "middle",
-                            color: theme.colors.primary
-                        }
-                    }), metric)
-            },
-            {
-                title: "MOST COMMON",
-                dataIndex: "mostCommon",
-                key: "mostCommon",
-                render: (v)=>/*#__PURE__*/ React__default.createElement(Tag, {
-                        style: {
-                            background: theme.colors.success,
-                            color: theme.colors.successForeground,
-                            border: "none"
-                        }
-                    }, v)
-            },
-            {
-                title: "LEAST COMMON",
-                dataIndex: "leastCommon",
-                key: "leastCommon",
-                render: (v)=>/*#__PURE__*/ React__default.createElement("span", {
-                        style: {
-                            color: theme.colors.mutedForeground
-                        }
-                    }, v)
-            },
-            {
-                title: "DISTRIBUTION",
-                key: "distribution",
-                render: (_, row)=>{
-                    const entries = Object.entries(row.counts).sort((a, b)=>b[1] - a[1]);
-                    return /*#__PURE__*/ React__default.createElement("span", {
-                        style: {
-                            fontSize: 12,
-                            color: theme.colors.mutedForeground
-                        }
-                    }, entries.map(([label, count])=>`${label}: ${count}`).join(" · "));
-                }
-            }
-        ];
-        return /*#__PURE__*/ React__default.createElement("div", {
-            style: {
-                width: "100%",
-                minWidth: 0,
-                overflow: "hidden"
-            }
-        }, /*#__PURE__*/ React__default.createElement("h3", {
-            style: {
-                margin: "0 0 16px",
-                fontSize: 16,
-                fontWeight: 600
-            }
-        }, resolvedTitle), /*#__PURE__*/ React__default.createElement(ForwardTable, {
-            dataSource: rows,
-            columns: columns,
-            rowKey: "key",
-            pagination: false,
-            size: "small",
-            style: {
-                width: "100%",
-                background: theme.colors.card,
-                border: `1px solid ${theme.colors.border}`
-            }
-        }));
+        return /*#__PURE__*/ React__default.createElement(JudgeAggregateView, {
+            metrics: dataSource,
+            onAgentNodeClick: onAgentNodeClick
+        });
     }
     // ToolUse (tree table)
     const toolRows = dataSource;
@@ -117877,7 +118406,7 @@ const EvaluatorResult = ({ evaluation, evaluatorId, backHref, onAgentNodeClick }
             minWidth: 0
         }
     }, /*#__PURE__*/ React__default.createElement(AggregateResultsTable, {
-        rawResults: rawResults.filter((r)=>isToolResult(r) || isToolAggregate(r)),
+        rawResults: rawResults,
         aggregateResults: aggregateResults,
         agents: evaluation.agents,
         evaluatorName: evaluatorName,
@@ -119736,6 +120265,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);
+          }
+        }
       `
     });
 };
@@ -119876,4 +120565,4 @@ const GlobalStyles = ()=>{
         return getSafeColor(props.theme, path, fallback);
     };
 
-export { AgenticFlowVisualizer, AnthropicIcon, AppleIcon, Badge, Drawer, Edge, EvaluationDetailsDrawer, EvaluationsCompareDrawer, EvaluationsComparePage, EvaluationsCompareView, EvaluationsErrorCard, EvaluationsTable, EvaluatorResult, GlobalStyles, GoogleIcon, JsonTreeViewer, Node$1 as Node, OllamaIcon, OpenAIIcon, SafeThemeProvider, SessionDetails, Sheet, ThemeProvider, Timeline, Visualizer, calculateAutoLayout, cn, conditionalStyle, createSafeTheme, darkTheme, defaultTheme$1 as defaultTheme, detectContentType, escapeDotPathSegment, evaluationsHaveSameMetrics, formatCurrency, formatDateFriendly, formatDateRelative, formatDateShort, formatDuration, formatJsonTreePrimitive, formatLatency, formatMetricValue$1 as formatMetricValue, formatNumberWithCommas, formatToolCalls, getColor, getDefaultTimelineStepForRun, getSafeColor, getSafeSpacing, getSafeThemeValue, getSpacing, getStatusColor, isEvaluationDto, isPlainObject, lightTheme, safeStyled, safeThemeColor, safeThemeSpacing, safeThemeValue, toTitleCase, transformEvaluation, truncateText, useComponentTheme, useSafeTheme, useTheme$1 as useTheme, useThemeValue };
+export { AgenticFlowVisualizer, AnthropicIcon, AppleIcon, Badge, Drawer, Edge, EvaluationDetailsDrawer, EvaluationsCompareDrawer, EvaluationsComparePage, EvaluationsCompareView, EvaluationsErrorCard, EvaluationsTable, EvaluatorResult, GlobalStyles, GoogleIcon, JsonTreeViewer, Node$1 as Node, OllamaIcon, OpenAIIcon, SafeThemeProvider, SessionDetails, Sheet, ThemeProvider, Timeline, Visualizer, calculateAutoLayout, cn, conditionalStyle, createSafeTheme, darkTheme, defaultTheme$1 as defaultTheme, detectContentType, escapeDotPathSegment, evaluationsHaveSameMetrics, formatCurrency, formatDateFriendly, formatDateRelative, formatDateShort, formatDuration, formatJsonTreePrimitive, formatLatency, formatMetricValue$1 as formatMetricValue, formatNumberWithCommas, formatToolCalls, getColor, getDefaultTimelineStepForRun, getSafeColor, getSafeSpacing, getSafeThemeValue, getSpacing, getStatusColor, isEvaluationDto, isPlainObject, lightTheme, liquidGlassDarkTheme, liquidGlassLightTheme, safeStyled, safeThemeColor, safeThemeSpacing, safeThemeValue, themeForMode, themeToMode, toTitleCase, transformEvaluation, truncateText, useComponentTheme, useSafeTheme, useTheme$1 as useTheme, useThemeValue };