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>
- Created help system (help.js, help.css) for all modules
- Integrated help button in network-modes module
- Fixed menu structure: removed empty Network Management category
- Fixed all dashboard and modules page links
- Added website deployment script
- Created comprehensive documentation
New Files:
- DOCS/HELP_INTEGRATION_PLAN.md
- DOCS/WEBSITE_DEPLOYMENT_GUIDE.md
- EXAMPLES/help-button-integration.js
- luci-app-secubox/htdocs/luci-static/resources/secubox/help.js
- luci-app-secubox/htdocs/luci-static/resources/secubox/help.css
- secubox-tools/deploy-website.sh
Modified:
- luci-app-network-modes: Added help button integration
- luci-app-secubox: Fixed menu paths and module links
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Major improvements to modules page:
- Responsive grid layout with modern card design
- Module versions display (v0.0.9)
- Category filter tabs (All, Security, Monitoring, Network, System)
- Quick actions (Start/Stop/Restart/Dashboard)
- Real-time status indicators with animations
- Emoji icons properly displayed
- Auto-refresh every 30 seconds
Changes:
- modules.js: Complete rewrite with responsive cards
- modules.css: New CSS with theme support and animations
- secubox config: Added emoji icons and version fields
- RPCD backend: Added version field to module data
Features:
✨ Responsive 3-column grid (auto-adapts to screen size)
🎯 Category filtering with animated tabs
▶️ One-click start/stop/restart actions
📊 Dashboard quick links for each module
💫 Smooth animations and hover effects
🌓 Full dark/light theme support
📱 Mobile-friendly 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>
Removed debug information box and improved UI:
- Added summary line showing total/installed/running counts
- Improved status badges with icons (✓ ○ -)
- Added category badge for each module
- Cleaner layout with better spacing
- All 14 modules display correctly with proper colors
Tested and working - shows all SecuBox modules with
accurate installed/running status.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Fixed JavaScript syntax error by adding quotes around all
object property names (class, style, etc.) which are
required in strict mode and some JavaScript parsers.
Error was causing the modules page to fail silently with
a blank page.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Display debug information directly on the page to diagnose
why modules list is empty. Shows:
- Data type received
- Whether it's an array
- Full JSON dump of the data
This will help identify the exact structure being returned.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Fixed modules page showing empty list even though backend
returns data correctly.
Problem:
- RPC declare with expect: { modules: [] } automatically
extracts the 'modules' field from the JSON response
- This means data is already the array, not an object
- Code was using data.modules which was undefined
- Fell back to empty array []
Solution:
- Use data directly instead of data.modules
- Added comment explaining the behavior
Backend returns: { "modules": [...] }
RPC expect extracts: [...]
So data = [...] not { modules: [...] }
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
