[IAmJSD]

On a fresh install (no accounts, no recommendations), Opportunities showed an empty 15-column table with "No rows match these filters.", $0 summary cards and a Purchase bar, and Home showed -- tiles with nothing pointing at connecting an account. This PR tells "nothing loaded" apart from "filtered to zero": the first case gets an onboarding card on Opportunities and Home, and the second keeps the table hint and adds a "Clear filters" button.

Refs #756
Partial: the card shows the last collection time (or a running collection, or the last error) but not the next collection time the issue asks for, because the API has no field for it yet.

What changed

• New frontend/src/first-run-empty-state.ts builds one .empty-state card used on both pages. Copy depends on state:
  • no accounts: "No cloud accounts connected yet" with "Connect a cloud account" for admins (others are told to ask an admin);
  • accounts but no recommendations: "No opportunities yet" with "Refresh recommendations" and "Manage cloud accounts";
  • topbar provider/account filter active: explains the empty scope.
    It also shows the last collection time, a running collection, or the last collection error from GET /api/recommendations/freshness.
• frontend/src/recommendations.ts: renderRecommendationsList shows the card when nothing loaded and no column filter is set, and hides the summary cards, filter bar and action box (they are still rendered, so state is correct once rows arrive). When filters leave zero rows, the old hint stays and gets a "Clear filters" button. A shared clearAllColumnFilters re-fetches when a server-pushed-down column (service, region, account) was filtered; the existing Clear filters badge uses it too.
• frontend/src/dashboard.ts and index.html: loadDashboard also fetches the minimal account list (a failure is treated as unknown) and fills a new #home-onboarding section above the KPI tiles when no recommendations loaded and nothing is committed.
• frontend/src/app.ts injects the Admin > Accounts navigation (same switchTab + switchSettingsSubTab pattern as the RI Exchange settings shortcut).
• Small CSS in styles/base.css and styles/layout.css for the action row and spacing.
• Tests: __tests__/first-run-empty-state.test.ts, __tests__/recommendations-first-run.test.ts, __tests__/dashboard-onboarding.test.ts, tests-e2e/first-run-empty-state.spec.ts; recommendations.test.ts and tests-e2e/recommendations.spec.ts updated.

Why this approach

"Nothing loaded" is distinguished from "filtered to zero" by the loaded count plus whether any column filter is set. A pushed-down service or region filter can make the loaded count 0, so it must not trigger onboarding. The Purchase bar and $0 cards are hidden rather than removed, which keeps the existing permission-gating code and tests valid. Account presence comes from the existing /accounts/list, so no new endpoints are needed, and a failed account fetch is treated as unknown so nobody is told "no accounts" because of a transient error. Navigation is injected from app.ts because navigation.ts already imports dashboard and recommendations; importing it would create a cycle and pull the whole navigation graph into jest suites that mock those modules.

Screenshots

Before is main (a14dc8f2), after is this branch. Both are headless Chromium at 1440x900 against the repo's mocked e2e API, with accounts [] and recommendations [] for the first-run views.

Before	After

• Opportunities, first run: on main, an empty 15-column table, "No rows match these filters.", $0 cards and the Purchase bar. On this branch, an onboarding card with the last collection time and "Connect a cloud account"; the table, cards and Purchase bar are hidden.
• Home, first run: on main, only -- tiles and empty charts. On this branch, the same onboarding card above the KPI tiles.
• Filtered to zero (Count > 100000): on main, a hint with no action. On this branch, the same hint with a "Clear filters" button.

Verification

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

• npm run lint: 0 errors (142 pre-existing warnings). Typecheck and build pass.
• Jest (--maxWorkers=2): 112 suites, 3514 passed, 1 skipped, 0 failed. The 3 new suites (28 tests: 15 + 7 + 6) also pass with --randomize.
• Playwright via e2e-local.sh: 159 passed, 1 failed (the recommendations.spec zero-result test expected the exact old hint text). That spec was updated to expect the new Clear filters button, and recommendations.spec was re-run: 4/4 passed. The 3 new e2e tests cover the Opportunities card with "Connect a cloud account" landing on /admin/accounts, the Home card, and filtered-to-zero Clear filters.
• Secrets scan clean (planted key flagged); scripts/test-git-secrets-allowlist.sh: 137 PASS, 0 FAIL.

Notes for review

• New copy to approve: headings "No cloud accounts connected yet", "No opportunities yet", "No opportunities for the selected provider or account"; buttons "Connect a cloud account", "Manage cloud accounts", "Refresh recommendations".
• Backend follow-up: the issue asks for the next collection time, but the freshness endpoint only has last_collected_at, last_collection_started_at and last_collection_error, and collection_schedule is just a word such as "daily". A next-run time needs a backend field.
• On a first run Opportunities hides the summary cards, filter bar and Purchase/Plan bar; the AWS lookback selector stays visible.
• Behavior change: the Clear filters badge now re-fetches when a pushed-down service/region/account filter was active. It used to only re-render, which left the narrowed data loaded.
• Home shows the card only when the recommendations fetch succeeded with zero rows and active_commitments is 0, so a failed fetch never shows onboarding. If the enabled_providers setting hides every row, the card says "No opportunities yet".
• "Connect a cloud account" follows the RI Exchange shortcut pattern: if the Accounts sub-tab was already open earlier in the session, the URL may not update (same edge case as that shortcut).
• recommendations.ts and app.ts were already far over the 500-line rule, so the new logic is in its own module.

Overlaps

