feat(ui): complete Plan 06-01 - fix model scan + move model selector to input

- Fix Rust model scan to only list top-level models (not subdirectories)
- Add scan_model_dir_top_level() function in model_files.rs
- Create ModelSelectorPill component for chat input area
- Remove model-section from Sidebar, move to ChatView
- Update ChatView props to receive model-related props
- Update tests for new ChatView props
This commit is contained in:
Evandro Fonseca Junior committed 2026-04-02 09:06:06 -03:00
1 parent 3364dba5aa
commit cb722e79a6
11 files changed
+1695 -254

No files matched your search

@@ -0,0 +1,70 @@
# Task 2 Summary: Create ModelSelectorPill + wire into ChatView + clean Sidebar
**Status:** ✅ Complete
**Files Modified:**
- `tauri-app/src/components/ModelSelectorPill.tsx` (new file)
- `tauri-app/src/components/ChatView.css` (added model selector styles)
- `tauri-app/src/components/Sidebar.tsx` (removed model-section)
- `tauri-app/src/App.tsx` (moved model props to ChatView)
- `tauri-app/src/components/ChatView.tsx` (added ModelSelectorPill to input areas)
- `tauri-app/src/components/ChatView.test.tsx` (updated tests with new props)
## Changes Made
### 1. Created `ModelSelectorPill.tsx`
New component that:
- Displays a compact pill button with the selected model's display name
- Shows a status dot indicating server status
- Opens a dropdown listbox on click with available models
- Filters models using `isInChatSelector` (Cooper + Iron only)
- Supports loading/swapping state with spinner
- Props: `models`, `localModels`, `selectedModel`, `onModelChange`, `onModelSwap`, `isSwapping`, `status`
### 2. Added CSS styles for ModelSelectorPill
Added to `ChatView.css`:
- `.model-selector-pill-wrapper` - container with relative positioning
- `.model-selector-pill` - pill button styling
- `.model-status-dot` - status indicator dot
- `.model-selector-menu` - dropdown listbox
- `.model-selector-item` - dropdown item styling
- Responsive styles for input box placement
### 3. Cleaned Sidebar.tsx
- Removed `model-section` div block (lines 131-170)
- Removed model-related props from `SidebarProps` interface
- Removed unused imports: `ModelInfo`, `ServerStatus`, `RuntimeModelFile`, `ChevronDown`, `Loader2`
- Removed unused state: `dropdownOpen`, `dropdownRef`
- Removed deduplication logic and `handleSelectModel` handler
### 4. Updated App.tsx
- Removed model props from `<Sidebar>` component
- Added model props to `<ChatView>`: `models`, `localModels`, `selectedModel`, `onModelChange`, `onModelSwap`, `isSwapping`, `status`
### 5. Updated ChatView.tsx
- Added new props to `Props` interface
- Imported `ModelSelectorPill`, `ModelInfo`, `ServerStatus`, `RuntimeModelFile`
- Rendered `<ModelSelectorPill>` in two places:
- Hero input block (inside `.input-box--hero`, before `.attachment-actions`)
- Regular input block (inside `.input-box`, before `.attachment-actions`)
### 6. Updated ChatView.test.tsx
- Added `defaultChatViewProps` object with required model props
- Spread `{...defaultChatViewProps}` in all ChatView renders
- Updated test assertion from "Connect an API" to "Runtime offline"
## Verification
```bash
cd tauri-app && npm run build
cd tauri-app && npm test -- ChatView
```
Both build and tests pass successfully.
## Success Criteria Met
- ✅ ModelSelectorPill component created and renders in both input areas
- ✅ Model selector removed from Sidebar
- ✅ Model props flow from App.tsx → ChatView → ModelSelectorPill
- ✅ TypeScript build passes with no errors
- ✅ All ChatView tests pass