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

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

2. Environment konfigurieren

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

3. Server starten (Development)

npm run dev

4. Server starten (Production)

npm run build
PORT=3001 npm start

5. HTTPS via Tailscale Funnel

# 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

# Check logs
cat /tmp/dashboard.log

# Check port
lsof -i :3001

Tailscale Funnel nicht erreichbar

# Check Tailscale status
tailscale status

# Check Funnel status
tailscale funnel status

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

Auth funktioniert nicht

# 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