TraceTimeline

A vertical timeline of workflow events — commands, processes, tool calls, and application events — drawn along a connecting rail (╭ ├ ╰) with a status marker, duration, and source on each row.

Import: package:fleury/fleury.dart, or package:fleury/fleury_core.dart in browser code.

Usage

TraceTimeline(
  events: <TraceTimelineEntry>[
    TraceTimelineEntry(
      id: 't1',
      label: 'Resolve story',
      kind: TraceTimelineKind.command,
      status: TraceTimelineStatus.succeeded,
      timestamp: DateTime(2026, 6, 9, 10),
      duration: const Duration(milliseconds: 12),
    ),
    TraceTimelineEntry(
      id: 't2',
      label: 'Run tests',
      kind: TraceTimelineKind.command,
      status: TraceTimelineStatus.running,
      timestamp: DateTime(2026, 6, 9, 10, 0, 1),
    ),
    // A third event so the connector rail reads as a sequence
    // (╭ first → ├ middle → ╰ last), not a lone pair.
    TraceTimelineEntry(
      id: 't3',
      label: 'Publish report',
      kind: TraceTimelineKind.command,
      status: TraceTimelineStatus.queued,
    ),
  ],
)

Details

Up and Down move the selected event; PageUp, PageDown, Home, and End jump. Enter or a click activates an enabled event and calls onSelect. Ctrl+C copies the selected event.

Constructors

TraceTimeline()

Parameter	Type	Default	Description
events:	List<TraceTimelineEntry>	required	Source events to display, activate, and copy.
controller:	TraceTimelineController?	—	External selection and visible-range controller.
focusNode:	FocusNode?	—	Focus node used for keyboard navigation.
autofocus:	bool	false	Whether the timeline should request focus when mounted.
label:	String	'Trace timeline'	Semantic and visual label for the timeline.
showTimestamp:	bool	false	Prefix each row with the event’s TraceTimelineEntry.timestamp as a local HH:mm:ss clock, when one is set. Off by default — the row already shows elapsed duration; turn this on to anchor events to wall time as well.
copySelection:	bool	true	Whether Ctrl+C (and the semantic copy action) copies the selected event.
copyOptions:	TraceTimelineCopyOptions	const TraceTimelineCopyOptions()	Clipboard/export options for selected-event copy.
onSelect:	void Function(TraceTimelineSelectResult result)?	—	Called when the user activates an enabled event with Enter or a click.
onCopy:	void Function(TraceTimelineCopyResult result)?	—	Called after a copy attempt completes.

Source

TraceTimeline is defined in packages/fleury/lib/src/catalog/trace_timeline.dart.

Category: Agent surfaces · All widgets

Live demo

tracetimeline_example.dart

Restart Run Expand

Example · editable Revert Format

Widget example() => TraceTimeline(
  events: <TraceTimelineEntry>[
    TraceTimelineEntry(
      id: 't1',
      label: 'Resolve story',
      kind: TraceTimelineKind.command,
      status: TraceTimelineStatus.succeeded,
      timestamp: DateTime(2026, 6, 9, 10),
      duration: const Duration(milliseconds: 12),
    ),
    TraceTimelineEntry(
      id: 't2',
      label: 'Run tests',
      kind: TraceTimelineKind.command,
      status: TraceTimelineStatus.running,
      timestamp: DateTime(2026, 6, 9, 10, 0, 1),
    ),
    // A third event so the connector rail reads as a sequence
    // (╭ first → ├ middle → ╰ last), not a lone pair.
    TraceTimelineEntry(
      id: 't3',
      label: 'Publish report',
      kind: TraceTimelineKind.command,
      status: TraceTimelineStatus.queued,
    ),
  ],
);

Live preview

Live · interactive

click & type to interact ⓘ how this demo runs ⛶ Expand