@datarecce/ui 0.1.12 → 0.1.14

package/dist/hooks.mjs

@@ -1,12 +1,12 @@
 import { QueryClient, useQuery, useQueryClient } from '@tanstack/react-query';
 import axios from 'axios';
+import React12, { createContext, forwardRef, useRef, useImperativeHandle, useMemo, useState, Fragment as Fragment$1, useContext, useCallback, useEffect } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import '@mui/material/Alert';
 import '@mui/material/CircularProgress';
 import '@mui/material/Snackbar';
 import Stack5 from '@mui/material/Stack';
 import Typography9 from '@mui/material/Typography';
-import React11, { createContext, forwardRef, useRef, useImperativeHandle, useMemo, useState, Fragment as Fragment$1, useContext, useCallback, useEffect } from 'react';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import Box21 from '@mui/material/Box';
 import Button2 from '@mui/material/Button';
 import MuiDialog2 from '@mui/material/Dialog';
@@ -31,6 +31,7 @@ import FormControl from '@mui/material/FormControl';
 import FormLabel from '@mui/material/FormLabel';
 import NativeSelect from '@mui/material/NativeSelect';
 import _3 from 'lodash';
+import { createTheme, useTheme } from '@mui/material/styles';
 import { Chart, BarElement, TimeSeriesScale, LinearScale, CategoryScale, Title, Legend, Tooltip } from 'chart.js';
 import { Chart as Chart$1, Bar } from 'react-chartjs-2';
 import '@jeromefitz/date-fns-tz';
@@ -45,12 +46,11 @@ import { VscKey, VscClose, VscPinned, VscPin, VscKebabVertical } from 'react-ico
 import { PiWarning, PiCopy, PiDotsThreeVertical } from 'react-icons/pi';
 import Tooltip2 from '@mui/material/Tooltip';
 import { useCopyToClipboard } from 'usehooks-ts';
-import { createTheme } from '@mui/material/styles';
-import './style-LYNBK7ND.css';
+import './style-466WWZLM.css';
 import ListSubheader2 from '@mui/material/ListSubheader';
 import { themeQuartz, ModuleRegistry, AllCommunityModule } from 'ag-grid-community';
 import { AgGridReact } from 'ag-grid-react';
-import './agGridStyles-L5J6VVIU.css';
+import './agGridStyles-VYALGSJU.css';
 import ButtonGroup from '@mui/material/ButtonGroup';
 import Divider from '@mui/material/Divider';
 
