@datarecce/ui 0.1.23 → 0.1.25

package/dist/{components-CfY72Lq2.mjs → components-DoLZeY_e.mjs}

@@ -1,8 +1,8 @@
 "use client"
-import { $t as trackMultiNodesAction, At as submitQuery, Bn as lightTheme, Bt as waitRun, Cn as toReactFlow, Ct as cacheKeys, F as useRecceActionContext, Gt as trackColumnLevelLineage, H as IconSave, I as useAppLocation, In as toaster, It as listRuns, J as mergeKeysWithStatus, Jt as trackExploreAction, K as useClipBoardToast, Kt as trackCopyToClipboard, M as useLineageViewContext, Mt as submitQueryDiff, N as useLineageViewContextSafe, Pt as cancelRun, Qt as trackLineageViewRender, R as IconEdit, Rn as colors, Rt as submitRun, Sn as selectUpstream, Tn as getCll, Tt as ScreenshotDataGrid, U as IconSync, Ut as EXPLORE_SOURCE, V as IconInfo, Vn as token, Vt as EXPLORE_ACTION, W as deltaPercentageString, Wt as LINEAGE_SELECTION_ACTION, Xt as trackHistoryAction, Zt as trackLineageSelection, _ as findByRunType, _n as COLUMN_HEIGHT, _t as useRecceInstanceContext, a as saveAs$1, an as trackStateAction, at as useModelColumns_default, bn as layout, c as createCheckByRun, cn as isProfileDiffRun, ct as useRunsAggregated, d as getCheck, dn as isQueryRun, dt as useIdleTimeout, en as trackNavigation, f as listChecks, fn as isRowCountDiffRun, g as useChecks, gn as isValueDiffRun, h as updateCheck, hn as isValueDiffDetailRun, ht as formatDuration, i as rename, in as trackSingleEnvironment, it as supportsHistogramDiff, j as LineageViewContext, jn as axiosClient, jt as submitQueryBase, k as createDataGridFromData, kt as createLineageDiffCheck, ln as isQueryBaseRun, lt as useRecceServerFlag, mn as isTopKDiffRun, nn as trackPreviewChangeFeedback, p as markAsPresetCheck, pn as isRowCountRun, q as mergeKeys, qt as trackEnvironmentConfig, r as isStateSyncing, rn as trackShareState, s as syncState, sn as isHistogramDiffRun, st as useLineageGraphContext, t as exportState, tn as trackPreviewChange, u as deleteCheck, un as isQueryDiffRun, v as runTypeHasRef, vn as isLineageGraphColumnNode, vt as useRecceInstanceInfo, wn as union, wt as EmptyRowsRenderer, xn as selectDownstream, yn as isLineageGraphNode, z as IconExport, zn as darkTheme, zt as submitRunFromCheck } from "./state-BbgVwFV2.mjs";
+import { $t as trackLineageViewRender, At as createLineageDiffCheck, B as IconExport, Bn as darkTheme, Bt as submitRunFromCheck, Cn as selectUpstream, En as getCll, Et as ScreenshotDataGrid, Ft as cancelRun, G as deltaPercentageString, Gt as LINEAGE_SELECTION_ACTION, H as IconInfo, Hn as token, Ht as EXPLORE_ACTION, I as useRecceActionContext, J as mergeKeys, Jt as trackEnvironmentConfig, Kt as trackColumnLevelLineage, L as useAppLocation, Ln as toaster, Lt as listRuns, M as useLineageViewContext, Mn as axiosClient, Mt as submitQueryBase, N as useLineageViewContextSafe, Nt as submitQueryDiff, Qt as trackLineageSelection, Sn as selectDownstream, St as useApiConfig, Tn as union, Tt as EmptyRowsRenderer, U as IconSave, Vn as lightTheme, Vt as waitRun, W as IconSync, Wt as EXPLORE_SOURCE, Y as mergeKeysWithStatus, Yt as trackExploreAction, Zt as trackHistoryAction, _ as findByRunType, _n as isValueDiffRun, a as saveAs$1, an as trackSingleEnvironment, at as supportsHistogramDiff, bn as isLineageGraphNode, c as createCheckByRun, cn as isHistogramDiffRun, ct as useLineageGraphContext, d as getCheck, dn as isQueryDiffRun, en as trackMultiNodesAction, f as listChecks, fn as isQueryRun, ft as useIdleTimeout, g as useChecks, gn as isValueDiffDetailRun, gt as formatDuration, h as updateCheck, hn as isTopKDiffRun, i as rename, in as trackShareState, j as LineageViewContext, jt as submitQuery, k as createDataGridFromData, ln as isProfileDiffRun, lt as useRunsAggregated, mn as isRowCountRun, nn as trackPreviewChange, on as trackStateAction, ot as useModelColumns_default, p as markAsPresetCheck, pn as isRowCountDiffRun, q as useClipBoardToast, qt as trackCopyToClipboard, r as isStateSyncing, rn as trackPreviewChangeFeedback, s as syncState, t as exportState, tn as trackNavigation, u as deleteCheck, un as isQueryBaseRun, ut as useRecceServerFlag, v as runTypeHasRef, vn as COLUMN_HEIGHT, vt as useRecceInstanceContext, wn as toReactFlow, wt as cacheKeys, xn as layout, yn as isLineageGraphColumnNode, yt as useRecceInstanceInfo, z as IconEdit, zn as colors, zt as submitRun } from "./state-DyHCt6IJ.mjs";
 import { t as RECCE_SUPPORT_CALENDAR_URL } from "./urls-D7PrPolY.mjs";
-import { a as localStorageKeys, c as createSchemaDiffCheck, i as connectToCloud, n as fetchGitHubAvatar, o as sessionStorageKeys, r as fetchUser, s as select, t as useVersionNumber } from "./version-C2NU3xyx.mjs";
-import { i as useValueDiffAlertDialog_default, l as defaultSqlQuery, n as useRecceCheckContext, o as useRecceShareStateContext, r as useCheckToast, u as useRecceQueryContext } from "./RecceCheckContext-DIQjrvH8.mjs";
+import { a as connectToCloud, c as select, i as fetchUser, l as createSchemaDiffCheck, n as useVersionNumber, o as localStorageKeys, r as fetchGitHubAvatar, s as sessionStorageKeys } from "./version-Dav28qEz.mjs";
+import { i as useValueDiffAlertDialog_default, l as defaultSqlQuery, n as useRecceCheckContext, o as useRecceShareStateContext, r as useCheckToast, u as useRecceQueryContext } from "./RecceCheckContext-CiG9fGRW.mjs";
 import { t as DisableTooltipMessages } from "./tooltipMessage-CrXjOmVM.mjs";
 import CssBaseline from "@mui/material/CssBaseline";
 import { ThemeProvider, alpha, useTheme } from "@mui/material/styles";
