@datarecce/ui 0.1.22 → 0.1.24

package/dist/{components-C735_oqD.mjs → components-BHxcVq0D.mjs}

@@ -1,8 +1,8 @@
 "use client"
-import { $t as trackMultiNodesAction, At as submitQuery, Bt as waitRun, Cn as getCll, Ct as cacheKeys, F as useRecceActionContext, Gt as trackColumnLevelLineage, I as useAppLocation, In as colors, It as listRuns, J as mergeKeysWithStatus, Jt as trackExploreAction, K as useClipBoardToast, Kt as trackCopyToClipboard, Ln as darkTheme, M as useLineageViewContext, Mt as submitQueryDiff, N as useLineageViewContextSafe, Pn as toaster, Pt as cancelRun, Qt as trackLineageViewRender, Rn as lightTheme, Rt as submitRun, Sn as union, Tt as ScreenshotDataGrid, Ut as EXPLORE_SOURCE, V as IconInfo, Vt as EXPLORE_ACTION, W as deltaPercentageString, Wt as LINEAGE_SELECTION_ACTION, Xt as trackHistoryAction, Zt as trackLineageSelection, _ as findByRunType, _n as isLineageGraphNode, _t as useRecceInstanceContext, an as isHistogramDiffRun, at as useModelColumns_default, bn as selectUpstream, c as createCheckByRun, cn as isQueryDiffRun, ct as useRunsAggregated, d as getCheck, dn as isRowCountRun, dt as useIdleTimeout, en as trackPreviewChange, fn as isTopKDiffRun, gn as isLineageGraphColumnNode, h as updateCheck, hn as COLUMN_HEIGHT, ht as formatDuration, it as supportsHistogramDiff, j as LineageViewContext, jt as submitQueryBase, k as createDataGridFromData, kn as axiosClient, kt as createLineageDiffCheck, ln as isQueryRun, lt as useRecceServerFlag, mn as isValueDiffRun, nn as trackShareState, on as isProfileDiffRun, p as markAsPresetCheck, pn as isValueDiffDetailRun, q as mergeKeys, qt as trackEnvironmentConfig, rn as trackSingleEnvironment, sn as isQueryBaseRun, st as useLineageGraphContext, tn as trackPreviewChangeFeedback, u as deleteCheck, un as isRowCountDiffRun, v as runTypeHasRef, vn as layout, vt as useRecceInstanceInfo, wt as EmptyRowsRenderer, xn as toReactFlow, yn as selectDownstream, zn as token, zt as submitRunFromCheck } from "./state-BySLlIE7.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-CwepO01b.mjs";
 import { t as RECCE_SUPPORT_CALENDAR_URL } from "./urls-D7PrPolY.mjs";
-import { a as sessionStorageKeys, i as localStorageKeys, n as fetchUser, o as select, r as connectToCloud, s as createSchemaDiffCheck, t as fetchGitHubAvatar } from "./user-BHOgMaBf.mjs";
-import { i as useValueDiffAlertDialog_default, l as defaultSqlQuery, n as useRecceCheckContext, o as useRecceShareStateContext, r as useCheckToast, u as useRecceQueryContext } from "./RecceCheckContext-BETsmiD5.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-Bz2CiMHD.mjs";
+import { i as useValueDiffAlertDialog_default, l as defaultSqlQuery, n as useRecceCheckContext, o as useRecceShareStateContext, r as useCheckToast, u as useRecceQueryContext } from "./RecceCheckContext-CzsuuXxT.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";
@@ -27,27 +27,30 @@ import { IconType } from "react-icons";
 import { LuExternalLink } from "react-icons/lu";
 import { TbChecklist, TbCloudUpload, TbPlus } from "react-icons/tb";
 import _, { isEmpty } from "lodash";
-import { PiBookmarkSimple, PiCaretDown, PiChatText, PiCheck, PiCheckCircle, PiCircle, PiCopy, PiInfo, PiInfoFill, PiNotePencil, PiPencilSimple, PiPlusCircle, PiRepeat, PiTrashFill, PiTrashSimple, PiWarning, PiX } from "react-icons/pi";
+import { PiBookmarkSimple, PiCaretDown, PiChatText, PiCheck, PiCheckCircle, PiCircle, PiCopy, PiInfo, PiInfoFill, PiMoon, PiNotePencil, PiPencilSimple, PiPlusCircle, PiRepeat, PiSun, PiTrashFill, PiTrashSimple, PiWarning, PiX } from "react-icons/pi";
 import MuiDialog from "@mui/material/Dialog";
 import DialogActions from "@mui/material/DialogActions";
 import DialogContent from "@mui/material/DialogContent";
 import DialogTitle from "@mui/material/DialogTitle";
 import IconButton from "@mui/material/IconButton";
 import { IoBookmarksOutline, IoClose, IoWarning } from "react-icons/io5";
+import NextLink from "next/link";
 import Checkbox from "@mui/material/Checkbox";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import TextField from "@mui/material/TextField";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
-import { VscCircleLarge, VscDiffAdded, VscDiffModified, VscDiffRemoved, VscFeedback, VscHistory, VscKebabVertical } from "react-icons/vsc";
+import { VscCircleLarge, VscDiffAdded, VscDiffModified, VscDiffRemoved, VscFeedback, VscGitPullRequest, VscHistory, VscKebabVertical } from "react-icons/vsc";
 import MuiTooltip from "@mui/material/Tooltip";
+import { useCopyToClipboard, useInterval } from "usehooks-ts";
 import ListSubheader from "@mui/material/ListSubheader";
+import { usePathname } from "next/navigation";
 import Link from "@mui/material/Link";
 import MuiPopover from "@mui/material/Popover";
 import { format, formatDistance, formatDistanceToNow, parseISO } from "date-fns";
 import saveAs from "file-saver";
 import { toCanvas } from "html-to-image";
