@workflow/web 5.0.0-beta.17 → 5.0.0-beta.19

package/build/client/assets/{run-detail-D4mcR51B.js → run-detail-QryL_6ec.js}

@@ -1,6 +1,6 @@
 import { r as reactExports, j as jsxRuntimeExports, f as reactDomExports, G as ReactDOM, B as useNavigate, C as useSearchParams, A as Link, w as withComponentProps, H as useParams } from "./index-BXZSIDEp.js";
-import { q as Check, O as Copy, j as ChevronRight, o as ChevronDown, C as CircleAlert, Q as parseStepName, B as parseWorkflowName, U as ErrorCard, V as format, Z as Zap, S as Send, R as ResolveHookModal, Y as Circle, p as ChevronUp, X, N as ErrorBoundary, I as unwrapServerActionResult, u as unwrapOrThrow, W as WorkflowWebAPIError, _ as useEscapeKeydown, t as composeEventHandlers, $ as useCallbackRef, a0 as useLayoutEffect2, s as useControllableState, a1 as useId, a2 as createContext2, v as Presence, x as createContextScope, l as hideOthers, m as ReactRemoveScroll, a3 as useFocusGuards, a4 as LAYOUT, a5 as wakeUpRun, r as resumeHook, A as Alert, c as AlertTitle, d as AlertDescription, a as Skeleton$1, a6 as RunActionsButtons, F as StatusBadge, e as CopyableText, b as RelativeTime, T as Tabs, K as TabsList, L as TabsTrigger, M as TabsContent, y as cancelRun, a7 as recreateRun } from "./workflow-graph-viewer-BEhdopGj.js";
-import { c as createLucideIcon, N as cn, O as DataInspector, U as DecryptClickContext, W as Button, X as Spinner, Y as Lock, Z as RESERVED_ATTRIBUTE_KEY_PREFIX, _ as useHasContextCardProvider, $ as ContextCardProvider, a0 as ContextCardTrigger, g as useToast, a1 as Skeleton, a2 as Yr, a3 as isEncryptedMarker, a4 as formatDuration, a5 as _r, a6 as RunClickContext, a7 as StreamClickContext, a8 as isExpiredMarker, a9 as isDoStreamStep, aa as extractConversation, ab as hasEncryptedFields, ac as EVENT_DATA_REF_FIELDS, ad as useSidebarDataOptional, ae as clsx, af as useRowWindow, ag as isSpanDimmedBySearch, ah as ROW_HEIGHT_PX, ai as getSpanDurationMs, aj as formatDurationPrecise, ak as TooltipProvider, al as ActiveSpanProvider, am as useActiveSpan, an as useSidebarData, ao as searchSpans, ap as computeRootBounds, aq as computeTimeMarkers, ar as getHighResInMs, as as TIMELINE_PADDING_PX, at as Timeline, au as TimelineHeader, av as IconButton, aw as Tooltip, ax as TooltipTrigger, ay as TooltipContent, az as useReducedMotion, aA as SidebarDataProvider, aB as hydrateResourceIOWithKey, aC as hydrateResourceIO, aD as fetchHook, k as fetchEvents, G as fetchRun, aE as fetchStep, aF as fetchStreams, aG as Slot, F as useComposedRefs, aH as Slottable, d as cn$1, aI as buttonVariants, aJ as fetchEvent, aK as fetchEventsByCorrelationId, aL as isEncryptedData, aM as hydrateData, aN as getWebRevivers, T as Tooltip$1, a as TooltipTrigger$1, b as TooltipContent$1, aO as LIVE_UPDATE_INTERVAL_MS$1, u as useServerConfig, aP as getEncryptionKeyForRun, t as toast, L as LoaderCircle, aQ as StreamViewer } from "./mermaid-3ZIDBTTL-DQJ4rkIZ.js";
+import { q as Check, O as Copy, j as ChevronRight, o as ChevronDown, C as CircleAlert, Q as parseStepName, B as parseWorkflowName, U as ErrorCard, V as format, Z as Zap, S as Send, R as ResolveHookModal, Y as Circle, p as ChevronUp, X, N as ErrorBoundary, I as unwrapServerActionResult, u as unwrapOrThrow, W as WorkflowWebAPIError, _ as useEscapeKeydown, t as composeEventHandlers, $ as useCallbackRef, a0 as useLayoutEffect2, s as useControllableState, a1 as useId, a2 as createContext2, v as Presence, x as createContextScope, l as hideOthers, m as ReactRemoveScroll, a3 as useFocusGuards, a4 as LAYOUT, a5 as wakeUpRun, r as resumeHook, A as Alert, c as AlertTitle, d as AlertDescription, a as Skeleton$1, a6 as RunActionsButtons, F as StatusBadge, e as CopyableText, b as RelativeTime, T as Tabs, K as TabsList, L as TabsTrigger, M as TabsContent, y as cancelRun, a7 as recreateRun } from "./workflow-graph-viewer-DE9gHUqH.js";
+import { c as createLucideIcon, O as cn, U as DataInspector, W as DecryptClickContext, X as Button, Y as Spinner, Z as Lock, $ as RESERVED_ATTRIBUTE_KEY_PREFIX, a0 as ContextCardProvider, h as useToast, a1 as Skeleton, a2 as Yr, a3 as isEncryptedMarker, a4 as TimestampTooltip, a5 as formatDuration, a6 as _r, a7 as RunClickContext, a8 as StreamClickContext, a9 as isExpiredMarker, aa as isDoStreamStep, ab as extractConversation, ac as hasEncryptedFields, ad as EVENT_DATA_REF_FIELDS, ae as useSidebarDataOptional, af as clsx, ag as useRowWindow, ah as isSpanDimmedBySearch, ai as ROW_HEIGHT_PX, aj as getSpanDurationMs, ak as formatDurationPrecise, al as TooltipProvider, am as ActiveSpanProvider, an as useActiveSpan, ao as useSidebarData, ap as useReducedMotion, aq as searchSpans, ar as computeRootBounds, as as computeTimeMarkers, at as getHighResInMs, au as scrollRowIntoView, av as TIMELINE_PADDING_PX, aw as Timeline, ax as TimelineHeader, ay as IconButton, az as Tooltip, aA as TooltipTrigger, aB as TooltipContent, aC as SidebarDataProvider, aD as hydrateResourceIOWithKey, aE as hydrateResourceIO, aF as fetchHook, l as fetchEvents, H as fetchRun, aG as fetchStep, aH as fetchStreams, aI as Slot, G as useComposedRefs, aJ as Slottable, e as cn$1, aK as buttonVariants, aL as fetchEvent, aM as fetchEventsByCorrelationId, aN as isEncryptedData, aO as hydrateData, aP as getWebRevivers, T as Tooltip$1, a as TooltipTrigger$1, b as TooltipContent$1, aQ as LIVE_UPDATE_INTERVAL_MS$1, u as useServerConfig, aR as getEncryptionKeyForRun, t as toast, L as LoaderCircle, aS as StreamViewer } from "./mermaid-3ZIDBTTL-CO5WTIpO.js";
 import { decrypt, importKey } from "./encryption-g14N5vQl.js";
 import "./index-B6-SzLmT.js";
 /**
@@ -182,9 +182,7 @@ function ReservedBadge() {
 }
 function AttributeRow({ attributeKey, value, removed = false }) {
   const reserved = isReservedAttributeKey(attributeKey);
-  return jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-3 py-1.5", children: [jsxRuntimeExports.jsxs("span", { className: "flex min-w-0 items-center gap-1.5 text-label-12 font-mono", style: {
-    color: reserved ? "var(--ds-gray-700)" : "var(--ds-gray-900)"
-  }, children: [jsxRuntimeExports.jsx("span", { className: "truncate", children: attributeKey }), reserved && jsxRuntimeExports.jsx(ReservedBadge, {})] }), removed ? jsxRuntimeExports.jsx("span", { className: "shrink-0 text-label-12 italic", style: { color: "var(--ds-gray-700)" }, children: "removed" }) : jsxRuntimeExports.jsx("span", { className: "max-w-[60%] truncate text-right text-label-12 font-mono text-gray-1000", title: value, children: value })] });
+  return jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-3 py-0.5", children: [jsxRuntimeExports.jsxs("span", { className: "flex min-w-0 items-center gap-1.5 text-label-13 text-gray-900", style: reserved ? { color: "var(--ds-gray-700)" } : void 0, children: [jsxRuntimeExports.jsx("span", { className: "truncate", children: attributeKey }), reserved && jsxRuntimeExports.jsx(ReservedBadge, {})] }), removed ? jsxRuntimeExports.jsx("span", { className: "shrink-0 text-copy-13 italic text-gray-700", children: "removed" }) : jsxRuntimeExports.jsx("span", { className: "max-w-[60%] truncate text-copy-13 text-gray-1000", title: value, children: value })] });
 }
 function sortAttributeKeys(keys) {
   return [...keys].sort((a, b) => {
@@ -199,7 +197,7 @@ function RunAttributesCard({ attributes }) {
   const keys = sortAttributeKeys(Object.keys(attributes));
   if (keys.length === 0)
     return null;
-  return jsxRuntimeExports.jsx(DetailCard, { summary: `Attributes (${keys.length})`, defaultOpen: true, contentClassName: "mb-0", children: jsxRuntimeExports.jsx("div", { className: "flex flex-col divide-y divide-gray-alpha-400", children: keys.map((key) => jsxRuntimeExports.jsx(AttributeRow, { attributeKey: key, value: attributes[key] }, key)) }) });
+  return jsxRuntimeExports.jsx(DetailCard, { summary: "Attributes", defaultOpen: true, contentClassName: "mb-4", children: jsxRuntimeExports.jsx("div", { className: "flex flex-col", children: keys.map((key) => jsxRuntimeExports.jsx(AttributeRow, { attributeKey: key, value: attributes[key] }, key)) }) });
 }
 function isAttrSetEventData(data) {
   if (data === null || typeof data !== "object")
@@ -222,7 +220,7 @@ function AttrSetEventBlock({ data }) {
     return jsxRuntimeExports.jsx(CopyableDataBlock, { data });
   }
   const writerLabel = describeWriter(data.writer);
-  return jsxRuntimeExports.jsxs("div", { className: "flex flex-col px-3 py-1", children: [jsxRuntimeExports.jsx("div", { className: "flex flex-col divide-y divide-gray-alpha-400", children: data.changes.map((change, index) => jsxRuntimeExports.jsx(AttributeRow, { attributeKey: change.key, removed: change.value === null, value: change.value ?? void 0 }, `${change.key}:${index}`)) }), writerLabel && jsxRuntimeExports.jsx("div", { className: "border-t py-1.5 text-label-12", style: {
+  return jsxRuntimeExports.jsxs("div", { className: "flex flex-col px-3 py-1", children: [jsxRuntimeExports.jsx("div", { className: "flex flex-col", children: data.changes.map((change, index) => jsxRuntimeExports.jsx(AttributeRow, { attributeKey: change.key, removed: change.value === null, value: change.value ?? void 0 }, `${change.key}:${index}`)) }), writerLabel && jsxRuntimeExports.jsx("div", { className: "border-t py-1.5 text-label-12", style: {
     borderColor: "var(--ds-gray-alpha-400)",
     color: "var(--ds-gray-700)"
   }, children: writerLabel })] });
@@ -308,114 +306,6 @@ function MenuDropdown({ options, value, onChange }) {
     setOpen(false);
   }, children: option.label }, option.value)) })] });
 }
-const TIME_UNITS = [
-  { unit: "year", ms: 31536e6 },
-  { unit: "month", ms: 2628e6 },
-  { unit: "day", ms: 864e5 },
-  { unit: "hour", ms: 36e5 },
-  { unit: "minute", ms: 6e4 },
-  { unit: "second", ms: 1e3 }
-];
-function formatTimeDifference(diff) {
-  let remaining = Math.abs(diff);
-  const result = [];
-  for (const { unit, ms } of TIME_UNITS) {
-    const value = Math.floor(remaining / ms);
-    if (value > 0 || result.length > 0) {
-      result.push(`${value} ${unit}${value !== 1 ? "s" : ""}`);
-      remaining %= ms;
-    }
-    if (result.length === 3)
-      break;
-  }
-  return result.join(", ");
-}
-function useTimeAgo(date) {
-  const [timeAgo, setTimeAgo] = reactExports.useState("");
-  reactExports.useEffect(() => {
-    const updateTimeAgo = () => {
-      const diff = Date.now() - date;
-      const formattedDiff = formatTimeDifference(diff);
-      setTimeAgo(formattedDiff ? `${formattedDiff} ago` : "Just now");
-    };
-    updateTimeAgo();
-    const timer = setInterval(updateTimeAgo, 1e3);
-    return () => clearInterval(timer);
-  }, [date]);
-  return timeAgo;
-}
-function useShortTimeAgo(date) {
-  const [shortTimeAgo, setShortTimeAgo] = reactExports.useState("");
-  reactExports.useEffect(() => {
-    if (!date) {
-      setShortTimeAgo("");
-      return;
-    }
-    const updateShortTimeAgo = () => {
-      const diff = Date.now() - date;
-      const days = Math.floor(diff / (1e3 * 60 * 60 * 24));
-      const hours = Math.floor(diff / (1e3 * 60 * 60));
-      const minutes = Math.floor(diff / (1e3 * 60));
-      if (days > 0) {
-        setShortTimeAgo(`${days} day${days > 1 ? "s" : ""} ago`);
-      } else if (hours > 0) {
-        setShortTimeAgo(`${hours} hour${hours > 1 ? "s" : ""} ago`);
-      } else if (minutes > 0) {
-        setShortTimeAgo(`${minutes} minute${minutes > 1 ? "s" : ""} ago`);
-      } else {
-        setShortTimeAgo("Just now");
-      }
-    };
-    updateShortTimeAgo();
-    const timer = setInterval(updateShortTimeAgo, 6e4);
-    return () => clearInterval(timer);
-  }, [date]);
-  return shortTimeAgo;
-}
-function ZoneDateTimeRow({ date, zone }) {
-  var _a;
-  const dateObj = new Date(date);
-  const formattedZone = ((_a = new Intl.DateTimeFormat("en-US", {
-    timeZone: zone,
-    timeZoneName: "short"
-  }).formatToParts(dateObj).find((part) => part.type === "timeZoneName")) == null ? void 0 : _a.value) || zone;
-  const formattedDate = dateObj.toLocaleString("en-US", {
-    timeZone: zone,
-    year: "numeric",
-    month: "long",
-    day: "numeric"
-  });
-  const formattedTime = dateObj.toLocaleTimeString("en-US", {
-    timeZone: zone,
-    hour: "2-digit",
-    minute: "2-digit",
-    second: "2-digit"
-  });
-  return jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-3", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1.5", children: [jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-4 px-1.5 bg-gray-200 rounded-xs", children: jsxRuntimeExports.jsx("span", { className: "text-[12px] font-mono text-gray-900", children: formattedZone }) }), jsxRuntimeExports.jsx("span", { className: "text-[13px] text-gray-1000", children: formattedDate })] }), jsxRuntimeExports.jsx("span", { className: "tabular-nums text-[12px] font-mono text-gray-900", children: formattedTime })] });
-}
-function RelativeTimeContextCardContent({ date }) {
-  const localTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-  const timeAgo = useTimeAgo(date);
-  return jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-3 min-w-[300px]", children: [jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-3", children: jsxRuntimeExports.jsx("span", { className: "tabular-nums text-[13px] text-gray-900", children: timeAgo }) }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx(ZoneDateTimeRow, { date, zone: "UTC" }), jsxRuntimeExports.jsx(ZoneDateTimeRow, { date, zone: localTimezone })] })] });
-}
-function DefaultTimeText({ date }) {
-  const shortTimeAgo = useShortTimeAgo(date);
-  return jsxRuntimeExports.jsx("span", { className: "text-label-14 text-gray-900", children: shortTimeAgo });
-}
-function RelativeTimeCard({ date, children: _children, ...props }) {
-  const children = _children === void 0 ? jsxRuntimeExports.jsx(DefaultTimeText, { date }) : _children;
-  if (!date)
-    return children;
-  return jsxRuntimeExports.jsx(ContextCardTrigger, { content: jsxRuntimeExports.jsx(RelativeTimeContextCardContent, { date }), ...props, children });
-}
-function TimestampTooltip({ date, children, side = "top" }) {
-  const hasProvider = useHasContextCardProvider();
-  const ts = date == null ? null : typeof date === "number" ? date : new Date(date).getTime();
-  if (ts == null || Number.isNaN(ts))
-    return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children });
-  const card = jsxRuntimeExports.jsx(RelativeTimeCard, { date: ts, side, asChild: true, children });
-  return hasProvider ? card : jsxRuntimeExports.jsx(ContextCardProvider, { children: card });
-}
 const ERROR_EVENT_TYPES$1 = /* @__PURE__ */ new Set([
   "step_failed",
   "step_retrying",
@@ -2237,7 +2127,8 @@ const copyableBasicAttributes = /* @__PURE__ */ new Set([
   "stepId",
   "hookId",
   "eventId",
-  "deploymentId"
+  "deploymentId",
+  "moduleSpecifier"
 ]);
 const AttributeBlock = ({ attribute, value, isLoading, inline = false, context }) => {
   const decryptCtx = reactExports.useContext(DecryptClickContext);
@@ -2266,7 +2157,6 @@ const AttributeBlock = ({ attribute, value, isLoading, inline = false, context }
   return jsxRuntimeExports.jsxs("div", { className: "relative", children: [typeof isLoading === "boolean" && isLoading && jsxRuntimeExports.jsx("div", { className: "absolute top-9 right-4", children: jsxRuntimeExports.jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2", style: { borderColor: "var(--ds-gray-900)" } }) }), jsxRuntimeExports.jsxs("div", { className: "my-2 flex flex-col gap-0", children: [jsxRuntimeExports.jsx("span", { className: "text-label-14 text-gray-1000 font-medium first-letter:uppercase", children: attribute }), jsxRuntimeExports.jsx("span", { className: "text-xs", style: { color: "var(--ds-gray-1000)" }, children: displayValue })] }, attribute)] });
 };
 const AttributePanel = ({ data, moduleSpecifier, isLoading, error, expiredAt, onStreamClick, onRunClick, onDecrypt, isDecrypting = false, resource }) => {
-  const toast2 = useToast();
   const displayData = reactExports.useMemo(() => {
     const result = { ...data };
     const execCtx = data.executionContext;
@@ -2328,13 +2218,6 @@ const AttributePanel = ({ data, moduleSpecifier, isLoading, error, expiredAt, on
   const displayContext = reactExports.useMemo(() => ({
     stepName: displayData.stepName
   }), [displayData.stepName]);
-  const handleCopyModuleSpecifier = reactExports.useCallback((value) => {
-    navigator.clipboard.writeText(value).then(() => {
-      toast2.success("moduleSpecifier copied");
-    }).catch(() => {
-      toast2.error("Failed to copy moduleSpecifier");
-    });
-  }, []);
   const outerDecryptCtx = reactExports.useContext(DecryptClickContext);
   const decryptValue = onDecrypt ? {
     onDecrypt,
@@ -2344,17 +2227,8 @@ const AttributePanel = ({ data, moduleSpecifier, isLoading, error, expiredAt, on
   return jsxRuntimeExports.jsx(ContextCardProvider, { children: jsxRuntimeExports.jsx(RunClickContext.Provider, { value: onRunClick, children: jsxRuntimeExports.jsx(StreamClickContext.Provider, { value: onStreamClick, children: jsxRuntimeExports.jsxs(DecryptClickContext.Provider, { value: decryptValue, children: [visibleBasicAttributes.length > 0 && jsxRuntimeExports.jsxs("div", { className: "flex flex-col overflow-hidden divide-y divide-gray-alpha-400 mb-3", children: [orderedBasicAttributes.map((attribute) => {
     var _a;
     const displayValue = (_a = attributeToDisplayFn[attribute]) == null ? void 0 : _a.call(attributeToDisplayFn, displayData[attribute]);
-    const isModuleSpecifier = attribute === "moduleSpecifier";
     const isCopyableBasicAttribute = copyableBasicAttributes.has(attribute) && typeof displayValue === "string";
-    const moduleSpecifierValue = typeof displayValue === "string" ? displayValue : String(displayValue ?? displayData.moduleSpecifier ?? "");
-    return jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between py-2", children: [jsxRuntimeExports.jsx("span", { className: "text-label-14 text-gray-900", children: getAttributeDisplayName(attribute) }), isModuleSpecifier ? jsxRuntimeExports.jsx("button", { type: "button", className: "min-w-0 max-w-[70%] truncate text-right text-label-13 font-mono", style: {
-      color: "var(--ds-gray-1000)",
-      background: "transparent",
-      border: "none",
-      padding: 0
-    }, title: moduleSpecifierValue, onClick: () => handleCopyModuleSpecifier(moduleSpecifierValue), children: moduleSpecifierValue }) : isCopyableBasicAttribute ? jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 max-w-[70%] items-center justify-end gap-1 text-right text-[13px] font-mono", style: {
-      color: "var(--ds-gray-1000)"
-    }, title: displayValue, children: [jsxRuntimeExports.jsx(MiddleTruncate, { value: displayValue, className: "flex-1" }), jsxRuntimeExports.jsx(CopyButton, { copyText: displayValue, ariaLabel: `Copy ${getAttributeDisplayName(attribute)}`, className: "shrink-0 -mr-1" })] }) : jsxRuntimeExports.jsx("span", { className: "text-right text-label-13 font-mono", children: displayValue })] }, attribute);
+    return jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between py-2", children: [jsxRuntimeExports.jsx("span", { className: "text-label-14 text-gray-900", children: getAttributeDisplayName(attribute) }), isCopyableBasicAttribute ? jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 max-w-[70%] items-center justify-end gap-1 text-[13px] font-mono text-gray-1000", title: displayValue, children: [jsxRuntimeExports.jsx(MiddleTruncate, { value: displayValue, className: "text-right", style: { gridTemplateColumns: "minmax(0, 1fr)" } }), jsxRuntimeExports.jsx(CopyButton, { copyText: displayValue, ariaLabel: `Copy ${getAttributeDisplayName(attribute)}`, className: "shrink-0 -mr-1" })] }) : jsxRuntimeExports.jsx("span", { className: "text-right text-label-13 font-mono", children: displayValue })] }, attribute);
   }), isLoading && resource === "sleep" && !displayData.resumeAt && jsxRuntimeExports.jsx("div", { className: "py-1", children: jsxRuntimeExports.jsxs("div", { className: "flex min-h-[32px] items-center justify-between gap-4 rounded-sm px-2.5 py-1", children: [jsxRuntimeExports.jsx("span", { className: "text-[14px] first-letter:uppercase", style: { color: "var(--ds-gray-700)" }, children: "resumeAt" }), jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-[55%]" })] }) })] }), error ? jsxRuntimeExports.jsx(ErrorCard, { title: "Failed to load resource details", details: error.message, className: "my-4" }) : hasExpired ? jsxRuntimeExports.jsx(ExpiredDataMessage, {}) : resolvedAttributes.length > 0 ? jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: resolvedAttributes.map((attribute) => jsxRuntimeExports.jsx(AttributeBlock, { isLoading, attribute, value: displayData[attribute], context: displayContext }, attribute)) }) : null] }) }) }) });
 };
 const ERROR_EVENT_TYPES = /* @__PURE__ */ new Set(["step_failed", "step_retrying"]);
@@ -2902,6 +2776,7 @@ function SplitPane({ children, className, defaultStartWidth = DEFAULT_START_PX,
   return jsxRuntimeExports.jsxs("div", { ref: setContainerRef, className: cn("grid h-full min-h-0 content-start overflow-x-hidden overflow-y-auto", isDragging && "select-none", className), style: { gridTemplateColumns: colTemplate, height: "100%" }, children: [start, gutter, end] });
 }
 const MIN_VIEWPORT_MS = 1e-3;
+const ZOOM_DEBOUNCE_MS = 150;
 function useAnimatedViewport(initial) {
   const [viewport, setViewportState] = reactExports.useState(initial);
   const animRef = reactExports.useRef(null);
@@ -2978,6 +2853,7 @@ function NewTraceViewerContent({ trace, onLoadMore, hasMore, isLoadingMore }) {
   const { activeSpan, activeSpanId, setActiveSpan, clearActiveSpan } = useActiveSpan();
   const sidebar = useSidebarData();
   const selectedSpan = useSelectedSpanInfo();
+  const reducedMotion = useReducedMotion();
   const [searchQuery, setSearchQuery] = reactExports.useState("");
   const deferredSearchQuery = reactExports.useDeferredValue(searchQuery);
   const searchResult = reactExports.useMemo(() => searchSpans(trace.spans, deferredSearchQuery), [trace.spans, deferredSearchQuery]);
@@ -3013,10 +2889,29 @@ function NewTraceViewerContent({ trace, onLoadMore, hasMore, isLoadingMore }) {
     prevRootRef.current = { start: newStart, end: newEnd };
   }, [root.startTime, root.duration, setViewport]);
   const viewDuration = viewport.end - viewport.start;
+  const viewportRef = reactExports.useRef(viewport);
+  viewportRef.current = viewport;
   const timeMarkers = reactExports.useMemo(() => computeTimeMarkers(viewDuration, viewport.start - root.startTime), [viewDuration, viewport.start, root.startTime]);
   const resetZoom = reactExports.useCallback(() => {
     animateTo({ start: root.startTime, end: root.startTime + root.duration });
   }, [animateTo, root.startTime, root.duration]);
+  const handleRevealTime = reactExports.useCallback((timeMs) => {
+    const rootS = root.startTime;
+    const rootE = root.startTime + root.duration;
+    const { start, end } = viewportRef.current;
+    const duration = end - start;
+    let newStart = timeMs - duration / 2;
+    let newEnd = timeMs + duration / 2;
+    if (newStart < rootS) {
+      newStart = rootS;
+      newEnd = rootS + duration;
+    }
+    if (newEnd > rootE) {
+      newEnd = rootE;
+      newStart = Math.max(rootS, rootE - duration);
+    }
+    animateTo({ start: newStart, end: newEnd });
+  }, [animateTo, root.startTime, root.duration]);
   const ZOOM_FACTOR = 0.5;
   const zoomBy = reactExports.useCallback((factor) => {
     const rootS = root.startTime;
@@ -3041,12 +2936,7 @@ function NewTraceViewerContent({ trace, onLoadMore, hasMore, isLoadingMore }) {
   }, [setViewport, root.startTime, root.duration]);
   const zoomIn = reactExports.useCallback(() => zoomBy(ZOOM_FACTOR), [zoomBy]);
   const zoomOut = reactExports.useCallback(() => zoomBy(1 / ZOOM_FACTOR), [zoomBy]);
-  const handleSelectSpan = reactExports.useCallback((spanId) => {
-    if (spanId === activeSpanId) {
-      clearActiveSpan();
-      return;
-    }
-    setActiveSpan(spanId);
+  const focusViewportOnSpan = reactExports.useCallback((spanId) => {
     const span = trace.spans.find((s) => s.spanId === spanId);
     if (!span)
       return;
@@ -3079,15 +2969,53 @@ function NewTraceViewerContent({ trace, onLoadMore, hasMore, isLoadingMore }) {
       newStart = Math.max(rootS, rootE - duration);
     }
     animateTo({ start: newStart, end: newEnd });
+  }, [animateTo, trace.spans, root.startTime, root.duration]);
+  const scrollSpanIntoView = reactExports.useCallback((spanId) => {
+    var _a;
+    const index = trace.spans.findIndex((s) => s.spanId === spanId);
+    if (index === -1)
+      return;
+    const list = ((_a = scrollContainerRef.current) == null ? void 0 : _a.querySelector("#event-list")) ?? null;
+    scrollRowIntoView(list, index, ROW_HEIGHT_PX, {
+      behavior: reducedMotion ? "auto" : "smooth"
+    });
+  }, [trace.spans, reducedMotion]);
+  const zoomTimerRef = reactExports.useRef(null);
+  const cancelPendingZoom = reactExports.useCallback(() => {
+    if (zoomTimerRef.current !== null) {
+      clearTimeout(zoomTimerRef.current);
+      zoomTimerRef.current = null;
+    }
+  }, []);
+  reactExports.useEffect(() => cancelPendingZoom, [cancelPendingZoom]);
+  const handleClearActiveSpan = reactExports.useCallback(() => {
+    cancelPendingZoom();
+    clearActiveSpan();
+  }, [cancelPendingZoom, clearActiveSpan]);
+  const handleSelectSpan = reactExports.useCallback((spanId) => {
+    cancelPendingZoom();
+    if (spanId === activeSpanId) {
+      clearActiveSpan();
+      return;
+    }
+    setActiveSpan(spanId);
+    focusViewportOnSpan(spanId);
   }, [
-    animateTo,
-    setActiveSpan,
-    clearActiveSpan,
+    cancelPendingZoom,
     activeSpanId,
-    trace.spans,
-    root.startTime,
-    root.duration
+    clearActiveSpan,
+    setActiveSpan,
+    focusViewportOnSpan
   ]);
+  const navigateToSpan = reactExports.useCallback((spanId) => {
+    setActiveSpan(spanId);
+    scrollSpanIntoView(spanId);
+    cancelPendingZoom();
+    zoomTimerRef.current = setTimeout(() => {
+      zoomTimerRef.current = null;
+      focusViewportOnSpan(spanId);
+    }, ZOOM_DEBOUNCE_MS);
+  }, [setActiveSpan, scrollSpanIntoView, cancelPendingZoom, focusViewportOnSpan]);
   const [altHeld, setAltHeld] = reactExports.useState(false);
   reactExports.useEffect(() => {
     const handleSidebarNavKey = (e) => {
@@ -3098,12 +3026,12 @@ function NewTraceViewerContent({ trace, onLoadMore, hasMore, isLoadingMore }) {
       const targetId = e.key === "k" ? prevSpanIdRef.current : nextSpanIdRef.current;
       if (targetId) {
         e.preventDefault();
-        handleSelectSpanRef.current(targetId);
+        navigateToSpanRef.current(targetId);
       }
     };
     const onKeyDown = (e) => {
       if (e.key === "Escape") {
-        clearActiveSpan();
+        handleClearActiveSpan();
       } else if (e.key === "Alt") {
         e.preventDefault();
         setAltHeld(true);
@@ -3124,7 +3052,7 @@ function NewTraceViewerContent({ trace, onLoadMore, hasMore, isLoadingMore }) {
       window.removeEventListener("keyup", onKeyUp);
       window.removeEventListener("blur", onBlur);
     };
-  }, [clearActiveSpan]);
+  }, [handleClearActiveSpan]);
   const timelineRef = reactExports.useRef(null);
   const [hoverFraction, setHoverFraction] = reactExports.useState(null);
   const hoverInfo = reactExports.useMemo(() => {
@@ -3240,25 +3168,25 @@ function NewTraceViewerContent({ trace, onLoadMore, hasMore, isLoadingMore }) {
   }, [activeSpanId, trace.spans]);
   const handleSelectPrevSpan = reactExports.useCallback(() => {
     if (prevSpanId)
-      handleSelectSpan(prevSpanId);
-  }, [prevSpanId, handleSelectSpan]);
+      navigateToSpan(prevSpanId);
+  }, [prevSpanId, navigateToSpan]);
   const handleSelectNextSpan = reactExports.useCallback(() => {
     if (nextSpanId)
-      handleSelectSpan(nextSpanId);
-  }, [nextSpanId, handleSelectSpan]);
+      navigateToSpan(nextSpanId);
+  }, [nextSpanId, navigateToSpan]);
   const prevSpanIdRef = reactExports.useRef(prevSpanId);
   const nextSpanIdRef = reactExports.useRef(nextSpanId);
-  const handleSelectSpanRef = reactExports.useRef(handleSelectSpan);
+  const navigateToSpanRef = reactExports.useRef(navigateToSpan);
   prevSpanIdRef.current = prevSpanId;
   nextSpanIdRef.current = nextSpanId;
-  handleSelectSpanRef.current = handleSelectSpan;
+  navigateToSpanRef.current = navigateToSpan;
   return jsxRuntimeExports.jsxs("div", { "data-pane": "pane-root", "data-has-detail": activeSpan ? "" : void 0, className: "grid w-full h-full max-h-full grid-cols-[minmax(100px,1fr)] data-[has-detail]:grid-cols-[minmax(100px,1fr)_clamp(280px,360px,100%)]", children: [jsxRuntimeExports.jsxs("div", { id: "trace-parent", className: "grid grid-rows-[1fr] h-full min-h-0 overflow-hidden relative bg-background-100", children: [jsxRuntimeExports.jsxs(SplitPane, { scrollContainerRef, startHeader: jsxRuntimeExports.jsxs("div", { className: "bg-background-100 border-b border-gray-alpha-400 h-10 min-h-10 flex items-center pl-4 pr-2 gap-1.5", children: [jsxRuntimeExports.jsx(Search, { className: "w-3.5 h-3.5 shrink-0 text-gray-800" }), jsxRuntimeExports.jsx("input", { id: "trace-viewer-search", name: "trace-viewer-search", type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), onKeyDown: (e) => {
     if (e.key === "Escape" && searchQuery) {
       e.preventDefault();
       e.stopPropagation();
       setSearchQuery("");
     }
-  }, placeholder: "Search spans...", "aria-label": "Search spans", className: "flex-1 min-w-0 bg-transparent text-sm text-gray-1000 placeholder:text-gray-800 outline-none" }), searchQuery && jsxRuntimeExports.jsx("button", { type: "button", "aria-label": "Clear search", onClick: () => setSearchQuery(""), className: "-mr-2 hidden h-full max-w-full shrink-0 cursor-pointer items-center rounded-r-md border-0 bg-transparent px-2.5 font-inherit text-base text-gray-900 no-underline transition-colors duration-150 ease-in hover:text-gray-1000 focus-visible:-outline-offset-1 focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--ds-focus-color)] min-[961px]:flex", children: jsxRuntimeExports.jsx("kbd", { className: "inline-flex h-5 min-h-5 min-w-5 items-center justify-center rounded border border-gray-alpha-400 bg-background-100 px-1 font-sans text-[13px] font-medium leading-[1.7em] text-gray-900", children: "Esc" }) })] }), endHeader: jsxRuntimeExports.jsx(TimelineHeader, { markers: timeMarkers, hoverInfo }), children: [jsxRuntimeExports.jsxs("div", { className: "block overflow-visible", children: [jsxRuntimeExports.jsx(EventList, { spans: trace.spans, activeSpanId, searchResult, onSelectSpan: handleSelectSpan }), jsxRuntimeExports.jsx("div", { ref: loadMoreSentinelRef, className: "flex justify-center", children: isLoadingMore ? jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center gap-2 py-3 text-sm text-gray-800", children: [jsxRuntimeExports.jsx(Spinner, { size: 14 }), jsxRuntimeExports.jsx("span", { children: "Loading spans…" })] }) : null })] }), jsxRuntimeExports.jsx("div", { ref: timelineRef, className: "block min-h-0 overflow-visible relative", onDoubleClick: resetZoom, onMouseMove: handleTimelineMouseMove, onMouseLeave: handleTimelineMouseLeave, children: jsxRuntimeExports.jsx(Timeline, { spans: trace.spans, viewStart: viewport.start, viewEnd: viewport.end, markers: timeMarkers, selectedId: activeSpanId, searchResult, onSelect: handleSelectSpan, hoverFraction, altHeld }) })] }), jsxRuntimeExports.jsxs("div", { className: "absolute right-3 bottom-3 z-[5] flex items-center border border-gray-alpha-400 rounded-md bg-background-100 shadow-sm overflow-hidden divide-x divide-gray-alpha-400", children: [jsxRuntimeExports.jsx(IconButton, { variant: "muted", size: "small", onClick: zoomOut, "aria-label": "Zoom out", children: jsxRuntimeExports.jsx(ZoomOut, { className: "w-4 h-4" }) }), jsxRuntimeExports.jsx(IconButton, { variant: "muted", size: "small", onClick: resetZoom, "aria-label": "Reset zoom", children: jsxRuntimeExports.jsx(RotateCcw, { className: "w-3.5 h-3.5" }) }), jsxRuntimeExports.jsx(IconButton, { variant: "muted", size: "small", onClick: zoomIn, "aria-label": "Zoom in", children: jsxRuntimeExports.jsx(ZoomIn, { className: "w-4 h-4" }) })] })] }), activeSpan ? jsxRuntimeExports.jsxs("aside", { className: "flex flex-col h-full max-h-full bg-background-100 border-l border-gray-alpha-400 overflow-auto", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-2 shrink-0 px-4 pt-3 pb-3", children: [jsxRuntimeExports.jsx("span", { className: "text-label-14 font-medium text-gray-1000 truncate block", children: selectedSpanName }), jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-0.5 shrink-0", children: [jsxRuntimeExports.jsxs(Tooltip, { children: [jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: jsxRuntimeExports.jsx(IconButton, { "aria-label": "Navigate up", "aria-keyshortcuts": "K", onClick: handleSelectPrevSpan, disabled: !prevSpanId, children: jsxRuntimeExports.jsx(ChevronUp, { className: "w-4 h-4" }) }) }), prevSpanId ? jsxRuntimeExports.jsxs(TooltipContent, { children: ["Navigate up", jsxRuntimeExports.jsx(Kbd, { children: "K" })] }) : null] }), jsxRuntimeExports.jsxs(Tooltip, { children: [jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: jsxRuntimeExports.jsx(IconButton, { "aria-label": "Navigate down", "aria-keyshortcuts": "J", onClick: handleSelectNextSpan, disabled: !nextSpanId, children: jsxRuntimeExports.jsx(ChevronDown, { className: "w-4 h-4" }) }) }), nextSpanId ? jsxRuntimeExports.jsxs(TooltipContent, { children: ["Navigate down", jsxRuntimeExports.jsx(Kbd, { children: "J" })] }) : null] }), jsxRuntimeExports.jsx("div", { "aria-hidden": true, className: "w-px h-4 bg-gray-alpha-400 mx-1" }), jsxRuntimeExports.jsx(IconButton, { "aria-label": "Close span details", "aria-keyshortcuts": "Escape", onClick: clearActiveSpan, children: jsxRuntimeExports.jsx(X, { className: "w-4 h-4" }) })] })] }), jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto", children: jsxRuntimeExports.jsx(ErrorBoundary, { children: jsxRuntimeExports.jsx(EntityDetailPanel, { run: sidebar.run, onStreamClick: sidebar.onStreamClick, onRunClick: sidebar.onRunClick, spanDetailData: sidebar.spanDetailData, spanDetailError: sidebar.spanDetailError, spanDetailLoading: sidebar.spanDetailLoading, onSpanSelect: sidebar.onSpanSelect, onWakeUpSleep: sidebar.onWakeUpSleep, onLoadEventData: sidebar.onLoadEventData, onResolveHook: sidebar.onResolveHook, encryptionKey: sidebar.encryptionKey, onDecrypt: sidebar.onDecrypt, isDecrypting: sidebar.isDecrypting, selectedSpan }) }) })] }) : null] });
+  }, placeholder: "Search spans...", "aria-label": "Search spans", className: "flex-1 min-w-0 bg-transparent text-sm text-gray-1000 placeholder:text-gray-800 outline-none" }), searchQuery && jsxRuntimeExports.jsx("button", { type: "button", "aria-label": "Clear search", onClick: () => setSearchQuery(""), className: "-mr-2 hidden h-full max-w-full shrink-0 cursor-pointer items-center rounded-r-md border-0 bg-transparent px-2.5 font-inherit text-base text-gray-900 no-underline transition-colors duration-150 ease-in hover:text-gray-1000 focus-visible:-outline-offset-1 focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--ds-focus-color)] min-[961px]:flex", children: jsxRuntimeExports.jsx("kbd", { className: "inline-flex h-5 min-h-5 min-w-5 items-center justify-center rounded border border-gray-alpha-400 bg-background-100 px-1 font-sans text-[13px] font-medium leading-[1.7em] text-gray-900", children: "Esc" }) })] }), endHeader: jsxRuntimeExports.jsx(TimelineHeader, { markers: timeMarkers, hoverInfo }), children: [jsxRuntimeExports.jsxs("div", { className: "block overflow-visible", children: [jsxRuntimeExports.jsx(EventList, { spans: trace.spans, activeSpanId, searchResult, onSelectSpan: handleSelectSpan }), jsxRuntimeExports.jsx("div", { ref: loadMoreSentinelRef, className: "flex justify-center", children: isLoadingMore ? jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center gap-2 py-3 text-sm text-gray-800", children: [jsxRuntimeExports.jsx(Spinner, { size: 14 }), jsxRuntimeExports.jsx("span", { children: "Loading spans…" })] }) : null })] }), jsxRuntimeExports.jsx("div", { ref: timelineRef, className: "block min-h-0 overflow-visible relative", onDoubleClick: resetZoom, onMouseMove: handleTimelineMouseMove, onMouseLeave: handleTimelineMouseLeave, children: jsxRuntimeExports.jsx(Timeline, { spans: trace.spans, viewStart: viewport.start, viewEnd: viewport.end, markers: timeMarkers, selectedId: activeSpanId, searchResult, onSelect: handleSelectSpan, onRevealTime: handleRevealTime, hoverFraction, altHeld }) })] }), jsxRuntimeExports.jsxs("div", { className: "absolute right-3 bottom-3 z-[5] flex items-center border border-gray-alpha-400 rounded-md bg-background-100 shadow-sm overflow-hidden divide-x divide-gray-alpha-400", children: [jsxRuntimeExports.jsx(IconButton, { variant: "muted", size: "small", onClick: zoomOut, "aria-label": "Zoom out", children: jsxRuntimeExports.jsx(ZoomOut, { className: "w-4 h-4" }) }), jsxRuntimeExports.jsx(IconButton, { variant: "muted", size: "small", onClick: resetZoom, "aria-label": "Reset zoom", children: jsxRuntimeExports.jsx(RotateCcw, { className: "w-3.5 h-3.5" }) }), jsxRuntimeExports.jsx(IconButton, { variant: "muted", size: "small", onClick: zoomIn, "aria-label": "Zoom in", children: jsxRuntimeExports.jsx(ZoomIn, { className: "w-4 h-4" }) })] })] }), activeSpan ? jsxRuntimeExports.jsxs("aside", { className: "flex flex-col h-full max-h-full bg-background-100 border-l border-gray-alpha-400 overflow-auto", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-2 shrink-0 px-4 pt-3 pb-3", children: [jsxRuntimeExports.jsx("span", { className: "text-label-14 font-medium text-gray-1000 truncate block", children: selectedSpanName }), jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-0.5 shrink-0", children: [jsxRuntimeExports.jsxs(Tooltip, { children: [jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: jsxRuntimeExports.jsx(IconButton, { "aria-label": "Navigate up", "aria-keyshortcuts": "K", onClick: handleSelectPrevSpan, disabled: !prevSpanId, children: jsxRuntimeExports.jsx(ChevronUp, { className: "w-4 h-4" }) }) }), prevSpanId ? jsxRuntimeExports.jsxs(TooltipContent, { children: ["Navigate up", jsxRuntimeExports.jsx(Kbd, { children: "K" })] }) : null] }), jsxRuntimeExports.jsxs(Tooltip, { children: [jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: jsxRuntimeExports.jsx(IconButton, { "aria-label": "Navigate down", "aria-keyshortcuts": "J", onClick: handleSelectNextSpan, disabled: !nextSpanId, children: jsxRuntimeExports.jsx(ChevronDown, { className: "w-4 h-4" }) }) }), nextSpanId ? jsxRuntimeExports.jsxs(TooltipContent, { children: ["Navigate down", jsxRuntimeExports.jsx(Kbd, { children: "J" })] }) : null] }), jsxRuntimeExports.jsx("div", { "aria-hidden": true, className: "w-px h-4 bg-gray-alpha-400 mx-1" }), jsxRuntimeExports.jsx(IconButton, { "aria-label": "Close span details", "aria-keyshortcuts": "Escape", onClick: handleClearActiveSpan, children: jsxRuntimeExports.jsx(X, { className: "w-4 h-4" }) })] })] }), jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto", children: jsxRuntimeExports.jsx(ErrorBoundary, { children: jsxRuntimeExports.jsx(EntityDetailPanel, { run: sidebar.run, onStreamClick: sidebar.onStreamClick, onRunClick: sidebar.onRunClick, spanDetailData: sidebar.spanDetailData, spanDetailError: sidebar.spanDetailError, spanDetailLoading: sidebar.spanDetailLoading, onSpanSelect: sidebar.onSpanSelect, onWakeUpSleep: sidebar.onWakeUpSleep, onLoadEventData: sidebar.onLoadEventData, onResolveHook: sidebar.onResolveHook, encryptionKey: sidebar.encryptionKey, onDecrypt: sidebar.onDecrypt, isDecrypting: sidebar.isDecrypting, selectedSpan }) }) })] }) : null] });
 }
 const NewTraceViewer = ({ run, events, sidebarData, onLoadMore, hasMore, isLoadingMore, loading = false }) => {
   const trace = reactExports.useMemo(() => {