Tableau de bord de l'agent OpenClaw

Un tableau de bord de surveillance beau, sécurisé et en temps réel pour les agents OpenClaw. Suivez les sessions, surveillez l'utilisation de l'API, consultez les coûts, gérez les fichiers mémoire et gardez un œil sur la santé du système — le tout en un seul endroit.

📸 Captures d'écran

Aperçu	Sessions	Coûts

Limites de débit	Flux en direct	Journaux

✨ Fonctionnalités

• 🤖 Gestion des sessions - Visualiser toutes les sessions d'agents avec le statut d'activité en temps réel
• 📊 Surveillance des limites de débit - Suivre l'utilisation des API Claude et Gemini sur des fenêtres glissantes
• 💰 Analyse des coûts - Répartition détaillée des dépenses par modèle, session et période
• ⚡ Flux en direct - Flux en temps réel des messages des agents sur toutes les sessions
• 🧠 Visionneuse de mémoire - Parcourir et lire les fichiers mémoire des agents (MEMORY.md, HEARTBEAT.md, notes quotidiennes)
• 📁 Gestionnaire de fichiers - Visualiser et modifier les fichiers de l'espace de travail, les compétences et les configurations avec renforcement de la sécurité
• 📈 Santé du système - Surveillance du CPU, RAM, disque, température avec sparklines
• 🔄 Contrôle des services - Actions rapides pour redémarrer OpenClaw, le tableau de bord ou d'autres services
• 📋 Visionneuse de journaux - Journaux système en temps réel avec actualisation automatique
• ⏰ Gestion des tâches Cron - Voir, activer/désactiver et déclencher manuellement les tâches cron
• 🌐 Intégration Tailscale - Voir le statut Tailscale, l'IP et les pairs connectés
• 🎯 Carte de chaleur d'activité - Visualiser les heures de pointe d'utilisation sur les 30 derniers jours
• 🔥 Suivi des séquences - Surveiller les séquences d'activité quotidiennes
• 🔍 Recherche et filtrage des sessions - Filtrer par statut, modèle, plage de dates avec recherche en direct
• 🎨 Thème sombre/clair - Basculer entre les modes sombre et clair avec préférence persistante
• ⌨️ Raccourcis clavier - Naviguer rapidement avec des touches de raccourci (1-7, Espace, /, Échap, ?)
• 📱 Adapté aux mobiles - Fonctionne sur les téléphones et tablettes
• 🔔 Notifications navigateur - Être alerté lorsque les limites d'utilisation approchent
• 📊 Vue chronologique - Chronologie visuelle de l'activité des sessions
• 💾 Activité Git - Suivre les commits récents sur vos dépôts
• 🎛️ Extracteur d'utilisation Claude - Récupérer les données d'utilisation réelles depuis Claude Code CLI
• 🔷 Suivi d'utilisation Gemini - Surveiller l'utilisation des modèles Google Gemini avec répartition par modèle

🚀 Démarrage rapide```bash

Clone the repository

git clone https://github.com/tugcantopaloglu/openclaw-dashboard.git cd openclaw-dashboard

Set your OpenClaw workspace path (optional, auto-detects if not set)

export WORKSPACE_DIR=/path/to/your/openclaw/workspace

Start the dashboard

node server.js

Visitez `http://localhost:7000` dans votre navigateur. Lors de la première visite, vous verrez un **écran d'inscription** où vous créez votre nom d'utilisateur et votre mot de passe. Après l'inscription, connectez-vous avec vos identifiants.

## 📦 Installation

### Prérequis

