diff --git a/.claude/launch.json b/.claude/launch.json index 0c7ec78..a520c61 100644 --- a/.claude/launch.json +++ b/.claude/launch.json @@ -2,10 +2,10 @@ "version": "0.0.1", "configurations": [ { - "name": "trumpsignal", + "name": "frontend", "runtimeExecutable": "npm", "runtimeArgs": ["run", "dev"], - "cwd": "/Users/k/Public/Claude/trumpsignal", + "cwd": "/Users/k/Public/trumpsignal/frontend", "port": 3001 } ] diff --git a/.env.local.example b/.env.local.example index 1945b4d..07fe704 100644 --- a/.env.local.example +++ b/.env.local.example @@ -14,3 +14,9 @@ NEXT_PUBLIC_WS_URL=wss://api.yourdomain.com # Dev: http://localhost:3001 # Production: https://yourdomain.com NEXT_PUBLIC_SITE_URL=https://yourdomain.com + +# WalletConnect v2 project ID — enables QR-code pairing (desktop → mobile wallet) +# and all WalletConnect-compatible mobile wallets (Trust, Rainbow, etc.) +# Get a FREE project ID at https://cloud.walletconnect.com (takes ~2 min) +# Leave empty: injected-only mode (browser extension wallets on desktop only) +NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID= diff --git a/CLAUDE.md b/CLAUDE.md index ab634b8..a0f755a 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -15,8 +15,8 @@ This is the AI-readable entry doc. Read this first on entering the repo. client components, deployed to Vercel. - **Talks to a Python backend** at `https://api.trumpsignal.com` (or `localhost:8000` in dev). All trading state, signals, AI scoring, - Hyperliquid integration lives in the sibling **`/Users/k/Public/Claude/ - backend`** repo. See its CLAUDE.md. + Hyperliquid integration lives in the sibling **`../backend`** + repo. See its CLAUDE.md. - **No server-side trading logic** lives here. Frontend is a thin layer over the API + WebSocket — even "open a position" routes to a backend endpoint that does the signed-request verification + HL call. @@ -51,7 +51,7 @@ This is the AI-readable entry doc. Read this first on entering the repo. ``` app/ ├── layout.tsx Root layout: JSON-LD schema.org, fonts, meta -├── page.tsx / (root) → redirects to /en +├── page.tsx / (root) → marketing / landing page ├── icon.tsx Dynamic favicon (α on dark bg, edge runtime) ├── apple-icon.tsx PWA install icon ├── opengraph-image.tsx OG card generator (1200x630) @@ -89,30 +89,33 @@ app/[locale]/ components/ ├── nav/Navbar.tsx Top nav + tabs (Trump | Macro Vibes | KOL ...) ├── signals/ -│ ├── SignalMonitor.tsx Live signal stream (WS-driven) │ ├── SourceChips.tsx Filter chips per source -│ ├── SystemControl.tsx Sys1/sys2 toggle widgets, Auto-Trade switch -│ └── ConfirmCloseTrade.tsx Modal for manual close +│ └── SystemControl.tsx Sys1/sys2 toggle widgets, Auto-Trade switch ├── dashboard/ │ ├── PostCards.tsx Trump post cards -│ ├── SignalMonitor.tsx (older — being consolidated) -│ └── BtcReversalAlert.tsx Pinned alert when sys2 fires +│ ├── SignalMonitor.tsx Live signal stream (WS-driven) +│ └── ChartPanel.tsx Price chart panel ├── btc/MacroPanel.tsx ★ 8-indicator Macro Vibes layout (4 sections, │ composite needle, threshold chips, peak-trail viz) ├── positions/ -│ ├── OpenPositions.tsx Polls /positions/open + /positions/today every 15s -│ └── TradeCard.tsx Single trade row w/ grow toggle + close button -├── kol/KolDigest.tsx Daily KOL summary widget +│ └── OpenPositions.tsx Polls /positions/open + /positions/today every 15s +│ Includes grow toggle + manual close button +├── trades/ +│ ├── TradeTable.tsx Closed trade history table (dynamic asset filter) +│ └── BotConfigPanel.tsx Bot configuration (SL, TP, leverage, paper mode). +│ Includes 3-step onboarding stepper + inline Auto-Trade toggle. ├── telegram/ -│ ├── TelegramCard.tsx Settings — connect via 6-char code +│ └── TelegramCard.tsx Settings — connect via 6-char code +├── wallet/ │ └── SignConfirmSheet.tsx EIP-191 signed request preview -├── nav/WalletConnect.tsx Wagmi-style wallet connect (MetaMask etc.) +├── seo/Breadcrumbs.tsx Structured breadcrumb nav for SEO ├── ui/ │ ├── InfoTip.tsx CSS-only tooltip with `?` icon -│ ├── PageHint.tsx Strong page subtitle (replaces page-sub) -│ ├── Toast.tsx -│ └── Modal.tsx -└── ws/WsProvider.tsx WebSocket singleton context provider +│ ├── PageHint.tsx Strong page subtitle +│ ├── Pagination.tsx Reusable pagination control +│ └── TradeAlertBanner.tsx Fixed-position WS alert banner (trade_alert events). +│ Auto-dismisses after 10s. Filtered by wallet address. +└── lib/wsContext.tsx WebSocket singleton context (replaces WsProvider) ``` --- @@ -240,6 +243,30 @@ Tokens in `app/[locale]/globals.css`: `growErr` state with a 4-second auto-clear, instead of squatting in the panel-header `err` banner shared with the 15-s poll error. +- ~~**H2 Chart data race** (FIXED 2026-06-01):~~ `cancelled` flag added to the + candles `useEffect` — stale BTC response can no longer overwrite ETH candles + when asset is switched mid-fetch. + +- ~~**M8 Duplicate React keys** (FIXED 2026-06-01):~~ `onNewPost` now deduplicates + by `post.id` before prepending to the posts list. + +- ~~**L2 fittedRef not reset on asset change** (FIXED 2026-06-01):~~ Chart view + is re-fitted when `asset` changes, not only on `timeframe` change. + +- ~~**L4 invalid ARIA role** (FIXED 2026-06-01):~~ `Ticker.tsx` `role="marquee"` + replaced with `role="region"`. + +- ~~**L5 ws:// mixed-content block** (FIXED 2026-06-01):~~ `wsContext.tsx` now + auto-upgrades to `wss://` when served over HTTPS, instead of hard-coding `ws://`. + +**Open / deferred (need interface change or DB migration):** +- **C3** Signed READ endpoints (`allow_replay=True`) put `ts`/`sig` in URL → access logs. Fix requires changing read endpoints to POST body (interface change + frontend update). +- **H4** KEK derived with single SHA-256, no salt/KDF. Fix requires re-encrypting all HL API keys (DB migration). +- **M1** Adopted (sys2) positions incorrectly counted against sys1 daily budget. +- **M5** `GET /telegram/{wallet}/status` is unauthenticated — exposes `chat_id`/`tg_username`. +- **M7** Rate limit bypassable via spoofed XFF — infrastructure-level fix (nginx/Cloudflare). +- **M9** SWR cache only notifies the first caller on background refresh — others get stale data. + ## How to verify changes locally ```bash @@ -303,6 +330,6 @@ in Vercel dashboard: ## Sibling repo -- **`/Users/k/Public/Claude/backend`** — Python/FastAPI backend, includes +- **`/Users/k/Public/trumpsignal/backend`** — Python/FastAPI backend, includes Hyperliquid integration, Telegram bot, AI scoring (DeepSeek), all signal scanners, the adoption/release flow. See its CLAUDE.md. diff --git a/app/[locale]/DashboardClient.tsx b/app/[locale]/DashboardClient.tsx index da5948d..40f3760 100644 --- a/app/[locale]/DashboardClient.tsx +++ b/app/[locale]/DashboardClient.tsx @@ -9,12 +9,14 @@ import { useAccount } from 'wagmi' import type { TrumpPost, BotPerformance, Candle } from '@/types' import { useDashboardStore } from '@/store/dashboard' import { usePriceSocket } from '@/lib/useRealtimeData' -import { getMacroSnapshot, getPerformance, getPrices, getUserPublic, type MacroSnapshot } from '@/lib/api' +import { getMacroSnapshot, getPerformance, getPrices, getUserPublic, getKolDivergence, getKolDigest, type MacroSnapshot } from '@/lib/api' +import type { KolDivergence, KolDigest } from '@/types' import { getCachedViewEnvelope } from '@/lib/signedRequest' -import { swrFetch } from '@/lib/cache' -import PostRow, { SignalPill, SourceIcon, fmtPct, TimeAgo, LocalDateTime } from '@/components/dashboard/PostCards' +import { swrFetch, invalidate as invalidateCache } from '@/lib/cache' +import PostRow, { SignalPill, SourceIcon, SOURCE_DISPLAY, fmtPct, TimeAgo, LocalDateTime } from '@/components/dashboard/PostCards' import OpenPositions from '@/components/positions/OpenPositions' import PageHint from '@/components/ui/PageHint' +import AnimatedNumber from '@/components/ui/AnimatedNumber' // Heavy components — lazy-loaded so they don't bloat the initial JS bundle. // ChartPanel pulls in lightweight-charts (~200KB gz); split it out. @@ -58,7 +60,9 @@ function PostDetail({ post, onClose }: { post: TrumpPost; onClose: () => void })
-
@realDonaldTrump
+
+ {SOURCE_DISPLAY[post.source?.toLowerCase?.()]?.label ?? post.source ?? 'Signal'} +
·
@@ -86,7 +90,9 @@ function PostDetail({ post, onClose }: { post: TrumpPost; onClose: () => void }) {/* AI reasoning */} {post.ai_reasoning && ( <> -
AI reasoning
+
+ {post.signal === 'buy' || post.signal === 'short' ? 'Why this signal fired' : 'Why this was filtered out'} +
{post.ai_reasoning}
@@ -147,7 +153,7 @@ function SelectHint() { export default function DashboardClient({ initialPosts }: Props) { const intlLocale = useLocale() const isZh = false // i18n shelved — Chinese branches kept as dead code for future revival; see messages/zh.json - const { asset, setAsset, timeframe, setTimeframe: _setTimeframe, setLivePrice, setSubscribed, setBotReadiness, setHlApiKeySet, isSubscribed, hlApiKeySet, botReadiness, livePrices } = useDashboardStore() + const { asset, setAsset, timeframe, setTimeframe: _setTimeframe, setLivePrice, setSubscribed, setBotReadiness, setHlApiKeySet, setPaperMode, isSubscribed, hlApiKeySet, botReadiness, livePrices } = useDashboardStore() function setTimeframe(tf: string) { _setTimeframe(tf as '5m' | '15m' | '1H' | '4H' | '1D' | '1W') } const { address, isConnected } = useAccount() const params = useParams() @@ -159,29 +165,40 @@ export default function DashboardClient({ initialPosts }: Props) { const [chartReload, setChartReload] = useState(0) const [selectedPostId, setSelectedPostId] = useState(null) const [macro, setMacro] = useState(null) + const [kolDivergences, setKolDivergences] = useState([]) + const [kolDigest, setKolDigest] = useState(null) // For 1D: show all posts from selected day const [selectedDayPosts, setSelectedDayPosts] = useState(null) useEffect(() => { + // B42: cancel the in-flight getUserPublic if the wallet switches again + // before it resolves — prevents old wallet's data polluting new wallet's state. + let cancelled = false if (!isConnected || !address) { setSubscribed(false) setHlApiKeySet(false) setBotReadiness('unknown') setPerformance(undefined) - return + return () => { cancelled = true } } - // Clear account-scoped bot state immediately when the connected wallet - // changes so a previous wallet's status never leaks into the next one. + // Clear account-scoped bot state immediately (setWallet already resets these + // via store, but DashboardClient may be rendered without a wallet switch — + // keep explicit resets here for clarity and safety). setSubscribed(false) setHlApiKeySet(false) setBotReadiness('unknown') + // `snapAddr !== address` would be a stale-closure trap: both are the same + // closed-over value. Use `cancelled` (set by effect cleanup) as the sole guard. getUserPublic(address.toLowerCase()) .then((user) => { + if (cancelled) return // effect cleaned up = wallet changed or unmounted setSubscribed(user.active) setHlApiKeySet(user.hl_api_key_set) setBotReadiness(user.hl_api_key_set ? 'saved' : 'unknown') + setPaperMode(!!user.paper_mode) }) .catch(() => {}) + return () => { cancelled = true } }, [address, isConnected, setSubscribed, setHlApiKeySet, setBotReadiness]) useEffect(() => { @@ -207,19 +224,37 @@ export default function DashboardClient({ initialPosts }: Props) { return () => { cancelled = true } }, [address, isConnected]) + const [freshPostId, setFreshPostId] = useState(null) + usePriceSocket({ onPrice: (a, price) => setLivePrice(a, price), - onNewPost: (post) => setPosts((prev) => [post as TrumpPost, ...prev].slice(0, 500)), + onNewPost: (post) => { + const p = post as TrumpPost + // Dedup: WS may resend a post already in initialPosts or a prior push. + setPosts((prev) => prev.some(x => x.id === p.id) ? prev : [p, ...prev].slice(0, 500)) + setFreshPostId(p.id) + // Keep a ref to the timer so we can cancel it if the component unmounts + // before it fires (avoids setState-after-unmount warning). + const timer = setTimeout(() => setFreshPostId((id) => (id === p.id ? null : id)), 1400) + return () => clearTimeout(timer) // returned but not used by usePriceSocket — see L1 note + }, }) useEffect(() => { + let cancelled = false setCandles([]) setChartErr('') - getPrices(asset, timeframe) - .then(c => { setCandles(c); setChartErr('') }) - .catch(e => setChartErr(e instanceof Error ? e.message : (isZh ? '价格数据加载失败' : 'Failed to load price data'))) - // isZh intentionally excluded: it is a compile-time constant (always false) - // and including it would restart the chart fetch on every render. + const priceKey = `prices-${asset}-${timeframe}` + if (chartReload > 0) invalidateCache(priceKey) + swrFetch( + priceKey, + 90_000, + () => getPrices(asset, timeframe), + fresh => { if (!cancelled) { setCandles(fresh); setChartErr('') } }, + ) + .then(c => { if (!cancelled) { setCandles(c); setChartErr('') } }) + .catch(e => { if (!cancelled) setChartErr(e instanceof Error ? e.message : 'Failed to load price data') }) + return () => { cancelled = true } // eslint-disable-next-line react-hooks/exhaustive-deps }, [asset, timeframe, chartReload]) @@ -240,6 +275,21 @@ export default function DashboardClient({ initialPosts }: Props) { return () => { alive = false; clearInterval(id) } }, []) + // KOL divergence + digest — loaded once, 30 min cache (changes daily) + useEffect(() => { + let alive = true + // KOL ingestion is daily and sparse — a 7d window is frequently empty + // (e.g. 7d=0 while 30d=196), which hid the whole sidebar card. Use a 30d + // window so the Overview reflects the data that actually exists. + swrFetch('kol-divergence-30d', 30 * 60_000, () => getKolDivergence({ days: 30 }), f => { if (alive) setKolDivergences(f.items ?? []) }) + .then(r => { if (alive) setKolDivergences(r.items ?? []) }) + .catch(() => {}) + swrFetch('kol-digest-30d', 30 * 60_000, () => getKolDigest(30), f => { if (alive) setKolDigest(f) }) + .then(r => { if (alive) setKolDigest(r) }) + .catch(() => {}) + return () => { alive = false } + }, []) + const selectedPost = posts.find(p => p.id === selectedPostId) ?? null // Show actionable signals first (buy/short), then most recent hold/neutral. @@ -278,7 +328,9 @@ export default function DashboardClient({ initialPosts }: Props) { const actionablePosts = posts.filter(p => p.signal === 'buy' || p.signal === 'short').length const trumpActionable = posts.filter(p => (p.source || '') === 'truth' && (p.signal === 'buy' || p.signal === 'short')).length const macroActionable = posts.filter(p => ((p.source || '') === 'btc_bottom_reversal' || (p.source || '') === 'funding_reversal') && (p.signal === 'buy' || p.signal === 'short')).length - const kolMentions = posts.filter(p => (p.source || '') === 'kol').length + // Use actual KOL divergence count (divergence-flagged items from the API), + // not a source==='kol' post count (which never matches — source is 'substack'/'blog'/etc.). + const kolMentions = kolDivergences.filter(d => d.signal_type === 'divergence').length const winRate = performance?.win_rate ?? 0 const netPnl = performance?.net_pnl_usd ?? 0 const hasPriceData = candles.length > 0 @@ -286,37 +338,38 @@ export default function DashboardClient({ initialPosts }: Props) { const macroScore = macro?.composite_score ?? null const macroRegime = macro?.regime_label ?? null const macroPct = macroScore == null ? 50 : Math.max(0, Math.min(100, (macroScore + 100) / 2)) + // Derive tone from the backend's regime_label, NOT a re-thresholded score. + // The backend uses ±20 for BULLISH/BEARISH; re-deriving with ±15 here made + // a score of e.g. 15.2 read "Supportive" in the card while the same card's + // regime label said NEUTRAL. Trusting regime_label keeps them consistent. const macroTone = - macroScore == null ? 'neutral' - : macroScore > 15 ? 'bull' - : macroScore < -15 ? 'bear' + macroRegime == null ? (macroScore == null ? 'neutral' : 'neutral') + : macroRegime === 'BULL' || macroRegime === 'BULLISH' ? 'bull' + : macroRegime === 'BEAR' || macroRegime === 'BEARISH' ? 'bear' : 'neutral' const macroSummary = macroScore == null ? 'Daily macro composite not loaded yet.' - : macroTone === 'bull' ? 'Risk backdrop is supportive. Trend-following setups get more room.' - : macroTone === 'bear' ? 'Backdrop is defensive. Preserve size and expect cleaner downside moves.' - : 'Backdrop is mixed. Useful for context, not a blind directional trigger.' + : macroTone === 'bull' ? 'Supportive backdrop — trend setups have room.' + : macroTone === 'bear' ? 'Defensive backdrop — preserve size, downside moves are cleaner.' + : 'Mixed backdrop — context only, not a directional trigger.' return (

{isZh ? '信号总览' : 'Signal monitor'}

- - Four signals that move crypto before the crowd sees them — Trump - posts, BTC macro bottoms, funding extremes, and what KOLs do vs - say. Tracked live, in public, every call timestamped. + 0 ? `${actionablePosts} actionable · ${totalPosts} tracked` : undefined}> + Trump · Macro · KOL divergence — live.
-
- Live feed -
+ Live
{/* Open positions — what's on the book right now. Renders only when a subscribed wallet is connected, so guests see the normal feed. */} +
@@ -324,12 +377,15 @@ export default function DashboardClient({ initialPosts }: Props) {
Market and macro
-
- {displayPrice != null ? '$' + Math.round(displayPrice).toLocaleString() : '—'} -
+ = 0 ? 'up' : 'down'}`}>{hasPriceData ? fmtPct(priceChange) : 'Feed pending'} · 24h
-
BTC spot with live signal context
+
{asset} · live signal context
@@ -374,62 +430,134 @@ export default function DashboardClient({ initialPosts }: Props) {
-
- - Trump - {trumpActionable} - - - Macro - {macroActionable} - - - KOL - {kolMentions} - -
- Signals today - {signalsToday} -
-
-
-
-
Execution
-
{actionablePosts}
-
actionable signals tracked in feed
-
-
-
Performance
-
{hasPerformanceData ? `${netPnl >= 0 ? '+$' : '-$'}${Math.abs(netPnl).toLocaleString('en-US', { maximumFractionDigits: 0 })}` : '—'}
-
{hasPerformanceData ? '30d live net P&L (real trades only)' : 'Load settings once to unlock private performance'}
-
+ {/* ── Unified stats row ─────────────────────────────────────────── */} +
+ {([ + { label: 'Trump signals', value: trumpActionable, href: `/${locale}/trump` }, + { label: 'Macro signals', value: macroActionable, href: `/${locale}/macro` }, + { label: 'KOL divergence', value: kolMentions, href: `/${locale}/kol` }, + ] as const).map(({ label, value, href }) => { + const empty = value === 0 + const inner = ( + <> + {label} + + {empty ? '—' : value} + + + ) + return {inner} + })} +
+ My P&L · 30d + = 0 ? 'var(--up)' : 'var(--down)') : 'var(--ink-4)', + }}> + {hasPerformanceData + ? `${netPnl >= 0 ? '+' : '−'}$${Math.abs(netPnl).toLocaleString('en-US', { maximumFractionDigits: 0 })}` + : '—'} + +
@@ -441,9 +569,12 @@ export default function DashboardClient({ initialPosts }: Props) {
Price · {asset}
-
- {displayPrice != null ? '$' + Math.round(displayPrice).toLocaleString() : '—'} -
+ = 0 ? 'up' : 'down'}`}>{hasPriceData ? fmtPct(priceChange) : 'Feed pending'} · 24h
@@ -459,7 +590,20 @@ export default function DashboardClient({ initialPosts }: Props) { onClick={() => setChartReload(n => n + 1)}>Retry
)} -
+
+ {/* Loading overlay — shown while candles are fetching (candles=[] and no error). + Prevents the user from seeing a blank lightweight-charts canvas. */} + {!hasPriceData && !chartErr && ( +
+ + Loading chart… +
+ )}
{recentPosts.map(p => ( - +
+ { + // Clear the day-list view first: the right panel renders + // selectedDayPosts with higher priority than selectedPost, + // so without this the detail never appears while a candle's + // multi-post list is open. + setSelectedDayPosts(null) + setSelectedPostId(selectedPostId === p.id ? null : p.id) + }} /> +
))}
diff --git a/app/[locale]/analytics/AnalyticsPageClient.tsx b/app/[locale]/analytics/AnalyticsPageClient.tsx index a1b6780..f52db49 100644 --- a/app/[locale]/analytics/AnalyticsPageClient.tsx +++ b/app/[locale]/analytics/AnalyticsPageClient.tsx @@ -7,6 +7,7 @@ import { getTrades, getSignalAccuracy } from '@/lib/api' import type { BotTrade } from '@/types' import type { SignalAccuracy } from '@/lib/api' import { getCachedViewEnvelope, getOrCreateViewEnvelope, type SignedEnvelope } from '@/lib/signedRequest' +import { swrFetch } from '@/lib/cache' import PageHint from '@/components/ui/PageHint' import InfoTip from '@/components/ui/InfoTip' @@ -32,7 +33,8 @@ function fmtAccuracyPct(pct: number | null | undefined) { return pct == null || Number.isNaN(pct) ? '—' : `${pct.toFixed(0)}%` } -function inPeriod(iso: string, period: Period) { +function inPeriod(iso: string | null, period: Period) { + if (!iso) return false // trades without closed_at are excluded from all windows if (period === 'All') return true const days = Number.parseInt(period, 10) if (Number.isNaN(days)) return true @@ -42,8 +44,8 @@ function inPeriod(iso: string, period: Period) { function calcDrawdownPct(trades: BotTrade[]) { const ordered = [...trades] - .filter((t) => t.pnl_usd !== null && t.pnl_usd !== undefined) - .sort((a, b) => new Date(a.closed_at).getTime() - new Date(b.closed_at).getTime()) + .filter((t) => t.pnl_usd !== null && t.pnl_usd !== undefined && t.closed_at !== null) + .sort((a, b) => new Date(a.closed_at!).getTime() - new Date(b.closed_at!).getTime()) let equity = 0 let peak = 0 let maxDrawdownPct = 0 @@ -78,6 +80,14 @@ export default function AnalyticsPageClient() { return () => { aliveRef.current = false } }, []) + // genRef guards loadAll against stale-closure wallet-switch races. + // snapAddr === address inside an async function is a stale-closure trap: + // both refer to the same closed-over value at render time, so the check + // is always true even when the wallet has changed. genRef is a mutable + // ref that any closure can read to detect it has been superseded. + const genRef = useRef(0) + useEffect(() => { genRef.current++ }, [address]) + // `forcedEnv` (a freshly-minted view_user) lets the in-page Unlock button // load private data without a detour through the Settings page. Public // signal-accuracy always loads regardless. @@ -89,25 +99,37 @@ export default function AnalyticsPageClient() { // disagreed with the closed_at-based metric grid on the same screen. Limit // raised to 500 so the local computation covers ample history. async function loadAll(forcedEnv?: SignedEnvelope) { + const accuracyPromise = swrFetch('signal-accuracy', 10 * 60_000, () => getSignalAccuracy()).catch(() => null) + if (!address || !isConnected) { - setTrades([]); setAccuracy(null); setPrivateLocked(false) + setTrades([]); setPrivateLocked(false) + const a = await accuracyPromise + if (aliveRef.current) setAccuracy(a) return } - const tradesEnv = getCachedViewEnvelope('view_trades', address) - ?? (forcedEnv ?? getCachedViewEnvelope('view_user', address)) + + const snapAddr = address + const gen = genRef.current + const tradesEnv = getCachedViewEnvelope('view_trades', snapAddr) + ?? (forcedEnv ?? getCachedViewEnvelope('view_user', snapAddr)) if (aliveRef.current) setPrivateLocked(!tradesEnv) try { const [t, a] = await Promise.all([ - tradesEnv ? getTrades(address, tradesEnv, 500, 1).catch(() => []) : Promise.resolve([]), - getSignalAccuracy().catch(() => null), + tradesEnv ? getTrades(snapAddr, tradesEnv, 500, 1).catch(() => []) : Promise.resolve([]), + accuracyPromise, ]) - if (aliveRef.current) { setTrades(t); setAccuracy(a) } + // Discard if unmounted or if a newer loadAll call has started (wallet/tab change). + if (aliveRef.current && gen === genRef.current) { setTrades(t); setAccuracy(a) } } catch { - if (aliveRef.current) setTrades([]) + if (aliveRef.current && gen === genRef.current) setTrades([]) } } useEffect(() => { + // B28/B36: clear stale previous-wallet data immediately before the async + // fetch so the UI never shows another wallet's private P&L. + setTrades([]) + setPrivateLocked(false) // Navigation only uses a cached envelope — never auto-popup the wallet. void loadAll() // eslint-disable-next-line react-hooks/exhaustive-deps @@ -157,7 +179,8 @@ export default function AnalyticsPageClient() { const bestTrade = pnls.length ? Math.max(...pnls) : 0 const worstTrade = pnls.length ? Math.min(...pnls) : 0 const avgTrade = pnls.length ? totalPnl / pnls.length : 0 - const avgHold = filteredTrades.length ? filteredTrades.reduce((sum, trade) => sum + trade.hold_seconds, 0) / filteredTrades.length : 0 + const heldTrades = filteredTrades.filter(t => t.hold_seconds !== null) + const avgHold = heldTrades.length ? heldTrades.reduce((sum, trade) => sum + (trade.hold_seconds ?? 0), 0) / heldTrades.length : 0 // One basis for every window: derive from the closed_at-filtered trades. const maxDrawdown = calcDrawdownPct(filteredTrades) const summaryPnl = totalPnl @@ -169,11 +192,11 @@ export default function AnalyticsPageClient() { tip: 'How many closed positions in this window. Open trades not counted.' }, { k: isZh ? '平均持仓时间' : 'Avg hold time', v: filteredTrades.length ? fmtHold(Math.round(avgHold)) : '—', sub: isZh ? '按单笔计算' : 'Per trade', tip: 'Entry → exit duration averaged across every closed trade.' }, - { k: isZh ? '平均单笔盈亏' : 'Avg trade P&L', v: fmtMoney(avgTrade), sub: isZh ? '每笔交易均值' : 'Mean per trade', up: avgTrade > 0, + { k: isZh ? '平均单笔盈亏' : 'Avg trade P&L', v: pnls.length ? fmtMoney(avgTrade) : '—', sub: isZh ? '每笔交易均值' : 'Mean per trade', up: avgTrade > 0, tip: 'Total P&L ÷ number of trades. Positive = the strategy has edge per trade.' }, - { k: isZh ? '最佳单笔' : 'Best trade', v: fmtMoney(bestTrade), sub: isZh ? '单笔最大盈利' : 'Largest single win', up: true, + { k: isZh ? '最佳单笔' : 'Best trade', v: pnls.length ? fmtMoney(bestTrade) : '—', sub: isZh ? '单笔最大盈利' : 'Largest single win', up: true, tip: 'Biggest realized gain on one trade in this window.' }, - { k: isZh ? '最差单笔' : 'Worst trade', v: fmtMoney(worstTrade), sub: isZh ? '单笔最大亏损' : 'Largest single loss', down: true, + { k: isZh ? '最差单笔' : 'Worst trade', v: pnls.length ? fmtMoney(worstTrade) : '—', sub: isZh ? '单笔最大亏损' : 'Largest single loss', down: true, tip: 'Biggest realized loss on one trade. Should be bounded by your stop-loss setting.' }, ] @@ -183,8 +206,7 @@ export default function AnalyticsPageClient() {

{isZh ? '分析面板' : 'Analytics'}

- Did the bot actually make money? Win rate, drawdown, average trade, - and AI signal accuracy across the time window you pick on the right. + P&L · win rate · drawdown · signal accuracy — pick a time window on the right.
@@ -207,6 +229,55 @@ export default function AnalyticsPageClient() {
+ {/* Signal accuracy — always public, shown first so non-connected visitors + can immediately see proof of signal quality without needing to log in. */} + {accuracy && ( +
+
+
AI Signal Accuracy
+ {accuracy.total_directional_signals} directional signals measured + Public · no login needed +
+
+ {/* Overall */} +
+
Overall
+ {(['m5','m15','m1h'] as const).map(w => { + const d = accuracy.overall[w] + const pct = d.accuracy_pct + const color = pct >= 55 ? 'var(--up)' : pct >= 45 ? 'var(--ink-2)' : 'var(--down)' + return ( +
+ {w.replace('m1','1').replace('m','')} + {pct != null ? `${pct.toFixed(0)}%` : '—'} +
+ ) + })} +
+ {Object.entries(accuracy.by_signal).map(([sig, data]) => { + const label = sig === 'buy' ? '🟢 Buy' : sig === 'short' ? '🔴 Short' : '🟡 Sell' + return ( +
+
{label} ({data.count})
+ {(['m5','m15','m1h'] as const).map(w => { + const d = data[w] + if (d.checked < 2) return
{w.replace('m1','1').replace('m','')}—
+ const pct = d.accuracy_pct + const color = pct >= 55 ? 'var(--up)' : pct >= 45 ? 'var(--ink-2)' : 'var(--down)' + return ( +
+ {w.replace('m1','1').replace('m','')} + {pct.toFixed(0)}% +
+ ) + })} +
+ ) + })} +
+
+ )} + {isPaperView && filteredTrades.length > 0 && (
- {accuracy && ( -
-
{isZh ? `AI 信号准确率 · ${accuracy.total_directional_signals} 条方向性信号` : `AI Signal Accuracy · ${accuracy.total_directional_signals} directional signals`}
-
-
-
{isZh ? '整体' : 'Overall'}
- {(['m5','m15','m1h'] as const).map(w => { - const d = accuracy.overall[w] - const pct = d.accuracy_pct - const color = pct >= 55 ? 'var(--up)' : pct >= 45 ? 'var(--ink-2)' : 'var(--down)' - return ( -
- {w.replace('m','').replace('1h','1h')} - {fmtAccuracyPct(pct)} -
- ) - })} -
{isZh ? `${accuracy.overall.m5.checked} 条已测` : `${accuracy.overall.m5.checked} measured`}
-
- {Object.entries(accuracy.by_signal).map(([sig, data]) => { - const label = sig === 'buy' ? (isZh ? '🟢 做多' : '🟢 Buy') : sig === 'short' ? (isZh ? '🔴 做空' : '🔴 Short') : (isZh ? '🟡 卖出' : '🟡 Sell') - return ( -
-
{label} ({data.count})
- {(['m5','m15','m1h'] as const).map(w => { - const d = data[w] - if (d.checked < 2) return ( -
- {w} - — -
- ) - const pct = d.accuracy_pct - const color = pct >= 55 ? 'var(--up)' : pct >= 45 ? 'var(--ink-2)' : 'var(--down)' - return ( -
- {w} - {fmtAccuracyPct(pct)} -
- ) - })} -
{isZh ? `${data.m5.checked} 条已测` : `${data.m5.checked} measured`}
-
- ) - })} -
-
- )} + {/* Signal accuracy is now shown at the top of the page (public, no login needed). + Removed duplicate block here to avoid showing the same data twice. */} {!filteredTrades.length && (

{!isConnected || !address ? (isZh ? '连接钱包以加载你的分析数据。' : 'Connect your wallet to load your analytics.') + : privateLocked + ? (isZh ? '签名解锁后可查看你的真实业绩和交易历史。' : 'Sign once above to unlock your personal P&L and trade history.') : trades.length ? (isZh ? `${period} 时间窗内还没有已平仓交易。` : `No trades closed in the ${period} window yet.`) : (isZh ? '还没有交易数据。机器人开始执行后，这里会自动出现统计。' : 'No trade data yet. The bot will populate analytics once it starts executing.')} diff --git a/app/[locale]/analytics/loading.tsx b/app/[locale]/analytics/loading.tsx new file mode 100644 index 0000000..20814b2 --- /dev/null +++ b/app/[locale]/analytics/loading.tsx @@ -0,0 +1,28 @@ +/** Instant skeleton while AnalyticsPage loads. */ +export default function AnalyticsLoading() { + return ( +

+
+
+
+
+ {Array.from({ length: 3 }).map((_, i) => ( +
+
+
+
+ ))} +
+
+
+ {Array.from({ length: 5 }).map((_, i) => ( +
+
+
+
+
+ ))} +
+
+ ) +} diff --git a/app/[locale]/archive/ArchivePageClient.tsx b/app/[locale]/archive/ArchivePageClient.tsx index 485be4e..d398d24 100644 --- a/app/[locale]/archive/ArchivePageClient.tsx +++ b/app/[locale]/archive/ArchivePageClient.tsx @@ -1,68 +1,98 @@ 'use client' -import { useState, useEffect, useMemo } from 'react' -import { useLocale } from 'next-intl' +import { useState, useEffect } from 'react' import type { TrumpPost } from '@/types' -import { getPosts } from '@/lib/api' +import { getPosts, getPostsPage, type PostListResponse } from '@/lib/api' +import { hasCached, swrFetch } from '@/lib/cache' import PostRow from '@/components/dashboard/PostCards' import PageHint from '@/components/ui/PageHint' import Pagination from '@/components/ui/Pagination' +import { buildArchiveFallbackResponse } from '@/lib/postPage' const ARCHIVE_PAGE_SIZE = 30 -const LIVE_SOURCES = new Set([ - 'truth', - 'btc_bottom_reversal', - 'funding_reversal', - 'kol_divergence', -]) +interface ArchivePageClientProps { + initialData?: PostListResponse | null +} -/** - * Archive — legacy / test signals (rsi_reversal, sma_reclaim, breakout, - * test, phase1…). NOT a live system. Kept only so old data is inspectable. - */ -export default function ArchivePageClient() { - const locale = useLocale() - const isZh = false // i18n shelved — Chinese branches kept as dead code for future revival; see messages/zh.json - const [posts, setPosts] = useState([]) - const [loading, setLoading] = useState(true) +export default function ArchivePageClient({ initialData = null }: ArchivePageClientProps) { + const [posts, setPosts] = useState(initialData?.items ?? []) + const [totalPosts, setTotalPosts] = useState(initialData?.total ?? 0) + const [sourceCounts, setSourceCounts] = useState(initialData?.source_counts ?? []) + const [loading, setLoading] = useState(initialData === null) const [loadErr, setLoadErr] = useState('') const [src, setSrc] = useState('all') const [archivePage, setArchivePage] = useState(1) useEffect(() => { - getPosts(500, 1) - .then(p => { setPosts(p); setLoadErr('') }) - .catch(e => setLoadErr(e instanceof Error ? e.message : (isZh ? '历史归档加载失败' : 'Failed to load archive'))) - .finally(() => setLoading(false)) - }, [isZh]) + const key = `archive-page-${archivePage}-src-${src}` + setLoadErr('') + setLoading(posts.length === 0 && !hasCached(key)) - // Archive = legacy / test data only. Exclude every live signal source so - // active modules don't leak in here as users explore old experiments. Keep - // this set in sync with sources emitted by app/services/scanners/*. - const archivePosts = useMemo( - () => posts.filter(p => !LIVE_SOURCES.has(p.source || '')), - [posts], - ) - const sources = useMemo(() => { - const m: Record = {} - for (const p of archivePosts) m[p.source || '?'] = (m[p.source || '?'] || 0) + 1 - return Object.entries(m).sort((a, b) => b[1] - a[1]) - }, [archivePosts]) - const filtered = useMemo( - () => src === 'all' ? archivePosts : archivePosts.filter(p => p.source === src), - [archivePosts, src], - ) - const archiveTotalPages = Math.max(1, Math.ceil(filtered.length / ARCHIVE_PAGE_SIZE)) - const archiveSafePage = Math.min(archivePage, archiveTotalPages) - const archivePageItems = filtered.slice((archiveSafePage - 1) * ARCHIVE_PAGE_SIZE, archiveSafePage * ARCHIVE_PAGE_SIZE) + swrFetch( + key, + 3 * 60_000, + () => getPostsPage( + ARCHIVE_PAGE_SIZE, + archivePage, + undefined, + { + archiveOnly: true, + sourceIn: src === 'all' ? undefined : [src], + }, + ), + fresh => { + setPosts(fresh.items) + setTotalPosts(fresh.total) + setSourceCounts(fresh.source_counts) + }, + ) + .then(r => { + setPosts(r.items) + setTotalPosts(r.total) + setSourceCounts(r.source_counts) + }) + .catch(async e => { + const detail = e instanceof Error ? e.message : 'Failed to load archive' + if (!detail.includes('404')) { + setLoadErr(detail) + return + } + try { + const legacyPosts = await swrFetch( + 'archive-legacy-500', + 3 * 60_000, + () => getPosts(500, 1), + ) + const fallback = buildArchiveFallbackResponse(legacyPosts, archivePage, ARCHIVE_PAGE_SIZE, src) + setPosts(fallback.items) + setTotalPosts(fallback.total) + setSourceCounts(fallback.source_counts) + setLoadErr('') + } catch (legacyErr) { + setLoadErr(legacyErr instanceof Error ? legacyErr.message : detail) + } + }) + .finally(() => setLoading(false)) + }, [archivePage, posts.length, src]) + + const archiveTotalPages = Math.max(1, Math.ceil(totalPosts / ARCHIVE_PAGE_SIZE)) + const archiveSafePage = Math.min(archivePage, archiveTotalPages) + const allSourcesCount = sourceCounts.reduce((sum, item) => sum + item.count, 0) + const selectedCount = src === 'all' + ? totalPosts + : sourceCounts.find(s => s.source === src)?.count ?? totalPosts + const sourceTabs: [string, number][] = [ + ['all', allSourcesCount], + ...sourceCounts.map(item => [item.source, item.count] as [string, number]), + ] return (

Archive

- + Signals from retired scanner experiments (rsi_reversal, sma_reclaim, breakout, test/phase1). Read-only — the bot no longer acts on any of these. @@ -71,7 +101,7 @@ export default function ArchivePageClient() {
- {[['all', archivePosts.length] as [string, number], ...sources].map(([s, n]) => ( + {sourceTabs.map(([s, n]) => (
- {loading &&
{isZh ? '加载中…' : 'Loading…'}
} + {loading &&
Loading…
} {!loading && loadErr && (
- ⚠️ {isZh ? `无法加载归档：${loadErr}` : `Couldn't load archive — ${loadErr}`} + ⚠️ {`Couldn't load archive — ${loadErr}`}
+ onClick={() => location.reload()}>Retry
)} - {!loading && !loadErr && filtered.length === 0 && ( + {!loading && !loadErr && totalPosts === 0 && (
- {isZh ? '没有可显示的历史信号。' : 'No archived signals.'} + No archived signals.
)} - {!loading && archivePageItems.length > 0 && ( + {!loading && posts.length > 0 && ( <>
- {archivePageItems.map(p => )} + {posts.map(p => )}
diff --git a/app/[locale]/archive/page.tsx b/app/[locale]/archive/page.tsx index bc13b28..a1764ff 100644 --- a/app/[locale]/archive/page.tsx +++ b/app/[locale]/archive/page.tsx @@ -1,13 +1,25 @@ // Archive is legacy/test data only — not part of the live signal stack. // noindex keeps it out of search results (duplicate/thin content risk) // while keeping it accessible to logged-in users for inspection. +export const revalidate = 60 // archive data rarely changes — ISR at 60s keeps server load low import type { Metadata } from 'next' +import { type PostListResponse } from '@/lib/api' +import { getPosts } from '@/lib/api' +import { buildArchiveFallbackResponse, getInitialPostPage } from '@/lib/postPage' import ArchivePageClient from './ArchivePageClient' export const metadata: Metadata = { robots: { index: false, follow: false }, } -export default function ArchivePage() { - return +export default async function ArchivePage() { + const initialData: PostListResponse | null = await getInitialPostPage(30, 1, { + filters: { archiveOnly: true }, + legacyFallback: async () => { + const legacyItems = await getPosts(500, 1).catch(() => null) + return legacyItems ? buildArchiveFallbackResponse(legacyItems, 1, 30) : null + }, + }) + + return } diff --git a/app/[locale]/btc/page.tsx b/app/[locale]/btc/page.tsx index 216ec77..e94df49 100644 --- a/app/[locale]/btc/page.tsx +++ b/app/[locale]/btc/page.tsx @@ -1,4 +1,4 @@ -import { redirect } from 'next/navigation' +import { permanentRedirect } from 'next/navigation' interface LegacyBtcPageProps { params: Promise<{ locale: string }> @@ -6,5 +6,5 @@ interface LegacyBtcPageProps { export default async function LegacyBtcPage({ params }: LegacyBtcPageProps) { const { locale } = await params - redirect(`/${locale}/macro`) + permanentRedirect(`/${locale}/macro`) } diff --git a/app/[locale]/case-studies/page.tsx b/app/[locale]/case-studies/page.tsx index 3a79996..6414488 100644 --- a/app/[locale]/case-studies/page.tsx +++ b/app/[locale]/case-studies/page.tsx @@ -173,14 +173,14 @@ function getCopy(locale: string): CaseStudiesCopy { ogDescription: 'Historical cases that show why the Trump, BTC, and KOL engines exist: posts, wallet behavior, price reaction, and evidence.', heroTitle: 'Case Studies', - heroSubtitle: 'Real events, real positioning, and real price reactions — documented.', + heroSubtitle: 'Real events, real price moves — why these signals are worth tracking.', intro: - 'This is not a performance-claims page. It is an evidence page. Each case answers three questions: what happened, how the market reacted, and why that event supports one of the signal engines.', + 'Three documented cases where the signal worked. Not forecasts — history.', statAsset: 'Asset', - statImpact: 'Price impact', + statImpact: 'Move', statWindow: 'Window', - evidenceLabel: 'Evidence', - footer: 'These cases illustrate the historical basis for each signal engine. They are not return forecasts.', + evidenceLabel: 'Source', + footer: 'Past events don\'t guarantee future results. These cases show why the signal categories exist.', footerMethodology: 'Methodology', footerGlossary: 'Glossary', cases: [ @@ -188,85 +188,51 @@ function getCopy(locale: string): CaseStudiesCopy { id: 'strategic-reserve-2025', date: 'March 2, 2025', source: 'Trump Truth Social', - title: 'Strategic Crypto Reserve announcement', - summary: 'Trump confirmed a U.S. Strategic Crypto Reserve including BTC, ETH, SOL, XRP, and ADA.', + title: 'Trump announces U.S. Strategic Crypto Reserve — BTC +8%, ETH +10%', + summary: 'Trump posted confirmation of a U.S. Strategic Crypto Reserve including BTC, ETH, SOL, XRP, and ADA. Markets moved within minutes.', signal: 'LONG', asset: 'BTC / ETH', priceImpact: 'BTC +8.2%, ETH +10%+', impactWindow: '24 hours', detail: - 'This case mattered because the post moved from vague political tone into explicit asset-level policy language. A signal engine should classify that as a high-conviction LONG event, because it names specific assets and ties them to a state-level commitment.', + 'The post named specific assets and tied them to a government-level commitment — the clearest possible bullish signal. This is exactly what the Trump signal engine is built to catch: a post that goes from vague political tone to explicit crypto policy in one statement.', evidence: - 'CNBC and Al Jazeera both documented the market response, and exchange plus on-chain data showed clear momentum-driven inflows after the post.', + 'CNBC and Al Jazeera documented the market response. Exchange data showed immediate momentum-driven inflows.', externalUrl: 'https://www.cnbc.com/2025/03/02/trump-announces-strategic-crypto-reserve-including-bitcoin-solana-xrp-and-more.html', }, - { - id: 'whale-6m-perp', - date: 'March 2025', - source: 'On-chain / Truth Social', - title: '$6.8M pre-positioning profit around the reserve post', - summary: - 'An anonymous address built a large leveraged BTC/ETH position around the reserve announcement and reportedly closed it the same day for roughly $6.8M profit.', - signal: 'LONG', - asset: 'BTC', - priceImpact: '+$6.8M', - impactWindow: 'Same day', - detail: - 'This case highlights two facts at once. First, Trump-linked posts can create enough directional force to matter. Second, speed itself is edge in event-driven trading. Whether this was advance positioning or ultra-fast automation, it validates the post-to-trade-to-PnL chain.', - evidence: - 'The trade was documented by Raw Story / NewsBreak, and TIME later referenced the political and regulatory scrutiny around the episode.', - externalUrl: - 'https://www.newsbreak.com/raw-story-2096750/4286876592634-that-s-the-maga-playbook-crypto-trade-made-moments-before-trump-post-raises-eyebrows', - }, { id: 'tariff-china-2025', date: 'April 2025', source: 'Trump Truth Social', - title: 'Tariff escalation post triggered a risk-off move', - summary: 'A tariff-escalation post created a short-term macro risk-off setup rather than a bullish crypto reaction.', + title: 'Tariff escalation post — BTC -4% in 4 hours', + summary: 'A tariff-escalation post compressed risk appetite fast. BTC dropped 4.1% in 4 hours — no crypto-specific news, just macro sentiment repricing.', signal: 'SHORT', asset: 'BTC', priceImpact: 'BTC -4.1%', impactWindow: '4 hours', detail: - 'Not every Trump post is bullish for crypto. Posts framed around trade conflict, tariff escalation, tighter regulation, or macro uncertainty can compress risk appetite quickly. This case supports the need for a real SHORT branch in the signal engine.', + 'Not every Trump post is bullish for crypto. Trade conflict, tariffs, and macro uncertainty posts can hit crypto just as hard as equity markets. This is why the signal engine has a real SHORT branch — and why noise filtering matters.', evidence: - 'CoinDesk has documented multiple instances of Trump statements moving BTC. This post fits that broader historical pattern of immediate sentiment repricing.', + 'CoinDesk has documented multiple Trump statements that moved BTC in both directions.', externalUrl: 'https://www.coindesk.com/markets/2026/04/20/five-times-president-trump-made-a-statement-that-moved-bitcoin-and-why-it-might-happen-again-this-week', }, { id: 'kol-divergence-example', - date: 'Illustrative composite', - source: 'KOL post + on-chain wallet', - title: 'Publicly bullish on ETH, privately reducing ETH', + date: 'Composite example', + source: 'KOL post + tracked wallet', + title: 'KOL bullish on ETH in public, selling ETH on-chain', summary: - 'A tracked KOL published a bullish ETH thesis, then reduced roughly $180k of ETH exposure within five days. That is classic talks-vs-trades divergence.', + 'A tracked KOL published a bullish ETH thesis. Within 5 days, their wallet reduced ~$180k of ETH exposure. Public pitch said buy — the wallet said sell.', signal: 'DIVERGENCE', asset: 'ETH', priceImpact: 'N/A', impactWindow: '±7 days', detail: - 'This example is not about a single post moving price. It is about the information gap between public narrative and real positioning. For research-heavy users, that gap is often more valuable than a simple bullish or bearish statement.', + 'Words are free. Wallet moves cost money. When a KOL\'s on-chain behavior contradicts their public call, the wallet is usually telling the truth. This is why the KOL module tracks both — and why divergence is the highest-conviction category.', evidence: - 'The divergence classification comes from the platform’s cross-signal logic, which is documented in full on the Methodology page.', - }, - { - id: 'btc-bottom-nov-2022', - date: 'November 2022', - source: 'Historical BTC macro-bottom reference', - title: 'The $15.5k FTX washout zone', - summary: - 'After the FTX collapse, BTC entered the $15.5k region and later recovered toward $69k within roughly 18 months. This is the kind of regime the BTC macro-bottom engine is built to identify.', - signal: 'LONG', - asset: 'BTC', - priceImpact: '+345%', - impactWindow: '18 months', - detail: - 'The current live BTC engine is not trying to replay an old premium-data model. It is trying to locate the same market structure with AHR999, the 200-week moving average, and Pi Cycle Bottom: deep value, long-cycle support, and emotional washout lining up together.', - evidence: - 'Public price archives and long-range market charts consistently mark the FTX washout zone as the core bottom region of that bear market.', + 'Divergence detection logic is documented on the Methodology page.', }, ], } diff --git a/app/[locale]/globals.css b/app/[locale]/globals.css index 9e8a3a0..c8ef483 100644 --- a/app/[locale]/globals.css +++ b/app/[locale]/globals.css @@ -44,9 +44,9 @@ --r-pill: 999px; /* Shadow */ - --shadow-1: 0 1px 2px rgba(20, 18, 14, 0.04), 0 1px 1px rgba(20, 18, 14, 0.02); - --shadow-2: 0 4px 16px rgba(20, 18, 14, 0.06), 0 1px 2px rgba(20, 18, 14, 0.03); - --shadow-3: 0 12px 40px rgba(20, 18, 14, 0.08), 0 2px 4px rgba(20, 18, 14, 0.04); + --shadow-1: 0 1px 3px rgba(20, 18, 14, 0.07), 0 1px 2px rgba(20, 18, 14, 0.04); + --shadow-2: 0 4px 20px rgba(20, 18, 14, 0.09), 0 1px 4px rgba(20, 18, 14, 0.05); + --shadow-3: 0 16px 48px rgba(20, 18, 14, 0.12), 0 2px 6px rgba(20, 18, 14, 0.06); --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif; --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; @@ -80,20 +80,15 @@ html[data-theme="dark"] { --violet: oklch(70% 0.17 280); --violet-soft: oklch(24% 0.06 280); - --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3); - --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.35); - --shadow-3: 0 12px 40px rgba(0, 0, 0, 0.5); + --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.4); + --shadow-2: 0 4px 20px rgba(0, 0, 0, 0.45); + --shadow-3: 0 16px 48px rgba(0, 0, 0, 0.6); color-scheme: dark; } html[data-theme="dark"] .src-ico.x { background: oklch(92% 0.005 85); color: oklch(15% 0.008 85); } -html[data-theme="dark"] .bot-status { - background: linear-gradient(160deg, oklch(28% 0.015 85) 0%, oklch(20% 0.01 85) 100%); - border: 1px solid oklch(30% 0.01 85); -} - html[data-theme="dark"] .kpi.accent { background: linear-gradient(135deg, oklch(28% 0.05 75), oklch(24% 0.07 70)); } @@ -103,8 +98,9 @@ html[data-theme="dark"] .kpi.accent { on the dark grid as a glaring out-of-theme block. Mirror the kpi dark gradient so the card stays visually grouped with everything else. */ html[data-theme="dark"] .overview-stat-card.accent { - background: linear-gradient(135deg, oklch(28% 0.05 75), oklch(24% 0.07 70)); - border-color: color-mix(in oklab, var(--amber) 28%, var(--line)); + background: var(--surface); + border-color: var(--line); + border-left: 3px solid var(--amber); } html[data-theme="dark"] .landing-nav { @@ -112,7 +108,7 @@ html[data-theme="dark"] .landing-nav { } html[data-theme="dark"] .src-ico.truth { - background: oklch(30% 0.08 25); color: oklch(80% 0.15 25); + background: oklch(28% 0.10 25); color: oklch(82% 0.18 25); font-weight: 700; } html[data-theme="dark"] .post-row.selected { @@ -133,6 +129,13 @@ html, body { * { box-sizing: border-box; } +/* Global focus ring — amber for brand consistency, only on keyboard nav */ +:focus-visible { + outline: 2px solid var(--amber); + outline-offset: 2px; + border-radius: 4px; +} + button { font-family: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; } input, textarea { font-family: inherit; } a { color: inherit; text-decoration: none; } @@ -152,16 +155,20 @@ a { color: inherit; text-decoration: none; } /* ---------- Top navbar ---------- */ .nav { - height: 64px; + height: 60px; padding: 0 28px; display: flex; align-items: center; - gap: 32px; - background: var(--bg); + gap: 28px; + background: color-mix(in oklab, var(--bg) 88%, transparent); + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; + box-shadow: 0 1px 0 color-mix(in oklab, var(--line) 50%, transparent), + 0 4px 16px rgba(0,0,0,0.04); } .wallet-anchor { @@ -217,22 +224,23 @@ a { color: inherit; text-decoration: none; } display: flex; align-items: center; gap: 10px; - font-weight: 600; + font-weight: 700; font-size: 15px; - letter-spacing: -0.01em; + letter-spacing: -0.02em; } .brand-mark { - width: 28px; - height: 28px; - border-radius: 8px; - background: var(--ink); - color: var(--bg); + width: 30px; + height: 30px; + border-radius: 9px; + background: linear-gradient(145deg, oklch(26% 0.015 75) 0%, oklch(13% 0.006 85) 100%); + color: oklch(96% 0.006 85); display: grid; place-items: center; font-family: var(--mono); font-size: 15px; - font-weight: 500; + font-weight: 600; position: relative; + box-shadow: 0 2px 8px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.08); } .brand-mark::after { content: ''; @@ -244,30 +252,33 @@ a { color: inherit; text-decoration: none; } border-radius: 999px; background: var(--amber); border: 2px solid var(--bg); + box-shadow: 0 1px 4px color-mix(in oklab, var(--amber) 50%, transparent); } .nav-tabs { display: flex; align-items: center; - gap: 4px; + gap: 3px; padding: 4px; background: var(--bg-sunk); border: 1px solid var(--line); border-radius: var(--r-pill); } .nav-tab { - padding: 7px 14px; + padding: 7px 15px; border-radius: var(--r-pill); font-size: 13px; font-weight: 500; color: var(--ink-3); transition: color 120ms, background 120ms; } -.nav-tab:hover { color: var(--ink); } +.nav-tab:hover { color: var(--ink-2); } .nav-tab.active { - background: var(--surface); + background: color-mix(in oklab, var(--amber) 7%, var(--surface)); color: var(--ink); - box-shadow: var(--shadow-1); + box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,0.7); + border: 1px solid color-mix(in oklab, var(--amber) 22%, transparent); + font-weight: 600; } .nav-spacer { flex: 1; } @@ -294,24 +305,41 @@ a { color: inherit; text-decoration: none; } .connect-btn { padding: 12px 22px; border-radius: var(--r-pill); - background: var(--ink); - color: var(--bg); + background: linear-gradient(135deg, oklch(24% 0.012 80) 0%, oklch(14% 0.006 85) 100%); + color: oklch(97% 0.005 85); font-size: 14px; font-weight: 600; letter-spacing: -0.005em; - transition: background 120ms, transform 120ms, box-shadow 120ms; - box-shadow: var(--shadow-1); + transition: opacity 120ms, transform 120ms, box-shadow 120ms; + box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,0.07); } -.connect-btn:hover { background: oklch(30% 0.01 85); box-shadow: var(--shadow-2); } +.connect-btn:hover { opacity: 0.88; box-shadow: var(--shadow-2); } .connect-btn:active { transform: scale(0.98); } .connect-btn.lg { padding: 13px 26px; font-size: 14px; } -html[data-theme="dark"] .connect-btn { background: var(--amber); color: oklch(20% 0.04 75); } -html[data-theme="dark"] .connect-btn:hover { background: oklch(82% 0.17 75); } +html[data-theme="dark"] .connect-btn { + background: linear-gradient(135deg, var(--amber) 0%, oklch(73% 0.18 70) 100%); + color: oklch(18% 0.04 75); + box-shadow: 0 2px 10px color-mix(in oklab, var(--amber) 40%, transparent), + inset 0 1px 0 rgba(255,255,255,0.25); +} +html[data-theme="dark"] .connect-btn:hover { opacity: 0.9; } .theme-toggle { width: 40px; height: 40px; } html[data-theme="dark"] .icon-btn { background: var(--surface-2); border-color: var(--line); } html[data-theme="dark"] .icon-btn:hover { background: var(--surface-3); } -html[data-theme="dark"] .nav-tab.active { background: var(--surface-2); } +html[data-theme="dark"] .card { + box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,0.04); +} +html[data-theme="dark"] .overview-market-card, +html[data-theme="dark"] .overview-side-card, +html[data-theme="dark"] .overview-stats-bar { + box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,0.03); +} +html[data-theme="dark"] .nav-tab.active { + background: color-mix(in oklab, var(--amber) 10%, var(--surface-2)); + border-color: color-mix(in oklab, var(--amber) 28%, transparent); + box-shadow: var(--shadow-1); +} html[data-theme="dark"] .asset-switch button.on { background: var(--surface-2); } .wallet-chip { @@ -372,19 +400,21 @@ html[data-theme="dark"] .asset-switch button.on { background: var(--surface-2); display: flex; align-items: flex-end; justify-content: space-between; - margin-bottom: 24px; + margin-bottom: 28px; gap: 24px; } .page-title { - font-size: 28px; - letter-spacing: -0.025em; - font-weight: 700; - line-height: 1.1; + font-size: 32px; + letter-spacing: -0.035em; + font-weight: 800; + line-height: 1.05; margin: 0; + color: var(--ink); } .page-sub { color: var(--ink-3); - font-size: 13px; + font-size: 14px; + line-height: 1.5; margin-top: 5px; margin-bottom: 0; } @@ -394,18 +424,20 @@ html[data-theme="dark"] .asset-switch button.on { background: var(--surface-2); gets read (page-sub was so faint it functioned as decoration). Use via One sentence about the page.. */ .page-hint { - color: var(--ink-2); - font-size: 16px; + color: var(--ink-3); + font-size: 14px; line-height: 1.5; - margin: 10px 0 0; + margin: 6px 0 0; max-width: 64ch; } .page-hint-count { - color: var(--ink-4); - font-size: 13px; + color: var(--amber-ink); + font-size: 12px; + font-weight: 600; margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--line); + opacity: 0.8; } /* SectionHint — always-visible explanation block. Pairs with a section/tab @@ -414,8 +446,9 @@ html[data-theme="dark"] .asset-switch button.on { background: var(--surface-2); full content width on purpose — narrow boxes inside a wide page looked like accidentally-floating callouts. */ .section-hint { - background: var(--bg-sunk); - border: 1px solid var(--line); + background: color-mix(in oklab, var(--amber) 4%, var(--bg-sunk)); + border: 1px solid color-mix(in oklab, var(--amber) 18%, var(--line)); + border-left: 3px solid color-mix(in oklab, var(--amber) 60%, transparent); border-radius: 8px; padding: 12px 16px; margin-bottom: 14px; @@ -515,6 +548,7 @@ html[data-theme="dark"] .infotip-bubble { align-items: flex-start; justify-content: space-between; gap: 16px; + background: color-mix(in oklab, var(--amber) 3%, var(--surface)); } .macro-panel-title { @@ -523,6 +557,7 @@ html[data-theme="dark"] .infotip-bubble { gap: 8px; font-size: 15px; font-weight: 700; + letter-spacing: -0.01em; } .macro-panel-dot { @@ -531,6 +566,14 @@ html[data-theme="dark"] .infotip-bubble { border-radius: 999px; background: var(--up); display: inline-block; + position: relative; + box-shadow: 0 0 5px color-mix(in oklab, var(--up) 60%, transparent); + animation: macro-dot-pulse 2.4s ease-out infinite; +} +@keyframes macro-dot-pulse { + 0%, 60% { box-shadow: 0 0 5px color-mix(in oklab, var(--up) 60%, transparent); } + 30% { box-shadow: 0 0 10px color-mix(in oklab, var(--up) 80%, transparent); } + 100% { box-shadow: 0 0 5px color-mix(in oklab, var(--up) 60%, transparent); } } .macro-panel-subtitle { @@ -576,8 +619,10 @@ html[data-theme="dark"] .infotip-bubble { width: 5px; height: 5px; border-radius: 50%; - background: var(--ink-3); + background: var(--amber); flex-shrink: 0; + box-shadow: 0 0 5px color-mix(in oklab, var(--amber) 50%, transparent); + opacity: 0.8; } .macro-grid { @@ -607,7 +652,7 @@ html[data-theme="dark"] .infotip-bubble { } .macro-metric-card { - box-shadow: var(--shadow-1); + box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,0.6); } .macro-metric-card.tone-up { @@ -737,30 +782,28 @@ html[data-theme="dark"] .infotip-bubble { letter-spacing: 0.01em; } .macro-threshold-chip.up.active { - background: var(--up); + background: linear-gradient(135deg, var(--up) 0%, oklch(66% 0.19 155) 100%); color: #fff; border-color: var(--up); box-shadow: - 0 6px 18px color-mix(in oklab, var(--up) 35%, transparent), - 0 1px 0 rgba(255,255,255,0.25) inset; + 0 6px 18px color-mix(in oklab, var(--up) 40%, transparent), + inset 0 1px 0 rgba(255,255,255,0.28); } .macro-threshold-chip.down.active { - background: var(--down); + background: linear-gradient(135deg, var(--down) 0%, oklch(55% 0.24 18) 100%); color: #fff; border-color: var(--down); box-shadow: - 0 6px 18px color-mix(in oklab, var(--down) 35%, transparent), - 0 1px 0 rgba(255,255,255,0.25) inset; + 0 6px 18px color-mix(in oklab, var(--down) 40%, transparent), + inset 0 1px 0 rgba(255,255,255,0.22); } .macro-threshold-chip.neutral.active { - /* Amber = "caution" signal — between safe and danger. Lets the user - know "you are here, no extreme yet" without the alarming red. */ - background: var(--amber); + background: linear-gradient(135deg, var(--amber) 0%, oklch(70% 0.19 65) 100%); color: oklch(20% 0.04 75); border-color: var(--amber); box-shadow: - 0 6px 18px color-mix(in oklab, var(--amber) 35%, transparent), - 0 1px 0 rgba(255,255,255,0.4) inset; + 0 6px 18px color-mix(in oklab, var(--amber) 40%, transparent), + inset 0 1px 0 rgba(255,255,255,0.45); } /* Dark mode tweaks — the soft white-shimmer inset doesn't read on dark cards, @@ -823,26 +866,26 @@ html[data-theme="dark"] .macro-threshold-chip.neutral.active { align-items: center; gap: 6px; /* Compact natural width — fits "Open chart CoinGlass ↗" comfortably */ - padding: 7px 12px; - border-radius: 8px; + padding: 7px 13px; + border-radius: 9px; border: 1px solid var(--line); background: color-mix(in oklab, var(--ink) 4%, var(--surface)); color: var(--ink); text-decoration: none; transition: background 120ms, border-color 120ms, transform 120ms, box-shadow 120ms; - box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); + box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), var(--shadow-1); } .macro-action-btn:hover { - background: color-mix(in oklab, var(--ink) 7%, var(--surface)); - border-color: color-mix(in oklab, var(--ink) 12%, var(--line)); + background: color-mix(in oklab, var(--ink) 8%, var(--surface)); + border-color: color-mix(in oklab, var(--ink) 14%, var(--line)); transform: translateY(-1px); - box-shadow: var(--shadow-1); + box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), var(--shadow-2); } .macro-action-btn.chart { - background: color-mix(in oklab, var(--amber) 10%, var(--surface)); - border-color: color-mix(in oklab, var(--amber) 18%, var(--line)); + background: color-mix(in oklab, var(--amber) 12%, var(--surface)); + border-color: color-mix(in oklab, var(--amber) 22%, var(--line)); } /* The kicker ("OPEN CHART" uppercase eyebrow) used to sit ABOVE the label @@ -911,6 +954,7 @@ html[data-theme="dark"] .macro-threshold-chip.neutral.active { metric cards rather than a full-bleed banner. */ margin: 14px; padding: 20px 22px 22px; + box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,0.5); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; @@ -929,8 +973,9 @@ html[data-theme="dark"] .macro-threshold-chip.neutral.active { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; - color: var(--ink-3); + color: var(--amber-ink); font-weight: 700; + opacity: 0.85; } .macro-composite-right { @@ -952,12 +997,13 @@ html[data-theme="dark"] .macro-threshold-chip.neutral.active { display: inline-flex; align-items: center; min-height: 28px; - padding: 0 10px; + padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 11px; font-weight: 700; - letter-spacing: 0.06em; + letter-spacing: 0.07em; + box-shadow: inset 0 1px 0 rgba(255,255,255,0.35); } .macro-composite-track { @@ -1063,6 +1109,7 @@ html[data-theme="dark"] .macro-threshold-chip.neutral.active { border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px; + box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,0.55); } .card.flush { padding: 0; } .card.soft { background: var(--bg-sunk); } @@ -1076,9 +1123,9 @@ html[data-theme="dark"] .macro-threshold-chip.neutral.active { } .section-title h2 { margin: 0; - font-size: 16px; - font-weight: 600; - letter-spacing: -0.01em; + font-size: 17px; + font-weight: 700; + letter-spacing: -0.02em; } .section-title .hint { font-size: 12px; @@ -1096,21 +1143,27 @@ html[data-theme="dark"] .macro-threshold-chip.neutral.active { font-size: 12px; color: var(--ink-2); font-weight: 500; + box-shadow: inset 0 1px 0 rgba(255,255,255,0.45); } .chip .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; } -.chip.up { color: oklch(40% 0.16 148); background: var(--up-soft); border-color: oklch(85% 0.08 148); } -.chip.down { color: oklch(44% 0.2 25); background: var(--down-soft); border-color: oklch(87% 0.08 25); } -.chip.amber { color: var(--amber-ink); background: var(--amber-soft); border-color: var(--amber-ring); } -.chip.violet { color: oklch(38% 0.15 280); background: var(--violet-soft); border-color: oklch(86% 0.08 280); } +/* Text darkened to clear WCAG AA 4.5:1 on the soft tint (was 3.4:1). */ +.chip.up { color: oklch(33% 0.17 150); background: var(--up-soft); border-color: oklch(84% 0.10 148); font-weight: 600; } +.chip.down { color: oklch(36% 0.20 27); background: var(--down-soft); border-color: oklch(86% 0.10 25); font-weight: 600; } +/* Dark mode: soft tint is dark, so the text must go light to keep contrast. */ +html[data-theme="dark"] .chip.up { color: oklch(83% 0.15 150); } +html[data-theme="dark"] .chip.down { color: oklch(80% 0.16 27); } +.chip.amber { color: var(--amber-ink); background: var(--amber-soft); border-color: var(--amber-ring); font-weight: 600; } +.chip.violet { color: oklch(36% 0.17 280); background: var(--violet-soft); border-color: oklch(84% 0.10 280); font-weight: 600; } .chip.neutral { color: var(--ink-2); } .live-dot { - width: 6px; - height: 6px; + width: 7px; + height: 7px; border-radius: 999px; background: var(--up); position: relative; display: inline-block; + box-shadow: 0 0 6px color-mix(in oklab, var(--up) 60%, transparent); } .live-dot::after { content: ''; @@ -1118,12 +1171,12 @@ html[data-theme="dark"] .macro-threshold-chip.neutral.active { inset: -4px; border-radius: 999px; background: var(--up); - opacity: 0.3; - animation: pulse 1.6s ease-out infinite; + opacity: 0.35; + animation: pulse 1.8s ease-out infinite; } @keyframes pulse { - 0% { transform: scale(0.6); opacity: 0.5; } - 100% { transform: scale(2.2); opacity: 0; } + 0% { transform: scale(0.5); opacity: 0.6; } + 100% { transform: scale(2.6); opacity: 0; } } .btn { @@ -1138,22 +1191,32 @@ html[data-theme="dark"] .macro-threshold-chip.neutral.active { transition: background 120ms, transform 120ms; border: 1px solid transparent; } -.btn.primary { background: var(--ink); color: var(--bg); } -.btn.primary:hover { background: oklch(30% 0.01 85); } -.btn.amber { - background: var(--amber); - color: oklch(22% 0.04 75); - font-weight: 600; +.btn.primary { + background: linear-gradient(135deg, oklch(24% 0.012 80) 0%, oklch(14% 0.006 85) 100%); + color: oklch(97% 0.005 85); + box-shadow: inset 0 1px 0 rgba(255,255,255,0.07); +} +.btn.primary:hover { opacity: 0.88; } +.btn.amber { + background: linear-gradient(135deg, var(--amber) 0%, oklch(73% 0.18 70) 100%); + color: oklch(20% 0.04 75); + font-weight: 700; + box-shadow: 0 2px 8px color-mix(in oklab, var(--amber) 40%, transparent), + inset 0 1px 0 rgba(255,255,255,0.35); +} +.btn.amber:hover { + background: linear-gradient(135deg, oklch(82% 0.17 75) 0%, oklch(76% 0.19 68) 100%); + box-shadow: 0 4px 14px color-mix(in oklab, var(--amber) 45%, transparent), + inset 0 1px 0 rgba(255,255,255,0.35); } -.btn.amber:hover { background: oklch(82% 0.17 75); } .btn.ghost { background: var(--bg-sunk); color: var(--ink); border-color: var(--line); } .btn.ghost:hover { background: var(--surface-3); } .btn.lg { padding: 14px 22px; font-size: 15px; } .btn:active { transform: scale(0.98); } -.delta { font-family: var(--mono); font-weight: 500; } -.delta.up { color: oklch(42% 0.16 148); } -.delta.down { color: oklch(46% 0.2 25); } +.delta { font-family: var(--mono); font-weight: 600; } +.delta.up { color: oklch(40% 0.18 148); } +.delta.down { color: oklch(44% 0.22 25); } /* ── iOS-style toggle switch ──────────────────────────────── */ .switch { @@ -1188,9 +1251,15 @@ html[data-theme="dark"] .macro-threshold-chip.neutral.active { transition: transform 160ms; box-shadow: 0 1px 2px rgba(0,0,0,0.15); } -.switch input:checked + .switch-track { background: var(--amber); } +.switch input:checked + .switch-track { + background: linear-gradient(135deg, var(--amber) 0%, oklch(73% 0.18 70) 100%); + box-shadow: 0 0 0 2px color-mix(in oklab, var(--amber) 18%, transparent); +} .switch input:checked + .switch-track::before { transform: translateX(14px); } -.switch.up input:checked + .switch-track { background: var(--up); } +.switch.up input:checked + .switch-track { + background: linear-gradient(135deg, var(--up) 0%, oklch(66% 0.19 155) 100%); + box-shadow: 0 0 0 2px color-mix(in oklab, var(--up) 18%, transparent); +} .switch.down input:checked + .switch-track { background: var(--down); } /* ── Form row: label | control, strict-aligned ─────────────── */ @@ -1236,17 +1305,17 @@ html[data-theme="dark"] .macro-threshold-chip.neutral.active { } .section-head:first-child { border-top: 0; padding-top: 0; } .section-head-label { - font-size: 11px; - font-weight: 600; - letter-spacing: 0.08em; + font-size: 10.5px; + font-weight: 700; + letter-spacing: 0.1em; text-transform: uppercase; - color: var(--ink-4); -} - -.settings-scope-intro { - margin-bottom: 16px; + color: var(--amber-ink); + opacity: 0.75; } +/* ── Settings legacy classes (removed from HTML 2026-06) ──────────────── */ +/* These are kept as empty stubs so any cached HTML from CDN doesn't break. */ +.settings-scope-intro, .settings-control-center { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr); @@ -1496,8 +1565,8 @@ html[data-theme="dark"] .macro-threshold-chip.neutral.active { .hero-value { font-size: 44px; - font-weight: 500; - letter-spacing: -0.025em; + font-weight: 600; + letter-spacing: -0.03em; line-height: 1; font-family: var(--mono); font-feature-settings: 'tnum'; @@ -1523,9 +1592,10 @@ html[data-theme="dark"] .macro-threshold-chip.neutral.active { gap: 6px; } .asset-switch button.on { - background: var(--surface); + background: color-mix(in oklab, var(--amber) 6%, var(--surface)); color: var(--ink); - box-shadow: var(--shadow-1); + box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,0.6); + border: 1px solid color-mix(in oklab, var(--amber) 20%, transparent); } .asset-dot { width: 14px; @@ -1551,7 +1621,11 @@ html[data-theme="dark"] .macro-threshold-chip.neutral.active { color: var(--ink-3); font-family: var(--mono); } -.tf-bar button.on { background: var(--ink); color: var(--bg); } +.tf-bar button.on { + background: linear-gradient(135deg, oklch(24% 0.012 80) 0%, oklch(14% 0.006 85) 100%); + color: oklch(97% 0.005 85); + box-shadow: 0 1px 4px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.07); +} .chart-wrap { margin-top: 8px; @@ -1562,14 +1636,15 @@ html[data-theme="dark"] .macro-threshold-chip.neutral.active { .chart-footnote { display: flex; gap: 18px; - font-size: 12px; + font-size: 11.5px; color: var(--ink-3); border-top: 1px dashed var(--line); padding-top: 14px; margin-top: 4px; + letter-spacing: 0.01em; } .chart-footnote .item { display: flex; align-items: center; gap: 6px; } -.legend-dot { width: 8px; height: 8px; border-radius: 2px; } +.legend-dot { width: 8px; height: 8px; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,0.12); } /* KPI tiles */ .kpi-row { @@ -1588,18 +1663,22 @@ html[data-theme="dark"] .macro-threshold-chip.neutral.active { gap: 6px; position: relative; overflow: hidden; + box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,0.5); } .kpi .label { - font-size: 12px; + font-size: 11px; color: var(--ink-3); + font-weight: 600; + letter-spacing: 0.05em; + text-transform: uppercase; display: flex; align-items: center; gap: 6px; } .kpi .value { - font-size: 22px; - font-weight: 500; - letter-spacing: -0.01em; + font-size: 24px; + font-weight: 700; + letter-spacing: -0.02em; font-family: var(--mono); } .kpi .foot { @@ -1610,16 +1689,17 @@ html[data-theme="dark"] .macro-threshold-chip.neutral.active { gap: 6px; } .kpi.accent { - background: linear-gradient(135deg, oklch(97% 0.04 85), oklch(95% 0.07 80)); + background: linear-gradient(135deg, oklch(97% 0.05 82), oklch(95% 0.09 76)); border-color: var(--amber-ring); + box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,0.7); } .kpi.accent .label { color: var(--amber-ink); } /* Overview */ .overview-shell { display: grid; - grid-template-columns: minmax(0, 1fr) 320px; - gap: 18px; + grid-template-columns: minmax(0, 1fr) 300px; + gap: 14px; margin-bottom: 20px; align-items: start; } @@ -1627,7 +1707,7 @@ html[data-theme="dark"] .macro-threshold-chip.neutral.active { .overview-main { display: flex; flex-direction: column; - gap: 16px; + gap: 12px; min-width: 0; } @@ -1642,24 +1722,29 @@ html[data-theme="dark"] .macro-threshold-chip.neutral.active { .overview-stat-card { background: var(--surface); border: 1px solid var(--line); - border-radius: 14px; - padding: 18px; - box-shadow: var(--shadow-1); + border-radius: 16px; + padding: 20px; + box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,0.55); min-width: 0; } .overview-market-card { background: - linear-gradient(135deg, color-mix(in oklab, var(--amber) 8%, var(--surface)) 0%, var(--surface) 52%, color-mix(in oklab, var(--up) 6%, var(--surface)) 100%); + linear-gradient(135deg, + color-mix(in oklab, var(--amber) 12%, var(--surface)) 0%, + var(--surface) 48%, + color-mix(in oklab, var(--up) 8%, var(--surface)) 100%); + box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,0.65); } .overview-kicker { font-size: 10px; font-weight: 700; - letter-spacing: 0.1em; + letter-spacing: 0.12em; text-transform: uppercase; - color: var(--ink-4); + color: var(--amber-ink); margin-bottom: 10px; + opacity: 0.85; } .overview-card-head { @@ -1785,8 +1870,8 @@ html[data-theme="dark"] .macro-threshold-chip.neutral.active { .overview-score-pill { display: inline-flex; align-items: center; - height: 22px; - padding: 0 10px; + height: 24px; + padding: 0 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); @@ -1795,37 +1880,43 @@ html[data-theme="dark"] .macro-threshold-chip.neutral.active { letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); + box-shadow: inset 0 1px 0 rgba(255,255,255,0.5); } .overview-score-pill.bull { - color: var(--up); + /* Darkened from var(--up) (62% → 3.0:1) to clear AA 4.5:1 on the 12% tint. */ + color: oklch(40% 0.17 150); border-color: color-mix(in oklab, var(--up) 32%, var(--line)); background: color-mix(in oklab, var(--up) 12%, var(--surface)); } .overview-score-pill.bear { - color: var(--down); + color: oklch(42% 0.20 27); border-color: color-mix(in oklab, var(--down) 32%, var(--line)); background: color-mix(in oklab, var(--down) 12%, var(--surface)); } +/* Dark mode: tint background is dark, so revert to the bright tone tokens. */ +html[data-theme="dark"] .overview-score-pill.bull { color: var(--up); } +html[data-theme="dark"] .overview-score-pill.bear { color: var(--down); } + /* Gradient track. Removed the .overview-score-fill overlay — the gradient already encodes "where am I on the spectrum"; layering an opaque fill only obscured the gradient at scores near 0. */ .overview-score-track { position: relative; - height: 14px; + height: 16px; margin-top: 14px; border-radius: 999px; overflow: visible; border: 1px solid color-mix(in oklab, var(--line) 78%, transparent); - box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06); + box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.1), inset 0 -1px 0 rgba(255,255,255,0.3); background: linear-gradient(90deg, - color-mix(in oklab, var(--down) 65%, transparent) 0%, - color-mix(in oklab, var(--down) 18%, transparent) 35%, - var(--bg-sunk) 50%, - color-mix(in oklab, var(--up) 18%, transparent) 65%, - color-mix(in oklab, var(--up) 65%, transparent) 100%); + color-mix(in oklab, var(--down) 70%, transparent) 0%, + color-mix(in oklab, var(--down) 20%, transparent) 35%, + color-mix(in oklab, var(--bg-sunk) 90%, transparent) 50%, + color-mix(in oklab, var(--up) 20%, transparent) 65%, + color-mix(in oklab, var(--up) 70%, transparent) 100%); } /* Vertical centerline tick so 0 is visually obvious. */ @@ -1873,71 +1964,127 @@ html[data-theme="dark"] .macro-threshold-chip.neutral.active { } .overview-system-strip { - display: grid; - grid-template-columns: repeat(4, minmax(0, 1fr)); - gap: 10px; - margin-top: 16px; + display: none; /* replaced by .overview-stats-bar */ } .overview-system-chip { display: flex; - align-items: center; - justify-content: space-between; - gap: 12px; - min-height: 64px; - padding: 12px 14px; - border-radius: 12px; - border: 1px solid var(--line); - background: var(--surface); - box-shadow: var(--shadow-1); - transition: transform 120ms, border-color 120ms, box-shadow 120ms; + flex-direction: column; + align-items: flex-start; + gap: 2px; + flex: 1; + padding: 10px 16px; + border-right: 1px solid var(--line); + border-radius: 0; + border-top: none; + border-bottom: none; + border-left: none; + background: transparent; + box-shadow: none; + transition: background 100ms; +} + +.overview-system-chip:last-child { + border-right: none; } .overview-system-chip:hover { - transform: translateY(-1px); - border-color: var(--line-2); - box-shadow: var(--shadow-2); + transform: none; + box-shadow: none; + background: color-mix(in oklab, var(--amber) 5%, transparent); } .overview-system-chip.passive { cursor: default; } +.overview-system-chip.passive:hover { + background: transparent; +} .overview-system-chip-name { - font-size: 12px; - line-height: 1.4; - color: var(--ink-3); + font-size: 10px; + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--ink-4); } .overview-system-chip strong { font-family: var(--mono); - font-size: 24px; - line-height: 1; + font-size: 20px; + line-height: 1.1; + font-weight: 700; color: var(--ink); } -.overview-secondary-grid { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - flex-wrap: wrap; - gap: 14px; +/* ── Unified stats bar (replaces system strip + secondary grid) ─── */ +.overview-stats-bar { + display: flex; + align-items: stretch; + border: 1px solid var(--line); + border-radius: 14px; + overflow: hidden; + background: var(--surface); + box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,0.55); } -.overview-stat-card { - min-height: 144px; +.stats-bar-item { display: flex; flex-direction: column; - justify-content: space-between; + justify-content: center; + gap: 3px; + flex: 1; + padding: 12px 16px; + border-right: 1px solid var(--line); + background: transparent; + border-top: none; + border-bottom: none; + border-left: none; + transition: background 100ms; + text-decoration: none; + color: inherit; } -.overview-stat-card.accent { - background: linear-gradient(135deg, oklch(97% 0.04 85), oklch(95% 0.07 80)); - border-color: var(--amber-ring); +.stats-bar-item:not(.passive):hover { + background: color-mix(in oklab, var(--amber) 5%, transparent); } +.stats-bar-item.passive { + cursor: default; +} + +/* Thin vertical separator between signal counts and personal stats */ +.stats-bar-divider { + width: 1px; + background: var(--line); + flex-shrink: 0; + align-self: stretch; + margin: 10px 0; +} + +.stats-bar-label { + font-size: 10px; + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--ink-4); + white-space: nowrap; +} + +.stats-bar-value { + font-family: var(--mono); + font-size: 22px; + font-weight: 800; + line-height: 1.1; + letter-spacing: -0.025em; +} + +/* Keep old classes so nothing else breaks */ +.overview-secondary-grid { display: none; } +.overview-stat-card { display: none; } .overview-stat-value { font-family: var(--mono); - font-size: 42px; + font-size: 32px; line-height: 1; font-weight: 800; letter-spacing: -0.03em; @@ -1979,58 +2126,6 @@ html[data-theme="dark"] .macro-threshold-chip.neutral.active { /* Right rail */ .rail { display: flex; flex-direction: column; gap: 20px; } -.signal-card { - background: var(--surface); - border: 1px solid var(--line); - border-radius: var(--r-md); - padding: 18px; -} -.signal-head { - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 14px; -} -.signal-head h3 { - margin: 0; - font-size: 14px; - font-weight: 600; -} - -.latest-post { - border: 1px solid var(--line); - border-radius: var(--r-sm); - padding: 14px; - background: var(--bg-sunk); -} -.latest-post .meta { - display: flex; - align-items: center; - gap: 8px; - font-size: 12px; - color: var(--ink-3); - margin-bottom: 10px; -} -.latest-post .text { - font-size: 13px; - line-height: 1.55; - color: var(--ink); - margin: 0 0 12px; -} -.latest-post .divider { - height: 1px; - background: var(--line); - margin: 12px 0; -} -.latest-post .lp-row { - display: flex; - justify-content: space-between; - align-items: center; - font-size: 12px; -} -.latest-post .lp-row + .lp-row { margin-top: 6px; } -.latest-post .lp-row .k { color: var(--ink-3); } - .confidence-bar { height: 6px; background: var(--surface-3); @@ -2110,69 +2205,11 @@ html[data-theme="dark"] .ai-reasoning-card { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), var(--shadow-1); } -/* Bot status */ -.bot-status { - background: linear-gradient(160deg, oklch(22% 0.01 85) 0%, oklch(14% 0.01 85) 100%); - color: oklch(96% 0.005 85); - border-radius: var(--r-lg); - padding: 22px; - position: relative; - overflow: hidden; -} -.bot-status::after { - content: ''; - position: absolute; - right: -40px; - top: -40px; - width: 180px; - height: 180px; - background: radial-gradient(circle, oklch(75% 0.17 75 / 0.4) 0%, transparent 70%); - pointer-events: none; -} -.bot-head { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 18px; -} -.bot-head h3 { margin: 0; font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; } -.bot-stats { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 14px 20px; - position: relative; - z-index: 1; -} -.bot-stat .k { - font-size: 11px; - color: oklch(70% 0.01 85); - text-transform: uppercase; - letter-spacing: 0.08em; - margin-bottom: 4px; -} -.bot-stat .v { - font-size: 20px; - font-family: var(--mono); - font-weight: 500; - letter-spacing: -0.01em; -} -.bot-stat .v.up { color: oklch(75% 0.17 148); } -.bot-stat .v.amber { color: var(--amber); } - -.bot-cta { - margin-top: 18px; - display: flex; - gap: 8px; - position: relative; - z-index: 1; -} -.bot-cta .btn { flex: 1; } - /* Post list (stream) */ .post-stream { display: flex; flex-direction: column; - gap: 10px; + gap: 8px; } .post-row { display: flex; @@ -2180,12 +2217,37 @@ html[data-theme="dark"] .ai-reasoning-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); - transition: border-color 120ms, background 120ms; + transition: border-color 150ms, background 150ms, box-shadow 150ms; cursor: pointer; overflow: hidden; + box-shadow: var(--shadow-1); +} +.post-row:hover { + border-color: color-mix(in oklab, var(--amber) 25%, var(--line)); + box-shadow: var(--shadow-2); + transform: translateY(-1px); +} +.post-row.selected { + border-color: color-mix(in oklab, var(--amber) 55%, var(--line)); + background: color-mix(in oklab, var(--amber) 4%, var(--surface)); + box-shadow: var(--shadow-2), 0 0 0 1px color-mix(in oklab, var(--amber) 20%, transparent); +} +/* Buy signal: green left accent */ +.post-row.signal-buy { + border-left: 4px solid var(--up); + background: linear-gradient(90deg, color-mix(in oklab, var(--up) 5%, var(--surface)) 0%, var(--surface) 160px); +} +/* Short signal: red left accent */ +.post-row.signal-short { + border-left: 4px solid var(--down); + background: linear-gradient(90deg, color-mix(in oklab, var(--down) 5%, var(--surface)) 0%, var(--surface) 160px); +} +html[data-theme="dark"] .post-row.signal-buy { + background: linear-gradient(90deg, color-mix(in oklab, var(--up) 10%, var(--surface)) 0%, var(--surface) 160px); +} +html[data-theme="dark"] .post-row.signal-short { + background: linear-gradient(90deg, color-mix(in oklab, var(--down) 10%, var(--surface)) 0%, var(--surface) 160px); } -.post-row:hover { border-color: var(--line-2); } -.post-row.selected { border-color: var(--amber-ring); background: oklch(99% 0.02 85); } /* Off-topic / noise posts: compact, recessed, low-emphasis. They're the bulk of the Trump feed but carry no signal — make them read as skippable filler @@ -2193,6 +2255,10 @@ html[data-theme="dark"] .ai-reasoning-card { .post-row.noise { background: var(--bg-sunk); border-color: transparent; + opacity: 0.82; +} +.post-row.noise:hover { + opacity: 1; } .post-row.noise:hover { border-color: var(--line); } .post-row.noise .post-row-main { @@ -2235,7 +2301,7 @@ html[data-theme="dark"] .ai-reasoning-card { flex-shrink: 0; } .src-ico.x { background: #111; color: #fff; } -.src-ico.truth { background: oklch(94% 0.05 25); color: oklch(45% 0.2 25); } +.src-ico.truth { background: oklch(92% 0.08 28); color: oklch(40% 0.22 25); font-weight: 700; } /* Non-Trump sources — distinct hues so the feed reads at a glance. */ .src-ico.breakout { background: oklch(94% 0.08 200); color: oklch(40% 0.15 220); } .src-ico.reversal { background: oklch(94% 0.08 300); color: oklch(40% 0.15 300); } @@ -2269,15 +2335,30 @@ html[data-theme="dark"] .ai-reasoning-card { display: inline-flex; align-items: center; gap: 6px; - padding: 5px 10px; + padding: 4px 10px; border-radius: var(--r-pill); - font-size: 12px; - font-weight: 600; - letter-spacing: 0.02em; + font-size: 11px; + font-weight: 800; + letter-spacing: 0.06em; +} +.sig.buy { + background: linear-gradient(135deg, var(--up) 0%, oklch(66% 0.19 155) 100%); + color: #fff; + box-shadow: 0 2px 8px color-mix(in oklab, var(--up) 45%, transparent), + inset 0 1px 0 rgba(255,255,255,0.2); +} +.sig.sell, .sig.short { + background: linear-gradient(135deg, var(--down) 0%, oklch(55% 0.24 18) 100%); + color: #fff; + box-shadow: 0 2px 8px color-mix(in oklab, var(--down) 45%, transparent), + inset 0 1px 0 rgba(255,255,255,0.15); +} +.sig.hold { + background: var(--bg-sunk); + color: var(--ink-3); + border: 1px solid var(--line); + font-weight: 600; } -.sig.buy { background: var(--up-soft); color: oklch(38% 0.16 148); } -.sig.sell, .sig.short { background: var(--down-soft); color: oklch(42% 0.2 25); } -.sig.hold { background: var(--bg-sunk); color: var(--ink-2); } .impact-mini { display: flex; @@ -2297,11 +2378,13 @@ html[data-theme="dark"] .ai-reasoning-card { } .table th { text-align: left; - font-weight: 500; + font-weight: 700; color: var(--ink-3); - padding: 14px 18px; + padding: 12px 18px; border-bottom: 1px solid var(--line); - font-size: 12px; + font-size: 11px; + letter-spacing: 0.06em; + text-transform: uppercase; background: var(--bg-sunk); } .table th:first-child { border-top-left-radius: var(--r-md); } @@ -2406,8 +2489,9 @@ html[data-theme="dark"] .ai-reasoning-card { transition: transform 180ms; } .settings-switch.on { - background: var(--ink); - border-color: var(--ink); + background: linear-gradient(135deg, var(--amber) 0%, oklch(73% 0.18 70) 100%); + border-color: var(--amber); + box-shadow: 0 0 0 2px color-mix(in oklab, var(--amber) 20%, transparent); } .settings-switch.on::after { transform: translateX(16px); } @@ -2438,6 +2522,23 @@ html[data-theme="dark"] .ai-reasoning-card { order: -1; } + /* Stats bar: 2 columns on tablet/narrow desktop */ + .overview-stats-bar { + flex-wrap: wrap; + } + .stats-bar-item { + flex: 0 0 calc(50% - 1px); + border-right: 1px solid var(--line); + border-bottom: 1px solid var(--line); + } + .stats-bar-item:nth-child(2n) { + border-right: none; + } + .stats-bar-item:nth-last-child(-n+2) { + border-bottom: none; + } + .stats-bar-divider { display: none; } + .dash-grid { grid-template-columns: 1fr; } @@ -2490,7 +2591,6 @@ html[data-theme="dark"] .ai-reasoning-card { grid-template-columns: repeat(2, minmax(0, 1fr)); } - .overview-system-strip, .overview-secondary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } @@ -2547,6 +2647,11 @@ html[data-theme="dark"] .ai-reasoning-card { padding: 10px 14px; } + .nav-tabs { + margin: 0 -14px; + padding: 0 14px; + } + .brand span:last-child { display: none; } @@ -2585,11 +2690,17 @@ html[data-theme="dark"] .ai-reasoning-card { text-align: left; } - .overview-system-strip, .overview-secondary-grid { grid-template-columns: 1fr; } + .overview-system-strip { + flex-wrap: wrap; + } + + /* Guest onboarding strip: 3-col → 1-col on mobile */ + .guest-strip { grid-template-columns: 1fr !important; } + .macro-panel-head, .macro-composite-head { flex-direction: column; @@ -2801,13 +2912,13 @@ body { max-width: 100%; } .grow { flex: 1; } .mono-num { font-family: var(--mono); font-variant-numeric: tabular-nums; } .muted { color: var(--ink-3); } -.tiny { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); font-weight: 500; } +.tiny { font-size: 11px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-3); font-weight: 600; } /* Scrollbar */ -::-webkit-scrollbar { width: 10px; height: 10px; } +::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; border: 2px solid var(--bg); } -::-webkit-scrollbar-thumb:hover { background: oklch(80% 0.01 85); } +::-webkit-scrollbar-thumb:hover { background: color-mix(in oklab, var(--amber) 25%, var(--line-2)); } /* ── Skeleton / shimmer loading ───────────────────────────────────────────── Use .skeleton on any block element to get a shimmer placeholder. @@ -2829,10 +2940,11 @@ body { max-width: 100%; } animation: shimmer 1.4s ease-in-out infinite; } .skeleton-card { - border-radius: var(--r); + border-radius: var(--r-md); border: 1px solid var(--line); padding: 20px; - background: var(--bg-card); + background: var(--surface); + box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,0.5); display: flex; flex-direction: column; gap: 10px; @@ -2845,3 +2957,223 @@ body { max-width: 100%; } .sk-w-3q { width: 75%; } .sk-w-half { width: 50%; } .sk-w-q { width: 25%; } + +/* ============================================================ + Live "terminal" motion layer (A-tier + ticker) + All effects degrade to static under prefers-reduced-motion + (see the media query at the very end of this block). + ============================================================ */ + +/* ── Tick flash: a value that changed pulses green/red briefly ─────────────── */ +@keyframes tick-flash-up { + 0% { color: var(--up); text-shadow: 0 0 10px color-mix(in oklab, var(--up) 55%, transparent); } + 100% { color: inherit; text-shadow: none; } +} +@keyframes tick-flash-down { + 0% { color: var(--down); text-shadow: 0 0 10px color-mix(in oklab, var(--down) 55%, transparent); } + 100% { color: inherit; text-shadow: none; } +} +.tick-num { transition: color 120ms; } +.tick-flash-up { animation: tick-flash-up 0.6s ease-out 1; } +.tick-flash-down { animation: tick-flash-down 0.6s ease-out 1; } + +/* ── New signal row: slide in from the top + an amber sweep across it ──────── */ +@keyframes signal-slide-in { + 0% { opacity: 0; transform: translateY(-10px); } + 100% { opacity: 1; transform: translateY(0); } +} +@keyframes signal-sweep { + 0% { background-position: -150% 0; } + 100% { background-position: 250% 0; } +} +.signal-enter { animation: signal-slide-in 0.32s cubic-bezier(.2,.8,.2,1) 1; } +.signal-enter > * { position: relative; } +.signal-enter > *::after { + content: ''; + position: absolute; + inset: 0; + border-radius: var(--r-md); + pointer-events: none; + background: linear-gradient( + 100deg, + transparent 0%, + color-mix(in oklab, var(--amber) 26%, transparent) 50%, + transparent 100% + ); + background-size: 60% 100%; + background-repeat: no-repeat; + animation: signal-sweep 1.1s ease-out 1; +} + +/* ── Card / chip hover glow — subtle amber ring lift on interactive cards ──── */ +.overview-system-chip, +.overview-stat-card { + transition: border-color 160ms, box-shadow 220ms, transform 160ms; +} +.overview-system-chip:hover, +.overview-stat-card:hover { + box-shadow: 0 0 0 1px var(--amber-ring), + 0 0 18px color-mix(in oklab, var(--amber) 22%, transparent); + transform: translateY(-1px); +} + +/* ── Macro needle afterglow — a soft trailing pulse when it slides ─────────── */ +.overview-score-needle { + box-shadow: 0 0 0 0 color-mix(in oklab, currentColor 45%, transparent); + transition: left 0.4s cubic-bezier(.2,.8,.2,1), box-shadow 0.6s ease-out; +} +.overview-score-needle.bull, +.overview-score-needle.bear { box-shadow: 0 0 14px 2px color-mix(in oklab, currentColor 40%, transparent); } + +/* ============================================================ + Ticker tape (B-#6) + ============================================================ */ +@keyframes ticker-marquee { + 0% { transform: translateX(0); } + 100% { transform: translateX(-50%); } +} +.ticker { + position: sticky; + top: 0; + z-index: 90; + overflow: hidden; + border-bottom: 1px solid var(--line); + background: color-mix(in oklab, var(--amber) 2%, var(--bg-sunk)); + /* fade the two edges so cells appear/vanish instead of hard-cutting */ + -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); + mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); +} +.ticker-track { + display: inline-flex; + align-items: center; + white-space: nowrap; + will-change: transform; + animation: ticker-marquee 40s linear infinite; +} +.ticker:hover .ticker-track { animation-play-state: paused; } +.ticker-cell { + display: inline-flex; + align-items: baseline; + gap: 7px; + padding: 7px 22px; + font-size: 12px; + font-family: var(--mono); + font-variant-numeric: tabular-nums; + border-right: 1px solid var(--line); +} +.ticker-sym { color: var(--amber-ink); font-weight: 700; letter-spacing: 0.05em; opacity: 0.8; } +.ticker-px { color: var(--ink); font-weight: 500; transition: color 120ms; } +.ticker-arrow { font-size: 9px; width: 9px; display: inline-block; } +.ticker-arrow.up { color: var(--up); } +.ticker-arrow.down { color: var(--down); } +/* reuse the tick-flash keyframes on a whole ticker cell */ +.ticker-cell.tick-flash-up .ticker-px { animation: tick-flash-up 0.6s ease-out 1; } +.ticker-cell.tick-flash-down .ticker-px { animation: tick-flash-down 0.6s ease-out 1; } +html[data-theme="dark"] .ticker { + background: color-mix(in oklab, var(--amber) 4%, var(--bg-sunk)); +} + +/* ============================================================ + Mobile wallet sheet + ============================================================ */ +@keyframes sheet-slide-up { + from { transform: translateY(100%); } + to { transform: translateY(0); } +} +.mobile-sheet-enter { + animation: sheet-slide-up 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both; +} + +/* ── Accessibility: honour reduced-motion. Kill all the looping/entrance + motion above; keep static, readable end-states. ───────────────────────── */ +@media (prefers-reduced-motion: reduce) { + /* Catch-all: neutralise every animation/transition (incl. infinite ones — + macro-dot-pulse, live-dot pulse, shimmer, needle pulse — and any added + later). 0.01ms instead of 0 so JS onAnimationEnd handlers still fire. */ + *, *::before, *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } + /* Layout side-effects the duration reset alone can't undo: */ + .ticker-track { transform: none; white-space: normal; flex-wrap: wrap; } + .signal-enter > *::after { display: none; } + .overview-system-chip:hover, + .overview-stat-card:hover { transform: none; } +} + +/* ============================================================ + Ticker tape — mobile overrides + ============================================================ */ +@media (max-width: 900px) { + .ticker { + /* On tablet/mobile the mask edges would eat too much of the narrow strip. + Tighten to 4% so content is visible closer to the edges. */ + -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); + mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); + } + .ticker-cell { + padding: 6px 14px; + gap: 5px; + } + .ticker-sym { font-size: 11px; } + .ticker-px { font-size: 11px; } +} + +@media (max-width: 640px) { + /* Slow the tape a touch on mobile so it's readable while scrolling */ + .ticker-track { animation-duration: 55s; } + + .ticker-cell { + padding: 5px 12px; + font-size: 11px; + } + + /* On very small screens, hide the direction arrow to save space */ + .ticker-arrow { display: none; } + + /* Overview hero price — keep it from bumping into the chip on mobile */ + .overview-headline-row { + flex-wrap: wrap; + gap: 6px; + } + + /* Prevent the overview market card controls from stacking awkwardly */ + .overview-controls { + width: 100%; + align-items: flex-start; + } + + /* Chart: reduce height on phones so it doesn't eat the full viewport */ + .chart-wrap, + .chart-wrap > div { + height: 240px !important; + } + + /* overview-side cards are low priority on mobile — compress them */ + .overview-side-card.compact { + display: none; + } + + /* system strip: wrap to 2-per-row on small phones */ + .overview-system-strip { + flex-wrap: wrap; + } + .overview-system-chip { + flex: 0 0 calc(50% - 1px); + } + + /* Post row: remove the aside column on very small screens */ + .post-row-main { + grid-template-columns: 28px 1fr; + gap: 10px; + padding: 12px 14px; + } +} + +@media (max-width: 420px) { + /* Ultra-narrow: hide ticker entirely — the price display in the overview + card covers the same information without crowding the header */ + .ticker { display: none; } +} diff --git a/app/[locale]/glossary/page.tsx b/app/[locale]/glossary/page.tsx index 1bcd1c0..c2c9f38 100644 --- a/app/[locale]/glossary/page.tsx +++ b/app/[locale]/glossary/page.tsx @@ -171,104 +171,105 @@ function getCopy(locale: string): GlossaryCopy { ], ogTitle: 'Crypto Signals Glossary | Trump Alpha', ogDescription: - 'Clear definitions of Trump Alpha’s core terms, optimized for search, AI retrieval, and fast reference.', + 'Clear definitions of Trump Alpha\'s core terms, optimized for search, AI retrieval, and fast reference.', heroTitle: 'Glossary', heroSubtitle: 'Every term on the platform, defined precisely.', intro: - 'Definitions for all the metrics, signal terms, and trading concepts you\'ll encounter on this platform.', + 'Quick definitions for the terms you\'ll encounter on this platform.', terms: [ { term: 'AHR999', - category: 'Macro-bottom metric', + category: 'Macro-bottom signal', definition: - 'AHR999 is a Bitcoin valuation indicator popular in Chinese crypto research. It combines long-term trend and cost-basis style anchors to estimate whether BTC is trading in a deep-value regime. In Trump Alpha, AHR999 below 0.45 counts as one classic bottom signal.', - extra: 'It is one of the three inputs in the live BTC 2-of-3 macro-bottom scanner.', + 'A Bitcoin valuation score. Below 0.45 = BTC is historically cheap and in a potential bottom zone. Above 1.2 = overvalued, bottom thesis is off. One of three conditions in the BTC bottom scanner.', }, { term: 'Pi Cycle Bottom', - category: 'Macro-bottom metric', + category: 'Macro-bottom signal', definition: - 'Pi Cycle Bottom is a Bitcoin bottom framework based on long-cycle moving-average relationships. In Trump Alpha, the condition is satisfied when the 150-day EMA falls below the 471-day SMA multiplied by 0.745.', - extra: 'It is one of the three core inputs in the BTC macro-bottom scanner.', + 'A long-term moving-average signal that has historically aligned with Bitcoin cycle lows. Fires when the 150-day EMA crosses below the 471-day SMA × 0.745. Binary — either confirmed or not.', }, { term: '200-week Moving Average', - category: 'Macro-bottom metric', + category: 'Macro-bottom signal', definition: - 'The 200-week moving average is one of Bitcoin’s most widely watched long-term trend anchors. Many historical bear-market lows formed near this zone. Trump Alpha treats price proximity to the 200-week MA as part of BTC bottom confluence.', + 'BTC\'s most-watched long-term support level. Every major bear-market low in history formed at or near it. The scanner counts price ≤ 200WMA × 1.05 as a bottom vote.', }, { term: 'KOL', abbr: 'Key Opinion Leader', category: 'Platform term', definition: - 'In crypto, a KOL is an analyst, fund manager, host, or creator whose public views consistently influence market narrative or retail positioning. Trump Alpha emphasizes long-form KOL sources, not only short social fragments.', + 'An analyst, fund manager, podcast host, or creator whose calls move crypto narrative. The platform tracks 25 KOLs — Arthur Hayes, Delphi, Bankless, and others — cross-checking what they say publicly against what their wallets actually do.', }, { term: 'Talks-vs-Trades Divergence', category: 'Platform term', definition: - 'Talks-vs-trades divergence happens when a KOL’s public stance and wallet behavior point in opposite directions on the same asset. Example: a KOL publishes a bullish ETH thesis while their wallet reduces ETH exposure that same week. Trump Alpha treats the wallet move as the higher-priority truth signal.', - extra: 'This is one of the platform’s highest-information signals because it separates narrative from actual positioning.', + 'When a KOL\'s public call and their wallet move in opposite directions on the same asset. Example: publicly bullish ETH while quietly reducing ETH on-chain. The wallet is treated as the real signal — it\'s harder to fake than words.', + extra: 'Highest-conviction signal category on the platform.', }, { - term: 'Conviction Score', + term: 'Aligned', category: 'Platform term', definition: - 'Conviction Score is the AI-generated strength score assigned to each extracted KOL view, typically ranging from 0.0 to 1.0. Higher values imply clearer language, stronger commitment, and better evidence of timing or sizing intent.', + 'A KOL\'s public call and their tracked wallet activity agree — e.g., bullish on BTC and the wallet is adding BTC. Reinforces the signal.', + }, + { + term: 'Mismatch', + category: 'Platform term', + definition: + 'A KOL\'s public call contradicts their wallet move. Bullish in public, selling on-chain = mismatch. This is the divergence signal you actually want to act on.', + }, + { + term: 'Paper mode', + category: 'Platform term', + definition: + 'Simulated trading — the bot runs through all its logic and tracks positions, but no real orders are sent to Hyperliquid. Use it to see how the bot would have performed before risking real money.', + }, + { + term: '/adopt', + category: 'Platform term', + definition: + 'A Telegram bot command. When a Macro Vibes signal fires, you open the position yourself on Hyperliquid, then send /adopt in the bot. The bot then takes over managing the exit — stop ladder, partial de-risk, pyramiding — without you having to watch it.', + }, + { + term: 'AI Confidence', + category: 'Platform term', + definition: + 'A percentage score (0–100%) the AI assigns to each Trump post signal. Higher = the post language is clearer and more explicitly directional. The default threshold is 70% — signals below this are not traded.', }, { term: 'Funding Rate', category: 'Derivatives term', definition: - 'Funding rate is the periodic payment mechanism used by perpetual futures to keep contract pricing anchored to spot. If longs pay shorts, the market is long-crowded. If shorts pay longs, the market is short-crowded. Extreme readings often precede liquidation-driven reversals.', + 'The periodic payment between long and short traders on a perp exchange, designed to keep the contract price close to spot. Extreme positive funding = crowded longs. Extreme negative = crowded shorts. Extreme readings often precede sharp reversals when the crowded side gets squeezed.', }, { term: 'Isolated Margin', category: 'Trading term', definition: - 'Isolated margin means each trade uses its own dedicated margin rather than sharing risk with the rest of the account. If one position is liquidated, it does not automatically cascade into other positions.', - extra: 'Trump Alpha’s execution layer is designed around isolated margin.', + 'Each trade uses only its own dedicated margin — if it gets liquidated, it doesn\'t touch your other positions. Trump Alpha always uses isolated margin so one bad trade can\'t wipe the account.', }, { term: 'TP / SL', abbr: 'Take-Profit / Stop-Loss', category: 'Trading term', definition: - 'TP and SL are conditional exit orders for profit-taking and loss control. Trump Alpha’s auto-trader attaches both at entry rather than after the position is already open.', - }, - { - term: 'UTXO', - abbr: 'Unspent Transaction Output', - category: 'Bitcoin term', - definition: - 'UTXO is the fundamental accounting unit of the Bitcoin network. Trump Alpha’s live Macro Vibes module no longer relies directly on UTXO-spend behavior, but the concept still matters for interpreting classic on-chain research.', + 'Automatic exit orders placed at entry. TP closes the trade in profit at your target. SL closes it to cut losses. Trump Alpha attaches both the moment a trade opens.', }, { term: 'Perpetual Future', abbr: 'Perp', category: 'Derivatives term', definition: - 'A perp is a futures contract with no expiry date. It stays open until the trader closes it or gets liquidated, while funding rate and mark-price mechanisms help keep it close to spot. Hyperliquid is one example of a perp venue.', - }, - { - term: 'Substack Signal', - category: 'Platform term', - definition: - 'A Substack signal is an extracted asset view taken from a KOL’s long-form essay, newsletter, or blog post. These sources usually contain fuller reasoning than short posts and therefore produce more retrieval-friendly signal data.', + 'A futures contract with no expiry. You stay in the trade until you close it or get liquidated. Trump Alpha executes on Hyperliquid perps.', }, { term: 'Capitulation', category: 'Market term', definition: - 'Capitulation is the stage of a drawdown when holders finally give up and sell into weakness. It often appears near the end of a bear market and is one of the environments the BTC bottom scanner is designed to detect.', - }, - { - term: 'EMA', - abbr: 'Exponential Moving Average', - category: 'Technical term', - definition: - 'EMA is a moving average that gives more weight to recent price data than older data. Trump Alpha uses the 150-day EMA inside the Pi Cycle Bottom condition.', + 'The phase near a bear market bottom where panicked holders give up and sell en masse. Creates the washout conditions that the BTC macro-bottom scanner is designed to detect.', }, ], footerLead: 'Missing a term?', diff --git a/app/[locale]/kol/KolPageClient.tsx b/app/[locale]/kol/KolPageClient.tsx index 4525ff3..c21da3f 100644 --- a/app/[locale]/kol/KolPageClient.tsx +++ b/app/[locale]/kol/KolPageClient.tsx @@ -1,6 +1,6 @@ 'use client' -import { useEffect, useMemo, useState } from 'react' +import { useEffect, useMemo, useRef, useState } from 'react' import { createPortal } from 'react-dom' import { useLocale } from 'next-intl' import type { @@ -42,8 +42,8 @@ function actionLabel(action: KolTicker['action'], isZh: boolean) { } function windowLabel(days: number, isZh: boolean) { - if (days === 1) return isZh ? '今日' : 'Today' - return isZh ? `近 ${days} 日` : `Last ${days}d` + if (days === 1) return 'Today' + return `Last ${days}d` } function changeLabel(changeType: KolHoldingChange['change_type'], isZh: boolean) { @@ -100,6 +100,7 @@ function chainActionLabel(action: string, isZh: boolean) { function sourceLabel(source: string, isZh: boolean) { if (source === 'substack') return 'Substack' + if (source === 'blog') return 'Blog' if (source === 'podcast') return 'Podcast' if (source === 'twitter') return 'X' return source @@ -138,19 +139,20 @@ function DigestWidget({ activeTicker, isZh, initialDigest = null, + days, }: { onTickerClick: (ticker: string) => void activeTicker?: string | null isZh: boolean initialDigest?: KolDigest | null + days: number }) { - const [days, setDays] = useState(7) const [data, setData] = useState(initialDigest) const [loading, setLoading] = useState(initialDigest === null) const [err, setErr] = useState('') useEffect(() => { - if (initialDigest === null || days !== (initialDigest?.window_days ?? 7)) { + if (initialDigest === null || days !== (initialDigest?.window_days ?? 30)) { setLoading(true) } swrFetch( @@ -160,64 +162,34 @@ function DigestWidget({ fresh => setData(fresh), ) .then(d => { setData(d); setErr('') }) - .catch(e => setErr(e instanceof Error ? e.message : (isZh ? '加载失败' : 'Failed to load digest'))) + .catch(e => setErr(e instanceof Error ? e.message : ('Failed to load digest'))) .finally(() => setLoading(false)) }, [days, initialDigest, isZh]) return ( -
-
-
-
- What KOLs are pushing now -
-
- {data - ? `${data.post_count} posts analysed · ${data.ticker_count} assets with repeat mentions` - : 'Loading…'} -
+
+ {/* Compact meta line — no header label needed, context is obvious */} + {data && !loading && ( +
+ {data.post_count} posts · {data.ticker_count} assets
-
- {WINDOW_OPTIONS.map(daysOption => ( - - ))} -
-
- + )} {loading && ( -
Loading…
+
Loading…
)} {err && (
{err}
)} {!loading && !err && data && data.tickers.length === 0 && ( -
- No actionable calls in this window. Try a longer range. +
+ No repeat mentions in this window.
)} {!loading && !err && data && data.tickers.length > 0 && (
{data.tickers.map(t =>
- + {t.ticker} {active && ( @@ -294,11 +266,10 @@ function DigestTickerChip({ {actionLabel}
-
- {digestSideCopy(t.side)} -
+ {/* Compact: KOL count + handles in two lines, no "Bullish flow" copy + (Long/Short label already conveys direction). */}
- {t.kol_count} KOL{t.kol_count !== 1 ? 's' : ''} · {(t.max_conviction * 100).toFixed(0)}% max conviction + {t.kol_count} KOL{t.kol_count !== 1 ? 's' : ''} · {(t.max_conviction * 100).toFixed(0)}%
{ + const gen = ++walletCheckGenRef.current setLoading(true) Promise.all([ swrFetch( `kol-digest-${days}`, 15 * 60_000, () => getKolDigest(days), - fresh => setDigest(fresh), + fresh => { if (gen === walletCheckGenRef.current) setDigest(fresh) }, ), swrFetch( `kol-changes-${days}`, 30 * 60_000, () => getKolChanges({ days }), - fresh => setChanges(fresh.changes), + fresh => { if (gen === walletCheckGenRef.current) setChanges(fresh.changes) }, ), swrFetch( `kol-divergence-all-${days}`, 30 * 60_000, () => getKolDivergence({ days }), - fresh => setItems(fresh.items), + fresh => { if (gen === walletCheckGenRef.current) setItems(fresh.items) }, ), ]) .then(([nextDigest, nextChanges, nextItems]) => { + if (gen !== walletCheckGenRef.current) return setDigest(nextDigest) setChanges(nextChanges.changes) setItems(nextItems.items) }) .catch(() => { + if (gen !== walletCheckGenRef.current) return setDigest(null) setChanges([]) setItems([]) }) - .finally(() => setLoading(false)) + .finally(() => { if (gen === walletCheckGenRef.current) setLoading(false) }) }, [days]) const rows = useMemo(() => { @@ -458,43 +438,21 @@ function WalletCheckWidget({ borderRadius: 12, background: 'var(--surface)', border: '1px solid var(--line)', }}> -
-
-
- Talks vs wallets -
-
- {loading - ? 'Loading…' - : rows.length === 0 - ? 'No overlapping talk and wallet evidence in this window.' - : `${totalAligned} aligned · ${totalMismatch} mismatched across the assets KOLs are pushing`} -
+ {/* Compact summary — no uppercase header, no redundant label */} + {!loading && rows.length > 0 && ( +
+ {totalAligned > 0 && ✓ {totalAligned} aligned} + {totalMismatch > 0 && ⚠ {totalMismatch} mismatch} + {totalAligned === 0 && totalMismatch === 0 && 'Wallet evidence pending'}
-
- {([1, 7, 30] as const).map(d => ( - - ))} -
-
+ )} {!loading && rows.length === 0 && (
- When KOLs call an asset, do tracked wallets back it up? No overlap yet in this window — widen the range or check back after the next feed run. + No wallet overlap for this window — try a wider range.
)} @@ -521,7 +479,7 @@ function WalletCheckWidget({ {row.verdict.label}
-
+
{row.talkLine}
@@ -533,10 +491,8 @@ function WalletCheckWidget({
-
- Wallet evidence -
-
+ {/* No "WALLET EVIDENCE" label — context is clear from layout */} +
{row.latestMatch ? `@${row.latestMatch.handle} ${chainActionLabel(row.latestMatch.onchain_action, isZh).toLowerCase()}` : row.latestChange @@ -544,9 +500,13 @@ function WalletCheckWidget({ : 'No tracked move yet'}
- {row.latestMatch - ? `${row.verdict.note} ${row.latestMatch.usd_after ? `Size ${formatShortUsd(row.latestMatch.usd_after)}.` : ''}` - : row.verdict.note} + {/* Drop boilerplate "Wallet action supports/disagrees the public pitch." — + the verdict badge already says Aligned / Mismatch. Just show the size. */} + {row.latestMatch?.usd_after + ? `Size ${formatShortUsd(row.latestMatch.usd_after)}` + : row.verdict.label === 'No wallet proof' + ? 'No tracked wallet move in this window' + : ''}
{(row.divergenceCount > 0 || row.alignmentCount > 0) && (
@@ -660,7 +620,7 @@ function PostDetail({ margin: 0, fontSize: 'clamp(16px, 4.5vw, 22px)', lineHeight: 1.3, wordBreak: 'break-word', }}> - {post.title || (isZh ? '(无标题)' : '(Untitled)')} + {post.title || post.summary || (post.source === 'twitter' ? '(Tweet)' : '(Untitled)')}
@@ -679,7 +639,7 @@ function PostDetail({ whiteSpace: 'nowrap', }} > - {isZh ? `查看原帖 ${postSourceLabel}` : `Open original ${postSourceLabel}`} ↗ + {`Open original ${postSourceLabel}`} ↗ )}
@@ -714,7 +674,7 @@ function PostDetail({
- {isZh ? '提取标的' : 'Extracted assets'} + {'Extracted assets'}
{post.tickers.map((t, i) => ( @@ -729,7 +689,7 @@ function PostDetail({ {actionLabel(t.action, isZh)} - {isZh ? '信心分' : 'Conviction'} {(t.conviction * 100).toFixed(0)}% + {'Conviction'} {(t.conviction * 100).toFixed(0)}%
- {isZh ? '原文摘录' : 'Source excerpt'} + {'Source excerpt'}
(initialPosts ?? []) - const [loading, setLoading] = useState(initialPosts === null) - const [err, setErr] = useState('') - const [openPost, setOpenPost] = useState(null) - const [handleFilter, setHandleFilter] = useState('all') - const [tickerFilter, setTickerFilter] = useState(null) - const [kolPage, setKolPage] = useState(1) + const dateLocale = 'en-US' + const isZh = false // i18n shelved — passed to helper fns that still take the param + const [posts, setPosts] = useState(initialPosts ?? []) + const [serverTotal, setServerTotal] = useState(initialTotal) + const [loading, setLoading] = useState(initialPosts === null) + const [err, setErr] = useState('') + const [openPost, setOpenPost] = useState(null) + const [sourceFilter, setSourceFilter] = useState('all') + const [signalsOnly, setSignalsOnly] = useState(false) + const [tickerFilter, setTickerFilter] = useState(null) + const [serverPage, setServerPage] = useState(1) + // Unified time window — controls both DigestWidget and WalletCheckWidget. + // Default 30d, not 7d: KOL ingestion is daily and sparse, so a 7d window is + // frequently empty (e.g. 7d=0 while 30d=196) and the first paint showed + // "No data yet" for modules that actually have data. + const [kolDays, setKolDays] = useState(30) + + const postsGenRef = useRef(0) useEffect(() => { + const gen = ++postsGenRef.current + setLoading(true) + const src = sourceFilter === 'all' ? undefined : sourceFilter + const cacheKey = `kol-posts-${sourceFilter}-${signalsOnly}-${serverPage}-${tickerFilter ?? ''}-${kolDays}` swrFetch( - 'kol-posts-100', + cacheKey, 15 * 60_000, // 15 min TTL — KOL feed is ingested daily - () => getKolPosts({ limit: 100 }), - fresh => setPosts(fresh.items), + () => getKolPosts({ + limit: KOL_SERVER_PAGE_SIZE, page: serverPage, source: src, signalsOnly, + ticker: tickerFilter ?? undefined, days: kolDays, + }), + fresh => { if (gen === postsGenRef.current) { setPosts(fresh.items); setServerTotal(fresh.total ?? 0) } }, ) - .then(r => { setPosts(r.items); setErr('') }) - .catch(e => setErr(e instanceof Error ? e.message : (isZh ? '加载失败' : 'Failed to load posts'))) - .finally(() => setLoading(false)) - }, [isZh]) + .then(r => { + if (gen !== postsGenRef.current) return + setPosts(r.items); setServerTotal(r.total ?? 0); setErr('') + }) + .catch(e => { if (gen === postsGenRef.current) setErr(e instanceof Error ? e.message : ('Failed to load posts')) }) + .finally(() => { if (gen === postsGenRef.current) setLoading(false) }) + }, [sourceFilter, signalsOnly, serverPage, tickerFilter, kolDays]) - const handles = useMemo(() => { - const set = new Set(posts.map(p => p.kol_handle)) - return ['all', ...Array.from(set)] - }, [posts]) + // posts are already filtered server-side; no client-side re-filter needed + const filtered = posts - const filtered = useMemo(() => { - let out = handleFilter === 'all' ? posts : posts.filter(p => p.kol_handle === handleFilter) - if (tickerFilter) { - out = out.filter(p => p.tickers.some(t => t.ticker === tickerFilter)) - } - return out - }, [posts, handleFilter, tickerFilter]) - - const kolTotalPages = Math.max(1, Math.ceil(filtered.length / KOL_PAGE_SIZE)) - const kolSafePage = Math.min(kolPage, kolTotalPages) - const kolPageItems = filtered.slice((kolSafePage - 1) * KOL_PAGE_SIZE, kolSafePage * KOL_PAGE_SIZE) + const totalServerPages = Math.max(1, Math.ceil(serverTotal / KOL_SERVER_PAGE_SIZE)) async function openDetail(id: number) { try { const detail = await getKolPost(id) setOpenPost(detail) } catch (e) { - setErr(e instanceof Error ? e.message : (isZh ? '详情加载失败' : 'Failed to load detail')) + setErr(e instanceof Error ? e.message : ('Failed to load detail')) } } + function changeSource(src: SourceFilter) { + setSourceFilter(src) + setServerPage(1) + setTickerFilter(null) + } + return (
-

{isZh ? 'KOL 信号' : 'KOL Signals'}

- - Which assets KOLs are pushing right now — and whether tracked wallets back it up or call their bluff. +

{'KOL Signals'}

+ + Arthur Hayes, Delphi, Bankless, and 22 more — their public calls vs what their wallets actually do.
+ {/* Single time filter controlling both widgets */} +
+ {WINDOW_OPTIONS.map(d => ( + + ))} +
+
+ + {/* Source filter — All / Substack / X + Signals only toggle */} +
+ {(['all', 'substack', 'blog', 'podcast', 'twitter'] as SourceFilter[]).map(src => { + const label = src === 'all' ? 'All' : src === 'substack' ? 'Substack' : src === 'blog' ? 'Blog' : src === 'podcast' ? 'Podcast' : 'X (Twitter)' + const active = sourceFilter === src + return ( + + ) + })} +
{ setTickerFilter(prev => prev === sym ? null : sym) - setKolPage(1) + setServerPage(1) }} /> @@ -858,6 +886,7 @@ export default function KolPage({ initialChanges={initialChanges} initialItems={initialDivergence} tickerFilter={tickerFilter} + days={kolDays} /> {tickerFilter && ( @@ -865,47 +894,38 @@ export default function KolPage({ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12, fontSize: 12, }}> - {isZh ? '当前筛选标的：' : 'Filtered asset:'} + {'Filtered asset:'} {tickerFilter} + >{'Clear ✕'}
)} - {handles.length > 2 && ( -
- {handles.map(h => ( - - ))} -
- )} + {/* KOL handle filter removed — 25 handles as a horizontal tab bar + overflows on every screen size and most users filter by asset (ticker), + not by person. Handle is visible on each post card. */} + +
+ All posts · paginated feed +
{loading && } - {err &&
{isZh ? `错误：${err}` : `Error: ${err}`}
} + {err &&
{`Error: ${err}`}
} {!loading && !err && (
{filtered.length === 0 && (
- {isZh - ? '当前没有数据，等待下一轮抓取任务（每天 01:15 UTC）。' - : 'No data yet. Wait for the next feed ingestion run (daily 01:15 UTC).'} + {'No data yet. Wait for the next feed ingestion run (daily 01:15 UTC).'}
)} - {kolPageItems.map(p => ( + {filtered.map(p => (
openDetail(p.id)} @@ -927,10 +947,44 @@ export default function KolPage({ @{p.kol_handle} · {sourceLabel(p.source, isZh)} · {new Date(p.published_at).toLocaleDateString(dateLocale)}
+ {p.tier === 'trade_signal' && ( + + SIGNAL + + )} + {p.tier === 'directional' && ( + + VIEW + + )} + {p.talks_vs_trades_flag && ( + + ⚠ FLIP + + )} {p.analyzed_at - ? (isZh ? '✓ 已分析' : '✓ Analyzed') - : (isZh ? '⏳ 待分析' : '⏳ Pending')} + ? ('✓ Analyzed') + : ('⏳ Pending')} {p.url && ( - {isZh ? '原帖 ↗' : 'Source ↗'} + {'Source ↗'} )}
- {p.title || (isZh ? '(无标题)' : '(Untitled)')} + {p.title || p.summary || (p.source === 'twitter' ? '(Tweet)' : '(Untitled)')}
- {p.summary && ( + {/* Only show summary as a separate line when there's a real title above it */} + {p.title && p.summary && (
{p.summary} @@ -966,11 +1021,11 @@ export default function KolPage({ ))}
diff --git a/app/[locale]/kol/loading.tsx b/app/[locale]/kol/loading.tsx new file mode 100644 index 0000000..013c367 --- /dev/null +++ b/app/[locale]/kol/loading.tsx @@ -0,0 +1,27 @@ +/** Instant skeleton while KolPage fetches posts and digest. */ +export default function KolLoading() { + return ( +
+
+
+
+
+
+
+ {Array.from({ length: 6 }).map((_, i) => ( +
+
+
+
+
+
+
+
+
+
+
+
+ ))} +
+ ) +} diff --git a/app/[locale]/kol/page.tsx b/app/[locale]/kol/page.tsx index 875cf52..3257d23 100644 --- a/app/[locale]/kol/page.tsx +++ b/app/[locale]/kol/page.tsx @@ -19,8 +19,8 @@ export async function generateMetadata({ return { title: isZh ? 'KOL 信号与言行偏离追踪' : 'KOL Signals & Talks-vs-Trades Divergence', description: isZh - ? '从 15 个加密 KOL 信息源中提取可执行观点，覆盖 Arthur Hayes、Delphi Digital、Bankless、Empire、Unchained 等，并追踪“说法”和链上仓位是否一致。' - : 'AI-extracted crypto signals from 19 KOL feeds: Arthur Hayes, Delphi Digital, Bankless, Empire, Unchained and more. Includes talks-vs-trades divergence — when KOL wallets contradict their public posts.', + ? '从 25 个加密 KOL 信息源中提取可执行观点，覆盖 Arthur Hayes、Delphi Digital、Bankless、Empire、Unchained 等，并追踪“说法”和链上仓位是否一致。' + : 'AI-extracted crypto signals from 25 KOL feeds: Arthur Hayes, Delphi Digital, Bankless, Empire, Unchained and more. Includes talks-vs-trades divergence — when KOL wallets contradict their public posts.', keywords: isZh ? [ 'KOL 加密信号', @@ -48,7 +48,7 @@ export async function generateMetadata({ title: isZh ? 'KOL 信号与言行偏离 | Trump Alpha' : 'KOL Signals & Talks-vs-Trades | Trump Alpha', description: isZh ? '每天分析 KOL 长文、播客和公开观点，再与链上仓位交叉验证，找出真正有信息增量的观点与偏离。' - : '19 KOL feeds (Hayes, Bankless, Empire…) AI-scored daily. Plus talks-vs-trades: when their wallets contradict their words.', + : '25 KOL feeds (Hayes, Bankless, Empire…) AI-scored daily. Plus talks-vs-trades: when their wallets contradict their words.', }, alternates: { canonical: `${siteUrl}/en/kol`, @@ -60,7 +60,7 @@ export async function generateMetadata({ } } -// GEO: the KOL talks-vs-trades feed is a dataset cross-referencing 19 crypto +// GEO: the KOL talks-vs-trades feed is a dataset cross-referencing 25 crypto // KOLs' public statements against their on-chain wallet behaviour. const kolDataset = { '@context': 'https://schema.org', @@ -68,7 +68,7 @@ const kolDataset = { '@id': `${siteUrl}/en/kol#dataset`, name: 'Crypto KOL talks-vs-trades divergence dataset', description: - 'Daily cross-reference of 19 crypto KOLs\' public statements (Substack / podcast) against their on-chain Ethereum wallet activity, flagging divergence when public stance and real positioning disagree within a ±7-day window.', + 'Daily cross-reference of 25 crypto KOLs\' public statements (Substack / podcast) against their on-chain Ethereum wallet activity, flagging divergence when public stance and real positioning disagree within a ±7-day window.', url: `${siteUrl}/en/kol`, keywords: ['crypto KOL', 'on-chain', 'divergence', 'wallet tracking', 'sentiment'], isAccessibleForFree: true, @@ -80,10 +80,13 @@ const kolDataset = { } export default async function KolPage() { + // days=30 must match the client default (KolPageClient kolDays=30) so the + // SSR payload and first client render agree — otherwise content flashes on + // mount. 7d is frequently empty while 30d has data. const [posts, digest, changes, divergence] = await Promise.all([ - getKolPosts({ limit: 100 }).catch(() => null), - getKolDigest(7).catch(() => null), - getKolChanges({ days: 7 }).catch(() => null), + getKolPosts({ limit: 50, page: 1, days: 30 }).catch(() => null), + getKolDigest(30).catch(() => null), + getKolChanges({ days: 30 }).catch(() => null), getKolDivergence({ days: 30 }).catch(() => null), ]) @@ -96,6 +99,7 @@ export default async function KolPage() { +
{children}