From 4e2e88536120b1a966490ab4b08e46b113033cd4 Mon Sep 17 00:00:00 2001
From: Gurjot Singh <gurjot14143132@gmail.com>
Date: Thu, 20 Aug 2026 00:57:53 +0530
Subject: [PATCH] feat: total cached-content and reasoning tokens in session
 usage summary

The event tab's per-event usage view already renders every usageMetadata
field, but the "Usage Summary for Session" totals aggregated only prompt,
candidates, and total tokens. Cached-content (cache-read) and thoughts
(reasoning) tokens were invisible at the session level, even though they
matter for cost tracking.

Sum cachedContentTokenCount and thoughtsTokenCount across the session's
events and add "Total Cached Content Tokens" and "Total Thoughts Tokens"
rows to the session summary. Each row renders only when its total is
greater than zero, so sessions without caching or reasoning are unchanged.
---
 .../components/event-tab/event-tab.component.html    | 12 ++++++++++++
 src/app/components/event-tab/event-tab.component.ts  |  8 ++++++++
 2 files changed, 20 insertions(+)

diff --git a/src/app/components/event-tab/event-tab.component.html b/src/app/components/event-tab/event-tab.component.html
index 9356b690..deab4e20 100644
--- a/src/app/components/event-tab/event-tab.component.html
+++ b/src/app/components/event-tab/event-tab.component.html
@@ -245,10 +245,22 @@
             <td>Total Prompt Tokens</td>
             <td class="numeric-cell">{{ sessionUsageMetadata()['Prompt Tokens'] | number }}</td>
           </tr>
+          @if (sessionUsageMetadata()['Cached Content Tokens'] > 0) {
+          <tr>
+            <td>Total Cached Content Tokens</td>
+            <td class="numeric-cell">{{ sessionUsageMetadata()['Cached Content Tokens'] | number }}</td>
+          </tr>
+          }
           <tr>
             <td>Total Candidates Tokens</td>
             <td class="numeric-cell">{{ sessionUsageMetadata()['Candidates Tokens'] | number }}</td>
           </tr>
+          @if (sessionUsageMetadata()['Thoughts Tokens'] > 0) {
+          <tr>
+            <td>Total Thoughts Tokens</td>
+            <td class="numeric-cell">{{ sessionUsageMetadata()['Thoughts Tokens'] | number }}</td>
+          </tr>
+          }
           <tr>
             <td>Total Tokens</td>
             <td class="numeric-cell">{{ sessionUsageMetadata()['Total Tokens'] | number }}</td>
diff --git a/src/app/components/event-tab/event-tab.component.ts b/src/app/components/event-tab/event-tab.component.ts
index d3398c99..cb27ba33 100644
--- a/src/app/components/event-tab/event-tab.component.ts
+++ b/src/app/components/event-tab/event-tab.component.ts
@@ -190,6 +190,8 @@ export class EventTabComponent {
     const allEvents = Array.from(this.eventDataMap().values());
     let totalPromptTokens = 0;
     let totalCandidatesTokens = 0;
+    let totalCachedContentTokens = 0;
+    let totalThoughtsTokens = 0;
     let totalTokens = 0;
 
     allEvents.forEach(ev => {
@@ -197,10 +199,14 @@ export class EventTabComponent {
       if (metadata) {
         const prompt = metadata.promptTokenCount ?? metadata.promptTokens ?? 0;
         const candidates = metadata.candidatesTokenCount ?? metadata.candidatesTokens ?? 0;
+        const cachedContent = metadata.cachedContentTokenCount ?? metadata.cachedContentTokens ?? 0;
+        const thoughts = metadata.thoughtsTokenCount ?? metadata.thoughtsTokens ?? 0;
         const total = metadata.totalTokenCount ?? metadata.totalTokens ?? 0;
 
         totalPromptTokens += Number(prompt);
         totalCandidatesTokens += Number(candidates);
+        totalCachedContentTokens += Number(cachedContent);
+        totalThoughtsTokens += Number(thoughts);
         totalTokens += Number(total);
       }
     });
@@ -208,6 +214,8 @@ export class EventTabComponent {
     return {
       'Prompt Tokens': totalPromptTokens,
       'Candidates Tokens': totalCandidatesTokens,
+      'Cached Content Tokens': totalCachedContentTokens,
+      'Thoughts Tokens': totalThoughtsTokens,
       'Total Tokens': totalTokens
     };
   });