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

package/dist/index.js

@@ -1,6 +1,6 @@
 // src/pages/spans-list-page.tsx
-import { Box as Box5 } from "@mui/material";
-import { useCallback as useCallback3, useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
+import { Box as Box6 } from "@mui/material";
+import { useCallback as useCallback4, useEffect as useEffect3, useRef as useRef3, useState as useState4 } from "react";
 import { useNavigate } from "react-router-dom";
 
 // src/api/use-api.tsx
@@ -108,7 +108,7 @@ function unixNanoToDate(unixNanoString) {
 
 // src/components/cells/responsive-timestamp-cell.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
-var ResponsiveTimestampCell = ({ value }) => {
+var ResponsiveTimestampCell = ({ locale, value }) => {
   const [columnWidth, setColumnWidth] = useState(0);
   const cellReference = useRef(null);
   useEffect(() => {
@@ -134,35 +134,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__ */ jsx2("span", { children: "N/A" });
   return /* @__PURE__ */ jsx2("div", { ref: cellReference, style: { width: "100%" }, children: formattedTime });
 };
@@ -2839,24 +2845,298 @@ var SpansList = (props) => {
   ] });
 };
 
-// src/context.tsx
-import { createContext as createContext2, useContext as useContext2 } from "react";
-import { useCallback as useCallback2, useMemo as useMemo3 } from "react";
+// src/components/status-message/status-message.tsx
+import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+import { Alert as Alert2, AlertTitle, Box as Box5, Button as Button3, Link, Typography as Typography3 } from "@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
+import { jsx as jsx126, jsxs as jsxs122 } from "react/jsx-runtime";
+var StatusMessage = ({
+  error,
+  onRetry,
+  status
+}) => {
+  if (error instanceof AppInspectorNotFoundError) {
+    return /* @__PURE__ */ jsx126(
+      Box5,
+      {
+        sx: {
+          alignItems: "center",
+          display: "flex",
+          flexDirection: "column",
+          gap: 2,
+          justifyContent: "center",
+          p: 4
+        },
+        children: /* @__PURE__ */ jsxs122(
+          Alert2,
+          {
+            icon: /* @__PURE__ */ jsx126(ErrorOutlineIcon, { fontSize: "large" }),
+            severity: "error",
+            sx: { maxWidth: 600, width: "100%" },
+            children: [
+              /* @__PURE__ */ jsx126(AlertTitle, { sx: { fontWeight: "bold" }, children: "App Inspector Not Available" }),
+              /* @__PURE__ */ jsx126(Typography3, { sx: { mb: 2 }, variant: "body2", children: "The App Inspector extension is not licensed or not enabled in LocalStack." }),
+              /* @__PURE__ */ jsx126(Typography3, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ jsx126("strong", { children: "To enable App Inspector:" }) }),
+              /* @__PURE__ */ jsx126(Typography3, { sx: { mb: 1 }, variant: "body2", children: "Set the environment variable and restart LocalStack:" }),
+              /* @__PURE__ */ jsx126(
+                Box5,
+                {
+                  component: "pre",
+                  sx: {
+                    backgroundColor: "rgba(0, 0, 0, 0.05)",
+                    borderRadius: 1,
+                    fontSize: "0.875rem",
+                    p: 1
+                  },
+                  children: "APPINSPECTOR=1"
+                }
+              ),
+              /* @__PURE__ */ jsxs122(Typography3, { sx: { fontStyle: "italic", mb: 1, mt: 2 }, variant: "body2", children: [
+                "Runtime changes can be made via endpoint",
+                " ",
+                /* @__PURE__ */ jsxs122("code", { children: [
+                  APPINSPECTOR_API_PREFIX,
+                  "/status"
+                ] }),
+                ". For persistent default state across restarts, adjust the",
+                /* @__PURE__ */ jsx126("code", { children: "APPINSPECTOR" }),
+                " ",
+                "environment variable."
+              ] }),
+              /* @__PURE__ */ jsx126(Typography3, { sx: { mb: 1, mt: 2 }, variant: "body2", children: /* @__PURE__ */ jsx126("strong", { children: "For more information:" }) }),
+              /* @__PURE__ */ jsx126(
+                Link,
+                {
+                  href: "https://docs.localstack.cloud/user-guide/tools/application-inspector/",
+                  rel: "noopener noreferrer",
+                  target: "_blank",
+                  children: "App Inspector Documentation"
+                }
+              ),
+              onRetry && /* @__PURE__ */ jsx126(Box5, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ jsx126(
+                Button3,
+                {
+                  "aria-label": "Check App Inspector status again",
+                  onClick: onRetry,
+                  variant: "outlined",
+                  children: "Check Again"
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    );
+  }
+  if (error instanceof ConnectionError) {
+    return /* @__PURE__ */ jsx126(
+      Box5,
+      {
+        sx: {
+          alignItems: "center",
+          display: "flex",
+          flexDirection: "column",
+          gap: 2,
+          justifyContent: "center",
+          p: 4
+        },
+        children: /* @__PURE__ */ jsxs122(
+          Alert2,
+          {
+            icon: /* @__PURE__ */ jsx126(ErrorOutlineIcon, { fontSize: "large" }),
+            severity: "error",
+            sx: { maxWidth: 600, width: "100%" },
+            children: [
+              /* @__PURE__ */ jsx126(AlertTitle, { sx: { fontWeight: "bold" }, children: "Connection Error" }),
+              /* @__PURE__ */ jsx126(Typography3, { sx: { mb: 2 }, variant: "body2", children: "Failed to connect to LocalStack. Please ensure LocalStack is running and accessible." }),
+              /* @__PURE__ */ jsx126(Typography3, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ jsx126("strong", { children: "To start LocalStack:" }) }),
+              /* @__PURE__ */ jsx126(
+                Box5,
+                {
+                  component: "pre",
+                  sx: {
+                    backgroundColor: "rgba(0, 0, 0, 0.05)",
+                    borderRadius: 1,
+                    fontSize: "0.875rem",
+                    p: 1
+                  },
+                  children: "localstack start"
+                }
+              ),
+              onRetry && /* @__PURE__ */ jsx126(Box5, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ jsx126(
+                Button3,
+                {
+                  "aria-label": "Retry connection to LocalStack",
+                  onClick: onRetry,
+                  variant: "outlined",
+                  children: "Retry Connection"
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    );
+  }
+  if (status?.status === "DISABLED") {
+    return /* @__PURE__ */ jsx126(
+      Box5,
+      {
+        sx: {
+          alignItems: "center",
+          display: "flex",
+          flexDirection: "column",
+          gap: 2,
+          justifyContent: "center",
+          p: 4
+        },
+        children: /* @__PURE__ */ jsxs122(
+          Alert2,
+          {
+            icon: /* @__PURE__ */ jsx126(InfoOutlinedIcon, { fontSize: "large" }),
+            severity: "warning",
+            sx: { maxWidth: 600, width: "100%" },
+            children: [
+              /* @__PURE__ */ jsx126(AlertTitle, { sx: { fontWeight: "bold" }, children: "App Inspector is Disabled" }),
+              /* @__PURE__ */ jsx126(Typography3, { sx: { mb: 2 }, variant: "body2", children: "App Inspector is currently disabled. Please enable it to view traces and spans." }),
+              /* @__PURE__ */ jsx126(Typography3, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ jsx126("strong", { children: "To enable App Inspector at runtime:" }) }),
+              /* @__PURE__ */ jsx126(
+                Box5,
+                {
+                  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__ */ jsx126(Typography3, { sx: { mb: 1, mt: 2 }, variant: "body2", children: /* @__PURE__ */ jsx126("strong", { children: "To enable App Inspector persistently across restarts:" }) }),
+              /* @__PURE__ */ jsx126(Typography3, { sx: { mb: 1 }, variant: "body2", children: "Set the environment variable:" }),
+              /* @__PURE__ */ jsx126(
+                Box5,
+                {
+                  component: "pre",
+                  sx: {
+                    backgroundColor: "rgba(0, 0, 0, 0.05)",
+                    borderRadius: 1,
+                    fontSize: "0.875rem",
+                    p: 1
+                  },
+                  children: "APPINSPECTOR=1"
+                }
+              ),
+              Boolean(status.note) && /* @__PURE__ */ jsx126(Typography3, { sx: { display: "block", fontStyle: "italic", mt: 2 }, variant: "caption", children: status.note }),
+              onRetry && /* @__PURE__ */ jsx126(Box5, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ jsx126(
+                Button3,
+                {
+                  "aria-label": "Check if App Inspector is enabled",
+                  onClick: onRetry,
+                  variant: "outlined",
+                  children: "Check Status Again"
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    );
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx126(
+      Box5,
+      {
+        sx: {
+          alignItems: "center",
+          display: "flex",
+          flexDirection: "column",
+          gap: 2,
+          justifyContent: "center",
+          p: 4
+        },
+        children: /* @__PURE__ */ jsxs122(
+          Alert2,
+          {
+            icon: /* @__PURE__ */ jsx126(ErrorOutlineIcon, { fontSize: "large" }),
+            severity: "error",
+            sx: { maxWidth: 600, width: "100%" },
+            children: [
+              /* @__PURE__ */ jsx126(AlertTitle, { sx: { fontWeight: "bold" }, children: "Error" }),
+              /* @__PURE__ */ jsx126(Typography3, { sx: { mb: 2 }, variant: "body2", children: error.message }),
+              onRetry && /* @__PURE__ */ jsx126(Box5, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ jsx126(
+                Button3,
+                {
+                  "aria-label": "Retry operation",
+                  onClick: onRetry,
+                  variant: "outlined",
+                  children: "Retry"
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    );
+  }
+  return;
+};
+
+// src/context.tsx
+import { createContext as createContext2, useContext as useContext2 } from "react";
+import { useCallback as useCallback2, useMemo as useMemo3 } from "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) => {
@@ -2870,10 +3150,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;
     }
@@ -2913,12 +3206,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
-import { jsx as jsx126 } from "react/jsx-runtime";
+import { jsx as jsx127 } from "react/jsx-runtime";
 var AppInspectorContext = createContext2(void 0);
 var useAppInspector = () => {
   const context = useContext2(AppInspectorContext);
@@ -2931,7 +3230,7 @@ var AppInspectorContextProvider = (props) => {
   const api = useMemo3(() => {
     return false ? createApiClientMock() : createApiClient({ localstackEndpoint: props.localstackEndpoint });
   }, [props.localstackEndpoint]);
-  return /* @__PURE__ */ jsx126(ApiProvider, { api, children: /* @__PURE__ */ jsx126(
+  return /* @__PURE__ */ jsx127(ApiProvider, { api, children: /* @__PURE__ */ jsx127(
     AppInspectorContext.Provider,
     {
       value: {
@@ -2955,17 +3254,60 @@ var AppInspectorContextProvider = (props) => {
   ) });
 };
 
+// src/hooks/use-status.tsx
+import { useCallback as useCallback3, useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
+var useStatus = () => {
+  const api = useAppInspectorApi();
+  const [checking, setChecking] = useState3(true);
+  const [status, setStatus] = useState3();
+  const [error, setError] = useState3();
+  const hasFetchedReference = useRef2(false);
+  const abortControllerReference = useRef2(null);
+  const checkStatus = useCallback3(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]);
+  useEffect2(() => {
+    if (!hasFetchedReference.current) {
+      hasFetchedReference.current = true;
+      void checkStatus();
+    }
+  }, [checkStatus]);
+  return { checking, checkStatus, error, status };
+};
+
 // src/pages/spans-list-page.tsx
-import { jsx as jsx127 } from "react/jsx-runtime";
+import { jsx as jsx128 } from "react/jsx-runtime";
 var MAX_WIDTH = 1400;
 var SpansListPage = () => {
   const api = useAppInspectorApi();
-  const [spans, setSpans] = useState3();
-  const [loading, setLoading] = useState3(false);
-  const hasFetched = useRef2(false);
-  const [filterWriteOperations, setFilterWriteOperations] = useState3(true);
-  const [fetchError, setFetchError] = useState3();
-  const fetchSpans = useCallback3(async () => {
+  const [spans, setSpans] = useState4();
+  const [loading, setLoading] = useState4(false);
+  const hasFetched = useRef3(false);
+  const [filterWriteOperations, setFilterWriteOperations] = useState4(true);
+  const [fetchError, setFetchError] = useState4();
+  const { checkStatus, error: statusError, status } = useStatus();
+  const fetchSpans = useCallback4(async () => {
     setLoading(true);
     try {
       const response = await api.getSpans({
@@ -2981,25 +3323,26 @@ var SpansListPage = () => {
       setLoading(false);
     }
   }, [api, filterWriteOperations]);
-  const fetchSpansSync = useCallback3(() => {
+  const fetchSpansSync = useCallback4(() => {
     void fetchSpans();
   }, [fetchSpans]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (hasFetched.current) return;
+    if (status?.status !== "ENABLED") return;
     hasFetched.current = true;
     void fetchSpans();
-  }, [fetchSpans]);
-  useEffect2(() => {
+  }, [fetchSpans, status]);
+  useEffect3(() => {
     if (!hasFetched.current) return;
     void fetchSpans();
   }, [fetchSpans]);
   const navigate = useNavigate();
   const { resolveLink } = useAppInspector();
-  const navigateToSpan = useCallback3((span) => {
+  const navigateToSpan = useCallback4((span) => {
     const url = resolveLink({ to: "trace-graph", traceId: span.trace_id });
     navigate(`${url}?spanId=${span.span_id}`);
   }, [navigate, resolveLink]);
-  const clearSpans = useCallback3(async () => {
+  const clearSpans = useCallback4(async () => {
     setLoading(true);
     try {
       await api.deleteSpans();
@@ -3013,8 +3356,12 @@ var SpansListPage = () => {
       setLoading(false);
     }
   }, [api, fetchSpans]);
-  return /* @__PURE__ */ jsx127(
-    Box5,
+  const handleRetry = useCallback4(() => {
+    void checkStatus();
+  }, [checkStatus]);
+  const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
+  return /* @__PURE__ */ jsx128(
+    Box6,
     {
       "data-testid": "spans-list-page",
       sx: {
@@ -3024,8 +3371,8 @@ var SpansListPage = () => {
         height: "100vh",
         width: "100%"
       },
-      children: /* @__PURE__ */ jsx127(
-        Box5,
+      children: /* @__PURE__ */ jsx128(
+        Box6,
         {
           sx: {
             display: "flex",
@@ -3034,7 +3381,14 @@ var SpansListPage = () => {
             maxWidth: MAX_WIDTH,
             width: "100%"
           },
-          children: /* @__PURE__ */ jsx127(
+          children: shouldShowStatusMessage ? /* @__PURE__ */ jsx128(
+            StatusMessage,
+            {
+              error: statusError,
+              onRetry: handleRetry,
+              status
+            }
+          ) : /* @__PURE__ */ jsx128(
             SpansList,
             {
               filterWriteOperations,
@@ -3064,22 +3418,22 @@ var SpansListPage = () => {
 };
 
 // src/pages/trace-graph.tsx
-import { Box as Box11, Drawer, Paper as Paper2 } from "@mui/material";
+import { Box as Box12, Drawer, Paper as Paper2 } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { ReactFlowProvider } from "@xyflow/react";
-import { useCallback as useCallback6, useEffect as useEffect4, useState as useState6 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect5, useState as useState7 } from "react";
 import { useParams, useSearchParams } from "react-router-dom";
 
 // src/components/event-details/event-details.tsx
-import { Box as Box8, Chip, Divider, Stack, Typography as Typography5 } from "@mui/material";
+import { Box as Box9, Chip, Divider, Stack, Typography as Typography6 } from "@mui/material";
 
 // src/components/event-details/event-details-header.tsx
 import { Close } from "@mui/icons-material";
-import { Box as Box6, IconButton, Typography as Typography3 } from "@mui/material";
-import { jsx as jsx128, jsxs as jsxs122 } from "react/jsx-runtime";
+import { Box as Box7, IconButton, Typography as Typography4 } from "@mui/material";
+import { jsx as jsx129, jsxs as jsxs123 } from "react/jsx-runtime";
 var EventDetailsHeader = ({ event, onClose }) => {
-  return /* @__PURE__ */ jsxs122(
-    Box6,
+  return /* @__PURE__ */ jsxs123(
+    Box7,
     {
       sx: {
         alignItems: "center",
@@ -3090,16 +3444,16 @@ var EventDetailsHeader = ({ event, onClose }) => {
         p: 2
       },
       children: [
-        /* @__PURE__ */ jsxs122(Box6, { children: [
-          /* @__PURE__ */ jsx128(Typography3, { sx: { fontWeight: 600 }, variant: "h6", children: "Event Details" }),
-          /* @__PURE__ */ jsxs122(Typography3, { color: "text.secondary", variant: "body2", children: [
+        /* @__PURE__ */ jsxs123(Box7, { children: [
+          /* @__PURE__ */ jsx129(Typography4, { sx: { fontWeight: 600 }, variant: "h6", children: "Event Details" }),
+          /* @__PURE__ */ jsxs123(Typography4, { color: "text.secondary", variant: "body2", children: [
             event.service_name,
             " ",
             "-",
             event.operation_name
           ] })
         ] }),
-        onClose && /* @__PURE__ */ jsx128(IconButton, { onClick: onClose, size: "small", children: /* @__PURE__ */ jsx128(Close, {}) })
+        onClose && /* @__PURE__ */ jsx129(IconButton, { onClick: onClose, size: "small", children: /* @__PURE__ */ jsx129(Close, {}) })
       ]
     }
   );
@@ -3107,14 +3461,14 @@ var EventDetailsHeader = ({ event, onClose }) => {
 
 // src/components/event-details/toggle-section.tsx
 import { KeyboardArrowDown, KeyboardArrowRight } from "@mui/icons-material";
-import { Box as Box7, Typography as Typography4 } from "@mui/material";
-import { useState as useState4 } from "react";
-import { jsx as jsx129, jsxs as jsxs123 } from "react/jsx-runtime";
+import { Box as Box8, Typography as Typography5 } from "@mui/material";
+import { useState as useState5 } from "react";
+import { jsx as jsx130, jsxs as jsxs124 } from "react/jsx-runtime";
 var ToggleSection = ({ children, headline, initialOpen = true }) => {
-  const [isOpen, setIsOpen] = useState4(initialOpen);
-  return /* @__PURE__ */ jsxs123(Box7, { sx: { mt: 4 }, children: [
-    /* @__PURE__ */ jsx129(
-      Box7,
+  const [isOpen, setIsOpen] = useState5(initialOpen);
+  return /* @__PURE__ */ jsxs124(Box8, { sx: { mt: 4 }, children: [
+    /* @__PURE__ */ jsx130(
+      Box8,
       {
         onClick: () => {
           setIsOpen(!isOpen);
@@ -3123,8 +3477,8 @@ var ToggleSection = ({ children, headline, initialOpen = true }) => {
           cursor: "pointer",
           mb: 1
         },
-        children: /* @__PURE__ */ jsxs123(
-          Box7,
+        children: /* @__PURE__ */ jsxs124(
+          Box8,
           {
             role: "button",
             sx: {
@@ -3133,73 +3487,73 @@ var ToggleSection = ({ children, headline, initialOpen = true }) => {
               gap: 1
             },
             children: [
-              /* @__PURE__ */ jsx129(Typography4, { sx: { fontWeight: 600 }, variant: "subtitle2", children: headline }),
-              isOpen ? /* @__PURE__ */ jsx129(KeyboardArrowDown, { sx: { color: "text.secondary", height: 20, width: 20 } }) : /* @__PURE__ */ jsx129(KeyboardArrowRight, { sx: { color: "text.secondary", height: 20, width: 20 } })
+              /* @__PURE__ */ jsx130(Typography5, { sx: { fontWeight: 600 }, variant: "subtitle2", children: headline }),
+              isOpen ? /* @__PURE__ */ jsx130(KeyboardArrowDown, { sx: { color: "text.secondary", height: 20, width: 20 } }) : /* @__PURE__ */ jsx130(KeyboardArrowRight, { sx: { color: "text.secondary", height: 20, width: 20 } })
             ]
           }
         )
       }
     ),
-    isOpen && /* @__PURE__ */ jsx129(Box7, { children })
+    isOpen && /* @__PURE__ */ jsx130(Box8, { children })
   ] });
 };
 
 // src/components/event-details/event-details.tsx
-import { Fragment as Fragment2, jsx as jsx130, jsxs as jsxs124 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx131, jsxs as jsxs125 } from "react/jsx-runtime";
 var EventDetails = ({ selectedEvent }) => {
   if (!selectedEvent) {
-    return /* @__PURE__ */ jsx130(Box8, { sx: { p: 3, textAlign: "center" }, children: /* @__PURE__ */ jsx130(Typography5, { color: "text.secondary", variant: "body2", children: "Select an event to view details" }) });
+    return /* @__PURE__ */ jsx131(Box9, { sx: { p: 3, textAlign: "center" }, children: /* @__PURE__ */ jsx131(Typography6, { color: "text.secondary", variant: "body2", children: "Select an event to view details" }) });
   }
-  return /* @__PURE__ */ jsxs124(Box8, { "data-testid": "event-details", sx: { display: "flex", flexDirection: "column", height: "100%" }, children: [
-    /* @__PURE__ */ jsx130(EventDetailsHeader, { event: selectedEvent }),
-    /* @__PURE__ */ jsx130(Box8, { sx: { flexGrow: 1, overflow: "auto", p: 2 }, children: /* @__PURE__ */ jsxs124(Stack, { spacing: 2, children: [
-      /* @__PURE__ */ jsx130(ToggleSection, { headline: "Basic Information", children: /* @__PURE__ */ jsxs124(Stack, { spacing: 1, children: [
-        /* @__PURE__ */ jsxs124(Box8, { children: [
-          /* @__PURE__ */ jsx130(Typography5, { color: "text.secondary", variant: "caption", children: "Span ID" }),
-          /* @__PURE__ */ jsx130(Typography5, { variant: "body2", children: selectedEvent.span_id })
+  return /* @__PURE__ */ jsxs125(Box9, { "data-testid": "event-details", sx: { display: "flex", flexDirection: "column", height: "100%" }, children: [
+    /* @__PURE__ */ jsx131(EventDetailsHeader, { event: selectedEvent }),
+    /* @__PURE__ */ jsx131(Box9, { sx: { flexGrow: 1, overflow: "auto", p: 2 }, children: /* @__PURE__ */ jsxs125(Stack, { spacing: 2, children: [
+      /* @__PURE__ */ jsx131(ToggleSection, { headline: "Basic Information", children: /* @__PURE__ */ jsxs125(Stack, { spacing: 1, children: [
+        /* @__PURE__ */ jsxs125(Box9, { children: [
+          /* @__PURE__ */ jsx131(Typography6, { color: "text.secondary", variant: "caption", children: "Span ID" }),
+          /* @__PURE__ */ jsx131(Typography6, { variant: "body2", children: selectedEvent.span_id })
         ] }),
-        /* @__PURE__ */ jsxs124(Box8, { children: [
-          /* @__PURE__ */ jsx130(Typography5, { color: "text.secondary", variant: "caption", children: "Trace ID" }),
-          /* @__PURE__ */ jsx130(Typography5, { sx: { fontFamily: "monospace", fontSize: "0.85rem" }, variant: "body2", children: selectedEvent.trace_id })
+        /* @__PURE__ */ jsxs125(Box9, { children: [
+          /* @__PURE__ */ jsx131(Typography6, { color: "text.secondary", variant: "caption", children: "Trace ID" }),
+          /* @__PURE__ */ jsx131(Typography6, { sx: { fontFamily: "monospace", fontSize: "0.85rem" }, variant: "body2", children: selectedEvent.trace_id })
         ] }),
-        /* @__PURE__ */ jsxs124(Box8, { children: [
-          /* @__PURE__ */ jsx130(Typography5, { color: "text.secondary", variant: "caption", children: "Operation" }),
-          /* @__PURE__ */ jsx130(Typography5, { variant: "body2", children: selectedEvent.operation_name })
+        /* @__PURE__ */ jsxs125(Box9, { children: [
+          /* @__PURE__ */ jsx131(Typography6, { color: "text.secondary", variant: "caption", children: "Operation" }),
+          /* @__PURE__ */ jsx131(Typography6, { variant: "body2", children: selectedEvent.operation_name })
         ] })
       ] }) }),
-      /* @__PURE__ */ jsx130(Divider, {}),
-      /* @__PURE__ */ jsx130(ToggleSection, { headline: "Service Information", children: /* @__PURE__ */ jsxs124(Stack, { spacing: 1, children: [
-        /* @__PURE__ */ jsxs124(Box8, { children: [
-          /* @__PURE__ */ jsx130(Typography5, { color: "text.secondary", variant: "caption", children: "Service" }),
-          /* @__PURE__ */ jsx130(Typography5, { variant: "body2", children: selectedEvent.service_name })
+      /* @__PURE__ */ jsx131(Divider, {}),
+      /* @__PURE__ */ jsx131(ToggleSection, { headline: "Service Information", children: /* @__PURE__ */ jsxs125(Stack, { spacing: 1, children: [
+        /* @__PURE__ */ jsxs125(Box9, { children: [
+          /* @__PURE__ */ jsx131(Typography6, { color: "text.secondary", variant: "caption", children: "Service" }),
+          /* @__PURE__ */ jsx131(Typography6, { variant: "body2", children: selectedEvent.service_name })
         ] }),
-        /* @__PURE__ */ jsxs124(Box8, { children: [
-          /* @__PURE__ */ jsx130(Typography5, { color: "text.secondary", variant: "caption", children: "Resource" }),
-          /* @__PURE__ */ jsx130(Typography5, { variant: "body2", children: selectedEvent.resource_name })
+        /* @__PURE__ */ jsxs125(Box9, { children: [
+          /* @__PURE__ */ jsx131(Typography6, { color: "text.secondary", variant: "caption", children: "Resource" }),
+          /* @__PURE__ */ jsx131(Typography6, { variant: "body2", children: selectedEvent.resource_name })
         ] }),
-        selectedEvent.region && /* @__PURE__ */ jsxs124(Box8, { children: [
-          /* @__PURE__ */ jsx130(Typography5, { color: "text.secondary", variant: "caption", children: "Region" }),
-          /* @__PURE__ */ jsx130(Typography5, { variant: "body2", children: selectedEvent.region })
+        selectedEvent.region && /* @__PURE__ */ jsxs125(Box9, { children: [
+          /* @__PURE__ */ jsx131(Typography6, { color: "text.secondary", variant: "caption", children: "Region" }),
+          /* @__PURE__ */ jsx131(Typography6, { variant: "body2", children: selectedEvent.region })
         ] })
       ] }) }),
-      /* @__PURE__ */ jsx130(Divider, {}),
-      /* @__PURE__ */ jsx130(ToggleSection, { headline: "Timing", children: /* @__PURE__ */ jsxs124(Stack, { spacing: 1, children: [
-        /* @__PURE__ */ jsxs124(Box8, { children: [
-          /* @__PURE__ */ jsx130(Typography5, { color: "text.secondary", variant: "caption", children: "Start Time" }),
-          /* @__PURE__ */ jsx130(Typography5, { variant: "body2", children: unixNanoToDate(selectedEvent.start_time_unix_nano)?.toISOString() })
+      /* @__PURE__ */ jsx131(Divider, {}),
+      /* @__PURE__ */ jsx131(ToggleSection, { headline: "Timing", children: /* @__PURE__ */ jsxs125(Stack, { spacing: 1, children: [
+        /* @__PURE__ */ jsxs125(Box9, { children: [
+          /* @__PURE__ */ jsx131(Typography6, { color: "text.secondary", variant: "caption", children: "Start Time" }),
+          /* @__PURE__ */ jsx131(Typography6, { variant: "body2", children: unixNanoToDate(selectedEvent.start_time_unix_nano)?.toISOString() })
         ] }),
-        selectedEvent.end_time_unix_nano && /* @__PURE__ */ jsxs124(Box8, { children: [
-          /* @__PURE__ */ jsx130(Typography5, { color: "text.secondary", variant: "caption", children: "Duration" }),
-          /* @__PURE__ */ jsxs124(Typography5, { variant: "body2", children: [
+        selectedEvent.end_time_unix_nano && /* @__PURE__ */ jsxs125(Box9, { children: [
+          /* @__PURE__ */ jsx131(Typography6, { color: "text.secondary", variant: "caption", children: "Duration" }),
+          /* @__PURE__ */ jsxs125(Typography6, { variant: "body2", children: [
             ((BigInt(selectedEvent.end_time_unix_nano) - BigInt(selectedEvent.start_time_unix_nano)) / BigInt("1000000")).toString(),
             " ",
             "ms"
           ] })
         ] })
       ] }) }),
-      /* @__PURE__ */ jsx130(Divider, {}),
-      /* @__PURE__ */ jsx130(ToggleSection, { headline: "Status", children: /* @__PURE__ */ jsxs124(Stack, { direction: "row", spacing: 1, children: [
-        /* @__PURE__ */ jsx130(
+      /* @__PURE__ */ jsx131(Divider, {}),
+      /* @__PURE__ */ jsx131(ToggleSection, { headline: "Status", children: /* @__PURE__ */ jsxs125(Stack, { direction: "row", spacing: 1, children: [
+        /* @__PURE__ */ jsx131(
           Chip,
           {
             color: selectedEvent.status_code === 0 ? "success" : "error",
@@ -3207,11 +3561,11 @@ var EventDetails = ({ selectedEvent }) => {
             size: "small"
           }
         ),
-        selectedEvent.status_message && /* @__PURE__ */ jsx130(Typography5, { variant: "body2", children: selectedEvent.status_message })
+        selectedEvent.status_message && /* @__PURE__ */ jsx131(Typography6, { variant: "body2", children: selectedEvent.status_message })
       ] }) }),
-      selectedEvent.attributes && Object.keys(selectedEvent.attributes).length > 0 && /* @__PURE__ */ jsxs124(Fragment2, { children: [
-        /* @__PURE__ */ jsx130(Divider, {}),
-        /* @__PURE__ */ jsx130(ToggleSection, { headline: "Attributes", children: /* @__PURE__ */ jsx130(Box8, { sx: { backgroundColor: "#f5f5f5", borderRadius: 1, p: 1 }, children: /* @__PURE__ */ jsx130("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__ */ jsxs125(Fragment2, { children: [
+        /* @__PURE__ */ jsx131(Divider, {}),
+        /* @__PURE__ */ jsx131(ToggleSection, { headline: "Attributes", children: /* @__PURE__ */ jsx131(Box9, { sx: { backgroundColor: "#f5f5f5", borderRadius: 1, p: 1 }, children: /* @__PURE__ */ jsx131("pre", { style: { fontSize: "0.85rem", margin: 0, overflow: "auto" }, children: JSON.stringify(selectedEvent.attributes, void 0, 2) }) }) })
       ] })
     ] }) })
   ] });
@@ -3219,32 +3573,32 @@ var EventDetails = ({ selectedEvent }) => {
 
 // src/components/trace-graph/trace-graph.tsx
 import "@xyflow/react/dist/base.css";
-import { Alert as Alert2, Button as Button3 } from "@mui/material";
+import { Alert as Alert3, Button as Button4 } from "@mui/material";
 import { Background, Controls, ReactFlow, useReactFlow, useStoreApi } from "@xyflow/react";
-import { useCallback as useCallback5, useEffect as useEffect3, useState as useState5 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect4, useState as useState6 } from "react";
 
 // src/components/trace-graph/service-node.tsx
-import { Box as Box10, Stack as Stack2, Typography as Typography6 } from "@mui/material";
+import { Box as Box11, Stack as Stack2, Typography as Typography7 } from "@mui/material";
 import "@xyflow/react/dist/style.css";
 import { Handle, Position } from "@xyflow/react";
-import { memo, useCallback as useCallback4 } from "react";
+import { memo, useCallback as useCallback5 } from "react";
 
 // src/components/trace-graph/problem-indicator.tsx
 import { Error as ErrorIcon, Info, Warning } from "@mui/icons-material";
-import { Box as Box9, Tooltip as Tooltip2 } from "@mui/material";
+import { Box as Box10, Tooltip as Tooltip2 } from "@mui/material";
 import { useMemo as useMemo4 } from "react";
-import { jsx as jsx131 } from "react/jsx-runtime";
+import { jsx as jsx132 } from "react/jsx-runtime";
 var ProblemIndicator = ({ error }) => {
   const icon = useMemo4(() => {
     switch (error.level) {
       case "error": {
-        return /* @__PURE__ */ jsx131(ErrorIcon, { sx: { color: "#d32f2f", fontSize: "14px" } });
+        return /* @__PURE__ */ jsx132(ErrorIcon, { sx: { color: "#d32f2f", fontSize: "14px" } });
       }
       case "warning": {
-        return /* @__PURE__ */ jsx131(Warning, { sx: { color: "#ff9800", fontSize: "14px" } });
+        return /* @__PURE__ */ jsx132(Warning, { sx: { color: "#ff9800", fontSize: "14px" } });
       }
       default: {
-        return /* @__PURE__ */ jsx131(Info, { sx: { color: "#2196f3", fontSize: "14px" } });
+        return /* @__PURE__ */ jsx132(Info, { sx: { color: "#2196f3", fontSize: "14px" } });
       }
     }
   }, [error.level]);
@@ -3261,8 +3615,8 @@ var ProblemIndicator = ({ error }) => {
       }
     }
   }, [error.level]);
-  return /* @__PURE__ */ jsx131(Tooltip2, { arrow: true, title: error.message ?? "Issue detected", children: /* @__PURE__ */ jsx131(
-    Box9,
+  return /* @__PURE__ */ jsx132(Tooltip2, { arrow: true, title: error.message ?? "Issue detected", children: /* @__PURE__ */ jsx132(
+    Box10,
     {
       sx: {
         alignItems: "center",
@@ -3281,17 +3635,17 @@ var ProblemIndicator = ({ error }) => {
 };
 
 // src/components/trace-graph/service-node.tsx
-import { jsx as jsx132, jsxs as jsxs125 } from "react/jsx-runtime";
+import { jsx as jsx133, jsxs as jsxs126 } from "react/jsx-runtime";
 var handleStyle = {
   backgroundColor: "white",
   borderColor: "lightgray",
   opacity: 0
 };
 var ServiceNode = memo(function ServiceNode2({ data, selected }) {
-  const handleClick = useCallback4(() => {
+  const handleClick = useCallback5(() => {
     data.onEventSelect(data.event);
   }, [data]);
-  const handleKeyPress = useCallback4(
+  const handleKeyPress = useCallback5(
     (event) => {
       if (event.key === "Enter" || event.key === " ") {
         handleClick();
@@ -3300,9 +3654,9 @@ var ServiceNode = memo(function ServiceNode2({ data, selected }) {
     [handleClick]
   );
   const hasErrors = (data.event.errors && data.event.errors.length > 0) ?? false;
-  return /* @__PURE__ */ jsxs125(Box10, { sx: { maxWidth: 200 }, children: [
-    /* @__PURE__ */ jsxs125(
-      Box10,
+  return /* @__PURE__ */ jsxs126(Box11, { sx: { maxWidth: 200 }, children: [
+    /* @__PURE__ */ jsxs126(
+      Box11,
       {
         onClick: handleClick,
         onKeyPress: handleKeyPress,
@@ -3324,9 +3678,9 @@ var ServiceNode = memo(function ServiceNode2({ data, selected }) {
         },
         tabIndex: 0,
         children: [
-          /* @__PURE__ */ jsx132(Handle, { position: Position.Left, style: handleStyle, type: "target" }),
-          /* @__PURE__ */ jsx132(Handle, { position: Position.Right, style: handleStyle, type: "source" }),
-          /* @__PURE__ */ jsx132(
+          /* @__PURE__ */ jsx133(Handle, { position: Position.Left, style: handleStyle, type: "target" }),
+          /* @__PURE__ */ jsx133(Handle, { position: Position.Right, style: handleStyle, type: "source" }),
+          /* @__PURE__ */ jsx133(
             ServiceCell,
             {
               borderColor: selected ? "black" : "lightgray",
@@ -3340,7 +3694,7 @@ var ServiceNode = memo(function ServiceNode2({ data, selected }) {
         ]
       }
     ),
-    /* @__PURE__ */ jsxs125(
+    /* @__PURE__ */ jsxs126(
       Stack2,
       {
         alignItems: "center",
@@ -3351,7 +3705,7 @@ var ServiceNode = memo(function ServiceNode2({ data, selected }) {
           mt: 0.5
         },
         children: [
-          hasErrors && /* @__PURE__ */ jsx132(
+          hasErrors && /* @__PURE__ */ jsx133(
             Stack2,
             {
               direction: "row",
@@ -3360,11 +3714,11 @@ var ServiceNode = memo(function ServiceNode2({ data, selected }) {
                 flexWrap: "wrap",
                 gap: "2px"
               },
-              children: data.event.errors?.map((error) => /* @__PURE__ */ jsx132(ProblemIndicator, { error }, error.span_id))
+              children: data.event.errors?.map((error) => /* @__PURE__ */ jsx133(ProblemIndicator, { error }, error.span_id))
             }
           ),
-          /* @__PURE__ */ jsx132(
-            Typography6,
+          /* @__PURE__ */ jsx133(
+            Typography7,
             {
               sx: {
                 fontSize: "0.9rem",
@@ -3477,7 +3831,7 @@ var calculateCenterX = (focusNodeX, viewPortPixelWidth, minX, maxX) => {
 };
 
 // src/components/trace-graph/trace-graph.tsx
-import { Fragment as Fragment3, jsx as jsx133, jsxs as jsxs126 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx134, jsxs as jsxs127 } from "react/jsx-runtime";
 var nodeTypes = {
   service: ServiceNode
 };
@@ -3487,15 +3841,15 @@ var TraceGraph = ({
   traceId,
   viewPortPixelWidth
 }) => {
-  const [nodes, setNodes] = useState5([]);
-  const [edges, setEdges] = useState5([]);
-  const [isLoading, setIsLoading] = useState5(true);
-  const [initialViewSet, setInitialViewSet] = useState5(false);
+  const [nodes, setNodes] = useState6([]);
+  const [edges, setEdges] = useState6([]);
+  const [isLoading, setIsLoading] = useState6(true);
+  const [initialViewSet, setInitialViewSet] = useState6(false);
   const { fitView, setCenter } = useReactFlow();
   const store = useStoreApi();
   const api = useAppInspectorApi();
-  const [fetchError, setFetchError] = useState5();
-  const updateSelectedNode = useCallback5(
+  const [fetchError, setFetchError] = useState6();
+  const updateSelectedNode = useCallback6(
     (nodeId) => {
       const { addSelectedNodes } = store.getState();
       if (nodeId) {
@@ -3507,7 +3861,7 @@ var TraceGraph = ({
     },
     [nodes, store]
   );
-  const fetchTrace = useCallback5(async () => {
+  const fetchTrace = useCallback6(async () => {
     setIsLoading(true);
     try {
       const response = await api.getSpans({ trace_id: traceId });
@@ -3550,13 +3904,13 @@ var TraceGraph = ({
       setIsLoading(false);
     }
   }, [api, traceId, onEventSelect]);
-  const fetchTraceSync = useCallback5(() => {
+  const fetchTraceSync = useCallback6(() => {
     void fetchTrace();
   }, [fetchTrace]);
-  useEffect3(() => {
+  useEffect4(() => {
     fetchTraceSync();
   }, [fetchTraceSync]);
-  useEffect3(() => {
+  useEffect4(() => {
     const shouldSetInitialView = !isLoading && nodes.length > 0 && !initialViewSet;
     if (shouldSetInitialView) {
       if (initialFocusEventId) {
@@ -3576,20 +3930,20 @@ var TraceGraph = ({
       setInitialViewSet(true);
     }
   }, [isLoading, nodes, initialFocusEventId, viewPortPixelWidth, setCenter, fitView, onEventSelect, initialViewSet]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (initialFocusEventId) {
       updateSelectedNode(initialFocusEventId);
     }
   }, [initialFocusEventId, updateSelectedNode]);
-  const onNodeClick = useCallback5((_event, node) => {
+  const onNodeClick = useCallback6((_event, node) => {
     onEventSelect(node.data.event);
     updateSelectedNode(node.id);
   }, [onEventSelect, updateSelectedNode]);
-  return /* @__PURE__ */ jsxs126(Fragment3, { children: [
-    fetchError && /* @__PURE__ */ jsxs126(
-      Alert2,
+  return /* @__PURE__ */ jsxs127(Fragment3, { children: [
+    fetchError && /* @__PURE__ */ jsxs127(
+      Alert3,
       {
-        action: /* @__PURE__ */ jsx133(Button3, { onClick: fetchTraceSync, children: "Retry" }),
+        action: /* @__PURE__ */ jsx134(Button4, { onClick: fetchTraceSync, children: "Retry" }),
         severity: "error",
         children: [
           "Unexpected error:",
@@ -3598,7 +3952,7 @@ var TraceGraph = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsxs126(
+    /* @__PURE__ */ jsxs127(
       ReactFlow,
       {
         "data-testid": "trace-graph",
@@ -3612,8 +3966,8 @@ var TraceGraph = ({
         onNodeClick,
         selectNodesOnDrag: false,
         children: [
-          /* @__PURE__ */ jsx133(Controls, { showInteractive: false }),
-          /* @__PURE__ */ jsx133(Background, {})
+          /* @__PURE__ */ jsx134(Controls, { showInteractive: false }),
+          /* @__PURE__ */ jsx134(Background, {})
         ]
       }
     )
@@ -3621,7 +3975,7 @@ var TraceGraph = ({
 };
 
 // src/pages/trace-graph.tsx
-import { jsx as jsx134, jsxs as jsxs127 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx135, jsxs as jsxs128 } from "react/jsx-runtime";
 var HEADER_HEIGHT = 56;
 var DRAWER_WIDTH = "35%";
 var Main = styled("main", { shouldForwardProp: (property) => property !== "open" })(({ open, theme }) => ({
@@ -3657,10 +4011,11 @@ var TraceGraphPage = () => {
   const { traceId } = useParams();
   const [searchParameters] = useSearchParams();
   const spanId = searchParameters.get("spanId");
-  const [open, setOpen] = useState6(true);
-  const [selectedEvent, setSelectedEvent] = useState6();
-  const [viewPortPixelWidth, setViewPortPixelWidth] = useState6(0);
-  const calculateDrawerWidth = useCallback6(() => {
+  const [open, setOpen] = useState7(true);
+  const [selectedEvent, setSelectedEvent] = useState7();
+  const [viewPortPixelWidth, setViewPortPixelWidth] = useState7(0);
+  const { checkStatus, error: statusError, status } = useStatus();
+  const calculateDrawerWidth = useCallback7(() => {
     const percentageMatch = /(\d+)%/.exec(DRAWER_WIDTH);
     if (percentageMatch && open) {
       const percentage = Number.parseInt(percentageMatch[1], 10);
@@ -3668,7 +4023,7 @@ var TraceGraphPage = () => {
     }
     return 0;
   }, [open]);
-  useEffect4(() => {
+  useEffect5(() => {
     const updateViewportWidth = () => {
       const totalWidth = window.innerWidth;
       const drawerPixelWidth = open ? calculateDrawerWidth() : 0;
@@ -3682,12 +4037,16 @@ var TraceGraphPage = () => {
       clearTimeout(timeoutId);
     };
   }, [open, calculateDrawerWidth]);
-  const handleEventSelect = useCallback6((event) => {
+  const handleEventSelect = useCallback7((event) => {
     setSelectedEvent(event);
     setOpen(true);
   }, []);
-  return /* @__PURE__ */ jsx134(
-    Box11,
+  const handleRetry = useCallback7(() => {
+    void checkStatus();
+  }, [checkStatus]);
+  const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
+  return /* @__PURE__ */ jsx135(
+    Box12,
     {
       "data-testid": "trace-graph-page",
       sx: {
@@ -3697,7 +4056,7 @@ var TraceGraphPage = () => {
         height: "100vh",
         overflow: "hidden"
       },
-      children: /* @__PURE__ */ jsxs127(
+      children: /* @__PURE__ */ jsx135(
         Paper2,
         {
           sx: {
@@ -3707,15 +4066,22 @@ var TraceGraphPage = () => {
             position: "relative",
             width: "100%"
           },
-          children: [
-            /* @__PURE__ */ jsx134(Main, { open, children: /* @__PURE__ */ jsx134(
-              Box11,
+          children: shouldShowStatusMessage ? /* @__PURE__ */ jsx135(
+            StatusMessage,
+            {
+              error: statusError,
+              onRetry: handleRetry,
+              status
+            }
+          ) : /* @__PURE__ */ jsxs128(Fragment4, { children: [
+            /* @__PURE__ */ jsx135(Main, { open, children: /* @__PURE__ */ jsx135(
+              Box12,
               {
                 sx: {
                   height: "100%",
                   overflow: "auto"
                 },
-                children: traceId !== void 0 && /* @__PURE__ */ jsx134(ReactFlowProvider, { children: /* @__PURE__ */ jsx134(
+                children: traceId !== void 0 && /* @__PURE__ */ jsx135(ReactFlowProvider, { children: /* @__PURE__ */ jsx135(
                   TraceGraph,
                   {
                     initialFocusEventId: spanId,
@@ -3726,8 +4092,8 @@ var TraceGraphPage = () => {
                 ) })
               }
             ) }),
-            /* @__PURE__ */ jsx134(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ jsx134(EventDetails, { selectedEvent }) })
-          ]
+            /* @__PURE__ */ jsx135(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ jsx135(EventDetails, { selectedEvent }) })
+          ] })
         }
       )
     }