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
History
Prateek f599c3edc6 docs: add design research artifacts — briefs, token reference, screenshots 
Comprehensive design research package for the ao dashboard, session
detail page, and orchestrator terminal. Produced via competitive analysis
of 14 products (Linear, Vercel, Railway, Fly.io, Inngest, WandB, LangSmith,
Supabase, and more) + Playwright CSS extraction from live sites + full
codebase audit.

Artifacts:
- docs/design/design-brief.md            Main design brief (v2, Playwright-updated)
- docs/design/session-detail-design-brief.md   /sessions/[id] design spec
- docs/design/orchestrator-terminal-design-brief.md  Orchestrator page spec
- docs/design/token-reference.css        Drop-in CSS replacement for globals.css
- docs/design/competitive-analysis-raw.md  Raw research notes, all 14 sites
- docs/design/design-brief-v1.md         Original text-only brief (pre-Playwright)
- docs/design/README.md                  Index + research methods summary
- docs/design/screenshots/linear-homepage.png   Playwright-captured screenshot
- docs/design/screenshots/railway-homepage.png  Playwright-captured screenshot

Key findings:
- Linear CSS token values verified via Playwright (body bg #08090A, accent
  #7070FF, Berkeley Mono monospace, type scale, radius, transitions)
- Recommended palette: #0C0C11 base (blue-cast dark vs current GitHub #0d1117)
- Highest-impact change: load Inter Variable via next/font/google
- Orchestrator terminal needs visual differentiation (violet accent, status strip)
- token-reference.css is ready to drop into packages/web/src/app/globals.css

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
 		2026-02-19 19:04:14 +05:30
..
screenshots docs: add design research artifacts — briefs, token reference, screenshots 2026-02-19 19:04:14 +05:30
README.md docs: add design research artifacts — briefs, token reference, screenshots 2026-02-19 19:04:14 +05:30
competitive-analysis-raw.md docs: add design research artifacts — briefs, token reference, screenshots 2026-02-19 19:04:14 +05:30
design-brief-v1.md docs: add design research artifacts — briefs, token reference, screenshots 2026-02-19 19:04:14 +05:30
design-brief.md docs: add design research artifacts — briefs, token reference, screenshots 2026-02-19 19:04:14 +05:30
orchestrator-terminal-design-brief.md docs: add design research artifacts — briefs, token reference, screenshots 2026-02-19 19:04:14 +05:30
session-detail-design-brief.md docs: add design research artifacts — briefs, token reference, screenshots 2026-02-19 19:04:14 +05:30
token-reference.css docs: add design research artifacts — briefs, token reference, screenshots 2026-02-19 19:04:14 +05:30

README.md

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
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

Screenshots

File Description
screenshots/linear-homepage.png Linear.app captured via Playwright (311KB) — source for verified CSS token extraction
screenshots/railway-homepage.png Railway.app captured via Playwright (444KB) — visual palette 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.

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.