@localstack/appinspector-ui 1.0.143 → 1.0.144

package/dist/index.cjs

@@ -2480,6 +2480,9 @@ var SPANS_LIST_PAGE_TEST_ID = "spans-list-page";
 var TRACE_GRAPH_PAGE_TEST_ID = "trace-graph-page";
 var VIEW_SPAN_DETAILS_TEST_ID = "view-span-details";
 var SPANS_DATA_GRID_ROW_TEST_ID = "spans-data-grid-row";
+var SPANS_SEARCH_INPUT_TEST_ID = "spans-search-input";
+var SPANS_SEARCH_CLEAR_TEST_ID = "spans-search-clear";
+var SPANS_SEARCH_NO_MATCH_TEST_ID = "spans-search-no-match";
 var EVENT_DETAILS_SECTION_BASIC_INFORMATION_TEST_ID = "event-details-section-basic-information";
 var EVENT_DETAILS_SERVICE_NAME_TEST_ID = "event-details-service-name";
 var EVENT_DETAILS_OPERATION_NAME_TEST_ID = "event-details-operation-name";
@@ -2512,6 +2515,7 @@ var EMULATOR_VERSION_BANNER_TEST_ID = "emulator-version-banner";
 // src/utils/emulator-version.ts
 var import_semver = __toESM(require_semver2(), 1);
 var MINIMUM_EMULATOR_VERSION = "2026.4.0";
+var MIN_EMULATOR_VERSION_FOR_SEARCH = "2026.6.0";
 function checkEmulatorVersion(version, now = /* @__PURE__ */ new Date()) {
   if (!version) return "error";
   const coerced = import_semver.default.coerce(version);
@@ -2522,6 +2526,13 @@ function checkEmulatorVersion(version, now = /* @__PURE__ */ new Date()) {
   if (ageInMonths >= 3) return "warning";
   return "ok";
 }
+function emulatorSupportsSearch(version) {
+  if (!version) return false;
+  const coerced = import_semver.default.coerce(version);
+  const minimum = import_semver.default.coerce(MIN_EMULATOR_VERSION_FOR_SEARCH);
+  if (!coerced || !minimum) return false;
+  return import_semver.default.gte(coerced, minimum);
+}
 function getVersionAgeInMonths(year, month, now = /* @__PURE__ */ new Date()) {
   const versionDate = new Date(year, month - 1, 1);
   return (now.getTime() - versionDate.getTime()) / (1e3 * 60 * 60 * 24 * 30.44);
@@ -15357,7 +15368,7 @@ var StatRow = ({ label, value }) => /* @__PURE__ */ (0, import_jsx_runtime125.js
   /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Typography, { color: "text.secondary", sx: { mr: 4 }, variant: "caption", children: label }),
   /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Typography, { fontWeight: 600, variant: "body2", children: fmtLimit(value) })
 ] });
-var SpanCountBadge = ({ licenseLimit, systemLimit, totalCount, visibleCount }) => {
+var SpanCountBadge = ({ licenseLimit, searchActive = false, systemLimit, totalCount, visibleCount }) => {
   const [anchorElement, setAnchorElement] = (0, import_react36.useState)();
   const bindingLimit = resolveBindingLimit(systemLimit, licenseLimit);
   if (totalCount === void 0 && bindingLimit === void 0) {
@@ -15372,7 +15383,7 @@ var SpanCountBadge = ({ licenseLimit, systemLimit, totalCount, visibleCount }) =
     isLoading ? /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Skeleton, { sx: { minWidth: 120 } }) : /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_material5.Box, { sx: { alignItems: "baseline", display: "flex", gap: 0.5 }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Typography, { color: "text.secondary", variant: "caption", children: "Showing" }),
       /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Typography, { variant: "body2", children: visibleCount === void 0 ? "\u2014" : fmt(visibleCount) }),
-      /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Typography, { color: "text.secondary", variant: "caption", children: `of ${totalCount === void 0 ? "-" : fmt(totalCount)} operations` })
+      /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Typography, { color: "text.secondary", variant: "caption", children: `of ${totalCount === void 0 ? "-" : fmt(totalCount)} ${searchActive ? "matches" : "operations"}` })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Tooltip, { title: "Operation count details", children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
       import_material5.IconButton,
@@ -15411,7 +15422,7 @@ var SpanCountBadge = ({ licenseLimit, systemLimit, totalCount, visibleCount }) =
             /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
               StatRow,
               {
-                label: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Tooltip, { placement: "left", title: "The total number of operations stored on the server.", children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Box, { component: "span", sx: { borderBottom: "1px dashed", borderColor: "text.secondary", cursor: "help" }, children: "Total stored" }) }),
+                label: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Tooltip, { placement: "left", title: searchActive ? "The total number of operations matching the search." : "The total number of operations stored on the server.", children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Box, { component: "span", sx: { borderBottom: "1px dashed", borderColor: "text.secondary", cursor: "help" }, children: searchActive ? "Total matches" : "Total stored" }) }),
                 value: totalCount
               }
             )
