# 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