@localstack/appinspector-ui 1.0.0-dev-dc58bc41 → 1.0.0-dev-f55daae2

package/dist/index.cjs

@@ -36,8 +36,8 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/pages/spans-list-page.tsx
-var import_material6 = require("@mui/material");
-var import_react6 = require("react");
+var import_material7 = require("@mui/material");
+var import_react7 = require("react");
 var import_react_router_dom = require("react-router-dom");
 
 // src/api/use-api.tsx
@@ -145,7 +145,7 @@ function unixNanoToDate(unixNanoString) {
 
 // src/components/cells/responsive-timestamp-cell.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var ResponsiveTimestampCell = ({ value }) => {
+var ResponsiveTimestampCell = ({ locale, value }) => {
   const [columnWidth, setColumnWidth] = (0, import_react2.useState)(0);
   const cellReference = (0, import_react2.useRef)(null);
   (0, import_react2.useEffect)(() => {
@@ -171,35 +171,41 @@ var ResponsiveTimestampCell = ({ value }) => {
     const date = unixNanoToDate(value);
     if (!date) return;
     if (columnWidth < 100) {
-      return date.toLocaleTimeString(void 0, {
+      const formatter = new Intl.DateTimeFormat(locale, {
         hour: "2-digit",
         hour12: false,
         minute: "2-digit",
         second: "2-digit"
       });
+      return formatter.format(date);
     } else if (columnWidth < 160) {
-      const timeString = date.toLocaleTimeString(void 0, {
+      const formatter = new Intl.DateTimeFormat(locale, {
         hour: "2-digit",
         hour12: false,
         minute: "2-digit",
         second: "2-digit"
       });
+      const timeString = formatter.format(date);
       const ms = date.getMilliseconds().toString().padStart(3, "0");
       return `${timeString}:${ms}`;
     } else {
-      const day = date.getDate().toString().padStart(2, "0");
-      const month = (date.getMonth() + 1).toString().padStart(2, "0");
-      const year = date.getFullYear().toString();
-      const timeString = date.toLocaleTimeString(void 0, {
+      const dateFormatter = new Intl.DateTimeFormat(locale, {
+        day: "2-digit",
+        month: "2-digit",
+        year: "numeric"
+      });
+      const timeFormatter = new Intl.DateTimeFormat(locale, {
         hour: "2-digit",
         hour12: false,
         minute: "2-digit",
         second: "2-digit"
       });
+      const dateString = dateFormatter.format(date);
+      const timeString = timeFormatter.format(date);
       const ms = date.getMilliseconds().toString().padStart(3, "0");
-      return `${day}.${month}.${year} - ${timeString}:${ms}`;
+      return `${dateString} - ${timeString}:${ms}`;
     }
-  }, [value, columnWidth]);
+  }, [value, columnWidth, locale]);
   if (!formattedTime) return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "N/A" });
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref: cellReference, style: { width: "100%" }, children: formattedTime });
 };
@@ -2876,24 +2882,298 @@ var SpansList = (props) => {
   ] });
 };
 
-// src/context.tsx
-var import_react4 = require("react");
-var import_react5 = require("react");
+// src/components/status-message/status-message.tsx
+var import_ErrorOutline = __toESM(require("@mui/icons-material/ErrorOutline"), 1);
+var import_InfoOutlined = __toESM(require("@mui/icons-material/InfoOutlined"), 1);
+var import_material6 = require("@mui/material");
+
+// src/api/errors.ts
+var AppInspectorNotFoundError = class extends Error {
+  constructor(message, cause) {
+    super(message);
+    this.name = "AppInspectorNotFoundError";
+    this.cause = cause;
+  }
+};
+var ConnectionError = class extends Error {
+  constructor(message, cause) {
+    super(message);
+    this.name = "ConnectionError";
+    this.cause = cause;
+  }
+};
 
 // src/config.ts
 var APPINSPECTOR_API_PREFIX = "/_localstack/appinspector";
 var API_VERSION = "v1";
 var API_ENDPOINTS = {
+  ROOT: "/",
   SPANS: "/traces/*/spans",
+  STATUS: "/status",
   TRACES: "/traces"
 };
