bkinnightskytw
/
agent-orchestrator
mirror of https://github.com/ComposioHQ/agent-orchestrator.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
agent-orchestrator/docs/design/README.md

3.8 KiB
Raw Blame History

ao Dashboard — Design Research Artifacts

Compiled February 2026 via competitive analysis, Playwright CSS extraction, and codebase audit.

Documents

File Description
design-brief.md Main design brief — competitive analysis, full color palette, typography, all component specs, anti-patterns, implementation stack recommendation, and current codebase audit
session-detail-design-brief.md Design spec for /sessions/[id] — the single-agent investigation view
orchestrator-terminal-design-brief.md Design spec for the orchestrator terminal — full-viewport command center with status strip
session-replacement-handoff.md Design plan for successor sessions, PR takeover, and context handoff after replacing a worker
token-reference.css Ready-to-use CSS — drop-in replacement for globals.css @theme block
competitive-analysis-raw.md Raw research notes from all 14 competitor sites (Linear, Vercel, Railway, Fly.io, Inngest, Temporal, Grafana, WandB, LangSmith, Retool, Render, PlanetScale, Supabase, GitHub Copilot)
design-brief-v1.md Original v1 brief (text-only research, pre-Playwright CSS extraction) — kept for reference

Research Methods

Phase 1 — Text analysis: Two parallel research agents analyzed 14 competitor product sites via WebFetch, extracting visual patterns, color systems, and design philosophy from HTML/CSS content.

Phase 2 — Playwright CSS extraction: Installed @playwright/mcp and extracted live CSS custom properties from linear.app using document.styleSheets enumeration. This yielded ground-truth values for Linear's token system — the most rigorous competitive design data available without access to their Figma files.

Phase 3 — Playwright screenshots: Captured screenshots of Linear and Railway via headless Chromium for visual reference. The binary captures are intentionally not tracked; regenerate from the live sites if a fresh comparison is needed.

Phase 4 — Codebase audit: Read the entire packages/web/ source (components, types, CSS tokens) to map research recommendations against the actual implementation. Produced implementation audit sections in each brief with prioritized delta tables.

Key Findings

  1. Linear's verified token system (via Playwright CSS extraction) is the closest design benchmark. See design-brief.md §1.
  2. Current dashboard uses GitHub-inspired colors (#0d1117 base). Recommended shift: blue-cast dark (#0C0C11). See design-brief.md §7.
  3. The 6-level attention zone system (merge → respond → review → pending → working → done) is architecturally correct and well-implemented. Visual polish is the primary gap.
  4. Highest-impact single change: load Inter Variable via next/font/google. Immediately elevates the typography to Linear/Supabase tier.
  5. Orchestrator terminal needs visual differentiation (violet accent, status strip, full-viewport height) — currently indistinguishable from agent session pages.

Design Token Quick Reference

The recommended palette is in token-reference.css. The current palette is in packages/web/src/app/globals.css.

Current base:      #0d1117  (GitHub blue-green dark)
Recommended base:  #0C0C11  (neutral blue-cast dark)

Current accent:    #58a6ff  (GitHub blue)
Recommended accent: #5B7EF8 (blue-indigo, between Linear blue and brand purple)

All Linear CSS values are ground-truth verified from live CSS. Railway values are visually estimated from screenshot. Other competitor values are from text/HTML analysis.