@workflow/web 4.1.0-beta.39 → 4.1.0-beta.40

package/build/server/assets/{server-build-B3ijdJBL.js → server-build-B-uZ5KmC.js}

@@ -14,7 +14,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
 var __superGet = (cls, obj, key) => __reflectGet(__getProtoOf(cls), key, obj);
 var _a2, _reader;
-import { a as requireReact, S as ServerRouter, c as createReadableStreamFromReadable, r as reactExports, g as getDefaultExportFromCjs, R as React, b as ReactExports, w as withComponentProps, M as Meta, L as Links, d as ScrollRestoration, e as Scripts, O as Outlet, u as useNavigate, f as useSearchParams, h as Link$1, i as useLocation, j as useParams } from "./app-YwmyVuwT.js";
+import { a as requireReact, S as ServerRouter, c as createReadableStreamFromReadable, r as reactExports, g as getDefaultExportFromCjs, R as React, b as ReactExports, w as withComponentProps, M as Meta, L as Links, d as ScrollRestoration, e as Scripts, O as Outlet, u as useNavigate, f as useSearchParams, h as Link$1, i as useLocation, j as useParams } from "./app-DLRJr3zg.js";
 import require$$0$4, { PassThrough } from "node:stream";
 import require$$0 from "util";
 import require$$1$1 from "crypto";
@@ -23352,8 +23352,8 @@ function handleRequest(request2, responseStatusCode, responseHeaders, routerCont
   }
   return new Promise((resolve2, reject) => {
     let shellRendered = false;
-    let userAgent = request2.headers.get("user-agent");
-    let readyOption = userAgent && isbot(userAgent) || routerContext.isSpaMode ? "onAllReady" : "onShellReady";
+    const userAgent = request2.headers.get("user-agent");
+    const readyOption = userAgent && isbot(userAgent) || routerContext.isSpaMode ? "onAllReady" : "onShellReady";
     let timeoutId = setTimeout(
       () => abort(),
       streamTimeout + 1e3
@@ -37101,16 +37101,19 @@ function getStatusDotColor(eventType) {
   }
   return "var(--ds-gray-600)";
 }
-function buildNameMaps(steps, run) {
-  var _a3;
+function buildNameMaps(events2, run) {
+  var _a3, _b;
   const correlationNameMap = /* @__PURE__ */ new Map();
-  if (steps) {
-    for (const step of steps) {
-      const parsed = parseStepName(String(step.stepName));
-      correlationNameMap.set(step.stepId, (parsed == null ? void 0 : parsed.shortName) ?? step.stepName);
+  if (events2) {
+    for (const event of events2) {
+      if (event.eventType === "step_created" && event.correlationId) {
+        const stepName = ((_a3 = event.eventData) == null ? void 0 : _a3.stepName) ?? "";
+        const parsed = parseStepName(String(stepName));
+        correlationNameMap.set(event.correlationId, (parsed == null ? void 0 : parsed.shortName) ?? stepName);
+      }
     }
   }
-  const workflowName = (run == null ? void 0 : run.workflowName) ? ((_a3 = parseWorkflowName(run.workflowName)) == null ? void 0 : _a3.shortName) ?? run.workflowName : null;
+  const workflowName = (run == null ? void 0 : run.workflowName) ? ((_b = parseWorkflowName(run.workflowName)) == null ? void 0 : _b.shortName) ?? run.workflowName : null;
   return { correlationNameMap, workflowName };
 }
 function buildDurationMap(events2) {
@@ -37436,13 +37439,13 @@ function EventRow({ event, index: index2, isFirst, isLast, activeGroupKey, selec
     color: "var(--ds-red-900)"
   }, children: loadError }) : isLoading || !hasExistingEventData && !hasAttemptedLoad && event.correlationId ? jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2 p-3", children: [jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3", style: { width: "75%" } }), jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3", style: { width: "50%" } }), jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3", style: { width: "60%" } })] }) : jsxRuntimeExports.jsx("div", { className: "p-2 text-xs", style: { color: "var(--ds-gray-900)" }, children: "No data" })] })] })] });
 }
