The Supervisor API doesn't always return 'changed' and 'removed' arrays
when reloading configuration, causing Zod validation errors.
Made all three fields (added, changed, removed) optional with default
empty arrays to handle cases where the API omits them.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
The autorestart field is not always present in the Supervisor API
response for getAllConfigInfo(), causing Zod validation errors.
Changed autorestart from required to optional field using .optional().
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixed the readLog() call to use the correct parameters for reading
from the end of the log file. When using a negative offset to read
the last N bytes, the length parameter must be 0, not a positive number.
Changes:
- Updated fetchMainLog default length from 4096 to 0
- Updated API route default length from '4096' to '0'
Correct usage:
- readLog(-4096, 0) - Read last 4096 bytes from end of file
- readLog(0, 4096) - Read 4096 bytes from start of file
This fixes the INCORRECT_PARAMETERS error when fetching the main
supervisord log.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Removed SUPERVISOR_LOGFILE environment variable and simplified readLog()
to use the standard 2-parameter XML-RPC API that relies on supervisord's
configured logfile path.
Changes:
- Removed SUPERVISOR_LOGFILE from .env.example
- Simplified SupervisorClient.readLog() to accept only offset and length
- Removed logfile path parameter and all environment variable logic
- Fixed mobile nav container padding (removed px-4 py-6)
The readLog() method now uses the standard supervisor.readLog(offset, length)
XML-RPC call, which automatically reads from the logfile path configured
in supervisord.conf.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Added SUPERVISOR_LOGFILE environment variable to configure the path to
the Supervisor main logfile for reading via XML-RPC.
Changes:
- Added SUPERVISOR_LOGFILE to .env.example with default path
- Removed getLogfilePath() method and cachedLogfilePath field from SupervisorClient
- Updated readLog() to use environment variable with fallback chain:
1. Explicitly provided logfilePath parameter
2. SUPERVISOR_LOGFILE environment variable
3. Default: /var/log/supervisor/supervisord.log
- Added debug logging to readLog() for troubleshooting
This allows users to configure the correct logfile path for their
Supervisor installation when using the custom 3-parameter XML-RPC
readLog implementation.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Updated the ConfigInfoSchema to accurately reflect the data structure
returned by Supervisor's getAllConfigInfo() XML-RPC method, fixing Zod
validation errors on the /config page.
Schema changes:
- Removed fields not in API: environment, priority, process_name, numprocs, numprocs_start, username
- Added missing fields: autorestart, killasgroup, process_prio, group_prio, stdout_syslog, stderr_syslog, serverurl
- Fixed type mismatches:
- stopsignal: string → number (API returns signal numbers like 15)
- uid: number|null → string (API returns username strings)
- directory: string|null → string
Updated ConfigTable.tsx to use process_prio instead of priority and
removed the non-existent numprocs column.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Update the readLog method to match custom Supervisor API requirements:
- Add third parameter (logfile_path) to supervisor.readLog call
- Retrieve logfile path from supervisor.getAPIVersion() metadata
- Cache logfile path after first retrieval to avoid repeated API calls
- Support optional explicit logfile_path parameter
- Fallback to default path if metadata extraction fails
Implementation details:
- Added cachedLogfilePath private field to SupervisorClient
- Added private getLogfilePath() method to extract path from API version
- Updated readLog signature: (offset, length, logfilePath?)
- Automatic path retrieval when logfilePath not provided
- Supports multiple metadata formats (logfile, logfile_path properties)
- Logs warnings if path extraction fails, uses sensible default
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit fixes all reported UI issues across the dashboard:
## Issue 1: Chart Colors and Tooltips ✅
- Create chartColors utility with static hex colors for Recharts compatibility
- Replace CSS variable colors (hsl(var(--))) with hex colors in all charts
- Add custom tooltip styling with dark background and white text for readability
- Fixes: ProcessStateChart, ProcessUptimeChart, GroupStatistics
## Issue 2: Process Card Heights ✅
- Add h-full and flex flex-col to ProcessCard component
- Add auto-rows-fr to process grid layout
- Ensures all cards have consistent heights regardless of content
## Issue 3: Batch Actions Button Labels ✅
- Simplify button labels from "Start Selected" to "Start"
- Remove "Stop Selected" to "Stop", "Restart Selected" to "Restart"
- Labels now always visible on all screen sizes
## Issue 4: Mobile Menu Background ✅
- Change mobile menu from semi-transparent (bg-background/95) to solid (bg-background)
- Removes backdrop blur for better visibility
## Issue 5: Group Header Button Overflow ✅
- Add flex-wrap to button container in GroupCard
- Stack buttons vertically on mobile (flex-col md:flex-row)
- Buttons take full width on mobile, auto width on desktop
## Issue 6: Logs Search Input Overflow ✅
- Change LogSearch from max-w-md to w-full sm:flex-1 sm:max-w-md
- Search input now full width on mobile, constrained on desktop
## Issue 7: Logs Action Button Overflow ✅
- Add flex-wrap to LogControls button container
- Buttons wrap to new row when space is limited
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implemented complete client-side error handling and reporting system:
Error Boundary Component (components/providers/ErrorBoundary.tsx):
- React Error Boundary to catch component errors
- Automatic error logging to client logger
- Error reporting to server endpoint
- User-friendly fallback UI with error details (dev mode)
- Reset and reload functionality
- Custom fallback support via props
Global Error Handler (lib/utils/global-error-handler.ts):
- Window error event listener for uncaught errors
- Unhandled promise rejection handler
- Automatic error reporting to server
- Comprehensive error metadata collection:
- Error message and stack trace
- URL, user agent, timestamp
- Filename, line number, column number (for window errors)
Client Error Reporting Endpoint (app/api/client-error/route.ts):
- Server-side endpoint to receive client errors
- Integrated with withLogging() for automatic server logging
- Accepts error reports from both ErrorBoundary and global handlers
- Returns acknowledgement to client
Error Boundary Integration (components/providers/Providers.tsx):
- Wrapped entire app in ErrorBoundary
- Initialized global error handlers on mount
- Catches React errors, window errors, and unhandled rejections
Error Reporting Features:
- Duplicate error tracking prevention
- Async error reporting (non-blocking)
- Graceful degradation (fails silently if reporting fails)
- Development vs production error display
- Structured error metadata for debugging
All errors now:
- Log to browser console via client logger
- Report to server for centralized logging
- Display user-friendly error UI
- Include full context for debugging
- Work across React, window, and promise contexts
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Created client-side logging infrastructure for React Query and hooks:
New Client Logger (lib/utils/client-logger.ts):
- Environment-aware logging (debug/info in dev, warn/error in prod)
- Structured logging with context objects
- Performance timing helpers (time/timeEnd)
- Group logging for related operations
- Factory functions for hook/query/mutation-specific loggers
React Query Configuration (components/providers/Providers.tsx):
- Added custom logger to QueryClient
- Integrated with client-side logger for consistent formatting
- Configured mutation retry defaults
SSE Hook Logging (lib/hooks/useEventSource.ts):
- Connection lifecycle logging (connect/disconnect/reconnect)
- Heartbeat and process update event logging
- Error tracking with reconnection attempt details
- Exponential backoff logging for reconnections
Supervisor Hooks Logging (lib/hooks/useSupervisor.ts):
- Added logging to all critical mutation hooks:
- Process control (start/stop/restart)
- Batch operations (start-all/stop-all/restart-all)
- Configuration reload
- Signal operations
- Logs mutation start, success, and error states
- Includes contextual metadata (process names, signals, etc.)
All client-side logs:
- Use structured format with timestamps
- Include relevant context for debugging
- Respect environment (verbose in dev, minimal in prod)
- Compatible with browser devtools
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Added production-ready logging using Pino with structured JSON output,
pretty printing in development, and automatic sensitive data redaction.
## Phase 1: Core Logger Setup
- Installed pino, pino-http, and pino-pretty dependencies
- Created logger utility (lib/utils/logger.ts):
- Environment-based log levels (debug in dev, info in prod)
- Pretty printing with colors in development
- JSON structured logs in production
- Sensitive data redaction (passwords, tokens, auth headers)
- Custom serializers for errors and requests
- Helper functions for child loggers and timing
- Added LOG_LEVEL environment variable to .env.example
- Configured Next.js for Turbopack with external pino packages
## Phase 2: API Request Logging
- Created API logger wrapper (lib/utils/api-logger.ts):
- withLogging() HOF for wrapping API route handlers
- Automatic request/response logging with timing
- Correlation ID generation (X-Request-ID header)
- Error catching and structured error responses
- logPerformance() helper for timing operations
- createApiLogger() for manual logging in routes
## Phase 3: Supervisor Client Logging
- Updated lib/supervisor/client.ts:
- Added logger instance to SupervisorClient class
- Comprehensive XML-RPC call logging (method, params, duration)
- Error logging with full context and stack traces
- Success logging with result size tracking
- DEBUG level logs for all XML-RPC operations
- Constructor logging for client initialization
## Configuration Changes
- Updated next.config.ts for Turbopack compatibility
- Added serverComponentsExternalPackages for pino
- Removed null-loader workaround (not needed)
## Features Implemented
✅ Request correlation IDs for tracing
✅ Performance timing for all operations
✅ Sensitive data redaction (passwords, auth)
✅ Environment-based log formatting
✅ Structured JSON logs for production
✅ Pretty colored logs for development
✅ Error serialization with stack traces
✅ Ready for log aggregation (stdout/JSON)
## Next Steps (Phases 4-7)
- Update ~30 API routes with logging
- Add React Query/hooks error logging
- Implement client-side error boundary
- Add documentation and testing
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
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:
- 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:
- View all process configurations in sortable table
- Reload supervisord configuration with confirmation
- Add new process groups dynamically
- Remove process groups with confirmation
- Configuration auto-refresh every 10 seconds
Implementation details:
- Created config API routes: /api/supervisor/config (GET), /api/supervisor/config/reload (POST), /api/supervisor/config/group (POST/DELETE)
- Added React Query hooks: useConfig, useReloadConfig, useAddProcessGroup, useRemoveProcessGroup
- Created components:
- ConfigTable: Sortable table with columns for group, name, command, directory, autostart, priority, numprocs
- ReloadConfigButton: Reload config with confirmation dialog
- ProcessGroupForm: Add/remove groups with separate forms
Configuration page features:
- Displays all process configurations in sortable table
- Click column headers to sort (ascending/descending)
- Visual indicators for autostart (green dot = enabled)
- Shows command in monospace code blocks
- Process group management forms
- Reload configuration button in header
Data displayed per process:
- Group name
- Process name
- Command (with syntax highlighting)
- Working directory
- Autostart enabled/disabled
- Priority value
- Number of processes (numprocs)
Phase 4 complete (8-10 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)
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>
- Add LogViewer component with syntax highlighting and auto-scroll
- Add LogControls for play/pause, auto-scroll, refresh, download, clear
- Add LogSearch component with search highlighting
- Add Input UI component
- Fix TypeScript type issues in ProcessCard and types.ts
- Fix XML-RPC client type issues
- Add force-dynamic to layout to prevent SSR issues with client components
- Add mounted state to Navbar for theme toggle hydration
- Add custom 404 page
Components added:
- components/logs/LogViewer.tsx - Main log viewer with real-time display
- components/logs/LogControls.tsx - Control panel for log viewing
- components/logs/LogSearch.tsx - Search input for filtering logs
- components/ui/input.tsx - Reusable input component
Fixes:
- ProcessStateCode type casting in ProcessCard
- XML-RPC client options type (use any to avoid library type issues)
- canStartProcess/canStopProcess type assertions
- Dynamic rendering to prevent SSR hydration issues
🤖 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>
