From 0016b8fce7c9b93c396b7202a417e1951bfccd8e Mon Sep 17 00:00:00 2001
From: Owen <owen@txv.io>
Date: Tue, 11 Aug 2026 16:40:10 -0400
Subject: [PATCH] show other tokens on the expanded row

---
 messages/en-US.json                       | 10 +++-
 src/app/[orgId]/settings/logs/ai/page.tsx | 67 +++++++++++++++++++----
 2 files changed, 63 insertions(+), 14 deletions(-)

diff --git a/messages/en-US.json b/messages/en-US.json
index b0743f631..6444dbdd8 100644
--- a/messages/en-US.json
+++ b/messages/en-US.json
@@ -3412,9 +3412,15 @@
     "aiSessionLogTruncated": "This session was truncated before storage and may be incomplete.",
     "aiSessionViewRaw": "View Raw JSON",
     "aiSessionViewChat": "View Chat",
-    "tokens": "Tokens",
     "cost": "Cost",
-    "estimated": "estimated",
+    "estimated": "Estimated",
+    "tokenUsage": "Token Usage",
+    "promptTokens": "Prompt Tokens",
+    "cacheReadTokens": "Cache Read Tokens",
+    "cacheWriteTokens": "Cache Write Tokens",
+    "completionTokens": "Completion Tokens",
+    "reasoningTokens": "Reasoning Tokens",
+    "totalTokens": "Total Tokens",
     "requestAnalyticsDescription": "View detailed request analytics for resources in this organization",
     "logRetentionRequestLabel": "HTTP Request Log Retention",
     "logRetentionRequestDescription": "How long to retain request logs",
diff --git a/src/app/[orgId]/settings/logs/ai/page.tsx b/src/app/[orgId]/settings/logs/ai/page.tsx
index 7330db111..5d51c118b 100644
--- a/src/app/[orgId]/settings/logs/ai/page.tsx
+++ b/src/app/[orgId]/settings/logs/ai/page.tsx
@@ -472,18 +472,6 @@ export default function AiSessionLogsPage() {
                             {row.statusCode ?? "N/A"}
                         </p>
                     </div>
-                    <div>
-                        <strong>{t("tokens")}</strong>
-                        <p className="text-muted-foreground mt-1">
-                            {row.usage
-                                ? `${row.usage.totalTokens.toLocaleString()}${
-                                      row.usage.estimated
-                                          ? ` (${t("estimated")})`
-                                          : ""
-                                  }`
-                                : "N/A"}
-                        </p>
-                    </div>
                     <div>
                         <strong>{t("cost")}</strong>
                         <p className="text-muted-foreground mt-1">
@@ -492,7 +480,62 @@ export default function AiSessionLogsPage() {
                                 : "N/A"}
                         </p>
                     </div>
+                    <div>
+                        <strong>{t("estimated")}</strong>
+                        <p className="text-muted-foreground mt-1">
+                            {row.usage
+                                ? row.usage.estimated
+                                    ? t("yes")
+                                    : t("no")
+                                : "N/A"}
+                        </p>
+                    </div>
                 </div>
+                {row.usage && (
+                    <div>
+                        <div className="text-xs font-medium mb-2">
+                            {t("tokenUsage")}
+                        </div>
+                        <div className="grid grid-cols-3 sm:grid-cols-6 gap-4 text-xs">
+                            <div>
+                                <strong>{t("promptTokens")}</strong>
+                                <p className="text-muted-foreground mt-1">
+                                    {row.usage.promptTokens.toLocaleString()}
+                                </p>
+                            </div>
+                            <div>
+                                <strong>{t("cacheReadTokens")}</strong>
+                                <p className="text-muted-foreground mt-1">
+                                    {row.usage.cacheReadTokens.toLocaleString()}
+                                </p>
+                            </div>
+                            <div>
+                                <strong>{t("cacheWriteTokens")}</strong>
+                                <p className="text-muted-foreground mt-1">
+                                    {row.usage.cacheWriteTokens.toLocaleString()}
+                                </p>
+                            </div>
+                            <div>
+                                <strong>{t("completionTokens")}</strong>
+                                <p className="text-muted-foreground mt-1">
+                                    {row.usage.completionTokens.toLocaleString()}
+                                </p>
+                            </div>
+                            <div>
+                                <strong>{t("reasoningTokens")}</strong>
+                                <p className="text-muted-foreground mt-1">
+                                    {row.usage.reasoningTokens.toLocaleString()}
+                                </p>
+                            </div>
+                            <div>
+                                <strong>{t("totalTokens")}</strong>
+                                <p className="text-muted-foreground mt-1">
+                                    {row.usage.totalTokens.toLocaleString()}
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                )}
                 <AiSessionChatView
                     normalizedRequest={row.normalizedRequest}
                     normalizedResponse={row.normalizedResponse}