@localstack/appinspector-ui 1.0.182 → 1.0.184

package/dist/index.js

@@ -2490,6 +2490,8 @@ var EVENT_DETAILS_SECTION_BASIC_INFORMATION_TEST_ID = "event-details-section-bas
 var EVENT_DETAILS_SERVICE_NAME_TEST_ID = "event-details-service-name";
 var EVENT_DETAILS_OPERATION_NAME_TEST_ID = "event-details-operation-name";
 var EVENT_DETAILS_CLOSE_BUTTON_TEST_ID = "event-details-close-button";
+var EVENT_DETAILS_HEADING_TEST_ID = "event-details-heading";
+var EVENT_DETAILS_HEADING_DURATION_TEST_ID = "event-details-heading-duration";
 var EVENT_DETAILS_STATUS_TEST_ID = "event-details-status";
 var EVENT_DETAILS_RESOURCE_NAME_TEST_ID = "event-details-resource-name";
 var EVENT_DETAILS_RESOURCE_ARN_TEST_ID = "event-details-resource-arn";
@@ -2515,7 +2517,7 @@ var SERVICE_NODE_SERVICE_NAME_TEST_ID = "service-node-service-name";
 var SERVICE_NODE_OPERATION_NAME_TEST_ID = "service-node-operation-name";
 var EMULATOR_VERSION_BANNER_TEST_ID = "emulator-version-banner";
 var SPANS_FILTER_NO_MATCH_TEST_ID = "spans-filter-no-match";
-var FILTER_ISSUES_TEST_ID = "filter-issues";
+var FILTER_STATUS_TEST_ID = "filter-status";
 var FILTER_PRODUCER_TEST_ID = "filter-producer";
 var FILTER_CONSUMER_TEST_ID = "filter-consumer";
 var HIDDEN_OPS_NOTE_TEST_ID = "hidden-ops-note";
@@ -2523,6 +2525,7 @@ var TRACE_SIDEBAR_TEST_ID = "trace-sidebar";
 var TRACE_SIDEBAR_RESIZE_HANDLE_TEST_ID = "trace-sidebar-resize-handle";
 var TRACE_SIDEBAR_WATERFALL_BUTTON_TEST_ID = "trace-sidebar-waterfall-button";
 var TRACE_SIDEBAR_MAP_BUTTON_TEST_ID = "trace-sidebar-map-button";
+var TRACE_SIDEBAR_ROOT_HEADING_TEST_ID = "trace-sidebar-root-heading";
 var WATERFALL_TEST_ID = "waterfall";
 var WATERFALL_ROW_TEST_ID = "waterfall-row";
 var WATERFALL_ROW_TOGGLE_TEST_ID = "waterfall-row-toggle";
@@ -2644,7 +2647,6 @@ import {
   TableRow,
   TableSortLabel,
   TextField,
-  Tooltip as Tooltip5,
   Typography as Typography6,
   useTheme as useTheme2
 } from "@mui/material";
@@ -15696,6 +15698,8 @@ import {
   ListSubheader,
   Menu,
   MenuItem,
+  ToggleButton,
+  ToggleButtonGroup,
   Typography as Typography5
 } from "@mui/material";
 import { useState as useState5 } from "react";
@@ -15709,20 +15713,6 @@ var NATIVE_SCROLLBARS = {
 import { Fragment as Fragment4, jsx as jsx127, jsxs as jsxs122 } from "react/jsx-runtime";
 var SHOW_EXCLUSIONS = false;
 var toggle = (list, item) => list.includes(item) ? list.filter((other) => other !== item) : [...list, item];
-var ISSUE_LABELS = { error: "Errors", ok: "No issues", warning: "Warnings" };
-var issueOptionIcon = (value) => {
-  switch (value) {
-    case "error": {
-      return /* @__PURE__ */ jsx127(Cancel3, { sx: { color: "error.main", fontSize: 16 } });
-    }
-    case "warning": {
-      return /* @__PURE__ */ jsx127(WarningIcon, { sx: { color: "warning.main", fontSize: 16 } });
-    }
-    default: {
-      return void 0;
-    }
-  }
-};
 var FilterDropdown = ({ "data-testid": testId, label, onChange, options, value }) => {
   const [anchorElement, setAnchorElement] = useState5();
   const open = Boolean(anchorElement);
@@ -15806,7 +15796,6 @@ var FilterDropdown = ({ "data-testid": testId, label, onChange, options, value }
                   }
                 ),
                 !!option.serviceCode && /* @__PURE__ */ jsx127(Box5, { sx: { borderRadius: "4px", flexShrink: 0, lineHeight: 0, mr: 1, overflow: "hidden" }, children: /* @__PURE__ */ jsx127(AwsServiceIcon, { hideTooltip: true, service: option.serviceCode, size: "medium" }) }),
-                !!option.icon && /* @__PURE__ */ jsx127(Box5, { sx: { alignItems: "center", display: "flex", flexShrink: 0, mr: 1 }, children: option.icon }),
                 /* @__PURE__ */ jsx127(
                   ListItemText,
                   {
@@ -15850,7 +15839,42 @@ var FilterDropdown = ({ "data-testid": testId, label, onChange, options, value }
     )
   ] });
 };
