feat(FN-863): tokenize create-row input and select styling in Agents View

- Add tokenized input styling to AgentListModal create-row with themed placeholder and chip-like tokens
- Add custom select dropdown styling to AgentsView with color-matched appearance
- Add comprehensive tests for both AgentListModal and AgentsView token/select behavior
- Update Agents View README with tokenized input/select styling documentation
This commit is contained in:
gsxdsm
2026-04-04 06:01:35 -07:00
parent 911b7bd0c7
commit 904dfcbd9a
5 changed files with 159 additions and 1 deletions

View File

@@ -102,7 +102,7 @@ Manage AI agents with a dedicated control surface accessible from the main dashb
**Features**:
- **State Filter**: Styled dropdown to filter agents by state (All States, Idle, Active, Paused, Terminated) with Filter icon, aria-label, and consistent dashboard styling using design tokens (`--radius-sm`, `--border`, `--bg`, `--focus-ring`)
- **View Modes**: Board (compact grid) and list (detailed card) layouts, persisted to localStorage
- **Agent CRUD**: Create agents with name and role (create form uses `var(--radius-sm)` and `var(--bg-secondary)` tokens for consistent theme-aware styling), change state, update roles inline, delete terminated agents
- **Agent CRUD**: Create agents with name and role (create form's text input and role/type select both use tokenized styling — `var(--surface)`, `var(--text)`, `var(--border)`, `var(--radius-sm)`, `var(--focus-ring)` for consistent theme-aware rendering across all color themes and light/dark modes), change state, update roles inline, delete terminated agents
- **Health Monitoring**: Heartbeat-based health status (Healthy, Unresponsive, Starting, Paused, Terminated) using CSS variable references for theme consistency
- **Agent Detail**: Click any agent card to open a detail modal with full agent information. The modal uses component-local token aliases (`--bg-primary`, `--accent`, `--text-primary`, `--bg-hover`) mapped to global tokens (`--surface`, `--todo`, `--text`, `--card-hover`) for theme consistency. The **Settings** tab now includes **editable advanced settings** (heartbeat interval, max retries, task timeout, log level) persisted through `agent.metadata`. Empty fields revert to system defaults, invalid values block save with inline error messages