feat(frontend): migrate renderer to token-based design system by Annieeeee11 · Pull Request #2535 · AgentWrapper/agent-orchestrator

Annieeeee11 · 2026-07-08T20:58:06Z

Summary

Migrates frontend/src/renderer to a token-based design system so styling is consistent, themeable, and easier to maintain.

Token foundation — adds src/styles/tokens.css as the single source of truth for colors, typography, spacing, motion, icons, and z-index; wires tokens into Tailwind via @theme / @utility in styles.css
Legacy cleanup — removes BEM dashboard chrome from styles.css (~1,450 lines deleted); global CSS now only covers xterm, keyframes, session-split, and resize global state
Shared components — introduces TopbarButton, StatusPill, and ResizeHandle to replace ad-hoc BEM classes and inline patterns
Component adoption — updates renderer components and shadcn ui/* primitives to use semantic utilities (text-caption, h-control-form, size-icon-*, z-chrome, etc.) instead of hardcoded values
Theme boot — index.html sets data-theme before first paint to avoid FOUC; terminal palette reads --color-term-* via terminal-themes.ts
Docs — adds DESIGN_TOKENS.md, DESIGN_AUDIT.md, and MIGRATION_GAPS.md (migration marked complete)
Scope: renderer only; src/landing/ intentionally unchanged.
Diff: 46 files, ~984 insertions / ~2,122 deletions (net reduction driven by BEM removal).

Test plan

npm run typecheck passes
npx vitest run src/renderer passes
npx vite build succeeds
App loads without theme flash on cold start (dark default, light toggle works)
Visual spot-check: sidebar, sessions board, session inspector, topbar, dialogs/sheets, PR table, terminal pane, notification center
Resize handles work between panes; no layout regressions on narrow/wide window sizes
Status pills and kanban column tones still render correctly (runtime color tones)

codebanditssss

@Annieeeee11 direction looks good to me, especially centralizing renderer styling around tokens.

Introduce tokens.css as the single source of truth for renderer colors, typography, spacing, motion, and z-index, with Tailwind @theme/@Utility bridges in styles.css. Remove legacy BEM chrome (~1.4k lines), add shared TopbarButton/StatusPill/ResizeHandle components, and adopt semantic utilities across renderer components and shadcn primitives. Update tests for new test IDs and add DESIGN_TOKENS, DESIGN_AUDIT, and MIGRATION_GAPS docs.

neversettle17-101 · 2026-07-09T11:41:29Z

Can you also share screenshots of changes visible in the product behavior/appearance?

SessionStatusPill referenced workerDisplayStatus without importing it, which crashed the renderer with "workerDisplayStatus is not defined".

Annieeeee11 · 2026-07-09T13:27:30Z

Can you also share screenshots of changes visible in the product behavior/appearance?

Appearance and behavior are the same as before.

Align tests with workerDisplayStatus-driven labels instead of the old activity-based pill text (Idle, Input Needed, Exited).

whoisasx

Reviewed latest head 14aa6f4. The token-system direction looks good and the focused renderer checks pass, but I am holding approval for these fixes: the topbar status semantics changed despite this being framed as an appearance-preserving migration, two tokenized utilities are silently dropped from the built CSS, and the new docs currently leak an invalid Tailwind utility into the renderer build. Also please clean up the trailing whitespace reported by git diff --check in the new docs.

whoisasx · 2026-07-09T15:40:59Z

-			{label}
-		</span>
-	);
+	const { label, tone, breathe } = STATUS_PILL[workerDisplayStatus(session)];


[P2] This changes the topbar pill from the raw live activity state to the derived worker display status. An active worker can now show CI failed, Ready, or Done instead of Working, which is a user-visible behavior change even though the PR states appearance and behavior are unchanged. Either keep the old activity-based topbar pill or explicitly call out and product-approve this semantic change.

whoisasx · 2026-07-09T15:40:59Z

 			data-size={size}
 			className={cn(
-				"flex w-fit items-center justify-between gap-2 rounded-md border border-border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-border-strong focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+				"flex w-fit items-center justify-between gap-2 rounded-md border border-border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-border-strong focus-visible:ring-0.75 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-control-board data-[size=sm]:h-control-form *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-icon-base [&_svg:not([class*='text-'])]:text-muted-foreground",


[P2] focus-visible:ring-0.75 is not emitted into the production CSS, so this regresses the previous focus-visible:ring-[3px] style and the select loses its intended focus-ring width. Please use an emitted utility such as an arbitrary value, or add a real token that Tailwind generates.

whoisasx · 2026-07-09T15:40:59Z

 						aria-label={`Rename ${session.title}`}
 						autoFocus
-						className="min-w-0 flex-1 rounded-[3px] border border-accent bg-transparent px-1 py-px text-[12px] text-foreground outline-none focus-visible:ring-1 focus-visible:ring-accent"
+						className="min-w-0 flex-1 rounded-0.75 border border-accent bg-transparent px-1 py-px text-xs text-foreground outline-none focus-visible:ring-1 focus-visible:ring-accent"


[P2] rounded-0.75 is also not emitted by the generated CSS, so the rename input silently loses this radius. This should use a valid emitted utility or a defined radius token before we rely on it in migrated components.

whoisasx · 2026-07-09T15:40:59Z

+| `text-heading`    | `--font-size-heading`    | 21   |
+| `text-heading-lg` | `--font-size-heading-lg` | 22   |
+
+Prefer these utilities over `text-[length:var(--font-size-*)]` in components.


[P3] Tailwind scans this markdown literal and emits an invalid .text-[length:var(--font-size-*)] utility, which shows up as a CSS optimizer warning during the renderer build. Please rewrite or break up the example so the docs do not affect generated app CSS.

Annieeeee11 requested a review from codebanditssss July 8, 2026 20:58

Annieeeee11 self-assigned this Jul 8, 2026

codebanditssss reviewed Jul 9, 2026

View reviewed changes

Annieeeee11 added 2 commits July 9, 2026 11:05

fix: fixed the ResizeHandle import in Sidebar.tsx

e8558f8

codebanditssss force-pushed the feat/desktop-design-system branch from 52dadf9 to 3098057 Compare July 9, 2026 05:38

codebanditssss added 2 commits July 9, 2026 13:15

chore: format desktop design files

458d8a1

fix: restore design branch typecheck

d15c816

codebanditssss force-pushed the feat/desktop-design-system branch from 88c2acd to d15c816 Compare July 9, 2026 07:47

Annieeeee11 added 2 commits July 9, 2026 13:25

Merge branch 'main' into feat/desktop-design-system

c88863a

fix: add missing Fragment and cn imports in BoardEmptyState

0133343

neversettle17-101 requested changes Jul 9, 2026

View reviewed changes

Comment thread frontend/docs/DESIGN_AUDIT.md

Annieeeee11 added 2 commits July 9, 2026 17:55

Merge branch 'main' into feat/desktop-design-system

50dbd44

chore: move design docs into frontend/docs

3c35548

Annieeeee11 requested a review from neversettle17-101 July 9, 2026 13:17

fix: import workerDisplayStatus in ShellTopbar

2f81f3d

SessionStatusPill referenced workerDisplayStatus without importing it, which crashed the renderer with "workerDisplayStatus is not defined".

test: update ShellTopbar status pill expectations

14aa6f4

Align tests with workerDisplayStatus-driven labels instead of the old activity-based pill text (Idle, Input Needed, Exited).

whoisasx requested changes Jul 9, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(frontend): migrate renderer to token-based design system#2535

feat(frontend): migrate renderer to token-based design system#2535
Annieeeee11 wants to merge 10 commits into
mainfrom
feat/desktop-design-system

Annieeeee11 commented Jul 8, 2026

Uh oh!

codebanditssss left a comment •

edited

Loading

Uh oh!

Uh oh!

neversettle17-101 commented Jul 9, 2026

Uh oh!

Annieeeee11 commented Jul 9, 2026

Uh oh!

whoisasx left a comment

Uh oh!

whoisasx Jul 9, 2026

Uh oh!

whoisasx Jul 9, 2026

Uh oh!

whoisasx Jul 9, 2026

Uh oh!

whoisasx Jul 9, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

Annieeeee11 commented Jul 8, 2026

Summary

Test plan

Uh oh!

codebanditssss left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

neversettle17-101 commented Jul 9, 2026

Uh oh!

Annieeeee11 commented Jul 9, 2026

Uh oh!

whoisasx left a comment

Choose a reason for hiding this comment

Uh oh!

whoisasx Jul 9, 2026

Choose a reason for hiding this comment

Uh oh!

whoisasx Jul 9, 2026

Choose a reason for hiding this comment

Uh oh!

whoisasx Jul 9, 2026

Choose a reason for hiding this comment

Uh oh!

whoisasx Jul 9, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

codebanditssss left a comment •

edited

Loading