@localstack/appinspector-ui 1.0.60 → 1.0.62

package/dist/index.cjs

@@ -77,7 +77,7 @@ module.exports = __toCommonJS(index_exports);
 
 // src/pages/spans-list-page.tsx
 var import_material20 = require("@mui/material");
-var import_react61 = require("react");
+var import_react62 = require("react");
 
 // src/components/spans-list/spans-list.tsx
 var import_material5 = require("@mui/material");
@@ -12148,6 +12148,16 @@ var newSpanBackgroundColor = {
   dark: "#887b02",
   light: "#ffde7b"
 };
+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 spans";
+var LABEL_LOAD_OLDER = "Load older spans";
+var LABEL_LOAD_NEWER = "Load newer spans";
+var StreamBoundaryRow = ({ colSpan, label }) => /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.TableCell, { colSpan, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("span", { children: label }) }) });
+var LoadSpansRow = ({ colSpan, fetching, label, onFetch }) => /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_material4.TableCell, { colSpan, sx: { textAlign: "center" }, children: [
+  !fetching && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Button, { onClick: onFetch, sx: { my: 1 }, children: label }),
+  fetching && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.CircularProgress, { size: 24, sx: { m: 2 } })
+] }) });
 var SpansDataGridRow = (0, import_react40.memo)(
   ({ row }) => {
     const theme = (0, import_material4.useTheme)();
@@ -12203,12 +12213,18 @@ var SpansDataGridRow = (0, import_react40.memo)(
 var SpansDataGrid = ({
   clearingSpans,
   fetchingBackward,
+  fetchingForward,
   hasMoreBackward,
   hasMoreForward,
   onClearSpans,
   onFetchBackward,
+  onFetchForward,
+  onOrderChange,
   onSpanClick,
-  spans
+  onToggleStream,
+  order: order2,
+  spans,
+  streamPaused
 }) => {
   const columns = (0, import_react40.useMemo)(() => [
     columnHelper.accessor("trace_id", {
@@ -12297,6 +12313,38 @@ var SpansDataGrid = ({
   return /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_jsx_runtime124.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Grid, { item: true, xs: 12, children: /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_material4.Box, { sx: { alignItems: "center", display: "flex", gap: "0.5rem" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Box, { sx: { flexGrow: 1 } }),
+      /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+        import_material4.FormControlLabel,
+        {
+          control: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+            import_material4.Button,
+            {
+              onClick: onToggleStream,
+              startIcon: streamPaused ? /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_icons_material.PlayArrowOutlined, {}) : /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_icons_material.PauseOutlined, {}),
+              variant: "text",
+              children: streamPaused ? "Resume Stream" : "Pause Stream"
+            }
+          ),
+          label: ""
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+        import_material4.FormControlLabel,
+        {
+          control: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+            import_material4.Button,
+            {
+              onClick: () => {
+                onOrderChange(order2 === "newest_first" ? "oldest_first" : "newest_first");
+              },
+              startIcon: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_icons_material.SwapVertOutlined, {}),
+              variant: "text",
+              children: order2 === "newest_first" ? "Newest First" : "Oldest First"
+            }
+          ),
+          label: ""
+        }
+      ),
       /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
         import_material4.FormControlLabel,
         {
@@ -12354,21 +12402,30 @@ var SpansDataGrid = ({
               }) }),
               /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_material4.TableBody, { children: [
                 spans === void 0 && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.TableCell, { colSpan: columnCount, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.CircularProgress, { size: 48, sx: { m: 4 } }) }) }),
-                spans?.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.TableCell, { colSpan: columnCount, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("span", { children: "There are no spans" }) }) }),
-                hasRows && !hasMoreBackward && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.TableCell, { colSpan: columnCount, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("span", { children: "This is the beginning of the stream" }) }) }),
-                hasRows && hasMoreBackward && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_material4.TableCell, { colSpan: columnCount, sx: { textAlign: "center" }, children: [
-                  !fetchingBackward && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
-                    import_material4.Button,
-                    {
-                      onClick: onFetchBackward,
-                      sx: { my: 1 },
-                      children: "Load older spans"
+                spans?.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_NO_SPANS }),
+                order2 === "newest_first" && /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_jsx_runtime124.Fragment, { children: [
+                  hasRows && hasMoreForward && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(LoadSpansRow, { colSpan: columnCount, fetching: fetchingForward, label: LABEL_LOAD_NEWER, onFetch: onFetchForward }),
+                  hasRows && !hasMoreForward && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_END_OF_STREAM }),
+                  hasRows && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(AnimatePresence, { initial: false, children: (() => {
+                    const reversed = [];
+                    for (let index2 = rows.length - 1; index2 >= 0; index2--) {
+                      const row = rows.at(index2);
+                      reversed.push(
+                        /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(SpansDataGridRow, { row }, row.original.span_id)
+                      );
                     }
-                  ),
-                  fetchingBackward && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.CircularProgress, { size: 24, sx: { m: 2 } })
-                ] }) }),
-                hasRows && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(AnimatePresence, { initial: false, children: rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(SpansDataGridRow, { row }, row.original.span_id)) }),
-                hasRows && !hasMoreForward && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.TableCell, { colSpan: columnCount, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("span", { children: "This is the end of the stream" }) }) })
+                    return reversed;
+                  })() }),
+                  hasRows && hasMoreBackward && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(LoadSpansRow, { colSpan: columnCount, fetching: fetchingBackward, label: LABEL_LOAD_OLDER, onFetch: onFetchBackward }),
+                  hasRows && !hasMoreBackward && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_BEGINNING_OF_STREAM })
+                ] }),
+                order2 === "oldest_first" && /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_jsx_runtime124.Fragment, { children: [
+                  hasRows && !hasMoreBackward && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_BEGINNING_OF_STREAM }),
+                  hasRows && hasMoreBackward && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(LoadSpansRow, { colSpan: columnCount, fetching: fetchingBackward, label: LABEL_LOAD_OLDER, onFetch: onFetchBackward }),
+                  hasRows && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(AnimatePresence, { initial: false, children: rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(SpansDataGridRow, { row }, row.original.span_id)) }),
+                  hasRows && hasMoreForward && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(LoadSpansRow, { colSpan: columnCount, fetching: fetchingForward, label: LABEL_LOAD_NEWER, onFetch: onFetchForward }),
+                  hasRows && !hasMoreForward && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_END_OF_STREAM })
+                ] })
               ] })
             ]
           }
