AgentOverview

Every 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

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, AgentOverview

Arrow keys pick a card; Enter or its number opens it.

@reviewer1Press 1 to open

Waiting for you~/work/shop-credit

● 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 docs2Press 2 to open

Done~/work/shop

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

All done. Three files changed, nothing staged.

Billing tests3Press 3 to open

Working~/work/shop-credit


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

Tests  3 passed

● Writing the summary to handoff.md

Shell4Press 4 to open

Ready~/work/shop

~/work/shop on main
$ git status --short
 M src/billing/invoice.ts
?? docs/credit-notes.md
$

Dark theme, AgentOverview

Arrow keys pick a card; Enter or its number opens it.

@reviewer1Press 1 to open

Waiting for you~/work/shop-credit

● 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 docs2Press 2 to open

Done~/work/shop

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

All done. Three files changed, nothing staged.

Billing tests3Press 3 to open

Working~/work/shop-credit


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

Tests  3 passed

● Writing the summary to handoff.md

Shell4Press 4 to open

Ready~/work/shop

~/work/shop on main
$ git status --short
 M src/billing/invoice.ts
?? docs/credit-notes.md
$

High contrast theme, AgentOverview

Arrow keys pick a card; Enter or its number opens it.

@reviewer1Press 1 to open

Waiting for you~/work/shop-credit

● 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 docs2Press 2 to open

Done~/work/shop

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

All done. Three files changed, nothing staged.

Billing tests3Press 3 to open

Working~/work/shop-credit


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

Tests  3 passed

● Writing the summary to handoff.md

Shell4Press 4 to open

Ready~/work/shop

~/work/shop on main
$ git status --short
 M src/billing/invoice.ts
?? docs/credit-notes.md
$

UsageLink to the section Usage

tsx

import { AgentOverview, AgentOverviewCard } from '@skribly/ui/agents'

tsx

<AgentOverview label={t('allSessions')} order={ids} onOpen={open}>
  {sessions.map((s, i) => (
    <AgentOverviewCard key={s.id} id={s.id} title={s.title} state={s.state} stateLabel={…} lines={s.screen} shortcut={String(i + 1)} />
  ))}
</AgentOverview>

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 grid list: arrow keys move in two dimensions, Enter opens the focused card and the digits 1 to 9 open the matching card.
Each card reads its title, state and folder; the screen picture is hidden from screen readers, who open the session to read it.
Blocked and done cards get a thick leading edge as well as their word.
Columns follow the width, down to one at 320px.

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