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

@@ -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>
   );

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`

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>
   );
 }

frontend/src/components/layout/Sidebar.tsx

@@ -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>
-  );
-}

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>
+  );
+}

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,