smithers-orchestrator/ui ships a full set of agentic UI families with shadcn
component anatomy: compound slots, data-slot attributes, typed props, and
self-injected namespaced (sui-*) styles. Every component calls
useInjectUiCss() plus its lane fragment, so rendering any component is enough
to style it; rendering <SmithersUiStyles /> once at the root composes all
fragments in one sheet with the reduced-motion block last.
All families are correct in light and dark themes and honor
prefers-reduced-motion.
Naming reconciliation
The agentic-ui program planned some names that collided with existing exports, so the frozen collision policy shipped them under collision-free names. The shipped names are the contract:Conversation
Compound transcript primitives fromsmithers-orchestrator/ui.
Messagefamily: one chat turn with avatar, header, content, footer, and actions slots.MessageGroupclusters consecutive turns.MessageBranchfamily: branch selector with previous/next/page controls for alternate completions.Bubblefamily: lightweight bubble layout with content, actions, and reactions slots.MessageScroller: both a drop-in scrollport (existing API) and a compound provider/viewport/content/item/button anatomy withuseMessageScrollercommands,useMessageVisibility, anduseMessageScrollerStatefor streaming transcripts.CompactGroup,ConversationCheckpoint,Marker,Shimmer: transcript density, checkpoint separators, and streaming placeholders.
Prompt and attachments
PromptInput is a controlled composer form with submit/stop states
(ready | submitted | streaming | error) and an action menu; the attachments
context (usePromptInputAttachments) drives the Attachment compound, which
renders upload states (uploading | processing | ready | error) with preview
and remove slots.
Reasoning and tools
Reasoning: collapsible reasoning trace with a streaming-awareReasoningSummary.ChainOfThought: ordered step list;ChainOfThoughtStepis both the step model type and the row component.ToolCall: legacy flat props or the compound header/content/input/output/error/approval anatomy.toolCallStatusmaps tool states onto status tones.CodeBlock: token-themed code with header, filename, multi-file groups, and tabs (see CodeBlock).formatPartialJsonrepairs truncated JSON for streaming previews;parseAgentOutputnormalizes agent envelopes forAgentOutput.
Plans, tasks, and queues
Plan renders a step plan (legacy props or compound anatomy) with per-step
status; AgentTask is a collapsible unit of agent work; Queue lists pending
and completed work in sections; ActivityTimeline groups run activity into
labeled clusters.
Approvals and checkpoints
Confirmation renders the approval lifecycle (pending, accepted, rejected)
with action slots; ApprovalCard adds risk level, affected resources, and a
reviewer note; Checkpoint presents a durability checkpoint with restore,
fork, replay, rewind, and return-to-live actions. Gateway-bound wrappers live
in smithers-orchestrator/gateway-ui as GatewayApprovalList,
GatewayApprovalConfirmation, and GatewayCheckpointControls.
Sources and citations
Sources lists cited origins; InlineCitation anchors inline references with
card, carousel, and quote companions; Suggestion renders follow-up prompts;
OpenInChat deep-links a subject into a chat surface.
Agents and context
AgentDefinition documents an agent (instructions, tools, output schema) with
availability badges; ModelSelector is a grouped model picker built on
Select; ContextUsage breaks down token usage (input, output, reasoning,
cache) in a popover anatomy.
Coding artifacts
TestResults (suite/test rows with status and
duration), Commit (hash, author, files), ChangeSummary, StackTrace
(parsed frames via parseStackTrace), Artifact (side-panel container),
plus Snippet, PackageInfo, SchemaDisplay, EnvironmentVariables, and
SecretField for redacted secrets.
Sandbox previews
AgentSandbox shows sandbox lifecycle state; WebPreview embeds a sandboxed
iframe preview with toolbar and address slots; JSXPreview renders an inert
React subtree.
Workflow canvas
SmithersCanvasNode, SmithersNodeHandles from
smithers-orchestrator/gateway-ui) adapts these slots into
WorkflowGraph nodeTypes.