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+ |
| 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 |
| 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