@@ -12405,9 +12462,12 @@ var SpansList = (props) => {
         onClearSpans: props.onClearSpans,
         onFetchBackward: props.onFetchBackward,
         onFetchForward: props.onFetchForward,
+        onOrderChange: props.onOrderChange,
         onSpanClick: props.onSpanClick,
-        refetching: props.refetching,
-        spans: props.spans
+        onToggleStream: props.onToggleStream,
+        order: props.order,
+        spans: props.spans,
+        streamPaused: props.streamPaused
       }
     )
   ] });
@@ -12710,18 +12770,63 @@ var StatusMessage = ({
   return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_jsx_runtime126.Fragment, {});
 };
 
+// src/hooks/use-local-storage.tsx
+var import_react41 = require("react");
+function useLocalStorage(key, initialValue) {
+  const [storedValue, setStoredValue] = (0, import_react41.useState)(() => {
+    try {
+      const item = globalThis.localStorage.getItem(key);
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      console.error(`Error reading localStorage key "${key}":`, error);
+      return initialValue;
+    }
+  });
+  const setValue = (0, import_react41.useCallback)((value) => {
+    try {
+      setStoredValue((previousState) => {
+        const next = typeof value === "function" ? value(previousState) : value;
+        globalThis.localStorage.setItem(key, JSON.stringify(next));
+        globalThis.dispatchEvent(new StorageEvent("storage", {
+          key,
+          newValue: JSON.stringify(next)
+        }));
+        return next;
+      });
+    } catch (error) {
+      console.error(`Error setting localStorage key "${key}":`, error);
+    }
+  }, [key]);
+  (0, import_react41.useEffect)(() => {
+    const handleStorageChange = (event) => {
+      if (event.key === key && event.newValue !== null) {
+        try {
+          setStoredValue(JSON.parse(event.newValue));
+        } catch (error) {
+          console.error(`Error parsing localStorage key "${key}":`, error);
+        }
+      }
+    };
+    globalThis.addEventListener("storage", handleStorageChange);
+    return () => {
+      globalThis.removeEventListener("storage", handleStorageChange);
+    };
+  }, [key]);
+  return [storedValue, setValue];
+}
+
 // src/hooks/use-spans.ts
-var import_react46 = require("react");
+var import_react47 = require("react");
 
 // src/api/use-api.tsx
-var import_react41 = require("react");
+var import_react42 = require("react");
 var import_jsx_runtime127 = require("react/jsx-runtime");
