@tradejs/app 2.0.21 → 3.0.0

package/src/app/lib/runtimeStrategies.ts

@@ -9,12 +9,15 @@ import type {
   PositionPnlSnapshot,
   RuntimeTradeRecord,
   SimpleOrderLogData,
-  StrategyConfig,
-  StrategyEvidenceTimeline,
   TestStat,
-  MarketUniverse,
-  Interval,
 } from '@tradejs/types';
+import type { RuntimeStrategyTradeView } from './runtimeStrategyContracts';
+export type {
+  RuntimeStrategiesResponse,
+  RuntimeStrategyTradeSummary,
+  RuntimeStrategyTradeView,
+  RuntimeStrategyView,
+} from './runtimeStrategyContracts';
 import {
   takeExactClosedPnlMatch,
   type ClosedPnlRecordWithOrderLinkId,
@@ -44,82 +47,6 @@ type RuntimeTradeWithResolvedPnl = RuntimeTradeRecord & {
   resolvedTimestamp: number;
 };
 
-export interface RuntimeStrategyTradeSummary {
-  totalTrades: number;
-  activeTrades: number;
-  closedTrades: number;
-  wins: number;
-  losses: number;
-  activePnl: number;
-  closedPnl: number;
-  totalPnl: number;
-  symbolConcentrationTop1: number | null;
-  symbolConcentrationTop5: number | null;
-}
-
-export interface RuntimeStrategyTradeView {
-  orderId: string;
-  symbol: string;
-  direction: RuntimeTradeRecord['direction'];
-  status: RuntimeTradeRecord['status'];
-  qty: number;
-  entryTimestamp: number;
-  entryPrice: number;
-  actualEntryPrice: number | null;
-  exitTimestamp: number | null;
-  exitPrice: number | null;
-  actualExitPrice: number | null;
-  currentPrice: number | null;
-  pnl: number | null;
-  durationHours: number | null;
-  entrySlippagePercent: number | null;
-  exitSlippagePercent: number | null;
-  exitType: RuntimeTradeRecord['exitType'] | null;
-  takeProfitPrice: number | null;
-  stopLossPrice: number | null;
-  takeProfitPercent: number | null;
-  stopLossPercent: number | null;
-  openFee: number | null;
-  closeFee: number | null;
-  fundingFee: number | null;
-  totalFee: number | null;
-  lastSyncedAt: number | null;
-}
-
-export interface RuntimeStrategyView {
-  runtimeKey: string;
-  strategyName: string;
-  configId: string;
-  interval: Interval;
-  universe: MarketUniverse;
-  accountId?: string;
-  accountLabel?: string;
-  deploymentId?: string;
-  policyProfileId?: string;
-  connected: boolean;
-  enabled: boolean;
-  config: StrategyConfig | null;
-  symbols: string[];
-  stat: TestStat;
-  summary: RuntimeStrategyTradeSummary;
-  orderLog: SimpleOrderLogData;
-  evidenceTimeline: StrategyEvidenceTimeline;
-  recentTrades: RuntimeStrategyTradeView[];
-  orders: RuntimeStrategyTradeView[];
-}
-
-export interface RuntimeStrategiesResponse {
-  provider: string;
-  hours: number;
-  generatedAt: number;
-  dataSources?: {
-    localTrades: number;
-    exchangeFallbackTrades: number;
-    exchangeErrors: string[];
-  };
-  strategies: RuntimeStrategyView[];
-}
-
 const roundValue = (value: number, digits = 2) => {
   if (!Number.isFinite(value)) {
     return 0;

package/src/app/lib/runtimeStrategyContracts.ts

@@ -0,0 +1,85 @@
+import type {
+  Interval,
+  MarketUniverse,
+  RuntimeTradeRecord,
+  SimpleOrderLogData,
+  StrategyConfig,
+  StrategyEvidenceTimeline,
+  TestStat,
+} from '@tradejs/types';
+
+export interface RuntimeStrategyTradeSummary {
+  totalTrades: number;
+  activeTrades: number;
+  closedTrades: number;
+  wins: number;
+  losses: number;
+  activePnl: number;
+  closedPnl: number;
+  totalPnl: number;
+  symbolConcentrationTop1: number | null;
+  symbolConcentrationTop5: number | null;
+}
+
+export interface RuntimeStrategyTradeView {
+  orderId: string;
+  symbol: string;
+  direction: RuntimeTradeRecord['direction'];
+  status: RuntimeTradeRecord['status'];
+  qty: number;
+  entryTimestamp: number;
+  entryPrice: number;
+  actualEntryPrice: number | null;
+  exitTimestamp: number | null;
+  exitPrice: number | null;
+  actualExitPrice: number | null;
+  currentPrice: number | null;
+  pnl: number | null;
+  durationHours: number | null;
+  entrySlippagePercent: number | null;
+  exitSlippagePercent: number | null;
+  exitType: RuntimeTradeRecord['exitType'] | null;
+  takeProfitPrice: number | null;
+  stopLossPrice: number | null;
+  takeProfitPercent: number | null;
+  stopLossPercent: number | null;
+  openFee: number | null;
+  closeFee: number | null;
+  fundingFee: number | null;
+  totalFee: number | null;
+  lastSyncedAt: number | null;
+}
+
+export interface RuntimeStrategyView {
+  runtimeKey: string;
+  strategyName: string;
+  configId: string;
+  interval: Interval;
+  universe: MarketUniverse;
+  accountId?: string;
+  accountLabel?: string;
+  deploymentId?: string;
+  policyProfileId?: string;
+  connected: boolean;
+  enabled: boolean;
+  config: StrategyConfig | null;
+  symbols: string[];
+  stat: TestStat;
+  summary: RuntimeStrategyTradeSummary;
+  orderLog: SimpleOrderLogData;
+  evidenceTimeline: StrategyEvidenceTimeline;
+  recentTrades: RuntimeStrategyTradeView[];
+  orders: RuntimeStrategyTradeView[];
+}
+
+export interface RuntimeStrategiesResponse {
+  provider: string;
+  hours: number;
+  generatedAt: number;
+  dataSources?: {
+    localTrades: number;
+    exchangeFallbackTrades: number;
+    exchangeErrors: string[];
+  };
+  strategies: RuntimeStrategyView[];
+}

package/src/app/routes/backtest/BacktestJobItem.tsx

@@ -0,0 +1,275 @@
+'use client';
+
+import { Badge, Box, Button, Flex, Grid, Stack, Text } from '@chakra-ui/react';
+import {
+  FiFolder,
+  FiPause,
+  FiPlay,
+  FiSquare,
+  FiTrash2,
+  FiX,
+} from 'react-icons/fi';
+import type {
+  BacktestJobRecord,
+  BacktestJobStatus,
+} from '#app/lib/backtestJobContracts';
+import type { JobAction } from './useBacktestRunsController';
+
+const formatNumber = (value: number | null | undefined, fractionDigits = 1) =>
+  typeof value === 'number' && Number.isFinite(value)
+    ? value.toFixed(fractionDigits)
+    : '-';
+
+const formatDateTime = (value: string | undefined) => {
+  if (!value) {
+    return '-';
+  }
+
+  const timestamp = Date.parse(value);
+  if (!Number.isFinite(timestamp)) {
+    return '-';
+  }
+
+  return new Intl.DateTimeFormat('en', {
+    month: 'short',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  }).format(timestamp);
+};
+
+const statusTone = (status: BacktestJobStatus) => {
+  if (status === 'running') {
+    return 'teal';
+  }
+  if (status === 'pausing' || status === 'paused') {
+    return 'yellow';
+  }
+  if (status === 'completed') {
+    return 'green';
+  }
+  if (status === 'cancelled') {
+    return 'gray';
+  }
+  return 'red';
+};
+
+const statusLabel = (status: BacktestJobStatus) =>
+  status.charAt(0).toUpperCase() + status.slice(1);
+
+const getJobTitle = (job: BacktestJobRecord) =>
+  `${job.request.strategyName} / ${job.request.configId}`;
+
+interface BacktestJobItemProps {
+  job: BacktestJobRecord;
+  busyAction: string;
+  onAction: (jobId: string, action: JobAction) => void;
+  onDelete: (jobId: string) => void;
+  onOpenResults: () => void;
+}
+
+export const BacktestJobItem = ({
+  job,
+  busyAction,
+  onAction,
+  onDelete,
+  onOpenResults,
+}: BacktestJobItemProps) => {
+  const progress = job.progress;
+  const totalLabel = progress.total == null ? '?' : progress.total;
+  const logs = job.logs.slice(-10);
+  const canPause = job.status === 'running';
+  const canResume = job.status === 'paused';
+  const canCancel = !['completed', 'cancelled'].includes(job.status);
+  const canDelete = ['completed', 'cancelled', 'failed', 'paused'].includes(
+    job.status,
+  );
+
+  return (
+    <Box
+      borderWidth="1px"
+      borderColor="gray.700"
+      bg="gray.800"
+      p={4}
+      borderRadius="md"
+    >
+      <Flex alignItems="flex-start" justifyContent="space-between" gap={4}>
+        <Box minW={0}>
+          <Flex gap={2} alignItems="center" wrap="wrap">
+            <Text fontWeight="700" wordBreak="break-word">
+              {getJobTitle(job)}
+            </Text>
+            <Badge colorPalette={statusTone(job.status)}>
+              {statusLabel(job.status)}
+            </Badge>
+            {job.request.ai ? <Badge colorPalette="purple">AI</Badge> : null}
+            {job.request.fast ? <Badge colorPalette="blue">Fast</Badge> : null}
+          </Flex>
+          <Text fontSize="xs" color="gray.400" mt={1}>
+            Started {formatDateTime(job.startedAt)} · Updated{' '}
+            {formatDateTime(job.updatedAt)} · Run #{job.runCount}
+          </Text>
+          {job.pauseReason ? (
+            <Text fontSize="xs" color="yellow.300" mt={1}>
+              Pause reason: {job.pauseReason}
+            </Text>
+          ) : null}
+          {job.error ? (
+            <Text fontSize="xs" color="red.300" mt={1}>
+              {job.error}
+            </Text>
+          ) : null}
+        </Box>
+
+        <Flex gap={2} flexShrink={0} wrap="wrap" justifyContent="flex-end">
+          {canPause ? (
+            <>
+              <Button
+                type="button"
+                size="xs"
+                variant="outline"
+                loading={busyAction === `${job.id}:pause`}
+                onClick={() => onAction(job.id, 'pause')}
+              >
+                <FiPause />
+                Pause
+              </Button>
+              <Button
+                type="button"
+                size="xs"
+                variant="outline"
+                loading={busyAction === `${job.id}:stop`}
+                onClick={() => onAction(job.id, 'stop')}
+              >
+                <FiSquare />
+                Stop
+              </Button>
+            </>
+          ) : null}
+
+          {canResume ? (
+            <Button
+              type="button"
+              size="xs"
+              colorPalette="teal"
+              loading={busyAction === `${job.id}:resume`}
+              onClick={() => onAction(job.id, 'resume')}
+            >
+              <FiPlay />
+              Resume
+            </Button>
+          ) : null}
+
+          {job.status === 'completed' ? (
+            <Button
+              type="button"
+              size="xs"
+              variant="outline"
+              colorPalette="teal"
+              onClick={onOpenResults}
+            >
+              <FiFolder />
+              Results
+            </Button>
+          ) : null}
+
+          {canCancel ? (
+            <Button
+              type="button"
+              size="xs"
+              variant="ghost"
+              colorPalette="red"
+              loading={busyAction === `${job.id}:cancel`}
+              onClick={() => onAction(job.id, 'cancel')}
+            >
+              <FiX />
+              Cancel
+            </Button>
+          ) : null}
+
+          <Button
+            type="button"
+            size="xs"
+            variant="ghost"
+            colorPalette="red"
+            disabled={!canDelete}
+            loading={busyAction === `${job.id}:delete`}
+            onClick={() => onDelete(job.id)}
+          >
+            <FiTrash2 />
+          </Button>
+        </Flex>
+      </Flex>
+
+      <Box mt={4}>
+        <Flex alignItems="center" justifyContent="space-between" mb={2}>
+          <Text fontSize="sm" color="gray.300">
+            {progress.completed}/{totalLabel} tests
+          </Text>
+          <Text fontSize="sm" color="gray.300">
+            {formatNumber(progress.percent, 1)}%
+          </Text>
+        </Flex>
+        <Box h="8px" bg="gray.800" borderRadius="full" overflow="hidden">
+          <Box
+            h="full"
+            bg={job.status === 'failed' ? 'red.500' : 'teal.400'}
+            width={`${Math.max(0, Math.min(100, progress.percent))}%`}
+            transition="width 0.2s ease"
+          />
+        </Box>
+      </Box>
+
+      <Grid templateColumns="repeat(5, minmax(0, 1fr))" gap={3} mt={4}>
+        <Metric
+          label="Avg P&L"
+          value={`${formatNumber(progress.averageProfit, 2)}$`}
+        />
+        <Metric
+          label="Winrate"
+          value={`${formatNumber(progress.winRate, 1)}%`}
+        />
+        <Metric label="Success" value={String(progress.successTests ?? '-')} />
+        <Metric label="Errors" value={String(progress.errorTests ?? '-')} />
+        <Metric label="PID" value={String(job.pid ?? '-')} />
+      </Grid>
+
+      {logs.length ? (
+        <Box mt={4} bg="gray.950" borderRadius="md" p={3} overflow="hidden">
+          <Stack gap={1}>
+            {logs.map((line, index) => (
+              <Text
+                key={`${job.id}:log:${index}`}
+                fontFamily="mono"
+                fontSize="xs"
+                color="gray.300"
+                whiteSpace="pre-wrap"
+                wordBreak="break-word"
+              >
+                {line}
+              </Text>
+            ))}
+          </Stack>
+        </Box>
+      ) : null}
+    </Box>
+  );
+};
+
+const Metric = ({ label, value }: { label: string; value: string }) => (
+  <Box minW={0}>
+    <Text fontSize="xs" color="gray.500">
+      {label}
+    </Text>
+    <Text
+      fontSize="sm"
+      color="gray.100"
+      fontWeight="700"
+      overflow="hidden"
+      textOverflow="ellipsis"
+      whiteSpace="nowrap"
+    >
+      {value}
+    </Text>
+  </Box>
+);