From 02cf9d1cba3b044513a9d399c896c456bba5918d Mon Sep 17 00:00:00 2001
From: Dennis Thiessen <dennis@thiessen.io>
Date: Fri, 10 Jul 2026 07:44:55 +0200
Subject: [PATCH] Match Horizon mockup structure; restore qualified-first radar

Fixes from first prod review of the redesign:

- Top navigation bar (TopBar) replaces the sidebar, like the mockup:
  wordmark + sections + ticker search + jobs/status/logout; content in
  a centered max-width column. MobileNav unchanged.
- Radar panel: qualified setups lead again (the actionable list, as
  the old Top Setups did); non-qualified sit behind an "N below the
  gate" toggle with per-rule reasons, auto-open only when nothing
  qualifies. Adds mini radar fingerprints for the top 3 qualified
  (dimension scores from the rankings endpoint, fixed axis order).
- Dashboard layout: open positions and radar side by side (xl), as in
  the mockup.
- ScoreCard: the radar fingerprint was inside the showComposite block,
  which the ticker page disables - it never rendered. Now it shows
  whenever >= 3 dimensions exist.
- TradeChart: fresh positions with < 2 bars since entry rendered no
  chart; now pads with ~10 pre-entry context bars (gray) and marks the
  entry point. First open position auto-expands so the chart is
  visible without a click.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 frontend/src/components/charts/horizon.tsx    |  27 +-
 .../components/dashboard/OpenTradesPanel.tsx  |  12 +-
 frontend/src/components/layout/AppShell.tsx   |  16 +-
 frontend/src/components/layout/Sidebar.tsx    | 118 ---------
 frontend/src/components/layout/TopBar.tsx     | 106 ++++++++
 frontend/src/components/ui/ScoreCard.tsx      |  13 +-
 frontend/src/pages/DashboardPage.tsx          | 241 ++++++++++++------
 frontend/tsconfig.tsbuildinfo                 |   2 +-
 8 files changed, 321 insertions(+), 214 deletions(-)
 delete mode 100644 frontend/src/components/layout/Sidebar.tsx
 create mode 100644 frontend/src/components/layout/TopBar.tsx

