feat(frontend): UI revamp — restructure IA + visual reskin to action-center pattern

[cristim]

Summary

Restructure the CUDly frontend information architecture and reskin to the action-center pattern shown in the mocks (~/Desktop/CUDly UI Revamp/). Frontend-only — no backend or API changes.

Status (2026-05-12): Initial PR landed in #343 ships the foundation, IA restructure, and visual reskin. Sub-tasks needing backend support remain open below.

Current → Proposed IA

Today's tab	New section	Notes
Dashboard	Home	Reorganized as action center: KPI tiles with sparklines, savings pipeline, recent actions, coverage donuts
Recommendations	Opportunities	Renamed; gets an inline side-panel "plan builder"
Purchase Plans	Plans	Renamed; main execution surface
Purchase History	Purchases	Approvals + execution + history unified
RI Exchange	(folded into) Inventory & Coverage	New umbrella section — active commitments + coverage trends + RI exchange + renewals
Settings	Admin	Split into 4 sub-tabs: General · Purchasing policies · Accounts & onboarding · Users/roles & API keys

Design principles (from mocks)

• Action-first — primary action button at the right where users expect it
• End-to-end workflow — Discover → Plan → Approve → Execute → Manage
• Shared filters — global filter bar applied consistently across views
• Clear states — visible empty / loading / active states for every surface
• Scalable admin — role-based separation of governance from daily work

Visual reskin

Adopt the mocks' visual language (option 3b — "reasonable match, not pixel-close"):

• Light/white surfaces with blue accent header
• Card-grid layouts with consistent spacing
• KPI tiles with sparklines
• Donut charts for coverage breakdowns
• Right-side context drawers for plan-builder / details flows
• Status pills with consistent semantics

Shipped in PR #343

• Top-bar + left-sidebar shell (replaces top tabs)
• 6-section IA: Home · Opportunities · Plans · Purchases · Inventory & Coverage · Admin
• Inventory & Coverage umbrella folding RI Exchange + placeholder Active commitments + Coverage sub-sections
• Admin 4 sub-tab relabels (Purchasing → Purchasing policies, Accounts → Accounts & onboarding, Users & API Keys → Users, roles & API keys)
• URL backwards-compat (LEGACY_PATH_REDIRECTS): /dashboard, /recommendations, /history, /settings/*, /ri-exchange keep resolving
• Design-token CSS variables (:root in base.css) + migration of base/layout/tabs/plans/settings/tables/forms/modals/components.css to consume them
• Lucide-style inline-SVG icons for sidebar (ISC license, no new dep)
• Home: DOM-built KPI tiles + inline-SVG sparkline on YTD Savings tile
• Collapsible sidebar with localStorage persistence (cudly_sidebar_collapsed)
• Status pills (.status-badge, .status-chip) already in place on Plans / Purchases — verified
• Coverage parity preserved (80.7% stmts, 82.38% lines vs 80.65 / 82.31 baseline)
• +11 new tests (5 inventory + 6 sparkline)

Sub-tasks (deferred — skipped widgets needing backend work first)

These widgets appear in the mocks but have no current backend support. Skipped silently in #343; track here so we don't lose them.

• Home — Onboarding & setup guidance checklist (needs: signup/federation/accounts/recommendation state machine surface in API)
• Home — Operational at-a-glance upcoming events feed (needs: scheduled-actions feed API)
• Home — sparklines for Potential Savings / Active Commitments / Current Coverage tiles (need: per-tile time-series data; only YTD has cumulative_savings today)
• Opportunities — full right-side "Plan builder" drawer (CSS hook .context-drawer in place; needs recommendations.ts restructure to wire the drawer)
• Opportunities — "Compare across payment options" side widget (needs: per-option comparison data per rec)
• Opportunities — Set targets / compare to baseline (needs: target/baseline storage)
• Plans — Approvals & blockers timeline (needs: blocker tracking + approval state machine)
• Plans — Plan health score widget (needs: health-scoring algorithm)
• Purchases — Audit timeline / search audit (needs: durable audit log + indexed search)
• Inventory & Coverage — Active commitments per-commitment list (needs: listActiveCommitments-style API)
• Inventory & Coverage — Per-provider coverage donuts (needs: getCoverageByProvider-style API)
• Inventory & Coverage — Underutilization detection (needs: utilization metrics aggregation)
• Inventory & Coverage — Renewal-risk alerts (needs: renewal date tracking + alerting)
• Inventory & Coverage — Proactive RI exchange suggestions (needs: exchange-opportunity detection)
• Admin — API keys usage stats / per-key health (needs: per-key activity tracking)
• Admin — Approval ownership matrix (needs: per-user approval-rights data model)
• Admin — Federation setup guided wizard (we have federation; guided-step UX is new)
• Admin — Per-provider purchasing policy defaults UI (needs: full provider-policy data layer)
• Top bar — global search/filter pills (mocks show provider/account in top bar; today still per-section — UX shift, no data work needed)

Acceptance criteria

• New 6-section IA replaces the current 6-tab nav
• All current functionality remains reachable through the new IA (nothing lost in the reorg)
• Visual reskin applied consistently across all sections
• Every widget rendered has live backend data — no placeholder data
• No backend / API / handler / IaC / Terraform changes — frontend-only
• Existing tests still pass; new tests for navigation/routing changes
• Manual smoke test of every section in the browser

Out of scope

• Backend or API changes of any kind
• Mobile responsiveness (mocks are desktop; keep current responsive level)
• Pixel-perfect match to mocks (we aim for "reasonable match")
• The deferred sub-task widgets above (filed for later)
• Authentication, payment, or pricing changes

Reference

Design mocks: ~/Desktop/CUDly UI Revamp/ (14 PNGs, ChatGPT-generated, May 6-7 2026)

PR: #343