@datarecce/ui 0.1.23 → 0.1.24

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

@@ -1,8 +1,8 @@
 "use client"
-const require_state = require('./state-AeoqV9ja.js');
+const require_state = require('./state-Ct-DP81O.js');
 const require_urls = require('./urls-SazAekCZ.js');
-const require_version = require('./version-MxW9vrDY.js');
-const require_RecceCheckContext = require('./RecceCheckContext-_xzNlnbJ.js');
+const require_version = require('./version-BgsW-hXj.js');
+const require_RecceCheckContext = require('./RecceCheckContext-Cb41gigE.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);
@@ -153,10 +153,6 @@ 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
 /**
@@ -2551,13 +2547,14 @@ function useImageDownloadModal() {
 //#endregion
 //#region recce-source/js/src/lib/hooks/useRun.tsx
 const useRun = (runId) => {
+	const { apiClient } = require_state.useApiConfig();
 	const [isRunning, setIsRunning] = (0, react.useState)(false);
 	const [aborting, setAborting] = (0, react.useState)(false);
 	const [, refetchRunsAggregated] = require_state.useRunsAggregated();
 	const { error, data: run } = (0, _tanstack_react_query.useQuery)({
 		queryKey: require_state.cacheKeys.run(runId ?? ""),
 		queryFn: async () => {
-			return await require_state.waitRun(runId ?? "", isRunning ? 2 : 0);
+			return await require_state.waitRun(runId ?? "", isRunning ? 2 : 0, apiClient);
 		},
 		enabled: !!runId,
 		refetchInterval: isRunning ? 50 : false,
@@ -2581,8 +2578,8 @@ const useRun = (runId) => {
 	const onCancel = (0, react.useCallback)(async () => {
 		setAborting(true);
 		if (!runId) return;
-		await require_state.cancelRun(runId);
-	}, [runId]);
+		await require_state.cancelRun(runId, apiClient);
+	}, [runId, apiClient]);
 	let RunResultView;
 	if (run && require_state.runTypeHasRef(run.type)) RunResultView = require_state.findByRunType(run.type).RunResultView;
 	return {
@@ -6320,6 +6317,7 @@ const QueryForm = ({ defaultPrimaryKeys, onPrimaryKeysChange, ...props }) => {
 //#region recce-source/js/src/components/AuthModal/AuthModal.tsx
 function AuthModal({ handleParentClose, parentOpen = false, ignoreCookie = false, variant = "auth" }) {
 	const { authed } = require_state.useRecceInstanceContext();
+	const { apiClient } = require_state.useApiConfig();
 	const [open, setOpen] = (0, react.useState)(parentOpen || !authed);
 	const authStateCookieValue = js_cookie.default.get("authState") ?? "pending";
 	const [authState, setAuthState] = (0, react.useState)(ignoreCookie ? "pending" : authStateCookieValue);
@@ -6402,7 +6400,7 @@ function AuthModal({ handleParentClose, parentOpen = false, ignoreCookie = false
 					},
 					onClick: async () => {
 						setAuthState("authenticating");
-						const { connection_url } = await require_version.connectToCloud();
+						const { connection_url } = await require_version.connectToCloud(apiClient);
 						window.open(connection_url, "_blank");
 					},
 					children: [
@@ -7088,6 +7086,7 @@ function AddToCheckButton({ runId, viewOptions }) {
 	const { error, run } = useRun(runId);
 	const queryClient = (0, _tanstack_react_query.useQueryClient)();
 	const [, setLocation] = require_state.useAppLocation();
+	const { apiClient } = require_state.useApiConfig();
 	const checkId = run?.check_id;
 	const handleGoToCheck = (0, react.useCallback)(() => {
 		if (!checkId) return;
@@ -7095,14 +7094,15 @@ function AddToCheckButton({ runId, viewOptions }) {
 	}, [checkId, setLocation]);
 	const handleAddToChecklist = (0, react.useCallback)(async () => {
 		if (!runId) return;
-		const check = await require_state.createCheckByRun(runId, viewOptions);
+		const check = await require_state.createCheckByRun(runId, viewOptions, apiClient);
 		await queryClient.invalidateQueries({ queryKey: require_state.cacheKeys.checks() });
 		setLocation(`/checks/?id=${check.check_id}`);
 	}, [
 		runId,
 		setLocation,
 		queryClient,
-		viewOptions
+		viewOptions,
+		apiClient
 	]);
 	if (featureToggles.disableUpdateChecklist) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {});
 	if (run?.check_id) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Button.default, {
@@ -7260,15 +7260,16 @@ function SandboxView({ isOpen, onClose, current }) {
 	const { showRunId, clearRunResult } = require_state.useRecceActionContext();
 	const { primaryKeys, setPrimaryKeys } = require_RecceCheckContext.useRecceQueryContext();
 	const { data: flags, isLoading } = require_state.useRecceServerFlag();
+	const { apiClient } = require_state.useApiConfig();
 	const queryFn = async () => {
 		const sqlTemplate = modifiedCode;
 		const { run_id } = await require_state.submitQueryDiff({
 			current_model: current?.name ?? "",
 			primary_keys: primaryKeys,
 			sql_template: sqlTemplate
-		}, { nowait: true });
+		}, { nowait: true }, apiClient);
 		showRunId(run_id);
-		return await require_state.waitRun(run_id);
+		return await require_state.waitRun(run_id, void 0, apiClient);
 	};
 	const { mutate: runQuery, isPending } = (0, _tanstack_react_query.useMutation)({
 		mutationFn: queryFn,
@@ -7746,12 +7747,17 @@ function ExploreChangeMenuButton({ node, baseColumns, currentColumns, disableRea
 	const { envInfo, isActionAvailable } = require_state.useLineageGraphContext();
 	const { featureToggles } = require_state.useRecceInstanceContext();
 	const { primaryKey } = require_state.useModelColumns_default(node.data.name);
+	const { apiClient } = require_state.useApiConfig();
 	const metadataOnly = featureToggles.mode === "metadata only";
 	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_version.createSchemaDiffCheck({ node_id: nodeId })).check_id}`);
-	}, [node, setLocation]);
+		setLocation(`/checks/?id=${(await require_version.createSchemaDiffCheck({ node_id: nodeId }, apiClient)).check_id}`);
+	}, [
+		node,
+		setLocation,
+		apiClient
+	]);
 	const formattedColumns = formatSelectColumns(baseColumns, currentColumns);
 	let query = `select * from {{ ref("${node.data.name}") }}`;
 	if (formattedColumns.length) query = `select \n  ${formattedColumns.join("\n  ")}\nfrom {{ ref("${node.data.name}") }}`;
@@ -8218,6 +8224,7 @@ const initValue = {
 	actions: {}
 };
 const useMultiNodesAction = (nodes, { onActionStarted, onActionNodeUpdated, onActionCompleted }) => {
+	const { apiClient } = require_state.useApiConfig();
 	const actionState = (0, react.useRef)({ ...initValue }).current;
 	const { showRunId } = require_state.useRecceActionContext();
 	const submitRunForNodes = async (type, skip, getParams) => {
@@ -8247,12 +8254,12 @@ const useMultiNodesAction = (nodes, { onActionStarted, onActionNodeUpdated, onAc
 		}
 		const params = getParams(candidates);
 		try {
-			const { run_id } = await require_state.submitRun(type, params, { nowait: true });
+			const { run_id } = await require_state.submitRun(type, params, { nowait: true }, apiClient);
 			showRunId(run_id);
 			actionState.currentRun = { run_id };
 			actionState.total = 1;
 			for (;;) {
-				const run = await require_state.waitRun(run_id, 2);
+				const run = await require_state.waitRun(run_id, 2, apiClient);
 				actionState.currentRun = run;
 				const status = run.error ? "failure" : run.result ? "success" : "running";
 				for (const node of candidates) {
@@ -8301,7 +8308,7 @@ const useMultiNodesAction = (nodes, { onActionStarted, onActionNodeUpdated, onAc
 				};
 				onActionNodeUpdated(node);
 			} else try {
-				const { run_id } = await require_state.submitRun(type, params, { nowait: true });
+				const { run_id } = await require_state.submitRun(type, params, { nowait: true }, apiClient);
 				actionState.currentRun = { run_id };
 				actions[node.id] = {
 					mode,
@@ -8309,7 +8316,7 @@ const useMultiNodesAction = (nodes, { onActionStarted, onActionNodeUpdated, onAc
 				};
 				onActionNodeUpdated(node);
 				for (;;) {
-					const run = await require_state.waitRun(run_id, 2);
+					const run = await require_state.waitRun(run_id, 2, apiClient);
 					actionState.currentRun = run;
 					const status = run.error ? "failure" : run.result ? "success" : "running";
 					actions[node.id] = {
@@ -8395,17 +8402,17 @@ const useMultiNodesAction = (nodes, { onActionStarted, onActionNodeUpdated, onAc
 		});
 	};
 	const addLineageDiffCheck = async () => {
-		return await require_state.createLineageDiffCheck({ node_ids: nodes.map((node) => node.id) });
+		return await require_state.createLineageDiffCheck({ node_ids: nodes.map((node) => node.id) }, apiClient);
 	};
 	const addSchemaDiffCheck = async () => {
 		let check;
-		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) });
+		if (nodes.length === 1) check = await require_version.createSchemaDiffCheck({ node_id: nodes[0].id }, apiClient);
+		else check = await require_version.createSchemaDiffCheck({ node_id: nodes.map((node) => node.id) }, apiClient);
 		return check;
 	};
 	const cancel = async () => {
 		actionState.status = "canceling";
-		if (actionState.currentRun?.run_id) await require_state.cancelRun(actionState.currentRun.run_id);
+		if (actionState.currentRun?.run_id) await require_state.cancelRun(actionState.currentRun.run_id, apiClient);
 	};
 	const reset = () => {
 		Object.assign(actionState, initValue);
@@ -8468,6 +8475,7 @@ const useNavToCheck = () => {
 };
 function PrivateLineageView({ interactive = false, ...props }, ref) {
 	const { isDark } = useThemeColors();
+	const { apiClient } = require_state.useApiConfig();
 	const reactFlow = (0, _xyflow_react.useReactFlow)();
 	const refResize = (0, react.useRef)(null);
 	const { successToast, failToast } = require_state.useClipBoardToast();
@@ -8515,7 +8523,7 @@ function PrivateLineageView({ interactive = false, ...props }, ref) {
 	}, []);
 	const cllHistory = (0, react.useRef)([]).current;
 	const [cll, setCll] = (0, react.useState)(void 0);
-	const actionGetCll = (0, _tanstack_react_query.useMutation)({ mutationFn: require_state.getCll });
+	const actionGetCll = (0, _tanstack_react_query.useMutation)({ mutationFn: (input) => require_state.getCll(input, apiClient) });
 	const [nodeColumnSetMap, setNodeColumSetMap] = (0, react.useState)({});
 	const findNodeByName = (0, react.useCallback)((name) => {
 		return nodes.filter(require_state.isLineageGraphNode).find((n) => n.data.name === name);
@@ -8618,7 +8626,7 @@ function PrivateLineageView({ interactive = false, ...props }, ref) {
 						exclude: newViewOptions.exclude,
 						packages: newViewOptions.packages,
 						view_mode: newViewOptions.view_mode
-					})).nodes;
+					}, apiClient)).nodes;
 				} catch (_$1) {
 					newViewOptions.view_mode = "all";
 					filteredNodeIds$1 = (await require_version.select({
@@ -8626,7 +8634,7 @@ function PrivateLineageView({ interactive = false, ...props }, ref) {
 						exclude: newViewOptions.exclude,
 						packages: newViewOptions.packages,
 						view_mode: newViewOptions.view_mode
-					})).nodes;
+					}, apiClient)).nodes;
 				}
 				setViewOptions(newViewOptions);
 			}
@@ -8747,7 +8755,7 @@ function PrivateLineageView({ interactive = false, ...props }, ref) {
 					exclude: newViewOptions.exclude,
 					packages: newViewOptions.packages,
 					view_mode: newViewOptions.view_mode
-				});
+				}, apiClient);
 				newViewOptions = {
 					...newViewOptions,
 					column_level_lineage: void 0
@@ -9029,7 +9037,7 @@ function PrivateLineageView({ interactive = false, ...props }, ref) {
 					selected: "multi"
 				});
 			} else if (!focusedNode) {
-				check = await require_state.createLineageDiffCheck(viewOptions);
+				check = await require_state.createLineageDiffCheck(viewOptions, apiClient);
 				require_state.trackMultiNodesAction({
 					type: "lineage_diff",
 					selected: "none"
@@ -9049,7 +9057,7 @@ function PrivateLineageView({ interactive = false, ...props }, ref) {
 					});
 				}
 			} else if (focusedNode) {
-				check = await require_version.createSchemaDiffCheck({ node_id: focusedNode.id });
+				check = await require_version.createSchemaDiffCheck({ node_id: focusedNode.id }, apiClient);
 				require_state.trackMultiNodesAction({
 					type: "schema_diff",
 					selected: "single"
@@ -9060,7 +9068,7 @@ function PrivateLineageView({ interactive = false, ...props }, ref) {
 					exclude: viewOptions.exclude,
 					packages: viewOptions.packages,
 					view_mode: viewOptions.view_mode
-				});
+				}, apiClient);
 				require_state.trackMultiNodesAction({
 					type: "schema_diff",
 					selected: "none"
@@ -9396,6 +9404,7 @@ const QueryPage = () => {
 	if (envInfo?.adapterType === "sqlmesh" && _sqlQuery === require_RecceCheckContext.defaultSqlQuery) sqlQuery = `select * from db.mymodel`;
 	if (featureToggles.mode === "read only") sqlQuery = `--- Would like to do query here? Book a demo with us at ${require_urls.RECCE_SUPPORT_CALENDAR_URL}\n${sqlQuery}`;
 	const { showRunId } = require_state.useRecceActionContext();
+	const { apiClient } = require_state.useApiConfig();
 	const queryFn = async (type) => {
 		function queryFactory(type$1) {
 			switch (type$1) {
@@ -9413,9 +9422,9 @@ const QueryPage = () => {
 			params.primary_keys = primaryKeys;
 			if (isCustomQueries) params.base_sql_template = baseSqlQuery;
 		}
-		const { run_id } = await runFn(params, options);
+		const { run_id } = await runFn(params, options, apiClient);
 		showRunId(run_id);
-		return await require_state.waitRun(run_id);
+		return await require_state.waitRun(run_id, void 0, apiClient);
 	};
 	const { mutate: runQuery, isPending } = (0, _tanstack_react_query.useMutation)({ mutationFn: queryFn });
 	const currentSchema = (0, react.useMemo)(() => {
@@ -9570,9 +9579,10 @@ const ChecklistItem = ({ check, selected, onSelect, onMarkAsApproved }) => {
 	const isDark = (0, _mui_material_styles.useTheme)().palette.mode === "dark";
 	const { featureToggles } = require_state.useRecceInstanceContext();
 	const queryClient = (0, _tanstack_react_query.useQueryClient)();
+	const { apiClient } = require_state.useApiConfig();
 	const checkId = check.check_id;
 	const { mutate } = (0, _tanstack_react_query.useMutation)({
-		mutationFn: (check$1) => require_state.updateCheck(checkId, check$1),
+		mutationFn: (check$1) => require_state.updateCheck(checkId, check$1, apiClient),
 		onSuccess: async () => {
 			await queryClient.invalidateQueries({ queryKey: require_state.cacheKeys.check(checkId) });
 			await queryClient.invalidateQueries({ queryKey: require_state.cacheKeys.checks() });
@@ -9644,8 +9654,9 @@ const CheckList = ({ checks, selectedItem, onCheckSelected, onChecksReordered })
 	const [open, setOpen] = (0, react.useState)(false);
 	const [pendingApprovalCheckId, setPendingApprovalCheckId] = (0, react.useState)(null);
 	const queryClient = (0, _tanstack_react_query.useQueryClient)();
+	const { apiClient } = require_state.useApiConfig();
 	const { mutate: markCheckedByID } = (0, _tanstack_react_query.useMutation)({
-		mutationFn: (checkId) => require_state.updateCheck(checkId, { is_checked: true }),
+		mutationFn: (checkId) => require_state.updateCheck(checkId, { is_checked: true }, apiClient),
 		onSuccess: async (_$1, checkId) => {
 			await queryClient.invalidateQueries({ queryKey: require_state.cacheKeys.check(checkId) });
 			await queryClient.invalidateQueries({ queryKey: require_state.cacheKeys.checks() });
@@ -9802,20 +9813,22 @@ const CheckList = ({ checks, selectedItem, onCheckSelected, onChecksReordered })
 * List all events for a check in chronological order.
 *
 * @param checkId - The check ID
+* @param client - Optional axios instance for API configuration
 * @returns Promise resolving to array of CheckEvent objects
 */
-async function listCheckEvents(checkId) {
-	return (await require_state.axiosClient.get(`/api/checks/${checkId}/events`)).data;
+async function listCheckEvents(checkId, client = require_state.axiosClient) {
+	return (await client.get(`/api/checks/${checkId}/events`)).data;
 }
 /**
 * Create a new comment on a check.
 *
 * @param checkId - The check ID
 * @param content - The comment content (plain text for now, markdown later)
+* @param client - Optional axios instance for API configuration
 * @returns Promise resolving to the created CheckEvent
 */
-async function createComment(checkId, content) {
-	return (await require_state.axiosClient.post(`/api/checks/${checkId}/events`, { content })).data;
+async function createComment(checkId, content, client = require_state.axiosClient) {
+	return (await client.post(`/api/checks/${checkId}/events`, { content })).data;
 }
 /**
 * Update an existing comment.
@@ -9824,10 +9837,11 @@ async function createComment(checkId, content) {
 * @param checkId - The check ID
 * @param eventId - The event ID of the comment to update
 * @param content - The new comment content
+* @param client - Optional axios instance for API configuration
 * @returns Promise resolving to the updated CheckEvent
 */
-async function updateComment(checkId, eventId, content) {
-	return (await require_state.axiosClient.patch(`/api/checks/${checkId}/events/${eventId}`, { content })).data;
+async function updateComment(checkId, eventId, content, client = require_state.axiosClient) {
+	return (await client.patch(`/api/checks/${checkId}/events/${eventId}`, { content })).data;
 }
 /**
 * Delete a comment (soft delete).
@@ -9835,10 +9849,11 @@ async function updateComment(checkId, eventId, content) {
 *
 * @param checkId - The check ID
 * @param eventId - The event ID of the comment to delete
+* @param client - Optional axios instance for API configuration
 * @returns Promise resolving when deletion is complete
 */
-async function deleteComment(checkId, eventId) {
-	await require_state.axiosClient.delete(`/api/checks/${checkId}/events/${eventId}`);
+async function deleteComment(checkId, eventId, client = require_state.axiosClient) {
+	await client.delete(`/api/checks/${checkId}/events/${eventId}`);
 }
 /**
 * Get the appropriate icon name for an event type.
@@ -9868,27 +9883,28 @@ const POLLING_INTERVAL = 1e4;
 function useCheckEvents(checkId, options = {}) {
 	const { enabled = true } = options;
 	const queryClient = (0, _tanstack_react_query.useQueryClient)();
+	const { apiClient } = require_state.useApiConfig();
 	const { data: events, isLoading, error, refetch } = (0, _tanstack_react_query.useQuery)({
 		queryKey: require_state.cacheKeys.checkEvents(checkId),
-		queryFn: () => listCheckEvents(checkId),
+		queryFn: () => listCheckEvents(checkId, apiClient),
 		enabled,
 		refetchInterval: POLLING_INTERVAL,
 		refetchIntervalInBackground: false
 	});
 	const createCommentMutation = (0, _tanstack_react_query.useMutation)({
-		mutationFn: (content) => createComment(checkId, content),
+		mutationFn: (content) => createComment(checkId, content, apiClient),
 		onSuccess: async () => {
 			await queryClient.invalidateQueries({ queryKey: require_state.cacheKeys.checkEvents(checkId) });
 		}
 	});
 	const updateCommentMutation = (0, _tanstack_react_query.useMutation)({
-		mutationFn: ({ eventId, content }) => updateComment(checkId, eventId, content),
+		mutationFn: ({ eventId, content }) => updateComment(checkId, eventId, content, apiClient),
 		onSuccess: async () => {
 			await queryClient.invalidateQueries({ queryKey: require_state.cacheKeys.checkEvents(checkId) });
 		}
 	});
 	const deleteCommentMutation = (0, _tanstack_react_query.useMutation)({
-		mutationFn: (eventId) => deleteComment(checkId, eventId),
+		mutationFn: (eventId) => deleteComment(checkId, eventId, apiClient),
 		onSuccess: async () => {
 			await queryClient.invalidateQueries({ queryKey: require_state.cacheKeys.checkEvents(checkId) });
 		}
@@ -10745,10 +10761,11 @@ function TimelineEvent({ event, currentUserId, onEdit, onDelete }) {
 */
 function CheckTimeline({ checkId }) {
 	const isDark = (0, _mui_material_styles.useTheme)().palette.mode === "dark";
+	const { apiClient } = require_state.useApiConfig();
 	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_version.fetchUser,
+		queryFn: () => require_version.fetchUser(apiClient),
 		retry: false
 	});
 	const handleCreateComment = (content) => {
@@ -11133,6 +11150,7 @@ const NodelistItem = ({ node, selected, onSelect, schemaChanged, isDark }) => {
 };
 function PrivateSchemaDiffView({ check }, ref) {
 	const isDark = (0, _mui_material_styles.useTheme)().palette.mode === "dark";
+	const { apiClient } = require_state.useApiConfig();
 	const { lineageGraph } = require_state.useLineageGraphContext();
 	const params = check.params;
 	const { isLoading, error, data } = (0, _tanstack_react_query.useQuery)({
@@ -11142,7 +11160,7 @@ function PrivateSchemaDiffView({ check }, ref) {
 			exclude: params.exclude,
 			packages: params.packages,
 			view_mode: params.view_mode
-		}),
+		}, apiClient),
 		refetchOnMount: true,
 		enabled: !params.node_id
 	});
@@ -11254,6 +11272,7 @@ const SchemaDiffView = (0, react.forwardRef)(PrivateSchemaDiffView);
 function CheckDetail({ checkId, refreshCheckList }) {
 	const theme = (0, _mui_material_styles.useTheme)();
 	const isDark = theme.palette.mode === "dark";
+	const { apiClient } = require_state.useApiConfig();
 	const { featureToggles, sessionId } = require_state.useRecceInstanceContext();
 	const { setLatestSelectedCheckId } = require_RecceCheckContext.useRecceCheckContext();
 	const { cloudMode } = require_state.useLineageGraphContext();
@@ -11269,7 +11288,7 @@ function CheckDetail({ checkId, refreshCheckList }) {
 	const menuOpen = Boolean(menuAnchorEl);
 	const { isLoading, error, data: check } = (0, _tanstack_react_query.useQuery)({
 		queryKey: require_state.cacheKeys.check(checkId),
-		queryFn: async () => require_state.getCheck(checkId),
+		queryFn: async () => require_state.getCheck(checkId, apiClient),
 		refetchOnMount: true
 	});
 	const trackedRunId = submittedRunId ?? check?.last_run?.run_id;
@@ -11281,14 +11300,14 @@ function CheckDetail({ checkId, refreshCheckList }) {
 	const isPresetCheck = check?.is_preset ?? false;
 	const lineageViewRef = (0, react.useRef)(null);
 	const { mutate } = (0, _tanstack_react_query.useMutation)({
-		mutationFn: (check$1) => require_state.updateCheck(checkId, check$1),
+		mutationFn: (check$1) => require_state.updateCheck(checkId, check$1, apiClient),
 		onSuccess: async () => {
 			await queryClient.invalidateQueries({ queryKey: require_state.cacheKeys.check(checkId) });
 			await queryClient.invalidateQueries({ queryKey: require_state.cacheKeys.checks() });
 		}
 	});
 	const { mutate: handleDelete } = (0, _tanstack_react_query.useMutation)({
-		mutationFn: () => require_state.deleteCheck(checkId),
+		mutationFn: () => require_state.deleteCheck(checkId, apiClient),
 		onSuccess: async () => {
 			setLatestSelectedCheckId("");
 			await queryClient.invalidateQueries({ queryKey: require_state.cacheKeys.checks() });
@@ -11298,7 +11317,7 @@ function CheckDetail({ checkId, refreshCheckList }) {
 	const { mutate: handleMarkAsPresetCheck, isPending: isMarkingAsPreset } = (0, _tanstack_react_query.useMutation)({
 		mutationFn: async () => {
 			if (!check) throw new Error("Check not found");
-			return await require_state.markAsPresetCheck(checkId);
+			return await require_state.markAsPresetCheck(checkId, apiClient);
 		},
 		onSuccess: async () => {
 			successToast("Check marked as preset successfully");
@@ -11310,20 +11329,21 @@ function CheckDetail({ checkId, refreshCheckList }) {
 	});
 	const handleRerun = (0, react.useCallback)(async () => {
 		if (!check?.type) return;
-		setSubmittedRunId((await require_state.submitRunFromCheck(checkId, { nowait: true })).run_id);
+		setSubmittedRunId((await require_state.submitRunFromCheck(checkId, { nowait: true }, apiClient)).run_id);
 		await queryClient.invalidateQueries({ queryKey: require_state.cacheKeys.check(checkId) });
 		if (refreshCheckList) refreshCheckList();
 	}, [
 		check,
 		checkId,
 		queryClient,
-		refreshCheckList
+		refreshCheckList,
+		apiClient
 	]);
 	const handleCancel = (0, react.useCallback)(async () => {
 		setAborting(true);
 		if (!trackedRunId) return;
-		return await require_state.cancelRun(trackedRunId);
-	}, [trackedRunId]);
+		return await require_state.cancelRun(trackedRunId, apiClient);
+	}, [trackedRunId, apiClient]);
 	const handleCopy = async () => {
 		if (!check) return;
 		const markdown = buildMarkdown(check);
@@ -11828,8 +11848,9 @@ function buildBody(check) {
 const CheckEmptyState = () => {
 	const queryClient = (0, _tanstack_react_query.useQueryClient)();
 	const [, setLocation] = require_state.useAppLocation();
+	const { apiClient } = require_state.useApiConfig();
 	const { mutate: createSchemaCheck, isPending } = (0, _tanstack_react_query.useMutation)({
-		mutationFn: () => require_version.createSchemaDiffCheck({ select: "state:modified" }),
+		mutationFn: () => require_version.createSchemaDiffCheck({ select: "state:modified" }, apiClient),
 		onSuccess: async (check) => {
 			await queryClient.invalidateQueries({ queryKey: require_state.cacheKeys.checks() });
 			setLocation(`/checks/?id=${check.check_id}`);
@@ -11912,9 +11933,10 @@ const CheckEmptyState = () => {
 //#endregion
 //#region recce-source/js/src/components/run/RunPage.tsx
 const RunPage = ({ runId }) => {
+	const { apiClient } = require_state.useApiConfig();
 	const { error, data: run } = (0, _tanstack_react_query.useQuery)({
 		queryKey: require_state.cacheKeys.run(runId),
-		queryFn: async () => require_state.waitRun(runId)
+		queryFn: async () => require_state.waitRun(runId, void 0, apiClient)
 	});
 	let RunResultView;
 	if (run && require_state.runTypeHasRef(run.type)) RunResultView = require_state.findByRunType(run.type).RunResultView;
@@ -11929,10 +11951,11 @@ const RunPage = ({ runId }) => {
 //#region recce-source/js/src/components/run/RunList.tsx
 const RunListItem = ({ run, isSelected, onSelectRun, onAddToChecklist, onGoToCheck }) => {
 	const { featureToggles } = require_state.useRecceInstanceContext();
+	const { apiClient } = require_state.useApiConfig();
 	const { data: fetchedRun } = (0, _tanstack_react_query.useQuery)({
 		queryKey: require_state.cacheKeys.run(run.run_id),
 		queryFn: async () => {
-			return await require_state.waitRun(run.run_id);
+			return await require_state.waitRun(run.run_id, void 0, apiClient);
 		},
 		enabled: run.status === "running",
 		retry: false
@@ -12036,10 +12059,11 @@ const DateSegmentItem = ({ runAt }) => {
 };
 const RunList = () => {
 	const { closeHistory } = require_state.useRecceActionContext();
+	const { apiClient } = require_state.useApiConfig();
 	const { data: runs, isLoading } = (0, _tanstack_react_query.useQuery)({
 		queryKey: require_state.cacheKeys.runs(),
 		queryFn: async () => {
-			return await require_state.listRuns();
+			return await require_state.listRuns(apiClient);
 		},
 		retry: false
 	});
@@ -12103,6 +12127,7 @@ const RunList = () => {
 function DateDividedRunHistoryItem({ run, previousDate }) {
 	const [, setLocation] = require_state.useAppLocation();
 	const queryClient = (0, _tanstack_react_query.useQueryClient)();
+	const { apiClient } = require_state.useApiConfig();
 	const { showRunId, runId } = require_state.useRecceActionContext();
 	const currentDate = new Date(run.run_at).toDateString();
 	const shouldRenderDateSegment = previousDate != null && previousDate !== currentDate;
@@ -12111,10 +12136,14 @@ function DateDividedRunHistoryItem({ run, previousDate }) {
 		showRunId(runId$1, false);
 	};
 	const handleAddToChecklist = (0, react.useCallback)(async (clickedRunId) => {
-		const check = await require_state.createCheckByRun(clickedRunId);
+		const check = await require_state.createCheckByRun(clickedRunId, void 0, apiClient);
 		await queryClient.invalidateQueries({ queryKey: require_state.cacheKeys.checks() });
 		setLocation(`/checks/?id=${check.check_id}`);
-	}, [setLocation, queryClient]);
+	}, [
+		setLocation,
+		queryClient,
+		apiClient
+	]);
 	const handleGoToCheck = (0, react.useCallback)((checkId) => {
 		require_state.trackHistoryAction({ name: "go_to_check" });
 		setLocation(`/checks/?id=${checkId}`);
@@ -12482,9 +12511,10 @@ function SummaryView() {
 //#endregion
 //#region recce-source/js/src/components/app/AvatarDropdown.tsx
 function AvatarDropdown() {
+	const { apiClient } = require_state.useApiConfig();
 	const { data: user, isLoading, error } = (0, _tanstack_react_query.useQuery)({
 		queryKey: require_state.cacheKeys.user(),
-		queryFn: require_version.fetchUser,
+		queryFn: () => require_version.fetchUser(apiClient),
 		retry: false
 	});
 	const { data: avatarUrl } = (0, _tanstack_react_query.useQuery)({
@@ -12633,6 +12663,142 @@ function IdleTimeoutBadge() {
 	});
 }
 
+//#endregion
+//#region recce-source/js/app/(mainComponents)/DisplayModeToggle.tsx
+/**
+* Display Mode Toggle - switches between light and dark themes
+*
+* Uses next-themes to persist the user's preference.
+* Default is light theme, with future support for system preference.
+*/
+function DisplayModeToggle() {
+	const { setTheme, resolvedTheme } = (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
+	});
+}
+
 //#endregion
 //#region recce-source/js/app/(mainComponents)/TopBar.tsx
 function LinkIcon({ icon: IconComponent, href, sx, ...props }) {
@@ -12699,8 +12865,8 @@ function TopBar() {
 					})]
 				})
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(app__mainComponents__DisplayModeToggle.default, {}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(app__mainComponents__RecceVersionBadge.default, {}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DisplayModeToggle, {}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RecceVersionBadge, {}),
 			(featureToggles.mode ?? reviewMode) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Badge.default, {
 				sx: {
 					fontSize: "0.875rem",
@@ -12885,6 +13051,7 @@ const useClosePrompt = (prompt) => {
 const Filename = () => {
 	const { featureToggles } = require_state.useRecceInstanceContext();
 	const { fileName, cloudMode, isDemoSite, envInfo } = require_state.useLineageGraphContext();
+	const { apiClient } = require_state.useApiConfig();
 	const [modalOpen, setModalOpen] = (0, react.useState)(false);
 	const [overwriteOpen, setOverwriteOpen] = (0, react.useState)(false);
 	const isStateless = !fileName && !cloudMode && !isDemoSite;
@@ -12911,11 +13078,11 @@ const Filename = () => {
 			if (method === "save") await require_state.saveAs({
 				filename: newFileName,
 				overwrite: overwrite ?? bypassOverwrite
-			});
+			}, apiClient);
 			else await require_state.rename({
 				filename: newFileName,
 				overwrite: overwrite ?? bypassOverwrite
-			});
+			}, apiClient);
 			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");
@@ -13139,9 +13306,10 @@ const Filename = () => {
 //#region recce-source/js/src/components/app/StateExporter.tsx
 function StateExporter() {
 	const { featureToggles } = require_state.useRecceInstanceContext();
+	const { apiClient } = require_state.useApiConfig();
 	const handleExport = async () => {
 		try {
-			const jsonData = await require_state.exportState();
+			const jsonData = await require_state.exportState(apiClient);
 			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) {
@@ -13308,6 +13476,7 @@ function StateSpinner() {
 function StateSynchronizer() {
 	const [isSyncing, setSyncing] = (0, react.useState)(false);
 	const queryClient = (0, _tanstack_react_query.useQueryClient)();
+	const { apiClient } = require_state.useApiConfig();
 	const [location, setLocation] = require_state.useAppLocation();
 	const [open, setOpen] = (0, react.useState)(false);
 	const [syncOption, setSyncOption] = (0, react.useState)("");
@@ -13316,12 +13485,12 @@ function StateSynchronizer() {
 	const handleSync = (0, react.useCallback)(async (input) => {
 		setOpen(false);
 		setSyncing(true);
-		if ((await require_state.syncState(input)).status === "conflict") {
+		if ((await require_state.syncState(input, apiClient)).status === "conflict") {
 			setOpen(true);
 			setSyncing(false);
 			return;
 		}
-		while (await require_state.isStateSyncing()) await new Promise((resolve) => setTimeout(resolve, 1e3));
+		while (await require_state.isStateSyncing(apiClient)) await new Promise((resolve) => setTimeout(resolve, 1e3));
 		require_state.toaster.create({
 			description: "Sync Completed",
 			type: "success",
@@ -13337,7 +13506,8 @@ function StateSynchronizer() {
 	}, [
 		queryClient,
 		location,
-		setLocation
+		setLocation,
+		apiClient
 	]);
 	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, {
@@ -13622,142 +13792,6 @@ function NavBar() {
 	});
 }
 
-//#endregion
-//#region recce-source/js/app/(mainComponents)/DisplayModeToggle.tsx
-/**
-* Display Mode Toggle - switches between light and dark themes
-*
-* Uses next-themes to persist the user's preference.
-* Default is light theme, with future support for system preference.
-*/
-function DisplayModeToggle() {
-	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
-	});
-}
-
 //#endregion
 Object.defineProperty(exports, 'ChangeSummary', {
   enumerable: true,
@@ -14035,4 +14069,4 @@ Object.defineProperty(exports, 'mui_provider_default', {
     return mui_provider_default;
   }
 });
-//# sourceMappingURL=components-DXbVq9Cw.js.map
+//# sourceMappingURL=components-Bmc5X473.js.map