viktor/beadboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
beadboard/docs/plans/2026-02-19-visual-truth-spec.md
zenchantlive dfaf523029 feat(swarm): implement Swarm View remake with Operations, Archetypes, and Templates 
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.
2026-02-20 22:19:38 -08:00

2.7 KiB
Raw Blame History

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