fix: prevent DeepSeek token overflow with product-level limits (#1431)

* feat: enforce strategy limits to prevent token overflow

* fix: tune token limits after real-world testing

- Relax kline max 20→30, timeframes 3→4 (tested ~41K tokens, safe under 131K)
- Restore ranking limits to original [5,10,15,20] options (only ~1.5K token impact)
- Add static coins limit (max 3) with toast notification
- Add timeframe limit toast when exceeding 4
- Log SSE token usage (prompt/completion/total) from API response
- Fix nil logger crash in claw402 data client (engine.go)

* feat: add token estimation functionality for strategy configurations

* feat: add discard changes button in Strategy Studio for unsaved modifications

* feat: retain selected strategy after saving in Strategy Studio

* feat: enhance strategy display in Strategy Studio with improved layout and sorting of token limits

* refactor: improve layout and styling of stats display in CompetitionPage

* refactor: replace select elements with NofxSelect component for improved consistency in strategy configuration forms

* style: update NofxSelect component to use smaller text size for improved readability

* feat: implement token overflow handling in strategy updates and UI

---------

Co-authored-by: Dean <afei.wuhao@gmail.com>

web/src/components/strategy/CoinSourceEditor.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { Plus, X, Database, TrendingUp, TrendingDown, List, Ban, Zap, Shuffle } from 'lucide-react'
 import type { CoinSourceConfig } from '../../types'
 import { coinSource, ts } from '../../i18n/strategy-translations'
+import { NofxSelect } from '../ui/select'
 
 interface CoinSourceEditorProps {
   config: CoinSourceConfig
@@ -24,7 +25,6 @@ export function CoinSourceEditor({
     { value: 'ai500', icon: Database, color: '#F0B90B' },
     { value: 'oi_top', icon: TrendingUp, color: '#0ECB81' },
     { value: 'oi_low', icon: TrendingDown, color: '#F6465D' },
-    { value: 'mixed', icon: Shuffle, color: '#60a5fa' },
   ] as const
 
   // Calculate mixed mode summary
@@ -71,8 +71,26 @@ export function CoinSourceEditor({
     return xyzDexAssets.has(base)
   }
 
+  const MAX_STATIC_COINS = 3
+
+  const showToast = (msg: string) => {
+    const toast = document.createElement('div')
+    toast.textContent = msg
+    toast.className = 'fixed top-4 left-1/2 -translate-x-1/2 px-4 py-2 rounded-lg text-sm z-50 shadow-lg'
+    toast.style.cssText = 'background:#F6465D;color:#fff;'
+    document.body.appendChild(toast)
+    setTimeout(() => toast.remove(), 2000)
+  }
+
   const handleAddCoin = () => {
     if (!newCoin.trim()) return
+
+    const currentCoins = config.static_coins || []
+    if (currentCoins.length >= MAX_STATIC_COINS) {
+      showToast(language === 'zh' ? `最多添加 ${MAX_STATIC_COINS} 个币种` : `Maximum ${MAX_STATIC_COINS} coins allowed`)
+      return
+    }
+
     const symbol = newCoin.toUpperCase().trim()
 
     // For xyz dex assets (stocks, forex, commodities), use xyz: prefix without USDT
@@ -85,7 +103,6 @@ export function CoinSourceEditor({
       formattedSymbol = symbol.endsWith('USDT') ? symbol : `${symbol}USDT`
     }
 
-    const currentCoins = config.static_coins || []
     if (!currentCoins.includes(formattedSymbol)) {
       onChange({
         ...config,
@@ -148,7 +165,7 @@ export function CoinSourceEditor({
         <label className="block text-sm font-medium mb-3 text-nofx-text">
           {ts(coinSource.sourceType, language)}
         </label>
-        <div className="grid grid-cols-5 gap-2">
+        <div className="grid grid-cols-4 gap-2">
           {sourceTypes.map(({ value, icon: Icon, color }) => (
             <button
               key={value}
@@ -309,19 +326,16 @@ export function CoinSourceEditor({
                 <span className="text-sm text-nofx-text-muted">
                   {ts(coinSource.ai500Limit, language)}:
                 </span>
-                <select
+                <NofxSelect
                   value={config.ai500_limit || 10}
-                  onChange={(e) =>
+                  onChange={(val) =>
                     !disabled &&
-                    onChange({ ...config, ai500_limit: parseInt(e.target.value) || 10 })
+                    onChange({ ...config, ai500_limit: parseInt(val) || 10 })
                   }
                   disabled={disabled}
+                  options={[1, 2, 3].map(n => ({ value: n, label: String(n) }))}
                   className="px-3 py-1.5 rounded bg-nofx-bg border border-nofx-gold/20 text-nofx-text"
-                >
-                  {[5, 10, 15, 20, 30, 50].map(n => (
-                    <option key={n} value={n}>{n}</option>
-                  ))}
-                </select>
+                />
               </div>
             )}
 
@@ -366,19 +380,16 @@ export function CoinSourceEditor({
                 <span className="text-sm text-nofx-text-muted">
                   {ts(coinSource.oiTopLimit, language)}:
                 </span>
-                <select
+                <NofxSelect
                   value={config.oi_top_limit || 10}
-                  onChange={(e) =>
+                  onChange={(val) =>
                     !disabled &&
-                    onChange({ ...config, oi_top_limit: parseInt(e.target.value) || 10 })
+                    onChange({ ...config, oi_top_limit: parseInt(val) || 10 })
                   }
                   disabled={disabled}
+                  options={[1, 2, 3].map(n => ({ value: n, label: String(n) }))}
                   className="px-3 py-1.5 rounded bg-nofx-bg border border-nofx-gold/20 text-nofx-text"
-                >
-                  {[5, 10, 15, 20, 30, 50].map(n => (
-                    <option key={n} value={n}>{n}</option>
-                  ))}
-                </select>
+                />
               </div>
             )}
 
@@ -423,19 +434,16 @@ export function CoinSourceEditor({
                 <span className="text-sm text-nofx-text-muted">
                   {ts(coinSource.oiLowLimit, language)}:
                 </span>
-                <select
+                <NofxSelect
                   value={config.oi_low_limit || 10}
-                  onChange={(e) =>
+                  onChange={(val) =>
                     !disabled &&
-                    onChange({ ...config, oi_low_limit: parseInt(e.target.value) || 10 })
+                    onChange({ ...config, oi_low_limit: parseInt(val) || 10 })
                   }
                   disabled={disabled}
+                  options={[1, 2, 3].map(n => ({ value: n, label: String(n) }))}
                   className="px-3 py-1.5 rounded bg-nofx-bg border border-nofx-gold/20 text-nofx-text"
-                >
-                  {[5, 10, 15, 20, 30, 50].map(n => (
-                    <option key={n} value={n}>{n}</option>
-                  ))}
-                </select>
+                />
               </div>
             )}
 
@@ -483,20 +491,13 @@ export function CoinSourceEditor({
               {config.use_ai500 && (
                 <div className="flex items-center gap-2 mt-2 pl-6">
                   <span className="text-xs text-nofx-text-muted">Limit:</span>
-                  <select
+                  <NofxSelect
                     value={config.ai500_limit || 10}
-                    onChange={(e) => {
-                      e.stopPropagation()
-                      !disabled && onChange({ ...config, ai500_limit: parseInt(e.target.value) || 10 })
-                    }}
+                    onChange={(val) => !disabled && onChange({ ...config, ai500_limit: parseInt(val) || 10 })}
                     disabled={disabled}
+                    options={[5, 10, 15, 20, 30, 50].map(n => ({ value: n, label: String(n) }))}
                     className="px-2 py-1 rounded text-xs bg-nofx-bg border border-nofx-gold/20 text-nofx-text"
-                    onClick={(e) => e.stopPropagation()}
-                  >
-                    {[5, 10, 15, 20, 30, 50].map(n => (
-                      <option key={n} value={n}>{n}</option>
-                    ))}
-                  </select>
+                  />
                 </div>
               )}
             </div>
@@ -530,20 +531,13 @@ export function CoinSourceEditor({
               {config.use_oi_top && (
                 <div className="flex items-center gap-2 mt-2 pl-6">
                   <span className="text-xs text-nofx-text-muted">Limit:</span>
-                  <select
+                  <NofxSelect
                     value={config.oi_top_limit || 10}
-                    onChange={(e) => {
-                      e.stopPropagation()
-                      !disabled && onChange({ ...config, oi_top_limit: parseInt(e.target.value) || 10 })
-                    }}
+                    onChange={(val) => !disabled && onChange({ ...config, oi_top_limit: parseInt(val) || 10 })}
                     disabled={disabled}
+                    options={[5, 10, 15, 20, 30, 50].map(n => ({ value: n, label: String(n) }))}
                     className="px-2 py-1 rounded text-xs bg-nofx-bg border border-nofx-gold/20 text-nofx-text"
-                    onClick={(e) => e.stopPropagation()}
-                  >
-                    {[5, 10, 15, 20, 30, 50].map(n => (
-                      <option key={n} value={n}>{n}</option>
-                    ))}
-                  </select>
+                  />
                 </div>
               )}
             </div>
@@ -577,20 +571,13 @@ export function CoinSourceEditor({
               {config.use_oi_low && (
                 <div className="flex items-center gap-2 mt-2 pl-6">
                   <span className="text-xs text-nofx-text-muted">Limit:</span>
-                  <select
+                  <NofxSelect
                     value={config.oi_low_limit || 10}
-                    onChange={(e) => {
-                      e.stopPropagation()
-                      !disabled && onChange({ ...config, oi_low_limit: parseInt(e.target.value) || 10 })
-                    }}
+                    onChange={(val) => !disabled && onChange({ ...config, oi_low_limit: parseInt(val) || 10 })}
                     disabled={disabled}
+                    options={[5, 10, 15, 20, 30, 50].map(n => ({ value: n, label: String(n) }))}
                     className="px-2 py-1 rounded text-xs bg-nofx-bg border border-nofx-gold/20 text-nofx-text"
-                    onClick={(e) => e.stopPropagation()}
-                  >
-                    {[5, 10, 15, 20, 30, 50].map(n => (
-                      <option key={n} value={n}>{n}</option>
-                    ))}
-                  </select>
+                  />
                 </div>
               )}
             </div>

web/src/components/strategy/GridConfigEditor.tsx

@@ -1,6 +1,7 @@
 import { Grid, DollarSign, TrendingUp, Shield, Compass } from 'lucide-react'
 import type { GridStrategyConfig } from '../../types'
 import { gridConfig, ts } from '../../i18n/strategy-translations'
+import { NofxSelect } from '../ui/select'
 
 interface GridConfigEditorProps {
   config: GridStrategyConfig
@@ -74,20 +75,21 @@ export function GridConfigEditor({
             <p className="text-xs mb-2" style={{ color: '#848E9C' }}>
               {ts(gridConfig.symbolDesc, language)}
             </p>
-            <select
+            <NofxSelect
               value={config.symbol}
-              onChange={(e) => updateField('symbol', e.target.value)}
+              onChange={(val) => updateField('symbol', val)}
               disabled={disabled}
               className="w-full px-3 py-2 rounded"
               style={inputStyle}
-            >
-              <option value="BTCUSDT">BTC/USDT</option>
-              <option value="ETHUSDT">ETH/USDT</option>
-              <option value="SOLUSDT">SOL/USDT</option>
-              <option value="BNBUSDT">BNB/USDT</option>
-              <option value="XRPUSDT">XRP/USDT</option>
-              <option value="DOGEUSDT">DOGE/USDT</option>
-            </select>
+              options={[
+                { value: 'BTCUSDT', label: 'BTC/USDT' },
+                { value: 'ETHUSDT', label: 'ETH/USDT' },
+                { value: 'SOLUSDT', label: 'SOL/USDT' },
+                { value: 'BNBUSDT', label: 'BNB/USDT' },
+                { value: 'XRPUSDT', label: 'XRP/USDT' },
+                { value: 'DOGEUSDT', label: 'DOGE/USDT' },
+              ]}
+            />
           </div>
 
           {/* Investment */}
@@ -170,17 +172,18 @@ export function GridConfigEditor({
             <p className="text-xs mb-2" style={{ color: '#848E9C' }}>
               {ts(gridConfig.distributionDesc, language)}
             </p>
-            <select
+            <NofxSelect
               value={config.distribution}
-              onChange={(e) => updateField('distribution', e.target.value as 'uniform' | 'gaussian' | 'pyramid')}
+              onChange={(val) => updateField('distribution', val as 'uniform' | 'gaussian' | 'pyramid')}
               disabled={disabled}
               className="w-full px-3 py-2 rounded"
               style={inputStyle}
-            >
-              <option value="uniform">{ts(gridConfig.uniform, language)}</option>
-              <option value="gaussian">{ts(gridConfig.gaussian, language)}</option>
-              <option value="pyramid">{ts(gridConfig.pyramid, language)}</option>
-            </select>
+              options={[
+                { value: 'uniform', label: ts(gridConfig.uniform, language) },
+                { value: 'gaussian', label: ts(gridConfig.gaussian, language) },
+                { value: 'pyramid', label: ts(gridConfig.pyramid, language) },
+              ]}
+            />
           </div>
         </div>
       </div>

web/src/components/strategy/IndicatorEditor.tsx

@@ -1,6 +1,7 @@
 import { Clock, Activity, TrendingUp, BarChart2, Info, Lock, ExternalLink, Zap, Check, AlertCircle, Key } from 'lucide-react'
 import type { IndicatorConfig } from '../../types'
 import { indicator, ts } from '../../i18n/strategy-translations'
+import { NofxSelect } from '../ui/select'
 
 // Default NofxOS API Key
 const DEFAULT_NOFXOS_API_KEY = 'cm_568c67eae410d912c54c'
@@ -60,6 +61,16 @@ export function IndicatorEditor({
         })
       }
     } else {
+      if (current.length >= 4) {
+        // Show toast notification
+        const toast = document.createElement('div')
+        toast.textContent = language === 'zh' ? '最多选择 4 个时间维度' : 'Maximum 4 timeframes allowed'
+        toast.className = 'fixed top-4 left-1/2 -translate-x-1/2 px-4 py-2 rounded-lg text-sm z-50 shadow-lg'
+        toast.style.cssText = 'background:#F6465D;color:#fff;'
+        document.body.appendChild(toast)
+        setTimeout(() => toast.remove(), 2000)
+        return
+      }
       current.push(tf)
       onChange({
         ...config,
@@ -299,26 +310,22 @@ export function IndicatorEditor({
                 <p className="text-[10px] mt-1" style={{ color: '#5E6673' }}>{ts(indicator.oiRankingDesc, language)}</p>
                 {config.enable_oi_ranking && (
                   <div className="flex gap-2 mt-2" onClick={(e) => e.stopPropagation()}>
-                    <select
+                    <NofxSelect
                       value={config.oi_ranking_duration || '1h'}
-                      onChange={(e) => !disabled && onChange({ ...config, oi_ranking_duration: e.target.value })}
+                      onChange={(val) => !disabled && onChange({ ...config, oi_ranking_duration: val })}
                       disabled={disabled}
                       className="flex-1 px-2 py-1 rounded text-[10px]"
                       style={{ background: '#1E2329', border: '1px solid #2B3139', color: '#EAECEF' }}
-                    >
-                      <option value="1h">1h</option>
-                      <option value="4h">4h</option>
-                      <option value="24h">24h</option>
-                    </select>
-                    <select
+                      options={[{ value: '1h', label: '1h' }, { value: '4h', label: '4h' }, { value: '24h', label: '24h' }]}
+                    />
+                    <NofxSelect
                       value={config.oi_ranking_limit || 10}
-                      onChange={(e) => !disabled && onChange({ ...config, oi_ranking_limit: parseInt(e.target.value) })}
+                      onChange={(val) => !disabled && onChange({ ...config, oi_ranking_limit: parseInt(val) })}
                       disabled={disabled}
                       className="w-14 px-2 py-1 rounded text-[10px]"
                       style={{ background: '#1E2329', border: '1px solid #2B3139', color: '#EAECEF' }}
-                    >
-                      {[5, 10, 15, 20].map(n => <option key={n} value={n}>{n}</option>)}
-                    </select>
+                      options={[5, 10, 15, 20].map(n => ({ value: n, label: String(n) }))}
+                    />
                   </div>
                 )}
               </div>
@@ -359,26 +366,22 @@ export function IndicatorEditor({
                 <p className="text-[10px] mt-1" style={{ color: '#5E6673' }}>{ts(indicator.netflowRankingDesc, language)}</p>
                 {config.enable_netflow_ranking && (
                   <div className="flex gap-2 mt-2" onClick={(e) => e.stopPropagation()}>
-                    <select
+                    <NofxSelect
                       value={config.netflow_ranking_duration || '1h'}
-                      onChange={(e) => !disabled && onChange({ ...config, netflow_ranking_duration: e.target.value })}
+                      onChange={(val) => !disabled && onChange({ ...config, netflow_ranking_duration: val })}
                       disabled={disabled}
                       className="flex-1 px-2 py-1 rounded text-[10px]"
                       style={{ background: '#1E2329', border: '1px solid #2B3139', color: '#EAECEF' }}
-                    >
-                      <option value="1h">1h</option>
-                      <option value="4h">4h</option>
-                      <option value="24h">24h</option>
-                    </select>
-                    <select
+                      options={[{ value: '1h', label: '1h' }, { value: '4h', label: '4h' }, { value: '24h', label: '24h' }]}
+                    />
+                    <NofxSelect
                       value={config.netflow_ranking_limit || 10}
-                      onChange={(e) => !disabled && onChange({ ...config, netflow_ranking_limit: parseInt(e.target.value) })}
+                      onChange={(val) => !disabled && onChange({ ...config, netflow_ranking_limit: parseInt(val) })}
                       disabled={disabled}
                       className="w-14 px-2 py-1 rounded text-[10px]"
                       style={{ background: '#1E2329', border: '1px solid #2B3139', color: '#EAECEF' }}
-                    >
-                      {[5, 10, 15, 20].map(n => <option key={n} value={n}>{n}</option>)}
-                    </select>
+                      options={[5, 10, 15, 20].map(n => ({ value: n, label: String(n) }))}
+                    />
                   </div>
                 )}
               </div>
@@ -419,27 +422,27 @@ export function IndicatorEditor({
                 <p className="text-[10px] mt-1" style={{ color: '#5E6673' }}>{ts(indicator.priceRankingDesc, language)}</p>
                 {config.enable_price_ranking && (
                   <div className="flex gap-2 mt-2" onClick={(e) => e.stopPropagation()}>
-                    <select
+                    <NofxSelect
                       value={config.price_ranking_duration || '1h,4h,24h'}
-                      onChange={(e) => !disabled && onChange({ ...config, price_ranking_duration: e.target.value })}
+                      onChange={(val) => !disabled && onChange({ ...config, price_ranking_duration: val })}
                       disabled={disabled}
                       className="flex-1 px-2 py-1 rounded text-[10px]"
                       style={{ background: '#1E2329', border: '1px solid #2B3139', color: '#EAECEF' }}
-                    >
-                      <option value="1h">1h</option>
-                      <option value="4h">4h</option>
-                      <option value="24h">24h</option>
-                      <option value="1h,4h,24h">{ts(indicator.priceRankingMulti, language)}</option>
-                    </select>
-                    <select
+                      options={[
+                        { value: '1h', label: '1h' },
+                        { value: '4h', label: '4h' },
+                        { value: '24h', label: '24h' },
+                        { value: '1h,4h,24h', label: ts(indicator.priceRankingMulti, language) },
+                      ]}
+                    />
+                    <NofxSelect
                       value={config.price_ranking_limit || 10}
-                      onChange={(e) => !disabled && onChange({ ...config, price_ranking_limit: parseInt(e.target.value) })}
+                      onChange={(val) => !disabled && onChange({ ...config, price_ranking_limit: parseInt(val) })}
                       disabled={disabled}
                       className="w-14 px-2 py-1 rounded text-[10px]"
                       style={{ background: '#1E2329', border: '1px solid #2B3139', color: '#EAECEF' }}
-                    >
-                      {[5, 10, 15, 20].map(n => <option key={n} value={n}>{n}</option>)}
-                    </select>
+                      options={[5, 10, 15, 20].map(n => ({ value: n, label: String(n) }))}
+                    />
                   </div>
                 )}
               </div>
@@ -515,7 +518,7 @@ export function IndicatorEditor({
                   }
                   disabled={disabled}
                   min={10}
-                  max={200}
+                  max={30}
                   className="w-16 px-2 py-1 rounded text-xs text-center"
                   style={{ background: '#1E2329', border: '1px solid #2B3139', color: '#EAECEF' }}
                 />

web/src/components/strategy/RiskControlEditor.tsx

@@ -54,7 +54,7 @@ export function RiskControlEditor({
               }
               disabled={disabled}
               min={1}
-              max={10}
+              max={3}
               className="w-32 px-3 py-2 rounded"
               style={{
                 background: '#1E2329',

web/src/components/strategy/TokenEstimateBar.tsx

@@ -0,0 +1,143 @@
+import { useState, useEffect, useRef } from 'react'
+import { Loader2, Info } from 'lucide-react'
+import type { StrategyConfig } from '../../types'
+import { t, type Language } from '../../i18n/translations'
+
+const API_BASE = import.meta.env.VITE_API_BASE || ''
+
+interface ModelLimit {
+  name: string
+  context_limit: number
+  usage_pct: number
+  level: string
+}
+
+interface TokenEstimateResult {
+  total: number
+  model_limits: ModelLimit[]
+  suggestions: string[]
+}
+
+interface TokenEstimateBarProps {
+  config: StrategyConfig | null
+  language: Language
+  onOverflowChange?: (overflow: boolean) => void
+}
+
+export function TokenEstimateBar({ config, language, onOverflowChange }: TokenEstimateBarProps) {
+  const [estimate, setEstimate] = useState<TokenEstimateResult | null>(null)
+  const [isLoading, setIsLoading] = useState(false)
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  const tr = (key: string) => t(`strategyStudio.${key}`, language)
+
+  useEffect(() => {
+    if (!config) {
+      setEstimate(null)
+      return
+    }
+
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current)
+    }
+
+    debounceRef.current = setTimeout(async () => {
+      setIsLoading(true)
+      try {
+        const response = await fetch(`${API_BASE}/api/strategies/estimate-tokens`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ config }),
+        })
+        if (response.ok) {
+          const data = await response.json()
+          setEstimate(data)
+        }
+      } catch {
+        // silently ignore — non-critical UI element
+      } finally {
+        setIsLoading(false)
+      }
+    }, 800)
+
+    return () => {
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current)
+      }
+    }
+  }, [config])
+
+  useEffect(() => {
+    if (!estimate) {
+      onOverflowChange?.(false)
+      return
+    }
+    const maxPct = estimate.model_limits.reduce((max, ml) => Math.max(max, ml.usage_pct), 0)
+    onOverflowChange?.(maxPct >= 100)
+  }, [estimate, onOverflowChange])
+
+  if (!config) return null
+
+  if (isLoading && !estimate) {
+    return (
+      <div className="flex items-center gap-1.5 text-xs text-nofx-text-muted">
+        <Loader2 className="w-3 h-3 animate-spin" />
+        <span>{tr('tokenEstimating')}</span>
+      </div>
+    )
+  }
+
+  if (!estimate) return null
+
+  // Find the strictest model (smallest context limit = highest usage_pct)
+  const strictest = estimate.model_limits.reduce(
+    (max, ml) => (ml.usage_pct > max.usage_pct ? ml : max),
+    estimate.model_limits[0]
+  )
+  if (!strictest) return null
+
+  const pct = strictest.usage_pct
+  const barWidth = Math.min(pct, 100)
+
+  let barColor = '#0ECB81' // green
+  let textColor = '#848E9C'
+  if (pct >= 100) {
+    barColor = '#F6465D' // red
+    textColor = '#F6465D'
+  } else if (pct >= 80) {
+    barColor = '#F0B90B' // yellow
+    textColor = '#F0B90B'
+  }
+
+  const exceedWarning = pct >= 100 ? tr('tokenExceedWarning') : null
+
+  return (
+    <div className="space-y-1">
+      <div className="flex items-center gap-2">
+        <div
+          className="flex-1 h-1.5 rounded-full overflow-hidden"
+          style={{ background: '#1E2329' }}
+        >
+          <div
+            className="h-full rounded-full transition-all duration-500"
+            style={{ width: `${barWidth}%`, background: barColor }}
+          />
+        </div>
+        <span className="text-xs font-mono whitespace-nowrap" style={{ color: textColor }}>
+          {isLoading ? <Loader2 className="w-3 h-3 animate-spin inline" /> : `${pct}%`}
+        </span>
+        <div className="relative group">
+          <Info className="w-3 h-3 text-nofx-text-muted cursor-help" />
+          <div className="absolute bottom-full right-0 mb-1.5 px-2.5 py-1.5 rounded-lg text-[10px] whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-50 bg-nofx-bg-lighter border border-nofx-border text-nofx-text-muted shadow-lg">
+            {tr('tokenTooltip')} ({strictest.name} {(strictest.context_limit / 1000).toFixed(0)}K)
+          </div>
+        </div>
+      </div>
+      {exceedWarning && (
+        <p className="text-[10px]" style={{ color: '#F6465D' }}>
+          {exceedWarning}
+        </p>
+      )}
+    </div>
+  )
+}