Advanced composition
Choose component families, project host data, and combine them into resilient terminal workflows.
Composition starts with projection, not layout. Decide what the host owns, project the smallest stable view model, then choose the component that expresses the user's job. Application patterns are proof of composition, not runtimes or domain frameworks.
Project before composing
- Keep provider objects, secrets, process handles, and persistence in the host.
- Project stable IDs, bounded labels, semantic status, and display-safe detail.
- Let components own local focus, selection, scrolling, and expansion.
- Translate typed outcomes into host policy and effects.
If a component needs a full domain object to paint one row, the boundary is too wide. If the host duplicates row focus or hit geometry, the boundary is too narrow.
Compose an agent conversation
| User job | Start with |
|---|---|
| Browse a long conversation | MessageThread |
| Paint incrementally arriving prose | StreamingMarkdown |
| Cite one source in context | SourceCitation |
| Review a source collection | CitationList |
| Inspect or control a tool run | ToolCallCard |
| Assemble the complete workspace | Agent Workbench |
The host owns provider messages, tool execution, permission policy, cancellation, and retry semantics. TermRock owns presentation state and returns requests. Do not encode one vendor's protocol in reusable thread or tool-card state.
Build a prompt composer
Choose tokens by editing behavior, not by visual resemblance.
| Content | Component |
|---|---|
| File, image, URL, or code attachment | AttachmentChip |
| Collapsed large paste | PasteChip |
| Atomic inline file, symbol, agent, or tool reference | InlineMention |
| Filtered command completion | SlashCommandMenu |
| Model choice with bounded metadata | ModelSelector |
| Safety or autonomy choice | AgentModeSelector |
| Context or token budget | ContextMeter |
Keep attachment and paste bodies in host storage. Project a safe label, kind, size, and status. Mentions behave as atomic draft tokens; completion replaces only its active trigger range so unrelated draft text survives.
Choose a data view by question
| Question | Component family |
|---|---|
| Trend over ordered numeric samples | Chart or Sparkline |
| One value against a range | Gauge |
| Distribution across buckets | Histogram |
| General hierarchy | Tree |
| Filesystem navigation and file actions | FileTree |
| Moderate dependency DAG | DependencyGraph |
| Nested operation latency | TraceWaterfall |
| Structured issue list | DiagnosticView |
| One issue anchored in source | CodeFrame |
Visualizations need a narrow-terminal fallback: summary values, a table, or a scrollable hierarchy. Dense or very large dependency graphs need a host-chosen filtered view rather than unreadable compression. Encode series, severity, and span status with labels or glyphs as well as color.
Promote to an application pattern deliberately
Use a pattern when several component families repeat as one workflow with shared responsive behavior. Keep the pattern host-neutral: it may coordinate component state and typed requests, but not fetch, execute, authorize, or persist.
Browse Application patterns for composition proofs. Read Interaction architecture before combining focus scopes or floating layers, and Customization before overriding individual component appearance.