@workflow/web 5.0.0-beta.15 → 5.0.0-beta.16

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

@@ -1,6 +1,6 @@
-import { j as jsxRuntimeExports, r as reactExports, f as reactDomExports, G as ReactDOM, B as useNavigate, C as useSearchParams, A as Link, w as withComponentProps, H as useParams } from "./index-BXZSIDEp.js";
-import { q as Check, O as Copy, 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, p as ChevronUp, X, 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-fgQ2XQ5R.js";
-import { c as createLucideIcon, N as Spinner, O as cn, g as useToast, U as Skeleton, W as DecryptClickContext, Y as Yr, X as isEncryptedMarker, Z as formatDuration, _ as DataInspector, $ as _r, a0 as Button, a1 as Lock, a2 as RunClickContext, a3 as StreamClickContext, a4 as isExpiredMarker, a5 as isDoStreamStep, a6 as extractConversation, a7 as hasEncryptedFields, a8 as EVENT_DATA_REF_FIELDS, a9 as useSidebarDataOptional, aa as clsx, ab as useRowWindow, ac as isSpanDimmedBySearch, ad as ROW_HEIGHT_PX, ae as getSpanDurationMs, af as formatDurationPrecise, ag as TooltipProvider, ah as ActiveSpanProvider, ai as useActiveSpan, aj as useSidebarData, ak as searchSpans, al as computeRootBounds, am as computeTimeMarkers, an as getHighResInMs, ao as TIMELINE_PADDING_PX, ap as Timeline, aq as TimelineHeader, ar as IconButton, as as Tooltip, at as TooltipTrigger, au as TooltipContent, av as SidebarDataProvider, aw as hydrateResourceIOWithKey, ax as hydrateResourceIO, ay as fetchHook, k as fetchEvents, G as fetchRun, az as fetchStep, aA as fetchStreams, aB as Slot, F as useComposedRefs, aC as Slottable, d as cn$1, aD as buttonVariants, aE as fetchEvent, aF as fetchEventsByCorrelationId, aG as isEncryptedData, aH as hydrateData, aI as getWebRevivers, T as Tooltip$1, a as TooltipTrigger$1, b as TooltipContent$1, aJ as LIVE_UPDATE_INTERVAL_MS$1, u as useServerConfig, aK as getEncryptionKeyForRun, t as toast, L as LoaderCircle, aL as StreamViewer } from "./mermaid-3ZIDBTTL-BMWEihLr.js";
+import { r as reactExports, j as jsxRuntimeExports, f as reactDomExports, G as ReactDOM, B as useNavigate, C as useSearchParams, A as Link, w as withComponentProps, H as useParams } from "./index-BXZSIDEp.js";
+import { q as Check, O as Copy, j as ChevronRight, o as ChevronDown, C as CircleAlert, Q as parseStepName, B as parseWorkflowName, U as ErrorCard, V as format, Z as Zap, S as Send, R as ResolveHookModal, Y as Circle, p as ChevronUp, X, N as ErrorBoundary, I as unwrapServerActionResult, u as unwrapOrThrow, W as WorkflowWebAPIError, _ as useEscapeKeydown, t as composeEventHandlers, $ as useCallbackRef, a0 as useLayoutEffect2, s as useControllableState, a1 as useId, a2 as createContext2, v as Presence, x as createContextScope, l as hideOthers, m as ReactRemoveScroll, a3 as useFocusGuards, a4 as LAYOUT, a5 as wakeUpRun, r as resumeHook, A as Alert, c as AlertTitle, d as AlertDescription, a as Skeleton$1, a6 as RunActionsButtons, F as StatusBadge, e as CopyableText, b as RelativeTime, T as Tabs, K as TabsList, L as TabsTrigger, M as TabsContent, y as cancelRun, a7 as recreateRun } from "./workflow-graph-viewer-BEhdopGj.js";
+import { c as createLucideIcon, N as cn, O as DataInspector, U as DecryptClickContext, W as Button, X as Spinner, Y as Lock, Z as RESERVED_ATTRIBUTE_KEY_PREFIX, _ as useHasContextCardProvider, $ as ContextCardProvider, a0 as ContextCardTrigger, g as useToast, a1 as Skeleton, a2 as Yr, a3 as isEncryptedMarker, a4 as formatDuration, a5 as _r, a6 as RunClickContext, a7 as StreamClickContext, a8 as isExpiredMarker, a9 as isDoStreamStep, aa as extractConversation, ab as hasEncryptedFields, ac as EVENT_DATA_REF_FIELDS, ad as useSidebarDataOptional, ae as clsx, af as useRowWindow, ag as isSpanDimmedBySearch, ah as ROW_HEIGHT_PX, ai as getSpanDurationMs, aj as formatDurationPrecise, ak as TooltipProvider, al as ActiveSpanProvider, am as useActiveSpan, an as useSidebarData, ao as searchSpans, ap as computeRootBounds, aq as computeTimeMarkers, ar as getHighResInMs, as as TIMELINE_PADDING_PX, at as Timeline, au as TimelineHeader, av as IconButton, aw as Tooltip, ax as TooltipTrigger, ay as TooltipContent, az as useReducedMotion, aA as SidebarDataProvider, aB as hydrateResourceIOWithKey, aC as hydrateResourceIO, aD as fetchHook, k as fetchEvents, G as fetchRun, aE as fetchStep, aF as fetchStreams, aG as Slot, F as useComposedRefs, aH as Slottable, d as cn$1, aI as buttonVariants, aJ as fetchEvent, aK as fetchEventsByCorrelationId, aL as isEncryptedData, aM as hydrateData, aN as getWebRevivers, T as Tooltip$1, a as TooltipTrigger$1, b as TooltipContent$1, aO as LIVE_UPDATE_INTERVAL_MS$1, u as useServerConfig, aP as getEncryptionKeyForRun, t as toast, L as LoaderCircle, aQ as StreamViewer } from "./mermaid-3ZIDBTTL-DQJ4rkIZ.js";
 import { decrypt, importKey } from "./encryption-g14N5vQl.js";
 import "./index-B6-SzLmT.js";
 /**
@@ -104,10 +104,6 @@ function looksLikeWorkflowIdSearchInput(query) {
   }
   return /\d/.test(trimmed);
 }
-const STYLES$2 = `.wf-decrypt-btn{appearance:none;-webkit-appearance:none;border:none;display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 12px;border-radius:6px;font-size:14px;font-weight:500;line-height:20px;cursor:pointer;white-space:nowrap;gap:6px;transition:background 150ms}.wf-decrypt-idle{color:var(--ds-gray-1000);background:var(--ds-background-100);box-shadow:0 0 0 1px var(--ds-gray-400)}.wf-decrypt-idle:hover{background:var(--ds-gray-alpha-200)}.wf-decrypt-done{color:var(--ds-green-900);background:var(--ds-green-100);box-shadow:0 0 0 1px var(--ds-green-400);cursor:default}`;
-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);
@@ -129,6 +125,112 @@ function CopyButton({ copyText, ariaLabel, className }) {
     });
   }, 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 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 })] }) });
+}
+const isReservedAttributeKey = (key) => key.startsWith(RESERVED_ATTRIBUTE_KEY_PREFIX);
+function ReservedBadge() {
+  return jsxRuntimeExports.jsx("span", { className: "shrink-0 rounded border px-1 py-px text-[10px] font-medium leading-3", style: {
+    borderColor: "var(--ds-gray-alpha-400)",
+    backgroundColor: "var(--ds-gray-100)",
+    color: "var(--ds-gray-700)"
+  }, title: `Keys prefixed with "${RESERVED_ATTRIBUTE_KEY_PREFIX}" are reserved for framework and library code`, children: "Reserved" });
+}
+function AttributeRow({ attributeKey, value, removed = false }) {
+  const reserved = isReservedAttributeKey(attributeKey);
+  return jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-3 py-1.5", children: [jsxRuntimeExports.jsxs("span", { className: "flex min-w-0 items-center gap-1.5 text-label-12 font-mono", style: {
+    color: reserved ? "var(--ds-gray-700)" : "var(--ds-gray-900)"
+  }, children: [jsxRuntimeExports.jsx("span", { className: "truncate", children: attributeKey }), reserved && jsxRuntimeExports.jsx(ReservedBadge, {})] }), removed ? jsxRuntimeExports.jsx("span", { className: "shrink-0 text-label-12 italic", style: { color: "var(--ds-gray-700)" }, children: "removed" }) : jsxRuntimeExports.jsx("span", { className: "max-w-[60%] truncate text-right text-label-12 font-mono text-gray-1000", title: value, children: value })] });
+}
+function sortAttributeKeys(keys) {
+  return [...keys].sort((a, b) => {
+    const aReserved = isReservedAttributeKey(a);
+    const bReserved = isReservedAttributeKey(b);
+    if (aReserved !== bReserved)
+      return aReserved ? 1 : -1;
+    return a.localeCompare(b);
+  });
+}
+function RunAttributesCard({ attributes }) {
+  const keys = sortAttributeKeys(Object.keys(attributes));
+  if (keys.length === 0)
+    return null;
+  return jsxRuntimeExports.jsx(DetailCard, { summary: `Attributes (${keys.length})`, defaultOpen: true, contentClassName: "mb-0", children: jsxRuntimeExports.jsx("div", { className: "flex flex-col divide-y divide-gray-alpha-400", children: keys.map((key) => jsxRuntimeExports.jsx(AttributeRow, { attributeKey: key, value: attributes[key] }, key)) }) });
+}
+function isAttrSetEventData(data) {
+  if (data === null || typeof data !== "object")
+    return false;
+  const record = data;
+  return Array.isArray(record.changes) && record.changes.every((c) => c !== null && typeof c === "object" && typeof c.key === "string");
+}
+function describeWriter(writer) {
+  if (!writer)
+    return null;
+  if (writer.type === "workflow")
+    return "Set by workflow";
+  if (writer.type === "step") {
+    return `Set by step ${writer.stepId} (attempt ${writer.attempt})`;
+  }
+  return null;
+}
+function AttrSetEventBlock({ data }) {
+  if (!isAttrSetEventData(data)) {
+    return jsxRuntimeExports.jsx(CopyableDataBlock, { data });
+  }
+  const writerLabel = describeWriter(data.writer);
+  return jsxRuntimeExports.jsxs("div", { className: "flex flex-col px-3 py-1", children: [jsxRuntimeExports.jsx("div", { className: "flex flex-col divide-y divide-gray-alpha-400", children: data.changes.map((change, index) => jsxRuntimeExports.jsx(AttributeRow, { attributeKey: change.key, removed: change.value === null, value: change.value ?? void 0 }, `${change.key}:${index}`)) }), writerLabel && jsxRuntimeExports.jsx("div", { className: "border-t py-1.5 text-label-12", style: {
+    borderColor: "var(--ds-gray-alpha-400)",
+    color: "var(--ds-gray-700)"
+  }, children: writerLabel })] });
+}
+const STYLES$2 = `.wf-decrypt-btn{appearance:none;-webkit-appearance:none;border:none;display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 12px;border-radius:6px;font-size:14px;font-weight:500;line-height:20px;cursor:pointer;white-space:nowrap;gap:6px;transition:background 150ms}.wf-decrypt-idle{color:var(--ds-gray-1000);background:var(--ds-background-100);box-shadow:0 0 0 1px var(--ds-gray-400)}.wf-decrypt-idle:hover{background:var(--ds-gray-alpha-200)}.wf-decrypt-done{color:var(--ds-green-900);background:var(--ds-green-100);box-shadow:0 0 0 1px var(--ds-green-400);cursor:default}`;
+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 isStructuredError(value) {
   return value != null && typeof value === "object" && (typeof value.message === "string" || typeof value.stack === "string");
 }
@@ -231,17 +333,45 @@ function formatTimeDifference(diff) {
 function useTimeAgo(date) {
   const [timeAgo, setTimeAgo] = reactExports.useState("");
   reactExports.useEffect(() => {
-    const update = () => {
+    const updateTimeAgo = () => {
       const diff = Date.now() - date;
-      const formatted = formatTimeDifference(diff);
-      setTimeAgo(formatted ? `${formatted} ago` : "Just now");
+      const formattedDiff = formatTimeDifference(diff);
+      setTimeAgo(formattedDiff ? `${formattedDiff} ago` : "Just now");
     };
-    update();
-    const timer = setInterval(update, 1e3);
+    updateTimeAgo();
+    const timer = setInterval(updateTimeAgo, 1e3);
     return () => clearInterval(timer);
   }, [date]);
   return timeAgo;
 }
+function useShortTimeAgo(date) {
+  const [shortTimeAgo, setShortTimeAgo] = reactExports.useState("");
+  reactExports.useEffect(() => {
+    if (!date) {
+      setShortTimeAgo("");
+      return;
+    }
+    const updateShortTimeAgo = () => {
+      const diff = Date.now() - date;
+      const days = Math.floor(diff / (1e3 * 60 * 60 * 24));
+      const hours = Math.floor(diff / (1e3 * 60 * 60));
+      const minutes = Math.floor(diff / (1e3 * 60));
+      if (days > 0) {
+        setShortTimeAgo(`${days} day${days > 1 ? "s" : ""} ago`);
+      } else if (hours > 0) {
+        setShortTimeAgo(`${hours} hour${hours > 1 ? "s" : ""} ago`);
+      } else if (minutes > 0) {
+        setShortTimeAgo(`${minutes} minute${minutes > 1 ? "s" : ""} ago`);
+      } else {
+        setShortTimeAgo("Just now");
+      }
+    };
+    updateShortTimeAgo();
+    const timer = setInterval(updateShortTimeAgo, 6e4);
+    return () => clearInterval(timer);
+  }, [date]);
+  return shortTimeAgo;
+}
 function ZoneDateTimeRow({ date, zone }) {
   var _a;
   const dateObj = new Date(date);
@@ -261,133 +391,30 @@ function ZoneDateTimeRow({ date, zone }) {
     minute: "2-digit",
     second: "2-digit"
   });
-  return jsxRuntimeExports.jsxs("div", { style: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: 12
-  }, children: [jsxRuntimeExports.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [jsxRuntimeExports.jsx("div", { style: {
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    height: 16,
-    padding: "0 6px",
-    backgroundColor: "var(--ds-gray-200)",
-    borderRadius: 3,
-    fontSize: 11,
-    fontFamily: "var(--font-mono, monospace)",
-    fontWeight: 500,
-    color: "var(--ds-gray-900)",
-    whiteSpace: "nowrap"
-  }, children: formattedZone }), jsxRuntimeExports.jsx("span", { style: {
-    fontSize: 13,
-    color: "var(--ds-gray-1000)",
-    whiteSpace: "nowrap"
-  }, children: formattedDate })] }), jsxRuntimeExports.jsx("span", { style: {
-    fontSize: 11,
-    fontFamily: "var(--font-mono, monospace)",
-    fontVariantNumeric: "tabular-nums",
-    color: "var(--ds-gray-900)",
-    whiteSpace: "nowrap"
-  }, children: formattedTime })] });
+  return jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-3", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1.5", children: [jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-4 px-1.5 bg-gray-200 rounded-xs", children: jsxRuntimeExports.jsx("span", { className: "text-[12px] font-mono text-gray-900", children: formattedZone }) }), jsxRuntimeExports.jsx("span", { className: "text-[13px] text-gray-1000", children: formattedDate })] }), jsxRuntimeExports.jsx("span", { className: "tabular-nums text-[12px] font-mono text-gray-900", children: formattedTime })] });
 }
-function TimestampTooltipContent({ date }) {
+function RelativeTimeContextCardContent({ date }) {
   const localTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
   const timeAgo = useTimeAgo(date);
-  return jsxRuntimeExports.jsxs("div", { style: {
-    display: "flex",
-    flexDirection: "column",
-    gap: 12,
-    minWidth: 300,
-    padding: "12px 14px"
-  }, children: [jsxRuntimeExports.jsx("span", { style: {
-    fontSize: 13,
-    fontVariantNumeric: "tabular-nums",
-    color: "var(--ds-gray-900)"
-  }, children: timeAgo }), jsxRuntimeExports.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [jsxRuntimeExports.jsx(ZoneDateTimeRow, { date, zone: "UTC" }), jsxRuntimeExports.jsx(ZoneDateTimeRow, { date, zone: localTimezone })] })] });
-}
-const TOOLTIP_WIDTH = 330;
-const VIEWPORT_PAD = 8;
-function TooltipPortal({ triggerRect, onMouseEnter, onMouseLeave, date }) {
-  const tooltipRef = reactExports.useRef(null);
-  const [style, setStyle] = reactExports.useState({
-    position: "fixed",
-    zIndex: 9999,
-    visibility: "hidden"
-  });
-  reactExports.useEffect(() => {
-    const placement = triggerRect.top > 240 ? "above" : "below";
-    const centerX = triggerRect.left + triggerRect.width / 2;
-    const el = tooltipRef.current;
-    const w = el ? el.offsetWidth : TOOLTIP_WIDTH;
-    const h = el ? el.offsetHeight : 100;
-    let left = centerX - w / 2;
-    left = Math.max(VIEWPORT_PAD, Math.min(left, window.innerWidth - w - VIEWPORT_PAD));
-    let top;
-    if (placement === "above") {
-      top = triggerRect.top - h - 6;
-      if (top < VIEWPORT_PAD) {
-        top = triggerRect.bottom + 6;
-      }
-    } else {
-      top = triggerRect.bottom + 6;
-      if (top + h > window.innerHeight - VIEWPORT_PAD) {
-        top = triggerRect.top - h - 6;
-      }
-    }
-    setStyle({
-      position: "fixed",
-      left,
-      top,
-      zIndex: 9999,
-      borderRadius: 10,
-      border: "1px solid var(--ds-gray-alpha-200)",
-      backgroundColor: "var(--ds-background-100)",
-      boxShadow: "0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06)",
-      visibility: "visible"
-    });
-  }, [triggerRect]);
-  return reactDomExports.createPortal(
-    // biome-ignore lint/a11y/noStaticElementInteractions: tooltip hover zone
-    jsxRuntimeExports.jsx("div", { ref: tooltipRef, onMouseEnter, onMouseLeave, style, children: jsxRuntimeExports.jsx(TimestampTooltipContent, { date }) }),
-    document.body
-  );
+  return jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-3 min-w-[300px]", children: [jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-3", children: jsxRuntimeExports.jsx("span", { className: "tabular-nums text-[13px] text-gray-900", children: timeAgo }) }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx(ZoneDateTimeRow, { date, zone: "UTC" }), jsxRuntimeExports.jsx(ZoneDateTimeRow, { date, zone: localTimezone })] })] });
 }
-function TimestampTooltip({ date, children }) {
-  const [open, setOpen] = reactExports.useState(false);
-  const [triggerRect, setTriggerRect] = reactExports.useState(null);
-  const triggerRef = reactExports.useRef(null);
-  const closeTimer = reactExports.useRef(null);
-  reactExports.useEffect(() => {
-    return () => {
-      if (closeTimer.current)
-        clearTimeout(closeTimer.current);
-    };
-  }, []);
+function DefaultTimeText({ date }) {
+  const shortTimeAgo = useShortTimeAgo(date);
+  return jsxRuntimeExports.jsx("span", { className: "text-label-14 text-gray-900", children: shortTimeAgo });
+}
+function RelativeTimeCard({ date, children: _children, ...props }) {
+  const children = _children === void 0 ? jsxRuntimeExports.jsx(DefaultTimeText, { date }) : _children;
+  if (!date)
+    return children;
+  return jsxRuntimeExports.jsx(ContextCardTrigger, { content: jsxRuntimeExports.jsx(RelativeTimeContextCardContent, { date }), ...props, children });
+}
+function TimestampTooltip({ date, children, side = "top" }) {
+  const hasProvider = useHasContextCardProvider();
   const ts = date == null ? null : typeof date === "number" ? date : new Date(date).getTime();
   if (ts == null || Number.isNaN(ts))
     return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children });
-  const cancelClose = () => {
-    if (closeTimer.current) {
-      clearTimeout(closeTimer.current);
-      closeTimer.current = null;
-    }
-  };
-  const scheduleClose = () => {
-    cancelClose();
-    closeTimer.current = setTimeout(() => setOpen(false), 120);
-  };
-  const handleOpen = () => {
-    cancelClose();
-    if (triggerRef.current) {
-      setTriggerRect(triggerRef.current.getBoundingClientRect());
-    }
-    setOpen(true);
-  };
-  return (
-    // biome-ignore lint/a11y/noStaticElementInteractions: tooltip trigger
-    jsxRuntimeExports.jsxs("span", { ref: triggerRef, onMouseEnter: handleOpen, onMouseLeave: scheduleClose, style: { display: "inline-flex" }, children: [children, open && triggerRect && jsxRuntimeExports.jsx(TooltipPortal, { triggerRect, onMouseEnter: cancelClose, onMouseLeave: scheduleClose, date: ts })] })
-  );
+  const card = jsxRuntimeExports.jsx(RelativeTimeCard, { date: ts, side, asChild: true, children });
+  return hasProvider ? card : jsxRuntimeExports.jsx(ContextCardProvider, { children: card });
 }
 const ERROR_EVENT_TYPES$1 = /* @__PURE__ */ new Set([
   "step_failed",
@@ -423,6 +450,9 @@ function getStatusDotColor(eventType) {
   if (eventType === "step_retrying") {
     return "var(--ds-amber-700)";
   }
+  if (eventType === "attr_set") {
+    return "var(--ds-teal-900)";
+  }
   if (eventType === "step_completed" || eventType === "run_completed" || eventType === "workflow_completed" || eventType === "hook_disposed" || eventType === "wait_completed") {
     return "var(--ds-green-700)";
   }
@@ -497,7 +527,9 @@ function hasEncryptedValues(data) {
   return false;
 }
 function isRunLevel(eventType) {
-  return eventType === "run_created" || eventType === "run_started" || eventType === "run_completed" || eventType === "run_failed" || eventType === "run_cancelled" || eventType === "workflow_started" || eventType === "workflow_completed" || eventType === "workflow_failed";
+  return eventType === "run_created" || eventType === "run_started" || eventType === "run_completed" || eventType === "run_failed" || eventType === "run_cancelled" || eventType === "workflow_started" || eventType === "workflow_completed" || eventType === "workflow_failed" || // attr_set carries a dedup correlationId rather than a child entity ID,
+  // so it groups and labels with the run itself.
+  eventType === "attr_set";
 }
 const GUTTER_WIDTH = 36;
 const LANE_X = 20;
@@ -665,6 +697,9 @@ function PayloadBlock({ data, eventType }) {
   if (structuredError) {
     return jsxRuntimeExports.jsx("div", { className: "p-2", children: jsxRuntimeExports.jsx(ErrorStackBlock, { value: structuredError }) });
   }
+  if (eventType === "attr_set") {
+    return jsxRuntimeExports.jsx(AttrSetEventBlock, { data: cleaned });
+  }
   return jsxRuntimeExports.jsxs("div", { className: "relative group/payload", children: [jsxRuntimeExports.jsx("div", { className: "overflow-x-auto p-2 text-[11px]", style: { color: "var(--ds-gray-1000)" }, children: jsxRuntimeExports.jsx(DataInspector, { data: cleaned, expandLevel: 2 }) }), jsxRuntimeExports.jsx("button", { type: "button", onClick: handleCopy, className: "absolute bottom-2 right-2 opacity-0 group-hover/payload:opacity-100 transition-opacity flex items-center gap-1 px-2 py-1 rounded-md text-xs hover:bg-[var(--ds-gray-alpha-200)]", style: { ...BUTTON_RESET_STYLE, color: "var(--ds-gray-700)" }, "aria-label": "Copy payload", children: copied ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Check, { className: "h-3 w-3", style: { color: "var(--ds-green-700)" } }), jsxRuntimeExports.jsx("span", { style: { color: "var(--ds-green-700)" }, children: "Copied" })] }) : jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Copy, { className: "h-3 w-3" }), jsxRuntimeExports.jsx("span", { children: "Copy" })] }) })] });
 }
 const SORT_OPTIONS = [
@@ -830,7 +865,7 @@ function EventRow$1({ event, index, isFirst, isLast, isExpanded, onToggleExpand,
     color: "var(--ds-red-900)"
   }, children: loadError }) : isLoading || loadedEventData === null && !hasAttemptedLoad && event.correlationId ? jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2 p-3", children: [jsxRuntimeExports.jsx(Skeleton, { className: "h-3", style: { width: "75%" } }), jsxRuntimeExports.jsx(Skeleton, { className: "h-3", style: { width: "50%" } }), jsxRuntimeExports.jsx(Skeleton, { className: "h-3", style: { width: "60%" } })] }) : jsxRuntimeExports.jsx("div", { className: "p-2 text-xs", style: { color: "var(--ds-gray-900)" }, children: "No data" })] })] })] });
 }
