@workflow/web-shared 4.1.0-beta.64 → 4.1.0-beta.66

package/src/components/sidebar/attribute-panel.tsx

@@ -6,10 +6,11 @@ import type { ModelMessage } from 'ai';
 import { Lock } from 'lucide-react';
 import type { KeyboardEvent, ReactNode } from 'react';
 import { useCallback, useMemo, useState } from 'react';
-import { toast } from 'sonner';
+import { useToast } from '../../lib/toast';
 import { isEncryptedMarker } from '../../lib/hydration';
 import { extractConversation, isDoStreamStep } from '../../lib/utils';
 import { StreamClickContext } from '../ui/data-inspector';
+import { TimestampTooltip } from '../ui/timestamp-tooltip';
 import { ErrorCard } from '../ui/error-card';
 import {
   ErrorStackBlock,
@@ -336,6 +337,16 @@ const localMillisecondTimeOrNull = (value: unknown): string | null => {
   return formatLocalMillisecondTime(date);
 };
 
+const timestampWithTooltipOrNull = (value: unknown): ReactNode | null => {
+  const date = parseDateValue(value);
+  if (!date) return null;
+  return (
+    <TimestampTooltip date={date}>
+      <span>{formatLocalMillisecondTime(date)}</span>
+    </TimestampTooltip>
+  );
+};
+
 interface DisplayContext {
   stepName?: string;
 }
@@ -375,15 +386,14 @@ const attributeToDisplayFn: Record<
   projectId: (_value: unknown) => null,
   environment: (_value: unknown) => null,
   executionContext: (_value: unknown) => null,
-  // Dates
-  // TODO: relative time with tooltips for ISO times
-  createdAt: localMillisecondTimeOrNull,
-  startedAt: localMillisecondTimeOrNull,
-  updatedAt: localMillisecondTimeOrNull,
-  completedAt: localMillisecondTimeOrNull,
-  expiredAt: localMillisecondTimeOrNull,
-  retryAfter: localMillisecondTimeOrNull,
-  resumeAt: localMillisecondTimeOrNull,
+  // Dates — wrapped with TimestampTooltip showing UTC/local + relative time
+  createdAt: timestampWithTooltipOrNull,
+  startedAt: timestampWithTooltipOrNull,
+  updatedAt: timestampWithTooltipOrNull,
+  completedAt: timestampWithTooltipOrNull,
+  expiredAt: timestampWithTooltipOrNull,
+  retryAfter: timestampWithTooltipOrNull,
+  resumeAt: timestampWithTooltipOrNull,
   // Resolved attributes, won't actually use this function
   metadata: (value: unknown) => {
     if (!hasDisplayContent(value)) return null;
@@ -580,12 +590,6 @@ export const AttributeBlock = ({
     attribute === 'output' ||
     attribute === 'eventData';
   if (isLoading && isExpandableLoadingTarget) {
-    const label =
-      attribute === 'eventData'
-        ? 'Event Data'
-        : attribute === 'output'
-          ? 'Output'
-          : 'Input';
     return (
       <div
         className={`my-2 flex flex-col ${attribute === 'input' || attribute === 'output' ? 'gap-2 my-3.5' : 'gap-0'}`}
@@ -596,19 +600,7 @@ export const AttributeBlock = ({
         >
           {attribute}
         </span>
-        <DetailCard
-          summary={label}
-          summaryClassName="text-base py-2"
-          disabled
-        />
-        <div
-          className="overflow-x-auto rounded-md border p-3"
-          style={{ borderColor: 'var(--ds-gray-300)' }}
-        >
-          <Skeleton className="h-4 w-[38%]" />
-          <Skeleton className="mt-2 h-4 w-[88%]" />
-          <Skeleton className="mt-2 h-4 w-[72%]" />
-        </div>
+        <Skeleton className="h-9 w-full rounded-md" />
       </div>
     );
   }
@@ -674,6 +666,7 @@ export const AttributePanel = ({
   error,
   expiredAt,
   onStreamClick,
+  resource,
 }: {
   data: Record<string, unknown>;
   moduleSpecifier?: string;
@@ -682,7 +675,10 @@ export const AttributePanel = ({
   expiredAt?: string | Date;
   /** Callback when a stream reference is clicked */
   onStreamClick?: (streamId: string) => void;
+  /** Resource type of the selected span — used to show targeted loading skeletons. */
+  resource?: string;
 }) => {
+  const toast = useToast();
   // Extract workflowCoreVersion from executionContext for display
   const displayData = useMemo(() => {
     const result = { ...data };
@@ -705,9 +701,23 @@ export const AttributePanel = ({
   const basicAttributes = Object.keys(displayData)
     .filter((key) => !resolvableAttributes.includes(key))
     .sort(sortByAttributeOrder);
-  const resolvedAttributes = Object.keys(displayData)
-    .filter((key) => resolvableAttributes.includes(key))
-    .sort(sortByAttributeOrder);
+  const resolvedAttributes = useMemo(() => {
+    const present = Object.keys(displayData)
+      .filter((key) => resolvableAttributes.includes(key))
+      .sort(sortByAttributeOrder);
+
+    if (!isLoading) return present;
+
+    // During loading, ensure input/output appear so their skeletons render
+    // in the correct position (above the events section).
+    const loadingDefaults = ['input', 'output'];
+    for (const key of loadingDefaults) {
+      if (!present.includes(key)) {
+        present.push(key);
+      }
+    }
+    return present.sort(sortByAttributeOrder);
+  }, [displayData, isLoading]);
 
   // Filter out attributes that return null
   const visibleBasicAttributes = basicAttributes.filter((attribute) => {
@@ -784,7 +794,11 @@ export const AttributePanel = ({
                   ? displayValue
                   : String(displayValue ?? displayData.moduleSpecifier ?? '');
               const shouldCapitalizeLabel = attribute !== 'workflowCoreVersion';
-              const showDivider = index < orderedBasicAttributes.length - 1;
+              const showResumeAtSkeleton =
+                isLoading && resource === 'sleep' && !displayData.resumeAt;
+              const showDivider =
+                index < orderedBasicAttributes.length - 1 ||
+                showResumeAtSkeleton;
 
               return (
                 <div key={attribute} className="py-1">
@@ -834,6 +848,19 @@ export const AttributePanel = ({
                 </div>
               );
             })}
+            {isLoading && resource === 'sleep' && !displayData.resumeAt && (
+              <div className="py-1">
+                <div className="flex min-h-[32px] items-center justify-between gap-4 rounded-sm px-2.5 py-1">
+                  <span
+                    className="text-[14px] first-letter:uppercase"
+                    style={{ color: 'var(--ds-gray-700)' }}
+                  >
+                    resumeAt
+                  </span>
+                  <Skeleton className="h-4 w-[55%]" />
+                </div>
+              </div>
+            )}
           </div>
         )}
         {error ? (

package/src/components/sidebar/copyable-data-block.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Copy } from 'lucide-react';
-import { toast } from 'sonner';
+import { useToast } from '../../lib/toast';
 import { DataInspector } from '../ui/data-inspector';
 
 const serializeForClipboard = (value: unknown): string => {
@@ -21,6 +21,7 @@ const serializeForClipboard = (value: unknown): string => {
 };
 
 export function CopyableDataBlock({ data }: { data: unknown }) {
+  const toast = useToast();
   return (
     <div
       className="relative overflow-x-auto rounded-md border p-3 pt-9"

package/src/components/sidebar/entity-detail-panel.tsx

@@ -2,10 +2,11 @@
 
 import type { Event, Hook, Step, WorkflowRun } from '@workflow/world';
 import clsx from 'clsx';
-import { Lock, Send, Unlock, Zap } from 'lucide-react';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { toast } from 'sonner';
+import { Send, Zap } from 'lucide-react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useToast } from '../../lib/toast';
 import { isEncryptedMarker } from '../../lib/hydration';
+import { DecryptButton } from '../ui/decrypt-button';
 import { AttributePanel } from './attribute-panel';
 import { EventsList } from './events-list';
 import { ResolveHookModal } from './resolve-hook-modal';
@@ -64,6 +65,7 @@ export function EntityDetailPanel({
   onResolveHook,
   encryptionKey,
   onDecrypt,
+  isDecrypting = false,
   selectedSpan,
 }: {
   run: WorkflowRun;
@@ -97,9 +99,12 @@ export function EntityDetailPanel({
   encryptionKey?: Uint8Array;
   /** Callback to initiate decryption of encrypted run data */
   onDecrypt?: () => void;
+  /** Whether the encryption key is currently being fetched */
+  isDecrypting?: boolean;
   /** Info about the currently selected span from the trace viewer */
   selectedSpan: SelectedSpanInfo | null;
 }): React.JSX.Element | null {
+  const toast = useToast();
   const [stoppingSleep, setStoppingSleep] = useState(false);
   const [showResolveHookModal, setShowResolveHookModal] = useState(false);
   const [resolvingHook, setResolvingHook] = useState(false);
@@ -140,20 +145,26 @@ export function EntityDetailPanel({
     return { resource: undefined, resourceId: undefined, runId: undefined };
   }, [selectedSpan, data]);
 
-  // Notify parent when span selection changes
+  // Notify parent when span selection changes.
+  // Use a ref for the callback so the effect only fires when the actual
+  // selection values change, not when the callback identity changes due to
+  // parent re-renders from polling.
+  const onSpanSelectRef = useRef(onSpanSelect);
+  onSpanSelectRef.current = onSpanSelect;
+
   useEffect(() => {
     if (
       resource &&
       resourceId &&
       ['run', 'step', 'hook', 'sleep'].includes(resource)
     ) {
-      onSpanSelect({
+      onSpanSelectRef.current({
         resource: resource as 'run' | 'step' | 'hook' | 'sleep',
         resourceId,
         runId,
       });
     }
-  }, [resource, resourceId, runId, onSpanSelect]);
+  }, [resource, resourceId, runId]);
 
   // Check if this sleep is still pending and can be woken up
   const canWakeUp = useMemo(() => {
@@ -381,31 +392,11 @@ export function EntityDetailPanel({
             </p>
           </div>
           {(hasEncryptedFields || encryptionKey) && onDecrypt && (
-            <button
-              type="button"
+            <DecryptButton
+              decrypted={!!encryptionKey}
+              loading={isDecrypting}
               onClick={onDecrypt}
-              disabled={!!encryptionKey}
-              className="inline-flex items-center gap-1 rounded-md border px-2 py-1 text-xs font-medium transition-colors flex-shrink-0"
-              style={{
-                borderColor: encryptionKey
-                  ? 'var(--ds-green-400)'
-                  : 'var(--ds-gray-300)',
-                color: encryptionKey
-                  ? 'var(--ds-green-900)'
-                  : 'var(--ds-gray-900)',
-                backgroundColor: encryptionKey
-                  ? 'var(--ds-green-100)'
-                  : 'var(--ds-background-100)',
-                cursor: encryptionKey ? 'default' : 'pointer',
-              }}
-            >
-              {encryptionKey ? (
-                <Unlock className="h-3 w-3" />
-              ) : (
-                <Lock className="h-3 w-3" />
-              )}
-              {encryptionKey ? 'Decrypted' : 'Decrypt'}
-            </button>
+            />
           )}
         </div>
       </div>
@@ -490,6 +481,7 @@ export function EntityDetailPanel({
               isLoading={loading}
               error={error ?? undefined}
               onStreamClick={onStreamClick}
+              resource={resource}
             />
           </section>
 

package/src/components/sidebar/events-list.tsx

@@ -2,6 +2,7 @@
 
 import type { Event } from '@workflow/world';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ErrorCard } from '../ui/error-card';
 import {
   ErrorStackBlock,
   isStructuredErrorWithStack,
@@ -23,10 +24,14 @@ const DATA_EVENT_TYPES = new Set([
   'step_created',
   'step_completed',
   'step_failed',
+  'step_retrying',
   'hook_created',
   'hook_received',
   'run_created',
   'run_completed',
+  'run_failed',
+  'wait_created',
+  'wait_completed',
 ]);
 
 /**
@@ -175,15 +180,11 @@ function EventItem({
 
       {/* Error state */}
       {loadError && (
-        <div
-          className="mt-2 rounded-md border p-2 text-sm"
-          style={{
-            borderColor: 'var(--ds-red-300)',
-            color: 'var(--ds-red-700)',
-          }}
-        >
-          {loadError}
-        </div>
+        <ErrorCard
+          title="Failed to load event data"
+          details={loadError}
+          className="mt-2"
+        />
       )}
 
       {/* Event data */}
@@ -269,10 +270,10 @@ export function EventsList({
         Events {!isLoading && `(${sortedEvents.length})`}
       </h3>
       {isLoading ? (
-        <div className="flex flex-col gap-3">
-          <Skeleton className="h-[48px] w-full rounded-lg border" />
-          <Skeleton className="h-[48px] w-full rounded-lg border" />
-          <Skeleton className="h-[48px] w-full rounded-lg border" />
+        <div className="flex flex-col gap-4">
+          <Skeleton className="h-9 w-full rounded-md" />
+          <Skeleton className="h-9 w-full rounded-md" />
+          <Skeleton className="h-9 w-full rounded-md" />
         </div>
       ) : null}
       {!isLoading && !error && sortedEvents.length === 0 && (

package/src/components/stream-viewer.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef } from 'react';
+import { Virtuoso, type VirtuosoHandle } from 'react-virtuoso';
 import { DataInspector } from './ui/data-inspector';
 import { Skeleton } from './ui/skeleton';
 
@@ -46,6 +47,8 @@ interface StreamViewerProps {
   error?: string | null;
   /** True while the initial stream connection is being established */
   isLoading?: boolean;
+  /** Called when the user scrolls near the bottom, for triggering pagination */
+  onScrollEnd?: () => void;
 }
 
 // ──────────────────────────────────────────────────────────────────────────
@@ -114,45 +117,41 @@ function StreamSkeleton() {
  * of complex types (Map, Set, Date, custom classes, etc.).
  */
 export function StreamViewer({
-  streamId,
+  streamId: _streamId,
   chunks,
   isLive,
   error,
   isLoading,
+  onScrollEnd,
 }: StreamViewerProps) {
-  const [hasMoreBelow, setHasMoreBelow] = useState(false);
-  const scrollRef = useRef<HTMLDivElement>(null);
-
-  const checkScrollPosition = useCallback(() => {
-    if (scrollRef.current) {
-      const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
-      const isAtBottom = scrollHeight - scrollTop - clientHeight < 10;
-      setHasMoreBelow(!isAtBottom && scrollHeight > clientHeight);
-    }
-  }, []);
+  const virtuosoRef = useRef<VirtuosoHandle>(null);
+  const prevChunkCountRef = useRef(0);
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: chunks.length triggers scroll on new chunks
+  // Auto-scroll to bottom when new chunks arrive (live streaming)
   useEffect(() => {
-    if (scrollRef.current) {
-      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    if (chunks.length > prevChunkCountRef.current && chunks.length > 0) {
+      virtuosoRef.current?.scrollToIndex({
+        index: chunks.length - 1,
+        align: 'end',
+      });
     }
-    checkScrollPosition();
-  }, [chunks.length, checkScrollPosition]);
+    prevChunkCountRef.current = chunks.length;
+  }, [chunks.length]);
 
   // Show skeleton when loading and no chunks have arrived yet
   if (isLoading && chunks.length === 0) {
     return (
-      <div className="flex flex-col h-full pb-4">
+      <div className="flex flex-col h-full">
         <StreamSkeleton />
       </div>
     );
   }
 
   return (
-    <div className="flex flex-col h-full pb-4">
+    <div className="flex flex-col h-full">
       {/* Live indicator */}
       {isLive && (
-        <div className="flex items-center gap-1.5 mb-3 px-1">
+        <div className="flex items-center gap-1.5 mb-2 px-1">
           <span
             className="inline-block w-2 h-2 rounded-full"
             style={{ backgroundColor: 'var(--ds-green-600)' }}
@@ -182,52 +181,42 @@ export function StreamViewer({
       )}
 
       {/* Content */}
-      <div className="relative flex-1 min-h-[200px]">
-        <div
-          ref={scrollRef}
-          onScroll={checkScrollPosition}
-          className="absolute inset-0 overflow-auto flex flex-col gap-2"
-        >
-          {error ? (
-            <div
-              className="text-[11px] rounded-md border p-3"
-              style={{
-                borderColor: 'var(--ds-red-300)',
-                backgroundColor: 'var(--ds-red-100)',
-                color: 'var(--ds-red-700)',
-              }}
-            >
-              <div>Error reading stream:</div>
-              <div>{error}</div>
-            </div>
-          ) : chunks.length === 0 ? (
-            <div
-              className="text-[11px] rounded-md border p-3"
-              style={{
-                borderColor: 'var(--ds-gray-300)',
-                backgroundColor: 'var(--ds-gray-100)',
-                color: 'var(--ds-gray-600)',
-              }}
-            >
-              {isLive ? 'Waiting for stream data...' : 'Stream is empty'}
-            </div>
-          ) : (
-            chunks.map((chunk, index) => (
-              <ChunkRow
-                key={`${streamId}-chunk-${chunk.id}`}
-                chunk={chunk}
-                index={index}
-              />
-            ))
-          )}
-        </div>
-        {hasMoreBelow && (
+      <div className="flex-1 min-h-0">
+        {error ? (
+          <div
+            className="text-[11px] rounded-md border p-3"
+            style={{
+              borderColor: 'var(--ds-red-300)',
+              backgroundColor: 'var(--ds-red-100)',
+              color: 'var(--ds-red-700)',
+            }}
+          >
+            <div>Error reading stream:</div>
+            <div>{error}</div>
+          </div>
+        ) : chunks.length === 0 ? (
           <div
-            className="absolute bottom-0 left-0 right-0 h-8 pointer-events-none"
+            className="text-[11px] rounded-md border p-3"
             style={{
-              background:
-                'linear-gradient(to top, var(--ds-background-100), transparent)',
+              borderColor: 'var(--ds-gray-300)',
+              backgroundColor: 'var(--ds-gray-100)',
+              color: 'var(--ds-gray-600)',
             }}
+          >
+            {isLive ? 'Waiting for stream data...' : 'Stream is empty'}
+          </div>
+        ) : (
+          <Virtuoso
+            ref={virtuosoRef}
+            totalCount={chunks.length}
+            overscan={10}
+            endReached={() => onScrollEnd?.()}
+            itemContent={(index) => (
+              <div style={{ paddingBottom: 8 }}>
+                <ChunkRow chunk={chunks[index]} index={index} />
+              </div>
+            )}
+            style={{ flex: 1, minHeight: 0 }}
           />
         )}
       </div>

package/src/components/trace-viewer/components/span-segments.ts

@@ -341,6 +341,26 @@ function computeRunSegments(node: SpanNode): Segment[] {
 
   if (duration <= 0) return segments;
 
+  // V1 runs (specVersion 1) don't emit run lifecycle events (run_created,
+  // run_started, run_completed). Detect this by checking for the absence of
+  // run_created — it's always the first event for v2 runs and is always
+  // loaded in the first page, so its absence reliably signals a v1 run.
+  // For v1, fall back to the run entity's status from span.attributes.data.
+  const hasRunCreated = events.some((e) => e.event.name === 'run_created');
+
+  if (!hasRunCreated) {
+    const runData = node.span.attributes?.data as
+      | Record<string, unknown>
+      | undefined;
+    const runStatus = runData?.status as string | undefined;
+    return computeV1RunSegments(
+      startTime,
+      duration,
+      activeStartTime,
+      runStatus
+    );
+  }
+
   const failedEvent = events.find((e) => e.event.name === 'run_failed');
   const completedEvent = events.find((e) => e.event.name === 'run_completed');
 
@@ -396,7 +416,56 @@ function computeRunSegments(node: SpanNode): Segment[] {
       status: 'succeeded',
     });
   } else {
-    // Running to completion
+    // Running to completion (or terminal events haven't loaded yet)
+    segments.push({
+      startFraction: cursor,
+      endFraction: 1,
+      status: 'running',
+    });
+  }
+
+  return segments;
+}
+
+/**
+ * Compute segments for a v1 run using only the run entity's status and
+ * activeStartTime (derived from run.startedAt). V1 runs have no run
+ * lifecycle events, so we infer the visual segments from entity fields.
+ */
+function computeV1RunSegments(
+  startTime: number,
+  duration: number,
+  activeStartTime: number | undefined,
+  runStatus: string | undefined
+): Segment[] {
+  const segments: Segment[] = [];
+
+  let cursor = 0;
+  if (activeStartTime && activeStartTime > startTime) {
+    const queuedFraction = timeToFraction(activeStartTime, startTime, duration);
+    if (queuedFraction > 0.001) {
+      segments.push({
+        startFraction: 0,
+        endFraction: queuedFraction,
+        status: 'queued',
+      });
+      cursor = queuedFraction;
+    }
+  }
+
+  if (runStatus === 'failed') {
+    segments.push({
+      startFraction: cursor,
+      endFraction: 1,
+      status: 'failed',
+    });
+  } else if (runStatus === 'completed' || runStatus === 'cancelled') {
+    segments.push({
+      startFraction: cursor,
+      endFraction: 1,
+      status: 'succeeded',
+    });
+  } else {
     segments.push({
       startFraction: cursor,
       endFraction: 1,

package/src/components/ui/decrypt-button.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import { Spinner } from './spinner';
+
+const STYLES = `.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}`;
+
+interface DecryptButtonProps {
+  /** Whether an encryption key has been obtained (decryption is active). */
+  decrypted?: boolean;
+  /** Whether the key is currently being fetched. */
+  loading?: boolean;
+  /** Called when the user clicks to initiate decryption. */
+  onClick?: () => void;
+}
+
+/**
+ * Decrypt/Decrypted button using Geist secondary style.
+ * Three states: idle (secondary gray), decrypting (spinner), decrypted (green success).
+ */
+export function DecryptButton({
+  decrypted = false,
+  loading = false,
+  onClick,
+}: DecryptButtonProps) {
+  return (
+    <>
+      <style dangerouslySetInnerHTML={{ __html: STYLES }} />
+      <button
+        type="button"
+        onClick={decrypted ? undefined : onClick}
+        disabled={decrypted || loading}
+        className={`wf-decrypt-btn ${decrypted ? 'wf-decrypt-done' : 'wf-decrypt-idle'}`}
+      >
+        {loading ? (
+          <Spinner size={14} />
+        ) : decrypted ? (
+          <svg
+            width={14}
+            height={14}
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+            <path d="M7 11V7a5 5 0 0 1 9.9-1" />
+          </svg>
+        ) : (
+          <svg
+            width={14}
+            height={14}
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+            <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+          </svg>
+        )}
+        {loading ? 'Decrypting…' : decrypted ? 'Decrypted' : 'Decrypt'}
+      </button>
+    </>
+  );
+}