feat(frontend): add amortize-upfront monthly cost toggle (#1112)

Add a shared "Amortize upfront over term" checkbox that folds the
one-time upfront cost evenly across the commitment term, letting every
payment type (No Upfront / Partial / All Upfront) be compared on a
total-cost-per-month basis.

New shared helper `amortizedMonthly(monthlyCost, upfrontCost, termYears)`
in utils.ts returns `monthlyCost + upfrontCost / (termYears * 12)`.
Guards: term <= 0, non-finite term, or null/non-finite upfront all
fall back to monthlyCost unchanged (no NaN/Infinity).

Toggle state lives in `state.ts` (`getAmortizeUpfront` /
`setAmortizeUpfront` / `subscribeAmortizeUpfront`) persisted under
`cudly.amortizeUpfront` in localStorage. Same pattern as
`getCostPeriod`/`setCostPeriod`. All views read the same key so they
stay in sync across tab switches and page reloads.

Views updated:
- history.ts: checkbox injected into #history-controls and
  #purchases-approval-queue-section; both renderHistoryList and
  renderApprovalQueue use amortizedMonthly when the toggle is on;
  column header updates to "Monthly Cost (amortized)" when active.
  subscribeAmortizeUpfront re-renders both tables without a refetch.
- inventory.ts: checkbox injected into .section-header-actions;
  buildCommitmentRow uses amortizedMonthly on the monthly_cost cell;
  last-fetched commitments cached so subscribeAmortizeUpfront can
  re-render without an API round-trip.
- approval-details.ts: "Monthly cost" column added to the per-rec
  table; header built via DOM methods (no innerHTML); column label
  updates to "Monthly cost (amortized)" when toggle is on. Modal
  reads state at render time, no re-render needed.

plans.ts and dashboard.ts have no monthly_cost field on their
displayed data types (PlannedPurchase / dashboard summary), so the
toggle has no effect there and no changes were needed.

Tests: 9 new `amortizedMonthly` unit tests in utils.test.ts covering
all payment types and every guard path. Existing approval-details,
history, and inventory tests updated for the new column and the new
state mock entries. Full suite: 2442 pass, 2 pre-existing timezone
failures in utils.test.ts (unrelated).

Closes #1112

Author: cristim

frontend/src/__tests__/allowed-accounts.test.ts

@@ -70,6 +70,9 @@ jest.mock('../state', () => ({
   setCurrentAccountIDs: jest.fn(),
   subscribeProvider: jest.fn().mockReturnValue(() => {}),
   subscribeAccount: jest.fn().mockReturnValue(() => {}),
+  getAmortizeUpfront: jest.fn().mockReturnValue(false),
+  setAmortizeUpfront: jest.fn(),
+  subscribeAmortizeUpfront: jest.fn().mockReturnValue(() => {}),
 }));
 
 // ---------------------------------------------------------------------------

frontend/src/__tests__/app.test.ts

@@ -17,7 +17,10 @@ jest.mock('../state', () => ({
   subscribeProvider: jest.fn(),
   subscribeAccount: jest.fn(),
   getCurrentProvider: jest.fn(() => ''),
-  getCurrentAccountIDs: jest.fn(() => [])
+  getCurrentAccountIDs: jest.fn(() => []),
+  getAmortizeUpfront: jest.fn(() => false),
+  setAmortizeUpfront: jest.fn(),
+  subscribeAmortizeUpfront: jest.fn().mockReturnValue(() => {}),
 }));
 
 jest.mock('../auth', () => ({

frontend/src/__tests__/approval-details.test.ts

@@ -7,6 +7,13 @@
  * network helpers (those are covered by api-* tests).
  */
 
+// approval-details.ts now reads getAmortizeUpfront() from state at render
+// time. Mock it to return false (default: non-amortized) so existing tests
+// continue to verify the base column layout.
+jest.mock('../state', () => ({
+  getAmortizeUpfront: jest.fn(() => false),
+}));
+
 import {
   computeEffectiveSavingsPct,
   formatAccountLabel,
@@ -82,13 +89,13 @@ describe('renderApprovalDetailsBody', () => {
     expect(text).toContain('Accounts');
   });
 
-  it('renders the per-rec table with all 12 columns', () => {
+  it('renders the per-rec table with all 13 columns (Monthly cost added by issue #1112)', () => {
     const rec = makeRec({});
     const body = renderApprovalDetailsBody(makeDetails([rec]), new Map());
     const headers = Array.from(body.querySelectorAll('.approval-details-table thead th')).map(th => th.textContent);
     expect(headers).toEqual([
       'Account', 'Provider', 'Service', 'Resource', 'Engine', 'Region',
-      'Count', 'Term', 'Payment', 'Upfront', 'Monthly savings', 'Eff. savings %',
+      'Count', 'Term', 'Payment', 'Upfront', 'Monthly cost', 'Monthly savings', 'Eff. savings %',
     ]);
   });
 
@@ -149,17 +156,19 @@ describe('renderApprovalDetailsBody', () => {
     const rec = makeRec({ upfront_cost: 4567.89, savings: 12.5 });
     const body = renderApprovalDetailsBody(makeDetails([rec]), new Map());
     const cells = body.querySelectorAll('.approval-details-table tbody td');
+    // col 9 = Upfront, col 10 = Monthly cost (issue #1112), col 11 = Monthly savings
     expect(cells[9]?.textContent).toBe('$4,568');
-    expect(cells[10]?.textContent).toBe('$13');
+    expect(cells[11]?.textContent).toBe('$13');
   });
 
   it('computes effective savings % when on_demand_cost is set, "—" otherwise', () => {
     const withBaseline = makeRec({ savings: 30, on_demand_cost: 100 });
     const withoutBaseline = makeRec({ id: 'rec-2', savings: 30, on_demand_cost: null, monthly_cost: null });
     const body = renderApprovalDetailsBody(makeDetails([withBaseline, withoutBaseline]), new Map());
     const rows = body.querySelectorAll('.approval-details-table tbody tr');
-    expect(rows[0]?.querySelectorAll('td')[11]?.textContent).toBe('30.0%');
-    expect(rows[1]?.querySelectorAll('td')[11]?.textContent).toBe('—');
+    // col 12 = Eff. savings % (shifted by +1 due to the new Monthly cost col at index 10)
+    expect(rows[0]?.querySelectorAll('td')[12]?.textContent).toBe('30.0%');
+    expect(rows[1]?.querySelectorAll('td')[12]?.textContent).toBe('—');
   });
 
   it('annual-savings tooltip does NOT fire on floating-point rounding noise', () => {

frontend/src/__tests__/history-approval-queue.test.ts

@@ -60,6 +60,9 @@ jest.mock('../state', () => ({
   setCurrentAccountIDs: jest.fn(),
   subscribeProvider: jest.fn().mockReturnValue(() => {}),
   subscribeAccount: jest.fn().mockReturnValue(() => {}),
+  getAmortizeUpfront: jest.fn().mockReturnValue(false),
+  setAmortizeUpfront: jest.fn(),
+  subscribeAmortizeUpfront: jest.fn().mockReturnValue(() => {}),
 }));
 
 jest.mock('../recommendations', () => ({

frontend/src/__tests__/history-approve-button.test.ts

@@ -61,6 +61,9 @@ jest.mock('../state', () => ({
   setCurrentAccountIDs: jest.fn(),
   subscribeProvider: jest.fn().mockReturnValue(() => {}),
   subscribeAccount: jest.fn().mockReturnValue(() => {}),
+  getAmortizeUpfront: jest.fn().mockReturnValue(false),
+  setAmortizeUpfront: jest.fn(),
+  subscribeAmortizeUpfront: jest.fn().mockReturnValue(() => {}),
 }));
 
 import * as api from '../api';

frontend/src/__tests__/history-cancel-button.test.ts

@@ -58,6 +58,9 @@ jest.mock('../state', () => ({
   setCurrentAccountIDs: jest.fn(),
   subscribeProvider: jest.fn().mockReturnValue(() => {}),
   subscribeAccount: jest.fn().mockReturnValue(() => {}),
+  getAmortizeUpfront: jest.fn().mockReturnValue(false),
+  setAmortizeUpfront: jest.fn(),
+  subscribeAmortizeUpfront: jest.fn().mockReturnValue(() => {}),
 }));
 
 import * as api from '../api';

frontend/src/__tests__/history-cancel-permissions.test.ts

@@ -57,6 +57,9 @@ jest.mock('../state', () => ({
   setCurrentAccountIDs: jest.fn(),
   subscribeProvider: jest.fn().mockReturnValue(() => {}),
   subscribeAccount: jest.fn().mockReturnValue(() => {}),
+  getAmortizeUpfront: jest.fn().mockReturnValue(false),
+  setAmortizeUpfront: jest.fn(),
+  subscribeAmortizeUpfront: jest.fn().mockReturnValue(() => {}),
 }));
 
 // Mock permissions so we can inject arbitrary permission sets, including

frontend/src/__tests__/history-retry-button.test.ts

@@ -67,6 +67,9 @@ jest.mock('../state', () => ({
   setCurrentAccountIDs: jest.fn(),
   subscribeProvider: jest.fn().mockReturnValue(() => {}),
   subscribeAccount: jest.fn().mockReturnValue(() => {}),
+  getAmortizeUpfront: jest.fn().mockReturnValue(false),
+  setAmortizeUpfront: jest.fn(),
+  subscribeAmortizeUpfront: jest.fn().mockReturnValue(() => {}),
 }));
 
 import * as api from '../api';

frontend/src/__tests__/history.test.ts

@@ -41,6 +41,9 @@ jest.mock('../state', () => ({
   setCurrentAccountIDs: jest.fn(),
   subscribeProvider: jest.fn().mockReturnValue(() => {}),
   subscribeAccount: jest.fn().mockReturnValue(() => {}),
+  getAmortizeUpfront: jest.fn().mockReturnValue(false),
+  setAmortizeUpfront: jest.fn(),
+  subscribeAmortizeUpfront: jest.fn().mockReturnValue(() => {}),
 }));
 
 import * as api from '../api';

frontend/src/__tests__/inventory.test.ts

@@ -32,6 +32,9 @@ jest.mock('../state', () => ({
   subscribeAccount: jest.fn(() => jest.fn()),
   getCurrentProvider: jest.fn(() => ''),
   getCurrentAccountIDs: jest.fn(() => []),
+  getAmortizeUpfront: jest.fn(() => false),
+  setAmortizeUpfront: jest.fn(),
+  subscribeAmortizeUpfront: jest.fn(() => jest.fn()),
 }));
 
 // inventory.ts routes sub-nav clicks through navigation.switchInventorySubTab