[IAmJSD]

The Opportunities summary cards were hand-built .card innerHTML while Home used the .kpi-tile component, so the same kind of KPI looked different on the two pages. Card styles disagreed on border and shadow, and each of the four dialog systems (.modal, .modal-overlay, confirmDialog, the Archera offer) had its own scrim, radius, shadow and z-index literal. This PR reuses the kpi-tile on Opportunities and puts every card and dialog panel on one shared surface through tokens.

Refs #743
Partial: the shared .dialog component with a header row and close button, and merging the four JS modal systems into one implementation, are not done (they need edits to about 20 dialogs and their close wiring).

What changed

• 9b7ca8e4: new frontend/src/lib/kpi-tile.ts (buildKpiTile/renderKpiTiles, textContent only). dashboard.ts renderDashboardSummary uses it, replacing a 23-line hand-built loop with identical markup (sparkline slot included). recommendations.ts renderRecommendationsSummary uses it instead of innerHTML (data-kpi count / savings / upfront / payback). The card/value/savings classes are kept, so existing selectors and tests still work.
• 03fe2ef6 (CSS):
  • styles/base.css adds --cudly-scrim, --cudly-shadow-dialog and a named z-index ladder (--cudly-z-modal 1000, -modal-raised 1050, -page-overlay 1100, -confirm 2000, -toast 2100). The values are unchanged, so the stacking order is the same and a confirm still opens above any modal.
  • .card is now 1px --cudly-border + --cudly-shadow-sm + --cudly-r-md + --cudly-surface. .kpi-tile inherits that instead of redefining it, and .plan-card, .group-card and .upcoming-card match it (.upcoming-card keeps its 4px blue left accent). .stat-card stays a borderless muted inset tile.
  • .modal, .modal-overlay, .modal-confirm-backdrop and .archera-offer-backdrop use the scrim; .modal-content, .modal-confirm and .archera-offer-panel use --cudly-r-lg (12px, matching the existing mobile bottom-sheet corners) and the dialog shadow. All dialog and toast z-indexes use the tokens.
• e1fa861e: tests-e2e/surfaces.spec.ts. Plus new jest files kpi-tile.test.ts, recommendations-kpi-tiles.test.ts and surface-css.test.ts.

Why this approach

This is the subset that fixes what users see without rewriting dialog markup: one tile component, one card surface and one dialog surface, all through tokens. The z-index values keep their order on a named ladder rather than being collapsed, since a confirm must still open above a modal. The dialog shadow is a new --cudly-shadow-dialog rather than the suggested --cudly-shadow-lg, because shadow-lg (0.08 alpha) disappears over a 50% scrim. The scrim is a slate tint (15, 23, 42) matching the existing shadow tokens instead of pure black. .stat-card keeps its borderless fill because it sits inside a card, and a border there would draw a box inside a box. The tile builder lives in lib/ so recommendations.ts (5,700 lines) and dashboard.ts share one implementation.

Screenshots

Before is main (a14dc8f2), after is this branch. Both are headless Chromium at 1440x900 against the repo's mocked e2e API.

Before	After

• Home tiles (top) vs Opportunities cards (bottom): different title weight, value size, padding and border on main. After, Opportunities uses the same kpi-tile and the two rows match.
• New Plan modal: 8px corners, flat panel, black 0.5 scrim on main. After, 12px corners, dialog shadow and slate scrim, the same as the confirm dialog (subtle; look at the corners).
• Delete-plan confirm: 8px corners, its own heavier shadow, black 0.45 scrim, and the plan card behind has no border. After, the same radius, shadow and scrim as the New Plan modal, and the plan cards behind have the shared hairline border.

Verification

Run on this branch's head e1fa861e on top of main a14dc8f2:

• Lint: 0 errors (142 warnings, all in existing files). Typecheck and build pass.
• Jest: 112 suites, 3519 passed, 1 skipped. New tests pass with --randomize (33). New: kpi-tile.test.ts (5: full tile, optional parts, empty detail, text-not-markup, render order), recommendations-kpi-tiles.test.ts (2: the Opportunities summary is four .kpi-tile cards with the expected titles and data-kpi; only savings is green), surface-css.test.ts (26: tokens defined, z-ladder order, every scrim/dialog panel/z-index/card surface uses the shared tokens).
• Playwright: 159 passed, including the new surfaces.spec.ts (2: computed styles of the first Home and Opportunities tiles match on border, radius, shadow, padding, background and title/value type; the New Plan modal and the Delete-plan confirm share scrim, 12px radius and shadow).
• git-secrets scan clean (planted key flagged); scripts/test-git-secrets-allowlist.sh: 137 pass.

Notes for review

• Biggest visible change: every .card in the app now has a 1px hairline border and a lighter shadow (the old one was 0 2px 4px at 0.1 black). Worth looking over the Admin, Plans and Purchases cards.
• Opportunities tiles now use Home's muted 14px medium titles instead of bold dark titles, and have no detail line, so they are slightly shorter than Home's.
• Dialog corners go from 8px to 12px, and the scrim is a slate tint at 0.5 (confirm and Archera used 0.45 black).
• --cudly-shadow-dialog is a new token; the issue suggested reusing shadow-lg.
• Left out: (a) one .dialog component with a shared header row and close button. Only confirmDialog has an X today; adding one to every .modal means editing about 20 dialogs in index.html and TS, plus close wiring. (b) Merging the four JS modal systems (modal.ts openModal, confirmDialog.ts, the Archera offer, the auth/plans .modal-overlay variants) into one implementation.

