- 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>
- Add automatic detection and installation of build-essential
- Support Ubuntu/Debian, Alpine, and RHEL/CentOS ARM runners
- Resolves 'c++: No such file or directory' error for native modules
- Ensures bufferutil and other native dependencies can compile
🤖 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>
Added CSS properties to force dropdown above stacking contexts:
- z-index: 99999 \!important
- position: absolute
- transform: translateZ(0) to create new stacking context
- will-change: transform for optimization
This addresses the issue where backdrop-filter in .glass creates
stacking contexts that hide dropdowns.
🤖 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>
- Restore bufferutil as regular dependency for WebSocket performance
- Remove --no-optional flag from npm ci
- Self-hosted runners now have proper C++ build tools installed
This enables full native module support and optimal WebSocket performance.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Move bufferutil to optionalDependencies (not required for core functionality)
- Add --no-optional flag to npm ci in workflow to skip native dependencies
- This avoids needing C++ build tools on CI runners
The bufferutil package is a performance optimization for WebSocket but not required.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Remove Node.js matrix strategy since Node is pre-installed on self-hosted runners.
This reduces build time by avoiding duplicate builds.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add group_name column to teams table for mapping teams to OBS groups
- Create API endpoints for group creation (/api/createGroup) and bulk sync (/api/syncGroups)
- Update teams UI with group status display and creation buttons
- Implement automatic group assignment when adding streams
- Add comprehensive OBS setup documentation (docs/OBS_SETUP.md)
- Fix team list spacing issue with explicit margins
- Update OBS client with group management functions
- Add database migration script for existing deployments
🤖 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>
Frontend Updates:
- Handle both old and new API response formats for backward compatibility
- Updated Teams, Streams, and Edit Stream pages to parse new response structure
- Added graceful handling of { success: true, data: [...] } format
- Maintained support for legacy direct array responses
Bug Fix:
- Resolved TypeError: teamsData.map is not a function
- Ensures smooth transition as we update API endpoints
- Prevents breaking changes during API modernization
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
API Infrastructure Improvements:
- Created standardized API helper utilities for consistent error handling
- Added comprehensive request validation with detailed error messages
- Implemented proper HTTP status codes for different error types
- Added request body parsing with validation helpers
Enhanced Teams API:
- Added input validation with length and format checks
- Implemented duplicate team name prevention
- Added proper error categorization (validation, database, server errors)
- Consistent response format with timestamps
- Improved error messages for better debugging
Professional Standards:
- Standardized error response structure across all APIs
- Added development vs production error detail filtering
- Implemented async error boundary wrapper for unhandled exceptions
- Enhanced logging with structured error information
- Added proper sorting for team list responses
Foundation for Future APIs:
- Reusable error handling patterns for all API routes
- Validation helpers that can be extended to other endpoints
- Consistent response structure for frontend integration
- Better debugging capabilities for development
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Extended the toast notification system to all pages:
- Streams page: Added form validation, loading states, and toast notifications
- Edit Stream page: Added validation, improved error handling, and toast feedback
- Home page: Added toast notifications for stream switching operations
Consistent User Experience:
- All forms now have real-time validation with visual feedback
- Loading states prevent double-clicks and show progress
- Success/error feedback through elegant toast notifications
- Replaced old message display systems with modern toast UI
Professional Polish:
- Comprehensive client-side validation before API calls
- Clear error messages help users understand issues
- Success notifications confirm actions completed
- Consistent error handling patterns across all components
🤖 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>
- Document both quick start and custom database location options
- Explain template database usage and git ignore behavior
- Provide clear steps for FILE_DIRECTORY environment variable setup
- Help users avoid accidentally committing personal development data
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Create sources.template.db with empty tables but proper schema
- Update .gitignore to track template database while ignoring local databases
- Allows users to copy template and configure FILE_DIRECTORY for their local setup
- Prevents accidental commits of local development data
🤖 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>
- Skip API key authentication for localhost and local network IPs
- Maintain security for external access while preserving usability
- Log internal network access for transparency
- Supports localhost, 127.0.0.1, and 192.168.x.x ranges
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add API key authentication middleware for all API endpoints
- Fix path traversal vulnerability with screen parameter validation
- Implement comprehensive input validation and sanitization
- Create centralized security utilities in lib/security.ts
- Add input validation for all stream and screen API endpoints
- Prevent SQL injection with proper parameter validation
- Add URL validation and string sanitization
- Update documentation with security setup instructions
- Pass all TypeScript type checks and ESLint validation
Security improvements address critical vulnerabilities:
- Authentication: Protect all API endpoints with API key
- Path traversal: Validate screen names against allowlist
- Input validation: Comprehensive validation with error details
- XSS prevention: String sanitization and length limits
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Enhanced CLAUDE.md with detailed architectural concepts and patterns
- Added dynamic table naming system documentation
- Documented persistent OBS connection management and dual integration
- Explained glass morphism UI architecture and real-time monitoring
- Updated README.md with modern professional presentation
- Added comprehensive setup instructions and feature highlights
- Included all development commands and API endpoint references
- Cross-referenced CLAUDE.md for detailed technical documentation
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Convert GitHub Actions workflow to Forgejo format
- Configure workflows to run on self-hosted runners
- Maintain existing build pipeline with Node.js 20 and 22 matrix
- Include type checking, linting, and build steps
- Upload build artifacts for both Node.js versions
🤖 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>
