From 96c81b7dc35a8e6f4ddadb02d7fa4a86ddf46b4b Mon Sep 17 00:00:00 2001
From: Marco Minerva <marco.minerva@gmail.com>
Date: Tue, 28 Jul 2026 16:04:13 +0200
Subject: [PATCH] Improve output token usage display formatting

Refactored the output token usage details to show reasoning tokens as an indented HTML line using a <span> with Bootstrap classes for indentation and smaller text, instead of a parenthetical note. Updated logic to use ReasoningTokenCount.HasValue for improved clarity.
---
 SqlDatabaseVectorSearch/Components/Pages/Ask.razor | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/SqlDatabaseVectorSearch/Components/Pages/Ask.razor b/SqlDatabaseVectorSearch/Components/Pages/Ask.razor
index b480a77..7becdaa 100644
--- a/SqlDatabaseVectorSearch/Components/Pages/Ask.razor
+++ b/SqlDatabaseVectorSearch/Components/Pages/Ask.razor
@@ -274,9 +274,9 @@
 
         static string FormatTokenUsageDetails(UsageDetails tokenUsage)
         {
-            // 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)"
+            // Reasoning tokens are part of the output tokens, so they're shown as an indented detail of that value.
+            var outputTokens = tokenUsage.ReasoningTokenCount is > 0 
+                ? $"Output tokens: {tokenUsage.OutputTokenCount}<br /><span class=\"ms-3 small\">&bull; Reasoning: {tokenUsage.ReasoningTokenCount}</span>"
                 : $"Output tokens: {tokenUsage.OutputTokenCount}";
 
             return string.Join("<br />",