@localstack/appinspector-ui 1.0.18 → 1.0.20

package/dist/index.cjs

@@ -2535,11 +2535,9 @@ var AwsServiceIcon = ({ hideTooltip, service, size = "medium", title }) => {
 // src/components/cells/pill-cell.tsx
 var import_material3 = require("@mui/material");
 var import_jsx_runtime123 = require("react/jsx-runtime");
-var defaultBackgroundColor = "background.paper";
-var defaultBorderColor = "palette.divider";
 var PillCell = ({
-  backgroundColor = defaultBackgroundColor,
-  borderColor = defaultBorderColor,
+  backgroundColor,
+  borderColor,
   borderWidth = "1px",
   children,
   height = "24px",
@@ -2551,8 +2549,8 @@ var PillCell = ({
     {
       sx: {
         alignItems: "center",
-        backgroundColor,
-        borderColor,
+        backgroundColor: backgroundColor ?? ((theme) => theme.palette.background.paper),
+        borderColor: borderColor ?? ((theme) => theme.palette.divider),
         borderRadius: "16px",
         borderStyle: "solid",
         borderWidth,
@@ -2572,7 +2570,7 @@ var PillCell = ({
 var import_jsx_runtime124 = require("react/jsx-runtime");
 var truncateName = (inputString, truncateLength = 15) => inputString.length > truncateLength ? `${inputString.slice(0, truncateLength - 3)}...` : inputString;
 var ServiceCell = ({
-  borderColor = defaultBorderColor,
+  borderColor,
   borderWidth,
   height = "24px",
   resource,
@@ -2582,31 +2580,28 @@ var ServiceCell = ({
   width = "32px"
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Box, { sx: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(PillCell, { borderColor, borderWidth, height, children: [
-    showIcon ? /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
-      import_material4.Box,
-      {
-        sx: {
-          alignItems: "center",
-          borderRightColor: borderColor,
-          borderRightStyle: "solid",
-          borderRightWidth: `1px`,
-          display: "flex",
-          height,
-          justifyContent: "center",
-          overflow: "hidden",
-          padding: 0,
-          width
-        },
-        children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(AwsServiceIcon, { hideTooltip: true, service, size: "large" })
-      }
-    ) : void 0,
+    showIcon ? /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_jsx_runtime124.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+        import_material4.Box,
+        {
+          sx: {
+            alignItems: "center",
+            display: "flex",
+            height,
+            justifyContent: "center",
+            overflow: "hidden",
+            padding: 0,
+            width
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(AwsServiceIcon, { hideTooltip: true, service, size: "large" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Divider, { orientation: "vertical" })
+    ] }) : void 0,
     /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
       import_material4.Typography,
       {
         sx: {
-          borderRightColor: resource ? borderColor : "none",
-          borderRightStyle: resource ? "solid" : "none",
-          borderRightWidth: resource ? "1px" : "none",
           fontWeight: "bold",
           overflow: "hidden",
           padding: "1px 8px",
@@ -2625,21 +2620,24 @@ var ServiceCell = ({
         children: service
       }
     ),
-    resource ? /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
-      import_material4.Typography,
-      {
-        sx: {
-          borderBottomRightRadius: "15px",
-          borderTopRightRadius: "15px",
-          overflow: "hidden",
-          padding: "1px 8px",
-          textOverflow: "ellipsis",
-          whiteSpace: "nowrap"
-        },
-        variant: "body2",
-        children: truncateName(resource, truncateLength)
-      }
-    ) : void 0
+    resource ? /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_jsx_runtime124.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Box, { sx: { height: "100%", paddingY: 0.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Divider, { orientation: "vertical" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+        import_material4.Typography,
+        {
+          sx: {
+            borderBottomRightRadius: "15px",
+            borderTopRightRadius: "15px",
+            overflow: "hidden",
+            padding: "1px 8px",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap"
+          },
+          variant: "body2",
+          children: truncateName(resource, truncateLength)
+        }
+      )
+    ] }) : void 0
   ] }) });
 };
 ServiceCell.displayName = "ServiceCell";
@@ -3628,12 +3626,13 @@ var SpansListPage = () => {
 var import_icons_material11 = require("@mui/icons-material");
 var import_material21 = require("@mui/material");
 var import_styles = require("@mui/material/styles");
-var import_react20 = require("@xyflow/react");
-var import_react21 = require("react");
+var import_react21 = require("@xyflow/react");
+var import_react22 = require("react");
 var import_react_router_dom2 = require("react-router-dom");
 
 // src/components/event-details/event-details.tsx
 var import_material16 = require("@mui/material");
+var import_react12 = require("react");
 
 // src/utils/iam-utils.ts
 function determinePermissionStatus(payload) {
@@ -3903,7 +3902,7 @@ var DetailRow = ({ content, label }) => /* @__PURE__ */ (0, import_jsx_runtime13
     {
       sx: {
         color: "text.secondary",
-        fontWeight: 500
+        fontWeight: 600
       },
       variant: "body2",
       children: label
@@ -3938,11 +3937,11 @@ var PermissionIcon = ({ status }) => {
 var IAMEventDetail = ({ event }) => {
   const payloadString = event.attributes?.payload;
   if (!payloadString) {
-    return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material11.Box, { sx: { p: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material11.Typography, { color: "text.secondary", variant: "body2", children: "No IAM policy evaluation data available" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material11.Box, { sx: { p: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material11.Typography, { sx: { fontWeight: 600 }, variant: "body2", children: "No IAM policy evaluation data available" }) });
   }
   const parsedIAM = parseIAMEvent(payloadString);
   if (!parsedIAM) {
-    return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material11.Box, { sx: { p: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material11.Typography, { color: "text.secondary", variant: "body2", children: "Failed to parse IAM event data" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material11.Box, { sx: { p: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material11.Typography, { sx: { fontWeight: 600 }, variant: "body2", children: "Failed to parse IAM event data" }) });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(import_material11.Box, { sx: { p: 2 }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material11.Box, { sx: { mb: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
@@ -3967,9 +3966,7 @@ var IAMEventDetail = ({ event }) => {
           import_material11.Typography,
           {
             sx: {
-              color: "text.primary",
-              fontFamily: "monospace",
-              fontSize: "0.85rem"
+              color: "text.primary"
             },
             variant: "body2",
             children: action
@@ -3987,8 +3984,6 @@ var IAMEventDetail = ({ event }) => {
           {
             sx: {
               color: "text.primary",
-              fontFamily: "monospace",
-              fontSize: "0.85rem",
               wordBreak: "break-all"
             },
             variant: "body2",
@@ -4000,19 +3995,19 @@ var IAMEventDetail = ({ event }) => {
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(import_material11.Box, { sx: { mt: 2 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material11.Typography, { color: "text.secondary", sx: { mb: 1 }, variant: "caption", children: "Policy Evaluation" }),
+      /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material11.Typography, { sx: { fontWeight: 600, mb: 1 }, variant: "caption", children: "Policy Evaluation" }),
       /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(import_material11.Grid, { container: true, spacing: 2, children: [
         parsedIAM.details.explicitAllows !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material11.Grid, { item: true, xs: 4, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(import_material11.Box, { sx: { textAlign: "center" }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material11.Typography, { color: "success.main", sx: { fontWeight: "bold" }, variant: "h6", children: parsedIAM.details.explicitAllows }),
-          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material11.Typography, { color: "text.secondary", variant: "caption", children: "Explicit Allows" })
+          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material11.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Explicit Allows" })
         ] }) }),
         parsedIAM.details.explicitDenies !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material11.Grid, { item: true, xs: 4, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(import_material11.Box, { sx: { textAlign: "center" }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material11.Typography, { color: "error.main", sx: { fontWeight: "bold" }, variant: "h6", children: parsedIAM.details.explicitDenies }),
-          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material11.Typography, { color: "text.secondary", variant: "caption", children: "Explicit Denies" })
+          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material11.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Explicit Denies" })
         ] }) }),
         parsedIAM.details.implicitDenies !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material11.Grid, { item: true, xs: 4, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(import_material11.Box, { sx: { textAlign: "center" }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material11.Typography, { color: "warning.main", sx: { fontWeight: "bold" }, variant: "h6", children: parsedIAM.details.implicitDenies }),
-          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material11.Typography, { color: "text.secondary", variant: "caption", children: "Implicit Denies" })
+          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material11.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Implicit Denies" })
         ] }) })
       ] })
     ] })
@@ -4069,8 +4064,8 @@ var IAMPermissionItem = ({ event }) => {
       )
     ] }),
     isOpen && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material12.Box, { sx: { ml: 4, mt: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_material12.Box, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material12.Typography, { color: "text.secondary", variant: "caption", children: "Principal" }),
-      /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material12.Typography, { sx: { fontFamily: "monospace", fontSize: "0.85rem" }, variant: "body2", children: parsedIAM.principal })
+      /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material12.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Principal" }),
+      /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material12.Typography, { variant: "body2", children: parsedIAM.principal })
     ] }) })
   ] });
 };
@@ -4084,7 +4079,7 @@ var DetailRow2 = ({ content, label }) => /* @__PURE__ */ (0, import_jsx_runtime1
     {
       sx: {
         color: "text.primary",
-        fontWeight: 500
+        fontWeight: 600
       },
       variant: "body1",
       children: label
@@ -4151,7 +4146,7 @@ var EventMessage = ({ event }) => {
           ref: textReference,
           sx: {
             color: "text.primary",
-            fontWeight: 500,
+            fontWeight: 600,
             maxWidth: "100%",
             ml: shouldShowToggle ? 0 : 4,
             overflow: "hidden",
@@ -4208,10 +4203,9 @@ var EventDetail = ({
             {
               sx: {
                 alignItems: "left",
-                color: "text.secondary",
                 display: "flex",
                 flexGrow: 1,
-                fontWeight: 500
+                fontWeight: 600
               },
               variant: "subtitle1",
               children: displayText
@@ -4243,7 +4237,7 @@ var EventDetail = ({
                 color: "text.secondary",
                 display: "flex",
                 flexGrow: 1,
-                fontWeight: 500,
+                fontWeight: 600,
                 ml: 1,
                 mr: 2
               },
@@ -4350,6 +4344,10 @@ var EventSection = ({
 // src/components/event-details/event-details.tsx
 var import_jsx_runtime137 = require("react/jsx-runtime");
 var EventDetails = ({ onClose, selectedEvent }) => {
+  const attributes = (0, import_react12.useMemo)(() => {
+    const attributes2 = Object.entries(selectedEvent?.attributes ?? {});
+    return attributes2.filter(([key]) => key !== "localstack.aws.account_id" && key !== "localstack.aws.service");
+  }, [selectedEvent?.attributes]);
   if (!selectedEvent) {
     return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Box, { sx: { p: 3, textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { color: "text.secondary", variant: "body2", children: "Select an event to view details" }) });
   }
@@ -4358,41 +4356,41 @@ var EventDetails = ({ onClose, selectedEvent }) => {
     /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Box, { sx: { flexGrow: 1, overflow: "auto", p: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material16.Stack, { spacing: 2, children: [
       /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(ToggleSection, { headline: "Basic Information", children: /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material16.Stack, { spacing: 1, children: [
         /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material16.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { color: "text.secondary", variant: "caption", children: "Span ID" }),
+          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Span ID" }),
           /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { variant: "body2", children: selectedEvent.span_id })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material16.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { color: "text.secondary", variant: "caption", children: "Trace ID" }),
-          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { sx: { fontFamily: "monospace", fontSize: "0.85rem" }, variant: "body2", children: selectedEvent.trace_id })
+          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Trace ID" }),
+          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { variant: "body2", children: selectedEvent.trace_id })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material16.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { color: "text.secondary", variant: "caption", children: "Operation" }),
+          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Operation" }),
           /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { variant: "body2", children: selectedEvent.operation_name })
         ] })
       ] }) }),
       /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Divider, {}),
       /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(ToggleSection, { headline: "Service Information", children: /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material16.Stack, { spacing: 1, children: [
         /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material16.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { color: "text.secondary", variant: "caption", children: "Service" }),
+          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Service" }),
           /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { variant: "body2", children: selectedEvent.service_name })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material16.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { color: "text.secondary", variant: "caption", children: "Resource" }),
+          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource" }),
           /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { variant: "body2", children: selectedEvent.resource_name })
         ] }),
         Boolean(selectedEvent.region) && /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material16.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { color: "text.secondary", variant: "caption", children: "Region" }),
+          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Region" }),
           /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { variant: "body2", children: selectedEvent.region })
         ] })
       ] }) }),
       /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Divider, {}),
       /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(ToggleSection, { headline: "Timing", children: /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material16.Stack, { spacing: 1, children: [
         /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material16.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { color: "text.secondary", variant: "caption", children: "Start Time" }),
+          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Start Time" }),
           /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { variant: "body2", children: unixNanoToDate(selectedEvent.start_time_unix_nano)?.toISOString() })
         ] }),
         Boolean(selectedEvent.end_time_unix_nano) && /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material16.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { color: "text.secondary", variant: "caption", children: "Duration" }),
