AgentBoard

Several 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

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, AgentBoard

@reviewer

Waiting for you

● 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

Update billing docs

Done

• Updated docs/billing.md
• Added an example for credit notes

All done. Three files changed, nothing staged.

Billing tests

Working

 ✓ invoice totals (14 ms)
 ✓ tax rounding (3 ms)
 ✓ currency per locale (5 ms)

Tests  3 passed

● Writing the summary to handoff.md

Dark theme, AgentBoard

@reviewer

Waiting for you

● 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

Update billing docs

Done

• Updated docs/billing.md
• Added an example for credit notes

All done. Three files changed, nothing staged.

Billing tests

Working

 ✓ invoice totals (14 ms)
 ✓ tax rounding (3 ms)
 ✓ currency per locale (5 ms)

Tests  3 passed

● Writing the summary to handoff.md

High contrast theme, AgentBoard

@reviewer

Waiting for you

● 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

Update billing docs

Done

• Updated docs/billing.md
• Added an example for credit notes

All done. Three files changed, nothing staged.

Billing tests

Working

 ✓ invoice totals (14 ms)
 ✓ tax rounding (3 ms)
 ✓ currency per locale (5 ms)

Tests  3 passed

● Writing the summary to handoff.md

UsageLink to the section Usage

tsx

import { AgentBoard } from '@skribly/ui/agents'

tsx

<AgentBoard label={t('board', { workspace })} emptyState={<EmptyState … />} notice={offline ? <Alert … /> : null}>
  {sessions.map((s) => <AgentPane key={s.id} … />)}
</AgentBoard>

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 board is a named region and reads its panes in order.
Below 42rem of width the panes stack in one column with a minimum height, so nothing scrolls sideways at 320px or at 400% zoom.
Loading is a polite progress bar with its own name and sets aria-busy.
Put messages in notice as an Alert: a warning or an error keeps its icon and word, and the notice sits in a polite live region from the first render, so it is read out when it appears.

This demo runs through axe in all three themes on every test run. See what the tests check.