• fix(frontend): Potential Monthly Savings differs between Home and Opportunities for the same recommendations #180 and fix(frontend): getUpcomingPurchases declares an array but the API returns { purchases } #1189 change loadDashboard / renderDashboardSummary in dashboard.ts; fix(frontend): three money formatters, mixed placeholders, left-aligned money columns #739 changes renderDashboardSummary.
• fix(frontend): Potential Monthly Savings differs between Home and Opportunities for the same recommendations #180 and fix(frontend): Enter on a column-filter button sorts instead of opening the filter #755 change renderRecommendationsList in recommendations.ts.
• fix(frontend): an init() failure strands the app on the Home markup with no listeners and no visible error #206 changes app.ts init near where the accounts navigator is registered.
• feat(frontend): de-duplicate the Purchases approval surface (Approval queue repeats Purchase History rows) #183, fix(frontend): "Potential savings range per service" legend and bar-color encoding mismatch #189, fix(frontend): a group holding a blank permission resource cannot be saved at all, with no explanation #213, fix(dashboard): Home 'All' range toggle truncates history at 365 days but is labeled 'All' #52, feat(frontend): Load more on the History view, Approval Queue from all loaded pages #676, fix(frontend): filter Clear hides all rows; user/group form validation toast-only #727, fix(frontend): low-severity copy, toast, confirm and stale-state fixes #728, fix(frontend): low-severity accessibility fixes (focus, aria, target size) #729, fix(frontend): ARIA tab pattern has no keyboard model and route changes keep focus #730 and fix(frontend): purchases savings chart uses two y-axes and shadows formatCurrency #749 edit index.html; this branch adds one section at the top of #home-tab.
• chore(frontend): add typography foundation (line-height, heading scale, font inherit) #741 and fix(frontend): undefined CSS custom properties and inline-styled MFA panels #745 edit styles/base.css.
• chore(frontend): standardize loading indicators and add slow/empty fallbacks #186 (standardize loading and empty fallbacks) builds on the same empty-state pattern.

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]

Warning

Review limit reached

• Run on-demand review

_{This review includes 13 billable files and costs up to $3.25.}

Or wait 59 minutes for your next included review.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

Learn how review limits work.

Review configuration:

Run configuration

• Source mode: Auto
• Repository: LeanerCloud/cloud-commitments-platform
• Branch: main
• File: .coderabbit.yaml
• Commit: 19534fc
• Layers: Repository YAML
• Review profile: CHILL
• Plan: Advanced
• Run ID: e6b06ffa-37ac-4d43-8320-9a000145ce00

Commits

Reviewing files that changed from the base of the PR and between 19534fc and 378a072.

Files selected for processing: 13

• frontend/src/__tests__/dashboard-onboarding.test.ts
• frontend/src/__tests__/first-run-empty-state.test.ts
• frontend/src/__tests__/recommendations-first-run.test.ts
• frontend/src/__tests__/recommendations.test.ts
• frontend/src/app.ts
• frontend/src/dashboard.ts
• frontend/src/first-run-empty-state.ts
• frontend/src/index.html
• frontend/src/recommendations.ts
• frontend/src/styles/base.css
• frontend/src/styles/layout.css
• frontend/tests-e2e/first-run-empty-state.spec.ts
• frontend/tests-e2e/recommendations.spec.ts

• 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 378a072bc02e391c33724ec9c9792c3f1c2ac4ac

Blocking:

• none
  Non-blocking:
• frontend/src/dashboard.ts:187 and :242: the error path in loadDashboard (summary rejected or empty) never touches #home-onboarding. Scenario: a first-run load shows the card, then a refresh fails on /dashboard/summary. The old onboarding card stays visible above "Failed to load dashboard: ...". Hiding it in the catch would fix this.
• frontend/src/first-run-empty-state.ts:106: role="status" sits on the whole card, and the card is rebuilt on every renderRecommendationsList (each rerender also refetches /freshness, :121). Every client-side rerender while empty can re-announce the whole card. Putting the live role on the freshness line only would be quieter.
• frontend/src/styles/base.css:236: .empty-state p + p also applies to main's init-error card (fix(frontend): show an error state when init() fails, not a silent Home #1338, init-error.ts). There is no visual change today because it is the same 0.5rem as its .mt-2, but the rule is not scoped to the first-run card.
  Attacked: The two-dot and three-dot diffs vs origin/main are identical (tree = main + PR). All 3 merges conflicted only in the app.ts import block, and main's setupMobileNav (refactor(frontend): move mobile nav and header projection to a module #1340), initPurchasingNav (feat(frontend): add section links and collapsed grids to Purchasing #1336) and renderInitError (fix(frontend): show an error state when init() fails, not a silent Home #1338) are intact. Checked against current main: the chrome ids (recommendations-summary, filter-status, action-box) still exist, and switchSettingsSubTab('accounts') still admin-gates. renderRecommendationsList puts the firstRun branch after main's column-filter seeding and summary render. The pushed-down column filter keeps the filtered hint. The modified main tests (recommendations.test.ts empty-state, recommendations.spec zero-result) are narrowed to the first-run case, not loosened, and the fix(frontend): per-service savings chart colors change with rank and legend mismatches #700 hint is still asserted for filtered-to-zero. XSS: the freshness error goes through textContent only. Jest dashboard-onboarding, first-run-empty-state, recommendations-first-run, recommendations, dashboard and init-error: 591 passed, 1 skipped.

[IAmJSD]

Local verification at 378a072b merged onto current main (bb564dd5; merge-tree 529247b8; 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 ab77aa6e, main plus 5 PRs) passes npm ci, lint, typecheck, build, jest (1 skipped, 4248 passed, 4249 total), and the full Playwright suite (247 passed).
• CI is green on 378a072b (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 378a072b.