@localstack/appinspector-ui 1.0.126 → 1.0.127

package/dist/index.js

@@ -2414,7 +2414,7 @@ var init_event_streams = __esm({
 
 // src/pages/spans-list-page.tsx
 import { Box as Box20 } from "@mui/material";
-import { useCallback as useCallback12, useEffect as useEffect22, useRef as useRef18, useState as useState17 } from "react";
+import { useCallback as useCallback13, useEffect as useEffect22, useRef as useRef18, useState as useState18 } from "react";
 
 // src/api/errors.ts
 var AppInspectorDisabledError = class extends Error {
@@ -18614,12 +18614,12 @@ import { ArrowBack } from "@mui/icons-material";
 import { Box as Box19, Button as Button6, Drawer, Paper as Paper3 } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { ReactFlowProvider } from "@xyflow/react";
-import { useCallback as useCallback11, useEffect as useEffect21, useRef as useRef17, useState as useState16 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect21, useRef as useRef17, useState as useState17 } from "react";
 
 // src/components/event-details/event-details.tsx
 import { Close as Close2 } from "@mui/icons-material";
-import { Alert as Alert4, Box as Box16, Chip as Chip3, Divider as Divider4, FormControlLabel as FormControlLabel2, IconButton as IconButton3, Stack as Stack3, Switch, Typography as Typography11 } from "@mui/material";
-import { useMemo as useMemo12, useState as useState15 } from "react";
+import { Alert as Alert4, Box as Box16, Chip as Chip3, Divider as Divider4, FormControlLabel as FormControlLabel2, IconButton as IconButton4, Stack as Stack3, Switch, Typography as Typography11 } from "@mui/material";
+import { useMemo as useMemo12, useState as useState16 } from "react";
 
 // src/utils/event-utils.ts
 var iamEventParser = (eventName, attributes) => {
@@ -18729,31 +18729,59 @@ var getEventGroupsByType = (events) => {
   return groups;
 };
 
+// src/components/event-details/copy-button.tsx
+import { Check, ContentCopy } from "@mui/icons-material";
+import { IconButton as IconButton2, Tooltip as Tooltip5 } from "@mui/material";
+import { useCallback as useCallback10, useState as useState11 } from "react";
+import { jsx as jsx133 } from "react/jsx-runtime";
+var CopyButton = ({ value }) => {
+  const [copied, setCopied] = useState11(false);
+  const handleCopy = useCallback10(() => {
+    const text2 = typeof value === "string" ? value : JSON.stringify(value, void 0, 2);
+    void navigator.clipboard.writeText(text2).then(() => {
+      setCopied(true);
+      setTimeout(() => {
+        setCopied(false);
+      }, 1500);
+    });
+  }, [value]);
+  return /* @__PURE__ */ jsx133(Tooltip5, { title: copied ? "Copied!" : "Copy", children: /* @__PURE__ */ jsx133(
+    IconButton2,
+    {
+      className: "copy-btn",
+      onClick: handleCopy,
+      size: "small",
+      sx: { ml: 0.5, opacity: copied ? 1 : 0, p: 0.25, transition: "opacity 0.15s" },
+      children: copied ? /* @__PURE__ */ jsx133(Check, { sx: { fontSize: 14 } }) : /* @__PURE__ */ jsx133(ContentCopy, { sx: { fontSize: 14 } })
+    }
+  ) });
+};
+
 // src/components/event-details/event-detail.tsx
 import { KeyboardArrowDown, KeyboardArrowRight } from "@mui/icons-material";
-import { Box as Box13, IconButton as IconButton2, Typography as Typography8 } from "@mui/material";
-import { useEffect as useEffect18, useMemo as useMemo10, useRef as useRef15, useState as useState12 } from "react";
+import { Box as Box13, IconButton as IconButton3, Typography as Typography8 } from "@mui/material";
+import { useEffect as useEffect18, useMemo as useMemo10, useRef as useRef15, useState as useState13 } from "react";
 
 // src/components/status-icon.tsx
 import { Cancel as Cancel2, CheckCircle, Error as Error3, Info, RemoveCircle } from "@mui/icons-material";
 import { Box as Box8 } from "@mui/material";
-import { jsx as jsx133 } from "react/jsx-runtime";
+import { jsx as jsx134 } from "react/jsx-runtime";
 var StatusIcon2 = ({ errorLevel }) => {
   switch (errorLevel) {
     case EventLevel.LevelError: {
-      return /* @__PURE__ */ jsx133(Cancel2, { sx: { color: "red" } });
+      return /* @__PURE__ */ jsx134(Cancel2, { sx: { color: "red" } });
     }
     case EventLevel.LevelInfo: {
-      return /* @__PURE__ */ jsx133(Info, { sx: { color: "gray" } });
+      return /* @__PURE__ */ jsx134(Info, { sx: { color: "gray" } });
     }
     case EventLevel.LevelPermission: {
-      return /* @__PURE__ */ jsx133(RemoveCircle, { sx: { color: "blue" } });
+      return /* @__PURE__ */ jsx134(RemoveCircle, { sx: { color: "blue" } });
     }
     case EventLevel.LevelWarning: {
-      return /* @__PURE__ */ jsx133(Error3, { sx: { color: "orange" } });
+      return /* @__PURE__ */ jsx134(Error3, { sx: { color: "orange" } });
     }
     default: {
-      return /* @__PURE__ */ jsx133(CheckCircle, { sx: { color: "lightgray" } });
+      return /* @__PURE__ */ jsx134(CheckCircle, { sx: { color: "lightgray" } });
     }
   }
 };
@@ -18761,39 +18789,39 @@ var StatusIcon2 = ({ errorLevel }) => {
 // src/components/event-details/iam-event-detail.tsx
 import { CheckCircle as CheckCircle2, Error as ErrorIcon, Warning } from "@mui/icons-material";
 import { Box as Box9, Chip, Typography as Typography6 } from "@mui/material";
-import { jsx as jsx134, jsxs as jsxs125 } from "react/jsx-runtime";
+import { jsx as jsx135, jsxs as jsxs125 } from "react/jsx-runtime";
 var DetailRow = ({ content, label }) => /* @__PURE__ */ jsxs125(Box9, { sx: { display: "grid", gap: 1, gridTemplateColumns: "72px 1fr", mb: 0.5 }, children: [
-  /* @__PURE__ */ jsx134(Typography6, { color: "text.secondary", sx: { fontWeight: 600 }, variant: "caption", children: label }),
-  /* @__PURE__ */ jsx134(Box9, { children: typeof content === "string" ? /* @__PURE__ */ jsx134(Typography6, { sx: { color: "text.primary", wordBreak: "break-word" }, variant: "caption", children: content }) : content })
+  /* @__PURE__ */ jsx135(Typography6, { color: "text.secondary", sx: { fontWeight: 600 }, variant: "caption", children: label }),
+  /* @__PURE__ */ jsx135(Box9, { children: typeof content === "string" ? /* @__PURE__ */ jsx135(Typography6, { sx: { color: "text.primary", wordBreak: "break-word" }, variant: "caption", children: content }) : content })
 ] });
 var PermissionIcon = ({ status }) => {
   switch (status) {
     case "explicitly_allowed":
     case "implicitly_allowed": {
-      return /* @__PURE__ */ jsx134(CheckCircle2, { sx: { color: "success.main", fontSize: "1rem" } });
+      return /* @__PURE__ */ jsx135(CheckCircle2, { sx: { color: "success.main", fontSize: "1rem" } });
     }
     case "explicitly_denied": {
-      return /* @__PURE__ */ jsx134(ErrorIcon, { sx: { color: "error.main", fontSize: "1rem" } });
+      return /* @__PURE__ */ jsx135(ErrorIcon, { sx: { color: "error.main", fontSize: "1rem" } });
     }
     case "implicitly_denied": {
-      return /* @__PURE__ */ jsx134(Warning, { sx: { color: "warning.main", fontSize: "1rem" } });
+      return /* @__PURE__ */ jsx135(Warning, { sx: { color: "warning.main", fontSize: "1rem" } });
     }
   }
 };
 var IAMEventDetail = ({ event }) => {
   const payloadString = event.attributes?.payload;
   if (!payloadString) {
-    return /* @__PURE__ */ jsx134(Typography6, { color: "text.secondary", variant: "caption", children: "No IAM policy evaluation data available" });
+    return /* @__PURE__ */ jsx135(Typography6, { color: "text.secondary", variant: "caption", children: "No IAM policy evaluation data available" });
   }
   const parsedIAM = parseIAMEvent(payloadString);
   if (!parsedIAM) {
-    return /* @__PURE__ */ jsx134(Typography6, { color: "text.secondary", variant: "caption", children: "Failed to parse IAM event data" });
+    return /* @__PURE__ */ jsx135(Typography6, { color: "text.secondary", variant: "caption", children: "Failed to parse IAM event data" });
   }
   return /* @__PURE__ */ jsxs125(Box9, { children: [
-    /* @__PURE__ */ jsx134(Box9, { sx: { mb: 1.5 }, children: /* @__PURE__ */ jsx134(
+    /* @__PURE__ */ jsx135(Box9, { sx: { mb: 1.5 }, children: /* @__PURE__ */ jsx135(
       Chip,
       {
-        icon: /* @__PURE__ */ jsx134(PermissionIcon, { status: parsedIAM.permission }),
+        icon: /* @__PURE__ */ jsx135(PermissionIcon, { status: parsedIAM.permission }),
         label: formatPermissionStatus(parsedIAM.permission),
         size: "small",
         sx: {
@@ -18803,36 +18831,36 @@ var IAMEventDetail = ({ event }) => {
         variant: "outlined"
       }
     ) }),
-    /* @__PURE__ */ jsx134(DetailRow, { content: `${parsedIAM.service}:${parsedIAM.operation}`, label: "Operation" }),
-    /* @__PURE__ */ jsx134(DetailRow, { content: parsedIAM.principal, label: "Principal" }),
-    parsedIAM.details.actions && parsedIAM.details.actions.length > 0 && /* @__PURE__ */ jsx134(
+    /* @__PURE__ */ jsx135(DetailRow, { content: `${parsedIAM.service}:${parsedIAM.operation}`, label: "Operation" }),
+    /* @__PURE__ */ jsx135(DetailRow, { content: parsedIAM.principal, label: "Principal" }),
+    parsedIAM.details.actions && parsedIAM.details.actions.length > 0 && /* @__PURE__ */ jsx135(
       DetailRow,
       {
-        content: /* @__PURE__ */ jsx134(Box9, { children: parsedIAM.details.actions.map((action) => /* @__PURE__ */ jsx134(Typography6, { sx: { color: "text.primary", display: "block" }, variant: "caption", children: action }, action)) }),
+        content: /* @__PURE__ */ jsx135(Box9, { children: parsedIAM.details.actions.map((action) => /* @__PURE__ */ jsx135(Typography6, { sx: { color: "text.primary", display: "block" }, variant: "caption", children: action }, action)) }),
         label: "Actions"
       }
     ),
-    parsedIAM.details.resources && parsedIAM.details.resources.length > 0 && /* @__PURE__ */ jsx134(
+    parsedIAM.details.resources && parsedIAM.details.resources.length > 0 && /* @__PURE__ */ jsx135(
       DetailRow,
       {
-        content: /* @__PURE__ */ jsx134(Box9, { children: parsedIAM.details.resources.map((resource) => /* @__PURE__ */ jsx134(Typography6, { sx: { color: "text.primary", display: "block", wordBreak: "break-all" }, variant: "caption", children: resource }, resource)) }),
+        content: /* @__PURE__ */ jsx135(Box9, { children: parsedIAM.details.resources.map((resource) => /* @__PURE__ */ jsx135(Typography6, { sx: { color: "text.primary", display: "block", wordBreak: "break-all" }, variant: "caption", children: resource }, resource)) }),
         label: "Resources"
       }
     ),
     (parsedIAM.details.explicitAllows !== void 0 || parsedIAM.details.explicitDenies !== void 0 || parsedIAM.details.implicitDenies !== void 0) && /* @__PURE__ */ jsxs125(Box9, { sx: { mt: 1.5 }, children: [
-      /* @__PURE__ */ jsx134(Typography6, { color: "text.secondary", sx: { display: "block", fontWeight: 600, mb: 0.5 }, variant: "caption", children: "Policy Evaluation" }),
+      /* @__PURE__ */ jsx135(Typography6, { color: "text.secondary", sx: { display: "block", fontWeight: 600, mb: 0.5 }, variant: "caption", children: "Policy Evaluation" }),
       /* @__PURE__ */ jsxs125(Box9, { sx: { display: "grid", gap: 1, gridTemplateColumns: "repeat(3, 1fr)" }, children: [
         parsedIAM.details.explicitAllows !== void 0 && /* @__PURE__ */ jsxs125(Box9, { sx: { textAlign: "center" }, children: [
-          /* @__PURE__ */ jsx134(Typography6, { color: "success.main", sx: { display: "block", fontWeight: "bold" }, variant: "subtitle2", children: parsedIAM.details.explicitAllows }),
-          /* @__PURE__ */ jsx134(Typography6, { color: "text.secondary", variant: "caption", children: "Explicit Allows" })
+          /* @__PURE__ */ jsx135(Typography6, { color: "success.main", sx: { display: "block", fontWeight: "bold" }, variant: "subtitle2", children: parsedIAM.details.explicitAllows }),
+          /* @__PURE__ */ jsx135(Typography6, { color: "text.secondary", variant: "caption", children: "Explicit Allows" })
         ] }),
         parsedIAM.details.explicitDenies !== void 0 && /* @__PURE__ */ jsxs125(Box9, { sx: { textAlign: "center" }, children: [
-          /* @__PURE__ */ jsx134(Typography6, { color: "error.main", sx: { display: "block", fontWeight: "bold" }, variant: "subtitle2", children: parsedIAM.details.explicitDenies }),
-          /* @__PURE__ */ jsx134(Typography6, { color: "text.secondary", variant: "caption", children: "Explicit Denies" })
+          /* @__PURE__ */ jsx135(Typography6, { color: "error.main", sx: { display: "block", fontWeight: "bold" }, variant: "subtitle2", children: parsedIAM.details.explicitDenies }),
+          /* @__PURE__ */ jsx135(Typography6, { color: "text.secondary", variant: "caption", children: "Explicit Denies" })
         ] }),
         parsedIAM.details.implicitDenies !== void 0 && /* @__PURE__ */ jsxs125(Box9, { sx: { textAlign: "center" }, children: [
-          /* @__PURE__ */ jsx134(Typography6, { color: "warning.main", sx: { display: "block", fontWeight: "bold" }, variant: "subtitle2", children: parsedIAM.details.implicitDenies }),
-          /* @__PURE__ */ jsx134(Typography6, { color: "text.secondary", variant: "caption", children: "Implicit Denies" })
+          /* @__PURE__ */ jsx135(Typography6, { color: "warning.main", sx: { display: "block", fontWeight: "bold" }, variant: "subtitle2", children: parsedIAM.details.implicitDenies }),
+          /* @__PURE__ */ jsx135(Typography6, { color: "text.secondary", variant: "caption", children: "Implicit Denies" })
         ] })
       ] })
     ] })
@@ -18842,16 +18870,12 @@ var IAMEventDetail = ({ event }) => {
 // src/components/event-details/iam-permission-detail.tsx
 import { Box as Box10, Chip as Chip2, Stack, Typography as Typography7 } from "@mui/material";
 import { useMemo as useMemo8 } from "react";
-import { jsx as jsx135, jsxs as jsxs126 } from "react/jsx-runtime";
+import { jsx as jsx136, jsxs as jsxs126 } from "react/jsx-runtime";
 var getChipColor = (isAllowed, spanStatusCode) => {
   if (isAllowed) return "success.main";
   if (spanStatusCode === 2) return "error.main";
   return "warning.main";
 };
-var LabelValue = ({ label, value }) => /* @__PURE__ */ jsxs126(Box10, { children: [
-  /* @__PURE__ */ jsx135(Typography7, { sx: { display: "block", fontWeight: 600 }, variant: "caption", children: label }),
-  /* @__PURE__ */ jsx135(Typography7, { sx: { wordBreak: "break-all" }, variant: "body2", children: value })
-] });
 var IAMPermissionItem = ({ event, spanStatusCode }) => {
   const parsedData = useMemo8(() => {
     const payloadString = event.attributes?.payload;
@@ -18867,30 +18891,42 @@ var IAMPermissionItem = ({ event, spanStatusCode }) => {
   const isAllowed = parsedIAM.permission === "explicitly_allowed" || parsedIAM.permission === "implicitly_allowed";
   const chipColors = { backgroundColor: getChipColor(isAllowed, spanStatusCode), color: "white" };
   return /* @__PURE__ */ jsxs126(Box10, { sx: { mb: 0.5 }, children: [
-    /* @__PURE__ */ jsx135(Box10, { sx: { alignItems: "center", display: "flex", gap: 1, mb: 0.5 }, children: /* @__PURE__ */ jsx135(Chip2, { label: formatPermissionStatus(parsedIAM.permission), size: "small", sx: { ...chipColors, fontWeight: 500 } }) }),
+    /* @__PURE__ */ jsx136(Box10, { sx: { alignItems: "center", display: "flex", gap: 1, mb: 0.5 }, children: /* @__PURE__ */ jsx136(Chip2, { label: formatPermissionStatus(parsedIAM.permission), size: "small", sx: { ...chipColors, fontWeight: 500 } }) }),
     /* @__PURE__ */ jsxs126(Stack, { spacing: 1, children: [
-      /* @__PURE__ */ jsx135(Box10, { "data-testid": EVENT_DETAILS_IAM_PRINCIPAL_TEST_ID, children: /* @__PURE__ */ jsx135(LabelValue, { label: "Principal", value: parsedIAM.principal }) }),
+      /* @__PURE__ */ jsxs126(Box10, { "data-testid": EVENT_DETAILS_IAM_PRINCIPAL_TEST_ID, children: [
+        /* @__PURE__ */ jsx136(Typography7, { sx: { display: "block", fontWeight: 600 }, variant: "caption", children: "Principal" }),
+        /* @__PURE__ */ jsxs126(Stack, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+          /* @__PURE__ */ jsx136(Typography7, { sx: { wordBreak: "break-all" }, variant: "body2", children: parsedIAM.principal }),
+          /* @__PURE__ */ jsx136(CopyButton, { value: parsedIAM.principal })
+        ] })
+      ] }),
       parsedIAM.details.actions && parsedIAM.details.actions.length > 0 && /* @__PURE__ */ jsxs126(Box10, { "data-testid": EVENT_DETAILS_IAM_ACTIONS_TEST_ID, children: [
-        /* @__PURE__ */ jsx135(Typography7, { sx: { display: "block", fontWeight: 600 }, variant: "caption", children: "Actions" }),
-        parsedIAM.details.actions.map((action) => /* @__PURE__ */ jsx135(Typography7, { sx: { display: "block" }, variant: "body2", children: action }, action))
+        /* @__PURE__ */ jsx136(Typography7, { sx: { display: "block", fontWeight: 600 }, variant: "caption", children: "Actions" }),
+        parsedIAM.details.actions.map((action) => /* @__PURE__ */ jsxs126(Stack, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+          /* @__PURE__ */ jsx136(Typography7, { sx: { display: "block" }, variant: "body2", children: action }),
+          /* @__PURE__ */ jsx136(CopyButton, { value: action })
+        ] }, action))
       ] }),
       parsedIAM.details.resources && parsedIAM.details.resources.length > 0 && /* @__PURE__ */ jsxs126(Box10, { "data-testid": EVENT_DETAILS_IAM_RESOURCES_TEST_ID, children: [
-        /* @__PURE__ */ jsx135(Typography7, { sx: { display: "block", fontWeight: 600 }, variant: "caption", children: "Resources" }),
-        parsedIAM.details.resources.map((resource) => /* @__PURE__ */ jsx135(Typography7, { sx: { display: "block", wordBreak: "break-all" }, variant: "body2", children: resource }, resource))
+        /* @__PURE__ */ jsx136(Typography7, { sx: { display: "block", fontWeight: 600 }, variant: "caption", children: "Resources" }),
+        parsedIAM.details.resources.map((resource) => /* @__PURE__ */ jsxs126(Stack, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+          /* @__PURE__ */ jsx136(Typography7, { sx: { display: "block", wordBreak: "break-all" }, variant: "body2", children: resource }),
+          /* @__PURE__ */ jsx136(CopyButton, { value: resource })
+        ] }, resource))
       ] })
     ] })
   ] });
 };
-var IAMPermissionDetail = ({ events, spanStatusCode }) => /* @__PURE__ */ jsx135(Box10, { children: events.map((event) => /* @__PURE__ */ jsx135(IAMPermissionItem, { event, spanStatusCode }, `${event.span_id}-${event.event_id}`)) });
+var IAMPermissionDetail = ({ events, spanStatusCode }) => /* @__PURE__ */ jsx136(Box10, { children: events.map((event) => /* @__PURE__ */ jsx136(IAMPermissionItem, { event, spanStatusCode }, `${event.span_id}-${event.event_id}`)) });
 
 // src/components/event-details/payload-viewer.tsx
 import { Box as Box12, useTheme as useTheme3 } from "@mui/material";
 
 // node_modules/@textea/json-viewer/dist/index.mjs
 var import_copy_to_clipboard = __toESM(require_copy_to_clipboard(), 1);
-import { jsx as jsx136, jsxs as jsxs127, Fragment as Fragment9 } from "react/jsx-runtime";
+import { jsx as jsx137, jsxs as jsxs127, Fragment as Fragment9 } from "react/jsx-runtime";
 import { Box as Box11, InputBase, NoSsr, SvgIcon, createTheme, ThemeProvider, Paper as Paper2 } from "@mui/material";
-import { createContext as createContext10, useContext as useContext17, useState as useState11, useRef as useRef14, useCallback as useCallback10, useMemo as useMemo9, useEffect as useEffect17, memo as memo9 } from "react";
+import { createContext as createContext10, useContext as useContext17, useState as useState12, useRef as useRef14, useCallback as useCallback11, useMemo as useMemo9, useEffect as useEffect17, memo as memo9 } from "react";
 import { create, useStore, createStore } from "zustand";
 function r(e2) {
   var t2, f2, n2 = "";
@@ -19134,9 +19170,9 @@ async function copyString(value) {
 }
 function useClipboard() {
   let { timeout = 2e3 } = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-  const [copied, setCopied] = useState11(false);
+  const [copied, setCopied] = useState12(false);
   const copyTimeout = useRef14(null);
-  const handleCopyResult = useCallback10((value) => {
+  const handleCopyResult = useCallback11((value) => {
     const current = copyTimeout.current;
     if (current) {
       window.clearTimeout(current);
@@ -19147,7 +19183,7 @@ function useClipboard() {
     timeout
   ]);
   const onCopy = useJsonViewerStore((store) => store.onCopy);
-  const copy = useCallback10(async (path, value) => {
+  const copy = useCallback11(async (path, value) => {
     if (typeof onCopy === "function") {
       try {
         await onCopy(path, value, copyString);
@@ -19168,7 +19204,7 @@ function useClipboard() {
     handleCopyResult,
     onCopy
   ]);
-  const reset = useCallback10(() => {
+  const reset = useCallback11(() => {
     setCopied(false);
     if (copyTimeout.current) {
       clearTimeout(copyTimeout.current);
@@ -19217,7 +19253,7 @@ function useInspect(path, value, nestedIndex) {
     value,
     setInspectCache
   ]);
-  const [inspect, set] = useState11(() => {
+  const [inspect, set] = useState12(() => {
     const shouldInspect = getInspectCache(path, nestedIndex);
     if (shouldInspect !== void 0) {
       return shouldInspect;
@@ -19227,7 +19263,7 @@ function useInspect(path, value, nestedIndex) {
     }
     return isTrap ? false : typeof defaultInspectControl === "function" ? defaultInspectControl(path, value) : depth < defaultInspectDepth;
   });
-  const setInspect = useCallback10((apply) => {
+  const setInspect = useCallback11((apply) => {
     set((oldState) => {
       const newState = typeof apply === "boolean" ? apply : apply(oldState);
       setInspectCache(path, newState, nestedIndex);
@@ -19243,7 +19279,7 @@ function useInspect(path, value, nestedIndex) {
     setInspect
   ];
 }
-var DataBox = (props) => /* @__PURE__ */ jsx136(Box11, {
+var DataBox = (props) => /* @__PURE__ */ jsx137(Box11, {
   component: "div",
   ...props,
   sx: {
@@ -19254,7 +19290,7 @@ var DataBox = (props) => /* @__PURE__ */ jsx136(Box11, {
 var DataTypeLabel = (param) => {
   let { dataType, enable = true } = param;
   if (!enable) return null;
-  return /* @__PURE__ */ jsx136(DataBox, {
+  return /* @__PURE__ */ jsx137(DataBox, {
     className: "data-type-label",
     sx: {
       mx: 0.5,
@@ -19278,12 +19314,12 @@ function defineEasyType(param) {
         color: color2
       },
       children: [
-        displayTypeLabel && storeDisplayDataTypes && /* @__PURE__ */ jsx136(DataTypeLabel, {
+        displayTypeLabel && storeDisplayDataTypes && /* @__PURE__ */ jsx137(DataTypeLabel, {
           dataType: type
         }),
-        /* @__PURE__ */ jsx136(DataBox, {
+        /* @__PURE__ */ jsx137(DataBox, {
           className: "".concat(type, "-value"),
-          children: /* @__PURE__ */ jsx136(Render, {
+          children: /* @__PURE__ */ jsx137(Render, {
             path: props.path,
             inspect: props.inspect,
             setInspect: props.setInspect,
@@ -19304,7 +19340,7 @@ function defineEasyType(param) {
   const EasyTypeEditor = (param2) => {
     let { value, setValue, abortEditing, commitEditing } = param2;
     const color2 = useJsonViewerStore((store) => store.colorspace[colorKey]);
-    const handleKeyDown = useCallback10((event) => {
+    const handleKeyDown = useCallback11((event) => {
       if (event.key === "Enter") {
         event.preventDefault();
         commitEditing(value);
@@ -19318,12 +19354,12 @@ function defineEasyType(param) {
       commitEditing,
       value
     ]);
-    const handleChange = useCallback10((event) => {
+    const handleChange = useCallback11((event) => {
       setValue(event.target.value);
     }, [
       setValue
     ]);
-    return /* @__PURE__ */ jsx136(InputBase, {
+    return /* @__PURE__ */ jsx137(InputBase, {
       autoFocus: true,
       value,
       onChange: handleChange,
@@ -19363,7 +19399,7 @@ var booleanType = defineEasyType({
   },
   Renderer: (param) => {
     let { value } = param;
-    return /* @__PURE__ */ jsx136(Fragment9, {
+    return /* @__PURE__ */ jsx137(Fragment9, {
       children: value ? "true" : "false"
     });
   }
@@ -19382,7 +19418,7 @@ var dateType = defineEasyType({
   colorKey: "base0D",
   Renderer: (param) => {
     let { value } = param;
-    return /* @__PURE__ */ jsx136(Fragment9, {
+    return /* @__PURE__ */ jsx137(Fragment9, {
       children: value.toLocaleTimeString("en-us", displayOptions)
     });
   }
@@ -19413,7 +19449,7 @@ var rb = "}";
 var PreFunctionType = (props) => {
   return /* @__PURE__ */ jsxs127(NoSsr, {
     children: [
-      /* @__PURE__ */ jsx136(DataTypeLabel, {
+      /* @__PURE__ */ jsx137(DataTypeLabel, {
         dataType: "function"
       }),
       /* @__PURE__ */ jsxs127(Box11, {
@@ -19432,8 +19468,8 @@ var PreFunctionType = (props) => {
   });
 };
 var PostFunctionType = () => {
-  return /* @__PURE__ */ jsx136(NoSsr, {
-    children: /* @__PURE__ */ jsx136(Box11, {
+  return /* @__PURE__ */ jsx137(NoSsr, {
+    children: /* @__PURE__ */ jsx137(Box11, {
       component: "span",
       className: "data-function-end",
       children: rb
@@ -19442,15 +19478,15 @@ var PostFunctionType = () => {
 };
 var FunctionType = (props) => {
   const functionColor = useJsonViewerStore((store) => store.colorspace.base05);
-  return /* @__PURE__ */ jsx136(NoSsr, {
-    children: /* @__PURE__ */ jsx136(Box11, {
+  return /* @__PURE__ */ jsx137(NoSsr, {
+    children: /* @__PURE__ */ jsx137(Box11, {
       className: "data-function",
       sx: {
         display: props.inspect ? "block" : "inline-block",
         pl: props.inspect ? 2 : 0,
         color: functionColor
       },
-      children: props.inspect ? functionBody(props.value) : /* @__PURE__ */ jsx136(Box11, {
+      children: props.inspect ? functionBody(props.value) : /* @__PURE__ */ jsx137(Box11, {
         component: "span",
         className: "data-function-body",
         onClick: () => props.setInspect(true),
@@ -19478,7 +19514,7 @@ var nullType = defineEasyType({
   displayTypeLabel: false,
   Renderer: () => {
     const backgroundColor = useJsonViewerStore((store) => store.colorspace.base02);
-    return /* @__PURE__ */ jsx136(Box11, {
+    return /* @__PURE__ */ jsx137(Box11, {
       sx: {
         fontSize: "0.8rem",
         backgroundColor,
@@ -19501,7 +19537,7 @@ var nanType = defineEasyType({
   deserialize: (value) => parseFloat(value),
   Renderer: () => {
     const backgroundColor = useJsonViewerStore((store) => store.colorspace.base02);
-    return /* @__PURE__ */ jsx136(Box11, {
+    return /* @__PURE__ */ jsx137(Box11, {
       sx: {
         backgroundColor,
         fontSize: "0.8rem",
@@ -19521,7 +19557,7 @@ var floatType = defineEasyType({
   deserialize: (value) => parseFloat(value),
   Renderer: (param) => {
     let { value } = param;
-    return /* @__PURE__ */ jsx136(Fragment9, {
+    return /* @__PURE__ */ jsx137(Fragment9, {
       children: value
     });
   }
@@ -19535,7 +19571,7 @@ var intType = defineEasyType({
   deserialize: (value) => parseFloat(value),
   Renderer: (param) => {
     let { value } = param;
-    return /* @__PURE__ */ jsx136(Fragment9, {
+    return /* @__PURE__ */ jsx137(Fragment9, {
       children: value
     });
   }
@@ -19548,79 +19584,79 @@ var bigIntType = defineEasyType({
   deserialize: (value) => BigInt(value.replace(/\D/g, "")),
   Renderer: (param) => {
     let { value } = param;
-    return /* @__PURE__ */ jsx136(Fragment9, {
+    return /* @__PURE__ */ jsx137(Fragment9, {
       children: "".concat(value, "n")
     });
   }
 });
 var BaseIcon = (param) => {
   let { d: d2, ...props } = param;
-  return /* @__PURE__ */ jsx136(SvgIcon, {
+  return /* @__PURE__ */ jsx137(SvgIcon, {
     ...props,
-    children: /* @__PURE__ */ jsx136("path", {
+    children: /* @__PURE__ */ jsx137("path", {
       d: d2
     })
   });
 };
 var AddBox = "M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m0 16H5V5h14zm-8-2h2v-4h4v-2h-4V7h-2v4H7v2h4z";
-var Check = "M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z";
+var Check2 = "M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z";
 var ChevronRight = "M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z";
 var CircularArrows = "M 12 2 C 10.615 1.998 9.214625 2.2867656 7.890625 2.8847656 L 8.9003906 4.6328125 C 9.9043906 4.2098125 10.957 3.998 12 4 C 15.080783 4 17.738521 5.7633175 19.074219 8.3222656 L 17.125 9 L 21.25 11 L 22.875 7 L 20.998047 7.6523438 C 19.377701 4.3110398 15.95585 2 12 2 z M 6.5097656 4.4882812 L 2.2324219 5.0820312 L 3.734375 6.3808594 C 1.6515335 9.4550558 1.3615962 13.574578 3.3398438 17 C 4.0308437 18.201 4.9801562 19.268234 6.1601562 20.115234 L 7.1699219 18.367188 C 6.3019219 17.710187 5.5922656 16.904 5.0722656 16 C 3.5320014 13.332354 3.729203 10.148679 5.2773438 7.7128906 L 6.8398438 9.0625 L 6.5097656 4.4882812 z M 19.929688 13 C 19.794687 14.08 19.450734 15.098 18.927734 16 C 17.386985 18.668487 14.531361 20.090637 11.646484 19.966797 L 12.035156 17.9375 L 8.2402344 20.511719 L 10.892578 23.917969 L 11.265625 21.966797 C 14.968963 22.233766 18.681899 20.426323 20.660156 17 C 21.355156 15.801 21.805219 14.445 21.949219 13 L 19.929688 13 z";
 var Close = "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z";
-var ContentCopy = "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z";
+var ContentCopy2 = "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z";
 var Edit = "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z";
 var ExpandMore = "M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z";
 var Delete = "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6zM8 9h8v10H8zm7.5-5l-1-1h-5l-1 1H5v2h14V4z";
 var AddBoxIcon = (props) => {
-  return /* @__PURE__ */ jsx136(BaseIcon, {
+  return /* @__PURE__ */ jsx137(BaseIcon, {
     d: AddBox,
     ...props
   });
 };
 var CheckIcon = (props) => {
-  return /* @__PURE__ */ jsx136(BaseIcon, {
-    d: Check,
+  return /* @__PURE__ */ jsx137(BaseIcon, {
+    d: Check2,
     ...props
   });
 };
 var ChevronRightIcon = (props) => {
-  return /* @__PURE__ */ jsx136(BaseIcon, {
+  return /* @__PURE__ */ jsx137(BaseIcon, {
     d: ChevronRight,
     ...props
   });
 };
 var CircularArrowsIcon = (props) => {
-  return /* @__PURE__ */ jsx136(BaseIcon, {
+  return /* @__PURE__ */ jsx137(BaseIcon, {
     d: CircularArrows,
     ...props
   });
 };
 var CloseIcon = (props) => {
-  return /* @__PURE__ */ jsx136(BaseIcon, {
+  return /* @__PURE__ */ jsx137(BaseIcon, {
     d: Close,
     ...props
   });
 };
 var ContentCopyIcon = (props) => {
-  return /* @__PURE__ */ jsx136(BaseIcon, {
-    d: ContentCopy,
+  return /* @__PURE__ */ jsx137(BaseIcon, {
+    d: ContentCopy2,
     ...props
   });
 };
 var EditIcon = (props) => {
-  return /* @__PURE__ */ jsx136(BaseIcon, {
+  return /* @__PURE__ */ jsx137(BaseIcon, {
     d: Edit,
     ...props
   });
 };
 var ExpandMoreIcon = (props) => {
-  return /* @__PURE__ */ jsx136(BaseIcon, {
+  return /* @__PURE__ */ jsx137(BaseIcon, {
     d: ExpandMore,
     ...props
   });
 };
 var DeleteIcon = (props) => {
-  return /* @__PURE__ */ jsx136(BaseIcon, {
+  return /* @__PURE__ */ jsx137(BaseIcon, {
     d: Delete,
     ...props
   });
@@ -19667,7 +19703,7 @@ var PreObjectType = (props) => {
     },
     children: [
       isArrayLike ? arrayLb : objectLb,
-      shouldDisplaySize && props.inspect && !isEmptyValue && /* @__PURE__ */ jsx136(Box11, {
+      shouldDisplaySize && props.inspect && !isEmptyValue && /* @__PURE__ */ jsx137(Box11, {
         component: "span",
         sx: {
           pl: 0.5,
@@ -19679,14 +19715,14 @@ var PreObjectType = (props) => {
       }),
       isTrap && !props.inspect && /* @__PURE__ */ jsxs127(Fragment9, {
         children: [
-          /* @__PURE__ */ jsx136(CircularArrowsIcon, {
+          /* @__PURE__ */ jsx137(CircularArrowsIcon, {
             sx: {
               fontSize: 12,
               color: textColor,
               mx: 0.5
             }
           }),
-          /* @__PURE__ */ jsx136(DataBox, {
+          /* @__PURE__ */ jsx137(DataBox, {
             sx: {
               cursor: "pointer",
               userSelect: "none"
@@ -19727,7 +19763,7 @@ var PostObjectType = (props) => {
     },
     children: [
       isArrayLike ? arrayRb : objectRb,
-      shouldDisplaySize && (isEmptyValue || !props.inspect) ? /* @__PURE__ */ jsx136(Box11, {
+      shouldDisplaySize && (isEmptyValue || !props.inspect) ? /* @__PURE__ */ jsx137(Box11, {
         component: "span",
         sx: {
           pl: 0.5,
@@ -19748,7 +19784,7 @@ var ObjectType = (props) => {
   const borderColor = useJsonViewerStore((store) => store.colorspace.base02);
   const groupArraysAfterLength = useJsonViewerStore((store) => store.groupArraysAfterLength);
   const isTrap = useIsCycleReference(props.path, props.value);
-  const [displayLength, setDisplayLength] = useState11(useJsonViewerStore((store) => store.maxDisplayLength));
+  const [displayLength, setDisplayLength] = useState12(useJsonViewerStore((store) => store.maxDisplayLength));
   const objectSortKeys = useJsonViewerStore((store) => store.objectSortKeys);
   const elements = useMemo9(() => {
     if (!props.inspect) {
@@ -19767,7 +19803,7 @@ var ObjectType = (props) => {
             ...props.path,
             key
           ];
-          elements3.push(/* @__PURE__ */ jsx136(DataKeyPair, {
+          elements3.push(/* @__PURE__ */ jsx137(DataKeyPair, {
             path,
             value: value2,
             prevValue: props.prevValue instanceof Map ? props.prevValue.get(k2) : void 0,
@@ -19783,7 +19819,7 @@ var ObjectType = (props) => {
         while (true) {
           const nextResult = iterator2.next();
           var _nextResult_done;
-          elements3.push(/* @__PURE__ */ jsx136(DataKeyPair, {
+          elements3.push(/* @__PURE__ */ jsx137(DataKeyPair, {
             path: [
               ...props.path,
               "iterator:".concat(count2)
@@ -19811,7 +19847,7 @@ var ObjectType = (props) => {
             ...props.path,
             index
           ];
-          return /* @__PURE__ */ jsx136(DataKeyPair, {
+          return /* @__PURE__ */ jsx137(DataKeyPair, {
             path,
             value: value2,
             prevValue: Array.isArray(props.prevValue) ? props.prevValue[index] : void 0,
@@ -19843,7 +19879,7 @@ var ObjectType = (props) => {
       const prevElements = Array.isArray(props.prevValue) ? segmentArray(props.prevValue, groupArraysAfterLength) : void 0;
       const elementsLastIndex = elements3.length - 1;
       return elements3.map((list, index) => {
-        return /* @__PURE__ */ jsx136(DataKeyPair, {
+        return /* @__PURE__ */ jsx137(DataKeyPair, {
           path: props.path,
           value: list,
           nestedIndex: index,
@@ -19870,7 +19906,7 @@ var ObjectType = (props) => {
         ...props.path,
         key
       ];
-      return /* @__PURE__ */ jsx136(DataKeyPair, {
+      return /* @__PURE__ */ jsx137(DataKeyPair, {
         path,
         value: value2,
         prevValue: (_props_prevValue = props.prevValue) === null || _props_prevValue === void 0 ? void 0 : _props_prevValue[key],
@@ -19917,7 +19953,7 @@ var ObjectType = (props) => {
   if (isEmptyValue) {
     return null;
   }
-  return /* @__PURE__ */ jsx136(Box11, {
+  return /* @__PURE__ */ jsx137(Box11, {
     className: "data-object",
     sx: {
       display: props.inspect ? "block" : "inline-block",
@@ -19926,7 +19962,7 @@ var ObjectType = (props) => {
       color: keyColor,
       borderLeft: props.inspect ? "1px solid ".concat(borderColor) : "none"
     },
-    children: props.inspect ? elements : !isTrap && /* @__PURE__ */ jsx136(Box11, {
+    children: props.inspect ? elements : !isTrap && /* @__PURE__ */ jsx137(Box11, {
       component: "span",
       className: "data-object-body",
       onClick: () => props.setInspect(true),
@@ -19954,7 +19990,7 @@ var stringType = defineEasyType({
   serialize: (value) => value,
   deserialize: (value) => value,
   Renderer: (props) => {
-    const [showRest, setShowRest] = useState11(false);
+    const [showRest, setShowRest] = useState12(false);
     const collapseStringsAfterLength = useJsonViewerStore((store) => store.collapseStringsAfterLength);
     const value = showRest ? props.value : props.value.slice(0, collapseStringsAfterLength);
     const hasRest = props.value.length > collapseStringsAfterLength;
@@ -19976,7 +20012,7 @@ var stringType = defineEasyType({
       children: [
         '"',
         value,
-        hasRest && !showRest && /* @__PURE__ */ jsx136(Box11, {
+        hasRest && !showRest && /* @__PURE__ */ jsx137(Box11, {
           component: "span",
           sx: {
             padding: 0.5
@@ -19995,7 +20031,7 @@ var undefinedType = defineEasyType({
   displayTypeLabel: false,
   Renderer: () => {
     const backgroundColor = useJsonViewerStore((store) => store.colorspace.base02);
-    return /* @__PURE__ */ jsx136(Box11, {
+    return /* @__PURE__ */ jsx137(Box11, {
       sx: {
         fontSize: "0.7rem",
         backgroundColor,
@@ -20076,7 +20112,7 @@ function useTypeComponents(value, path) {
     registry
   ]);
 }
-var IconBox = (props) => /* @__PURE__ */ jsx136(Box11, {
+var IconBox = (props) => /* @__PURE__ */ jsx137(Box11, {
   component: "span",
   ...props,
   sx: {
@@ -20108,7 +20144,7 @@ var DataKeyPair = (props) => {
     storeEditable,
     value
   ]);
-  const [tempValue, setTempValue] = useState11("");
+  const [tempValue, setTempValue] = useState12("");
   const depth = path.length;
   const key = path[depth - 1];
   const hoverPath = useJsonViewerStore((store) => store.hoverPath);
@@ -20122,7 +20158,7 @@ var DataKeyPair = (props) => {
   const setHover = useJsonViewerStore((store) => store.setHover);
   const root = useJsonViewerStore((store) => store.value);
   const [inspect, setInspect] = useInspect(path, value, nestedIndex);
-  const [editing, setEditing] = useState11(false);
+  const [editing, setEditing] = useState12(false);
   const onChange = useJsonViewerStore((store) => store.onChange);
   const keyColor = useTextColor();
   const numberKeyColor = useJsonViewerStore((store) => store.colorspace.base0C);
@@ -20231,7 +20267,7 @@ var DataKeyPair = (props) => {
     prevValue,
     value
   ]);
-  const startEditing = useCallback10((event) => {
+  const startEditing = useCallback11((event) => {
     event.preventDefault();
     if (serialize) setTempValue(serialize(value));
     setEditing(true);
@@ -20239,14 +20275,14 @@ var DataKeyPair = (props) => {
     serialize,
     value
   ]);
-  const abortEditing = useCallback10(() => {
+  const abortEditing = useCallback11(() => {
     setEditing(false);
     setTempValue("");
   }, [
     setEditing,
     setTempValue
   ]);
-  const commitEditing = useCallback10((newValue) => {
+  const commitEditing = useCallback11((newValue) => {
     setEditing(false);
     if (!deserialize) return;
     try {
@@ -20264,16 +20300,16 @@ var DataKeyPair = (props) => {
     if (editing) {
       return /* @__PURE__ */ jsxs127(Fragment9, {
         children: [
-          /* @__PURE__ */ jsx136(IconBox, {
-            children: /* @__PURE__ */ jsx136(CloseIcon, {
+          /* @__PURE__ */ jsx137(IconBox, {
+            children: /* @__PURE__ */ jsx137(CloseIcon, {
               sx: {
                 fontSize: ".8rem"
               },
               onClick: abortEditing
             })
           }),
-          /* @__PURE__ */ jsx136(IconBox, {
-            children: /* @__PURE__ */ jsx136(CheckIcon, {
+          /* @__PURE__ */ jsx137(IconBox, {
+            children: /* @__PURE__ */ jsx137(CheckIcon, {
               sx: {
                 fontSize: ".8rem"
               },
@@ -20285,7 +20321,7 @@ var DataKeyPair = (props) => {
     }
     return /* @__PURE__ */ jsxs127(Fragment9, {
       children: [
-        enableClipboard && /* @__PURE__ */ jsx136(IconBox, {
+        enableClipboard && /* @__PURE__ */ jsx137(IconBox, {
           onClick: (event) => {
             event.preventDefault();
             try {
@@ -20294,41 +20330,41 @@ var DataKeyPair = (props) => {
               console.error(e2);
             }
           },
-          children: copied ? /* @__PURE__ */ jsx136(CheckIcon, {
+          children: copied ? /* @__PURE__ */ jsx137(CheckIcon, {
             sx: {
               fontSize: ".8rem"
             }
-          }) : /* @__PURE__ */ jsx136(ContentCopyIcon, {
+          }) : /* @__PURE__ */ jsx137(ContentCopyIcon, {
             sx: {
               fontSize: ".8rem"
             }
           })
         }),
-        Editor && editable && serialize && deserialize && /* @__PURE__ */ jsx136(IconBox, {
+        Editor && editable && serialize && deserialize && /* @__PURE__ */ jsx137(IconBox, {
           onClick: startEditing,
-          children: /* @__PURE__ */ jsx136(EditIcon, {
+          children: /* @__PURE__ */ jsx137(EditIcon, {
             sx: {
               fontSize: ".8rem"
             }
           })
         }),
-        enableAdd && /* @__PURE__ */ jsx136(IconBox, {
+        enableAdd && /* @__PURE__ */ jsx137(IconBox, {
           onClick: (event) => {
             event.preventDefault();
             onAdd === null || onAdd === void 0 ? void 0 : onAdd(path);
           },
-          children: /* @__PURE__ */ jsx136(AddBoxIcon, {
+          children: /* @__PURE__ */ jsx137(AddBoxIcon, {
             sx: {
               fontSize: ".8rem"
             }
           })
         }),
-        enableDelete && /* @__PURE__ */ jsx136(IconBox, {
+        enableDelete && /* @__PURE__ */ jsx137(IconBox, {
           onClick: (event) => {
             event.preventDefault();
             onDelete === null || onDelete === void 0 ? void 0 : onDelete(path, value);
           },
-          children: /* @__PURE__ */ jsx136(DeleteIcon, {
+          children: /* @__PURE__ */ jsx137(DeleteIcon, {
             sx: {
               fontSize: ".9rem"
             }
@@ -20382,7 +20418,7 @@ var DataKeyPair = (props) => {
     sx: {
       userSelect: "text"
     },
-    onMouseEnter: useCallback10(() => setHover(path, nestedIndex), [
+    onMouseEnter: useCallback11(() => setHover(path, nestedIndex), [
       setHover,
       path,
       nestedIndex
@@ -20397,7 +20433,7 @@ var DataKeyPair = (props) => {
           letterSpacing: 0.5,
           opacity: 0.8
         },
-        onClick: useCallback10((event) => {
+        onClick: useCallback11((event) => {
           if (event.isDefaultPrevented()) {
             return;
           }
@@ -20409,7 +20445,7 @@ var DataKeyPair = (props) => {
           setInspect
         ]),
         children: [
-          expandable ? inspect ? /* @__PURE__ */ jsx136(ExpandMoreIcon, {
+          expandable ? inspect ? /* @__PURE__ */ jsx137(ExpandMoreIcon, {
             className: "data-key-toggle-expanded",
             sx: {
               fontSize: ".8rem",
@@ -20417,7 +20453,7 @@ var DataKeyPair = (props) => {
                 cursor: "pointer"
               }
             }
-          }) : /* @__PURE__ */ jsx136(ChevronRightIcon, {
+          }) : /* @__PURE__ */ jsx137(ChevronRightIcon, {
             className: "data-key-toggle-collapsed",
             sx: {
               fontSize: ".8rem",
@@ -20426,7 +20462,7 @@ var DataKeyPair = (props) => {
               }
             }
           }) : null,
-          /* @__PURE__ */ jsx136(Box11, {
+          /* @__PURE__ */ jsx137(Box11, {
             ref: highlightContainer,
             className: "data-key-key",
             component: "span",
@@ -20436,11 +20472,11 @@ var DataKeyPair = (props) => {
                 rootName,
                 '"'
               ]
-            }) : /* @__PURE__ */ jsx136(Fragment9, {
+            }) : /* @__PURE__ */ jsx137(Fragment9, {
               children: rootName
-            }) : null : KeyRenderer.when(downstreamProps) ? /* @__PURE__ */ jsx136(KeyRenderer, {
+            }) : null : KeyRenderer.when(downstreamProps) ? /* @__PURE__ */ jsx137(KeyRenderer, {
               ...downstreamProps
-            }) : nestedIndex === void 0 && (isNumberKey ? /* @__PURE__ */ jsx136(Box11, {
+            }) : nestedIndex === void 0 && (isNumberKey ? /* @__PURE__ */ jsx137(Box11, {
               component: "span",
               style: {
                 color: numberKeyColor,
@@ -20453,17 +20489,17 @@ var DataKeyPair = (props) => {
                 key,
                 '"'
               ]
-            }) : /* @__PURE__ */ jsx136(Fragment9, {
+            }) : /* @__PURE__ */ jsx137(Fragment9, {
               children: key
             }))
           }),
-          isRoot ? rootName !== false && /* @__PURE__ */ jsx136(DataBox, {
+          isRoot ? rootName !== false && /* @__PURE__ */ jsx137(DataBox, {
             className: "data-key-colon",
             sx: {
               mr: 0.5
             },
             children: ":"
-          }) : nestedIndex === void 0 && /* @__PURE__ */ jsx136(DataBox, {
+          }) : nestedIndex === void 0 && /* @__PURE__ */ jsx137(DataBox, {
             className: "data-key-colon",
             sx: {
               mr: 0.5,
@@ -20474,29 +20510,29 @@ var DataKeyPair = (props) => {
             },
             children: ":"
           }),
-          PreComponent && /* @__PURE__ */ jsx136(PreComponent, {
+          PreComponent && /* @__PURE__ */ jsx137(PreComponent, {
             ...downstreamProps
           }),
           isHover && expandable && inspect && actionIcons
         ]
       }),
-      editing && editable ? Editor && /* @__PURE__ */ jsx136(Editor, {
+      editing && editable ? Editor && /* @__PURE__ */ jsx137(Editor, {
         path,
         value: tempValue,
         setValue: setTempValue,
         abortEditing,
         commitEditing
-      }) : Component ? /* @__PURE__ */ jsx136(Component, {
+      }) : Component ? /* @__PURE__ */ jsx137(Component, {
         ...downstreamProps
-      }) : /* @__PURE__ */ jsx136(Box11, {
+      }) : /* @__PURE__ */ jsx137(Box11, {
         component: "span",
         className: "data-value-fallback",
         children: "fallback: ".concat(value)
       }),
-      PostComponent && /* @__PURE__ */ jsx136(PostComponent, {
+      PostComponent && /* @__PURE__ */ jsx137(PostComponent, {
         ...downstreamProps
       }),
-      !last && displayComma && /* @__PURE__ */ jsx136(DataBox, {
+      !last && displayComma && /* @__PURE__ */ jsx137(DataBox, {
         children: ","
       }),
       isHover && expandable && !inspect && actionIcons,
@@ -20507,7 +20543,7 @@ var DataKeyPair = (props) => {
 };
 var query = "(prefers-color-scheme: dark)";
 function useThemeDetector() {
-  const [isDark, setIsDark] = useState11(false);
+  const [isDark, setIsDark] = useState12(false);
   useEffect17(() => {
     const listener = (e2) => setIsDark(e2.matches);
     setIsDark(window.matchMedia(query).matches);
@@ -20613,10 +20649,10 @@ var JsonViewerInner = (props) => {
   const prevValue = useJsonViewerStore((store) => store.prevValue);
   const emptyPath = useMemo9(() => [], []);
   const setHover = useJsonViewerStore((store) => store.setHover);
-  const onMouseLeave = useCallback10(() => setHover(null), [
+  const onMouseLeave = useCallback11(() => setHover(null), [
     setHover
   ]);
-  return /* @__PURE__ */ jsx136(Paper2, {
+  return /* @__PURE__ */ jsx137(Paper2, {
     elevation: 0,
     className: clsx(themeCls, props.className),
     style: props.style,
@@ -20627,7 +20663,7 @@ var JsonViewerInner = (props) => {
       ...props.sx
     },
     onMouseLeave,
-    children: /* @__PURE__ */ jsx136(DataKeyPair, {
+    children: /* @__PURE__ */ jsx137(DataKeyPair, {
       value,
       prevValue,
       path: emptyPath,
@@ -20679,13 +20715,13 @@ var JsonViewer = function JsonViewer2(props) {
   };
   const jsonViewerStore = useMemo9(() => createJsonViewerStore(props), []);
   const typeRegistryStore = useMemo9(() => createTypeRegistryStore(), []);
-  return /* @__PURE__ */ jsx136(ThemeProvider, {
+  return /* @__PURE__ */ jsx137(ThemeProvider, {
     theme,
-    children: /* @__PURE__ */ jsx136(TypeRegistryStoreContext.Provider, {
+    children: /* @__PURE__ */ jsx137(TypeRegistryStoreContext.Provider, {
       value: typeRegistryStore,
-      children: /* @__PURE__ */ jsx136(JsonViewerStoreContext.Provider, {
+      children: /* @__PURE__ */ jsx137(JsonViewerStoreContext.Provider, {
         value: jsonViewerStore,
-        children: /* @__PURE__ */ jsx136(JsonViewerInner, {
+        children: /* @__PURE__ */ jsx137(JsonViewerInner, {
           ...mixedProps
         })
       })
@@ -20695,7 +20731,7 @@ var JsonViewer = function JsonViewer2(props) {
 
 // src/components/event-details/payload-viewer.tsx
 import { memo as memo10 } from "react";
-import { jsx as jsx137 } from "react/jsx-runtime";
+import { jsx as jsx138 } from "react/jsx-runtime";
 function tryParseJson(value) {
   if (typeof value !== "string") {
     return value;
@@ -20708,12 +20744,12 @@ function tryParseJson(value) {
 }
 var PayloadViewer = memo10(({ sx, testId, value }) => {
   const theme = useTheme3();
-  return /* @__PURE__ */ jsx137(Box12, { "data-testid": testId, sx: { backgroundColor: "background.default", borderRadius: 1, fontSize: 12, overflow: "auto", p: 1, ...sx }, children: /* @__PURE__ */ jsx137(
+  return /* @__PURE__ */ jsx138(Box12, { "data-testid": testId, sx: { backgroundColor: "background.default", borderRadius: 1, fontSize: 12, overflow: "auto", p: 1, ...sx }, children: /* @__PURE__ */ jsx138(
     JsonViewer,
     {
       displayDataTypes: false,
       displaySize: false,
-      enableClipboard: false,
+      enableClipboard: true,
       rootName: false,
       theme: theme.palette.mode,
       value
@@ -20722,14 +20758,14 @@ var PayloadViewer = memo10(({ sx, testId, value }) => {
 });
 
 // src/components/event-details/event-detail.tsx
-import { Fragment as Fragment10, jsx as jsx138, jsxs as jsxs128 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx139, jsxs as jsxs128 } from "react/jsx-runtime";
 var DetailRow2 = ({ content, label }) => /* @__PURE__ */ jsxs128(Box13, { sx: { display: "grid", gap: 1, gridTemplateColumns: "72px 1fr", mb: 0.5 }, children: [
-  /* @__PURE__ */ jsx138(Typography8, { color: "text.secondary", sx: { fontWeight: 600 }, variant: "caption", children: label }),
-  /* @__PURE__ */ jsx138(Box13, { children: typeof content === "string" ? /* @__PURE__ */ jsx138(Typography8, { sx: { color: "text.primary", whiteSpace: "pre-wrap" }, variant: "caption", children: content }) : content })
+  /* @__PURE__ */ jsx139(Typography8, { color: "text.secondary", sx: { fontWeight: 600 }, variant: "caption", children: label }),
+  /* @__PURE__ */ jsx139(Box13, { children: typeof content === "string" ? /* @__PURE__ */ jsx139(Typography8, { sx: { color: "text.primary", whiteSpace: "pre-wrap" }, variant: "caption", children: content }) : content })
 ] });
 var EventMessage = ({ event }) => {
-  const [isOpen, setIsOpen] = useState12(false);
-  const [isOverflowing, setIsOverflowing] = useState12(false);
+  const [isOpen, setIsOpen] = useState13(false);
+  const [isOverflowing, setIsOverflowing] = useState13(false);
   const textReference = useRef15(null);
   const parsedMessage = useMemo10(() => parseEventMessage(event), [event]);
   const isIAMPolicyEvent = useMemo10(
@@ -20759,18 +20795,18 @@ var EventMessage = ({ event }) => {
   );
   return /* @__PURE__ */ jsxs128(Box13, { sx: { display: "flex", flexDirection: "column" }, children: [
     /* @__PURE__ */ jsxs128(Box13, { sx: { alignItems: "center", display: "flex" }, children: [
-      Boolean(shouldShowToggle) && /* @__PURE__ */ jsx138(
-        IconButton2,
+      Boolean(shouldShowToggle) && /* @__PURE__ */ jsx139(
+        IconButton3,
         {
           onClick: () => {
             setIsOpen(!isOpen);
           },
           size: "small",
           sx: { mr: 1, p: 0 },
-          children: isOpen ? /* @__PURE__ */ jsx138(KeyboardArrowDown, { sx: { fontSize: 16 } }) : /* @__PURE__ */ jsx138(KeyboardArrowRight, { sx: { fontSize: 16 } })
+          children: isOpen ? /* @__PURE__ */ jsx139(KeyboardArrowDown, { sx: { fontSize: 16 } }) : /* @__PURE__ */ jsx139(KeyboardArrowRight, { sx: { fontSize: 16 } })
         }
       ),
-      /* @__PURE__ */ jsx138(
+      /* @__PURE__ */ jsx139(
         Typography8,
         {
           ref: textReference,
@@ -20788,12 +20824,12 @@ var EventMessage = ({ event }) => {
         }
       )
     ] }),
-    isOpen && /* @__PURE__ */ jsx138(Box13, { sx: { borderColor: "divider", borderLeft: "2px solid", ml: 1, mt: 0.5, pl: 1.5, py: 0.5 }, children: isIAMPolicyEvent ? /* @__PURE__ */ jsx138(IAMEventDetail, { event }) : /* @__PURE__ */ jsxs128(Fragment10, { children: [
-      Boolean(parsedMessage.message) && /* @__PURE__ */ jsx138(DetailRow2, { content: parsedMessage.message, label: "Message" }),
-      Boolean(parsedMessage.details) && /* @__PURE__ */ jsx138(
+    isOpen && /* @__PURE__ */ jsx139(Box13, { sx: { borderColor: "divider", borderLeft: "2px solid", ml: 1, mt: 0.5, pl: 1.5, py: 0.5 }, children: isIAMPolicyEvent ? /* @__PURE__ */ jsx139(IAMEventDetail, { event }) : /* @__PURE__ */ jsxs128(Fragment10, { children: [
+      Boolean(parsedMessage.message) && /* @__PURE__ */ jsx139(DetailRow2, { content: parsedMessage.message, label: "Message" }),
+      Boolean(parsedMessage.details) && /* @__PURE__ */ jsx139(
         DetailRow2,
         {
-          content: /* @__PURE__ */ jsx138(PayloadViewer, { sx: { px: 0 }, value: tryParseJson(parsedMessage.details) }),
+          content: /* @__PURE__ */ jsx139(PayloadViewer, { sx: { px: 0 }, value: tryParseJson(parsedMessage.details) }),
           label: "Details"
         }
       )
@@ -20826,15 +20862,15 @@ var EventDetail = ({
   type
 }) => {
   if (type === "permission") {
-    return /* @__PURE__ */ jsx138(IAMPermissionDetail, { events, spanStatusCode });
+    return /* @__PURE__ */ jsx139(IAMPermissionDetail, { events, spanStatusCode });
   }
   const eventLevel = getEventLevelFromGroup(type);
   return /* @__PURE__ */ jsxs128(Box13, { children: [
     /* @__PURE__ */ jsxs128(Box13, { sx: { alignItems: "center", display: "flex", mb: 0.5 }, children: [
-      /* @__PURE__ */ jsx138(StatusIcon2, { errorLevel: eventLevel }),
-      /* @__PURE__ */ jsx138(Typography8, { color: "text.secondary", sx: { fontWeight: 600, ml: 0.5 }, variant: "caption", children: displayText })
+      /* @__PURE__ */ jsx139(StatusIcon2, { errorLevel: eventLevel }),
+      /* @__PURE__ */ jsx139(Typography8, { color: "text.secondary", sx: { fontWeight: 600, ml: 0.5 }, variant: "caption", children: displayText })
     ] }),
-    /* @__PURE__ */ jsx138(Box13, { children: events.map((event) => /* @__PURE__ */ jsx138(Box13, { sx: { maxWidth: "100%", mb: 0.5 }, children: /* @__PURE__ */ jsx138(EventMessage, { event }) }, `${event.span_id}-${event.event_id}`)) })
+    /* @__PURE__ */ jsx139(Box13, { children: events.map((event) => /* @__PURE__ */ jsx139(Box13, { sx: { maxWidth: "100%", mb: 0.5 }, children: /* @__PURE__ */ jsx139(EventMessage, { event }) }, `${event.span_id}-${event.event_id}`)) })
   ] });
 };
 
@@ -30526,8 +30562,8 @@ var QueryStatus = {
 
 // src/components/event-details/lambda-invoke-logs-section.tsx
 import { Box as Box14, CircularProgress as CircularProgress3, Stack as Stack2, Typography as Typography9 } from "@mui/material";
-import { useEffect as useEffect19, useMemo as useMemo11, useRef as useRef16, useState as useState13 } from "react";
-import { jsx as jsx139, jsxs as jsxs129 } from "react/jsx-runtime";
+import { useEffect as useEffect19, useMemo as useMemo11, useRef as useRef16, useState as useState14 } from "react";
+import { jsx as jsx140, jsxs as jsxs129 } from "react/jsx-runtime";
 var POLL_INTERVAL_MS = 1e3;
 async function pollQueryResults(client, queryId) {
   return client.send(new GetQueryResultsCommand({ queryId }));
@@ -30555,9 +30591,9 @@ function useCloudWatchLogsClient(region) {
   return client;
 }
 function useLambdaInvokeLogs(functionName2, requestId, region, startTimeNano, endTimeNano) {
-  const [loading, setLoading] = useState13(true);
-  const [logs, setLogs] = useState13([]);
-  const [error, setError] = useState13();
+  const [loading, setLoading] = useState14(true);
+  const [logs, setLogs] = useState14([]);
+  const [error, setError] = useState14();
   const pollTimerRef = useRef16(null);
   const cloudWatchLogs = useCloudWatchLogsClient(region);
   useEffect19(() => {
@@ -30618,26 +30654,26 @@ var LambdaInvokeLogsSection = ({ endTimeNano, functionName: functionName2, regio
   const { error, loading, logs } = useLambdaInvokeLogs(functionName2, requestId, region, startTimeNano, endTimeNano);
   if (loading) {
     return /* @__PURE__ */ jsxs129(Stack2, { alignItems: "center", direction: "row", spacing: 1, children: [
-      /* @__PURE__ */ jsx139(CircularProgress3, { size: 14 }),
-      /* @__PURE__ */ jsx139(Typography9, { color: "text.secondary", variant: "body2", children: "Loading logs\u2026" })
+      /* @__PURE__ */ jsx140(CircularProgress3, { size: 14 }),
+      /* @__PURE__ */ jsx140(Typography9, { color: "text.secondary", variant: "body2", children: "Loading logs\u2026" })
     ] });
   }
   if (error !== void 0) {
-    return /* @__PURE__ */ jsx139(Typography9, { color: "error", variant: "body2", children: error.message });
+    return /* @__PURE__ */ jsx140(Typography9, { color: "error", variant: "body2", children: error.message });
   }
   if (logs.length === 0) {
-    return /* @__PURE__ */ jsx139(Typography9, { color: "text.secondary", variant: "body2", children: "No logs found for this invocation." });
+    return /* @__PURE__ */ jsx140(Typography9, { color: "text.secondary", variant: "body2", children: "No logs found for this invocation." });
   }
-  return /* @__PURE__ */ jsx139(Box14, { sx: { backgroundColor: (theme) => theme.palette.background.default, borderRadius: 1, p: 1 }, children: /* @__PURE__ */ jsx139("pre", { style: { margin: 0, overflow: "auto" }, children: logs.map((log) => /* @__PURE__ */ jsx139(Typography9, { variant: "body2", children: `[${log.timestamp}] ${log.message}` }, log.ptr)) }) });
+  return /* @__PURE__ */ jsx140(Box14, { sx: { backgroundColor: (theme) => theme.palette.background.default, borderRadius: 1, p: 1 }, children: /* @__PURE__ */ jsx140("pre", { style: { margin: 0, overflow: "auto" }, children: logs.map((log) => /* @__PURE__ */ jsx140(Typography9, { variant: "body2", children: `[${log.timestamp}] ${log.message}` }, log.ptr)) }) });
 };
 
 // src/components/event-details/toggle-section.tsx
 import { KeyboardArrowDown as KeyboardArrowDown2, KeyboardArrowRight as KeyboardArrowRight2 } from "@mui/icons-material";
 import { Box as Box15, Typography as Typography10 } from "@mui/material";
-import { useState as useState14 } from "react";
-import { jsx as jsx140, jsxs as jsxs130 } from "react/jsx-runtime";
+import { useState as useState15 } from "react";
+import { jsx as jsx141, jsxs as jsxs130 } from "react/jsx-runtime";
 var ToggleSection = ({ action, children, headline, initialOpen = true }) => {
-  const [isOpen, setIsOpen] = useState14(initialOpen);
+  const [isOpen, setIsOpen] = useState15(initialOpen);
   return /* @__PURE__ */ jsxs130(Box15, { sx: { mt: 4 }, children: [
     /* @__PURE__ */ jsxs130(
       Box15,
@@ -30663,23 +30699,23 @@ var ToggleSection = ({ action, children, headline, initialOpen = true }) => {
                 gap: 1
               },
               children: [
-                /* @__PURE__ */ jsx140(Typography10, { sx: { fontWeight: 600 }, variant: "subtitle2", children: headline }),
-                isOpen ? /* @__PURE__ */ jsx140(KeyboardArrowDown2, { sx: { color: "text.secondary", height: 20, width: 20 } }) : /* @__PURE__ */ jsx140(KeyboardArrowRight2, { sx: { color: "text.secondary", height: 20, width: 20 } })
+                /* @__PURE__ */ jsx141(Typography10, { sx: { fontWeight: 600 }, variant: "subtitle2", children: headline }),
+                isOpen ? /* @__PURE__ */ jsx141(KeyboardArrowDown2, { sx: { color: "text.secondary", height: 20, width: 20 } }) : /* @__PURE__ */ jsx141(KeyboardArrowRight2, { sx: { color: "text.secondary", height: 20, width: 20 } })
               ]
             }
           ),
-          action !== false && /* @__PURE__ */ jsx140(Box15, { onClick: (event) => {
+          action !== false && /* @__PURE__ */ jsx141(Box15, { onClick: (event) => {
             event.stopPropagation();
           }, children: action })
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsx140(Box15, { children })
+    isOpen && /* @__PURE__ */ jsx141(Box15, { children })
   ] });
 };
 
 // src/components/event-details/event-details.tsx
-import { Fragment as Fragment11, jsx as jsx141, jsxs as jsxs131 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx142, jsxs as jsxs131 } from "react/jsx-runtime";
 var checkIsLambdaInvoke = (span) => {
   if (span.service_name !== "lambda") {
     return false;
@@ -30698,9 +30734,9 @@ var EventDetails = ({ onClose, selectedEvent }) => {
     () => getEventGroupsByType(selectedEvent?.events ?? []),
     [selectedEvent?.events]
   );
-  const [parseNestedJson, setParseNestedJson] = useState15(true);
+  const [parseNestedJson, setParseNestedJson] = useState16(true);
   if (!selectedEvent) {
-    return /* @__PURE__ */ jsx141(Box16, { sx: { p: 3, textAlign: "center" }, children: /* @__PURE__ */ jsx141(Typography11, { color: "text.secondary", variant: "body2", children: "Select an operation to view graph" }) });
+    return /* @__PURE__ */ jsx142(Box16, { sx: { p: 3, textAlign: "center" }, children: /* @__PURE__ */ jsx142(Typography11, { color: "text.secondary", variant: "body2", children: "Select an operation to view graph" }) });
   }
   const isLambdaInvoke = checkIsLambdaInvoke(selectedEvent);
   const isSqsSendMessage = checkIsSqsSendMessage(selectedEvent);
@@ -30737,63 +30773,90 @@ var EventDetails = ({ onClose, selectedEvent }) => {
           py: 1
         },
         children: [
-          /* @__PURE__ */ jsx141(Box16, { children: /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "h6", children: "Operation Details" }) }),
-          onClose && /* @__PURE__ */ jsx141(IconButton3, { "data-testid": EVENT_DETAILS_CLOSE_BUTTON_TEST_ID, onClick: onClose, size: "small", children: /* @__PURE__ */ jsx141(Close2, {}) })
+          /* @__PURE__ */ jsx142(Box16, { children: /* @__PURE__ */ jsx142(Typography11, { sx: { fontWeight: 600 }, variant: "h6", children: "Operation Details" }) }),
+          onClose && /* @__PURE__ */ jsx142(IconButton4, { "data-testid": EVENT_DETAILS_CLOSE_BUTTON_TEST_ID, onClick: onClose, size: "small", children: /* @__PURE__ */ jsx142(Close2, {}) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx141(Box16, { sx: { flexGrow: 1, overflow: "auto", p: 2 }, children: /* @__PURE__ */ jsxs131(Stack3, { spacing: 2, children: [
-      /* @__PURE__ */ jsx141(ToggleSection, { headline: "Basic Information", children: /* @__PURE__ */ jsxs131(Stack3, { "data-testid": EVENT_DETAILS_SECTION_BASIC_INFORMATION_TEST_ID, spacing: 1, children: [
+    /* @__PURE__ */ jsx142(Box16, { sx: { flexGrow: 1, overflow: "auto", p: 2 }, children: /* @__PURE__ */ jsxs131(Stack3, { spacing: 2, children: [
+      /* @__PURE__ */ jsx142(ToggleSection, { headline: "Basic Information", children: /* @__PURE__ */ jsxs131(Stack3, { "data-testid": EVENT_DETAILS_SECTION_BASIC_INFORMATION_TEST_ID, spacing: 1, children: [
         /* @__PURE__ */ jsxs131(Box16, { sx: { display: "grid", gap: 2, gridTemplateColumns: "1.3fr 1fr" }, children: [
           /* @__PURE__ */ jsxs131(Box16, { children: [
-            /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Service" }),
-            /* @__PURE__ */ jsx141(Typography11, { "data-testid": EVENT_DETAILS_SERVICE_NAME_TEST_ID, variant: "body2", children: getServiceDisplayName(selectedEvent.service_name) })
+            /* @__PURE__ */ jsx142(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Service" }),
+            /* @__PURE__ */ jsxs131(Stack3, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+              /* @__PURE__ */ jsx142(Typography11, { "data-testid": EVENT_DETAILS_SERVICE_NAME_TEST_ID, variant: "body2", children: getServiceDisplayName(selectedEvent.service_name) }),
+              /* @__PURE__ */ jsx142(CopyButton, { value: getServiceDisplayName(selectedEvent.service_name) })
+            ] })
           ] }),
           /* @__PURE__ */ jsxs131(Box16, { children: [
-            /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Action" }),
-            /* @__PURE__ */ jsx141(Typography11, { "data-testid": EVENT_DETAILS_OPERATION_NAME_TEST_ID, variant: "body2", children: selectedEvent.operation_name })
+            /* @__PURE__ */ jsx142(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Action" }),
+            /* @__PURE__ */ jsxs131(Stack3, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+              /* @__PURE__ */ jsx142(Typography11, { "data-testid": EVENT_DETAILS_OPERATION_NAME_TEST_ID, variant: "body2", children: selectedEvent.operation_name }),
+              /* @__PURE__ */ jsx142(CopyButton, { value: selectedEvent.operation_name })
+            ] })
           ] })
         ] }),
         /* @__PURE__ */ jsxs131(Box16, { sx: cfnResourceType ? { display: "grid", gap: 2, gridTemplateColumns: "1.3fr 1fr" } : void 0, children: [
           /* @__PURE__ */ jsxs131(Box16, { children: [
-            /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource" }),
-            /* @__PURE__ */ jsx141(Typography11, { "data-testid": EVENT_DETAILS_RESOURCE_NAME_TEST_ID, variant: "body2", children: selectedEvent.resource_name })
+            /* @__PURE__ */ jsx142(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource" }),
+            /* @__PURE__ */ jsxs131(Stack3, { alignItems: "center", "data-testid": EVENT_DETAILS_RESOURCE_NAME_TEST_ID, direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+              /* @__PURE__ */ jsx142(Typography11, { variant: "body2", children: selectedEvent.resource_name }),
+              /* @__PURE__ */ jsx142(CopyButton, { value: selectedEvent.resource_name })
+            ] })
           ] }),
           Boolean(cfnResourceType) && /* @__PURE__ */ jsxs131(Box16, { children: [
-            /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource Type" }),
-            /* @__PURE__ */ jsx141(Typography11, { "data-testid": EVENT_DETAILS_CFN_RESOURCE_TYPE_TEST_ID, variant: "body2", children: cfnResourceType })
+            /* @__PURE__ */ jsx142(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource Type" }),
+            /* @__PURE__ */ jsxs131(Stack3, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+              /* @__PURE__ */ jsx142(Typography11, { "data-testid": EVENT_DETAILS_CFN_RESOURCE_TYPE_TEST_ID, variant: "body2", children: cfnResourceType }),
+              /* @__PURE__ */ jsx142(CopyButton, { value: cfnResourceType })
+            ] })
           ] })
         ] }),
         Boolean(resourceArn) && /* @__PURE__ */ jsxs131(Box16, { children: [
-          /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource ARN" }),
-          /* @__PURE__ */ jsx141(Typography11, { "data-testid": EVENT_DETAILS_RESOURCE_ARN_TEST_ID, variant: "body2", children: resourceArn })
+          /* @__PURE__ */ jsx142(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource ARN" }),
+          /* @__PURE__ */ jsxs131(Stack3, { alignItems: "center", "data-testid": EVENT_DETAILS_RESOURCE_ARN_TEST_ID, direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+            /* @__PURE__ */ jsx142(Typography11, { variant: "body2", children: resourceArn }),
+            /* @__PURE__ */ jsx142(CopyButton, { value: resourceArn })
+          ] })
         ] }),
         /* @__PURE__ */ jsxs131(Box16, { sx: { display: "grid", gap: 1, gridTemplateColumns: "1.3fr 1fr" }, children: [
           /* @__PURE__ */ jsxs131(Box16, { children: [
-            /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Account" }),
-            /* @__PURE__ */ jsx141(Typography11, { "data-testid": EVENT_DETAILS_ACCOUNT_TEST_ID, variant: "body2", children: selectedEvent.account_id })
+            /* @__PURE__ */ jsx142(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Account" }),
+            /* @__PURE__ */ jsxs131(Stack3, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+              /* @__PURE__ */ jsx142(Typography11, { "data-testid": EVENT_DETAILS_ACCOUNT_TEST_ID, variant: "body2", children: selectedEvent.account_id }),
+              /* @__PURE__ */ jsx142(CopyButton, { value: selectedEvent.account_id })
+            ] })
           ] }),
           /* @__PURE__ */ jsxs131(Box16, { children: [
-            /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Region" }),
-            /* @__PURE__ */ jsx141(Typography11, { "data-testid": EVENT_DETAILS_REGION_TEST_ID, variant: "body2", children: selectedEvent.region })
+            /* @__PURE__ */ jsx142(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Region" }),
+            /* @__PURE__ */ jsxs131(Stack3, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+              /* @__PURE__ */ jsx142(Typography11, { "data-testid": EVENT_DETAILS_REGION_TEST_ID, variant: "body2", children: selectedEvent.region }),
+              /* @__PURE__ */ jsx142(CopyButton, { value: selectedEvent.region })
+            ] })
           ] })
         ] }),
         /* @__PURE__ */ jsxs131(Box16, { sx: { display: "grid", gap: 1, gridTemplateColumns: duration === void 0 ? "1fr" : "1.3fr 1fr" }, children: [
           /* @__PURE__ */ jsxs131(Box16, { children: [
-            /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Start Time" }),
-            /* @__PURE__ */ jsx141(Typography11, { "data-testid": EVENT_DETAILS_START_TIME_TEST_ID, variant: "body2", children: unixNanoToDate(selectedEvent.start_time_unix_nano)?.toISOString() })
+            /* @__PURE__ */ jsx142(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Start Time" }),
+            /* @__PURE__ */ jsxs131(Stack3, { alignItems: "center", "data-testid": EVENT_DETAILS_START_TIME_TEST_ID, direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+              /* @__PURE__ */ jsx142(Typography11, { variant: "body2", children: unixNanoToDate(selectedEvent.start_time_unix_nano)?.toISOString() }),
+              /* @__PURE__ */ jsx142(CopyButton, { value: unixNanoToDate(selectedEvent.start_time_unix_nano)?.toISOString() })
+            ] })
           ] }),
           duration !== void 0 && /* @__PURE__ */ jsxs131(Box16, { children: [
-            /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Duration" }),
-            /* @__PURE__ */ jsxs131(Typography11, { "data-testid": EVENT_DETAILS_DURATION_TEST_ID, variant: "body2", children: [
-              duration,
-              "ms"
+            /* @__PURE__ */ jsx142(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Duration" }),
+            /* @__PURE__ */ jsxs131(Stack3, { alignItems: "center", "data-testid": EVENT_DETAILS_DURATION_TEST_ID, direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+              /* @__PURE__ */ jsxs131(Typography11, { variant: "body2", children: [
+                duration,
+                "ms"
+              ] }),
+              /* @__PURE__ */ jsx142(CopyButton, { value: `${duration}ms` })
             ] })
           ] })
         ] }),
         /* @__PURE__ */ jsxs131(Box16, { children: [
-          /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Status" }),
-          /* @__PURE__ */ jsx141(Stack3, { alignItems: "center", direction: "row", flexWrap: "wrap", gap: 1, sx: { mb: eventGroups.errors || eventGroups.warnings ? 1 : 0 }, children: /* @__PURE__ */ jsx141(
+          /* @__PURE__ */ jsx142(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Status" }),
+          /* @__PURE__ */ jsx142(Stack3, { alignItems: "center", direction: "row", flexWrap: "wrap", gap: 1, sx: { mb: eventGroups.errors || eventGroups.warnings ? 1 : 0 }, children: /* @__PURE__ */ jsx142(
             Chip3,
             {
               color: selectedEvent.status_code === 2 ? "error" : selectedEvent.status_code === 1 ? "success" : "default",
@@ -30804,50 +30867,50 @@ var EventDetails = ({ onClose, selectedEvent }) => {
           ) })
         ] })
       ] }) }),
-      /* @__PURE__ */ jsx141(Divider4, {}),
+      /* @__PURE__ */ jsx142(Divider4, {}),
       /* @__PURE__ */ jsxs131(ToggleSection, { headline: "Permissions", children: [
-        selectedEvent.iam_errors_suppressed && /* @__PURE__ */ jsx141(Alert4, { "data-testid": EVENT_DETAILS_IAM_ERRORS_SUPPRESSED_TEST_ID, severity: "warning", sx: { mb: 1 }, children: "IAM errors are suppressed \u2014 upgrade your license to view" }),
-        !selectedEvent.iam_errors_suppressed && !eventGroups.permissions && !eventGroups.errors && !eventGroups.warnings && /* @__PURE__ */ jsx141(Typography11, { color: "text.secondary", variant: "body2", children: "There is no permission information available." }),
-        eventGroups.permissions && /* @__PURE__ */ jsx141(EventDetail, { displayText: "Permissions", events: eventGroups.permissions, spanStatusCode: selectedEvent.status_code, type: "permission" }),
-        eventGroups.errors && /* @__PURE__ */ jsx141(EventDetail, { displayText: "Error", events: eventGroups.errors, type: "error" }),
-        eventGroups.warnings && /* @__PURE__ */ jsx141(EventDetail, { displayText: "Warning", events: eventGroups.warnings, type: "warning" })
+        selectedEvent.iam_errors_suppressed && /* @__PURE__ */ jsx142(Alert4, { "data-testid": EVENT_DETAILS_IAM_ERRORS_SUPPRESSED_TEST_ID, severity: "warning", sx: { mb: 1 }, children: "IAM errors are suppressed \u2014 upgrade your license to view" }),
+        !selectedEvent.iam_errors_suppressed && !eventGroups.permissions && !eventGroups.errors && !eventGroups.warnings && /* @__PURE__ */ jsx142(Typography11, { color: "text.secondary", variant: "body2", children: "There is no permission information available." }),
+        eventGroups.permissions && /* @__PURE__ */ jsx142(EventDetail, { displayText: "Permissions", events: eventGroups.permissions, spanStatusCode: selectedEvent.status_code, type: "permission" }),
+        eventGroups.errors && /* @__PURE__ */ jsx142(EventDetail, { displayText: "Error", events: eventGroups.errors, type: "error" }),
+        eventGroups.warnings && /* @__PURE__ */ jsx142(EventDetail, { displayText: "Warning", events: eventGroups.warnings, type: "warning" })
       ] }),
       hasPayloads && /* @__PURE__ */ jsxs131(Fragment11, { children: [
-        /* @__PURE__ */ jsx141(Divider4, {}),
-        /* @__PURE__ */ jsx141(
+        /* @__PURE__ */ jsx142(Divider4, {}),
+        /* @__PURE__ */ jsx142(
           ToggleSection,
           {
-            action: /* @__PURE__ */ jsx141(
+            action: /* @__PURE__ */ jsx142(
               FormControlLabel2,
               {
-                control: /* @__PURE__ */ jsx141(Switch, { checked: !parseNestedJson, onChange: (event) => {
+                control: /* @__PURE__ */ jsx142(Switch, { checked: !parseNestedJson, onChange: (event) => {
                   setParseNestedJson(!event.target.checked);
                 }, size: "small" }),
-                label: /* @__PURE__ */ jsx141(Typography11, { variant: "caption", children: "View raw data" }),
+                label: /* @__PURE__ */ jsx142(Typography11, { variant: "caption", children: "View raw data" }),
                 sx: { mr: 0 }
               }
             ),
             headline: "Payloads",
             children: /* @__PURE__ */ jsxs131(Stack3, { spacing: 2, children: [
               requestPayload !== void 0 && /* @__PURE__ */ jsxs131(Box16, { children: [
-                /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Request" }),
-                /* @__PURE__ */ jsx141(PayloadViewer, { testId: EVENT_DETAILS_REQUEST_PAYLOAD, value: requestPayload })
+                /* @__PURE__ */ jsx142(Typography11, { sx: { fontWeight: 600, mb: 0.5 }, variant: "caption", children: "Request" }),
+                /* @__PURE__ */ jsx142(PayloadViewer, { testId: EVENT_DETAILS_REQUEST_PAYLOAD, value: requestPayload })
               ] }),
               (responsePayload !== void 0 || isResponseSuppressed) && /* @__PURE__ */ jsxs131(Box16, { children: [
-                /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Response" }),
-                isResponseSuppressed ? /* @__PURE__ */ jsx141(Box16, { sx: { py: 1 }, children: /* @__PURE__ */ jsx141(Alert4, { severity: "warning", sx: { mb: 1 }, children: "Response payload is available \u2014 upgrade your license to view" }) }) : /* @__PURE__ */ jsx141(PayloadViewer, { testId: EVENT_DETAILS_RESPONSE_PAYLOAD_TEST_ID, value: responsePayload })
+                /* @__PURE__ */ jsx142(Typography11, { sx: { fontWeight: 600, mb: 0.5 }, variant: "caption", children: "Response" }),
+                isResponseSuppressed ? /* @__PURE__ */ jsx142(Box16, { sx: { py: 1 }, children: /* @__PURE__ */ jsx142(Alert4, { severity: "warning", sx: { mb: 1 }, children: "Response payload is available \u2014 upgrade your license to view" }) }) : /* @__PURE__ */ jsx142(PayloadViewer, { testId: EVENT_DETAILS_RESPONSE_PAYLOAD_TEST_ID, value: responsePayload })
               ] }),
               exceptionPayload !== void 0 && /* @__PURE__ */ jsxs131(Box16, { children: [
-                /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Exception" }),
-                /* @__PURE__ */ jsx141(PayloadViewer, { testId: EVENT_DETAILS_EXCEPTION_PAYLOAD_TEST_ID, value: exceptionPayload })
+                /* @__PURE__ */ jsx142(Typography11, { sx: { fontWeight: 600, mb: 0.5 }, variant: "caption", children: "Exception" }),
+                /* @__PURE__ */ jsx142(PayloadViewer, { testId: EVENT_DETAILS_EXCEPTION_PAYLOAD_TEST_ID, value: exceptionPayload })
               ] })
             ] })
           }
         )
       ] }),
       isLambdaInvoke && requestId !== void 0 && /* @__PURE__ */ jsxs131(Fragment11, { children: [
-        /* @__PURE__ */ jsx141(Divider4, {}),
-        /* @__PURE__ */ jsx141(ToggleSection, { headline: "Lambda Logs", children: /* @__PURE__ */ jsx141(
+        /* @__PURE__ */ jsx142(Divider4, {}),
+        /* @__PURE__ */ jsx142(ToggleSection, { headline: "Lambda Logs", children: /* @__PURE__ */ jsx142(
           LambdaInvokeLogsSection,
           {
             endTimeNano: selectedEvent.end_time_unix_nano ?? selectedEvent.start_time_unix_nano,
@@ -30858,21 +30921,30 @@ var EventDetails = ({ onClose, selectedEvent }) => {
           }
         ) })
       ] }),
-      /* @__PURE__ */ jsx141(Divider4, {}),
-      /* @__PURE__ */ jsx141(ToggleSection, { headline: "Advanced Information", initialOpen: false, children: /* @__PURE__ */ jsxs131(Stack3, { spacing: 1, children: [
+      /* @__PURE__ */ jsx142(Divider4, {}),
+      /* @__PURE__ */ jsx142(ToggleSection, { headline: "Advanced Information", initialOpen: false, children: /* @__PURE__ */ jsxs131(Stack3, { spacing: 1, children: [
         /* @__PURE__ */ jsxs131(Box16, { children: [
-          /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Span ID" }),
-          /* @__PURE__ */ jsx141(Typography11, { "data-testid": EVENT_DETAILS_SPAN_ID_TEST_ID, variant: "body2", children: selectedEvent.span_id })
+          /* @__PURE__ */ jsx142(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Span ID" }),
+          /* @__PURE__ */ jsxs131(Stack3, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+            /* @__PURE__ */ jsx142(Typography11, { "data-testid": EVENT_DETAILS_SPAN_ID_TEST_ID, variant: "body2", children: selectedEvent.span_id }),
+            /* @__PURE__ */ jsx142(CopyButton, { value: selectedEvent.span_id })
+          ] })
         ] }),
         /* @__PURE__ */ jsxs131(Box16, { children: [
-          /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Trace ID" }),
-          /* @__PURE__ */ jsx141(Typography11, { "data-testid": EVENT_DETAILS_TRACE_ID_TEST_ID, variant: "body2", children: selectedEvent.trace_id })
+          /* @__PURE__ */ jsx142(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Trace ID" }),
+          /* @__PURE__ */ jsxs131(Stack3, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+            /* @__PURE__ */ jsx142(Typography11, { "data-testid": EVENT_DETAILS_TRACE_ID_TEST_ID, variant: "body2", children: selectedEvent.trace_id }),
+            /* @__PURE__ */ jsx142(CopyButton, { value: selectedEvent.trace_id })
+          ] })
         ] }),
         requestId !== void 0 && /* @__PURE__ */ jsxs131(Box16, { children: [
-          /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Request ID" }),
-          /* @__PURE__ */ jsx141(Typography11, { "data-testid": EVENT_DETAILS_REQUEST_ID_TEST_ID, variant: "body2", children: requestId })
+          /* @__PURE__ */ jsx142(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Request ID" }),
+          /* @__PURE__ */ jsxs131(Stack3, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+            /* @__PURE__ */ jsx142(Typography11, { "data-testid": EVENT_DETAILS_REQUEST_ID_TEST_ID, variant: "body2", children: requestId }),
+            /* @__PURE__ */ jsx142(CopyButton, { value: requestId })
+          ] })
         ] }),
-        eventGroups.info && /* @__PURE__ */ jsx141(EventDetail, { displayText: "Info", events: eventGroups.info, type: "info" })
+        eventGroups.info && /* @__PURE__ */ jsx142(EventDetail, { displayText: "Info", events: eventGroups.info, type: "info" })
       ] }) })
     ] }) })
   ] });
@@ -30886,11 +30958,11 @@ import { useEffect as useEffect20 } from "react";
 
 // src/components/trace-graph/service-node.tsx
 import { Cancel as Cancel3, GppBad as GppBad2 } from "@mui/icons-material";
-import { Box as Box17, Divider as Divider5, Stack as Stack4, Tooltip as Tooltip5, Typography as Typography12, useTheme as useTheme4 } from "@mui/material";
+import { Box as Box17, Divider as Divider5, Stack as Stack4, Tooltip as Tooltip6, Typography as Typography12, useTheme as useTheme4 } from "@mui/material";
 import "@xyflow/react/dist/style.css";
 import { Handle, Position } from "@xyflow/react";
 import { memo as memo11, useMemo as useMemo13 } from "react";
-import { jsx as jsx142, jsxs as jsxs132 } from "react/jsx-runtime";
+import { jsx as jsx143, jsxs as jsxs132 } from "react/jsx-runtime";
 var handleStyle = {
   backgroundColor: "white",
   borderColor: "lightgray",
@@ -30930,8 +31002,8 @@ var ServiceNode = memo11(({ data, selected }) => {
       },
       tabIndex: 0,
       children: [
-        /* @__PURE__ */ jsx142(Handle, { position: Position.Left, style: handleStyle, type: "target" }),
-        /* @__PURE__ */ jsx142(Handle, { position: Position.Right, style: handleStyle, type: "source" }),
+        /* @__PURE__ */ jsx143(Handle, { position: Position.Left, style: handleStyle, type: "target" }),
+        /* @__PURE__ */ jsx143(Handle, { position: Position.Right, style: handleStyle, type: "source" }),
         /* @__PURE__ */ jsxs132(
           Stack4,
           {
@@ -30939,9 +31011,9 @@ var ServiceNode = memo11(({ data, selected }) => {
             direction: "row",
             sx: { gap: "8px", pb: "2px", pt: "6px", px: "8px" },
             children: [
-              /* @__PURE__ */ jsx142(Box17, { sx: { borderRadius: "4px", flexShrink: 0, lineHeight: 0, overflow: "hidden" }, children: /* @__PURE__ */ jsx142(AwsServiceIcon, { hideTooltip: true, service: data.event.service_name, size: "medium" }) }),
+              /* @__PURE__ */ jsx143(Box17, { sx: { borderRadius: "4px", flexShrink: 0, lineHeight: 0, overflow: "hidden" }, children: /* @__PURE__ */ jsx143(AwsServiceIcon, { hideTooltip: true, service: data.event.service_name, size: "medium" }) }),
               /* @__PURE__ */ jsxs132(Stack4, { sx: { minWidth: 0 }, children: [
-                /* @__PURE__ */ jsx142(
+                /* @__PURE__ */ jsx143(
                   Typography12,
                   {
                     noWrap: true,
@@ -30950,7 +31022,7 @@ var ServiceNode = memo11(({ data, selected }) => {
                     children: getServiceDisplayName(data.event.service_name)
                   }
                 ),
-                data.event.resource_name != "" && /* @__PURE__ */ jsx142(
+                data.event.resource_name != "" && /* @__PURE__ */ jsx143(
                   Typography12,
                   {
                     color: "text.secondary",
@@ -30964,7 +31036,7 @@ var ServiceNode = memo11(({ data, selected }) => {
             ]
           }
         ),
-        /* @__PURE__ */ jsx142(Divider5, { sx: { ml: "38px", mr: "8px", my: "5px" } }),
+        /* @__PURE__ */ jsx143(Divider5, { sx: { ml: "38px", mr: "8px", my: "5px" } }),
         /* @__PURE__ */ jsxs132(
           Stack4,
           {
@@ -30983,12 +31055,12 @@ var ServiceNode = memo11(({ data, selected }) => {
                     width: "38px"
                   },
                   children: [
-                    (isError || isWarning) && hasPermissionEvents && /* @__PURE__ */ jsx142(Tooltip5, { arrow: true, title: "Permission denied", children: /* @__PURE__ */ jsx142(GppBad2, { sx: { color: isError ? theme.palette.error.main : theme.palette.warning.main, fontSize: "16px" } }) }),
-                    isError && !hasPermissionEvents && /* @__PURE__ */ jsx142(Tooltip5, { arrow: true, title: "Error", children: /* @__PURE__ */ jsx142(Cancel3, { sx: { color: theme.palette.error.main, fontSize: "16px" } }) })
+                    (isError || isWarning) && hasPermissionEvents && /* @__PURE__ */ jsx143(Tooltip6, { arrow: true, title: "Permission denied", children: /* @__PURE__ */ jsx143(GppBad2, { sx: { color: isError ? theme.palette.error.main : theme.palette.warning.main, fontSize: "16px" } }) }),
+                    isError && !hasPermissionEvents && /* @__PURE__ */ jsx143(Tooltip6, { arrow: true, title: "Error", children: /* @__PURE__ */ jsx143(Cancel3, { sx: { color: theme.palette.error.main, fontSize: "16px" } }) })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx142(
+              /* @__PURE__ */ jsx143(
                 Typography12,
                 {
                   "data-testid": SERVICE_NODE_OPERATION_NAME_TEST_ID,
@@ -31062,11 +31134,11 @@ var getLayoutedNodesAndEdges = (inputNodes, inputEdges) => {
 
 // src/components/trace-graph/xyflow/controls.tsx
 import { Add, FitScreen, Remove } from "@mui/icons-material";
-import { Box as Box18, IconButton as IconButton4 } from "@mui/material";
+import { Box as Box18, IconButton as IconButton5 } from "@mui/material";
 import { useReactFlow, useStore as useStore2 } from "@xyflow/react";
 import { memo as memo12 } from "react";
 import { shallow } from "zustand/shallow";
-import { jsx as jsx143, jsxs as jsxs133 } from "react/jsx-runtime";
+import { jsx as jsx144, jsxs as jsxs133 } from "react/jsx-runtime";
 var selector = (s2) => ({
   isInteractive: s2.nodesDraggable || s2.nodesConnectable || s2.elementsSelectable,
   maxZoomReached: s2.transform[2] >= s2.maxZoom,
@@ -31098,33 +31170,33 @@ var Controls = memo12(() => {
         zIndex: 5
       },
       children: [
-        /* @__PURE__ */ jsx143(
-          IconButton4,
+        /* @__PURE__ */ jsx144(
+          IconButton5,
           {
             className: "react-flow__controls-zoomin",
             disabled: maxZoomReached,
             onClick: onZoomInHandler,
             size: "small",
-            children: /* @__PURE__ */ jsx143(Add, {})
+            children: /* @__PURE__ */ jsx144(Add, {})
           }
         ),
-        /* @__PURE__ */ jsx143(
-          IconButton4,
+        /* @__PURE__ */ jsx144(
+          IconButton5,
           {
             className: "react-flow__controls-zoomout",
             disabled: minZoomReached,
             onClick: onZoomOutHandler,
             size: "small",
-            children: /* @__PURE__ */ jsx143(Remove, {})
+            children: /* @__PURE__ */ jsx144(Remove, {})
           }
         ),
-        /* @__PURE__ */ jsx143(
-          IconButton4,
+        /* @__PURE__ */ jsx144(
+          IconButton5,
           {
             className: "react-flow__controls-fitview",
             onClick: onFitViewHandler,
             size: "small",
-            children: /* @__PURE__ */ jsx143(FitScreen, {})
+            children: /* @__PURE__ */ jsx144(FitScreen, {})
           }
         )
       ]
@@ -31133,7 +31205,7 @@ var Controls = memo12(() => {
 });
 
 // src/components/trace-graph/trace-graph.tsx
-import { Fragment as Fragment12, jsx as jsx144, jsxs as jsxs134 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx145, jsxs as jsxs134 } from "react/jsx-runtime";
 var nodeTypes = {
   service: ServiceNode
 };
@@ -31200,7 +31272,7 @@ var TraceGraph = ({
     spans.error && /* @__PURE__ */ jsxs134(
       Alert5,
       {
-        action: /* @__PURE__ */ jsx144(Button5, { onClick: () => {
+        action: /* @__PURE__ */ jsx145(Button5, { onClick: () => {
           onRefresh();
         }, children: "Retry" }),
         severity: "error",
@@ -31229,8 +31301,8 @@ var TraceGraph = ({
         onNodesChange,
         selectNodesOnDrag: false,
         children: [
-          /* @__PURE__ */ jsx144(Controls, {}),
-          /* @__PURE__ */ jsx144(
+          /* @__PURE__ */ jsx145(Controls, {}),
+          /* @__PURE__ */ jsx145(
             Background,
             {
               bgColor: theme.palette.background.default,
@@ -31244,7 +31316,7 @@ var TraceGraph = ({
 };
 
 // src/pages/trace-graph-page.tsx
-import { Fragment as Fragment13, jsx as jsx145, jsxs as jsxs135 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx146, jsxs as jsxs135 } from "react/jsx-runtime";
 var HEADER_HEIGHT = 56;
 var DRAWER_WIDTH = "35%";
 var Main = styled("main", { shouldForwardProp: (property) => property !== "open" })(({ open, theme }) => ({
@@ -31307,12 +31379,12 @@ var TraceGraphView = ({
       },
       children: [
         /* @__PURE__ */ jsxs135(Box19, { sx: { display: "flex", width: "100%" }, children: [
-          /* @__PURE__ */ jsx145(Button6, { onClick: () => {
+          /* @__PURE__ */ jsx146(Button6, { onClick: () => {
             navigateToSpansList();
-          }, startIcon: /* @__PURE__ */ jsx145(ArrowBack, {}), children: "Go back" }),
-          /* @__PURE__ */ jsx145(Box19, { sx: { flexGrow: 1 } })
+          }, startIcon: /* @__PURE__ */ jsx146(ArrowBack, {}), children: "Go back" }),
+          /* @__PURE__ */ jsx146(Box19, { sx: { flexGrow: 1 } })
         ] }),
-        /* @__PURE__ */ jsx145(
+        /* @__PURE__ */ jsx146(
           Paper3,
           {
             sx: {
@@ -31322,7 +31394,7 @@ var TraceGraphView = ({
               position: "relative",
               width: "100%"
             },
-            children: shouldShowStatusMessage ? /* @__PURE__ */ jsx145(
+            children: shouldShowStatusMessage ? /* @__PURE__ */ jsx146(
               StatusMessage,
               {
                 error: statusError,
@@ -31331,14 +31403,14 @@ var TraceGraphView = ({
                 status
               }
             ) : /* @__PURE__ */ jsxs135(Fragment13, { children: [
-              /* @__PURE__ */ jsx145(Main, { open, children: /* @__PURE__ */ jsx145(
+              /* @__PURE__ */ jsx146(Main, { open, children: /* @__PURE__ */ jsx146(
                 Box19,
                 {
                   sx: {
                     height: "100%",
                     overflow: "auto"
                   },
-                  children: traceId !== void 0 && /* @__PURE__ */ jsx145(ReactFlowProvider, { children: /* @__PURE__ */ jsx145(
+                  children: traceId !== void 0 && /* @__PURE__ */ jsx146(ReactFlowProvider, { children: /* @__PURE__ */ jsx146(
                     TraceGraph,
                     {
                       initialFocusEventId: spanId,
@@ -31355,7 +31427,7 @@ var TraceGraphView = ({
                   ) })
                 }
               ) }),
-              /* @__PURE__ */ jsx145(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ jsx145(EventDetails, { onClose: handleClose, selectedEvent }) })
+              /* @__PURE__ */ jsx146(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ jsx146(EventDetails, { onClose: handleClose, selectedEvent }) })
             ] })
           }
         )
@@ -31399,10 +31471,10 @@ async function fetchConnectedTraces(api, traceIds, allSpans = /* @__PURE__ */ ne
 }
 var TraceGraphPage = ({ onClose, spanId, traceId }) => {
   const api = useAppInspectorApi();
-  const [spans, setSpans] = useState16();
-  const [loading, setLoading] = useState16(false);
-  const [fetchError, setFetchError] = useState16();
-  const fetchSpans = useCallback11(async () => {
+  const [spans, setSpans] = useState17();
+  const [loading, setLoading] = useState17(false);
+  const [fetchError, setFetchError] = useState17();
+  const fetchSpans = useCallback12(async () => {
     setLoading(true);
     try {
       const spans2 = await fetchConnectedTraces(api, [traceId]);
@@ -31418,8 +31490,8 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
   useEffect21(() => {
     void fetchSpans();
   }, [fetchSpans]);
-  const [open, setOpen] = useState16(true);
-  const [selectedEvent, setSelectedEvent] = useState16(() => spans?.find((span) => span.span_id === spanId));
+  const [open, setOpen] = useState17(true);
+  const [selectedEvent, setSelectedEvent] = useState17(() => spans?.find((span) => span.span_id === spanId));
   const spansReference = useRef17();
   useEffect21(() => {
     if (!spansReference.current && spans) {
@@ -31433,22 +31505,22 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
       reportDisabled();
     }
   }, [fetchError, reportDisabled]);
-  const handleEnable = useCallback11(async () => {
+  const handleEnable = useCallback12(async () => {
     await api.setStatus({ status: "ENABLED" });
     void checkStatus();
   }, [api, checkStatus]);
-  const handleEventSelect = useCallback11((spanId2) => {
+  const handleEventSelect = useCallback12((spanId2) => {
     const span = spans?.find((s2) => s2.span_id === spanId2);
     setSelectedEvent(span);
     setOpen(true);
   }, [spans]);
-  const handleRetry = useCallback11(() => {
+  const handleRetry = useCallback12(() => {
     void checkStatus();
   }, [checkStatus]);
-  const navigateToSpansList = useCallback11(() => {
+  const navigateToSpansList = useCallback12(() => {
     onClose?.();
   }, [onClose]);
-  return /* @__PURE__ */ jsx145(
+  return /* @__PURE__ */ jsx146(
     TraceGraphView,
     {
       fetchError,
@@ -31473,7 +31545,7 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
 };
 
 // src/pages/spans-list-page.tsx
-import { Fragment as Fragment14, jsx as jsx146, jsxs as jsxs136 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx147, jsxs as jsxs136 } from "react/jsx-runtime";
 var SpansListPage = () => {
   const api = useAppInspectorApi();
   const {
@@ -31497,24 +31569,24 @@ var SpansListPage = () => {
     warningCount
   } = useSpans();
   const { checking, checkStatus, status, statusError } = useAppInspectorStatus();
-  const clearSpansSync = useCallback12(() => {
+  const clearSpansSync = useCallback13(() => {
     void clearSpans();
   }, [clearSpans]);
   const localstackVersion = status?.localstackVersion ?? (statusError instanceof AppInspectorNotFoundError ? statusError.localstackVersion : void 0);
   const versionCompatibility = checkEmulatorVersion(localstackVersion);
-  const [bannerDismissed, setBannerDismissed] = useState17(false);
+  const [bannerDismissed, setBannerDismissed] = useState18(false);
   const [order2, setOrder] = useLocalStorage("spans-order", "oldest_first");
-  const [selectedTraceId, setSelectedTraceId] = useState17();
-  const [selectedSpanId, setSelectedSpanId] = useState17();
-  const navigateToSpan = useCallback12((span) => {
+  const [selectedTraceId, setSelectedTraceId] = useState18();
+  const [selectedSpanId, setSelectedSpanId] = useState18();
+  const navigateToSpan = useCallback13((span) => {
     setSelectedTraceId(span.trace_id);
     setSelectedSpanId(span.span_id);
   }, []);
-  const handleRetry = useCallback12(() => {
+  const handleRetry = useCallback13(() => {
     void checkStatus();
     fetchForward();
   }, [checkStatus, fetchForward]);
-  const handleEnable = useCallback12(async () => {
+  const handleEnable = useCallback13(async () => {
     await api.setStatus({ status: "ENABLED" });
     clearFetchError();
     void checkStatus();
@@ -31542,7 +31614,7 @@ var SpansListPage = () => {
   }, [fetchingForward, fetchForward]);
   const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
   if (versionCompatibility === "below-minimum") {
-    return /* @__PURE__ */ jsx146(
+    return /* @__PURE__ */ jsx147(
       StatusMessage,
       {
         localstackVersion,
@@ -31551,7 +31623,7 @@ var SpansListPage = () => {
     );
   }
   if (shouldShowStatusMessage) {
-    return /* @__PURE__ */ jsx146(
+    return /* @__PURE__ */ jsx147(
       StatusMessage,
       {
         error: statusError,
@@ -31579,7 +31651,7 @@ var SpansListPage = () => {
           width: "100%"
         },
         children: [
-          !checking && /* @__PURE__ */ jsx146(
+          !checking && /* @__PURE__ */ jsx147(
             EmulatorVersionBanner,
             {
               compatibility: bannerDismissed && versionCompatibility === "warning" ? "ok" : versionCompatibility,
@@ -31589,7 +31661,7 @@ var SpansListPage = () => {
               } : void 0
             }
           ),
-          /* @__PURE__ */ jsx146(
+          /* @__PURE__ */ jsx147(
             SpansList,
             {
               clearingSpans,
@@ -31617,7 +31689,7 @@ var SpansListPage = () => {
         ]
       }
     ),
-    selectedTraceId !== void 0 && /* @__PURE__ */ jsx146(TraceGraphPage, { onClose: () => {
+    selectedTraceId !== void 0 && /* @__PURE__ */ jsx147(TraceGraphPage, { onClose: () => {
       setSelectedTraceId(void 0);
     }, spanId: selectedSpanId, traceId: selectedTraceId })
   ] });