Stories no longer wrap with QueryClientProvider, ToastProvider,
ThemeProvider, or MemoryRouter; global StorybookDecorator provides them.
- Route-specific pages use parameters.router.initialEntries
(ResetPasswordPage, VerifyEmailPage) or minimal MemoryRouter+Route
where useParams is needed (TrackDetailPage, PlaylistDetailPage).
- Stories that seeded query cache use useQueryClient() from global
decorator (FollowButton, CollaboratorManagement, CommentSection).
- Navbar, AuthLayout, DashboardLayout, Header, and 25+ story files
simplified to layout divs only.
Co-authored-by: Cursor <cursoragent@cursor.com>
WithError and WithCustomFallback set parameters.storybookAudit.expectConsoleErrors
so audit/CI can treat their console errors as intentional (failure demo).
Co-authored-by: Cursor <cursoragent@cursor.com>
Prevent external asset requests during Storybook so no network
dependency and deterministic rendering. Return 1x1 SVG placeholder.
Co-authored-by: Cursor <cursoragent@cursor.com>
- auth/me: return data.user so authService.getCurrentUser() gets response.data.user
- Add GET /api/v1/dashboard for dashboardService (stats, recent_activity, library_preview)
- Add GET /api/v1/sessions/stats for sessionsApi
- Add GET /api/v1/roles and /roles/:id for admin views
- Remove console.log from audit/stats handler
Co-authored-by: Cursor <cursoragent@cursor.com>
Set VITE_STORYBOOK=true for storybook dev/build so the logger never
sends POST to /logs/frontend in the isolated UI environment. Prevents
94+ failed network requests in audit and keeps Storybook hermetic.
Co-authored-by: Cursor <cursoragent@cursor.com>
Added isAuthReady state to prevent router from rendering before auth
state is initialized. This eliminates login redirect loops and ensures
deterministic auth behavior.
Changes:
- Added isAuthReady state (default: false)
- New useEffect to initialize auth before rendering
- Waits for refreshUser() to complete if tokens exist
- Shows loading screen while auth is initializing
- Always sets isAuthReady=true in finally block
Loading screen:
- Simple centered spinner with "Chargement..." text
- Uses Tailwind classes for styling
- Matches app theme (bg-background, text-muted-foreground)
Behavior:
- App loads → Check for tokens → If yes, await refreshUser()
- Only after auth check completes, render router
- Prevents "flash of login page" for authenticated users
- Eliminates race condition: router no longer renders before auth ready
Impact: Fixes intermittent login loops, improves UX on page refresh.
Fixes: P1.2 from audit AUDIT_TEMP_29_01_2026.md
Added response interceptor to handle 403 errors caused by expired or
invalid CSRF tokens. When a mutation fails with 403, the interceptor:
1. Detects if error is CSRF-related (checks error message for csrf/token/forbidden)
2. Refreshes the CSRF token via csrfService.ensureToken()
3. Updates request headers with new token
4. Retries the request once
Features:
- Only retries once per request (via _csrfRetry flag)
- Skips retry for /csrf-token and /auth/* endpoints
- Logs all CSRF refresh attempts for debugging
- Falls through to original error if refresh fails
- Handles both error.error and error.message formats
TypeScript fixes:
- Cast originalRequest to any for _csrfRetry property
- Safely access error data with type checking
Impact: Eliminates 403 errors on POST/PUT/DELETE when CSRF token expires.
Users no longer need to manually refresh page to get new CSRF token.
Fixes: P1.3 from audit AUDIT_TEMP_29_01_2026.md
Added refresh attempt counter with MAX_REFRESH_ATTEMPTS=3 to prevent
infinite refresh loops when token refresh repeatedly fails.
Changes:
- Added refreshAttempts counter and MAX_REFRESH_ATTEMPTS constant
- Check counter before attempting refresh, logout if max reached
- Increment counter on each refresh attempt
- Reset counter to 0 on successful refresh
- Log attempt number in all refresh-related logs
- Show user-friendly error message after max attempts
Behavior:
- After 3 failed refresh attempts, user is logged out automatically
- Prevents infinite 401 → refresh → 401 loops
- Uses logoutLocal() to avoid triggering another API call
- Displays clear error message: "Session expired after multiple attempts"
Impact: Eliminates infinite refresh loops, improves UX on persistent auth failures.
Fixes: P1.4 from audit AUDIT_TEMP_29_01_2026.md
- Update Sidebar to use Design System Button component and consistent styling
- Refactor LibraryPage to use Card variants (glass/gaming) for track grid
- Ensure consistent button usage across key UI components
- Fix type errors in DashboardPage
- Refactor DashboardPage to use StatCard, new Button variants, and glassmorphism cards
- Update DashboardLayout to include AstralBackground for premium visual effect
- Style GlobalPlayer with glass-hud utility classes
- Fix type errors in LoginPage by using local Card shim
- Refactor Navbar, ChatInput, RegisterPage, and CreatePlaylistDialog to use @veza/design-system components
- Shim local UI components (Button, Input, Card) to align with Design System API and styles
- Fix hundreds of type errors by exporting missing components (SearchInput, FileUpload) and adding missing props (icon, variant)
- Button component uses 'default' variant for primary actions, not 'primary'
- Fixes issue where Generate Key button wasn't working
- Ensures button is properly styled and clickable
- Disable backdrop click to close when in step 2 (showing generated key)
- Ensures user can copy the key before modal closes
- Only allow closing via Done button after key is generated
- Update CreateAPIKeyModal to properly handle async operations
- Add loading states and form validation
- Wait for API response before showing generated key
- Add proper error handling and user feedback
- Disable buttons during generation
- Return full key from service for display in modal
- Fix Input component usage (add proper label wrapper)
- Ensure form validation works (name required, at least one scope)
- Add frame-src directive to CSP_POLICY and CSP_POLICY_DEV in csp.ts
- Add frame-src to Vite dev server CSP headers
- Allows loading Swagger UI iframe from backend (localhost:8080)
- Fixes Content-Security-Policy violation blocking Swagger documentation
- Ajouter option useIframe pour charger /swagger/index.html dans un iframe
- Cela évite les problèmes avec /swagger/doc.json qui retourne 500
- Swagger UI HTML fonctionne correctement et affiche toute la documentation
- Garder le composant React comme fallback si nécessaire
- Ajouter fallback pour Swagger UI si doc.json ne fonctionne pas
- Améliorer message d'erreur avec bouton pour ouvrir Swagger UI directement
- Les fonctionnalités API Keys et Usage Stats sont maintenant complètes et fonctionnelles
- Tous les onglets de DeveloperPage sont maintenant implémentés
- Corriger URL Swagger pour utiliser /docs/swagger.json
- Implémenter onglet API Keys avec liste, création et révocation
- Implémenter onglet Usage Stats avec métriques et graphiques
- Intégrer developerService pour charger les données
- Ajouter CreateAPIKeyModal fonctionnel
- Corriger CreateAPIKeyModal pour utiliser le nouveau système de toast
- Ajouter gestion d'erreurs et états de chargement
- Les fonctionnalités API Keys et Usage Stats sont maintenant complètes
- Ajouter état d'erreur avec UI de fallback
- Ajouter boutons Retry et Open in New Tab en cas d'erreur
- Corriger types TypeScript pour supportedSubmitMethods
- Nettoyer les variables inutilisées
- Installer swagger-ui-react et swagger-ui-dist
- Créer composant SwaggerUI avec styles personnalisés pour le thème Kodo
- Ajouter système d'onglets dans DeveloperPage (Documentation, API Keys, Usage Stats)
- Configurer Swagger UI pour charger /swagger/doc.json depuis le backend
- Ajouter support de l'authentification Bearer token dans les requêtes Swagger
- Personnaliser les styles pour correspondre au design system Kodo
- La documentation complète de l'API est maintenant accessible directement dans l'interface
- Corriger utilisation de useToast (retourne directement l'objet toast)
- Normaliser l'affichage de post.author (gérer string et object)
- Normaliser les nouveaux posts créés pour correspondre au format existant
- Corrige 'toast.success is not a function' et 'Objects are not valid as a React child'
- Remplacer l'ancien ToastContext par le hook useToast de @/hooks/useToast
- Mettre à jour les appels addToast() en toast.info()
- Corrige l'erreur 'useToast must be used within a ToastProvider'
- Remplacer toast placeholder par ouverture du modal CreatePostModal
- Intégrer socialService.createPost pour créer des posts
- Ajouter gestion d'erreurs avec logger
- Le bouton Create Post ouvre maintenant le modal fonctionnel
- Ajouter margin-left au contenu principal pour compenser la sidebar fixe
- Margin dynamique basé sur l'état ouvert/fermé de la sidebar
- Augmenter z-index du dropdown de recherche à z-[110] pour être au-dessus du header (z-100)
- Ajouter z-index au wrapper de recherche dans Header
- Le contenu principal ne se superpose plus avec la sidebar
- Le dropdown de recherche s'affiche correctement au-dessus de tous les éléments
- Ajouter z-index plus élevé pour le champ de recherche et ses icônes
- Assurer que les icônes ne bloquent pas les interactions
- Corriger problème d'affichage où le texte était masqué
- Ajouter z-index relatif pour éviter que les overlays masquent le contenu
- Assurer que les Cards et le contenu de recherche sont au-dessus des overlays
- Corriger problème d'affichage où le champ de recherche et les messages étaient masqués
- Gérer la structure imbriquée response.data.data.pagination et response.data.data.tracks
- Ajouter fallback pour structure plate si nécessaire
- Corriger extraction pour tracks et users search
- Les résultats de recherche s'affichent maintenant correctement
- Désactiver la query de playlists si la feature n'est pas activée
- Ne pas considérer comme erreur si PLAYLIST_SEARCH est désactivé
- Retourner des résultats vides pour playlists si feature désactivée
- Corriger l'affichage d'erreur qui apparaissait même avec des résultats vides valides
- Logs détaillés dans GlobalSearchBar pour fetchSuggestions
- Logs pour chaque étape de la recherche (tracks, playlists, users)
- Logs de performance avec durée des requêtes
- Logs dans Search component pour interactions utilisateur
- Logs pour navigation et sélection de résultats
- Utilisation de console.log avec préfixes [🔍] pour faciliter le filtrage dans DevTools
- Supprimer appel automatique de onSearch à chaque changement de query
- onSearch est maintenant appelé seulement lors de la soumission (Enter ou clic)
- Gérer feature flag PLAYLIST_SEARCH désactivé pour éviter erreurs
- Améliorer gestion des erreurs dans fetchSuggestions
- Corriger style du composant Search dans le Header
- Supprimer icône Search dupliquée dans Header
- Corriger positionnement sidebar (top-20 au lieu de top-24 pour correspondre au header)
- Ajuster padding-top du main (pt-20 au lieu de pt-24)
- Ajouter handlers onClick à tous les boutons sans fonctionnalité
- LivePage: Go Live, Browse Live Sessions
- GearPage: Add Gear, Add Your First Gear
- EducationPage: Browse Courses, View Courses
- QueuePage: Shuffle, Repeat, Browse Library
- SocialPage: Like, Comment, Share, Discover Artists
- DeveloperPage: Generate API Key, View Documentation
- Créer document BUTTONS_STATUS.md pour tracking
- Ajouter padding-top au contenu principal pour compenser le header fixe
- Ajouter bouton toggle pour plier/déplier le sidebar (desktop et mobile)
- Corriger z-index pour éviter chevauchement header/sidebar
- Corriger routes du menu sidebar pour correspondre aux routes définies
- Améliorer gestion erreurs 500 marketplace (empty state au lieu d'erreur)
- Préserver httpStatus dans erreurs API pour détection correcte
- Fixed broken import path in apps/web/src/types/backend-types.ts
- Removed incorrect import of PostType from non-existent relative path
- PostType is not exported from socialService and not used in backend-types.ts
- Verified no other broken imports found
- All imports valid after cleanup tasks and file moves/deletions
- Enhanced optimistic update utilities with concurrent update handling documentation
- cancelQueries in onMutate prevents refetches from overwriting optimistic updates
- setQueryData is atomic, so optimistic updates are safe even with concurrent mutations
- Added comments explaining how React Query handles concurrent mutations
- React Query automatically queues mutations, cancelQueries provides additional safety
- For critical resources, developers can use mutateAsync and await for sequential execution
- Prevents race conditions in concurrent state updates
- Set default staleTime: 1 minute (data considered fresh for 1 minute)
- Set default gcTime: 5 minutes (data kept in cache for 5 minutes)
- Enabled refetchOnMount: true (refetch stale data when component mounts)
- Enabled refetchOnReconnect: true (refetch stale data when network reconnects)
- Kept refetchOnWindowFocus: false (intentional - avoid unnecessary refetches)
- Individual hooks can override these defaults with their own staleTime values
- Ensures stale data is automatically refreshed appropriately
- Implemented analyticsService.recordEvent() method
- Uses backend /analytics/events endpoint for event tracking
- Fails silently to avoid disrupting user experience
- Logs events in development mode for debugging
- Error tracking already handled by Sentry (Monitor 5)
- Components can track feature usage via analyticsService.recordEvent()
- Complete user analytics system for tracking feature usage and interactions
- Created MonitoringDashboard component to visualize system metrics
- Added monitoring tab to AdminDashboardPage (/admin route)
- Displays validation metrics (total, successful, failed, failure rate)
- Shows top 5 endpoints with most validation failures
- Displays Sentry error tracking status and configuration
- Shows performance monitoring information
- Auto-refreshes metrics every 30 seconds
- Manual refresh button available
- Links to Sentry dashboard when configured
- Complete monitoring solution for system health visibility
- Edge 5.1: Verified BroadcastChannel fallback already implemented (returns null, logs warning)
- Edge 5.2: Created safe storage utility for localStorage/sessionStorage
- safeLocalStorage and safeSessionStorage automatically fall back to in-memory storage
- Handles private browsing mode and quota exceeded errors gracefully
- Tests availability before use
- Logs warnings when fallback is used
- Provides utility functions to check support
- Improves reliability in all browser environments
- Replaced KodoEmptyState in DashboardPage with EmptyState
- Replaced all custom empty states in SearchPage with EmptyState:
- No results found state
- No tracks found state
- No playlists found state
- No users found state
- Start searching state
- All empty states now use the standard EmptyState component
- Consistent UI and behavior across all empty states
- Created useTabVisibility hook to track tab visibility state
- Provides whenVisible(), whenHidden(), onVisible() utilities
- Executes callbacks when visibility changes
- Created useLongRunningOperation hook for managing long-running operations
- Operations can continue when tab is hidden (configurable)
- Provides start(), stop(), isRunning() control functions
- Supports abort controller for cancellation
- Cleanup on unmount
- All hooks are properly typed and documented with examples
- Created useDebouncedCallback hook for debouncing callbacks
- Created useThrottledCallback hook for throttling callbacks
- Created usePreventDoubleClick hook for preventing double-clicks
- All hooks are properly typed and documented with examples
- Components can use these hooks to prevent rapid interactions
- Existing ButtonLoading component already disables buttons during loading
- Added slow request detection with 1 second threshold
- Tracks request timing in request interceptor
- Detects and marks slow requests (> SLOW_REQUEST_THRESHOLD)
- Logs slow requests in dev mode with duration
- Provides utility functions:
- isSlowRequest() - check if request is slow
- getRequestDuration() - get request duration in ms
- Components can use these utilities to show additional loading feedback
- React Query already provides isLoading/isFetching for loading states
- Replaced custom empty state div with EmptyState component
- Added EmptyState import from @/components/ui/empty-state
- Improved empty state UI with icon, title, description, and action button
- Different messages for empty list vs empty search results
- Added upload action button when no tracks (not in search mode)
- Fixed pre-existing errors: added useInfiniteQuery import, fixed tracksData reference
- Edge 1.4: Marked as complete (EmptyState component already exists)
- Edge 1.1 & 1.3: In progress - improved empty state handling
- Removed useLibraryItemsNormalized() - deprecated, no imports found
- Removed useLibraryFavoritesNormalized() - deprecated, no imports found
- Functions were marked @deprecated and only returned empty states
- Migration to React Query completed, these functions no longer needed
- Cleanup 17: In progress - removed deprecated dead code
- Removed obsolete TODO in useChat.ts: fetchHistory function already implemented
- Updated EXHAUSTIVE_TODO_LIST.md: Cleanup 14 marked as COMPLETE
- Summary: Fixed 1 TODO, improved 1 TODO, removed 1 obsolete TODO
- Preserved backend-dependent and architectural TODOs per audit recommendations
- Fixed ChatRoom.tsx: Implemented current user ID check for isMe
- Added useUser hook to get current user
- Replaced hardcoded isMe=false with proper user ID comparison
- Improved TwoFactorVerify.tsx: Enhanced TODO comment with specific action items
- Clarified that verify() is for setup, not login
- Added FIXME with clear explanation of the issue
- Documented that parent should handle verification
- Cleanup 14: In progress - addressing simple, safe TODOs
- Removed stores/auth.test.ts - references deleted stores/auth.ts
- File imports from './auth' which doesn't exist (verified in Cleanup 4)
- Auth store is now at features/auth/store/authStore.ts
- Cleanup 3: In progress - removed obsolete auth test file
- Added logger import that was missing from Cleanup 12
- Fixes 'logger is not defined' error
- Cleanup 16: Verifying no unused variables in production code
- Created grid overlay utility (apps/web/src/utils/gridOverlay.ts) for dev mode
- Toggle with Ctrl+G (Cmd+G on Mac) keyboard shortcut
- Shows 8px grid overlay to visualize spacing alignment
- Only works in development mode (import.meta.env.DEV)
- Initialized in main.tsx after app setup
- Action 11.2.1.4: Add visual grid overlay tool (dev only) - COMPLETE
- OfflineQueueManager: normal priority badge and info banner (2 instances) - informational status indicators
- Total: ~1 file, ~2 instances replaced
- Preserved: Active/selected states (select.tsx selected option), design system variants (badge.tsx cyan variant, StatCard.tsx cyan variant - intentional design system options), informational alerts/toasts (alert.tsx info, Toast.tsx info, ErrorDisplay.tsx info - important status indicators), BulkModeBanner active state (functional active mode indicator)
- Action 11.3.1.3 in progress (fourth batch: informational status indicators)
- Increased CardHeader padding from p-6 (24px) to p-8 (32px)
- Increased CardContent padding from p-6 (24px) to p-8 (32px)
- Increased CardFooter padding from p-6 (24px) to p-8 (32px)
- All values align to 8px grid system (32px = 4× base)
- Provides more breathing room and improves visual hierarchy
- Aligns with Surgical Minimalism principle of increased whitespace
- Action 11.4.3.1 complete
- Created contrast utility (apps/web/src/utils/contrast.ts)
- getRelativeLuminance() - calculates WCAG relative luminance
- getContrastRatio() - calculates contrast ratio between colors
- meetsWCAGAA() / meetsWCAGAAA() - validates WCAG standards
- parseRGB() - parses RGB strings from CSS variables
- Created contrast test suite (apps/web/src/__tests__/contrast.test.ts)
- Tests all design system color combinations
- Validates primary text (white) on all backgrounds
- Validates secondary text (dim) on all backgrounds
- Validates text with opacity variants
- All combinations must meet WCAG AA (4.5:1)
- Added contrast test step to CI workflow
- Prevents contrast ratio regressions
- Action 11.1.1.5 complete
- Updated button variants (outline, ghost) to use text-white
- Updated empty state descriptions to use text-white with opacity
- Updated page subtitles to use text-white opacity-80
- Updated Navbar interactive elements to use text-white
- Preserved text-kodo-secondary for truly secondary info (metadata, timestamps, helper text)
- Action 11.1.1.2 complete
- Created GRID_SYSTEM.md documentation
- Documents 8px base grid system for visual rhythm
- Spacing scale table with 8px-aligned values
- Usage guidelines and examples
- Migration notes for current spacing system
- Action 11.2.1.1 complete
- Changed --kodo-text-main from #F3F3E0 (Quiet Paper) to #FFFFFF (white)
- Improves contrast and readability on dark backgrounds
- Better WCAG AA compliance
- Action 11.1.1.1 complete
- Created firstTime utility for detecting first-time users
- Functions: isFirstTime, markAsNotFirstTime, isOnboardingCompleted, markOnboardingCompleted
- Uses localStorage to persist state across sessions
- Graceful error handling with logger warnings
- SSR-safe (returns false on server)
- Can be integrated with Onboarding component
- Action 10.4.1.4 complete
- Moved view mode toggle from two prominent buttons to dropdown menu
- Single button shows current view mode icon (Grid or List)
- Dropdown contains both view options with icons and labels
- Active option highlighted in dropdown
- Reduces visual prominence while preserving functionality
- List view kept as per audit recommendation
- Action 10.2.1.2 complete
