SessionViewer

SessionViewer renders a recorded AI coding-agent session (the captain pkg/ai/history JSON schema — Claude Code / Codex transcripts) as a vertical action log. Each entry sits on a tone-colored icon disc from the Flanksource “Agent Action Icons” set; user prompts/selections are right-aligned like a chat. Shell commands render inline as bash blocks and file ops as their cwd-relative path — the icon carries the verb. Tool responses expand behind a chevron, rendered bare (no panel chrome). The “3-dot” menu mirrors captain history filtering — toggle density and hide categories, tools or sources.

Source

Import

import { SessionViewer } from "@flanksource/clicky-ui/ai";

Demos

Default · Open in Storybook

Expanded · Open in Storybook

Without Reasoning · Open in Storybook

The props table documents the component-specific surface. Standard DOM attributes inherited from React, such as className, event handlers, and accessibility attributes, may also be accepted when the component’s prop type extends a native element.

Props

Prop	Type	Default	Description
batchSize	number	40	Rows added each time older content loads in `scrollable` mode. Defaults to 40.
className	string	—	—
defaultDensity	enum	—	Initial density override; undefined inherits the page/document density.
defaultExpanded	boolean	false	Expand each tool call's input/output by default. Defaults to false.
defaultTheme	enum	—	Initial theme override; undefined inherits the page/document `data-theme`.
headerActions	ReactNode	—	Controls rendered beside the 3-dot menu in the summary header.
initialPromptSummary	string	—	Optional short title that collapses the first user prompt until opened.
loadingOlder	boolean	false	Shows a "Loading earlier messages…" row above the transcript.
menuContainer	Element | null	—	Portal the 3-dot menu into this element instead of rendering it inline in the summary header — lets a host place the menu in its own toolbar while the filter/density state stays owned by the viewer. Ignored when `showMenu` is false; falls back to inline rendering when null/undefined.
menuHeader	ReactNode	—	Host controls rendered at the top of the 3-dot menu.
onPendingToolDecision	(…) => …	—	—
onReachStart	(…) => void	—	`scrollable` mode: called when the reader scrolls to the top with every row already rendered, to fetch older history. Prepended rows keep the reader's position.
pendingTools	readonly SessionPendingTool[]	[]	—
renderMessageBadge	(…) => ReactNode	—	Render content before each assistant message body.
scrollable	boolean	false	Own an internal scroll container that fills its parent's height: render only the newest screenful, stay pinned to the bottom (most recent activity), and backfill older rows as the reader scrolls up. Off by default, so inline consumers keep rendering the whole log in normal page flow. Requires a height-bounded parent.
scrollControls	enum	floating	Place transcript navigation in a persistent toolbar. Defaults to floating.
scrollResetKey	string	—	Stable identity used to reset the transcript window when switching sessions.
session*	SessionInput	—	A captain session: parsed `SessionEntry[]` or raw log text (JSON / JSONL).
showContextMeter	boolean	true	Show context usage in the summary header. Defaults to true.
showHeader	boolean	true	Show the summary header (model + action counts). Defaults to true.
showMenu	boolean	true	Show the 3-dot menu (density + category/tool/source filters). Defaults to true.
showRaw	boolean	false	Show a per-row raw JSON payload expander when available. Defaults to false.
showRowMetadata	boolean	false	Show per-row timestamp/source/model/turn/agent metadata. Defaults to false.
showThinking	boolean	true	Render assistant reasoning ("thinking") blocks. Defaults to true.
sizeTokens	SessionTokenSizer	—	Explicit menu actions only; never invoked automatically when a transcript loads.
windowSize	number	60	Rows rendered on first paint in `scrollable` mode. Defaults to 60.