89db580ca4
Covers: app layout, initiatives list, initiative detail (4 tabs), agents page, inbox, settings (health + projects), and all dialogs.
7.4 KiB
7.4 KiB
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.tsxpackages/web/src/components/AgentOutputViewer.tsxpackages/web/src/components/AgentActions.tsx