@datarecce/ui 0.1.12 → 0.1.13

package/dist/components.mjs

@@ -1,7 +1,7 @@
 import CssBaseline from '@mui/material/CssBaseline';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
-import { useTheme } from 'next-themes';
-import React3, { createContext, forwardRef, useRef, useImperativeHandle, useMemo, useState, useContext, useCallback, useEffect, useLayoutEffect, Fragment as Fragment$1 } from 'react';
+import { createTheme, useTheme, alpha, ThemeProvider } from '@mui/material/styles';
+import { useTheme as useTheme$1 } from 'next-themes';
+import React4, { createContext, forwardRef, useRef, useImperativeHandle, useMemo, useState, useContext, useCallback, useEffect, useLayoutEffect, Fragment as Fragment$1 } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import MuiAlert from '@mui/material/Alert';
 import CircularProgress4 from '@mui/material/CircularProgress';
@@ -12,11 +12,12 @@ import Box35 from '@mui/material/Box';
 import Button11 from '@mui/material/Button';
 import { ErrorBoundary as ErrorBoundary$1 } from '@sentry/react';
 import ReactSplit from 'react-split';
-import './styles-PJUYW64Y.css';
-import { useReactFlow, useNodesState, useEdgesState, ReactFlow, Background, Controls, ControlButton, Panel, MiniMap, getNodesBounds, ReactFlowProvider, getBezierPath, BaseEdge, useStore, Handle, Position } from '@xyflow/react';
+import './styles-QUPOR3LM.css';
+import { useReactFlow, useNodesState, useEdgesState, ReactFlow, Background, BackgroundVariant, Controls, ControlButton, Panel, MiniMap, getNodesBounds, ReactFlowProvider, getBezierPath, BaseEdge, useStore, Handle, Position } from '@xyflow/react';
 import Divider from '@mui/material/Divider';
 import dagre from '@dagrejs/dagre';
 import '@xyflow/react/dist/style.css';
+import './styles-JV3V5MVO.css';
 import { QueryClient, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import axios, { AxiosError } from 'axios';
 import { FiCopy, FiPackage, FiInfo, FiArrowRight, FiFrown } from 'react-icons/fi';
@@ -53,11 +54,11 @@ import { VscKebabVertical, VscHistory, VscDiffAdded, VscDiffRemoved, VscDiffModi
 import { PiWarning, PiCaretDown, PiInfo, PiX, PiRepeat, PiCopy, PiDotsThreeVertical, PiCheck, PiTrashFill, PiCheckCircle, PiInfoFill, PiPencilSimple, PiTrashSimple, PiBookmarkSimple, PiNotePencil, PiCircle, PiChatText, PiPlusCircle } from 'react-icons/pi';
 import MuiTooltip from '@mui/material/Tooltip';
 import { useCopyToClipboard } from 'usehooks-ts';
-import './style-LYNBK7ND.css';
+import './style-466WWZLM.css';
 import ListSubheader3 from '@mui/material/ListSubheader';
 import { themeQuartz, ModuleRegistry, AllCommunityModule } from 'ag-grid-community';
 import { AgGridReact } from 'ag-grid-react';
-import './agGridStyles-L5J6VVIU.css';
+import './agGridStyles-VYALGSJU.css';
 import ButtonGroup from '@mui/material/ButtonGroup';
 import { formatDistanceToNow, format, parseISO, formatDistance } from 'date-fns';
 import saveAs from 'file-saver';
@@ -65,7 +66,6 @@ import { toCanvas } from 'html-to-image';
 import { FaRegDotCircle, FaCube, FaDatabase, FaSeedling, FaCamera, FaCheckSquare, FaRegSquare, FaExpandArrowsAlt, FaCheckCircle, FaRegCheckCircle } from 'react-icons/fa';
 import { FaChartSimple, FaGauge, FaCircleNodes, FaPlay, FaBookmark } from 'react-icons/fa6';
 import Chip2 from '@mui/material/Chip';
-import './styles-VXS6KNFS.css';
 import Skeleton from '@mui/material/Skeleton';
 import { RiMindMap, RiSwapLine, RiArrowUpSFill, RiArrowDownSFill, RiTerminalBoxLine } from 'react-icons/ri';
 import { BiArrowFromBottom, BiArrowToBottom } from 'react-icons/bi';
@@ -104,7 +104,6 @@ import Markdown from 'react-markdown';
 import { Prism } from 'react-syntax-highlighter';
 import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import remarkGfm from 'remark-gfm';
-import Breadcrumbs from '@mui/material/Breadcrumbs';
 import SimpleBar from 'simplebar-react';
 import 'simplebar/dist/simplebar.min.css';
 import Card from '@mui/material/Card';
@@ -322,35 +321,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),
@@ -410,11 +382,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"
@@ -441,11 +433,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
@@ -492,9 +484,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
@@ -541,19 +533,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)
@@ -588,15 +580,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
@@ -605,22 +597,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
@@ -701,17 +693,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]
+      })
     }
   }
 };
