@railtownai/railtracks-visualizer 0.0.67 → 0.0.68

package/dist/cjs/index.js

@@ -16050,6 +16050,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 +16242,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 */ }
     }, [
-        currentTheme
+        themeMode
+    ]);
+    React.useEffect(()=>{
+        if (propTheme) return;
+        try {
+            localStorage.setItem("theme", themeMode);
+        } catch  {
+        /* ignore */ }
+    }, [
+        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 +16370,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 +16392,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 +48797,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 +48871,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 +52236,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 +52248,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 +52260,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 +52268,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 +52278,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 +52290,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 +52351,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 +52361,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 +116528,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([]);
@@ -120096,6 +120285,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 +120639,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;

package/dist/esm/index.js

@@ -16030,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%)",
@@ -16091,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
@@ -16176,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;
@@ -16192,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;
@@ -48598,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)
@@ -48672,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}`
             }
         }
@@ -52037,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,
@@ -52050,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"
@@ -52062,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 {
@@ -52070,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 {
@@ -52080,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":
@@ -52092,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"
             };
     }
@@ -52153,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
@@ -52163,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
@@ -116330,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([]);
@@ -120076,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);
+          }
+        }
       `
     });
 };
@@ -120216,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 };

package/dist/types/hooks/useApi.d.ts

@@ -1,5 +1,6 @@
 import { AgentSession } from "../dto/AgentSession";
-export declare const API_BASE = "/api";
+import { API_BASE } from "../lib/apiBase";
+export { API_BASE };
 export interface JsonFile {
     name: string;
     size?: number;

package/dist/types/lib/ThemeProvider.d.ts

@@ -1,9 +1,20 @@
 import React, { ReactNode } from "react";
 import { Theme } from "./theme";
+export type ThemeMode = "light" | "dark" | "liquidGlassLight" | "liquidGlassDark";
+export declare function themeForMode(mode: ThemeMode): Theme;
+export declare function themeToMode(theme: Theme): ThemeMode;
 interface ThemeContextType {
     theme: Theme;
+    themeMode: ThemeMode;
     setTheme: (theme: Theme) => void;
+    setThemeMode: (mode: ThemeMode) => void;
+    /** True for classic dark or dark liquid glass (graphs, muted text). */
     isDarkMode: boolean;
+    /** True only for solid classic dark — heavy Ant Design chrome overrides. */
+    isClassicDarkTheme: boolean;
+    isLiquidGlass: boolean;
+    isLiquidGlassLight: boolean;
+    isLiquidGlassDark: boolean;
 }
 interface ThemeProviderProps {
     children: ReactNode;

package/dist/types/lib/apiBase.d.ts

@@ -0,0 +1 @@
+export declare const API_BASE: string;

package/dist/types/lib/theme.d.ts

@@ -92,5 +92,9 @@ export interface Theme {
     };
 }
 export declare const lightTheme: Theme;
+/** Light “Liquid Glass”–inspired palette (web approximation). */
+export declare const liquidGlassLightTheme: Theme;
+/** Dark “Liquid Glass”–inspired palette — translucent panels on a deep mesh-like base. */
+export declare const liquidGlassDarkTheme: Theme;
 export declare const darkTheme: Theme;
 export declare const defaultTheme: Theme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@railtownai/railtracks-visualizer",
-  "version": "0.0.67",
+  "version": "0.0.68",
   "license": "MIT",
   "author": "Railtown AI",
   "description": "A visualizer for Railtracks agentic flows",
@@ -71,7 +71,10 @@
     "storybook:preview": "npx http-server ./storybook-static",
     "test:ui": "vitest --ui",
     "test": "vitest run --silent",
-    "up": "ncu -u -x react -x react-dom -x @types/react -x @types/react-dom -x react-hotkeys-hook"
+    "up": "ncu -u -x react -x react-dom -x @types/react -x @types/react-dom -x react-hotkeys-hook",
+    "electron": "npm run electron:start",
+    "electron:dev": "cross-env ELECTRON_DEV=1 VITE_API_ORIGIN=http://localhost:3030 concurrently -k \"vite\" \"wait-on http://127.0.0.1:3001 && electron electron/main.js\"",
+    "electron:start": "cross-env VITE_API_ORIGIN=http://localhost:3030 npm run build:spa && electron electron/main.js"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "5.1.2",
@@ -92,7 +95,9 @@
     "@types/react-dom": "18.3.7",
     "@vitejs/plugin-react-swc": "4.3.0",
     "clsx": "2.1.1",
+    "concurrently": "9.2.1",
     "cross-env": "10.1.0",
+    "electron": "34.5.8",
     "gh-pages": "6.3.0",
     "jsdom": "29.0.2",
     "license-checker": "25.0.1",
@@ -104,7 +109,8 @@
     "typescript": "6.0.3",
     "uuid": "13.0.0",
     "vite": "8.0.8",
-    "vitest": "4.1.4"
+    "vitest": "4.1.4",
+    "wait-on": "8.0.5"
   },
   "prettier": {
     "singleQuote": false,