feat: Workflow History V2 - basic events timeline

[adhityamamallan]

Summary

Implement basic events timeline in Workflow History, with list of events and simple jump-to-event functionality (no zoom or tooltip interactions just yet)

Test plan

Unit tests + ran locally.

Screen.Recording.2026-01-22.at.21.56.39.mov

Basic timeline

With the sticky header

On mobile

[Copilot]

Pull request overview

This PR introduces a timeline visualization feature for the workflow history view using the Visx library. The timeline provides a visual representation of event groups over time, allowing users to see the temporal relationship between different workflow events.

Changes:

• Added a new WorkflowHistoryTimeline component with Visx-based timeline visualization
• Implemented helper functions for timeline data processing and formatting
• Integrated timeline toggle button in the workflow history header
• Added comprehensive test coverage for helpers and the main component

Reviewed changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 12 comments.

Show a summary per file

File	Description
workflow-history-timeline.types.ts	Type definitions for timeline rows and component props
workflow-history-timeline.tsx	Main timeline component with Visx charts and virtualized rows
workflow-history-timeline.styles.ts	Styled components and CSS-in-JS styles for the timeline
workflow-history-timeline.constants.ts	Timeline layout constants (dimensions, padding)
get-timeline-row-from-event-group.ts	Helper to convert event groups to timeline row data
get-timeline-max-time-ms.ts	Helper to calculate timeline maximum time
format-tick-duration.ts	Helper to format time durations for axis ticks
get-timeline-row-from-event-group.test.ts	Comprehensive tests for row conversion logic
get-timeline-max-time-ms.test.ts	Tests for max time calculation
format-tick-duration.test.ts	Tests for duration formatting
workflow-history-timeline.test.tsx	Component integration tests
workflow-history-header.types.ts	Added timeline-related props to header
workflow-history-header.tsx	Added timeline toggle button and component integration
workflow-history-v2.tsx	Passed timeline props to header component

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The CSS selector & defs pattern[id^="striped-pattern-"] targets SVG pattern elements that are children of the animated bar. However, defs elements in SVG are typically direct children of the svg element, not nested within other elements. This selector may not work as intended. Verify that the animation is applied correctly or adjust the selector.

Suggested change

	'& defs pattern[id^="striped-pattern-"]': {
	animation: 'stripeMove 1s linear infinite',
	},

[adhityamamallan]

The animation is applied correctly.

[Copilot]

Using scrollbarWidth: 'none' hides the scrollbar but doesn't provide an alternative way for users to know the content is scrollable. Consider using -webkit-scrollbar styles to hide scrollbars on WebKit browsers as well, or provide visual indicators that the timeline content is scrollable horizontally.

Suggested change

scrollbarWidth: 'none',

[macrotim]

Does this mean that the button is available only once the workflow is started?

[adhityamamallan]

Yup, but that's any openable workflow. The protobuf->typescript generated file says that it can be non-null, but in practice that's never the case.

[macrotim]

I see that workflowStartTimeMs is checked again. Is this redundant?

[adhityamamallan]

workflowStartTimeMs is never non-null, but the timeline requires it for rendering the axis meaningfully. So I put the timeline behind this check.