ToolbarStat
Małe liczby tylko do odczytu dla sesji: czas, wykorzystany kontekst i subagenci. Wybierz ToolbarStat dla każdej innej liczby; pozostałe trzy formatują swoją wartość i same zmieniają ton.
- ToolbarStat
- SessionClock
- ContextStat
- SubagentStat
PodglądLink do sekcji Podgląd
Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.
Dzień, podgląd: ToolbarStat
Session time: 47:21Ran for: 3:01:01Context: 48.2K · 24%Context: 183.4K · 92%Subagents: 3 · 1 runningSubagents: 0Tool calls: 14
Noc, podgląd: ToolbarStat
Session time: 47:21Ran for: 3:01:01Context: 48.2K · 24%Context: 183.4K · 92%Subagents: 3 · 1 runningSubagents: 0Tool calls: 14
Wysoki kontrast, podgląd: ToolbarStat
Session time: 47:21Ran for: 3:01:01Context: 48.2K · 24%Context: 183.4K · 92%Subagents: 3 · 1 runningSubagents: 0Tool calls: 14
UżycieLink do sekcji Użycie
import { ToolbarStat, SessionClock, ContextStat, SubagentStat } from '@skribly/ui/agents'<SessionClock label={t('time')} since={session.startedAt} />
<ContextStat label={t('context')} tokens={48210} window={200000} />
<SubagentStat label={t('subagents')} count={3} running={1} runningLabel={(n) => t('running', { n })} />
<ToolbarStat label={t('toolCalls')} value="14" icon={<Wrench />} />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ść
- Każda liczba odczytuje swoją etykietę przed wartością, na przykład „Context: 48K · 24%”.
- Zegar jest elementem timer, którego czytniki ekranu nie ogłaszają przy każdym tyknięciu.
- Blisko limitu ContextStat przełącza się na ikonę ostrzeżenia i podbarwienie ostrzeżenia, a procent mówi to samo; SubagentStat mówi słowami, ilu działa.
- Liczby są tekstem i nie przyjmują fokusa.
Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.