@datarecce/ui 0.1.22 → 0.1.23

package/dist/{components-DeA4kqxK.js → components-DXbVq9Cw.js}

@@ -1,8 +1,8 @@
 "use client"
-const require_state = require('./state-BjKRZMwY.js');
+const require_state = require('./state-AeoqV9ja.js');
 const require_urls = require('./urls-SazAekCZ.js');
-const require_user = require('./user-Dt_n5IJX.js');
-const require_RecceCheckContext = require('./RecceCheckContext-DNKi97uE.js');
+const require_version = require('./version-MxW9vrDY.js');
+const require_RecceCheckContext = require('./RecceCheckContext-_xzNlnbJ.js');
 const require_tooltipMessage = require('./tooltipMessage-Dbi1kkfi.js');
 let _mui_material_CssBaseline = require("@mui/material/CssBaseline");
 _mui_material_CssBaseline = require_state.__toESM(_mui_material_CssBaseline);
@@ -50,6 +50,8 @@ _mui_material_DialogTitle = require_state.__toESM(_mui_material_DialogTitle);
 let _mui_material_IconButton = require("@mui/material/IconButton");
 _mui_material_IconButton = require_state.__toESM(_mui_material_IconButton);
 let react_icons_io5 = require("react-icons/io5");
+let next_link = require("next/link");
+next_link = require_state.__toESM(next_link);
 let _mui_material_Checkbox = require("@mui/material/Checkbox");
 _mui_material_Checkbox = require_state.__toESM(_mui_material_Checkbox);
 let _mui_material_FormControlLabel = require("@mui/material/FormControlLabel");
@@ -63,8 +65,10 @@ _mui_material_MenuItem = require_state.__toESM(_mui_material_MenuItem);
 let react_icons_vsc = require("react-icons/vsc");
 let _mui_material_Tooltip = require("@mui/material/Tooltip");
 _mui_material_Tooltip = require_state.__toESM(_mui_material_Tooltip);
+let usehooks_ts = require("usehooks-ts");
 let _mui_material_ListSubheader = require("@mui/material/ListSubheader");
 _mui_material_ListSubheader = require_state.__toESM(_mui_material_ListSubheader);
+let next_navigation = require("next/navigation");
 let _mui_material_Link = require("@mui/material/Link");
 _mui_material_Link = require_state.__toESM(_mui_material_Link);
 let _mui_material_Popover = require("@mui/material/Popover");
@@ -149,6 +153,10 @@ let _mui_material_CardHeader = require("@mui/material/CardHeader");
 _mui_material_CardHeader = require_state.__toESM(_mui_material_CardHeader);
 let _mui_material_Badge = require("@mui/material/Badge");
 _mui_material_Badge = require_state.__toESM(_mui_material_Badge);