@@ -19,7 +19,7 @@ import { ErrorBoundary, FallbackRender } from "@sentry/react";
 import ReactSplit, { SplitProps } from "react-split";
 import { Background, BackgroundVariant, BaseEdge, ControlButton, Controls, EdgeProps, Handle, MiniMap, Node, NodeProps, Panel, Position, ReactFlow, ReactFlowProvider, getBezierPath, getNodesBounds, useEdgesState, useNodesState, useReactFlow, useStore } from "@xyflow/react";
 import Divider from "@mui/material/Divider";
-import { AxiosError, AxiosResponse } from "axios";
+import { AxiosError, AxiosInstance, AxiosResponse } from "axios";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import "@xyflow/react/dist/style.css";
 import { FiArrowRight, FiCopy, FiFrown, FiInfo, FiPackage } from "react-icons/fi";
@@ -97,8 +97,6 @@ import Card from "@mui/material/Card";
 import CardContent from "@mui/material/CardContent";
 import CardHeader from "@mui/material/CardHeader";
 import Badge from "@mui/material/Badge";
-import DisplayModeToggle from "app/(mainComponents)/DisplayModeToggle";
-import RecceVersionBadge from "app/(mainComponents)/RecceVersionBadge";
 
 //#region recce-source/js/src/components/ui/mui-provider.tsx
 /**
@@ -117,10 +115,19 @@ import RecceVersionBadge from "app/(mainComponents)/RecceVersionBadge";
 */
 function MuiProvider({ children, forcedTheme, enableCssBaseline = false }) {
 	const { resolvedTheme } = useTheme$1();
+	const [mounted, setMounted] = useState(false);
+	useEffect(() => {
+		setMounted(true);
+	}, []);
 	return /* @__PURE__ */ jsxs(ThemeProvider, {
 		theme: useMemo(() => {
+			if (!mounted) return lightTheme;
 			return (forcedTheme ?? resolvedTheme) === "dark" ? darkTheme : lightTheme;
-		}, [forcedTheme, resolvedTheme]),
+		}, [
+			forcedTheme,
+			resolvedTheme,
+			mounted
+		]),
 		children: [enableCssBaseline && /* @__PURE__ */ jsx(CssBaseline, {}), children]
 	});
 }
