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