nexus/docs/audits/2026-07-26/DESIGN_MIGRATION_AUDIT.md

Authenticated dashboard design migration audit

Outcome

The dashboard V2 language now covers all 16 other authenticated routes through a shared token source, presentation layer, and aligned legacy shell. Dashboard and Login remain visually unchanged. No product behavior, backend contract, route registration, store/service/composable logic, or permission rule was modified.

Implemented layers

1. Expanded nexus-tokens.css into the V2 source for surfaces, text, accents, status colors, focus, typography, page geometry, and legacy aliases.
2. Added nexus-components.css for route frames, headers, glass panels, controls, badges, modals, and state surfaces.
3. Aligned App.vue, AppSidebar, and AppHeader with the dashboard's galaxy, 248px sidebar, 62px topbar, glass, and responsive navigation.
4. Applied standard, workspace, or reading-width contracts to every migrated route family.
5. Replaced presentation emoji/glyph icons with existing Lucide icons and added accessible names, semantic interactive elements, keyboard equivalence, and visible focus.
6. Unified both authenticated navigation shells around the four dashboard categories and added a persistent Settings destination to the dashboard footer. Shared-shell and dashboard destinations now use RouterLinks, while detail routes retain the active state of their parent section.

Evidence matrix

Evidence	Coverage	Result
Fresh dashboard reference	/dashboard, 1440 × 900	Passed
Full desktop route matrix	all 18 registered routes, 1440 × 900	Passed
Full migrated mobile matrix	16 migrated routes, 375 × 812	Passed
Representative responsive matrix	5 route families at 768, 1024, 1920px	Passed
Automated geometry	document width and route-root geometry	Passed
Same-viewport visual comparison	dashboard reference beside migrated Agents	Passed
Core interactions	filters, forms, modal, detail changes, board, chat, notifications	Passed
Keyboard/accessibility	names, semantics, focus, equivalent activation	Passed
Frontend gates	typecheck, tests, build	Passed

Evidence is under screenshots/. The final reference is screenshots/00-dashboard-reference-1440.png; route captures are under screenshots/design-migration-routes/; and the combined visual comparison is screenshots/design-qa-comparison-dashboard-vs-agents-1280.png.

Measured contracts

• Sidebar: 248px desktop.
• Topbar: 62px.
• Page title: Space Grotesk 24px / 30px, weight 700.
• Desktop/mobile inset: 20px / 14px.
• Maximum route widths: standard 1180px, workspace 1440px, reading/form 880px.
• No document-level horizontal overflow at the required breakpoints.
• Task Board columns retain their intentional internal horizontal scroller.

Findings resolved during QA

• The inherited 768px shell breakpoint initially hid the sidebar without exposing the mobile navigation button. The shell now switches coherently at 900px.
• Scoped Settings width rules initially overrode the shared reading-width modifier. Higher-specificity shared contracts now enforce 880px for every reading/form root.
• Undefined or ambiguous legacy color aliases and hard-coded route colors were replaced by V2 semantic tokens.
• Presentation emoji/glyph icons and unnamed icon controls were replaced with Lucide icons and explicit accessible names.
• The shared sidebar initially exposed one flat list and the dashboard omitted Settings. Both shells now expose the same category framework and persistent Settings access without changing routes, handlers, stores, or permissions.
• A RouterLink migration initially shadowed each dashboard item's target with the current route. The prop/current-route names are now distinct, and browser checks confirmed the real registered destinations.

Residuals

There are no P0-P2 design defects. A deliberate Task Board route leave aborts the fixture-backed live stream and logs the existing polling-fallback warning. This is outside the presentation scope and does not affect the rendered result or interaction path.

Verification

pnpm typecheck  -> passed
pnpm test       -> passed (1 file, 2 tests)
pnpm build      -> passed (1,882 modules)
git diff --check -> passed; line-ending notices only

Navigation follow-up evidence:

navigation-groups-after-dashboard.png
navigation-groups-after-settings.png
navigation-groups-after-settings-375.png
navigation-groups-comparison-dashboard-vs-settings-1440.png