Features added:
- Created SSE (Server-Sent Events) endpoint at /api/supervisor/events
- Polls supervisor every 2 seconds for state changes
- Sends process-update events when state changes detected
- Sends heartbeat events to keep connection alive
- Includes error handling with error events
- Created useEventSource hook for managing SSE connections
- Automatic reconnection with exponential backoff
- Configurable max reconnection attempts (default 10)
- Connection status tracking (connecting, connected, disconnected, error)
- Clean event listener management with proper cleanup
- Heartbeat monitoring for connection health
- Created ConnectionStatus component
- Visual status indicator with icons (Wifi, WifiOff, Loader, AlertCircle)
- Color-coded states (green=connected, yellow=connecting, red=error)
- Shows reconnection attempt count
- Manual reconnect button when disconnected/error
- Integrated real-time updates into dashboard and processes pages
- Auto-refresh process data when state changes occur
- Connection status indicator in page headers
- No manual refresh needed for live updates
- Implemented proper cleanup on unmount
- EventSource properly closed
- Reconnection timeouts cleared
- No memory leaks
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Features added:
- Created useKeyboardShortcuts hook for managing keyboard shortcuts
- Supports modifier keys (Ctrl, Shift, Alt)
- Automatically ignores shortcuts when input fields are focused
- ESC key blurs input fields to enable shortcuts
- Added global keyboard shortcuts:
- / : Focus search field
- r : Refresh process list
- a : Select all processes (flat view only)
- ESC : Clear selection / unfocus
- ? (Shift+/) : Show keyboard shortcuts help
- Added process navigation shortcuts:
- j : Select next process
- k : Select previous process
- Space : Toggle selection of focused process
- Auto-scroll to focused process
- Created KeyboardShortcutsHelp modal component:
- Organized shortcuts by category
- Visual kbd elements for keys
- Info about input field behavior
- Added keyboard shortcuts button to processes page header
- Added isFocused prop to ProcessCard with accent ring styling
- Added data-process-id attributes for keyboard navigation
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Features added:
- Advanced search and filtering for processes
- Real-time search by name, group, or description
- Filter by process state (All, Running, Stopped, Fatal, Starting, Stopping)
- Filter by process group
- Collapsible filter panel
- Clear all filters button
- Filter count indicator
Implementation details:
- Created ProcessFilters component with:
- Search input with clear button and search icon
- State filter buttons with color indicators
- Group filter buttons (auto-generated from available groups)
- Toggle filters panel button
- Active filters detection and clear button
Processes page enhancements:
- Integrated ProcessFilters component
- Real-time filtering with useEffect
- Display count shows "X of Y processes (filtered)"
- Select All works on filtered results
- Empty state when no matches: "No processes match the current filters"
- Filters apply to both flat and grouped views
Filter features:
- Search: Live filtering as you type (name, group, description)
- State filter: 6 filter options with colored dots
- Group filter: Dynamic buttons for each unique group
- Clear filters: Single button to reset all filters
- Collapsible panel: Show/hide filters to save space
- Active filter indicator: Clear button appears when filters active
UX improvements:
- Search input with X button to clear
- Filter button toggles panel (highlighted when active)
- Color-coded state buttons matching process states
- Responsive layout with flex-wrap for many groups
- Maintains selection state across filter changes
Phase 6 complete (2-3 hours estimated)
Features added:
- Multi-select functionality for processes with checkboxes
- Floating BatchActions toolbar appears when processes are selected
- Batch operations: Start Selected, Stop Selected, Restart Selected
- Select All / Deselect All button in processes page
- Visual feedback with ring indicator on selected cards
- Click card to toggle selection, buttons prevent card selection
Implementation details:
- Created batch API routes: /api/supervisor/processes/{start-all,stop-all,restart-all}
- Added React Query hooks: useStartAllProcesses, useStopAllProcesses, useRestartAllProcesses
- Created BatchActions component with floating toolbar
- Enhanced ProcessCard with optional selection mode (isSelected, onSelectionChange props)
- Updated processes page with selection state management
- Checkbox prevents event bubbling to avoid conflicts with action buttons
UX improvements:
- Selected cards show primary ring with offset
- BatchActions toolbar slides up from bottom
- Selection count displayed in toolbar
- Clear selection with X button or after batch action completes
Phase 3 complete (4-6 hours estimated)
Features added:
- Group-based process organization with collapsible cards
- Batch operations for groups (Start All, Stop All, Restart All)
- Group statistics display (running, stopped, fatal counts)
- Dedicated /groups page for group-centric management
- View toggle in /processes page (Flat view | Grouped view)
Implementation details:
- Created group API routes: /api/supervisor/groups/[name]/{start,stop,restart}
- Added React Query hooks: useStartProcessGroup, useStopProcessGroup, useRestartProcessGroup
- Created components: GroupCard, GroupView, GroupSelector
- Updated Navbar with Groups navigation link
- Integrated grouped view in processes page with toggle
Phase 2 complete (6-8 hours estimated)
- Modern web interface for Supervisor process management
- Built with Next.js 16 (App Router) and Tailwind CSS 4
- Full XML-RPC client implementation for Supervisor API
- Real-time process monitoring with auto-refresh
- Process control: start, stop, restart operations
- Modern dashboard with system status and statistics
- Dark/light theme with OKLCH color system
- Docker multi-stage build with runtime env var configuration
- Gitea CI/CD workflow for automated builds
- Comprehensive documentation (README, IMPLEMENTATION, DEPLOYMENT)
Features:
- Backend proxy pattern for secure API communication
- React Query for state management and caching
- TypeScript strict mode with Zod validation
- Responsive design with mobile support
- Health check endpoint for monitoring
- Non-root user security in Docker
Environment Variables:
- SUPERVISOR_HOST, SUPERVISOR_PORT
- SUPERVISOR_USERNAME, SUPERVISOR_PASSWORD (optional)
- Configurable at build-time and runtime
🤖 Generated with Claude Code (https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
