Agents
The pieces of a view where several coding agents run side by side: panes with their state, the workspace tree, an overview of every session, the toolbar under a terminal and the steps of a pipeline. A session state always has a word and its own glyph shape, so colour never carries it alone, and every part reflows down to a 320px screen. Built to WCAG 2.2 AA as a target.
14 pages, 19 exports
- SessionStateChip
- AgentPane
- AgentPaneHeader
- AgentBoard
- WorkspaceTree
- WorkspaceRow
- AgentOverview
- AgentOverviewCard
- SessionPeek
- TerminalBar
- ToolbarButton
- ToolbarMenu
- ToolbarStat
- SessionClock
- ContextStat
- SubagentStat
- CommandList
- EffortChips
- PipelineStepNode
ImportLink to the section Import
Each group has its own entry, so an app that needs only this group loads only this group. Everything is also exported from @skribly/ui.
import { SessionStateChip, AgentPane, AgentPaneHeader, AgentBoard, … } from '@skribly/ui/agents'Pages in this groupLink to the section Pages in this group
- SessionStateChipThe state of one agent session: starting, working, waiting for you, done, ready or exited. Pick it wherever a session is listed; make it a button when the app can explain how the state was detected.SessionStateChip
- AgentPaneOne session on a board: a header, the terminal or chat, and a toolbar. Pick it for each agent or shell the user runs; the frame shows when the session waits for them or is picked for a broadcast.AgentPane
- AgentPaneHeaderThe title row of a pane: selection box, avatar, title, facts such as the branch, the state and the pane buttons. Pick it inside AgentPane; on a narrow pane the badges and buttons wrap instead of being cut.AgentPaneHeader
- AgentBoardSeveral sessions side by side, one to three columns by the board’s own width. Pick it for the main area of an agents view; it has room for an empty state, a loading state and a message on top.AgentBoard
- WorkspaceTreeThe sidebar of an agents view: each project, its main copy and worktrees, and the sessions in each, with the most urgent state rolled up. Pick it when sessions are grouped by where they run.WorkspaceTree, WorkspaceRow
- AgentOverviewEvery session at a glance as cards with the last lines of each screen, most urgent first. Pick it for a quick switcher across many sessions, often in a dialog behind a shortcut.AgentOverview, AgentOverviewCard
- SessionPeekA glance at a session’s screen next to its row, without opening it. Pick it for lists of sessions where switching costs a context change.SessionPeek
- TerminalBarThe strip under a terminal pane with tools that type into the session and figures about it. Pick it for any live agent session; turn it off while the agent waits for an answer.TerminalBar
- ToolbarButtonThe quiet button of agent toolbars, with an icon and optional text. Pick it inside a TerminalBar or a pane header; use Button elsewhere.ToolbarButton
- ToolbarMenuA small panel from a toolbar button for choices such as the model, plugins or slash commands. Pick it when a choice needs more than one control; use a menu for a plain list of actions.ToolbarMenu
- ToolbarStatSmall read-only figures for a session: time, context used and subagents. Pick ToolbarStat for any other figure; the three others format their value and switch tone on their own.ToolbarStat, SessionClock, ContextStat, SubagentStat
- CommandListThe slash commands of an agent behind a search field. Pick it in a ToolbarMenu or beside a composer, wherever the user picks one command to type into the session.CommandList
- EffortChipsOne choice among a few levels, such as how hard a model thinks. Pick it for three to six short options that fit on one line; use a Select for more.EffortChips
- PipelineStepNodeOne step of a pipeline of agents: its role, agent, prompt and status. Pick it for the nodes of a pipeline graph or a list of steps; steps of one stage run in parallel.PipelineStepNode