-function EventListView({ events: events2, steps, run, onLoadEventData, hasMoreEvents = false, isLoadingMoreEvents = false, onLoadMoreEvents, encryptionKey }) {
+function EventListView({ events: events2, run, onLoadEventData, hasMoreEvents = false, isLoadingMoreEvents = false, onLoadMoreEvents, encryptionKey }) {
   const sortedEvents2 = reactExports.useMemo(() => {
     if (!events2 || events2.length === 0)
       return [];
     return [...events2].sort((a2, b2) => new Date(a2.createdAt).getTime() - new Date(b2.createdAt).getTime());
   }, [events2]);
-  const { correlationNameMap, workflowName } = reactExports.useMemo(() => buildNameMaps(steps ?? null, run ?? null), [steps, run]);
+  const { correlationNameMap, workflowName } = reactExports.useMemo(() => buildNameMaps(events2 ?? null, run ?? null), [events2, run]);
   const durationMap = reactExports.useMemo(() => buildDurationMap(sortedEvents2), [sortedEvents2]);
   const [selectedGroupKey, setSelectedGroupKey] = reactExports.useState(void 0);
   const [hoveredGroupKey, setHoveredGroupKey] = reactExports.useState(void 0);
@@ -64424,7 +64427,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$1 = () => 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(() => import("./highlighted-body-B3W2YXNL-Dqsnck2u.js").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(() => import("./highlighted-body-B3W2YXNL-7BMdhIzo.js").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 }) })] }) });
@@ -64746,7 +64749,7 @@ var Dt = ({ children: e, className: t, onDownload: o, onError: n }) => {
   }, []), jsxRuntimeExports.jsxs("div", { className: "relative", ref: i, children: [jsxRuntimeExports.jsx("button", { className: f("cursor-pointer p-1 text-muted-foreground transition-all hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50", t), disabled: c, onClick: () => r2(!s2), title: "Download table", type: "button", children: e != null ? e : jsxRuntimeExports.jsx(Z, { size: 14 }) }), s2 ? jsxRuntimeExports.jsxs("div", { className: "absolute top-full right-0 z-10 mt-1 min-w-[120px] overflow-hidden rounded-md border border-border bg-background shadow-lg", children: [jsxRuntimeExports.jsx("button", { className: "w-full px-3 py-2 text-left text-sm transition-colors hover:bg-muted/40", onClick: () => a2("csv"), title: "Download table as CSV", type: "button", children: "CSV" }), jsxRuntimeExports.jsx("button", { className: "w-full px-3 py-2 text-left text-sm transition-colors hover:bg-muted/40", onClick: () => a2("markdown"), title: "Download table as Markdown", type: "button", children: "Markdown" })] }) : null] });
 };
 var Vt = ({ children: e, className: t, showControls: o, ...n }) => jsxRuntimeExports.jsxs("div", { className: "my-4 flex flex-col gap-2 rounded-lg border border-border bg-sidebar p-2", "data-streamdown": "table-wrapper", children: [o ? jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-end gap-1", children: [jsxRuntimeExports.jsx(Ht, {}), jsxRuntimeExports.jsx(Dt, {})] }) : null, jsxRuntimeExports.jsx("div", { className: "border-collapse overflow-x-auto overscroll-y-auto rounded-md border border-border bg-background", children: jsxRuntimeExports.jsx("table", { className: f("w-full divide-y divide-border", t), "data-streamdown": "table", ...n, children: e }) })] });
-var Jn = reactExports.lazy(() => import("./mermaid-3ZIDBTTL-mfJ74Epj.js").then((e) => ({ default: e.Mermaid }))), Kn = /language-([^\s]+)/;
+var Jn = reactExports.lazy(() => import("./mermaid-3ZIDBTTL-C-mhM4Cx.js").then((e) => ({ default: e.Mermaid }))), Kn = /language-([^\s]+)/;
 function ke(e, t) {
   if (!(e != null && e.position || t != null && t.position)) return true;
   if (!(e != null && e.position && (t != null && t.position))) return false;
@@ -65325,11 +65328,12 @@ function DetailCard({ summary, children: children2, onToggle, disabled = false,
       opacity: 0.8
     }, children: summary });
   }
-  return jsxRuntimeExports.jsxs("details", { className: "group", onToggle: (e) => onToggle == null ? void 0 : onToggle(e.target.open), children: [jsxRuntimeExports.jsx("summary", { className: `cursor-pointer rounded-md border px-2.5 py-1.5 text-xs hover:brightness-95 ${summaryClassName ?? ""}`, style: {
+  return jsxRuntimeExports.jsxs("details", { className: "group", onToggle: (e) => onToggle == null ? void 0 : onToggle(e.target.open), children: [jsxRuntimeExports.jsx("summary", { className: `cursor-pointer rounded-md border px-2.5 py-1.5 text-xs hover:brightness-95 [&::-webkit-details-marker]:hidden ${summaryClassName ?? ""}`, style: {
     borderColor: "var(--ds-gray-300)",
     backgroundColor: "var(--ds-gray-100)",
-    color: "var(--ds-gray-900)"
-  }, children: summary }), jsxRuntimeExports.jsxs("div", { className: `relative pl-6 mt-3 ${contentClassName ?? ""}`, children: [jsxRuntimeExports.jsx("div", { className: "absolute left-3 -top-3 w-px h-3", style: { backgroundColor: "var(--ds-gray-400)" } }), jsxRuntimeExports.jsx("div", { className: "absolute left-3 top-0 w-3 h-3 border-l border-b rounded-bl-lg", style: { borderColor: "var(--ds-gray-400)" } }), jsxRuntimeExports.jsx("div", { className: "absolute left-6 top-3 w-0 h-px -translate-y-px", style: { backgroundColor: "var(--ds-gray-400)" } }), jsxRuntimeExports.jsx("div", { children: children2 })] })] });
+    color: "var(--ds-gray-900)",
+    listStyle: "none"
+  }, children: jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1.5", children: [jsxRuntimeExports.jsx(ChevronRight, { size: 14, className: "shrink-0 transition-transform group-open:rotate-90" }), summary] }) }), jsxRuntimeExports.jsxs("div", { className: `relative pl-6 mt-3 ${contentClassName ?? ""}`, children: [jsxRuntimeExports.jsx("div", { className: "absolute left-3 -top-3 w-px h-3", style: { backgroundColor: "var(--ds-gray-400)" } }), jsxRuntimeExports.jsx("div", { className: "absolute left-3 top-0 w-3 h-3 border-l border-b rounded-bl-lg", style: { borderColor: "var(--ds-gray-400)" } }), jsxRuntimeExports.jsx("div", { className: "absolute left-6 top-3 w-0 h-px -translate-y-px", style: { backgroundColor: "var(--ds-gray-400)" } }), jsxRuntimeExports.jsx("div", { children: children2 })] })] });
 }
 function TabButton({ active, onClick, children: children2 }) {
   return jsxRuntimeExports.jsx("button", { type: "button", role: "tab", "aria-selected": active, tabIndex: active ? 0 : -1, onClick, className: "px-3 py-1.5 text-[11px] font-medium transition-colors -mb-px", style: {
@@ -65404,6 +65408,9 @@ const attributeOrder = [
   "runId",
   "attempt",
   "token",
+  "receivedCount",
+  "lastReceivedAt",
+  "disposedAt",
   "correlationId",
   "eventType",
   "deploymentId",
@@ -65432,7 +65439,8 @@ const sortByAttributeOrder = (a2, b2) => {
   return aIndex - bIndex;
 };
 const attributeDisplayNames = {
-  workflowCoreVersion: "@workflow/core version"
+  workflowCoreVersion: "@workflow/core version",
+  receivedCount: "times resolved"
 };
 const getAttributeDisplayName = (attribute) => {
   return attributeDisplayNames[attribute] ?? attribute;
@@ -65507,6 +65515,9 @@ const attributeToDisplayFn = {
   // Hook details
   token: (value) => String(value),
   isWebhook: (value) => String(value),
+  receivedCount: (value) => String(value),
+  lastReceivedAt: localMillisecondTimeOrNull,
+  disposedAt: localMillisecondTimeOrNull,
   // Event details
   eventType: (value) => String(value),
   correlationId: (value) => String(value),
@@ -65683,8 +65694,9 @@ const AttributePanel = ({ data, moduleSpecifier, isLoading, error: error2, expir
     const displayValue = (_a3 = attributeToDisplayFn[attribute]) == null ? void 0 : _a3.call(attributeToDisplayFn, displayData[attribute]);
     const isModuleSpecifier = attribute === "moduleSpecifier";
     const moduleSpecifierValue = typeof displayValue === "string" ? displayValue : String(displayValue ?? displayData.moduleSpecifier ?? "");
+    const shouldCapitalizeLabel = attribute !== "workflowCoreVersion";
     const showDivider = index2 < orderedBasicAttributes.length - 1;
-    return jsxRuntimeExports.jsxs("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: getAttributeDisplayName(attribute) }), isModuleSpecifier ? jsxRuntimeExports.jsx("button", { type: "button", className: "min-w-0 max-w-[70%] truncate text-right text-[13px] font-mono", style: {
+    return jsxRuntimeExports.jsxs("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: shouldCapitalizeLabel ? "text-[14px] first-letter:uppercase" : "text-[14px]", style: { color: "var(--ds-gray-700)" }, children: getAttributeDisplayName(attribute) }), isModuleSpecifier ? jsxRuntimeExports.jsx("button", { type: "button", className: "min-w-0 max-w-[70%] truncate text-right text-[13px] font-mono", style: {
       color: "var(--ds-gray-1000)",
       background: "transparent",
       border: "none",
@@ -65775,7 +65787,7 @@ function isWorkflowRun(data) {
 function isHook(data) {
   return data !== null && typeof data === "object" && "hookId" in data;
 }
-function EntityDetailPanel({ run, hooks, onStreamClick, spanDetailData, spanDetailError, spanDetailLoading, onSpanSelect, onWakeUpSleep, onLoadEventData, onResolveHook, encryptionKey, selectedSpan }) {
+function EntityDetailPanel({ run, onStreamClick, spanDetailData, spanDetailError, spanDetailLoading, onSpanSelect, onWakeUpSleep, onLoadEventData, onResolveHook, encryptionKey, onDecrypt, selectedSpan }) {
   const [stoppingSleep, setStoppingSleep] = reactExports.useState(false);
   const [showResolveHookModal, setShowResolveHookModal] = reactExports.useState(false);
   const [resolvingHook, setResolvingHook] = reactExports.useState(false);
@@ -65798,10 +65810,11 @@ function EntityDetailPanel({ run, hooks, onStreamClick, spanDetailData, spanDeta
       return { resource: "hook", resourceId: data.hookId, runId: void 0 };
     }
     if (res === "sleep") {
+      const waitData = data;
       return {
         resource: "sleep",
         resourceId: selectedSpan.spanId,
-        runId: void 0
+        runId: waitData == null ? void 0 : waitData.runId
       };
     }
     return { resource: void 0, resourceId: void 0, runId: void 0 };
@@ -65849,21 +65862,23 @@ function EntityDetailPanel({ run, hooks, onStreamClick, spanDetailData, spanDeta
   ]);
   const error2 = spanDetailError ?? void 0;
   const loading = spanDetailLoading ?? false;
+  const hasEncryptedFields = reactExports.useMemo(() => {
+    if (!spanDetailData)
+      return false;
+    const d2 = spanDetailData;
+    return isEncryptedMarker(d2.input) || isEncryptedMarker(d2.output) || isEncryptedMarker(d2.error) || isEncryptedMarker(d2.metadata);
+  }, [spanDetailData]);
   const hookToken = reactExports.useMemo(() => {
     if (resource !== "hook" || !resourceId)
       return void 0;
     if (isHook(spanDetailData) && spanDetailData.token) {
       return spanDetailData.token;
     }
-    const hookFromArray = hooks == null ? void 0 : hooks.find((h2) => h2.hookId === resourceId);
-    if (hookFromArray == null ? void 0 : hookFromArray.token) {
-      return hookFromArray.token;
-    }
     if (isHook(data) && data.token) {
       return data.token;
     }
     return void 0;
-  }, [resource, resourceId, spanDetailData, data, hooks]);
+  }, [resource, resourceId, spanDetailData, data]);
   reactExports.useEffect(() => {
     if (error2 && selectedSpan && resource) {
       toast.error(`Failed to load ${resource} details`, {
@@ -65937,10 +65952,7 @@ function EntityDetailPanel({ run, hooks, onStreamClick, spanDetailData, spanDeta
       setResolvingHook(false);
     }
   }, [onResolveHook, hookToken, resolvingHook, spanDetailData, data]);
-  if (!selectedSpan || !resource || !resourceId) {
-    return null;
-  }
-  const displayData = resource === "sleep" ? data : spanDetailData ?? data;
+  const displayData = spanDetailData ?? data;
   const moduleSpecifier = reactExports.useMemo(() => {
     const displayRecord = displayData;
     const displayStepName = displayRecord.stepName;
@@ -65956,16 +65968,24 @@ function EntityDetailPanel({ run, hooks, onStreamClick, spanDetailData, spanDeta
     }
     return void 0;
   }, [displayData, run.workflowName]);
+  if (!selectedSpan || !resource || !resourceId) {
+    return null;
+  }
   const resourceLabel = resource.charAt(0).toUpperCase() + resource.slice(1);
   const hasPendingActions = resource === "sleep" && canWakeUp || resource === "hook" && canResolveHook;
   const runStateLabel = run.completedAt ? "Completed" : "Live";
-  return jsxRuntimeExports.jsxs("div", { className: "flex h-full flex-col", children: [jsxRuntimeExports.jsx("div", { className: "border-b px-3 py-3", style: { borderColor: "var(--ds-gray-200)" }, children: jsxRuntimeExports.jsx("div", { className: "flex items-start justify-between gap-2", children: jsxRuntimeExports.jsxs("div", { className: "min-w-0", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntimeExports.jsx("span", { className: "inline-flex items-center rounded-full border px-2 py-0.5 text-[13px] font-medium", style: {
+  return jsxRuntimeExports.jsxs("div", { className: "flex h-full flex-col", children: [jsxRuntimeExports.jsx("div", { className: "border-b px-3 py-3", style: { borderColor: "var(--ds-gray-200)" }, children: jsxRuntimeExports.jsxs("div", { className: "flex items-start justify-between gap-2", children: [jsxRuntimeExports.jsxs("div", { className: "min-w-0", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntimeExports.jsx("span", { className: "inline-flex items-center rounded-full border px-2 py-0.5 text-[13px] font-medium", style: {
     borderColor: "var(--ds-gray-300)",
     color: "var(--ds-gray-900)",
     backgroundColor: "var(--ds-background-100)"
   }, children: resourceLabel }), jsxRuntimeExports.jsx("span", { className: "text-[13px]", style: {
     color: run.completedAt ? "var(--ds-gray-700)" : "var(--ds-green-800)"
-  }, children: runStateLabel })] }), jsxRuntimeExports.jsx("p", { className: "mt-1 truncate font-mono text-[13px]", style: { color: "var(--ds-gray-700)" }, title: resourceId, children: resourceId })] }) }) }), jsxRuntimeExports.jsxs("div", { className: "flex-1 overflow-y-auto px-3 pt-3 pb-8", children: [hasPendingActions && jsxRuntimeExports.jsxs("div", { className: "mb-4 rounded-lg border p-2", style: {
+  }, children: runStateLabel })] }), jsxRuntimeExports.jsx("p", { className: "mt-1 truncate font-mono text-[13px]", style: { color: "var(--ds-gray-700)" }, title: resourceId, children: resourceId })] }), (hasEncryptedFields || encryptionKey) && onDecrypt && jsxRuntimeExports.jsxs("button", { type: "button", onClick: onDecrypt, disabled: !!encryptionKey, className: "inline-flex items-center gap-1 rounded-md border px-2 py-1 text-xs font-medium transition-colors flex-shrink-0", style: {
+    borderColor: encryptionKey ? "var(--ds-green-400)" : "var(--ds-gray-300)",
+    color: encryptionKey ? "var(--ds-green-900)" : "var(--ds-gray-900)",
+    backgroundColor: encryptionKey ? "var(--ds-green-100)" : "var(--ds-background-100)",
+    cursor: encryptionKey ? "default" : "pointer"
+  }, children: [encryptionKey ? jsxRuntimeExports.jsx(LockOpen, { className: "h-3 w-3" }) : jsxRuntimeExports.jsx(Lock, { className: "h-3 w-3" }), encryptionKey ? "Decrypted" : "Decrypt"] })] }) }), jsxRuntimeExports.jsxs("div", { className: "flex-1 overflow-y-auto px-3 pt-3 pb-8", children: [hasPendingActions && jsxRuntimeExports.jsxs("div", { className: "mb-4 rounded-lg border p-2", style: {
     borderColor: "var(--ds-gray-300)",
     backgroundColor: "var(--ds-gray-100)"
   }, children: [jsxRuntimeExports.jsx("p", { className: "mb-2 px-1 text-[13px] font-medium uppercase tracking-wide", style: { color: "var(--ds-gray-700)" }, children: "Actions" }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [resource === "sleep" && canWakeUp && jsxRuntimeExports.jsxs("button", { type: "button", onClick: handleWakeUp, disabled: stoppingSleep, className: clsx("flex items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium", "disabled:opacity-50 disabled:cursor-not-allowed transition-colors", stoppingSleep ? "opacity-50 cursor-not-allowed" : "cursor-pointer"), style: {
@@ -68719,7 +68739,7 @@ const skeletonTrace = {
   ],
   rootSpanId: "root"
 };
-function TraceViewerTimeline({ trace: trace2 = skeletonTrace, className = "", scrollLock = false, height, withPanel = false, highlightedSpans, eagerRender = false, isLive = false }) {
+function TraceViewerTimeline({ trace: trace2 = skeletonTrace, className = "", scrollLock = false, height, withPanel = false, highlightedSpans, eagerRender = false, isLive = false, footer: footer2, knownDurationMs, hasMoreData = false }) {
   const isSkeleton = trace2 === skeletonTrace;
   const { state, dispatch: dispatch2 } = useTraceViewer();
   const { timelineRef, scrollSnapshotRef } = state;
@@ -68954,16 +68974,35 @@ function TraceViewerTimeline({ trace: trace2 = skeletonTrace, className = "", sc
     "--scrollbar-width": `${state.scrollbarWidth}px`,
     "--marker-height": `${MARKER_HEIGHT}px`,
     "--marker-notch-height": `${MARKER_NOTCH_HEIGHT}px`
-  }, children: [!hideSearchBar ? jsxRuntimeExports.jsx(SearchBar, {}) : null, jsxRuntimeExports.jsx(MiniMap, { rows, scale, timelineRef }), jsxRuntimeExports.jsxs("div", { className: clsx(styles.traceViewerContent, inert2 && styles.inert), children: [jsxRuntimeExports.jsx("div", { className: styles.timeline, ref: timelineRef, children: jsxRuntimeExports.jsx("div", { style: {
+  }, children: [!hideSearchBar ? jsxRuntimeExports.jsx(SearchBar, {}) : null, jsxRuntimeExports.jsx(MiniMap, { rows, scale, timelineRef }), jsxRuntimeExports.jsxs("div", { className: clsx(styles.traceViewerContent, inert2 && styles.inert), children: [jsxRuntimeExports.jsxs("div", { className: styles.timeline, ref: timelineRef, children: [jsxRuntimeExports.jsx("div", { style: {
     position: "relative",
     width: state.timelineWidth,
-    height: state.timelineHeight - TIMELINE_PADDING * 2,
+    minHeight: state.timelineHeight - TIMELINE_PADDING * 2,
     padding: TIMELINE_PADDING,
     paddingBottom: 0
   }, children: jsxRuntimeExports.jsxs("div", { className: styles.traceNode, style: {
     width: state.root.duration * scale || void 0,
     height: timelineHeight - TIMELINE_PADDING * 2
-  }, children: [jsxRuntimeExports.jsx(Markers, { scale, isLive }), jsxRuntimeExports.jsx(EventMarkers, { events: events2, root: state.root, scale }), jsxRuntimeExports.jsx(CursorMarker, { dispatch: dispatch2, events: events2, memoCacheRef: state.memoCacheRef, root: state.root, scale, scrollSnapshotRef, spans, timelineRef }), jsxRuntimeExports.jsx(SpanNodes, { cacheKey: memoCache.get(""), cache: memoCache, customSpanClassNameFunc: state.customSpanClassNameFunc, customSpanEventClassNameFunc: state.customSpanEventClassNameFunc, isLive, root: state.root, scale, scrollSnapshotRef, spans })] }) }) }), jsxRuntimeExports.jsx("div", { className: styles.zoomButtonTraceViewer, children: jsxRuntimeExports.jsx(ZoomButton, {}) })] }), withPanel ? jsxRuntimeExports.jsx("div", { className: clsx(styles.spanDetailPanelTraceViewer, !state.selected && styles.hidden, state.isMobile && styles.mobile), children: jsxRuntimeExports.jsx(SpanDetailPanel, { attached: true }) }) : null] });
+  }, children: [jsxRuntimeExports.jsx(Markers, { scale, isLive }), jsxRuntimeExports.jsx(EventMarkers, { events: events2, root: state.root, scale }), jsxRuntimeExports.jsx(CursorMarker, { dispatch: dispatch2, events: events2, memoCacheRef: state.memoCacheRef, root: state.root, scale, scrollSnapshotRef, spans, timelineRef }), jsxRuntimeExports.jsx(SpanNodes, { cacheKey: memoCache.get(""), cache: memoCache, customSpanClassNameFunc: state.customSpanClassNameFunc, customSpanEventClassNameFunc: state.customSpanEventClassNameFunc, isLive, root: state.root, scale, scrollSnapshotRef, spans }), knownDurationMs != null && knownDurationMs > 0 && (hasMoreData || isLive) && state.root.duration > 0 && (() => {
+    const knownPx = knownDurationMs * scale;
+    const totalPx = state.root.duration * scale;
+    const unknownWidth = totalPx - knownPx;
+    if (unknownWidth < 4)
+      return null;
+    const insetPx = Math.min(unknownWidth * 0.05, 20);
+    return jsxRuntimeExports.jsx("div", { style: {
+      position: "absolute",
+      top: 0,
+      left: knownPx + insetPx,
+      width: unknownWidth - insetPx,
+      height: "100%",
+      pointerEvents: "none",
+      zIndex: 1,
+      maskImage: "linear-gradient(to right, transparent 1%, black 3%)",
+      WebkitMaskImage: "linear-gradient(to right, transparent 1%, black 3%)",
+      background: "repeating-linear-gradient(-45deg, var(--ds-background-200) 0, var(--ds-background-200) 11px, var(--ds-gray-200) 11px, var(--ds-gray-200) 12px)"
+    } });
+  })()] }) }), footer2] }), jsxRuntimeExports.jsx("div", { className: styles.zoomButtonTraceViewer, children: jsxRuntimeExports.jsx(ZoomButton, {}) })] }), withPanel ? jsxRuntimeExports.jsx("div", { className: clsx(styles.spanDetailPanelTraceViewer, !state.selected && styles.hidden, state.isMobile && styles.mobile), children: jsxRuntimeExports.jsx(SpanDetailPanel, { attached: true }) }) : null] });
 }
 function getStatusClassName(status, isStripped = false) {
   if (isStripped && status === "pending") {
@@ -69106,14 +69145,13 @@ const waitEventsToWaitEntity = (events2) => {
     completedAt: completedEvent == null ? void 0 : completedEvent.createdAt
   };
 };
-function waitToSpan(events2, run, nowTime) {
+function waitToSpan(events2, maxEndTime) {
   const wait = waitEventsToWaitEntity(events2);
   if (!wait) {
     return null;
   }
-  const viewerEndTime = new Date(run.completedAt || nowTime) ?? nowTime;
-  const startTime = (wait == null ? void 0 : wait.createdAt) ?? nowTime;
-  const endTime = (wait == null ? void 0 : wait.completedAt) ?? viewerEndTime;
+  const startTime = wait.createdAt;
+  const endTime = wait.completedAt ?? maxEndTime;
   const start2 = dateToOtelTime(startTime);
   const end = dateToOtelTime(endTime);
   const duration2 = calculateDuration(startTime, endTime);
@@ -69139,16 +69177,67 @@ function waitToSpan(events2, run, nowTime) {
     endTime: end
   };
 }
-function stepToSpan(step, stepEvents, nowTime, maxEndTime) {
-  const now2 = nowTime ?? /* @__PURE__ */ new Date();
+const stepEventsToStepEntity = (events2) => {
+  var _a3;
+  const createdEvent = events2.find((event) => event.eventType === "step_created");
+  if (!createdEvent) {
+    return null;
+  }
+  let status = "pending";
+  let attempt = 0;
+  let startedAt;
+  let completedAt;
+  for (const e of events2) {
+    switch (e.eventType) {
+      case "step_started":
+        status = "running";
+        attempt += 1;
+        if (!startedAt)
+          startedAt = e.createdAt;
+        completedAt = void 0;
+        break;
+      case "step_completed":
+        status = "completed";
+        completedAt = e.createdAt;
+        break;
+      case "step_failed":
+        status = "failed";
+        completedAt = e.createdAt;
+        break;
+      case "step_retrying":
+        status = "pending";
+        completedAt = void 0;
+        break;
+    }
+  }
+  if (attempt === 0)
+    attempt = 1;
+  const lastEvent = events2[events2.length - 1];
+  return {
+    stepId: createdEvent.correlationId,
+    runId: createdEvent.runId,
+    stepName: ((_a3 = createdEvent.eventData) == null ? void 0 : _a3.stepName) ?? "",
+    status,
+    attempt,
+    createdAt: createdEvent.createdAt,
+    updatedAt: (lastEvent == null ? void 0 : lastEvent.createdAt) ?? createdEvent.createdAt,
+    startedAt,
+    completedAt,
+    specVersion: createdEvent.specVersion
+  };
+};
+function stepToSpan(stepEvents, maxEndTime) {
+  const step = stepEventsToStepEntity(stepEvents);
+  if (!step) {
+    return null;
+  }
   const parsedName = parseStepName(String(step.stepName));
-  const { input: _i, output: _o2, error: _e2, ...stepIdentity } = step;
   const attributes = {
     resource: "step",
-    data: stepIdentity
+    data: step
   };
   const resource = "step";
-  const endTime = new Date(step.completedAt ?? maxEndTime ?? now2);
+  const endTime = new Date(step.completedAt ?? maxEndTime);
   const events2 = convertEventsToSpanEvents(stepEvents, false);
   const spanStartTime = new Date(step.createdAt);
   let activeStartTime = step.startedAt ? new Date(step.startedAt) : void 0;
@@ -69176,7 +69265,7 @@ function stepToSpan(step, stepEvents, nowTime, maxEndTime) {
   };
 }
 const hookEventsToHookEntity = (events2) => {
-  var _a3;
+  var _a3, _b;
   const createdEvent = events2.find((event) => event.eventType === "hook_created");
   if (!createdEvent) {
     return null;
@@ -69187,20 +69276,20 @@ const hookEventsToHookEntity = (events2) => {
   return {
     hookId: createdEvent.correlationId,
     runId: createdEvent.runId,
+    token: (_a3 = createdEvent.eventData) == null ? void 0 : _a3.token,
     createdAt: createdEvent.createdAt,
     receivedCount: receivedEvents.length,
     lastReceivedAt: (lastReceivedEvent == null ? void 0 : lastReceivedEvent.createdAt) || void 0,
-    disposedAt: ((_a3 = disposedEvents.at(-1)) == null ? void 0 : _a3.createdAt) || void 0
+    disposedAt: ((_b = disposedEvents.at(-1)) == null ? void 0 : _b.createdAt) || void 0
   };
 };
-function hookToSpan(hookEvents, run, nowTime) {
+function hookToSpan(hookEvents, maxEndTime) {
   const hook = hookEventsToHookEntity(hookEvents);
   if (!hook) {
     return null;
   }
   const events2 = convertEventsToSpanEvents(hookEvents, false);
-  const viewerEndTime = new Date(run.completedAt || nowTime) ?? nowTime;
-  const endTime = hook.disposedAt || viewerEndTime;
+  const endTime = hook.disposedAt || maxEndTime;
   return {
     spanId: String(hook.hookId),
     name: String(hook.hookId),
@@ -69252,6 +69341,102 @@ function runToSpan(run, runEvents, nowTime) {
     activeStartTime: activeStartTime && activeStartTime.getTime() > spanStartTime.getTime() ? dateToOtelTime(activeStartTime) : void 0
   };
 }
+const isStepEvent = (eventType) => eventType.startsWith("step_");
+const isTimerEvent = (eventType) => eventType === "wait_created" || eventType === "wait_completed";
+const isHookLifecycleEvent = (eventType) => eventType === "hook_received" || eventType === "hook_created" || eventType === "hook_disposed";
+function pushEvent(map2, correlationId, event) {
+  const existing = map2.get(correlationId);
+  if (existing) {
+    existing.push(event);
+    return;
+  }
+  map2.set(correlationId, [event]);
+}
+function groupEventsByCorrelation(events2) {
+  const eventsByStepId = /* @__PURE__ */ new Map();
+  const runLevelEvents = [];
+  const timerEvents = /* @__PURE__ */ new Map();
+  const hookEvents = /* @__PURE__ */ new Map();
+  for (const event of events2) {
+    const correlationId = event.correlationId;
+    if (!correlationId) {
+      runLevelEvents.push(event);
+      continue;
+    }
+    if (isTimerEvent(event.eventType)) {
+      pushEvent(timerEvents, correlationId, event);
+      continue;
+    }
+    if (isHookLifecycleEvent(event.eventType)) {
+      pushEvent(hookEvents, correlationId, event);
+      continue;
+    }
+    if (isStepEvent(event.eventType)) {
+      pushEvent(eventsByStepId, correlationId, event);
+      continue;
+    }
+    runLevelEvents.push(event);
+  }
+  return { eventsByStepId, runLevelEvents, timerEvents, hookEvents };
+}
+function computeLatestKnownTime(events2, run) {
+  let latest = new Date(run.createdAt).getTime();
+  for (const event of events2) {
+    const t = new Date(event.createdAt).getTime();
+    if (t > latest)
+      latest = t;
+  }
+  return new Date(latest);
+}
+function buildSpans(run, groupedEvents, now2, latestKnownTime) {
+  const childMaxEnd = latestKnownTime;
+  const stepSpans = Array.from(groupedEvents.eventsByStepId.values()).map((events2) => stepToSpan(events2, childMaxEnd)).filter((span) => span !== null);
+  const hookSpans = Array.from(groupedEvents.hookEvents.values()).map((events2) => hookToSpan(events2, childMaxEnd)).filter((span) => span !== null);
+  const waitSpans = Array.from(groupedEvents.timerEvents.values()).map((events2) => waitToSpan(events2, childMaxEnd)).filter((span) => span !== null);
+  return {
+    runSpan: runToSpan(run, groupedEvents.runLevelEvents, now2),
+    spans: [...stepSpans, ...hookSpans, ...waitSpans]
+  };
+}
+function cascadeSpans(runSpan, spans) {
+  const sortedSpans = [
+    runSpan,
+    ...spans.slice().sort((a2, b2) => {
+      const aStart = otelTimeToMs(a2.startTime);
+      const bStart = otelTimeToMs(b2.startTime);
+      return aStart - bStart;
+    })
+  ];
+  return sortedSpans.map((span, index2) => {
+    const parentSpanId = index2 === 0 ? void 0 : String(sortedSpans[index2 - 1].spanId);
+    return {
+      ...span,
+      parentSpanId
+    };
+  });
+}
+function buildTrace(run, events2, now2) {
+  const groupedEvents = groupEventsByCorrelation(events2);
+  const latestKnownTime = computeLatestKnownTime(events2, run);
+  const { runSpan, spans } = buildSpans(run, groupedEvents, now2, latestKnownTime);
+  const sortedCascadingSpans = cascadeSpans(runSpan, spans);
+  const traceStartMs = otelTimeToMs(runSpan.startTime);
+  const knownDurationMs = latestKnownTime.getTime() - traceStartMs;
+  return {
+    traceId: run.runId,
+    rootSpanId: run.runId,
+    spans: sortedCascadingSpans,
+    resources: [
+      {
+        name: "workflow",
+        attributes: {
+          "service.name": WORKFLOW_LIBRARY.name
+        }
+      }
+    ],
+    knownDurationMs: Math.max(0, knownDurationMs)
+  };
+}
 function useLiveTick(isLive) {
   const { state, dispatch: dispatch2 } = useTraceViewer();
   const stateRef = reactExports.useRef(state);
@@ -69394,7 +69579,7 @@ function SpanContextMenu({ menu, items, onClose }) {
     onClose();
   }, children: [item.icon ?? null, item.label] }, item.label))] }), document.body);
 }
-function TraceViewerWithContextMenu({ trace: trace2, run, hooks, isLive, onWakeUpSleep, onCancelRun, onResolveHook, onLoadMoreSpans, hasMoreSpans = false, isLoadingMoreSpans = false, children: children2 }) {
+function TraceViewerWithContextMenu({ trace: trace2, run, isLive, onWakeUpSleep, onCancelRun, onResolveHook, onLoadMoreSpans, hasMoreSpans = false, isLoadingMoreSpans = false, children: children2 }) {
   const { state, dispatch: dispatch2 } = useTraceViewer();
   useLiveTick(isLive);
   const [contextMenu, setContextMenu] = reactExports.useState(null);
@@ -69408,13 +69593,6 @@ function TraceViewerWithContextMenu({ trace: trace2, run, hooks, isLive, onWakeU
     }
     return map2;
   }, [trace2.spans]);
-  const hookLookup = reactExports.useMemo(() => {
-    const map2 = /* @__PURE__ */ new Map();
-    for (const hook of hooks) {
-      map2.set(hook.hookId, hook);
-    }
-    return map2;
-  }, [hooks]);
   const handleResolveHook = reactExports.useCallback(async (payload) => {
     if (resolvingHook || !resolveHookTarget || !onResolveHook)
       return;
@@ -69426,7 +69604,7 @@ function TraceViewerWithContextMenu({ trace: trace2, run, hooks, isLive, onWakeU
     }
     try {
       setResolvingHook(true);
-      await onResolveHook(resolveHookTarget.token, payload, resolveHookTarget);
+      await onResolveHook(resolveHookTarget.token, payload);
       toast.success("Hook resolved", {
         description: "The payload has been sent and the hook resolved."
       });
@@ -69536,16 +69714,18 @@ function TraceViewerWithContextMenu({ trace: trace2, run, hooks, isLive, onWakeU
       });
     }
     if (menu.resourceType === "hook" && isRunActive && onResolveHook) {
-      const hook = hookLookup.get(menu.spanId);
       const span = spanLookup.get(menu.spanId);
       const hookData = (_a3 = span == null ? void 0 : span.attributes) == null ? void 0 : _a3.data;
       const isDisposed = Boolean(hookData == null ? void 0 : hookData.disposedAt) || Boolean((_b = span == null ? void 0 : span.events) == null ? void 0 : _b.some((e) => e.name === "hook_disposed")) || resolvedHookIds.has(menu.spanId);
-      if ((hook == null ? void 0 : hook.token) && !isDisposed) {
+      if ((hookData == null ? void 0 : hookData.token) && !isDisposed) {
         items.push({
           label: "Resolve Hook",
           icon: jsxRuntimeExports.jsx(Send, { className: "h-3.5 w-3.5" }),
           action: () => {
-            setResolveHookTarget(hook);
+            setResolveHookTarget({
+              hookId: menu.spanId,
+              token: hookData.token
+            });
           }
         });
       }
@@ -69599,7 +69779,6 @@ function TraceViewerWithContextMenu({ trace: trace2, run, hooks, isLive, onWakeU
     onWakeUpSleep,
     onCancelRun,
     onResolveHook,
-    hookLookup,
     spanLookup,
     resolvedHookIds,
     run.runId,
@@ -69607,104 +69786,6 @@ function TraceViewerWithContextMenu({ trace: trace2, run, hooks, isLive, onWakeU
   ]);
   return jsxRuntimeExports.jsxs("div", { className: "relative w-full h-full", ref: containerRef, children: [children2, contextMenu ? jsxRuntimeExports.jsx(SpanContextMenu, { menu: contextMenu, items: getMenuItems(contextMenu), onClose: closeMenu }) : null, jsxRuntimeExports.jsx(ResolveHookModal, { isOpen: resolveHookTarget !== null, onClose: () => setResolveHookTarget(null), onSubmit: handleResolveHook, isSubmitting: resolvingHook })] });
 }
-const isTimerEvent = (eventType) => eventType === "wait_created" || eventType === "wait_completed";
-const isHookLifecycleEvent = (eventType) => eventType === "hook_received" || eventType === "hook_created" || eventType === "hook_disposed";
-const pushEvent = (map2, correlationId, event) => {
-  const existing = map2.get(correlationId);
-  if (existing) {
-    existing.push(event);
-    return;
-  }
-  map2.set(correlationId, [event]);
-};
-const groupEventsByCorrelation = (events2, steps, hooks) => {
-  const eventsByStepId = /* @__PURE__ */ new Map();
-  const eventsByHookId = /* @__PURE__ */ new Map();
-  const runLevelEvents = [];
-  const timerEvents = /* @__PURE__ */ new Map();
-  const hookEvents = /* @__PURE__ */ new Map();
-  const stepIds = new Set(steps.map((step) => step.stepId));
-  const hookIds = new Set(hooks.map((hook) => hook.hookId));
-  for (const event of events2) {
-    const correlationId = event.correlationId;
-    if (!correlationId) {
-      runLevelEvents.push(event);
-      continue;
-    }
-    if (isTimerEvent(event.eventType)) {
-      pushEvent(timerEvents, correlationId, event);
-      continue;
-    }
-    if (isHookLifecycleEvent(event.eventType)) {
-      pushEvent(hookEvents, correlationId, event);
-      continue;
-    }
-    if (stepIds.has(correlationId)) {
-      pushEvent(eventsByStepId, correlationId, event);
-      continue;
-    }
-    if (hookIds.has(correlationId)) {
-      pushEvent(eventsByHookId, correlationId, event);
-      continue;
-    }
-    runLevelEvents.push(event);
-  }
-  return {
-    eventsByStepId,
-    eventsByHookId,
-    runLevelEvents,
-    timerEvents,
-    hookEvents
-  };
-};
-const buildSpans = (run, steps, groupedEvents, now2) => {
-  const viewerEndTime = new Date(run.completedAt || now2);
-  const stepSpans = steps.map((step) => {
-    const stepEvents = groupedEvents.eventsByStepId.get(step.stepId) || [];
-    return stepToSpan(step, stepEvents, now2, viewerEndTime);
-  });
-  const hookSpans = Array.from(groupedEvents.hookEvents.values()).map((events2) => hookToSpan(events2, run, now2)).filter((span) => span !== null);
-  const waitSpans = Array.from(groupedEvents.timerEvents.values()).map((events2) => waitToSpan(events2, run, now2)).filter((span) => span !== null);
-  return {
-    runSpan: runToSpan(run, groupedEvents.runLevelEvents, now2),
-    spans: [...stepSpans, ...hookSpans, ...waitSpans]
-  };
-};
-const cascadeSpans = (runSpan, spans) => {
-  const sortedSpans = [
-    runSpan,
-    ...spans.slice().sort((a2, b2) => {
-      const aStart = otelTimeToMs(a2.startTime);
-      const bStart = otelTimeToMs(b2.startTime);
-      return aStart - bStart;
-    })
-  ];
-  return sortedSpans.map((span, index2) => {
-    const parentSpanId = index2 === 0 ? void 0 : String(sortedSpans[index2 - 1].spanId);
-    return {
-      ...span,
-      parentSpanId
-    };
-  });
-};
-const buildTrace = (run, steps, hooks, events2, now2) => {
-  const groupedEvents = groupEventsByCorrelation(events2, steps, hooks);
-  const { runSpan, spans } = buildSpans(run, steps, groupedEvents, now2);
-  const sortedCascadingSpans = cascadeSpans(runSpan, spans);
-  return {
-    traceId: run.runId,
-    rootSpanId: run.runId,
-    spans: sortedCascadingSpans,
-    resources: [
-      {
-        name: "workflow",
-        attributes: {
-          "service.name": WORKFLOW_LIBRARY.name
-        }
-      }
-    ]
-  };
-};
 function SelectionBridge({ onSelectionChange }) {
   const { state } = useTraceViewer();
   const { selected: selected2 } = state;
@@ -69760,18 +69841,29 @@ function PanelResizeHandle({ onResize }) {
   }, [onResize]);
   return jsxRuntimeExports.jsx("div", { className: "absolute left-0 top-0 bottom-0 w-1 cursor-col-resize hover:bg-blue-400/50 z-10", onPointerDown: handlePointerDown });
 }
-const WorkflowTraceViewer = ({ run, steps, hooks, events: events2, isLoading, error: error2, spanDetailData, spanDetailLoading, spanDetailError, onWakeUpSleep, onResolveHook, onCancelRun, onStreamClick, onSpanSelect, onLoadEventData, onLoadMoreSpans, hasMoreSpans = false, isLoadingMoreSpans = false, encryptionKey }) => {
+function TraceViewerFooter({ hasMore, isLive }) {
+  const style2 = { color: "var(--ds-gray-900)" };
+  if (hasMore) {
+    return jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center gap-2 py-3 text-xs", style: style2, children: [jsxRuntimeExports.jsxs("svg", { className: "h-3.5 w-3.5 animate-spin", viewBox: "0 0 24 24", fill: "none", children: [jsxRuntimeExports.jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), jsxRuntimeExports.jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })] }), "Loading more events…"] });
+  }
+  if (isLive) {
+    return jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center py-3 text-xs", style: style2, children: "Waiting for more events…" });
+  }
+  return jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center py-3 text-xs", style: style2, children: "End of run" });
+}
+const WorkflowTraceViewer = ({ run, events: events2, isLoading, error: error2, spanDetailData, spanDetailLoading, spanDetailError, onWakeUpSleep, onResolveHook, onCancelRun, onStreamClick, onSpanSelect, onLoadEventData, onLoadMoreSpans, hasMoreSpans = false, isLoadingMoreSpans = false, encryptionKey, onDecrypt }) => {
   const [selectedSpan, setSelectedSpan] = reactExports.useState(null);
   const [panelWidth, setPanelWidth] = reactExports.useState(DEFAULT_PANEL_WIDTH);
   const [deselectTrigger, setDeselectTrigger] = reactExports.useState(0);
   const [selectRequest, setSelectRequest] = reactExports.useState(null);
   const isLive = Boolean(run && !run.completedAt);
-  const trace2 = reactExports.useMemo(() => {
-    if (!run) {
+  const traceWithMeta = reactExports.useMemo(() => {
+    if (!(run == null ? void 0 : run.runId)) {
       return void 0;
     }
-    return buildTrace(run, steps, hooks, events2, /* @__PURE__ */ new Date());
-  }, [run, steps, hooks, events2]);
+    return buildTrace(run, events2, /* @__PURE__ */ new Date());
+  }, [run, events2]);
+  const trace2 = traceWithMeta;
   reactExports.useEffect(() => {
     if (error2 && !isLoading) {
       console.error(error2);
@@ -69856,10 +69948,10 @@ const WorkflowTraceViewer = ({ run, steps, hooks, events: events2, isLoading, er
     const workflowName = data.workflowName;
     return (stepName ? (_a3 = parseStepName(stepName)) == null ? void 0 : _a3.shortName : void 0) ?? (workflowName ? (_b = parseWorkflowName(workflowName)) == null ? void 0 : _b.shortName : void 0) ?? stepName ?? workflowName ?? data.hookId ?? "Details";
   }, [selectedSpan == null ? void 0 : selectedSpan.data]);
-  if (isLoading || !trace2) {
+  if (!trace2) {
     return jsxRuntimeExports.jsxs("div", { className: "relative w-full h-full", children: [jsxRuntimeExports.jsx("div", { className: "border-b border-gray-alpha-400 w-full" }), jsxRuntimeExports.jsx(Skeleton$2, { className: "w-full ml-2 mt-1 mb-1 h-[56px]" }), jsxRuntimeExports.jsxs("div", { className: "p-2 relative w-full", children: [jsxRuntimeExports.jsx(Skeleton$2, { className: "w-full mt-6 h-[20px]" }), jsxRuntimeExports.jsx(Skeleton$2, { className: "w-[10%] mt-2 ml-6 h-[20px]" }), jsxRuntimeExports.jsx(Skeleton$2, { className: "w-[10%] mt-2 ml-12 h-[20px]" }), jsxRuntimeExports.jsx(Skeleton$2, { className: "w-[20%] mt-2 ml-16 h-[20px]" })] })] });
   }
-  return jsxRuntimeExports.jsxs("div", { className: "relative w-full h-full flex", children: [jsxRuntimeExports.jsx("div", { className: "flex-1 min-w-0 relative", children: jsxRuntimeExports.jsxs(TraceViewerContextProvider, { customSpanClassNameFunc: getCustomSpanClassName, customSpanEventClassNameFunc: getCustomSpanEventClassName, children: [jsxRuntimeExports.jsx(SelectionBridge, { onSelectionChange: handleSelectionChange }), jsxRuntimeExports.jsx(DeselectBridge, { triggerDeselect: deselectTrigger }), jsxRuntimeExports.jsx(SelectBridge, { selectRequest }), jsxRuntimeExports.jsx(TraceViewerWithContextMenu, { trace: trace2, run, hooks, isLive, onWakeUpSleep, onCancelRun, onResolveHook, onLoadMoreSpans, hasMoreSpans, isLoadingMoreSpans, children: jsxRuntimeExports.jsx(TraceViewerTimeline, { eagerRender: true, height: "100%", isLive, trace: trace2 }) })] }) }), selectedSpan && jsxRuntimeExports.jsxs("div", { className: "relative border-l flex-shrink-0 flex flex-col", style: {
+  return jsxRuntimeExports.jsxs("div", { className: "relative w-full h-full flex", children: [jsxRuntimeExports.jsx("div", { className: "flex-1 min-w-0 relative", children: jsxRuntimeExports.jsxs(TraceViewerContextProvider, { customSpanClassNameFunc: getCustomSpanClassName, customSpanEventClassNameFunc: getCustomSpanEventClassName, children: [jsxRuntimeExports.jsx(SelectionBridge, { onSelectionChange: handleSelectionChange }), jsxRuntimeExports.jsx(DeselectBridge, { triggerDeselect: deselectTrigger }), jsxRuntimeExports.jsx(SelectBridge, { selectRequest }), jsxRuntimeExports.jsx(TraceViewerWithContextMenu, { trace: trace2, run, isLive, onWakeUpSleep, onCancelRun, onResolveHook, onLoadMoreSpans, hasMoreSpans, isLoadingMoreSpans, children: jsxRuntimeExports.jsx(TraceViewerTimeline, { eagerRender: true, height: "100%", isLive, trace: trace2, knownDurationMs: traceWithMeta == null ? void 0 : traceWithMeta.knownDurationMs, hasMoreData: hasMoreSpans, footer: jsxRuntimeExports.jsx(TraceViewerFooter, { hasMore: hasMoreSpans, isLive }) }) })] }) }), selectedSpan && jsxRuntimeExports.jsxs("div", { className: "relative border-l flex-shrink-0 flex flex-col", style: {
     width: panelWidth,
     borderColor: "var(--ds-gray-200)",
     backgroundColor: "var(--ds-background-100)"
@@ -69929,7 +70021,7 @@ const WorkflowTraceViewer = ({ run, steps, hooks, events: events2, isLoading, er
     e.currentTarget.style.background = "var(--ds-gray-alpha-100)";
   }, onMouseLeave: (e) => {
     e.currentTarget.style.background = "transparent";
-  }, children: jsxRuntimeExports.jsx(X$3, { size: 16 }) }) })] }), jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto", children: jsxRuntimeExports.jsx(ErrorBoundary, { title: "Failed to load entity details", children: jsxRuntimeExports.jsx(EntityDetailPanel, { run, hooks, onStreamClick, spanDetailData: spanDetailData ?? null, spanDetailError, spanDetailLoading, onSpanSelect: handleSpanSelect, onWakeUpSleep, onLoadEventData, onResolveHook, encryptionKey, selectedSpan }) }) })] })] });
+  }, children: jsxRuntimeExports.jsx(X$3, { size: 16 }) }) })] }), jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto", children: jsxRuntimeExports.jsx(ErrorBoundary, { title: "Failed to load entity details", children: jsxRuntimeExports.jsx(EntityDetailPanel, { run, onStreamClick, spanDetailData: spanDetailData ?? null, spanDetailError, spanDetailLoading, onSpanSelect: handleSpanSelect, onWakeUpSleep, onLoadEventData, onResolveHook, encryptionKey, onDecrypt, selectedSpan }) }) })] })] });
 };
 function deserializeChunkText(text2) {
   try {
@@ -72703,9 +72795,6 @@ async function fetchRuns$1(worldEnv, params) {
 async function fetchRun$1(worldEnv, runId, resolveData = "all") {
   return rpc("fetchRun", { worldEnv, runId, resolveData });
 }
-async function fetchSteps$1(worldEnv, runId, params) {
-  return rpc("fetchSteps", { worldEnv, runId, params });
-}
 async function fetchStep$1(worldEnv, runId, stepId, resolveData = "all") {
   return rpc("fetchStep", { worldEnv, runId, stepId, resolveData });
 }
@@ -72715,9 +72804,6 @@ async function fetchEvents$1(worldEnv, runId, params) {
 async function fetchEvent$1(worldEnv, runId, eventId, resolveData = "all") {
   return rpc("fetchEvent", { worldEnv, runId, eventId, resolveData });
 }
-async function fetchEventsByCorrelationId$1(worldEnv, correlationId, params) {
-  return rpc("fetchEventsByCorrelationId", { worldEnv, correlationId, params });
-}
 async function fetchHooks$1(worldEnv, params) {
   return rpc("fetchHooks", { worldEnv, params });
 }
@@ -73161,6 +73247,16 @@ function parseDurationToDate(param) {
     throw new Error(`Invalid duration parameter. Expected a duration string, number (milliseconds), or Date object.`);
   }
 }
+function resolveWorkflowTargetWorld(env2 = process.env) {
+  const configuredWorld = env2.WORKFLOW_TARGET_WORLD;
+  if (configuredWorld) {
+    return configuredWorld;
+  }
+  return env2.VERCEL_DEPLOYMENT_ID ? "vercel" : "local";
+}
+function isVercelWorldTarget(targetWorld) {
+  return targetWorld === "vercel" || targetWorld === "@workflow/world-vercel";
+}
 const BASE_URL = "https://useworkflow.dev/err";
 function isError(value) {
   return typeof value === "object" && value !== null && "name" in value && "message" in value;
@@ -89427,8 +89523,8 @@ function requireGetVercelOidcToken$1() {
     }
     try {
       const [{ getTokenPayload, isExpired }, { refreshToken }] = await Promise.all([
-        await import("./token-util-CvLiUUQD.js").then((n) => n.t),
-        await import("./token-CWWXwMh8.js").then((n) => n.t)
+        await import("./token-util-YAVqVR6-.js").then((n) => n.t),
+        await import("./token-mzBpVePm.js").then((n) => n.t)
       ]);
       if (!token || isExpired(getTokenPayload(token))) {
         await refreshToken();
@@ -115613,19 +115709,21 @@ function createQueue$2(config2) {
               body: body2
             });
           }
-          if (response2.ok) {
-            return;
-          }
           const text2 = await response2.text();
-          if (response2.status === 503) {
+          if (response2.ok) {
             try {
               const timeoutSeconds = Number(JSON.parse(text2).timeoutSeconds);
-              const timeoutMs = Math.min(timeoutSeconds * 1e3, MAX_SAFE_TIMEOUT_MS);
-              await setTimeout$1(timeoutMs);
-              defaultRetriesLeft++;
-              continue;
+              if (Number.isFinite(timeoutSeconds) && timeoutSeconds >= 0) {
+                if (timeoutSeconds > 0) {
+                  const timeoutMs = Math.min(timeoutSeconds * 1e3, MAX_SAFE_TIMEOUT_MS);
+                  await setTimeout$1(timeoutMs);
+                }
+                defaultRetriesLeft++;
+                continue;
+              }
             } catch {
             }
+            return;
           }
           console.error(`[local world] Failed to queue message`, {
             queueName,
@@ -115678,7 +115776,7 @@ function createQueue$2(config2) {
           timeoutSeconds = Math.min(result.timeoutSeconds, LOCAL_QUEUE_MAX_VISIBILITY);
         }
         if (timeoutSeconds != null) {
-          return Response.json({ timeoutSeconds }, { status: 503 });
+          return Response.json({ timeoutSeconds });
         }
         return Response.json({ ok: true });
       } catch (error2) {
@@ -117129,8 +117227,8 @@ function requireGetVercelOidcToken() {
     }
     try {
       const [{ getTokenPayload, isExpired }, { refreshToken }] = await Promise.all([
-        await import("./token-util-l0RNhdPG.js").then((n) => n.t),
-        await import("./token-DJXheGCg.js").then((n) => n.t)
+        await import("./token-util-D7WmNSMO.js").then((n) => n.t),
+        await import("./token-BRJJ012D.js").then((n) => n.t)
       ]);
       if (!token || isExpired(getTokenPayload(token), options == null ? void 0 : options.expirationBufferMs)) {
         await refreshToken(options);
@@ -117749,11 +117847,17 @@ async function fetchRunKey(deploymentId, projectId, runId, options) {
     headers: {
       authorization: `Bearer ${token}`
     },
+    // @ts-expect-error -- undici dispatcher is accepted by Node.js fetch but not in @types/node's RequestInit
     dispatcher: getDispatcher()
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- undici v7 dispatcher types don't match @types/node's RequestInit
   });
   if (!response2.ok) {
-    throw new Error(`Failed to fetch run key for ${runId} (deployment ${deploymentId}): HTTP ${response2.status}`);
+    let body2;
+    try {
+      body2 = await response2.text();
+    } catch {
+      body2 = "<unable to read response body>";
+    }
+    throw new Error(`Failed to fetch run key for ${runId} (deployment ${deploymentId}): HTTP ${response2.status} ${response2.statusText}${body2 ? ` — ${body2}` : ""}`);
   }
   const data = await response2.json();
   const result = object$1({ key: string$1().nullable() }).safeParse(data);
@@ -117768,7 +117872,7 @@ async function fetchRunKey(deploymentId, projectId, runId, options) {
 function createGetEncryptionKeyForRun(projectId, teamId, token) {
   if (!projectId)
     return void 0;
-  const currentDeploymentId = process.env.VERCEL_DEPLOYMENT_ID;
+  const isServerlessRuntime = process.env.VERCEL === "1";
   let localDeploymentKey;
   function getLocalDeploymentKey() {
     if (localDeploymentKey)
@@ -117782,12 +117886,16 @@ function createGetEncryptionKeyForRun(projectId, teamId, token) {
   return async function getEncryptionKeyForRun2(run, context) {
     const runId = typeof run === "string" ? run : run.runId;
     const deploymentId = typeof run === "string" ? context == null ? void 0 : context.deploymentId : run.deploymentId;
-    if (!deploymentId || deploymentId === currentDeploymentId) {
-      const localKey = getLocalDeploymentKey();
-      if (!localKey)
-        return void 0;
-      return deriveRunKey(localKey, projectId, runId);
+    if (isServerlessRuntime) {
+      if (!deploymentId || deploymentId === process.env.VERCEL_DEPLOYMENT_ID) {
+        const localKey = getLocalDeploymentKey();
+        if (!localKey)
+          return void 0;
+        return deriveRunKey(localKey, projectId, runId);
+      }
     }
+    if (!deploymentId)
+      return void 0;
     return fetchRunKey(deploymentId, projectId, runId, { token, teamId });
   };
 }
@@ -117849,7 +117957,7 @@ const PeerService = SemanticConvention("peer.service");
 const RpcSystem = SemanticConvention("rpc.system");
 const RpcService = SemanticConvention("rpc.service");
 const RpcMethod = SemanticConvention("rpc.method");
-const version$1 = "4.1.0-beta.41";
+const version$1 = "4.1.0-beta.42";
 const DEFAULT_RESOLVE_DATA_OPTION = "all";
 function deserializeError(obj) {
   const { error: error2, ...rest } = obj;
@@ -118970,26 +119078,19 @@ const require$1 = createRequire$1(join$1(process.cwd(), "index.js"));
 const WorldCache = Symbol.for("@workflow/world//cache");
 const StubbedWorldCache = Symbol.for("@workflow/world//stubbedCache");
 const globalSymbols = globalThis;
-function defaultWorld() {
-  if (process.env.VERCEL_DEPLOYMENT_ID) {
-    return "vercel";
-  }
-  return "local";
-}
 const createWorld = () => {
-  const targetWorld = process.env.WORKFLOW_TARGET_WORLD || defaultWorld();
-  if (targetWorld === "vercel") {
-    return createVercelWorld({
-      token: process.env.WORKFLOW_VERCEL_AUTH_TOKEN,
-      projectConfig: {
-        environment: process.env.WORKFLOW_VERCEL_ENV,
-        projectId: process.env.WORKFLOW_VERCEL_PROJECT,
-        // real ID (prj_xxx)
-        projectName: process.env.WORKFLOW_VERCEL_PROJECT_NAME,
-        // slug (my-app)
-        teamId: process.env.WORKFLOW_VERCEL_TEAM
-      }
-    });
+  const targetWorld = resolveWorkflowTargetWorld();
+  if (isVercelWorldTarget(targetWorld)) {
+    const staleEnvVars = [
+      "WORKFLOW_VERCEL_PROJECT",
+      "WORKFLOW_VERCEL_TEAM",
+      "WORKFLOW_VERCEL_AUTH_TOKEN",
+      "WORKFLOW_VERCEL_ENV"
+    ].filter((key) => process.env[key]);
+    if (staleEnvVars.length > 0) {
+      console.warn(`[workflow] Warning: ${staleEnvVars.join(", ")} env var(s) are set but have no effect at runtime. These are only used by the Workflow CLI. Remove them from your Vercel project environment variables.`);
+    }
+    return createVercelWorld();
   }
   if (targetWorld === "local") {
     return createLocalWorld({
@@ -122211,7 +122312,7 @@ async function resumeHook$2(tokenOrHook, payload, encryptionKeyOverride) {
     });
   });
 }
-const version = "4.2.0-beta.67";
+const version = "4.2.0-beta.68";
 const ulid = monotonicFactory();
 async function start$1(workflow, argsOrOptions, options) {
   return await waitedUntil(() => {
@@ -122242,7 +122343,10 @@ async function start$1(workflow, argsOrOptions, options) {
       const traceCarrier = await serializeTraceCarrier();
       const specVersion = opts.specVersion ?? SPEC_VERSION_CURRENT;
       const v1Compat = isLegacySpecVersion(specVersion);
-      const rawKey = await ((_a3 = world.getEncryptionKeyForRun) == null ? void 0 : _a3.call(world, runId, { ...opts }));
+      const rawKey = await ((_a3 = world.getEncryptionKeyForRun) == null ? void 0 : _a3.call(world, runId, {
+        ...opts,
+        deploymentId
+      }));
       const encryptionKey = rawKey ? await importKey(rawKey) : void 0;
       const workflowArguments = await dehydrateWorkflowArguments(args, runId, encryptionKey, ops, globalThis, v1Compat);
       const result = await world.events.create(runId, {
@@ -123506,31 +123610,6 @@ async function fetchEvent(worldEnv, runId, eventId, resolveData = "all") {
     });
   }
 }
-async function fetchEventsByCorrelationId(worldEnv, correlationId, params) {
-  const { cursor, sortOrder = "asc", limit = 1e3, withData = false } = params;
-  try {
-    const world = await getWorldFromEnv(worldEnv);
-    const result = await world.events.listByCorrelationId({
-      correlationId,
-      pagination: { cursor, limit, sortOrder },
-      resolveData: withData ? "all" : "none"
-    });
-    return createResponse({
-      data: result.data,
-      cursor: result.cursor ?? void 0,
-      hasMore: result.hasMore
-    });
-  } catch (error2) {
-    return createServerActionError(
-      error2,
-      "world.events.listByCorrelationId",
-      {
-        correlationId,
-        ...params
-      }
-    );
-  }
-}
 async function fetchHooks(worldEnv, params) {
   const { runId, cursor, sortOrder = "desc", limit = 10 } = params;
   try {
@@ -129521,57 +129600,72 @@ function useWorkflowResourceData(env2, resource, resourceId, options = {}) {
     }
     setData(null);
     setError(null);
+    setLoading(true);
     if (resource === "hook") {
-      const { error: error22, result } = await unwrapServerActionResult(
-        fetchHook$1(env2, resourceId, "all")
-      );
-      if (error22) {
-        setError(error22);
-        return;
-      }
       try {
-        setData(await hydrate(result));
-      } catch (hydrateError) {
-        setError(
-          hydrateError instanceof Error ? hydrateError : new Error(String(hydrateError))
+        const { error: error22, result } = await unwrapServerActionResult(
+          fetchHook$1(env2, resourceId, "all")
         );
+        if (error22) {
+          setError(error22);
+          return;
+        }
+        try {
+          setData(await hydrate(result));
+        } catch (hydrateError) {
+          setError(
+            hydrateError instanceof Error ? hydrateError : new Error(String(hydrateError))
+          );
+        }
+      } finally {
+        setLoading(false);
       }
       return;
     }
     if (resource === "sleep") {
-      const { error: error22, result } = await unwrapServerActionResult(
-        fetchEventsByCorrelationId$1(env2, resourceId, {
-          sortOrder: "asc",
-          limit: 100,
-          withData: true
-        })
-      );
-      if (error22) {
-        setError(error22);
-        return;
-      }
       try {
-        const events2 = await Promise.all(
-          result.data.map(hydrate)
+        if (!runId) {
+          setError(new Error("runId is required for loading sleep details"));
+          return;
+        }
+        const { error: error22, result } = await unwrapServerActionResult(
+          fetchEvents$1(env2, runId, {
+            sortOrder: "asc",
+            limit: 1e3,
+            withData: true
+          })
         );
-        const data2 = waitEventsToWaitEntity(events2);
-        if (data2 === null) {
+        if (error22) {
+          setError(error22);
+          return;
+        }
+        try {
+          const allEvents = result.data.map(
+            hydrateResourceIO
+          );
+          const waitEvents = await Promise.all(
+            allEvents.filter((e) => e.correlationId === resourceId).map(hydrate)
+          );
+          const data2 = waitEventsToWaitEntity(waitEvents);
+          if (data2 === null) {
+            setError(
+              new Error(
+                `Failed to load ${resource} details: missing required event data`
+              )
+            );
+            return;
+          }
+          setData(data2);
+        } catch (hydrateError) {
           setError(
-            new Error(
-              `Failed to load ${resource} details: missing required event data`
-            )
+            hydrateError instanceof Error ? hydrateError : new Error(String(hydrateError))
           );
-          return;
         }
-        setData(data2);
-      } catch (hydrateError) {
-        setError(
-          hydrateError instanceof Error ? hydrateError : new Error(String(hydrateError))
-        );
+      } finally {
+        setLoading(false);
       }
       return;
     }
-    setLoading(true);
     try {
       const { data: resourceData } = await fetchResourceWithCorrelationId(
         env2,
@@ -129608,7 +129702,6 @@ function useWorkflowResourceData(env2, resource, resourceId, options = {}) {
     refresh: fetchData
   };
 }
-const MAX_ITEMS = 1e3;
 function mergeById(prev, next2, idKey) {
   const combined = [...prev, ...next2];
   const uniqueById = new Map(
@@ -129642,89 +129735,35 @@ async function pollResource(opts) {
   }
   return false;
 }
-const LIVE_POLL_LIMIT = 10;
-const TRACE_VIEWER_BATCH_SIZE = 50;
-const LIVE_STEP_UPDATE_INTERVAL_MS = 2e3;
+const LIVE_POLL_LIMIT = 100;
+const INITIAL_PAGE_SIZE = 500;
+const LOAD_MORE_PAGE_SIZE = 100;
 const LIVE_UPDATE_INTERVAL_MS = 5e3;
-async function fetchAllEventsForCorrelationId(env2, correlationId) {
-  let eventsData = [];
-  let cursor;
-  while (true) {
-    const { error: error2, result } = await unwrapServerActionResult(
-      fetchEventsByCorrelationId$1(env2, correlationId, {
-        cursor,
-        sortOrder: "asc",
-        limit: 1e3
-      })
-    );
-    if (error2) {
-      break;
-    }
-    eventsData = [...eventsData, ...result.data];
-    if (!result.hasMore || !result.cursor || eventsData.length >= MAX_ITEMS) {
-      break;
-    }
-    cursor = result.cursor;
-  }
-  return eventsData;
-}
-async function fetchEventsForCorrelationIds(env2, correlationIds) {
-  if (correlationIds.length === 0) {
-    return [];
-  }
-  const results = await Promise.all(
-    correlationIds.map(
-      (correlationId) => fetchAllEventsForCorrelationId(env2, correlationId)
-    )
-  );
-  return results.flat();
-}
 function useWorkflowTraceViewerData(env2, runId, options = {}) {
   const { live = false } = options;
   const [run, setRun] = reactExports.useState(null);
-  const [steps, setSteps] = reactExports.useState([]);
-  const [hooks, setHooks] = reactExports.useState([]);
   const [events2, setEvents] = reactExports.useState([]);
   const [loading, setLoading] = reactExports.useState(true);
-  const [auxiliaryDataLoading, setAuxiliaryDataLoading] = reactExports.useState(false);
   const [error2, setError] = reactExports.useState(null);
-  const [stepsCursor, setStepsCursor] = reactExports.useState();
-  const [hooksCursor, setHooksCursor] = reactExports.useState();
   const [eventsCursor, setEventsCursor] = reactExports.useState();
-  const [stepsHasMore, setStepsHasMore] = reactExports.useState(false);
-  const [hooksHasMore, setHooksHasMore] = reactExports.useState(false);
   const [eventsHasMore, setEventsHasMore] = reactExports.useState(false);
   const [isLoadingMoreTraceData, setIsLoadingMoreTraceData] = reactExports.useState(false);
   const isFetchingRef = reactExports.useRef(false);
   const [initialLoadCompleted, setInitialLoadCompleted] = reactExports.useState(false);
   const fetchAllData = reactExports.useCallback(async () => {
-    var _a3;
     if (isFetchingRef.current) {
       return;
     }
     isFetchingRef.current = true;
     setLoading(true);
-    setAuxiliaryDataLoading(true);
     setError(null);
-    const [runResult, stepsResult, hooksResult, eventsResult] = await Promise.all([
+    const [runResult, eventsResult] = await Promise.all([
       unwrapServerActionResult(fetchRun$1(env2, runId, "none")),
-      unwrapServerActionResult(
-        fetchSteps$1(env2, runId, {
-          sortOrder: "asc",
-          limit: TRACE_VIEWER_BATCH_SIZE
-        })
-      ),
-      unwrapServerActionResult(
-        fetchHooks$1(env2, {
-          runId,
-          sortOrder: "asc",
-          limit: TRACE_VIEWER_BATCH_SIZE
-        })
-      ),
       unwrapServerActionResult(
         fetchEvents$1(env2, runId, {
           sortOrder: "asc",
-          limit: TRACE_VIEWER_BATCH_SIZE
+          limit: INITIAL_PAGE_SIZE,
+          withData: true
         })
       )
     ]);
@@ -129733,133 +129772,45 @@ function useWorkflowTraceViewerData(env2, runId, options = {}) {
     } else {
       setRun(hydrateResourceIO(runResult.result));
     }
-    const nextSteps = stepsResult.error ? [] : stepsResult.result.data.map(hydrateResourceIO);
-    const nextHooks = hooksResult.error ? [] : hooksResult.result.data.map(hydrateResourceIO);
     const initialEvents = eventsResult.error ? [] : eventsResult.result.data.map(hydrateResourceIO);
-    const correlationIds = [
-      ...nextSteps.map((step) => step.stepId),
-      ...nextHooks.map((hook) => hook.hookId)
-    ];
-    const correlationEventsRaw = await fetchEventsForCorrelationIds(
-      env2,
-      correlationIds
-    );
-    const correlationEvents = correlationEventsRaw.map(hydrateResourceIO);
-    setSteps(nextSteps);
-    setHooks(nextHooks);
-    setEvents(
-      mergeById([], [...initialEvents, ...correlationEvents], "eventId")
-    );
-    setStepsCursor(
-      stepsResult.error || !stepsResult.result.hasMore ? void 0 : stepsResult.result.cursor
-    );
-    setHooksCursor(
-      hooksResult.error || !hooksResult.result.hasMore ? void 0 : hooksResult.result.cursor
-    );
+    setEvents(mergeById([], initialEvents, "eventId"));
     setEventsCursor(
       eventsResult.error || !eventsResult.result.hasMore ? void 0 : eventsResult.result.cursor
     );
-    setStepsHasMore(Boolean(!stepsResult.error && stepsResult.result.hasMore));
-    setHooksHasMore(Boolean(!hooksResult.error && hooksResult.result.hasMore));
     setEventsHasMore(
       Boolean(!eventsResult.error && eventsResult.result.hasMore)
     );
-    const settledResults = [runResult, stepsResult, hooksResult, eventsResult];
     setLoading(false);
-    setAuxiliaryDataLoading(false);
     setInitialLoadCompleted(true);
     isFetchingRef.current = false;
-    if (!runResult.error) {
-      const firstError = (_a3 = settledResults.find((result) => result.error)) == null ? void 0 : _a3.error;
-      if (firstError) {
-        setError(firstError);
-      }
+    if (!runResult.error && eventsResult.error) {
+      setError(eventsResult.error);
     }
   }, [env2, runId]);
   const loadMoreTraceData = reactExports.useCallback(async () => {
-    var _a3, _b, _c, _d, _e2, _f;
-    if (isFetchingRef.current || !initialLoadCompleted || isLoadingMoreTraceData) {
-      return;
-    }
-    if (!stepsHasMore && !hooksHasMore && !eventsHasMore) {
+    if (isFetchingRef.current || !initialLoadCompleted || isLoadingMoreTraceData || !eventsHasMore) {
       return;
     }
     setIsLoadingMoreTraceData(true);
     try {
-      const [nextStepsResult, nextHooksResult, nextEventsResult] = await Promise.all([
-        stepsHasMore ? unwrapServerActionResult(
-          fetchSteps$1(env2, runId, {
-            cursor: stepsCursor,
-            sortOrder: "asc",
-            limit: TRACE_VIEWER_BATCH_SIZE
-          })
-        ) : Promise.resolve({ error: null, result: null }),
-        hooksHasMore ? unwrapServerActionResult(
-          fetchHooks$1(env2, {
-            runId,
-            cursor: hooksCursor,
-            sortOrder: "asc",
-            limit: TRACE_VIEWER_BATCH_SIZE
-          })
-        ) : Promise.resolve({ error: null, result: null }),
-        eventsHasMore ? unwrapServerActionResult(
-          fetchEvents$1(env2, runId, {
-            cursor: eventsCursor,
-            sortOrder: "asc",
-            limit: TRACE_VIEWER_BATCH_SIZE
-          })
-        ) : Promise.resolve({ error: null, result: null })
-      ]);
-      if (nextStepsResult.error) {
-        setError(nextStepsResult.error);
-      }
-      if (nextHooksResult.error) {
-        setError(nextHooksResult.error);
-      }
+      const nextEventsResult = await unwrapServerActionResult(
+        fetchEvents$1(env2, runId, {
+          cursor: eventsCursor,
+          sortOrder: "asc",
+          limit: LOAD_MORE_PAGE_SIZE,
+          withData: true
+        })
+      );
       if (nextEventsResult.error) {
         setError(nextEventsResult.error);
-      }
-      const nextSteps = ((_a3 = nextStepsResult.result) == null ? void 0 : _a3.data.map(hydrateResourceIO)) ?? [];
-      const nextHooks = ((_b = nextHooksResult.result) == null ? void 0 : _b.data.map(hydrateResourceIO)) ?? [];
-      const nextEvents = ((_c = nextEventsResult.result) == null ? void 0 : _c.data.map(hydrateResourceIO)) ?? [];
-      if (nextSteps.length > 0) {
-        setSteps((prev) => mergeById(prev, nextSteps, "stepId"));
-      }
-      if (nextHooks.length > 0) {
-        setHooks((prev) => mergeById(prev, nextHooks, "hookId"));
-      }
-      const newCorrelationIds = [
-        ...nextSteps.map((step) => step.stepId),
-        ...nextHooks.map((hook) => hook.hookId)
-      ];
-      const correlationEventsRaw = await fetchEventsForCorrelationIds(
-        env2,
-        newCorrelationIds
-      );
-      const correlationEvents = correlationEventsRaw.map(hydrateResourceIO);
-      const allNewEvents = [...nextEvents, ...correlationEvents];
-      if (allNewEvents.length > 0) {
-        setEvents((prev) => mergeById(prev, allNewEvents, "eventId"));
-      }
-      const nextStepsHasMore = nextStepsResult.error ? stepsHasMore : Boolean(nextStepsResult.result && nextStepsResult.result.hasMore);
-      const nextHooksHasMore = nextHooksResult.error ? hooksHasMore : Boolean(nextHooksResult.result && nextHooksResult.result.hasMore);
-      const nextEventsHasMore = nextEventsResult.error ? eventsHasMore : Boolean(nextEventsResult.result && nextEventsResult.result.hasMore);
-      setStepsHasMore(nextStepsHasMore);
-      setHooksHasMore(nextHooksHasMore);
-      setEventsHasMore(nextEventsHasMore);
-      if (!nextStepsResult.error) {
-        setStepsCursor(
-          ((_d = nextStepsResult.result) == null ? void 0 : _d.hasMore) ? nextStepsResult.result.cursor : void 0
-        );
-      }
-      if (!nextHooksResult.error) {
-        setHooksCursor(
-          ((_e2 = nextHooksResult.result) == null ? void 0 : _e2.hasMore) ? nextHooksResult.result.cursor : void 0
-        );
-      }
-      if (!nextEventsResult.error) {
+      } else {
+        const nextEvents = nextEventsResult.result.data.map(hydrateResourceIO);
+        if (nextEvents.length > 0) {
+          setEvents((prev) => mergeById(prev, nextEvents, "eventId"));
+        }
+        setEventsHasMore(Boolean(nextEventsResult.result.hasMore));
         setEventsCursor(
-          ((_f = nextEventsResult.result) == null ? void 0 : _f.hasMore) ? nextEventsResult.result.cursor : void 0
+          nextEventsResult.result.hasMore ? nextEventsResult.result.cursor : void 0
         );
       }
     } finally {
@@ -129870,11 +129821,7 @@ function useWorkflowTraceViewerData(env2, runId, options = {}) {
     runId,
     initialLoadCompleted,
     isLoadingMoreTraceData,
-    stepsHasMore,
-    hooksHasMore,
     eventsHasMore,
-    stepsCursor,
-    hooksCursor,
     eventsCursor
   ]);
   const pollRun = reactExports.useCallback(async () => {
@@ -129892,49 +129839,14 @@ function useWorkflowTraceViewerData(env2, runId, options = {}) {
     setRun(hydrateResourceIO(result));
     return true;
   }, [env2, runId, run == null ? void 0 : run.completedAt]);
-  const pollSteps = reactExports.useCallback(
-    () => pollResource({
-      fetchFn: () => unwrapServerActionResult(
-        fetchSteps$1(env2, runId, {
-          cursor: stepsCursor,
-          sortOrder: "asc",
-          limit: LIVE_POLL_LIMIT
-        })
-      ),
-      setItems: setSteps,
-      setCursor: setStepsCursor,
-      setError,
-      idKey: "stepId",
-      cursorStrategy: "onHasMore",
-      transform: hydrateResourceIO
-    }),
-    [env2, runId, stepsCursor]
-  );
-  const pollHooks = reactExports.useCallback(
-    () => pollResource({
-      fetchFn: () => unwrapServerActionResult(
-        fetchHooks$1(env2, {
-          runId,
-          cursor: hooksCursor,
-          sortOrder: "asc",
-          limit: LIVE_POLL_LIMIT
-        })
-      ),
-      setItems: setHooks,
-      setCursor: setHooksCursor,
-      setError,
-      idKey: "hookId",
-      transform: hydrateResourceIO
-    }),
-    [env2, runId, hooksCursor]
-  );
   const pollEvents = reactExports.useCallback(
     () => pollResource({
       fetchFn: () => unwrapServerActionResult(
         fetchEvents$1(env2, runId, {
           cursor: eventsCursor,
           sortOrder: "asc",
-          limit: LIVE_POLL_LIMIT
+          limit: LIVE_POLL_LIMIT,
+          withData: true
         })
       ),
       setItems: setEvents,
@@ -129945,27 +129857,19 @@ function useWorkflowTraceViewerData(env2, runId, options = {}) {
     }),
     [env2, runId, eventsCursor]
   );
-  const update = reactExports.useCallback(
-    async (stepsOnly = false) => {
-      if (isFetchingRef.current || !initialLoadCompleted) {
-        return { foundNewItems: false };
-      }
-      let foundNewItems = false;
-      try {
-        const [_2, stepsUpdated, hooksUpdated, eventsUpdated] = await Promise.all([
-          stepsOnly ? Promise.resolve(false) : pollRun(),
-          pollSteps(),
-          stepsOnly ? Promise.resolve(false) : pollHooks(),
-          stepsOnly ? Promise.resolve(false) : pollEvents()
-        ]);
-        foundNewItems = stepsUpdated || hooksUpdated || eventsUpdated;
-      } catch (err) {
-        console.error("Update error:", err);
-      }
-      return { foundNewItems };
-    },
-    [pollSteps, pollHooks, pollEvents, initialLoadCompleted, pollRun]
-  );
+  const update = reactExports.useCallback(async () => {
+    if (isFetchingRef.current || !initialLoadCompleted) {
+      return { foundNewItems: false };
+    }
+    let foundNewItems = false;
+    try {
+      const [_2, eventsUpdated] = await Promise.all([pollRun(), pollEvents()]);
+      foundNewItems = eventsUpdated;
+    } catch (err) {
+      console.error("Update error:", err);
+    }
+    return { foundNewItems };
+  }, [pollEvents, initialLoadCompleted, pollRun]);
   reactExports.useEffect(() => {
     fetchAllData();
   }, [fetchAllData]);
@@ -129976,25 +129880,18 @@ function useWorkflowTraceViewerData(env2, runId, options = {}) {
     const interval2 = setInterval(() => {
       update();
     }, LIVE_UPDATE_INTERVAL_MS);
-    const stepInterval = setInterval(() => {
-      update(true);
-    }, LIVE_STEP_UPDATE_INTERVAL_MS);
     return () => {
       clearInterval(interval2);
-      clearInterval(stepInterval);
     };
   }, [live, initialLoadCompleted, update, run == null ? void 0 : run.completedAt]);
   return {
     run: run ?? {},
-    steps,
-    hooks,
     events: events2,
     loading,
-    auxiliaryDataLoading,
     error: error2,
     update,
     loadMoreTraceData,
-    hasMoreTraceData: stepsHasMore || hooksHasMore || eventsHasMore,
+    hasMoreTraceData: eventsHasMore,
     isLoadingMoreTraceData
   };
 }
@@ -130127,7 +130024,7 @@ function HooksTable({
   };
   const [invocationData, setInvocationData] = reactExports.useState(/* @__PURE__ */ new Map());
   reactExports.useEffect(() => {
-    if (!hooks.length) return;
+    if (!hooks.length || !runId) return;
     const fetchInvocations = async () => {
       const initialData = /* @__PURE__ */ new Map();
       for (const hook of hooks) {
@@ -130138,65 +130035,55 @@ function HooksTable({
         });
       }
       setInvocationData(initialData);
-      const results = await Promise.allSettled(
-        hooks.map(async (hook) => {
-          var _a3;
-          try {
-            const serverResult = await fetchEventsByCorrelationId$1(
-              env2,
-              hook.hookId,
-              {
-                sortOrder: "asc",
-                limit: 100
-              }
-            );
-            if (!serverResult.success) {
-              return {
-                hookId: hook.hookId,
-                count: new Error(
-                  ((_a3 = serverResult.error) == null ? void 0 : _a3.message) || "Failed to fetch events"
-                ),
-                hasMore: false
-              };
+      try {
+        const serverResult = await fetchEvents$1(env2, runId, {
+          sortOrder: "asc",
+          limit: 1e3
+        });
+        if (!serverResult.success) {
+          setInvocationData((prev) => {
+            const updated = new Map(prev);
+            for (const hook of hooks) {
+              updated.set(hook.hookId, { count: 0, hasMore: false, loading: false });
             }
-            const events2 = serverResult.data;
-            const count2 = events2.data.filter(
-              (e) => e.eventType === "hook_received"
-            ).length;
-            return {
-              hookId: hook.hookId,
-              count: count2,
-              hasMore: events2.hasMore
-            };
-          } catch (e) {
-            return {
-              hookId: hook.hookId,
-              count: e,
-              hasMore: false
-            };
+            return updated;
+          });
+          return;
+        }
+        const allEvents = serverResult.data.data;
+        const hookIds = new Set(hooks.map((h2) => h2.hookId));
+        const counts = /* @__PURE__ */ new Map();
+        for (const event of allEvents) {
+          if (event.eventType === "hook_received" && event.correlationId && hookIds.has(event.correlationId)) {
+            counts.set(
+              event.correlationId,
+              (counts.get(event.correlationId) ?? 0) + 1
+            );
           }
-        })
-      );
-      setInvocationData((prev) => {
-        const updated = new Map(prev);
-        for (let i = 0; i < results.length; i++) {
-          const result = results[i];
-          const hookId = hooks[i].hookId;
-          if (result.status === "fulfilled") {
-            updated.set(result.value.hookId, {
-              count: result.value.count,
-              hasMore: result.value.hasMore,
+        }
+        setInvocationData((prev) => {
+          const updated = new Map(prev);
+          for (const hook of hooks) {
+            updated.set(hook.hookId, {
+              count: counts.get(hook.hookId) ?? 0,
+              hasMore: serverResult.data.hasMore,
               loading: false
             });
-          } else {
-            updated.set(hookId, { count: 0, hasMore: false, loading: false });
           }
-        }
-        return updated;
-      });
+          return updated;
+        });
+      } catch {
+        setInvocationData((prev) => {
+          const updated = new Map(prev);
+          for (const hook of hooks) {
+            updated.set(hook.hookId, { count: 0, hasMore: false, loading: false });
+          }
+          return updated;
+        });
+      }
     };
     fetchInvocations();
-  }, [hooks, env2]);
+  }, [hooks, env2, runId]);
   const renderInvocationCount = (hook) => {
     const data2 = invocationData.get(hook.hookId);
     if (!data2 || data2.loading) {
@@ -146879,7 +146766,6 @@ function WorkflowGraphExecutionViewer({
 }
 function GraphTabContent({
   run,
-  allSteps,
   allEvents,
   env: env2
 }) {
@@ -146904,15 +146790,30 @@ function GraphTabContent({
       return ((_a4 = parseWorkflowName(wf.workflowName)) == null ? void 0 : _a4.shortName) === runShortName;
     }) ?? null;
   }, [graphManifest, run.workflowName]);
+  const stepsFromEvents = reactExports.useMemo(() => {
+    if (!allEvents) return [];
+    const stepEventsMap = /* @__PURE__ */ new Map();
+    for (const event of allEvents) {
+      if (event.eventType.startsWith("step_") && event.correlationId) {
+        const existing = stepEventsMap.get(event.correlationId);
+        if (existing) {
+          existing.push(event);
+        } else {
+          stepEventsMap.set(event.correlationId, [event]);
+        }
+      }
+    }
+    return Array.from(stepEventsMap.values()).map(stepEventsToStepEntity).filter((s2) => s2 !== null);
+  }, [allEvents]);
   const execution = reactExports.useMemo(() => {
     if (!workflowGraph || !run.runId) return null;
     return mapRunToExecution(
       run,
-      allSteps || [],
+      stepsFromEvents,
       allEvents || [],
       workflowGraph
     );
-  }, [workflowGraph, run, allSteps, allEvents]);
+  }, [workflowGraph, run, stepsFromEvents, allEvents]);
   if (graphLoading) {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center w-full h-full", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "h-8 w-8 animate-spin text-muted-foreground" }),
@@ -147042,11 +146943,8 @@ function RunDetailView({
   const isLocalBackend = serverConfig.backendId === "local" || serverConfig.backendId === "@workflow/world-local";
   const {
     run: runData,
-    steps: allSteps,
-    hooks: allHooks,
     events: allEvents,
     loading,
-    auxiliaryDataLoading,
     error: error2,
     update,
     loadMoreTraceData,
@@ -147198,24 +147096,6 @@ function RunDetailView({
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "text-xl font-semibold", children: workflowName ? workflowName : /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "w-[260px] h-[28px]" }) }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(LiveStatus, { hasError, errorMessage }),
-              (isEncryptedMarker(run.input) || isEncryptedMarker(run.output) || isEncryptedMarker(run.error) || allSteps.some(
-                (s2) => isEncryptedMarker(s2.input) || isEncryptedMarker(s2.output)
-              )) && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                  Button,
-                  {
-                    variant: "outline",
-                    size: "sm",
-                    onClick: handleDecrypt,
-                    disabled: !!encryptionKey,
-                    children: [
-                      encryptionKey ? /* @__PURE__ */ jsxRuntimeExports.jsx(LockOpen, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Lock, { className: "h-4 w-4" }),
-                      encryptionKey ? "Decrypted" : "Decrypt"
-                    ]
-                  }
-                ) }) }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: encryptionKey ? /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: "Data has been decrypted for this workflow run. All encrypted input, output, and event data is now visible across all tabs." }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: "This run's data is end-to-end encrypted. Decrypt to reveal input, output, and event data across all tabs for this workflow run." }) })
-              ] }),
               /* @__PURE__ */ jsxRuntimeExports.jsx(
                 RunActionsButtons,
                 {
@@ -147223,7 +147103,7 @@ function RunDetailView({
                   runId,
                   runStatus: run.status,
                   events: allEvents,
-                  eventsLoading: auxiliaryDataLoading,
+                  eventsLoading: loading,
                   loading,
                   onRerunClick: handleRerunClick,
                   onCancelClick: handleCancelClick,
@@ -147282,159 +147162,150 @@ function RunDetailView({
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-4 flex-1 flex flex-col min-h-0", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          Tabs,
-          {
-            value: activeTab,
-            onValueChange: (v2) => setActiveTab(v2),
-            className: "flex-1 flex flex-col min-h-0",
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsList, { className: "mb-4 flex-none", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsTrigger, { value: "trace", className: "gap-2", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(List$1, { className: "h-4 w-4" }),
-                  "Trace"
-                ] }),
-                isLocalBackend && /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsTrigger, { value: "graph", className: "gap-2", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(GitBranch, { className: "h-4 w-4" }),
-                  "Graph"
-                ] }),
-                /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsTrigger, { value: "events", className: "gap-2", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(List$1, { className: "h-4 w-4" }),
-                  "Events"
-                ] }),
-                /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsTrigger, { value: "streams", className: "gap-2", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(List$1, { className: "h-4 w-4" }),
-                  "Streams"
-                ] })
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-4 flex-1 flex flex-col min-h-0", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        Tabs,
+        {
+          value: activeTab,
+          onValueChange: (v2) => setActiveTab(v2),
+          className: "flex-1 flex flex-col min-h-0",
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsList, { className: "mb-4 flex-none", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsTrigger, { value: "trace", className: "gap-2", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(List$1, { className: "h-4 w-4" }),
+                "Trace"
               ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "trace", className: "mt-0 flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBoundary, { title: "Failed to load trace viewer", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                WorkflowTraceViewer,
-                {
-                  error: error2,
-                  steps: allSteps,
-                  events: allEvents,
-                  hooks: allHooks,
-                  run,
-                  isLoading: loading,
-                  spanDetailData,
-                  spanDetailLoading,
-                  spanDetailError,
-                  onSpanSelect: handleSpanSelect,
-                  onStreamClick: handleStreamClick,
-                  onWakeUpSleep: handleWakeUpSleep,
-                  onResolveHook: handleResolveHook,
-                  onLoadEventData: handleLoadSidebarEventData,
-                  onLoadMoreSpans: loadMoreTraceData,
-                  hasMoreSpans: hasMoreTraceData,
-                  isLoadingMoreSpans: isLoadingMoreTraceData,
-                  encryptionKey: encryptionKey ?? void 0
-                }
-              ) }) }) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "events", className: "mt-0 flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBoundary, { title: "Failed to load events list", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                EventListView,
+              isLocalBackend && /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsTrigger, { value: "graph", className: "gap-2", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(GitBranch, { className: "h-4 w-4" }),
+                "Graph"
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsTrigger, { value: "events", className: "gap-2", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(List$1, { className: "h-4 w-4" }),
+                "Events"
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsTrigger, { value: "streams", className: "gap-2", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(List$1, { className: "h-4 w-4" }),
+                "Streams"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "trace", className: "mt-0 flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBoundary, { title: "Failed to load trace viewer", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              WorkflowTraceViewer,
+              {
+                error: error2,
+                events: allEvents,
+                run,
+                isLoading: loading,
+                spanDetailData,
+                spanDetailLoading,
+                spanDetailError,
+                onSpanSelect: handleSpanSelect,
+                onStreamClick: handleStreamClick,
+                onWakeUpSleep: handleWakeUpSleep,
+                onResolveHook: handleResolveHook,
+                onLoadEventData: handleLoadSidebarEventData,
+                onLoadMoreSpans: loadMoreTraceData,
+                hasMoreSpans: hasMoreTraceData,
+                isLoadingMoreSpans: isLoadingMoreTraceData,
+                encryptionKey: encryptionKey ?? void 0,
+                onDecrypt: handleDecrypt
+              }
+            ) }) }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "events", className: "mt-0 flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBoundary, { title: "Failed to load events list", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              EventListView,
+              {
+                events: allEvents,
+                run,
+                onLoadEventData: handleLoadEventData,
+                encryptionKey: encryptionKey ?? void 0
+              }
+            ) }) }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "streams", className: "mt-0 flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBoundary, { title: "Failed to load stream data", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "h-full flex gap-4", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                "div",
                 {
-                  events: allEvents,
-                  steps: allSteps,
-                  run,
-                  onLoadEventData: handleLoadEventData,
-                  encryptionKey: encryptionKey ?? void 0
-                }
-              ) }) }) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "streams", className: "mt-0 flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBoundary, { title: "Failed to load stream data", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "h-full flex gap-4", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                  "div",
-                  {
-                    className: "w-64 flex-shrink-0 border rounded-lg overflow-hidden",
-                    style: {
-                      borderColor: "var(--ds-gray-300)",
-                      backgroundColor: "var(--ds-background-100)"
-                    },
-                    children: [
-                      /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                        "div",
-                        {
-                          className: "px-3 py-2 border-b text-xs font-medium",
-                          style: {
-                            borderColor: "var(--ds-gray-300)",
-                            color: "var(--ds-gray-900)"
-                          },
-                          children: [
-                            "Streams (",
-                            streams.length,
-                            ")"
-                          ]
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "overflow-auto max-h-[calc(100vh-400px)]", children: streamsLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "h-4 w-4 animate-spin text-muted-foreground" }) }) : streamsError ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 text-xs text-destructive", children: streamsError.message }) : streams.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-                        "div",
-                        {
-                          className: "p-4 text-xs",
-                          style: { color: "var(--ds-gray-600)" },
-                          children: "No streams found for this run"
-                        }
-                      ) : streams.map((streamId) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: () => setSelectedStreamId(streamId),
-                          className: "w-full text-left px-3 py-2 text-xs font-mono truncate hover:bg-accent transition-colors",
-                          style: {
-                            backgroundColor: selectedStreamId === streamId ? "var(--ds-gray-200)" : "transparent",
-                            color: "var(--ds-gray-1000)"
-                          },
-                          title: streamId,
-                          children: streamId
+                  className: "w-64 flex-shrink-0 border rounded-lg overflow-hidden",
+                  style: {
+                    borderColor: "var(--ds-gray-300)",
+                    backgroundColor: "var(--ds-background-100)"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                      "div",
+                      {
+                        className: "px-3 py-2 border-b text-xs font-medium",
+                        style: {
+                          borderColor: "var(--ds-gray-300)",
+                          color: "var(--ds-gray-900)"
                         },
-                        streamId
-                      )) })
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 min-w-0", children: selectedStreamId ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  StreamViewer,
-                  {
-                    streamId: selectedStreamId,
-                    chunks: streamChunks,
-                    isLive: streamIsLive,
-                    error: streamError
-                  }
-                ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "div",
-                  {
-                    className: "h-full flex items-center justify-center rounded-lg border",
-                    style: {
-                      borderColor: "var(--ds-gray-300)",
-                      backgroundColor: "var(--ds-gray-100)"
-                    },
-                    children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        children: [
+                          "Streams (",
+                          streams.length,
+                          ")"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "overflow-auto max-h-[calc(100vh-400px)]", children: streamsLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "h-4 w-4 animate-spin text-muted-foreground" }) }) : streamsError ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 text-xs text-destructive", children: streamsError.message }) : streams.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(
                       "div",
                       {
-                        className: "text-sm",
+                        className: "p-4 text-xs",
                         style: { color: "var(--ds-gray-600)" },
-                        children: streams.length > 0 ? "Select a stream to view its data" : "No streams available"
+                        children: "No streams found for this run"
                       }
-                    )
-                  }
-                ) })
-              ] }) }) }),
-              isLocalBackend && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "graph", className: "mt-0 flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBoundary, { title: "Failed to load execution graph", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-full min-h-[500px]", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                GraphTabContent,
+                    ) : streams.map((streamId) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => setSelectedStreamId(streamId),
+                        className: "w-full text-left px-3 py-2 text-xs font-mono truncate hover:bg-accent transition-colors",
+                        style: {
+                          backgroundColor: selectedStreamId === streamId ? "var(--ds-gray-200)" : "transparent",
+                          color: "var(--ds-gray-1000)"
+                        },
+                        title: streamId,
+                        children: streamId
+                      },
+                      streamId
+                    )) })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 min-w-0", children: selectedStreamId ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+                StreamViewer,
                 {
-                  run,
-                  allSteps,
-                  allEvents,
-                  env: env2
+                  streamId: selectedStreamId,
+                  chunks: streamChunks,
+                  isLive: streamIsLive,
+                  error: streamError
                 }
-              ) }) }) })
-            ]
-          }
-        ),
-        auxiliaryDataLoading && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "fixed flex items-center gap-2 left-8 bottom-8 bg-background border rounded-md px-4 py-2 shadow-lg", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "size-4 animate-spin" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm", children: "Fetching data..." })
-        ] })
-      ] })
+              ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "div",
+                {
+                  className: "h-full flex items-center justify-center rounded-lg border",
+                  style: {
+                    borderColor: "var(--ds-gray-300)",
+                    backgroundColor: "var(--ds-gray-100)"
+                  },
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "div",
+                    {
+                      className: "text-sm",
+                      style: { color: "var(--ds-gray-600)" },
+                      children: streams.length > 0 ? "Select a stream to view its data" : "No streams available"
+                    }
+                  )
+                }
+              ) })
+            ] }) }) }),
+            isLocalBackend && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "graph", className: "mt-0 flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBoundary, { title: "Failed to load execution graph", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-full min-h-[500px]", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              GraphTabContent,
+              {
+                run,
+                allEvents,
+                env: env2
+              }
+            ) }) }) })
+          ]
+        }
+      ) })
     ] })
   ] });
 }
