89db580ca4
Covers: app layout, initiatives list, initiative detail (4 tabs), agents page, inbox, settings (health + projects), and all dialogs.
175 lines
7.4 KiB
Markdown
175 lines
7.4 KiB
Markdown
# Agents Page (`/agents`)
|
|
|
|
Two-column layout: agent card list (320px) + agent output viewer.
|
|
|
|
## Default State
|
|
|
|
```
|
|
+============================================================================+
|
|
| CODEWALK DISTRICT |
|
|
| [ Initiatives ] [*Agents*] [ Inbox ] [ Settings ] |
|
|
+============================================================================+
|
|
| |
|
|
| Agents (7) [ Refresh ] |
|
|
| |
|
|
| [*All (7)*] [Running (2)] [Questions (1)] [Exited (3)] [Dismissed (1)] |
|
|
| |
|
|
| +-------------+ +------------------------------------------------------+|
|
|
| | | | Output: blue-fox-7 [ Stop ] ||
|
|
| | * blue-fox-7| |-----------------------------------------------------||\
|
|
| | [claude] | | [System] Starting task: Implement OAuth routes ||
|
|
| | [execute] | | ||
|
|
| | 2m ago | | > I'll start by examining the current auth setup. ||
|
|
| | | | ||
|
|
| |-------------| | [Tool Call] Read ||
|
|
| | | | file_path: src/auth/index.ts ||
|
|
| | red-elk-3 | | ||
|
|
| | [claude] | | [Result] ||
|
|
| | [research]| | import { Router } from 'express'; ||
|
|
| | 5m ago | | export function setupAuth(app) { ... ||
|
|
| | Answer -> | | ||
|
|
| | | | > Based on the existing code, I'll create the ||
|
|
| |-------------| | > OAuth module with the following structure... ||
|
|
| | | | ||
|
|
| | grey-owl-1| | [Tool Call] Write ||
|
|
| | [openai] | | file_path: src/auth/oauth.ts ||
|
|
| | [plan] | | ||
|
|
| | 1h ago | | [Result] ||
|
|
| | Exited | | File written successfully ||
|
|
| | | | ||
|
|
| |-------------| | --- Session End --- ||
|
|
| | ... | | [Cost: $0.12] [Duration: 2m 34s] ||
|
|
| | | | ||
|
|
| +-------------+ | [Following v] [Jump to bottom] ||
|
|
| +------------------------------------------------------+|
|
|
| 320px flex-1 |
|
|
+============================================================================+
|
|
```
|
|
|
|
## Filter Bar
|
|
|
|
```
|
|
[*All (7)*] [Running (2)] [Questions (1)] [Exited (3)] [Dismissed (1)]
|
|
^^^^^^^^^
|
|
active pill (filled background), each shows count badge
|
|
```
|
|
|
|
Filter options:
|
|
- **All**: Every agent
|
|
- **Running**: Status = `running`
|
|
- **Questions**: Status = `waiting_for_input`
|
|
- **Exited**: Status = `exited`, `completed`, `crashed`
|
|
- **Dismissed**: Status = `dismissed`
|
|
|
|
## Agent Card (in left list)
|
|
|
|
### Running Agent
|
|
```
|
|
+---------------------------+
|
|
| * blue-fox-7 [...] | <-- StatusDot (green) + name + actions menu
|
|
| [claude] [execute] | <-- provider badge + mode badge
|
|
| 2m ago | <-- relative timestamp
|
|
+---------------------------+
|
|
```
|
|
|
|
### Waiting for Input
|
|
```
|
|
+---------------------------+
|
|
| ? red-elk-3 [...] | <-- StatusDot (orange)
|
|
| [claude] [research] |
|
|
| 5m ago |
|
|
| Answer questions -> | <-- link to inbox
|
|
+---------------------------+
|
|
```
|
|
|
|
### Exited
|
|
```
|
|
+---------------------------+
|
|
| - grey-owl-1 [...] | <-- StatusDot (grey)
|
|
| [openai] [plan] |
|
|
| 1h ago |
|
|
+---------------------------+
|
|
```
|
|
|
|
## Agent Actions Menu ([...])
|
|
|
|
```
|
|
+---------------------------+
|
|
| Go to Inbox | <-- only when waiting_for_input
|
|
| Stop | <-- only when running/waiting
|
|
| Dismiss | <-- only when stopped/crashed/idle
|
|
| Delete | <-- destructive, when stopped/dismissed
|
|
+---------------------------+
|
|
```
|
|
|
|
## Agent Output Viewer (right panel)
|
|
|
|
### Header
|
|
```
|
|
+------------------------------------------------------------------------+
|
|
| Output: blue-fox-7 [!] [ Stop ] |
|
|
| ^ |
|
|
| connection error indicator (if disconnected) |
|
|
+------------------------------------------------------------------------+
|
|
```
|
|
|
|
### Output Content (dark zinc-900 background, monospace)
|
|
|
|
```
|
|
[System] Starting task: Implement OAuth routes <-- grey badge
|
|
|
|
> I'll start by examining the current auth setup. <-- white text
|
|
|
|
| [Tool Call] Read <-- blue left border
|
|
| file_path: src/auth/index.ts
|
|
|
|
| [Result] <-- green left border
|
|
| import { Router } from 'express';
|
|
| export function setupAuth(app) { ...
|
|
|
|
> Based on the existing code, I'll create the OAuth module. <-- white text
|
|
|
|
| [Tool Call] Write <-- blue left border
|
|
| file_path: src/auth/oauth.ts
|
|
|
|
| [Result] <-- green left border
|
|
| File written successfully
|
|
|
|
| [Error] <-- red left border
|
|
| Permission denied: /etc/hosts <-- red text
|
|
|
|
─── Session End ─── <-- divider
|
|
[Cost: $0.12] [Duration: 2m 34s] <-- badges
|
|
```
|
|
|
|
### Footer Controls
|
|
```
|
|
[Following v] [Jump to bottom]
|
|
^^^^^^^^^^^
|
|
toggles: Following / Paused
|
|
```
|
|
|
|
- **Following**: auto-scrolls to bottom as new output arrives
|
|
- **Paused**: stops auto-scroll (toggled when user scrolls up)
|
|
- **Jump to bottom**: scrolls to latest output
|
|
|
|
## No Agent Selected
|
|
|
|
```
|
|
+------------------------------------------------------------------------+
|
|
| |
|
|
| |
|
|
| - - - - - - - - - - - - - - - - |
|
|
| Select an agent to view output |
|
|
| - - - - - - - - - - - - - - - - |
|
|
| |
|
|
| |
|
|
+------------------------------------------------------------------------+
|
|
```
|
|
|
|
## Source
|
|
|
|
- `packages/web/src/routes/agents.tsx`
|
|
- `packages/web/src/components/AgentOutputViewer.tsx`
|
|
- `packages/web/src/components/AgentActions.tsx`
|