feat: revamp dashboard, trades, and add landing/legal pages

- Major UI updates across dashboard, analytics, posts, trades, settings
- New landing page, robots/sitemap, contact/privacy/terms pages
- Updated globals.css with extensive styling and new landing.css
- Refactor signedRequest, realtime data hook, and dashboard store

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

components/dashboard/PostCards.tsx

@@ -1,13 +1,20 @@
 'use client'
 
+import { useEffect, useState } from 'react'
 import type { TrumpPost } from '@/types'
 
 function fmtPct(n: number | null | undefined) {
-  if (n == null || isNaN(n)) return '—'
+  if (n == null || isNaN(n)) return '—'   // null = window not yet closed
   const s = n.toFixed(2) + '%'
   return n >= 0 ? '+' + s : s
 }
 
+function fmtImpactPct(v: number | null | undefined) {
+  if (v == null || isNaN(v)) return '—'
+  const s = Math.abs(v).toFixed(2) + '%'
+  return v >= 0 ? '+' + s : '-' + s
+}
+
 function timeAgo(iso: string) {
   const diff = Date.now() - new Date(iso).getTime()
   const m = Math.floor(diff / 60000)
@@ -18,8 +25,32 @@ function timeAgo(iso: string) {
   return Math.floor(h / 24) + 'd'
 }
 
-function SourceIcon({ source }: { source: string }) {
-  if (source === 'x') return <div className="src-ico x">𝕏</div>
+/**
+ * Hydration-safe wrapper for relative time. Returns an empty placeholder on
+ * SSR / first client render, then the real relative time after mount. Prevents
+ * the SSR/CSR "5m vs 6m" mismatch error.
+ */
+function TimeAgo({ iso, suffix = '' }: { iso: string; suffix?: string }) {
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => { setMounted(true) }, [])
+  if (!mounted) return <span suppressHydrationWarning>…</span>
+  return <span>{timeAgo(iso)}{suffix}</span>
+}
+
+/**
+ * Hydration-safe absolute date formatter. Uses fixed 'en-US' locale + options
+ * so the server/client outputs match once mounted; renders a placeholder before
+ * mount to avoid timezone mismatches.
+ */
+function LocalDateTime({ iso, opts }: { iso: string; opts?: Intl.DateTimeFormatOptions }) {
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => { setMounted(true) }, [])
+  if (!mounted) return <span suppressHydrationWarning>…</span>
+  return <span>{new Date(iso).toLocaleString('en-US', opts)}</span>
+}
+
+function SourceIcon({ source: _source }: { source: string }) {
+  // Truth Social only — no X/Twitter support.
   return <div className="src-ico truth">T</div>
 }
 