-var getApiEndpoint = (endpoint) => {
+var getApiV1Endpoint = (endpoint) => {
   return `/${API_VERSION}${endpoint}`;
 };
+var getApiEndpoint = (endpoint) => {
+  if (endpoint === API_ENDPOINTS.ROOT || endpoint === API_ENDPOINTS.STATUS) {
+    return endpoint;
+  }
+  return getApiV1Endpoint(endpoint);
+};
 var getAppInspectorApiUrl = (localstackEndpoint, endpoint) => {
   return `${localstackEndpoint}${APPINSPECTOR_API_PREFIX}${getApiEndpoint(endpoint)}`;
 };
 
+// src/components/status-message/status-message.tsx
+var import_jsx_runtime126 = require("react/jsx-runtime");
+var StatusMessage = ({
+  error,
+  onRetry,
+  status
+}) => {
+  if (error instanceof AppInspectorNotFoundError) {
+    return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+      import_material6.Box,
+      {
+        sx: {
+          alignItems: "center",
+          display: "flex",
+          flexDirection: "column",
+          gap: 2,
+          justifyContent: "center",
+          p: 4
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(
+          import_material6.Alert,
+          {
+            icon: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_ErrorOutline.default, { fontSize: "large" }),
+            severity: "error",
+            sx: { maxWidth: 600, width: "100%" },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.AlertTitle, { sx: { fontWeight: "bold" }, children: "App Inspector Not Available" }),
+              /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Typography, { sx: { mb: 2 }, variant: "body2", children: "The App Inspector extension is not licensed or not enabled in LocalStack." }),
+              /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Typography, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("strong", { children: "To enable App Inspector:" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Typography, { sx: { mb: 1 }, variant: "body2", children: "Set the environment variable and restart LocalStack:" }),
+              /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+                import_material6.Box,
+                {
+                  component: "pre",
+                  sx: {
+                    backgroundColor: "rgba(0, 0, 0, 0.05)",
+                    borderRadius: 1,
+                    fontSize: "0.875rem",
+                    p: 1
+                  },
+                  children: "APPINSPECTOR=1"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(import_material6.Typography, { sx: { fontStyle: "italic", mb: 1, mt: 2 }, variant: "body2", children: [
+                "Runtime changes can be made via endpoint",
+                " ",
+                /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("code", { children: [
+                  APPINSPECTOR_API_PREFIX,
+                  "/status"
+                ] }),
+                ". For persistent default state across restarts, adjust the",
+                /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("code", { children: "APPINSPECTOR" }),
+                " ",
+                "environment variable."
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Typography, { sx: { mb: 1, mt: 2 }, variant: "body2", children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("strong", { children: "For more information:" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+                import_material6.Link,
+                {
+                  href: "https://docs.localstack.cloud/user-guide/tools/application-inspector/",
+                  rel: "noopener noreferrer",
+                  target: "_blank",
+                  children: "App Inspector Documentation"
+                }
+              ),
+              onRetry && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Box, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+                import_material6.Button,
+                {
+                  "aria-label": "Check App Inspector status again",
+                  onClick: onRetry,
+                  variant: "outlined",
+                  children: "Check Again"
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    );
+  }
+  if (error instanceof ConnectionError) {
+    return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+      import_material6.Box,
+      {
+        sx: {
+          alignItems: "center",
+          display: "flex",
+          flexDirection: "column",
+          gap: 2,
+          justifyContent: "center",
+          p: 4
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(
+          import_material6.Alert,
+          {
+            icon: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_ErrorOutline.default, { fontSize: "large" }),
+            severity: "error",
+            sx: { maxWidth: 600, width: "100%" },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.AlertTitle, { sx: { fontWeight: "bold" }, children: "Connection Error" }),
+              /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Typography, { sx: { mb: 2 }, variant: "body2", children: "Failed to connect to LocalStack. Please ensure LocalStack is running and accessible." }),
+              /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Typography, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("strong", { children: "To start LocalStack:" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+                import_material6.Box,
+                {
+                  component: "pre",
+                  sx: {
+                    backgroundColor: "rgba(0, 0, 0, 0.05)",
+                    borderRadius: 1,
+                    fontSize: "0.875rem",
+                    p: 1
+                  },
+                  children: "localstack start"
+                }
+              ),
+              onRetry && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Box, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+                import_material6.Button,
+                {
+                  "aria-label": "Retry connection to LocalStack",
+                  onClick: onRetry,
+                  variant: "outlined",
+                  children: "Retry Connection"
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    );
+  }
+  if (status?.status === "DISABLED") {
+    return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+      import_material6.Box,
+      {
+        sx: {
+          alignItems: "center",
+          display: "flex",
+          flexDirection: "column",
+          gap: 2,
+          justifyContent: "center",
+          p: 4
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(
+          import_material6.Alert,
+          {
+            icon: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_InfoOutlined.default, { fontSize: "large" }),
+            severity: "warning",
+            sx: { maxWidth: 600, width: "100%" },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.AlertTitle, { sx: { fontWeight: "bold" }, children: "App Inspector is Disabled" }),
+              /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Typography, { sx: { mb: 2 }, variant: "body2", children: "App Inspector is currently disabled. Please enable it to view traces and spans." }),
+              /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Typography, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("strong", { children: "To enable App Inspector at runtime:" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+                import_material6.Box,
+                {
+                  component: "pre",
+                  sx: {
+                    backgroundColor: "rgba(0, 0, 0, 0.05)",
+                    borderRadius: 1,
+                    fontSize: "0.875rem",
+                    overflowX: "auto",
+                    p: 1
+                  },
+                  children: `curl -X PUT http://localhost:4566${APPINSPECTOR_API_PREFIX}/status \\
+  -H "Content-Type: application/json" \\
+  -d '{"status": "ENABLED"}'`
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Typography, { sx: { mb: 1, mt: 2 }, variant: "body2", children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("strong", { children: "To enable App Inspector persistently across restarts:" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Typography, { sx: { mb: 1 }, variant: "body2", children: "Set the environment variable:" }),
+              /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+                import_material6.Box,
+                {
+                  component: "pre",
+                  sx: {
+                    backgroundColor: "rgba(0, 0, 0, 0.05)",
+                    borderRadius: 1,
+                    fontSize: "0.875rem",
+                    p: 1
+                  },
+                  children: "APPINSPECTOR=1"
+                }
+              ),
+              Boolean(status.note) && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Typography, { sx: { display: "block", fontStyle: "italic", mt: 2 }, variant: "caption", children: status.note }),
+              onRetry && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Box, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+                import_material6.Button,
+                {
+                  "aria-label": "Check if App Inspector is enabled",
+                  onClick: onRetry,
+                  variant: "outlined",
+                  children: "Check Status Again"
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    );
+  }
+  if (error) {
+    return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+      import_material6.Box,
+      {
+        sx: {
+          alignItems: "center",
+          display: "flex",
+          flexDirection: "column",
+          gap: 2,
+          justifyContent: "center",
+          p: 4
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(
+          import_material6.Alert,
+          {
+            icon: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_ErrorOutline.default, { fontSize: "large" }),
+            severity: "error",
+            sx: { maxWidth: 600, width: "100%" },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.AlertTitle, { sx: { fontWeight: "bold" }, children: "Error" }),
+              /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Typography, { sx: { mb: 2 }, variant: "body2", children: error.message }),
+              onRetry && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Box, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+                import_material6.Button,
+                {
+                  "aria-label": "Retry operation",
+                  onClick: onRetry,
+                  variant: "outlined",
+                  children: "Retry"
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    );
+  }
+  return;
+};
+
+// src/context.tsx
+var import_react4 = require("react");
+var import_react5 = require("react");
+
+// src/constants/error-messages.ts
+var ERROR_MESSAGES = {
+  APP_INSPECTOR_DISABLED: "App Inspector is currently disabled.",
+  APP_INSPECTOR_NOT_FOUND: "App Inspector extension not found. Please ensure App Inspector is licensed and enabled.",
+  CONNECTION_FAILED: "Failed to connect to LocalStack. Please ensure LocalStack is running and accessible."
+};
+
 // src/api/client.ts
 var apiLogger = createScopedLogger("API");
 var makeRequest = async (options) => {
@@ -2907,10 +3187,23 @@ var makeRequest = async (options) => {
       headers
     });
     if (!response.ok) {
+      if (response.status === 404) {
+        throw new AppInspectorNotFoundError(
+          ERROR_MESSAGES.APP_INSPECTOR_NOT_FOUND,
+          new Error(`404 from ${url}: ${response.statusText}`)
+        );
+      }
       throw new Error(`API request failed: ${response.status.toString()} ${response.statusText}`);
     }
     return await response.json();
   } catch (error) {
+    if (error instanceof TypeError) {
+      const message = error.message.toLowerCase();
+      const isNetworkError = message.includes("fetch") || message.includes("network") || message.includes("failed to fetch");
+      if (isNetworkError) {
+        throw new ConnectionError(ERROR_MESSAGES.CONNECTION_FAILED, error);
+      }
+    }
     if (error instanceof Error) {
       throw error;
     }
@@ -2950,12 +3243,18 @@ var createApiClient = ({ localstackEndpoint }) => {
     getSpans: async (request) => {
       const endpoint = buildSpansEndpoint(request);
       return makeRequest({ endpoint, localstackEndpoint });
+    },
+    getStatus: async () => {
+      return makeRequest({
+        endpoint: API_ENDPOINTS.STATUS,
+        localstackEndpoint
+      });
     }
   };
 };
 
 // src/context.tsx
-var import_jsx_runtime126 = require("react/jsx-runtime");
+var import_jsx_runtime127 = require("react/jsx-runtime");
 var AppInspectorContext = (0, import_react4.createContext)(void 0);
 var useAppInspector = () => {
   const context = (0, import_react4.useContext)(AppInspectorContext);
@@ -2968,7 +3267,7 @@ var AppInspectorContextProvider = (props) => {
   const api = (0, import_react5.useMemo)(() => {
     return false ? createApiClientMock() : createApiClient({ localstackEndpoint: props.localstackEndpoint });
   }, [props.localstackEndpoint]);
-  return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(ApiProvider, { api, children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(ApiProvider, { api, children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
     AppInspectorContext.Provider,
     {
       value: {
@@ -2992,17 +3291,60 @@ var AppInspectorContextProvider = (props) => {
   ) });
 };
 
+// src/hooks/use-status.tsx
+var import_react6 = require("react");
+var useStatus = () => {
+  const api = useAppInspectorApi();
+  const [checking, setChecking] = (0, import_react6.useState)(true);
+  const [status, setStatus] = (0, import_react6.useState)();
+  const [error, setError] = (0, import_react6.useState)();
+  const hasFetchedReference = (0, import_react6.useRef)(false);
+  const abortControllerReference = (0, import_react6.useRef)(null);
+  const checkStatus = (0, import_react6.useCallback)(async () => {
+    if (abortControllerReference.current) {
+      abortControllerReference.current.abort();
+    }
+    const abortController = new AbortController();
+    abortControllerReference.current = abortController;
+    setChecking(true);
+    try {
+      const response = await api.getStatus();
+      if (!abortController.signal.aborted) {
+        setStatus(response);
+        setError(void 0);
+      }
+    } catch (error_) {
+      if (!abortController.signal.aborted) {
+        setError(error_ instanceof Error ? error_ : new Error("Unknown error"));
+        setStatus(void 0);
+      }
+    } finally {
+      if (!abortController.signal.aborted) {
+        setChecking(false);
+      }
+    }
+  }, [api]);
+  (0, import_react6.useEffect)(() => {
+    if (!hasFetchedReference.current) {
+      hasFetchedReference.current = true;
+      void checkStatus();
+    }
+  }, [checkStatus]);
+  return { checking, checkStatus, error, status };
+};
+
 // src/pages/spans-list-page.tsx
-var import_jsx_runtime127 = require("react/jsx-runtime");
+var import_jsx_runtime128 = require("react/jsx-runtime");
 var MAX_WIDTH = 1400;
 var SpansListPage = () => {
   const api = useAppInspectorApi();
-  const [spans, setSpans] = (0, import_react6.useState)();
-  const [loading, setLoading] = (0, import_react6.useState)(false);
-  const hasFetched = (0, import_react6.useRef)(false);
-  const [filterWriteOperations, setFilterWriteOperations] = (0, import_react6.useState)(true);
-  const [fetchError, setFetchError] = (0, import_react6.useState)();
-  const fetchSpans = (0, import_react6.useCallback)(async () => {
+  const [spans, setSpans] = (0, import_react7.useState)();
+  const [loading, setLoading] = (0, import_react7.useState)(false);
+  const hasFetched = (0, import_react7.useRef)(false);
+  const [filterWriteOperations, setFilterWriteOperations] = (0, import_react7.useState)(true);
+  const [fetchError, setFetchError] = (0, import_react7.useState)();
+  const { checkStatus, error: statusError, status } = useStatus();
+  const fetchSpans = (0, import_react7.useCallback)(async () => {
     setLoading(true);
     try {
       const response = await api.getSpans({
@@ -3018,25 +3360,26 @@ var SpansListPage = () => {
       setLoading(false);
     }
   }, [api, filterWriteOperations]);
-  const fetchSpansSync = (0, import_react6.useCallback)(() => {
+  const fetchSpansSync = (0, import_react7.useCallback)(() => {
     void fetchSpans();
   }, [fetchSpans]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (hasFetched.current) return;
+    if (status?.status !== "ENABLED") return;
     hasFetched.current = true;
     void fetchSpans();
-  }, [fetchSpans]);
-  (0, import_react6.useEffect)(() => {
+  }, [fetchSpans, status]);
+  (0, import_react7.useEffect)(() => {
     if (!hasFetched.current) return;
     void fetchSpans();
   }, [fetchSpans]);
   const navigate = (0, import_react_router_dom.useNavigate)();
   const { resolveLink } = useAppInspector();
-  const navigateToSpan = (0, import_react6.useCallback)((span) => {
+  const navigateToSpan = (0, import_react7.useCallback)((span) => {
     const url = resolveLink({ to: "trace-graph", traceId: span.trace_id });
     navigate(`${url}?spanId=${span.span_id}`);
   }, [navigate, resolveLink]);
-  const clearSpans = (0, import_react6.useCallback)(async () => {
+  const clearSpans = (0, import_react7.useCallback)(async () => {
     setLoading(true);
     try {
       await api.deleteSpans();
@@ -3050,8 +3393,12 @@ var SpansListPage = () => {
       setLoading(false);
     }
   }, [api, fetchSpans]);
-  return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
-    import_material6.Box,
+  const handleRetry = (0, import_react7.useCallback)(() => {
+    void checkStatus();
+  }, [checkStatus]);
+  const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
+  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+    import_material7.Box,
     {
       "data-testid": "spans-list-page",
       sx: {
@@ -3061,8 +3408,8 @@ var SpansListPage = () => {
         height: "100vh",
         width: "100%"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
-        import_material6.Box,
+      children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+        import_material7.Box,
         {
           sx: {
             display: "flex",
@@ -3071,7 +3418,14 @@ var SpansListPage = () => {
             maxWidth: MAX_WIDTH,
             width: "100%"
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+          children: shouldShowStatusMessage ? /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+            StatusMessage,
+            {
+              error: statusError,
+              onRetry: handleRetry,
+              status
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
             SpansList,
             {
               filterWriteOperations,
@@ -3101,22 +3455,22 @@ var SpansListPage = () => {
 };
 
 // src/pages/trace-graph.tsx
-var import_material13 = require("@mui/material");
+var import_material14 = require("@mui/material");
 var import_styles = require("@mui/material/styles");
-var import_react14 = require("@xyflow/react");
-var import_react15 = require("react");
+var import_react15 = require("@xyflow/react");
+var import_react16 = require("react");
 var import_react_router_dom2 = require("react-router-dom");
 
 // src/components/event-details/event-details.tsx
-var import_material9 = require("@mui/material");
+var import_material10 = require("@mui/material");
 
 // src/components/event-details/event-details-header.tsx
 var import_icons_material2 = require("@mui/icons-material");
-var import_material7 = require("@mui/material");
-var import_jsx_runtime128 = require("react/jsx-runtime");
+var import_material8 = require("@mui/material");
+var import_jsx_runtime129 = require("react/jsx-runtime");
 var EventDetailsHeader = ({ event, onClose }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
-    import_material7.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
+    import_material8.Box,
     {
       sx: {
         alignItems: "center",
@@ -3127,16 +3481,16 @@ var EventDetailsHeader = ({ event, onClose }) => {
         p: 2
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(import_material7.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material7.Typography, { sx: { fontWeight: 600 }, variant: "h6", children: "Event Details" }),
-          /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(import_material7.Typography, { color: "text.secondary", variant: "body2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(import_material8.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_material8.Typography, { sx: { fontWeight: 600 }, variant: "h6", children: "Event Details" }),
+          /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(import_material8.Typography, { color: "text.secondary", variant: "body2", children: [
             event.service_name,
             " ",
             "-",
             event.operation_name
           ] })
         ] }),
-        onClose && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material7.IconButton, { onClick: onClose, size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_icons_material2.Close, {}) })
+        onClose && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_material8.IconButton, { onClick: onClose, size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_icons_material2.Close, {}) })
       ]
     }
   );
@@ -3144,14 +3498,14 @@ var EventDetailsHeader = ({ event, onClose }) => {
 
 // src/components/event-details/toggle-section.tsx
 var import_icons_material3 = require("@mui/icons-material");
-var import_material8 = require("@mui/material");
-var import_react7 = require("react");
-var import_jsx_runtime129 = require("react/jsx-runtime");
+var import_material9 = require("@mui/material");
+var import_react8 = require("react");
+var import_jsx_runtime130 = require("react/jsx-runtime");
 var ToggleSection = ({ children, headline, initialOpen = true }) => {
-  const [isOpen, setIsOpen] = (0, import_react7.useState)(initialOpen);
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(import_material8.Box, { sx: { mt: 4 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
-      import_material8.Box,
+  const [isOpen, setIsOpen] = (0, import_react8.useState)(initialOpen);
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_material9.Box, { sx: { mt: 4 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+      import_material9.Box,
       {
         onClick: () => {
           setIsOpen(!isOpen);
@@ -3160,8 +3514,8 @@ var ToggleSection = ({ children, headline, initialOpen = true }) => {
           cursor: "pointer",
           mb: 1
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
-          import_material8.Box,
+        children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
+          import_material9.Box,
           {
             role: "button",
             sx: {
@@ -3170,85 +3524,85 @@ var ToggleSection = ({ children, headline, initialOpen = true }) => {
               gap: 1
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_material8.Typography, { sx: { fontWeight: 600 }, variant: "subtitle2", children: headline }),
-              isOpen ? /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_icons_material3.KeyboardArrowDown, { sx: { color: "text.secondary", height: 20, width: 20 } }) : /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_icons_material3.KeyboardArrowRight, { sx: { color: "text.secondary", height: 20, width: 20 } })
+              /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Typography, { sx: { fontWeight: 600 }, variant: "subtitle2", children: headline }),
+              isOpen ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_icons_material3.KeyboardArrowDown, { sx: { color: "text.secondary", height: 20, width: 20 } }) : /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_icons_material3.KeyboardArrowRight, { sx: { color: "text.secondary", height: 20, width: 20 } })
             ]
           }
         )
       }
     ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_material8.Box, { children })
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Box, { children })
   ] });
 };
 
 // src/components/event-details/event-details.tsx
-var import_jsx_runtime130 = require("react/jsx-runtime");
+var import_jsx_runtime131 = require("react/jsx-runtime");
 var EventDetails = ({ selectedEvent }) => {
   if (!selectedEvent) {
-    return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Box, { sx: { p: 3, textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Typography, { color: "text.secondary", variant: "body2", children: "Select an event to view details" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Box, { sx: { p: 3, textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Typography, { color: "text.secondary", variant: "body2", children: "Select an event to view details" }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_material9.Box, { "data-testid": "event-details", sx: { display: "flex", flexDirection: "column", height: "100%" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(EventDetailsHeader, { event: selectedEvent }),
-    /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Box, { sx: { flexGrow: 1, overflow: "auto", p: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_material9.Stack, { spacing: 2, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(ToggleSection, { headline: "Basic Information", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_material9.Stack, { spacing: 1, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_material9.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Typography, { color: "text.secondary", variant: "caption", children: "Span ID" }),
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Typography, { variant: "body2", children: selectedEvent.span_id })
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_material10.Box, { "data-testid": "event-details", sx: { display: "flex", flexDirection: "column", height: "100%" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(EventDetailsHeader, { event: selectedEvent }),
+    /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Box, { sx: { flexGrow: 1, overflow: "auto", p: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_material10.Stack, { spacing: 2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ToggleSection, { headline: "Basic Information", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_material10.Stack, { spacing: 1, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_material10.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Typography, { color: "text.secondary", variant: "caption", children: "Span ID" }),
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Typography, { variant: "body2", children: selectedEvent.span_id })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_material9.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Typography, { color: "text.secondary", variant: "caption", children: "Trace ID" }),
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Typography, { sx: { fontFamily: "monospace", fontSize: "0.85rem" }, variant: "body2", children: selectedEvent.trace_id })
+        /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_material10.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Typography, { color: "text.secondary", variant: "caption", children: "Trace ID" }),
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Typography, { sx: { fontFamily: "monospace", fontSize: "0.85rem" }, variant: "body2", children: selectedEvent.trace_id })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_material9.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Typography, { color: "text.secondary", variant: "caption", children: "Operation" }),
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Typography, { variant: "body2", children: selectedEvent.operation_name })
+        /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_material10.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Typography, { color: "text.secondary", variant: "caption", children: "Operation" }),
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Typography, { variant: "body2", children: selectedEvent.operation_name })
         ] })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Divider, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(ToggleSection, { headline: "Service Information", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_material9.Stack, { spacing: 1, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_material9.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Typography, { color: "text.secondary", variant: "caption", children: "Service" }),
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Typography, { variant: "body2", children: selectedEvent.service_name })
+      /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Divider, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ToggleSection, { headline: "Service Information", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_material10.Stack, { spacing: 1, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_material10.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Typography, { color: "text.secondary", variant: "caption", children: "Service" }),
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Typography, { variant: "body2", children: selectedEvent.service_name })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_material9.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Typography, { color: "text.secondary", variant: "caption", children: "Resource" }),
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Typography, { variant: "body2", children: selectedEvent.resource_name })
+        /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_material10.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Typography, { color: "text.secondary", variant: "caption", children: "Resource" }),
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Typography, { variant: "body2", children: selectedEvent.resource_name })
         ] }),
-        selectedEvent.region && /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_material9.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Typography, { color: "text.secondary", variant: "caption", children: "Region" }),
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Typography, { variant: "body2", children: selectedEvent.region })
+        selectedEvent.region && /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_material10.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Typography, { color: "text.secondary", variant: "caption", children: "Region" }),
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Typography, { variant: "body2", children: selectedEvent.region })
         ] })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Divider, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(ToggleSection, { headline: "Timing", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_material9.Stack, { spacing: 1, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_material9.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Typography, { color: "text.secondary", variant: "caption", children: "Start Time" }),
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Typography, { variant: "body2", children: unixNanoToDate(selectedEvent.start_time_unix_nano)?.toISOString() })
+      /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Divider, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ToggleSection, { headline: "Timing", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_material10.Stack, { spacing: 1, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_material10.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Typography, { color: "text.secondary", variant: "caption", children: "Start Time" }),
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Typography, { variant: "body2", children: unixNanoToDate(selectedEvent.start_time_unix_nano)?.toISOString() })
         ] }),
-        selectedEvent.end_time_unix_nano && /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_material9.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Typography, { color: "text.secondary", variant: "caption", children: "Duration" }),
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_material9.Typography, { variant: "body2", children: [
+        selectedEvent.end_time_unix_nano && /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_material10.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Typography, { color: "text.secondary", variant: "caption", children: "Duration" }),
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_material10.Typography, { variant: "body2", children: [
             ((BigInt(selectedEvent.end_time_unix_nano) - BigInt(selectedEvent.start_time_unix_nano)) / BigInt("1000000")).toString(),
             " ",
             "ms"
           ] })
         ] })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Divider, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(ToggleSection, { headline: "Status", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_material9.Stack, { direction: "row", spacing: 1, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
-          import_material9.Chip,
+      /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Divider, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ToggleSection, { headline: "Status", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_material10.Stack, { direction: "row", spacing: 1, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+          import_material10.Chip,
           {
             color: selectedEvent.status_code === 0 ? "success" : "error",
             label: selectedEvent.status_code === 0 ? "Success" : "Error",
             size: "small"
           }
         ),
-        selectedEvent.status_message && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Typography, { variant: "body2", children: selectedEvent.status_message })
+        selectedEvent.status_message && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Typography, { variant: "body2", children: selectedEvent.status_message })
       ] }) }),
-      selectedEvent.attributes && Object.keys(selectedEvent.attributes).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_jsx_runtime130.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Divider, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(ToggleSection, { headline: "Attributes", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Box, { sx: { backgroundColor: "#f5f5f5", borderRadius: 1, p: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("pre", { style: { fontSize: "0.85rem", margin: 0, overflow: "auto" }, children: JSON.stringify(selectedEvent.attributes, void 0, 2) }) }) })
+      selectedEvent.attributes && Object.keys(selectedEvent.attributes).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_jsx_runtime131.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Divider, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ToggleSection, { headline: "Attributes", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Box, { sx: { backgroundColor: "#f5f5f5", borderRadius: 1, p: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("pre", { style: { fontSize: "0.85rem", margin: 0, overflow: "auto" }, children: JSON.stringify(selectedEvent.attributes, void 0, 2) }) }) })
       ] })
     ] }) })
   ] });
@@ -3256,36 +3610,36 @@ var EventDetails = ({ selectedEvent }) => {
 
 // src/components/trace-graph/trace-graph.tsx
 var import_base = require("@xyflow/react/dist/base.css");
-var import_material12 = require("@mui/material");
-var import_react12 = require("@xyflow/react");
-var import_react13 = require("react");
+var import_material13 = require("@mui/material");
+var import_react13 = require("@xyflow/react");
+var import_react14 = require("react");
 
 // src/components/trace-graph/service-node.tsx
-var import_material11 = require("@mui/material");
+var import_material12 = require("@mui/material");
 var import_style = require("@xyflow/react/dist/style.css");
-var import_react9 = require("@xyflow/react");
-var import_react10 = require("react");
+var import_react10 = require("@xyflow/react");
+var import_react11 = require("react");
 
 // src/components/trace-graph/problem-indicator.tsx
 var import_icons_material4 = require("@mui/icons-material");
-var import_material10 = require("@mui/material");
-var import_react8 = require("react");
-var import_jsx_runtime131 = require("react/jsx-runtime");
+var import_material11 = require("@mui/material");
+var import_react9 = require("react");
+var import_jsx_runtime132 = require("react/jsx-runtime");
 var ProblemIndicator = ({ error }) => {
-  const icon = (0, import_react8.useMemo)(() => {
+  const icon = (0, import_react9.useMemo)(() => {
     switch (error.level) {
       case "error": {
-        return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_icons_material4.Error, { sx: { color: "#d32f2f", fontSize: "14px" } });
+        return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_icons_material4.Error, { sx: { color: "#d32f2f", fontSize: "14px" } });
       }
       case "warning": {
-        return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_icons_material4.Warning, { sx: { color: "#ff9800", fontSize: "14px" } });
+        return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_icons_material4.Warning, { sx: { color: "#ff9800", fontSize: "14px" } });
       }
       default: {
-        return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_icons_material4.Info, { sx: { color: "#2196f3", fontSize: "14px" } });
+        return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_icons_material4.Info, { sx: { color: "#2196f3", fontSize: "14px" } });
       }
     }
   }, [error.level]);
-  const color = (0, import_react8.useMemo)(() => {
+  const color = (0, import_react9.useMemo)(() => {
     switch (error.level) {
       case "error": {
         return "#d32f2f";
@@ -3298,8 +3652,8 @@ var ProblemIndicator = ({ error }) => {
       }
     }
   }, [error.level]);
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Tooltip, { arrow: true, title: error.message ?? "Issue detected", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
-    import_material10.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material11.Tooltip, { arrow: true, title: error.message ?? "Issue detected", children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+    import_material11.Box,
     {
       sx: {
         alignItems: "center",
@@ -3318,17 +3672,17 @@ var ProblemIndicator = ({ error }) => {
 };
 
 // src/components/trace-graph/service-node.tsx
-var import_jsx_runtime132 = require("react/jsx-runtime");
+var import_jsx_runtime133 = require("react/jsx-runtime");
 var handleStyle = {
   backgroundColor: "white",
   borderColor: "lightgray",
   opacity: 0
 };
-var ServiceNode = (0, import_react10.memo)(function ServiceNode2({ data, selected }) {
-  const handleClick = (0, import_react10.useCallback)(() => {
+var ServiceNode = (0, import_react11.memo)(function ServiceNode2({ data, selected }) {
+  const handleClick = (0, import_react11.useCallback)(() => {
     data.onEventSelect(data.event);
   }, [data]);
-  const handleKeyPress = (0, import_react10.useCallback)(
+  const handleKeyPress = (0, import_react11.useCallback)(
     (event) => {
       if (event.key === "Enter" || event.key === " ") {
         handleClick();
@@ -3337,9 +3691,9 @@ var ServiceNode = (0, import_react10.memo)(function ServiceNode2({ data, selecte
     [handleClick]
   );
   const hasErrors = (data.event.errors && data.event.errors.length > 0) ?? false;
-  return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(import_material11.Box, { sx: { maxWidth: 200 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
-      import_material11.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_material12.Box, { sx: { maxWidth: 200 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
+      import_material12.Box,
       {
         onClick: handleClick,
         onKeyPress: handleKeyPress,
@@ -3361,9 +3715,9 @@ var ServiceNode = (0, import_react10.memo)(function ServiceNode2({ data, selecte
         },
         tabIndex: 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_react9.Handle, { position: import_react9.Position.Left, style: handleStyle, type: "target" }),
-          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_react9.Handle, { position: import_react9.Position.Right, style: handleStyle, type: "source" }),
-          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_react10.Handle, { position: import_react10.Position.Left, style: handleStyle, type: "target" }),
+          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_react10.Handle, { position: import_react10.Position.Right, style: handleStyle, type: "source" }),
+          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
             ServiceCell,
             {
               borderColor: selected ? "black" : "lightgray",
@@ -3377,8 +3731,8 @@ var ServiceNode = (0, import_react10.memo)(function ServiceNode2({ data, selecte
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
-      import_material11.Stack,
+    /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
+      import_material12.Stack,
       {
         alignItems: "center",
         direction: "row",
@@ -3388,8 +3742,8 @@ var ServiceNode = (0, import_react10.memo)(function ServiceNode2({ data, selecte
           mt: 0.5
         },
         children: [
-          hasErrors && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
-            import_material11.Stack,
+          hasErrors && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+            import_material12.Stack,
             {
               direction: "row",
               spacing: 0.5,
@@ -3397,11 +3751,11 @@ var ServiceNode = (0, import_react10.memo)(function ServiceNode2({ data, selecte
                 flexWrap: "wrap",
                 gap: "2px"
               },
-              children: data.event.errors?.map((error) => /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(ProblemIndicator, { error }, error.span_id))
+              children: data.event.errors?.map((error) => /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(ProblemIndicator, { error }, error.span_id))
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
-            import_material11.Typography,
+          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+            import_material12.Typography,
             {
               sx: {
                 fontSize: "0.9rem",
@@ -3423,7 +3777,7 @@ var ServiceNode = (0, import_react10.memo)(function ServiceNode2({ data, selecte
 
 // src/components/trace-graph/utils.ts
 var import_dagre = __toESM(require("@dagrejs/dagre"), 1);
-var import_react11 = require("@xyflow/react");
+var import_react12 = require("@xyflow/react");
 var generateNodesAndEdges = (event, onEventSelect, parentId) => {
   const nodes = [];
   const edges = [];
@@ -3440,8 +3794,8 @@ var generateNodesAndEdges = (event, onEventSelect, parentId) => {
     id: event.span_id,
     position: { x: 0, y: 0 },
     // Will be set by layout
-    sourcePosition: import_react11.Position.Right,
-    targetPosition: import_react11.Position.Left,
+    sourcePosition: import_react12.Position.Right,
+    targetPosition: import_react12.Position.Left,
     type: "service"
   });
   if (parentId) {
@@ -3451,7 +3805,7 @@ var generateNodesAndEdges = (event, onEventSelect, parentId) => {
       markerEnd: {
         color: "lightgray",
         height: 16,
-        type: import_react11.MarkerType.Arrow,
+        type: import_react12.MarkerType.Arrow,
         width: 16
       },
       source: parentId,
@@ -3514,7 +3868,7 @@ var calculateCenterX = (focusNodeX, viewPortPixelWidth, minX, maxX) => {
 };
 
 // src/components/trace-graph/trace-graph.tsx
-var import_jsx_runtime133 = require("react/jsx-runtime");
+var import_jsx_runtime134 = require("react/jsx-runtime");
 var nodeTypes = {
   service: ServiceNode
 };
@@ -3524,15 +3878,15 @@ var TraceGraph = ({
   traceId,
   viewPortPixelWidth
 }) => {
-  const [nodes, setNodes] = (0, import_react13.useState)([]);
-  const [edges, setEdges] = (0, import_react13.useState)([]);
-  const [isLoading, setIsLoading] = (0, import_react13.useState)(true);
-  const [initialViewSet, setInitialViewSet] = (0, import_react13.useState)(false);
-  const { fitView, setCenter } = (0, import_react12.useReactFlow)();
-  const store = (0, import_react12.useStoreApi)();
+  const [nodes, setNodes] = (0, import_react14.useState)([]);
+  const [edges, setEdges] = (0, import_react14.useState)([]);
+  const [isLoading, setIsLoading] = (0, import_react14.useState)(true);
+  const [initialViewSet, setInitialViewSet] = (0, import_react14.useState)(false);
+  const { fitView, setCenter } = (0, import_react13.useReactFlow)();
+  const store = (0, import_react13.useStoreApi)();
   const api = useAppInspectorApi();
-  const [fetchError, setFetchError] = (0, import_react13.useState)();
-  const updateSelectedNode = (0, import_react13.useCallback)(
+  const [fetchError, setFetchError] = (0, import_react14.useState)();
+  const updateSelectedNode = (0, import_react14.useCallback)(
     (nodeId) => {
       const { addSelectedNodes } = store.getState();
       if (nodeId) {
@@ -3544,7 +3898,7 @@ var TraceGraph = ({
     },
     [nodes, store]
   );
-  const fetchTrace = (0, import_react13.useCallback)(async () => {
+  const fetchTrace = (0, import_react14.useCallback)(async () => {
     setIsLoading(true);
     try {
       const response = await api.getSpans({ trace_id: traceId });
@@ -3587,13 +3941,13 @@ var TraceGraph = ({
       setIsLoading(false);
     }
   }, [api, traceId, onEventSelect]);
-  const fetchTraceSync = (0, import_react13.useCallback)(() => {
+  const fetchTraceSync = (0, import_react14.useCallback)(() => {
     void fetchTrace();
   }, [fetchTrace]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     fetchTraceSync();
   }, [fetchTraceSync]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     const shouldSetInitialView = !isLoading && nodes.length > 0 && !initialViewSet;
     if (shouldSetInitialView) {
       if (initialFocusEventId) {
@@ -3613,20 +3967,20 @@ var TraceGraph = ({
       setInitialViewSet(true);
     }
   }, [isLoading, nodes, initialFocusEventId, viewPortPixelWidth, setCenter, fitView, onEventSelect, initialViewSet]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (initialFocusEventId) {
       updateSelectedNode(initialFocusEventId);
     }
   }, [initialFocusEventId, updateSelectedNode]);
-  const onNodeClick = (0, import_react13.useCallback)((_event, node) => {
+  const onNodeClick = (0, import_react14.useCallback)((_event, node) => {
     onEventSelect(node.data.event);
     updateSelectedNode(node.id);
   }, [onEventSelect, updateSelectedNode]);
-  return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_jsx_runtime133.Fragment, { children: [
-    fetchError && /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
-      import_material12.Alert,
+  return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_jsx_runtime134.Fragment, { children: [
+    fetchError && /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
+      import_material13.Alert,
       {
-        action: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material12.Button, { onClick: fetchTraceSync, children: "Retry" }),
+        action: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material13.Button, { onClick: fetchTraceSync, children: "Retry" }),
         severity: "error",
         children: [
           "Unexpected error:",
@@ -3635,8 +3989,8 @@ var TraceGraph = ({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
-      import_react12.ReactFlow,
+    /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
+      import_react13.ReactFlow,
       {
         "data-testid": "trace-graph",
         defaultViewport: { x: 0, y: 0, zoom: 1 },
@@ -3649,8 +4003,8 @@ var TraceGraph = ({
         onNodeClick,
         selectNodesOnDrag: false,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_react12.Controls, { showInteractive: false }),
-          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_react12.Background, {})
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_react13.Controls, { showInteractive: false }),
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_react13.Background, {})
         ]
       }
     )
@@ -3658,7 +4012,7 @@ var TraceGraph = ({
 };
 
 // src/pages/trace-graph.tsx
-var import_jsx_runtime134 = require("react/jsx-runtime");
+var import_jsx_runtime135 = require("react/jsx-runtime");
 var HEADER_HEIGHT = 56;
 var DRAWER_WIDTH = "35%";
 var Main = (0, import_styles.styled)("main", { shouldForwardProp: (property) => property !== "open" })(({ open, theme }) => ({
@@ -3676,7 +4030,7 @@ var Main = (0, import_styles.styled)("main", { shouldForwardProp: (property) =>
     })
   }
 }));
-var StyledDrawer = (0, import_styles.styled)(import_material13.Drawer)(() => ({
+var StyledDrawer = (0, import_styles.styled)(import_material14.Drawer)(() => ({
   "& .MuiDrawer-paper": {
     backgroundColor: "#ffffff",
     bottom: 0,
@@ -3694,10 +4048,11 @@ var TraceGraphPage = () => {
   const { traceId } = (0, import_react_router_dom2.useParams)();
   const [searchParameters] = (0, import_react_router_dom2.useSearchParams)();
   const spanId = searchParameters.get("spanId");
-  const [open, setOpen] = (0, import_react15.useState)(true);
-  const [selectedEvent, setSelectedEvent] = (0, import_react15.useState)();
-  const [viewPortPixelWidth, setViewPortPixelWidth] = (0, import_react15.useState)(0);
-  const calculateDrawerWidth = (0, import_react15.useCallback)(() => {
+  const [open, setOpen] = (0, import_react16.useState)(true);
+  const [selectedEvent, setSelectedEvent] = (0, import_react16.useState)();
+  const [viewPortPixelWidth, setViewPortPixelWidth] = (0, import_react16.useState)(0);
+  const { checkStatus, error: statusError, status } = useStatus();
+  const calculateDrawerWidth = (0, import_react16.useCallback)(() => {
     const percentageMatch = /(\d+)%/.exec(DRAWER_WIDTH);
     if (percentageMatch && open) {
       const percentage = Number.parseInt(percentageMatch[1], 10);
@@ -3705,7 +4060,7 @@ var TraceGraphPage = () => {
     }
     return 0;
   }, [open]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     const updateViewportWidth = () => {
       const totalWidth = window.innerWidth;
       const drawerPixelWidth = open ? calculateDrawerWidth() : 0;
@@ -3719,12 +4074,16 @@ var TraceGraphPage = () => {
       clearTimeout(timeoutId);
     };
   }, [open, calculateDrawerWidth]);
-  const handleEventSelect = (0, import_react15.useCallback)((event) => {
+  const handleEventSelect = (0, import_react16.useCallback)((event) => {
     setSelectedEvent(event);
     setOpen(true);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
-    import_material13.Box,
+  const handleRetry = (0, import_react16.useCallback)(() => {
+    void checkStatus();
+  }, [checkStatus]);
+  const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
+  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+    import_material14.Box,
     {
       "data-testid": "trace-graph-page",
       sx: {
@@ -3734,8 +4093,8 @@ var TraceGraphPage = () => {
         height: "100vh",
         overflow: "hidden"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
-        import_material13.Paper,
+      children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+        import_material14.Paper,
         {
           sx: {
             display: "flex",
@@ -3744,15 +4103,22 @@ var TraceGraphPage = () => {
             position: "relative",
             width: "100%"
           },
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Main, { open, children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
-              import_material13.Box,
+          children: shouldShowStatusMessage ? /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+            StatusMessage,
+            {
+              error: statusError,
+              onRetry: handleRetry,
+              status
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_jsx_runtime135.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Main, { open, children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+              import_material14.Box,
               {
                 sx: {
                   height: "100%",
                   overflow: "auto"
                 },
-                children: traceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_react14.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+                children: traceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_react15.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
                   TraceGraph,
                   {
                     initialFocusEventId: spanId,
@@ -3763,8 +4129,8 @@ var TraceGraphPage = () => {
                 ) })
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(EventDetails, { selectedEvent }) })
-          ]
+            /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(EventDetails, { selectedEvent }) })
+          ] })
         }
       )
     }