Skip to content

# 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
- Code Templates: CODE-TEMPLATES.md
- Quick Commands: QUICK-START.md
- Automation Guardrails: CODEX.md

## Table of Contents

1. Design System Reference
2. Core Modules Prompts
3. Security & Monitoring Modules
4. Network Intelligence Modules
5. VPN & Access Control Modules
6. Bandwidth & Traffic Modules
7. Performance & Services Modules

## Design System Reference

### Color Palette & Variables

All modules MUST use CSS variables from `system-hub/common.css`:

Dark Mode (Primary):

    --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

    /* 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

       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)

       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)

       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

       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

       E('button', { 'class': 'sh-btn sh-btn-primary' }, '[ACTION]')

6. Loading States

7. Skeleton screens while fetching data
8. Spinner for button actions

9. Progress bars for long operations

10. Error Handling

11. User-friendly error messages
12. Retry buttons

13. Fallback content

14. Responsive Design

15. Mobile-first approach
16. Cards stack on mobile
17. Stats grid adapts (130px minimum)
18. 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