@workflow/web-shared 4.1.0-beta.65 → 4.1.0-beta.67

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

@@ -6,8 +6,8 @@ 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 { isEncryptedMarker } from '../../lib/hydration';
+import { isEncryptedMarker, isExpiredMarker } from '../../lib/hydration';
+import { useToast } from '../../lib/toast';
 import { extractConversation, isDoStreamStep } from '../../lib/utils';
 import { StreamClickContext } from '../ui/data-inspector';
 import { ErrorCard } from '../ui/error-card';
@@ -16,6 +16,7 @@ import {
   isStructuredErrorWithStack,
 } from '../ui/error-stack-block';
 import { Skeleton } from '../ui/skeleton';
+import { TimestampTooltip } from '../ui/timestamp-tooltip';
 import { ConversationView } from './conversation-view';
 import { CopyableDataBlock } from './copyable-data-block';
 import { DetailCard } from './detail-card';
@@ -194,6 +195,24 @@ function EncryptedFieldBlock() {
   );
 }
 
+/**
+ * Inline display for an expired field — flat label indicating data is no longer available.
+ */
+function ExpiredFieldBlock() {
+  return (
+    <div
+      className="flex items-center gap-1.5 rounded-md border px-3 py-2 text-xs"
+      style={{
+        borderColor: 'var(--ds-gray-300)',
+        backgroundColor: 'var(--ds-gray-100)',
+        color: 'var(--ds-gray-700)',
+      }}
+    >
+      <span className="font-medium">Data expired</span>
+    </div>
+  );
+}
+
 function JsonBlock(value: unknown) {
   return <CopyableDataBlock data={value} />;
 }
@@ -336,6 +355,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,23 +404,24 @@ 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;
     if (isEncryptedMarker(value)) return <EncryptedFieldBlock />;