+          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Duration" }),
           /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material16.Typography, { variant: "body2", children: [
             ((BigInt(selectedEvent.end_time_unix_nano) - BigInt(selectedEvent.start_time_unix_nano)) / BigInt("1000000")).toString(),
             " ",
@@ -4422,33 +4420,45 @@ var EventDetails = ({ onClose, selectedEvent }) => {
           }
         )
       ] }),
-      selectedEvent.attributes && Object.keys(selectedEvent.attributes).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_jsx_runtime137.Fragment, { children: [
+      attributes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_jsx_runtime137.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Divider, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(ToggleSection, { headline: "Attributes", children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Box, { sx: { backgroundColor: "#f5f5f5", borderRadius: 1, p: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("pre", { style: { fontSize: "0.85rem", margin: 0, overflow: "auto" }, children: JSON.stringify(selectedEvent.attributes, void 0, 2) }) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(ToggleSection, { headline: "Attributes", children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Stack, { spacing: 1, children: attributes.map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material16.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: key }),
+          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { variant: "body2", children: renderKeyValue(key, value) })
+        ] }, key)) }) })
       ] })
     ] }) })
   ] });
 };
+function renderKeyValue(key, value) {
+  if (typeof value === "string" && (key === "localstack.aws.service.request" || key === "localstack.aws.service.response" || key === "localstack.aws.service.exception")) {
+    return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Box, { sx: { backgroundColor: (theme) => theme.palette.background.default, borderRadius: 1, p: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("pre", { style: { margin: 0, overflow: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { variant: "body2", children: JSON.stringify(JSON.parse(value), void 0, 2) }) }) });
+  }
+  if (typeof value === "boolean") {
+    return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { variant: "body2", children: value ? "yes" : "no" });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { variant: "body2", children: value });
+}
 
 // src/components/trace-graph/trace-graph.tsx
 var import_base = require("@xyflow/react/dist/base.css");
 var import_material20 = require("@mui/material");
