cristim · May 6, 2026 · May 6, 2026 · May 6, 2026
diff --git a/frontend/src/__tests__/recommendations.test.ts b/frontend/src/__tests__/recommendations.test.ts
@@ -1,7 +1,7 @@
 /**
  * Recommendations module tests
  */
-import { loadRecommendations, openPurchaseModal, getPurchaseModalRecommendations, clearPurchaseModalRecommendations, refreshRecommendations, setupRecommendationsHandlers, clearRecommendationDetailCache, pickBestVariantPerCell, seedGlobalDefaults, effectiveMonthlySavings, effectiveSavingsPct, groupRecsByCell, cellSummary, pageLevelRange, resetExpandedCells, resetAutoRefreshInFlight } from '../recommendations';
+import { loadRecommendations, openPurchaseModal, getPurchaseModalRecommendations, clearPurchaseModalRecommendations, refreshRecommendations, setupRecommendationsHandlers, clearRecommendationDetailCache, pickBestVariantPerCell, seedGlobalDefaults, effectiveMonthlySavings, effectiveSavingsPct, onDemandMonthly, groupRecsByCell, cellSummary, pageLevelRange, resetExpandedCells, resetAutoRefreshInFlight } from '../recommendations';
 
 // Mock the api module
 jest.mock('../api', () => ({
@@ -898,15 +898,15 @@ describe('Recommendations Module', () => {
       });
     });
 
-    test('renders sortable column headers with indicators (Bundle B + #282: 12 columns)', async () => {
+    test('renders sortable column headers with indicators (Bundle B + #282 + #317: 13 columns)', async () => {
       await loadRecommendations();
       const list = document.getElementById('recommendations-list');
-      // Bundle B + issue #282: every data column is sortable. 12 sortable data columns:
+      // Bundle B + issue #282 + #317: every data column is sortable. 13 sortable data columns:
       // provider, account, service, resource_type, region, count, term, payment,
-      // savings, upfront_cost, monthly_cost, effective_savings_pct.
+      // savings, upfront_cost, monthly_cost, on_demand_monthly, effective_savings_pct.
       // The leading checkbox column is not sortable.
       const sortables = list?.querySelectorAll('th.sortable');
-      expect(sortables?.length).toBe(12);
+      expect(sortables?.length).toBe(13);
       // The default sort is savings desc → that header shows an active ▼.
       const savingsHeader = list?.querySelector('th[data-sort="savings"]');
       expect(savingsHeader?.innerHTML).toContain('active');
@@ -2009,7 +2009,7 @@ describe('Bundle B: column header filter triggers', () => {
     const buttons = document.querySelectorAll<HTMLButtonElement>('th .column-filter-btn[data-column]');
     const cols = Array.from(buttons).map((b) => b.dataset['column']);
     expect(cols.sort()).toEqual(
-      ['account', 'count', 'effective_savings_pct', 'monthly_cost', 'payment', 'provider', 'region', 'resource_type', 'savings', 'service', 'term', 'upfront_cost'].sort(),
+      ['account', 'count', 'effective_savings_pct', 'monthly_cost', 'on_demand_monthly', 'payment', 'provider', 'region', 'resource_type', 'savings', 'service', 'term', 'upfront_cost'].sort(),
     );
   });
 
@@ -3493,6 +3493,72 @@ describe('effectiveSavingsPct', () => {
   });
 });
 
+describe('onDemandMonthly', () => {
+  const mk = (overrides: Partial<LocalRecommendation>): LocalRecommendation => ({
+    id: 'r',
+    provider: 'aws',
+    service: 'ec2',
+    resource_type: 't3.medium',
+    region: 'us-east-1',
+    count: 1,
+    term: 1,
+    savings: 100,
+    upfront_cost: 0,
+    monthly_cost: 50,
+    ...overrides,
+  } as unknown as LocalRecommendation);
+
+  test('null monthly_cost returns null (data not provided)', () => {
+    expect(onDemandMonthly(mk({ monthly_cost: null }))).toBeNull();
+    expect(onDemandMonthly(mk({ monthly_cost: undefined }))).toBeNull();
+  });
+
+  test('term=0 returns null (anomaly — cannot amortize over zero months)', () => {
+    expect(onDemandMonthly(mk({ term: 0, monthly_cost: 50 }))).toBeNull();
+  });
+
+  test('no-upfront: on_demand_monthly = monthly_cost + savings', () => {
+    // upfront_cost = 0 → amortized = 0 → on_demand = 50 + 100 = 150
+    const odm = onDemandMonthly(mk({ savings: 100, upfront_cost: 0, monthly_cost: 50, term: 1 }));
+    expect(odm).not.toBeNull();
+    expect(odm!).toBeCloseTo(150, 2);
+  });
+
+  test('partial-upfront: on_demand_monthly includes amortized upfront', () => {
+    // upfront_cost = 600, term = 1 → amortized = 600/12 = 50/mo
+    // on_demand = 0 + 50 + 50 = 100
+    const odm = onDemandMonthly(mk({ savings: 50, upfront_cost: 600, monthly_cost: 0, term: 1 }));
+    expect(odm).not.toBeNull();
+    expect(odm!).toBeCloseTo(100, 2);
+  });
+
+  test('3yr partial-upfront: on_demand_monthly amortizes upfront over 36 months', () => {
+    // upfront_cost = 7200, term = 3 → amortized = 7200/36 = 200/mo
+    // on_demand = 200 + 600 + 200 = 1000
+    const odm = onDemandMonthly(mk({ savings: 600, upfront_cost: 7200, monthly_cost: 200, term: 3 }));
+    expect(odm).not.toBeNull();
+    expect(odm!).toBeCloseTo(1000, 2);
+  });
+
+  test('monthly_cost=0 (all-upfront): on_demand_monthly = savings + amortized_upfront', () => {
+    // monthly_cost = 0 is valid known data (all-upfront commitment)
+    // upfront_cost = 1200, term = 1 → amortized = 100/mo
+    // on_demand = 0 + 200 + 100 = 300
+    const odm = onDemandMonthly(mk({ savings: 200, upfront_cost: 1200, monthly_cost: 0, term: 1 }));
+    expect(odm).not.toBeNull();
+    expect(odm!).toBeCloseTo(300, 2);
+  });
+
+  test('identity: on_demand_monthly = monthly_cost + savings + (upfront_cost / (term*12))', () => {
+    // The value must satisfy the documented formula exactly.
+    const r = mk({ savings: 120, upfront_cost: 3600, monthly_cost: 80, term: 3 });
+    const expected = 80 + 120 + (3600 / (3 * 12));  // = 80 + 120 + 100 = 300
+    const odm = onDemandMonthly(r);
+    expect(odm).not.toBeNull();
+    expect(odm!).toBeCloseTo(expected, 5);
+  });
+});
+
 describe('Monthly Cost + Effective % column rendering', () => {
   beforeEach(() => {
     document.body.innerHTML = [
@@ -3527,7 +3593,7 @@ describe('Monthly Cost + Effective % column rendering', () => {
     ...overrides,
   } as unknown as LocalRecommendation);
 
-  test('table header includes "Monthly Cost" and "Effective %" columns', async () => {
+  test('table header includes "Monthly Cost", "On-Demand Monthly", and "Effective %" columns', async () => {
     (api.getRecommendations as jest.Mock).mockResolvedValue({
       summary: {},
       recommendations: [baseRec()],
@@ -3538,6 +3604,7 @@ describe('Monthly Cost + Effective % column rendering', () => {
 
     const headers = Array.from(document.querySelectorAll('th')).map((th) => th.textContent ?? '');
     expect(headers.some((h) => h.includes('Monthly Cost'))).toBe(true);
+    expect(headers.some((h) => h.includes('On-Demand Monthly'))).toBe(true);
     expect(headers.some((h) => h.includes('Effective %'))).toBe(true);
   });
 
@@ -3632,6 +3699,88 @@ describe('Monthly Cost + Effective % column rendering', () => {
       expect.objectContaining({ column: 'effective_savings_pct' }),
     );
   });
+
+  test('On-Demand Monthly column renders formatCurrency when monthly_cost is non-null', async () => {
+    // savings=100, upfront_cost=0, monthly_cost=50, term=1
+    // on_demand_monthly = 50 + 100 + 0 = 150 → formatCurrency → "$150"
+    const rec = baseRec({ savings: 100, upfront_cost: 0, monthly_cost: 50, term: 1 });
+    (api.getRecommendations as jest.Mock).mockResolvedValue({
+      summary: {},
+      recommendations: [rec],
+      regions: [],
+    });
+    (state.getRecommendations as jest.Mock).mockReturnValue([rec]);
+    await loadRecommendations();
+
+    const headers = Array.from(document.querySelectorAll('th')).map((th) => th.textContent ?? '');
+    expect(headers.some((h) => h.includes('On-Demand Monthly'))).toBe(true);
+
+    // Pin the specific on_demand_monthly cell by column index (not a scan of all tds).
+    const odmColIdx = Array.from(document.querySelectorAll('th'))
+      .findIndex((th) => th.getAttribute('data-sort') === 'on_demand_monthly');
+    const firstRowCells = Array.from(
+      document.querySelectorAll('tbody tr.recommendation-row td'),
+    );
+    expect(firstRowCells[odmColIdx]?.textContent).toBe('$150');
+  });
+
+  test('On-Demand Monthly column renders em-dash when monthly_cost is null', async () => {
+    const rec = baseRec({ savings: 100, upfront_cost: 0, monthly_cost: null, term: 1 });
+    (api.getRecommendations as jest.Mock).mockResolvedValue({
+      summary: {},
+      recommendations: [rec],
+      regions: [],
+    });
+    (state.getRecommendations as jest.Mock).mockReturnValue([rec]);
+    await loadRecommendations();
+
+    // Pin the specific on_demand_monthly cell (not a scan of all tds — Effective % also renders em-dash).
+    const odmColIdx = Array.from(document.querySelectorAll('th'))
+      .findIndex((th) => th.getAttribute('data-sort') === 'on_demand_monthly');
+    const firstRowCells = Array.from(
+      document.querySelectorAll('tbody tr.recommendation-row td'),
+    );
+    expect(firstRowCells[odmColIdx]?.textContent).toBe('—');
+  });
+
+  test('on_demand_monthly numeric filter: null monthly_cost row does not match = 0', async () => {
+    // When monthly_cost is null, on_demand_monthly returns null → NaN sentinel in numericCellValue.
+    // A filter expr "0" (equals zero) must NOT match such rows.
+    const nullRec = baseRec({ savings: 100, upfront_cost: 0, monthly_cost: null, term: 1 });
+    (api.getRecommendations as jest.Mock).mockResolvedValue({
+      summary: {},
+      recommendations: [nullRec],
+      regions: [],
+    });
+    (state.getRecommendations as jest.Mock).mockReturnValue([nullRec]);
+    // Apply a filter that would match $0 if NaN were treated as 0.
+    // Use mockReturnValueOnce so the override doesn't leak into subsequent tests.
+    (state.getRecommendationsColumnFilters as jest.Mock).mockReturnValueOnce({
+      on_demand_monthly: { kind: 'expr', expr: '0' },
+    });
+    await loadRecommendations();
+
+    // Null-monthly_cost row should be filtered out; tbody should have no visible recommendation rows.
+    const rows = document.querySelectorAll('tbody tr.recommendation-row');
+    expect(rows.length).toBe(0);
+  });
+
+  test('sort header for on_demand_monthly is wired - clicking sets sort to on_demand_monthly', async () => {
+    (api.getRecommendations as jest.Mock).mockResolvedValue({
+      summary: {},
+      recommendations: [baseRec()],
+      regions: [],
+    });
+    (state.getRecommendations as jest.Mock).mockReturnValue([baseRec()]);
+    await loadRecommendations();
+
+    const header = document.querySelector<HTMLTableCellElement>('th[data-sort="on_demand_monthly"]');
+    expect(header).not.toBeNull();
+    header!.click();
+    expect(state.setRecommendationsSort).toHaveBeenCalledWith(
+      expect.objectContaining({ column: 'on_demand_monthly' }),
+    );
+  });
 });
 
 // ---------------------------------------------------------------------------

diff --git a/frontend/src/recommendations.ts b/frontend/src/recommendations.ts
@@ -379,6 +379,10 @@ const SORTABLE_NUMERIC_COLUMNS: Record<string, (r: LocalRecommendation) => numbe
   // order (de-emphasised) and don't conflate with rows that have an explicit
   // $0 recurring charge (e.g. all-upfront commitments).
   monthly_cost: (r) => r.monthly_cost ?? Number.POSITIVE_INFINITY,
+  // onDemandMonthly returns null for null monthly_cost or term=0.
+  // POSITIVE_INFINITY places null rows at the bottom in ascending order and
+  // at the top in descending — consistent with monthly_cost.
+  on_demand_monthly: (r) => onDemandMonthly(r) ?? Number.POSITIVE_INFINITY,
   // effectiveSavingsPct returns null for term=0 / on_demand=0 / null monthly_cost.
   // POSITIVE_INFINITY places null rows at the bottom in ascending order and
   // at the top in descending — the least surprising behaviour for a savings
@@ -617,6 +621,11 @@ function groupsInSortOrder(
       const selectedB = vb.find((r) => selectedRecs.has(r.id));
       const scoreA = selectedA ? numericKey(selectedA) : Math.max(...va.map(numericKey));
       const scoreB = selectedB ? numericKey(selectedB) : Math.max(...vb.map(numericKey));
+      // Nulls are encoded as POSITIVE_INFINITY. Always sort them last regardless
+      // of direction so "no data" rows are de-emphasised in both asc and desc.
+      const aNullish = scoreA === Number.POSITIVE_INFINITY;
+      const bNullish = scoreB === Number.POSITIVE_INFINITY;
+      if (aNullish !== bNullish) return aNullish ? 1 : -1;
       return (scoreA - scoreB) * direction;
     }
     if (stringKey) {
@@ -713,6 +722,26 @@ export function effectiveSavingsPct(r: LocalRecommendation): number | null {
   return (effectiveSavings / onDemand) * 100;
 }
 
+/**
+ * Computes the equivalent on-demand monthly cost by reversing the savings
+ * formula: on_demand_monthly = monthly_cost + savings + (upfront_cost / (term * 12)).
+ * Returns null when monthly_cost is null (provider didn't return a recurring
+ * breakdown — same semantics as the Monthly Cost column and effectiveSavingsPct).
+ * Returns null when term is 0 (anomaly — cannot amortize over zero months).
+ *
+ * Note: this reconstruction uses only monthly_cost + savings + amortized_upfront.
+ * It does NOT use on_demand_cost even when available, because the column's
+ * purpose is to display the reconstructed denominator so users can verify the
+ * formula against the raw fields visible in the same row. For the authoritative
+ * on-demand baseline used in effectiveSavingsPct, see that function.
+ */
+export function onDemandMonthly(r: LocalRecommendation): number | null {
+  if (r.monthly_cost == null) return null;
+  if (!r.term) return null;
+  const amortized = r.upfront_cost / (r.term * 12);
+  return r.monthly_cost + r.savings + amortized;
+}
+
 // pickBestVariantPerCell collapses a list of recs to one rec per cell,
 // preferring the variant matching resolved GlobalConfig.DefaultTerm +
 // DefaultPayment, then falling back to the highest effective monthly savings.
@@ -782,6 +811,7 @@ const SORT_HEADER_LABELS: Record<string, string> = {
   savings: 'Monthly Savings',
   upfront_cost: 'Upfront Cost',
   monthly_cost: 'Monthly Cost',
+  on_demand_monthly: 'On-Demand Monthly',
   effective_savings_pct: 'Effective %',
 };
 
@@ -902,6 +932,7 @@ function categoricalCellValue(r: LocalRecommendation, col: state.Recommendations
     case 'savings':
     case 'upfront_cost':
     case 'monthly_cost':
+    case 'on_demand_monthly':
     case 'effective_savings_pct':   return '';
   }
 }
@@ -914,6 +945,9 @@ function numericCellValue(r: LocalRecommendation, col: state.RecommendationsColu
     // Return NaN for null monthly_cost so numeric filter predicates (e.g. "= 0")
     // don't match rows where the provider simply didn't report a monthly cost.
     case 'monthly_cost':         return r.monthly_cost ?? Number.NaN;
+    // Return NaN for null on_demand_monthly (null monthly_cost or term=0) so any
+    // numeric predicate returns false rather than coincidentally matching 0.
+    case 'on_demand_monthly':    return onDemandMonthly(r) ?? Number.NaN;
     // Return NaN for null effective_savings_pct so any numeric predicate
     // returns false rather than coincidentally matching 0.
     case 'effective_savings_pct': return effectiveSavingsPct(r) ?? Number.NaN;
@@ -944,7 +978,7 @@ function numericCellValue(r: LocalRecommendation, col: state.RecommendationsColu
 // ---------------------------------------------------------------------------
 
 const NUMERIC_COLUMNS: ReadonlySet<state.RecommendationsColumnId> = new Set([
-  'count', 'savings', 'upfront_cost', 'monthly_cost', 'effective_savings_pct',
+  'count', 'savings', 'upfront_cost', 'monthly_cost', 'on_demand_monthly', 'effective_savings_pct',
 ]);
 
 interface PopoverState {
@@ -1793,7 +1827,7 @@ function providerBadgeClass(provider: string): string {
 // neither sortable nor filterable).
 const FILTERABLE_COLUMNS: readonly state.RecommendationsColumnId[] = [
   'provider', 'account', 'service', 'resource_type', 'region',
-  'count', 'term', 'payment', 'savings', 'upfront_cost', 'monthly_cost', 'effective_savings_pct',
+  'count', 'term', 'payment', 'savings', 'upfront_cost', 'monthly_cost', 'on_demand_monthly', 'effective_savings_pct',
 ];
 
 // Map raw payment_option values to display labels for the Payment column.
@@ -1820,6 +1854,8 @@ function buildVariantRowMarkup(rec: LocalRecommendation, selectedRecs: ReadonlyS
   const pct = effectiveSavingsPct(rec);
   const pctClass = pct !== null && pct < 0 ? ' class="effective-pct-negative"' : '';
   const pctText = pct === null ? '\u2014' : pct.toFixed(1) + '%';
+  const odm = onDemandMonthly(rec);
+  const odmText = odm != null ? formatCurrency(odm) : '\u2014';
   const nestedClass = isNested ? ' rec-variant-row' : '';
   return `
   <tr class="recommendation-row${nestedClass} ${savingsClass} ${isSelected ? 'selected' : ''}" data-rec-id="${recId}">
@@ -1837,12 +1873,13 @@ function buildVariantRowMarkup(rec: LocalRecommendation, selectedRecs: ReadonlyS
     <td class="savings">${formatCurrency(rec.savings)}</td>
     <td>${formatCurrency(rec.upfront_cost)}</td>
     <td>${rec.monthly_cost != null ? formatCurrency(rec.monthly_cost) : '—'}</td>
+    <td>${odmText}</td>
     <td${pctClass}>${pctText}</td>
   </tr>`;
 }
 
-// The total column count for colspan on summary rows: checkbox col + 12 data cols = 13.
-const TABLE_COL_COUNT = 13;
+// The total column count for colspan on summary rows: checkbox col + 13 data cols = 14.
+const TABLE_COL_COUNT = 14;
 
 function buildListMarkup(recommendations: LocalRecommendation[], selectedRecs: ReadonlySet<string>): string {
   const sort = state.getRecommendationsSort();

diff --git a/frontend/src/state.ts b/frontend/src/state.ts
@@ -10,7 +10,7 @@ import type { Recommendation } from './api/types';
 export type RecommendationsColumnId =
   | 'provider' | 'account' | 'service' | 'resource_type' | 'region'
   | 'count' | 'term' | 'payment' | 'savings' | 'upfront_cost'
-  | 'monthly_cost' | 'effective_savings_pct';
+  | 'monthly_cost' | 'on_demand_monthly' | 'effective_savings_pct';
 
 // Every visible column is sortable, so the sort column type is exactly the
 // column id set. Aliasing here keeps the two in sync automatically — adding