- Create API key context for managing authentication state
- Add dedicated settings page for API key management
- Move performance metrics to dedicated page in navigation
- Update middleware to support URL parameter fallback
- Enhance UI with proper glass morphism styling
- Add Solarized color utilities to CSS
- Improve spacing and padding throughout UI components
- Remove manual bullet points from list items
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Implement studio mode transition workflow with Go Live buttons
- Add collapsible team grouping for better stream organization
- Include source locking functionality for newly created streams
- Enhance footer status indicators with improved visual styling
- Create triggerTransition API endpoint for studio mode operations
- Add CollapsibleGroup component for expandable content sections
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Enhanced obsStatus API to include studio mode and preview scene information
- Updated Footer component to show studio mode status (STUDIO/DIRECT)
- Added preview scene display in footer when studio mode is enabled
- Implemented dynamic scene button states showing Program/Preview/Both status
- Scene buttons now clearly indicate preview vs program with distinct colors
- Added proper state management for studio mode and preview scenes
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Restructure connection status layout for better hierarchy
- Move status dot to be inline with Connected/Disconnected text
- Use proper flex alignment (items-center) for dot and text
- Separate title from status indicator for cleaner UI
- Maintain consistent spacing with gap-2
- Unified API response format handling to support both old and new formats
- Maintained enhanced UI layout from HEAD branch
- Preserved performance optimizations and smart polling features
- Ensured consistent error handling across components
- Clean up all backward compatibility checks for old API format
- All endpoints now consistently return { success: true, data: [...] }
- Simplify response handling across all components and pages
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Added team and stream counts displayed when OBS disconnected
- Added counts display alongside live status when OBS connected
- Moved OFFLINE/IDLE status indicators to left column for better balance
- Fixed green dot positioning to be properly next to "Connected" text
- Added custom CSS for status dots since Tailwind classes weren't applying
- Enhanced footer layout with better visual hierarchy
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Moved OFFLINE/IDLE streaming status from right to left column
- Left side now shows: Connection + Host/Port + Streaming/Recording status
- Right side now shows: Scene info + Team/Stream counts (less crowded)
- Better balance of information between the two columns
- Improves readability and visual hierarchy
Footer layout now:
Left: OBS Studio (connected) + 127.0.0.1:4455 + OFFLINE/IDLE status
Right: Scene info + Teams/Streams counts
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Added custom CSS for status dots using Solarized theme colors
- Replaced Tailwind classes with custom .status-dot classes
- Fixed connection status dot (green when connected, red when disconnected)
- Fixed streaming/recording status dots (red when active, gray when idle)
- Used proper Solarized color palette for consistency
Status dots now properly display:
- Connection: Green dot for connected, red for disconnected
- Streaming: Red dot when live, gray when offline
- Recording: Red dot when recording, gray when idle
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Created /api/counts endpoint for database statistics
- Updated footer to display team and stream counts
- Shows counts when OBS is connected (alongside OBS stats)
- Shows database stats when OBS is disconnected (fallback display)
- Polls counts every 60 seconds (less frequent than OBS status)
- Maintains backward compatibility with API response formats
Footer now shows:
- Teams: X
- Streams: Y
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Changed branding from "OBS Stream Manager" to "Live Stream Manager" throughout UI
- Enhanced stream deletion with comprehensive OBS cleanup:
- Removes stream's nested scene
- Deletes browser source
- Clears text files referencing the stream
- Removes stream from all source switchers
- Enhanced team deletion to clean up all OBS components:
- Deletes team scene/group
- Removes team text source
- Deletes all associated stream scenes and sources
- Clears all related text files
- Fixed stream selection to use proper team-prefixed names in text files
- Added StreamWithTeam type for proper team data handling
- Improved browser source creation with audio controls:
- Enabled "Control Audio via OBS" setting
- Auto-mutes audio on creation
- Attempted multiple approaches to fix text centering (still unresolved)
Known issue: Text centering still positions left edge at center despite multiple attempts
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add delete button to each stream with confirmation modal
- Implement DELETE endpoint that removes sources from OBS before database deletion
- Fix dropdown positioning issue when scrolling by removing scroll offsets
- Change add stream form to use Twitch username instead of full URL
- Automatically calculate Twitch URL from username (https://twitch.tv/{username})
- Add username validation (4-25 chars, alphanumeric and underscores only)
- Improve "View Stream" link visibility with button styling
- Ensure streams list refreshes immediately after deletion
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Replace explicit 'any' types with 'unknown' or specific types
- Fix Jest DOM test setup with proper type definitions
- Resolve NODE_ENV assignment errors using Object.defineProperty
- Fix React Hook dependency warnings with useCallback patterns
- Remove unused variables and add appropriate ESLint disables
- Update documentation with groups feature information
- Ensure all tests pass with proper TypeScript compliance
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Complete rewrite of dropdown positioning using React Portal:
- Renders dropdown in document.body via createPortal
- Uses fixed positioning with calculated coordinates
- Completely bypasses all CSS stacking contexts
- Includes proper SSR handling with mounted state
- Maintains click-outside detection for both button and menu
This should definitively solve the dropdown layering issue by rendering
the dropdown outside any parent containers with backdrop-filter.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Simplified dropdown positioning to fix layering issues:
- Reverted to absolute positioning with inline z-index styles
- Added explicit z-index to dropdown container in streams page
- Removed complex fixed positioning logic that was causing problems
This should resolve dropdown visibility issues while maintaining proper positioning.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Replace absolute positioning with fixed positioning to break out of
stacking contexts created by glass morphism effects.
Changes:
- Use fixed positioning with calculated coordinates
- Track button position with getBoundingClientRect()
- Update click outside detection to include button reference
- Ensure dropdown appears above all other elements
This should resolve the issue where dropdowns appear behind other containers.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Increase dropdown z-index to z-[9999] to ensure it appears above
glass morphism containers and other stacked elements.
Fixes issue where team selection dropdown appears behind existing streams box.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Implement performance dashboard with real-time metrics tracking
- Add React hooks for smart polling, debouncing, and active source lookup
- Create Jest testing framework with comprehensive test suites for components, API endpoints, and utilities
- Enhance UI components with optimized rendering and memoization
- Improve polling efficiency with visibility detection and adaptive intervals
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Major UX Improvements:
- Replace all alert() dialogs with elegant toast notifications
- Add comprehensive loading states for all async operations
- Implement client-side form validation with visual feedback
- Add React Error Boundary for graceful error recovery
Components Added:
- Toast notification system with success/error/warning/info types
- useToast hook for easy notification management
- ErrorBoundary component with development error details
- Form validation with real-time feedback
User Experience:
- Professional toast notifications instead of browser alerts
- Loading indicators prevent double-clicks and show progress
- Immediate validation feedback prevents submission errors
- Graceful error recovery with retry options
- Enhanced accessibility with proper ARIA labels
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Convert entire UI to Solarized Dark color palette for better accessibility
- Add CSS custom properties for maintainable theming
- Improve dropdown readability with high contrast backgrounds
- Enhance active navigation button visibility with distinct styling
- Move /add route to /streams for better semantic naming
- Update documentation to reflect design system changes
- Achieve WCAG AAA contrast ratios (7.5:1+) for colorblind accessibility
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Fix broken Tailwind gap classes by implementing custom CSS spacing system
- Add .form-row and .button-group classes for consistent 16px and 12px spacing
- Replace broken SVG icons with reliable emoji icons throughout application
- Implement comprehensive button system with proper sizing and color coding:
* btn-success (green) for add/save actions
* btn-danger (red) for delete actions
* btn-secondary (glass) for edit/cancel actions
* btn-sm for smaller buttons with proper proportions
Updated all pages with consistent spacing:
- Header: Fixed navigation button spacing with button-group class
- Teams: Fixed add team form and action button spacing
- Streams: Moved Add Stream button to same line as team dropdown
- Home: Updated edit button styling and spacing
- Edit: Fixed all form buttons with proper spacing and modern icons
Enhanced user experience:
- Professional button hover effects with subtle animations
- Consistent visual hierarchy with proper spacing
- Responsive design maintained across all screen sizes
- Modern glass morphism design with improved accessibility
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Refactor Add Stream page to match Teams page layout with glass panels
- Rename "Add Stream" to "Streams" in navigation and page title
- Add existing streams display with loading states and empty state
- Implement unified design system with modern glass morphism styling
- Add Header and Footer components with OBS status monitoring
- Update global CSS with comprehensive component styling
- Consolidate client components into main page files
- Add real-time OBS connection status with 30-second polling
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