-var SpansFilterBar = ({ facets, onQueryChange, query: query2 }) => {
+var StatusCount = ({ count: count2, "data-testid": testId }) => /* @__PURE__ */ jsx127(Typography5, { color: "text.secondary", component: "span", "data-testid": testId, variant: "caption", children: count2.toLocaleString() });
+var StatusFilter = ({ counts, onChange, value }) => {
+  const selected = value.included.length === 0 ? "all" : value.included.length === 1 ? value.included[0] : void 0;
+  return /* @__PURE__ */ jsxs122(
+    ToggleButtonGroup,
+    {
+      "aria-label": "Status",
+      "data-testid": FILTER_STATUS_TEST_ID,
+      exclusive: true,
+      onChange: (_event, next) => {
+        if (next) onChange({ excluded: [], included: next === "all" ? [] : [next] });
+      },
+      size: "small",
+      sx: { "& .MuiToggleButton-root": { gap: 0.5, lineHeight: 1.5, px: 1.25, py: 0.5, textTransform: "none" }, "flexShrink": 0 },
+      value: selected,
+      children: [
+        /* @__PURE__ */ jsxs122(ToggleButton, { value: "all", children: [
+          "All",
+          /* @__PURE__ */ jsx127(StatusCount, { count: counts.all })
+        ] }),
+        /* @__PURE__ */ jsxs122(ToggleButton, { value: "error", children: [
+          /* @__PURE__ */ jsx127(Cancel3, { sx: { color: "error.main", fontSize: 16 } }),
+          "Errors",
+          /* @__PURE__ */ jsx127(StatusCount, { count: counts.error, "data-testid": ERROR_COUNT_TEST_ID })
+        ] }),
+        /* @__PURE__ */ jsxs122(ToggleButton, { value: "warning", children: [
+          /* @__PURE__ */ jsx127(WarningIcon, { sx: { color: "warning.main", fontSize: 16 } }),
+          "Warnings",
+          /* @__PURE__ */ jsx127(StatusCount, { count: counts.warning, "data-testid": WARNING_COUNT_TEST_ID })
+        ] })
+      ]
+    }
+  );
+};
+var SpansFilterBar = ({ facets, onQueryChange, query: query2, totalCount }) => {
+  const issueCount = (value) => facets.issues.find((facet) => facet.value === value)?.count ?? 0;
   const dropdown = (key, label, facetValues, toOption, testId) => {
     const value = getQueryValues(query2, key);
     const loaded = new Set(facetValues.map((facet) => facet.value));
@@ -15868,17 +15892,29 @@ var SpansFilterBar = ({ facets, onQueryChange, query: query2 }) => {
       }
     );
   };
-  return /* @__PURE__ */ jsxs122(Box5, { sx: { alignItems: "center", display: "flex", gap: 1 }, children: [
-    dropdown("producer", "Producer", facets.producer, (facet) => facet.value === EXTERNAL_PRODUCER ? { label: "External producer" } : { label: getServiceDisplayName(facet.value), serviceCode: facet.value }, FILTER_PRODUCER_TEST_ID),
-    dropdown("service", "Consumer", facets.service, (facet) => ({ label: getServiceDisplayName(facet.value), serviceCode: facet.value }), FILTER_CONSUMER_TEST_ID),
-    dropdown("status", "Issues", facets.issues, (facet) => ({ icon: issueOptionIcon(facet.value), label: ISSUE_LABELS[facet.value] ?? facet.value }), FILTER_ISSUES_TEST_ID)
-  ] });
+  return (
+    // Its controls wrap as items of the parent's controls row.
+    /* @__PURE__ */ jsxs122(Box5, { sx: { display: "contents" }, children: [
+      /* @__PURE__ */ jsx127(
+        StatusFilter,
+        {
+          counts: { all: totalCount, error: issueCount("error"), warning: issueCount("warning") },
+          onChange: (next) => {
+            onQueryChange(setQueryValues(query2, "status", next));
+          },
+          value: getQueryValues(query2, "status")
+        }
+      ),
+      dropdown("producer", "Producer", facets.producer, (facet) => facet.value === EXTERNAL_PRODUCER ? { label: "External producer" } : { label: getServiceDisplayName(facet.value), serviceCode: facet.value }, FILTER_PRODUCER_TEST_ID),
+      dropdown("service", "Consumer", facets.service, (facet) => ({ label: getServiceDisplayName(facet.value), serviceCode: facet.value }), FILTER_CONSUMER_TEST_ID)
+    ] })
+  );
 };
 
 // src/components/spans-list/spans-data-grid.tsx
 import { Fragment as Fragment5, jsx as jsx128, jsxs as jsxs123 } from "react/jsx-runtime";
 var SHOW_FILTERS_IN_SEARCH = false;
