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

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,

package/src/lib/duplicate-events.test.ts

@@ -0,0 +1,339 @@
+import type { Event, EventType } from '@workflow/world';
+import { DUPLICATE_EVENT_FIXTURES } from '@workflow/world/test-support/duplicate-event-fixtures.js';
+import { describe, expect, it } from 'vitest';
+import { findDuplicateEventIds } from './duplicate-events';
+
+const BASE_TIME = Date.parse('2026-01-01T00:00:00.000Z');
+
+const COMPLETE = { isCompleteHistory: true };
+
+let nextSlot = 0;
+
+function event(
+  eventType: EventType,
+  options: {
+    correlationId?: string;
+    /** Log position. Defaults to the order the fixture created the event in. */
+    slot?: number;
+    /** `createdAt`/`occurredAt`, in seconds after the fixture epoch. */
+    at?: number;
+    occurredAt?: number;
+  } = {}
+): Event {
+  nextSlot += 1;
+  const slot = options.slot ?? nextSlot;
+  const createdAt = new Date(BASE_TIME + (options.at ?? slot) * 1000);
+  return {
+    eventId: `evnt_${String(slot).padStart(26, '0')}`,
+    runId: 'run_1',
+    eventType,
+    correlationId: options.correlationId,
+    createdAt,
+    occurredAt:
+      options.occurredAt === undefined
+        ? createdAt
+        : new Date(BASE_TIME + options.occurredAt * 1000),
+    eventData: {},
+  } as unknown as Event;
+}
+
+/**
+ * The same event under the older ID scheme, whose IDs are ULIDs rather than
+ * slots. A backend serving such a log may order it by `(createdAt, eventId)`
+ * instead of by ID, so the ID alone does not fix the log position.
+ */
+function ulidEvent(...args: Parameters<typeof event>): Event {
+  const slotEvent = event(...args);
+  const slot = slotEvent.eventId.slice('evnt_'.length).replace(/^0+/, '');
+  return {
+    ...slotEvent,
+    eventId: `evnt_01K${slot.padStart(23, '0')}`,
+  } as Event;
+}
+
+describe('findDuplicateEventIds', () => {
+  it('returns nothing for a log with no repeats', () => {
+    const events = [
+      event('run_created'),
+      event('run_started'),
+      event('step_created', { correlationId: 'step_a' }),
+      event('step_started', { correlationId: 'step_a' }),
+      event('step_completed', { correlationId: 'step_a' }),
+      event('run_completed'),
+    ];
+
+    expect(findDuplicateEventIds(events, COMPLETE)).toEqual(new Set());
+  });
+
+  it('flags every repeat a finished entity collects', () => {
+    const created = event('step_created', { correlationId: 'step_a' });
+    const started = event('step_started', { correlationId: 'step_a' });
+    const completed = event('step_completed', { correlationId: 'step_a' });
+    const createdAgain = event('step_created', { correlationId: 'step_a' });
+    const startedAgain = event('step_started', { correlationId: 'step_a' });
+
+    expect(
+      findDuplicateEventIds(
+        [created, started, completed, createdAgain, startedAgain],
+        COMPLETE
+      )
+    ).toEqual(new Set([createdAgain.eventId, startedAgain.eventId]));
+  });
+
+  it('leaves a class the log has not recorded for the entity yet', () => {
+    // The step finished without a step_started in the log, so this one repeats
+    // nothing. The runtime reports that as divergence rather than passing it
+    // over, and the UI must not present it as a settled repeat.
+    const events = [
+      event('step_created', { correlationId: 'step_a' }),
+      event('step_completed', { correlationId: 'step_a' }),
+      event('step_started', { correlationId: 'step_a' }),
+    ];
+
+    expect(findDuplicateEventIds(events, COMPLETE)).toEqual(new Set());
+  });
+
+  it('treats completed and failed as one terminal class', () => {
+    // A concurrent replay writing the other outcome does not move the step off
+    // the outcome the run acted on.
+    const failed = event('step_failed', { correlationId: 'step_a' });
+    const completed = event('step_completed', { correlationId: 'step_a' });
+
+    expect(findDuplicateEventIds([failed, completed], COMPLETE)).toEqual(
+      new Set([completed.eventId])
+    );
+  });
+
+  it('keys on the correlation id, so sibling entities never collide', () => {
+    const events = [
+      event('step_created', { correlationId: 'step_a' }),
+      event('step_created', { correlationId: 'step_b' }),
+      event('step_completed', { correlationId: 'step_a' }),
+      event('step_completed', { correlationId: 'step_b' }),
+    ];
+
+    expect(findDuplicateEventIds(events, COMPLETE)).toEqual(new Set());
+  });
+
+  it('does not flag the repeated events of a retried step', () => {
+    // Each attempt legitimately records its own start, and each retryable
+    // failure its own step_retrying. The step's consumer is registered for the
+    // whole sequence and takes all of them.
+    const events = [
+      event('step_created', { correlationId: 'step_a' }),
+      event('step_started', { correlationId: 'step_a' }),
+      event('step_retrying', { correlationId: 'step_a' }),
+      event('step_started', { correlationId: 'step_a' }),
+      event('step_retrying', { correlationId: 'step_a' }),
+      event('step_started', { correlationId: 'step_a' }),
+      event('step_completed', { correlationId: 'step_a' }),
+    ];
+
+    expect(findDuplicateEventIds(events, COMPLETE)).toEqual(new Set());
+  });
+
+  it('does not flag a second step_created while the step is still open', () => {
+    // The step's consumer is registered and absorbs it, so the run does not
+    // read past this event.
+    const events = [
+      event('step_created', { correlationId: 'step_a' }),
+      event('step_created', { correlationId: 'step_a' }),
+      event('step_started', { correlationId: 'step_a' }),
+    ];
+
+    expect(findDuplicateEventIds(events, COMPLETE)).toEqual(new Set());
+  });
+
+  it('does not flag repeated hook deliveries', () => {
+    const events = [
+      event('hook_created', { correlationId: 'hook_a' }),
+      event('hook_received', { correlationId: 'hook_a' }),
+      event('hook_received', { correlationId: 'hook_a' }),
+      event('hook_disposed', { correlationId: 'hook_a' }),
+    ];
+
+    expect(findDuplicateEventIds(events, COMPLETE)).toEqual(new Set());
+  });
+
+  it('flags a second start of the run, which carries no correlation id', () => {
+    const started = event('run_started');
+    const startedAgain = event('run_started');
+
+    expect(findDuplicateEventIds([started, startedAgain], COMPLETE)).toEqual(
+      new Set([startedAgain.eventId])
+    );
+  });
+
+  it('leaves a second outcome for the run alone', () => {
+    // Nothing consumes the run's own terminal events: the runtime exits rather
+    // than replaying the body once the log holds one. A second is a fault
+    // worth seeing, not a repeat the run passed over.
+    const completed = event('run_completed');
+    const cancelled = event('run_cancelled');
+
+    expect(findDuplicateEventIds([completed, cancelled], COMPLETE)).toEqual(
+      new Set()
+    );
+  });
+
+  it('folds in log order, not in createdAt order', () => {
+    const created = event('wait_created', { correlationId: 'wait_a', at: 1 });
+    const completed = event('wait_completed', {
+      correlationId: 'wait_a',
+      at: 3,
+    });
+    // The repeat entered before the completion it lost to and only took its
+    // log position afterwards, so its createdAt is the earliest of the three.
+    const createdAgain = event('wait_created', {
+      correlationId: 'wait_a',
+      at: 0,
+    });
+
+    expect(
+      findDuplicateEventIds([created, completed, createdAgain], COMPLETE)
+    ).toEqual(new Set([createdAgain.eventId]));
+  });
+
+  it('folds in log order, not in occurredAt order', () => {
+    const created = event('wait_created', { correlationId: 'wait_a' });
+    const completed = event('wait_completed', { correlationId: 'wait_a' });
+    // occurredAt is measured on the writer's clock, which can run behind.
+    const createdAgain = event('wait_created', {
+      correlationId: 'wait_a',
+      occurredAt: -60,
+    });
+
+    expect(
+      findDuplicateEventIds([created, completed, createdAgain], COMPLETE)
+    ).toEqual(new Set([createdAgain.eventId]));
+  });
+
+  it('gives the same answer whichever way the caller sorted', () => {
+    const events = [
+      event('wait_created', { correlationId: 'wait_a' }),
+      event('wait_completed', { correlationId: 'wait_a' }),
+      event('wait_created', { correlationId: 'wait_a' }),
+    ];
+
+    const ascending = findDuplicateEventIds(events, COMPLETE);
+    const descending = findDuplicateEventIds([...events].reverse(), COMPLETE);
+
+    expect(ascending).toEqual(new Set([events[2].eventId]));
+    expect(descending).toEqual(ascending);
+  });
+
+  it('gives the same answer on tied timestamps whichever way the caller sorted', () => {
+    // Two replays that stamped the same millisecond. Only the log position
+    // separates them, so the answer must not depend on the caller's order.
+    const events = [
+      event('wait_created', { correlationId: 'wait_a', at: 5 }),
+      event('wait_completed', { correlationId: 'wait_a', at: 5 }),
+      event('wait_created', { correlationId: 'wait_a', at: 5 }),
+    ];
+
+    const ascending = findDuplicateEventIds(events, COMPLETE);
+    const descending = findDuplicateEventIds([...events].reverse(), COMPLETE);
+
+    expect(ascending).toEqual(new Set([events[2].eventId]));
+    expect(descending).toEqual(ascending);
+  });
+
+  it('classifies a ULID log whose timestamps corroborate its ids', () => {
+    const created = ulidEvent('wait_created', { correlationId: 'wait_a' });
+    const completed = ulidEvent('wait_completed', { correlationId: 'wait_a' });
+    const createdAgain = ulidEvent('wait_created', { correlationId: 'wait_a' });
+
+    expect(
+      findDuplicateEventIds([created, completed, createdAgain], COMPLETE)
+    ).toEqual(new Set([createdAgain.eventId]));
+  });
+
+  it('classifies nothing on a ULID log whose timestamps contradict its ids', () => {
+    // A ULID carries no log position: one backend returns such a log in
+    // createdAt order and another in id order, and createdAt is stamped when
+    // the write arrives rather than when it commits. With the two orders
+    // disagreeing, which wait_created the run acted on depends on the backend,
+    // so naming either would be a guess.
+    const created = ulidEvent('wait_created', { correlationId: 'wait_a' });
+    const completed = ulidEvent('wait_completed', { correlationId: 'wait_a' });
+    const createdAgain = ulidEvent('wait_created', {
+      correlationId: 'wait_a',
+      at: -60,
+    });
+
+    expect(
+      findDuplicateEventIds([created, completed, createdAgain], COMPLETE)
+    ).toEqual(new Set());
+  });
+
+  it('classifies nothing past the point the run diverged', () => {
+    // The step finished without a step_started, so the runtime reports
+    // divergence on the first trailing start and exits. The second start and
+    // the wait's repeat after it went unread, and neither is a repeat the run
+    // passed over. The wait's repeat before it still is.
+    const events = [
+      event('wait_created', { correlationId: 'wait_a' }),
+      event('wait_completed', { correlationId: 'wait_a' }),
+      event('wait_created', { correlationId: 'wait_a' }),
+      event('step_created', { correlationId: 'step_a' }),
+      event('step_completed', { correlationId: 'step_a' }),
+      event('step_started', { correlationId: 'step_a' }),
+      event('step_started', { correlationId: 'step_a' }),
+      event('wait_created', { correlationId: 'wait_a' }),
+    ];
+
+    expect(findDuplicateEventIds(events, COMPLETE)).toEqual(
+      new Set([events[2].eventId])
+    );
+  });
+
+  it('classifies nothing when the caller holds part of the log', () => {
+    // A newest-first page can open on the repeat and omit the event it
+    // repeats, which would invert the answer.
+    const events = [
+      event('wait_completed', { correlationId: 'wait_a' }),
+      event('wait_created', { correlationId: 'wait_a' }),
+    ];
+
+    expect(findDuplicateEventIds(events, { isCompleteHistory: false })).toEqual(
+      new Set()
+    );
+  });
+
+  it('skips events with no id, which callers cannot match on', () => {
+    const anonymous = (eventType: EventType) =>
+      ({
+        ...event(eventType, { correlationId: 'wait_a' }),
+        eventId: undefined,
+      }) as unknown as Event;
+
+    expect(
+      findDuplicateEventIds(
+        [
+          anonymous('wait_created'),
+          anonymous('wait_completed'),
+          anonymous('wait_created'),
+        ],
+        COMPLETE
+      )
+    ).toEqual(new Set());
+  });
+});
+
+/**
+ * The other half of these runs against `EventsConsumer` in `@workflow/core`,
+ * so a fixture whose expectation moves fails on both sides.
+ */
+describe('shared duplicate-event fixtures', () => {
+  for (const fixture of DUPLICATE_EVENT_FIXTURES) {
+    it(`classifies the right events: ${fixture.name}`, () => {
+      const events = fixture.events.map((spec, index) =>
+        event(spec.eventType, { correlationId: spec.entity, slot: index + 1 })
+      );
+
+      expect(findDuplicateEventIds(events, COMPLETE)).toEqual(
+        new Set(fixture.ignoredIndices.map((index) => events[index].eventId))
+      );
+    });
+  }
+});