dfaf523029
This commit includes the new SwarmWorkspace with its 3 sub-tabs, the LeftPanel mission picker, and the comprehensive Operations Command Dashboard featuring the live interactive DAG telemetry and task assignment prep flow.
96 lines
2.7 KiB
Markdown
96 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`
|