@@ -147465,7 +147336,6 @@ const handlers = {
   fetchStep: (p2) => fetchStep(p2.worldEnv ?? {}, p2.runId, p2.stepId, p2.resolveData),
   fetchEvents: (p2) => fetchEvents(p2.worldEnv ?? {}, p2.runId, p2.params ?? {}),
   fetchEvent: (p2) => fetchEvent(p2.worldEnv ?? {}, p2.runId, p2.eventId, p2.resolveData),
-  fetchEventsByCorrelationId: (p2) => fetchEventsByCorrelationId(p2.worldEnv ?? {}, p2.correlationId, p2.params ?? {}),
   fetchHooks: (p2) => fetchHooks(p2.worldEnv ?? {}, p2.params ?? {}),
   fetchHook: (p2) => fetchHook(p2.worldEnv ?? {}, p2.hookId, p2.resolveData),
   cancelRun: (p2) => cancelRun$1(p2.worldEnv ?? {}, p2.runId),
@@ -147608,7 +147478,7 @@ const route4 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProper
   __proto__: null,
   loader
 }, Symbol.toStringTag, { value: "Module" }));
-const serverManifest = { "entry": { "module": "/assets/entry.client-BjpmGyLC.js", "imports": ["/assets/index-DklpUtP3.js"], "css": [] }, "routes": { "root": { "id": "root", "parentId": void 0, "path": "", "index": void 0, "caseSensitive": void 0, "hasAction": true, "hasLoader": true, "hasClientAction": false, "hasClientLoader": false, "hasClientMiddleware": false, "hasDefaultExport": true, "hasErrorBoundary": false, "module": "/assets/root-B2fanH6r.js", "imports": ["/assets/index-DklpUtP3.js", "/assets/mermaid-3ZIDBTTL-BhkyG8Sq.js"], "css": ["/assets/root-Dr_TuMgh.css", "/assets/mermaid-3ZIDBTTL-DKxHcEOp.css"], "clientActionModule": void 0, "clientLoaderModule": void 0, "clientMiddlewareModule": void 0, "hydrateFallbackModule": void 0 }, "routes/home": { "id": "routes/home", "parentId": "root", "path": void 0, "index": true, "caseSensitive": void 0, "hasAction": false, "hasLoader": false, "hasClientAction": false, "hasClientLoader": false, "hasClientMiddleware": false, "hasDefaultExport": true, "hasErrorBoundary": false, "module": "/assets/home-B4MMr7LP.js", "imports": ["/assets/index-DklpUtP3.js", "/assets/use-workflow-graph-D6xsvBGu.js", "/assets/mermaid-3ZIDBTTL-BhkyG8Sq.js"], "css": ["/assets/use-workflow-graph-yls6qlc0.css", "/assets/mermaid-3ZIDBTTL-DKxHcEOp.css"], "clientActionModule": void 0, "clientLoaderModule": void 0, "clientMiddlewareModule": void 0, "hydrateFallbackModule": void 0 }, "routes/run-detail": { "id": "routes/run-detail", "parentId": "root", "path": "run/:runId", "index": void 0, "caseSensitive": void 0, "hasAction": false, "hasLoader": false, "hasClientAction": false, "hasClientLoader": false, "hasClientMiddleware": false, "hasDefaultExport": true, "hasErrorBoundary": false, "module": "/assets/run-detail-D40YBNgh.js", "imports": ["/assets/index-DklpUtP3.js", "/assets/use-workflow-graph-D6xsvBGu.js", "/assets/mermaid-3ZIDBTTL-BhkyG8Sq.js", "/assets/encryption-8OvC6eoJ.js"], "css": ["/assets/use-workflow-graph-yls6qlc0.css", "/assets/mermaid-3ZIDBTTL-DKxHcEOp.css"], "clientActionModule": void 0, "clientLoaderModule": void 0, "clientMiddlewareModule": void 0, "hydrateFallbackModule": void 0 }, "routes/api.rpc": { "id": "routes/api.rpc", "parentId": "root", "path": "api/rpc", "index": void 0, "caseSensitive": void 0, "hasAction": true, "hasLoader": true, "hasClientAction": false, "hasClientLoader": false, "hasClientMiddleware": false, "hasDefaultExport": false, "hasErrorBoundary": false, "module": "/assets/api.rpc-l0sNRNKZ.js", "imports": [], "css": [], "clientActionModule": void 0, "clientLoaderModule": void 0, "clientMiddlewareModule": void 0, "hydrateFallbackModule": void 0 }, "routes/api.stream.$streamId": { "id": "routes/api.stream.$streamId", "parentId": "root", "path": "api/stream/:streamId", "index": void 0, "caseSensitive": void 0, "hasAction": false, "hasLoader": true, "hasClientAction": false, "hasClientLoader": false, "hasClientMiddleware": false, "hasDefaultExport": false, "hasErrorBoundary": false, "module": "/assets/api.stream._streamId-l0sNRNKZ.js", "imports": [], "css": [], "clientActionModule": void 0, "clientLoaderModule": void 0, "clientMiddlewareModule": void 0, "hydrateFallbackModule": void 0 } }, "url": "/assets/manifest-ef94afe1.js", "version": "ef94afe1", "sri": void 0 };
+const serverManifest = { "entry": { "module": "/assets/entry.client-BjpmGyLC.js", "imports": ["/assets/index-DklpUtP3.js"], "css": [] }, "routes": { "root": { "id": "root", "parentId": void 0, "path": "", "index": void 0, "caseSensitive": void 0, "hasAction": true, "hasLoader": true, "hasClientAction": false, "hasClientLoader": false, "hasClientMiddleware": false, "hasDefaultExport": true, "hasErrorBoundary": false, "module": "/assets/root-D-041AAq.js", "imports": ["/assets/index-DklpUtP3.js", "/assets/mermaid-3ZIDBTTL-RlQIshou.js"], "css": ["/assets/root-9gRDb_Jz.css", "/assets/mermaid-3ZIDBTTL-DKxHcEOp.css"], "clientActionModule": void 0, "clientLoaderModule": void 0, "clientMiddlewareModule": void 0, "hydrateFallbackModule": void 0 }, "routes/home": { "id": "routes/home", "parentId": "root", "path": void 0, "index": true, "caseSensitive": void 0, "hasAction": false, "hasLoader": false, "hasClientAction": false, "hasClientLoader": false, "hasClientMiddleware": false, "hasDefaultExport": true, "hasErrorBoundary": false, "module": "/assets/home-Xl3EX8M3.js", "imports": ["/assets/index-DklpUtP3.js", "/assets/use-workflow-graph-C-GqGBPl.js", "/assets/mermaid-3ZIDBTTL-RlQIshou.js"], "css": ["/assets/use-workflow-graph-yls6qlc0.css", "/assets/mermaid-3ZIDBTTL-DKxHcEOp.css"], "clientActionModule": void 0, "clientLoaderModule": void 0, "clientMiddlewareModule": void 0, "hydrateFallbackModule": void 0 }, "routes/run-detail": { "id": "routes/run-detail", "parentId": "root", "path": "run/:runId", "index": void 0, "caseSensitive": void 0, "hasAction": false, "hasLoader": false, "hasClientAction": false, "hasClientLoader": false, "hasClientMiddleware": false, "hasDefaultExport": true, "hasErrorBoundary": false, "module": "/assets/run-detail-BPOihWwO.js", "imports": ["/assets/index-DklpUtP3.js", "/assets/use-workflow-graph-C-GqGBPl.js", "/assets/mermaid-3ZIDBTTL-RlQIshou.js", "/assets/encryption-8OvC6eoJ.js"], "css": ["/assets/use-workflow-graph-yls6qlc0.css", "/assets/mermaid-3ZIDBTTL-DKxHcEOp.css"], "clientActionModule": void 0, "clientLoaderModule": void 0, "clientMiddlewareModule": void 0, "hydrateFallbackModule": void 0 }, "routes/api.rpc": { "id": "routes/api.rpc", "parentId": "root", "path": "api/rpc", "index": void 0, "caseSensitive": void 0, "hasAction": true, "hasLoader": true, "hasClientAction": false, "hasClientLoader": false, "hasClientMiddleware": false, "hasDefaultExport": false, "hasErrorBoundary": false, "module": "/assets/api.rpc-l0sNRNKZ.js", "imports": [], "css": [], "clientActionModule": void 0, "clientLoaderModule": void 0, "clientMiddlewareModule": void 0, "hydrateFallbackModule": void 0 }, "routes/api.stream.$streamId": { "id": "routes/api.stream.$streamId", "parentId": "root", "path": "api/stream/:streamId", "index": void 0, "caseSensitive": void 0, "hasAction": false, "hasLoader": true, "hasClientAction": false, "hasClientLoader": false, "hasClientMiddleware": false, "hasDefaultExport": false, "hasErrorBoundary": false, "module": "/assets/api.stream._streamId-l0sNRNKZ.js", "imports": [], "css": [], "clientActionModule": void 0, "clientLoaderModule": void 0, "clientMiddlewareModule": void 0, "hydrateFallbackModule": void 0 } }, "url": "/assets/manifest-0e172cba.js", "version": "0e172cba", "sri": void 0 };
 const assetsBuildDirectory = "build/client";
 const basename = "/";
 const future = { "unstable_optimizeDeps": false, "unstable_subResourceIntegrity": false, "unstable_trailingSlashAwareDataRequests": false, "unstable_previewServerPrerendering": false, "v8_middleware": false, "v8_splitRouteModules": false, "v8_viteEnvironmentApi": false };