# AGMail Inbox UI — Expectation vs Reality

Reference: target mock (populated, high-density inbox).  
Current: implementation screenshot (sparse real data, 3 emails).

---

## 1. Email rows — structure & density

| Area | Expected | Current | Gap |
|------|----------|---------|-----|
| Grid columns | Fixed: checkbox, star, avatar, sender, subject—preview, labels, attachment, date/actions | Partial grid; labels column collapses when empty; date/actions compete for space | Labels need reserved column; rail must overlay date |
| Row height | Fixed 44–48px; hover never changes height | Row 1 visibly taller on hover | **Bug:** hover actions affect layout |
| Hover actions | 30×30 hit areas, 14–16px icons, replace date in-place | Icons crammed at far right; row expands | Absolute overlay in date rail |
| Unread | Blue dot + semibold sender/subject + warmer row bg | Weak/unused unread pip; read/unread similar | Stronger unread treatment |
| Stars | Outline inactive, amber fill active | Present but low contrast | Tune star states |
| Labels | Dedicated column, vertically aligned across rows | Labels drift near date when present | Fixed label column always reserved |
| Attachments | Paperclip column before date | Works when present | Keep dedicated column |
| Sender avatars | Brand logos + deterministic initials | All senders same purple SD | Vary initials colors; logos when domain known |
| Overflow | Three-dot menu at row end | Missing | Optional future |

## 2. Category navigation

| Area | Expected | Current | Gap |
|------|----------|---------|-----|
| Zero badges | Hidden | Hidden ✓ | OK |
| Non-zero badges | Coral pills when data exists | None shown (only 3 emails, counts may be 0) | Mechanism OK; needs real unread per category |
| Active tab | 600 weight, coral underline under label width | Present but weak | Stronger active typography |
| Icons | Distinct per category | Present | OK |
| Pagination in tab bar | `1–10 of 243` + controls on right | `1–3` floating in tab bar only | Move to footer control cluster |

## 3. Surface hierarchy

| Area | Expected | Current | Gap |
|------|----------|---------|-----|
| Canvas | Warm off-white, slightly darker than cards | `#F4F3F1` — very close to white cards | Darken canvas ~2–3% |
| Inbox card | White, subtle shadow, light border | White, very subtle contrast | Increase shadow, not border |
| Layering | Canvas → workspace tone → white cards | Mostly two layers | Add workspace header tone |

## 4. Right panel — AG Agent

| Area | Expected | Current | Gap |
|------|----------|---------|-----|
| Empty state | Caught-up card when all metrics zero | Present ✓ | Improve green success tint |
| Populated state | 4 metric cards + greeting + agenda + needs attention | Only shows when `hasSignals`; user sees empty with 3 emails | Threshold/data wiring OK; greeting missing in populated mode |
| Quick actions | Equal-size buttons, no wrap | "Summarize inbox" wraps | Fix button width/height |
| Today's agenda | Time + title + venue + color bar | Implemented when meeting emails exist | Needs richer extraction |
| Needs attention | Avatar + name + status + age | Text only | Add mini avatars |
| Ask input | Paperclip + send | Send only | Add attach icon |
| Header | 15px/650 title, larger spark container | Slightly small | Increase presence |

## 5. Sidebar

| Area | Expected | Current | Gap |
|------|----------|---------|-----|
| Badges | Inbox 12, Drafts 3, labels, Action Items 3 | Only Clients 1 | Mechanism exists; apply consistent badge component |
| Label badge style | Dark translucent pill | Same coral as inbox | Neutral pill for labels |
| More | Collapsible after Personal | Missing | Add More row |
| Compose | Gradient + coral shadow + split dropdown | Flat coral, caret not separate hit area | Split button styling |
| Profile block | Anchored bottom, not clipped | May clip on short viewports | Flex column + `margin-top: auto` |
| Active inbox | Coral indicator + count | Active state weak | Polish active row |

## 6. Header / toolbar

| Area | Expected | Current | Gap |
|------|----------|---------|-----|
| Search width | Wide command surface | OK but large dead zone before filter | Tighten action cluster |
| Icon contrast | Secondary but readable | Too faint (~disabled) | +10–15% contrast |
| Account block | Name 12px/600, email 10px, chevron | Typography too small | Increase legibility |
| Ask Agent | Lavender pill | Present ✓ | OK |

## 7. Pagination / list controls

| Area | Expected | Current | Gap |
|------|----------|---------|-----|
| Footer cluster | Range + prev/next + density toggles | Only when paginating; minimal | Always show when emails exist |
| Range format | `1–10 of 243` | `1–3` in tab bar | Full footer cluster |

## 8. Notes utility

| Area | Expected | Current | Gap |
|------|----------|---------|-----|
| Zero notes | Low emphasis | Same weight as agent card | Reduce contrast when `Notes (0)` |
| With notes | More visible | Collapsible ✓ | OK |

## 9. Micro-interactions

| Area | Expected | Current | Gap |
|------|----------|---------|-----|
| Row hover | Actions fade in, no layout shift | Layout shift | Fix overlay |
| Nav/category hover | Subtle surfaces | Partial | Consistent transitions |
| Compose press | Slight scale/brightness | Minimal | Add press feedback |

## 10. Color anchors

| Area | Expected | Current | Gap |
|------|----------|---------|-----|
| Contextual labels | Blue, green, amber, lavender pills in rows | Some labels on row 2 | More label types in `emailLabels` ✓ |
| Sender diversity | Brand colors/logos | Same purple for self-sent | Deterministic initials colors |

---

## Priority fix order

1. **Row height bug** — hover rail overlay (blocking)
2. **Surface contrast** — canvas + shadow
3. **Row grid** — fixed columns, unread, labels column
4. **Pagination footer** — full control cluster
5. **Sidebar** — More, compose split, profile anchor, badge variants
6. **Agent panel** — greeting, quick action sizing, attention avatars, empty-state tint
7. **Header** — icon contrast, account typography, toolbar spacing
8. **Notes** — zero-state de-emphasis

## Visual rule

Every component: **absent → present → interactive**. Zero data reduces complexity; real data increases density. **No state change may alter row dimensions.**