TerminalBar
The 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
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, TerminalBar
Subagents: 3 · 1 runningContext: 48.2K · 24%Session time: 47:12
Answer the question in the terminal first.
Subagents: 3 · 1 runningContext: 48.2K · 24%Session time: 47:12
Dark theme, TerminalBar
Subagents: 3 · 1 runningContext: 48.2K · 24%Session time: 47:12
Answer the question in the terminal first.
Subagents: 3 · 1 runningContext: 48.2K · 24%Session time: 47:12
High contrast theme, TerminalBar
Subagents: 3 · 1 runningContext: 48.2K · 24%Session time: 47:12
Answer the question in the terminal first.
Subagents: 3 · 1 runningContext: 48.2K · 24%Session time: 47:12
UsageLink to the section Usage
import { TerminalBar } from '@skribly/ui/agents'<TerminalBar label={t('sessionTools')} isDisabled={blocked} disabledReason={t('answerFirst')} stats={<SessionClock label={t('time')} since={start} />}>
<ToolbarButton label={t('attach')} icon={<Paperclip />} />
</TerminalBar>Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- A React Aria toolbar: one tab stop, arrow keys move between its controls and Tab leaves.
- While isDisabled is set every button is off and disabledReason says why in words next to them.
- The figures wrap onto their own line on a narrow pane.
This demo runs through axe in all three themes on every test run. See what the tests check.