diff --git a/.gitignore b/.gitignore
index 1af6184c..1eaf7c3b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,3 +8,10 @@ secubox-tools/local-feed/
 # IDE settings
 .vscode/
 luci-app-secubox.backup-*
+.venv/
+
+
+# MkDocs / GitHub Pages
+site/
+.venv/
+docs/.DS_Store
diff --git a/docs/archive/build-issues.md b/docs/archive/build-issues.md
new file mode 100644
index 00000000..7aff08c0
--- /dev/null
+++ b/docs/archive/build-issues.md
@@ -0,0 +1,193 @@
+# Build Issues & Solutions
+
+**Version:** 1.0.0
+**Last Updated:** 2025-12-28
+**Status:** Active
+
+## Current Problem: No IPK Generated on GitHub Actions
+
+### Root Cause
+
+The OpenWrt **SDK** cannot compile LuCI core dependencies (`lucihttp`, `cgi-io`) because it lacks the necessary `ubus` development headers. When building SecuBox packages, the SDK tries to compile all dependencies from source, which fails with:
+
+```
+ERROR: package/feeds/luci/lucihttp failed to build.
+ubus_include_dir-NOTFOUND
+```
+
+###Why This Works Locally
+
+Locally, you likely have one of these setups:
+1. **Full OpenWrt build tree** - Has all headers and can compile everything
+2. **ImageBuilder** - Uses pre-compiled packages, doesn't compile from source
+3. **Pre-installed dependencies** - lucihttp/cgi-io already exist
+
+### Why It Fails on GitHub Actions
+
+GitHub Actions uses the **OpenWrt SDK** which:
+- ✅ Can compile packages with compiled code
+- ❌ Cannot compile certain LuCI core packages (missing headers)
+- ❌ Tries to rebuild all dependencies from source
+
+## Solutions
+
+### Option 1: Use OpenWrt ImageBuilder (Recommended)
+
+**Best for:** Creating firmware images with SecuBox pre-installed
+
+ImageBuilder uses pre-compiled packages and doesn't require compilation:
+
+```yaml
+# New workflow using ImageBuilder
+- name: Download ImageBuilder
+  run: |
+    wget https://downloads.openwrt.org/releases/${VERSION}/targets/${TARGET}/${SUBTARGET}/openwrt-imagebuilder-*.tar.xz
+    tar xf openwrt-imagebuilder-*.tar.xz
+
+- name: Add custom packages
+  run: |
+    mkdir -p imagebuilder/packages/custom
+    cp *.ipk imagebuilder/packages/custom/
+
+- name: Build image
+  run: |
+    cd imagebuilder
+    make image PACKAGES="luci luci-app-secubox luci-app-*-dashboard"
+```
+
+**Pros:**
+- ✅ No compilation issues
+- ✅ Creates complete firmware images
+- ✅ Fast builds (uses binaries)
+
+**Cons:**
+- ❌ Requires specifying target device
+- ❌ Not suitable for multi-architecture package builds
+
+### Option 2: Use Full OpenWrt Build System
+
+**Best for:** Complete control, custom kernels, or when you need to modify core packages
+
+Clone and build complete OpenWrt:
+
+```yaml
+- name: Clone OpenWrt
+  run: |
+    git clone https://github.com/openwrt/openwrt.git
+    cd openwrt
+    ./scripts/feeds update -a
+    ./scripts/feeds install -a
+
+- name: Add SecuBox packages
+  run: |
+    cp -r ../luci-app-* openwrt/package/
+
+- name: Build
+  run: |
+    cd openwrt
+    make defconfig
+    make -j$(nproc)
+```
+
+**Pros:**
+- ✅ Can compile everything
+- ✅ Full control over build
+- ✅ Can modify core packages
+
+**Cons:**
+- ❌ Very slow (1-2 hours per architecture)
+- ❌ Requires significant disk space (30-50GB)
+- ❌ Complex configuration
+
+### Option 3: Package-Only Repository (Alternative)
+
+**Best for:** Distributing packages that users install on existing OpenWrt systems
+
+Create a custom package feed:
+
+```bash
+# On your server/GitHub Pages
+mkdir -p packages/${ARCH}/secubox
+cp *.ipk packages/${ARCH}/secubox/
+scripts/ipkg-make-index packages/${ARCH}/secubox > Packages
+gzip -c Packages > Packages.gz
+```
+
+Users add to `/etc/opkg/customfeeds.conf`:
+```
+src/gz secubox https://yourdomain.com/packages/${ARCH}/secubox
+```
+
+**Pros:**
+- ✅ No build needed (distribute sources)
+- ✅ Users compile locally or use binaries
+- ✅ Easy updates
+
+**Cons:**
+- ❌ Users need to manually install
+- ❌ Doesn't provide firmware images
+
+### Option 4: Fix SDK Build (Current Attempt)
+
+The current workflow attempts workarounds:
+1. Download package indices
+2. Configure SDK to prefer binaries (CONFIG_BUILDBOT=y)
+3. Fallback to direct packaging if compile fails
+
+**Status:** Experimental, may not work reliably
+
+**Pros:**
+- ✅ Keeps existing workflow structure
+- ✅ Multi-architecture builds
+
+**Cons:**
+- ❌ Fragile, depends on SDK quirks
+- ❌ May break with OpenWrt updates
+- ❌ Not officially supported
+
+## Recommended Approach
+
+### For Package Distribution
+Use **Option 3** (Package Repository) combined with **Option 1** (ImageBuilder for sample firmwares):
+
+1. **Distribute source packages** via GitHub releases
+2. **Provide pre-built .ipk** for common architectures (x86-64, ARM)
+3. **Create sample firmwares** with ImageBuilder for popular devices
+4. **Document installation** for users who want to install on existing OpenWrt
+
+### Implementation Steps
+
+1. **Create package feed workflow** (replaces current SDK build)
+2. **Add ImageBuilder workflow** for sample firmwares (ESPRESSObin, x86-64, etc.)
+3. **Update README** with installation instructions
+4. **Tag releases** with both source and binaries
+
+## Next Steps
+
+To implement the recommended solution:
+
+```bash
+# 1. Create new workflow for ImageBuilder
+cp .github/workflows/build-secubox-images.yml .github/workflows/build-imagebuilder.yml
+# Edit to use ImageBuilder instead of full build
+
+# 2. Update package build workflow to create feed instead of compiling
+# (Keep source distribution, skip compilation)
+
+# 3. Update documentation
+# Add INSTALL.md with instructions for different scenarios
+```
+
+## Temporary Workaround
+
+Until the proper solution is implemented, users can:
+
+1. **Download source** from GitHub
+2. **Build locally** using local-build.sh (requires SDK setup)
+3. **Or use existing firmware builds** (when available)
+
+## References
+
+- OpenWrt SDK: https://openwrt.org/docs/guide-developer/toolchain/using_the_sdk
+- OpenWrt ImageBuilder: https://openwrt.org/docs/guide-user/additional-software/imagebuilder
+- Package Feeds: https://openwrt.org/docs/guide-developer/feeds
diff --git a/docs/archive/completion-report.md b/docs/archive/completion-report.md
new file mode 100644
index 00000000..633af13b
--- /dev/null
+++ b/docs/archive/completion-report.md
@@ -0,0 +1,506 @@
+# Rapport de Complétion - SecuBox Components
+
+**Version:** 1.0.0  
+**Last Updated:** 2025-12-28  
+**Status:** Active
+
+
+**Version:** 1.0.0  
+**Last Updated:** 2025-12-28  
+**Status:** Archived  
+**Report Date:** 2025-12-23
+
+---
+
+## Résumé Exécutif
+
+Les 13 composants LuCI SecuBox ont été complétés avec succès. Tous les fichiers essentiels sont maintenant présents et fonctionnels.
+
+### Statistiques Globales
+
+- **Composants totaux:** 13
+- **Composants complets:** 13 (100%)
+- **Fichiers CSS créés:** 4
+- **Fichiers JavaScript:** 79 total
+- **Backends RPCD:** 14 total
+
+---
+
+## Composants Complétés
+
+### ✅ 1. luci-app-secubox (Hub Central)
+**Fichiers:**
+- Makefile ✓
+- RPCD backends: 2 (luci.secubox, secubox)
+- JavaScript: 4 fichiers
+- CSS: 1 fichier (dashboard.css)
+- Menu JSON ✓
+- ACL JSON ✓
+
+**Fonctionnalités:**
+- Dashboard centralisé pour tous les modules SecuBox
+- Navigation unifiée
+- Monitoring intégré
+
+---
+
+### ✅ 2. luci-app-system-hub (Centre de Contrôle Système)
+**Fichiers:**
+- Makefile ✓
+- RPCD backend: 1 (753 lignes)
+- JavaScript: 8 fichiers
+- CSS: 1 fichier (dashboard.css)
+- Menu JSON ✓
+- ACL JSON ✓
+
+**Fonctionnalités:**
+- Gestion des composants (start/stop/restart)
+- Health monitoring avec score 0-100
+- Assistance à distance RustDesk
+- Collection de diagnostics
+- Logs unifiés
+- Tâches planifiées
+
+---
+
+### ✅ 3. luci-app-crowdsec-dashboard (Sécurité Collaborative)
+**Fichiers:**
+- Makefile ✓
+- RPCD backend: 1 (267 lignes)
+- JavaScript: 5 fichiers
+- CSS: 1 fichier (dashboard.css)
+- Menu JSON ✓
+- ACL JSON ✓
+
+**Fonctionnalités:**
+- Monitoring des bans en temps réel
+- Gestion des décisions IP
+- Dashboard de métriques
+- Visualisation géographique des menaces
+- Thème cybersécurité dark
+
+---
+
+### ✅ 4. luci-app-netdata-dashboard (Monitoring Système)
+**Fichiers:**
+- Makefile ✓
+- RPCD backend: 1 (463 lignes)
+- JavaScript: 5 fichiers
+- CSS: 1 fichier (dashboard.css)
+- Menu JSON ✓
+- ACL JSON ✓
+
+**Fonctionnalités:**
+- Monitoring CPU, mémoire, disque, réseau
+- Capteurs de température
+- Moniteur de processus
+- Gauges et sparklines animés
+- Rafraîchissement toutes les 2 secondes
+
+---
+
+### ✅ 5. luci-app-netifyd-dashboard (Deep Packet Inspection)
+**Fichiers:**
+- Makefile ✓
+- RPCD backend: 1 (505 lignes)
+- JavaScript: 7 fichiers
+- CSS: 1 fichier (dashboard.css)
+- Menu JSON ✓
+- ACL JSON ✓
+
+**Fonctionnalités:**
+- Détection d'applications (Netflix, YouTube, Zoom)
+- Identification de protocoles (HTTP, HTTPS, DNS, QUIC)
+- Suivi des flux réseau en direct
+- Découverte automatique d'appareils
+- Catégorisation du trafic
+
+---
+
+### ✅ 6. luci-app-network-modes (Configuration Réseau)
+**Fichiers:**
+- Makefile ✓
+- RPCD backend: 1 (698 lignes)
+- JavaScript: 6 fichiers
+- CSS: 1 fichier (dashboard.css)
+- Menu JSON ✓
+- ACL JSON ✓
+
+**Fonctionnalités:**
+- **Mode Sniffer**: Bridge transparent pour analyse
+- **Mode Access Point**: WiFi AP avec 802.11r/k/v
+- **Mode Relay**: Extension réseau avec WireGuard
+- **Mode Router**: Routeur complet avec proxy et HTTPS
+- Changement de mode en un clic avec backup
+
+---
+
+### ✅ 7. luci-app-wireguard-dashboard (Gestion VPN)
+**Fichiers:**
+- Makefile ✓
+- RPCD backend: 1 (555 lignes)
+- JavaScript: 6 fichiers
+- CSS: 1 fichier (dashboard.css)
+- Menu JSON ✓
+- ACL JSON ✓
+
+**Fonctionnalités:**
+- Monitoring des tunnels
+- Gestion des peers (actif/idle/inactif)
+- Statistiques de trafic par peer
+- Visualisation de configuration
+- Sécurisé (clés privées jamais exposées)
+
+---
+
+### ✅ 8. luci-app-client-guardian (Contrôle d'Accès Réseau)
+**Fichiers:**
+- Makefile ✓
+- RPCD backend: 1 (775 lignes)
+- JavaScript: 8 fichiers
+- CSS: 1 fichier (dashboard.css)
+- Menu JSON ✓
+- ACL JSON ✓
+
+**Fonctionnalités:**
+- Détection et monitoring en temps réel des clients
+- Gestion des zones (LAN, IoT, Invités, Quarantaine)
+- Politique de quarantaine par défaut
+- Portail captif moderne
+- Contrôle parental (limites de temps, filtrage de contenu)
+- Alertes SMS/Email
+
+---
+
+### ✅ 9. luci-app-auth-guardian (Système d'Authentification)
+**Fichiers:**
+- Makefile ✓
+- RPCD backend: 1 (147 lignes)
+- JavaScript: 7 fichiers
+- **CSS: 1 fichier** ⭐ **NOUVEAU**
+- Menu JSON ✓
+- ACL JSON ✓
+
+**CSS Créé:**
+- `dashboard.css` (380+ lignes)
+- Thème rouge sécurité (#ef4444)
+- Cartes de statistiques avec hover effects
+- Styles pour OAuth, vouchers, sessions
+- Animations pulse pour états actifs
+
+**Fonctionnalités:**
+- Portail captif personnalisable
+- Intégration OAuth (Google, GitHub, Facebook, Twitter)
+- Système de vouchers avec limites
+- Gestion de sessions sécurisées
+- Règles de bypass MAC/IP/Domain
+
+---
+
+### ✅ 10. luci-app-bandwidth-manager (QoS & Quotas)
+**Fichiers:**
+- Makefile ✓
+- RPCD backend: 1 (192 lignes)
+- JavaScript: 7 fichiers
+- **CSS: 1 fichier** ⭐ **NOUVEAU**
+- Menu JSON ✓
+- ACL JSON ✓
+
+**CSS Créé:**
+- `dashboard.css` (600+ lignes)
+- Thème violet gradient (#8b5cf6 → #6366f1)
+- Classes QoS avec barres de progression
+- Styles pour quotas avec états (normal/warning/exceeded)
+- Détection de médias avec cartes de services
+- Timeline de trafic avec graphiques
+
+**Fonctionnalités:**
+- 8 classes de priorité QoS configurables
+- Quotas journaliers et mensuels
+- Détection automatique de médias (VoIP, Gaming, Streaming)
+- Planification basée sur le temps
+- Statistiques par client
+
+---
+
+### ✅ 11. luci-app-media-flow (Détection de Trafic Média)
+**Fichiers:**
+- Makefile ✓
+- RPCD backend: 1 (125 lignes)
+- JavaScript: 5 fichiers
+- **CSS: 1 fichier** ⭐ **NOUVEAU**
+- Menu JSON ✓
+- ACL JSON ✓
+
+**CSS Créé:**
+- `dashboard.css` (680+ lignes)
+- Thème rose-violet gradient (#ec4899 → #8b5cf6)
+- Cartes de services de streaming
+- Détection de protocoles avec badges
+- Appels VoIP avec indicateur live pulsant
+- Quality of Experience meter avec scores
+- Timeline de trafic avec graphiques à barres
+
+**Fonctionnalités:**
+- Détection de services de streaming en temps réel
+- Identification de protocoles (RTSP, HLS, DASH, RTP)
+- Monitoring VoIP/Vidéo calls
+- Suivi de bande passante par service
+- Métriques de qualité d'expérience
+
+**Services Supportés:**
+- Netflix, YouTube, Twitch, Disney+
+- Spotify, Apple Music, Tidal
+- Zoom, Teams, Google Meet, WebEx
+
+---
+
+### ✅ 12. luci-app-cdn-cache (Optimisation de Bande Passante)
+**Fichiers:**
+- Makefile ✓
+- RPCD backend: 1 (692 lignes)
+- JavaScript: 7 fichiers
+- CSS: 1 fichier (dashboard.css)
+- Menu JSON ✓
+- ACL JSON ✓
+
+**Fonctionnalités:**
+- Cache intelligent du contenu fréquemment accédé
+- Statistiques de hit ratio et économies en temps réel
+- Policies configurables par domaine/extension
+- Purge et préchargement automatiques
+- Graphiques statistiques et tendances
+
+**Policies de Cache:**
+- Windows Update, dépôts Linux
+- Contenu statique (JS, CSS, images)
+- TTL configurable par type
+
+---
+
+### ✅ 13. luci-app-vhost-manager (Gestion d'Hôtes Virtuels)
+**Fichiers:**
+- Makefile ✓
+- RPCD backend: 1 (145 lignes)
+- JavaScript: 5 fichiers
+- **CSS: 1 fichier** ⭐ **NOUVEAU**
+- Menu JSON ✓
+- ACL JSON ✓
+
+**CSS Créé:**
+- `dashboard.css` (700+ lignes)
+- Thème cyan (#06b6d4)
+- Cartes de vhosts avec badges SSL
+- Redirections avec flèches animées
+- Templates de services avec hover effects
+- Preview de configuration Nginx/HAProxy
+- Setup Let's Encrypt ACME avec domaines vérifiés
+
+**Fonctionnalités:**
+- Hôtes virtuels internes avec domaines personnalisés
+- Redirection de services externes
+- SSL/TLS avec Let's Encrypt ou auto-signé
+- Configuration automatique de reverse proxy nginx
+
+**Services Supportés:**
+- Nextcloud, GitLab, Jellyfin
+- Home Assistant et plus
+
+---
+
+## Fichiers CSS Créés
+
+### 1. auth-guardian/dashboard.css
+**Lignes:** 380+
+**Thème:** Rouge sécurité
+**Caractéristiques:**
+- Variables CSS pour couleurs cohérentes
+- Cartes de statistiques avec hover effects
+- Styles OAuth avec boutons colorés par provider
+- Système de vouchers avec badges de statut
+- Table de sessions avec indicateurs actifs pulsants
+- Règles de bypass avec badges typés
+- Formulaires et boutons d'action
+- Responsive design
+
+### 2. bandwidth-manager/dashboard.css
+**Lignes:** 600+
+**Thème:** Violet gradient
+**Caractéristiques:**
+- Grid de statistiques avec cartes animées
+- 8 classes QoS avec barres de progression
+- Variations de couleurs par priorité
+- Système de quotas avec états (normal/warning/exceeded)
+- Détection de médias avec grille de services
+- Planifications temporelles avec badges de jours
+- Table de statistiques clients avec barres d'usage
+- Indicateur live en temps réel
+
+### 3. media-flow/dashboard.css
+**Lignes:** 680+
+**Thème:** Rose-violet gradient
+**Caractéristiques:**
+- Grille de services de streaming avec icônes
+- Filtres de catégories avec états actifs
+- Détection de protocoles avec compteurs
+- Appels VoIP avec statut pulsant
+- Quality of Experience meter avec scores colorés
+- Timeline de trafic avec graphiques interactifs
+- États loading et empty avec animations
+- Design responsive complet
+
+### 4. vhost-manager/dashboard.css
+**Lignes:** 700+
+**Thème:** Cyan
+**Caractéristiques:**
+- Liste de vhosts avec badges SSL
+- Statut online/offline avec dots animés
+- Redirections avec flèches et routes
+- Templates de services avec hover scale
+- Preview de configuration code (Nginx/HAProxy)
+- Setup ACME Let's Encrypt avec tags de domaines
+- Info boxes avec styles par type
+- États loading, empty et responsive
+
+---
+
+## Patterns et Standards CSS Utilisés
+
+### Variables CSS Root
+Chaque dashboard définit ses propres variables pour:
+- Couleurs primaires et secondaires
+- Tons dark/darker/light
+- Couleurs de bordure
+- Couleurs de statut (success/warning/danger/info)
+- Gradients spécifiques
+
+### Composants Communs
+- **Containers**: Background gradients, border-radius, padding, shadow
+- **Headers**: Flexbox, border-bottom, titre avec emoji et gradient text
+- **Stats Grid**: Auto-fit responsive grid, cards avec hover effects
+- **Buttons**: Variantes primary/secondary/danger avec transitions
+- **Forms**: Inputs, selects, textareas avec focus states
+- **Tables**: Hover states, border-collapse, padding cohérent
+- **Badges**: Pills avec backgrounds transparents colorés
+- **Loading States**: Animations avec emojis et keyframes
+- **Empty States**: Centré avec emojis de grande taille
+
+### Animations
+- `pulse`: Opacité clignotante pour indicateurs
+- `blink`: Clignotement pour dots live
+- `spin`/`rotate`: Rotation pour loading
+- `pulse-green`: Pulse avec box-shadow pour VoIP
+- Hover transforms: `translateY(-2px)`, `scale(1.05)`
+
+### Responsive Design
+- Grid auto-fit avec minmax
+- Media queries à 768px pour mobile
+- Colonnes 1fr pour petits écrans
+- Font sizes et paddings adaptés
+
+---
+
+## Architecture Technique
+
+### Structure Standard de Package
+```
+luci-app-<module>/
+├── Makefile                              # Définition package OpenWrt
+├── README.md                             # Documentation module
+├── htdocs/luci-static/resources/
+│   ├── view/<module>/                    # Vues JavaScript UI
+│   │   ├── overview.js                   # Dashboard principal
+│   │   └── *.js                          # Vues additionnelles
+│   └── <module>/
+│       ├── api.js                        # Client API RPC
+│       └── dashboard.css                 # Styles du module
+└── root/
+    ├── etc/config/<module>               # Config UCI (optionnel)
+    └── usr/
+        ├── libexec/rpcd/<module>         # Backend RPCD
+        └── share/
+            ├── luci/menu.d/              # Définition menu JSON
+            │   └── luci-app-<module>.json
+            └── rpcd/acl.d/               # Permissions ACL JSON
+                └── luci-app-<module>.json
+```
+
+### Technologies Utilisées
+- **Frontend**: LuCI framework (JavaScript)
+- **Backend**: Shell scripts (RPCD)
+- **Styling**: CSS3 avec variables et animations
+- **Configuration**: UCI (Unified Configuration Interface)
+- **API**: ubus RPC calls
+- **Packaging**: OpenWrt Makefile system
+
+---
+
+## Validation et Tests
+
+### Checks Effectués
+✅ Présence de tous les Makefiles
+✅ Backends RPCD existants et exécutables
+✅ Fichiers JavaScript présents (79 total)
+✅ Fichiers CSS présents (13 total, 4 nouveaux)
+✅ Fichiers menu.d JSON valides
+✅ Fichiers ACL JSON valides
+
+### Prochaines Étapes Recommandées
+1. **Build Test**: Compiler chaque package avec OpenWrt SDK
+2. **Lint Validation**:
+   ```bash
+   shellcheck luci-app-*/root/usr/libexec/rpcd/*
+   jsonlint luci-app-*/root/usr/share/{luci/menu.d,rpcd/acl.d}/*.json
+   ```
+3. **Installation Test**: Déployer sur un routeur OpenWrt de test
+4. **Functional Test**: Vérifier chaque fonctionnalité UI
+5. **Integration Test**: Tester l'interopérabilité entre modules
+6. **CI/CD**: Déclencher le workflow GitHub Actions
+
+---
+
+## Outils et Scripts
+
+### Outils de Réparation
+- `secubox-tools/secubox-repair.sh`: Auto-fix des problèmes Makefile et RPCD
+- `secubox-tools/secubox-debug.sh`: Validation et diagnostics
+
+### Scripts de Validation
+```bash
+# Vérifier tous les composants
+for comp in luci-app-*; do
+    echo "Checking $comp..."
+    [ -f "$comp/Makefile" ] && echo "  ✓ Makefile"
+    [ -d "$comp/root/usr/libexec/rpcd" ] && echo "  ✓ RPCD"
+    [ -d "$comp/htdocs" ] && echo "  ✓ Frontend"
+done
+```
+
+---
+
+## Licence
+
+Tous les modules SecuBox sont sous licence **Apache-2.0** © 2025 CyberMind.fr
+
+---
+
+## Auteur
+
+**Gandalf** - [CyberMind.fr](https://cybermind.fr)
+
+---
+
+## Conclusion
+
+✅ **Mission accomplie!** Les 13 composants LuCI SecuBox sont maintenant complets et prêts pour:
+- Build et packaging
+- Tests fonctionnels
+- Déploiement sur OpenWrt
+- Intégration dans SecuBox Suite
+
+**Date de complétion:** 23 décembre 2025
+**Status final:** 🎉 **100% COMPLET**
+
+---
+
+*Rapport généré automatiquement par Claude Code*
diff --git a/docs/archive/index.md b/docs/archive/index.md
new file mode 100644
index 00000000..e035ef95
--- /dev/null
+++ b/docs/archive/index.md
@@ -0,0 +1,28 @@
+# Documentation Archive
+
+Historical and completed documentation.
+
+## Purpose
+
+This archive contains documents that:
+- Represent completed project milestones
+- Describe implemented features
+- Document resolved issues
+
+## Archived Documents
+
+- [Build Issues](build-issues.md) - Historical build troubleshooting (resolved)
+- [Completion Report](completion-report.md) - Project completion milestone
+- [Module Enable/Disable Design](module-enable-disable-design.md) - Feature design (implemented)
+
+## Archive Policy
+
+Documents are archived when:
+1. ✅ Feature/project is completed
+2. ✅ Information is outdated but historically valuable
+3. ✅ Content has been migrated to active documentation
+4. ✅ Document serves as historical reference only
+
+---
+
+[← Back to Home](../index.md){ .md-button }
diff --git a/docs/archive/module-enable-disable-design.md b/docs/archive/module-enable-disable-design.md
new file mode 100644
index 00000000..9fe681a0
--- /dev/null
+++ b/docs/archive/module-enable-disable-design.md
@@ -0,0 +1,356 @@
+# Module Enable/Disable Design Document
+
+**Version:** 0.3.1
+**Date:** 2025-12-27
+**Author:** Claude Code + CyberMind
+
+## 🎯 Objectif
+
+Remplacer la logique **start/stop** des modules SecuBox par une logique **enable/disable** (activé/désactivé), car les modules sont des **plugins installés** qu'on souhaite activer ou désactiver, plutôt que des services qu'on démarre ou arrête ponctuellement.
+
+## 📋 Changements Conceptuels
+
+### Avant (v0.2.x)
+
+```
+Module installé → peut être "Running" ou "Stopped"
+Actions: Start / Stop / Restart
+État affiché: "Running" (vert) ou "Stopped" (gris)
+```
+
+### Après (v0.3.1+)
+
+```
+Module installé → peut être "Enabled" ou "Disabled"
+Actions: Enable / Disable
+État affiché: "Activé" (vert) ou "Désactivé" (gris)
+Info complémentaire: "Service running" (si enabled + running)
+```
+
+## 🏗️ Architecture Technique
+
+### 1. Configuration UCI
+
+Chaque module dans `/etc/config/secubox` aura un champ `enabled`:
+
+```uci
+config module 'crowdsec'
+    option name 'CrowdSec Dashboard'
+    option package 'luci-app-crowdsec-dashboard'
+    option config 'crowdsec'
+    option category 'security'
+    option enabled '1'              # NEW: 1 = activé, 0 = désactivé
+    option icon '🛡️'
+    option color '#ef4444'
+```
+
+### 2. Méthodes RPCD (`luci.secubox`)
+
+#### Anciennes méthodes (DEPRECATED)
+- ❌ `start_module(module_id)` → démarre le service
+- ❌ `stop_module(module_id)` → arrête le service
+- ❌ `restart_module(module_id)` → redémarre le service
+
+#### Nouvelles méthodes (v0.3.1+)
+
+```javascript
+// Active un module (config UCI + démarrage service)
+enable_module(module_id)
+→ uci set secubox.${module}.enabled='1'
+→ uci commit secubox
+→ /etc/init.d/${service} enable
+→ /etc/init.d/${service} start
+→ return { success: true, message: "Module activé" }
+
+// Désactive un module (config UCI + arrêt service)
+disable_module(module_id)
+→ uci set secubox.${module}.enabled='0'
+→ uci commit secubox
+→ /etc/init.d/${service} disable
+→ /etc/init.d/${service} stop
+→ return { success: true, message: "Module désactivé" }
+
+// Vérifie si un module est activé
+check_module_enabled(module_id)
+→ return uci get secubox.${module}.enabled == '1'
+
+// Vérifie si le service tourne (info complémentaire)
+check_service_running(module_id)
+→ return pgrep -f ${service} > /dev/null
+```
+
+### 3. Structure de données retournée
+
+```json
+{
+  "modules": [
+    {
+      "id": "crowdsec",
+      "name": "CrowdSec Dashboard",
+      "category": "security",
+      "installed": true,
+      "enabled": true,          // État principal (config UCI)
+      "running": true,          // État du service (info)
+      "status": "active",       // enabled + running = "active"
+      "icon": "🛡️",
+      "color": "#ef4444"
+    },
+    {
+      "id": "netdata",
+      "name": "Netdata Monitoring",
+      "category": "monitoring",
+      "installed": true,
+      "enabled": false,         // Module désactivé
+      "running": false,
+      "status": "disabled",     // Status affiché
+      "icon": "📊",
+      "color": "#22c55e"
+    }
+  ]
+}
+```
+
+### 4. États Possibles
+
+| enabled | running | status   | Badge UI      | Description |
+|---------|---------|----------|---------------|-------------|
+| `true`  | `true`  | `active` | ✓ Activé      | Module activé et service tourne |
+| `true`  | `false` | `error`  | ⚠️ Erreur     | Module activé mais service arrêté (problème) |
+| `false` | `false` | `disabled` | ○ Désactivé | Module désactivé (état normal) |
+| `false` | `true`  | `unknown` | ? Inconnu   | État incohérent (rare) |
+
+## 🎨 Interface Utilisateur
+
+### Dashboard Principal (SecuBox Hub)
+
+**Avant:**
+```
+[CrowdSec Dashboard]  ● Running    [Stop] [Restart]
+[Netdata Monitor]     ○ Stopped    [Start]
+```
+
+**Après:**
+```
+[CrowdSec Dashboard]  ✓ Activé     [Désactiver]
+[Netdata Monitor]     ○ Désactivé  [Activer]
+```
+
+### Module Individual Card
+
+```html
+<div class="module-card enabled">
+  <div class="module-header">
+    <span class="module-icon">🛡️</span>
+    <span class="module-name">CrowdSec Dashboard</span>
+    <span class="module-badge enabled">✓ Activé</span>
+  </div>
+  <div class="module-status">
+    <span class="status-dot running"></span>
+    <span>Service en cours d'exécution</span>
+  </div>
+  <div class="module-actions">
+    <button class="btn-disable">Désactiver</button>
+  </div>
+</div>
+```
+
+### Classes CSS
+
+```css
+/* Module states */
+.module-badge.enabled {
+  background: linear-gradient(135deg, #22c55e, #16a34a);
+  color: white;
+}
+
+.module-badge.disabled {
+  background: var(--sh-bg-secondary);
+  color: var(--sh-text-muted);
+}
+
+.module-badge.error {
+  background: linear-gradient(135deg, #f59e0b, #d97706);
+  color: white;
+}
+
+/* Status indicators */
+.status-dot.running {
+  background: #22c55e;
+  animation: pulse 2s infinite;
+}
+
+.status-dot.stopped {
+  background: #94a3b8;
+}
+```
+
+## 📝 API JavaScript
+
+### Fichier: `secubox/api.js`
+
+```javascript
+// Anciennes méthodes (DEPRECATED - à supprimer)
+startModule: callStartModule,     // DEPRECATED
+stopModule: callStopModule,       // DEPRECATED
+restartModule: callRestartModule, // DEPRECATED
+
+// Nouvelles méthodes (v0.3.1+)
+enableModule: callEnableModule,   // NEW
+disableModule: callDisableModule, // NEW
+
+// Déclarations RPC
+var callEnableModule = rpc.declare({
+  object: 'luci.secubox',
+  method: 'enable_module',
+  params: ['module_id'],
+  expect: { success: false, message: '' }
+});
+
+var callDisableModule = rpc.declare({
+  object: 'luci.secubox',
+  method: 'disable_module',
+  params: ['module_id'],
+  expect: { success: false, message: '' }
+});
+```
+
+## 🔄 Migration des Données
+
+### Script de migration (à exécuter une fois)
+
+```bash
+#!/bin/sh
+# migrate-to-enable-disable.sh
+
+. /lib/functions.sh
+
+migrate_module() {
+  local module="$1"
+  local running=$(pgrep -f "$module" > /dev/null && echo "1" || echo "0")
+
+  # Si le service tourne actuellement, on l'active
+  if [ "$running" = "1" ]; then
+    uci set secubox.${module}.enabled='1'
+  else
+    # Sinon, on le désactive par défaut
+    uci set secubox.${module}.enabled='0'
+  fi
+}
+
+# Migrer tous les modules
+config_load secubox
+config_foreach migrate_module module
+
+uci commit secubox
+echo "Migration completed"
+```
+
+## 📚 Documentation Utilisateur
+
+### README.md (à ajouter)
+
+```markdown
+## Gestion des Modules
+
+Les modules SecuBox sont des plugins installés qui peuvent être **activés** ou **désactivés**.
+
+### Activer un module
+- Cliquez sur le bouton **"Activer"** sur la carte du module
+- Le module sera configuré pour démarrer automatiquement au boot
+- Le service associé démarrera immédiatement
+
+### Désactiver un module
+- Cliquez sur le bouton **"Désactiver"** sur la carte du module
+- Le module ne démarrera plus automatiquement au boot
+- Le service associé s'arrêtera immédiatement
+
+### États des modules
+
+| Badge | Signification |
+|-------|---------------|
+| ✓ Activé | Module activé et service en cours d'exécution |
+| ⚠️ Erreur | Module activé mais service arrêté (vérifier les logs) |
+| ○ Désactivé | Module désactivé (normal) |
+
+**Note:** Les modules restent installés même lorsqu'ils sont désactivés. Pour les supprimer complètement, utilisez le gestionnaire de paquets APK.
+```
+
+## 🧪 Tests à Effectuer
+
+### Tests Unitaires RPCD
+
+```bash
+# Test enable_module
+ubus call luci.secubox enable_module '{"module_id":"crowdsec"}'
+# Expected: {"success":true,"message":"Module activé"}
+
+# Vérifier config UCI
+uci get secubox.crowdsec.enabled
+# Expected: 1
+
+# Vérifier service
+/etc/init.d/crowdsec enabled && echo "OK" || echo "FAIL"
+pgrep crowdsec && echo "Running" || echo "Not running"
+
+# Test disable_module
+ubus call luci.secubox disable_module '{"module_id":"crowdsec"}'
+# Expected: {"success":true,"message":"Module désactivé"}
+
+# Vérifier
+uci get secubox.crowdsec.enabled
+# Expected: 0
+```
+
+### Tests Interface
+
+1. ✅ Ouvrir le dashboard SecuBox
+2. ✅ Vérifier que les modules affichent "Activé" ou "Désactivé"
+3. ✅ Cliquer sur "Désactiver" → badge passe à "○ Désactivé"
+4. ✅ Cliquer sur "Activer" → badge passe à "✓ Activé"
+5. ✅ Vérifier que le service démarre/s'arrête réellement
+6. ✅ Rafraîchir la page → état persiste (UCI)
+
+## 📦 Modules Affectés
+
+### SecuBox Hub (`luci-app-secubox`)
+
+**Fichiers à modifier:**
+- ✅ `root/usr/libexec/rpcd/luci.secubox` - Backend RPCD
+- ✅ `htdocs/luci-static/resources/secubox/api.js` - API JS
+- ✅ `htdocs/luci-static/resources/view/secubox/dashboard.js` - Dashboard
+- ✅ `htdocs/luci-static/resources/view/secubox/modules.js` - Module list
+- ✅ `htdocs/luci-static/resources/secubox/dashboard.css` - Styles
+- ✅ `root/usr/share/rpcd/acl.d/luci-app-secubox.json` - ACL permissions
+- ✅ `README.md` - Documentation
+
+### System Hub (`luci-app-system-hub`)
+
+**Fichiers à modifier:**
+- ✅ `htdocs/luci-static/resources/view/system-hub/components.js` - Vue composants
+- ✅ `htdocs/luci-static/resources/view/system-hub/services.js` - Vue services
+- ✅ `README.md` - Documentation
+
+## 🎯 Bénéfices
+
+1. **Clarté conceptuelle**: "Activer/Désactiver" est plus clair que "Démarrer/Arrêter" pour des plugins
+2. **Persistance**: L'état persiste après redémarrage (UCI + init.d enable/disable)
+3. **Cohérence**: Tous les modules suivent la même logique
+4. **Meilleure UX**: L'utilisateur comprend qu'il active/désactive des fonctionnalités
+5. **Alignement OpenWrt**: Utilise les mécanismes natifs (`/etc/init.d/${service} enable/disable`)
+
+## 🔜 Prochaines Étapes
+
+- [x] Créer ce document de design
+- [ ] Implémenter les modifications RPCD
+- [ ] Mettre à jour l'API JavaScript
+- [ ] Mettre à jour les interfaces UI
+- [ ] Mettre à jour les ACL permissions
+- [ ] Créer script de migration UCI
+- [ ] Mettre à jour la documentation
+- [ ] Tester sur router de test
+- [ ] Déployer en production
+
+---
+
+**Maintainer:** CyberMind <contact@cybermind.fr>
+**License:** Apache-2.0
diff --git a/docs/claude.md b/docs/claude.md
new file mode 100644
index 00000000..d28a8eb7
--- /dev/null
+++ b/docs/claude.md
@@ -0,0 +1,553 @@
+# CLAUDE.md
+
+**Version:** 1.0.0
+**Last Updated:** 2025-12-28
+**Status:** Active
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## 📚 Documentation Index
+
+**IMPORTANT:** Before working on any code, consult these guides:
+
+1. **[DEVELOPMENT-GUIDELINES.md](development-guidelines.md)** - ⭐ **GUIDE COMPLET**
+   - Design System & UI Guidelines (palettes, typographie, composants)
+   - Architecture & Naming Conventions (RPCD, menu paths, prefixes)
+   - RPCD & ubus Best Practices (erreurs communes, solutions)
+   - ACL & Permissions (templates, validations)
+   - JavaScript Patterns (API modules, views, event handling)
+   - CSS/Styling Standards (variables, responsive, dark mode)
+   - Common Errors & Solutions (diagnostics, fixes)
+   - Validation Checklist (pre-commit, pre-deploy, post-deploy)
+   - Deployment Procedures (scripts, rollback, versioning)
+
+2. **[QUICK-START.md](quick-start.md)** - ⚡ **AIDE-MÉMOIRE RAPIDE**
+   - Règles critiques (RPCD naming, menu paths, permissions)
+   - Design system essentials (couleurs, fonts, classes)
+   - Common commands (validation, build, deploy, debug)
+   - Quick code templates (RPCD, View, Headers, Cards)
+   - Error quick fixes
+
+3. **CLAUDE.md** (ce fichier) - 🏗️ **ARCHITECTURE & BUILD**
+   - Build commands (OpenWrt SDK, local build)
+   - Module structure (files, directories)
+   - CI/CD workflows
+   - Common issues techniques
+
+**⚠️ RÈGLES CRITIQUES À TOUJOURS RESPECTER:**
+
+1. **RPCD Script Naming:** Nom fichier = objet ubus (`luci.system-hub`)
+2. **Menu Path Matching:** Path menu = fichier vue (`system-hub/overview.js`)
+3. **Permissions:** RPCD = 755, CSS/JS = 644
+   - **Auto-fix:** `./secubox-tools/fix-permissions.sh --local` (avant commit)
+   - **Auto-fix remote:** `./secubox-tools/fix-permissions.sh --remote` (après deploy)
+4. **Validation:** Toujours exécuter `./secubox-tools/validate-modules.sh` avant commit
+   - **7 checks automatiques:** RPCD naming, menu paths, view files, RPCD permissions, JSON syntax, ubus naming, **htdocs permissions**
+5. **CSS Variables:** Toujours utiliser `var(--sh-*)`, jamais hardcoder les couleurs
+6. **Dark Mode:** Toujours supporter dark mode avec `[data-theme="dark"]`
+7. **Typography:** Inter (texte), JetBrains Mono (valeurs numériques)
+8. **Gradient Effects:** Utiliser `--sh-primary` → `--sh-primary-end` pour dégradés
+
+## Project Overview
+
+SecuBox is a comprehensive security and network management suite for OpenWrt. The repository contains 13 LuCI application packages that provide dashboards for security monitoring, network intelligence, access control, bandwidth management, and system administration.
+
+## Build Commands
+
+### OpenWrt SDK Build
+
+```bash
+# Build a single package
+make package/luci-app-<module-name>/compile V=s
+
+# Clean build for a package
+make package/luci-app-<module-name>/clean
+make package/luci-app-<module-name>/compile V=s
+
+# Install package to staging directory
+make package/luci-app-<module-name>/install
+```
+
+### Testing Packages
+
+```bash
+# Transfer to router
+scp bin/packages/*/base/luci-app-*.ipk root@192.168.1.1:/tmp/
+
+# Install on router
+ssh root@192.168.1.1
+opkg install /tmp/luci-app-*.ipk
+/etc/init.d/rpcd restart
+/etc/init.d/uhttpd restart
+```
+
+### Validation
+
+```bash
+# Fix file permissions FIRST (CRITICAL)
+./secubox-tools/fix-permissions.sh --local
+
+# Run comprehensive module validation (RECOMMENDED - 7 checks)
+./secubox-tools/validate-modules.sh
+# Checks:
+# 1. RPCD script names vs ubus objects
+# 2. Menu paths vs view file locations
+# 3. View files have menu entries
+# 4. RPCD script permissions (755)
+# 5. JSON syntax validation
+# 6. ubus object naming convention
+# 7. htdocs file permissions (644 for CSS/JS) ← NEW
+
+# Validate shell scripts (RPCD backends)
+shellcheck luci-app-*/root/usr/libexec/rpcd/*
+
+# Validate JSON files
+find . -name "*.json" -exec jsonlint {} \;
+
+# Run automated repair tool
+./secubox-tools/secubox-repair.sh
+
+# Fix permissions on deployed router
+./secubox-tools/fix-permissions.sh --remote
+
+# Run diagnostics
+./secubox-tools/secubox-debug.sh luci-app-<module-name>
+```
+
+### Local Build (Replicates GitHub Actions)
+
+The `local-build.sh` script allows you to build and test packages locally, replicating the GitHub Actions workflows:
+
+```bash
+# Validate all packages (syntax, JSON, shell scripts)
+./secubox-tools/local-build.sh validate
+
+# Build all packages for x86_64
+./secubox-tools/local-build.sh build
+
+# Build single package
+./secubox-tools/local-build.sh build luci-app-system-hub
+
+# Build for specific architecture
+./secubox-tools/local-build.sh build --arch aarch64-cortex-a72
+
+# Full validation + build
+./secubox-tools/local-build.sh full
+
+# Clean build artifacts
+./secubox-tools/local-build.sh clean
+```
+
+Supported architectures:
+- `x86-64` - PC, VMs (default)
+- `aarch64-cortex-a53` - ARM Cortex-A53 (ESPRESSObin)
+- `aarch64-cortex-a72` - ARM Cortex-A72 (MOCHAbin, RPi4)
+- `aarch64-generic` - Generic ARM64
+- `mips-24kc` - MIPS 24Kc (TP-Link)
+- `mipsel-24kc` - MIPS LE (Xiaomi, GL.iNet)
+
+The script automatically:
+- Downloads and caches the OpenWrt SDK
+- Configures feeds (packages, luci) with correct branch for version
+- Copies your packages to the SDK
+- Builds packages (.apk for 25.12+, .ipk for older versions)
+- Collects artifacts in `build/<arch>/`
+
+**Package Format Support:**
+- OpenWrt 25.12+ and SNAPSHOT: `.apk` format (new Alpine-based package manager)
+- OpenWrt 24.10 and earlier: `.ipk` format (opkg package manager)
+
+Environment variables:
+- `OPENWRT_VERSION` - OpenWrt version (default: 24.10.5, also supports: 25.12.0-rc1, 23.05.5, SNAPSHOT)
+- `SDK_DIR` - SDK directory (default: ./sdk)
+- `BUILD_DIR` - Build output directory (default: ./build)
+- `CACHE_DIR` - Download cache directory (default: ./cache)
+
+## Architecture
+
+### LuCI Package Structure
+
+All SecuBox modules follow a standard LuCI application structure:
+
+```
+luci-app-<module-name>/
+├── Makefile                              # OpenWrt package definition
+├── README.md                             # Module documentation
+├── htdocs/luci-static/resources/
+│   ├── view/<module-name>/               # JavaScript UI views
+│   │   ├── overview.js                   # Main dashboard view
+│   │   └── *.js                          # Additional views
+│   └── <module-name>/
+│       ├── api.js                        # RPC API client module
+│       └── dashboard.css                 # Module-specific styles
+└── root/
+    ├── etc/config/<module-name>          # UCI configuration (optional)
+    └── usr/
+        ├── libexec/rpcd/
+        │   └── luci.<module-name>        # RPCD backend script (MUST use luci. prefix!)
+        └── share/
+            ├── luci/menu.d/              # Menu JSON definition
+            │   └── luci-app-<module-name>.json
+            └── rpcd/acl.d/               # ACL permissions JSON
+                └── luci-app-<module-name>.json
+```
+
+### Frontend-Backend Communication
+
+1. **Frontend (JavaScript)**: Located in `htdocs/luci-static/resources/`
+   - Views use LuCI's `form` and `view` classes
+   - API calls via `api.js` module using `L.resolveDefault()`
+   - UI components from `ui.js` (Dropdown, Checkbox, Combobox, etc.)
+
+2. **Backend (RPCD)**: Located in `root/usr/libexec/rpcd/`
+   - Shell scripts that implement RPC methods
+   - Must output JSON to stdout
+   - Methods are called via ubus: `ubus call <module> <method>`
+
+3. **Menu Definition**: `root/usr/share/luci/menu.d/luci-app-<module>.json`
+   - Defines menu structure and navigation
+   - Specifies view paths and dependencies
+
+4. **ACL Definition**: `root/usr/share/rpcd/acl.d/luci-app-<module>.json`
+   - Defines access control for ubus methods
+   - Maps read/write permissions to user groups
+
+### Critical Naming Conventions
+
+**IMPORTANT**: The following naming rules are MANDATORY for modules to work correctly:
+
+#### 1. RPCD Script Must Match ubus Object Name
+
+The RPCD script filename MUST exactly match the ubus object name used in JavaScript:
+
+```javascript
+// In JavaScript (htdocs/luci-static/resources/view/*/):
+var callStatus = rpc.declare({
+    object: 'luci.cdn-cache',  // ← This object name
+    method: 'status'
+});
+```
+
+```bash
+# RPCD script filename MUST match:
+root/usr/libexec/rpcd/luci.cdn-cache  # ← Must be exactly 'luci.cdn-cache'
+```
+
+**Common Error**: If the names don't match, you'll get:
+- `RPC call to luci.cdn-cache/status failed with error -32000: Object not found`
+- `Command failed: Method not found`
+
+**Solution**: All RPCD scripts MUST use the `luci.` prefix:
+- ✅ Correct: `luci.cdn-cache`, `luci.system-hub`, `luci.wireguard-dashboard`
+- ❌ Wrong: `cdn-cache`, `system-hub`, `wireguard-dashboard`
+
+#### 2. Menu Paths Must Match View File Locations
+
+Menu JSON path entries MUST correspond to actual view files:
+
+```json
+// In menu.d/luci-app-netifyd-dashboard.json:
+{
+    "action": {
+        "type": "view",
+        "path": "netifyd-dashboard/overview"  // ← Must match file location
+    }
+}
+```
+
+```bash
+# View file MUST exist at:
+htdocs/luci-static/resources/view/netifyd-dashboard/overview.js
+#                                  ↑ Same path as menu ↑
+```
+
+**Common Error**: If paths don't match:
+- `HTTP error 404 while loading class file '/luci-static/resources/view/netifyd/overview.js'`
+
+**Solution**: Ensure menu paths match directory structure:
+- ✅ Correct: Menu path `netifyd-dashboard/overview` → file `view/netifyd-dashboard/overview.js`
+- ❌ Wrong: Menu path `netifyd/overview` → file `view/netifyd-dashboard/overview.js`
+
+#### 3. ubus Object Naming Convention
+
+All ubus objects MUST start with `luci.` prefix:
+
+```javascript
+// ✅ Correct:
+object: 'luci.cdn-cache'
+object: 'luci.system-hub'
+object: 'luci.wireguard-dashboard'
+
+// ❌ Wrong:
+object: 'cdn-cache'
+object: 'systemhub'
+```
+
+#### 4. Validation Before Deployment
+
+**ALWAYS** run validation before deploying:
+
+```bash
+./secubox-tools/validate-modules.sh
+```
+
+This script checks:
+- RPCD script names match ubus objects
+- Menu paths match view file locations
+- View files have corresponding menu entries
+- RPCD scripts are executable
+- JSON files are valid syntax
+- ubus objects follow naming convention
+
+### Makefile Structure
+
+Each package Makefile must define:
+- `PKG_NAME`: Package name (must match directory)
+- `PKG_VERSION`: Version number
+- `PKG_RELEASE`: Package release number
+- `LUCI_TITLE`: Display title in LuCI
+- `LUCI_DEPENDS`: Package dependencies (e.g., `+luci-base +rpcd`)
+- `LUCI_DESCRIPTION`: Brief description
+- `PKG_MAINTAINER`: Maintainer name and email
+- `PKG_LICENSE`: License (typically Apache-2.0)
+
+The Makefile includes `luci.mk` from the LuCI build system which handles installation.
+
+## Common Development Patterns
+
+### Creating a New Module
+
+1. Copy template: `cp -r templates/luci-app-template luci-app-newmodule`
+2. Update Makefile with new PKG_NAME, LUCI_TITLE, etc.
+3. Create directory structure under `htdocs/` and `root/`
+4. Implement RPCD backend in shell
+5. Create JavaScript views
+6. Define menu and ACL JSON files
+
+### RPCD Backend Pattern
+
+RPCD backends are shell scripts that:
+- Parse `$1` for the method name
+- Output valid JSON using `printf` or `echo`
+- Use `case` statements for method routing
+- Source UCI config if needed: `. /lib/functions.sh`
+
+Example:
+```bash
+#!/bin/sh
+case "$1" in
+    list)
+        echo '{ "status": {}, "stats": {} }'
+        ;;
+    call)
+        case "$2" in
+            status)
+                # Output JSON
+                printf '{"running": true, "version": "1.0.0"}\n'
+                ;;
+        esac
+        ;;
+esac
+```
+
+### JavaScript View Pattern
+
+Views extend `L.view` and implement `load()` and `render()`:
+
+```javascript
+'use strict';
+'require view';
+'require form';
+'require <module>/api as API';
+
+return L.view.extend({
+    load: function() {
+        return Promise.all([
+            API.getStatus(),
+            API.getStats()
+        ]);
+    },
+
+    render: function(data) {
+        var m, s, o;
+        m = new form.Map('config', _('Title'));
+        s = m.section(form.TypedSection, 'section');
+        // Add form fields...
+        return m.render();
+    }
+});
+```
+
+## Module Categories
+
+1. **Core Control** (2 modules)
+   - luci-app-secubox: Central hub
+   - luci-app-system-hub: System control center
+
+2. **Security & Monitoring** (2 modules)
+   - luci-app-crowdsec-dashboard: CrowdSec security
+   - luci-app-netdata-dashboard: System monitoring
+
+3. **Network Intelligence** (2 modules)
+   - luci-app-netifyd-dashboard: Deep packet inspection
+   - luci-app-network-modes: Network mode configuration
+
+4. **VPN & Access Control** (3 modules)
+   - luci-app-wireguard-dashboard: WireGuard VPN
+   - luci-app-client-guardian: NAC & captive portal
+   - luci-app-auth-guardian: Authentication system
+
+5. **Bandwidth & Traffic** (2 modules)
+   - luci-app-bandwidth-manager: QoS & quotas
+   - luci-app-media-flow: Media traffic detection
+
+6. **Performance & Services** (2 modules)
+   - luci-app-cdn-cache: CDN proxy cache
+   - luci-app-vhost-manager: Virtual host manager
+
+## CI/CD Integration
+
+### GitHub Actions Workflows
+
+1. **build-openwrt-packages.yml**: Compiles packages for all architectures
+   - Triggers on push, PR, and tags
+   - Matrix build for 13 architectures
+   - Uploads artifacts per architecture
+
+2. **build-secubox-images.yml**: Builds custom OpenWrt images
+   - Creates complete firmware images with SecuBox pre-installed
+
+3. **test-validate.yml**: Validation and testing
+   - Validates Makefile structure
+   - Checks JSON syntax
+   - Runs shellcheck on scripts
+   - Verifies file permissions
+
+### Supported Architectures
+
+ARM64: aarch64-cortex-a53, aarch64-cortex-a72, aarch64-generic, mediatek-filogic, rockchip-armv8, bcm27xx-bcm2711
+
+ARM32: arm-cortex-a7-neon, arm-cortex-a9-neon, qualcomm-ipq40xx, qualcomm-ipq806x
+
+MIPS: mips-24kc, mipsel-24kc, mipsel-74kc
+
+x86: x86-64, x86-generic
+
+## Key Files and Directories
+
+- `makefiles/`: Reference Makefiles for modules (backup/templates)
+- `secubox-tools/`: Repair and debugging utilities
+  - `secubox-repair.sh`: Auto-fixes Makefile and RPCD issues
+  - `secubox-debug.sh`: Validates package structure
+- `templates/`: Package templates for creating new modules
+- `.github/workflows/`: CI/CD automation scripts
+
+## Common Issues and Solutions
+
+### RPC Errors: "Object not found" or "Method not found"
+
+**Error**: `RPC call to luci.cdn-cache/status failed with error -32000: Object not found`
+
+**Cause**: RPCD script name doesn't match ubus object name in JavaScript
+
+**Solution**:
+1. Check JavaScript files for ubus object name:
+   ```bash
+   grep -r "object:" luci-app-*/htdocs --include="*.js"
+   ```
+2. Rename RPCD script to match exactly (including `luci.` prefix):
+   ```bash
+   mv root/usr/libexec/rpcd/cdn-cache root/usr/libexec/rpcd/luci.cdn-cache
+   ```
+3. Restart RPCD on router:
+   ```bash
+   /etc/init.d/rpcd restart
+   ```
+
+### HTTP 404 Errors: View Files Not Found
+
+**Error**: `HTTP error 404 while loading class file '/luci-static/resources/view/netifyd/overview.js'`
+
+**Cause**: Menu path doesn't match actual view file location
+
+**Solution**:
+1. Check menu JSON for path:
+   ```bash
+   grep '"path":' root/usr/share/luci/menu.d/*.json
+   ```
+2. Verify view file exists at matching location:
+   ```bash
+   ls htdocs/luci-static/resources/view/
+   ```
+3. Update menu path to match file location OR move file to match menu path
+
+### RPCD Not Responding
+
+After installing/updating a package:
+```bash
+/etc/init.d/rpcd restart
+/etc/init.d/uhttpd restart
+```
+
+### Menu Not Appearing
+
+Check that:
+1. Menu JSON is valid: `jsonlint root/usr/share/luci/menu.d/*.json`
+2. ACL grants access: Check `root/usr/share/rpcd/acl.d/*.json`
+3. Dependencies are installed: Check Makefile `LUCI_DEPENDS`
+4. Menu path matches view file location (see above)
+
+### Build Failures
+
+Common causes:
+1. Missing fields in Makefile (PKG_NAME, LUCI_TITLE, etc.)
+2. Invalid JSON syntax in menu.d or acl.d
+3. RPCD script not executable (chmod +x needed)
+4. Wrong include path (should be `include ../../luci.mk`)
+5. RPCD script name doesn't match ubus object (must use `luci.` prefix)
+
+Use repair tool: `./secubox-tools/secubox-repair.sh`
+
+### Quick Diagnosis
+
+Run the validation script to check all naming conventions:
+```bash
+./secubox-tools/validate-modules.sh
+```
+
+## Development Workflow
+
+1. Make changes to module files
+2. **Run validation checks** (CRITICAL):
+   ```bash
+   ./secubox-tools/validate-modules.sh
+   # Or use the local build tool:
+   ./secubox-tools/local-build.sh validate
+   ```
+3. Test JSON syntax: `jsonlint <file>.json`
+4. Test shell scripts: `shellcheck <script>`
+5. Build and test package locally (recommended):
+   ```bash
+   # Build single package
+   ./secubox-tools/local-build.sh build luci-app-<name>
+
+   # Or build with manual SDK:
+   make package/luci-app-<name>/compile V=s
+   ```
+6. Install on test router and verify functionality
+7. Run repair tool if needed: `./secubox-tools/secubox-repair.sh`
+8. Commit changes and push (triggers CI validation)
+9. Create tag for release: `git tag -a v1.0.0 -m "Release 1.0.0"`
+
+## Important Notes
+
+- **CRITICAL**: RPCD script names MUST match ubus object names (use `luci.` prefix)
+- **CRITICAL**: Menu paths MUST match view file directory structure
+- **CRITICAL**: Always run `./secubox-tools/validate-modules.sh` before committing
+- All modules use Apache-2.0 license
+- RPCD backends must be executable (chmod +x)
+- JavaScript files use strict mode: `'use strict';`
+- Menu entries require proper dependency chain
+- ACL must grant both ubus call and luci-cgi access
+- UCI config files are optional (many modules don't need them)
+- All packages build as architecture `all` (no compiled code)
diff --git a/docs/code-templates.md b/docs/code-templates.md
new file mode 100644
index 00000000..62afa739
--- /dev/null
+++ b/docs/code-templates.md
@@ -0,0 +1,1405 @@
+# SecuBox Module Code Templates
+
+**Version:** 1.0.0  
+**Last Updated:** 2025-12-28  
+**Status:** Active  
+**Purpose:** Ready-to-use code templates extracted from working SecuBox modules
+
+---
+
+## See Also
+
+- **Implementation Workflow:** [MODULE-IMPLEMENTATION-GUIDE.md](module-implementation-guide.md)
+- **Quick Commands:** [QUICK-START.md](quick-start.md)
+- **Automation Guardrails:** [CODEX.md](codex.md)
+- **Module Prompts:** [FEATURE-REGENERATION-PROMPTS.md](feature-regeneration-prompts.md)
+
+---
+
+## Table of Contents
+
+1. [File Structure Template](#file-structure-template)
+2. [API Module Template](#api-module-template)
+3. [JavaScript View Template](#javascript-view-template)
+4. [RPCD Backend Template](#rpcd-backend-template)
+5. [Menu JSON Template](#menu-json-template)
+6. [ACL JSON Template](#acl-json-template)
+7. [CSS Styling Template](#css-styling-template)
+8. [Complete Implementation Example](#complete-implementation-example)
+
+---
+
+## File Structure Template
+
+Every SecuBox module follows this exact structure:
+
+```
+luci-app-<module-name>/
+├── Makefile                                      # OpenWrt package definition
+├── README.md                                     # Module documentation
+├── htdocs/luci-static/resources/
+│   ├── <module-name>/
+│   │   ├── api.js                                # RPC API client (REQUIRED)
+│   │   ├── theme.js                              # Theme helper (optional)
+│   │   └── dashboard.css                         # Module-specific styles
+│   └── view/<module-name>/
+│       ├── overview.js                           # Main dashboard view
+│       ├── settings.js                           # Settings view (if needed)
+│       └── *.js                                  # Additional views
+└── root/
+    ├── etc/config/<module-name>                  # UCI config (optional)
+    └── usr/
+        ├── libexec/rpcd/
+        │   └── luci.<module-name>                # RPCD backend (REQUIRED, must be executable)
+        └── share/
+            ├── luci/menu.d/
+            │   └── luci-app-<module-name>.json   # Menu definition
+            └── rpcd/acl.d/
+                └── luci-app-<module-name>.json   # ACL permissions
+```
+
+**Critical Rules:**
+1. RPCD script MUST be named `luci.<module-name>` (with `luci.` prefix)
+2. RPCD script MUST be executable (`chmod +x`)
+3. Menu paths MUST match view file locations
+4. CSS/JS files should be 644 permissions
+5. All ubus objects MUST use `luci.` prefix
+
+---
+
+## API Module Template
+
+**File:** `htdocs/luci-static/resources/<module-name>/api.js`
+
+```javascript
+'use strict';
+'require baseclass';
+'require rpc';
+
+/**
+ * [Module Name] API
+ * Package: luci-app-<module-name>
+ * RPCD object: luci.<module-name>
+ * Version: 1.0.0
+ */
+
+// Debug log to verify correct version is loaded
+console.log('🔧 [Module Name] API v1.0.0 loaded at', new Date().toISOString());
+
+// ============================================================================
+// RPC Method Declarations
+// ============================================================================
+
+// Simple method (no parameters)
+var callStatus = rpc.declare({
+	object: 'luci.<module-name>',  // MUST match RPCD script name
+	method: 'status',
+	expect: {}
+});
+
+// Method with return structure
+var callGetData = rpc.declare({
+	object: 'luci.<module-name>',
+	method: 'get_data',
+	expect: { data: [] }  // Expected return structure
+});
+
+// Method with parameters
+var callPerformAction = rpc.declare({
+	object: 'luci.<module-name>',
+	method: 'perform_action',
+	params: ['action_type', 'target'],  // Parameter names
+	expect: { success: false }
+});
+
+// Method with multiple parameters
+var callUpdateConfig = rpc.declare({
+	object: 'luci.<module-name>',
+	method: 'update_config',
+	params: ['key', 'value', 'persist'],
+	expect: {}
+});
+
+// ============================================================================
+// Helper Functions (Optional)
+// ============================================================================
+
+/**
+ * Format bytes to human-readable string
+ */
+function formatBytes(bytes) {
+	if (bytes === 0) return '0 B';
+	var k = 1024;
+	var sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+	var i = Math.floor(Math.log(bytes) / Math.log(k));
+	return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}
+
+/**
+ * Format timestamp to "X ago" string
+ */
+function formatTimeAgo(timestamp) {
+	if (!timestamp) return 'Never';
+	var now = Math.floor(Date.now() / 1000);
+	var diff = now - timestamp;
+	if (diff < 60) return diff + 's ago';
+	if (diff < 3600) return Math.floor(diff / 60) + 'm ago';
+	if (diff < 86400) return Math.floor(diff / 3600) + 'h ago';
+	return Math.floor(diff / 86400) + 'd ago';
+}
+
+/**
+ * Format uptime seconds to "Xd Xh Xm" string
+ */
+function formatUptime(seconds) {
+	var days = Math.floor(seconds / 86400);
+	var hours = Math.floor((seconds % 86400) / 3600);
+	var mins = Math.floor((seconds % 3600) / 60);
+	return days + 'd ' + hours + 'h ' + mins + 'm';
+}
+
+// ============================================================================
+// API Export
+// ============================================================================
+
+return baseclass.extend({
+	// RPC methods - exposed via ubus
+	getStatus: callStatus,
+	getData: callGetData,
+	performAction: callPerformAction,
+	updateConfig: callUpdateConfig,
+
+	// Helper functions
+	formatBytes: formatBytes,
+	formatTimeAgo: formatTimeAgo,
+	formatUptime: formatUptime,
+
+	// Aggregate function for overview page (combines multiple calls)
+	getAllData: function() {
+		return Promise.all([
+			callStatus(),
+			callGetData()
+		]).then(function(results) {
+			return {
+				status: results[0] || {},
+				data: results[1] || { data: [] }
+			};
+		});
+	}
+});
+```
+
+**Key Points:**
+- Always use `'use strict';`
+- Require `baseclass` and `rpc`
+- Use `rpc.declare()` for each RPCD method
+- Export from `baseclass.extend()`
+- Helper functions can be included in the API module
+- Aggregate functions are useful for views that need multiple data sources
+
+---
+
+## JavaScript View Template
+
+**File:** `htdocs/luci-static/resources/view/<module-name>/overview.js`
+
+```javascript
+'use strict';
+'require view';
+'require ui';
+'require dom';
+'require poll';
+'require <module-name>/api as API';
+
+/**
+ * [Module Name] - Overview Dashboard
+ * Main view for luci-app-<module-name>
+ */
+
+return view.extend({
+	// ========================================================================
+	// Data Properties
+	// ========================================================================
+
+	statusData: null,
+	componentData: null,
+
+	// ========================================================================
+	// Load Data
+	// ========================================================================
+
+	/**
+	 * Called when view is loaded
+	 * Return a Promise (can use Promise.all for parallel loading)
+	 */
+	load: function() {
+		return Promise.all([
+			API.getStatus(),
+			API.getData()
+		]);
+	},
+
+	// ========================================================================
+	// Render View
+	// ========================================================================
+
+	/**
+	 * Called after load() completes
+	 * @param {Array} data - Results from load() Promise.all
+	 */
+	render: function(data) {
+		var self = this;
+		this.statusData = data[0] || {};
+		this.componentData = data[1] || { data: [] };
+
+		// Main container
+		var container = E('div', { 'class': 'module-dashboard' }, [
+			// Load CSS
+			E('link', { 'rel': 'stylesheet', 'href': L.resource('<module-name>/dashboard.css') }),
+
+			// Page Header
+			this.renderHeader(),
+
+			// Stats Overview Grid
+			this.renderStatsOverview(),
+
+			// Content Cards
+			this.renderContent()
+		]);
+
+		// Setup auto-refresh polling (30 seconds)
+		poll.add(L.bind(function() {
+			return Promise.all([
+				API.getStatus(),
+				API.getData()
+			]).then(L.bind(function(refreshData) {
+				this.statusData = refreshData[0] || {};
+				this.componentData = refreshData[1] || { data: [] };
+				this.updateDashboard();
+			}, this));
+		}, this), 30);
+
+		return container;
+	},
+
+	// ========================================================================
+	// Render Components
+	// ========================================================================
+
+	/**
+	 * Render page header with title and stats badges
+	 */
+	renderHeader: function() {
+		return E('div', { 'class': 'sh-page-header' }, [
+			E('div', {}, [
+				E('h2', { 'class': 'sh-page-title' }, [
+					E('span', { 'class': 'sh-page-title-icon' }, '🚀'),
+					'Module Title'
+				]),
+				E('p', { 'class': 'sh-page-subtitle' }, 'Module description and purpose')
+			]),
+			E('div', { 'class': 'sh-stats-grid' }, [
+				this.renderStatBadge('Active Items', this.statusData.active || 0),
+				this.renderStatBadge('Total Items', this.statusData.total || 0),
+				this.renderStatBadge('Status', this.statusData.status || 'Unknown'),
+				this.renderStatBadge('Version', this.statusData.version || '1.0.0')
+			])
+		]);
+	},
+
+	/**
+	 * Render a single stat badge
+	 */
+	renderStatBadge: function(label, value) {
+		return E('div', { 'class': 'sh-stat-badge' }, [
+			E('div', { 'class': 'sh-stat-value' }, String(value)),
+			E('div', { 'class': 'sh-stat-label' }, label)
+		]);
+	},
+
+	/**
+	 * Render stats overview grid
+	 */
+	renderStatsOverview: function() {
+		return E('div', { 'class': 'stats-grid' }, [
+			this.renderMetricCard('CPU', this.statusData.cpu),
+			this.renderMetricCard('Memory', this.statusData.memory),
+			this.renderMetricCard('Disk', this.statusData.disk)
+		]);
+	},
+
+	/**
+	 * Render a metric card with progress bar
+	 */
+	renderMetricCard: function(title, data) {
+		if (!data) return E('div');
+
+		var usage = data.usage || 0;
+		var status = usage >= 90 ? 'critical' : (usage >= 75 ? 'warning' : 'ok');
+		var color = usage >= 90 ? '#ef4444' : (usage >= 75 ? '#f59e0b' : '#22c55e');
+
+		return E('div', { 'class': 'sh-metric-card sh-metric-' + status }, [
+			E('div', { 'class': 'sh-metric-header' }, [
+				E('span', { 'class': 'sh-metric-icon' }, this.getMetricIcon(title)),
+				E('span', { 'class': 'sh-metric-title' }, title)
+			]),
+			E('div', { 'class': 'sh-metric-value' }, usage + '%'),
+			E('div', { 'class': 'sh-metric-progress' }, [
+				E('div', {
+					'class': 'sh-metric-progress-bar',
+					'style': 'width: ' + usage + '%; background: ' + color
+				})
+			]),
+			E('div', { 'class': 'sh-metric-details' }, data.details || 'N/A')
+		]);
+	},
+
+	/**
+	 * Get icon for metric type
+	 */
+	getMetricIcon: function(type) {
+		switch(type) {
+			case 'CPU': return '🔥';
+			case 'Memory': return '💾';
+			case 'Disk': return '💿';
+			default: return '📊';
+		}
+	},
+
+	/**
+	 * Render main content
+	 */
+	renderContent: function() {
+		return E('div', { 'class': 'content-grid' }, [
+			this.renderCard('Active Components', this.renderComponentsList()),
+			this.renderCard('Quick Actions', this.renderQuickActions()),
+			this.renderCard('Recent Activity', this.renderActivityLog())
+		]);
+	},
+
+	/**
+	 * Render a card container
+	 */
+	renderCard: function(title, content) {
+		return E('div', { 'class': 'sh-card' }, [
+			E('div', { 'class': 'sh-card-header' }, [
+				E('h3', { 'class': 'sh-card-title' }, title)
+			]),
+			E('div', { 'class': 'sh-card-body' }, content)
+		]);
+	},
+
+	/**
+	 * Render components list
+	 */
+	renderComponentsList: function() {
+		var items = this.componentData.data || [];
+
+		if (items.length === 0) {
+			return E('div', { 'class': 'sh-empty-state' }, [
+				E('div', { 'class': 'sh-empty-icon' }, '📭'),
+				E('div', { 'class': 'sh-empty-text' }, 'No components found')
+			]);
+		}
+
+		return E('div', { 'class': 'component-list' },
+			items.map(L.bind(function(item) {
+				return this.renderComponentItem(item);
+			}, this))
+		);
+	},
+
+	/**
+	 * Render a single component item
+	 */
+	renderComponentItem: function(item) {
+		var statusClass = item.status === 'active' ? 'sh-card-success' : 'sh-card-warning';
+
+		return E('div', { 'class': 'component-item ' + statusClass }, [
+			E('div', { 'class': 'component-name' }, item.name || 'Unknown'),
+			E('div', { 'class': 'component-status' }, item.status || 'unknown'),
+			E('div', { 'class': 'component-actions' }, [
+				E('button', {
+					'class': 'sh-btn sh-btn-primary sh-btn-sm',
+					'click': L.bind(this.handleAction, this, item.id, 'view')
+				}, 'View'),
+				E('button', {
+					'class': 'sh-btn sh-btn-secondary sh-btn-sm',
+					'click': L.bind(this.handleAction, this, item.id, 'configure')
+				}, 'Configure')
+			])
+		]);
+	},
+
+	/**
+	 * Render quick actions
+	 */
+	renderQuickActions: function() {
+		return E('div', { 'class': 'quick-actions' }, [
+			E('button', {
+				'class': 'sh-btn sh-btn-primary',
+				'click': L.bind(this.handleRefresh, this)
+			}, '🔄 Refresh'),
+			E('button', {
+				'class': 'sh-btn sh-btn-success',
+				'click': L.bind(this.handleAction, this, null, 'start_all')
+			}, '▶️ Start All'),
+			E('button', {
+				'class': 'sh-btn sh-btn-danger',
+				'click': L.bind(this.handleAction, this, null, 'stop_all')
+			}, '⏹️ Stop All')
+		]);
+	},
+
+	/**
+	 * Render activity log
+	 */
+	renderActivityLog: function() {
+		var activities = this.statusData.recent_activities || [];
+
+		if (activities.length === 0) {
+			return E('div', { 'class': 'sh-empty-text' }, 'No recent activity');
+		}
+
+		return E('div', { 'class': 'activity-log' },
+			activities.map(function(activity) {
+				return E('div', { 'class': 'activity-item' }, [
+					E('span', { 'class': 'activity-time' }, activity.time || ''),
+					E('span', { 'class': 'activity-text' }, activity.message || '')
+				]);
+			})
+		);
+	},
+
+	// ========================================================================
+	// Event Handlers
+	// ========================================================================
+
+	/**
+	 * Handle generic action
+	 */
+	handleAction: function(id, action, ev) {
+		var self = this;
+
+		ui.showModal(_('Performing Action'), [
+			E('p', {}, _('Please wait...'))
+		]);
+
+		API.performAction(action, id || '').then(function(result) {
+			ui.hideModal();
+
+			if (result.success) {
+				ui.addNotification(null, E('p', _('Action completed successfully')), 'success');
+				self.handleRefresh();
+			} else {
+				ui.addNotification(null, E('p', _('Action failed: %s').format(result.message || 'Unknown error')), 'error');
+			}
+		}).catch(function(error) {
+			ui.hideModal();
+			ui.addNotification(null, E('p', _('Error: %s').format(error.message || 'Unknown error')), 'error');
+		});
+	},
+
+	/**
+	 * Handle refresh
+	 */
+	handleRefresh: function() {
+		var self = this;
+
+		return Promise.all([
+			API.getStatus(),
+			API.getData()
+		]).then(function(data) {
+			self.statusData = data[0] || {};
+			self.componentData = data[1] || { data: [] };
+			self.updateDashboard();
+			ui.addNotification(null, E('p', _('Dashboard refreshed')), 'info');
+		});
+	},
+
+	/**
+	 * Update dashboard without full re-render
+	 */
+	updateDashboard: function() {
+		// Update specific DOM elements instead of full re-render
+		var statsGrid = document.querySelector('.sh-stats-grid');
+		if (statsGrid) {
+			dom.content(statsGrid, [
+				this.renderStatBadge('Active Items', this.statusData.active || 0),
+				this.renderStatBadge('Total Items', this.statusData.total || 0),
+				this.renderStatBadge('Status', this.statusData.status || 'Unknown'),
+				this.renderStatBadge('Version', this.statusData.version || '1.0.0')
+			]);
+		}
+
+		// Update components list
+		var componentsList = document.querySelector('.component-list');
+		if (componentsList) {
+			var items = this.componentData.data || [];
+			dom.content(componentsList,
+				items.map(L.bind(function(item) {
+					return this.renderComponentItem(item);
+				}, this))
+			);
+		}
+	},
+
+	// ========================================================================
+	// Required LuCI Methods (can be null if not used)
+	// ========================================================================
+
+	handleSaveApply: null,
+	handleSave: null,
+	handleReset: null
+});
+```
+
+**Key Points:**
+- Extend `view` with `load()` and `render()` methods
+- Use `E()` helper to build DOM elements
+- Use `L.bind()` for event handlers to preserve `this` context
+- Use `poll.add()` for auto-refresh functionality
+- Use `dom.content()` for efficient partial updates
+- Use `ui.showModal()`, `ui.hideModal()`, `ui.addNotification()` for user feedback
+- Always handle errors in Promise chains
+
+---
+
+## RPCD Backend Template
+
+**File:** `root/usr/libexec/rpcd/luci.<module-name>`
+
+```bash
+#!/bin/sh
+# [Module Name] RPCD Backend
+# Package: luci-app-<module-name>
+# Version: 1.0.0
+
+# Source required libraries
+. /lib/functions.sh
+. /usr/share/libubox/jshn.sh
+
+# ============================================================================
+# RPC Methods
+# ============================================================================
+
+# Get status information
+status() {
+	json_init
+
+	# Example: Get system info
+	local hostname=$(cat /proc/sys/kernel/hostname 2>/dev/null || echo "unknown")
+	local uptime=$(awk '{print int($1)}' /proc/uptime 2>/dev/null || echo 0)
+
+	json_add_string "hostname" "$hostname"
+	json_add_int "uptime" "$uptime"
+	json_add_string "version" "1.0.0"
+	json_add_string "status" "running"
+
+	# Add nested object
+	json_add_object "cpu"
+	local cpu_load=$(awk '{print $1}' /proc/loadavg 2>/dev/null || echo "0")
+	json_add_string "load" "$cpu_load"
+	json_add_int "usage" "45"
+	json_close_object
+
+	# Add timestamp
+	json_add_string "timestamp" "$(date '+%Y-%m-%d %H:%M:%S')"
+
+	json_dump
+}
+
+# Get data with array
+get_data() {
+	json_init
+	json_add_array "data"
+
+	# Example: List files
+	for file in /etc/config/*; do
+		[ -f "$file" ] || continue
+		local name=$(basename "$file")
+
+		json_add_object ""
+		json_add_string "name" "$name"
+		json_add_string "path" "$file"
+		json_add_int "size" "$(stat -c%s "$file" 2>/dev/null || echo 0)"
+		json_close_object
+	done
+
+	json_close_array
+	json_dump
+}
+
+# Perform action with parameters
+perform_action() {
+	# Read JSON input from stdin
+	read -r input
+	json_load "$input"
+
+	# Extract parameters
+	local action_type target
+	json_get_var action_type action_type
+	json_get_var target target
+	json_cleanup
+
+	# Validate parameters
+	if [ -z "$action_type" ]; then
+		json_init
+		json_add_boolean "success" 0
+		json_add_string "message" "Action type is required"
+		json_dump
+		return 1
+	fi
+
+	# Perform action based on type
+	local result=0
+	case "$action_type" in
+		start)
+			# Example: Start a service
+			/etc/init.d/"$target" start >/dev/null 2>&1
+			result=$?
+			;;
+		stop)
+			# Example: Stop a service
+			/etc/init.d/"$target" stop >/dev/null 2>&1
+			result=$?
+			;;
+		restart)
+			# Example: Restart a service
+			/etc/init.d/"$target" restart >/dev/null 2>&1
+			result=$?
+			;;
+		*)
+			json_init
+			json_add_boolean "success" 0
+			json_add_string "message" "Invalid action: $action_type"
+			json_dump
+			return 1
+			;;
+	esac
+
+	# Return result
+	json_init
+	if [ "$result" -eq 0 ]; then
+		json_add_boolean "success" 1
+		json_add_string "message" "Action '$action_type' completed successfully"
+	else
+		json_add_boolean "success" 0
+		json_add_string "message" "Action '$action_type' failed"
+	fi
+	json_dump
+}
+
+# Update configuration
+update_config() {
+	read -r input
+	json_load "$input"
+
+	local key value persist
+	json_get_var key key
+	json_get_var value value
+	json_get_var persist persist
+	json_cleanup
+
+	# Validate
+	if [ -z "$key" ] || [ -z "$value" ]; then
+		json_init
+		json_add_boolean "success" 0
+		json_add_string "message" "Key and value are required"
+		json_dump
+		return 1
+	fi
+
+	# Update UCI config
+	uci set <module-name>.general."$key"="$value"
+
+	if [ "$persist" = "1" ]; then
+		uci commit <module-name>
+	fi
+
+	json_init
+	json_add_boolean "success" 1
+	json_add_string "message" "Configuration updated"
+	json_dump
+}
+
+# ============================================================================
+# Main Dispatcher
+# ============================================================================
+
+case "$1" in
+	list)
+		# List all available methods with their parameters
+		cat << 'EOF'
+{
+	"status": {},
+	"get_data": {},
+	"perform_action": {
+		"action_type": "string",
+		"target": "string"
+	},
+	"update_config": {
+		"key": "string",
+		"value": "string",
+		"persist": 1
+	}
+}
+EOF
+		;;
+	call)
+		# Route to the appropriate method
+		case "$2" in
+			status) status ;;
+			get_data) get_data ;;
+			perform_action) perform_action ;;
+			update_config) update_config ;;
+			*)
+				# Unknown method
+				json_init
+				json_add_boolean "success" 0
+				json_add_string "error" "Unknown method: $2"
+				json_dump
+				;;
+		esac
+		;;
+esac
+```
+
+**Key Points:**
+- Always start with `#!/bin/sh`
+- Source `/lib/functions.sh` and `/usr/share/libubox/jshn.sh`
+- Use `json_init`, `json_add_*`, `json_dump` for JSON output
+- Read parameters from stdin using `read -r input` and `json_load`
+- Always validate input parameters
+- Return proper success/error status
+- Implement `list` case to declare all methods and parameters
+- Implement `call` case to route to method handlers
+
+---
+
+## Menu JSON Template
+
+**File:** `root/usr/share/luci/menu.d/luci-app-<module-name>.json`
+
+```json
+{
+	"admin/secubox/<category>/<module-name>": {
+		"title": "Module Title",
+		"order": 10,
+		"action": {
+			"type": "firstchild"
+		},
+		"depends": {
+			"acl": ["luci-app-<module-name>"]
+		}
+	},
+	"admin/secubox/<category>/<module-name>/overview": {
+		"title": "Overview",
+		"order": 1,
+		"action": {
+			"type": "view",
+			"path": "<module-name>/overview"
+		}
+	},
+	"admin/secubox/<category>/<module-name>/settings": {
+		"title": "Settings",
+		"order": 2,
+		"action": {
+			"type": "view",
+			"path": "<module-name>/settings"
+		}
+	}
+}
+```
+
+**Categories:**
+- `security` - Security & monitoring modules (CrowdSec, Auth Guardian)
+- `monitoring` - Monitoring modules (Netdata)
+- `network` - Network modules (Netifyd, Network Modes, WireGuard)
+- `system` - System modules (System Hub)
+- `services` - Service modules (CDN Cache, VHost Manager)
+
+**Key Points:**
+- Menu paths follow `admin/secubox/<category>/<module-name>`
+- First entry uses `"type": "firstchild"` to redirect to first child
+- Subsequent entries use `"type": "view"` with `"path"` matching view file location
+- Path MUST match: `"path": "<module-name>/overview"` → `view/<module-name>/overview.js`
+- Order determines menu position (lower numbers first)
+- Depends on ACL entry matching package name
+
+---
+
+## ACL JSON Template
+
+**File:** `root/usr/share/rpcd/acl.d/luci-app-<module-name>.json`
+
+```json
+{
+	"luci-app-<module-name>": {
+		"description": "Module Title - Brief Description",
+		"read": {
+			"ubus": {
+				"luci.<module-name>": [
+					"status",
+					"get_data",
+					"get_config",
+					"list_items"
+				]
+			},
+			"uci": ["<module-name>"]
+		},
+		"write": {
+			"ubus": {
+				"luci.<module-name>": [
+					"perform_action",
+					"update_config",
+					"delete_item",
+					"restart_service"
+				]
+			},
+			"uci": ["<module-name>"]
+		}
+	}
+}
+```
+
+**Key Points:**
+- ACL entry name MUST match package name
+- `read` section lists methods that can be called without write permissions
+- `write` section lists methods that modify state
+- ubus object names MUST match RPCD script name (`luci.<module-name>`)
+- UCI config access can be granted separately
+- All method names MUST exactly match those defined in RPCD script
+
+---
+
+## CSS Styling Template
+
+**File:** `htdocs/luci-static/resources/<module-name>/dashboard.css`
+
+```css
+/**
+ * [Module Name] Dashboard Styles
+ * Extends system-hub/common.css design system
+ * Version: 1.0.0
+ */
+
+/* ============================================================================
+   IMPORTANT: Import common.css for design system variables
+   ============================================================================ */
+@import url('../system-hub/common.css');
+
+/* ============================================================================
+   Module-Specific Styles
+   ============================================================================ */
+
+/* Container */
+.module-dashboard {
+	padding: 24px;
+	background: var(--sh-bg-primary);
+	min-height: 100vh;
+}
+
+/* Stats Grid */
+.stats-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+	gap: 20px;
+	margin: 24px 0;
+}
+
+/* Metric Card */
+.sh-metric-card {
+	background: var(--sh-bg-card);
+	border: 1px solid var(--sh-border);
+	border-radius: 16px;
+	padding: 24px;
+	transition: all 0.3s ease;
+	position: relative;
+	overflow: hidden;
+}
+
+.sh-metric-card::before {
+	content: '';
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	height: 3px;
+	background: linear-gradient(90deg, var(--sh-primary), var(--sh-primary-end));
+	opacity: 0;
+	transition: opacity 0.3s ease;
+}
+
+.sh-metric-card:hover {
+	transform: translateY(-3px);
+	box-shadow: 0 12px 28px var(--sh-hover-shadow);
+}
+
+.sh-metric-card:hover::before {
+	opacity: 1;
+}
+
+/* Metric status variants */
+.sh-metric-ok::before {
+	background: var(--sh-success);
+	opacity: 1;
+}
+
+.sh-metric-warning::before {
+	background: var(--sh-warning);
+	opacity: 1;
+}
+
+.sh-metric-critical::before {
+	background: var(--sh-danger);
+	opacity: 1;
+}
+
+/* Metric Header */
+.sh-metric-header {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	margin-bottom: 16px;
+}
+
+.sh-metric-icon {
+	font-size: 28px;
+	line-height: 1;
+}
+
+.sh-metric-title {
+	font-size: 16px;
+	font-weight: 600;
+	color: var(--sh-text-secondary);
+}
+
+/* Metric Value */
+.sh-metric-value {
+	font-size: 40px;
+	font-weight: 700;
+	font-family: 'JetBrains Mono', monospace;
+	color: var(--sh-text-primary);
+	margin-bottom: 12px;
+}
+
+/* Metric Progress Bar */
+.sh-metric-progress {
+	width: 100%;
+	height: 8px;
+	background: var(--sh-bg-tertiary);
+	border-radius: 4px;
+	overflow: hidden;
+	margin-bottom: 8px;
+}
+
+.sh-metric-progress-bar {
+	height: 100%;
+	background: var(--sh-primary);
+	transition: width 0.5s ease;
+	border-radius: 4px;
+}
+
+/* Metric Details */
+.sh-metric-details {
+	font-size: 14px;
+	color: var(--sh-text-secondary);
+	font-weight: 500;
+}
+
+/* Content Grid */
+.content-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+	gap: 24px;
+	margin-top: 24px;
+}
+
+/* Component List */
+.component-list {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+.component-item {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 16px;
+	background: var(--sh-bg-secondary);
+	border: 1px solid var(--sh-border);
+	border-radius: 12px;
+	transition: all 0.2s ease;
+	position: relative;
+	overflow: hidden;
+}
+
+.component-item::before {
+	content: '';
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	height: 3px;
+	background: var(--sh-primary);
+	opacity: 0;
+	transition: opacity 0.3s ease;
+}
+
+.component-item:hover {
+	transform: translateX(4px);
+	border-color: var(--sh-primary);
+}
+
+.component-item:hover::before {
+	opacity: 1;
+}
+
+.component-name {
+	font-size: 16px;
+	font-weight: 600;
+	color: var(--sh-text-primary);
+	flex: 1;
+}
+
+.component-status {
+	font-size: 14px;
+	color: var(--sh-text-secondary);
+	margin: 0 16px;
+}
+
+.component-actions {
+	display: flex;
+	gap: 8px;
+}
+
+/* Quick Actions */
+.quick-actions {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 12px;
+}
+
+/* Activity Log */
+.activity-log {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+.activity-item {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	padding: 12px;
+	background: var(--sh-bg-secondary);
+	border-radius: 8px;
+	font-size: 14px;
+}
+
+.activity-time {
+	font-family: 'JetBrains Mono', monospace;
+	color: var(--sh-text-secondary);
+	font-size: 12px;
+	min-width: 80px;
+}
+
+.activity-text {
+	color: var(--sh-text-primary);
+	flex: 1;
+}
+
+/* ============================================================================
+   Button Variants (Small Size)
+   ============================================================================ */
+
+.sh-btn-sm {
+	padding: 6px 12px;
+	font-size: 12px;
+}
+
+/* ============================================================================
+   Responsive Design
+   ============================================================================ */
+
+@media (max-width: 768px) {
+	.module-dashboard {
+		padding: 16px;
+	}
+
+	.stats-grid,
+	.content-grid {
+		grid-template-columns: 1fr;
+	}
+
+	.component-item {
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 12px;
+	}
+
+	.component-actions {
+		width: 100%;
+	}
+
+	.sh-metric-value {
+		font-size: 32px;
+	}
+}
+
+/* ============================================================================
+   Dark Mode Enhancements
+   ============================================================================ */
+
+[data-theme="dark"] .module-dashboard {
+	background: var(--sh-bg-primary);
+}
+
+[data-theme="dark"] .component-item,
+[data-theme="dark"] .activity-item {
+	background: var(--sh-bg-secondary);
+	border-color: var(--sh-border);
+}
+
+[data-theme="dark"] .component-item:hover {
+	background: var(--sh-bg-tertiary);
+}
+```
+
+**Key Points:**
+- Always import `system-hub/common.css` for design system variables
+- Use CSS variables (`var(--sh-*)`) instead of hardcoded colors
+- Support dark mode with `[data-theme="dark"]` selectors
+- Use responsive grid layouts (`grid-template-columns: repeat(auto-fit, minmax(...))`)
+- Add smooth transitions for better UX
+- Use JetBrains Mono for numeric values
+- Follow mobile-first responsive design
+
+---
+
+## Complete Implementation Example
+
+Here's a complete minimal working example for a new module called "Example Dashboard":
+
+### Directory Structure
+```
+luci-app-example-dashboard/
+├── Makefile
+├── htdocs/luci-static/resources/
+│   ├── example-dashboard/
+│   │   ├── api.js
+│   │   └── dashboard.css
+│   └── view/example-dashboard/
+│       └── overview.js
+└── root/
+    └── usr/
+        ├── libexec/rpcd/
+        │   └── luci.example-dashboard
+        └── share/
+            ├── luci/menu.d/
+            │   └── luci-app-example-dashboard.json
+            └── rpcd/acl.d/
+                └── luci-app-example-dashboard.json
+```
+
+### api.js
+```javascript
+'use strict';
+'require baseclass';
+'require rpc';
+
+var callStatus = rpc.declare({
+	object: 'luci.example-dashboard',
+	method: 'status',
+	expect: {}
+});
+
+return baseclass.extend({
+	getStatus: callStatus
+});
+```
+
+### overview.js
+```javascript
+'use strict';
+'require view';
+'require example-dashboard/api as API';
+
+return view.extend({
+	load: function() {
+		return API.getStatus();
+	},
+
+	render: function(data) {
+		return E('div', {}, [
+			E('link', { 'rel': 'stylesheet', 'href': L.resource('example-dashboard/dashboard.css') }),
+			E('h2', {}, 'Example Dashboard'),
+			E('p', {}, 'Status: ' + (data.status || 'Unknown'))
+		]);
+	},
+
+	handleSaveApply: null,
+	handleSave: null,
+	handleReset: null
+});
+```
+
+### luci.example-dashboard (RPCD)
+```bash
+#!/bin/sh
+. /usr/share/libubox/jshn.sh
+
+status() {
+	json_init
+	json_add_string "status" "running"
+	json_add_string "version" "1.0.0"
+	json_dump
+}
+
+case "$1" in
+	list)
+		echo '{"status":{}}'
+		;;
+	call)
+		case "$2" in
+			status) status ;;
+		esac
+		;;
+esac
+```
+
+### menu.d/luci-app-example-dashboard.json
+```json
+{
+	"admin/secubox/monitoring/example-dashboard": {
+		"title": "Example Dashboard",
+		"order": 50,
+		"action": {
+			"type": "firstchild"
+		},
+		"depends": {
+			"acl": ["luci-app-example-dashboard"]
+		}
+	},
+	"admin/secubox/monitoring/example-dashboard/overview": {
+		"title": "Overview",
+		"order": 1,
+		"action": {
+			"type": "view",
+			"path": "example-dashboard/overview"
+		}
+	}
+}
+```
+
+### acl.d/luci-app-example-dashboard.json
+```json
+{
+	"luci-app-example-dashboard": {
+		"description": "Example Dashboard",
+		"read": {
+			"ubus": {
+				"luci.example-dashboard": ["status"]
+			}
+		}
+	}
+}
+```
+
+### dashboard.css
+```css
+@import url('../system-hub/common.css');
+
+div {
+	padding: 20px;
+}
+```
+
+**Installation Steps:**
+1. Copy files to module directory
+2. Set RPCD permissions: `chmod +x root/usr/libexec/rpcd/luci.example-dashboard`
+3. Validate: `./secubox-tools/validate-modules.sh`
+4. Build: `./secubox-tools/local-build.sh build luci-app-example-dashboard`
+5. Deploy: `scp build/x86-64/*.ipk root@router:/tmp/`
+6. Install: `ssh root@router "opkg install /tmp/luci-app-example-dashboard*.ipk && /etc/init.d/rpcd restart"`
+
+---
+
+## Common Pitfalls and Solutions
+
+### 1. RPCD "Object not found" Error
+**Error:** `RPC call to luci.example-dashboard/status failed with error -32000: Object not found`
+
+**Solutions:**
+- Check RPCD script name matches ubus object name exactly (including `luci.` prefix)
+- Verify RPCD script is executable: `chmod +x root/usr/libexec/rpcd/luci.example-dashboard`
+- Restart RPCD service: `/etc/init.d/rpcd restart`
+- Check RPCD logs: `logread | grep rpcd`
+
+### 2. HTTP 404 View Not Found
+**Error:** `HTTP error 404 while loading class file '/luci-static/resources/view/example-dashboard/overview.js'`
+
+**Solutions:**
+- Verify menu path matches view file location exactly
+- Menu: `"path": "example-dashboard/overview"` → File: `view/example-dashboard/overview.js`
+- Check file permissions: `644` for CSS/JS files
+- Clear browser cache
+
+### 3. ACL Permission Denied
+**Error:** Access denied or missing permissions
+
+**Solutions:**
+- Verify ACL file exists in `root/usr/share/rpcd/acl.d/`
+- Check ubus object name in ACL matches RPCD script name
+- Restart RPCD: `/etc/init.d/rpcd restart`
+- Check method is listed in appropriate section (read vs write)
+
+### 4. CSS Not Loading
+**Problem:** Styles not applied
+
+**Solutions:**
+- Verify CSS import path: `L.resource('example-dashboard/dashboard.css')`
+- Check file permissions: `644`
+- Import common.css: `@import url('../system-hub/common.css');`
+- Clear browser cache
+- Check browser console for 404 errors
+
+### 5. Auto-Refresh Not Working
+**Problem:** Poll not updating dashboard
+
+**Solutions:**
+- Verify poll.add() is called in render() method
+- Check API calls in poll callback return Promises
+- Ensure updateDashboard() method updates DOM correctly
+- Use browser console to check for JavaScript errors
+
+---
+
+## Validation Checklist
+
+Before deploying, always run these checks:
+
+```bash
+# 1. Fix permissions
+./secubox-tools/fix-permissions.sh --local
+
+# 2. Validate module structure
+./secubox-tools/validate-modules.sh
+
+# 3. Validate JSON syntax
+find luci-app-example-dashboard -name "*.json" -exec jsonlint {} \;
+
+# 4. Validate shell scripts
+shellcheck luci-app-example-dashboard/root/usr/libexec/rpcd/*
+
+# 5. Build locally
+./secubox-tools/local-build.sh build luci-app-example-dashboard
+```
+
+---
+
+**Document Version:** 1.0.0
+**Last Updated:** 2025-12-27
+**Maintainer:** CyberMind.fr
diff --git a/docs/development-guidelines.md b/docs/development-guidelines.md
new file mode 100644
index 00000000..d87ff5a6
--- /dev/null
+++ b/docs/development-guidelines.md
@@ -0,0 +1,1857 @@
+# SecuBox & System Hub - Development Guidelines
+
+**Version:** 1.0.0  
+**Last Updated:** 2025-12-28  
+**Status:** Active  
+**Audience:** Développeurs, IA assistants, mainteneurs
+
+Ce document définit les standards, bonnes pratiques et validations obligatoires pour le développement de modules SecuBox et System Hub dans l'écosystème OpenWrt LuCI.
+
+---
+
+## Table des matières
+
+1. [Design System & UI Guidelines](#design-system--ui-guidelines)
+2. [Architecture & Naming Conventions](#architecture--naming-conventions)
+3. [RPCD & ubus Best Practices](#rpcd--ubus-best-practices)
+4. [ACL & Permissions](#acl--permissions)
+5. [JavaScript Patterns](#javascript-patterns)
+6. [CSS/Styling Standards](#cssstyling-standards)
+7. [Common Errors & Solutions](#common-errors--solutions)
+8. [Validation Checklist](#validation-checklist)
+9. [Deployment Procedures](#deployment-procedures)
+
+---
+
+## Design System & UI Guidelines
+
+### Color Palette (Demo-inspired)
+
+**IMPORTANT:** Toujours utiliser la palette définie dans `system-hub/common.css`
+
+#### Dark Mode (Primary - Recommended)
+```css
+--sh-text-primary: #fafafa;
+--sh-text-secondary: #a0a0b0;
+--sh-bg-primary: #0a0a0f;      /* Fond principal (noir profond) */
+--sh-bg-secondary: #12121a;     /* Fond cartes/sections */
+--sh-bg-tertiary: #1a1a24;      /* Fond hover/actif */
+--sh-bg-card: #12121a;
+--sh-border: #2a2a35;
+--sh-primary: #6366f1;          /* Indigo */
+--sh-primary-end: #8b5cf6;      /* Violet (pour dégradés) */
+--sh-success: #22c55e;          /* Vert */
+--sh-danger: #ef4444;           /* Rouge */
+--sh-warning: #f59e0b;          /* Orange */
+```
+
+#### Light Mode (Secondary)
+```css
+--sh-text-primary: #0f172a;
+--sh-text-secondary: #475569;
+--sh-bg-primary: #ffffff;
+--sh-bg-secondary: #f8fafc;
+--sh-bg-tertiary: #f1f5f9;
+--sh-bg-card: #ffffff;
+--sh-border: #e2e8f0;
+```
+
+**✅ TOUJOURS utiliser les CSS variables** - Ne JAMAIS hardcoder les couleurs.
+
+### Typography
+
+#### Fonts Stack
+```css
+/* Texte général */
+font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+
+/* Valeurs numériques, IDs, code */
+font-family: 'JetBrains Mono', 'Courier New', monospace;
+```
+
+**Import requis** (ajouté dans common.css):
+```css
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');
+```
+
+#### Font Sizes
+```css
+/* Titres */
+--sh-title-xl: 28px;    /* Page titles */
+--sh-title-lg: 20px;    /* Card titles */
+--sh-title-md: 16px;    /* Section headers */
+
+/* Texte */
+--sh-text-base: 14px;   /* Body text */
+--sh-text-sm: 13px;     /* Labels, meta */
+--sh-text-xs: 11px;     /* Uppercase labels */
+
+/* Valeurs */
+--sh-value-xl: 40px;    /* Large metrics */
+--sh-value-lg: 32px;    /* Stats overview */
+--sh-value-md: 28px;    /* Badges */
+```
+
+### Component Patterns
+
+#### Component Hierarchy
+
+The following diagram shows the standard page structure and component relationships:
+
+```mermaid
+graph TB
+    PAGE[Page Container<br/>.module-dashboard] --> HEADER[sh-page-header]
+    PAGE --> CONTENT[sh-content]
+
+    HEADER --> TITLE_SECTION[Title Section<br/>div]
+    HEADER --> STATS[sh-stats-grid]
+
+    TITLE_SECTION --> TITLE[sh-page-title<br/>gradient text]
+    TITLE_SECTION --> SUBTITLE[sh-page-subtitle]
+
+    STATS --> BADGE1[sh-stat-badge]
+    STATS --> BADGE2[sh-stat-badge]
+    STATS --> BADGE3[...]
+
+    BADGE1 --> VALUE1[sh-stat-value<br/>monospace font]
+    BADGE1 --> LABEL1[sh-stat-label<br/>uppercase]
+
+    CONTENT --> TABS[sh-filter-tabs]
+    CONTENT --> CARD_GRID[Card Grid<br/>grid layout]
+
+    TABS --> TAB1[sh-filter-tab<br/>active]
+    TABS --> TAB2[sh-filter-tab]
+
+    CARD_GRID --> CARD1[sh-card]
+    CARD_GRID --> CARD2[sh-card-success]
+    CARD_GRID --> CARD3[sh-card-danger]
+
+    CARD1 --> CH1[sh-card-header]
+    CARD1 --> CB1[sh-card-body]
+
+    CH1 --> CT1[sh-card-title]
+    CT1 --> ICON1[sh-card-title-icon]
+
+    CB1 --> BUTTONS[Button Group]
+    CB1 --> INFO[Info Rows]
+
+    BUTTONS --> BTN1[sh-btn<br/>sh-btn-primary]
+    BUTTONS --> BTN2[sh-btn<br/>sh-btn-secondary]
+
+    style PAGE fill:#0a0a0f,color:#fafafa,stroke:#6366f1,stroke-width:3px
+    style HEADER fill:#12121a,color:#fafafa,stroke:#6366f1,stroke-width:2px
+    style CONTENT fill:#12121a,color:#fafafa,stroke:#6366f1,stroke-width:2px
+    style CARD1 fill:#12121a,color:#fafafa,stroke:#6366f1,stroke-width:2px
+    style CARD2 fill:#12121a,color:#fafafa,stroke:#22c55e,stroke-width:2px
+    style CARD3 fill:#12121a,color:#fafafa,stroke:#ef4444,stroke-width:2px
+    style TITLE fill:#6366f1,color:#fff
+    style BTN1 fill:#6366f1,color:#fff
+    style VALUE1 fill:#8b5cf6,color:#fff
+```
+
+**Component Categories:**
+1. **Layout Containers:** Page wrapper, header, content sections
+2. **Typography:** Titles with gradient effects, subtitles, labels
+3. **Data Display:** Stat badges with monospace values, cards with borders
+4. **Navigation:** Filter tabs, nav tabs (sticky)
+5. **Interactive:** Buttons with gradients and hover effects
+
+**Styling Rules:**
+- **Cards:** 3px top border (gradient on hover, or colored for status)
+- **Stat Badges:** Minimum 130px width, monospace font for values
+- **Buttons:** Gradient backgrounds, shadow on hover, smooth transitions
+- **Tabs:** Active state with gradient background and glow
+- **Grid Layouts:** Auto-fit with minimums (130px, 240px, or 300px)
+
+---
+
+#### 1. Page Header (Standard)
+
+**HTML Structure:**
+```javascript
+E('div', { 'class': 'sh-page-header' }, [
+    E('div', {}, [
+        E('h2', { 'class': 'sh-page-title' }, [
+            E('span', { 'class': 'sh-page-title-icon' }, '🎯'),
+            'Page Title'
+        ]),
+        E('p', { 'class': 'sh-page-subtitle' }, 'Description of the page')
+    ]),
+    E('div', { 'class': 'sh-stats-grid' }, [
+        // Stats badges here
+    ])
+])
+```
+
+**CSS Classes:**
+- `.sh-page-header` - Container with flex layout
+- `.sh-page-title` - Gradient text effect
+- `.sh-page-title-icon` - Icon (no gradient)
+- `.sh-page-subtitle` - Secondary text
+- `.sh-stats-grid` - Grid pour badges (130px min)
+
+#### 2. Stats Badges
+
+**RÈGLE:** Minimum 130px, police monospace pour valeurs
+
+```javascript
+E('div', { 'class': 'sh-stat-badge' }, [
+    E('div', { 'class': 'sh-stat-value' }, '92'),
+    E('div', { 'class': 'sh-stat-label' }, 'CPU %')
+])
+```
+
+**Grid Layout:**
+```css
+.sh-stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
+    gap: 12px;
+}
+```
+
+#### 3. Cards avec bordure colorée
+
+**OBLIGATOIRE:** Toutes les cards doivent avoir une bordure top de 3px
+
+```javascript
+E('div', { 'class': 'sh-card sh-card-success' }, [
+    E('div', { 'class': 'sh-card-header' }, [
+        E('h3', { 'class': 'sh-card-title' }, [
+            E('span', { 'class': 'sh-card-title-icon' }, '⚙️'),
+            'Card Title'
+        ])
+    ]),
+    E('div', { 'class': 'sh-card-body' }, [
+        // Content
+    ])
+])
+```
+
+**Variants de bordure:**
+- `.sh-card` - Bordure gradient (visible au hover)
+- `.sh-card-success` - Bordure verte permanente
+- `.sh-card-danger` - Bordure rouge permanente
+- `.sh-card-warning` - Bordure orange permanente
+
+#### 4. Buttons
+
+**Gradient buttons (preferred):**
+```javascript
+E('button', { 'class': 'sh-btn sh-btn-primary' }, 'Primary Action')
+E('button', { 'class': 'sh-btn sh-btn-success' }, 'Success Action')
+E('button', { 'class': 'sh-btn sh-btn-danger' }, 'Danger Action')
+E('button', { 'class': 'sh-btn sh-btn-secondary' }, 'Secondary Action')
+```
+
+**Tous les buttons doivent avoir:**
+- Shadow effect (déjà dans CSS)
+- Hover animation (translateY(-2px))
+- Transition smooth (0.3s cubic-bezier)
+
+#### 5. Filter Tabs
+
+```javascript
+E('div', { 'class': 'sh-filter-tabs' }, [
+    E('div', {
+        'class': 'sh-filter-tab active',
+        'data-filter': 'all'
+    }, [
+        E('span', { 'class': 'sh-tab-icon' }, '📋'),
+        E('span', { 'class': 'sh-tab-label' }, 'All')
+    ])
+])
+```
+
+**Active tab styling:**
+- Background: gradient indigo-violet
+- Color: white
+- Box-shadow avec glow
+
+### Grid Systems
+
+#### Stats Overview (Compact)
+```css
+grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
+gap: 16px;
+```
+
+#### Metric Cards (Medium)
+```css
+grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+gap: 20px;
+```
+
+#### Info Cards (Large)
+```css
+grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+gap: 20px;
+```
+
+### Gradient Effects
+
+#### Gradient Text (Titles)
+```css
+background: linear-gradient(135deg, var(--sh-primary), var(--sh-primary-end));
+-webkit-background-clip: text;
+-webkit-text-fill-color: transparent;
+background-clip: text;
+```
+
+**Utiliser:** `.sh-gradient-text` class ou `.sh-page-title`
+
+#### Gradient Backgrounds (Buttons, Badges)
+```css
+background: linear-gradient(135deg, var(--sh-primary), var(--sh-primary-end));
+```
+
+#### Gradient Borders (Top)
+```css
+/* 3px top border avec dégradé */
+.element::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: linear-gradient(90deg, var(--sh-primary), var(--sh-primary-end));
+}
+```
+
+### Animation Standards
+
+#### Hover Effects
+```css
+transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+transform: translateY(-3px);  /* Cards */
+transform: translateY(-2px);  /* Buttons, badges */
+```
+
+#### Shadow Progression
+```css
+/* Default */
+box-shadow: none;
+
+/* Hover - Subtle */
+box-shadow: 0 8px 20px var(--sh-shadow);
+
+/* Hover - Pronounced */
+box-shadow: 0 12px 28px var(--sh-hover-shadow);
+
+/* Button Hover */
+box-shadow: 0 8px 20px rgba(99, 102, 241, 0.5);
+```
+
+---
+
+## Architecture & Naming Conventions
+
+### System Architecture Overview
+
+The following diagram illustrates the complete data flow from browser JavaScript to system backend:
+
+```mermaid
+graph TB
+    subgraph "Browser"
+        UI[JavaScript View<br/>view/module/overview.js]
+        API[API Module<br/>module/api.js]
+    end
+
+    subgraph "LuCI Framework"
+        RPC[RPC Layer<br/>L.rpc.declare]
+        UHTTPD[uhttpd<br/>Web Server]
+    end
+
+    subgraph "Backend Services"
+        RPCD[RPCD Daemon]
+        SCRIPT[RPCD Script<br/>/usr/libexec/rpcd/luci.module-name]
+        UBUS[ubus Message Bus]
+    end
+
+    subgraph "System Layer"
+        UCI[UCI Configuration]
+        SYS[System Services<br/>init.d scripts]
+        FS[Filesystem<br/>proc, sys, etc]
+    end
+
+    UI -->|"API.getStatus()"| API
+    API -->|"rpc.declare({ object: 'luci.module' })"| RPC
+    RPC -->|"HTTP POST /ubus"| UHTTPD
+    UHTTPD -->|"call method"| RPCD
+    RPCD -->|"execute script"| SCRIPT
+    SCRIPT -->|"ubus call"| UBUS
+    UBUS -->|"read/write"| UCI
+    UBUS -->|"control"| SYS
+    SCRIPT -->|"read metrics"| FS
+
+    style UI fill:#6366f1,color:#fff,stroke:#4f46e5
+    style API fill:#8b5cf6,color:#fff,stroke:#7c3aed
+    style SCRIPT fill:#22c55e,color:#fff,stroke:#16a34a
+    style RPCD fill:#f59e0b,color:#fff,stroke:#d97706
+    style UCI fill:#ef4444,color:#fff,stroke:#dc2626
+```
+
+**Key Components:**
+1. **Browser Layer:** JavaScript views and API modules handle UI and data requests
+2. **LuCI Framework:** RPC layer translates JavaScript calls to ubus protocol
+3. **Backend Services:** RPCD executes shell scripts via ubus message bus
+4. **System Layer:** UCI configs, system services, and filesystem provide data
+
+**Critical Naming Rule:** The RPCD script name **MUST** match the `object` parameter in JavaScript's `rpc.declare()`.
+
+---
+
+### CRITICAL: RPCD Script Naming
+
+**RÈGLE ABSOLUE:** Le nom du fichier RPCD DOIT correspondre EXACTEMENT au nom de l'objet ubus dans JavaScript.
+
+#### ✅ CORRECT:
+
+**JavaScript:**
+```javascript
+var callStatus = rpc.declare({
+    object: 'luci.system-hub',  // ← Nom objet
+    method: 'getHealth'
+});
+```
+
+**Fichier RPCD:**
+```bash
+root/usr/libexec/rpcd/luci.system-hub  # ← EXACT MATCH
+```
+
+#### ❌ INCORRECT (Causes d'erreur -32000):
+
+```bash
+# Mauvais - manque le préfixe
+root/usr/libexec/rpcd/system-hub
+
+# Mauvais - underscore au lieu de tiret
+root/usr/libexec/rpcd/luci.system_hub
+
+# Mauvais - nom différent
+root/usr/libexec/rpcd/systemhub
+```
+
+### Menu Path Conventions
+
+**RÈGLE:** Les chemins dans menu.d/*.json doivent correspondre EXACTEMENT aux fichiers de vue.
+
+#### ✅ CORRECT:
+
+**Menu JSON:**
+```json
+{
+    "action": {
+        "type": "view",
+        "path": "system-hub/overview"
+    }
+}
+```
+
+**Fichier de vue:**
+```bash
+htdocs/luci-static/resources/view/system-hub/overview.js
+```
+
+#### ❌ INCORRECT (Causes 404):
+
+Menu: `"path": "system-hub/overview"` mais fichier: `view/systemhub/overview.js`
+
+### Prefixes Standards
+
+| Type | Prefix | Exemple |
+|------|--------|---------|
+| ubus objects | `luci.` | `luci.system-hub` |
+| CSS classes | `sh-` (System Hub) ou `sb-` (SecuBox) | `.sh-page-header` |
+| CSS variables | `--sh-` | `--sh-primary` |
+| JavaScript modules | Nom du module | `system-hub/api.js` |
+
+### File Structure Template
+
+```
+luci-app-<module-name>/
+├── Makefile
+├── README.md
+├── htdocs/luci-static/resources/
+│   ├── view/<module-name>/
+│   │   ├── overview.js         # Page principale
+│   │   ├── settings.js         # Configuration
+│   │   └── *.js                # Autres vues
+│   └── <module-name>/
+│       ├── api.js              # RPC client
+│       ├── theme.js            # Theme helpers (optionnel)
+│       ├── common.css          # Styles partagés
+│       └── *.css               # Styles spécifiques
+└── root/
+    ├── usr/
+    │   ├── libexec/rpcd/
+    │   │   └── luci.<module-name>    # ⚠️ MUST match ubus object
+    │   └── share/
+    │       ├── luci/menu.d/
+    │       │   └── luci-app-<module-name>.json
+    │       └── rpcd/acl.d/
+    │           └── luci-app-<module-name>.json
+    └── etc/config/<module-name> (optionnel)
+```
+
+---
+
+## RPCD & ubus Best Practices
+
+### RPCD Script Template (Shell)
+
+**Fichier:** `root/usr/libexec/rpcd/luci.<module-name>`
+
+```bash
+#!/bin/sh
+# RPCD backend for <module-name>
+# ubus object: luci.<module-name>
+
+case "$1" in
+    list)
+        # Liste des méthodes disponibles
+        echo '{
+            "getStatus": {},
+            "getHealth": {},
+            "getServices": {}
+        }'
+        ;;
+    call)
+        case "$2" in
+            getStatus)
+                # TOUJOURS retourner du JSON valide
+                printf '{"enabled": true, "version": "1.0.0"}\n'
+                ;;
+            getHealth)
+                # Lire les métriques système
+                cpu_usage=$(top -bn1 | grep "CPU:" | awk '{print $2}' | sed 's/%//')
+                mem_total=$(free | grep Mem | awk '{print $2}')
+                mem_used=$(free | grep Mem | awk '{print $3}')
+
+                printf '{
+                    "cpu": {"usage": %s},
+                    "memory": {"total_kb": %s, "used_kb": %s}
+                }\n' "$cpu_usage" "$mem_total" "$mem_used"
+                ;;
+            getServices)
+                # Exemple avec services
+                services='[]'
+                for service in /etc/init.d/*; do
+                    # Build JSON array
+                    :
+                done
+                echo "$services"
+                ;;
+            *)
+                echo '{"error": "Method not found"}'
+                exit 1
+                ;;
+        esac
+        ;;
+esac
+```
+
+### RPCD Script Validation
+
+**CHECKLIST OBLIGATOIRE:**
+
+1. ✅ Fichier exécutable: `chmod +x root/usr/libexec/rpcd/luci.<module-name>`
+2. ✅ Shebang présent: `#!/bin/sh`
+3. ✅ Structure case/esac correcte
+4. ✅ Méthode `list` retourne JSON avec toutes les méthodes
+5. ✅ Méthode `call` gère tous les cas
+6. ✅ Toujours retourner du JSON valide
+7. ✅ Pas de `echo` de debug (commentés en prod)
+8. ✅ Gestion d'erreur pour méthodes inconnues
+
+### Testing RPCD Scripts
+
+**Sur le routeur:**
+
+```bash
+# Test direct
+/usr/libexec/rpcd/luci.system-hub list
+
+# Via ubus
+ubus list luci.system-hub
+ubus call luci.system-hub getStatus
+
+# Restart RPCD après modification
+/etc/init.d/rpcd restart
+```
+
+### Common RPCD Errors
+
+#### Error: "Object not found" (-32000)
+
+**Cause:** Nom du fichier RPCD ne correspond pas à l'objet ubus
+
+**Solution:**
+```bash
+# Vérifier le nom dans JS
+grep -r "object:" htdocs/luci-static/resources/view/ --include="*.js"
+
+# Renommer le fichier RPCD pour correspondre
+mv root/usr/libexec/rpcd/wrong-name root/usr/libexec/rpcd/luci.correct-name
+```
+
+#### Error: "Method not found" (-32601)
+
+**Cause:** Méthode non déclarée dans `list` ou non implémentée dans `call`
+
+**Solution:**
+```bash
+# Vérifier que la méthode est dans les deux blocs
+grep "getStatus" root/usr/libexec/rpcd/luci.*
+```
+
+#### Error: Invalid JSON returned
+
+**Cause:** Output RPCD n'est pas du JSON valide
+
+**Solution:**
+```bash
+# Tester le JSON
+/usr/libexec/rpcd/luci.module-name call getStatus | jsonlint
+
+# Utiliser printf au lieu de echo pour le JSON
+printf '{"key": "%s"}\n' "$value"
+```
+
+---
+
+## ACL & Permissions
+
+### ACL File Template
+
+**Fichier:** `root/usr/share/rpcd/acl.d/luci-app-<module-name>.json`
+
+```json
+{
+    "luci-app-<module-name>": {
+        "description": "Grant access to <Module Name>",
+        "read": {
+            "ubus": {
+                "luci.<module-name>": [
+                    "getStatus",
+                    "getHealth",
+                    "getServices"
+                ]
+            },
+            "uci": [
+                "<module-name>"
+            ]
+        },
+        "write": {
+            "ubus": {
+                "luci.<module-name>": [
+                    "setConfig",
+                    "restartService"
+                ]
+            },
+            "uci": [
+                "<module-name>"
+            ]
+        }
+    }
+}
+```
+
+### ACL Best Practices
+
+1. **Séparation read/write:** Ne donnez que les permissions nécessaires
+2. **Liste explicite:** Listez toutes les méthodes ubus utilisées
+3. **UCI access:** Ajoutez les configs UCI dans `read` et `write`
+4. **Validation JSON:** Toujours valider avec `jsonlint`
+
+### Common ACL Errors
+
+#### Error: "Access denied"
+
+**Cause:** Méthode ubus pas dans ACL
+
+**Solution:**
+```json
+{
+    "read": {
+        "ubus": {
+            "luci.system-hub": [
+                "getHealth"  // ← Ajouter la méthode manquante
+            ]
+        }
+    }
+}
+```
+
+#### Error: "UCI config not accessible"
+
+**Cause:** Config UCI pas dans ACL
+
+**Solution:**
+```json
+{
+    "read": {
+        "uci": [
+            "system-hub"  // ← Ajouter le config
+        ]
+    }
+}
+```
+
+---
+
+## JavaScript Patterns
+
+### API Module Template
+
+**Fichier:** `htdocs/luci-static/resources/<module-name>/api.js`
+
+```javascript
+'use strict';
+'require rpc';
+'require uci';
+
+return L.Class.extend({
+    // Déclarer les appels RPC
+    callGetStatus: rpc.declare({
+        object: 'luci.<module-name>',
+        method: 'getStatus',
+        expect: { }
+    }),
+
+    callGetHealth: rpc.declare({
+        object: 'luci.<module-name>',
+        method: 'getHealth',
+        expect: { }
+    }),
+
+    // Méthodes wrapper avec gestion d'erreur
+    getStatus: function() {
+        return this.callGetStatus().catch(function(err) {
+            console.error('Failed to get status:', err);
+            return { enabled: false, error: err.message };
+        });
+    },
+
+    getHealth: function() {
+        return this.callGetHealth().catch(function(err) {
+            console.error('Failed to get health:', err);
+            return {
+                cpu: { usage: 0 },
+                memory: { usage: 0 },
+                error: err.message
+            };
+        });
+    },
+
+    // Utilitaires
+    formatBytes: function(bytes) {
+        if (bytes === 0) return '0 B';
+        var k = 1024;
+        var sizes = ['B', 'KB', 'MB', 'GB'];
+        var i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    }
+});
+```
+
+### View Template
+
+**Fichier:** `htdocs/luci-static/resources/view/<module-name>/overview.js`
+
+```javascript
+'use strict';
+'require view';
+'require ui';
+'require dom';
+'require poll';
+'require <module-name>/api as API';
+
+return view.extend({
+    // State
+    healthData: null,
+    sysInfo: null,
+
+    // Load data
+    load: function() {
+        return Promise.all([
+            API.getStatus(),
+            API.getHealth()
+        ]);
+    },
+
+    // Render UI
+    render: function(data) {
+        var self = this;
+        this.sysInfo = data[0] || {};
+        this.healthData = data[1] || {};
+
+        var container = E('div', { 'class': '<module>-dashboard' }, [
+            // Link CSS files
+            E('link', { 'rel': 'stylesheet', 'href': L.resource('<module>/common.css') }),
+            E('link', { 'rel': 'stylesheet', 'href': L.resource('<module>/overview.css') }),
+
+            // Header
+            this.renderHeader(),
+
+            // Content
+            this.renderContent()
+        ]);
+
+        // Setup auto-refresh
+        poll.add(L.bind(function() {
+            return Promise.all([
+                API.getStatus(),
+                API.getHealth()
+            ]).then(L.bind(function(refreshData) {
+                this.sysInfo = refreshData[0] || {};
+                this.healthData = refreshData[1] || {};
+                this.updateDashboard();
+            }, this));
+        }, this), 30); // Refresh every 30s
+
+        return container;
+    },
+
+    renderHeader: function() {
+        return E('div', { 'class': 'sh-page-header' }, [
+            // Header content
+        ]);
+    },
+
+    renderContent: function() {
+        return E('div', { 'class': 'sh-content' }, [
+            // Main content
+        ]);
+    },
+
+    updateDashboard: function() {
+        // Update existing DOM elements
+        var element = document.querySelector('.my-element');
+        if (element) {
+            dom.content(element, this.renderContent());
+        }
+    },
+
+    // Required stubs for LuCI
+    handleSaveApply: null,
+    handleSave: null,
+    handleReset: null
+});
+```
+
+### Event Handling Pattern
+
+```javascript
+// ✅ CORRECT: Bind events après render
+render: function(data) {
+    var container = E('div', {}, [
+        E('button', {
+            'id': 'my-button',
+            'class': 'sh-btn sh-btn-primary'
+        }, 'Click Me')
+    ]);
+
+    // Ajouter l'événement après le container est créé
+    container.addEventListener('click', function(ev) {
+        if (ev.target && ev.target.id === 'my-button') {
+            self.handleButtonClick();
+        }
+    });
+
+    return container;
+},
+
+handleButtonClick: function() {
+    ui.addNotification(null, E('p', 'Button clicked!'), 'info');
+}
+```
+
+### Common JavaScript Errors
+
+#### Error: "[object HTMLButtonElement]" affiché
+
+**Cause:** Array imbriqué quand E() attend un array simple
+
+```javascript
+// ❌ INCORRECT
+E('div', {}, [
+    this.renderButtons()  // renderButtons retourne déjà un array
+])
+
+// ✅ CORRECT
+E('div', {},
+    this.renderButtons()  // Pas de [ ] supplémentaire
+)
+```
+
+#### Error: "Cannot read property of undefined"
+
+**Cause:** Données API non disponibles
+
+```javascript
+// ❌ INCORRECT
+var cpuUsage = this.healthData.cpu.usage;
+
+// ✅ CORRECT (avec optional chaining)
+var cpuUsage = (this.healthData.cpu && this.healthData.cpu.usage) || 0;
+// ou
+var cpuUsage = this.healthData.cpu?.usage || 0; // ES2020
+```
+
+#### Error: "poll callback failed"
+
+**Cause:** Promise non retournée dans poll.add
+
+```javascript
+// ❌ INCORRECT
+poll.add(function() {
+    API.getHealth(); // Pas de return!
+}, 30);
+
+// ✅ CORRECT
+poll.add(function() {
+    return API.getHealth().then(function(data) {
+        // Update UI
+    });
+}, 30);
+```
+
+---
+
+## CSS/Styling Standards
+
+### File Organization
+
+```
+<module-name>/
+├── common.css       # Shared components (headers, buttons, cards, tabs)
+├── overview.css     # Overview page specific
+├── services.css     # Services page specific
+└── *.css            # Other page-specific styles
+```
+
+### CSS File Template
+
+```css
+/**
+ * Module Name - Page/Component Styles
+ * Description of what this file styles
+ * Version: X.Y.Z
+ */
+
+/* === Import shared styles (if needed) === */
+/* Not required if loaded in HTML */
+
+/* === Page-specific variables (if needed) === */
+:root {
+    --page-specific-var: value;
+}
+
+/* === Layout === */
+.module-page-container {
+    /* Layout styles */
+}
+
+/* === Components === */
+.module-component {
+    /* Component styles */
+}
+
+/* === Responsive === */
+@media (max-width: 768px) {
+    /* Mobile styles */
+}
+
+/* === Dark Mode Overrides === */
+[data-theme="dark"] .module-component {
+    /* Dark mode specific */
+}
+```
+
+### CSS Best Practices
+
+#### 1. TOUJOURS utiliser les variables CSS
+
+```css
+/* ❌ INCORRECT */
+.my-card {
+    background: #12121a;
+    color: #fafafa;
+}
+
+/* ✅ CORRECT */
+.my-card {
+    background: var(--sh-bg-card);
+    color: var(--sh-text-primary);
+}
+```
+
+#### 2. Prefix classes par module
+
+```css
+/* System Hub */
+.sh-page-header { }
+.sh-card { }
+.sh-btn { }
+
+/* SecuBox */
+.sb-module-grid { }
+.sb-dashboard { }
+
+/* Module spécifique */
+.netdata-chart { }
+.crowdsec-alert { }
+```
+
+#### 3. Transitions cohérentes
+
+```css
+/* Standard transition */
+transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+/* Quick transition (hover states) */
+transition: all 0.2s ease;
+
+/* Smooth transition (large movements) */
+transition: all 0.5s ease;
+```
+
+#### 4. Responsive breakpoints
+
+```css
+/* Mobile */
+@media (max-width: 768px) {
+    .sh-stats-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+/* Tablet */
+@media (min-width: 769px) and (max-width: 1024px) {
+    /* Tablet specific */
+}
+
+/* Desktop */
+@media (min-width: 1025px) {
+    /* Desktop specific */
+}
+```
+
+#### 5. Dark mode OBLIGATOIRE
+
+**Toujours fournir des styles dark mode:**
+
+```css
+/* Light mode (default) */
+.my-component {
+    background: var(--sh-bg-card);
+    border: 1px solid var(--sh-border);
+}
+
+/* Dark mode override */
+[data-theme="dark"] .my-component {
+    background: var(--sh-bg-card);
+    border-color: var(--sh-border);
+}
+```
+
+### Z-index Scale
+
+**Respecter cette échelle:**
+
+```css
+--z-base: 0;
+--z-dropdown: 100;
+--z-sticky: 200;
+--z-fixed: 300;
+--z-modal-backdrop: 400;
+--z-modal: 500;
+--z-popover: 600;
+--z-tooltip: 700;
+```
+
+---
+
+## Common Errors & Solutions
+
+### 1. RPCD Object Not Found (-32000)
+
+**Erreur complète:**
+```
+RPC call to luci.system-hub/getHealth failed with error -32000: Object not found
+```
+
+**Diagnostic:**
+```bash
+# 1. Vérifier que le fichier RPCD existe
+ls -la /usr/libexec/rpcd/luci.system-hub
+
+# 2. Vérifier qu'il est exécutable
+chmod +x /usr/libexec/rpcd/luci.system-hub
+
+# 3. Lister les objets ubus
+ubus list | grep system-hub
+
+# 4. Si absent, redémarrer RPCD
+/etc/init.d/rpcd restart
+ubus list | grep system-hub
+```
+
+**Solutions:**
+1. Renommer le fichier RPCD pour correspondre exactement
+2. Vérifier permissions (755 ou rwxr-xr-x)
+3. Redémarrer rpcd
+
+### 2. View Not Found (404)
+
+**Erreur:**
+```
+HTTP error 404 while loading class file '/luci-static/resources/view/system-hub/overview.js'
+```
+
+**Diagnostic:**
+```bash
+# 1. Vérifier que le fichier existe
+ls -la /www/luci-static/resources/view/system-hub/overview.js
+
+# 2. Vérifier le chemin dans menu.d
+grep "path" /usr/share/luci/menu.d/luci-app-system-hub.json
+```
+
+**Solutions:**
+1. Vérifier que le path dans menu JSON correspond au fichier
+2. Vérifier permissions du fichier (644)
+3. Nettoyer cache: `rm -f /tmp/luci-indexcache /tmp/luci-modulecache/*`
+
+### 3. CSS Not Loading (403 Forbidden)
+
+**Erreur:**
+```
+GET /luci-static/resources/system-hub/common.css 403 Forbidden
+```
+
+**Diagnostic:**
+```bash
+# Vérifier permissions
+ls -la /www/luci-static/resources/system-hub/common.css
+```
+
+**Solution:**
+```bash
+# Corriger permissions
+chmod 644 /www/luci-static/resources/system-hub/*.css
+```
+
+### 4. Invalid JSON from RPCD
+
+**Erreur dans browser console:**
+```
+SyntaxError: Unexpected token in JSON at position X
+```
+
+**Diagnostic:**
+```bash
+# Tester le JSON directement
+/usr/libexec/rpcd/luci.system-hub call getHealth | jsonlint
+
+# Ou avec jq
+/usr/libexec/rpcd/luci.system-hub call getHealth | jq .
+```
+
+**Solutions courantes:**
+```bash
+# ❌ INCORRECT - Quote simple non échappée
+echo '{"error": "can't process"}'
+
+# ✅ CORRECT - Utiliser printf et doubles quotes
+printf '{"error": "cannot process"}\n'
+
+# ❌ INCORRECT - Variable non quotée
+echo "{\"value\": $var}"
+
+# ✅ CORRECT - Variable quotée
+printf '{"value": "%s"}\n' "$var"
+```
+
+### 5. Browser Cache Issues
+
+**Symptômes:**
+- Changements CSS/JS non visibles
+- Anciennes données affichées
+- Code mis à jour mais interface identique
+
+**Solutions:**
+```bash
+# 1. Côté serveur - nettoyer cache LuCI
+ssh root@router "rm -f /tmp/luci-indexcache /tmp/luci-modulecache/* && /etc/init.d/uhttpd restart"
+
+# 2. Côté client - hard refresh
+Ctrl + Shift + R (Chrome/Firefox)
+Ctrl + F5 (Windows)
+Cmd + Shift + R (Mac)
+
+# 3. Mode privé/incognito pour test
+Ctrl + Shift + N (Chrome)
+Ctrl + Shift + P (Firefox)
+```
+
+### 6. ACL Access Denied
+
+**Erreur:**
+```
+Access to path '/admin/secubox/system/system-hub' denied
+```
+
+**Diagnostic:**
+```bash
+# Vérifier ACL
+cat /usr/share/rpcd/acl.d/luci-app-system-hub.json | jq .
+
+# Vérifier que méthodes ubus sont listées
+grep "getHealth" /usr/share/rpcd/acl.d/luci-app-system-hub.json
+```
+
+**Solution:**
+Ajouter la méthode manquante dans ACL et redémarrer rpcd.
+
+---
+
+## Validation Checklist
+
+### Pre-Commit Checklist
+
+Avant chaque commit, vérifier:
+
+- [ ] **RPCD Script:**
+  - [ ] Nom fichier correspond à objet ubus
+  - [ ] Exécutable (chmod +x)
+  - [ ] Structure list/call correcte
+  - [ ] Retourne JSON valide
+  - [ ] Toutes méthodes implémentées
+
+- [ ] **Menu & ACL:**
+  - [ ] Path menu correspond au fichier vue
+  - [ ] ACL liste toutes les méthodes ubus
+  - [ ] JSON valide (jsonlint)
+
+- [ ] **JavaScript:**
+  - [ ] 'use strict' en première ligne
+  - [ ] Imports requis présents
+  - [ ] Pas de console.log en prod
+  - [ ] Gestion d'erreur sur API calls
+  - [ ] Event handlers bindés correctement
+
+- [ ] **CSS:**
+  - [ ] Variables CSS utilisées (pas de hardcode)
+  - [ ] Classes prefixées (sh-, sb-, module-)
+  - [ ] Dark mode supporté
+  - [ ] Responsive (max-width: 768px)
+  - [ ] Transitions cohérentes
+
+- [ ] **Makefile:**
+  - [ ] PKG_VERSION incrémenté
+  - [ ] LUCI_DEPENDS correct
+  - [ ] Include path correct (../../luci.mk)
+
+### Pre-Deploy Checklist
+
+Avant déploiement sur routeur:
+
+- [ ] **Validation scripts:**
+  ```bash
+  ./secubox-tools/validate-modules.sh
+  ```
+
+- [ ] **Test RPCD local:**
+  ```bash
+  /usr/libexec/rpcd/luci.module-name list
+  /usr/libexec/rpcd/luci.module-name call getStatus
+  ```
+
+- [ ] **Test JSON:**
+  ```bash
+  find . -name "*.json" -exec jsonlint {} \;
+  ```
+
+- [ ] **Shellcheck:**
+  ```bash
+  shellcheck root/usr/libexec/rpcd/*
+  ```
+
+- [ ] **Permissions:**
+  ```bash
+  # RPCD scripts
+  chmod 755 root/usr/libexec/rpcd/*
+
+  # CSS/JS files
+  chmod 644 htdocs/luci-static/resources/**/*
+  ```
+
+### Post-Deploy Checklist
+
+Après déploiement:
+
+- [ ] **Services:**
+  ```bash
+  /etc/init.d/rpcd status
+  /etc/init.d/uhttpd status
+  ```
+
+- [ ] **ubus objects:**
+  ```bash
+  ubus list | grep luci.module-name
+  ```
+
+- [ ] **Fichiers présents:**
+  ```bash
+  ls -la /www/luci-static/resources/view/module-name/
+  ls -la /www/luci-static/resources/module-name/
+  ```
+
+- [ ] **Permissions correctes:**
+  ```bash
+  ls -la /usr/libexec/rpcd/luci.module-name
+  ls -la /www/luci-static/resources/module-name/*.css
+  ```
+
+- [ ] **Test navigateur:**
+  - [ ] Ouvrir en mode privé
+  - [ ] Vérifier console (F12) - pas d'erreurs
+  - [ ] Vérifier Network tab - tous les fichiers chargent (200)
+  - [ ] Tester dark/light mode
+  - [ ] Tester responsive (mobile view)
+
+---
+
+## Deployment Procedures
+
+### Deployment Workflow
+
+The following flowchart illustrates the complete deployment process with validation checkpoints:
+
+```mermaid
+flowchart TD
+    START([Start Deployment]) --> LOCAL_VAL{Local Validation<br/>Passed?}
+    LOCAL_VAL -->|No| FIX_LOCAL[Fix Issues Locally]
+    FIX_LOCAL --> LOCAL_VAL
+    LOCAL_VAL -->|Yes| CHECK_DISK{Disk Space<br/>< 90%?}
+
+    CHECK_DISK -->|No| CLEAN_DISK[Clean Temp Files<br/>& Old Backups]
+    CLEAN_DISK --> CHECK_DISK
+    CHECK_DISK -->|Yes| FIX_PERM_LOCAL[Fix Permissions<br/>Local Source]
+
+    FIX_PERM_LOCAL --> COPY[Copy Files to Router<br/>scp JS/CSS/RPCD]
+    COPY --> FIX_PERM_REMOTE[Fix Permissions<br/>Remote Files<br/>755 RPCD / 644 CSS-JS]
+    FIX_PERM_REMOTE --> CLEAR[Clear LuCI Cache<br/>/tmp/luci-*]
+    CLEAR --> RESTART[Restart Services<br/>rpcd + uhttpd]
+
+    RESTART --> V1{ubus Object<br/>Available?}
+    V1 -->|No| DEBUG1[Debug RPCD Script<br/>Check naming & permissions]
+    DEBUG1 --> FIX_PERM_REMOTE
+
+    V1 -->|Yes| V2{Files<br/>Accessible?}
+    V2 -->|403 Error| DEBUG2[Fix File Permissions<br/>chmod 644]
+    DEBUG2 --> FIX_PERM_REMOTE
+
+    V2 -->|Yes| V3{Menu Path<br/>Matches View?}
+    V3 -->|404 Error| DEBUG3[Fix Menu JSON Path]
+    DEBUG3 --> COPY
+
+    V3 -->|Yes| V4{UI Loads<br/>Correctly?}
+    V4 -->|Errors| DEBUG4[Check Browser Console<br/>Fix JavaScript Errors]
+    DEBUG4 --> COPY
+
+    V4 -->|Yes| TEST[Browser Testing<br/>Private Mode<br/>Dark/Light Mode<br/>Responsive]
+    TEST --> SUCCESS([✅ Deployment Success])
+
+    style START fill:#6366f1,color:#fff,stroke:#4f46e5
+    style SUCCESS fill:#22c55e,color:#fff,stroke:#16a34a
+    style DEBUG1 fill:#ef4444,color:#fff,stroke:#dc2626
+    style DEBUG2 fill:#ef4444,color:#fff,stroke:#dc2626
+    style DEBUG3 fill:#ef4444,color:#fff,stroke:#dc2626
+    style DEBUG4 fill:#ef4444,color:#fff,stroke:#dc2626
+    style CHECK_DISK fill:#f59e0b,color:#fff,stroke:#d97706
+    style LOCAL_VAL fill:#8b5cf6,color:#fff,stroke:#7c3aed
+```
+
+**Deployment Stages:**
+1. **Local Validation:** Run `validate-modules.sh` and `fix-permissions.sh --local`
+2. **Pre-Flight Checks:** Disk space and permission verification
+3. **File Transfer:** Copy JavaScript, CSS, and RPCD scripts
+4. **Remote Setup:** Fix permissions and clear caches
+5. **Service Restart:** Reload rpcd and uhttpd daemons
+6. **Validation:** Multi-stage verification (ubus, files, menu, UI)
+7. **Testing:** Browser testing in private mode
+
+**Common Error Recovery Paths:**
+- **Object not found (-32000):** Check RPCD script naming and permissions
+- **403 Forbidden:** Fix file permissions to 644 for CSS/JS
+- **404 Not Found:** Verify menu path matches view file location
+- **JavaScript errors:** Check browser console and fix code issues
+
+---
+
+### ⚠️ Pre-Deployment Checks (CRITICAL)
+
+**TOUJOURS exécuter ces vérifications AVANT tout déploiement:**
+
+#### 1. Vérification de l'Espace Disque
+
+```bash
+# Sur le routeur cible
+ssh root@192.168.8.191 "df -h | grep overlay"
+
+# Vérifier que l'utilisation est < 90%
+# Exemple OK:
+# /dev/loop0    98.8M    45.2M    53.6M   46% /overlay
+
+# Exemple CRITIQUE (STOP deployment):
+# /dev/loop0    98.8M    98.8M       0  100% /overlay  ← PLEIN!
+```
+
+**Si l'overlay est plein (≥95%):**
+```bash
+# Libérer de l'espace avant déploiement
+ssh root@192.168.8.191 << 'EOF'
+# Supprimer fichiers temporaires
+rm -rf /tmp/*.ipk /tmp/luci-* 2>/dev/null
+
+# Supprimer anciens backups (>7 jours)
+find /root -name '*.backup-*' -type f -mtime +7 -delete 2>/dev/null
+
+# Vérifier packages inutilisés
+opkg list-installed | grep -E 'netdata|unused'
+
+# Après nettoyage, vérifier l'espace libéré
+df -h | grep overlay
+EOF
+```
+
+**Tailles typiques à surveiller:**
+- Netdata web UI: ~22MB (considérer suppression si non utilisé)
+- Modules LuCI: ~1-2MB chacun
+- Fichiers CSS/JS: ~10-50KB chacun
+
+#### 2. Vérification des Permissions (Critique pour Éviter Erreurs 403)
+
+**Permissions OBLIGATOIRES:**
+
+| Type | Permission | Octal | Raison |
+|------|-----------|-------|--------|
+| **RPCD scripts** | `rwxr-xr-x` | `755` | Exécutable par system |
+| **CSS files** | `rw-r--r--` | `644` | Lecture web server |
+| **JS files** | `rw-r--r--` | `644` | Lecture web server |
+| **JSON files** | `rw-r--r--` | `644` | Lecture rpcd |
+
+**Erreur commune:** Fichiers créés avec `600` (rw-------) au lieu de `644`
+
+**Symptôme:** HTTP 403 Forbidden lors du chargement de fichiers JS/CSS
+
+**Exemple d'erreur:**
+```
+NetworkError: HTTP error 403 while loading class file
+"/luci-static/resources/view/netdata-dashboard/dashboard.js"
+```
+
+**Diagnostic rapide:**
+```bash
+# Vérifier permissions des fichiers déployés
+ssh root@192.168.8.191 "ls -la /www/luci-static/resources/view/MODULE_NAME/"
+
+# Chercher fichiers avec permissions incorrectes (600)
+ssh root@192.168.8.191 "find /www/luci-static/resources/view/ -type f -name '*.js' -perm 600"
+
+# MAUVAIS (cause 403):
+# -rw-------  1 root root  9763 dashboard.js  ← 600 = pas lisible par web!
+
+# BON:
+# -rw-r--r--  1 root root  9763 dashboard.js  ← 644 = OK
+```
+
+**Correction immédiate:**
+```bash
+# Corriger TOUS les fichiers CSS/JS
+ssh root@192.168.8.191 << 'EOF'
+find /www/luci-static/resources/ -name '*.css' -exec chmod 644 {} \;
+find /www/luci-static/resources/ -name '*.js' -exec chmod 644 {} \;
+find /usr/libexec/rpcd/ -name 'luci.*' -exec chmod 755 {} \;
+EOF
+```
+
+**⚡ Correction Automatique (Recommandé):**
+
+Utiliser le script automatique qui vérifie et corrige toutes les permissions:
+
+```bash
+# Corriger permissions locales (source code)
+./secubox-tools/fix-permissions.sh --local
+
+# Corriger permissions sur routeur
+./secubox-tools/fix-permissions.sh --remote
+
+# Corriger les deux (local + remote)
+./secubox-tools/fix-permissions.sh
+```
+
+Le script `fix-permissions.sh` effectue automatiquement:
+- ✅ Fixe tous les RPCD scripts à 755
+- ✅ Fixe tous les CSS à 644
+- ✅ Fixe tous les JS à 644
+- ✅ Vérifie qu'aucun fichier 600 ne reste
+- ✅ Clear cache et restart services (remote mode)
+- ✅ Affiche un rapport complet des changements
+
+**🔍 Validation Automatique des Permissions:**
+
+Le script `validate-modules.sh` inclut maintenant un Check 7 qui vérifie automatiquement les permissions:
+
+```bash
+./secubox-tools/validate-modules.sh
+
+# Check 7 validera:
+# ✓ Tous les RPCD sont 755
+# ✓ Tous les CSS sont 644
+# ✓ Tous les JS sont 644
+# ❌ Affichera erreurs si permissions incorrectes
+```
+
+**Workflow recommandé:**
+1. Développer/modifier code
+2. `./secubox-tools/fix-permissions.sh --local` (avant commit)
+3. `./secubox-tools/validate-modules.sh` (vérifier tout)
+4. Commit & push
+5. Deploy sur routeur
+6. `./secubox-tools/fix-permissions.sh --remote` (après deploy)
+
+#### 3. Post-Deployment Verification
+
+**Checklist après déploiement:**
+
+```bash
+#!/bin/bash
+ROUTER="root@192.168.8.191"
+MODULE="module-name"
+
+echo "🔍 Post-Deployment Verification"
+echo ""
+
+# 1. Vérifier espace disque
+echo "1. Espace disque restant:"
+ssh "$ROUTER" "df -h | grep overlay | awk '{print \$5}'" || echo "❌ FAIL"
+
+# 2. Vérifier permissions CSS/JS
+echo "2. Permissions CSS/JS:"
+ssh "$ROUTER" "find /www/luci-static/resources/$MODULE -type f \( -name '*.css' -o -name '*.js' \) ! -perm 644" | \
+    if [ -z "$(cat)" ]; then echo "✅ OK"; else echo "❌ FAIL - Permissions incorrectes"; fi
+
+# 3. Vérifier permissions RPCD
+echo "3. Permissions RPCD:"
+ssh "$ROUTER" "ls -l /usr/libexec/rpcd/luci.$MODULE | grep -q rwxr-xr-x" && echo "✅ OK" || echo "❌ FAIL"
+
+# 4. Vérifier ubus object
+echo "4. ubus object disponible:"
+ssh "$ROUTER" "ubus list | grep -q luci.$MODULE" && echo "✅ OK" || echo "❌ FAIL"
+
+# 5. Vérifier fichiers accessibles (HTTP)
+echo "5. Fichiers web accessibles:"
+ssh "$ROUTER" "test -r /www/luci-static/resources/$MODULE/common.css" && echo "✅ OK" || echo "⚠️  common.css non trouvé"
+
+# 6. Vérifier cache cleared
+echo "6. Cache LuCI cleared:"
+ssh "$ROUTER" "test ! -f /tmp/luci-indexcache" && echo "✅ OK" || echo "⚠️  Cache encore présent"
+
+echo ""
+echo "✅ Vérification terminée"
+```
+
+#### 4. Common Deployment Errors
+
+| Erreur | Cause | Solution Rapide |
+|--------|-------|----------------|
+| **HTTP 403 Forbidden** | Permissions 600 au lieu de 644 | `chmod 644 *.js *.css` |
+| **No space left on device** | Overlay plein | Nettoyer /tmp, supprimer anciens backups |
+| **Object not found -32000** | RPCD pas exécutable ou mal nommé | `chmod 755 rpcd/luci.*` + vérifier nom |
+| **Module not appearing** | Cache LuCI pas cleared | `rm /tmp/luci-*` + restart services |
+| **Changes not visible** | Cache navigateur | Mode privé + Ctrl+Shift+R |
+
+#### 5. Emergency Disk Space Recovery
+
+**Si le déploiement échoue avec "No space left on device":**
+
+```bash
+#!/bin/bash
+ROUTER="root@192.168.8.191"
+
+echo "🚨 Emergency Disk Space Recovery"
+echo ""
+
+# 1. Analyser l'utilisation
+echo "Top 10 consumers:"
+ssh "$ROUTER" "du -k /overlay/upper 2>/dev/null | sort -rn | head -10"
+
+# 2. Nettoyer temporaires
+echo ""
+echo "Cleaning temp files..."
+ssh "$ROUTER" "rm -rf /tmp/*.ipk /tmp/luci-* /root/*.ipk 2>/dev/null"
+
+# 3. Supprimer anciens backups
+echo "Removing old backups (>7 days)..."
+ssh "$ROUTER" "find /root -name '*.backup-*' -mtime +7 -delete 2>/dev/null"
+
+# 4. Option: Supprimer Netdata Web UI (libère ~22MB)
+echo ""
+echo "⚠️  Option: Remove Netdata Web UI (saves ~22MB)?"
+read -p "Continue? (y/N) " -n 1 -r
+if [[ $REPLY =~ ^[Yy]$ ]]; then
+    ssh "$ROUTER" "opkg remove netdata-web 2>/dev/null || rm -rf /usr/share/netdata/web/*"
+fi
+
+# 5. Vérifier espace libéré
+echo ""
+echo "Space after cleanup:"
+ssh "$ROUTER" "df -h | grep overlay"
+```
+
+### Standard Deployment Script Template
+
+```bash
+#!/bin/bash
+# Deploy <Module Name>
+
+ROUTER="root@192.168.8.191"
+MODULE="<module-name>"
+LOCAL_DIR="/path/to/luci-app-$MODULE/htdocs/luci-static/resources"
+REMOTE_DIR="/www/luci-static/resources"
+
+echo "📦 Déploiement $MODULE"
+echo ""
+
+# 1. Deploy JS files
+echo "1. Copie des fichiers JS..."
+scp "$LOCAL_DIR/view/$MODULE/"*.js "$ROUTER:$REMOTE_DIR/view/$MODULE/"
+scp "$LOCAL_DIR/$MODULE/api.js" "$ROUTER:$REMOTE_DIR/$MODULE/"
+
+# 2. Deploy CSS files
+echo "2. Copie des fichiers CSS..."
+scp "$LOCAL_DIR/$MODULE/"*.css "$ROUTER:$REMOTE_DIR/$MODULE/"
+
+# 3. Deploy RPCD backend
+echo "3. Copie du backend RPCD..."
+scp "root/usr/libexec/rpcd/luci.$MODULE" "$ROUTER:/usr/libexec/rpcd/"
+
+# 4. Fix permissions
+echo "4. Correction des permissions..."
+ssh "$ROUTER" "chmod 755 /usr/libexec/rpcd/luci.$MODULE"
+ssh "$ROUTER" "chmod 644 $REMOTE_DIR/$MODULE/*.css"
+ssh "$ROUTER" "chmod 644 $REMOTE_DIR/view/$MODULE/*.js"
+
+# 5. Clear cache
+echo "5. Nettoyage du cache..."
+ssh "$ROUTER" "rm -f /tmp/luci-indexcache /tmp/luci-modulecache/* 2>/dev/null"
+
+# 6. Restart services
+echo "6. Redémarrage des services..."
+ssh "$ROUTER" "/etc/init.d/rpcd restart"
+ssh "$ROUTER" "/etc/init.d/uhttpd restart"
+
+# 7. Verify
+echo ""
+echo "7. Vérification..."
+ssh "$ROUTER" "ubus list | grep luci.$MODULE"
+
+echo ""
+echo "✅ Déploiement terminé!"
+echo ""
+echo "🌐 Testez (mode privé):"
+echo "   https://192.168.8.191/cgi-bin/luci/admin/secubox/path/to/$MODULE"
+```
+
+### Rollback Procedure
+
+En cas de problème:
+
+```bash
+#!/bin/bash
+# Rollback to previous version
+
+ROUTER="root@192.168.8.191"
+BACKUP_DIR="/root/luci-backups/$(date +%Y%m%d)"
+
+# 1. Créer backup avant deploy
+ssh "$ROUTER" "mkdir -p $BACKUP_DIR"
+ssh "$ROUTER" "cp -r /www/luci-static/resources/module-name $BACKUP_DIR/"
+ssh "$ROUTER" "cp /usr/libexec/rpcd/luci.module-name $BACKUP_DIR/"
+
+# 2. En cas de problème, restore
+ssh "$ROUTER" "cp -r $BACKUP_DIR/module-name /www/luci-static/resources/"
+ssh "$ROUTER" "cp $BACKUP_DIR/luci.module-name /usr/libexec/rpcd/"
+ssh "$ROUTER" "/etc/init.d/rpcd restart && /etc/init.d/uhttpd restart"
+```
+
+### Version Control
+
+**Toujours incrémenter les versions:**
+
+```makefile
+# Makefile
+PKG_VERSION:=0.3.0
+PKG_RELEASE:=1
+```
+
+```css
+/* CSS files */
+/**
+ * Module - Styles
+ * Version: 0.3.0
+ */
+```
+
+```javascript
+// JavaScript
+// Version: 0.3.0
+```
+
+**Semantic Versioning:**
+- MAJOR.MINOR.PATCH (1.2.3)
+- MAJOR: Breaking changes
+- MINOR: New features (backward compatible)
+- PATCH: Bug fixes
+
+---
+
+## Quick Reference
+
+### Essential Commands
+
+```bash
+# Validation
+./secubox-tools/validate-modules.sh
+
+# Build (local)
+./secubox-tools/local-build.sh build luci-app-module-name
+
+# Deploy files
+scp file.js root@router:/www/luci-static/resources/
+
+# Fix permissions
+ssh root@router "chmod 644 /www/luci-static/resources/**/*.css"
+ssh root@router "chmod 755 /usr/libexec/rpcd/luci.*"
+
+# Clear cache
+ssh root@router "rm -f /tmp/luci-indexcache /tmp/luci-modulecache/*"
+
+# Restart services
+ssh root@router "/etc/init.d/rpcd restart && /etc/init.d/uhttpd restart"
+
+# Test ubus
+ssh root@router "ubus list | grep luci"
+ssh root@router "ubus call luci.module-name getStatus"
+
+# Validate JSON
+jsonlint file.json
+jq . file.json
+```
+
+### CSS Classes Quick Reference
+
+```css
+/* Layout */
+.sh-page-header          /* Page header container */
+.sh-page-title           /* Page title (gradient text) */
+.sh-page-subtitle        /* Page subtitle */
+
+/* Stats */
+.sh-stats-grid           /* Grid for stat badges (130px min) */
+.sh-stat-badge           /* Stat badge container */
+.sh-stat-value           /* Stat value (monospace) */
+.sh-stat-label           /* Stat label (uppercase) */
+
+/* Cards */
+.sh-card                 /* Card container (with gradient border on hover) */
+.sh-card-success         /* Card with green border */
+.sh-card-danger          /* Card with red border */
+.sh-card-warning         /* Card with orange border */
+.sh-card-header          /* Card header */
+.sh-card-title           /* Card title */
+.sh-card-body            /* Card content */
+
+/* Buttons */
+.sh-btn                  /* Base button */
+.sh-btn-primary          /* Primary button (gradient) */
+.sh-btn-success          /* Success button (green) */
+.sh-btn-danger           /* Danger button (red) */
+.sh-btn-secondary        /* Secondary button (outline) */
+
+/* Tabs */
+.sh-filter-tabs          /* Filter tabs container */
+.sh-filter-tab           /* Filter tab */
+.sh-filter-tab.active    /* Active filter tab (gradient) */
+.sh-nav-tabs             /* Navigation tabs (sticky) */
+.sh-nav-tab              /* Navigation tab */
+.sh-nav-tab.active       /* Active nav tab (underline) */
+
+/* Utilities */
+.sh-gradient-text        /* Gradient text effect */
+.sh-id-display           /* Monospace ID display */
+.sh-empty-state          /* Empty state placeholder */
+```
+
+### Color Variables Quick Reference
+
+```css
+/* Text */
+var(--sh-text-primary)      /* Main text */
+var(--sh-text-secondary)    /* Secondary text */
+
+/* Backgrounds */
+var(--sh-bg-primary)        /* Main background */
+var(--sh-bg-secondary)      /* Secondary background */
+var(--sh-bg-tertiary)       /* Tertiary background */
+var(--sh-bg-card)           /* Card background */
+
+/* Borders */
+var(--sh-border)            /* Border color */
+
+/* Colors */
+var(--sh-primary)           /* Indigo #6366f1 */
+var(--sh-primary-end)       /* Violet #8b5cf6 */
+var(--sh-success)           /* Green #22c55e */
+var(--sh-danger)            /* Red #ef4444 */
+var(--sh-warning)           /* Orange #f59e0b */
+
+/* Effects */
+var(--sh-shadow)            /* Box shadow */
+var(--sh-hover-shadow)      /* Hover shadow */
+var(--sh-hover-bg)          /* Hover background */
+```
+
+---
+
+## Conclusion
+
+Ce guide doit être consulté **AVANT** de:
+1. Créer un nouveau module
+2. Modifier des styles existants
+3. Ajouter des méthodes RPCD
+4. Déployer sur un routeur
+5. Débugger des erreurs
+
+**En cas de doute, TOUJOURS:**
+1. Consulter ce guide
+2. Exécuter validate-modules.sh
+3. Tester en mode privé
+4. Vérifier la console browser (F12)
+
+**Ressources supplémentaires:**
+- CLAUDE.md - Architecture et build
+- secubox-tools/validate-modules.sh - Validation automatique
+- Templates/ - Templates de code
+
+---
+
+**Dernière mise à jour:** 2025-12-26
+**Maintenu par:** CyberMind Studio
+**Version du guide:** 1.0.0
diff --git a/docs/documentation-index.md b/docs/documentation-index.md
new file mode 100644
index 00000000..2a806684
--- /dev/null
+++ b/docs/documentation-index.md
@@ -0,0 +1,402 @@
+# SecuBox Documentation Index
+
+**Version:** 1.0.0  
+**Last Updated:** 2025-12-28  
+**Status:** Active  
+**Complete Documentation for SecuBox OpenWrt Project**
+
+---
+
+## 📖 Documentation Overview
+
+This index provides quick access to all SecuBox documentation. Choose the document that matches your needs:
+
+---
+
+## 📅 Version & Status Policy
+
+Every Markdown document in SecuBox must begin with metadata so contributors instantly see freshness:
+
+- Include `Version`, `Last Updated` (YYYY-MM-DD), and `Status` (Active | Draft | Archived).
+- New or regenerated docs start at `Version 1.0.0`; bump minor/patch numbers for incremental updates, major for structural rewrites.
+- When editing any doc, update the `Last Updated` date and keep statuses in sync with the archive plan outlined in `TODO-ANALYSE.md`.
+
+Follow this template when creating or revising documentation:
+
+```
+# Title
+
+**Version:** 1.0.0
+**Last Updated:** 2025-12-28
+**Status:** Active
+```
+
+---
+
+## 🚀 Getting Started
+
+### For New Contributors
+1. Start with **[QUICK-START.md](quick-start.md)** - Essential rules and commands
+2. Read **[DEVELOPMENT-GUIDELINES.md](development-guidelines.md)** - Complete development guide
+3. Review **[CLAUDE.md](claude.md)** - Build system and architecture
+
+### For AI-Assisted Development
+1. Use **[MODULE-IMPLEMENTATION-GUIDE.md](module-implementation-guide.md)** - Step-by-step workflow
+2. Copy prompts from **[FEATURE-REGENERATION-PROMPTS.md](feature-regeneration-prompts.md)**
+3. Reference **[CODE-TEMPLATES.md](code-templates.md)** for implementation patterns
+
+### For Existing Module Modification
+1. Check **[QUICK-START.md](quick-start.md)** - Quick fixes and common commands
+2. Run validation: `./secubox-tools/validate-modules.sh`
+3. Review **[DEVELOPMENT-GUIDELINES.md](development-guidelines.md)** for specific topics
+
+---
+
+## 📚 Document Descriptions
+
+### 1. Quick Reference Documents
+
+#### **QUICK-START.md** ⚡
+*Quick reference for common tasks - Read this first!*
+
+**Contents:**
+- Critical naming rules (RPCD, menu paths, permissions)
+- Design system essentials (colors, fonts, CSS classes)
+- Common commands (validation, build, deploy, debug)
+- Quick code templates (RPCD, View, Headers, Cards)
+- Error quick fixes
+
+**When to use:** Daily development, quick lookups, debugging
+
+---
+
+#### **CODEX.md** 🤖
+*Field manual for Codex/automation agents*
+
+**Contents:**
+- Repository context and document map
+- Non-negotiable build/design standards
+- Prompt template for LLM workflows
+- Help & troubleshooting pointers
+- Documentation TODO radar and history
+
+**When to use:** Before launching Codex/AI-assisted edits, when crafting prompts, or when aligning work with current documentation initiatives
+
+---
+
+#### **README.md** 📋
+*Project overview and compatibility matrix*
+
+**Contents:**
+- Project description and features
+- OpenWrt version compatibility (24.10.x, 25.12.0-rc1, etc.)
+- Package format support (.ipk vs .apk)
+- Installation instructions
+- Module categories and descriptions
+
+**When to use:** Project overview, version compatibility checks
+
+---
+
+### 2. Complete Reference Documents
+
+#### **DEVELOPMENT-GUIDELINES.md** ⭐
+*Complete development guide - The definitive reference*
+
+**Contents:**
+- **Design System**: Color palettes, typography, component library
+- **Architecture**: File structure, naming conventions, RPCD patterns
+- **Best Practices**: RPCD, ubus, ACL, JavaScript, CSS standards
+- **Common Errors**: Diagnostics and solutions for typical issues
+- **Validation**: Pre-commit, pre-deploy, post-deploy checklists
+- **Deployment**: Step-by-step deployment procedures
+
+**When to use:** Detailed technical questions, design decisions, troubleshooting
+
+**Size:** Comprehensive (~500+ lines)
+
+---
+
+#### **CLAUDE.md** 🏗️
+*Build system, architecture, and CI/CD reference*
+
+**Contents:**
+- OpenWrt SDK build commands
+- Package testing procedures
+- Validation tools and workflows
+- LuCI package structure
+- Frontend-backend communication
+- Critical naming conventions
+- CI/CD integration (GitHub Actions)
+- Common issues and solutions
+
+**When to use:** Build issues, CI/CD workflows, architecture questions
+
+---
+
+### 3. Implementation & Regeneration Documents
+
+#### **MODULE-IMPLEMENTATION-GUIDE.md** 🎯
+*Master guide for implementing/regenerating modules*
+
+**Contents:**
+- Step-by-step workflow for regenerating modules
+- How to use Claude.ai for code generation
+- Complete implementation example (from prompt to deployment)
+- Common implementation patterns (multi-tab dashboards, filters, forms)
+- Module-specific notes (System Hub, WireGuard, CrowdSec, etc.)
+- Troubleshooting guide with solutions
+- Best practices (code organization, error handling, performance, UX)
+- Deployment checklist
+
+**When to use:** Implementing new modules, regenerating existing modules, using AI assistance
+
+**Size:** Comprehensive guide (~800+ lines)
+
+---
+
+#### **FEATURE-REGENERATION-PROMPTS.md** 💬
+*Ready-to-use prompts for all 15 SecuBox modules*
+
+**Contents:**
+- Design system reference (CSS variables, typography, components)
+- Complete prompts for all 15 modules:
+  1. SecuBox Central Hub
+  2. System Hub (9 tabs)
+  3. CrowdSec Dashboard
+  4. Netdata Dashboard
+  5. Netifyd Dashboard
+  6. Network Modes
+  7. WireGuard Dashboard
+  8. Client Guardian
+  9. Auth Guardian
+  10. Bandwidth Manager
+  11. Traffic Shaper
+  12. Media Flow
+  13. CDN Cache
+  14. VHost Manager
+  15. KSM Manager
+- Common UI patterns across all modules
+- Usage instructions for Claude.ai
+
+**When to use:** Getting AI to generate module code, understanding module requirements
+
+**Size:** Extensive (~2000+ lines)
+
+---
+
+#### **CODE-TEMPLATES.md** 💻
+*Working code templates extracted from production modules*
+
+**Contents:**
+- File structure template
+- API module template (api.js)
+- JavaScript view template (overview.js)
+- RPCD backend template (shell script)
+- Menu JSON template
+- ACL JSON template
+- CSS styling template
+- Complete minimal working example
+- Common pitfalls and solutions
+- Validation checklist
+
+**When to use:** Manual implementation, understanding patterns, copying boilerplate code
+
+**Size:** Detailed templates (~1200+ lines)
+
+---
+
+### 4. Tools & Scripts Documentation
+
+#### **secubox-tools/README.md** 🔧
+*Documentation for validation and build tools*
+
+**Contents:**
+- Tool descriptions (validate-modules.sh, local-build.sh, etc.)
+- Usage examples for each tool
+- Supported architectures and devices
+- Package building workflows
+- Firmware building workflows
+- Validation checks (7 automated checks)
+- Recommended workflows
+- Common fixes
+
+**When to use:** Using validation tools, local builds, firmware generation
+
+---
+
+### 5. Live Demo & Examples
+
+#### **Live Demo Website** 🌐
+*Production demo of all modules*
+
+**URL:** https://secubox.cybermood.eu
+
+**Available Demos:**
+- Main dashboard: `/`
+- System Hub: `/system-hub`
+- CrowdSec: `/crowdsec`
+- WireGuard: `/wireguard`
+- All 15 modules accessible
+
+**When to use:** Visual reference, understanding UI/UX, testing features
+
+---
+
+## 🎯 Quick Lookup by Task
+
+### I want to...
+
+#### ...create a new module from scratch
+1. Read: **MODULE-IMPLEMENTATION-GUIDE.md** (Step-by-step workflow)
+2. Copy prompt from: **FEATURE-REGENERATION-PROMPTS.md**
+3. Use templates from: **CODE-TEMPLATES.md**
+4. Validate with: `./secubox-tools/validate-modules.sh`
+
+#### ...regenerate an existing module
+1. Read: **MODULE-IMPLEMENTATION-GUIDE.md** (Section: "Step-by-Step: Regenerate a Module with Claude.ai")
+2. Copy module specification from: **FEATURE-REGENERATION-PROMPTS.md**
+3. Use Claude.ai or copy templates from: **CODE-TEMPLATES.md**
+4. Validate and deploy following: **MODULE-IMPLEMENTATION-GUIDE.md**
+
+#### ...fix RPCD "Object not found" error
+1. Quick fix: **QUICK-START.md** (Error Quick Fixes section)
+2. Detailed troubleshooting: **DEVELOPMENT-GUIDELINES.md** (Common Errors section)
+3. Or: **MODULE-IMPLEMENTATION-GUIDE.md** (Troubleshooting Guide)
+
+#### ...understand the design system
+1. Quick reference: **QUICK-START.md** (Design System Essentials)
+2. Complete guide: **DEVELOPMENT-GUIDELINES.md** (Design System & UI Guidelines)
+3. See live examples: **https://secubox.cybermood.eu**
+
+#### ...build packages locally
+1. Quick commands: **QUICK-START.md** (Build & Deploy section)
+2. Complete guide: **secubox-tools/README.md**
+3. Architecture details: **CLAUDE.md** (Build Commands section)
+
+#### ...validate my changes before commit
+1. Run: `./secubox-tools/fix-permissions.sh --local`
+2. Run: `./secubox-tools/validate-modules.sh`
+3. Review checklist: **DEVELOPMENT-GUIDELINES.md** (Validation Checklist)
+
+#### ...understand menu and ACL configuration
+1. Quick templates: **CODE-TEMPLATES.md** (Menu JSON Template, ACL JSON Template)
+2. Detailed guide: **DEVELOPMENT-GUIDELINES.md** (Architecture & Naming Conventions)
+3. Working examples: Look in any `luci-app-*/root/usr/share/` directory
+
+#### ...deploy to test router
+1. Quick commands: **QUICK-START.md** (Common Commands)
+2. Step-by-step: **MODULE-IMPLEMENTATION-GUIDE.md** (Deploy to Test Router section)
+3. Fix permissions after deploy: `./secubox-tools/fix-permissions.sh --remote`
+
+#### ...understand CSS variable system
+1. Quick reference: **QUICK-START.md** (CSS Variables section)
+2. Complete guide: **DEVELOPMENT-GUIDELINES.md** (CSS/Styling Standards)
+3. Template: **CODE-TEMPLATES.md** (CSS Styling Template)
+4. Live CSS: `luci-app-system-hub/htdocs/luci-static/resources/system-hub/common.css`
+
+#### ...write RPCD backend script
+1. Template: **CODE-TEMPLATES.md** (RPCD Backend Template)
+2. Best practices: **DEVELOPMENT-GUIDELINES.md** (RPCD & ubus Best Practices)
+3. Working examples: Look in any `luci-app-*/root/usr/libexec/rpcd/` directory
+
+#### ...create multi-tab dashboard
+1. Pattern: **MODULE-IMPLEMENTATION-GUIDE.md** (Pattern 1: Multi-Tab Dashboard)
+2. Example: See `luci-app-system-hub` (9 tabs)
+3. Live demo: https://secubox.cybermood.eu/system-hub
+
+---
+
+## 📊 Documentation Comparison Matrix
+
+| Document | Size | Scope | Use Case | Audience |
+|----------|------|-------|----------|----------|
+| **QUICK-START.md** | Small | Quick reference | Daily development | All developers |
+| **README.md** | Small | Project overview | First introduction | New contributors |
+| **DEVELOPMENT-GUIDELINES.md** | Large | Complete reference | Detailed questions | All developers |
+| **CLAUDE.md** | Medium | Build & architecture | Build/CI/CD issues | Developers, DevOps |
+| **MODULE-IMPLEMENTATION-GUIDE.md** | Large | Implementation workflow | Module creation | AI-assisted dev |
+| **FEATURE-REGENERATION-PROMPTS.md** | Very Large | Module specifications | AI prompts | AI-assisted dev |
+| **CODE-TEMPLATES.md** | Large | Code templates | Manual coding | Developers |
+| **secubox-tools/README.md** | Medium | Tools documentation | Tool usage | Developers, DevOps |
+
+---
+
+## 🔄 Documentation Update Workflow
+
+When making changes to the codebase:
+
+1. **Update code** in module files
+2. **Run validation**: `./secubox-tools/validate-modules.sh`
+3. **Update documentation** if:
+   - New pattern introduced → Add to **CODE-TEMPLATES.md**
+   - New design guideline → Update **DEVELOPMENT-GUIDELINES.md**
+   - New common error → Add to **QUICK-START.md** and **DEVELOPMENT-GUIDELINES.md**
+   - New module → Add to **FEATURE-REGENERATION-PROMPTS.md**
+   - New build feature → Update **CLAUDE.md** and **secubox-tools/README.md**
+4. **Update version** and date in modified documents
+5. **Commit** documentation along with code changes
+
+---
+
+## 📞 Support & Contact
+
+- **Documentation Issues:** Create issue at [GitHub Issues](https://github.com/anthropics/claude-code/issues)
+- **Technical Support:** support@cybermind.fr
+- **Live Demo:** https://secubox.cybermood.eu
+- **Company:** CyberMind.fr
+
+---
+
+## 🎓 Learning Path
+
+### Beginner (New to SecuBox)
+1. Day 1: Read **README.md** + **QUICK-START.md**
+2. Day 2: Skim **DEVELOPMENT-GUIDELINES.md** (focus on Design System and Architecture)
+3. Day 3: Follow **MODULE-IMPLEMENTATION-GUIDE.md** to implement a simple module
+4. Day 4: Study existing modules (start with `luci-app-cdn-cache` - simplest)
+5. Day 5: Make your first contribution
+
+### Intermediate (Familiar with OpenWrt/LuCI)
+1. Read **DEVELOPMENT-GUIDELINES.md** (full document)
+2. Review **CODE-TEMPLATES.md** for patterns
+3. Use **FEATURE-REGENERATION-PROMPTS.md** with Claude.ai to generate a module
+4. Study **CLAUDE.md** for build system details
+5. Contribute new modules or enhance existing ones
+
+### Advanced (Ready for Complex Modules)
+1. Study complex modules: System Hub, Network Modes
+2. Read all documentation for comprehensive understanding
+3. Use **MODULE-IMPLEMENTATION-GUIDE.md** patterns for advanced features
+4. Contribute to core design system and tools
+5. Help with documentation improvements
+
+---
+
+## 📝 Version History
+
+| Version | Date | Changes |
+|---------|------|---------|
+| 1.0.0 | 2025-12-27 | Initial comprehensive documentation release |
+|  |  | - Created FEATURE-REGENERATION-PROMPTS.md (15 modules) |
+|  |  | - Created CODE-TEMPLATES.md (complete templates) |
+|  |  | - Created MODULE-IMPLEMENTATION-GUIDE.md (master guide) |
+|  |  | - Created DOCUMENTATION-INDEX.md (this file) |
+|  |  | - Enhanced existing documentation |
+
+---
+
+## 🏆 Documentation Quality Goals
+
+- **Completeness:** All aspects of SecuBox development covered
+- **Accuracy:** Code examples tested and working
+- **Clarity:** Clear explanations with examples
+- **Maintainability:** Easy to update as codebase evolves
+- **Accessibility:** Multiple entry points for different use cases
+- **AI-Friendly:** Structured for AI-assisted development
+
+---
+
+**Last Updated:** 2025-12-27
+**Maintainer:** CyberMind.fr
+**License:** Apache-2.0
diff --git a/docs/feature-regeneration-prompts.md b/docs/feature-regeneration-prompts.md
new file mode 100644
index 00000000..58689096
--- /dev/null
+++ b/docs/feature-regeneration-prompts.md
@@ -0,0 +1,2084 @@
+# SecuBox Feature Regeneration Prompts
+
+**Version:** 1.0.0  
+**Last Updated:** 2025-12-28  
+**Status:** Active  
+**Purpose:** Comprehensive prompts for Claude.ai to regenerate all SecuBox module features matching the live demo at secubox.cybermood.eu
+
+---
+
+## See Also
+
+- **Implementation Workflow:** [MODULE-IMPLEMENTATION-GUIDE.md](module-implementation-guide.md)
+- **Code Templates:** [CODE-TEMPLATES.md](code-templates.md)
+- **Quick Commands:** [QUICK-START.md](quick-start.md)
+- **Automation Guardrails:** [CODEX.md](codex.md)
+
+---
+
+## Table of Contents
+
+1. [Design System Reference](#design-system-reference)
+2. [Core Modules Prompts](#core-modules-prompts)
+3. [Security & Monitoring Modules](#security--monitoring-modules)
+4. [Network Intelligence Modules](#network-intelligence-modules)
+5. [VPN & Access Control Modules](#vpn--access-control-modules)
+6. [Bandwidth & Traffic Modules](#bandwidth--traffic-modules)
+7. [Performance & Services Modules](#performance--services-modules)
+
+---
+
+## Design System Reference
+
+### Color Palette & Variables
+All modules MUST use CSS variables from `system-hub/common.css`:
+
+**Dark Mode (Primary):**
+```css
+--sh-bg-primary: #0a0a0f;      /* Deep black background */
+--sh-bg-secondary: #12121a;     /* Card backgrounds */
+--sh-bg-tertiary: #1a1a24;      /* Hover/active states */
+--sh-primary: #6366f1;          /* Indigo primary */
+--sh-primary-end: #8b5cf6;      /* Violet (gradients) */
+--sh-success: #22c55e;          /* Green */
+--sh-danger: #ef4444;           /* Red */
+--sh-warning: #f59e0b;          /* Orange */
+--sh-text-primary: #fafafa;     /* Main text */
+--sh-text-secondary: #a0a0b0;   /* Secondary text */
+```
+
+### Typography Standards
+```css
+/* Fonts */
+Inter: Body text, labels, UI elements
+JetBrains Mono: Numbers, IDs, code, metrics
+
+/* Sizes */
+--sh-title-xl: 28px;    /* Page titles */
+--sh-title-lg: 20px;    /* Card titles */
+--sh-value-xl: 40px;    /* Large metrics */
+--sh-value-lg: 32px;    /* Stats overview */
+```
+
+### Component Patterns
+1. **Page Header**: Icon + Title + Subtitle + Stats Grid
+2. **Stats Badges**: Monospace values, 130px minimum width
+3. **Cards**: 3px top border (gradient or solid color)
+4. **Buttons**: Gradient backgrounds, shadow effects, smooth transitions
+5. **Filter Tabs**: Gradient for active, icon + label pattern
+
+---
+
+## Core Modules Prompts
+
+### 1. SecuBox Central Hub (luci-app-secubox)
+
+**Module Purpose:** Main dashboard and central control panel
+
+**Prompt for Claude.ai:**
+
+```
+Create a LuCI dashboard module for SecuBox Central Hub with these features:
+
+DESIGN REQUIREMENTS:
+- Dark theme with gradient backgrounds (#0a0a0f → #12121a)
+- Page header with rocket icon 🚀 and title "SecuBox Control Center"
+- Stats grid showing: Total Modules (badge), Active Services, System Health, Alerts Count
+- Use CSS variables from --sh-* (never hardcode colors)
+
+MAIN FEATURES:
+1. Module Overview Grid
+   - Display all 15 installed SecuBox modules as cards
+   - Each card: Module icon, name, status badge (active/inactive), version
+   - Color-coded borders: green (running), orange (warning), red (stopped)
+   - "Configure" and "View Details" buttons per card
+   - Filter tabs: All | Security | Network | Services
+
+2. System Health Dashboard
+   - Real-time metrics: CPU, RAM, Disk, Network
+   - Animated progress bars with gradient fills
+   - Threshold indicators (warn >80%, danger >90%)
+   - JetBrains Mono font for all numeric values
+
+3. Quick Actions Panel
+   - Restart All Services button (gradient orange)
+   - Update Packages button (gradient blue)
+   - View System Logs button (gradient indigo)
+   - Export Config button (gradient green)
+
+4. Alert Timeline
+   - Last 10 system events with timestamps
+   - Icon indicators for severity levels
+   - Expandable details per alert
+   - Auto-refresh every 30 seconds
+
+TECHNICAL SPECS:
+- File: luci-app-secubox/htdocs/luci-static/resources/view/secubox/dashboard.js
+- RPCD backend: luci.secubox (methods: getModules, getHealth, getAlerts)
+- CSS: luci-app-secubox/htdocs/luci-static/resources/secubox/dashboard.css
+- Use L.resolveDefault() for all ubus calls
+- Implement proper error handling with user-friendly messages
+- Add loading states with skeleton screens
+
+UI COMPONENTS TO USE:
+- sh-page-header for main header
+- sh-card with sh-card-success/warning/danger variants
+- sh-stat-badge for metrics (130px minimum)
+- sh-btn sh-btn-primary for action buttons
+- sh-filter-tabs for category filtering
+
+REFERENCE THE LIVE DEMO:
+Match the look and feel of secubox.cybermood.eu demo
+- Smooth animations on card hover
+- Gradient text effects on titles
+- Glow effects on active elements
+- Responsive grid (min 280px cards)
+```
+
+### 2. System Hub (luci-app-system-hub)
+
+**Module Purpose:** Unified system control center
+
+**Prompt for Claude.ai:**
+
+```
+Create a comprehensive System Hub module for OpenWrt with these features:
+
+DESIGN REQUIREMENTS:
+- Use System Hub design system (common.css variables)
+- Page title: "System Control Center" with ⚙️ icon
+- Multi-tab interface: Overview | Services | Logs | Backup | Components | Diagnostics | Health | Remote | Settings
+
+OVERVIEW TAB:
+1. System Info Grid (4 columns, responsive)
+   - Hostname card with edit button
+   - Uptime card with formatted duration
+   - Load Average card (1m, 5m, 15m) in monospace
+   - Kernel Version card with copy icon
+
+2. Resource Monitors (animated progress circles)
+   - CPU usage with color coding (<70% green, 70-90% orange, >90% red)
+   - Memory usage with used/total display
+   - Storage usage with filesystem breakdown
+   - Network throughput (RX/TX rates in real-time)
+
+3. Quick Status Indicators
+   - Internet connectivity (ping test every 60s)
+   - DNS resolution status
+   - NTP sync status
+   - Firewall status with rule count
+
+SERVICES TAB:
+1. Service Cards Grid
+   - Each service: name, status badge, description, uptime
+   - Color-coded borders based on status
+   - Action buttons: Start/Stop/Restart/Enable/Disable
+   - Filter by: All | Running | Stopped | Enabled | Disabled
+   - Search bar for filtering services
+
+2. Service Details Modal
+   - Full service info (PID, memory usage, CPU time)
+   - Recent logs (last 50 lines with syntax highlighting)
+   - Configuration file path with edit link
+   - Dependencies tree view
+
+LOGS TAB:
+1. System Logs Viewer
+   - Real-time log streaming (WebSocket or polling)
+   - Color-coded severity levels (error=red, warn=orange, info=blue)
+   - Filter by: severity, service, date range
+   - Search functionality with regex support
+   - Auto-scroll toggle
+   - Export logs button (download as .txt)
+   - Line numbers in monospace
+   - Compact header mode (saves vertical space)
+
+2. Log Statistics
+   - Error count in last hour/day
+   - Most active services
+   - Alert frequency chart (sparkline)
+
+BACKUP TAB:
+1. Backup Management
+   - Create backup button (includes config + installed packages list)
+   - List existing backups with date, size, description
+   - Restore from backup with confirmation modal
+   - Download backup to local machine
+   - Upload backup from file
+   - Auto-backup schedule configuration
+
+2. Backup Preview
+   - Show included files before creating
+   - Estimated size calculation
+   - Compression options (gz, xz)
+
+COMPONENTS TAB:
+1. Installed Packages Display
+   - Grid of all luci-app-* packages
+   - Each card: package name, version, size, status
+   - Category filtering (same as SecuBox modules)
+   - Dependency information
+   - Uninstall button with warning
+
+DIAGNOSTICS TAB:
+1. Network Diagnostics
+   - Ping tool with target input
+   - Traceroute with hop visualization
+   - DNS lookup with multiple nameservers
+   - Port scanner (common ports or custom range)
+   - Bandwidth test (speedtest-cli integration)
+
+2. System Diagnostics
+   - Filesystem check status
+   - Memory leak detection
+   - Process list with resource usage
+   - Open file descriptors count
+   - Network connections table
+
+HEALTH TAB:
+1. System Health Report
+   - Overall health score (0-100) with gradient circle
+   - Critical issues list with fix suggestions
+   - Temperature sensors (if available)
+   - Fan speeds (if available)
+   - SMART disk status
+   - Battery status (for UPS-backed systems)
+
+2. Health History
+   - 24h health score chart (line graph)
+   - Resource usage trends
+   - Alert frequency over time
+
+REMOTE TAB:
+1. Remote Access Management
+   - SSH status with port and allowed IPs
+   - Web UI access info (HTTP/HTTPS, port, external access)
+   - RustDesk remote desktop integration
+   - WireGuard VPN status (if installed)
+   - Dynamic DNS configuration
+
+SETTINGS TAB:
+1. System Hub Preferences
+   - Auto-refresh interval (10s/30s/60s/disabled)
+   - Dark/Light mode toggle
+   - Compact mode toggle
+   - Language selection
+   - Timezone configuration
+   - Dashboard layout customization
+
+TECHNICAL IMPLEMENTATION:
+- Files: system-hub/overview.js, services.js, logs.js, backup.js, components.js, diagnostics.js, health.js, remote.js, settings.js
+- RPCD: luci.system-hub with methods for each feature
+- API file: system-hub/api.js with clean method wrappers
+- CSS: system-hub/dashboard.css + common.css
+- Use theme.js for dark/light mode switching
+- WebSocket support for real-time log streaming
+- LocalStorage for user preferences
+- Proper loading states and error handling
+
+REFERENCE DEMO:
+Match secubox.cybermood.eu/system-hub demo
+- Smooth tab transitions
+- Real-time data updates
+- Responsive grid layouts
+- Professional color coding
+```
+
+---
+
+## Security & Monitoring Modules
+
+### 3. CrowdSec Dashboard (luci-app-crowdsec-dashboard)
+
+**Prompt for Claude.ai:**
+
+```
+Create a CrowdSec security monitoring dashboard for OpenWrt:
+
+DESIGN:
+- Title: "CrowdSec Security" with 🛡️ icon
+- Dark theme with emphasis on threat indicators
+- Stats badges: Active Decisions | Blocked IPs | Alerts | Bouncers
+
+OVERVIEW TAB:
+1. Threat Intelligence Summary
+   - Total decisions count (15M+ IPs blocked globally reference)
+   - Active local decisions with expiry countdown
+   - Decision types breakdown (ban, captcha, throttle) as pie chart
+   - Country distribution of threats (top 10 with flags)
+
+2. Recent Alerts Timeline
+   - Alert cards with: timestamp, scenario, IP, country flag, severity
+   - Color-coded by risk level
+   - Expandable details showing full event data
+   - Filter by: time range, scenario type, severity
+
+3. Real-time Activity Feed
+   - Last 100 events (scrollable, auto-updating)
+   - IP address in monospace with copy button
+   - Scenario name with icon
+   - Action taken (ban/log/captcha)
+
+DECISIONS TAB:
+1. Active Decisions Table
+   - Columns: IP, Reason, Duration, Expires In, Type, Origin, Actions
+   - Sortable by all columns
+   - Search and filter capabilities
+   - Manual decision add/remove buttons
+   - Bulk actions (delete selected)
+   - Export to CSV button
+
+2. Decision Statistics
+   - Decisions over time (24h chart)
+   - Most blocked IPs
+   - Most triggered scenarios
+   - Average decision duration
+
+ALERTS TAB:
+1. Alert Management
+   - Alert cards grouped by scenario
+   - Timeline view with date headers
+   - Severity indicators (critical/high/medium/low)
+   - Related decisions linking
+   - Mark as resolved functionality
+
+BOUNCERS TAB:
+1. Bouncer Status
+   - Connected bouncers list
+   - Each bouncer: name, type, version, last pull, status
+   - Add new bouncer with API key generation
+   - Delete bouncer with confirmation
+   - Bouncer metrics (decisions applied, queries made)
+
+METRICS TAB:
+1. Performance Metrics
+   - CrowdSec service health
+   - Decision pull frequency
+   - API response times
+   - Memory and CPU usage
+   - LAPI/CAPI status indicators
+
+SETTINGS TAB:
+1. CrowdSec Configuration
+   - Enable/disable service
+   - Acquisition configuration (log paths)
+   - Scenario management (enable/disable specific scenarios)
+   - Collection management (install/remove)
+   - Console enrollment status
+
+TECHNICAL:
+- RPCD: luci.crowdsec-dashboard
+- Methods: getStats, getDecisions, getAlerts, getBouncers, getMetrics
+- Commands: cscli decisions list/add/delete, cscli alerts list, cscli bouncers list
+- Parse JSON output from cscli commands
+- Handle API communication with CrowdSec daemon
+
+VISUAL ENHANCEMENTS:
+- Gradient borders for threat level cards (green→orange→red)
+- Animated pulse on new alerts
+- Country flags for IP geolocation
+- Sparkline charts for metrics
+- Loading skeletons during data fetch
+```
+
+### 4. Netdata Dashboard (luci-app-netdata-dashboard)
+
+**Prompt for Claude.ai:**
+
+```
+Create a Netdata system monitoring dashboard with 1000+ metrics:
+
+DESIGN:
+- Title: "System Monitoring" with 📊 icon
+- Emphasis on real-time charts and metrics
+- Stats badges: Alerts | Services | Charts | Collectors
+
+DASHBOARD TAB:
+1. Overview Metrics Grid
+   - System load (1m, 5m, 15m) as gauge charts
+   - CPU usage per core (multi-core visualization)
+   - RAM usage with breakdown (used/cached/buffers/free)
+   - Disk I/O rates (read/write MB/s)
+   - Network throughput (all interfaces combined)
+
+2. Quick Charts
+   - CPU temperature chart (if available)
+   - Swap usage chart
+   - Processes count chart (running/sleeping/zombie)
+   - Context switches and interrupts chart
+
+3. Embedded Netdata
+   - Full Netdata web UI embedded in iframe
+   - Responsive sizing
+   - Theme matching (dark mode)
+
+SYSTEM TAB:
+1. System Metrics Deep Dive
+   - CPU frequency and governor
+   - CPU idle time percentage
+   - Per-core usage bars
+   - System interrupts per second
+   - Context switches rate
+   - Kernel internal metrics
+
+2. Memory Details
+   - Memory allocation chart
+   - Page faults rate
+   - Committed memory ratio
+   - Huge pages usage
+   - Slab memory breakdown
+
+PROCESSES TAB:
+1. Process Monitoring
+   - Top processes by CPU (live updating table)
+   - Top processes by RAM
+   - Process count by state
+   - Thread count total
+   - Process spawn rate
+
+2. Process Details
+   - Per-process CPU time
+   - Per-process memory maps
+   - Open files per process
+   - Process tree visualization
+
+REALTIME TAB:
+1. Live Monitoring
+   - Real-time CPU chart (1s granularity)
+   - Real-time network I/O
+   - Real-time disk I/O
+   - Real-time memory changes
+   - Auto-refreshing every second
+
+NETWORK TAB:
+1. Network Metrics
+   - Interface statistics (all interfaces)
+   - Packet rates (packets/s in/out)
+   - Error and drop counters
+   - TCP/UDP connection states
+   - Netfilter statistics
+   - DNS query statistics (if available)
+
+SETTINGS TAB:
+1. Netdata Configuration
+   - Enable/disable Netdata service
+   - Configure retention period
+   - Enable/disable specific collectors
+   - Alert configuration
+   - Streaming configuration (central Netdata)
+
+TECHNICAL:
+- RPCD: luci.netdata-dashboard
+- Netdata API integration (http://localhost:19999/api/v1/)
+- Methods: /info, /charts, /data, /alarms
+- Real-time data fetching with polling
+- Chart.js or native Netdata charts
+- WebSocket support for live updates
+
+CHARTS TO INCLUDE:
+- Line charts for time-series data
+- Bar charts for comparisons
+- Gauge charts for current values
+- Area charts for stacked metrics
+- Sparklines for compact overviews
+```
+
+---
+
+## Network Intelligence Modules
+
+### 5. Netifyd Dashboard (luci-app-netifyd-dashboard)
+
+**Prompt for Claude.ai:**
+
+```
+Create a Deep Packet Inspection dashboard using Netifyd (300+ app detection):
+
+DESIGN:
+- Title: "Network Intelligence" with 🔍 icon
+- Focus on application and protocol visibility
+- Stats badges: Active Flows | Applications | Devices | Protocols
+
+OVERVIEW TAB:
+1. Network Activity Summary
+   - Total flows count (current + historical)
+   - Unique applications detected today
+   - Active devices count
+   - Protocol distribution (TCP/UDP/ICMP pie chart)
+
+2. Top Applications Chart
+   - Bar chart of top 10 applications by bandwidth
+   - Icons for recognized apps (Netflix, YouTube, Spotify, etc.)
+   - Percentage of total traffic
+   - Click to filter flows by application
+
+3. Top Devices
+   - Device cards with: hostname, MAC, IP, current app
+   - Bandwidth usage per device (RX/TX)
+   - Device type icon (phone, laptop, TV, IoT)
+
+APPLICATIONS TAB:
+1. Application Discovery
+   - Grid of detected applications
+   - Each card: app icon, name, category, protocol, active flows
+   - Color-coded categories:
+     * Streaming (red): Netflix, YouTube, Twitch
+     * Social (blue): Facebook, Instagram, TikTok
+     * Messaging (green): WhatsApp, Telegram, Signal
+     * VoIP (purple): Zoom, Teams, Discord
+     * Gaming (orange): Steam, PlayStation, Xbox
+   - Real-time bandwidth per app (sparklines)
+
+2. Application Details
+   - Click app to see: active connections, total bandwidth, protocols used
+   - Flow timeline for selected app
+   - Device breakdown (which devices use this app)
+
+DEVICES TAB:
+1. Device Inventory
+   - Table: IP, MAC, Hostname, Vendor, Active Apps, Bandwidth
+   - Sortable and searchable
+   - Device grouping by subnet
+   - Manual device naming/tagging
+
+2. Device Profile
+   - Per-device view: all flows, app usage history
+   - Bandwidth trends (24h chart)
+   - Risk assessment (unknown protocols, suspicious apps)
+   - Block/allow rules management
+
+FLOWS TAB:
+1. Active Flows Monitor
+   - Real-time table of network flows
+   - Columns: Source, Destination, App, Protocol, Bandwidth, Duration
+   - Auto-scrolling with pause button
+   - Color-coded by risk level
+   - Flow details on click (full 5-tuple + DPI data)
+
+2. Flow Statistics
+   - Flows by protocol (pie chart)
+   - Top talkers (source IPs)
+   - Top destinations (external IPs)
+   - Port distribution
+
+TOP TALKERS TAB:
+1. Bandwidth Leaders
+   - Ranked list of IP addresses by total traffic
+   - Direction indicators (upload/download)
+   - Time range selector (1h/24h/7d/30d)
+   - Export to CSV
+
+RISKS TAB:
+1. Risk Assessment
+   - Suspicious flows detection
+   - Unknown protocols list
+   - Connections to blacklisted IPs
+   - Unusual port usage
+   - Potential malware C2 traffic
+   - Risk score per device (0-100)
+
+CATEGORY BANDWIDTH TAB:
+1. Traffic by Category
+   - Stacked area chart showing categories over time
+   - Categories: Streaming, Social, Gaming, Business, Other
+   - Percentage breakdown
+   - Peak usage times
+
+DNS QUERIES TAB:
+1. DNS Analytics
+   - Recent DNS queries table
+   - Most queried domains
+   - Failed queries count
+   - DNS leak detection
+   - Blocked queries (if using DNS filtering)
+
+SETTINGS TAB:
+1. Netifyd Configuration
+   - Enable/disable DPI
+   - Select interfaces to monitor
+   - Application detection sensitivity
+   - Flow export configuration
+   - Privacy settings (data retention)
+
+TECHNICAL:
+- RPCD: luci.netifyd-dashboard
+- Netifyd API: Unix socket /var/run/netifyd/netifyd.sock
+- JSON flow export parsing
+- Application database from Netify signatures
+- Real-time flow updates (WebSocket or SSE)
+
+VISUAL FEATURES:
+- Application icons from FontAwesome or custom SVG set
+- Animated flow counters (counting up effect)
+- Color-coded bandwidth bars
+- Interactive charts (click to filter)
+- Tooltips with detailed info
+```
+
+### 6. Network Modes (luci-app-network-modes)
+
+**Prompt for Claude.ai:**
+
+```
+Create a Network Mode Configuration wizard with 5 topology options:
+
+DESIGN:
+- Title: "Network Configuration" with 🌐 icon
+- Wizard-style interface with step progression
+- Large mode cards with illustrations
+
+OVERVIEW TAB:
+1. Current Mode Display
+   - Large card showing active mode with icon
+   - Mode description
+   - Current network config summary (WAN/LAN IPs, DHCP status)
+   - "Change Mode" button (gradient)
+
+2. Mode Comparison Table
+   - All 5 modes in columns
+   - Rows: Use case, WAN ports, LAN ports, WiFi role, DHCP server, NAT
+   - Highlight current mode
+
+WIZARD TAB:
+1. Mode Selection Screen
+   - 5 mode cards in grid:
+     * Router Mode 🏠 - Default home/office setup
+     * Bridge Mode 🌉 - Transparent layer-2 forwarding
+     * Access Point Mode 📡 - WiFi only, wired uplink
+     * Repeater/Extender Mode 🔁 - WiFi to WiFi repeating
+     * Travel Router Mode ✈️ - Portable WiFi from hotel ethernet
+   - Each card: title, description, pros/cons, diagram
+   - "Select" button per card
+
+2. Configuration Screen (per mode)
+   - Mode-specific settings:
+     * Router: WAN type (DHCP/PPPoE/Static), LAN subnet, DHCP range
+     * Bridge: Bridge members, STP enable, VLAN config
+     * AP: Uplink interface, SSID, security, channel
+     * Repeater: Source SSID scan, credentials, rebroadcast SSID
+     * Travel Router: Client WiFi scan, WAN MAC clone option
+
+3. Preview Screen
+   - Show configuration changes before applying
+   - Network diagram with new topology
+   - List of services that will be reconfigured
+   - Estimated downtime warning
+   - "Apply" and "Back" buttons
+
+4. Apply Screen
+   - Progress indicator during application
+   - Step-by-step status:
+     * Stopping services...
+     * Updating network config...
+     * Restarting interfaces...
+     * Starting services...
+   - Rollback timer (60 seconds to confirm)
+   - Confirmation screen after success
+
+ROUTER MODE TAB:
+1. Router Settings
+   - WAN interface config (DHCP client, static, PPPoE, 3G/4G)
+   - LAN interface config (IP, netmask, DHCP server)
+   - Port mapping (which physical ports are WAN vs LAN)
+   - NAT and firewall rules
+   - DNS forwarder configuration
+
+ACCESS POINT TAB:
+1. AP Settings
+   - Uplink interface selection (ethernet or WiFi)
+   - Disable NAT and DHCP server
+   - Bridge LAN and Uplink
+   - WiFi configuration (SSID, security, channel, power)
+   - Fast roaming (802.11r) settings
+
+RELAY TAB:
+1. Relay/Repeater Settings
+   - Site survey (scan for WiFi networks)
+   - Connect to upstream WiFi (credentials)
+   - Rebroadcast SSID (same or different)
+   - WiFi to WiFi bridge config
+   - Signal strength indicators
+
+SNIFFER MODE TAB:
+1. Packet Capture Configuration
+   - Monitor mode on WiFi
+   - Promiscuous mode on ethernet
+   - Capture filters (BPF syntax)
+   - Output format (pcap, pcapng)
+   - Capture rotation and storage
+   - Integration with tcpdump/wireshark
+
+SETTINGS TAB:
+1. Advanced Network Settings
+   - VLAN configuration
+   - Link aggregation (bonding)
+   - QoS settings
+   - IPv6 configuration
+   - Custom routing rules
+
+TECHNICAL:
+- RPCD: luci.network-modes
+- Methods: get_current_mode, get_available_modes, set_mode, validate_config
+- UCI config manipulation (/etc/config/network, wireless, firewall, dhcp)
+- Interface state monitoring (network.interface events)
+- Rollback mechanism (uci revert + timer)
+
+VALIDATION:
+- IP address format validation
+- Subnet overlap detection
+- DHCP range within subnet check
+- WiFi channel availability check
+- Physical port assignment conflicts
+```
+
+---
+
+## VPN & Access Control Modules
+
+### 7. WireGuard Dashboard (luci-app-wireguard-dashboard)
+
+**Prompt for Claude.ai:**
+
+```
+Create a WireGuard VPN management dashboard with QR code generation:
+
+DESIGN:
+- Title: "WireGuard VPN" with 🔐 icon
+- Modern VPN dashboard aesthetic
+- Stats badges: Active Peers | Data Transferred | Uptime | Endpoints
+
+OVERVIEW TAB:
+1. VPN Status
+   - Interface status (up/down) with toggle
+   - Public key display (monospace, copy button)
+   - Listen port
+   - IP address (VPN subnet)
+   - Endpoint (if client mode)
+
+2. Peer Statistics
+   - Active peers count
+   - Total data RX/TX (all peers combined)
+   - Latest handshake timestamp
+   - Connection quality indicators
+
+3. Quick Actions
+   - Start/Stop VPN button
+   - Generate New Keypair button
+   - Download Config button
+   - Add Peer button (quick modal)
+
+PEERS TAB:
+1. Peer Management
+   - Peer cards grid:
+     * Each card: name, public key (truncated), allowed IPs, endpoint, status
+     * Color-coded border (green=active, orange=stale, red=disconnected)
+     * Last handshake time (e.g., "2 minutes ago")
+     * Data transfer counters (RX/TX)
+     * Edit and Delete buttons
+
+2. Add Peer Dialog
+   - Generate keypair automatically OR paste existing public key
+   - Assign VPN IP address (auto-suggest next available)
+   - Define allowed IPs (0.0.0.0/0 for full tunnel, specific subnets for split)
+   - Optional: persistent keepalive interval
+   - Optional: pre-shared key (PSK) for post-quantum security
+   - Generate config file and QR code instantly
+
+QR CODES TAB:
+1. Mobile Client Setup
+   - Select peer from dropdown
+   - Generate WireGuard client config
+   - Display as QR code (for WireGuard mobile app scanning)
+   - Also show config text (copyable)
+   - Download .conf file button
+   - Include DNS servers in config
+
+2. QR Code Options
+   - Custom DNS servers
+   - Include all routes vs split tunnel
+   - MTU configuration
+   - Persistent keepalive setting
+
+TRAFFIC TAB:
+1. Traffic Analytics
+   - Real-time bandwidth chart (per peer)
+   - Historical traffic graph (24h, 7d, 30d)
+   - Top bandwidth users
+   - Traffic by protocol (if DPI available)
+
+CONFIG TAB:
+1. Interface Configuration
+   - Private key (hidden by default, show button)
+   - Public key (derived, read-only)
+   - Listen port (51820 default)
+   - IP addresses (comma-separated for multi-subnet)
+   - MTU size
+   - Table (routing table number)
+
+2. Advanced Settings
+   - Pre-up/Post-up scripts
+   - Pre-down/Post-down scripts
+   - Firewall zone assignment
+   - NAT masquerading toggle
+
+SETTINGS TAB:
+1. Global VPN Settings
+   - Auto-start on boot toggle
+   - Keep-alive interval (global default)
+   - DNS leak protection
+   - IPv6 support toggle
+   - Logging level
+
+2. Endpoint Configuration (for client mode)
+   - Server endpoint hostname/IP
+   - Server public key
+   - Allowed IPs (what routes through VPN)
+   - Persistent keepalive for NAT traversal
+
+TECHNICAL:
+- RPCD: luci.wireguard-dashboard
+- Methods: status, get_interfaces, get_peers, add_peer, remove_peer, generate_keys, generate_config, generate_qr
+- Commands: wg show, wg set, wg genkey, wg pubkey, wg genpsk
+- QR code generation: qrencode command or JavaScript library (qrcodejs)
+- Config file template generation
+- Real-time peer status updates
+
+UI ENHANCEMENTS:
+- Animated connection status indicators
+- Gradient border for active peers
+- Copy-to-clipboard for keys and configs
+- Modal dialogs for add/edit peer
+- Confirmation dialogs for destructive actions
+- Toast notifications for success/error
+```
+
+### 8. Client Guardian (luci-app-client-guardian)
+
+**Prompt for Claude.ai:**
+
+```
+Create a Network Access Control (NAC) and Captive Portal system:
+
+DESIGN:
+- Title: "Access Control" with 👥 icon
+- Focus on device management and access policies
+- Stats badges: Total Devices | Allowed | Blocked | Guest
+
+OVERVIEW TAB:
+1. Network Summary
+   - Total devices seen (ever)
+   - Currently connected devices
+   - Allowed devices count
+   - Blocked devices count
+   - Guest devices (captive portal)
+
+2. Recent Activity
+   - Last 20 connection events
+   - Each event: timestamp, MAC, IP, hostname, action (allow/block/captive)
+   - Color-coded by action type
+
+3. Quick Actions
+   - Block All Unknown button (lockdown mode)
+   - Allow All button (open mode)
+   - Clear Guest Sessions button
+
+CLIENTS TAB:
+1. Device Table
+   - Columns: MAC, IP, Hostname, Vendor, Zone, Status, Actions
+   - Sortable by all columns
+   - Search/filter bar
+   - Bulk selection for actions
+
+2. Device Details Modal
+   - Full device info: MAC, IP, Hostname, Vendor (from MAC prefix)
+   - Connection history (first seen, last seen, total connections)
+   - Current zone assignment (LAN, Guest, Blocked)
+   - Assigned policies
+   - Edit button (change hostname, zone, policies)
+
+ZONES TAB:
+1. Zone Management
+   - Predefined zones:
+     * Trusted (full access)
+     * LAN (standard access)
+     * Guest (restricted access, captive portal)
+     * IoT (isolated, limited access)
+     * Quarantine (blocked)
+
+2. Zone Configuration
+   - Per-zone settings:
+     * Allowed services (HTTP, HTTPS, DNS, etc.)
+     * Bandwidth limits
+     * Time restrictions
+     * Inter-zone communication rules
+     * Firewall rules
+
+CAPTIVE PORTAL TAB:
+1. Captive Portal Configuration
+   - Enable/disable portal
+   - Splash page customization:
+     * Custom logo upload
+     * Welcome message (HTML editor)
+     * Terms of Service text
+     * Redirect URL after acceptance
+
+2. Portal Themes
+   - Predefined themes (Business, Hotel, Cafe, School)
+   - Color scheme customization
+   - Preview button
+
+3. Portal Settings
+   - Session duration (1h, 4h, 24h, unlimited)
+   - Require email before access
+   - Require SMS verification
+   - Require social login (Facebook, Google)
+   - Auto-allow known devices
+
+PORTAL DESIGN TAB:
+1. Splash Page Editor
+   - WYSIWYG HTML editor
+   - Template variables (e.g., {{client_mac}}, {{client_ip}})
+   - Background image upload
+   - CSS styling panel
+   - Live preview
+
+LOGS TAB:
+1. Access Logs
+   - Connection attempts log
+   - Allowed/blocked decisions
+   - Captive portal authentications
+   - Filter by: time range, MAC, IP, zone, action
+
+ALERTS TAB:
+1. Security Alerts
+   - MAC spoofing detection
+   - Excessive connection attempts
+   - Unknown devices connecting
+   - Devices changing zones
+   - Alert rules configuration
+
+PARENTAL CONTROLS TAB:
+1. Content Filtering
+   - Website category blocking (adult, social, gaming, etc.)
+   - Time-based access controls (school hours, bedtime)
+   - Per-device or per-user policies
+   - SafeSearch enforcement
+   - YouTube restricted mode
+
+2. Device Groups
+   - Group devices (e.g., "Kids Devices")
+   - Apply policies to groups
+   - Schedule-based rules (weekday vs weekend)
+
+SETTINGS TAB:
+1. Client Guardian Settings
+   - Default zone for new devices
+   - MAC-IP binding enforcement
+   - ARP cache timeout
+   - DHCP integration (assign zone based on IP range)
+   - Logging level and retention
+
+TECHNICAL:
+- RPCD: luci.client-guardian
+- Methods: list_clients, update_client, get_zones, configure_portal, get_logs
+- Integration with:
+   * nftables/iptables for access control
+   * dnsmasq for DNS and DHCP
+   * nginx/uhttpd for captive portal
+   * ipset for efficient device grouping
+- Database for device tracking (SQLite or UCI)
+
+CAPTIVE PORTAL IMPLEMENTATION:
+- Intercept HTTP traffic for unauthenticated clients
+- Redirect to splash page
+- After acceptance, add to allowed ipset
+- Session management with cookies or tokens
+```
+
+### 9. Auth Guardian (luci-app-auth-guardian)
+
+**Prompt for Claude.ai:**
+
+```
+Create an authentication and session management system with OAuth2 and vouchers:
+
+DESIGN:
+- Title: "Authentication" with 🔑 icon
+- Professional authentication dashboard
+- Stats badges: Active Sessions | OAuth Providers | Vouchers | Bypass Rules
+
+OVERVIEW TAB:
+1. Authentication Status
+   - Total registered users
+   - Active sessions count
+   - OAuth providers configured
+   - Voucher redemptions today
+
+2. Recent Authentications
+   - Last 20 auth events
+   - Each: timestamp, username/email, method (OAuth/voucher/bypass), IP, status
+   - Color-coded by status (success=green, fail=red)
+
+SESSIONS TAB:
+1. Active Sessions Table
+   - Columns: User, Session ID, Started, Last Activity, IP, Device, Actions
+   - Session details on click
+   - Revoke session button (with confirmation)
+   - Force logout all sessions button
+
+2. Session Management
+   - Session timeout configuration
+   - Concurrent session limit per user
+   - Idle timeout
+   - Remember me duration
+
+VOUCHERS TAB:
+1. Voucher Management
+   - Create new voucher button
+   - Voucher table: Code, Duration, Remaining Uses, Created, Expires, Status
+   - Voucher types:
+     * Single-use (one time only)
+     * Multi-use (X redemptions)
+     * Time-limited (expires after duration)
+     * Bandwidth-limited (X GB quota)
+
+2. Create Voucher Dialog
+   - Generate random code OR custom code
+   - Voucher duration (1h, 4h, 24h, 7d, 30d, unlimited)
+   - Usage limit (1, 10, 100, unlimited)
+   - Bandwidth quota (optional)
+   - Notes/description field
+   - Print voucher button (printable page with code)
+
+3. Bulk Voucher Generation
+   - Generate X vouchers at once
+   - Export as CSV
+   - Print sheet (multiple vouchers per page)
+
+OAUTH TAB:
+1. OAuth Provider Configuration
+   - Supported providers:
+     * Google OAuth
+     * GitHub OAuth
+     * Facebook Login
+     * Microsoft Azure AD
+     * Custom OAuth2 provider
+
+2. Provider Setup
+   - Client ID input
+   - Client Secret input (masked)
+   - Redirect URI (auto-generated)
+   - Scopes configuration
+   - Enable/disable per provider
+   - Test button (initiates OAuth flow)
+
+3. User Mapping
+   - Map OAuth attributes to local user fields
+   - Auto-create user on first OAuth login
+   - Group assignment based on OAuth claims
+
+SPLASH PAGE TAB:
+1. Login Page Customization
+   - Custom logo upload
+   - Welcome text editor
+   - Enabled auth methods (OAuth buttons, voucher input, bypass link)
+   - Background image or gradient
+   - Color scheme
+   - Preview button
+
+BYPASS RULES TAB:
+1. Bypass Configuration
+   - Whitelist MAC addresses (no auth required)
+   - Whitelist IP ranges
+   - Whitelist hostnames (regex patterns)
+   - Time-based bypass (e.g., office hours, all devices allowed)
+
+2. Bypass List
+   - Table: MAC/IP, Description, Added, Expires
+   - Add/remove bypass rules
+   - Temporary bypass (expires after X hours)
+
+LOGS TAB:
+1. Authentication Logs
+   - All auth attempts (success and failure)
+   - Filter by: date range, username, method, IP
+   - Export to CSV
+   - Visualizations:
+     * Auth attempts over time (line chart)
+     * Auth methods breakdown (pie chart)
+     * Failed attempts by IP (bar chart)
+
+SETTINGS TAB:
+1. Auth Guardian Settings
+   - Require authentication (global toggle)
+   - Default session duration
+   - Password policy (if local users)
+   - Two-factor authentication (TOTP)
+   - Login attempt limits (brute force protection)
+   - Session storage (memory vs database)
+
+TECHNICAL:
+- RPCD: luci.auth-guardian
+- Methods: status, list_providers, list_vouchers, create_voucher, delete_voucher, validate_voucher, list_sessions, revoke_session
+- OAuth implementation:
+   * Authorization code flow
+   * JWT token validation
+   * Provider-specific API calls
+- Voucher system:
+   * Random code generation (alphanumeric, 8-16 chars)
+   * Expiry tracking (cron job or daemon)
+   * Redemption logging
+- Session management:
+   * Cookie-based or token-based
+   * Redis or in-memory storage for sessions
+   * Session cleanup task
+
+INTEGRATION:
+- Works with Client Guardian for captive portal
+- Firewall integration for post-auth access
+- RADIUS support (optional, for enterprise)
+```
+
+---
+
+## Bandwidth & Traffic Modules
+
+### 10. Bandwidth Manager (luci-app-bandwidth-manager)
+
+**Prompt for Claude.ai:**
+
+```
+Create a comprehensive QoS and bandwidth management system:
+
+DESIGN:
+- Title: "Bandwidth Manager" with 📶 icon
+- Focus on traffic shaping and quotas
+- Stats badges: Active Rules | Total Bandwidth | Clients Tracked | Quotas
+
+OVERVIEW TAB:
+1. Bandwidth Summary
+   - Total available bandwidth (WAN uplink/downlink)
+   - Current usage (real-time gauge)
+   - Peak usage (today's maximum)
+   - Average usage (24h)
+
+2. Top Bandwidth Users
+   - Table: IP/Hostname, Download, Upload, Total, Percentage
+   - Real-time updates
+   - Click to apply quick rule
+
+3. Traffic Classification
+   - By protocol: HTTP, HTTPS, DNS, P2P, Streaming, Gaming
+   - By priority: High, Medium, Low, Bulk
+   - Pie chart visualization
+
+RULES TAB:
+1. QoS Rules Table
+   - Columns: Name, Source, Destination, Service, Priority, Rate Limit, Status
+   - Sortable and filterable
+   - Enable/disable toggle per rule
+   - Edit/Delete actions
+
+2. Add Rule Dialog
+   - Rule type: Bandwidth Limit, Priority, Guarantee
+   - Match criteria:
+     * Source IP/MAC/Subnet
+     * Destination IP/Subnet
+     * Port/Service (HTTP, HTTPS, SSH, etc.)
+     * Protocol (TCP, UDP, ICMP)
+     * Application (DPI-based, if available)
+   - Action:
+     * Set download limit (kbps/mbps)
+     * Set upload limit
+     * Set priority (1-7, or class names)
+     * Guarantee minimum bandwidth
+   - Schedule (always, time-based, day-of-week)
+
+QUOTAS TAB:
+1. Bandwidth Quotas
+   - Per-device quotas
+   - Per-user quotas
+   - Family quotas (group of devices)
+   - Time-based quotas (daily, weekly, monthly)
+
+2. Quota Configuration
+   - Set quota amount (GB)
+   - Set quota period (day/week/month)
+   - Action on quota exceeded:
+     * Block all traffic
+     * Throttle to X kbps
+     * Send notification only
+   - Quota reset schedule
+   - Rollover unused quota (optional)
+
+3. Quota Usage Dashboard
+   - Cards per device/user showing:
+     * Quota limit
+     * Used amount
+     * Remaining
+     * Progress bar with color coding
+     * Reset date
+   - Warning threshold (notify at 80%, 90%)
+
+USAGE TAB:
+1. Historical Usage
+   - Charts:
+     * Daily usage (last 30 days) as bar chart
+     * Hourly usage (last 24h) as line chart
+     * Weekly usage (last 12 weeks) as area chart
+   - Filter by device, service, direction (up/down)
+   - Export to CSV
+
+2. Usage Statistics
+   - Total transferred this month
+   - Average daily usage
+   - Peak hour (when usage is highest)
+   - Trending applications
+
+MEDIA TAB:
+1. Media Traffic Detection
+   - Streaming services: Netflix, YouTube, Disney+, Twitch, etc.
+   - VoIP: Zoom, Teams, Discord, WhatsApp calls
+   - Gaming: Steam, PlayStation, Xbox Live
+   - Social Media: Facebook, Instagram, TikTok
+
+2. Media-Specific Rules
+   - Quick templates:
+     * Prioritize VoIP over streaming
+     * Throttle streaming during work hours
+     * Limit gaming bandwidth
+   - Per-service bandwidth allocation
+   - Quality-based throttling (4K vs 720p detection)
+
+CLASSES TAB:
+1. Traffic Classes (HTB/CAKE)
+   - Predefined classes:
+     * Realtime (VoIP, gaming): highest priority
+     * Interactive (web browsing, SSH): high priority
+     * Bulk (downloads, updates): low priority
+     * Default: medium priority
+
+2. Class Configuration
+   - Per-class bandwidth allocation (percentage or absolute)
+   - Borrowing (allow class to use unused bandwidth from others)
+   - Ceiling (maximum bandwidth a class can use)
+   - Quantum (packet size for fair queuing)
+
+CLIENTS TAB:
+1. Per-Client Management
+   - Client list with current bandwidth usage
+   - Quick actions:
+     * Set bandwidth limit for client
+     * Apply quota to client
+     * Block client temporarily
+     * Assign to traffic class
+
+SCHEDULES TAB:
+1. Schedule Management
+   - Create time-based rules
+   - Examples:
+     * Business hours (9am-5pm Mon-Fri): prioritize business apps
+     * Evening (6pm-11pm): allow streaming
+     * Late night (11pm-6am): throttle everything
+   - Calendar view of schedules
+   - Conflict detection
+
+SETTINGS TAB:
+1. Global Settings
+   - WAN bandwidth limits (uplink/downlink in Mbps)
+   - QoS algorithm: CAKE, HTB, SFQ, FQ_CODEL
+   - Enable/disable QoS globally
+   - Default traffic class
+   - Bandwidth test (measure actual WAN speed)
+
+2. Advanced Settings
+   - DSCP marking
+   - ECN (Explicit Congestion Notification)
+   - Overhead calculation (for PPPoE, etc.)
+   - Per-packet overhead bytes
+   - Link layer adaptation
+
+TECHNICAL:
+- RPCD: luci.bandwidth-manager
+- Methods: getStats, getRules, addRule, deleteRule, getQuotas, setQuota, getUsage
+- QoS implementation:
+   * tc (traffic control) commands for HTB
+   * cake qdisc for modern QoS
+   * iptables conntrack for usage accounting
+   * nftables meters for rate limiting
+- Database:
+   * SQLite or UCI for rules and quotas
+   * RRD for historical bandwidth data
+   * iptables counters for real-time stats
+
+VISUAL ENHANCEMENTS:
+- Bandwidth gauge charts (animated)
+- Sparklines for trending
+- Color-coded quota bars
+- Responsive rule cards
+```
+
+### 11. Traffic Shaper (luci-app-traffic-shaper)
+
+**Prompt for Claude.ai:**
+
+```
+Create an advanced traffic shaping module with anti-bufferbloat (CAKE):
+
+DESIGN:
+- Title: "Traffic Shaper" with 🚀 icon
+- Technical/advanced focus
+- Stats badges: Active Queues | Avg Latency | Packet Loss | Throughput
+
+OVERVIEW TAB:
+1. Shaper Status
+   - QoS enabled status toggle
+   - Active algorithm (CAKE, HTB, FQ_CODEL)
+   - Shaped interfaces (WAN, LAN)
+   - Current latency (ping to 1.1.1.1)
+
+2. Performance Metrics
+   - Round-trip time (RTT) under load
+   - Buffer size (current vs optimal)
+   - Packet drop rate
+   - Throughput (actual vs configured)
+
+3. Bufferbloat Test
+   - Run DSLReports speed test button
+   - Display results: download, upload, latency, grade
+   - Historical test results chart
+
+CLASSES TAB:
+1. Traffic Classes (HTB hierarchy)
+   - Root class (total bandwidth)
+   - Child classes with priority:
+     * Expedited Forwarding (EF): VoIP, gaming
+     * Assured Forwarding (AF): business apps
+     * Best Effort (BE): web, email
+     * Background (bulk downloads)
+
+2. Class Configuration
+   - Rate (guaranteed bandwidth)
+   - Ceil (maximum bandwidth)
+   - Priority (1-7)
+   - Quantum (packet size)
+   - Burst (allow temporary overage)
+
+RULES TAB:
+1. Classification Rules
+   - Match criteria:
+     * DSCP/TOS field
+     * Port numbers
+     * IP addresses
+     * Protocol
+     * DPI signature
+   - Action: assign to traffic class
+   - Rule priority (1-999)
+
+2. Rule Templates
+   - Predefined rules:
+     * VoIP optimization (SIP, RTP ports)
+     * Gaming optimization (known game servers)
+     * Streaming deprioritization
+     * P2P throttling
+   - One-click apply
+
+STATS TAB:
+1. Queue Statistics
+   - Per-class metrics:
+     * Packets sent
+     * Bytes sent
+     * Drops (overload indicator)
+     * Overlimits (ceiling hits)
+     * Requeues
+   - Real-time and historical charts
+
+2. Interface Statistics
+   - Per-interface counters
+   - Queue depth graphs
+   - Latency measurements (ICMP ping or timestamping)
+
+PRESETS TAB:
+1. QoS Presets
+   - Gaming preset (lowest latency, prioritize gaming ports)
+   - Streaming preset (balance, allow bandwidth for streaming)
+   - Business preset (prioritize VoIP, remote desktop)
+   - Balanced preset (general home use)
+   - Manual preset (custom configuration)
+
+2. Preset Configuration
+   - Select preset from dropdown
+   - Auto-configure all parameters
+   - Show what will change (diff preview)
+   - Apply button
+
+CAKE CONFIGURATION TAB:
+1. CAKE Settings
+   - Bandwidth (uplink/downlink in Mbps)
+   - Overhead:
+     * None
+     * ADSL (with interleaving)
+     * VDSL2
+     * Ethernet
+     * PPPoE
+   - Link layer adaptation:
+     * Ethernet
+     * ATM
+     * PTM
+   - Flows:
+     * Triple-isolate (src IP, dst IP, port)
+     * Dual-srchost
+     * Dual-dsthost
+     * Per-host
+   - Diffserv:
+     * Diffserv4 (4 tins)
+     * Diffserv3 (3 tins)
+     * Besteffort (single queue)
+   - ECN: enable/disable
+   - ACK filter: enable/disable (for slow uplinks)
+
+TECHNICAL:
+- RPCD: luci.traffic-shaper
+- Commands:
+   * tc qdisc add/del/replace
+   * tc class add/del/change
+   * tc filter add/del
+   * cake qdisc configuration
+- Real-time monitoring:
+   * tc -s qdisc show
+   * tc -s class show
+   * Parse output for statistics
+- Latency testing:
+   * ping command with timestamps
+   * Integration with fping or hping3
+
+VISUAL ENHANCEMENTS:
+- Real-time latency graph (live updating)
+- Packet drop rate sparklines
+- Class hierarchy tree view
+- Color-coded classes by priority
+```
+
+### 12. Media Flow (luci-app-media-flow)
+
+**Prompt for Claude.ai:**
+
+```
+Create a media streaming and VoIP traffic detection dashboard:
+
+DESIGN:
+- Title: "Media Monitor" with 🎬 icon
+- Focus on streaming services and video calls
+- Stats badges: Active Streams | VoIP Calls | Bandwidth Used | Services
+
+DASHBOARD TAB:
+1. Active Media Streams
+   - Cards for each active stream:
+     * Service logo (Netflix, YouTube, etc.)
+     * Client device (IP, hostname)
+     * Stream quality estimate (4K, 1080p, 720p, SD)
+     * Current bitrate (Mbps)
+     * Duration
+   - Color-coded by service type (streaming=red, VoIP=green)
+
+2. Service Breakdown
+   - Pie chart: bandwidth by service
+   - Services:
+     * Netflix, Amazon Prime, Disney+, Hulu, HBO Max
+     * YouTube, Twitch, Vimeo
+     * Spotify, Apple Music, Pandora
+     * Zoom, Teams, Meet, Webex
+     * WhatsApp, Telegram, FaceTime
+
+SERVICES TAB:
+1. Streaming Services Grid
+   - Each service as card:
+     * Icon/logo
+     * Total bandwidth used today
+     * Active sessions
+     * Peak quality detected
+     * Average session duration
+   - Click card for details
+
+2. Service History
+   - Per-service usage over time
+   - Quality distribution (how often 4K vs HD vs SD)
+   - Peak viewing hours
+
+CLIENTS TAB:
+1. Device Media Usage
+   - Table: Device, Service, Quality, Bitrate, Duration
+   - Group by device
+   - Show total media consumption per device
+   - Identify heavy streaming users
+
+HISTORY TAB:
+1. Historical Media Activity
+   - Timeline view of all media sessions
+   - Filter by: date range, service, device, quality
+   - Export to CSV
+   - Charts:
+     * Daily streaming hours
+     * Service popularity trends
+     * Quality vs bandwidth correlation
+
+ALERTS TAB:
+1. Media Alerts
+   - Excessive streaming alerts
+   - Quality degradation alerts (4K dropped to 720p)
+   - VoIP quality issues (packet loss, jitter)
+   - New service detection
+   - Unusual patterns (e.g., streaming at 3am)
+
+2. Alert Configuration
+   - Set thresholds for alerts
+   - Notification methods (web UI, email, webhook)
+   - Per-device alert rules
+
+TECHNICAL:
+- RPCD: luci.media-flow
+- DPI integration:
+   * Netifyd for application detection
+   * nDPI library for deep inspection
+   * Signature matching for streaming protocols
+- Quality estimation:
+   * Bitrate analysis (e.g., >15 Mbps = 4K, 5-15 Mbps = 1080p)
+   * DASH/HLS manifest parsing (if accessible)
+- VoIP detection:
+   * RTP/RTCP ports and patterns
+   * SIP signaling detection
+   * WebRTC detection
+
+STREAMING PROTOCOLS:
+- HLS (HTTP Live Streaming)
+- DASH (Dynamic Adaptive Streaming)
+- RTMP (Real-Time Messaging Protocol)
+- RTP (for VoIP)
+- WebRTC (for video calls)
+```
+
+---
+
+## Performance & Services Modules
+
+### 13. CDN Cache (luci-app-cdn-cache)
+
+**Prompt for Claude.ai:**
+
+```
+Create a CDN caching proxy dashboard with bandwidth savings analytics:
+
+DESIGN:
+- Title: "CDN Cache" with 💨 icon
+- Focus on performance and savings
+- Stats badges: Cache Hit Rate | Bandwidth Saved | Cached Objects | Storage Used
+
+OVERVIEW TAB:
+1. Cache Performance
+   - Hit rate percentage (big gauge chart)
+   - Requests today: total, hits, misses
+   - Bandwidth saved estimate (GB and percentage)
+   - Storage usage (used/total)
+
+2. Top Cached Content
+   - Table: URL/domain, Hits, Size, Last Access
+   - Content types breakdown (images, videos, scripts, docs)
+   - Pie chart: cached vs non-cacheable traffic
+
+CACHE TAB:
+1. Cached Objects Browser
+   - List of cached objects:
+     * URL
+     * Content-Type
+     * Size
+     * Expiry
+     * Hit count
+     * Actions (view, purge)
+   - Search and filter
+   - Bulk purge by pattern
+
+2. Cache Statistics
+   - Total objects
+   - Average object size
+   - Largest objects
+   - Most hit objects
+   - Expiring soon count
+
+POLICIES TAB:
+1. Caching Policies
+   - Domains to cache (whitelist)
+   - Domains to never cache (blacklist)
+   - Content types to cache (image/*, video/*, text/css, etc.)
+   - Max object size (MB)
+   - Cache duration (TTL) by content type
+
+2. Cache Rules
+   - Rule editor:
+     * Match URL pattern (regex)
+     * Cache duration override
+     * Cache or bypass decision
+     * Priority (1-100)
+
+STATISTICS TAB:
+1. Performance Metrics
+   - Response time comparison: cache hit vs miss
+   - Bandwidth charts: cached vs origin
+   - Request rate over time
+   - Cache efficiency trends (24h, 7d, 30d)
+
+2. Savings Calculator
+   - Original bandwidth used (without cache)
+   - Bandwidth saved (GB)
+   - Cost savings estimate ($ per GB from ISP)
+   - Response time improvement (ms)
+
+MAINTENANCE TAB:
+1. Cache Maintenance
+   - Purge all button (with confirmation)
+   - Purge by pattern (e.g., *.youtube.com/*)
+   - Purge expired objects
+   - Optimize database (rebuild indexes)
+   - Prewarm cache (prefetch popular URLs)
+
+2. Storage Management
+   - Storage usage breakdown
+   - LRU eviction settings (least recently used)
+   - Max cache size configuration
+   - Storage location (disk, RAM, or hybrid)
+
+SETTINGS TAB:
+1. CDN Cache Configuration
+   - Enable/disable cache
+   - Upstream DNS servers
+   - Proxy port (transparent or explicit)
+   - SSL certificate handling (bump or pass-through)
+   - Logging level
+
+2. Advanced Settings
+   - Negative caching (cache 404s, etc.)
+   - Range request handling
+   - Vary header support
+   - ETag validation
+   - Stale-while-revalidate
+
+TECHNICAL:
+- RPCD: luci.cdn-cache
+- Caching software:
+   * Squid proxy
+   * Nginx caching proxy
+   * Varnish
+   * OpenWrt's own uhttpd with caching module
+- Methods: getStats, getCacheObjects, purge, setPolicies
+- Storage backend: filesystem or database
+- Monitoring: access logs parsing for hit/miss
+
+VISUAL ENHANCEMENTS:
+- Animated gauge for hit rate
+- Sparklines for trending metrics
+- Color-coded savings (green = high savings)
+- Before/after comparison charts
+```
+
+### 14. VHost Manager (luci-app-vhost-manager)
+
+**Prompt for Claude.ai:**
+
+```
+Create a virtual host and reverse proxy manager with auto SSL:
+
+DESIGN:
+- Title: "Virtual Hosts" with 🌍 icon
+- Focus on web hosting and proxying
+- Stats badges: Active VHosts | SSL Certs | Total Requests | Uptime
+
+OVERVIEW TAB:
+1. VHost Summary
+   - Total virtual hosts configured
+   - Active (enabled) vs inactive
+   - SSL-enabled hosts count
+   - Certificate expiry warnings
+
+2. Quick Actions
+   - Add VHost button
+   - Request SSL Certificate button
+   - View Access Logs button
+
+VHOSTS TAB:
+1. Virtual Hosts List
+   - Cards for each vhost:
+     * Domain name
+     * Type (reverse proxy, static site, redirect)
+     * Backend (if proxy)
+     * Status (enabled/disabled)
+     * SSL status (valid, expiring, none)
+     * Actions (edit, disable, delete, view logs)
+
+2. Add/Edit VHost Dialog
+   - Domain name input (auto-validate DNS)
+   - VHost type:
+     * Reverse Proxy (proxy to backend server)
+     * Static Site (serve from directory)
+     * Redirect (301/302 to another URL)
+   - Backend configuration (for proxy):
+     * Backend URL (http://192.168.1.10:8080)
+     * Protocol (HTTP, HTTPS, WebSocket)
+     * Load balancing (if multiple backends)
+   - SSL configuration:
+     * Auto (Let's Encrypt via ACME)
+     * Manual (upload cert + key)
+     * None (HTTP only)
+   - Advanced:
+     * Custom headers
+     * Access control (allow/deny IPs)
+     * Request rewriting
+
+INTERNAL TAB:
+1. Internal Services
+   - Predefined proxies for common services:
+     * LuCI itself
+     * Netdata
+     * CrowdSec dashboard
+     * RustDesk
+     * Custom apps
+   - One-click enable proxy for internal service
+
+CERTIFICATES TAB:
+1. SSL Certificate Management
+   - List of certificates:
+     * Domain
+     * Issuer (Let's Encrypt, self-signed, CA)
+     * Valid From - Valid To
+     * Days until expiry
+     * Actions (renew, revoke, download, delete)
+
+2. ACME Configuration
+   - ACME provider (Let's Encrypt production/staging, ZeroSSL, BuyPass)
+   - Email for notifications
+   - Challenge type:
+     * HTTP-01 (port 80 validation)
+     * DNS-01 (TXT record validation)
+     * TLS-ALPN-01 (port 443 validation)
+   - Auto-renewal toggle (renew when <30 days remaining)
+
+3. Request Certificate
+   - Domain input (supports wildcards with DNS-01)
+   - Validation method selector
+   - Issue button (shows progress)
+
+SSL TAB:
+1. SSL/TLS Settings
+   - Global SSL settings:
+     * Minimum TLS version (1.0, 1.1, 1.2, 1.3)
+     * Cipher suites
+     * HSTS (HTTP Strict Transport Security)
+     * OCSP stapling
+   - Per-vhost overrides
+
+REDIRECTS TAB:
+1. Redirect Rules
+   - Simple redirects:
+     * From domain/path
+     * To URL
+     * Type (301 permanent, 302 temporary, 307 temporary preserve method)
+   - Wildcard redirects
+   - Regex-based redirects
+
+LOGS TAB:
+1. Access Logs
+   - Combined access log for all vhosts
+   - Filter by vhost, IP, status code, date
+   - Columns: Timestamp, IP, Method, Path, Status, Bytes, Referrer, User-Agent
+   - Real-time log streaming
+   - Export to CSV
+
+2. Error Logs
+   - Proxy errors (backend unreachable, timeout)
+   - SSL errors (cert invalid, expired)
+   - Configuration errors
+
+TECHNICAL:
+- RPCD: luci.vhost-manager
+- Reverse proxy software:
+   * Nginx
+   * HAProxy
+   * Caddy (for auto SSL)
+   * Apache
+- ACME client:
+   * acme.sh script
+   * Certbot
+   * Caddy built-in ACME
+- Methods: getVHosts, addVHost, deleteVHost, requestCertificate, getLogs
+
+INTEGRATION:
+- DNS validation via API (Cloudflare, etc.)
+- Dynamic DNS updates
+- Firewall port opening (80, 443)
+- Let's Encrypt rate limit handling
+```
+
+### 15. KSM Manager (luci-app-ksm-manager)
+
+**Prompt for Claude.ai:**
+
+```
+Create a cryptographic key and secrets management dashboard with HSM support:
+
+DESIGN:
+- Title: "Key Management" with 🔐 icon
+- Security-focused, professional aesthetic
+- Stats badges: Total Keys | Active Keys | Certificates | Secrets
+
+OVERVIEW TAB:
+1. Key Management Status
+   - Total keys managed
+   - Key types breakdown (RSA, ECDSA, ED25519)
+   - Expiring keys (next 30 days)
+   - HSM status (if connected)
+
+2. Recent Activity
+   - Last key operations: generated, used, rotated, revoked
+   - Audit log (last 20 entries)
+
+KEYS TAB:
+1. Cryptographic Keys List
+   - Table: Key ID, Type, Size, Usage, Created, Expires, Status
+   - Key types:
+     * Signing keys (for code, documents)
+     * Encryption keys (for data at rest)
+     * Authentication keys (SSH, TLS client)
+   - Actions: view, export public, rotate, revoke, delete
+
+2. Generate Key Dialog
+   - Algorithm selection:
+     * RSA (2048, 3072, 4096 bit)
+     * ECDSA (P-256, P-384, P-521)
+     * ED25519
+   - Usage flags:
+     * Digital signature
+     * Key encipherment
+     * Data encipherment
+   - Storage:
+     * Software (filesystem)
+     * HSM (if available)
+     * TPM (if available)
+   - Passphrase protection (optional)
+
+HSM TAB:
+1. Hardware Security Module
+   - HSM connection status
+   - HSM info: vendor, model, firmware version
+   - Available key slots
+   - HSM operations:
+     * Initialize HSM
+     * Generate key on HSM
+     * Import key to HSM
+     * Backup HSM
+
+CERTIFICATES TAB:
+1. X.509 Certificate Management
+   - List: Subject, Issuer, Valid From/To, Serial, Fingerprint
+   - Certificate chain view
+   - Actions: view details, export (PEM/DER), revoke
+
+2. Certificate Request (CSR)
+   - Generate CSR for signing by CA
+   - Fields: CN, O, OU, C, ST, L, Email
+   - Key usage extensions
+   - Export CSR for submission to CA
+
+3. Self-Signed Certificates
+   - Quick generate self-signed cert
+   - Validity period selection
+   - Subject alternative names (SANs)
+
+SECRETS TAB:
+1. Secret Storage (Vault)
+   - Key-value secret store
+   - Secrets list: Name, Type, Created, Last Accessed
+   - Secret types:
+     * Password
+     * API key
+     * Token
+     * Connection string
+   - Encrypted at rest
+   - Access control (which users/apps can access)
+
+2. Add Secret Dialog
+   - Secret name (path-based: db/prod/password)
+   - Secret value (masked input)
+   - TTL (time-to-live, auto-expire)
+   - Version control (keep old versions)
+
+SSH TAB:
+1. SSH Key Management
+   - SSH key pairs list
+   - Generate SSH key (RSA, ED25519, ECDSA)
+   - Import existing key
+   - Export public key (for authorized_keys)
+   - Authorized keys management (who can SSH in)
+
+AUDIT TAB:
+1. Audit Log
+   - All key operations logged:
+     * Generated, imported, exported, used, rotated, revoked, deleted
+   - Timestamp, user, operation, key ID, result
+   - Filter by: date range, operation type, key ID, user
+   - Export audit log
+
+SETTINGS TAB:
+1. KSM Configuration
+   - Key storage location
+   - Default key algorithm and size
+   - Auto-rotation policy (rotate keys every X days)
+   - Backup location and schedule
+   - HSM connection settings (if supported)
+
+TECHNICAL:
+- RPCD: luci.ksm-manager
+- Key storage:
+   * OpenSSL for key operations
+   * GnuPG for PGP keys
+   * SSH-keygen for SSH keys
+   * HSM integration via PKCS#11
+- Secret encryption:
+   * Encrypt secrets with master key
+   * Master key derived from passphrase or stored in HSM
+- Methods: listKeys, generateKey, exportKey, importKey, listSecrets, addSecret, getSecret
+
+SECURITY:
+- All secrets encrypted at rest
+- Audit logging of all operations
+- Access control (role-based)
+- Secure key deletion (overwrite before delete)
+```
+
+---
+
+## Common UI Patterns Across All Modules
+
+### Global Design Consistency
+
+**All modules MUST include:**
+
+1. **Page Header Pattern**
+   ```javascript
+   E('div', { 'class': 'sh-page-header' }, [
+       E('div', {}, [
+           E('h2', { 'class': 'sh-page-title' }, [
+               E('span', { 'class': 'sh-page-title-icon' }, '[ICON]'),
+               '[MODULE TITLE]'
+           ]),
+           E('p', { 'class': 'sh-page-subtitle' }, '[DESCRIPTION]')
+       ]),
+       E('div', { 'class': 'sh-stats-grid' }, [
+           // 4 stat badges minimum
+       ])
+   ])
+   ```
+
+2. **Stats Badges** (130px minimum, monospace values)
+   ```javascript
+   E('div', { 'class': 'sh-stat-badge' }, [
+       E('div', { 'class': 'sh-stat-value' }, '[VALUE]'),
+       E('div', { 'class': 'sh-stat-label' }, '[LABEL]')
+   ])
+   ```
+
+3. **Filter Tabs** (for categorization)
+   ```javascript
+   E('div', { 'class': 'sh-filter-tabs' }, [
+       E('div', { 'class': 'sh-filter-tab active', 'data-filter': 'all' }, [
+           E('span', { 'class': 'sh-tab-icon' }, '[ICON]'),
+           E('span', { 'class': 'sh-tab-label' }, '[LABEL]')
+       ])
+   ])
+   ```
+
+4. **Cards with Color Borders**
+   ```javascript
+   E('div', { 'class': 'sh-card sh-card-success' }, [
+       E('div', { 'class': 'sh-card-header' }, [
+           E('h3', { 'class': 'sh-card-title' }, '[TITLE]')
+       ]),
+       E('div', { 'class': 'sh-card-body' }, [
+           // Content
+       ])
+   ])
+   ```
+
+5. **Gradient Buttons**
+   ```javascript
+   E('button', { 'class': 'sh-btn sh-btn-primary' }, '[ACTION]')
+   ```
+
+6. **Loading States**
+   - Skeleton screens while fetching data
+   - Spinner for button actions
+   - Progress bars for long operations
+
+7. **Error Handling**
+   - User-friendly error messages
+   - Retry buttons
+   - Fallback content
+
+8. **Responsive Design**
+   - Mobile-first approach
+   - Cards stack on mobile
+   - Stats grid adapts (130px minimum)
+   - Tables become scrollable or card-based
+
+---
+
+## How to Use These Prompts
+
+### Step 1: Select Module
+Choose the module you want to regenerate/implement from the list above.
+
+### Step 2: Copy Full Prompt
+Copy the entire prompt for that module (from "Create a..." to "VISUAL ENHANCEMENTS:").
+
+### Step 3: Provide to Claude.ai
+Paste the prompt into Claude.ai (claude.ai conversation) with additional context:
+
+```
+I need you to implement [MODULE NAME] for OpenWrt LuCI.
+
+IMPORTANT CONSTRAINTS:
+- OpenWrt uses LuCI framework (not React/Vue)
+- JavaScript uses L.view pattern (not ES6 modules)
+- Backend is RPCD (shell scripts) communicating via ubus
+- CSS must use variables from common.css
+- All code must be production-ready
+- Follow the design system exactly
+
+Here's the complete specification:
+
+[PASTE PROMPT HERE]
+
+Please provide:
+1. Complete JavaScript view file
+2. RPCD backend script
+3. Any required CSS
+4. ACL configuration
+5. Menu configuration JSON
+
+Make sure all code matches the live demo at secubox.cybermood.eu
+```
+
+### Step 4: Iterate
+If needed, provide screenshots from the live demo or request refinements to match the exact look and feel.
+
+---
+
+## Additional Resources
+
+- **Live Demo:** https://secubox.cybermood.eu
+- **Design System:** DEVELOPMENT-GUIDELINES.md
+- **Quick Start:** QUICK-START.md
+- **Build Guide:** CLAUDE.md
+
+---
+
+**Document Version:** 1.0.0
+**Last Updated:** 2025-12-27
+**Maintainer:** CyberMind.fr
diff --git a/docs/index.md b/docs/index.md
new file mode 100644
index 00000000..2d08fa4c
--- /dev/null
+++ b/docs/index.md
@@ -0,0 +1,178 @@
+# SecuBox Documentation
+
+**Version:** 1.0.0
+**Last Updated:** 2025-12-28
+**Project:** OpenWrt LuCI Security & Management Suite
+
+Welcome to the SecuBox documentation! This comprehensive guide covers all aspects of developing, deploying, and maintaining SecuBox modules.
+
+---
+
+## 🏗️ What is SecuBox?
+
+SecuBox is a comprehensive **security and network management suite for OpenWrt** consisting of **15 LuCI application modules** that provide:
+
+- **Security Monitoring** - CrowdSec intrusion prevention, Netdata metrics
+- **Network Intelligence** - Deep packet inspection, traffic classification
+- **Access Control** - Captive portal, authentication, VPN management
+- **Performance Optimization** - QoS, bandwidth management, caching
+- **System Administration** - Centralized dashboard, service management
+
+---
+
+## 🚀 Quick Navigation
+
+<div class="grid cards" markdown>
+
+-   :fontawesome-solid-rocket:{ .lg .middle } **Getting Started**
+
+    ---
+
+    New to SecuBox? Start here!
+
+    [:octicons-arrow-right-24: Quick Start Guide](quick-start.md)
+
+-   :fontawesome-solid-book:{ .lg .middle } **Development Guide**
+
+    ---
+
+    Complete development reference with architecture diagrams
+
+    [:octicons-arrow-right-24: Development Guidelines](development-guidelines.md)
+
+-   :fontawesome-solid-code:{ .lg .middle } **Code Templates**
+
+    ---
+
+    Working examples and implementation patterns
+
+    [:octicons-arrow-right-24: Code Templates](code-templates.md)
+
+-   :fontawesome-solid-list-check:{ .lg .middle } **Validation**
+
+    ---
+
+    Module validation and testing workflows
+
+    [:octicons-arrow-right-24: Validation Guide](validation-guide.md)
+
+</div>
+
+---
+
+## 📦 15 Module Suite
+
+### Core Control (2 modules)
+- **SecuBox Central Hub** - Main dashboard and module management
+- **System Hub** - System administration (health, services, logs, backup, etc.)
+
+### Security & Monitoring (2 modules)
+- **CrowdSec Dashboard** - Intrusion prevention and threat intelligence
+- **Netdata Dashboard** - Real-time system monitoring
+
+### Network Intelligence (2 modules)
+- **Netifyd Dashboard** - Deep packet inspection and classification
+- **Network Modes** - Network profile management
+
+### VPN & Access Control (3 modules)
+- **WireGuard Dashboard** - VPN tunnel management
+- **Client Guardian** - Network access control and captive portal
+- **Auth Guardian** - Authentication system
+
+### Bandwidth & Traffic (2 modules)
+- **Bandwidth Manager** - QoS and bandwidth quotas
+- **Traffic Shaper** - Advanced traffic shaping
+
+### Performance & Services (2 modules)
+- **CDN Cache** - Content delivery network proxy cache
+- **VHost Manager** - Virtual host configuration
+
+### System Optimization (2 modules)
+- **Media Flow** - Media traffic optimization
+- **KSM Manager** - Kernel same-page merging
+
+[View Module Status →](module-status.md){ .md-button .md-button--primary }
+
+---
+
+## 🎨 Design System
+
+SecuBox uses a modern, consistent design system:
+
+- **Color Palette:** Indigo/Violet gradients with dark mode support
+- **Typography:** Inter (text) + JetBrains Mono (code/values)
+- **Components:** Cards, badges, buttons with gradient effects
+- **Layout:** Responsive grid system
+
+See the [Design System section](development-guidelines.md#design-system--ui-guidelines) for complete specifications.
+
+---
+
+## 🔧 Development Workflow
+
+!!! warning "Critical Rules"
+    1. **RPCD Naming:** Script name must match ubus object (`luci.module-name`)
+    2. **Menu Paths:** Must match view file locations exactly
+    3. **Permissions:** 755 for RPCD scripts, 644 for CSS/JS
+    4. **Validation:** Always run `./secubox-tools/validate-modules.sh` before commit
+
+### Development Tools
+
+```bash
+# Validate all modules (7 automated checks)
+./secubox-tools/validate-modules.sh
+
+# Fix file permissions automatically
+./secubox-tools/fix-permissions.sh --local
+
+# Build packages locally
+./secubox-tools/local-build.sh build luci-app-module-name
+```
+
+[Complete Development Workflow →](development-guidelines.md#deployment-procedures){ .md-button }
+
+---
+
+## 🌐 Live Demo
+
+Experience SecuBox in action:
+
+**Production Demo:** [https://secubox.cybermood.eu](https://secubox.cybermood.eu)
+
+- Main dashboard: `/`
+- System Hub: `/system-hub`
+- CrowdSec: `/crowdsec`
+- All 15 modules accessible
+
+---
+
+## 📚 Documentation Sections
+
+### For New Contributors
+1. [Quick Start Guide](quick-start.md) - Essential rules and commands
+2. [Development Guidelines](development-guidelines.md) - Complete reference
+3. [CLAUDE.md](claude.md) - Build system and architecture
+
+### For AI-Assisted Development
+1. [Module Implementation Guide](module-implementation-guide.md) - Step-by-step workflow
+2. [Feature Regeneration Prompts](feature-regeneration-prompts.md) - AI prompts for all modules
+3. [Code Templates](code-templates.md) - Implementation patterns
+
+---
+
+## 📞 Support & Resources
+
+- **GitHub Repository:** [gkerma/secubox-openwrt](https://github.com/gkerma/secubox-openwrt)
+- **Documentation Issues:** [GitHub Issues](https://github.com/gkerma/secubox-openwrt/issues)
+- **Technical Support:** support@cybermind.fr
+- **Company:** CyberMind.fr
+
+---
+
+## 📝 License
+
+Apache-2.0
+
+---
+
+<small>**Last Updated:** 2025-12-28 | **Maintainer:** CyberMind.fr</small>
diff --git a/docs/luci-development-reference.md b/docs/luci-development-reference.md
new file mode 100644
index 00000000..d7b45677
--- /dev/null
+++ b/docs/luci-development-reference.md
@@ -0,0 +1,1196 @@
+# LuCI Development Reference Guide
+
+**Version:** 1.0.0  
+**Last Updated:** 2025-12-28  
+**Status:** Active
+
+
+**Version:** 1.0.0  
+**Last Updated:** 2025-12-28  
+**Status:** Active  
+**Based on:** luci-app-secubox and luci-app-system-hub implementations  
+**Target Audience:** Claude.ai and developers working on OpenWrt LuCI applications
+
+---
+
+## See Also
+
+- **Design & Standards:** [DEVELOPMENT-GUIDELINES.md](development-guidelines.md)
+- **Quick Commands:** [QUICK-START.md](quick-start.md)
+- **Automation Briefing:** [CODEX.md](codex.md)
+- **Code Templates:** [CODE-TEMPLATES.md](code-templates.md)
+
+This document captures critical patterns, best practices, and common pitfalls discovered during the development of SecuBox LuCI applications. Use this as a validation reference for all future LuCI application development.
+
+---
+
+## Table of Contents
+
+1. [ubus and RPC Fundamentals](#ubus-and-rpc-fundamentals)
+2. [RPCD Backend Patterns](#rpcd-backend-patterns)
+3. [LuCI API Module Patterns](#luci-api-module-patterns)
+4. [LuCI View Import Patterns](#luci-view-import-patterns)
+5. [ACL Permission Structure](#acl-permission-structure)
+6. [Data Structure Conventions](#data-structure-conventions)
+7. [Common Errors and Solutions](#common-errors-and-solutions)
+8. [Validation Checklist](#validation-checklist)
+9. [Testing and Deployment](#testing-and-deployment)
+
+---
+
+## ubus and RPC Fundamentals
+
+### What is ubus?
+
+**ubus** (OpenWrt micro bus architecture) is OpenWrt's inter-process communication (IPC) system. It enables:
+- RPC (Remote Procedure Call) between processes
+- Web interface (LuCI) to backend service communication
+- Command-line interaction via `ubus call`
+
+### ubus Object Naming Convention
+
+**CRITICAL RULE**: All LuCI application ubus objects MUST use the `luci.` prefix.
+
+```javascript
+// ✅ CORRECT
+object: 'luci.system-hub'
+object: 'luci.cdn-cache'
+object: 'luci.wireguard-dashboard'
+
+// ❌ WRONG
+object: 'system-hub'
+object: 'systemhub'
+object: 'cdn-cache'
+```
+
+**Why?** LuCI expects objects under the `luci.*` namespace for web applications. Without this prefix:
+- ACL permissions won't match
+- RPCD won't route calls correctly
+- Browser console shows: `RPC call to system-hub/status failed with error -32000: Object not found`
+
+### RPCD Script Naming MUST Match ubus Object
+
+The RPCD script filename MUST exactly match the ubus object name:
+
+```bash
+# If JavaScript declares:
+# object: 'luci.system-hub'
+
+# Then RPCD script MUST be named:
+/usr/libexec/rpcd/luci.system-hub
+
+# NOT:
+/usr/libexec/rpcd/system-hub
+/usr/libexec/rpcd/luci-system-hub
+```
+
+**Validation Command**:
+```bash
+# Check JavaScript files for ubus object names
+grep -r "object:" luci-app-*/htdocs --include="*.js"
+
+# Verify RPCD script exists with matching name
+ls luci-app-*/root/usr/libexec/rpcd/
+```
+
+### ubus Call Types
+
+**Read Operations** (GET-like):
+- `status` - Get current state
+- `get_*` - Retrieve data (e.g., `get_health`, `get_settings`)
+- `list_*` - Enumerate items (e.g., `list_services`)
+
+**Write Operations** (POST-like):
+- `save_*` - Persist configuration (e.g., `save_settings`)
+- `*_action` - Perform actions (e.g., `service_action`)
+- `backup`, `restore`, `reboot` - System modifications
+
+**ACL Mapping**:
+- Read operations → `"read"` section in ACL
+- Write operations → `"write"` section in ACL
+
+---
+
+## RPCD Backend Patterns
+
+### Shell Script Structure
+
+RPCD backends are executable shell scripts that:
+1. Parse `$1` for the action (`list` or `call`)
+2. Parse `$2` for the method name (if `call`)
+3. Read JSON input from stdin (for methods with parameters)
+4. Output JSON to stdout
+5. Exit with status 0 on success, non-zero on error
+
+### Standard Template
+
+```bash
+#!/bin/sh
+# RPCD Backend: luci.system-hub
+# Version: 0.1.0
+
+# Source JSON shell helper
+. /usr/share/libubox/jshn.sh
+
+case "$1" in
+    list)
+        # List all available methods and their parameters
+        echo '{
+            "status": {},
+            "get_health": {},
+            "service_action": { "service": "string", "action": "string" },
+            "save_settings": {
+                "auto_refresh": 0,
+                "health_check": 0,
+                "refresh_interval": 0
+            }
+        }'
+        ;;
+    call)
+        case "$2" in
+            status)
+                status
+                ;;
+            get_health)
+                get_health
+                ;;
+            service_action)
+                # Read JSON input from stdin
+                read -r input
+                json_load "$input"
+                json_get_var service service
+                json_get_var action action
+                service_action "$service" "$action"
+                ;;
+            save_settings)
+                read -r input
+                json_load "$input"
+                json_get_var auto_refresh auto_refresh
+                json_get_var health_check health_check
+                json_get_var refresh_interval refresh_interval
+                save_settings "$auto_refresh" "$health_check" "$refresh_interval"
+                ;;
+            *)
+                echo '{"error": "Method not found"}'
+                exit 1
+                ;;
+        esac
+        ;;
+esac
+```
+
+### JSON Output with jshn.sh
+
+**jshn.sh** provides shell functions for JSON manipulation:
+
+```bash
+# Initialize JSON object
+json_init
+
+# Add simple values
+json_add_string "hostname" "openwrt"
+json_add_int "uptime" 86400
+json_add_boolean "running" 1
+
+# Add nested object
+json_add_object "cpu"
+json_add_int "usage" 25
+json_add_string "status" "ok"
+json_close_object
+
+# Add array
+json_add_array "services"
+json_add_string "" "network"
+json_add_string "" "firewall"
+json_close_array
+
+# Output JSON to stdout
+json_dump
+```
+
+**Common Functions**:
+- `json_init` - Start new JSON object
+- `json_add_string "key" "value"` - Add string
+- `json_add_int "key" 123` - Add integer
+- `json_add_boolean "key" 1` - Add boolean (0 or 1)
+- `json_add_object "key"` - Start nested object
+- `json_close_object` - End nested object
+- `json_add_array "key"` - Start array
+- `json_close_array` - End array
+- `json_dump` - Output JSON to stdout
+
+### Error Handling
+
+Always validate inputs and return meaningful errors:
+
+```bash
+service_action() {
+    local service="$1"
+    local action="$2"
+
+    # Validate service name
+    if [ -z "$service" ]; then
+        json_init
+        json_add_boolean "success" 0
+        json_add_string "error" "Service name is required"
+        json_dump
+        return 1
+    fi
+
+    # Validate action
+    case "$action" in
+        start|stop|restart|enable|disable)
+            ;;
+        *)
+            json_init
+            json_add_boolean "success" 0
+            json_add_string "error" "Invalid action: $action"
+            json_dump
+            return 1
+            ;;
+    esac
+
+    # Perform action
+    /etc/init.d/"$service" "$action" >/dev/null 2>&1
+
+    if [ $? -eq 0 ]; then
+        json_init
+        json_add_boolean "success" 1
+        json_add_string "message" "Service $service $action successful"
+        json_dump
+    else
+        json_init
+        json_add_boolean "success" 0
+        json_add_string "error" "Service $service $action failed"
+        json_dump
+        return 1
+    fi
+}
+```
+
+### UCI Integration
+
+For persistent configuration, use UCI (Unified Configuration Interface):
+
+```bash
+save_settings() {
+    local auto_refresh="$1"
+    local health_check="$2"
+    local refresh_interval="$3"
+
+    # Create/update UCI config
+    uci set system-hub.general=general
+    uci set system-hub.general.auto_refresh="$auto_refresh"
+    uci set system-hub.general.health_check="$health_check"
+    uci set system-hub.general.refresh_interval="$refresh_interval"
+    uci commit system-hub
+
+    json_init
+    json_add_boolean "success" 1
+    json_add_string "message" "Settings saved successfully"
+    json_dump
+}
+
+get_settings() {
+    # Load UCI config
+    if [ -f "/etc/config/system-hub" ]; then
+        . /lib/functions.sh
+        config_load system-hub
+    fi
+
+    json_init
+    json_add_object "general"
+
+    # Get value or use default
+    config_get auto_refresh general auto_refresh "1"
+    json_add_boolean "auto_refresh" "${auto_refresh:-1}"
+
+    config_get refresh_interval general refresh_interval "30"
+    json_add_int "refresh_interval" "${refresh_interval:-30}"
+
+    json_close_object
+    json_dump
+}
+```
+
+### Performance Tips
+
+1. **Cache expensive operations**: Don't re-read `/proc` files multiple times
+2. **Use command substitution efficiently**:
+   ```bash
+   # Good
+   uptime=$(cat /proc/uptime | cut -d' ' -f1)
+
+   # Better
+   read uptime _ < /proc/uptime
+   uptime=${uptime%.*}
+   ```
+3. **Avoid external commands when possible**:
+   ```bash
+   # Slow
+   count=$(ls /etc/init.d | wc -l)
+
+   # Fast
+   count=0
+   for file in /etc/init.d/*; do
+       [ -f "$file" ] && count=$((count + 1))
+   done
+   ```
+
+---
+
+## LuCI API Module Patterns
+
+### CRITICAL: Use baseclass.extend()
+
+**RULE**: LuCI API modules MUST use `baseclass.extend()` pattern.
+
+```javascript
+'use strict';
+'require baseclass';
+'require rpc';
+
+// Declare RPC methods
+var callStatus = rpc.declare({
+    object: 'luci.system-hub',
+    method: 'status',
+    expect: {}
+});
+
+var callGetHealth = rpc.declare({
+    object: 'luci.system-hub',
+    method: 'get_health',
+    expect: {}
+});
+
+var callSaveSettings = rpc.declare({
+    object: 'luci.system-hub',
+    method: 'save_settings',
+    params: ['auto_refresh', 'health_check', 'refresh_interval'],
+    expect: {}
+});
+
+// ✅ CORRECT: Use baseclass.extend()
+return baseclass.extend({
+    getStatus: callStatus,
+    getHealth: callGetHealth,
+    saveSettings: callSaveSettings
+});
+
+// ❌ WRONG: Do NOT use these patterns
+return baseclass.singleton({...});  // Breaks everything!
+return {...};  // Plain object doesn't work
+```
+
+**Why baseclass.extend()?**
+- LuCI's module system expects class-based modules
+- Views import with `'require module/api as API'` which auto-instantiates
+- `baseclass.extend()` creates a proper class constructor
+- `baseclass.singleton()` breaks the instantiation mechanism
+- Plain objects don't support LuCI's module lifecycle
+
+### rpc.declare() Parameters
+
+```javascript
+var callMethodName = rpc.declare({
+    object: 'luci.module-name',     // ubus object name (MUST start with luci.)
+    method: 'method_name',          // RPCD method name
+    params: ['param1', 'param2'],   // Optional: parameter names (order matters!)
+    expect: {}                      // Expected return structure (or { key: [] } for arrays)
+});
+```
+
+**Parameter Order Matters**:
+```javascript
+// RPCD expects parameters in this exact order
+var callSaveSettings = rpc.declare({
+    object: 'luci.system-hub',
+    method: 'save_settings',
+    params: ['auto_refresh', 'health_check', 'debug_mode', 'refresh_interval'],
+    expect: {}
+});
+
+// JavaScript call MUST pass parameters in same order
+API.saveSettings(1, 1, 0, 30);  // auto_refresh=1, health_check=1, debug_mode=0, refresh_interval=30
+```
+
+### expect Parameter Patterns
+
+```javascript
+// Method returns single object
+expect: {}
+
+// Method returns array at top level
+expect: { services: [] }
+
+// Method returns specific structure
+expect: {
+    services: [],
+    count: 0
+}
+```
+
+### Error Handling in API Module
+
+API methods return Promises. Handle errors in views:
+
+```javascript
+return API.getHealth().then(function(data) {
+    if (!data || typeof data !== 'object') {
+        console.error('Invalid health data:', data);
+        return null;
+    }
+    return data;
+}).catch(function(err) {
+    console.error('Failed to load health data:', err);
+    ui.addNotification(null, E('p', {}, 'Failed to load health data'), 'error');
+    return null;
+});
+```
+
+---
+
+## LuCI View Import Patterns
+
+### CRITICAL: Use 'require ... as VAR' for APIs
+
+**RULE**: When importing API modules, use the `'require ... as VAR'` pattern at the top of the file.
+
+```javascript
+// ✅ CORRECT: Auto-instantiates the class
+'require system-hub/api as API';
+
+return L.view.extend({
+    load: function() {
+        return API.getHealth();  // API is already instantiated
+    }
+});
+
+// ❌ WRONG: Returns class constructor, not instance
+var api = L.require('system-hub.api');
+api.getHealth();  // ERROR: api.getHealth is not a function
+```
+
+**Why?**
+- `'require module/path as VAR'` (with forward slashes) auto-instantiates classes
+- `L.require('module.path')` (with dots) returns raw class constructor
+- API modules extend `baseclass`, which needs instantiation
+- LuCI's module loader handles instantiation when using the `as VAR` pattern
+
+### Standard View Structure
+
+```javascript
+'use strict';
+'require view';
+'require form';
+'require ui';
+'require system-hub/api as API';
+
+return L.view.extend({
+    load: function() {
+        // Load data needed for rendering
+        return Promise.all([
+            API.getHealth(),
+            API.getStatus()
+        ]);
+    },
+
+    render: function(data) {
+        var health = data[0];
+        var status = data[1];
+
+        // Create UI elements
+        var container = E('div', { 'class': 'cbi-map' }, [
+            E('h2', {}, 'Dashboard'),
+            // ... more elements
+        ]);
+
+        return container;
+    },
+
+    handleSave: null,  // Disable save button
+    handleSaveApply: null,  // Disable save & apply button
+    handleReset: null  // Disable reset button
+});
+```
+
+### Import Patterns Summary
+
+```javascript
+// Core LuCI modules (always with quotes)
+'require view';
+'require form';
+'require ui';
+'require rpc';
+'require baseclass';
+
+// Custom API modules (use 'as VAR' for auto-instantiation)
+'require system-hub/api as API';
+'require cdn-cache/api as CdnAPI';
+
+// Access global L object (no require)
+L.resolveDefault(...)
+L.Poll.add(...)
+L.ui.addNotification(...)
+```
+
+---
+
+## ACL Permission Structure
+
+### File Location
+
+ACL files are located in:
+```
+/usr/share/rpcd/acl.d/luci-app-<module-name>.json
+```
+
+In source tree:
+```
+luci-app-<module-name>/root/usr/share/rpcd/acl.d/luci-app-<module-name>.json
+```
+
+### Standard ACL Template
+
+```json
+{
+    "luci-app-module-name": {
+        "description": "Module Name - Description",
+        "read": {
+            "ubus": {
+                "luci.module-name": [
+                    "status",
+                    "get_system_info",
+                    "get_health",
+                    "list_services",
+                    "get_logs",
+                    "get_storage",
+                    "get_settings"
+                ]
+            }
+        },
+        "write": {
+            "ubus": {
+                "luci.module-name": [
+                    "service_action",
+                    "backup_config",
+                    "restore_config",
+                    "reboot",
+                    "save_settings"
+                ]
+            }
+        }
+    }
+}
+```
+
+### Read vs Write Classification
+
+**Read Operations** (no system modification):
+- `status` - Get current state
+- `get_*` - Retrieve data (system info, health, settings, logs, storage)
+- `list_*` - Enumerate items (services, interfaces, etc.)
+
+**Write Operations** (modify system state):
+- `*_action` - Perform actions (start/stop services, etc.)
+- `save_*` - Persist configuration changes
+- `backup`, `restore` - System backup/restore
+- `reboot`, `shutdown` - System control
+
+### Common ACL Errors
+
+**Error**: `Access denied` or RPC error `-32002`
+
+**Cause**: Method not listed in ACL, or listed in wrong section (read vs write)
+
+**Solution**:
+1. Identify if method is read or write operation
+2. Add method name to correct section in ACL
+3. Restart RPCD: `/etc/init.d/rpcd restart`
+
+**Validation**:
+```bash
+# Check if ACL file is valid JSON
+jsonlint /usr/share/rpcd/acl.d/luci-app-system-hub.json
+
+# List all ubus objects and methods
+ubus list luci.system-hub
+
+# Test method with ubus call
+ubus call luci.system-hub get_health
+```
+
+---
+
+## Data Structure Conventions
+
+### Health Metrics Structure (system-hub v0.1.0)
+
+Based on extensive iteration, this structure provides clarity and consistency:
+
+```json
+{
+    "cpu": {
+        "usage": 25,
+        "status": "ok",
+        "load_1m": "0.25",
+        "load_5m": "0.30",
+        "load_15m": "0.28",
+        "cores": 4
+    },
+    "memory": {
+        "total_kb": 4096000,
+        "free_kb": 2048000,
+        "available_kb": 3072000,
+        "used_kb": 1024000,
+        "buffers_kb": 512000,
+        "cached_kb": 1536000,
+        "usage": 25,
+        "status": "ok"
+    },
+    "disk": {
+        "total_kb": 30408704,
+        "used_kb": 5447680,
+        "free_kb": 24961024,
+        "usage": 19,
+        "status": "ok"
+    },
+    "temperature": {
+        "value": 45,
+        "status": "ok"
+    },
+    "network": {
+        "wan_up": true,
+        "status": "ok"
+    },
+    "services": {
+        "running": 35,
+        "failed": 2
+    },
+    "score": 92,
+    "timestamp": "2025-12-26 10:30:00",
+    "recommendations": [
+        "2 service(s) enabled but not running. Check service status."
+    ]
+}
+```
+
+**Key Principles**:
+1. **Nested objects** for related metrics (cpu, memory, disk, etc.)
+2. **Consistent structure**: Each metric has `usage` (percentage) and `status` (ok/warning/critical)
+3. **Raw values + computed values**: Provide both (e.g., `used_kb` AND `usage` percentage)
+4. **Status thresholds**: ok (< warning), warning (warning-critical), critical (≥ critical)
+5. **Overall score**: Single 0-100 health score for dashboard
+6. **Dynamic recommendations**: Array of actionable alerts based on thresholds
+
+### Status Values
+
+Use consistent status strings across all metrics:
+- `"ok"` - Normal operation (green)
+- `"warning"` - Approaching threshold (orange)
+- `"critical"` - Exceeded threshold (red)
+- `"error"` - Unable to retrieve metric
+- `"unknown"` - Metric not available
+
+### Timestamp Format
+
+Use ISO 8601 or consistent local format:
+```bash
+timestamp="$(date '+%Y-%m-%d %H:%M:%S')"  # 2025-12-26 10:30:00
+```
+
+### Boolean Values in JSON
+
+In shell scripts using jshn.sh:
+```bash
+json_add_boolean "wan_up" 1  # true
+json_add_boolean "wan_up" 0  # false
+```
+
+In JavaScript:
+```javascript
+if (health.network.wan_up) {
+    // WAN is up
+}
+```
+
+### Array vs Single Value
+
+**Use arrays for**:
+- Multiple items of same type (services, interfaces, mount points)
+- Variable-length data
+
+**Use single values for**:
+- System-wide metrics (CPU, memory, disk)
+- Primary/aggregate values (overall temperature, total uptime)
+
+**Example - Storage**:
+```json
+// Multiple mount points - use array
+"storage": [
+    {
+        "mount": "/",
+        "total_kb": 30408704,
+        "used_kb": 5447680,
+        "usage": 19
+    },
+    {
+        "mount": "/mnt/usb",
+        "total_kb": 128000000,
+        "used_kb": 64000000,
+        "usage": 50
+    }
+]
+
+// Root filesystem only - use object
+"disk": {
+    "total_kb": 30408704,
+    "used_kb": 5447680,
+    "usage": 19,
+    "status": "ok"
+}
+```
+
+---
+
+## Common Errors and Solutions
+
+### 1. RPC Error: "Object not found" (-32000)
+
+**Error Message**:
+```
+RPC call to system-hub/status failed with error -32000: Object not found
+```
+
+**Cause**: RPCD script name doesn't match ubus object name in JavaScript
+
+**Solution**:
+1. Check JavaScript for object name:
+   ```bash
+   grep -r "object:" luci-app-system-hub/htdocs --include="*.js"
+   ```
+   Output: `object: 'luci.system-hub'`
+
+2. Rename RPCD script to match exactly:
+   ```bash
+   mv root/usr/libexec/rpcd/system-hub root/usr/libexec/rpcd/luci.system-hub
+   ```
+
+3. Ensure script is executable:
+   ```bash
+   chmod +x root/usr/libexec/rpcd/luci.system-hub
+   ```
+
+4. Restart RPCD:
+   ```bash
+   /etc/init.d/rpcd restart
+   ```
+
+### 2. JavaScript Error: "api.methodName is not a function"
+
+**Error Message**:
+```
+Uncaught TypeError: api.getHealth is not a function
+    at view.load (health.js:12)
+```
+
+**Cause**: Wrong import pattern - imported class constructor instead of instance
+
+**Solution**:
+Change from:
+```javascript
+var api = L.require('system-hub.api');  // ❌ Wrong
+```
+
+To:
+```javascript
+'require system-hub/api as API';  // ✅ Correct
+```
+
+**Why**: `L.require('module.path')` returns raw class, `'require module/path as VAR'` auto-instantiates.
+
+### 3. RPC Error: "Access denied" (-32002)
+
+**Error Message**:
+```
+RPC call to luci.system-hub/get_settings failed with error -32002: Access denied
+```
+
+**Cause**: Method not listed in ACL file, or in wrong section (read vs write)
+
+**Solution**:
+1. Open ACL file: `root/usr/share/rpcd/acl.d/luci-app-system-hub.json`
+
+2. Add method to appropriate section:
+   ```json
+   "read": {
+       "ubus": {
+           "luci.system-hub": [
+               "get_settings"
+           ]
+       }
+   }
+   ```
+
+3. Deploy and restart RPCD:
+   ```bash
+   scp luci-app-system-hub/root/usr/share/rpcd/acl.d/*.json router:/usr/share/rpcd/acl.d/
+   ssh router "/etc/init.d/rpcd restart"
+   ```
+
+### 4. Display Error: "NaN%" or Undefined Values
+
+**Error**: Dashboard shows "NaN%", "undefined", or empty values
+
+**Cause**: Frontend using wrong data structure keys (outdated after backend changes)
+
+**Solution**:
+1. Check backend output:
+   ```bash
+   ubus call luci.system-hub get_health
+   ```
+
+2. Update frontend to match structure:
+   ```javascript
+   // ❌ Old structure
+   var cpuPercent = health.load / health.cores * 100;
+   var memPercent = health.memory.percent;
+
+   // ✅ New structure
+   var cpuPercent = health.cpu ? health.cpu.usage : 0;
+   var memPercent = health.memory ? health.memory.usage : 0;
+   ```
+
+3. Add null/undefined checks:
+   ```javascript
+   var temp = health.temperature?.value || 0;
+   var loadAvg = health.cpu?.load_1m || '0.00';
+   ```
+
+### 5. HTTP 404: View File Not Found
+
+**Error Message**:
+```
+HTTP error 404 while loading class file '/luci-static/resources/view/netifyd/overview.js'
+```
+
+**Cause**: Menu path doesn't match actual view file location
+
+**Solution**:
+1. Check menu JSON:
+   ```bash
+   cat root/usr/share/luci/menu.d/luci-app-netifyd-dashboard.json
+   ```
+   Look for: `"path": "netifyd/overview"`
+
+2. Check actual file location:
+   ```bash
+   ls htdocs/luci-static/resources/view/
+   ```
+   File is at: `view/netifyd-dashboard/overview.js`
+
+3. Fix either menu path OR file location:
+   ```json
+   // Option 1: Update menu path to match file
+   "path": "netifyd-dashboard/overview"
+
+   // Option 2: Move file to match menu
+   mv view/netifyd-dashboard/ view/netifyd/
+   ```
+
+### 6. Build Error: "factory yields invalid constructor"
+
+**Error Message**:
+```
+/luci-static/resources/system-hub/api.js: factory yields invalid constructor
+```
+
+**Cause**: Used wrong pattern in API module (singleton, plain object, etc.)
+
+**Solution**:
+Always use `baseclass.extend()`:
+```javascript
+return baseclass.extend({
+    getStatus: callStatus,
+    getHealth: callGetHealth,
+    // ... more methods
+});
+```
+
+Do NOT use:
+- `baseclass.singleton({...})`
+- Plain object: `return {...}`
+- `baseclass.prototype`
+
+### 7. RPCD Not Responding After Changes
+
+**Symptom**: Changes to RPCD script don't take effect
+
+**Solution**:
+1. Verify script is deployed:
+   ```bash
+   ssh router "ls -la /usr/libexec/rpcd/"
+   ```
+
+2. Check script is executable:
+   ```bash
+   ssh router "chmod +x /usr/libexec/rpcd/luci.system-hub"
+   ```
+
+3. Restart RPCD:
+   ```bash
+   ssh router "/etc/init.d/rpcd restart"
+   ```
+
+4. Clear browser cache (Ctrl+Shift+R)
+
+5. Check RPCD logs:
+   ```bash
+   ssh router "logread | grep rpcd"
+   ```
+
+---
+
+## Validation Checklist
+
+Use this checklist before deployment:
+
+### File Structure
+- [ ] RPCD script exists: `/usr/libexec/rpcd/luci.<module-name>`
+- [ ] RPCD script is executable: `chmod +x`
+- [ ] Menu JSON exists: `/usr/share/luci/menu.d/luci-app-<module>.json`
+- [ ] ACL JSON exists: `/usr/share/rpcd/acl.d/luci-app-<module>.json`
+- [ ] API module exists: `htdocs/luci-static/resources/<module>/api.js`
+- [ ] Views exist: `htdocs/luci-static/resources/view/<module>/*.js`
+
+### Naming Conventions
+- [ ] RPCD script name matches ubus object in JavaScript (including `luci.` prefix)
+- [ ] Menu paths match view file directory structure
+- [ ] All ubus objects start with `luci.`
+- [ ] ACL key matches package name: `"luci-app-<module>"`
+
+### Code Validation
+- [ ] API module uses `baseclass.extend()` pattern
+- [ ] Views import API with `'require <module>/api as API'` pattern
+- [ ] All rpc.declare() calls include correct `object`, `method`, `params`, `expect`
+- [ ] RPCD script outputs valid JSON (test with `ubus call`)
+- [ ] Menu JSON is valid (test with `jsonlint`)
+- [ ] ACL JSON is valid (test with `jsonlint`)
+
+### Permissions
+- [ ] All read methods in ACL `"read"` section
+- [ ] All write methods in ACL `"write"` section
+- [ ] Methods in ACL match RPCD script method names exactly
+
+### Testing
+- [ ] Run validation script: `./secubox-tools/validate-modules.sh`
+- [ ] Test each method via ubus: `ubus call luci.<module> <method>`
+- [ ] Test frontend in browser (check console for errors)
+- [ ] Clear browser cache after deployment
+- [ ] Verify RPCD restart: `/etc/init.d/rpcd restart`
+
+### Automated Validation Command
+
+```bash
+# Run comprehensive validation
+./secubox-tools/validate-modules.sh
+
+# Validate specific module
+./secubox-tools/validate-module-generation.sh luci-app-system-hub
+
+# Check JSON syntax
+find luci-app-system-hub -name "*.json" -exec jsonlint {} \;
+
+# Check shell scripts
+shellcheck luci-app-system-hub/root/usr/libexec/rpcd/*
+```
+
+---
+
+## Testing and Deployment
+
+### Local Testing with ubus
+
+Before deploying to router, test RPCD script locally:
+
+```bash
+# Copy RPCD script to local /tmp
+cp luci-app-system-hub/root/usr/libexec/rpcd/luci.system-hub /tmp/
+
+# Make executable
+chmod +x /tmp/luci.system-hub
+
+# Test 'list' action
+/tmp/luci.system-hub list
+
+# Test 'call' action with method
+/tmp/luci.system-hub call status
+
+# Test method with parameters
+echo '{"service":"network","action":"restart"}' | /tmp/luci.system-hub call service_action
+```
+
+### Deployment Script
+
+Use a deployment script for fast iteration:
+
+```bash
+#!/bin/bash
+# deploy-system-hub.sh
+
+ROUTER="root@192.168.8.191"
+
+echo "🚀 Deploying system-hub to $ROUTER"
+
+# Deploy API module
+scp luci-app-system-hub/htdocs/luci-static/resources/system-hub/api.js \
+    "$ROUTER:/www/luci-static/resources/system-hub/"
+
+# Deploy views
+scp luci-app-system-hub/htdocs/luci-static/resources/view/system-hub/*.js \
+    "$ROUTER:/www/luci-static/resources/view/system-hub/"
+
+# Deploy RPCD backend
+scp luci-app-system-hub/root/usr/libexec/rpcd/luci.system-hub \
+    "$ROUTER:/usr/libexec/rpcd/"
+
+# Deploy ACL
+scp luci-app-system-hub/root/usr/share/rpcd/acl.d/luci-app-system-hub.json \
+    "$ROUTER:/usr/share/rpcd/acl.d/"
+
+# Set permissions and restart
+ssh "$ROUTER" "chmod +x /usr/libexec/rpcd/luci.system-hub && /etc/init.d/rpcd restart"
+
+echo "✅ Deployment complete! Clear browser cache (Ctrl+Shift+R)"
+```
+
+### Browser Testing
+
+1. Open browser console (F12)
+2. Navigate to module page
+3. Check for errors:
+   - RPC errors (object not found, method not found, access denied)
+   - JavaScript errors (api.method is not a function)
+   - 404 errors (view files not found)
+4. Test functionality:
+   - Load data displays correctly
+   - Actions work (start/stop services, save settings)
+   - No "NaN", "undefined", or empty values
+
+### Remote ubus Testing
+
+Test RPCD methods on router:
+
+```bash
+# List all methods
+ssh router "ubus list luci.system-hub"
+
+# Call method without parameters
+ssh router "ubus call luci.system-hub status"
+
+# Call method with parameters
+ssh router "ubus call luci.system-hub service_action '{\"service\":\"network\",\"action\":\"restart\"}'"
+
+# Pretty-print JSON output
+ssh router "ubus call luci.system-hub get_health | jsonlint"
+```
+
+### Debugging Tips
+
+**Enable RPCD debug logging**:
+```bash
+# Edit /etc/init.d/rpcd
+# Add -v flag to procd_set_param command
+procd_set_param command "$PROG" -v
+
+# Restart RPCD
+/etc/init.d/rpcd restart
+
+# Watch logs
+logread -f | grep rpcd
+```
+
+**Enable JavaScript console logging**:
+```javascript
+// Add to api.js
+console.log('🔧 API v0.1.0 loaded at', new Date().toISOString());
+
+// Add to views
+console.log('Loading health data...');
+API.getHealth().then(function(data) {
+    console.log('Health data:', data);
+});
+```
+
+**Test JSON output**:
+```bash
+# On router
+/usr/libexec/rpcd/luci.system-hub call get_health | jsonlint
+
+# Check for common errors
+# - Missing commas
+# - Trailing commas
+# - Unquoted keys
+# - Invalid escape sequences
+```
+
+---
+
+## Best Practices Summary
+
+### DO:
+✅ Use `luci.` prefix for all ubus objects
+✅ Name RPCD scripts to match ubus object exactly
+✅ Use `baseclass.extend()` for API modules
+✅ Import APIs with `'require module/api as API'` pattern
+✅ Add null/undefined checks in frontend: `health.cpu?.usage || 0`
+✅ Validate JSON with `jsonlint` before deploying
+✅ Test with `ubus call` before browser testing
+✅ Restart RPCD after backend changes
+✅ Clear browser cache after frontend changes
+✅ Run `./secubox-tools/validate-modules.sh` before committing
+
+### DON'T:
+❌ Use ubus object names without `luci.` prefix
+❌ Use `baseclass.singleton()` or plain objects for API modules
+❌ Import APIs with `L.require('module.path')` (returns class, not instance)
+❌ Forget to add methods to ACL file
+❌ Mix up read/write methods in ACL sections
+❌ Output non-JSON from RPCD scripts
+❌ Use inconsistent data structures between backend and frontend
+❌ Deploy without testing locally first
+❌ Assume data exists - always check for null/undefined
+❌ Forget to make RPCD scripts executable (`chmod +x`)
+
+---
+
+## Version History
+
+**v1.0** (2025-12-26)
+- Initial reference guide
+- Based on luci-app-secubox v1.0.0 and luci-app-system-hub v0.1.0
+- Documented all critical patterns and common errors
+- Validated against real-world implementation challenges
+
+---
+
+## References
+
+- **OpenWrt Documentation**: https://openwrt.org/docs/guide-developer/start
+- **LuCI Documentation**: https://github.com/openwrt/luci/wiki
+- **ubus Documentation**: https://openwrt.org/docs/techref/ubus
+- **UCI Documentation**: https://openwrt.org/docs/guide-user/base-system/uci
+- **jshn.sh Library**: `/usr/share/libubox/jshn.sh` on OpenWrt
+
+---
+
+## Contact
+
+For questions or contributions to this reference guide:
+- **Author**: CyberMind <contact@cybermind.fr>
+- **Project**: SecuBox OpenWrt
+- **Repository**: https://github.com/cybermind-fr/secubox-openwrt
+
+---
+
+**END OF REFERENCE GUIDE**
diff --git a/docs/module-implementation-guide.md b/docs/module-implementation-guide.md
new file mode 100644
index 00000000..6fba2cfc
--- /dev/null
+++ b/docs/module-implementation-guide.md
@@ -0,0 +1,884 @@
+# SecuBox Module Implementation Guide
+
+**Version:** 1.0.0  
+**Last Updated:** 2025-12-28  
+**Status:** Active  
+**Purpose:** Complete guide for regenerating SecuBox modules matching the live demo
+
+---
+
+## See Also
+
+- **Automation Briefing:** [CODEX.md](codex.md)
+- **Module Prompts:** [FEATURE-REGENERATION-PROMPTS.md](feature-regeneration-prompts.md)
+- **Code Templates:** [CODE-TEMPLATES.md](code-templates.md)
+- **Quick Commands:** [QUICK-START.md](quick-start.md)
+
+---
+
+## Quick Navigation
+
+📋 **[FEATURE-REGENERATION-PROMPTS.md](feature-regeneration-prompts.md)** - Complete feature specifications for all 15 modules
+💻 **[CODE-TEMPLATES.md](code-templates.md)** - Ready-to-use code templates and implementation examples
+🏗️ **[DEVELOPMENT-GUIDELINES.md](development-guidelines.md)** - Complete development guidelines and design system
+⚡ **[QUICK-START.md](quick-start.md)** - Quick reference for common tasks
+🔧 **[CLAUDE.md](claude.md)** - Build system and architecture reference
+
+---
+
+## Document Overview
+
+This guide shows you how to use the comprehensive documentation to regenerate or create SecuBox modules that match the live demo at **secubox.cybermood.eu**.
+
+### What's Included
+
+1. **Feature Specifications** - Detailed requirements for all 15 modules
+2. **Code Templates** - Working implementation examples
+3. **Design System** - CSS variables, typography, components
+4. **Validation Tools** - Automated testing and fixing
+5. **Deployment Scripts** - Local build and remote deployment
+
+---
+
+## Implementation Workflow
+
+### Step 1: Choose Your Approach
+
+**Option A: Use Claude.ai for Code Generation**
+1. Open [claude.ai](https://claude.ai)
+2. Copy the relevant module prompt from [FEATURE-REGENERATION-PROMPTS.md](feature-regeneration-prompts.md)
+3. Paste the prompt and request implementation
+4. Claude will generate all required files based on the templates
+5. Review and integrate the generated code
+
+**Option B: Manual Implementation Using Templates**
+1. Copy templates from [CODE-TEMPLATES.md](code-templates.md)
+2. Replace placeholders with module-specific values
+3. Implement module-specific logic
+4. Validate and test
+
+**Option C: Hybrid Approach (Recommended)**
+1. Use Claude.ai for initial code generation
+2. Refine using templates and guidelines
+3. Validate with automated tools
+4. Deploy and test on target device
+
+---
+
+## Step-by-Step: Regenerate a Module with Claude.ai
+
+### Example: Regenerating System Hub Module
+
+#### 1. Gather Context
+
+Before prompting Claude, gather these resources:
+
+```bash
+# Read the module specification
+cat FEATURE-REGENERATION-PROMPTS.md | grep -A 200 "System Hub"
+
+# Review the design system
+cat DEVELOPMENT-GUIDELINES.md | grep -A 100 "Design System"
+
+# Check existing implementation (if available)
+ls -la luci-app-system-hub/
+```
+
+#### 2. Prepare the Prompt
+
+Create a comprehensive prompt for Claude.ai:
+
+```
+I need you to implement the System Hub module for OpenWrt LuCI framework.
+
+IMPORTANT CONSTRAINTS:
+- OpenWrt uses LuCI framework (not React/Vue)
+- JavaScript uses L.view.extend() pattern (not ES6 modules)
+- Backend is RPCD (shell scripts) communicating via ubus
+- CSS must use variables from system-hub/common.css
+- All code must be production-ready and match live demo
+- Follow the design system exactly
+
+TECHNICAL REQUIREMENTS:
+- RPCD script MUST be named: luci.system-hub
+- Menu paths MUST match view file locations
+- Use CSS variables (--sh-*) for all colors
+- Support dark mode with [data-theme="dark"]
+- Implement proper error handling
+- Add loading states for async operations
+
+REFERENCE DOCUMENTS:
+1. Live Demo: https://secubox.cybermood.eu/system-hub
+2. Feature Specification: [paste from FEATURE-REGENERATION-PROMPTS.md]
+3. Code Templates: [paste relevant templates from CODE-TEMPLATES.md]
+
+Please provide:
+1. Complete JavaScript view files (overview.js, services.js, etc.)
+2. RPCD backend script (luci.system-hub)
+3. API module (system-hub/api.js)
+4. CSS styles (system-hub/dashboard.css)
+5. Menu configuration JSON
+6. ACL configuration JSON
+
+Make sure all code matches the live demo visual design and functionality.
+```
+
+#### 3. Generate Code
+
+Paste your prompt into Claude.ai and let it generate the implementation.
+
+#### 4. Review Generated Code
+
+Check the generated code against these requirements:
+
+**API Module Checklist:**
+- [ ] Uses `'use strict';`
+- [ ] Requires `baseclass` and `rpc`
+- [ ] All RPC methods use `rpc.declare()`
+- [ ] Object names match RPCD script name (`luci.system-hub`)
+- [ ] Helper functions included if needed
+- [ ] Exports from `baseclass.extend()`
+
+**View Module Checklist:**
+- [ ] Extends `view.extend()`
+- [ ] Implements `load()` method returning Promise
+- [ ] Implements `render(data)` method
+- [ ] Uses `E()` helper for DOM building
+- [ ] Implements `poll.add()` for auto-refresh
+- [ ] Proper error handling with try/catch
+- [ ] Uses `ui.showModal()` for loading states
+- [ ] Uses `ui.addNotification()` for user feedback
+
+**RPCD Backend Checklist:**
+- [ ] Starts with `#!/bin/sh`
+- [ ] Sources `/lib/functions.sh` and `/usr/share/libubox/jshn.sh`
+- [ ] Implements `list` case with method declarations
+- [ ] Implements `call` case with method routing
+- [ ] All methods output valid JSON using `json_*` functions
+- [ ] Proper parameter validation
+- [ ] Error handling with appropriate messages
+
+**Menu JSON Checklist:**
+- [ ] Paths follow `admin/secubox/<category>/<module>`
+- [ ] First entry uses `"type": "firstchild"`
+- [ ] View entries use `"type": "view"` with correct `"path"`
+- [ ] Paths match view file locations
+- [ ] Proper `"order"` values for menu positioning
+- [ ] Depends on correct ACL entry
+
+**ACL JSON Checklist:**
+- [ ] Entry name matches package name
+- [ ] All read methods listed under `"read"."ubus"`
+- [ ] All write methods listed under `"write"."ubus"`
+- [ ] ubus object names match RPCD script name
+- [ ] UCI config access granted if needed
+
+**CSS Checklist:**
+- [ ] Imports `system-hub/common.css`
+- [ ] Uses CSS variables (`var(--sh-*)`)
+- [ ] Supports dark mode with `[data-theme="dark"]`
+- [ ] Responsive grid layouts
+- [ ] Smooth transitions and animations
+- [ ] JetBrains Mono for numeric values
+
+#### 5. Integrate into Codebase
+
+```bash
+# Create module directory structure
+mkdir -p luci-app-system-hub/htdocs/luci-static/resources/system-hub
+mkdir -p luci-app-system-hub/htdocs/luci-static/resources/view/system-hub
+mkdir -p luci-app-system-hub/root/usr/libexec/rpcd
+mkdir -p luci-app-system-hub/root/usr/share/luci/menu.d
+mkdir -p luci-app-system-hub/root/usr/share/rpcd/acl.d
+
+# Copy generated files to appropriate locations
+# (Copy from Claude's output to respective files)
+
+# Set RPCD script as executable
+chmod +x luci-app-system-hub/root/usr/libexec/rpcd/luci.system-hub
+```
+
+#### 6. Validate Implementation
+
+```bash
+# Fix permissions first (CRITICAL)
+./secubox-tools/fix-permissions.sh --local
+
+# Run comprehensive validation (7 checks)
+./secubox-tools/validate-modules.sh
+
+# Expected output:
+# ✅ All checks passed
+# OR
+# ❌ Errors found with specific fix instructions
+```
+
+#### 7. Build Locally
+
+```bash
+# Build single module
+./secubox-tools/local-build.sh build luci-app-system-hub
+
+# Or build all modules
+./secubox-tools/local-build.sh build
+
+# Or full validation + build
+./secubox-tools/local-build.sh full
+```
+
+#### 8. Deploy to Test Router
+
+```bash
+# Transfer package
+scp build/x86-64/luci-app-system-hub*.ipk root@192.168.1.1:/tmp/
+
+# Install on router
+ssh root@192.168.1.1 << 'EOF'
+opkg install /tmp/luci-app-system-hub*.ipk
+/etc/init.d/rpcd restart
+/etc/init.d/uhttpd restart
+EOF
+
+# Fix permissions on deployed router (if needed)
+./secubox-tools/fix-permissions.sh --remote
+```
+
+#### 9. Test in Browser
+
+1. Navigate to `http://192.168.1.1/cgi-bin/luci`
+2. Go to SecuBox → System → System Hub
+3. Verify:
+   - Page loads without errors
+   - Data displays correctly
+   - Actions work (buttons, forms)
+   - Auto-refresh updates data
+   - Styling matches demo
+   - Dark mode works
+   - Responsive design works on mobile
+
+#### 10. Iterate and Refine
+
+If issues found:
+1. Check browser console for JavaScript errors
+2. Check router logs: `ssh root@192.168.1.1 "logread | tail -50"`
+3. Verify RPCD methods work: `ubus call luci.system-hub status`
+4. Fix issues in local files
+5. Rebuild and redeploy
+6. Test again
+
+---
+
+## Common Implementation Patterns
+
+### Pattern 1: Multi-Tab Dashboard
+
+**Example:** System Hub with 9 tabs
+
+```javascript
+// In render()
+var tabs = [
+	{ id: 'overview', title: 'Overview', icon: '🏠' },
+	{ id: 'services', title: 'Services', icon: '⚙️' },
+	{ id: 'logs', title: 'Logs', icon: '📋' }
+];
+
+var activeTab = 'overview';
+
+// Render tab navigation
+var tabNav = E('div', { 'class': 'sh-nav-tabs' },
+	tabs.map(function(tab) {
+		return E('div', {
+			'class': 'sh-nav-tab' + (activeTab === tab.id ? ' active' : ''),
+			'click': function() {
+				// Switch tab logic
+				document.querySelectorAll('.sh-nav-tab').forEach(function(t) {
+					t.classList.remove('active');
+				});
+				this.classList.add('active');
+				// Show/hide tab content
+			}
+		}, [
+			E('span', {}, tab.icon),
+			E('span', {}, tab.title)
+		]);
+	})
+);
+
+// Render tab content
+var tabContent = E('div', { 'class': 'tab-content' }, [
+	// Overview tab
+	E('div', { 'class': 'tab-pane' + (activeTab === 'overview' ? ' active' : ''), 'data-tab': 'overview' }, [
+		this.renderOverviewContent()
+	]),
+	// Services tab
+	E('div', { 'class': 'tab-pane' + (activeTab === 'services' ? ' active' : ''), 'data-tab': 'services' }, [
+		this.renderServicesContent()
+	])
+]);
+```
+
+### Pattern 2: Filter Tabs with Data Filtering
+
+**Example:** SecuBox module grid with category filtering
+
+```javascript
+// Filter tabs
+var filterTabs = E('div', { 'class': 'sh-filter-tabs' }, [
+	E('div', {
+		'class': 'sh-filter-tab active',
+		'data-filter': 'all',
+		'click': function(ev) {
+			document.querySelectorAll('.sh-filter-tab').forEach(function(t) {
+				t.classList.remove('active');
+			});
+			this.classList.add('active');
+			self.filterModules('all');
+		}
+	}, [
+		E('span', { 'class': 'sh-tab-icon' }, '📦'),
+		E('span', { 'class': 'sh-tab-label' }, 'All')
+	]),
+	E('div', {
+		'class': 'sh-filter-tab',
+		'data-filter': 'security',
+		'click': function(ev) {
+			document.querySelectorAll('.sh-filter-tab').forEach(function(t) {
+				t.classList.remove('active');
+			});
+			this.classList.add('active');
+			self.filterModules('security');
+		}
+	}, [
+		E('span', { 'class': 'sh-tab-icon' }, '🛡️'),
+		E('span', { 'class': 'sh-tab-label' }, 'Security')
+	])
+]);
+
+// Filter function
+filterModules: function(category) {
+	var modules = document.querySelectorAll('.module-card');
+	modules.forEach(function(module) {
+		if (category === 'all' || module.dataset.category === category) {
+			module.style.display = 'block';
+		} else {
+			module.style.display = 'none';
+		}
+	});
+}
+```
+
+### Pattern 3: Real-Time Log Viewer
+
+**Example:** System Hub logs tab
+
+```javascript
+// Logs view with auto-scroll and auto-refresh
+renderLogsTab: function() {
+	var self = this;
+	var autoScroll = true;
+	var autoRefresh = true;
+	var refreshInterval = 5; // seconds
+
+	var logsContainer = E('div', { 'class': 'logs-container' });
+
+	// Load logs
+	var loadLogs = function() {
+		API.getLogs(100, '').then(function(result) {
+			var logs = result.logs || [];
+
+			dom.content(logsContainer,
+				logs.map(function(log) {
+					return E('div', { 'class': 'log-line' }, log);
+				})
+			);
+
+			// Auto-scroll to bottom
+			if (autoScroll) {
+				logsContainer.scrollTop = logsContainer.scrollHeight;
+			}
+		});
+	};
+
+	// Initial load
+	loadLogs();
+
+	// Auto-refresh
+	if (autoRefresh) {
+		setInterval(loadLogs, refreshInterval * 1000);
+	}
+
+	return E('div', {}, [
+		// Controls
+		E('div', { 'class': 'logs-controls' }, [
+			E('label', {}, [
+				E('input', {
+					'type': 'checkbox',
+					'checked': autoScroll,
+					'change': function() { autoScroll = this.checked; }
+				}),
+				' Auto-scroll'
+			]),
+			E('label', {}, [
+				E('input', {
+					'type': 'checkbox',
+					'checked': autoRefresh,
+					'change': function() { autoRefresh = this.checked; }
+				}),
+				' Auto-refresh'
+			]),
+			E('button', {
+				'class': 'sh-btn sh-btn-primary',
+				'click': loadLogs
+			}, '🔄 Refresh Now')
+		]),
+		// Logs display
+		logsContainer
+	]);
+}
+```
+
+### Pattern 4: Action Buttons with Confirmation
+
+**Example:** Service management buttons
+
+```javascript
+// Render action button with confirmation
+renderActionButton: function(service, action, label, btnClass) {
+	var self = this;
+
+	return E('button', {
+		'class': 'sh-btn ' + btnClass,
+		'click': function(ev) {
+			// Show confirmation modal
+			ui.showModal(_('Confirm Action'), [
+				E('p', {}, _('Are you sure you want to %s service %s?').format(action, service)),
+				E('div', { 'class': 'right' }, [
+					E('button', {
+						'class': 'sh-btn sh-btn-secondary',
+						'click': ui.hideModal
+					}, _('Cancel')),
+					E('button', {
+						'class': 'sh-btn sh-btn-primary',
+						'click': function() {
+							ui.hideModal();
+							self.performServiceAction(service, action);
+						}
+					}, _('Confirm'))
+				])
+			]);
+		}
+	}, label);
+},
+
+// Perform service action
+performServiceAction: function(service, action) {
+	var self = this;
+
+	ui.showModal(_('Performing Action'), [
+		E('p', {}, E('em', { 'class': 'spinning' }, _('Please wait...')))
+	]);
+
+	API.serviceAction(service, action).then(function(result) {
+		ui.hideModal();
+
+		if (result.success) {
+			ui.addNotification(null, E('p', _('Action completed successfully')), 'success');
+			self.handleRefresh();
+		} else {
+			ui.addNotification(null, E('p', _('Action failed: %s').format(result.message)), 'error');
+		}
+	}).catch(function(error) {
+		ui.hideModal();
+		ui.addNotification(null, E('p', _('Error: %s').format(error.message)), 'error');
+	});
+}
+```
+
+### Pattern 5: Form with Validation
+
+**Example:** Settings page
+
+```javascript
+renderSettingsForm: function() {
+	var self = this;
+	var settings = this.settingsData || {};
+
+	return E('form', { 'class': 'settings-form' }, [
+		// Text input
+		E('div', { 'class': 'form-group' }, [
+			E('label', {}, 'Hostname'),
+			E('input', {
+				'type': 'text',
+				'class': 'form-control',
+				'value': settings.hostname || '',
+				'id': 'input-hostname'
+			})
+		]),
+
+		// Number input with validation
+		E('div', { 'class': 'form-group' }, [
+			E('label', {}, 'Refresh Interval (seconds)'),
+			E('input', {
+				'type': 'number',
+				'class': 'form-control',
+				'value': settings.refresh_interval || 30,
+				'min': 10,
+				'max': 300,
+				'id': 'input-refresh'
+			})
+		]),
+
+		// Checkbox
+		E('div', { 'class': 'form-group' }, [
+			E('label', {}, [
+				E('input', {
+					'type': 'checkbox',
+					'checked': settings.auto_refresh || false,
+					'id': 'input-auto-refresh'
+				}),
+				' Enable auto-refresh'
+			])
+		]),
+
+		// Submit button
+		E('div', { 'class': 'form-actions' }, [
+			E('button', {
+				'class': 'sh-btn sh-btn-primary',
+				'type': 'submit',
+				'click': function(ev) {
+					ev.preventDefault();
+					self.handleSaveSettings();
+				}
+			}, 'Save Settings')
+		])
+	]);
+},
+
+handleSaveSettings: function() {
+	var hostname = document.getElementById('input-hostname').value;
+	var refreshInterval = parseInt(document.getElementById('input-refresh').value);
+	var autoRefresh = document.getElementById('input-auto-refresh').checked;
+
+	// Validate
+	if (!hostname) {
+		ui.addNotification(null, E('p', _('Hostname is required')), 'error');
+		return;
+	}
+
+	if (refreshInterval < 10 || refreshInterval > 300) {
+		ui.addNotification(null, E('p', _('Refresh interval must be between 10 and 300 seconds')), 'error');
+		return;
+	}
+
+	// Save via API
+	API.saveSettings(hostname, refreshInterval, autoRefresh).then(function(result) {
+		if (result.success) {
+			ui.addNotification(null, E('p', _('Settings saved successfully')), 'success');
+		} else {
+			ui.addNotification(null, E('p', _('Failed to save settings: %s').format(result.message)), 'error');
+		}
+	});
+}
+```
+
+---
+
+## Module-Specific Notes
+
+### System Hub (luci-app-system-hub)
+- **Complexity:** High - 9 tabs, many features
+- **Key Features:** Health monitoring, service management, system logs, backup/restore
+- **Special Requirements:** Integration with SecuBox for components list
+- **Dependencies:** Calls `luci.secubox` for module enumeration
+
+### WireGuard Dashboard (luci-app-wireguard-dashboard)
+- **Complexity:** Medium
+- **Key Features:** Peer management, QR code generation, traffic stats
+- **Special Requirements:** QR code generation (use qrencode or JavaScript library)
+- **Dependencies:** WireGuard tools (`wg` command)
+
+### CrowdSec Dashboard (luci-app-crowdsec-dashboard)
+- **Complexity:** Medium
+- **Key Features:** Threat intelligence, decisions management, bouncers
+- **Special Requirements:** Parse CrowdSec CLI output
+- **Dependencies:** CrowdSec (`cscli` command)
+
+### Netdata Dashboard (luci-app-netdata-dashboard)
+- **Complexity:** Low - mostly embedding iframe
+- **Key Features:** Embedded Netdata UI, quick metrics overview
+- **Special Requirements:** Netdata API integration
+- **Dependencies:** Netdata service
+
+### Network Modes (luci-app-network-modes)
+- **Complexity:** High - UCI manipulation
+- **Key Features:** Network topology wizard, configuration preview
+- **Special Requirements:** UCI config validation, rollback mechanism
+- **Dependencies:** Network, firewall, DHCP configs
+
+---
+
+## Troubleshooting Guide
+
+### Issue: "Object not found" Error
+
+**Symptoms:**
+```
+RPC call to luci.module-name/method failed with error -32000: Object not found
+```
+
+**Diagnosis:**
+```bash
+# 1. Check RPCD script exists and is executable
+ls -la luci-app-module-name/root/usr/libexec/rpcd/
+
+# 2. Check RPCD script name matches ubus object
+grep "object:" luci-app-module-name/htdocs/luci-static/resources/module-name/api.js
+
+# 3. Test RPCD script manually
+ssh root@router "/usr/libexec/rpcd/luci.module-name list"
+
+# 4. Check RPCD logs
+ssh root@router "logread | grep rpcd | tail -20"
+```
+
+**Solutions:**
+1. Rename RPCD script to match ubus object name (must include `luci.` prefix)
+2. Make script executable: `chmod +x luci.module-name`
+3. Restart RPCD: `/etc/init.d/rpcd restart`
+4. Reinstall package if deployed
+
+### Issue: View Not Loading (404)
+
+**Symptoms:**
+```
+HTTP error 404 while loading class file '/luci-static/resources/view/module-name/overview.js'
+```
+
+**Diagnosis:**
+```bash
+# 1. Check menu path
+cat luci-app-module-name/root/usr/share/luci/menu.d/*.json | grep "path"
+
+# 2. Check view file exists
+ls -la luci-app-module-name/htdocs/luci-static/resources/view/
+
+# 3. Verify paths match
+# Menu: "path": "module-name/overview"
+# File: view/module-name/overview.js
+```
+
+**Solutions:**
+1. Update menu path to match view file location
+2. OR move view files to match menu path
+3. Rebuild and redeploy package
+
+### Issue: CSS Not Applied
+
+**Symptoms:**
+- Unstyled page
+- Missing colors, fonts, or layout
+
+**Diagnosis:**
+```bash
+# 1. Check browser console for CSS 404 errors
+# (Open browser developer tools)
+
+# 2. Verify CSS import in view file
+grep "stylesheet" luci-app-module-name/htdocs/luci-static/resources/view/*/overview.js
+
+# 3. Check CSS file exists
+ls -la luci-app-module-name/htdocs/luci-static/resources/module-name/dashboard.css
+```
+
+**Solutions:**
+1. Verify CSS import path: `L.resource('module-name/dashboard.css')`
+2. Import common.css: `@import url('../system-hub/common.css');`
+3. Check file permissions: `644` for CSS files
+4. Clear browser cache (Ctrl+Shift+R)
+
+### Issue: Data Not Updating
+
+**Symptoms:**
+- Dashboard shows stale data
+- Auto-refresh not working
+
+**Diagnosis:**
+```bash
+# 1. Check poll is registered
+# (Look for poll.add() in render() method)
+
+# 2. Check API calls return Promises
+# (Verify methods return results from rpc.declare())
+
+# 3. Test API methods directly
+ssh root@router "ubus call luci.module-name status"
+```
+
+**Solutions:**
+1. Add poll.add() to render() method
+2. Verify API calls in poll callback return Promises
+3. Ensure updateDashboard() updates correct DOM elements
+4. Check browser console for JavaScript errors
+
+---
+
+## Best Practices
+
+### 1. Code Organization
+
+**DO:**
+- Keep related code together (API methods, helpers)
+- Use descriptive variable and function names
+- Add comments for complex logic
+- Break large functions into smaller helpers
+
+**DON'T:**
+- Put all code in one massive function
+- Use single-letter variable names (except in loops)
+- Duplicate code - create helper functions instead
+- Leave commented-out code in production
+
+### 2. Error Handling
+
+**DO:**
+```javascript
+API.getData().then(function(result) {
+	if (result && result.data) {
+		// Process data
+	} else {
+		console.warn('No data returned');
+		// Show empty state
+	}
+}).catch(function(error) {
+	console.error('API error:', error);
+	ui.addNotification(null, E('p', 'Failed to load data'), 'error');
+});
+```
+
+**DON'T:**
+```javascript
+API.getData().then(function(result) {
+	// Process data without checking
+	result.data.forEach(function(item) { ... }); // Will crash if data is null
+});
+```
+
+### 3. Performance
+
+**DO:**
+- Use poll.add() instead of setInterval for auto-refresh
+- Update specific DOM elements instead of full re-render
+- Debounce search inputs
+- Lazy load data only when needed
+
+**DON'T:**
+- Re-render entire view on every update
+- Poll too frequently (<10 seconds)
+- Load all data upfront
+- Perform expensive operations in render()
+
+### 4. User Experience
+
+**DO:**
+- Show loading states (spinners, skeleton screens)
+- Provide feedback for actions (success/error notifications)
+- Confirm destructive actions (delete, restart)
+- Use descriptive error messages
+
+**DON'T:**
+- Leave users waiting without feedback
+- Silent failures
+- Generic error messages ("Error occurred")
+- Allow destructive actions without confirmation
+
+---
+
+## Deployment Checklist
+
+Before deploying to production:
+
+- [ ] **Code Quality**
+  - [ ] All validation checks pass
+  - [ ] No JavaScript errors in console
+  - [ ] No shell script errors (shellcheck)
+  - [ ] All JSON files valid (jsonlint)
+
+- [ ] **Functionality**
+  - [ ] All tabs/pages load correctly
+  - [ ] All actions work as expected
+  - [ ] Data displays correctly
+  - [ ] Auto-refresh updates data
+  - [ ] Forms validate input
+  - [ ] Error handling works
+
+- [ ] **Design**
+  - [ ] Matches live demo visually
+  - [ ] Dark mode works
+  - [ ] Responsive on mobile
+  - [ ] Consistent with other modules
+  - [ ] No layout issues
+
+- [ ] **Performance**
+  - [ ] Page loads quickly (<2s)
+  - [ ] Auto-refresh doesn't freeze UI
+  - [ ] No memory leaks
+  - [ ] Efficient data fetching
+
+- [ ] **Security**
+  - [ ] ACL permissions correct
+  - [ ] Input validation on frontend and backend
+  - [ ] No hardcoded credentials
+  - [ ] Safe command execution (no injection)
+
+- [ ] **Documentation**
+  - [ ] README.md updated
+  - [ ] Comments in complex code
+  - [ ] Menu entries have descriptions
+  - [ ] ACL entries have descriptions
+
+---
+
+## Additional Resources
+
+### Documentation
+- [LuCI API Reference](https://openwrt.github.io/luci/api/)
+- [OpenWrt Developer Guide](https://openwrt.org/docs/guide-developer/start)
+- [UCI Configuration](https://openwrt.org/docs/guide-user/base-system/uci)
+- [ubus Documentation](https://openwrt.org/docs/techref/ubus)
+
+### Live Demo
+- **Main Demo:** https://secubox.cybermood.eu
+- **System Hub:** https://secubox.cybermood.eu/system-hub
+- **CrowdSec:** https://secubox.cybermood.eu/crowdsec
+- **WireGuard:** https://secubox.cybermood.eu/wireguard
+
+### Internal Documentation
+- [FEATURE-REGENERATION-PROMPTS.md](feature-regeneration-prompts.md) - All module specifications
+- [CODE-TEMPLATES.md](code-templates.md) - Implementation templates
+- [DEVELOPMENT-GUIDELINES.md](development-guidelines.md) - Complete dev guide
+- [QUICK-START.md](quick-start.md) - Quick reference
+- [CLAUDE.md](claude.md) - Build system reference
+
+### Tools
+- [SecuBox Tools](./secubox-tools/) - Validation, build, deployment scripts
+- [GitHub Actions](./.github/workflows/) - CI/CD workflows
+- [Templates](./templates/) - Module templates
+
+---
+
+## Getting Help
+
+If you encounter issues not covered in this guide:
+
+1. **Check Existing Modules:** Look at working modules for reference implementations
+2. **Run Validation:** `./secubox-tools/validate-modules.sh` for automated checks
+3. **Check Logs:** `logread | grep -i error` on the router
+4. **Review Documentation:** Read DEVELOPMENT-GUIDELINES.md for detailed explanations
+5. **Contact Support:** support@cybermind.fr
+
+---
+
+**Document Version:** 1.0.0
+**Last Updated:** 2025-12-27
+**Maintainer:** CyberMind.fr
+**Live Demo:** https://secubox.cybermood.eu
diff --git a/docs/module-status.md b/docs/module-status.md
new file mode 100644
index 00000000..97c54888
--- /dev/null
+++ b/docs/module-status.md
@@ -0,0 +1,353 @@
+# SecuBox Modules - Implementation Status
+
+**Version:** 1.0.0  
+**Last Updated:** 2025-12-28  
+**Status:** Active
+
+
+**Version:** 1.0.0  
+**Last Updated:** 2025-12-28  
+**Status:** Active  
+**Total Modules:** 15
+
+---
+
+## See Also
+
+- **Feature Regeneration Prompts:** [FEATURE-REGENERATION-PROMPTS.md](feature-regeneration-prompts.md)
+- **Implementation Workflow:** [MODULE-IMPLEMENTATION-GUIDE.md](module-implementation-guide.md)
+- **Automation Guardrails:** [CODEX.md](codex.md)
+
+## Module Categories
+
+### 1. Core Control (3 modules)
+
+#### luci-app-secubox
+- **Status**: ✅ Implemented
+- **Version**: 1.0.0
+- **Description**: Central SecuBox hub and dashboard
+- **Features**: System overview, module management, quick actions
+- **Implementation Date**: Pre-existing
+- **Files**: 13 files
+
+#### luci-app-system-hub
+- **Status**: ✅ Implemented
+- **Version**: 1.0.0
+- **Description**: Central system control dashboard
+- **Features**: System info, network config, service management, firewall, backup/restore, diagnostics
+- **Implementation Date**: 2025-12-24
+- **Files**: 19 files, 2100+ lines of code
+- **Views**: 7 (overview, network, services, firewall, backup, diagnostics, logs)
+- **Commit**: 34fe2dc - "feat: complete System Hub implementation"
+
+#### luci-app-traffic-shaper
+- **Status**: ✅ Implemented (NEW)
+- **Version**: 1.0.0
+- **Description**: Advanced traffic shaping and QoS control
+- **Features**: Traffic classes, classification rules, real-time stats, quick presets
+- **Implementation Date**: 2025-12-25
+- **Files**: 13 files, 1542 lines of code
+- **Views**: 5 (overview, classes, rules, stats, presets)
+- **Backend**: TC/CAKE integration with HTB qdisc
+- **Presets**: Gaming, Streaming, Work From Home, Balanced
+- **Validation**: ✅ All checks passed
+
+---
+
+### 2. Security & Monitoring (2 modules)
+
+#### luci-app-crowdsec-dashboard
+- **Status**: ✅ Implemented
+- **Version**: 1.0.0
+- **Description**: CrowdSec security monitoring dashboard
+- **Features**: Threat detection, ban management, bouncer control
+- **Implementation Date**: Pre-existing
+- **Files**: Multiple views
+
+#### luci-app-netdata-dashboard
+- **Status**: ✅ Implemented
+- **Version**: 1.0.0
+- **Description**: System monitoring with Netdata
+- **Features**: Real-time metrics, performance graphs, resource monitoring
+- **Implementation Date**: Pre-existing
+- **Files**: Dashboard integration
+
+---
+
+### 3. Network Intelligence (2 modules)
+
+#### luci-app-netifyd-dashboard
+- **Status**: ✅ Implemented
+- **Version**: 1.0.0
+- **Description**: Deep packet inspection with Netifyd
+- **Features**: Application detection, protocol analysis, flow monitoring
+- **Implementation Date**: Pre-existing
+- **Files**: Multiple views
+
+#### luci-app-network-modes
+- **Status**: ✅ Implemented
+- **Version**: 1.0.0
+- **Description**: Network mode configuration
+- **Features**: Bridge, router, AP modes, VLAN configuration
+- **Implementation Date**: Pre-existing
+- **Files**: Configuration management
+
+---
+
+### 4. VPN & Access Control (3 modules)
+
+#### luci-app-wireguard-dashboard
+- **Status**: ✅ Implemented
+- **Version**: 1.0.0
+- **Description**: WireGuard VPN management
+- **Features**: Peer management, tunnel configuration, connection monitoring
+- **Implementation Date**: Pre-existing
+- **Files**: Multiple views
+
+#### luci-app-client-guardian
+- **Status**: ✅ Implemented (with known issue)
+- **Version**: 1.0.0
+- **Description**: Network Access Control and captive portal
+- **Features**: Client authentication, MAC filtering, captive portal
+- **Implementation Date**: Pre-existing
+- **Known Issues**: Missing captive.js view file (validation error)
+- **Files**: Most views present
+
+#### luci-app-auth-guardian
+- **Status**: ✅ Implemented
+- **Version**: 1.0.0
+- **Description**: Advanced authentication system
+- **Features**: Multi-factor auth, session management, OAuth integration
+- **Implementation Date**: Pre-existing
+- **Files**: 6 views (overview, sessions, vouchers, oauth, splash, bypass)
+
+---
+
+### 5. Bandwidth & Traffic (2 modules)
+
+#### luci-app-bandwidth-manager
+- **Status**: ✅ Implemented
+- **Version**: 1.0.0
+- **Description**: Bandwidth management with QoS and quotas
+- **Features**: Bandwidth rules, usage quotas, traffic monitoring
+- **Implementation Date**: Pre-existing
+- **Commit**: fa9bb2a - "feat: complete Bandwidth Manager implementation"
+- **Files**: 5 views (overview, rules, quotas, usage, settings)
+
+#### luci-app-media-flow
+- **Status**: ✅ Implemented
+- **Version**: 1.0.0
+- **Description**: Media traffic detection and optimization
+- **Features**: Media flow detection, streaming optimization
+- **Implementation Date**: Pre-existing
+- **Files**: Detection engine
+
+---
+
+### 6. Performance & Services (2 modules)
+
+#### luci-app-cdn-cache
+- **Status**: ✅ Implemented
+- **Version**: 1.0.0
+- **Description**: CDN proxy cache
+- **Features**: Content caching, cache policies, statistics, maintenance
+- **Implementation Date**: Pre-existing
+- **Files**: 6 views (overview, cache, policies, statistics, maintenance, settings)
+
+#### luci-app-vhost-manager
+- **Status**: ✅ Implemented
+- **Version**: 1.0.0
+- **Description**: Virtual host management
+- **Features**: VHost configuration, SSL/TLS management, reverse proxy
+- **Implementation Date**: Pre-existing
+- **Files**: VHost management interface
+
+---
+
+## Implementation Statistics
+
+### Overall Progress
+- **Total Modules**: 15
+- **Fully Implemented**: 14
+- **With Known Issues**: 1 (client-guardian missing captive.js)
+- **Completion Rate**: 93.3%
+
+### Recent Development (Dec 2024 - Dec 2025)
+1. **System Hub** (Dec 24, 2025):
+   - 19 files created
+   - 2100+ lines of code
+   - 7 comprehensive views
+   - Full system control integration
+
+2. **Traffic Shaper** (Dec 25, 2025):
+   - 13 files created
+   - 1542 lines of code
+   - 5 views with CRUD interfaces
+   - TC/CAKE QoS implementation
+   - 3 quick presets
+
+### Code Statistics
+- **Total Files**: ~200+ across all modules
+- **JavaScript Files**: ~80+ view files
+- **RPCD Backends**: 15 shell scripts
+- **Total Lines of Code**: 15,000+ (estimated)
+
+### Validation Status
+| Module | RPCD Match | Menu Paths | JS Syntax | JSON Valid |
+|--------|-----------|-----------|-----------|-----------|
+| auth-guardian | ✅ | ✅ | ✅ | ✅ |
+| bandwidth-manager | ✅ | ✅ | ✅ | ✅ |
+| cdn-cache | ✅ | ✅ | ✅ | ✅ |
+| client-guardian | ✅ | ❌ | ✅ | ✅ |
+| crowdsec-dashboard | ✅ | ✅ | ✅ | ✅ |
+| media-flow | ✅ | ✅ | ✅ | ✅ |
+| netdata-dashboard | ✅ | ✅ | ✅ | ✅ |
+| netifyd-dashboard | ✅ | ✅ | ✅ | ✅ |
+| network-modes | ✅ | ✅ | ✅ | ✅ |
+| secubox | ✅ | ✅ | ✅ | ✅ |
+| system-hub | ✅ | ✅ | ✅ | ✅ |
+| traffic-shaper | ✅ | ✅ | ✅ | ✅ |
+| vhost-manager | ✅ | ✅ | ✅ | ✅ |
+| wireguard-dashboard | ✅ | ✅ | ✅ | ✅ |
+
+---
+
+## Build System Status
+
+### GitHub Actions Workflows
+
+#### 1. build-openwrt-packages.yml
+- **Status**: ✅ Operational
+- **Purpose**: Build all packages for 13 architectures
+- **Architectures**: x86-64, ARM64 (6 variants), ARM32 (4 variants), MIPS (3 variants)
+- **Trigger**: Push, PR, tags
+- **Output**: .ipk packages per architecture
+
+#### 2. build-secubox-images.yml
+- **Status**: ✅ Fixed (Dec 24, 2025)
+- **Purpose**: Build complete firmware images
+- **Devices**: ESPRESSObin V7/Ultra, MOCHAbin, Sheeva64
+- **Fixes Applied**:
+  - Added image generation flags
+  - Disabled GDB in toolchain
+  - Fixed opkg lock file issue
+  - Added all 15 SecuBox packages
+- **Output**: Firmware images (.img.gz, *sysupgrade.bin)
+
+#### 3. test-validate.yml
+- **Status**: ✅ Operational
+- **Purpose**: Validation and testing
+- **Checks**: Makefile structure, JSON syntax, shellcheck, permissions
+
+### Local Build System
+
+#### secubox-tools/local-build.sh
+- **Status**: ✅ Enhanced (Dec 24, 2025)
+- **Features**:
+  - Package building (SDK-based)
+  - Firmware building (full OpenWrt source)
+  - Validation suite
+  - Multi-architecture support
+- **Commands**:
+  - `validate` - Check all modules
+  - `build` - Build packages
+  - `firmware` - Build firmware images
+  - `debug-firmware` - Debug configuration
+  - `full` - Validate + build
+  - `clean` - Remove artifacts
+
+---
+
+## Known Issues & TODO
+
+### Issues
+1. **client-guardian**: Missing `captive.js` view file
+   - Menu path exists but file not found
+   - Impact: Captive portal view inaccessible
+
+### Pending Work
+1. Fix client-guardian captive.js missing file
+2. Test all modules on actual OpenWrt device
+3. Create integration tests
+4. Performance benchmarking
+5. Documentation updates
+
+---
+
+## Version History
+
+### v0.0.5 (2025-12-24)
+- Added System Hub module
+- Added all 13 packages to firmware builds
+- Fixed firmware build workflow
+- Enhanced local build script
+
+### v0.0.6 (In Progress)
+- Added Traffic Shaper module
+- Improved validation tools
+- Module status tracking
+
+---
+
+## Architecture Support
+
+### Tier 1 (Full Support)
+- **x86-64**: PC, VMs, x86 routers
+- **aarch64-cortex-a72**: MOCHAbin, Raspberry Pi 4
+- **aarch64-cortex-a53**: ESPRESSObin, Sheeva64
+
+### Tier 2 (Package Support)
+- **ARM64**: mediatek-filogic, rockchip-armv8, bcm27xx
+- **ARM32**: cortex-a7/a9, ipq40xx, ipq806x
+- **MIPS**: 24kc, mipsel variants
+
+---
+
+## Maintenance
+
+### Regular Tasks
+- Run `./secubox-tools/validate-modules.sh` before commits
+- Update version in Makefile when making changes
+- Test on target devices before tagging releases
+- Keep CLAUDE.md updated with conventions
+
+### Release Process
+1. Validate all modules
+2. Update version numbers
+3. Build and test locally
+4. Create git tag (e.g., `v0.0.6`)
+5. Push tag to trigger CI builds
+6. Verify GitHub Actions completion
+7. Download and test artifacts
+
+---
+
+## Resources
+
+### Documentation
+- `CLAUDE.md` - Developer guide and conventions
+- `secubox-tools/README.md` - Build system documentation
+- Individual module `README.md` files
+
+### Tools
+- `secubox-tools/validate-modules.sh` - Module validation
+- `secubox-tools/secubox-repair.sh` - Auto-fix common issues
+- `secubox-tools/secubox-debug.sh` - Package diagnostics
+- `secubox-tools/local-build.sh` - Local build system
+
+### Templates
+- `templates/luci-app-template` - Module template
+
+---
+
+## License
+
+All modules: Apache License 2.0
+
+## Maintainer
+
+SecuBox Project <secubox@example.com>
+
+---
+
+*This status file is automatically maintained. Last generated: 2025-12-25*
diff --git a/docs/permissions-guide.md b/docs/permissions-guide.md
new file mode 100644
index 00000000..9cffab0d
--- /dev/null
+++ b/docs/permissions-guide.md
@@ -0,0 +1,248 @@
+# OpenWrt Package Permissions Guide
+
+**Version:** 0.3.1  
+**Last Updated:** 2025-12-28  
+**Status:** Active  
+**Author:** CyberMind
+
+> **📚 This is a quick reference guide.**
+> For complete deployment procedures, see [DEVELOPMENT-GUIDELINES.md §9](./DEVELOPMENT-GUIDELINES.md#deployment-procedures)
+>
+> **Related Documentation:**
+> - Complete guide: [DEVELOPMENT-GUIDELINES.md](development-guidelines.md)
+> - Quick reference: [QUICK-START.md](quick-start.md)
+> - Validation tools: [VALIDATION-GUIDE.md](validation-guide.md)
+> - Automation briefing: [CODEX.md](codex.md)
+
+---
+
+## See Also
+
+- **Deployment Procedures:** [DEVELOPMENT-GUIDELINES.md §9](./DEVELOPMENT-GUIDELINES.md#deployment-procedures)
+- **Quick Rules & Commands:** [QUICK-START.md](quick-start.md)
+- **Validation Checklist:** [VALIDATION-GUIDE.md](validation-guide.md)
+- **Automation Standards:** [CODEX.md](codex.md)
+
+## 🎯 Objectif
+
+Assurer que tous les fichiers des packages SecuBox ont les **bonnes permissions** dès l'installation, sans nécessiter de correction manuelle.
+
+## 📋 Permissions Requises
+
+### Fichiers Exécutables (755)
+
+Ces fichiers **DOIVENT** avoir les permissions d'exécution:
+
+```
+-rwxr-xr-x (755)
+```
+
+**Liste des fichiers:**
+- `/usr/libexec/rpcd/luci.*` - Scripts RPCD backend
+- `/usr/libexec/secubox/*.sh` - Scripts utilitaires
+- `/etc/init.d/*` - Scripts d'initialisation
+- `/etc/uci-defaults/*` - Scripts de configuration initiale
+
+### Fichiers Non-Exécutables (644)
+
+Ces fichiers **NE DOIVENT PAS** être exécutables:
+
+```
+-rw-r--r-- (644)
+```
+
+**Liste des fichiers:**
+- `/www/luci-static/resources/**/*.js` - Fichiers JavaScript
+- `/www/luci-static/resources/**/*.css` - Fichiers CSS
+- `/usr/share/rpcd/acl.d/*.json` - Permissions ACL
+- `/usr/share/luci/menu.d/*.json` - Définitions de menu
+- `/etc/config/*` - Fichiers de configuration UCI
+
+## 🔧 Configuration dans le Makefile
+
+### Méthode Recommandée: PKG_FILE_MODES
+
+OpenWrt supporte la variable `PKG_FILE_MODES` pour définir les permissions des fichiers lors de l'installation du package.
+
+**Syntaxe:**
+```makefile
+PKG_FILE_MODES:=/path/to/file:permissions
+```
+
+**Exemple complet:**
+```makefile
+include $(TOPDIR)/rules.mk
+
+PKG_NAME:=luci-app-example
+PKG_VERSION:=0.3.1
+PKG_RELEASE:=1
+PKG_LICENSE:=Apache-2.0
+PKG_MAINTAINER:=CyberMind <contact@cybermind.fr>
+
+LUCI_TITLE:=LuCI - Example Module
+LUCI_DESCRIPTION:=Example SecuBox module
+LUCI_DEPENDS:=+luci-base +rpcd
+LUCI_PKGARCH:=all
+
+# File permissions (RPCD scripts must be executable)
+PKG_FILE_MODES:=/usr/libexec/rpcd/luci.example:755
+
+include $(TOPDIR)/feeds/luci/luci.mk
+
+# call BuildPackage - OpenWrt buildroot signature
+```
+
+### Plusieurs Fichiers Exécutables
+
+Si vous avez plusieurs fichiers exécutables:
+
+```makefile
+PKG_FILE_MODES:=/usr/libexec/rpcd/luci.example:755 \
+	/usr/libexec/example/helper.sh:755 \
+	/etc/init.d/example:755
+```
+
+**Note:** Utilisez `\` pour continuer sur la ligne suivante.
+
+## 📦 Modules SecuBox avec PKG_FILE_MODES
+
+### luci-app-secubox
+```makefile
+PKG_FILE_MODES:=/usr/libexec/rpcd/luci.secubox:755 \
+	/usr/libexec/secubox/fix-permissions.sh:755
+```
+
+### luci-app-system-hub
+```makefile
+PKG_FILE_MODES:=/usr/libexec/rpcd/luci.system-hub:755
+```
+
+### luci-app-network-modes
+```makefile
+PKG_FILE_MODES:=/usr/libexec/rpcd/luci.network-modes:755
+```
+
+## 🧪 Vérification
+
+### Lors du Développement
+
+Avant de déployer un package, vérifiez les permissions:
+
+```bash
+# Vérifier les scripts RPCD
+ls -l root/usr/libexec/rpcd/luci.*
+
+# Vérifier les scripts helper
+ls -l root/usr/libexec/*/
+
+# Vérifier les fichiers web
+find root/www -type f -name "*.js" -o -name "*.css" | xargs ls -l
+```
+
+### Après Installation du Package
+
+Vérifiez que les permissions sont correctes sur le routeur:
+
+```bash
+# RPCD scripts doivent être 755
+ls -l /usr/libexec/rpcd/luci.*
+
+# Fichiers web doivent être 644
+ls -l /www/luci-static/resources/secubox/*.js
+ls -l /www/luci-static/resources/secubox/*.css
+```
+
+## 🛠️ Script de Vérification Automatique
+
+Un script de vérification est inclus dans `luci-app-secubox`:
+
+```bash
+# Vérifier et corriger toutes les permissions
+/usr/libexec/secubox/fix-permissions.sh
+
+# Via ubus
+ubus call luci.secubox fix_permissions
+
+# Via l'interface web
+Dashboard → Quick Actions → "🔧 Fix Perms"
+```
+
+## ⚠️ Erreurs Communes
+
+### 1. RPCD Script Non-Exécutable
+
+**Symptôme:**
+```bash
+ubus call luci.example status
+# Command failed: Permission denied
+```
+
+**Cause:** Le script RPCD n'a pas les permissions 755
+
+**Solution:**
+```makefile
+# Ajouter dans le Makefile
+PKG_FILE_MODES:=/usr/libexec/rpcd/luci.example:755
+```
+
+### 2. Fichiers Web Exécutables
+
+**Symptôme:** Fichiers JavaScript/CSS avec permissions 755
+
+**Cause:** Mauvaise manipulation ou script mal configuré
+
+**Solution:** Les fichiers web sont 644 par défaut avec LuCI, pas besoin de les spécifier dans PKG_FILE_MODES
+
+### 3. Script Helper Non-Exécutable
+
+**Symptôme:**
+```bash
+/usr/libexec/example/helper.sh
+# -bash: /usr/libexec/example/helper.sh: Permission denied
+```
+
+**Solution:**
+```makefile
+PKG_FILE_MODES:=/usr/libexec/rpcd/luci.example:755 \
+	/usr/libexec/example/helper.sh:755
+```
+
+## 📚 Références
+
+- **LuCI Build System:** `$(TOPDIR)/feeds/luci/luci.mk`
+- **OpenWrt Package Build:** https://openwrt.org/docs/guide-developer/packages
+- **PKG_FILE_MODES:** https://openwrt.org/docs/guide-developer/build-system/use-buildsystem#build_system_variables
+
+## ✅ Checklist Pré-Déploiement
+
+Avant de créer un package `.ipk` ou `.apk`:
+
+- [ ] Tous les scripts RPCD ont 755 dans PKG_FILE_MODES
+- [ ] Tous les scripts helper ont 755 dans PKG_FILE_MODES
+- [ ] Les fichiers web (JS/CSS) ne sont PAS dans PKG_FILE_MODES (ils sont 644 par défaut)
+- [ ] Les fichiers ACL/Menu ne sont PAS dans PKG_FILE_MODES (ils sont 644 par défaut)
+- [ ] Le Makefile utilise `include $(TOPDIR)/feeds/luci/luci.mk`
+- [ ] PKG_FILE_MODES est défini AVANT le `include $(TOPDIR)/feeds/luci/luci.mk`
+
+## 🔄 Migration des Modules Existants
+
+Pour ajouter PKG_FILE_MODES à un module existant:
+
+```bash
+cd luci-app-mymodule
+
+# Éditer le Makefile
+vi Makefile
+
+# Ajouter avant 'include $(TOPDIR)/feeds/luci/luci.mk'
+PKG_FILE_MODES:=/usr/libexec/rpcd/luci.mymodule:755
+
+# Reconstruire le package
+make package/luci-app-mymodule/clean
+make package/luci-app-mymodule/compile
+```
+
+---
+
+**Maintainer:** CyberMind <contact@cybermind.fr>
+**License:** Apache-2.0
diff --git a/docs/quick-start.md b/docs/quick-start.md
new file mode 100644
index 00000000..d83cf240
--- /dev/null
+++ b/docs/quick-start.md
@@ -0,0 +1,335 @@
+# Quick Start Guide - SecuBox Development
+
+**Version:** 1.0.0  
+**Last Updated:** 2025-12-28  
+**Status:** Active
+
+**⚡ Aide-mémoire rapide pour développement**
+
+Pour le guide complet, voir [DEVELOPMENT-GUIDELINES.md](development-guidelines.md)
+
+---
+
+## See Also
+
+- **Complete Guide:** [DEVELOPMENT-GUIDELINES.md](development-guidelines.md)
+- **Architecture & Build:** [CLAUDE.md](claude.md)
+- **Code Templates:** [CODE-TEMPLATES.md](code-templates.md)
+- **Module Prompts:** [FEATURE-REGENERATION-PROMPTS.md](feature-regeneration-prompts.md)
+- **Automation Briefing:** [CODEX.md](codex.md)
+
+---
+
+## ⚠️ RÈGLES CRITIQUES (À NE JAMAIS OUBLIER)
+
+### 1. RPCD Script Naming
+```bash
+# Le nom DOIT correspondre EXACTEMENT à l'objet ubus
+JavaScript: object: 'luci.system-hub'
+Fichier:   root/usr/libexec/rpcd/luci.system-hub  ✅
+
+# Sinon: Error -32000 "Object not found"
+```
+
+### 2. Menu Path Matching
+```json
+Menu JSON: "path": "system-hub/overview"
+Fichier:   view/system-hub/overview.js  ✅
+
+# Sinon: HTTP 404 Not Found
+```
+
+### 3. Permissions Files
+```bash
+# RPCD scripts = exécutable
+chmod 755 root/usr/libexec/rpcd/luci.*
+
+# CSS/JS = lecture seule
+chmod 644 htdocs/**/*.{css,js}
+
+# Sinon: 403 Forbidden ou script non exécuté
+```
+
+### 4. Pre-Deployment Checks
+```bash
+# TOUJOURS vérifier avant déploiement:
+
+# 1. Espace disque (doit être < 90%)
+ssh root@192.168.8.191 "df -h | grep overlay"
+
+# 2. Permissions après déploiement
+ssh root@192.168.8.191 "find /www/luci-static -name '*.js' -perm 600"
+# ⚠️ Si résultats: fichiers ont 600 au lieu de 644 → Erreur 403!
+
+# 3. Correction rapide si nécessaire
+ssh root@192.168.8.191 "find /www/luci-static -name '*.css' -exec chmod 644 {} \;"
+ssh root@192.168.8.191 "find /www/luci-static -name '*.js' -exec chmod 644 {} \;"
+```
+
+### 5. Common Errors Quick Fix
+```bash
+# HTTP 403 Forbidden (BEST: use automated script)
+./secubox-tools/fix-permissions.sh --remote  # Auto-fix all permissions
+
+# OR manual fix:
+chmod 644 /www/luci-static/resources/**/*.{js,css}
+
+# No space left on device
+rm -rf /tmp/*.ipk /tmp/luci-*
+find /root -name '*.backup-*' -mtime +7 -delete
+
+# Object not found -32000
+chmod 755 /usr/libexec/rpcd/luci.*
+ubus list | grep luci.module-name  # Vérifier disponibilité
+```
+
+---
+
+## 🎨 Design System Essentials
+
+### Color Palette (Dark Mode)
+```css
+--sh-bg-primary: #0a0a0f;      /* Fond principal */
+--sh-bg-card: #12121a;         /* Cartes */
+--sh-border: #2a2a35;          /* Bordures */
+--sh-primary: #6366f1;         /* Indigo */
+--sh-primary-end: #8b5cf6;     /* Violet */
+```
+
+### Fonts
+```css
+/* Général */
+font-family: 'Inter', sans-serif;
+
+/* Valeurs numériques */
+font-family: 'JetBrains Mono', monospace;
+```
+
+### Component Classes
+```css
+.sh-page-header         /* Page header */
+.sh-page-title          /* Title (gradient text) */
+.sh-stat-badge          /* Stat badge (130px min) */
+.sh-card                /* Card (gradient border on hover) */
+.sh-btn-primary         /* Button (gradient) */
+.sh-filter-tab          /* Filter tab */
+```
+
+### Grid Sizes
+```css
+/* Stats */
+grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
+
+/* Metrics */
+grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+
+/* Info cards */
+grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+```
+
+---
+
+## 🔧 Common Commands
+
+### Validation
+```bash
+# Valider TOUT avant commit (7 checks incluant permissions)
+./secubox-tools/validate-modules.sh
+
+# Corriger automatiquement les permissions
+./secubox-tools/fix-permissions.sh --local
+
+# JSON
+jsonlint file.json
+
+# Shell
+shellcheck root/usr/libexec/rpcd/*
+```
+
+### Build
+```bash
+# Build local
+./secubox-tools/local-build.sh build luci-app-module-name
+
+# Build OpenWrt SDK
+make package/luci-app-module-name/compile V=s
+```
+
+### Deploy
+```bash
+# Copier fichiers
+scp file.js root@192.168.8.191:/www/luci-static/resources/
+
+# Fix permissions
+ssh root@192.168.8.191 "chmod 644 /www/luci-static/resources/**/*.css"
+
+# Clear cache + restart
+ssh root@192.168.8.191 "rm -f /tmp/luci-indexcache /tmp/luci-modulecache/* && /etc/init.d/rpcd restart && /etc/init.d/uhttpd restart"
+```
+
+### Debug
+```bash
+# Test RPCD
+ssh root@router "ubus list | grep luci.module"
+ssh root@router "ubus call luci.module-name getStatus"
+
+# Check files
+ssh root@router "ls -la /www/luci-static/resources/view/module-name/"
+
+# Logs
+ssh root@router "logread | grep -i error"
+```
+
+---
+
+## 🚨 Common Errors & Quick Fixes
+
+| Error | Quick Fix |
+|-------|-----------|
+| **-32000 Object not found** | Rename RPCD file to match ubus object |
+| **404 View not found** | Fix menu path to match file location |
+| **403 Forbidden CSS** | `chmod 644 *.css` |
+| **[object HTMLButtonElement]** | Remove array wrapper: `E('div', {}, renderButtons())` |
+| **Styles not updating** | Clear browser cache (Ctrl+Shift+R) + mode privé |
+
+---
+
+## 📋 Pre-Commit Checklist
+
+- [ ] `./secubox-tools/fix-permissions.sh --local` ✅ (auto-fix)
+- [ ] `./secubox-tools/validate-modules.sh` ✅ (7 checks)
+- [ ] RPCD name = ubus object name
+- [ ] Menu path = view file path
+- [ ] Permissions: 755 (RPCD), 644 (CSS/JS) - auto-verified
+- [ ] JSON valide (jsonlint)
+- [ ] CSS: variables utilisées (pas hardcode)
+- [ ] CSS: dark mode supporté
+- [ ] JS: gestion d'erreur sur API calls
+- [ ] Version incrémentée (PKG_VERSION)
+
+---
+
+## 📁 File Structure Template
+
+```
+luci-app-<module>/
+├── Makefile
+├── htdocs/luci-static/resources/
+│   ├── view/<module>/
+│   │   └── overview.js
+│   └── <module>/
+│       ├── api.js
+│       ├── common.css
+│       └── overview.css
+└── root/
+    ├── usr/libexec/rpcd/
+    │   └── luci.<module>        ⚠️ MUST match ubus object!
+    └── usr/share/
+        ├── luci/menu.d/
+        │   └── luci-app-<module>.json
+        └── rpcd/acl.d/
+            └── luci-app-<module>.json
+```
+
+---
+
+## 🎯 Quick Code Templates
+
+### RPCD Script
+```bash
+#!/bin/sh
+case "$1" in
+    list)
+        echo '{"getStatus": {}, "getHealth": {}}'
+        ;;
+    call)
+        case "$2" in
+            getStatus)
+                printf '{"enabled": true}\n'
+                ;;
+        esac
+        ;;
+esac
+```
+
+### View (JavaScript)
+```javascript
+'use strict';
+'require view';
+'require <module>/api as API';
+
+return view.extend({
+    load: function() {
+        return API.getStatus();
+    },
+    render: function(data) {
+        return E('div', { 'class': 'sh-page-header' }, [
+            E('h2', { 'class': 'sh-page-title' }, 'Title')
+        ]);
+    },
+    handleSaveApply: null,
+    handleSave: null,
+    handleReset: null
+});
+```
+
+### Page Header
+```javascript
+E('div', { 'class': 'sh-page-header' }, [
+    E('div', {}, [
+        E('h2', { 'class': 'sh-page-title' }, [
+            E('span', { 'class': 'sh-page-title-icon' }, '🎯'),
+            'Page Title'
+        ]),
+        E('p', { 'class': 'sh-page-subtitle' }, 'Description')
+    ]),
+    E('div', { 'class': 'sh-stats-grid' }, [
+        E('div', { 'class': 'sh-stat-badge' }, [
+            E('div', { 'class': 'sh-stat-value' }, '92'),
+            E('div', { 'class': 'sh-stat-label' }, 'Score')
+        ])
+    ])
+])
+```
+
+### Card with Gradient Border
+```javascript
+E('div', { 'class': 'sh-card sh-card-success' }, [
+    E('div', { 'class': 'sh-card-header' }, [
+        E('h3', { 'class': 'sh-card-title' }, [
+            E('span', { 'class': 'sh-card-title-icon' }, '⚙️'),
+            'Card Title'
+        ])
+    ]),
+    E('div', { 'class': 'sh-card-body' }, [
+        // Content
+    ])
+])
+```
+
+---
+
+## 🌐 Test URLs
+
+```
+SecuBox Dashboard:
+https://192.168.8.191/cgi-bin/luci/admin/secubox
+
+System Hub:
+https://192.168.8.191/cgi-bin/luci/admin/secubox/system/system-hub
+```
+
+**TOUJOURS tester en mode privé** (Ctrl+Shift+N) après deploy!
+
+---
+
+## 📚 Documentation
+
+- **Guide complet:** [DEVELOPMENT-GUIDELINES.md](development-guidelines.md)
+- **Architecture:** [CLAUDE.md](claude.md)
+- **Validation:** `./secubox-tools/validate-modules.sh`
+- **Démo design:** https://cybermind.fr/apps/system-hub/demo.html
+
+---
+
+**Version:** 1.0.0 | **Date:** 2025-12-26
diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
new file mode 100644
index 00000000..31d5579b
--- /dev/null
+++ b/docs/stylesheets/extra.css
@@ -0,0 +1,44 @@
+/* SecuBox custom styling */
+
+:root {
+    --md-primary-fg-color: #6366f1;
+    --md-accent-fg-color: #8b5cf6;
+}
+
+/* Code blocks */
+.highlight {
+    border-radius: 0.375rem;
+}
+
+/* Cards grid */
+.grid.cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    gap: 1rem;
+    margin: 1.5rem 0;
+}
+
+.grid.cards > * {
+    border: 1px solid var(--md-default-fg-color--lightest);
+    border-radius: 0.375rem;
+    padding: 1rem;
+    transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.grid.cards > *:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+/* Gradient headings */
+h1 {
+    background: linear-gradient(135deg, #6366f1, #8b5cf6);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+/* Admonitions */
+.md-typeset .admonition {
+    border-radius: 0.375rem;
+}
diff --git a/docs/todo-analyse.md b/docs/todo-analyse.md
new file mode 100644
index 00000000..00972ae1
--- /dev/null
+++ b/docs/todo-analyse.md
@@ -0,0 +1,1080 @@
+# Documentation Improvement TODO
+
+**Version:** 1.0.0  
+**Last Updated:** 2025-12-28  
+**Status:** Active
+
+
+**Generated:** 2025-12-28
+**Based on:** Documentation Analysis Report
+**Overall Health:** 8.5/10 (Excellent)
+**Status:** 📋 Planning Phase
+
+---
+
+## Table of Contents
+
+1. [Immediate Actions (This Week)](#immediate-actions-this-week)
+2. [Short-term Actions (This Month)](#short-term-actions-this-month)
+3. [Long-term Actions (This Quarter)](#long-term-actions-this-quarter)
+4. [Optional Enhancements](#optional-enhancements)
+5. [Tracking & Metrics](#tracking--metrics)
+
+---
+
+## Immediate Actions (This Week)
+
+### Priority: 🔴 HIGH | Effort: ⚡ Low | Impact: 🎯 High
+
+### 1. Standardize Document Versions & Dates
+
+**Status:** ⬜ Not Started
+**Assignee:** _TBD_
+**Estimated Time:** 30 minutes
+
+**Problem:**
+- Version inconsistencies across documents
+- Some docs missing version/date headers
+- Different date formats used
+
+**Action Items:**
+- [ ] Add version header to all `.md` files
+- [ ] Use consistent date format: `YYYY-MM-DD`
+- [ ] Set all docs to v1.0.0 baseline
+- [ ] Document versioning policy
+
+**Files to Update:**
+```markdown
+Missing version headers:
+- CLAUDE.md
+- BUILD_ISSUES.md
+- LUCI_DEVELOPMENT_REFERENCE.md
+- MODULE-ENABLE-DISABLE-DESIGN.md
+
+Inconsistent dates:
+- DOCUMENTATION-INDEX.md: 2025-12-27
+- DEVELOPMENT-GUIDELINES.md: 2025-12-26
+- QUICK-START.md: 2025-12-26
+```
+
+**Template:**
+```markdown
+# Document Title
+
+**Version:** 1.0.0
+**Last Updated:** 2025-12-28
+**Status:** Active | Archived | Draft
+```
+
+**Acceptance Criteria:**
+- ✅ All `.md` files have version header
+- ✅ Dates use YYYY-MM-DD format
+- ✅ Version policy documented in DOCUMENTATION-INDEX.md
+
+---
+
+### 2. Add Cross-References Between Documents
+
+**Status:** ⬜ Not Started
+**Assignee:** _TBD_
+**Estimated Time:** 1 hour
+
+**Problem:**
+- Redundant content in multiple docs
+- No clear indication where to find complete information
+- Users may miss related content
+
+**Action Items:**
+- [ ] Add "See Also" sections to all major docs
+- [ ] Link quick references to detailed guides
+- [ ] Add navigation breadcrumbs
+- [ ] Create bi-directional links
+
+**Specific Cross-References to Add:**
+
+**QUICK-START.md:**
+```markdown
+## See Also
+
+- **Complete Guide:** [DEVELOPMENT-GUIDELINES.md](development-guidelines.md)
+- **Architecture Details:** [CLAUDE.md](claude.md) §2-6
+- **Code Examples:** [CODE-TEMPLATES.md](code-templates.md)
+- **Module Specs:** [FEATURE-REGENERATION-PROMPTS.md](feature-regeneration-prompts.md)
+```
+
+**PERMISSIONS-GUIDE.md:**
+```markdown
+> **📚 This is a quick reference guide.**
+> For complete deployment procedures, see [DEVELOPMENT-GUIDELINES.md §9](./DEVELOPMENT-GUIDELINES.md#deployment-procedures)
+```
+
+**VALIDATION-GUIDE.md:**
+```markdown
+> **🔗 Related:**
+> - Pre-commit checklist: [DEVELOPMENT-GUIDELINES.md §8.1](./DEVELOPMENT-GUIDELINES.md#pre-commit-checklist)
+> - Deployment validation: [DEVELOPMENT-GUIDELINES.md §8.3](./DEVELOPMENT-GUIDELINES.md#post-deploy-checklist)
+```
+
+**Acceptance Criteria:**
+- ✅ All docs have "See Also" sections
+- ✅ Quick references link to detailed guides
+- ✅ No orphaned documents
+
+---
+
+### 3. Archive Historical Documents
+
+**Status:** ⬜ Not Started
+**Assignee:** _TBD_
+**Estimated Time:** 15 minutes
+
+**Problem:**
+- Historical docs mixed with active working docs
+- Cluttered root directory (15 markdown files)
+- Confusion about which docs are current
+
+**Action Items:**
+- [ ] Create `docs/archive/` directory
+- [ ] Move historical documents
+- [ ] Update DOCUMENTATION-INDEX.md
+- [ ] Add README in archive explaining contents
+
+**Documents to Archive:**
+
+```bash
+mkdir -p docs/archive
+
+# Historical/completed documents
+mv COMPLETION_REPORT.md docs/archive/
+mv MODULE-ENABLE-DISABLE-DESIGN.md docs/archive/
+
+# Potentially merge/archive
+# (Review before moving)
+mv BUILD_ISSUES.md docs/archive/  # Merge into CLAUDE.md first?
+mv LUCI_DEVELOPMENT_REFERENCE.md docs/archive/  # External reference
+```
+
+**Create Archive README:**
+```markdown
+# docs/archive/README.md
+
+# Documentation Archive
+
+This directory contains historical and completed documentation.
+
+## Contents
+
+- **COMPLETION_REPORT.md** - Project completion report (2025-12-26)
+- **MODULE-ENABLE-DISABLE-DESIGN.md** - Design document for enable/disable feature
+- **BUILD_ISSUES.md** - Historical build issues (merged into CLAUDE.md)
+- **LUCI_DEVELOPMENT_REFERENCE.md** - External LuCI development reference
+
+## Active Documentation
+
+For current documentation, see the root directory or [DOCUMENTATION-INDEX.md](../DOCUMENTATION-INDEX.md)
+```
+
+**Acceptance Criteria:**
+- ✅ Archive directory created
+- ✅ Historical docs moved
+- ✅ Archive README exists
+- ✅ DOCUMENTATION-INDEX updated
+
+---
+
+## Short-term Actions (This Month)
+
+### Priority: 🟡 MEDIUM | Effort: ⚡⚡ Medium | Impact: 🎯 High
+
+### 4. Add Architecture Diagrams
+
+**Status:** ⬜ Not Started
+**Assignee:** _TBD_
+**Estimated Time:** 3-4 hours
+
+**Problem:**
+- No visual documentation
+- Complex architecture hard to understand from text alone
+- New contributors need visual reference
+
+**Action Items:**
+- [ ] Create architecture diagram (RPCD ↔ ubus ↔ JavaScript flow)
+- [ ] Create deployment workflow flowchart
+- [ ] Create component hierarchy diagram
+- [ ] Add UI component examples with screenshots
+
+**Diagrams to Create:**
+
+#### 4.1. System Architecture Diagram
+
+**Location:** DEVELOPMENT-GUIDELINES.md §2 or new ARCHITECTURE.md
+
+```mermaid
+graph TB
+    subgraph "Browser"
+        UI[JavaScript View<br/>overview.js]
+        API[API Module<br/>api.js]
+    end
+
+    subgraph "LuCI Framework"
+        RPC[RPC Layer<br/>L.rpc]
+        UHTTPD[uhttpd<br/>Web Server]
+    end
+
+    subgraph "Backend"
+        RPCD[RPCD Daemon]
+        SCRIPT[RPCD Script<br/>luci.module-name]
+        UBUS[ubus]
+    end
+
+    subgraph "System"
+        UCI[UCI Config]
+        SYS[System Services]
+    end
+
+    UI -->|API calls| API
+    API -->|RPC declare| RPC
+    RPC -->|HTTP/JSON| UHTTPD
+    UHTTPD -->|Call method| RPCD
+    RPCD -->|Execute| SCRIPT
+    SCRIPT -->|ubus call| UBUS
+    UBUS -->|Read/Write| UCI
+    UBUS -->|Control| SYS
+
+    style UI fill:#6366f1,color:#fff
+    style API fill:#8b5cf6,color:#fff
+    style SCRIPT fill:#22c55e,color:#fff
+```
+
+#### 4.2. Deployment Workflow Diagram
+
+**Location:** DEVELOPMENT-GUIDELINES.md §9
+
+```mermaid
+flowchart TD
+    START([Start Deployment]) --> CHECK1{Disk Space<br/>< 90%?}
+    CHECK1 -->|No| CLEAN[Clean Temp Files]
+    CLEAN --> CHECK1
+    CHECK1 -->|Yes| COPY[Copy Files to Router]
+
+    COPY --> FIX[Fix Permissions<br/>755 RPCD / 644 CSS-JS]
+    FIX --> CACHE[Clear LuCI Cache]
+    CACHE --> RESTART[Restart Services<br/>rpcd + uhttpd]
+
+    RESTART --> VERIFY{Verify}
+    VERIFY -->|ubus list| CHECK2{Object Found?}
+    CHECK2 -->|No| DEBUG1[Debug RPCD<br/>Check naming]
+    DEBUG1 --> FIX
+
+    CHECK2 -->|Yes| CHECK3{Files Accessible?}
+    CHECK3 -->|403 Error| DEBUG2[Fix Permissions<br/>chmod 644]
+    DEBUG2 --> FIX
+
+    CHECK3 -->|Yes| CHECK4{UI Loads?}
+    CHECK4 -->|404 Error| DEBUG3[Fix Menu Path]
+    DEBUG3 --> COPY
+
+    CHECK4 -->|Yes| SUCCESS([✅ Success])
+
+    style START fill:#6366f1,color:#fff
+    style SUCCESS fill:#22c55e,color:#fff
+    style DEBUG1 fill:#ef4444,color:#fff
+    style DEBUG2 fill:#ef4444,color:#fff
+    style DEBUG3 fill:#ef4444,color:#fff
+```
+
+#### 4.3. Component Hierarchy Diagram
+
+**Location:** DEVELOPMENT-GUIDELINES.md §1 (Design System)
+
+```mermaid
+graph TB
+    PAGE[Page Container] --> HEADER[sh-page-header]
+    PAGE --> CONTENT[sh-content]
+
+    HEADER --> TITLE[sh-page-title<br/>+ gradient]
+    HEADER --> SUBTITLE[sh-page-subtitle]
+    HEADER --> STATS[sh-stats-grid]
+
+    STATS --> BADGE1[sh-stat-badge]
+    STATS --> BADGE2[sh-stat-badge]
+
+    BADGE1 --> VALUE[sh-stat-value<br/>monospace]
+    BADGE1 --> LABEL[sh-stat-label<br/>uppercase]
+
+    CONTENT --> CARD1[sh-card]
+    CONTENT --> CARD2[sh-card]
+
+    CARD1 --> CARD_HEADER[sh-card-header]
+    CARD1 --> CARD_BODY[sh-card-body]
+
+    CARD_HEADER --> CARD_TITLE[sh-card-title]
+    CARD_TITLE --> ICON[sh-card-title-icon]
+
+    style PAGE fill:#0a0a0f,color:#fafafa,stroke:#6366f1
+    style HEADER fill:#12121a,color:#fafafa,stroke:#6366f1
+    style CARD1 fill:#12121a,color:#fafafa,stroke:#22c55e
+```
+
+**Acceptance Criteria:**
+- ✅ 3+ Mermaid diagrams added
+- ✅ Diagrams render correctly on GitHub
+- ✅ Diagrams included in relevant doc sections
+- ✅ Alt text provided for accessibility
+
+---
+
+### 5. Create Missing Documentation Guides
+
+**Status:** ⬜ Not Started
+**Assignee:** _TBD_
+**Estimated Time:** 6-8 hours
+
+**Problem:**
+- Testing practices not documented
+- Security best practices missing
+- Performance optimization not covered
+
+#### 5.1. Create TESTING.md
+
+**Status:** ⬜ Not Started
+**Estimated Time:** 2-3 hours
+
+**Outline:**
+```markdown
+# SecuBox Testing Guide
+
+## 1. Testing Philosophy
+- Unit tests for RPCD scripts
+- Integration tests for API modules
+- E2E tests for UI workflows
+- Manual testing checklist
+
+## 2. RPCD Script Testing
+- Test JSON output validity
+- Test error handling
+- Test edge cases
+- Mock ubus calls
+
+## 3. JavaScript Testing
+- Test API modules
+- Test view rendering
+- Test event handlers
+- Browser console checks
+
+## 4. Integration Testing
+- Test RPCD ↔ JavaScript flow
+- Test UCI config read/write
+- Test service restarts
+- Test permission scenarios
+
+## 5. UI Testing
+- Manual testing checklist
+- Browser compatibility
+- Responsive design verification
+- Dark/Light mode verification
+
+## 6. Automated Testing
+- GitHub Actions integration
+- Pre-commit hooks
+- CI/CD test workflows
+- Test coverage reporting
+
+## 7. Testing Tools
+- shellcheck for RPCD
+- jsonlint for JSON
+- Browser DevTools
+- curl for API testing
+```
+
+**Action Items:**
+- [ ] Write TESTING.md (follow outline above)
+- [ ] Add test examples for RPCD scripts
+- [ ] Add test examples for JavaScript
+- [ ] Document testing workflow
+- [ ] Add to DOCUMENTATION-INDEX.md
+
+#### 5.2. Create SECURITY.md
+
+**Status:** ⬜ Not Started
+**Estimated Time:** 2-3 hours
+
+**Outline:**
+```markdown
+# SecuBox Security Guide
+
+## 1. Security Principles
+- Least privilege
+- Input validation
+- Output sanitization
+- Secure defaults
+
+## 2. RPCD Security
+- Input validation in shell scripts
+- Command injection prevention
+- JSON injection prevention
+- File permission security (755 vs 644)
+
+## 3. ACL Security
+- Minimal permissions
+- Read vs Write separation
+- User group management
+- Permission auditing
+
+## 4. JavaScript Security
+- XSS prevention
+- CSRF protection
+- Input sanitization
+- Safe DOM manipulation
+
+## 5. Common Vulnerabilities
+- Command injection (shell scripts)
+- Path traversal
+- Unsafe eval()
+- Hardcoded credentials
+
+## 6. Security Checklist
+- Pre-deployment security review
+- ACL validation
+- Permission audit
+- Credential management
+
+## 7. Incident Response
+- Security issue reporting
+- Patch procedures
+- Rollback procedures
+```
+
+**Action Items:**
+- [ ] Write SECURITY.md (follow outline above)
+- [ ] Add security examples (good vs bad)
+- [ ] Document security review process
+- [ ] Add to DOCUMENTATION-INDEX.md
+
+#### 5.3. Create PERFORMANCE.md
+
+**Status:** ⬜ Not Started
+**Estimated Time:** 2 hours
+
+**Outline:**
+```markdown
+# SecuBox Performance Guide
+
+## 1. Performance Goals
+- Page load < 2s
+- API response < 500ms
+- Smooth animations (60fps)
+- Minimal memory footprint
+
+## 2. RPCD Optimization
+- Efficient shell scripting
+- Caching strategies
+- Avoid expensive operations
+- Optimize JSON generation
+
+## 3. JavaScript Optimization
+- Minimize DOM manipulation
+- Debounce/throttle events
+- Efficient polling
+- Code splitting
+
+## 4. CSS Optimization
+- Minimize repaints
+- Use CSS variables
+- Optimize animations
+- Reduce specificity
+
+## 5. Network Optimization
+- Minimize API calls
+- Batch requests
+- Cache static assets
+- Compress responses
+
+## 6. Profiling & Monitoring
+- Browser DevTools profiling
+- Network tab analysis
+- Memory profiling
+- Performance metrics
+
+## 7. Common Performance Issues
+- Excessive polling
+- Memory leaks
+- Inefficient selectors
+- Large payloads
+```
+
+**Action Items:**
+- [ ] Write PERFORMANCE.md (follow outline above)
+- [ ] Add performance benchmarks
+- [ ] Document profiling tools
+- [ ] Add to DOCUMENTATION-INDEX.md
+
+**Acceptance Criteria:**
+- ✅ TESTING.md created and complete
+- ✅ SECURITY.md created and complete
+- ✅ PERFORMANCE.md created and complete
+- ✅ All added to DOCUMENTATION-INDEX.md
+- ✅ Cross-references added to existing docs
+
+---
+
+### 6. Consolidate Validation Documentation
+
+**Status:** ⬜ Not Started
+**Assignee:** _TBD_
+**Estimated Time:** 2 hours
+
+**Problem:**
+- Validation content duplicated across multiple docs
+- VALIDATION-GUIDE.md (495 lines) overlaps with DEVELOPMENT-GUIDELINES §8
+- PERMISSIONS-GUIDE.md (229 lines) overlaps with DEVELOPMENT-GUIDELINES §8.2
+
+**Strategy: Single Source + Quick References**
+
+#### 6.1. Update DEVELOPMENT-GUIDELINES.md
+
+**Action Items:**
+- [ ] Expand §8 "Validation Checklist" with content from VALIDATION-GUIDE.md
+- [ ] Ensure all 7 validation checks documented
+- [ ] Add validation script usage examples
+- [ ] Mark as "Complete Reference"
+
+#### 6.2. Convert VALIDATION-GUIDE.md to Quick Reference
+
+**Action Items:**
+- [ ] Reduce to ~200 lines (quick command reference)
+- [ ] Add prominent link to DEVELOPMENT-GUIDELINES §8
+- [ ] Keep command examples only
+- [ ] Remove detailed explanations (link to main guide)
+
+**New Structure:**
+```markdown
+# Validation Quick Reference
+
+> **📚 Complete Guide:** [DEVELOPMENT-GUIDELINES.md §8](./DEVELOPMENT-GUIDELINES.md#validation-checklist)
+
+## Quick Commands
+
+### Run All Checks
+```bash
+./secubox-tools/validate-modules.sh
+```
+
+### Individual Checks
+```bash
+# Check 1: RPCD naming
+# Check 2: Menu paths
+# ...
+```
+
+## See Also
+- Detailed validation guide: [DEVELOPMENT-GUIDELINES.md §8]
+- Pre-commit checklist: [DEVELOPMENT-GUIDELINES.md §8.1]
+- Post-deploy checklist: [DEVELOPMENT-GUIDELINES.md §8.3]
+```
+
+#### 6.3. Convert PERMISSIONS-GUIDE.md to Quick Reference
+
+**Action Items:**
+- [ ] Reduce to ~150 lines
+- [ ] Add prominent link to DEVELOPMENT-GUIDELINES §9.2
+- [ ] Keep quick fixes only
+- [ ] Emphasize automated fix script
+
+**New Structure:**
+```markdown
+# Permissions Quick Reference
+
+> **📚 Complete Guide:** [DEVELOPMENT-GUIDELINES.md §9](./DEVELOPMENT-GUIDELINES.md#deployment-procedures)
+
+## Quick Fix (Automated)
+
+```bash
+# Local (before commit)
+./secubox-tools/fix-permissions.sh --local
+
+# Remote (after deploy)
+./secubox-tools/fix-permissions.sh --remote
+```
+
+## Manual Fix
+
+```bash
+# RPCD = 755
+chmod 755 /usr/libexec/rpcd/luci.*
+
+# CSS/JS = 644
+chmod 644 /www/luci-static/resources/**/*.{css,js}
+```
+
+## See Also
+- Complete deployment guide: [DEVELOPMENT-GUIDELINES.md §9]
+- Permission validation: [DEVELOPMENT-GUIDELINES.md §8.2]
+```
+
+**Acceptance Criteria:**
+- ✅ DEVELOPMENT-GUIDELINES §8 is complete reference
+- ✅ VALIDATION-GUIDE reduced to ~200 lines
+- ✅ PERMISSIONS-GUIDE reduced to ~150 lines
+- ✅ All quick references link to main guide
+- ✅ No content loss (moved to main guide)
+
+---
+
+### 7. Add UI Component Examples
+
+**Status:** ⬜ Not Started
+**Assignee:** _TBD_
+**Estimated Time:** 3 hours
+
+**Problem:**
+- Design system documented but no visual examples
+- Hard to understand component appearance from CSS alone
+- No screenshot reference for contributors
+
+**Action Items:**
+- [ ] Create `docs/images/` directory
+- [ ] Take screenshots of key UI components
+- [ ] Add to DEVELOPMENT-GUIDELINES §1
+- [ ] Create visual component library page
+
+**Screenshots Needed:**
+
+```
+docs/images/components/
+├── page-header-light.png
+├── page-header-dark.png
+├── stat-badges.png
+├── card-gradient-border.png
+├── card-success-border.png
+├── buttons-all-variants.png
+├── filter-tabs-active.png
+├── nav-tabs-sticky.png
+├── grid-layouts.png
+└── dark-light-comparison.png
+```
+
+**Add to DEVELOPMENT-GUIDELINES.md:**
+
+```markdown
+## Design System & UI Guidelines
+
+### Component Patterns
+
+#### 1. Page Header (Standard)
+
+![Page Header Example](./docs/images/components/page-header-dark.png)
+
+**HTML Structure:**
+```javascript
+E('div', { 'class': 'sh-page-header' }, [
+    // ...
+])
+```
+
+#### 2. Stats Badges
+
+![Stats Badges](./docs/images/components/stat-badges.png)
+
+Minimum 130px width, monospace font for values.
+```
+
+**Optional: Interactive Component Library**
+
+Create `docs/components/index.html` - Interactive showcase:
+- Live examples of all components
+- Code snippets
+- Dark/Light mode toggle
+- Responsive preview
+
+**Acceptance Criteria:**
+- ✅ 10+ component screenshots added
+- ✅ Images added to relevant doc sections
+- ✅ Dark and light mode examples
+- ✅ Responsive examples included
+
+---
+
+## Long-term Actions (This Quarter)
+
+### Priority: 🟢 LOW | Effort: ⚡⚡⚡ High | Impact: 🎯 Medium
+
+### 8. Documentation Automation
+
+**Status:** ⬜ Not Started
+**Assignee:** _TBD_
+**Estimated Time:** 8-12 hours
+
+#### 8.1. Version Synchronization Script
+
+**Problem:** Manual version updates error-prone
+
+**Create:** `scripts/sync-doc-versions.sh`
+
+```bash
+#!/bin/bash
+# Sync documentation versions
+
+VERSION=${1:-"1.0.0"}
+DATE=$(date +%Y-%m-%d)
+
+echo "Syncing docs to version $VERSION (date: $DATE)"
+
+# Update all markdown files
+find . -maxdepth 1 -name "*.md" -type f | while read -r file; do
+    if grep -q "^**Version:**" "$file"; then
+        sed -i "s/^\*\*Version:\*\*.*/\*\*Version:\*\* $VERSION/" "$file"
+        sed -i "s/^\*\*Last Updated:\*\*.*/\*\*Last Updated:\*\* $DATE/" "$file"
+        echo "✓ Updated $file"
+    fi
+done
+```
+
+**Action Items:**
+- [ ] Create version sync script
+- [ ] Add to pre-release checklist
+- [ ] Document in DOCUMENTATION-INDEX.md
+
+#### 8.2. Stale Content Detection
+
+**Problem:** No way to detect outdated documentation
+
+**Create:** `scripts/check-stale-docs.sh`
+
+```bash
+#!/bin/bash
+# Check for stale documentation
+
+WARN_DAYS=90  # Warn if not updated in 90 days
+ERROR_DAYS=180  # Error if not updated in 180 days
+
+find . -maxdepth 1 -name "*.md" -type f | while read -r file; do
+    # Extract date from file
+    date_str=$(grep "Last Updated:" "$file" | grep -oP '\d{4}-\d{2}-\d{2}')
+
+    if [ -n "$date_str" ]; then
+        # Calculate age
+        age_days=$(( ($(date +%s) - $(date -d "$date_str" +%s)) / 86400 ))
+
+        if [ $age_days -gt $ERROR_DAYS ]; then
+            echo "❌ $file is $age_days days old (>$ERROR_DAYS)"
+        elif [ $age_days -gt $WARN_DAYS ]; then
+            echo "⚠️  $file is $age_days days old (>$WARN_DAYS)"
+        fi
+    fi
+done
+```
+
+**Action Items:**
+- [ ] Create stale content detector
+- [ ] Add to CI/CD pipeline
+- [ ] Set up monthly review reminders
+
+#### 8.3. Auto-generate API Documentation
+
+**Problem:** API documentation manually maintained
+
+**Tools to Evaluate:**
+- JSDoc for JavaScript
+- ShellDoc for shell scripts
+- Custom script for RPCD methods
+
+**Action Items:**
+- [ ] Evaluate documentation generators
+- [ ] Create API doc generation script
+- [ ] Integrate into build process
+- [ ] Add to CI/CD
+
+**Acceptance Criteria:**
+- ✅ Version sync script working
+- ✅ Stale content detection in CI
+- ✅ API docs auto-generated from code
+
+---
+
+### 9. Interactive Documentation
+
+**Status:** ⬜ Not Started
+**Assignee:** _TBD_
+**Estimated Time:** 12-16 hours
+
+#### 9.1. Searchable Documentation Site
+
+**Options:**
+- GitHub Pages with mkdocs
+- Docusaurus
+- VuePress
+- Custom static site
+
+**Features:**
+- Full-text search
+- Version selector
+- Dark/Light theme
+- Mobile-responsive
+- Table of contents sidebar
+
+**Action Items:**
+- [ ] Evaluate documentation frameworks
+- [ ] Choose platform (recommend: mkdocs-material)
+- [ ] Configure and deploy
+- [ ] Set up automatic deployment
+
+#### 9.2. Interactive Code Examples
+
+**Features:**
+- Live code editor (CodePen/JSFiddle embeds)
+- Component playground
+- RPCD JSON validator
+- CSS variable playground
+
+**Action Items:**
+- [ ] Create interactive examples for key components
+- [ ] Embed in documentation site
+- [ ] Add to CODE-TEMPLATES.md
+
+#### 9.3. Video Tutorials
+
+**Topics:**
+- Getting started (10 min)
+- Creating a new module (20 min)
+- Debugging common errors (15 min)
+- Deployment workflow (10 min)
+
+**Action Items:**
+- [ ] Script video content
+- [ ] Record screencasts
+- [ ] Host on YouTube
+- [ ] Embed in docs
+
+**Acceptance Criteria:**
+- ✅ Documentation site deployed
+- ✅ Full-text search working
+- ✅ 5+ interactive examples
+- ✅ 2+ video tutorials
+
+---
+
+### 10. Internationalization
+
+**Status:** ⬜ Not Started
+**Assignee:** _TBD_
+**Estimated Time:** 20+ hours
+
+**Problem:**
+- Current docs mix French and English
+- DEVELOPMENT-GUIDELINES mostly French
+- Other docs mostly English
+
+**Decision Required:**
+- Option A: English-only (translate French sections)
+- Option B: Bilingual (full French + English versions)
+- Option C: As-is (mixed, target French developers)
+
+**If Option A (English-only):**
+- [ ] Translate DEVELOPMENT-GUIDELINES to English
+- [ ] Standardize all docs in English
+- [ ] Keep French in code comments only
+
+**If Option B (Bilingual):**
+```
+docs/
+├── en/
+│   ├── DEVELOPMENT-GUIDELINES.md
+│   ├── QUICK-START.md
+│   └── ...
+└── fr/
+    ├── DEVELOPMENT-GUIDELINES.md
+    ├── QUICK-START.md
+    └── ...
+```
+
+**Action Items:**
+- [ ] Decide on i18n strategy
+- [ ] Document decision in DOCUMENTATION-INDEX.md
+- [ ] Implement chosen strategy
+- [ ] Set up translation maintenance process
+
+**Acceptance Criteria:**
+- ✅ Language strategy documented
+- ✅ Consistent language use across docs
+- ✅ Navigation supports chosen approach
+
+---
+
+## Optional Enhancements
+
+### Priority: 🔵 NICE-TO-HAVE | Effort: Variable | Impact: 🎯 Low-Medium
+
+### 11. Documentation Quality Metrics
+
+**Tools:**
+- Vale (prose linter)
+- markdownlint (markdown linter)
+- write-good (writing style checker)
+
+**Action Items:**
+- [ ] Set up automated linting
+- [ ] Configure style guide (Microsoft, Google, or custom)
+- [ ] Add to CI/CD
+- [ ] Fix existing issues
+
+---
+
+### 12. Contributor Onboarding Guide
+
+**Create:** `CONTRIBUTING.md`
+
+**Sections:**
+- How to contribute
+- Code of conduct
+- Documentation standards
+- PR process
+- Review guidelines
+
+---
+
+### 13. FAQ Document
+
+**Create:** `FAQ.md`
+
+**Sections:**
+- Common questions from DEVELOPMENT-GUIDELINES §7
+- Troubleshooting quick links
+- Best practices summary
+
+---
+
+### 14. Changelog
+
+**Create:** `CHANGELOG.md`
+
+Track documentation changes:
+```markdown
+# Changelog
+
+## [1.1.0] - 2025-XX-XX
+
+### Added
+- TESTING.md - Complete testing guide
+- SECURITY.md - Security best practices
+- Architecture diagrams
+
+### Changed
+- VALIDATION-GUIDE.md - Reduced to quick reference
+- DEVELOPMENT-GUIDELINES.md - Expanded validation section
+
+### Removed
+- COMPLETION_REPORT.md - Moved to docs/archive/
+```
+
+---
+
+## Tracking & Metrics
+
+### Success Metrics
+
+| Metric | Current | Target | Status |
+|--------|---------|--------|--------|
+| **Documentation Coverage** | 90% | 95% | 🟡 |
+| **Average Document Age** | <30 days | <60 days | 🟢 |
+| **Cross-Reference Density** | Low | High | 🔴 |
+| **Visual Documentation** | 0% | 30% | 🔴 |
+| **User Satisfaction** | N/A | 4.5/5 | - |
+
+### Progress Tracking
+
+**Immediate (Week 1):**
+- [ ] Task 1: Version standardization (30 min)
+- [ ] Task 2: Cross-references (1 hr)
+- [ ] Task 3: Archive historical docs (15 min)
+
+**Progress:** 0/3 (0%)
+
+**Short-term (Month 1):**
+- [ ] Task 4: Architecture diagrams (4 hrs)
+- [ ] Task 5.1: TESTING.md (3 hrs)
+- [ ] Task 5.2: SECURITY.md (3 hrs)
+- [ ] Task 5.3: PERFORMANCE.md (2 hrs)
+- [ ] Task 6: Consolidate validation docs (2 hrs)
+- [ ] Task 7: UI component examples (3 hrs)
+
+**Progress:** 0/6 (0%)
+
+**Long-term (Quarter 1):**
+- [ ] Task 8: Documentation automation (12 hrs)
+- [ ] Task 9: Interactive documentation (16 hrs)
+- [ ] Task 10: Internationalization (20 hrs)
+
+**Progress:** 0/3 (0%)
+
+### Review Schedule
+
+| Review Type | Frequency | Next Review |
+|-------------|-----------|-------------|
+| **Quick Review** | Weekly | TBD |
+| **Deep Review** | Monthly | TBD |
+| **Audit** | Quarterly | TBD |
+
+---
+
+## Notes & Decisions
+
+### Decision Log
+
+| Date | Decision | Rationale | Status |
+|------|----------|-----------|--------|
+| 2025-12-28 | Keep current redundancy model | Standalone usability important | ✅ Accepted |
+| TBD | I18n strategy (EN/FR/Mixed) | Pending stakeholder input | ⏳ Pending |
+| TBD | Documentation site platform | Pending evaluation | ⏳ Pending |
+
+### Risks & Concerns
+
+1. **Maintenance Burden:** More docs = more maintenance
+   - Mitigation: Automation (Task 8)
+
+2. **Translation Cost:** Bilingual docs double the effort
+   - Mitigation: Choose English-only or use translation tools
+
+3. **Diagram Maintenance:** Diagrams can become outdated
+   - Mitigation: Generate from code where possible
+
+### Dependencies
+
+- **External:** GitHub Pages (if chosen for doc site)
+- **Internal:** secubox-tools scripts must be stable
+- **Human:** Technical writer for video tutorials (optional)
+
+---
+
+## Quick Start Guide (Using This TODO)
+
+### For Immediate Action:
+```bash
+# 1. Start with immediate tasks
+# Complete tasks 1-3 this week (2 hours total)
+
+# 2. Review and prioritize short-term
+# Schedule 4-7 over next month
+
+# 3. Plan long-term initiatives
+# Quarterly planning for 8-10
+```
+
+### For Project Management:
+- Copy tasks to GitHub Issues/Projects
+- Assign owners
+- Set deadlines
+- Track in Kanban board
+
+### For Progress Updates:
+Update this file weekly:
+- Check off completed items: `- [x]`
+- Update progress percentages
+- Add notes to decision log
+
+---
+
+**Last Updated:** 2025-12-28
+**Next Review:** TBD
+**Owner:** TBD
+**Status:** 📋 Active Planning
diff --git a/docs/validation-guide.md b/docs/validation-guide.md
new file mode 100644
index 00000000..8b17e2af
--- /dev/null
+++ b/docs/validation-guide.md
@@ -0,0 +1,518 @@
+# SecuBox Module Validation Guide
+
+**Version:** 1.0.0  
+**Last Updated:** 2025-12-28  
+**Status:** Active
+
+> **📚 Complete Reference:**
+> This is a detailed validation guide. For quick commands, see [QUICK-START.md](quick-start.md)
+>
+> **Related Documentation:**
+> - Complete guide: [DEVELOPMENT-GUIDELINES.md §8](./DEVELOPMENT-GUIDELINES.md#validation-checklist)
+> - Pre-commit checklist: [DEVELOPMENT-GUIDELINES.md §8.1](./DEVELOPMENT-GUIDELINES.md#pre-commit-checklist)
+> - Post-deploy checklist: [DEVELOPMENT-GUIDELINES.md §8.3](./DEVELOPMENT-GUIDELINES.md#post-deploy-checklist)
+> - Permissions guide: [PERMISSIONS-GUIDE.md](permissions-guide.md)
+> - Automation briefing: [CODEX.md](codex.md)
+
+---
+
+## See Also
+
+- **Quick Commands:** [QUICK-START.md](quick-start.md)
+- **Permissions Reference:** [PERMISSIONS-GUIDE.md](permissions-guide.md)
+- **Automation Guardrails:** [CODEX.md](codex.md)
+- **Deployment Procedures:** [DEVELOPMENT-GUIDELINES.md §9](./DEVELOPMENT-GUIDELINES.md#deployment-procedures)
+
+This guide explains the validation checks performed on SecuBox modules during generation and before git push.
+
+## Overview
+
+SecuBox uses a multi-layered validation approach:
+
+1. **Module Generation Validation** - Validates newly created/modified modules
+2. **Pre-Push Validation** - Blocks git push if critical issues are found
+3. **Runtime Validation** - Continuous checks on deployed modules
+
+## Validation Tools
+
+### 1. validate-module-generation.sh
+
+Comprehensive validation for a single module during/after generation.
+
+**Usage:**
+```bash
+./secubox-tools/validate-module-generation.sh luci-app-cdn-cache
+```
+
+**Checks performed:**
+- ✅ Makefile completeness and correctness
+- ✅ RPCD script naming convention (must use `luci.` prefix)
+- ✅ RPCD script executable permissions
+- ✅ RPCD script structure (list/call handlers)
+- ✅ ACL file JSON validity
+- ✅ ACL permissions cover RPCD methods
+- ✅ Menu file JSON validity
+- ✅ Menu paths match view file locations
+- ✅ JavaScript view files exist
+- ✅ JavaScript strict mode usage
+- ✅ RPC method calls match RPCD methods
+- ✅ ubus object names match RPCD script names
+- ✅ UCI config validity (if present)
+- ✅ Security scan (hardcoded credentials, dangerous commands)
+- ✅ Documentation presence
+
+**Exit codes:**
+- `0` - All checks passed
+- `1` - Critical errors found (module should not be deployed)
+
+### 2. pre-push-validation.sh
+
+Validates all modules before allowing git push.
+
+**Usage:**
+```bash
+# Automatic (via git hook):
+git push  # validation runs automatically
+
+# Manual:
+./secubox-tools/pre-push-validation.sh
+```
+
+**Checks performed:**
+- ✅ Git staged changes check
+- ✅ RPCD naming conventions across all modules
+- ✅ Menu path validation across all modules
+- ✅ JSON syntax validation
+- ✅ RPCD executable permissions
+- ✅ ACL method coverage
+- ✅ Makefile validation
+- ✅ Security scans
+- ✅ Full module validation on modified modules
+
+**Exit codes:**
+- `0` - Push allowed
+- `1` - Push blocked (critical errors)
+
+### 3. validate-modules.sh
+
+Fast validation of all modules (existing tool).
+
+**Usage:**
+```bash
+./secubox-tools/validate-modules.sh
+```
+
+See `secubox-tools/README.md` for details.
+
+## Installing Git Hooks
+
+To enable automatic validation before git push:
+
+```bash
+./secubox-tools/install-git-hooks.sh
+```
+
+This creates a symbolic link from `.git/hooks/pre-push` to `secubox-tools/pre-push-validation.sh`.
+
+## Critical Naming Conventions
+
+### 1. RPCD Script MUST Match ubus Object
+
+**Rule:** The RPCD script filename MUST exactly match the ubus object name declared in JavaScript.
+
+**Why:** LuCI's RPC system looks for RPCD scripts by their filename. If the name doesn't match, you get:
+- `RPC call failed with error -32000: Object not found`
+- `Command failed: Method not found`
+
+**Example:**
+
+```javascript
+// JavaScript (htdocs/luci-static/resources/view/cdn-cache/overview.js)
+var callStatus = rpc.declare({
+    object: 'luci.cdn-cache',  // ← This must match RPCD filename
+    method: 'status'
+});
+```
+
+```bash
+# RPCD script filename MUST be:
+root/usr/libexec/rpcd/luci.cdn-cache  # ← Exactly 'luci.cdn-cache'
+```
+
+**Common mistakes:**
+- ❌ `root/usr/libexec/rpcd/cdn-cache` (missing `luci.` prefix)
+- ❌ `root/usr/libexec/rpcd/luci-cdn-cache` (using dash instead of dot)
+- ❌ `root/usr/libexec/rpcd/cdn_cache` (using underscore)
+
+**Validation:**
+```bash
+# Check naming:
+./secubox-tools/validate-module-generation.sh luci-app-cdn-cache
+
+# Look for:
+# ✓ RPCD script follows naming convention (luci.* prefix)
+# ✓ CRITICAL: RPCD script name matches ACL ubus object
+```
+
+### 2. Menu Paths MUST Match View File Locations
+
+**Rule:** Menu JSON `path` entries MUST correspond to actual view file paths.
+
+**Why:** LuCI loads views based on the path in the menu. Wrong path = HTTP 404.
+
+**Example:**
+
+```json
+// Menu (root/usr/share/luci/menu.d/luci-app-netifyd-dashboard.json)
+{
+    "action": {
+        "type": "view",
+        "path": "netifyd-dashboard/overview"  // ← Must match file location
+    }
+}
+```
+
+```bash
+# View file MUST exist at:
+htdocs/luci-static/resources/view/netifyd-dashboard/overview.js
+#                                  ↑ Same path as menu ↑
+```
+
+**Common mistakes:**
+- ❌ Menu: `"path": "netifyd/overview"` but file at `view/netifyd-dashboard/overview.js`
+- ❌ Menu: `"path": "overview"` but file at `view/netifyd-dashboard/overview.js`
+
+**Validation:**
+```bash
+# Check paths:
+./secubox-tools/validate-module-generation.sh luci-app-netifyd-dashboard
+
+# Look for:
+# ✓ Menu path 'netifyd-dashboard/overview' → view file EXISTS
+```
+
+### 3. All ubus Objects MUST Use `luci.` Prefix
+
+**Rule:** Every ubus object declaration must start with `luci.`
+
+**Why:** Consistent naming convention for LuCI applications. ACL system expects it.
+
+**Example:**
+
+```javascript
+// ✅ Correct:
+object: 'luci.cdn-cache'
+object: 'luci.system-hub'
+object: 'luci.wireguard-dashboard'
+
+// ❌ Wrong:
+object: 'cdn-cache'  // Missing luci. prefix
+object: 'systemhub'  // Missing luci. prefix
+```
+
+**Validation:**
+```bash
+# Check convention:
+./secubox-tools/validate-modules.sh
+
+# Look for:
+# ✓ ubus object 'luci.cdn-cache' follows naming convention
+```
+
+## Module Generation Checklist
+
+Use this checklist when generating a new module:
+
+### Phase 1: Initial Generation
+
+- [ ] Create module directory: `luci-app-<module-name>/`
+- [ ] Generate Makefile with all required fields
+- [ ] Create RPCD script at `root/usr/libexec/rpcd/luci.<module-name>`
+- [ ] Make RPCD script executable: `chmod +x`
+- [ ] Add shebang to RPCD: `#!/bin/sh`
+- [ ] Implement RPCD methods (list, call, status, etc.)
+- [ ] Create ACL file with read/write permissions
+- [ ] Create menu JSON with correct paths
+- [ ] Create view JavaScript files
+- [ ] Add `'use strict';` to all JS files
+
+### Phase 2: Validation
+
+- [ ] Run module generation validation:
+  ```bash
+  ./secubox-tools/validate-module-generation.sh luci-app-<module-name>
+  ```
+
+- [ ] Fix all ERRORS (critical)
+- [ ] Review all WARNINGS (recommended)
+
+### Phase 3: Integration Validation
+
+- [ ] Verify RPCD script name matches ubus object:
+  ```bash
+  grep -r "object:" luci-app-<module-name>/htdocs --include="*.js"
+  ls -la luci-app-<module-name>/root/usr/libexec/rpcd/
+  # Names must match exactly
+  ```
+
+- [ ] Verify menu paths match view files:
+  ```bash
+  grep '"path":' luci-app-<module-name>/root/usr/share/luci/menu.d/*.json
+  ls -R luci-app-<module-name>/htdocs/luci-static/resources/view/
+  # Paths must align
+  ```
+
+- [ ] Verify ACL permissions cover all RPCD methods:
+  ```bash
+  grep 'case "$2"' luci-app-<module-name>/root/usr/libexec/rpcd/*
+  grep -A 20 '"ubus":' luci-app-<module-name>/root/usr/share/rpcd/acl.d/*.json
+  # All methods should be in ACL
+  ```
+
+### Phase 4: Pre-Commit
+
+- [ ] Run comprehensive validation:
+  ```bash
+  ./secubox-tools/validate-modules.sh
+  ```
+
+- [ ] Review security scan results
+- [ ] Check JSON validity:
+  ```bash
+  find luci-app-<module-name> -name "*.json" -exec python3 -m json.tool {} \; > /dev/null
+  ```
+
+- [ ] Optional: Run shellcheck on RPCD:
+  ```bash
+  shellcheck luci-app-<module-name>/root/usr/libexec/rpcd/*
+  ```
+
+### Phase 5: Git Commit
+
+- [ ] Stage changes:
+  ```bash
+  git add luci-app-<module-name>
+  ```
+
+- [ ] Commit with descriptive message:
+  ```bash
+  git commit -m "feat: implement <module-name> module
+
+  - Add RPCD backend with methods: status, get_*, set_*
+  - Create views for overview, settings, etc.
+  - Configure ACL permissions
+  - Add menu entries
+
+  🤖 Generated with [Claude Code](https://claude.com/claude-code)
+
+  Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>"
+  ```
+
+- [ ] Push (validation runs automatically):
+  ```bash
+  git push
+  ```
+
+## Common Validation Errors and Fixes
+
+### Error: RPCD script name doesn't match ubus object
+
+```
+✗ ERROR: luci-app-cdn-cache: RPCD script 'cdn-cache' does NOT match ubus object 'luci.cdn-cache'
+```
+
+**Fix:**
+```bash
+cd luci-app-cdn-cache/root/usr/libexec/rpcd
+mv cdn-cache luci.cdn-cache
+```
+
+### Error: Menu path → file NOT FOUND
+
+```
+✗ ERROR: luci-app-netifyd: Menu path 'netifyd/overview' → file NOT FOUND
+Expected: htdocs/luci-static/resources/view/netifyd/overview.js
+```
+
+**Fix Option 1:** Update menu path to match file:
+```bash
+# Edit root/usr/share/luci/menu.d/luci-app-netifyd-dashboard.json
+# Change: "path": "netifyd/overview"
+# To:     "path": "netifyd-dashboard/overview"
+```
+
+**Fix Option 2:** Move view file to match menu:
+```bash
+mv htdocs/luci-static/resources/view/netifyd-dashboard \
+   htdocs/luci-static/resources/view/netifyd
+```
+
+### Error: RPCD script is NOT executable
+
+```
+✗ ERROR: luci-app-cdn-cache: luci.cdn-cache is NOT executable
+```
+
+**Fix:**
+```bash
+chmod +x luci-app-cdn-cache/root/usr/libexec/rpcd/luci.cdn-cache
+```
+
+### Error: Method 'get_stats' from RPCD not found in ACL
+
+```
+⚠ WARNING: luci-app-cdn-cache: Method 'get_stats' from RPCD not in ACL
+```
+
+**Fix:**
+```bash
+# Edit root/usr/share/rpcd/acl.d/luci-app-cdn-cache.json
+# Add 'get_stats' to the read.ubus array:
+{
+    "luci-app-cdn-cache": {
+        "read": {
+            "ubus": {
+                "luci.cdn-cache": ["status", "get_config", "get_stats"]
+                                                           ↑ Add here
+            }
+        }
+    }
+}
+```
+
+### Error: Invalid JSON syntax
+
+```
+✗ ERROR: luci-app-cdn-cache: acl.d JSON is INVALID - syntax error
+```
+
+**Fix:**
+```bash
+# Validate JSON:
+python3 -m json.tool root/usr/share/rpcd/acl.d/luci-app-cdn-cache.json
+
+# Common issues:
+# - Missing comma between array elements
+# - Trailing comma after last element
+# - Unescaped quotes in strings
+```
+
+## Bypassing Validation (NOT RECOMMENDED)
+
+In rare cases, you may need to bypass validation:
+
+```bash
+# Skip pre-push validation:
+git push --no-verify
+
+# Skip module generation validation:
+# (can't bypass - it's informational only)
+```
+
+**⚠️ WARNING:** Bypassing validation can lead to broken modules in production!
+
+## Integration with CI/CD
+
+### GitHub Actions
+
+Add validation to your workflow:
+
+```yaml
+name: Validate Modules
+
+on: [push, pull_request]
+
+jobs:
+  validate:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install dependencies
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y python3 shellcheck
+
+      - name: Run module validation
+        run: |
+          chmod +x secubox-tools/validate-modules.sh
+          ./secubox-tools/validate-modules.sh
+
+      - name: Run pre-push validation
+        run: |
+          chmod +x secubox-tools/pre-push-validation.sh
+          ./secubox-tools/pre-push-validation.sh
+```
+
+## Best Practices
+
+1. **Always validate before committing**
+   ```bash
+   ./secubox-tools/validate-module-generation.sh luci-app-<module>
+   ```
+
+2. **Install git hooks for automatic validation**
+   ```bash
+   ./secubox-tools/install-git-hooks.sh
+   ```
+
+3. **Fix errors immediately** - Don't accumulate validation debt
+
+4. **Review warnings** - They often indicate real issues
+
+5. **Test on OpenWrt** before marking complete:
+   ```bash
+   scp bin/packages/*/base/luci-app-*.ipk root@192.168.1.1:/tmp/
+   ssh root@192.168.1.1
+   opkg install /tmp/luci-app-*.ipk
+   /etc/init.d/rpcd restart
+   /etc/init.d/uhttpd restart
+   ```
+
+6. **Document module-specific requirements** in module README
+
+## Troubleshooting
+
+### Validation script fails to run
+
+```bash
+# Make sure scripts are executable:
+chmod +x secubox-tools/*.sh
+
+# Check dependencies:
+which python3  # For JSON validation
+which shellcheck  # For shell script validation
+```
+
+### Git hook not running
+
+```bash
+# Check hook is installed:
+ls -la .git/hooks/pre-push
+
+# Reinstall hooks:
+./secubox-tools/install-git-hooks.sh
+```
+
+### False positives in validation
+
+If validation incorrectly reports an error, please report it:
+- Create issue with full validation output
+- Include module name and specific check that failed
+- We'll update validation logic
+
+## Additional Resources
+
+- [CLAUDE.md](CLAUDE.md) - Main project documentation
+- [secubox-tools/README.md](secubox-tools/README.md) - Tools documentation
+- [.claude/module-prompts.md](.claude/module-prompts.md) - Module generation prompts
+
+## Support
+
+If you encounter validation issues:
+
+1. Check this guide for common errors
+2. Run validation with verbose output
+3. Review CLAUDE.md for naming conventions
+4. Create issue on GitHub with validation output
diff --git a/mkdocs.yml b/mkdocs.yml
new file mode 100644
index 00000000..0980ea87
--- /dev/null
+++ b/mkdocs.yml
@@ -0,0 +1,115 @@
+site_name: SecuBox Documentation
+site_description: OpenWrt LuCI Security & Management Suite
+site_author: CyberMind.fr
+site_url: https://gkerma.github.io/secubox-openwrt/
+
+repo_name: gkerma/secubox-openwrt
+repo_url: https://github.com/gkerma/secubox-openwrt
+edit_uri: edit/master/DOCS/
+
+theme:
+  name: material
+  palette:
+    # Light mode
+    - media: "(prefers-color-scheme: light)"
+      scheme: default
+      primary: indigo
+      accent: purple
+      toggle:
+        icon: material/brightness-7
+        name: Switch to dark mode
+    # Dark mode
+    - media: "(prefers-color-scheme: dark)"
+      scheme: slate
+      primary: indigo
+      accent: purple
+      toggle:
+        icon: material/brightness-4
+        name: Switch to light mode
+
+  features:
+    - navigation.instant
+    - navigation.tracking
+    - navigation.tabs
+    - navigation.tabs.sticky
+    - navigation.sections
+    - navigation.expand
+    - navigation.top
+    - search.suggest
+    - search.highlight
+    - content.code.copy
+    - content.code.annotate
+
+  icon:
+    repo: fontawesome/brands/github
+    edit: material/pencil
+    view: material/eye
+
+  font:
+    text: Inter
+    code: JetBrains Mono
+
+extra_css:
+  - stylesheets/extra.css
+
+extra:
+  social:
+    - icon: fontawesome/brands/github
+      link: https://github.com/gkerma/secubox-openwrt
+    - icon: fontawesome/solid/globe
+      link: https://secubox.cybermood.eu
+
+  version:
+    provider: mike
+
+markdown_extensions:
+  - pymdownx.highlight:
+      anchor_linenums: true
+  - pymdownx.inlinehilite
+  - pymdownx.snippets
+  - pymdownx.superfences:
+      custom_fences:
+        - name: mermaid
+          class: mermaid
+          format: !!python/name:pymdownx.superfences.fence_code_format
+  - pymdownx.tabbed:
+      alternate_style: true
+  - pymdownx.tasklist:
+      custom_checkbox: true
+  - admonition
+  - pymdownx.details
+  - attr_list
+  - md_in_html
+  - tables
+  - toc:
+      permalink: true
+
+nav:
+  - Home: index.md
+  - Getting Started:
+    - Quick Start: quick-start.md
+    - Documentation Index: documentation-index.md
+
+  - Development:
+    - Development Guidelines: development-guidelines.md
+    - Code Templates: code-templates.md
+    - Module Implementation: module-implementation-guide.md
+
+  - Reference:
+    - RPCD & Architecture: claude.md
+    - Validation Guide: validation-guide.md
+    - Permissions Guide: permissions-guide.md
+    - LuCI Development: luci-development-reference.md
+
+  - Modules:
+    - Module Status: module-status.md
+    - Feature Prompts: feature-regeneration-prompts.md
+
+  - Tools & Roadmap:
+    - TODO Roadmap: todo-analyse.md
+
+  - Archive:
+    - Archive Index: archive/index.md
+    - Build Issues: archive/build-issues.md
+    - Completion Report: archive/completion-report.md
+    - Module Enable/Disable: archive/module-enable-disable-design.md
diff --git a/scripts/setup-github-pages.sh b/scripts/setup-github-pages.sh
index f49bffc0..2adb356e 100755
--- a/scripts/setup-github-pages.sh
+++ b/scripts/setup-github-pages.sh
@@ -19,25 +19,46 @@ fi
 
 echo "📦 Checking dependencies..."
 
-# Check for Python and pip
+# Check for Python
 if ! command -v python3 &> /dev/null; then
     echo "❌ Python 3 is required but not installed."
-    echo "   Install: sudo apt-get install python3 python3-pip"
-    exit 1
-fi
-
-if ! command -v pip3 &> /dev/null; then
-    echo "❌ pip3 is required but not installed."
-    echo "   Install: sudo apt-get install python3-pip"
+    echo "   Install: sudo apt-get install python3"
     exit 1
 fi
 
 # Install mkdocs if not present
 if ! command -v mkdocs &> /dev/null; then
     echo "📥 Installing MkDocs..."
-    pip3 install mkdocs mkdocs-material pymdown-extensions
+
+    # Check if we're on a Debian/Ubuntu system with apt
+    if command -v apt-get &> /dev/null; then
+        echo "   Using apt package manager (recommended for Debian/Ubuntu)"
+        echo "   Running: sudo apt-get install -y mkdocs mkdocs-material python3-pymdownx"
+        sudo apt-get update -qq
+        sudo apt-get install -y mkdocs mkdocs-material python3-pymdownx
+    else
+        # Fallback to pip with virtual environment or user install
+        echo "   Using pip3 (fallback method)"
+        if python3 -m pip --version &> /dev/null; then
+            # Try user install first (doesn't require sudo, doesn't break system)
+            python3 -m pip install --user mkdocs mkdocs-material pymdown-extensions
+        else
+            echo "❌ Error: pip not available and apt not found."
+            echo "   Please install mkdocs manually:"
+            echo "   - Debian/Ubuntu: sudo apt-get install mkdocs mkdocs-material"
+            echo "   - macOS: brew install mkdocs"
+            echo "   - Other: pip3 install --user mkdocs mkdocs-material"
+            exit 1
+        fi
+    fi
+
+    # Verify installation
+    if ! command -v mkdocs &> /dev/null; then
+        echo "❌ Error: MkDocs installation failed."
+        exit 1
+    fi
 else
-    echo "✅ MkDocs already installed"
+    echo "✅ MkDocs already installed ($(mkdocs --version | head -1))"
 fi
 
 echo ""