-function EventListView({ events, run, onLoadEventData, hasMoreEvents = false, isLoadingMoreEvents = false, onLoadMoreEvents, encryptionKey, isLoading = false, sortOrder: sortOrderProp, onSortOrderChange, onDecrypt, isDecrypting = false, hasEncryptedData: hasEncryptedDataProp = false, onExactIdSearch }) {
+function EventListViewInner({ events, run, onLoadEventData, hasMoreEvents = false, isLoadingMoreEvents = false, onLoadMoreEvents, encryptionKey, isLoading = false, sortOrder: sortOrderProp, onSortOrderChange, onDecrypt, isDecrypting = false, hasEncryptedData: hasEncryptedDataProp = false, onExactIdSearch }) {
   const toast2 = useToast();
   const [internalSortOrder, setInternalSortOrder] = reactExports.useState("asc");
   const effectiveSortOrder = sortOrderProp ?? internalSortOrder;
@@ -1098,6 +1133,9 @@ function EventListView({ events, run, onLoadEventData, hasMoreEvents = false, is
     backgroundColor: "var(--ds-background-100)"
   }, children: [jsxRuntimeExports.jsx("span", { children: isExactSearchActive ? searchError ? searchError : searchNotFound ? `No events found for ${searchQuery.trim()}` : `${sortedEvents.length} event${sortedEvents.length !== 1 ? "s" : ""} for ${searchQuery.trim()}${searchResultsTruncated ? " (results may be truncated)" : ""}` : `${sortedEvents.length} event${sortedEvents.length !== 1 ? "s" : ""} loaded` }), !isExactSearchActive && hasMoreEvents && jsxRuntimeExports.jsx("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: jsxRuntimeExports.jsx("div", { className: "pointer-events-auto", children: jsxRuntimeExports.jsx(LoadMoreButton, { loading: isLoadingMoreEvents, onClick: () => void (onLoadMoreEvents == null ? void 0 : onLoadMoreEvents()) }) }) })] })] }) });
 }
+function EventListView(props) {
+  return jsxRuntimeExports.jsx(ContextCardProvider, { children: jsxRuntimeExports.jsx(EventListViewInner, { ...props }) });
+}
 function shouldShowVerticalLine(eventType) {
   if (eventType === "hook_created" || eventType === "hook_received" || eventType === "hook_disposed") {
     return true;
@@ -1150,7 +1188,8 @@ const MARKER_EVENT_TYPES = /* @__PURE__ */ new Set([
   "step_failed",
   "run_failed",
   "wait_created",
-  "wait_completed"
+  "wait_completed",
+  "attr_set"
 ]);
 function convertEventsToSpanEvents(events, filterTypes = true) {
   return events.filter((event) => filterTypes ? MARKER_EVENT_TYPES.has(event.eventType) : true).map((event) => ({
@@ -1385,6 +1424,15 @@ function runToSpan(run, runEvents, nowTime) {
 const isStepEvent = (eventType) => eventType.startsWith("step_");
 const isTimerEvent = (eventType) => eventType === "wait_created" || eventType === "wait_completed";
 const isHookLifecycleEvent = (eventType) => eventType === "hook_received" || eventType === "hook_created" || eventType === "hook_disposed";
+const isRunLevelEvent = (event) => !event.correlationId || !isTimerEvent(event.eventType) && !isHookLifecycleEvent(event.eventType) && !isStepEvent(event.eventType);
+function filterSpanRawEvents(events, resource, spanId) {
+  if (resource === "run") {
+    return events.filter(isRunLevelEvent);
+  }
+  if (!spanId)
+    return [];
+  return events.filter((e) => e.correlationId === spanId);
+}
 function pushEvent(map, correlationId, event) {
   const existing = map.get(correlationId);
   if (existing) {
@@ -1865,53 +1913,6 @@ function parseContent(content) {
   }
   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
@@ -2074,15 +2075,7 @@ const parseDateValue = (value) => {
   const date = typeof value === "number" ? new Date(value) : new Date(String(value));
   return Number.isNaN(date.getTime()) ? null : date;
 };
-const formatLocalMillisecondTime = (date) => date.toLocaleString(void 0, {
-  year: "numeric",
-  month: "numeric",
-  day: "numeric",
-  hour: "numeric",
-  minute: "numeric",
-  second: "numeric",
-  fractionalSecondDigits: 3
-});
+const formatLocalMillisecondTime = (date) => format(date, "MMM dd HH:mm:ss.SS OO").toUpperCase();
 const localMillisecondTimeOrNull = (value) => {
   const date = parseDateValue(value);
   if (!date) {
@@ -2128,13 +2121,13 @@ const attributeToDisplayFn = {
   projectId: (_value) => null,
   environment: (_value) => null,
   executionContext: (_value) => null,
-  // Attributes MVP — string-string metadata attached to the run.
-  // Rendered in its own collapsible DetailCard; if empty/missing, hidden
-  // by the hasDisplayContent gate.
+  // Attributes — string-string metadata attached to the run.
+  // Rendered as key-value rows in its own collapsible DetailCard;
+  // if empty/missing, hidden by the hasDisplayContent gate.
   attributes: (value) => {
     if (!hasDisplayContent(value))
       return null;
-    return jsxRuntimeExports.jsx(DetailCard, { summary: "Attributes", children: JsonBlock(value) });
+    return jsxRuntimeExports.jsx(RunAttributesCard, { attributes: value });
   },
   // Dates — wrapped with TimestampTooltip showing UTC/local + relative time
   createdAt: timestampWithTooltipOrNull,
@@ -2348,7 +2341,7 @@ const AttributePanel = ({ data, moduleSpecifier, isLoading, error, expiredAt, on
     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) => {
+  return jsxRuntimeExports.jsx(ContextCardProvider, { children: jsxRuntimeExports.jsx(RunClickContext.Provider, { value: onRunClick, children: jsxRuntimeExports.jsx(StreamClickContext.Provider, { value: onStreamClick, children: jsxRuntimeExports.jsxs(DecryptClickContext.Provider, { value: decryptValue, children: [visibleBasicAttributes.length > 0 && jsxRuntimeExports.jsxs("div", { className: "flex flex-col overflow-hidden divide-y divide-gray-alpha-400 mb-3", children: [orderedBasicAttributes.map((attribute) => {
     var _a;
     const displayValue = (_a = attributeToDisplayFn[attribute]) == null ? void 0 : _a.call(attributeToDisplayFn, displayData[attribute]);
     const isModuleSpecifier = attribute === "moduleSpecifier";
@@ -2362,7 +2355,7 @@ const AttributePanel = ({ data, moduleSpecifier, isLoading, error, expiredAt, on
     }, 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] }) }) });
+  }), 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([
@@ -2376,7 +2369,8 @@ const DATA_EVENT_TYPES = /* @__PURE__ */ new Set([
   "run_completed",
   "run_failed",
   "wait_created",
-  "wait_completed"
+  "wait_completed",
+  "attr_set"
 ]);
 function EventItem({ event, onLoadEventData, encryptionKey }) {
   const [loadedData, setLoadedData] = reactExports.useState(null);
@@ -2450,6 +2444,9 @@ function EventDataBlock({ eventType, data }) {
   if (hasEncryptedFields({ eventType, eventData: data })) {
     return jsxRuntimeExports.jsx(EncryptedDataBlock, {});
   }
+  if (eventType === "attr_set") {
+    return jsxRuntimeExports.jsx(AttrSetEventBlock, { data });
+  }
   if (ERROR_EVENT_TYPES.has(eventType) && data != null && typeof data === "object") {
     const record = data;
     if (isStructuredError(record.error)) {
@@ -2705,7 +2702,7 @@ function EntityDetailPanel({ run, onStreamClick, onRunClick, spanDetailData, spa
   }, 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, onStreamClick, onRunClick, encryptionKey })] }) }), jsxRuntimeExports.jsx(ResolveHookModal, { isOpen: showResolveHookModal, onClose: () => setShowResolveHookModal(false), onSubmit: handleResolveHook, isSubmitting: resolvingHook })] });
+  }, 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 }), rawEvents && jsxRuntimeExports.jsx(EventsList, { events: rawEvents, onLoadEventData, onStreamClick, onRunClick, encryptionKey })] }) }), jsxRuntimeExports.jsx(ResolveHookModal, { isOpen: showResolveHookModal, onClose: () => setShowResolveHookModal(false), onSubmit: handleResolveHook, isSubmitting: resolvingHook })] });
 }
 const COL_TEMPLATE = "340px 1px minmax(50px, 1fr)";
 const ROWS = [
@@ -2758,24 +2755,6 @@ function useLoadMoreOnScroll(loadMore, { hasMore, isLoadingMore, rootRef, rootMa
   }, [entry == null ? void 0 : entry.isIntersecting, hasMore, isLoadingMore]);
   return sentinelRef;
 }
-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;
-};
 function Kbd({ children, className }) {
   return jsxRuntimeExports.jsx("kbd", { className: cn("inline-flex h-5 min-w-5 items-center justify-center rounded bg-background-100/20 px-1 text-center font-sans text-xs leading-none", className), children });
 }
@@ -2982,11 +2961,11 @@ function useSelectedSpanInfo() {
     var _a, _b;
     if (!activeSpan)
       return null;
-    const correlationId = activeSpan.spanId;
-    const rawEvents = correlationId ? sidebar.events.filter((e) => e.correlationId === correlationId) : [];
+    const resource = (_a = activeSpan.attributes) == null ? void 0 : _a.resource;
+    const rawEvents = filterSpanRawEvents(sidebar.events, resource, activeSpan.spanId);
     return {
-      data: (_a = activeSpan.attributes) == null ? void 0 : _a.data,
-      resource: (_b = activeSpan.attributes) == null ? void 0 : _b.resource,
+      data: (_b = activeSpan.attributes) == null ? void 0 : _b.data,
+      resource,
       spanId: activeSpan.spanId,
       rawEvents
     };
@@ -3194,7 +3173,7 @@ function NewTraceViewerContent({ trace, onLoadMore, hasMore, isLoadingMore }) {
           dy *= 16;
         const cursorFraction = Math.max(0, Math.min(1, (e.clientX - rect.left - TIMELINE_PADDING_PX) / contentWidth));
         const isMouseWheel = e.deltaMode === 1 || Math.abs(e.deltaY) >= 50;
-        const scaleFactor = Math.pow(2, dy / (isMouseWheel ? 200 : 60));
+        const scaleFactor = 2 ** (dy / (isMouseWheel ? 200 : 60));
         setViewport((prev) => {
           const prevDuration = prev.end - prev.start;
           const cursorTime = prev.start + cursorFraction * prevDuration;