@workflow/web 5.0.0-beta.36 → 5.0.0-beta.38

package/build/client/assets/{run-detail-CrqNzQ_y.js → run-detail-Dr7nmBuO.js}

@@ -1,9 +1,7 @@
-import { r as reactExports, j as jsxRuntimeExports, p as reactDomExports, G as ReactDOM, d as useNavigate, e as useSearchParams, c as Link, w as withComponentProps, H as useParams } from "./index-Q81MFBxC.js";
-import { C as Check, a as Copy, d as CircleAlert, U as parseStepName, G as parseWorkflowName, V as ErrorCard, Y as format, Z as Zap, S as Send, R as ResolveHookModal, t as ChevronUp, X, Q as ErrorBoundary, _ as Circle, u as unwrapOrThrow, W as WorkflowWebAPIError, K as unwrapServerActionResult, $ as useEscapeKeydown, w as composeEventHandlers, a0 as useCallbackRef, a1 as useLayoutEffect2, v as useControllableState, a2 as useId, a3 as createContext2, x as Presence, z as createContextScope, p as hideOthers, q as ReactRemoveScroll, a4 as useFocusGuards, a5 as LAYOUT, a6 as wakeUpRun, n as resumeHook, A as Alert, e as AlertTitle, g as getErrorTitle, h as AlertDescription, i as getErrorMessage, b as Skeleton$1, a7 as RunActionsButtons, H as StatusBadge, j as CopyableText, c as RelativeTime, T as Tabs, M as TabsList, N as TabsTrigger, O as TabsContent, B as cancelRun, a8 as recreateRun } from "./workflow-graph-viewer-DrfqsDRu.js";
-import { c as createLucideIcon, W as cn, X as DataInspector, Y as DecryptClickContext, Z as Button, $ as Spinner, a0 as Lock, a1 as CollapsibleRoot, a2 as CollapsibleTrigger, a3 as CollapsibleContent, M as cva, a4 as RESERVED_ATTRIBUTE_KEY_PREFIX, a5 as ContextCardProvider, h as useToast, a6 as Skeleton, a7 as Yr, a8 as isEncryptedMarker, C as ChevronRight, a9 as TimestampTooltip, aa as formatDuration, ab as isHookLifecycleEventType, ac as isTerminalStepEventType, ad as isWaitEventType, ae as isStepEventType, af as _r, ag as RunClickContext, ah as StreamClickContext, ai as Collapsible, aj as isExpiredMarker, ak as isDoStreamStep, al as extractConversation, am as getEventDataRefFields, an as hasEncryptedFields, ao as useSidebarDataOptional, ap as isTerminalWorkflowRunStatus, aq as clsx, ar as useActiveSpan, as as useSidebarData, at as Tooltip, au as TooltipTrigger, av as IconButton, aw as TooltipContent, H as ChevronDown, ax as useRowWindow, ay as isSpanDimmedBySearch, az as ROW_HEIGHT_PX, aA as getSpanDurationMs, aB as isSpanErrored, aC as formatDurationPrecise, aD as TooltipProvider, aE as ActiveSpanProvider, aF as useReducedMotion, aG as searchSpans, aH as computeRootBounds, aI as computeTimeMarkers, aJ as clampViewportToRoot, aK as getHighResInMs, aL as scrollRowIntoView, aM as TIMELINE_PADDING_PX, aN as Minimap, aO as Timeline, aP as TimelineHeader, aQ as wheelZoomScaleFactor, aR as wheelDeltaToPixels, aS as SidebarDataProvider, aT as fetchHook, l as fetchEvents, aU as hydrateResourceIOAsync, J as fetchRun, aV as fetchStep, aW as hydrateResourceIO, aX as fetchStreams, aY as Slot, I as useComposedRefs, aZ as Slottable, e as cn$1, a_ as buttonVariants, a$ as fetchEvent, b0 as fetchEventsByCorrelationId, b1 as isEncryptedData, b2 as hydrateData, b3 as getWebRevivers, T as Tooltip$1, a as TooltipTrigger$1, b as TooltipContent$1, b4 as LIVE_UPDATE_INTERVAL_MS$1, u as useServerConfig, b5 as getEncryptionKeyForRun, t as toast, L as LoaderCircle, b6 as StreamViewer } from "./mermaid-3ZIDBTTL-C_EWPx9a.js";
-import { A as ArrowUpRight } from "./arrow-up-right-Dv3gGqIf.js";
-import { decrypt, importKey } from "./encryption-CLVP4klT.js";
-import "./index-STTN0-2V.js";
+import { r as reactExports, j as jsxRuntimeExports, o as reactDomExports, D as ReactDOM, d as useNavigate, e as useSearchParams, c as Link, w as withComponentProps, G as useParams } from "./index-PFjW8YjQ.js";
+import { C as CircleAlert, O as parseStepName, B as parseWorkflowName, Q as ErrorCard, U as format, Z as Zap, S as Send, R as ResolveHookModal, q as ChevronUp, X, N as ErrorBoundary, V as Circle, u as unwrapOrThrow, W as WorkflowWebAPIError, I as unwrapServerActionResult, 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, n as hideOthers, o as ReactRemoveScroll, a2 as useFocusGuards, a3 as LAYOUT, a4 as wakeUpRun, l as resumeHook, A as Alert, c as AlertTitle, g as getErrorTitle, d as AlertDescription, e as getErrorMessage, a as Skeleton$1, a5 as RunActionsButtons, F as StatusBadge, h 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-tTf4FHzV.js";
+import { c as createLucideIcon, X as cn, Y as CopyableDataBlock, Z as CollapsibleRoot, $ as CollapsibleTrigger, a0 as CollapsibleContent, a1 as CopyButton, N as cva, a2 as RESERVED_ATTRIBUTE_KEY_PREFIX, a3 as Spinner, a4 as ContextCardProvider, h as useToast, a5 as Skeleton, a6 as DecryptClickContext, a7 as Yr, a8 as isEncryptedMarker, m as ChevronRight, a9 as TimestampTooltip, aa as formatDuration, C as Check, l as Copy, ab as DataInspector, ac as isHookLifecycleEventType, ad as isTerminalStepEventType, ae as isWaitEventType, af as isStepEventType, ag as _r, ah as RunClickContext, ai as StreamClickContext, aj as Collapsible, ak as isExpiredMarker, al as isDoStreamStep, am as extractConversation, an as EncryptedDataBlock, ao as getEventDataRefFields, ap as hasEncryptedFields, aq as useSidebarDataOptional, ar as isTerminalWorkflowRunStatus, as as clsx, at as useActiveSpan, au as useSidebarData, av as Tooltip, aw as TooltipTrigger, ax as IconButton, ay as TooltipContent, J as ChevronDown, az as useRowWindow, aA as isSpanDimmedBySearch, aB as ROW_HEIGHT_PX, aC as getSpanDurationMs, aD as isSpanErrored, aE as formatDurationPrecise, aF as TooltipProvider, aG as ActiveSpanProvider, aH as useReducedMotion, aI as searchSpans, aJ as computeRootBounds, aK as computeTimeMarkers, aL as clampViewportToRoot, aM as getHighResInMs, aN as scrollRowIntoView, aO as TIMELINE_PADDING_PX, aP as Minimap, aQ as Timeline, aR as TimelineHeader, aS as wheelZoomScaleFactor, aT as wheelDeltaToPixels, aU as SidebarDataProvider, aV as fetchHook, n as fetchEvents, aW as hydrateResourceIOAsync, M as fetchRun, aX as fetchStep, aY as hydrateResourceIO, aZ as fetchStreams, a_ as apiBase, a$ as Slot, L as useComposedRefs, b0 as Slottable, e as cn$1, b1 as buttonVariants, b2 as fetchEvent, b3 as fetchEventsByCorrelationId, b4 as isEncryptedData, b5 as hydrateData, b6 as decrypt, b7 as deriveRunPayloadKeys, b8 as getWebRevivers, T as Tooltip$1, a as TooltipTrigger$1, b as TooltipContent$1, b9 as LIVE_UPDATE_INTERVAL_MS$1, u as useServerConfig, ba as getEncryptionKeyForRun, t as toast, bb as StreamViewerSkeleton, bc as Lock, bd as StreamViewer } from "./mermaid-3ZIDBTTL-xYKZZytQ.js";
+import { A as ArrowUpRight } from "./arrow-up-right-BRTGGI7c.js";
 /**
  * @license lucide-react v0.575.0 - ISC
  *
@@ -105,27 +103,6 @@ function looksLikeWorkflowIdSearchInput(query) {
   }
   return /\d/.test(trimmed);
 }
-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" }) })] }) });
-}
 const ELLIPSIS = "…";
 const MIN_START = 3;
 const MIN_END = 3;
@@ -406,29 +383,6 @@ function MiddleTruncate({ value, className, onCopy: onCopyProp, ...props }) {
   }, [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 })] });
 }
-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 isReservedAttributeKey(key) {
   return key.startsWith(RESERVED_ATTRIBUTE_KEY_PREFIX);
 }
@@ -2100,6 +2054,8 @@ const attributeToDisplayFn = {
   receivedCount: (value) => String(value),
   lastReceivedAt: localMillisecondTimeOrNull,
   disposedAt: localMillisecondTimeOrNull,
+  // Internal resume plumbing — not surfaced in the UI
+  resumeContext: (_value) => null,
   // Event details
   eventType: (value) => String(value),
   correlationId: (value) => String(value),
@@ -2205,7 +2161,11 @@ const attributeToDisplayFn = {
     if (typeof value !== "string" || value.length === 0)
       return null;
     return String(value);
-  }
+  },
+  // Internal encryption plumbing: the run's X25519 public key, used by
+  // cross-run writers to seal payloads to this run. Not actionable for users
+  // and not secret — hidden rather than rendered as 44 opaque base64 chars.
+  encryptionPublicKey: (_value) => null
 };
 const resolvableAttributes = [
   "input",
@@ -3329,15 +3289,14 @@ function NewTraceViewerContent({ trace, onLoadMore, hasMore, isLoadingMore }) {
   }, [animateTo, clampToRoot]);
   const ZOOM_FACTOR = 0.5;
   const zoomBy = reactExports.useCallback((factor) => {
-    setViewport((prev) => {
-      const center = (prev.start + prev.end) / 2;
-      const newDuration = Math.max(MIN_VIEWPORT_MS, (prev.end - prev.start) * factor);
-      return clampToRoot({
-        start: center - newDuration / 2,
-        end: center + newDuration / 2
-      });
-    });
-  }, [setViewport, clampToRoot]);
+    const { start, end } = viewportRef.current;
+    const center = (start + end) / 2;
+    const newDuration = Math.max(MIN_VIEWPORT_MS, (end - start) * factor);
+    animateTo(clampToRoot({
+      start: center - newDuration / 2,
+      end: center + newDuration / 2
+    }));
+  }, [animateTo, clampToRoot]);
   const zoomIn = reactExports.useCallback(() => zoomBy(ZOOM_FACTOR), [zoomBy]);
   const zoomOut = reactExports.useCallback(() => zoomBy(1 / ZOOM_FACTOR), [zoomBy]);
   const isAtMinZoom = viewDuration >= root.duration;
@@ -3832,7 +3791,7 @@ async function readStream(_env, streamId, runId, signal, cursor) {
     if (cursor) {
       params.set("cursor", cursor);
     }
-    const url = `/api/stream/${encodeURIComponent(streamId)}?${params.toString()}`;
+    const url = `${apiBase()}/api/stream/${encodeURIComponent(streamId)}?${params.toString()}`;
     const response = await fetch(url, { signal });
     if (!response.ok) {
       const errorData = await response.json().catch(() => null);
@@ -5171,6 +5130,9 @@ function detectEncoding(data) {
 function useStreamReader(env, streamId, runId, encryptionKey, runStatus) {
   const [chunks, setChunks] = reactExports.useState([]);
   const [isLive, setIsLive] = reactExports.useState(false);
+  const [isInitialLoading, setIsInitialLoading] = reactExports.useState(
+    Boolean(streamId && runId)
+  );
   const [error, setError] = reactExports.useState(null);
   const abortControllerRef = reactExports.useRef(null);
   const chunkIdRef = reactExports.useRef(0);
@@ -5199,9 +5161,8 @@ function useStreamReader(env, streamId, runId, encryptionKey, runStatus) {
           if (!cryptoKey) {
             return { encrypted: true };
           }
-          const payload = frameData.slice(4);
           hydrated = hydrateData(
-            await decrypt(cryptoKey, payload),
+            await decrypt(frameData, cryptoKey),
             revivers
           );
         } else {
@@ -5218,6 +5179,8 @@ function useStreamReader(env, streamId, runId, encryptionKey, runStatus) {
   reactExports.useEffect(() => {
     setChunks([]);
     setError(null);
+    setIsLive(false);
+    setIsInitialLoading(Boolean(streamId && runId));
     chunkIdRef.current = 0;
     frameCountRef.current = 0;
     serverCursorRef.current = null;
@@ -5226,13 +5189,12 @@ function useStreamReader(env, streamId, runId, encryptionKey, runStatus) {
       pollTimerRef.current = null;
     }
     if (!streamId || !runId) {
-      setIsLive(false);
+      setIsInitialLoading(false);
       return;
     }
     let mounted = true;
     const abortController = new AbortController();
     abortControllerRef.current = abortController;
-    setIsLive(true);
     const revivers = getWebRevivers();
     const parseLegacyLine = (line) => {
       const chunkId = chunkIdRef.current++;
@@ -5354,13 +5316,14 @@ function useStreamReader(env, streamId, runId, encryptionKey, runStatus) {
     };
     const readStreamData = async () => {
       try {
-        const cryptoKey = encryptionKey ? await importKey(encryptionKey) : void 0;
+        const cryptoKey = encryptionKey ? await deriveRunPayloadKeys(encryptionKey) : void 0;
         const initialChunks = [];
         const result = await fetchAndParse(initialChunks, cryptoKey);
         if (result.encrypted) {
           if (mounted) {
             setError("This stream is encrypted. Click Decrypt to view.");
             setIsLive(false);
+            setIsInitialLoading(false);
           }
           return;
         }
@@ -5368,11 +5331,13 @@ function useStreamReader(env, streamId, runId, encryptionKey, runStatus) {
         serverCursorRef.current = result.cursor;
         if (!mounted || abortController.signal.aborted) return;
         setChunks(initialChunks);
+        setIsInitialLoading(false);
         if (result.done) {
           setIsLive(false);
           return;
         }
         if (isRunActive(runStatusRef.current)) {
+          setIsLive(true);
           const poll = async () => {
             if (!mounted || abortController.signal.aborted) return;
             try {
@@ -5410,6 +5375,7 @@ function useStreamReader(env, streamId, runId, encryptionKey, runStatus) {
         if (mounted) {
           setError(err instanceof Error ? err.message : String(err));
           setIsLive(false);
+          setIsInitialLoading(false);
         }
       }
     };
@@ -5430,7 +5396,7 @@ function useStreamReader(env, streamId, runId, encryptionKey, runStatus) {
       setIsLive(false);
     }
   }, [runStatus]);
-  return { chunks, isLive, error };
+  return { chunks, isLive, isInitialLoading, error };
 }
 function LiveStatus({ hasError, errorMessage }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip$1, { children: [
@@ -5641,6 +5607,7 @@ function RunDetailView({
   const {
     chunks: streamChunks,
     isLive: streamIsLive,
+    isInitialLoading: streamIsInitialLoading,
     error: streamError
   } = useStreamReader(env, selectedStreamId, runId, encryptionKey, run.status);
   const handleCancelClick = () => {
@@ -5855,115 +5822,54 @@ function RunDetailView({
                 onExactIdSearch: searchByExactId
               }
             ) }) }) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "streams", className: "mt-0 flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBoundary, { title: "Failed to load stream data", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "h-full flex gap-4", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                "div",
-                {
-                  className: "w-64 flex-shrink-0 border rounded-lg overflow-hidden",
-                  style: {
-                    borderColor: "var(--ds-gray-300)",
-                    backgroundColor: "var(--ds-background-100)"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                      "div",
-                      {
-                        className: "px-3 py-2 border-b text-xs font-medium",
-                        style: {
-                          borderColor: "var(--ds-gray-300)",
-                          color: "var(--ds-gray-900)"
-                        },
-                        children: [
-                          "Streams (",
-                          streams.length,
-                          ")"
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "overflow-auto max-h-[calc(100vh-400px)]", children: streamsLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "h-4 w-4 animate-spin text-muted-foreground" }) }) : streamsError ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 text-xs text-destructive", children: streamsError.message }) : streams.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      "div",
-                      {
-                        className: "p-4 text-xs",
-                        style: { color: "var(--ds-gray-600)" },
-                        children: "No streams found for this run"
-                      }
-                    ) : streams.map((streamId) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: () => setSelectedStreamId(streamId),
-                        className: "w-full text-left px-3 py-2 text-xs font-mono truncate hover:bg-accent transition-colors",
-                        style: {
-                          backgroundColor: selectedStreamId === streamId ? "var(--ds-gray-200)" : "transparent",
-                          color: "var(--ds-gray-1000)"
-                        },
-                        title: streamId,
-                        children: streamId
-                      },
-                      streamId
-                    )) })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 min-w-0", children: selectedStreamId ? (streamError == null ? void 0 : streamError.includes("encrypted")) && !encryptionKey ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                "div",
-                {
-                  className: "h-full flex flex-col items-center justify-center gap-3 rounded-lg border p-4",
-                  style: {
-                    borderColor: "var(--ds-gray-300)",
-                    backgroundColor: "var(--ds-gray-100)"
+            /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "streams", className: "mt-0 flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBoundary, { title: "Failed to load stream data", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative -mx-6 flex h-full min-h-0 overflow-hidden border-t border-gray-alpha-400 bg-background-100", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex w-[340px] shrink-0 flex-col border-r border-gray-alpha-400 bg-background-100", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "div",
+                  {
+                    "aria-hidden": "true",
+                    className: "h-10 min-h-10 border-b border-gray-alpha-400"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-h-0 flex-1 divide-y divide-gray-400 overflow-y-auto", children: streamsLoading ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col divide-y divide-gray-400", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-10 items-center pl-4 pr-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton$1, { className: "h-3.5 w-24" }) }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-10 items-center pl-4 pr-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton$1, { className: "h-3.5 w-32" }) }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-10 items-center pl-4 pr-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton$1, { className: "h-3.5 w-20" }) })
+                ] }) : streamsError ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4 py-2 text-label-12 text-red-900", children: streamsError.message }) : streams.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-10 items-center px-4 text-label-12 text-gray-900", children: "No streams found for this run" }) : streams.map((streamId) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setSelectedStreamId(streamId),
+                    className: `flex h-10 w-full min-w-0 items-center truncate pl-4 pr-2 text-left text-label-14 transition-colors ${selectedStreamId === streamId ? "bg-gray-100 text-gray-1000 hover:bg-gray-200 active:bg-gray-200" : "bg-transparent text-gray-900 hover:bg-gray-100 hover:text-gray-1000 focus-visible:bg-gray-100 focus-visible:text-gray-1000"}`,
+                    title: streamId,
+                    children: streamId
                   },
-                  children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      Lock,
-                      {
-                        className: "h-6 w-6",
-                        style: { color: "var(--ds-gray-700)" }
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      "div",
-                      {
-                        className: "text-sm",
-                        style: { color: "var(--ds-gray-900)" },
-                        children: "This stream is encrypted."
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      DecryptButton,
-                      {
-                        onClick: handleDecrypt,
-                        loading: isDecrypting
-                      }
-                    )
-                  ]
-                }
-              ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  streamId
+                )) })
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex min-w-0 flex-1 flex-col overflow-hidden bg-background-100", children: streamsLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(StreamViewerSkeleton, {}) }) : selectedStreamId ? (streamError == null ? void 0 : streamError.includes("encrypted")) && !encryptionKey ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-full items-center justify-center p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center gap-3 text-center", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Lock, { className: "h-8 w-8 text-gray-700" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-label-14 font-medium text-gray-1000", children: "Encrypted Stream" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-label-12 text-gray-900", children: "Decrypt this stream to view its chunks." })
+                ] }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  DecryptButton,
+                  {
+                    onClick: handleDecrypt,
+                    loading: isDecrypting
+                  }
+                )
+              ] }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                 StreamViewer,
                 {
                   streamId: selectedStreamId,
                   chunks: streamChunks,
                   isLive: streamIsLive,
+                  isLoading: streamIsInitialLoading,
                   error: (streamError == null ? void 0 : streamError.includes("encrypted")) ? null : streamError
                 }
-              ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "div",
-                {
-                  className: "h-full flex items-center justify-center rounded-lg border",
-                  style: {
-                    borderColor: "var(--ds-gray-300)",
-                    backgroundColor: "var(--ds-gray-100)"
-                  },
-                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    "div",
-                    {
-                      className: "text-sm",
-                      style: { color: "var(--ds-gray-600)" },
-                      children: streams.length > 0 ? "Select a stream to view its data" : "No streams available"
-                    }
-                  )
-                }
-              ) })
+              ) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-label-14 text-gray-600", children: streams.length > 0 ? "Select a stream to view its data" : "No streams available" }) }) })
             ] }) }) }),
             false
           ]