@localstack/appinspector-ui 1.0.185 → 1.0.187

package/dist/index.cjs

@@ -13103,7 +13103,7 @@ var ResponsiveTimestampCell = (0, import_react31.memo)(({ date }) => {
 
 // src/dev-settings.tsx
 var React5 = __toESM(require("react"), 1);
-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);
 
@@ -15355,22 +15355,6 @@ ServiceCell.displayName = "ServiceCell";
 var import_icons_material2 = require("@mui/icons-material");
 var import_material5 = require("@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) {
@@ -15469,58 +15453,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
 var import_jsx_runtime125 = require("react/jsx-runtime");
-var StatusIcon = ({ errorLevel, operationStatus, spanStatusCode }) => {
-  switch (errorLevel) {
-    case ErrorLevel.ERROR: {
-      return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_icons_material2.Cancel, { sx: { color: "red" } });
-    }
-    case ErrorLevel.IAM_PERMISSION: {
-      const isDenial = operationStatus ? operationStatus === "iam_explicit_deny" || operationStatus === "iam_implicit_deny" : spanStatusCode === 2;
-      return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_icons_material2.GppBad, { sx: { color: isDenial ? "red" : "warning.main" } });
-    }
-    case ErrorLevel.WARNING: {
-      return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_icons_material2.Error, { sx: { color: "orange" } });
-    }
-    default: {
-      return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_jsx_runtime125.Fragment, {});
-    }
-  }
-};
 var SPAN_STATUS_LABELS = {
   0: "Unset",
   1: "OK",
@@ -15548,9 +15514,14 @@ var buildTooltipContent = (span) => {
   ] });
 };
 var StatusIconWithTooltip = ({ span }) => {
-  const errorLevel = calculateHighestErrorLevel(span);
-  if (errorLevel !== ErrorLevel.ERROR && errorLevel !== ErrorLevel.IAM_PERMISSION) return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_jsx_runtime125.Fragment, {});
-  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Tooltip, { title: buildTooltipContent(span), children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Box, { sx: { alignItems: "center", cursor: "default", display: "flex" }, children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(StatusIcon, { errorLevel, operationStatus: span.operation_status, spanStatusCode: span.status_code }) }) });
+  const { warningIcon } = useDevSettings();
+  const { error, warning: warning2 } = getSpanIssues(span);
+  if (!error && !warning2) return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_jsx_runtime125.Fragment, {});
+  const iamLevel = getIamSummary(span).level;
+  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Tooltip, { title: buildTooltipContent(span), children: /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_material5.Box, { sx: { alignItems: "center", cursor: "default", display: "flex" }, children: [
+    error && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Box, { "aria-label": "Error", role: "img", sx: { display: "flex" }, children: iamLevel === "error" ? /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_icons_material2.GppBad, { sx: { color: "error.main" } }) : /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_icons_material2.Cancel, { sx: { color: "error.main" } }) }),
+    warning2 && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Box, { "aria-label": "Warning", role: "img", sx: { display: "flex" }, children: iamLevel === "warning" && warningIcon === "iam shield" ? /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_icons_material2.GppBad, { sx: { color: "warning.main" } }) : /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_icons_material2.Error, { sx: { color: "warning.main" } }) })
+  ] }) });
 };
 
 // src/components/spans-list/span-count-badge.tsx
@@ -16635,6 +16606,94 @@ var StatusMessage = ({
   return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_jsx_runtime130.Fragment, {});
 };
 
+// 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
 var import_icons_material15 = require("@mui/icons-material");
 var import_material25 = require("@mui/material");
@@ -16754,38 +16813,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);
@@ -16834,7 +16861,7 @@ var import_react44 = require("react");
 var import_icons_material8 = require("@mui/icons-material");
 var import_material12 = require("@mui/material");
 var import_jsx_runtime132 = require("react/jsx-runtime");
