- Change nav bar background from rgba(255,255,255,0.05) to solid #141419
- Add subtle border for visual separation
- Ensures proper dark theme appearance for navigation tabs
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add internal navigation bars to nDPId (Dashboard, Flows, Settings)
- Add internal navigation bars to Netifyd (Dashboard, Flows, Devices, Applications, Settings)
- Complete dark theme CSS for Netifyd with LuCI element overrides
- Add CSS loading to all Netifyd views
- Version bumps: luci-app-ndpid 1.1.1, luci-app-secubox-netifyd 1.2.1
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add unified SecuBox header navigation to all 5 Netifyd views:
- dashboard.js, devices.js, flows.js, applications.js, settings.js
Pattern: Wrap view content with secubox-page-wrapper and prepend
SbHeader.render() to hide LuCI sidebar when in portal context.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Fix Client Guardian JS files: replace invalid 'require X as Y' syntax
with direct RPC declarations (LuCI doesn't support as alias)
- Add factory default profile to Client Guardian profiles.json
- Redesign Netifyd devices page with modern card-based UI:
- Device type detection with emoji icons
- Gradient summary cards for stats
- Responsive grid layout
- Traffic distribution bars
- Real-time refresh with pulse animation
- Fix Netifyd RPC calls: use correct luci.secubox-netifyd object name
- Add WAN access control feature to secubox-admin
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Fixed "[object HTMLDivElement]" display bug in device and application list views.
## Problem:
- Device list showed "[object HTMLDivElement],[object HTMLDivElement],..." instead of table rows
- Applications list had the same issue
- Root cause: `sortedDevices.map()` and `sortedApps.map()` return arrays, but these arrays were being nested incorrectly in the E() children array
## Solution:
Changed table row structure from:
```javascript
E('div', { 'class': 'table' }, [
E('div', { 'class': 'tr table-titles' }, [...]), // header
sortedDevices.map(function(device) { // array nested wrong!
return E('div', {...});
})
])
```
To:
```javascript
E('div', { 'class': 'table' },
[
E('div', { 'class': 'tr table-titles' }, [...]) // header
].concat(
sortedDevices.map(function(device) { // properly flattened!
return E('div', {...});
})
)
)
```
## Technical Details:
- The E() helper expects children to be individual DOM elements, not nested arrays
- Using `.concat()` properly flattens the array of row elements
- Applied fix to both devices.js and applications.js views
## Testing:
- Deployed to router
- Device list now displays all 6 detected devices with IP, MAC, traffic stats
- Applications list displays all 4 application categories correctly
- Table formatting and styling render properly
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Enhanced all NetIfyd LuCI views with improved UX, live status, and better data visualization following modern dashboard patterns.
## Flows View (flows.js) - Complete Rewrite:
- Redesigned from individual flow tracking to aggregated flow analytics
- Added 4 gradient metric cards: Total, Active, Expired, Purged flows
- New interface activity table showing TCP/UDP/ICMP packets per interface
- Protocol distribution section with visual progress bars and percentages
- Pause/Resume button for real-time updates
- Information panel explaining flow data limitations
- 3-second refresh interval for real-time monitoring
## Applications View (applications.js) - Enhanced:
- Added live service status badge (green "Live" / red "Offline")
- Implemented search filter for application names
- Reduced refresh interval from 10s to 5s for faster updates
- Improved header layout with better spacing
- Added visual feedback with loading states
- Color-coded application indicators with percentage bars
## Devices View (devices.js) - Enhanced:
- Added live service status badge matching applications view
- Implemented search filter for IP addresses and MAC addresses
- Reduced refresh interval from 10s to 5s
- Enhanced header with modern layout
- Better device list presentation with last-seen timestamps
- Traffic distribution visualization with upload/download bars
## Settings View (settings.js) - Enhanced:
- Added comprehensive configuration guide section
- Included recommended configuration best practices
- Added performance considerations and warnings
- Flow Export explanation for advanced users
- Links to external documentation (Netify.ai)
- Visual improvements to service status banner
- Better organized help information with icons
## Technical Improvements:
- All views handle empty data gracefully with informative messages
- Consistent modern UI design across all views
- Better error handling and user feedback
- Improved polling efficiency with proper container creation
- Responsive layouts that work on mobile devices
## Testing:
- Deployed and tested on OpenWrt 23.05 with NetIfyd 5.2.1
- Verified RPC backend compatibility
- Confirmed graceful degradation when flow export disabled
- Validated live status indicators and refresh mechanisms
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
