@localstack/appinspector-ui 1.0.60 → 1.0.62

package/dist/index.js

@@ -58,13 +58,13 @@ var init_is_prop_valid_esm = __esm({
 
 // src/pages/spans-list-page.tsx
 import { Box as Box18 } from "@mui/material";
-import { useCallback as useCallback8, useState as useState12 } from "react";
+import { useCallback as useCallback9, useState as useState13 } from "react";
 
 // src/components/spans-list/spans-list.tsx
 import { Alert, Box as Box4, Button as Button2 } from "@mui/material";
 
 // src/components/spans-list/spans-data-grid.tsx
-import { DeleteForeverOutlined } from "@mui/icons-material";
+import { DeleteForeverOutlined, PauseOutlined, PlayArrowOutlined, SwapVertOutlined } from "@mui/icons-material";
 import {
   Box as Box3,
   Button,
@@ -12145,6 +12145,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__ */ jsx124(TableRow, { children: /* @__PURE__ */ jsx124(TableCell, { colSpan, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ jsx124("span", { children: label }) }) });
+var LoadSpansRow = ({ colSpan, fetching, label, onFetch }) => /* @__PURE__ */ jsx124(TableRow, { children: /* @__PURE__ */ jsxs120(TableCell, { colSpan, sx: { textAlign: "center" }, children: [
+  !fetching && /* @__PURE__ */ jsx124(Button, { onClick: onFetch, sx: { my: 1 }, children: label }),
+  fetching && /* @__PURE__ */ jsx124(CircularProgress, { size: 24, sx: { m: 2 } })
+] }) });
 var SpansDataGridRow = memo8(
   ({ row }) => {
     const theme = useTheme2();
@@ -12200,12 +12210,18 @@ var SpansDataGridRow = memo8(
 var SpansDataGrid = ({
   clearingSpans,
   fetchingBackward,
+  fetchingForward,
   hasMoreBackward,
   hasMoreForward,
   onClearSpans,
   onFetchBackward,
+  onFetchForward,
+  onOrderChange,
   onSpanClick,
-  spans
+  onToggleStream,
+  order: order2,
+  spans,
+  streamPaused
 }) => {
   const columns = useMemo5(() => [
     columnHelper.accessor("trace_id", {
@@ -12294,6 +12310,38 @@ var SpansDataGrid = ({
   return /* @__PURE__ */ jsxs120(Fragment3, { children: [
     /* @__PURE__ */ jsx124(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs120(Box3, { sx: { alignItems: "center", display: "flex", gap: "0.5rem" }, children: [
       /* @__PURE__ */ jsx124(Box3, { sx: { flexGrow: 1 } }),
+      /* @__PURE__ */ jsx124(
+        FormControlLabel,
+        {
+          control: /* @__PURE__ */ jsx124(
+            Button,
+            {
+              onClick: onToggleStream,
+              startIcon: streamPaused ? /* @__PURE__ */ jsx124(PlayArrowOutlined, {}) : /* @__PURE__ */ jsx124(PauseOutlined, {}),
+              variant: "text",
+              children: streamPaused ? "Resume Stream" : "Pause Stream"
+            }
+          ),
+          label: ""
+        }
+      ),
+      /* @__PURE__ */ jsx124(
+        FormControlLabel,
+        {
+          control: /* @__PURE__ */ jsx124(
+            Button,
+            {
+              onClick: () => {
+                onOrderChange(order2 === "newest_first" ? "oldest_first" : "newest_first");
+              },
+              startIcon: /* @__PURE__ */ jsx124(SwapVertOutlined, {}),
+              variant: "text",
+              children: order2 === "newest_first" ? "Newest First" : "Oldest First"
+            }
+          ),
+          label: ""
+        }
+      ),
       /* @__PURE__ */ jsx124(
         FormControlLabel,
         {
@@ -12351,21 +12399,30 @@ var SpansDataGrid = ({
               }) }),
               /* @__PURE__ */ jsxs120(TableBody, { children: [
                 spans === void 0 && /* @__PURE__ */ jsx124(TableRow, { children: /* @__PURE__ */ jsx124(TableCell, { colSpan: columnCount, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ jsx124(CircularProgress, { size: 48, sx: { m: 4 } }) }) }),
-                spans?.length === 0 && /* @__PURE__ */ jsx124(TableRow, { children: /* @__PURE__ */ jsx124(TableCell, { colSpan: columnCount, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ jsx124("span", { children: "There are no spans" }) }) }),
-                hasRows && !hasMoreBackward && /* @__PURE__ */ jsx124(TableRow, { children: /* @__PURE__ */ jsx124(TableCell, { colSpan: columnCount, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ jsx124("span", { children: "This is the beginning of the stream" }) }) }),
-                hasRows && hasMoreBackward && /* @__PURE__ */ jsx124(TableRow, { children: /* @__PURE__ */ jsxs120(TableCell, { colSpan: columnCount, sx: { textAlign: "center" }, children: [
-                  !fetchingBackward && /* @__PURE__ */ jsx124(
-                    Button,
-                    {
-                      onClick: onFetchBackward,
-                      sx: { my: 1 },
-                      children: "Load older spans"
+                spans?.length === 0 && /* @__PURE__ */ jsx124(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_NO_SPANS }),
+                order2 === "newest_first" && /* @__PURE__ */ jsxs120(Fragment3, { children: [
+                  hasRows && hasMoreForward && /* @__PURE__ */ jsx124(LoadSpansRow, { colSpan: columnCount, fetching: fetchingForward, label: LABEL_LOAD_NEWER, onFetch: onFetchForward }),
+                  hasRows && !hasMoreForward && /* @__PURE__ */ jsx124(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_END_OF_STREAM }),
+                  hasRows && /* @__PURE__ */ jsx124(AnimatePresence, { initial: false, children: (() => {
+                    const reversed = [];
+                    for (let index2 = rows.length - 1; index2 >= 0; index2--) {
+                      const row = rows.at(index2);
+                      reversed.push(
+                        /* @__PURE__ */ jsx124(SpansDataGridRow, { row }, row.original.span_id)
+                      );
                     }
-                  ),
-                  fetchingBackward && /* @__PURE__ */ jsx124(CircularProgress, { size: 24, sx: { m: 2 } })
-                ] }) }),
-                hasRows && /* @__PURE__ */ jsx124(AnimatePresence, { initial: false, children: rows.map((row) => /* @__PURE__ */ jsx124(SpansDataGridRow, { row }, row.original.span_id)) }),
-                hasRows && !hasMoreForward && /* @__PURE__ */ jsx124(TableRow, { children: /* @__PURE__ */ jsx124(TableCell, { colSpan: columnCount, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ jsx124("span", { children: "This is the end of the stream" }) }) })
+                    return reversed;
+                  })() }),
+                  hasRows && hasMoreBackward && /* @__PURE__ */ jsx124(LoadSpansRow, { colSpan: columnCount, fetching: fetchingBackward, label: LABEL_LOAD_OLDER, onFetch: onFetchBackward }),
+                  hasRows && !hasMoreBackward && /* @__PURE__ */ jsx124(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_BEGINNING_OF_STREAM })
+                ] }),
+                order2 === "oldest_first" && /* @__PURE__ */ jsxs120(Fragment3, { children: [
+                  hasRows && !hasMoreBackward && /* @__PURE__ */ jsx124(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_BEGINNING_OF_STREAM }),
+                  hasRows && hasMoreBackward && /* @__PURE__ */ jsx124(LoadSpansRow, { colSpan: columnCount, fetching: fetchingBackward, label: LABEL_LOAD_OLDER, onFetch: onFetchBackward }),
+                  hasRows && /* @__PURE__ */ jsx124(AnimatePresence, { initial: false, children: rows.map((row) => /* @__PURE__ */ jsx124(SpansDataGridRow, { row }, row.original.span_id)) }),
+                  hasRows && hasMoreForward && /* @__PURE__ */ jsx124(LoadSpansRow, { colSpan: columnCount, fetching: fetchingForward, label: LABEL_LOAD_NEWER, onFetch: onFetchForward }),
+                  hasRows && !hasMoreForward && /* @__PURE__ */ jsx124(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_END_OF_STREAM })
+                ] })
               ] })
             ]
           }
@@ -12402,9 +12459,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
       }
     )
   ] });
@@ -12707,8 +12767,53 @@ var StatusMessage = ({
   return /* @__PURE__ */ jsx126(Fragment4, {});
 };
 
+// src/hooks/use-local-storage.tsx
+import { useCallback as useCallback3, useEffect as useEffect11, useState as useState4 } from "react";
+function useLocalStorage(key, initialValue) {
+  const [storedValue, setStoredValue] = useState4(() => {
+    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 = useCallback3((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]);
+  useEffect11(() => {
+    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
-import { useCallback as useCallback6, useEffect as useEffect13, useRef as useRef10, useState as useState6 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect14, useRef as useRef10, useState as useState7 } from "react";
 
 // src/api/use-api.tsx
 import { createContext as createContext7, useContext as useContext14 } from "react";
@@ -12726,15 +12831,15 @@ var useAppInspectorApi = () => {
 };
 
 // src/hooks/use-status.tsx
-import { useCallback as useCallback3, useEffect as useEffect11, useRef as useRef8, useState as useState4 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect12, useRef as useRef8, useState as useState5 } from "react";
 var useStatus = () => {
   const api = useAppInspectorApi();
-  const [checking, setChecking] = useState4(true);
-  const [status, setStatus] = useState4();
-  const [error, setError] = useState4();
+  const [checking, setChecking] = useState5(true);
+  const [status, setStatus] = useState5();
+  const [error, setError] = useState5();
   const hasFetchedReference = useRef8(false);
   const abortControllerReference = useRef8(null);
-  const checkStatus = useCallback3(async () => {
+  const checkStatus = useCallback4(async () => {
     if (abortControllerReference.current !== null) {
       abortControllerReference.current.abort();
     }
@@ -12758,7 +12863,7 @@ var useStatus = () => {
       }
     }
   }, [api]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!hasFetchedReference.current) {
       hasFetchedReference.current = true;
       void checkStatus();
@@ -12809,7 +12914,6 @@ var createPaginationBuffer = (options) => {
   let hasMoreBackward = void 0;
   let fetchingForward = false;
   let fetchingBackward = false;
-  const refetching = false;
   const reportDataChange = () => {
     options.onDataChange({
       hasMoreBackward: hasMoreBackward ?? false,
@@ -12820,8 +12924,7 @@ var createPaginationBuffer = (options) => {
   const reportStatusChange = () => {
     options.onStatusChange?.({
       fetchingBackward,
-      fetchingForward,
-      refetching
+      fetchingForward
     });
   };
   const reportError = (error) => {
@@ -12829,6 +12932,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();
@@ -12892,8 +13014,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;
@@ -12916,11 +13049,11 @@ var createPaginationBuffer = (options) => {
 };
 
 // src/hooks/use-spans-ws.tsx
-import { useCallback as useCallback5, useEffect as useEffect12, useRef as useRef9, useState as useState5 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect13, useRef as useRef9, useState as useState6 } from "react";
 
 // src/context.tsx
 import { createContext as createContext8, useContext as useContext15 } from "react";
-import { useCallback as useCallback4, useMemo as useMemo6 } from "react";
+import { useCallback as useCallback5, useMemo as useMemo6 } from "react";
 
 // src/utils/time.ts
 function unixNanoToDate(unixNanoString) {
@@ -13125,7 +13258,7 @@ var AppInspectorContextProvider = (props) => {
   const api = useMemo6(() => {
     return false ? createApiClientMock() : createApiClient({ localstackEndpoint: props.localstackEndpoint });
   }, [props.localstackEndpoint]);
-  const resolveLink = useCallback4(
+  const resolveLink = useCallback5(
     (options) => {
       if (options.to === "settings") {
         return `${props.routePrefix}/settings`;
@@ -13152,14 +13285,14 @@ var AppInspectorContextProvider = (props) => {
 function useSpansWebSocket(options) {
   const { onMessage } = options;
   const onMessageRef = useRef9(onMessage);
-  useEffect12(() => {
+  useEffect13(() => {
     onMessageRef.current = onMessage;
   }, [onMessage]);
-  const [connected, setConnected] = useState5(false);
+  const [connected, setConnected] = useState6(false);
   const wsRef = useRef9(void 0);
   const reconnectRef = useRef9(void 0);
   const { localstackEndpoint } = useAppInspector();
-  const connect = useCallback5(() => {
+  const connect = useCallback6(() => {
     if (wsRef.current !== void 0) return;
     const url = new URL(getAppInspectorApiUrl(localstackEndpoint, API_ENDPOINTS.WEBSOCKET_SPANS));
     url.protocol = globalThis.location.protocol === "https:" ? "wss" : "ws";
@@ -13185,7 +13318,7 @@ function useSpansWebSocket(options) {
       }
     });
   }, [localstackEndpoint]);
-  useEffect12(() => {
+  useEffect13(() => {
     connect();
     return () => {
       if (reconnectRef.current !== void 0) clearTimeout(reconnectRef.current);
@@ -13205,11 +13338,10 @@ function useSpansWebSocket(options) {
 var PAGE_SIZE = 30;
 var useSpans = () => {
   const api = useAppInspectorApi();
-  const [spans, setSpans] = useState6();
-  const [fetchError, setFetchError] = useState6();
-  const [fetchingForward, setFetchingForward] = useState6(false);
-  const [fetchingBackward, setFetchingBackward] = useState6(false);
-  const [refetching, setRefetching] = useState6(false);
+  const [spans, setSpans] = useState7();
+  const [fetchError, setFetchError] = useState7();
+  const [fetchingForward, setFetchingForward] = useState7(false);
+  const [fetchingBackward, setFetchingBackward] = useState7(false);
   const paginationBuffer = useRef10(createPaginationBuffer({
     async fetchPage(token) {
       const response = await api.getSpans({
@@ -13236,7 +13368,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
@@ -13245,20 +13376,20 @@ var useSpans = () => {
       return a2.start_time_unix_nano < b2.start_time_unix_nano ? -1 : 1;
     }
   }));
-  const [hasMoreBackward, setHasMoreBackward] = useState6();
-  const [hasMoreForward, setHasMoreForward] = useState6();
-  const fetchForward = useCallback6(() => {
+  const [hasMoreBackward, setHasMoreBackward] = useState7();
+  const [hasMoreForward, setHasMoreForward] = useState7();
+  const fetchForward = useCallback7(() => {
     paginationBuffer.current.fetchForward();
   }, []);
-  const fetchBackward = useCallback6(() => {
+  const fetchBackward = useCallback7(() => {
     paginationBuffer.current.fetchBackward();
   }, []);
-  useEffect13(() => {
+  useEffect14(() => {
     fetchForward();
   }, [fetchForward]);
   const { checkStatus, error: statusError, status } = useStatus();
-  const [clearingSpans, setClearingSpans] = useState6(false);
-  const clearSpans = useCallback6(async () => {
+  const [clearingSpans, setClearingSpans] = useState7(false);
+  const clearSpans = useCallback7(async () => {
     setClearingSpans(true);
     try {
       await api.deleteSpans();
@@ -13270,9 +13401,19 @@ var useSpans = () => {
       setClearingSpans(false);
     }
   }, [paginationBuffer, api]);
+  const [streamPaused, setStreamPaused] = useState7(false);
+  const toggleStream = useCallback7(() => {
+    setStreamPaused((previous) => !previous);
+  }, []);
   useSpansWebSocket({
     onMessage: () => {
-      paginationBuffer.current.fetchForward();
+      if (!hasMoreForward) {
+        if (streamPaused) {
+          paginationBuffer.current.checkIfThereAreMoreItemsForward();
+        } else {
+          paginationBuffer.current.fetchForward();
+        }
+      }
     }
   });
   return {
@@ -13286,10 +13427,11 @@ var useSpans = () => {
     fetchingForward,
     hasMoreBackward,
     hasMoreForward,
-    refetching,
     spans,
     status,
-    statusError
+    statusError,
+    streamPaused,
+    toggleStream
   };
 };
 
@@ -13298,7 +13440,7 @@ import { ArrowBack } from "@mui/icons-material";
 import { Box as Box17, Button as Button5, Drawer, Paper as Paper2 } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { ReactFlowProvider } from "@xyflow/react";
-import { useCallback as useCallback7, useEffect as useEffect16, useRef as useRef12, useState as useState11 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect17, useRef as useRef12, useState as useState12 } from "react";
 
 // src/components/event-details/event-details.tsx
 import { Box as Box13, Chip as Chip3, Divider as Divider2, Stack, Typography as Typography9 } from "@mui/material";
@@ -13536,7 +13678,7 @@ import { Box as Box12 } from "@mui/material";
 // src/components/event-details/event-detail.tsx
 import { KeyboardArrowDown as KeyboardArrowDown2, KeyboardArrowRight as KeyboardArrowRight2 } from "@mui/icons-material";
 import { Box as Box10, Grid as Grid3, IconButton as IconButton3, Typography as Typography7 } from "@mui/material";
-import { useEffect as useEffect14, useMemo as useMemo8, useRef as useRef11, useState as useState8 } from "react";
+import { useEffect as useEffect15, useMemo as useMemo8, useRef as useRef11, useState as useState9 } from "react";
 
 // src/components/status-icon.tsx
 import { Cancel, CheckCircle, Error as Error2, Info, RemoveCircle } from "@mui/icons-material";
@@ -13687,7 +13829,7 @@ var IAMEventDetail = ({ event }) => {
 // src/components/event-details/iam-permission-detail.tsx
 import { KeyboardArrowDown, KeyboardArrowRight } from "@mui/icons-material";
 import { Box as Box9, Chip as Chip2, IconButton as IconButton2, Typography as Typography6 } from "@mui/material";
-import { useMemo as useMemo7, useState as useState7 } from "react";
+import { useMemo as useMemo7, useState as useState8 } from "react";
 import { jsx as jsx132, jsxs as jsxs125 } from "react/jsx-runtime";
 var getChipColors = (status) => {
   const isAllowed = status === "explicitly_allowed" || status === "implicitly_allowed";
@@ -13697,7 +13839,7 @@ var getChipColors = (status) => {
   };
 };
 var IAMPermissionItem = ({ event }) => {
-  const [isOpen, setIsOpen] = useState7(false);
+  const [isOpen, setIsOpen] = useState8(false);
   const parsedData = useMemo7(() => {
     const payloadString = event.attributes?.payload;
     if (!payloadString) {
@@ -13768,15 +13910,15 @@ var DetailRow2 = ({ content, label }) => /* @__PURE__ */ jsxs126(Grid3, { contai
   ) : content })
 ] });
 var EventMessage = ({ event }) => {
-  const [isOpen, setIsOpen] = useState8(false);
-  const [isOverflowing, setIsOverflowing] = useState8(false);
+  const [isOpen, setIsOpen] = useState9(false);
+  const [isOverflowing, setIsOverflowing] = useState9(false);
   const textReference = useRef11(null);
   const parsedMessage = useMemo8(() => parseEventMessage(event), [event]);
   const isIAMPolicyEvent = useMemo8(
     () => event.event_type === "iam.policy_evaluation" && event.attributes?.payload && typeof event.attributes.payload === "string",
     [event]
   );
-  useEffect14(() => {
+  useEffect15(() => {
     const checkOverflow = () => {
       const element = textReference.current;
       if (element) {
@@ -13935,10 +14077,10 @@ var EventDetail = ({
 // src/components/event-details/toggle-section.tsx
 import { KeyboardArrowDown as KeyboardArrowDown3, KeyboardArrowRight as KeyboardArrowRight3 } from "@mui/icons-material";
 import { Box as Box11, Typography as Typography8 } from "@mui/material";
-import { useState as useState9 } from "react";
+import { useState as useState10 } from "react";
 import { jsx as jsx134, jsxs as jsxs127 } from "react/jsx-runtime";
 var ToggleSection = ({ children, headline, initialOpen = true }) => {
-  const [isOpen, setIsOpen] = useState9(initialOpen);
+  const [isOpen, setIsOpen] = useState10(initialOpen);
   return /* @__PURE__ */ jsxs127(Box11, { sx: { mt: 4 }, children: [
     /* @__PURE__ */ jsx134(
       Box11,
@@ -14138,7 +14280,7 @@ function renderKeyValue(key, value) {
 import "@xyflow/react/dist/base.css";
 import { Alert as Alert3, Button as Button4, useTheme as useTheme3 } from "@mui/material";
 import { Background, ReactFlow, useNodesState } from "@xyflow/react";
-import { useEffect as useEffect15, useState as useState10 } from "react";
+import { useEffect as useEffect16, useState as useState11 } from "react";
 
 // src/components/trace-graph/service-node.tsx
 import { Box as Box15, Stack as Stack2, Typography as Typography10 } from "@mui/material";
@@ -14489,8 +14631,8 @@ var TraceGraph = ({
   spans
 }) => {
   const [nodes, setNodes, onNodesChange] = useNodesState([]);
-  const [edges, setEdges] = useState10([]);
-  useEffect15(() => {
+  const [edges, setEdges] = useState11([]);
+  useEffect16(() => {
     const spansMap = /* @__PURE__ */ new Map();
     const rootSpans = [];
     for (const span of spans.data ?? []) {
@@ -14734,10 +14876,10 @@ async function fetchConnectedTraces(api, traceIds, allSpans = /* @__PURE__ */ ne
 }
 var TraceGraphPage = ({ onClose, spanId, traceId }) => {
   const api = useAppInspectorApi();
-  const [spans, setSpans] = useState11();
-  const [loading, setLoading] = useState11(false);
-  const [fetchError, setFetchError] = useState11();
-  const fetchSpans = useCallback7(async () => {
+  const [spans, setSpans] = useState12();
+  const [loading, setLoading] = useState12(false);
+  const [fetchError, setFetchError] = useState12();
+  const fetchSpans = useCallback8(async () => {
     setLoading(true);
     try {
       const spans2 = await fetchConnectedTraces(api, [traceId]);
@@ -14750,28 +14892,28 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
       setLoading(false);
     }
   }, [api, traceId]);
-  useEffect16(() => {
+  useEffect17(() => {
     void fetchSpans();
   }, [fetchSpans]);
-  const [open, setOpen] = useState11(true);
-  const [selectedEvent, setSelectedEvent] = useState11(() => spans?.find((span) => span.span_id === spanId));
+  const [open, setOpen] = useState12(true);
+  const [selectedEvent, setSelectedEvent] = useState12(() => spans?.find((span) => span.span_id === spanId));
   const spansReference = useRef12();
-  useEffect16(() => {
+  useEffect17(() => {
     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 = useCallback7((spanId2) => {
+  const handleEventSelect = useCallback8((spanId2) => {
     const span = spans?.find((s) => s.span_id === spanId2);
     setSelectedEvent(span);
     setOpen(true);
   }, [spans]);
-  const handleRetry = useCallback7(() => {
+  const handleRetry = useCallback8(() => {
     void checkStatus();
   }, [checkStatus]);
-  const navigateToSpansList = useCallback7(() => {
+  const navigateToSpansList = useCallback8(() => {
     onClose?.();
   }, [onClose]);
   return /* @__PURE__ */ jsx141(
@@ -14811,21 +14953,23 @@ var SpansListPage = () => {
     fetchingForward,
     hasMoreBackward,
     hasMoreForward,
-    refetching,
     spans,
     status,
-    statusError
+    statusError,
+    streamPaused,
+    toggleStream
   } = useSpans();
-  const clearSpansSync = useCallback8(() => {
+  const clearSpansSync = useCallback9(() => {
     void clearSpans();
   }, [clearSpans]);
-  const [selectedTraceId, setSelectedTraceId] = useState12();
-  const [selectedSpanId, setSelectedSpanId] = useState12();
-  const navigateToSpan = useCallback8((span) => {
+  const [order2, setOrder] = useLocalStorage("spans-order", "oldest_first");
+  const [selectedTraceId, setSelectedTraceId] = useState13();
+  const [selectedSpanId, setSelectedSpanId] = useState13();
+  const navigateToSpan = useCallback9((span) => {
     setSelectedTraceId(span.trace_id);
     setSelectedSpanId(span.span_id);
   }, []);
-  const handleRetry = useCallback8(() => {
+  const handleRetry = useCallback9(() => {
     void checkStatus();
   }, [checkStatus]);
   const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
@@ -14864,9 +15008,12 @@ var SpansListPage = () => {
             onClearSpans: clearSpansSync,
             onFetchBackward: fetchBackward,
             onFetchForward: fetchForward,
+            onOrderChange: setOrder,
             onSpanClick: navigateToSpan,
-            refetching,
-            spans
+            onToggleStream: toggleStream,
+            order: order2,
+            spans,
+            streamPaused
           }
         )
       }