@@ -942,7 +934,7 @@ function MuiProvider({
   forcedTheme,
   enableCssBaseline = false
 }) {
-  const { resolvedTheme } = useTheme();
+  const { resolvedTheme } = useTheme$1();
   const theme = useMemo(() => {
     const mode = forcedTheme ?? resolvedTheme;
     return mode === "dark" ? darkTheme : lightTheme;
@@ -1141,8 +1133,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: [
@@ -1672,6 +1665,17 @@ function formatDuration(totalSeconds, style = "verbose") {
   }
   return formatVerbose(components);
 }
+var ApiConfigContext = createContext(null);
+var defaultApiConfigContext = {
+  apiPrefix: "",
+  authToken: void 0,
+  baseUrl: void 0,
+  apiClient: axios.create({ baseURL: PUBLIC_API_URL })
+};
+function useApiConfig() {
+  const context = useContext(ApiConfigContext);
+  return context ?? defaultApiConfigContext;
+}
 
 // recce-source/js/src/lib/api/cacheKeys.ts
 var cacheKeys = {
@@ -1689,11 +1693,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 useQuery({
+    queryKey: cacheKeys.instanceInfo(),
+    queryFn: () => getRecceInstanceInfo(apiClient)
+  });
+};
 var defaultFeatureToggles = {
   mode: null,
   disableSaveToFile: false,
@@ -1717,8 +1730,8 @@ var InstanceInfo = createContext(defaultValue);
 var useRecceInstanceContext = () => useContext(InstanceInfo);
 
 // recce-source/js/src/lib/api/flag.ts
-async function getServerFlag() {
-  return (await axiosClient.get("/api/flag")).data;
+async function getServerFlag(client = axiosClient) {
+  return (await client.get("/api/flag")).data;
 }
 async function getModelInfo(model) {
   return (await axiosClient.get(
@@ -1791,9 +1804,10 @@ function useIdleTimeout() {
   return context;
 }
 var useRecceServerFlag = () => {
+  const { apiClient } = useApiConfig();
   return useQuery({
     queryKey: cacheKeys.flag(),
-    queryFn: getServerFlag
+    queryFn: () => getServerFlag(apiClient)
   });
 };
 var defaultLineageGraphsContext = {
@@ -2079,8 +2093,9 @@ var RunModal = ({
             sx: {
               p: 0,
               overflow: "auto",
-              borderTop: "1px solid lightgray",
-              borderBottom: "1px solid lightgray"
+              borderTop: "1px solid",
+              borderBottom: "1px solid",
+              borderColor: "divider"
             },
             children: /* @__PURE__ */ jsx(Box35, { sx: { contain: "layout" }, children: RunForm && /* @__PURE__ */ jsx(
               RunForm,
@@ -2381,10 +2396,56 @@ function formatAsAbbreviatedNumber(input) {
       }).format(input);
   }
 }
+
+// recce-source/js/src/components/charts/chartTheme.ts
+function getChartThemeColors(isDark) {
+  return {
+    gridColor: isDark ? "#4b5563" : "#d1d5db",
+    textColor: isDark ? "#e5e7eb" : "#374151",
+    borderColor: isDark ? "#6b7280" : "#9ca3af",
+    tooltipBackgroundColor: isDark ? "#1f2937" : "#ffffff",
+    tooltipTextColor: isDark ? "#e5e7eb" : "#111827"
+  };
+}
+function getThemedPluginOptions(isDark) {
+  const colors2 = getChartThemeColors(isDark);
+  return {
+    legend: {
+      labels: {
+        color: colors2.textColor
+      }
+    },
+    title: {
+      color: colors2.textColor
+    },
+    tooltip: {
+      backgroundColor: colors2.tooltipBackgroundColor,
+      titleColor: colors2.tooltipTextColor,
+      bodyColor: colors2.tooltipTextColor,
+      borderColor: colors2.borderColor,
+      borderWidth: 1
+    }
+  };
+}
 var CURRENT_BAR_COLOR = "#63B3ED";
 var BASE_BAR_COLOR = "#F6AD55";
 var CURRENT_BAR_COLOR_WITH_ALPHA = `${CURRENT_BAR_COLOR}A5`;
 var BASE_BAR_COLOR_WITH_ALPHA = `${BASE_BAR_COLOR}A5`;
+var CURRENT_BAR_COLOR_DARK = "#90CDF4";
+var BASE_BAR_COLOR_DARK = "#FBD38D";
+var CURRENT_BAR_COLOR_DARK_WITH_ALPHA = `${CURRENT_BAR_COLOR_DARK}A5`;
+var BASE_BAR_COLOR_DARK_WITH_ALPHA = `${BASE_BAR_COLOR_DARK}A5`;
+var INFO_VAL_COLOR = "#63B3ED";
+var INFO_VAL_COLOR_DARK = "#90CDF4";
+function getBarColors(isDark) {
+  return {
+    current: isDark ? CURRENT_BAR_COLOR_DARK : CURRENT_BAR_COLOR,
+    base: isDark ? BASE_BAR_COLOR_DARK : BASE_BAR_COLOR,
+    currentWithAlpha: isDark ? CURRENT_BAR_COLOR_DARK_WITH_ALPHA : CURRENT_BAR_COLOR_WITH_ALPHA,
+    baseWithAlpha: isDark ? BASE_BAR_COLOR_DARK_WITH_ALPHA : BASE_BAR_COLOR_WITH_ALPHA,
+    info: isDark ? INFO_VAL_COLOR_DARK : INFO_VAL_COLOR
+  };
+}
 function SquareIcon({ color }) {
   return /* @__PURE__ */ jsx(
     Box35,
@@ -2408,6 +2469,8 @@ function HistogramChart({
   hideAxis = false,
   animation = false
 }) {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
   Chart.register(
     BarElement,
     TimeSeriesScale,
@@ -2417,8 +2480,10 @@ function HistogramChart({
     Legend,
     Tooltip
   );
-  const chartOptions = getHistogramChartOptions(data, hideAxis, { animation });
-  const chartData = getHistogramChartData(data);
+  const chartOptions = getHistogramChartOptions(data, hideAxis, isDark, {
+    animation
+  });
+  const chartData = getHistogramChartData(data, isDark);
   return /* @__PURE__ */ jsx(Chart$1, { type: "bar", options: chartOptions, data: chartData, plugins: [] });
 }
 function getHistogramChartDataset(type, binEdges, label, color, data) {
@@ -2439,53 +2504,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}
@@ -2502,15 +2579,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",
@@ -2527,7 +2605,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 = {
@@ -2536,9 +2615,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
   };
@@ -2548,12 +2628,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);
       }
@@ -2570,6 +2651,8 @@ function formatDisplayedBinItem(binEdges, currentIndex) {
   return `${formattedStart} - ${formattedEnd}`;
 }
 function _HistogramDiffResultView({ run }, ref) {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
   if (!isHistogramDiffRun(run)) {
     throw new Error("Run type must be histogram_diff");
   }
@@ -2582,24 +2665,32 @@ function _HistogramDiffResultView({ run }, ref) {
   if (!base || !current) {
     return /* @__PURE__ */ jsx("div", { children: "Loading..." });
   }
-  return /* @__PURE__ */ jsx(Box35, { sx: { display: "flex", flexDirection: "column", height: "100%" }, children: /* @__PURE__ */ jsx(ScreenshotBox, { ref, height: "100%", children: /* @__PURE__ */ jsxs(Box35, { sx: { display: "flex", flexDirection: "row" }, children: [
-    /* @__PURE__ */ jsx(Box35, { sx: { flex: 1 } }),
-    /* @__PURE__ */ jsx(Box35, { sx: { width: "80%", height: "35vh", m: 4 }, children: /* @__PURE__ */ jsx(
-      HistogramChart,
-      {
-        data: {
-          title: `Model ${params.model}.${params.column_name}`,
-          type: run.params?.column_type ?? "",
-          datasets: [base, current],
-          min,
-          max,
-          samples: base.total,
-          binEdges
-        }
-      }
-    ) }),
-    /* @__PURE__ */ jsx(Box35, { sx: { flex: 1 } })
-  ] }) }) });
+  return /* @__PURE__ */ jsx(Box35, { sx: { display: "flex", flexDirection: "column", height: "100%" }, children: /* @__PURE__ */ jsx(
+    ScreenshotBox,
+    {
+      ref,
+      height: "100%",
+      backgroundColor: isDark ? "#1f2937" : "white",
+      children: /* @__PURE__ */ jsxs(Box35, { sx: { display: "flex", flexDirection: "row" }, children: [
+        /* @__PURE__ */ jsx(Box35, { sx: { flex: 1 } }),
+        /* @__PURE__ */ jsx(Box35, { sx: { width: "80%", height: "35vh", m: 4 }, children: /* @__PURE__ */ jsx(
+          HistogramChart,
+          {
+            data: {
+              title: `Model ${params.model}.${params.column_name}`,
+              type: run.params?.column_type ?? "",
+              datasets: [base, current],
+              min,
+              max,
+              samples: base.total,
+              binEdges
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Box35, { sx: { flex: 1 } })
+      ] })
+    }
+  ) });
 }
 var HistogramDiffResultView = forwardRef(_HistogramDiffResultView);
 function ProfileDiffForm({
@@ -3324,8 +3415,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;
@@ -3345,6 +3436,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,
@@ -3410,39 +3526,38 @@ function CopyControl({
   grayOut,
   isHovered
 }) {
-  const [copiedText, copyToClipboard] = useCopyToClipboard();
-  const hasCopiedText = Boolean(copiedText);
-  if (noCopy || grayOut) {
+  const [, copyToClipboard] = useCopyToClipboard();
+  const { successToast } = useClipBoardToast();
+  if (noCopy || grayOut || !isHovered) {
     return /* @__PURE__ */ jsx(Fragment, {});
   }
-  if (hasCopiedText) {
-    return /* @__PURE__ */ jsx(Fragment, { children: "Copied" });
-  }
-  if (!isHovered) {
-    return /* @__PURE__ */ jsx(Fragment, {});
-  }
-  return /* @__PURE__ */ jsx(
+  const handleCopy = () => {
+    copyToClipboard(value);
+    successToast(`${value} copied`);
+  };
+  return /* @__PURE__ */ jsx(MuiTooltip, { title: "Copy Value", children: /* @__PURE__ */ jsx(
     IconButton2,
     {
       "aria-label": "Copy",
       size: "small",
-      onClick: () => copyToClipboard(value),
+      onClick: handleCopy,
       sx: {
-        minWidth: "10px",
-        height: "10px",
+        minWidth: "0.625rem",
+        height: "0.625rem",
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
-        p: 0
+        p: 0,
+        color: "inherit"
       },
-      children: /* @__PURE__ */ jsx(PiCopy, { size: "10px" })
+      children: /* @__PURE__ */ jsx(PiCopy, { size: "0.625rem" })
     }
-  );
+  ) });
 }
 var inlineRenderCell = (params) => {
   const colDef = params.colDef;
-  const columnType = colDef?.columnType;
-  const columnRenderMode = colDef?.columnRenderMode;
+  const columnType = colDef?.context?.columnType;
+  const columnRenderMode = colDef?.context?.columnRenderMode;
   const columnKey = colDef?.field ?? "";
   if (!params.data) {
     return null;
@@ -3627,8 +3742,7 @@ function toDiffColumn(config) {
       headerClass: headerCellClass,
       headerComponent,
       cellRenderer: inlineRenderCell,
-      columnType,
-      columnRenderMode
+      context: { columnType, columnRenderMode }
     };
   }
   const cellClassBase = createCellClassBase(name, columnStatus);
@@ -3637,8 +3751,7 @@ function toDiffColumn(config) {
     headerName: name,
     headerClass: headerCellClass,
     headerGroupComponent: headerComponent,
-    columnType,
-    columnRenderMode,
+    context: { columnType, columnRenderMode },
     children: [
       {
         field: `base__${name}`,
@@ -3646,8 +3759,7 @@ function toDiffColumn(config) {
         headerClass: headerCellClass,
         cellClass: cellClassBase,
         cellRenderer: defaultRenderCell,
-        columnType,
-        columnRenderMode
+        context: { columnType, columnRenderMode }
       },
       {
         field: `current__${name}`,
@@ -3655,8 +3767,7 @@ function toDiffColumn(config) {
         headerClass: headerCellClass,
         cellClass: cellClassCurrent,
         cellRenderer: defaultRenderCell,
-        columnType,
-        columnRenderMode
+        context: { columnType, columnRenderMode }
       }
     ]
   };
@@ -3694,8 +3805,7 @@ function createPrimaryKeyColumn(config, headerProps) {
       return void 0;
     },
     cellRenderer: defaultRenderCell,
-    columnType,
-    columnRenderMode
+    context: { columnType, columnRenderMode }
   };
 }
 function createDiffColumn(config, displayMode, headerProps, baseTitle, currentTitle) {
@@ -3884,8 +3994,7 @@ function createPrimaryKeyColumn2(config, headerProps) {
     ),
     pinned: "left",
     cellRenderer: defaultRenderCell,
-    columnType,
-    columnRenderMode
+    context: { columnType, columnRenderMode }
   };
 }
 function createRegularColumn(config, headerProps) {
@@ -3904,8 +4013,7 @@ function createRegularColumn(config, headerProps) {
       }
     ),
     cellRenderer: defaultRenderCell,
-    columnType,
-    columnRenderMode
+    context: { columnType, columnRenderMode }
   };
 }
 function buildSimpleColumnDefinitions(config) {
@@ -4628,7 +4736,7 @@ function renderIndexCell(params) {
   const value = isRemoved ? baseIndex !== void 0 ? baseIndex : "-" : currentIndex !== void 0 ? currentIndex : "-";
   return /* @__PURE__ */ jsx("span", { children: value });
 }
-var MemoizedRenderIndexCell = React3.memo(renderIndexCell);
+var MemoizedRenderIndexCell = React4.memo(renderIndexCell);
 MemoizedRenderIndexCell.displayName = "MemoizedRenderIndexCell";
 function renderTypeCell(params) {
   if (!params.data) {
@@ -4661,7 +4769,7 @@ function renderTypeCell(params) {
   }
   return /* @__PURE__ */ jsx("span", { children: isRemoved ? baseType : currentType });
 }
-var MemoizedRenderTypeCell = React3.memo(renderTypeCell);
+var MemoizedRenderTypeCell = React4.memo(renderTypeCell);
 MemoizedRenderTypeCell.displayName = "MemoizedRenderTypeCell";
 
 // recce-source/js/src/lib/dataGrid/generators/toSchemaDataGrid.ts
@@ -5220,7 +5328,7 @@ var recceGridThemeLight = themeQuartz.withParams({
   headerFontWeight: 700,
   cellHorizontalPadding: 8
 });
-themeQuartz.withParams({
+var recceGridThemeDark = themeQuartz.withParams({
   backgroundColor: "#1e1e1e",
   headerBackgroundColor: "#252526",
   rowHoverColor: "#1e1e1e",
@@ -5276,7 +5384,11 @@ function _ScreenshotDataGrid({
     }),
     []
   );
-  const theme = useMemo(() => recceGridThemeLight, []);
+  const muiTheme = useTheme();
+  const gridTheme = useMemo(
+    () => muiTheme.palette.mode === "dark" ? recceGridThemeDark : recceGridThemeLight,
+    [muiTheme.palette.mode]
+  );
   const resolvedColumnDefs = columnDefs ?? columns;
   const resolvedRowData = rowData ?? rows;
   const resolvedDefaultColDef = defaultColDef ?? defaultColumnOptions;
@@ -5338,18 +5450,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": {
@@ -5362,18 +5474,18 @@ function _ScreenshotDataGrid({
         },
         // Index column styling
         "& .index-column": {
-          color: "rgb(128, 128, 128)",
+          color: muiTheme.palette.text.secondary,
           textAlign: "right"
         },
         // Frozen/pinned column styling
         "& .ag-pinned-left-cols-container .ag-cell": {
-          backgroundColor: "#f5f5f5"
+          backgroundColor: muiTheme.palette.mode === "dark" ? "#2d2d2d" : "#f5f5f5"
         }
       },
       children: /* @__PURE__ */ jsx(
         AgGridReact,
         {
-          theme,
+          theme: gridTheme,
           columnDefs: resolvedColumnDefs,
           rowData: resolvedRowData,
           getRowId: resolvedGetRowId,
@@ -5475,17 +5587,22 @@ var RunToolbar = ({
   warnings,
   children
 }) => {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
+  const hasWarnings = warnings && warnings.length > 0;
   return /* @__PURE__ */ jsxs(
     Box35,
     {
       sx: {
         display: "flex",
-        borderBottom: "1px solid lightgray",
+        borderBottom: "1px solid",
+        borderColor: "divider",
         justifyContent: "flex-end",
         gap: "5px",
         alignItems: "center",
         px: "10px",
-        bgcolor: warnings && warnings.length > 0 ? "amber.100" : "inherit"
+        bgcolor: hasWarnings ? isDark ? colors.amber[900] : colors.amber[100] : "inherit",
+        color: hasWarnings ? isDark ? colors.amber[200] : colors.amber[800] : "inherit"
       },
       children: [
         /* @__PURE__ */ jsx(
@@ -5498,8 +5615,13 @@ var RunToolbar = ({
               gap: 0
             },
             children: warnings?.map((warning) => /* @__PURE__ */ jsxs(Box35, { children: [
-              /* @__PURE__ */ jsx(PiWarning, { color: "amber.600" }),
-              " ",
+              /* @__PURE__ */ jsx(
+                PiWarning,
+                {
+                  color: isDark ? colors.amber[400] : colors.amber[600],
+                  style: { verticalAlign: "middle", marginRight: 4 }
+                }
+              ),
               warning
             ] }, _3.uniqueId(`-${warning}`)))
           }
@@ -5511,6 +5633,8 @@ var RunToolbar = ({
   );
 };
 var PrivateProfileDiffResultView = ({ run, viewOptions, onViewOptionsChanged }, ref) => {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
   if (!isProfileDiffRun(run)) {
     throw new Error("Only run type profile_diff is supported");
   }
@@ -5586,7 +5710,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: [
@@ -5620,6 +5744,8 @@ var PrivateProfileDiffResultView = ({ run, viewOptions, onViewOptionsChanged },
   );
 };
 var PrivateProfileResultView = ({ run, viewOptions, onViewOptionsChanged }, ref) => {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
   if (!isProfileRun(run)) {
     throw new Error("Only run type profile_diff is supported");
   }
@@ -5689,7 +5815,7 @@ var PrivateProfileResultView = ({ run, viewOptions, onViewOptionsChanged }, ref)
       sx: {
         display: "flex",
         flexDirection: "column",
-        bgcolor: "rgb(249, 249, 249)",
+        bgcolor: isDark ? "grey.900" : "grey.50",
         height: "100%"
       },
       children: /* @__PURE__ */ jsx(
@@ -5740,6 +5866,8 @@ var PrivateQueryDiffResultView = ({
   baseTitle,
   currentTitle
 }, ref) => {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
   const primaryKeys = useMemo(
     () => viewOptions?.primary_keys ?? [],
     [viewOptions]
@@ -5854,7 +5982,7 @@ var PrivateQueryDiffResultView = ({
       sx: {
         display: "flex",
         flexDirection: "column",
-        bgcolor: "rgb(249, 249, 249)",
+        bgcolor: isDark ? "grey.900" : "grey.50",
         height: "100%"
       },
       children: [
@@ -5927,6 +6055,8 @@ var PrivateQueryDiffJoinResultView = ({
   baseTitle,
   currentTitle
 }, ref) => {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
   if (run.type !== "query_diff") {
     throw new Error("QueryDiffResult view should be rendered as query_diff");
   }
@@ -6015,7 +6145,7 @@ var PrivateQueryDiffJoinResultView = ({
         sx: {
           display: "flex",
           flexDirection: "column",
-          bgcolor: "rgb(249, 249, 249)",
+          bgcolor: isDark ? "grey.900" : "grey.50",
           height: "100%"
         },
         children: [
@@ -6050,7 +6180,7 @@ var PrivateQueryDiffJoinResultView = ({
       sx: {
         display: "flex",
         flexDirection: "column",
-        bgcolor: "rgb(249, 249, 249)",
+        bgcolor: isDark ? "grey.900" : "grey.50",
         height: "100%"
       },
       children: [
@@ -6157,6 +6287,8 @@ var PrivateQueryResultView = ({
   onViewOptionsChanged,
   onAddToChecklist
 }, ref) => {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
   if (!(isQueryRun(run) || isQueryBaseRun(run))) {
     throw new Error("run type must be query");
   }
@@ -6220,25 +6352,27 @@ var PrivateQueryResultView = ({
   const limit = dataframe ? dataframe.limit ?? 0 : 0;
   const warning = limit > 0 && dataframe?.more ? `Warning: Displayed results are limited to ${limit.toLocaleString()} records. To ensure complete data retrieval, consider applying a LIMIT or WHERE clause to constrain the result set.` : null;
   const showTopBar = onAddToChecklist ?? warning;
-  return /* @__PURE__ */ jsxs(Stack24, { sx: { bgcolor: "rgb(249, 249, 249)", height: "100%" }, children: [
+  return /* @__PURE__ */ jsxs(Stack24, { sx: { bgcolor: isDark ? "grey.900" : "grey.50", height: "100%" }, children: [
     showTopBar && /* @__PURE__ */ jsxs(
       Stack24,
       {
         direction: "row",
         sx: {
-          borderBottom: "1px solid lightgray",
+          borderBottom: "1px solid",
+          borderBottomColor: "divider",
           alignItems: "center",
           gap: "5px",
           px: "10px",
-          bgcolor: warning ? "amber.100" : "inherit"
+          bgcolor: warning ? isDark ? colors.amber[900] : colors.amber[100] : "inherit",
+          color: warning ? isDark ? colors.amber[200] : colors.amber[800] : "inherit"
         },
         children: [
           warning && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(
-              Box35,
+              PiWarning,
               {
-                component: PiWarning,
-                sx: { color: "amber.600", alignSelf: "center" }
+                color: isDark ? colors.amber[400] : colors.amber[600],
+                style: { alignSelf: "center" }
               }
             ),
             " ",
@@ -6274,13 +6408,15 @@ var PrivateQueryResultView = ({
           maxWidth: 800,
           minWidth: 35
         },
-        className: "rdg-light"
+        className: isDark ? "rdg-dark" : "rdg-light"
       }
     )
   ] });
 };
 var QueryResultView = forwardRef(PrivateQueryResultView);
 function _RowCountGridView({ run, typeGuard, expectedType }, ref) {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
   if (!typeGuard(run)) {
     throw new Error(`Run type must be ${expectedType}`);
   }
@@ -6295,7 +6431,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"
@@ -6379,7 +6515,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);
@@ -6415,6 +6551,7 @@ function prepareSummaryList(topK, isDisplayTopTen) {
 function TopKChartTooltip({
   base,
   current,
+  barColors,
   children
 }) {
   return /* @__PURE__ */ jsx(
@@ -6422,7 +6559,7 @@ function TopKChartTooltip({
     {
       title: /* @__PURE__ */ jsxs(Box35, { children: [
         /* @__PURE__ */ jsxs(Typography28, { children: [
-          /* @__PURE__ */ jsx(SquareIcon, { color: CURRENT_BAR_COLOR }),
+          /* @__PURE__ */ jsx(SquareIcon, { color: barColors.current }),
           "Current: ",
           current.count,
           " (",
@@ -6430,7 +6567,7 @@ function TopKChartTooltip({
           ")"
         ] }),
         /* @__PURE__ */ jsxs(Typography28, { children: [
-          /* @__PURE__ */ jsx(SquareIcon, { color: BASE_BAR_COLOR }),
+          /* @__PURE__ */ jsx(SquareIcon, { color: barColors.base }),
           "Base: ",
           base.count,
           " (",
@@ -6447,6 +6584,9 @@ function TopKSummaryBarChart({
   topKDiff,
   isDisplayTopTen
 }) {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
+  const barColors = getBarColors(isDark);
   const currents = prepareSummaryList(topKDiff.current, isDisplayTopTen);
   const bases = prepareSummaryList(topKDiff.base, isDisplayTopTen);
   return /* @__PURE__ */ jsxs(Box35, { sx: { width: "100%", px: 20, py: 2 }, children: [
@@ -6456,9 +6596,9 @@ function TopKSummaryBarChart({
         Typography28,
         {
           component: "h3",
-          sx: { fontSize: "0.875rem", p: 1, color: "gray" },
+          sx: { fontSize: "0.875rem", p: 1, color: "text.secondary" },
           children: [
-            /* @__PURE__ */ jsx(SquareIcon, { color: BASE_BAR_COLOR }),
+            /* @__PURE__ */ jsx(SquareIcon, { color: barColors.base }),
             " Base"
           ]
         }
@@ -6467,9 +6607,9 @@ function TopKSummaryBarChart({
         Typography28,
         {
           component: "h3",
-          sx: { fontSize: "0.875rem", p: 1, color: "gray" },
+          sx: { fontSize: "0.875rem", p: 1, color: "text.secondary" },
           children: [
-            /* @__PURE__ */ jsx(SquareIcon, { color: CURRENT_BAR_COLOR }),
+            /* @__PURE__ */ jsx(SquareIcon, { color: barColors.current }),
             " Current"
           ]
         }
@@ -6482,120 +6622,133 @@ function TopKSummaryBarChart({
         return /* @__PURE__ */ jsx(Fragment, {});
       }
       return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-        /* @__PURE__ */ jsx(TopKChartTooltip, { base, current, children: /* @__PURE__ */ jsxs(
-          Box35,
+        /* @__PURE__ */ jsx(
+          TopKChartTooltip,
           {
-            sx: {
-              display: "flex",
-              alignItems: "center",
-              width: "100%",
-              "&:hover": { bgcolor: "action.hover" },
-              px: 2
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                Typography28,
-                {
-                  sx: {
-                    width: "10em",
-                    fontSize: "0.875rem",
-                    color: current.isSpecialLabel ? "grey.400" : "inherit",
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
-                    whiteSpace: "nowrap"
-                  },
-                  children: current.label
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                Box35,
-                {
-                  sx: {
-                    display: "flex",
-                    width: "70%",
-                    flexDirection: "column"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxs(Box35, { sx: { display: "flex", height: "1em" }, children: [
-                      /* @__PURE__ */ jsx(
-                        CategoricalBarChart,
-                        {
-                          topkCount: current.count,
-                          topkLabel: current.label,
-                          valids: topKDiff.current.valids,
-                          color: CURRENT_BAR_COLOR
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        Typography28,
-                        {
-                          sx: {
-                            ml: 2.5,
-                            mr: 1,
-                            fontSize: "0.875rem",
-                            width: "6em"
-                          },
-                          children: current.displayCount
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        Typography28,
-                        {
-                          sx: {
-                            color: "grey.400",
-                            fontSize: "0.875rem",
-                            width: "4em"
-                          },
-                          children: current.displayRatio
-                        }
-                      )
-                    ] }),
-                    /* @__PURE__ */ jsxs(Box35, { sx: { display: "flex", height: "1em" }, children: [
-                      /* @__PURE__ */ jsx(
-                        CategoricalBarChart,
-                        {
-                          topkCount: base.count,
-                          topkLabel: base.label,
-                          valids: topKDiff.base.valids,
-                          color: BASE_BAR_COLOR
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        Typography28,
-                        {
-                          sx: {
-                            ml: 2.5,
-                            mr: 1,
-                            fontSize: "0.875rem",
-                            width: "6em"
-                          },
-                          children: base.displayCount
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        Typography28,
-                        {
-                          sx: {
-                            color: "grey.400",
-                            fontSize: "0.875rem",
-                            width: "4em"
-                          },
-                          children: base.displayRatio
-                        }
-                      )
-                    ] })
-                  ]
-                }
-              )
-            ]
+            base,
+            current,
+            barColors,
+            children: /* @__PURE__ */ jsxs(
+              Box35,
+              {
+                sx: {
+                  display: "flex",
+                  alignItems: "center",
+                  width: "100%",
+                  "&:hover": { bgcolor: "action.hover" },
+                  px: 2
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Typography28,
+                    {
+                      sx: {
+                        width: "10em",
+                        fontSize: "0.875rem",
+                        color: current.isSpecialLabel ? "grey.400" : "inherit",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap"
+                      },
+                      children: current.label
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    Box35,
+                    {
+                      sx: {
+                        display: "flex",
+                        width: "70%",
+                        flexDirection: "column"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxs(Box35, { sx: { display: "flex", height: "1em" }, children: [
+                          /* @__PURE__ */ jsx(
+                            CategoricalBarChart,
+                            {
+                              topkCount: current.count,
+                              topkLabel: current.label,
+                              valids: topKDiff.current.valids,
+                              color: barColors.current,
+                              isDark
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            Typography28,
+                            {
+                              sx: {
+                                ml: 2.5,
+                                mr: 1,
+                                fontSize: "0.875rem",
+                                width: "6em"
+                              },
+                              children: current.displayCount
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            Typography28,
+                            {
+                              sx: {
+                                color: "grey.400",
+                                fontSize: "0.875rem",
+                                width: "4em"
+                              },
+                              children: current.displayRatio
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsxs(Box35, { sx: { display: "flex", height: "1em" }, children: [
+                          /* @__PURE__ */ jsx(
+                            CategoricalBarChart,
+                            {
+                              topkCount: base.count,
+                              topkLabel: base.label,
+                              valids: topKDiff.base.valids,
+                              color: barColors.base,
+                              isDark
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            Typography28,
+                            {
+                              sx: {
+                                ml: 2.5,
+                                mr: 1,
+                                fontSize: "0.875rem",
+                                width: "6em"
+                              },
+                              children: base.displayCount
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            Typography28,
+                            {
+                              sx: {
+                                color: "grey.400",
+                                fontSize: "0.875rem",
+                                width: "4em"
+                              },
+                              children: base.displayRatio
+                            }
+                          )
+                        ] })
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
           }
-        ) }),
+        ),
         /* @__PURE__ */ jsx(Divider, {})
       ] }, current.label);
     })
   ] });
 }
 function TopKSummaryList({ topk, valids, isDisplayTopTen }) {
+  const theme = 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);
@@ -6637,7 +6790,9 @@ function TopKSummaryList({ topk, valids, isDisplayTopTen }) {
               {
                 topkCount,
                 topkLabel,
-                valids
+                valids,
+                color: barColors.info,
+                isDark
               }
             ) }),
             /* @__PURE__ */ jsx(MuiTooltip, { title: displayTopkCount, placement: "top-start", children: /* @__PURE__ */ jsx(
@@ -6678,10 +6833,13 @@ function CategoricalBarChart({
   topkLabel,
   valids,
   animation = false,
-  color = INFO_VAL_COLOR
+  color = INFO_VAL_COLOR2,
+  isDark = false
 }) {
   Chart.register(CategoryScale, BarElement, LinearScale);
-  const chartOptions = getCatBarChartOptions(topkCount, valids, { animation });
+  const chartOptions = getCatBarChartOptions(topkCount, valids, isDark, {
+    animation
+  });
   const chartData = getCatBarChartData({
     topkCount,
     topkLabel,
@@ -6689,7 +6847,8 @@ function CategoricalBarChart({
   });
   return /* @__PURE__ */ jsx(Bar, { data: chartData, options: chartOptions, plugins: [] });
 }
-function getCatBarChartOptions(count, valids, { ...configOverrides } = {}) {
+function getCatBarChartOptions(_count, valids, isDark = false, { ...configOverrides } = {}) {
+  const themeColors = getChartThemeColors(isDark);
   return {
     responsive: true,
     maintainAspectRatio: false,
@@ -6698,10 +6857,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: {
@@ -6715,7 +6876,7 @@ function getCatBarChartOptions(count, valids, { ...configOverrides } = {}) {
 function getCatBarChartData({
   topkLabel,
   topkCount,
-  color = INFO_VAL_COLOR
+  color = INFO_VAL_COLOR2
 }) {
   return {
     labels: [topkLabel],
@@ -6736,39 +6897,53 @@ function getCatBarChartData({
   };
 }
 var PrivateTopKDiffResultView = ({ run }, ref) => {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
   const [isDisplayTopTen, setIsDisplayTopTen] = useState(true);
   const result = run.result;
   const params = run.params;
   const baseTopK = result.base;
   const currentTopK = result.current;
   return /* @__PURE__ */ jsxs(Box35, { sx: { display: "flex", flexDirection: "column", height: "100%" }, children: [
-    /* @__PURE__ */ jsxs(ScreenshotBox, { ref, blockSize: "auto", children: [
-      /* @__PURE__ */ jsxs(
-        Typography28,
-        {
-          variant: "h5",
-          sx: { pt: 4, textAlign: "center", color: "grey.600" },
-          children: [
-            "Model ",
-            params.model,
-            ".",
-            params.column_name
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxs(Stack24, { direction: "row", alignItems: "center", children: [
-        /* @__PURE__ */ jsx(Box35, { sx: { flex: 1 } }),
-        /* @__PURE__ */ jsx(
-          TopKSummaryBarChart,
-          {
-            topKDiff: result,
-            valids: currentTopK.valids || 0,
-            isDisplayTopTen
-          }
-        ),
-        /* @__PURE__ */ jsx(Box35, { sx: { flex: 1 } })
-      ] })
-    ] }),
+    /* @__PURE__ */ jsxs(
+      ScreenshotBox,
+      {
+        ref,
+        blockSize: "auto",
+        backgroundColor: isDark ? "#1f2937" : "white",
+        children: [
+          /* @__PURE__ */ jsxs(
+            Typography28,
+            {
+              variant: "h5",
+              sx: {
+                pt: 4,
+                textAlign: "center",
+                color: isDark ? "grey.200" : "grey.600"
+              },
+              children: [
+                "Model ",
+                params.model,
+                ".",
+                params.column_name
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(Stack24, { direction: "row", alignItems: "center", children: [
+            /* @__PURE__ */ jsx(Box35, { sx: { flex: 1 } }),
+            /* @__PURE__ */ jsx(
+              TopKSummaryBarChart,
+              {
+                topKDiff: result,
+                valids: currentTopK.valids || 0,
+                isDisplayTopTen
+              }
+            ),
+            /* @__PURE__ */ jsx(Box35, { sx: { flex: 1 } })
+          ] })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsx(Box35, { sx: { flex: 1 } }),
     (baseTopK.values.length > 10 || currentTopK.values.length > 10) && /* @__PURE__ */ jsx(Box35, { sx: { display: "flex", p: 5, justifyContent: "start" }, children: /* @__PURE__ */ jsx(
       Link,
@@ -6790,6 +6965,8 @@ var PrivateValueDiffDetailResultView = ({
   viewOptions,
   onViewOptionsChanged
 }, ref) => {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
   if (!isValueDiffDetailRun(run)) {
     throw new Error("run type must be value_diff_detail");
   }
@@ -6874,7 +7051,7 @@ var PrivateValueDiffDetailResultView = ({
         sx: {
           display: "flex",
           flexDirection: "column",
-          bgcolor: "rgb(249, 249, 249)",
+          bgcolor: isDark ? "grey.900" : "grey.50",
           height: "100%"
         },
         children: [
@@ -6909,7 +7086,7 @@ var PrivateValueDiffDetailResultView = ({
       sx: {
         display: "flex",
         flexDirection: "column",
-        bgcolor: "rgb(249, 249, 249)",
+        bgcolor: isDark ? "grey.900" : "grey.50",
         height: "100%"
       },
       children: [
@@ -6979,11 +7156,65 @@ function ValueDiffForm({
   onParamsChanged,
   setIsReadyToExecute
 }) {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
   const [allColumns, setAllColumns] = useState(
     !params.columns || params.columns.length === 0
   );
   const model = params.model;
   const primaryKey = params.primary_key;
+  const selectStyles = useMemo(
+    () => ({
+      container: (base) => ({
+        ...base,
+        width: "100%"
+      }),
+      control: (base) => ({
+        ...base,
+        minHeight: "40px",
+        backgroundColor: isDark ? colors.neutral[700] : base.backgroundColor,
+        borderColor: isDark ? colors.neutral[600] : base.borderColor
+      }),
+      menu: (base) => ({
+        ...base,
+        backgroundColor: isDark ? colors.neutral[700] : base.backgroundColor
+      }),
+      option: (base, state) => ({
+        ...base,
+        backgroundColor: state.isSelected ? isDark ? colors.neutral[600] : colors.iochmara[500] : state.isFocused ? isDark ? colors.neutral[600] : colors.iochmara[50] : isDark ? colors.neutral[700] : base.backgroundColor,
+        color: isDark ? colors.neutral[200] : base.color
+      }),
+      multiValue: (base) => ({
+        ...base,
+        backgroundColor: isDark ? colors.neutral[600] : base.backgroundColor
+      }),
+      multiValueLabel: (base) => ({
+        ...base,
+        color: isDark ? colors.neutral[200] : base.color
+      }),
+      multiValueRemove: (base) => ({
+        ...base,
+        color: isDark ? colors.neutral[400] : base.color,
+        "&:hover": {
+          backgroundColor: isDark ? colors.neutral[500] : colors.red[200],
+          color: isDark ? colors.neutral[200] : colors.red[600]
+        }
+      }),
+      input: (base) => ({
+        ...base,
+        color: isDark ? colors.neutral[200] : base.color
+      }),
+      singleValue: (base) => ({
+        ...base,
+        color: isDark ? colors.neutral[200] : base.color
+      }),
+      placeholder: (base) => ({
+        ...base,
+        color: isDark ? colors.neutral[400] : base.color
+      })
+    }),
+    [isDark]
+  );
   const {
     columns,
     primaryKey: nodePrimaryKey,
@@ -7043,16 +7274,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
         }
       )
     ] }),
@@ -7103,16 +7325,7 @@ function ValueDiffForm({
               columns: cols
             });
           },
-          styles: {
-            container: (base) => ({
-              ...base,
-              width: "100%"
-            }),
-            control: (base) => ({
-              ...base,
-              minHeight: "40px"
-            })
-          }
+          styles: selectStyles
         }
       )
     ] })
@@ -7155,20 +7368,28 @@ function _ValueDiffResultView({ run }, ref) {
           " removed)"
         ] }),
         /* @__PURE__ */ jsx(
-          ScreenshotDataGrid,
+          Box35,
           {
-            ref,
-            style: {
-              blockSize: "auto",
+            sx: {
+              flex: 1,
+              minHeight: 0,
               maxHeight: "100%",
               overflow: "auto",
-              borderBlock: "1px solid lightgray"
+              borderTop: "1px solid",
+              borderBottom: "1px solid",
+              borderColor: "divider"
             },
-            columns,
-            rows,
-            renderers: { noRowsFallback: /* @__PURE__ */ jsx(EmptyRowsRenderer, {}) },
-            defaultColumnOptions: { resizable: true },
-            className: "rdg-light"
+            children: /* @__PURE__ */ jsx(
+              ScreenshotDataGrid,
+              {
+                ref,
+                columns,
+                rows,
+                renderers: { noRowsFallback: /* @__PURE__ */ jsx(EmptyRowsRenderer, {}) },
+                defaultColumnOptions: { resizable: true },
+                className: "rdg-light"
+              }
+            )
           }
         )
       ]
@@ -7319,31 +7540,6 @@ var RecceActionContext = createContext({
   }
 });
 var useRecceActionContext = () => 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 loadHtml2Canvas = async () => {
   const module = await import('html2canvas-pro/dist/html2canvas-pro.esm.js');
   return module.default;
@@ -7362,7 +7558,7 @@ function useCopyToClipboard2({
   backgroundColor = null,
   boardEffect = true,
   shadowEffect = false,
-  borderStyle = "solid 1px #ccc",
+  borderStyle = `solid 1px ${colors.neutral[300]}`,
   borderRadius = "10px",
   onSuccess,
   onError,
@@ -7400,7 +7596,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);
@@ -7414,7 +7610,7 @@ function useCopyToClipboard2({
         const html2canvas = await loadHtml2Canvas();
         canvas = await html2canvas(nodeToUse, {
           logging: false,
-          backgroundColor: "#f5f5f5",
+          backgroundColor: backgroundColor ?? colors.neutral[100],
           ignoreElements
         });
       } else {
@@ -7487,7 +7683,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");
     },
@@ -7679,6 +7875,74 @@ var useRun = (runId) => {
     RunResultView
   };
 };
+function useThemeColors() {
+  const theme = 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 = () => {
@@ -7696,7 +7960,7 @@ function ActionControl({ onClose }) {
       }
     }
   };
-  return /* @__PURE__ */ jsx(Box35, { sx: { bgcolor: "white", borderRadius: 1, boxShadow: 6 }, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(Box35, { sx: { bgcolor: "background.paper", borderRadius: 1, boxShadow: 6 }, children: /* @__PURE__ */ jsxs(
     Stack24,
     {
       direction: "row",
@@ -7753,10 +8017,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,
@@ -7766,7 +8030,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,
@@ -7776,7 +8040,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,
@@ -7786,7 +8050,7 @@ function getIconForChangeStatus(changeStatus) {
     };
   }
   const color = String(token("colors.gray.focusRing"));
-  const backgroundColor = "#ffffff";
+  const backgroundColor = isDark ? "#404040" : "#ffffff";
   return {
     color,
     hexColor: color,
@@ -7845,10 +8109,10 @@ function ChangeStatusLegend() {
     Box35,
     {
       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]]) => {
@@ -7898,13 +8162,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
         }
       )
@@ -7923,13 +8187,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,
             ".",
@@ -7965,10 +8229,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__ */ jsx(FaRegDotCircle, {}),
@@ -7992,8 +8257,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"
         },
@@ -8111,6 +8376,7 @@ function GraphColumnNode(nodeProps) {
   const { id: nodeId } = data.node;
   const { column, type, transformationType, changeStatus } = data;
   const showContent = useStore((s) => s.transform[2] > 0.3);
+  const { background, text, border } = useThemeColors();
   const {
     viewOptions,
     showContextMenu,
@@ -8120,7 +8386,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.useState(false);
+  const [isHovered, setIsHovered] = React4.useState(false);
   const isHighlighted = isNodeHighlighted(columnNodeId);
   const isShowingChangeAnalysis = isNodeShowingChangeAnalysis(nodeId);
   if (!showContent) {
@@ -8133,10 +8399,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"
@@ -8154,7 +8421,7 @@ function GraphColumnNode(nodeProps) {
             sx: {
               display: "flex",
               fontSize: "11px",
-              color: "black",
+              color: text.primary,
               width: "100%",
               gap: "3px",
               alignItems: "center",
@@ -8172,7 +8439,7 @@ function GraphColumnNode(nodeProps) {
                     fontSize: 14,
                     display: "inline-flex",
                     cursor: "pointer",
-                    "&:hover": { color: "black" }
+                    "&:hover": { color: text.primary }
                   },
                   onClick: (e) => {
                     e.preventDefault();
@@ -8242,10 +8509,10 @@ function ColumnLevelLineageLegend() {
     Box35,
     {
       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]]) => {
@@ -8415,15 +8682,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",
@@ -8516,10 +8784,10 @@ function RowCountDiffTag({
     Box35,
     {
       component: "span",
-      sx: {
-        ...tagRootSx,
+      sx: (theme) => ({
+        ...tagRootSx(theme),
         gap: 0.5
-      },
+      }),
       children: [
         /* @__PURE__ */ jsx(RunTypeIcon, {}),
         rowsToShow != null || isFetching ? isFetching ? /* @__PURE__ */ jsx(Skeleton, { width: 30, height: 16 }) : rowsToShow != null ? /* @__PURE__ */ jsx(_RowCountByRate, { rowCount: rowsToShow }) : /* @__PURE__ */ jsx(Typography28, { variant: "caption", children: "row count" }) : /* @__PURE__ */ jsx(Typography28, { variant: "caption", children: "row count" }),
@@ -8714,6 +8982,7 @@ var NodeRunsAggregated = ({
   inverted
 }) => {
   const { lineageGraph, runsAggregated } = useLineageGraphContext();
+  const { text, isDark } = useThemeColors();
   const runs = runsAggregated?.[id];
   const node = lineageGraph?.nodes[id];
   if (!runs && !node) {
@@ -8731,8 +9000,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__ */ jsxs(Box35, { sx: { display: "flex", flex: 1, alignItems: "center" }, children: [
     schemaChanged !== void 0 && /* @__PURE__ */ jsx(
@@ -8813,6 +9082,7 @@ function GraphNode(nodeProps) {
   const { data } = nodeProps;
   const { id, resourceType, changeStatus } = data;
   const showContent = useStore((s) => s.transform[2] > 0.3);
+  const { background, text, isDark } = useThemeColors();
   const { icon: ResourceIcon } = getIconForResourceType(resourceType);
   const [isHovered, setIsHovered] = useState(false);
   const {
@@ -8840,10 +9110,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;
@@ -8854,15 +9124,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;
@@ -8870,27 +9140,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;
     }
@@ -9019,9 +9289,9 @@ function GraphNode(nodeProps) {
                                         component: FaRegDotCircle,
                                         sx: {
                                           fontSize: 14,
-                                          color: "gray",
+                                          color: text.secondary,
                                           cursor: "pointer",
-                                          "&:hover": { color: "black" }
+                                          "&:hover": { color: text.primary }
                                         },
                                         onClick: (e) => {
                                           e.preventDefault();
@@ -9043,9 +9313,9 @@ function GraphNode(nodeProps) {
                               {
                                 component: VscKebabVertical,
                                 sx: {
-                                  color: "gray",
+                                  color: text.secondary,
                                   cursor: "pointer",
-                                  "&:hover": { color: "black" }
+                                  "&:hover": { color: text.primary }
                                 },
                                 onClick: (e) => {
                                   e.preventDefault();
@@ -9101,7 +9371,7 @@ function GraphNode(nodeProps) {
                           {
                             sx: {
                               height: 20,
-                              color: "gray",
+                              color: text.secondary,
                               fontSize: "9pt",
                               margin: 0,
                               fontWeight: 600
@@ -9806,6 +10076,7 @@ function HistoryToggle() {
       {
         size: "xsmall",
         variant: "outlined",
+        color: "neutral",
         startIcon: /* @__PURE__ */ jsx(VscHistory, {}),
         onClick: () => {
           trackHistoryAction({ name: isHistoryOpen ? "hide" : "show" });
@@ -9816,74 +10087,32 @@ 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__ */ jsxs(Stack24, { alignItems: "flex-start", spacing: 0, children: [
     /* @__PURE__ */ jsx(Typography28, { fontSize: "10pt", color: "text.secondary", pb: 1, children: "Select nodes by dbt node selector syntax" }),
     /* @__PURE__ */ jsxs(Typography28, { fontSize: "8pt", children: [
-      /* @__PURE__ */ jsx(
-        Box35,
-        {
-          component: "code",
-          sx: {
-            fontSize: "8pt",
-            bgcolor: "grey.100",
-            px: 0.5,
-            borderRadius: 1
-          },
-          children: "model_name"
-        }
-      ),
+      /* @__PURE__ */ jsx(Box35, { component: "code", sx: codeBlockSx, children: "model_name" }),
       " ",
       "Select a node"
     ] }),
     /* @__PURE__ */ jsxs(Typography28, { fontSize: "8pt", children: [
-      /* @__PURE__ */ jsx(
-        Box35,
-        {
-          component: "code",
-          sx: {
-            fontSize: "8pt",
-            bgcolor: "grey.100",
-            px: 0.5,
-            borderRadius: 1
-          },
-          children: "model_name+"
-        }
-      ),
+      /* @__PURE__ */ jsx(Box35, { component: "code", sx: codeBlockSx, children: "model_name+" }),
       " ",
       "Select downstream nodes"
     ] }),
     /* @__PURE__ */ jsxs(Typography28, { fontSize: "8pt", children: [
-      /* @__PURE__ */ jsx(
-        Box35,
-        {
-          component: "code",
-          sx: {
-            fontSize: "8pt",
-            bgcolor: "grey.100",
-            px: 0.5,
-            borderRadius: 1
-          },
-          children: "+model_name"
-        }
-      ),
+      /* @__PURE__ */ jsx(Box35, { component: "code", sx: codeBlockSx, children: "+model_name" }),
       " ",
       "Select upstream nodes"
     ] }),
     /* @__PURE__ */ jsxs(Typography28, { fontSize: "8pt", children: [
-      /* @__PURE__ */ jsx(
-        Box35,
-        {
-          component: "code",
-          sx: {
-            fontSize: "8pt",
-            bgcolor: "grey.100",
-            px: 0.5,
-            borderRadius: 1
-          },
-          children: "model*"
-        }
-      ),
+      /* @__PURE__ */ jsx(Box35, { component: "code", sx: codeBlockSx, children: "model*" }),
       " ",
       "Select by wildcard"
     ] })
@@ -10056,8 +10285,8 @@ var NodeSelectionInput = (props) => {
             boxShadow: 3,
             border: 1,
             borderRadius: 1,
-            color: "black",
-            bgcolor: "white"
+            color: "text.primary",
+            bgcolor: "background.paper"
           }
         }
       },
@@ -10401,7 +10630,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",
@@ -10509,7 +10738,7 @@ function PrivateSingleEnvSchemaView({ current, showMenu = true }, ref) {
         getRowClass,
         onCellClicked: handleCellClicked,
         onGridReady: handleGridReady,
-        rowSelection: "single"
+        rowSelection: { mode: "singleRow" }
       }
     )
   ] });
@@ -10636,7 +10865,7 @@ function PrivateSchemaView({ base, current, showMenu = true }, ref) {
         getRowClass,
         onCellClicked: handleCellClicked,
         onGridReady: handleGridReady,
-        rowSelection: "single"
+        rowSelection: { mode: "singleRow" }
       }
     )
   ] });
@@ -10832,6 +11061,8 @@ var NodeSqlView = ({ node }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
   const { data: flags, isLoading } = useRecceServerFlag();
+  const muiTheme = useTheme();
+  const isDark = muiTheme.palette.mode === "dark";
   const isSingleEnvOnboarding = flags?.single_env_onboarding;
   if (isLoading) {
     return /* @__PURE__ */ jsx(Fragment, {});
@@ -10861,7 +11092,8 @@ var NodeSqlView = ({ node }) => {
             value: original ?? "",
             readOnly: true,
             lineNumbers: true,
-            wordWrap: false
+            wordWrap: false,
+            theme: isDark ? "dark" : "light"
           }
         ) : /* @__PURE__ */ jsx(
           DiffEditor,
@@ -10872,6 +11104,7 @@ var NodeSqlView = ({ node }) => {
             readOnly: true,
             lineNumbers: true,
             sideBySide: false,
+            theme: isDark ? "dark" : "light",
             height: "100%"
           }
         ),
@@ -10921,7 +11154,8 @@ var NodeSqlView = ({ node }) => {
                   fontSize: 16,
                   readOnly: true,
                   lineNumbers: true,
-                  wordWrap: false
+                  wordWrap: false,
+                  theme: isDark ? "dark" : "light"
                 }
               ) : /* @__PURE__ */ jsx(
                 DiffEditor,
@@ -10929,6 +11163,7 @@ var NodeSqlView = ({ node }) => {
                   original: original ?? "",
                   modified: modified ?? "",
                   language: "sql",
+                  theme: isDark ? "dark" : "light",
                   className: "text-base"
                 }
               ) })
@@ -11913,6 +12148,8 @@ function SqlEditor({
   ...props
 }) {
   const { featureToggles } = useRecceInstanceContext();
+  const muiTheme = useTheme();
+  const isDark = muiTheme.palette.mode === "dark";
   const handleEditorChange = (value2) => {
     if (onChange) {
       onChange(value2);
@@ -11961,7 +12198,7 @@ function SqlEditor({
       {
         direction: "row",
         sx: {
-          bgcolor: "#EDF2F880",
+          bgcolor: isDark ? alpha(colors.neutral[700], 0.5) : alpha(colors.neutral[100], 0.5),
           height: "40px",
           minHeight: "40px",
           fontSize: "14px",
@@ -11996,7 +12233,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__ */ jsx(FaPlay, {}),
               children: "Run Query"
@@ -12016,6 +12253,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"
       }
     )
@@ -12052,7 +12290,8 @@ function DualSqlEditor({
           height: "100%",
           width: "50%",
           gap: 0,
-          borderRight: "1px solid #D4DBE4"
+          borderRight: "1px solid",
+          borderRightColor: "divider"
         },
         children: /* @__PURE__ */ jsx(
           SqlEditor,
@@ -12202,6 +12441,7 @@ var RunView = forwardRef(
     children,
     onExecuteRun
   }, ref) => {
+    const theme = useTheme();
     const errorMessage = error?.response?.data?.detail ?? run?.error;
     if (errorMessage) {
       return /* @__PURE__ */ jsxs(MuiAlert, { severity: "error", children: [
@@ -12226,7 +12466,7 @@ var RunView = forwardRef(
             justifyContent: "center",
             p: "1rem",
             height: "100%",
-            bgcolor: "rgb(249,249,249)"
+            bgcolor: theme.palette.mode === "dark" ? "grey.900" : "grey.50"
           },
           children: /* @__PURE__ */ jsxs(Stack24, { spacing: 2, alignItems: "center", children: [
             /* @__PURE__ */ jsxs(Stack24, { direction: "row", alignItems: "center", spacing: 1, children: [
@@ -12279,10 +12519,10 @@ var RunView = 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__ */ jsx(CircularProgress4, { size: 32 })
         }
       );
     }
@@ -12322,6 +12562,8 @@ var RunView = forwardRef(
   }
 );
 var _ParamView = (data) => {
+  const muiTheme = useTheme();
+  const isDark = muiTheme.palette.mode === "dark";
   const yaml3 = YAML.stringify(data, null, 2);
   return /* @__PURE__ */ jsx(
     CodeEditor,
@@ -12333,6 +12575,7 @@ var _ParamView = (data) => {
       wordWrap: true,
       fontSize: 14,
       height: "100%",
+      theme: isDark ? "dark" : "light",
       className: "no-track-pii-safe"
     }
   );
@@ -12686,7 +12929,8 @@ function SandboxTopBar({
         p: "4pt 8pt",
         gap: "5px",
         height: "54px",
-        borderBottom: "1px solid lightgray",
+        borderBottom: "1px solid",
+        borderBottomColor: "divider",
         flex: "0 0 54px"
       },
       children: [
@@ -12741,6 +12985,8 @@ function SandboxEditorLabels({
   height = "32px",
   flex = "0 0 auto"
 }) {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
   const { lineageGraph, envInfo } = useLineageGraphContext();
   const widthOfBar = "50%";
   const margin = "0 16px";
@@ -12768,7 +13014,7 @@ function SandboxEditorLabels({
         fontSize: "14px",
         alignItems: "center",
         m: 0,
-        bgcolor: "#EDF2F880"
+        bgcolor: isDark ? alpha(colors.neutral[700], 0.5) : alpha(colors.neutral[100], 0.5)
       },
       children: [
         /* @__PURE__ */ jsx(Stack24, { sx: { width: widthOfBar }, children: /* @__PURE__ */ jsxs(Typography28, { sx: { fontWeight: "bold", margin }, children: [
@@ -12784,6 +13030,8 @@ function SandboxEditorLabels({
   );
 }
 function SqlPreview({ current, onChange }) {
+  const muiTheme = useTheme();
+  const isDark = muiTheme.palette.mode === "dark";
   return /* @__PURE__ */ jsx(
     DiffEditor,
     {
@@ -12793,6 +13041,7 @@ function SqlPreview({ current, onChange }) {
       readOnly: false,
       lineNumbers: true,
       sideBySide: true,
+      theme: isDark ? "dark" : "light",
       height: "100%",
       onModifiedChange: onChange
     }
@@ -12920,7 +13169,7 @@ function SandboxView({ isOpen, onClose, current }) {
           {
             sx: {
               height: "40px",
-              bgcolor: "rgb(77, 209, 176)",
+              bgcolor: "cyan.600",
               px: 0,
               py: 2,
               display: "flex",
@@ -12951,7 +13200,7 @@ function SandboxView({ isOpen, onClose, current }) {
                         sx: {
                           fontFamily: '"Montserrat", sans-serif',
                           fontSize: "1.125rem",
-                          color: "white"
+                          color: "common.white"
                         },
                         children: "RECCE"
                       }
@@ -12964,7 +13213,7 @@ function SandboxView({ isOpen, onClose, current }) {
                         variant: "outlined",
                         sx: {
                           fontSize: "0.875rem",
-                          color: "white",
+                          color: "common.white",
                           borderColor: "rgba(255,255,255,0.5)"
                         }
                       }
@@ -12981,7 +13230,7 @@ function SandboxView({ isOpen, onClose, current }) {
                     position: "absolute",
                     right: 8,
                     top: 4,
-                    color: "white"
+                    color: "common.white"
                   },
                   children: /* @__PURE__ */ jsx(IoClose, {})
                 }
@@ -13568,10 +13817,7 @@ function getSettingsUrl(instanceInfo) {
 }
 function SetupConnectionBanner() {
   const { featureToggles } = useRecceInstanceContext();
-  const { data: instanceInfo } = useQuery({
-    queryKey: cacheKeys.instanceInfo(),
-    queryFn: getRecceInstanceInfo
-  });
+  const { data: instanceInfo } = useRecceInstanceInfo();
   if (featureToggles.mode !== "metadata only") {
     return null;
   }
@@ -13641,7 +13887,7 @@ function BaseEnvironmentSetupGuide() {
                 {
                   sx: {
                     p: 1,
-                    bgcolor: "white",
+                    bgcolor: "background.paper",
                     borderRadius: "50%",
                     display: "flex",
                     alignItems: "center",
@@ -14095,7 +14341,7 @@ 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 = useRef({
@@ -14142,6 +14388,7 @@ var useNavToCheck = () => {
   );
 };
 function PrivateLineageView({ interactive = false, ...props }, ref) {
+  const { isDark } = useThemeColors();
   const reactFlow = useReactFlow();
   const refResize = useRef(null);
   const { successToast, failToast } = useClipBoardToast();
@@ -14153,7 +14400,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);
@@ -15005,14 +15252,28 @@ function PrivateLineageView({ interactive = false, ...props }, ref) {
                     minZoom: 0.1,
                     nodesDraggable: interactive,
                     ref: refReactFlow,
+                    colorMode: isDark ? "dark" : "light",
                     children: [
-                      /* @__PURE__ */ jsx(Background, { color: "#ccc" }),
+                      /* @__PURE__ */ jsx(
+                        Background,
+                        {
+                          id: "lineage-bg",
+                          variant: BackgroundVariant.Dots,
+                          color: isDark ? colors.neutral[700] : colors.neutral[300],
+                          gap: 20,
+                          size: 2
+                        }
+                      ),
                       /* @__PURE__ */ jsx(
                         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__ */ jsx(
                             ControlButton,
                             {
@@ -15024,6 +15285,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__ */ jsx(Box35, { component: FiCopy })
                             }
                           )
@@ -15057,7 +15322,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__ */ jsx(
@@ -15082,7 +15349,17 @@ function PrivateLineageView({ interactive = false, ...props }, ref) {
               ]
             }
           ),
-          focusedNode ? /* @__PURE__ */ jsx(Box35, { sx: { borderLeft: "solid 1px lightgray", height: "100%" }, children: /* @__PURE__ */ jsx(NodeView, { node: focusedNode, onCloseNode: onNodeViewClosed }) }) : /* @__PURE__ */ jsx(Box35, {})
+          focusedNode ? /* @__PURE__ */ jsx(
+            Box35,
+            {
+              sx: {
+                borderLeft: "solid 1px",
+                borderColor: "divider",
+                height: "100%"
+              },
+              children: /* @__PURE__ */ jsx(NodeView, { node: focusedNode, onCloseNode: onNodeViewClosed })
+            }
+          ) : /* @__PURE__ */ jsx(Box35, {})
         ]
       }
     ),
@@ -15096,10 +15373,7 @@ function LineagePage() {
   return /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(LineageView, { interactive: true }) });
 }
 function SetupConnectionGuide() {
-  const { data: instanceInfo } = useQuery({
-    queryKey: cacheKeys.instanceInfo(),
-    queryFn: getRecceInstanceInfo
-  });
+  const { data: instanceInfo } = useRecceInstanceInfo();
   return /* @__PURE__ */ 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__ */ jsxs("div", { className: "w-4/5 flex flex-col overflow-y-auto gap-6 px-8 pb-8", children: [
     /* @__PURE__ */ jsxs(Stack24, { alignItems: "center", spacing: 2, children: [
       /* @__PURE__ */ jsx(
@@ -15107,7 +15381,7 @@ function SetupConnectionGuide() {
         {
           sx: {
             p: 1,
-            bgcolor: "white",
+            bgcolor: "background.paper",
             borderRadius: "50%",
             display: "flex",
             alignItems: "center",
@@ -15256,7 +15530,8 @@ ${sqlQuery}`;
             padding: "4pt 8pt",
             gap: "5px",
             height: "54px",
-            borderBottom: "1px solid lightgray"
+            borderBottom: "1px solid",
+            borderColor: "divider"
           },
           children: [
             /* @__PURE__ */ jsx(HistoryToggle, {}),
@@ -15321,7 +15596,8 @@ ${sqlQuery}`;
           padding: "4pt 8pt",
           gap: "5px",
           height: "54px",
-          borderBottom: "1px solid lightgray",
+          borderBottom: "1px solid",
+          borderColor: "divider",
           flex: "0 0 54px"
         },
         children: [
@@ -15410,6 +15686,8 @@ var ChecklistItem = ({
   onSelect,
   onMarkAsApproved
 }) => {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
   const { featureToggles } = useRecceInstanceContext();
   const queryClient = useQueryClient();
   const checkId = check.check_id;
@@ -15434,10 +15712,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",
@@ -15485,7 +15763,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
                 }
               }
             ) })
@@ -15773,6 +16051,8 @@ function CommentInput({
   isSubmitting = false,
   placeholder = "Add a comment..."
 }) {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
   const [content, setContent] = useState("");
   const handleSubmit = () => {
     const trimmed = content.trim();
@@ -15802,14 +16082,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
           }
         }
       }
@@ -15996,7 +16279,8 @@ function MarkdownLink({
 }
 function CodeBlock({
   className,
-  children
+  children,
+  isDark = false
 }) {
   const match = /language-(\w+)/.exec(className || "");
   const language = match ? match[1] : void 0;
@@ -16008,7 +16292,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,
@@ -16045,6 +16330,8 @@ function MarkdownContent({
   fontSize = "0.875rem",
   internalDomains = []
 }) {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
   const allInternalDomains = [
     window.location.hostname,
     "reccehq.com",
@@ -16056,7 +16343,7 @@ function MarkdownContent({
     // Links with external confirmation
     a: ({ href, children }) => /* @__PURE__ */ jsx(MarkdownLink, { href, internalDomains: allInternalDomains, children }),
     // Code blocks with syntax highlighting
-    code: CodeBlock,
+    code: (props) => /* @__PURE__ */ jsx(CodeBlock, { ...props, isDark }),
     // Paragraphs
     p: ({ children }) => /* @__PURE__ */ jsx(
       Typography28,
@@ -16092,11 +16379,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
@@ -16111,19 +16398,22 @@ function MarkdownContent({
           width: "100%",
           fontSize,
           border: "1px solid",
-          borderColor: "grey.200",
+          borderColor: isDark ? "grey.700" : "grey.200",
           borderRadius: 1
         },
         children
       }
     ) }),
-    thead: ({ children }) => /* @__PURE__ */ jsx(Box35, { component: "thead", sx: { bgcolor: "grey.50" }, children }),
+    thead: ({ children }) => /* @__PURE__ */ jsx(Box35, { component: "thead", sx: { bgcolor: isDark ? "grey.800" : "grey.50" }, children }),
     tbody: ({ children }) => /* @__PURE__ */ jsx(Box35, { component: "tbody", children }),
     tr: ({ children }) => /* @__PURE__ */ jsx(
       Box35,
       {
         component: "tr",
-        sx: { borderBottom: "1px solid", borderColor: "grey.200" },
+        sx: {
+          borderBottom: "1px solid",
+          borderColor: isDark ? "grey.700" : "grey.200"
+        },
         children
       }
     ),
@@ -16137,7 +16427,13 @@ function MarkdownContent({
     ),
     td: ({ children }) => /* @__PURE__ */ jsx(Box35, { component: "td", sx: { px: 2, py: 1 }, children }),
     // Horizontal rule
-    hr: () => /* @__PURE__ */ jsx(Box35, { component: "hr", sx: { my: 3, borderColor: "grey.200" } }),
+    hr: () => /* @__PURE__ */ jsx(
+      Box35,
+      {
+        component: "hr",
+        sx: { my: 3, borderColor: isDark ? "grey.700" : "grey.200" }
+      }
+    ),
     // Strong/Bold
     strong: ({ children }) => /* @__PURE__ */ jsx(Typography28, { component: "strong", sx: { fontWeight: 600 }, children }),
     // Emphasis/Italic
@@ -16249,6 +16545,8 @@ function CommentEvent({
   onEdit,
   onDelete
 }) {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
   const [isEditing, setIsEditing] = useState(false);
   const [editContent, setEditContent] = useState(event.content || "");
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -16368,7 +16666,7 @@ function CommentEvent({
               autoFocus: true,
               sx: {
                 "& .MuiOutlinedInput-root": {
-                  bgcolor: "white",
+                  bgcolor: "background.paper",
                   "&:focus-within": {
                     borderColor: "primary.main"
                   }
@@ -16414,11 +16712,11 @@ function CommentEvent({
           Box35,
           {
             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
@@ -16541,6 +16839,8 @@ function TimelineEvent({
   return /* @__PURE__ */ jsx(StateChangeEvent, { event });
 }
 function CheckTimeline({ checkId }) {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
   const {
     events,
     isLoading,
@@ -16601,7 +16901,7 @@ function CheckTimeline({ checkId }) {
         height: "100%",
         alignItems: "stretch",
         borderLeft: "1px solid",
-        borderColor: "grey.200"
+        borderColor: isDark ? "grey.700" : "grey.200"
       },
       spacing: 0,
       children: [
@@ -16612,7 +16912,7 @@ function CheckTimeline({ checkId }) {
               px: 3,
               py: 2,
               borderBottom: "1px solid",
-              borderColor: "grey.200"
+              borderColor: isDark ? "grey.700" : "grey.200"
             },
             children: /* @__PURE__ */ jsx(Typography28, { variant: "subtitle2", sx: { fontWeight: 500 }, children: "Activity" })
           }
@@ -16627,7 +16927,12 @@ function CheckTimeline({ checkId }) {
               onDelete: handleDeleteComment
             }
           ),
-          index < events.length - 1 && /* @__PURE__ */ jsx(Divider, { sx: { borderColor: "grey.100" } })
+          index < events.length - 1 && /* @__PURE__ */ jsx(
+            Divider,
+            {
+              sx: { borderColor: isDark ? "grey.700" : "grey.100" }
+            }
+          )
         ] }, event.id)) }) }),
         /* @__PURE__ */ jsx(
           Box35,
@@ -16636,8 +16941,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__ */ jsx(
               CommentInput,
@@ -16697,16 +17002,18 @@ function CheckBreadcrumb({ name, setName }) {
     };
   }, [isEditing, handleCommit]);
   return /* @__PURE__ */ jsx(
-    Breadcrumbs,
+    Box35,
     {
       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__ */ jsx(Box35, { sx: { cursor: "pointer", flex: "0 1 auto", overflow: "hidden" }, children: isEditing ? /* @__PURE__ */ jsx(
+      children: isEditing ? /* @__PURE__ */ jsx(
         TextField,
         {
           inputRef: editInputRef,
@@ -16729,7 +17036,7 @@ function CheckBreadcrumb({ name, setName }) {
           onClick: handleClick,
           children: name
         }
-      ) })
+      )
     }
   );
 }
@@ -16890,6 +17197,8 @@ function generateCheckTemplate({
 function PresetCheckTemplateView({
   yamlTemplate
 }) {
+  const muiTheme = useTheme();
+  const isDark = muiTheme.palette.mode === "dark";
   return /* @__PURE__ */ jsx(
     CodeEditor,
     {
@@ -16899,6 +17208,7 @@ function PresetCheckTemplateView({
       lineNumbers: false,
       wordWrap: true,
       fontSize: 14,
+      theme: isDark ? "dark" : "light",
       height: "300px"
     }
   );
@@ -16907,7 +17217,8 @@ var NodelistItem = ({
   node,
   selected,
   onSelect,
-  schemaChanged
+  schemaChanged,
+  isDark
 }) => {
   const { icon } = getIconForResourceType(node.data.resourceType);
   const { base, current } = node.data.data;
@@ -16932,8 +17243,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"
       },
@@ -16960,6 +17271,8 @@ var NodelistItem = ({
   ) });
 };
 function PrivateSchemaDiffView({ check }, ref) {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
   const { lineageGraph } = useLineageGraphContext();
   const params = check.params;
   const queryKey = [...cacheKeys.check(check.check_id), "select"];
@@ -17042,7 +17355,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..."
@@ -17056,7 +17369,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",
@@ -17074,7 +17387,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"
@@ -17098,7 +17411,7 @@ function PrivateSchemaDiffView({ check }, ref) {
         {
           sx: {
             overflow: "auto",
-            bgcolor: "white",
+            bgcolor: "background.paper",
             listStyle: "none"
           },
           children: nodes.map((node2, i) => /* @__PURE__ */ jsx(
@@ -17107,6 +17420,7 @@ function PrivateSchemaDiffView({ check }, ref) {
               node: node2,
               schemaChanged: changedNodes.includes(node2.id),
               selected: i === selected,
+              isDark,
               onSelect: () => {
                 setSelected(i);
               }
@@ -17124,6 +17438,8 @@ function CheckDetail({
   checkId,
   refreshCheckList
 }) {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
   const { featureToggles, sessionId } = useRecceInstanceContext();
   const { setLatestSelectedCheckId } = useRecceCheckContext();
   const { cloudMode } = useLineageGraphContext();
@@ -17372,7 +17688,7 @@ function CheckDetail({
                               alignItems: "center",
                               height: 40,
                               borderBottom: "2px solid",
-                              borderColor: "grey.300"
+                              borderColor: isDark ? "grey.700" : "grey.300"
                             },
                             children: [
                               checkTypeIcon && /* @__PURE__ */ jsx(
@@ -17417,7 +17733,7 @@ function CheckDetail({
                                       FaBookmark,
                                       {
                                         size: "1rem",
-                                        color: lightTheme.palette.iochmara.dark
+                                        color: theme.palette.iochmara.dark
                                       }
                                     )
                                   }
@@ -17504,7 +17820,14 @@ function CheckDetail({
                                           handleApproveCheck();
                                         },
                                         disabled: isDisabledByNoResult(check.type, run) || featureToggles.disableUpdateChecklist,
-                                        startIcon: check.is_checked ? /* @__PURE__ */ jsx(PiCheckCircle, {}) : /* @__PURE__ */ jsx(VscCircleLarge, { style: { color: "lightgray" } }),
+                                        startIcon: check.is_checked ? /* @__PURE__ */ jsx(PiCheckCircle, {}) : /* @__PURE__ */ jsx(
+                                          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"
                                       }
@@ -17638,7 +17961,7 @@ function CheckDetail({
                               display: "flex",
                               alignItems: "center",
                               justifyContent: "center",
-                              bgcolor: "rgb(249,249,249)",
+                              bgcolor: isDark ? "grey.900" : "grey.50",
                               height: "100%"
                             },
                             children: /* @__PURE__ */ jsxs(Stack24, { spacing: 2, alignItems: "center", children: [
@@ -17886,19 +18209,22 @@ var RunListItem = ({
   return /* @__PURE__ */ jsxs(
     Box35,
     {
-      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);
       },
@@ -17984,7 +18310,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"
       },
@@ -18011,7 +18338,8 @@ var RunList = () => {
           width: "100%",
           flex: "0 0 54px",
           px: "24px 8px",
-          borderBottom: "solid 1px lightgray"
+          borderBottom: "solid 1px",
+          borderBottomColor: "divider"
         },
         children: [
           /* @__PURE__ */ jsx(Typography28, { variant: "h6", children: "History" }),
@@ -18085,7 +18413,7 @@ function DateDividedRunHistoryItem({
     },
     [setLocation]
   );
-  return /* @__PURE__ */ jsxs(React3.Fragment, { children: [
+  return /* @__PURE__ */ jsxs(React4.Fragment, { children: [
     shouldRenderDateSegment && /* @__PURE__ */ jsx(DateSegmentItem, { runAt: run.run_at }, currentDate),
     /* @__PURE__ */ jsx(
       RunListItem,
@@ -18110,20 +18438,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 };
 }
@@ -18223,11 +18554,12 @@ function ChangeSummary({ lineageGraph }) {
       container: true,
       sx: {
         mb: "10px",
-        borderTop: "1px solid lightgray",
+        borderTop: "1px solid",
+        borderColor: "divider",
         p: "2.5vw"
       },
       children: [
-        /* @__PURE__ */ jsx(Grid2, { size: 6, sx: { borderColor: "lightgray" }, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Grid2, { size: 6, sx: { borderColor: "divider" }, children: /* @__PURE__ */ jsx(
           SummaryText,
           {
             name: "Code Changes",
@@ -18250,35 +18582,42 @@ function ChangeSummary({ lineageGraph }) {
             ] })
           }
         ) }),
-        /* @__PURE__ */ jsx(Grid2, { size: 6, sx: { borderLeft: "1px solid lightgray", pl: "12px" }, children: /* @__PURE__ */ jsx(
-          SummaryText,
+        /* @__PURE__ */ jsx(
+          Grid2,
           {
-            name: "Column Changes",
-            value: /* @__PURE__ */ jsxs(Grid2, { container: true, sx: { width: "100%" }, children: [
-              /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(
-                ChangeStatusCountLabel,
-                {
-                  changeStatus: "col_added",
-                  value: col_added
-                }
-              ) }),
-              /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(
-                ChangeStatusCountLabel,
-                {
-                  changeStatus: "col_removed",
-                  value: col_removed
-                }
-              ) }),
-              /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(
-                ChangeStatusCountLabel,
-                {
-                  changeStatus: "col_changed",
-                  value: col_changed
-                }
-              ) })
-            ] })
+            size: 6,
+            sx: { borderLeft: "1px solid", borderLeftColor: "divider", pl: "12px" },
+            children: /* @__PURE__ */ jsx(
+              SummaryText,
+              {
+                name: "Column Changes",
+                value: /* @__PURE__ */ jsxs(Grid2, { container: true, sx: { width: "100%" }, children: [
+                  /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(
+                    ChangeStatusCountLabel,
+                    {
+                      changeStatus: "col_added",
+                      value: col_added
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(
+                    ChangeStatusCountLabel,
+                    {
+                      changeStatus: "col_removed",
+                      value: col_removed
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(
+                    ChangeStatusCountLabel,
+                    {
+                      changeStatus: "col_changed",
+                      value: col_changed
+                    }
+                  ) })
+                ] })
+              }
+            )
           }
-        ) })
+        )
       ]
     }
   );