@@ -15478,9 +15489,55 @@ var newSpanBackgroundColor = {
 var LABEL_BEGINNING_OF_STREAM = "This is the beginning of the stream";
 var LABEL_END_OF_STREAM = "This is the end of the stream";
 var LABEL_NO_SPANS = "There are no operations";
+var SEARCH_MAX_LENGTH = 512;
+var SEARCH_DEBOUNCE_MS = 300;
 var STICK_TO_EDGE_THRESHOLD_PX = 4;
 var StreamBoundaryRow = ({ colSpan, label }) => /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.TableCell, { colSpan, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("span", { children: label }) }) });
 var LoadingRow = ({ colSpan }) => /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.TableCell, { colSpan, sx: { textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.CircularProgress, { size: 24, sx: { m: 2 } }) }) });
+var NoMatchRow = ({
+  colSpan,
+  onClearSearch,
+  term
+}) => /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.TableCell, { colSpan, "data-testid": SPANS_SEARCH_NO_MATCH_TEST_ID, sx: { textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(import_material6.Box, { sx: { alignItems: "center", display: "flex", flexDirection: "column", gap: 1, py: 3 }, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Typography, { sx: { fontStyle: "italic" }, variant: "body2", children: `No operations match \u201C${term}\u201D` }),
+  /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Button, { onClick: onClearSearch, size: "small", variant: "text", children: "Clear search" })
+] }) }) });
+var SpansSearchField = ({ onChange, onClear, searchSupported, value }) => {
+  const field = /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+    import_material6.TextField,
+    {
+      disabled: !searchSupported,
+      inputProps: {
+        "aria-label": "Search operations",
+        "data-testid": SPANS_SEARCH_INPUT_TEST_ID,
+        "maxLength": SEARCH_MAX_LENGTH
+      },
+      InputProps: {
+        endAdornment: value ? /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.InputAdornment, { position: "end", children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+          import_material6.IconButton,
+          {
+            "aria-label": "Clear search",
+            "data-testid": SPANS_SEARCH_CLEAR_TEST_ID,
+            edge: "end",
+            onClick: onClear,
+            size: "small",
+            children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_icons_material3.Close, { sx: { fontSize: 16 } })
+          }
+        ) }) : void 0,
+        startAdornment: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.InputAdornment, { position: "start", children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_icons_material3.Search, { sx: { fontSize: 18 } }) })
+      },
+      onChange: (event) => {
+        onChange(event.target.value);
+      },
+      placeholder: "Search operations\u2026",
+      size: "small",
+      sx: { minWidth: 260 },
+      value
+    }
+  );
+  if (searchSupported) return field;
+  return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Tooltip, { title: `Search requires LocalStack \u2265 ${MIN_EMULATOR_VERSION_FOR_SEARCH}`, children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("span", { children: field }) });
+};
 var SpansDataGridRow = (0, import_react37.memo)(
   ({ isNew, onSpanClick, row }) => {
     const theme = (0, import_material6.useTheme)();
@@ -15548,13 +15605,35 @@ var SpansDataGrid = ({
   licenseLimit,
   onClearSpans,
   onOrderChange,
+  onSearchChange,
   onSpanClick,
   order: order2,
+  search,
+  searching,
+  searchSupported,
   spans,
   systemLimit,
   totalCount,
   warningCount
 }) => {
+  const searchActive = search.length > 0;
+  const [searchDraft, setSearchDraft] = (0, import_react37.useState)(search);
+  (0, import_react37.useEffect)(() => {
+    const handle = setTimeout(() => {
+      onSearchChange(searchDraft);
+    }, SEARCH_DEBOUNCE_MS);
+    return () => {
+      clearTimeout(handle);
+    };
+  }, [searchDraft, onSearchChange]);
+  const handleClearSearch = (0, import_react37.useCallback)(() => {
+    setSearchDraft("");
+    onSearchChange("");
+  }, [onSearchChange]);
+  const handleClearSpans = (0, import_react37.useCallback)(() => {
+    setSearchDraft("");
+    onClearSpans();
+  }, [onClearSpans]);
   const columns = (0, import_react37.useMemo)(() => [
     columnHelper.accessor("startTime", {
       cell: (props) => /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(ResponsiveTimestampCell, { date: props.getValue() }),
@@ -15577,7 +15656,13 @@ var SpansDataGrid = ({
         if (!props.row.original.parent_service_name || !props.row.original.parent_resource_name) {
           return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Typography, { sx: { fontStyle: "italic" }, variant: "body2", children: "External producer" });
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(ServiceCell, { resource: props.row.original.parent_resource_name, service: props.row.original.parent_service_name });
+        return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+          ServiceCell,
+          {
+            resource: props.row.original.parent_resource_name,
+            service: props.row.original.parent_service_name
+          }
+        );
       },
       header: "Producer",
       id: "producer",
@@ -15688,14 +15773,40 @@ var SpansDataGrid = ({
   }, [order2, spans?.length, lastSpanId]);
   return /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(import_jsx_runtime126.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Grid, { item: true, xs: 12, children: /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(import_material6.Box, { sx: { alignItems: "center", display: "flex", gap: "0.5rem" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(SpanCountBadge, { licenseLimit, systemLimit, totalCount, visibleCount: spans?.length }),
-      errorCount !== void 0 && errorCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(import_jsx_runtime126.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+        SpansSearchField,
+        {
+          onChange: setSearchDraft,
+          onClear: handleClearSearch,
+          searchSupported,
+          value: searchDraft
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+        SpanCountBadge,
+        {
+          licenseLimit,
+          searchActive,
+          systemLimit,
+          totalCount,
+          visibleCount: spans?.length
+        }
+      ),
+      !searchActive && errorCount !== void 0 && errorCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(import_jsx_runtime126.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Typography, { color: "text.disabled", sx: { mr: 0.5 }, variant: "body2", children: "\u2014" }),
         /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Tooltip, { title: "Number of errors detected across all operations", children: /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(
           import_material6.Box,
           {
             "data-testid": ERROR_COUNT_TEST_ID,
-            sx: { alignItems: "center", borderBottom: "1px dotted", borderColor: "error.main", cursor: "help", display: "flex", gap: 0.5, mb: "-1px" },
+            sx: {
+              alignItems: "center",
+              borderBottom: "1px dotted",
+              borderColor: "error.main",
+              cursor: "help",
+              display: "flex",
+              gap: 0.5,
+              mb: "-1px"
+            },
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Typography, { color: "error", variant: "body2", children: errorCount.toLocaleString() }),
               /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Typography, { color: "error", variant: "caption", children: errorCount === 1 ? "error" : "errors" })
@@ -15703,13 +15814,21 @@ var SpansDataGrid = ({
           }
         ) })
       ] }),
-      warningCount !== void 0 && warningCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(import_jsx_runtime126.Fragment, { children: [
+      !searchActive && warningCount !== void 0 && warningCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(import_jsx_runtime126.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Typography, { color: "text.disabled", sx: { mr: 0.5 }, variant: "body2", children: "\u2014" }),
         /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Tooltip, { title: "Number of warnings detected across all operations", children: /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(
           import_material6.Box,
           {
             "data-testid": WARNING_COUNT_TEST_ID,
-            sx: { alignItems: "center", borderBottom: "1px dotted", borderColor: "warning.main", cursor: "help", display: "flex", gap: 0.5, mb: "-1px" },
+            sx: {
+              alignItems: "center",
+              borderBottom: "1px dotted",
+              borderColor: "warning.main",
+              cursor: "help",
+              display: "flex",
+              gap: 0.5,
+              mb: "-1px"
+            },
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Typography, { color: "warning.main", variant: "body2", children: warningCount.toLocaleString() }),
               /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Typography, { color: "warning.main", variant: "caption", children: warningCount === 1 ? "warning" : "warnings" })
@@ -15725,7 +15844,7 @@ var SpansDataGrid = ({
             import_material6.Button,
             {
               "data-testid": CLEAR_SPANS_TEST_ID,
-              onClick: onClearSpans,
+              onClick: handleClearSpans,
               startIcon: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_icons_material3.DeleteForeverOutlined, {}),
               children: "Clear Operations"
             }
@@ -15778,31 +15897,71 @@ var SpansDataGrid = ({
                 )) }, headerGroup.id);
               }) }),
               /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(import_material6.TableBody, { children: [
-                (spans === void 0 || clearingSpans) && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.TableCell, { colSpan: columnCount, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.CircularProgress, { size: 48, sx: { m: 4 } }) }) }),
-                !clearingSpans && spans?.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_NO_SPANS }),
+                (spans === void 0 || clearingSpans || searching) && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.TableCell, { colSpan: columnCount, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.CircularProgress, { size: 48, sx: { m: 4 } }) }) }),
+                !clearingSpans && !searching && spans?.length === 0 && (searchActive ? /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(NoMatchRow, { colSpan: columnCount, onClearSearch: handleClearSearch, term: search }) : /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_NO_SPANS })),
                 !clearingSpans && order2 === "newest_first" && /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(import_jsx_runtime126.Fragment, { children: [
                   hasRows && hasMoreForward && fetchingForward && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(LoadingRow, { colSpan: columnCount }),
                   hasRows && !hasMoreForward && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_END_OF_STREAM }),
-                  hasRows && paddingTop > 0 && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.TableCell, { colSpan: columnCount, sx: { border: 0, height: paddingTop, p: 0 } }) }),
+                  hasRows && paddingTop > 0 && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+                    import_material6.TableCell,
+                    {
+                      colSpan: columnCount,
+                      sx: { border: 0, height: paddingTop, p: 0 }
+                    }
+                  ) }),
                   hasRows && virtualItems.map((virtualItem) => {
                     const row = displayRows[virtualItem.index];
                     const isNew = !(seenSpanIdsRef.current?.has(row.original.span_id) ?? false);
-                    return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(SpansDataGridRow, { isNew, onSpanClick, row }, row.original.span_id);
+                    return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+                      SpansDataGridRow,
+                      {
+                        isNew,
+                        onSpanClick,
+                        row
+                      },
+                      row.original.span_id
+                    );
                   }),
