# OpenClaw Dashboard 🦞

Self-hosted Web-UI zur Verwaltung von OpenClaw- und OpenCode-Instanzen.

## 🚀 Live Deployment

**URL:** https://ai-center.tail7b642c.ts.net/
**Auth:** `admin / openclaw`

## ✨ Features

- **Dashboard-Übersicht:** Live-Status aller Instanzen (Gateway, Modelle, System)
- **Config-Editor:** openclaw.json direkt bearbeiten mit Syntax-Highlighting
- **Log-Viewer:** Live-Logs des Gateway-Prozesses mit Auto-Refresh
- **Provider-Management:** API-Keys hinzufügen und verwalten
- **Model-Switcher:** Aktives Model wechseln mit allen verfügbaren Modellen
- **Quick Actions:** Gateway starten/stoppen/neustarten

## 🛠️ Tech Stack

- **Frontend:** Next.js 14 + React + Tailwind CSS + shadcn/ui
- **Backend:** Next.js API Routes
- **Auth:** Basic Auth (Middleware)
- **Deployment:** Node.js + Tailscale Funnel (HTTPS)
- **Design:** Dark Mode mit Apple/Vercel-Ästhetik

## 📦 Setup & Deployment

### 1. Dependencies installieren

```bash
cd /mnt/pve/Main-HDD/user-data/projects/openclaw-dashboard
npm install
```

### 2. Environment konfigurieren

```bash
cp .env.example .env
# Edit .env to change credentials
```

### 3. Server starten (Development)

```bash
npm run dev
```

### 4. Server starten (Production)

```bash
npm run build
PORT=3001 npm start
```

### 5. HTTPS via Tailscale Funnel

```bash
# Starte den Server
PORT=3001 npm start &

# Tailscale Funnel aktivieren (HTTPS)
tailscale funnel --bg 3001

# Funnel deaktivieren
tailscale funnel --https=443 off
```

## 🔐 Authentifizierung

Standard-Credentials:
- **Username:** `admin`
- **Password:** `openclaw`

Ändern in `.env`:
```
AUTH_USERNAME=your_username
AUTH_PASSWORD=your_password
```

## 📁 Projektstruktur

```
openclaw-dashboard/
├── app/
│   ├── api/              # API Routes
│   │   ├── status/       # Gateway Status
│   │   ├── config/       # Config Editor
│   │   ├── logs/         # Log Viewer
│   │   ├── providers/    # API Key Management
│   │   ├── models/       # Model Switcher
│   │   └── actions/     # Gateway Actions
│   ├── layout.tsx        # Root Layout
│   ├── page.tsx          # Main Page
│   └── globals.css       # Tailwind Styles
├── components/
│   ├── ui/               # shadcn/ui Components
│   ├── DashboardOverview.tsx
│   ├── ConfigEditor.tsx
│   ├── LogViewer.tsx
│   ├── ProviderManager.tsx
│   ├── ModelSwitcher.tsx
│   └── QuickActions.tsx
├── lib/
│   ├── db.ts             # SQLite Database
│   ├── openclaw.ts       # OpenClaw API Wrapper
│   └── utils.ts          # Utilities
├── middleware.ts         # Basic Auth Middleware
├── next.config.ts        # Next.js Config
├── Dockerfile           # Docker Build
└── docker-compose.yml    # Docker Compose
```

## 🌐 API Endpoints

| Endpoint | Method | Description |
|----------|--------|-------------|
| `/api/status` | GET | System status & Gateway status |
| `/api/config` | GET/POST | Get/update openclaw.json |
| `/api/logs` | GET | Get Gateway logs |
| `/api/providers` | GET/POST | Get/update provider API keys |
| `/api/models` | GET/POST | Get available models / switch model |
| `/api/actions` | POST | Execute gateway actions (start/stop/restart) |

## 🎨 Design

- **Colors:** Dark (#0a0a0a) + Orange (#f97316) + Cyan (#06b6d4)
- **Theme:** Dark Mode only
- **Responsive:** Desktop + Mobile
- **Animations:** Framer Motion (subtil)

## 🔧 Troubleshooting

### Server startet nicht
```bash
# Check logs
cat /tmp/dashboard.log

# Check port
lsof -i :3001
```

### Tailscale Funnel nicht erreichbar
```bash
# Check Tailscale status
tailscale status

# Check Funnel status
tailscale funnel status

# Reset Funnel
tailscale funnel reset
tailscale funnel --bg 3001
```

### Auth funktioniert nicht
```bash
# Prüfe .env Variablen
cat .env | grep AUTH

# Middleware neu kompilieren
npm run build
npm start
```

## 📝 TODO (Future Features)

- [ ] OpenCode Instanzen Integration
- [ ] Multi-Instance Support
- [ ] Real-time WebSocket Updates
- [ ] Advanced Analytics Dashboard
- [ ] Backup & Restore Configuration
- [ ] Custom Alerts & Notifications

## 📄 License

MIT

---

**Built with ❤️ for OpenClaw by Yannick**