@localstack/appinspector-ui 1.0.37 → 1.0.38

package/dist/index.js

@@ -1,6 +1,6 @@
 // src/pages/spans-list-page.tsx
 import { Box as Box18 } from "@mui/material";
-import { useCallback as useCallback5, useEffect as useEffect7, useMemo as useMemo7, useRef as useRef4, useState as useState10 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect6, useMemo as useMemo6, useRef as useRef3, useState as useState9 } from "react";
 
 // src/api/use-api.tsx
 import { createContext, useContext } from "react";
@@ -24,101 +24,114 @@ import { Alert, Box as Box4, Button as Button2 } from "@mui/material";
 import { Cached, DeleteForeverOutlined, Search } from "@mui/icons-material";
 import { Box as Box3, Button, FormControlLabel, Grid, Paper, Switch, TextField, Tooltip as Tooltip2, Typography as Typography2 } from "@mui/material";
 import { DataGrid } from "@mui/x-data-grid";
-import { useCallback, useMemo as useMemo2, useState as useState2 } from "react";
-
-// src/components/cells/responsive-timestamp-cell.tsx
-import { useEffect, useMemo, useRef, useState } from "react";
-
-// src/utils/time.ts
-function unixNanoToDate(unixNanoString) {
-  if (!unixNanoString) return void 0;
-  const milliseconds = Number(BigInt(unixNanoString) / BigInt("1000000"));
-  return new Date(milliseconds);
-}
+import { useCallback, useMemo, useState } from "react";
 
 // src/components/cells/responsive-timestamp-cell.tsx
