[IAmJSD]

#781 already made the Execute now and Run now confirms show what is bought, for which account, term and payment option, and the amounts. Main (#1364/#711) now also gives the bulk "Send N bulk purchases for approval?" confirm the commitment summary, with one line per commitment and its account. Two gaps remained against #707: the bulk confirm did not say that its totals cover every request, and its button ("Send all for approval") did not carry the amount, unlike the single-purchase confirm. This PR closes both.

Closes #707

What changed

• frontend/src/app.ts: handleFanOutExecute builds the summary lines with main's commitmentLine, as before, and computes commitmentTotals over them. The confirm button now uses the shared executeConfirmLabel(false, totals.upfront), so it reads "Send for Approval ($X upfront on approval)", the same as the single-purchase confirm. The intro gains one sentence: "Totals below are across all requests."
• Tests: new case "bulk approval confirm states the totals across all buckets (fix(frontend): Execute now and Run now confirms show no amount or account #707)" in purchase-modal-fanout-payment.test.ts; a reworded mock comment in purchase-execution-toast.test.ts; new tests-e2e/bulk-approval-confirm.spec.ts.

Why this approach

It reuses the commitmentSummary component from #781 and the existing executeConfirmLabel, so the bulk confirm reads like the single confirm and no new UI is invented. A submittable bucket's recs are already priced for that bucket's payment option (isSubmittableBucket), so the upfront total on the button is the amount that will be approved.

Screenshots

Screenshots were taken before this branch was merged with main; before = main at a14dc8f. The before shot is not shown, because main at a14dc8f had no commitment summary on the bulk confirm and current main does. Headless Chromium at 1440x900 against the repo's mocked e2e API.

After

Bulk approval confirm for 3 buckets. Compared with current main, the changes are the intro sentence "Totals below are across all requests." and the upfront amount on the button. The summary band and the per-commitment lines come from main.

Verification

Run on this branch's head 30ab91f0.

• Merged with main at 5b52c4e; conflicts in frontend/src/app.ts, frontend/src/__tests__/purchase-execution-toast.test.ts and frontend/src/__tests__/purchase-modal-submit.test.ts resolved, see the merge commit.
• npm run lint: 0 errors. Typecheck clean, build OK.
• Jest: 3864 of 3865 passed, 1 skipped. The new test checks the title, upfront $8,000, monthly $100, term total $9,200, the lines, no "Charged today", and the amount on the button.
• Playwright: 201 passed, including the new bulk-approval-confirm.spec.ts (totals computed from the fixture rows, 3 lines, button label, Cancel posts nothing).
• Secrets scan clean, planted key flagged.

Notes for review

• The confirm button changed from "Send all for approval" to the shared "Send for Approval ($X upfront on approval)" to match the single path. Easy to keep "Send all" if preferred. When every bucket is no-upfront the button reads "($0.00 upfront on approval)", the same as the single-purchase confirm.
• No test asserts the new intro sentence yet.
• The screenshot shows "Monthly $550" although every line is All upfront. That comes from the e2e fixture, whose all-upfront rows carry a non-zero monthly_cost; the single-purchase confirm shows the same figure.
• Everything else the issue lists (Execute now, Run now, payment-matched wording, disabled trigger) is on main via fix(frontend): money confirms state what is bought and how much #781 and is not repeated here.

Overlaps

Related to #709 (RI exchange confirm), which also builds on commitmentSummary but in the RI-exchange files, so no conflict.

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 30ab91f0bdb051c76d5861d19e742939c8c56902

Blocking:

• none
  Non-blocking:
• frontend/src/app.ts:637: the bulk button reads "Send for Approval ($X upfront on approval)" under the title "Send N bulk purchases for approval?", and all-no-upfront gives "($0.00 upfront on approval)". The single-purchase confirm does the same, so this is cosmetic.
• frontend/src/tests/purchase-modal-fanout-payment.test.ts:122-132: the moved fix(frontend): Execute now and Run now confirms show no amount or account #707 test mostly re-asserts main's fix(frontend): show the monthly charge and term total before purchase #1364/fix(frontend): monthly cost and term total never shown, bulk shows upfront 0 #711 summary. Only the confirmLabel assertion covers this PR's behavior, and nothing asserts the new "Totals below are across all requests." sentence.
  Attacked: origin/main...HEAD is 4 files. In app.ts only handleFanOutExecute changed: summary from summaryLines, commitmentTotals -> executeConfirmLabel, and one intro sentence. Everything goes through textContent with no inline styles. Merge (7aaaf3b + 5b52c4e) vs ^2, the resolve-log and the merge message: main's fix(frontend): show the monthly charge and term total before purchase #1364 commitmentLine, per-bucket payment, account names and "Upfront on approval" label are kept. The branch's duplicate toCommitmentLine was dropped. The fix(frontend): Execute now and Run now confirms show no amount or account #707 test moved into the split fanout-payment suite with all its assertions. Main's purchase-modal-submit.test.ts is unchanged, and nothing still references "Send all for approval". Jest (fanout-payment, fanout, submit, execution-toast, commitmentSummary): 91/91, and tsc is clean.

[IAmJSD]

CI on 30ab91f0 failed only because the Security Scanning job hung for 50 minutes uploading Trivy results to GitHub and timed out; no scan found anything. Head 9a7230b3 is the approved 30ab91f0 plus a conflict-free merge of main, which gives a fresh CI run. Its added and removed lines against main are identical to the reviewed diff, so the approval above carries over to 9a7230b3.

[IAmJSD]

Local verification at 9a7230b3 merged onto current main (6122fa24; merge-tree dc090cc2; 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 9a7230b3 (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 9a7230b3.