@datarecce/ui 0.1.22 → 0.1.23

package/dist/{components-C735_oqD.mjs → components-CfY72Lq2.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 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 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 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 { t as DisableTooltipMessages } from "./tooltipMessage-CrXjOmVM.mjs";
 import CssBaseline from "@mui/material/CssBaseline";
 import { ThemeProvider, alpha, useTheme } from "@mui/material/styles";
@@ -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";
@@ -94,6 +97,8 @@ 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
 /**
@@ -223,7 +228,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 +329,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],
@@ -6398,7 +6403,7 @@ function PrivateLineageView({ interactive = false, ...props }, ref) {
 	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,
@@ -10397,6 +10402,124 @@ function SummaryView() {
 	}) });
 }
 
+//#endregion
+//#region recce-source/js/src/components/app/AvatarDropdown.tsx
+function AvatarDropdown() {
+	const { data: user, isLoading, error } = useQuery({
+		queryKey: cacheKeys.user(),
+		queryFn: fetchUser,
+		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 +10557,1130 @@ 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)/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 [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
+			});
+			else await rename({
+				filename: newFileName,
+				overwrite: overwrite ?? bypassOverwrite
+			});
+			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 handleExport = async () => {
+		try {
+			const jsonData = await exportState();
+			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 [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)).status === "conflict") {
+			setOpen(true);
+			setSyncing(false);
+			return;
+		}
+		while (await isStateSyncing()) 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
+	]);
+	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
+//#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