---
name: dashboard
description: Web dashboard for managing skills, memory, and system status
metadata:
  version: "1.0.0"
  vibestack:
    main: false
    requires:
      - caddy
      - supervisor
---

# Dashboard Skill

Web-based control panel for the VibeStack agent machine.

## Features

- **Skills Overview**: View all installed skills, their status, and capabilities
- **Memory Browser**: Search and browse agent memory (conversations, findings, etc.)
- **Backup Management**: View backup status, trigger manual backups, restore
- **Logs Viewer**: Real-time log tailing with filtering
- **System Stats**: Disk, memory, CPU usage
- **Skill Discovery**: Browse and install new skills (via skill-downloader)

## Awareness

This dashboard is aware of:

### Caddy Configuration
- Reads `/skills/caddy/Caddyfile` and `snippets.d/*.caddy`
- Shows which domains/routes are configured
- Displays TLS certificate status

### Installed Skills
- Scans `/skills/*/SKILL.md` for all installed skills
- Parses YAML frontmatter for metadata (name, version, requires, etc.)
- Shows skill dependencies and relationships
- Reads skill documentation for capabilities

### Extensibility
- **skill-downloader** (planned): Install new skills from git repositories
- **skill-creator** (planned): Create new skills from templates or AI generation

## Configuration

### Environment Variables

| Variable | Default | Description |
|----------|---------|-------------|
| `DASHBOARD_PORT` | `3000` | Dashboard port |
| `DASHBOARD_DOMAIN` | (none) | Domain for Caddy auto-config |
| `SUPERVISOR_URL` | `http://localhost:9001` | Supervisor XML-RPC URL |
| `MEMORY_URL` | `http://localhost:8081` | Memory API URL |

## Tech Stack

- **Vite** - Build tool
- **React 18** - UI framework
- **TypeScript** - Type safety
- **Tailwind CSS** - Styling
- **Lucide React** - Icons
- **React Query** - Data fetching

## API Endpoints

The dashboard backend provides:

```
GET  /api/skills              # List all skills with metadata
GET  /api/skills/:name        # Get skill details
GET  /api/supervisor/status   # Process status from supervisor
POST /api/supervisor/:name/restart  # Restart a process
GET  /api/caddy/config        # Caddy configuration
GET  /api/system/stats        # System resource usage
GET  /api/logs/:skill         # Tail logs for a skill
```

## Pages

| Route | Description |
|-------|-------------|
| `/` | Overview dashboard with quick stats |
| `/skills` | All skills with status and controls |
| `/skills/:name` | Skill detail with docs and logs |
| `/memory` | Memory browser with search |
| `/backups` | Backup status and controls |
| `/logs` | Multi-skill log viewer |
| `/settings` | Caddy config, system settings |

## Caddy Integration

If `DASHBOARD_DOMAIN` is set, auto-registers with Caddy:

```caddyfile
dashboard.example.com {
    reverse_proxy localhost:3000
}
```

## Development

```bash
# Start in dev mode
cd /skills/dashboard/ui
npm run dev

# Build for production
npm run build
```

## Screenshots

```
┌─────────────────────────────────────────────────────────┐
│  VibeStack Dashboard                        [user] [⚙]  │
├─────────┬───────────────────────────────────────────────┤
│         │                                               │
│ Overview│  Skills: 8 running, 1 stopped                 │
│ Skills  │  Memory: 1,234 entries                        │
│ Memory  │  Last Backup: 2h ago ✓                        │
│ Backups │  Disk: 45% used                               │
│ Logs    │                                               │
│ Settings│  ┌─────────┐ ┌─────────┐ ┌─────────┐         │
│         │  │ postgres│ │  redis  │ │  caddy  │         │
│         │  │ ● run   │ │ ● run   │ │ ● run   │         │
│         │  └─────────┘ └─────────┘ └─────────┘         │
│         │                                               │
└─────────┴───────────────────────────────────────────────┘
```