@datarecce/ui 0.1.12 → 0.1.13

package/dist/hooks.js

@@ -2,13 +2,13 @@
 
 var reactQuery = require('@tanstack/react-query');
 var axios = require('axios');
+var React12 = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 require('@mui/material/Alert');
 require('@mui/material/CircularProgress');
 require('@mui/material/Snackbar');
 var Stack5 = require('@mui/material/Stack');
 var Typography9 = require('@mui/material/Typography');
-var React11 = require('react');
-var jsxRuntime = require('react/jsx-runtime');
 var Box21 = require('@mui/material/Box');
 var Button2 = require('@mui/material/Button');
 var MuiDialog2 = require('@mui/material/Dialog');
@@ -33,6 +33,7 @@ var FormControl = require('@mui/material/FormControl');
 var FormLabel = require('@mui/material/FormLabel');
 var NativeSelect = require('@mui/material/NativeSelect');
 var _3 = require('lodash');
+var styles = require('@mui/material/styles');
 var chart_js = require('chart.js');
 var reactChartjs2 = require('react-chartjs-2');
 require('@jeromefitz/date-fns-tz');
@@ -47,21 +48,20 @@ var vsc = require('react-icons/vsc');
 var pi = require('react-icons/pi');
 var Tooltip2 = require('@mui/material/Tooltip');
 var usehooksTs = require('usehooks-ts');
-var styles = require('@mui/material/styles');
-require('./style-LYNBK7ND.css');
+require('./style-466WWZLM.css');
 var ListSubheader2 = require('@mui/material/ListSubheader');
 var agGridCommunity = require('ag-grid-community');
 var agGridReact = require('ag-grid-react');
-require('./agGridStyles-L5J6VVIU.css');
+require('./agGridStyles-VYALGSJU.css');
 var ButtonGroup = require('@mui/material/ButtonGroup');
 var Divider = require('@mui/material/Divider');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var axios__default = /*#__PURE__*/_interopDefault(axios);
+var React12__default = /*#__PURE__*/_interopDefault(React12);
 var Stack5__default = /*#__PURE__*/_interopDefault(Stack5);
 var Typography9__default = /*#__PURE__*/_interopDefault(Typography9);
-var React11__default = /*#__PURE__*/_interopDefault(React11);
 var Box21__default = /*#__PURE__*/_interopDefault(Box21);
 var Button2__default = /*#__PURE__*/_interopDefault(Button2);
 var MuiDialog2__default = /*#__PURE__*/_interopDefault(MuiDialog2);
