Part 3: Debug Dashboard - Web UI for real-time agent

Tinker

Home Epics Part 3: Debug Dashboard - Web UI for real-time agent monitoringEdit

Part 3: Debug Dashboard - Web UI for real-time agent monitoring

Cancel

Title *

Project *

Description

## Scope

Build web dashboard for monitoring agents in real-time and viewing historical sessions.

## UI Components

### Main Dashboard (`/dashboard`)
- Agent status cards (one per agent type)
  - Name, status (busy/idle), current ticket
  - Last activity timestamp
  - Quick action buttons (view terminal, view logs)
- Recent activity feed
- Quick stats (active agents, tickets in progress, etc.)

### Agent Terminal View (`/dashboard/terminal/:agent_id`)
- Live terminal using xterm.js
- Auto-scroll to latest output
- ANSI color support
- Pause/resume streaming
- Download session log

### Session History (`/dashboard/sessions`)
- Table of past agent sessions
- Filter by agent, date range, status
- Click to view replay
- Export logs

## Tech Stack
- xterm.js for terminal emulation
- ActionCable for live updates
- Turbo/Stimulus for interactivity (or React/Vue if preferred)

## Acceptance Criteria

- Single page shows all agents at a glance
- Click through to live terminal for any agent
- Session history searchable and browsable
- Responsive design works on mobile