@localstack/appinspector-ui 1.0.185 → 1.0.187

package/dist/index.js

@@ -2422,7 +2422,7 @@ var init_event_streams = __esm({
 
 // src/pages/spans-list-page.tsx
 import { Box as Box22, Paper as Paper2 } from "@mui/material";
-import { useCallback as useCallback12, useEffect as useEffect22, useMemo as useMemo14, useRef as useRef19, useState as useState22 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect22, useMemo as useMemo13, useRef as useRef19, useState as useState22 } from "react";
 
 // src/api/errors.ts
 var AppInspectorDisabledError = class extends Error {
@@ -13116,7 +13116,7 @@ var ResponsiveTimestampCell = memo3(({ date }) => {
 
 // src/dev-settings.tsx
 import * as React5 from "react";
-var DEFAULT_DEV_SETTINGS = { requestTerms: "on", waterfallIssueBackgrounds: "on", waterfallLayout: "tree", waterfallStatusIcons: "first column" };
+var DEFAULT_DEV_SETTINGS = { requestTerms: "on", warningIcon: "iam shield", waterfallIssueBackgrounds: "on", waterfallLayout: "tree", waterfallStatusIcons: "first column" };
 var DevSettingsContext = React5.createContext(DEFAULT_DEV_SETTINGS);
 var useDevSettings = () => React5.useContext(DevSettingsContext);
 
@@ -15368,22 +15368,6 @@ ServiceCell.displayName = "ServiceCell";
 import { Cancel as Cancel2, Error as Error2, GppBad } from "@mui/icons-material";
 import { Box as Box3, Divider, Tooltip as Tooltip3, Typography as Typography3 } from "@mui/material";
 
-// src/types/error-levels.ts
-var ErrorLevel = {
-  ERROR: 3,
-  // General error
-  IAM_PERMISSION: 5,
-  // IAM permission issues
-  OK: 2,
-  // OK
-  // Standard OTEL status codes
-  UNSET: 1,
-  // Unset
-  // Extended custom levels
-  WARNING: 4
-  // Warning
-};
-
 // src/utils/iam-utils.ts
 function determinePermissionStatus(payload) {
   if (payload.explicit_deny_count && payload.explicit_deny_count > 0) {
@@ -15482,58 +15466,40 @@ var getIamSummary = (span) => {
   return { denials, level: void 0 };
 };
 
-// src/utils/error-level.ts
-var calculateHighestErrorLevel = (span) => {
-  if (span.operation_status) {
-    switch (span.operation_status) {
-      case "error": {
-        return ErrorLevel.ERROR;
-      }
-      case "iam_explicit_deny":
-      case "iam_explicit_warn":
-      case "iam_implicit_deny":
-      case "iam_implicit_warn": {
-        return ErrorLevel.IAM_PERMISSION;
-      }
-      default: {
-        return ErrorLevel.OK;
-      }
-    }
+// src/utils/span-issues.ts
+var firstText = (...values) => values.find((value) => !!value) ?? void 0;
+var OTEL_STATUS_ERROR = 2;
+var getIamDenials = (span) => span.events.flatMap((event) => {
+  if (!event.event_type?.toLowerCase().includes("iam") || typeof event.attributes?.payload !== "string") {
+    return [];
   }
-  const hasIamDenial = span.events.some((event) => {
-    if (!event.event_type?.toLowerCase().includes("iam")) return false;
-    if (typeof event.attributes?.payload !== "string") return false;
-    const parsed = parseIAMEvent(event.attributes.payload);
-    return parsed?.permission === "explicitly_denied" || parsed?.permission === "implicitly_denied";
-  });
-  if (hasIamDenial) return ErrorLevel.IAM_PERMISSION;
-  if (span.status_code === 2) return ErrorLevel.ERROR;
-  const hasErrorInErrors = span.errors?.some((error) => error.level === "error");
-  if (hasErrorInErrors) return ErrorLevel.ERROR;
-  const hasWarning = span.errors?.some((error) => error.level === "warning");
-  if (hasWarning) return ErrorLevel.WARNING;
-  return span.status_code || ErrorLevel.UNSET;
+  const permission = parseIAMEvent(event.attributes.payload)?.permission;
+  if (permission === "explicitly_denied") return ["explicit"];
+  if (permission === "implicitly_denied") return ["implicit"];
+  return [];
+});
+var getSpanIssues = (span) => {
+  const status = span.operation_status;
+  const iamDenied = status === "iam_explicit_deny" || status === "iam_implicit_deny";
+  const iamWarned = status === "iam_explicit_warn" || status === "iam_implicit_warn";
+  const errorMessages = (span.errors ?? []).filter((item) => item.level === "error");
+  const warningMessages = (span.errors ?? []).filter((item) => item.level === "warning");
+  const denials = getIamDenials(span);
+  const unenforcedDenial = !iamDenied && (denials.length > 0 || span.attributes?.["localstack.has_iam_deny_event"] === true);
+  const error = status === "error" || iamDenied || span.status_code === OTEL_STATUS_ERROR || errorMessages.length > 0;
+  const warning2 = iamWarned || warningMessages.length > 0 || unenforcedDenial;
+  const denialCount = unenforcedDenial ? Math.max(1, denials.length) : 0;
+  return {
+    error,
+    errorType: error ? firstText(span.status_message, errorMessages[0]?.message) ?? (iamDenied ? "AccessDenied" : "Error") : void 0,
+    warning: warning2,
+    warningCount: warning2 ? Math.max(1, warningMessages.length + denialCount) : 0,
+    warningType: warning2 ? firstText(warningMessages[0]?.message) ?? (unenforcedDenial ? `IAM ${denials[0] ?? "implicit"} deny` : iamWarned ? "IAM permission warning" : "Warning") : void 0
+  };
 };
 
 // src/components/cells/status-cell.tsx
 import { Fragment as Fragment2, jsx as jsx125, jsxs as jsxs120 } from "react/jsx-runtime";
-var StatusIcon = ({ errorLevel, operationStatus, spanStatusCode }) => {
-  switch (errorLevel) {
-    case ErrorLevel.ERROR: {
-      return /* @__PURE__ */ jsx125(Cancel2, { sx: { color: "red" } });
-    }
-    case ErrorLevel.IAM_PERMISSION: {
-      const isDenial = operationStatus ? operationStatus === "iam_explicit_deny" || operationStatus === "iam_implicit_deny" : spanStatusCode === 2;
-      return /* @__PURE__ */ jsx125(GppBad, { sx: { color: isDenial ? "red" : "warning.main" } });
-    }
-    case ErrorLevel.WARNING: {
-      return /* @__PURE__ */ jsx125(Error2, { sx: { color: "orange" } });
-    }
-    default: {
-      return /* @__PURE__ */ jsx125(Fragment2, {});
-    }
-  }
-};
 var SPAN_STATUS_LABELS = {
   0: "Unset",
   1: "OK",
@@ -15561,9 +15527,14 @@ var buildTooltipContent = (span) => {
   ] });
 };
 var StatusIconWithTooltip = ({ span }) => {
-  const errorLevel = calculateHighestErrorLevel(span);
-  if (errorLevel !== ErrorLevel.ERROR && errorLevel !== ErrorLevel.IAM_PERMISSION) return /* @__PURE__ */ jsx125(Fragment2, {});
-  return /* @__PURE__ */ jsx125(Tooltip3, { title: buildTooltipContent(span), children: /* @__PURE__ */ jsx125(Box3, { sx: { alignItems: "center", cursor: "default", display: "flex" }, children: /* @__PURE__ */ jsx125(StatusIcon, { errorLevel, operationStatus: span.operation_status, spanStatusCode: span.status_code }) }) });
+  const { warningIcon } = useDevSettings();
+  const { error, warning: warning2 } = getSpanIssues(span);
+  if (!error && !warning2) return /* @__PURE__ */ jsx125(Fragment2, {});
+  const iamLevel = getIamSummary(span).level;
+  return /* @__PURE__ */ jsx125(Tooltip3, { title: buildTooltipContent(span), children: /* @__PURE__ */ jsxs120(Box3, { sx: { alignItems: "center", cursor: "default", display: "flex" }, children: [
+    error && /* @__PURE__ */ jsx125(Box3, { "aria-label": "Error", role: "img", sx: { display: "flex" }, children: iamLevel === "error" ? /* @__PURE__ */ jsx125(GppBad, { sx: { color: "error.main" } }) : /* @__PURE__ */ jsx125(Cancel2, { sx: { color: "error.main" } }) }),
+    warning2 && /* @__PURE__ */ jsx125(Box3, { "aria-label": "Warning", role: "img", sx: { display: "flex" }, children: iamLevel === "warning" && warningIcon === "iam shield" ? /* @__PURE__ */ jsx125(GppBad, { sx: { color: "warning.main" } }) : /* @__PURE__ */ jsx125(Error2, { sx: { color: "warning.main" } }) })
+  ] }) });
 };
 
 // src/components/spans-list/span-count-badge.tsx
@@ -16661,6 +16632,94 @@ var StatusMessage = ({
   return /* @__PURE__ */ jsx130(Fragment6, {});
 };
 
+// src/utils/span-parents.ts
+var resolveParents = (spans) => {
+  const byId = new Map(spans.map((span) => [span.span_id, span]));
+  const parentOf = /* @__PURE__ */ new Map();
+  for (const span of spans) {
+    const parent = span.parent_span_id === null ? void 0 : byId.get(span.parent_span_id);
+    if (parent && parent.span_id !== span.span_id && parent.trace_id === span.trace_id) {
+      parentOf.set(span.span_id, parent.span_id);
+    }
+  }
+  const causes = /* @__PURE__ */ new Map();
+  const addCause = (spanId, causeId) => {
+    const list = causes.get(spanId);
+    if (list) list.push(causeId);
+    else causes.set(spanId, [causeId]);
+  };
+  for (const span of spans) {
+    for (const causeId of span.outgoing_link_span_ids ?? []) addCause(span.span_id, causeId);
+    for (const effectId of span.incoming_link_span_ids ?? []) addCause(effectId, span.span_id);
+  }
+  const isAncestorOrSelf = (candidateId, spanId) => {
+    let current = spanId;
+    for (let hops = 0; current !== void 0 && hops <= spans.length; hops++) {
+      if (current === candidateId) return true;
+      current = parentOf.get(current);
+    }
+    return false;
+  };
+  for (const span of spans) {
+    if (parentOf.has(span.span_id)) continue;
+    const cause = causes.get(span.span_id)?.find((causeId) => byId.has(causeId) && !isAncestorOrSelf(span.span_id, causeId));
+    if (cause !== void 0) parentOf.set(span.span_id, cause);
+  }
+  return parentOf;
+};
+
+// src/components/trace-panel/timeline-tree.ts
+var compareNano = (left, right) => {
+  const difference = BigInt(left) - BigInt(right);
+  if (difference === 0n) return 0;
+  return difference < 0n ? -1 : 1;
+};
+var buildTraceTree = (spans) => {
+  const nodes2 = new Map(spans.map((span) => [span.span_id, { children: [], span }]));
+  const parentOf = resolveParents(spans);
+  const roots = [];
+  for (const [spanId, node] of nodes2) {
+    const parent = parentOf.get(spanId);
+    if (parent === void 0) roots.push(node);
+    else nodes2.get(parent)?.children.push(node);
+  }
+  const byStart = (left, right) => compareNano(left.span.start_time_unix_nano, right.span.start_time_unix_nano);
+  roots.sort(byStart);
+  for (const node of nodes2.values()) node.children.sort(byStart);
+  return { parentOf, roots };
+};
+var findRootSpan = (spans, parentOf, spanId) => {
+  let current = spanId;
+  for (let hops = 0; hops <= spans.length; hops++) {
+    const parent = parentOf.get(current);
+    if (parent === void 0) break;
+    current = parent;
+  }
+  return spans.find((span) => span.span_id === current);
+};
+var findFirstSpan = (nodes2, predicate) => {
+  for (const node of nodes2) {
+    if (predicate(node.span.span_id)) return node.span;
+    const found = findFirstSpan(node.children, predicate);
+    if (found) return found;
+  }
+  return void 0;
+};
+var getTraceBounds = (spans) => {
+  let start;
+  let end;
+  for (const span of spans) {
+    const spanStart = BigInt(span.start_time_unix_nano);
+    const spanEnd = span.end_time_unix_nano ? BigInt(span.end_time_unix_nano) : spanStart;
+    if (start === void 0 || spanStart < start) start = spanStart;
+    if (end === void 0 || spanEnd > end) end = spanEnd;
+  }
+  if (start === void 0 || end === void 0) {
+    return { durationMs: 0, startNano: 0n };
+  }
+  return { durationMs: Number(end - start) / 1e6, startNano: start };
+};
+
 // src/components/trace-panel/trace-sidebar.tsx
 import { Close as Close4 } from "@mui/icons-material";
 import { Box as Box20, IconButton as IconButton8, ToggleButton as ToggleButton3, ToggleButtonGroup as ToggleButtonGroup3, Typography as Typography15 } from "@mui/material";
@@ -16780,38 +16839,6 @@ var getEventGroupsByType = (events) => {
   return groups;
 };
 
-// src/utils/span-issues.ts
-var firstText = (...values) => values.find((value) => !!value) ?? void 0;
-var OTEL_STATUS_ERROR = 2;
-var getIamDenials = (span) => span.events.flatMap((event) => {
-  if (!event.event_type?.toLowerCase().includes("iam") || typeof event.attributes?.payload !== "string") {
-    return [];
-  }
-  const permission = parseIAMEvent(event.attributes.payload)?.permission;
-  if (permission === "explicitly_denied") return ["explicit"];
-  if (permission === "implicitly_denied") return ["implicit"];
-  return [];
-});
-var getSpanIssues = (span) => {
-  const status = span.operation_status;
-  const iamDenied = status === "iam_explicit_deny" || status === "iam_implicit_deny";
-  const iamWarned = status === "iam_explicit_warn" || status === "iam_implicit_warn";
-  const errorMessages = (span.errors ?? []).filter((item) => item.level === "error");
-  const warningMessages = (span.errors ?? []).filter((item) => item.level === "warning");
-  const denials = getIamDenials(span);
-  const unenforcedDenial = !iamDenied && (denials.length > 0 || span.attributes?.["localstack.has_iam_deny_event"] === true);
-  const error = status === "error" || iamDenied || span.status_code === OTEL_STATUS_ERROR || errorMessages.length > 0;
-  const warning2 = iamWarned || warningMessages.length > 0 || unenforcedDenial;
-  const denialCount = unenforcedDenial ? Math.max(1, denials.length) : 0;
-  return {
-    error,
-    errorType: error ? firstText(span.status_message, errorMessages[0]?.message) ?? (iamDenied ? "AccessDenied" : "Error") : void 0,
-    warning: warning2,
-    warningCount: warning2 ? Math.max(1, warningMessages.length + denialCount) : 0,
-    warningType: warning2 ? firstText(warningMessages[0]?.message) ?? (unenforcedDenial ? `IAM ${denials[0] ?? "implicit"} deny` : iamWarned ? "IAM permission warning" : "Warning") : void 0
-  };
-};
-
 // src/utils/time.ts
 function unixNanoToDate(unixNanoString) {
   const milliseconds = unixNanoToMilliseconds(unixNanoString);
@@ -16860,7 +16887,7 @@ import { useEffect as useEffect12, useMemo as useMemo7, useRef as useRef8, useSt
 import { Cancel as Cancel4, CheckCircle, Error as Error3, Info, RemoveCircle } from "@mui/icons-material";
 import { Box as Box9 } from "@mui/material";
 import { jsx as jsx132 } from "react/jsx-runtime";
-var StatusIcon2 = ({ errorLevel }) => {
+var StatusIcon = ({ errorLevel }) => {
   switch (errorLevel) {
     case EventLevel.LevelError: {
       return /* @__PURE__ */ jsx132(Cancel4, { sx: { color: "red" } });
@@ -18961,7 +18988,7 @@ var EventDetail = ({
   const eventLevel = getEventLevelFromGroup(type);
   return /* @__PURE__ */ jsxs129(Box14, { children: [
     /* @__PURE__ */ jsxs129(Box14, { sx: { alignItems: "center", display: "flex", mb: 0.5 }, children: [
-      /* @__PURE__ */ jsx137(StatusIcon2, { errorLevel: eventLevel }),
+      /* @__PURE__ */ jsx137(StatusIcon, { errorLevel: eventLevel }),
       /* @__PURE__ */ jsx137(Typography10, { color: "text.secondary", sx: { fontWeight: 600, ml: 0.5 }, variant: "caption", children: displayText })
     ] }),
     /* @__PURE__ */ jsx137(Box14, { children: events.map((event) => /* @__PURE__ */ jsx137(Box14, { sx: { maxWidth: "100%", mb: 0.5 }, children: /* @__PURE__ */ jsx137(EventMessage, { event }) }, `${event.span_id}-${event.event_id}`)) })
@@ -31598,20 +31625,21 @@ import { Background, MarkerType, MiniMap, Position as Position2, ReactFlow, useE
 import { useCallback as useCallback7, useEffect as useEffect16, useRef as useRef13, useState as useState15 } from "react";
 
 // src/components/trace-graph/service-node.tsx
-import { Cancel as Cancel6, GppBad as GppBad2 } from "@mui/icons-material";
+import { Cancel as Cancel6, Error as ErrorIcon4, GppBad as GppBad2 } from "@mui/icons-material";
 import { Box as Box17, Divider as Divider4, Stack as Stack5, Tooltip as Tooltip6, Typography as Typography13, useTheme as useTheme4 } from "@mui/material";
 import { Handle, Position } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
 import "react";
-import { memo as memo11, useMemo as useMemo11, useRef as useRef12, useState as useState14 } from "react";
+import { memo as memo11, useRef as useRef12, useState as useState14 } from "react";
 import { Fragment as Fragment11, jsx as jsx143, jsxs as jsxs132 } from "react/jsx-runtime";
 var handleStyle = {
   backgroundColor: "white",
   borderColor: "lightgray",
   opacity: 0
 };
-var NodeContent = ({ event, expanded, hasPermissionEvents, isError, isWarning }) => {
+var NodeContent = ({ event, expanded, iamLevel, issues }) => {
   const theme = useTheme4();
+  const { warningIcon } = useDevSettings();
   return /* @__PURE__ */ jsxs132(Fragment11, { children: [
     /* @__PURE__ */ jsx143(Handle, { position: Position.Left, style: handleStyle, type: "target" }),
     /* @__PURE__ */ jsx143(Handle, { position: Position.Right, style: handleStyle, type: "source" }),
@@ -31666,8 +31694,8 @@ var NodeContent = ({ event, expanded, hasPermissionEvents, isError, isWarning })
                 width: "38px"
               },
               children: [
-                (isError || isWarning) && hasPermissionEvents && /* @__PURE__ */ jsx143(Tooltip6, { arrow: true, title: "Permission denied", children: /* @__PURE__ */ jsx143(GppBad2, { sx: { color: isError ? theme.palette.error.main : theme.palette.warning.main, fontSize: "16px" } }) }),
-                isError && !hasPermissionEvents && /* @__PURE__ */ jsx143(Tooltip6, { arrow: true, title: "Error", children: /* @__PURE__ */ jsx143(Cancel6, { sx: { color: theme.palette.error.main, fontSize: "16px" } }) })
+                issues.error && /* @__PURE__ */ jsx143(Tooltip6, { arrow: true, title: issues.errorType, children: /* @__PURE__ */ jsx143(Box17, { "aria-label": "Error", role: "img", sx: { display: "flex" }, children: iamLevel === "error" ? /* @__PURE__ */ jsx143(GppBad2, { sx: { color: theme.palette.error.main, fontSize: "16px" } }) : /* @__PURE__ */ jsx143(Cancel6, { sx: { color: theme.palette.error.main, fontSize: "16px" } }) }) }),
+                issues.warning && /* @__PURE__ */ jsx143(Tooltip6, { arrow: true, title: issues.warningType, children: /* @__PURE__ */ jsx143(Box17, { "aria-label": "Warning", role: "img", sx: { display: "flex" }, children: iamLevel === "warning" && warningIcon === "iam shield" ? /* @__PURE__ */ jsx143(GppBad2, { sx: { color: theme.palette.warning.main, fontSize: "16px" } }) : /* @__PURE__ */ jsx143(ErrorIcon4, { sx: { color: theme.palette.warning.main, fontSize: "16px" } }) }) })
               ]
             }
           ),
@@ -31690,17 +31718,9 @@ var ServiceNode = memo11(({ data, selected }) => {
   const theme = useTheme4();
   const [isHovered, setIsHovered] = useState14(false);
   const nodeRef = useRef12(null);
-  const { operation_status } = data.event;
-  const hasPermissionEventsLegacy = useMemo11(
-    () => data.event.events.some(
-      (event) => event.event_type === "iam.policy_evaluation" && event.name === "iam.policy.denied"
-    ),
-    [data.event.events]
-  );
-  const isError = operation_status ? operation_status === "error" || operation_status === "iam_explicit_deny" || operation_status === "iam_implicit_deny" : data.event.status_code === 2;
-  const isWarning = operation_status ? operation_status === "iam_explicit_warn" || operation_status === "iam_implicit_warn" : !isError && data.event.status_code === 1 && hasPermissionEventsLegacy;
-  const hasPermissionEvents = operation_status ? operation_status.startsWith("iam_") : hasPermissionEventsLegacy;
-  const outlineColor = isError ? theme.palette.error.main : isWarning ? theme.palette.warning.main : void 0;
+  const issues = getSpanIssues(data.event);
+  const iamLevel = getIamSummary(data.event).level;
+  const outlineColor = issues.error ? theme.palette.error.main : issues.warning ? theme.palette.warning.main : void 0;
   const sharedBoxSx = {
     backgroundColor: theme.palette.background.paper,
     borderLeft: `3px solid ${outlineColor ?? "transparent"}`,
@@ -31709,7 +31729,7 @@ var ServiceNode = memo11(({ data, selected }) => {
     minWidth: 140,
     outline: selected ? `2px solid ${outlineColor ?? theme.palette.primary.main}` : `1px solid ${theme.palette.divider}`
   };
-  const contentProps = { event: data.event, hasPermissionEvents, isError, isWarning };
+  const contentProps = { event: data.event, iamLevel, issues };
   const handleMouseEnter = () => {
     setIsHovered(true);
     const xyNode = nodeRef.current?.closest(".react-flow__node");
@@ -32217,88 +32237,8 @@ function useLocalStorage(key, initialValue) {
   return [storedValue, setValue];
 }
 
-// src/utils/span-parents.ts
-var resolveParents = (spans) => {
-  const byId = new Map(spans.map((span) => [span.span_id, span]));
-  const parentOf = /* @__PURE__ */ new Map();
-  for (const span of spans) {
-    const parent = span.parent_span_id === null ? void 0 : byId.get(span.parent_span_id);
-    if (parent && parent.span_id !== span.span_id && parent.trace_id === span.trace_id) {
-      parentOf.set(span.span_id, parent.span_id);
-    }
-  }
-  const causes = /* @__PURE__ */ new Map();
-  const addCause = (spanId, causeId) => {
-    const list = causes.get(spanId);
-    if (list) list.push(causeId);
-    else causes.set(spanId, [causeId]);
-  };
-  for (const span of spans) {
-    for (const causeId of span.outgoing_link_span_ids ?? []) addCause(span.span_id, causeId);
-    for (const effectId of span.incoming_link_span_ids ?? []) addCause(effectId, span.span_id);
-  }
-  const isAncestorOrSelf = (candidateId, spanId) => {
-    let current = spanId;
-    for (let hops = 0; current !== void 0 && hops <= spans.length; hops++) {
-      if (current === candidateId) return true;
-      current = parentOf.get(current);
-    }
-    return false;
-  };
-  for (const span of spans) {
-    if (parentOf.has(span.span_id)) continue;
-    const cause = causes.get(span.span_id)?.find((causeId) => byId.has(causeId) && !isAncestorOrSelf(span.span_id, causeId));
-    if (cause !== void 0) parentOf.set(span.span_id, cause);
-  }
-  return parentOf;
-};
-
-// src/components/trace-panel/timeline-tree.ts
-var compareNano = (left, right) => {
-  const difference = BigInt(left) - BigInt(right);
-  if (difference === 0n) return 0;
-  return difference < 0n ? -1 : 1;
-};
-var buildTraceTree = (spans) => {
-  const nodes2 = new Map(spans.map((span) => [span.span_id, { children: [], span }]));
-  const parentOf = resolveParents(spans);
-  const roots = [];
-  for (const [spanId, node] of nodes2) {
-    const parent = parentOf.get(spanId);
-    if (parent === void 0) roots.push(node);
-    else nodes2.get(parent)?.children.push(node);
-  }
-  const byStart = (left, right) => compareNano(left.span.start_time_unix_nano, right.span.start_time_unix_nano);
-  roots.sort(byStart);
-  for (const node of nodes2.values()) node.children.sort(byStart);
-  return { parentOf, roots };
-};
-var findRootSpan = (spans, parentOf, spanId) => {
-  let current = spanId;
-  for (let hops = 0; hops <= spans.length; hops++) {
-    const parent = parentOf.get(current);
-    if (parent === void 0) break;
-    current = parent;
-  }
-  return spans.find((span) => span.span_id === current);
-};
-var getTraceBounds = (spans) => {
-  let start;
-  let end;
-  for (const span of spans) {
-    const spanStart = BigInt(span.start_time_unix_nano);
-    const spanEnd = span.end_time_unix_nano ? BigInt(span.end_time_unix_nano) : spanStart;
-    if (start === void 0 || spanStart < start) start = spanStart;
-    if (end === void 0 || spanEnd > end) end = spanEnd;
-  }
-  if (start === void 0 || end === void 0) {
-    return { durationMs: 0, startNano: 0n };
-  }
-  return { durationMs: Number(end - start) / 1e6, startNano: start };
-};
-
 // src/components/trace-panel/waterfall.tsx
-import { AccountTreeOutlined, Cancel as Cancel7, Error as ErrorIcon4, FormatListBulleted, KeyboardArrowDown as KeyboardArrowDown2, KeyboardArrowRight as KeyboardArrowRight2 } from "@mui/icons-material";
+import { AccountTreeOutlined, Cancel as Cancel7, Error as ErrorIcon5, FormatListBulleted, KeyboardArrowDown as KeyboardArrowDown2, KeyboardArrowRight as KeyboardArrowRight2 } from "@mui/icons-material";
 import { Box as Box19, ButtonBase, ToggleButton as ToggleButton2, ToggleButtonGroup as ToggleButtonGroup2, Typography as Typography14 } from "@mui/material";
 import { alpha as alpha5 } from "@mui/material/styles";
 import * as React124 from "react";
@@ -32382,7 +32322,7 @@ var flatten = (nodes2, collapsed, depth = 0, branches = [], parent) => nodes2.fl
 var flattenAll = (nodes2) => flatten(nodes2, /* @__PURE__ */ new Set()).map((row) => ({ ...row, branches: [], depth: 0, last: true })).toSorted((left, right) => compareNano(left.node.span.start_time_unix_nano, right.node.span.start_time_unix_nano));
 var StatusIcons = ({ error, warning: warning2 }) => /* @__PURE__ */ jsxs136(Fragment13, { children: [
   error && /* @__PURE__ */ jsx147(Cancel7, { sx: { color: "error.main", fontSize: 14 } }),
-  warning2 && /* @__PURE__ */ jsx147(ErrorIcon4, { sx: { color: "warning.main", fontSize: 14 } })
+  warning2 && /* @__PURE__ */ jsx147(ErrorIcon5, { sx: { color: "warning.main", fontSize: 14 } })
 ] });
 var Line = ({ height, left, top = 0, width = 1 }) => /* @__PURE__ */ jsx147(
   Box19,
@@ -33596,18 +33536,23 @@ var SpansListPage = () => {
   const [bannerDismissed, setBannerDismissed] = useState22(false);
   const [order2, setOrder] = useLocalStorage("spans-order", "oldest_first");
   const [selectedSpanId, setSelectedSpanId] = useState22();
+  const getTreeSpans = useCallback12((rootSpanId2) => Object.entries(compute.rows).filter(([, row]) => row.rootSpanId === rootSpanId2).map(([spanId]) => getSpan(spanId)).filter((span) => span !== void 0), [compute.rows, getSpan]);
+  const latestRef = useRef19({ compute, getTreeSpans });
+  useEffect22(() => {
+    latestRef.current = { compute, getTreeSpans };
+  }, [compute, getTreeSpans]);
   const navigateToSpan = useCallback12((span) => {
-    setSelectedSpanId(span.span_id);
+    const { compute: { queryActive, rows }, getTreeSpans: getSpans } = latestRef.current;
+    const rootSpanId2 = rows[span.span_id]?.rootSpanId;
+    const firstMatch = queryActive && rootSpanId2 !== void 0 ? findFirstSpan(buildTraceTree(getSpans(rootSpanId2)).roots, (spanId) => rows[spanId]?.matches ?? false) : void 0;
+    setSelectedSpanId(firstMatch?.span_id ?? span.span_id);
   }, []);
   const closeSidebar = useCallback12(() => {
     setSelectedSpanId(void 0);
   }, []);
   const rootSpanId = selectedSpanId === void 0 ? void 0 : compute.rows[selectedSpanId]?.rootSpanId;
-  const treeSpans = useMemo14(() => {
-    if (rootSpanId === void 0) return [];
-    return Object.entries(compute.rows).filter(([, row]) => row.rootSpanId === rootSpanId).map(([spanId]) => getSpan(spanId)).filter((span) => span !== void 0);
-  }, [compute.rows, getSpan, rootSpanId]);
-  const spanMatches = useMemo14(
+  const treeSpans = useMemo13(() => rootSpanId === void 0 ? [] : getTreeSpans(rootSpanId), [getTreeSpans, rootSpanId]);
+  const spanMatches = useMemo13(
     () => compute.queryActive ? (spanId) => compute.rows[spanId]?.matches ?? false : void 0,
     [compute]
   );