-var FILTER_NAMES = [["producer", "Producer"], ["service", "Consumer"], ["status", "Issues"]];
+var FILTER_NAMES = [["producer", "Producer"], ["service", "Consumer"], ["status", "Status"]];
 var columnHelper = createColumnHelper();
 var newSpanBackgroundColor = {
   dark: { from: "rgba(255, 193, 7, 0.14)", to: "rgba(255, 193, 7, 0)" },
@@ -16048,8 +16084,6 @@ var SpansDataGrid = ({
     if (!spansLoaded) return;
     return compute.topLevelIds.map((spanId) => getSpan(spanId)).filter((span) => span !== void 0);
   }, [compute.topLevelIds, getSpan, spansLoaded]);
-  const errorCount = compute.allIds.filter((spanId) => compute.rows[spanId]?.error).length;
-  const warningCount = compute.allIds.filter((spanId) => compute.rows[spanId]?.warning).length;
   const downstreamOf = useCallback2((spanId) => compute.rows[spanId]?.downstream, [compute.rows]);
   const columns = useMemo4(() => [
     columnHelper.display({
@@ -16167,8 +16201,8 @@ var SpansDataGrid = ({
   }, [order2, spans?.length, lastSpanId]);
   return /* @__PURE__ */ jsxs123(Fragment5, { children: [
     /* @__PURE__ */ jsx128(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs123(Box6, { sx: { display: "flex", flexDirection: "column", gap: "0.5rem", pt: 1, px: 1 }, children: [
-      /* @__PURE__ */ jsxs123(Box6, { sx: { alignItems: "center", display: "flex", flexWrap: "wrap", gap: "0.5rem" }, children: [
-        /* @__PURE__ */ jsx128(Box6, { sx: { flex: 1, maxWidth: 220, minWidth: 96, order: 1 }, children: /* @__PURE__ */ jsx128(
+      /* @__PURE__ */ jsxs123(Box6, { sx: { alignItems: "center", containerType: "inline-size", display: "flex", flexWrap: "wrap", gap: "0.5rem" }, children: [
+        /* @__PURE__ */ jsx128(Box6, { sx: { flex: "1 1 160px", maxWidth: 220, order: -1 }, children: /* @__PURE__ */ jsx128(
           SpansSearchField,
           {
             onChange: (value) => {
@@ -16178,16 +16212,16 @@ var SpansDataGrid = ({
             value: searchText
           }
         ) }),
-        /* @__PURE__ */ jsx128(Box6, { sx: { order: { md: 2, xs: 4 }, width: { md: "auto", xs: "100%" } }, children: /* @__PURE__ */ jsx128(
+        /* @__PURE__ */ jsx128(
           SpansFilterBar,
           {
             facets: compute.facets,
             onQueryChange: updateDropdownQuery,
-            query: dropdownQuery
+            query: dropdownQuery,
+            totalCount: compute.totalCount
           }
-        ) }),
-        /* @__PURE__ */ jsx128(Box6, { sx: { flex: 1, order: { md: 3, xs: 2 } } }),
-        /* @__PURE__ */ jsx128(Box6, { sx: { flexShrink: 0, order: { md: 4, xs: 3 } }, children: /* @__PURE__ */ jsx128(
+        ),
+        /* @__PURE__ */ jsx128(Box6, { sx: { "@container (min-width: 960px)": { order: 1 }, "flexShrink": 0, "ml": "auto", "order": -1 }, children: /* @__PURE__ */ jsx128(
           Button3,
           {
             "data-testid": CLEAR_SPANS_TEST_ID,
@@ -16196,7 +16230,8 @@ var SpansDataGrid = ({
             startIcon: /* @__PURE__ */ jsx128(DeleteForeverOutlined, {}),
             children: "Clear Operations"
           }
-        ) })
+        ) }),
+        /* @__PURE__ */ jsx128(Box6, { sx: { "@container (min-width: 960px)": { display: "none" }, "flexBasis": "100%", "mt": "-0.5rem", "order": -1 } })
       ] }),
       /* @__PURE__ */ jsxs123(Box6, { sx: { alignItems: "center", display: "flex", gap: "0.5rem", pl: 0.5 }, children: [
         /* @__PURE__ */ jsx128(
@@ -16229,50 +16264,6 @@ var SpansDataGrid = ({
               }
             )
           ] })
-        ] }),
-        errorCount > 0 && /* @__PURE__ */ jsxs123(Fragment5, { children: [
-          /* @__PURE__ */ jsx128(Typography6, { color: "text.secondary", variant: "caption", children: "\xB7" }),
-          /* @__PURE__ */ jsx128(Tooltip5, { title: "Number of errors detected across all operations", children: /* @__PURE__ */ jsxs123(
-            Box6,
-            {
-              "data-testid": ERROR_COUNT_TEST_ID,
-              sx: {
-                alignItems: "center",
-                borderBottom: "1px dotted",
-                borderColor: "error.main",
-                cursor: "help",
-                display: "flex",
-                gap: 0.5,
-                mb: "-1px"
-              },
-              children: [
-                /* @__PURE__ */ jsx128(Typography6, { color: "error", variant: "body2", children: errorCount.toLocaleString() }),
-                /* @__PURE__ */ jsx128(Typography6, { color: "error", variant: "caption", children: errorCount === 1 ? "error" : "errors" })
-              ]
-            }
-          ) })
-        ] }),
-        warningCount > 0 && /* @__PURE__ */ jsxs123(Fragment5, { children: [
-          /* @__PURE__ */ jsx128(Typography6, { color: "text.secondary", variant: "caption", children: "\xB7" }),
-          /* @__PURE__ */ jsx128(Tooltip5, { title: "Number of warnings detected across all operations", children: /* @__PURE__ */ jsxs123(
-            Box6,
-            {
-              "data-testid": WARNING_COUNT_TEST_ID,
-              sx: {
-                alignItems: "center",
-                borderBottom: "1px dotted",
-                borderColor: "warning.main",
-                cursor: "help",
-                display: "flex",
-                gap: 0.5,
-                mb: "-1px"
-              },
-              children: [
-                /* @__PURE__ */ jsx128(Typography6, { color: "warning.main", variant: "body2", children: warningCount.toLocaleString() }),
-                /* @__PURE__ */ jsx128(Typography6, { color: "warning.main", variant: "caption", children: warningCount === 1 ? "warning" : "warnings" })
-              ]
-            }
-          ) })
         ] })
       ] })
     ] }) }),
@@ -16668,7 +16659,7 @@ var StatusMessage = ({
 
 // src/components/trace-panel/trace-sidebar.tsx
 import { Close as Close4 } from "@mui/icons-material";
-import { Box as Box20, IconButton as IconButton8, ToggleButton as ToggleButton2, ToggleButtonGroup as ToggleButtonGroup2, Typography as Typography15 } from "@mui/material";
+import { Box as Box20, IconButton as IconButton8, ToggleButton as ToggleButton3, ToggleButtonGroup as ToggleButtonGroup3, Typography as Typography15 } from "@mui/material";
 import { ReactFlowProvider } from "@xyflow/react";
 import * as React125 from "react";
 
@@ -16830,7 +16821,7 @@ function unixNanoToMilliseconds(unixNanoString) {
 
 // src/components/event-details/copy-button.tsx
 import { Check, ContentCopy } from "@mui/icons-material";
-import { IconButton as IconButton4, Tooltip as Tooltip6 } from "@mui/material";
+import { IconButton as IconButton4, Tooltip as Tooltip5 } from "@mui/material";
 import { useCallback as useCallback3, useState as useState8 } from "react";
 import { jsx as jsx131 } from "react/jsx-runtime";
 var CopyButton = ({ value }) => {
@@ -16844,7 +16835,7 @@ var CopyButton = ({ value }) => {
       }, 1500);
     });
   }, [value]);
-  return /* @__PURE__ */ jsx131(Tooltip6, { title: copied ? "Copied!" : "Copy", children: /* @__PURE__ */ jsx131(
+  return /* @__PURE__ */ jsx131(Tooltip5, { title: copied ? "Copied!" : "Copy", children: /* @__PURE__ */ jsx131(
     IconButton4,
     {
       className: "copy-btn",
@@ -31435,6 +31426,7 @@ var EventDetails = ({ onClose, selectedEvent }) => {
   }
   const exceptionPayload = tryParseJson(selectedEvent.attributes?.["localstack.aws.service.exception"]);
   const duration = selectedEvent.end_time_unix_nano ? ((BigInt(selectedEvent.end_time_unix_nano) - BigInt(selectedEvent.start_time_unix_nano)) / BigInt("1000000")).toString() : void 0;
+  const resource = shortResourceName(selectedEvent.resource_name, selectedEvent.arn);
   const showError = issues.error;
   const showPermissions = selectedEvent.iam_errors_suppressed === true || eventGroups.permissions !== void 0;
   const showLogs = isLambdaInvoke && requestId !== void 0;
@@ -31460,12 +31452,21 @@ var EventDetails = ({ onClose, selectedEvent }) => {
           borderBottom: "1px solid",
           borderColor: "divider",
           display: "flex",
-          justifyContent: "space-between",
+          gap: 1.5,
           px: 2,
           py: 1
         },
         children: [
-          /* @__PURE__ */ jsx142(Box16, { children: /* @__PURE__ */ jsx142(Typography12, { sx: { fontWeight: 600 }, variant: "h6", children: "Operation Details" }) }),
+          /* @__PURE__ */ jsxs131(Box16, { sx: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx142(Typography12, { color: "text.secondary", component: "div", sx: { lineHeight: 1.5 }, variant: "overline", children: "Selected operation" }),
+            /* @__PURE__ */ jsxs131(Box16, { "data-testid": EVENT_DETAILS_HEADING_TEST_ID, sx: { alignItems: "center", display: "flex", gap: 1, minWidth: 0 }, children: [
+              /* @__PURE__ */ jsx142(AwsServiceIcon, { hideTooltip: true, service: selectedEvent.service_name, size: "small" }),
+              /* @__PURE__ */ jsx142(Typography12, { noWrap: true, sx: { flex: "0 1 auto", fontWeight: 600, minWidth: 0 }, title: selectedEvent.operation_name, variant: "subtitle1", children: selectedEvent.operation_name }),
+              resource !== "" && resource !== "*" && /* @__PURE__ */ jsx142(Typography12, { color: "text.secondary", noWrap: true, sx: { flex: "1 1 0", minWidth: 0 }, title: resource, variant: "body2", children: resource }),
+              duration !== void 0 && // A fixed box, so a screenshot can mask the varying value without the mask edge moving.
+              /* @__PURE__ */ jsx142(Typography12, { color: "text.secondary", "data-testid": EVENT_DETAILS_HEADING_DURATION_TEST_ID, sx: { flex: "none", ml: "auto", textAlign: "right", width: 64 }, variant: "body2", children: formatDuration(Number(duration)) })
+            ] })
+          ] }),
           onClose && /* @__PURE__ */ jsx142(IconButton6, { "data-testid": EVENT_DETAILS_CLOSE_BUTTON_TEST_ID, onClick: onClose, size: "small", children: /* @__PURE__ */ jsx142(Close3, {}) })
         ]
       }
@@ -31597,7 +31598,7 @@ import { useCallback as useCallback7, useEffect as useEffect16, useRef as useRef
 
 // src/components/trace-graph/service-node.tsx
 import { Cancel as Cancel6, GppBad as GppBad2 } from "@mui/icons-material";
-import { Box as Box17, Divider as Divider4, Stack as Stack5, Tooltip as Tooltip7, Typography as Typography13, useTheme as useTheme4 } from "@mui/material";
+import { Box as Box17, Divider as Divider4, Stack as Stack5, Tooltip as Tooltip6, Typography as Typography13, useTheme as useTheme4 } from "@mui/material";
 import { Handle, Position } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
 import "react";
@@ -31664,8 +31665,8 @@ var NodeContent = ({ event, expanded, hasPermissionEvents, isError, isWarning })
                 width: "38px"
               },
               children: [
-                (isError || isWarning) && hasPermissionEvents && /* @__PURE__ */ jsx143(Tooltip7, { 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(Tooltip7, { arrow: true, title: "Error", children: /* @__PURE__ */ jsx143(Cancel6, { 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(Cancel6, { sx: { color: theme.palette.error.main, fontSize: "16px" } }) })
               ]
             }
           ),
@@ -32297,7 +32298,7 @@ var getTraceBounds = (spans) => {
 
 // src/components/trace-panel/waterfall.tsx
 import { AccountTreeOutlined, Cancel as Cancel7, Error as ErrorIcon4, FormatListBulleted, KeyboardArrowDown as KeyboardArrowDown2, KeyboardArrowRight as KeyboardArrowRight2 } from "@mui/icons-material";
-import { Box as Box19, ButtonBase, ToggleButton, ToggleButtonGroup, Typography as Typography14 } from "@mui/material";
+import { Box as Box19, ButtonBase, ToggleButton as ToggleButton2, ToggleButtonGroup as ToggleButtonGroup2, Typography as Typography14 } from "@mui/material";
 import { alpha as alpha5 } from "@mui/material/styles";
 import * as React124 from "react";
 
@@ -32434,7 +32435,7 @@ var WaterfallAxis = ({ durationMs, flat, gridColumns: gridColumns2, onFlatChange
       },
       children: [
         /* @__PURE__ */ jsx147(Box19, { sx: { alignItems: "center", borderRight: 1, borderRightColor: "divider", display: "flex", gridColumn: "1 / 3", pl: "5px" }, children: onFlatChange && /* @__PURE__ */ jsxs136(
-          ToggleButtonGroup,
+          ToggleButtonGroup2,
           {
             "aria-label": "Waterfall layout",
             exclusive: true,
@@ -32445,11 +32446,11 @@ var WaterfallAxis = ({ durationMs, flat, gridColumns: gridColumns2, onFlatChange
             sx: { "& .MuiToggleButton-root": { fontSize: 11, gap: "3px", height: 18, lineHeight: 1, px: "6px", py: 0, textTransform: "none" } },
             value: flat ? "list" : "tree",
             children: [
-              /* @__PURE__ */ jsxs136(ToggleButton, { "data-testid": WATERFALL_TREE_VIEW_BUTTON_TEST_ID, value: "tree", children: [
+              /* @__PURE__ */ jsxs136(ToggleButton2, { "data-testid": WATERFALL_TREE_VIEW_BUTTON_TEST_ID, value: "tree", children: [
                 /* @__PURE__ */ jsx147(AccountTreeOutlined, { sx: { fontSize: 13 } }),
                 "Tree"
               ] }),
-              /* @__PURE__ */ jsxs136(ToggleButton, { "data-testid": WATERFALL_LIST_VIEW_BUTTON_TEST_ID, value: "list", children: [
+              /* @__PURE__ */ jsxs136(ToggleButton2, { "data-testid": WATERFALL_LIST_VIEW_BUTTON_TEST_ID, value: "list", children: [
                 /* @__PURE__ */ jsx147(FormatListBulleted, { sx: { fontSize: 13 } }),
                 "List"
               ] })
@@ -32731,6 +32732,7 @@ var TraceSidebar = ({ onClose, onSelectSpan, selectedSpanId, spanMatches, spans
       }
     };
   }, [spans, selectedSpanId]);
+  const rootResource = root2 ? shortResourceName(root2.resource_name, root2.arn) : "";
   return /* @__PURE__ */ jsxs137(
     Box20,
     {
@@ -32784,9 +32786,11 @@ var TraceSidebar = ({ onClose, onSelectSpan, selectedSpanId, spanMatches, spans
         ),
         /* @__PURE__ */ jsxs137(Box20, { sx: { alignItems: "center", borderBottom: 1, borderColor: "divider", display: "flex", gap: 1.5, px: 2, py: 1 }, children: [
           /* @__PURE__ */ jsxs137(Box20, { sx: { flex: 1, minWidth: 0 }, children: [
-            root2 && /* @__PURE__ */ jsxs137(Box20, { sx: { alignItems: "center", display: "flex", gap: 1 }, children: [
+            /* @__PURE__ */ jsx148(Typography15, { color: "text.secondary", component: "div", sx: { lineHeight: 1.5 }, variant: "overline", children: "Trace root" }),
+            root2 && /* @__PURE__ */ jsxs137(Box20, { "data-testid": TRACE_SIDEBAR_ROOT_HEADING_TEST_ID, sx: { alignItems: "center", display: "flex", gap: 1, minWidth: 0 }, children: [
               /* @__PURE__ */ jsx148(AwsServiceIcon, { hideTooltip: true, service: root2.service_name, size: "small" }),
-              /* @__PURE__ */ jsx148(Typography15, { noWrap: true, sx: { fontWeight: 600 }, title: root2.operation_name, variant: "subtitle1", children: root2.operation_name })
+              /* @__PURE__ */ jsx148(Typography15, { noWrap: true, sx: { flex: "0 1 auto", fontWeight: 600, minWidth: 0 }, title: root2.operation_name, variant: "subtitle1", children: root2.operation_name }),
+              rootResource !== "" && rootResource !== "*" && /* @__PURE__ */ jsx148(Typography15, { color: "text.secondary", noWrap: true, sx: { flex: "1 1 0", minWidth: 0 }, title: rootResource, variant: "body2", children: rootResource })
             ] }),
             /* @__PURE__ */ jsx148(Typography15, { color: "text.secondary", variant: "caption", children: [
               formatDuration(stats.durationMs),
@@ -32796,7 +32800,7 @@ var TraceSidebar = ({ onClose, onSelectSpan, selectedSpanId, spanMatches, spans
             ].join(" \xB7 ") })
           ] }),
           /* @__PURE__ */ jsxs137(
-            ToggleButtonGroup2,
+            ToggleButtonGroup3,
             {
               "aria-label": "Trace view",
               exclusive: true,
@@ -32806,8 +32810,8 @@ var TraceSidebar = ({ onClose, onSelectSpan, selectedSpanId, spanMatches, spans
               size: "small",
               value: view,
               children: [
-                /* @__PURE__ */ jsx148(ToggleButton2, { "data-testid": TRACE_SIDEBAR_WATERFALL_BUTTON_TEST_ID, sx: { px: 1.5, py: 0.25, textTransform: "none" }, value: "waterfall", children: "Waterfall" }),
-                /* @__PURE__ */ jsx148(ToggleButton2, { "data-testid": TRACE_SIDEBAR_MAP_BUTTON_TEST_ID, sx: { px: 1.5, py: 0.25, textTransform: "none" }, value: "map", children: "Map" })
+                /* @__PURE__ */ jsx148(ToggleButton3, { "data-testid": TRACE_SIDEBAR_WATERFALL_BUTTON_TEST_ID, sx: { px: 1.5, py: 0.25, textTransform: "none" }, value: "waterfall", children: "Waterfall" }),
+                /* @__PURE__ */ jsx148(ToggleButton3, { "data-testid": TRACE_SIDEBAR_MAP_BUTTON_TEST_ID, sx: { px: 1.5, py: 0.25, textTransform: "none" }, value: "map", children: "Map" })
               ]
             }
           ),