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>