diff --git a/frontend/src/components/charts/horizon.tsx b/frontend/src/components/charts/horizon.tsx
index 214a03b..3fbcf72 100644
--- a/frontend/src/components/charts/horizon.tsx
+++ b/frontend/src/components/charts/horizon.tsx
@@ -237,11 +237,14 @@ export function TradeChart({
   openedAt: string;
 }) {
   const openedDate = openedAt.slice(0, 10);
-  const closes = bars
-    .filter((b) => b.date.slice(0, 10) >= openedDate)
-    .map((b) => b.close);
-  const series = [entry, ...closes];
-  if (series.length < 3) return null;
+  const firstIdx = bars.findIndex((b) => b.date.slice(0, 10) >= openedDate);
+  // Fresh trades have few bars since entry — pad with context so the chart
+  // still reads (gray before entry, colored after).
+  const CONTEXT_BARS = 10;
+  const start = firstIdx === -1 ? Math.max(0, bars.length - CONTEXT_BARS) : Math.max(0, firstIdx - CONTEXT_BARS);
+  const series = bars.slice(start).map((b) => b.close);
+  const entryIdx = firstIdx === -1 ? series.length - 1 : firstIdx - start;
+  if (series.length < 2) return null;
 
   const w = 560; const h = 150;
   const padL = 8; const padR = 96; const padT = 10; const padB = 12;
@@ -259,7 +262,13 @@ export function TradeChart({
   const plotH = h - padT - padB;
   const px = (i: number) => padL + (i / (series.length - 1)) * plotW;
   const py = (v: number) => padT + plotH - ((v - lo) / (hi - lo)) * plotH;
-  const path = series.map((v, i) => `${i === 0 ? 'M' : 'L'}${px(i).toFixed(1)},${py(v).toFixed(1)}`).join(' ');
+  const seg = (from: number, to: number) =>
+    series
+      .slice(from, to + 1)
+      .map((v, i) => `${i === 0 ? 'M' : 'L'}${px(from + i).toFixed(1)},${py(v).toFixed(1)}`)
+      .join(' ');
+  const contextPath = entryIdx > 0 ? seg(0, entryIdx) : null;
+  const tradePath = seg(entryIdx, series.length - 1);
   const last = series[series.length - 1];
   const perShare = isShort ? entry - last : last - entry;
   const col = perShare >= 0 ? 'var(--up)' : 'var(--down)';
@@ -288,7 +297,11 @@ export function TradeChart({
           target {fmt(target)} {isShort ? '↓' : '↑'}
         </text>
       )}
-      <path d={path} fill="none" stroke={col} strokeWidth="2" strokeLinejoin="round" strokeLinecap="round" />
+      {contextPath && (
+        <path d={contextPath} fill="none" stroke="var(--ink-3)" strokeWidth="2" strokeLinejoin="round" strokeLinecap="round" opacity="0.7" />
+      )}
+      <path d={tradePath} fill="none" stroke={col} strokeWidth="2" strokeLinejoin="round" strokeLinecap="round" />
+      <circle cx={px(entryIdx)} cy={py(entry)} r="3.5" fill="var(--ink-2)" stroke="var(--surface)" strokeWidth="1.5" />
       <circle cx={px(series.length - 1)} cy={py(last)} r="4" fill={col} stroke="var(--surface)" strokeWidth="2" />
     </svg>
   );
diff --git a/frontend/src/components/dashboard/OpenTradesPanel.tsx b/frontend/src/components/dashboard/OpenTradesPanel.tsx
index 3984953..a70ccb8 100644
--- a/frontend/src/components/dashboard/OpenTradesPanel.tsx
+++ b/frontend/src/components/dashboard/OpenTradesPanel.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import type { KeyboardEvent, ReactNode } from 'react';
 import { Link } from 'react-router-dom';
 import { useQuery } from '@tanstack/react-query';
@@ -135,6 +135,16 @@ export function OpenTradesPanel() {
   const close = useClosePaperTrade();
   const [expandedId, setExpandedId] = useState<number | null>(null);
 
+  // Open the first row once on load so the trade chart is visible without a
+  // click; after that the user's expand/collapse choice wins.
+  const autoExpanded = useRef(false);
+  useEffect(() => {
+    if (!autoExpanded.current && trades && trades.length > 0) {
+      autoExpanded.current = true;
+      setExpandedId(trades[0].id);
+    }
+  }, [trades]);
+
   const exitLabel = policy
     ? policy.mode === 'atr_trailing'
       ? `${(policy.atr_multiplier ?? 3).toFixed(1)}x ATR trailing stop / ${policy.hold_days}d max`
diff --git a/frontend/src/components/layout/AppShell.tsx b/frontend/src/components/layout/AppShell.tsx
index 1516d6b..feb0844 100644
--- a/frontend/src/components/layout/AppShell.tsx
+++ b/frontend/src/components/layout/AppShell.tsx
@@ -1,21 +1,19 @@
 import { Outlet } from 'react-router-dom';
-import Sidebar from './Sidebar';
+import TopBar from './TopBar';
 import MobileNav from './MobileNav';
 
 export default function AppShell() {
   return (
-    <div className="flex min-h-screen text-gray-100">
+    <div className="min-h-screen text-gray-100">
       <div className="app-horizon" aria-hidden="true">
         <div className="app-horizon-rim" />
         <div className="app-horizon-planet" />
       </div>
-      <Sidebar />
-      <div className="flex-1 flex flex-col">
-        <MobileNav />
-        <main className="flex-1 p-4 lg:p-8 animate-fade-in">
-          <Outlet />
-        </main>
-      </div>
+      <TopBar />
+      <MobileNav />
+      <main className="mx-auto w-full max-w-[1200px] p-4 animate-fade-in lg:px-8 lg:py-7">
+        <Outlet />
+      </main>
     </div>
   );
 }
diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx
deleted file mode 100644
index cb063de..0000000
--- a/frontend/src/components/layout/Sidebar.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import { NavLink } from 'react-router-dom';
-import { useQuery } from '@tanstack/react-query';
-import { useAuthStore } from '../../stores/authStore';
-import { check as healthCheck } from '../../api/health';
-import { getRunningJobs } from '../../api/jobs';
-import TickerSearch from './TickerSearch';
-
-const navItems = [
-  { to: '/', label: 'Overview', index: '01', end: true },
-  { to: '/market', label: 'Market', index: '02', end: false },
-  { to: '/signals', label: 'Signals', index: '03', end: false },
-  { to: '/regime', label: 'Regime', index: '04', end: false },
-];
-
-const linkClasses = (isActive: boolean) =>
-  `flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 ${
-    isActive
-      ? 'bg-blue-400/[0.08] text-blue-300 border border-blue-400/20'
-      : 'text-gray-400 hover:bg-white/[0.04] hover:text-gray-200 border border-transparent'
-  }`;
-
-export default function Sidebar() {
-  const { role, username, logout } = useAuthStore();
-
-  const health = useQuery({
-    queryKey: ['health'],
-    queryFn: healthCheck,
-    refetchInterval: 30_000,
-    retry: 1,
-  });
-
-  const isBackendUp = health.isSuccess;
-
-  const jobs = useQuery({
-    queryKey: ['jobs', 'running'],
-    queryFn: getRunningJobs,
-    refetchInterval: 10_000,
-    retry: 1,
-    enabled: isBackendUp,
-  });
-
-  const running = jobs.data?.running ?? [];
-
-  return (
-    <aside className="hidden lg:flex lg:flex-col lg:w-64 h-screen sticky top-0 glass border-r border-white/[0.06] rounded-none border-l-0 border-t-0 border-b-0">
-      {/* Brand */}
-      <div className="px-6 py-6 border-b border-white/[0.06]">
-        <div className="flex items-center gap-2">
-          <span className="relative flex h-2.5 w-2.5">
-            <span className="absolute inline-flex h-full w-full rounded-full bg-blue-400 animate-signal-pulse" />
-            <span className="relative inline-flex h-2.5 w-2.5 rounded-full bg-blue-400/60" />
-          </span>
-          <h1 className="font-display text-xl font-bold tracking-tight text-gradient">Signal</h1>
-        </div>
-        <p className="text-[10px] text-gray-500 mt-1.5 font-mono uppercase tracking-[0.22em]">Trading Intelligence</p>
-      </div>
-
-      <div className="px-3 pt-4">
-        <TickerSearch />
-      </div>
-
-      <nav className="flex-1 px-3 py-5 space-y-1">
-        {navItems.map(({ to, label, index, end }) => (
-          <NavLink key={to} to={to} end={end} className={({ isActive }) => linkClasses(isActive)}>
-            <span className="font-mono text-[10px] tracking-widest opacity-50">{index}</span>
-            {label}
-          </NavLink>
-        ))}
-        {role === 'admin' && (
-          <NavLink to="/admin" className={({ isActive }) => linkClasses(isActive)}>
-            <span className="font-mono text-[10px] tracking-widest opacity-50">05</span>
-            Admin
-          </NavLink>
-        )}
-      </nav>
-
-      <div className="px-4 py-4 border-t border-white/[0.06] space-y-3">
-        <div className="flex items-center gap-2 px-1">
-          <span
-            className={`inline-block h-2 w-2 rounded-full ${
-              isBackendUp ? 'bg-emerald-400 shadow-lg shadow-emerald-400/50' : 'bg-red-400 shadow-lg shadow-red-400/50'
-            }`}
-            aria-label={isBackendUp ? 'Backend online' : 'Backend offline'}
-          />
-          <span className="text-xs text-gray-500">
-            {isBackendUp ? 'Backend online' : 'Backend offline'}
-          </span>
-        </div>
-
-        {/* Live background-job activity */}
-        {running.length > 0 && (
-          <div className="px-1 space-y-1">
-            {running.map((job) => (
-              <div key={job.name} className="flex items-center gap-2">
-                <span className="inline-block h-1.5 w-1.5 rounded-full bg-blue-400 animate-signal-pulse shrink-0" />
-                <span className="text-[11px] text-gray-400 truncate">
-                  {job.label}
-                  {job.progress_pct != null && (
-                    <span className="num text-gray-500"> {Math.round(job.progress_pct)}%</span>
-                  )}
-                </span>
-              </div>
-            ))}
-          </div>
-        )}
-        {username && (
-          <p className="text-xs text-gray-500 truncate px-1">Signed in as {username}</p>
-        )}
-        <button
-          onClick={logout}
-          className="w-full px-3 py-2 text-sm text-gray-400 hover:text-gray-200 hover:bg-white/[0.04] rounded-lg transition-all duration-200 text-left"
-        >
-          Logout
-        </button>
-      </div>
-    </aside>
-  );
-}
diff --git a/frontend/src/components/layout/TopBar.tsx b/frontend/src/components/layout/TopBar.tsx
new file mode 100644
index 0000000..20dcde2
--- /dev/null
+++ b/frontend/src/components/layout/TopBar.tsx
@@ -0,0 +1,106 @@
+import { NavLink } from 'react-router-dom';
+import { useQuery } from '@tanstack/react-query';
+import { useAuthStore } from '../../stores/authStore';
+import { check as healthCheck } from '../../api/health';
+import { getRunningJobs } from '../../api/jobs';
+import TickerSearch from './TickerSearch';
+
+const navItems = [
+  { to: '/', label: 'Overview', end: true },
+  { to: '/market', label: 'Market', end: false },
+  { to: '/signals', label: 'Signals', end: false },
+  { to: '/regime', label: 'Regime', end: false },
+];
+
+const linkClasses = (isActive: boolean) =>
+  `pb-0.5 text-[13.5px] font-medium transition-colors border-b ${
+    isActive
+      ? 'border-blue-500 text-gray-100'
+      : 'border-transparent text-gray-400 hover:text-gray-200'
+  }`;
+
+/** Desktop command bar — the mockup's top navigation. MobileNav covers <lg. */
+export default function TopBar() {
+  const { role, username, logout } = useAuthStore();
+
+  const health = useQuery({
+    queryKey: ['health'],
+    queryFn: healthCheck,
+    refetchInterval: 30_000,
+    retry: 1,
+  });
+
+  const isBackendUp = health.isSuccess;
+
+  const jobs = useQuery({
+    queryKey: ['jobs', 'running'],
+    queryFn: getRunningJobs,
+    refetchInterval: 10_000,
+    retry: 1,
+    enabled: isBackendUp,
+  });
+
+  const running = jobs.data?.running ?? [];
+
+  return (
+    <header className="glass sticky top-0 z-40 hidden items-center gap-7 rounded-none border-x-0 border-t-0 px-8 py-3 lg:flex">
+      {/* Wordmark */}
+      <NavLink to="/" className="flex items-center" aria-label="Signal — overview">
+        <span className="font-display text-[15px] font-bold tracking-[0.4em] text-gray-100">
+          SIGNAL
+        </span>
+        <span
+          className="ml-0.5 inline-block h-[7px] w-[7px] rounded-full bg-[#ff6a45]"
+          style={{ boxShadow: '0 0 10px rgba(255,106,69,.7)' }}
+        />
+      </NavLink>
+
+      <nav className="flex items-center gap-6" aria-label="Sections">
+        {navItems.map(({ to, label, end }) => (
+          <NavLink key={to} to={to} end={end} className={({ isActive }) => linkClasses(isActive)}>
+            {label}
+          </NavLink>
+        ))}
+        {role === 'admin' && (
+          <NavLink to="/admin" className={({ isActive }) => linkClasses(isActive)}>
+            Admin
+          </NavLink>
+        )}
+      </nav>
+
+      <div className="w-56">
+        <TickerSearch />
+      </div>
+
+      <div className="ml-auto flex items-center gap-5">
+        {/* Live background-job activity, condensed */}
+        {running.length > 0 && (
+          <span className="flex max-w-[220px] items-center gap-2" title={running.map((j) => j.label).join(' · ')}>
+            <span className="inline-block h-1.5 w-1.5 shrink-0 animate-signal-pulse rounded-full bg-blue-400" />
+            <span className="truncate text-[11px] text-gray-400">
+              {running[0].label}
+              {running[0].progress_pct != null && (
+                <span className="num text-gray-500"> {Math.round(running[0].progress_pct)}%</span>
+              )}
+              {running.length > 1 && <span className="text-gray-500"> +{running.length - 1}</span>}
+            </span>
+          </span>
+        )}
+        <span
+          className={`inline-block h-2 w-2 rounded-full ${
+            isBackendUp ? 'bg-emerald-400 shadow-lg shadow-emerald-400/50' : 'bg-red-400 shadow-lg shadow-red-400/50'
+          }`}
+          title={isBackendUp ? 'Backend online' : 'Backend offline'}
+          aria-label={isBackendUp ? 'Backend online' : 'Backend offline'}
+        />
+        {username && <span className="max-w-[140px] truncate text-xs text-gray-500">{username}</span>}
+        <button
+          onClick={logout}
+          className="text-[13px] text-gray-400 transition-colors hover:text-gray-200"
+        >
+          Logout
+        </button>
+      </div>
+    </header>
+  );
+}
diff --git a/frontend/src/components/ui/ScoreCard.tsx b/frontend/src/components/ui/ScoreCard.tsx
index 84ff50f..e02719a 100644
--- a/frontend/src/components/ui/ScoreCard.tsx
+++ b/frontend/src/components/ui/ScoreCard.tsx
@@ -64,13 +64,14 @@ export function ScoreCard({ compositeScore, dimensions, compositeBreakdown, show
 
   return (
     <div className="glass p-5">
-      {showComposite && (
+      {(showComposite || dimensions.length >= 3) && (
         <div className="flex flex-wrap items-center gap-4">
-          {compositeScore !== null ? (
+          {showComposite && (compositeScore !== null ? (
             <ScoreRing score={compositeScore} />
           ) : (
             <div className="flex h-[88px] w-[88px] items-center justify-center text-sm text-gray-500">N/A</div>
-          )}
+          ))}
+          {showComposite && (
           <div>
             <p className="text-xs text-gray-500 uppercase tracking-wider">Composite Score</p>
             <p className={`text-2xl font-bold ${compositeScore !== null ? scoreColor(compositeScore) : 'text-gray-500'}`}>
@@ -88,8 +89,12 @@ export function ScoreCard({ compositeScore, dimensions, compositeBreakdown, show
               </p>
             )}
           </div>
+          )}
           {dimensions.length >= 3 && (
-            <div className="ml-auto" title="Score fingerprint — hover a corner for the exact value">
+            <div
+              className={showComposite ? 'ml-auto' : 'mx-auto sm:mx-0'}
+              title="Score fingerprint — hover a corner for the exact value"
+            >
               <RadarChart
                 axes={dimensions.map((d) => ({
                   label: d.dimension.length > 9 ? `${d.dimension.slice(0, 8)}.` : d.dimension,
diff --git a/frontend/src/pages/DashboardPage.tsx b/frontend/src/pages/DashboardPage.tsx
index 61cf266..774331b 100644
--- a/frontend/src/pages/DashboardPage.tsx
+++ b/frontend/src/pages/DashboardPage.tsx
@@ -1,6 +1,7 @@
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { useActivation } from '../hooks/useActivation';
+import { useRankings } from '../hooks/useScores';
 import { useTrades } from '../hooks/useTrades';
 import { useWatchlist } from '../hooks/useWatchlist';
 import { usePaperTrades } from '../hooks/usePaperTrades';
@@ -10,7 +11,8 @@ import { regimeColor, regimeDot, regimeHeadline } from '../lib/regime';
 import { Callout } from '../components/ui/Callout';
 import { Section } from '../components/ui/Section';
 import { OpenTradesPanel } from '../components/dashboard/OpenTradesPanel';
-import { PriceRail } from '../components/charts/horizon';
+import { PriceRail, RadarChart } from '../components/charts/horizon';
+import type { RadarAxis } from '../components/charts/horizon';
 import { SkeletonCard, SkeletonTable } from '../components/ui/Skeleton';
 import { tradePnl } from '../lib/paperTrade';
 import {
@@ -61,6 +63,57 @@ function DirectionTag({ direction }: { direction: string }) {
   );
 }
 
+interface RadarRow {
+  setup: TradeSetup;
+  rank: number;
+  reason: string | null;
+}
+
+/** One radar row — compact enough for the half-width column. */
+function RadarSetupRow({ setup, rank, reason, name }: RadarRow & { name?: string }) {
+  const qualified = reason === null;
+  const prob = primaryTargetProbability(setup);
+  return (
+    <li
+      className={`grid grid-cols-[20px_minmax(92px,116px)_44px_1fr_auto] items-center gap-2.5 px-2 py-2.5 ${
+        qualified ? '' : 'opacity-60'
+      }`}
+      title={`R:R ${setup.rr_ratio.toFixed(1)}:1${prob != null ? ` · target prob ${Math.round(prob)}%` : ''}`}
+    >
+      <span className="num text-[11px] text-gray-500">{rank}</span>
+      <span className="min-w-0">
+        <Link
+          to={`/ticker/${setup.symbol}`}
+          className="block font-medium text-blue-300 transition-colors hover:text-blue-200"
+        >
+          {setup.symbol}
+        </Link>
+        {name && <span className="block truncate text-[10.5px] text-gray-500">{name}</span>}
+      </span>
+      <DirectionTag direction={setup.direction} />
+      <span className="flex items-center gap-2">
+        <span className="h-1 flex-1 overflow-hidden rounded-full bg-white/[0.07]">
+          <span
+            className="block h-full rounded-full"
+            style={{
+              width: `${Math.round(setup.momentum_percentile ?? 0)}%`,
+              background: qualified ? 'var(--up)' : 'var(--ink-3)',
+            }}
+          />
+        </span>
+        <span className="num w-11 text-[10px] text-gray-500">
+          {setup.momentum_percentile != null ? `${Math.round(setup.momentum_percentile)}%ile` : '—'}
+        </span>
+      </span>
+      <span className={`max-w-[170px] text-right text-[11.5px] leading-snug ${qualified ? 'text-blue-300' : 'text-gray-500'}`}>
+        {qualified
+          ? `✓ ${setup.rr_ratio.toFixed(1)}:1${prob != null ? ` · ${Math.round(prob)}%` : ''}`
+          : reason}
+      </span>
+    </li>
+  );
+}
+
 function convictionLabel(action: TradeSetup['recommended_action']): string {
   if (!action || action === 'NEUTRAL') return '—';
   if (action.endsWith('_HIGH')) return 'High';
@@ -184,22 +237,56 @@ export default function DashboardPage() {
   }, [qualifiedSetups]);
 
   // Radar: every live setup ranked by the same score, with the gate verdict.
+  // Qualified setups lead (that's the actionable list); the rest sit behind a
+  // toggle so a 0-qualified day isn't a wall of rejections.
   const radar = useMemo(() => {
-    if (!activation.data) return [];
-    return [...(trades.data ?? [])]
+    if (!activation.data) return { qualified: [] as RadarRow[], below: [] as RadarRow[] };
+    const ranked = [...(trades.data ?? [])]
       .sort(
         (a, b) =>
           (b.strategy_rank ?? b.momentum_percentile ?? -Infinity) -
           (a.strategy_rank ?? a.momentum_percentile ?? -Infinity),
       )
-      .slice(0, 8)
       .map((setup, i) => ({
         setup,
         rank: i + 1,
         reason: disqualifyReason(setup, activation.data!),
       }));
+    return {
+      qualified: ranked.filter((r) => r.reason === null),
+      below: ranked.filter((r) => r.reason !== null).slice(0, 8),
+    };
   }, [trades.data, activation.data]);
 
+  // Mini score fingerprints for the qualified setups (dimension scores come
+  // from the rankings endpoint; axis order is fixed alphabetically so shapes
+  // stay comparable across symbols).
+  const rankings = useRankings();
+  const fingerprints = useMemo(() => {
+    const dimsBySymbol = new Map<string, RadarAxis[]>();
+    for (const r of rankings.data?.rankings ?? []) {
+      const dims = [...r.dimensions].sort((a, b) => a.dimension.localeCompare(b.dimension));
+      if (dims.length >= 3) {
+        dimsBySymbol.set(
+          r.symbol.toUpperCase(),
+          dims.map((d) => ({
+            label: d.dimension.length > 9 ? `${d.dimension.slice(0, 8)}.` : d.dimension,
+            full: d.dimension,
+            value: d.score,
+          })),
+        );
+      }
+    }
+    return radar.qualified
+      .slice(0, 3)
+      .map(({ setup, rank }) => ({ symbol: setup.symbol, rank, axes: dimsBySymbol.get(setup.symbol.toUpperCase()) }))
+      .filter((f): f is { symbol: string; rank: number; axes: RadarAxis[] } => !!f.axes);
+  }, [rankings.data, radar.qualified]);
+
+  const [belowChoice, setBelowChoice] = useState<boolean | null>(null);
+  // Default open when nothing qualifies — the near-misses ARE the content then.
+  const showBelow = belowChoice ?? radar.qualified.length === 0;
+
   const topWatchlist = useMemo(
     () =>
       [...(watchlist.data ?? [])]
@@ -338,78 +425,84 @@ export default function DashboardPage() {
         </div>
       )}
 
-      {/* Open paper trades */}
-      <OpenTradesPanel />
+      {/* Open positions | Radar — side by side like the mockup */}
+      <div className="grid items-start gap-8 xl:grid-cols-2">
+        <OpenTradesPanel />
 
-      {/* Radar — every live setup, ranked, with the gate verdict */}
-      <Section title="Radar" hint="ranked by strategy score · why each does or doesn't qualify">
-        {trades.isLoading && <SkeletonTable rows={5} cols={6} />}
-        {trades.data && radar.length === 0 && (
-          <Callout variant="empty">No live setups right now.</Callout>
-        )}
-        {radar.length > 0 && (
-          <div className="glass px-4 py-1">
-            <ul className="divide-y divide-white/[0.04]">
-              {radar.map(({ setup, rank, reason }) => {
-                const qualified = reason === null;
-                const prob = primaryTargetProbability(setup);
-                return (
-                  <li
-                    key={setup.id}
-                    className={`grid grid-cols-[20px_130px_1fr_100px] items-center gap-3 px-2 py-2.5 sm:grid-cols-[20px_150px_46px_1fr_54px_46px_minmax(150px,1fr)] ${
-                      qualified ? '' : 'opacity-60'
-                    }`}
-                  >
-                    <span className="num text-[11px] text-gray-500">{rank}</span>
-                    <span>
-                      <Link
-                        to={`/ticker/${setup.symbol}`}
-                        className="block font-medium text-blue-300 transition-colors hover:text-blue-200"
-                      >
-                        {setup.symbol}
-                      </Link>
-                      {tickerNames.get(setup.symbol.toUpperCase()) && (
-                        <span className="block max-w-[130px] truncate text-[10.5px] text-gray-500">
-                          {tickerNames.get(setup.symbol.toUpperCase())}
+        <Section title="Radar" hint="ranked by strategy score">
+          {trades.isLoading && <SkeletonTable rows={5} cols={5} />}
+          {trades.data && radar.qualified.length === 0 && radar.below.length === 0 && (
+            <Callout variant="empty">No live setups right now.</Callout>
+          )}
+          {(radar.qualified.length > 0 || radar.below.length > 0) && (
+            <div className="glass px-4 py-2">
+              {/* Qualified fingerprints — same axes, shapes compare at a glance */}
+              {fingerprints.length > 0 && (
+                <div className="flex flex-wrap items-end gap-4 border-b border-white/[0.06] px-2 pb-3 pt-1.5">
+                  {fingerprints.map((f) => (
+                    <figure key={f.symbol} className="text-center">
+                      <RadarChart axes={f.axes} size={82} labels={false} />
+                      <figcaption className="-mt-1">
+                        <Link to={`/ticker/${f.symbol}`} className="block text-[13px] font-semibold text-gray-200 hover:text-blue-200">
+                          {f.symbol}
+                        </Link>
+                        <span className={`num text-[9px] uppercase tracking-[0.14em] ${
+                          f.rank === 1 ? 'text-[#ff6a45]' : 'text-gray-500'
+                        }`}>
+                          {f.rank === 1 ? 'top pick' : `rank ${f.rank}`}
                         </span>
-                      )}
-                    </span>
-                    <span className="hidden sm:block"><DirectionTag direction={setup.direction} /></span>
-                    <span className="hidden items-center gap-2 sm:flex">
-                      <span className="h-1 flex-1 overflow-hidden rounded-full bg-white/[0.07]">
-                        <span
-                          className="block h-full rounded-full"
-                          style={{
-                            width: `${Math.round(setup.momentum_percentile ?? 0)}%`,
-                            background: qualified ? 'var(--up)' : 'var(--ink-3)',
-                          }}
-                        />
-                      </span>
-                      <span className="num text-[10px] text-gray-500">
-                        {setup.momentum_percentile != null ? `${Math.round(setup.momentum_percentile)}%ile` : '—'}
-                      </span>
-                    </span>
-                    <span className="num hidden text-right text-xs text-gray-400 sm:block">
-                      {setup.rr_ratio.toFixed(1)}:1
-                    </span>
-                    <span className="num hidden text-right text-xs text-gray-400 sm:block">
-                      {prob != null ? `${Math.round(prob)}%` : '—'}
-                    </span>
-                    <span className={`text-right text-[11.5px] ${qualified ? 'text-blue-300' : 'text-gray-500'}`}>
-                      {qualified ? '✓ clears the gate' : reason}
-                    </span>
-                  </li>
-                );
-              })}
-            </ul>
-            <div className="flex justify-end border-t border-white/[0.04] px-2 py-2.5">
-              <Link to="/signals" className="text-xs font-medium text-blue-300 transition-colors hover:text-blue-200">
-                All setups →
-              </Link>
+                      </figcaption>
+                    </figure>
+                  ))}
+                  <p className="num mb-2 ml-auto max-w-[170px] text-right text-[10px] leading-relaxed text-gray-500">
+                    qualified fingerprints · hover a corner for scores
+                  </p>
+                </div>
+              )}
+
+              {/* Qualified rows — the actionable list */}
+              {radar.qualified.length > 0 ? (
+                <ul className="divide-y divide-white/[0.04]">
+                  {radar.qualified.map((row) => (
+                    <RadarSetupRow key={row.setup.id} {...row} name={tickerNames.get(row.setup.symbol.toUpperCase())} />
+                  ))}
+                </ul>
+              ) : (
+                <p className="px-2 py-2.5 text-xs text-gray-500">
+                  None clear the gate today — the closest candidates are below.
+                </p>
+              )}
+
+              {/* Below the gate, collapsed by default when there are qualified setups */}
+              {radar.below.length > 0 && (
+                <>
+                  <button
+                    onClick={() => setBelowChoice(!showBelow)}
+                    aria-expanded={showBelow}
+                    className="flex w-full items-center gap-2 border-t border-white/[0.06] px-2 py-2.5 text-left text-xs text-gray-500 transition-colors hover:text-gray-300"
+                  >
+                    <span className={`text-[9px] transition-transform ${showBelow ? 'rotate-90' : ''}`} aria-hidden="true">▶</span>
+                    {radar.below.length} below the gate — why each doesn't qualify
+                  </button>
+                  {showBelow && (
+                    <ul className="divide-y divide-white/[0.04] border-t border-white/[0.04]">
+                      {radar.below.map((row) => (
+                        <RadarSetupRow key={row.setup.id} {...row} name={tickerNames.get(row.setup.symbol.toUpperCase())} />
+                      ))}
+                    </ul>
+                  )}
+                </>
+              )}
+
+              <div className="flex justify-end border-t border-white/[0.04] px-2 py-2.5">
+                <Link to="/signals" className="text-xs font-medium text-blue-300 transition-colors hover:text-blue-200">
+                  All setups →
+                </Link>
+              </div>
             </div>
-          </div>
-        )}
-      </Section>
+          )}
+        </Section>
+      </div>
 
       {/* Watchlist — compact chips, drill into any ticker */}
       <Section title="My Watchlist" hint="today's move">
diff --git a/frontend/tsconfig.tsbuildinfo b/frontend/tsconfig.tsbuildinfo
index 6668a6f..7db8ba3 100644
--- a/frontend/tsconfig.tsbuildinfo
+++ b/frontend/tsconfig.tsbuildinfo
@@ -1 +1 @@
-{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/api/activation.ts","./src/api/admin.ts","./src/api/auth.ts","./src/api/client.ts","./src/api/fundamentals.ts","./src/api/health.ts","./src/api/indicators.ts","./src/api/ingestion.ts","./src/api/jobs.ts","./src/api/market.ts","./src/api/ohlcv.ts","./src/api/papertrades.ts","./src/api/performance.ts","./src/api/regime.ts","./src/api/scores.ts","./src/api/sentiment.ts","./src/api/sr-levels.ts","./src/api/tickers.ts","./src/api/trades.ts","./src/api/watchlist.ts","./src/components/admin/activationsettings.tsx","./src/components/admin/alertsettings.tsx","./src/components/admin/datacleanup.tsx","./src/components/admin/exitpolicysettings.tsx","./src/components/admin/jobcontrols.tsx","./src/components/admin/pipelinereadinesspanel.tsx","./src/components/admin/recommendationsettings.tsx","./src/components/admin/schedulesettings.tsx","./src/components/admin/sentimentprovidersettings.tsx","./src/components/admin/settingsform.tsx","./src/components/admin/tickermanagement.tsx","./src/components/admin/tickeruniversebootstrap.tsx","./src/components/admin/usertable.tsx","./src/components/auth/protectedroute.tsx","./src/components/charts/candlestickchart.tsx","./src/components/charts/horizon.tsx","./src/components/dashboard/opentradespanel.tsx","./src/components/layout/appshell.tsx","./src/components/layout/mobilenav.tsx","./src/components/layout/sidebar.tsx","./src/components/layout/tickersearch.tsx","./src/components/rankings/rankingstable.tsx","./src/components/rankings/weightsform.tsx","./src/components/regime/regimequadrant.tsx","./src/components/regime/scorehistorychart.tsx","./src/components/scanner/tradetable.tsx","./src/components/signals/backtestpanel.tsx","./src/components/signals/mytradespanel.tsx","./src/components/signals/setupspanel.tsx","./src/components/signals/trackrecordpanel.tsx","./src/components/ticker/dimensionbreakdownpanel.tsx","./src/components/ticker/fundamentalspanel.tsx","./src/components/ticker/indicatorselector.tsx","./src/components/ticker/recommendationpanel.tsx","./src/components/ticker/sroverlay.tsx","./src/components/ticker/sentimentpanel.tsx","./src/components/ticker/standingmatrix.tsx","./src/components/ui/badge.tsx","./src/components/ui/button.tsx","./src/components/ui/callout.tsx","./src/components/ui/confirmdialog.tsx","./src/components/ui/disclosure.tsx","./src/components/ui/dropdown.tsx","./src/components/ui/field.tsx","./src/components/ui/pageheader.tsx","./src/components/ui/scorecard.tsx","./src/components/ui/section.tsx","./src/components/ui/skeleton.tsx","./src/components/ui/tabs.tsx","./src/components/ui/toast.tsx","./src/components/watchlist/addtickerform.tsx","./src/components/watchlist/watchlisttable.tsx","./src/hooks/useactivation.ts","./src/hooks/useadmin.ts","./src/hooks/useauth.ts","./src/hooks/usefetchsymboldata.ts","./src/hooks/usemarketregime.ts","./src/hooks/usepapertrades.ts","./src/hooks/useperformance.ts","./src/hooks/userisksettings.ts","./src/hooks/usescores.ts","./src/hooks/usetickerdetail.ts","./src/hooks/usetickers.ts","./src/hooks/usetrades.ts","./src/hooks/usewatchlist.ts","./src/lib/format.ts","./src/lib/ingestionstatus.ts","./src/lib/papertrade.ts","./src/lib/position.ts","./src/lib/qualification.ts","./src/lib/recommendation.ts","./src/lib/regime.ts","./src/lib/types.ts","./src/pages/adminpage.tsx","./src/pages/dashboardpage.tsx","./src/pages/designhorizonpage.tsx","./src/pages/designmockupspage.tsx","./src/pages/designorbitpage.tsx","./src/pages/loginpage.tsx","./src/pages/marketpage.tsx","./src/pages/regimepage.tsx","./src/pages/registerpage.tsx","./src/pages/signalspage.tsx","./src/pages/tickerdetailpage.tsx","./src/stores/authstore.ts"],"version":"5.6.3"}
\ No newline at end of file
+{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/api/activation.ts","./src/api/admin.ts","./src/api/auth.ts","./src/api/client.ts","./src/api/fundamentals.ts","./src/api/health.ts","./src/api/indicators.ts","./src/api/ingestion.ts","./src/api/jobs.ts","./src/api/market.ts","./src/api/ohlcv.ts","./src/api/papertrades.ts","./src/api/performance.ts","./src/api/regime.ts","./src/api/scores.ts","./src/api/sentiment.ts","./src/api/sr-levels.ts","./src/api/tickers.ts","./src/api/trades.ts","./src/api/watchlist.ts","./src/components/admin/activationsettings.tsx","./src/components/admin/alertsettings.tsx","./src/components/admin/datacleanup.tsx","./src/components/admin/exitpolicysettings.tsx","./src/components/admin/jobcontrols.tsx","./src/components/admin/pipelinereadinesspanel.tsx","./src/components/admin/recommendationsettings.tsx","./src/components/admin/schedulesettings.tsx","./src/components/admin/sentimentprovidersettings.tsx","./src/components/admin/settingsform.tsx","./src/components/admin/tickermanagement.tsx","./src/components/admin/tickeruniversebootstrap.tsx","./src/components/admin/usertable.tsx","./src/components/auth/protectedroute.tsx","./src/components/charts/candlestickchart.tsx","./src/components/charts/horizon.tsx","./src/components/dashboard/opentradespanel.tsx","./src/components/layout/appshell.tsx","./src/components/layout/mobilenav.tsx","./src/components/layout/tickersearch.tsx","./src/components/layout/topbar.tsx","./src/components/rankings/rankingstable.tsx","./src/components/rankings/weightsform.tsx","./src/components/regime/regimequadrant.tsx","./src/components/regime/scorehistorychart.tsx","./src/components/scanner/tradetable.tsx","./src/components/signals/backtestpanel.tsx","./src/components/signals/mytradespanel.tsx","./src/components/signals/setupspanel.tsx","./src/components/signals/trackrecordpanel.tsx","./src/components/ticker/dimensionbreakdownpanel.tsx","./src/components/ticker/fundamentalspanel.tsx","./src/components/ticker/indicatorselector.tsx","./src/components/ticker/recommendationpanel.tsx","./src/components/ticker/sroverlay.tsx","./src/components/ticker/sentimentpanel.tsx","./src/components/ticker/standingmatrix.tsx","./src/components/ui/badge.tsx","./src/components/ui/button.tsx","./src/components/ui/callout.tsx","./src/components/ui/confirmdialog.tsx","./src/components/ui/disclosure.tsx","./src/components/ui/dropdown.tsx","./src/components/ui/field.tsx","./src/components/ui/pageheader.tsx","./src/components/ui/scorecard.tsx","./src/components/ui/section.tsx","./src/components/ui/skeleton.tsx","./src/components/ui/tabs.tsx","./src/components/ui/toast.tsx","./src/components/watchlist/addtickerform.tsx","./src/components/watchlist/watchlisttable.tsx","./src/hooks/useactivation.ts","./src/hooks/useadmin.ts","./src/hooks/useauth.ts","./src/hooks/usefetchsymboldata.ts","./src/hooks/usemarketregime.ts","./src/hooks/usepapertrades.ts","./src/hooks/useperformance.ts","./src/hooks/userisksettings.ts","./src/hooks/usescores.ts","./src/hooks/usetickerdetail.ts","./src/hooks/usetickers.ts","./src/hooks/usetrades.ts","./src/hooks/usewatchlist.ts","./src/lib/format.ts","./src/lib/ingestionstatus.ts","./src/lib/papertrade.ts","./src/lib/position.ts","./src/lib/qualification.ts","./src/lib/recommendation.ts","./src/lib/regime.ts","./src/lib/types.ts","./src/pages/adminpage.tsx","./src/pages/dashboardpage.tsx","./src/pages/designhorizonpage.tsx","./src/pages/designmockupspage.tsx","./src/pages/designorbitpage.tsx","./src/pages/loginpage.tsx","./src/pages/marketpage.tsx","./src/pages/regimepage.tsx","./src/pages/registerpage.tsx","./src/pages/signalspage.tsx","./src/pages/tickerdetailpage.tsx","./src/stores/authstore.ts"],"version":"5.6.3"}
\ No newline at end of file