Applied withLogging() wrapper to all 24 API routes for consistent logging:
Process Control Routes:
- Start/stop/restart individual processes
- Start-all/stop-all/restart-all batch operations
Signal Routes:
- Signal individual processes
- Signal all processes
- Signal process groups
Group Management Routes:
- Start/stop/restart process groups
- Signal operations for groups
Configuration Routes:
- Get all configs (GET)
- Reload configuration (POST)
- Add/remove process groups (POST/DELETE)
Log Routes:
- Read main supervisord log
- Read process stdout/stderr logs
- Clear process logs (individual and all)
System Routes:
- Get system info
- Get all processes info
- Get individual process info
- Send stdin to process
All routes now include:
- Request/response logging with timing
- Automatic error handling and correlation IDs
- X-Request-ID header propagation
- Consistent metadata in responses
Also fixed Next.js 16 deprecation:
- Moved experimental.serverComponentsExternalPackages to serverExternalPackages
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Features added:
- Created stdin API route for sending input to process stdin
- Added useSendProcessStdin React Query hook
- Created StdinInput modal component with:
- Multi-line textarea for input
- Ctrl+Enter keyboard shortcut
- Optional newline append
- Character count display
- Info banner explaining stdin functionality
- Added stdin button to ProcessCard (Terminal icon)
- Button only enabled when process is running (state === 20)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Features added:
- Send Unix signals to processes via interactive modal
- Support for common signals (HUP, INT, TERM, KILL, USR1, USR2, QUIT)
- Custom signal input for advanced use cases
- Safety confirmations for dangerous signals (TERM, KILL, QUIT)
- Signal button added to each ProcessCard
Implementation details:
- Created signal API routes:
- /api/supervisor/processes/[name]/signal - Send signal to process
- /api/supervisor/groups/[name]/signal - Send signal to group
- /api/supervisor/processes/signal-all - Send signal to all processes
- Added React Query hooks:
- useSignalProcess() - Send signal to single process
- useSignalProcessGroup() - Send signal to process group
- useSignalAllProcesses() - Send signal to all processes
- Created SignalSender modal component:
- Grid of common signal buttons with descriptions
- Custom signal text input (auto-uppercase)
- Two-step confirmation for dangerous signals
- Visual warning with AlertTriangle icon
- Destructive button variant for confirmed dangerous signals
- Backdrop blur overlay
ProcessCard enhancements:
- Added Zap icon signal button
- Modal opens on signal button click
- Button disabled when process is stopped
- Modal integrates with useSignalProcess hook
Common signals with descriptions:
- HUP (1): Reload configuration
- INT (2): Interrupt - graceful shutdown
- QUIT (3): Quit
- TERM (15): Terminate - graceful shutdown (dangerous)
- KILL (9): Kill - immediate termination (dangerous)
- USR1 (10): User-defined signal 1
- USR2 (12): User-defined signal 2
Safety features:
- Dangerous signals require confirmation
- Warning message explains risks
- Button changes to destructive variant
- Custom signals also checked for danger
- Clear visual feedback during operation
Phase 7 complete (3-4 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)
Phase 1 Complete: Log Viewer with Real-time Monitoring
======================================================
Features Added:
- Real-time log viewer with syntax highlighting (ERROR, WARNING, INFO)
- Play/Pause controls for auto-refresh
- Auto-scroll with user scroll detection
- Search and filter functionality with highlighting
- Process selector (all processes + supervisord main log)
- Stdout/Stderr log type switching
- Download logs to file
- Clear logs (process-specific or main log)
- Responsive layout with proper height handling
API Routes Added:
- GET /api/supervisor/logs - Read main supervisord log
- DELETE /api/supervisor/logs - Clear main log
- DELETE /api/supervisor/processes/[name]/logs - Clear process logs
- POST /api/supervisor/processes/logs/clear-all - Clear all logs
Hooks Added:
- useMainLog() - Query main supervisord log with auto-refresh
- useClearMainLog() - Mutation to clear main log
- useClearProcessLogs() - Mutation to clear process logs
- useClearAllLogs() - Mutation to clear all process logs
Components:
- LogViewer - Displays logs with syntax highlighting and search
- LogControls - Control panel with play/pause, auto-scroll, actions
- LogSearch - Search input with clear button
- Full logs page implementation with process/log type selection
UX Improvements:
- Color-coded log levels (red for errors, yellow for warnings, cyan for info)
- Search term highlighting in logs
- Auto-scroll with "Scroll to bottom" button when paused
- Confirmation dialogs for destructive actions
- Loading states and error handling
- Download logs with timestamped filenames
This completes the most requested feature (log viewing) with production-ready
functionality including real-time tailing, search, and management capabilities.
🤖 Generated with Claude Code (https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- 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>
