@workflow/web-shared 5.0.0-beta.14 → 5.0.0-beta.16

package/src/components/new-trace-viewer/components/timeline.tsx

@@ -4,13 +4,14 @@ import { ArrowLeft, ArrowRight } from 'lucide-react';
 import type { CSSProperties, ReactNode } from 'react';
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { cn } from '../../../lib/utils';
-import type { Span } from '../types';
 import {
   formatDuration,
   formatDurationPrecise,
   getHighResInMs,
 } from '../../trace-viewer/util/timing';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../../ui/tooltip';
 import { isSpanDimmedBySearch, type SpanSearchResult } from '../search';
+import type { Span } from '../types';
 import type { Segment, SegmentStatus, TimeMarker } from '../utils';
 import {
   computeSpanGaps,
@@ -18,6 +19,7 @@ import {
   getResourceColor,
   getSpanDurationMs,
 } from '../utils';
+import styles from './timeline.module.css';
 import { ROW_HEIGHT_PX, useRowWindow } from './use-row-window';
 
 // ---------------------------------------------------------------------------
@@ -33,6 +35,7 @@ const SEGMENT_CLASSES: Record<SegmentStatus, string> = {
   retrying: 'bg-gray-400 border border-gray-500',
   waiting: 'bg-gray-400 border border-gray-500',
   running: 'bg-blue-200 border border-blue-500',
+  completed: 'bg-blue-200 border border-blue-500',
   failed: 'bg-red-200 border border-red-500',
   succeeded: 'bg-green-200 border border-green-500',
   sleeping: 'bg-gray-400 border border-gray-500',
@@ -44,6 +47,15 @@ const TIMELINE_INSET_STYLE: CSSProperties = {
   right: TIMELINE_PADDING_PX,
 };
 
+const ACTIVE_SEGMENT_STATUSES: ReadonlySet<SegmentStatus> = new Set([
+  'running',
+  'received',
+]);
+
+function RunningStripes(): ReactNode {
+  return <div aria-hidden className={styles.runningStripes} />;
+}
+
 // ---------------------------------------------------------------------------
 // Bar geometry
 // ---------------------------------------------------------------------------
@@ -222,25 +234,57 @@ function PlainBar({
   );
 }
 
+function LeadInConnector({
+  leftPct,
+  widthPct,
+  label,
+}: {
+  leftPct: number;
+  widthPct: number;
+  label: string | null;
+}): ReactNode {
+  return (
+    <div
+      className="absolute top-1/2 h-6 -translate-y-1/2"
+      style={{
+        left: `calc(${leftPct}% + 0.5px)`,
+        width: `calc(${widthPct}% - 1px)`,
+      }}
+    >
+      <div className="absolute left-0 top-1/2 h-4 w-px -translate-y-1/2 bg-gray-500" />
+      <div className="absolute inset-x-0 top-1/2 h-px -translate-y-1/2 bg-gray-500" />
+      {label ? <DurationLabel label={label} /> : null}
+    </div>
+  );
+}
+
 function SegmentBar({ segments }: { segments: VisibleSegment[] }): ReactNode {
   return (
     <div className="relative h-6 w-full">
       {segments.map((seg, i) => {
+        if (seg.status === 'queued') {
+          const leadInLabel = formatDurationPrecise(seg.fullDurationMs);
+          const showLeadInLabel =
+            seg.pixelWidth >= Math.max(40, leadInLabel.length * 6 + 12);
+          return (
+            <LeadInConnector
+              key={i}
+              leftPct={seg.leftPct}
+              widthPct={seg.widthPct}
+              label={showLeadInLabel ? leadInLabel : null}
+            />
+          );
+        }
+
         const label = formatDurationPrecise(seg.fullDurationMs);
         // Only render the label when there's enough room for it without clipping.
         const showLabel = seg.pixelWidth >= Math.max(40, label.length * 6 + 12);
-        // Beef up the queued segment when it's too narrow to read.
-        const isNarrowQueued = seg.status === 'queued' && seg.pixelWidth < 20;
-        const overrideBg = isNarrowQueued ? 'var(--ds-gray-400)' : undefined;
-        const overrideBorder = isNarrowQueued
-          ? 'var(--ds-gray-500)'
-          : undefined;
 
         return (
           <div
             key={i}
             className={cn(
-              'absolute h-full rounded-[0.25rem]',
+              'absolute h-full overflow-hidden rounded-[0.25rem]',
               SEGMENT_CLASSES[seg.status]
             )}
             style={{
@@ -248,10 +292,11 @@ function SegmentBar({ segments }: { segments: VisibleSegment[] }): ReactNode {
               left: `calc(${seg.leftPct}% + 0.5px)`,
               width: `calc(${seg.widthPct}% - 1px)`,
               minWidth: 1,
-              background: overrideBg,
-              borderColor: overrideBorder,
             }}
           >
+            {ACTIVE_SEGMENT_STATUSES.has(seg.status) ? (
+              <RunningStripes />
+            ) : null}
             {showLabel ? <DurationLabel label={label} /> : null}
           </div>
         );
@@ -260,6 +305,80 @@ function SegmentBar({ segments }: { segments: VisibleSegment[] }): ReactNode {
   );
 }
 
+// ---------------------------------------------------------------------------
+// Event markers (attr_set)
+// ---------------------------------------------------------------------------
+
+function formatMarkerTime(ms: number): string {
+  const date = new Date(ms);
+  return (
+    date.toLocaleTimeString('en-US', {
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+      hour12: false,
+    }) +
+    '.' +
+    date.getMilliseconds().toString().padStart(3, '0')
+  );
+}
+
+/**
+ * Diamond markers for `attr_set` events on a span's timeline row. Attribute
+ * changes are point-in-time events with no duration, so they don't get a
+ * status segment — instead they render as small teal diamonds at the moment
+ * the attributes were written.
+ */
+function AttrSetMarkers({
+  span,
+  viewStart,
+  viewDuration,
+}: {
+  span: Span;
+  viewStart: number;
+  viewDuration: number;
+}): ReactNode {
+  const markers = useMemo(
+    () => span.events.filter((e) => e.name === 'attr_set'),
+    [span.events]
+  );
+
+  if (markers.length === 0 || viewDuration <= 0) return null;
+
+  return (
+    <>
+      {markers.map((event, index) => {
+        const timeMs = getHighResInMs(event.timestamp);
+        const frac = (timeMs - viewStart) / viewDuration;
+        if (frac < 0 || frac > 1) return null;
+
+        return (
+          <Tooltip key={`attr-set-${index}`}>
+            <TooltipTrigger asChild>
+              <div
+                aria-label="Attributes set"
+                className="absolute top-1/2 z-10 flex h-4 w-4 -translate-x-1/2 -translate-y-1/2 cursor-pointer items-center justify-center"
+                style={{ left: `${frac * 100}%` }}
+              >
+                <div
+                  className="h-2 w-2 rotate-45 rounded-[1px] border"
+                  style={{
+                    backgroundColor: 'var(--ds-teal-400)',
+                    borderColor: 'var(--ds-teal-900)',
+                  }}
+                />
+              </div>
+            </TooltipTrigger>
+            <TooltipContent>
+              Attributes set · {formatMarkerTime(timeMs)}
+            </TooltipContent>
+          </Tooltip>
+        );
+      })}
+    </>
+  );
+}
+
 // ---------------------------------------------------------------------------
 // TimelineBar
 // ---------------------------------------------------------------------------
@@ -359,6 +478,11 @@ const TimelineBar = memo(function TimelineBar({
             />
           )}
         </div>
+        <AttrSetMarkers
+          span={span}
+          viewStart={viewStart}
+          viewDuration={viewDuration}
+        />
       </div>
     </div>
   );

package/src/components/new-trace-viewer/trace-viewer.tsx

@@ -21,17 +21,23 @@ import {
 } from 'react';
 import { useLoadMoreOnScroll } from '../../hooks/use-load-more-on-scroll';
 import { useReducedMotion } from '../../hooks/use-reduced-motion';
+import { filterSpanRawEvents } from '../../lib/trace-builder';
 import { ErrorBoundary } from '../error-boundary';
 import {
   EntityDetailPanel,
   type SelectedSpanInfo,
 } from '../sidebar/entity-detail-panel';
 import { useSidebarData } from '../sidebar/sidebar-data-context';
-import type { TraceWithMeta } from './types';
 import { formatDuration, getHighResInMs } from '../trace-viewer/util/timing';
 import { IconButton } from '../ui/icon-button';
-import { Spinner } from '../ui/spinner';
 import { Kbd } from '../ui/kbd';
+import { Spinner } from '../ui/spinner';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '../ui/tooltip';
 import EventList from './components/event-list';
 import { SplitPane } from './components/split-pane';
 import {
@@ -39,14 +45,9 @@ import {
   Timeline,
   TimelineHeader,
 } from './components/timeline';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '../ui/tooltip';
 import { ActiveSpanProvider, useActiveSpan } from './context';
 import { searchSpans } from './search';
+import type { TraceWithMeta } from './types';
 import { computeRootBounds, computeTimeMarkers } from './utils';
 
 interface NewTraceViewerProps {
@@ -145,14 +146,16 @@ function useSelectedSpanInfo(): SelectedSpanInfo | null {
   return useMemo(() => {
     if (!activeSpan) return null;
 
-    const correlationId = activeSpan.spanId;
-    const rawEvents = correlationId
-      ? sidebar.events.filter((e) => e.correlationId === correlationId)
-      : [];
+    const resource = activeSpan.attributes?.resource as string | undefined;
+    const rawEvents = filterSpanRawEvents(
+      sidebar.events,
+      resource,
+      activeSpan.spanId
+    );
 
     return {
       data: activeSpan.attributes?.data,
-      resource: activeSpan.attributes?.resource as string | undefined,
+      resource,
       spanId: activeSpan.spanId,
       rawEvents,
     };
@@ -459,7 +462,7 @@ function NewTraceViewerContent({
           )
         );
         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;

package/src/components/new-trace-viewer/utils.ts

@@ -185,6 +185,7 @@ export function getResourceColor(resource: string): {
 export type SegmentStatus =
   | 'queued'
   | 'running'
+  | 'completed'
   | 'failed'
   | 'retrying'
   | 'succeeded'
@@ -373,6 +374,12 @@ function computeSleepSegmentsFromSpan(
   return [{ startFraction: 0, endFraction: 1, status: 'sleeping' }];
 }
 
+function runSegmentStatus(runStatus: string | undefined): SegmentStatus {
+  if (runStatus === 'failed') return 'failed';
+  if (runStatus === 'running' || runStatus === 'pending') return 'running';
+  return 'completed';
+}
+
 function computeRunSegmentsFromSpan(
   startMs: number,
   duration: number,
@@ -387,11 +394,12 @@ function computeRunSegmentsFromSpan(
     .map((e) => ({ name: e.name, time: getHighResInMs(e.timestamp) }))
     .sort((a, b) => a.time - b.time);
 
+  const runData = attributes?.data as Record<string, unknown> | undefined;
+  const runStatus = runData?.status as string | undefined;
+
   const hasRunCreated = sorted.some((e) => e.name === 'run_created');
 
   if (!hasRunCreated) {
-    const runData = attributes?.data as Record<string, unknown> | undefined;
-    const runStatus = runData?.status as string | undefined;
     return computeV1RunSegments(startMs, duration, activeStartMs, runStatus);
   }
 
@@ -413,7 +421,7 @@ function computeRunSegmentsFromSpan(
   segments.push({
     startFraction: cursor,
     endFraction: 1,
-    status: failedEvent ? 'failed' : 'running',
+    status: failedEvent ? 'failed' : runSegmentStatus(runStatus),
   });
 
   return segments;
@@ -443,7 +451,7 @@ function computeV1RunSegments(
   segments.push({
     startFraction: cursor,
     endFraction: 1,
-    status: runStatus === 'failed' ? 'failed' : 'running',
+    status: runSegmentStatus(runStatus),
   });
 
   return segments;

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

@@ -3,6 +3,7 @@
 import { parseStepName, parseWorkflowName } from '@workflow/utils/parse-name';
 import type { Event, Hook, Step, WorkflowRun } from '@workflow/world';
 import type { ModelMessage } from 'ai';
+import { format } from 'date-fns';
 import type { KeyboardEvent, ReactNode } from 'react';
 import { useCallback, useContext, useMemo, useState } from 'react';
 import { isEncryptedMarker, isExpiredMarker } from '../../lib/hydration';
@@ -10,6 +11,7 @@ import { useToast } from '../../lib/toast';
 import { extractConversation, isDoStreamStep } from '../../lib/utils';
 import { CopyButton } from '../new-trace-viewer/components/copy-button';
 import { MiddleTruncate } from '../new-trace-viewer/components/middle-truncate/middle-truncate';
+import { ContextCardProvider } from '../ui/context-card';
 import {
   DecryptClickContext,
   RunClickContext,
@@ -19,6 +21,7 @@ import { ErrorCard } from '../ui/error-card';
 import { ErrorStackBlock, isStructuredError } from '../ui/error-stack-block';
 import { Skeleton } from '../ui/skeleton';
 import { TimestampTooltip } from '../ui/timestamp-tooltip';
+import { RunAttributesCard } from './attributes-block';
 import { ConversationView } from './conversation-view';
 import { CopyableDataBlock, EncryptedDataBlock } from './copyable-data-block';
 import { DetailCard } from './detail-card';
@@ -339,15 +342,7 @@ const parseDateValue = (value: unknown): Date | null => {
 };
 
 const formatLocalMillisecondTime = (date: Date): string =>
-  date.toLocaleString(undefined, {
-    year: 'numeric',
-    month: 'numeric',
-    day: 'numeric',
-    hour: 'numeric',
-    minute: 'numeric',
-    second: 'numeric',
-    fractionalSecondDigits: 3,
-  });
+  format(date, 'MMM dd HH:mm:ss.SS OO').toUpperCase();
 
 export const localMillisecondTime = (value: unknown): string => {
   const date = parseDateValue(value);
@@ -355,7 +350,6 @@ export const localMillisecondTime = (value: unknown): string => {
     return '-';
   }
 
-  // e.g. 12/17/2025, 9:08:55.182 AM
   return formatLocalMillisecondTime(date);
 };
 
@@ -416,12 +410,12 @@ const attributeToDisplayFn: Record<
   projectId: (_value: unknown) => null,
   environment: (_value: unknown) => null,
   executionContext: (_value: unknown) => 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: unknown) => {
     if (!hasDisplayContent(value)) return null;
-    return <DetailCard summary="Attributes">{JsonBlock(value)}</DetailCard>;
+    return <RunAttributesCard attributes={value as Record<string, string>} />;
   },
   // Dates — wrapped with TimestampTooltip showing UTC/local + relative time
   createdAt: timestampWithTooltipOrNull,
@@ -846,113 +840,117 @@ export const AttributePanel = ({
     : outerDecryptCtx;
 
   return (
-    <RunClickContext.Provider value={onRunClick}>
-      <StreamClickContext.Provider value={onStreamClick}>
-        <DecryptClickContext.Provider value={decryptValue}>
-          {visibleBasicAttributes.length > 0 && (
-            <div className="flex flex-col overflow-hidden divide-y divide-gray-alpha-400 mb-3">
-              {orderedBasicAttributes.map((attribute) => {
-                const displayValue = attributeToDisplayFn[
-                  attribute as keyof typeof attributeToDisplayFn
-                ]?.(displayData[attribute as keyof typeof displayData]);
-                const isModuleSpecifier = attribute === 'moduleSpecifier';
-                const isCopyableBasicAttribute =
-                  copyableBasicAttributes.has(attribute as AttributeKey) &&
-                  typeof displayValue === 'string';
-                const moduleSpecifierValue =
-                  typeof displayValue === 'string'
-                    ? displayValue
-                    : String(displayValue ?? displayData.moduleSpecifier ?? '');
-
-                return (
-                  <div
-                    className="flex items-center justify-between py-2"
-                    key={attribute}
-                  >
-                    <span className="text-label-14 text-gray-900">
-                      {getAttributeDisplayName(attribute)}
-                    </span>
-                    {isModuleSpecifier ? (
-                      <button
-                        type="button"
-                        className="min-w-0 max-w-[70%] truncate text-right text-label-13 font-mono"
-                        style={{
-                          color: 'var(--ds-gray-1000)',
-                          background: 'transparent',
-                          border: 'none',
-                          padding: 0,
-                        }}
-                        title={moduleSpecifierValue}
-                        onClick={() =>
-                          handleCopyModuleSpecifier(moduleSpecifierValue)
-                        }
-                      >
-                        {moduleSpecifierValue}
-                      </button>
-                    ) : isCopyableBasicAttribute ? (
-                      <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}
+    <ContextCardProvider>
+      <RunClickContext.Provider value={onRunClick}>
+        <StreamClickContext.Provider value={onStreamClick}>
+          <DecryptClickContext.Provider value={decryptValue}>
+            {visibleBasicAttributes.length > 0 && (
+              <div className="flex flex-col overflow-hidden divide-y divide-gray-alpha-400 mb-3">
+                {orderedBasicAttributes.map((attribute) => {
+                  const displayValue = attributeToDisplayFn[
+                    attribute as keyof typeof attributeToDisplayFn
+                  ]?.(displayData[attribute as keyof typeof displayData]);
+                  const isModuleSpecifier = attribute === 'moduleSpecifier';
+                  const isCopyableBasicAttribute =
+                    copyableBasicAttributes.has(attribute as AttributeKey) &&
+                    typeof displayValue === 'string';
+                  const moduleSpecifierValue =
+                    typeof displayValue === 'string'
+                      ? displayValue
+                      : String(
+                          displayValue ?? displayData.moduleSpecifier ?? ''
+                        );
+
+                  return (
+                    <div
+                      className="flex items-center justify-between py-2"
+                      key={attribute}
+                    >
+                      <span className="text-label-14 text-gray-900">
+                        {getAttributeDisplayName(attribute)}
+                      </span>
+                      {isModuleSpecifier ? (
+                        <button
+                          type="button"
+                          className="min-w-0 max-w-[70%] truncate text-right text-label-13 font-mono"
+                          style={{
+                            color: 'var(--ds-gray-1000)',
+                            background: 'transparent',
+                            border: 'none',
+                            padding: 0,
+                          }}
+                          title={moduleSpecifierValue}
+                          onClick={() =>
+                            handleCopyModuleSpecifier(moduleSpecifierValue)
+                          }
+                        >
+                          {moduleSpecifierValue}
+                        </button>
+                      ) : isCopyableBasicAttribute ? (
+                        <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}
+                        >
+                          <MiddleTruncate
+                            value={displayValue}
+                            className="flex-1"
+                          />
+                          <CopyButton
+                            copyText={displayValue}
+                            ariaLabel={`Copy ${getAttributeDisplayName(attribute)}`}
+                            className="shrink-0 -mr-1"
+                          />
+                        </div>
+                      ) : (
+                        <span className="text-right text-label-13 font-mono">
+                          {displayValue}
+                        </span>
+                      )}
+                    </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)' }}
                       >
-                        <MiddleTruncate
-                          value={displayValue}
-                          className="flex-1"
-                        />
-                        <CopyButton
-                          copyText={displayValue}
-                          ariaLabel={`Copy ${getAttributeDisplayName(attribute)}`}
-                          className="shrink-0 -mr-1"
-                        />
-                      </div>
-                    ) : (
-                      <span className="text-right text-label-13 font-mono">
-                        {displayValue}
+                        resumeAt
                       </span>
-                    )}
-                  </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%]" />
+                      <Skeleton className="h-4 w-[55%]" />
+                    </div>
                   </div>
-                </div>
-              )}
-            </div>
-          )}
-          {error ? (
-            <ErrorCard
-              title="Failed to load resource details"
-              details={error.message}
-              className="my-4"
-            />
-          ) : hasExpired ? (
-            <ExpiredDataMessage />
-          ) : resolvedAttributes.length > 0 ? (
-            <>
-              {resolvedAttributes.map((attribute) => (
-                <AttributeBlock
-                  isLoading={isLoading}
-                  key={attribute}
-                  attribute={attribute}
-                  value={displayData[attribute as keyof typeof displayData]}
-                  context={displayContext}
-                />
-              ))}
-            </>
-          ) : null}
-        </DecryptClickContext.Provider>
-      </StreamClickContext.Provider>
-    </RunClickContext.Provider>
+                )}
+              </div>
+            )}
+            {error ? (
+              <ErrorCard
+                title="Failed to load resource details"
+                details={error.message}
+                className="my-4"
+              />
+            ) : hasExpired ? (
+              <ExpiredDataMessage />
+            ) : resolvedAttributes.length > 0 ? (
+              <>
+                {resolvedAttributes.map((attribute) => (
+                  <AttributeBlock
+                    isLoading={isLoading}
+                    key={attribute}
+                    attribute={attribute}
+                    value={displayData[attribute as keyof typeof displayData]}
+                    context={displayContext}
+                  />
+                ))}
+              </>
+            ) : null}
+          </DecryptClickContext.Provider>
+        </StreamClickContext.Provider>
+      </RunClickContext.Provider>
+    </ContextCardProvider>
   );
 };