@localstack/appinspector-ui 1.0.142 → 1.0.144

package/dist/index.js

@@ -2422,7 +2422,7 @@ var init_event_streams = __esm({
 
 // src/pages/spans-list-page.tsx
 import { Box as Box19 } from "@mui/material";
-import { useCallback as useCallback11, useEffect as useEffect22, useRef as useRef16, useState as useState18 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect22, useRef as useRef16, useState as useState19 } from "react";
 
 // src/api/errors.ts
 var AppInspectorDisabledError = class extends Error {
@@ -2476,6 +2476,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";
@@ -2508,6 +2511,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);
@@ -2518,6 +2522,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);
@@ -2586,13 +2597,15 @@ var EmulatorVersionBanner = ({
 import { Alert as Alert2, Box as Box5, Button as Button3 } from "@mui/material";
 
 // src/components/spans-list/spans-data-grid.tsx
-import { DeleteForeverOutlined } from "@mui/icons-material";
+import { Close, DeleteForeverOutlined, Search } from "@mui/icons-material";
 import {
   Box as Box4,
   Button as Button2,
   CircularProgress,
   FormControlLabel,
   Grid,
+  IconButton as IconButton2,
+  InputAdornment,
   Paper,
   Table,
   TableBody,
@@ -2601,6 +2614,7 @@ import {
   TableHead,
   TableRow,
   TableSortLabel,
+  TextField,
   Tooltip as Tooltip4,
   Typography as Typography4,
   useTheme as useTheme2
@@ -13061,7 +13075,7 @@ var motion = /* @__PURE__ */ createMotionProxy(function(Component, config) {
 });
 
 // src/components/spans-list/spans-data-grid.tsx
-import { memo as memo8, useCallback as useCallback2, useEffect as useEffect11, useLayoutEffect as useLayoutEffect3, useMemo as useMemo4, useRef as useRef6 } from "react";
+import { memo as memo8, useCallback as useCallback2, useEffect as useEffect11, useLayoutEffect as useLayoutEffect3, useMemo as useMemo4, useRef as useRef6, useState as useState5 } from "react";
 
 // src/components/cells/responsive-timestamp-cell.tsx
 import { memo as memo3 } from "react";
@@ -15370,7 +15384,7 @@ var StatRow = ({ label, value }) => /* @__PURE__ */ jsxs120(Box3, { sx: { alignI
   /* @__PURE__ */ jsx125(Typography3, { color: "text.secondary", sx: { mr: 4 }, variant: "caption", children: label }),
   /* @__PURE__ */ jsx125(Typography3, { fontWeight: 600, variant: "body2", children: fmtLimit(value) })
 ] });
-var SpanCountBadge = ({ licenseLimit, systemLimit, totalCount, visibleCount }) => {
+var SpanCountBadge = ({ licenseLimit, searchActive = false, systemLimit, totalCount, visibleCount }) => {
   const [anchorElement, setAnchorElement] = useState4();
   const bindingLimit = resolveBindingLimit(systemLimit, licenseLimit);
   if (totalCount === void 0 && bindingLimit === void 0) {
@@ -15385,7 +15399,7 @@ var SpanCountBadge = ({ licenseLimit, systemLimit, totalCount, visibleCount }) =
     isLoading ? /* @__PURE__ */ jsx125(Skeleton, { sx: { minWidth: 120 } }) : /* @__PURE__ */ jsxs120(Box3, { sx: { alignItems: "baseline", display: "flex", gap: 0.5 }, children: [
       /* @__PURE__ */ jsx125(Typography3, { color: "text.secondary", variant: "caption", children: "Showing" }),
       /* @__PURE__ */ jsx125(Typography3, { variant: "body2", children: visibleCount === void 0 ? "\u2014" : fmt(visibleCount) }),
-      /* @__PURE__ */ jsx125(Typography3, { color: "text.secondary", variant: "caption", children: `of ${totalCount === void 0 ? "-" : fmt(totalCount)} operations` })
+      /* @__PURE__ */ jsx125(Typography3, { color: "text.secondary", variant: "caption", children: `of ${totalCount === void 0 ? "-" : fmt(totalCount)} ${searchActive ? "matches" : "operations"}` })
     ] }),
     /* @__PURE__ */ jsx125(Tooltip3, { title: "Operation count details", children: /* @__PURE__ */ jsx125(
       IconButton,
@@ -15424,7 +15438,7 @@ var SpanCountBadge = ({ licenseLimit, systemLimit, totalCount, visibleCount }) =
             /* @__PURE__ */ jsx125(
               StatRow,
               {
-                label: /* @__PURE__ */ jsx125(Tooltip3, { placement: "left", title: "The total number of operations stored on the server.", children: /* @__PURE__ */ jsx125(Box3, { component: "span", sx: { borderBottom: "1px dashed", borderColor: "text.secondary", cursor: "help" }, children: "Total stored" }) }),
+                label: /* @__PURE__ */ jsx125(Tooltip3, { placement: "left", title: searchActive ? "The total number of operations matching the search." : "The total number of operations stored on the server.", children: /* @__PURE__ */ jsx125(Box3, { component: "span", sx: { borderBottom: "1px dashed", borderColor: "text.secondary", cursor: "help" }, children: searchActive ? "Total matches" : "Total stored" }) }),
                 value: totalCount
               }
             )
@@ -15491,9 +15505,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__ */ jsx126(TableRow, { children: /* @__PURE__ */ jsx126(TableCell, { colSpan, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ jsx126("span", { children: label }) }) });
 var LoadingRow = ({ colSpan }) => /* @__PURE__ */ jsx126(TableRow, { children: /* @__PURE__ */ jsx126(TableCell, { colSpan, sx: { textAlign: "center" }, children: /* @__PURE__ */ jsx126(CircularProgress, { size: 24, sx: { m: 2 } }) }) });
+var NoMatchRow = ({
+  colSpan,
+  onClearSearch,
+  term
+}) => /* @__PURE__ */ jsx126(TableRow, { children: /* @__PURE__ */ jsx126(TableCell, { colSpan, "data-testid": SPANS_SEARCH_NO_MATCH_TEST_ID, sx: { textAlign: "center" }, children: /* @__PURE__ */ jsxs121(Box4, { sx: { alignItems: "center", display: "flex", flexDirection: "column", gap: 1, py: 3 }, children: [
+  /* @__PURE__ */ jsx126(Typography4, { sx: { fontStyle: "italic" }, variant: "body2", children: `No operations match \u201C${term}\u201D` }),
+  /* @__PURE__ */ jsx126(Button2, { onClick: onClearSearch, size: "small", variant: "text", children: "Clear search" })
+] }) }) });
+var SpansSearchField = ({ onChange, onClear, searchSupported, value }) => {
+  const field = /* @__PURE__ */ jsx126(
+    TextField,
+    {
+      disabled: !searchSupported,
+      inputProps: {
+        "aria-label": "Search operations",
+        "data-testid": SPANS_SEARCH_INPUT_TEST_ID,
+        "maxLength": SEARCH_MAX_LENGTH
+      },
+      InputProps: {
+        endAdornment: value ? /* @__PURE__ */ jsx126(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx126(
+          IconButton2,
+          {
+            "aria-label": "Clear search",
+            "data-testid": SPANS_SEARCH_CLEAR_TEST_ID,
+            edge: "end",
+            onClick: onClear,
+            size: "small",
+            children: /* @__PURE__ */ jsx126(Close, { sx: { fontSize: 16 } })
+          }
+        ) }) : void 0,
+        startAdornment: /* @__PURE__ */ jsx126(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx126(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__ */ jsx126(Tooltip4, { title: `Search requires LocalStack \u2265 ${MIN_EMULATOR_VERSION_FOR_SEARCH}`, children: /* @__PURE__ */ jsx126("span", { children: field }) });
+};
 var SpansDataGridRow = memo8(
   ({ isNew, onSpanClick, row }) => {
     const theme = useTheme2();
@@ -15561,13 +15621,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] = useState5(search);
+  useEffect11(() => {
+    const handle = setTimeout(() => {
+      onSearchChange(searchDraft);
+    }, SEARCH_DEBOUNCE_MS);
+    return () => {
+      clearTimeout(handle);
+    };
+  }, [searchDraft, onSearchChange]);
+  const handleClearSearch = useCallback2(() => {
+    setSearchDraft("");
+    onSearchChange("");
+  }, [onSearchChange]);
+  const handleClearSpans = useCallback2(() => {
+    setSearchDraft("");
+    onClearSpans();
+  }, [onClearSpans]);
   const columns = useMemo4(() => [
     columnHelper.accessor("startTime", {
       cell: (props) => /* @__PURE__ */ jsx126(ResponsiveTimestampCell, { date: props.getValue() }),
@@ -15590,7 +15672,13 @@ var SpansDataGrid = ({
         if (!props.row.original.parent_service_name || !props.row.original.parent_resource_name) {
           return /* @__PURE__ */ jsx126(Typography4, { sx: { fontStyle: "italic" }, variant: "body2", children: "External producer" });
         }
-        return /* @__PURE__ */ jsx126(ServiceCell, { resource: props.row.original.parent_resource_name, service: props.row.original.parent_service_name });
+        return /* @__PURE__ */ jsx126(
+          ServiceCell,
+          {
+            resource: props.row.original.parent_resource_name,
+            service: props.row.original.parent_service_name
+          }
+        );
       },
       header: "Producer",
       id: "producer",
@@ -15701,14 +15789,40 @@ var SpansDataGrid = ({
   }, [order2, spans?.length, lastSpanId]);
   return /* @__PURE__ */ jsxs121(Fragment4, { children: [
     /* @__PURE__ */ jsx126(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs121(Box4, { sx: { alignItems: "center", display: "flex", gap: "0.5rem" }, children: [
-      /* @__PURE__ */ jsx126(SpanCountBadge, { licenseLimit, systemLimit, totalCount, visibleCount: spans?.length }),
-      errorCount !== void 0 && errorCount > 0 && /* @__PURE__ */ jsxs121(Fragment4, { children: [
+      /* @__PURE__ */ jsx126(
+        SpansSearchField,
+        {
+          onChange: setSearchDraft,
+          onClear: handleClearSearch,
+          searchSupported,
+          value: searchDraft
+        }
+      ),
+      /* @__PURE__ */ jsx126(
+        SpanCountBadge,
+        {
+          licenseLimit,
+          searchActive,
+          systemLimit,
+          totalCount,
+          visibleCount: spans?.length
+        }
+      ),
+      !searchActive && errorCount !== void 0 && errorCount > 0 && /* @__PURE__ */ jsxs121(Fragment4, { children: [
         /* @__PURE__ */ jsx126(Typography4, { color: "text.disabled", sx: { mr: 0.5 }, variant: "body2", children: "\u2014" }),
         /* @__PURE__ */ jsx126(Tooltip4, { title: "Number of errors detected across all operations", children: /* @__PURE__ */ jsxs121(
           Box4,
           {
             "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__ */ jsx126(Typography4, { color: "error", variant: "body2", children: errorCount.toLocaleString() }),
               /* @__PURE__ */ jsx126(Typography4, { color: "error", variant: "caption", children: errorCount === 1 ? "error" : "errors" })
@@ -15716,13 +15830,21 @@ var SpansDataGrid = ({
           }
         ) })
       ] }),
-      warningCount !== void 0 && warningCount > 0 && /* @__PURE__ */ jsxs121(Fragment4, { children: [
+      !searchActive && warningCount !== void 0 && warningCount > 0 && /* @__PURE__ */ jsxs121(Fragment4, { children: [
         /* @__PURE__ */ jsx126(Typography4, { color: "text.disabled", sx: { mr: 0.5 }, variant: "body2", children: "\u2014" }),
         /* @__PURE__ */ jsx126(Tooltip4, { title: "Number of warnings detected across all operations", children: /* @__PURE__ */ jsxs121(
           Box4,
           {
             "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__ */ jsx126(Typography4, { color: "warning.main", variant: "body2", children: warningCount.toLocaleString() }),
               /* @__PURE__ */ jsx126(Typography4, { color: "warning.main", variant: "caption", children: warningCount === 1 ? "warning" : "warnings" })
@@ -15738,7 +15860,7 @@ var SpansDataGrid = ({
             Button2,
             {
               "data-testid": CLEAR_SPANS_TEST_ID,
-              onClick: onClearSpans,
+              onClick: handleClearSpans,
               startIcon: /* @__PURE__ */ jsx126(DeleteForeverOutlined, {}),
               children: "Clear Operations"
             }
@@ -15791,31 +15913,71 @@ var SpansDataGrid = ({
                 )) }, headerGroup.id);
               }) }),
               /* @__PURE__ */ jsxs121(TableBody, { children: [
-                (spans === void 0 || clearingSpans) && /* @__PURE__ */ jsx126(TableRow, { children: /* @__PURE__ */ jsx126(TableCell, { colSpan: columnCount, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ jsx126(CircularProgress, { size: 48, sx: { m: 4 } }) }) }),
-                !clearingSpans && spans?.length === 0 && /* @__PURE__ */ jsx126(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_NO_SPANS }),
+                (spans === void 0 || clearingSpans || searching) && /* @__PURE__ */ jsx126(TableRow, { children: /* @__PURE__ */ jsx126(TableCell, { colSpan: columnCount, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ jsx126(CircularProgress, { size: 48, sx: { m: 4 } }) }) }),
+                !clearingSpans && !searching && spans?.length === 0 && (searchActive ? /* @__PURE__ */ jsx126(NoMatchRow, { colSpan: columnCount, onClearSearch: handleClearSearch, term: search }) : /* @__PURE__ */ jsx126(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_NO_SPANS })),
                 !clearingSpans && order2 === "newest_first" && /* @__PURE__ */ jsxs121(Fragment4, { children: [
                   hasRows && hasMoreForward && fetchingForward && /* @__PURE__ */ jsx126(LoadingRow, { colSpan: columnCount }),
                   hasRows && !hasMoreForward && /* @__PURE__ */ jsx126(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_END_OF_STREAM }),
-                  hasRows && paddingTop > 0 && /* @__PURE__ */ jsx126(TableRow, { children: /* @__PURE__ */ jsx126(TableCell, { colSpan: columnCount, sx: { border: 0, height: paddingTop, p: 0 } }) }),
+                  hasRows && paddingTop > 0 && /* @__PURE__ */ jsx126(TableRow, { children: /* @__PURE__ */ jsx126(
+                    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__ */ jsx126(SpansDataGridRow, { isNew, onSpanClick, row }, row.original.span_id);
+                    return /* @__PURE__ */ jsx126(
+                      SpansDataGridRow,
+                      {
+                        isNew,
+                        onSpanClick,
+                        row
+                      },
+                      row.original.span_id
+                    );
                   }),
-                  hasRows && paddingBottom > 0 && /* @__PURE__ */ jsx126(TableRow, { children: /* @__PURE__ */ jsx126(TableCell, { colSpan: columnCount, sx: { border: 0, height: paddingBottom, p: 0 } }) }),
+                  hasRows && paddingBottom > 0 && /* @__PURE__ */ jsx126(TableRow, { children: /* @__PURE__ */ jsx126(
+                    TableCell,
+                    {
+                      colSpan: columnCount,
+                      sx: { border: 0, height: paddingBottom, p: 0 }
+                    }
+                  ) }),
                   hasRows && hasMoreBackward && fetchingBackward && /* @__PURE__ */ jsx126(LoadingRow, { colSpan: columnCount }),
                   hasRows && !hasMoreBackward && /* @__PURE__ */ jsx126(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_BEGINNING_OF_STREAM })
                 ] }),
                 !clearingSpans && order2 === "oldest_first" && /* @__PURE__ */ jsxs121(Fragment4, { children: [
                   hasRows && !hasMoreBackward && /* @__PURE__ */ jsx126(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_BEGINNING_OF_STREAM }),
                   hasRows && hasMoreBackward && fetchingBackward && /* @__PURE__ */ jsx126(LoadingRow, { colSpan: columnCount }),
-                  hasRows && paddingTop > 0 && /* @__PURE__ */ jsx126(TableRow, { children: /* @__PURE__ */ jsx126(TableCell, { colSpan: columnCount, sx: { border: 0, height: paddingTop, p: 0 } }) }),
+                  hasRows && paddingTop > 0 && /* @__PURE__ */ jsx126(TableRow, { children: /* @__PURE__ */ jsx126(
+                    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__ */ jsx126(SpansDataGridRow, { isNew, onSpanClick, row }, row.original.span_id);
+                    return /* @__PURE__ */ jsx126(
+                      SpansDataGridRow,
+                      {
+                        isNew,
+                        onSpanClick,
+                        row
+                      },
+                      row.original.span_id
+                    );
                   }),
-                  hasRows && paddingBottom > 0 && /* @__PURE__ */ jsx126(TableRow, { children: /* @__PURE__ */ jsx126(TableCell, { colSpan: columnCount, sx: { border: 0, height: paddingBottom, p: 0 } }) }),
+                  hasRows && paddingBottom > 0 && /* @__PURE__ */ jsx126(TableRow, { children: /* @__PURE__ */ jsx126(
+                    TableCell,
+                    {
+                      colSpan: columnCount,
+                      sx: { border: 0, height: paddingBottom, p: 0 }
+                    }
+                  ) }),
                   hasRows && hasMoreForward && fetchingForward && /* @__PURE__ */ jsx126(LoadingRow, { colSpan: columnCount }),
                   hasRows && !hasMoreForward && /* @__PURE__ */ jsx126(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_END_OF_STREAM })
                 ] })
@@ -15856,8 +16018,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,
@@ -15870,7 +16036,7 @@ var SpansList = (props) => {
 // src/components/status-message/status-message.tsx
 import { ErrorOutline, InfoOutlined as InfoOutlined2 } from "@mui/icons-material";
 import { Alert as Alert3, AlertTitle, Box as Box6, Button as Button4, CircularProgress as CircularProgress2, Link, Typography as Typography5 } from "@mui/material";
-import { useState as useState5 } from "react";
+import { useState as useState6 } from "react";
 import { Fragment as Fragment5, jsx as jsx128, jsxs as jsxs123 } from "react/jsx-runtime";
 var StatusMessage = ({
   localstackVersion,
@@ -15878,8 +16044,8 @@ var StatusMessage = ({
   onRetry,
   phase
 }) => {
-  const [enabling, setEnabling] = useState5(false);
-  const [enableError, setEnableError] = useState5();
+  const [enabling, setEnabling] = useState6(false);
+  const [enableError, setEnableError] = useState6();
   const handleEnable = async () => {
     if (!onEnable) return;
     setEnabling(true);
@@ -16082,14 +16248,14 @@ var StatusMessage = ({
 import { createContext as createContext8, useContext as useContext14 } from "react";
 
 // src/hooks/use-connection-state-machine.ts
-import { useCallback as useCallback3, useEffect as useEffect12, useRef as useRef7, useState as useState6 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect12, useRef as useRef7, useState as useState7 } from "react";
 var POLL_INTERVAL_MS = 5e3;
 function useConnectionStateMachine() {
   const api = useAppInspectorApi();
-  const [phase, setPhase] = useState6("CHECKING_STATUS");
-  const [checking, setChecking] = useState6(true);
-  const [status, setStatus] = useState6();
-  const [statusError, setStatusError] = useState6();
+  const [phase, setPhase] = useState7("CHECKING_STATUS");
+  const [checking, setChecking] = useState7(true);
+  const [status, setStatus] = useState7();
+  const [statusError, setStatusError] = useState7();
   const abortControllerRef = useRef7(null);
   const dispatchStatus = useCallback3((result, error) => {
     if (result === void 0) {
@@ -16179,9 +16345,9 @@ var useAppInspectorStatus = () => {
 };
 
 // src/hooks/use-local-storage.tsx
-import { useCallback as useCallback4, useEffect as useEffect13, useState as useState7 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect13, useState as useState8 } from "react";
 function useLocalStorage(key, initialValue) {
-  const [storedValue, setStoredValue] = useState7(() => {
+  const [storedValue, setStoredValue] = useState8(() => {
     try {
       const item = globalThis.localStorage.getItem(key);
       return item ? JSON.parse(item) : initialValue;
@@ -16224,7 +16390,7 @@ function useLocalStorage(key, initialValue) {
 }
 
 // src/hooks/use-spans.ts
-import { useCallback as useCallback7, useEffect as useEffect16, useRef as useRef10, useState as useState9 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect16, useRef as useRef10, useState as useState10 } from "react";
 
 // src/utils/pagination-buffer.ts
 var insertSorted = (array, item, compareFunction, hint = "back") => {
@@ -16268,6 +16434,7 @@ var createPaginationBuffer = (options) => {
   let hasMoreBackward = void 0;
   let fetchingForward = false;
   let fetchingBackward = false;
+  let abortController;
   const reportDataChange = () => {
     options.onDataChange({
       hasMoreBackward: hasMoreBackward ?? false,
@@ -16291,25 +16458,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 {
@@ -16325,18 +16507,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 {
@@ -16352,12 +16544,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) {
@@ -16382,11 +16579,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 () => {
@@ -16405,7 +16607,7 @@ var createPaginationBuffer = (options) => {
 };
 
 // src/hooks/use-spans-ws.tsx
-import { useCallback as useCallback6, useEffect as useEffect15, useRef as useRef9, useState as useState8 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect15, useRef as useRef9, useState as useState9 } from "react";
 
 // src/config.ts
 var APPINSPECTOR_API_PREFIX = "/_localstack/appinspector";
@@ -16622,9 +16824,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) => ({
@@ -18649,7 +18851,7 @@ function useSpansWebSocket(options) {
   useEffect15(() => {
     onCloseRef.current = onClose;
   }, [onClose]);
-  const [connected, setConnected] = useState8(false);
+  const [connected, setConnected] = useState9(false);
   const wsRef = useRef9(void 0);
   const { localstackEndpoint } = useAppInspector();
   const connect = useCallback6(() => {
@@ -18710,66 +18912,89 @@ var PAGE_SIZE = 100;
 var useSpans = () => {
   const api = useAppInspectorApi();
   const { onWsClose, onWsOpen, wsEnabled } = useAppInspectorStatus();
-  const [spans, setSpans] = useState9();
-  const [fetchError, setFetchError] = useState9();
-  const [fetchingForward, setFetchingForward] = useState9(false);
-  const [fetchingBackward, setFetchingBackward] = useState9(false);
-  const paginationBufferRef = useRef10(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 [totalCount, setTotalCount] = useState9();
-  const [licenseLimit, setLicenseLimit] = useState9();
-  const [systemLimit, setSystemLimit] = useState9();
-  const [errorCount, setErrorCount] = useState9();
-  const [warningCount, setWarningCount] = useState9();
-  const [hasMoreBackward, setHasMoreBackward] = useState9();
-  const [hasMoreForward, setHasMoreForward] = useState9();
+  const [spans, setSpans] = useState10();
+  const [fetchError, setFetchError] = useState10();
+  const [fetchingForward, setFetchingForward] = useState10(false);
+  const [fetchingBackward, setFetchingBackward] = useState10(false);
+  const [search, setSearch] = useState10("");
+  const searchRef = useRef10("");
+  const [searching, setSearching] = useState10(false);
+  const searchSeqRef = useRef10(0);
+  const paginationBufferRef = useRef10();
+  const [totalCount, setTotalCount] = useState10();
+  const [licenseLimit, setLicenseLimit] = useState10();
+  const [systemLimit, setSystemLimit] = useState10();
+  const [errorCount, setErrorCount] = useState10();
+  const [warningCount, setWarningCount] = useState10();
+  const [hasMoreBackward, setHasMoreBackward] = useState10();
+  const [hasMoreForward, setHasMoreForward] = useState10();
   const fetchForward = useCallback7(() => {
-    void paginationBufferRef.current.fetchForward();
+    void paginationBufferRef.current?.fetchForward();
   }, []);
   const fetchBackward = useCallback7(() => {
-    void paginationBufferRef.current.fetchBackward();
+    void paginationBufferRef.current?.fetchBackward();
+  }, []);
+  const applySearch = useCallback7((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);
+      }
+    });
   }, []);
   useEffect16(() => {
-    fetchForward();
-  }, [fetchForward]);
-  const [clearingSpans, setClearingSpans] = useState9(false);
+    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] = useState10(false);
   const clearSpans = useCallback7(async () => {
     if (clearingSpans) {
       return;
@@ -18778,8 +19003,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 }));
@@ -18789,12 +19017,12 @@ var useSpans = () => {
   }, [clearingSpans, api]);
   useEffect16(() => {
     if (hasMoreForward === true && !fetchingForward) {
-      void paginationBufferRef.current.fetchForward();
+      void paginationBufferRef.current?.fetchForward();
     }
   }, [hasMoreForward, fetchingForward]);
   useEffect16(() => {
     if (hasMoreBackward === true && !fetchingBackward && !fetchingForward) {
-      void paginationBufferRef.current.fetchBackward();
+      void paginationBufferRef.current?.fetchBackward();
     }
   }, [hasMoreBackward, fetchingBackward, fetchingForward]);
   useSpansWebSocket({
@@ -18805,7 +19033,7 @@ var useSpans = () => {
         return;
       }
       if (!hasMoreForward) {
-        void paginationBufferRef.current.fetchForward();
+        void paginationBufferRef.current?.fetchForward();
       }
     },
     onOpen: () => {
@@ -18829,6 +19057,9 @@ var useSpans = () => {
     hasMoreBackward,
     hasMoreForward,
     licenseLimit,
+    search,
+    searching,
+    setSearch: applySearch,
     spans,
     systemLimit,
     totalCount,
@@ -18841,12 +19072,12 @@ import { ArrowBack } from "@mui/icons-material";
 import { Box as Box18, Button as Button6, Drawer, Paper as Paper3 } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { ReactFlowProvider } from "@xyflow/react";
-import { useCallback as useCallback10, useEffect as useEffect21, useRef as useRef15, useState as useState17 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect21, useRef as useRef15, useState as useState18 } from "react";
 
 // src/components/event-details/event-details.tsx
-import { Close as Close2 } from "@mui/icons-material";
-import { Alert as Alert4, Box as Box15, Chip as Chip3, Divider as Divider3, FormControlLabel as FormControlLabel2, IconButton as IconButton4, Stack as Stack4, Switch, Typography as Typography11 } from "@mui/material";
-import { useMemo as useMemo10, useState as useState15 } from "react";
+import { Close as Close3 } from "@mui/icons-material";
+import { Alert as Alert4, Box as Box15, Chip as Chip3, Divider as Divider3, FormControlLabel as FormControlLabel2, IconButton as IconButton5, Stack as Stack4, Switch, Typography as Typography11 } from "@mui/material";
+import { useMemo as useMemo10, useState as useState16 } from "react";
 
 // src/utils/event-utils.ts
 var iamEventParser = (eventName, attributes) => {
@@ -18958,11 +19189,11 @@ var getEventGroupsByType = (events) => {
 
 // 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 useCallback8, useState as useState10 } from "react";
+import { IconButton as IconButton3, Tooltip as Tooltip5 } from "@mui/material";
+import { useCallback as useCallback8, useState as useState11 } from "react";
 import { jsx as jsx131 } from "react/jsx-runtime";
 var CopyButton = ({ value }) => {
-  const [copied, setCopied] = useState10(false);
+  const [copied, setCopied] = useState11(false);
   const handleCopy = useCallback8(() => {
     const text2 = typeof value === "string" ? value : JSON.stringify(value, void 0, 2);
     void navigator.clipboard.writeText(text2).then(() => {
@@ -18973,7 +19204,7 @@ var CopyButton = ({ value }) => {
     });
   }, [value]);
   return /* @__PURE__ */ jsx131(Tooltip5, { title: copied ? "Copied!" : "Copy", children: /* @__PURE__ */ jsx131(
-    IconButton2,
+    IconButton3,
     {
       className: "copy-btn",
       onClick: handleCopy,
@@ -18986,8 +19217,8 @@ var CopyButton = ({ value }) => {
 
 // src/components/event-details/event-detail.tsx
 import { KeyboardArrowDown, KeyboardArrowRight } from "@mui/icons-material";
-import { Box as Box12, IconButton as IconButton3, Typography as Typography8 } from "@mui/material";
-import { useEffect as useEffect18, useMemo as useMemo8, useRef as useRef12, useState as useState12 } from "react";
+import { Box as Box12, IconButton as IconButton4, Typography as Typography8 } from "@mui/material";
+import { useEffect as useEffect18, useMemo as useMemo8, useRef as useRef12, useState as useState13 } from "react";
 
 // src/components/status-icon.tsx
 import { Cancel as Cancel2, CheckCircle, Error as Error3, Info, RemoveCircle } from "@mui/icons-material";
@@ -19153,7 +19384,7 @@ import { Box as Box11, useTheme as useTheme3 } from "@mui/material";
 var import_copy_to_clipboard = __toESM(require_copy_to_clipboard(), 1);
 import { jsx as jsx135, jsxs as jsxs126, Fragment as Fragment7 } from "react/jsx-runtime";
 import { Box as Box10, InputBase, NoSsr, SvgIcon, createTheme, ThemeProvider, Paper as Paper2 } from "@mui/material";
-import { createContext as createContext10, useContext as useContext16, useState as useState11, useRef as useRef11, useCallback as useCallback9, useMemo as useMemo7, useEffect as useEffect17, memo as memo9 } from "react";
+import { createContext as createContext10, useContext as useContext16, useState as useState12, useRef as useRef11, useCallback as useCallback9, useMemo as useMemo7, useEffect as useEffect17, memo as memo9 } from "react";
 import { create, useStore, createStore } from "zustand";
 function r(e2) {
   var t, f2, n = "";
@@ -19397,7 +19628,7 @@ 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 = useRef11(null);
   const handleCopyResult = useCallback9((value) => {
     const current = copyTimeout.current;
@@ -19480,7 +19711,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;
@@ -19829,7 +20060,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";
@@ -19860,7 +20091,7 @@ var CircularArrowsIcon = (props) => {
 };
 var CloseIcon = (props) => {
   return /* @__PURE__ */ jsx135(BaseIcon, {
-    d: Close,
+    d: Close2,
     ...props
   });
 };
@@ -20011,7 +20242,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 = useMemo7(() => {
     if (!props.inspect) {
@@ -20217,7 +20448,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;
@@ -20371,7 +20602,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);
@@ -20385,7 +20616,7 @@ var DataKeyPair = (props) => {
   const setHover = useJsonViewerStore((store) => store.setHover);
   const root2 = 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);
@@ -20770,7 +21001,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);
@@ -20991,8 +21222,8 @@ var DetailRow2 = ({ content, label }) => /* @__PURE__ */ jsxs127(Box12, { sx: {
   /* @__PURE__ */ jsx137(Box12, { children: typeof content === "string" ? /* @__PURE__ */ jsx137(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 = useRef12(null);
   const parsedMessage = useMemo8(() => parseEventMessage(event), [event]);
   const isIAMPolicyEvent = useMemo8(
@@ -21023,7 +21254,7 @@ var EventMessage = ({ event }) => {
   return /* @__PURE__ */ jsxs127(Box12, { sx: { display: "flex", flexDirection: "column" }, children: [
     /* @__PURE__ */ jsxs127(Box12, { sx: { alignItems: "center", display: "flex" }, children: [
       Boolean(shouldShowToggle) && /* @__PURE__ */ jsx137(
-        IconButton3,
+        IconButton4,
         {
           onClick: () => {
             setIsOpen(!isOpen);
@@ -31055,7 +31286,7 @@ var QueryStatus = {
 
 // src/components/event-details/lambda-invoke-logs-section.tsx
 import { Box as Box13, CircularProgress as CircularProgress3, Stack as Stack3, Typography as Typography9 } from "@mui/material";
-import { useEffect as useEffect19, useMemo as useMemo9, useRef as useRef13, useState as useState13 } from "react";
+import { useEffect as useEffect19, useMemo as useMemo9, useRef as useRef13, useState as useState14 } from "react";
 import { jsx as jsx138, jsxs as jsxs128 } from "react/jsx-runtime";
 var POLL_INTERVAL_MS2 = 1e3;
 async function pollQueryResults(client, queryId) {
@@ -31084,9 +31315,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 = useRef13(null);
   const cloudWatchLogs = useCloudWatchLogsClient(region);
   useEffect19(() => {
@@ -31163,10 +31394,10 @@ var LambdaInvokeLogsSection = ({ endTimeNano, functionName: functionName2, regio
 // src/components/event-details/toggle-section.tsx
 import { KeyboardArrowDown as KeyboardArrowDown2, KeyboardArrowRight as KeyboardArrowRight2 } from "@mui/icons-material";
 import { Box as Box14, Typography as Typography10 } from "@mui/material";
-import { useState as useState14 } from "react";
+import { useState as useState15 } from "react";
 import { jsx as jsx139, jsxs as jsxs129 } from "react/jsx-runtime";
 var ToggleSection = ({ action, children, headline, initialOpen = true }) => {
-  const [isOpen, setIsOpen] = useState14(initialOpen);
+  const [isOpen, setIsOpen] = useState15(initialOpen);
   return /* @__PURE__ */ jsxs129(Box14, { sx: { mt: 4 }, children: [
     /* @__PURE__ */ jsxs129(
       Box14,
@@ -31227,7 +31458,7 @@ var EventDetails = ({ onClose, selectedEvent }) => {
     () => getEventGroupsByType(selectedEvent?.events ?? []),
     [selectedEvent?.events]
   );
-  const [parseNestedJson, setParseNestedJson] = useState15(true);
+  const [parseNestedJson, setParseNestedJson] = useState16(true);
   if (!selectedEvent) {
     return /* @__PURE__ */ jsx140(Box15, { sx: { p: 3, textAlign: "center" }, children: /* @__PURE__ */ jsx140(Typography11, { color: "text.secondary", variant: "body2", children: "Select an operation to view graph" }) });
   }
@@ -31270,7 +31501,7 @@ var EventDetails = ({ onClose, selectedEvent }) => {
         },
         children: [
           /* @__PURE__ */ jsx140(Box15, { children: /* @__PURE__ */ jsx140(Typography11, { sx: { fontWeight: 600 }, variant: "h6", children: "Operation Details" }) }),
-          onClose && /* @__PURE__ */ jsx140(IconButton4, { "data-testid": EVENT_DETAILS_CLOSE_BUTTON_TEST_ID, onClick: onClose, size: "small", children: /* @__PURE__ */ jsx140(Close2, {}) })
+          onClose && /* @__PURE__ */ jsx140(IconButton5, { "data-testid": EVENT_DETAILS_CLOSE_BUTTON_TEST_ID, onClick: onClose, size: "small", children: /* @__PURE__ */ jsx140(Close3, {}) })
         ]
       }
     ),
@@ -31458,7 +31689,7 @@ import { Box as Box16, Divider as Divider4, Stack as Stack5, Tooltip as Tooltip6
 import { Handle, Position } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
 import "react";
-import { memo as memo11, useMemo as useMemo11, useRef as useRef14, useState as useState16 } from "react";
+import { memo as memo11, useMemo as useMemo11, useRef as useRef14, useState as useState17 } from "react";
 import { Fragment as Fragment10, jsx as jsx141, jsxs as jsxs131 } from "react/jsx-runtime";
 var handleStyle = {
   backgroundColor: "white",
@@ -31543,7 +31774,7 @@ var NodeContent = ({ event, expanded, hasPermissionEvents, isError, isWarning })
 };
 var ServiceNode = memo11(({ data, selected }) => {
   const theme = useTheme4();
-  const [isHovered, setIsHovered] = useState16(false);
+  const [isHovered, setIsHovered] = useState17(false);
   const nodeRef = useRef14(null);
   const isError = data.event.status_code === 2;
   const hasPermissionEvents = useMemo11(
@@ -31708,7 +31939,7 @@ var getLayoutedNodesAndEdges = (inputNodes, inputEdges) => {
 
 // src/components/trace-graph/xyflow/controls.tsx
 import { Add, FitScreen, Remove } from "@mui/icons-material";
-import { Box as Box17, IconButton as IconButton5 } from "@mui/material";
+import { Box as Box17, IconButton as IconButton6 } from "@mui/material";
 import { useReactFlow, useStore as useStore2 } from "@xyflow/react";
 import { memo as memo12 } from "react";
 import { shallow } from "zustand/shallow";
@@ -31745,7 +31976,7 @@ var Controls = memo12(() => {
       },
       children: [
         /* @__PURE__ */ jsx142(
-          IconButton5,
+          IconButton6,
           {
             className: "react-flow__controls-zoomin",
             disabled: maxZoomReached,
@@ -31755,7 +31986,7 @@ var Controls = memo12(() => {
           }
         ),
         /* @__PURE__ */ jsx142(
-          IconButton5,
+          IconButton6,
           {
             className: "react-flow__controls-zoomout",
             disabled: minZoomReached,
@@ -31765,7 +31996,7 @@ var Controls = memo12(() => {
           }
         ),
         /* @__PURE__ */ jsx142(
-          IconButton5,
+          IconButton6,
           {
             className: "react-flow__controls-fitview",
             onClick: onFitViewHandler,
@@ -32035,9 +32266,9 @@ async function fetchConnectedTraces(api, traceIds, allSpans = /* @__PURE__ */ ne
 var TraceGraphPage = ({ onClose, spanId, traceId }) => {
   const api = useAppInspectorApi();
   const { headerHeight } = useAppInspector();
-  const [spans, setSpans] = useState17();
-  const [loading, setLoading] = useState17(false);
-  const [fetchError, setFetchError] = useState17();
+  const [spans, setSpans] = useState18();
+  const [loading, setLoading] = useState18(false);
+  const [fetchError, setFetchError] = useState18();
   const fetchSpans = useCallback10(async () => {
     setLoading(true);
     try {
@@ -32054,8 +32285,8 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
   useEffect21(() => {
     void fetchSpans();
   }, [fetchSpans]);
-  const [open, setOpen] = useState17(true);
-  const [selectedEvent, setSelectedEvent] = useState17(() => spans?.find((span) => span.span_id === spanId));
+  const [open, setOpen] = useState18(true);
+  const [selectedEvent, setSelectedEvent] = useState18(() => spans?.find((span) => span.span_id === spanId));
   const spansReference = useRef15();
   useEffect21(() => {
     if (!spansReference.current && spans) {
@@ -32108,6 +32339,9 @@ var SpansListPage = () => {
     hasMoreBackward,
     hasMoreForward,
     licenseLimit,
+    search,
+    searching,
+    setSearch,
     spans,
     systemLimit,
     totalCount,
@@ -32119,10 +32353,11 @@ var SpansListPage = () => {
   }, [clearSpans]);
   const localstackVersion = status?.localstackVersion ?? (statusError instanceof AppInspectorNotFoundError ? statusError.localstackVersion : void 0);
   const versionCompatibility = checkEmulatorVersion(localstackVersion);
-  const [bannerDismissed, setBannerDismissed] = useState18(false);
+  const searchSupported = emulatorSupportsSearch(localstackVersion);
+  const [bannerDismissed, setBannerDismissed] = useState19(false);
   const [order2, setOrder] = useLocalStorage("spans-order", "oldest_first");
-  const [selectedTraceId, setSelectedTraceId] = useState18();
-  const [selectedSpanId, setSelectedSpanId] = useState18();
+  const [selectedTraceId, setSelectedTraceId] = useState19();
+  const [selectedSpanId, setSelectedSpanId] = useState19();
   const navigateToSpan = useCallback11((span) => {
     setSelectedTraceId(span.trace_id);
     setSelectedSpanId(span.span_id);
@@ -32235,8 +32470,12 @@ var SpansListPage = () => {
               onClearSpans: clearSpansSync,
               onFetchForward: fetchForward,
               onOrderChange: setOrder,
+              onSearchChange: setSearch,
               onSpanClick: navigateToSpan,
               order: order2,
+              search,
+              searching,
+              searchSupported,
               spans,
               systemLimit,
               totalCount,