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>
2026-06-12 14:42:05 +02:00
parent 21ed83c56c
commit 9c6a0a72fa
20 changed files with 548 additions and 213 deletions
@@ -0,0 +1,217 @@
+import { useMemo } from 'react';
+import { Link } from 'react-router-dom';
+import { useTrades } from '../hooks/useTrades';
+import { useWatchlist } from '../hooks/useWatchlist';
+import { usePerformance } from '../hooks/usePerformance';
+import { Callout } from '../components/ui/Callout';
+import { Section } from '../components/ui/Section';
+import { SkeletonCard, SkeletonTable } from '../components/ui/Skeleton';
+import { formatPrice } from '../lib/format';
+import { recommendationActionLabel } from '../lib/recommendation';
+import type { TradeSetup } from '../lib/types';
+
+function fmtR(value: number | null): string {
+  if (value === null) return '—';
+  return `${value > 0 ? '+' : ''}${value.toFixed(2)}R`;
+}
+
+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 Metric({ label, value, sub, valueClass = 'text-gray-100' }: {
+  label: string;
+  value: string;
+  sub?: string;
+  valueClass?: string;
+}) {
+  return (
+    <div className="glass glass-hover p-5">
+      <p className="section-index">{label}</p>
+      <p className={`num mt-2 text-3xl font-semibold ${valueClass}`}>{value}</p>
+      {sub && <p className="mt-1 text-xs text-gray-500">{sub}</p>}
+    </div>
+  );
+}
+
+function DirectionTag({ direction }: { direction: string }) {
+  const isLong = direction === 'long';
+  return (
+    <span className={`num inline-block rounded px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wider ${
+      isLong ? 'bg-emerald-500/15 text-emerald-400' : 'bg-red-500/15 text-red-400'
+    }`}>
+      {direction}
+    </span>
+  );
+}
+
+export default function DashboardPage() {
+  const trades = useTrades();
+  const watchlist = useWatchlist();
+  const performance = usePerformance();
+
+  const topSetups: TradeSetup[] = useMemo(
+    () => (trades.data ?? []).slice(0, 5),
+    [trades.data],
+  );
+
+  const highConfidenceCount = useMemo(
+    () => (trades.data ?? []).filter((t) => (t.confidence_score ?? 0) >= 70).length,
+    [trades.data],
+  );
+
+  const topWatchlist = useMemo(
+    () =>
+      [...(watchlist.data ?? [])]
+        .sort((a, b) => (b.composite_score ?? -1) - (a.composite_score ?? -1))
+        .slice(0, 6),
+    [watchlist.data],
+  );
+
+  const today = new Date().toLocaleDateString('en-US', {
+    weekday: 'long', month: 'long', day: 'numeric',
+  });
+
+  const stats = performance.data?.overall;
+
+  return (
+    <div className="space-y-8 animate-slide-up">
+      {/* Hero */}
+      <div>
+        <p className="num text-xs uppercase tracking-[0.22em] text-gray-500">{today}</p>
+        <h1 className="font-display mt-1 text-4xl font-bold tracking-tight text-gray-100">
+          Market overview
+        </h1>
+      </div>
+
+      {/* Metric strip */}
+      {(trades.isLoading || performance.isLoading) ? (
+        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+          <SkeletonCard /><SkeletonCard /><SkeletonCard /><SkeletonCard />
+        </div>
+      ) : (
+        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+          <Metric
+            label="Live Setups"
+            value={String(trades.data?.length ?? 0)}
+            sub="latest per ticker & direction"
+          />
+          <Metric
+            label="High Confidence"
+            value={String(highConfidenceCount)}
+            sub="confidence ≥ 70%"
+            valueClass={highConfidenceCount > 0 ? 'text-blue-300' : 'text-gray-100'}
+          />
+          <Metric
+            label="Hit Rate"
+            value={stats?.hit_rate != null ? `${stats.hit_rate.toFixed(1)}%` : '—'}
+            sub={stats ? `${stats.wins}W / ${stats.losses}L evaluated` : 'no outcomes yet'}
+          />
+          <Metric
+            label="Expectancy"
+            value={fmtR(stats?.avg_r ?? null)}
+            valueClass={rColor(stats?.avg_r ?? null)}
+            sub="average R per trade"
+          />
+        </div>
+      )}
+
+      <div className="grid gap-8 xl:grid-cols-5">
+        {/* Top setups */}
+        <div className="xl:col-span-3">
+          <Section title="Top Setups" hint="by confidence">
+            {trades.isLoading && <SkeletonTable rows={5} cols={5} />}
+            {trades.isError && <Callout variant="error">Failed to load setups</Callout>}
+            {trades.data && topSetups.length === 0 && (
+              <Callout variant="empty">No active setups. Run the scanner from the Signals page.</Callout>
+            )}
+            {topSetups.length > 0 && (
+              <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">Ticker</th>
+                      <th className="px-4 py-3">Dir</th>
+                      <th className="px-4 py-3 text-right">Entry</th>
+                      <th className="px-4 py-3 text-right">R:R</th>
+                      <th className="px-4 py-3 text-right">Conf.</th>
+                      <th className="hidden px-4 py-3 md:table-cell">Action</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {topSetups.map((setup) => (
+                      <tr key={setup.id} className="border-b border-white/[0.04] transition-colors duration-150 hover:bg-white/[0.03]">
+                        <td className="px-4 py-3">
+                          <Link to={`/ticker/${setup.symbol}`} className="font-medium text-blue-300 hover:text-blue-200 transition-colors">
+                            {setup.symbol}
+                          </Link>
+                        </td>
+                        <td className="px-4 py-3"><DirectionTag direction={setup.direction} /></td>
+                        <td className="num px-4 py-3 text-right text-gray-200">{formatPrice(setup.entry_price)}</td>
+                        <td className="num px-4 py-3 text-right text-gray-200">{setup.rr_ratio.toFixed(1)}:1</td>
+                        <td className="num px-4 py-3 text-right text-gray-200">
+                          {setup.confidence_score != null ? `${Math.round(setup.confidence_score)}%` : '—'}
+                        </td>
+                        <td className="hidden px-4 py-3 text-xs text-gray-400 md:table-cell">
+                          {recommendationActionLabel(setup.recommended_action)}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+                <div className="border-t border-white/[0.04] px-4 py-2.5">
+                  <Link to="/signals" className="text-xs font-medium text-blue-300 hover:text-blue-200 transition-colors">
+                    All setups →
+                  </Link>
+                </div>
+              </div>
+            )}
+          </Section>
+        </div>
+
+        {/* Watchlist pulse */}
+        <div className="xl:col-span-2">
+          <Section title="Watchlist Pulse" hint="top by score">
+            {watchlist.isLoading && <SkeletonTable rows={6} cols={3} />}
+            {watchlist.isError && <Callout variant="error">Failed to load watchlist</Callout>}
+            {watchlist.data && topWatchlist.length === 0 && (
+              <Callout variant="empty">Watchlist is empty — add tickers on the Market page.</Callout>
+            )}
+            {topWatchlist.length > 0 && (
+              <div className="glass overflow-hidden">
+                <ul className="divide-y divide-white/[0.04]">
+                  {topWatchlist.map((entry) => (
+                    <li key={entry.symbol}>
+                      <Link
+                        to={`/ticker/${entry.symbol}`}
+                        className="flex items-center justify-between px-4 py-3 transition-colors duration-150 hover:bg-white/[0.03]"
+                      >
+                        <span className="font-medium text-gray-200">{entry.symbol}</span>
+                        <span className="flex items-center gap-4">
+                          {entry.rr_ratio != null && (
+                            <span className="num text-xs text-gray-500">{entry.rr_ratio.toFixed(1)}:1</span>
+                          )}
+                          <span className="num text-sm font-semibold text-blue-300">
+                            {entry.composite_score != null ? entry.composite_score.toFixed(0) : '—'}
+                          </span>
+                        </span>
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+                <div className="border-t border-white/[0.04] px-4 py-2.5">
+                  <Link to="/market" className="text-xs font-medium text-blue-300 hover:text-blue-200 transition-colors">
+                    Full watchlist →
+                  </Link>
+                </div>
+              </div>
+            )}
+          </Section>
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -15,7 +15,7 @@ export default function LoginPage() {
    login.mutate(
      { username, password },
      {
-        onSuccess: () => navigate('/watchlist'),
+        onSuccess: () => navigate('/'),
        onError: (err) => setError(err instanceof Error ? err.message : 'Login failed'),
      },
    );
@@ -25,7 +25,7 @@ export default function LoginPage() {
    <div className="min-h-screen flex items-center justify-center px-4 relative overflow-hidden">
      {/* Ambient glow orbs */}
      <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-blue-500/10 rounded-full blur-[120px] animate-glow-pulse" />
-      <div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-sky-500/10 rounded-full blur-[100px] animate-glow-pulse" style={{ animationDelay: '1.5s' }} />
+      <div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-emerald-500/10 rounded-full blur-[100px] animate-glow-pulse" style={{ animationDelay: '1.5s' }} />

      <div className="w-full max-w-sm space-y-8 animate-slide-up">
        <div className="text-center">
@@ -1,13 +1,22 @@
 import { useMemo, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
 import { useWatchlist } from '../hooks/useWatchlist';
+import { useRankings } from '../hooks/useScores';
 import { WatchlistTable } from '../components/watchlist/WatchlistTable';
 import { AddTickerForm } from '../components/watchlist/AddTickerForm';
+import { RankingsTable } from '../components/rankings/RankingsTable';
+import { WeightsForm } from '../components/rankings/WeightsForm';
 import { Callout } from '../components/ui/Callout';
+import { Disclosure } from '../components/ui/Disclosure';
 import { Select } from '../components/ui/Field';
 import { PageHeader } from '../components/ui/PageHeader';
 import { SkeletonTable } from '../components/ui/Skeleton';
+import { Tabs } from '../components/ui/Tabs';
 import type { WatchlistEntry } from '../lib/types';

+const tabs = ['Watchlist', 'Rankings'] as const;
+type Tab = (typeof tabs)[number];
+
 type SortMode = 'name_asc' | 'name_desc' | 'score_desc' | 'score_asc';

 function sortEntries(entries: WatchlistEntry[], mode: SortMode): WatchlistEntry[] {
@@ -42,7 +51,7 @@ function sortEntries(entries: WatchlistEntry[], mode: SortMode): WatchlistEntry[
  return sorted;
 }

-export default function WatchlistPage() {
+function WatchlistPanel() {
  const { data, isLoading, isError, error } = useWatchlist();
  const [sortMode, setSortMode] = useState<SortMode>('score_desc');

@@ -52,16 +61,15 @@ export default function WatchlistPage() {
  );

  return (
-    <div className="space-y-6 animate-slide-up">
-      <PageHeader title="Watchlist" subtitle="Track your favorite tickers" actions={<AddTickerForm />} />
-
+    <div className="space-y-3">
      {isLoading && <SkeletonTable rows={6} cols={8} />}

      {isError && <Callout variant="error">{error?.message || 'Failed to load watchlist'}</Callout>}

      {data && (
-        <div className="space-y-3">
-          <div className="flex justify-end">
+        <>
+          <div className="flex items-center justify-between gap-4">
+            <AddTickerForm />
            <label className="flex items-center gap-2 text-xs text-gray-400">
              <span>Sort by</span>
              <Select
@@ -78,8 +86,55 @@ export default function WatchlistPage() {
          </div>

          <WatchlistTable entries={sortedEntries} />
-        </div>
+        </>
      )}
    </div>
  );
 }
+
+function RankingsPanel() {
+  const { data, isLoading, isError, error } = useRankings();
+
+  return (
+    <div className="space-y-4">
+      {isLoading && <SkeletonTable rows={8} cols={6} />}
+
+      {isError && (
+        <Callout variant="error">Failed to load rankings: {(error as Error).message}</Callout>
+      )}
+
+      {data && (
+        <>
+          <Disclosure summary="Tune scoring weights">
+            <WeightsForm weights={data.weights} />
+          </Disclosure>
+          <RankingsTable rankings={data.rankings} />
+        </>
+      )}
+    </div>
+  );
+}
+
+export default function MarketPage() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const activeTab: Tab = searchParams.get('tab') === 'rankings' ? 'Rankings' : 'Watchlist';
+
+  const setTab = (tab: Tab) => {
+    setSearchParams(tab === 'Rankings' ? { tab: 'rankings' } : {}, { replace: true });
+  };
+
+  return (
+    <div className="space-y-6 animate-slide-up">
+      <PageHeader
+        title="Market"
+        subtitle="Your watchlist and the full composite-score leaderboard"
+      />
+
+      <Tabs tabs={tabs} active={activeTab} onChange={setTab} />
+
+      <div className="animate-fade-in" key={activeTab}>
+        {activeTab === 'Watchlist' ? <WatchlistPanel /> : <RankingsPanel />}
+      </div>
+    </div>
+  );
+}
@@ -1,195 +0,0 @@
-import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { usePerformance } from '../hooks/usePerformance';
-import { triggerJob } from '../api/admin';
-import { Button } from '../components/ui/Button';
-import { Callout } from '../components/ui/Callout';
-import { Disclosure } from '../components/ui/Disclosure';
-import { PageHeader } from '../components/ui/PageHeader';
-import { Section } from '../components/ui/Section';
-import { SkeletonCard } from '../components/ui/Skeleton';
-import { useToast } from '../components/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="text-xs uppercase tracking-widest text-gray-500">{label}</p>
-      <p className={`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="px-4 py-3 text-right text-gray-300">{stats.total}</td>
-              <td className="px-4 py-3 text-right text-emerald-400">{stats.wins}</td>
-              <td className="px-4 py-3 text-right text-red-400">{stats.losses}</td>
-              <td className="px-4 py-3 text-right text-gray-400">{stats.expired}</td>
-              <td className="px-4 py-3 text-right text-gray-200">{fmtPct(stats.hit_rate)}</td>
-              <td className={`px-4 py-3 text-right font-mono ${rColor(stats.avg_r)}`}>{fmtR(stats.avg_r)}</td>
-              <td className={`px-4 py-3 text-right font-mono ${rColor(stats.total_r)}`}>{fmtR(stats.total_r)}</td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  );
-}
-
-export default function PerformancePage() {
-  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 animate-slide-up">
-      <PageHeader
-        title="Performance"
-        subtitle="Do the signals actually win? Outcomes of past trade setups"
-        actions={
-          <Button onClick={() => evaluateMutation.mutate()} loading={evaluateMutation.isPending}>
-            {evaluateMutation.isPending ? 'Evaluating…' : 'Evaluate Now'}
-          </Button>
-        }
-      />
-
-      <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>
-
-      {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>
-  );
-}
@@ -1,29 +0,0 @@
-import { useRankings } from '../hooks/useScores';
-import { RankingsTable } from '../components/rankings/RankingsTable';
-import { WeightsForm } from '../components/rankings/WeightsForm';
-import { Callout } from '../components/ui/Callout';
-import { PageHeader } from '../components/ui/PageHeader';
-import { SkeletonTable } from '../components/ui/Skeleton';
-
-export default function RankingsPage() {
-  const { data, isLoading, isError, error } = useRankings();
-
-  return (
-    <div className="space-y-6 animate-slide-up">
-      <PageHeader title="Rankings" subtitle="Composite scoring leaderboard" />
-
-      {isLoading && <SkeletonTable rows={8} cols={6} />}
-
-      {isError && (
-        <Callout variant="error">Failed to load rankings: {(error as Error).message}</Callout>
-      )}
-
-      {data && (
-        <>
-          <WeightsForm weights={data.weights} />
-          <RankingsTable rankings={data.rankings} />
-        </>
-      )}
-    </div>
-  );
-}
@@ -51,7 +51,7 @@ export default function RegisterPage() {

  return (
    <div className="min-h-screen flex items-center justify-center px-4 relative overflow-hidden">
-      <div className="absolute top-1/4 right-1/4 w-96 h-96 bg-sky-500/10 rounded-full blur-[120px] animate-glow-pulse" />
+      <div className="absolute top-1/4 right-1/4 w-96 h-96 bg-emerald-500/10 rounded-full blur-[120px] animate-glow-pulse" />
      <div className="absolute bottom-1/3 left-1/3 w-80 h-80 bg-blue-500/10 rounded-full blur-[100px] animate-glow-pulse" style={{ animationDelay: '1.5s' }} />

      <div className="w-full max-w-sm space-y-8 animate-slide-up">
@@ -1,243 +0,0 @@
-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 '../components/scanner/TradeTable';
-import { SkeletonTable } from '../components/ui/Skeleton';
-import { useToast } from '../components/ui/Toast';
-import { Button } from '../components/ui/Button';
-import { Callout } from '../components/ui/Callout';
-import { Disclosure } from '../components/ui/Disclosure';
-import { Field, Input, Select } from '../components/ui/Field';
-import { PageHeader } from '../components/ui/PageHeader';
-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 default function ScannerPage() {
-  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 animate-slide-up">
-      <PageHeader
-        title="Trade Scanner"
-        subtitle="Asymmetric risk:reward setups across the ticker universe"
-        actions={
-          <Button onClick={() => scanMutation.mutate()} loading={scanMutation.isPending}>
-            {scanMutation.isPending ? 'Scanning…' : 'Run Scanner'}
-          </Button>
-        }
-      />
-
-      {/* 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>
-
-      <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>
-
-      {/* Content */}
-      {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>
-  );
-}
@@ -0,0 +1,32 @@
+import { useSearchParams } from 'react-router-dom';
+import { PageHeader } from '../components/ui/PageHeader';
+import { Tabs } from '../components/ui/Tabs';
+import { SetupsPanel } from '../components/signals/SetupsPanel';
+import { TrackRecordPanel } from '../components/signals/TrackRecordPanel';
+
+const tabs = ['Setups', 'Track Record'] as const;
+type Tab = (typeof tabs)[number];
+
+export default function SignalsPage() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const activeTab: Tab = searchParams.get('tab') === 'track' ? 'Track Record' : 'Setups';
+
+  const setTab = (tab: Tab) => {
+    setSearchParams(tab === 'Track Record' ? { tab: 'track' } : {}, { replace: true });
+  };
+
+  return (
+    <div className="space-y-6 animate-slide-up">
+      <PageHeader
+        title="Signals"
+        subtitle="Detected trade setups and how past signals actually performed"
+      />
+
+      <Tabs tabs={tabs} active={activeTab} onChange={setTab} />
+
+      <div className="animate-fade-in" key={activeTab}>
+        {activeTab === 'Setups' ? <SetupsPanel /> : <TrackRecordPanel />}
+      </div>
+    </div>
+  );
+}