-import { FaCamera, FaCheckCircle, FaCheckSquare, FaCube, FaDatabase, FaExpandArrowsAlt, FaRegCheckCircle, FaRegDotCircle, FaRegSquare, FaSeedling } from "react-icons/fa";
+import { FaCamera, FaCheckCircle, FaCheckSquare, FaCloud, FaCube, FaDatabase, FaExpandArrowsAlt, FaGithub, FaQuestionCircle, FaRegCheckCircle, FaRegDotCircle, FaRegSquare, FaSeedling, FaSlack, FaUser } from "react-icons/fa";
 import { FaBookmark, FaChartSimple, FaCircleNodes, FaGauge, FaPlay } from "react-icons/fa6";
 import Chip from "@mui/material/Chip";
 import Skeleton from "@mui/material/Skeleton";
@@ -223,7 +226,7 @@ const getHTMLElementFromRef = (refCurrent) => {
 };
 const IGNORE_SCREENSHOT_CLASS = "ignore-screenshot";
 const highlightBoxShadow = "rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px";
-function useCopyToClipboard({ renderLibrary = "html2canvas", imageType = "png", backgroundColor = null, boardEffect = true, shadowEffect = false, borderStyle = `solid 1px ${colors.neutral[300]}`, borderRadius = "10px", onSuccess, onError, ignoreElements }) {
+function useCopyToClipboard$1({ renderLibrary = "html2canvas", imageType = "png", backgroundColor = null, boardEffect = true, shadowEffect = false, borderStyle = `solid 1px ${colors.neutral[300]}`, borderRadius = "10px", onSuccess, onError, ignoreElements }) {
 	const [status, setStatus] = useState("idle");
 	const ref = useRef(null);
 	const { onOpen, setImgBlob, ImageDownloadModal } = useImageDownloadModal();
@@ -324,7 +327,7 @@ function useCopyToClipboard({ renderLibrary = "html2canvas", imageType = "png",
 }
 function useCopyToClipboardButton(options) {
 	const { successToast, failToast } = useClipBoardToast();
-	const { isLoading, copyToClipboard, ImageDownloadModal, ref } = useCopyToClipboard({
+	const { isLoading, copyToClipboard, ImageDownloadModal, ref } = useCopyToClipboard$1({
 		imageType: "png",
 		shadowEffect: true,
 		backgroundColor: options?.backgroundColor ?? colors.neutral[100],
@@ -478,13 +481,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,
@@ -508,8 +512,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 {
@@ -4247,6 +4251,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);
@@ -4329,7 +4334,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: [
@@ -5015,6 +5020,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;
@@ -5022,14 +5028,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, {
@@ -5187,15 +5194,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,
@@ -5673,12 +5681,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}") }}`;
@@ -6145,6 +6158,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) => {
@@ -6174,12 +6188,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) {
@@ -6228,7 +6242,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,
@@ -6236,7 +6250,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] = {
@@ -6322,17 +6336,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);
@@ -6395,10 +6409,11 @@ 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();
-	const { copyToClipboard, ImageDownloadModal, ref: refReactFlow } = useCopyToClipboard({
+	const { copyToClipboard, ImageDownloadModal, ref: refReactFlow } = useCopyToClipboard$1({
 		renderLibrary: "html-to-image",
 		imageType: "png",
 		shadowEffect: true,
@@ -6442,7 +6457,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);
@@ -6545,7 +6560,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({
@@ -6553,7 +6568,7 @@ function PrivateLineageView({ interactive = false, ...props }, ref) {
 						exclude: newViewOptions.exclude,
 						packages: newViewOptions.packages,
 						view_mode: newViewOptions.view_mode
-					})).nodes;
+					}, apiClient)).nodes;
 				}
 				setViewOptions(newViewOptions);
 			}
@@ -6674,7 +6689,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
@@ -6956,7 +6971,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"
@@ -6976,7 +6991,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"
@@ -6987,7 +7002,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"
@@ -7323,6 +7338,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) {
@@ -7340,9 +7356,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(() => {
@@ -7497,9 +7513,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() });
@@ -7571,8 +7588,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() });
@@ -7720,20 +7738,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.
@@ -7742,10 +7762,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).
@@ -7753,10 +7774,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.
@@ -7786,27 +7808,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) });
 		}
@@ -8663,10 +8686,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) => {
@@ -9051,6 +9075,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({
@@ -9060,7 +9085,7 @@ function PrivateSchemaDiffView({ check }, ref) {
 			exclude: params.exclude,
 			packages: params.packages,
 			view_mode: params.view_mode
-		}),
+		}, apiClient),
 		refetchOnMount: true,
 		enabled: !params.node_id
 	});
