feat(dashboard): 3 components for the strategy page

TickerScorecardTable: bridge-status badges (WOULD-TRADE/HOLDING/etc),
conviction bar, unrealised P&L, manual-close button.
BacktestRunHistory: sortable run list with return/sharpe/alpha columns,
row click selects a run for detail view.
StrategyVsBenchmarkCurve: dual lightweight-charts line (strategy blue,
SPY dashed grey) with legend.

dashboard/src/components/meetKevin/BacktestRunHistory.tsx

@@ -0,0 +1,122 @@
+import type { BacktestRun, BacktestRunStatus } from '../../types/meetKevin';
+
+const STATUS_BADGE: Record<BacktestRunStatus, { label: string; cls: string }> = {
+  running:   { label: 'Running',   cls: 'bg-blue-600/30 text-blue-300 border-blue-500/40' },
+  completed: { label: 'Completed', cls: 'bg-green-600/30 text-green-300 border-green-500/40' },
+  failed:    { label: 'Failed',    cls: 'bg-red-600/30 text-red-300 border-red-500/40' },
+};
+
+function fmt(v: number | null | undefined, suffix = '%', decimals = 2): string {
+  if (v == null) return '—';
+  return `${v >= 0 ? '+' : ''}${v.toFixed(decimals)}${suffix}`;
+}
+
+interface Props {
+  runs: BacktestRun[];
+  isLoading: boolean;
+  selectedRunUuid: string | null;
+  onSelect: (runUuid: string) => void;
+}
+
+export function BacktestRunHistory({ runs, isLoading, selectedRunUuid, onSelect }: Props) {
+  if (isLoading) {
+    return (
+      <div className="flex justify-center py-10">
+        <span className="inline-block w-6 h-6 border-2 border-blue-400/30 border-t-blue-400 rounded-full animate-spin" />
+      </div>
+    );
+  }
+
+  if (runs.length === 0) {
+    return (
+      <div className="bg-slate-800 border border-slate-700 rounded-xl p-10 text-center text-slate-400">
+        No backtest runs yet — click &ldquo;Run Backtest&rdquo; to start one.
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-slate-800 border border-slate-700 rounded-xl overflow-hidden">
+      <table className="w-full text-sm">
+        <thead className="bg-slate-900/50">
+          <tr>
+            <th className="px-5 py-3 text-left text-xs text-slate-400 uppercase tracking-wide font-semibold">
+              Started
+            </th>
+            <th className="px-5 py-3 text-left text-xs text-slate-400 uppercase tracking-wide font-semibold">
+              Status
+            </th>
+            <th className="px-5 py-3 text-left text-xs text-slate-400 uppercase tracking-wide font-semibold">
+              Return
+            </th>
+            <th className="px-5 py-3 text-left text-xs text-slate-400 uppercase tracking-wide font-semibold">
+              Sharpe
+            </th>
+            <th className="px-5 py-3 text-left text-xs text-slate-400 uppercase tracking-wide font-semibold">
+              Max DD
+            </th>
+            <th className="px-5 py-3 text-left text-xs text-slate-400 uppercase tracking-wide font-semibold">
+              Alpha
+            </th>
+            <th className="px-5 py-3 text-left text-xs text-slate-400 uppercase tracking-wide font-semibold">
+              Trades
+            </th>
+            <th className="px-5 py-3 text-left text-xs text-slate-400 uppercase tracking-wide font-semibold">
+              Source
+            </th>
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-slate-700">
+          {runs.map((run) => {
+            const badge = STATUS_BADGE[run.status];
+            const m = run.metrics_json;
+            const isSelected = run.run_uuid === selectedRunUuid;
+            return (
+              <tr
+                key={run.run_uuid}
+                onClick={() => onSelect(run.run_uuid)}
+                className={`cursor-pointer transition-colors ${
+                  isSelected
+                    ? 'bg-blue-600/10'
+                    : 'hover:bg-slate-700/30'
+                }`}
+              >
+                <td className="px-5 py-3.5 text-slate-300 font-mono text-xs">
+                  {new Date(run.started_at).toLocaleString()}
+                </td>
+                <td className="px-5 py-3.5">
+                  <span className={`px-2 py-0.5 text-xs font-semibold uppercase rounded-md border ${badge.cls}`}>
+                    {badge.label}
+                  </span>
+                  {run.error_message && (
+                    <span className="ml-2 text-xs text-red-400 truncate max-w-[180px] inline-block align-middle">
+                      {run.error_message}
+                    </span>
+                  )}
+                </td>
+                <td className={`px-5 py-3.5 font-mono ${m && m.total_return_pct >= 0 ? 'text-green-400' : 'text-red-400'}`}>
+                  {m ? fmt(m.total_return_pct) : '—'}
+                </td>
+                <td className="px-5 py-3.5 text-slate-300 font-mono">
+                  {m?.sharpe_ratio != null ? m.sharpe_ratio.toFixed(2) : '—'}
+                </td>
+                <td className="px-5 py-3.5 font-mono text-red-400">
+                  {m?.max_drawdown_pct != null ? `${m.max_drawdown_pct.toFixed(2)}%` : '—'}
+                </td>
+                <td className={`px-5 py-3.5 font-mono ${m?.alpha_vs_spy_pct != null && m.alpha_vs_spy_pct >= 0 ? 'text-green-400' : 'text-red-400'}`}>
+                  {m ? fmt(m.alpha_vs_spy_pct) : '—'}
+                </td>
+                <td className="px-5 py-3.5 text-slate-300">
+                  {m?.trade_count ?? '—'}
+                </td>
+                <td className="px-5 py-3.5 text-slate-400 text-xs capitalize">
+                  {run.trigger_source}
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}

dashboard/src/components/meetKevin/StrategyVsBenchmarkCurve.tsx

@@ -0,0 +1,108 @@
+import { useEffect, useRef } from 'react';
+import { createChart, type IChartApi, LineSeries } from 'lightweight-charts';
+import type { EquityCurvePoint } from '../../types/meetKevin';
+
+interface Props {
+  strategy: EquityCurvePoint[];
+  benchmark: EquityCurvePoint[] | null;
+  height?: number;
+}
+
+function toChartData(points: EquityCurvePoint[]) {
+  const byDay = new Map<string, number>();
+  for (const p of points) {
+    const day = p.timestamp.split('T')[0];
+    byDay.set(day, p.value);
+  }
+  return Array.from(byDay.entries())
+    .sort(([a], [b]) => a.localeCompare(b))
+    .map(([time, value]) => ({ time, value }));
+}
+
+export function StrategyVsBenchmarkCurve({ strategy, benchmark, height = 350 }: Props) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const chartRef = useRef<IChartApi | null>(null);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    const chart = createChart(containerRef.current, {
+      height,
+      layout: {
+        background: { color: '#1e293b' },
+        textColor: '#94a3b8',
+      },
+      grid: {
+        vertLines: { color: '#334155' },
+        horzLines: { color: '#334155' },
+      },
+      crosshair: { mode: 0 },
+      rightPriceScale: { borderColor: '#475569' },
+      timeScale: { borderColor: '#475569', timeVisible: true },
+    });
+
+    const strategySeries = chart.addSeries(LineSeries, {
+      color: '#3b82f6',
+      lineWidth: 2,
+      title: 'Strategy',
+      priceFormat: {
+        type: 'custom',
+        formatter: (price: number) =>
+          '$' + price.toLocaleString('en-US', { minimumFractionDigits: 2 }),
+      },
+    });
+
+    const benchmarkSeries = chart.addSeries(LineSeries, {
+      color: '#94a3b8',
+      lineWidth: 1,
+      title: 'SPY',
+      lineStyle: 1, // dashed
+      priceFormat: {
+        type: 'custom',
+        formatter: (price: number) =>
+          '$' + price.toLocaleString('en-US', { minimumFractionDigits: 2 }),
+      },
+    });
+
+    chartRef.current = chart;
+
+    if (strategy.length > 0) {
+      strategySeries.setData(toChartData(strategy) as { time: string; value: number }[]);
+    }
+    if (benchmark && benchmark.length > 0) {
+      benchmarkSeries.setData(toChartData(benchmark) as { time: string; value: number }[]);
+    }
+
+    chart.timeScale().fitContent();
+
+    const handleResize = () => {
+      if (containerRef.current) {
+        chart.applyOptions({ width: containerRef.current.clientWidth });
+      }
+    };
+    window.addEventListener('resize', handleResize);
+    handleResize();
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      chart.remove();
+      chartRef.current = null;
+    };
+  }, [height, strategy, benchmark]);
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center gap-4 text-xs text-slate-400">
+        <span className="flex items-center gap-1.5">
+          <span className="inline-block w-4 h-0.5 bg-blue-400" />
+          Strategy
+        </span>
+        <span className="flex items-center gap-1.5">
+          <span className="inline-block w-4 h-0.5 bg-slate-400 border-dashed" />
+          SPY benchmark
+        </span>
+      </div>
+      <div ref={containerRef} className="w-full rounded-lg overflow-hidden" />
+    </div>
+  );
+}

dashboard/src/components/meetKevin/TickerScorecardTable.tsx

@@ -0,0 +1,141 @@
+import type { BridgeStatus, StrategyTicker } from '../../types/meetKevin';
+import { ActionChip } from './ActionChip';
+import { ConvictionBar } from './ConvictionBar';
+
+const BRIDGE_BADGE: Record<BridgeStatus, { label: string; cls: string }> = {
+  emitted:              { label: 'WOULD-TRADE', cls: 'bg-blue-600/30 text-blue-300 border-blue-500/40' },
+  dry_run:             { label: 'WOULD-TRADE', cls: 'bg-blue-600/30 text-blue-300 border-blue-500/40' },
+  skipped_non_tradable: { label: 'NOT TRADABLE', cls: 'bg-slate-600/30 text-slate-400 border-slate-500/40' },
+  skipped_blocklist:    { label: 'BLOCKLISTED', cls: 'bg-rose-600/30 text-rose-300 border-rose-500/40' },
+  skipped_caps:         { label: 'CAP HIT', cls: 'bg-yellow-600/30 text-yellow-300 border-yellow-500/40' },
+  deferred:             { label: 'DEFERRED', cls: 'bg-slate-600/30 text-slate-400 border-slate-500/40' },
+  broker_rejected:      { label: 'REJECTED', cls: 'bg-red-600/30 text-red-300 border-red-500/40' },
+};
+
+interface Props {
+  tickers: StrategyTicker[];
+  isLoading: boolean;
+  onClose: (symbol: string) => void;
+}
+
+export function TickerScorecardTable({ tickers, isLoading, onClose }: Props) {
+  if (isLoading) {
+    return (
+      <div className="flex justify-center py-16">
+        <span className="inline-block w-8 h-8 border-2 border-blue-400/30 border-t-blue-400 rounded-full animate-spin" />
+      </div>
+    );
+  }
+
+  if (tickers.length === 0) {
+    return (
+      <div className="bg-slate-800 border border-slate-700 rounded-xl p-12 text-center text-slate-400">
+        No ticker signals yet
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-slate-800 border border-slate-700 rounded-xl overflow-hidden">
+      <table className="w-full text-sm">
+        <thead className="bg-slate-900/50">
+          <tr>
+            <th className="px-5 py-3 text-left text-xs text-slate-400 uppercase tracking-wide font-semibold">
+              Symbol
+            </th>
+            <th className="px-5 py-3 text-left text-xs text-slate-400 uppercase tracking-wide font-semibold">
+              Signal
+            </th>
+            <th className="px-5 py-3 text-left text-xs text-slate-400 uppercase tracking-wide font-semibold">
+              Conviction
+            </th>
+            <th className="px-5 py-3 text-left text-xs text-slate-400 uppercase tracking-wide font-semibold">
+              Price
+            </th>
+            <th className="px-5 py-3 text-left text-xs text-slate-400 uppercase tracking-wide font-semibold">
+              P&amp;L
+            </th>
+            <th className="px-5 py-3 text-left text-xs text-slate-400 uppercase tracking-wide font-semibold">
+              Status
+            </th>
+            <th className="px-5 py-3 text-left text-xs text-slate-400 uppercase tracking-wide font-semibold">
+              Mentions
+            </th>
+            <th className="px-5 py-3 text-left text-xs text-slate-400 uppercase tracking-wide font-semibold">
+              Last seen
+            </th>
+            <th className="px-5 py-3" />
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-slate-700">
+          {tickers.map((t) => {
+            const badge = t.bridge_status ? BRIDGE_BADGE[t.bridge_status] : null;
+            const pnl = t.unrealized_pnl_pct;
+            return (
+              <tr key={t.symbol} className="hover:bg-slate-700/30 transition-colors">
+                <td className="px-5 py-3.5">
+                  <span className="font-mono font-bold text-white">${t.symbol}</span>
+                  {t.is_held && (
+                    <span className="ml-2 px-1.5 py-0.5 text-xs bg-green-600/20 text-green-400 border border-green-500/30 rounded">
+                      HOLDING
+                    </span>
+                  )}
+                </td>
+                <td className="px-5 py-3.5">
+                  <ActionChip action={t.latest_action} />
+                </td>
+                <td className="px-5 py-3.5">
+                  <div className="flex items-center gap-2 min-w-[120px]">
+                    <div className="flex-1">
+                      <ConvictionBar value={t.latest_conviction} />
+                    </div>
+                    <span className="text-xs text-slate-400 shrink-0">
+                      {(t.latest_conviction * 100).toFixed(0)}%
+                    </span>
+                  </div>
+                </td>
+                <td className="px-5 py-3.5 text-slate-300 font-mono">
+                  {t.current_price != null
+                    ? `$${t.current_price.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
+                    : '—'}
+                </td>
+                <td className="px-5 py-3.5 font-mono">
+                  {pnl != null ? (
+                    <span className={pnl >= 0 ? 'text-green-400' : 'text-red-400'}>
+                      {pnl >= 0 ? '+' : ''}{pnl.toFixed(2)}%
+                    </span>
+                  ) : (
+                    <span className="text-slate-500">—</span>
+                  )}
+                </td>
+                <td className="px-5 py-3.5">
+                  {badge ? (
+                    <span className={`px-2 py-0.5 text-xs font-semibold uppercase rounded-md border ${badge.cls}`}>
+                      {badge.label}
+                    </span>
+                  ) : (
+                    <span className="text-slate-500">—</span>
+                  )}
+                </td>
+                <td className="px-5 py-3.5 text-slate-300">{t.mention_count}</td>
+                <td className="px-5 py-3.5 text-slate-400">
+                  {new Date(t.last_mention_at).toLocaleDateString()}
+                </td>
+                <td className="px-5 py-3.5">
+                  {t.is_held && (
+                    <button
+                      onClick={() => onClose(t.symbol)}
+                      className="px-2.5 py-1 text-xs bg-red-600/20 hover:bg-red-600/40 text-red-300 border border-red-500/30 rounded transition-colors"
+                    >
+                      Close
+                    </button>
+                  )}
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}