-var StatusIcon2 = ({ errorLevel }) => {
+var StatusIcon = ({ errorLevel }) => {
   switch (errorLevel) {
     case EventLevel.LevelError: {
       return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_icons_material8.Cancel, { sx: { color: "red" } });
@@ -18935,7 +18962,7 @@ var EventDetail = ({
   const eventLevel = getEventLevelFromGroup(type);
   return /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material17.Box, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material17.Box, { sx: { alignItems: "center", display: "flex", mb: 0.5 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(StatusIcon2, { errorLevel: eventLevel }),
+      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(StatusIcon, { errorLevel: eventLevel }),
       /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material17.Typography, { color: "text.secondary", sx: { fontWeight: 600, ml: 0.5 }, variant: "caption", children: displayText })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material17.Box, { children: events.map((event) => /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material17.Box, { sx: { maxWidth: "100%", mb: 0.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(EventMessage, { event }) }, `${event.span_id}-${event.event_id}`)) })
@@ -31584,8 +31611,9 @@ var handleStyle = {
   borderColor: "lightgray",
   opacity: 0
 };
-var NodeContent = ({ event, expanded, hasPermissionEvents, isError, isWarning }) => {
+var NodeContent = ({ event, expanded, iamLevel, issues }) => {
   const theme = (0, import_material20.useTheme)();
+  const { warningIcon } = useDevSettings();
   return /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(import_jsx_runtime143.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react52.Handle, { position: import_react52.Position.Left, style: handleStyle, type: "target" }),
     /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react52.Handle, { position: import_react52.Position.Right, style: handleStyle, type: "source" }),
@@ -31640,8 +31668,8 @@ var NodeContent = ({ event, expanded, hasPermissionEvents, isError, isWarning })
                 width: "38px"
               },
               children: [
-                (isError || isWarning) && hasPermissionEvents && /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_material20.Tooltip, { arrow: true, title: "Permission denied", children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_icons_material12.GppBad, { sx: { color: isError ? theme.palette.error.main : theme.palette.warning.main, fontSize: "16px" } }) }),
-                isError && !hasPermissionEvents && /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_material20.Tooltip, { arrow: true, title: "Error", children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_icons_material12.Cancel, { sx: { color: theme.palette.error.main, fontSize: "16px" } }) })
+                issues.error && /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_material20.Tooltip, { arrow: true, title: issues.errorType, children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_material20.Box, { "aria-label": "Error", role: "img", sx: { display: "flex" }, children: iamLevel === "error" ? /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_icons_material12.GppBad, { sx: { color: theme.palette.error.main, fontSize: "16px" } }) : /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_icons_material12.Cancel, { sx: { color: theme.palette.error.main, fontSize: "16px" } }) }) }),
+                issues.warning && /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_material20.Tooltip, { arrow: true, title: issues.warningType, children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_material20.Box, { "aria-label": "Warning", role: "img", sx: { display: "flex" }, children: iamLevel === "warning" && warningIcon === "iam shield" ? /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_icons_material12.GppBad, { sx: { color: theme.palette.warning.main, fontSize: "16px" } }) : /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_icons_material12.Error, { sx: { color: theme.palette.warning.main, fontSize: "16px" } }) }) })
               ]
             }
           ),
@@ -31664,17 +31692,9 @@ var ServiceNode = (0, import_react53.memo)(({ data, selected }) => {
   const theme = (0, import_material20.useTheme)();
   const [isHovered, setIsHovered] = (0, import_react53.useState)(false);
   const nodeRef = (0, import_react53.useRef)(null);
-  const { operation_status } = data.event;
-  const hasPermissionEventsLegacy = (0, import_react53.useMemo)(
-    () => 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"}`,
@@ -31683,7 +31703,7 @@ var ServiceNode = (0, import_react53.memo)(({ 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");
@@ -32191,86 +32211,6 @@ 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
 var import_icons_material14 = require("@mui/icons-material");
 var import_material24 = require("@mui/material");
@@ -33570,17 +33510,22 @@ var SpansListPage = () => {
   const [bannerDismissed, setBannerDismissed] = (0, import_react65.useState)(false);
   const [order2, setOrder] = useLocalStorage("spans-order", "oldest_first");
   const [selectedSpanId, setSelectedSpanId] = (0, import_react65.useState)();
+  const getTreeSpans = (0, import_react65.useCallback)((rootSpanId2) => Object.entries(compute.rows).filter(([, row]) => row.rootSpanId === rootSpanId2).map(([spanId]) => getSpan(spanId)).filter((span) => span !== void 0), [compute.rows, getSpan]);
+  const latestRef = (0, import_react65.useRef)({ compute, getTreeSpans });
+  (0, import_react65.useEffect)(() => {
+    latestRef.current = { compute, getTreeSpans };
+  }, [compute, getTreeSpans]);
   const navigateToSpan = (0, import_react65.useCallback)((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 = (0, import_react65.useCallback)(() => {
     setSelectedSpanId(void 0);
   }, []);
   const rootSpanId = selectedSpanId === void 0 ? void 0 : compute.rows[selectedSpanId]?.rootSpanId;
-  const treeSpans = (0, import_react65.useMemo)(() => {
-    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 treeSpans = (0, import_react65.useMemo)(() => rootSpanId === void 0 ? [] : getTreeSpans(rootSpanId), [getTreeSpans, rootSpanId]);
   const spanMatches = (0, import_react65.useMemo)(
     () => compute.queryActive ? (spanId) => compute.rows[spanId]?.matches ?? false : void 0,
     [compute]