Add visual indicators for user-added models

IMPLEMENTATION_SUMMARY.md

@@ -0,0 +1,140 @@
+# Implementation Summary: User-Added Models UX Improvement
+
+## Issue Description
+The issue requested two main improvements:
+1. Indicate which models are not "default" (i.e., added by the user)
+2. Figure out how to track capabilities of user-added models
+
+## Solution Overview
+
+### 1. Visual Indicators for User-Added Models
+The existing `isPredefined` field in the Model type already distinguishes between:
+- **Predefined models**: Models defined in `WebUI/external/models.json` (`isPredefined: true`)
+- **User-added models**: Models downloaded/added by users but not in models.json (`isPredefined: false`)
+
+The solution adds visual indicators in the UI to make this distinction clear:
+
+#### a) "Custom" Badge in Model Selector
+- A small badge with "Custom" label appears next to user-added models
+- Appears in both:
+  - The dropdown list of available models
+  - The selected model display in the model selector button
+- Badge styling:
+  - Small text (10px)
+  - Primary color with 20% opacity background
+  - Rounded corners
+  - Tooltip: "User-added model"
+
+#### b) Warning in Model Capabilities Tooltip
+- When hovering over the info icon for a user-added model
+- Shows: "⚠️ User-added model - capabilities may not be fully specified"
+- Color: Amber (warning color)
+- Only appears for user-added models (isPredefined === false)
+
+### 2. Capabilities Tracking for User-Added Models
+
+The capabilities tracking system already exists and works for user-added models:
+
+#### Existing Capabilities System
+The Model type includes these capability fields:
+- `supportsToolCalling?: boolean` - Model supports function calling
+- `supportsVision?: boolean` - Model supports image inputs
+- `supportsReasoning?: boolean` - Model supports chain-of-thought reasoning
+- `maxContextSize?: number` - Maximum context window size
+- `npuSupport?: boolean` - Model optimized for Intel NPU
+
+#### How It Works for User-Added Models
+1. **Predefined models**: Capabilities are explicitly defined in `models.json`
+2. **User-added models**: 
+   - Capabilities are `undefined` by default
+   - System treats undefined capabilities as "unknown" or "standard"
+   - ModelCapabilities component shows them as "Standard" if no special capabilities are present
+   - Warning message informs users that capabilities may not be fully specified
+
+#### Capability Detection
+The current implementation does NOT auto-detect capabilities for user-added models.
+- This is by design - capability detection would require:
+  - Model introspection (which is complex and model-specific)
+  - Runtime testing (which would be slow and unreliable)
+  - Manual configuration by users (which adds complexity)
+- Instead, the solution:
+  - Shows a clear warning that capabilities may not be fully specified
+  - Allows user-added models to work with default/standard behavior
+  - Keeps the system simple and maintainable
+
+## Files Modified
+
+### 1. WebUI/src/components/ModelSelector.vue
+**Changes:**
+- Added `isPredefined` to items mapping (line 81)
+- Added `isPredefined: true` to default selectedItem (line 94)
+- Added "Custom" badge in selected model display (lines 126-132)
+- Added "Custom" badge in dropdown items (lines 175-181)
+- Added `isPredefined` to ModelCapabilities props (line 190)
+
+**Impact:**
+- Users can now visually distinguish user-added models from predefined ones
+- Badge appears consistently in both dropdown and selected state
+
+### 2. WebUI/src/components/ModelCapabilities.vue
+**Changes:**
+- Added `isPredefined?: boolean` to interface (line 13)
+- Added warning message for user-added models (lines 58-62)
+
+**Impact:**
+- Users are informed when viewing capabilities of user-added models
+- Warning explains that capabilities may not be fully specified
+
+## Testing Approach
+
+### Manual Testing Required
+Due to the nature of the changes (UI visual indicators), manual testing is recommended:
+
+1. **With predefined models:**
+   - Verify NO "Custom" badge appears
+   - Verify NO warning in capabilities tooltip
+
+2. **With user-added models:**
+   - Verify "Custom" badge appears in dropdown
+   - Verify "Custom" badge appears when selected
+   - Verify warning message appears in capabilities tooltip
+   - Verify warning color is amber
+
+3. **Advanced mode testing:**
+   - User-added models should only appear when advancedMode is enabled in preset
+   - This behavior was already implemented and unchanged
+
+### Test Setup
+To test with user-added models:
+- Add a GGUF model file directly to the models directory
+- Or download a model, then remove its entry from `models.json`
+- The model will be detected as user-added (`isPredefined: false`)
+
+## Minimal Changes Philosophy
+
+This implementation follows the minimal changes approach:
+- Leveraged existing `isPredefined` field (no data model changes)
+- Only modified 2 files (ModelSelector.vue and ModelCapabilities.vue)
+- No new components created
+- No backend changes required
+- No new dependencies added
+- Consistent with existing UI patterns (badges similar to capability badges)
+
+## Future Enhancements (Out of Scope)
+
+Potential future improvements that were NOT implemented:
+1. Auto-detection of model capabilities through introspection
+2. Manual capability configuration UI for user-added models
+3. Model capability validation/testing system
+4. Import/export of user-added model configurations
+5. Shared repository of community-maintained model capabilities
+
+These enhancements would require significant additional work and are beyond the scope of this issue.
+
+## Conclusion
+
+The implementation successfully addresses both requirements:
+1. ✅ **Visual indicators**: "Custom" badge clearly marks user-added models
+2. ✅ **Capabilities tracking**: Existing system works for user-added models with appropriate warnings
+
+The solution is minimal, maintainable, and provides clear user feedback without adding complexity.

PR_SUMMARY.md