+    if (isExpiredMarker(value)) return <ExpiredFieldBlock />;
     return JsonBlock(value);
   },
   input: (value: unknown, context?: DisplayContext) => {
     if (isEncryptedMarker(value)) return <EncryptedFieldBlock />;
+    if (isExpiredMarker(value)) return <ExpiredFieldBlock />;
     // Check if input has args + closure vars structure
     if (value && typeof value === 'object' && 'args' in value) {
       const { args, closureVars, thisVal } = value as {
@@ -496,6 +526,7 @@ const attributeToDisplayFn: Record<
   output: (value: unknown) => {
     if (!hasDisplayContent(value)) return null;
     if (isEncryptedMarker(value)) return <EncryptedFieldBlock />;
+    if (isExpiredMarker(value)) return <ExpiredFieldBlock />;
     return (
       <DetailCard
         summary="Output"
@@ -508,6 +539,7 @@ const attributeToDisplayFn: Record<
   },
   error: (value: unknown) => {
     if (isEncryptedMarker(value)) return <EncryptedFieldBlock />;
+    if (isExpiredMarker(value)) return <ExpiredFieldBlock />;
     if (!hasDisplayContent(value)) return null;
 
     // If the error object has a `stack` field, render it as readable
@@ -536,6 +568,7 @@ const attributeToDisplayFn: Record<
   },
   eventData: (value: unknown) => {
     if (isEncryptedMarker(value)) return <EncryptedFieldBlock />;
+    if (isExpiredMarker(value)) return <ExpiredFieldBlock />;
     if (!hasDisplayContent(value)) return null;
     return <DetailCard summary="Event Data">{JsonBlock(value)}</DetailCard>;
   },
@@ -579,13 +612,7 @@ export const AttributeBlock = ({
     attribute === 'input' ||
     attribute === 'output' ||
     attribute === 'eventData';
-  if (isLoading && isExpandableLoadingTarget) {
-    const label =
-      attribute === 'eventData'
-        ? 'Event Data'
-        : attribute === 'output'
-          ? 'Output'
-          : 'Input';
+  if (isLoading && isExpandableLoadingTarget && !hasDisplayContent(value)) {
     return (
       <div
         className={`my-2 flex flex-col ${attribute === 'input' || attribute === 'output' ? 'gap-2 my-3.5' : 'gap-0'}`}
@@ -596,19 +623,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 +689,7 @@ export const AttributePanel = ({
   error,
   expiredAt,
   onStreamClick,
+  resource,
 }: {
   data: Record<string, unknown>;
   moduleSpecifier?: string;
@@ -682,7 +698,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 +724,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 +817,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 +871,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

@@ -3,8 +3,8 @@
 import type { Event, Hook, Step, WorkflowRun } from '@workflow/world';
 import clsx from 'clsx';
 import { Send, Zap } from 'lucide-react';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { toast } from 'sonner';
+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';
@@ -104,6 +104,7 @@ export function EntityDetailPanel({
   /** 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);
@@ -144,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(() => {
@@ -474,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,8 @@
 
 import type { Event } from '@workflow/world';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { isExpiredMarker } from '../../lib/hydration';
+import { ErrorCard } from '../ui/error-card';
 import {
   ErrorStackBlock,
   isStructuredErrorWithStack,
@@ -23,10 +25,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 +181,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 */}
@@ -196,6 +198,24 @@ function EventItem({
   );
 }
 
+/**
+ * Check if an eventData object has only expired marker values in its serialized
+ * sub-fields (result, input, output, metadata, payload). Non-serialized fields
+ * like `resumeAt` or `reason` are ignored.
+ */
+function hasOnlyExpiredFields(data: unknown): boolean {
+  if (data === null || typeof data !== 'object' || Array.isArray(data)) {
+    return false;
+  }
+  const record = data as Record<string, unknown>;
+  const serializedKeys = ['result', 'input', 'output', 'metadata', 'payload'];
+  const presentKeys = serializedKeys.filter((k) => k in record);
+  return (
+    presentKeys.length > 0 &&
+    presentKeys.every((k) => isExpiredMarker(record[k]))
+  );
+}
+
 /**
  * Renders event data, using ErrorStackBlock for error events that contain
  * a structured error with a stack trace, and CopyableDataBlock otherwise.
@@ -207,6 +227,24 @@ function EventDataBlock({
   eventType: string;
   data: unknown;
 }) {
+  // Expired data — show a simple message instead of the raw stub.
+  // Check both the top-level eventData and nested sub-fields (result, input, etc.)
+  // since the server stubs each ref field independently.
+  if (isExpiredMarker(data) || hasOnlyExpiredFields(data)) {
+    return (
+      <div
+        className="flex items-center gap-1.5 rounded-md border px-3 py-2 text-xs"
+        style={{
+          borderColor: 'var(--ds-gray-300)',
+          backgroundColor: 'var(--ds-gray-100)',
+          color: 'var(--ds-gray-700)',
+        }}
+      >
+        <span className="font-medium">Data expired</span>
+      </div>
+    );
+  }
+
   // For error events (step_failed, step_retrying), the eventData has the shape
   // { error: StructuredError, stack?: string, ... }. Check both the top-level
   // value and the nested `error` field for a stack trace.
@@ -269,10 +307,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/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/trace-viewer/util/timing.ts

@@ -41,6 +41,5 @@ export function formatWallClockTime(epochMs: number): string {
   const h = String(d.getHours()).padStart(2, '0');
   const m = String(d.getMinutes()).padStart(2, '0');
   const s = String(d.getSeconds()).padStart(2, '0');
-  const ms = String(d.getMilliseconds()).padStart(3, '0');
-  return `${h}:${m}:${s}.${ms}`;
+  return `${h}:${m}:${s}`;
 }

package/src/components/ui/error-stack-block.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { AlertCircle, Copy } from 'lucide-react';
-import { toast } from 'sonner';
+import { useToast } from '../../lib/toast';
 
 /**
  * Check whether `value` looks like a structured error object with a `stack`
@@ -28,6 +28,7 @@ export function ErrorStackBlock({
 }: {
   value: Record<string, unknown> & { stack: string };
 }) {
+  const toast = useToast();
   const stack = value.stack;
   const message = typeof value.message === 'string' ? value.message : undefined;
   const copyText = message ? `${message}\n\n${stack}` : stack;