Redesign: phosphor-terminal identity and simplified 4-page structure

Information architecture (6 nav destinations -> 4):
- New Overview home: metric strip (live setups, high confidence,
  hit rate, expectancy), top-5 setups, watchlist pulse
- Market = Watchlist + Rankings merged as tabs; scoring weights
  moved into a collapsible disclosure
- Signals = Scanner + Performance merged as tabs (Setups | Track
  Record) with actions inside the panels
- Legacy routes redirect (/watchlist, /rankings, /scanner,
  /performance)

Visual identity:
- Warm ash-green dark palette replaces cold navy; citron lime
  accent replaces blue (Tailwind gray/blue remapped at config
  level so all components reskin)
- Primary buttons: lime with ink text; long/short stays
  emerald/red
- Typography: Bricolage Grotesque display, Instrument Sans body,
  IBM Plex Mono for all numerals incl. chart canvas labels
- Atmosphere: graph-paper grid + citron glow + film grain;
  pulsing brand dot; mono-numbered nav

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

frontend/src/components/admin/SettingsForm.tsx

@@ -43,7 +43,7 @@ export function SettingsForm() {
               type="button"
               onClick={() => handleToggleRegistration(setting.value)}
               disabled={updateSetting.isPending}
-              className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-[#0a0e1a] disabled:opacity-50 ${
+              className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-[#0e120f] disabled:opacity-50 ${
                 setting.value === 'true' ? 'bg-gradient-to-r from-blue-600 to-sky-500' : 'bg-white/[0.1]'
               }`}
               role="switch"

frontend/src/components/auth/ProtectedRoute.tsx

@@ -14,7 +14,7 @@ export default function ProtectedRoute({ requireAdmin }: ProtectedRouteProps) {
   }
 
   if (requireAdmin && role !== 'admin') {
-    return <Navigate to="/watchlist" replace />;
+    return <Navigate to="/" replace />;
   }
 
   return <Outlet />;

frontend/src/components/charts/CandlestickChart.tsx

@@ -100,7 +100,7 @@ export function CandlestickChart({ data, srLevels = [], maxSRLevels = 6, zones =
     ctx.strokeStyle = 'rgba(255,255,255,0.04)';
     ctx.lineWidth = 1;
     ctx.fillStyle = '#6b7280';
-    ctx.font = '11px Inter, system-ui, sans-serif';
+    ctx.font = '11px "IBM Plex Mono", ui-monospace, monospace';
     ctx.textAlign = 'right';
     for (let i = 0; i <= nTicks; i++) {
       const v = lo + ((hi - lo) * i) / nTicks;
@@ -141,7 +141,7 @@ export function CandlestickChart({ data, srLevels = [], maxSRLevels = 6, zones =
 
         // Label
         ctx.fillStyle = color;
-        ctx.font = '10px Inter, system-ui, sans-serif';
+        ctx.font = '10px "IBM Plex Mono", ui-monospace, monospace';
         ctx.textAlign = 'left';
         ctx.fillText(
           `${level.type[0].toUpperCase()} ${formatPrice(level.price_level)}`,
@@ -182,7 +182,7 @@ export function CandlestickChart({ data, srLevels = [], maxSRLevels = 6, zones =
       // Label with midpoint price and strength score
       const yMid = yTop + rectHeight / 2;
       ctx.fillStyle = labelColor;
-      ctx.font = '10px Inter, system-ui, sans-serif';
+      ctx.font = '10px "IBM Plex Mono", ui-monospace, monospace';
       ctx.textAlign = 'left';
       ctx.fillText(
         `${zone.type[0].toUpperCase()} ${formatPrice(zone.midpoint)} (${zone.strength})`,
@@ -238,7 +238,7 @@ export function CandlestickChart({ data, srLevels = [], maxSRLevels = 6, zones =
       ctx.setLineDash([]);
 
       // Labels on right side
-      ctx.font = '10px Inter, system-ui, sans-serif';
+      ctx.font = '10px "IBM Plex Mono", ui-monospace, monospace';
       ctx.textAlign = 'left';
       ctx.fillStyle = 'rgba(96, 165, 250, 0.9)';
       ctx.fillText(`Entry ${formatPrice(tradeSetup.entry_price)}`, ml + cw + 4, entryY + 3);
@@ -334,7 +334,7 @@ export function CandlestickChart({ data, srLevels = [], maxSRLevels = 6, zones =
     // Price label on y-axis (right side)
     const price = hi - ((cy - mt) / ch) * (hi - lo);
     const priceText = formatPrice(price);
-    ctx.font = '11px Inter, system-ui, sans-serif';
+    ctx.font = '11px "IBM Plex Mono", ui-monospace, monospace';
     const priceMetrics = ctx.measureText(priceText);
     const labelPadX = 5;
     const labelPadY = 3;

frontend/src/components/layout/MobileNav.tsx

@@ -3,10 +3,9 @@ import { NavLink } from 'react-router-dom';
 import { useAuthStore } from '../../stores/authStore';
 
 const navItems = [
-  { to: '/watchlist', label: 'Watchlist' },
-  { to: '/scanner', label: 'Scanner' },
-  { to: '/rankings', label: 'Rankings' },
-  { to: '/performance', label: 'Performance' },
+  { to: '/', label: 'Overview', end: true },
+  { to: '/market', label: 'Market', end: false },
+  { to: '/signals', label: 'Signals', end: false },
 ];
 
 export default function MobileNav() {
@@ -16,7 +15,13 @@ export default function MobileNav() {
   return (
     <div className="lg:hidden">
       <div className="flex items-center justify-between px-4 py-3 glass rounded-none border-x-0 border-t-0">
-        <h1 className="text-lg font-semibold text-gradient">Signal Dashboard</h1>
+        <div className="flex items-center gap-2">
+          <span className="relative flex h-2 w-2">
+            <span className="absolute inline-flex h-full w-full rounded-full bg-blue-400 animate-signal-pulse" />
+            <span className="relative inline-flex h-2 w-2 rounded-full bg-blue-400/60" />
+          </span>
+          <h1 className="font-display text-lg font-bold tracking-tight text-gradient">Signal</h1>
+        </div>
         <button
           onClick={() => setOpen((v) => !v)}
           className="p-2 text-gray-400 hover:text-gray-200 transition-colors duration-200"
@@ -40,15 +45,16 @@ export default function MobileNav() {
         }`}
       >
         <nav className="px-3 py-2 space-y-1">
-          {navItems.map(({ to, label }) => (
+          {navItems.map(({ to, label, end }) => (
             <NavLink
               key={to}
               to={to}
+              end={end}
               onClick={() => setOpen(false)}
               className={({ isActive }) =>
                 `block px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 ${
                   isActive
-                    ? 'bg-white/[0.08] text-white'
+                    ? 'bg-blue-400/[0.08] text-blue-300'
                     : 'text-gray-400 hover:bg-white/[0.04] hover:text-gray-200'
                 }`
               }
@@ -63,7 +69,7 @@ export default function MobileNav() {
               className={({ isActive }) =>
                 `block px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 ${
                   isActive
-                    ? 'bg-white/[0.08] text-white'
+                    ? 'bg-blue-400/[0.08] text-blue-300'
                     : 'text-gray-400 hover:bg-white/[0.04] hover:text-gray-200'
                 }`
               }

frontend/src/components/layout/Sidebar.tsx

@@ -4,12 +4,18 @@ import { useAuthStore } from '../../stores/authStore';
 import { check as healthCheck } from '../../api/health';
 
 const navItems = [
-  { to: '/watchlist', label: 'Watchlist', icon: '◈' },
-  { to: '/scanner', label: 'Scanner', icon: '⬡' },
-  { to: '/rankings', label: 'Rankings', icon: '△' },
-  { to: '/performance', label: 'Performance', icon: '◎' },
+  { to: '/', label: 'Overview', index: '01', end: true },
+  { to: '/market', label: 'Market', index: '02', end: false },
+  { to: '/signals', label: 'Signals', index: '03', 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();
 
@@ -24,41 +30,28 @@ export default function Sidebar() {
 
   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">
-      {/* Logo area */}
+      {/* Brand */}
       <div className="px-6 py-6 border-b border-white/[0.06]">
-        <h1 className="text-lg font-semibold text-gradient">Signal Dashboard</h1>
-        <p className="text-[11px] text-gray-500 mt-0.5 tracking-wide">TRADING INTELLIGENCE</p>
+        <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>
 
       <nav className="flex-1 px-3 py-5 space-y-1">
-        {navItems.map(({ to, label, icon }) => (
-          <NavLink
-            key={to}
-            to={to}
-            className={({ isActive }) =>
-              `flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 ${
-                isActive
-                  ? 'bg-white/[0.08] text-white shadow-lg shadow-blue-500/5 border border-white/[0.08]'
-                  : 'text-gray-400 hover:bg-white/[0.04] hover:text-gray-200 border border-transparent'
-              }`
-            }
-          >
-            <span className="text-base opacity-60">{icon}</span>
+        {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 }) =>
-              `flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 ${
-                isActive
-                  ? 'bg-white/[0.08] text-white shadow-lg shadow-blue-500/5 border border-white/[0.08]'
-                  : 'text-gray-400 hover:bg-white/[0.04] hover:text-gray-200 border border-transparent'
-              }`
-            }
-          >
-            <span className="text-base opacity-60">⚙</span>
+          <NavLink to="/admin" className={({ isActive }) => linkClasses(isActive)}>
+            <span className="font-mono text-[10px] tracking-widest opacity-50">04</span>
             Admin
           </NavLink>
         )}
@@ -81,7 +74,7 @@ export default function Sidebar() {
         )}
         <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"
+          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>

frontend/src/components/signals/SetupsPanel.tsx

@@ -0,0 +1,236 @@
+import { useMemo, useState } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useTrades } from '../../hooks/useTrades';
+import { TradeTable, type SortColumn, type SortDirection, computeTradeAnalysis } from '../scanner/TradeTable';
+import { SkeletonTable } from '../ui/Skeleton';
+import { useToast } from '../ui/Toast';
+import { Button } from '../ui/Button';
+import { Callout } from '../ui/Callout';
+import { Disclosure } from '../ui/Disclosure';
+import { Field, Input, Select } from '../ui/Field';
+import { triggerJob } from '../../api/admin';
+import type { TradeSetup } from '../../lib/types';
+import { RECOMMENDATION_ACTION_GLOSSARY, RECOMMENDATION_ACTION_LABELS } from '../../lib/recommendation';
+
+type DirectionFilter = 'both' | 'long' | 'short';
+type ActionFilter = 'all' | 'LONG_HIGH' | 'LONG_MODERATE' | 'SHORT_HIGH' | 'SHORT_MODERATE' | 'NEUTRAL';
+
+function filterTrades(
+  trades: TradeSetup[],
+  minRR: number,
+  direction: DirectionFilter,
+  minConfidence: number,
+  action: ActionFilter,
+): TradeSetup[] {
+  return trades.filter((t) => {
+    if (t.rr_ratio < minRR) return false;
+    if (direction !== 'both' && t.direction !== direction) return false;
+    if (minConfidence > 0 && (t.confidence_score ?? 0) < minConfidence) return false;
+    if (action !== 'all' && t.recommended_action !== action) return false;
+    return true;
+  });
+}
+
+function getComputedValue(trade: TradeSetup, column: SortColumn): number {
+  const analysis = computeTradeAnalysis(trade);
+  switch (column) {
+    case 'risk_amount': return analysis.risk_amount;
+    case 'reward_amount': return analysis.reward_amount;
+    case 'stop_pct': return analysis.stop_pct;
+    case 'target_pct': return analysis.target_pct;
+    case 'confidence_score': return trade.confidence_score ?? -1;
+    case 'best_target_probability':
+      return trade.targets?.length ? Math.max(...trade.targets.map((t) => t.probability)) : -1;
+    case 'risk_level':
+      if (trade.risk_level === 'Low') return 1;
+      if (trade.risk_level === 'Medium') return 2;
+      if (trade.risk_level === 'High') return 3;
+      return 0;
+    default: return 0;
+  }
+}
+
+function sortTrades(
+  trades: TradeSetup[],
+  column: SortColumn,
+  direction: SortDirection,
+): TradeSetup[] {
+  const sorted = [...trades].sort((a, b) => {
+    let cmp = 0;
+    switch (column) {
+      case 'symbol':
+        cmp = a.symbol.localeCompare(b.symbol);
+        break;
+      case 'direction':
+        cmp = a.direction.localeCompare(b.direction);
+        break;
+      case 'recommended_action':
+        cmp = (a.recommended_action ?? '').localeCompare(b.recommended_action ?? '');
+        break;
+      case 'detected_at':
+        cmp = new Date(a.detected_at).getTime() - new Date(b.detected_at).getTime();
+        break;
+      case 'risk_amount':
+      case 'reward_amount':
+      case 'stop_pct':
+      case 'target_pct':
+      case 'confidence_score':
+      case 'best_target_probability':
+      case 'risk_level':
+        cmp = getComputedValue(a, column) - getComputedValue(b, column);
+        break;
+      case 'entry_price':
+      case 'stop_loss':
+      case 'target':
+      case 'rr_ratio':
+      case 'composite_score':
+        cmp = a[column] - b[column];
+        break;
+    }
+    return direction === 'asc' ? cmp : -cmp;
+  });
+  return sorted;
+}
+
+export function SetupsPanel() {
+  const { data: trades, isLoading, isError, error } = useTrades();
+  const queryClient = useQueryClient();
+  const toast = useToast();
+
+  const [minRR, setMinRR] = useState(0);
+  const [directionFilter, setDirectionFilter] = useState<DirectionFilter>('both');
+  const [minConfidence, setMinConfidence] = useState(0);
+  const [actionFilter, setActionFilter] = useState<ActionFilter>('all');
+  const [sortColumn, setSortColumn] = useState<SortColumn>('rr_ratio');
+  const [sortDirection, setSortDirection] = useState<SortDirection>('desc');
+
+  const scanMutation = useMutation({
+    mutationFn: () => triggerJob('rr_scanner'),
+    onSuccess: () => {
+      toast.addToast('success', 'Scanner triggered. Results will refresh shortly.');
+      setTimeout(() => queryClient.invalidateQueries({ queryKey: ['trades'] }), 3000);
+    },
+    onError: () => {
+      toast.addToast('error', 'Failed to trigger scanner');
+    },
+  });
+
+  const handleSort = (column: SortColumn) => {
+    if (column === sortColumn) {
+      setSortDirection((prev) => (prev === 'asc' ? 'desc' : 'asc'));
+    } else {
+      setSortColumn(column);
+      setSortDirection('asc');
+    }
+  };
+
+  const processed = useMemo(() => {
+    if (!trades) return [];
+    const filtered = filterTrades(trades, minRR, directionFilter, minConfidence, actionFilter);
+    return sortTrades(filtered, sortColumn, sortDirection);
+  }, [trades, minRR, directionFilter, minConfidence, actionFilter, sortColumn, sortDirection]);
+
+  return (
+    <div className="space-y-6">
+      {/* Filter toolbar */}
+      <div className="glass-sm flex flex-wrap items-end gap-4 p-4">
+        <Field label="Min Risk:Reward" htmlFor="min-rr">
+          <div className="flex items-center gap-1">
+            <span className="text-sm text-gray-400">1 :</span>
+            <Input
+              id="min-rr"
+              type="number"
+              min={0}
+              step={0.1}
+              value={minRR}
+              onChange={(e) => setMinRR(Number(e.target.value) || 0)}
+              className="w-20"
+            />
+          </div>
+        </Field>
+        <Field label="Direction" htmlFor="direction">
+          <Select
+            id="direction"
+            value={directionFilter}
+            onChange={(e) => setDirectionFilter(e.target.value as DirectionFilter)}
+          >
+            <option value="both">Both</option>
+            <option value="long">Long</option>
+            <option value="short">Short</option>
+          </Select>
+        </Field>
+        <Field label="Min Confidence" htmlFor="min-confidence">
+          <Input
+            id="min-confidence"
+            type="number"
+            min={0}
+            max={100}
+            step={1}
+            value={minConfidence}
+            onChange={(e) => setMinConfidence(Number(e.target.value) || 0)}
+            className="w-24"
+          />
+        </Field>
+        <Field label="Recommended Action" htmlFor="action">
+          <Select
+            id="action"
+            value={actionFilter}
+            onChange={(e) => setActionFilter(e.target.value as ActionFilter)}
+          >
+            <option value="all">All</option>
+            <option value="LONG_HIGH">{RECOMMENDATION_ACTION_LABELS.LONG_HIGH}</option>
+            <option value="LONG_MODERATE">{RECOMMENDATION_ACTION_LABELS.LONG_MODERATE}</option>
+            <option value="SHORT_HIGH">{RECOMMENDATION_ACTION_LABELS.SHORT_HIGH}</option>
+            <option value="SHORT_MODERATE">{RECOMMENDATION_ACTION_LABELS.SHORT_MODERATE}</option>
+            <option value="NEUTRAL">{RECOMMENDATION_ACTION_LABELS.NEUTRAL}</option>
+          </Select>
+        </Field>
+        <div className="ml-auto">
+          <Button onClick={() => scanMutation.mutate()} loading={scanMutation.isPending}>
+            {scanMutation.isPending ? 'Scanning…' : 'Run Scanner'}
+          </Button>
+        </div>
+      </div>
+
+      <Disclosure summary="How the scanner works & action glossary">
+        <p className="mb-3 text-xs text-gray-400">
+          The scanner identifies asymmetric risk-reward trade setups by analyzing S/R levels as
+          price targets and using ATR-based stops to define risk. Click{' '}
+          <span className="font-medium text-gray-300">Run Scanner</span> to scan all tickers now,
+          or wait for the scheduled run.
+        </p>
+        <div className="grid gap-1 md:grid-cols-2">
+          {RECOMMENDATION_ACTION_GLOSSARY.map((item) => (
+            <p key={item.action} className="text-xs text-gray-300">
+              <span className="font-semibold text-blue-300">{RECOMMENDATION_ACTION_LABELS[item.action]}:</span>{' '}
+              {item.description}
+            </p>
+          ))}
+        </div>
+      </Disclosure>
+
+      {isLoading && <SkeletonTable rows={8} cols={8} />}
+
+      {isError && (
+        <Callout variant="error">
+          {error instanceof Error ? error.message : 'Failed to load trade setups'}
+        </Callout>
+      )}
+
+      {trades && processed.length === 0 && !isLoading && (
+        <Callout variant="empty">
+          No trade setups match the current filters. Try lowering the Min R:R or click Run Scanner to refresh.
+        </Callout>
+      )}
+
+      {trades && processed.length > 0 && (
+        <TradeTable
+          trades={processed}
+          sortColumn={sortColumn}
+          sortDirection={sortDirection}
+          onSort={handleSort}
+        />
+      )}
+    </div>
+  );
+}

frontend/src/components/signals/TrackRecordPanel.tsx

@@ -0,0 +1,189 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { usePerformance } from '../../hooks/usePerformance';
+import { triggerJob } from '../../api/admin';
+import { Button } from '../ui/Button';
+import { Callout } from '../ui/Callout';
+import { Disclosure } from '../ui/Disclosure';
+import { Section } from '../ui/Section';
+import { SkeletonCard } from '../ui/Skeleton';
+import { useToast } from '../ui/Toast';
+import { RECOMMENDATION_ACTION_LABELS } from '../../lib/recommendation';
+import type { OutcomeBucketStats } from '../../lib/types';
+
+function fmtR(value: number | null): string {
+  if (value === null) return '—';
+  return `${value > 0 ? '+' : ''}${value.toFixed(2)}R`;
+}
+
+function fmtPct(value: number | null): string {
+  return value === null ? '—' : `${value.toFixed(1)}%`;
+}
+
+function rColor(value: number | null): string {
+  if (value === null) return 'text-gray-400';
+  if (value > 0) return 'text-emerald-400';
+  if (value < 0) return 'text-red-400';
+  return 'text-gray-300';
+}
+
+function StatCard({ label, value, valueClass = 'text-gray-100', sub }: {
+  label: string;
+  value: string;
+  valueClass?: string;
+  sub?: string;
+}) {
+  return (
+    <div className="glass p-5">
+      <p className="section-index">{label}</p>
+      <p className={`num mt-2 text-2xl font-semibold ${valueClass}`}>{value}</p>
+      {sub && <p className="mt-1 text-xs text-gray-500">{sub}</p>}
+    </div>
+  );
+}
+
+function actionLabel(key: string): string {
+  return RECOMMENDATION_ACTION_LABELS[key as keyof typeof RECOMMENDATION_ACTION_LABELS] ?? key;
+}
+
+function BreakdownTable({ rows, labelHeader, mapLabel }: {
+  rows: Record<string, OutcomeBucketStats>;
+  labelHeader: string;
+  mapLabel?: (key: string) => string;
+}) {
+  const entries = Object.entries(rows);
+  if (entries.length === 0) {
+    return <Callout variant="empty">No evaluated setups in this breakdown yet.</Callout>;
+  }
+  return (
+    <div className="glass overflow-x-auto">
+      <table className="w-full text-sm">
+        <thead>
+          <tr className="border-b border-white/[0.06] text-left text-xs uppercase tracking-wider text-gray-500">
+            <th className="px-4 py-3">{labelHeader}</th>
+            <th className="px-4 py-3 text-right">Setups</th>
+            <th className="px-4 py-3 text-right">Wins</th>
+            <th className="px-4 py-3 text-right">Losses</th>
+            <th className="px-4 py-3 text-right">Expired</th>
+            <th className="px-4 py-3 text-right">Hit Rate</th>
+            <th className="px-4 py-3 text-right">Avg R</th>
+            <th className="px-4 py-3 text-right">Total R</th>
+          </tr>
+        </thead>
+        <tbody>
+          {entries.map(([key, stats]) => (
+            <tr key={key} className="border-b border-white/[0.04] transition-colors duration-150 hover:bg-white/[0.03]">
+              <td className="px-4 py-3 font-medium text-gray-200">{mapLabel ? mapLabel(key) : key}</td>
+              <td className="num px-4 py-3 text-right text-gray-300">{stats.total}</td>
+              <td className="num px-4 py-3 text-right text-emerald-400">{stats.wins}</td>
+              <td className="num px-4 py-3 text-right text-red-400">{stats.losses}</td>
+              <td className="num px-4 py-3 text-right text-gray-400">{stats.expired}</td>
+              <td className="num px-4 py-3 text-right text-gray-200">{fmtPct(stats.hit_rate)}</td>
+              <td className={`num px-4 py-3 text-right ${rColor(stats.avg_r)}`}>{fmtR(stats.avg_r)}</td>
+              <td className={`num px-4 py-3 text-right ${rColor(stats.total_r)}`}>{fmtR(stats.total_r)}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export function TrackRecordPanel() {
+  const { data, isLoading, isError, error } = usePerformance();
+  const queryClient = useQueryClient();
+  const toast = useToast();
+
+  const evaluateMutation = useMutation({
+    mutationFn: () => triggerJob('outcome_evaluator'),
+    onSuccess: () => {
+      toast.addToast('success', 'Outcome evaluation triggered. Stats will refresh shortly.');
+      setTimeout(() => queryClient.invalidateQueries({ queryKey: ['performance'] }), 3000);
+    },
+    onError: () => {
+      toast.addToast('error', 'Failed to trigger outcome evaluation');
+    },
+  });
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-start justify-between gap-4">
+        <Disclosure summary="How outcomes are measured">
+          <p className="text-xs text-gray-400">
+            Each setup is replayed against the daily bars after its detection: a{' '}
+            <span className="text-emerald-400">win</span> means the target was reached before the
+            stop, a <span className="text-red-400">loss</span> means the stop was hit first (bars
+            where both levels fall inside the same day count conservatively as losses). Setups with
+            neither level hit within 30 trading days <span className="text-gray-300">expire</span> at
+            0R. Avg R is the expectancy per trade: wins earn their R:R ratio, losses cost −1R — a
+            positive value means the signals have been profitable on a risk-adjusted basis. The
+            evaluator runs nightly after OHLCV collection.
+          </p>
+        </Disclosure>
+        <Button onClick={() => evaluateMutation.mutate()} loading={evaluateMutation.isPending} className="shrink-0">
+          {evaluateMutation.isPending ? 'Evaluating…' : 'Evaluate Now'}
+        </Button>
+      </div>
+
+      {isLoading && (
+        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+          <SkeletonCard /><SkeletonCard /><SkeletonCard /><SkeletonCard />
+        </div>
+      )}
+
+      {isError && (
+        <Callout variant="error">
+          {error instanceof Error ? error.message : 'Failed to load performance stats'}
+        </Callout>
+      )}
+
+      {data && data.overall.total === 0 && (
+        <Callout variant="empty">
+          No evaluated setups yet. Outcomes appear once setups are old enough for their stop or
+          target to be hit — the evaluator runs nightly, or click Evaluate Now.
+          {data.pending > 0 && ` ${data.pending} setup${data.pending === 1 ? '' : 's'} pending evaluation.`}
+        </Callout>
+      )}
+
+      {data && data.overall.total > 0 && (
+        <>
+          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+            <StatCard
+              label="Hit Rate"
+              value={fmtPct(data.overall.hit_rate)}
+              sub={`${data.overall.wins} wins / ${data.overall.losses} losses`}
+            />
+            <StatCard
+              label="Expectancy"
+              value={fmtR(data.overall.avg_r)}
+              valueClass={rColor(data.overall.avg_r)}
+              sub="average R per trade"
+            />
+            <StatCard
+              label="Total R"
+              value={fmtR(data.overall.total_r)}
+              valueClass={rColor(data.overall.total_r)}
+              sub="cumulative risk-adjusted result"
+            />
+            <StatCard
+              label="Evaluated"
+              value={String(data.overall.total)}
+              sub={`${data.pending} pending · ${data.overall.expired} expired`}
+            />
+          </div>
+
+          <Section title="By Direction">
+            <BreakdownTable rows={data.by_direction} labelHeader="Direction" />
+          </Section>
+
+          <Section title="By Recommended Action">
+            <BreakdownTable rows={data.by_action} labelHeader="Action" mapLabel={actionLabel} />
+          </Section>
+
+          <Section title="By Confidence" hint="at detection time">
+            <BreakdownTable rows={data.by_confidence} labelHeader="Confidence" />
+          </Section>
+        </>
+      )}
+    </div>
+  );
+}

frontend/src/components/ui/Badge.tsx

@@ -1,6 +1,6 @@
 const variantStyles: Record<string, string> = {
   auto: 'bg-blue-500/15 text-blue-400 border-blue-500/20',
-  manual: 'bg-sky-500/15 text-sky-400 border-sky-500/20',
+  manual: 'bg-amber-500/15 text-amber-400 border-amber-500/20',
   default: 'bg-white/[0.06] text-gray-400 border-white/[0.08]',
 };
 

frontend/src/components/ui/Field.tsx

@@ -24,7 +24,7 @@ export function Input({ className = '', ...rest }: InputHTMLAttributes<HTMLInput
 
 export function Select({ className = '', children, ...rest }: SelectHTMLAttributes<HTMLSelectElement>) {
   return (
-    <select className={`input-glass px-3 py-1.5 text-sm [&>option]:bg-[#0d1322] ${className}`} {...rest}>
+    <select className={`input-glass px-3 py-1.5 text-sm [&>option]:bg-[#151911] ${className}`} {...rest}>
       {children}
     </select>
   );