@@ -0,0 +1,180 @@
+# Pull Request Summary: Improve UX for User-Added Models
+
+## Issue Reference
+**Issue**: Improve UX for user-added models
+**Requirements**:
+1. Indicate which models are not "default", i.e. added by the user
+2. Figure out how to track capabilities of user-added models
+
+## Solution Summary
+
+### ✅ Requirement 1: Visual Indicators for User-Added Models
+**Implementation**: Added "Custom" badge to visually distinguish user-added models
+
+**Where it appears**:
+- Model selector dropdown (next to each user-added model)
+- Selected model display (in the model selector button)
+
+**Badge characteristics**:
+- Text: "Custom" 
+- Styling: Primary color with subtle background
+- Size: Small (10px font)
+- Tooltip: "User-added model"
+
+### ✅ Requirement 2: Capabilities Tracking
+**Implementation**: Leveraged existing capabilities system with enhanced user feedback
+
+**How it works**:
+- Existing `Model` type includes capability fields (supportsToolCalling, supportsVision, etc.)
+- Predefined models have capabilities defined in `models.json`
+- User-added models have undefined capabilities (shown as "Standard")
+- New warning message in tooltip: "⚠️ User-added model - capabilities may not be fully specified"
+
+**Design decision**: No auto-detection of capabilities
+- Auto-detection would be complex, unreliable, and slow
+- Current approach is simple and maintainable
+- Users are clearly informed about limitation
+
+## Files Changed
+
+### 1. `WebUI/src/components/ModelSelector.vue`
+**Changes**:
+- Added `isPredefined` field to items mapping
+- Added "Custom" badge in dropdown items
+- Added "Custom" badge in selected model display
+- Passed `isPredefined` to ModelCapabilities component
+
+**Lines changed**: +21 lines
+
+### 2. `WebUI/src/components/ModelCapabilities.vue`
+**Changes**:
+- Added `isPredefined` field to interface
+- Added warning message for user-added models in tooltip
+
+**Lines changed**: +6 lines
+
+### Documentation Added
+
+1. **IMPLEMENTATION_SUMMARY.md**
+   - Complete technical details
+   - Architecture explanation
+   - Design decisions rationale
+   - Future enhancement ideas
+
+2. **VISUAL_CHANGES.md**
+   - ASCII mockups of UI changes
+   - Styling specifications
+   - Accessibility considerations
+   - Theme compatibility notes
+
+## Quality Assurance
+
+✅ **Code Review**: No issues found
+✅ **Security Scan**: CodeQL clean (no vulnerabilities)
+✅ **TypeScript**: Compiles successfully
+✅ **Patterns**: Follows existing conventions
+✅ **Minimal Changes**: Only 2 files modified, ~30 lines added
+
+## Testing Requirements
+
+### Automated Testing
+- Not applicable (visual UI changes)
+
+### Manual Testing Required
+1. **Test with predefined models**:
+   - Verify NO "Custom" badge appears
+   - Verify NO warning in capabilities tooltip
+
+2. **Test with user-added models**:
+   - Verify "Custom" badge appears in dropdown
+   - Verify "Custom" badge appears when selected
+   - Verify warning message in capabilities tooltip
+   - Verify badge styling is consistent
+
+3. **Test advanced mode**:
+   - User-added models should only appear when advancedMode is enabled
+
+### Test Setup
+To create user-added models for testing:
+- Add a GGUF model file directly to the models directory
+- Or download a model, then remove its entry from `models.json`
+- The model will be detected as user-added (`isPredefined: false`)
+
+## How to Identify Models
+
+### Predefined Models
+- Defined in `WebUI/external/models.json`
+- Have `isPredefined: true`
+- Capabilities fully specified
+- **Visual**: No "Custom" badge
+- **Tooltip**: No warning
+
+### User-Added Models
+- Downloaded/copied by user but not in models.json
+- Have `isPredefined: false`
+- Capabilities may be undefined
+- **Visual**: "Custom" badge displayed
+- **Tooltip**: Warning about capabilities
+
+## Backwards Compatibility
+
+✅ **Fully backwards compatible**
+- No breaking changes
+- Existing models continue to work
+- No data migration required
+- No configuration changes needed
+
+## Performance Impact
+
+✅ **Negligible performance impact**
+- Single field added to existing Model type
+- No additional API calls
+- No additional database queries
+- Minimal DOM changes (one badge element)
+
+## Deployment Notes
+
+1. No special deployment steps required
+2. No database migrations needed
+3. No configuration changes required
+4. Changes take effect immediately after deployment
+
+## Reviewer Checklist
+
+- [ ] Code changes reviewed and approved
+- [ ] Visual indicators appear correctly for user-added models
+- [ ] No visual indicators for predefined models
+- [ ] Capabilities tooltip shows warning for user-added models
+- [ ] Badge styling is consistent with design system
+- [ ] No layout issues with long model names
+- [ ] Works in both light and dark themes
+- [ ] Accessibility considerations met
+- [ ] Screenshots added to PR (if possible)
+
+## Screenshots
+
+**Note**: Screenshots require running the Electron application with:
+- Complete Python environment setup
+- Backend services installation  
+- Intel Arc GPU hardware
+
+Reviewer should add screenshots during manual testing.
+
+## Future Enhancements (Out of Scope)
+
+Potential improvements NOT included in this PR:
+1. Auto-detection of model capabilities
+2. Manual capability configuration UI
+3. Model capability validation/testing
+4. Import/export of model configurations
+5. Community-maintained capability database
+
+These would require significant additional work and design decisions.
+
+## Conclusion
+
+This PR successfully implements both requirements from the issue with minimal code changes:
+1. ✅ Clear visual indicators for user-added models
+2. ✅ Capabilities tracking with appropriate user warnings
+
+The implementation is clean, maintainable, and follows existing patterns. It provides clear user feedback without adding complexity to the codebase.