@workflow/web 5.0.0-beta.7 → 5.0.0-beta.8

package/build/client/assets/{run-detail-COyTZwjr.js → run-detail-DNZJxxPM.js}

@@ -1,6 +1,6 @@
 import { j as jsxRuntimeExports, r as reactExports, f as reactDomExports, D as ReactDOM, B as useNavigate, C as useSearchParams, A as Link, w as withComponentProps, H as useParams } from "./index-BsV8i_Jn.js";
-import { N as Copy, C as CircleAlert, O as parseStepName, z as parseWorkflowName, j as ChevronRight, p as Check, Q as ErrorCard, Z as Zap, S as Send, R as ResolveHookModal, U as Circle, X, M as ErrorBoundary, H as unwrapServerActionResult, u as unwrapOrThrow, W as WorkflowWebAPIError, V as useEscapeKeydown, s as composeEventHandlers, Y as useCallbackRef, _ as useLayoutEffect2, q as useControllableState, $ as useId, a0 as createContext2, t as Presence, w as createContextScope, l as hideOthers, m as ReactRemoveScroll, a1 as useFocusGuards, a2 as LAYOUT, a3 as wakeUpRun, r as resumeHook, A as Alert, c as AlertTitle, d as AlertDescription, a as Skeleton$1, a4 as RunActionsButtons, B as StatusBadge, e as CopyableText, b as RelativeTime, T as Tabs, J as TabsList, K as TabsTrigger, L as TabsContent, x as cancelRun, a5 as recreateRun } from "./workflow-graph-viewer-CVUKAMV1.js";
-import { c as createLucideIcon, M as Spinner, h as useToast, N as Skeleton, O as DecryptClickContext, Y as Yr, U as isEncryptedMarker, W as formatDuration, X as DataInspector, _ as _r, Z as RunClickContext, $ as StreamClickContext, a0 as isExpiredMarker, a1 as isDoStreamStep, a2 as extractConversation, a3 as Lock, a4 as EVENT_DATA_REF_FIELDS, a5 as clsx, a6 as cn, a7 as getSpanDurationMs, a8 as getHighResInMs, a9 as ActiveSpanProvider, aa as useActiveSpan, ab as useSidebarDataOptional, ac as computeRootBounds, ad as computeTimeMarkers, ae as TIMELINE_PADDING_PX, af as Timeline, ag as TimelineHeader, ah as SidebarDataProvider, ai as hydrateResourceIOWithKey, aj as hydrateResourceIO, ak as fetchHook, l as fetchEvents, F as fetchRun, al as fetchStep, am as hasEncryptedFields, an as fetchStreams, ao as Slot, E as useComposedRefs, ap as Slottable, d as cn$1, aq as buttonVariants, ar as isEncryptedData, as as hydrateData, at as getWebRevivers, T as Tooltip, a as TooltipTrigger, b as TooltipContent, au as LIVE_UPDATE_INTERVAL_MS$1, u as useServerConfig, av as fetchEvent, aw as getEncryptionKeyForRun, t as toast, L as LoaderCircle, ax as StreamViewer } from "./mermaid-3ZIDBTTL-PK-k2mDG.js";
+import { q as Check, O as Copy, C as CircleAlert, Q as parseStepName, B as parseWorkflowName, j as ChevronRight, o as ChevronDown, U as ErrorCard, Z as Zap, S as Send, R as ResolveHookModal, V as Circle, X, p as ChevronUp, N as ErrorBoundary, I as unwrapServerActionResult, u as unwrapOrThrow, W as WorkflowWebAPIError, Y as useEscapeKeydown, t as composeEventHandlers, _ as useCallbackRef, $ as useLayoutEffect2, s as useControllableState, a0 as useId, a1 as createContext2, v as Presence, x as createContextScope, l as hideOthers, m as ReactRemoveScroll, a2 as useFocusGuards, a3 as LAYOUT, a4 as wakeUpRun, r as resumeHook, A as Alert, c as AlertTitle, d as AlertDescription, a as Skeleton$1, a5 as RunActionsButtons, F as StatusBadge, e as CopyableText, b as RelativeTime, T as Tabs, K as TabsList, L as TabsTrigger, M as TabsContent, y as cancelRun, a6 as recreateRun } from "./workflow-graph-viewer-DKqOOMnz.js";
+import { c as createLucideIcon, M as Spinner, N as cn, O as Skeleton, U as DecryptClickContext, Y as Yr, W as isEncryptedMarker, X as formatDuration, Z as DataInspector, _ as _r, $ as Button, a0 as Lock, h as useToast, a1 as RunClickContext, a2 as StreamClickContext, a3 as isExpiredMarker, a4 as isDoStreamStep, a5 as extractConversation, a6 as hasEncryptedFields, a7 as EVENT_DATA_REF_FIELDS, a8 as useSidebarDataOptional, a9 as clsx, aa as getSpanDurationMs, ab as getHighResInMs, ac as ActiveSpanProvider, ad as useActiveSpan, ae as computeRootBounds, af as computeTimeMarkers, ag as TIMELINE_PADDING_PX, ah as Timeline, ai as TimelineHeader, aj as SidebarDataProvider, ak as hydrateResourceIOWithKey, al as hydrateResourceIO, am as fetchHook, l as fetchEvents, F as fetchRun, an as fetchStep, ao as fetchStreams, ap as Slot, E as useComposedRefs, aq as Slottable, d as cn$1, ar as buttonVariants, as as isEncryptedData, at as hydrateData, au as getWebRevivers, T as Tooltip, a as TooltipTrigger, b as TooltipContent, av as LIVE_UPDATE_INTERVAL_MS$1, u as useServerConfig, aw as fetchEvent, ax as getEncryptionKeyForRun, t as toast, L as LoaderCircle, ay as StreamViewer } from "./mermaid-3ZIDBTTL-TNUP6Q3m.js";
 import { decrypt, importKey } from "./encryption-C69WMRfh.js";
 import "./index-Byi8AWfe.js";
 /**
@@ -81,6 +81,27 @@ const STYLES$2 = `.wf-decrypt-btn{appearance:none;-webkit-appearance:none;border
 function DecryptButton({ decrypted = false, loading = false, onClick }) {
   return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("style", { dangerouslySetInnerHTML: { __html: STYLES$2 } }), jsxRuntimeExports.jsxs("button", { type: "button", onClick: decrypted ? void 0 : onClick, disabled: decrypted || loading, className: `wf-decrypt-btn ${decrypted ? "wf-decrypt-done" : "wf-decrypt-idle"}`, children: [loading ? jsxRuntimeExports.jsx(Spinner, { size: 14 }) : decrypted ? jsxRuntimeExports.jsxs("svg", { width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntimeExports.jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }), jsxRuntimeExports.jsx("path", { d: "M7 11V7a5 5 0 0 1 9.9-1" })] }) : jsxRuntimeExports.jsxs("svg", { width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntimeExports.jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }), jsxRuntimeExports.jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })] }), loading ? "Decrypting…" : decrypted ? "Decrypted" : "Decrypt"] })] });
 }
+function CopyButton({ copyText, ariaLabel, className }) {
+  const [copied, setCopied] = reactExports.useState(false);
+  const timeoutRef = reactExports.useRef(null);
+  reactExports.useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  return jsxRuntimeExports.jsx("button", { type: "button", "aria-label": ariaLabel, className: cn("cursor-pointer text-gray-800 hover:text-gray-1000 bg-transparent border-0 p-1 m-0", className), onClick: (e) => {
+    e.stopPropagation();
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    void navigator.clipboard.writeText(copyText).then(() => {
+      setCopied(true);
+      timeoutRef.current = setTimeout(() => setCopied(false), 1e3);
+    });
+  }, children: jsxRuntimeExports.jsxs("div", { className: "relative w-3 h-3", children: [jsxRuntimeExports.jsx("div", { className: cn("absolute inset-0 flex items-center justify-center transition-all duration-150 ease-out", copied ? "scale-100 opacity-100" : "scale-0 opacity-0"), children: jsxRuntimeExports.jsx(Check, { className: "w-3 h-3" }) }), jsxRuntimeExports.jsx("div", { className: cn("absolute inset-0 flex items-center justify-center transition-all duration-150 ease-out", copied ? "scale-0 opacity-0" : "scale-100 opacity-100"), children: jsxRuntimeExports.jsx(Copy, { className: "w-3 h-3" }) })] }) });
+}
 function isStructuredErrorWithStack(value) {
   return value != null && typeof value === "object" && "stack" in value && typeof value.stack === "string";
 }
@@ -89,7 +110,6 @@ function deriveTitle(message) {
   return firstLine.trim();
 }
 function ErrorStackBlock({ value }) {
-  const toast2 = useToast();
   const stack = value.stack;
   const message = typeof value.message === "string" ? value.message : void 0;
   const title = message ? deriveTitle(message) : void 0;
@@ -99,17 +119,7 @@ ${stack}` : stack;
   return jsxRuntimeExports.jsxs("div", { className: "relative overflow-hidden rounded-md border", style: {
     borderColor: "var(--ds-red-400)",
     background: "var(--ds-red-100)"
-  }, children: [jsxRuntimeExports.jsx("button", { type: "button", "aria-label": "Copy error", title: "Copy", className: "!absolute !right-2 !top-2 !flex !h-6 !w-6 !items-center !justify-center !rounded-md !border transition-transform transition-colors duration-100 hover:!bg-[var(--ds-red-200)] active:!scale-95", style: {
-    borderColor: "var(--ds-red-400)",
-    background: "var(--ds-red-100)",
-    color: "var(--ds-red-900)"
-  }, onClick: () => {
-    navigator.clipboard.writeText(copyText).then(() => {
-      toast2.success("Copied to clipboard");
-    }).catch(() => {
-      toast2.error("Failed to copy");
-    });
-  }, children: jsxRuntimeExports.jsx(Copy, { size: 12 }) }), title && jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 px-3 py-2.5 pr-10", style: {
+  }, children: [jsxRuntimeExports.jsx(CopyButton, { copyText, ariaLabel: "Copy error", className: "absolute right-2 top-2 flex h-6 w-6 items-center justify-center rounded-md border border-red-400 bg-red-100 p-0 text-red-900 transition-transform transition-colors duration-100 hover:bg-red-200 active:scale-95" }), title && jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 px-3 py-2.5 pr-10", style: {
     color: "var(--ds-red-900)",
     borderBottom: "1px solid var(--ds-red-400)"
   }, children: [jsxRuntimeExports.jsx(CircleAlert, { className: "h-4 w-4 shrink-0" }), jsxRuntimeExports.jsx("p", {
@@ -409,27 +419,34 @@ function buildNameMaps(events, run) {
   return { correlationNameMap, workflowName };
 }
 function buildDurationMap(events) {
+  const chronological = [...events].sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime());
   const createdTimes = /* @__PURE__ */ new Map();
+  const firstStartedTimes = /* @__PURE__ */ new Map();
   const startedTimes = /* @__PURE__ */ new Map();
   const durations = /* @__PURE__ */ new Map();
