@memberjunction/ng-dashboards 5.38.0 → 5.39.0

package/dist/AI/components/analytics/cost-budget/cost-budget.component.js

@@ -7,6 +7,8 @@
 import { Component, Input, Output, EventEmitter, ChangeDetectorRef, inject } from '@angular/core';
 import { Subject } from 'rxjs';
 import { RunView } from '@memberjunction/core';
+import { NormalizeUUID } from '@memberjunction/global';
+import { cacheHitRate, hasCacheActivity, netCacheSavings } from '../../../services/cache-metrics';
 import { BaseAngularComponent } from '@memberjunction/ng-base-types';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-shared-generic";
@@ -20,14 +22,14 @@ function AnalyticsCostBudgetComponent_Conditional_0_Template(rf, ctx) { if (rf &
     i0.ɵɵelementEnd();
 } }
 function AnalyticsCostBudgetComponent_Conditional_1_For_2_Conditional_8_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 30);
+    i0.ɵɵelement(0, "i", 32);
 } }
 function AnalyticsCostBudgetComponent_Conditional_1_For_2_Conditional_8_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 31);
+    i0.ɵɵelement(0, "i", 33);
 } }
 function AnalyticsCostBudgetComponent_Conditional_1_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 29);
-    i0.ɵɵconditionalCreate(1, AnalyticsCostBudgetComponent_Conditional_1_For_2_Conditional_8_Conditional_1_Template, 1, 0, "i", 30)(2, AnalyticsCostBudgetComponent_Conditional_1_For_2_Conditional_8_Conditional_2_Template, 1, 0, "i", 31);
+    i0.ɵɵelementStart(0, "div", 31);
+    i0.ɵɵconditionalCreate(1, AnalyticsCostBudgetComponent_Conditional_1_For_2_Conditional_8_Conditional_1_Template, 1, 0, "i", 32)(2, AnalyticsCostBudgetComponent_Conditional_1_For_2_Conditional_8_Conditional_2_Template, 1, 0, "i", 33);
     i0.ɵɵtext(3);
     i0.ɵɵpipe(4, "number");
     i0.ɵɵelementEnd();
@@ -40,16 +42,16 @@ function AnalyticsCostBudgetComponent_Conditional_1_For_2_Conditional_8_Template
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(4, 6, kpi_r2.Delta, "1.1-1"), "% vs prev ");
 } }
 function AnalyticsCostBudgetComponent_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 23)(1, "div", 24);
+    i0.ɵɵelementStart(0, "div", 25)(1, "div", 26);
     i0.ɵɵelement(2, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 25)(4, "div", 26);
+    i0.ɵɵelementStart(3, "div", 27)(4, "div", 28);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 27);
+    i0.ɵɵelementStart(6, "div", 29);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(8, AnalyticsCostBudgetComponent_Conditional_1_For_2_Conditional_8_Template, 5, 9, "div", 28);
+    i0.ɵɵconditionalCreate(8, AnalyticsCostBudgetComponent_Conditional_1_For_2_Conditional_8_Template, 5, 9, "div", 30);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const kpi_r2 = ctx.$implicit;
@@ -69,7 +71,7 @@ function AnalyticsCostBudgetComponent_Conditional_1_Conditional_10_Template(rf,
     i0.ɵɵelementEnd();
 } }
 function AnalyticsCostBudgetComponent_Conditional_1_Conditional_11_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 35)(1, "span", 36);
+    i0.ɵɵelementStart(0, "div", 37)(1, "span", 38);
     i0.ɵɵtext(2, "avg");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -77,9 +79,9 @@ function AnalyticsCostBudgetComponent_Conditional_1_Conditional_11_Conditional_2
     i0.ɵɵstyleProp("bottom", ctx_r2.AvgLinePercent, "%");
 } }
 function AnalyticsCostBudgetComponent_Conditional_1_Conditional_11_For_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 34);
-    i0.ɵɵelement(1, "div", 37);
-    i0.ɵɵelementStart(2, "div", 38);
+    i0.ɵɵelementStart(0, "div", 36);
+    i0.ɵɵelement(1, "div", 39);
+    i0.ɵɵelementStart(2, "div", 40);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -93,9 +95,9 @@ function AnalyticsCostBudgetComponent_Conditional_1_Conditional_11_For_4_Templat
     i0.ɵɵtextInterpolate(bar_r4.Label);
 } }
 function AnalyticsCostBudgetComponent_Conditional_1_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 11)(1, "div", 32);
-    i0.ɵɵconditionalCreate(2, AnalyticsCostBudgetComponent_Conditional_1_Conditional_11_Conditional_2_Template, 3, 2, "div", 33);
-    i0.ɵɵrepeaterCreate(3, AnalyticsCostBudgetComponent_Conditional_1_Conditional_11_For_4_Template, 4, 6, "div", 34, _forTrack2);
+    i0.ɵɵelementStart(0, "div", 11)(1, "div", 34);
+    i0.ɵɵconditionalCreate(2, AnalyticsCostBudgetComponent_Conditional_1_Conditional_11_Conditional_2_Template, 3, 2, "div", 35);
+    i0.ɵɵrepeaterCreate(3, AnalyticsCostBudgetComponent_Conditional_1_Conditional_11_For_4_Template, 4, 6, "div", 36, _forTrack2);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -110,15 +112,15 @@ function AnalyticsCostBudgetComponent_Conditional_1_Conditional_18_Template(rf,
     i0.ɵɵelementEnd();
 } }
 function AnalyticsCostBudgetComponent_Conditional_1_Conditional_19_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 40);
