@workflow/web-shared 5.0.0-beta.40 → 5.0.0-beta.42

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>

package/src/components/ui/data-inspector.tsx

@@ -25,6 +25,7 @@ import {
   useRef,
   useState,
 } from 'react';
+import { cn } from '../../lib/cn';
 import { ENCRYPTED_DISPLAY_NAME } from '../../lib/hydration';
 import {
   type DecodedStreamChunkSource,
@@ -182,16 +183,8 @@ function EncryptedInlineLabel() {
     );
   }
   return (
-    <span style={{ color: 'var(--ds-gray-600)', fontStyle: 'italic' }}>
-      <Lock
-        className="h-3 w-3"
-        style={{
-          display: 'inline',
-          verticalAlign: 'middle',
-          marginRight: '3px',
-          marginTop: '-1px',
-        }}
-      />
+    <span className="text-gray-600 italic">
+      <Lock className="-mt-px mr-[3px] inline h-3 w-3 align-middle" />
       Encrypted
     </span>
   );
@@ -199,18 +192,10 @@ function EncryptedInlineLabel() {
 
 function StreamRefInline({ streamRef }: { streamRef: StreamRef }) {
   const onStreamClick = useContext(StreamClickContext);
-  const [hovered, setHovered] = useState(false);
   return (
     <button
       type="button"
-      className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-mono cursor-pointer underline decoration-transparent transition-colors"
-      style={{
-        backgroundColor: hovered ? 'var(--ds-blue-200)' : 'var(--ds-blue-100)',
-        color: 'var(--ds-blue-900)',
-        border: '1px solid var(--ds-blue-300)',
-      }}
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
+      className="inline-flex cursor-pointer items-center gap-1 rounded border border-blue-300 bg-blue-100 px-1.5 py-0.5 font-mono text-[10px] text-blue-900 underline decoration-transparent transition-colors hover:bg-blue-200"
       onClick={(e) => {
         e.stopPropagation();
         onStreamClick?.(streamRef.streamId);
@@ -225,20 +210,10 @@ function StreamRefInline({ streamRef }: { streamRef: StreamRef }) {
 
 function RunRefInline({ runRef }: { runRef: RunRef }) {
   const onRunClick = useContext(RunClickContext);
-  const [hovered, setHovered] = useState(false);
   return (
     <button
       type="button"
-      className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-mono cursor-pointer underline decoration-transparent transition-colors"
-      style={{
-        backgroundColor: hovered
-          ? 'var(--ds-purple-200)'
-          : 'var(--ds-purple-100)',
-        color: 'var(--ds-purple-900)',
-        border: '1px solid var(--ds-purple-300)',
-      }}
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
+      className="inline-flex cursor-pointer items-center gap-1 rounded border border-purple-300 bg-purple-100 px-1.5 py-0.5 font-mono text-[10px] text-purple-900 underline decoration-transparent transition-colors hover:bg-purple-200"
       onClick={(e) => {
         e.stopPropagation();
         onRunClick?.(runRef.runId);
@@ -267,10 +242,7 @@ function DecodedBytesChunk({
       {selectedView === 'decoded' ? (
         <div className="min-w-0">
           {typeof parsed === 'string' ? (
-            <span
-              className="whitespace-pre-wrap break-words"
-              style={{ color: 'var(--ds-gray-1000)' }}
-            >
+            <span className="whitespace-pre-wrap break-words text-gray-1000">
               {deserializeChunkText(parsed)}
             </span>
           ) : (
@@ -282,20 +254,15 @@ function DecodedBytesChunk({
       )}
       <div className="mt-2 flex">
         <div
-          className="inline-flex overflow-hidden rounded border"
-          style={{ borderColor: 'var(--ds-gray-400)' }}
+          className="inline-flex overflow-hidden rounded border border-gray-400"
           title={`${source.type} decoded as ${source.encoding.toUpperCase()} text. Switch to Bytes to inspect the summarized raw value.`}
         >
           <button
             type="button"
-            className="h-5 px-1.5 text-[10px] font-medium"
-            style={{
-              backgroundColor:
-                selectedView === 'decoded'
-                  ? 'var(--ds-gray-200)'
-                  : 'var(--ds-gray-100)',
-              color: 'var(--ds-gray-900)',
-            }}
+            className={cn(
+              'h-5 px-1.5 font-medium text-[10px] text-gray-900',
+              selectedView === 'decoded' ? 'bg-gray-200' : 'bg-gray-100'
+            )}
             onClick={() => setSelectedView('decoded')}
             aria-pressed={selectedView === 'decoded'}
             aria-label="Show decoded text"
@@ -304,15 +271,10 @@ function DecodedBytesChunk({
           </button>
           <button
             type="button"
-            className="h-5 border-l px-1.5 text-[10px] font-medium"
-            style={{
-              borderColor: 'var(--ds-gray-400)',
-              backgroundColor:
-                selectedView === 'bytes'
-                  ? 'var(--ds-gray-200)'
-                  : 'var(--ds-gray-100)',
-              color: 'var(--ds-gray-900)',
-            }}
+            className={cn(
+              'h-5 border-gray-400 border-l px-1.5 font-medium text-[10px] text-gray-900',
+              selectedView === 'bytes' ? 'bg-gray-200' : 'bg-gray-100'
+            )}
             onClick={() => setSelectedView('bytes')}
             aria-pressed={selectedView === 'bytes'}
             aria-label="Show raw bytes summary"
@@ -338,23 +300,19 @@ function DecodedBytesInspector({
     <div className="font-mono">
       <button
         type="button"
-        className="flex max-w-full items-start gap-1 text-left"
-        style={{ color: 'var(--ds-gray-1000)' }}
+        className="flex max-w-full items-start gap-1 text-left text-gray-1000"
         onClick={() => setExpanded((value) => !value)}
         title={`${source.type} decoded as ${source.encoding.toUpperCase()} text`}
       >
-        <span className="select-none" style={{ color: 'var(--ds-gray-700)' }}>
+        <span className="select-none text-gray-700">
           {expanded ? '▼' : '▶'}
         </span>
         <span className="min-w-0 break-words">{source.rawSummary}</span>
       </button>
       {expanded && (
         <div className="mt-1 pl-5">
-          <span style={{ color: 'var(--ds-gray-700)' }}>decoded: </span>
-          <span
-            className="whitespace-pre-wrap break-words"
-            style={{ color: 'var(--ds-green-900)' }}
-          >
+          <span className="text-gray-700">decoded: </span>
+          <span className="whitespace-pre-wrap break-words text-green-900">
             {JSON.stringify(decodedText)}
           </span>
         </div>
@@ -373,10 +331,7 @@ function BytesDisplayValue({ display }: { display: BytesDisplay }) {
     );
   }
   return (
-    <span
-      className="whitespace-pre-wrap break-words"
-      style={{ color: 'var(--ds-gray-1000)' }}
-    >
+    <span className="whitespace-pre-wrap break-words text-gray-1000">
       {display.text}
     </span>
   );

package/src/components/ui/duplicate-event-tooltip.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { DUPLICATE_EVENT_MESSAGE } from '../../lib/duplicate-events';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from './tooltip';
+
+/**
+ * Explains why an event is shown greyed out: it repeats a class the log
+ * already records for the same entity, after that entity finished.
+ *
+ * Renders `children` untouched when `isDuplicate` is false, so a call site can
+ * wrap an event label unconditionally. Mounts its own {@link TooltipProvider}
+ * so it works in the sidebar and the events table alike; nesting one inside an
+ * existing provider is harmless.
+ */
+export function DuplicateEventTooltip({
+  isDuplicate = false,
+  children,
+}: {
+  isDuplicate?: boolean;
+  children: ReactNode;
+}): ReactNode {
+  if (!isDuplicate) return children;
+
+  return (
+    <TooltipProvider delayDuration={300}>
+      <Tooltip>
+        <TooltipTrigger asChild>{children}</TooltipTrigger>
+        <TooltipContent
+          className="max-w-[264px] leading-snug"
+          collisionPadding={8}
+          side="top"
+        >
+          {DUPLICATE_EVENT_MESSAGE}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}

package/src/components/ui/menu-dropdown.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useEffect, useRef, useState } from 'react';
+import { cn } from '../../lib/cn';
 
 const STYLES = `.wf-menu-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;color:var(--ds-gray-1000);background:var(--ds-background-100);box-shadow:0 0 0 1px var(--ds-gray-400);cursor:pointer;white-space:nowrap;transition:background 150ms}.wf-menu-btn:hover{background:var(--ds-gray-alpha-200)}.wf-menu-item{appearance:none;-webkit-appearance:none;border:none;display:flex;align-items:center;width:100%;height:40px;padding:0 8px;border-radius:6px;font-size:14px;color:var(--ds-gray-1000);background:transparent;cursor:pointer;transition:background 150ms}.wf-menu-item:hover{background:var(--ds-gray-alpha-100)}`;
 
@@ -41,7 +42,7 @@ export function MenuDropdown<T extends string = string>({
   }, [open]);
 
   return (
-    <div ref={ref} style={{ position: 'relative', flexShrink: 0 }}>
+    <div ref={ref} className="relative shrink-0">
       <style dangerouslySetInnerHTML={{ __html: STYLES }} />
 
       <button
@@ -55,11 +56,7 @@ export function MenuDropdown<T extends string = string>({
           height={16}
           viewBox="0 0 16 16"
           fill="none"
-          style={{
-            marginLeft: 16,
-            marginRight: -4,
-            color: 'var(--ds-gray-900)',
-          }}
+          className="-mr-1 ml-4 text-gray-900"
         >
           <path
             d="M4.5 6L8 9.5L11.5 6"
@@ -73,18 +70,7 @@ export function MenuDropdown<T extends string = string>({
 
       {open && (
         <div
-          style={{
-            position: 'absolute',
-            right: 0,
-            top: '100%',
-            marginTop: 4,
-            minWidth: 140,
-            padding: 4,
-            borderRadius: 12,
-            background: 'var(--ds-background-100)',
-            boxShadow: 'var(--ds-shadow-menu, var(--ds-shadow-medium))',
-            zIndex: 2001,
-          }}
+          className="absolute top-full right-0 z-[2001] mt-1 min-w-[140px] bg-background-100 p-1 material-menu"
           role="menu"
         >
           {options.map((option) => (
@@ -92,10 +78,10 @@ export function MenuDropdown<T extends string = string>({
               key={option.value}
               type="button"
               role="menuitem"
-              className="wf-menu-item"
-              style={{
-                fontWeight: option.value === value ? 500 : 400,
-              }}
+              className={cn(
+                'wf-menu-item',
+                option.value === value ? 'font-medium' : 'font-normal'
+              )}
               onClick={() => {
                 onChange(option.value);
                 setOpen(false);

package/src/components/ui/skeleton.tsx

@@ -8,8 +8,8 @@ function Skeleton({
   return (
     <div
       {...props}
-      className={cn('rounded-md', className)}
-      style={{ backgroundColor: 'var(--ds-gray-200)', ...style }}
+      className={cn('rounded-md bg-gray-200', className)}
+      style={style}
     />
   );
 }

package/src/components/ui/spinner.tsx

@@ -44,9 +44,8 @@ export function Spinner({
 
   return (
     <span
+      className="relative inline-flex"
       style={{
-        display: 'inline-flex',
-        position: 'relative',
         width: size,
         height: size,
       }}
@@ -55,18 +54,15 @@ export function Spinner({
       {config.delays.map((delay, i) => (
         <span
           key={delay}
+          className="absolute top-1/2 left-1/2 rounded-[1px] bg-gray-700 [animation-iteration-count:infinite] [animation-name:wf-spinner-fade] [animation-timing-function:linear]"
           style={{
-            position: 'absolute',
-            left: '50%',
-            top: '50%',
             width: config.lineW,
             height: config.lineH,
             marginLeft: -config.lineW / 2,
             marginTop: -config.lineH / 2,
-            borderRadius: 1,
-            backgroundColor: color ?? 'var(--ds-gray-700)',
+            backgroundColor: color,
             transform: `rotate(${i * config.angle}deg) translate(${size * 0.36}px)`,
-            animation: `wf-spinner-fade ${config.duration}ms linear infinite`,
+            animationDuration: `${config.duration}ms`,
             animationDelay: `${delay}ms`,
           }}
         />

package/src/index.ts

@@ -10,6 +10,10 @@ export {
   stepEventsToStepEntity,
   waitEventsToWaitEntity,
 } from './components/workflow-traces/trace-span-construction';
+export {
+  DUPLICATE_EVENT_MESSAGE,
+  findDuplicateEventIds,
+} from './lib/duplicate-events';
 export type { EventAnalysis } from './lib/event-analysis';
 export {
   analyzeEvents,