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>
Move background styling to the nav element itself with rounded corners.
- Add bg-background/95 backdrop-blur-md to nav element
- Add rounded-lg and p-4 for better visual appearance
- Creates frosted glass card effect for the mobile menu
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Move background styling from outer overlay to inner container for proper visibility.
- Remove bg-background from outer fixed div
- Add bg-background/95 backdrop-blur-md h-full to inner container
- Creates frosted glass effect with proper blur
🤖 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>
- Fix import of generateRequestId in events/route.ts (import from logger instead of api-logger)
- Remove deprecated logger config from QueryClient (no longer supported in latest React Query)
These changes resolve TypeScript compilation errors and allow the build to succeed.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit implements a complete responsive design overhaul making the Supervisor UI fully mobile-friendly and beautiful across all devices (320px phones to 4K displays).
## Phase 1: Mobile Navigation
- Add hamburger menu to Navbar with slide-out drawer
- Auto-close on navigation with body scroll lock
- Responsive logo sizing
## Phase 2: Touch-Friendly Buttons
- Increase touch targets to 44px on mobile (36px for small buttons)
- Add responsive button layouts in ProcessCard
- Flex-wrap prevents cramped button rows
## Phase 3: Responsive Spacing & Typography
- Add responsive padding to Card components (p-4 md:p-6)
- Scale typography across breakpoints (text-xl md:text-2xl)
- Responsive spacing in AppLayout and all pages
## Phase 4: Mobile-Friendly Tables
- Dual layout for ConfigTable: table on desktop, cards on mobile
- Preserve all data with proper formatting and wrapping
- Hide table on mobile, show card-based layout
## Phase 5: Modal Improvements
- Add horizontal padding (p-4) to all modals
- Prevent edge-touching on mobile devices
- Fixed SignalSender, KeyboardShortcutsHelp, StdinInput modals
## Phase 6: Page-Specific Layouts
- Processes page: responsive header, controls, and grid spacing
- BatchActions bar: full-width on mobile, centered on desktop
- Logs page: responsive controls and height calculations
- Config page: responsive header and error states
## Phase 7: Polish & Final Touches
- Add viewport meta tag to layout
- Responsive empty states and loading skeletons
- Consistent responsive sizing across all error messages
- Mobile-first typography scaling
🎉 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Changed flex container from horizontal (default) to vertical (flex-col) to properly
stack navbar and main content. This fixes the layout issue where content was
hanging on the right side of the window.
🤖 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>
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>
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>
The app was crashing with "useTheme must be used within ThemeProvider"
error during server-side rendering.
Changes:
- Created AppLayout client component to wrap Navbar
- Modified useTheme hook to return default values during SSR
instead of throwing an error
- Updated Navbar to safely handle theme context
- Moved Navbar rendering into client-side only AppLayout
This fixes the SSR hydration mismatch and allows the app
to render correctly on both server and client.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Created FEATURES.md with detailed phase-by-phase breakdown
- Updated README.md with completed features list
- Added roadmap showing 11/11 phases completed
- Documented all components, API routes, and architecture
- Added statistics and technical details
- Reference to commit hashes for each phase
This provides a complete overview of the Supervisor UI project
including all implemented features, technical architecture, and
future enhancement possibilities.
🤖 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:
- 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:
- Visual analytics dashboard with interactive charts
- Process state distribution pie chart
- Process uptime bar chart (top 10 by uptime)
- Group statistics stacked bar chart
- Real-time data visualization using Recharts
Implementation details:
- Created chart components:
- ProcessStateChart: Pie chart showing state distribution (Running, Stopped, Fatal, Starting, Stopping)
- ProcessUptimeChart: Horizontal bar chart displaying top 10 processes by uptime in hours
- GroupStatistics: Stacked bar chart showing process counts per group by state
Dashboard enhancements:
- Added "Analytics" section between statistics cards and quick actions
- Charts display only when processes are loaded and available
- Responsive grid layout (2 columns on large screens for state/group charts)
- Full-width uptime chart for better readability
Chart features:
- Interactive tooltips with formatted data
- Color-coded by state (success green, destructive red, muted gray)
- Proper legends and labels
- Uptime displayed in hours with minutes in tooltip
- Process names truncated to 15 chars for display
- Empty state messages when no data available
Data visualization:
- Pie chart: Percentage distribution of process states
- Bar chart: Top 10 processes sorted by uptime (descending)
- Stacked bar: Group overview with running/stopped/fatal breakdown
Phase 5 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)
- Re-enable output: 'standalone' in next.config.ts for Docker builds
- Remove public directory copy from Dockerfile (not needed for this project)
- Standalone mode works with force-dynamic routing to prevent SSR issues
Fixes Gitea Actions build failure where .next/standalone was not found
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>
