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/ui/select.tsx

@@ -0,0 +1,99 @@
+import { useRef, useState, useEffect, useCallback } from 'react'
+import { createPortal } from 'react-dom'
+import { ChevronDown } from 'lucide-react'
+import { cn } from '../../lib/cn'
+
+export interface SelectOption {
+  value: string | number
+  label: string
+}
+
+interface NofxSelectProps {
+  value: string | number
+  onChange: (value: string) => void
+  options: SelectOption[]
+  disabled?: boolean
+  className?: string
+  style?: React.CSSProperties
+}
+
+export function NofxSelect({ value, onChange, options, disabled, className, style }: NofxSelectProps) {
+  const [open, setOpen] = useState(false)
+  const triggerRef = useRef<HTMLDivElement>(null)
+  const dropdownRef = useRef<HTMLDivElement>(null)
+  const [pos, setPos] = useState({ top: 0, left: 0, width: 0 })
+  const selected = options.find(o => String(o.value) === String(value))
+
+  const updatePos = useCallback(() => {
+    if (!triggerRef.current) return
+    const rect = triggerRef.current.getBoundingClientRect()
+    setPos({ top: rect.bottom + 4, left: rect.left, width: rect.width })
+  }, [])
+
+  useEffect(() => {
+    if (!open) return
+    updatePos()
+    const handleClose = (e: MouseEvent) => {
+      const target = e.target as Node
+      if (triggerRef.current?.contains(target)) return
+      if (dropdownRef.current?.contains(target)) return
+      setOpen(false)
+    }
+    const handleScroll = () => setOpen(false)
+    document.addEventListener('mousedown', handleClose)
+    window.addEventListener('scroll', handleScroll, true)
+    return () => {
+      document.removeEventListener('mousedown', handleClose)
+      window.removeEventListener('scroll', handleScroll, true)
+    }
+  }, [open, updatePos])
+
+  return (
+    <div
+      ref={triggerRef}
+      className={cn('relative', className)}
+      style={style}
+    >
+      <div
+        className={cn(
+          'flex items-center justify-between gap-1.5 w-full h-full cursor-pointer',
+          disabled && 'opacity-50 cursor-not-allowed',
+        )}
+        onClick={(e) => {
+          e.stopPropagation()
+          if (!disabled) setOpen(!open)
+        }}
+      >
+        <span className="truncate">{selected?.label ?? String(value)}</span>
+        <ChevronDown className={cn('w-3 h-3 shrink-0 opacity-50 transition-transform', open && 'rotate-180')} />
+      </div>
+      {open && createPortal(
+        <div
+          ref={dropdownRef}
+          className="fixed z-[9999] rounded border border-[#2B3139] bg-[#0B0E11] shadow-xl shadow-black/50 max-h-60 overflow-y-auto"
+          style={{ top: pos.top, left: pos.left, minWidth: pos.width }}
+        >
+          {options.map((opt) => (
+            <div
+              key={opt.value}
+              className={cn(
+                'px-3 py-1.5 text-sm cursor-pointer transition-colors whitespace-nowrap',
+                String(opt.value) === String(value)
+                  ? 'bg-[#F0B90B]/10 text-[#F0B90B]'
+                  : 'text-[#EAECEF] hover:bg-[#1E2329]',
+              )}
+              onClick={(e) => {
+                e.stopPropagation()
+                onChange(String(opt.value))
+                setOpen(false)
+              }}
+            >
+              {opt.label}
+            </div>
+          ))}
+        </div>,
+        document.body,
+      )}
+    </div>
+  )
+}