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