Live examples
Loading example…
Loading example…
The components
- RunBoardAll your runs on one board, grouped by what they need, with live clocks, the newest steps, filters and actions.
- AgentLanesWhere every agent is right now: a lane per agent on one time axis, with the hand-offs drawn between lanes.
- SubagentTreeParent and child runs as a tree with the message that spawned each child, and the cost of each branch.
- ExecutionTimelineA timed record of what happened during a run, as a list, a table or a waterfall with tokens and cost per step.
- WorkflowGraphSee a workflow’s branches, loops and joins as a graph, a list or an outline.
- AttentionQueueThe ordered list of approvals, questions, handoffs and failures waiting on a person.
- RunCompareTwo runs or checkpoints side by side: outcome, measurements, effects and timelines.
- ContextBarWhat the current request includes, with removable items.
- PlanA proposed plan with collapsible steps and a button to run it.
- AgentSteeringQueue a note for a running agent’s next step without stopping it, and see whether each note was applied.
- CostLedgerWhere the money went, run by run, with measured and estimated costs kept apart and never added together.
- ContextWindowMeterHow full the model’s context window is and what fills it, drawn to scale from the numbers your server supplies.
- MemoryPanelWhat the assistant remembers, with where each memory came from, how far it reaches and whether it was used just now.
- RunSummaryCardWhat a run did, for reading afterwards: the goal, the outcome, what it changed and what was left undone.
- BackgroundStatusA small persistent indicator for runs still going while the person is elsewhere.
Imports
Install once with npm install @stackunseen/ui, then import what you use.
tsx
import { RunBoard, AgentLanes, SubagentTree, AttentionQueue, RunCompare, AgentSteering, CostLedger, RunSummaryCard, BackgroundStatus } from '@stackunseen/ui/conversation-flow';
import { ExecutionTimeline, WorkflowGraph, ContextBar, ContextWindowMeter, MemoryPanel } from '@stackunseen/ui';
import { Plan } from '@stackunseen/ui/assistant';
import '@stackunseen/ui/styles.css';
import '@stackunseen/ui/conversation-flow.css';See them working together in Recoverable chat.