+let app__mainComponents__DisplayModeToggle = require("app/(mainComponents)/DisplayModeToggle");
+app__mainComponents__DisplayModeToggle = require_state.__toESM(app__mainComponents__DisplayModeToggle);
+let app__mainComponents__RecceVersionBadge = require("app/(mainComponents)/RecceVersionBadge");
+app__mainComponents__RecceVersionBadge = require_state.__toESM(app__mainComponents__RecceVersionBadge);
 
 //#region recce-source/js/src/components/ui/mui-provider.tsx
 /**
@@ -1351,9 +1359,9 @@ var require_embed_resources = /* @__PURE__ */ require_state.__commonJSMin(((expo
 		var preferredFontFormat = _a.preferredFontFormat;
 		return !preferredFontFormat ? str : str.replace(FONT_SRC_REGEX, function(match) {
 			while (true) {
-				var _a$1 = URL_WITH_FORMAT_REGEX.exec(match) || [], src = _a$1[0], format$3 = _a$1[2];
-				if (!format$3) return "";
-				if (format$3 === preferredFontFormat) return "src: ".concat(src, ";");
+				var _a$1 = URL_WITH_FORMAT_REGEX.exec(match) || [], src = _a$1[0], format$4 = _a$1[2];
+				if (!format$4) return "";
+				if (format$4 === preferredFontFormat) return "src: ".concat(src, ";");
 			}
 		});
 	}
@@ -2288,7 +2296,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 ${require_state.colors.neutral[300]}`, borderRadius = "10px", onSuccess, onError, ignoreElements }) {
+function useCopyToClipboard$1({ renderLibrary = "html2canvas", imageType = "png", backgroundColor = null, boardEffect = true, shadowEffect = false, borderStyle = `solid 1px ${require_state.colors.neutral[300]}`, borderRadius = "10px", onSuccess, onError, ignoreElements }) {
 	const [status, setStatus] = (0, react.useState)("idle");
 	const ref = (0, react.useRef)(null);
 	const { onOpen, setImgBlob, ImageDownloadModal } = useImageDownloadModal();
@@ -2389,7 +2397,7 @@ function useCopyToClipboard({ renderLibrary = "html2canvas", imageType = "png",
 }
 function useCopyToClipboardButton(options) {
 	const { successToast, failToast } = require_state.useClipBoardToast();
-	const { isLoading, copyToClipboard, ImageDownloadModal, ref } = useCopyToClipboard({
+	const { isLoading, copyToClipboard, ImageDownloadModal, ref } = useCopyToClipboard$1({
 		imageType: "png",
 		shadowEffect: true,
 		backgroundColor: options?.backgroundColor ?? require_state.colors.neutral[100],
@@ -4452,7 +4460,7 @@ const useLineageViewContextMenu = () => {
 //#endregion
 //#region recce-source/js/src/components/lineage/LineageViewNotification.tsx
 function LineageViewNotification({ notification, type }) {
-	const notificationKey = require_user.sessionStorageKeys.lineageNotificationDismissed;
+	const notificationKey = require_version.sessionStorageKeys.lineageNotificationDismissed;
 	const [visible, setVisible] = (0, react.useState)(() => {
 		return sessionStorage.getItem(notificationKey) !== "true";
 	});
@@ -6394,7 +6402,7 @@ function AuthModal({ handleParentClose, parentOpen = false, ignoreCookie = false
 					},
 					onClick: async () => {
 						setAuthState("authenticating");
-						const { connection_url } = await require_user.connectToCloud();
+						const { connection_url } = await require_version.connectToCloud();
 						window.open(connection_url, "_blank");
 					},
 					children: [
@@ -7286,7 +7294,7 @@ function SandboxView({ isOpen, onClose, current }) {
 		}
 	});
 	const { feedbackToast, closeToast } = useFeedbackCollectionToast({
-		feedbackId: require_user.localStorageKeys.previewChangeFeedbackID,
+		feedbackId: require_version.localStorageKeys.previewChangeFeedbackID,
 		description: "Enjoy preview change?",
 		onFeedbackSubmit: (feedback) => {
 			switch (feedback) {
@@ -7315,7 +7323,7 @@ function SandboxView({ isOpen, onClose, current }) {
 		externalLinkText: "Give us feedback"
 	});
 	const { guideToast: prepareEnvToast, closeGuideToast } = useGuideToast({
-		guideId: require_user.localStorageKeys.prepareEnvGuideID,
+		guideId: require_version.localStorageKeys.prepareEnvGuideID,
 		description: "Want to compare data changes with production data?",
 		externalLink: "https://docs.datarecce.io/get-started/#prepare-dbt-artifacts",
 		externalLinkText: "Learn how.",
@@ -7742,7 +7750,7 @@ function ExploreChangeMenuButton({ node, baseColumns, currentColumns, disableRea
 	const isAddedOrRemoved = node.data.changeStatus === "added" || node.data.changeStatus === "removed";
 	const addSchemaCheck = (0, react.useCallback)(async () => {
 		const nodeId = node.id;
-		setLocation(`/checks/?id=${(await require_user.createSchemaDiffCheck({ node_id: nodeId })).check_id}`);
+		setLocation(`/checks/?id=${(await require_version.createSchemaDiffCheck({ node_id: nodeId })).check_id}`);
 	}, [node, setLocation]);
 	const formattedColumns = formatSelectColumns(baseColumns, currentColumns);
 	let query = `select * from {{ ref("${node.data.name}") }}`;
@@ -8391,8 +8399,8 @@ const useMultiNodesAction = (nodes, { onActionStarted, onActionNodeUpdated, onAc
 	};
 	const addSchemaDiffCheck = async () => {
 		let check;
-		if (nodes.length === 1) check = await require_user.createSchemaDiffCheck({ node_id: nodes[0].id });
-		else check = await require_user.createSchemaDiffCheck({ node_id: nodes.map((node) => node.id) });
+		if (nodes.length === 1) check = await require_version.createSchemaDiffCheck({ node_id: nodes[0].id });
+		else check = await require_version.createSchemaDiffCheck({ node_id: nodes.map((node) => node.id) });
 		return check;
 	};
 	const cancel = async () => {
@@ -8463,7 +8471,7 @@ function PrivateLineageView({ interactive = false, ...props }, ref) {
 	const reactFlow = (0, _xyflow_react.useReactFlow)();
 	const refResize = (0, react.useRef)(null);
 	const { successToast, failToast } = require_state.useClipBoardToast();
-	const { copyToClipboard, ImageDownloadModal, ref: refReactFlow } = useCopyToClipboard({
+	const { copyToClipboard, ImageDownloadModal, ref: refReactFlow } = useCopyToClipboard$1({
 		renderLibrary: "html-to-image",
 		imageType: "png",
 		shadowEffect: true,
@@ -8605,7 +8613,7 @@ function PrivateLineageView({ interactive = false, ...props }, ref) {
 					...props.viewOptions
 				};
 				try {
-					filteredNodeIds$1 = (await require_user.select({
+					filteredNodeIds$1 = (await require_version.select({
 						select: newViewOptions.select,
 						exclude: newViewOptions.exclude,
 						packages: newViewOptions.packages,
@@ -8613,7 +8621,7 @@ function PrivateLineageView({ interactive = false, ...props }, ref) {
 					})).nodes;
 				} catch (_$1) {
 					newViewOptions.view_mode = "all";
-					filteredNodeIds$1 = (await require_user.select({
+					filteredNodeIds$1 = (await require_version.select({
 						select: newViewOptions.select,
 						exclude: newViewOptions.exclude,
 						packages: newViewOptions.packages,
@@ -8734,7 +8742,7 @@ function PrivateLineageView({ interactive = false, ...props }, ref) {
 		if (!lineageGraph) return;
 		if (viewOptions.select !== newViewOptions.select || viewOptions.exclude !== newViewOptions.exclude || viewOptions.packages !== newViewOptions.packages || viewOptions.view_mode !== newViewOptions.view_mode) {
 			try {
-				const result = await require_user.select({
+				const result = await require_version.select({
 					select: newViewOptions.select,
 					exclude: newViewOptions.exclude,
 					packages: newViewOptions.packages,
@@ -9041,13 +9049,13 @@ function PrivateLineageView({ interactive = false, ...props }, ref) {
 					});
 				}
 			} else if (focusedNode) {
-				check = await require_user.createSchemaDiffCheck({ node_id: focusedNode.id });
+				check = await require_version.createSchemaDiffCheck({ node_id: focusedNode.id });
 				require_state.trackMultiNodesAction({
 					type: "schema_diff",
 					selected: "single"
 				});
 			} else {
-				check = await require_user.createSchemaDiffCheck({
+				check = await require_version.createSchemaDiffCheck({
 					select: viewOptions.select,
 					exclude: viewOptions.exclude,
 					packages: viewOptions.packages,
@@ -10391,7 +10399,7 @@ function UserAvatar({ event }) {
 	const userId = actor.user_id?.toString();
 	const { data: avatarUrl } = (0, _tanstack_react_query.useQuery)({
 		queryKey: ["github-avatar", userId],
-		queryFn: () => userId ? require_user.fetchGitHubAvatar(userId) : Promise.resolve(null),
+		queryFn: () => userId ? require_version.fetchGitHubAvatar(userId) : Promise.resolve(null),
 		enabled: !!userId,
 		retry: false,
 		staleTime: 300 * 1e3
@@ -10740,7 +10748,7 @@ function CheckTimeline({ checkId }) {
 	const { events, isLoading, error, createComment: createComment$1, isCreatingComment, updateComment: updateComment$1, deleteComment: deleteComment$1 } = useCheckEvents(checkId);
 	const { data: currentUser } = (0, _tanstack_react_query.useQuery)({
 		queryKey: require_state.cacheKeys.user(),
-		queryFn: require_user.fetchUser,
+		queryFn: require_version.fetchUser,
 		retry: false
 	});
 	const handleCreateComment = (content) => {
@@ -11129,7 +11137,7 @@ function PrivateSchemaDiffView({ check }, ref) {
 	const params = check.params;
 	const { isLoading, error, data } = (0, _tanstack_react_query.useQuery)({
 		queryKey: [...require_state.cacheKeys.check(check.check_id), "select"],
-		queryFn: async () => require_user.select({
+		queryFn: async () => require_version.select({
 			select: params.select,
 			exclude: params.exclude,
 			packages: params.packages,
@@ -11821,7 +11829,7 @@ const CheckEmptyState = () => {
 	const queryClient = (0, _tanstack_react_query.useQueryClient)();
 	const [, setLocation] = require_state.useAppLocation();
 	const { mutate: createSchemaCheck, isPending } = (0, _tanstack_react_query.useMutation)({
-		mutationFn: () => require_user.createSchemaDiffCheck({ select: "state:modified" }),
+		mutationFn: () => require_version.createSchemaDiffCheck({ select: "state:modified" }),
 		onSuccess: async (check) => {
 			await queryClient.invalidateQueries({ queryKey: require_state.cacheKeys.checks() });
 			setLocation(`/checks/?id=${check.check_id}`);
@@ -12471,6 +12479,124 @@ function SummaryView() {
 	}) });
 }
 
+//#endregion
+//#region recce-source/js/src/components/app/AvatarDropdown.tsx
+function AvatarDropdown() {
+	const { data: user, isLoading, error } = (0, _tanstack_react_query.useQuery)({
+		queryKey: require_state.cacheKeys.user(),
+		queryFn: require_version.fetchUser,
+		retry: false
+	});
+	const { data: avatarUrl } = (0, _tanstack_react_query.useQuery)({
+		queryKey: ["github-avatar", user?.id],
+		queryFn: () => user ? require_version.fetchGitHubAvatar(user.id) : Promise.resolve(null),
+		enabled: !!user?.id && user.login_type === "github",
+		retry: false,
+		staleTime: 300 * 1e3
+	});
+	const [anchorEl, setAnchorEl] = (0, react.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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [isLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Box.default, {
+		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__ */ (0, react_jsx_runtime.jsx)(_mui_material_CircularProgress.default, { size: 16 })
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Avatar.default, {
+		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__ */ (0, react_jsx_runtime.jsxs)(_mui_material_Menu.default, {
+		anchorEl,
+		open,
+		onClose: handleClose,
+		slotProps: { paper: { sx: {
+			bgcolor: "background.paper",
+			borderColor: "divider",
+			boxShadow: 3,
+			minWidth: 180
+		} } },
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_Box.default, {
+				sx: {
+					px: 2,
+					py: 1.5
+				},
+				children: [
+					isLoading && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_Box.default, {
+						sx: {
+							display: "flex",
+							alignItems: "center",
+							gap: 1
+						},
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Typography.default, {
+							variant: "body2",
+							color: "text.primary",
+							children: "Loading..."
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_CircularProgress.default, { size: 16 })]
+					}),
+					error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Typography.default, {
+						variant: "caption",
+						color: "error",
+						children: "Failed to load user information"
+					}),
+					showUserInfo && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Typography.default, {
+						variant: "body2",
+						fontWeight: "600",
+						color: "text.primary",
+						children: user.login
+					}), user.email && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Typography.default, {
+						variant: "caption",
+						color: "text.secondary",
+						children: user.email
+					})] })
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Divider.default, {}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_MenuItem.default, {
+				onClick: () => {
+					window.open("https://cloud.datarecce.io/", "_blank");
+					handleClose();
+				},
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_ListItemIcon.default, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_icons_fa.FaCloud, {}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_ListItemText.default, { children: "Recce Cloud" })]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_MenuItem.default, {
+				onClick: () => {
+					window.open(require_urls.RECCE_SUPPORT_CALENDAR_URL, "_blank");
+					handleClose();
+				},
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_ListItemIcon.default, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_icons_fa.FaUser, {}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_ListItemText.default, { children: "Get live support" })]
+			})
+		]
+	})] });
+}
+
 //#endregion
 //#region recce-source/js/src/components/timeout/IdleTimeoutBadge.tsx
 /**
@@ -12490,20 +12616,1145 @@ function IdleTimeoutBadge() {
 		color: "warning",
 		variant: "standard",
 		sx: {
-			display: "flex",
+			display: "flex",
+			alignItems: "center",
+			gap: 1,
+			fontSize: "0.75rem",
+			mr: 2
+		},
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Box.default, {
+				component: react_icons_io5.IoWarning,
+				sx: { display: "inline-flex" }
+			}),
+			"Idle timeout: ",
+			require_state.formatDuration(remainingSeconds, "compact")
+		]
+	});
+}
+
+//#endregion
+//#region recce-source/js/app/(mainComponents)/TopBar.tsx
+function LinkIcon({ icon: IconComponent, href, sx, ...props }) {
+	const theme = (0, _mui_material_styles.useTheme)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Link.default, {
+		sx: {
+			height: "20px",
+			color: "common.white",
+			...sx
+		},
+		href,
+		target: "_blank",
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconComponent, { style: {
+			color: theme.palette.common.white,
+			width: 20,
+			height: 20
+		} })
+	});
+}
+function TopBar() {
+	const { reviewMode, isDemoSite, envInfo, cloudMode } = require_state.useLineageGraphContext();
+	const { featureToggles, authed } = require_state.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] = (0, react.useState)(false);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_Box.default, {
+		sx: {
+			display: "flex",
+			gap: "10px",
+			minHeight: "40px",
+			alignItems: "center",
+			bgcolor: require_state.colors.brand[400]
+		},
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Link.default, {
+				href: brandLink,
+				target: "_blank",
+				sx: { "&:hover": { textDecoration: "none" } },
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_Box.default, {
+					sx: {
+						display: "flex",
+						gap: "10px",
+						alignItems: "center"
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Box.default, {
+						component: "img",
+						sx: {
+							width: 20,
+							height: 20,
+							ml: "18px"
+						},
+						src: "/logo/recce-logo-white.png",
+						alt: "recce-logo-white"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Typography.default, {
+						variant: "h4",
+						sx: {
+							fontFamily: "\"Montserrat\", sans-serif",
+							color: "common.white",
+							fontSize: "1.25rem"
+						},
+						children: "RECCE"
+					})]
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(app__mainComponents__DisplayModeToggle.default, {}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(app__mainComponents__RecceVersionBadge.default, {}),
+			(featureToggles.mode ?? reviewMode) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Badge.default, {
+				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__ */ (0, react_jsx_runtime.jsx)(_mui_material_Badge.default, {
+				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__ */ (0, react_jsx_runtime.jsxs)(_mui_material_Stack.default, {
+					direction: "row",
+					spacing: 1,
+					alignItems: "center",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Box.default, { children: "cloud mode" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Box.default, {
+						sx: {
+							borderLeft: "1px solid rgba(255,255,255,0.8)",
+							pl: "8px"
+						},
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_Link.default, {
+							href: prURL,
+							sx: { "&:hover": { textDecoration: "none" } },
+							target: "_blank",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_icons_vsc.VscGitPullRequest, { style: {
+								color: "rgba(255,255,255,0.8)",
+								width: 12,
+								height: 12,
+								marginRight: 2,
+								display: "inline",
+								verticalAlign: "middle"
+							} }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Typography.default, {
+								component: "span",
+								sx: {
+									color: "rgba(255,255,255,0.8)",
+									display: "inline"
+								},
+								children: `#${String(prID)}`
+							})]
+						})
+					})]
+				})
+			}),
+			isDemoSite && prURL && demoPrId && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Badge.default, {
+				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__ */ (0, react_jsx_runtime.jsxs)(_mui_material_Stack.default, {
+					direction: "row",
+					spacing: 1,
+					alignItems: "center",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Box.default, { children: "demo mode" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Box.default, {
+						sx: {
+							borderLeft: "1px solid rgba(255,255,255,0.8)",
+							pl: "8px"
+						},
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_Link.default, {
+							href: prURL,
+							sx: { "&:hover": { textDecoration: "none" } },
+							target: "_blank",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_icons_vsc.VscGitPullRequest, { style: {
+								color: "rgba(255,255,255,0.8)",
+								width: 12,
+								height: 12,
+								marginRight: 2,
+								display: "inline",
+								verticalAlign: "middle"
+							} }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Typography.default, {
+								component: "span",
+								sx: {
+									color: "rgba(255,255,255,0.8)",
+									display: "inline"
+								},
+								children: `#${demoPrId}`
+							})]
+						})
+					})]
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Box.default, { sx: { flex: 1 } }),
+			(isDemoSite || featureToggles.mode === "read only") && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkIcon, {
+					icon: react_icons_fa.FaGithub,
+					href: "https://github.com/DataRecce/recce"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkIcon, {
+					icon: react_icons_fa.FaSlack,
+					href: "https://getdbt.slack.com/archives/C05C28V7CPP"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkIcon, {
+					sx: { mr: 2 },
+					icon: react_icons_fa.FaQuestionCircle,
+					href: "https://docs.datarecce.io"
+				})
+			] }),
+			!isDemoSite && featureToggles.mode !== "read only" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IdleTimeoutBadge, {}), authed || cloudMode ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Box.default, {
+				sx: { mr: 2 },
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AvatarDropdown, {})
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Box.default, {
+				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__ */ (0, react_jsx_runtime.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) => {
+		require_state.toaster.create({
+			description: message,
+			type: "success",
+			duration: 5e3,
+			closable: true
+		});
+	};
+	const toastError = (message, error) => {
+		let errorMessage = message;
+		if (error != null) if (error instanceof axios.AxiosError) errorMessage = `${message}. ${String(error.response?.data?.detail)}`;
+		else errorMessage = `${message}. ${error}`;
+		require_state.toaster.create({
+			description: errorMessage,
+			type: "error",
+			duration: 5e3,
+			closable: true
+		});
+	};
+	return {
+		toastSuccess,
+		toastError
+	};
+};
+const useClosePrompt = (prompt) => {
+	(0, react.useEffect)(() => {
+		const handleBeforeUnload = (e) => {
+			e.preventDefault();
+		};
+		if (prompt) window.addEventListener("beforeunload", handleBeforeUnload);
+		return () => {
+			if (prompt) window.removeEventListener("beforeunload", handleBeforeUnload);
+		};
+	}, [prompt]);
+};
+const Filename = () => {
+	const { featureToggles } = require_state.useRecceInstanceContext();
+	const { fileName, cloudMode, isDemoSite, envInfo } = require_state.useLineageGraphContext();
+	const [modalOpen, setModalOpen] = (0, react.useState)(false);
+	const [overwriteOpen, setOverwriteOpen] = (0, react.useState)(false);
+	const isStateless = !fileName && !cloudMode && !isDemoSite;
+	const { data: checks } = require_state.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] = (0, react.useState)({ newFileName: fileName ?? "recce_state.json" });
+	const inputRef = (0, react.useRef)(null);
+	const { toastSuccess, toastError } = useRecceToast();
+	const queryClient = (0, _tanstack_react_query.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(require_version.localStorageKeys.bypassSaveOverwrite) === "true";
+		try {
+			if (method === "save") await require_state.saveAs({
+				filename: newFileName,
+				overwrite: overwrite ?? bypassOverwrite
+			});
+			else await require_state.rename({
+				filename: newFileName,
+				overwrite: overwrite ?? bypassOverwrite
+			});
+			toastSuccess(method === "save" ? "Save file successfully" : "Rename file successfully");
+			await queryClient.invalidateQueries({ queryKey: require_state.cacheKeys.lineage() });
+			if (bypass) localStorage.setItem(require_version.localStorageKeys.bypassSaveOverwrite, "true");
+		} catch (error) {
+			if (error instanceof axios.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__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {});
+	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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_Stack.default, {
+			direction: "row",
+			alignItems: "center",
+			justifyContent: "center",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Box.default, {
+				sx: { fontWeight: 600 },
+				children: titleReadOnlyState ?? fileName ?? titleNewInstance
+			}), !featureToggles.disableSaveToFile && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Tooltip.default, {
+				title: fileName ? "Change Filename" : "Save",
+				enterDelay: 1e3,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_IconButton.default, {
+					onClick: handleOpen,
+					"aria-label": fileName ? "Change Filename" : "Save",
+					size: "small",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Box.default, {
+						component: fileName ? require_state.IconEdit : require_state.IconSave,
+						sx: {
+							fontSize: 16,
+							verticalAlign: "middle"
+						}
+					})
+				})
+			})]
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_Dialog.default, {
+			open: modalOpen,
+			onClose: handleModalClose,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_DialogTitle.default, {
+					sx: {
+						display: "flex",
+						alignItems: "center"
+					},
+					children: [
+						fileName ? "Change Filename" : "Save File",
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Box.default, { sx: { flexGrow: 1 } }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_IconButton.default, {
+							size: "small",
+							onClick: handleModalClose,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_icons_io5.IoClose, {})
+						})
+					]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_DialogContent.default, {
+					onKeyDown: (e) => {
+						e.stopPropagation();
+					},
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_TextField.default, {
+						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__ */ (0, react_jsx_runtime.jsxs)(_mui_material_DialogActions.default, {
+					sx: { gap: "5px" },
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Button.default, {
+						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__ */ (0, react_jsx_runtime.jsx)(_mui_material_Button.default, {
+						size: "small",
+						color: "iochmara",
+						variant: "contained",
+						onClick: async () => {
+							await handleAction("rename");
+						},
+						disabled: !newFileName || !!errorMessage || !modified,
+						children: "Rename"
+					})]
+				})
+			]
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_Dialog.default, {
+			open: overwriteOpen,
+			onClose: handleOverwriteClose,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_DialogTitle.default, {
+					sx: {
+						display: "flex",
+						alignItems: "center"
+					},
+					children: [
+						"Overwrite File?",
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Box.default, { sx: { flexGrow: 1 } }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_IconButton.default, {
+							size: "small",
+							onClick: handleOverwriteClose,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_icons_io5.IoClose, {})
+						})
+					]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_DialogContent.default, {
+					sx: {
+						borderTop: "solid 1px",
+						borderBottom: "solid 1px",
+						borderColor: "divider"
+					},
+					onKeyDown: (e) => {
+						e.stopPropagation();
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Typography.default, {
+						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__ */ (0, react_jsx_runtime.jsx)(_mui_material_FormControlLabel.default, {
+						control: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Checkbox.default, {
+							size: "small",
+							checked: bypass,
+							onChange: (e) => {
+								setState((s) => ({
+									...s,
+									bypass: e.target.checked
+								}));
+							}
+						}),
+						label: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Typography.default, {
+							sx: {
+								fontWeight: "bold",
+								pt: "8px"
+							},
+							children: "Don't show this again"
+						})
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_DialogActions.default, {
+					sx: { gap: "5px" },
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Button.default, {
+						variant: "outlined",
+						onClick: handleOvewriteBack,
+						size: "small",
+						children: "Back"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Button.default, {
+						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 } = require_state.useRecceInstanceContext();
+	const handleExport = async () => {
+		try {
+			const jsonData = await require_state.exportState();
+			const jsonString = JSON.stringify(jsonData, null, 2);
+			(0, file_saver.default)(new Blob([jsonString], { type: "application/json" }), `recce-state-${(0, date_fns.format)(/* @__PURE__ */ new Date(), "yyyy-MM-dd-HH-mm-ss")}.json`);
+		} catch (error) {
+			console.error("Export failed", error);
+			require_state.toaster.create({
+				title: "Export failed",
+				description: String(error),
+				type: "error",
+				duration: 5e3,
+				closable: true
+			});
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Tooltip.default, {
+		title: "Export",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_IconButton.default, {
+			size: "small",
+			"aria-label": "Export state",
+			onClick: async () => {
+				await handleExport();
+				require_state.trackStateAction({ name: "export" });
+			},
+			disabled: featureToggles.disableExportStateFile,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Box.default, {
+				component: require_state.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 } = require_state.useClipBoardToast();
+	const [, copyToClipboard] = (0, usehooks_ts.useCopyToClipboard)();
+	const { authed } = require_state.useRecceInstanceContext();
+	const { shareUrl, isLoading, error, handleShareClick } = require_RecceCheckContext.useRecceShareStateContext();
+	const [showModal, setShowModal] = (0, react.useState)(false);
+	const [messageIndex, setMessageIndex] = (0, react.useState)(0);
+	const [prevIsLoading, setPrevIsLoading] = (0, react.useState)(isLoading);
+	if (isLoading !== prevIsLoading) {
+		setPrevIsLoading(isLoading);
+		if (isLoading) setMessageIndex(0);
+	}
+	(0, usehooks_ts.useInterval)(() => {
+		setMessageIndex((prev) => Math.min(prev + 1, LOADING_MESSAGES.length - 1));
+	}, isLoading ? 3e4 : null);
+	(0, react.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__ */ (0, react_jsx_runtime.jsxs)(_mui_material_Stack.default, {
+		direction: "row",
+		sx: {
+			flex: 1,
+			alignItems: "center"
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Button.default, {
+			size: "xsmall",
+			color: "neutral",
+			variant: "outlined",
+			onClick: () => {
+				setShowModal(true);
+			},
+			startIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_icons_tb.TbCloudUpload, {}),
+			children: "Share"
+		}), showModal && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AuthModal, {
+			parentOpen: showModal,
+			handleParentClose: setShowModal,
+			ignoreCookie: true,
+			variant: "enable-share"
+		})]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_Stack.default, {
+		direction: "row",
+		sx: {
+			flex: 1,
 			alignItems: "center",
-			gap: 1,
-			fontSize: "0.75rem",
-			mr: 2
+			gap: "5px"
 		},
 		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Box.default, {
-				component: react_icons_io5.IoWarning,
-				sx: { display: "inline-flex" }
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Button.default, {
+				size: "xsmall",
+				variant: "outlined",
+				color: "neutral",
+				startIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_icons_tb.TbCloudUpload, {}),
+				endIcon: shareUrl ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Box.default, {
+					component: react_icons_pi.PiCheckCircle,
+					sx: { color: "success.main" }
+				}) : void 0,
+				onClick: async () => {
+					await handleShareClick();
+					require_state.trackShareState({ name: "create" });
+				},
+				disabled: isLoading,
+				children: isLoading ? "Sharing..." : "Share"
 			}),
-			"Idle timeout: ",
-			require_state.formatDuration(remainingSeconds, "compact")
+			isLoading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Typography.default, {
+				sx: {
+					fontSize: 14,
+					color: "grey.500"
+				},
+				children: LOADING_MESSAGES[messageIndex]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Stack.default, {
+				direction: "row",
+				spacing: .5,
+				alignItems: "center",
+				children: shareUrl && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Box.default, {
+					sx: {
+						overflowX: "auto",
+						whiteSpace: "nowrap",
+						maxWidth: "350px"
+					},
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Typography.default, {
+						sx: { fontSize: 14 },
+						children: shareUrl
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_IconButton.default, {
+					size: "small",
+					"aria-label": "Copy the share URL",
+					onClick: async () => {
+						await handleCopy();
+						require_state.trackShareState({ name: "copy" });
+					},
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_icons_pi.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__ */ (0, react_jsx_runtime.jsx)(_mui_material_Tooltip.default, {
+		title: "Syncing",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Box.default, {
+			sx: { mx: "10px" },
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_CircularProgress.default, { size: 20 })
+		})
+	});
+}
+function StateSynchronizer() {
+	const [isSyncing, setSyncing] = (0, react.useState)(false);
+	const queryClient = (0, _tanstack_react_query.useQueryClient)();
+	const [location, setLocation] = require_state.useAppLocation();
+	const [open, setOpen] = (0, react.useState)(false);
+	const [syncOption, setSyncOption] = (0, react.useState)("");
+	const { data: instanceInfo } = require_state.useRecceInstanceInfo();
+	const handleClose = () => setOpen(false);
+	const handleSync = (0, react.useCallback)(async (input) => {
+		setOpen(false);
+		setSyncing(true);
+		if ((await require_state.syncState(input)).status === "conflict") {
+			setOpen(true);
+			setSyncing(false);
+			return;
+		}
+		while (await require_state.isStateSyncing()) await new Promise((resolve) => setTimeout(resolve, 1e3));
+		require_state.toaster.create({
+			description: "Sync Completed",
+			type: "success",
+			duration: 5e3,
+			closable: true
+		});
+		setSyncing(false);
+		setSyncOption("");
+		await queryClient.invalidateQueries({ queryKey: require_state.cacheKeys.lineage() });
+		await queryClient.invalidateQueries({ queryKey: require_state.cacheKeys.checks() });
+		await queryClient.invalidateQueries({ queryKey: require_state.cacheKeys.runs() });
+		if (isCheckDetailPage(location)) setLocation("/checks");
+	}, [
+		queryClient,
+		location,
+		setLocation
+	]);
+	if (isSyncing) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StateSpinner, {});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Tooltip.default, {
+		title: "Sync with Cloud",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_IconButton.default, {
+			size: "small",
+			"aria-label": "Sync state",
+			onClick: () => handleSync(instanceInfo?.session_id ? { method: "merge" } : {}),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Box.default, {
+				component: require_state.IconSync,
+				sx: {
+					fontSize: 16,
+					verticalAlign: "middle"
+				}
+			})
+		})
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_Dialog.default, {
+		open,
+		onClose: handleClose,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_DialogTitle.default, {
+				sx: {
+					display: "flex",
+					alignItems: "center",
+					fontWeight: "bold"
+				},
+				children: [
+					"Sync with Cloud",
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Box.default, { sx: { flexGrow: 1 } }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_IconButton.default, {
+						size: "small",
+						onClick: handleClose,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_icons_io5.IoClose, {})
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_DialogContent.default, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Typography.default, { children: "New changes have been detected in the cloud. Please choose a method to sync your state" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Box.default, {
+				sx: { mt: "5px" },
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_RadioGroup.default, {
+					value: syncOption,
+					onChange: (e) => {
+						setSyncOption(e.target.value);
+					},
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_Stack.default, {
+						direction: "column",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_FormControlLabel.default, {
+								value: "merge",
+								control: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Radio.default, {}),
+								label: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_Stack.default, {
+									direction: "row",
+									alignItems: "center",
+									children: ["Merge", /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Tooltip.default, {
+										title: "This will merge the local and remote states.",
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Box.default, {
+											component: react_icons_pi.PiInfo,
+											sx: {
+												ml: 2,
+												cursor: "pointer"
+											}
+										})
+									})]
+								})
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_FormControlLabel.default, {
+								value: "overwrite",
+								control: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Radio.default, {}),
+								label: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_Stack.default, {
+									direction: "row",
+									alignItems: "center",
+									children: ["Overwrite", /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Tooltip.default, {
+										title: "This will overwrite the remote state file with the local state.",
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Box.default, {
+											component: react_icons_pi.PiInfo,
+											sx: {
+												ml: 2,
+												cursor: "pointer"
+											}
+										})
+									})]
+								})
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_FormControlLabel.default, {
+								value: "revert",
+								control: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Radio.default, {}),
+								label: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_Stack.default, {
+									direction: "row",
+									alignItems: "center",
+									children: ["Revert", /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Tooltip.default, {
+										title: "This will discard local changes and revert to the cloud state.",
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Box.default, {
+											component: react_icons_pi.PiInfo,
+											sx: {
+												ml: 2,
+												cursor: "pointer"
+											}
+										})
+									})]
+								})
+							})
+						]
+					})
+				})
+			})] }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_DialogActions.default, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Button.default, {
+				onClick: handleClose,
+				sx: { mr: 1 },
+				children: "Cancel"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Button.default, {
+				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 } = (0, _tanstack_react_query.useQuery)({
+		queryKey,
+		queryFn: fetchCallback,
+		select: selectCallback
+	});
+	if (isLoading || error || count === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Box.default, {
+		bgcolor: "brand.main",
+		display: "flex",
+		justifyContent: "center",
+		alignItems: "center",
+		p: 1,
+		borderRadius: "100%",
+		color: "white",
+		fontWeight: 700,
+		fontSize: "0.75rem",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: count })
+	});
+}
+function ChecklistBadge() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TabBadge, {
+		queryKey: require_state.cacheKeys.checks(),
+		fetchCallback: require_state.listChecks,
+		selectCallback: (checks) => {
+			return checks.filter((check) => !check.is_checked).length;
+		}
+	});
+}
+function NavBar() {
+	const pathname = (0, next_navigation.usePathname)();
+	const { isDemoSite, isLoading, cloudMode } = require_state.useLineageGraphContext();
+	const { featureToggles } = require_state.useRecceInstanceContext();
+	const { data: flag, isLoading: isFlagLoading } = require_state.useRecceServerFlag();
+	const prevPathnameRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		if (prevPathnameRef.current && prevPathnameRef.current !== pathname) require_state.trackNavigation({
+			from: prevPathnameRef.current,
+			to: pathname
+		});
+		prevPathnameRef.current = pathname;
+	}, [pathname]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Box.default, {
+		sx: {
+			borderBottom: "1px solid lightgray",
+			px: "12px"
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_Box.default, {
+			sx: {
+				display: "grid",
+				gridTemplateColumns: "1fr auto 1fr",
+				width: "100%",
+				alignItems: "center"
+			},
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Tabs.default, {
+					value: (0, react.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__ */ (0, react_jsx_runtime.jsx)(_mui_material_Tab.default, {
+							value: path,
+							disabled: isLoading || isFlagLoading,
+							sx: { p: 0 },
+							label: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Box.default, {
+								sx: {
+									display: "flex",
+									alignItems: "center",
+									gap: "4px"
+								},
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(next_link.default, {
+									href: path,
+									style: {
+										textDecoration: "none",
+										color: "inherit",
+										padding: "0.875rem 1.1875rem",
+										display: "flex",
+										gap: 3,
+										alignItems: "center"
+									},
+									children: [
+										name,
+										" ",
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChecklistBadge, {})
+									]
+								})
+							})
+						}, path);
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Tab.default, {
+							value: path,
+							disabled: isLoading || isFlagLoading,
+							sx: { p: 0 },
+							label: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Box.default, {
+								sx: {
+									display: "flex",
+									alignItems: "center",
+									gap: "4px"
+								},
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(next_link.default, {
+									href: path,
+									style: {
+										textDecoration: "none",
+										color: "inherit",
+										padding: "0.875rem 1.1875rem"
+									},
+									children: name
+								})
+							})
+						}, path);
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_Box.default, {
+					sx: {
+						display: "flex",
+						alignItems: "center",
+						gap: "12px",
+						justifyContent: "center"
+					},
+					children: [!isLoading && !isDemoSite && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Filename, {}), !isLoading && !isDemoSite && !flag?.single_env_onboarding && !featureToggles.disableShare && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TopLevelShare, {})]
+				}),
+				!isLoading && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_Box.default, {
+					sx: {
+						display: "flex",
+						justifyContent: "right",
+						alignItems: "center",
+						mr: "8px"
+					},
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(EnvInfo, {}),
+						cloudMode && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StateSynchronizer, {}),
+						/* @__PURE__ */ (0, react_jsx_runtime.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() {
+	const { setTheme, resolvedTheme } = (0, next_themes.useTheme)();
+	const [mounted, setMounted] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		setMounted(true);
+	}, []);
+	const toggleTheme = () => {
+		setTheme(resolvedTheme === "dark" ? "light" : "dark");
+	};
+	if (!mounted) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_IconButton.default, {
+		size: "small",
+		sx: {
+			color: "rgba(255, 255, 255, 0.8)",
+			"&:hover": { bgcolor: "rgba(255, 255, 255, 0.1)" }
+		},
+		disabled: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_icons_pi.PiSun, { style: {
+			width: 18,
+			height: 18
+		} })
+	});
+	const isDark = resolvedTheme === "dark";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Tooltip.default, {
+		title: isDark ? "Switch to light mode" : "Switch to dark mode",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_IconButton.default, {
+			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__ */ (0, react_jsx_runtime.jsx)(react_icons_pi.PiSun, { style: {
+				width: 18,
+				height: 18
+			} }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_icons_pi.PiMoon, { style: {
+				width: 18,
+				height: 18
+			} })
+		})
+	});
+}
+
+//#endregion
+//#region recce-source/js/app/(mainComponents)/RecceVersionBadge.tsx
+function RecceVersionBadge() {
+	const { version, latestVersion } = require_version.useVersionNumber();
+	const versionFormatRegex = (0, react.useMemo)(() => /* @__PURE__ */ new RegExp("^\\d+\\.\\d+\\.\\d+$"), []);
+	(0, react.useEffect)(() => {
+		if (versionFormatRegex.test(version) && version !== latestVersion) {
+			const storageKey = "recce-update-toast-shown";
+			if (sessionStorage.getItem(storageKey)) return;
+			setTimeout(() => {
+				require_state.toaster.create({
+					id: "recce-update-available",
+					title: "Update available",
+					description: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
+						"A new version of Recce (v",
+						latestVersion,
+						") is available.",
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("br", {}),
+						"Please run",
+						" ",
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Box.default, {
+							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__ */ (0, react_jsx_runtime.jsx)("br", {}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Link.default, {
+							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__ */ (0, react_jsx_runtime.jsx)(_mui_material_Typography.default, {
+		component: "span",
+		sx: {
+			fontSize: "sm",
+			color: "rgba(255,255,255,0.8)",
+			textTransform: "uppercase",
+			borderWidth: 1,
+			px: 1,
+			borderRadius: .75
+		},
+		children: version
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Link.default, {
+		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
 	});
 }
 
@@ -12556,6 +13807,12 @@ Object.defineProperty(exports, 'DiffEditor_default', {
     return DiffEditor_default;
   }
 });
+Object.defineProperty(exports, 'DisplayModeToggle', {
+  enumerable: true,
+  get: function () {
+    return DisplayModeToggle;
+  }
+});
 Object.defineProperty(exports, 'EnvInfo', {
   enumerable: true,
   get: function () {
@@ -12640,6 +13897,12 @@ Object.defineProperty(exports, 'MuiProvider', {
     return MuiProvider;
   }
 });
+Object.defineProperty(exports, 'NavBar', {
+  enumerable: true,
+  get: function () {
+    return NavBar;
+  }
+});
 Object.defineProperty(exports, 'NodeSqlView', {
   enumerable: true,
   get: function () {
@@ -12664,6 +13927,12 @@ Object.defineProperty(exports, 'QueryPage', {
     return QueryPage;
   }
 });
+Object.defineProperty(exports, 'RecceVersionBadge', {
+  enumerable: true,
+  get: function () {
+    return RecceVersionBadge;
+  }
+});
 Object.defineProperty(exports, 'ResourceTypeTag', {
   enumerable: true,
   get: function () {
@@ -12748,6 +14017,12 @@ Object.defineProperty(exports, 'SummaryView', {
     return SummaryView;
   }
 });
+Object.defineProperty(exports, 'TopBar', {
+  enumerable: true,
+  get: function () {
+    return TopBar;
+  }
+});
 Object.defineProperty(exports, 'VSplit', {
   enumerable: true,
   get: function () {
@@ -12760,4 +14035,4 @@ Object.defineProperty(exports, 'mui_provider_default', {
     return mui_provider_default;
   }
 });
-//# sourceMappingURL=components-DeA4kqxK.js.map
+//# sourceMappingURL=components-DXbVq9Cw.js.map