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