@datarecce/ui 0.1.6 → 0.1.9

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import CssBaseline from '@mui/material/CssBaseline';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import { useTheme } from 'next-themes';
-import React3, { createContext, forwardRef, useRef, useImperativeHandle, useMemo, useState, useContext, useCallback, useEffect, useLayoutEffect, Fragment as Fragment$1 } from 'react';
+import React12, { createContext, forwardRef, useRef, useImperativeHandle, useMemo, useState, useContext, useCallback, useEffect, useLayoutEffect, Fragment as Fragment$1 } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import MuiAlert from '@mui/material/Alert';
 import CircularProgress4 from '@mui/material/CircularProgress';
@@ -18,14 +18,15 @@ import { QueryClient, useMutation, useQuery, useQueryClient } from '@tanstack/re
 import axios, { AxiosError, isAxiosError } from 'axios';
 import { FiCopy, FiPackage, FiInfo, FiArrowRight, FiFrown } from 'react-icons/fi';
 import { track as track$1 } from '@amplitude/unified';
-import MuiDialog2 from '@mui/material/Dialog';
-import DialogActions6 from '@mui/material/DialogActions';
-import DialogContent7 from '@mui/material/DialogContent';
-import DialogTitle3 from '@mui/material/DialogTitle';
+import MuiDialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
 import IconButton2 from '@mui/material/IconButton';
+import path from 'path';
 import { IoClose, IoBookmarksOutline } from 'react-icons/io5';
-import 'next/link';
-import 'lodash/throttle';
+import NextLink from 'next/link';
+import throttle from 'lodash/throttle';
 import { useRouter, usePathname } from 'next/navigation';
 import Link from '@mui/material/Link';
 import MuiPopover from '@mui/material/Popover';
@@ -905,8 +906,8 @@ var colorAliases = {
   gray: "neutral"
   // Gray is an alias for neutral
 };