- **Node.js** v18 ou supérieur (vérifiez avec `node --version`)
- **OpenClaw** installé et en cours d'exécution
- **Systemd** (optionnel, pour l'installation en tant que service sur Linux)

#### Dépendances optionnelles

| Outil | Requis pour | Installation |
|------|-------------|---------|
| `jq` | Page de gestion Docker | `sudo apt install jq` |
| `tmux` | Scraper d'utilisation de Claude CLI | `sudo apt install tmux` |
| `python3` | Analyseur d'utilisation de Claude CLI | Généralement pré-installé |
| `docker` | Page de gestion Docker | [docs.docker.com](https://docs.docker.com/engine/install/) |

### Installation manuelle

1. **Clonez le dépôt**   ```bash
   git clone https://github.com/tugcantopaloglu/openclaw-dashboard.git
   cd openclaw-dashboard

2. Configurer l'environnement (optionnel) ```bash export DASHBOARD_PORT=7000 export WORKSPACE_DIR=/path/to/your/workspace export OPENCLAW_DIR=$HOME/.openclaw export OPENCLAW_AGENT=main
   root@kitploit:~

3. Démarrer le serveur ```bash node server.js
   root@kitploit:~

Le serveur affichera : ``` 🚀 Dashboard running on http://localhost:7000 🔑 Recovery token: abc123def456...

**Enregistrez le jeton de récupération** — vous en aurez besoin si vous oubliez votre mot de passe.

4. **Accédez au tableau de bord**
Ouvrez `http://localhost:7000` et créez votre compte.

### Systemd Service (install.sh)

Pour exécuter le tableau de bord en tant que service système avec démarrage automatique et récupération après crash :```bash
sudo ./install.sh

This will:

• Créer /etc/systemd/system/agent-dashboard.service
• Créer la configuration de remplacement dans /etc/systemd/system/agent-dashboard.service.d/override.conf
• Activer et démarrer le service
• Définir le chemin de votre espace de travail et générer un jeton de récupération

Voir les logs:```bash journalctl -u agent-dashboard -f

### Docker```bash
# Build
docker build -t openclaw-dashboard .

# Run
docker run -d \
  --name openclaw-dashboard \
  -p 3001:3001 \
  -e WORKSPACE_DIR=/app/workspace \
  -e DASHBOARD_ALLOW_HTTP=true \
  -v ~/.openclaw:/home/node/.openclaw:ro \
  -v ~/.openclaw/workspace:/app/workspace \
  openclaw-dashboard

Pour l'accès à la page de gestion Docker, passez le socket Docker :```bash docker run -d
--name openclaw-dashboard
-p 3001:3001
-e WORKSPACE_DIR=/app/workspace
-e DASHBOARD_ALLOW_HTTP=true
-v ~/.openclaw:/home/node/.openclaw:ro
-v ~/.openclaw/workspace:/app/workspace
-v /var/run/docker.sock:/var/run/docker.sock:ro
--group-add $(stat -c '%g' /var/run/docker.sock)
openclaw-dashboard

### Variables d'environnement

| Variable | Description | Par défaut |
|----------|-------------|---------|
| `DASHBOARD_PORT` | Port du serveur | `7000` |
| `DASHBOARD_TOKEN` | Jeton de récupération pour la réinitialisation du mot de passe | Généré automatiquement au démarrage |
| `WORKSPACE_DIR` | Chemin de l'espace de travail OpenClaw | `$OPENCLAW_WORKSPACE` ou répertoire courant |
| `OPENCLAW_DIR` | Répertoire de configuration OpenClaw | `~/.openclaw` |
| `OPENCLAW_AGENT` | ID de l'agent à surveiller | `main` |
| `DASHBOARD_ALLOW_HTTP` | Autoriser HTTP depuis des IP non locales | `false` |

**Exemples :**```bash
# Custom port
DASHBOARD_PORT=8080 node server.js

# Custom recovery token
DASHBOARD_TOKEN=my_secret_token_12345 node server.js

# Different workspace
WORKSPACE_DIR=/mnt/data/openclaw node server.js

🔐 Authentification

Le tableau de bord utilise l'authentification par nom d'utilisateur et mot de passe avec des sessions sécurisées côté serveur.

Première inscription

1. Visitez l'URL du tableau de bord (par ex. http://localhost:7000)
2. Vous verrez un écran d'inscription
3. Choisissez un nom d'utilisateur et un mot de passe
4. Cliquez sur S'inscrire
5. Connectez-vous avec vos nouvelles identifiants

Connexion

• Entrez votre nom d'utilisateur et mot de passe
• Cochez éventuellement "Se souvenir de moi" pour rester connecté pendant 3 heures (utilise localStorage)
• Sans "Se souvenir de moi", votre session dure uniquement jusqu'à la fermeture du navigateur (utilise sessionStorage)

Sécurité du mot de passe

• Hachage PBKDF2 — 100 000 itérations avec SHA-512
• Sel aléatoire — Unique par mot de passe
• Sessions côté serveur — Les mots de passe ne sont jamais stockés dans le navigateur, seulement les jetons de session
• Comparaisons à temps constant — Empêche les attaques temporelles sur la vérification du mot de passe

Limitation de taux

Pour empêcher les attaques par force brute :

• 5 tentatives de connexion échouées → Verrouillage temporaire de 15 minutes
• 20 tentatives de connexion échouées → Verrouillage permanent (nécessite un redémarrage du service)
• Les limites de taux sont en mémoire et réinitialisées lors du redémarrage du service

🔑 Authentification multi-facteurs (MFA)

Ajoutez une couche de sécurité supplémentaire avec des mots de passe à usage unique basés sur le temps (TOTP).

Activation du MFA

1. Connectez-vous au tableau de bord
2. Allez à la page Sécurité (barre latérale)
3. Cliquez sur "Activer le MFA"
4. Un code QR apparaît — scannez-le avec votre application d'authentification :
   • Google Authenticator (iOS, Android)
   • Authy (iOS, Android, Desktop)
   • Microsoft Authenticator (iOS, Android)
   • 1Password, Bitwarden, ou toute application compatible TOTP
5. Entrez le code à 6 chiffres affiché dans votre application pour vérifier
6. Le MFA est maintenant actif ! 🎉

Utilisation du MFA

Une fois activé, chaque connexion nécessite :

1. Votre nom d'utilisateur et mot de passe (comme d'habitude)
2. Un code TOTP à 6 chiffres de votre application d'authentification

• Les codes sont actualisés toutes les 30 secondes
• Le tableau de bord accepte les codes avec une tolérance de ±1 fenêtre pour les dérives d'horloge (30 secondes avant/après)

Désactivation du MFA

1. Allez à la page Sécurité
2. Cliquez sur "Désactiver le MFA"
3. Entrez votre code TOTP à 6 chiffres actuel pour confirmer
4. Le MFA est maintenant désactivé

Réinitialisation du MFA (en cas de blocage)

Si vous perdez l'accès à votre application d'authentification (téléphone perdu, application désinstallée, etc.) :

1. Connectez-vous en SSH à votre serveur
2. Exécutez cette commande pour effacer le secret MFA : ```bash node -e "const fs=require('fs');const c=JSON.parse(fs.readFileSync('/root/clawd/data/credentials.json','utf8'));delete c.mfaSecret;fs.writeFileSync('/root/clawd/data/credentials.json',JSON.stringify(c,null,2));console.log('MFA cleared')"
   root@kitploit:~

3. Redémarrer le tableau de bord : ```bash systemctl restart agent-dashboard
   root@kitploit:~

4. Connectez-vous avec votre nom d'utilisateur et mot de passe
5. Réactivez l'authentification multifacteur (MFA) avec un nouveau code QR

Important : Ajustez le chemin /root/clawd/data/credentials.json si votre espace de travail est ailleurs.

🔓 Récupération du mot de passe

Mot de passe oublié ?

Si vous oubliez votre mot de passe :

1. Cliquez sur "Mot de passe oublié ?" sur l'écran de connexion
2. Saisissez votre jeton de récupération (voir "Trouver votre jeton de récupération" ci-dessous)
3. Définissez un nouveau mot de passe
4. Connectez-vous avec votre nouveau mot de passe

Trouver votre jeton de récupération

Le jeton de récupération (DASHBOARD_TOKEN) s'affiche au démarrage du serveur. Vous pouvez le trouver à plusieurs endroits :

Consulter les journaux de démarrage du serveur```bash

journalctl -u agent-dashboard | grep "Recovery token"

Sortie :```
🔑 Recovery token: 3e6b91f352418b486a9aa9d82fbbc1b1

Vérifier la configuration de substitution de Systemd```bash

cat /etc/systemd/system/agent-dashboard.service.d/override.conf

Cherchez :```ini
Environment=DASHBOARD_TOKEN=3e6b91f352418b486a9aa9d82fbbc1b1

Vérifier la variable d'environnement

Si vous l'avez définie manuellement :```bash echo $DASHBOARD_TOKEN

### Changer votre mot de passe

Pour changer votre mot de passe lorsque vous êtes connecté :

1. Allez sur la page **Sécurité**
2. Entrez votre **mot de passe actuel**
3. Entrez votre **nouveau mot de passe**
4. Cliquez sur **« Changer le mot de passe »**
5. Toutes les autres sessions sont invalidées (vous devrez vous reconnecter ailleurs)

### Réinitialisation complète du compte (Option nucléaire)

Si tout est verrouillé et que vous ne pouvez pas vous connecter :

1. **Connectez-vous en SSH à votre serveur**
2. **Supprimez le fichier d'informations d'identification** :   ```bash
   rm /root/clawd/data/credentials.json

3. Redémarrer le tableau de bord : ```bash systemctl restart agent-dashboard
   root@kitploit:~

4. Accédez au tableau de bord — l'écran d'inscription apparaît
5. Créez un nouveau compte à partir de zéro

Avertissement : Cela supprime votre nom d'utilisateur, votre mot de passe et vos paramètres MFA. Les fichiers mémoire et les journaux d'audit ne sont pas affectés.

🛡️ Fonctionnalités de sécurité

Le tableau de bord est conçu avec les meilleures pratiques de sécurité :

• Hachage de mot de passe PBKDF2 — 100 000 itérations, SHA-512, sel aléatoire
• Comparaisons à temps constant — Empêche les attaques temporelles sur la vérification des jetons/mots de passe
• Sessions côté serveur — Jetons de session stockés en mémoire, mots de passe jamais envoyés au navigateur
• Limitation de débit — Limiteur de débit unifié pour les tentatives de connexion (5 blocages soft / 20 hard)
• Application HTTPS — HTTP bloqué sauf depuis localhost et Tailscale (100.64.0.0/10)
• En-têtes de sécurité :
  • HSTS — Force HTTPS sur les visites futures
  • CSP — Content Security Policy (pas de scripts en ligne, même origine)
  • X-Frame-Options: DENY — Empêche le clickjacking
  • X-Content-Type-Options: nosniff — Empêche le reniflage MIME
  • X-XSS-Protection: 1; mode=block — Protection XSS héritée
• Journalisation d'audit — Tous les événements d'authentification et actions destructrices sont enregistrés dans data/audit.log
• CORS — Même origine uniquement, aucun joker (*) autorisé
• Validation des entrées :
  • Liste blanche de services pour les journaux et actions
  • Protection contre le parcours de chemin pour l'accès aux fichiers
  • Limites de taille de charge utile (1 Mo max)
• Sauvegardes automatiques — Fichiers .bak créés avant d'écraser les fichiers de l'espace de travail

🌐 Sécurité réseau

Le tableau de bord est conçu pour un accès local ou via Tailscale :

Méthodes d'accès recommandées

1. Localhost — Accès depuis la même machine : http://localhost:7000
2. Tailscale — Accès depuis votre réseau Tailscale : http://100.x.x.x:7000
   • Tailscale fournit un chiffrement TLS automatique (MagicDNS + HTTPS)
   • Les adresses IP Tailscale (100.64.0.0 à 100.127.255.255) sont exemptées de l'application HTTPS
3. Réseau local — Accès depuis le LAN (utilisez HTTPS ou définissez DASHBOARD_ALLOW_HTTP=true)

Application HTTPS

Par défaut, le tableau de bord bloque l'accès HTTP depuis des adresses IP non locales. Exceptions :

• Localhost (127.0.0.1, ::1)
• Adresses IP Tailscale (100.64.0.0/10)

Pour les autres réseaux, le tableau de bord nécessite HTTPS ou l'en-tête X-Forwarded-Proto: https (depuis un proxy inverse).

Pour autoriser HTTP depuis toutes les adresses IP (non recommandé) :```bash DASHBOARD_ALLOW_HTTP=true node server.js

### Ne pas exposer sur Internet public

**Ce tableau de bord n'est PAS renforcé pour une exposition sur Internet public.** Bien qu'il dispose d'une authentification et d'une limitation de débit, il est conçu pour les réseaux privés. Si vous devez l'exposer :
- Utilisez un proxy inverse (nginx, Caddy) avec HTTPS
- Ajoutez une liste blanche d'adresses IP
- Envisagez un VPN (Tailscale, WireGuard) à la place

## 🛠️ Dépannage

### « Trop de tentatives échouées »

**Problème :** Vous voyez « Trop de tentatives de connexion échouées. Veuillez réessayer plus tard. »

**Solutions :**
- Attendez **15 minutes** que le verrouillage temporaire expire
- Redémarrez le service pour effacer les limites de débit :  ```bash
  systemctl restart agent-dashboard

• Les limites de débit sont en mémoire et réinitialisées au redémarrage

Impossible de se connecter après avoir changé le mot de passe

Problème : Votre mot de passe a été changé mais vous ne pouvez pas vous connecter.

Solution : Utilisez le processus "Mot de passe oublié ?" avec votre jeton de récupération pour définir un nouveau mot de passe.

Le code MFA ne fonctionne pas

Problème : Le code TOTP à 6 chiffres est rejeté.

Solutions :

• Assurez-vous que l'horloge de votre téléphone est synchronisée :
  • iOS : Réglages → Général → Date et heure → Régler automatiquement
  • Android : Paramètres → Système → Date et heure → Date et heure automatiques
• Les codes TOTP ont une tolérance de ±30 secondes pour les dérives d'horloge
• Essayez de saisir le code suivant (attendez 30 secondes qu'il se rafraîchisse)
• Si cela échoue encore, réinitialisez le MFA via SSH (voir la section "Réinitialisation du MFA")

Le tableau de bord ne se charge pas

Problème : Le navigateur affiche une page blanche ou une erreur de connexion.

Solutions :

1. Vérifiez l'état du service : ```bash systemctl status agent-dashboard
   root@kitploit:~

2. Vérifier les journaux: ```bash journalctl -u agent-dashboard -n 50
   root@kitploit:~

3. Vérifier le port : ```bash curl http://localhost:7000/api/auth/status
   root@kitploit:~

Devrait retourner: ```json {"authenticated": false, "requiresRegistration": false}

### Erreur « HTTPS requis »

**Problème :** Le navigateur affiche « HTTPS requis. Accédez via localhost, Tailscale, ou activez HTTPS. »

**Solutions :**
- Accéder via **localhost** : `http://localhost:7000`
- Accéder via **Tailscale** : `http://100.x.x.x:7000`
- Définir `DASHBOARD_ALLOW_HTTP=true` dans l'environnement (non recommandé) :  ```bash
# Add to /etc/systemd/system/agent-dashboard.service.d/override.conf
Environment=DASHBOARD_ALLOW_HTTP=true

# Reload and restart
systemctl daemon-reload
systemctl restart agent-dashboard

Page blanche après mise à jour

Problème : Le tableau de bord affiche une page blanche après avoir récupéré le nouveau code.

Solutions :

• Rechargement forcé : Ctrl+Shift+R (Windows/Linux) ou Cmd+Shift+R (macOS)
• Vider le cache du navigateur pour l'URL du tableau de bord
• Vérifier la console du navigateur (F12 → onglet Console) pour les erreurs JavaScript

📡 Référence de l'API

Le tableau de bord expose une API REST pour un accès programmatique. Tous les endpoints nécessitent une authentification via l'en-tête Authorization: Bearer <sessionToken>.

Endpoints non authentifiés

• GET /api/auth/status — Vérifier le statut d'authentification
• POST /api/auth/login — Se connecter avec nom d'utilisateur/mot de passe (+ TOTP si MFA activée)
• POST /api/auth/register — Enregistrer un nouveau compte (uniquement si aucun identifiant n'existe)
• POST /api/auth/reset-password — Réinitialiser le mot de passe avec un jeton de récupération

Endpoints authentifiés

Tous les autres endpoints nécessitent une authentification :

• GET /api/config — Configuration du tableau de bord
• GET /api/sessions — Lister toutes les sessions d'agent
• GET /api/usage — Données d'utilisation sur une fenêtre glissante de 5 heures
• GET /api/costs — Données de dépenses par jour, modèle et session
• GET /api/system — Métriques de santé du système
• GET /api/memory-files — Lister les fichiers mémoire
• GET /api/memory-file?path=<path> — Lire un fichier mémoire
• GET /api/key-files — Lister les fichiers de l'espace de travail (compétences, configurations)
• GET /api/key-file?path=<name> — Lire un fichier de l'espace de travail
• POST /api/key-file — Écrire dans un fichier de l'espace de travail (avec sauvegarde)
• GET /api/crons — Lister les tâches cron

Pour des exemples détaillés de requêtes/réponses, consultez la version précédente de ce README ou explorez l'API dans l'onglet Réseau du navigateur.

📂 Fichiers de données

Le tableau de bord stocke les données dans votre répertoire de travail :

Structure du fichier d'identifiants :```json { "username": "admin", "passwordHash": "pbkdf2_sha512$100000$...", "salt": "...", "mfaSecret": "BASE32SECRET..." // Only if MFA enabled }

## 🔗 Intégration OpenClaw

Le tableau de bord détecte automatiquement :
- **Sessions** depuis `$OPENCLAW_DIR/agents/$AGENT_ID/sessions/`
- **Tâches cron** depuis `$OPENCLAW_DIR/cron/jobs.json`
- **Fichiers mémoire** depuis `$WORKSPACE_DIR/MEMORY.md`, `HEARTBEAT.md` et `memory/*.md`
- **Dépôts Git** depuis `$WORKSPACE_DIR/projects/*/`
- **Données de santé** sauvegardées dans `$WORKSPACE_DIR/data/health-history.json`

### Fichiers requis

Le tableau de bord fonctionne mieux lorsque ces fichiers existent :
- `$WORKSPACE_DIR/MEMORY.md` - Mémoire à long terme de l'agent
- `$WORKSPACE_DIR/HEARTBEAT.md` - Liste des tâches Heartbeat
- `$WORKSPACE_DIR/memory/YYYY-MM-DD.md` - Notes mémoire quotidiennes
- `$WORKSPACE_DIR/scripts/scrape-claude-usage.sh` - Outil de récupération d'utilisation Claude
- `$WORKSPACE_DIR/scripts/parse-claude-usage.py` - Analyseur d'utilisation Claude
- `$WORKSPACE_DIR/scripts/scrape-gemini-usage.sh` - Outil de récupération d'utilisation Gemini
- `$WORKSPACE_DIR/scripts/parse-gemini-usage.py` - Analyseur d'utilisation Gemini

## ⌨️ Raccourcis clavier

| Touche | Action |
|-----|--------|
| `1` | Passer à la vue d'ensemble |
| `2` | Passer aux sessions |
| `3` | Passer aux coûts |
| `4` | Passer aux limites de taux |
| `5` | Passer à la mémoire |
| `6` | Passer aux fichiers |
| `7` | Passer au flux en direct |
| `8` | Passer aux journaux |
| `9` | Passer à la sécurité |
| `Space` | Pause/Reprendre le flux (sur la page Flux en direct) |
| `/` | Activer la barre de recherche |
| `Esc` | Fermer les modales et les superpositions |
| `?` | Afficher l'aide des raccourcis clavier |

## 🤝 Contribution

Les contributions sont les bienvenues ! Veuillez suivre ces directives :

1. **Forkez** le dépôt
2. **Créez** une branche de fonctionnalité (`git checkout -b feature/amazing-feature`)
3. **Commitez** vos modifications (`git commit -m 'Add amazing feature'`)
4. **Poussez** sur la branche (`git push origin feature/amazing-feature`)
5. **Ouvrez** une Pull Request

### Configuration de développement```bash
git clone https://github.com/tugcantopaloglu/openclaw-dashboard.git
cd openclaw-dashboard
export WORKSPACE_DIR=/path/to/test/workspace
node server.js

Le tableau de bord n'a pas d'étape de build — modifiez server.js ou index.html et rechargez.

Style de code

• Aucun commentaire dans le code (auto-documenté)
• Noms de fonctions concis et directs

📄 Licence

Licence MIT - voir le fichier LICENSE pour plus de détails.

🙏 Remerciements

• Construit avec Claude Code
• Construit pour OpenClaw
• Inspiré des tableaux de bord modernes (Grafana, Vercel, Railway)
• Polices : Inter et JetBrains Mono

📞 Support

• Problèmes : GitHub Issues
• Twitter : @tugcantopaloglu

Réalisé avec ✨ par Tuğcan Topaloğlu