From 6636054742ca19fe47b784614e17e09b40e22e95 Mon Sep 17 00:00:00 2001
From: Viktor Barzin <me@viktorbarzin.me>
Date: Sun, 24 May 2026 00:48:27 +0000
Subject: [PATCH] feat(dashboard): /meet-kevin/strategy page wired

Strategy.tsx composes 6-up metrics header, StrategyVsBenchmarkCurve
equity chart, TickerScorecardTable and BacktestRunHistory. Selecting a
backtest run replaces the chart with that run's equity curve. Run
Backtest button fires POST and polls for completion.
App.tsx: +route /meet-kevin/strategy.
Layout.tsx: +sidebar entry 'MK Strategy' under Meet Kevin group.
---
 dashboard/src/App.tsx                      |   2 +
 dashboard/src/components/Layout.tsx        |   1 +
 dashboard/src/pages/meetKevin/Strategy.tsx | 213 +++++++++++++++++++++
 3 files changed, 216 insertions(+)
 create mode 100644 dashboard/src/pages/meetKevin/Strategy.tsx

diff --git a/dashboard/src/App.tsx b/dashboard/src/App.tsx
index 96bb67f..a98d37b 100644
--- a/dashboard/src/App.tsx
+++ b/dashboard/src/App.tsx
@@ -13,6 +13,7 @@ import MeetKevinVideos from './pages/meetKevin/Videos';
 import MeetKevinVideoDetail from './pages/meetKevin/VideoDetail';
 import MeetKevinStocks from './pages/meetKevin/Stocks';
 import MeetKevinStockDetail from './pages/meetKevin/StockDetail';