-  for (const event of events) {
+  for (const event of chronological) {
     const ts = new Date(event.createdAt).getTime();
     const key = event.correlationId ?? "__run__";
     const type = event.eventType;
     if (type === "step_created" || type === "run_created") {
-      createdTimes.set(key, ts);
-    }
-    if (type === "step_started" || type === "run_started" || type === "workflow_started") {
-      startedTimes.set(key, ts);
       if (!createdTimes.has(key)) {
         createdTimes.set(key, ts);
       }
-      const createdAt = createdTimes.get(key);
-      const info = durations.get(key) ?? {};
-      if (createdAt !== void 0) {
-        info.queued = ts - createdAt;
+    }
+    if (type === "step_started" || type === "run_started" || type === "workflow_started") {
+      startedTimes.set(key, ts);
+      if (!firstStartedTimes.has(key)) {
+        firstStartedTimes.set(key, ts);
+        if (!createdTimes.has(key)) {
+          createdTimes.set(key, ts);
+        }
+        const createdAt = createdTimes.get(key);
+        const info = durations.get(key) ?? {};
+        if (createdAt !== void 0) {
+          info.queued = ts - createdAt;
+        }
+        durations.set(key, info);
       }
-      durations.set(key, info);
     }
     if (type === "step_completed" || type === "step_failed" || type === "run_completed" || type === "run_failed" || type === "run_cancelled" || type === "workflow_completed" || type === "workflow_failed" || type === "wait_completed" || type === "hook_disposed") {
       const startedAt = startedTimes.get(key);
@@ -1380,159 +1397,447 @@ function buildTrace(run, events, now) {
     knownDurationMs: Math.max(0, knownDurationMs)
   };
 }
-function ConversationView({ messages }) {
-  if (messages.length === 0) {
-    return jsxRuntimeExports.jsx("div", { className: "text-center py-8 text-[11px]", style: { color: "var(--ds-gray-600)" }, children: "No messages" });
+const ELLIPSIS = "...";
+const MIN_START = 3;
+const MIN_END = 3;
+const MIN_KEPT = MIN_START + MIN_END;
+const graphemeSegmenter = typeof Intl !== "undefined" && "Segmenter" in Intl ? new Intl.Segmenter(void 0, { granularity: "grapheme" }) : null;
+function toGraphemes(text) {
+  if (graphemeSegmenter) {
+    return [...graphemeSegmenter.segment(text)].map((s) => s.segment);
   }
-  return jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-3 p-3", children: messages.map((message, index) => jsxRuntimeExports.jsx(MessageBubble, { message }, index)) });
+  return Array.from(text);
 }
-function MessageBubble({ message }) {
-  const role = message.role;
-  const parts = parseContent(message.content);
-  const style = getRoleStyle(role);
-  return jsxRuntimeExports.jsxs("div", { className: "rounded-md border text-[11px]", style: {
-    backgroundColor: style.bg,
-    borderColor: style.border
-  }, children: [jsxRuntimeExports.jsx("div", { className: "px-2.5 py-1 border-b text-[10px] font-medium uppercase tracking-wide", style: {
-    borderColor: style.border,
-    color: style.label
-  }, children: role }), jsxRuntimeExports.jsx("div", { className: "px-2.5 py-2 space-y-2", children: parts.map((part, i) => jsxRuntimeExports.jsx(ContentPart, { part, role }, i)) })] });
+function buildCandidate(graphemes, kept) {
+  if (kept <= 0) {
+    return {
+      prefixText: "",
+      prefixGraphemeCount: 0,
+      suffixText: "",
+      suffixGraphemeCount: 0,
+      text: ELLIPSIS,
+      truncated: true
+    };
+  }
+  const suffixGraphemeCount = kept >= MIN_KEPT ? Math.max(MIN_END, Math.floor(kept / 2)) : Math.floor(kept / 2);
+  const prefixGraphemeCount = kept - suffixGraphemeCount;
+  const prefixText = graphemes.slice(0, prefixGraphemeCount).join("");
+  const suffixText = suffixGraphemeCount > 0 ? graphemes.slice(-suffixGraphemeCount).join("") : "";
+  return {
+    prefixText,
+    prefixGraphemeCount,
+    suffixText,
+    suffixGraphemeCount,
+    text: prefixText + ELLIPSIS + suffixText,
+    truncated: true
+  };
 }
-function ContentPart({ part, role }) {
-  if (part.type === "text") {
-    if (!part.text)
-      return null;
-    if (role === "assistant") {
-      return jsxRuntimeExports.jsx("div", { className: "prose prose-sm max-w-none text-[11px] [&>*:first-child]:mt-0 [&>*:last-child]:mb-0", style: { color: "var(--ds-gray-1000)" }, children: jsxRuntimeExports.jsx(_r, { children: part.text }) });
-    }
-    return jsxRuntimeExports.jsx("div", { className: "whitespace-pre-wrap break-words", style: { color: "var(--ds-gray-1000)" }, children: part.text });
+function middleTruncate(graphemes, availableWidth, measure, fullWidth) {
+  const fullText = graphemes.join("");
+  const resolvedFullWidth = fullWidth ?? measure(fullText);
+  if (availableWidth <= 0 || graphemes.length === 0) {
+    return {
+      prefixText: fullText,
+      prefixGraphemeCount: graphemes.length,
+      suffixText: "",
+      suffixGraphemeCount: 0,
+      text: fullText,
+      truncated: false
+    };
   }
-  if (part.type === "tool-call") {
-    return jsxRuntimeExports.jsxs("div", { className: "rounded border px-2 py-1.5", style: {
-      backgroundColor: "var(--ds-purple-100)",
-      borderColor: "var(--ds-purple-300)"
-    }, children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1.5 text-[10px] font-medium", children: [jsxRuntimeExports.jsx("span", { children: "🔧" }), jsxRuntimeExports.jsx("span", { style: { color: "var(--ds-purple-900)" }, children: part.toolName })] }), part.input != null && jsxRuntimeExports.jsx("div", { className: "mt-1.5 overflow-x-auto p-1.5 rounded", style: { backgroundColor: "var(--ds-gray-100)" }, children: typeof part.input === "string" ? jsxRuntimeExports.jsx("pre", { className: "text-[10px]", style: { color: "var(--ds-gray-800)" }, children: part.input }) : jsxRuntimeExports.jsx(DataInspector, { data: part.input }) })] });
+  if (resolvedFullWidth <= availableWidth) {
+    return {
+      prefixText: fullText,
+      prefixGraphemeCount: graphemes.length,
+      suffixText: "",
+      suffixGraphemeCount: 0,
+      text: fullText,
+      truncated: false
+    };
   }
-  if (part.type === "tool-result") {
-    return jsxRuntimeExports.jsxs("div", { className: "rounded border px-2 py-1.5", style: {
-      backgroundColor: "var(--ds-green-100)",
-      borderColor: "var(--ds-green-300)"
-    }, children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1.5 text-[10px] font-medium", children: [jsxRuntimeExports.jsx("span", { children: "✓" }), jsxRuntimeExports.jsxs("span", { style: { color: "var(--ds-green-900)" }, children: [part.toolName, " result"] })] }), part.output != null && jsxRuntimeExports.jsx("div", { className: "mt-1.5 overflow-x-auto max-h-[200px] overflow-y-auto p-1.5 rounded", style: { backgroundColor: "var(--ds-gray-100)" }, children: typeof part.output === "string" ? jsxRuntimeExports.jsx("pre", { className: "text-[10px]", style: { color: "var(--ds-gray-800)" }, children: part.output }) : jsxRuntimeExports.jsx(DataInspector, { data: part.output, expandLevel: 1 }) })] });
+  let lo = 0;
+  let hi = graphemes.length - 1;
+  let best = -1;
+  while (lo <= hi) {
+    const mid = lo + hi >>> 1;
+    const candidate = buildCandidate(graphemes, mid);
+    if (measure(candidate.text) <= availableWidth) {
+      best = mid;
+      lo = mid + 1;
+    } else {
+      hi = mid - 1;
+    }
   }
-  return null;
-}
-function getRoleStyle(role) {
-  switch (role) {
-    case "user":
-      return {
-        bg: "var(--ds-blue-100)",
-        border: "var(--ds-blue-300)",
-        label: "var(--ds-blue-700)"
-      };
-    case "assistant":
-      return {
-        bg: "var(--ds-gray-100)",
-        border: "var(--ds-gray-300)",
-        label: "var(--ds-gray-700)"
-      };
-    case "system":
-      return {
-        bg: "var(--ds-amber-100)",
-        border: "var(--ds-amber-300)",
-        label: "var(--ds-amber-700)"
-      };
-    case "tool":
-      return {
-        bg: "var(--ds-green-50)",
-        border: "var(--ds-green-300)",
-        label: "var(--ds-green-700)"
-      };
-    default:
-      return {
-        bg: "var(--ds-gray-100)",
-        border: "var(--ds-gray-300)",
-        label: "var(--ds-gray-700)"
-      };
+  if (best === -1) {
+    return {
+      prefixText: "",
+      prefixGraphemeCount: 0,
+      suffixText: "",
+      suffixGraphemeCount: 0,
+      text: "",
+      truncated: true
+    };
   }
+  return buildCandidate(graphemes, best);
 }
-function parseContent(content) {
-  if (typeof content === "string") {
-    return [{ type: "text", text: content }];
-  }
-  if (Array.isArray(content)) {
-    return content.map((part) => {
-      if (typeof part === "string") {
-        return { type: "text", text: part };
-      }
-      if ((part == null ? void 0 : part.type) === "text") {
-        return { type: "text", text: String(part.text ?? "") };
-      }
-      if ((part == null ? void 0 : part.type) === "tool-call") {
-        return {
-          type: "tool-call",
-          toolName: part.toolName,
-          input: part.input
-        };
-      }
-      if ((part == null ? void 0 : part.type) === "tool-result") {
-        return {
-          type: "tool-result",
-          toolName: part.toolName,
-          output: part.output
-        };
-      }
-      return { type: "text", text: "" };
-    });
+function getMiddleTruncateCopyText({ prefixText, selectionEnd, selectionStart, suffixText, value }) {
+  const visibleText = prefixText + ELLIPSIS + suffixText;
+  if (selectionStart < 0 || selectionEnd > visibleText.length || selectionStart >= selectionEnd) {
+    return null;
   }
-  return [];
-}
-const serializeForClipboard = (value) => {
-  if (typeof value === "string")
+  if (selectionStart === 0 && selectionEnd === visibleText.length) {
     return value;
-  if (typeof value === "number" || typeof value === "boolean" || value === null) {
-    return String(value);
   }
-  try {
-    return JSON.stringify(value, null, 2);
-  } catch {
-    return String(value);
+  const ellipsisStart = prefixText.length;
+  const ellipsisEnd = ellipsisStart + ELLIPSIS.length;
+  if (selectionStart > ellipsisStart || selectionEnd < ellipsisEnd) {
+    return null;
   }
-};
-function CopyableDataBlock({ data }) {
-  const toast2 = useToast();
-  return jsxRuntimeExports.jsxs("div", { className: "relative overflow-x-auto rounded-md border p-3", style: { borderColor: "var(--ds-gray-300)" }, children: [jsxRuntimeExports.jsx("button", { type: "button", "aria-label": "Copy data", title: "Copy", className: "!absolute !right-2 !top-2 !flex !h-6 !w-6 !items-center !justify-center !rounded-md !border !bg-[var(--ds-background-100)] !text-[var(--ds-gray-800)] transition-transform transition-colors duration-100 hover:!bg-[var(--ds-gray-alpha-200)] active:!scale-95 active:!bg-[var(--ds-gray-alpha-300)]", style: { borderColor: "var(--ds-gray-300)" }, onClick: () => {
-    navigator.clipboard.writeText(serializeForClipboard(data)).then(() => {
-      toast2.success("Copied to clipboard");
-    }).catch(() => {
-      toast2.error("Failed to copy");
-    });
-  }, children: jsxRuntimeExports.jsx(Copy, { size: 12 }) }), jsxRuntimeExports.jsx(DataInspector, { data })] });
+  const originalGraphemes = toGraphemes(value);
+  const selectedPrefixGraphemeCount = toGraphemes(visibleText.slice(0, selectionStart)).length;
+  const selectedSuffixGraphemeCount = toGraphemes(visibleText.slice(ellipsisEnd, selectionEnd)).length;
+  const suffixStart = originalGraphemes.length - toGraphemes(suffixText).length;
+  return originalGraphemes.slice(selectedPrefixGraphemeCount, suffixStart + selectedSuffixGraphemeCount).join("");
 }
-function DetailCard({ summary, children, onToggle, disabled = false, summaryClassName, contentClassName }) {
-  if (disabled) {
-    return jsxRuntimeExports.jsx("div", { className: `rounded-md border px-2.5 py-1.5 text-xs ${summaryClassName ?? ""}`, style: {
-      borderColor: "var(--ds-gray-300)",
-      backgroundColor: "var(--ds-gray-100)",
-      color: "var(--ds-gray-700)",
-      cursor: "not-allowed",
-      opacity: 0.8
-    }, children: summary });
+function getMiddleTruncateCopyTextFromSelectionText({ prefixText, selectionText, suffixText, value }) {
+  const visibleText = prefixText + ELLIPSIS + suffixText;
+  const trimmedSelectionText = selectionText.trim();
+  if (!trimmedSelectionText) {
+    return null;
   }
-  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)",
-    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.jsx("div", { className: `mt-2 ${contentClassName ?? ""}`, children })] });
-}
-function TabButton({ active, onClick, children }) {
-  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: {
-    // Explicit styles to prevent app-level button overrides when web-shared
-    // is embedded in a self-hosted app.
-    backgroundColor: "transparent",
-    borderTop: "none",
-    borderLeft: "none",
-    borderRight: "none",
+  const leading = selectionText.slice(0, selectionText.length - selectionText.trimStart().length);
+  const trailing = selectionText.slice(selectionText.trimEnd().length);
+  if (trimmedSelectionText === visibleText) {
+    return leading + value + trailing;
+  }
+  if (!trimmedSelectionText.includes(ELLIPSIS)) {
+    return null;
+  }
+  const selectionStart = visibleText.indexOf(trimmedSelectionText);
+  if (selectionStart === -1) {
+    return null;
+  }
+  const selectionEnd = selectionStart + trimmedSelectionText.length;
+  const mappedText = getMiddleTruncateCopyText({
+    prefixText,
+    selectionEnd,
+    selectionStart,
+    suffixText,
+    value
+  });
+  return mappedText === null ? null : leading + mappedText + trailing;
+}
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? reactExports.useEffect : reactExports.useLayoutEffect;
+function createFullState(value, graphemes) {
+  return {
+    displayText: value,
+    isTruncated: false,
+    prefixGraphemeCount: graphemes.length,
+    prefixText: value,
+    suffixGraphemeCount: 0,
+    suffixText: ""
+  };
+}
+function useMiddleTruncate(value) {
+  const graphemes = reactExports.useMemo(() => toGraphemes(value), [value]);
+  const fullState = reactExports.useMemo(() => createFullState(value, graphemes), [graphemes, value]);
+  const ref = reactExports.useRef(null);
+  const measureRef = reactExports.useRef(null);
+  const [state, setState] = reactExports.useState(() => fullState);
+  const rafRef = reactExports.useRef(0);
+  const updateState = reactExports.useCallback((nextState) => {
+    setState((currentState) => {
+      if (currentState.displayText === nextState.displayText && currentState.isTruncated === nextState.isTruncated && currentState.prefixText === nextState.prefixText && currentState.prefixGraphemeCount === nextState.prefixGraphemeCount && currentState.suffixText === nextState.suffixText && currentState.suffixGraphemeCount === nextState.suffixGraphemeCount) {
+        return currentState;
+      }
+      return nextState;
+    });
+  }, []);
+  const recalculate = reactExports.useCallback(() => {
+    const el = ref.current;
+    const measureEl = measureRef.current;
+    if (!el || !measureEl)
+      return;
+    const available = el.clientWidth;
+    if (available <= 0) {
+      updateState(fullState);
+      return;
+    }
+    const measure = (text) => {
+      measureEl.textContent = text;
+      return measureEl.scrollWidth;
+    };
+    const fullWidth = measure(value);
+    if (fullWidth <= available) {
+      updateState(fullState);
+      return;
+    }
+    const result = middleTruncate(graphemes, available, measure, fullWidth);
+    updateState({
+      displayText: result.text,
+      isTruncated: result.truncated,
+      prefixGraphemeCount: result.prefixGraphemeCount,
+      prefixText: result.prefixText,
+      suffixGraphemeCount: result.suffixGraphemeCount,
+      suffixText: result.suffixText
+    });
+  }, [fullState, graphemes, updateState, value]);
+  useIsomorphicLayoutEffect(() => {
+    recalculate();
+  }, [recalculate]);
+  reactExports.useEffect(() => {
+    var _a;
+    const el = ref.current;
+    if (!el)
+      return;
+    const debouncedRecalc = () => {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = requestAnimationFrame(recalculate);
+    };
+    const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(debouncedRecalc) : null;
+    ro == null ? void 0 : ro.observe(el);
+    window.addEventListener("resize", debouncedRecalc);
+    const onFontsLoaded = () => {
+      debouncedRecalc();
+    };
+    const fontSet = "fonts" in document ? document.fonts : null;
+    (_a = fontSet == null ? void 0 : fontSet.addEventListener) == null ? void 0 : _a.call(fontSet, "loadingdone", onFontsLoaded);
+    return () => {
+      var _a2;
+      ro == null ? void 0 : ro.disconnect();
+      window.removeEventListener("resize", debouncedRecalc);
+      cancelAnimationFrame(rafRef.current);
+      (_a2 = fontSet == null ? void 0 : fontSet.removeEventListener) == null ? void 0 : _a2.call(fontSet, "loadingdone", onFontsLoaded);
+    };
+  }, [recalculate]);
+  return {
+    ref,
+    measureRef,
+    displayText: state.displayText,
+    isTruncated: state.isTruncated,
+    prefixGraphemeCount: state.prefixGraphemeCount,
+    prefixText: state.prefixText,
+    suffixGraphemeCount: state.suffixGraphemeCount,
+    suffixText: state.suffixText
+  };
+}
+function getRangeOffsets(container, range) {
+  if (!container.contains(range.startContainer) || !container.contains(range.endContainer)) {
+    return null;
+  }
+  const startRange = document.createRange();
+  startRange.selectNodeContents(container);
+  startRange.setEnd(range.startContainer, range.startOffset);
+  const endRange = document.createRange();
+  endRange.selectNodeContents(container);
+  endRange.setEnd(range.endContainer, range.endOffset);
+  return {
+    end: endRange.toString().length,
+    start: startRange.toString().length
+  };
+}
+function MiddleTruncate({ value, className, onCopy: onCopyProp, ...props }) {
+  const { ref, measureRef, displayText, isTruncated, prefixText, suffixText } = useMiddleTruncate(value);
+  const visibleRef = reactExports.useRef(null);
+  const handleCopy = reactExports.useCallback((e) => {
+    onCopyProp == null ? void 0 : onCopyProp(e);
+    if (e.defaultPrevented || !isTruncated)
+      return;
+    const selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0)
+      return;
+    const selectionText = selection.toString();
+    if (!selectionText)
+      return;
+    const range = selection.getRangeAt(0);
+    const visibleEl = visibleRef.current;
+    let copyText = null;
+    if (e.currentTarget.contains(range.startContainer) && e.currentTarget.contains(range.endContainer) && visibleEl) {
+      const offsets = getRangeOffsets(visibleEl, range);
+      if (offsets) {
+        copyText = getMiddleTruncateCopyText({
+          prefixText,
+          selectionEnd: offsets.end,
+          selectionStart: offsets.start,
+          suffixText,
+          value
+        });
+      }
+    }
+    copyText ?? (copyText = getMiddleTruncateCopyTextFromSelectionText({
+      prefixText,
+      selectionText,
+      suffixText,
+      value
+    }));
+    if (copyText === null)
+      return;
+    e.preventDefault();
+    e.clipboardData.setData("text/plain", copyText);
+  }, [onCopyProp, isTruncated, prefixText, suffixText, value]);
+  return jsxRuntimeExports.jsxs("span", { title: isTruncated ? value : void 0, ...props, ref, className: cn("relative inline-grid min-w-0 max-w-full overflow-hidden whitespace-nowrap", className), onCopy: handleCopy, children: [isTruncated && jsxRuntimeExports.jsx("span", { className: "sr-only select-none", children: value }), jsxRuntimeExports.jsx("span", { "aria-hidden": "true", className: "pointer-events-none col-start-1 row-start-1 invisible select-none whitespace-nowrap", children: value }), jsxRuntimeExports.jsx("span", { "aria-hidden": isTruncated || void 0, className: "col-start-1 row-start-1 min-w-0 overflow-hidden", ref: visibleRef, children: isTruncated ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("span", { children: prefixText }), jsxRuntimeExports.jsx("span", { children: ELLIPSIS }), jsxRuntimeExports.jsx("span", { children: suffixText })] }) : displayText }), jsxRuntimeExports.jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute left-0 top-0 inline-block invisible select-none whitespace-nowrap", ref: measureRef })] });
+}
+function ConversationView({ messages }) {
+  if (messages.length === 0) {
+    return jsxRuntimeExports.jsx("div", { className: "text-center py-8 text-[11px]", style: { color: "var(--ds-gray-600)" }, children: "No messages" });
+  }
+  return jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-3 p-3", children: messages.map((message, index) => jsxRuntimeExports.jsx(MessageBubble, { message }, index)) });
+}
+function MessageBubble({ message }) {
+  const role = message.role;
+  const parts = parseContent(message.content);
+  const style = getRoleStyle(role);
+  return jsxRuntimeExports.jsxs("div", { className: "rounded-md border text-[11px]", style: {
+    backgroundColor: style.bg,
+    borderColor: style.border
+  }, children: [jsxRuntimeExports.jsx("div", { className: "px-2.5 py-1 border-b text-[10px] font-medium uppercase tracking-wide", style: {
+    borderColor: style.border,
+    color: style.label
+  }, children: role }), jsxRuntimeExports.jsx("div", { className: "px-2.5 py-2 space-y-2", children: parts.map((part, i) => jsxRuntimeExports.jsx(ContentPart, { part, role }, i)) })] });
+}
+function ContentPart({ part, role }) {
+  if (part.type === "text") {
+    if (!part.text)
+      return null;
+    if (role === "assistant") {
+      return jsxRuntimeExports.jsx("div", { className: "prose prose-sm max-w-none text-[11px] [&>*:first-child]:mt-0 [&>*:last-child]:mb-0", style: { color: "var(--ds-gray-1000)" }, children: jsxRuntimeExports.jsx(_r, { children: part.text }) });
+    }
+    return jsxRuntimeExports.jsx("div", { className: "whitespace-pre-wrap break-words", style: { color: "var(--ds-gray-1000)" }, children: part.text });
+  }
+  if (part.type === "tool-call") {
+    return jsxRuntimeExports.jsxs("div", { className: "rounded border px-2 py-1.5", style: {
+      backgroundColor: "var(--ds-purple-100)",
+      borderColor: "var(--ds-purple-300)"
+    }, children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1.5 text-[10px] font-medium", children: [jsxRuntimeExports.jsx("span", { children: "🔧" }), jsxRuntimeExports.jsx("span", { style: { color: "var(--ds-purple-900)" }, children: part.toolName })] }), part.input != null && jsxRuntimeExports.jsx("div", { className: "mt-1.5 overflow-x-auto p-1.5 rounded", style: { backgroundColor: "var(--ds-gray-100)" }, children: typeof part.input === "string" ? jsxRuntimeExports.jsx("pre", { className: "text-[10px]", style: { color: "var(--ds-gray-800)" }, children: part.input }) : jsxRuntimeExports.jsx(DataInspector, { data: part.input }) })] });
+  }
+  if (part.type === "tool-result") {
+    return jsxRuntimeExports.jsxs("div", { className: "rounded border px-2 py-1.5", style: {
+      backgroundColor: "var(--ds-green-100)",
+      borderColor: "var(--ds-green-300)"
+    }, children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1.5 text-[10px] font-medium", children: [jsxRuntimeExports.jsx("span", { children: "✓" }), jsxRuntimeExports.jsxs("span", { style: { color: "var(--ds-green-900)" }, children: [part.toolName, " result"] })] }), part.output != null && jsxRuntimeExports.jsx("div", { className: "mt-1.5 overflow-x-auto max-h-[200px] overflow-y-auto p-1.5 rounded", style: { backgroundColor: "var(--ds-gray-100)" }, children: typeof part.output === "string" ? jsxRuntimeExports.jsx("pre", { className: "text-[10px]", style: { color: "var(--ds-gray-800)" }, children: part.output }) : jsxRuntimeExports.jsx(DataInspector, { data: part.output, expandLevel: 1 }) })] });
+  }
+  return null;
+}
+function getRoleStyle(role) {
+  switch (role) {
+    case "user":
+      return {
+        bg: "var(--ds-blue-100)",
+        border: "var(--ds-blue-300)",
+        label: "var(--ds-blue-700)"
+      };
+    case "assistant":
+      return {
+        bg: "var(--ds-gray-100)",
+        border: "var(--ds-gray-300)",
+        label: "var(--ds-gray-700)"
+      };
+    case "system":
+      return {
+        bg: "var(--ds-amber-100)",
+        border: "var(--ds-amber-300)",
+        label: "var(--ds-amber-700)"
+      };
+    case "tool":
+      return {
+        bg: "var(--ds-green-50)",
+        border: "var(--ds-green-300)",
+        label: "var(--ds-green-700)"
+      };
+    default:
+      return {
+        bg: "var(--ds-gray-100)",
+        border: "var(--ds-gray-300)",
+        label: "var(--ds-gray-700)"
+      };
+  }
+}
+function parseContent(content) {
+  if (typeof content === "string") {
+    return [{ type: "text", text: content }];
+  }
+  if (Array.isArray(content)) {
+    return content.map((part) => {
+      if (typeof part === "string") {
+        return { type: "text", text: part };
+      }
+      if ((part == null ? void 0 : part.type) === "text") {
+        return { type: "text", text: String(part.text ?? "") };
+      }
+      if ((part == null ? void 0 : part.type) === "tool-call") {
+        return {
+          type: "tool-call",
+          toolName: part.toolName,
+          input: part.input
+        };
+      }
+      if ((part == null ? void 0 : part.type) === "tool-result") {
+        return {
+          type: "tool-result",
+          toolName: part.toolName,
+          output: part.output
+        };
+      }
+      return { type: "text", text: "" };
+    });
+  }
+  return [];
+}
+const encryptedPlaceholderPreview = `{
+  "input": "[encrypted]",
+  "result": "[encrypted]"
+}`;
+function EncryptedDataBlock() {
+  const ctx = reactExports.useContext(DecryptClickContext);
+  return jsxRuntimeExports.jsxs("div", { className: "relative min-h-20 overflow-hidden rounded-md border border-gray-alpha-400 bg-background-100", children: [jsxRuntimeExports.jsx("pre", { "aria-hidden": "true", className: "pointer-events-none m-0 select-none p-3 font-mono text-label-12 text-gray-900 blur-[4px]", children: encryptedPlaceholderPreview }), jsxRuntimeExports.jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: ctx ? jsxRuntimeExports.jsxs(Button, { onClick: ctx.onDecrypt, disabled: ctx.isDecrypting, size: "xs", children: [ctx.isDecrypting ? jsxRuntimeExports.jsx(Spinner, { size: 10 }) : jsxRuntimeExports.jsx(Lock, { className: "h-3 w-3" }), jsxRuntimeExports.jsx("span", { children: "Decrypt" })] }) : jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1 rounded border border-gray-alpha-400 bg-gray-100 px-1.5 py-0.5 text-button-12 font-medium text-gray-700", children: [jsxRuntimeExports.jsx(Lock, { className: "h-3 w-3" }), "Encrypted"] }) })] });
+}
+const serializeForClipboard = (value) => {
+  if (typeof value === "string")
+    return value;
+  if (typeof value === "number" || typeof value === "boolean" || value === null) {
+    return String(value);
+  }
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+};
+function CopyableDataBlock({ data }) {
+  return jsxRuntimeExports.jsxs("div", { className: "relative overflow-x-auto rounded-md border border-gray-alpha-400 p-3", children: [jsxRuntimeExports.jsx(CopyButton, { copyText: serializeForClipboard(data), ariaLabel: "Copy data", className: "absolute right-2 top-2 z-10 flex h-6 w-6 items-center justify-center rounded-md border border-gray-alpha-400 !bg-background-100 p-0 text-gray-900 transition-transform transition-colors duration-100 hover:bg-gray-200 active:scale-95 active:bg-gray-300" }), jsxRuntimeExports.jsx(DataInspector, { data })] });
+}
+function DetailCard({ summary, children, onToggle, disabled = false, defaultOpen = false, variant = "section", trailing, summaryClassName, contentClassName }) {
+  const [open, setOpen] = reactExports.useState(defaultOpen);
+  const handleToggle = (e) => {
+    if (e.target !== e.currentTarget)
+      return;
+    const next = e.currentTarget.open;
+    setOpen(next);
+    onToggle == null ? void 0 : onToggle(next);
+  };
+  if (variant === "card") {
+    if (disabled) {
+      return jsxRuntimeExports.jsx("div", { className: cn("list-none px-3 py-4 bg-background-200 [&::-webkit-details-marker]:hidden", summaryClassName), style: { cursor: "not-allowed", opacity: 0.8 }, children: summary });
+    }
+    return jsxRuntimeExports.jsxs("details", { className: "group/card last:border-b border-gray-alpha-400", open, onToggle: handleToggle, children: [jsxRuntimeExports.jsx("summary", { className: cn("list-none cursor-pointer px-3 py-4 border-t border-gray-alpha-400 bg-background-200 hover:bg-gray-100 [&::-webkit-details-marker]:hidden", summaryClassName), children: jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1.5", children: [jsxRuntimeExports.jsx(ChevronRight, { size: 14, className: cn("shrink-0 text-gray-700 group-hover/card:text-gray-1000", open && "rotate-90") }), summary] }) }), jsxRuntimeExports.jsx("div", { className: contentClassName, children })] });
+  }
+  const rowClasses = "flex h-9 items-center gap-2 px-2 -mx-2 text-heading-14 font-medium my-2";
+  if (trailing) {
+    return jsxRuntimeExports.jsx("section", { className: "-mx-4 border-t px-4 border-gray-alpha-400", children: jsxRuntimeExports.jsxs("div", { className: cn(rowClasses, summaryClassName), children: [jsxRuntimeExports.jsx("div", { className: "isolate relative shrink-0 w-3.5 h-3.5 text-gray-700", children: jsxRuntimeExports.jsx(ChevronRight, { size: 14, className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" }) }), jsxRuntimeExports.jsx("span", { className: "min-w-0 flex-1", children: summary }), jsxRuntimeExports.jsx("div", { className: "shrink-0 pr-1", children: trailing })] }) });
+  }
+  if (disabled) {
+    return jsxRuntimeExports.jsx("section", { className: "-mx-4 border-t px-4 border-gray-alpha-400", children: jsxRuntimeExports.jsx("div", { className: cn(rowClasses, summaryClassName), style: { color: "var(--ds-gray-700)", cursor: "not-allowed" }, children: jsxRuntimeExports.jsx("span", { className: "min-w-0 flex-1", children: summary }) }) });
+  }
+  return jsxRuntimeExports.jsx("section", { className: "-mx-4 border-t px-4 border-gray-alpha-400", children: jsxRuntimeExports.jsxs("details", { className: "group", open, onToggle: handleToggle, children: [jsxRuntimeExports.jsxs("summary", { className: cn("group/trigger list-none cursor-pointer rounded hover:bg-gray-alpha-100 [&::-webkit-details-marker]:hidden", rowClasses, summaryClassName), children: [jsxRuntimeExports.jsxs("div", { className: "isolate relative shrink-0 text-gray-700 group-hover/trigger:text-gray-1000 w-3.5 h-3.5", children: [jsxRuntimeExports.jsx(ChevronRight, { size: 14, className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-100 group-open:opacity-0" }), jsxRuntimeExports.jsx(ChevronDown, { size: 14, className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-0 group-open:opacity-100" })] }), jsxRuntimeExports.jsx("span", { className: "min-w-0 flex-1", children: summary })] }), jsxRuntimeExports.jsx("div", { className: cn("mb-3", contentClassName), children })] }) });
+}
+function TabButton({ active, onClick, children }) {
+  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: {
+    // Explicit styles to prevent app-level button overrides when web-shared
+    // is embedded in a self-hosted app.
+    backgroundColor: "transparent",
+    borderTop: "none",
+    borderLeft: "none",
+    borderRight: "none",
     borderBottom: `2px solid ${active ? "var(--ds-blue-600)" : "transparent"}`,
     borderRadius: 0,
     outline: "none",
@@ -1564,23 +1869,10 @@ const conversationTabs = [
 ];
 function ConversationWithTabs({ conversation, args }) {
   const [activeTab, setActiveTab] = reactExports.useState("conversation");
-  return jsxRuntimeExports.jsx(DetailCard, { summary: `Input (${conversation.length} messages)`, children: jsxRuntimeExports.jsx(TabbedContainer, { tabs: conversationTabs, activeTab, onTabChange: setActiveTab, ariaLabel: "Conversation view", children: activeTab === "conversation" ? jsxRuntimeExports.jsx(ConversationView, { messages: conversation }) : jsxRuntimeExports.jsx("div", { className: "p-3", children: Array.isArray(args) ? args.map((v, i) => jsxRuntimeExports.jsx("div", { className: "mt-2 first:mt-0", children: JsonBlock(v) }, i)) : JsonBlock(args) }) }) });
+  return jsxRuntimeExports.jsx(DetailCard, { summary: "Input", children: jsxRuntimeExports.jsx(TabbedContainer, { tabs: conversationTabs, activeTab, onTabChange: setActiveTab, ariaLabel: "Conversation view", children: activeTab === "conversation" ? jsxRuntimeExports.jsx(ConversationView, { messages: conversation }) : jsxRuntimeExports.jsx("div", { className: "p-3", children: Array.isArray(args) ? args.map((v, i) => jsxRuntimeExports.jsx("div", { className: "mt-2 first:mt-0", children: JsonBlock(v) }, i)) : JsonBlock(args) }) }) });
 }
 function EncryptedFieldBlock() {
-  const ctx = reactExports.useContext(DecryptClickContext);
-  if (ctx) {
-    return jsxRuntimeExports.jsxs("button", { type: "button", onClick: ctx.onDecrypt, disabled: ctx.isDecrypting, className: "flex w-full items-center justify-center gap-1.5 rounded-md border px-3 py-2 text-xs cursor-pointer transition-colors", style: {
-      borderColor: "var(--ds-gray-400)",
-      backgroundColor: "var(--ds-gray-100)",
-      color: "var(--ds-gray-700)",
-      opacity: ctx.isDecrypting ? 0.6 : 1
-    }, title: "Click to decrypt", children: [ctx.isDecrypting ? jsxRuntimeExports.jsx(Spinner, { size: 12 }) : jsxRuntimeExports.jsx(Lock, { className: "h-3 w-3" }), jsxRuntimeExports.jsx("span", { className: "font-medium", children: ctx.isDecrypting ? "Decrypting…" : "Decrypt" })] });
-  }
-  return jsxRuntimeExports.jsxs("div", { className: "flex w-full items-center justify-center gap-1.5 rounded-md border px-3 py-2 text-xs", style: {
-    borderColor: "var(--ds-gray-300)",
-    backgroundColor: "var(--ds-gray-100)",
-    color: "var(--ds-gray-700)"
-  }, children: [jsxRuntimeExports.jsx(Lock, { className: "h-3 w-3" }), jsxRuntimeExports.jsx("span", { className: "font-medium", children: "Encrypted" })] });
+  return jsxRuntimeExports.jsx(EncryptedDataBlock, {});
 }
 function ExpiredFieldBlock() {
   return jsxRuntimeExports.jsx("div", { className: "flex items-center gap-1.5 rounded-md border px-3 py-2 text-xs", style: {
@@ -1653,6 +1945,7 @@ const attributeDisplayNames = {
   attempt: "Attempts",
   eventId: "Event ID",
   runId: "Run ID",
+  token: "Token",
   eventType: "Event Type",
   correlationId: "Correlation ID",
   deploymentId: "Deployment ID",
@@ -1706,13 +1999,6 @@ const formatLocalMillisecondTime = (date) => date.toLocaleString(void 0, {
   second: "numeric",
   fractionalSecondDigits: 3
 });
-const localMillisecondTime = (value) => {
-  const date = parseDateValue(value);
-  if (!date) {
-    return "-";
-  }
-  return formatLocalMillisecondTime(date);
-};
 const localMillisecondTimeOrNull = (value) => {
   const date = parseDateValue(value);
   if (!date) {
@@ -1733,7 +2019,7 @@ const attributeToDisplayFn = {
   stepName: (_value) => null,
   // IDs
   runId: (_value) => null,
-  stepId: (_value) => null,
+  stepId: (value) => String(value),
   hookId: (value) => String(value),
   eventId: (value) => String(value),
   // Run/step details
@@ -1758,6 +2044,14 @@ const attributeToDisplayFn = {
   projectId: (_value) => null,
   environment: (_value) => null,
   executionContext: (_value) => null,
+  // Attributes MVP — string-string metadata attached to the run.
+  // Rendered as a JSON block; if empty/missing, hidden by the
+  // hasDisplayContent gate above.
+  attributes: (value) => {
+    if (!hasDisplayContent(value))
+      return null;
+    return JsonBlock(value);
+  },
   // Dates — wrapped with TimestampTooltip showing UTC/local + relative time
   createdAt: timestampWithTooltipOrNull,
   startedAt: timestampWithTooltipOrNull,
@@ -1771,20 +2065,19 @@ const attributeToDisplayFn = {
     if (!hasDisplayContent(value))
       return null;
     if (isEncryptedMarker(value))
-      return jsxRuntimeExports.jsx(EncryptedFieldBlock, {});
+      return jsxRuntimeExports.jsx(EncryptedDataBlock, {});
     if (isExpiredMarker(value))
       return jsxRuntimeExports.jsx(ExpiredFieldBlock, {});
     return JsonBlock(value);
   },
   input: (value, context) => {
-    if (isEncryptedMarker(value))
-      return jsxRuntimeExports.jsx(EncryptedFieldBlock, {});
+    if (isEncryptedMarker(value)) {
+      return jsxRuntimeExports.jsx(DetailCard, { summary: "Input", children: jsxRuntimeExports.jsx(EncryptedFieldBlock, {}) });
+    }
     if (isExpiredMarker(value))
       return jsxRuntimeExports.jsx(ExpiredFieldBlock, {});
     if (value && typeof value === "object" && "args" in value) {
       const { args, closureVars, thisVal } = value;
-      const argCount2 = Array.isArray(args) ? args.length : 0;
-      const argLabel2 = argCount2 === 1 ? "argument" : "arguments";
       const hasClosureVars = hasDisplayContent(closureVars);
       const hasThisVal = hasDisplayContent(thisVal);
       const hasArgs = hasDisplayContent(args);
@@ -1795,46 +2088,47 @@ const attributeToDisplayFn = {
         }
       }
       if (!hasArgs && !hasClosureVars && !hasThisVal) {
-        return jsxRuntimeExports.jsx(DetailCard, { summary: "Input (no data)", disabled: true, summaryClassName: "text-label-14 font-medium py-2" });
+        return jsxRuntimeExports.jsx(DetailCard, { summary: "Input (no data)", disabled: true });
       }
-      return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(DetailCard, { summary: `Input (${argCount2} ${argLabel2})`, summaryClassName: "text-label-14 font-medium py-2", contentClassName: "mt-0", children: Array.isArray(args) ? args.map((v, i) => jsxRuntimeExports.jsx("div", { className: "mt-2 first:mt-0", children: JsonBlock(v) }, i)) : JsonBlock(args) }), hasClosureVars && jsxRuntimeExports.jsx(DetailCard, { summary: "Closure Variables", children: JsonBlock(closureVars) }), hasThisVal && jsxRuntimeExports.jsx(DetailCard, { summary: "this", children: JsonBlock(thisVal) })] });
+      return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(DetailCard, { summary: "Input", children: Array.isArray(args) ? args.map((v, i) => jsxRuntimeExports.jsx("div", { className: "mt-2 first:mt-0", children: JsonBlock(v) }, i)) : JsonBlock(args) }), hasClosureVars && jsxRuntimeExports.jsx(DetailCard, { summary: "Closure Variables", children: JsonBlock(closureVars) }), hasThisVal && jsxRuntimeExports.jsx(DetailCard, { summary: "Context", children: JsonBlock(thisVal) })] });
     }
-    const argCount = Array.isArray(value) ? value.length : 0;
-    const argLabel = argCount === 1 ? "argument" : "arguments";
     if (!hasDisplayContent(value)) {
-      return jsxRuntimeExports.jsx(DetailCard, { summary: "Input (no data)", disabled: true, summaryClassName: "text-label-14 font-medium py-2" });
+      return jsxRuntimeExports.jsx(DetailCard, { summary: "Input (no data)", disabled: true });
     }
-    return jsxRuntimeExports.jsx(DetailCard, { summary: `Input (${argCount} ${argLabel})`, summaryClassName: "text-label-14 font-medium py-2", contentClassName: "mt-0", children: Array.isArray(value) ? value.map((v, i) => jsxRuntimeExports.jsx("div", { className: "mt-2 first:mt-0", children: JsonBlock(v) }, i)) : JsonBlock(value) });
+    return jsxRuntimeExports.jsx(DetailCard, { summary: "Input", children: Array.isArray(value) ? value.map((v, i) => jsxRuntimeExports.jsx("div", { className: "mt-2 first:mt-0", children: JsonBlock(v) }, i)) : JsonBlock(value) });
   },
   output: (value) => {
+    if (isEncryptedMarker(value)) {
+      return jsxRuntimeExports.jsx(DetailCard, { summary: "Output", children: jsxRuntimeExports.jsx(EncryptedFieldBlock, {}) });
+    }
     if (!hasDisplayContent(value))
       return null;
-    if (isEncryptedMarker(value))
-      return jsxRuntimeExports.jsx(EncryptedFieldBlock, {});
     if (isExpiredMarker(value))
       return jsxRuntimeExports.jsx(ExpiredFieldBlock, {});
-    return jsxRuntimeExports.jsx(DetailCard, { summary: "Output", summaryClassName: "text-label-14 font-medium py-2", contentClassName: "mt-0", children: JsonBlock(value) });
+    return jsxRuntimeExports.jsx(DetailCard, { summary: "Output", children: JsonBlock(value) });
   },
   error: (value) => {
-    if (isEncryptedMarker(value))
-      return jsxRuntimeExports.jsx(EncryptedFieldBlock, {});
+    if (isEncryptedMarker(value)) {
+      return jsxRuntimeExports.jsx(DetailCard, { summary: "Error", defaultOpen: true, children: jsxRuntimeExports.jsx(EncryptedFieldBlock, {}) });
+    }
     if (isExpiredMarker(value))
       return jsxRuntimeExports.jsx(ExpiredFieldBlock, {});
     if (!hasDisplayContent(value))
       return null;
     if (isStructuredErrorWithStack(value)) {
-      return jsxRuntimeExports.jsx(DetailCard, { summary: "Error", summaryClassName: "text-label-14 font-medium py-2", contentClassName: "mt-0", children: jsxRuntimeExports.jsx(ErrorStackBlock, { value }) });
+      return jsxRuntimeExports.jsx(DetailCard, { summary: "Error", defaultOpen: true, children: jsxRuntimeExports.jsx(ErrorStackBlock, { value }) });
     }
-    return jsxRuntimeExports.jsx(DetailCard, { summary: "Error", summaryClassName: "text-label-14 font-medium py-2", contentClassName: "mt-0", children: JsonBlock(value) });
+    return jsxRuntimeExports.jsx(DetailCard, { summary: "Error", defaultOpen: true, children: JsonBlock(value) });
   },
   eventData: (value) => {
-    if (isEncryptedMarker(value))
-      return jsxRuntimeExports.jsx(EncryptedFieldBlock, {});
+    if (isEncryptedMarker(value)) {
+      return jsxRuntimeExports.jsx(DetailCard, { summary: "Event Data", defaultOpen: true, children: jsxRuntimeExports.jsx(EncryptedFieldBlock, {}) });
+    }
     if (isExpiredMarker(value))
       return jsxRuntimeExports.jsx(ExpiredFieldBlock, {});
     if (!hasDisplayContent(value))
       return null;
-    return jsxRuntimeExports.jsx(DetailCard, { summary: "Event Data", children: JsonBlock(value) });
+    return jsxRuntimeExports.jsx(DetailCard, { summary: "Event Data", defaultOpen: true, children: JsonBlock(value) });
   },
   errorCode: (value) => {
     if (typeof value !== "string" || value.length === 0)
@@ -1848,16 +2142,33 @@ const resolvableAttributes = [
   "error",
   "metadata",
   "eventData"
-];
+];
+const selfHeaderedAttributes = /* @__PURE__ */ new Set([
+  "input",
+  "output",
+  "error",
+  "eventData"
+]);
 const ExpiredDataMessage = () => jsxRuntimeExports.jsx("div", { className: "text-copy-12 rounded-md border p-4 my-2", style: {
   borderColor: "var(--ds-gray-300)",
   backgroundColor: "var(--ds-gray-100)",
   color: "var(--ds-gray-700)"
 }, children: jsxRuntimeExports.jsx("span", { children: "The data for this run has expired and is no longer available." }) });
+const copyableBasicAttributes = /* @__PURE__ */ new Set([
+  "stepId",
+  "hookId",
+  "eventId",
+  "deploymentId"
+]);
 const AttributeBlock = ({ attribute, value, isLoading, inline = false, context }) => {
-  const isExpandableLoadingTarget = attribute === "input" || attribute === "eventData";
+  const decryptCtx = reactExports.useContext(DecryptClickContext);
+  const isExpandableLoadingTarget = attribute === "input" || attribute === "output" || attribute === "eventData";
   if (isLoading && isExpandableLoadingTarget && !hasDisplayContent(value)) {
-    return jsxRuntimeExports.jsxs("div", { className: `my-2 flex flex-col ${attribute === "input" ? "gap-2 my-3.5" : "gap-0"}`, children: [jsxRuntimeExports.jsx("span", { className: "text-label-14 text-gray-1000 font-medium first-letter:uppercase", children: attribute }), jsxRuntimeExports.jsx(Skeleton, { className: "h-9 w-full rounded-md" })] });
+    const label = attribute === "eventData" ? "Event Data" : attribute === "output" ? "Output" : "Input";
+    if (decryptCtx == null ? void 0 : decryptCtx.hasEncryptedData) {
+      return jsxRuntimeExports.jsx(DetailCard, { summary: label, defaultOpen: attribute === "eventData", children: jsxRuntimeExports.jsx(EncryptedFieldBlock, {}) });
+    }
+    return jsxRuntimeExports.jsx(DetailCard, { summary: label });
   }
   const displayFn = attributeToDisplayFn[attribute];
   if (!displayFn) {
@@ -1870,7 +2181,10 @@ const AttributeBlock = ({ attribute, value, isLoading, inline = false, context }
   if (inline) {
     return jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1.5", children: [jsxRuntimeExports.jsx("span", { className: "text-[11px] font-medium", style: { color: "var(--ds-gray-700)" }, children: attribute }), jsxRuntimeExports.jsx("span", { className: "text-[11px]", style: { color: "var(--ds-gray-1000)" }, children: displayValue })] });
   }
-  return jsxRuntimeExports.jsxs("div", { className: "relative", children: [typeof isLoading === "boolean" && isLoading && jsxRuntimeExports.jsx("div", { className: "absolute top-9 right-4", children: jsxRuntimeExports.jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2", style: { borderColor: "var(--ds-gray-900)" } }) }), jsxRuntimeExports.jsxs("div", { className: `my-2 flex flex-col ${attribute === "input" || attribute === "output" || attribute === "error" ? "gap-2 my-3.5" : "gap-0"}`, children: [jsxRuntimeExports.jsx("span", { className: "text-label-14 text-gray-1000 font-medium first-letter:uppercase", children: attribute }), jsxRuntimeExports.jsx("span", { className: "text-xs", style: { color: "var(--ds-gray-1000)" }, children: displayValue })] }, attribute)] });
+  if (selfHeaderedAttributes.has(attribute)) {
+    return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: displayValue });
+  }
+  return jsxRuntimeExports.jsxs("div", { className: "relative", children: [typeof isLoading === "boolean" && isLoading && jsxRuntimeExports.jsx("div", { className: "absolute top-9 right-4", children: jsxRuntimeExports.jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2", style: { borderColor: "var(--ds-gray-900)" } }) }), jsxRuntimeExports.jsxs("div", { className: "my-2 flex flex-col gap-0", children: [jsxRuntimeExports.jsx("span", { className: "text-label-14 text-gray-1000 font-medium first-letter:uppercase", children: attribute }), jsxRuntimeExports.jsx("span", { className: "text-xs", style: { color: "var(--ds-gray-1000)" }, children: displayValue })] }, attribute)] });
 };
 const AttributePanel = ({ data, moduleSpecifier, isLoading, error, expiredAt, onStreamClick, onRunClick, onDecrypt, isDecrypting = false, resource }) => {
   const toast2 = useToast();
@@ -1883,712 +2197,426 @@ const AttributePanel = ({ data, moduleSpecifier, isLoading, error, expiredAt, on
     if (moduleSpecifier) {
       result.moduleSpecifier = moduleSpecifier;
     } else if (typeof data.stepName === "string") {
-      result.moduleSpecifier = data.stepName;
-    } else if (typeof data.workflowName === "string") {
-      result.moduleSpecifier = data.workflowName;
-    }
-    return result;
-  }, [data, moduleSpecifier]);
-  const hasExpired = expiredAt != null && new Date(expiredAt) < /* @__PURE__ */ new Date();
-  const basicAttributes = Object.keys(displayData).filter((key) => !resolvableAttributes.includes(key)).sort(sortByAttributeOrder);
-  const resolvedAttributes = reactExports.useMemo(() => {
-    const present = Object.keys(displayData).filter((key) => resolvableAttributes.includes(key)).sort(sortByAttributeOrder);
-    if (!isLoading)
-      return present;
-    const loadingDefaults = ["input"];
-    for (const key of loadingDefaults) {
-      if (!present.includes(key)) {
-        present.push(key);
-      }
-    }
-    return present.sort(sortByAttributeOrder);
-  }, [displayData, isLoading]);
-  const visibleBasicAttributes = basicAttributes.filter((attribute) => {
-    const displayFn = attributeToDisplayFn[attribute];
-    if (!displayFn)
-      return false;
-    const displayValue = displayFn(displayData[attribute]);
-    return displayValue !== null;
-  });
-  const orderedBasicAttributes = reactExports.useMemo(() => {
-    const attributes = [...visibleBasicAttributes];
-    const moduleSpecifierIndex = attributes.indexOf("moduleSpecifier");
-    if (moduleSpecifierIndex === -1) {
-      return attributes;
-    }
-    attributes.splice(moduleSpecifierIndex, 1);
-    const workflowNameIndex = attributes.indexOf("workflowName");
-    if (workflowNameIndex !== -1) {
-      attributes.splice(workflowNameIndex + 1, 0, "moduleSpecifier");
-      return attributes;
-    }
-    const stepNameIndex = attributes.indexOf("stepName");
-    if (stepNameIndex !== -1) {
-      attributes.splice(stepNameIndex + 1, 0, "moduleSpecifier");
-      return attributes;
-    }
-    attributes.unshift("moduleSpecifier");
-    return attributes;
-  }, [visibleBasicAttributes]);
-  const displayContext = reactExports.useMemo(() => ({
-    stepName: displayData.stepName
-  }), [displayData.stepName]);
-  const handleCopyModuleSpecifier = reactExports.useCallback((value) => {
-    navigator.clipboard.writeText(value).then(() => {
-      toast2.success("moduleSpecifier copied");
-    }).catch(() => {
-      toast2.error("Failed to copy moduleSpecifier");
-    });
-  }, []);
-  return jsxRuntimeExports.jsx(RunClickContext.Provider, { value: onRunClick, children: jsxRuntimeExports.jsx(StreamClickContext.Provider, { value: onStreamClick, children: jsxRuntimeExports.jsx(DecryptClickContext.Provider, { value: onDecrypt ? { onDecrypt, isDecrypting } : void 0, children: jsxRuntimeExports.jsxs("div", { children: [visibleBasicAttributes.length > 0 && jsxRuntimeExports.jsxs("div", { className: "mb-3 flex flex-col overflow-hidden rounded-md border", style: {
-    borderColor: "var(--ds-gray-300)"
-  }, children: [orderedBasicAttributes.map((attribute, index) => {
-    var _a;
-    const displayValue = (_a = attributeToDisplayFn[attribute]) == null ? void 0 : _a.call(attributeToDisplayFn, displayData[attribute]);
-    const isModuleSpecifier = attribute === "moduleSpecifier";
-    const moduleSpecifierValue = typeof displayValue === "string" ? displayValue : String(displayValue ?? displayData.moduleSpecifier ?? "");
-    const shouldCapitalizeLabel = attribute !== "workflowCoreVersion";
-    const showResumeAtSkeleton = isLoading && resource === "sleep" && !displayData.resumeAt;
-    const showDivider = index < orderedBasicAttributes.length - 1 || showResumeAtSkeleton;
-    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",
-      padding: 0
-    }, title: moduleSpecifierValue, onClick: () => handleCopyModuleSpecifier(moduleSpecifierValue), children: moduleSpecifierValue }) : jsxRuntimeExports.jsx("span", { className: "min-w-0 max-w-[70%] truncate text-right text-[13px] font-mono", style: { color: "var(--ds-gray-1000)" }, children: displayValue })] }), showDivider ? jsxRuntimeExports.jsx("div", { className: "mx-2.5 border-b", style: { borderColor: "var(--ds-gray-300)" } }) : null] }, attribute);
-  }), isLoading && resource === "sleep" && !displayData.resumeAt && jsxRuntimeExports.jsx("div", { className: "py-1", children: jsxRuntimeExports.jsxs("div", { className: "flex min-h-[32px] items-center justify-between gap-4 rounded-sm px-2.5 py-1", children: [jsxRuntimeExports.jsx("span", { className: "text-[14px] first-letter:uppercase", style: { color: "var(--ds-gray-700)" }, children: "resumeAt" }), jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-[55%]" })] }) })] }), error ? jsxRuntimeExports.jsx(ErrorCard, { title: "Failed to load resource details", details: error.message, className: "my-4" }) : hasExpired ? jsxRuntimeExports.jsx(ExpiredDataMessage, {}) : jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: resolvedAttributes.map((attribute) => jsxRuntimeExports.jsx(AttributeBlock, { isLoading, attribute, value: displayData[attribute], context: displayContext }, attribute)) })] }) }) }) });
-};
-const ERROR_EVENT_TYPES = /* @__PURE__ */ new Set(["step_failed", "step_retrying"]);
-const DATA_EVENT_TYPES = /* @__PURE__ */ new Set([
-  "step_created",
-  "step_completed",
-  "step_failed",
-  "step_retrying",
-  "hook_created",
-  "hook_received",
-  "run_created",
-  "run_completed",
-  "run_failed",
-  "wait_created",
-  "wait_completed"
-]);
-function EventItem({ event, onLoadEventData, encryptionKey }) {
-  const [loadedData, setLoadedData] = reactExports.useState(null);
-  const [isLoading, setIsLoading] = reactExports.useState(false);
-  const [loadError, setLoadError] = reactExports.useState(null);
-  const wasExpandedRef = reactExports.useRef(false);
-  const loadedDataRef = reactExports.useRef(null);
-  const existingData = "eventData" in event && event.eventData != null ? event.eventData : null;
-  const mergedDisplay = loadedData ?? existingData;
-  const canHaveData = DATA_EVENT_TYPES.has(event.eventType);
-  const loadEventData = reactExports.useCallback(async (options) => {
-    if (!onLoadEventData || !event.correlationId || !event.eventId)
-      return;
-    if (!(options == null ? void 0 : options.force) && loadedDataRef.current !== null) {
-      return;
-    }
-    try {
-      setIsLoading(true);
-      setLoadError(null);
-      const data = await onLoadEventData(event.correlationId, event.eventId);
-      loadedDataRef.current = data;
-      setLoadedData(data);
-    } catch (err) {
-      setLoadError(err instanceof Error ? err.message : String(err));
-    } finally {
-      setIsLoading(false);
-    }
-  }, [onLoadEventData, event.correlationId, event.eventId]);
-  const handleExpand = reactExports.useCallback(async () => {
-    if (isLoading)
-      return;
-    wasExpandedRef.current = true;
-    await loadEventData();
-  }, [isLoading, loadEventData]);
-  reactExports.useEffect(() => {
-    if (!encryptionKey || !wasExpandedRef.current)
-      return;
-    loadedDataRef.current = null;
-    setLoadedData(null);
-    void loadEventData({ force: true });
-  }, [encryptionKey, loadEventData]);
-  const createdAt = new Date(event.createdAt);
-  const displayPayload = isLoading ? loadedData : mergedDisplay;
-  return jsxRuntimeExports.jsxs(DetailCard, { summaryClassName: "text-base py-2", summary: jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("span", { className: "font-medium", style: { color: "var(--ds-gray-1000)" }, children: event.eventType }), " ", "-", " ", jsxRuntimeExports.jsx("span", { style: { color: "var(--ds-gray-700)" }, children: localMillisecondTime(createdAt.getTime()) })] }), onToggle: canHaveData ? (open) => {
-    if (open)
-      handleExpand();
-  } : void 0, children: [jsxRuntimeExports.jsxs("div", { className: "flex flex-col divide-y rounded-md border overflow-hidden", style: {
-    borderColor: "var(--ds-gray-300)",
-    backgroundColor: "var(--ds-gray-100)"
-  }, children: [jsxRuntimeExports.jsxs("div", { className: "flex min-h-[32px] items-center justify-between gap-4 px-2.5 py-1.5", style: { borderColor: "var(--ds-gray-300)" }, children: [jsxRuntimeExports.jsx("span", { className: "text-[13px] font-medium", style: { color: "var(--ds-gray-700)" }, children: "Event ID" }), jsxRuntimeExports.jsx("span", { className: "max-w-[70%] truncate text-right text-[13px] font-mono", style: { color: "var(--ds-gray-1000)" }, title: event.eventId, children: event.eventId })] }), event.correlationId && jsxRuntimeExports.jsxs("div", { className: "flex min-h-[32px] items-center justify-between gap-4 px-2.5 py-1.5", style: { borderColor: "var(--ds-gray-300)" }, children: [jsxRuntimeExports.jsx("span", { className: "text-[13px] font-medium", style: { color: "var(--ds-gray-700)" }, children: "Correlation ID" }), jsxRuntimeExports.jsx("span", { className: "max-w-[70%] truncate text-right text-[13px] font-mono", style: { color: "var(--ds-gray-1000)" }, title: event.correlationId, children: event.correlationId })] })] }), isLoading && jsxRuntimeExports.jsxs("div", { className: "mt-2 rounded-md border p-3", style: {
-    borderColor: "var(--ds-gray-300)"
-  }, children: [jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-[35%]" }), jsxRuntimeExports.jsx(Skeleton, { className: "mt-2 h-4 w-[90%]" }), jsxRuntimeExports.jsx(Skeleton, { className: "mt-2 h-4 w-[75%]" })] }), loadError && jsxRuntimeExports.jsx(ErrorCard, { title: "Failed to load event data", details: loadError, className: "mt-2" }), displayPayload != null && jsxRuntimeExports.jsx("div", { className: "mt-2", children: jsxRuntimeExports.jsx(EventDataBlock, { eventType: event.eventType, data: displayPayload }) })] });
-}
-function hasOnlyExpiredFields(data, eventType) {
-  if (data === null || typeof data !== "object" || Array.isArray(data)) {
-    return false;
-  }
-  const record = data;
-  const refKeys = EVENT_DATA_REF_FIELDS[eventType] ?? [];
-  const presentKeys = refKeys.filter((k) => k in record);
-  return presentKeys.length > 0 && presentKeys.every((k) => isExpiredMarker(record[k]));
-}
-function EventDataBlock({ eventType, data }) {
-  if (isExpiredMarker(data) || hasOnlyExpiredFields(data, eventType)) {
-    return jsxRuntimeExports.jsx("div", { className: "flex items-center gap-1.5 rounded-md border px-3 py-2 text-xs", style: {
-      borderColor: "var(--ds-gray-300)",
-      backgroundColor: "var(--ds-gray-100)",
-      color: "var(--ds-gray-700)"
-    }, children: jsxRuntimeExports.jsx("span", { className: "font-medium", children: "Data expired" }) });
-  }
-  if (ERROR_EVENT_TYPES.has(eventType) && data != null && typeof data === "object") {
-    const record = data;
-    if (isStructuredErrorWithStack(record.error)) {
-      return jsxRuntimeExports.jsx(ErrorStackBlock, { value: record.error });
-    }
-    if (isStructuredErrorWithStack(record)) {
-      return jsxRuntimeExports.jsx(ErrorStackBlock, { value: record });
-    }
-  }
-  return jsxRuntimeExports.jsx(CopyableDataBlock, { data });
-}
-function EventsList({ events, isLoading = false, error, onLoadEventData, encryptionKey }) {
-  const sortedEvents = reactExports.useMemo(() => [...events].sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()), [events]);
-  return jsxRuntimeExports.jsxs("div", { className: "mt-2", style: { color: "var(--ds-gray-1000)" }, children: [jsxRuntimeExports.jsx("h3", { className: "text-label-14 font-medium mt-4 mb-2", style: { color: "var(--ds-gray-1000)" }, children: "Events" }), isLoading ? jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-4", children: [jsxRuntimeExports.jsx(Skeleton, { className: "h-9 w-full rounded-md" }), jsxRuntimeExports.jsx(Skeleton, { className: "h-9 w-full rounded-md" }), jsxRuntimeExports.jsx(Skeleton, { className: "h-9 w-full rounded-md" })] }) : null, !isLoading && !error && sortedEvents.length === 0 && jsxRuntimeExports.jsx("div", { className: "text-sm", children: "No events found" }), sortedEvents.length > 0 && !error ? jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-4", children: sortedEvents.map((event) => jsxRuntimeExports.jsx(EventItem, { event, onLoadEventData, encryptionKey }, event.eventId)) }) : null] });
-}
-function isStep(data) {
-  return data !== null && typeof data === "object" && "stepId" in data;
-}
-function isWorkflowRun(data) {
-  return data !== null && typeof data === "object" && "runId" in data;
-}
-function isHook(data) {
-  return data !== null && typeof data === "object" && "hookId" in data;
-}
-function EntityDetailPanel({ run, onStreamClick, onRunClick, spanDetailData, spanDetailError, spanDetailLoading, onSpanSelect, onWakeUpSleep, onLoadEventData, onResolveHook, encryptionKey, onDecrypt, isDecrypting = false, selectedSpan }) {
-  const toast2 = useToast();
-  const [stoppingSleep, setStoppingSleep] = reactExports.useState(false);
-  const [showResolveHookModal, setShowResolveHookModal] = reactExports.useState(false);
-  const [resolvingHook, setResolvingHook] = reactExports.useState(false);
-  const [resolvedHookIds, setResolvedHookIds] = reactExports.useState(/* @__PURE__ */ new Set());
-  const data = selectedSpan == null ? void 0 : selectedSpan.data;
-  const rawEvents = selectedSpan == null ? void 0 : selectedSpan.rawEvents;
-  const rawEventsLength = (rawEvents == null ? void 0 : rawEvents.length) ?? 0;
-  const { resource, resourceId, runId } = reactExports.useMemo(() => {
-    if (!selectedSpan) {
-      return { resource: void 0, resourceId: void 0, runId: void 0 };
-    }
-    const res = selectedSpan.resource;
-    if (res === "step" && isStep(data)) {
-      return { resource: "step", resourceId: data.stepId, runId: data.runId };
-    }
-    if (res === "run" && isWorkflowRun(data)) {
-      return { resource: "run", resourceId: data.runId, runId: void 0 };
-    }
-    if (res === "hook" && isHook(data)) {
-      return { resource: "hook", resourceId: data.hookId, runId: void 0 };
-    }
-    if (res === "sleep") {
-      const waitData = data;
-      return {
-        resource: "sleep",
-        resourceId: selectedSpan.spanId,
-        runId: waitData == null ? void 0 : waitData.runId
-      };
-    }
-    return { resource: void 0, resourceId: void 0, runId: void 0 };
-  }, [selectedSpan, data]);
-  const onSpanSelectRef = reactExports.useRef(onSpanSelect);
-  onSpanSelectRef.current = onSpanSelect;
-  reactExports.useEffect(() => {
-    if (resource && resourceId && ["run", "step", "hook", "sleep"].includes(resource)) {
-      onSpanSelectRef.current({
-        resource,
-        resourceId,
-        runId
-      });
-    }
-  }, [resource, resourceId, runId]);
-  const canWakeUp = reactExports.useMemo(() => {
-    if (resource !== "sleep" || !rawEvents)
-      return false;
-    const terminalStates = ["completed", "failed", "cancelled"];
-    if (terminalStates.includes(run.status))
-      return false;
-    const hasWaitCreated = rawEvents.some((e) => e.eventType === "wait_created");
-    if (!hasWaitCreated)
-      return false;
-    const hasWaitCompleted = rawEvents.some((e) => e.eventType === "wait_completed");
-    return !hasWaitCompleted;
-  }, [resource, rawEvents, rawEventsLength, run.status]);
-  const canResolveHook = reactExports.useMemo(() => {
-    if (resource !== "hook" || !rawEvents || !resourceId)
-      return false;
-    if (resolvedHookIds.has(resourceId))
-      return false;
-    const terminalStates = ["completed", "failed", "cancelled"];
-    if (terminalStates.includes(run.status))
-      return false;
-    const hasHookDisposed = rawEvents.some((e) => e.eventType === "hook_disposed");
-    if (hasHookDisposed)
-      return false;
-    return true;
-  }, [
-    resource,
-    resourceId,
-    rawEvents,
-    rawEventsLength,
-    run.status,
-    resolvedHookIds
-  ]);
-  const error = spanDetailError ?? void 0;
-  const loading = spanDetailLoading ?? false;
-  const hookToken = reactExports.useMemo(() => {
-    if (resource !== "hook" || !resourceId)
-      return void 0;
-    if (isHook(spanDetailData) && spanDetailData.token) {
-      return spanDetailData.token;
+      result.moduleSpecifier = data.stepName;
+    } else if (typeof data.workflowName === "string") {
+      result.moduleSpecifier = data.workflowName;
     }
-    if (isHook(data) && data.token) {
-      return data.token;
+    return result;
+  }, [data, moduleSpecifier]);
+  const hasExpired = expiredAt != null && new Date(expiredAt) < /* @__PURE__ */ new Date();
+  const basicAttributes = Object.keys(displayData).filter((key) => !resolvableAttributes.includes(key)).sort(sortByAttributeOrder);
+  const resolvedAttributes = reactExports.useMemo(() => {
+    const present = Object.keys(displayData).filter((key) => resolvableAttributes.includes(key)).sort(sortByAttributeOrder);
+    if (!isLoading)
+      return present;
+    if (resource === "sleep")
+      return present;
+    const loadingDefaults = ["input", "output"];
+    for (const key of loadingDefaults) {
+      if (!present.includes(key)) {
+        present.push(key);
+      }
     }
-    return void 0;
-  }, [resource, resourceId, spanDetailData, data]);
-  reactExports.useEffect(() => {
-    if (error && selectedSpan && resource) {
-      toast2.error(`Failed to load ${resource} details`, {
-        description: error.message
-      });
+    return present.sort(sortByAttributeOrder);
+  }, [displayData, isLoading, resource]);
+  const visibleBasicAttributes = basicAttributes.filter((attribute) => {
+    const displayFn = attributeToDisplayFn[attribute];
+    if (!displayFn)
+      return false;
+    const displayValue = displayFn(displayData[attribute]);
+    return displayValue !== null;
+  });
+  const orderedBasicAttributes = reactExports.useMemo(() => {
+    const attributes = [...visibleBasicAttributes];
+    const moduleSpecifierIndex = attributes.indexOf("moduleSpecifier");
+    if (moduleSpecifierIndex === -1) {
+      return attributes;
     }
-  }, [error, resource, selectedSpan]);
-  const handleWakeUp = async () => {
-    if (stoppingSleep || !resourceId)
-      return;
-    if (!onWakeUpSleep) {
-      toast2.error("Unable to wake up sleep", {
-        description: "No wake-up handler provided."
-      });
-      return;
+    attributes.splice(moduleSpecifierIndex, 1);
+    const workflowNameIndex = attributes.indexOf("workflowName");
+    if (workflowNameIndex !== -1) {
+      attributes.splice(workflowNameIndex + 1, 0, "moduleSpecifier");
+      return attributes;
     }
-    try {
-      setStoppingSleep(true);
-      const result = await onWakeUpSleep(run.runId, resourceId);
-      if (result.stoppedCount > 0) {
-        toast2.success("Run woken up", {
-          description: "The sleep call has been interrupted and the run woken up."
-        });
-      } else {
-        toast2.info("Sleep already completed", {
-          description: "This sleep call has already finished."
-        });
-      }
-    } catch (err) {
-      console.error("Failed to wake up run:", err);
-      toast2.error("Failed to wake up run", {
-        description: err instanceof Error ? err.message : "An unknown error occurred"
-      });
-    } finally {
-      setStoppingSleep(false);
+    const stepNameIndex = attributes.indexOf("stepName");
+    if (stepNameIndex !== -1) {
+      attributes.splice(stepNameIndex + 1, 0, "moduleSpecifier");
+      return attributes;
     }
-  };
-  const handleResolveHook = reactExports.useCallback(async (payload) => {
-    if (resolvingHook)
-      return;
-    if (!onResolveHook) {
-      toast2.error("Unable to resolve hook", {
-        description: "No resolve handler provided."
-      });
+    attributes.unshift("moduleSpecifier");
+    return attributes;
+  }, [visibleBasicAttributes]);
+  const displayContext = reactExports.useMemo(() => ({
+    stepName: displayData.stepName
+  }), [displayData.stepName]);
+  const handleCopyModuleSpecifier = reactExports.useCallback((value) => {
+    navigator.clipboard.writeText(value).then(() => {
+      toast2.success("moduleSpecifier copied");
+    }).catch(() => {
+      toast2.error("Failed to copy moduleSpecifier");
+    });
+  }, []);
+  const outerDecryptCtx = reactExports.useContext(DecryptClickContext);
+  const decryptValue = onDecrypt ? {
+    onDecrypt,
+    isDecrypting,
+    hasEncryptedData: outerDecryptCtx == null ? void 0 : outerDecryptCtx.hasEncryptedData
+  } : outerDecryptCtx;
+  return jsxRuntimeExports.jsx(RunClickContext.Provider, { value: onRunClick, children: jsxRuntimeExports.jsx(StreamClickContext.Provider, { value: onStreamClick, children: jsxRuntimeExports.jsxs(DecryptClickContext.Provider, { value: decryptValue, children: [visibleBasicAttributes.length > 0 && jsxRuntimeExports.jsxs("div", { className: "flex flex-col overflow-hidden divide-y divide-gray-alpha-400 mb-3", children: [orderedBasicAttributes.map((attribute) => {
+    var _a;
+    const displayValue = (_a = attributeToDisplayFn[attribute]) == null ? void 0 : _a.call(attributeToDisplayFn, displayData[attribute]);
+    const isModuleSpecifier = attribute === "moduleSpecifier";
+    const isCopyableBasicAttribute = copyableBasicAttributes.has(attribute) && typeof displayValue === "string";
+    const moduleSpecifierValue = typeof displayValue === "string" ? displayValue : String(displayValue ?? displayData.moduleSpecifier ?? "");
+    return jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between py-2", children: [jsxRuntimeExports.jsx("span", { className: "text-label-14 text-gray-900", children: getAttributeDisplayName(attribute) }), isModuleSpecifier ? jsxRuntimeExports.jsx("button", { type: "button", className: "min-w-0 max-w-[70%] truncate text-right text-label-13 font-mono", style: {
+      color: "var(--ds-gray-1000)",
+      background: "transparent",
+      border: "none",
+      padding: 0
+    }, title: moduleSpecifierValue, onClick: () => handleCopyModuleSpecifier(moduleSpecifierValue), children: moduleSpecifierValue }) : isCopyableBasicAttribute ? jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 max-w-[70%] items-center justify-end gap-1 text-right text-[13px] font-mono", style: {
+      color: "var(--ds-gray-1000)"
+    }, title: displayValue, children: [jsxRuntimeExports.jsx(MiddleTruncate, { value: displayValue, className: "flex-1" }), jsxRuntimeExports.jsx(CopyButton, { copyText: displayValue, ariaLabel: `Copy ${getAttributeDisplayName(attribute)}`, className: "shrink-0 -mr-1" })] }) : jsxRuntimeExports.jsx("span", { className: "text-right text-label-13 font-mono", children: displayValue })] }, attribute);
+  }), isLoading && resource === "sleep" && !displayData.resumeAt && jsxRuntimeExports.jsx("div", { className: "py-1", children: jsxRuntimeExports.jsxs("div", { className: "flex min-h-[32px] items-center justify-between gap-4 rounded-sm px-2.5 py-1", children: [jsxRuntimeExports.jsx("span", { className: "text-[14px] first-letter:uppercase", style: { color: "var(--ds-gray-700)" }, children: "resumeAt" }), jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-[55%]" })] }) })] }), error ? jsxRuntimeExports.jsx(ErrorCard, { title: "Failed to load resource details", details: error.message, className: "my-4" }) : hasExpired ? jsxRuntimeExports.jsx(ExpiredDataMessage, {}) : resolvedAttributes.length > 0 ? jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: resolvedAttributes.map((attribute) => jsxRuntimeExports.jsx(AttributeBlock, { isLoading, attribute, value: displayData[attribute], context: displayContext }, attribute)) }) : null] }) }) });
+};
+const ERROR_EVENT_TYPES = /* @__PURE__ */ new Set(["step_failed", "step_retrying"]);
+const DATA_EVENT_TYPES = /* @__PURE__ */ new Set([
+  "step_created",
+  "step_completed",
+  "step_failed",
+  "step_retrying",
+  "hook_created",
+  "hook_received",
+  "run_created",
+  "run_completed",
+  "run_failed",
+  "wait_created",
+  "wait_completed"
+]);
+function EventItem({ event, onLoadEventData, encryptionKey }) {
+  const [loadedData, setLoadedData] = reactExports.useState(null);
+  const [isLoading, setIsLoading] = reactExports.useState(false);
+  const [loadError, setLoadError] = reactExports.useState(null);
+  const wasExpandedRef = reactExports.useRef(false);
+  const loadedDataRef = reactExports.useRef(null);
+  const existingData = "eventData" in event && event.eventData != null ? event.eventData : null;
+  const mergedDisplay = loadedData ?? existingData;
+  const canHaveData = DATA_EVENT_TYPES.has(event.eventType);
+  const loadEventData = reactExports.useCallback(async (options) => {
+    if (!onLoadEventData || !event.correlationId || !event.eventId)
       return;
-    }
-    if (!hookToken) {
-      toast2.error("Unable to resolve hook", {
-        description: "Missing hook token. Try refreshing the run data and retry."
-      });
+    if (!(options == null ? void 0 : options.force) && loadedDataRef.current !== null) {
       return;
     }
     try {
-      setResolvingHook(true);
-      const candidate = spanDetailData ?? data;
-      const hook = isHook(candidate) ? candidate : void 0;
-      await onResolveHook(hookToken, payload, hook);
-      toast2.success("Hook resolved", {
-        description: "The payload has been sent and the hook resolved."
-      });
-      setShowResolveHookModal(false);
-      if (resourceId) {
-        setResolvedHookIds((prev) => new Set(prev).add(resourceId));
-      }
+      setIsLoading(true);
+      setLoadError(null);
+      const data = await onLoadEventData(event.correlationId, event.eventId);
+      loadedDataRef.current = data;
+      setLoadedData(data);
     } catch (err) {
-      console.error("Failed to resolve hook:", err);
-      toast2.error("Failed to resolve hook", {
-        description: err instanceof Error ? err.message : "An unknown error occurred"
-      });
+      setLoadError(err instanceof Error ? err.message : String(err));
     } finally {
-      setResolvingHook(false);
-    }
-  }, [onResolveHook, hookToken, resolvingHook, spanDetailData, data]);
-  const displayData = spanDetailData ?? data;
-  const moduleSpecifier = reactExports.useMemo(() => {
-    const displayRecord = displayData;
-    const displayStepName = displayRecord.stepName;
-    const displayWorkflowName = displayRecord.workflowName;
-    if (typeof displayStepName === "string") {
-      return displayStepName;
-    }
-    if (typeof displayWorkflowName === "string") {
-      return displayWorkflowName;
-    }
-    if (typeof run.workflowName === "string") {
-      return run.workflowName;
+      setIsLoading(false);
     }
-    return void 0;
-  }, [displayData, run.workflowName]);
-  if (!selectedSpan || !resource || !resourceId) {
-    return null;
-  }
-  const hasPendingActions = resource === "sleep" && canWakeUp || resource === "hook" && canResolveHook;
-  return jsxRuntimeExports.jsxs("div", { className: "flex h-full flex-col", children: [jsxRuntimeExports.jsx(DecryptClickContext.Provider, { value: onDecrypt ? { onDecrypt, isDecrypting } : void 0, children: 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: {
-    background: "var(--ds-amber-200)",
-    color: "var(--ds-amber-900)"
-  }, children: [jsxRuntimeExports.jsx(Zap, { className: "h-4 w-4" }), stoppingSleep ? "Waking up..." : "Wake Up Sleep"] }), resource === "hook" && canResolveHook && jsxRuntimeExports.jsxs("button", { type: "button", onClick: () => setShowResolveHookModal(true), disabled: resolvingHook, 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", resolvingHook ? "opacity-50 cursor-not-allowed" : "cursor-pointer"), style: {
-    background: "var(--ds-gray-1000)",
-    color: "var(--ds-background-100)"
-  }, children: [jsxRuntimeExports.jsx(Send, { className: "h-4 w-4" }), "Resolve Hook"] })] })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [jsxRuntimeExports.jsx("section", { children: jsxRuntimeExports.jsx(AttributePanel, { data: displayData, moduleSpecifier, expiredAt: run.expiredAt, isLoading: loading, error: error ?? void 0, onStreamClick, onRunClick, onDecrypt, isDecrypting, resource }) }), resource !== "run" && rawEvents && jsxRuntimeExports.jsx("section", { children: jsxRuntimeExports.jsx(EventsList, { events: rawEvents, onLoadEventData, encryptionKey }) })] })] }) }), jsxRuntimeExports.jsx(ResolveHookModal, { isOpen: showResolveHookModal, onClose: () => setShowResolveHookModal(false), onSubmit: handleResolveHook, isSubmitting: resolvingHook })] });
-}
-const QUERY = "(prefers-reduced-motion: reduce)";
-const useReducedMotion = () => {
-  const [reduced, setReduced] = reactExports.useState(() => {
-    if (typeof window === "undefined" || !window.matchMedia)
-      return false;
-    return window.matchMedia(QUERY).matches;
-  });
-  reactExports.useEffect(() => {
-    if (typeof window === "undefined" || !window.matchMedia)
+  }, [onLoadEventData, event.correlationId, event.eventId]);
+  const handleExpand = reactExports.useCallback(async () => {
+    if (isLoading)
       return;
-    const media = window.matchMedia(QUERY);
-    const onChange = () => setReduced(media.matches);
-    media.addEventListener("change", onChange);
-    onChange();
-    return () => media.removeEventListener("change", onChange);
-  }, []);
-  return reduced;
-};
-function CopyButton({ copyText, ariaLabel, className }) {
-  const [copied, setCopied] = reactExports.useState(false);
-  const timeoutRef = reactExports.useRef(null);
-  reactExports.useEffect(() => {
-    return () => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-    };
-  }, []);
-  return jsxRuntimeExports.jsx("button", { type: "button", "aria-label": ariaLabel, className: cn("cursor-pointer text-gray-800 hover:text-gray-1000 bg-transparent border-none p-1 m-0", className), onClick: (e) => {
-    e.stopPropagation();
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-    }
-    void navigator.clipboard.writeText(copyText).then(() => {
-      setCopied(true);
-      timeoutRef.current = setTimeout(() => setCopied(false), 1e3);
-    });
-  }, children: jsxRuntimeExports.jsxs("div", { className: "relative w-3 h-3", children: [jsxRuntimeExports.jsx("div", { className: cn("absolute inset-0 flex items-center justify-center transition-all duration-150 ease-out", copied ? "scale-100 opacity-100" : "scale-0 opacity-0"), children: jsxRuntimeExports.jsx(Check, { className: "w-3 h-3" }) }), jsxRuntimeExports.jsx("div", { className: cn("absolute inset-0 flex items-center justify-center transition-all duration-150 ease-out", copied ? "scale-0 opacity-0" : "scale-100 opacity-100"), children: jsxRuntimeExports.jsx(Copy, { className: "w-3 h-3" }) })] }) });
-}
-const WorkflowIcon = () => {
-  return jsxRuntimeExports.jsx("svg", { "data-testid": "geist-icon", height: "16", "stroke-linejoin": "round", style: { color: "currentColor" }, viewBox: "0 0 16 16", width: "16", children: jsxRuntimeExports.jsx("path", { d: "M5.75 7L6.4209 7.33594L4.85254 10.4717C5.38789 10.771 5.75 11.3431 5.75 12V14C5.75 14.9665 4.96648 15.75 4 15.75H2C1.03352 15.75 0.25 14.9665 0.25 14V12C0.25 11.0335 1.03352 10.25 2 10.25H3.28711L5.0791 6.66504L5.75 7ZM14 10.25C14.9665 10.25 15.75 11.0335 15.75 12V14C15.75 14.9665 14.9665 15.75 14 15.75H12C11.1185 15.75 10.3909 15.098 10.2695 14.25H7V12.75H10.25V12C10.25 11.0335 11.0335 10.25 12 10.25H14ZM2 11.75C1.86192 11.75 1.75 11.8619 1.75 12V14C1.75 14.1381 1.86192 14.25 2 14.25H4C4.13808 14.25 4.25 14.1381 4.25 14V12C4.25 11.8619 4.13808 11.75 4 11.75H2ZM12 11.75C11.8619 11.75 11.75 11.8619 11.75 12V14C11.75 14.1381 11.8619 14.25 12 14.25H14C14.1381 14.25 14.25 14.1381 14.25 14V12C14.25 11.8619 14.1381 11.75 14 11.75H12ZM9 0.25C9.96649 0.25 10.75 1.03351 10.75 2V4C10.75 4.44642 10.5808 4.85197 10.3057 5.16113L12.2041 8.6416L10.8877 9.36035L8.91895 5.75H7C6.03351 5.75 5.25 4.96649 5.25 4V2C5.25 1.03351 6.03351 0.25 7 0.25H9ZM7 1.75C6.86193 1.75 6.75 1.86193 6.75 2V4C6.75 4.13807 6.86193 4.25 7 4.25H9C9.13807 4.25 9.25 4.13807 9.25 4V2C9.25 1.86193 9.13807 1.75 9 1.75H7Z", fill: "currentColor" }) });
-};
-const WebhookIcon = () => {
-  return jsxRuntimeExports.jsx("svg", { "data-testid": "geist-icon", height: "16", "stroke-linejoin": "round", viewBox: "0 0 16 16", width: "16", style: { color: "currentColor" }, children: jsxRuntimeExports.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.8349 3.24994C5.14454 4.44567 5.55423 5.97464 6.74996 6.665L7.39465 7.03721L7.02726 7.68466L5.14599 11C5.21289 11.1531 5.25 11.3222 5.25 11.5C5.25 12.1904 4.69036 12.75 4 12.75C3.30964 12.75 2.75 12.1904 2.75 11.5C2.75 10.8634 3.22584 10.338 3.84123 10.26L5.38944 7.5316C3.95909 6.30274 3.55857 4.19264 4.53586 2.49994C5.64043 0.586765 8.08679 -0.0687357 9.99996 1.03583C11.836 2.09584 12.5137 4.39156 11.5892 6.26591L10.4949 4.33754C10.4418 3.53274 10.0009 2.76843 9.24996 2.33487C8.05423 1.64452 6.52525 2.0542 5.8349 3.24994ZM9.146 4.99996C9.21289 4.84686 9.25 4.67776 9.25 4.5C9.25 3.80964 8.69036 3.25 8 3.25C7.30964 3.25 6.75 3.80964 6.75 4.5C6.75 5.13659 7.22586 5.66203 7.84127 5.74002L9.72266 9.05556L10.0956 9.71274L10.75 9.33493C11.9457 8.64458 13.4747 9.05427 14.165 10.25C14.8554 11.4457 14.4457 12.9747 13.25 13.6651C12.5047 14.0953 11.63 14.0983 10.9096 13.75H8.69252C9.85895 15.4685 12.1727 16.0191 14 14.9641C15.9131 13.8595 16.5686 11.4132 15.4641 9.5C14.4886 7.81038 12.4665 7.10169 10.6895 7.71998L9.146 4.99996ZM13.25 11.5C13.25 12.1904 12.6904 12.75 12 12.75C11.591 12.75 11.228 12.5536 10.9999 12.25H7.9298C7.57875 14.1006 5.95279 15.5 4 15.5C1.79086 15.5 0 13.7091 0 11.5C0 9.40018 1.61801 7.67826 3.67529 7.51299L2.58098 9.44147C1.92792 9.89251 1.5 10.6463 1.5 11.5C1.5 12.8807 2.61929 14 4 14C5.38071 14 6.5 12.8807 6.5 11.5V10.75H7.25H10.9999C11.228 10.4464 11.591 10.25 12 10.25C12.6904 10.25 13.25 10.8096 13.25 11.5Z", fill: "currentColor" }) });
-};
-const SleepIcon = () => {
-  return jsxRuntimeExports.jsx("svg", { "data-testid": "geist-icon", height: "16", strokeLinejoin: "round", viewBox: "0 0 16 16", width: "16", style: { color: "currentColor" }, children: jsxRuntimeExports.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.25 1.25V2.03971C5.87928 2.18571 4.62678 2.72736 3.6089 3.54824L3.03033 2.96967L2.5 2.43934L1.43934 3.5L1.96967 4.03033L2.54824 4.6089C1.57979 5.80976 1 7.33717 1 9C1 12.866 4.13401 16 8 16C11.866 16 15 12.866 15 9C15 7.33717 14.4202 5.80976 13.4518 4.6089L14.0303 4.03033L14.5607 3.5L13.5 2.43934L12.9697 2.96967L12.3911 3.54824C11.3732 2.72736 10.1207 2.18571 8.75 2.03971V1.25H9.25H10V-0.25H9.25H8.75H7.25H6.75H6V1.25H6.75H7.25ZM2.5 9C2.5 5.96243 4.96243 3.5 8 3.5C11.0376 3.5 13.5 5.96243 13.5 9C13.5 12.0376 11.0376 14.5 8 14.5C4.96243 14.5 2.5 12.0376 2.5 9ZM8.75 6.75V6H7.25V6.75V9V9.75H8.75V9V6.75Z", fill: "currentColor" }) });
-};
-const StepForwardIcon = () => {
-  return jsxRuntimeExports.jsx("svg", { "data-testid": "geist-icon", height: "16", strokeLinejoin: "round", viewBox: "0 0 16 16", width: "16", style: { color: "currentColor" }, children: jsxRuntimeExports.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.21969 12.5303L4.75002 13.0607L5.81068 12L5.28035 11.4697L1.81068 7.99999L5.28035 4.53032L5.81068 3.99999L4.75002 2.93933L4.21969 3.46966L0.39647 7.29289C0.00594562 7.68341 0.00594562 8.31658 0.39647 8.7071L4.21969 12.5303ZM11.7804 12.5303L11.25 13.0607L10.1894 12L10.7197 11.4697L14.1894 7.99999L10.7197 4.53032L10.1894 3.99999L11.25 2.93933L11.7804 3.46966L15.6036 7.29289C15.9941 7.68341 15.9941 8.31658 15.6036 8.7071L11.7804 12.5303Z", fill: "currentColor" }) });
-};
-const ELLIPSIS = "...";
-const MIN_START = 3;
-const MIN_END = 3;
-const MIN_KEPT = MIN_START + MIN_END;
-const graphemeSegmenter = typeof Intl !== "undefined" && "Segmenter" in Intl ? new Intl.Segmenter(void 0, { granularity: "grapheme" }) : null;
-function toGraphemes(text) {
-  if (graphemeSegmenter) {
-    return [...graphemeSegmenter.segment(text)].map((s) => s.segment);
-  }
-  return Array.from(text);
+    wasExpandedRef.current = true;
+    await loadEventData();
+  }, [isLoading, loadEventData]);
+  reactExports.useLayoutEffect(() => {
+    if (!encryptionKey || !wasExpandedRef.current)
+      return;
+    loadedDataRef.current = null;
+    setLoadedData(null);
+    void loadEventData({ force: true });
+  }, [encryptionKey, loadEventData]);
+  const createdAt = new Date(event.createdAt);
+  const createdAtTime = createdAt.toLocaleTimeString(void 0, {
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric"
+  });
+  const displayPayload = isLoading ? loadedData : mergedDisplay;
+  return jsxRuntimeExports.jsxs(DetailCard, { variant: "card", summaryClassName: "px-3 py-2", summary: jsxRuntimeExports.jsxs("div", { className: "flex w-full items-center justify-between gap-3", children: [jsxRuntimeExports.jsx("span", { className: "text-gray-1000 text-label-12 font-mono", children: event.eventType }), jsxRuntimeExports.jsx("span", { className: "shrink-0 text-label-13 text-gray-900", children: createdAtTime })] }), onToggle: canHaveData ? (open) => {
+    if (open)
+      handleExpand();
+  } : void 0, children: [jsxRuntimeExports.jsxs("div", { className: "flex flex-col bg-background-200 [&:has(+_*)]:border-b [&:has(+_*)]:border-gray-alpha-400", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-2 py-2 px-3", children: [jsxRuntimeExports.jsx("span", { className: "text-label-12 text-gray-900", children: "Event ID" }), jsxRuntimeExports.jsx("span", { className: "max-w-[70%] truncate text-right text-label-12 font-mono", children: event.eventId })] }), event.correlationId && jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-2 py-2 px-3", children: [jsxRuntimeExports.jsx("span", { className: "text-label-12 text-gray-900", children: "Correlation ID" }), jsxRuntimeExports.jsx("span", { className: "max-w-[70%] truncate text-right text-label-12 font-mono", children: event.correlationId })] })] }), isLoading && jsxRuntimeExports.jsxs("div", { className: "p-3", children: [jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-[35%]" }), jsxRuntimeExports.jsx(Skeleton, { className: "mt-2 h-4 w-[90%]" }), jsxRuntimeExports.jsx(Skeleton, { className: "mt-2 h-4 w-[75%]" })] }), loadError && jsxRuntimeExports.jsx(ErrorCard, { title: "Failed to load event data", details: loadError, className: "mt-2" }), displayPayload != null && jsxRuntimeExports.jsx("div", { className: "[&>div]:border-none [&>div]:rounded-none", children: jsxRuntimeExports.jsx(EventDataBlock, { eventType: event.eventType, data: displayPayload }) })] });
 }
-function buildCandidate(graphemes, kept) {
-  if (kept <= 0) {
-    return {
-      prefixText: "",
-      prefixGraphemeCount: 0,
-      suffixText: "",
-      suffixGraphemeCount: 0,
-      text: ELLIPSIS,
-      truncated: true
-    };
+function hasOnlyExpiredFields(data, eventType) {
+  if (data === null || typeof data !== "object" || Array.isArray(data)) {
+    return false;
   }
-  const suffixGraphemeCount = kept >= MIN_KEPT ? Math.max(MIN_END, Math.floor(kept / 2)) : Math.floor(kept / 2);
-  const prefixGraphemeCount = kept - suffixGraphemeCount;
-  const prefixText = graphemes.slice(0, prefixGraphemeCount).join("");
-  const suffixText = suffixGraphemeCount > 0 ? graphemes.slice(-suffixGraphemeCount).join("") : "";
-  return {
-    prefixText,
-    prefixGraphemeCount,
-    suffixText,
-    suffixGraphemeCount,
-    text: prefixText + ELLIPSIS + suffixText,
-    truncated: true
-  };
+  const record = data;
+  const refKeys = EVENT_DATA_REF_FIELDS[eventType] ?? [];
+  const presentKeys = refKeys.filter((k) => k in record);
+  return presentKeys.length > 0 && presentKeys.every((k) => isExpiredMarker(record[k]));
 }
-function middleTruncate(graphemes, availableWidth, measure, fullWidth) {
-  const fullText = graphemes.join("");
-  const resolvedFullWidth = fullWidth ?? measure(fullText);
-  if (availableWidth <= 0 || graphemes.length === 0) {
-    return {
-      prefixText: fullText,
-      prefixGraphemeCount: graphemes.length,
-      suffixText: "",
-      suffixGraphemeCount: 0,
-      text: fullText,
-      truncated: false
-    };
+function EventDataBlock({ eventType, data }) {
+  if (isExpiredMarker(data) || hasOnlyExpiredFields(data, eventType)) {
+    return jsxRuntimeExports.jsx("div", { className: "flex items-center gap-1.5 rounded-md border px-3 py-2 text-xs", style: {
+      borderColor: "var(--ds-gray-300)",
+      backgroundColor: "var(--ds-gray-100)",
+      color: "var(--ds-gray-700)"
+    }, children: jsxRuntimeExports.jsx("span", { className: "font-medium", children: "Data expired" }) });
   }
-  if (resolvedFullWidth <= availableWidth) {
-    return {
-      prefixText: fullText,
-      prefixGraphemeCount: graphemes.length,
-      suffixText: "",
-      suffixGraphemeCount: 0,
-      text: fullText,
-      truncated: false
-    };
+  if (hasEncryptedFields({ eventType, eventData: data })) {
+    return jsxRuntimeExports.jsx(EncryptedDataBlock, {});
   }
-  let lo = 0;
-  let hi = graphemes.length - 1;
-  let best = -1;
-  while (lo <= hi) {
-    const mid = lo + hi >>> 1;
-    const candidate = buildCandidate(graphemes, mid);
-    if (measure(candidate.text) <= availableWidth) {
-      best = mid;
-      lo = mid + 1;
-    } else {
-      hi = mid - 1;
+  if (ERROR_EVENT_TYPES.has(eventType) && data != null && typeof data === "object") {
+    const record = data;
+    if (isStructuredErrorWithStack(record.error)) {
+      return jsxRuntimeExports.jsx(ErrorStackBlock, { value: record.error });
+    }
+    if (isStructuredErrorWithStack(record)) {
+      return jsxRuntimeExports.jsx(ErrorStackBlock, { value: record });
     }
   }
-  if (best === -1) {
-    return {
-      prefixText: "",
-      prefixGraphemeCount: 0,
-      suffixText: "",
-      suffixGraphemeCount: 0,
-      text: "",
-      truncated: true
-    };
-  }
-  return buildCandidate(graphemes, best);
+  return jsxRuntimeExports.jsx(CopyableDataBlock, { data });
 }
-function getMiddleTruncateCopyText({ prefixText, selectionEnd, selectionStart, suffixText, value }) {
-  const visibleText = prefixText + ELLIPSIS + suffixText;
-  if (selectionStart < 0 || selectionEnd > visibleText.length || selectionStart >= selectionEnd) {
-    return null;
-  }
-  if (selectionStart === 0 && selectionEnd === visibleText.length) {
-    return value;
-  }
-  const ellipsisStart = prefixText.length;
-  const ellipsisEnd = ellipsisStart + ELLIPSIS.length;
-  if (selectionStart > ellipsisStart || selectionEnd < ellipsisEnd) {
-    return null;
+function EventsList({ events, isLoading = false, error, onLoadEventData, encryptionKey }) {
+  const sortedEvents = reactExports.useMemo(() => [...events].sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()), [events]);
+  const hasEvents = sortedEvents.length > 0 && !error;
+  if (!hasEvents && !isLoading) {
+    return jsxRuntimeExports.jsx(DetailCard, { summary: "Events", disabled: true });
   }
-  const originalGraphemes = toGraphemes(value);
-  const selectedPrefixGraphemeCount = toGraphemes(visibleText.slice(0, selectionStart)).length;
-  const selectedSuffixGraphemeCount = toGraphemes(visibleText.slice(ellipsisEnd, selectionEnd)).length;
-  const suffixStart = originalGraphemes.length - toGraphemes(suffixText).length;
-  return originalGraphemes.slice(selectedPrefixGraphemeCount, suffixStart + selectedSuffixGraphemeCount).join("");
+  return jsxRuntimeExports.jsx(DetailCard, { summary: "Events", contentClassName: "mb-0", defaultOpen: true, children: isLoading ? jsxRuntimeExports.jsx("div", { className: "flex flex-col -mx-4", children: [0, 1, 2].map((i) => jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-3 bg-background-200 px-4 py-2", children: [jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-32 rounded" }), jsxRuntimeExports.jsx(Skeleton, { className: "h-3 w-16 rounded" })] }, i)) }) : jsxRuntimeExports.jsx("div", { className: "flex flex-col -mx-4", children: sortedEvents.map((event) => jsxRuntimeExports.jsx(EventItem, { event, onLoadEventData, encryptionKey }, event.eventId)) }) });
 }
-function getMiddleTruncateCopyTextFromSelectionText({ prefixText, selectionText, suffixText, value }) {
-  const visibleText = prefixText + ELLIPSIS + suffixText;
-  const trimmedSelectionText = selectionText.trim();
-  if (!trimmedSelectionText) {
-    return null;
-  }
-  const leading = selectionText.slice(0, selectionText.length - selectionText.trimStart().length);
-  const trailing = selectionText.slice(selectionText.trimEnd().length);
-  if (trimmedSelectionText === visibleText) {
-    return leading + value + trailing;
-  }
-  if (!trimmedSelectionText.includes(ELLIPSIS)) {
-    return null;
-  }
-  const selectionStart = visibleText.indexOf(trimmedSelectionText);
-  if (selectionStart === -1) {
-    return null;
-  }
-  const selectionEnd = selectionStart + trimmedSelectionText.length;
-  const mappedText = getMiddleTruncateCopyText({
-    prefixText,
-    selectionEnd,
-    selectionStart,
-    suffixText,
-    value
-  });
-  return mappedText === null ? null : leading + mappedText + trailing;
+function isStep(data) {
+  return data !== null && typeof data === "object" && "stepId" in data;
 }
-const useIsomorphicLayoutEffect = typeof window === "undefined" ? reactExports.useEffect : reactExports.useLayoutEffect;
-function createFullState(value, graphemes) {
-  return {
-    displayText: value,
-    isTruncated: false,
-    prefixGraphemeCount: graphemes.length,
-    prefixText: value,
-    suffixGraphemeCount: 0,
-    suffixText: ""
-  };
+function isWorkflowRun(data) {
+  return data !== null && typeof data === "object" && "runId" in data;
 }
-function useMiddleTruncate(value) {
-  const graphemes = reactExports.useMemo(() => toGraphemes(value), [value]);
-  const fullState = reactExports.useMemo(() => createFullState(value, graphemes), [graphemes, value]);
-  const ref = reactExports.useRef(null);
-  const measureRef = reactExports.useRef(null);
-  const [state, setState] = reactExports.useState(() => fullState);
-  const rafRef = reactExports.useRef(0);
-  const updateState = reactExports.useCallback((nextState) => {
-    setState((currentState) => {
-      if (currentState.displayText === nextState.displayText && currentState.isTruncated === nextState.isTruncated && currentState.prefixText === nextState.prefixText && currentState.prefixGraphemeCount === nextState.prefixGraphemeCount && currentState.suffixText === nextState.suffixText && currentState.suffixGraphemeCount === nextState.suffixGraphemeCount) {
-        return currentState;
-      }
-      return nextState;
-    });
-  }, []);
-  const recalculate = reactExports.useCallback(() => {
-    const el = ref.current;
-    const measureEl = measureRef.current;
-    if (!el || !measureEl)
-      return;
-    const available = el.clientWidth;
-    if (available <= 0) {
-      updateState(fullState);
-      return;
+function isHook(data) {
+  return data !== null && typeof data === "object" && "hookId" in data;
+}
+function EntityDetailPanel({ run, onStreamClick, onRunClick, spanDetailData, spanDetailError, spanDetailLoading, onSpanSelect, onWakeUpSleep, onLoadEventData, onResolveHook, encryptionKey, onDecrypt, isDecrypting = false, selectedSpan }) {
+  const toast2 = useToast();
+  const [stoppingSleep, setStoppingSleep] = reactExports.useState(false);
+  const [showResolveHookModal, setShowResolveHookModal] = reactExports.useState(false);
+  const [resolvingHook, setResolvingHook] = reactExports.useState(false);
+  const [resolvedHookIds, setResolvedHookIds] = reactExports.useState(/* @__PURE__ */ new Set());
+  const sidebar = useSidebarDataOptional();
+  const hasEncryptedData = Boolean((sidebar == null ? void 0 : sidebar.hasEncryptedData) && !encryptionKey);
+  const data = selectedSpan == null ? void 0 : selectedSpan.data;
+  const rawEvents = selectedSpan == null ? void 0 : selectedSpan.rawEvents;
+  const rawEventsLength = (rawEvents == null ? void 0 : rawEvents.length) ?? 0;
+  const { resource, resourceId, runId } = reactExports.useMemo(() => {
+    if (!selectedSpan) {
+      return { resource: void 0, resourceId: void 0, runId: void 0 };
+    }
+    const res = selectedSpan.resource;
+    if (res === "step" && isStep(data)) {
+      return { resource: "step", resourceId: data.stepId, runId: data.runId };
+    }
+    if (res === "run" && isWorkflowRun(data)) {
+      return { resource: "run", resourceId: data.runId, runId: void 0 };
+    }
+    if (res === "hook" && isHook(data)) {
+      return { resource: "hook", resourceId: data.hookId, runId: void 0 };
+    }
+    if (res === "sleep") {
+      const waitData = data;
+      return {
+        resource: "sleep",
+        resourceId: selectedSpan.spanId,
+        runId: waitData == null ? void 0 : waitData.runId
+      };
+    }
+    return { resource: void 0, resourceId: void 0, runId: void 0 };
+  }, [selectedSpan, data]);
+  const onSpanSelectRef = reactExports.useRef(onSpanSelect);
+  onSpanSelectRef.current = onSpanSelect;
+  reactExports.useEffect(() => {
+    if (resource && resourceId && ["run", "step", "hook", "sleep"].includes(resource)) {
+      onSpanSelectRef.current({
+        resource,
+        resourceId,
+        runId
+      });
+    }
+  }, [resource, resourceId, runId]);
+  const canWakeUp = reactExports.useMemo(() => {
+    if (resource !== "sleep" || !rawEvents)
+      return false;
+    const terminalStates = ["completed", "failed", "cancelled"];
+    if (terminalStates.includes(run.status))
+      return false;
+    const hasWaitCreated = rawEvents.some((e) => e.eventType === "wait_created");
+    if (!hasWaitCreated)
+      return false;
+    const hasWaitCompleted = rawEvents.some((e) => e.eventType === "wait_completed");
+    return !hasWaitCompleted;
+  }, [resource, rawEvents, rawEventsLength, run.status]);
+  const canResolveHook = reactExports.useMemo(() => {
+    if (resource !== "hook" || !rawEvents || !resourceId)
+      return false;
+    if (resolvedHookIds.has(resourceId))
+      return false;
+    const terminalStates = ["completed", "failed", "cancelled"];
+    if (terminalStates.includes(run.status))
+      return false;
+    const hasHookDisposed = rawEvents.some((e) => e.eventType === "hook_disposed");
+    if (hasHookDisposed)
+      return false;
+    return true;
+  }, [
+    resource,
+    resourceId,
+    rawEvents,
+    rawEventsLength,
+    run.status,
+    resolvedHookIds
+  ]);
+  const error = spanDetailError ?? void 0;
+  const loading = spanDetailLoading ?? false;
+  const hookToken = reactExports.useMemo(() => {
+    if (resource !== "hook" || !resourceId)
+      return void 0;
+    if (isHook(spanDetailData) && spanDetailData.token) {
+      return spanDetailData.token;
     }
-    const measure = (text) => {
-      measureEl.textContent = text;
-      return measureEl.scrollWidth;
-    };
-    const fullWidth = measure(value);
-    if (fullWidth <= available) {
-      updateState(fullState);
-      return;
+    if (isHook(data) && data.token) {
+      return data.token;
     }
-    const result = middleTruncate(graphemes, available, measure, fullWidth);
-    updateState({
-      displayText: result.text,
-      isTruncated: result.truncated,
-      prefixGraphemeCount: result.prefixGraphemeCount,
-      prefixText: result.prefixText,
-      suffixGraphemeCount: result.suffixGraphemeCount,
-      suffixText: result.suffixText
-    });
-  }, [fullState, graphemes, updateState, value]);
-  useIsomorphicLayoutEffect(() => {
-    recalculate();
-  }, [recalculate]);
+    return void 0;
+  }, [resource, resourceId, spanDetailData, data]);
   reactExports.useEffect(() => {
-    var _a;
-    const el = ref.current;
-    if (!el)
+    if (error && selectedSpan && resource) {
+      toast2.error(`Failed to load ${resource} details`, {
+        description: error.message
+      });
+    }
+  }, [error, resource, selectedSpan]);
+  const handleWakeUp = async () => {
+    if (stoppingSleep || !resourceId)
       return;
-    const debouncedRecalc = () => {
-      cancelAnimationFrame(rafRef.current);
-      rafRef.current = requestAnimationFrame(recalculate);
-    };
-    const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(debouncedRecalc) : null;
-    ro == null ? void 0 : ro.observe(el);
-    window.addEventListener("resize", debouncedRecalc);
-    const onFontsLoaded = () => {
-      debouncedRecalc();
-    };
-    const fontSet = "fonts" in document ? document.fonts : null;
-    (_a = fontSet == null ? void 0 : fontSet.addEventListener) == null ? void 0 : _a.call(fontSet, "loadingdone", onFontsLoaded);
-    return () => {
-      var _a2;
-      ro == null ? void 0 : ro.disconnect();
-      window.removeEventListener("resize", debouncedRecalc);
-      cancelAnimationFrame(rafRef.current);
-      (_a2 = fontSet == null ? void 0 : fontSet.removeEventListener) == null ? void 0 : _a2.call(fontSet, "loadingdone", onFontsLoaded);
-    };
-  }, [recalculate]);
-  return {
-    ref,
-    measureRef,
-    displayText: state.displayText,
-    isTruncated: state.isTruncated,
-    prefixGraphemeCount: state.prefixGraphemeCount,
-    prefixText: state.prefixText,
-    suffixGraphemeCount: state.suffixGraphemeCount,
-    suffixText: state.suffixText
-  };
-}
-function getRangeOffsets(container, range) {
-  if (!container.contains(range.startContainer) || !container.contains(range.endContainer)) {
-    return null;
-  }
-  const startRange = document.createRange();
-  startRange.selectNodeContents(container);
-  startRange.setEnd(range.startContainer, range.startOffset);
-  const endRange = document.createRange();
-  endRange.selectNodeContents(container);
-  endRange.setEnd(range.endContainer, range.endOffset);
-  return {
-    end: endRange.toString().length,
-    start: startRange.toString().length
+    if (!onWakeUpSleep) {
+      toast2.error("Unable to wake up sleep", {
+        description: "No wake-up handler provided."
+      });
+      return;
+    }
+    try {
+      setStoppingSleep(true);
+      const result = await onWakeUpSleep(run.runId, resourceId);
+      if (result.stoppedCount > 0) {
+        toast2.success("Run woken up", {
+          description: "The sleep call has been interrupted and the run woken up."
+        });
+      } else {
+        toast2.info("Sleep already completed", {
+          description: "This sleep call has already finished."
+        });
+      }
+    } catch (err) {
+      console.error("Failed to wake up run:", err);
+      toast2.error("Failed to wake up run", {
+        description: err instanceof Error ? err.message : "An unknown error occurred"
+      });
+    } finally {
+      setStoppingSleep(false);
+    }
   };
-}
-function MiddleTruncate({ value, className, onCopy: onCopyProp, ...props }) {
-  const { ref, measureRef, displayText, isTruncated, prefixText, suffixText } = useMiddleTruncate(value);
-  const visibleRef = reactExports.useRef(null);
-  const handleCopy = reactExports.useCallback((e) => {
-    onCopyProp == null ? void 0 : onCopyProp(e);
-    if (e.defaultPrevented || !isTruncated)
+  const handleResolveHook = reactExports.useCallback(async (payload) => {
+    if (resolvingHook)
       return;
-    const selection = window.getSelection();
-    if (!selection || selection.rangeCount === 0)
+    if (!onResolveHook) {
+      toast2.error("Unable to resolve hook", {
+        description: "No resolve handler provided."
+      });
       return;
-    const selectionText = selection.toString();
-    if (!selectionText)
+    }
+    if (!hookToken) {
+      toast2.error("Unable to resolve hook", {
+        description: "Missing hook token. Try refreshing the run data and retry."
+      });
       return;
-    const range = selection.getRangeAt(0);
-    const visibleEl = visibleRef.current;
-    let copyText = null;
-    if (e.currentTarget.contains(range.startContainer) && e.currentTarget.contains(range.endContainer) && visibleEl) {
-      const offsets = getRangeOffsets(visibleEl, range);
-      if (offsets) {
-        copyText = getMiddleTruncateCopyText({
-          prefixText,
-          selectionEnd: offsets.end,
-          selectionStart: offsets.start,
-          suffixText,
-          value
-        });
+    }
+    try {
+      setResolvingHook(true);
+      const candidate = spanDetailData ?? data;
+      const hook = isHook(candidate) ? candidate : void 0;
+      await onResolveHook(hookToken, payload, hook);
+      toast2.success("Hook resolved", {
+        description: "The payload has been sent and the hook resolved."
+      });
+      setShowResolveHookModal(false);
+      if (resourceId) {
+        setResolvedHookIds((prev) => new Set(prev).add(resourceId));
       }
+    } catch (err) {
+      console.error("Failed to resolve hook:", err);
+      toast2.error("Failed to resolve hook", {
+        description: err instanceof Error ? err.message : "An unknown error occurred"
+      });
+    } finally {
+      setResolvingHook(false);
     }
-    copyText ?? (copyText = getMiddleTruncateCopyTextFromSelectionText({
-      prefixText,
-      selectionText,
-      suffixText,
-      value
-    }));
-    if (copyText === null)
-      return;
-    e.preventDefault();
-    e.clipboardData.setData("text/plain", copyText);
-  }, [onCopyProp, isTruncated, prefixText, suffixText, value]);
-  return jsxRuntimeExports.jsxs("span", { title: isTruncated ? value : void 0, ...props, ref, className: cn("relative inline-grid min-w-0 max-w-full overflow-hidden whitespace-nowrap", className), onCopy: handleCopy, children: [isTruncated && jsxRuntimeExports.jsx("span", { className: "sr-only select-none", children: value }), jsxRuntimeExports.jsx("span", { "aria-hidden": "true", className: "pointer-events-none col-start-1 row-start-1 invisible select-none whitespace-nowrap", children: value }), jsxRuntimeExports.jsx("span", { "aria-hidden": isTruncated || void 0, className: "col-start-1 row-start-1 min-w-0 overflow-hidden", ref: visibleRef, children: isTruncated ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("span", { children: prefixText }), jsxRuntimeExports.jsx("span", { children: ELLIPSIS }), jsxRuntimeExports.jsx("span", { children: suffixText })] }) : displayText }), jsxRuntimeExports.jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute left-0 top-0 inline-block invisible select-none whitespace-nowrap", ref: measureRef })] });
+  }, [onResolveHook, hookToken, resolvingHook, spanDetailData, data]);
+  const displayData = spanDetailData ?? data;
+  const moduleSpecifier = reactExports.useMemo(() => {
+    const displayRecord = displayData;
+    const displayStepName = displayRecord.stepName;
+    const displayWorkflowName = displayRecord.workflowName;
+    if (typeof displayStepName === "string") {
+      return displayStepName;
+    }
+    if (typeof displayWorkflowName === "string") {
+      return displayWorkflowName;
+    }
+    if (typeof run.workflowName === "string") {
+      return run.workflowName;
+    }
+    return void 0;
+  }, [displayData, run.workflowName]);
+  if (!selectedSpan || !resource || !resourceId) {
+    return null;
+  }
+  const hasPendingActions = resource === "sleep" && canWakeUp || resource === "hook" && canResolveHook;
+  return jsxRuntimeExports.jsxs("div", { className: "flex h-full flex-col", children: [jsxRuntimeExports.jsx(DecryptClickContext.Provider, { value: onDecrypt ? { onDecrypt, isDecrypting, hasEncryptedData } : void 0, children: jsxRuntimeExports.jsxs("div", { className: "flex-1 overflow-y-auto px-4 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: {
+    background: "var(--ds-amber-200)",
+    color: "var(--ds-amber-900)"
+  }, children: [jsxRuntimeExports.jsx(Zap, { className: "h-4 w-4" }), stoppingSleep ? "Waking up..." : "Wake Up Sleep"] }), resource === "hook" && canResolveHook && jsxRuntimeExports.jsxs("button", { type: "button", onClick: () => setShowResolveHookModal(true), disabled: resolvingHook, 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", resolvingHook ? "opacity-50 cursor-not-allowed" : "cursor-pointer"), style: {
+    background: "var(--ds-gray-1000)",
+    color: "var(--ds-background-100)"
+  }, children: [jsxRuntimeExports.jsx(Send, { className: "h-4 w-4" }), "Resolve Hook"] })] })] }), jsxRuntimeExports.jsx(AttributePanel, { data: displayData, moduleSpecifier, expiredAt: run.expiredAt, isLoading: loading, error: error ?? void 0, onStreamClick, onRunClick, onDecrypt, isDecrypting, resource }), resource !== "run" && rawEvents && jsxRuntimeExports.jsx(EventsList, { events: rawEvents, onLoadEventData, encryptionKey })] }) }), jsxRuntimeExports.jsx(ResolveHookModal, { isOpen: showResolveHookModal, onClose: () => setShowResolveHookModal(false), onSubmit: handleResolveHook, isSubmitting: resolvingHook })] });
 }
+const QUERY = "(prefers-reduced-motion: reduce)";
+const useReducedMotion = () => {
+  const [reduced, setReduced] = reactExports.useState(() => {
+    if (typeof window === "undefined" || !window.matchMedia)
+      return false;
+    return window.matchMedia(QUERY).matches;
+  });
+  reactExports.useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia)
+      return;
+    const media = window.matchMedia(QUERY);
+    const onChange = () => setReduced(media.matches);
+    media.addEventListener("change", onChange);
+    onChange();
+    return () => media.removeEventListener("change", onChange);
+  }, []);
+  return reduced;
+};
+const WorkflowIcon = () => {
+  return jsxRuntimeExports.jsx("svg", { "data-testid": "geist-icon", height: "16", "stroke-linejoin": "round", style: { color: "currentColor" }, viewBox: "0 0 16 16", width: "16", children: jsxRuntimeExports.jsx("path", { d: "M5.75 7L6.4209 7.33594L4.85254 10.4717C5.38789 10.771 5.75 11.3431 5.75 12V14C5.75 14.9665 4.96648 15.75 4 15.75H2C1.03352 15.75 0.25 14.9665 0.25 14V12C0.25 11.0335 1.03352 10.25 2 10.25H3.28711L5.0791 6.66504L5.75 7ZM14 10.25C14.9665 10.25 15.75 11.0335 15.75 12V14C15.75 14.9665 14.9665 15.75 14 15.75H12C11.1185 15.75 10.3909 15.098 10.2695 14.25H7V12.75H10.25V12C10.25 11.0335 11.0335 10.25 12 10.25H14ZM2 11.75C1.86192 11.75 1.75 11.8619 1.75 12V14C1.75 14.1381 1.86192 14.25 2 14.25H4C4.13808 14.25 4.25 14.1381 4.25 14V12C4.25 11.8619 4.13808 11.75 4 11.75H2ZM12 11.75C11.8619 11.75 11.75 11.8619 11.75 12V14C11.75 14.1381 11.8619 14.25 12 14.25H14C14.1381 14.25 14.25 14.1381 14.25 14V12C14.25 11.8619 14.1381 11.75 14 11.75H12ZM9 0.25C9.96649 0.25 10.75 1.03351 10.75 2V4C10.75 4.44642 10.5808 4.85197 10.3057 5.16113L12.2041 8.6416L10.8877 9.36035L8.91895 5.75H7C6.03351 5.75 5.25 4.96649 5.25 4V2C5.25 1.03351 6.03351 0.25 7 0.25H9ZM7 1.75C6.86193 1.75 6.75 1.86193 6.75 2V4C6.75 4.13807 6.86193 4.25 7 4.25H9C9.13807 4.25 9.25 4.13807 9.25 4V2C9.25 1.86193 9.13807 1.75 9 1.75H7Z", fill: "currentColor" }) });
+};
+const WebhookIcon = () => {
+  return jsxRuntimeExports.jsx("svg", { "data-testid": "geist-icon", height: "16", "stroke-linejoin": "round", viewBox: "0 0 16 16", width: "16", style: { color: "currentColor" }, children: jsxRuntimeExports.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.8349 3.24994C5.14454 4.44567 5.55423 5.97464 6.74996 6.665L7.39465 7.03721L7.02726 7.68466L5.14599 11C5.21289 11.1531 5.25 11.3222 5.25 11.5C5.25 12.1904 4.69036 12.75 4 12.75C3.30964 12.75 2.75 12.1904 2.75 11.5C2.75 10.8634 3.22584 10.338 3.84123 10.26L5.38944 7.5316C3.95909 6.30274 3.55857 4.19264 4.53586 2.49994C5.64043 0.586765 8.08679 -0.0687357 9.99996 1.03583C11.836 2.09584 12.5137 4.39156 11.5892 6.26591L10.4949 4.33754C10.4418 3.53274 10.0009 2.76843 9.24996 2.33487C8.05423 1.64452 6.52525 2.0542 5.8349 3.24994ZM9.146 4.99996C9.21289 4.84686 9.25 4.67776 9.25 4.5C9.25 3.80964 8.69036 3.25 8 3.25C7.30964 3.25 6.75 3.80964 6.75 4.5C6.75 5.13659 7.22586 5.66203 7.84127 5.74002L9.72266 9.05556L10.0956 9.71274L10.75 9.33493C11.9457 8.64458 13.4747 9.05427 14.165 10.25C14.8554 11.4457 14.4457 12.9747 13.25 13.6651C12.5047 14.0953 11.63 14.0983 10.9096 13.75H8.69252C9.85895 15.4685 12.1727 16.0191 14 14.9641C15.9131 13.8595 16.5686 11.4132 15.4641 9.5C14.4886 7.81038 12.4665 7.10169 10.6895 7.71998L9.146 4.99996ZM13.25 11.5C13.25 12.1904 12.6904 12.75 12 12.75C11.591 12.75 11.228 12.5536 10.9999 12.25H7.9298C7.57875 14.1006 5.95279 15.5 4 15.5C1.79086 15.5 0 13.7091 0 11.5C0 9.40018 1.61801 7.67826 3.67529 7.51299L2.58098 9.44147C1.92792 9.89251 1.5 10.6463 1.5 11.5C1.5 12.8807 2.61929 14 4 14C5.38071 14 6.5 12.8807 6.5 11.5V10.75H7.25H10.9999C11.228 10.4464 11.591 10.25 12 10.25C12.6904 10.25 13.25 10.8096 13.25 11.5Z", fill: "currentColor" }) });
+};
+const SleepIcon = () => {
+  return jsxRuntimeExports.jsx("svg", { "data-testid": "geist-icon", height: "16", strokeLinejoin: "round", viewBox: "0 0 16 16", width: "16", style: { color: "currentColor" }, children: jsxRuntimeExports.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.25 1.25V2.03971C5.87928 2.18571 4.62678 2.72736 3.6089 3.54824L3.03033 2.96967L2.5 2.43934L1.43934 3.5L1.96967 4.03033L2.54824 4.6089C1.57979 5.80976 1 7.33717 1 9C1 12.866 4.13401 16 8 16C11.866 16 15 12.866 15 9C15 7.33717 14.4202 5.80976 13.4518 4.6089L14.0303 4.03033L14.5607 3.5L13.5 2.43934L12.9697 2.96967L12.3911 3.54824C11.3732 2.72736 10.1207 2.18571 8.75 2.03971V1.25H9.25H10V-0.25H9.25H8.75H7.25H6.75H6V1.25H6.75H7.25ZM2.5 9C2.5 5.96243 4.96243 3.5 8 3.5C11.0376 3.5 13.5 5.96243 13.5 9C13.5 12.0376 11.0376 14.5 8 14.5C4.96243 14.5 2.5 12.0376 2.5 9ZM8.75 6.75V6H7.25V6.75V9V9.75H8.75V9V6.75Z", fill: "currentColor" }) });
+};
+const StepForwardIcon = () => {
+  return jsxRuntimeExports.jsx("svg", { "data-testid": "geist-icon", height: "16", strokeLinejoin: "round", viewBox: "0 0 16 16", width: "16", style: { color: "currentColor" }, children: jsxRuntimeExports.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.21969 12.5303L4.75002 13.0607L5.81068 12L5.28035 11.4697L1.81068 7.99999L5.28035 4.53032L5.81068 3.99999L4.75002 2.93933L4.21969 3.46966L0.39647 7.29289C0.00594562 7.68341 0.00594562 8.31658 0.39647 8.7071L4.21969 12.5303ZM11.7804 12.5303L11.25 13.0607L10.1894 12L10.7197 11.4697L14.1894 7.99999L10.7197 4.53032L10.1894 3.99999L11.25 2.93933L11.7804 3.46966L15.6036 7.29289C15.9941 7.68341 15.9941 8.31658 15.6036 8.7071L11.7804 12.5303Z", fill: "currentColor" }) });
+};
 const eventStyles = {
   run: { icon: WorkflowIcon, className: "text-blue-900" },
   step: { icon: StepForwardIcon, className: "text-green-900" },
@@ -2611,7 +2639,7 @@ const EventRow = ({ span, isSelected, onSelectSpan }) => {
   const durationMs = getSpanDurationMs(span);
   const isErrored = span.attributes.data.status === "failed";
   const { icon: Icon, className: tagClassName } = getEventStyle(span.resource, isErrored);
-  return jsxRuntimeExports.jsx("li", { className: cn("relative overflow-clip group after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-gray-alpha-400", ROW_HEIGHT_CLASS), role: "treeitem", "aria-selected": isSelected, "aria-expanded": isSelected, "aria-level": 1, onClick: () => onSelectSpan(span.spanId), children: jsxRuntimeExports.jsx("div", { className: "h-full hover:bg-gray-100 group-aria-selected:bg-gray-100 group-aria-selected:hover:bg-gray-200", children: jsxRuntimeExports.jsxs("div", { className: "flex h-full min-w-0 items-center px-2", children: [jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [jsxRuntimeExports.jsx("span", { className: cn("shrink-0", tagClassName), children: jsxRuntimeExports.jsx(Icon, { className: "w-4 h-4" }) }), jsxRuntimeExports.jsx("span", { className: "min-w-0 text-label-14", children: jsxRuntimeExports.jsx(MiddleTruncate, { value: span.name }) })] }), jsxRuntimeExports.jsx("div", { className: "ml-2 shrink-0", children: jsxRuntimeExports.jsx("span", { className: "text-label-14 text-gray-900 tabular-nums", children: formatDuration(durationMs) }) })] }) }) });
+  return jsxRuntimeExports.jsx("li", { className: cn("relative overflow-clip group after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-gray-alpha-400", ROW_HEIGHT_CLASS), role: "treeitem", "aria-selected": isSelected, "aria-expanded": isSelected, "aria-level": 1, onClick: () => onSelectSpan(span.spanId), children: jsxRuntimeExports.jsx("div", { className: "h-full hover:bg-gray-100 group-aria-selected:bg-gray-100 group-aria-selected:hover:bg-gray-200", children: jsxRuntimeExports.jsxs("div", { className: "flex h-full min-w-0 items-center pl-4 pr-2", children: [jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [jsxRuntimeExports.jsx("span", { className: cn("shrink-0", tagClassName), children: jsxRuntimeExports.jsx(Icon, { className: "w-4 h-4" }) }), jsxRuntimeExports.jsx("span", { className: "min-w-0 text-label-14", children: jsxRuntimeExports.jsx(MiddleTruncate, { value: span.name }) })] }), jsxRuntimeExports.jsx("div", { className: "ml-2 shrink-0", children: jsxRuntimeExports.jsx("span", { className: "text-label-14 text-gray-900 tabular-nums", children: formatDuration(durationMs) }) })] }) }) });
 };
 const EventList = ({ spans, activeSpanId, onSelectSpan }) => {
   return jsxRuntimeExports.jsx("ul", { id: "event-list", role: "tree", className: "block min-h-0 overflow-visible", children: spans.map((span) => {
@@ -2713,7 +2741,7 @@ function DetailPanel({ span, rootStart, onClose }) {
   const startMs = getHighResInMs(span.startTime);
   const durationMs = getSpanDurationMs(span);
   const offsetMs = startMs - rootStart;
-  return jsxRuntimeExports.jsxs("aside", { className: "grid h-full max-h-full grid-rows-[2.5rem_1fr] bg-background-200", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between px-3 border-b border-gray-alpha-400", children: [jsxRuntimeExports.jsx("span", { className: "text-sm font-medium text-gray-1000 truncate", children: span.name }), jsxRuntimeExports.jsx("button", { type: "button", className: "p-1 rounded-md text-gray-900 hover:text-gray-1000 hover:bg-gray-alpha-200 transition-colors", onClick: onClose, children: jsxRuntimeExports.jsx(X, { className: "w-4 h-4" }) })] }), jsxRuntimeExports.jsx("div", { className: "overflow-y-auto p-3 space-y-3", children: jsxRuntimeExports.jsxs("dl", { className: "grid grid-cols-[auto_1fr] gap-x-3 gap-y-1.5 text-sm", children: [jsxRuntimeExports.jsx("dt", { className: "text-gray-900", children: "Resource" }), jsxRuntimeExports.jsx("dd", { className: "text-gray-1000 font-mono", children: span.resource }), jsxRuntimeExports.jsx("dt", { className: "text-gray-900", children: "Duration" }), jsxRuntimeExports.jsx("dd", { className: "text-gray-1000 tabular-nums font-mono", children: formatDuration(durationMs) }), jsxRuntimeExports.jsx("dt", { className: "text-gray-900", children: "Offset" }), jsxRuntimeExports.jsxs("dd", { className: "text-gray-1000 tabular-nums font-mono", children: ["+", formatDuration(offsetMs)] }), jsxRuntimeExports.jsx("dt", { className: "text-gray-900", children: "Status" }), jsxRuntimeExports.jsx("dd", { className: "text-gray-1000 font-mono", children: span.status.code === 2 ? "Error" : "OK" })] }) })] });
+  return jsxRuntimeExports.jsxs("aside", { className: "grid h-full max-h-full grid-rows-[2.5rem_1fr] bg-background-200", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between px-3 border-b border-gray-alpha-400", children: [jsxRuntimeExports.jsx("span", { className: "text-sm font-medium text-gray-1000 truncate", children: span.name }), jsxRuntimeExports.jsx("button", { type: "button", className: "p-1 rounded-md text-gray-1000 hover:bg-gray-alpha-100 transition-colors", onClick: onClose, children: jsxRuntimeExports.jsx(X, { className: "w-4 h-4" }) })] }), jsxRuntimeExports.jsx("div", { className: "overflow-y-auto p-3 space-y-3", children: jsxRuntimeExports.jsxs("dl", { className: "grid grid-cols-[auto_1fr] gap-x-3 gap-y-1.5 text-sm", children: [jsxRuntimeExports.jsx("dt", { className: "text-gray-900", children: "Resource" }), jsxRuntimeExports.jsx("dd", { className: "text-gray-1000 font-mono", children: span.resource }), jsxRuntimeExports.jsx("dt", { className: "text-gray-900", children: "Duration" }), jsxRuntimeExports.jsx("dd", { className: "text-gray-1000 tabular-nums font-mono", children: formatDuration(durationMs) }), jsxRuntimeExports.jsx("dt", { className: "text-gray-900", children: "Offset" }), jsxRuntimeExports.jsxs("dd", { className: "text-gray-1000 tabular-nums font-mono", children: ["+", formatDuration(offsetMs)] }), jsxRuntimeExports.jsx("dt", { className: "text-gray-900", children: "Status" }), jsxRuntimeExports.jsx("dd", { className: "text-gray-1000 font-mono", children: span.status.code === 2 ? "Error" : "OK" })] }) })] });
 }
 const MIN_VIEWPORT_MS = 1e-3;
 function useAnimatedViewport(initial) {
@@ -2899,13 +2927,25 @@ function NewTraceViewerContent({ trace }) {
   ]);
   const [altHeld, setAltHeld] = reactExports.useState(false);
   reactExports.useEffect(() => {
+    const handleSidebarNavKey = (e) => {
+      const target = e.target;
+      if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || (target == null ? void 0 : target.isContentEditable)) {
+        return;
+      }
+      const targetId = e.key === "k" ? prevSpanIdRef.current : nextSpanIdRef.current;
+      if (targetId) {
+        e.preventDefault();
+        handleSelectSpanRef.current(targetId);
+      }
+    };
     const onKeyDown = (e) => {
       if (e.key === "Escape") {
         clearActiveSpan();
-      }
-      if (e.key === "Alt") {
+      } else if (e.key === "Alt") {
         e.preventDefault();
         setAltHeld(true);
+      } else if (e.key === "j" || e.key === "k") {
+        handleSidebarNavKey(e);
       }
     };
     const onKeyUp = (e) => {
@@ -3022,17 +3062,33 @@ function NewTraceViewerContent({ trace }) {
     const workflowName = data.workflowName;
     return (stepName ? (_a = parseStepName(stepName)) == null ? void 0 : _a.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, selectedSpan == null ? void 0 : selectedSpan.resource]);
-  const selectedResource = selectedSpan == null ? void 0 : selectedSpan.resource;
-  const selectedResourceId = reactExports.useMemo(() => {
-    if (!(selectedSpan == null ? void 0 : selectedSpan.data))
-      return void 0;
-    const data = selectedSpan.data;
-    if (selectedSpan.resource === "hook") {
-      return data.hookId ?? selectedSpan.spanId;
-    }
-    return data.stepId ?? data.runId ?? data.hookId ?? selectedSpan.spanId;
-  }, [selectedSpan == null ? void 0 : selectedSpan.data, selectedSpan == null ? void 0 : selectedSpan.resource, selectedSpan == null ? void 0 : selectedSpan.spanId]);
-  return jsxRuntimeExports.jsxs("div", { "data-pane": "pane-root", "data-has-detail": activeSpan ? "" : void 0, className: "grid w-full h-full max-h-full grid-cols-[minmax(100px,1fr)] data-[has-detail]:grid-cols-[minmax(100px,1fr)_clamp(280px,420px,100%)]", children: [jsxRuntimeExports.jsxs("div", { id: "trace-parent", className: "grid grid-rows-[1fr] h-full min-h-0 overflow-hidden relative bg-background-100", children: [jsxRuntimeExports.jsxs(SplitPane, { startHeader: jsxRuntimeExports.jsxs("div", { className: "bg-background-100 border-b border-gray-alpha-400 h-10 min-h-10 flex items-center px-2 gap-1.5", children: [jsxRuntimeExports.jsx(Search, { className: "w-3.5 h-3.5 shrink-0 text-gray-800" }), jsxRuntimeExports.jsx("input", { id: "trace-viewer-search", name: "trace-viewer-search", type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: "Search spans...", "aria-label": "Search spans", className: "flex-1 min-w-0 bg-transparent text-sm text-gray-1000 placeholder:text-gray-800 outline-none" }), searchQuery && jsxRuntimeExports.jsx("button", { type: "button", onClick: () => setSearchQuery(""), className: "shrink-0 p-0.5 rounded-sm text-gray-800 hover:text-gray-1000 hover:bg-gray-200 transition-colors", children: jsxRuntimeExports.jsx(X, { className: "w-3 h-3" }) })] }), endHeader: jsxRuntimeExports.jsx(TimelineHeader, { markers: timeMarkers, hoverInfo }), children: [jsxRuntimeExports.jsx("div", { className: "block overflow-visible", children: jsxRuntimeExports.jsx(EventList, { spans: filteredSpans, activeSpanId, onSelectSpan: handleSelectSpan }) }), jsxRuntimeExports.jsx("div", { ref: timelineRef, className: "block min-h-0 overflow-visible relative", onDoubleClick: resetZoom, onMouseMove: handleTimelineMouseMove, onMouseLeave: handleTimelineMouseLeave, children: jsxRuntimeExports.jsx(Timeline, { spans: filteredSpans, viewStart: viewport.start, viewEnd: viewport.end, markers: timeMarkers, selectedId: activeSpanId, onSelect: handleSelectSpan, hoverFraction, altHeld }) })] }), jsxRuntimeExports.jsxs("div", { className: "absolute right-3 bottom-3 z-[5] flex items-center border border-gray-alpha-400 rounded-lg bg-background-100 shadow-sm overflow-hidden divide-x divide-gray-alpha-400", children: [jsxRuntimeExports.jsx("button", { type: "button", className: "flex items-center justify-center w-8 h-8 text-gray-900 cursor-pointer transition-colors duration-[time:120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100", onClick: zoomOut, "aria-label": "Zoom out", children: jsxRuntimeExports.jsx(ZoomOut, { className: "w-4 h-4" }) }), jsxRuntimeExports.jsx("button", { type: "button", className: "flex items-center justify-center w-8 h-8 text-gray-900 cursor-pointer transition-colors duration-[time:120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100", onClick: resetZoom, "aria-label": "Reset zoom", children: jsxRuntimeExports.jsx(RotateCcw, { className: "w-3.5 h-3.5" }) }), jsxRuntimeExports.jsx("button", { type: "button", className: "flex items-center justify-center w-8 h-8 text-gray-900 cursor-pointer transition-colors duration-[time:120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100", onClick: zoomIn, "aria-label": "Zoom in", children: jsxRuntimeExports.jsx(ZoomIn, { className: "w-4 h-4" }) })] })] }), activeSpan && sidebar ? jsxRuntimeExports.jsxs("aside", { className: "flex flex-col h-full max-h-full bg-background-100 border-l border-gray-alpha-400 overflow-auto", children: [jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 px-4 pt-4 pb-3", children: jsxRuntimeExports.jsxs("div", { className: "flex items-start justify-between gap-2", children: [jsxRuntimeExports.jsxs("div", { className: "min-w-0 flex-1", children: [jsxRuntimeExports.jsx("span", { className: "text-[15px] font-semibold text-gray-1000 truncate block", children: selectedSpanName }), selectedResourceId && jsxRuntimeExports.jsxs("div", { className: "mt-1 flex items-center gap-2", children: [selectedResource && jsxRuntimeExports.jsx("span", { className: `inline-flex items-center rounded-md px-1.5 py-0.5 text-[11px] font-medium leading-none shrink-0 ${selectedResource === "step" ? "bg-green-200 text-green-900" : selectedResource === "run" ? "bg-blue-200 text-blue-900" : "bg-gray-200 text-gray-900"}`, children: selectedResource.charAt(0).toUpperCase() + selectedResource.slice(1) }), jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1 text-[13px] font-mono text-gray-700 min-w-0", title: selectedResourceId, children: [jsxRuntimeExports.jsx("span", { className: "truncate", children: selectedResourceId }), jsxRuntimeExports.jsx(CopyButton, { copyText: selectedResourceId, ariaLabel: "Copy ID", className: "shrink-0" })] })] })] }), jsxRuntimeExports.jsx("button", { type: "button", className: "p-1 rounded-md text-gray-900 hover:text-gray-1000 hover:bg-gray-alpha-200 transition-colors shrink-0", onClick: clearActiveSpan, children: jsxRuntimeExports.jsx(X, { className: "w-4 h-4" }) })] }) }), jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto", children: jsxRuntimeExports.jsx(ErrorBoundary, { children: jsxRuntimeExports.jsx(EntityDetailPanel, { run: sidebar.run, onStreamClick: sidebar.onStreamClick, onRunClick: sidebar.onRunClick, spanDetailData: sidebar.spanDetailData, spanDetailError: sidebar.spanDetailError, spanDetailLoading: sidebar.spanDetailLoading, onSpanSelect: sidebar.onSpanSelect, onWakeUpSleep: sidebar.onWakeUpSleep, onLoadEventData: sidebar.onLoadEventData, onResolveHook: sidebar.onResolveHook, encryptionKey: sidebar.encryptionKey, onDecrypt: sidebar.onDecrypt, isDecrypting: sidebar.isDecrypting, selectedSpan }) }) })] }) : activeSpan ? jsxRuntimeExports.jsx(DetailPanel, { span: activeSpan, rootStart: root.startTime, onClose: clearActiveSpan }) : null] });
+  const { prevSpanId, nextSpanId } = reactExports.useMemo(() => {
+    var _a, _b;
+    if (!activeSpanId)
+      return { prevSpanId: null, nextSpanId: null };
+    const i = filteredSpans.findIndex((s) => s.spanId === activeSpanId);
+    if (i === -1)
+      return { prevSpanId: null, nextSpanId: null };
+    return {
+      prevSpanId: ((_a = filteredSpans[i - 1]) == null ? void 0 : _a.spanId) ?? null,
+      nextSpanId: ((_b = filteredSpans[i + 1]) == null ? void 0 : _b.spanId) ?? null
+    };
+  }, [activeSpanId, filteredSpans]);
+  const handleSelectPrevSpan = reactExports.useCallback(() => {
+    if (prevSpanId)
+      handleSelectSpan(prevSpanId);
+  }, [prevSpanId, handleSelectSpan]);
+  const handleSelectNextSpan = reactExports.useCallback(() => {
+    if (nextSpanId)
+      handleSelectSpan(nextSpanId);
+  }, [nextSpanId, handleSelectSpan]);
+  const prevSpanIdRef = reactExports.useRef(prevSpanId);
+  const nextSpanIdRef = reactExports.useRef(nextSpanId);
+  const handleSelectSpanRef = reactExports.useRef(handleSelectSpan);
+  prevSpanIdRef.current = prevSpanId;
+  nextSpanIdRef.current = nextSpanId;
+  handleSelectSpanRef.current = handleSelectSpan;
+  return jsxRuntimeExports.jsxs("div", { "data-pane": "pane-root", "data-has-detail": activeSpan ? "" : void 0, className: "grid w-full h-full max-h-full grid-cols-[minmax(100px,1fr)] data-[has-detail]:grid-cols-[minmax(100px,1fr)_clamp(280px,420px,100%)]", children: [jsxRuntimeExports.jsxs("div", { id: "trace-parent", className: "grid grid-rows-[1fr] h-full min-h-0 overflow-hidden relative bg-background-100", children: [jsxRuntimeExports.jsxs(SplitPane, { startHeader: jsxRuntimeExports.jsxs("div", { className: "bg-background-100 border-b border-gray-alpha-400 h-10 min-h-10 flex items-center pl-4 pr-2 gap-1.5", children: [jsxRuntimeExports.jsx(Search, { className: "w-3.5 h-3.5 shrink-0 text-gray-800" }), jsxRuntimeExports.jsx("input", { id: "trace-viewer-search", name: "trace-viewer-search", type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: "Search spans...", "aria-label": "Search spans", className: "flex-1 min-w-0 bg-transparent text-sm text-gray-1000 placeholder:text-gray-800 outline-none" }), searchQuery && jsxRuntimeExports.jsx("button", { type: "button", "aria-label": "Clear search", onClick: () => setSearchQuery(""), className: "shrink-0 p-0.5 rounded-sm text-gray-800 hover:text-gray-1000 hover:bg-gray-200 transition-colors", children: jsxRuntimeExports.jsx(X, { className: "w-3 h-3" }) })] }), endHeader: jsxRuntimeExports.jsx(TimelineHeader, { markers: timeMarkers, hoverInfo }), children: [jsxRuntimeExports.jsx("div", { className: "block overflow-visible", children: jsxRuntimeExports.jsx(EventList, { spans: filteredSpans, activeSpanId, onSelectSpan: handleSelectSpan }) }), jsxRuntimeExports.jsx("div", { ref: timelineRef, className: "block min-h-0 overflow-visible relative", onDoubleClick: resetZoom, onMouseMove: handleTimelineMouseMove, onMouseLeave: handleTimelineMouseLeave, children: jsxRuntimeExports.jsx(Timeline, { spans: filteredSpans, viewStart: viewport.start, viewEnd: viewport.end, markers: timeMarkers, selectedId: activeSpanId, onSelect: handleSelectSpan, hoverFraction, altHeld }) })] }), jsxRuntimeExports.jsxs("div", { className: "absolute right-3 bottom-3 z-[5] flex items-center border border-gray-alpha-400 rounded-lg bg-background-100 shadow-sm overflow-hidden divide-x divide-gray-alpha-400", children: [jsxRuntimeExports.jsx("button", { type: "button", className: "flex items-center justify-center w-8 h-8 text-gray-900 cursor-pointer transition-colors duration-[time:120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100", onClick: zoomOut, "aria-label": "Zoom out", children: jsxRuntimeExports.jsx(ZoomOut, { className: "w-4 h-4" }) }), jsxRuntimeExports.jsx("button", { type: "button", className: "flex items-center justify-center w-8 h-8 text-gray-900 cursor-pointer transition-colors duration-[time:120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100", onClick: resetZoom, "aria-label": "Reset zoom", children: jsxRuntimeExports.jsx(RotateCcw, { className: "w-3.5 h-3.5" }) }), jsxRuntimeExports.jsx("button", { type: "button", className: "flex items-center justify-center w-8 h-8 text-gray-900 cursor-pointer transition-colors duration-[time:120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100", onClick: zoomIn, "aria-label": "Zoom in", children: jsxRuntimeExports.jsx(ZoomIn, { className: "w-4 h-4" }) })] })] }), activeSpan && sidebar ? jsxRuntimeExports.jsxs("aside", { className: "flex flex-col h-full max-h-full bg-background-100 border-l border-gray-alpha-400 overflow-auto", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-2 shrink-0 px-4 pt-3 pb-3", children: [jsxRuntimeExports.jsx("span", { className: "text-label-14 font-medium text-gray-1000 truncate block", children: selectedSpanName }), jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-0.5 shrink-0", children: [jsxRuntimeExports.jsx("button", { type: "button", "aria-label": "Navigate to previous span", "aria-keyshortcuts": "K", onClick: handleSelectPrevSpan, disabled: !prevSpanId, className: "p-1 rounded text-gray-1000 transition-colors enabled:hover:bg-gray-alpha-100 disabled:opacity-40 disabled:cursor-not-allowed", children: jsxRuntimeExports.jsx(ChevronUp, { className: "w-4 h-4" }) }), jsxRuntimeExports.jsx("button", { type: "button", "aria-label": "Navigate to next span", "aria-keyshortcuts": "J", onClick: handleSelectNextSpan, disabled: !nextSpanId, className: "p-1 rounded text-gray-1000 transition-colors enabled:hover:bg-gray-alpha-100 disabled:opacity-40 disabled:cursor-not-allowed", children: jsxRuntimeExports.jsx(ChevronDown, { className: "w-4 h-4" }) }), jsxRuntimeExports.jsx("div", { "aria-hidden": true, className: "w-px h-4 bg-gray-alpha-400 mx-1" }), jsxRuntimeExports.jsx("button", { type: "button", "aria-label": "Close span details", "aria-keyshortcuts": "Escape", className: "p-1 rounded text-gray-1000 hover:bg-gray-alpha-100 transition-colors", onClick: clearActiveSpan, children: jsxRuntimeExports.jsx(X, { className: "w-4 h-4" }) })] })] }), jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto", children: jsxRuntimeExports.jsx(ErrorBoundary, { children: jsxRuntimeExports.jsx(EntityDetailPanel, { run: sidebar.run, onStreamClick: sidebar.onStreamClick, onRunClick: sidebar.onRunClick, spanDetailData: sidebar.spanDetailData, spanDetailError: sidebar.spanDetailError, spanDetailLoading: sidebar.spanDetailLoading, onSpanSelect: sidebar.onSpanSelect, onWakeUpSleep: sidebar.onWakeUpSleep, onLoadEventData: sidebar.onLoadEventData, onResolveHook: sidebar.onResolveHook, encryptionKey: sidebar.encryptionKey, onDecrypt: sidebar.onDecrypt, isDecrypting: sidebar.isDecrypting, selectedSpan }) }) })] }) : activeSpan ? jsxRuntimeExports.jsx(DetailPanel, { span: activeSpan, rootStart: root.startTime, onClose: clearActiveSpan }) : null] });
 }
 const NewTraceViewer = ({ run, events, sidebarData }) => {
   const traceWithMeta = reactExports.useMemo(() => {