@@ -82,17 +82,29 @@ var axiosClient = axios.create({
 new QueryClient();
 
 // recce-source/js/src/lib/api/instanceInfo.ts
-async function getRecceInstanceInfo() {
-  return (await axiosClient.get(
+async function getRecceInstanceInfo(client = axiosClient) {
+  return (await client.get(
     "/api/instance-info"
   )).data;
 }
+var ApiConfigContext = createContext(null);
+var defaultApiConfigContext = {
+  apiPrefix: "",
+  authToken: void 0,
+  baseUrl: void 0,
+  apiClient: axios.create({ baseURL: PUBLIC_API_URL })
+};
+function useApiConfig() {
+  const context = useContext(ApiConfigContext);
+  return context ?? defaultApiConfigContext;
+}
 
 // recce-source/js/src/lib/hooks/useRecceInstanceInfo.tsx
 var useRecceInstanceInfo = () => {
+  const { apiClient } = useApiConfig();
   return useQuery({
     queryKey: cacheKeys.instanceInfo(),
-    queryFn: getRecceInstanceInfo
+    queryFn: () => getRecceInstanceInfo(apiClient)
   });
 };
 createContext(null);
@@ -625,19 +637,19 @@ function RecceInstanceInfoProvider({
 var useRecceInstanceContext = () => useContext(InstanceInfo);
 
 // recce-source/js/src/lib/api/flag.ts
-async function getServerFlag() {
-  return (await axiosClient.get("/api/flag")).data;
+async function getServerFlag(client = axiosClient) {
+  return (await client.get("/api/flag")).data;
 }
-async function markRelaunchHintCompleted() {
+async function markRelaunchHintCompleted(client = axiosClient) {
   try {
-    await axiosClient.post(
+    await client.post(
       "/api/relaunch-hint/completed"
     );
   } catch (_error) {
   }
 }
-async function getServerInfo() {
-  return (await axiosClient.get(`/api/info`)).data;
+async function getServerInfo(client = axiosClient) {
+  return (await client.get(`/api/info`)).data;
 }
 async function getModelInfo(model) {
   return (await axiosClient.get(
@@ -699,8 +711,11 @@ async function searchRuns(type, params, limit) {
   );
   return response.data;
 }
-async function aggregateRuns() {
-  const response = await axiosClient.post(`/api/runs/aggregate`, {});
+async function aggregateRuns(client = axiosClient) {
+  const response = await client.post(
+    `/api/runs/aggregate`,
+    {}
+  );
   return response.data;
 }
 
@@ -944,9 +959,10 @@ function useIdleTimeoutSafe() {
   return useContext(IdleTimeoutContext) ?? null;
 }
 var useRecceServerFlag = () => {
+  const { apiClient } = useApiConfig();
   return useQuery({
     queryKey: cacheKeys.flag(),
-    queryFn: getServerFlag
+    queryFn: () => getServerFlag(apiClient)
   });
 };
 var defaultLineageGraphsContext = {
@@ -954,14 +970,20 @@ var defaultLineageGraphsContext = {
   isDemoSite: false
 };
 var LineageGraphContext = createContext(defaultLineageGraphsContext);
-function useLineageWatcher() {
+function useLineageWatcher({
+  enabled = true,
+  baseUrl,
+  apiPrefix
+} = {}) {
   const [artifactsUpdatedToastId, setArtifactsUpdatedToastId] = useState(void 0);
   const ref = useRef({
     ws: void 0,
     status: "pending",
     artifactsUpdatedToastId: void 0
   });
-  const [status, setStatus] = useState("pending");
+  const [status, setStatus] = useState(
+    enabled ? "pending" : "connected"
+  );
   const [envStatus, setEnvStatus] = useState(void 0);
   useEffect(() => {
     ref.current.status = status;
@@ -979,7 +1001,11 @@ function useLineageWatcher() {
     function httpUrlToWebSocketUrl(url) {
       return url.replace(/(http)(s)?:\/\//, "ws$2://");
     }
-    const ws = new WebSocket(`${httpUrlToWebSocketUrl(PUBLIC_API_URL)}/api/ws`);
+    const effectiveBaseUrl = baseUrl ?? PUBLIC_API_URL;
+    const wsPath = apiPrefix ? `${apiPrefix}/ws` : "/api/ws";
+    const ws = new WebSocket(
+      `${httpUrlToWebSocketUrl(effectiveBaseUrl)}${wsPath}`
+    );
     ref.current.ws = ws;
     ws.onopen = () => {
       ws.send("ping");
@@ -1042,8 +1068,11 @@ function useLineageWatcher() {
       });
       ref.current.ws = void 0;
     };
-  }, [invalidateCaches]);
+  }, [invalidateCaches, baseUrl, apiPrefix]);
   useEffect(() => {
+    if (!enabled) {
+      return;
+    }
     const refObj = ref.current;
     connect();
     return () => {
@@ -1051,7 +1080,7 @@ function useLineageWatcher() {
         refObj.ws.close();
       }
     };
-  }, [connect]);
+  }, [connect, enabled]);
   return {
     connectionStatus: status,
     connect,
@@ -1066,13 +1095,14 @@ function LineageGraphContextProvider({ children }) {
     setDisconnected,
     resetConnection
   } = useIdleTimeout();
+  const { apiClient, apiPrefix, baseUrl } = useApiConfig();
   const queryServerInfo = useQuery({
     queryKey: cacheKeys.lineage(),
-    queryFn: getServerInfo
+    queryFn: () => getServerInfo(apiClient)
   });
   const queryRunAggregated = useQuery({
     queryKey: cacheKeys.runsAggregated(),
-    queryFn: aggregateRuns
+    queryFn: () => aggregateRuns(apiClient)
   });
   const lineageGraph = useMemo(() => {
     const lineage2 = queryServerInfo.data?.lineage;
@@ -1112,7 +1142,11 @@ function LineageGraphContextProvider({ children }) {
     },
     sqlmesh
   };
-  const { connectionStatus, connect, envStatus } = useLineageWatcher();
+  const { connectionStatus, connect, envStatus } = useLineageWatcher({
+    enabled: true,
+    baseUrl,
+    apiPrefix
+  });
   useEffect(() => {
     if (connectionStatus === "disconnected") {
       setDisconnected();
@@ -1381,8 +1415,9 @@ var RunModal = ({
             sx: {
               p: 0,
               overflow: "auto",
-              borderTop: "1px solid lightgray",
-              borderBottom: "1px solid lightgray"
+              borderTop: "1px solid",
+              borderBottom: "1px solid",
+              borderColor: "divider"
             },
             children: /* @__PURE__ */ jsx(Box21, { sx: { contain: "layout" }, children: RunForm && /* @__PURE__ */ jsx(
               RunForm,
@@ -1680,10 +1715,56 @@ function formatAsAbbreviatedNumber(input) {
       }).format(input);
   }
 }
+
+// recce-source/js/src/components/charts/chartTheme.ts
+function getChartThemeColors(isDark) {
+  return {
+    gridColor: isDark ? "#4b5563" : "#d1d5db",
+    textColor: isDark ? "#e5e7eb" : "#374151",
+    borderColor: isDark ? "#6b7280" : "#9ca3af",
+    tooltipBackgroundColor: isDark ? "#1f2937" : "#ffffff",
+    tooltipTextColor: isDark ? "#e5e7eb" : "#111827"
+  };
+}
+function getThemedPluginOptions(isDark) {
+  const colors2 = getChartThemeColors(isDark);
+  return {
+    legend: {
+      labels: {
+        color: colors2.textColor
+      }
+    },
+    title: {
+      color: colors2.textColor
+    },
+    tooltip: {
+      backgroundColor: colors2.tooltipBackgroundColor,
+      titleColor: colors2.tooltipTextColor,
+      bodyColor: colors2.tooltipTextColor,
+      borderColor: colors2.borderColor,
+      borderWidth: 1
+    }
+  };
+}
 var CURRENT_BAR_COLOR = "#63B3ED";
 var BASE_BAR_COLOR = "#F6AD55";
 var CURRENT_BAR_COLOR_WITH_ALPHA = `${CURRENT_BAR_COLOR}A5`;
 var BASE_BAR_COLOR_WITH_ALPHA = `${BASE_BAR_COLOR}A5`;
+var CURRENT_BAR_COLOR_DARK = "#90CDF4";
+var BASE_BAR_COLOR_DARK = "#FBD38D";
+var CURRENT_BAR_COLOR_DARK_WITH_ALPHA = `${CURRENT_BAR_COLOR_DARK}A5`;
+var BASE_BAR_COLOR_DARK_WITH_ALPHA = `${BASE_BAR_COLOR_DARK}A5`;
+var INFO_VAL_COLOR = "#63B3ED";
+var INFO_VAL_COLOR_DARK = "#90CDF4";
+function getBarColors(isDark) {
+  return {
+    current: isDark ? CURRENT_BAR_COLOR_DARK : CURRENT_BAR_COLOR,
+    base: isDark ? BASE_BAR_COLOR_DARK : BASE_BAR_COLOR,
+    currentWithAlpha: isDark ? CURRENT_BAR_COLOR_DARK_WITH_ALPHA : CURRENT_BAR_COLOR_WITH_ALPHA,
+    baseWithAlpha: isDark ? BASE_BAR_COLOR_DARK_WITH_ALPHA : BASE_BAR_COLOR_WITH_ALPHA,
+    info: isDark ? INFO_VAL_COLOR_DARK : INFO_VAL_COLOR
+  };
+}
 function SquareIcon({ color }) {
   return /* @__PURE__ */ jsx(
     Box21,
@@ -1707,6 +1788,8 @@ function HistogramChart({
   hideAxis = false,
   animation = false
 }) {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
   Chart.register(
     BarElement,
     TimeSeriesScale,
@@ -1716,8 +1799,10 @@ function HistogramChart({
     Legend,
     Tooltip
   );
-  const chartOptions = getHistogramChartOptions(data, hideAxis, { animation });
-  const chartData = getHistogramChartData(data);
+  const chartOptions = getHistogramChartOptions(data, hideAxis, isDark, {
+    animation
+  });
+  const chartData = getHistogramChartData(data, isDark);
   return /* @__PURE__ */ jsx(Chart$1, { type: "bar", options: chartOptions, data: chartData, plugins: [] });
 }
 function getHistogramChartDataset(type, binEdges, label, color, data) {
@@ -1738,53 +1823,65 @@ function getHistogramChartDataset(type, binEdges, label, color, data) {
     xAxisID: "x"
   };
 }
-function getHistogramChartData(data) {
+function getHistogramChartData(data, isDark = false) {
   const { datasets, type, binEdges } = data;
   const [base, current] = datasets;
+  const barColors = getBarColors(isDark);
   const currentDataset = getHistogramChartDataset(
     type,
     binEdges,
     "Current",
-    CURRENT_BAR_COLOR_WITH_ALPHA,
+    barColors.currentWithAlpha,
     current
   );
   const baseDataset = getHistogramChartDataset(
     type,
     binEdges,
     "Base",
-    BASE_BAR_COLOR_WITH_ALPHA,
+    barColors.baseWithAlpha,
     base
   );
-  const newLabels = binEdges.map((v, i) => formatDisplayedBinItem(binEdges, i)).slice(0, -1);
+  const newLabels = binEdges.map((_v, i) => formatDisplayedBinItem(binEdges, i)).slice(0, -1);
   return {
     labels: newLabels,
     datasets: [currentDataset, baseDataset]
   };
 }
-function getHistogramChartOptions(data, hideAxis = false, { ...configOverrides } = {}) {
+function getHistogramChartOptions(data, hideAxis = false, isDark = false, { ...configOverrides } = {}) {
   const { title, datasets, type, samples = 0, binEdges } = data;
   const [base, current] = datasets;
   const isDatetime = type === "datetime";
+  const themeColors = getChartThemeColors(isDark);
+  const themedPlugins = getThemedPluginOptions(isDark);
   return {
     responsive: true,
     maintainAspectRatio: false,
     plugins: {
       legend: {
-        reverse: true
+        reverse: true,
+        labels: {
+          color: themeColors.textColor
+        }
       },
       title: {
         display: true,
         text: title,
         font: {
           size: 20
-        }
+        },
+        color: themeColors.textColor
       },
       tooltip: {
         mode: "index",
         // position: 'nearest',
         intersect: false,
+        backgroundColor: themedPlugins.tooltip.backgroundColor,
+        titleColor: themedPlugins.tooltip.titleColor,
+        bodyColor: themedPlugins.tooltip.bodyColor,
+        borderColor: themedPlugins.tooltip.borderColor,
+        borderWidth: themedPlugins.tooltip.borderWidth,
         callbacks: {
-          title([{ dataIndex, datasetIndex }]) {
+          title([{ dataIndex }]) {
             const result = formatDisplayedBinItem(binEdges, dataIndex);
             const prefix = isDatetime ? DATE_RANGE : type === "string" ? TEXTLENGTH : VALUE_RANGE;
             return `${prefix}
@@ -1801,15 +1898,16 @@ ${result}`;
         }
       }
     },
-    scales: getScales(data, hideAxis),
+    scales: getScales(data, hideAxis, isDark),
     ...configOverrides
   };
 }
-function getScales({ datasets, min = 0, max = 0, type, binEdges }, hideAxis = false) {
+function getScales({ datasets, min = 0, max = 0, type, binEdges }, hideAxis = false, isDark = false) {
   const isDatetime = type === "datetime";
   const [base, current] = datasets;
   const maxCount = Math.max(...current.counts, ...base.counts);
-  const newLabels = binEdges.map((v, i) => formatDisplayedBinItem(binEdges, i)).slice(0, -1);
+  const themeColors = getChartThemeColors(isDark);
+  const newLabels = binEdges.map((_v, i) => formatDisplayedBinItem(binEdges, i)).slice(0, -1);
   const xScaleDate = {
     display: !hideAxis,
     type: "timeseries",
@@ -1826,7 +1924,8 @@ function getScales({ datasets, min = 0, max = 0, type, binEdges }, hideAxis = fa
     ticks: {
       minRotation: 30,
       maxRotation: 30,
-      maxTicksLimit: 8
+      maxTicksLimit: 8,
+      color: themeColors.textColor
     }
   };
   const xScaleCategory = {
@@ -1835,9 +1934,10 @@ function getScales({ datasets, min = 0, max = 0, type, binEdges }, hideAxis = fa
     //Linear doesn't understand bins!
     grid: { display: false },
     ticks: {
-      callback(val, index) {
+      callback(_val, index) {
         return newLabels[index];
-      }
+      },
+      color: themeColors.textColor
     },
     stacked: true
   };
@@ -1847,12 +1947,13 @@ function getScales({ datasets, min = 0, max = 0, type, binEdges }, hideAxis = fa
     type: "linear",
     max: maxCount,
     //NOTE: do not add `min` since if they are equal nothing gets displayed sometimes
-    border: { dash: [2, 2] },
+    border: { dash: [2, 2], color: themeColors.borderColor },
     grid: {
-      color: "lightgray"
+      color: themeColors.gridColor
     },
     ticks: {
       maxTicksLimit: 8,
+      color: themeColors.textColor,
       callback: function(val) {
         return formatAsAbbreviatedNumber(val);
       }
@@ -1897,6 +1998,8 @@ var ScreenshotBox = forwardRef(
   }
 );
 function _HistogramDiffResultView({ run }, ref) {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
   if (!isHistogramDiffRun(run)) {
     throw new Error("Run type must be histogram_diff");
   }
@@ -1909,24 +2012,32 @@ function _HistogramDiffResultView({ run }, ref) {
   if (!base || !current) {
     return /* @__PURE__ */ jsx("div", { children: "Loading..." });
   }
-  return /* @__PURE__ */ jsx(Box21, { sx: { display: "flex", flexDirection: "column", height: "100%" }, children: /* @__PURE__ */ jsx(ScreenshotBox, { ref, height: "100%", children: /* @__PURE__ */ jsxs(Box21, { sx: { display: "flex", flexDirection: "row" }, children: [
-    /* @__PURE__ */ jsx(Box21, { sx: { flex: 1 } }),
-    /* @__PURE__ */ jsx(Box21, { sx: { width: "80%", height: "35vh", m: 4 }, children: /* @__PURE__ */ jsx(
-      HistogramChart,
-      {
-        data: {
-          title: `Model ${params.model}.${params.column_name}`,
-          type: run.params?.column_type ?? "",
-          datasets: [base, current],
-          min,
-          max,
-          samples: base.total,
-          binEdges
-        }
-      }
-    ) }),
-    /* @__PURE__ */ jsx(Box21, { sx: { flex: 1 } })
-  ] }) }) });
+  return /* @__PURE__ */ jsx(Box21, { sx: { display: "flex", flexDirection: "column", height: "100%" }, children: /* @__PURE__ */ jsx(
+    ScreenshotBox,
+    {
+      ref,
+      height: "100%",
+      backgroundColor: isDark ? "#1f2937" : "white",
+      children: /* @__PURE__ */ jsxs(Box21, { sx: { display: "flex", flexDirection: "row" }, children: [
+        /* @__PURE__ */ jsx(Box21, { sx: { flex: 1 } }),
+        /* @__PURE__ */ jsx(Box21, { sx: { width: "80%", height: "35vh", m: 4 }, children: /* @__PURE__ */ jsx(
+          HistogramChart,
+          {
+            data: {
+              title: `Model ${params.model}.${params.column_name}`,
+              type: run.params?.column_type ?? "",
+              datasets: [base, current],
+              min,
+              max,
+              samples: base.total,
+              binEdges
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Box21, { sx: { flex: 1 } })
+      ] })
+    }
+  ) });
 }
 var HistogramDiffResultView = forwardRef(_HistogramDiffResultView);
 function ProfileDiffForm({
@@ -2651,8 +2762,8 @@ function getHeaderCellClass(columnStatus) {
 }
 var defaultRenderCell = (params) => {
   const colDef = params.colDef;
-  const columnType = colDef?.columnType;
-  const columnRenderMode = colDef?.columnRenderMode;
+  const columnType = colDef?.context?.columnType;
+  const columnRenderMode = colDef?.context?.columnRenderMode;
   const fieldName = colDef?.field ?? "";
   if (!params.data) {
     return null;
@@ -2882,35 +2993,8 @@ var buttonColorVariants = [
   ...createButtonColorVariants("red", colors.red),
   ...createButtonColorVariants("rose", colors.rose),
   ...createButtonColorVariants("fuchsia", colors.fuchsia),
-  ...createButtonColorVariants("brand", colors.brand),
-  // Neutral uses darker shades for better visibility
-  {
-    props: { color: "neutral", variant: "contained" },
-    style: {
-      backgroundColor: colors.neutral[700],
-      color: "#FFFFFF",
-      "&:hover": { backgroundColor: colors.neutral[800] }
-    }
-  },
-  {
-    props: { color: "neutral", variant: "outlined" },
-    style: {
-      borderColor: colors.neutral[300],
-      // Lighter border (neutral.light)
-      color: colors.neutral[900],
-      "&:hover": {
-        borderColor: colors.neutral[400],
-        backgroundColor: colors.neutral[100]
-      }
-    }
-  },
-  {
-    props: { color: "neutral", variant: "text" },
-    style: {
-      color: colors.neutral[700],
-      "&:hover": { backgroundColor: colors.neutral[100] }
-    }
-  }
+  ...createButtonColorVariants("brand", colors.brand)
+  // Neutral variants are handled via styleOverrides for theme-awareness
 ];
 var progressColorVariants = [
   createProgressColorVariant("iochmara", colors.iochmara),
@@ -2970,11 +3054,31 @@ var componentOverrides = {
       ...buttonColorVariants
     ],
     styleOverrides: {
-      root: {
+      root: ({ theme, ownerState }) => ({
         textTransform: "none",
         fontWeight: 500,
-        borderRadius: 6
-      },
+        borderRadius: 6,
+        // Theme-aware neutral button colors
+        ...ownerState.color === "neutral" && ownerState.variant === "contained" && {
+          backgroundColor: colors.neutral[700],
+          color: "#FFFFFF",
+          "&:hover": { backgroundColor: colors.neutral[800] }
+        },
+        ...ownerState.color === "neutral" && ownerState.variant === "outlined" && {
+          borderColor: theme.palette.mode === "dark" ? colors.neutral[500] : colors.neutral[300],
+          color: theme.palette.mode === "dark" ? colors.neutral[100] : colors.neutral[900],
+          "&:hover": {
+            borderColor: theme.palette.mode === "dark" ? colors.neutral[400] : colors.neutral[400],
+            backgroundColor: theme.palette.mode === "dark" ? colors.neutral[700] : colors.neutral[100]
+          }
+        },
+        ...ownerState.color === "neutral" && ownerState.variant === "text" && {
+          color: theme.palette.mode === "dark" ? colors.neutral[200] : colors.neutral[700],
+          "&:hover": {
+            backgroundColor: theme.palette.mode === "dark" ? colors.neutral[700] : colors.neutral[100]
+          }
+        }
+      }),
       sizeSmall: {
         padding: "0.25rem 0.75rem",
         fontSize: "0.875rem"
@@ -3001,11 +3105,11 @@ var componentOverrides = {
         }
       },
       // Text variant (ghost in Chakra)
-      text: {
+      text: ({ theme }) => ({
         "&:hover": {
-          backgroundColor: "rgba(0, 0, 0, 0.04)"
+          backgroundColor: theme.palette.mode === "dark" ? "rgba(255, 255, 255, 0.08)" : "rgba(0, 0, 0, 0.04)"
         }
-      }
+      })
     }
   },
   // IconButton overrides
@@ -3052,9 +3156,9 @@ var componentOverrides = {
           borderWidth: 2
         }
       },
-      notchedOutline: {
-        borderColor: colors.neutral[300]
-      }
+      notchedOutline: ({ theme }) => ({
+        borderColor: theme.palette.mode === "dark" ? colors.neutral[600] : colors.neutral[300]
+      })
     }
   },
   // Checkbox overrides
@@ -3101,19 +3205,19 @@ var componentOverrides = {
   },
   MuiMenuItem: {
     styleOverrides: {
-      root: {
+      root: ({ theme }) => ({
         fontSize: "0.875rem",
         padding: "0.5rem 0.75rem",
         "&:hover": {
-          backgroundColor: colors.neutral[100]
+          backgroundColor: theme.palette.mode === "dark" ? colors.neutral[600] : colors.neutral[100]
         },
         "&.Mui-selected": {
-          backgroundColor: colors.iochmara[50],
+          backgroundColor: theme.palette.mode === "dark" ? colors.iochmara[900] : colors.iochmara[50],
           "&:hover": {
-            backgroundColor: colors.iochmara[100]
+            backgroundColor: theme.palette.mode === "dark" ? colors.iochmara[800] : colors.iochmara[100]
           }
         }
-      }
+      })
     }
   },
   // Chip overrides (Tag in Chakra)
@@ -3148,15 +3252,15 @@ var componentOverrides = {
   // Tooltip overrides
   MuiTooltip: {
     styleOverrides: {
-      tooltip: {
-        backgroundColor: colors.neutral[800],
+      tooltip: ({ theme }) => ({
+        backgroundColor: theme.palette.mode === "dark" ? colors.neutral[700] : colors.neutral[800],
         fontSize: "0.75rem",
         padding: "0.25rem 0.5rem",
         borderRadius: 4
-      },
-      arrow: {
-        color: colors.neutral[800]
-      }
+      }),
+      arrow: ({ theme }) => ({
+        color: theme.palette.mode === "dark" ? colors.neutral[700] : colors.neutral[800]
+      })
     }
   },
   // Alert overrides
@@ -3165,22 +3269,22 @@ var componentOverrides = {
       root: {
         borderRadius: 6
       },
-      standardSuccess: {
-        backgroundColor: colors.green[50],
-        color: colors.green[800]
-      },
-      standardWarning: {
-        backgroundColor: colors.amber[50],
-        color: colors.amber[800]
-      },
-      standardError: {
-        backgroundColor: colors.red[50],
-        color: colors.red[800]
-      },
-      standardInfo: {
-        backgroundColor: colors.iochmara[50],
-        color: colors.iochmara[800]
-      }
+      standardSuccess: ({ theme }) => ({
+        backgroundColor: theme.palette.mode === "dark" ? colors.green[900] : colors.green[50],
+        color: theme.palette.mode === "dark" ? colors.green[200] : colors.green[800]
+      }),
+      standardWarning: ({ theme }) => ({
+        backgroundColor: theme.palette.mode === "dark" ? colors.amber[900] : colors.amber[50],
+        color: theme.palette.mode === "dark" ? colors.amber[200] : colors.amber[800]
+      }),
+      standardError: ({ theme }) => ({
+        backgroundColor: theme.palette.mode === "dark" ? colors.red[900] : colors.red[50],
+        color: theme.palette.mode === "dark" ? colors.red[200] : colors.red[800]
+      }),
+      standardInfo: ({ theme }) => ({
+        backgroundColor: theme.palette.mode === "dark" ? colors.iochmara[900] : colors.iochmara[50],
+        color: theme.palette.mode === "dark" ? colors.iochmara[200] : colors.iochmara[800]
+      })
     }
   },
   // Tabs overrides
@@ -3261,17 +3365,17 @@ var componentOverrides = {
   // Divider overrides
   MuiDivider: {
     styleOverrides: {
-      root: {
-        borderColor: colors.neutral[200]
-      }
+      root: ({ theme }) => ({
+        borderColor: theme.palette.mode === "dark" ? colors.neutral[700] : colors.neutral[200]
+      })
     }
   },
   // Breadcrumbs overrides
   MuiBreadcrumbs: {
     styleOverrides: {
-      separator: {
-        color: colors.neutral[400]
-      }
+      separator: ({ theme }) => ({
+        color: theme.palette.mode === "dark" ? colors.neutral[500] : colors.neutral[400]
+      })
     }
   }
 };
@@ -3511,39 +3615,38 @@ function CopyControl({
   grayOut,
   isHovered
 }) {
-  const [copiedText, copyToClipboard] = useCopyToClipboard();
-  const hasCopiedText = Boolean(copiedText);
-  if (noCopy || grayOut) {
+  const [, copyToClipboard] = useCopyToClipboard();
+  const { successToast } = useClipBoardToast();
+  if (noCopy || grayOut || !isHovered) {
     return /* @__PURE__ */ jsx(Fragment, {});
   }
-  if (hasCopiedText) {
-    return /* @__PURE__ */ jsx(Fragment, { children: "Copied" });
-  }
-  if (!isHovered) {
-    return /* @__PURE__ */ jsx(Fragment, {});
-  }
-  return /* @__PURE__ */ jsx(
+  const handleCopy = () => {
+    copyToClipboard(value);
+    successToast(`${value} copied`);
+  };
+  return /* @__PURE__ */ jsx(Tooltip2, { title: "Copy Value", children: /* @__PURE__ */ jsx(
     IconButton3,
     {
       "aria-label": "Copy",
       size: "small",
-      onClick: () => copyToClipboard(value),
+      onClick: handleCopy,
       sx: {
-        minWidth: "10px",
-        height: "10px",
+        minWidth: "0.625rem",
+        height: "0.625rem",
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
-        p: 0
+        p: 0,
+        color: "inherit"
       },
-      children: /* @__PURE__ */ jsx(PiCopy, { size: "10px" })
+      children: /* @__PURE__ */ jsx(PiCopy, { size: "0.625rem" })
     }
-  );
+  ) });
 }
 var inlineRenderCell = (params) => {
   const colDef = params.colDef;
-  const columnType = colDef?.columnType;
-  const columnRenderMode = colDef?.columnRenderMode;
+  const columnType = colDef?.context?.columnType;
+  const columnRenderMode = colDef?.context?.columnRenderMode;
   const columnKey = colDef?.field ?? "";
   if (!params.data) {
     return null;
@@ -3728,8 +3831,7 @@ function toDiffColumn(config) {
       headerClass: headerCellClass,
       headerComponent,
       cellRenderer: inlineRenderCell,
-      columnType,
-      columnRenderMode
+      context: { columnType, columnRenderMode }
     };
   }
   const cellClassBase = createCellClassBase(name, columnStatus);
@@ -3738,8 +3840,7 @@ function toDiffColumn(config) {
     headerName: name,
     headerClass: headerCellClass,
     headerGroupComponent: headerComponent,
-    columnType,
-    columnRenderMode,
+    context: { columnType, columnRenderMode },
     children: [
       {
         field: `base__${name}`,
@@ -3747,8 +3848,7 @@ function toDiffColumn(config) {
         headerClass: headerCellClass,
         cellClass: cellClassBase,
         cellRenderer: defaultRenderCell,
-        columnType,
-        columnRenderMode
+        context: { columnType, columnRenderMode }
       },
       {
         field: `current__${name}`,
@@ -3756,8 +3856,7 @@ function toDiffColumn(config) {
         headerClass: headerCellClass,
         cellClass: cellClassCurrent,
         cellRenderer: defaultRenderCell,
-        columnType,
-        columnRenderMode
+        context: { columnType, columnRenderMode }
       }
     ]
   };
@@ -3795,8 +3894,7 @@ function createPrimaryKeyColumn(config, headerProps) {
       return void 0;
     },
     cellRenderer: defaultRenderCell,
-    columnType,
-    columnRenderMode
+    context: { columnType, columnRenderMode }
   };
 }
 function createDiffColumn(config, displayMode, headerProps, baseTitle, currentTitle) {
@@ -3985,8 +4083,7 @@ function createPrimaryKeyColumn2(config, headerProps) {
     ),
     pinned: "left",
     cellRenderer: defaultRenderCell,
-    columnType,
-    columnRenderMode
+    context: { columnType, columnRenderMode }
   };
 }
 function createRegularColumn(config, headerProps) {
@@ -4005,8 +4102,7 @@ function createRegularColumn(config, headerProps) {
       }
     ),
     cellRenderer: defaultRenderCell,
-    columnType,
-    columnRenderMode
+    context: { columnType, columnRenderMode }
   };
 }
 function buildSimpleColumnDefinitions(config) {
@@ -4515,7 +4611,7 @@ function renderIndexCell(params) {
   const value = isRemoved ? baseIndex !== void 0 ? baseIndex : "-" : currentIndex !== void 0 ? currentIndex : "-";
   return /* @__PURE__ */ jsx("span", { children: value });
 }
-var MemoizedRenderIndexCell = React11.memo(renderIndexCell);
+var MemoizedRenderIndexCell = React12.memo(renderIndexCell);
 MemoizedRenderIndexCell.displayName = "MemoizedRenderIndexCell";
 function renderTypeCell(params) {
   if (!params.data) {
@@ -4548,7 +4644,7 @@ function renderTypeCell(params) {
   }
   return /* @__PURE__ */ jsx("span", { children: isRemoved ? baseType : currentType });
 }
-var MemoizedRenderTypeCell = React11.memo(renderTypeCell);
+var MemoizedRenderTypeCell = React12.memo(renderTypeCell);
 MemoizedRenderTypeCell.displayName = "MemoizedRenderTypeCell";
 function PrimaryKeyIndicatorCell({
   columnName,
@@ -4970,7 +5066,7 @@ var recceGridThemeLight = themeQuartz.withParams({
   headerFontWeight: 700,
   cellHorizontalPadding: 8
 });
-themeQuartz.withParams({
+var recceGridThemeDark = themeQuartz.withParams({
   backgroundColor: "#1e1e1e",
   headerBackgroundColor: "#252526",
   rowHoverColor: "#1e1e1e",
@@ -5026,7 +5122,11 @@ function _ScreenshotDataGrid({
     }),
     []
   );
-  const theme = useMemo(() => recceGridThemeLight, []);
+  const muiTheme = useTheme();
+  const gridTheme = useMemo(
+    () => muiTheme.palette.mode === "dark" ? recceGridThemeDark : recceGridThemeLight,
+    [muiTheme.palette.mode]
+  );
   const resolvedColumnDefs = columnDefs ?? columns;
   const resolvedRowData = rowData ?? rows;
   const resolvedDefaultColDef = defaultColDef ?? defaultColumnOptions;
@@ -5088,18 +5188,18 @@ function _ScreenshotDataGrid({
         "& .ag-header-cell": {
           borderRight: "1px solid var(--ag-border-color)"
         },
-        // Diff cell styling
+        // Diff cell styling - theme-aware colors
         "& .diff-cell-added": {
-          backgroundColor: "#cefece !important",
-          color: "black"
+          backgroundColor: muiTheme.palette.mode === "dark" ? "#1a4d1a !important" : "#cefece !important",
+          color: muiTheme.palette.text.primary
         },
         "& .diff-cell-removed": {
-          backgroundColor: "#ffc5c5 !important",
-          color: "black"
+          backgroundColor: muiTheme.palette.mode === "dark" ? "#5c1f1f !important" : "#ffc5c5 !important",
+          color: muiTheme.palette.text.primary
         },
         "& .diff-cell-modified": {
-          backgroundColor: "#ffc5c5 !important",
-          color: "black"
+          backgroundColor: muiTheme.palette.mode === "dark" ? "#5c1f1f !important" : "#ffc5c5 !important",
+          color: muiTheme.palette.text.primary
         },
         // Diff header styling
         "& .diff-header-added": {
@@ -5112,18 +5212,18 @@ function _ScreenshotDataGrid({
         },
         // Index column styling
         "& .index-column": {
-          color: "rgb(128, 128, 128)",
+          color: muiTheme.palette.text.secondary,
           textAlign: "right"
         },
         // Frozen/pinned column styling
         "& .ag-pinned-left-cols-container .ag-cell": {
-          backgroundColor: "#f5f5f5"
+          backgroundColor: muiTheme.palette.mode === "dark" ? "#2d2d2d" : "#f5f5f5"
         }
       },
       children: /* @__PURE__ */ jsx(
         AgGridReact,
         {
-          theme,
+          theme: gridTheme,
           columnDefs: resolvedColumnDefs,
           rowData: resolvedRowData,
           getRowId: resolvedGetRowId,
@@ -5225,17 +5325,22 @@ var RunToolbar = ({
   warnings,
   children
 }) => {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
+  const hasWarnings = warnings && warnings.length > 0;
   return /* @__PURE__ */ jsxs(
     Box21,
     {
       sx: {
         display: "flex",
-        borderBottom: "1px solid lightgray",
+        borderBottom: "1px solid",
+        borderColor: "divider",
         justifyContent: "flex-end",
         gap: "5px",
         alignItems: "center",
         px: "10px",
-        bgcolor: warnings && warnings.length > 0 ? "amber.100" : "inherit"
+        bgcolor: hasWarnings ? isDark ? colors.amber[900] : colors.amber[100] : "inherit",
+        color: hasWarnings ? isDark ? colors.amber[200] : colors.amber[800] : "inherit"
       },
       children: [
         /* @__PURE__ */ jsx(
@@ -5248,8 +5353,13 @@ var RunToolbar = ({
               gap: 0
             },
             children: warnings?.map((warning) => /* @__PURE__ */ jsxs(Box21, { children: [
-              /* @__PURE__ */ jsx(PiWarning, { color: "amber.600" }),
-              " ",
+              /* @__PURE__ */ jsx(
+                PiWarning,
+                {
+                  color: isDark ? colors.amber[400] : colors.amber[600],
+                  style: { verticalAlign: "middle", marginRight: 4 }
+                }
+              ),
               warning
             ] }, _3.uniqueId(`-${warning}`)))
           }
@@ -5261,6 +5371,8 @@ var RunToolbar = ({
   );
 };
 var PrivateProfileDiffResultView = ({ run, viewOptions, onViewOptionsChanged }, ref) => {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
   if (!isProfileDiffRun(run)) {
     throw new Error("Only run type profile_diff is supported");
   }
@@ -5336,7 +5448,7 @@ var PrivateProfileDiffResultView = ({ run, viewOptions, onViewOptionsChanged },
       sx: {
         display: "flex",
         flexDirection: "column",
-        bgcolor: "rgb(249, 249, 249)",
+        bgcolor: isDark ? "grey.900" : "grey.50",
         height: "100%"
       },
       children: [
@@ -5370,6 +5482,8 @@ var PrivateProfileDiffResultView = ({ run, viewOptions, onViewOptionsChanged },
   );
 };
 var PrivateProfileResultView = ({ run, viewOptions, onViewOptionsChanged }, ref) => {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
   if (!isProfileRun(run)) {
     throw new Error("Only run type profile_diff is supported");
   }
@@ -5439,7 +5553,7 @@ var PrivateProfileResultView = ({ run, viewOptions, onViewOptionsChanged }, ref)
       sx: {
         display: "flex",
         flexDirection: "column",
-        bgcolor: "rgb(249, 249, 249)",
+        bgcolor: isDark ? "grey.900" : "grey.50",
         height: "100%"
       },
       children: /* @__PURE__ */ jsx(
@@ -5490,6 +5604,8 @@ var PrivateQueryDiffResultView = ({
   baseTitle,
   currentTitle
 }, ref) => {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
   const primaryKeys = useMemo(
     () => viewOptions?.primary_keys ?? [],
     [viewOptions]
@@ -5604,7 +5720,7 @@ var PrivateQueryDiffResultView = ({
       sx: {
         display: "flex",
         flexDirection: "column",
-        bgcolor: "rgb(249, 249, 249)",
+        bgcolor: isDark ? "grey.900" : "grey.50",
         height: "100%"
       },
       children: [
@@ -5677,6 +5793,8 @@ var PrivateQueryDiffJoinResultView = ({
   baseTitle,
   currentTitle
 }, ref) => {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
   if (run.type !== "query_diff") {
     throw new Error("QueryDiffResult view should be rendered as query_diff");
   }
@@ -5765,7 +5883,7 @@ var PrivateQueryDiffJoinResultView = ({
         sx: {
           display: "flex",
           flexDirection: "column",
-          bgcolor: "rgb(249, 249, 249)",
+          bgcolor: isDark ? "grey.900" : "grey.50",
           height: "100%"
         },
         children: [
@@ -5800,7 +5918,7 @@ var PrivateQueryDiffJoinResultView = ({
       sx: {
         display: "flex",
         flexDirection: "column",
-        bgcolor: "rgb(249, 249, 249)",
+        bgcolor: isDark ? "grey.900" : "grey.50",
         height: "100%"
       },
       children: [
@@ -5907,6 +6025,8 @@ var PrivateQueryResultView = ({
   onViewOptionsChanged,
   onAddToChecklist
 }, ref) => {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
   if (!(isQueryRun(run) || isQueryBaseRun(run))) {
     throw new Error("run type must be query");
   }
@@ -5970,25 +6090,27 @@ var PrivateQueryResultView = ({
   const limit = dataframe ? dataframe.limit ?? 0 : 0;
   const warning = limit > 0 && dataframe?.more ? `Warning: Displayed results are limited to ${limit.toLocaleString()} records. To ensure complete data retrieval, consider applying a LIMIT or WHERE clause to constrain the result set.` : null;
   const showTopBar = onAddToChecklist ?? warning;
-  return /* @__PURE__ */ jsxs(Stack5, { sx: { bgcolor: "rgb(249, 249, 249)", height: "100%" }, children: [
+  return /* @__PURE__ */ jsxs(Stack5, { sx: { bgcolor: isDark ? "grey.900" : "grey.50", height: "100%" }, children: [
     showTopBar && /* @__PURE__ */ jsxs(
       Stack5,
       {
         direction: "row",
         sx: {
-          borderBottom: "1px solid lightgray",
+          borderBottom: "1px solid",
+          borderBottomColor: "divider",
           alignItems: "center",
           gap: "5px",
           px: "10px",
-          bgcolor: warning ? "amber.100" : "inherit"
+          bgcolor: warning ? isDark ? colors.amber[900] : colors.amber[100] : "inherit",
+          color: warning ? isDark ? colors.amber[200] : colors.amber[800] : "inherit"
         },
         children: [
           warning && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(
-              Box21,
+              PiWarning,
               {
-                component: PiWarning,
-                sx: { color: "amber.600", alignSelf: "center" }
+                color: isDark ? colors.amber[400] : colors.amber[600],
+                style: { alignSelf: "center" }
               }
             ),
             " ",
@@ -6024,13 +6146,15 @@ var PrivateQueryResultView = ({
           maxWidth: 800,
           minWidth: 35
         },
-        className: "rdg-light"
+        className: isDark ? "rdg-dark" : "rdg-light"
       }
     )
   ] });
 };
 var QueryResultView = forwardRef(PrivateQueryResultView);
 function _RowCountGridView({ run, typeGuard, expectedType }, ref) {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
   if (!typeGuard(run)) {
     throw new Error(`Run type must be ${expectedType}`);
   }
@@ -6045,7 +6169,7 @@ function _RowCountGridView({ run, typeGuard, expectedType }, ref) {
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
-          bgcolor: "rgb(249,249,249)",
+          bgcolor: isDark ? "grey.900" : "grey.50",
           height: "100%"
         },
         children: "No nodes matched"
@@ -6129,7 +6253,7 @@ function TopKDiffForm({
     )
   ] }) });
 }
-var INFO_VAL_COLOR = "#63B3ED";
+var INFO_VAL_COLOR2 = "#63B3ED";
 function prepareSummaryList(topK, isDisplayTopTen) {
   const endAtIndex = isDisplayTopTen ? 10 : topK.counts.length;
   const counts = topK.counts.slice(0, endAtIndex);
@@ -6165,6 +6289,7 @@ function prepareSummaryList(topK, isDisplayTopTen) {
 function TopKChartTooltip({
   base,
   current,
+  barColors,
   children
 }) {
   return /* @__PURE__ */ jsx(
@@ -6172,7 +6297,7 @@ function TopKChartTooltip({
     {
       title: /* @__PURE__ */ jsxs(Box21, { children: [
         /* @__PURE__ */ jsxs(Typography9, { children: [
-          /* @__PURE__ */ jsx(SquareIcon, { color: CURRENT_BAR_COLOR }),
+          /* @__PURE__ */ jsx(SquareIcon, { color: barColors.current }),
           "Current: ",
           current.count,
           " (",
@@ -6180,7 +6305,7 @@ function TopKChartTooltip({
           ")"
         ] }),
         /* @__PURE__ */ jsxs(Typography9, { children: [
-          /* @__PURE__ */ jsx(SquareIcon, { color: BASE_BAR_COLOR }),
+          /* @__PURE__ */ jsx(SquareIcon, { color: barColors.base }),
           "Base: ",
           base.count,
           " (",
@@ -6197,6 +6322,9 @@ function TopKSummaryBarChart({
   topKDiff,
   isDisplayTopTen
 }) {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
+  const barColors = getBarColors(isDark);
   const currents = prepareSummaryList(topKDiff.current, isDisplayTopTen);
   const bases = prepareSummaryList(topKDiff.base, isDisplayTopTen);
   return /* @__PURE__ */ jsxs(Box21, { sx: { width: "100%", px: 20, py: 2 }, children: [
@@ -6206,9 +6334,9 @@ function TopKSummaryBarChart({
         Typography9,
         {
           component: "h3",
-          sx: { fontSize: "0.875rem", p: 1, color: "gray" },
+          sx: { fontSize: "0.875rem", p: 1, color: "text.secondary" },
           children: [
-            /* @__PURE__ */ jsx(SquareIcon, { color: BASE_BAR_COLOR }),
+            /* @__PURE__ */ jsx(SquareIcon, { color: barColors.base }),
             " Base"
           ]
         }
@@ -6217,9 +6345,9 @@ function TopKSummaryBarChart({
         Typography9,
         {
           component: "h3",
-          sx: { fontSize: "0.875rem", p: 1, color: "gray" },
+          sx: { fontSize: "0.875rem", p: 1, color: "text.secondary" },
           children: [
-            /* @__PURE__ */ jsx(SquareIcon, { color: CURRENT_BAR_COLOR }),
+            /* @__PURE__ */ jsx(SquareIcon, { color: barColors.current }),
             " Current"
           ]
         }
@@ -6232,114 +6360,124 @@ function TopKSummaryBarChart({
         return /* @__PURE__ */ jsx(Fragment, {});
       }
       return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-        /* @__PURE__ */ jsx(TopKChartTooltip, { base, current, children: /* @__PURE__ */ jsxs(
-          Box21,
+        /* @__PURE__ */ jsx(
+          TopKChartTooltip,
           {
-            sx: {
-              display: "flex",
-              alignItems: "center",
-              width: "100%",
-              "&:hover": { bgcolor: "action.hover" },
-              px: 2
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                Typography9,
-                {
-                  sx: {
-                    width: "10em",
-                    fontSize: "0.875rem",
-                    color: current.isSpecialLabel ? "grey.400" : "inherit",
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
-                    whiteSpace: "nowrap"
-                  },
-                  children: current.label
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                Box21,
-                {
-                  sx: {
-                    display: "flex",
-                    width: "70%",
-                    flexDirection: "column"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxs(Box21, { sx: { display: "flex", height: "1em" }, children: [
-                      /* @__PURE__ */ jsx(
-                        CategoricalBarChart,
-                        {
-                          topkCount: current.count,
-                          topkLabel: current.label,
-                          valids: topKDiff.current.valids,
-                          color: CURRENT_BAR_COLOR
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        Typography9,
-                        {
-                          sx: {
-                            ml: 2.5,
-                            mr: 1,
-                            fontSize: "0.875rem",
-                            width: "6em"
-                          },
-                          children: current.displayCount
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        Typography9,
-                        {
-                          sx: {
-                            color: "grey.400",
-                            fontSize: "0.875rem",
-                            width: "4em"
-                          },
-                          children: current.displayRatio
-                        }
-                      )
-                    ] }),
-                    /* @__PURE__ */ jsxs(Box21, { sx: { display: "flex", height: "1em" }, children: [
-                      /* @__PURE__ */ jsx(
-                        CategoricalBarChart,
-                        {
-                          topkCount: base.count,
-                          topkLabel: base.label,
-                          valids: topKDiff.base.valids,
-                          color: BASE_BAR_COLOR
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        Typography9,
-                        {
-                          sx: {
-                            ml: 2.5,
-                            mr: 1,
-                            fontSize: "0.875rem",
-                            width: "6em"
-                          },
-                          children: base.displayCount
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        Typography9,
-                        {
-                          sx: {
-                            color: "grey.400",
-                            fontSize: "0.875rem",
-                            width: "4em"
-                          },
-                          children: base.displayRatio
-                        }
-                      )
-                    ] })
-                  ]
-                }
-              )
-            ]
+            base,
+            current,
+            barColors,
+            children: /* @__PURE__ */ jsxs(
+              Box21,
+              {
+                sx: {
+                  display: "flex",
+                  alignItems: "center",
+                  width: "100%",
+                  "&:hover": { bgcolor: "action.hover" },
+                  px: 2
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Typography9,
+                    {
+                      sx: {
+                        width: "10em",
+                        fontSize: "0.875rem",
+                        color: current.isSpecialLabel ? "grey.400" : "inherit",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap"
+                      },
+                      children: current.label
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    Box21,
+                    {
+                      sx: {
+                        display: "flex",
+                        width: "70%",
+                        flexDirection: "column"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxs(Box21, { sx: { display: "flex", height: "1em" }, children: [
+                          /* @__PURE__ */ jsx(
+                            CategoricalBarChart,
+                            {
+                              topkCount: current.count,
+                              topkLabel: current.label,
+                              valids: topKDiff.current.valids,
+                              color: barColors.current,
+                              isDark
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            Typography9,
+                            {
+                              sx: {
+                                ml: 2.5,
+                                mr: 1,
+                                fontSize: "0.875rem",
+                                width: "6em"
+                              },
+                              children: current.displayCount
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            Typography9,
+                            {
+                              sx: {
+                                color: "grey.400",
+                                fontSize: "0.875rem",
+                                width: "4em"
+                              },
+                              children: current.displayRatio
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsxs(Box21, { sx: { display: "flex", height: "1em" }, children: [
+                          /* @__PURE__ */ jsx(
+                            CategoricalBarChart,
+                            {
+                              topkCount: base.count,
+                              topkLabel: base.label,
+                              valids: topKDiff.base.valids,
+                              color: barColors.base,
+                              isDark
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            Typography9,
+                            {
+                              sx: {
+                                ml: 2.5,
+                                mr: 1,
+                                fontSize: "0.875rem",
+                                width: "6em"
+                              },
+                              children: base.displayCount
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            Typography9,
+                            {
+                              sx: {
+                                color: "grey.400",
+                                fontSize: "0.875rem",
+                                width: "4em"
+                              },
+                              children: base.displayRatio
+                            }
+                          )
+                        ] })
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
           }
-        ) }),
+        ),
         /* @__PURE__ */ jsx(Divider, {})
       ] }, current.label);
     })
@@ -6350,10 +6488,13 @@ function CategoricalBarChart({
   topkLabel,
   valids,
   animation = false,
-  color = INFO_VAL_COLOR
+  color = INFO_VAL_COLOR2,
+  isDark = false
 }) {
   Chart.register(CategoryScale, BarElement, LinearScale);
-  const chartOptions = getCatBarChartOptions(topkCount, valids, { animation });
+  const chartOptions = getCatBarChartOptions(topkCount, valids, isDark, {
+    animation
+  });
   const chartData = getCatBarChartData({
     topkCount,
     topkLabel,
@@ -6361,7 +6502,8 @@ function CategoricalBarChart({
   });
   return /* @__PURE__ */ jsx(Bar, { data: chartData, options: chartOptions, plugins: [] });
 }
-function getCatBarChartOptions(count, valids, { ...configOverrides } = {}) {
+function getCatBarChartOptions(_count, valids, isDark = false, { ...configOverrides } = {}) {
+  const themeColors = getChartThemeColors(isDark);
   return {
     responsive: true,
     maintainAspectRatio: false,
@@ -6370,10 +6512,12 @@ function getCatBarChartOptions(count, valids, { ...configOverrides } = {}) {
       x: {
         display: false,
         max: valids,
-        grid: { display: false }
+        grid: { display: false },
+        ticks: { color: themeColors.textColor }
       },
       y: {
-        display: false
+        display: false,
+        ticks: { color: themeColors.textColor }
       }
     },
     plugins: {
@@ -6387,7 +6531,7 @@ function getCatBarChartOptions(count, valids, { ...configOverrides } = {}) {
 function getCatBarChartData({
   topkLabel,
   topkCount,
-  color = INFO_VAL_COLOR
+  color = INFO_VAL_COLOR2
 }) {
   return {
     labels: [topkLabel],
@@ -6408,39 +6552,53 @@ function getCatBarChartData({
   };
 }
 var PrivateTopKDiffResultView = ({ run }, ref) => {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
   const [isDisplayTopTen, setIsDisplayTopTen] = useState(true);
   const result = run.result;
   const params = run.params;
   const baseTopK = result.base;
   const currentTopK = result.current;
   return /* @__PURE__ */ jsxs(Box21, { sx: { display: "flex", flexDirection: "column", height: "100%" }, children: [
-    /* @__PURE__ */ jsxs(ScreenshotBox, { ref, blockSize: "auto", children: [
-      /* @__PURE__ */ jsxs(
-        Typography9,
-        {
-          variant: "h5",
-          sx: { pt: 4, textAlign: "center", color: "grey.600" },
-          children: [
-            "Model ",
-            params.model,
-            ".",
-            params.column_name
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxs(Stack5, { direction: "row", alignItems: "center", children: [
-        /* @__PURE__ */ jsx(Box21, { sx: { flex: 1 } }),
-        /* @__PURE__ */ jsx(
-          TopKSummaryBarChart,
-          {
-            topKDiff: result,
-            valids: currentTopK.valids || 0,
-            isDisplayTopTen
-          }
-        ),
-        /* @__PURE__ */ jsx(Box21, { sx: { flex: 1 } })
-      ] })
-    ] }),
+    /* @__PURE__ */ jsxs(
+      ScreenshotBox,
+      {
+        ref,
+        blockSize: "auto",
+        backgroundColor: isDark ? "#1f2937" : "white",
+        children: [
+          /* @__PURE__ */ jsxs(
+            Typography9,
+            {
+              variant: "h5",
+              sx: {
+                pt: 4,
+                textAlign: "center",
+                color: isDark ? "grey.200" : "grey.600"
+              },
+              children: [
+                "Model ",
+                params.model,
+                ".",
+                params.column_name
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(Stack5, { direction: "row", alignItems: "center", children: [
+            /* @__PURE__ */ jsx(Box21, { sx: { flex: 1 } }),
+            /* @__PURE__ */ jsx(
+              TopKSummaryBarChart,
+              {
+                topKDiff: result,
+                valids: currentTopK.valids || 0,
+                isDisplayTopTen
+              }
+            ),
+            /* @__PURE__ */ jsx(Box21, { sx: { flex: 1 } })
+          ] })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsx(Box21, { sx: { flex: 1 } }),
     (baseTopK.values.length > 10 || currentTopK.values.length > 10) && /* @__PURE__ */ jsx(Box21, { sx: { display: "flex", p: 5, justifyContent: "start" }, children: /* @__PURE__ */ jsx(
       Link,
@@ -6462,6 +6620,8 @@ var PrivateValueDiffDetailResultView = ({
   viewOptions,
   onViewOptionsChanged
 }, ref) => {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
   if (!isValueDiffDetailRun(run)) {
     throw new Error("run type must be value_diff_detail");
   }
@@ -6546,7 +6706,7 @@ var PrivateValueDiffDetailResultView = ({
         sx: {
           display: "flex",
           flexDirection: "column",
-          bgcolor: "rgb(249, 249, 249)",
+          bgcolor: isDark ? "grey.900" : "grey.50",
           height: "100%"
         },
         children: [
@@ -6581,7 +6741,7 @@ var PrivateValueDiffDetailResultView = ({
       sx: {
         display: "flex",
         flexDirection: "column",
-        bgcolor: "rgb(249, 249, 249)",
+        bgcolor: isDark ? "grey.900" : "grey.50",
         height: "100%"
       },
       children: [
@@ -6651,11 +6811,65 @@ function ValueDiffForm({
   onParamsChanged,
   setIsReadyToExecute
 }) {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
   const [allColumns, setAllColumns] = useState(
     !params.columns || params.columns.length === 0
   );
   const model = params.model;
   const primaryKey = params.primary_key;
+  const selectStyles = useMemo(
+    () => ({
+      container: (base) => ({
+        ...base,
+        width: "100%"
+      }),
+      control: (base) => ({
+        ...base,
+        minHeight: "40px",
+        backgroundColor: isDark ? colors.neutral[700] : base.backgroundColor,
+        borderColor: isDark ? colors.neutral[600] : base.borderColor
+      }),
+      menu: (base) => ({
+        ...base,
+        backgroundColor: isDark ? colors.neutral[700] : base.backgroundColor
+      }),
+      option: (base, state) => ({
+        ...base,
+        backgroundColor: state.isSelected ? isDark ? colors.neutral[600] : colors.iochmara[500] : state.isFocused ? isDark ? colors.neutral[600] : colors.iochmara[50] : isDark ? colors.neutral[700] : base.backgroundColor,
+        color: isDark ? colors.neutral[200] : base.color
+      }),
+      multiValue: (base) => ({
+        ...base,
+        backgroundColor: isDark ? colors.neutral[600] : base.backgroundColor
+      }),
+      multiValueLabel: (base) => ({
+        ...base,
+        color: isDark ? colors.neutral[200] : base.color
+      }),
+      multiValueRemove: (base) => ({
+        ...base,
+        color: isDark ? colors.neutral[400] : base.color,
+        "&:hover": {
+          backgroundColor: isDark ? colors.neutral[500] : colors.red[200],
+          color: isDark ? colors.neutral[200] : colors.red[600]
+        }
+      }),
+      input: (base) => ({
+        ...base,
+        color: isDark ? colors.neutral[200] : base.color
+      }),
+      singleValue: (base) => ({
+        ...base,
+        color: isDark ? colors.neutral[200] : base.color
+      }),
+      placeholder: (base) => ({
+        ...base,
+        color: isDark ? colors.neutral[400] : base.color
+      })
+    }),
+    [isDark]
+  );
   const {
     columns,
     primaryKey: nodePrimaryKey,
@@ -6715,16 +6929,7 @@ function ValueDiffForm({
               primary_key: optionsArray.length == 1 ? optionsArray[0].value : optionsArray.map((v) => v.value)
             });
           },
-          styles: {
-            container: (base) => ({
-              ...base,
-              width: "100%"
-            }),
-            control: (base) => ({
-              ...base,
-              minHeight: "40px"
-            })
-          }
+          styles: selectStyles
         }
       )
     ] }),
@@ -6775,16 +6980,7 @@ function ValueDiffForm({
               columns: cols
             });
           },
-          styles: {
-            container: (base) => ({
-              ...base,
-              width: "100%"
-            }),
-            control: (base) => ({
-              ...base,
-              minHeight: "40px"
-            })
-          }
+          styles: selectStyles
         }
       )
     ] })
@@ -6827,20 +7023,28 @@ function _ValueDiffResultView({ run }, ref) {
           " removed)"
         ] }),
         /* @__PURE__ */ jsx(
-          ScreenshotDataGrid,
+          Box21,
           {
-            ref,
-            style: {
-              blockSize: "auto",
+            sx: {
+              flex: 1,
+              minHeight: 0,
               maxHeight: "100%",
               overflow: "auto",
-              borderBlock: "1px solid lightgray"
+              borderTop: "1px solid",
+              borderBottom: "1px solid",
+              borderColor: "divider"
             },
-            columns,
-            rows,
-            renderers: { noRowsFallback: /* @__PURE__ */ jsx(EmptyRowsRenderer, {}) },
-            defaultColumnOptions: { resizable: true },
-            className: "rdg-light"
+            children: /* @__PURE__ */ jsx(
+              ScreenshotDataGrid,
+              {
+                ref,
+                columns,
+                rows,
+                renderers: { noRowsFallback: /* @__PURE__ */ jsx(EmptyRowsRenderer, {}) },
+                defaultColumnOptions: { resizable: true },
+                className: "rdg-light"
+              }
+            )
           }
         )
       ]
@@ -7123,7 +7327,7 @@ var RecceCheckContext = createContext({
   }
 });
 function RecceCheckContextProvider({ children }) {
-  const [selectCheckId, setSelectCheckId] = React11.useState("");
+  const [selectCheckId, setSelectCheckId] = React12.useState("");
   return /* @__PURE__ */ jsx(
     RecceCheckContext.Provider,
     {
@@ -7157,10 +7361,10 @@ var defaultQueryContext = {
 };
 var RecceQueryContext = createContext(defaultQueryContext);
 function RecceQueryContextProvider({ children }) {
-  const [sqlQuery, setSqlQuery] = React11.useState(defaultSqlQuery);
-  const [baseSqlQuery, setBaseSqlQuery] = React11.useState(defaultSqlQuery);
-  const [isCustomQueries, setCustomQueries] = React11.useState(false);
-  const [primaryKeys, setPrimaryKeys] = React11.useState();
+  const [sqlQuery, setSqlQuery] = React12.useState(defaultSqlQuery);
+  const [baseSqlQuery, setBaseSqlQuery] = React12.useState(defaultSqlQuery);
+  const [isCustomQueries, setCustomQueries] = React12.useState(false);
+  const [primaryKeys, setPrimaryKeys] = React12.useState();
   return /* @__PURE__ */ jsx(
     RecceQueryContext.Provider,
     {
@@ -7189,7 +7393,7 @@ var RowCountStateContext = createContext(defaultRowCountStateContext);
 function RowCountStateContextProvider({
   children
 }) {
-  const [isNodesFetching, setIsNodesFetching] = React11.useState([]);
+  const [isNodesFetching, setIsNodesFetching] = React12.useState([]);
   return /* @__PURE__ */ jsx(
     RowCountStateContext.Provider,
     {