From 5808a30b5ffb2f3b0631b12d354791fd948cf7c9 Mon Sep 17 00:00:00 2001 From: Karthik Kalyanaraman Date: Wed, 19 Aug 2026 16:46:34 -0700 Subject: [PATCH 1/2] fix(web-shared): shorten workflow-prefixed step names --- .changeset/short-step-trace-names.md | 5 ++++ .../trace-span-construction.test.ts | 28 ++++++++++++++++++- .../trace-span-construction.ts | 4 ++- 3 files changed, 35 insertions(+), 2 deletions(-) create mode 100644 .changeset/short-step-trace-names.md diff --git a/.changeset/short-step-trace-names.md b/.changeset/short-step-trace-names.md new file mode 100644 index 0000000000..5ee3b23665 --- /dev/null +++ b/.changeset/short-step-trace-names.md @@ -0,0 +1,5 @@ +--- +'@workflow/web-shared': patch +--- + +Display short step names when trace events contain a workflow-prefixed name. diff --git a/packages/web-shared/src/components/workflow-traces/trace-span-construction.test.ts b/packages/web-shared/src/components/workflow-traces/trace-span-construction.test.ts index 4cfef4d013..4b417e0905 100644 --- a/packages/web-shared/src/components/workflow-traces/trace-span-construction.test.ts +++ b/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'); + }); +}); diff --git a/packages/web-shared/src/components/workflow-traces/trace-span-construction.ts b/packages/web-shared/src/components/workflow-traces/trace-span-construction.ts index 9a3578ea95..dfce8de3d4 100644 --- a/packages/web-shared/src/components/workflow-traces/trace-span-construction.ts +++ b/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, From 708ea3dabdb838ae09e3fd18f4d7c9d83d174122 Mon Sep 17 00:00:00 2001 From: Karthik Kalyanaraman Date: Wed, 19 Aug 2026 16:58:48 -0700 Subject: [PATCH 2/2] fix(web-shared): shorten event list step names --- .changeset/short-step-trace-names.md | 2 +- .../src/components/event-list-view.tsx | 6 ++++-- .../web-shared/test/event-list-name.test.ts | 19 +++++++++++++++++++ 3 files changed, 24 insertions(+), 3 deletions(-) create mode 100644 packages/web-shared/test/event-list-name.test.ts diff --git a/.changeset/short-step-trace-names.md b/.changeset/short-step-trace-names.md index 5ee3b23665..364434c3ab 100644 --- a/.changeset/short-step-trace-names.md +++ b/.changeset/short-step-trace-names.md @@ -2,4 +2,4 @@ '@workflow/web-shared': patch --- -Display short step names when trace events contain a workflow-prefixed name. +Display short step names when observability events contain a workflow-prefixed name. diff --git a/packages/web-shared/src/components/event-list-view.tsx b/packages/web-shared/src/components/event-list-view.tsx index aefa6b63da..19d57c418d 100644 --- a/packages/web-shared/src/components/event-list-view.tsx +++ b/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 diff --git a/packages/web-shared/test/event-list-name.test.ts b/packages/web-shared/test/event-list-name.test.ts new file mode 100644 index 0000000000..f3ea645491 --- /dev/null +++ b/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'); + }); +});