docs: Add comprehensive documentation with screenshot structure

Creates docs/ directory with secubox-deb style documentation: - README.md: Project overview and quick links - SCREENSHOTS.md: Module screenshot gallery (pending captures) - UI-GUIDE.md: CRT P31 theme design guide - MODULES.md: Complete package catalog (75+ modules) - API.md: RPCD/ubus API reference Screenshot directory structure: - docs/screenshots/router/ for OpenWrt router captures - docs/wiki/ for multilingual documentation Documentation follows secubox-deb format with: - Organized module categories - Status indicators (✅ Captured / ⏳ Pending) - Theme color palette reference - API method tables Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-03-26 07:35:42 +01:00 · 2026-03-26 07:35:42 +01:00 · 0a3aba569c
commit 0a3aba569c
parent 5294d26375
5 changed files with 898 additions and 0 deletions
--- a/docs/API.md
+++ b/docs/API.md
@ -0,0 +1,264 @@
+# SecuBox API Reference
+
+RPCD/ubus API documentation for SecuBox OpenWrt modules.
+
+---
+
+## Overview
+
+SecuBox modules expose APIs via OpenWrt's RPCD (Remote Procedure Call Daemon) system. These APIs are accessible via:
+
+- **ubus** - Direct CLI access
+- **HTTP** - LuCI JSON-RPC endpoint
+- **JavaScript** - LuCI rpc.declare()
+
+## Authentication
+
+Most APIs require LuCI authentication. The `luci-app-secubox-*` ACL files define read/write permissions.
+
+```bash
+# Check available methods
+ubus list | grep luci.secubox
+
+# List methods for a service
+ubus -v list luci.secubox-mesh
+```
+
+---
+
+## Core APIs
+
+### luci.secubox-mesh
+
+Mesh network management.
+
+| Method | Params | Description |
+|--------|--------|-------------|
+| `status` | - | Get mesh daemon status |
+| `peers` | - | List connected peers |
+| `topology` | - | Get mesh topology graph |
+| `nodes` | - | List all known nodes |
+| `node_info` | `did` | Get node details |
+| `node_rotate` | - | Rotate node identity |
+| `telemetry` | - | Get system telemetry |
+| `ping` | `target` | Ping a mesh peer |
+| `get_config` | - | Get mesh configuration |
+| `set_config` | `key`, `value` | Update configuration |
+| `restart` | - | Restart mesh daemon |
+
+**Example:**
+
+```bash
+# Get mesh status
+ubus call luci.secubox-mesh status
+
+# Response:
+{
+    "running": true,
+    "node_did": "did:plc:abc123...",
+    "role": "peer",
+    "mesh_state": "connected",
+    "peer_count": 3,
+    "uptime": 86400
+}
+```
+
+### luci.secubox
+
+Core SecuBox management.
+
+| Method | Params | Description |
+|--------|--------|-------------|
+| `status` | - | System status overview |
+| `version` | - | Version information |
+| `apps_list` | - | Installed apps catalog |
+| `apps_install` | `name` | Install an app |
+| `apps_remove` | `name` | Remove an app |
+| `first_run` | - | First run wizard status |
+
+---
+
+## Security APIs
+
+### luci.crowdsec-dashboard
+
+CrowdSec IDS/IPS integration.
+
+| Method | Params | Description |
+|--------|--------|-------------|
+| `status` | - | CrowdSec service status |
+| `get_overview` | - | Cached stats overview |
+| `refresh_overview_cache` | - | Force cache refresh |
+| `get_alerts` | `limit` | Recent alerts |
+| `get_decisions` | - | Active ban decisions |
+| `get_bouncers` | - | Registered bouncers |
+| `ban_ip` | `ip`, `duration` | Manually ban an IP |
+| `unban_ip` | `ip` | Remove ban decision |
+
+### luci.mitmproxy
+
+WAF/TLS proxy management.
+
+| Method | Params | Description |
+|--------|--------|-------------|
+| `status` | - | Proxy status |
+| `get_requests` | `limit` | Recent requests |
+| `get_threats` | - | Detected threats |
+| `get_stats` | - | Traffic statistics |
+| `clear_cache` | - | Clear request cache |
+
+---
+
+## Network APIs
+
+### luci.haproxy
+
+Load balancer management.
+
+| Method | Params | Description |
+|--------|--------|-------------|
+| `status` | - | HAProxy status |
+| `get_vhosts` | - | List virtual hosts |
+| `vhost_add` | `domain`, `backend` | Add vhost |
+| `vhost_remove` | `domain` | Remove vhost |
+| `get_backends` | - | List backends |
+| `get_stats` | - | Connection stats |
+| `reload` | - | Reload configuration |
+
+### luci.wireguard-dashboard
+
+WireGuard VPN management.
+
+| Method | Params | Description |
+|--------|--------|-------------|
+| `status` | - | WireGuard status |
+| `get_interfaces` | - | List WG interfaces |
+| `get_peers` | `interface` | List peers |
+| `add_peer` | `interface`, `pubkey`, `endpoint` | Add peer |
+| `remove_peer` | `interface`, `pubkey` | Remove peer |
+| `generate_keys` | - | Generate keypair |
+| `get_qr` | `interface`, `peer` | Get QR code config |
+
+---
+
+## Monitoring APIs
+
+### luci.netdata-dashboard
+
+System monitoring integration.
+
+| Method | Params | Description |
+|--------|--------|-------------|
+| `status` | - | Netdata status |
+| `get_metrics` | `chart` | Get chart data |
+| `get_alarms` | - | Active alarms |
+
+### luci.metrics-dashboard
+
+Quick metrics overview.
+
+| Method | Params | Description |
+|--------|--------|-------------|
+| `get_cached_status` | - | Cached system metrics |
+| `refresh_cache` | - | Force cache update |
+
+---
+
+## Publishing APIs
+
+### luci.metablogizer
+
+Static site generator.
+
+| Method | Params | Description |
+|--------|--------|-------------|
+| `status` | - | Service status |
+| `list_sites` | - | List all sites |
+| `get_site` | `name` | Get site details |
+| `create_site` | `name`, `domain`, `template` | Create site |
+| `delete_site` | `name` | Delete site |
+| `publish` | `name` | Publish to HAProxy |
+| `upload` | `name`, `file`, `content` | Upload file |
+
+### luci.streamlit-forge
+
+Streamlit app management.
+
+| Method | Params | Description |
+|--------|--------|-------------|
+| `status` | - | Forge status |
+| `list_apps` | - | List all apps |
+| `create_app` | `name`, `template` | Create app |
+| `start_app` | `name` | Start app |
+| `stop_app` | `name` | Stop app |
+| `delete_app` | `name` | Delete app |
+| `expose` | `name`, `domain` | Expose via HAProxy |
+
+---
+
+## JavaScript Usage
+
+In LuCI views:
+
+```javascript
+'use strict';
+'require rpc';
+
+var callMeshStatus = rpc.declare({
+    object: 'luci.secubox-mesh',
+    method: 'status',
+    expect: {}  // Return full response
+});
+
+return view.extend({
+    load: function() {
+        return callMeshStatus();
+    },
+    render: function(data) {
+        // data contains the mesh status
+        return E('div', {}, [
+            E('span', {}, 'Peer count: ' + data.peer_count)
+        ]);
+    }
+});
+```
+
+---
+
+## Error Codes
+
+| Code | Description |
+|------|-------------|
+| `-32002` | Access denied (check ACL) |
+| `-32600` | Invalid request |
+| `-32601` | Method not found |
+| `-32602` | Invalid params |
+| `-32700` | Parse error |
+
+---
+
+## ACL Configuration
+
+ACL files: `/usr/share/rpcd/acl.d/luci-app-*.json`
+
+```json
+{
+    "luci-app-example": {
+        "description": "Example module",
+        "read": {
+            "ubus": {
+                "luci.example": ["status", "list"]
+            }
+        },
+        "write": {
+            "ubus": {
+                "luci.example": ["create", "delete"]
+            }
+        }
+    }
+}
+```
+
+---
+
+*SecuBox API Reference v1.0*
--- a/docs/MODULES.md
+++ b/docs/MODULES.md
@ -0,0 +1,168 @@
+# SecuBox Module Catalog
+
+Complete list of SecuBox packages for OpenWrt 24.10.
+
+---
+
+## Core Packages
+
+| Package | Version | Description |
+|---------|---------|-------------|
+| `secubox-core` | 1.0.0 | Core utilities, scripts, and shared libraries |
+| `secubox-mesh` | 1.0.0 | Mesh daemon with topology management and gate election |
+| `secubox-identity` | 0.1.0 | DID:plc generation, key rotation, trust scoring |
+| `secubox-mirrornet` | 0.1.0 | Mesh orchestration and gossip protocol |
+| `secubox-p2p` | 0.6.0 | P2P decentralized network with blockchain sync |
+| `secubox-p2p-intel` | 0.1.0 | IoC signed gossip, threat intelligence sharing |
+
+## Security Packages
+
+| Package | Version | Description |
+|---------|---------|-------------|
+| `luci-app-crowdsec-dashboard` | 0.8.0 | CrowdSec IDS/IPS dashboard |
+| `luci-app-mitmproxy` | 0.5.0 | WAF/TLS inspection proxy |
+| `luci-app-secubox-security-threats` | 1.0.0 | Security threat analysis |
+| `secubox-threat-analyst` | 1.0.0 | AI-powered threat correlation |
+| `secubox-dns-guard` | 1.0.0 | DNS anomaly detection |
+| `secubox-vortex-firewall` | 1.0.0 | Threat intel firewall |
+| `luci-app-auth-guardian` | 0.4.0 | Authentication monitoring |
+| `luci-app-client-guardian` | 0.4.0 | Client access control |
+| `luci-app-mac-guardian` | 0.5.0 | MAC address management |
+| `luci-app-zkp` | 1.0.0 | Zero-knowledge proof verification |
+
+## Network Packages
+
+| Package | Version | Description |
+|---------|---------|-------------|
+| `luci-app-network-modes` | 0.5.0 | Network mode configuration |
+| `luci-app-bandwidth-manager` | 0.5.0 | Bandwidth monitoring and limits |
+| `luci-app-traffic-shaper` | 0.4.0 | QoS traffic shaping |
+| `luci-app-haproxy` | 1.0.0 | HAProxy load balancer |
+| `luci-app-vhost-manager` | 0.5.0 | Virtual host management |
+| `luci-app-cdn-cache` | 0.5.0 | CDN caching proxy |
+| `luci-app-network-tweaks` | 1.0.0 | Advanced network settings |
+| `luci-app-routes-status` | 1.0.0 | Route status monitoring |
+
+## Monitoring Packages
+
+| Package | Version | Description |
+|---------|---------|-------------|
+| `luci-app-netdata-dashboard` | 0.5.0 | Netdata system monitoring |
+| `luci-app-secubox-netifyd` | 1.2.1 | Deep packet inspection |
+| `luci-app-dpi-dual` | 1.0.0 | Dual-stream DPI analysis |
+| `luci-app-device-intel` | 1.0.0 | Device fingerprinting |
+| `luci-app-media-flow` | 0.6.4 | Media traffic analysis |
+| `luci-app-watchdog` | 1.0.0 | Service health monitoring |
+| `luci-app-metrics-dashboard` | 1.0.0 | System metrics dashboard |
+
+## VPN & Mesh Packages
+
+| Package | Version | Description |
+|---------|---------|-------------|
+| `luci-app-wireguard-dashboard` | 0.7.0 | WireGuard VPN management |
+| `luci-app-secubox-mesh` | 1.0.0 | Mesh network dashboard |
+| `luci-app-secubox-p2p` | 0.1.0 | P2P network interface |
+| `luci-app-secubox-mirror` | 0.1.0 | MirrorNet dashboard |
+| `luci-app-master-link` | 1.0.0 | Node onboarding and linking |
+
+## DNS Packages
+
+| Package | Version | Description |
+|---------|---------|-------------|
+| `luci-app-dns-master` | 1.0.0 | DNS server management |
+| `luci-app-dnsguard` | 1.1.0 | DNS filtering and blocking |
+| `luci-app-vortex-dns` | 1.0.0 | Vortex DNS firewall |
+| `luci-app-meshname-dns` | 1.0.0 | Mesh DNS resolution |
+| `luci-app-dns-provider` | 1.0.0 | External DNS provider API |
+
+## Privacy Packages
+
+| Package | Version | Description |
+|---------|---------|-------------|
+| `luci-app-tor-shield` | 1.0.0 | Tor network integration |
+| `luci-app-exposure` | 1.0.0 | Service exposure management |
+| `luci-app-interceptor` | 1.0.0 | Traffic interception control |
+
+## Publishing Packages
+
+| Package | Version | Description |
+|---------|---------|-------------|
+| `luci-app-metablogizer` | 1.1.0 | Static site generator |
+| `luci-app-droplet` | 1.0.0 | Quick web publishing |
+| `luci-app-streamlit-forge` | 1.0.0 | Streamlit app builder |
+| `luci-app-metacatalog` | 1.0.0 | Content catalog |
+| `luci-app-streamlit` | 1.0.0 | Streamlit dashboard |
+| `luci-app-hexojs` | 1.0.0 | Hexo blog manager |
+
+## App Packages
+
+| Package | Version | Description |
+|---------|---------|-------------|
+| `luci-app-jellyfin` | 1.0.0 | Jellyfin media server |
+| `luci-app-lyrion` | 1.0.0 | Lyrion music server |
+| `luci-app-gitea` | 1.0.0 | Gitea git server |
+| `luci-app-nextcloud` | 1.0.0 | Nextcloud storage |
+| `luci-app-peertube` | 1.1.0 | PeerTube video |
+| `luci-app-photoprism` | 0.1.0 | PhotoPrism gallery |
+| `luci-app-gotosocial` | 0.1.0 | GoToSocial federation |
+| `luci-app-jitsi` | 1.0.0 | Jitsi video conferencing |
+
+## System Packages
+
+| Package | Version | Description |
+|---------|---------|-------------|
+| `luci-app-secubox` | 0.7.1 | Main SecuBox settings |
+| `luci-app-secubox-admin` | 1.0.0 | Admin dashboard |
+| `luci-app-config-vault` | 1.0.0 | Configuration backup |
+| `luci-app-smtp-relay` | 1.0.0 | SMTP relay settings |
+| `luci-app-reporter` | 1.0.0 | Report generator |
+| `luci-app-rtty-remote` | 0.1.0 | Remote terminal access |
+| `luci-app-backup` | 1.0.0 | System backup |
+| `luci-app-cloner` | 1.0.0 | Device cloning |
+| `luci-app-system-hub` | 0.5.2 | System overview |
+
+## AI Packages
+
+| Package | Version | Description |
+|---------|---------|-------------|
+| `luci-app-ai-gateway` | 1.0.0 | AI provider routing |
+| `luci-app-ai-insights` | 1.0.0 | AI-powered insights |
+| `luci-app-localai` | 0.1.0 | LocalAI integration |
+| `luci-app-ollama` | 0.1.0 | Ollama LLM server |
+| `secubox-ai-gateway` | 1.0.0 | AI data sovereignty |
+| `secubox-cve-triage` | 1.0.0 | AI CVE analysis |
+| `secubox-network-anomaly` | 1.0.0 | AI network detection |
+
+## Theme Package
+
+| Package | Version | Description |
+|---------|---------|-------------|
+| `luci-theme-secubox` | 1.0.0 | CRT P31 phosphor green theme |
+
+---
+
+## Installation
+
+### Via opkg
+
+```bash
+opkg update
+opkg install luci-app-secubox-mesh
+```
+
+### Via SecuBox App Store
+
+Navigate to **SecuBox → Apps** in LuCI and install from the catalog.
+
+### Via local feed
+
+```bash
+# Add local feed
+echo "src/gz secubox file:///www/secubox-feed" >> /etc/opkg/customfeeds.conf
+opkg update
+opkg install <package-name>
+```
+
+---
+
+*Total packages: 75+ | Last updated: 2026-03-26*
--- a/docs/README.md
+++ b/docs/README.md
@ -0,0 +1,125 @@
+# SecuBox OpenWrt Documentation
+
+Welcome to the SecuBox OpenWrt documentation. This directory contains comprehensive documentation for the SecuBox mesh network appliance running on OpenWrt 24.10.
+
+## Quick Links
+
+| Document | Description |
+|----------|-------------|
+| [SCREENSHOTS.md](SCREENSHOTS.md) | Module screenshot gallery (CRT P31 theme) |
+| [UI-GUIDE.md](UI-GUIDE.md) | UI/UX design guide and theme documentation |
+| [MODULES.md](MODULES.md) | Complete module catalog with descriptions |
+| [API.md](API.md) | RPCD/ubus API reference |
+
+## Project Overview
+
+**SecuBox** is a privacy-focused mesh network appliance built on OpenWrt. It provides:
+
+- 🛡️ **Security**: CrowdSec IDS/IPS, WAF with mitmproxy, network isolation
+- 🌐 **Mesh Networking**: WireGuard VPN, P2P gossip protocol, automatic peer discovery
+- 🤖 **AI Integration**: Local AI with LocalAI/Ollama, sovereign data classification
+- 📡 **Privacy**: Tor integration, anonymous service exposure, ZKP verification
+- 🎨 **Modern UI**: LuCI-based dashboard with CRT P31 phosphor green terminal theme
+
+## Screenshots Directory
+
+Screenshots are organized by platform:
+
+```
+docs/
+├── screenshots/
+│   └── router/       # MochaBin/ARM64 router screenshots
+└── wiki/             # Multilingual documentation
+```
+
+## Theme: CRT P31 Phosphor Green
+
+The SecuBox UI uses a retro CRT terminal aesthetic:
+
+- **Primary Color**: `#33ff66` (phosphor peak green)
+- **Background**: `#050803` (deep tube black)
+- **Font**: Monospace (Courier Prime, IBM Plex Mono)
+- **Effects**:
+  - Scanline overlay
+  - Phosphor glow on text
+  - Terminal boot sequence animation
+
+![Theme Preview](screenshots/router/portal.png)
+
+## Module Categories
+
+### Core
+- `secubox-core` - Base configuration and utilities
+- `secubox-mesh` - Mesh daemon with topology management
+- `secubox-identity` - DID generation and trust scoring
+- `secubox-p2p` - P2P gossip protocol
+
+### Security (12 modules)
+- CrowdSec Dashboard, WAF Filters, MITM Proxy
+- DNS Guard, Vortex DNS Firewall
+- Auth/Client/MAC Guardian, ZKP verification
+
+### Network (8 modules)
+- Network Modes, Bandwidth Manager, Traffic Shaper
+- HAProxy, Virtual Hosts, CDN Cache
+
+### Monitoring (6 modules)
+- Netdata integration, DPI (netifyd)
+- Device Intel, Media Flow, Watchdog, LAN Flows
+
+### Publishing (4 modules)
+- Metablogizer, Droplet, Streamlit Forge, Metacatalog
+
+### AI (4 modules)
+- AI Gateway (data sovereignty), AI Insights
+- LocalAI, Ollama integration
+
+## API Reference
+
+All LuCI modules expose RPCD/ubus APIs:
+
+```bash
+# List available methods
+ubus list | grep luci.secubox
+
+# Call a method
+ubus call luci.secubox-mesh status
+
+# Example: Get mesh topology
+ubus call luci.secubox-mesh topology
+```
+
+See [API.md](API.md) for complete method documentation.
+
+## Development
+
+### Quick Deploy (without rebuild)
+
+```bash
+# Deploy JS views
+scp htdocs/luci-static/resources/view/secubox/*.js root@192.168.255.1:/www/luci-static/resources/view/secubox/
+
+# Deploy RPCD handler
+scp root/usr/libexec/rpcd/<handler> root@192.168.255.1:/usr/libexec/rpcd/
+ssh root@192.168.255.1 '/etc/init.d/rpcd restart'
+```
+
+### Build Package
+
+```bash
+# Sync to local feed
+rsync -av --delete package/secubox/<pkg>/ secubox-tools/local-feed/<pkg>/
+
+# Build
+./secubox-tools/local-build.sh build <pkg>
+```
+
+## Support
+
+- **Repository**: [github.com/gkerma/secubox-openwrt](https://github.com/gkerma/secubox-openwrt)
+- **Wiki**: [github.com/gkerma/secubox-openwrt/wiki](https://github.com/gkerma/secubox-openwrt/wiki)
+- **Issues**: [github.com/gkerma/secubox-openwrt/issues](https://github.com/gkerma/secubox-openwrt/issues)
+
+---
+
+*SecuBox v1.0.0 | CyberMind — 2026*
--- a/docs/SCREENSHOTS.md
+++ b/docs/SCREENSHOTS.md
@ -0,0 +1,159 @@
+# SecuBox Module Screenshots - OpenWrt Router
+
+*Generated: 2026-03-26*
+
+**Host:** https://192.168.255.1 (C3BOX)
+**Theme:** CRT P31 Phosphor Green Terminal
+**Platform:** OpenWrt 24.10 / MochaBin ARM64
+
+---
+
+## Module Gallery
+
+### Dashboard
+
+| Module | Screenshot | Status |
+|--------|------------|--------|
+| 🏠 **System Hub** | ![System Hub](screenshots/router/hub.png) | ⏳ Pending |
+| 📊 **Metrics Dashboard** | ![Metrics](screenshots/router/metrics.png) | ⏳ Pending |
+| 🎯 **Portal** | ![Portal](screenshots/router/portal.png) | ⏳ Pending |
+| 📋 **Dev Status** | ![Dev Status](screenshots/router/devstatus.png) | ⏳ Pending |
+
+### Security
+
+| Module | Screenshot | Status |
+|--------|------------|--------|
+| 🛡️ **CrowdSec Dashboard** | ![CrowdSec](screenshots/router/crowdsec.png) | ⏳ Pending |
+| 🔥 **WAF Filters** | ![WAF](screenshots/router/waf.png) | ⏳ Pending |
+| 🔍 **MITM Proxy** | ![Mitmproxy](screenshots/router/mitmproxy.png) | ⏳ Pending |
+| 🚨 **Security Threats** | ![Threats](screenshots/router/threats.png) | ⏳ Pending |
+| 🔒 **Threat Analyst** | ![Threat Analyst](screenshots/router/threat-analyst.png) | ⏳ Pending |
+
+### Network
+
+| Module | Screenshot | Status |
+|--------|------------|--------|
+| 🌐 **Network Modes** | ![Network Modes](screenshots/router/netmodes.png) | ⏳ Pending |
+| 📈 **Bandwidth Manager** | ![Bandwidth](screenshots/router/bandwidth.png) | ⏳ Pending |
+| 📊 **Traffic Shaper** | ![Traffic](screenshots/router/traffic.png) | ⏳ Pending |
+| ⚡ **HAProxy** | ![HAProxy](screenshots/router/haproxy.png) | ⏳ Pending |
+| 🏗️ **Virtual Hosts** | ![Vhosts](screenshots/router/vhost.png) | ⏳ Pending |
+| 🚀 **CDN Cache** | ![CDN](screenshots/router/cdn.png) | ⏳ Pending |
+
+### Monitoring
+
+| Module | Screenshot | Status |
+|--------|------------|--------|
+| 📊 **Netdata** | ![Netdata](screenshots/router/netdata.png) | ⏳ Pending |
+| 🔬 **DPI (netifyd)** | ![DPI](screenshots/router/dpi.png) | ⏳ Pending |
+| 📱 **Device Intel** | ![Device Intel](screenshots/router/device-intel.png) | ⏳ Pending |
+| 🎬 **Media Flow** | ![Media Flow](screenshots/router/mediaflow.png) | ⏳ Pending |
+| 👁️ **Watchdog** | ![Watchdog](screenshots/router/watchdog.png) | ⏳ Pending |
+| 📡 **LAN Flows** | ![LAN Flows](screenshots/router/lan-flows.png) | ⏳ Pending |
+
+### VPN & Mesh
+
+| Module | Screenshot | Status |
+|--------|------------|--------|
+| 🔐 **WireGuard** | ![WireGuard](screenshots/router/wireguard.png) | ⏳ Pending |
+| 🌐 **Mesh Network** | ![Mesh](screenshots/router/mesh.png) | ⏳ Pending |
+| 🤝 **P2P Network** | ![P2P](screenshots/router/p2p.png) | ⏳ Pending |
+| 🪞 **Mirror** | ![Mirror](screenshots/router/mirror.png) | ⏳ Pending |
+| 🔗 **Master Link** | ![Master Link](screenshots/router/master-link.png) | ⏳ Pending |
+
+### DNS
+
+| Module | Screenshot | Status |
+|--------|------------|--------|
+| 🌍 **DNS Master** | ![DNS Master](screenshots/router/dns.png) | ⏳ Pending |
+| 🛡️ **DNS Guard** | ![DNS Guard](screenshots/router/dnsguard.png) | ⏳ Pending |
+| 🔥 **Vortex DNS** | ![Vortex DNS](screenshots/router/vortex-dns.png) | ⏳ Pending |
+| 📡 **Meshname DNS** | ![Meshname](screenshots/router/meshname.png) | ⏳ Pending |
+| 🔑 **DNS Provider** | ![DNS Provider](screenshots/router/dns-provider.png) | ⏳ Pending |
+
+### Privacy
+
+| Module | Screenshot | Status |
+|--------|------------|--------|
+| 🧅 **Tor Shield** | ![Tor](screenshots/router/tor.png) | ⏳ Pending |
+| 🌐 **Exposure** | ![Exposure](screenshots/router/exposure.png) | ⏳ Pending |
+| 🔐 **ZKP** | ![ZKP](screenshots/router/zkp.png) | ⏳ Pending |
+
+### Access Control
+
+| Module | Screenshot | Status |
+|--------|------------|--------|
+| 🔐 **Auth Guardian** | ![Auth](screenshots/router/auth.png) | ⏳ Pending |
+| 👥 **Client Guardian** | ![Clients](screenshots/router/clients.png) | ⏳ Pending |
+| 🖥️ **MAC Guardian** | ![MAC](screenshots/router/mac.png) | ⏳ Pending |
+| 👤 **User Management** | ![Users](screenshots/router/users.png) | ⏳ Pending |
+
+### Publishing
+
+| Module | Screenshot | Status |
+|--------|------------|--------|
+| 📝 **Metablogizer** | ![Metablogizer](screenshots/router/metablogizer.png) | ⏳ Pending |
+| 💧 **Droplet** | ![Droplet](screenshots/router/droplet.png) | ⏳ Pending |
+| 🎨 **Streamlit Forge** | ![Streamlit Forge](screenshots/router/streamforge.png) | ⏳ Pending |
+| 📚 **Metacatalog** | ![Metacatalog](screenshots/router/metacatalog.png) | ⏳ Pending |
+
+### Apps & Services
+
+| Module | Screenshot | Status |
+|--------|------------|--------|
+| 📦 **App Store** | ![Apps](screenshots/router/apps.png) | ⏳ Pending |
+| 🎥 **Jellyfin** | ![Jellyfin](screenshots/router/jellyfin.png) | ⏳ Pending |
+| 🎵 **Lyrion** | ![Lyrion](screenshots/router/lyrion.png) | ⏳ Pending |
+| 💻 **Gitea** | ![Gitea](screenshots/router/gitea.png) | ⏳ Pending |
+| ☁️ **Nextcloud** | ![Nextcloud](screenshots/router/nextcloud.png) | ⏳ Pending |
+| 📺 **PeerTube** | ![PeerTube](screenshots/router/peertube.png) | ⏳ Pending |
+
+### System
+
+| Module | Screenshot | Status |
+|--------|------------|--------|
+| ⚙️ **SecuBox Settings** | ![Settings](screenshots/router/settings.png) | ⏳ Pending |
+| 💾 **Config Vault** | ![Config Vault](screenshots/router/config-vault.png) | ⏳ Pending |
+| 📧 **SMTP Relay** | ![SMTP](screenshots/router/smtp.png) | ⏳ Pending |
+| 📊 **Reporter** | ![Reporter](screenshots/router/reporter.png) | ⏳ Pending |
+| 🖥️ **RTTY Remote** | ![RTTY](screenshots/router/rtty.png) | ⏳ Pending |
+
+### AI Features
+
+| Module | Screenshot | Status |
+|--------|------------|--------|
+| 🤖 **AI Gateway** | ![AI Gateway](screenshots/router/ai-gateway.png) | ⏳ Pending |
+| 💡 **AI Insights** | ![AI Insights](screenshots/router/ai-insights.png) | ⏳ Pending |
+| 🧠 **LocalAI** | ![LocalAI](screenshots/router/localai.png) | ⏳ Pending |
+| 🦙 **Ollama** | ![Ollama](screenshots/router/ollama.png) | ⏳ Pending |
+
+---
+
+## Capturing Screenshots
+
+To capture screenshots for this documentation:
+
+```bash
+# From development machine with browser access
+cd docs/screenshots/router/
+
+# Use browser screenshot tool or:
+# - Firefox: Ctrl+Shift+S (area select)
+# - Chrome: DevTools → Capture screenshot
+# - CLI: chromium --headless --screenshot=hub.png https://192.168.255.1/cgi-bin/luci/admin/secubox/hub
+
+# Recommended dimensions: 1280x800 or 1920x1080
+# Format: PNG with transparency disabled
+```
+
+## Theme Information
+
+All screenshots should use the **CRT P31 Phosphor Green** theme:
+- Primary: `#33ff66` (phosphor peak)
+- Background: `#050803` (tube black)
+- Font: Monospace (Courier Prime, IBM Plex Mono)
+- Effects: Scanlines overlay, phosphor glow
+
+---
+
+*Total modules: 50+ | Screenshots pending: All*
--- a/docs/UI-GUIDE.md
+++ b/docs/UI-GUIDE.md
@ -0,0 +1,182 @@
+# SecuBox UI Design Guide
+
+## CRT P31 Phosphor Green Theme
+
+The SecuBox OpenWrt interface uses a retro CRT terminal aesthetic inspired by the P31 phosphor used in classic green-screen monitors.
+
+### Color Palette
+
+| Variable | Hex | Usage |
+|----------|-----|-------|
+| `--p31-peak` | `#33ff66` | Maximum brightness - headers, active elements |
+| `--p31-hot` | `#66ffaa` | High brightness - hover states |
+| `--p31-mid` | `#22cc44` | Medium brightness - body text |
+| `--p31-dim` | `#0f8822` | Low brightness - secondary text, borders |
+| `--p31-ghost` | `#052210` | Ghosting/afterglow - subtle backgrounds |
+| `--p31-decay` | `#ffb347` | Phosphor decay amber - warnings |
+| `--tube-black` | `#050803` | Deep CRT black - main background |
+| `--tube-deep` | `#080d05` | Card backgrounds |
+| `--tube-bezel` | `#0d1208` | Panel borders |
+
+### Typography
+
+```css
+font-family: 'Courier Prime', 'IBM Plex Mono', 'Fira Code',
+             'Courier New', 'Lucida Console', monospace;
+font-size: 14px;
+line-height: 1.5;
+letter-spacing: 0.02em;
+```
+
+### Glow Effects
+
+```css
+/* Text glow */
+--bloom-text: 0 0 2px var(--p31-peak),
+              0 0 6px var(--p31-peak),
+              0 0 14px rgba(51,255,102,0.5);
+
+/* Box glow */
+--bloom-box: 0 0 8px rgba(51,255,102,0.3),
+             inset 0 0 4px rgba(51,255,102,0.1);
+```
+
+## Theme Files
+
+```
+luci-theme-secubox/
+├── htdocs/luci-static/secubox/
+│   ├── cascade.css         # Main theme CSS
+│   ├── mobile.css          # Mobile responsive styles
+│   ├── crt-engine.js       # Scanline & boot animation
+│   └── crt-components.js   # Reusable UI components
+├── htdocs/luci-static/resources/secubox-theme/
+│   └── themes/
+│       ├── crt-p31.css     # P31 variant
+│       ├── dark.css        # Dark variant
+│       ├── cyberpunk.css   # Cyberpunk variant
+│       └── ...
+└── ucode/luci/template/themes/secubox/
+    ├── header.ut           # Header template
+    └── footer.ut           # Footer template
+```
+
+## CRT Engine Features
+
+### Scanlines Overlay
+
+```javascript
+// Automatically applied via crt-engine.js
+// Creates CSS pseudo-element with horizontal lines
+```
+
+### Boot Sequence Animation
+
+On first visit, displays a terminal-style boot sequence:
+
+```
+[SECUBOX] Initializing mesh daemon...
+[SECUBOX] Loading P31 phosphor display...
+[SECUBOX] System ready.
+```
+
+### Phosphor Glow
+
+Text and interactive elements have subtle green glow effects that intensify on hover/focus.
+
+## KISS Theme Integration
+
+SecuBox modules use a shared KISS (Keep It Simple & Styled) theme helper:
+
+```javascript
+// In LuCI views
+'require secubox-theme/kiss';
+
+// Render header chip
+E('div', { 'class': 'sh-page-header' }, [
+    renderHeaderChip('🛡️', 'Security Status', 'Active', 'success')
+]);
+
+// Stats card
+E('div', { 'class': 'sh-stat-card' }, [
+    E('div', { 'class': 'sh-stat-value' }, '42'),
+    E('div', { 'class': 'sh-stat-label' }, 'Active Threats')
+]);
+```
+
+## Component Classes
+
+### Cards
+
+```html
+<div class="sh-card">
+    <div class="sh-card-header">Title</div>
+    <div class="sh-card-body">Content</div>
+</div>
+```
+
+### Status Badges
+
+```html
+<span class="sh-badge sh-badge-success">Running</span>
+<span class="sh-badge sh-badge-warning">Warning</span>
+<span class="sh-badge sh-badge-danger">Stopped</span>
+```
+
+### Progress Bars
+
+```html
+<div class="sh-progress">
+    <div class="sh-progress-bar" style="width: 75%"></div>
+</div>
+```
+
+### Tables
+
+```html
+<table class="sh-table">
+    <thead>
+        <tr><th>Column</th></tr>
+    </thead>
+    <tbody>
+        <tr><td>Data</td></tr>
+    </tbody>
+</table>
+```
+
+## Responsive Design
+
+The theme includes mobile-optimized styles via `mobile.css`:
+
+- Collapsible navigation menu
+- Stacked card layouts
+- Touch-friendly button sizes
+- Readable font sizes on small screens
+
+## Theme Switching
+
+Users can switch themes via UCI or the Settings page:
+
+```bash
+# Set theme via UCI
+uci set luci.main.mediaurlbase='/luci-static/secubox'
+uci commit luci
+
+# Or use the themes section
+uci set luci.themes.SecuBox='/luci-static/secubox'
+```
+
+## Dark Mode
+
+The CRT P31 theme is inherently dark. The `data-darkmode` attribute is ignored as the phosphor green aesthetic requires a dark background for proper contrast.
+
+## Accessibility
+
+- High contrast phosphor green on black
+- Keyboard navigation support
+- Focus indicators with glow effects
+- Screen reader compatible semantic HTML
+
+---
+
+*SecuBox UI Guide v1.0 | CRT P31 Phosphor Theme*