From 6f2e928542f28e4aea7e9aac7d3c9f4affe1a044 Mon Sep 17 00:00:00 2001
From: Marco Minerva <marco.minerva@gmail.com>
Date: Tue, 28 Jul 2026 15:56:59 +0200
Subject: [PATCH] Refactor token usage HTML generation for clarity

Refactored HTML generation by introducing a sections array for easier extension and maintainability. Updated FormatTokenUsageDetails to require non-null UsageDetails and display reasoning tokens as a detail within output tokens, improving clarity and reducing redundancy. Only non-null sections are rendered, simplifying the logic.
---
 .../Components/Pages/Ask.razor                | 35 ++++++++++---------
 1 file changed, 19 insertions(+), 16 deletions(-)

diff --git a/SqlDatabaseVectorSearch/Components/Pages/Ask.razor b/SqlDatabaseVectorSearch/Components/Pages/Ask.razor
index c160568..b480a77 100644
--- a/SqlDatabaseVectorSearch/Components/Pages/Ask.razor
+++ b/SqlDatabaseVectorSearch/Components/Pages/Ask.razor
@@ -262,26 +262,29 @@
             return string.Empty;
         }
 
-        var reformulation = tokenUsageResponse.Reformulation is not null
-            ? $"<p><strong>Reformulation:</strong><br />{FormatTokenUsageDetails(tokenUsageResponse.Reformulation)}</p>"
-            : string.Empty;
+        (string Label, UsageDetails? Usage)[] sections =
+        [
+            ("Reformulation", tokenUsageResponse.Reformulation),
+            ("Question", tokenUsageResponse.Question)
+        ];
 
-        var question = tokenUsageResponse.Question is not null
-            ? $"<p><strong>Question:</strong><br />{FormatTokenUsageDetails(tokenUsageResponse.Question)}</p>"
-            : string.Empty;
+        return string.Concat(sections
+            .Where(section => section.Usage is not null)
+            .Select(section => $"<p><strong>{section.Label}:</strong><br />{FormatTokenUsageDetails(section.Usage!)}</p>"));
 
-        return $"{reformulation}{question}";
-
-        static string FormatTokenUsageDetails(UsageDetails? tokenUsage)
+        static string FormatTokenUsageDetails(UsageDetails tokenUsage)
         {
-            if (tokenUsage is null)
-            {
-                return string.Empty;
-            }
+            // Reasoning tokens are part of the output tokens, so they're shown as a detail of that value.
+            var outputTokens = tokenUsage.ReasoningTokenCount is > 0 and var reasoningTokenCount
+                ? $"Output tokens: {tokenUsage.OutputTokenCount} (including {reasoningTokenCount} reasoning tokens)"
+                : $"Output tokens: {tokenUsage.OutputTokenCount}";
 
-            return $"Input tokens: {tokenUsage.InputTokenCount}<br />" +
-                   $"Output tokens: {tokenUsage.OutputTokenCount}<br />" +
-                   $"Total tokens: {tokenUsage.TotalTokenCount}";
+            return string.Join("<br />",
+            [
+                $"Input tokens: {tokenUsage.InputTokenCount}",
+                outputTokens,
+                $"Total tokens: {tokenUsage.TotalTokenCount}"
+            ]);
         }
     }