@workflow/web 5.0.0-beta.27 → 5.0.0-beta.29

package/build/client/assets/{mermaid-3ZIDBTTL-aixonSAh.js → mermaid-3ZIDBTTL-BfwKRFTU.js}

@@ -1,9 +1,9 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/encryption-BQTnudEZ.js","assets/index-ConSkUmc.js","assets/index-BXZSIDEp.js","assets/zstd-browser-decoder-RyHgsNO3.js","assets/highlighted-body-B3W2YXNL-B-EF8R0t.js"])))=>i.map(i=>d[i]);
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/encryption-CLVP4klT.js","assets/index-STTN0-2V.js","assets/index-Q81MFBxC.js","assets/zstd-browser-decoder-bX851D8O.js","assets/highlighted-body-B3W2YXNL-_4bJAUnT.js"])))=>i.map(i=>d[i]);
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 var _a2, _b;
-import { r as reactExports, j as jsxRuntimeExports, f as reactDomExports, I as React, G as ReactDOM, R as ReactExports, g as getDefaultExportFromCjs } from "./index-BXZSIDEp.js";
+import { r as reactExports, j as jsxRuntimeExports, p as reactDomExports, I as React, G as ReactDOM, R as ReactExports, g as getDefaultExportFromCjs } from "./index-Q81MFBxC.js";
 function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
   return function handleEvent(event) {
     originalEventHandler == null ? void 0 : originalEventHandler(event);
@@ -10542,7 +10542,7 @@ async function hydrateDataWithKey(value, revivers, key) {
   let data = value;
   if (data instanceof Uint8Array && isEncryptedData(data) && key) {
     const { decrypt } = await __vitePreload(async () => {
-      const { decrypt: decrypt2 } = await import("./encryption-BQTnudEZ.js");
+      const { decrypt: decrypt2 } = await import("./encryption-CLVP4klT.js");
       return { decrypt: decrypt2 };
     }, true ? __vite__mapDeps([0,1,2]) : void 0);
     const { payload } = decodeFormatPrefix(data);
@@ -15504,6 +15504,22 @@ const BaseEventSchema = object({
   correlationId: string$2().optional(),
   specVersion: number$3().optional()
 });
+const stepLatencyTelemetryFields = {
+  // Time-to-first-step: milliseconds from run creation until the run's first
+  // step body began executing, minus time spent committing hook_created
+  // events. Only reported when nothing else (hooks received, waits,
+  // attributes, other steps) happened before the first step.
+  ttfs: number$3().optional(),
+  // Step-to-step overhead: milliseconds between the previous step's terminal
+  // event and this step's body beginning to execute. Only reported when the
+  // two steps ran back-to-back (the previous event-log entry is a
+  // step_completed/step_failed).
+  stso: number$3().optional(),
+  // Names of the runtime's optional startup-latency optimizations that were
+  // active for this measurement (e.g. 'turbo', 'lazyStepStart',
+  // 'optimisticStart'), so latency metrics can be segmented by them.
+  optimizations: array(string$2()).optional()
+};
 const StepCompletedEventSchema = BaseEventSchema.extend({
   eventType: literal("step_completed"),
   correlationId: string$2(),
@@ -15513,7 +15529,8 @@ const StepCompletedEventSchema = BaseEventSchema.extend({
     // the key without an extra run lookup on this hot per-step write.
     // Optional: older runtimes omit it and the backend falls back to a read.
     workflowName: string$2().optional(),
-    result: SerializedDataSchema
+    result: SerializedDataSchema,
+    ...stepLatencyTelemetryFields
   })
 });
 const StepFailedEventSchema = BaseEventSchema.extend({
@@ -15523,7 +15540,8 @@ const StepFailedEventSchema = BaseEventSchema.extend({
     stepName: string$2().optional(),
     // The thrown value, serialized via the workflow serialization pipeline.
     // Can be any JavaScript value (string, number, object, Error, etc.)
-    error: SerializedDataSchema
+    error: SerializedDataSchema,
+    ...stepLatencyTelemetryFields
   })
 });
 const StepRetryingEventSchema = BaseEventSchema.extend({
@@ -15670,7 +15688,13 @@ const RunFailedEventSchema = BaseEventSchema.extend({
   })
 });
 const RunCancelledEventSchema = BaseEventSchema.extend({
-  eventType: literal("run_cancelled")
+  eventType: literal("run_cancelled"),
+  eventData: object({
+    // Optional free-text reason for the cancellation. Kept as small
+    // plaintext metadata (like run_failed's errorCode) so it survives
+    // resolveData: 'none' and can be displayed without decryption.
+    cancelReason: string$2().max(512).optional()
+  }).optional()
 });
 discriminatedUnion("eventType", [
   // Run lifecycle events
@@ -16375,12 +16399,12 @@ async function hydrateResourceIOAsync(resource, key) {
     return { hydrateDataWithKey: hydrateDataWithKey3 };
   }, true ? void 0 : void 0);
   const { ensureZstdDecoderRegistered } = await __vitePreload(async () => {
-    const { ensureZstdDecoderRegistered: ensureZstdDecoderRegistered2 } = await import("./zstd-browser-decoder-RyHgsNO3.js");
+    const { ensureZstdDecoderRegistered: ensureZstdDecoderRegistered2 } = await import("./zstd-browser-decoder-bX851D8O.js");
     return { ensureZstdDecoderRegistered: ensureZstdDecoderRegistered2 };
   }, true ? __vite__mapDeps([3,2]) : void 0);
   ensureZstdDecoderRegistered();
   const cryptoKey = key ? await __vitePreload(async () => {
-    const { importKey } = await import("./encryption-BQTnudEZ.js");
+    const { importKey } = await import("./encryption-CLVP4klT.js");
     return { importKey };
   }, true ? __vite__mapDeps([0,1,2]) : void 0).then(({ importKey }) => importKey(key)) : void 0;
   const revivers = getRevivers();
@@ -17522,26 +17546,26 @@ const ToastContext = reactExports.createContext(defaultAdapter);
 function useToast() {
   return reactExports.useContext(ToastContext);
 }
-const MS_IN_SECOND = 1e3;
-const MS_IN_MINUTE = 60 * MS_IN_SECOND;
+const MS_IN_SECOND$1 = 1e3;
+const MS_IN_MINUTE = 60 * MS_IN_SECOND$1;
 const MS_IN_HOUR = 60 * MS_IN_MINUTE;
 const MS_IN_DAY = 24 * MS_IN_HOUR;
 function formatDuration(ms, compact = false) {
   if (ms === 0) {
     return "0s";
   }
-  if (ms < MS_IN_SECOND) {
+  if (ms < MS_IN_SECOND$1) {
     const roundedMs2 = Math.round(ms);
-    return roundedMs2 < MS_IN_SECOND ? `${roundedMs2}ms` : "1s";
+    return roundedMs2 < MS_IN_SECOND$1 ? `${roundedMs2}ms` : "1s";
   }
-  const roundedMs = Math.round(ms / MS_IN_SECOND) * MS_IN_SECOND;
+  const roundedMs = Math.round(ms / MS_IN_SECOND$1) * MS_IN_SECOND$1;
   if (roundedMs < MS_IN_MINUTE) {
-    return `${Math.floor(roundedMs / MS_IN_SECOND)}s`;
+    return `${Math.floor(roundedMs / MS_IN_SECOND$1)}s`;
   }
   if (compact) {
     if (roundedMs < MS_IN_HOUR) {
       const m3 = Math.floor(roundedMs / MS_IN_MINUTE);
-      const s2 = Math.floor(roundedMs % MS_IN_MINUTE / MS_IN_SECOND);
+      const s2 = Math.floor(roundedMs % MS_IN_MINUTE / MS_IN_SECOND$1);
       return s2 > 0 ? `${m3}m ${s2}s` : `${m3}m`;
     }
     const h2 = Math.floor(roundedMs / MS_IN_HOUR);
@@ -17551,7 +17575,7 @@ function formatDuration(ms, compact = false) {
   const days = Math.floor(roundedMs / MS_IN_DAY);
   const hours = Math.floor(roundedMs % MS_IN_DAY / MS_IN_HOUR);
   const minutes = Math.floor(roundedMs % MS_IN_HOUR / MS_IN_MINUTE);
-  const seconds = Math.floor(roundedMs % MS_IN_MINUTE / MS_IN_SECOND);
+  const seconds = Math.floor(roundedMs % MS_IN_MINUTE / MS_IN_SECOND$1);
   const parts = [];
   if (days > 0) {
     parts.push(`${days}d`);
@@ -17565,28 +17589,25 @@ function formatDuration(ms, compact = false) {
   parts.push(`${seconds}s`);
   return parts.join(" ");
 }
-const preciseSecondsFormatter = new Intl.NumberFormat(void 0, {
-  minimumFractionDigits: 2,
-  maximumFractionDigits: 2
-});
-function formatDurationPrecise(ms) {
+function formatDurationPrecise(ms, fractionDigits = 2) {
   if (ms === 0) {
     return "0s";
   }
-  if (ms < MS_IN_SECOND) {
+  if (ms < MS_IN_SECOND$1) {
     const roundedMs = Math.round(ms);
-    if (roundedMs < MS_IN_SECOND) {
+    if (roundedMs < MS_IN_SECOND$1) {
       return `${roundedMs}ms`;
     }
   }
-  const normalizedMs = Math.round(ms / 10) * 10;
+  const granularityMs = MS_IN_SECOND$1 / 10 ** fractionDigits;
+  const normalizedMs = Math.round(ms / granularityMs) * granularityMs;
   if (normalizedMs < MS_IN_MINUTE) {
-    return `${preciseSecondsFormatter.format(normalizedMs / MS_IN_SECOND)}s`;
+    return `${Number((normalizedMs / MS_IN_SECOND$1).toFixed(fractionDigits))}s`;
   }
   const days = Math.floor(normalizedMs / MS_IN_DAY);
   const hours = Math.floor(normalizedMs % MS_IN_DAY / MS_IN_HOUR);
   const minutes = Math.floor(normalizedMs % MS_IN_HOUR / MS_IN_MINUTE);
-  const seconds = normalizedMs % MS_IN_MINUTE / MS_IN_SECOND;
+  const seconds = normalizedMs % MS_IN_MINUTE / MS_IN_SECOND$1;
   const parts = [];
   if (days > 0) {
     parts.push(`${days}d`);
@@ -17597,7 +17618,7 @@ function formatDurationPrecise(ms) {
   if (minutes > 0) {
     parts.push(`${minutes}m`);
   }
-  parts.push(`${preciseSecondsFormatter.format(seconds)}s`);
+  parts.push(`${Number(seconds.toFixed(fractionDigits))}s`);
   return parts.join(" ");
 }
 function isDoStreamStep(stepName) {
@@ -43940,7 +43961,7 @@ var tn = f("block", "before:content-[counter(line)]", "before:inline-block", "be
 var et = ({ className: e, language: t, style: o, isIncomplete: n, ...s2 }) => jsxRuntimeExports.jsx("div", { className: f("my-4 flex w-full flex-col gap-2 rounded-xl border border-border bg-sidebar p-2", e), "data-incomplete": n || void 0, "data-language": t, "data-streamdown": "code-block", style: { contentVisibility: "auto", containIntrinsicSize: "auto 200px", ...o }, ...s2 });
 var Se = reactExports.createContext({ code: "" }), de = () => reactExports.useContext(Se);
 var ot = ({ language: e }) => jsxRuntimeExports.jsx("div", { className: "flex h-8 items-center text-muted-foreground text-xs", "data-language": e, "data-streamdown": "code-block-header", children: jsxRuntimeExports.jsx("span", { className: "ml-1 font-mono lowercase", children: e }) });
-var cn$1 = /\n+$/, dn = reactExports.lazy(() => __vitePreload(() => import("./highlighted-body-B3W2YXNL-B-EF8R0t.js"), true ? __vite__mapDeps([4,2]) : void 0).then((e) => ({ default: e.HighlightedCodeBlockBody }))), rt = ({ code: e, language: t, className: o, children: n, isIncomplete: s2 = false, ...r2 }) => {
+var cn$1 = /\n+$/, dn = reactExports.lazy(() => __vitePreload(() => import("./highlighted-body-B3W2YXNL-_4bJAUnT.js"), true ? __vite__mapDeps([4,2]) : void 0).then((e) => ({ default: e.HighlightedCodeBlockBody }))), rt = ({ code: e, language: t, className: o, children: n, isIncomplete: s2 = false, ...r2 }) => {
   let i = reactExports.useMemo(() => e.replace(cn$1, ""), [e]), c = reactExports.useMemo(() => ({ bg: "transparent", fg: "inherit", tokens: i.split(`
 `).map((a2) => [{ content: a2, color: "inherit", bgColor: "transparent", htmlStyle: {}, offset: 0 }]) }), [i]);
   return jsxRuntimeExports.jsx(Se.Provider, { value: { code: e }, children: jsxRuntimeExports.jsxs(et, { isIncomplete: s2, language: t, children: [jsxRuntimeExports.jsx(ot, { language: t }), n ? jsxRuntimeExports.jsx("div", { className: "pointer-events-none sticky top-2 z-10 -mt-10 flex h-8 items-center justify-end", children: jsxRuntimeExports.jsx("div", { className: "pointer-events-auto flex shrink-0 items-center gap-2 rounded-md border border-sidebar bg-sidebar/80 px-1.5 py-1 supports-[backdrop-filter]:bg-sidebar/70 supports-[backdrop-filter]:backdrop-blur", "data-streamdown": "code-block-actions", children: n }) }) : null, jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: jsxRuntimeExports.jsx(Qe, { className: o, language: t, result: c, ...r2 }), children: jsxRuntimeExports.jsx(dn, { className: o, code: i, language: t, raw: c, ...r2 }) })] }) });
@@ -46198,6 +46219,26 @@ function computeRootBounds(spans) {
 function getSpanDurationMs(span) {
   return Math.max(0, getHighResInMs(span.endTime) - getHighResInMs(span.startTime));
 }
+function isSpanErrored(span) {
+  var _a3;
+  const workflowStatus = (_a3 = span.attributes.data) == null ? void 0 : _a3.status;
+  return span.status.code === 2 || workflowStatus === "failed";
+}
+function clampViewportToRoot(next2, rootStart, rootEnd, minDurationMs) {
+  const rootDuration = Math.max(rootEnd - rootStart, minDurationMs);
+  const duration2 = Math.min(rootDuration, Math.max(minDurationMs, next2.end - next2.start));
+  const maxStart = rootEnd - duration2;
+  const start = Math.min(Math.max(next2.start, rootStart), maxStart);
+  return { start, end: start + duration2 };
+}
+function wheelDeltaToPixels(delta, deltaMode) {
+  return deltaMode === 1 ? delta * 16 : delta;
+}
+function wheelZoomScaleFactor(event) {
+  const dy = wheelDeltaToPixels(event.deltaY, event.deltaMode);
+  const isMouseWheel = event.deltaMode === 1 || Math.abs(event.deltaY) >= 50;
+  return 2 ** (dy / (isMouseWheel ? 200 : 60));
+}
 const NICE_INTERVALS = [
   1,
   2,
@@ -46231,6 +46272,7 @@ const NICE_INTERVALS = [
   5e9
 ];
 const MAX_MARKERS = 8;
+const MS_IN_SECOND = 1e3;
 function pickInterval(viewDuration, maxTicks) {
   for (const interval of NICE_INTERVALS) {
     if (viewDuration / interval <= maxTicks)
@@ -46243,6 +46285,7 @@ function computeTimeMarkers(viewDuration, offset2) {
     return [];
   const maxTicks = 6;
   const interval = pickInterval(viewDuration, maxTicks);
+  const fractionDigits = interval >= MS_IN_SECOND ? 0 : Math.ceil(-Math.log10(interval / MS_IN_SECOND));
   const firstTick = Math.ceil(offset2 / interval) * interval;
   const markers2 = [];
   for (let t = firstTick; t <= offset2 + viewDuration; t += interval) {
@@ -46251,7 +46294,7 @@ function computeTimeMarkers(viewDuration, offset2) {
       continue;
     markers2.push({
       position: Math.min(Math.max(position2, 0), 1),
-      label: formatDuration(Math.abs(t), true),
+      label: fractionDigits === 0 ? formatDuration(Math.abs(t), true) : formatDurationPrecise(Math.abs(t), fractionDigits),
       value: t
     });
     if (markers2.length >= MAX_MARKERS)
@@ -46767,7 +46810,6 @@ function SegmentBar({ segments, showLabels = true }) {
   }) });
 }
 const TimelineBar = reactExports.memo(function TimelineBar2({ span, viewStart, viewDuration, containerWidth, isSelected, isDimmed, onSelect, onRevealTime }) {
-  var _a3;
   const startMs = getHighResInMs(span.startTime);
   const endMs = getHighResInMs(span.endTime);
   const totalDurationMs = getSpanDurationMs(span);
@@ -46778,8 +46820,7 @@ const TimelineBar = reactExports.memo(function TimelineBar2({ span, viewStart, v
   const markers2 = reactExports.useMemo(() => geometry.mode.kind === "full" ? cullCollidingMarkers(projectMarkers(baseMarkers, geometry.visibleStartMs, geometry.visibleEndMs), geometry.visiblePixelWidth) : [], [geometry, baseMarkers]);
   const offscreen = reactExports.useMemo(() => geometry.mode.kind === "full" ? computeOffscreenMarkers(baseMarkers, geometry.visibleStartMs, geometry.visibleEndMs) : { left: null, right: null }, [geometry, baseMarkers]);
   const hasMarkers = markers2.length > 0 || offscreen.left !== null || offscreen.right !== null;
-  const workflowStatus = (_a3 = span.attributes.data) == null ? void 0 : _a3.status;
-  const isErrored = span.status.code === 2 || workflowStatus === "failed";
+  const isErrored = isSpanErrored(span);
   const colors = getResourceColor(span.resource);
   const fallbackBg = isErrored ? colors.errorBg ?? "var(--ds-red-200)" : colors.bg;
   const fallbackBorder = isErrored ? colors.errorBorder ?? "var(--ds-red-500)" : colors.border;
@@ -46828,8 +46869,285 @@ function Timeline({ spans, viewStart, viewEnd, markers: markers2, selectedId, se
   return jsxRuntimeExports.jsxs("div", { ref: containerRef, className: "relative h-full overflow-hidden", style: { minHeight: spans.length * ROW_HEIGHT_PX }, children: [jsxRuntimeExports.jsx("div", { "aria-hidden": true, className: "absolute inset-y-0 pointer-events-none", style: TIMELINE_INSET_STYLE, children: markers2.map((marker2) => (
     // Skip the "0s" origin marker since the left edge already implies it.
     Math.abs(marker2.value) > 1e-6 ? jsxRuntimeExports.jsx("div", { className: "absolute top-0 bottom-0 w-px bg-gray-alpha-300", style: { left: `${marker2.position * 100}%` } }, String(marker2.value)) : null
-  )) }), hoverFraction != null && jsxRuntimeExports.jsx("div", { className: "absolute inset-y-0 pointer-events-none z-10", style: TIMELINE_INSET_STYLE, children: jsxRuntimeExports.jsx("div", { className: "absolute top-0 bottom-0 w-px bg-gray-alpha-500", style: { left: `${hoverFraction * 100}%` } }) }), jsxRuntimeExports.jsx("div", { style: { transform: `translateY(${start * ROW_HEIGHT_PX}px)` }, children: spans.slice(start, end).map((span) => jsxRuntimeExports.jsx(TimelineBar, { span, viewStart, viewDuration, containerWidth: timelineWidth, isSelected: selectedId === span.spanId, isDimmed: isSpanDimmedBySearch(span.spanId, searchResult), onSelect, onRevealTime }, span.spanId)) }), altHeld && jsxRuntimeExports.jsx("div", { "aria-hidden": true, className: "absolute inset-y-0 pointer-events-none", style: TIMELINE_INSET_STYLE, children: gaps.map((gap) => jsxRuntimeExports.jsx(DeltaIndicator, { leftFrac: gap.leftFrac, rightFrac: gap.rightFrac, label: formatDuration(gap.gapMs, true), rowIndex: gap.rowIndex }, gap.rowIndex)) })] });
+  )) }), hoverFraction != null && jsxRuntimeExports.jsx("div", { className: "absolute inset-y-0 pointer-events-none z-10", style: TIMELINE_INSET_STYLE, children: jsxRuntimeExports.jsx("div", { className: "absolute top-0 bottom-0 w-px bg-gray-alpha-500", style: { left: `${hoverFraction * 100}%` } }) }), jsxRuntimeExports.jsx("div", { style: { transform: `translateY(${start * ROW_HEIGHT_PX}px)` }, children: spans.slice(start, end).map((span) => jsxRuntimeExports.jsx(TimelineBar, { span, viewStart, viewDuration, containerWidth: timelineWidth, isSelected: selectedId === span.spanId, isDimmed: isSpanDimmedBySearch(span.spanId, searchResult), onSelect, onRevealTime }, span.spanId)) }), altHeld && jsxRuntimeExports.jsx("div", { "aria-hidden": true, className: "absolute inset-y-0 pointer-events-none", style: TIMELINE_INSET_STYLE, children: gaps.map((gap) => jsxRuntimeExports.jsx(DeltaIndicator, { leftFrac: gap.leftFrac, rightFrac: gap.rightFrac, label: formatDurationPrecise(gap.gapMs), rowIndex: gap.rowIndex }, gap.rowIndex)) })] });
+}
+const CANVAS_PAD_Y_PX = 6;
+const MIN_LINE_HEIGHT_PX = 1.5;
+const MAX_LINE_HEIGHT_PX = 3;
+const MIN_LINE_WIDTH_PX = 2;
+const CLICK_DRAG_THRESHOLD_PX = 3;
+const MIN_BRUSH_WIDTH_PX = 6;
+const KEYBOARD_PAN_FRACTION = 0.1;
+const RESOURCE_LINE_TOKENS = {
+  run: "--ds-blue-400",
+  step: "--ds-green-400",
+  hook: "--ds-gray-400",
+  sleep: "--ds-gray-400"
+};
+const DEFAULT_LINE_TOKEN = "--ds-gray-400";
+const ERROR_LINE_TOKEN = "--ds-red-400";
+function computeDensityLayout(spans, rootStartMs, rootDurationMs, contentWidth, contentHeight) {
+  const count2 = spans.length;
+  const lineHeight = Math.max(MIN_LINE_HEIGHT_PX, Math.min(MAX_LINE_HEIGHT_PX, contentHeight / count2));
+  const rowStep = count2 > 1 ? Math.min((contentHeight - lineHeight) / (count2 - 1), lineHeight + 1) : 0;
+  const rectsByToken = /* @__PURE__ */ new Map();
+  spans.forEach((span, index2) => {
+    const token = isSpanErrored(span) ? ERROR_LINE_TOKEN : RESOURCE_LINE_TOKENS[span.resource] ?? DEFAULT_LINE_TOKEN;
+    const startMs = getHighResInMs(span.startTime);
+    const endMs = getHighResInMs(span.endTime);
+    const x2 = TIMELINE_PADDING_PX + (startMs - rootStartMs) / rootDurationMs * contentWidth;
+    const w2 = Math.max(MIN_LINE_WIDTH_PX, (endMs - startMs) / rootDurationMs * contentWidth);
+    const y2 = CANVAS_PAD_Y_PX + index2 * rowStep;
+    const rects = rectsByToken.get(token) ?? [];
+    rects.push([x2, y2, w2]);
+    rectsByToken.set(token, rects);
+  });
+  return { lineHeight, rectsByToken };
 }
+function useDpr() {
+  const [dpr, setDpr] = reactExports.useState(1);
+  reactExports.useLayoutEffect(() => {
+    const onChange = () => setDpr(window.devicePixelRatio || 1);
+    const media = matchMedia(`(resolution: ${dpr}dppx)`);
+    media.addEventListener("change", onChange);
+    onChange();
+    return () => media.removeEventListener("change", onChange);
+  }, [dpr]);
+  return dpr;
+}
+function useThemeVersion() {
+  const [version2, setVersion] = reactExports.useState(0);
+  reactExports.useEffect(() => {
+    const observer = new MutationObserver(() => setVersion((v2) => v2 + 1));
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class", "data-theme", "style"]
+    });
+    return () => observer.disconnect();
+  }, []);
+  return version2;
+}
+const Minimap = reactExports.memo(function Minimap2({ spans, root: root2, viewport, minViewportMs, onViewportChange, onAnimateTo }) {
+  const { startTime: rootStartMs, endTime: rootEndMs, duration: rootDurationMs } = root2;
+  const containerRef = reactExports.useRef(null);
+  const canvasRef = reactExports.useRef(null);
+  const dpr = useDpr();
+  const themeVersion = useThemeVersion();
+  const viewportRef = reactExports.useRef(viewport);
+  viewportRef.current = viewport;
+  const [drag, setDrag] = reactExports.useState(null);
+  const [selection, setSelection] = reactExports.useState(null);
+  const xToTime = reactExports.useCallback((x2, contentWidth) => {
+    if (contentWidth <= 0)
+      return rootStartMs;
+    const fraction = (x2 - TIMELINE_PADDING_PX) / contentWidth;
+    return Math.min(Math.max(rootStartMs + fraction * rootDurationMs, rootStartMs), rootEndMs);
+  }, [rootStartMs, rootDurationMs, rootEndMs]);
+  const clamp2 = reactExports.useCallback((next2) => clampViewportToRoot(next2, rootStartMs, rootEndMs, minViewportMs), [rootStartMs, rootEndMs, minViewportMs]);
+  reactExports.useLayoutEffect(() => {
+    const canvas = canvasRef.current;
+    const container = containerRef.current;
+    const ctx = canvas == null ? void 0 : canvas.getContext("2d");
+    if (!canvas || !container || !ctx)
+      return;
+    const draw = () => {
+      const width = canvas.clientWidth;
+      const height = canvas.clientHeight;
+      const contentWidth = width - TIMELINE_PADDING_PX * 2;
+      if (width <= 0 || height <= 0 || contentWidth <= 0)
+        return;
+      canvas.width = Math.round(width * dpr);
+      canvas.height = Math.round(height * dpr);
+      ctx.scale(dpr, dpr);
+      ctx.clearRect(0, 0, width, height);
+      if (spans.length === 0 || rootDurationMs <= 0)
+        return;
+      const { lineHeight, rectsByToken } = computeDensityLayout(spans, rootStartMs, rootDurationMs, contentWidth, height - CANVAS_PAD_Y_PX * 2);
+      const style2 = getComputedStyle(container);
+      const drawToken = (token) => {
+        const rects = rectsByToken.get(token);
+        if (!rects)
+          return;
+        ctx.fillStyle = style2.getPropertyValue(token).trim() || "rgb(160,160,160)";
+        ctx.beginPath();
+        for (const [x2, y2, w2] of rects) {
+          ctx.roundRect(x2, y2, w2, lineHeight, lineHeight / 2);
+        }
+        ctx.fill();
+      };
+      for (const token of rectsByToken.keys()) {
+        if (token !== ERROR_LINE_TOKEN)
+          drawToken(token);
+      }
+      drawToken(ERROR_LINE_TOKEN);
+    };
+    draw();
+    const observer = new ResizeObserver(draw);
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [spans, rootStartMs, rootDurationMs, dpr, themeVersion]);
+  const pointerFrame = reactExports.useCallback((e) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    return {
+      x: e.clientX - rect.left,
+      cw: rect.width - TIMELINE_PADDING_PX * 2
+    };
+  }, []);
+  const resolveDragState = reactExports.useCallback((target2, x2, cw) => {
+    if (target2.closest('[data-minimap-handle="left"]')) {
+      return { mode: "resize-left" };
+    }
+    if (target2.closest('[data-minimap-handle="right"]')) {
+      return { mode: "resize-right" };
+    }
+    const { start, end } = viewportRef.current;
+    const isFullExtent = start - rootStartMs < rootDurationMs * 1e-3 && rootEndMs - end < rootDurationMs * 1e-3;
+    if (target2.closest("[data-minimap-brush]") && !isFullExtent) {
+      return { mode: "pan", grabOffsetMs: xToTime(x2, cw) - start };
+    }
+    return { mode: "select", originX: x2, originMs: xToTime(x2, cw) };
+  }, [xToTime, rootStartMs, rootDurationMs, rootEndMs]);
+  const handlePointerDown = reactExports.useCallback((e) => {
+    if (e.button !== 0)
+      return;
+    const { x: x2, cw } = pointerFrame(e);
+    if (cw <= 0)
+      return;
+    e.currentTarget.setPointerCapture(e.pointerId);
+    setDrag(resolveDragState(e.target, x2, cw));
+  }, [pointerFrame, resolveDragState]);
+  const handlePointerMove = reactExports.useCallback((e) => {
+    if (!drag)
+      return;
+    const { x: x2, cw } = pointerFrame(e);
+    const t = xToTime(x2, cw);
+    const { start, end } = viewportRef.current;
+    if (drag.mode === "pan") {
+      const duration2 = end - start;
+      onViewportChange(clamp2({
+        start: t - drag.grabOffsetMs,
+        end: t - drag.grabOffsetMs + duration2
+      }));
+    } else if (drag.mode === "resize-left") {
+      onViewportChange({ start: Math.min(t, end - minViewportMs), end });
+    } else if (drag.mode === "resize-right") {
+      onViewportChange({ start, end: Math.max(t, start + minViewportMs) });
+    } else if (selection || Math.abs(x2 - drag.originX) > CLICK_DRAG_THRESHOLD_PX) {
+      setSelection({
+        x0: Math.min(drag.originX, x2),
+        x1: Math.max(drag.originX, x2)
+      });
+    }
+  }, [
+    drag,
+    selection,
+    pointerFrame,
+    xToTime,
+    onViewportChange,
+    clamp2,
+    minViewportMs
+  ]);
+  const endDrag = reactExports.useCallback((e) => {
+    if (!drag)
+      return;
+    if (drag.mode === "select") {
+      const { x: x2, cw } = pointerFrame(e);
+      const t = xToTime(x2, cw);
+      if (selection) {
+        onAnimateTo(clamp2({
+          start: Math.min(drag.originMs, t),
+          end: Math.max(drag.originMs, t)
+        }));
+      } else {
+        const { start, end } = viewportRef.current;
+        const duration2 = end - start;
+        onAnimateTo(clamp2({ start: t - duration2 / 2, end: t + duration2 / 2 }));
+      }
+    }
+    setSelection(null);
+    setDrag(null);
+  }, [drag, selection, pointerFrame, xToTime, onAnimateTo, clamp2]);
+  const handleLostPointerCapture = reactExports.useCallback(() => {
+    setSelection(null);
+    setDrag(null);
+  }, []);
+  const handleDoubleClick = reactExports.useCallback(() => {
+    onAnimateTo({ start: rootStartMs, end: rootEndMs });
+  }, [onAnimateTo, rootStartMs, rootEndMs]);
+  reactExports.useEffect(() => {
+    const el = containerRef.current;
+    if (!el || rootDurationMs <= 0)
+      return;
+    const zoomAtCursor = (e, cw, left) => {
+      const scaleFactor = wheelZoomScaleFactor(e);
+      const { start, end } = viewportRef.current;
+      const duration2 = end - start;
+      const cursorFraction = Math.min(Math.max((e.clientX - left - TIMELINE_PADDING_PX) / cw, 0), 1);
+      const cursorMs = rootStartMs + cursorFraction * rootDurationMs;
+      const anchor = Math.min(Math.max(duration2 > 0 ? (cursorMs - start) / duration2 : 0.5, 0), 1);
+      const newDuration = duration2 * scaleFactor;
+      onViewportChange(clamp2({
+        start: cursorMs - anchor * newDuration,
+        end: cursorMs + (1 - anchor) * newDuration
+      }));
+    };
+    const panByMapPixels = (e, cw) => {
+      const dx = wheelDeltaToPixels(e.deltaX, e.deltaMode);
+      const panMs = dx / cw * rootDurationMs;
+      const { start, end } = viewportRef.current;
+      onViewportChange(clamp2({ start: start + panMs, end: end + panMs }));
+    };
+    const onWheel = (e) => {
+      const isZoomGesture = e.ctrlKey || e.metaKey;
+      const hasDeltaX = Math.abs(e.deltaX) > Math.abs(e.deltaY);
+      if (!isZoomGesture && !hasDeltaX)
+        return;
+      e.preventDefault();
+      const rect = el.getBoundingClientRect();
+      const cw = rect.width - TIMELINE_PADDING_PX * 2;
+      if (cw <= 0)
+        return;
+      if (isZoomGesture)
+        zoomAtCursor(e, cw, rect.left);
+      else
+        panByMapPixels(e, cw);
+    };
+    el.addEventListener("wheel", onWheel, { passive: false });
+    return () => el.removeEventListener("wheel", onWheel);
+  }, [rootStartMs, rootDurationMs, onViewportChange, clamp2]);
+  const handleKeyDown = reactExports.useCallback((e) => {
+    const { start, end } = viewportRef.current;
+    const duration2 = end - start;
+    const pan = duration2 * KEYBOARD_PAN_FRACTION;
+    if (e.key === "ArrowLeft") {
+      onViewportChange(clamp2({ start: start - pan, end: end - pan }));
+    } else if (e.key === "ArrowRight") {
+      onViewportChange(clamp2({ start: start + pan, end: end + pan }));
+    } else if (e.key === "Home") {
+      onViewportChange(clamp2({ start: rootStartMs, end: rootStartMs + duration2 }));
+    } else if (e.key === "End") {
+      onViewportChange(clamp2({ start: rootEndMs - duration2, end: rootEndMs }));
+    } else {
+      return;
+    }
+    e.preventDefault();
+  }, [onViewportChange, clamp2, rootStartMs, rootEndMs]);
+  const startFraction = (viewport.start - rootStartMs) / rootDurationMs;
+  const endFraction = (viewport.end - rootStartMs) / rootDurationMs;
+  const trackWidth = `(100% - ${TIMELINE_PADDING_PX * 2}px)`;
+  const brushStyle = {
+    left: `calc(${TIMELINE_PADDING_PX}px + ${startFraction} * ${trackWidth})`,
+    width: `max(${MIN_BRUSH_WIDTH_PX}px, calc(${endFraction - startFraction} * ${trackWidth}))`
+  };
+  const viewDuration = viewport.end - viewport.start;
+  const scrollableMs = Math.max(rootDurationMs - viewDuration, 0);
+  const scrollPercent = scrollableMs > 0 ? Math.round((viewport.start - rootStartMs) / scrollableMs * 100) : 0;
+  return jsxRuntimeExports.jsxs("div", { ref: containerRef, className: cn$4("relative h-10 min-h-10 w-full border-b border-gray-alpha-400 bg-background-100 select-none overflow-hidden touch-none", (drag == null ? void 0 : drag.mode) === "select" && "cursor-crosshair"), onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: endDrag, onPointerCancel: endDrag, onLostPointerCapture: handleLostPointerCapture, onDoubleClick: handleDoubleClick, children: [jsxRuntimeExports.jsx("canvas", { ref: canvasRef, "aria-hidden": true, className: "pointer-events-none absolute inset-0 h-full w-full mix-blend-multiply [.dark-theme_&]:mix-blend-screen [.dark_&]:mix-blend-screen [[data-theme=dark]_&]:mix-blend-screen" }), selection ? jsxRuntimeExports.jsx("div", { "aria-hidden": true, className: "pointer-events-none absolute inset-y-0 border border-blue-500 bg-blue-300 opacity-40", style: { left: selection.x0, width: selection.x1 - selection.x0 } }) : null, jsxRuntimeExports.jsxs("div", { "data-minimap-brush": true, role: "scrollbar", "aria-controls": "trace-timeline", "aria-orientation": "horizontal", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": scrollPercent, "aria-valuetext": `Viewing ${formatDurationPrecise(viewport.start - rootStartMs)} to ${formatDurationPrecise(viewport.end - rootStartMs)} of ${formatDurationPrecise(rootDurationMs)}`, "aria-label": "Timeline overview", tabIndex: 0, onKeyDown: handleKeyDown, className: cn$4(
+    // Glass thumb, matching the legacy trace viewer's map window.
+    "group/minimap-brush absolute top-0.5 bottom-0.5 rounded-[3px] border border-gray-alpha-400 bg-gray-alpha-200 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[var(--ds-focus-color)]",
+    (drag == null ? void 0 : drag.mode) === "pan" ? "cursor-grabbing" : "cursor-grab"
+  ), style: brushStyle, children: [jsxRuntimeExports.jsx("div", { "data-minimap-handle": "left", className: "absolute inset-y-0 -left-1 flex w-2.5 cursor-ew-resize items-center justify-center", children: jsxRuntimeExports.jsx("span", { className: cn$4("h-3.5 w-[3px] rounded-full bg-gray-600 opacity-0 transition-opacity group-hover/minimap-brush:opacity-100 group-focus-visible/minimap-brush:opacity-100", drag && "opacity-100") }) }), jsxRuntimeExports.jsx("div", { "data-minimap-handle": "right", className: "absolute inset-y-0 -right-1 flex w-2.5 cursor-ew-resize items-center justify-center", children: jsxRuntimeExports.jsx("span", { className: cn$4("h-3.5 w-[3px] rounded-full bg-gray-600 opacity-0 transition-opacity group-hover/minimap-brush:opacity-100 group-focus-visible/minimap-brush:opacity-100", drag && "opacity-100") }) })] })] });
+});
 const DEFAULT_PAGE_SIZE = 10;
 function cn(...inputs) {
   return twMerge(clsx(inputs));
@@ -49194,6 +49512,9 @@ async function fetchEventsByCorrelationId(worldEnv, correlationId, params) {
 async function fetchHooks(worldEnv, params) {
   return rpc("fetchHooks", { worldEnv, params });
 }
+async function fetchHookToken(worldEnv, runId, hookId) {
+  return rpc("fetchHookToken", { worldEnv, runId, hookId });
+}
 async function fetchHook(worldEnv, hookId, resolveData = "all") {
   return rpc("fetchHook", { worldEnv, hookId, resolveData });
 }
@@ -49258,7 +49579,7 @@ export {
   Button$1 as Z,
   __vitePreload as _,
   TooltipTrigger as a,
-  offset as a$,
+  LIVE_UPDATE_INTERVAL_MS as a$,
   Lock as a0,
   CollapsibleRoot as a1,
   CollapsibleTrigger as a2,
@@ -49269,33 +49590,33 @@ export {
   Yr as a7,
   isEncryptedMarker$1 as a8,
   TimestampTooltip as a9,
-  searchSpans as aA,
-  computeRootBounds as aB,
-  computeTimeMarkers as aC,
-  getHighResInMs as aD,
-  scrollRowIntoView as aE,
-  TIMELINE_PADDING_PX as aF,
-  Timeline as aG,
-  TimelineHeader as aH,
-  SidebarDataProvider as aI,
-  fetchHook as aJ,
-  hydrateResourceIOAsync as aK,
-  fetchStep as aL,
-  hydrateResourceIO as aM,
-  fetchStreams as aN,
-  Slot as aO,
-  Slottable as aP,
-  buttonVariants as aQ,
-  fetchEvent as aR,
-  fetchEventsByCorrelationId as aS,
-  isEncryptedData as aT,
-  hydrateData as aU,
-  getWebRevivers as aV,
-  LIVE_UPDATE_INTERVAL_MS as aW,
-  getEncryptionKeyForRun as aX,
-  StreamViewer as aY,
-  composeRefs as aZ,
-  useFloating as a_,
+  useReducedMotion as aA,
+  searchSpans as aB,
+  computeRootBounds as aC,
+  computeTimeMarkers as aD,
+  clampViewportToRoot as aE,
+  getHighResInMs as aF,
+  scrollRowIntoView as aG,
+  TIMELINE_PADDING_PX as aH,
+  Minimap as aI,
+  Timeline as aJ,
+  TimelineHeader as aK,
+  wheelZoomScaleFactor as aL,
+  wheelDeltaToPixels as aM,
+  SidebarDataProvider as aN,
+  fetchHook as aO,
+  hydrateResourceIOAsync as aP,
+  fetchStep as aQ,
+  hydrateResourceIO as aR,
+  fetchStreams as aS,
+  Slot as aT,
+  Slottable as aU,
+  buttonVariants as aV,
+  fetchEvent as aW,
+  fetchEventsByCorrelationId as aX,
+  isEncryptedData as aY,
+  hydrateData as aZ,
+  getWebRevivers as a_,
   formatDuration as aa,
   _r as ab,
   RunClickContext as ac,
@@ -49318,23 +49639,29 @@ export {
   isSpanDimmedBySearch as at,
   ROW_HEIGHT_PX as au,
   getSpanDurationMs as av,
-  formatDurationPrecise as aw,
-  TooltipProvider as ax,
-  ActiveSpanProvider as ay,
-  useReducedMotion as az,
+  isSpanErrored as aw,
+  formatDurationPrecise as ax,
+  TooltipProvider as ay,
+  ActiveSpanProvider as az,
   TooltipContent as b,
-  shift as b0,
-  limitShift as b1,
-  flip as b2,
-  size as b3,
-  arrow as b4,
-  hide as b5,
-  autoUpdate as b6,
-  cancelRun as b7,
-  reenqueueRun as b8,
-  wakeUpRun as b9,
-  resumeHook as ba,
-  recreateRun as bb,
+  getEncryptionKeyForRun as b0,
+  StreamViewer as b1,
+  composeRefs as b2,
+  useFloating as b3,
+  offset as b4,
+  shift as b5,
+  limitShift as b6,
+  flip as b7,
+  size as b8,
+  arrow as b9,
+  hide as ba,
+  autoUpdate as bb,
+  cancelRun as bc,
+  reenqueueRun as bd,
+  wakeUpRun as be,
+  resumeHook as bf,
+  fetchHookToken as bg,
+  recreateRun as bh,
   createLucideIcon as c,
   runHealthCheck as d,
   cn as e,