Agenci
Elementy widoku, w którym obok siebie działa kilku agentów programistycznych: panele ze stanem, drzewo przestrzeni roboczej, przegląd każdej sesji, pasek pod terminalem i kroki potoku. Stan sesji zawsze ma słowo i własny kształt znaku, więc kolor nigdy nie niesie go sam, a każda część układa się aż do ekranu 320 px. Budowane z celem WCAG 2.2 AA.
Strony: 14, eksporty: 19
- SessionStateChip
- AgentPane
- AgentPaneHeader
- AgentBoard
- WorkspaceTree
- WorkspaceRow
- AgentOverview
- AgentOverviewCard
- SessionPeek
- TerminalBar
- ToolbarButton
- ToolbarMenu
- ToolbarStat
- SessionClock
- ContextStat
- SubagentStat
- CommandList
- EffortChips
- PipelineStepNode
ImportLink do sekcji Import
Każda grupa ma własny punkt wejścia, więc aplikacja, która potrzebuje tylko tej grupy, ładuje tylko ją. Wszystko jest też eksportowane z @skribly/ui.
import { SessionStateChip, AgentPane, AgentPaneHeader, AgentBoard, … } from '@skribly/ui/agents'Strony tej grupyLink do sekcji Strony tej grupy
- SessionStateChipStan jednej sesji agenta: uruchamianie, praca, czekanie na ciebie, gotowe, gotowość albo zakończenie. Wybierz go wszędzie, gdzie sesja jest wymieniona; zrób z niego przycisk, gdy aplikacja może wyjaśnić, jak wykryto stan.SessionStateChip
- AgentPaneJedna sesja na tablicy: nagłówek, terminal albo czat i pasek narzędzi. Wybierz go dla każdego agenta albo powłoki, którą uruchamia użytkownik; ramka pokazuje, gdy sesja czeka na użytkownika albo jest wybrana do rozgłaszania.AgentPane
- AgentPaneHeaderWiersz tytułu panelu: pole zaznaczenia, awatar, tytuł, fakty takie jak gałąź, stan i przyciski panelu. Wybierz go wewnątrz AgentPane; w wąskim panelu plakietki i przyciski zawijają się zamiast być ucinane.AgentPaneHeader
- AgentBoardKilka 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
- WorkspaceTreePanel boczny widoku agentów: każdy projekt, jego główna kopia i worktree oraz sesje w każdym, z zebranym najpilniejszym stanem. Wybierz go, gdy sesje są pogrupowane według miejsca, w którym działają.WorkspaceTree, WorkspaceRow
- AgentOverviewKaż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
- SessionPeekRzut oka na ekran sesji obok jej wiersza, bez otwierania. Wybierz go dla list sesji, w których przełączenie kosztuje zmianę kontekstu.SessionPeek
- TerminalBarPasek pod panelem terminala z narzędziami, które wpisują do sesji, i liczbami o niej. Wybierz go dla każdej sesji agenta na żywo; wyłącz go, gdy agent czeka na odpowiedź.TerminalBar
- ToolbarButtonCichy przycisk pasków narzędzi agenta, z ikoną i opcjonalnym tekstem. Wybierz go wewnątrz TerminalBar albo nagłówka panelu; gdzie indziej użyj Button.ToolbarButton
- ToolbarMenuMały panel z przycisku paska narzędzi dla wyborów, takich jak model, wtyczki albo polecenia ukośnikowe. Wybierz go, gdy wybór potrzebuje więcej niż jednej kontrolki; dla zwykłej listy akcji użyj menu.ToolbarMenu
- ToolbarStatMał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
- CommandListPolecenia ukośnikowe agenta za polem wyszukiwania. Wybierz go w ToolbarMenu albo obok Composer, wszędzie tam, gdzie użytkownik wybiera jedno polecenie do wpisania w sesji.CommandList
- EffortChipsJeden wybór spośród kilku poziomów, na przykład jak mocno myśli model. Wybierz go dla od trzech do sześciu krótkich opcji, które mieszczą się w jednej linii; dla większej liczby użyj Select.EffortChips
- PipelineStepNodeJeden krok potoku agentów: jego rola, agent, prompt i status. Wybierz go dla węzłów grafu potoku albo listy kroków; kroki jednego etapu działają równolegle.PipelineStepNode