Timeline

ActTimeline is the default Chakra timeline for a session. It turns the semantic entries from the headless timeline contract into messages, reasoning, tools, errors, and task surfaces.

Usage

HyperflowApp mounts the Timeline in its default session pages. Render ActTimeline inside a route that provides a sessionId when composing a custom Chakra session page.

import { ActTimeline } from '@hyperflow/chakra-ui'

export function SessionTimeline() {
  return <ActTimeline />
}

Examples

Replace the initial empty state

Use emptyStateComponent to change one state while retaining the default viewport, history pagination, and entry renderers.

import {
  ActTimeline,
  type TimelineEmptyStateProps,
} from '@hyperflow/chakra-ui'

function ProjectEmptyState({ message }: TimelineEmptyStateProps) {
  return <p>{message ?? 'Start the conversation with a question.'}</p>
}

export function SessionTimeline() {
  return <ActTimeline emptyStateComponent={ProjectEmptyState} />
}

Guide

Keep the timeline contract at the root

ActTimeline reads session history, streaming entries, and pagination from useTimeline. Custom renderers should receive their data from the supplied props rather than opening another history or streaming subscription.

Replace the smallest surface

Use the state component props for loading, error, and empty feedback. Use entryComponent for a different semantic entry mapping, or viewportComponent only when the scroll and history container itself must change.

Preserve history behavior

The default TimelineViewport owns scroll anchoring, loading older entries, and the return-to-bottom control. Keep it unless the new layout needs to own those behaviors.

Props

Related components

• TimelineViewport
• TimelineEntryView
• Timeline states
• Live timeline parts