Skip to main content
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 from smithers-orchestrator/ui.
  • Message family: one chat turn with avatar, header, content, footer, and actions slots. MessageGroup clusters consecutive turns.
  • MessageBranch family: branch selector with previous/next/page controls for alternate completions.
  • Bubble family: 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 with useMessageScroller commands, useMessageVisibility, and useMessageScrollerState for 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-aware ReasoningSummary.
  • ChainOfThought: ordered step list; ChainOfThoughtStep is both the step model type and the row component.
  • ToolCall: legacy flat props or the compound header/content/input/output/error/approval anatomy. toolCallStatus maps tool states onto status tones.
  • CodeBlock: token-themed code with header, filename, multi-file groups, and tabs (see CodeBlock).
  • formatPartialJson repairs truncated JSON for streaming previews; parseAgentOutput normalizes agent envelopes for AgentOutput.

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

Review-surface families: 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

Canvas anatomy for workflow graphs. The gateway binding (SmithersCanvasNode, SmithersNodeHandles from smithers-orchestrator/gateway-ui) adapts these slots into WorkflowGraph nodeTypes.