AgentOverview

Każda sesja na pierwszy rzut oka jako karty z ostatnimi liniami każdego ekranu, najpilniejsze pierwsze. Wybierz go do szybkiego przełączania między wieloma sesjami, często w oknie dialogowym za skrótem.

AgentOverview
AgentOverviewCard

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: AgentOverview

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

@reviewer1Press 1 to open

Waiting for you~/work/notes-search

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

Done~/work/notes

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

All done. Three files changed, nothing staged.

Search tests3Press 3 to open

Working~/work/notes-search


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

Tests  3 passed

● Writing the summary to handoff.md

Shell4Press 4 to open

Ready~/work/notes

~/work/notes on main
$ git status --short
 M src/release/notes.ts
?? docs/changelog.md
$

Noc, podgląd: AgentOverview

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

@reviewer1Press 1 to open

Waiting for you~/work/notes-search

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

Done~/work/notes

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

All done. Three files changed, nothing staged.

Search tests3Press 3 to open

Working~/work/notes-search


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

Tests  3 passed

● Writing the summary to handoff.md

Shell4Press 4 to open

Ready~/work/notes

~/work/notes on main
$ git status --short
 M src/release/notes.ts
?? docs/changelog.md
$

Wysoki kontrast, podgląd: AgentOverview

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

@reviewer1Press 1 to open

Waiting for you~/work/notes-search

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

Done~/work/notes

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

All done. Three files changed, nothing staged.

Search tests3Press 3 to open

Working~/work/notes-search


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

Tests  3 passed

● Writing the summary to handoff.md

Shell4Press 4 to open

Ready~/work/notes

~/work/notes on main
$ git status --short
 M src/release/notes.ts
?? docs/changelog.md
$

UżycieLink do sekcji Użycie

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>

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ść

Lista siatki React Aria: klawisze strzałek przesuwają w dwóch wymiarach, Enter otwiera kartę z fokusem, a cyfry od 1 do 9 otwierają odpowiadającą kartę.
Każda karta odczytuje swój tytuł, stan i folder; obraz ekranu jest ukryty przed czytnikami ekranu, których użytkownicy otwierają sesję, aby ją przeczytać.
Karty zablokowane i zakończone dostają grubą krawędź z przodu oraz swoje słowo.
Kolumny podążają za szerokością, aż do jednej przy 320 px.

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