Build reusable Deck UI toolkit and migration harness

[davidfowl]

Description

This draft builds the migration foundation for a future React and ASP.NET Core Native AOT dashboard. It is intentionally not a full dashboard replacement or cutover.

The existing Blazor dashboard remains intact and continues to be the default experience. The React dashboard runs beside it against the same AppHost, which lets us compare behavior and visuals while each migration step is still small enough to test and review. Nothing in this PR removes the existing UI or requires the final backend architecture to be chosen now.

The PR delivers three independently useful pieces:

1. A reusable dashboard UI toolkit built on Fluent UI React v9.
2. A React dashboard that composes that toolkit and exercises the current dashboard workflows.
3. A black-box Playwright compatibility harness derived from the existing dashboard and Stress playground rather than from React implementation details.

The migration can therefore proceed incrementally: implement a contract, run both dashboards, compare their behavior and screenshots, and keep the old dashboard available until the replacement has earned a cutover.

How this differs from a full rewrite

A full rewrite would replace the current UI and backend as one coordinated change, making regressions difficult to distinguish from intentional redesign. This PR establishes boundaries that let those concerns move separately:

Concern	This PR	Future migration
Existing dashboard	Preserved and tested as the behavioral reference	Removed only after an explicit cutover decision
React UI	Runs side by side using mock, Tauri, or live HTTP transports	Becomes the default after parity and product review
UI design system	Introduces a reusable Deck toolkit over Fluent React	Grows without coupling controls to AppHost transport logic
Backend	Uses authenticated dashboard HTTP contracts	Can move to ASP.NET Core Native AOT behind the same frontend contract
Compatibility	Enumerates and tests legacy behavior as a black box	Remains the migration gate instead of testing implementation details

This is still substantial implementation work, but the architectural product of the PR is the toolkit and migration harness, not permission to switch off the old dashboard.

Fluent React and the Deck toolkit

The toolkit uses @fluentui/react-components and @fluentui/react-icons. Fluent React v9 provides accessible control behavior, focus management, interaction semantics, and the base icon set. Deck adds the Aspire-specific design language and dashboard contracts that Fluent does not provide by itself.

The toolkit lives in src/Aspire.Deck/ui/src/toolkit and is exported through one index.ts barrel. Dashboard pages import toolkit APIs rather than individual implementation files.

Layer	Responsibility
Fluent React v9	Accessible component behavior, keyboard interaction, focus, and base icons
DeckProvider	Deck themes, density, typography, borders, status colors, and Fluent token adaptation
Toolkit primitives	Pages, toolbars, tables, drawers, dialogs, commands, inputs, navigation, notifications, secret values, status, and canvas hosting
Icon registry	Central Aspire name to Fluent regular/filled mapping with explicit fallback contracts
src/components and src/pages	Dashboard workflows composed from toolkit controls
src/api	Mock, Tauri, and ASP.NET transports behind one frontend contract; toolkit controls never fetch data

The toolkit currently includes:

• Page composition: Page, PageHeader, PageHeading, PageTitle, PageSubtitle, PageActions, PageToolbar, and PageBody.
• Data and status: sortable and virtualized DataTable, structured filters, SearchBox, Badge, StateDot, Highlighter, EmptyState, and SecretValue.
• Commands and overlays: Button, IconButton, CommandMenu, argument inputs, ConfirmDialog, Drawer, assistant panels, and NotificationStack.
• Inputs and navigation: Select, Checkbox, Tabs, Accordion, segmented view controls, and Divider.
• Dashboard visualization: resource graph, metric charts, trace hierarchy, GenAI telemetry, interactive terminals, and sandboxed canvases.
• Hosting and themes: DeckProvider, dark/light themes, responsive shell behavior, and Fluent System Icons.

The standalone toolkit playground exercises these controls without dashboard data or transport code. Playwright reviews its accessibility tree as YAML, verifies keyboard and interaction behavior, and captures the visual states.

Side-by-side migration harness

The parity inventory is derived from visible legacy-dashboard behavior and Stress playground scenarios. It currently enumerates 157 dashboard features across the shell, resources, parameters, commands, console logs, structured logs, traces, metrics, authentication, terminals, responsive behavior, settings, notifications, assistant workflows, icons, and canvases.

Every inventory entry records its legacy route and scenario, React implementation status, and React black-box coverage. The ledger currently reports:

• Total features: 157
• React covered: 157
• Partial: 0
• Missing: 0
• Legacy scenarios pending: 0
• React test gaps: 0

This does not mean the migration is ready to ship. It means the known functional surface is enumerated and guarded, so future backend and UX changes have an explicit compatibility baseline. Visual review remains intentional: Playwright records desktop/mobile screenshots, video, traces, and accessibility snapshots, while the old and new dashboards can run against the same AppHost.

User-facing usage

Run the deterministic dashboard and toolkit playground:

cd src/Aspire.Deck/ui
npm run dev

• Dashboard with deterministic mock data: http://localhost:1430/
• Toolkit playground: http://localhost:1430/?view=toolkit

Run React against a live Stress dashboard:

ASPIRE_DASHBOARD_URL=<dashboard-url> npm run dev -- --host 127.0.0.1

Open http://127.0.0.1:1430/?backend=http. The existing dashboard remains available at its normal URL.

Screenshots / Recordings

This PR includes UI changes. These screenshots show the existing and React dashboards against the Stress AppHost, the reusable toolkit, icon contracts, resource details, and responsive behavior.

Existing and React dashboards

Existing Blazor dashboard	React dashboard

Toolkit and icon contract

Toolkit playground	Aspire to Fluent icon mapping

Details and responsive layout

Resource details and secure values	390 px mobile resources

Playwright retains screenshots, videos, traces, and HTML reports under the ignored src/Aspire.Deck/ui/test-results* and playwright-report* directories.

Validation

• npm run build: passed.
• Deterministic React/toolkit Playwright suite: 102 passed.
• Live React Stress Playwright suite: 11 passed.
• Legacy Stress black-box suite: 23 passed.
• Legacy terminal suite: 2 passed.
• Configured-user OIDC profile and sign-out suite: 1 passed.
• Parity inventory: 157 of 157 React features covered, with no partial, missing, pending, or untested entries.
• Internal browser verification covered live resources, exact Fluent icon variants, metric instruments, empty metrics, responsive layout, and browser console errors.

Security considerations

The live frontend contracts use the existing dashboard authorization policies. Resource and telemetry responses can contain sensitive properties, environment variables, or user data, so requests are same-origin authenticated and use Cache-Control: no-store. The Vite proxy is development-only and enabled explicitly with ASPIRE_DASHBOARD_URL. Security review is still required before treating the HTTP transport or a future Native AOT backend as production-ready.

Fixes # (issue)

Checklist

• Is this feature complete?
  • Yes. Ready to ship.
  • No. Follow-up changes expected.
• Are you including unit tests for the changes and scenario tests if relevant?
  • Yes
  • No
• Did you add public API?
  • Yes
    • If yes, did you have an API Review for it?
      • Yes
      • No
    • Did you add <remarks /> and <code /> elements on your triple slash comments?
      • Yes
      • No
  • No
• Does the change make any security assumptions or guarantees?
  • Yes
    • If yes, have you done a threat model and had a security review?
      • Yes
      • No
  • No