-function token(path) {
-  const parts = path.split(".");
+function token(path2) {
+  const parts = path2.split(".");
   if (parts[0] === "colors" && parts.length >= 3) {
     let colorName = parts[1];
     const variant = parts[2];
@@ -1163,6 +1164,146 @@ function isLineageGraphNode(node) {
 function isLineageGraphColumnNode(node) {
   return node.type === "lineageGraphColumnNode";
 }
+function buildLineageGraph(base, current, diff) {
+  const nodes = {};
+  const edges = {};
+  const buildNode = (key, from) => {
+    return {
+      id: key,
+      data: {
+        id: key,
+        name: key,
+        from,
+        data: {
+          base: void 0,
+          current: void 0
+        },
+        parents: {},
+        children: {}
+      },
+      type: "lineageGraphNode"
+      // Return as LineageGraphNode for now
+    };
+  };
+  for (const [key, nodeData] of Object.entries(base.nodes)) {
+    nodes[key] = buildNode(key, "base");
+    if (nodeData) {
+      nodes[key].data.data.base = nodeData;
+      nodes[key].data.name = nodeData.name;
+      nodes[key].data.resourceType = nodeData.resource_type;
+      nodes[key].data.packageName = nodeData.package_name;
+    }
+  }
+  for (const [key, nodeData] of Object.entries(current.nodes)) {
+    if (nodes[key]) {
+      nodes[key].data.from = "both";
+    } else {
+      nodes[key] = buildNode(key, "current");
+    }
+    if (nodeData) {
+      nodes[key].data.data.current = current.nodes[key];
+      nodes[key].data.name = nodeData.name;
+      nodes[key].data.resourceType = nodeData.resource_type;
+      nodes[key].data.packageName = nodeData.package_name;
+    }
+  }
+  for (const [child, parents] of Object.entries(base.parent_map)) {
+    for (const parent of parents) {
+      const childNode = nodes[child];
+      const parentNode = nodes[parent];
+      const id = `${parent}_${child}`;
+      if (!childNode || !parentNode) {
+        continue;
+      }
+      edges[id] = {
+        id,
+        source: parentNode.id,
+        target: childNode.id,
+        data: {
+          from: "base"
+        }
+      };
+      const edge = edges[id];
+      childNode.data.parents[parent] = edge;
+      parentNode.data.children[child] = edge;
+    }
+  }
+  for (const [child, parents] of Object.entries(current.parent_map)) {
+    for (const parent of parents) {
+      const childNode = nodes[child];
+      const parentNode = nodes[parent];
+      const id = `${parent}_${child}`;
+      if (!childNode || !parentNode) {
+        continue;
+      }
+      const existingEdge = edges[id];
+      if (existingEdge?.data && edges[id].data) {
+        edges[id].data.from = "both";
+      } else {
+        edges[id] = {
+          id,
+          source: parentNode.id,
+          target: childNode.id,
+          data: {
+            from: "current"
+          }
+        };
+      }
+      const edge = edges[id];
+      childNode.data.parents[parent] = edge;
+      parentNode.data.children[child] = edge;
+    }
+  }
+  const modifiedSet = [];
+  for (const [key, node] of Object.entries(nodes)) {
+    const diffNode = diff?.[key];
+    if (diffNode) {
+      node.data.changeStatus = diffNode.change_status;
+      if (diffNode.change) {
+        node.data.change = {
+          category: diffNode.change.category,
+          columns: diffNode.change.columns
+        };
+      }
+      modifiedSet.push(key);
+    } else if (node.data.from === "base") {
+      node.data.changeStatus = "removed";
+      modifiedSet.push(node.id);
+    } else if (node.data.from === "current") {
+      node.data.changeStatus = "added";
+      modifiedSet.push(node.id);
+    } else {
+      const checksum1 = node.data.data.base?.checksum?.checksum;
+      const checksum2 = node.data.data.current?.checksum?.checksum;
+      if (checksum1 && checksum2 && checksum1 !== checksum2) {
+        node.data.changeStatus = "modified";
+        modifiedSet.push(node.id);
+      }
+    }
+  }
+  for (const [, edge] of Object.entries(edges)) {
+    if (edge.data) {
+      if (edge.data.from === "base") {
+        edge.data.changeStatus = "removed";
+      } else if (edge.data.from === "current") {
+        edge.data.changeStatus = "added";
+      }
+    }
+  }
+  return {
+    nodes,
+    edges,
+    modifiedSet,
+    manifestMetadata: {
+      base: base.manifest_metadata ?? void 0,
+      current: current.manifest_metadata ?? void 0
+    },
+    catalogMetadata: {
+      base: base.catalog_metadata ?? void 0,
+      current: current.catalog_metadata ?? void 0
+    }
+  };
+}
 function selectUpstream(lineageGraph, nodeIds, degree = 1e3) {
   return getNeighborSet(
     nodeIds,
@@ -1518,6 +1659,100 @@ function isHistogramDiffRun(run) {
 // recce-source/js/src/constants/urls.ts
 var RECCE_SUPPORT_CALENDAR_URL = "https://cal.com/team/recce/chat";
 
+// recce-source/js/src/lib/utils/formatTime.ts
+function getTimeComponents(totalSeconds) {
+  const seconds = Math.floor(totalSeconds);
+  return {
+    hours: Math.floor(seconds / 3600),
+    minutes: Math.floor(seconds % 3600 / 60),
+    seconds: seconds % 60
+  };
+}
+function formatCompact({ hours, minutes, seconds }) {
+  if (hours > 0) {
+    return `${hours}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+  }
+  return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+}
+function formatVerbose({ hours, minutes, seconds }) {
+  const parts = [];
+  if (hours > 0) {
+    parts.push(`${hours} hour${hours !== 1 ? "s" : ""}`);
+  }
+  if (minutes > 0) {
+    parts.push(`${minutes} min${minutes !== 1 ? "s" : ""}`);
+  }
+  if (hours === 0 && (parts.length === 0 || seconds > 0)) {
+    parts.push(`${seconds} second${seconds !== 1 ? "s" : ""}`);
+  }
+  return parts.join(" ");
+}
+function formatDuration(totalSeconds, style = "verbose") {
+  const components = getTimeComponents(totalSeconds);
+  if (style === "compact") {
+    return formatCompact(components);
+  }
+  return formatVerbose(components);
+}
+function ServerDisconnectedModalContent({
+  connect,
+  idleSeconds
+}) {
+  const isIdleTimeout = idleSeconds !== void 0 && idleSeconds !== null && idleSeconds > 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(DialogTitle, { children: "Server Disconnected" }),
+    /* @__PURE__ */ jsx(DialogContent, { children: isIdleTimeout ? /* @__PURE__ */ jsxs(Typography28, { children: [
+      "The server has been idle for ",
+      formatDuration(idleSeconds),
+      " and was automatically stopped. Please restart the Recce server to continue."
+    ] }) : /* @__PURE__ */ jsx(Typography28, { children: "The server connection has been lost. Please restart the Recce server and try again." }) }),
+    /* @__PURE__ */ jsx(DialogActions, { children: /* @__PURE__ */ jsx(
+      Button10,
+      {
+        color: "iochmara",
+        variant: "contained",
+        onClick: () => {
+          connect();
+        },
+        children: "Retry"
+      }
+    ) })
+  ] });
+}
+function RecceInstanceDisconnectedModalContent({
+  shareUrl,
+  mode
+}) {
+  const contents = {
+    "read only": {
+      title: "Share Instance Expired",
+      body: "This Share Instance has expired. Please restart the share instance.",
+      action: "Restart",
+      link: shareUrl
+    },
+    "metadata only": {
+      title: "Preview Instance Expired",
+      body: "This Preview Instance has expired. To browse more, please book a meeting with us.",
+      action: "Contact us",
+      link: RECCE_SUPPORT_CALENDAR_URL
+    }
+  };
+  const content = contents[mode];
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(DialogTitle, { children: content.title }),
+    /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(Typography28, { children: content.body }) }),
+    /* @__PURE__ */ jsx(DialogActions, { children: mode === "read only" ? /* @__PURE__ */ jsx(NextLink, { href: content.link, passHref: true, children: /* @__PURE__ */ jsx(Button10, { color: "iochmara", variant: "contained", children: content.action }) }) : /* @__PURE__ */ jsx(
+      Button10,
+      {
+        color: "iochmara",
+        variant: "contained",
+        onClick: () => window.open(content.link, "_blank"),
+        children: content.action
+      }
+    ) })
+  ] });
+}
+
 // recce-source/js/src/lib/api/cacheKeys.ts
 var cacheKeys = {
   rowCount: (model) => ["row_count", model],
@@ -1567,6 +1802,75 @@ var defaultValue = {
   sessionId: void 0
 };
 var InstanceInfo = createContext(defaultValue);
+function RecceInstanceInfoProvider({
+  children
+}) {
+  const { data: instanceInfo, isLoading } = useRecceInstanceInfo();
+  const [featureToggles, setFeatureToggles] = useState(
+    defaultFeatureToggles
+  );
+  const [singleEnv, setSingleEnv] = useState(false);
+  const [authed, setAuthed] = useState(false);
+  const [lifetimeExpiredAt, setLifetimeExpiredAt] = useState();
+  const [shareUrl, setShareUrl] = useState();
+  const [sessionId, setSessionId] = useState();
+  const [prevInstanceInfo, setPrevInstanceInfo] = useState(instanceInfo);
+  if (!isLoading && instanceInfo && instanceInfo !== prevInstanceInfo) {
+    setPrevInstanceInfo(instanceInfo);
+    setSingleEnv(instanceInfo.single_env);
+    setAuthed(instanceInfo.authed);
+    setShareUrl(instanceInfo.share_url);
+    setSessionId(instanceInfo.session_id);
+    if (instanceInfo.lifetime_expired_at) {
+      setLifetimeExpiredAt(new Date(instanceInfo.lifetime_expired_at));
+      console.log("lifetime expired at", instanceInfo.lifetime_expired_at);
+    }
+    const toggles = { ...defaultFeatureToggles };
+    if (instanceInfo.server_mode === "read-only") {
+      toggles.mode = "read only";
+      toggles.disableSaveToFile = true;
+      toggles.disableExportStateFile = true;
+      toggles.disableImportStateFile = true;
+      toggles.disableUpdateChecklist = true;
+      toggles.disableDatabaseQuery = true;
+      toggles.disableViewActionDropdown = true;
+      toggles.disableNodeActionDropdown = true;
+      toggles.disableShare = true;
+    } else if (instanceInfo.server_mode === "preview") {
+      toggles.mode = "metadata only";
+      toggles.disableSaveToFile = true;
+      toggles.disableExportStateFile = true;
+      toggles.disableImportStateFile = true;
+      toggles.disableUpdateChecklist = false;
+      toggles.disableDatabaseQuery = true;
+      toggles.disableViewActionDropdown = false;
+      toggles.disableNodeActionDropdown = false;
+      toggles.disableShare = true;
+    }
+    if (instanceInfo.single_env) {
+      toggles.disableUpdateChecklist = true;
+      toggles.disableShare = true;
+    }
+    if (instanceInfo.cloud_instance) {
+      toggles.disableShare = true;
+    }
+    setFeatureToggles(toggles);
+  }
+  return /* @__PURE__ */ jsx(
+    InstanceInfo.Provider,
+    {
+      value: {
+        featureToggles,
+        singleEnv,
+        authed,
+        lifetimeExpiredAt,
+        shareUrl,
+        sessionId
+      },
+      children
+    }
+  );
+}
 var useRecceInstanceContext = () => useContext(InstanceInfo);
 
 // recce-source/js/src/lib/api/flag.ts
@@ -1711,9 +2015,246 @@ async function aggregateRuns() {
   const response = await axiosClient.post(`/api/runs/aggregate`, {});
   return response.data;
 }
-createContext(
+
+// recce-source/js/src/lib/api/keepAlive.ts
+function isDebugEnabled() {
+  return typeof window !== "undefined" && !!window.RECCE_DEBUG_IDLE;
+}
+var MIN_KEEP_ALIVE_INTERVAL_MS = 3 * 1e3;
+var lastKeepAliveTime = 0;
+var isSending = false;
+var onKeepAliveSuccess = null;
+function setKeepAliveCallback(callback) {
+  onKeepAliveSuccess = callback;
+}
+async function sendKeepAlive() {
+  const now = Date.now();
+  const elapsed = now - lastKeepAliveTime;
+  if (elapsed < MIN_KEEP_ALIVE_INTERVAL_MS) {
+    return false;
+  }
+  if (isSending) {
+    return false;
+  }
+  try {
+    isSending = true;
+    await axiosClient.post("/api/keep-alive");
+    lastKeepAliveTime = Date.now();
+    if (onKeepAliveSuccess) {
+      onKeepAliveSuccess(lastKeepAliveTime);
+    }
+    return true;
+  } catch (error) {
+    if (isDebugEnabled()) {
+      const errorMessage = error instanceof Error ? error.message : String(error);
+      console.log("[Keep-Alive] Failed to send", {
+        error: errorMessage,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        willRetryOnNextActivity: true
+      });
+    }
+    return false;
+  } finally {
+    isSending = false;
+  }
+}
+function getLastKeepAliveTime() {
+  return lastKeepAliveTime;
+}
+function isDebugEnabled2() {
+  return typeof window !== "undefined" && !!window.RECCE_DEBUG_IDLE;
+}
+function debugLog(message, data) {
+  if (isDebugEnabled2()) {
+    if (data) {
+      console.log(message, data);
+    } else {
+      console.log(message);
+    }
+  }
+}
+var IDLE_DETECTION_CONFIG = {
+  /** Events to listen for user activity */
+  ACTIVITY_EVENTS: ["focus", "mousemove", "keydown", "scroll"],
+  /**
+   * Throttle event handler execution to reduce JS overhead (150ms).
+   * Uses lodash.throttle with { leading: true, trailing: true } to ensure
+   * immediate response on first activity (leading) and also capture the final
+   * event in a burst (trailing), which is important for user experience.
+   */
+  EVENT_THROTTLE_MS: 150
+};
+function useIdleDetection() {
+  const { data: instanceInfo, isLoading, isError } = useRecceInstanceInfo();
+  const idleTimeoutContext = useIdleTimeoutSafe();
+  const isDisconnected = idleTimeoutContext?.isDisconnected ?? false;
+  const idleTimeout = instanceInfo?.idle_timeout;
+  const isEnabled = idleTimeout !== void 0 && idleTimeout > 0 && !isDisconnected;
+  debugLog("[Idle Detection] Instance info", {
+    isLoading,
+    isError,
+    hasIdleTimeout: idleTimeout !== void 0,
+    idleTimeout: idleTimeout !== void 0 ? `${idleTimeout}s` : "not configured",
+    isDisconnected,
+    isEnabled
+  });
+  const sendKeepAliveNow = useCallback(async () => {
+    if (document.hidden) return;
+    const sent = await sendKeepAlive();
+    if (sent) {
+      debugLog("[Idle Detection] Keep-alive sent successfully", {
+        timestamp: (/* @__PURE__ */ new Date()).toISOString()
+      });
+    }
+  }, []);
+  const handleActivity = useCallback(
+    (event) => {
+      if (isEnabled && !document.hidden) {
+        debugLog("[Idle Detection] Activity detected", {
+          event: event.type,
+          tabActive: !document.hidden
+        });
+        void sendKeepAliveNow();
+      }
+    },
+    [isEnabled, sendKeepAliveNow]
+  );
+  const handleVisibilityChange = useCallback(() => {
+    if (!isEnabled) return;
+    if (!document.hidden) {
+      debugLog("[Idle Detection] Tab became active", {
+        timestamp: (/* @__PURE__ */ new Date()).toISOString()
+      });
+      void sendKeepAliveNow();
+    }
+  }, [isEnabled, sendKeepAliveNow]);
+  const throttledHandler = useMemo(
+    () => throttle(handleActivity, IDLE_DETECTION_CONFIG.EVENT_THROTTLE_MS, {
+      leading: true,
+      trailing: true
+    }),
+    [handleActivity]
+  );
+  useEffect(() => {
+    if (!isEnabled) {
+      debugLog("[Idle Detection] Disabled", {
+        idleTimeout,
+        reason: idleTimeout === void 0 ? "idle_timeout not configured on server" : idleTimeout === 0 ? "idle_timeout is 0" : "disconnected"
+      });
+      return;
+    }
+    debugLog("[Idle Detection] Initialized", {
+      enabled: true,
+      idleTimeout: `${idleTimeout}s`,
+      eventThrottle: `${IDLE_DETECTION_CONFIG.EVENT_THROTTLE_MS}ms`,
+      apiThrottle: "3s (axios layer)",
+      monitoredEvents: IDLE_DETECTION_CONFIG.ACTIVITY_EVENTS.join(", ")
+    });
+    IDLE_DETECTION_CONFIG.ACTIVITY_EVENTS.forEach((eventType) => {
+      window.addEventListener(eventType, throttledHandler, { passive: true });
+    });
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    return () => {
+      debugLog("[Idle Detection] Cleanup - removing event listeners");
+      IDLE_DETECTION_CONFIG.ACTIVITY_EVENTS.forEach((eventType) => {
+        window.removeEventListener(eventType, throttledHandler);
+      });
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+      throttledHandler.cancel();
+    };
+  }, [isEnabled, throttledHandler, handleVisibilityChange, idleTimeout]);
+}
+var IdleTimeoutContext = createContext(
   void 0
 );
+function IdleTimeoutProvider({ children }) {
+  const { data: instanceInfo } = useRecceInstanceInfo();
+  const lastServerSyncRef = useRef(Date.now());
+  const [remainingSeconds, setRemainingSeconds] = useState(null);
+  const [isDisconnected, setIsDisconnected] = useState(false);
+  const idleTimeout = instanceInfo?.idle_timeout ?? null;
+  const isEnabled = idleTimeout !== null && idleTimeout > 0;
+  const isEnabledRef = useRef(isEnabled);
+  useEffect(() => {
+    isEnabledRef.current = isEnabled;
+  }, [isEnabled]);
+  useEffect(() => {
+    if (!isEnabled) {
+      setKeepAliveCallback(null);
+      return;
+    }
+    setKeepAliveCallback((timestamp) => {
+      if (isEnabledRef.current) {
+        lastServerSyncRef.current = timestamp;
+      }
+    });
+    const currentTime = getLastKeepAliveTime();
+    if (currentTime > 0) {
+      lastServerSyncRef.current = currentTime;
+    }
+    return () => {
+      setKeepAliveCallback(null);
+    };
+  }, [isEnabled]);
+  const setDisconnected = useCallback(() => {
+    setIsDisconnected(true);
+  }, []);
+  const resetConnection = useCallback(() => {
+    setIsDisconnected(false);
+    lastServerSyncRef.current = Date.now();
+  }, []);
+  useEffect(() => {
+    if (!isEnabled || idleTimeout === null) {
+      setRemainingSeconds(null);
+      return;
+    }
+    if (isDisconnected) {
+      return;
+    }
+    const updateCountdown = () => {
+      const now = Date.now();
+      const elapsedSeconds = (now - lastServerSyncRef.current) / 1e3;
+      const remaining = Math.max(0, idleTimeout - elapsedSeconds);
+      setRemainingSeconds(remaining);
+    };
+    updateCountdown();
+    const intervalId = setInterval(updateCountdown, 1e3);
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, [isEnabled, idleTimeout, isDisconnected]);
+  return /* @__PURE__ */ jsxs(
+    IdleTimeoutContext.Provider,
+    {
+      value: {
+        remainingSeconds,
+        idleTimeout,
+        isEnabled,
+        setDisconnected,
+        resetConnection,
+        isDisconnected
+      },
+      children: [
+        /* @__PURE__ */ jsx(IdleDetector, {}),
+        children
+      ]
+    }
+  );
+}
+function IdleDetector() {
+  useIdleDetection();
+  return null;
+}
+function useIdleTimeout() {
+  const context = useContext(IdleTimeoutContext);
+  if (!context) {
+    throw new Error("useIdleTimeout must be used within IdleTimeoutProvider");
+  }
+  return context;
+}
+function useIdleTimeoutSafe() {
+  return useContext(IdleTimeoutContext) ?? null;
+}
 var useRecceServerFlag = () => {
   return useQuery({
     queryKey: cacheKeys.flag(),
@@ -1725,6 +2266,282 @@ var defaultLineageGraphsContext = {
   isDemoSite: false
 };
 var LineageGraphContext = createContext(defaultLineageGraphsContext);
+function useLineageWatcher() {
+  const [artifactsUpdatedToastId, setArtifactsUpdatedToastId] = useState(void 0);
+  const ref = useRef({
+    ws: void 0,
+    status: "pending",
+    artifactsUpdatedToastId: void 0
+  });
+  const [status, setStatus] = useState("pending");
+  const [envStatus, setEnvStatus] = useState(void 0);
+  useEffect(() => {
+    ref.current.status = status;
+  }, [status]);
+  useEffect(() => {
+    ref.current.artifactsUpdatedToastId = artifactsUpdatedToastId;
+  }, [artifactsUpdatedToastId]);
+  const queryClient = useQueryClient();
+  const invalidateCaches = useCallback(() => {
+    void queryClient.invalidateQueries({ queryKey: cacheKeys.lineage() });
+    void queryClient.invalidateQueries({ queryKey: cacheKeys.checks() });
+    void queryClient.invalidateQueries({ queryKey: cacheKeys.runs() });
+  }, [queryClient]);
+  const connect = useCallback(() => {
+    function httpUrlToWebSocketUrl(url) {
+      return url.replace(/(http)(s)?:\/\//, "ws$2://");
+    }
+    const ws = new WebSocket(`${httpUrlToWebSocketUrl(PUBLIC_API_URL)}/api/ws`);
+    ref.current.ws = ws;
+    ws.onopen = () => {
+      ws.send("ping");
+    };
+    ws.onmessage = (event) => {
+      if (event.data === "pong") {
+        if (ref.current.status === "disconnected") {
+          invalidateCaches();
+        }
+        setStatus("connected");
+        return;
+      }
+      try {
+        const data = JSON.parse(event.data);
+        if (data.command === "refresh") {
+          const { eventType, srcPath } = data.event;
+          const [targetName, fileName] = srcPath.split("/").slice(-2);
+          const name = path.parse(fileName).name;
+          const eventId = `${targetName}-${name}-${eventType}`;
+          if (ref.current.artifactsUpdatedToastId == null) {
+            setArtifactsUpdatedToastId(
+              toaster.create({
+                id: eventId,
+                description: `Detected ${targetName} ${name} ${eventType}`,
+                type: "info",
+                duration: 5e3,
+                closable: true
+              })
+            );
+          }
+          invalidateCaches();
+        } else if (data.command === "relaunch") {
+          setEnvStatus("relaunch");
+        } else {
+          const { id, title, description, status: status2, duration } = data.event;
+          setArtifactsUpdatedToastId(
+            toaster.create({
+              id: id || "broadcast",
+              title,
+              description,
+              type: status2 ?? "info",
+              duration: duration ?? 5e3,
+              closable: true
+            })
+          );
+        }
+      } catch (err) {
+        console.error(err);
+      }
+    };
+    ws.onerror = (err) => {
+      console.error("An error occurred during Handling WebSockets", err);
+    };
+    ws.onclose = () => {
+      setStatus((status2) => {
+        if (status2 === "connected") {
+          return "disconnected";
+        }
+        return status2;
+      });
+      ref.current.ws = void 0;
+    };
+  }, [invalidateCaches]);
+  useEffect(() => {
+    const refObj = ref.current;
+    connect();
+    return () => {
+      if (refObj.ws) {
+        refObj.ws.close();
+      }
+    };
+  }, [connect]);
+  return {
+    connectionStatus: status,
+    connect,
+    envStatus
+  };
+}
+function LineageGraphContextProvider({ children }) {
+  const {
+    idleTimeout,
+    remainingSeconds,
+    isEnabled,
+    setDisconnected,
+    resetConnection
+  } = useIdleTimeout();
+  const queryServerInfo = useQuery({
+    queryKey: cacheKeys.lineage(),
+    queryFn: getServerInfo
+  });
+  const queryRunAggregated = useQuery({
+    queryKey: cacheKeys.runsAggregated(),
+    queryFn: aggregateRuns
+  });
+  const lineageGraph = useMemo(() => {
+    const lineage2 = queryServerInfo.data?.lineage;
+    if (!lineage2?.base) {
+      return void 0;
+    }
+    return buildLineageGraph(lineage2.base, lineage2.current, lineage2.diff);
+  }, [queryServerInfo.data]);
+  const errorMessage = queryServerInfo.error?.message;
+  const {
+    state_metadata: stateMetadata2,
+    lineage,
+    sqlmesh,
+    demo: isDemoSite,
+    codespace: isCodespace,
+    review_mode: reviewMode,
+    cloud_mode: cloudMode,
+    file_mode: fileMode,
+    filename: fileName,
+    adapter_type: adapterType,
+    git,
+    pull_request: pullRequest,
+    support_tasks: supportTasks
+  } = queryServerInfo.data ?? {
+    demo: false
+  };
+  const dbtBase = lineage?.base.manifest_metadata;
+  const dbtCurrent = lineage?.current.manifest_metadata;
+  const envInfo = {
+    stateMetadata: stateMetadata2,
+    adapterType,
+    git,
+    pullRequest,
+    dbt: {
+      base: dbtBase,
+      current: dbtCurrent
+    },
+    sqlmesh
+  };
+  const { connectionStatus, connect, envStatus } = useLineageWatcher();
+  useEffect(() => {
+    if (connectionStatus === "disconnected") {
+      setDisconnected();
+    } else if (connectionStatus === "connected") {
+      resetConnection();
+    }
+  }, [connectionStatus, setDisconnected, resetConnection]);
+  const { data: flags, isLoading } = useRecceServerFlag();
+  const { featureToggles, shareUrl } = useRecceInstanceContext();
+  const [relaunchHintOpen, setRelaunchHintOpen] = useState(false);
+  const [prevRelaunchCondition, setPrevRelaunchCondition] = useState(false);
+  const queryClient = useQueryClient();
+  const isActionAvailable = useCallback(
+    (name) => {
+      if (supportTasks) {
+        return supportTasks[name] ?? true;
+      }
+      return true;
+    },
+    [supportTasks]
+  );
+  const shouldShowRelaunch = !isLoading && envStatus === "relaunch" && flags?.single_env_onboarding === true && flags.show_relaunch_hint;
+  if (shouldShowRelaunch !== prevRelaunchCondition) {
+    setPrevRelaunchCondition(shouldShowRelaunch);
+    setRelaunchHintOpen(shouldShowRelaunch);
+  }
+  useEffect(() => {
+    if (shouldShowRelaunch && relaunchHintOpen) {
+      trackSingleEnvironment({ action: "target_base_added" });
+    }
+  }, [shouldShowRelaunch, relaunchHintOpen]);
+  const handleRelaunchClose = () => {
+    setRelaunchHintOpen(false);
+    void markRelaunchHintCompleted();
+    void queryClient.invalidateQueries({ queryKey: cacheKeys.flag() });
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      LineageGraphContext.Provider,
+      {
+        value: {
+          lineageGraph,
+          retchLineageGraph: () => {
+            void queryRunAggregated.refetch();
+          },
+          envInfo,
+          reviewMode,
+          cloudMode,
+          fileMode,
+          fileName,
+          isDemoSite,
+          isCodespace,
+          error: errorMessage,
+          supportTasks,
+          isActionAvailable,
+          isLoading: queryServerInfo.isLoading,
+          runsAggregated: queryRunAggregated.data,
+          refetchRunsAggregated: () => {
+            void queryRunAggregated.refetch();
+          }
+        },
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      MuiDialog,
+      {
+        open: connectionStatus === "disconnected",
+        onClose: () => void 0,
+        children: shareUrl && featureToggles.mode !== null ? /* @__PURE__ */ jsx(
+          RecceInstanceDisconnectedModalContent,
+          {
+            shareUrl,
+            mode: featureToggles.mode
+          }
+        ) : /* @__PURE__ */ jsx(
+          ServerDisconnectedModalContent,
+          {
+            connect,
+            idleSeconds: (
+              // Only show idle time if disconnected due to idle timeout
+              // (idle timeout enabled AND remaining time was near zero)
+              isEnabled && idleTimeout !== null && remainingSeconds !== null && remainingSeconds <= 5 ? idleTimeout - Math.max(0, remainingSeconds) : void 0
+            )
+          }
+        )
+      }
+    ),
+    flags?.single_env_onboarding && /* @__PURE__ */ jsxs(MuiDialog, { open: relaunchHintOpen, onClose: handleRelaunchClose, children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: "Target-base Added" }),
+      /* @__PURE__ */ jsx(
+        IconButton2,
+        {
+          "aria-label": "close",
+          onClick: handleRelaunchClose,
+          sx: {
+            position: "absolute",
+            right: 8,
+            top: 8,
+            color: "grey.500"
+          },
+          children: /* @__PURE__ */ jsx(IoClose, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(Typography28, { children: "Please restart the Recce server." }) }),
+      /* @__PURE__ */ jsx(DialogActions, { children: /* @__PURE__ */ jsx(
+        Button10,
+        {
+          color: "iochmara",
+          variant: "contained",
+          onClick: handleRelaunchClose,
+          children: "Got it!"
+        }
+      ) })
+    ] })
+  ] });
+}
 var useLineageGraphContext = () => useContext(LineageGraphContext);
 var useRunsAggregated = () => {
   const { runsAggregated, refetchRunsAggregated } = useLineageGraphContext();
@@ -1913,7 +2730,7 @@ var RunModal = ({
     onClose();
   };
   return /* @__PURE__ */ jsxs(
-    MuiDialog2,
+    MuiDialog,
     {
       open: isOpen,
       onClose: handleClose,
@@ -1924,7 +2741,7 @@ var RunModal = ({
         paper: { sx: { height: "75%", minHeight: "400px" } }
       },
       children: [
-        /* @__PURE__ */ jsxs(DialogTitle3, { sx: { display: "flex", alignItems: "center" }, children: [
+        /* @__PURE__ */ jsxs(DialogTitle, { sx: { display: "flex", alignItems: "center" }, children: [
           title,
           " ",
           documentationUrl && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -1998,7 +2815,7 @@ var RunModal = ({
           }
         ),
         /* @__PURE__ */ jsx(
-          DialogContent7,
+          DialogContent,
           {
             sx: {
               p: 0,
@@ -2016,7 +2833,7 @@ var RunModal = ({
             ) })
           }
         ),
-        /* @__PURE__ */ jsx(DialogActions6, { children: /* @__PURE__ */ jsx(Stack24, { direction: "row", spacing: "10px", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(DialogActions, { children: /* @__PURE__ */ jsx(Stack24, { direction: "row", spacing: "10px", children: /* @__PURE__ */ jsx(
           Button10,
           {
             disabled: !isReadyToExecute,
@@ -4580,7 +5397,7 @@ function renderIndexCell(params) {
   const value = isRemoved ? baseIndex !== void 0 ? baseIndex : "-" : currentIndex !== void 0 ? currentIndex : "-";
   return /* @__PURE__ */ jsx("span", { children: value });
 }
-var MemoizedRenderIndexCell = React3.memo(renderIndexCell);
+var MemoizedRenderIndexCell = React12.memo(renderIndexCell);
 MemoizedRenderIndexCell.displayName = "MemoizedRenderIndexCell";
 function renderTypeCell(params) {
   if (!params.data) {
@@ -4613,7 +5430,7 @@ function renderTypeCell(params) {
   }
   return /* @__PURE__ */ jsx("span", { children: isRemoved ? baseType : currentType });
 }
-var MemoizedRenderTypeCell = React3.memo(renderTypeCell);
+var MemoizedRenderTypeCell = React12.memo(renderTypeCell);
 MemoizedRenderTypeCell.displayName = "MemoizedRenderTypeCell";
 
 // recce-source/js/src/lib/dataGrid/generators/toSchemaDataGrid.ts
@@ -7270,6 +8087,147 @@ var RecceActionContext = createContext({
     return void 0;
   }
 });
+var useCloseModalEffect = (onClose) => {
+  const pathname = usePathname();
+  useEffect(() => {
+    onClose();
+  }, [onClose, pathname]);
+};
+function RecceActionContextProvider({
+  children
+}) {
+  const [action, setAction] = useState();
+  const [isModalOpen, setModalOpen] = useState(false);
+  const onModalOpen = useCallback(() => setModalOpen(true), []);
+  const onModalClose = useCallback(() => setModalOpen(false), []);
+  const [isRunResultOpen, setRunResultOpen] = useState(false);
+  const onResultPaneOpen = useCallback(() => setRunResultOpen(true), []);
+  const closeRunResult = useCallback(() => setRunResultOpen(false), []);
+  const [isHistoryOpen, setHistoryOpen] = useState(false);
+  const showHistory = useCallback(() => setHistoryOpen(true), []);
+  const closeHistory = useCallback(() => setHistoryOpen(false), []);
+  const [runId, setRunId] = useState();
+  const [location, setLocation] = useAppLocation();
+  const queryClient = useQueryClient();
+  const showRunId = useCallback(
+    async (runId2, refreshHistory) => {
+      setRunId(runId2);
+      onResultPaneOpen();
+      if (refreshHistory !== false) {
+        await queryClient.invalidateQueries({ queryKey: cacheKeys.runs() });
+      }
+    },
+    [onResultPaneOpen, queryClient]
+  );
+  const clearRunResult = useCallback(() => {
+    setRunId(void 0);
+    closeRunResult();
+  }, [closeRunResult]);
+  const runAction = useCallback(
+    async (type, params, options) => {
+      try {
+        const session = (/* @__PURE__ */ new Date()).getTime().toString();
+        let lastRun = void 0;
+        if (options?.showLast) {
+          const runs = await searchRuns(type, params, 1);
+          if (runs.length === 1) {
+            lastRun = runs[0];
+          }
+        }
+        const run = findByRunType(type);
+        const RunResultView = run.RunResultView;
+        const { title, RunForm } = run;
+        if (RunResultView === void 0) {
+          throw new Error(`Run type ${type} does not have a result view`);
+        }
+        if (RunForm == void 0 || !options?.showForm) {
+          const { run_id } = await submitRun(type, params, {
+            nowait: true,
+            trackProps: options?.trackProps
+          });
+          await showRunId(run_id);
+          await queryClient.invalidateQueries({ queryKey: cacheKeys.runs() });
+          if (location.startsWith("/lineage")) {
+            setLocation("/lineage");
+          }
+        } else {
+          setAction({
+            session,
+            title,
+            type,
+            params,
+            lastRun,
+            options,
+            RunForm
+          });
+          onModalOpen();
+        }
+      } catch (e) {
+        toaster.create({
+          title: "Failed to submit a run",
+          description: e instanceof Error ? e.message : void 0,
+          type: "error",
+          duration: 5e3,
+          closable: true
+        });
+      }
+    },
+    [onModalOpen, showRunId, location, setLocation, queryClient]
+  );
+  useCloseModalEffect(onModalClose);
+  const handleExecute = async (type, params) => {
+    try {
+      onModalClose();
+      const { run_id } = await submitRun(type, params, {
+        nowait: true,
+        trackProps: action?.options?.trackProps
+      });
+      await showRunId(run_id);
+    } catch (e) {
+      toaster.create({
+        title: "Failed to submit a run",
+        description: e instanceof Error ? e.message : void 0,
+        type: "error",
+        duration: 5e3,
+        closable: true
+      });
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    RecceActionContext.Provider,
+    {
+      value: {
+        runAction,
+        runId,
+        showRunId,
+        isRunResultOpen,
+        closeRunResult,
+        isHistoryOpen,
+        closeHistory,
+        showHistory,
+        setHistoryOpen,
+        clearRunResult
+      },
+      children: [
+        action && /* @__PURE__ */ jsx(
+          RunModal,
+          {
+            isOpen: isModalOpen,
+            onClose: onModalClose,
+            onExecute: handleExecute,
+            title: action.title,
+            type: action.type,
+            params: action.params,
+            initialRun: action.lastRun,
+            RunForm: action.options?.showForm && action.RunForm ? action.RunForm : void 0
+          },
+          action.session
+        ),
+        children
+      ]
+    }
+  );
+}
 var useRecceActionContext = () => useContext(RecceActionContext);
 
 // recce-source/js/src/lib/hooks/useClipBoardToast.tsx
@@ -7533,8 +8491,8 @@ function useImageDownloadModal() {
       saveAs(imgBlob, fileName);
       onClose();
     };
-    return /* @__PURE__ */ jsxs(MuiDialog2, { open, onClose, maxWidth: "sm", fullWidth: true, children: [
-      /* @__PURE__ */ jsx(DialogTitle3, { children: "Screenshot Preview" }),
+    return /* @__PURE__ */ jsxs(MuiDialog, { open, onClose, maxWidth: "sm", fullWidth: true, children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: "Screenshot Preview" }),
       /* @__PURE__ */ jsx(
         IconButton2,
         {
@@ -7549,7 +8507,7 @@ function useImageDownloadModal() {
           children: /* @__PURE__ */ jsx(IoClose, {})
         }
       ),
-      /* @__PURE__ */ jsxs(DialogContent7, { children: [
+      /* @__PURE__ */ jsxs(DialogContent, { children: [
         /* @__PURE__ */ jsxs(Stack24, { sx: { px: "10px", gap: "10px" }, children: [
           /* @__PURE__ */ jsxs(Stack24, { direction: "row", alignItems: "center", spacing: "5px", children: [
             /* @__PURE__ */ jsx(Box34, { component: PiInfo, sx: { color: "error.main" } }),
@@ -7569,7 +8527,7 @@ function useImageDownloadModal() {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs(DialogActions6, { children: [
+      /* @__PURE__ */ jsxs(DialogActions, { children: [
         /* @__PURE__ */ jsx(Button10, { sx: { mr: 1.5 }, onClick: onClose, children: "Close" }),
         /* @__PURE__ */ jsx(Button10, { color: "iochmara", variant: "contained", onClick: onDownload, children: "Download" })
       ] })
@@ -8106,7 +9064,7 @@ function GraphColumnNode(nodeProps) {
   const selectedNode = viewOptions.column_level_lineage?.node_id;
   const selectedColumn = viewOptions.column_level_lineage?.column;
   const isFocus = column === selectedColumn && nodeId === selectedNode;
-  const [isHovered, setIsHovered] = React3.useState(false);
+  const [isHovered, setIsHovered] = React12.useState(false);
   const isHighlighted = isNodeHighlighted(columnNodeId);
   const isShowingChangeAnalysis = isNodeShowingChangeAnalysis(nodeId);
   if (!showContent) {
@@ -9202,6 +10160,28 @@ var defaultQueryContext = {
   }
 };
 var RecceQueryContext = createContext(defaultQueryContext);
+function RecceQueryContextProvider({ children }) {
+  const [sqlQuery, setSqlQuery] = React12.useState(defaultSqlQuery);
+  const [baseSqlQuery, setBaseSqlQuery] = React12.useState(defaultSqlQuery);
+  const [isCustomQueries, setCustomQueries] = React12.useState(false);
+  const [primaryKeys, setPrimaryKeys] = React12.useState();
+  return /* @__PURE__ */ jsx(
+    RecceQueryContext.Provider,
+    {
+      value: {
+        setSqlQuery,
+        sqlQuery,
+        setPrimaryKeys,
+        primaryKeys,
+        isCustomQueries,
+        setCustomQueries,
+        baseSqlQuery,
+        setBaseSqlQuery
+      },
+      children
+    }
+  );
+}
 var useRecceQueryContext = () => useContext(RecceQueryContext);
 var defaultRowCountStateContext = {
   isNodesFetching: [],
@@ -9209,7 +10189,20 @@ var defaultRowCountStateContext = {
     return void 0;
   }
 };
-createContext(defaultRowCountStateContext);
+var RowCountStateContext = createContext(defaultRowCountStateContext);
+function RowCountStateContextProvider({
+  children
+}) {
+  const [isNodesFetching, setIsNodesFetching] = React12.useState([]);
+  return /* @__PURE__ */ jsx(
+    RowCountStateContext.Provider,
+    {
+      value: { isNodesFetching, setIsNodesFetching },
+      children
+    }
+  );
+}
+var useRowCountStateContext = () => useContext(RowCountStateContext);
 var ContextMenu = ({ menuItems, open, onClose, x, y }) => {
   const { featureToggles } = useRecceInstanceContext();
   return /* @__PURE__ */ jsx(
@@ -10879,7 +11872,7 @@ var NodeSqlView = ({ node }) => {
           }
         ),
         /* @__PURE__ */ jsxs(
-          MuiDialog2,
+          MuiDialog,
           {
             open: isOpen,
             onClose: () => setIsOpen(false),
@@ -10889,7 +11882,7 @@ var NodeSqlView = ({ node }) => {
               paper: { sx: { height: "75%", overflowY: "auto" } }
             },
             children: [
-              /* @__PURE__ */ jsxs(DialogTitle3, { sx: { display: "flex", alignItems: "center" }, children: [
+              /* @__PURE__ */ jsxs(DialogTitle, { sx: { display: "flex", alignItems: "center" }, children: [
                 isSingleEnvOnboarding ? /* @__PURE__ */ jsxs(Fragment, { children: [
                   /* @__PURE__ */ jsx("code", { children: modelName }),
                   "\xA0Model Code"
@@ -10900,7 +11893,7 @@ var NodeSqlView = ({ node }) => {
                 /* @__PURE__ */ jsx(Box34, { sx: { flex: 1 } }),
                 /* @__PURE__ */ jsx(IconButton2, { size: "small", onClick: () => setIsOpen(false), children: /* @__PURE__ */ jsx(IoClose, {}) })
               ] }),
-              /* @__PURE__ */ jsx(DialogContent7, { children: isSingleEnvOnboarding ? /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(DialogContent, { children: isSingleEnvOnboarding ? /* @__PURE__ */ jsx(
                 CodeEditor,
                 {
                   language: "sql",
@@ -11493,7 +12486,7 @@ function AuthModal({
     }
   };
   return /* @__PURE__ */ jsxs(
-    MuiDialog2,
+    MuiDialog,
     {
       open,
       onClose: handleClose,
@@ -11503,9 +12496,9 @@ function AuthModal({
         paper: { sx: { borderRadius: "1rem" } }
       },
       children: [
-        authState !== "authenticating" && /* @__PURE__ */ jsx(DialogTitle3, { sx: { textAlign: "center", fontSize: "1.5rem" }, children: content.title }),
+        authState !== "authenticating" && /* @__PURE__ */ jsx(DialogTitle, { sx: { textAlign: "center", fontSize: "1.5rem" }, children: content.title }),
         authState !== "authenticating" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs(DialogContent7, { className: "space-y-2 font-light", children: [
+          /* @__PURE__ */ jsxs(DialogContent, { className: "space-y-2 font-light", children: [
             /* @__PURE__ */ jsx(Typography28, { children: "To enable sharing, get your token from Recce Cloud and launch your local instance with it." }),
             /* @__PURE__ */ jsxs("ul", { className: "list-inside list-disc", children: [
               /* @__PURE__ */ jsx("li", { children: "Share your instance with teammates via Recce Cloud." }),
@@ -11532,7 +12525,7 @@ function AuthModal({
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsxs(DialogActions6, { sx: { flexDirection: "column", gap: 1, px: 3, pb: 3 }, children: [
+          /* @__PURE__ */ jsxs(DialogActions, { sx: { flexDirection: "column", gap: 1, px: 3, pb: 3 }, children: [
             /* @__PURE__ */ jsxs(
               Button10,
               {
@@ -11583,7 +12576,7 @@ function AuthModal({
             )
           ] })
         ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(DialogContent7, { className: "space-y-2 self-center font-light", children: /* @__PURE__ */ jsxs(Stack24, { spacing: 2, alignItems: "center", sx: { pt: "1rem" }, children: [
+          /* @__PURE__ */ jsx(DialogContent, { className: "space-y-2 self-center font-light", children: /* @__PURE__ */ jsxs(Stack24, { spacing: 2, alignItems: "center", sx: { pt: "1rem" }, children: [
             /* @__PURE__ */ jsx(
               Box34,
               {
@@ -11596,7 +12589,7 @@ function AuthModal({
             /* @__PURE__ */ jsx(Typography28, { sx: { fontSize: "1.5rem", fontWeight: 500 }, children: "Reload to Finish" }),
             /* @__PURE__ */ jsx(Typography28, { children: "Reload to complete connection to Recce Cloud" })
           ] }) }),
-          /* @__PURE__ */ jsx(DialogActions6, { sx: { px: 3, pb: 3 }, children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(DialogActions, { sx: { px: 3, pb: 3 }, children: /* @__PURE__ */ jsx(
             Button10,
             {
               fullWidth: true,
@@ -11714,6 +12707,37 @@ async function shareState() {
   )).data;
 }
 var ShareState = createContext(void 0);
+function RecceShareStateContextProvider({
+  children
+}) {
+  const [shareUrl, setShareUrl] = useState();
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState();
+  const handleShareClick = async () => {
+    setIsLoading(true);
+    setError(void 0);
+    setShareUrl(void 0);
+    try {
+      const response = await shareState();
+      if (response.status !== "success") {
+        setError(response.message);
+        return;
+      }
+      setShareUrl(response.share_url);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    ShareState.Provider,
+    {
+      value: { shareUrl, isLoading, error, handleShareClick },
+      children
+    }
+  );
+}
 var useRecceShareStateContext = () => {
   const context = useContext(ShareState);
   if (!context) {
@@ -12776,7 +13800,7 @@ function SandboxView({ isOpen, onClose, current }) {
     trackPreviewChange({ action: "close", node: current?.name });
   };
   return /* @__PURE__ */ jsxs(
-    MuiDialog2,
+    MuiDialog,
     {
       open: isOpen,
       onClose: handleClose,
@@ -12868,7 +13892,7 @@ function SandboxView({ isOpen, onClose, current }) {
             ]
           }
         ),
-        /* @__PURE__ */ jsx(DialogContent7, { sx: { p: 0 }, children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(DialogContent, { sx: { p: 0 }, children: /* @__PURE__ */ jsxs(
           VSplit,
           {
             sizes: isRunResultOpen ? [50, 50] : [100, 0],
@@ -13898,7 +14922,7 @@ function useValueDiffAlertDialog() {
     setOpen(false);
   };
   const ValueDiffAlertDialog = /* @__PURE__ */ jsxs(
-    MuiDialog2,
+    MuiDialog,
     {
       open,
       onClose: handleCancel,
@@ -13907,7 +14931,7 @@ function useValueDiffAlertDialog() {
       "aria-labelledby": "value-diff-alert-dialog-title",
       children: [
         /* @__PURE__ */ jsxs(
-          DialogTitle3,
+          DialogTitle,
           {
             id: "value-diff-alert-dialog-title",
             sx: { fontSize: "1.125rem", fontWeight: "bold" },
@@ -13932,12 +14956,12 @@ function useValueDiffAlertDialog() {
             children: /* @__PURE__ */ jsx(IoClose, {})
           }
         ),
-        /* @__PURE__ */ jsx(DialogContent7, { children: /* @__PURE__ */ jsx(Stack24, { spacing: "20px", children: /* @__PURE__ */ jsxs(Box34, { children: [
+        /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(Stack24, { spacing: "20px", children: /* @__PURE__ */ jsxs(Box34, { children: [
           "Value diff will be executed on ",
           nodeCount,
           " nodes in the Lineage, which can add extra costs to your bill."
         ] }) }) }),
-        /* @__PURE__ */ jsxs(DialogActions6, { sx: { gap: 0.5 }, children: [
+        /* @__PURE__ */ jsxs(DialogActions, { sx: { gap: 0.5 }, children: [
           /* @__PURE__ */ jsx(
             Button10,
             {
@@ -15485,14 +16509,14 @@ var CheckList = ({
         ]
       }
     ) }) }),
-    /* @__PURE__ */ jsxs(MuiDialog2, { open, onClose: handleClose, maxWidth: "xs", fullWidth: true, children: [
-      /* @__PURE__ */ jsxs(DialogTitle3, { sx: { display: "flex", alignItems: "center" }, children: [
+    /* @__PURE__ */ jsxs(MuiDialog, { open, onClose: handleClose, maxWidth: "xs", fullWidth: true, children: [
+      /* @__PURE__ */ jsxs(DialogTitle, { sx: { display: "flex", alignItems: "center" }, children: [
         "Mark as Approved?",
         /* @__PURE__ */ jsx(Box34, { sx: { flexGrow: 1 } }),
         /* @__PURE__ */ jsx(IconButton2, { size: "small", onClick: handleClose, children: /* @__PURE__ */ jsx(IoClose, {}) })
       ] }),
       /* @__PURE__ */ jsx(Divider, {}),
-      /* @__PURE__ */ jsxs(DialogContent7, { sx: { fontSize: "0.875rem" }, children: [
+      /* @__PURE__ */ jsxs(DialogContent, { sx: { fontSize: "0.875rem" }, children: [
         /* @__PURE__ */ jsx(Typography28, { children: "Please ensure you have reviewed the contents of this check before marking it as approved." }),
         /* @__PURE__ */ jsx(
           FormControlLabel4,
@@ -15512,7 +16536,7 @@ var CheckList = ({
         )
       ] }),
       /* @__PURE__ */ jsx(Divider, {}),
-      /* @__PURE__ */ jsxs(DialogActions6, { sx: { gap: 0 }, children: [
+      /* @__PURE__ */ jsxs(DialogActions, { sx: { gap: 0 }, children: [
         /* @__PURE__ */ jsx(Button10, { variant: "outlined", size: "small", onClick: handleClose, children: "Cancel" }),
         /* @__PURE__ */ jsx(
           Button10,
@@ -15711,13 +16735,13 @@ function truncateUrl(url, maxLength = 60) {
   try {
     const urlObj = new URL(url);
     const domain = urlObj.hostname;
-    const path = urlObj.pathname + urlObj.search + urlObj.hash;
+    const path2 = urlObj.pathname + urlObj.search + urlObj.hash;
     if (domain.length >= maxLength - 3) {
       return domain.substring(0, maxLength - 3) + "...";
     }
     const remainingLength = maxLength - domain.length - 3;
-    if (path.length > remainingLength) {
-      return `${domain}${path.substring(0, remainingLength)}...`;
+    if (path2.length > remainingLength) {
+      return `${domain}${path2.substring(0, remainingLength)}...`;
     }
     return url;
   } catch {
@@ -15732,7 +16756,7 @@ function ExternalLinkConfirmDialog({
 }) {
   const cancelRef = useRef(null);
   return /* @__PURE__ */ jsxs(
-    MuiDialog2,
+    MuiDialog,
     {
       open: isOpen,
       onClose: onCancel,
@@ -15741,7 +16765,7 @@ function ExternalLinkConfirmDialog({
       "aria-labelledby": "external-link-dialog-title",
       children: [
         /* @__PURE__ */ jsxs(
-          DialogTitle3,
+          DialogTitle,
           {
             id: "external-link-dialog-title",
             sx: { display: "flex", alignItems: "center", gap: 1 },
@@ -15765,7 +16789,7 @@ function ExternalLinkConfirmDialog({
             children: /* @__PURE__ */ jsx(IoClose, {})
           }
         ),
-        /* @__PURE__ */ jsxs(DialogContent7, { children: [
+        /* @__PURE__ */ jsxs(DialogContent, { children: [
           /* @__PURE__ */ jsx(Typography28, { sx: { mb: 1.5 }, children: "This link will take you to an external website outside of Recce. Are you sure you want to continue?" }),
           /* @__PURE__ */ jsx(
             Box34,
@@ -15794,7 +16818,7 @@ function ExternalLinkConfirmDialog({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs(DialogActions6, { sx: { gap: 1 }, children: [
+        /* @__PURE__ */ jsxs(DialogActions, { sx: { gap: 1 }, children: [
           /* @__PURE__ */ jsx(Button10, { ref: cancelRef, variant: "outlined", onClick: onCancel, children: "Cancel" }),
           /* @__PURE__ */ jsx(Button10, { color: "iochmara", variant: "contained", onClick: onConfirm, children: "Open Link" })
         ] })
@@ -16537,6 +17561,19 @@ var RecceCheckContext = createContext({
     return void 0;
   }
 });
+function RecceCheckContextProvider({ children }) {
+  const [selectCheckId, setSelectCheckId] = React12.useState("");
+  return /* @__PURE__ */ jsx(
+    RecceCheckContext.Provider,
+    {
+      value: {
+        setLatestSelectedCheckId: setSelectCheckId,
+        latestSelectedCheckId: selectCheckId
+      },
+      children
+    }
+  );
+}
 var useRecceCheckContext = () => useContext(RecceCheckContext);
 function CheckBreadcrumb({ name, setName }) {
   const [isEditing, setIsEditing] = useState(false);
@@ -17577,15 +18614,15 @@ function CheckDetail({
                 }
               ) }),
               /* @__PURE__ */ jsxs(
-                MuiDialog2,
+                MuiDialog,
                 {
                   open: isPresetCheckTemplateOpen,
                   onClose: () => setIsPresetCheckTemplateOpen(false),
                   maxWidth: "md",
                   fullWidth: true,
                   children: [
-                    /* @__PURE__ */ jsx(DialogTitle3, { children: "Preset Check Template" }),
-                    /* @__PURE__ */ jsxs(DialogContent7, { children: [
+                    /* @__PURE__ */ jsx(DialogTitle, { children: "Preset Check Template" }),
+                    /* @__PURE__ */ jsxs(DialogContent, { children: [
                       /* @__PURE__ */ jsxs(Typography28, { variant: "subtitle2", fontWeight: "bold", sx: { mb: 2 }, children: [
                         "Please",
                         " ",
@@ -17621,7 +18658,7 @@ function CheckDetail({
                       ] }),
                       /* @__PURE__ */ jsx(PresetCheckTemplateView, { yamlTemplate: presetCheckTemplate })
                     ] }),
-                    /* @__PURE__ */ jsx(DialogActions6, { children: /* @__PURE__ */ jsx(
+                    /* @__PURE__ */ jsx(DialogActions, { children: /* @__PURE__ */ jsx(
                       IconButton2,
                       {
                         size: "small",
@@ -17901,7 +18938,7 @@ function DateDividedRunHistoryItem({
     },
     [setLocation]
   );
-  return /* @__PURE__ */ jsxs(React3.Fragment, { children: [
+  return /* @__PURE__ */ jsxs(React12.Fragment, { children: [
     shouldRenderDateSegment && /* @__PURE__ */ jsx(DateSegmentItem, { runAt: run.run_at }, currentDate),
     /* @__PURE__ */ jsx(
       RunListItem,
@@ -18254,10 +19291,13 @@ function useVersionNumber() {
   }, []);
   return { version, latestVersion };
 }
+function RecceContextProvider({ children }) {
+  return /* @__PURE__ */ jsx(RecceInstanceInfoProvider, { children: /* @__PURE__ */ jsx(RecceShareStateContextProvider, { children: /* @__PURE__ */ jsx(RecceQueryContextProvider, { children: /* @__PURE__ */ jsx(LineageGraphContextProvider, { children: /* @__PURE__ */ jsx(RowCountStateContextProvider, { children: /* @__PURE__ */ jsx(RecceActionContextProvider, { children: /* @__PURE__ */ jsx(RecceCheckContextProvider, { children }) }) }) }) }) }) });
+}
 
 // src/index.ts
 var VERSION = "0.1.0";
 
-export { ChangeSummary, CheckBreadcrumb, CheckDescription, CheckDetail, CheckList, ColumnNameCell, DiffText, DisableTooltipMessages, GraphColumnNode, GraphEdge, GraphNode, HSplit, HistogramChart, HistogramDiffForm, HistogramDiffResultView, HistoryToggle, IconEdit, IconExport, IconImport, IconInfo, IconSave, IconSync, LineageDiffView, LineagePage, LineageView, LineageViewContext, LineageViewTopBar, ModelRowCount, MuiProvider, mui_provider_default as MuiProviderDefault, NodeSqlView, NodeView, PUBLIC_API_URL, PUBLIC_CLOUD_WEB_URL, ProfileDiffForm, ProfileDiffResultView, QueryDiffResultView, QueryForm, QueryPage, QueryResultView, RECCE_SUPPORT_CALENDAR_URL, ResourceTypeTag, RowCountDiffResultView, RowCountDiffTag, RunList, RunModal, RunPage, RunStatusAndDate, RunToolbar, RunView, SchemaDiffView, SchemaSummary, SchemaView, ScreenshotBox, ScreenshotDataGrid, SqlEditor_default as SqlEditor, SquareIcon, SummaryView, Toaster, ToasterProvider, TopKDiffForm, TopKDiffResultView, TopKSummaryList, VERSION, VSplit, ValueDiffForm, aggregateRuns, axiosClient, cancelRun, connectToCloud, createCheckByRun, createLineageDiffCheck, createSchemaDiffCheck, createSimpleCheck, deleteCheck, exportState, fetchGitHubAvatar, fetchModelRowCount, fetchUser, getCheck, getCll, getLineage, getLineageDiff, getLineageWithError, getModelInfo, getRun, getServerFlag, getServerInfo, importState, isStateSyncing, listChecks, listRuns, localStorageKeys, markAsPresetCheck, markOnboardingCompleted, markRelaunchHintCompleted, queryModelRowCount, queryRowCount, reactQueryClient, rename, reorderChecks, saveAs2 as saveAs, searchRuns, select, sessionStorageKeys, shareState, submitProfileDiff, submitQuery, submitQueryBase, submitQueryDiff, submitRowCountDiff, submitRun, submitRunFromCheck, submitValueDiff, submitValueDiffDetail, syncState, updateCheck, useCheckToast, useChecks, useClipBoardToast, useLineageViewContext, useRecceInstanceInfo, useToaster, useValueDiffAlertDialog_default as useValueDiffAlertDialog, useVersionNumber, waitRun };
+export { ChangeSummary, CheckBreadcrumb, CheckDescription, CheckDetail, CheckList, ColumnNameCell, DiffText, DisableTooltipMessages, GraphColumnNode, GraphEdge, GraphNode, HSplit, HistogramChart, HistogramDiffForm, HistogramDiffResultView, HistoryToggle, IconEdit, IconExport, IconImport, IconInfo, IconSave, IconSync, IdleTimeoutProvider, LineageDiffView, LineageGraphContextProvider, LineagePage, LineageView, LineageViewContext, LineageViewTopBar, ModelRowCount, MuiProvider, mui_provider_default as MuiProviderDefault, NodeSqlView, NodeView, PUBLIC_API_URL, PUBLIC_CLOUD_WEB_URL, ProfileDiffForm, ProfileDiffResultView, QueryDiffResultView, QueryForm, QueryPage, QueryResultView, RECCE_SUPPORT_CALENDAR_URL, RecceActionContextProvider, RecceCheckContextProvider, RecceContextProvider, RecceInstanceInfoProvider, RecceQueryContextProvider, RecceShareStateContextProvider, ResourceTypeTag, RowCountDiffResultView, RowCountDiffTag, RowCountStateContextProvider, RunList, RunModal, RunPage, RunStatusAndDate, RunToolbar, RunView, SchemaDiffView, SchemaSummary, SchemaView, ScreenshotBox, ScreenshotDataGrid, SqlEditor_default as SqlEditor, SquareIcon, SummaryView, Toaster, ToasterProvider, TopKDiffForm, TopKDiffResultView, TopKSummaryList, VERSION, VSplit, ValueDiffForm, aggregateRuns, axiosClient, cancelRun, connectToCloud, createCheckByRun, createLineageDiffCheck, createSchemaDiffCheck, createSimpleCheck, deleteCheck, exportState, fetchGitHubAvatar, fetchModelRowCount, fetchUser, getCheck, getCll, getLineage, getLineageDiff, getLineageWithError, getModelInfo, getRun, getServerFlag, getServerInfo, importState, isStateSyncing, listChecks, listRuns, localStorageKeys, markAsPresetCheck, markOnboardingCompleted, markRelaunchHintCompleted, queryModelRowCount, queryRowCount, reactQueryClient, rename, reorderChecks, saveAs2 as saveAs, searchRuns, select, sessionStorageKeys, shareState, submitProfileDiff, submitQuery, submitQueryBase, submitQueryDiff, submitRowCountDiff, submitRun, submitRunFromCheck, submitValueDiff, submitValueDiffDetail, syncState, updateCheck, useCheckToast, useChecks, useClipBoardToast, useIdleTimeout, useLineageGraphContext, useLineageViewContext, useRecceActionContext, useRecceCheckContext, useRecceInstanceContext, useRecceInstanceInfo, useRecceQueryContext, useRecceShareStateContext, useRowCountStateContext, useRunsAggregated, useToaster, useValueDiffAlertDialog_default as useValueDiffAlertDialog, useVersionNumber, waitRun };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map