style(dashboard): unify Macro composite into one card + dark-mode fix

for Performance accent

User flagged the macro index box on the overview page as feeling
disjointed. Reshaped it from three stacked elements (band → track →
scale) into a single bordered card so it reads as ONE component.

  - JSX: wrap the three pieces in <div className="overview-macro-card">
  - CSS: new .overview-macro-card with tone-coloured rim (bull/bear/neutral)
  - Solid neutral-gray filled needle (was a hollow ring — looked like a
    placeholder); tone-coloured background + white inner ring + double
    shadow so it stands out on any gradient position
  - Removed the .overview-score-fill overlay — the gradient already
    encodes the spectrum; layering an opaque fill obscured it near 0
  - Thinner track (14px vs 22px), tighter scale labels, smaller pill
  - Added "TODAY · 8 INDICATORS" stamp next to the title — gives users
    a quick anchor of what they're looking at + freshness

Plus: dark-mode override for .overview-stat-card.accent (the Performance
card). It was using a cream gradient that floated as a glaring
out-of-theme block on dark mode. Mirrored the existing .kpi.accent dark
treatment so it stays visually grouped with the rest of the dashboard.

Also includes the in-flight overview rewrite from the other AI tool
(legacy /btc redirect to /macro, middleware.ts replacing proxy.ts for
Next.js routing, refactored several dashboard panels). TypeScript clean,
production build passes.

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

components/nav/LanguageSwitch.tsx