+    i0.ɵɵelementStart(0, "div", 42);
     i0.ɵɵpipe(1, "number");
-    i0.ɵɵelementStart(2, "span", 41);
+    i0.ɵɵelementStart(2, "span", 43);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 42);
+    i0.ɵɵelementStart(4, "span", 44);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 43);
+    i0.ɵɵelementStart(6, "span", 45);
     i0.ɵɵtext(7);
     i0.ɵɵpipe(8, "number");
     i0.ɵɵelementEnd()();
@@ -136,49 +138,56 @@ function AnalyticsCostBudgetComponent_Conditional_1_Conditional_19_For_2_Templat
 } }
 function AnalyticsCostBudgetComponent_Conditional_1_Conditional_19_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 15);
-    i0.ɵɵrepeaterCreate(1, AnalyticsCostBudgetComponent_Conditional_1_Conditional_19_For_2_Template, 9, 14, "div", 39, _forTrack0);
+    i0.ɵɵrepeaterCreate(1, AnalyticsCostBudgetComponent_Conditional_1_Conditional_19_For_2_Template, 9, 14, "div", 41, _forTrack0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r2.TreemapCells);
 } }
-function AnalyticsCostBudgetComponent_Conditional_1_Conditional_51_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "tr")(1, "td", 44);
+function AnalyticsCostBudgetComponent_Conditional_1_Conditional_55_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr")(1, "td", 46);
     i0.ɵɵtext(2, "No data available");
     i0.ɵɵelementEnd()();
 } }
-function AnalyticsCostBudgetComponent_Conditional_1_For_53_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "tr")(1, "td", 45);
+function AnalyticsCostBudgetComponent_Conditional_1_For_57_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr")(1, "td", 47);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "td", 46);
+    i0.ɵɵelementStart(3, "td", 48);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "td", 47);
+    i0.ɵɵelementStart(5, "td", 49);
     i0.ɵɵtext(6);
     i0.ɵɵpipe(7, "number");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "td", 47);
+    i0.ɵɵelementStart(8, "td", 49);
     i0.ɵɵtext(9);
     i0.ɵɵpipe(10, "number");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "td", 47);
+    i0.ɵɵelementStart(11, "td", 49);
     i0.ɵɵtext(12);
     i0.ɵɵpipe(13, "number");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "td", 47);
+    i0.ɵɵelementStart(14, "td", 49);
     i0.ɵɵtext(15);
+    i0.ɵɵpipe(16, "number");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "td", 47);
-    i0.ɵɵtext(17);
+    i0.ɵɵelementStart(17, "td", 49);
+    i0.ɵɵtext(18);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "td", 48);
-    i0.ɵɵtext(19);
+    i0.ɵɵelementStart(19, "td", 49);
+    i0.ɵɵtext(20);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "td", 47);
-    i0.ɵɵtext(21);
-    i0.ɵɵpipe(22, "number");
+    i0.ɵɵelementStart(21, "td", 50);
+    i0.ɵɵtext(22);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(23, "td", 49);
+    i0.ɵɵtext(24);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(25, "td", 49);
+    i0.ɵɵtext(26);
+    i0.ɵɵpipe(27, "number");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const row_r6 = ctx.$implicit;
@@ -188,11 +197,13 @@ function AnalyticsCostBudgetComponent_Conditional_1_For_53_Template(rf, ctx) { i
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(row_r6.Vendor);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(7, 9, row_r6.Runs));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(7, 11, row_r6.Runs));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(10, 11, row_r6.InputTokens));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(10, 13, row_r6.InputTokens));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(13, 13, row_r6.OutputTokens));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(13, 15, row_r6.OutputTokens));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(row_r6.CacheReadTokens + row_r6.CacheWriteTokens > 0 ? i0.ɵɵpipeBind2(16, 17, row_r6.CacheHitRate * 100, "1.0-0") + "%" : "\u2014");
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(ctx_r2.FormatCurrency(row_r6.InputCost, 4));
     i0.ɵɵadvance(2);
