AgentPane
One 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
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, AgentPane
@reviewerfeature/credit-notes
● Read src/billing/invoice.ts (212 lines) ● Read src/billing/invoice.test.ts Do you want to make this edit to invoice.ts? ❯ 1. Yes 2. Yes, and allow all edits this session 3. No, and tell Claude what to do differently esc to cancel
Answer the question in the terminal first.
Subagents: 3 · 1 runningContext: 48.2K · 24%Session time: 47:12
Dark theme, AgentPane
@reviewerfeature/credit-notes
● Read src/billing/invoice.ts (212 lines) ● Read src/billing/invoice.test.ts Do you want to make this edit to invoice.ts? ❯ 1. Yes 2. Yes, and allow all edits this session 3. No, and tell Claude what to do differently esc to cancel
Answer the question in the terminal first.
Subagents: 3 · 1 runningContext: 48.2K · 24%Session time: 47:12
High contrast theme, AgentPane
@reviewerfeature/credit-notes
● Read src/billing/invoice.ts (212 lines) ● Read src/billing/invoice.test.ts Do you want to make this edit to invoice.ts? ❯ 1. Yes 2. Yes, and allow all edits this session 3. No, and tell Claude what to do differently esc to cancel
Answer the question in the terminal first.
Subagents: 3 · 1 runningContext: 48.2K · 24%Session time: 47:12
UsageLink to the section Usage
import { AgentPane } from '@skribly/ui/agents'<AgentPane
state={session.state}
isSelected={picked}
header={<AgentPaneHeader title={session.title} state={<SessionStateChip … />} />}
footer={<TerminalBar label={t('tools')}>…</TerminalBar>}
>
<TerminalScreen label={session.title} text={lines} />
</AgentPane>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
- The pane is a region named by its header title, so screen reader users can move between sessions by landmark.
- The tinted frame repeats what the header says in words: the state chip and the checked box.
- In forced colours the selected and blocked frames get a thicker system-coloured border.
- The terminal screen is a named group that takes focus, so it can be scrolled from the keyboard.
This demo runs through axe in all three themes on every test run. See what the tests check.