fix: pre-launch UI hardening + KOL reduce-action type, proxy IP relay, settings redesign

Frontend half of the pre-launch audit campaign:

- types/index.ts + kol/KolPageClient.tsx: add missing 'reduce' KolAction
  (backend emits it; frontend lacked the type + color/label maps → undefined
  styling). Adds ACTION_COLOR/actionLabel/postActionLabel entries.
- proxy/[...path]/route.ts: relay real client IP (x-forwarded-for / x-real-ip)
  so the backend rate limiter buckets per-user instead of per-Next-server (BUG-02).
- Settings/BotConfigPanel redesign, paper-mode clarity, copy cleanup.
- Assorted page/display fixes, loading states, Pagination component.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

components/trades/TradeTable.tsx

@@ -3,6 +3,7 @@
 import { useState, useMemo } from 'react'
 import { useLocale } from 'next-intl'
 import type { BotTrade, TrumpPost } from '@/types'
+import Pagination from '@/components/ui/Pagination'
 
 // ── Formatters ────────────────────────────────────────────────────────────────
 function fmtMoney(n: number, opts: { sign?: boolean; decimals?: number } = {}) {
@@ -28,8 +29,11 @@ interface Props {
   loading: boolean
 }
 
-const ASSETS = ['all', 'BTC', 'ETH', 'SOL'] as const
-const SIDES  = ['all', 'long', 'short']      as const
+// ASSETS filter is derived dynamically from the trade set (see useMemo below)
+// so new assets (TRUMP, BNB, DOGE, LINK, AAVE, ...) appear automatically.
+const SIDES = ['all', 'long', 'short'] as const
+
+const TRADES_PER_PAGE = 25
 
 export default function TradeTable({ trades, posts, loading }: Props) {
   const locale = useLocale()
@@ -38,6 +42,18 @@ export default function TradeTable({ trades, posts, loading }: Props) {
   const [sideFilter,   setSideFilter]   = useState('all')
   const [sourceFilter, setSourceFilter] = useState('all')
   const [hidePaper,    setHidePaper]    = useState(false)
+  const [page,         setPage]         = useState(1)
+
+  // Distinct assets present in the loaded trade set — drives the asset filter.
+  // Dynamic so new perps (TRUMP, BNB, DOGE, LINK, AAVE, ...) appear without
+  // a code change; sorted alphabetically with BTC/ETH first for familiarity.
+  const assets: string[] = useMemo(() => {
+    const set = new Set<string>()
+    for (const t of trades) if (t.asset) set.add(t.asset)
+    const priority = ['BTC', 'ETH', 'SOL', 'TRUMP']
+    const rest = Array.from(set).filter(a => !priority.includes(a)).sort()
+    return ['all', ...priority.filter(a => set.has(a)), ...rest]
+  }, [trades])
 
   // Distinct sources present in the loaded trade set — drives the filter UI.
   // Includes 'unknown' as a bucket for trades whose trigger post was deleted.
@@ -65,13 +81,17 @@ export default function TradeTable({ trades, posts, loading }: Props) {
     return acc
   }, [trades])
 
-  const filtered = trades.filter(t => {
+  const filtered = useMemo(() => trades.filter(t => {
     if (sourceFilter !== 'all' && (t.trigger_source || 'unknown') !== sourceFilter) return false
     if (assetFilter  !== 'all' && t.asset !== assetFilter) return false
     if (sideFilter   !== 'all' && t.side  !== sideFilter)  return false
     if (hidePaper    && t.is_paper) return false
     return true
-  })
+  }), [trades, sourceFilter, assetFilter, sideFilter, hidePaper])
+
+  const totalPages = Math.max(1, Math.ceil(filtered.length / TRADES_PER_PAGE))
+  const safePage   = Math.min(page, totalPages)
+  const pageRows   = filtered.slice((safePage - 1) * TRADES_PER_PAGE, safePage * TRADES_PER_PAGE)
 
   // Exclude externally-closed trades (pnl_usd null) from aggregates.
   const priced   = filtered.filter(t => t.pnl_usd !== null && t.pnl_usd !== undefined)
@@ -111,7 +131,7 @@ export default function TradeTable({ trades, posts, loading }: Props) {
               return (
                 <button
                   key={src}
-                  onClick={() => setSourceFilter(sourceFilter === src ? 'all' : src)}
+                  onClick={() => { setSourceFilter(sourceFilter === src ? 'all' : src); setPage(1) }}
                   style={{
                     textAlign: 'left', cursor: 'pointer',
                     background: bg, borderRadius: 8, padding: '12px 14px',
@@ -146,7 +166,7 @@ export default function TradeTable({ trades, posts, loading }: Props) {
           <div style={{ fontSize: 10, color: 'var(--ink-4)', marginTop: 8 }}>
             {isZh ? '点击来源可筛选表格。' : 'Click a source to filter the table.'} {sourceFilter !== 'all' && (
               <button
-                onClick={() => setSourceFilter('all')}
+                onClick={() => { setSourceFilter('all'); setPage(1) }}
                 style={{ marginLeft: 8, padding: '2px 8px', fontSize: 10,
                          border: '1px solid var(--line)', borderRadius: 4,
                          background: 'transparent', cursor: 'pointer', color: 'var(--ink-2)' }}
@@ -182,11 +202,11 @@ export default function TradeTable({ trades, posts, loading }: Props) {
       {/* Filters */}
       <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', alignItems: 'center', marginBottom: 14 }}>
         <div className="nav-tabs">
-          {ASSETS.map(a => (
+          {assets.map(a => (
             <button
               key={a}
               className={`nav-tab ${assetFilter === a ? 'active' : ''}`}
-              onClick={() => setAssetFilter(a)}
+              onClick={() => { setAssetFilter(a); setPage(1) }}
             >
               {a === 'all' ? (isZh ? '全部资产' : 'All assets') : a}
             </button>
@@ -197,7 +217,7 @@ export default function TradeTable({ trades, posts, loading }: Props) {
             <button
               key={s}
               className={`nav-tab ${sideFilter === s ? 'active' : ''}`}
-              onClick={() => setSideFilter(s)}
+              onClick={() => { setSideFilter(s); setPage(1) }}
             >
               {s === 'all' ? (isZh ? '全部方向' : 'All') : s === 'long' ? (isZh ? '做多' : 'Long') : (isZh ? '做空' : 'Short')}
             </button>
@@ -212,7 +232,7 @@ export default function TradeTable({ trades, posts, loading }: Props) {
           <input
             type="checkbox"
             checked={hidePaper}
-            onChange={e => setHidePaper(e.target.checked)}
+            onChange={e => { setHidePaper(e.target.checked); setPage(1) }}
           />
           {isZh ? '隐藏模拟交易' : 'Hide paper trades'}
         </label>
@@ -247,7 +267,7 @@ export default function TradeTable({ trades, posts, loading }: Props) {
                   </td>
                 </tr>
               )}
-              {filtered.map(t => {
+              {pageRows.map(t => {
                 const tp = posts.find(p => p.id === t.trigger_post_id)
                 const roi =
                   t.entry_price && t.exit_price != null
@@ -326,6 +346,18 @@ export default function TradeTable({ trades, posts, loading }: Props) {
           </table>
         </div>
       )}
+
+      {/* Pagination */}
+      {!loading && (
+        <Pagination
+          page={safePage}
+          total={totalPages}
+          count={filtered.length}
+          pageSize={TRADES_PER_PAGE}
+          onChange={setPage}
+          scrollTop={false}
+        />
+      )}
     </>
   )
 }