@@ -200,7 +211,9 @@ function AnalyticsCostBudgetComponent_Conditional_1_For_53_Template(rf, ctx) { i
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r2.FormatCurrency(row_r6.TotalCost));
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind2(22, 15, row_r6.PercentOfTotal, "1.1-1"), "%");
+    i0.ɵɵtextInterpolate(row_r6.CacheSavings > 0 ? ctx_r2.FormatCurrency(row_r6.CacheSavings, 4) : "\u2014");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind2(27, 20, row_r6.PercentOfTotal, "1.1-1"), "%");
 } }
 function AnalyticsCostBudgetComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -245,21 +258,27 @@ function AnalyticsCostBudgetComponent_Conditional_1_Template(rf, ctx) { if (rf &
     i0.ɵɵelementStart(40, "th", 22);
     i0.ɵɵtext(41, "Output Tokens");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(42, "th", 22);
-    i0.ɵɵtext(43, "Input Cost");
+    i0.ɵɵelementStart(42, "th", 23);
+    i0.ɵɵtext(43, "Cache Hit");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(44, "th", 22);
-    i0.ɵɵtext(45, "Output Cost");
+    i0.ɵɵtext(45, "Input Cost");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(46, "th", 22);
-    i0.ɵɵtext(47, "Total Cost");
+    i0.ɵɵtext(47, "Output Cost");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(48, "th", 22);
-    i0.ɵɵtext(49, "% of Total");
+    i0.ɵɵtext(49, "Total Cost");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(50, "th", 24);
+    i0.ɵɵtext(51, "Cache Saved");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(52, "th", 22);
+    i0.ɵɵtext(53, "% of Total");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(50, "tbody");
-    i0.ɵɵconditionalCreate(51, AnalyticsCostBudgetComponent_Conditional_1_Conditional_51_Template, 3, 0, "tr");
-    i0.ɵɵrepeaterCreate(52, AnalyticsCostBudgetComponent_Conditional_1_For_53_Template, 23, 18, "tr", null, _forTrack1);
+    i0.ɵɵelementStart(54, "tbody");
+    i0.ɵɵconditionalCreate(55, AnalyticsCostBudgetComponent_Conditional_1_Conditional_55_Template, 3, 0, "tr");
+    i0.ɵɵrepeaterCreate(56, AnalyticsCostBudgetComponent_Conditional_1_For_57_Template, 28, 23, "tr", null, _forTrack1);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -269,15 +288,21 @@ function AnalyticsCostBudgetComponent_Conditional_1_Template(rf, ctx) { if (rf &
     i0.ɵɵconditional(ctx_r2.DailyBars.length === 0 ? 10 : 11);
     i0.ɵɵadvance(8);
     i0.ɵɵconditional(ctx_r2.TreemapCells.length === 0 ? 18 : 19);
-    i0.ɵɵadvance(33);
-    i0.ɵɵconditional(ctx_r2.CostByModelRows.length === 0 ? 51 : -1);
+    i0.ɵɵadvance(37);
+    i0.ɵɵconditional(ctx_r2.CostByModelRows.length === 0 ? 55 : -1);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r2.CostByModelRows);
 } }
 const FIELDS = [
     'ID', 'RunAt', 'Cost', 'TotalCost', 'TokensPrompt', 'TokensCompletion',
-    'TokensUsed', 'ModelID', 'Model', 'VendorID', 'Vendor', 'Success'
+    'TokensUsed', 'TokensCacheRead', 'TokensCacheWrite', 'ModelID', 'Model', 'VendorID', 'Vendor', 'Success'
 ];
+// AIModelCost UnitType name -> token divisor, matching the BasePriceUnitType driver classes.
+const UNIT_DIVISORS = {
+    'Per Million Tokens': 1_000_000,
+    'Per Hundred Thousand Tokens': 100_000,
+    'Per Thousand Tokens': 1_000
+};
 const TIME_RANGE_OPTIONS = ['Today', '7d', '30d', 'MTD'];
 const TREEMAP_COLORS = [
     'var(--mj-brand-primary)',
@@ -323,6 +348,9 @@ export class AnalyticsCostBudgetComponent extends BaseAngularComponent {
     CostByModelRows = [];
     allRuns = [];
     previousPeriodRuns = [];
+    // Per model+vendor cache pricing (rates already normalized to currency-per-token). Empty until
+    // AIModelCost cache rates are configured — savings then stays 0 (surfaced as "Set rates").
+    cacheRates = new Map();
     ngOnInit() {
         this.initialized = true;
         this.LoadData();
@@ -350,8 +378,8 @@ export class AnalyticsCostBudgetComponent extends BaseAngularComponent {
         return '$' + value.toFixed(decimals);
     }
     ExportCSV() {
-        const header = 'Model,Vendor,Runs,Input Tokens,Output Tokens,Input Cost,Output Cost,Total Cost,% of Total';
-        const rows = this.CostByModelRows.map(r => `"${r.Model}","${r.Vendor}",${r.Runs},${r.InputTokens},${r.OutputTokens},${r.InputCost.toFixed(6)},${r.OutputCost.toFixed(6)},${r.TotalCost.toFixed(6)},${r.PercentOfTotal.toFixed(1)}`);
+        const header = 'Model,Vendor,Runs,Input Tokens,Output Tokens,Cache Read Tokens,Cache Write Tokens,Cache Hit Rate %,Input Cost,Output Cost,Total Cost,Cache Saved,% of Total';
+        const rows = this.CostByModelRows.map(r => `"${r.Model}","${r.Vendor}",${r.Runs},${r.InputTokens},${r.OutputTokens},${r.CacheReadTokens},${r.CacheWriteTokens},${(r.CacheHitRate * 100).toFixed(1)},${r.InputCost.toFixed(6)},${r.OutputCost.toFixed(6)},${r.TotalCost.toFixed(6)},${r.CacheSavings.toFixed(6)},${r.PercentOfTotal.toFixed(1)}`);
         const csv = [header, ...rows].join('\n');
         this.downloadCSV(csv, 'cost-by-model.csv');
     }
@@ -366,7 +394,7 @@ export class AnalyticsCostBudgetComponent extends BaseAngularComponent {
             const modelFilter = this.buildModelFilter();
             const currentFilter = this.combineDateAndModelFilter(currentStart, now, modelFilter);
             const prevFilter = this.combineDateAndModelFilter(previousStart, currentStart, modelFilter);
-            const [currentResult, prevResult] = await rv.RunViews([
+            const [currentResult, prevResult, rateResult] = await rv.RunViews([
                 {
                     EntityName: 'MJ: AI Prompt Runs',
                     ExtraFilter: currentFilter,
@@ -380,10 +408,17 @@ export class AnalyticsCostBudgetComponent extends BaseAngularComponent {
                     Fields: FIELDS,
                     OrderBy: 'RunAt ASC',
                     ResultType: 'simple'
+                },
+                {
+                    EntityName: 'MJ: AI Model Costs',
+                    ExtraFilter: `Status='Active' AND ProcessingType='Realtime'`,
+                    Fields: ['ModelID', 'VendorID', 'InputPricePerUnit', 'OutputPricePerUnit', 'CacheReadPricePerUnit', 'CacheWritePricePerUnit', 'UnitType'],
+                    ResultType: 'simple'
                 }
             ]);
             this.allRuns = (currentResult?.Results ?? []);
             this.previousPeriodRuns = (prevResult?.Results ?? []);
+            this.buildCacheRateMap(rateResult?.Results ?? []);
             this.computeKpis();
             this.computeDailyBars();
             this.computeTreemap();
@@ -397,6 +432,36 @@ export class AnalyticsCostBudgetComponent extends BaseAngularComponent {
             this.cdr.detectChanges();
         }
     }
+    // ── Cache pricing ──
+    /** Stable map key for a model+vendor pair (UUIDs normalized for case-insensitive matching). */
+    rateKey(modelID, vendorID) {
+        return `${NormalizeUUID(modelID ?? '')}|${NormalizeUUID(vendorID ?? '')}`;
+    }
+    /** The cache rate for a run's model+vendor, or undefined when no active cost row is configured. */
+    rateFor(run) {
+        return this.cacheRates.get(this.rateKey(run.ModelID, run.VendorID));
+    }
+    /** Build the per-model+vendor rate lookup, normalizing each per-unit price to currency-per-token. */
+    buildCacheRateMap(rows) {
+        this.cacheRates.clear();
+        for (const row of rows) {
+            const divisor = UNIT_DIVISORS[row.UnitType ?? ''] ?? 1_000_000;
+            const inputRate = (row.InputPricePerUnit ?? 0) / divisor;
+            // Cache read/write fall back to the input rate when no distinct rate is recorded — exactly
+            // as the server-side cost calculator does — which makes the corresponding savings term 0.
+            const cacheReadRate = (row.CacheReadPricePerUnit ?? row.InputPricePerUnit ?? 0) / divisor;
+            const cacheWriteRate = (row.CacheWritePricePerUnit ?? row.InputPricePerUnit ?? 0) / divisor;
+            this.cacheRates.set(this.rateKey(row.ModelID, row.VendorID), { inputRate, cacheReadRate, cacheWriteRate });
+        }
+    }
+    /** Sum net cache savings across a set of runs using each run's model+vendor rate. */
+    sumCacheSavings(runs) {
+        return runs.reduce((total, run) => total + netCacheSavings({
+            uncachedInputTokens: 0,
+            cacheReadTokens: run.TokensCacheRead ?? 0,
+            cacheWriteTokens: run.TokensCacheWrite ?? 0
+        }, this.rateFor(run)), 0);
+    }
     // ── Computations ──
     computeKpis() {
         const now = new Date();
@@ -446,6 +511,39 @@ export class AnalyticsCostBudgetComponent extends BaseAngularComponent {
                 Icon: 'fa-solid fa-chart-line'
             }
         ];
+        this.appendCacheKpis();
+    }
+    /** Append the cache hit-rate and cache-savings KPIs (computed from the current-period runs). */
+    appendCacheKpis() {
+        const totals = { uncachedInputTokens: 0, cacheReadTokens: 0, cacheWriteTokens: 0 };
+        for (const r of this.allRuns) {
+            totals.uncachedInputTokens += r.TokensPrompt ?? 0;
+            totals.cacheReadTokens += r.TokensCacheRead ?? 0;
+            totals.cacheWriteTokens += r.TokensCacheWrite ?? 0;
+        }
+        const savings = this.sumCacheSavings(this.allRuns);
+        const activity = hasCacheActivity(totals);
+        this.CostKpis.push({
+            Label: 'Cache Hit Rate',
+            Value: (cacheHitRate(totals) * 100).toFixed(1) + '%',
+            Delta: null,
+            DeltaDirection: 'stable',
+            Highlighted: false,
+            Icon: 'fa-solid fa-bolt'
+        });
+        // Savings requires cache rates on AIModelCost. When cache engaged but no savings computed,
+        // it means rates aren't configured yet — say so rather than implying $0 was saved.
+        const savingsValue = savings > 0
+            ? this.FormatCurrency(savings)
+            : (activity ? 'Set rates' : '$0.00');
+        this.CostKpis.push({
+            Label: 'Saved via Cache',
+            Value: savingsValue,
+            Delta: null,
+            DeltaDirection: 'stable',
+            Highlighted: savings > 0,
+            Icon: 'fa-solid fa-piggy-bank'
+        });
     }
     computeDailyBars() {
         const buckets = new Map();
@@ -502,6 +600,8 @@ export class AnalyticsCostBudgetComponent extends BaseAngularComponent {
         for (const [, modelRuns] of groups) {
             const inputTokens = modelRuns.reduce((s, r) => s + (r.TokensPrompt ?? 0), 0);
             const outputTokens = modelRuns.reduce((s, r) => s + (r.TokensCompletion ?? 0), 0);
+            const cacheReadTokens = modelRuns.reduce((s, r) => s + (r.TokensCacheRead ?? 0), 0);
+            const cacheWriteTokens = modelRuns.reduce((s, r) => s + (r.TokensCacheWrite ?? 0), 0);
             const cost = modelRuns.reduce((s, r) => s + (r.Cost ?? r.TotalCost ?? 0), 0);
             // Approximate input/output cost split based on token ratio
             const totalTk = inputTokens + outputTokens;
@@ -513,6 +613,10 @@ export class AnalyticsCostBudgetComponent extends BaseAngularComponent {
                 Runs: modelRuns.length,
                 InputTokens: inputTokens,
                 OutputTokens: outputTokens,
+                CacheReadTokens: cacheReadTokens,
+                CacheWriteTokens: cacheWriteTokens,
+                CacheHitRate: cacheHitRate({ uncachedInputTokens: inputTokens, cacheReadTokens, cacheWriteTokens }),
+                CacheSavings: this.sumCacheSavings(modelRuns),
                 InputCost: inputCost,
                 OutputCost: outputCost,
                 TotalCost: cost,
@@ -573,8 +677,8 @@ export class AnalyticsCostBudgetComponent extends BaseAngularComponent {
         URL.revokeObjectURL(url);
     }
     static ɵfac = /*@__PURE__*/ (() => { let ɵAnalyticsCostBudgetComponent_BaseFactory; return function AnalyticsCostBudgetComponent_Factory(__ngFactoryType__) { return (ɵAnalyticsCostBudgetComponent_BaseFactory || (ɵAnalyticsCostBudgetComponent_BaseFactory = i0.ɵɵgetInheritedFactory(AnalyticsCostBudgetComponent)))(__ngFactoryType__ || AnalyticsCostBudgetComponent); }; })();
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AnalyticsCostBudgetComponent, selectors: [["app-analytics-cost-budget"]], inputs: { TimeRange: "TimeRange", Filters: "Filters" }, outputs: { TimeRangeChange: "TimeRangeChange", FiltersChange: "FiltersChange" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 2, vars: 1, consts: [[1, "loading-container"], ["text", "Loading cost data..."], [1, "kpi-row"], [1, "kpi-card", 3, "kpi-card--highlighted"], [1, "two-col"], [1, "panel", "panel-chart"], [1, "panel-header"], [1, "panel-header__title"], [1, "fa-solid", "fa-chart-column", "panel-header__icon"], [1, "chart-body"], [1, "panel-empty"], [1, "bar-chart"], [1, "panel", "panel-treemap"], [1, "fa-solid", "fa-chart-pie", "panel-header__icon"], [1, "treemap-body"], [1, "treemap-grid"], [1, "panel"], [1, "fa-solid", "fa-table", "panel-header__icon"], [1, "export-btn", 3, "click"], [1, "fa-solid", "fa-download"], [1, "table-wrapper"], [1, "data-table"], [1, "col-numeric"], [1, "kpi-card"], [1, "kpi-icon"], [1, "kpi-content"], [1, "kpi-label"], [1, "kpi-value"], [1, "kpi-delta", 3, "kpi-delta--up", "kpi-delta--down"], [1, "kpi-delta"], [1, "fa-solid", "fa-arrow-up"], [1, "fa-solid", "fa-arrow-down"], [1, "bar-chart-area"], [1, "avg-line", 3, "bottom"], [1, "bar-col", 3, "title"], [1, "avg-line"], [1, "avg-label"], [1, "bar"], [1, "bar-label"], [1, "treemap-cell", 3, "background", "flex-basis", "title"], [1, "treemap-cell", 3, "title"], [1, "treemap-label"], [1, "treemap-value"], [1, "treemap-pct"], ["colspan", "9", 1, "empty-row"], [1, "cell-model"], [1, "cell-vendor"], [1, "cell-numeric"], [1, "cell-numeric", "cell-cost"]], template: function AnalyticsCostBudgetComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵconditionalCreate(0, AnalyticsCostBudgetComponent_Conditional_0_Template, 2, 0, "div", 0)(1, AnalyticsCostBudgetComponent_Conditional_1_Template, 54, 3);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AnalyticsCostBudgetComponent, selectors: [["app-analytics-cost-budget"]], inputs: { TimeRange: "TimeRange", Filters: "Filters" }, outputs: { TimeRangeChange: "TimeRangeChange", FiltersChange: "FiltersChange" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 2, vars: 1, consts: [[1, "loading-container"], ["text", "Loading cost data..."], [1, "kpi-row"], [1, "kpi-card", 3, "kpi-card--highlighted"], [1, "two-col"], [1, "panel", "panel-chart"], [1, "panel-header"], [1, "panel-header__title"], [1, "fa-solid", "fa-chart-column", "panel-header__icon"], [1, "chart-body"], [1, "panel-empty"], [1, "bar-chart"], [1, "panel", "panel-treemap"], [1, "fa-solid", "fa-chart-pie", "panel-header__icon"], [1, "treemap-body"], [1, "treemap-grid"], [1, "panel"], [1, "fa-solid", "fa-table", "panel-header__icon"], [1, "export-btn", 3, "click"], [1, "fa-solid", "fa-download"], [1, "table-wrapper"], [1, "data-table"], [1, "col-numeric"], ["title", "Share of input tokens served from the provider's prompt cache", 1, "col-numeric"], ["title", "Net dollars saved by caching vs. full input pricing (requires cache rates on AI Model Costs)", 1, "col-numeric"], [1, "kpi-card"], [1, "kpi-icon"], [1, "kpi-content"], [1, "kpi-label"], [1, "kpi-value"], [1, "kpi-delta", 3, "kpi-delta--up", "kpi-delta--down"], [1, "kpi-delta"], [1, "fa-solid", "fa-arrow-up"], [1, "fa-solid", "fa-arrow-down"], [1, "bar-chart-area"], [1, "avg-line", 3, "bottom"], [1, "bar-col", 3, "title"], [1, "avg-line"], [1, "avg-label"], [1, "bar"], [1, "bar-label"], [1, "treemap-cell", 3, "background", "flex-basis", "title"], [1, "treemap-cell", 3, "title"], [1, "treemap-label"], [1, "treemap-value"], [1, "treemap-pct"], ["colspan", "11", 1, "empty-row"], [1, "cell-model"], [1, "cell-vendor"], [1, "cell-numeric"], [1, "cell-numeric", "cell-cost"]], template: function AnalyticsCostBudgetComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, AnalyticsCostBudgetComponent_Conditional_0_Template, 2, 0, "div", 0)(1, AnalyticsCostBudgetComponent_Conditional_1_Template, 58, 3);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.IsLoading ? 0 : 1);
         } }, dependencies: [i1.LoadingComponent, i2.DecimalPipe], styles: ["[_nghost-%COMP%] { display: block; }\n\n        .loading-container[_ngcontent-%COMP%] {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            min-height: 300px;\n        }\n\n        \n\n        .kpi-row[_ngcontent-%COMP%] {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n            gap: 12px;\n            margin: 16px 0;\n        }\n\n        .kpi-card[_ngcontent-%COMP%] {\n            background: var(--mj-bg-surface);\n            border: 1px solid var(--mj-border-default);\n            border-radius: 10px;\n            padding: 16px;\n            display: flex;\n            align-items: flex-start;\n            gap: 12px;\n            transition: transform 0.2s ease, box-shadow 0.2s ease;\n        }\n\n        .kpi-card[_ngcontent-%COMP%]:hover {\n            transform: translateY(-2px);\n            box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n        }\n\n        .kpi-card--highlighted[_ngcontent-%COMP%] {\n            border-color: var(--mj-brand-primary);\n            background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n        }\n\n        .kpi-icon[_ngcontent-%COMP%] {\n            width: 36px;\n            height: 36px;\n            border-radius: 10px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n            color: var(--mj-brand-primary);\n            font-size: 14px;\n            flex-shrink: 0;\n        }\n\n        .kpi-card--highlighted[_ngcontent-%COMP%]   .kpi-icon[_ngcontent-%COMP%] {\n            background: color-mix(in srgb, var(--mj-brand-primary) 20%, var(--mj-bg-surface));\n        }\n\n        .kpi-label[_ngcontent-%COMP%] {\n            font-size: 11px;\n            font-weight: 600;\n            color: var(--mj-text-muted);\n            text-transform: uppercase;\n            letter-spacing: 0.5px;\n        }\n\n        .kpi-value[_ngcontent-%COMP%] {\n            font-size: 22px;\n            font-weight: 700;\n            color: var(--mj-text-primary);\n            margin: 2px 0;\n            letter-spacing: -0.02em;\n        }\n\n        .kpi-delta[_ngcontent-%COMP%] {\n            font-size: 11px;\n            color: var(--mj-text-muted);\n            display: flex;\n            align-items: center;\n            gap: 3px;\n        }\n\n        .kpi-delta--up[_ngcontent-%COMP%] {\n            color: var(--mj-status-error);\n        }\n\n        .kpi-delta--down[_ngcontent-%COMP%] {\n            color: var(--mj-status-success);\n        }\n\n        \n\n        .two-col[_ngcontent-%COMP%] {\n            display: grid;\n            grid-template-columns: 3fr 2fr;\n            gap: 16px;\n            margin-bottom: 16px;\n        }\n\n        \n\n        .panel[_ngcontent-%COMP%] {\n            background: var(--mj-bg-surface);\n            border: 1px solid var(--mj-border-default);\n            border-radius: 12px;\n            overflow: hidden;\n            margin-bottom: 16px;\n        }\n\n        .panel-header[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            padding: 14px 18px;\n            border-bottom: 1px solid var(--mj-border-subtle);\n        }\n\n        .panel-header__title[_ngcontent-%COMP%] {\n            font-size: 14px;\n            font-weight: 600;\n            color: var(--mj-text-primary);\n            display: flex;\n            align-items: center;\n            gap: 8px;\n        }\n\n        .panel-header__icon[_ngcontent-%COMP%] {\n            font-size: 13px;\n            color: var(--mj-brand-primary);\n        }\n\n        .panel-empty[_ngcontent-%COMP%] {\n            text-align: center;\n            padding: 32px;\n            color: var(--mj-text-disabled);\n            font-size: 13px;\n        }\n\n        .export-btn[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: center;\n            gap: 6px;\n            padding: 5px 12px;\n            border: 1px solid var(--mj-border-default);\n            border-radius: 6px;\n            background: var(--mj-bg-surface);\n            color: var(--mj-text-secondary);\n            font-size: 13px;\n            cursor: pointer;\n            transition: background 0.15s, color 0.15s;\n        }\n\n        .export-btn[_ngcontent-%COMP%]:hover {\n            background: var(--mj-bg-surface-hover);\n            color: var(--mj-text-primary);\n        }\n\n        \n\n        .chart-body[_ngcontent-%COMP%] {\n            padding: 16px 18px;\n        }\n\n        .bar-chart[_ngcontent-%COMP%] {\n            width: 100%;\n        }\n\n        .bar-chart-area[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: flex-end;\n            gap: 4px;\n            height: 180px;\n            position: relative;\n            padding-bottom: 24px;\n        }\n\n        .bar-col[_ngcontent-%COMP%] {\n            flex: 1;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            height: 100%;\n            justify-content: flex-end;\n        }\n\n        .bar[_ngcontent-%COMP%] {\n            width: 100%;\n            max-width: 32px;\n            border-radius: 4px 4px 0 0;\n            background: var(--mj-brand-primary);\n            transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n            min-height: 2px;\n        }\n\n        .bar--anomaly[_ngcontent-%COMP%] {\n            background: var(--mj-status-error);\n        }\n\n        .bar-label[_ngcontent-%COMP%] {\n            font-size: 10px;\n            color: var(--mj-text-muted);\n            margin-top: 4px;\n            white-space: nowrap;\n        }\n\n        .avg-line[_ngcontent-%COMP%] {\n            position: absolute;\n            left: 0;\n            right: 0;\n            border-top: 2px dashed var(--mj-text-disabled);\n            z-index: 1;\n            pointer-events: none;\n        }\n\n        .avg-label[_ngcontent-%COMP%] {\n            position: absolute;\n            right: 0;\n            top: -14px;\n            font-size: 10px;\n            color: var(--mj-text-disabled);\n            font-weight: 600;\n        }\n\n        \n\n        .treemap-body[_ngcontent-%COMP%] {\n            padding: 16px 18px;\n        }\n\n        .treemap-grid[_ngcontent-%COMP%] {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 4px;\n            min-height: 160px;\n        }\n\n        .treemap-cell[_ngcontent-%COMP%] {\n            border-radius: 8px;\n            padding: 12px;\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            min-width: 80px;\n            min-height: 70px;\n            flex-grow: 1;\n            color: var(--mj-text-inverse, white);\n            transition: opacity 0.2s;\n        }\n\n        .treemap-cell[_ngcontent-%COMP%]:hover {\n            opacity: 0.85;\n        }\n\n        .treemap-label[_ngcontent-%COMP%] {\n            font-size: 12px;\n            font-weight: 600;\n            opacity: 0.95;\n        }\n\n        .treemap-value[_ngcontent-%COMP%] {\n            font-size: 16px;\n            font-weight: 700;\n            margin-top: 2px;\n        }\n\n        .treemap-pct[_ngcontent-%COMP%] {\n            font-size: 11px;\n            opacity: 0.8;\n        }\n\n        \n\n        .table-wrapper[_ngcontent-%COMP%] {\n            overflow-x: auto;\n        }\n\n        .data-table[_ngcontent-%COMP%] {\n            width: 100%;\n            border-collapse: collapse;\n            font-size: 13px;\n        }\n\n        .data-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%], \n   .data-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n            padding: 10px 14px;\n            text-align: left;\n            border-bottom: 1px solid var(--mj-border-subtle);\n        }\n\n        .data-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n            font-size: 11px;\n            font-weight: 600;\n            color: var(--mj-text-muted);\n            text-transform: uppercase;\n            letter-spacing: 0.4px;\n            background: var(--mj-bg-surface-card);\n            position: sticky;\n            top: 0;\n            white-space: nowrap;\n        }\n\n        .col-numeric[_ngcontent-%COMP%] { text-align: right; }\n\n        .data-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%] {\n            transition: background 0.15s;\n        }\n\n        .data-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\n            background: var(--mj-bg-surface-hover);\n        }\n\n        .cell-model[_ngcontent-%COMP%] {\n            font-weight: 500;\n            color: var(--mj-text-primary);\n        }\n\n        .cell-vendor[_ngcontent-%COMP%] {\n            color: var(--mj-text-secondary);\n        }\n\n        .cell-numeric[_ngcontent-%COMP%] {\n            text-align: right;\n            font-variant-numeric: tabular-nums;\n            color: var(--mj-text-secondary);\n        }\n\n        .cell-cost[_ngcontent-%COMP%] {\n            font-weight: 600;\n            color: var(--mj-text-primary);\n        }\n\n        .empty-row[_ngcontent-%COMP%] {\n            text-align: center;\n            color: var(--mj-text-disabled);\n            padding: 24px;\n        }\n\n        \n\n        @media (max-width: 1200px) {\n            .two-col[_ngcontent-%COMP%] {\n                grid-template-columns: 1fr;\n            }\n        }\n\n        @media (max-width: 768px) {\n            .kpi-row[_ngcontent-%COMP%] {\n                grid-template-columns: repeat(2, 1fr);\n            }\n\n            .kpi-value[_ngcontent-%COMP%] {\n                font-size: 18px;\n            }\n        }"] });
@@ -703,15 +807,17 @@ export class AnalyticsCostBudgetComponent extends BaseAngularComponent {
                                 <th class="col-numeric">Runs</th>
                                 <th class="col-numeric">Input Tokens</th>
                                 <th class="col-numeric">Output Tokens</th>
+                                <th class="col-numeric" title="Share of input tokens served from the provider's prompt cache">Cache Hit</th>
                                 <th class="col-numeric">Input Cost</th>
                                 <th class="col-numeric">Output Cost</th>
                                 <th class="col-numeric">Total Cost</th>
+                                <th class="col-numeric" title="Net dollars saved by caching vs. full input pricing (requires cache rates on AI Model Costs)">Cache Saved</th>
                                 <th class="col-numeric">% of Total</th>
                             </tr>
                         </thead>
                         <tbody>
                             @if (CostByModelRows.length === 0) {
-                                <tr><td colspan="9" class="empty-row">No data available</td></tr>
+                                <tr><td colspan="11" class="empty-row">No data available</td></tr>
                             }
                             @for (row of CostByModelRows; track row.Model) {
                                 <tr>
@@ -720,9 +826,11 @@ export class AnalyticsCostBudgetComponent extends BaseAngularComponent {
                                     <td class="cell-numeric">{{ row.Runs | number }}</td>
                                     <td class="cell-numeric">{{ row.InputTokens | number }}</td>
                                     <td class="cell-numeric">{{ row.OutputTokens | number }}</td>
+                                    <td class="cell-numeric">{{ (row.CacheReadTokens + row.CacheWriteTokens) > 0 ? ((row.CacheHitRate * 100 | number:'1.0-0') + '%') : '—' }}</td>
                                     <td class="cell-numeric">{{ FormatCurrency(row.InputCost, 4) }}</td>
                                     <td class="cell-numeric">{{ FormatCurrency(row.OutputCost, 4) }}</td>
                                     <td class="cell-numeric cell-cost">{{ FormatCurrency(row.TotalCost) }}</td>
+                                    <td class="cell-numeric">{{ row.CacheSavings > 0 ? FormatCurrency(row.CacheSavings, 4) : '—' }}</td>
                                     <td class="cell-numeric">{{ row.PercentOfTotal | number:'1.1-1' }}%</td>
                                 </tr>
                             }
@@ -741,6 +849,6 @@ export class AnalyticsCostBudgetComponent extends BaseAngularComponent {
         }], FiltersChange: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AnalyticsCostBudgetComponent, { className: "AnalyticsCostBudgetComponent", filePath: "src/AI/components/analytics/cost-budget/cost-budget.component.ts", lineNumber: 589 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AnalyticsCostBudgetComponent, { className: "AnalyticsCostBudgetComponent", filePath: "src/AI/components/analytics/cost-budget/cost-budget.component.ts", lineNumber: 618 }); })();
 export function LoadAnalyticsCostBudget() { }
 //# sourceMappingURL=cost-budget.component.js.map