# 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

```text
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:

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