1  'use client'
 2  
 3  interface Props {
 4    inputTokens: number
 5    outputTokens: number
 6    totalTokens: number
 7    estimatedCost: number
 8  }
 9  
10  export function UsageBadge({ totalTokens, estimatedCost }: Props) {
11    if (!totalTokens) return null
12  
13    const costStr = estimatedCost < 0.001
14      ? '<$0.001'
15      : `$${estimatedCost.toFixed(3)}`
16  
17    const tokenStr = totalTokens >= 1000
18      ? `${(totalTokens / 1000).toFixed(1)}k`
19      : String(totalTokens)
20  
21    return (
22      <span className="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-[7px] bg-white/[0.04] text-[10px] font-mono text-text-3/60">
23        <span>{tokenStr} tok</span>
24        <span className="text-text-3/60">·</span>
25        <span className="text-emerald-400/60">{costStr}</span>
26      </span>
27    )
28  }