@workflow/web-shared 5.0.0-beta.41 → 5.0.0-beta.43

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { ArrowLeft, ArrowRight } from 'lucide-react';
-import type { CSSProperties, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import {
   Fragment,
   memo,
@@ -28,7 +28,7 @@ import {
   computeSpanGaps,
   computeSpanMarkers,
   computeSpanSegments,
-  getResourceColor,
+  getResourceClassNames,
   getSpanDurationMs,
   isSpanErrored,
 } from '../utils';
@@ -62,11 +62,6 @@ const SEGMENT_CLASSES: Record<SegmentStatus, string> = {
   received: 'bg-blue-200 border border-blue-500',
 };
 
-const TIMELINE_INSET_STYLE: CSSProperties = {
-  left: TIMELINE_PADDING_PX,
-  right: TIMELINE_PADDING_PX,
-};
-
 const STRIPED_SEGMENT_STATUSES: ReadonlySet<SegmentStatus> = new Set([
   'pending',
   'running',
@@ -260,18 +255,18 @@ function BoundaryArrow({
 }
 
 function PlainBar({
-  bg,
-  border,
+  className,
   label,
 }: {
-  bg: string;
-  border: string;
+  className: string;
   label: string | null;
 }): ReactNode {
   return (
     <div
-      className="relative h-6 w-full min-w-1 rounded-[0.25rem] border"
-      style={{ background: bg, borderColor: border }}
+      className={cn(
+        'relative h-6 w-full min-w-1 rounded-[0.25rem] border',
+        className
+      )}
     >
       {label ? <DurationLabel label={label} /> : null}
     </div>
@@ -352,14 +347,13 @@ function SegmentBar({
           <div
             key={i}
             className={cn(
-              'absolute h-full overflow-hidden rounded-[0.25rem]',
+              'absolute h-full min-w-px overflow-hidden rounded-[0.25rem]',
               SEGMENT_CLASSES[seg.status]
             )}
             style={{
               // 1px gap between adjacent segments, distributed equally.
               left: `calc(${seg.leftPct}% + 0.5px)`,
               width: `calc(${seg.widthPct}% - 1px)`,
-              minWidth: 1,
             }}
           >
             {STRIPED_SEGMENT_STATUSES.has(seg.status) ? (
@@ -457,13 +451,10 @@ const TimelineBar = memo(function TimelineBar({
     markers.length > 0 || offscreen.left !== null || offscreen.right !== null;
 
   const isErrored = isSpanErrored(span);
-  const colors = getResourceColor(span.resource);
-  const fallbackBg = isErrored
-    ? (colors.errorBg ?? 'var(--ds-red-200)')
-    : colors.bg;
-  const fallbackBorder = isErrored
-    ? (colors.errorBorder ?? 'var(--ds-red-500)')
-    : colors.border;
+  const colors = getResourceClassNames(span.resource);
+  const fallbackClassName = isErrored
+    ? (colors.errorClassName ?? 'border-red-500 bg-red-200')
+    : colors.className;
 
   const totalLabel = formatDurationPrecise(totalDurationMs);
   const showTotalLabel =
@@ -486,7 +477,7 @@ const TimelineBar = memo(function TimelineBar({
       )}
       onClick={handleClick}
     >
-      <div className="absolute inset-y-0" style={TIMELINE_INSET_STYLE}>
+      <div className="absolute inset-x-4 inset-y-0">
         <div
           className="absolute top-1/2 h-6 -translate-y-1/2 overflow-hidden rounded-[0.25rem]"
           style={getBarPositionStyle(geometry)}
@@ -495,15 +486,13 @@ const TimelineBar = memo(function TimelineBar({
             <BoundaryArrow direction={geometry.mode.direction} />
           ) : geometry.mode.kind === 'tiny' ? (
             <div
-              className="h-6 rounded-[0.25rem] border"
-              style={{ background: fallbackBg, borderColor: fallbackBorder }}
+              className={cn('h-6 rounded-[0.25rem] border', fallbackClassName)}
             />
           ) : segments.length > 0 ? (
             <SegmentBar segments={segments} showLabels={!hasMarkers} />
           ) : (
             <PlainBar
-              bg={fallbackBg}
-              border={fallbackBorder}
+              className={fallbackClassName}
               label={showTotalLabel ? totalLabel : null}
             />
           )}
@@ -612,10 +601,9 @@ const DeltaMeasureLine = memo(function DeltaMeasureLine({
   return (
     <>
       <div
-        className="absolute h-px bg-amber-800"
+        className="absolute h-px w-1 bg-amber-800"
         style={{
           left: Math.min(anchorX, guideX),
-          width: MEASURE_GUIDE_OUTSET_PX,
           top: anchorCenterY,
         }}
       />
@@ -781,8 +769,7 @@ export function Timeline({
     >
       <div
         aria-hidden
-        className="absolute inset-y-0 pointer-events-none"
-        style={TIMELINE_INSET_STYLE}
+        className="pointer-events-none absolute inset-x-4 inset-y-0"
       >
         {markers.map((marker) =>
           // Skip the "0s" origin marker since the left edge already implies it.
@@ -796,10 +783,7 @@ export function Timeline({
         )}
       </div>
       {hover != null && (
-        <div
-          className="absolute inset-y-0 pointer-events-none z-10"
-          style={TIMELINE_INSET_STYLE}
-        >
+        <div className="pointer-events-none absolute inset-x-4 inset-y-0 z-10">
           <div
             className="absolute top-0 bottom-0 w-px bg-gray-alpha-500"
             style={{ left: `${hover.fraction * 100}%` }}
@@ -824,8 +808,7 @@ export function Timeline({
       {altHeld && anchorIndex < 0 && (
         <div
           aria-hidden
-          className="absolute inset-y-0 pointer-events-none"
-          style={TIMELINE_INSET_STYLE}
+          className="pointer-events-none absolute inset-x-4 inset-y-0"
         >
           {gapMeasurements.map((gap) => (
             <DeltaMeasureLine
@@ -839,8 +822,7 @@ export function Timeline({
       {measurement && (
         <div
           aria-hidden
-          className="absolute inset-y-0 pointer-events-none z-20"
-          style={TIMELINE_INSET_STYLE}
+          className="pointer-events-none absolute inset-x-4 inset-y-0 z-20"
         >
           <DeltaMeasureLine {...measurement} timelineWidth={timelineWidth} />
         </div>

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

@@ -1,19 +1,62 @@
 import { Skeleton } from '../../ui/skeleton';
-import { DEFAULT_START_PX, paneColTemplate } from './pane-constants';
 
-// Mirrors SplitPane's initial column template so the skeleton lines up with
-// the real viewer's first paint.
-const COL_TEMPLATE = paneColTemplate(DEFAULT_START_PX);
-
-const ROWS: { id: string; name: number; off: number; bar: number }[] = [
-  { id: 'r0', name: 62, off: 0, bar: 72 },
-  { id: 'r1', name: 78, off: 6, bar: 48 },
-  { id: 'r2', name: 50, off: 10, bar: 55 },
-  { id: 'r3', name: 84, off: 18, bar: 30 },
-  { id: 'r4', name: 45, off: 18, bar: 42 },
-  { id: 'r5', name: 66, off: 34, bar: 38 },
-  { id: 'r6', name: 55, off: 41, bar: 25 },
-  { id: 'r7', name: 40, off: 50, bar: 30 },
+const ROWS = [
+  {
+    id: 'r0',
+    nameClassName: 'w-[62%]',
+    offsetClassName: 'left-0',
+    barClassName: 'w-[72%]',
+    topClassName: 'top-0',
+  },
+  {
+    id: 'r1',
+    nameClassName: 'w-[78%]',
+    offsetClassName: 'left-[6%]',
+    barClassName: 'w-[48%]',
+    topClassName: 'top-[3.5px]',
+  },
+  {
+    id: 'r2',
+    nameClassName: 'w-1/2',
+    offsetClassName: 'left-[10%]',
+    barClassName: 'w-[55%]',
+    topClassName: 'top-[7px]',
+  },
+  {
+    id: 'r3',
+    nameClassName: 'w-[84%]',
+    offsetClassName: 'left-[18%]',
+    barClassName: 'w-[30%]',
+    topClassName: 'top-[10.5px]',
+  },
+  {
+    id: 'r4',
+    nameClassName: 'w-[45%]',
+    offsetClassName: 'left-[18%]',
+    barClassName: 'w-[42%]',
+    topClassName: 'top-[14px]',
+  },
+  {
+    id: 'r5',
+    nameClassName: 'w-[66%]',
+    offsetClassName: 'left-[34%]',
+    barClassName: 'w-[38%]',
+    topClassName: 'top-[17.5px]',
+  },
+  {
+    id: 'r6',
+    nameClassName: 'w-[55%]',
+    offsetClassName: 'left-[41%]',
+    barClassName: 'w-1/4',
+    topClassName: 'top-[21px]',
+  },
+  {
+    id: 'r7',
+    nameClassName: 'w-2/5',
+    offsetClassName: 'left-1/2',
+    barClassName: 'w-[30%]',
+    topClassName: 'top-[24.5px]',
+  },
 ];
 
 const HEADER_MARKERS = ['m0', 'm1', 'm2', 'm3'];
@@ -36,25 +79,17 @@ export function TraceViewerSkeleton() {
       {/* Minimap strip: thin density lines tracing the same shape as the bars */}
       <div className="relative h-10 min-h-10 shrink-0 border-b border-gray-alpha-400">
         <div className="absolute inset-x-4 top-[6px]">
-          {ROWS.map((row, index) => (
+          {ROWS.map((row) => (
             <Skeleton
               key={row.id}
-              className="absolute h-[3px] rounded-full"
-              style={{
-                left: `${row.off}%`,
-                width: `${row.bar}%`,
-                top: index * 3.5,
-              }}
+              className={`absolute h-[3px] rounded-full ${row.offsetClassName} ${row.barClassName} ${row.topClassName}`}
             />
           ))}
         </div>
       </div>
 
       {/* Header row: search header | divider | timeline header */}
-      <div
-        className="shrink-0 grid"
-        style={{ gridTemplateColumns: COL_TEMPLATE }}
-      >
+      <div className="grid shrink-0 grid-cols-[340px_1px_minmax(50px,1fr)]">
         <div className="h-10 min-h-10 flex items-center border-b border-gray-alpha-400 pl-4 pr-2 gap-1.5">
           <Skeleton className="w-3.5 h-3.5 shrink-0 rounded-sm" />
           <Skeleton className="h-3.5 w-40" />
@@ -70,10 +105,7 @@ export function TraceViewerSkeleton() {
       </div>
 
       {/* Content row: event list | gutter | timeline */}
-      <div
-        className="grid flex-1 min-h-0 overflow-hidden"
-        style={{ gridTemplateColumns: COL_TEMPLATE }}
-      >
+      <div className="grid min-h-0 flex-1 grid-cols-[340px_1px_minmax(50px,1fr)] overflow-hidden">
         {/* Sidebar event rows */}
         <div className="block overflow-visible">
           <ul className="block divide-y divide-gray-alpha-400 border-b border-gray-alpha-400">
@@ -81,10 +113,7 @@ export function TraceViewerSkeleton() {
               <li key={row.id} className="h-10 flex items-center pl-4 pr-2">
                 <div className="flex min-w-0 flex-1 items-center gap-2">
                   <Skeleton className="w-4 h-4 shrink-0 rounded-sm" />
-                  <Skeleton
-                    className="h-3.5"
-                    style={{ width: `${row.name}%` }}
-                  />
+                  <Skeleton className={`h-3.5 ${row.nameClassName}`} />
                 </div>
                 <Skeleton className="ml-2 h-3.5 w-10 shrink-0" />
               </li>
@@ -101,8 +130,7 @@ export function TraceViewerSkeleton() {
             <div key={row.id} className="relative h-10">
               <div className="absolute inset-x-4 inset-y-0">
                 <Skeleton
-                  className="absolute top-1/2 -translate-y-1/2 h-6 rounded-[0.25rem]"
-                  style={{ left: `${row.off}%`, width: `${row.bar}%` }}
+                  className={`absolute top-1/2 h-6 -translate-y-1/2 rounded-[0.25rem] ${row.offsetClassName} ${row.barClassName}`}
                 />
               </div>
             </div>

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

@@ -1,10 +1,10 @@
 const WorkflowIcon = () => {
   return (
     <svg
+      aria-hidden="true"
       data-testid="geist-icon"
       height="16"
       strokeLinejoin="round"
-      style={{ color: 'currentColor' }}
       viewBox="0 0 16 16"
       width="16"
     >
@@ -19,12 +19,12 @@ const WorkflowIcon = () => {
 const WebhookIcon = () => {
   return (
     <svg
+      aria-hidden="true"
       data-testid="geist-icon"
       height="16"
       strokeLinejoin="round"
       viewBox="0 0 16 16"
       width="16"
-      style={{ color: 'currentColor' }}
     >
       <path
         fillRule="evenodd"
@@ -39,12 +39,12 @@ const WebhookIcon = () => {
 const SleepIcon = () => {
   return (
     <svg
+      aria-hidden="true"
       data-testid="geist-icon"
       height="16"
       strokeLinejoin="round"
       viewBox="0 0 16 16"
       width="16"
-      style={{ color: 'currentColor' }}
     >
       <path
         fillRule="evenodd"
@@ -59,12 +59,12 @@ const SleepIcon = () => {
 const StepForwardIcon = () => {
   return (
     <svg
+      aria-hidden="true"
       data-testid="geist-icon"
       height="16"
       strokeLinejoin="round"
       viewBox="0 0 16 16"
       width="16"
-      style={{ color: 'currentColor' }}
     >
       <path
         fillRule="evenodd"

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

@@ -7,7 +7,7 @@ import {
   computeSpanMarkers,
   computeSpanSegments,
   computeTimeMarkers,
-  getResourceColor,
+  getResourceClassNames,
 } from './utils';
 
 /** Build a high-res timestamp tuple ([seconds, nanoseconds]) for a given ms. */
@@ -248,13 +248,11 @@ describe('computeTimeMarkers', () => {
   });
 });
 
-describe('getResourceColor', () => {
+describe('getResourceClassNames', () => {
   it('uses gray for hooks (passive spans), not amber', () => {
-    expect(getResourceColor('hook')).toEqual({
-      bg: 'var(--ds-gray-200)',
-      border: 'var(--ds-gray-500)',
-      errorBg: 'var(--ds-red-200)',
-      errorBorder: 'var(--ds-red-500)',
+    expect(getResourceClassNames('hook')).toEqual({
+      className: 'border-gray-500 bg-gray-200',
+      errorClassName: 'border-red-500 bg-red-200',
     });
   });
 });

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

@@ -279,55 +279,41 @@ export function computeSpanDelta(
 // Resource colors
 // ---------------------------------------------------------------------------
 
-export const RESOURCE_COLORS: Record<
+export const RESOURCE_CLASS_NAMES: Record<
   string,
   {
-    bg: string;
-    border: string;
-    errorBg?: string;
-    errorBorder?: string;
+    className: string;
+    errorClassName?: string;
   }
 > = {
   run: {
-    bg: 'var(--ds-blue-200)',
-    border: 'var(--ds-blue-500)',
-    errorBg: 'var(--ds-red-200)',
-    errorBorder: 'var(--ds-red-500)',
+    className: 'border-blue-500 bg-blue-200',
+    errorClassName: 'border-red-500 bg-red-200',
   },
   step: {
-    bg: 'var(--ds-green-200)',
-    border: 'var(--ds-green-500)',
-    errorBg: 'var(--ds-red-200)',
-    errorBorder: 'var(--ds-red-500)',
+    className: 'border-green-500 bg-green-200',
+    errorClassName: 'border-red-500 bg-red-200',
   },
   // Passive spans (hooks) stay gray — matches event-list icons and the minimap.
   hook: {
-    bg: 'var(--ds-gray-200)',
-    border: 'var(--ds-gray-500)',
-    errorBg: 'var(--ds-red-200)',
-    errorBorder: 'var(--ds-red-500)',
+    className: 'border-gray-500 bg-gray-200',
+    errorClassName: 'border-red-500 bg-red-200',
   },
   sleep: {
-    bg: 'var(--ds-purple-200)',
-    border: 'var(--ds-purple-500)',
-    errorBg: 'var(--ds-red-200)',
-    errorBorder: 'var(--ds-red-500)',
+    className: 'border-purple-500 bg-purple-200',
+    errorClassName: 'border-red-500 bg-red-200',
   },
   default: {
-    bg: 'var(--ds-gray-200)',
-    border: 'var(--ds-gray-500)',
-    errorBg: 'var(--ds-red-200)',
-    errorBorder: 'var(--ds-red-500)',
+    className: 'border-gray-500 bg-gray-200',
+    errorClassName: 'border-red-500 bg-red-200',
   },
 };
 
-export function getResourceColor(resource: string): {
-  bg: string;
-  border: string;
-  errorBg?: string;
-  errorBorder?: string;
+export function getResourceClassNames(resource: string): {
+  className: string;
+  errorClassName?: string;
 } {
-  return RESOURCE_COLORS[resource] ?? RESOURCE_COLORS.default;
+  return RESOURCE_CLASS_NAMES[resource] ?? RESOURCE_CLASS_NAMES.default;
 }
 
 // ---------------------------------------------------------------------------

package/src/components/trace-viewer.tsx

@@ -30,16 +30,28 @@ const TraceViewer = ({
     if (!run?.runId) {
       return undefined;
     }
-    return buildTrace(run, events, new Date());
+    // `hasMore` is the only place that knows whether more of the log is still
+    // to be fetched, and a repeat can only be told apart from the event it
+    // repeats with the whole log in hand.
+    return buildTrace(run, events, new Date(), {
+      isCompleteHistory: !hasMore,
+    });
     // eslint-disable-next-line react-hooks/exhaustive-deps -- `new Date()` is intentionally not a dep
-  }, [run, events]);
+  }, [run, events, hasMore]);
+
+  // The sidebar shows one entity's slice of the log, so it takes the trace's
+  // answer rather than recomputing one from the slice.
+  const sidebarValue = useMemo(
+    () => ({ ...sidebarData, duplicateEventIds: trace?.duplicateEventIds }),
+    [sidebarData, trace]
+  );
 
   if (!trace || (loading && events.length === 0)) {
     return <TraceViewerSkeleton />;
   }
 
   return (
-    <SidebarDataProvider value={sidebarData}>
+    <SidebarDataProvider value={sidebarValue}>
       <div className="relative w-full h-full flex">
         <TraceViewerComponent
           trace={trace}

package/src/components/ui/context-card.tsx

@@ -267,17 +267,17 @@ export function ContextCardProvider({
               ref={ref}
             >
               <div
-                className="min-w-max transition-all duration-150 ease-[easing-function:cubic-bezier(0.3,_0.57,_0.07,_0.95)] will-change-[transform,width,height] motion-reduce:!transition-none"
-                style={{
-                  opacity: visible ? 1 : 0,
-                }}
+                className={cn(
+                  'min-w-max transition-all duration-150 ease-[easing-function:cubic-bezier(0.3,_0.57,_0.07,_0.95)] will-change-[transform,width,height] motion-reduce:!transition-none',
+                  visible ? 'opacity-100' : 'opacity-0'
+                )}
               >
                 <div
                   className={cn(
                     'absolute bg-background-100 bg-clip-padding rounded-[6px] overflow-visible pointer-events-none z-[1000000] shadow-[var(--ds-shadow-tooltip),0_0_0_1px_var(--ds-background-100)] w-fit [--context-card-tip-stroke:#DBDBDB] dark-theme:[--context-card-tip-stroke:#252525]',
                     skipTransition
                       ? '!transition-none'
-                      : 'transition-[transform,width,height] duration-250 ease-[easing-function:cubic-bezier(0.29,0.31,0.05,0.96)] will-change-[transform,width,height] motion-reduce:!transition-none'
+                      : 'transition-[transform,width,height] duration-[250ms] ease-[easing-function:cubic-bezier(0.29,0.31,0.05,0.96)] will-change-[transform,width,height] motion-reduce:!transition-none'
                   )}
                   data-skip-transition={skipTransition}
                   style={{
@@ -301,7 +301,7 @@ export function ContextCardProvider({
                       },
                       skipTransition
                         ? '!transition-none'
-                        : 'transition-[transform,width,height] duration-250 ease-[easing-function:cubic-bezier(0.29,0.31,0.05,0.96)] will-change-[transform,width,height] motion-reduce:!transition-none'
+                        : 'transition-[transform,width,height] duration-[250ms] ease-[easing-function:cubic-bezier(0.29,0.31,0.05,0.96)] will-change-[transform,width,height] motion-reduce:!transition-none'
                     )}
                     style={{
                       ...(activeBounds.side === 'top' ||
@@ -328,12 +328,7 @@ export function ContextCardProvider({
                         <path
                           d="M15 -0.5V0.5H12.9834L12.8184 0.508789C12.4377 0.550822 12.0853 0.738056 11.8359 1.03418L8.53027 4.95996C7.73114 5.90893 6.26886 5.90892 5.46973 4.95996L2.16406 1.03418C1.87905 0.695733 1.45907 0.5 1.0166 0.5H-1V-0.5H15Z"
                           fill="var(--ds-background-100)"
-                          style={{
-                            fill: 'var(--ds-background-100)',
-                            fillOpacity: 1,
-                            stroke: 'var(--context-card-tip-stroke)',
-                            strokeOpacity: 1,
-                          }}
+                          className="fill-background-100 stroke-[var(--context-card-tip-stroke)]"
                         />
                       </g>
                       <defs>
@@ -342,7 +337,7 @@ export function ContextCardProvider({
                             width="14"
                             height="7"
                             fill="white"
-                            style={{ fill: 'white', fillOpacity: 1 }}
+                            className="fill-background-100"
                           />
                         </clipPath>
                       </defs>
@@ -748,30 +743,25 @@ export function ContextCardTrigger({
         ? createPortal(
             <div
               className={cn(
-                'absolute top-0 p-3 left-0 max-w-max transition-[transform,width,height] duration-250 ease-[easing-function:cubic-bezier(0.29,0.31,0.05,0.96)] will-change-[transform,width,height] motion-reduce:!transition-none',
-                skipTransition && '!transition-none'
+                'absolute top-0 p-3 left-0 max-w-max transition-[transform,width,height] duration-[250ms] ease-[easing-function:cubic-bezier(0.29,0.31,0.05,0.96)] will-change-[transform,width,height] motion-reduce:!transition-none',
+                skipTransition && '!transition-none',
+                noPadding && 'p-0',
+                rootVisible && visible && !ignoreCardPointerEvents
+                  ? 'pointer-events-auto'
+                  : 'pointer-events-none'
               )}
               key={id}
               ref={contentRef}
-              style={{
-                ...(noPadding ? { padding: 0 } : {}),
-                pointerEvents:
-                  rootVisible && visible && !ignoreCardPointerEvents
-                    ? 'all'
-                    : 'none',
-              }}
             >
               <div
                 className={cn(
                   'min-w-max transition-all duration-150 ease-[easing-function:cubic-bezier(0.3,_0.57,_0.07,_0.95)] will-change-[transform,width,height] motion-reduce:!transition-none',
                   skipTransition
                     ? '!transition-none'
-                    : 'transition-[transform,width,height] duration-250 ease-[easing-function:cubic-bezier(0.29,0.31,0.05,0.96)] will-change-[transform,width,height] motion-reduce:!transition-none'
+                    : 'transition-[transform,width,height] duration-[250ms] ease-[easing-function:cubic-bezier(0.29,0.31,0.05,0.96)] will-change-[transform,width,height] motion-reduce:!transition-none',
+                  visible ? 'opacity-100' : 'opacity-0'
                 )}
                 ref={contentMeasureRef}
-                style={{
-                  opacity: Number(visible),
-                }}
               >
                 {content}
               </div>