Migrated three core modules to use the global secubox-theme package:
Modules Updated:
- luci-app-secubox (dashboard, modules views)
- luci-app-network-modes (overview view)
- luci-app-system-hub (overview, services views)
Changes Per Module:
- Replaced module-specific theme imports with 'require secubox-theme/theme as Theme'
- Updated CSS imports to use global secubox-theme.css bundle
- Initialized global theme with Theme.init({ theme: 'dark', language: 'en' })
- Removed redundant theme.getTheme() calls from load() functions
- Added global theme CSS link tags to view renders
Benefits:
- Unified CyberMood design system across all modules
- Access to 100+ CSS variables (colors, spacing, effects)
- Theme switching support (dark, light, cyberpunk)
- Multi-language support (en, fr, de, es) via Theme.t()
- Reduced CSS duplication
- Consistent UI components (cards, buttons, badges)
Deployment:
- Created deploy-modules-with-theme.sh for batch deployment
- All modules successfully deployed to router 192.168.8.191
- Verified HTTP access to updated JavaScript files
Testing:
- ✅ SecuBox dashboard loads with global theme
- ✅ Network-modes overview uses theme CSS
- ✅ System-hub views integrate theme properly
- ✅ All 27 view files deployed successfully
Next Steps:
- Modules can now use Theme.createCard(), createButton(), createBadge()
- Translation keys available for internationalization
- Theme variants switchable via Theme.apply('dark'|'light'|'cyberpunk')
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- TypeError: this.renderHealthGauge is not a function
- Added renderHealthGauge method to render health score gauge
- Takes score, scoreClass, scoreLabel parameters
- Displays score/100, label, and progress bar with appropriate styling
Method creates:
- Health score display (e.g., 85/100)
- Status label (Excellent/Good/Warning/Critical)
- Progress bar with color-coded fill based on health class
- ReferenceError: scoreLabel is not defined at line 84
- Added scoreLabel calculation matching renderStatsOverview pattern
- Fixes dashboard rendering error in overview.js
Error: renderHeader was calling this.renderHealthGauge(score, scoreClass, scoreLabel)
but scoreLabel was never defined in that scope.
Added 2 new performance widgets:
🌐 Network Stats:
- Online/Offline status with badge
- Total download (RX) in GB
- Total upload (TX) in GB
- Network status indicator
- Cyan → Blue gradient
⚙️ Services Monitor:
- Running/Total services count
- Failed services count
- Health percentage (running/total)
- Status badges: healthy/issues/critical
- Green → Emerald gradient
All widgets now visible by default (6 total):
1. CPU Performance (with load histogram)
2. Memory Usage (with swap visualization)
3. Disk Space
4. Temperature
5. Network Stats (NEW)
6. Services Monitor (NEW)
Grid layout auto-adapts: 280px min per widget
Fixed updateDashboard() to properly convert childNodes to array
before passing to dom.content(). Was showing '[object HTMLCollection]'
instead of rendering the updated metrics.
Changed from:
- dom.content(el, element.children)
To:
- Array.prototype.slice.call(element.childNodes)
This ensures proper DOM manipulation and fixes the refresh cycle.
- Add network throughput stats (RX/TX total bytes)
- Add process count display (running/total)
- Add swap usage information
- Add dynamic status indicators (✓, ⚡, ⚠️) with pulse animation
- Add detailed tooltips with absolute values
- Add detail text under each stat card
- Enhance stats grid layout for 5 cards
- Update version from 0.3.1 to 0.3.2
Backend enhancements:
- Extract process count from /proc/loadavg
- Calculate swap usage from /proc/meminfo
- Aggregate network throughput from all interfaces
Frontend enhancements:
- Display process count alongside CPU load
- Show swap usage when available
- Display total RX/TX in GB
- Add pulsing status icons
- Show contextual details (MB/GB values, process count, load average)
CSS improvements:
- Add .sh-stat-status-icon with subtle pulse animation
- Add .sh-stat-overview-detail for contextual information
- Add network gradient color scheme
- Adjust grid for better 5-card layout
Updated three core modules with significant UI/UX improvements:
SecuBox Central Hub (luci-app-secubox):
- Changed header icon from 🛡️ to 🚀 ("SecuBox Control Center")
- Added module filter tabs (All/Security/Network/System/Monitoring)
- Implemented alert dismiss and clear functionality
- Enhanced backend RPCD methods for alert management
- Updated ACL permissions for new alert methods
System Hub (luci-app-system-hub):
- Changed header icon from 🖥️ to ⚙️ ("System Control Center")
- Added 4-column System Info Grid with interactive cards
- Implemented Quick Status Indicators (Internet/DNS/NTP/Firewall)
- Added hostname edit and kernel version copy features
- Enhanced CSS with monospace fonts and responsive design
Network Modes (luci-app-network-modes):
- Changed header icon from ⚙️ to 🌐 ("Network Configuration")
- Added Current Mode Display Card with config summary
- Implemented Mode Comparison Table (5 modes, 6 features)
- Active mode highlighting with gradient effects
- Added "Change Mode" button with gradient styling
All modules validated with comprehensive checks (RPCD, ACL, permissions).
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Complete redesign of Overview page with modern dashboard layout:
Features:
• Health Score circle with visual status (excellent/good/warning/critical)
• Metric cards with progress bars (CPU, Memory, Disk, Temperature)
• Color-coded status indicators
• System Information card with icons
• Network Status card with connection state
• Services card with quick actions link
• Auto-refresh every 30 seconds
• Responsive grid layout
• Full dark mode support
Design:
• Gradient score circle (120px)
• Modern metric cards with hover effects
• Info cards with organized data rows
• Status badges (ok/warning/error)
• Smooth transitions and animations
• Cohesive with SecuBox design language
Replaces old cbi-based layout with modern component-based design.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Major Features:
• Centralized theme system across SecuBox and System Hub
• Three theme modes: dark (default), light, and system (auto-detect)
• Single theme setting in SecuBox controls both plugins
• Real-time theme switching with OS preference detection
SecuBox Changes:
• Added theme.js manager for centralized theme control
• Implemented CSS variables for dark/light mode (secubox.css)
• Fixed hardcoded colors in dashboard.css, alerts.css, monitoring.css
• Integrated theme.js in all 7 views (dashboard, modules, alerts, monitoring, settings, etc.)
• Added get_theme RPC method to luci.secubox backend
• Updated ACL permissions to include get_theme (read access)
• Version updated to 0.1.1
System Hub Changes:
• Added theme.js manager using SecuBox theme API
• Implemented CSS variables for dark/light mode (dashboard.css)
• Integrated theme.js in all 9 views (overview, health, services, logs, backup, components, remote, settings, diagnostics)
• Version updated to 0.1.1
• README updated with maintainer info
Theme System Architecture:
• Configuration: /etc/config/secubox (option theme: dark|light|system)
• RPCD Backend: luci.secubox/get_theme method
• Frontend: theme.js modules (secubox/theme.js, system-hub/theme.js)
• CSS Variables: --sb-bg, --sb-bg-card, --sb-border, --sb-text, --sb-text-muted, --sb-shadow
• Auto-detection: prefers-color-scheme media query for system mode
Documentation:
• Added LUCI_DEVELOPMENT_REFERENCE.md with comprehensive LuCI development patterns
• Documented ubus/RPC types, baseclass.extend() patterns, ACL structure
• Common errors and solutions from implementation experience
Bug Fixes:
• Fixed SecuBox theme not applying visually (CSS variables now used)
• Fixed missing secubox.css in view imports
• Fixed ACL access denied for get_theme method
• Fixed hardcoded colors preventing theme switching
Testing:
• Verified theme switching works in all SecuBox tabs
• Verified theme switching works in all System Hub tabs
• Verified dark/light/system modes function correctly
• Verified single setting controls both plugins
🤖 Generated with Claude Code (https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Implements comprehensive system control and monitoring dashboard with health
metrics, service management, system logs, and backup/restore functionality.
Features:
- Real-time system monitoring with visual gauges (CPU, RAM, Disk)
- Comprehensive system information (hostname, model, uptime, kernel)
- Health metrics with temperature monitoring and storage breakdown
- Service management with start/stop/restart/enable/disable actions
- System log viewer with filtering and configurable line count
- Configuration backup creation and download (base64 encoded)
- Configuration restore from backup file
- System reboot functionality with confirmation
Components:
- RPCD backend (luci.system-hub): 10 ubus methods
* status, get_system_info, get_health
* list_services, service_action
* get_logs, backup_config, restore_config
* reboot, get_storage
- 4 JavaScript views: overview, services, logs, backup
- ACL with read/write permissions segregation
- Comprehensive README with API documentation
Technical implementation:
- System info from /proc filesystem and sysinfo
- Health metrics: CPU load, memory breakdown, disk usage, temperature
- Service control via /etc/init.d scripts
- Log retrieval via logread with filtering
- Backup/restore using sysupgrade with base64 encoding
- Visual gauges with SVG circular progress indicators
- Color-coded health status (green/orange/red)
Dashboard Features:
- Circular gauges for CPU, Memory, Disk (120px with 10px stroke)
- System information cards with detailed metrics
- Temperature monitoring with thermal zone detection
- Storage table for all mount points with progress bars
- Service table with inline action buttons
- Terminal-style log display (black bg, green text)
- File upload for backup restore
- Modal confirmations for destructive actions
Architecture follows SecuBox standards:
- RPCD naming convention (luci. prefix)
- Menu paths match view file structure
- All JavaScript in strict mode
- Form-based configuration management
- Comprehensive error handling
Dependencies: coreutils, coreutils-base64
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
