@tradejs/app 2.0.18 → 2.0.20

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

@@ -14,7 +14,7 @@ import {
   Stat,
   Text,
 } from '@chakra-ui/react';
-import { type ReactNode, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import {
   calculateAdvancedTradeMetrics,
   getFormatted,
@@ -41,9 +41,26 @@ import {
   type OrdersDrawerOrder,
 } from '#components/Shared/OrdersDrawer';
 import { deleteStrategyCard } from '#actions/strategies';
+import {
+  buildQuarterlyMonthlyStats,
+  buildStrategyPerformanceViewModel,
+  calculateMaxDrawdownValue,
+  calculateMaxGrossStreak,
+  calculateMaxLossStreak,
+  formatMaxDrawdownPercent as calculateMaxDrawdownPercent,
+  getEquityStepPnl as getSnapshotStepPnl,
+} from '#app/lib/strategyPerformance';
 import { toaster } from '#ui';
 import { AdvancedMetricsPanel } from './AdvancedMetricsPanel';
 import { StrategySnapshotChart } from './StrategySnapshotChart';
+import {
+  ChartPanel,
+  DrawdownTimelineChart,
+  PnlDistributionChart,
+  RollingPerformanceChart,
+  TimeOfDaySessionChart,
+  WinLossStreakTimelineChart,
+} from './StrategyPerformanceCharts';
 
 const MS_IN_HOUR = 60 * 60 * 1000;
 const SNAPSHOT_ORDER_ROW_HEIGHT = 318;
@@ -79,28 +96,6 @@ interface DirectionStatGroup {
   hasData: boolean;
 }
 
-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 SymbolPnlRank {
   symbol: string;
   pnl: number;
@@ -125,47 +120,6 @@ interface AiDiagnosticGroup {
   metrics: AiDiagnosticMetric[];
 }
 
-interface SnapshotTradePoint {
-  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;
-}
-
-type TradingSession = 'Asia' | 'Europe' | 'US';
-
-interface SessionPnlStat {
-  session: TradingSession;
-  pnl: number;
-  orders: number;
-}
-
-interface HourlyPnlStat {
-  hour: number;
-  pnl: number;
-  orders: number;
-}
-
 const getMetricColor = (tone: StrategyChartMetric['tone']) => {
   switch (tone) {
     case 'success':
@@ -181,86 +135,9 @@ const getMetricColor = (tone: StrategyChartMetric['tone']) => {
   }
 };
 
-const calculateMaxDrawdownValue = (orderLog: Array<[number, number]>) => {
-  if (!orderLog.length) {
-    return null;
-  }
-
-  let peak = orderLog[0]?.[1] ?? 0;
-  let maxDrawdownPercent = 0;
-
-  for (const [, amount] of orderLog) {
-    if (!Number.isFinite(amount)) {
-      continue;
-    }
-
-    peak = Math.max(peak, amount);
-    if (peak <= 0) {
-      continue;
-    }
-
-    const drawdownPercent = ((peak - amount) / peak) * 100;
-    maxDrawdownPercent = Math.max(maxDrawdownPercent, drawdownPercent);
-  }
-
-  return maxDrawdownPercent;
-};
-
-const calculateMaxDrawdownPercent = (orderLog: Array<[number, number]>) => {
-  const maxDrawdownPercent = calculateMaxDrawdownValue(orderLog);
-  return maxDrawdownPercent == null
-    ? null
-    : `${maxDrawdownPercent.toFixed(1)}%`;
-};
-
-const getSnapshotStepPnl = (
-  orderLog: StrategyChartSnapshot['orderLog'],
-  index: number,
-) => {
-  const current = orderLog[index];
-  const previous = orderLog[index - 1];
-
-  if (!current || !previous) {
-    return null;
-  }
-
-  return current[1] - previous[1];
-};
-
 const asFiniteNumber = (value: unknown) =>
   typeof value === 'number' && Number.isFinite(value) ? value : null;
 
-const calculateMaxPnlStreak = (
-  orderLog: StrategyChartSnapshot['orderLog'],
-  isStreakPnl: (pnl: number) => boolean,
-) => {
-  let currentStreak = 0;
-  let maxStreak = 0;
-
-  for (let index = 1; index < orderLog.length; index += 1) {
-    const pnl = getSnapshotStepPnl(orderLog, index);
-    if (typeof pnl !== 'number' || !Number.isFinite(pnl)) {
-      continue;
-    }
-
-    if (isStreakPnl(pnl)) {
-      currentStreak += 1;
-      maxStreak = Math.max(maxStreak, currentStreak);
-      continue;
-    }
-
-    currentStreak = 0;
-  }
-
-  return maxStreak;
-};
-
-const calculateMaxGrossStreak = (orderLog: StrategyChartSnapshot['orderLog']) =>
-  calculateMaxPnlStreak(orderLog, (pnl) => pnl > 0);
-
-const calculateMaxLossStreak = (orderLog: StrategyChartSnapshot['orderLog']) =>
-  calculateMaxPnlStreak(orderLog, (pnl) => pnl < 0);
-
 const getSnapshotTradePnls = (snapshot: StrategyChartSnapshot) => {
   const orderPnls = snapshot.orders
     .map((order) => asFiniteNumber(order.pnl))
@@ -359,185 +236,6 @@ const buildSnapshotSummaryMetrics = (snapshot: StrategyChartSnapshot) => {
   });
 };
 
-const resolveTradingSession = (hour: number): TradingSession => {
-  if (hour < 8) {
-    return 'Asia';
-  }
-
-  if (hour < 16) {
-    return 'Europe';
-  }
-
-  return 'US';
-};
-
-const buildSnapshotTradePoints = (
-  orderLog: StrategyChartSnapshot['orderLog'],
-): SnapshotTradePoint[] => {
-  const points: SnapshotTradePoint[] = [];
-
-  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: StrategyChartSnapshot['orderLog'],
-): DrawdownPoint[] => {
-  let peak = orderLog[0]?.[1] ?? 0;
-
-  return orderLog
-    .map(([timestamp, equity]) => {
-      if (!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: SnapshotTradePoint[],
-  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: SnapshotTradePoint[],
-  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: SnapshotTradePoint[],
-): 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: SnapshotTradePoint[]): 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 formatPrice = (value: number | null | undefined) =>
   formatPriceUsdt(value);
 
@@ -555,403 +253,6 @@ const formatBps = (value: number | null | undefined) => {
 const formatAiExitReason = (reason: string | null | undefined) =>
   reason ? reason.replace(/_/g, ' ').toUpperCase() : 'CLOSED';
 
-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';
-
-const getChartPnlColor = (value: number) =>
-  value > 0
-    ? POSITIVE_CHART_COLOR
-    : value < 0
-      ? NEGATIVE_CHART_COLOR
-      : NEUTRAL_CHART_COLOR;
-
-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: SnapshotTradePoint[];
-}) => {
-  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 getAiExitReasonColor = (reason: string | null | undefined) => {
   switch (reason) {
     case 'take_profit':
@@ -1833,105 +1134,6 @@ const AiDiagnosticsPanel = ({ groups }: { groups: AiDiagnosticGroup[] }) => {
   );
 };
 
-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: StrategyChartSnapshot['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 (
-      typeof timestamp !== 'number' ||
-      !Number.isFinite(timestamp) ||
-      typeof amount !== 'number' ||
-      !Number.isFinite(amount) ||
-      typeof previousAmount !== 'number' ||
-      !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 buildSymbolPnlRanking = (
   details: StrategyChartDetail[] | undefined,
 ): SymbolPnlRank[] => {
@@ -1989,110 +1191,14 @@ const buildSymbolPnlRanking = (
     );
 };
 
-export const StrategySnapshotCard = ({
-  snapshot,
-  emptyText,
-  mode,
-  onDeleted,
-  selected = false,
-  onToggleSelection,
-}: {
-  snapshot: StrategyChartSnapshot;
-  emptyText: string;
-  mode: 'replay' | 'ai';
-  onDeleted?: (cardId: string) => void;
-  selected?: boolean;
-  onToggleSelection?: (cardId: string, checked: boolean) => void;
-}) => {
-  const [detailsOpen, setDetailsOpen] = useState(false);
-  const [ordersOpen, setOrdersOpen] = useState(false);
-  const [deleteOpen, setDeleteOpen] = useState(false);
-  const [isDeleting, setIsDeleting] = useState(false);
-  const snapshotOrders = useMemo(
-    () => buildSnapshotOrders(snapshot, mode),
-    [mode, snapshot],
-  );
-  const aiDiagnosticGroups = useMemo(
-    () => buildAiDiagnosticGroups(snapshot.details),
-    [snapshot.details],
-  );
-  const directionStatGroups = useMemo(
-    () => buildDirectionStatGroups(snapshot.details),
-    [snapshot.details],
-  );
-  const symbolPnlRanking = useMemo(
-    () => buildSymbolPnlRanking(snapshot.details),
-    [snapshot.details],
-  );
-  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 monthlyStats = useMemo(
-    () => buildMonthlyStats(snapshot.orderLog),
-    [snapshot.orderLog],
-  );
-  const snapshotTradePoints = useMemo(
-    () => buildSnapshotTradePoints(snapshot.orderLog),
-    [snapshot.orderLog],
-  );
-  const drawdownPoints = useMemo(
-    () => buildDrawdownPoints(snapshot.orderLog),
-    [snapshot.orderLog],
-  );
-  const rollingPerformancePoints = useMemo(
-    () => buildRollingPerformance(snapshotTradePoints, 50),
-    [snapshotTradePoints],
-  );
-  const pnlDistributionBins = useMemo(
-    () => buildPnlDistribution(snapshotTradePoints),
-    [snapshotTradePoints],
-  );
-  const sessionPnlStats = useMemo(
-    () => buildSessionPnlStats(snapshotTradePoints),
-    [snapshotTradePoints],
-  );
-  const hourlyPnlStats = useMemo(
-    () => buildHourlyPnlStats(snapshotTradePoints),
-    [snapshotTradePoints],
-  );
-  const symbolsLabel =
-    snapshot.symbols.length > 3
-      ? `${snapshot.symbols.slice(0, 3).join(', ')} +${snapshot.symbols.length - 3}`
-      : snapshot.symbols.join(', ') || 'n/a';
-  const sourceLabel =
-    mode === 'ai' && snapshot.datasetId ? 'dataset:' : 'symbols:';
-  const sourceValue =
-    mode === 'ai' && snapshot.datasetId ? snapshot.datasetId : symbolsLabel;
-  const tagsLabel = snapshot.tags?.join(' · ') ?? '';
-  const displaySubtitle =
-    mode === 'ai'
-      ? snapshot.subtitle?.replace(/^q\d+\+\s*(?:·\s*)?/i, '').trim()
-      : snapshot.subtitle;
-  const metrics = useMemo(
-    () => buildSnapshotSummaryMetrics(snapshot),
-    [snapshot],
-  );
+export const buildStrategySnapshotCardViewModel = (
+  snapshot: StrategyChartSnapshot,
+  mode: 'replay' | 'ai',
+) => {
+  const snapshotOrders = buildSnapshotOrders(snapshot, mode);
+  const symbolPnlRanking = buildSymbolPnlRanking(snapshot.details);
+  const performance = buildStrategyPerformanceViewModel(snapshot.orderLog);
+  const maxLossStreak = calculateMaxLossStreak(snapshot.orderLog);
   const drawerBaseMetrics =
     mode === 'ai'
       ? snapshot.metrics
@@ -2109,12 +1215,46 @@ export const StrategySnapshotCard = ({
               : metric,
           )
       : snapshot.metrics;
-  const maxLossStreak = useMemo(
-    () => calculateMaxLossStreak(snapshot.orderLog),
-    [snapshot.orderLog],
-  );
-  const drawerMetrics = useMemo(
-    () =>
+  const firstPoint = snapshot.orderLog[0];
+  const lastPoint = snapshot.orderLog[snapshot.orderLog.length - 1];
+  const symbolsLabel =
+    snapshot.symbols.length > 3
+      ? `${snapshot.symbols.slice(0, 3).join(', ')} +${snapshot.symbols.length - 3}`
+      : snapshot.symbols.join(', ') || 'n/a';
+
+  return {
+    snapshotOrders,
+    aiDiagnosticGroups: buildAiDiagnosticGroups(snapshot.details),
+    directionStatGroups: buildDirectionStatGroups(snapshot.details),
+    symbolPnlRanking,
+    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,
+    ),
+    performance,
+    symbolsLabel,
+    sourceLabel: mode === 'ai' && snapshot.datasetId ? 'dataset:' : 'symbols:',
+    sourceValue:
+      mode === 'ai' && snapshot.datasetId ? snapshot.datasetId : symbolsLabel,
+    tagsLabel: snapshot.tags?.join(' · ') ?? '',
+    displaySubtitle:
+      mode === 'ai'
+        ? snapshot.subtitle?.replace(/^q\d+\+\s*(?:·\s*)?/i, '').trim()
+        : snapshot.subtitle,
+    metrics: buildSnapshotSummaryMetrics(snapshot),
+    drawerMetrics:
       mode === 'ai'
         ? sortAiDrawerMetrics([
             ...drawerBaseMetrics,
@@ -2127,21 +1267,66 @@ export const StrategySnapshotCard = ({
             },
           ])
         : drawerBaseMetrics,
-    [drawerBaseMetrics, maxLossStreak, mode],
-  );
-  const advancedMetrics = useMemo(() => {
-    const firstPoint = snapshot.orderLog[0];
-    const lastPoint = snapshot.orderLog[snapshot.orderLog.length - 1];
-
-    return calculateAdvancedTradeMetrics({
+    advancedMetrics: calculateAdvancedTradeMetrics({
       trades: buildSnapshotAdvancedTrades(snapshot),
       orderLog: snapshot.orderLog,
       startTimestamp: firstPoint?.[0] ?? null,
       endTimestamp: lastPoint?.[0] ?? null,
-    });
-  }, [snapshot]);
-  const hasOrdersDrawer = snapshotOrders.length > 0;
-  const hasStatDrawer = mode === 'ai' || Boolean(snapshot.details?.length);
+    }),
+    hasOrdersDrawer: snapshotOrders.length > 0,
+    hasStatDrawer: mode === 'ai' || Boolean(snapshot.details?.length),
+  };
+};
+
+export const StrategySnapshotCard = ({
+  snapshot,
+  emptyText,
+  mode,
+  onDeleted,
+  selected = false,
+  onToggleSelection,
+}: {
+  snapshot: StrategyChartSnapshot;
+  emptyText: string;
+  mode: 'replay' | 'ai';
+  onDeleted?: (cardId: string) => void;
+  selected?: boolean;
+  onToggleSelection?: (cardId: string, checked: boolean) => void;
+}) => {
+  const [detailsOpen, setDetailsOpen] = useState(false);
+  const [ordersOpen, setOrdersOpen] = useState(false);
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const viewModel = useMemo(
+    () => buildStrategySnapshotCardViewModel(snapshot, mode),
+    [mode, snapshot],
+  );
+  const {
+    snapshotOrders,
+    aiDiagnosticGroups,
+    directionStatGroups,
+    topSymbolPnlRanking,
+    worstSymbolPnlRanking,
+    symbolRankingMaxAbsPnl,
+    sourceLabel,
+    sourceValue,
+    tagsLabel,
+    displaySubtitle,
+    metrics,
+    drawerMetrics,
+    advancedMetrics,
+    hasOrdersDrawer,
+    hasStatDrawer,
+  } = viewModel;
+  const {
+    monthlyStats,
+    tradePoints: snapshotTradePoints,
+    drawdownPoints,
+    rollingPerformancePoints,
+    pnlDistributionBins,
+    sessionPnlStats,
+    hourlyPnlStats,
+  } = viewModel.performance;
 
   const handleDelete = async () => {
     if (isDeleting) {