conversation hover token info

Author: yarin-mag

apps/web/src/features/agents/components/ConversationMessage.tsx

@@ -1,4 +1,4 @@
-import { Bot, User } from 'lucide-react';
+import { Bot, User, Info } from 'lucide-react';
 import { cn, formatTime, formatTokens } from '../../../lib/utils';
 import ReactMarkdown from 'react-markdown';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
@@ -111,11 +111,29 @@ export function ConversationMessage({ turn }: ConversationMessageProps) {
               'text-xs mt-1 flex items-center gap-1.5 flex-wrap',
               isUser ? 'opacity-70' : 'text-muted-foreground/60'
             )}>
-              <span>↑ {formatTokens(turn.tokens.input_tokens ?? 0)}</span>
+              <span className="relative group/in flex items-center gap-1 cursor-default">
+                <span>↑ {formatTokens(turn.tokens.input_tokens ?? 0)}</span>
+                <span className="pointer-events-none absolute bottom-full left-0 mb-1.5 w-44 rounded-md bg-popover border border-border px-2.5 py-1.5 text-[11px] leading-snug text-popover-foreground shadow-md opacity-0 group-hover/in:opacity-100 transition-opacity z-50">
+                  Input tokens — context sent to the model for this turn
+                </span>
+              </span>
+              {isUser && (turn.tokens.input_tokens ?? 0) > 50 && (
+                <span className="relative group/hint">
+                  <Info className="h-3 w-3 opacity-50 cursor-default" />
+                  <span className="pointer-events-none absolute bottom-full right-0 mb-1.5 w-52 rounded-md bg-popover border border-border px-2.5 py-1.5 text-[11px] leading-snug text-popover-foreground shadow-md opacity-0 group-hover/hint:opacity-100 transition-opacity z-50">
+                    Includes system prompt tokens sent with the first message of this run
+                  </span>
+                </span>
+              )}
               {(turn.tokens.output_tokens ?? 0) > 0 && (
                 <>
                   <span className="opacity-40">·</span>
-                  <span>↓ {formatTokens(turn.tokens.output_tokens ?? 0)}</span>
+                  <span className="relative group/out flex items-center gap-1 cursor-default">
+                    <span>↓ {formatTokens(turn.tokens.output_tokens ?? 0)}</span>
+                    <span className="pointer-events-none absolute bottom-full left-0 mb-1.5 w-44 rounded-md bg-popover border border-border px-2.5 py-1.5 text-[11px] leading-snug text-popover-foreground shadow-md opacity-0 group-hover/out:opacity-100 transition-opacity z-50">
+                      Output tokens — text generated by the model in this turn
+                    </span>
+                  </span>
                 </>
               )}
             </div>