Empty state and error handling #16
Description
Description
Implement empty states and error handling throughout the model management UI to provide clear guidance and graceful degradation.
Requirements
Empty States
1. No Providers Configured
Scenario: User opens modal but has no API keys configured in backend .env
Location: ModelManagementModal main content area
Display:
┌─────────────────────────────────────────────┐
│ No Providers Configured │
│ │
│ To use models, add API keys to your │
│ backend .env file: │
│ │
│ OPENAI_API_KEY=your_key_here │
│ ANTHROPIC_API_KEY=your_key_here │
│ GOOGLE_API_KEY=your_key_here │
│ OPENROUTER_API_KEY=your_key_here │
│ │
│ Restart the backend after adding keys. │
│ │
│ [View Documentation] │
└─────────────────────────────────────────────┘
Actions:
- Link to documentation (forge-devtools setup guide)
- Use PrimeVue Message component (info type)
2. No Models for Provider
Scenario: Provider is configured but has no models yet
Location: Model list pane (right side of modal)
Display:
No models added yet.
[Fetch Models] (if provider has API)
or
[+ Add Model] (if manual-only provider)
3. No Favorites
Scenario: User selects "Favorites" pseudo-provider but has no favorited models
Location: Model list pane
Display:
No favorite models yet.
Star models from any provider to add them here.
4. Empty Chat Dropdown
Scenario: No favorites and no recent models
Location: ModelSelector dropdown in chat
Display:
┌─────────────────────────────────────┐
│ ▼ Select Model │
├─────────────────────────────────────┤
│ No models configured. │
│ │
│ Click 'Manage Models' to add. │
│ │
│ ─────────────────────────────────── │
│ [⚙ Manage Models...] │
└─────────────────────────────────────┘
Error Handling
1. Fetch Failed
Scenario: POST /models/fetch fails (network error, API error, invalid key)
Location: Toast notification
Display:
- Error toast with message from backend
- "Failed to fetch models from OpenAI: Invalid API key"
- Action: "Retry" button in toast
2. Add Model Failed
Scenario: POST /models fails (duplicate, invalid input)
Location: Inline in Add Model Dialog
Display:
- Red error message above form
- Show specific error from backend
- Don't close dialog, allow user to fix
3. Invalid Model at Chat Time
Scenario: User tries to chat with a model that no longer exists or is invalid
Location: Inline in chat interface
Display:
- Error message above chat input: "Model 'gpt-4-turbo-preview' is not available. Please select another model."
- Auto-open model selector dropdown
- Highlight message with yellow/orange background
- Don't block the UI, user can dismiss and select another model
4. Network Errors
Scenario: Any API call fails due to network issues
Location: Toast notification
Display:
- Generic error toast: "Network error. Please try again."
- Retry button if applicable
Loading States
Scenarios:
- Fetching providers on modal open
- Fetching models on provider select
- Fetching models from API (refresh button)
- Adding model
- Removing model
- Toggling favorite
Display:
- Skeleton loaders for lists (PrimeVue Skeleton)
- Spinner icons for button actions
- Disable interactive elements during loading
- Show loading overlay for modal if initial data fetch
Design System
- PrimeVue Message component for empty states
- PrimeVue Toast for error notifications
- PrimeVue Skeleton for loading states
- PrimeVue ProgressSpinner for spinners
- Error color:
--p-red-500 - Info color:
--p-blue-500 - Warning color:
--p-yellow-500
User Experience Goals
- Never leave user confused about what to do next
- Provide actionable instructions in empty states
- Show clear error messages with guidance
- Don't block the UI unnecessarily
- Graceful degradation (chat still works with other models)
Related Issues
Part of #10 - Model Selector Revamp - Frontend
Acceptance Criteria
- No providers configured state displays correctly
- No models for provider state displays correctly
- No favorites state displays correctly
- Empty chat dropdown state displays correctly
- Fetch failed error shows toast
- Add model failed error shows inline
- Invalid model at chat time shows inline error
- Network errors show appropriate messages
- All loading states display correctly
- User can recover from all error states