+import MeetKevinStrategy from './pages/meetKevin/Strategy';
 
 export default function App() {
   return (
@@ -41,6 +42,7 @@ export default function App() {
         <Route path="meet-kevin/videos/:id" element={<MeetKevinVideoDetail />} />
         <Route path="meet-kevin/stocks" element={<MeetKevinStocks />} />
         <Route path="meet-kevin/stocks/:symbol" element={<MeetKevinStockDetail />} />
+        <Route path="meet-kevin/strategy" element={<MeetKevinStrategy />} />
       </Route>
 
       {/* Catch-all redirect */}
diff --git a/dashboard/src/components/Layout.tsx b/dashboard/src/components/Layout.tsx
index f4fe45c..a49bc45 100644
--- a/dashboard/src/components/Layout.tsx
+++ b/dashboard/src/components/Layout.tsx
@@ -9,6 +9,7 @@ const navItems = [
   { to: '/news', label: 'News', icon: 'M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2' },
   { to: '/backtest', label: 'Backtest', icon: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z' },
   { to: '/meet-kevin', label: 'Meet Kevin', icon: 'M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z' },
+  { to: '/meet-kevin/strategy', label: 'MK Strategy', icon: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z' },
 ];
 
 export function Layout() {
diff --git a/dashboard/src/pages/meetKevin/Strategy.tsx b/dashboard/src/pages/meetKevin/Strategy.tsx
new file mode 100644
index 0000000..6ee8197
--- /dev/null
+++ b/dashboard/src/pages/meetKevin/Strategy.tsx
@@ -0,0 +1,213 @@
+import { useState } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { TickerScorecardTable } from '../../components/meetKevin/TickerScorecardTable';
+import { BacktestRunHistory } from '../../components/meetKevin/BacktestRunHistory';
+import { StrategyVsBenchmarkCurve } from '../../components/meetKevin/StrategyVsBenchmarkCurve';
+import {
+  runBacktest,
+  listBacktestRuns,
+  getBacktestRun,
+  getStrategyTickers,
+  getStrategyEquityCurve,
+  getStrategyPerformance,
+  closeKevinPosition,
+} from '../../api/meetKevinStrategy';
+import type { BacktestRunStatus } from '../../types/meetKevin';
+
+function MetricCard({ label, value, color = 'text-white' }: { label: string; value: string; color?: string }) {
+  return (
+    <div className="bg-slate-800 border border-slate-700 rounded-xl p-5">
+      <p className="text-xs text-slate-400 uppercase tracking-wide mb-1">{label}</p>
+      <p className={`text-2xl font-semibold font-mono ${color}`}>{value}</p>
+    </div>
+  );
+}
+
+function fmt(v: number | null | undefined, suffix = '%', decimals = 2): string {
+  if (v == null) return '—';
+  return `${v >= 0 ? '+' : ''}${v.toFixed(decimals)}${suffix}`;
+}
+
+const POLL_STATUSES: BacktestRunStatus[] = ['running'];
+
+export default function MeetKevinStrategy() {
+  const queryClient = useQueryClient();
+  const [selectedRunUuid, setSelectedRunUuid] = useState<string | null>(null);
+
+  const { data: performance } = useQuery({
+    queryKey: ['meet-kevin', 'strategy', 'performance'],
+    queryFn: getStrategyPerformance,
+    refetchInterval: 60_000,
+  });
+
+  const { data: tickers, isLoading: tickersLoading } = useQuery({
+    queryKey: ['meet-kevin', 'strategy', 'tickers'],
+    queryFn: getStrategyTickers,
+    refetchInterval: 60_000,
+  });
+
+  const { data: equityCurve } = useQuery({
+    queryKey: ['meet-kevin', 'strategy', 'equity-curve'],
+    queryFn: () => getStrategyEquityCurve({ include_benchmark: 'spy' }),
+    refetchInterval: 120_000,
+  });
+
+  const { data: runs, isLoading: runsLoading } = useQuery({
+    queryKey: ['meet-kevin', 'backtest', 'runs'],
+    queryFn: () => listBacktestRuns(20),
+    refetchInterval: 30_000,
+  });
+
+  const { data: selectedRun } = useQuery({
+    queryKey: ['meet-kevin', 'backtest', 'run', selectedRunUuid],
+    queryFn: () => getBacktestRun(selectedRunUuid!),
+    enabled: selectedRunUuid != null,
+    refetchInterval: (query) => {
+      const data = query.state.data;
+      if (data && POLL_STATUSES.includes(data.status)) return 3_000;
+      return false;
+    },
+  });
+
+  const backtestMutation = useMutation({
+    mutationFn: runBacktest,
+    onSuccess: (data) => {
+      setSelectedRunUuid(data.run_uuid);
+      void queryClient.invalidateQueries({ queryKey: ['meet-kevin', 'backtest', 'runs'] });
+    },
+  });
+
+  const closeMutation = useMutation({
+    mutationFn: closeKevinPosition,
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ['meet-kevin', 'strategy', 'tickers'] });
+    },
+  });
+
+  const equityData = selectedRun?.equity_curve_json ?? equityCurve?.strategy ?? [];
+  const benchmarkData = selectedRun?.benchmark_curve_json ?? equityCurve?.benchmark ?? null;
+
+  return (
+    <div className="space-y-6">
+      {/* Page header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-2xl font-bold text-white">Meet Kevin — Strategy</h2>
+          <p className="text-sm text-slate-400 mt-0.5">
+            Backtest history, ticker scorecard, and equity vs SPY
+          </p>
+        </div>
+        <button
+          onClick={() => backtestMutation.mutate({})}
+          disabled={backtestMutation.isPending}
+          className="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-slate-600 disabled:cursor-not-allowed text-white text-sm font-medium rounded-lg transition-colors"
+        >
+          {backtestMutation.isPending ? (
+            <>
+              <span className="inline-block w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+              Running…
+            </>
+          ) : (
+            <>
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                  d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                  d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              Run Backtest
+            </>
+          )}
+        </button>
+      </div>
+
+      {/* Headline metrics */}
+      {performance && (
+        <div className="grid grid-cols-2 md:grid-cols-4 xl:grid-cols-6 gap-4">
+          <MetricCard
+            label="Total Return"
+            value={fmt(performance.total_return_pct)}
+            color={performance.total_return_pct >= 0 ? 'text-green-400' : 'text-red-400'}
+          />
+          <MetricCard
+            label="Ann. Return"
+            value={fmt(performance.annualized_return_pct)}
+            color={(performance.annualized_return_pct ?? 0) >= 0 ? 'text-green-400' : 'text-red-400'}
+          />
+          <MetricCard
+            label="Sharpe"
+            value={performance.sharpe_ratio != null ? performance.sharpe_ratio.toFixed(2) : '—'}
+            color={(performance.sharpe_ratio ?? 0) >= 1 ? 'text-green-400' : 'text-yellow-400'}
+          />
+          <MetricCard
+            label="Max Drawdown"
+            value={performance.max_drawdown_pct != null ? `${performance.max_drawdown_pct.toFixed(2)}%` : '—'}
+            color="text-red-400"
+          />
+          <MetricCard
+            label="Alpha vs SPY"
+            value={fmt(performance.alpha_vs_spy_pct)}
+            color={(performance.alpha_vs_spy_pct ?? 0) >= 0 ? 'text-green-400' : 'text-red-400'}
+          />
+          <MetricCard
+            label="Open Positions"
+            value={performance.open_positions.toString()}
+          />
+        </div>
+      )}
+
+      {/* Equity curve */}
+      {equityData.length > 0 && (
+        <div className="bg-slate-800 border border-slate-700 rounded-xl p-6">
+          <h3 className="text-lg font-semibold text-white mb-4">
+            {selectedRunUuid ? 'Backtest Equity Curve' : 'Strategy vs SPY'}
+          </h3>
+          <StrategyVsBenchmarkCurve
+            strategy={equityData}
+            benchmark={benchmarkData}
+            height={350}
+          />
+        </div>
+      )}
+
+      {/* Ticker scorecard */}
+      <div className="space-y-3">
+        <h3 className="text-lg font-semibold text-white">Ticker Scorecard</h3>
+        <TickerScorecardTable
+          tickers={tickers ?? []}
+          isLoading={tickersLoading}
+          onClose={(symbol) => closeMutation.mutate(symbol)}
+        />
+      </div>
+
+      {/* Backtest run history */}
+      <div className="space-y-3">
+        <h3 className="text-lg font-semibold text-white">Backtest History</h3>
+        <BacktestRunHistory
+          runs={runs ?? []}
+          isLoading={runsLoading}
+          selectedRunUuid={selectedRunUuid}
+          onSelect={setSelectedRunUuid}
+        />
+      </div>
+
+      {/* Selected run detail */}
+      {selectedRun?.status === 'running' && (
+        <div className="bg-slate-800 border border-slate-700 rounded-xl p-6 text-center">
+          <span className="inline-block w-8 h-8 border-2 border-blue-400/30 border-t-blue-400 rounded-full animate-spin mb-3" />
+          <p className="text-white font-medium">Backtest running…</p>
+          <p className="text-sm text-slate-400 mt-1">Results will appear automatically</p>
+        </div>
+      )}
+
+      {selectedRun?.status === 'failed' && (
+        <div className="bg-red-900/20 border border-red-700 rounded-xl p-6">
+          <p className="text-red-400 font-medium">Backtest Failed</p>
+          <p className="text-sm text-red-300 mt-1">
+            {selectedRun.error_message ?? 'An unknown error occurred'}
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}