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>
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>
Updated hardcoded version strings in UI:
- Settings page: 0.0.1-beta → 0.1.0
- Dashboard fallback: 0.0.1-beta → 0.1.0
The version is now consistent across all interfaces.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Reverted to beautiful modern design with:
- Clean light theme with gradient header
- Animated circular SVG gauges that update dynamically
- Stats overview cards (Total, Installed, Running, Alerts)
- Auto-refresh every 30 seconds
- Module cards with clickable links
- Responsive grid layout
- Smooth animations and transitions
This is the preferred design with better UX and visual appeal.
All file permissions corrected to 644 for proper web access.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Reverted to original secubox.css with dark theme aesthetic
- Restored circular gauges with SVG in dark mode
- Added stats overview cards (Total, Installed, Running, Alerts)
- Kept auto-refresh functionality (30s interval)
- Kept module dashboard links
- Maintained dynamic updates
- Fixed module paths mapping to correct dashboards
This restores the beautiful dark UI that was present in v0.0.1-beta
while keeping the improvements from v0.0.2-beta and v0.0.3-beta.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Major dashboard improvements:
✨ New Features:
- Auto-refresh every 30 seconds using poll API
- Dynamic updates without page reload
- Direct links to module dashboards (clickable cards)
- Modern card-based layout with responsive grid
- Stats overview with 4 key metrics
- Progress bars instead of circular gauges
- Better visual hierarchy and spacing
🎨 Design Improvements:
- Gradient header with version badge
- Animated stat cards with hover effects
- Color-coded health indicators
- Pulsing status dots for running modules
- Modern CSS with shadows and transitions
- Responsive layout for mobile/tablet
- Smooth animations and transitions
🔗 Module Navigation:
- Clickable module cards with direct links
- Smart path mapping for all 14 modules
- Visual running/stopped indicators
- Hover effects for better UX
📊 Better Data Display:
- Horizontal progress bars for CPU/Memory/Disk
- Real-time value updates
- Compact module grid with icons
- Alert system with severity colors
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