-                  hasRows && paddingBottom > 0 && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.TableCell, { colSpan: columnCount, sx: { border: 0, height: paddingBottom, p: 0 } }) }),
+                  hasRows && paddingBottom > 0 && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+                    import_material6.TableCell,
+                    {
+                      colSpan: columnCount,
+                      sx: { border: 0, height: paddingBottom, p: 0 }
+                    }
+                  ) }),
                   hasRows && hasMoreBackward && fetchingBackward && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(LoadingRow, { colSpan: columnCount }),
                   hasRows && !hasMoreBackward && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_BEGINNING_OF_STREAM })
                 ] }),
                 !clearingSpans && order2 === "oldest_first" && /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(import_jsx_runtime126.Fragment, { children: [
                   hasRows && !hasMoreBackward && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_BEGINNING_OF_STREAM }),
                   hasRows && hasMoreBackward && fetchingBackward && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(LoadingRow, { colSpan: columnCount }),
-                  hasRows && paddingTop > 0 && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.TableCell, { colSpan: columnCount, sx: { border: 0, height: paddingTop, p: 0 } }) }),
+                  hasRows && paddingTop > 0 && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+                    import_material6.TableCell,
+                    {
+                      colSpan: columnCount,
+                      sx: { border: 0, height: paddingTop, p: 0 }
+                    }
+                  ) }),
                   hasRows && virtualItems.map((virtualItem) => {
                     const row = displayRows[virtualItem.index];
                     const isNew = !(seenSpanIdsRef.current?.has(row.original.span_id) ?? false);
-                    return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(SpansDataGridRow, { isNew, onSpanClick, row }, row.original.span_id);
+                    return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+                      SpansDataGridRow,
+                      {
+                        isNew,
+                        onSpanClick,
+                        row
+                      },
+                      row.original.span_id
+                    );
                   }),