Overlaps

• chore(frontend): UI polish backlog from the 2026-08 UX review #191 also restyles #recommendations-summary and #summary (grid columns in layout.css/tables.css) on different lines; together they give balanced 2x2 kpi tiles.
• fix(frontend): Potential Monthly Savings differs between Home and Opportunities for the same recommendations #180 edits renderRecommendationsSummary's innerHTML template (adds a "Filtered: N of M" detail <p>), which conflicts with the switch to renderKpiTiles. Resolve by passing that text as the savings tile's detail.
• fix(frontend): three money formatters, mixed placeholders, left-aligned money columns #739 edits the dashboard tile loop that moved into lib/kpi-tile.ts (an absent value should not be green). Its condition valueSavings && value !== NO_VALUE needs to move into buildKpiTile or into the callers' specs.
• chore(frontend): low-severity table and CSS hygiene fixes #725 changes transition lines in .plan-card/.upcoming-card/.kpi-tile and modals.css; adjacent, should merge cleanly. chore(frontend): add typography foundation (line-height, heading scale, font inherit) #741 changes font-size/weight lines in modals.css and components.css; no shared lines. fix(frontend): dialogs bypassing openModal lack focus handling, Escape and alert roles #731 routes more dialogs through openModal, which is complementary.

Those PRs will be opened alongside this one and merged in sequence, with conflicts resolved on the later branch.

Note for the UI owner

This changes UI code that @cristim owns. IAmJSD reviewed the before/after screenshots and asked for it to be merged; any design point you disagree with can be a follow-up.

🤖 Generated with Claude Code

[coderabbitai]

Caution

Review failed

The pull request is closed.

Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

_{Comment @coderabbitai help to get the list of available commands.}

[IAmJSD]

Independent review (IAmJSD's agent, fresh context, given only the diff, the issue and the PR text): APPROVE 66f68acc2af6ed165c002eda4ed285270e05fb7a

Blocking:

• none
  Non-blocking:
• frontend/src/dashboard.ts:318-324: renderDashboardSummary still declares its own inline tile type ({kpi,title,value,valueSavings?,detail}), which duplicates KpiTileSpec from lib/kpi-tile.ts. Typing tiles as readonly KpiTileSpec[] would leave one definition.
• frontend/src/styles/components.css:72-79: Opportunities tiles now also get the .kpi-tile hover lift and shadow-md, although they are not interactive. Home already had this. It makes static figures look clickable on both pages, so it could be a follow-up.
• Behaviour change brought in by the b34340f resolution: the guard value !== NO_VALUE now lives in buildKpiTile, so the Opportunities savings tile showing NO_VALUE is neutral, where main colours it green. This is correct (fix(frontend): three money formatters, mixed placeholders, left-aligned money columns #739's intent) and covered by kpi-tile.test.ts. recommendations-kpi-tiles.test.ts does not exercise the Opportunities NO_VALUE path, though, and the PR body does not mention the change.
• Remaining literal z-indexes (components.css:732 column-filter popover 1000, :950 column-visibility popover 1200, :1365 tooltip 1000) and the drawer scrim (responsive.css:104 rgba(0,0,0,0.4)) predate this PR and sit outside the dialog ladder. A popover at 1200 renders above .modal (1000) and the Archera page (1100). This is pre-existing and not a regression.
  Attacked: Read the full origin/main...HEAD diff (main 049c617 == merge base). Remerge-diffed all five merges: 3ded379, b34340f and 83e9ba9 had import-only conflicts plus b34340f's renderDashboardSummary body. In that body, main's fix(frontend): three money formatters, mixed placeholders, left-aligned money columns #739/fix(frontend): one money formatter and placeholder, right-align money #1376 NO_VALUE guard was moved into buildKpiTile intact, so nothing from main was dropped. fc0882a and 66f68ac were clean. Checked that every Opportunities formatter (formatScaledRange, formatSavingsRange, formatPaybackRange, NO_VALUE) returns plain text, so the move from innerHTML to textContent shows no raw entities. Checked .card .value/.card h3 specificity against .kpi-tile-value, the #recommendations-summary grid rules, .upcoming-card border-left ordering after the new border shorthand, every z-index and scrim literal left in CSS, and that loadYtdSparkline still finds the YTD spark slot. Ran kpi-tile, recommendations-kpi-tiles, surface-css and dashboard jest suites in a scratch worktree: 159 passed, 1 skipped.

[IAmJSD]

Local verification at 66f68acc merged onto current main (049c617f; merge-tree c94e793d; Linux, Node, headless Chromium):

• This branch's own checks passed at this head: lint, typecheck, build, the full jest suite, the full Playwright e2e suite, and the git-secrets checks (see Verification in the PR body).
• The combined tree of every UI PR in this merge wave (tree 22a093f5, main plus 5 PRs) passes npm ci, lint, typecheck, build, jest (1 skipped, 4374 passed, 4375 total), and the full Playwright suite (259 passed).
• CI is green on 66f68acc (CI Success, Run pre-commit hooks).
• The independent review above approves this exact head.
• Nothing was applied to any cloud.

[IAmJSD]

Marked ready and merged by IAmJSD's agent, at IAmJSD's request (IAmJSD reviewed the before/after screenshots; cristim is traveling), after the independent review and local verification above, all at 66f68acc.