# Wireframe: Models Page

## META
| Field | Value |
|-------|-------|
| Page | Models |
| Path | `/dashboard/models` |
| Personas | All |
| PRD Ref | F-003 |

---

## ASCII Wireframe

```
+------------------+----------------------------------------------------------------------------------------+
| SIDEBAR          | MAIN AREA                                                                                  |
|                  |                                                                                          |
| Models       <-   | Models                                        [Provider: All v]                             |
|                  |                                                                                          |
|                  | +---------------------------+ +---------------------------+ +---------------------------+ |
|                  | | ModelCard: llama3:8b      | | ModelCard: qwen2.5:7b     | | ModelCard: gpt-4o-mini   | |
|                  | | Provider: Ollama (local)  | | Provider: Ollama (local)  | | Provider: OpenAI (cloud)  | |
|                  | | Size: 4.7GB  VRAM: 6GB   | | Size: 4.4GB  VRAM: 8GB   | | Size: -     VRAM: -      | |
|                  | | Capabilities: chat, embed | | Capabilities: chat, tools | | Capabilities: chat, vision| |
|                  | | Status: Ready             | | Status: Loading           | | Status: Ready             | |
|                  | +---------------------------+ +---------------------------+ +---------------------------+ |
|                  |                                                                                          |
|                  | +---------------------------+ +---------------------------+                             |
|                  | | ModelCard: mistral:7b     | | ModelCard: exo:1b         |                             |
|                  | | Provider: Ollama (local)  | | Provider: exo (local)     |                             |
|                  | | Status: Offline           | | Status: Ready             |                             |
|                  | +---------------------------+ +---------------------------+                             |
|                  |                                                                                          |
+------------------+----------------------------------------------------------------------------------------+
```

---

## Components Inventory

| Component | Data Source | Description |
|-----------|-------------|-------------|
| ModelCard | `/api/models` or discovery service | Single model: name, provider, size, VRAM, capabilities, status |
| ModelGrid | - | Responsive grid of ModelCards |
| ProviderFilter | Local state | Dropdown: All / Ollama / Cloud / exo |

---

## States

| State | Behavior |
|-------|----------|
| **Loading** | Skeleton cards in grid |
| **No models** | Empty state with "Install Ollama" prompt + `ollama pull` instructions |
| **Models available** | Grid populated; filter updates visible subset |

---

## Responsive

| Breakpoint | Behavior |
|------------|----------|
| Mobile | Single column, cards full-width |
| Tablet | 2 columns |
| Desktop | 3-4 columns |