@@ -117,20 +117,32 @@ var axiosClient = axios__default.default.create({
 new reactQuery.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 = React12.createContext(null);
+var defaultApiConfigContext = {
+  apiPrefix: "",
+  authToken: void 0,
+  baseUrl: void 0,
+  apiClient: axios__default.default.create({ baseURL: PUBLIC_API_URL })
+};
+function useApiConfig() {
+  const context = React12.useContext(ApiConfigContext);
+  return context ?? defaultApiConfigContext;
+}
 
 // recce-source/js/src/lib/hooks/useRecceInstanceInfo.tsx
 var useRecceInstanceInfo = () => {
+  const { apiClient } = useApiConfig();
   return reactQuery.useQuery({
     queryKey: cacheKeys.instanceInfo(),
-    queryFn: getRecceInstanceInfo
+    queryFn: () => getRecceInstanceInfo(apiClient)
   });
 };
-React11.createContext(null);
+React12.createContext(null);
 var toastIdCounter = 0;
 var listeners = /* @__PURE__ */ new Set();
 var toaster = {
@@ -200,9 +212,9 @@ function useClipBoardToast() {
     failToast
   };
 }
-var LineageViewContext = React11.createContext(void 0);
+var LineageViewContext = React12.createContext(void 0);
 var useLineageViewContext = () => {
-  return React11.useContext(LineageViewContext);
+  return React12.useContext(LineageViewContext);
 };
 function track(eventInput, eventProperties, eventOptions) {
   {
@@ -236,11 +248,11 @@ function isExploreAction(type) {
   return Object.values(EXPLORE_ACTION).includes(type);
 }
 function useValueDiffAlertDialog() {
-  const [open, setOpen] = React11.useState(false);
-  const [nodeCount, setNodeCount] = React11.useState(0);
-  const [resolvePromise, setResolvePromise] = React11.useState();
-  const cancelRef = React11.useRef(null);
-  const confirm = React11.useCallback((nodeCount2) => {
+  const [open, setOpen] = React12.useState(false);
+  const [nodeCount, setNodeCount] = React12.useState(0);
+  const [resolvePromise, setResolvePromise] = React12.useState();
+  const cancelRef = React12.useRef(null);
+  const confirm = React12.useCallback((nodeCount2) => {
     setNodeCount(nodeCount2);
     return new Promise((resolve) => {
       setResolvePromise(() => resolve);
@@ -587,20 +599,20 @@ var defaultValue = {
   shareUrl: void 0,
   sessionId: void 0
 };
-var InstanceInfo = React11.createContext(defaultValue);
+var InstanceInfo = React12.createContext(defaultValue);
 function RecceInstanceInfoProvider({
   children
 }) {
   const { data: instanceInfo, isLoading } = useRecceInstanceInfo();
-  const [featureToggles, setFeatureToggles] = React11.useState(
+  const [featureToggles, setFeatureToggles] = React12.useState(
     defaultFeatureToggles
   );
-  const [singleEnv, setSingleEnv] = React11.useState(false);
-  const [authed, setAuthed] = React11.useState(false);
-  const [lifetimeExpiredAt, setLifetimeExpiredAt] = React11.useState();
-  const [shareUrl, setShareUrl] = React11.useState();
-  const [sessionId, setSessionId] = React11.useState();
-  const [prevInstanceInfo, setPrevInstanceInfo] = React11.useState(instanceInfo);
+  const [singleEnv, setSingleEnv] = React12.useState(false);
+  const [authed, setAuthed] = React12.useState(false);
+  const [lifetimeExpiredAt, setLifetimeExpiredAt] = React12.useState();
+  const [shareUrl, setShareUrl] = React12.useState();
+  const [sessionId, setSessionId] = React12.useState();
+  const [prevInstanceInfo, setPrevInstanceInfo] = React12.useState(instanceInfo);
   if (!isLoading && instanceInfo && instanceInfo !== prevInstanceInfo) {
     setPrevInstanceInfo(instanceInfo);
     setSingleEnv(instanceInfo.single_env);
@@ -657,22 +669,22 @@ function RecceInstanceInfoProvider({
     }
   );
 }
-var useRecceInstanceContext = () => React11.useContext(InstanceInfo);
+var useRecceInstanceContext = () => React12.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(
@@ -734,8 +746,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;
 }
 
@@ -821,7 +836,7 @@ function useIdleDetection() {
     isDisconnected,
     isEnabled
   });
-  const sendKeepAliveNow = React11.useCallback(async () => {
+  const sendKeepAliveNow = React12.useCallback(async () => {
     if (document.hidden) return;
     const sent = await sendKeepAlive();
     if (sent) {
@@ -830,7 +845,7 @@ function useIdleDetection() {
       });
     }
   }, []);
-  const handleActivity = React11.useCallback(
+  const handleActivity = React12.useCallback(
     (event) => {
       if (isEnabled && !document.hidden) {
         debugLog("[Idle Detection] Activity detected", {
@@ -842,7 +857,7 @@ function useIdleDetection() {
     },
     [isEnabled, sendKeepAliveNow]
   );
-  const handleVisibilityChange = React11.useCallback(() => {
+  const handleVisibilityChange = React12.useCallback(() => {
     if (!isEnabled) return;
     if (!document.hidden) {
       debugLog("[Idle Detection] Tab became active", {
@@ -851,14 +866,14 @@ function useIdleDetection() {
       void sendKeepAliveNow();
     }
   }, [isEnabled, sendKeepAliveNow]);
-  const throttledHandler = React11.useMemo(
+  const throttledHandler = React12.useMemo(
     () => throttle__default.default(handleActivity, IDLE_DETECTION_CONFIG.EVENT_THROTTLE_MS, {
       leading: true,
       trailing: true
     }),
     [handleActivity]
   );
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (!isEnabled) {
       debugLog("[Idle Detection] Disabled", {
         idleTimeout,
@@ -887,21 +902,21 @@ function useIdleDetection() {
     };
   }, [isEnabled, throttledHandler, handleVisibilityChange, idleTimeout]);
 }
-var IdleTimeoutContext = React11.createContext(
+var IdleTimeoutContext = React12.createContext(
   void 0
 );
 function IdleTimeoutProvider({ children }) {
   const { data: instanceInfo } = useRecceInstanceInfo();
-  const lastServerSyncRef = React11.useRef(Date.now());
-  const [remainingSeconds, setRemainingSeconds] = React11.useState(null);
-  const [isDisconnected, setIsDisconnected] = React11.useState(false);
+  const lastServerSyncRef = React12.useRef(Date.now());
+  const [remainingSeconds, setRemainingSeconds] = React12.useState(null);
+  const [isDisconnected, setIsDisconnected] = React12.useState(false);
   const idleTimeout = instanceInfo?.idle_timeout ?? null;
   const isEnabled = idleTimeout !== null && idleTimeout > 0;
-  const isEnabledRef = React11.useRef(isEnabled);
-  React11.useEffect(() => {
+  const isEnabledRef = React12.useRef(isEnabled);
+  React12.useEffect(() => {
     isEnabledRef.current = isEnabled;
   }, [isEnabled]);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (!isEnabled) {
       setKeepAliveCallback(null);
       return;
@@ -919,14 +934,14 @@ function IdleTimeoutProvider({ children }) {
       setKeepAliveCallback(null);
     };
   }, [isEnabled]);
-  const setDisconnected = React11.useCallback(() => {
+  const setDisconnected = React12.useCallback(() => {
     setIsDisconnected(true);
   }, []);
-  const resetConnection = React11.useCallback(() => {
+  const resetConnection = React12.useCallback(() => {
     setIsDisconnected(false);
     lastServerSyncRef.current = Date.now();
   }, []);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (!isEnabled || idleTimeout === null) {
       setRemainingSeconds(null);
       return;
@@ -969,52 +984,63 @@ function IdleDetector() {
   return null;
 }
 function useIdleTimeout() {
-  const context = React11.useContext(IdleTimeoutContext);
+  const context = React12.useContext(IdleTimeoutContext);
   if (!context) {
     throw new Error("useIdleTimeout must be used within IdleTimeoutProvider");
   }
   return context;
 }
 function useIdleTimeoutSafe() {
-  return React11.useContext(IdleTimeoutContext) ?? null;
+  return React12.useContext(IdleTimeoutContext) ?? null;
 }
 var useRecceServerFlag = () => {
+  const { apiClient } = useApiConfig();
   return reactQuery.useQuery({
     queryKey: cacheKeys.flag(),
-    queryFn: getServerFlag
+    queryFn: () => getServerFlag(apiClient)
   });
 };
 var defaultLineageGraphsContext = {
   isActionAvailable: () => true,
   isDemoSite: false
 };
-var LineageGraphContext = React11.createContext(defaultLineageGraphsContext);
-function useLineageWatcher() {
-  const [artifactsUpdatedToastId, setArtifactsUpdatedToastId] = React11.useState(void 0);
-  const ref = React11.useRef({
+var LineageGraphContext = React12.createContext(defaultLineageGraphsContext);
+function useLineageWatcher({
+  enabled = true,
+  baseUrl,
+  apiPrefix
+} = {}) {
+  const [artifactsUpdatedToastId, setArtifactsUpdatedToastId] = React12.useState(void 0);
+  const ref = React12.useRef({
     ws: void 0,
     status: "pending",
     artifactsUpdatedToastId: void 0
   });
-  const [status, setStatus] = React11.useState("pending");
-  const [envStatus, setEnvStatus] = React11.useState(void 0);
-  React11.useEffect(() => {
+  const [status, setStatus] = React12.useState(
+    enabled ? "pending" : "connected"
+  );
+  const [envStatus, setEnvStatus] = React12.useState(void 0);
+  React12.useEffect(() => {
     ref.current.status = status;
   }, [status]);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     ref.current.artifactsUpdatedToastId = artifactsUpdatedToastId;
   }, [artifactsUpdatedToastId]);
   const queryClient = reactQuery.useQueryClient();
-  const invalidateCaches = React11.useCallback(() => {
+  const invalidateCaches = React12.useCallback(() => {
     void queryClient.invalidateQueries({ queryKey: cacheKeys.lineage() });
     void queryClient.invalidateQueries({ queryKey: cacheKeys.checks() });
     void queryClient.invalidateQueries({ queryKey: cacheKeys.runs() });
   }, [queryClient]);
-  const connect = React11.useCallback(() => {
+  const connect = React12.useCallback(() => {
     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");
@@ -1077,8 +1103,11 @@ function useLineageWatcher() {
       });
       ref.current.ws = void 0;
     };
-  }, [invalidateCaches]);
-  React11.useEffect(() => {
+  }, [invalidateCaches, baseUrl, apiPrefix]);
+  React12.useEffect(() => {
+    if (!enabled) {
+      return;
+    }
     const refObj = ref.current;
     connect();
     return () => {
@@ -1086,7 +1115,7 @@ function useLineageWatcher() {
         refObj.ws.close();
       }
     };
-  }, [connect]);
+  }, [connect, enabled]);
   return {
     connectionStatus: status,
     connect,
@@ -1101,15 +1130,16 @@ function LineageGraphContextProvider({ children }) {
     setDisconnected,
     resetConnection
   } = useIdleTimeout();
+  const { apiClient, apiPrefix, baseUrl } = useApiConfig();
   const queryServerInfo = reactQuery.useQuery({
     queryKey: cacheKeys.lineage(),
-    queryFn: getServerInfo
+    queryFn: () => getServerInfo(apiClient)
   });
   const queryRunAggregated = reactQuery.useQuery({
     queryKey: cacheKeys.runsAggregated(),
-    queryFn: aggregateRuns
+    queryFn: () => aggregateRuns(apiClient)
   });
-  const lineageGraph = React11.useMemo(() => {
+  const lineageGraph = React12.useMemo(() => {
     const lineage2 = queryServerInfo.data?.lineage;
     if (!lineage2?.base) {
       return void 0;
@@ -1147,8 +1177,12 @@ function LineageGraphContextProvider({ children }) {
     },
     sqlmesh
   };
-  const { connectionStatus, connect, envStatus } = useLineageWatcher();
-  React11.useEffect(() => {
+  const { connectionStatus, connect, envStatus } = useLineageWatcher({
+    enabled: true,
+    baseUrl,
+    apiPrefix
+  });
+  React12.useEffect(() => {
     if (connectionStatus === "disconnected") {
       setDisconnected();
     } else if (connectionStatus === "connected") {
@@ -1157,10 +1191,10 @@ function LineageGraphContextProvider({ children }) {
   }, [connectionStatus, setDisconnected, resetConnection]);
   const { data: flags, isLoading } = useRecceServerFlag();
   const { featureToggles, shareUrl } = useRecceInstanceContext();
-  const [relaunchHintOpen, setRelaunchHintOpen] = React11.useState(false);
-  const [prevRelaunchCondition, setPrevRelaunchCondition] = React11.useState(false);
+  const [relaunchHintOpen, setRelaunchHintOpen] = React12.useState(false);
+  const [prevRelaunchCondition, setPrevRelaunchCondition] = React12.useState(false);
   const queryClient = reactQuery.useQueryClient();
-  const isActionAvailable = React11.useCallback(
+  const isActionAvailable = React12.useCallback(
     (name) => {
       if (supportTasks) {
         return supportTasks[name] ?? true;
@@ -1174,7 +1208,7 @@ function LineageGraphContextProvider({ children }) {
     setPrevRelaunchCondition(shouldShowRelaunch);
     setRelaunchHintOpen(shouldShowRelaunch);
   }
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (shouldShowRelaunch && relaunchHintOpen) {
       trackSingleEnvironment({ action: "target_base_added" });
     }
@@ -1265,7 +1299,7 @@ function LineageGraphContextProvider({ children }) {
     ] })
   ] });
 }
-var useLineageGraphContext = () => React11.useContext(LineageGraphContext);
+var useLineageGraphContext = () => React12.useContext(LineageGraphContext);
 var useRunsAggregated = () => {
   const { runsAggregated, refetchRunsAggregated } = useLineageGraphContext();
   return [runsAggregated, refetchRunsAggregated];
@@ -1308,13 +1342,13 @@ var RunModal = ({
   params: defaultParams,
   RunForm
 }) => {
-  const [params, setParams] = React11.useState(
+  const [params, setParams] = React12.useState(
     defaultParams ?? {}
   );
-  const [anchorEl, setAnchorEl] = React11.useState(null);
-  const [isReadyToExecute, setIsReadyToExecute] = React11.useState(false);
+  const [anchorEl, setAnchorEl] = React12.useState(null);
+  const [isReadyToExecute, setIsReadyToExecute] = React12.useState(false);
   const documentationUrl = getDocumentationUrl(type);
-  const executeClicked = React11.useRef(false);
+  const executeClicked = React12.useRef(false);
   const handleClose = () => {
     if (!executeClicked.current && isExploreAction(type)) {
       trackExploreActionForm({
@@ -1416,8 +1450,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__ */ jsxRuntime.jsx(Box21__default.default, { sx: { contain: "layout" }, children: RunForm && /* @__PURE__ */ jsxRuntime.jsx(
               RunForm,
@@ -1481,17 +1516,17 @@ var useModelColumns = (model) => {
       name: model
     }
   });
-  const nodeColumns = React11.useMemo(() => {
+  const nodeColumns = React12.useMemo(() => {
     return node ? extractColumns(node) : [];
   }, [node]);
-  const [columns, setColumns] = React11.useState([]);
-  const [primaryKey, setPrimaryKey] = React11.useState();
-  const [isLoading, setIsLoading] = React11.useState(true);
-  const [error, setError] = React11.useState(null);
-  const [prevNodeColumns, setPrevNodeColumns] = React11.useState([]);
-  const [prevNodeId, setPrevNodeId] = React11.useState(node?.id);
+  const [columns, setColumns] = React12.useState([]);
+  const [primaryKey, setPrimaryKey] = React12.useState();
+  const [isLoading, setIsLoading] = React12.useState(true);
+  const [error, setError] = React12.useState(null);
+  const [prevNodeColumns, setPrevNodeColumns] = React12.useState([]);
+  const [prevNodeId, setPrevNodeId] = React12.useState(node?.id);
   const nodePrimaryKey = node ? node.data.data.current?.primary_key : void 0;
-  const fetchData = React11.useCallback(async () => {
+  const fetchData = React12.useCallback(async () => {
     if (!node) {
       return;
     }
@@ -1522,7 +1557,7 @@ var useModelColumns = (model) => {
       setIsLoading(false);
     }
   }
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (nodeColumns.length === 0 && node?.id !== void 0) {
       fetchData().catch((e) => {
         console.error(e);
@@ -1715,10 +1750,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__ */ jsxRuntime.jsx(
     Box21__default.default,
@@ -1742,6 +1823,8 @@ function HistogramChart({
   hideAxis = false,
   animation = false
 }) {
+  const theme = styles.useTheme();
+  const isDark = theme.palette.mode === "dark";
   chart_js.Chart.register(
     chart_js.BarElement,
     chart_js.TimeSeriesScale,
@@ -1751,8 +1834,10 @@ function HistogramChart({
     chart_js.Legend,
     chart_js.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__ */ jsxRuntime.jsx(reactChartjs2.Chart, { type: "bar", options: chartOptions, data: chartData, plugins: [] });
 }
 function getHistogramChartDataset(type, binEdges, label, color, data) {
@@ -1773,53 +1858,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}
@@ -1836,15 +1933,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",
@@ -1861,7 +1959,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 = {
@@ -1870,9 +1969,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
   };
@@ -1882,12 +1982,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);
       }
@@ -1903,7 +2004,7 @@ function formatDisplayedBinItem(binEdges, currentIndex) {
   const formattedEnd = formatAsAbbreviatedNumber(endEdge);
   return `${formattedStart} - ${formattedEnd}`;
 }
-var ScreenshotBox = React11.forwardRef(
+var ScreenshotBox = React12.forwardRef(
   ({
     backgroundColor = "white",
     blockSize,
@@ -1932,6 +2033,8 @@ var ScreenshotBox = React11.forwardRef(
   }
 );
 function _HistogramDiffResultView({ run }, ref) {
+  const theme = styles.useTheme();
+  const isDark = theme.palette.mode === "dark";
   if (!isHistogramDiffRun(run)) {
     throw new Error("Run type must be histogram_diff");
   }
@@ -1944,37 +2047,45 @@ function _HistogramDiffResultView({ run }, ref) {
   if (!base || !current) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Loading..." });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(Box21__default.default, { sx: { display: "flex", flexDirection: "column", height: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(ScreenshotBox, { ref, height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(Box21__default.default, { sx: { display: "flex", flexDirection: "row" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Box21__default.default, { sx: { flex: 1 } }),
-    /* @__PURE__ */ jsxRuntime.jsx(Box21__default.default, { sx: { width: "80%", height: "35vh", m: 4 }, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Box21__default.default, { sx: { flex: 1 } })
-  ] }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(Box21__default.default, { sx: { display: "flex", flexDirection: "column", height: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    ScreenshotBox,
+    {
+      ref,
+      height: "100%",
+      backgroundColor: isDark ? "#1f2937" : "white",
+      children: /* @__PURE__ */ jsxRuntime.jsxs(Box21__default.default, { sx: { display: "flex", flexDirection: "row" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Box21__default.default, { sx: { flex: 1 } }),
+        /* @__PURE__ */ jsxRuntime.jsx(Box21__default.default, { sx: { width: "80%", height: "35vh", m: 4 }, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Box21__default.default, { sx: { flex: 1 } })
+      ] })
+    }
+  ) });
 }
-var HistogramDiffResultView = React11.forwardRef(_HistogramDiffResultView);
+var HistogramDiffResultView = React12.forwardRef(_HistogramDiffResultView);
 function ProfileDiffForm({
   params,
   onParamsChanged,
   setIsReadyToExecute
 }) {
-  const [allColumns, setAllColumns] = React11.useState(
+  const [allColumns, setAllColumns] = React12.useState(
     !params.columns || params.columns.length === 0
   );
   const model = params.model;
   const { columns, isLoading, error } = useModelColumns_default(params.model);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     setIsReadyToExecute(!!model);
   }, [model, setIsReadyToExecute]);
   const columnNames = columns.map((c) => c.name);
@@ -2244,7 +2355,7 @@ function DataFrameColumnGroupHeader({
   onPinnedColumnsChange,
   onColumnsRenderModeChanged
 }) {
-  const [anchorEl, setAnchorEl] = React11.useState(null);
+  const [anchorEl, setAnchorEl] = React12.useState(null);
   const menuOpen = Boolean(anchorEl);
   const handleMenuClick = (event) => {
     setAnchorEl(event.currentTarget);
@@ -2367,7 +2478,7 @@ function DataFrameColumnHeader({
   columnType,
   onColumnsRenderModeChanged
 }) {
-  const [anchorEl, setAnchorEl] = React11.useState(null);
+  const [anchorEl, setAnchorEl] = React12.useState(null);
   const menuOpen = Boolean(anchorEl);
   const handleMenuClick = (event) => {
     setAnchorEl(event.currentTarget);
@@ -2686,8 +2797,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;
@@ -2917,35 +3028,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),
@@ -3005,11 +3089,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"
@@ -3036,11 +3140,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
@@ -3087,9 +3191,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
@@ -3136,19 +3240,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)
@@ -3183,15 +3287,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
@@ -3200,22 +3304,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
@@ -3296,17 +3400,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]
+      })
     }
   }
 };
@@ -3488,7 +3592,7 @@ var DiffText = ({
   noCopy,
   fontSize
 }) => {
-  const [isHovered, setIsHovered] = React11.useState(false);
+  const [isHovered, setIsHovered] = React12.useState(false);
   const textColor = colors[colorPalette][800];
   const bgColor = colors[colorPalette][100];
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3546,39 +3650,38 @@ function CopyControl({
   grayOut,
   isHovered
 }) {
-  const [copiedText, copyToClipboard] = usehooksTs.useCopyToClipboard();
-  const hasCopiedText = Boolean(copiedText);
-  if (noCopy || grayOut) {
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
-  }
-  if (hasCopiedText) {
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "Copied" });
-  }
-  if (!isHovered) {
+  const [, copyToClipboard] = usehooksTs.useCopyToClipboard();
+  const { successToast } = useClipBoardToast();
+  if (noCopy || grayOut || !isHovered) {
     return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const handleCopy = () => {
+    copyToClipboard(value);
+    successToast(`${value} copied`);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(Tooltip2__default.default, { title: "Copy Value", children: /* @__PURE__ */ jsxRuntime.jsx(
     IconButton3__default.default,
     {
       "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__ */ jsxRuntime.jsx(pi.PiCopy, { size: "10px" })
+      children: /* @__PURE__ */ jsxRuntime.jsx(pi.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;
@@ -3763,8 +3866,7 @@ function toDiffColumn(config) {
       headerClass: headerCellClass,
       headerComponent,
       cellRenderer: inlineRenderCell,
-      columnType,
-      columnRenderMode
+      context: { columnType, columnRenderMode }
     };
   }
   const cellClassBase = createCellClassBase(name, columnStatus);
@@ -3773,8 +3875,7 @@ function toDiffColumn(config) {
     headerName: name,
     headerClass: headerCellClass,
     headerGroupComponent: headerComponent,
-    columnType,
-    columnRenderMode,
+    context: { columnType, columnRenderMode },
     children: [
       {
         field: `base__${name}`,
@@ -3782,8 +3883,7 @@ function toDiffColumn(config) {
         headerClass: headerCellClass,
         cellClass: cellClassBase,
         cellRenderer: defaultRenderCell,
-        columnType,
-        columnRenderMode
+        context: { columnType, columnRenderMode }
       },
       {
         field: `current__${name}`,
@@ -3791,8 +3891,7 @@ function toDiffColumn(config) {
         headerClass: headerCellClass,
         cellClass: cellClassCurrent,
         cellRenderer: defaultRenderCell,
-        columnType,
-        columnRenderMode
+        context: { columnType, columnRenderMode }
       }
     ]
   };
@@ -3830,8 +3929,7 @@ function createPrimaryKeyColumn(config, headerProps) {
       return void 0;
     },
     cellRenderer: defaultRenderCell,
-    columnType,
-    columnRenderMode
+    context: { columnType, columnRenderMode }
   };
 }
 function createDiffColumn(config, displayMode, headerProps, baseTitle, currentTitle) {
@@ -4020,8 +4118,7 @@ function createPrimaryKeyColumn2(config, headerProps) {
     ),
     pinned: "left",
     cellRenderer: defaultRenderCell,
-    columnType,
-    columnRenderMode
+    context: { columnType, columnRenderMode }
   };
 }
 function createRegularColumn(config, headerProps) {
@@ -4040,8 +4137,7 @@ function createRegularColumn(config, headerProps) {
       }
     ),
     cellRenderer: defaultRenderCell,
-    columnType,
-    columnRenderMode
+    context: { columnType, columnRenderMode }
   };
 }
 function buildSimpleColumnDefinitions(config) {
@@ -4550,7 +4646,7 @@ function renderIndexCell(params) {
   const value = isRemoved ? baseIndex !== void 0 ? baseIndex : "-" : currentIndex !== void 0 ? currentIndex : "-";
   return /* @__PURE__ */ jsxRuntime.jsx("span", { children: value });
 }
-var MemoizedRenderIndexCell = React11__default.default.memo(renderIndexCell);
+var MemoizedRenderIndexCell = React12__default.default.memo(renderIndexCell);
 MemoizedRenderIndexCell.displayName = "MemoizedRenderIndexCell";
 function renderTypeCell(params) {
   if (!params.data) {
@@ -4583,7 +4679,7 @@ function renderTypeCell(params) {
   }
   return /* @__PURE__ */ jsxRuntime.jsx("span", { children: isRemoved ? baseType : currentType });
 }
-var MemoizedRenderTypeCell = React11__default.default.memo(renderTypeCell);
+var MemoizedRenderTypeCell = React12__default.default.memo(renderTypeCell);
 MemoizedRenderTypeCell.displayName = "MemoizedRenderTypeCell";
 function PrimaryKeyIndicatorCell({
   columnName,
@@ -4609,7 +4705,7 @@ function ValueDiffColumnNameCell({
 }) {
   const { runAction } = useRecceActionContext();
   const { featureToggles } = useRecceInstanceContext();
-  const [anchorEl, setAnchorEl] = React11.useState(null);
+  const [anchorEl, setAnchorEl] = React12.useState(null);
   const menuOpen = Boolean(anchorEl);
   const handleMenuClick = (event) => {
     setAnchorEl(event.currentTarget);
@@ -5005,7 +5101,7 @@ var recceGridThemeLight = agGridCommunity.themeQuartz.withParams({
   headerFontWeight: 700,
   cellHorizontalPadding: 8
 });
-agGridCommunity.themeQuartz.withParams({
+var recceGridThemeDark = agGridCommunity.themeQuartz.withParams({
   backgroundColor: "#1e1e1e",
   headerBackgroundColor: "#252526",
   rowHoverColor: "#1e1e1e",
@@ -5051,9 +5147,9 @@ function _ScreenshotDataGrid({
   renderers,
   ...props
 }, ref) {
-  const containerRef = React11.useRef(null);
-  const gridApiRef = React11.useRef(null);
-  React11.useImperativeHandle(
+  const containerRef = React12.useRef(null);
+  const gridApiRef = React12.useRef(null);
+  React12.useImperativeHandle(
     ref,
     () => ({
       api: gridApiRef.current,
@@ -5061,11 +5157,15 @@ function _ScreenshotDataGrid({
     }),
     []
   );
-  const theme = React11.useMemo(() => recceGridThemeLight, []);
+  const muiTheme = styles.useTheme();
+  const gridTheme = React12.useMemo(
+    () => muiTheme.palette.mode === "dark" ? recceGridThemeDark : recceGridThemeLight,
+    [muiTheme.palette.mode]
+  );
   const resolvedColumnDefs = columnDefs ?? columns;
   const resolvedRowData = rowData ?? rows;
   const resolvedDefaultColDef = defaultColDef ?? defaultColumnOptions;
-  const mergedDefaultColDef = React11.useMemo(
+  const mergedDefaultColDef = React12.useMemo(
     () => ({
       resizable: true,
       suppressMovable: true,
@@ -5073,11 +5173,11 @@ function _ScreenshotDataGrid({
     }),
     [resolvedDefaultColDef]
   );
-  const noRowsOverlayComponent = React11.useMemo(() => {
+  const noRowsOverlayComponent = React12.useMemo(() => {
     if (!renderers?.noRowsFallback) return void 0;
     return () => renderers.noRowsFallback;
   }, [renderers?.noRowsFallback]);
-  const resolvedGetRowId = React11.useMemo(() => {
+  const resolvedGetRowId = React12.useMemo(() => {
     if (getRowId) return getRowId;
     return (params) => {
       const data = params.data;
@@ -5088,7 +5188,7 @@ function _ScreenshotDataGrid({
       return String(index ?? Math.random());
     };
   }, [getRowId]);
-  const gridKey = React11.useMemo(() => {
+  const gridKey = React12.useMemo(() => {
     if (!resolvedColumnDefs) return "grid";
     const pinnedFields = resolvedColumnDefs.filter(
       (col) => "field" in col && col.pinned === "left"
@@ -5123,18 +5223,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": {
@@ -5147,18 +5247,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__ */ jsxRuntime.jsx(
         agGridReact.AgGridReact,
         {
-          theme,
+          theme: gridTheme,
           columnDefs: resolvedColumnDefs,
           rowData: resolvedRowData,
           getRowId: resolvedGetRowId,
@@ -5180,7 +5280,7 @@ function _ScreenshotDataGrid({
     }
   );
 }
-var ScreenshotDataGrid = React11.forwardRef(_ScreenshotDataGrid);
+var ScreenshotDataGrid = React12.forwardRef(_ScreenshotDataGrid);
 var ToggleSwitch = ({
   value,
   onChange,
@@ -5260,17 +5360,22 @@ var RunToolbar = ({
   warnings,
   children
 }) => {
+  const theme = styles.useTheme();
+  const isDark = theme.palette.mode === "dark";
+  const hasWarnings = warnings && warnings.length > 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Box21__default.default,
     {
       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__ */ jsxRuntime.jsx(
@@ -5283,8 +5388,13 @@ var RunToolbar = ({
               gap: 0
             },
             children: warnings?.map((warning) => /* @__PURE__ */ jsxRuntime.jsxs(Box21__default.default, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(pi.PiWarning, { color: "amber.600" }),
-              " ",
+              /* @__PURE__ */ jsxRuntime.jsx(
+                pi.PiWarning,
+                {
+                  color: isDark ? colors.amber[400] : colors.amber[600],
+                  style: { verticalAlign: "middle", marginRight: 4 }
+                }
+              ),
               warning
             ] }, _3__default.default.uniqueId(`-${warning}`)))
           }
@@ -5296,18 +5406,20 @@ var RunToolbar = ({
   );
 };
 var PrivateProfileDiffResultView = ({ run, viewOptions, onViewOptionsChanged }, ref) => {
+  const theme = styles.useTheme();
+  const isDark = theme.palette.mode === "dark";
   if (!isProfileDiffRun(run)) {
     throw new Error("Only run type profile_diff is supported");
   }
-  const pinnedColumns = React11.useMemo(
+  const pinnedColumns = React12.useMemo(
     () => viewOptions?.pinned_columns ?? [],
     [viewOptions]
   );
-  const displayMode = React11.useMemo(
+  const displayMode = React12.useMemo(
     () => viewOptions?.display_mode ?? "inline",
     [viewOptions]
   );
-  const columnsRenderMode = React11.useMemo(
+  const columnsRenderMode = React12.useMemo(
     () => ({
       distinct_proportion: "percent",
       not_null_proportion: "percent",
@@ -5315,7 +5427,7 @@ var PrivateProfileDiffResultView = ({ run, viewOptions, onViewOptionsChanged },
     }),
     [viewOptions]
   );
-  const gridData = React11.useMemo(() => {
+  const gridData = React12.useMemo(() => {
     const onColumnsRenderModeChanged = (cols) => {
       const newRenderModes = {
         ...viewOptions?.columnsRenderMode ?? {},
@@ -5371,7 +5483,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: [
@@ -5405,14 +5517,16 @@ var PrivateProfileDiffResultView = ({ run, viewOptions, onViewOptionsChanged },
   );
 };
 var PrivateProfileResultView = ({ run, viewOptions, onViewOptionsChanged }, ref) => {
+  const theme = styles.useTheme();
+  const isDark = theme.palette.mode === "dark";
   if (!isProfileRun(run)) {
     throw new Error("Only run type profile_diff is supported");
   }
-  const pinnedColumns = React11.useMemo(
+  const pinnedColumns = React12.useMemo(
     () => viewOptions?.pinned_columns ?? [],
     [viewOptions]
   );
-  const columnsRenderMode = React11.useMemo(
+  const columnsRenderMode = React12.useMemo(
     () => ({
       distinct_proportion: "percent",
       not_null_proportion: "percent",
@@ -5420,7 +5534,7 @@ var PrivateProfileResultView = ({ run, viewOptions, onViewOptionsChanged }, ref)
     }),
     [viewOptions]
   );
-  const gridData = React11.useMemo(() => {
+  const gridData = React12.useMemo(() => {
     const onColumnsRenderModeChanged = (cols) => {
       const newRenderModes = {
         ...viewOptions?.columnsRenderMode ?? {},
@@ -5474,7 +5588,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__ */ jsxRuntime.jsx(
@@ -5491,8 +5605,8 @@ var PrivateProfileResultView = ({ run, viewOptions, onViewOptionsChanged }, ref)
     }
   );
 };
-var ProfileDiffResultView = React11.forwardRef(PrivateProfileDiffResultView);
-var ProfileResultView = React11.forwardRef(PrivateProfileResultView);
+var ProfileDiffResultView = React12.forwardRef(PrivateProfileDiffResultView);
+var ProfileResultView = React12.forwardRef(PrivateProfileResultView);
 var ChangedOnlyCheckbox = ({
   changedOnly,
   onChange
@@ -5525,30 +5639,32 @@ var PrivateQueryDiffResultView = ({
   baseTitle,
   currentTitle
 }, ref) => {
-  const primaryKeys = React11.useMemo(
+  const theme = styles.useTheme();
+  const isDark = theme.palette.mode === "dark";
+  const primaryKeys = React12.useMemo(
     () => viewOptions?.primary_keys ?? [],
     [viewOptions]
   );
-  const changedOnly = React11.useMemo(
+  const changedOnly = React12.useMemo(
     () => viewOptions?.changed_only ?? false,
     [viewOptions]
   );
-  const pinnedColumns = React11.useMemo(
+  const pinnedColumns = React12.useMemo(
     () => viewOptions?.pinned_columns ?? [],
     [viewOptions]
   );
-  const displayMode = React11.useMemo(
+  const displayMode = React12.useMemo(
     () => viewOptions?.display_mode ?? "inline",
     [viewOptions]
   );
-  const columnsRenderMode = React11.useMemo(
+  const columnsRenderMode = React12.useMemo(
     () => viewOptions?.columnsRenderMode ?? {},
     [viewOptions]
   );
   if (run.type !== "query_diff") {
     throw new Error("QueryDiffResult view should be rendered as query_diff");
   }
-  const gridData = React11.useMemo(() => {
+  const gridData = React12.useMemo(() => {
     const onColumnsRenderModeChanged = (cols) => {
       const newRenderModes = {
         ...viewOptions?.columnsRenderMode ?? {},
@@ -5600,7 +5716,7 @@ var PrivateQueryDiffResultView = ({
     currentTitle,
     columnsRenderMode
   ]);
-  const warningPKey = React11.useMemo(() => {
+  const warningPKey = React12.useMemo(() => {
     const pkName = primaryKeys.join(", ");
     if (gridData.invalidPKeyBase && gridData.invalidPKeyCurrent) {
       return `Warning: The primary key '${pkName}' is not unique in the base and current environments`;
@@ -5639,7 +5755,7 @@ var PrivateQueryDiffResultView = ({
       sx: {
         display: "flex",
         flexDirection: "column",
-        bgcolor: "rgb(249, 249, 249)",
+        bgcolor: isDark ? "grey.900" : "grey.50",
         height: "100%"
       },
       children: [
@@ -5712,26 +5828,28 @@ var PrivateQueryDiffJoinResultView = ({
   baseTitle,
   currentTitle
 }, ref) => {
+  const theme = styles.useTheme();
+  const isDark = theme.palette.mode === "dark";
   if (run.type !== "query_diff") {
     throw new Error("QueryDiffResult view should be rendered as query_diff");
   }
-  const changedOnly = React11.useMemo(
+  const changedOnly = React12.useMemo(
     () => viewOptions?.changed_only ?? false,
     [viewOptions]
   );
-  const pinnedColumns = React11.useMemo(
+  const pinnedColumns = React12.useMemo(
     () => viewOptions?.pinned_columns ?? [],
     [viewOptions]
   );
-  const displayMode = React11.useMemo(
+  const displayMode = React12.useMemo(
     () => viewOptions?.display_mode ?? "inline",
     [viewOptions]
   );
-  const columnsRenderMode = React11.useMemo(
+  const columnsRenderMode = React12.useMemo(
     () => viewOptions?.columnsRenderMode ?? {},
     [viewOptions]
   );
-  const gridData = React11.useMemo(() => {
+  const gridData = React12.useMemo(() => {
     const onColumnsRenderModeChanged = (cols) => {
       const newRenderModes = {
         ...viewOptions?.columnsRenderMode ?? {},
@@ -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: [
@@ -5835,7 +5953,7 @@ var PrivateQueryDiffJoinResultView = ({
       sx: {
         display: "flex",
         flexDirection: "column",
-        bgcolor: "rgb(249, 249, 249)",
+        bgcolor: isDark ? "grey.900" : "grey.50",
         height: "100%"
       },
       children: [
@@ -5901,11 +6019,11 @@ var PrivateQueryDiffJoinResultView = ({
     }
   );
 };
-var QueryDiffResultViewWithRef = React11.forwardRef(PrivateQueryDiffResultView);
-var QueryDiffJoinResultViewWithRef = React11.forwardRef(
+var QueryDiffResultViewWithRef = React12.forwardRef(PrivateQueryDiffResultView);
+var QueryDiffJoinResultViewWithRef = React12.forwardRef(
   PrivateQueryDiffJoinResultView
 );
-var QueryDiffResultView = React11.forwardRef(
+var QueryDiffResultView = React12.forwardRef(
   (props, ref) => {
     let baseTitle;
     let currentTitle;
@@ -5942,19 +6060,21 @@ var PrivateQueryResultView = ({
   onViewOptionsChanged,
   onAddToChecklist
 }, ref) => {
+  const theme = styles.useTheme();
+  const isDark = theme.palette.mode === "dark";
   if (!(isQueryRun(run) || isQueryBaseRun(run))) {
     throw new Error("run type must be query");
   }
-  const pinnedColumns = React11.useMemo(
+  const pinnedColumns = React12.useMemo(
     () => viewOptions?.pinned_columns ?? [],
     [viewOptions]
   );
-  const columnsRenderMode = React11.useMemo(
+  const columnsRenderMode = React12.useMemo(
     () => viewOptions?.columnsRenderMode ?? {},
     [viewOptions]
   );
   const dataframe = run.result;
-  const gridData = React11.useMemo(() => {
+  const gridData = React12.useMemo(() => {
     const onColumnsRenderModeChanged = (cols) => {
       const newRenderModes = {
         ...viewOptions?.columnsRenderMode ?? {},
@@ -6005,25 +6125,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__ */ jsxRuntime.jsxs(Stack5__default.default, { sx: { bgcolor: "rgb(249, 249, 249)", height: "100%" }, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Stack5__default.default, { sx: { bgcolor: isDark ? "grey.900" : "grey.50", height: "100%" }, children: [
     showTopBar && /* @__PURE__ */ jsxRuntime.jsxs(
       Stack5__default.default,
       {
         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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(
-              Box21__default.default,
+              pi.PiWarning,
               {
-                component: pi.PiWarning,
-                sx: { color: "amber.600", alignSelf: "center" }
+                color: isDark ? colors.amber[400] : colors.amber[600],
+                style: { alignSelf: "center" }
               }
             ),
             " ",
@@ -6059,17 +6181,19 @@ var PrivateQueryResultView = ({
           maxWidth: 800,
           minWidth: 35
         },
-        className: "rdg-light"
+        className: isDark ? "rdg-dark" : "rdg-light"
       }
     )
   ] });
 };
-var QueryResultView = React11.forwardRef(PrivateQueryResultView);
+var QueryResultView = React12.forwardRef(PrivateQueryResultView);
 function _RowCountGridView({ run, typeGuard, expectedType }, ref) {
+  const theme = styles.useTheme();
+  const isDark = theme.palette.mode === "dark";
   if (!typeGuard(run)) {
     throw new Error(`Run type must be ${expectedType}`);
   }
-  const gridData = React11.useMemo(() => {
+  const gridData = React12.useMemo(() => {
     return createDataGrid(run) ?? { columns: [], rows: [] };
   }, [run]);
   if (gridData.rows.length === 0) {
@@ -6080,7 +6204,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"
@@ -6105,7 +6229,7 @@ function _RowCountGridView({ run, typeGuard, expectedType }, ref) {
     }
   ) });
 }
-var RowCountGridView = React11.forwardRef(_RowCountGridView);
+var RowCountGridView = React12.forwardRef(_RowCountGridView);
 function _RowCountDiffResultView({ run }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     RowCountGridView,
@@ -6128,8 +6252,8 @@ function _RowCountResultView({ run }, ref) {
     }
   );
 }
-var RowCountDiffResultView = React11.forwardRef(_RowCountDiffResultView);
-var RowCountResultView = React11.forwardRef(_RowCountResultView);
+var RowCountDiffResultView = React12.forwardRef(_RowCountDiffResultView);
+var RowCountResultView = React12.forwardRef(_RowCountResultView);
 function TopKDiffForm({
   params,
   onParamsChanged,
@@ -6137,7 +6261,7 @@ function TopKDiffForm({
 }) {
   const { columns, isLoading, error } = useModelColumns_default(params.model);
   const columnNames = columns.map((c) => c.name);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     setIsReadyToExecute(!!params.column_name);
   }, [params, setIsReadyToExecute]);
   if (isLoading) {
@@ -6164,7 +6288,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);
@@ -6200,6 +6324,7 @@ function prepareSummaryList(topK, isDisplayTopTen) {
 function TopKChartTooltip({
   base,
   current,
+  barColors,
   children
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -6207,7 +6332,7 @@ function TopKChartTooltip({
     {
       title: /* @__PURE__ */ jsxRuntime.jsxs(Box21__default.default, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs(Typography9__default.default, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(SquareIcon, { color: CURRENT_BAR_COLOR }),
+          /* @__PURE__ */ jsxRuntime.jsx(SquareIcon, { color: barColors.current }),
           "Current: ",
           current.count,
           " (",
@@ -6215,7 +6340,7 @@ function TopKChartTooltip({
           ")"
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(Typography9__default.default, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(SquareIcon, { color: BASE_BAR_COLOR }),
+          /* @__PURE__ */ jsxRuntime.jsx(SquareIcon, { color: barColors.base }),
           "Base: ",
           base.count,
           " (",
@@ -6232,6 +6357,9 @@ function TopKSummaryBarChart({
   topKDiff,
   isDisplayTopTen
 }) {
+  const theme = styles.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__ */ jsxRuntime.jsxs(Box21__default.default, { sx: { width: "100%", px: 20, py: 2 }, children: [
@@ -6241,9 +6369,9 @@ function TopKSummaryBarChart({
         Typography9__default.default,
         {
           component: "h3",
-          sx: { fontSize: "0.875rem", p: 1, color: "gray" },
+          sx: { fontSize: "0.875rem", p: 1, color: "text.secondary" },
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(SquareIcon, { color: BASE_BAR_COLOR }),
+            /* @__PURE__ */ jsxRuntime.jsx(SquareIcon, { color: barColors.base }),
             " Base"
           ]
         }
@@ -6252,9 +6380,9 @@ function TopKSummaryBarChart({
         Typography9__default.default,
         {
           component: "h3",
-          sx: { fontSize: "0.875rem", p: 1, color: "gray" },
+          sx: { fontSize: "0.875rem", p: 1, color: "text.secondary" },
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(SquareIcon, { color: CURRENT_BAR_COLOR }),
+            /* @__PURE__ */ jsxRuntime.jsx(SquareIcon, { color: barColors.current }),
             " Current"
           ]
         }
@@ -6266,115 +6394,125 @@ function TopKSummaryBarChart({
       if (current.isLastItemOthers && current.count === 0 && base.count === 0) {
         return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
       }
-      return /* @__PURE__ */ jsxRuntime.jsxs(React11.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(TopKChartTooltip, { base, current, children: /* @__PURE__ */ jsxRuntime.jsxs(
-          Box21__default.default,
+      return /* @__PURE__ */ jsxRuntime.jsxs(React12.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TopKChartTooltip,
           {
-            sx: {
-              display: "flex",
-              alignItems: "center",
-              width: "100%",
-              "&:hover": { bgcolor: "action.hover" },
-              px: 2
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                Typography9__default.default,
-                {
-                  sx: {
-                    width: "10em",
-                    fontSize: "0.875rem",
-                    color: current.isSpecialLabel ? "grey.400" : "inherit",
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
-                    whiteSpace: "nowrap"
-                  },
-                  children: current.label
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                Box21__default.default,
-                {
-                  sx: {
-                    display: "flex",
-                    width: "70%",
-                    flexDirection: "column"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs(Box21__default.default, { sx: { display: "flex", height: "1em" }, children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        CategoricalBarChart,
-                        {
-                          topkCount: current.count,
-                          topkLabel: current.label,
-                          valids: topKDiff.current.valids,
-                          color: CURRENT_BAR_COLOR
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        Typography9__default.default,
-                        {
-                          sx: {
-                            ml: 2.5,
-                            mr: 1,
-                            fontSize: "0.875rem",
-                            width: "6em"
-                          },
-                          children: current.displayCount
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        Typography9__default.default,
-                        {
-                          sx: {
-                            color: "grey.400",
-                            fontSize: "0.875rem",
-                            width: "4em"
-                          },
-                          children: current.displayRatio
-                        }
-                      )
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(Box21__default.default, { sx: { display: "flex", height: "1em" }, children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        CategoricalBarChart,
-                        {
-                          topkCount: base.count,
-                          topkLabel: base.label,
-                          valids: topKDiff.base.valids,
-                          color: BASE_BAR_COLOR
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        Typography9__default.default,
-                        {
-                          sx: {
-                            ml: 2.5,
-                            mr: 1,
-                            fontSize: "0.875rem",
-                            width: "6em"
-                          },
-                          children: base.displayCount
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        Typography9__default.default,
-                        {
-                          sx: {
-                            color: "grey.400",
-                            fontSize: "0.875rem",
-                            width: "4em"
-                          },
-                          children: base.displayRatio
-                        }
-                      )
-                    ] })
-                  ]
-                }
-              )
-            ]
+            base,
+            current,
+            barColors,
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              Box21__default.default,
+              {
+                sx: {
+                  display: "flex",
+                  alignItems: "center",
+                  width: "100%",
+                  "&:hover": { bgcolor: "action.hover" },
+                  px: 2
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Typography9__default.default,
+                    {
+                      sx: {
+                        width: "10em",
+                        fontSize: "0.875rem",
+                        color: current.isSpecialLabel ? "grey.400" : "inherit",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap"
+                      },
+                      children: current.label
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    Box21__default.default,
+                    {
+                      sx: {
+                        display: "flex",
+                        width: "70%",
+                        flexDirection: "column"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs(Box21__default.default, { sx: { display: "flex", height: "1em" }, children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            CategoricalBarChart,
+                            {
+                              topkCount: current.count,
+                              topkLabel: current.label,
+                              valids: topKDiff.current.valids,
+                              color: barColors.current,
+                              isDark
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            Typography9__default.default,
+                            {
+                              sx: {
+                                ml: 2.5,
+                                mr: 1,
+                                fontSize: "0.875rem",
+                                width: "6em"
+                              },
+                              children: current.displayCount
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            Typography9__default.default,
+                            {
+                              sx: {
+                                color: "grey.400",
+                                fontSize: "0.875rem",
+                                width: "4em"
+                              },
+                              children: current.displayRatio
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsxRuntime.jsxs(Box21__default.default, { sx: { display: "flex", height: "1em" }, children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            CategoricalBarChart,
+                            {
+                              topkCount: base.count,
+                              topkLabel: base.label,
+                              valids: topKDiff.base.valids,
+                              color: barColors.base,
+                              isDark
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            Typography9__default.default,
+                            {
+                              sx: {
+                                ml: 2.5,
+                                mr: 1,
+                                fontSize: "0.875rem",
+                                width: "6em"
+                              },
+                              children: base.displayCount
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            Typography9__default.default,
+                            {
+                              sx: {
+                                color: "grey.400",
+                                fontSize: "0.875rem",
+                                width: "4em"
+                              },
+                              children: base.displayRatio
+                            }
+                          )
+                        ] })
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
           }
-        ) }),
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(Divider__default.default, {})
       ] }, current.label);
     })
@@ -6385,10 +6523,13 @@ function CategoricalBarChart({
   topkLabel,
   valids,
   animation = false,
-  color = INFO_VAL_COLOR
+  color = INFO_VAL_COLOR2,
+  isDark = false
 }) {
   chart_js.Chart.register(chart_js.CategoryScale, chart_js.BarElement, chart_js.LinearScale);
-  const chartOptions = getCatBarChartOptions(topkCount, valids, { animation });
+  const chartOptions = getCatBarChartOptions(topkCount, valids, isDark, {
+    animation
+  });
   const chartData = getCatBarChartData({
     topkCount,
     topkLabel,
@@ -6396,7 +6537,8 @@ function CategoricalBarChart({
   });
   return /* @__PURE__ */ jsxRuntime.jsx(reactChartjs2.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,
@@ -6405,10 +6547,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: {
@@ -6422,7 +6566,7 @@ function getCatBarChartOptions(count, valids, { ...configOverrides } = {}) {
 function getCatBarChartData({
   topkLabel,
   topkCount,
-  color = INFO_VAL_COLOR
+  color = INFO_VAL_COLOR2
 }) {
   return {
     labels: [topkLabel],
@@ -6443,39 +6587,53 @@ function getCatBarChartData({
   };
 }
 var PrivateTopKDiffResultView = ({ run }, ref) => {
-  const [isDisplayTopTen, setIsDisplayTopTen] = React11.useState(true);
+  const theme = styles.useTheme();
+  const isDark = theme.palette.mode === "dark";
+  const [isDisplayTopTen, setIsDisplayTopTen] = React12.useState(true);
   const result = run.result;
   const params = run.params;
   const baseTopK = result.base;
   const currentTopK = result.current;
   return /* @__PURE__ */ jsxRuntime.jsxs(Box21__default.default, { sx: { display: "flex", flexDirection: "column", height: "100%" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(ScreenshotBox, { ref, blockSize: "auto", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        Typography9__default.default,
-        {
-          variant: "h5",
-          sx: { pt: 4, textAlign: "center", color: "grey.600" },
-          children: [
-            "Model ",
-            params.model,
-            ".",
-            params.column_name
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs(Stack5__default.default, { direction: "row", alignItems: "center", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Box21__default.default, { sx: { flex: 1 } }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          TopKSummaryBarChart,
-          {
-            topKDiff: result,
-            valids: currentTopK.valids || 0,
-            isDisplayTopTen
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(Box21__default.default, { sx: { flex: 1 } })
-      ] })
-    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      ScreenshotBox,
+      {
+        ref,
+        blockSize: "auto",
+        backgroundColor: isDark ? "#1f2937" : "white",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Typography9__default.default,
+            {
+              variant: "h5",
+              sx: {
+                pt: 4,
+                textAlign: "center",
+                color: isDark ? "grey.200" : "grey.600"
+              },
+              children: [
+                "Model ",
+                params.model,
+                ".",
+                params.column_name
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(Stack5__default.default, { direction: "row", alignItems: "center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Box21__default.default, { sx: { flex: 1 } }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              TopKSummaryBarChart,
+              {
+                topKDiff: result,
+                valids: currentTopK.valids || 0,
+                isDisplayTopTen
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(Box21__default.default, { sx: { flex: 1 } })
+          ] })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(Box21__default.default, { sx: { flex: 1 } }),
     (baseTopK.values.length > 10 || currentTopK.values.length > 10) && /* @__PURE__ */ jsxRuntime.jsx(Box21__default.default, { sx: { display: "flex", p: 5, justifyContent: "start" }, children: /* @__PURE__ */ jsxRuntime.jsx(
       Link__default.default,
@@ -6490,33 +6648,35 @@ var PrivateTopKDiffResultView = ({ run }, ref) => {
     ) })
   ] });
 };
-var TopKDiffResultView = React11.forwardRef(PrivateTopKDiffResultView);
+var TopKDiffResultView = React12.forwardRef(PrivateTopKDiffResultView);
 var PrivateValueDiffDetailResultView = ({
   run,
   onAddToChecklist,
   viewOptions,
   onViewOptionsChanged
 }, ref) => {
+  const theme = styles.useTheme();
+  const isDark = theme.palette.mode === "dark";
   if (!isValueDiffDetailRun(run)) {
     throw new Error("run type must be value_diff_detail");
   }
-  const changedOnly = React11.useMemo(
+  const changedOnly = React12.useMemo(
     () => viewOptions?.changed_only ?? false,
     [viewOptions]
   );
-  const pinnedColumns = React11.useMemo(
+  const pinnedColumns = React12.useMemo(
     () => viewOptions?.pinned_columns ?? [],
     [viewOptions]
   );
-  const displayMode = React11.useMemo(
+  const displayMode = React12.useMemo(
     () => viewOptions?.display_mode ?? "inline",
     [viewOptions]
   );
-  const columnsRenderMode = React11.useMemo(
+  const columnsRenderMode = React12.useMemo(
     () => viewOptions?.columnsRenderMode ?? {},
     [viewOptions]
   );
-  const gridData = React11.useMemo(() => {
+  const gridData = React12.useMemo(() => {
     const onColumnsRenderModeChanged = (cols) => {
       const newRenderModes = {
         ...viewOptions?.columnsRenderMode ?? {},
@@ -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: [
@@ -6616,7 +6776,7 @@ var PrivateValueDiffDetailResultView = ({
       sx: {
         display: "flex",
         flexDirection: "column",
-        bgcolor: "rgb(249, 249, 249)",
+        bgcolor: isDark ? "grey.900" : "grey.50",
         height: "100%"
       },
       children: [
@@ -6678,7 +6838,7 @@ var PrivateValueDiffDetailResultView = ({
     }
   );
 };
-var ValueDiffDetailResultView = React11.forwardRef(
+var ValueDiffDetailResultView = React12.forwardRef(
   PrivateValueDiffDetailResultView
 );
 function ValueDiffForm({
@@ -6686,18 +6846,72 @@ function ValueDiffForm({
   onParamsChanged,
   setIsReadyToExecute
 }) {
-  const [allColumns, setAllColumns] = React11.useState(
+  const theme = styles.useTheme();
+  const isDark = theme.palette.mode === "dark";
+  const [allColumns, setAllColumns] = React12.useState(
     !params.columns || params.columns.length === 0
   );
   const model = params.model;
   const primaryKey = params.primary_key;
+  const selectStyles = React12.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,
     isLoading,
     error
   } = useModelColumns_default(params.model);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (!primaryKey && nodePrimaryKey) {
       onParamsChanged({
         ...params,
@@ -6705,7 +6919,7 @@ function ValueDiffForm({
       });
     }
   }, [primaryKey, nodePrimaryKey, params, onParamsChanged]);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     setIsReadyToExecute(!!(primaryKey && model));
   }, [primaryKey, model, setIsReadyToExecute]);
   const columnNames = columns.map((c) => c.name);
@@ -6750,16 +6964,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
         }
       )
     ] }),
@@ -6810,16 +7015,7 @@ function ValueDiffForm({
               columns: cols
             });
           },
-          styles: {
-            container: (base) => ({
-              ...base,
-              width: "100%"
-            }),
-            control: (base) => ({
-              ...base,
-              minHeight: "40px"
-            })
-          }
+          styles: selectStyles
         }
       )
     ] })
@@ -6862,27 +7058,35 @@ function _ValueDiffResultView({ run }, ref) {
           " removed)"
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          ScreenshotDataGrid,
+          Box21__default.default,
           {
-            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__ */ jsxRuntime.jsx(EmptyRowsRenderer, {}) },
-            defaultColumnOptions: { resizable: true },
-            className: "rdg-light"
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              ScreenshotDataGrid,
+              {
+                ref,
+                columns,
+                rows,
+                renderers: { noRowsFallback: /* @__PURE__ */ jsxRuntime.jsx(EmptyRowsRenderer, {}) },
+                defaultColumnOptions: { resizable: true },
+                className: "rdg-light"
+              }
+            )
           }
         )
       ]
     }
   );
 }
-var ValueDiffResultView = React11.forwardRef(_ValueDiffResultView);
+var ValueDiffResultView = React12.forwardRef(_ValueDiffResultView);
 
 // recce-source/js/src/components/run/registry.ts
 var registry = {
@@ -6972,7 +7176,7 @@ var findByRunType = (runType) => {
 function useAppLocation() {
   const router = navigation.useRouter();
   const pathname = navigation.usePathname();
-  const setLocation = React11.useCallback(
+  const setLocation = React12.useCallback(
     (to, options) => {
       if (options?.replace) {
         router.replace(to, { scroll: options?.scroll ?? true });
@@ -6984,7 +7188,7 @@ function useAppLocation() {
   );
   return [pathname, setLocation];
 }
-var RecceActionContext = React11.createContext({
+var RecceActionContext = React12.createContext({
   runAction: () => {
     return void 0;
   },
@@ -7011,27 +7215,27 @@ var RecceActionContext = React11.createContext({
 });
 var useCloseModalEffect = (onClose) => {
   const pathname = navigation.usePathname();
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     onClose();
   }, [onClose, pathname]);
 };
 function RecceActionContextProvider({
   children
 }) {
-  const [action, setAction] = React11.useState();
-  const [isModalOpen, setModalOpen] = React11.useState(false);
-  const onModalOpen = React11.useCallback(() => setModalOpen(true), []);
-  const onModalClose = React11.useCallback(() => setModalOpen(false), []);
-  const [isRunResultOpen, setRunResultOpen] = React11.useState(false);
-  const onResultPaneOpen = React11.useCallback(() => setRunResultOpen(true), []);
-  const closeRunResult = React11.useCallback(() => setRunResultOpen(false), []);
-  const [isHistoryOpen, setHistoryOpen] = React11.useState(false);
-  const showHistory = React11.useCallback(() => setHistoryOpen(true), []);
-  const closeHistory = React11.useCallback(() => setHistoryOpen(false), []);
-  const [runId, setRunId] = React11.useState();
+  const [action, setAction] = React12.useState();
+  const [isModalOpen, setModalOpen] = React12.useState(false);
+  const onModalOpen = React12.useCallback(() => setModalOpen(true), []);
+  const onModalClose = React12.useCallback(() => setModalOpen(false), []);
+  const [isRunResultOpen, setRunResultOpen] = React12.useState(false);
+  const onResultPaneOpen = React12.useCallback(() => setRunResultOpen(true), []);
+  const closeRunResult = React12.useCallback(() => setRunResultOpen(false), []);
+  const [isHistoryOpen, setHistoryOpen] = React12.useState(false);
+  const showHistory = React12.useCallback(() => setHistoryOpen(true), []);
+  const closeHistory = React12.useCallback(() => setHistoryOpen(false), []);
+  const [runId, setRunId] = React12.useState();
   const [location, setLocation] = useAppLocation();
   const queryClient = reactQuery.useQueryClient();
-  const showRunId = React11.useCallback(
+  const showRunId = React12.useCallback(
     async (runId2, refreshHistory) => {
       setRunId(runId2);
       onResultPaneOpen();
@@ -7041,11 +7245,11 @@ function RecceActionContextProvider({
     },
     [onResultPaneOpen, queryClient]
   );
-  const clearRunResult = React11.useCallback(() => {
+  const clearRunResult = React12.useCallback(() => {
     setRunId(void 0);
     closeRunResult();
   }, [closeRunResult]);
-  const runAction = React11.useCallback(
+  const runAction = React12.useCallback(
     async (type, params, options) => {
       try {
         const session = (/* @__PURE__ */ new Date()).getTime().toString();
@@ -7150,15 +7354,15 @@ function RecceActionContextProvider({
     }
   );
 }
-var useRecceActionContext = () => React11.useContext(RecceActionContext);
-var RecceCheckContext = React11.createContext({
+var useRecceActionContext = () => React12.useContext(RecceActionContext);
+var RecceCheckContext = React12.createContext({
   latestSelectedCheckId: "",
   setLatestSelectedCheckId: () => {
     return void 0;
   }
 });
 function RecceCheckContextProvider({ children }) {
-  const [selectCheckId, setSelectCheckId] = React11__default.default.useState("");
+  const [selectCheckId, setSelectCheckId] = React12__default.default.useState("");
   return /* @__PURE__ */ jsxRuntime.jsx(
     RecceCheckContext.Provider,
     {
@@ -7170,7 +7374,7 @@ function RecceCheckContextProvider({ children }) {
     }
   );
 }
-var useRecceCheckContext = () => React11.useContext(RecceCheckContext);
+var useRecceCheckContext = () => React12.useContext(RecceCheckContext);
 var defaultSqlQuery = 'select * from {{ ref("mymodel") }}';
 var defaultQueryContext = {
   sqlQuery: defaultSqlQuery,
@@ -7190,12 +7394,12 @@ var defaultQueryContext = {
     return void 0;
   }
 };
-var RecceQueryContext = React11.createContext(defaultQueryContext);
+var RecceQueryContext = React12.createContext(defaultQueryContext);
 function RecceQueryContextProvider({ children }) {
-  const [sqlQuery, setSqlQuery] = React11__default.default.useState(defaultSqlQuery);
-  const [baseSqlQuery, setBaseSqlQuery] = React11__default.default.useState(defaultSqlQuery);
-  const [isCustomQueries, setCustomQueries] = React11__default.default.useState(false);
-  const [primaryKeys, setPrimaryKeys] = React11__default.default.useState();
+  const [sqlQuery, setSqlQuery] = React12__default.default.useState(defaultSqlQuery);
+  const [baseSqlQuery, setBaseSqlQuery] = React12__default.default.useState(defaultSqlQuery);
+  const [isCustomQueries, setCustomQueries] = React12__default.default.useState(false);
+  const [primaryKeys, setPrimaryKeys] = React12__default.default.useState();
   return /* @__PURE__ */ jsxRuntime.jsx(
     RecceQueryContext.Provider,
     {
@@ -7213,18 +7417,18 @@ function RecceQueryContextProvider({ children }) {
     }
   );
 }
-var useRecceQueryContext = () => React11.useContext(RecceQueryContext);
+var useRecceQueryContext = () => React12.useContext(RecceQueryContext);
 var defaultRowCountStateContext = {
   isNodesFetching: [],
   setIsNodesFetching: () => {
     return void 0;
   }
 };
-var RowCountStateContext = React11.createContext(defaultRowCountStateContext);
+var RowCountStateContext = React12.createContext(defaultRowCountStateContext);
 function RowCountStateContextProvider({
   children
 }) {
-  const [isNodesFetching, setIsNodesFetching] = React11__default.default.useState([]);
+  const [isNodesFetching, setIsNodesFetching] = React12__default.default.useState([]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     RowCountStateContext.Provider,
     {
@@ -7233,19 +7437,19 @@ function RowCountStateContextProvider({
     }
   );
 }
-var useRowCountStateContext = () => React11.useContext(RowCountStateContext);
+var useRowCountStateContext = () => React12.useContext(RowCountStateContext);
 async function shareState() {
   return (await axiosClient.post(
     "/api/share"
   )).data;
 }
-var ShareState = React11.createContext(void 0);
+var ShareState = React12.createContext(void 0);
 function RecceShareStateContextProvider({
   children
 }) {
-  const [shareUrl, setShareUrl] = React11.useState();
-  const [isLoading, setIsLoading] = React11.useState(false);
-  const [error, setError] = React11.useState();
+  const [shareUrl, setShareUrl] = React12.useState();
+  const [isLoading, setIsLoading] = React12.useState(false);
+  const [error, setError] = React12.useState();
   const handleShareClick = async () => {
     setIsLoading(true);
     setError(void 0);
@@ -7272,7 +7476,7 @@ function RecceShareStateContextProvider({
   );
 }
 var useRecceShareStateContext = () => {
-  const context = React11.useContext(ShareState);
+  const context = React12.useContext(ShareState);
   if (!context) {
     throw new Error(
       "useRecceShareStateContext must be used within a RecceShareStateContextProvider"