@datarecce/ui 0.1.12 → 0.1.13

package/dist/components.js

@@ -3,7 +3,7 @@
 var CssBaseline = require('@mui/material/CssBaseline');
 var styles = require('@mui/material/styles');
 var nextThemes = require('next-themes');
-var React3 = require('react');
+var React4 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var MuiAlert = require('@mui/material/Alert');
 var CircularProgress4 = require('@mui/material/CircularProgress');
@@ -14,11 +14,12 @@ var Box35 = require('@mui/material/Box');
 var Button11 = require('@mui/material/Button');
 var react = require('@sentry/react');
 var ReactSplit = require('react-split');
-require('./styles-PJUYW64Y.css');
+require('./styles-QUPOR3LM.css');
 var react$1 = require('@xyflow/react');
 var Divider = require('@mui/material/Divider');
 var dagre = require('@dagrejs/dagre');
 require('@xyflow/react/dist/style.css');
+require('./styles-JV3V5MVO.css');
 var reactQuery = require('@tanstack/react-query');
 var axios = require('axios');
 var fi = require('react-icons/fi');
@@ -55,11 +56,11 @@ var vsc = require('react-icons/vsc');
 var pi = require('react-icons/pi');
 var MuiTooltip = require('@mui/material/Tooltip');
 var usehooksTs = require('usehooks-ts');
-require('./style-LYNBK7ND.css');
+require('./style-466WWZLM.css');
 var ListSubheader3 = 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 dateFns = require('date-fns');
 var saveAs = require('file-saver');
@@ -67,7 +68,6 @@ var htmlToImage = require('html-to-image');
 var fa = require('react-icons/fa');
 var fa6 = require('react-icons/fa6');
 var Chip2 = require('@mui/material/Chip');
-require('./styles-VXS6KNFS.css');
 var Skeleton = require('@mui/material/Skeleton');
 var ri = require('react-icons/ri');
 var bi = require('react-icons/bi');
@@ -106,7 +106,6 @@ var Markdown = require('react-markdown');
 var reactSyntaxHighlighter = require('react-syntax-highlighter');
 var prism = require('react-syntax-highlighter/dist/esm/styles/prism');
 var remarkGfm = require('remark-gfm');
-var Breadcrumbs = require('@mui/material/Breadcrumbs');
 var SimpleBar = require('simplebar-react');
 require('simplebar/dist/simplebar.min.css');
 var Card = require('@mui/material/Card');
@@ -117,7 +116,7 @@ var Badge = require('@mui/material/Badge');
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var CssBaseline__default = /*#__PURE__*/_interopDefault(CssBaseline);
-var React3__default = /*#__PURE__*/_interopDefault(React3);
+var React4__default = /*#__PURE__*/_interopDefault(React4);
 var MuiAlert__default = /*#__PURE__*/_interopDefault(MuiAlert);
 var CircularProgress4__default = /*#__PURE__*/_interopDefault(CircularProgress4);
 var Snackbar__default = /*#__PURE__*/_interopDefault(Snackbar);
@@ -175,7 +174,6 @@ var Grid2__default = /*#__PURE__*/_interopDefault(Grid2);
 var MuiAvatar__default = /*#__PURE__*/_interopDefault(MuiAvatar);
 var Markdown__default = /*#__PURE__*/_interopDefault(Markdown);
 var remarkGfm__default = /*#__PURE__*/_interopDefault(remarkGfm);
-var Breadcrumbs__default = /*#__PURE__*/_interopDefault(Breadcrumbs);
 var SimpleBar__default = /*#__PURE__*/_interopDefault(SimpleBar);
 var Card__default = /*#__PURE__*/_interopDefault(Card);
 var CardContent__default = /*#__PURE__*/_interopDefault(CardContent);
@@ -392,35 +390,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),
@@ -480,11 +451,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"
@@ -511,11 +502,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
@@ -562,9 +553,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
@@ -611,19 +602,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)
@@ -658,15 +649,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
@@ -675,22 +666,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
@@ -771,17 +762,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]
+      })
     }
   }
 };
