small improvement

Author: brendan-kellam

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 - Added `find_symbol_definitions`, and `find_symbol_references` tools to the MCP server. [#1014](https://github.com/sourcebot-dev/sourcebot/pull/1014)
 - Added `list_tree` tool to the ask agent. [#1014](https://github.com/sourcebot-dev/sourcebot/pull/1014)
+- Added input & output token breakdown in ask details card. [#1014](https://github.com/sourcebot-dev/sourcebot/pull/1014)
 
 ### Fixed
 - Fixed issue where ask responses would sometimes appear in the details panel while generating. [#1014](https://github.com/sourcebot-dev/sourcebot/pull/1014)

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

@@ -5,7 +5,7 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/component
 import { Separator } from '@/components/ui/separator';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
-import { cn } from '@/lib/utils';
+import { cn, getShortenedNumberDisplayString } from '@/lib/utils';
 import { Brain, ChevronDown, ChevronRight, Clock, InfoIcon, Loader2, List, ScanSearchIcon, Zap } from 'lucide-react';
 import { memo, useCallback } from 'react';
 import useCaptureEvent from '@/hooks/useCaptureEvent';
@@ -106,15 +106,35 @@ const DetailsCardComponent = ({
                                             </div>
                                         )}
                                         {metadata?.totalTokens && (
-                                            <div className="flex items-center text-xs">
-                                                <Zap className="w-3 h-3 mr-1 flex-shrink-0" />
-                                                {metadata?.totalTokens} tokens
-                                            </div>
+                                            <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
+                                                    </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>
+                                                        <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>
                                         )}
                                         {metadata?.totalResponseTimeMs && (
                                             <div className="flex items-center text-xs">
                                                 <Clock className="w-3 h-3 mr-1 flex-shrink-0" />
-                                                {metadata?.totalResponseTimeMs / 1000} seconds
+                                                {Math.round(metadata.totalResponseTimeMs / 1000)} seconds
                                             </div>
                                         )}
                                         <div className="flex items-center text-xs">

packages/web/src/lib/utils.ts

@@ -507,13 +507,13 @@ export const getFormattedDate = (date: Date) => {
 /**
  * Converts a number to a string
  */
-export const getShortenedNumberDisplayString = (number: number) => {
+export const getShortenedNumberDisplayString = (number: number, fractionDigits: number = 1) => {
     if (number < 1000) {
         return number.toString();
     } else if (number < 1000000) {
-        return `${(number / 1000).toFixed(1)}k`;
+        return `${(number / 1000).toFixed(fractionDigits)}k`;
     } else {
-        return `${(number / 1000000).toFixed(1)}m`;
+        return `${(number / 1000000).toFixed(fractionDigits)}m`;
     }
 }