@tradejs/app 2.0.18 → 2.0.20

package/src/app/components/Strategies/RuntimeStrategyCard.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { type ReactNode, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import {
   Badge,
   Box,
@@ -36,81 +36,25 @@ import {
   type OrdersDrawerSummaryItem,
 } from '#components/Shared/OrdersDrawer';
 import type { RuntimeStrategyView } from '#app/lib/runtimeStrategies';
+import {
+  buildQuarterlyMonthlyStats,
+  buildStrategyPerformanceViewModel,
+  calculateMaxLossStreak,
+} from '#app/lib/strategyPerformance';
 import { AdvancedMetricsPanel } from './AdvancedMetricsPanel';
 import { RuntimeStrategyChart } from './RuntimeStrategyChart';
+import {
+  ChartPanel,
+  DrawdownTimelineChart,
+  PnlDistributionChart,
+  RollingPerformanceChart,
+  TimeOfDaySessionChart,
+  WinLossStreakTimelineChart,
+} from './StrategyPerformanceCharts';
 import { RuntimeStrategyConfigDrawer } from './RuntimeStrategyConfigDrawer';
 
 type RuntimeOrderView = RuntimeStrategyView['orders'][number];
 const RUNTIME_ORDER_ROW_HEIGHT = 306;
-const CHART_WIDTH = 640;
-const CHART_HEIGHT = 120;
-const CHART_PADDING = 10;
-const POSITIVE_CHART_COLOR = '#5eead4';
-const NEGATIVE_CHART_COLOR = '#f87171';
-const NEUTRAL_CHART_COLOR = '#6b7280';
-
-type TradingSession = 'Asia' | 'Europe' | 'US';
-
-interface RuntimeTradePoint {
-  index: number;
-  timestamp: number;
-  pnl: number;
-  equity: number;
-  hour: number;
-  session: TradingSession;
-}
-
-interface DrawdownPoint {
-  timestamp: number;
-  drawdownPercent: number;
-}
-
-interface RollingPerformancePoint {
-  index: number;
-  winRate: number;
-  pnl: number;
-}
-
-interface DistributionBin {
-  id: string;
-  min: number;
-  max: number;
-  count: number;
-}
-
-interface MonthlyStat {
-  id: string;
-  year: number;
-  monthIndex: number;
-  monthLabel: string;
-  orders: number;
-  wins: number;
-  pnl: number;
-}
-
-interface YearlyMonthlyStats {
-  year: number;
-  months: MonthlyStat[];
-}
-
-interface QuarterlyMonthlyStats {
-  label: string;
-  monthIndexes: readonly number[];
-  months: (MonthlyStat | null)[];
-  hasData: boolean;
-}
-
-interface SessionPnlStat {
-  session: TradingSession;
-  pnl: number;
-  orders: number;
-}
-
-interface HourlyPnlStat {
-  hour: number;
-  pnl: number;
-  orders: number;
-}
 
 interface RuntimeSymbolPnlRank {
   symbol: string;
@@ -159,13 +103,6 @@ const getColorByLevel = (level: ThresholdLevel) => {
 
 const getMetricColor = (level: ThresholdLevel) => getColorByLevel(level);
 
-const getChartPnlColor = (value: number) =>
-  value > 0
-    ? POSITIVE_CHART_COLOR
-    : value < 0
-      ? NEGATIVE_CHART_COLOR
-      : NEUTRAL_CHART_COLOR;
-
 const getPnlBarColor = (value: number) => {
   if (value > 0) {
     return 'teal.500';
@@ -176,318 +113,6 @@ const getPnlBarColor = (value: number) => {
   return 'gray.500';
 };
 
-const resolveTradingSession = (hour: number): TradingSession => {
-  if (hour < 8) {
-    return 'Asia';
-  }
-
-  if (hour < 16) {
-    return 'Europe';
-  }
-
-  return 'US';
-};
-
-const getStepPnl = (
-  orderLog: RuntimeStrategyView['orderLog'],
-  index: number,
-) => {
-  const current = orderLog[index];
-  const previous = orderLog[index - 1];
-
-  if (!current || !previous) {
-    return null;
-  }
-
-  const pnl = current[1] - previous[1];
-  return Number.isFinite(pnl) ? pnl : null;
-};
-
-const calculateMaxLossStreak = (orderLog: RuntimeStrategyView['orderLog']) => {
-  let currentStreak = 0;
-  let maxStreak = 0;
-
-  for (let index = 1; index < orderLog.length; index += 1) {
-    const pnl = getStepPnl(orderLog, index);
-    if (typeof pnl !== 'number' || !Number.isFinite(pnl)) {
-      continue;
-    }
-
-    if (pnl < 0) {
-      currentStreak += 1;
-      maxStreak = Math.max(maxStreak, currentStreak);
-      continue;
-    }
-
-    currentStreak = 0;
-  }
-
-  return maxStreak;
-};
-
-const buildRuntimeTradePoints = (
-  orderLog: RuntimeStrategyView['orderLog'],
-): RuntimeTradePoint[] => {
-  const points: RuntimeTradePoint[] = [];
-
-  for (let index = 1; index < orderLog.length; index += 1) {
-    const current = orderLog[index];
-    const previous = orderLog[index - 1];
-    if (!current || !previous) {
-      continue;
-    }
-
-    const [timestamp, equity] = current;
-    const pnl = equity - previous[1];
-    if (
-      !Number.isFinite(timestamp) ||
-      !Number.isFinite(equity) ||
-      !Number.isFinite(pnl)
-    ) {
-      continue;
-    }
-
-    const hour = new Date(timestamp).getUTCHours();
-    points.push({
-      index,
-      timestamp,
-      pnl,
-      equity,
-      hour,
-      session: resolveTradingSession(hour),
-    });
-  }
-
-  return points;
-};
-
-const buildDrawdownPoints = (
-  orderLog: RuntimeStrategyView['orderLog'],
-): DrawdownPoint[] => {
-  let peak = orderLog[0]?.[1] ?? 0;
-
-  return orderLog
-    .map(([timestamp, equity]) => {
-      if (!Number.isFinite(timestamp) || !Number.isFinite(equity)) {
-        return null;
-      }
-
-      peak = Math.max(peak, equity);
-      const drawdownPercent = peak > 0 ? ((peak - equity) / peak) * 100 : 0;
-
-      return {
-        timestamp,
-        drawdownPercent,
-      };
-    })
-    .filter((point): point is DrawdownPoint => point != null);
-};
-
-const buildRollingPerformance = (
-  trades: RuntimeTradePoint[],
-  windowSize = 50,
-): RollingPerformancePoint[] =>
-  trades.map((trade, index) => {
-    const windowTrades = trades.slice(
-      Math.max(0, index - windowSize + 1),
-      index + 1,
-    );
-    const wins = windowTrades.filter((item) => item.pnl > 0).length;
-    const pnl = windowTrades.reduce((sum, item) => sum + item.pnl, 0);
-
-    return {
-      index: trade.index,
-      winRate: windowTrades.length > 0 ? (wins / windowTrades.length) * 100 : 0,
-      pnl,
-    };
-  });
-
-const buildPnlDistribution = (
-  trades: RuntimeTradePoint[],
-  binCount = 12,
-): DistributionBin[] => {
-  if (!trades.length) {
-    return [];
-  }
-
-  const pnlValues = trades.map((trade) => trade.pnl);
-  const min = Math.min(...pnlValues);
-  const max = Math.max(...pnlValues);
-
-  if (!Number.isFinite(min) || !Number.isFinite(max)) {
-    return [];
-  }
-
-  if (min === max) {
-    return [
-      {
-        id: `${min}:${max}`,
-        min,
-        max,
-        count: trades.length,
-      },
-    ];
-  }
-
-  const step = (max - min) / binCount;
-  const bins = Array.from({ length: binCount }, (_, index) => ({
-    id: String(index),
-    min: min + step * index,
-    max: index === binCount - 1 ? max : min + step * (index + 1),
-    count: 0,
-  }));
-
-  for (const pnl of pnlValues) {
-    const rawIndex = Math.floor((pnl - min) / step);
-    const index = Math.max(0, Math.min(binCount - 1, rawIndex));
-    const bin = bins[index];
-    if (bin) {
-      bin.count += 1;
-    }
-  }
-
-  return bins;
-};
-
-const buildSessionPnlStats = (
-  trades: RuntimeTradePoint[],
-): SessionPnlStat[] => {
-  const stats = new Map<TradingSession, SessionPnlStat>(
-    (['Asia', 'Europe', 'US'] as const).map((session) => [
-      session,
-      { session, pnl: 0, orders: 0 },
-    ]),
-  );
-
-  for (const trade of trades) {
-    const stat = stats.get(trade.session);
-    if (!stat) {
-      continue;
-    }
-
-    stat.pnl += trade.pnl;
-    stat.orders += 1;
-  }
-
-  return [...stats.values()];
-};
-
-const buildHourlyPnlStats = (trades: RuntimeTradePoint[]): HourlyPnlStat[] => {
-  const stats = Array.from({ length: 24 }, (_, hour) => ({
-    hour,
-    pnl: 0,
-    orders: 0,
-  }));
-
-  for (const trade of trades) {
-    const stat = stats[trade.hour];
-    if (!stat) {
-      continue;
-    }
-
-    stat.pnl += trade.pnl;
-    stat.orders += 1;
-  }
-
-  return stats;
-};
-
-const getMonthLabel = (monthIndex: number) =>
-  new Date(Date.UTC(2026, monthIndex - 1, 1)).toLocaleString('en-US', {
-    month: 'short',
-  });
-
-const monthQuarters = [
-  { label: 'Q1', months: [1, 2, 3] },
-  { label: 'Q2', months: [4, 5, 6] },
-  { label: 'Q3', months: [7, 8, 9] },
-  { label: 'Q4', months: [10, 11, 12] },
-] as const;
-
-const buildQuarterlyMonthlyStats = (
-  months: MonthlyStat[],
-): QuarterlyMonthlyStats[] => {
-  const byMonth = new Map(months.map((month) => [month.monthIndex, month]));
-
-  return monthQuarters
-    .map((quarter) => {
-      const quarterMonths = quarter.months.map(
-        (monthIndex) => byMonth.get(monthIndex) ?? null,
-      );
-
-      return {
-        label: quarter.label,
-        monthIndexes: quarter.months,
-        months: quarterMonths,
-        hasData: quarterMonths.some((month) => month != null),
-      };
-    })
-    .filter((quarter) => quarter.hasData);
-};
-
-const buildMonthlyStats = (
-  orderLog: RuntimeStrategyView['orderLog'],
-): YearlyMonthlyStats[] => {
-  const grouped = new Map<string, MonthlyStat>();
-
-  for (let index = 1; index < orderLog.length; index += 1) {
-    const current = orderLog[index];
-    const previous = orderLog[index - 1];
-    if (!current || !previous) {
-      continue;
-    }
-
-    const [timestamp, amount] = current;
-    const previousAmount = previous[1];
-    if (
-      !Number.isFinite(timestamp) ||
-      !Number.isFinite(amount) ||
-      !Number.isFinite(previousAmount)
-    ) {
-      continue;
-    }
-
-    const date = new Date(timestamp);
-    const year = date.getUTCFullYear();
-    const monthIndex = date.getUTCMonth() + 1;
-    const id = `${year}-${String(monthIndex).padStart(2, '0')}`;
-    const pnl = amount - previousAmount;
-    const existing = grouped.get(id) ?? {
-      id,
-      year,
-      monthIndex,
-      monthLabel: getMonthLabel(monthIndex),
-      orders: 0,
-      wins: 0,
-      pnl: 0,
-    };
-
-    existing.orders += 1;
-    existing.wins += pnl > 0 ? 1 : 0;
-    existing.pnl += pnl;
-    grouped.set(id, existing);
-  }
-
-  const monthlyStats = [...grouped.values()].sort(
-    (left, right) =>
-      left.year - right.year || left.monthIndex - right.monthIndex,
-  );
-  const yearlyStats = new Map<number, MonthlyStat[]>();
-
-  for (const month of monthlyStats) {
-    const months = yearlyStats.get(month.year) ?? [];
-    months.push(month);
-    yearlyStats.set(month.year, months);
-  }
-
-  return [...yearlyStats.entries()]
-    .sort(([leftYear], [rightYear]) => leftYear - rightYear)
-    .map(([year, months]) => ({
-      year,
-      months,
-    }));
-};
-
 const StatItem = ({
   stat,
   id,
@@ -901,389 +526,6 @@ const buildRuntimeDirectionStats = (
     };
   });
 
-const buildPolylinePoints = (values: number[]) => {
-  if (!values.length) {
-    return '';
-  }
-
-  const min = Math.min(...values);
-  const max = Math.max(...values);
-  const range = max - min || 1;
-  const drawableWidth = CHART_WIDTH - CHART_PADDING * 2;
-  const drawableHeight = CHART_HEIGHT - CHART_PADDING * 2;
-
-  return values
-    .map((value, index) => {
-      const x =
-        CHART_PADDING +
-        (values.length === 1
-          ? 0
-          : (index / (values.length - 1)) * drawableWidth);
-      const y = CHART_PADDING + ((max - value) / range) * drawableHeight;
-
-      return `${x.toFixed(2)},${y.toFixed(2)}`;
-    })
-    .join(' ');
-};
-
-const ChartPanel = ({
-  title,
-  subtitle,
-  children,
-}: {
-  title: string;
-  subtitle?: string;
-  children: ReactNode;
-}) => (
-  <Box
-    p={4}
-    borderWidth="1px"
-    borderColor="gray.800"
-    borderRadius="md"
-    bg="gray.900"
-    minH="210px"
-  >
-    <Flex justify="space-between" align="baseline" gap={3} mb={3}>
-      <Text fontSize="sm" color="gray.300" fontWeight="semibold">
-        {title}
-      </Text>
-      {subtitle ? (
-        <Text fontSize="xs" color="gray.500" textAlign="right">
-          {subtitle}
-        </Text>
-      ) : null}
-    </Flex>
-    {children}
-  </Box>
-);
-
-const EmptyChart = () => (
-  <Flex h="140px" align="center" justify="center">
-    <Text fontSize="sm" color="gray.500">
-      No trade data
-    </Text>
-  </Flex>
-);
-
-const DrawdownTimelineChart = ({ points }: { points: DrawdownPoint[] }) => {
-  if (points.length < 2) {
-    return <EmptyChart />;
-  }
-
-  const values = points.map((point) => -point.drawdownPercent);
-  const maxDrawdown = Math.max(...points.map((point) => point.drawdownPercent));
-  const linePoints = buildPolylinePoints(values);
-
-  return (
-    <Box>
-      <svg
-        width="100%"
-        viewBox={`0 0 ${CHART_WIDTH} ${CHART_HEIGHT}`}
-        role="img"
-        aria-label="Drawdown timeline"
-      >
-        <line
-          x1={CHART_PADDING}
-          x2={CHART_WIDTH - CHART_PADDING}
-          y1={CHART_PADDING}
-          y2={CHART_PADDING}
-          stroke="#374151"
-          strokeDasharray="4 4"
-        />
-        <polyline
-          points={linePoints}
-          fill="none"
-          stroke={NEGATIVE_CHART_COLOR}
-          strokeWidth="2"
-        />
-      </svg>
-      <Flex justify="space-between" align="center" mt={2}>
-        <Text fontSize="xs" color="gray.500">
-          max drawdown
-        </Text>
-        <Text
-          fontSize="sm"
-          color="orange.300"
-          fontFamily="mono"
-          fontWeight="bold"
-        >
-          {formatPercent(maxDrawdown)}
-        </Text>
-      </Flex>
-    </Box>
-  );
-};
-
-const WinLossStreakTimelineChart = ({
-  trades,
-}: {
-  trades: RuntimeTradePoint[];
-}) => {
-  if (!trades.length) {
-    return <EmptyChart />;
-  }
-
-  const maxAbsPnl = Math.max(...trades.map((trade) => Math.abs(trade.pnl)), 1);
-  const centerY = CHART_HEIGHT / 2;
-  const barWidth = CHART_WIDTH / trades.length;
-
-  return (
-    <Box>
-      <svg
-        width="100%"
-        viewBox={`0 0 ${CHART_WIDTH} ${CHART_HEIGHT}`}
-        role="img"
-        aria-label="Win loss streak timeline"
-      >
-        <line
-          x1="0"
-          x2={CHART_WIDTH}
-          y1={centerY}
-          y2={centerY}
-          stroke="#374151"
-        />
-        {trades.map((trade, index) => {
-          const height = Math.max(2, (Math.abs(trade.pnl) / maxAbsPnl) * 48);
-          const isWin = trade.pnl > 0;
-          const y = isWin ? centerY - height : centerY;
-
-          return (
-            <rect
-              key={`${trade.timestamp}-${index}`}
-              x={index * barWidth}
-              y={y}
-              width={Math.max(1, barWidth - 0.4)}
-              height={height}
-              fill={getChartPnlColor(trade.pnl)}
-              opacity="0.9"
-            />
-          );
-        })}
-      </svg>
-      <Flex justify="space-between" align="center" mt={2}>
-        <Text fontSize="xs" color="gray.500">
-          wins above line, losses below
-        </Text>
-        <Text
-          fontSize="sm"
-          color="gray.300"
-          fontFamily="mono"
-          fontWeight="bold"
-        >
-          {formatInteger(trades.length)} trades
-        </Text>
-      </Flex>
-    </Box>
-  );
-};
-
-const PnlDistributionChart = ({ bins }: { bins: DistributionBin[] }) => {
-  if (!bins.length) {
-    return <EmptyChart />;
-  }
-
-  const maxCount = Math.max(...bins.map((bin) => bin.count), 1);
-  const barWidth = CHART_WIDTH / bins.length;
-
-  return (
-    <Box>
-      <svg
-        width="100%"
-        viewBox={`0 0 ${CHART_WIDTH} ${CHART_HEIGHT}`}
-        role="img"
-        aria-label="P and L distribution"
-      >
-        {bins.map((bin, index) => {
-          const height = Math.max(2, (bin.count / maxCount) * 92);
-          const x = index * barWidth + 2;
-          const y = CHART_HEIGHT - height - CHART_PADDING;
-          const midpoint = (bin.min + bin.max) / 2;
-
-          return (
-            <rect
-              key={bin.id}
-              x={x}
-              y={y}
-              width={Math.max(2, barWidth - 4)}
-              height={height}
-              fill={getChartPnlColor(midpoint)}
-            />
-          );
-        })}
-      </svg>
-      <Flex justify="space-between" align="center" mt={2}>
-        <Text fontSize="xs" color="gray.500">
-          trade P&L buckets
-        </Text>
-        <Text
-          fontSize="sm"
-          color="gray.300"
-          fontFamily="mono"
-          fontWeight="bold"
-        >
-          {formatInteger(bins.reduce((sum, bin) => sum + bin.count, 0))}
-        </Text>
-      </Flex>
-    </Box>
-  );
-};
-
-const RollingPerformanceChart = ({
-  points,
-}: {
-  points: RollingPerformancePoint[];
-}) => {
-  if (points.length < 2) {
-    return <EmptyChart />;
-  }
-
-  const winRateLine = buildPolylinePoints(points.map((point) => point.winRate));
-  const pnlLine = buildPolylinePoints(points.map((point) => point.pnl));
-  const latest = points[points.length - 1];
-
-  return (
-    <Box>
-      <svg
-        width="100%"
-        viewBox={`0 0 ${CHART_WIDTH} ${CHART_HEIGHT}`}
-        role="img"
-        aria-label="Rolling win rate and rolling P and L"
-      >
-        <line
-          x1={CHART_PADDING}
-          x2={CHART_WIDTH - CHART_PADDING}
-          y1={CHART_HEIGHT / 2}
-          y2={CHART_HEIGHT / 2}
-          stroke="#374151"
-          strokeDasharray="4 4"
-        />
-        <polyline
-          points={pnlLine}
-          fill="none"
-          stroke={POSITIVE_CHART_COLOR}
-          strokeWidth="2"
-        />
-        <polyline
-          points={winRateLine}
-          fill="none"
-          stroke="#fbbf24"
-          strokeWidth="2"
-          opacity="0.9"
-        />
-      </svg>
-      <Flex justify="space-between" align="center" mt={2}>
-        <Text fontSize="xs" color="gray.500">
-          teal P&L, yellow win rate
-        </Text>
-        <Text
-          fontSize="sm"
-          color="gray.300"
-          fontFamily="mono"
-          fontWeight="bold"
-        >
-          {formatPercent(latest?.winRate)} /{' '}
-          {formatSignedNumber(latest?.pnl ?? null)}
-        </Text>
-      </Flex>
-    </Box>
-  );
-};
-
-const TimeOfDaySessionChart = ({
-  sessions,
-  hours,
-}: {
-  sessions: SessionPnlStat[];
-  hours: HourlyPnlStat[];
-}) => {
-  if (!sessions.some((session) => session.orders > 0)) {
-    return <EmptyChart />;
-  }
-
-  const maxSessionAbsPnl = Math.max(
-    ...sessions.map((session) => Math.abs(session.pnl)),
-    1,
-  );
-  const maxHourAbsPnl = Math.max(...hours.map((hour) => Math.abs(hour.pnl)), 1);
-
-  return (
-    <Flex direction="column" gap={4}>
-      <SimpleGrid columns={3} gap={3}>
-        {sessions.map((session) => {
-          const width = Math.max(
-            4,
-            (Math.abs(session.pnl) / maxSessionAbsPnl) * 100,
-          );
-
-          return (
-            <Box key={session.session}>
-              <Flex justify="space-between" align="center" mb={1}>
-                <Text fontSize="xs" color="gray.400" fontWeight="semibold">
-                  {session.session}
-                </Text>
-                <Text
-                  fontSize="xs"
-                  color={getPnlColor(session.pnl)}
-                  fontFamily="mono"
-                  fontWeight="bold"
-                >
-                  {formatSignedNumber(session.pnl)}
-                </Text>
-              </Flex>
-              <Box h="8px" bg="gray.800">
-                <Box
-                  h="full"
-                  w={`${width}%`}
-                  bg={getChartPnlColor(session.pnl)}
-                />
-              </Box>
-              <Text mt={1} fontSize="xs" color="gray.500" fontFamily="mono">
-                {formatInteger(session.orders)} orders
-              </Text>
-            </Box>
-          );
-        })}
-      </SimpleGrid>
-
-      <svg
-        width="100%"
-        viewBox={`0 0 ${CHART_WIDTH} ${CHART_HEIGHT}`}
-        role="img"
-        aria-label="P and L by UTC hour"
-      >
-        <line
-          x1="0"
-          x2={CHART_WIDTH}
-          y1={CHART_HEIGHT / 2}
-          y2={CHART_HEIGHT / 2}
-          stroke="#374151"
-        />
-        {hours.map((hour) => {
-          const barWidth = CHART_WIDTH / 24;
-          const height = Math.max(1, (Math.abs(hour.pnl) / maxHourAbsPnl) * 46);
-          const isPositive = hour.pnl >= 0;
-          const y = isPositive ? CHART_HEIGHT / 2 - height : CHART_HEIGHT / 2;
-
-          return (
-            <rect
-              key={hour.hour}
-              x={hour.hour * barWidth + 2}
-              y={y}
-              width={Math.max(2, barWidth - 4)}
-              height={height}
-              fill={getChartPnlColor(hour.pnl)}
-              opacity={hour.orders > 0 ? 0.95 : 0.2}
-            />
-          );
-        })}
-      </svg>
-      <Text fontSize="xs" color="gray.500">
-        UTC hours, sessions: Asia 00-07, Europe 08-15, US 16-23
-      </Text>
-    </Flex>
-  );
-};
-
 const renderPnlRanking = ({
   title,
   subtitle,
@@ -1431,6 +673,50 @@ const mapRuntimeOrder = (order: RuntimeOrderView): OrdersDrawerOrder => {
   };
 };
 
+export const buildRuntimeStrategyCardViewModel = (
+  strategy: RuntimeStrategyView,
+) => {
+  const symbolPnlRanking = buildRuntimeSymbolPnlRanking(strategy.orders);
+  const firstPoint = strategy.orderLog[0];
+  const lastPoint = strategy.orderLog[strategy.orderLog.length - 1];
+
+  return {
+    lastTrade: strategy.recentTrades[0],
+    runtimeOrders: strategy.orders.map(mapRuntimeOrder),
+    runtimeOrderSummaryItems: getRuntimeOrdersSummaryItems(strategy.orders),
+    drawerMetrics: buildRuntimeDrawerMetrics(strategy),
+    performance: buildStrategyPerformanceViewModel(strategy.orderLog),
+    symbolPnlRanking,
+    symbolConcentration: buildRuntimeSymbolConcentration(strategy.orders).slice(
+      0,
+      8,
+    ),
+    topSymbolPnlRanking: [...symbolPnlRanking]
+      .sort(
+        (left, right) =>
+          right.pnl - left.pnl || left.symbol.localeCompare(right.symbol),
+      )
+      .slice(0, 10),
+    worstSymbolPnlRanking: [...symbolPnlRanking]
+      .sort(
+        (left, right) =>
+          left.pnl - right.pnl || left.symbol.localeCompare(right.symbol),
+      )
+      .slice(0, 10),
+    symbolRankingMaxAbsPnl: Math.max(
+      ...symbolPnlRanking.map((rank) => Math.abs(rank.pnl)),
+      1,
+    ),
+    directionStats: buildRuntimeDirectionStats(strategy.orders),
+    advancedMetrics: calculateAdvancedTradeMetrics({
+      trades: buildRuntimeAdvancedTrades(strategy.orders),
+      orderLog: strategy.orderLog,
+      startTimestamp: firstPoint?.[0] ?? null,
+      endTimestamp: lastPoint?.[0] ?? null,
+    }),
+  };
+};
+
 export const RuntimeStrategyCard = ({
   strategy,
   provider,
@@ -1447,94 +733,31 @@ export const RuntimeStrategyCard = ({
   const [configOpen, setConfigOpen] = useState(false);
   const [ordersOpen, setOrdersOpen] = useState(false);
   const [statsOpen, setStatsOpen] = useState(false);
-  const lastTrade = strategy.recentTrades[0];
-  const runtimeOrders = useMemo(
-    () => strategy.orders.map(mapRuntimeOrder),
-    [strategy.orders],
-  );
-  const runtimeOrderSummaryItems = useMemo(
-    () => getRuntimeOrdersSummaryItems(strategy.orders),
-    [strategy.orders],
-  );
-  const drawerMetrics = useMemo(
-    () => buildRuntimeDrawerMetrics(strategy),
+  const viewModel = useMemo(
+    () => buildRuntimeStrategyCardViewModel(strategy),
     [strategy],
   );
-  const monthlyStats = useMemo(
-    () => buildMonthlyStats(strategy.orderLog),
-    [strategy.orderLog],
-  );
-  const runtimeTradePoints = useMemo(
-    () => buildRuntimeTradePoints(strategy.orderLog),
-    [strategy.orderLog],
-  );
-  const drawdownPoints = useMemo(
-    () => buildDrawdownPoints(strategy.orderLog),
-    [strategy.orderLog],
-  );
-  const rollingPerformancePoints = useMemo(
-    () => buildRollingPerformance(runtimeTradePoints, 50),
-    [runtimeTradePoints],
-  );
-  const pnlDistributionBins = useMemo(
-    () => buildPnlDistribution(runtimeTradePoints),
-    [runtimeTradePoints],
-  );
-  const sessionPnlStats = useMemo(
-    () => buildSessionPnlStats(runtimeTradePoints),
-    [runtimeTradePoints],
-  );
-  const hourlyPnlStats = useMemo(
-    () => buildHourlyPnlStats(runtimeTradePoints),
-    [runtimeTradePoints],
-  );
-  const symbolPnlRanking = useMemo(
-    () => buildRuntimeSymbolPnlRanking(strategy.orders),
-    [strategy.orders],
-  );
-  const symbolConcentration = useMemo(
-    () => buildRuntimeSymbolConcentration(strategy.orders).slice(0, 8),
-    [strategy.orders],
-  );
-  const topSymbolPnlRanking = useMemo(
-    () =>
-      [...symbolPnlRanking]
-        .sort(
-          (left, right) =>
-            right.pnl - left.pnl || left.symbol.localeCompare(right.symbol),
-        )
-        .slice(0, 10),
-    [symbolPnlRanking],
-  );
-  const worstSymbolPnlRanking = useMemo(
-    () =>
-      [...symbolPnlRanking]
-        .sort(
-          (left, right) =>
-            left.pnl - right.pnl || left.symbol.localeCompare(right.symbol),
-        )
-        .slice(0, 10),
-    [symbolPnlRanking],
-  );
-  const symbolRankingMaxAbsPnl = useMemo(
-    () => Math.max(...symbolPnlRanking.map((rank) => Math.abs(rank.pnl)), 1),
-    [symbolPnlRanking],
-  );
-  const directionStats = useMemo(
-    () => buildRuntimeDirectionStats(strategy.orders),
-    [strategy.orders],
-  );
-  const advancedMetrics = useMemo(() => {
-    const firstPoint = strategy.orderLog[0];
-    const lastPoint = strategy.orderLog[strategy.orderLog.length - 1];
-
-    return calculateAdvancedTradeMetrics({
-      trades: buildRuntimeAdvancedTrades(strategy.orders),
-      orderLog: strategy.orderLog,
-      startTimestamp: firstPoint?.[0] ?? null,
-      endTimestamp: lastPoint?.[0] ?? null,
-    });
-  }, [strategy.orderLog, strategy.orders]);
+  const {
+    lastTrade,
+    runtimeOrders,
+    runtimeOrderSummaryItems,
+    drawerMetrics,
+    symbolConcentration,
+    topSymbolPnlRanking,
+    worstSymbolPnlRanking,
+    symbolRankingMaxAbsPnl,
+    directionStats,
+    advancedMetrics,
+  } = viewModel;
+  const {
+    monthlyStats,
+    tradePoints: runtimeTradePoints,
+    drawdownPoints,
+    rollingPerformancePoints,
+    pnlDistributionBins,
+    sessionPnlStats,
+    hourlyPnlStats,
+  } = viewModel.performance;
 
   return (
     <Box
@@ -2182,9 +1405,7 @@ export const RuntimeStrategyCard = ({
       <RuntimeStrategyChart
         orderLog={strategy.orderLog}
         stat={strategy.stat}
-        aiGateObservedFrom={strategy.aiGateObservedFrom}
-        aiGateChanges={strategy.aiGateChanges}
-        maxLossValueTimeline={strategy.maxLossValueTimeline}
+        evidenceTimeline={strategy.evidenceTimeline}
         startTimestamp={startTimestamp}
         endTimestamp={endTimestamp}
       />