+import { memo } from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
-var ResponsiveTimestampCell = ({ locale, value }) => {
-  const [columnWidth, setColumnWidth] = useState(0);
-  const cellReference = useRef(null);
-  useEffect(() => {
-    const updateWidth = () => {
-      if (cellReference.current) {
-        const width = cellReference.current.offsetWidth;
-        setColumnWidth(width);
-      }
-    };
-    updateWidth();
-    window.addEventListener("resize", updateWidth);
-    if (cellReference.current) {
-      const resizeObserver = new ResizeObserver(updateWidth);
-      resizeObserver.observe(cellReference.current);
-      return () => {
-        resizeObserver.disconnect();
-        window.removeEventListener("resize", updateWidth);
-      };
+var ResponsiveTimestampCell = memo(({ date, locale }) => {
+  const format = new Intl.DateTimeFormat(locale, {
+    day: "2-digit",
+    fractionalSecondDigits: 3,
+    hour: "2-digit",
+    hour12: false,
+    minute: "2-digit",
+    month: "2-digit",
+    second: "2-digit",
+    year: "numeric"
+  });
+  const formattedTime = format.format(date);
+  return /* @__PURE__ */ jsx2("div", { style: { width: "100%" }, children: formattedTime });
+});
+
+// src/utils/logger.ts
+var getIsDevelopment = () => {
+  try {
+    return false;
+  } catch {
+    return false;
+  }
+};
+var isDevelopment = getIsDevelopment();
+var logger = {
+  debug: (message, data) => {
+    if (isDevelopment) {
+      console.debug(`[DEBUG] ${message}`, data === void 0 ? "" : data);
     }
-  }, []);
-  const formattedTime = useMemo(() => {
-    if (!value) return;
-    const date = unixNanoToDate(value);
-    if (!date) return;
-    if (columnWidth < 100) {
-      const formatter = new Intl.DateTimeFormat(locale, {
-        hour: "2-digit",
-        hour12: false,
-        minute: "2-digit",
-        second: "2-digit"
-      });
-      return formatter.format(date);
-    } else if (columnWidth < 160) {
-      const formatter = new Intl.DateTimeFormat(locale, {
-        hour: "2-digit",
-        hour12: false,
-        minute: "2-digit",
-        second: "2-digit"
-      });
-      const timeString = formatter.format(date);
-      const ms = date.getMilliseconds().toString().padStart(3, "0");
-      return `${timeString}:${ms}`;
-    } else {
-      const dateFormatter = new Intl.DateTimeFormat(locale, {
-        day: "2-digit",
-        month: "2-digit",
-        year: "numeric"
-      });
-      const timeFormatter = new Intl.DateTimeFormat(locale, {
-        hour: "2-digit",
-        hour12: false,
-        minute: "2-digit",
-        second: "2-digit"
-      });
-      const dateString = dateFormatter.format(date);
-      const timeString = timeFormatter.format(date);
-      const ms = date.getMilliseconds().toString().padStart(3, "0");
-      return `${dateString} - ${timeString}:${ms}`;
+  },
+  error: (message, data) => {
+    if (isDevelopment) {
+      console.error(`[ERROR] ${message}`, data === void 0 ? "" : data);
     }
-  }, [value, columnWidth, locale]);
-  if (!formattedTime) return /* @__PURE__ */ jsx2("span", { children: "N/A" });
-  return /* @__PURE__ */ jsx2("div", { ref: cellReference, style: { width: "100%" }, children: formattedTime });
+  },
+  info: (message, data) => {
+    if (isDevelopment) {
+      console.info(`[INFO] ${message}`, data === void 0 ? "" : data);
+    }
+  },
+  warn: (message, data) => {
+    if (isDevelopment) {
+      console.warn(`[WARN] ${message}`, data === void 0 ? "" : data);
+    }
+  }
+};
+var createScopedLogger = (scope) => ({
+  debug: (message, data) => {
+    logger.debug(`[${scope}] ${message}`, data);
+  },
+  error: (message, data) => {
+    logger.error(`[${scope}] ${message}`, data);
+  },
+  info: (message, data) => {
+    logger.info(`[${scope}] ${message}`, data);
+  },
+  warn: (message, data) => {
+    logger.warn(`[${scope}] ${message}`, data);
+  }
+});
+
+// src/utils/search-in-object.ts
+var searchInObject = (object, searchTerm, skipKeys = []) => {
+  if (!object) return false;
+  if (!searchTerm || searchTerm.trim() === "") return true;
+  const normalizedSearchTerm = searchTerm.toLowerCase().trim();
+  if (typeof object === "string") {
+    return object.toLowerCase().includes(normalizedSearchTerm);
+  }
+  if (typeof object === "number") {
+    return String(object).toLowerCase().includes(normalizedSearchTerm);
+  }
+  if (typeof object === "boolean") {
+    return String(object).toLowerCase().includes(normalizedSearchTerm);
+  }
+  if (Array.isArray(object)) {
+    return object.some((item) => searchInObject(item, searchTerm, skipKeys));
+  }
+  if (typeof object === "object") {
+    return Object.entries(object).filter(([key]) => !skipKeys.includes(key)).some(([, value]) => searchInObject(value, searchTerm, skipKeys));
+  }
+  return false;
 };
 
 // src/components/cells/service-cell.tsx
 import { Box as Box2, Divider, Typography, useTheme } from "@mui/material";
+import { memo as memo6 } from "react";
 
 // src/components/aws-service-icon/aws-service-icon.tsx
 import { Tooltip } from "@mui/material";
+import { memo as memo4 } from "react";
 
 // src/utils/wrap-in-component.tsx
-var WrapInComponent = ({ children, wrap, wrapperFn }) => {
+import { memo as memo2 } from "react";
+var WrapInComponent = memo2(({ children, wrap, wrapperFn }) => {
   if (wrap) {
     return wrapperFn(children);
   }
   return children;
-};
+});
 
 // src/components/aws-service-icon/icons/index.tsx
-import { memo } from "react";
+import { memo as memo3 } from "react";
 
 // src/types/service-names.ts
 var SERVICE_NAME = {
@@ -2433,7 +2446,7 @@ var ICONS_MAP = {
   [SERVICE_NAME.WAFV2]: wafv2_default,
   [SERVICE_NAME.XRAY]: xray_default
 };
-var AwsServiceIconBase = memo((props) => {
+var AwsServiceIconBase = memo3((props) => {
   const Icon = ICONS_MAP[props.service] ?? ICONS_MAP.infrastructure;
   return /* @__PURE__ */ jsx121(Icon, { ...props });
 });
@@ -2442,7 +2455,7 @@ var supportedServiceNames = Object.keys(ICONS_MAP);
 // src/components/aws-service-icon/aws-service-icon.tsx
 import { jsx as jsx122 } from "react/jsx-runtime";
 var sizes = { large: [32, 32], medium: [22, 22], small: [11, 11] };
-var AwsServiceIcon = ({ hideTooltip, service, size = "medium", title }) => {
+var AwsServiceIcon = memo4(({ hideTooltip, service, size = "medium", title }) => {
   const [width, height] = sizes[size];
   return /* @__PURE__ */ jsx122(
     WrapInComponent,
@@ -2452,12 +2465,13 @@ var AwsServiceIcon = ({ hideTooltip, service, size = "medium", title }) => {
       children: /* @__PURE__ */ jsx122(AwsServiceIconBase, { height, service, style: { display: "block" }, width })
     }
   );
-};
+});
 
 // src/components/cells/pill-cell.tsx
 import { Box } from "@mui/material";
+import { memo as memo5 } from "react";
 import { jsx as jsx123 } from "react/jsx-runtime";
-var PillCell = ({
+var PillCell = memo5(({
   backgroundColor,
   children,
   height = "24px",
@@ -2486,11 +2500,11 @@ var PillCell = ({
       children
     }
   );
-};
+});
 
 // src/components/cells/service-cell.tsx
 import { Fragment, jsx as jsx124, jsxs as jsxs119 } from "react/jsx-runtime";
-var ServiceCell = ({
+var ServiceCell = memo6(({
   height = "24px",
   resource,
   selected,
@@ -2563,77 +2577,8 @@ var ServiceCell = ({
       )
     ] }) : void 0
   ] }) });
-};
-ServiceCell.displayName = "ServiceCell";
-
-// src/utils/logger.ts
-var getIsDevelopment = () => {
-  try {
-    return false;
-  } catch {
-    return false;
-  }
-};
-var isDevelopment = getIsDevelopment();
-var logger = {
-  debug: (message, data) => {
-    if (isDevelopment) {
-      console.debug(`[DEBUG] ${message}`, data === void 0 ? "" : data);
-    }
-  },
-  error: (message, data) => {
-    if (isDevelopment) {
-      console.error(`[ERROR] ${message}`, data === void 0 ? "" : data);
-    }
-  },
-  info: (message, data) => {
-    if (isDevelopment) {
-      console.info(`[INFO] ${message}`, data === void 0 ? "" : data);
-    }
-  },
-  warn: (message, data) => {
-    if (isDevelopment) {
-      console.warn(`[WARN] ${message}`, data === void 0 ? "" : data);
-    }
-  }
-};
-var createScopedLogger = (scope) => ({
-  debug: (message, data) => {
-    logger.debug(`[${scope}] ${message}`, data);
-  },
-  error: (message, data) => {
-    logger.error(`[${scope}] ${message}`, data);
-  },
-  info: (message, data) => {
-    logger.info(`[${scope}] ${message}`, data);
-  },
-  warn: (message, data) => {
-    logger.warn(`[${scope}] ${message}`, data);
-  }
 });
-
-// src/utils/search-in-object.ts
-var searchInObject = (object, searchTerm, skipKeys = []) => {
-  if (!object) return false;
-  if (!searchTerm || searchTerm.trim() === "") return true;
-  const normalizedSearchTerm = searchTerm.toLowerCase().trim();
-  if (typeof object === "string") {
-    return object.toLowerCase().includes(normalizedSearchTerm);
-  }
-  if (typeof object === "number") {
-    return String(object).toLowerCase().includes(normalizedSearchTerm);
-  }
-  if (typeof object === "boolean") {
-    return String(object).toLowerCase().includes(normalizedSearchTerm);
-  }
-  if (Array.isArray(object)) {
-    return object.some((item) => searchInObject(item, searchTerm, skipKeys));
-  }
-  if (typeof object === "object") {
-    return Object.entries(object).filter(([key]) => !skipKeys.includes(key)).some(([, value]) => searchInObject(value, searchTerm, skipKeys));
-  }
-  return false;
-};
+ServiceCell.displayName = "ServiceCell";
 
 // src/components/spans-list/spans-data-grid.tsx
 import { Fragment as Fragment2, jsx as jsx125, jsxs as jsxs120 } from "react/jsx-runtime";
@@ -2641,12 +2586,6 @@ var resourceNameComparator = (v1 = "", v2 = "") => {
   return v1.localeCompare(v2);
 };
 var columns = [
-  // {
-  //   field: 'status',
-  //   renderHeader: () => null,
-  //   width: 50,
-  //   renderCell: (parameters) => <StatusCell span={parameters.row} />,
-  // },
   {
     field: "trace_id",
     headerName: "Trace",
@@ -2670,7 +2609,7 @@ var columns = [
   {
     field: "start_time_unix_nano",
     headerName: "Time",
-    renderCell: (parameters) => /* @__PURE__ */ jsx125(ResponsiveTimestampCell, { value: parameters.value }),
+    renderCell: (parameters) => /* @__PURE__ */ jsx125(ResponsiveTimestampCell, { date: parameters.value?.startTime }),
     type: "string",
     width: 180
   },
@@ -2722,8 +2661,8 @@ var SpansDataGrid = ({
   // setRows,
   sortingOption = defaultSortingOption
 }) => {
-  const [searchTerm, setSearchTerm] = useState2(() => localStorage.getItem("spansSearchTerm") ?? "");
-  const [sortModel, setSortModel] = useState2(() => {
+  const [searchTerm, setSearchTerm] = useState(() => localStorage.getItem("spansSearchTerm") ?? "");
+  const [sortModel, setSortModel] = useState(() => {
     const savedSorting = localStorage.getItem("spansSortModel");
     if (savedSorting) {
       try {
@@ -2758,8 +2697,8 @@ var SpansDataGrid = ({
     },
     [searchTerm]
   );
-  const filtersToApply = useMemo2(() => [filterSpansBySearchTerm], [filterSpansBySearchTerm]);
-  const filteredRows = useMemo2(
+  const filtersToApply = useMemo(() => [filterSpansBySearchTerm], [filterSpansBySearchTerm]);
+  const filteredRows = useMemo(
     () => rows.filter((row) => filtersToApply.every((filter) => filter(row))),
     [filtersToApply, rows]
   );
@@ -3181,9 +3120,9 @@ var StatusMessage = ({
 };
 
 // src/hooks/use-local-storage.tsx
-import { useCallback as useCallback2, useEffect as useEffect2, useState as useState3 } from "react";
+import { useCallback as useCallback2, useEffect, useState as useState2 } from "react";
 function useLocalStorage(key, initialValue) {
-  const [storedValue, setStoredValue] = useState3(() => {
+  const [storedValue, setStoredValue] = useState2(() => {
     try {
       const item = globalThis.localStorage.getItem(key);
       return item ? JSON.parse(item) : initialValue;
@@ -3204,7 +3143,7 @@ function useLocalStorage(key, initialValue) {
       console.error(`Error setting localStorage key "${key}":`, error);
     }
   }, [key]);
-  useEffect2(() => {
+  useEffect(() => {
     const handleStorageChange = (event) => {
       if (event.key === key && event.newValue !== null) {
         try {
@@ -3223,14 +3162,14 @@ function useLocalStorage(key, initialValue) {
 }
 
 // src/hooks/use-status.tsx
-import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef2, useState as useState4 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect2, useRef, useState as useState3 } from "react";
 var useStatus = () => {
   const api = useAppInspectorApi();
-  const [checking, setChecking] = useState4(true);
-  const [status, setStatus] = useState4();
-  const [error, setError] = useState4();
-  const hasFetchedReference = useRef2(false);
-  const abortControllerReference = useRef2(null);
+  const [checking, setChecking] = useState3(true);
+  const [status, setStatus] = useState3();
+  const [error, setError] = useState3();
+  const hasFetchedReference = useRef(false);
+  const abortControllerReference = useRef(null);
   const checkStatus = useCallback3(async () => {
     if (abortControllerReference.current) {
       abortControllerReference.current.abort();
@@ -3255,7 +3194,7 @@ var useStatus = () => {
       }
     }
   }, [api]);
-  useEffect3(() => {
+  useEffect2(() => {
     if (!hasFetchedReference.current) {
       hasFetchedReference.current = true;
       void checkStatus();
@@ -3269,11 +3208,11 @@ 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 useCallback4, useEffect as useEffect6, useState as useState9 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect5, useState as useState8 } 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";
-import { useMemo as useMemo5 } from "react";
+import { useMemo as useMemo4 } from "react";
 
 // src/utils/iam-utils.ts
 function determinePermissionStatus(payload) {
@@ -3469,6 +3408,17 @@ var getEventGroupsByType = (events) => {
   return groups;
 };
 
+// src/utils/time.ts
+function unixNanoToDate(unixNanoString) {
+  const milliseconds = unixNanoToMilliseconds(unixNanoString);
+  if (!milliseconds) return void 0;
+  return new Date(milliseconds);
+}
+function unixNanoToMilliseconds(unixNanoString) {
+  if (!unixNanoString) return void 0;
+  return Number(BigInt(unixNanoString) / BigInt("1000000"));
+}
+
 // src/components/event-details/event-details-header.tsx
 import { Close } from "@mui/icons-material";
 import { Box as Box6, IconButton, Typography as Typography4 } from "@mui/material";
@@ -3507,7 +3457,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 useEffect4, useMemo as useMemo4, useRef as useRef3, useState as useState6 } from "react";
+import { useEffect as useEffect3, useMemo as useMemo3, useRef as useRef2, useState as useState5 } from "react";
 
 // src/components/status-icon.tsx
 import { Cancel, CheckCircle, Error as Error2, Info, RemoveCircle } from "@mui/icons-material";
@@ -3658,7 +3608,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 useMemo3, useState as useState5 } from "react";
+import { useMemo as useMemo2, useState as useState4 } from "react";
 import { jsx as jsx131, jsxs as jsxs125 } from "react/jsx-runtime";
 var getChipColors = (status) => {
   const isAllowed = status === "explicitly_allowed" || status === "implicitly_allowed";
@@ -3668,8 +3618,8 @@ var getChipColors = (status) => {
   };
 };
 var IAMPermissionItem = ({ event }) => {
-  const [isOpen, setIsOpen] = useState5(false);
-  const parsedData = useMemo3(() => {
+  const [isOpen, setIsOpen] = useState4(false);
+  const parsedData = useMemo2(() => {
     const payloadString = event.attributes?.payload;
     if (!payloadString) {
       return;
@@ -3739,15 +3689,15 @@ var DetailRow2 = ({ content, label }) => /* @__PURE__ */ jsxs126(Grid3, { contai
   ) : content })
 ] });
 var EventMessage = ({ event }) => {
-  const [isOpen, setIsOpen] = useState6(false);
-  const [isOverflowing, setIsOverflowing] = useState6(false);
-  const textReference = useRef3(null);
-  const parsedMessage = useMemo4(() => parseEventMessage(event), [event]);
-  const isIAMPolicyEvent = useMemo4(
+  const [isOpen, setIsOpen] = useState5(false);
+  const [isOverflowing, setIsOverflowing] = useState5(false);
+  const textReference = useRef2(null);
+  const parsedMessage = useMemo3(() => parseEventMessage(event), [event]);
+  const isIAMPolicyEvent = useMemo3(
     () => event.event_type === "iam.policy_evaluation" && event.attributes?.payload && typeof event.attributes.payload === "string",
     [event]
   );
-  useEffect4(() => {
+  useEffect3(() => {
     const checkOverflow = () => {
       const element = textReference.current;
       if (element) {
@@ -3760,11 +3710,11 @@ var EventMessage = ({ event }) => {
       window.removeEventListener("resize", checkOverflow);
     };
   }, [parsedMessage.headline]);
-  const hasAdditionalContent = useMemo4(
+  const hasAdditionalContent = useMemo3(
     () => parsedMessage.message || parsedMessage.details || isIAMPolicyEvent,
     [parsedMessage.message, parsedMessage.details, isIAMPolicyEvent]
   );
-  const shouldShowToggle = useMemo4(
+  const shouldShowToggle = useMemo3(
     () => isOverflowing || hasAdditionalContent,
     [isOverflowing, hasAdditionalContent]
   );
@@ -3906,10 +3856,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 useState7 } from "react";
+import { useState as useState6 } from "react";
 import { jsx as jsx133, jsxs as jsxs127 } from "react/jsx-runtime";
 var ToggleSection = ({ children, headline, initialOpen = true }) => {
-  const [isOpen, setIsOpen] = useState7(initialOpen);
+  const [isOpen, setIsOpen] = useState6(initialOpen);
   return /* @__PURE__ */ jsxs127(Box11, { sx: { mt: 4 }, children: [
     /* @__PURE__ */ jsx133(
       Box11,
@@ -3985,7 +3935,7 @@ var EventSection = ({
 // src/components/event-details/event-details.tsx
 import { Fragment as Fragment5, jsx as jsx135, jsxs as jsxs129 } from "react/jsx-runtime";
 var EventDetails = ({ onClose, selectedEvent }) => {
-  const attributes = useMemo5(() => {
+  const attributes = useMemo4(() => {
     const attributes2 = Object.entries(selectedEvent?.attributes ?? {});
     return attributes2.filter(([key]) => key !== "localstack.aws.account_id" && key !== "localstack.aws.service");
   }, [selectedEvent?.attributes]);
@@ -4085,21 +4035,21 @@ function renderKeyValue(key, value) {
 import "@xyflow/react/dist/base.css";
 import { Alert as Alert3, Button as Button4, useTheme as useTheme2 } from "@mui/material";
 import { Background, ReactFlow, useNodesState, useReactFlow as useReactFlow2 } from "@xyflow/react";
-import { useEffect as useEffect5, useState as useState8 } from "react";
+import { useEffect as useEffect4, useState as useState7 } from "react";
 
 // src/components/trace-graph/service-node.tsx
 import { Box as Box15, Stack as Stack2, Typography as Typography10 } from "@mui/material";
 import "@xyflow/react/dist/style.css";
 import { Handle, Position } from "@xyflow/react";
-import { memo as memo2 } from "react";
+import { memo as memo7 } from "react";
 
 // src/components/trace-graph/problem-indicator.tsx
 import { Error as ErrorIcon2, Info as Info2, Warning as Warning2 } from "@mui/icons-material";
 import { Box as Box14, Tooltip as Tooltip3 } from "@mui/material";
-import { useMemo as useMemo6 } from "react";
+import { useMemo as useMemo5 } from "react";
 import { jsx as jsx136 } from "react/jsx-runtime";
 var ProblemIndicator = ({ error }) => {
-  const icon = useMemo6(() => {
+  const icon = useMemo5(() => {
     switch (error.level) {
       case "error": {
         return /* @__PURE__ */ jsx136(ErrorIcon2, { sx: { color: "#d32f2f", fontSize: "14px" } });
@@ -4112,7 +4062,7 @@ var ProblemIndicator = ({ error }) => {
       }
     }
   }, [error.level]);
-  const color = useMemo6(() => {
+  const color = useMemo5(() => {
     switch (error.level) {
       case "error": {
         return "#d32f2f";
@@ -4151,7 +4101,7 @@ var handleStyle = {
   borderColor: "lightgray",
   opacity: 0
 };
-var ServiceNode = memo2(({ data, selected }) => {
+var ServiceNode = memo7(({ data, selected }) => {
   const hasErrors = (data.event.errors && data.event.errors.length > 0) ?? false;
   return /* @__PURE__ */ jsxs130(Box15, { sx: { maxWidth: 200 }, children: [
     /* @__PURE__ */ jsxs130(
@@ -4332,7 +4282,7 @@ var calculateCenterX = (focusNodeX, viewPortPixelWidth, minX, maxX) => {
 import { Add, FitScreen, Remove } from "@mui/icons-material";
 import { Box as Box16, IconButton as IconButton4 } from "@mui/material";
 import { useReactFlow, useStore } from "@xyflow/react";
-import { memo as memo3 } from "react";
+import { memo as memo8 } from "react";
 
 // node_modules/zustand/esm/shallow.mjs
 function shallow$1(objA, objB) {
@@ -4379,7 +4329,7 @@ var selector = (s) => ({
   maxZoomReached: s.transform[2] >= s.maxZoom,
   minZoomReached: s.transform[2] <= s.minZoom
 });
-var Controls = memo3(() => {
+var Controls = memo8(() => {
   const { maxZoomReached, minZoomReached } = useStore(selector, shallow$1);
   const { fitView, zoomIn, zoomOut } = useReactFlow();
   const onZoomInHandler = () => {
@@ -4452,10 +4402,10 @@ var TraceGraph = ({
   viewPortPixelWidth
 }) => {
   const [nodes, setNodes, onNodesChange] = useNodesState([]);
-  const [edges, setEdges] = useState8([]);
-  const [initialViewSet, setInitialViewSet] = useState8(false);
+  const [edges, setEdges] = useState7([]);
+  const [initialViewSet, setInitialViewSet] = useState7(false);
   const { fitView, setCenter } = useReactFlow2();
-  useEffect5(() => {
+  useEffect4(() => {
     const spansMap = /* @__PURE__ */ new Map();
     const rootSpans = [];
     for (const span of spans.data ?? []) {
@@ -4490,7 +4440,7 @@ var TraceGraph = ({
     setNodes(layoutedNodes);
     setEdges(layoutedEdges);
   }, [spans.data, initialFocusEventId, setNodes]);
-  useEffect5(() => {
+  useEffect4(() => {
     const shouldSetInitialView = !spans.loading && nodes.length > 0 && !initialViewSet;
     if (shouldSetInitialView) {
       if (initialFocusEventId) {
@@ -4679,10 +4629,10 @@ var TraceGraphView = ({
 };
 var TraceGraphPage = ({ onClose, spanId, traceId }) => {
   const api = useAppInspectorApi();
-  const [spans, setSpans] = useState9();
-  const [loading, setLoading] = useState9(false);
+  const [spans, setSpans] = useState8();
+  const [loading, setLoading] = useState8(false);
   const [includeReadOperations] = useLocalStorage("includeReadOperations", false);
-  const [fetchError, setFetchError] = useState9();
+  const [fetchError, setFetchError] = useState8();
   const fetchSpans = useCallback4(async () => {
     setLoading(true);
     try {
@@ -4699,12 +4649,12 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
       setLoading(false);
     }
   }, [api, includeReadOperations, traceId]);
-  useEffect6(() => {
+  useEffect5(() => {
     void fetchSpans();
   }, [fetchSpans]);
-  const [open, setOpen] = useState9(true);
-  const [selectedEvent, setSelectedEvent] = useState9();
-  const [viewPortPixelWidth, setViewPortPixelWidth] = useState9(0);
+  const [open, setOpen] = useState8(true);
+  const [selectedEvent, setSelectedEvent] = useState8();
+  const [viewPortPixelWidth, setViewPortPixelWidth] = useState8(0);
   const { checkStatus, error: statusError, status } = useStatus();
   const calculateDrawerWidth = useCallback4(() => {
     const percentageMatch = /(\d+)%/.exec(DRAWER_WIDTH);
@@ -4714,7 +4664,7 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
     }
     return 0;
   }, [open]);
-  useEffect6(() => {
+  useEffect5(() => {
     const updateViewportWidth = () => {
       const totalWidth = window.innerWidth;
       const drawerPixelWidth = open ? calculateDrawerWidth() : 0;
@@ -4767,22 +4717,22 @@ import { Fragment as Fragment8, jsx as jsx141, jsxs as jsxs134 } from "react/jsx
 var spansPerPageOptions = [25, 50, 100];
 var SpansListPage = () => {
   const api = useAppInspectorApi();
-  const [spans, setSpans] = useState10();
-  const [loading, setLoading] = useState10(false);
-  const hasFetched = useRef4(false);
+  const [spans, setSpans] = useState9();
+  const [loading, setLoading] = useState9(false);
+  const hasFetched = useRef3(false);
   const [includeReadOperations, setIncludeReadOperations] = useLocalStorage("includeReadOperations", false);
-  const mapPageToNextCursor = useRef4({});
-  const [page, setPage] = useState10(0);
-  const [pageSize, setPageSize] = useState10(100);
-  const [spanCount, setSpanCount] = useState10(0);
-  const queryOptions = useMemo7(() => {
+  const mapPageToNextCursor = useRef3({});
+  const [page, setPage] = useState9(0);
+  const [pageSize, setPageSize] = useState9(100);
+  const [spanCount, setSpanCount] = useState9(0);
+  const queryOptions = useMemo6(() => {
     return {
       is_write_operation: includeReadOperations ? void 0 : true,
       limit: pageSize,
       pagination_token: mapPageToNextCursor.current[page - 1]
     };
   }, [includeReadOperations, pageSize, page]);
-  const [fetchError, setFetchError] = useState10();
+  const [fetchError, setFetchError] = useState9();
   const { checkStatus, error: statusError, status } = useStatus();
   const fetchSpans = useCallback5(async () => {
     setLoading(true);
@@ -4804,18 +4754,18 @@ var SpansListPage = () => {
   const fetchSpansSync = useCallback5(() => {
     void fetchSpans();
   }, [fetchSpans]);
-  useEffect7(() => {
+  useEffect6(() => {
     if (hasFetched.current) return;
     if (status?.status !== "ENABLED") return;
     hasFetched.current = true;
     void fetchSpans();
   }, [fetchSpans, status]);
-  useEffect7(() => {
+  useEffect6(() => {
     if (!hasFetched.current) return;
     void fetchSpans();
   }, [fetchSpans]);
-  const [selectedTraceId, setSelectedTraceId] = useState10();
-  const [selectedSpanId, setSelectedSpanId] = useState10();
+  const [selectedTraceId, setSelectedTraceId] = useState9();
+  const [selectedSpanId, setSelectedSpanId] = useState9();
   const navigateToSpan = useCallback5((span) => {
     setSelectedTraceId(span.trace_id);
     setSelectedSpanId(span.span_id);
@@ -4905,7 +4855,7 @@ var routes = {
 
 // src/context.tsx
 import { createContext as createContext2, useContext as useContext2 } from "react";
-import { useCallback as useCallback6, useMemo as useMemo8 } from "react";
+import { useCallback as useCallback6, useMemo as useMemo7 } from "react";
 
 // src/constants/error-messages.ts
 var ERROR_MESSAGES = {
@@ -5014,7 +4964,15 @@ var createApiClient = ({ localstackEndpoint }) => {
     },
     getSpans: async (request) => {
       const endpoint = buildSpansEndpoint(request);
-      return makeRequest({ endpoint, localstackEndpoint });
+      const response = await makeRequest({ endpoint, localstackEndpoint });
+      return {
+        ...response,
+        spans: response.spans.map((span) => ({
+          ...span,
+          endTime: unixNanoToDate(span.end_time_unix_nano),
+          startTime: unixNanoToDate(span.start_time_unix_nano)
+        }))
+      };
     },
     getStatus: async () => {
       return makeRequest({
@@ -5029,7 +4987,7 @@ var createApiClient = ({ localstackEndpoint }) => {
 import { jsx as jsx142 } from "react/jsx-runtime";
 var AppInspectorContext = createContext2(void 0);
 var AppInspectorContextProvider = (props) => {
-  const api = useMemo8(() => {
+  const api = useMemo7(() => {
     return false ? createApiClientMock() : createApiClient({ localstackEndpoint: props.localstackEndpoint });
   }, [props.localstackEndpoint]);
   const resolveLink = useCallback6(
@@ -5044,7 +5002,7 @@ var AppInspectorContextProvider = (props) => {
     },
     [props.routePrefix]
   );
-  const contextValue = useMemo8(
+  const contextValue = useMemo7(
     () => ({
       linkComponent: props.linkComponent,
       localstackEndpoint: props.localstackEndpoint,