GUI Components

GUI Components

How the GUI composes chat, tool, event, plan, and compression views from a small set of renderer patterns.

ChatContent

ChatContent is the main dispatcher for chat rendering. It walks messages, groups them iteratively, and sends each item to the appropriate renderer rather than rendering everything directly in one place.

Role → component mapping

Role / message kind	Primary renderer
user	UserInput
assistant	AssistantInput
assistant content pipeline	ReasoningContent → Markdown → ToolsContent → DiffContent → Citations
tool	inline tool rendering inside ToolsContent
diff	DiffContent
context_file	ContextFiles
event	EventLog
plan	PlanBanner

This separation keeps message handling explicit and makes it easier to add new message kinds without changing the rest of the chat UI.

ToolsContent

ToolsContent renders tool output for many tool types, including 10+ distinct tools. It also supports nested subchats, but only up to 5 levels deep.

Tool status is shown with icons:

• ⏳ in progress
• ✅ success
• ❌ failure
• ☁️ waiting / queued

Tool confirmation and approval

Patch-like tools can trigger a confirmation popup. The UI can auto-approve those patch-like operations when the workflow allows it, so the confirmation step is not always manual.

EventLog and PlanBanner

EventLog shows event-style messages, while PlanBanner highlights plan-related state separately from ordinary chat content. Both follow the same pattern of giving special message types dedicated presentation instead of mixing them into generic text rendering.

Compression visibility

Compression is surfaced directly in the UI through dedicated cards such as compression_report and llm_segment_summary, so compression state remains visible instead of being hidden inside plain chat text.

See also: GUI Chat Flow, Hidden Roles and Plans