fix(web-shared): shorten workflow-prefixed step names

.changeset/short-step-trace-names.md

@@ -0,0 +1,5 @@
+---
+'@workflow/web-shared': patch
+---
+
+Display short step names when observability events contain a workflow-prefixed name.

packages/web-shared/src/components/event-list-view.tsx

@@ -150,7 +150,7 @@ function getStatusDotColor(eventType: string): string {
  * Build a map from correlationId (stepId) → display name using step_created
  * events, and parse the workflow name from the run.
  */
-function buildNameMaps(
+export function buildNameMaps(
   events: Event[] | null,
   run: WorkflowRun | null
 ): {
@@ -164,7 +164,9 @@ function buildNameMaps(
     for (const event of events) {
       if (event.eventType === 'step_created' && event.correlationId) {
         const stepName = event.eventData?.stepName ?? '';
-        const parsed = parseStepName(String(stepName));
+        const parsed =
+          parseStepName(String(stepName)) ??
+          parseWorkflowName(String(stepName));
         correlationNameMap.set(
           event.correlationId,
           parsed?.shortName ?? stepName

packages/web-shared/src/components/workflow-traces/trace-span-construction.test.ts

@@ -1,6 +1,6 @@
 import type { Event, WorkflowRun } from '@workflow/world';
 import { describe, expect, it } from 'vitest';
-import { runToSpan } from './trace-span-construction';
+import { runToSpan, stepToSpan } from './trace-span-construction';
 import { otelTimeToMs } from './trace-time-utils';
 
 const date = (ms: number) => new Date(ms);
@@ -83,3 +83,29 @@ describe('runToSpan', () => {
     expect(data).not.toHaveProperty('occurredAt');
   });
 });
+
+describe('stepToSpan', () => {
+  it('uses the short name for a workflow-prefixed step name', () => {
+    const span = stepToSpan(
+      [
+        event({
+          eventType: 'step_created',
+          correlationId: 'step_1',
+          eventData: {
+            stepName: 'workflow//src/billing.ts//fetchInvoices',
+            input: null,
+          },
+        }),
+        event({
+          eventType: 'step_completed',
+          correlationId: 'step_1',
+          createdAt: date(2_000),
+          eventData: { result: null },
+        }),
+      ],
+      date(2_000)
+    );
+
+    expect(span?.name).toBe('fetchInvoices');
+  });
+});

packages/web-shared/src/components/workflow-traces/trace-span-construction.ts

@@ -236,7 +236,9 @@ export function stepToSpan(stepEvents: Event[], maxEndTime: Date): Span | null {
   if (!step) {
     return null;
   }
-  const parsedName = parseStepName(String(step.stepName));
+  const parsedName =
+    parseStepName(String(step.stepName)) ??
+    parseWorkflowName(String(step.stepName));
 
   const attributes = {
     resource: 'step' as const,

packages/web-shared/test/event-list-name.test.ts

@@ -0,0 +1,19 @@
+import type { Event } from '@workflow/world';
+import { describe, expect, it } from 'vitest';
+import { buildNameMaps } from '../src/components/event-list-view.js';
+
+describe('buildNameMaps', () => {
+  it('shortens workflow-prefixed step names', () => {
+    const event = {
+      eventType: 'step_created',
+      correlationId: 'step_fetch',
+      eventData: {
+        stepName: 'workflow//src/billing.ts//fetchInvoices',
+      },
+    } as unknown as Event;
+
+    const { correlationNameMap } = buildNameMaps([event], null);
+
+    expect(correlationNameMap.get('step_fetch')).toBe('fetchInvoices');
+  });
+});