@@ -9172,6 +9197,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();
@@ -9187,7 +9213,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;
@@ -9199,14 +9225,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() });
@@ -9216,7 +9242,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");
@@ -9228,20 +9254,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);
@@ -9746,8 +9773,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}`);
@@ -9830,9 +9858,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;
@@ -9847,10 +9876,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
@@ -9954,10 +9984,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
 	});
@@ -10021,6 +10052,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;
@@ -10029,10 +10061,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}`);
@@ -10397,6 +10433,125 @@ 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(apiClient),
+		retry: false
+	});
+	const { data: avatarUrl } = useQuery({
+		queryKey: ["github-avatar", user?.id],
+		queryFn: () => user ? fetchGitHubAvatar(user.id) : Promise.resolve(null),
+		enabled: !!user?.id && user.login_type === "github",
+		retry: false,
+		staleTime: 300 * 1e3
+	});
+	const [anchorEl, setAnchorEl] = useState(null);
+	const open = Boolean(anchorEl);
+	const handleClick = (event) => {
+		setAnchorEl(event.currentTarget);
+	};
+	const handleClose = () => {
+		setAnchorEl(null);
+	};
+	const showUserInfo = !isLoading && !error && user;
+	const getInitials = (name) => {
+		if (!name) return "U";
+		return name.charAt(0).toUpperCase();
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [isLoading ? /* @__PURE__ */ jsx(Box, {
+		onClick: handleClick,
+		sx: {
+			width: 32,
+			height: 32,
+			borderRadius: "50%",
+			bgcolor: "background.paper",
+			color: "primary.main",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			cursor: "pointer"
+		},
+		children: /* @__PURE__ */ jsx(CircularProgress, { size: 16 })
+	}) : /* @__PURE__ */ jsx(MuiAvatar, {
+		onClick: handleClick,
+		src: avatarUrl || void 0,
+		sx: {
+			width: 28,
+			height: 28,
+			cursor: "pointer",
+			outline: "1px solid white",
+			fontSize: "0.875rem"
+		},
+		children: getInitials(user?.login)
+	}), /* @__PURE__ */ jsxs(Menu, {
+		anchorEl,
+		open,
+		onClose: handleClose,
+		slotProps: { paper: { sx: {
+			bgcolor: "background.paper",
+			borderColor: "divider",
+			boxShadow: 3,
+			minWidth: 180
+		} } },
+		children: [
+			/* @__PURE__ */ jsxs(Box, {
+				sx: {
+					px: 2,
+					py: 1.5
+				},
+				children: [
+					isLoading && /* @__PURE__ */ jsxs(Box, {
+						sx: {
+							display: "flex",
+							alignItems: "center",
+							gap: 1
+						},
+						children: [/* @__PURE__ */ jsx(Typography, {
+							variant: "body2",
+							color: "text.primary",
+							children: "Loading..."
+						}), /* @__PURE__ */ jsx(CircularProgress, { size: 16 })]
+					}),
+					error && /* @__PURE__ */ jsx(Typography, {
+						variant: "caption",
+						color: "error",
+						children: "Failed to load user information"
+					}),
+					showUserInfo && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Typography, {
+						variant: "body2",
+						fontWeight: "600",
+						color: "text.primary",
+						children: user.login
+					}), user.email && /* @__PURE__ */ jsx(Typography, {
+						variant: "caption",
+						color: "text.secondary",
+						children: user.email
+					})] })
+				]
+			}),
+			/* @__PURE__ */ jsx(Divider, {}),
+			/* @__PURE__ */ jsxs(MenuItem, {
+				onClick: () => {
+					window.open("https://cloud.datarecce.io/", "_blank");
+					handleClose();
+				},
+				children: [/* @__PURE__ */ jsx(ListItemIcon, { children: /* @__PURE__ */ jsx(FaCloud, {}) }), /* @__PURE__ */ jsx(ListItemText, { children: "Recce Cloud" })]
+			}),
+			/* @__PURE__ */ jsxs(MenuItem, {
+				onClick: () => {
+					window.open(RECCE_SUPPORT_CALENDAR_URL, "_blank");
+					handleClose();
+				},
+				children: [/* @__PURE__ */ jsx(ListItemIcon, { children: /* @__PURE__ */ jsx(FaUser, {}) }), /* @__PURE__ */ jsx(ListItemText, { children: "Get live support" })]
+			})
+		]
+	})] });
+}
+
 //#endregion
 //#region recce-source/js/src/components/timeout/IdleTimeoutBadge.tsx
 /**
@@ -10434,5 +10589,1134 @@ function IdleTimeoutBadge() {
 }
 
 //#endregion
-export { LineageViewTopBar as A, ErrorBoundary$1 as B, SqlEditor_default as C, DiffEditor_default as D, NodeSqlView as E, RowCountDiffTag as F, mui_provider_default as H, GraphEdge as I, GraphColumnNode as L, GraphNode as M, ModelRowCount as N, CodeEditor_default as O, ResourceTypeTag as P, HSplit as R, RunStatusAndDate as S, EnvInfo as T, MuiProvider as V, LineageView as _, RunList as a, RunResultPane as b, CheckDetail as c, CheckDescription as d, CheckBreadcrumb as f, LineagePage as g, SetupConnectionGuide as h, ChangeSummary as i, HistoryToggle as j, SchemaView as k, SchemaDiffView as l, QueryPage as m, SummaryView as n, RunPage as o, CheckList as p, SchemaSummary as r, CheckEmptyState as s, IdleTimeoutBadge as t, LineageDiffView as u, SetupConnectionBanner as v, QueryForm as w, RunView as x, NodeView as y, VSplit as z };
-//# sourceMappingURL=components-C735_oqD.mjs.map
+//#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 }) {
+	const theme = useTheme();
+	return /* @__PURE__ */ jsx(Link, {
+		sx: {
+			height: "20px",
+			color: "common.white",
+			...sx
+		},
+		href,
+		target: "_blank",
+		...props,
+		children: /* @__PURE__ */ jsx(IconComponent, { style: {
+			color: theme.palette.common.white,
+			width: 20,
+			height: 20
+		} })
+	});
+}
+function TopBar() {
+	const { reviewMode, isDemoSite, envInfo, cloudMode } = useLineageGraphContext();
+	const { featureToggles, authed } = useRecceInstanceContext();
+	const { url: prURL, id: prID } = envInfo?.pullRequest ?? {};
+	const demoPrId = prURL ? prURL.split("/").pop() : null;
+	const brandLink = cloudMode || authed ? "https://cloud.datarecce.io/" : "https://reccehq.com/";
+	const [showModal, setShowModal] = useState(false);
+	return /* @__PURE__ */ jsxs(Box, {
+		sx: {
+			display: "flex",
+			gap: "10px",
+			minHeight: "40px",
+			alignItems: "center",
+			bgcolor: colors.brand[400]
+		},
+		children: [
+			/* @__PURE__ */ jsx(Link, {
+				href: brandLink,
+				target: "_blank",
+				sx: { "&:hover": { textDecoration: "none" } },
+				children: /* @__PURE__ */ jsxs(Box, {
+					sx: {
+						display: "flex",
+						gap: "10px",
+						alignItems: "center"
+					},
+					children: [/* @__PURE__ */ jsx(Box, {
+						component: "img",
+						sx: {
+							width: 20,
+							height: 20,
+							ml: "18px"
+						},
+						src: "/logo/recce-logo-white.png",
+						alt: "recce-logo-white"
+					}), /* @__PURE__ */ jsx(Typography, {
+						variant: "h4",
+						sx: {
+							fontFamily: "\"Montserrat\", sans-serif",
+							color: "common.white",
+							fontSize: "1.25rem"
+						},
+						children: "RECCE"
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsx(DisplayModeToggle, {}),
+			/* @__PURE__ */ jsx(RecceVersionBadge, {}),
+			(featureToggles.mode ?? reviewMode) && /* @__PURE__ */ jsx(Badge, {
+				sx: {
+					fontSize: "0.875rem",
+					color: "rgba(255,255,255,0.8)",
+					textTransform: "uppercase",
+					borderWidth: 1,
+					px: 1,
+					borderRadius: .75,
+					borderColor: "rgba(255,255,255,0.8)"
+				},
+				children: featureToggles.mode ?? "review mode"
+			}),
+			cloudMode && prID && /* @__PURE__ */ jsx(Badge, {
+				sx: {
+					fontSize: "0.875rem",
+					color: "rgba(255,255,255,0.8)",
+					textTransform: "uppercase",
+					borderWidth: 1,
+					px: 1,
+					borderRadius: .75,
+					borderColor: "rgba(255,255,255,0.8)"
+				},
+				children: /* @__PURE__ */ jsxs(Stack, {
+					direction: "row",
+					spacing: 1,
+					alignItems: "center",
+					children: [/* @__PURE__ */ jsx(Box, { children: "cloud mode" }), /* @__PURE__ */ jsx(Box, {
+						sx: {
+							borderLeft: "1px solid rgba(255,255,255,0.8)",
+							pl: "8px"
+						},
+						children: /* @__PURE__ */ jsxs(Link, {
+							href: prURL,
+							sx: { "&:hover": { textDecoration: "none" } },
+							target: "_blank",
+							children: [/* @__PURE__ */ jsx(VscGitPullRequest, { style: {
+								color: "rgba(255,255,255,0.8)",
+								width: 12,
+								height: 12,
+								marginRight: 2,
+								display: "inline",
+								verticalAlign: "middle"
+							} }), /* @__PURE__ */ jsx(Typography, {
+								component: "span",
+								sx: {
+									color: "rgba(255,255,255,0.8)",
+									display: "inline"
+								},
+								children: `#${String(prID)}`
+							})]
+						})
+					})]
+				})
+			}),
+			isDemoSite && prURL && demoPrId && /* @__PURE__ */ jsx(Badge, {
+				sx: {
+					fontSize: "0.875rem",
+					color: "rgba(255,255,255,0.8)",
+					textTransform: "uppercase",
+					borderWidth: 1,
+					px: 1,
+					borderRadius: .75,
+					borderColor: "rgba(255,255,255,0.8)"
+				},
+				children: /* @__PURE__ */ jsxs(Stack, {
+					direction: "row",
+					spacing: 1,
+					alignItems: "center",
+					children: [/* @__PURE__ */ jsx(Box, { children: "demo mode" }), /* @__PURE__ */ jsx(Box, {
+						sx: {
+							borderLeft: "1px solid rgba(255,255,255,0.8)",
+							pl: "8px"
+						},
+						children: /* @__PURE__ */ jsxs(Link, {
+							href: prURL,
+							sx: { "&:hover": { textDecoration: "none" } },
+							target: "_blank",
+							children: [/* @__PURE__ */ jsx(VscGitPullRequest, { style: {
+								color: "rgba(255,255,255,0.8)",
+								width: 12,
+								height: 12,
+								marginRight: 2,
+								display: "inline",
+								verticalAlign: "middle"
+							} }), /* @__PURE__ */ jsx(Typography, {
+								component: "span",
+								sx: {
+									color: "rgba(255,255,255,0.8)",
+									display: "inline"
+								},
+								children: `#${demoPrId}`
+							})]
+						})
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsx(Box, { sx: { flex: 1 } }),
+			(isDemoSite || featureToggles.mode === "read only") && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsx(LinkIcon, {
+					icon: FaGithub,
+					href: "https://github.com/DataRecce/recce"
+				}),
+				/* @__PURE__ */ jsx(LinkIcon, {
+					icon: FaSlack,
+					href: "https://getdbt.slack.com/archives/C05C28V7CPP"
+				}),
+				/* @__PURE__ */ jsx(LinkIcon, {
+					sx: { mr: 2 },
+					icon: FaQuestionCircle,
+					href: "https://docs.datarecce.io"
+				})
+			] }),
+			!isDemoSite && featureToggles.mode !== "read only" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(IdleTimeoutBadge, {}), authed || cloudMode ? /* @__PURE__ */ jsx(Box, {
+				sx: { mr: 2 },
+				children: /* @__PURE__ */ jsx(AvatarDropdown, {})
+			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Box, {
+				component: "button",
+				sx: {
+					color: "common.white",
+					fontSize: "0.875rem",
+					fontWeight: 600,
+					bgcolor: "brand.700",
+					borderRadius: 1,
+					px: 3,
+					py: 1,
+					mr: 2,
+					cursor: "pointer",
+					border: "none"
+				},
+				onClick: () => {
+					setShowModal(true);
+				},
+				children: "Connect to Cloud"
+			}), showModal && /* @__PURE__ */ jsx(AuthModal, {
+				parentOpen: showModal,
+				handleParentClose: setShowModal,
+				ignoreCookie: true,
+				variant: "user-profile"
+			})] })] })
+		]
+	});
+}
+
+//#endregion
+//#region recce-source/js/src/components/app/Filename.tsx
+const useRecceToast = () => {
+	const toastSuccess = (message) => {
+		toaster.create({
+			description: message,
+			type: "success",
+			duration: 5e3,
+			closable: true
+		});
+	};
+	const toastError = (message, error) => {
+		let errorMessage = message;
+		if (error != null) if (error instanceof AxiosError) errorMessage = `${message}. ${String(error.response?.data?.detail)}`;
+		else errorMessage = `${message}. ${error}`;
+		toaster.create({
+			description: errorMessage,
+			type: "error",
+			duration: 5e3,
+			closable: true
+		});
+	};
+	return {
+		toastSuccess,
+		toastError
+	};
+};
+const useClosePrompt = (prompt) => {
+	useEffect(() => {
+		const handleBeforeUnload = (e) => {
+			e.preventDefault();
+		};
+		if (prompt) window.addEventListener("beforeunload", handleBeforeUnload);
+		return () => {
+			if (prompt) window.removeEventListener("beforeunload", handleBeforeUnload);
+		};
+	}, [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;
+	const { data: checks } = useChecks(isStateless);
+	const hasNonPresetChecks = checks != void 0 && checks.filter((check) => !check.is_preset).length > 0;
+	useClosePrompt(isStateless && hasNonPresetChecks);
+	const [{ newFileName, errorMessage, modified, overwriteWithMethod, bypass }, setState] = useState({ newFileName: fileName ?? "recce_state.json" });
+	const inputRef = useRef(null);
+	const { toastSuccess, toastError } = useRecceToast();
+	const queryClient = useQueryClient();
+	const handleOpen = () => {
+		setState({
+			newFileName: fileName ?? "recce_state.json",
+			modified: !fileName
+		});
+		setModalOpen(true);
+	};
+	const handleModalClose = () => setModalOpen(false);
+	const handleOverwriteClose = () => setOverwriteOpen(false);
+	const handleAction = async (method, overwrite) => {
+		if (!newFileName) return;
+		const bypassOverwrite = localStorage.getItem(localStorageKeys.bypassSaveOverwrite) === "true";
+		try {
+			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");
+		} catch (error) {
+			if (error instanceof AxiosError) {
+				if (error.response?.status === 409) {
+					setState((s) => ({
+						...s,
+						overwriteWithMethod: method
+					}));
+					setOverwriteOpen(true);
+					return;
+				}
+			}
+			toastError(method === "save" ? "Save file failed" : "Rename file failed", error);
+		} finally {
+			handleModalClose();
+		}
+	};
+	const handleOvewriteBack = () => {
+		handleOverwriteClose();
+		setModalOpen(true);
+		setState((s) => {
+			return {
+				...s,
+				overwriteWithMethod: void 0
+			};
+		});
+	};
+	if (cloudMode || isDemoSite) return /* @__PURE__ */ jsx(Fragment$1, {});
+	const titleNewInstance = "New Instance" + (hasNonPresetChecks ? " (unsaved)" : "");
+	let titleReadOnlyState;
+	if (featureToggles.disableSaveToFile && fileName) {
+		const generatedAt = envInfo?.stateMetadata?.generated_at;
+		const formattedDate = generatedAt ? formatRunDateTime(new Date(generatedAt)) : null;
+		titleReadOnlyState = formattedDate ? `${fileName} (${formattedDate})` : null;
+	}
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsxs(Stack, {
+			direction: "row",
+			alignItems: "center",
+			justifyContent: "center",
+			children: [/* @__PURE__ */ jsx(Box, {
+				sx: { fontWeight: 600 },
+				children: titleReadOnlyState ?? fileName ?? titleNewInstance
+			}), !featureToggles.disableSaveToFile && /* @__PURE__ */ jsx(MuiTooltip, {
+				title: fileName ? "Change Filename" : "Save",
+				enterDelay: 1e3,
+				children: /* @__PURE__ */ jsx(IconButton, {
+					onClick: handleOpen,
+					"aria-label": fileName ? "Change Filename" : "Save",
+					size: "small",
+					children: /* @__PURE__ */ jsx(Box, {
+						component: fileName ? IconEdit : IconSave,
+						sx: {
+							fontSize: 16,
+							verticalAlign: "middle"
+						}
+					})
+				})
+			})]
+		}),
+		/* @__PURE__ */ jsxs(MuiDialog, {
+			open: modalOpen,
+			onClose: handleModalClose,
+			children: [
+				/* @__PURE__ */ jsxs(DialogTitle, {
+					sx: {
+						display: "flex",
+						alignItems: "center"
+					},
+					children: [
+						fileName ? "Change Filename" : "Save File",
+						/* @__PURE__ */ jsx(Box, { sx: { flexGrow: 1 } }),
+						/* @__PURE__ */ jsx(IconButton, {
+							size: "small",
+							onClick: handleModalClose,
+							children: /* @__PURE__ */ jsx(IoClose, {})
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx(DialogContent, {
+					onKeyDown: (e) => {
+						e.stopPropagation();
+					},
+					children: /* @__PURE__ */ jsx(TextField, {
+						inputRef,
+						value: newFileName,
+						label: "File name",
+						placeholder: "Enter filename",
+						error: !!errorMessage,
+						helperText: errorMessage,
+						fullWidth: true,
+						size: "small",
+						sx: { mt: 1 },
+						onChange: (e) => {
+							const value = e.target.value;
+							let newErrorMessage = void 0;
+							if (!value) newErrorMessage = "Filename cannot be empty.";
+							else if (!value.endsWith(".json")) newErrorMessage = "Filename must end with .json.";
+							else if (!/^[a-zA-Z0-9 _-]+\.json$/.test(value)) newErrorMessage = "Invalid filename. Only alphanumeric, space, _ and - are allowed.";
+							else if (fileName && value === fileName) newErrorMessage = "Filename is the same as the current one.";
+							setState((s) => {
+								return {
+									...s,
+									modified: true,
+									newFileName: value,
+									errorMessage: newErrorMessage
+								};
+							});
+						},
+						onKeyDown: (e) => {
+							if (e.key === "Enter") {
+								if (errorMessage) return;
+								if (!fileName) handleAction("save");
+								else handleAction("rename");
+							} else if (e.key === "Escape") handleModalClose();
+						}
+					})
+				}),
+				/* @__PURE__ */ jsxs(DialogActions, {
+					sx: { gap: "5px" },
+					children: [/* @__PURE__ */ jsx(Button, {
+						size: "small",
+						color: fileName ? "inherit" : "iochmara",
+						variant: "contained",
+						onClick: async () => {
+							await handleAction("save");
+						},
+						disabled: !newFileName || !!errorMessage || !modified,
+						children: fileName ? "Save as New File" : "Confirm"
+					}), fileName && /* @__PURE__ */ jsx(Button, {
+						size: "small",
+						color: "iochmara",
+						variant: "contained",
+						onClick: async () => {
+							await handleAction("rename");
+						},
+						disabled: !newFileName || !!errorMessage || !modified,
+						children: "Rename"
+					})]
+				})
+			]
+		}),
+		/* @__PURE__ */ jsxs(MuiDialog, {
+			open: overwriteOpen,
+			onClose: handleOverwriteClose,
+			children: [
+				/* @__PURE__ */ jsxs(DialogTitle, {
+					sx: {
+						display: "flex",
+						alignItems: "center"
+					},
+					children: [
+						"Overwrite File?",
+						/* @__PURE__ */ jsx(Box, { sx: { flexGrow: 1 } }),
+						/* @__PURE__ */ jsx(IconButton, {
+							size: "small",
+							onClick: handleOverwriteClose,
+							children: /* @__PURE__ */ jsx(IoClose, {})
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs(DialogContent, {
+					sx: {
+						borderTop: "solid 1px",
+						borderBottom: "solid 1px",
+						borderColor: "divider"
+					},
+					onKeyDown: (e) => {
+						e.stopPropagation();
+					},
+					children: [/* @__PURE__ */ jsx(Typography, {
+						sx: { fontSize: "12pt" },
+						children: overwriteWithMethod === "save" ? "Saving a file with this name will overwrite the existing file. Are you sure you wish to continue?" : "Renaming the file with this name will overwrite the existing file. Are you sure you wish to continue?"
+					}), /* @__PURE__ */ jsx(FormControlLabel, {
+						control: /* @__PURE__ */ jsx(Checkbox, {
+							size: "small",
+							checked: bypass,
+							onChange: (e) => {
+								setState((s) => ({
+									...s,
+									bypass: e.target.checked
+								}));
+							}
+						}),
+						label: /* @__PURE__ */ jsx(Typography, {
+							sx: {
+								fontWeight: "bold",
+								pt: "8px"
+							},
+							children: "Don't show this again"
+						})
+					})]
+				}),
+				/* @__PURE__ */ jsxs(DialogActions, {
+					sx: { gap: "5px" },
+					children: [/* @__PURE__ */ jsx(Button, {
+						variant: "outlined",
+						onClick: handleOvewriteBack,
+						size: "small",
+						children: "Back"
+					}), /* @__PURE__ */ jsx(Button, {
+						size: "small",
+						color: "iochmara",
+						variant: "contained",
+						onClick: () => {
+							if (!overwriteWithMethod) return;
+							handleAction(overwriteWithMethod, true);
+							handleOverwriteClose();
+						},
+						children: "Overwrite"
+					})]
+				})
+			]
+		})
+	] });
+};
+
+//#endregion
+//#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(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) {
+			console.error("Export failed", error);
+			toaster.create({
+				title: "Export failed",
+				description: String(error),
+				type: "error",
+				duration: 5e3,
+				closable: true
+			});
+		}
+	};
+	return /* @__PURE__ */ jsx(MuiTooltip, {
+		title: "Export",
+		children: /* @__PURE__ */ jsx(IconButton, {
+			size: "small",
+			"aria-label": "Export state",
+			onClick: async () => {
+				await handleExport();
+				trackStateAction({ name: "export" });
+			},
+			disabled: featureToggles.disableExportStateFile,
+			children: /* @__PURE__ */ jsx(Box, {
+				component: IconExport,
+				sx: {
+					verticalAlign: "middle",
+					width: "16px",
+					height: "16px"
+				}
+			})
+		})
+	});
+}
+
+//#endregion
+//#region recce-source/js/src/components/app/StateSharing.tsx
+const LOADING_MESSAGES = [
+	"Processing...",
+	"Still processing, please wait...",
+	"Almost there, thanks for your patience..."
+];
+function TopLevelShare() {
+	const { successToast, failToast } = useClipBoardToast();
+	const [, copyToClipboard] = useCopyToClipboard();
+	const { authed } = useRecceInstanceContext();
+	const { shareUrl, isLoading, error, handleShareClick } = useRecceShareStateContext();
+	const [showModal, setShowModal] = useState(false);
+	const [messageIndex, setMessageIndex] = useState(0);
+	const [prevIsLoading, setPrevIsLoading] = useState(isLoading);
+	if (isLoading !== prevIsLoading) {
+		setPrevIsLoading(isLoading);
+		if (isLoading) setMessageIndex(0);
+	}
+	useInterval(() => {
+		setMessageIndex((prev) => Math.min(prev + 1, LOADING_MESSAGES.length - 1));
+	}, isLoading ? 3e4 : null);
+	useEffect(() => {
+		if (error) failToast("Failed to share state", error);
+	}, [error, failToast]);
+	const handleCopy = async () => {
+		try {
+			await copyToClipboard(String(shareUrl));
+			successToast("Copied the link to clipboard");
+		} catch (error$1) {
+			failToast("Failed to copy the link", error$1);
+		}
+	};
+	if (!authed) return /* @__PURE__ */ jsxs(Stack, {
+		direction: "row",
+		sx: {
+			flex: 1,
+			alignItems: "center"
+		},
+		children: [/* @__PURE__ */ jsx(Button, {
+			size: "xsmall",
+			color: "neutral",
+			variant: "outlined",
+			onClick: () => {
+				setShowModal(true);
+			},
+			startIcon: /* @__PURE__ */ jsx(TbCloudUpload, {}),
+			children: "Share"
+		}), showModal && /* @__PURE__ */ jsx(AuthModal, {
+			parentOpen: showModal,
+			handleParentClose: setShowModal,
+			ignoreCookie: true,
+			variant: "enable-share"
+		})]
+	});
+	return /* @__PURE__ */ jsxs(Stack, {
+		direction: "row",
+		sx: {
+			flex: 1,
+			alignItems: "center",
+			gap: "5px"
+		},
+		children: [
+			/* @__PURE__ */ jsx(Button, {
+				size: "xsmall",
+				variant: "outlined",
+				color: "neutral",
+				startIcon: /* @__PURE__ */ jsx(TbCloudUpload, {}),
+				endIcon: shareUrl ? /* @__PURE__ */ jsx(Box, {
+					component: PiCheckCircle,
+					sx: { color: "success.main" }
+				}) : void 0,
+				onClick: async () => {
+					await handleShareClick();
+					trackShareState({ name: "create" });
+				},
+				disabled: isLoading,
+				children: isLoading ? "Sharing..." : "Share"
+			}),
+			isLoading && /* @__PURE__ */ jsx(Typography, {
+				sx: {
+					fontSize: 14,
+					color: "grey.500"
+				},
+				children: LOADING_MESSAGES[messageIndex]
+			}),
+			/* @__PURE__ */ jsx(Stack, {
+				direction: "row",
+				spacing: .5,
+				alignItems: "center",
+				children: shareUrl && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Box, {
+					sx: {
+						overflowX: "auto",
+						whiteSpace: "nowrap",
+						maxWidth: "350px"
+					},
+					children: /* @__PURE__ */ jsx(Typography, {
+						sx: { fontSize: 14 },
+						children: shareUrl
+					})
+				}), /* @__PURE__ */ jsx(IconButton, {
+					size: "small",
+					"aria-label": "Copy the share URL",
+					onClick: async () => {
+						await handleCopy();
+						trackShareState({ name: "copy" });
+					},
+					children: /* @__PURE__ */ jsx(PiCopy, {})
+				})] })
+			})
+		]
+	});
+}
+
+//#endregion
+//#region recce-source/js/src/components/app/StateSynchronizer.tsx
+function isCheckDetailPage(href) {
+	return /^\/checks\/([0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12})$/.test(href);
+}
+function StateSpinner() {
+	return /* @__PURE__ */ jsx(MuiTooltip, {
+		title: "Syncing",
+		children: /* @__PURE__ */ jsx(Box, {
+			sx: { mx: "10px" },
+			children: /* @__PURE__ */ jsx(CircularProgress, { size: 20 })
+		})
+	});
+}
+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("");
+	const { data: instanceInfo } = useRecceInstanceInfo();
+	const handleClose = () => setOpen(false);
+	const handleSync = useCallback(async (input) => {
+		setOpen(false);
+		setSyncing(true);
+		if ((await syncState(input, apiClient)).status === "conflict") {
+			setOpen(true);
+			setSyncing(false);
+			return;
+		}
+		while (await isStateSyncing(apiClient)) await new Promise((resolve) => setTimeout(resolve, 1e3));
+		toaster.create({
+			description: "Sync Completed",
+			type: "success",
+			duration: 5e3,
+			closable: true
+		});
+		setSyncing(false);
+		setSyncOption("");
+		await queryClient.invalidateQueries({ queryKey: cacheKeys.lineage() });
+		await queryClient.invalidateQueries({ queryKey: cacheKeys.checks() });
+		await queryClient.invalidateQueries({ queryKey: cacheKeys.runs() });
+		if (isCheckDetailPage(location)) setLocation("/checks");
+	}, [
+		queryClient,
+		location,
+		setLocation,
+		apiClient
+	]);
+	if (isSyncing) return /* @__PURE__ */ jsx(StateSpinner, {});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(MuiTooltip, {
+		title: "Sync with Cloud",
+		children: /* @__PURE__ */ jsx(IconButton, {
+			size: "small",
+			"aria-label": "Sync state",
+			onClick: () => handleSync(instanceInfo?.session_id ? { method: "merge" } : {}),
+			children: /* @__PURE__ */ jsx(Box, {
+				component: IconSync,
+				sx: {
+					fontSize: 16,
+					verticalAlign: "middle"
+				}
+			})
+		})
+	}), /* @__PURE__ */ jsxs(MuiDialog, {
+		open,
+		onClose: handleClose,
+		children: [
+			/* @__PURE__ */ jsxs(DialogTitle, {
+				sx: {
+					display: "flex",
+					alignItems: "center",
+					fontWeight: "bold"
+				},
+				children: [
+					"Sync with Cloud",
+					/* @__PURE__ */ jsx(Box, { sx: { flexGrow: 1 } }),
+					/* @__PURE__ */ jsx(IconButton, {
+						size: "small",
+						onClick: handleClose,
+						children: /* @__PURE__ */ jsx(IoClose, {})
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs(DialogContent, { children: [/* @__PURE__ */ jsx(Typography, { children: "New changes have been detected in the cloud. Please choose a method to sync your state" }), /* @__PURE__ */ jsx(Box, {
+				sx: { mt: "5px" },
+				children: /* @__PURE__ */ jsx(RadioGroup, {
+					value: syncOption,
+					onChange: (e) => {
+						setSyncOption(e.target.value);
+					},
+					children: /* @__PURE__ */ jsxs(Stack, {
+						direction: "column",
+						children: [
+							/* @__PURE__ */ jsx(FormControlLabel, {
+								value: "merge",
+								control: /* @__PURE__ */ jsx(Radio, {}),
+								label: /* @__PURE__ */ jsxs(Stack, {
+									direction: "row",
+									alignItems: "center",
+									children: ["Merge", /* @__PURE__ */ jsx(MuiTooltip, {
+										title: "This will merge the local and remote states.",
+										children: /* @__PURE__ */ jsx(Box, {
+											component: PiInfo,
+											sx: {
+												ml: 2,
+												cursor: "pointer"
+											}
+										})
+									})]
+								})
+							}),
+							/* @__PURE__ */ jsx(FormControlLabel, {
+								value: "overwrite",
+								control: /* @__PURE__ */ jsx(Radio, {}),
+								label: /* @__PURE__ */ jsxs(Stack, {
+									direction: "row",
+									alignItems: "center",
+									children: ["Overwrite", /* @__PURE__ */ jsx(MuiTooltip, {
+										title: "This will overwrite the remote state file with the local state.",
+										children: /* @__PURE__ */ jsx(Box, {
+											component: PiInfo,
+											sx: {
+												ml: 2,
+												cursor: "pointer"
+											}
+										})
+									})]
+								})
+							}),
+							/* @__PURE__ */ jsx(FormControlLabel, {
+								value: "revert",
+								control: /* @__PURE__ */ jsx(Radio, {}),
+								label: /* @__PURE__ */ jsxs(Stack, {
+									direction: "row",
+									alignItems: "center",
+									children: ["Revert", /* @__PURE__ */ jsx(MuiTooltip, {
+										title: "This will discard local changes and revert to the cloud state.",
+										children: /* @__PURE__ */ jsx(Box, {
+											component: PiInfo,
+											sx: {
+												ml: 2,
+												cursor: "pointer"
+											}
+										})
+									})]
+								})
+							})
+						]
+					})
+				})
+			})] }),
+			/* @__PURE__ */ jsxs(DialogActions, { children: [/* @__PURE__ */ jsx(Button, {
+				onClick: handleClose,
+				sx: { mr: 1 },
+				children: "Cancel"
+			}), /* @__PURE__ */ jsx(Button, {
+				color: "iochmara",
+				variant: "contained",
+				onClick: () => handleSync({ method: syncOption || void 0 }),
+				disabled: !syncOption,
+				children: "Sync"
+			})] })
+		]
+	})] });
+}
+
+//#endregion
+//#region recce-source/js/app/(mainComponents)/NavBar.tsx
+/**
+* Route configuration for tabs
+*/
+const ROUTE_CONFIG = [
+	{
+		path: "/lineage",
+		name: "Lineage"
+	},
+	{
+		path: "/query",
+		name: "Query"
+	},
+	{
+		path: "/checks",
+		name: "Checklist"
+	}
+];
+function TabBadge({ queryKey, fetchCallback, selectCallback }) {
+	const { data: count, isLoading, error } = useQuery({
+		queryKey,
+		queryFn: fetchCallback,
+		select: selectCallback
+	});
+	if (isLoading || error || count === 0) return /* @__PURE__ */ jsx(Fragment$1, {});
+	return /* @__PURE__ */ jsx(Box, {
+		bgcolor: "brand.main",
+		display: "flex",
+		justifyContent: "center",
+		alignItems: "center",
+		p: 1,
+		borderRadius: "100%",
+		color: "white",
+		fontWeight: 700,
+		fontSize: "0.75rem",
+		children: /* @__PURE__ */ jsx("span", { children: count })
+	});
+}
+function ChecklistBadge() {
+	return /* @__PURE__ */ jsx(TabBadge, {
+		queryKey: cacheKeys.checks(),
+		fetchCallback: listChecks,
+		selectCallback: (checks) => {
+			return checks.filter((check) => !check.is_checked).length;
+		}
+	});
+}
+function NavBar() {
+	const pathname = usePathname();
+	const { isDemoSite, isLoading, cloudMode } = useLineageGraphContext();
+	const { featureToggles } = useRecceInstanceContext();
+	const { data: flag, isLoading: isFlagLoading } = useRecceServerFlag();
+	const prevPathnameRef = useRef(null);
+	useEffect(() => {
+		if (prevPathnameRef.current && prevPathnameRef.current !== pathname) trackNavigation({
+			from: prevPathnameRef.current,
+			to: pathname
+		});
+		prevPathnameRef.current = pathname;
+	}, [pathname]);
+	return /* @__PURE__ */ jsx(Box, {
+		sx: {
+			borderBottom: "1px solid lightgray",
+			px: "12px"
+		},
+		children: /* @__PURE__ */ jsxs(Box, {
+			sx: {
+				display: "grid",
+				gridTemplateColumns: "1fr auto 1fr",
+				width: "100%",
+				alignItems: "center"
+			},
+			children: [
+				/* @__PURE__ */ jsx(Tabs, {
+					value: useMemo(() => {
+						if (pathname.startsWith("/checks")) return "/checks";
+						if (pathname.startsWith("/query")) return "/query";
+						if (pathname.startsWith("/runs")) return "/runs";
+						return "/lineage";
+					}, [pathname]),
+					sx: {
+						borderBottom: "none",
+						minHeight: "auto"
+					},
+					children: ROUTE_CONFIG.map(({ path, name }) => {
+						if (name === "Query" && flag?.single_env_onboarding) return null;
+						if (name === "Checklist" && ChecklistBadge) return /* @__PURE__ */ jsx(Tab, {
+							value: path,
+							disabled: isLoading || isFlagLoading,
+							sx: { p: 0 },
+							label: /* @__PURE__ */ jsx(Box, {
+								sx: {
+									display: "flex",
+									alignItems: "center",
+									gap: "4px"
+								},
+								children: /* @__PURE__ */ jsxs(NextLink, {
+									href: path,
+									style: {
+										textDecoration: "none",
+										color: "inherit",
+										padding: "0.875rem 1.1875rem",
+										display: "flex",
+										gap: 3,
+										alignItems: "center"
+									},
+									children: [
+										name,
+										" ",
+										/* @__PURE__ */ jsx(ChecklistBadge, {})
+									]
+								})
+							})
+						}, path);
+						return /* @__PURE__ */ jsx(Tab, {
+							value: path,
+							disabled: isLoading || isFlagLoading,
+							sx: { p: 0 },
+							label: /* @__PURE__ */ jsx(Box, {
+								sx: {
+									display: "flex",
+									alignItems: "center",
+									gap: "4px"
+								},
+								children: /* @__PURE__ */ jsx(NextLink, {
+									href: path,
+									style: {
+										textDecoration: "none",
+										color: "inherit",
+										padding: "0.875rem 1.1875rem"
+									},
+									children: name
+								})
+							})
+						}, path);
+					})
+				}),
+				/* @__PURE__ */ jsxs(Box, {
+					sx: {
+						display: "flex",
+						alignItems: "center",
+						gap: "12px",
+						justifyContent: "center"
+					},
+					children: [!isLoading && !isDemoSite && /* @__PURE__ */ jsx(Filename, {}), !isLoading && !isDemoSite && !flag?.single_env_onboarding && !featureToggles.disableShare && /* @__PURE__ */ jsx(TopLevelShare, {})]
+				}),
+				!isLoading && /* @__PURE__ */ jsxs(Box, {
+					sx: {
+						display: "flex",
+						justifyContent: "right",
+						alignItems: "center",
+						mr: "8px"
+					},
+					children: [
+						/* @__PURE__ */ jsx(EnvInfo, {}),
+						cloudMode && /* @__PURE__ */ jsx(StateSynchronizer, {}),
+						/* @__PURE__ */ jsx(StateExporter, {})
+					]
+				})
+			]
+		})
+	});
+}
+
+//#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, 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-BHxcVq0D.mjs.map