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>
Network Modes:
- Makefile: PKG_VERSION 0.3.5 → 0.3.6
- README.md: Version badge and header updated to 0.3.6
- README.md: What's New section updated to v0.3.6
System Hub:
- Makefile: PKG_VERSION 0.3.2 → 0.3.6
- api.js: Version comment and console log updated to 0.3.6
Both modules now aligned with v0.3.6 release tag.
Network Modes (+536 lines RPCD):
- Enhanced router.js with improved proxy configuration
- Expanded RPCD backend with new methods
- Updated README with feature documentation
System Hub (+511 lines RPCD, +127 lines API):
- Implemented diagnostics collection features
- Enhanced remote management interface
- Expanded RPCD backend with new RPC methods
- Added new API methods for diagnostics and remote access
Total changes: +1,392 additions, -126 deletions
Preparation for v0.3.6 release with real feature implementations
from CODEX roadmaps.
- 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>
Same fix as secubox: removed expect: { modules: [] } from RPC declarations.
This was auto-extracting the modules property, causing components list to be empty.
Now both SecuBox Modules and System Hub Components work correctly.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Fixed two issues preventing components page from loading:
1. Added getTheme() method to theme.js
- components.js was calling Theme.getTheme() which didn't exist
- Added method to return theme data from SecuBox
2. Updated ACL to grant access to new methods
- Added get_components and get_components_by_category to read permissions
- Added luci.secubox methods (modules, modules_by_category, get_theme)
- Resolves "Access denied" error (-32002)
This fixes the "Theme.getTheme is not a function" and "Access denied" errors.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Major Features:
• SecuBox v0.1.2: Real-time module auto-detection via opkg
• System Hub: Dynamic component detection leveraging SecuBox
• Responsive card grid layout for modules and components
• Category filtering tabs (All/Security/Monitoring/Network/System)
• Auto-refresh every 30 seconds with real-time status
SecuBox Changes:
• Added detect_real_modules() function to scan opkg for installed packages
• Enhanced get_modules() with dual-source detection (UCI + auto-detected)
• Enhanced get_modules_by_category() with same dual-source logic
• Auto-categorization based on package name patterns
• Real version detection from opkg for installed packages
• Added in_uci flag to distinguish module sources
• Responsive modules.js with card-based layout
• New modules.css with theme support and animations
System Hub Changes:
• Added get_components() and get_components_by_category() to RPCD
• Components leverage SecuBox module detection via ubus
• Completely rewritten components.js with responsive cards
• New components.css matching SecuBox design language
• Extended API with getComponents() methods
• Unified component management with quick actions
Deployment:
• Added deploy-secubox-v0.1.2.sh for SecuBox deployment
• Added deploy-system-hub-dynamic.sh for System Hub deployment
• Added deploy-dynamic-modules.sh for combined deployment
🤖 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>
Root Cause:
- baseclass.extend() in LuCI only preserves RPC methods (rpc.declare)
- Non-RPC functions passed to baseclass.extend() are filtered out
- This caused TypeError: api.callGetComponents is not a function
Solution:
- Simplified api.js to contain ONLY RPC methods (10 methods)
- Moved all stub functions and helpers directly into the views that use them
- Each view now defines its own local functions for planned features
API Changes (api.js):
- Removed all stub functions (callGetComponents, callManageComponent, etc.)
- Removed all helper functions (formatUptime, formatBytes, getComponentIcon, getHealthStatus)
- Kept only RPC methods: getStatus, getSystemInfo, getHealth, listServices,
serviceAction, getLogs, backupConfig, restoreConfig, reboot, getStorage
View Changes:
- components.js: Added local getComponents(), getComponentIcon(), manageComponent()
- health.js: Added local getHealthStatus(), formatBytes(), inline report stub
- remote.js: Added local getRemoteConfig(), inline session stub
- settings.js: Fixed to use api.getStatus() instead of api.callStatus()
All 9 views now functional with proper stub data for planned features.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Fixed TypeError: "factory yields invalid constructor" by:
- Adding 'require baseclass' directive
- Using baseclass.extend() to return proper constructor
- Added formatUptime() helper function
- Added formatBytes() helper function
This matches the pattern used in luci-app-secubox and other LuCI modules.
🤖 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>
