Update cached token usage display to have it's own more helpful tooltip

Author: jsourcebot

packages/web/src/ee/features/chat/components/chatThread/detailsCard.tsx

@@ -60,8 +60,9 @@ const DetailsCardComponent = ({
     ).length, [thinkingSteps]);
 
     const cacheReadTokens = metadata?.totalCacheReadTokens ?? 0;
-    const cachedInputPercent = metadata?.totalInputTokens
-        ? Math.round((cacheReadTokens / metadata.totalInputTokens) * 100)
+    const inputTokens = metadata?.totalInputTokens ?? 0;
+    const cachedInputPercent = inputTokens > 0
+        ? Math.round((cacheReadTokens / inputTokens) * 100)
         : 0;
 
     const handleExpandedChanged = useCallback((next: boolean) => {
@@ -132,39 +133,44 @@ const DetailsCardComponent = ({
                                             </div>
                                         )}
                                         {metadata?.totalTokens && (
-                                            <Tooltip>
-                                                <TooltipTrigger asChild>
-                                                    <div className="flex items-center text-xs cursor-help">
-                                                        <Zap className="w-3 h-3 mr-1 flex-shrink-0" />
-                                                        {getShortenedNumberDisplayString(metadata.totalTokens, 0)} tokens
-                                                        {cachedInputPercent > 0 && (
-                                                            <span className="ml-1 text-muted-foreground">({cachedInputPercent}% cached)</span>
-                                                        )}
-                                                    </div>
-                                                </TooltipTrigger>
-                                                <TooltipContent side="bottom">
-                                                    <div className="space-y-1 text-xs">
-                                                        <div className="flex justify-between gap-4">
-                                                            <span className="text-muted-foreground">Input</span>
-                                                            <span>{metadata.totalInputTokens?.toLocaleString() ?? '—'}</span>
+                                            <div className="flex items-center gap-1.5 text-xs">
+                                                <Tooltip>
+                                                    <TooltipTrigger asChild>
+                                                        <div className="flex items-center cursor-help">
+                                                            <Zap className="w-3 h-3 mr-1 flex-shrink-0" />
+                                                            {getShortenedNumberDisplayString(metadata.totalTokens, 0)} tokens
                                                         </div>
-                                                        {cacheReadTokens > 0 && (
-                                                            <div className="flex justify-between gap-4 pl-3">
-                                                                <span className="text-muted-foreground">↳ Cached (discounted)</span>
-                                                                <span>{cacheReadTokens.toLocaleString()}</span>
+                                                    </TooltipTrigger>
+                                                    <TooltipContent side="bottom">
+                                                        <div className="space-y-1 text-xs">
+                                                            <div className="flex justify-between gap-4">
+                                                                <span className="text-muted-foreground">Input</span>
+                                                                <span>{metadata.totalInputTokens?.toLocaleString() ?? '—'}</span>
+                                                            </div>
+                                                            <div className="flex justify-between gap-4">
+                                                                <span className="text-muted-foreground">Output</span>
+                                                                <span>{metadata.totalOutputTokens?.toLocaleString() ?? '—'}</span>
+                                                            </div>
+                                                            <div className="flex justify-between gap-4 border-t border-border pt-1">
+                                                                <span className="text-muted-foreground">Total</span>
+                                                                <span>{metadata.totalTokens.toLocaleString()}</span>
                                                             </div>
-                                                        )}
-                                                        <div className="flex justify-between gap-4">
-                                                            <span className="text-muted-foreground">Output</span>
-                                                            <span>{metadata.totalOutputTokens?.toLocaleString() ?? '—'}</span>
-                                                        </div>
-                                                        <div className="flex justify-between gap-4 border-t border-border pt-1">
-                                                            <span className="text-muted-foreground">Total</span>
-                                                            <span>{metadata.totalTokens.toLocaleString()}</span>
                                                         </div>
-                                                    </div>
-                                                </TooltipContent>
-                                            </Tooltip>
+                                                    </TooltipContent>
+                                                </Tooltip>
+                                                {cachedInputPercent > 0 && (
+                                                    <Tooltip>
+                                                        <TooltipTrigger asChild>
+                                                            <span className="text-muted-foreground cursor-help">({cachedInputPercent}% cached)</span>
+                                                        </TooltipTrigger>
+                                                        <TooltipContent side="bottom">
+                                                            <div className="max-w-xs text-xs">
+                                                                {cacheReadTokens.toLocaleString()} of {inputTokens.toLocaleString()} input tokens were read from the model provider prompt cache. Cached tokens are typically billed at a fraction of the cost of regular input tokens, so the real cost is lower than the token count suggests.
+                                                            </div>
+                                                        </TooltipContent>
+                                                    </Tooltip>
+                                                )}
+                                            </div>
                                         )}
                                         {metadata?.totalResponseTimeMs && (
                                             <div className="flex items-center text-xs">