97 lines
2.7 KiB
Markdown
97 lines
2.7 KiB
Markdown
|
# Visual Truth Spec (Command Grid + Thread Takeover)
|
||
|
|
|
||
|
|
## Source Of Truth
|
||
|
|
- Target A: Command Grid shell screenshot.
|
||
|
|
- Target B: Open thread takeover screenshot.
|
||
|
|
- Current app screenshots are validation artifacts only.
|
||
|
|
|
||
|
|
## Geometry Contract (Desktop)
|
||
|
|
- App viewport composition:
|
||
|
|
- Top bar height: `60px`
|
||
|
|
- Main region: `calc(100vh - 60px)`
|
||
|
|
- Columns:
|
||
|
|
- Left rail: `256px`
|
||
|
|
- Center: fluid
|
||
|
|
- Right rail: `332px`
|
||
|
|
- Dividers:
|
||
|
|
- 1px hard separators between rails/center.
|
||
|
|
- Center content max width:
|
||
|
|
- `1080px` on 1920 viewport.
|
||
|
|
- `960px` on 1440 viewport.
|
||
|
|
|
||
|
|
## Top Bar Contract (Target A)
|
||
|
|
- Left brand block:
|
||
|
|
- Icon tile `32x32`, label stack (`COMMAND GRID`, version line).
|
||
|
|
- Metric tiles (equal height, hard borders):
|
||
|
|
- `TOTAL TASKS`, `CRITICAL ALERTS`, `IDLE`, `BUSY`.
|
||
|
|
- Primary actions:
|
||
|
|
- `BLOCKED ITEMS` outlined red pill.
|
||
|
|
- `NEW TASK` filled green pill.
|
||
|
|
- No tab switcher in top bar.
|
||
|
|
|
||
|
|
## Left Rail Contract (Target A)
|
||
|
|
- Header text: `NAVIGATION / EPICS` mono smallcaps.
|
||
|
|
- Epic tree rows:
|
||
|
|
- 36px row rhythm.
|
||
|
|
- Nested children at +16px indent.
|
||
|
|
- Footer user identity block anchored bottom.
|
||
|
|
|
||
|
|
## Center Feed Contract (Target A)
|
||
|
|
- Section headers:
|
||
|
|
- `READY`, `IN PROGRESS`, `BLOCKED`, mono uppercase with count chips.
|
||
|
|
- Cards:
|
||
|
|
- Radius `14px`, panel fill darker than shell.
|
||
|
|
- Header row: status chip, priority, title, id.
|
||
|
|
- Summary text 2-3 lines.
|
||
|
|
- Dependency sub-panel for `BLOCKED BY` / `UNBLOCKS`.
|
||
|
|
- Assignee row with avatar.
|
||
|
|
- Footer with stage text + compact actions.
|
||
|
|
|
||
|
|
## Right Rail Contract (Target A)
|
||
|
|
- Upper block:
|
||
|
|
- `AGENT POOL MONITOR` with compact rows.
|
||
|
|
- Lower block:
|
||
|
|
- `ACTIVITY / BLOCKERS FEED` timeline rows.
|
||
|
|
- Single vertical divider between center and rail.
|
||
|
|
|
||
|
|
## Thread Takeover Contract (Target B)
|
||
|
|
- Center takeover frame:
|
||
|
|
- Max width `1120px`, radius `12px`.
|
||
|
|
- Header strip:
|
||
|
|
- Task id, status, title, edit/close actions.
|
||
|
|
- Summary row:
|
||
|
|
- Summary text + assignee + due date columns.
|
||
|
|
- Conversation area:
|
||
|
|
- Left incoming / right outgoing bubbles.
|
||
|
|
- Composer bar:
|
||
|
|
- Sticky bottom, rounded input + send CTA.
|
||
|
|
|
||
|
|
## Palette / Type Contract
|
||
|
|
- Base backgrounds:
|
||
|
|
- app `#070d16`
|
||
|
|
- shell `#0c1420`
|
||
|
|
- panel `#111c2a`
|
||
|
|
- card `#1a2431`
|
||
|
|
- Text:
|
||
|
|
- primary `#e8edf5`
|
||
|
|
- muted `#8f9caf`
|
||
|
|
- Accents:
|
||
|
|
- ready `#35d98f`
|
||
|
|
- blocked `#ff4c72`
|
||
|
|
- warning `#ffb24a`
|
||
|
|
- info `#35c9ff`
|
||
|
|
- Font stack:
|
||
|
|
- Sans: `Inter, Segoe UI, system-ui, sans-serif`
|
||
|
|
- Mono: `JetBrains Mono, Cascadia Code, monospace`
|
||
|
|
|
||
|
|
## Breakpoint Contract
|
||
|
|
- Desktop: `>= 1280px` full 3-column shell.
|
||
|
|
- Tablet: `768px-1279px` collapsible rails.
|
||
|
|
- Mobile: `< 768px` bottom nav + full-screen takeover.
|
||
|
|
|
||
|
|
## Acceptance
|
||
|
|
- Pixel-close to target hierarchy and rhythm at:
|
||
|
|
- `1920x1080`
|
||
|
|
- `1440x1024`
|
||
|
|
- `390x844`
|