@@ -1013,7 +1004,7 @@ function MuiProvider({
   enableCssBaseline = false
 }) {
   const { resolvedTheme } = nextThemes.useTheme();
-  const theme = React3.useMemo(() => {
+  const theme = React4.useMemo(() => {
     const mode = forcedTheme ?? resolvedTheme;
     return mode === "dark" ? darkTheme : lightTheme;
   }, [forcedTheme, resolvedTheme]);
@@ -1023,11 +1014,11 @@ function MuiProvider({
   ] });
 }
 var mui_provider_default = MuiProvider;
-var ToasterContext = React3.createContext(null);
+var ToasterContext = React4.createContext(null);
 var toastIdCounter = 0;
 function ToasterProvider({ children }) {
-  const [toasts, setToasts] = React3.useState([]);
-  const createToast = React3.useCallback((options) => {
+  const [toasts, setToasts] = React4.useState([]);
+  const createToast = React4.useCallback((options) => {
     const id = options.id || `toast-${++toastIdCounter}`;
     const newToast = {
       id,
@@ -1042,7 +1033,7 @@ function ToasterProvider({ children }) {
     });
     return id;
   }, []);
-  const dismiss = React3.useCallback((id) => {
+  const dismiss = React4.useCallback((id) => {
     setToasts(
       (prev) => prev.map((t) => t.id === id ? { ...t, open: false } : t)
     );
@@ -1050,7 +1041,7 @@ function ToasterProvider({ children }) {
       setToasts((prev) => prev.filter((t) => t.id !== id));
     }, 300);
   }, []);
-  const update = React3.useCallback((id, options) => {
+  const update = React4.useCallback((id, options) => {
     setToasts(
       (prev) => prev.map((t) => t.id === id ? { ...t, ...options } : t)
     );
@@ -1093,7 +1084,7 @@ function ToasterProvider({ children }) {
   ] });
 }
 function useToaster() {
-  const context = React3.useContext(ToasterContext);
+  const context = React4.useContext(ToasterContext);
   if (!context) {
     throw new Error("useToaster must be used within ToasterProvider");
   }
@@ -1129,8 +1120,8 @@ var toaster = {
   }
 };
 function Toaster() {
-  const [toasts, setToasts] = React3.useState([]);
-  React3.useState(() => {
+  const [toasts, setToasts] = React4.useState([]);
+  React4.useState(() => {
     const unsubscribe = toaster.subscribe((event) => {
       if (event.type === "create" && event.options) {
         const newToast = {
@@ -1211,8 +1202,9 @@ var Fallback = (errorData) => {
             display: "flex",
             flexDirection: "column",
             justifyContent: "flex-start",
-            bgcolor: "white",
-            border: "solid lightgray 1px",
+            bgcolor: "background.paper",
+            border: "solid 1px",
+            borderColor: "divider",
             minHeight: "200px"
           },
           children: [
@@ -1281,7 +1273,7 @@ var VSplit = (props) => {
     }
   );
 };
-var ScreenshotBox = React3.forwardRef(
+var ScreenshotBox = React4.forwardRef(
   ({
     backgroundColor = "white",
     blockSize,
@@ -1742,6 +1734,17 @@ function formatDuration(totalSeconds, style = "verbose") {
   }
   return formatVerbose(components);
 }
+var ApiConfigContext = React4.createContext(null);
+var defaultApiConfigContext = {
+  apiPrefix: "",
+  authToken: void 0,
+  baseUrl: void 0,
+  apiClient: axios__default.default.create({ baseURL: PUBLIC_API_URL })
+};
+function useApiConfig() {
+  const context = React4.useContext(ApiConfigContext);
+  return context ?? defaultApiConfigContext;
+}
 
 // recce-source/js/src/lib/api/cacheKeys.ts
 var cacheKeys = {
@@ -1759,11 +1762,20 @@ var cacheKeys = {
 };
 
 // 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;
 }
+
+// recce-source/js/src/lib/hooks/useRecceInstanceInfo.tsx
+var useRecceInstanceInfo = () => {
+  const { apiClient } = useApiConfig();
+  return reactQuery.useQuery({
+    queryKey: cacheKeys.instanceInfo(),
+    queryFn: () => getRecceInstanceInfo(apiClient)
+  });
+};
 var defaultFeatureToggles = {
   mode: null,
   disableSaveToFile: false,
@@ -1783,12 +1795,12 @@ var defaultValue = {
   shareUrl: void 0,
   sessionId: void 0
 };
-var InstanceInfo = React3.createContext(defaultValue);
-var useRecceInstanceContext = () => React3.useContext(InstanceInfo);
+var InstanceInfo = React4.createContext(defaultValue);
+var useRecceInstanceContext = () => React4.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 getModelInfo(model) {
   return (await axiosClient.get(
@@ -1850,28 +1862,29 @@ async function listRuns() {
   );
   return response.data;
 }
-var IdleTimeoutContext = React3.createContext(
+var IdleTimeoutContext = React4.createContext(
   void 0
 );
 function useIdleTimeout() {
-  const context = React3.useContext(IdleTimeoutContext);
+  const context = React4.useContext(IdleTimeoutContext);
   if (!context) {
     throw new Error("useIdleTimeout must be used within IdleTimeoutProvider");
   }
   return context;
 }
 var useRecceServerFlag = () => {
+  const { apiClient } = useApiConfig();
   return reactQuery.useQuery({
     queryKey: cacheKeys.flag(),
-    queryFn: getServerFlag
+    queryFn: () => getServerFlag(apiClient)
   });
 };
 var defaultLineageGraphsContext = {
   isActionAvailable: () => true,
   isDemoSite: false
 };
-var LineageGraphContext = React3.createContext(defaultLineageGraphsContext);
-var useLineageGraphContext = () => React3.useContext(LineageGraphContext);
+var LineageGraphContext = React4.createContext(defaultLineageGraphsContext);
+var useLineageGraphContext = () => React4.useContext(LineageGraphContext);
 var useRunsAggregated = () => {
   const { runsAggregated, refetchRunsAggregated } = useLineageGraphContext();
   return [runsAggregated, refetchRunsAggregated];
@@ -2041,13 +2054,13 @@ var RunModal = ({
   params: defaultParams,
   RunForm
 }) => {
-  const [params, setParams] = React3.useState(
+  const [params, setParams] = React4.useState(
     defaultParams ?? {}
   );
-  const [anchorEl, setAnchorEl] = React3.useState(null);
-  const [isReadyToExecute, setIsReadyToExecute] = React3.useState(false);
+  const [anchorEl, setAnchorEl] = React4.useState(null);
+  const [isReadyToExecute, setIsReadyToExecute] = React4.useState(false);
   const documentationUrl = getDocumentationUrl(type);
-  const executeClicked = React3.useRef(false);
+  const executeClicked = React4.useRef(false);
   const handleClose = () => {
     if (!executeClicked.current && isExploreAction(type)) {
       trackExploreActionForm({
@@ -2149,8 +2162,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(Box35__default.default, { sx: { contain: "layout" }, children: RunForm && /* @__PURE__ */ jsxRuntime.jsx(
               RunForm,
@@ -2214,17 +2228,17 @@ var useModelColumns = (model) => {
       name: model
     }
   });
-  const nodeColumns = React3.useMemo(() => {
+  const nodeColumns = React4.useMemo(() => {
     return node ? extractColumns(node) : [];
   }, [node]);
-  const [columns, setColumns] = React3.useState([]);
-  const [primaryKey, setPrimaryKey] = React3.useState();
-  const [isLoading, setIsLoading] = React3.useState(true);
-  const [error, setError] = React3.useState(null);
-  const [prevNodeColumns, setPrevNodeColumns] = React3.useState([]);
-  const [prevNodeId, setPrevNodeId] = React3.useState(node?.id);
+  const [columns, setColumns] = React4.useState([]);
+  const [primaryKey, setPrimaryKey] = React4.useState();
+  const [isLoading, setIsLoading] = React4.useState(true);
+  const [error, setError] = React4.useState(null);
+  const [prevNodeColumns, setPrevNodeColumns] = React4.useState([]);
+  const [prevNodeId, setPrevNodeId] = React4.useState(node?.id);
   const nodePrimaryKey = node ? node.data.data.current?.primary_key : void 0;
-  const fetchData = React3.useCallback(async () => {
+  const fetchData = React4.useCallback(async () => {
     if (!node) {
       return;
     }
@@ -2255,7 +2269,7 @@ var useModelColumns = (model) => {
       setIsLoading(false);
     }
   }
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (nodeColumns.length === 0 && node?.id !== void 0) {
       fetchData().catch((e) => {
         console.error(e);
@@ -2451,10 +2465,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(
     Box35__default.default,
@@ -2478,6 +2538,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,
@@ -2487,8 +2549,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) {
@@ -2509,53 +2573,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 prefix3 = isDatetime ? DATE_RANGE : type === "string" ? TEXTLENGTH : VALUE_RANGE;
             return `${prefix3}
@@ -2572,15 +2648,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",
@@ -2597,7 +2674,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 = {
@@ -2606,9 +2684,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
   };
@@ -2618,12 +2697,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);
       }
@@ -2640,6 +2720,8 @@ function formatDisplayedBinItem(binEdges, currentIndex) {
   return `${formattedStart} - ${formattedEnd}`;
 }
 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");
   }
@@ -2652,37 +2734,45 @@ function _HistogramDiffResultView({ run }, ref) {
   if (!base || !current) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Loading..." });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(Box35__default.default, { sx: { display: "flex", flexDirection: "column", height: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(ScreenshotBox, { ref, height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(Box35__default.default, { sx: { display: "flex", flexDirection: "row" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Box35__default.default, { sx: { flex: 1 } }),
-    /* @__PURE__ */ jsxRuntime.jsx(Box35__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(Box35__default.default, { sx: { flex: 1 } })
-  ] }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(Box35__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(Box35__default.default, { sx: { display: "flex", flexDirection: "row" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Box35__default.default, { sx: { flex: 1 } }),
+        /* @__PURE__ */ jsxRuntime.jsx(Box35__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(Box35__default.default, { sx: { flex: 1 } })
+      ] })
+    }
+  ) });
 }
-var HistogramDiffResultView = React3.forwardRef(_HistogramDiffResultView);
+var HistogramDiffResultView = React4.forwardRef(_HistogramDiffResultView);
 function ProfileDiffForm({
   params,
   onParamsChanged,
   setIsReadyToExecute
 }) {
-  const [allColumns, setAllColumns] = React3.useState(
+  const [allColumns, setAllColumns] = React4.useState(
     !params.columns || params.columns.length === 0
   );
   const model = params.model;
   const { columns, isLoading, error } = useModelColumns_default(params.model);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     setIsReadyToExecute(!!model);
   }, [model, setIsReadyToExecute]);
   const columnNames = columns.map((c) => c.name);
@@ -2952,7 +3042,7 @@ function DataFrameColumnGroupHeader({
   onPinnedColumnsChange,
   onColumnsRenderModeChanged
 }) {
-  const [anchorEl, setAnchorEl] = React3.useState(null);
+  const [anchorEl, setAnchorEl] = React4.useState(null);
   const menuOpen = Boolean(anchorEl);
   const handleMenuClick = (event) => {
     setAnchorEl(event.currentTarget);
@@ -3075,7 +3165,7 @@ function DataFrameColumnHeader({
   columnType,
   onColumnsRenderModeChanged
 }) {
-  const [anchorEl, setAnchorEl] = React3.useState(null);
+  const [anchorEl, setAnchorEl] = React4.useState(null);
   const menuOpen = Boolean(anchorEl);
   const handleMenuClick = (event) => {
     setAnchorEl(event.currentTarget);
@@ -3394,8 +3484,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;
@@ -3415,6 +3505,31 @@ var defaultRenderCell = (params) => {
     }
   );
 };
+
+// recce-source/js/src/lib/hooks/useClipBoardToast.tsx
+function useClipBoardToast() {
+  function successToast(message) {
+    toaster.create({
+      description: message,
+      type: "info",
+      duration: 5e3,
+      closable: true
+    });
+  }
+  function failToast(title, error) {
+    toaster.create({
+      title,
+      description: String(error),
+      type: "error",
+      duration: 5e3,
+      closable: true
+    });
+  }
+  return {
+    successToast,
+    failToast
+  };
+}
 var DiffText = ({
   value,
   colorPalette,
@@ -3422,7 +3537,7 @@ var DiffText = ({
   noCopy,
   fontSize
 }) => {
-  const [isHovered, setIsHovered] = React3.useState(false);
+  const [isHovered, setIsHovered] = React4.useState(false);
   const textColor = colors[colorPalette][800];
   const bgColor = colors[colorPalette][100];
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3480,39 +3595,38 @@ function CopyControl({
   grayOut,
   isHovered
 }) {
-  const [copiedText, copyToClipboard] = usehooksTs.useCopyToClipboard();
-  const hasCopiedText = Boolean(copiedText);
-  if (noCopy || grayOut) {
+  const [, copyToClipboard] = usehooksTs.useCopyToClipboard();
+  const { successToast } = useClipBoardToast();
+  if (noCopy || grayOut || !isHovered) {
     return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
   }
-  if (hasCopiedText) {
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "Copied" });
-  }
-  if (!isHovered) {
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const handleCopy = () => {
+    copyToClipboard(value);
+    successToast(`${value} copied`);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(MuiTooltip__default.default, { title: "Copy Value", children: /* @__PURE__ */ jsxRuntime.jsx(
     IconButton2__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;
@@ -3697,8 +3811,7 @@ function toDiffColumn(config) {
       headerClass: headerCellClass,
       headerComponent,
       cellRenderer: inlineRenderCell,
-      columnType,
-      columnRenderMode
+      context: { columnType, columnRenderMode }
     };
   }
   const cellClassBase = createCellClassBase(name, columnStatus);
@@ -3707,8 +3820,7 @@ function toDiffColumn(config) {
     headerName: name,
     headerClass: headerCellClass,
     headerGroupComponent: headerComponent,
-    columnType,
-    columnRenderMode,
+    context: { columnType, columnRenderMode },
     children: [
       {
         field: `base__${name}`,
@@ -3716,8 +3828,7 @@ function toDiffColumn(config) {
         headerClass: headerCellClass,
         cellClass: cellClassBase,
         cellRenderer: defaultRenderCell,
-        columnType,
-        columnRenderMode
+        context: { columnType, columnRenderMode }
       },
       {
         field: `current__${name}`,
@@ -3725,8 +3836,7 @@ function toDiffColumn(config) {
         headerClass: headerCellClass,
         cellClass: cellClassCurrent,
         cellRenderer: defaultRenderCell,
-        columnType,
-        columnRenderMode
+        context: { columnType, columnRenderMode }
       }
     ]
   };
@@ -3764,8 +3874,7 @@ function createPrimaryKeyColumn(config, headerProps) {
       return void 0;
     },
     cellRenderer: defaultRenderCell,
-    columnType,
-    columnRenderMode
+    context: { columnType, columnRenderMode }
   };
 }
 function createDiffColumn(config, displayMode, headerProps, baseTitle, currentTitle) {
@@ -3954,8 +4063,7 @@ function createPrimaryKeyColumn2(config, headerProps) {
     ),
     pinned: "left",
     cellRenderer: defaultRenderCell,
-    columnType,
-    columnRenderMode
+    context: { columnType, columnRenderMode }
   };
 }
 function createRegularColumn(config, headerProps) {
@@ -3974,8 +4082,7 @@ function createRegularColumn(config, headerProps) {
       }
     ),
     cellRenderer: defaultRenderCell,
-    columnType,
-    columnRenderMode
+    context: { columnType, columnRenderMode }
   };
 }
 function buildSimpleColumnDefinitions(config) {
@@ -4474,9 +4581,9 @@ function toRowCountDiffDataGrid(result) {
   ];
   return { columns, rows };
 }
-var LineageViewContext = React3.createContext(void 0);
+var LineageViewContext = React4.createContext(void 0);
 var useLineageViewContextSafe = () => {
-  const context = React3.useContext(LineageViewContext);
+  const context = React4.useContext(LineageViewContext);
   if (!context) {
     throw new Error(
       "useLineageViewContext must be used within a LineageViewProvider"
@@ -4485,7 +4592,7 @@ var useLineageViewContextSafe = () => {
   return context;
 };
 var useLineageViewContext = () => {
-  return React3.useContext(LineageViewContext);
+  return React4.useContext(LineageViewContext);
 };
 function ColumnNameCell({
   model,
@@ -4499,7 +4606,7 @@ function ColumnNameCell({
   const { featureToggles } = useRecceInstanceContext();
   const { name, baseType, currentType, baseIndex, currentIndex } = row;
   const columnType = currentType ?? baseType;
-  const [anchorEl, setAnchorEl] = React3.useState(null);
+  const [anchorEl, setAnchorEl] = React4.useState(null);
   const menuOpen = Boolean(anchorEl);
   const handleMenuClick = (event) => {
     event.stopPropagation();
@@ -4698,7 +4805,7 @@ function renderIndexCell(params) {
   const value = isRemoved ? baseIndex !== void 0 ? baseIndex : "-" : currentIndex !== void 0 ? currentIndex : "-";
   return /* @__PURE__ */ jsxRuntime.jsx("span", { children: value });
 }
-var MemoizedRenderIndexCell = React3__default.default.memo(renderIndexCell);
+var MemoizedRenderIndexCell = React4__default.default.memo(renderIndexCell);
 MemoizedRenderIndexCell.displayName = "MemoizedRenderIndexCell";
 function renderTypeCell(params) {
   if (!params.data) {
@@ -4731,7 +4838,7 @@ function renderTypeCell(params) {
   }
   return /* @__PURE__ */ jsxRuntime.jsx("span", { children: isRemoved ? baseType : currentType });
 }
-var MemoizedRenderTypeCell = React3__default.default.memo(renderTypeCell);
+var MemoizedRenderTypeCell = React4__default.default.memo(renderTypeCell);
 MemoizedRenderTypeCell.displayName = "MemoizedRenderTypeCell";
 
 // recce-source/js/src/lib/dataGrid/generators/toSchemaDataGrid.ts
@@ -4864,7 +4971,7 @@ function ValueDiffColumnNameCell({
 }) {
   const { runAction } = useRecceActionContext();
   const { featureToggles } = useRecceInstanceContext();
-  const [anchorEl, setAnchorEl] = React3.useState(null);
+  const [anchorEl, setAnchorEl] = React4.useState(null);
   const menuOpen = Boolean(anchorEl);
   const handleMenuClick = (event) => {
     setAnchorEl(event.currentTarget);
@@ -5290,7 +5397,7 @@ var recceGridThemeLight = agGridCommunity.themeQuartz.withParams({
   headerFontWeight: 700,
   cellHorizontalPadding: 8
 });
-agGridCommunity.themeQuartz.withParams({
+var recceGridThemeDark = agGridCommunity.themeQuartz.withParams({
   backgroundColor: "#1e1e1e",
   headerBackgroundColor: "#252526",
   rowHoverColor: "#1e1e1e",
@@ -5336,9 +5443,9 @@ function _ScreenshotDataGrid({
   renderers,
   ...props
 }, ref) {
-  const containerRef = React3.useRef(null);
-  const gridApiRef = React3.useRef(null);
-  React3.useImperativeHandle(
+  const containerRef = React4.useRef(null);
+  const gridApiRef = React4.useRef(null);
+  React4.useImperativeHandle(
     ref,
     () => ({
       api: gridApiRef.current,
@@ -5346,11 +5453,15 @@ function _ScreenshotDataGrid({
     }),
     []
   );
-  const theme = React3.useMemo(() => recceGridThemeLight, []);
+  const muiTheme = styles.useTheme();
+  const gridTheme = React4.useMemo(
+    () => muiTheme.palette.mode === "dark" ? recceGridThemeDark : recceGridThemeLight,
+    [muiTheme.palette.mode]
+  );
   const resolvedColumnDefs = columnDefs ?? columns;
   const resolvedRowData = rowData ?? rows;
   const resolvedDefaultColDef = defaultColDef ?? defaultColumnOptions;
-  const mergedDefaultColDef = React3.useMemo(
+  const mergedDefaultColDef = React4.useMemo(
     () => ({
       resizable: true,
       suppressMovable: true,
@@ -5358,11 +5469,11 @@ function _ScreenshotDataGrid({
     }),
     [resolvedDefaultColDef]
   );
-  const noRowsOverlayComponent = React3.useMemo(() => {
+  const noRowsOverlayComponent = React4.useMemo(() => {
     if (!renderers?.noRowsFallback) return void 0;
     return () => renderers.noRowsFallback;
   }, [renderers?.noRowsFallback]);
-  const resolvedGetRowId = React3.useMemo(() => {
+  const resolvedGetRowId = React4.useMemo(() => {
     if (getRowId) return getRowId;
     return (params) => {
       const data = params.data;
@@ -5373,7 +5484,7 @@ function _ScreenshotDataGrid({
       return String(index ?? Math.random());
     };
   }, [getRowId]);
-  const gridKey = React3.useMemo(() => {
+  const gridKey = React4.useMemo(() => {
     if (!resolvedColumnDefs) return "grid";
     const pinnedFields = resolvedColumnDefs.filter(
       (col) => "field" in col && col.pinned === "left"
@@ -5408,18 +5519,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": {
@@ -5432,18 +5543,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,
@@ -5465,7 +5576,7 @@ function _ScreenshotDataGrid({
     }
   );
 }
-var ScreenshotDataGrid = React3.forwardRef(_ScreenshotDataGrid);
+var ScreenshotDataGrid = React4.forwardRef(_ScreenshotDataGrid);
 var ToggleSwitch = ({
   value,
   onChange,
@@ -5545,17 +5656,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(
     Box35__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(
@@ -5568,8 +5684,13 @@ var RunToolbar = ({
               gap: 0
             },
             children: warnings?.map((warning) => /* @__PURE__ */ jsxRuntime.jsxs(Box35__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}`)))
           }
@@ -5581,18 +5702,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 = React3.useMemo(
+  const pinnedColumns = React4.useMemo(
     () => viewOptions?.pinned_columns ?? [],
     [viewOptions]
   );
-  const displayMode = React3.useMemo(
+  const displayMode = React4.useMemo(
     () => viewOptions?.display_mode ?? "inline",
     [viewOptions]
   );
-  const columnsRenderMode = React3.useMemo(
+  const columnsRenderMode = React4.useMemo(
     () => ({
       distinct_proportion: "percent",
       not_null_proportion: "percent",
@@ -5600,7 +5723,7 @@ var PrivateProfileDiffResultView = ({ run, viewOptions, onViewOptionsChanged },
     }),
     [viewOptions]
   );
-  const gridData = React3.useMemo(() => {
+  const gridData = React4.useMemo(() => {
     const onColumnsRenderModeChanged = (cols) => {
       const newRenderModes = {
         ...viewOptions?.columnsRenderMode ?? {},
@@ -5656,7 +5779,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: [
@@ -5690,14 +5813,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 = React3.useMemo(
+  const pinnedColumns = React4.useMemo(
     () => viewOptions?.pinned_columns ?? [],
     [viewOptions]
   );
-  const columnsRenderMode = React3.useMemo(
+  const columnsRenderMode = React4.useMemo(
     () => ({
       distinct_proportion: "percent",
       not_null_proportion: "percent",
@@ -5705,7 +5830,7 @@ var PrivateProfileResultView = ({ run, viewOptions, onViewOptionsChanged }, ref)
     }),
     [viewOptions]
   );
-  const gridData = React3.useMemo(() => {
+  const gridData = React4.useMemo(() => {
     const onColumnsRenderModeChanged = (cols) => {
       const newRenderModes = {
         ...viewOptions?.columnsRenderMode ?? {},
@@ -5759,7 +5884,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(
@@ -5776,8 +5901,8 @@ var PrivateProfileResultView = ({ run, viewOptions, onViewOptionsChanged }, ref)
     }
   );
 };
-var ProfileDiffResultView = React3.forwardRef(PrivateProfileDiffResultView);
-var ProfileResultView = React3.forwardRef(PrivateProfileResultView);
+var ProfileDiffResultView = React4.forwardRef(PrivateProfileDiffResultView);
+var ProfileResultView = React4.forwardRef(PrivateProfileResultView);
 var ChangedOnlyCheckbox = ({
   changedOnly,
   onChange
@@ -5810,30 +5935,32 @@ var PrivateQueryDiffResultView = ({
   baseTitle,
   currentTitle
 }, ref) => {
-  const primaryKeys = React3.useMemo(
+  const theme = styles.useTheme();
+  const isDark = theme.palette.mode === "dark";
+  const primaryKeys = React4.useMemo(
     () => viewOptions?.primary_keys ?? [],
     [viewOptions]
   );
-  const changedOnly = React3.useMemo(
+  const changedOnly = React4.useMemo(
     () => viewOptions?.changed_only ?? false,
     [viewOptions]
   );
-  const pinnedColumns = React3.useMemo(
+  const pinnedColumns = React4.useMemo(
     () => viewOptions?.pinned_columns ?? [],
     [viewOptions]
   );
-  const displayMode = React3.useMemo(
+  const displayMode = React4.useMemo(
     () => viewOptions?.display_mode ?? "inline",
     [viewOptions]
   );
-  const columnsRenderMode = React3.useMemo(
+  const columnsRenderMode = React4.useMemo(
     () => viewOptions?.columnsRenderMode ?? {},
     [viewOptions]
   );
   if (run.type !== "query_diff") {
     throw new Error("QueryDiffResult view should be rendered as query_diff");
   }
-  const gridData = React3.useMemo(() => {
+  const gridData = React4.useMemo(() => {
     const onColumnsRenderModeChanged = (cols) => {
       const newRenderModes = {
         ...viewOptions?.columnsRenderMode ?? {},
@@ -5885,7 +6012,7 @@ var PrivateQueryDiffResultView = ({
     currentTitle,
     columnsRenderMode
   ]);
-  const warningPKey = React3.useMemo(() => {
+  const warningPKey = React4.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`;
@@ -5924,7 +6051,7 @@ var PrivateQueryDiffResultView = ({
       sx: {
         display: "flex",
         flexDirection: "column",
-        bgcolor: "rgb(249, 249, 249)",
+        bgcolor: isDark ? "grey.900" : "grey.50",
         height: "100%"
       },
       children: [
@@ -5997,26 +6124,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 = React3.useMemo(
+  const changedOnly = React4.useMemo(
     () => viewOptions?.changed_only ?? false,
     [viewOptions]
   );
-  const pinnedColumns = React3.useMemo(
+  const pinnedColumns = React4.useMemo(
     () => viewOptions?.pinned_columns ?? [],
     [viewOptions]
   );
-  const displayMode = React3.useMemo(
+  const displayMode = React4.useMemo(
     () => viewOptions?.display_mode ?? "inline",
     [viewOptions]
   );
-  const columnsRenderMode = React3.useMemo(
+  const columnsRenderMode = React4.useMemo(
     () => viewOptions?.columnsRenderMode ?? {},
     [viewOptions]
   );
-  const gridData = React3.useMemo(() => {
+  const gridData = React4.useMemo(() => {
     const onColumnsRenderModeChanged = (cols) => {
       const newRenderModes = {
         ...viewOptions?.columnsRenderMode ?? {},
@@ -6085,7 +6214,7 @@ var PrivateQueryDiffJoinResultView = ({
         sx: {
           display: "flex",
           flexDirection: "column",
-          bgcolor: "rgb(249, 249, 249)",
+          bgcolor: isDark ? "grey.900" : "grey.50",
           height: "100%"
         },
         children: [
@@ -6120,7 +6249,7 @@ var PrivateQueryDiffJoinResultView = ({
       sx: {
         display: "flex",
         flexDirection: "column",
-        bgcolor: "rgb(249, 249, 249)",
+        bgcolor: isDark ? "grey.900" : "grey.50",
         height: "100%"
       },
       children: [
@@ -6186,11 +6315,11 @@ var PrivateQueryDiffJoinResultView = ({
     }
   );
 };
-var QueryDiffResultViewWithRef = React3.forwardRef(PrivateQueryDiffResultView);
-var QueryDiffJoinResultViewWithRef = React3.forwardRef(
+var QueryDiffResultViewWithRef = React4.forwardRef(PrivateQueryDiffResultView);
+var QueryDiffJoinResultViewWithRef = React4.forwardRef(
   PrivateQueryDiffJoinResultView
 );
-var QueryDiffResultView = React3.forwardRef(
+var QueryDiffResultView = React4.forwardRef(
   (props, ref) => {
     let baseTitle;
     let currentTitle;
@@ -6227,19 +6356,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 = React3.useMemo(
+  const pinnedColumns = React4.useMemo(
     () => viewOptions?.pinned_columns ?? [],
     [viewOptions]
   );
-  const columnsRenderMode = React3.useMemo(
+  const columnsRenderMode = React4.useMemo(
     () => viewOptions?.columnsRenderMode ?? {},
     [viewOptions]
   );
   const dataframe = run.result;
-  const gridData = React3.useMemo(() => {
+  const gridData = React4.useMemo(() => {
     const onColumnsRenderModeChanged = (cols) => {
       const newRenderModes = {
         ...viewOptions?.columnsRenderMode ?? {},
@@ -6290,25 +6421,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(Stack24__default.default, { sx: { bgcolor: "rgb(249, 249, 249)", height: "100%" }, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Stack24__default.default, { sx: { bgcolor: isDark ? "grey.900" : "grey.50", height: "100%" }, children: [
     showTopBar && /* @__PURE__ */ jsxRuntime.jsxs(
       Stack24__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(
-              Box35__default.default,
+              pi.PiWarning,
               {
-                component: pi.PiWarning,
-                sx: { color: "amber.600", alignSelf: "center" }
+                color: isDark ? colors.amber[400] : colors.amber[600],
+                style: { alignSelf: "center" }
               }
             ),
             " ",
@@ -6344,17 +6477,19 @@ var PrivateQueryResultView = ({
           maxWidth: 800,
           minWidth: 35
         },
-        className: "rdg-light"
+        className: isDark ? "rdg-dark" : "rdg-light"
       }
     )
   ] });
 };
-var QueryResultView = React3.forwardRef(PrivateQueryResultView);
+var QueryResultView = React4.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 = React3.useMemo(() => {
+  const gridData = React4.useMemo(() => {
     return createDataGrid(run) ?? { columns: [], rows: [] };
   }, [run]);
   if (gridData.rows.length === 0) {
@@ -6365,7 +6500,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"
@@ -6390,7 +6525,7 @@ function _RowCountGridView({ run, typeGuard, expectedType }, ref) {
     }
   ) });
 }
-var RowCountGridView = React3.forwardRef(_RowCountGridView);
+var RowCountGridView = React4.forwardRef(_RowCountGridView);
 function _RowCountDiffResultView({ run }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     RowCountGridView,
@@ -6413,8 +6548,8 @@ function _RowCountResultView({ run }, ref) {
     }
   );
 }
-var RowCountDiffResultView = React3.forwardRef(_RowCountDiffResultView);
-var RowCountResultView = React3.forwardRef(_RowCountResultView);
+var RowCountDiffResultView = React4.forwardRef(_RowCountDiffResultView);
+var RowCountResultView = React4.forwardRef(_RowCountResultView);
 function TopKDiffForm({
   params,
   onParamsChanged,
@@ -6422,7 +6557,7 @@ function TopKDiffForm({
 }) {
   const { columns, isLoading, error } = useModelColumns_default(params.model);
   const columnNames = columns.map((c) => c.name);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     setIsReadyToExecute(!!params.column_name);
   }, [params, setIsReadyToExecute]);
   if (isLoading) {
@@ -6449,7 +6584,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);
@@ -6485,6 +6620,7 @@ function prepareSummaryList(topK, isDisplayTopTen) {
 function TopKChartTooltip({
   base,
   current,
+  barColors,
   children
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -6492,7 +6628,7 @@ function TopKChartTooltip({
     {
       title: /* @__PURE__ */ jsxRuntime.jsxs(Box35__default.default, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs(Typography28__default.default, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(SquareIcon, { color: CURRENT_BAR_COLOR }),
+          /* @__PURE__ */ jsxRuntime.jsx(SquareIcon, { color: barColors.current }),
           "Current: ",
           current.count,
           " (",
@@ -6500,7 +6636,7 @@ function TopKChartTooltip({
           ")"
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(Typography28__default.default, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(SquareIcon, { color: BASE_BAR_COLOR }),
+          /* @__PURE__ */ jsxRuntime.jsx(SquareIcon, { color: barColors.base }),
           "Base: ",
           base.count,
           " (",
@@ -6517,6 +6653,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(Box35__default.default, { sx: { width: "100%", px: 20, py: 2 }, children: [
@@ -6526,9 +6665,9 @@ function TopKSummaryBarChart({
         Typography28__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"
           ]
         }
@@ -6537,9 +6676,9 @@ function TopKSummaryBarChart({
         Typography28__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"
           ]
         }
@@ -6551,121 +6690,134 @@ function TopKSummaryBarChart({
       if (current.isLastItemOthers && current.count === 0 && base.count === 0) {
         return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
       }
-      return /* @__PURE__ */ jsxRuntime.jsxs(React3.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(TopKChartTooltip, { base, current, children: /* @__PURE__ */ jsxRuntime.jsxs(
-          Box35__default.default,
+      return /* @__PURE__ */ jsxRuntime.jsxs(React4.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TopKChartTooltip,
           {
-            sx: {
-              display: "flex",
-              alignItems: "center",
-              width: "100%",
-              "&:hover": { bgcolor: "action.hover" },
-              px: 2
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                Typography28__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(
-                Box35__default.default,
-                {
-                  sx: {
-                    display: "flex",
-                    width: "70%",
-                    flexDirection: "column"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs(Box35__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(
-                        Typography28__default.default,
-                        {
-                          sx: {
-                            ml: 2.5,
-                            mr: 1,
-                            fontSize: "0.875rem",
-                            width: "6em"
-                          },
-                          children: current.displayCount
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        Typography28__default.default,
-                        {
-                          sx: {
-                            color: "grey.400",
-                            fontSize: "0.875rem",
-                            width: "4em"
-                          },
-                          children: current.displayRatio
-                        }
-                      )
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(Box35__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(
-                        Typography28__default.default,
-                        {
-                          sx: {
-                            ml: 2.5,
-                            mr: 1,
-                            fontSize: "0.875rem",
-                            width: "6em"
-                          },
-                          children: base.displayCount
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        Typography28__default.default,
-                        {
-                          sx: {
-                            color: "grey.400",
-                            fontSize: "0.875rem",
-                            width: "4em"
-                          },
-                          children: base.displayRatio
-                        }
-                      )
-                    ] })
-                  ]
-                }
-              )
-            ]
+            base,
+            current,
+            barColors,
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              Box35__default.default,
+              {
+                sx: {
+                  display: "flex",
+                  alignItems: "center",
+                  width: "100%",
+                  "&:hover": { bgcolor: "action.hover" },
+                  px: 2
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Typography28__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(
+                    Box35__default.default,
+                    {
+                      sx: {
+                        display: "flex",
+                        width: "70%",
+                        flexDirection: "column"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs(Box35__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(
+                            Typography28__default.default,
+                            {
+                              sx: {
+                                ml: 2.5,
+                                mr: 1,
+                                fontSize: "0.875rem",
+                                width: "6em"
+                              },
+                              children: current.displayCount
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            Typography28__default.default,
+                            {
+                              sx: {
+                                color: "grey.400",
+                                fontSize: "0.875rem",
+                                width: "4em"
+                              },
+                              children: current.displayRatio
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsxRuntime.jsxs(Box35__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(
+                            Typography28__default.default,
+                            {
+                              sx: {
+                                ml: 2.5,
+                                mr: 1,
+                                fontSize: "0.875rem",
+                                width: "6em"
+                              },
+                              children: base.displayCount
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            Typography28__default.default,
+                            {
+                              sx: {
+                                color: "grey.400",
+                                fontSize: "0.875rem",
+                                width: "4em"
+                              },
+                              children: base.displayRatio
+                            }
+                          )
+                        ] })
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
           }
-        ) }),
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(Divider__default.default, {})
       ] }, current.label);
     })
   ] });
 }
 function TopKSummaryList({ topk, valids, isDisplayTopTen }) {
+  const theme = styles.useTheme();
+  const isDark = theme.palette.mode === "dark";
+  const barColors = getBarColors(isDark);
   const endAtIndex = isDisplayTopTen ? 10 : topk.counts.length;
   const displayList = topk.counts.slice(0, endAtIndex);
   const remainingSumCount = valids - displayList.reduce((accum, curr) => accum + curr, 0);
@@ -6676,7 +6828,7 @@ function TopKSummaryList({ topk, valids, isDisplayTopTen }) {
     const topkLabel = isLastItemOthers ? "(others)" : catName || "(empty)";
     const displayTopkCount = formatAsAbbreviatedNumber(topkCount);
     const displayTopkRatio = formatIntervalMinMax(topkCount / valids);
-    return /* @__PURE__ */ jsxRuntime.jsx(React3.Fragment, { children: !isLastItemOthers || topkCount > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(React4.Fragment, { children: !isLastItemOthers || topkCount > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
         Box35__default.default,
         {
@@ -6707,7 +6859,9 @@ function TopKSummaryList({ topk, valids, isDisplayTopTen }) {
               {
                 topkCount,
                 topkLabel,
-                valids
+                valids,
+                color: barColors.info,
+                isDark
               }
             ) }),
             /* @__PURE__ */ jsxRuntime.jsx(MuiTooltip__default.default, { title: displayTopkCount, placement: "top-start", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -6748,10 +6902,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,
@@ -6759,7 +6916,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,
@@ -6768,10 +6926,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: {
@@ -6785,7 +6945,7 @@ function getCatBarChartOptions(count, valids, { ...configOverrides } = {}) {
 function getCatBarChartData({
   topkLabel,
   topkCount,
-  color = INFO_VAL_COLOR
+  color = INFO_VAL_COLOR2
 }) {
   return {
     labels: [topkLabel],
@@ -6806,39 +6966,53 @@ function getCatBarChartData({
   };
 }
 var PrivateTopKDiffResultView = ({ run }, ref) => {
-  const [isDisplayTopTen, setIsDisplayTopTen] = React3.useState(true);
+  const theme = styles.useTheme();
+  const isDark = theme.palette.mode === "dark";
+  const [isDisplayTopTen, setIsDisplayTopTen] = React4.useState(true);
   const result = run.result;
   const params = run.params;
   const baseTopK = result.base;
   const currentTopK = result.current;
   return /* @__PURE__ */ jsxRuntime.jsxs(Box35__default.default, { sx: { display: "flex", flexDirection: "column", height: "100%" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(ScreenshotBox, { ref, blockSize: "auto", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        Typography28__default.default,
-        {
-          variant: "h5",
-          sx: { pt: 4, textAlign: "center", color: "grey.600" },
-          children: [
-            "Model ",
-            params.model,
-            ".",
-            params.column_name
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs(Stack24__default.default, { direction: "row", alignItems: "center", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Box35__default.default, { sx: { flex: 1 } }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          TopKSummaryBarChart,
-          {
-            topKDiff: result,
-            valids: currentTopK.valids || 0,
-            isDisplayTopTen
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(Box35__default.default, { sx: { flex: 1 } })
-      ] })
-    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      ScreenshotBox,
+      {
+        ref,
+        blockSize: "auto",
+        backgroundColor: isDark ? "#1f2937" : "white",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Typography28__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(Stack24__default.default, { direction: "row", alignItems: "center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Box35__default.default, { sx: { flex: 1 } }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              TopKSummaryBarChart,
+              {
+                topKDiff: result,
+                valids: currentTopK.valids || 0,
+                isDisplayTopTen
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(Box35__default.default, { sx: { flex: 1 } })
+          ] })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(Box35__default.default, { sx: { flex: 1 } }),
     (baseTopK.values.length > 10 || currentTopK.values.length > 10) && /* @__PURE__ */ jsxRuntime.jsx(Box35__default.default, { sx: { display: "flex", p: 5, justifyContent: "start" }, children: /* @__PURE__ */ jsxRuntime.jsx(
       Link__default.default,
@@ -6853,33 +7027,35 @@ var PrivateTopKDiffResultView = ({ run }, ref) => {
     ) })
   ] });
 };
-var TopKDiffResultView = React3.forwardRef(PrivateTopKDiffResultView);
+var TopKDiffResultView = React4.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 = React3.useMemo(
+  const changedOnly = React4.useMemo(
     () => viewOptions?.changed_only ?? false,
     [viewOptions]
   );
-  const pinnedColumns = React3.useMemo(
+  const pinnedColumns = React4.useMemo(
     () => viewOptions?.pinned_columns ?? [],
     [viewOptions]
   );
-  const displayMode = React3.useMemo(
+  const displayMode = React4.useMemo(
     () => viewOptions?.display_mode ?? "inline",
     [viewOptions]
   );
-  const columnsRenderMode = React3.useMemo(
+  const columnsRenderMode = React4.useMemo(
     () => viewOptions?.columnsRenderMode ?? {},
     [viewOptions]
   );
-  const gridData = React3.useMemo(() => {
+  const gridData = React4.useMemo(() => {
     const onColumnsRenderModeChanged = (cols) => {
       const newRenderModes = {
         ...viewOptions?.columnsRenderMode ?? {},
@@ -6944,7 +7120,7 @@ var PrivateValueDiffDetailResultView = ({
         sx: {
           display: "flex",
           flexDirection: "column",
-          bgcolor: "rgb(249, 249, 249)",
+          bgcolor: isDark ? "grey.900" : "grey.50",
           height: "100%"
         },
         children: [
@@ -6979,7 +7155,7 @@ var PrivateValueDiffDetailResultView = ({
       sx: {
         display: "flex",
         flexDirection: "column",
-        bgcolor: "rgb(249, 249, 249)",
+        bgcolor: isDark ? "grey.900" : "grey.50",
         height: "100%"
       },
       children: [
@@ -7041,7 +7217,7 @@ var PrivateValueDiffDetailResultView = ({
     }
   );
 };
-var ValueDiffDetailResultView = React3.forwardRef(
+var ValueDiffDetailResultView = React4.forwardRef(
   PrivateValueDiffDetailResultView
 );
 function ValueDiffForm({
@@ -7049,18 +7225,72 @@ function ValueDiffForm({
   onParamsChanged,
   setIsReadyToExecute
 }) {
-  const [allColumns, setAllColumns] = React3.useState(
+  const theme = styles.useTheme();
+  const isDark = theme.palette.mode === "dark";
+  const [allColumns, setAllColumns] = React4.useState(
     !params.columns || params.columns.length === 0
   );
   const model = params.model;
   const primaryKey = params.primary_key;
+  const selectStyles = React4.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);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (!primaryKey && nodePrimaryKey) {
       onParamsChanged({
         ...params,
@@ -7068,7 +7298,7 @@ function ValueDiffForm({
       });
     }
   }, [primaryKey, nodePrimaryKey, params, onParamsChanged]);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     setIsReadyToExecute(!!(primaryKey && model));
   }, [primaryKey, model, setIsReadyToExecute]);
   const columnNames = columns.map((c) => c.name);
@@ -7113,16 +7343,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
         }
       )
     ] }),
@@ -7173,16 +7394,7 @@ function ValueDiffForm({
               columns: cols
             });
           },
-          styles: {
-            container: (base) => ({
-              ...base,
-              width: "100%"
-            }),
-            control: (base) => ({
-              ...base,
-              minHeight: "40px"
-            })
-          }
+          styles: selectStyles
         }
       )
     ] })
@@ -7225,27 +7437,35 @@ function _ValueDiffResultView({ run }, ref) {
           " removed)"
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          ScreenshotDataGrid,
+          Box35__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 = React3.forwardRef(_ValueDiffResultView);
+var ValueDiffResultView = React4.forwardRef(_ValueDiffResultView);
 
 // recce-source/js/src/components/run/registry.ts
 function runTypeHasRef(runType) {
@@ -7351,7 +7571,7 @@ var findByRunType = (runType) => {
 function useAppLocation() {
   const router = navigation.useRouter();
   const pathname = navigation.usePathname();
-  const setLocation = React3.useCallback(
+  const setLocation = React4.useCallback(
     (to, options) => {
       if (options?.replace) {
         router.replace(to, { scroll: options?.scroll ?? true });
@@ -7363,7 +7583,7 @@ function useAppLocation() {
   );
   return [pathname, setLocation];
 }
-var RecceActionContext = React3.createContext({
+var RecceActionContext = React4.createContext({
   runAction: () => {
     return void 0;
   },
@@ -7388,32 +7608,7 @@ var RecceActionContext = React3.createContext({
     return void 0;
   }
 });
-var useRecceActionContext = () => React3.useContext(RecceActionContext);
-
-// recce-source/js/src/lib/hooks/useClipBoardToast.tsx
-function useClipBoardToast() {
-  function successToast(message) {
-    toaster.create({
-      description: message,
-      type: "info",
-      duration: 5e3,
-      closable: true
-    });
-  }
-  function failToast(title, error) {
-    toaster.create({
-      title,
-      description: String(error),
-      type: "error",
-      duration: 5e3,
-      closable: true
-    });
-  }
-  return {
-    successToast,
-    failToast
-  };
-}
+var useRecceActionContext = () => React4.useContext(RecceActionContext);
 var loadHtml2Canvas = async () => {
   const module = await import('html2canvas-pro/dist/html2canvas-pro.esm.js');
   return module.default;
@@ -7432,14 +7627,14 @@ function useCopyToClipboard2({
   backgroundColor = null,
   boardEffect = true,
   shadowEffect = false,
-  borderStyle = "solid 1px #ccc",
+  borderStyle = `solid 1px ${colors.neutral[300]}`,
   borderRadius = "10px",
   onSuccess,
   onError,
   ignoreElements
 }) {
-  const [status, setStatus] = React3.useState("idle");
-  const ref = React3.useRef(null);
+  const [status, setStatus] = React4.useState("idle");
+  const ref = React4.useRef(null);
   const { onOpen, setImgBlob, ImageDownloadModal } = useImageDownloadModal();
   const toImage = async () => {
     if (!ref.current) {
@@ -7470,7 +7665,7 @@ function useCopyToClipboard2({
       nodeToUse.style.overflow = "hidden";
       nodeToUse.style.border = boardEffect ? borderStyle : "";
       nodeToUse.style.borderRadius = boardEffect ? borderRadius : "";
-      nodeToUse.style.backgroundColor = backgroundColor ?? "#f5f5f5";
+      nodeToUse.style.backgroundColor = backgroundColor ?? colors.neutral[100];
       nodeToUse.style.height = `${String(nodeToUse.offsetHeight)}px`;
       const style = document.createElement("style");
       document.head.appendChild(style);
@@ -7484,7 +7679,7 @@ function useCopyToClipboard2({
         const html2canvas = await loadHtml2Canvas();
         canvas = await html2canvas(nodeToUse, {
           logging: false,
-          backgroundColor: "#f5f5f5",
+          backgroundColor: backgroundColor ?? colors.neutral[100],
           ignoreElements
         });
       } else {
@@ -7557,7 +7752,7 @@ function useCopyToClipboardButton(options) {
   const { isLoading, copyToClipboard, ImageDownloadModal, ref } = useCopyToClipboard2({
     imageType: "png",
     shadowEffect: true,
-    backgroundColor: options?.backgroundColor ?? "#f5f5f5",
+    backgroundColor: options?.backgroundColor ?? colors.neutral[100],
     onSuccess: () => {
       successToast("Copied the query result as an image to clipboard");
     },
@@ -7566,7 +7761,7 @@ function useCopyToClipboardButton(options) {
       failToast("Failed to copy image to clipboard", error);
     }
   });
-  const onMouseEnter = React3.useCallback(() => {
+  const onMouseEnter = React4.useCallback(() => {
     if (ref.current) {
       const nodeToUse = getHTMLElementFromRef(ref.current);
       if (nodeToUse) {
@@ -7575,7 +7770,7 @@ function useCopyToClipboardButton(options) {
       }
     }
   }, [ref]);
-  const onMouseLeave = React3.useCallback(() => {
+  const onMouseLeave = React4.useCallback(() => {
     if (ref.current) {
       const nodeToUse = getHTMLElementFromRef(ref.current);
       if (nodeToUse) {
@@ -7583,7 +7778,7 @@ function useCopyToClipboardButton(options) {
       }
     }
   }, [ref]);
-  const onCopyToClipboard = React3.useCallback(async () => {
+  const onCopyToClipboard = React4.useCallback(async () => {
     if (ref.current) {
       await copyToClipboard();
       const nodeToUse = getHTMLElementFromRef(ref.current);
@@ -7624,13 +7819,13 @@ function useCopyToClipboardButton(options) {
   };
 }
 function useImageDownloadModal() {
-  const [open, setOpen] = React3.useState(false);
-  const [imgBlob, setImgBlob] = React3.useState();
+  const [open, setOpen] = React4.useState(false);
+  const [imgBlob, setImgBlob] = React4.useState();
   const onOpen = () => setOpen(true);
   const onClose = () => setOpen(false);
   function ImageDownloadModal() {
-    const [base64Img, setBase64Img] = React3.useState();
-    React3.useEffect(() => {
+    const [base64Img, setBase64Img] = React4.useState();
+    React4.useEffect(() => {
       if (!imgBlob) {
         return;
       }
@@ -7700,8 +7895,8 @@ function useImageDownloadModal() {
   };
 }
 var useRun = (runId) => {
-  const [isRunning, setIsRunning] = React3.useState(false);
-  const [aborting, setAborting] = React3.useState(false);
+  const [isRunning, setIsRunning] = React4.useState(false);
+  const [aborting, setAborting] = React4.useState(false);
   const [, refetchRunsAggregated] = useRunsAggregated();
   const { error, data: run } = reactQuery.useQuery({
     queryKey: cacheKeys.run(runId ?? ""),
@@ -7712,8 +7907,8 @@ var useRun = (runId) => {
     refetchInterval: isRunning ? 50 : false,
     retry: false
   });
-  const [prevRun, setPrevRun] = React3.useState(run);
-  const [prevError, setPrevError] = React3.useState(error);
+  const [prevRun, setPrevRun] = React4.useState(run);
+  const [prevError, setPrevError] = React4.useState(error);
   if (run !== prevRun || error !== prevError) {
     setPrevRun(run);
     setPrevError(error);
@@ -7723,12 +7918,12 @@ var useRun = (runId) => {
       setIsRunning(true);
     }
   }
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if ((error || run?.result || run?.error) && (run?.type === "row_count_diff" || run?.type === "row_count")) {
       refetchRunsAggregated();
     }
   }, [run, error, refetchRunsAggregated]);
-  const onCancel = React3.useCallback(async () => {
+  const onCancel = React4.useCallback(async () => {
     setAborting(true);
     if (!runId) {
       return;
@@ -7749,6 +7944,74 @@ var useRun = (runId) => {
     RunResultView
   };
 };
+function useThemeColors() {
+  const theme = styles.useTheme();
+  const isDark = theme.palette.mode === "dark";
+  return {
+    /** Whether the current theme is dark mode */
+    isDark,
+    /** MUI theme object for direct access when needed */
+    theme,
+    /** Background colors */
+    background: {
+      /** Default page background */
+      default: theme.palette.background.default,
+      /** Paper/card background */
+      paper: theme.palette.background.paper,
+      /** Subtle background for slight elevation (e.g., hover states, inputs) */
+      subtle: isDark ? colors.neutral[800] : colors.neutral[50],
+      /** Emphasized background for higher contrast areas */
+      emphasized: isDark ? colors.neutral[700] : colors.neutral[100]
+    },
+    /** Text colors */
+    text: {
+      /** Primary text color */
+      primary: theme.palette.text.primary,
+      /** Secondary/muted text color */
+      secondary: theme.palette.text.secondary,
+      /** Disabled text color */
+      disabled: isDark ? colors.neutral[500] : colors.neutral[400],
+      /** Inverted text (for use on dark backgrounds in light mode, etc.) */
+      inverted: isDark ? colors.neutral[900] : colors.neutral[50]
+    },
+    /** Border colors */
+    border: {
+      /** Light border for subtle separations */
+      light: isDark ? colors.neutral[700] : colors.neutral[200],
+      /** Default border color */
+      default: isDark ? colors.neutral[600] : colors.neutral[300],
+      /** Strong border for emphasis */
+      strong: isDark ? colors.neutral[500] : colors.neutral[400]
+    },
+    /** Status/semantic colors */
+    status: {
+      /** Added/success backgrounds */
+      added: {
+        bg: isDark ? "#1a4d1a" : "#cefece",
+        text: theme.palette.text.primary
+      },
+      /** Removed/error backgrounds */
+      removed: {
+        bg: isDark ? "#5c1f1f" : "#ffc5c5",
+        text: theme.palette.text.primary
+      },
+      /** Modified/warning backgrounds */
+      modified: {
+        bg: isDark ? "#5c4a1a" : "#fff3cd",
+        text: theme.palette.text.primary
+      }
+    },
+    /** Interactive element colors */
+    interactive: {
+      /** Hover state background */
+      hover: isDark ? colors.neutral[700] : colors.neutral[100],
+      /** Active/pressed state background */
+      active: isDark ? colors.neutral[600] : colors.neutral[200],
+      /** Focus ring color */
+      focus: colors.iochmara[500]
+    }
+  };
+}
 function ActionControl({ onClose }) {
   const { cancel, actionState } = useLineageViewContextSafe();
   const getProgressMessage = () => {
@@ -7766,7 +8029,7 @@ function ActionControl({ onClose }) {
       }
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(Box35__default.default, { sx: { bgcolor: "white", borderRadius: 1, boxShadow: 6 }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(Box35__default.default, { sx: { bgcolor: "background.paper", borderRadius: 1, boxShadow: 6 }, children: /* @__PURE__ */ jsxRuntime.jsxs(
     Stack24__default.default,
     {
       direction: "row",
@@ -7823,10 +8086,10 @@ var IconChanged = (props) => {
     }
   );
 };
-function getIconForChangeStatus(changeStatus) {
+function getIconForChangeStatus(changeStatus, isDark) {
   if (changeStatus === "added") {
     const color2 = String(token("colors.green.solid"));
-    const backgroundColor2 = String(token("colors.green.subtle"));
+    const backgroundColor2 = isDark ? String(token("colors.green.muted")) : String(token("colors.green.subtle"));
     return {
       color: color2,
       hexColor: color2,
@@ -7836,7 +8099,7 @@ function getIconForChangeStatus(changeStatus) {
     };
   } else if (changeStatus === "removed") {
     const color2 = String(token("colors.red.solid"));
-    const backgroundColor2 = String(token("colors.red.subtle"));
+    const backgroundColor2 = isDark ? String(token("colors.red.muted")) : String(token("colors.red.subtle"));
     return {
       color: color2,
       hexColor: color2,
@@ -7846,7 +8109,7 @@ function getIconForChangeStatus(changeStatus) {
     };
   } else if (changeStatus === "modified") {
     const color2 = String(token("colors.amber.emphasized"));
-    const backgroundColor2 = String(token("colors.amber.subtle"));
+    const backgroundColor2 = isDark ? String(token("colors.amber.emphasized")) : String(token("colors.amber.subtle"));
     return {
       color: color2,
       hexColor: color2,
@@ -7856,7 +8119,7 @@ function getIconForChangeStatus(changeStatus) {
     };
   }
   const color = String(token("colors.gray.focusRing"));
-  const backgroundColor = "#ffffff";
+  const backgroundColor = isDark ? "#404040" : "#ffffff";
   return {
     color,
     hexColor: color,
@@ -7915,10 +8178,10 @@ function ChangeStatusLegend() {
     Box35__default.default,
     {
       sx: {
-        bgcolor: "white",
+        bgcolor: "background.paper",
         padding: "12px",
         border: "1px solid",
-        borderColor: "grey.200",
+        borderColor: "divider",
         fontSize: "0.875rem"
       },
       children: Object.entries(CHANGE_STATUS_MSGS).map(([key, [label, tip]]) => {
@@ -7968,13 +8231,13 @@ var ModeMessage = () => {
           onClick: () => {
             centerNode(nodeId);
           },
-          sx: {
+          sx: (theme) => ({
             cursor: "pointer",
             fontFamily: "monospace",
-            bgcolor: "grey.100",
+            bgcolor: theme.palette.mode === "dark" ? "grey.700" : "grey.100",
             px: 0.5,
             borderRadius: 0.5
-          },
+          }),
           children: nodeName
         }
       )
@@ -7993,13 +8256,13 @@ var ModeMessage = () => {
           onClick: () => {
             centerNode(nodeId);
           },
-          sx: {
+          sx: (theme) => ({
             cursor: "pointer",
             fontFamily: "monospace",
-            bgcolor: "grey.100",
+            bgcolor: theme.palette.mode === "dark" ? "grey.700" : "grey.100",
             px: 0.5,
             borderRadius: 0.5
-          },
+          }),
           children: [
             nodeName,
             ".",
@@ -8035,10 +8298,11 @@ var ColumnLevelLineageControl = ({
           {
             size: "small",
             variant: "outlined",
+            color: "neutral",
             sx: {
-              borderColor: "neutral.light",
               whiteSpace: "nowrap",
-              display: "inline-flex"
+              display: "inline-flex",
+              bgcolor: "background.paper"
             },
             disabled: !interactive || noCatalogCurrent,
             startIcon: /* @__PURE__ */ jsxRuntime.jsx(fa.FaRegDotCircle, {}),
@@ -8062,8 +8326,8 @@ var ColumnLevelLineageControl = ({
           borderRadius: 1,
           boxShadow: 3,
           border: "1px solid",
-          borderColor: "neutral.light",
-          bgcolor: "white",
+          borderColor: "divider",
+          bgcolor: "background.paper",
           fontSize: "0.8rem",
           p: "0 0.625rem"
         },
@@ -8181,6 +8445,7 @@ function GraphColumnNode(nodeProps) {
   const { id: nodeId } = data.node;
   const { column, type, transformationType, changeStatus } = data;
   const showContent = react$1.useStore((s) => s.transform[2] > 0.3);
+  const { background, text, border } = useThemeColors();
   const {
     viewOptions,
     showContextMenu,
@@ -8190,7 +8455,7 @@ function GraphColumnNode(nodeProps) {
   const selectedNode = viewOptions.column_level_lineage?.node_id;
   const selectedColumn = viewOptions.column_level_lineage?.column;
   const isFocus = column === selectedColumn && nodeId === selectedNode;
-  const [isHovered, setIsHovered] = React3__default.default.useState(false);
+  const [isHovered, setIsHovered] = React4__default.default.useState(false);
   const isHighlighted = isNodeHighlighted(columnNodeId);
   const isShowingChangeAnalysis = isNodeShowingChangeAnalysis(nodeId);
   if (!showContent) {
@@ -8203,10 +8468,11 @@ function GraphColumnNode(nodeProps) {
         display: "flex",
         width: 280,
         padding: "0px 10px",
-        border: "1px solid gray",
-        backgroundColor: isFocus ? "#f0f0f0" : "inherit",
+        border: "1px solid",
+        borderColor: border.default,
+        backgroundColor: isFocus ? background.subtle : "inherit",
         "&:hover": {
-          backgroundColor: "#f0f0f0"
+          backgroundColor: background.subtle
         },
         filter: isHighlighted ? "none" : "opacity(0.2) grayscale(50%)",
         cursor: "pointer"
@@ -8224,7 +8490,7 @@ function GraphColumnNode(nodeProps) {
             sx: {
               display: "flex",
               fontSize: "11px",
-              color: "black",
+              color: text.primary,
               width: "100%",
               gap: "3px",
               alignItems: "center",
@@ -8242,7 +8508,7 @@ function GraphColumnNode(nodeProps) {
                     fontSize: 14,
                     display: "inline-flex",
                     cursor: "pointer",
-                    "&:hover": { color: "black" }
+                    "&:hover": { color: text.primary }
                   },
                   onClick: (e) => {
                     e.preventDefault();
@@ -8312,10 +8578,10 @@ function ColumnLevelLineageLegend() {
     Box35__default.default,
     {
       sx: {
-        bgcolor: "white",
+        bgcolor: "background.paper",
         padding: "12px",
         border: "1px solid",
-        borderColor: "grey.200",
+        borderColor: "divider",
         fontSize: "0.875rem"
       },
       children: Object.entries(TRANSFORMATION_MSGS).map(([key, [label, tip]]) => {
@@ -8409,17 +8675,17 @@ function SetupConnectionPopover({
   children,
   display
 }) {
-  const [hovered, setHovered] = React3.useState(false);
-  const timeoutRef = React3.useRef(null);
-  const anchorRef = React3.useRef(null);
-  const handleMouseEnter = React3.useCallback(() => {
+  const [hovered, setHovered] = React4.useState(false);
+  const timeoutRef = React4.useRef(null);
+  const anchorRef = React4.useRef(null);
+  const handleMouseEnter = React4.useCallback(() => {
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
       timeoutRef.current = null;
     }
     setHovered(true);
   }, []);
-  const handleMouseLeave = React3.useCallback(() => {
+  const handleMouseLeave = React4.useCallback(() => {
     timeoutRef.current = setTimeout(() => {
       setHovered(false);
     }, 100);
@@ -8485,15 +8751,16 @@ function SetupConnectionPopover({
     )
   ] });
 }
-var tagRootSx = {
+var tagRootSx = (theme) => ({
   display: "inline-flex",
   alignItems: "center",
   borderRadius: 16,
   px: 1,
   py: 0.25,
   fontSize: "0.75rem",
-  bgcolor: "grey.100"
-};
+  bgcolor: theme.palette.mode === "dark" ? "grey.700" : "grey.100",
+  color: theme.palette.mode === "dark" ? "grey.100" : "inherit"
+});
 var tagStartElementSx = {
   mr: 0.5,
   display: "flex",
@@ -8586,10 +8853,10 @@ function RowCountDiffTag({
     Box35__default.default,
     {
       component: "span",
-      sx: {
-        ...tagRootSx,
+      sx: (theme) => ({
+        ...tagRootSx(theme),
         gap: 0.5
-      },
+      }),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(RunTypeIcon, {}),
         rowsToShow != null || isFetching ? isFetching ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton__default.default, { width: 30, height: 16 }) : rowsToShow != null ? /* @__PURE__ */ jsxRuntime.jsx(_RowCountByRate, { rowCount: rowsToShow }) : /* @__PURE__ */ jsxRuntime.jsx(Typography28__default.default, { variant: "caption", children: "row count" }) : /* @__PURE__ */ jsxRuntime.jsx(Typography28__default.default, { variant: "caption", children: "row count" }),
@@ -8784,6 +9051,7 @@ var NodeRunsAggregated = ({
   inverted
 }) => {
   const { lineageGraph, runsAggregated } = useLineageGraphContext();
+  const { text, isDark } = useThemeColors();
   const runs = runsAggregated?.[id];
   const node = lineageGraph?.nodes[id];
   if (!runs && !node) {
@@ -8801,8 +9069,8 @@ var NodeRunsAggregated = ({
     const result = rowCountDiff.result;
     rowCountChanged = result.curr !== result.base;
   }
-  const colorChanged = inverted ? "white" : getIconForChangeStatus("modified").color;
-  const colorUnchanged = inverted ? "gray" : "gray.100";
+  const colorChanged = inverted ? text.inverted : getIconForChangeStatus("modified").color;
+  const colorUnchanged = inverted ? text.secondary : isDark ? "grey.700" : "grey.100";
   const SchemaDiffIcon = findByRunType("schema_diff").icon;
   return /* @__PURE__ */ jsxRuntime.jsxs(Box35__default.default, { sx: { display: "flex", flex: 1, alignItems: "center" }, children: [
     schemaChanged !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
@@ -8883,8 +9151,9 @@ function GraphNode(nodeProps) {
   const { data } = nodeProps;
   const { id, resourceType, changeStatus } = data;
   const showContent = react$1.useStore((s) => s.transform[2] > 0.3);
+  const { background, text, isDark } = useThemeColors();
   const { icon: ResourceIcon } = getIconForResourceType(resourceType);
-  const [isHovered, setIsHovered] = React3.useState(false);
+  const [isHovered, setIsHovered] = React4.useState(false);
   const {
     interactive,
     selectNode,
@@ -8910,10 +9179,10 @@ function GraphNode(nodeProps) {
     icon: IconChangeStatus,
     color: colorChangeStatus,
     backgroundColor: backgroundColorChangeStatus
-  } = changeStatus ? getIconForChangeStatus(changeStatus) : {
+  } = changeStatus ? getIconForChangeStatus(changeStatus, isDark) : {
     icon: void 0,
     color: String(token("colors.gray.400")),
-    backgroundColor: String(token("colors.gray.100"))
+    backgroundColor: isDark ? String(token("colors.gray.700")) : String(token("colors.gray.100"))
   };
   const borderWidth = "2px";
   const borderColor = colorChangeStatus;
@@ -8924,15 +9193,15 @@ function GraphNode(nodeProps) {
   const nodeBackgroundColor = (function() {
     if (showContent) {
       if (selectMode === "selecting") {
-        return isSelected ? colorChangeStatus : "white";
+        return isSelected ? colorChangeStatus : background.paper;
       } else if (selectMode === "action_result") {
         if (!action) {
-          return "white";
+          return background.paper;
         } else {
           return isFocused || isSelected || isHovered ? backgroundColorChangeStatus : colorChangeStatus;
         }
       } else {
-        return isFocused || isSelected || isHovered ? backgroundColorChangeStatus : "white";
+        return isFocused || isSelected || isHovered ? backgroundColorChangeStatus : background.paper;
       }
     } else {
       return isFocused || isSelected || isHovered ? colorChangeStatus : backgroundColorChangeStatus;
@@ -8940,27 +9209,27 @@ function GraphNode(nodeProps) {
   })();
   const titleColor = (function() {
     if (selectMode === "selecting") {
-      return isSelected ? "white" : "inherit";
+      return isSelected ? text.inverted : text.primary;
     } else if (selectMode === "action_result") {
-      return !!action && !isSelected ? "white" : "inherit";
+      return !!action && !isSelected ? text.inverted : text.primary;
     } else {
-      return "inherit";
+      return text.primary;
     }
   })();
   const iconResourceColor = (function() {
     if (selectMode === "selecting") {
-      return isSelected ? "white" : "inherit";
+      return isSelected ? text.inverted : text.primary;
     } else if (selectMode === "action_result") {
-      return !!action && !isSelected ? "white" : "inherit";
+      return !!action && !isSelected ? text.inverted : text.primary;
     } else {
-      return "inherit";
+      return text.primary;
     }
   })();
   const iconChangeStatusColor = (function() {
     if (selectMode === "selecting") {
-      return isSelected ? "white" : colorChangeStatus;
+      return isSelected ? text.inverted : colorChangeStatus;
     } else if (selectMode === "action_result") {
-      return !!action && !isSelected ? "white" : "inherit";
+      return !!action && !isSelected ? text.inverted : text.primary;
     } else {
       return colorChangeStatus;
     }
@@ -9089,9 +9358,9 @@ function GraphNode(nodeProps) {
                                         component: fa.FaRegDotCircle,
                                         sx: {
                                           fontSize: 14,
-                                          color: "gray",
+                                          color: text.secondary,
                                           cursor: "pointer",
-                                          "&:hover": { color: "black" }
+                                          "&:hover": { color: text.primary }
                                         },
                                         onClick: (e) => {
                                           e.preventDefault();
@@ -9113,9 +9382,9 @@ function GraphNode(nodeProps) {
                               {
                                 component: vsc.VscKebabVertical,
                                 sx: {
-                                  color: "gray",
+                                  color: text.secondary,
                                   cursor: "pointer",
-                                  "&:hover": { color: "black" }
+                                  "&:hover": { color: text.primary }
                                 },
                                 onClick: (e) => {
                                   e.preventDefault();
@@ -9171,7 +9440,7 @@ function GraphNode(nodeProps) {
                           {
                             sx: {
                               height: 20,
-                              color: "gray",
+                              color: text.secondary,
                               fontSize: "9pt",
                               margin: 0,
                               fontWeight: 600
@@ -9285,15 +9554,15 @@ var defaultQueryContext = {
     return void 0;
   }
 };
-var RecceQueryContext = React3.createContext(defaultQueryContext);
-var useRecceQueryContext = () => React3.useContext(RecceQueryContext);
+var RecceQueryContext = React4.createContext(defaultQueryContext);
+var useRecceQueryContext = () => React4.useContext(RecceQueryContext);
 var defaultRowCountStateContext = {
   isNodesFetching: [],
   setIsNodesFetching: () => {
     return void 0;
   }
 };
-React3.createContext(defaultRowCountStateContext);
+React4.createContext(defaultRowCountStateContext);
 var ContextMenu = ({ menuItems, open, onClose, x, y }) => {
   const { featureToggles } = useRecceInstanceContext();
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -9775,14 +10044,14 @@ var LineageViewContextMenu = ({
   }
 };
 var useLineageViewContextMenu = () => {
-  const [open, setOpen] = React3.useState(false);
+  const [open, setOpen] = React4.useState(false);
   const onOpen = () => setOpen(true);
   const onClose = () => setOpen(false);
-  const [position, setPosition] = React3.useState({
+  const [position, setPosition] = React4.useState({
     x: 0,
     y: 0
   });
-  const [node, setNode] = React3.useState();
+  const [node, setNode] = React4.useState();
   const showContextMenu = (x, y, node2) => {
     setPosition({ x, y });
     setNode(node2);
@@ -9817,7 +10086,7 @@ function LineageViewNotification({
   type
 }) {
   const notificationKey = sessionStorageKeys.lineageNotificationDismissed;
-  const [visible, setVisible] = React3.useState(() => {
+  const [visible, setVisible] = React4.useState(() => {
     const dismissed = sessionStorage.getItem(notificationKey);
     return dismissed !== "true";
   });
@@ -9876,6 +10145,7 @@ function HistoryToggle() {
       {
         size: "xsmall",
         variant: "outlined",
+        color: "neutral",
         startIcon: /* @__PURE__ */ jsxRuntime.jsx(vsc.VscHistory, {}),
         onClick: () => {
           trackHistoryAction({ name: isHistoryOpen ? "hide" : "show" });
@@ -9886,81 +10156,39 @@ function HistoryToggle() {
     )
   ] });
 }
+var codeBlockSx = (theme) => ({
+  fontSize: "8pt",
+  bgcolor: theme.palette.mode === "dark" ? "grey.700" : "grey.100",
+  px: 0.5,
+  borderRadius: 1
+});
 var SelectFilterTooltip = () => {
   return /* @__PURE__ */ jsxRuntime.jsxs(Stack24__default.default, { alignItems: "flex-start", spacing: 0, children: [
     /* @__PURE__ */ jsxRuntime.jsx(Typography28__default.default, { fontSize: "10pt", color: "text.secondary", pb: 1, children: "Select nodes by dbt node selector syntax" }),
     /* @__PURE__ */ jsxRuntime.jsxs(Typography28__default.default, { fontSize: "8pt", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Box35__default.default,
-        {
-          component: "code",
-          sx: {
-            fontSize: "8pt",
-            bgcolor: "grey.100",
-            px: 0.5,
-            borderRadius: 1
-          },
-          children: "model_name"
-        }
-      ),
+      /* @__PURE__ */ jsxRuntime.jsx(Box35__default.default, { component: "code", sx: codeBlockSx, children: "model_name" }),
       " ",
       "Select a node"
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(Typography28__default.default, { fontSize: "8pt", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Box35__default.default,
-        {
-          component: "code",
-          sx: {
-            fontSize: "8pt",
-            bgcolor: "grey.100",
-            px: 0.5,
-            borderRadius: 1
-          },
-          children: "model_name+"
-        }
-      ),
+      /* @__PURE__ */ jsxRuntime.jsx(Box35__default.default, { component: "code", sx: codeBlockSx, children: "model_name+" }),
       " ",
       "Select downstream nodes"
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(Typography28__default.default, { fontSize: "8pt", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Box35__default.default,
-        {
-          component: "code",
-          sx: {
-            fontSize: "8pt",
-            bgcolor: "grey.100",
-            px: 0.5,
-            borderRadius: 1
-          },
-          children: "+model_name"
-        }
-      ),
+      /* @__PURE__ */ jsxRuntime.jsx(Box35__default.default, { component: "code", sx: codeBlockSx, children: "+model_name" }),
       " ",
       "Select upstream nodes"
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(Typography28__default.default, { fontSize: "8pt", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Box35__default.default,
-        {
-          component: "code",
-          sx: {
-            fontSize: "8pt",
-            bgcolor: "grey.100",
-            px: 0.5,
-            borderRadius: 1
-          },
-          children: "model*"
-        }
-      ),
+      /* @__PURE__ */ jsxRuntime.jsx(Box35__default.default, { component: "code", sx: codeBlockSx, children: "model*" }),
       " ",
       "Select by wildcard"
     ] })
   ] });
 };
 var ViewModeSelectMenu = ({ isDisabled }) => {
-  const [anchorEl, setAnchorEl] = React3.useState(null);
+  const [anchorEl, setAnchorEl] = React4.useState(null);
   const open = Boolean(anchorEl);
   const { viewOptions, onViewOptionsChanged } = useLineageViewContextSafe();
   const viewMode = viewOptions.view_mode ?? "changed_models";
@@ -10020,7 +10248,7 @@ var ViewModeSelectMenu = ({ isDisabled }) => {
   ] });
 };
 var PackageSelectMenu = ({ isDisabled }) => {
-  const [anchorEl, setAnchorEl] = React3.useState(null);
+  const [anchorEl, setAnchorEl] = React4.useState(null);
   const open = Boolean(anchorEl);
   const { lineageGraph } = useLineageGraphContext();
   const { viewOptions, onViewOptionsChanged } = useLineageViewContextSafe();
@@ -10105,10 +10333,10 @@ var PackageSelectMenu = ({ isDisabled }) => {
   ] });
 };
 var NodeSelectionInput = (props) => {
-  const [inputValue, setInputValue] = React3.useState(props.value);
+  const [inputValue, setInputValue] = React4.useState(props.value);
   const { data: flags } = useRecceServerFlag();
-  const inputRef = React3.useRef(null);
-  React3.useEffect(() => {
+  const inputRef = React4.useRef(null);
+  React4.useEffect(() => {
     if (inputRef.current) {
       inputRef.current.value = props.value;
     }
@@ -10126,8 +10354,8 @@ var NodeSelectionInput = (props) => {
             boxShadow: 3,
             border: 1,
             borderRadius: 1,
-            color: "black",
-            bgcolor: "white"
+            color: "text.primary",
+            bgcolor: "background.paper"
           }
         }
       },
@@ -10216,7 +10444,7 @@ var LineageViewTopBar = () => {
   const { featureToggles } = useRecceInstanceContext();
   const { data: flags } = useRecceServerFlag();
   const isSingleEnvOnboarding = flags?.single_env_onboarding;
-  const [actionsAnchorEl, setActionsAnchorEl] = React3.useState(
+  const [actionsAnchorEl, setActionsAnchorEl] = React4.useState(
     null
   );
   const actionsOpen = Boolean(actionsAnchorEl);
@@ -10471,7 +10699,7 @@ var LearnHowLink = () => {
       href: "https://docs.datarecce.io/get-started/#prepare-dbt-artifacts",
       target: "_blank",
       sx: {
-        color: "rgba(49, 130, 206, 1)",
+        color: "primary.main",
         fontWeight: "bold",
         textDecoration: "underline",
         display: "inline-flex",
@@ -10487,11 +10715,11 @@ var LearnHowLink = () => {
 };
 function PrivateSingleEnvSchemaView({ current, showMenu = true }, ref) {
   const lineageViewContext = useLineageViewContext();
-  const [gridApi, setGridApi] = React3.useState(null);
-  const [cllRunningMap, setCllRunningMap] = React3.useState(
+  const [gridApi, setGridApi] = React4.useState(null);
+  const [cllRunningMap, setCllRunningMap] = React4.useState(
     /* @__PURE__ */ new Map()
   );
-  const { columns, rows } = React3.useMemo(() => {
+  const { columns, rows } = React4.useMemo(() => {
     return createDataGridFromData(
       { type: "schema_single", columns: current?.columns },
       { node: current, cllRunningMap, showMenu }
@@ -10520,7 +10748,7 @@ function PrivateSingleEnvSchemaView({ current, showMenu = true }, ref) {
     }
     setCllRunningMap((prev) => new Map(prev).set(columnName, false));
   };
-  const getRowId = React3.useCallback(
+  const getRowId = React4.useCallback(
     (params) => {
       const modelId = current?.id;
       return `${modelId}-${params.data.name}`;
@@ -10529,7 +10757,7 @@ function PrivateSingleEnvSchemaView({ current, showMenu = true }, ref) {
   );
   const cll = lineageViewContext?.viewOptions.column_level_lineage;
   const selectedRowId = cll ? `${cll.node_id}-${cll.column}` : null;
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (!gridApi) return;
     gridApi.deselectAll();
     if (selectedRowId) {
@@ -10539,7 +10767,7 @@ function PrivateSingleEnvSchemaView({ current, showMenu = true }, ref) {
       }
     }
   }, [gridApi, selectedRowId]);
-  const handleGridReady = React3.useCallback((event) => {
+  const handleGridReady = React4.useCallback((event) => {
     setGridApi(event.api);
   }, []);
   const getRowClass = (_params) => {
@@ -10579,18 +10807,18 @@ function PrivateSingleEnvSchemaView({ current, showMenu = true }, ref) {
         getRowClass,
         onCellClicked: handleCellClicked,
         onGridReady: handleGridReady,
-        rowSelection: "single"
+        rowSelection: { mode: "singleRow" }
       }
     )
   ] });
 }
 function PrivateSchemaView({ base, current, showMenu = true }, ref) {
   const lineageViewContext = useLineageViewContext();
-  const [gridApi, setGridApi] = React3.useState(null);
-  const [cllRunningMap, setCllRunningMap] = React3.useState(
+  const [gridApi, setGridApi] = React4.useState(null);
+  const [cllRunningMap, setCllRunningMap] = React4.useState(
     /* @__PURE__ */ new Map()
   );
-  const { columns, rows } = React3.useMemo(() => {
+  const { columns, rows } = React4.useMemo(() => {
     const resourceType = current?.resource_type ?? base?.resource_type;
     const node = resourceType && ["model", "seed", "snapshot", "source"].includes(resourceType) ? current ?? base : void 0;
     return createDataGridFromData(
@@ -10631,7 +10859,7 @@ function PrivateSchemaView({ base, current, showMenu = true }, ref) {
     }
     setCllRunningMap((prev) => new Map(prev).set(columnName, false));
   };
-  const getRowId = React3.useCallback(
+  const getRowId = React4.useCallback(
     (params) => {
       const modelId = current?.id ?? base?.id;
       return `${modelId}-${params.data.name}`;
@@ -10640,7 +10868,7 @@ function PrivateSchemaView({ base, current, showMenu = true }, ref) {
   );
   const cll = lineageViewContext?.viewOptions.column_level_lineage;
   const selectedRowId = cll ? `${cll.node_id}-${cll.column}` : null;
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (!gridApi) return;
     gridApi.deselectAll();
     if (selectedRowId) {
@@ -10650,7 +10878,7 @@ function PrivateSchemaView({ base, current, showMenu = true }, ref) {
       }
     }
   }, [gridApi, selectedRowId]);
-  const handleGridReady = React3.useCallback(
+  const handleGridReady = React4.useCallback(
     (event) => {
       setGridApi(event.api);
     },
@@ -10706,13 +10934,13 @@ function PrivateSchemaView({ base, current, showMenu = true }, ref) {
         getRowClass,
         onCellClicked: handleCellClicked,
         onGridReady: handleGridReady,
-        rowSelection: "single"
+        rowSelection: { mode: "singleRow" }
       }
     )
   ] });
 }
-var SchemaView = React3.forwardRef(PrivateSchemaView);
-var SingleEnvSchemaView = React3.forwardRef(PrivateSingleEnvSchemaView);
+var SchemaView = React4.forwardRef(PrivateSchemaView);
+var SingleEnvSchemaView = React4.forwardRef(PrivateSingleEnvSchemaView);
 var getLanguageExtension = (language) => {
   switch (language) {
     case "sql":
@@ -10736,7 +10964,7 @@ function CodeEditor({
   theme = "light",
   keyBindings = []
 }) {
-  const extensions = React3.useMemo(() => {
+  const extensions = React4.useMemo(() => {
     const exts = [
       getLanguageExtension(language),
       view.EditorView.theme({
@@ -10753,7 +10981,7 @@ function CodeEditor({
     }
     return exts;
   }, [language, fontSize, wordWrap, keyBindings]);
-  const themeExtension = React3.useMemo(() => {
+  const themeExtension = React4.useMemo(() => {
     return theme === "dark" ? codemirrorThemeGithub.githubDark : codemirrorThemeGithub.githubLight;
   }, [theme]);
   const handleChange = (val) => {
@@ -10807,16 +11035,16 @@ function DiffEditor({
   theme = "light",
   onModifiedChange
 }) {
-  const containerRef = React3.useRef(null);
-  const viewRef = React3.useRef(null);
-  const extensions = React3.useMemo(() => {
+  const containerRef = React4.useRef(null);
+  const viewRef = React4.useRef(null);
+  const extensions = React4.useMemo(() => {
     const exts = [getLanguageExtension2(language), getThemeExtension(theme)];
     if (lineNumbers) {
       exts.push(view.lineNumbers());
     }
     return exts;
   }, [language, theme, lineNumbers]);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (!containerRef.current) return;
     if (viewRef.current) {
       viewRef.current.destroy();
@@ -10899,9 +11127,11 @@ function DiffEditor({
 }
 var DiffEditor_default = DiffEditor;
 var NodeSqlView = ({ node }) => {
-  const [isOpen, setIsOpen] = React3.useState(false);
-  const [isHovered, setIsHovered] = React3.useState(false);
+  const [isOpen, setIsOpen] = React4.useState(false);
+  const [isHovered, setIsHovered] = React4.useState(false);
   const { data: flags, isLoading } = useRecceServerFlag();
+  const muiTheme = styles.useTheme();
+  const isDark = muiTheme.palette.mode === "dark";
   const isSingleEnvOnboarding = flags?.single_env_onboarding;
   if (isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
@@ -10931,7 +11161,8 @@ var NodeSqlView = ({ node }) => {
             value: original ?? "",
             readOnly: true,
             lineNumbers: true,
-            wordWrap: false
+            wordWrap: false,
+            theme: isDark ? "dark" : "light"
           }
         ) : /* @__PURE__ */ jsxRuntime.jsx(
           DiffEditor,
@@ -10942,6 +11173,7 @@ var NodeSqlView = ({ node }) => {
             readOnly: true,
             lineNumbers: true,
             sideBySide: false,
+            theme: isDark ? "dark" : "light",
             height: "100%"
           }
         ),
@@ -10991,7 +11223,8 @@ var NodeSqlView = ({ node }) => {
                   fontSize: 16,
                   readOnly: true,
                   lineNumbers: true,
-                  wordWrap: false
+                  wordWrap: false,
+                  theme: isDark ? "dark" : "light"
                 }
               ) : /* @__PURE__ */ jsxRuntime.jsx(
                 DiffEditor,
@@ -10999,6 +11232,7 @@ var NodeSqlView = ({ node }) => {
                   original: original ?? "",
                   modified: modified ?? "",
                   language: "sql",
+                  theme: isDark ? "dark" : "light",
                   className: "text-base"
                 }
               ) })
@@ -11098,7 +11332,7 @@ function useFeedbackCollectionToast(options) {
     externalLink,
     externalLinkText
   } = options;
-  const [toastId, setToastId] = React3.useState(void 0);
+  const [toastId, setToastId] = React4.useState(void 0);
   function feedBackCollectionToast(skipBypassFeedback = false) {
     const isSkipFeedback = localStorage.getItem(feedbackId);
     if (toastId != null) {
@@ -11144,7 +11378,7 @@ function useFeedbackCollectionToast(options) {
   };
 }
 function useGuideToast(options) {
-  const [toastId, setToastId] = React3.useState(void 0);
+  const [toastId, setToastId] = React4.useState(void 0);
   const { guideId, description, externalLinkText, onExternalLinkClick } = options;
   function guideToast() {
     if (toastId != null) {
@@ -11249,7 +11483,7 @@ function renderInfoEntries(info) {
 }
 function EnvInfo() {
   const { envInfo, reviewMode, lineageGraph } = useLineageGraphContext();
-  const [open, setOpen] = React3.useState(false);
+  const [open, setOpen] = React4.useState(false);
   const git = envInfo?.git;
   const pr = envInfo?.pullRequest;
   const reviewInfo = { ...git, ...pr };
@@ -11266,8 +11500,8 @@ function EnvInfo() {
     currentRelativeTime = dbtCurrent.generated_at ? formatTimeToNow(dbtCurrent.generated_at) : "";
   }
   const [baseSchemas, currentSchemas] = extractSchemas(lineageGraph);
-  const hasTrackedRef = React3.useRef(false);
-  React3.useEffect(() => {
+  const hasTrackedRef = React4.useRef(false);
+  React4.useEffect(() => {
     if (!hasTrackedRef.current && envInfo) {
       hasTrackedRef.current = true;
       const trackingData = buildEnvironmentTrackingData(
@@ -11441,11 +11675,11 @@ function EnvInfo() {
 }
 var DropdownValuesInput = (props) => {
   const { defaultValues, suggestionList, onValuesChange, className } = props;
-  const [values, setValues] = React3.useState(defaultValues ?? []);
-  const [filter, setFilter] = React3.useState("");
-  const [isTyping, setIsTyping] = React3.useState(false);
-  const [anchorEl, setAnchorEl] = React3.useState(null);
-  const inputRef = React3.useRef(null);
+  const [values, setValues] = React4.useState(defaultValues ?? []);
+  const [filter, setFilter] = React4.useState("");
+  const [isTyping, setIsTyping] = React4.useState(false);
+  const [anchorEl, setAnchorEl] = React4.useState(null);
+  const inputRef = React4.useRef(null);
   const open = Boolean(anchorEl);
   const showNumberOfValuesSelected = (tags) => {
     if (tags.length > 1) {
@@ -11715,7 +11949,7 @@ var QueryForm = ({
 }) => {
   const { lineageGraph, isActionAvailable } = useLineageGraphContext();
   const labelInfo = "Provide a primary key to perform query diff in data warehouse and only return changed rows.";
-  const availableColumns = React3.useMemo(() => {
+  const availableColumns = React4.useMemo(() => {
     if (!lineageGraph) {
       return [];
     }
@@ -11782,9 +12016,9 @@ function AuthModal({
   variant = "auth"
 }) {
   const { authed } = useRecceInstanceContext();
-  const [open, setOpen] = React3.useState(parentOpen || !authed);
+  const [open, setOpen] = React4.useState(parentOpen || !authed);
   const authStateCookieValue = Cookies__default.default.get("authState") ?? "pending";
-  const [authState, setAuthState] = React3.useState(
+  const [authState, setAuthState] = React4.useState(
     ignoreCookie ? "pending" : authStateCookieValue
   );
   if (authState === "ignored" && !ignoreCookie) {
@@ -11959,9 +12193,9 @@ async function deleteCheck(checkId) {
 async function markAsPresetCheck(checkId) {
   await axiosClient.post(`/api/checks/${checkId}/mark-as-preset`);
 }
-var ShareState = React3.createContext(void 0);
+var ShareState = React4.createContext(void 0);
 var useRecceShareStateContext = () => {
-  const context = React3.useContext(ShareState);
+  const context = React4.useContext(ShareState);
   if (!context) {
     throw new Error(
       "useRecceShareStateContext must be used within a RecceShareStateContextProvider"
@@ -11983,6 +12217,8 @@ function SqlEditor({
   ...props
 }) {
   const { featureToggles } = useRecceInstanceContext();
+  const muiTheme = styles.useTheme();
+  const isDark = muiTheme.palette.mode === "dark";
   const handleEditorChange = (value2) => {
     if (onChange) {
       onChange(value2);
@@ -11992,7 +12228,7 @@ function SqlEditor({
   if (manifestData) {
     timestamp = manifestData.generated_at ? formatTimeToNow(manifestData.generated_at) : "";
   }
-  const keyBindings = React3.useMemo(() => {
+  const keyBindings = React4.useMemo(() => {
     const bindings = [];
     if (onRun) {
       bindings.push({
@@ -12031,7 +12267,7 @@ function SqlEditor({
       {
         direction: "row",
         sx: {
-          bgcolor: "#EDF2F880",
+          bgcolor: isDark ? styles.alpha(colors.neutral[700], 0.5) : styles.alpha(colors.neutral[100], 0.5),
           height: "40px",
           minHeight: "40px",
           fontSize: "14px",
@@ -12066,7 +12302,7 @@ function SqlEditor({
               size: "xsmall",
               variant: "outlined",
               onClick: onRun ?? onRunBase,
-              sx: { bgcolor: "white", p: "6px 12px" },
+              sx: { bgcolor: "background.paper", p: "6px 12px" },
               disabled: featureToggles.disableDatabaseQuery,
               startIcon: /* @__PURE__ */ jsxRuntime.jsx(fa6.FaPlay, {}),
               children: "Run Query"
@@ -12086,6 +12322,7 @@ function SqlEditor({
         wordWrap: options.wordWrap !== "off",
         fontSize: options.fontSize ?? 16,
         keyBindings,
+        theme: isDark ? "dark" : "light",
         className: "no-track-pii-safe max-h-dvh h-full"
       }
     )
@@ -12122,7 +12359,8 @@ function DualSqlEditor({
           height: "100%",
           width: "50%",
           gap: 0,
-          borderRight: "1px solid #D4DBE4"
+          borderRight: "1px solid",
+          borderRightColor: "divider"
         },
         children: /* @__PURE__ */ jsxRuntime.jsx(
           SqlEditor,
@@ -12258,7 +12496,7 @@ var ResultErrorFallback = (errorData) => {
   return /* @__PURE__ */ jsxRuntime.jsx(MuiAlert__default.default, { severity: "error", children: String(errorData.error) });
 };
 var ResultErrorFallback_default = ResultErrorFallback;
-var RunView = React3.forwardRef(
+var RunView = React4.forwardRef(
   ({
     isRunning,
     isAborting,
@@ -12272,6 +12510,7 @@ var RunView = React3.forwardRef(
     children,
     onExecuteRun
   }, ref) => {
+    const theme = styles.useTheme();
     const errorMessage = error?.response?.data?.detail ?? run?.error;
     if (errorMessage) {
       return /* @__PURE__ */ jsxRuntime.jsxs(MuiAlert__default.default, { severity: "error", children: [
@@ -12296,7 +12535,7 @@ var RunView = React3.forwardRef(
             justifyContent: "center",
             p: "1rem",
             height: "100%",
-            bgcolor: "rgb(249,249,249)"
+            bgcolor: theme.palette.mode === "dark" ? "grey.900" : "grey.50"
           },
           children: /* @__PURE__ */ jsxRuntime.jsxs(Stack24__default.default, { spacing: 2, alignItems: "center", children: [
             /* @__PURE__ */ jsxRuntime.jsxs(Stack24__default.default, { direction: "row", alignItems: "center", spacing: 1, children: [
@@ -12349,10 +12588,10 @@ var RunView = React3.forwardRef(
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
-            bgcolor: "rgb(249,249,249)",
+            bgcolor: theme.palette.mode === "dark" ? "grey.900" : "grey.50",
             height: "100%"
           },
-          children: "Loading..."
+          children: /* @__PURE__ */ jsxRuntime.jsx(CircularProgress4__default.default, { size: 32 })
         }
       );
     }
@@ -12392,6 +12631,8 @@ var RunView = React3.forwardRef(
   }
 );
 var _ParamView = (data) => {
+  const muiTheme = styles.useTheme();
+  const isDark = muiTheme.palette.mode === "dark";
   const yaml3 = YAML__default.default.stringify(data, null, 2);
   return /* @__PURE__ */ jsxRuntime.jsx(
     CodeEditor,
@@ -12403,6 +12644,7 @@ var _ParamView = (data) => {
       wordWrap: true,
       fontSize: 14,
       height: "100%",
+      theme: isDark ? "dark" : "light",
       className: "no-track-pii-safe"
     }
   );
@@ -12410,7 +12652,7 @@ var _ParamView = (data) => {
 var SingleEnvironmentSetupNotification = ({
   runType
 }) => {
-  const [open, setOpen] = React3.useState(true);
+  const [open, setOpen] = React4.useState(true);
   if (!open) {
     return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
   }
@@ -12439,8 +12681,8 @@ var RunResultShareMenu = ({
 }) => {
   const { authed } = useRecceInstanceContext();
   const { handleShareClick } = useRecceShareStateContext();
-  const [showModal, setShowModal] = React3.useState(false);
-  const [anchorEl, setAnchorEl] = React3.useState(null);
+  const [showModal, setShowModal] = React4.useState(false);
+  const [anchorEl, setAnchorEl] = React4.useState(null);
   const open = Boolean(anchorEl);
   const handleClick = (event) => {
     setAnchorEl(event.currentTarget);
@@ -12525,14 +12767,14 @@ var PrivateLoadableRunView = ({
   const { featureToggles } = useRecceInstanceContext();
   const { runAction } = useRecceActionContext();
   const { error, run, onCancel, isRunning } = useRun(runId);
-  const [viewOptions, setViewOptions] = React3.useState();
-  const [tabValue, setTabValue] = React3.useState("result");
+  const [viewOptions, setViewOptions] = React4.useState();
+  const [tabValue, setTabValue] = React4.useState("result");
   const showSingleEnvironmentSetupNotification = isSingleEnvironment;
   let RunResultView;
   if (run && runTypeHasRef(run.type)) {
     RunResultView = findByRunType(run.type).RunResultView;
   }
-  const handleRerun = React3.useCallback(() => {
+  const handleRerun = React4.useCallback(() => {
     if (run) {
       runAction(run.type, run.params);
     }
@@ -12694,13 +12936,13 @@ function AddToCheckButton({
   const queryClient = reactQuery.useQueryClient();
   const [, setLocation] = useAppLocation();
   const checkId = run?.check_id;
-  const handleGoToCheck = React3.useCallback(() => {
+  const handleGoToCheck = React4.useCallback(() => {
     if (!checkId) {
       return;
     }
     setLocation(`/checks/?id=${checkId}`);
   }, [checkId, setLocation]);
-  const handleAddToChecklist = React3.useCallback(async () => {
+  const handleAddToChecklist = React4.useCallback(async () => {
     if (!runId) {
       return;
     }
@@ -12756,7 +12998,8 @@ function SandboxTopBar({
         p: "4pt 8pt",
         gap: "5px",
         height: "54px",
-        borderBottom: "1px solid lightgray",
+        borderBottom: "1px solid",
+        borderBottomColor: "divider",
         flex: "0 0 54px"
       },
       children: [
@@ -12811,6 +13054,8 @@ function SandboxEditorLabels({
   height = "32px",
   flex = "0 0 auto"
 }) {
+  const theme = styles.useTheme();
+  const isDark = theme.palette.mode === "dark";
   const { lineageGraph, envInfo } = useLineageGraphContext();
   const widthOfBar = "50%";
   const margin = "0 16px";
@@ -12838,7 +13083,7 @@ function SandboxEditorLabels({
         fontSize: "14px",
         alignItems: "center",
         m: 0,
-        bgcolor: "#EDF2F880"
+        bgcolor: isDark ? styles.alpha(colors.neutral[700], 0.5) : styles.alpha(colors.neutral[100], 0.5)
       },
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(Stack24__default.default, { sx: { width: widthOfBar }, children: /* @__PURE__ */ jsxRuntime.jsxs(Typography28__default.default, { sx: { fontWeight: "bold", margin }, children: [
@@ -12854,6 +13099,8 @@ function SandboxEditorLabels({
   );
 }
 function SqlPreview({ current, onChange }) {
+  const muiTheme = styles.useTheme();
+  const isDark = muiTheme.palette.mode === "dark";
   return /* @__PURE__ */ jsxRuntime.jsx(
     DiffEditor,
     {
@@ -12863,17 +13110,18 @@ function SqlPreview({ current, onChange }) {
       readOnly: false,
       lineNumbers: true,
       sideBySide: true,
+      theme: isDark ? "dark" : "light",
       height: "100%",
       onModifiedChange: onChange
     }
   );
 }
 function SandboxView({ isOpen, onClose, current }) {
-  const [isRunResultOpen, setIsRunResultOpen] = React3.useState(false);
-  const [modifiedCode, setModifiedCode] = React3.useState(
+  const [isRunResultOpen, setIsRunResultOpen] = React4.useState(false);
+  const [modifiedCode, setModifiedCode] = React4.useState(
     current?.raw_code ?? ""
   );
-  const [prevIsOpen, setPrevIsOpen] = React3.useState(isOpen);
+  const [prevIsOpen, setPrevIsOpen] = React4.useState(isOpen);
   const { showRunId, clearRunResult } = useRecceActionContext();
   const { primaryKeys, setPrimaryKeys } = useRecceQueryContext();
   const { data: flags, isLoading } = useRecceServerFlag();
@@ -12990,7 +13238,7 @@ function SandboxView({ isOpen, onClose, current }) {
           {
             sx: {
               height: "40px",
-              bgcolor: "rgb(77, 209, 176)",
+              bgcolor: "cyan.600",
               px: 0,
               py: 2,
               display: "flex",
@@ -13021,7 +13269,7 @@ function SandboxView({ isOpen, onClose, current }) {
                         sx: {
                           fontFamily: '"Montserrat", sans-serif',
                           fontSize: "1.125rem",
-                          color: "white"
+                          color: "common.white"
                         },
                         children: "RECCE"
                       }
@@ -13034,7 +13282,7 @@ function SandboxView({ isOpen, onClose, current }) {
                         variant: "outlined",
                         sx: {
                           fontSize: "0.875rem",
-                          color: "white",
+                          color: "common.white",
                           borderColor: "rgba(255,255,255,0.5)"
                         }
                       }
@@ -13051,7 +13299,7 @@ function SandboxView({ isOpen, onClose, current }) {
                     position: "absolute",
                     right: 8,
                     top: 4,
-                    color: "white"
+                    color: "common.white"
                   },
                   children: /* @__PURE__ */ jsxRuntime.jsx(io5.IoClose, {})
                 }
@@ -13123,9 +13371,9 @@ function TabPanel({ children, value, index }) {
 }
 function NodeView({ node, onCloseNode }) {
   const withColumns = node.data.resourceType === "model" || node.data.resourceType === "seed" || node.data.resourceType === "source" || node.data.resourceType === "snapshot";
-  const [isSandboxOpen, setIsSandboxOpen] = React3.useState(false);
-  const [isNotificationOpen, setIsNotificationOpen] = React3.useState(true);
-  const [tabValue, setTabValue] = React3.useState(0);
+  const [isSandboxOpen, setIsSandboxOpen] = React4.useState(false);
+  const [isNotificationOpen, setIsNotificationOpen] = React4.useState(true);
+  const [tabValue, setTabValue] = React4.useState(0);
   const { runAction } = useRecceActionContext();
   const { isActionAvailable } = useLineageGraphContext();
   const refetchRowCount = () => {
@@ -13271,7 +13519,7 @@ function SingleEnvironmentMenuButton({
   refetchRowCount,
   disableReason
 }) {
-  const [anchorEl, setAnchorEl] = React3.useState(null);
+  const [anchorEl, setAnchorEl] = React4.useState(null);
   const open = Boolean(anchorEl);
   const [, setLocation] = useAppLocation();
   const { setSqlQuery } = useRecceQueryContext();
@@ -13382,7 +13630,7 @@ function ExploreChangeMenuButton({
   onSandboxOpen,
   refetchRowCountDiff
 }) {
-  const [anchorEl, setAnchorEl] = React3.useState(null);
+  const [anchorEl, setAnchorEl] = React4.useState(null);
   const open = Boolean(anchorEl);
   const [, setLocation] = useAppLocation();
   const { runAction } = useRecceActionContext();
@@ -13392,7 +13640,7 @@ function ExploreChangeMenuButton({
   const { primaryKey } = useModelColumns_default(node.data.name);
   const metadataOnly = featureToggles.mode === "metadata only";
   const isAddedOrRemoved = node.data.changeStatus === "added" || node.data.changeStatus === "removed";
-  const addSchemaCheck = React3.useCallback(async () => {
+  const addSchemaCheck = React4.useCallback(async () => {
     const nodeId = node.id;
     const check = await createSchemaDiffCheck({ node_id: nodeId });
     setLocation(`/checks/?id=${check.check_id}`);
@@ -13638,10 +13886,7 @@ function getSettingsUrl(instanceInfo) {
 }
 function SetupConnectionBanner() {
   const { featureToggles } = useRecceInstanceContext();
-  const { data: instanceInfo } = reactQuery.useQuery({
-    queryKey: cacheKeys.instanceInfo(),
-    queryFn: getRecceInstanceInfo
-  });
+  const { data: instanceInfo } = useRecceInstanceInfo();
   if (featureToggles.mode !== "metadata only") {
     return null;
   }
@@ -13711,7 +13956,7 @@ function BaseEnvironmentSetupGuide() {
                 {
                   sx: {
                     p: 1,
-                    bgcolor: "white",
+                    bgcolor: "background.paper",
                     borderRadius: "50%",
                     display: "flex",
                     alignItems: "center",
@@ -13827,7 +14072,7 @@ var useMultiNodesAction = (nodes, {
   onActionNodeUpdated,
   onActionCompleted
 }) => {
-  const actionState = React3.useRef({
+  const actionState = React4.useRef({
     ...initValue
   }).current;
   const { showRunId } = useRecceActionContext();
@@ -14061,11 +14306,11 @@ var useMultiNodesAction = (nodes, {
   };
 };
 function useValueDiffAlertDialog() {
-  const [open, setOpen] = React3.useState(false);
-  const [nodeCount, setNodeCount] = React3.useState(0);
-  const [resolvePromise, setResolvePromise] = React3.useState();
-  const cancelRef = React3.useRef(null);
-  const confirm = React3.useCallback((nodeCount2) => {
+  const [open, setOpen] = React4.useState(false);
+  const [nodeCount, setNodeCount] = React4.useState(0);
+  const [resolvePromise, setResolvePromise] = React4.useState();
+  const cancelRef = React4.useRef(null);
+  const confirm = React4.useCallback((nodeCount2) => {
     setNodeCount(nodeCount2);
     return new Promise((resolve) => {
       setResolvePromise(() => resolve);
@@ -14165,14 +14410,14 @@ var edgeTypes = {
   lineageGraphEdge: GraphEdge
 };
 var nodeColor = (node) => {
-  return node.data.changeStatus ? getIconForChangeStatus(node.data.changeStatus).hexColor : "lightgray";
+  return node.data.changeStatus ? getIconForChangeStatus(node.data.changeStatus).hexColor : colors.neutral[400];
 };
 var useResizeObserver = (ref, handler) => {
-  const size = React3.useRef({
+  const size = React4.useRef({
     width: 0,
     height: 0
   });
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     const target = ref.current;
     const handleResize = (entries) => {
       for (const entry of entries) {
@@ -14202,7 +14447,7 @@ var useResizeObserver = (ref, handler) => {
 };
 var useNavToCheck = () => {
   const [, setLocation] = useAppLocation();
-  return React3.useCallback(
+  return React4.useCallback(
     (check) => {
       if (check.check_id) {
         setLocation(`/checks/?id=${check.check_id}`);
@@ -14212,8 +14457,9 @@ var useNavToCheck = () => {
   );
 };
 function PrivateLineageView({ interactive = false, ...props }, ref) {
+  const { isDark } = useThemeColors();
   const reactFlow = react$1.useReactFlow();
-  const refResize = React3.useRef(null);
+  const refResize = React4.useRef(null);
   const { successToast, failToast } = useClipBoardToast();
   const {
     copyToClipboard,
@@ -14223,7 +14469,7 @@ function PrivateLineageView({ interactive = false, ...props }, ref) {
     renderLibrary: "html-to-image",
     imageType: "png",
     shadowEffect: true,
-    backgroundColor: "white",
+    backgroundColor: isDark ? colors.neutral[900] : colors.neutral[50],
     ignoreElements: (element) => {
       try {
         return element.classList.contains(IGNORE_SCREENSHOT_CLASS);
@@ -14254,10 +14500,10 @@ function PrivateLineageView({ interactive = false, ...props }, ref) {
   const { featureToggles, singleEnv } = useRecceInstanceContext();
   const { runId, showRunId, closeRunResult, runAction, isRunResultOpen } = useRecceActionContext();
   const { run } = useRun(runId);
-  const [viewOptions, setViewOptions] = React3.useState({
+  const [viewOptions, setViewOptions] = React4.useState({
     ...props.viewOptions
   });
-  const trackLineageRender = React3.useCallback(
+  const trackLineageRender = React4.useCallback(
     (nodes2, currentViewMode, impactRadiusEnabled, cllColumnActive, rightSidebarOpen) => {
       const lineageGraphNodesOnly = nodes2.filter(isLineageGraphNode);
       const grouped = Object.groupBy(
@@ -14284,41 +14530,41 @@ function PrivateLineageView({ interactive = false, ...props }, ref) {
     },
     []
   );
-  const cllHistory = React3.useRef([]).current;
-  const [cll, setCll] = React3.useState(void 0);
+  const cllHistory = React4.useRef([]).current;
+  const [cll, setCll] = React4.useState(void 0);
   const actionGetCll = reactQuery.useMutation({
     mutationFn: getCll
   });
-  const [nodeColumnSetMap, setNodeColumSetMap] = React3.useState({});
-  const findNodeByName = React3.useCallback(
+  const [nodeColumnSetMap, setNodeColumSetMap] = React4.useState({});
+  const findNodeByName = React4.useCallback(
     (name) => {
       return nodes.filter(isLineageGraphNode).find((n) => n.data.name === name);
     },
     [nodes]
   );
-  React3.useImperativeHandle(ref, () => ({
+  React4.useImperativeHandle(ref, () => ({
     copyToClipboard
   }));
-  const isModelsChanged = React3.useMemo(() => {
+  const isModelsChanged = React4.useMemo(() => {
     return !!(lineageGraph && lineageGraph.modifiedSet.length > 0);
   }, [lineageGraph]);
   const viewMode = viewOptions.view_mode ?? "changed_models";
-  const filteredNodeIds = React3.useMemo(() => {
+  const filteredNodeIds = React4.useMemo(() => {
     return nodes.filter((node) => node.type === "lineageGraphNode").map((node) => node.id);
   }, [nodes]);
-  const filteredNodes = React3.useMemo(() => {
+  const filteredNodes = React4.useMemo(() => {
     if (!lineageGraph) {
       return [];
     }
     return filteredNodeIds.map((nodeId) => lineageGraph.nodes[nodeId]);
   }, [lineageGraph, filteredNodeIds]);
-  const [focusedNodeId, setFocusedNodeId] = React3.useState();
+  const [focusedNodeId, setFocusedNodeId] = React4.useState();
   const focusedNode = focusedNodeId ? lineageGraph?.nodes[focusedNodeId] : void 0;
-  const [selectMode, setSelectMode] = React3.useState();
-  const [selectedNodeIds, setSelectedNodeIds] = React3.useState(
+  const [selectMode, setSelectMode] = React4.useState();
+  const [selectedNodeIds, setSelectedNodeIds] = React4.useState(
     /* @__PURE__ */ new Set()
   );
-  const selectedNodes = React3.useMemo(() => {
+  const selectedNodes = React4.useMemo(() => {
     if (!lineageGraph) {
       return [];
     }
@@ -14348,7 +14594,7 @@ function PrivateLineageView({ interactive = false, ...props }, ref) {
       }
     }
   );
-  const highlighted = React3.useMemo(() => {
+  const highlighted = React4.useMemo(() => {
     if (!lineageGraph) {
       return /* @__PURE__ */ new Set();
     }
@@ -14392,7 +14638,7 @@ function PrivateLineageView({ interactive = false, ...props }, ref) {
   const closeContextMenu = () => {
     lineageViewContextMenu.closeContextMenu();
   };
-  React3.useLayoutEffect(() => {
+  React4.useLayoutEffect(() => {
     const t = async () => {
       let filteredNodeIds2 = void 0;
       if (!lineageGraph) {
@@ -14662,7 +14908,7 @@ function PrivateLineageView({ interactive = false, ...props }, ref) {
     });
   };
   const valueDiffAlertDialog = useValueDiffAlertDialog_default();
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     const runResultType = run?.type;
     if (!interactive) {
       return;
@@ -15075,14 +15321,28 @@ function PrivateLineageView({ interactive = false, ...props }, ref) {
                     minZoom: 0.1,
                     nodesDraggable: interactive,
                     ref: refReactFlow,
+                    colorMode: isDark ? "dark" : "light",
                     children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(react$1.Background, { color: "#ccc" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        react$1.Background,
+                        {
+                          id: "lineage-bg",
+                          variant: react$1.BackgroundVariant.Dots,
+                          color: isDark ? colors.neutral[700] : colors.neutral[300],
+                          gap: 20,
+                          size: 2
+                        }
+                      ),
                       /* @__PURE__ */ jsxRuntime.jsx(
                         react$1.Controls,
                         {
                           showInteractive: false,
                           position: "top-right",
                           className: IGNORE_SCREENSHOT_CLASS,
+                          style: {
+                            backgroundColor: isDark ? colors.neutral[700] : void 0,
+                            borderColor: isDark ? colors.neutral[600] : void 0
+                          },
                           children: /* @__PURE__ */ jsxRuntime.jsx(
                             react$1.ControlButton,
                             {
@@ -15094,6 +15354,10 @@ function PrivateLineageView({ interactive = false, ...props }, ref) {
                                   from: "lineage_view"
                                 });
                               },
+                              style: {
+                                backgroundColor: isDark ? colors.neutral[700] : void 0,
+                                color: isDark ? colors.neutral[200] : void 0
+                              },
                               children: /* @__PURE__ */ jsxRuntime.jsx(Box35__default.default, { component: fi.FiCopy })
                             }
                           )
@@ -15127,7 +15391,9 @@ function PrivateLineageView({ interactive = false, ...props }, ref) {
                           nodeColor,
                           nodeStrokeWidth: 3,
                           zoomable: true,
-                          pannable: true
+                          pannable: true,
+                          bgColor: isDark ? colors.neutral[800] : void 0,
+                          maskColor: isDark ? `${colors.neutral[900]}99` : `${colors.neutral[100]}99`
                         }
                       ),
                       selectMode === "action_result" && /* @__PURE__ */ jsxRuntime.jsx(
@@ -15152,24 +15418,31 @@ function PrivateLineageView({ interactive = false, ...props }, ref) {
               ]
             }
           ),
-          focusedNode ? /* @__PURE__ */ jsxRuntime.jsx(Box35__default.default, { sx: { borderLeft: "solid 1px lightgray", height: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(NodeView, { node: focusedNode, onCloseNode: onNodeViewClosed }) }) : /* @__PURE__ */ jsxRuntime.jsx(Box35__default.default, {})
+          focusedNode ? /* @__PURE__ */ jsxRuntime.jsx(
+            Box35__default.default,
+            {
+              sx: {
+                borderLeft: "solid 1px",
+                borderColor: "divider",
+                height: "100%"
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(NodeView, { node: focusedNode, onCloseNode: onNodeViewClosed })
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(Box35__default.default, {})
         ]
       }
     ),
     valueDiffAlertDialog.AlertDialog
   ] });
 }
-var LineageView = React3.forwardRef(
+var LineageView = React4.forwardRef(
   PrivateLineageView
 );
 function LineagePage() {
   return /* @__PURE__ */ jsxRuntime.jsx(react$1.ReactFlowProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(LineageView, { interactive: true }) });
 }
 function SetupConnectionGuide() {
-  const { data: instanceInfo } = reactQuery.useQuery({
-    queryKey: cacheKeys.instanceInfo(),
-    queryFn: getRecceInstanceInfo
-  });
+  const { data: instanceInfo } = useRecceInstanceInfo();
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 h-full min-h-0 m-2 p-4 bg-blue-50 rounded-lg shadow-md justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-4/5 flex flex-col overflow-y-auto gap-6 px-8 pb-8", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Stack24__default.default, { alignItems: "center", spacing: 2, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -15177,7 +15450,7 @@ function SetupConnectionGuide() {
         {
           sx: {
             p: 1,
-            bgcolor: "white",
+            bgcolor: "background.paper",
             borderRadius: "50%",
             display: "flex",
             alignItems: "center",
@@ -15295,7 +15568,7 @@ ${sqlQuery}`;
   const { mutate: runQuery, isPending } = reactQuery.useMutation({
     mutationFn: queryFn
   });
-  const currentSchema = React3.useMemo(() => {
+  const currentSchema = React4.useMemo(() => {
     const initialValue = "N/A";
     const countMap = {};
     if (!lineageGraph) {
@@ -15326,7 +15599,8 @@ ${sqlQuery}`;
             padding: "4pt 8pt",
             gap: "5px",
             height: "54px",
-            borderBottom: "1px solid lightgray"
+            borderBottom: "1px solid",
+            borderColor: "divider"
           },
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(HistoryToggle, {}),
@@ -15391,7 +15665,8 @@ ${sqlQuery}`;
           padding: "4pt 8pt",
           gap: "5px",
           height: "54px",
-          borderBottom: "1px solid lightgray",
+          borderBottom: "1px solid",
+          borderColor: "divider",
           flex: "0 0 54px"
         },
         children: [
@@ -15480,6 +15755,8 @@ var ChecklistItem = ({
   onSelect,
   onMarkAsApproved
 }) => {
+  const theme = styles.useTheme();
+  const isDark = theme.palette.mode === "dark";
   const { featureToggles } = useRecceInstanceContext();
   const queryClient = reactQuery.useQueryClient();
   const checkId = check.check_id;
@@ -15504,10 +15781,10 @@ var ChecklistItem = ({
         width: "100%",
         p: "0.25rem 1.25rem",
         cursor: "pointer",
-        "&:hover": { bgcolor: "Cornsilk" },
-        bgcolor: selected ? "Floralwhite" : "inherit",
+        "&:hover": { bgcolor: isDark ? "grey.800" : "Cornsilk" },
+        bgcolor: selected ? isDark ? "grey.900" : "Floralwhite" : "inherit",
         borderBottom: "1px solid",
-        borderBottomColor: "divider",
+        borderBottomColor: isDark ? "grey.700" : "divider",
         borderLeft: "3px solid",
         borderLeftColor: selected ? "orange" : "transparent",
         display: "flex",
@@ -15555,7 +15832,7 @@ var ChecklistItem = ({
                 onClick: (e) => e.stopPropagation(),
                 sx: {
                   borderColor: "border.inverted",
-                  bgcolor: isMarkAsApprovedDisabled ? "grey.200" : void 0
+                  bgcolor: isMarkAsApprovedDisabled ? isDark ? "grey.700" : "grey.200" : void 0
                 }
               }
             ) })
@@ -15571,9 +15848,9 @@ var CheckList = ({
   onCheckSelected,
   onChecksReordered
 }) => {
-  const [bypassModal, setBypassModal] = React3.useState(false);
-  const [open, setOpen] = React3.useState(false);
-  const [pendingApprovalCheckId, setPendingApprovalCheckId] = React3.useState(null);
+  const [bypassModal, setBypassModal] = React4.useState(false);
+  const [open, setOpen] = React4.useState(false);
+  const [pendingApprovalCheckId, setPendingApprovalCheckId] = React4.useState(null);
   const queryClient = reactQuery.useQueryClient();
   const { mutate: markCheckedByID } = reactQuery.useMutation({
     mutationFn: (checkId) => updateCheck(checkId, { is_checked: true }),
@@ -15843,7 +16120,9 @@ function CommentInput({
   isSubmitting = false,
   placeholder = "Add a comment..."
 }) {
-  const [content, setContent] = React3.useState("");
+  const theme = styles.useTheme();
+  const isDark = theme.palette.mode === "dark";
+  const [content, setContent] = React4.useState("");
   const handleSubmit = () => {
     const trimmed = content.trim();
     if (trimmed) {
@@ -15872,14 +16151,17 @@ function CommentInput({
         disabled: isSubmitting,
         sx: {
           "& .MuiOutlinedInput-root": {
-            bgcolor: "white",
+            bgcolor: "background.paper",
             "&:hover .MuiOutlinedInput-notchedOutline": {
-              borderColor: "grey.400"
+              borderColor: isDark ? "grey.500" : "grey.400"
             },
             "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
               borderColor: "iochmara.400",
               boxShadow: "0 0 0 1px #4299E1"
             }
+          },
+          "& .MuiOutlinedInput-notchedOutline": {
+            borderColor: isDark ? "grey.600" : void 0
           }
         }
       }
@@ -15921,7 +16203,7 @@ function ExternalLinkConfirmDialog({
   onConfirm,
   onCancel
 }) {
-  const cancelRef = React3.useRef(null);
+  const cancelRef = React4.useRef(null);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     MuiDialog2__default.default,
     {
@@ -16012,8 +16294,8 @@ function MarkdownLink({
   children,
   internalDomains
 }) {
-  const [showConfirm, setShowConfirm] = React3.useState(false);
-  const [pendingUrl, setPendingUrl] = React3.useState(null);
+  const [showConfirm, setShowConfirm] = React4.useState(false);
+  const [pendingUrl, setPendingUrl] = React4.useState(null);
   const handleClick = (e) => {
     if (!href) return;
     if (isExternalUrl(href, internalDomains)) {
@@ -16066,7 +16348,8 @@ function MarkdownLink({
 }
 function CodeBlock({
   className,
-  children
+  children,
+  isDark = false
 }) {
   const match = /language-(\w+)/.exec(className || "");
   const language = match ? match[1] : void 0;
@@ -16078,7 +16361,8 @@ function CodeBlock({
       {
         component: "code",
         sx: {
-          bgcolor: "grey.100",
+          bgcolor: isDark ? "grey.800" : "grey.100",
+          color: isDark ? "grey.200" : "inherit",
           px: 1,
           py: 0.5,
           borderRadius: 0.5,
@@ -16115,6 +16399,8 @@ function MarkdownContent({
   fontSize = "0.875rem",
   internalDomains = []
 }) {
+  const theme = styles.useTheme();
+  const isDark = theme.palette.mode === "dark";
   const allInternalDomains = [
     window.location.hostname,
     "reccehq.com",
@@ -16126,7 +16412,7 @@ function MarkdownContent({
     // Links with external confirmation
     a: ({ href, children }) => /* @__PURE__ */ jsxRuntime.jsx(MarkdownLink, { href, internalDomains: allInternalDomains, children }),
     // Code blocks with syntax highlighting
-    code: CodeBlock,
+    code: (props) => /* @__PURE__ */ jsxRuntime.jsx(CodeBlock, { ...props, isDark }),
     // Paragraphs
     p: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(
       Typography28__default.default,
@@ -16162,11 +16448,11 @@ function MarkdownContent({
       {
         sx: {
           borderLeft: "3px solid",
-          borderLeftColor: "grey.300",
+          borderLeftColor: isDark ? "grey.600" : "grey.300",
           pl: 3,
           py: 1,
           my: 2,
-          color: "grey.600",
+          color: isDark ? "grey.400" : "grey.600",
           fontStyle: "italic"
         },
         children
@@ -16181,19 +16467,22 @@ function MarkdownContent({
           width: "100%",
           fontSize,
           border: "1px solid",
-          borderColor: "grey.200",
+          borderColor: isDark ? "grey.700" : "grey.200",
           borderRadius: 1
         },
         children
       }
     ) }),
-    thead: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(Box35__default.default, { component: "thead", sx: { bgcolor: "grey.50" }, children }),
+    thead: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(Box35__default.default, { component: "thead", sx: { bgcolor: isDark ? "grey.800" : "grey.50" }, children }),
     tbody: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(Box35__default.default, { component: "tbody", children }),
     tr: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(
       Box35__default.default,
       {
         component: "tr",
-        sx: { borderBottom: "1px solid", borderColor: "grey.200" },
+        sx: {
+          borderBottom: "1px solid",
+          borderColor: isDark ? "grey.700" : "grey.200"
+        },
         children
       }
     ),
@@ -16207,7 +16496,13 @@ function MarkdownContent({
     ),
     td: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(Box35__default.default, { component: "td", sx: { px: 2, py: 1 }, children }),
     // Horizontal rule
-    hr: () => /* @__PURE__ */ jsxRuntime.jsx(Box35__default.default, { component: "hr", sx: { my: 3, borderColor: "grey.200" } }),
+    hr: () => /* @__PURE__ */ jsxRuntime.jsx(
+      Box35__default.default,
+      {
+        component: "hr",
+        sx: { my: 3, borderColor: isDark ? "grey.700" : "grey.200" }
+      }
+    ),
     // Strong/Bold
     strong: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(Typography28__default.default, { component: "strong", sx: { fontWeight: 600 }, children }),
     // Emphasis/Italic
@@ -16319,11 +16614,13 @@ function CommentEvent({
   onEdit,
   onDelete
 }) {
-  const [isEditing, setIsEditing] = React3.useState(false);
-  const [editContent, setEditContent] = React3.useState(event.content || "");
-  const [isSubmitting, setIsSubmitting] = React3.useState(false);
-  const [isDeleting, setIsDeleting] = React3.useState(false);
-  const [deleteAnchorEl, setDeleteAnchorEl] = React3.useState(
+  const theme = styles.useTheme();
+  const isDark = theme.palette.mode === "dark";
+  const [isEditing, setIsEditing] = React4.useState(false);
+  const [editContent, setEditContent] = React4.useState(event.content || "");
+  const [isSubmitting, setIsSubmitting] = React4.useState(false);
+  const [isDeleting, setIsDeleting] = React4.useState(false);
+  const [deleteAnchorEl, setDeleteAnchorEl] = React4.useState(
     null
   );
   const isDeletePopoverOpen = Boolean(deleteAnchorEl);
@@ -16438,7 +16735,7 @@ function CommentEvent({
               autoFocus: true,
               sx: {
                 "& .MuiOutlinedInput-root": {
-                  bgcolor: "white",
+                  bgcolor: "background.paper",
                   "&:focus-within": {
                     borderColor: "primary.main"
                   }
@@ -16484,11 +16781,11 @@ function CommentEvent({
           Box35__default.default,
           {
             sx: {
-              bgcolor: "grey.50",
+              bgcolor: isDark ? "grey.800" : "grey.50",
               borderRadius: 1,
               p: 1,
               border: "1px solid",
-              borderColor: "grey.200",
+              borderColor: isDark ? "grey.700" : "grey.200",
               position: "relative",
               "&:hover .comment-actions": {
                 opacity: 1
@@ -16611,6 +16908,8 @@ function TimelineEvent({
   return /* @__PURE__ */ jsxRuntime.jsx(StateChangeEvent, { event });
 }
 function CheckTimeline({ checkId }) {
+  const theme = styles.useTheme();
+  const isDark = theme.palette.mode === "dark";
   const {
     events,
     isLoading,
@@ -16671,7 +16970,7 @@ function CheckTimeline({ checkId }) {
         height: "100%",
         alignItems: "stretch",
         borderLeft: "1px solid",
-        borderColor: "grey.200"
+        borderColor: isDark ? "grey.700" : "grey.200"
       },
       spacing: 0,
       children: [
@@ -16682,7 +16981,7 @@ function CheckTimeline({ checkId }) {
               px: 3,
               py: 2,
               borderBottom: "1px solid",
-              borderColor: "grey.200"
+              borderColor: isDark ? "grey.700" : "grey.200"
             },
             children: /* @__PURE__ */ jsxRuntime.jsx(Typography28__default.default, { variant: "subtitle2", sx: { fontWeight: 500 }, children: "Activity" })
           }
@@ -16697,7 +16996,12 @@ function CheckTimeline({ checkId }) {
               onDelete: handleDeleteComment
             }
           ),
-          index < events.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(Divider__default.default, { sx: { borderColor: "grey.100" } })
+          index < events.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(
+            Divider__default.default,
+            {
+              sx: { borderColor: isDark ? "grey.700" : "grey.100" }
+            }
+          )
         ] }, event.id)) }) }),
         /* @__PURE__ */ jsxRuntime.jsx(
           Box35__default.default,
@@ -16706,8 +17010,8 @@ function CheckTimeline({ checkId }) {
               px: 3,
               py: 3,
               borderTop: "1px solid",
-              borderColor: "grey.200",
-              bgcolor: "grey.50"
+              borderColor: isDark ? "grey.700" : "grey.200",
+              bgcolor: isDark ? "grey.900" : "grey.50"
             },
             children: /* @__PURE__ */ jsxRuntime.jsx(
               CommentInput,
@@ -16722,22 +17026,22 @@ function CheckTimeline({ checkId }) {
     }
   );
 }
-var RecceCheckContext = React3.createContext({
+var RecceCheckContext = React4.createContext({
   latestSelectedCheckId: "",
   setLatestSelectedCheckId: () => {
     return void 0;
   }
 });
-var useRecceCheckContext = () => React3.useContext(RecceCheckContext);
+var useRecceCheckContext = () => React4.useContext(RecceCheckContext);
 function CheckBreadcrumb({ name, setName }) {
-  const [isEditing, setIsEditing] = React3.useState(false);
-  const [editValue, setEditValue] = React3.useState(name);
-  const editInputRef = React3.useRef(null);
+  const [isEditing, setIsEditing] = React4.useState(false);
+  const [editValue, setEditValue] = React4.useState(name);
+  const editInputRef = React4.useRef(null);
   const handleClick = () => {
     setEditValue(name);
     setIsEditing(true);
   };
-  const handleCommit = React3.useCallback(() => {
+  const handleCommit = React4.useCallback(() => {
     setName(editValue);
     setIsEditing(false);
   }, [setName, editValue]);
@@ -16753,7 +17057,7 @@ function CheckBreadcrumb({ name, setName }) {
   const handleChange = (event) => {
     setEditValue(event.target.value);
   };
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     const handleClickOutside = (event) => {
       if (editInputRef.current && !editInputRef.current.contains(event.target)) {
         handleCommit();
@@ -16767,16 +17071,18 @@ function CheckBreadcrumb({ name, setName }) {
     };
   }, [isEditing, handleCommit]);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Breadcrumbs__default.default,
+    Box35__default.default,
     {
       sx: {
-        flex: "0 1 auto",
-        fontSize: "12pt",
+        flex: "2",
+        fontSize: "1rem",
         fontWeight: 500,
-        overflow: "hidden"
+        overflow: "hidden",
+        color: "text.primary",
+        cursor: "pointer"
       },
       className: "no-track-pii-safe",
-      children: /* @__PURE__ */ jsxRuntime.jsx(Box35__default.default, { sx: { cursor: "pointer", flex: "0 1 auto", overflow: "hidden" }, children: isEditing ? /* @__PURE__ */ jsxRuntime.jsx(
+      children: isEditing ? /* @__PURE__ */ jsxRuntime.jsx(
         TextField__default.default,
         {
           inputRef: editInputRef,
@@ -16799,15 +17105,15 @@ function CheckBreadcrumb({ name, setName }) {
           onClick: handleClick,
           children: name
         }
-      ) })
+      )
     }
   );
 }
 function CheckDescription({ value, onChange }) {
   const { featureToggles } = useRecceInstanceContext();
-  const [editing, setEditing] = React3.useState(false);
-  const [tempValue, setTempValue] = React3.useState();
-  const textareaRef = React3.useRef(null);
+  const [editing, setEditing] = React4.useState(false);
+  const [tempValue, setTempValue] = React4.useState();
+  const textareaRef = React4.useRef(null);
   const handleEdit = () => {
     setTempValue(value ?? "");
     setEditing(true);
@@ -16836,7 +17142,7 @@ function CheckDescription({ value, onChange }) {
   const handleChange = (event) => {
     setTempValue(event.target.value);
   };
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (editing && textareaRef.current) {
       const element = textareaRef.current;
       element.focus();
@@ -16939,7 +17245,7 @@ function _LineageDiffView({ check }, ref) {
   };
   return /* @__PURE__ */ jsxRuntime.jsx(Box35__default.default, { sx: { display: "flex", flexDirection: "column", height: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.ReactFlowProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(LineageView, { viewOptions, interactive: false, ref }) }) });
 }
-var LineageDiffView = React3.forwardRef(
+var LineageDiffView = React4.forwardRef(
   _LineageDiffView
 );
 function generateCheckTemplate({
@@ -16960,6 +17266,8 @@ function generateCheckTemplate({
 function PresetCheckTemplateView({
   yamlTemplate
 }) {
+  const muiTheme = styles.useTheme();
+  const isDark = muiTheme.palette.mode === "dark";
   return /* @__PURE__ */ jsxRuntime.jsx(
     CodeEditor,
     {
@@ -16969,6 +17277,7 @@ function PresetCheckTemplateView({
       lineNumbers: false,
       wordWrap: true,
       fontSize: 14,
+      theme: isDark ? "dark" : "light",
       height: "300px"
     }
   );
@@ -16977,7 +17286,8 @@ var NodelistItem = ({
   node,
   selected,
   onSelect,
-  schemaChanged
+  schemaChanged,
+  isDark
 }) => {
   const { icon } = getIconForResourceType(node.data.resourceType);
   const { base, current } = node.data.data;
@@ -17002,8 +17312,8 @@ var NodelistItem = ({
         fontSize: "10pt",
         p: "5px 8px",
         cursor: "pointer",
-        "&:hover": { bgcolor: "grey.200" },
-        bgcolor: selected ? "grey.100" : "inherit",
+        "&:hover": { bgcolor: isDark ? "grey.700" : "grey.200" },
+        bgcolor: selected ? isDark ? "grey.800" : "grey.100" : "inherit",
         alignItems: "center",
         gap: "5px"
       },
@@ -17030,6 +17340,8 @@ var NodelistItem = ({
   ) });
 };
 function PrivateSchemaDiffView({ check }, ref) {
+  const theme = styles.useTheme();
+  const isDark = theme.palette.mode === "dark";
   const { lineageGraph } = useLineageGraphContext();
   const params = check.params;
   const queryKey = [...cacheKeys.check(check.check_id), "select"];
@@ -17044,7 +17356,7 @@ function PrivateSchemaDiffView({ check }, ref) {
     refetchOnMount: true,
     enabled: !params.node_id
   });
-  const [nodes, changedNodes] = React3.useMemo(() => {
+  const [nodes, changedNodes] = React4.useMemo(() => {
     const selectedNodes = [];
     const changedNodes2 = [];
     const addedNodes = [];
@@ -17103,7 +17415,7 @@ function PrivateSchemaDiffView({ check }, ref) {
     });
     return [filteredNodes, changedNodes2];
   }, [params.node_id, data?.nodes, lineageGraph]);
-  const [selected, setSelected] = React3.useState(0);
+  const [selected, setSelected] = React4.useState(0);
   if (isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       Box35__default.default,
@@ -17112,7 +17424,7 @@ function PrivateSchemaDiffView({ check }, ref) {
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
-          bgcolor: "rgb(249,249,249)",
+          bgcolor: isDark ? "grey.900" : "grey.50",
           height: "100%"
         },
         children: "Loading..."
@@ -17126,7 +17438,7 @@ function PrivateSchemaDiffView({ check }, ref) {
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
-          bgcolor: "rgb(249,249,249)",
+          bgcolor: isDark ? "grey.900" : "grey.50",
           height: "100%"
         },
         className: "no-track-pii-safe",
@@ -17144,7 +17456,7 @@ function PrivateSchemaDiffView({ check }, ref) {
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
-          bgcolor: "rgb(249,249,249)",
+          bgcolor: isDark ? "grey.900" : "grey.50",
           height: "100%"
         },
         children: "No nodes matched"
@@ -17168,7 +17480,7 @@ function PrivateSchemaDiffView({ check }, ref) {
         {
           sx: {
             overflow: "auto",
-            bgcolor: "white",
+            bgcolor: "background.paper",
             listStyle: "none"
           },
           children: nodes.map((node2, i) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -17177,6 +17489,7 @@ function PrivateSchemaDiffView({ check }, ref) {
               node: node2,
               schemaChanged: changedNodes.includes(node2.id),
               selected: i === selected,
+              isDark,
               onSelect: () => {
                 setSelected(i);
               }
@@ -17189,11 +17502,13 @@ function PrivateSchemaDiffView({ check }, ref) {
   }
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
 }
-var SchemaDiffView = React3.forwardRef(PrivateSchemaDiffView);
+var SchemaDiffView = React4.forwardRef(PrivateSchemaDiffView);
 function CheckDetail({
   checkId,
   refreshCheckList
 }) {
+  const theme = styles.useTheme();
+  const isDark = theme.palette.mode === "dark";
   const { featureToggles, sessionId } = useRecceInstanceContext();
   const { setLatestSelectedCheckId } = useRecceCheckContext();
   const { cloudMode } = useLineageGraphContext();
@@ -17201,11 +17516,11 @@ function CheckDetail({
   const [, setLocation] = useAppLocation();
   const { successToast, failToast } = useClipBoardToast();
   const { markedAsApprovedToast } = useCheckToast();
-  const [submittedRunId, setSubmittedRunId] = React3.useState();
-  const [progress] = React3.useState();
-  const [isAborting, setAborting] = React3.useState(false);
-  const [isPresetCheckTemplateOpen, setIsPresetCheckTemplateOpen] = React3.useState(false);
-  const [menuAnchorEl, setMenuAnchorEl] = React3.useState(null);
+  const [submittedRunId, setSubmittedRunId] = React4.useState();
+  const [progress] = React4.useState();
+  const [isAborting, setAborting] = React4.useState(false);
+  const [isPresetCheckTemplateOpen, setIsPresetCheckTemplateOpen] = React4.useState(false);
+  const [menuAnchorEl, setMenuAnchorEl] = React4.useState(null);
   const menuOpen = Boolean(menuAnchorEl);
   const {
     isLoading,
@@ -17225,7 +17540,7 @@ function CheckDetail({
     RunResultView = runTypeEntry.RunResultView;
   }
   const isPresetCheck = check?.is_preset ?? false;
-  const lineageViewRef = React3.useRef(null);
+  const lineageViewRef = React4.useRef(null);
   const { mutate } = reactQuery.useMutation({
     mutationFn: (check2) => updateCheck(checkId, check2),
     onSuccess: async () => {
@@ -17260,7 +17575,7 @@ function CheckDetail({
       failToast("Failed to mark check as preset", error2);
     }
   });
-  const handleRerun = React3.useCallback(async () => {
+  const handleRerun = React4.useCallback(async () => {
     const type = check?.type;
     if (!type) {
       return;
@@ -17270,7 +17585,7 @@ function CheckDetail({
     await queryClient.invalidateQueries({ queryKey: cacheKeys.check(checkId) });
     if (refreshCheckList) refreshCheckList();
   }, [check, checkId, queryClient, refreshCheckList]);
-  const handleCancel = React3.useCallback(async () => {
+  const handleCancel = React4.useCallback(async () => {
     setAborting(true);
     if (!trackedRunId) {
       return;
@@ -17298,7 +17613,7 @@ function CheckDetail({
       failToast("Failed to copy the check to clipboard", err);
     }
   };
-  const handleApproveCheck = React3.useCallback(() => {
+  const handleApproveCheck = React4.useCallback(() => {
     const isChecked = check?.is_checked;
     mutate({ is_checked: !isChecked });
     if (!isChecked) {
@@ -17317,7 +17632,7 @@ function CheckDetail({
   const handleMenuClose = () => {
     setMenuAnchorEl(null);
   };
-  const [tabValue, setTabValue] = React3.useState("result");
+  const [tabValue, setTabValue] = React4.useState("result");
   const { ref, onCopyToClipboard, onMouseEnter, onMouseLeave } = useCopyToClipboardButton();
   const presetCheckTemplate = generateCheckTemplate({
     name: check?.name ?? "",
@@ -17442,7 +17757,7 @@ function CheckDetail({
                               alignItems: "center",
                               height: 40,
                               borderBottom: "2px solid",
-                              borderColor: "grey.300"
+                              borderColor: isDark ? "grey.700" : "grey.300"
                             },
                             children: [
                               checkTypeIcon && /* @__PURE__ */ jsxRuntime.jsx(
@@ -17487,7 +17802,7 @@ function CheckDetail({
                                       fa6.FaBookmark,
                                       {
                                         size: "1rem",
-                                        color: lightTheme.palette.iochmara.dark
+                                        color: theme.palette.iochmara.dark
                                       }
                                     )
                                   }
@@ -17574,7 +17889,14 @@ function CheckDetail({
                                           handleApproveCheck();
                                         },
                                         disabled: isDisabledByNoResult(check.type, run) || featureToggles.disableUpdateChecklist,
-                                        startIcon: check.is_checked ? /* @__PURE__ */ jsxRuntime.jsx(pi.PiCheckCircle, {}) : /* @__PURE__ */ jsxRuntime.jsx(vsc.VscCircleLarge, { style: { color: "lightgray" } }),
+                                        startIcon: check.is_checked ? /* @__PURE__ */ jsxRuntime.jsx(pi.PiCheckCircle, {}) : /* @__PURE__ */ jsxRuntime.jsx(
+                                          vsc.VscCircleLarge,
+                                          {
+                                            style: {
+                                              color: isDark ? theme.palette.grey[600] : theme.palette.grey[400]
+                                            }
+                                          }
+                                        ),
                                         sx: { flex: "0 0 auto", textTransform: "none" },
                                         children: check.is_checked ? "Approved" : "Pending"
                                       }
@@ -17708,7 +18030,7 @@ function CheckDetail({
                               display: "flex",
                               alignItems: "center",
                               justifyContent: "center",
-                              bgcolor: "rgb(249,249,249)",
+                              bgcolor: isDark ? "grey.900" : "grey.50",
                               height: "100%"
                             },
                             children: /* @__PURE__ */ jsxRuntime.jsxs(Stack24__default.default, { spacing: 2, alignItems: "center", children: [
@@ -17956,19 +18278,22 @@ var RunListItem = ({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Box35__default.default,
     {
-      sx: {
+      sx: (theme) => ({
         minWidth: "200px",
         display: "flex",
         flexDirection: "column",
         width: "100%",
         p: "5px 20px",
         cursor: "pointer",
-        borderBottom: "solid 1px lightgray",
+        borderBottom: "solid 1px",
+        borderBottomColor: "divider",
         borderLeft: "4px solid",
         borderLeftColor: isSelected ? "amber.400" : "transparent",
-        backgroundColor: isSelected ? "amber.50" : "transparent",
-        "&:hover": { bgcolor: isSelected ? "orange.50" : "grey.200" }
-      },
+        backgroundColor: isSelected ? theme.palette.mode === "dark" ? "amber.900" : "amber.50" : "transparent",
+        "&:hover": {
+          bgcolor: isSelected ? theme.palette.mode === "dark" ? "amber.800" : "orange.50" : theme.palette.mode === "dark" ? "grey.800" : "grey.200"
+        }
+      }),
       onClick: () => {
         onSelectRun(run.run_id);
       },
@@ -18054,7 +18379,8 @@ var DateSegmentItem = ({ runAt }) => {
         minWidth: "200px",
         width: "100%",
         p: "5px 20px",
-        borderBottom: "solid 1px lightgray",
+        borderBottom: "solid 1px",
+        borderBottomColor: "divider",
         color: "grey.500",
         fontSize: "11pt"
       },
@@ -18081,7 +18407,8 @@ var RunList = () => {
           width: "100%",
           flex: "0 0 54px",
           px: "24px 8px",
-          borderBottom: "solid 1px lightgray"
+          borderBottom: "solid 1px",
+          borderBottomColor: "divider"
         },
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(Typography28__default.default, { variant: "h6", children: "History" }),
@@ -18140,7 +18467,7 @@ function DateDividedRunHistoryItem({
     trackHistoryAction({ name: "click_run" });
     showRunId(runId2, false);
   };
-  const handleAddToChecklist = React3.useCallback(
+  const handleAddToChecklist = React4.useCallback(
     async (clickedRunId) => {
       const check = await createCheckByRun(clickedRunId);
       await queryClient.invalidateQueries({ queryKey: cacheKeys.checks() });
@@ -18148,14 +18475,14 @@ function DateDividedRunHistoryItem({
     },
     [setLocation, queryClient]
   );
-  const handleGoToCheck = React3.useCallback(
+  const handleGoToCheck = React4.useCallback(
     (checkId) => {
       trackHistoryAction({ name: "go_to_check" });
       setLocation(`/checks/?id=${checkId}`);
     },
     [setLocation]
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs(React3__default.default.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(React4__default.default.Fragment, { children: [
     shouldRenderDateSegment && /* @__PURE__ */ jsxRuntime.jsx(DateSegmentItem, { runAt: run.run_at }, currentDate),
     /* @__PURE__ */ jsxRuntime.jsx(
       RunListItem,
@@ -18180,20 +18507,23 @@ var NODE_CHANGE_STATUS_MSGS = {
   folder_changed: ["Modified", "Modified folder"]
 };
 function getIconForChangeStatus2(changeStatus) {
+  const greenColor = String(token("colors.green.solid"));
+  const redColor = String(token("colors.red.solid"));
+  const amberColor = String(token("colors.amber.emphasized"));
   if (changeStatus === "added") {
-    return { color: "#1dce00", icon: IconAdded };
+    return { color: greenColor, icon: IconAdded };
   } else if (changeStatus === "removed") {
-    return { color: "#ff067e", icon: IconRemoved };
+    return { color: redColor, icon: IconRemoved };
   } else if (changeStatus === "modified") {
-    return { color: "#ffa502", icon: IconModified };
+    return { color: amberColor, icon: IconModified };
   } else if (changeStatus === "col_added") {
-    return { color: "#1dce00", icon: IconAdded };
+    return { color: greenColor, icon: IconAdded };
   } else if (changeStatus === "col_removed") {
-    return { color: "#ff067e", icon: IconRemoved };
+    return { color: redColor, icon: IconRemoved };
   } else if (changeStatus === "col_changed") {
-    return { color: "#ffa502", icon: IconModified };
+    return { color: amberColor, icon: IconModified };
   } else if (changeStatus === "folder_changed") {
-    return { color: "#ffa502", icon: IconChanged };
+    return { color: amberColor, icon: IconChanged };
   }
   return { color: "inherit", icon: void 0 };
 }
@@ -18293,11 +18623,12 @@ function ChangeSummary({ lineageGraph }) {
       container: true,
       sx: {
         mb: "10px",
-        borderTop: "1px solid lightgray",
+        borderTop: "1px solid",
+        borderColor: "divider",
         p: "2.5vw"
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Grid2__default.default, { size: 6, sx: { borderColor: "lightgray" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(Grid2__default.default, { size: 6, sx: { borderColor: "divider" }, children: /* @__PURE__ */ jsxRuntime.jsx(
           SummaryText,
           {
             name: "Code Changes",
@@ -18320,35 +18651,42 @@ function ChangeSummary({ lineageGraph }) {
             ] })
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(Grid2__default.default, { size: 6, sx: { borderLeft: "1px solid lightgray", pl: "12px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
-          SummaryText,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Grid2__default.default,
           {
-            name: "Column Changes",
-            value: /* @__PURE__ */ jsxRuntime.jsxs(Grid2__default.default, { container: true, sx: { width: "100%" }, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Grid2__default.default, { size: 4, children: /* @__PURE__ */ jsxRuntime.jsx(
-                ChangeStatusCountLabel,
-                {
-                  changeStatus: "col_added",
-                  value: col_added
-                }
-              ) }),
-              /* @__PURE__ */ jsxRuntime.jsx(Grid2__default.default, { size: 4, children: /* @__PURE__ */ jsxRuntime.jsx(
-                ChangeStatusCountLabel,
-                {
-                  changeStatus: "col_removed",
-                  value: col_removed
-                }
-              ) }),
-              /* @__PURE__ */ jsxRuntime.jsx(Grid2__default.default, { size: 4, children: /* @__PURE__ */ jsxRuntime.jsx(
-                ChangeStatusCountLabel,
-                {
-                  changeStatus: "col_changed",
-                  value: col_changed
-                }
-              ) })
-            ] })
+            size: 6,
+            sx: { borderLeft: "1px solid", borderLeftColor: "divider", pl: "12px" },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              SummaryText,
+              {
+                name: "Column Changes",
+                value: /* @__PURE__ */ jsxRuntime.jsxs(Grid2__default.default, { container: true, sx: { width: "100%" }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Grid2__default.default, { size: 4, children: /* @__PURE__ */ jsxRuntime.jsx(
+                    ChangeStatusCountLabel,
+                    {
+                      changeStatus: "col_added",
+                      value: col_added
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Grid2__default.default, { size: 4, children: /* @__PURE__ */ jsxRuntime.jsx(
+                    ChangeStatusCountLabel,
+                    {
+                      changeStatus: "col_removed",
+                      value: col_removed
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Grid2__default.default, { size: 4, children: /* @__PURE__ */ jsxRuntime.jsx(
+                    ChangeStatusCountLabel,
+                    {
+                      changeStatus: "col_changed",
+                      value: col_changed
+                    }
+                  ) })
+                ] })
+              }
+            )
           }
-        ) })
+        )
       ]
     }
   );
@@ -18392,8 +18730,8 @@ function listChangedNodes(lineageGraph) {
   return changedNodes;
 }
 function SchemaSummary({ lineageGraph }) {
-  const [changedNodes, setChangedNodes] = React3.useState([]);
-  React3.useEffect(() => {
+  const [changedNodes, setChangedNodes] = React4.useState([]);
+  React4.useEffect(() => {
     setChangedNodes(listChangedNodes(lineageGraph));
   }, [lineageGraph]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [