@tradejs/app 2.0.21 → 3.0.0

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

@@ -5,113 +5,28 @@ import {
   Badge,
   Box,
   Button,
-  CloseButton,
-  Drawer,
   Flex,
-  Grid,
   Menu,
   Portal,
   SimpleGrid,
   Stat,
   Text,
 } from '@chakra-ui/react';
+import { getFormatted } from '@tradejs/core/backtest';
+import type { TestThresholdsKey } from '@tradejs/types';
 import {
-  calculateAdvancedTradeMetrics,
-  getFormatted,
-  type AdvancedTradeInput,
-} from '@tradejs/core/backtest';
-import type { TestThresholdsKey, ThresholdLevel } from '@tradejs/types';
-import {
-  formatCompactNumber,
   formatDateTime,
-  formatFee,
-  formatInteger,
-  formatPercent,
-  formatPriceUsdt,
-  formatSignedNumber,
-  formatUsdt,
-  getPnlColor,
   OrdersDrawerPanel,
-  type OrdersDrawerOrder,
-  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 type { RuntimeStrategyView } from '#app/lib/runtimeStrategyContracts';
 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;
-
-interface RuntimeSymbolPnlRank {
-  symbol: string;
-  pnl: number;
-  orders: number;
-  winRate: number | null;
-  avgPnl: number | null;
-}
-
-interface RuntimeSymbolConcentrationRow extends RuntimeSymbolPnlRank {
-  absPnl: number;
-  absPnlShare: number;
-  orderShare: number;
-}
-
-interface RuntimeDirectionStats {
-  direction: RuntimeOrderView['direction'];
-  orders: number;
-  active: number;
-  closed: number;
-  wins: number;
-  pnl: number;
-  avgPnl: number | null;
-}
-
-interface RuntimeDrawerMetric {
-  id: string;
-  label: string;
-  value: string;
-  level: ThresholdLevel;
-}
-
-const getColorByLevel = (level: ThresholdLevel) => {
-  switch (level) {
-    case 'success':
-      return 'teal.500';
-    case 'warning':
-      return 'fg.warning';
-    case 'neutral':
-      return 'gray.300';
-    case 'error':
-    default:
-      return 'fg.error';
-  }
-};
-
-const getMetricColor = (level: ThresholdLevel) => getColorByLevel(level);
-
-const getPnlBarColor = (value: number) => {
-  if (value > 0) {
-    return 'teal.500';
-  }
-  if (value < 0) {
-    return 'red.500';
-  }
-  return 'gray.500';
-};
+import { RuntimeStrategyStatsDrawer } from './RuntimeStrategyStatsDrawer';
+import {
+  buildRuntimeStrategyCardViewModel,
+  getColorByLevel,
+  RUNTIME_ORDER_ROW_HEIGHT,
+} from './RuntimeStrategyCard.presenter';
 
 const StatItem = ({
   stat,
@@ -134,589 +49,6 @@ const StatItem = ({
   );
 };
 
-const getOrderAccentColor = (order: RuntimeOrderView) => {
-  if (order.status === 'active') {
-    return 'orange.300';
-  }
-
-  if (typeof order.pnl !== 'number' || !Number.isFinite(order.pnl)) {
-    return 'gray.600';
-  }
-
-  return order.pnl >= 0 ? 'teal.300' : 'red.300';
-};
-
-const formatExitType = (order: RuntimeOrderView) => {
-  if (order.status === 'active') {
-    return 'active';
-  }
-
-  return order.exitType ? order.exitType.toUpperCase() : 'closed';
-};
-
-const formatOrderReference = (orderId: string) => {
-  const normalized = orderId.trim();
-  const separatorIndex = normalized.indexOf('--');
-  const suffix =
-    separatorIndex >= 0 ? normalized.slice(separatorIndex + 2) : normalized;
-
-  return suffix.length > 12 ? suffix.slice(-12) : suffix || 'n/a';
-};
-
-const RiskLevelsDetail = ({ order }: { order: RuntimeOrderView }) => (
-  <Box>
-    <Text>
-      TP {formatPriceUsdt(order.takeProfitPrice)} (
-      {formatPercent(order.takeProfitPercent, { signed: true })})
-    </Text>
-    <Text>
-      SL {formatPriceUsdt(order.stopLossPrice)} (
-      {formatPercent(order.stopLossPercent)})
-    </Text>
-  </Box>
-);
-
-const FeesDetail = ({ order }: { order: RuntimeOrderView }) => (
-  <Box>
-    <Text>open {formatFee(order.openFee)}</Text>
-    <Text>close {formatFee(order.closeFee)}</Text>
-    <Text>funding {formatFee(order.fundingFee)}</Text>
-  </Box>
-);
-
-const getRuntimeOrderNotional = (order: RuntimeOrderView) => {
-  const entryPrice = order.actualEntryPrice ?? order.entryPrice;
-
-  if (
-    typeof order.qty !== 'number' ||
-    !Number.isFinite(order.qty) ||
-    typeof entryPrice !== 'number' ||
-    !Number.isFinite(entryPrice)
-  ) {
-    return null;
-  }
-
-  return order.qty * entryPrice;
-};
-
-const getRuntimeOrderSlippageCost = (order: RuntimeOrderView) => {
-  const notional = getRuntimeOrderNotional(order);
-
-  if (notional == null) {
-    return null;
-  }
-
-  const entrySlippagePercent =
-    typeof order.entrySlippagePercent === 'number' &&
-    Number.isFinite(order.entrySlippagePercent)
-      ? Math.abs(order.entrySlippagePercent)
-      : 0;
-  const exitSlippagePercent =
-    typeof order.exitSlippagePercent === 'number' &&
-    Number.isFinite(order.exitSlippagePercent)
-      ? Math.abs(order.exitSlippagePercent)
-      : 0;
-  const totalSlippagePercent = entrySlippagePercent + exitSlippagePercent;
-
-  return totalSlippagePercent > 0
-    ? (notional * totalSlippagePercent) / 100
-    : null;
-};
-
-const buildRuntimeAdvancedTrades = (
-  orders: RuntimeOrderView[],
-): AdvancedTradeInput[] =>
-  orders.flatMap((order): AdvancedTradeInput[] => {
-    const timestamp = order.exitTimestamp ?? order.entryTimestamp;
-
-    if (
-      typeof timestamp !== 'number' ||
-      !Number.isFinite(timestamp) ||
-      typeof order.pnl !== 'number' ||
-      !Number.isFinite(order.pnl)
-    ) {
-      return [];
-    }
-
-    const slippageCost = getRuntimeOrderSlippageCost(order);
-
-    return [
-      {
-        id: order.orderId,
-        timestamp,
-        pnl: order.pnl,
-        symbol: order.symbol,
-        direction: order.direction,
-        exitReason: order.exitType ?? null,
-        slippageCost,
-        grossPnl: slippageCost == null ? order.pnl : order.pnl + slippageCost,
-        approved: true,
-        blocked: false,
-      },
-    ];
-  });
-
-const getOrdersSummary = (orders: RuntimeOrderView[]) => {
-  const closedOrders = orders.filter((order) => order.status === 'closed');
-  const winningOrders = closedOrders.filter(
-    (order) =>
-      typeof order.pnl === 'number' &&
-      Number.isFinite(order.pnl) &&
-      order.pnl > 0,
-  );
-
-  const sumPnl = (direction: RuntimeOrderView['direction']) =>
-    closedOrders.reduce((total, order) => {
-      if (
-        order.direction !== direction ||
-        typeof order.pnl !== 'number' ||
-        !Number.isFinite(order.pnl)
-      ) {
-        return total;
-      }
-
-      return total + order.pnl;
-    }, 0);
-
-  return {
-    closedOrders: closedOrders.length,
-    winRate:
-      closedOrders.length > 0
-        ? (winningOrders.length / closedOrders.length) * 100
-        : 0,
-    longPnl: sumPnl('LONG'),
-    shortPnl: sumPnl('SHORT'),
-  };
-};
-
-const getRuntimeOrdersSummaryItems = (
-  orders: RuntimeOrderView[],
-): OrdersDrawerSummaryItem[] => {
-  const summary = getOrdersSummary(orders);
-
-  return [
-    {
-      title: 'Total Closed Orders',
-      value: formatInteger(summary.closedOrders),
-    },
-    {
-      title: 'Win Rate',
-      value: formatPercent(summary.winRate, { signed: false }),
-    },
-    {
-      title: 'P&L of Closed Long Orders (USDT)',
-      value: formatSignedNumber(summary.longPnl),
-      color: getPnlColor(summary.longPnl),
-    },
-    {
-      title: 'P&L of Closed Short Orders (USDT)',
-      value: formatSignedNumber(summary.shortPnl),
-      color: getPnlColor(summary.shortPnl),
-    },
-  ];
-};
-
-const RuntimeOrdersSummaryBlock = ({
-  items,
-}: {
-  items: OrdersDrawerSummaryItem[];
-}) => (
-  <Box
-    p={4}
-    borderWidth="1px"
-    borderColor="gray.800"
-    borderRadius="md"
-    bg="gray.900"
-  >
-    <SimpleGrid columns={{ base: 1, md: 2 }} gap={4}>
-      {items.map((item) => (
-        <Box key={item.title}>
-          <Text fontSize="sm" color="gray.500">
-            {item.title}
-          </Text>
-          <Text
-            mt={1}
-            fontSize="2xl"
-            color={item.color ?? 'gray.100'}
-            fontWeight="bold"
-            fontFamily="mono"
-            lineHeight="1.1"
-          >
-            {item.value}
-          </Text>
-        </Box>
-      ))}
-    </SimpleGrid>
-  </Box>
-);
-
-const buildRuntimeDrawerMetrics = (
-  strategy: RuntimeStrategyView,
-): RuntimeDrawerMetric[] => {
-  const getStatMetric = (
-    id: TestThresholdsKey,
-    label: string,
-  ): RuntimeDrawerMetric => {
-    const { formatted, level } = getFormatted(strategy.stat, id);
-
-    return {
-      id,
-      label,
-      value: formatted,
-      level,
-    };
-  };
-
-  const maxLossStreak = calculateMaxLossStreak(strategy.orderLog);
-
-  return [
-    getStatMetric('netProfit', 'P&L'),
-    {
-      id: 'closedPnl',
-      label: 'Closed P&L',
-      value: formatSignedNumber(strategy.summary.closedPnl),
-      level:
-        strategy.summary.closedPnl > 0
-          ? 'success'
-          : strategy.summary.closedPnl < 0
-            ? 'error'
-            : 'neutral',
-    },
-    {
-      id: 'activePnl',
-      label: 'Active P&L',
-      value: formatSignedNumber(strategy.summary.activePnl),
-      level:
-        strategy.summary.activePnl > 0
-          ? 'success'
-          : strategy.summary.activePnl < 0
-            ? 'error'
-            : 'neutral',
-    },
-    getStatMetric('maxDrawdown', 'Max drawdown'),
-    {
-      id: 'maxLossStreak',
-      label: 'Max loss streak',
-      value: formatInteger(maxLossStreak),
-      level: maxLossStreak > 0 ? 'warning' : 'success',
-    },
-    {
-      id: 'totalTrades',
-      label: 'Trades',
-      value: formatInteger(strategy.summary.totalTrades),
-      level: 'neutral',
-    },
-    {
-      id: 'activeTrades',
-      label: 'Active',
-      value: formatInteger(strategy.summary.activeTrades),
-      level: strategy.summary.activeTrades > 0 ? 'warning' : 'neutral',
-    },
-    {
-      id: 'symbolTop1',
-      label: 'Symbol top 1',
-      value: formatPercent(strategy.summary.symbolConcentrationTop1),
-      level:
-        (strategy.summary.symbolConcentrationTop1 ?? 0) >= 60
-          ? 'warning'
-          : 'neutral',
-    },
-    {
-      id: 'symbolTop5',
-      label: 'Symbol top 5',
-      value: formatPercent(strategy.summary.symbolConcentrationTop5),
-      level: 'neutral',
-    },
-    getStatMetric('winRate', 'Win Rate'),
-  ];
-};
-
-const buildRuntimeSymbolPnlRanking = (
-  orders: RuntimeOrderView[],
-): RuntimeSymbolPnlRank[] => {
-  const grouped = new Map<
-    string,
-    { symbol: string; pnl: number; orders: number; wins: number }
-  >();
-
-  for (const order of orders) {
-    if (typeof order.pnl !== 'number' || !Number.isFinite(order.pnl)) {
-      continue;
-    }
-
-    const existing = grouped.get(order.symbol) ?? {
-      symbol: order.symbol,
-      pnl: 0,
-      orders: 0,
-      wins: 0,
-    };
-
-    existing.pnl += order.pnl;
-    existing.orders += 1;
-    existing.wins += order.pnl > 0 ? 1 : 0;
-    grouped.set(order.symbol, existing);
-  }
-
-  return [...grouped.values()]
-    .map((rank) => ({
-      symbol: rank.symbol,
-      pnl: rank.pnl,
-      orders: rank.orders,
-      winRate: rank.orders > 0 ? (rank.wins / rank.orders) * 100 : null,
-      avgPnl: rank.orders > 0 ? rank.pnl / rank.orders : null,
-    }))
-    .sort(
-      (left, right) =>
-        Math.abs(right.pnl) - Math.abs(left.pnl) ||
-        right.pnl - left.pnl ||
-        left.symbol.localeCompare(right.symbol),
-    );
-};
-
-const buildRuntimeSymbolConcentration = (
-  orders: RuntimeOrderView[],
-): RuntimeSymbolConcentrationRow[] => {
-  const ranking = buildRuntimeSymbolPnlRanking(orders).map((rank) => ({
-    ...rank,
-    absPnl: Math.abs(rank.pnl),
-  }));
-  const totalAbsPnl = ranking.reduce((sum, rank) => sum + rank.absPnl, 0);
-  const totalOrders = ranking.reduce((sum, rank) => sum + rank.orders, 0);
-
-  if (totalAbsPnl <= 0 || totalOrders <= 0) {
-    return [];
-  }
-
-  return ranking
-    .map((rank) => ({
-      ...rank,
-      absPnlShare: (rank.absPnl / totalAbsPnl) * 100,
-      orderShare: (rank.orders / totalOrders) * 100,
-    }))
-    .sort(
-      (left, right) =>
-        right.absPnlShare - left.absPnlShare ||
-        right.orderShare - left.orderShare ||
-        left.symbol.localeCompare(right.symbol),
-    );
-};
-
-const buildRuntimeDirectionStats = (
-  orders: RuntimeOrderView[],
-): RuntimeDirectionStats[] =>
-  (['LONG', 'SHORT'] as const).map((direction) => {
-    const directionOrders = orders.filter(
-      (order) => order.direction === direction,
-    );
-    const ordersWithPnl = directionOrders.filter(
-      (order) => typeof order.pnl === 'number' && Number.isFinite(order.pnl),
-    );
-    const pnl = ordersWithPnl.reduce((sum, order) => sum + (order.pnl ?? 0), 0);
-
-    return {
-      direction,
-      orders: directionOrders.length,
-      active: directionOrders.filter((order) => order.status === 'active')
-        .length,
-      closed: directionOrders.filter((order) => order.status === 'closed')
-        .length,
-      wins: ordersWithPnl.filter((order) => (order.pnl ?? 0) > 0).length,
-      pnl,
-      avgPnl: ordersWithPnl.length > 0 ? pnl / ordersWithPnl.length : null,
-    };
-  });
-
-const renderPnlRanking = ({
-  title,
-  subtitle,
-  ranking,
-  maxAbsPnl,
-}: {
-  title: string;
-  subtitle: string;
-  ranking: RuntimeSymbolPnlRank[];
-  maxAbsPnl: number;
-}) => (
-  <Box
-    p={4}
-    borderWidth="1px"
-    borderColor="gray.800"
-    borderRadius="md"
-    bg="gray.900"
-  >
-    <Flex justify="space-between" align="baseline" gap={3} mb={4}>
-      <Text fontSize="sm" color="gray.300" fontWeight="semibold">
-        {title}
-      </Text>
-      <Text fontSize="xs" color="gray.500">
-        {subtitle}
-      </Text>
-    </Flex>
-
-    {ranking.length ? (
-      <Flex direction="column" gap={3}>
-        {ranking.map((rank) => {
-          const width = Math.max(4, (Math.abs(rank.pnl) / maxAbsPnl) * 100);
-
-          return (
-            <Grid
-              key={rank.symbol}
-              templateColumns="1.1fr 2fr 0.8fr"
-              alignItems="center"
-              gap={3}
-            >
-              <Box minW={0}>
-                <Text
-                  fontSize="sm"
-                  color="gray.200"
-                  fontWeight="bold"
-                  overflow="hidden"
-                  textOverflow="ellipsis"
-                  whiteSpace="nowrap"
-                >
-                  {rank.symbol}
-                </Text>
-                <Text fontSize="xs" color="gray.500" fontFamily="mono">
-                  {formatInteger(rank.orders)} orders ·{' '}
-                  {formatPercent(rank.winRate)}
-                </Text>
-                <Text fontSize="xs" color="gray.600" fontFamily="mono">
-                  avg {formatSignedNumber(rank.avgPnl)}
-                </Text>
-              </Box>
-              <Box h="10px" bg="gray.800">
-                <Box h="full" w={`${width}%`} bg={getPnlBarColor(rank.pnl)} />
-              </Box>
-              <Text
-                fontSize="sm"
-                color={getPnlColor(rank.pnl)}
-                fontWeight="bold"
-                fontFamily="mono"
-                textAlign="right"
-              >
-                {formatSignedNumber(rank.pnl)}
-              </Text>
-            </Grid>
-          );
-        })}
-      </Flex>
-    ) : (
-      <Text fontSize="sm" color="gray.500">
-        No symbol P&L data
-      </Text>
-    )}
-  </Box>
-);
-
-const mapRuntimeOrder = (order: RuntimeOrderView): OrdersDrawerOrder => {
-  const displayEntryPrice = order.actualEntryPrice ?? order.entryPrice;
-  const displayExitPrice =
-    order.status === 'active'
-      ? order.currentPrice
-      : order.actualExitPrice ?? order.exitPrice;
-  const notional =
-    typeof order.qty === 'number' &&
-    Number.isFinite(order.qty) &&
-    typeof displayEntryPrice === 'number' &&
-    Number.isFinite(displayEntryPrice)
-      ? order.qty * displayEntryPrice
-      : null;
-
-  return {
-    id: order.orderId,
-    title: order.symbol,
-    reference: formatOrderReference(order.orderId),
-    period: {
-      start: order.entryTimestamp,
-      end: order.status === 'active' ? null : order.exitTimestamp,
-      durationHours: order.durationHours,
-    },
-    direction: order.direction,
-    status: order.status,
-    statusLabel: formatExitType(order).toUpperCase(),
-    statusColor: order.status === 'active' ? 'orange' : 'gray',
-    pnl: order.pnl,
-    accentColor: getOrderAccentColor(order),
-    metrics: [
-      {
-        title: 'Entry',
-        value: formatPriceUsdt(displayEntryPrice),
-        detail:
-          order.actualEntryPrice == null
-            ? 'actual n/a'
-            : `plan ${formatPriceUsdt(order.entryPrice)} / slip ${formatPercent(order.entrySlippagePercent, { signed: true })}`,
-      },
-      {
-        title: order.status === 'active' ? 'Current' : 'Exit',
-        value: formatPriceUsdt(displayExitPrice),
-        detail:
-          order.status === 'active' ? (
-            <RiskLevelsDetail order={order} />
-          ) : (
-            `slip ${formatPercent(order.exitSlippagePercent, { signed: true })}`
-          ),
-      },
-      {
-        title: 'Notional',
-        value: formatUsdt(notional),
-      },
-      {
-        title: 'Fees',
-        value: formatFee(order.totalFee),
-        detail: <FeesDetail order={order} />,
-      },
-      {
-        title: 'Qty',
-        value: formatCompactNumber(order.qty),
-      },
-    ],
-  };
-};
-
-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,
@@ -737,27 +69,7 @@ export const RuntimeStrategyCard = ({
     () => buildRuntimeStrategyCardViewModel(strategy),
     [strategy],
   );
-  const {
-    lastTrade,
-    runtimeOrders,
-    runtimeOrderSummaryItems,
-    drawerMetrics,
-    symbolConcentration,
-    topSymbolPnlRanking,
-    worstSymbolPnlRanking,
-    symbolRankingMaxAbsPnl,
-    directionStats,
-    advancedMetrics,
-  } = viewModel;
-  const {
-    monthlyStats,
-    tradePoints: runtimeTradePoints,
-    drawdownPoints,
-    rollingPerformancePoints,
-    pnlDistributionBins,
-    sessionPnlStats,
-    hourlyPnlStats,
-  } = viewModel.performance;
+  const { lastTrade, runtimeOrders } = viewModel;
 
   return (
     <Box
@@ -891,516 +203,13 @@ export const RuntimeStrategyCard = ({
         onSaved={onUpdated}
       />
 
-      <Drawer.Root
-        size="xl"
+      <RuntimeStrategyStatsDrawer
+        strategy={strategy}
+        provider={provider}
         open={statsOpen}
-        onOpenChange={(e) => setStatsOpen(e.open)}
-      >
-        <Portal>
-          <Drawer.Backdrop />
-          <Drawer.Positioner>
-            <Drawer.Content
-              display="flex"
-              flexDirection="column"
-              w="50vw"
-              minW="640px"
-              maxW="50vw"
-              bg="gray.950"
-            >
-              <Drawer.Header>
-                <Drawer.Title>{strategy.strategyName}</Drawer.Title>
-                <Drawer.CloseTrigger asChild>
-                  <CloseButton size="sm" />
-                </Drawer.CloseTrigger>
-              </Drawer.Header>
-
-              <Drawer.Body
-                display="flex"
-                flexDirection="column"
-                gap={4}
-                overflowY="auto"
-                flex="1"
-                minH="0"
-                w="full"
-              >
-                <RuntimeOrdersSummaryBlock items={runtimeOrderSummaryItems} />
-
-                <Box
-                  p={4}
-                  borderWidth="1px"
-                  borderColor="gray.800"
-                  borderRadius="md"
-                  bg="gray.900"
-                >
-                  <Text fontSize="sm" color="gray.500" mb={3}>
-                    connector: {provider}
-                  </Text>
-
-                  <SimpleGrid columns={{ base: 2, md: 4 }} gap={3}>
-                    {drawerMetrics.map((metric) => (
-                      <Box
-                        key={metric.id}
-                        p={3}
-                        borderWidth="1px"
-                        borderColor="gray.800"
-                        borderRadius="md"
-                        bg="blackAlpha.300"
-                      >
-                        <Text
-                          fontSize="xs"
-                          color="gray.400"
-                          fontWeight="semibold"
-                          textTransform="uppercase"
-                        >
-                          {metric.label}
-                        </Text>
-                        <Text
-                          mt={1}
-                          fontSize="xl"
-                          color={getMetricColor(metric.level)}
-                          fontWeight="bold"
-                          fontFamily="mono"
-                          lineHeight="1.2"
-                        >
-                          {metric.value}
-                        </Text>
-                      </Box>
-                    ))}
-                  </SimpleGrid>
-                </Box>
-
-                <AdvancedMetricsPanel metrics={advancedMetrics} />
-
-                {monthlyStats.length ? (
-                  <Box
-                    p={4}
-                    borderWidth="1px"
-                    borderColor="gray.800"
-                    borderRadius="md"
-                    bg="gray.900"
-                  >
-                    <Text
-                      fontSize="sm"
-                      color="gray.300"
-                      fontWeight="semibold"
-                      mb={3}
-                    >
-                      Monthly Performance
-                    </Text>
-
-                    <Flex direction="column" gap={4}>
-                      {monthlyStats.map((yearGroup) => (
-                        <Box key={yearGroup.year}>
-                          <Flex align="center" gap={3} mb={3}>
-                            <Text
-                              fontSize="lg"
-                              color="gray.100"
-                              fontWeight="bold"
-                              fontFamily="mono"
-                            >
-                              {yearGroup.year}
-                            </Text>
-                            <Box flex="1" h="1px" bg="gray.800" />
-                          </Flex>
-
-                          <Flex direction="column" gap={3}>
-                            {buildQuarterlyMonthlyStats(yearGroup.months).map(
-                              (quarter) => (
-                                <Flex
-                                  key={`${yearGroup.year}-${quarter.label}`}
-                                  align="stretch"
-                                  gap={3}
-                                >
-                                  <Flex
-                                    w="34px"
-                                    flexShrink={0}
-                                    align="center"
-                                    justify="center"
-                                  >
-                                    <Text
-                                      fontSize="xs"
-                                      color="gray.500"
-                                      fontFamily="mono"
-                                      fontWeight="bold"
-                                    >
-                                      {quarter.label}
-                                    </Text>
-                                  </Flex>
-
-                                  <SimpleGrid columns={3} gap={3} flex="1">
-                                    {quarter.months.map(
-                                      (month, monthOffset) => {
-                                        const monthIndex =
-                                          quarter.monthIndexes[monthOffset] ??
-                                          0;
-
-                                        if (!month) {
-                                          return (
-                                            <Box
-                                              key={`${quarter.label}-${monthIndex}-empty`}
-                                              minH="116px"
-                                              visibility="hidden"
-                                            />
-                                          );
-                                        }
-
-                                        const winRate =
-                                          month.orders > 0
-                                            ? (month.wins / month.orders) * 100
-                                            : null;
-
-                                        return (
-                                          <Box
-                                            key={month.id}
-                                            p={3}
-                                            minH="116px"
-                                            borderWidth="1px"
-                                            borderColor="gray.800"
-                                            borderLeftWidth="3px"
-                                            borderLeftColor={getPnlColor(
-                                              month.pnl,
-                                            )}
-                                            borderRadius="md"
-                                            bg="blackAlpha.300"
-                                          >
-                                            <Flex
-                                              justify="space-between"
-                                              align="baseline"
-                                              gap={2}
-                                            >
-                                              <Text
-                                                fontSize="sm"
-                                                color="gray.200"
-                                                fontWeight="bold"
-                                              >
-                                                {month.monthLabel}
-                                              </Text>
-                                              <Text
-                                                fontSize="xs"
-                                                color="gray.500"
-                                                fontFamily="mono"
-                                              >
-                                                {String(
-                                                  month.monthIndex,
-                                                ).padStart(2, '0')}
-                                              </Text>
-                                            </Flex>
-                                            <Text
-                                              mt={3}
-                                              fontSize="xl"
-                                              color={getPnlColor(month.pnl)}
-                                              fontWeight="bold"
-                                              fontFamily="mono"
-                                              lineHeight="1.2"
-                                            >
-                                              {formatSignedNumber(month.pnl)}
-                                            </Text>
-                                            <Flex
-                                              mt={3}
-                                              justify="space-between"
-                                              gap={3}
-                                            >
-                                              <Box>
-                                                <Text
-                                                  fontSize="xs"
-                                                  color="gray.500"
-                                                >
-                                                  Orders
-                                                </Text>
-                                                <Text
-                                                  fontSize="sm"
-                                                  color="gray.300"
-                                                  fontFamily="mono"
-                                                  fontWeight="semibold"
-                                                >
-                                                  {formatInteger(month.orders)}
-                                                </Text>
-                                              </Box>
-                                              <Box textAlign="right">
-                                                <Text
-                                                  fontSize="xs"
-                                                  color="gray.500"
-                                                >
-                                                  Win rate
-                                                </Text>
-                                                <Text
-                                                  fontSize="sm"
-                                                  color="gray.300"
-                                                  fontFamily="mono"
-                                                  fontWeight="semibold"
-                                                >
-                                                  {formatPercent(winRate)}
-                                                </Text>
-                                              </Box>
-                                            </Flex>
-                                          </Box>
-                                        );
-                                      },
-                                    )}
-                                  </SimpleGrid>
-                                </Flex>
-                              ),
-                            )}
-                          </Flex>
-                        </Box>
-                      ))}
-                    </Flex>
-                  </Box>
-                ) : null}
-
-                <Flex direction="column" gap={4}>
-                  <ChartPanel
-                    title="Drawdown Timeline"
-                    subtitle="equity peak to current equity"
-                  >
-                    <DrawdownTimelineChart points={drawdownPoints} />
-                  </ChartPanel>
-
-                  <ChartPanel
-                    title="Rolling Performance"
-                    subtitle="last 50 trades"
-                  >
-                    <RollingPerformanceChart
-                      points={rollingPerformancePoints}
-                    />
-                  </ChartPanel>
-
-                  <ChartPanel
-                    title="Win / Loss Streak Timeline"
-                    subtitle="trade sequence"
-                  >
-                    <WinLossStreakTimelineChart trades={runtimeTradePoints} />
-                  </ChartPanel>
-
-                  <ChartPanel
-                    title="P&L Distribution"
-                    subtitle="trade result buckets"
-                  >
-                    <PnlDistributionChart bins={pnlDistributionBins} />
-                  </ChartPanel>
-
-                  <ChartPanel
-                    title="P&L by Time of Day / Session"
-                    subtitle="UTC"
-                  >
-                    <TimeOfDaySessionChart
-                      sessions={sessionPnlStats}
-                      hours={hourlyPnlStats}
-                    />
-                  </ChartPanel>
-                </Flex>
-
-                <Flex direction="column" gap={4}>
-                  {renderPnlRanking({
-                    title: 'P&L Ranking',
-                    subtitle: 'Top 10 contracts',
-                    ranking: topSymbolPnlRanking,
-                    maxAbsPnl: symbolRankingMaxAbsPnl,
-                  })}
-                  {renderPnlRanking({
-                    title: 'Worst Contracts',
-                    subtitle: 'Worst 10 contracts',
-                    ranking: worstSymbolPnlRanking,
-                    maxAbsPnl: symbolRankingMaxAbsPnl,
-                  })}
-                </Flex>
-
-                {symbolConcentration.length ? (
-                  <Box
-                    p={4}
-                    borderWidth="1px"
-                    borderColor="gray.800"
-                    borderRadius="md"
-                    bg="gray.900"
-                  >
-                    <Flex justify="space-between" align="baseline" mb={3}>
-                      <Text
-                        fontSize="sm"
-                        color="gray.300"
-                        fontWeight="semibold"
-                      >
-                        Symbol Concentration
-                      </Text>
-                      <Text fontSize="xs" color="gray.600" textAlign="right">
-                        absolute P&L and order share
-                      </Text>
-                    </Flex>
-
-                    <Flex direction="column" gap={2}>
-                      {symbolConcentration.map((row) => (
-                        <Box
-                          key={row.symbol}
-                          p={3}
-                          borderWidth="1px"
-                          borderColor="gray.800"
-                          borderRadius="md"
-                          bg="blackAlpha.300"
-                        >
-                          <Flex justify="space-between" align="center" gap={3}>
-                            <Box minW="0">
-                              <Text
-                                color="gray.100"
-                                fontSize="sm"
-                                fontWeight="bold"
-                              >
-                                {row.symbol}
-                              </Text>
-                              <Text
-                                mt={1}
-                                color="gray.500"
-                                fontSize="xs"
-                                fontFamily="mono"
-                              >
-                                {formatInteger(row.orders)} trades / order share{' '}
-                                {formatPercent(row.orderShare)}
-                              </Text>
-                            </Box>
-                            <Box textAlign="right" flexShrink={0}>
-                              <Text
-                                color={getPnlColor(row.pnl)}
-                                fontSize="sm"
-                                fontWeight="bold"
-                                fontFamily="mono"
-                              >
-                                {formatSignedNumber(row.pnl)}
-                              </Text>
-                              <Text
-                                mt={1}
-                                color="gray.400"
-                                fontSize="xs"
-                                fontFamily="mono"
-                              >
-                                abs {formatPercent(row.absPnlShare)}
-                              </Text>
-                            </Box>
-                          </Flex>
-                        </Box>
-                      ))}
-                    </Flex>
-                  </Box>
-                ) : null}
-
-                <Box
-                  p={4}
-                  borderWidth="1px"
-                  borderColor="gray.800"
-                  borderRadius="md"
-                  bg="gray.900"
-                >
-                  <Text
-                    fontSize="sm"
-                    color="gray.300"
-                    fontWeight="semibold"
-                    mb={3}
-                  >
-                    LONG / SHORT
-                  </Text>
-                  <SimpleGrid columns={{ base: 1, md: 2 }} gap={3}>
-                    {directionStats.map((group) => {
-                      const ordersWithPnl = group.closed + group.active;
-                      const winRate =
-                        ordersWithPnl > 0
-                          ? (group.wins / ordersWithPnl) * 100
-                          : null;
-
-                      return (
-                        <Box
-                          key={group.direction}
-                          p={3}
-                          borderWidth="1px"
-                          borderColor="gray.800"
-                          borderRadius="md"
-                          bg="blackAlpha.300"
-                        >
-                          <Flex justify="space-between" align="center" mb={3}>
-                            <Text
-                              fontSize="sm"
-                              color={
-                                group.direction === 'LONG'
-                                  ? 'teal.400'
-                                  : 'pink.300'
-                              }
-                              fontWeight="bold"
-                            >
-                              {group.direction}
-                            </Text>
-                            {!group.orders ? (
-                              <Text fontSize="xs" color="gray.500">
-                                no data
-                              </Text>
-                            ) : null}
-                          </Flex>
-
-                          <SimpleGrid columns={1} gap={2}>
-                            {[
-                              [
-                                'Orders',
-                                formatInteger(group.orders),
-                                'neutral',
-                              ],
-                              [
-                                'Active',
-                                formatInteger(group.active),
-                                'warning',
-                              ],
-                              [
-                                'Closed',
-                                formatInteger(group.closed),
-                                'neutral',
-                              ],
-                              ['Win rate', formatPercent(winRate), 'neutral'],
-                              [
-                                'P&L',
-                                formatSignedNumber(group.pnl),
-                                group.pnl > 0
-                                  ? 'success'
-                                  : group.pnl < 0
-                                    ? 'error'
-                                    : 'neutral',
-                              ],
-                              [
-                                'Avg Profit',
-                                formatSignedNumber(group.avgPnl),
-                                (group.avgPnl ?? 0) > 0
-                                  ? 'success'
-                                  : (group.avgPnl ?? 0) < 0
-                                    ? 'error'
-                                    : 'neutral',
-                              ],
-                            ].map(([label, value, level]) => (
-                              <Flex
-                                key={label}
-                                justify="space-between"
-                                align="baseline"
-                                gap={3}
-                              >
-                                <Text fontSize="xs" color="gray.500">
-                                  {label}
-                                </Text>
-                                <Text
-                                  fontSize="sm"
-                                  color={getMetricColor(
-                                    level as ThresholdLevel,
-                                  )}
-                                  fontFamily="mono"
-                                  fontWeight="semibold"
-                                  textAlign="right"
-                                >
-                                  {value}
-                                </Text>
-                              </Flex>
-                            ))}
-                          </SimpleGrid>
-                        </Box>
-                      );
-                    })}
-                  </SimpleGrid>
-                </Box>
-              </Drawer.Body>
-            </Drawer.Content>
-          </Drawer.Positioner>
-        </Portal>
-      </Drawer.Root>
+        onOpenChange={setStatsOpen}
+        viewModel={viewModel}
+      />
 
       <RuntimeStrategyChart
         orderLog={strategy.orderLog}