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

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

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

Row height bug — hover rail overlay (blocking)
Surface contrast — canvas + shadow
Row grid — fixed columns, unread, labels column
Pagination footer — full control cluster
Sidebar — More, compose split, profile anchor, badge variants
Agent panel — greeting, quick action sizing, attention avatars, empty-state tint
Header — icon contrast, account typography, toolbar spacing
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.

11. Post-thickening review (current vs reference)

After increasing AG Agent panel weight (wider rail, thicker borders/shadows, 44px quick actions, unified notes footer), these gaps remain:

Area	Expected	Current	Still needed
Populated agent state	Full dashboard with metrics, agenda, needs attention	Empty state only (no real signals in 3-email inbox)	Correct behavior — verify with meeting/invoice/action-item emails
Metric card copy	"12 Important emails" inline with icon	Number on own line above label	Optional: inline number + label like reference
Panel header	Collapse chevron on right	Static header	Add optional collapse affordance
Quick action colors	Each button has distinct icon tint (sparkle, pencil, search, list)	Only first two are purple-tinted	Tint all four icon containers subtly
Agenda rows	Clickable with chevron, colored left bar	Styled but no navigation	Wire `View calendar` + row click handlers
Needs attention	Company avatars with brand colors	Initials via SenderAvatar	OK when diverse senders exist
Ask input	Send button outside input on right	Send inside input row	Minor — reference shows external send pill
Notes footer	Attached to panel, flower icon	Pin icon, now visually attached ✓	Swap icon to match reference if desired
Inbox rows	Brand logos, label column alignment	Self-sent SD avatars dominate	Needs diverse real senders
Category badges	Non-zero unread per tab	Hidden when zero ✓	Will appear with unread mail
Sidebar badges	Inbox, Drafts, labels, Action Items	Only Clients 1	Wire remaining counts from API/stats
Sidebar More	Expands hidden labels	Toggle present, no expansion	Implement label overflow list
Pagination	`1–10 of 243`	`1–3` without total	Needs total count from API
Row overflow menu	Three-dot at row end	Missing	Add optional overflow column
Micro-interactions	Compose press, category hover, selected row coral	Partial	Polish pass on remaining hovers

Thickening changes applied

Rail width: 292–308px (was 270–288px)
Agent panel: heavier shadow, stronger border, 20px top padding
Quick actions: 44px height, 11px semibold labels, no ellipsis truncation
Caught-up card: stronger green tint + inset highlight
Stat cards: gradient fills, 1px tinted borders, 24px numbers
Notes: attached footer card (shared border with agent panel)
Ask input: 42px, white fill, focus ring

8.8 KiB Raw Blame History Unescape Escape