@@ -483,13 +490,14 @@ function useImageDownloadModal() {
 //#endregion
 //#region recce-source/js/src/lib/hooks/useRun.tsx
 const useRun = (runId) => {
+	const { apiClient } = useApiConfig();
 	const [isRunning, setIsRunning] = useState(false);
 	const [aborting, setAborting] = useState(false);
 	const [, refetchRunsAggregated] = useRunsAggregated();
 	const { error, data: run } = useQuery({
 		queryKey: cacheKeys.run(runId ?? ""),
 		queryFn: async () => {
-			return await waitRun(runId ?? "", isRunning ? 2 : 0);
+			return await waitRun(runId ?? "", isRunning ? 2 : 0, apiClient);
 		},
 		enabled: !!runId,
 		refetchInterval: isRunning ? 50 : false,
@@ -513,8 +521,8 @@ const useRun = (runId) => {
 	const onCancel = useCallback(async () => {
 		setAborting(true);
 		if (!runId) return;
-		await cancelRun(runId);
-	}, [runId]);
+		await cancelRun(runId, apiClient);
+	}, [runId, apiClient]);
 	let RunResultView;
 	if (run && runTypeHasRef(run.type)) RunResultView = findByRunType(run.type).RunResultView;
 	return {
@@ -532,9 +540,8 @@ const useRun = (runId) => {
 /**
 * Theme-aware color utility hook
 *
-* Provides convenient access to theme-aware colors for components that
-* need to handle both light and dark modes. This centralizes theme-aware
-* color logic to avoid repetitive ternary expressions throughout components.
+* Uses next-themes to determine dark/light mode, which is more reliable
+* when the host app uses MUI CSS variables mode with nested ThemeProviders.
 *
 * @example
 * ```tsx
@@ -554,20 +561,25 @@ const useRun = (runId) => {
 * ```
 */
 function useThemeColors() {
-	const theme = useTheme();
-	const isDark = theme.palette.mode === "dark";
+	const muiTheme = useTheme();
+	const { resolvedTheme } = useTheme$1();
+	const [mounted, setMounted] = useState(false);
+	useEffect(() => {
+		setMounted(true);
+	}, []);
+	const isDark = mounted ? resolvedTheme === "dark" : false;
 	return {
 		isDark,
-		theme,
+		theme: muiTheme,
 		background: {
-			default: theme.palette.background.default,
-			paper: theme.palette.background.paper,
+			default: isDark ? colors.neutral[900] : colors.white,
+			paper: isDark ? colors.neutral[800] : colors.white,
 			subtle: isDark ? colors.neutral[800] : colors.neutral[50],
 			emphasized: isDark ? colors.neutral[700] : colors.neutral[100]
 		},
 		text: {
-			primary: theme.palette.text.primary,
-			secondary: theme.palette.text.secondary,
+			primary: isDark ? colors.neutral[50] : colors.neutral[900],
+			secondary: isDark ? colors.neutral[400] : colors.neutral[600],
 			disabled: isDark ? colors.neutral[500] : colors.neutral[400],
 			inverted: isDark ? colors.neutral[900] : colors.neutral[50]
 		},
@@ -578,16 +590,16 @@ function useThemeColors() {
 		},
 		status: {
 			added: {
-				bg: isDark ? "#1a4d1a" : "#cefece",
-				text: theme.palette.text.primary
+				bg: isDark ? colors.green[900] : colors.green[100],
+				text: isDark ? colors.neutral[50] : colors.neutral[900]
 			},
 			removed: {
-				bg: isDark ? "#5c1f1f" : "#ffc5c5",
-				text: theme.palette.text.primary
+				bg: isDark ? colors.red[950] : colors.red[200],
+				text: isDark ? colors.neutral[50] : colors.neutral[900]
 			},
 			modified: {
-				bg: isDark ? "#5c4a1a" : "#fff3cd",
-				text: theme.palette.text.primary
+				bg: isDark ? colors.yellow[900] : colors.amber[100],
+				text: isDark ? colors.neutral[50] : colors.neutral[900]
 			}
 		},
 		interactive: {
@@ -4252,6 +4264,7 @@ const QueryForm = ({ defaultPrimaryKeys, onPrimaryKeysChange, ...props }) => {
 //#region recce-source/js/src/components/AuthModal/AuthModal.tsx
 function AuthModal({ handleParentClose, parentOpen = false, ignoreCookie = false, variant = "auth" }) {
 	const { authed } = useRecceInstanceContext();
+	const { apiClient } = useApiConfig();
 	const [open, setOpen] = useState(parentOpen || !authed);
 	const authStateCookieValue = Cookies.get("authState") ?? "pending";
 	const [authState, setAuthState] = useState(ignoreCookie ? "pending" : authStateCookieValue);
@@ -4334,7 +4347,7 @@ function AuthModal({ handleParentClose, parentOpen = false, ignoreCookie = false
 					},
 					onClick: async () => {
 						setAuthState("authenticating");
-						const { connection_url } = await connectToCloud();
+						const { connection_url } = await connectToCloud(apiClient);
 						window.open(connection_url, "_blank");
 					},
 					children: [
@@ -5020,6 +5033,7 @@ function AddToCheckButton({ runId, viewOptions }) {
 	const { error, run } = useRun(runId);
 	const queryClient = useQueryClient();
 	const [, setLocation] = useAppLocation();
+	const { apiClient } = useApiConfig();
 	const checkId = run?.check_id;
 	const handleGoToCheck = useCallback(() => {
 		if (!checkId) return;
@@ -5027,14 +5041,15 @@ function AddToCheckButton({ runId, viewOptions }) {
 	}, [checkId, setLocation]);
 	const handleAddToChecklist = useCallback(async () => {
 		if (!runId) return;
-		const check = await createCheckByRun(runId, viewOptions);
+		const check = await createCheckByRun(runId, viewOptions, apiClient);
 		await queryClient.invalidateQueries({ queryKey: cacheKeys.checks() });
 		setLocation(`/checks/?id=${check.check_id}`);
 	}, [
 		runId,
 		setLocation,
 		queryClient,
-		viewOptions
+		viewOptions,
+		apiClient
 	]);
 	if (featureToggles.disableUpdateChecklist) return /* @__PURE__ */ jsx(Fragment$1, {});
 	if (run?.check_id) return /* @__PURE__ */ jsx(Button, {
@@ -5192,15 +5207,16 @@ function SandboxView({ isOpen, onClose, current }) {
 	const { showRunId, clearRunResult } = useRecceActionContext();
 	const { primaryKeys, setPrimaryKeys } = useRecceQueryContext();
 	const { data: flags, isLoading } = useRecceServerFlag();
+	const { apiClient } = useApiConfig();
 	const queryFn = async () => {
 		const sqlTemplate = modifiedCode;
 		const { run_id } = await submitQueryDiff({
 			current_model: current?.name ?? "",
 			primary_keys: primaryKeys,
 			sql_template: sqlTemplate
-		}, { nowait: true });
+		}, { nowait: true }, apiClient);
 		showRunId(run_id);
-		return await waitRun(run_id);
+		return await waitRun(run_id, void 0, apiClient);
 	};
 	const { mutate: runQuery, isPending } = useMutation({
 		mutationFn: queryFn,
@@ -5678,12 +5694,17 @@ function ExploreChangeMenuButton({ node, baseColumns, currentColumns, disableRea
 	const { envInfo, isActionAvailable } = useLineageGraphContext();
 	const { featureToggles } = useRecceInstanceContext();
 	const { primaryKey } = useModelColumns_default(node.data.name);
+	const { apiClient } = useApiConfig();
 	const metadataOnly = featureToggles.mode === "metadata only";
 	const isAddedOrRemoved = node.data.changeStatus === "added" || node.data.changeStatus === "removed";
 	const addSchemaCheck = useCallback(async () => {
 		const nodeId = node.id;
-		setLocation(`/checks/?id=${(await createSchemaDiffCheck({ node_id: nodeId })).check_id}`);
-	}, [node, setLocation]);
+		setLocation(`/checks/?id=${(await createSchemaDiffCheck({ node_id: nodeId }, apiClient)).check_id}`);
+	}, [
+		node,
+		setLocation,
+		apiClient
+	]);
 	const formattedColumns = formatSelectColumns(baseColumns, currentColumns);
 	let query = `select * from {{ ref("${node.data.name}") }}`;
 	if (formattedColumns.length) query = `select \n  ${formattedColumns.join("\n  ")}\nfrom {{ ref("${node.data.name}") }}`;
@@ -6150,6 +6171,7 @@ const initValue = {
 	actions: {}
 };
 const useMultiNodesAction = (nodes, { onActionStarted, onActionNodeUpdated, onActionCompleted }) => {
+	const { apiClient } = useApiConfig();
 	const actionState = useRef({ ...initValue }).current;
 	const { showRunId } = useRecceActionContext();
 	const submitRunForNodes = async (type, skip, getParams) => {
@@ -6179,12 +6201,12 @@ const useMultiNodesAction = (nodes, { onActionStarted, onActionNodeUpdated, onAc
 		}
 		const params = getParams(candidates);
 		try {
-			const { run_id } = await submitRun(type, params, { nowait: true });
+			const { run_id } = await submitRun(type, params, { nowait: true }, apiClient);
 			showRunId(run_id);
 			actionState.currentRun = { run_id };
 			actionState.total = 1;
 			for (;;) {
-				const run = await waitRun(run_id, 2);
+				const run = await waitRun(run_id, 2, apiClient);
 				actionState.currentRun = run;
 				const status = run.error ? "failure" : run.result ? "success" : "running";
 				for (const node of candidates) {
@@ -6233,7 +6255,7 @@ const useMultiNodesAction = (nodes, { onActionStarted, onActionNodeUpdated, onAc
 				};
 				onActionNodeUpdated(node);
 			} else try {
-				const { run_id } = await submitRun(type, params, { nowait: true });
+				const { run_id } = await submitRun(type, params, { nowait: true }, apiClient);
 				actionState.currentRun = { run_id };
 				actions[node.id] = {
 					mode,
@@ -6241,7 +6263,7 @@ const useMultiNodesAction = (nodes, { onActionStarted, onActionNodeUpdated, onAc
 				};
 				onActionNodeUpdated(node);
 				for (;;) {
-					const run = await waitRun(run_id, 2);
+					const run = await waitRun(run_id, 2, apiClient);
 					actionState.currentRun = run;
 					const status = run.error ? "failure" : run.result ? "success" : "running";
 					actions[node.id] = {
@@ -6327,17 +6349,17 @@ const useMultiNodesAction = (nodes, { onActionStarted, onActionNodeUpdated, onAc
 		});
 	};
 	const addLineageDiffCheck = async () => {
-		return await createLineageDiffCheck({ node_ids: nodes.map((node) => node.id) });
+		return await createLineageDiffCheck({ node_ids: nodes.map((node) => node.id) }, apiClient);
 	};
 	const addSchemaDiffCheck = async () => {
 		let check;
-		if (nodes.length === 1) check = await createSchemaDiffCheck({ node_id: nodes[0].id });
-		else check = await createSchemaDiffCheck({ node_id: nodes.map((node) => node.id) });
+		if (nodes.length === 1) check = await createSchemaDiffCheck({ node_id: nodes[0].id }, apiClient);
+		else check = await createSchemaDiffCheck({ node_id: nodes.map((node) => node.id) }, apiClient);
 		return check;
 	};
 	const cancel = async () => {
 		actionState.status = "canceling";
-		if (actionState.currentRun?.run_id) await cancelRun(actionState.currentRun.run_id);
+		if (actionState.currentRun?.run_id) await cancelRun(actionState.currentRun.run_id, apiClient);
 	};
 	const reset = () => {
 		Object.assign(actionState, initValue);
@@ -6400,6 +6422,7 @@ const useNavToCheck = () => {
 };
 function PrivateLineageView({ interactive = false, ...props }, ref) {
 	const { isDark } = useThemeColors();
+	const { apiClient } = useApiConfig();
 	const reactFlow = useReactFlow();
 	const refResize = useRef(null);
 	const { successToast, failToast } = useClipBoardToast();
@@ -6447,7 +6470,7 @@ function PrivateLineageView({ interactive = false, ...props }, ref) {
 	}, []);
 	const cllHistory = useRef([]).current;
 	const [cll, setCll] = useState(void 0);
-	const actionGetCll = useMutation({ mutationFn: getCll });
+	const actionGetCll = useMutation({ mutationFn: (input) => getCll(input, apiClient) });
 	const [nodeColumnSetMap, setNodeColumSetMap] = useState({});
 	const findNodeByName = useCallback((name) => {
 		return nodes.filter(isLineageGraphNode).find((n) => n.data.name === name);
@@ -6550,7 +6573,7 @@ function PrivateLineageView({ interactive = false, ...props }, ref) {
 						exclude: newViewOptions.exclude,
 						packages: newViewOptions.packages,
 						view_mode: newViewOptions.view_mode
-					})).nodes;
+					}, apiClient)).nodes;
 				} catch (_$1) {
 					newViewOptions.view_mode = "all";
 					filteredNodeIds$1 = (await select({
@@ -6558,7 +6581,7 @@ function PrivateLineageView({ interactive = false, ...props }, ref) {
 						exclude: newViewOptions.exclude,
 						packages: newViewOptions.packages,
 						view_mode: newViewOptions.view_mode
-					})).nodes;
+					}, apiClient)).nodes;
 				}
 				setViewOptions(newViewOptions);
 			}
@@ -6679,7 +6702,7 @@ function PrivateLineageView({ interactive = false, ...props }, ref) {
 					exclude: newViewOptions.exclude,
 					packages: newViewOptions.packages,
 					view_mode: newViewOptions.view_mode
-				});
+				}, apiClient);
 				newViewOptions = {
 					...newViewOptions,
 					column_level_lineage: void 0
@@ -6961,7 +6984,7 @@ function PrivateLineageView({ interactive = false, ...props }, ref) {
 					selected: "multi"
 				});
 			} else if (!focusedNode) {
-				check = await createLineageDiffCheck(viewOptions);
+				check = await createLineageDiffCheck(viewOptions, apiClient);
 				trackMultiNodesAction({
 					type: "lineage_diff",
 					selected: "none"
@@ -6981,7 +7004,7 @@ function PrivateLineageView({ interactive = false, ...props }, ref) {
 					});
 				}
 			} else if (focusedNode) {
-				check = await createSchemaDiffCheck({ node_id: focusedNode.id });
+				check = await createSchemaDiffCheck({ node_id: focusedNode.id }, apiClient);
 				trackMultiNodesAction({
 					type: "schema_diff",
 					selected: "single"
@@ -6992,7 +7015,7 @@ function PrivateLineageView({ interactive = false, ...props }, ref) {
 					exclude: viewOptions.exclude,
 					packages: viewOptions.packages,
 					view_mode: viewOptions.view_mode
-				});
+				}, apiClient);
 				trackMultiNodesAction({
 					type: "schema_diff",
 					selected: "none"
@@ -7328,6 +7351,7 @@ const QueryPage = () => {
 	if (envInfo?.adapterType === "sqlmesh" && _sqlQuery === defaultSqlQuery) sqlQuery = `select * from db.mymodel`;
 	if (featureToggles.mode === "read only") sqlQuery = `--- Would like to do query here? Book a demo with us at ${RECCE_SUPPORT_CALENDAR_URL}\n${sqlQuery}`;
 	const { showRunId } = useRecceActionContext();
+	const { apiClient } = useApiConfig();
 	const queryFn = async (type) => {
 		function queryFactory(type$1) {
 			switch (type$1) {
@@ -7345,9 +7369,9 @@ const QueryPage = () => {
 			params.primary_keys = primaryKeys;
 			if (isCustomQueries) params.base_sql_template = baseSqlQuery;
 		}
-		const { run_id } = await runFn(params, options);
+		const { run_id } = await runFn(params, options, apiClient);
 		showRunId(run_id);
-		return await waitRun(run_id);
+		return await waitRun(run_id, void 0, apiClient);
 	};
 	const { mutate: runQuery, isPending } = useMutation({ mutationFn: queryFn });
 	const currentSchema = useMemo(() => {
@@ -7502,9 +7526,10 @@ const ChecklistItem = ({ check, selected, onSelect, onMarkAsApproved }) => {
 	const isDark = useTheme().palette.mode === "dark";
 	const { featureToggles } = useRecceInstanceContext();
 	const queryClient = useQueryClient();
+	const { apiClient } = useApiConfig();
 	const checkId = check.check_id;
 	const { mutate } = useMutation({
-		mutationFn: (check$1) => updateCheck(checkId, check$1),
+		mutationFn: (check$1) => updateCheck(checkId, check$1, apiClient),
 		onSuccess: async () => {
 			await queryClient.invalidateQueries({ queryKey: cacheKeys.check(checkId) });
 			await queryClient.invalidateQueries({ queryKey: cacheKeys.checks() });
@@ -7576,8 +7601,9 @@ const CheckList = ({ checks, selectedItem, onCheckSelected, onChecksReordered })
 	const [open, setOpen] = useState(false);
 	const [pendingApprovalCheckId, setPendingApprovalCheckId] = useState(null);
 	const queryClient = useQueryClient();
+	const { apiClient } = useApiConfig();
 	const { mutate: markCheckedByID } = useMutation({
-		mutationFn: (checkId) => updateCheck(checkId, { is_checked: true }),
+		mutationFn: (checkId) => updateCheck(checkId, { is_checked: true }, apiClient),
 		onSuccess: async (_$1, checkId) => {
 			await queryClient.invalidateQueries({ queryKey: cacheKeys.check(checkId) });
 			await queryClient.invalidateQueries({ queryKey: cacheKeys.checks() });
@@ -7725,20 +7751,22 @@ const CheckList = ({ checks, selectedItem, onCheckSelected, onChecksReordered })
 * List all events for a check in chronological order.
 *
 * @param checkId - The check ID
+* @param client - Optional axios instance for API configuration
 * @returns Promise resolving to array of CheckEvent objects
 */
-async function listCheckEvents(checkId) {
-	return (await axiosClient.get(`/api/checks/${checkId}/events`)).data;
+async function listCheckEvents(checkId, client = axiosClient) {
+	return (await client.get(`/api/checks/${checkId}/events`)).data;
 }
 /**
 * Create a new comment on a check.
 *
 * @param checkId - The check ID
 * @param content - The comment content (plain text for now, markdown later)
+* @param client - Optional axios instance for API configuration
 * @returns Promise resolving to the created CheckEvent
 */
-async function createComment(checkId, content) {
-	return (await axiosClient.post(`/api/checks/${checkId}/events`, { content })).data;
+async function createComment(checkId, content, client = axiosClient) {
+	return (await client.post(`/api/checks/${checkId}/events`, { content })).data;
 }
 /**
 * Update an existing comment.
@@ -7747,10 +7775,11 @@ async function createComment(checkId, content) {
 * @param checkId - The check ID
 * @param eventId - The event ID of the comment to update
 * @param content - The new comment content
+* @param client - Optional axios instance for API configuration
 * @returns Promise resolving to the updated CheckEvent
 */
-async function updateComment(checkId, eventId, content) {
-	return (await axiosClient.patch(`/api/checks/${checkId}/events/${eventId}`, { content })).data;
+async function updateComment(checkId, eventId, content, client = axiosClient) {
+	return (await client.patch(`/api/checks/${checkId}/events/${eventId}`, { content })).data;
 }
 /**
 * Delete a comment (soft delete).
@@ -7758,10 +7787,11 @@ async function updateComment(checkId, eventId, content) {
 *
 * @param checkId - The check ID
 * @param eventId - The event ID of the comment to delete
+* @param client - Optional axios instance for API configuration
 * @returns Promise resolving when deletion is complete
 */
-async function deleteComment(checkId, eventId) {
-	await axiosClient.delete(`/api/checks/${checkId}/events/${eventId}`);
+async function deleteComment(checkId, eventId, client = axiosClient) {
+	await client.delete(`/api/checks/${checkId}/events/${eventId}`);
 }
 /**
 * Get the appropriate icon name for an event type.
@@ -7791,27 +7821,28 @@ const POLLING_INTERVAL = 1e4;
 function useCheckEvents(checkId, options = {}) {
 	const { enabled = true } = options;
 	const queryClient = useQueryClient();
+	const { apiClient } = useApiConfig();
 	const { data: events, isLoading, error, refetch } = useQuery({
 		queryKey: cacheKeys.checkEvents(checkId),
-		queryFn: () => listCheckEvents(checkId),
+		queryFn: () => listCheckEvents(checkId, apiClient),
 		enabled,
 		refetchInterval: POLLING_INTERVAL,
 		refetchIntervalInBackground: false
 	});
 	const createCommentMutation = useMutation({
-		mutationFn: (content) => createComment(checkId, content),
+		mutationFn: (content) => createComment(checkId, content, apiClient),
 		onSuccess: async () => {
 			await queryClient.invalidateQueries({ queryKey: cacheKeys.checkEvents(checkId) });
 		}
 	});
 	const updateCommentMutation = useMutation({
-		mutationFn: ({ eventId, content }) => updateComment(checkId, eventId, content),
+		mutationFn: ({ eventId, content }) => updateComment(checkId, eventId, content, apiClient),
 		onSuccess: async () => {
 			await queryClient.invalidateQueries({ queryKey: cacheKeys.checkEvents(checkId) });
 		}
 	});
 	const deleteCommentMutation = useMutation({
-		mutationFn: (eventId) => deleteComment(checkId, eventId),
+		mutationFn: (eventId) => deleteComment(checkId, eventId, apiClient),
 		onSuccess: async () => {
 			await queryClient.invalidateQueries({ queryKey: cacheKeys.checkEvents(checkId) });
 		}
@@ -8668,10 +8699,11 @@ function TimelineEvent({ event, currentUserId, onEdit, onDelete }) {
 */
 function CheckTimeline({ checkId }) {
 	const isDark = useTheme().palette.mode === "dark";
+	const { apiClient } = useApiConfig();
 	const { events, isLoading, error, createComment: createComment$1, isCreatingComment, updateComment: updateComment$1, deleteComment: deleteComment$1 } = useCheckEvents(checkId);
 	const { data: currentUser } = useQuery({
 		queryKey: cacheKeys.user(),
-		queryFn: fetchUser,
+		queryFn: () => fetchUser(apiClient),
 		retry: false
 	});
 	const handleCreateComment = (content) => {
@@ -9056,6 +9088,7 @@ const NodelistItem = ({ node, selected, onSelect, schemaChanged, isDark }) => {
 };
 function PrivateSchemaDiffView({ check }, ref) {
 	const isDark = useTheme().palette.mode === "dark";
+	const { apiClient } = useApiConfig();
 	const { lineageGraph } = useLineageGraphContext();
 	const params = check.params;
 	const { isLoading, error, data } = useQuery({
@@ -9065,7 +9098,7 @@ function PrivateSchemaDiffView({ check }, ref) {
 			exclude: params.exclude,
 			packages: params.packages,
 			view_mode: params.view_mode
-		}),
+		}, apiClient),
 		refetchOnMount: true,
 		enabled: !params.node_id
 	});
@@ -9177,6 +9210,7 @@ const SchemaDiffView = forwardRef(PrivateSchemaDiffView);
 function CheckDetail({ checkId, refreshCheckList }) {
 	const theme = useTheme();
 	const isDark = theme.palette.mode === "dark";
+	const { apiClient } = useApiConfig();
 	const { featureToggles, sessionId } = useRecceInstanceContext();
 	const { setLatestSelectedCheckId } = useRecceCheckContext();
 	const { cloudMode } = useLineageGraphContext();
@@ -9192,7 +9226,7 @@ function CheckDetail({ checkId, refreshCheckList }) {
 	const menuOpen = Boolean(menuAnchorEl);
 	const { isLoading, error, data: check } = useQuery({
 		queryKey: cacheKeys.check(checkId),
-		queryFn: async () => getCheck(checkId),
+		queryFn: async () => getCheck(checkId, apiClient),
 		refetchOnMount: true
 	});
 	const trackedRunId = submittedRunId ?? check?.last_run?.run_id;
@@ -9204,14 +9238,14 @@ function CheckDetail({ checkId, refreshCheckList }) {
 	const isPresetCheck = check?.is_preset ?? false;
 	const lineageViewRef = useRef(null);
 	const { mutate } = useMutation({
-		mutationFn: (check$1) => updateCheck(checkId, check$1),
+		mutationFn: (check$1) => updateCheck(checkId, check$1, apiClient),
 		onSuccess: async () => {
 			await queryClient.invalidateQueries({ queryKey: cacheKeys.check(checkId) });
 			await queryClient.invalidateQueries({ queryKey: cacheKeys.checks() });
 		}
 	});
 	const { mutate: handleDelete } = useMutation({
-		mutationFn: () => deleteCheck(checkId),
+		mutationFn: () => deleteCheck(checkId, apiClient),
 		onSuccess: async () => {
 			setLatestSelectedCheckId("");
 			await queryClient.invalidateQueries({ queryKey: cacheKeys.checks() });
@@ -9221,7 +9255,7 @@ function CheckDetail({ checkId, refreshCheckList }) {
 	const { mutate: handleMarkAsPresetCheck, isPending: isMarkingAsPreset } = useMutation({
 		mutationFn: async () => {
 			if (!check) throw new Error("Check not found");
-			return await markAsPresetCheck(checkId);
+			return await markAsPresetCheck(checkId, apiClient);
 		},
 		onSuccess: async () => {
 			successToast("Check marked as preset successfully");
@@ -9233,20 +9267,21 @@ function CheckDetail({ checkId, refreshCheckList }) {
 	});
 	const handleRerun = useCallback(async () => {
 		if (!check?.type) return;
-		setSubmittedRunId((await submitRunFromCheck(checkId, { nowait: true })).run_id);
+		setSubmittedRunId((await submitRunFromCheck(checkId, { nowait: true }, apiClient)).run_id);
 		await queryClient.invalidateQueries({ queryKey: cacheKeys.check(checkId) });
 		if (refreshCheckList) refreshCheckList();
 	}, [
 		check,
 		checkId,
 		queryClient,
-		refreshCheckList
+		refreshCheckList,
+		apiClient
 	]);
 	const handleCancel = useCallback(async () => {
 		setAborting(true);
 		if (!trackedRunId) return;
-		return await cancelRun(trackedRunId);
-	}, [trackedRunId]);
+		return await cancelRun(trackedRunId, apiClient);
+	}, [trackedRunId, apiClient]);
 	const handleCopy = async () => {
 		if (!check) return;
 		const markdown = buildMarkdown(check);
@@ -9751,8 +9786,9 @@ function buildBody(check) {
 const CheckEmptyState = () => {
 	const queryClient = useQueryClient();
 	const [, setLocation] = useAppLocation();
+	const { apiClient } = useApiConfig();
 	const { mutate: createSchemaCheck, isPending } = useMutation({
-		mutationFn: () => createSchemaDiffCheck({ select: "state:modified" }),
+		mutationFn: () => createSchemaDiffCheck({ select: "state:modified" }, apiClient),
 		onSuccess: async (check) => {
 			await queryClient.invalidateQueries({ queryKey: cacheKeys.checks() });
 			setLocation(`/checks/?id=${check.check_id}`);
@@ -9835,9 +9871,10 @@ const CheckEmptyState = () => {
 //#endregion
 //#region recce-source/js/src/components/run/RunPage.tsx
 const RunPage = ({ runId }) => {
+	const { apiClient } = useApiConfig();
 	const { error, data: run } = useQuery({
 		queryKey: cacheKeys.run(runId),
-		queryFn: async () => waitRun(runId)
+		queryFn: async () => waitRun(runId, void 0, apiClient)
 	});
 	let RunResultView;
 	if (run && runTypeHasRef(run.type)) RunResultView = findByRunType(run.type).RunResultView;
@@ -9852,10 +9889,11 @@ const RunPage = ({ runId }) => {
 //#region recce-source/js/src/components/run/RunList.tsx
 const RunListItem = ({ run, isSelected, onSelectRun, onAddToChecklist, onGoToCheck }) => {
 	const { featureToggles } = useRecceInstanceContext();
+	const { apiClient } = useApiConfig();
 	const { data: fetchedRun } = useQuery({
 		queryKey: cacheKeys.run(run.run_id),
 		queryFn: async () => {
-			return await waitRun(run.run_id);
+			return await waitRun(run.run_id, void 0, apiClient);
 		},
 		enabled: run.status === "running",
 		retry: false
@@ -9959,10 +9997,11 @@ const DateSegmentItem = ({ runAt }) => {
 };
 const RunList = () => {
 	const { closeHistory } = useRecceActionContext();
+	const { apiClient } = useApiConfig();
 	const { data: runs, isLoading } = useQuery({
 		queryKey: cacheKeys.runs(),
 		queryFn: async () => {
-			return await listRuns();
+			return await listRuns(apiClient);
 		},
 		retry: false
 	});
@@ -10026,6 +10065,7 @@ const RunList = () => {
 function DateDividedRunHistoryItem({ run, previousDate }) {
 	const [, setLocation] = useAppLocation();
 	const queryClient = useQueryClient();
+	const { apiClient } = useApiConfig();
 	const { showRunId, runId } = useRecceActionContext();
 	const currentDate = new Date(run.run_at).toDateString();
 	const shouldRenderDateSegment = previousDate != null && previousDate !== currentDate;
@@ -10034,10 +10074,14 @@ function DateDividedRunHistoryItem({ run, previousDate }) {
 		showRunId(runId$1, false);
 	};
 	const handleAddToChecklist = useCallback(async (clickedRunId) => {
-		const check = await createCheckByRun(clickedRunId);
+		const check = await createCheckByRun(clickedRunId, void 0, apiClient);
 		await queryClient.invalidateQueries({ queryKey: cacheKeys.checks() });
 		setLocation(`/checks/?id=${check.check_id}`);
-	}, [setLocation, queryClient]);
+	}, [
+		setLocation,
+		queryClient,
+		apiClient
+	]);
 	const handleGoToCheck = useCallback((checkId) => {
 		trackHistoryAction({ name: "go_to_check" });
 		setLocation(`/checks/?id=${checkId}`);
@@ -10405,9 +10449,10 @@ function SummaryView() {
 //#endregion
 //#region recce-source/js/src/components/app/AvatarDropdown.tsx
 function AvatarDropdown() {
+	const { apiClient } = useApiConfig();
 	const { data: user, isLoading, error } = useQuery({
 		queryKey: cacheKeys.user(),
-		queryFn: fetchUser,
+		queryFn: () => fetchUser(apiClient),
 		retry: false
 	});
 	const { data: avatarUrl } = useQuery({
@@ -10556,6 +10601,142 @@ function IdleTimeoutBadge() {
 	});
 }
 
+//#endregion
+//#region recce-source/js/app/(mainComponents)/DisplayModeToggle.tsx
+/**
+* Display Mode Toggle - switches between light and dark themes
+*
+* Uses next-themes to persist the user's preference.
+* Default is light theme, with future support for system preference.
+*/
+function DisplayModeToggle() {
+	const { setTheme, resolvedTheme } = useTheme$1();
+	const [mounted, setMounted] = useState(false);
+	useEffect(() => {
+		setMounted(true);
+	}, []);
+	const toggleTheme = () => {
+		setTheme(resolvedTheme === "dark" ? "light" : "dark");
+	};
+	if (!mounted) return /* @__PURE__ */ jsx(IconButton, {
+		size: "small",
+		sx: {
+			color: "rgba(255, 255, 255, 0.8)",
+			"&:hover": { bgcolor: "rgba(255, 255, 255, 0.1)" }
+		},
+		disabled: true,
+		children: /* @__PURE__ */ jsx(PiSun, { style: {
+			width: 18,
+			height: 18
+		} })
+	});
+	const isDark = resolvedTheme === "dark";
+	return /* @__PURE__ */ jsx(MuiTooltip, {
+		title: isDark ? "Switch to light mode" : "Switch to dark mode",
+		children: /* @__PURE__ */ jsx(IconButton, {
+			size: "small",
+			onClick: toggleTheme,
+			sx: {
+				color: "rgba(255, 255, 255, 0.8)",
+				"&:hover": { bgcolor: "rgba(255, 255, 255, 0.1)" }
+			},
+			"aria-label": isDark ? "Switch to light mode" : "Switch to dark mode",
+			children: isDark ? /* @__PURE__ */ jsx(PiSun, { style: {
+				width: 18,
+				height: 18
+			} }) : /* @__PURE__ */ jsx(PiMoon, { style: {
+				width: 18,
+				height: 18
+			} })
+		})
+	});
+}
+
+//#endregion
+//#region recce-source/js/app/(mainComponents)/RecceVersionBadge.tsx
+function RecceVersionBadge() {
+	const { version, latestVersion } = useVersionNumber();
+	const versionFormatRegex = useMemo(() => /* @__PURE__ */ new RegExp("^\\d+\\.\\d+\\.\\d+$"), []);
+	useEffect(() => {
+		if (versionFormatRegex.test(version) && version !== latestVersion) {
+			const storageKey = "recce-update-toast-shown";
+			if (sessionStorage.getItem(storageKey)) return;
+			setTimeout(() => {
+				toaster.create({
+					id: "recce-update-available",
+					title: "Update available",
+					description: /* @__PURE__ */ jsxs("span", { children: [
+						"A new version of Recce (v",
+						latestVersion,
+						") is available.",
+						/* @__PURE__ */ jsx("br", {}),
+						"Please run",
+						" ",
+						/* @__PURE__ */ jsx(Box, {
+							component: "code",
+							sx: {
+								bgcolor: "grey.200",
+								px: .5,
+								py: .25,
+								borderRadius: .5,
+								fontFamily: "monospace",
+								fontSize: "0.875em"
+							},
+							children: "pip install --upgrade recce"
+						}),
+						" ",
+						"to update Recce.",
+						/* @__PURE__ */ jsx("br", {}),
+						/* @__PURE__ */ jsx(Link, {
+							sx: {
+								color: "primary.main",
+								fontWeight: "bold",
+								"&:hover": { textDecoration: "underline" }
+							},
+							href: `https://github.com/DataRecce/recce/releases/tag/v${latestVersion}`,
+							target: "_blank",
+							children: "Click here to view the detail of latest release"
+						})
+					] }),
+					duration: 60 * 1e3,
+					closable: true
+				});
+				sessionStorage.setItem(storageKey, "true");
+			}, 0);
+		}
+	}, [
+		version,
+		latestVersion,
+		versionFormatRegex
+	]);
+	if (!versionFormatRegex.test(version)) return /* @__PURE__ */ jsx(Typography, {
+		component: "span",
+		sx: {
+			fontSize: "sm",
+			color: "rgba(255,255,255,0.8)",
+			textTransform: "uppercase",
+			borderWidth: 1,
+			px: 1,
+			borderRadius: .75
+		},
+		children: version
+	});
+	return /* @__PURE__ */ jsx(Link, {
+		href: `https://github.com/DataRecce/recce/releases/tag/v${version}`,
+		sx: {
+			"&:hover": { textDecoration: "none" },
+			fontSize: "sm",
+			color: "rgba(255,255,255,0.8)",
+			textTransform: "uppercase",
+			borderWidth: 1,
+			px: 1,
+			borderRadius: .75
+		},
+		target: "_blank",
+		children: version
+	});
+}
+
 //#endregion
 //#region recce-source/js/app/(mainComponents)/TopBar.tsx
 function LinkIcon({ icon: IconComponent, href, sx, ...props }) {
@@ -10808,6 +10989,7 @@ const useClosePrompt = (prompt) => {
 const Filename = () => {
 	const { featureToggles } = useRecceInstanceContext();
 	const { fileName, cloudMode, isDemoSite, envInfo } = useLineageGraphContext();
+	const { apiClient } = useApiConfig();
 	const [modalOpen, setModalOpen] = useState(false);
 	const [overwriteOpen, setOverwriteOpen] = useState(false);
 	const isStateless = !fileName && !cloudMode && !isDemoSite;
@@ -10834,11 +11016,11 @@ const Filename = () => {
 			if (method === "save") await saveAs$1({
 				filename: newFileName,
 				overwrite: overwrite ?? bypassOverwrite
-			});
+			}, apiClient);
 			else await rename({
 				filename: newFileName,
 				overwrite: overwrite ?? bypassOverwrite
-			});
+			}, apiClient);
 			toastSuccess(method === "save" ? "Save file successfully" : "Rename file successfully");
 			await queryClient.invalidateQueries({ queryKey: cacheKeys.lineage() });
 			if (bypass) localStorage.setItem(localStorageKeys.bypassSaveOverwrite, "true");
@@ -11062,9 +11244,10 @@ const Filename = () => {
 //#region recce-source/js/src/components/app/StateExporter.tsx
 function StateExporter() {
 	const { featureToggles } = useRecceInstanceContext();
+	const { apiClient } = useApiConfig();
 	const handleExport = async () => {
 		try {
-			const jsonData = await exportState();
+			const jsonData = await exportState(apiClient);
 			const jsonString = JSON.stringify(jsonData, null, 2);
 			saveAs(new Blob([jsonString], { type: "application/json" }), `recce-state-${format(/* @__PURE__ */ new Date(), "yyyy-MM-dd-HH-mm-ss")}.json`);
 		} catch (error) {
@@ -11231,6 +11414,7 @@ function StateSpinner() {
 function StateSynchronizer() {
 	const [isSyncing, setSyncing] = useState(false);
 	const queryClient = useQueryClient();
+	const { apiClient } = useApiConfig();
 	const [location, setLocation] = useAppLocation();
 	const [open, setOpen] = useState(false);
 	const [syncOption, setSyncOption] = useState("");
@@ -11239,12 +11423,12 @@ function StateSynchronizer() {
 	const handleSync = useCallback(async (input) => {
 		setOpen(false);
 		setSyncing(true);
-		if ((await syncState(input)).status === "conflict") {
+		if ((await syncState(input, apiClient)).status === "conflict") {
 			setOpen(true);
 			setSyncing(false);
 			return;
 		}
-		while (await isStateSyncing()) await new Promise((resolve) => setTimeout(resolve, 1e3));
+		while (await isStateSyncing(apiClient)) await new Promise((resolve) => setTimeout(resolve, 1e3));
 		toaster.create({
 			description: "Sync Completed",
 			type: "success",
@@ -11260,7 +11444,8 @@ function StateSynchronizer() {
 	}, [
 		queryClient,
 		location,
-		setLocation
+		setLocation,
+		apiClient
 	]);
 	if (isSyncing) return /* @__PURE__ */ jsx(StateSpinner, {});
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(MuiTooltip, {
@@ -11546,141 +11731,5 @@ function NavBar() {
 }
 
 //#endregion
-//#region recce-source/js/app/(mainComponents)/DisplayModeToggle.tsx
-/**
-* Display Mode Toggle - switches between light and dark themes
-*
-* Uses next-themes to persist the user's preference.
-* Default is light theme, with future support for system preference.
-*/
-function DisplayModeToggle$1() {
-	const { setTheme, resolvedTheme } = useTheme$1();
-	const [mounted, setMounted] = useState(false);
-	useEffect(() => {
-		setMounted(true);
-	}, []);
-	const toggleTheme = () => {
-		setTheme(resolvedTheme === "dark" ? "light" : "dark");
-	};
-	if (!mounted) return /* @__PURE__ */ jsx(IconButton, {
-		size: "small",
-		sx: {
-			color: "rgba(255, 255, 255, 0.8)",
-			"&:hover": { bgcolor: "rgba(255, 255, 255, 0.1)" }
-		},
-		disabled: true,
-		children: /* @__PURE__ */ jsx(PiSun, { style: {
-			width: 18,
-			height: 18
-		} })
-	});
-	const isDark = resolvedTheme === "dark";
-	return /* @__PURE__ */ jsx(MuiTooltip, {
-		title: isDark ? "Switch to light mode" : "Switch to dark mode",
-		children: /* @__PURE__ */ jsx(IconButton, {
-			size: "small",
-			onClick: toggleTheme,
-			sx: {
-				color: "rgba(255, 255, 255, 0.8)",
-				"&:hover": { bgcolor: "rgba(255, 255, 255, 0.1)" }
-			},
-			"aria-label": isDark ? "Switch to light mode" : "Switch to dark mode",
-			children: isDark ? /* @__PURE__ */ jsx(PiSun, { style: {
-				width: 18,
-				height: 18
-			} }) : /* @__PURE__ */ jsx(PiMoon, { style: {
-				width: 18,
-				height: 18
-			} })
-		})
-	});
-}
-
-//#endregion
-//#region recce-source/js/app/(mainComponents)/RecceVersionBadge.tsx
-function RecceVersionBadge$1() {
-	const { version, latestVersion } = useVersionNumber();
-	const versionFormatRegex = useMemo(() => /* @__PURE__ */ new RegExp("^\\d+\\.\\d+\\.\\d+$"), []);
-	useEffect(() => {
-		if (versionFormatRegex.test(version) && version !== latestVersion) {
-			const storageKey = "recce-update-toast-shown";
-			if (sessionStorage.getItem(storageKey)) return;
-			setTimeout(() => {
-				toaster.create({
-					id: "recce-update-available",
-					title: "Update available",
-					description: /* @__PURE__ */ jsxs("span", { children: [
-						"A new version of Recce (v",
-						latestVersion,
-						") is available.",
-						/* @__PURE__ */ jsx("br", {}),
-						"Please run",
-						" ",
-						/* @__PURE__ */ jsx(Box, {
-							component: "code",
-							sx: {
-								bgcolor: "grey.200",
-								px: .5,
-								py: .25,
-								borderRadius: .5,
-								fontFamily: "monospace",
-								fontSize: "0.875em"
-							},
-							children: "pip install --upgrade recce"
-						}),
-						" ",
-						"to update Recce.",
-						/* @__PURE__ */ jsx("br", {}),
-						/* @__PURE__ */ jsx(Link, {
-							sx: {
-								color: "primary.main",
-								fontWeight: "bold",
-								"&:hover": { textDecoration: "underline" }
-							},
-							href: `https://github.com/DataRecce/recce/releases/tag/v${latestVersion}`,
-							target: "_blank",
-							children: "Click here to view the detail of latest release"
-						})
-					] }),
-					duration: 60 * 1e3,
-					closable: true
-				});
-				sessionStorage.setItem(storageKey, "true");
-			}, 0);
-		}
-	}, [
-		version,
-		latestVersion,
-		versionFormatRegex
-	]);
-	if (!versionFormatRegex.test(version)) return /* @__PURE__ */ jsx(Typography, {
-		component: "span",
-		sx: {
-			fontSize: "sm",
-			color: "rgba(255,255,255,0.8)",
-			textTransform: "uppercase",
-			borderWidth: 1,
-			px: 1,
-			borderRadius: .75
-		},
-		children: version
-	});
-	return /* @__PURE__ */ jsx(Link, {
-		href: `https://github.com/DataRecce/recce/releases/tag/v${version}`,
-		sx: {
-			"&:hover": { textDecoration: "none" },
-			fontSize: "sm",
-			color: "rgba(255,255,255,0.8)",
-			textTransform: "uppercase",
-			borderWidth: 1,
-			px: 1,
-			borderRadius: .75
-		},
-		target: "_blank",
-		children: version
-	});
-}
-
-//#endregion
-export { NodeSqlView as A, GraphEdge as B, NodeView as C, SqlEditor_default as D, RunStatusAndDate as E, HistoryToggle as F, MuiProvider as G, HSplit as H, GraphNode as I, mui_provider_default as K, ModelRowCount as L, CodeEditor_default as M, SchemaView as N, QueryForm as O, LineageViewTopBar as P, ResourceTypeTag as R, SetupConnectionBanner as S, RunView as T, VSplit as U, GraphColumnNode as V, ErrorBoundary$1 as W, CheckList as _, IdleTimeoutBadge as a, LineagePage as b, ChangeSummary as c, CheckEmptyState as d, CheckDetail as f, CheckBreadcrumb as g, CheckDescription as h, TopBar as i, DiffEditor_default as j, EnvInfo as k, RunList as l, LineageDiffView as m, DisplayModeToggle$1 as n, SummaryView as o, SchemaDiffView as p, NavBar as r, SchemaSummary as s, RecceVersionBadge$1 as t, RunPage as u, QueryPage as v, RunResultPane as w, LineageView as x, SetupConnectionGuide as y, RowCountDiffTag as z };
-//# sourceMappingURL=components-CfY72Lq2.mjs.map
+export { NodeSqlView as A, GraphEdge as B, NodeView as C, SqlEditor_default as D, RunStatusAndDate as E, HistoryToggle as F, MuiProvider as G, HSplit as H, GraphNode as I, mui_provider_default as K, ModelRowCount as L, CodeEditor_default as M, SchemaView as N, QueryForm as O, LineageViewTopBar as P, ResourceTypeTag as R, SetupConnectionBanner as S, RunView as T, VSplit as U, GraphColumnNode as V, ErrorBoundary$1 as W, CheckList as _, IdleTimeoutBadge as a, LineagePage as b, ChangeSummary as c, CheckEmptyState as d, CheckDetail as f, CheckBreadcrumb as g, CheckDescription as h, DisplayModeToggle as i, DiffEditor_default as j, EnvInfo as k, RunList as l, LineageDiffView as m, TopBar as n, SummaryView as o, SchemaDiffView as p, RecceVersionBadge as r, SchemaSummary as s, NavBar as t, RunPage as u, QueryPage as v, RunResultPane as w, LineageView as x, SetupConnectionGuide as y, RowCountDiffTag as z };
+//# sourceMappingURL=components-DoLZeY_e.mjs.map