[IAmJSD]

A failed RI exchange showed only a red failed badge in Exchange History, so operators had to read backend logs to find out why no money was spent. The target picker's option labels were also escaped twice, so any &, < or quote rendered as an entity. This PR shows the stored AWS error under the badge and assigns the raw labels. The third finding, A12-066 (the "type a UUID" copy with no UUID field), is already fixed on main by #1377.

Closes #321

What changed

• frontend/src/riexchange.ts: renderExchangeHistory adds a <div class="status-detail"> with the escaped rec.error under the status badge whenever the record has an error (A12-069).
• frontend/src/riexchange.ts: the AWS-offering and Cost Explorer alternative option labels in openExchangeModal now assign the raw strings to textContent; both escapeHtml calls are removed (A12-067).
• frontend/src/styles/components.css: .status-detail shares the muted small subline style of .history-approver (the line Purchase History shows under its status badges) and adds max-width: 18rem and overflow-wrap: anywhere so long AWS errors wrap.
• New frontend/src/__tests__/riexchange-audit-321.test.ts.

Why this approach

• The error is visible text rather than a title tooltip (the issue's other option): tooltips are hard to discover, unreachable by keyboard and invisible on touch screens. It also matches how Purchase History shows a failed execution's error under its badge.
• The reason goes through escapeHtml because the history table is built as an HTML string.
• The tests live in a new small file instead of growing riexchange.test.ts (about 1400 lines).

Screenshots

Screenshots were taken before this branch was merged with main; before = main at a14dc8f. After is this branch. Both are headless Chromium at 1440x900 against the repo's mocked e2e API.

Before	After

Exchange History with one failed record carrying an AWS error and one completed record. Before: the failed row shows only a failed badge, with no reason. After: the AWS error (AcceptReservedInstancesExchangeQuote: InvalidParameterValue: ...) appears under the badge and wraps without squeezing the other columns.

Verification

Run on this branch's head 38bd2768:

• Merged with main at 5b52c4e; conflicts in frontend/src/riexchange.ts resolved, see the merge commit.
• npm run lint: 0 errors. Typecheck and build pass.
• Jest: 3867 of 3868 passed, 1 skipped.
• New riexchange-audit-321.test.ts (4 tests): AWS offering label keeps &, quotes and <> with no &; CE alternative label is not pre-escaped; a failed record shows its error as text (markup in it is not rendered) under the failed badge; a record without an error gets no detail line. 3 of the 4 fail on main. Before the merge, the file passed with --randomize.
• Playwright (e2e-local.sh): 200 passed.
• Secrets scan clean (planted key flagged); scripts/test-git-secrets-allowlist.sh: 137 PASS.

Notes for review

• A12-067 and A12-069 are done here; A12-066 is done on main via fix(frontend): give the RI exchange target picker a Retry on failure #1377.
• Visual: the error is shown in full as muted small text under the badge, capped at 18rem wide; long AWS messages wrap over 2-3 lines.
• No screenshot for A12-067: real AWS instance and offering types never contain &, < or quotes, so the double escaping only shows with made-up data. Jest covers it.

Overlaps

• fix(frontend): status badges use four shapes and conflicting colors per status #737 replaces the same history status cell line with statusBadgeHtml(rec.status): expect a one-line conflict; keep its badge and append errorLine.

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 3 billable files and costs up to $0.75.}

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: 5b52c4e
• Layers: Repository YAML
• Review profile: CHILL
• Plan: Advanced
• Run ID: 06b601f0-dd5d-41a0-bead-64d312458fce

Commits

Reviewing files that changed from the base of the PR and between 5b52c4e and 38bd276.

Files selected for processing: 3

• frontend/src/__tests__/riexchange-audit-321.test.ts
• frontend/src/riexchange.ts
• frontend/src/styles/components.css

• 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 38bd2768336655743046e46c12e05ad5d3089b67

Blocking:

• none
  Non-blocking:
• frontend/src/riexchange.ts:1141: the comment "(no HTML injection: all fields from API)" now sits above a plain textContent assignment. Drop it or reword it so nobody takes this list for an HTML sink again.
• frontend/src/tests/riexchange-audit-321.test.ts:98: statusCell() picks the status cell by position (td[4]). A new column before Status would make it read the wrong cell. That failure would be loud, not a false pass.
• origin/main is 8 commits past the merge base 5b52c4e, including fix(frontend): give the RI exchange target picker a Retry on failure #1377 and fix(frontend): keep the RI exchange reshape empty-state count current #1395, which both touch riexchange.ts. git merge-tree origin/main HEAD is clean and adds exactly this PR's 3 files.
  Attacked: git diff merge^2 merge matches the branch's own 3-file diff exactly. All of main survived: formatOfferingCost(alt) (fix(frontend): show RI exchange offering costs in their own currency #1343), the em dash for an empty payment_due (fix(frontend): RI-exchange cost chips and totals hardcode "$" and discard currency_code #284), the column-filter-popover rework (refactor(frontend): share one column-filter popover across Plans and RI #1315) and the getStatusBadgeClass canceled/cancelled cases. The only main code removed is the escapeHtml inside two textContent assignments, which is the point of the PR. rec.error is escaped in its HTML-string sink (riexchange.ts:1995-1997, 2008), the history type has error?: string, there are no inline styles, and .status-detail only adds max-width/overflow-wrap.
  Jest: the riexchange suites at HEAD passed (9 suites / 135 tests). HEAD merged with current main: riexchange + css + ui-polish passed (12 suites / 364 tests). The new tests fail meaningfully on main.

[IAmJSD]

Local verification at 38bd2768 merged onto current main (2433f6dd; merge-tree f99b971c; 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 dc090cc2, main plus 17 PRs) passes npm ci, lint, typecheck, build, jest (1 skipped, 4097 passed, 4098 total), and the full Playwright suite (232 passed).
• CI is green on 38bd2768 (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 38bd2768.