Problem:
- MSAL library was causing crypto errors in browser
- Black screen on load due to MSAL initialization failure
- Error: crypto module not available in browser environment
Solution:
- Made MSAL initialization conditional based on Azure AD configuration
- Only initialize MSAL if REACT_APP_AZURE_CLIENT_ID is properly configured
- Allow simple login to work without MSAL for testing purposes
- Gracefully handle both MSAL and simple login modes
Changes:
- frontend/src/context/AuthContext.tsx:
* Check if Azure AD is configured before initializing MSAL
* Set msalInstance to null when Azure is not configured
* Updated all MSAL calls to check for null before use
* Simple login works independently of MSAL
- frontend/package.json:
* Added crypto polyfills as devDependencies (for future use)
* Packages: crypto-browserify, buffer, stream-browserify, etc.
- frontend/src/styles/theme.css:
* Added login form styles (login-container, login-card, form-group, etc.)
Benefits:
- No more crypto errors in browser
- Simple login works without Azure AD configuration
- Easy testing with test accounts (admin/user)
- Production Azure AD login still supported when configured
- Graceful fallback for environments without Azure setup
Testing:
- Frontend compiles successfully without crypto errors
- All services running: backend, frontend, postgres, redis
- Simple login working with test accounts
- No black screen on load
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Features:
- New UserDetailsView component with expandable conversations
- Each conversation shows all messages with token usage and cost
- User information section (email, role, status, last login)
- Token usage statistics grid (8 stat cards)
- Message content truncation for long messages (500 chars)
- Role-based styling (user: blue, assistant: gold)
Backend:
- New GET /admin/users/{user_id}/details endpoint
- Complex SQL queries with joins for user stats and conversations
- Pydantic schemas: UserDetails, ConversationDetail, MessageDetail
- Per-message and per-conversation token tracking
Frontend:
- React Router integration for /admin/users/:userId route
- Navigation from Usage page "View" button to user details
- Back button to return to admin panel
- Proper error handling and loading states
- Responsive CSS styling with hover effects
Changes:
- backend/app/api/v1/endpoints/admin.py: Added getUserDetails endpoint
- frontend/src/components/UserDetailsView.tsx: New component
- frontend/src/App.tsx: Added route for user details page
- frontend/src/components/TokenUsageDashboard.tsx: Added navigation handler
- frontend/src/services/api.ts: Added adminAPI.getUserDetails method
- frontend/src/styles/admin.css: Added comprehensive styling for user details
- frontend/package.json: Added react-router-dom dependency
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