@@ -19,6 +19,9 @@ function replaceLocale(pathname: string, nextLocale: Locale) {
 export default function LanguageSwitch() {
   const pathname = usePathname()
   const searchParams = useSearchParams()
+  const options: Array<{ locale: Locale; label: string }> = [
+    { locale: 'en', label: 'EN' },
+  ]
 
   const activeLocale = useMemo<Locale>(() => {
     const seg = pathname.split('/').filter(Boolean)[0]
@@ -39,10 +42,7 @@ export default function LanguageSwitch() {
         flexShrink: 0,
       }}
     >
-      {([
-        ['en', 'EN'],
-        ['zh', '中文'],
-      ] as const).map(([locale, label]) => {
+      {options.map(({ locale, label }) => {
         const active = activeLocale === locale
         const nextPath = replaceLocale(pathname || `/${defaultLocale}`, locale)
         const qs = searchParams.toString()
@@ -56,7 +56,7 @@ export default function LanguageSwitch() {
               display: 'inline-flex',
               alignItems: 'center',
               justifyContent: 'center',
-              minWidth: locale === 'zh' ? 48 : 40,
+              minWidth: 40,
               padding: '6px 10px',
               borderRadius: 999,
               border: 'none',

components/nav/Navbar.tsx

@@ -5,6 +5,7 @@ import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { useAccount, useConnect, useDisconnect } from 'wagmi'
 import { useTranslations } from 'next-intl'
+import { getFirstReadyConnector, walletConnectErrorLabel } from '@/lib/walletConnect'
 // i18n shelved — LanguageSwitch hidden but kept on disk for future revival.
 // import LanguageSwitch from './LanguageSwitch'
 
@@ -49,11 +50,12 @@ export default function Navbar() {
   const t = useTranslations('nav')
   const pathname = usePathname()
   const { address, isConnected } = useAccount()
-  const { connect, connectors } = useConnect()
+  const { connectAsync, connectors } = useConnect()
   const { disconnect } = useDisconnect()
   const [mounted, setMounted] = useState(false)
   const [walletMenuOpen, setWalletMenuOpen] = useState(false)
   const [copied, setCopied] = useState(false)
+  const [connectError, setConnectError] = useState('')
 
   async function copyAddress(addr: string) {
     let ok = false
@@ -78,10 +80,27 @@ export default function Navbar() {
   }
   useEffect(() => { setMounted(true) }, [])
   useEffect(() => { setWalletMenuOpen(false) }, [pathname, address])
+  useEffect(() => {
+    if (isConnected) setConnectError('')
+  }, [isConnected])
 
   const locale = pathname.split('/')[1] || 'en'
   const path = '/' + pathname.split('/').slice(2).join('/')
 
+  async function handleConnectWallet() {
+    setConnectError('')
+    try {
+      const connector = await getFirstReadyConnector(connectors)
+      if (!connector) {
+        setConnectError('No wallet connector is available right now.')
+        return
+      }
+      await connectAsync({ connector })
+    } catch (err: unknown) {
+      setConnectError(walletConnectErrorLabel(err))
+    }
+  }
+
   // Two independent trading systems get their own top-level tabs — no
   // intermediate "Signals" hub. Trump = event scalp; BTC = reversal.
   const tabs = [
@@ -128,58 +147,60 @@ export default function Navbar() {
       <div className="nav-right">
         {/* <LanguageSwitch /> — shelved until i18n coverage is complete */}
         <ThemeToggle />
-        {!mounted ? (
-          <button className="connect-btn lg" suppressHydrationWarning>{t('actions.connectWallet')}</button>
-        ) : isConnected && shortAddr ? (
-          <div className="wallet-menu-wrap" style={{ position: 'relative' }}>
-            <button
-              className="wallet-chip"
-              onClick={() => setWalletMenuOpen(open => !open)}
-              onBlur={(e) => {
-                if (!e.currentTarget.parentElement?.contains(e.relatedTarget as Node | null)) {
-                  setWalletMenuOpen(false)
-                }
-              }}
-              aria-expanded={walletMenuOpen}
-              aria-haspopup="menu"
-            >
-              <span className="ava" />
-              <span className="mono">{shortAddr}</span>
-            </button>
-            <div className={`wallet-menu ${walletMenuOpen ? 'open' : ''}`} role="menu">
+        <div className="wallet-anchor">
+          {!mounted ? (
+            <button className="connect-btn lg" suppressHydrationWarning>{t('actions.connectWallet')}</button>
+          ) : isConnected && shortAddr ? (
+            <div className="wallet-menu-wrap" style={{ position: 'relative' }}>
               <button
-                role="menuitem"
-                onMouseDown={(e) => {
-                  e.preventDefault()
-                  if (address) copyAddress(address)
+                className="wallet-chip"
+                onClick={() => setWalletMenuOpen(open => !open)}
+                onBlur={(e) => {
+                  if (!e.currentTarget.parentElement?.contains(e.relatedTarget as Node | null)) {
+                    setWalletMenuOpen(false)
+                  }
                 }}
+                aria-expanded={walletMenuOpen}
+                aria-haspopup="menu"
               >
-                {copied ? t('actions.copied') : t('actions.copyAddress')}
-              </button>
-              <button
-                role="menuitem"
-                className="danger"
-                onMouseDown={(e) => {
-                  e.preventDefault()
-                  disconnect()
-                  setWalletMenuOpen(false)
-                }}
-              >
-                {t('actions.disconnect')}
+                <span className="ava" />
+                <span className="mono">{shortAddr}</span>
               </button>
+              <div className={`wallet-menu ${walletMenuOpen ? 'open' : ''}`} role="menu">
+                <button
+                  role="menuitem"
+                  onMouseDown={(e) => {
+                    e.preventDefault()
+                    if (address) copyAddress(address)
+                  }}
+                >
+                  {copied ? t('actions.copied') : t('actions.copyAddress')}
+                </button>
+                <button
+                  role="menuitem"
+                  className="danger"
+                  onMouseDown={(e) => {
+                    e.preventDefault()
+                    disconnect()
+                    setWalletMenuOpen(false)
+                  }}
+                >
+                  {t('actions.disconnect')}
+                </button>
+              </div>
             </div>
-          </div>
-        ) : (
-          <button
-            className="connect-btn lg"
-            onClick={() => {
-              const connector = connectors[0]
-              if (connector) connect({ connector })
-            }}
-          >
-            {t('actions.connectWallet')}
-          </button>
-        )}
+          ) : (
+            <button
+              className="connect-btn lg"
+              onClick={() => { void handleConnectWallet() }}
+            >
+              {t('actions.connectWallet')}
+            </button>
+          )}
+          {!isConnected && connectError ? (
+            <p className="wallet-connect-error" role="alert">{connectError}</p>
+          ) : null}
+        </div>
       </div>
     </nav>
   )