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>
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>
