@localstack/appinspector-ui 1.0.60 → 1.0.61

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, 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,11 +12210,15 @@ var SpansDataGridRow = memo8(
 var SpansDataGrid = ({
   clearingSpans,
   fetchingBackward,
+  fetchingForward,
   hasMoreBackward,
   hasMoreForward,
   onClearSpans,
   onFetchBackward,
+  onFetchForward,
+  onOrderChange,
   onSpanClick,
+  order: order2,
   spans
 }) => {
   const columns = useMemo5(() => [
@@ -12294,6 +12308,23 @@ 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: () => {
+                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 +12382,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,7 +12442,9 @@ var SpansList = (props) => {
         onClearSpans: props.onClearSpans,
         onFetchBackward: props.onFetchBackward,
         onFetchForward: props.onFetchForward,
+        onOrderChange: props.onOrderChange,
         onSpanClick: props.onSpanClick,
+        order: props.order,
         refetching: props.refetching,
         spans: props.spans
       }
@@ -12707,8 +12749,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 +12813,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 +12845,7 @@ var useStatus = () => {
       }
     }
   }, [api]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!hasFetchedReference.current) {
       hasFetchedReference.current = true;
       void checkStatus();
@@ -12916,11 +13003,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 +13212,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 +13239,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 +13272,7 @@ function useSpansWebSocket(options) {
       }
     });
   }, [localstackEndpoint]);
-  useEffect12(() => {
+  useEffect13(() => {
     connect();
     return () => {
       if (reconnectRef.current !== void 0) clearTimeout(reconnectRef.current);
@@ -13205,11 +13292,11 @@ 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 [refetching, setRefetching] = useState7(false);
   const paginationBuffer = useRef10(createPaginationBuffer({
     async fetchPage(token) {
       const response = await api.getSpans({
@@ -13245,20 +13332,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();
@@ -13298,7 +13385,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 +13623,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 +13774,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 +13784,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 +13855,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 +14022,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 +14225,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 +14576,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 +14821,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 +14837,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(
@@ -14816,16 +14903,17 @@ var SpansListPage = () => {
     status,
     statusError
   } = 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,7 +14952,9 @@ var SpansListPage = () => {
             onClearSpans: clearSpansSync,
             onFetchBackward: fetchBackward,
             onFetchForward: fetchForward,
+            onOrderChange: setOrder,
             onSpanClick: navigateToSpan,
+            order: order2,
             refetching,
             spans
           }