Skip to content

Refactor console UI styling#1776

Open
AbigailDeng wants to merge 1 commit into
devfrom
refactor/2026-06-04_console-ui-style-redesign
Open

Refactor console UI styling#1776
AbigailDeng wants to merge 1 commit into
devfrom
refactor/2026-06-04_console-ui-style-redesign

Conversation

@AbigailDeng
Copy link
Copy Markdown
Contributor

Problem

The Aevatar console needed a focused visual refresh for operator-heavy workflows without changing the existing Ant Design Pro route structure or core user flows. The previous styling leaned on softer generic SaaS treatments and did not clearly separate daylight console surfaces from technical runtime workbenches.

Solution

  • Added a resumable Stitch UI redesign loop skill and progress log under .agents/skills/stitch-ui-redesign-loop.
  • Captured three Stitch design/review rounds and accepted a daylight operations direction with dark specialist runtime canvases.
  • Introduced shared console design tokens and Ant Design theme updates in aevatarWorkbench.ts.
  • Restyled the global console shell, topbar, sider, selected menu state, cards, tables, buttons, inputs, and focus rings.
  • Updated Teams overview/detail surfaces with denser metrics, semantic status treatments, and teal action hierarchy.
  • Updated shared header selector and menu page shell to match the graphite/porcelain/teal direction.
  • Refined Mission Control topology canvas as a dedicated dark technical surface while keeping the rest of the console daylight.

Impact Paths

  • .agents/skills/stitch-ui-redesign-loop/
  • apps/aevatar-console-web/src/global.less
  • apps/aevatar-console-web/src/shared/ui/aevatarWorkbench.ts
  • apps/aevatar-console-web/src/shared/ui/AevatarHeaderSelect.tsx
  • apps/aevatar-console-web/src/shared/ui/ConsoleMenuPageShell.tsx
  • apps/aevatar-console-web/src/pages/teams/home.tsx
  • apps/aevatar-console-web/src/pages/teams/detail.tsx
  • apps/aevatar-console-web/src/pages/MissionControl/TopologyCanvas.tsx

Verification

  • npm --prefix apps/aevatar-console-web run tsc - passed.
  • npm --prefix apps/aevatar-console-web run test -- --runInBand apps/aevatar-console-web/src/shared/ui/aevatarWorkbench.test.ts apps/aevatar-console-web/src/layouts/MainLayout.test.tsx apps/aevatar-console-web/src/pages/teams/index.test.tsx apps/aevatar-console-web/src/pages/MissionControl/runtimeAdapter.test.ts - passed, 4 suites / 6 tests.
  • npm --prefix apps/aevatar-console-web run build - passed.
  • npm --prefix apps/aevatar-console-web run biome:lint -- src/shared/ui/aevatarWorkbench.ts src/global.less src/pages/teams/home.tsx src/pages/teams/detail.tsx src/shared/ui/AevatarHeaderSelect.tsx src/shared/ui/ConsoleMenuPageShell.tsx src/pages/MissionControl/TopologyCanvas.tsx - passed.
  • git diff --check - passed.
  • npx pnpm --dir apps/aevatar-console-web tsc - passed.
  • npx pnpm --dir apps/aevatar-console-web test -- --runInBand src/shared/ui/aevatarWorkbench.test.ts src/layouts/MainLayout.test.tsx src/pages/teams/index.test.tsx src/pages/MissionControl/runtimeAdapter.test.ts - passed, 4 suites / 6 tests.
  • npx pnpm --dir apps/aevatar-console-web build - passed.
  • Browser verification on http://localhost:5173 covered Teams wide, Teams mobile, and Mission Control detached state.
  • Recovered a stale browser chunk error by restarting the dev server and hard-refreshing Mission Control; final browser check showed no Loading chunk, no error boundary, and no browser error logs.

Notes

  • Mission Control direct route renders detached state until opened from a live run context.
  • Large local Stitch/browser screenshot artifacts were kept out of the commit; progress references describe the captured verification state.

@codecov
Copy link
Copy Markdown

codecov Bot commented Jun 4, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 84.06%. Comparing base (247104d) to head (8633774).

@@            Coverage Diff             @@
##              dev    #1776      +/-   ##
==========================================
- Coverage   84.06%   84.06%   -0.01%     
==========================================
  Files        1028     1028              
  Lines       68513    68513              
  Branches     8885     8885              
==========================================
- Hits        57598    57597       -1     
  Misses       7030     7030              
- Partials     3885     3886       +1     
Flag Coverage Δ
ci 84.06% <ø> (-0.01%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.
see 3 files with indirect coverage changes

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant