AgentBoard

Kilka sesji obok siebie, od jednej do trzech kolumn zależnie od szerokości samej tablicy. Wybierz ją dla głównego obszaru widoku agentów; ma miejsce na pusty stan, stan ładowania i komunikat na górze.

AgentBoard

PodglądLink do sekcji Podgląd

Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.

Dzień, podgląd: AgentBoard

@reviewer

Waiting for you

● Read src/release/notes.test.ts

Do you want to make this edit to notes.ts?
❯ 1. Yes
  2. Yes, and allow all edits this session
  3. No, and tell Claude what to do differently

  esc to cancel

Update search docs

Done

• Updated docs/releases.md
• Added an example for release notes

All done. Three files changed, nothing staged.

Search tests

Working

 ✓ notes headings (14 ms)
 ✓ version ordering (3 ms)
 ✓ date format per locale (5 ms)

Tests  3 passed

● Writing the summary to handoff.md

Noc, podgląd: AgentBoard

@reviewer

Waiting for you

● Read src/release/notes.test.ts

Do you want to make this edit to notes.ts?
❯ 1. Yes
  2. Yes, and allow all edits this session
  3. No, and tell Claude what to do differently

  esc to cancel

Update search docs

Done

• Updated docs/releases.md
• Added an example for release notes

All done. Three files changed, nothing staged.

Search tests

Working

 ✓ notes headings (14 ms)
 ✓ version ordering (3 ms)
 ✓ date format per locale (5 ms)

Tests  3 passed

● Writing the summary to handoff.md

Wysoki kontrast, podgląd: AgentBoard

@reviewer

Waiting for you

● Read src/release/notes.test.ts

Do you want to make this edit to notes.ts?
❯ 1. Yes
  2. Yes, and allow all edits this session
  3. No, and tell Claude what to do differently

  esc to cancel

Update search docs

Done

• Updated docs/releases.md
• Added an example for release notes

All done. Three files changed, nothing staged.

Search tests

Working

 ✓ notes headings (14 ms)
 ✓ version ordering (3 ms)
 ✓ date format per locale (5 ms)

Tests  3 passed

● Writing the summary to handoff.md

UżycieLink do sekcji Użycie

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>

Każda etykieta jest propem, więc aplikacja przekazuje własne słowa we własnym języku. Zobacz zasadę brak wbudowanego tekstu.

DostępnośćLink do sekcji Dostępność

Tablica jest nazwanym regionem i odczytuje swoje panele po kolei.
Poniżej 42 rem szerokości panele układają się w jednej kolumnie z minimalną wysokością, więc nic nie przewija się na boki przy 320 px ani powiększeniu 400%.
Ładowanie jest paskiem postępu typu polite z własną nazwą i ustawia aria-busy.
Komunikaty umieszczaj w notice jako Alert: ostrzeżenie albo błąd zachowuje ikonę i słowo, a komunikat leży w regionie na żywo typu polite od pierwszego renderowania, więc jest odczytywany, gdy się pojawi.

Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.