This release focuses on consistent version display across all modules
and proper OOP structure for network-modes helpers.
## Version Display Improvements (3 files)
Added robust version resolution functions to handle various version field names:
**SecuBox Dashboard** (dashboard.js):
- Added getModuleVersion() function with fallback chain
- Checks: version, pkg_version, package_version, packageVersion, Version
- Handles both string and number types
- Returns '—' if no version found
- Loads modules list from API for accurate version data
**SecuBox Modules** (modules.js):
- Added resolveModuleVersion() function with same fallback logic
- Ensures consistent version display in module cards
- Handles missing or undefined versions gracefully
**System Hub Components** (components.js):
- Added getComponentVersion() function with version fallback chain
- Consistent version display across all components
- Proper handling of edge cases (null, undefined, empty strings)
## Network Modes Refactoring (1 file)
**helpers.js**:
- Refactored from plain object export to baseclass.extend()
- Proper OOP structure following LuCI conventions
- Added 'require baseclass' import
- All helper functions now properly encapsulated
- Better integration with LuCI module system
## Benefits
- Consistent version display across SecuBox, System Hub, and Components
- Handles version field name variations (legacy, OpenWrt, custom)
- Type-safe version handling (numbers → strings)
- Improved code maintainability with proper OOP structure
- Better error handling for missing version information
Summary:
- 4 files changed (+85, -8)
- 3 new version resolution functions
- 1 OOP refactoring for helpers
- Improved consistency and reliability
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
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>
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>
Fixed HTTP 404 errors for common.css in secubox monitoring and settings pages
Problem:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
- monitoring.js and settings.js were loading 'system-hub/common.css'
- This file doesn't exist (404 Not Found)
- Error: GET http://192.168.8.191/luci-static/resources/system-hub/common.css [404]
- Pages loaded but with missing styles
Solution:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Changed CSS path to correct module resource:
- FROM: L.resource('system-hub/common.css')
- TO: L.resource('secubox/common.css')
This references the secubox module's own common.css file which exists
at: /www/luci-static/resources/secubox/common.css
Files Fixed:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
1. luci-app-secubox/htdocs/luci-static/resources/view/secubox/monitoring.js
Line 79: system-hub/common.css → secubox/common.css
2. luci-app-secubox/htdocs/luci-static/resources/view/secubox/settings.js
Line 25: system-hub/common.css → secubox/common.css
CSS Loading Order (Correct):
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
1. secubox/common.css ← Fixed (was system-hub/common.css)
2. secubox/secubox.css ← Already correct
3. secubox/monitoring.css ← Module-specific (monitoring page only)
Testing:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✅ Deployed to router
✅ Permissions fixed (644)
✅ Cache cleared
✅ Services restarted
Test URLs:
- Monitoring: https://192.168.8.191/cgi-bin/luci/admin/secubox/monitoring/overview
- Settings: https://192.168.8.191/cgi-bin/luci/admin/secubox/settings
Expected Result:
✅ No 404 errors in browser console
✅ All styles load correctly
✅ Pages render with proper theming
Root Cause:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Copy-paste error from system-hub module templates. These view files were
likely created using system-hub as a reference and the CSS path wasn't
updated to match the secubox module structure.
Related:
- secubox/common.css exists and has correct permissions (644)
- No changes needed to CSS file itself
- Only view file CSS references needed correction
🤖 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>
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>
- Enhanced Settings page with 40+ configuration options across 7 sections
- General, Dashboard, Module Management, Notifications
- Alert Thresholds, Security, Advanced settings
- Created dedicated Alerts page with filtering and sorting
- Filter by severity (error/warning/info) and module
- Sort by time/severity/module
- Auto-refresh every 30 seconds
- Color-coded severity with dismiss functionality
- Created Monitoring page with real-time historical graphs
- SVG-based charts for CPU, Memory, Disk, Network
- Stores last 30 data points
- Auto-refresh every 5 seconds
- Animated chart drawing with area fills
- Added monitoring page to menu configuration
- Consistent modern design with gradients and animations
🤖 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>
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>
Added modules-debug.js with extensive console logging to
diagnose why modules page shows empty even though backend
returns data correctly.
🤖 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>
