150 lines
4.6 KiB
Markdown
150 lines
4.6 KiB
Markdown
# 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
|