-var import_react18 = require("@xyflow/react");
-var import_react19 = require("react");
+var import_react19 = require("@xyflow/react");
+var import_react20 = require("react");
 
 // src/components/trace-graph/service-node.tsx
 var import_material18 = require("@mui/material");
 var import_style = require("@xyflow/react/dist/style.css");
-var import_react13 = require("@xyflow/react");
-var import_react14 = require("react");
+var import_react14 = require("@xyflow/react");
+var import_react15 = require("react");
 
 // src/components/trace-graph/problem-indicator.tsx
 var import_icons_material9 = require("@mui/icons-material");
 var import_material17 = require("@mui/material");
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_jsx_runtime138 = require("react/jsx-runtime");
 var ProblemIndicator = ({ error }) => {
-  const icon = (0, import_react12.useMemo)(() => {
+  const icon = (0, import_react13.useMemo)(() => {
     switch (error.level) {
       case "error": {
         return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_icons_material9.Error, { sx: { color: "#d32f2f", fontSize: "14px" } });
@@ -4461,7 +4471,7 @@ var ProblemIndicator = ({ error }) => {
       }
     }
   }, [error.level]);
-  const color = (0, import_react12.useMemo)(() => {
+  const color = (0, import_react13.useMemo)(() => {
     switch (error.level) {
       case "error": {
         return "#d32f2f";
@@ -4500,11 +4510,11 @@ var handleStyle = {
   borderColor: "lightgray",
   opacity: 0
 };
-var ServiceNode = (0, import_react14.memo)(function ServiceNode2({ data, selected }) {
-  const handleClick = (0, import_react14.useCallback)(() => {
+var ServiceNode = (0, import_react15.memo)(function ServiceNode2({ data, selected }) {
+  const handleClick = (0, import_react15.useCallback)(() => {
     data.onEventSelect(data.event);
   }, [data]);
-  const handleKeyPress = (0, import_react14.useCallback)(
+  const handleKeyPress = (0, import_react15.useCallback)(
     (event) => {
       if (event.key === "Enter" || event.key === " ") {
         handleClick();
@@ -4537,8 +4547,8 @@ var ServiceNode = (0, import_react14.memo)(function ServiceNode2({ data, selecte
         },
         tabIndex: 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(import_react13.Handle, { position: import_react13.Position.Left, style: handleStyle, type: "target" }),
-          /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(import_react13.Handle, { position: import_react13.Position.Right, style: handleStyle, type: "source" }),
+          /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(import_react14.Handle, { position: import_react14.Position.Left, style: handleStyle, type: "target" }),
+          /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(import_react14.Handle, { position: import_react14.Position.Right, style: handleStyle, type: "source" }),
           /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
             ServiceCell,
             {
@@ -4599,7 +4609,7 @@ var ServiceNode = (0, import_react14.memo)(function ServiceNode2({ data, selecte
 
 // src/components/trace-graph/utils.ts
 var import_dagre = __toESM(require("@dagrejs/dagre"), 1);
-var import_react15 = require("@xyflow/react");
+var import_react16 = require("@xyflow/react");
 var generateNodesAndEdges = (event, onEventSelect, parentId) => {
   const nodes = [];
   const edges = [];
@@ -4616,8 +4626,8 @@ var generateNodesAndEdges = (event, onEventSelect, parentId) => {
     id: event.span_id,
     position: { x: 0, y: 0 },
     // Will be set by layout
-    sourcePosition: import_react15.Position.Right,
-    targetPosition: import_react15.Position.Left,
+    sourcePosition: import_react16.Position.Right,
+    targetPosition: import_react16.Position.Left,
     type: "service"
   });
   if (parentId) {
@@ -4627,7 +4637,7 @@ var generateNodesAndEdges = (event, onEventSelect, parentId) => {
       markerEnd: {
         color: "lightgray",
         height: 16,
-        type: import_react15.MarkerType.Arrow,
+        type: import_react16.MarkerType.Arrow,
         width: 16
       },
       source: parentId,
@@ -4692,8 +4702,8 @@ var calculateCenterX = (focusNodeX, viewPortPixelWidth, minX, maxX) => {
 // src/components/trace-graph/xyflow/controls.tsx
 var import_icons_material10 = require("@mui/icons-material");
 var import_material19 = require("@mui/material");
-var import_react16 = require("@xyflow/react");
-var import_react17 = require("react");
+var import_react17 = require("@xyflow/react");
+var import_react18 = require("react");
 
 // node_modules/zustand/esm/shallow.mjs
 function shallow$1(objA, objB) {
@@ -4740,9 +4750,9 @@ var selector = (s) => ({
   maxZoomReached: s.transform[2] >= s.maxZoom,
   minZoomReached: s.transform[2] <= s.minZoom
 });
-var Controls = (0, import_react17.memo)(() => {
-  const { maxZoomReached, minZoomReached } = (0, import_react16.useStore)(selector, shallow$1);
-  const { fitView, zoomIn, zoomOut } = (0, import_react16.useReactFlow)();
+var Controls = (0, import_react18.memo)(() => {
+  const { maxZoomReached, minZoomReached } = (0, import_react17.useStore)(selector, shallow$1);
+  const { fitView, zoomIn, zoomOut } = (0, import_react17.useReactFlow)();
   const onZoomInHandler = () => {
     void zoomIn();
   };
@@ -4812,12 +4822,12 @@ var TraceGraph = ({
   spans,
   viewPortPixelWidth
 }) => {
-  const [nodes, setNodes] = (0, import_react19.useState)([]);
-  const [edges, setEdges] = (0, import_react19.useState)([]);
-  const [initialViewSet, setInitialViewSet] = (0, import_react19.useState)(false);
-  const { fitView, setCenter } = (0, import_react18.useReactFlow)();
-  const store = (0, import_react18.useStoreApi)();
-  const updateSelectedNode = (0, import_react19.useCallback)(
+  const [nodes, setNodes] = (0, import_react20.useState)([]);
+  const [edges, setEdges] = (0, import_react20.useState)([]);
+  const [initialViewSet, setInitialViewSet] = (0, import_react20.useState)(false);
+  const { fitView, setCenter } = (0, import_react19.useReactFlow)();
+  const store = (0, import_react19.useStoreApi)();
+  const updateSelectedNode = (0, import_react20.useCallback)(
     (nodeId) => {
       const { addSelectedNodes } = store.getState();
       if (nodeId) {
@@ -4829,7 +4839,7 @@ var TraceGraph = ({
     },
     [nodes, store]
   );
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     const spansMap = /* @__PURE__ */ new Map();
     const rootSpans = [];
     for (const span of spans.data ?? []) {
@@ -4861,7 +4871,7 @@ var TraceGraph = ({
     setNodes(layoutedNodes);
     setEdges(layoutedEdges);
   }, [onEventSelect, spans.data]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     const shouldSetInitialView = !spans.loading && nodes.length > 0 && !initialViewSet;
     if (shouldSetInitialView) {
       if (initialFocusEventId) {
@@ -4881,12 +4891,12 @@ var TraceGraph = ({
       setInitialViewSet(true);
     }
   }, [spans.loading, nodes, initialFocusEventId, viewPortPixelWidth, setCenter, fitView, onEventSelect, initialViewSet]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (initialFocusEventId) {
       updateSelectedNode(initialFocusEventId);
     }
   }, [initialFocusEventId, updateSelectedNode]);
-  const onNodeClick = (0, import_react19.useCallback)((_event, node) => {
+  const onNodeClick = (0, import_react20.useCallback)((_event, node) => {
     onEventSelect(node.data.event);
     updateSelectedNode(node.id);
   }, [onEventSelect, updateSelectedNode]);
@@ -4906,7 +4916,7 @@ var TraceGraph = ({
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(
-      import_react18.ReactFlow,
+      import_react19.ReactFlow,
       {
         "data-testid": "trace-graph",
         defaultViewport: { x: 0, y: 0, zoom: 1 },
@@ -4920,7 +4930,7 @@ var TraceGraph = ({
         selectNodesOnDrag: false,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(Controls, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_react18.Background, {})
+          /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_react19.Background, {})
         ]
       }
     )
@@ -4962,6 +4972,7 @@ var StyledDrawer = (0, import_styles.styled)(import_material21.Drawer)(() => ({
 var TraceGraphView = ({
   fetchError,
   fetchSpans,
+  handleClose,
   handleEventSelect,
   handleRetry,
   loading,
@@ -5020,7 +5031,7 @@ var TraceGraphView = ({
                     height: "100%",
                     overflow: "auto"
                   },
-                  children: traceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_react20.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
+                  children: traceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_react21.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
                     TraceGraph,
                     {
                       initialFocusEventId: spanId,
@@ -5038,7 +5049,7 @@ var TraceGraphView = ({
                   ) })
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(EventDetails, { selectedEvent }) })
+              /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(EventDetails, { onClose: handleClose, selectedEvent }) })
             ] })
           }
         )
@@ -5051,10 +5062,10 @@ var TraceGraphPage = () => {
   const [searchParameters] = (0, import_react_router_dom2.useSearchParams)();
   const spanId = searchParameters.get("spanId");
   const api = useAppInspectorApi();
-  const [spans, setSpans] = (0, import_react21.useState)();
-  const [loading, setLoading] = (0, import_react21.useState)(false);
-  const [fetchError, setFetchError] = (0, import_react21.useState)();
-  const fetchSpans = (0, import_react21.useCallback)(async () => {
+  const [spans, setSpans] = (0, import_react22.useState)();
+  const [loading, setLoading] = (0, import_react22.useState)(false);
+  const [fetchError, setFetchError] = (0, import_react22.useState)();
+  const fetchSpans = (0, import_react22.useCallback)(async () => {
     setLoading(true);
     try {
       const response = await api.getSpans({
@@ -5069,14 +5080,14 @@ var TraceGraphPage = () => {
       setLoading(false);
     }
   }, [api, traceId]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     void fetchSpans();
   }, [fetchSpans]);
-  const [open, setOpen] = (0, import_react21.useState)(true);
-  const [selectedEvent, setSelectedEvent] = (0, import_react21.useState)();
-  const [viewPortPixelWidth, setViewPortPixelWidth] = (0, import_react21.useState)(0);
+  const [open, setOpen] = (0, import_react22.useState)(true);
+  const [selectedEvent, setSelectedEvent] = (0, import_react22.useState)();
+  const [viewPortPixelWidth, setViewPortPixelWidth] = (0, import_react22.useState)(0);
   const { checkStatus, error: statusError, status } = useStatus();
-  const calculateDrawerWidth = (0, import_react21.useCallback)(() => {
+  const calculateDrawerWidth = (0, import_react22.useCallback)(() => {
     const percentageMatch = /(\d+)%/.exec(DRAWER_WIDTH);
     if (percentageMatch && open) {
       const percentage = Number.parseInt(percentageMatch[1], 10);
@@ -5084,7 +5095,7 @@ var TraceGraphPage = () => {
     }
     return 0;
   }, [open]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     const updateViewportWidth = () => {
       const totalWidth = window.innerWidth;
       const drawerPixelWidth = open ? calculateDrawerWidth() : 0;
@@ -5098,16 +5109,16 @@ var TraceGraphPage = () => {
       clearTimeout(timeoutId);
     };
   }, [open, calculateDrawerWidth]);
-  const handleEventSelect = (0, import_react21.useCallback)((event) => {
+  const handleEventSelect = (0, import_react22.useCallback)((event) => {
     setSelectedEvent(event);
     setOpen(true);
   }, []);
-  const handleRetry = (0, import_react21.useCallback)(() => {
+  const handleRetry = (0, import_react22.useCallback)(() => {
     void checkStatus();
   }, [checkStatus]);
   const navigate = (0, import_react_router_dom2.useNavigate)();
   const { resolveLink } = useAppInspector();
-  const navigateToSpansList = (0, import_react21.useCallback)(() => {
+  const navigateToSpansList = (0, import_react22.useCallback)(() => {
     const url = resolveLink({ to: "spans-list" });
     navigate(url);
   }, [navigate, resolveLink]);
@@ -5116,6 +5127,9 @@ var TraceGraphPage = () => {
     {
       fetchError,
       fetchSpans: () => void fetchSpans(),
+      handleClose: () => {
+        setOpen(false);
+      },
       handleEventSelect,
       handleRetry,
       loading,