feat(frontend): UI revamp phase 2 — drawer + skeletons + global filters + popover chips

[cristim]

Summary

UI Revamp Phase 2 — the 4 disruptive frontend-only items that were deliberately deferred from PR #343 because they need substantial refactoring rather than CSS-level polish. Each is mock-aligned and ships a meaningful UX upgrade.

Continuation of #340 / PR #343

PR #343 landed the action-center reskin, IA restructure, design tokens, focus rings, empty-state polish, filter chip styling, page heroes, a11y additions, and 22 commits of frontend-only polish. The four items in this issue were explicitly deferred at merge time because each required either (a) restructuring a large file (recommendations.ts is 4075 lines) or (b) touching every fetcher / every section's filter wiring. PR #343 left the foundations in place (the .context-drawer CSS hook, the design-token vocabulary, the :root semantic colour set), and this issue picks up where it left off.

The other categories of follow-up work from #343/#340 that this issue is NOT picking up:

• Backend-dependent items (Onboarding checklist, Coverage donuts, Audit timeline, Active commitments table, Federation guided wizard, etc.) — still tracked in feat(frontend): UI revamp — restructure IA + visual reskin to action-center pattern #340's sub-task checklist.
• Design-token vocabulary expansion — ~76 niche hex literals still in the bundle; would migrate to semantic tokens once their roles repeat across more surfaces.
• Smaller polish items (more .page-hero applications, freshness-badge placement, date-input calendar icon styling) — discovery notes only; can pick up opportunistically.

Scope (4 work items)

1. Right-side "Plan-builder" drawer on Opportunities

Replaces the sticky-bottom recommendations-action-box with a slide-in right drawer when ≥1 recommendation is selected. The drawer shows the selected rec summary, payment-option comparison (where data permits), capacity slider, and the Purchase / Create Plan buttons. Matches the mock's "context drawer" pattern (.context-drawer CSS hook from #343).

Touches: frontend/src/recommendations.ts (~4075 lines — careful surgery), frontend/src/index.html, frontend/src/styles/components.css, plus tests.
Risk: HIGH. Largest file in the frontend; purchase flow + plan-creation + multi-account + payment-option logic all live there.

2. Loading skeletons across data fetchers

Replaces plain "Loading…" text with shimmer skeleton placeholders that match the eventual content shape. Applied to: Home KPI tiles + chart, Opportunities table, Plans list, Purchases history, Inventory RI Exchange lists.

Touches: dashboard.ts, recommendations.ts, plans.ts, history.ts, riexchange.ts, plus frontend/src/styles/base.css for the .skeleton shimmer animation.
Risk: MEDIUM. 5 modules each need a skeleton render path before the data lands and a teardown when data arrives. Regression surface: every empty-state and slow-network case.

3. Global filter relocation to top bar

Moves the provider + account dropdowns out of per-section controls (#dashboard-controls, #plans-header, etc.) and into a single shared filter strip in the app top bar. state.ts already shares currentProvider + currentAccountIDs, so the underlying state model doesn't change — only the DOM ownership.

Touches: index.html (top bar + section header restructure), dashboard.ts / plans.ts / history.ts / recommendations.ts (filter wire-up), state.ts (re-export change handler), tests.
Risk: MEDIUM. UX shift — users currently used to filters per-section may need to relearn. State persistence already works.

4. Custom popover filter chips

Replaces native <select> filter elements with custom chip-button-with-popover components. Visual: clicking a chip opens a menu below it (vs the native dropdown). Includes search filtering inside the popover for accounts (when there are many).

Touches: New frontend/src/lib/chip-select.ts component (~150 lines), index.html filter HTML, forms.css filter rules (delete the native-pill style), tests.
Risk: LOW–MEDIUM. New JS component pattern but isolated; doesn't touch business logic.

Strategy

4 separate PRs in sequence under this tracking issue, not one mega-PR. Each PR is reviewable on its own and can be reverted without affecting the others. Order:

1. PR 1 — Custom popover filter chips (lowest risk, isolated). Lands the chip-select component pattern.
2. PR 2 — Global filter relocation (uses Update Deployment Model to Terraform #1's chip-select for the new top-bar filter). Touches multiple section files but each change is mechanical.
3. PR 3 — Loading skeletons (independent of Update Deployment Model to Terraform #1/Setup CI/CD Process #2; orthogonal layer). Lands skeleton CSS + per-fetcher integration.
4. PR 4 — Plan-builder drawer (highest risk, isolated to Opportunities). Lands last so the rest of the IA polish is stable underneath.

Each PR rebases on the prior merge. If a PR hits a snag in review, the others aren't blocked.

Acceptance criteria (per work item)

• All four items merged to feat/multicloud-web-frontend.
• Test coverage parity preserved (no regression vs the post-feat(frontend): UI revamp — IA restructure + action-center reskin (closes #340) #343 baseline of 80.7% statements / 82.4% lines).
• Bundle size within ±10% of the post-feat(frontend): UI revamp — IA restructure + action-center reskin (closes #340) #343 baseline.
• No backend / API / handler / IaC / Go-side changes.
• Manual browser smoke per PR confirms no regression on the touched flows.

Out of scope

• Backend-dependent items still in feat(frontend): UI revamp — restructure IA + visual reskin to action-center pattern #340's deferred sub-task list (onboarding checklist, coverage donuts, audit timeline, etc.). Those need data layer work first.
• Mobile responsiveness beyond current desktop ≥ 1024px experience.
• Theming / dark mode (could come later once the token vocabulary is stable).
• Design-token vocabulary expansion for the ~76 niche literals remaining (separate scope).

Reference

• Mocks: ~/Desktop/CUDly UI Revamp/
• Parent: feat(frontend): UI revamp — restructure IA + visual reskin to action-center pattern #340 (closed via feat(frontend): UI revamp — IA restructure + action-center reskin (closes #340) #343)
• Design tokens: live in frontend/src/styles/base.css :root
• .context-drawer CSS hook: frontend/src/styles/components.css (already in place from feat(frontend): UI revamp — IA restructure + action-center reskin (closes #340) #343)
• Plan file: ~/.claude/projects/.../plans/issue-344-ui-revamp-phase2.md