-var AppInspectorApiContext = (0, import_react41.createContext)(void 0);
+var AppInspectorApiContext = (0, import_react42.createContext)(void 0);
 var ApiProvider = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(AppInspectorApiContext.Provider, { value: props.api, children: props.children });
 };
 var useAppInspectorApi = () => {
-  const api = (0, import_react41.useContext)(AppInspectorApiContext);
+  const api = (0, import_react42.useContext)(AppInspectorApiContext);
   if (!api) {
     throw new Error("useAppInspectorApi must be used within AppInspectorApiProvider");
   }
@@ -12729,15 +12834,15 @@ var useAppInspectorApi = () => {
 };
 
 // src/hooks/use-status.tsx
-var import_react42 = require("react");
+var import_react43 = require("react");
 var useStatus = () => {
   const api = useAppInspectorApi();
-  const [checking, setChecking] = (0, import_react42.useState)(true);
-  const [status, setStatus] = (0, import_react42.useState)();
-  const [error, setError] = (0, import_react42.useState)();
-  const hasFetchedReference = (0, import_react42.useRef)(false);
-  const abortControllerReference = (0, import_react42.useRef)(null);
-  const checkStatus = (0, import_react42.useCallback)(async () => {
+  const [checking, setChecking] = (0, import_react43.useState)(true);
+  const [status, setStatus] = (0, import_react43.useState)();
+  const [error, setError] = (0, import_react43.useState)();
+  const hasFetchedReference = (0, import_react43.useRef)(false);
+  const abortControllerReference = (0, import_react43.useRef)(null);
+  const checkStatus = (0, import_react43.useCallback)(async () => {
     if (abortControllerReference.current !== null) {
       abortControllerReference.current.abort();
     }
@@ -12761,7 +12866,7 @@ var useStatus = () => {
       }
     }
   }, [api]);
-  (0, import_react42.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     if (!hasFetchedReference.current) {
       hasFetchedReference.current = true;
       void checkStatus();
@@ -12812,7 +12917,6 @@ var createPaginationBuffer = (options) => {
   let hasMoreBackward = void 0;
   let fetchingForward = false;
   let fetchingBackward = false;
-  const refetching = false;
   const reportDataChange = () => {
     options.onDataChange({
       hasMoreBackward: hasMoreBackward ?? false,
@@ -12823,8 +12927,7 @@ var createPaginationBuffer = (options) => {
   const reportStatusChange = () => {
     options.onStatusChange?.({
       fetchingBackward,
-      fetchingForward,
-      refetching
+      fetchingForward
     });
   };
   const reportError = (error) => {
@@ -12832,6 +12935,25 @@ var createPaginationBuffer = (options) => {
   };
   let fetchForwardLater = false;
   let fetchBackwardLater = false;
+  let fetchForwardSilentlyLater = false;
+  const checkIfThereAreMoreItemsForward = async () => {
+    if (hasMoreForward === true) {
+      return;
+    }
+    fetchingForward = true;
+    reportStatusChange();
+    try {
+      const newPage = await fetchPage(nextForwardToken);
+      hasMoreForward = newPage.items.length > 0;
+      reportDataChange();
+    } catch (error) {
+      reportError(error instanceof Error ? error : new Error("Failed to fetch forward page", { cause: error }));
+    } finally {
+      fetchingForward = false;
+      reportStatusChange();
+    }
+    runPostFetchActions();
+  };
   const fetchForward = async () => {
     fetchingForward = true;
     reportStatusChange();
@@ -12895,8 +13017,19 @@ var createPaginationBuffer = (options) => {
       fetchForwardLater = false;
       void fetchForward();
     }
+    if (fetchForwardSilentlyLater) {
+      fetchForwardSilentlyLater = false;
+      void checkIfThereAreMoreItemsForward();
+    }
   };
   return {
+    checkIfThereAreMoreItemsForward: () => {
+      if (fetchingForward || fetchingBackward) {
+        fetchForwardSilentlyLater = true;
+        return;
+      }
+      void checkIfThereAreMoreItemsForward();
+    },
     clear: () => {
       if (items !== void 0) {
         items.length = 0;
@@ -12919,11 +13052,11 @@ var createPaginationBuffer = (options) => {
 };
 
 // src/hooks/use-spans-ws.tsx
-var import_react45 = require("react");
+var import_react46 = require("react");
 
 // src/context.tsx
-var import_react43 = require("react");
 var import_react44 = require("react");
+var import_react45 = require("react");
 
 // src/utils/time.ts
 function unixNanoToDate(unixNanoString) {
@@ -13116,19 +13249,19 @@ var createApiClient = ({ localstackEndpoint }) => {
 
 // src/context.tsx
 var import_jsx_runtime128 = require("react/jsx-runtime");
-var AppInspectorContext = (0, import_react43.createContext)(void 0);
+var AppInspectorContext = (0, import_react44.createContext)(void 0);
 var useAppInspector = () => {
-  const context = (0, import_react43.useContext)(AppInspectorContext);
+  const context = (0, import_react44.useContext)(AppInspectorContext);
   if (!context) {
     throw new Error("@localstack-studio/ui: components must be used within a <AppInspectorContextProvider>");
   }
   return context;
 };
 var AppInspectorContextProvider = (props) => {
-  const api = (0, import_react44.useMemo)(() => {
+  const api = (0, import_react45.useMemo)(() => {
     return false ? createApiClientMock() : createApiClient({ localstackEndpoint: props.localstackEndpoint });
   }, [props.localstackEndpoint]);
-  const resolveLink = (0, import_react44.useCallback)(
+  const resolveLink = (0, import_react45.useCallback)(
     (options) => {
       if (options.to === "settings") {
         return `${props.routePrefix}/settings`;
@@ -13140,7 +13273,7 @@ var AppInspectorContextProvider = (props) => {
     },
     [props.routePrefix]
   );
-  const contextValue = (0, import_react44.useMemo)(
+  const contextValue = (0, import_react45.useMemo)(
     () => ({
       linkComponent: props.linkComponent,
       localstackEndpoint: props.localstackEndpoint,
@@ -13154,15 +13287,15 @@ var AppInspectorContextProvider = (props) => {
 // src/hooks/use-spans-ws.tsx
 function useSpansWebSocket(options) {
   const { onMessage } = options;
-  const onMessageRef = (0, import_react45.useRef)(onMessage);
-  (0, import_react45.useEffect)(() => {
+  const onMessageRef = (0, import_react46.useRef)(onMessage);
+  (0, import_react46.useEffect)(() => {
     onMessageRef.current = onMessage;
   }, [onMessage]);
-  const [connected, setConnected] = (0, import_react45.useState)(false);
-  const wsRef = (0, import_react45.useRef)(void 0);
-  const reconnectRef = (0, import_react45.useRef)(void 0);
+  const [connected, setConnected] = (0, import_react46.useState)(false);
+  const wsRef = (0, import_react46.useRef)(void 0);
+  const reconnectRef = (0, import_react46.useRef)(void 0);
   const { localstackEndpoint } = useAppInspector();
-  const connect = (0, import_react45.useCallback)(() => {
+  const connect = (0, import_react46.useCallback)(() => {
     if (wsRef.current !== void 0) return;
     const url = new URL(getAppInspectorApiUrl(localstackEndpoint, API_ENDPOINTS.WEBSOCKET_SPANS));
     url.protocol = globalThis.location.protocol === "https:" ? "wss" : "ws";
@@ -13188,7 +13321,7 @@ function useSpansWebSocket(options) {
       }
     });
   }, [localstackEndpoint]);
-  (0, import_react45.useEffect)(() => {
+  (0, import_react46.useEffect)(() => {
     connect();
     return () => {
       if (reconnectRef.current !== void 0) clearTimeout(reconnectRef.current);
@@ -13208,12 +13341,11 @@ function useSpansWebSocket(options) {
 var PAGE_SIZE = 30;
 var useSpans = () => {
   const api = useAppInspectorApi();
-  const [spans, setSpans] = (0, import_react46.useState)();
-  const [fetchError, setFetchError] = (0, import_react46.useState)();
-  const [fetchingForward, setFetchingForward] = (0, import_react46.useState)(false);
-  const [fetchingBackward, setFetchingBackward] = (0, import_react46.useState)(false);
-  const [refetching, setRefetching] = (0, import_react46.useState)(false);
-  const paginationBuffer = (0, import_react46.useRef)(createPaginationBuffer({
+  const [spans, setSpans] = (0, import_react47.useState)();
+  const [fetchError, setFetchError] = (0, import_react47.useState)();
+  const [fetchingForward, setFetchingForward] = (0, import_react47.useState)(false);
+  const [fetchingBackward, setFetchingBackward] = (0, import_react47.useState)(false);
+  const paginationBuffer = (0, import_react47.useRef)(createPaginationBuffer({
     async fetchPage(token) {
       const response = await api.getSpans({
         limit: PAGE_SIZE,
@@ -13239,7 +13371,6 @@ var useSpans = () => {
     onStatusChange(status2) {
       setFetchingBackward(status2.fetchingBackward);
       setFetchingForward(status2.fetchingForward);
-      setRefetching(status2.refetching);
     },
     // 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
@@ -13248,20 +13379,20 @@ var useSpans = () => {
       return a2.start_time_unix_nano < b2.start_time_unix_nano ? -1 : 1;
     }
   }));
-  const [hasMoreBackward, setHasMoreBackward] = (0, import_react46.useState)();
-  const [hasMoreForward, setHasMoreForward] = (0, import_react46.useState)();
-  const fetchForward = (0, import_react46.useCallback)(() => {
+  const [hasMoreBackward, setHasMoreBackward] = (0, import_react47.useState)();
+  const [hasMoreForward, setHasMoreForward] = (0, import_react47.useState)();
+  const fetchForward = (0, import_react47.useCallback)(() => {
     paginationBuffer.current.fetchForward();
   }, []);
-  const fetchBackward = (0, import_react46.useCallback)(() => {
+  const fetchBackward = (0, import_react47.useCallback)(() => {
     paginationBuffer.current.fetchBackward();
   }, []);
-  (0, import_react46.useEffect)(() => {
+  (0, import_react47.useEffect)(() => {
     fetchForward();
   }, [fetchForward]);
   const { checkStatus, error: statusError, status } = useStatus();
-  const [clearingSpans, setClearingSpans] = (0, import_react46.useState)(false);
-  const clearSpans = (0, import_react46.useCallback)(async () => {
+  const [clearingSpans, setClearingSpans] = (0, import_react47.useState)(false);
+  const clearSpans = (0, import_react47.useCallback)(async () => {
     setClearingSpans(true);
     try {
       await api.deleteSpans();
@@ -13273,9 +13404,19 @@ var useSpans = () => {
       setClearingSpans(false);
     }
   }, [paginationBuffer, api]);
+  const [streamPaused, setStreamPaused] = (0, import_react47.useState)(false);
+  const toggleStream = (0, import_react47.useCallback)(() => {
+    setStreamPaused((previous) => !previous);
+  }, []);
   useSpansWebSocket({
     onMessage: () => {
-      paginationBuffer.current.fetchForward();
+      if (!hasMoreForward) {
+        if (streamPaused) {
+          paginationBuffer.current.checkIfThereAreMoreItemsForward();
+        } else {
+          paginationBuffer.current.fetchForward();
+        }
+      }
     }
   });
   return {
@@ -13289,10 +13430,11 @@ var useSpans = () => {
     fetchingForward,
     hasMoreBackward,
     hasMoreForward,
-    refetching,
     spans,
     status,
-    statusError
+    statusError,
+    streamPaused,
+    toggleStream
   };
 };
 
@@ -13300,12 +13442,12 @@ var useSpans = () => {
 var import_icons_material11 = require("@mui/icons-material");
 var import_material19 = require("@mui/material");
 var import_styles = require("@mui/material/styles");
-var import_react59 = require("@xyflow/react");
-var import_react60 = require("react");
+var import_react60 = require("@xyflow/react");
+var import_react61 = require("react");
 
 // src/components/event-details/event-details.tsx
 var import_material14 = require("@mui/material");
-var import_react50 = require("react");
+var import_react51 = require("react");
 
 // src/utils/iam-utils.ts
 function determinePermissionStatus(payload) {
@@ -13539,7 +13681,7 @@ var import_material13 = require("@mui/material");
 // src/components/event-details/event-detail.tsx
 var import_icons_material7 = require("@mui/icons-material");
 var import_material11 = require("@mui/material");
-var import_react48 = require("react");
+var import_react49 = require("react");
 
 // src/components/status-icon.tsx
 var import_icons_material4 = require("@mui/icons-material");
@@ -13690,7 +13832,7 @@ var IAMEventDetail = ({ event }) => {
 // src/components/event-details/iam-permission-detail.tsx
 var import_icons_material6 = require("@mui/icons-material");
 var import_material10 = require("@mui/material");
-var import_react47 = require("react");
+var import_react48 = require("react");
 var import_jsx_runtime132 = require("react/jsx-runtime");
 var getChipColors = (status) => {
   const isAllowed = status === "explicitly_allowed" || status === "implicitly_allowed";
@@ -13700,8 +13842,8 @@ var getChipColors = (status) => {
   };
 };
 var IAMPermissionItem = ({ event }) => {
-  const [isOpen, setIsOpen] = (0, import_react47.useState)(false);
-  const parsedData = (0, import_react47.useMemo)(() => {
+  const [isOpen, setIsOpen] = (0, import_react48.useState)(false);
+  const parsedData = (0, import_react48.useMemo)(() => {
     const payloadString = event.attributes?.payload;
     if (!payloadString) {
       return;
@@ -13771,15 +13913,15 @@ var DetailRow2 = ({ content, label }) => /* @__PURE__ */ (0, import_jsx_runtime1
   ) : content })
 ] });
 var EventMessage = ({ event }) => {
-  const [isOpen, setIsOpen] = (0, import_react48.useState)(false);
-  const [isOverflowing, setIsOverflowing] = (0, import_react48.useState)(false);
-  const textReference = (0, import_react48.useRef)(null);
-  const parsedMessage = (0, import_react48.useMemo)(() => parseEventMessage(event), [event]);
-  const isIAMPolicyEvent = (0, import_react48.useMemo)(
+  const [isOpen, setIsOpen] = (0, import_react49.useState)(false);
+  const [isOverflowing, setIsOverflowing] = (0, import_react49.useState)(false);
+  const textReference = (0, import_react49.useRef)(null);
+  const parsedMessage = (0, import_react49.useMemo)(() => parseEventMessage(event), [event]);
+  const isIAMPolicyEvent = (0, import_react49.useMemo)(
     () => event.event_type === "iam.policy_evaluation" && event.attributes?.payload && typeof event.attributes.payload === "string",
     [event]
   );
-  (0, import_react48.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     const checkOverflow = () => {
       const element = textReference.current;
       if (element) {
@@ -13792,11 +13934,11 @@ var EventMessage = ({ event }) => {
       window.removeEventListener("resize", checkOverflow);
     };
   }, [parsedMessage.headline]);
-  const hasAdditionalContent = (0, import_react48.useMemo)(
+  const hasAdditionalContent = (0, import_react49.useMemo)(
     () => parsedMessage.message || parsedMessage.details || isIAMPolicyEvent,
     [parsedMessage.message, parsedMessage.details, isIAMPolicyEvent]
   );
-  const shouldShowToggle = (0, import_react48.useMemo)(
+  const shouldShowToggle = (0, import_react49.useMemo)(
     () => isOverflowing || hasAdditionalContent,
     [isOverflowing, hasAdditionalContent]
   );
@@ -13938,10 +14080,10 @@ var EventDetail = ({
 // src/components/event-details/toggle-section.tsx
 var import_icons_material8 = require("@mui/icons-material");
 var import_material12 = require("@mui/material");
-var import_react49 = require("react");
+var import_react50 = require("react");
 var import_jsx_runtime134 = require("react/jsx-runtime");
 var ToggleSection = ({ children, headline, initialOpen = true }) => {
-  const [isOpen, setIsOpen] = (0, import_react49.useState)(initialOpen);
+  const [isOpen, setIsOpen] = (0, import_react50.useState)(initialOpen);
   return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_material12.Box, { sx: { mt: 4 }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
       import_material12.Box,
@@ -14031,7 +14173,7 @@ var ATTRIBUTE_NAME_TRANSFORMATIONS = {
   "localstack.aws.service.response": "Response"
 };
 var EventDetails = ({ onClose, selectedEvent }) => {
-  const attributes = (0, import_react50.useMemo)(() => {
+  const attributes = (0, import_react51.useMemo)(() => {
     const attributes2 = Object.entries(selectedEvent?.attributes ?? {});
     return attributes2.filter(([key]) => !ATTRIBUTES_TO_EXCLUDE.has(key));
   }, [selectedEvent?.attributes]);
@@ -14140,22 +14282,22 @@ function renderKeyValue(key, value) {
 // src/components/trace-graph/trace-graph.tsx
 var import_base = require("@xyflow/react/dist/base.css");
 var import_material18 = require("@mui/material");
-var import_react57 = require("@xyflow/react");
-var import_react58 = require("react");
+var import_react58 = require("@xyflow/react");
+var import_react59 = require("react");
 
 // src/components/trace-graph/service-node.tsx
 var import_material16 = require("@mui/material");
 var import_style = require("@xyflow/react/dist/style.css");
-var import_react52 = require("@xyflow/react");
-var import_react53 = require("react");
+var import_react53 = require("@xyflow/react");
+var import_react54 = require("react");
 
 // src/components/trace-graph/problem-indicator.tsx
 var import_icons_material9 = require("@mui/icons-material");
 var import_material15 = require("@mui/material");
-var import_react51 = require("react");
+var import_react52 = require("react");
 var import_jsx_runtime137 = require("react/jsx-runtime");
 var ProblemIndicator = ({ error }) => {
-  const icon = (0, import_react51.useMemo)(() => {
+  const icon = (0, import_react52.useMemo)(() => {
     switch (error.level) {
       case "error": {
         return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_icons_material9.Error, { sx: { color: "#d32f2f", fontSize: "14px" } });
@@ -14168,7 +14310,7 @@ var ProblemIndicator = ({ error }) => {
       }
     }
   }, [error.level]);
-  const color2 = (0, import_react51.useMemo)(() => {
+  const color2 = (0, import_react52.useMemo)(() => {
     switch (error.level) {
       case "error": {
         return "#d32f2f";
@@ -14207,7 +14349,7 @@ var handleStyle = {
   borderColor: "lightgray",
   opacity: 0
 };
-var ServiceNode = (0, import_react53.memo)(({ data, selected }) => {
+var ServiceNode = (0, import_react54.memo)(({ data, selected }) => {
   const hasErrors = (data.event.errors && data.event.errors.length > 0) ?? false;
   return /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_material16.Box, { sx: { maxWidth: 200 }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(
@@ -14231,8 +14373,8 @@ var ServiceNode = (0, import_react53.memo)(({ data, selected }) => {
         },
         tabIndex: 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_react52.Handle, { position: import_react52.Position.Left, style: handleStyle, type: "target" }),
-          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_react52.Handle, { position: import_react52.Position.Right, style: handleStyle, type: "source" }),
+          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_react53.Handle, { position: import_react53.Position.Left, style: handleStyle, type: "target" }),
+          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_react53.Handle, { position: import_react53.Position.Right, style: handleStyle, type: "source" }),
           /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
             ServiceCell,
             {
@@ -14292,7 +14434,7 @@ var ServiceNode = (0, import_react53.memo)(({ data, selected }) => {
 
 // src/components/trace-graph/utils.ts
 var import_dagre = __toESM(require("@dagrejs/dagre"), 1);
-var import_react54 = require("@xyflow/react");
+var import_react55 = require("@xyflow/react");
 var generateNodesAndEdges = (event, parentId) => {
   const nodes = [];
   const edges = [];
@@ -14308,8 +14450,8 @@ var generateNodesAndEdges = (event, parentId) => {
     id: event.span_id,
     position: { x: 0, y: 0 },
     // Will be set by layout
-    sourcePosition: import_react54.Position.Right,
-    targetPosition: import_react54.Position.Left,
+    sourcePosition: import_react55.Position.Right,
+    targetPosition: import_react55.Position.Left,
     type: "service"
   });
   if (parentId) {
@@ -14319,7 +14461,7 @@ var generateNodesAndEdges = (event, parentId) => {
       markerEnd: {
         color: "lightgray",
         height: 16,
-        type: import_react54.MarkerType.Arrow,
+        type: import_react55.MarkerType.Arrow,
         width: 16
       },
       source: parentId,
@@ -14372,8 +14514,8 @@ var getLayoutedNodesAndEdges = (inputNodes, inputEdges) => {
 // src/components/trace-graph/xyflow/controls.tsx
 var import_icons_material10 = require("@mui/icons-material");
 var import_material17 = require("@mui/material");
-var import_react55 = require("@xyflow/react");
-var import_react56 = require("react");
+var import_react56 = require("@xyflow/react");
+var import_react57 = require("react");
 
 // node_modules/zustand/esm/shallow.mjs
 function shallow$1(objA, objB) {
@@ -14420,9 +14562,9 @@ var selector = (s) => ({
   maxZoomReached: s.transform[2] >= s.maxZoom,
   minZoomReached: s.transform[2] <= s.minZoom
 });
-var Controls = (0, import_react56.memo)(() => {
-  const { maxZoomReached, minZoomReached } = (0, import_react55.useStore)(selector, shallow$1);
-  const { fitView, zoomIn, zoomOut } = (0, import_react55.useReactFlow)();
+var Controls = (0, import_react57.memo)(() => {
+  const { maxZoomReached, minZoomReached } = (0, import_react56.useStore)(selector, shallow$1);
+  const { fitView, zoomIn, zoomOut } = (0, import_react56.useReactFlow)();
   const onZoomInHandler = () => {
     void zoomIn();
   };
@@ -14491,9 +14633,9 @@ var TraceGraph = ({
   onRefresh,
   spans
 }) => {
-  const [nodes, setNodes, onNodesChange] = (0, import_react57.useNodesState)([]);
-  const [edges, setEdges] = (0, import_react58.useState)([]);
-  (0, import_react58.useEffect)(() => {
+  const [nodes, setNodes, onNodesChange] = (0, import_react58.useNodesState)([]);
+  const [edges, setEdges] = (0, import_react59.useState)([]);
+  (0, import_react59.useEffect)(() => {
     const spansMap = /* @__PURE__ */ new Map();
     const rootSpans = [];
     for (const span of spans.data ?? []) {
@@ -14552,7 +14694,7 @@ var TraceGraph = ({
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(
-      import_react57.ReactFlow,
+      import_react58.ReactFlow,
       {
         "data-testid": "trace-graph",
         edges,
@@ -14571,7 +14713,7 @@ var TraceGraph = ({
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(Controls, {}),
           /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
-            import_react57.Background,
+            import_react58.Background,
             {
               bgColor: theme.palette.background.paper,
               color: theme.palette.text.disabled
@@ -14676,7 +14818,7 @@ var TraceGraphView = ({
                     height: "100%",
                     overflow: "auto"
                   },
-                  children: traceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_react59.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
+                  children: traceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_react60.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
                     TraceGraph,
                     {
                       initialFocusEventId: spanId,
@@ -14737,10 +14879,10 @@ async function fetchConnectedTraces(api, traceIds, allSpans = /* @__PURE__ */ ne
 }
 var TraceGraphPage = ({ onClose, spanId, traceId }) => {
   const api = useAppInspectorApi();
-  const [spans, setSpans] = (0, import_react60.useState)();
-  const [loading, setLoading] = (0, import_react60.useState)(false);
-  const [fetchError, setFetchError] = (0, import_react60.useState)();
-  const fetchSpans = (0, import_react60.useCallback)(async () => {
+  const [spans, setSpans] = (0, import_react61.useState)();
+  const [loading, setLoading] = (0, import_react61.useState)(false);
+  const [fetchError, setFetchError] = (0, import_react61.useState)();
+  const fetchSpans = (0, import_react61.useCallback)(async () => {
     setLoading(true);
     try {
       const spans2 = await fetchConnectedTraces(api, [traceId]);
@@ -14753,28 +14895,28 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
       setLoading(false);
     }
   }, [api, traceId]);
-  (0, import_react60.useEffect)(() => {
+  (0, import_react61.useEffect)(() => {
     void fetchSpans();
   }, [fetchSpans]);
-  const [open, setOpen] = (0, import_react60.useState)(true);
-  const [selectedEvent, setSelectedEvent] = (0, import_react60.useState)(() => spans?.find((span) => span.span_id === spanId));
-  const spansReference = (0, import_react60.useRef)();
-  (0, import_react60.useEffect)(() => {
+  const [open, setOpen] = (0, import_react61.useState)(true);
+  const [selectedEvent, setSelectedEvent] = (0, import_react61.useState)(() => spans?.find((span) => span.span_id === spanId));
+  const spansReference = (0, import_react61.useRef)();
+  (0, import_react61.useEffect)(() => {
     if (!spansReference.current && spans) {
       setSelectedEvent(spans.find((span) => span.span_id === spanId));
       spansReference.current = spans;
     }
   }, [spans, setSelectedEvent, spanId]);
   const { checkStatus, error: statusError, status } = useStatus();
-  const handleEventSelect = (0, import_react60.useCallback)((spanId2) => {
+  const handleEventSelect = (0, import_react61.useCallback)((spanId2) => {
     const span = spans?.find((s) => s.span_id === spanId2);
     setSelectedEvent(span);
     setOpen(true);
   }, [spans]);
-  const handleRetry = (0, import_react60.useCallback)(() => {
+  const handleRetry = (0, import_react61.useCallback)(() => {
     void checkStatus();
   }, [checkStatus]);
-  const navigateToSpansList = (0, import_react60.useCallback)(() => {
+  const navigateToSpansList = (0, import_react61.useCallback)(() => {
     onClose?.();
   }, [onClose]);
   return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
@@ -14814,21 +14956,23 @@ var SpansListPage = () => {
     fetchingForward,
     hasMoreBackward,
     hasMoreForward,
-    refetching,
     spans,
     status,
-    statusError
+    statusError,
+    streamPaused,
+    toggleStream
   } = useSpans();
-  const clearSpansSync = (0, import_react61.useCallback)(() => {
+  const clearSpansSync = (0, import_react62.useCallback)(() => {
     void clearSpans();
   }, [clearSpans]);
-  const [selectedTraceId, setSelectedTraceId] = (0, import_react61.useState)();
-  const [selectedSpanId, setSelectedSpanId] = (0, import_react61.useState)();
-  const navigateToSpan = (0, import_react61.useCallback)((span) => {
+  const [order2, setOrder] = useLocalStorage("spans-order", "oldest_first");
+  const [selectedTraceId, setSelectedTraceId] = (0, import_react62.useState)();
+  const [selectedSpanId, setSelectedSpanId] = (0, import_react62.useState)();
+  const navigateToSpan = (0, import_react62.useCallback)((span) => {
     setSelectedTraceId(span.trace_id);
     setSelectedSpanId(span.span_id);
   }, []);
-  const handleRetry = (0, import_react61.useCallback)(() => {
+  const handleRetry = (0, import_react62.useCallback)(() => {
     void checkStatus();
   }, [checkStatus]);
   const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
@@ -14867,9 +15011,12 @@ var SpansListPage = () => {
             onClearSpans: clearSpansSync,
             onFetchBackward: fetchBackward,
             onFetchForward: fetchForward,
+            onOrderChange: setOrder,
             onSpanClick: navigateToSpan,
-            refetching,
-            spans
+            onToggleStream: toggleStream,
+            order: order2,
+            spans,
+            streamPaused
           }
         )
       }