# AG Agent Panel — Reference vs Current

**Target:** second supplied image (dense, ~650–700px populated panel).  
**Current (before this pass):** first supplied image (~930px+, vertically stretched).

---

## Summary

The current implementation had the right sections but the wrong visual system: cards too tall, gaps too large, purple header identity, bordered agenda rows, skeleton placeholders after load, and an outlined send button.

---

## 1. Panel shell

| Property | Target | Current (image 1) |
|----------|--------|-------------------|
| Width | 300–320px | ~292–308px (close) |
| Padding | 16px horizontal | Mixed 12–20px |
| Background | `#FFFFFF` pure white | Off-white / grey tint |
| Border | `1px solid rgba(26,24,38,0.055)` | Stronger generic border |
| Radius | 14px | 16px |
| Shadow | Subtle two-layer | Heavier shadow |
| Page canvas | `#F5F4F2` | `#ebe8e4` (too warm/grey) |
| Total height | ~650–700px populated | ~930px+ |

---

## 2. Header

| Property | Target | Current |
|----------|--------|---------|
| Icon container | 32×32, radius 10px, `#FFF1EC` | 36px circle, coral gradient |
| Icon color | `#FF735C` sparkle | White on gradient |
| Title | 15px/700 `#151322` | 15px Manrope (close) |
| Subtitle | 10.5–11px `#77758A` | Similar |
| Chevron | 14px `#30304A`, 28×28 hit area | Present but wrong color |

---

## 3. Greeting

| Property | Target | Current |
|----------|--------|---------|
| Title | 14–15px/700, 10px top margin | 15px, 16px bottom margin |
| Subtitle gap | 2px below title | ~4px (too loose) |
| Subtitle | 11px `#77758A` | 12px grey |

---

## 4. Metric grid

| Property | Target | Current |
|----------|--------|---------|
| Gap | 8px | 8px (OK) |
| Card height | 76–80px (`min-height: 78px`) | 92px+ |
| Card padding | 10px 10px 8px | 12px+ |
| Card radius | 10px | 12px |
| Layout | Icon + count on same row | Icon above count |
| Colors | Semantic per card (see spec) | Washed gradients |
| Zero state | De-emphasized when mixed; caught-up when all zero | Always show 4 cards at full或低 opacity |
| Icon container | 24×24 white rounded square | 28×28 |

---

## 5. Quick actions

| Property | Target | Current |
|----------|--------|---------|
| Button height | 31–34px | 44px |
| Gap | 6px × 8px | 8px |
| Border | `#DFDDE5` | Generic rgba |
| Icons | Lightweight 13–14px, colored | 24px icon boxes |
| Text | 10.5px, single line | 11px, occasional wrap |
| Hover | `#F9F7FF` border `#D9D0FF`, no transform | Lift + shadow |

---

## 6. Today's agenda

| Property | Target | Current |
|----------|--------|---------|
| Heading | 11.5px/700 sentence case | 10px uppercase |
| Rows | Compact list, no card borders | Bordered cards ~40px+ tall |
| Status | 3×12px vertical bar | 4px full-height bar |
| Grid | bar · time · event · chevron | Different grid |
| Empty | One small line | 3 dashed skeleton rows |
| Skeletons | Only while loading | Shown after data resolved |

---

## 7. Needs attention

| Property | Target | Current |
|----------|--------|---------|
| Heading | 11.5px/700 sentence case | Uppercase micro |
| Rows | 36px min, no borders | 10px padding + dividers |
| Avatar | 25px | 30px |
| Name | 10px/600 | 12px |
| Empty | Compact line | Skeleton rows |
| Skeletons | Only while loading | After load |

---

## 8. Ask input

| Property | Target | Current |
|----------|--------|---------|
| Height | 34–36px | 42px |
| Radius | 9px | 10–12px |
| Send button | 28×28 filled `#BEC5D4` / `#7357F6` | 32px outlined purple |
| Placeholder | 10px `#9995A6` | 12px |

---

## 9. Notes footer

| Property | Target | Current |
|----------|--------|---------|
| Height | 36–40px | 38–40px (close) |
| Radius | 10px standalone card | Attached to agent panel |
| Pin color | `#F16F68` | `#bd5947` |
| Background | White card | Transparent when empty |

---

## 10. Empty / loading behavior

| Rule | Target | Current |
|------|--------|---------|
| All metrics zero | Compact caught-up card | Four zero cards OR caught-up removed |
| Some metrics non-zero | Show 4 cards, de-emphasize zeros | OK conceptually |
| Agenda empty | One line | Multiple skeleton rows |
| Attention empty | One line | Skeleton rows |
| Loading | Brief skeleton pulse | N/A / persistent skeletons |

---

## Implementation checklist

- [x] AG design tokens (`--ag-*`)
- [x] Compact metric cards with exact semantic colors
- [x] Caught-up when all metrics zero
- [x] Compact quick actions (31–34px)
- [x] Flat agenda rows + single empty line
- [x] Flat attention rows + single empty line
- [x] Loading-only skeletons
- [x] Filled send button
- [x] Separate notes card
- [x] Panel density target ~650–700px