-                  hasRows && paddingBottom > 0 && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.TableCell, { colSpan: columnCount, sx: { border: 0, height: paddingBottom, p: 0 } }) }),
+                  hasRows && paddingBottom > 0 && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+                    import_material6.TableCell,
+                    {
+                      colSpan: columnCount,
+                      sx: { border: 0, height: paddingBottom, p: 0 }
+                    }
+                  ) }),
                   hasRows && hasMoreForward && fetchingForward && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(LoadingRow, { colSpan: columnCount }),
                   hasRows && !hasMoreForward && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_END_OF_STREAM })
                 ] })
@@ -15843,8 +16002,12 @@ var SpansList = (props) => {
         licenseLimit: props.licenseLimit,
         onClearSpans: props.onClearSpans,
         onOrderChange: props.onOrderChange,
+        onSearchChange: props.onSearchChange,
         onSpanClick: props.onSpanClick,
         order: props.order,
+        search: props.search,
+        searching: props.searching,
+        searchSupported: props.searchSupported,
         spans: props.spans,
         systemLimit: props.systemLimit,
         totalCount: props.totalCount,
@@ -16255,6 +16418,7 @@ var createPaginationBuffer = (options) => {
   let hasMoreBackward = void 0;
   let fetchingForward = false;
   let fetchingBackward = false;
+  let abortController;
   const reportDataChange = () => {
     options.onDataChange({
       hasMoreBackward: hasMoreBackward ?? false,
@@ -16278,25 +16442,40 @@ var createPaginationBuffer = (options) => {
     if (hasMoreForward === true) {
       return;
     }
+    const controller = new AbortController();
+    abortController = controller;
     fetchingForward = true;
     reportStatusChange();
     try {
-      const newPage = await fetchPage(nextForwardToken);
+      const newPage = await fetchPage(nextForwardToken, controller.signal);
+      if (controller.signal.aborted) {
+        return;
+      }
       hasMoreForward = newPage.items.length > 0;
       reportDataChange();
     } catch (error) {
+      if (controller.signal.aborted) {
+        return;
+      }
       reportError(error instanceof Error ? error : new Error("Failed to fetch forward page", { cause: error }));
     } finally {
-      fetchingForward = false;
-      reportStatusChange();
+      if (!controller.signal.aborted) {
+        fetchingForward = false;
+        reportStatusChange();
+        runPostFetchActions();
+      }
     }
-    runPostFetchActions();
   };
   const fetchForward = async () => {
+    const controller = new AbortController();
+    abortController = controller;
     fetchingForward = true;
     reportStatusChange();
     try {
-      const newPage = await fetchPage(nextForwardToken);
+      const newPage = await fetchPage(nextForwardToken, controller.signal);
+      if (controller.signal.aborted) {
+        return;
+      }
       if (options.sortComparator === void 0) {
         items = [...items ?? [], ...newPage.items];
       } else {
@@ -16312,18 +16491,28 @@ var createPaginationBuffer = (options) => {
       nextBackwardToken ??= newPage.nextBackwardToken;
       reportDataChange();
     } catch (error) {
+      if (controller.signal.aborted) {
+        return;
+      }
       reportError(error instanceof Error ? error : new Error("Failed to fetch forward page", { cause: error }));
     } finally {
-      fetchingForward = false;
-      reportStatusChange();
+      if (!controller.signal.aborted) {
+        fetchingForward = false;
+        reportStatusChange();
+        runPostFetchActions();
+      }
     }
-    runPostFetchActions();
   };
   const fetchBackward = async () => {
+    const controller = new AbortController();
+    abortController = controller;
     fetchingBackward = true;
     reportStatusChange();
     try {
-      const newPage = await fetchPage(nextBackwardToken);
+      const newPage = await fetchPage(nextBackwardToken, controller.signal);
+      if (controller.signal.aborted) {
+        return;
+      }
       if (options.sortComparator === void 0) {
         items = [...newPage.items, ...items ?? []];
       } else {
@@ -16339,12 +16528,17 @@ var createPaginationBuffer = (options) => {
       nextForwardToken ??= newPage.nextForwardToken;
       reportDataChange();
     } catch (error) {
+      if (controller.signal.aborted) {
+        return;
+      }
       reportError(error instanceof Error ? error : new Error("Failed to fetch forward page", { cause: error }));
     } finally {
-      fetchingBackward = false;
-      reportStatusChange();
+      if (!controller.signal.aborted) {
+        fetchingBackward = false;
+        reportStatusChange();
+        runPostFetchActions();
+      }
     }
-    runPostFetchActions();
   };
   const runPostFetchActions = () => {
     if (fetchBackwardLater) {
@@ -16369,11 +16563,16 @@ var createPaginationBuffer = (options) => {
       void checkIfThereAreMoreItemsForward();
     },
     clear: () => {
+      abortController?.abort();
+      abortController = void 0;
+      fetchingForward = false;
+      fetchingBackward = false;
       items = [];
       hasMoreBackward = void 0;
       nextBackwardToken = void 0;
       hasMoreForward = void 0;
       nextForwardToken = void 0;
+      reportStatusChange();
       reportDataChange();
     },
     fetchBackward: async () => {
@@ -16609,9 +16808,9 @@ var createApiClient = ({ localstackEndpoint }) => {
       const endpoint = buildEventsEndpoint(iamEventsRequest);
       return makeRequest({ endpoint, localstackEndpoint });
     },
-    getSpans: async (request) => {
+    getSpans: async (request, options) => {
       const endpoint = buildSpansEndpoint(request);
-      const response = await makeRequest({ endpoint, localstackEndpoint });
+      const response = await makeRequest({ endpoint, localstackEndpoint, request: { signal: options?.signal } });
       return {
         ...response,
         spans: response.spans.map((span) => ({
@@ -18701,45 +18900,11 @@ var useSpans = () => {
   const [fetchError, setFetchError] = (0, import_react46.useState)();
   const [fetchingForward, setFetchingForward] = (0, import_react46.useState)(false);
   const [fetchingBackward, setFetchingBackward] = (0, import_react46.useState)(false);
-  const paginationBufferRef = (0, import_react46.useRef)(createPaginationBuffer({
-    async fetchPage(token) {
-      const response = await api.getSpans({
-        limit: PAGE_SIZE,
-        pagination_token: token
-      });
-      setTotalCount(response.pagination.total_count);
-      setLicenseLimit(response.limits.span_count_limit_license);
-      setSystemLimit(response.limits.span_count_limit_system);
-      setErrorCount(response.error_count);
-      setWarningCount(response.warning_count);
-      return {
-        hasMoreBackward: response.pagination.has_prev,
-        hasMoreForward: response.pagination.has_next,
-        items: response.spans,
-        nextBackwardToken: response.pagination.prev_cursor ?? void 0,
-        nextForwardToken: response.pagination.next_cursor ?? void 0
-      };
-    },
-    onDataChange: ({ hasMoreBackward: hasMoreBackward2, hasMoreForward: hasMoreForward2, items }) => {
-      setFetchError(void 0);
-      setSpans(items);
-      setHasMoreBackward(hasMoreBackward2);
-      setHasMoreForward(hasMoreForward2);
-    },
-    onError: (error) => {
-      setFetchError(error);
-    },
-    onStatusChange(status) {
-      setFetchingBackward(status.fetchingBackward);
-      setFetchingForward(status.fetchingForward);
-    },
-    // The spans endpoint is sorted by span ingestion time, which might differ from
-    // the span timestamp. In order to accomodate for this, we will sort the spans
-    // in the frontend with the following sort comparator.
-    sortComparator(a3, b3) {
-      return a3.start_time_unix_nano < b3.start_time_unix_nano ? -1 : 1;
-    }
-  }));
+  const [search, setSearch] = (0, import_react46.useState)("");
+  const searchRef = (0, import_react46.useRef)("");
+  const [searching, setSearching] = (0, import_react46.useState)(false);
+  const searchSeqRef = (0, import_react46.useRef)(0);
+  const paginationBufferRef = (0, import_react46.useRef)();
   const [totalCount, setTotalCount] = (0, import_react46.useState)();
   const [licenseLimit, setLicenseLimit] = (0, import_react46.useState)();
   const [systemLimit, setSystemLimit] = (0, import_react46.useState)();
@@ -18748,14 +18913,71 @@ var useSpans = () => {
   const [hasMoreBackward, setHasMoreBackward] = (0, import_react46.useState)();
   const [hasMoreForward, setHasMoreForward] = (0, import_react46.useState)();
   const fetchForward = (0, import_react46.useCallback)(() => {
-    void paginationBufferRef.current.fetchForward();
+    void paginationBufferRef.current?.fetchForward();
   }, []);
   const fetchBackward = (0, import_react46.useCallback)(() => {
-    void paginationBufferRef.current.fetchBackward();
+    void paginationBufferRef.current?.fetchBackward();
+  }, []);
+  const applySearch = (0, import_react46.useCallback)((term) => {
+    const normalized = term.trim();
+    if (normalized === searchRef.current) {
+      return;
+    }
+    searchRef.current = normalized;
+    setSearch(normalized);
+    const seq = ++searchSeqRef.current;
+    setSearching(true);
+    paginationBufferRef.current?.clear();
+    void paginationBufferRef.current?.fetchForward().finally(() => {
+      if (searchSeqRef.current === seq) {
+        setSearching(false);
+      }
+    });
   }, []);
   (0, import_react46.useEffect)(() => {
-    fetchForward();
-  }, [fetchForward]);
+    const buffer = createPaginationBuffer({
+      async fetchPage(token, signal) {
+        const response = await api.getSpans({
+          limit: PAGE_SIZE,
+          pagination_token: token,
+          search: searchRef.current || void 0
+        }, { signal });
+        setTotalCount(response.pagination.total_count);
+        setLicenseLimit(response.limits.span_count_limit_license);
+        setSystemLimit(response.limits.span_count_limit_system);
+        setErrorCount(response.error_count);
+        setWarningCount(response.warning_count);
+        return {
+          hasMoreBackward: response.pagination.has_prev,
+          hasMoreForward: response.pagination.has_next,
+          items: response.spans,
+          nextBackwardToken: response.pagination.prev_cursor ?? void 0,
+          nextForwardToken: response.pagination.next_cursor ?? void 0
+        };
+      },
+      onDataChange: ({ hasMoreBackward: hasMoreBackward2, hasMoreForward: hasMoreForward2, items }) => {
+        setFetchError(void 0);
+        setSpans(items);
+        setHasMoreBackward(hasMoreBackward2);
+        setHasMoreForward(hasMoreForward2);
+      },
+      onError: (error) => {
+        setFetchError(error);
+      },
+      onStatusChange(status) {
+        setFetchingBackward(status.fetchingBackward);
+        setFetchingForward(status.fetchingForward);
+      },
+      // The spans endpoint is sorted by span ingestion time, which might differ from
+      // the span timestamp. In order to accomodate for this, we will sort the spans
+      // in the frontend with the following sort comparator.
+      sortComparator(a3, b3) {
+        return a3.start_time_unix_nano < b3.start_time_unix_nano ? -1 : 1;
+      }
+    });
+    paginationBufferRef.current = buffer;
+    void buffer.fetchForward();
+  }, [api]);
   const [clearingSpans, setClearingSpans] = (0, import_react46.useState)(false);
   const clearSpans = (0, import_react46.useCallback)(async () => {
     if (clearingSpans) {
@@ -18765,8 +18987,11 @@ var useSpans = () => {
     try {
       await api.deleteSpans();
       setTotalCount(void 0);
-      paginationBufferRef.current.clear();
-      await paginationBufferRef.current.fetchForward();
+      searchRef.current = "";
+      setSearch("");
+      setSearching(false);
+      paginationBufferRef.current?.clear();
+      await paginationBufferRef.current?.fetchForward();
     } catch (error) {
       console.error("Failed to delete spans:", error);
       setFetchError(error instanceof Error ? error : new Error("Failed to delete spans", { cause: error }));
@@ -18776,12 +19001,12 @@ var useSpans = () => {
   }, [clearingSpans, api]);
   (0, import_react46.useEffect)(() => {
     if (hasMoreForward === true && !fetchingForward) {
-      void paginationBufferRef.current.fetchForward();
+      void paginationBufferRef.current?.fetchForward();
     }
   }, [hasMoreForward, fetchingForward]);
   (0, import_react46.useEffect)(() => {
     if (hasMoreBackward === true && !fetchingBackward && !fetchingForward) {
-      void paginationBufferRef.current.fetchBackward();
+      void paginationBufferRef.current?.fetchBackward();
     }
   }, [hasMoreBackward, fetchingBackward, fetchingForward]);
   useSpansWebSocket({
@@ -18792,7 +19017,7 @@ var useSpans = () => {
         return;
       }
       if (!hasMoreForward) {
-        void paginationBufferRef.current.fetchForward();
+        void paginationBufferRef.current?.fetchForward();
       }
     },
     onOpen: () => {
@@ -18816,6 +19041,9 @@ var useSpans = () => {
     hasMoreBackward,
     hasMoreForward,
     licenseLimit,
+    search,
+    searching,
+    setSearch: applySearch,
     spans,
     systemLimit,
     totalCount,
@@ -19816,7 +20044,7 @@ var AddBox = "M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.
 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 Close2 = "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 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";
@@ -19847,7 +20075,7 @@ var CircularArrowsIcon = (props) => {
 };
 var CloseIcon = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(BaseIcon, {
-    d: Close,
+    d: Close2,
     ...props
   });
 };
@@ -32095,6 +32323,9 @@ var SpansListPage = () => {
     hasMoreBackward,
     hasMoreForward,
     licenseLimit,
+    search,
+    searching,
+    setSearch,
     spans,
     systemLimit,
     totalCount,
@@ -32106,6 +32337,7 @@ var SpansListPage = () => {
   }, [clearSpans]);
   const localstackVersion = status?.localstackVersion ?? (statusError instanceof AppInspectorNotFoundError ? statusError.localstackVersion : void 0);
   const versionCompatibility = checkEmulatorVersion(localstackVersion);
+  const searchSupported = emulatorSupportsSearch(localstackVersion);
   const [bannerDismissed, setBannerDismissed] = (0, import_react63.useState)(false);
   const [order2, setOrder] = useLocalStorage("spans-order", "oldest_first");
   const [selectedTraceId, setSelectedTraceId] = (0, import_react63.useState)();
@@ -32222,8 +32454,12 @@ var SpansListPage = () => {
               onClearSpans: clearSpansSync,
               onFetchForward: fetchForward,
               onOrderChange: setOrder,
+              onSearchChange: setSearch,
               onSpanClick: navigateToSpan,
               order: order2,
+              search,
+              searching,
+              searchSupported,
               spans,
               systemLimit,
               totalCount,