@@ -35,41 +66,128 @@ interface PostRowProps {
 }
 
 export default function PostRow({ post, selected, onClick }: PostRowProps) {
+  const [expanded, setExpanded] = useState(false)
   const impact = post.price_impact
+
+  function handleClick() {
+    if (!onClick) setExpanded(e => !e)
+    onClick?.()
+  }
+
   return (
-    <div className={`post-row ${selected ? 'selected' : ''}`} onClick={onClick}>
-      <SourceIcon source={post.source} />
-      <div className="post-body">
-        <div className="meta">
-          <span className="mono" style={{ color: 'var(--ink-2)', fontWeight: 500 }}>@realDonaldTrump</span>
-          <span>·</span>
-          <span>{timeAgo(post.published_at)} ago</span>
-          <span>·</span>
-          <span className={`chip ${post.sentiment === 'bullish' ? 'up' : post.sentiment === 'bearish' ? 'down' : 'neutral'}`} style={{ padding: '2px 8px', fontSize: 11 }}>
-            {post.sentiment}
-          </span>
+    <div
+      className={`post-row ${selected ? 'selected' : ''}`}
+      onClick={handleClick}
+    >
+      {/* ── main row ── */}
+      <div className="post-row-main">
+        <SourceIcon source={post.source} />
+        <div className="post-body">
+          <div className="meta">
+            <span className="mono" style={{ color: 'var(--ink-2)', fontWeight: 500 }}>@realDonaldTrump</span>
+            <span>·</span>
+            <TimeAgo iso={post.published_at} suffix=" ago" />
+            <span>·</span>
+            <span className={`chip ${post.sentiment === 'bullish' ? 'up' : post.sentiment === 'bearish' ? 'down' : 'neutral'}`} style={{ padding: '2px 8px', fontSize: 11 }}>
+              {post.sentiment}
+            </span>
+          </div>
+          <p className="text" style={expanded ? { display: 'block', overflow: 'visible', WebkitLineClamp: 'unset' } : {}}>
+            {expanded ? post.text : (post.text.slice(0, 180) + (post.text.length > 180 ? '…' : ''))}
+          </p>
+        </div>
+        <div className="post-aside">
+          <SignalPill signal={post.signal} />
+          <div className="impact-mini">
+            {impact ? (
+              <>
+                <span className="tf">1h peak</span>
+                <span className={`delta ${impact.m1h == null ? '' : impact.m1h >= 0 ? 'up' : 'down'}`}>
+                  {impact.m1h == null ? '…' : fmtPct(impact.m1h)}
+                </span>
+              </>
+            ) : (
+              <span className="tf">no data</span>
+            )}
+          </div>
+          <div className="row gap-s" style={{ fontSize: 11, color: 'var(--ink-3)' }}>
+            <span>AI</span>
+            <span className="mono" style={{ color: 'var(--ink-2)', fontWeight: 500 }}>{post.ai_confidence}%</span>
+          </div>
         </div>
-        <p className="text">{post.text.slice(0, 180)}{post.text.length > 180 ? '…' : ''}</p>
       </div>
-      <div className="post-aside">
-        <SignalPill signal={post.signal} />
-        <div className="impact-mini">
-          {impact ? (
-            <>
-              <span className="tf">1h</span>
-              <span className={`delta ${(impact.m1h ?? 0) >= 0 ? 'up' : 'down'}`}>{fmtPct(impact.m1h)}</span>
-            </>
-          ) : (
-            <span className="tf">no data</span>
+
+      {/* ── expanded detail ── */}
+      {expanded && (
+        <div
+          className="post-row-detail"
+          onClick={e => e.stopPropagation()}
+        >
+          {/* AI confidence bar */}
+          <div>
+            <div className="ai-metric-head">
+              <span>AI confidence</span>
+              <strong>{post.ai_confidence}%</strong>
+            </div>
+            <div className="confidence-bar">
+              <div style={{ width: post.ai_confidence + '%' }} />
+            </div>
+          </div>
+
+          {/* AI reasoning */}
+          {post.ai_reasoning && (
+            <div>
+              <div className="ai-reasoning-label">AI reasoning</div>
+              <div className="ai-reasoning-card">
+                {post.ai_reasoning}
+              </div>
+            </div>
+          )}
+
+          {/* Price impact — peak move in signal direction per window */}
+          {impact && (
+            <div>
+              <div className="tiny" style={{ marginBottom: 8 }}>Peak move · {impact.asset}</div>
+              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
+                {(['m5', 'm15', 'm1h'] as const).map(key => {
+                  const label = key === 'm5' ? '5m' : key === 'm15' ? '15m' : '1h'
+                  const v = impact[key]   // null = window still open
+                  const correct = impact[`correct_${key}` as 'correct_m5' | 'correct_m15' | 'correct_m1h']
+                  const pending = v == null
+                  return (
+                    <div key={key} style={{
+                      padding: 10,
+                      background: 'var(--bg-sunk)',
+                      borderRadius: 'var(--r-sm)',
+                      border: `1px solid ${pending ? 'var(--amber)' : 'var(--line)'}`,
+                      textAlign: 'center',
+                      opacity: pending ? 0.75 : 1,
+                    }}>
+                      <div style={{ fontSize: 10, color: 'var(--ink-3)', marginBottom: 4 }}>{label}</div>
+                      <div
+                        className={pending ? '' : `delta ${v >= 0 ? 'up' : 'down'}`}
+                        style={{ fontSize: 14, fontWeight: 600, color: pending ? 'var(--ink-3)' : undefined }}
+                      >
+                        {pending ? '…' : fmtImpactPct(v)}
+                      </div>
+                      {!pending && correct != null && (
+                        <div style={{ fontSize: 10, marginTop: 4, color: correct ? 'var(--up)' : 'var(--down)' }}>
+                          {correct ? '✓' : '✗'}
+                        </div>
+                      )}
+                      {pending && (
+                        <div style={{ fontSize: 9, marginTop: 4, color: 'var(--amber)' }}>live</div>
+                      )}
+                    </div>
+                  )
+                })}
+              </div>
+            </div>
           )}
         </div>
-        <div className="row gap-s" style={{ fontSize: 11, color: 'var(--ink-3)' }}>
-          <span>AI</span>
-          <span className="mono" style={{ color: 'var(--ink-2)', fontWeight: 500 }}>{post.ai_confidence}%</span>
-        </div>
-      </div>
+      )}
     </div>
   )
 }
 
-export { SignalPill, SourceIcon, fmtPct, timeAgo }
+export { SignalPill, SourceIcon, fmtPct, timeAgo, TimeAgo, LocalDateTime }