- Created OfflineQueueManager component to display queued requests
- Shows request details: method, URL, timestamp, priority, retry count
- Allows removing individual requests
- Allows clearing entire queue
- Auto-updates queue every second while dialog is open
- Priority badges with color coding
- Empty state when no requests queued
- Uses Dialog component for modal display
- Action 2.5.1.4 complete
- Action 2.3.1.4 was already implemented in Action 2.3.1.1
- Message deduplication uses processedMessages Set to track message IDs
- Prevents duplicate cache updates from same message
- Includes cleanup of old processed message IDs
- Action 2.3.1.4 complete
- Added documentation explaining coexistence of Zustand and React Query sync
- Added type guards in broadcastSync.ts to verify message format before processing
- Added type guards in reactQuerySync.ts to verify message format before processing
- Both sync mechanisms use different channel names (no direct conflicts)
- Both sync mechanisms use different message formats (no cross-processing)
- Type guards ensure handlers only process their own message types
- Prevents accidental cross-processing of messages between sync mechanisms
- Both syncs can coexist safely without conflicts
- Action 2.3.1.3 complete
- Added useQueryClient hook to App component
- Added setupReactQuerySync import and initialization
- Initialize sync on App mount with cleanup on unmount
- React Query cache synchronization now active across browser tabs
- Multi-tab updates work when mutations succeed or queries are invalidated
- Action 2.3.1.2 complete
- Created reactQuerySync.ts with setupReactQuerySync() function
- Uses BroadcastChannel API to sync cache updates across browser tabs
- Subscribes to QueryClient mutation cache to broadcast mutation successes
- Subscribes to QueryClient query cache to broadcast query invalidations
- Implements message deduplication using message IDs and processed messages Set
- Implements tab ID tracking to avoid processing messages from same tab
- Handles three message types: query-invalidate, query-set-data, mutation-success
- Includes shouldSync filter function for selective synchronization
- Includes cleanup function to stop synchronization
- Focuses on invalidations and mutations (not every query update) for performance
- Comprehensive error handling and logging
- Action 2.3.1.1 complete - utility ready for integration
- Migrated useDashboard hook from useState/useEffect to React Query
- Added query key factory: dashboardQueryKeys for proper cache management
- Configured staleTime: 30 seconds (dashboard data changes frequently)
- Configured gcTime: 2 minutes (keeps data in cache)
- Added retry: 1 with retryDelay: 1000ms for automatic retry
- Preserved backward compatibility: same return interface
- Dashboard data now automatically cached and deduplicated
- Multiple components using useDashboard share cached data
- Automatic background refetching when data becomes stale
- Better performance and reduced API calls
- Action 2.1.1.7 complete - Sub-Epic 2.1.1 complete
- Removed getDashboardStats() function (old separate API call)
- Removed getRecentActivity() function (old separate API calls)
- Removed helper functions: mapActionToType, formatActivityTitle, formatActivityDescription
- Removed fallback to old methods in getDashboardData()
- Removed unused import of socialService
- All dashboard data now comes exclusively from aggregated /api/v1/dashboard endpoint
- No separate API calls remain in dashboard service
- Cleaner code, single source of truth for dashboard data
- Actions 2.1.1.5 and 2.1.1.6 complete - old API calls removed
- Updated getDashboardData() to call /api/v1/dashboard endpoint
- Added support for query parameters: activity_limit, library_limit, stats_period
- Added TrackPreview and LibraryPreview interfaces matching backend contract
- Updated DashboardData interface to include optional library_preview field
- Updated useDashboard hook to accept options and return libraryPreview
- Added fallback to old multiple-call method if new endpoint fails
- Dashboard now loads with single request instead of multiple parallel calls
- All existing functionality preserved, backward compatible during migration
- Action 2.1.1.3 complete - frontend ready to use aggregated endpoint
- Created DashboardHandler that aggregates multiple data sources
- Fetches stats, activity, and library preview in parallel
- Aggregates stats from audit logs (tracks_played, messages_sent, favorites, active_friends)
- Converts audit logs to RecentActivity format with type mapping
- Converts tracks to TrackPreview format for library preview
- Supports query parameters: activity_limit, library_limit, stats_period
- Returns wrapped format {success: true, data: DashboardResponse}
- Registered route: GET /api/v1/dashboard (protected, requires auth)
- Uses interface-based approach to avoid import cycle
- Router creates wrapper function to adapt track service
- Build successful, all handlers compile correctly
- Action 2.1.1.2 complete - dashboard endpoint ready for frontend integration
- Created comprehensive test suite for response format
- Test Success() returns wrapped format {success: true, data: {...}}
- Test Created() returns wrapped format
- Test Error() returns wrapped format for all status codes
- Test RespondWithAppError() returns wrapped format
- Test ValidationError() returns wrapped format with details
- Test all helper functions use wrapped format consistently
- All 7 test functions pass successfully (13+ test cases)
- Tests verify all response helpers return wrapped format
- Action 1.3.2.5 complete - backend response format verified
- Added comprehensive tests for wrapped format handling
- Test wrapped format with success: true and data unwrapping
- Test wrapped format with success: false and error handling
- Test wrapped format with null data
- Test safety check for non-wrapped responses (warning log)
- Test non-object response data handling
- Test verification that no direct format handling remains
- All 30 tests pass successfully
- Tests verify wrapped format only, no direct format handling
- Action 1.3.2.3 complete - response format consistency verified
- Removed direct format handling code (110+ lines)
- Removed validation and recovery logic for direct format responses
- Added safety check to log warning if non-wrapped response received
- Client now only handles wrapped format {success, data} or {success: false, error}
- Graceful degradation: non-wrapped responses still returned with warning
- TypeScript compilation successful, no linter errors
- Action 1.3.2.2 complete - frontend simplified to wrapped format only
- Updated system_metrics.go to use RespondSuccess() helper
- Updated bitrate_handler.go success responses to use wrapped format
- Updated frontend_log_handler.go to use RespondSuccess() helper
- Updated csrf.go to use RespondSuccess() and RespondWithError() helpers
- Updated audit.go: all 30+ error and success responses now use wrapped format helpers
- Updated comment_handler.go error responses to use RespondWithError()
- Updated system_metrics_test.go to expect wrapped format {success, data}
- All handlers now consistently use wrapped format helpers
- Build and tests pass successfully
- Action 1.3.2.1 complete - backend handlers standardized to wrapped format
- Added cache fallback: uses cached response for GET requests when validation fails
- Added optional retry mechanism (disabled by default, enabled via config)
- Added user notifications for recovery actions (configurable)
- Recovery config: { useCache, retry, notifyUser } on request config
- Prevents infinite retry loops with _validationRetryAttempted flag
- Validates cached responses before using them
- Handles both wrapped and direct format responses
- Graceful degradation: falls back to unvalidated data if recovery fails
- Applied to both validation sections (wrapped and direct formats)
- Action 1.2.2.5 complete - validation errors now handled gracefully
- Created ValidationAlerting class to monitor validation metrics
- Alerts when failure rate exceeds threshold (default 5%)
- Periodic checks every 5 minutes (configurable)
- Cooldown period (15 min) to prevent alert spam
- Minimum validations required (10) before alerting
- Structured alert logging with full metrics context
- Automatically starts in production (can be disabled via env var)
- Alerts sent to backend logging and Sentry
- Action 1.2.2.4 complete - validation alerting now active for monitoring
- Created ValidationMetricsTracker class to track validation metrics
- Tracks total, successful, and failed validations
- Calculates failure rate percentage
- Tracks failures by normalized endpoint patterns
- Records last failure and success timestamps
- Integrated into both validation points (wrapped and direct formats)
- Exported singleton for metrics access and monitoring
- Action 1.2.2.3 complete - validation metrics now tracked for monitoring
- Enhanced validation error logging with production monitoring context
- Added error_type field for easy filtering in monitoring systems
- Added timestamp and schema_provided flag for correlation
- Logs automatically sent to backend endpoint and Sentry in production
- Structured JSON format for easy aggregation and alerting
- Action 1.2.2.2 complete - validation failures now fully logged for production monitoring
- Enhanced response validation logging (wrapped and direct formats)
- Changed validation failures from warn to error level for better visibility
- Added structured error details (path, message, code, received, expected)
- Added response data preview for debugging
- Added success logging in debug mode
- Maintains graceful degradation (continues with unvalidated data) to avoid breaking app
- Action 1.2.2.1 complete - validation now comprehensive for all responses with schemas
- Action 1.1.3.10: Clarified that Track/User/ApiError are NOT obsolete
* ApiError already imported from schemas (not in api.ts)
* Track and User are necessary extended types with UI-specific fields
* Cannot be deleted without breaking functionality
- Action 1.1.3.11: Audited all type files for obsolete content
* No empty or redundant files found
* All type files serve a purpose (dto.ts, v2-v3-types.ts, backend-types.ts, api.ts)
* Future migration can replace DTOs with generated types (separate task)
- Both actions complete - no cleanup needed at this time
- Pre-commit hook already exists and is configured correctly
- Hook runs type generation script before each commit
- Renumbered duplicate Action 1.1.3.13 to 1.1.3.15 for clarity
- Action 1.1.3.15 complete - no changes needed
- Analyzed all extended types (User, Track) for duplicate properties
- No true duplicates found - all re-declarations serve a purpose:
* Type narrowing (making optional fields required)
* Type overrides (backward compatibility, type safety)
* UI-specific extensions (aliases, computed fields)
- Action 1.1.3.14 complete - no properties to remove
- Replace RefreshResponse with VezaBackendApiInternalDtoTokenResponse
- Replace ResendVerificationRequest with VezaBackendApiInternalDtoResendVerificationRequest
- Keep AuthResponse as is (uses extended User/AuthTokens)
- Keep form data types (frontend-specific)
- Tracks types already updated, roles/chat/settings kept as is
- Update User type in types/api.ts to extend VezaBackendApiInternalModelsUser
- Preserve UI-specific computed fields (avatar_url, stats, roles, status, etc.)
- Make required fields actually required (id, username, email, role, etc.)
- All existing imports continue to work via barrel exports
- No User-specific TypeScript errors introduced
- Update Track type in types/api.ts to extend VezaBackendApiInternalModelsTrack
- Update Track type in features/tracks/types/track.ts to extend generated type
- Preserve UI-specific computed fields (coverUrl, plays, likes, etc.)
- Support backward compatibility for duration (number|string)
- All existing imports continue to work without changes
- No Track-specific TypeScript errors introduced
- Replace manual ApiError interface with Zod-inferred type from apiSchemas
- Update all imports (15+ files) to use ApiError from @/schemas/apiSchemas
- Remove ApiError interface from types/api.ts
- Update ApiResponse to import ApiError from schemas
- All TypeScript checks pass for ApiError-related code
- Install husky as dev dependency
- Create pre-commit hook to run type generation script
- Ensures types are always up-to-date with backend API before commit
- Hook runs from apps/web directory to execute generate-types.sh
- Backend: Add X-API-Deprecated header alongside existing X-API-Version-Deprecated
- Frontend: Show deprecation warning toast when deprecated API version detected
- Warning shown only once per session to avoid spam
- Includes sunset date in warning message if available
- Migrated all hooks: useAuth, useChat, useLogin
- Migrated all components: Header, ProfileForm, FollowButton, LikeButton, PlaylistFollowButton, ChatMessage, ChatMessages, CommentThread, CommentSection, PlaylistList, ChatSidebar, SettingsPage, DashboardPage
- Updated storeSelectors.ts useAuthUser() to use React Query
- All production code now uses useUser() hook instead of Zustand store
- Action 4.1.1.3 and 4.1.1.4 complete
Actions 4.1.2.5, 4.1.2.6, and 4.1.2.7 were already completed in Action 4.1.2.4:
- undoRedo middleware removed (no domain data to track)
- stateNormalization utilities removed (React Query handles normalization)
- stateMiddleware wrapper removed (no domain data to track)
All middlewares were removed when domain data was removed from library store.
Actions 4.1.2.5, 4.1.2.6, 4.1.2.7 complete
- Remove items, favorites, pagination, isLoading, error from LibraryState
- Remove fetchItems, fetchFavorites, uploadFile, toggleFavorite, deleteItem, clearItems, setLoading, setError from LibraryActions
- Remove undoRedo and stateMiddleware wrappers (no domain data to track)
- Update useLibraryActions() to use React Query for all domain data actions
- Store now only contains filters (UI state)
- Update useLibraryItemsNormalized() and useLibraryFavoritesNormalized() to return empty state (deprecated)
- Update useLibraryPagination() to return both camelCase and snake_case for compatibility
Action 4.1.2.4 complete
All components using library store domain data have been migrated:
- DashboardPage components use selectors from storeSelectors.ts
- Selectors have been migrated to React Query hooks (Action 4.1.2.3.3)
- No direct access to store domain data found
- Components automatically migrated via selector abstraction layer
Action 4.1.2.8 complete
- Replace useLibraryItems() with React Query hook
- Replace useLibraryFavorites() with React Query hook
- Replace useLibraryPagination() to extract from React Query response
- Replace useLibraryStatus() to use React Query status
- Update useLibraryActions() to use queryClient.refetchQueries()
- Maintain same interface for backward compatibility
- Migrates DashboardPage components automatically
Action 4.1.2.3.3 complete
