@tradejs/app 3.1.10 → 3.1.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tradejs/app",
-  "version": "3.1.10",
+  "version": "3.1.11",
   "description": "Installable Next.js UI for the TradeJS TypeScript framework: dashboards, backtests, charts, and runtime data.",
   "keywords": [
     "tradejs",
@@ -52,11 +52,11 @@
     "@chakra-ui/charts": "3.36.1",
     "@chakra-ui/react": "3.36.1",
     "@emotion/react": "^11.14.0",
-    "@tradejs/core": "^3.1.10",
-    "@tradejs/indicators": "^3.1.10",
-    "@tradejs/infra": "^3.1.10",
-    "@tradejs/node": "^3.1.10",
-    "@tradejs/types": "^3.1.10",
+    "@tradejs/core": "^3.1.11",
+    "@tradejs/indicators": "^3.1.11",
+    "@tradejs/infra": "^3.1.11",
+    "@tradejs/node": "^3.1.11",
+    "@tradejs/types": "^3.1.11",
     "@types/bcryptjs": "2.4.6",
     "@types/lodash": "4.17.24",
     "@types/node": "24.13.3",

package/src/app/components/Backtest/TestCard/Chart/index.tsx

@@ -12,13 +12,17 @@ import {
   ReferenceLine,
   ResponsiveContainer,
 } from 'recharts';
-import { useTestsCompare } from '#store';
+import { useBacktest, useTestsCompare } from '#store';
 import { useTestContext } from '../context';
 import { TestCompareList } from '@tradejs/types';
 import { mapOrderLogToChartData, getChartData } from './utils';
 import { getFormatted, getTimeline } from '@tradejs/core/backtest';
 import { formatTimeSeriesTooltipTimestamp } from '#app/lib/timeSeriesChart';
 import { TimeSeriesXAxis } from '#shared/Charts/TimeSeriesXAxis';
+import {
+  buildBacktestTradeOutcomePoints,
+  TradeOutcomeMarkers,
+} from '#shared/Charts/TradeOutcomeMarkers';
 
 interface TestCardChartProps {
   height?: string | number;
@@ -28,6 +32,7 @@ export const TestCardChart = ({ height = '350px' }: TestCardChartProps) => {
   const { testResult } = useTestContext();
   const { test, stat } = testResult;
   const { compareList } = useTestsCompare();
+  const { backtest } = useBacktest(test.name);
 
   const chartData = useMemo(() => {
     if (!compareList.length) {
@@ -56,6 +61,10 @@ export const TestCardChart = ({ height = '350px' }: TestCardChartProps) => {
   ]);
 
   const chart = useChart(chartData as any);
+  const tradeOutcomePoints = useMemo(
+    () => buildBacktestTradeOutcomePoints(backtest),
+    [backtest],
+  );
 
   const { formatted: maxAmount } = getFormatted(stat, 'maxAmount');
   const { formatted: minAmount } = getFormatted(stat, 'minAmount');
@@ -122,6 +131,11 @@ export const TestCardChart = ({ height = '350px' }: TestCardChartProps) => {
                 activeDot={{ r: 5, strokeWidth: 2 }}
               />
             ))}
+            <TradeOutcomeMarkers
+              points={tradeOutcomePoints}
+              positiveColor={chart.color('green.400')}
+              negativeColor={chart.color('red.400')}
+            />
           </LineChart>
         </Chart.Root>
       </ResponsiveContainer>

package/src/app/components/Shared/Charts/TradeOutcomeMarkers.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import { ReferenceDot } from 'recharts';
+import type {
+  OrderLogData,
+  SimpleOrderLogData,
+  StrategyChartOrder,
+} from '@tradejs/types';
+
+export interface TradeOutcomePoint {
+  timestamp: number;
+  equity: number;
+  pnl: number;
+}
+
+interface TradeOutcomeCandidate {
+  timestamp?: number | null;
+  equity?: number | null;
+  pnl?: number | null;
+}
+
+export const normalizeTradeOutcomePoints = (
+  candidates: readonly TradeOutcomeCandidate[],
+): TradeOutcomePoint[] =>
+  candidates.flatMap(({ timestamp, equity, pnl }) =>
+    typeof timestamp === 'number' &&
+    Number.isFinite(timestamp) &&
+    typeof equity === 'number' &&
+    Number.isFinite(equity) &&
+    typeof pnl === 'number' &&
+    Number.isFinite(pnl) &&
+    pnl !== 0
+      ? [{ timestamp, equity, pnl }]
+      : [],
+  );
+
+export const buildEquityTradeOutcomePoints = (
+  orderLog: SimpleOrderLogData,
+): TradeOutcomePoint[] =>
+  normalizeTradeOutcomePoints(
+    orderLog.slice(1).map(([timestamp, equity], index) => ({
+      timestamp,
+      equity,
+      pnl: equity - orderLog[index][1],
+    })),
+  );
+
+export const buildSnapshotTradeOutcomePoints = (
+  orders: readonly StrategyChartOrder[],
+): TradeOutcomePoint[] =>
+  normalizeTradeOutcomePoints(
+    orders.map((order) => ({
+      timestamp: order.exitTimestamp,
+      equity: order.equityAfter,
+      pnl: order.pnl,
+    })),
+  );
+
+export const buildBacktestTradeOutcomePoints = (
+  orders: OrderLogData,
+): TradeOutcomePoint[] =>
+  normalizeTradeOutcomePoints(
+    orders
+      .filter((order) => !order.type.startsWith('OPEN'))
+      .map((order) => ({
+        timestamp: order.timestamp,
+        equity: order.amount,
+        pnl: order.profit,
+      })),
+  );
+
+export const TradeOutcomeMarkers = ({
+  points,
+  positiveColor,
+  negativeColor,
+}: {
+  points: readonly TradeOutcomePoint[];
+  positiveColor: string;
+  negativeColor: string;
+}) => (
+  <>
+    {points.map((point, index) => (
+      <ReferenceDot
+        key={`${point.timestamp}:${point.equity}:${index}`}
+        x={point.timestamp}
+        y={point.equity}
+        r={2.5}
+        fill={point.pnl > 0 ? positiveColor : negativeColor}
+        stroke="none"
+      />
+    ))}
+  </>
+);

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

@@ -16,6 +16,10 @@ import { getFormatted } from '@tradejs/core/backtest';
 import type { SimpleOrderLogData, TestStat } from '@tradejs/types';
 import { formatTimeSeriesTooltipTimestamp } from '#app/lib/timeSeriesChart';
 import { TimeSeriesXAxis } from '#shared/Charts/TimeSeriesXAxis';
+import {
+  buildEquityTradeOutcomePoints,
+  TradeOutcomeMarkers,
+} from '#shared/Charts/TradeOutcomeMarkers';
 
 interface RuntimeStrategyChartProps {
   orderLog: SimpleOrderLogData;
@@ -47,6 +51,10 @@ export const RuntimeStrategyChart = ({
     }),
     [orderLog],
   );
+  const tradeOutcomePoints = useMemo(
+    () => buildEquityTradeOutcomePoints(orderLog),
+    [orderLog],
+  );
 
   const chart = useChart(chartData as any);
   const { formatted: maxAmount } = getFormatted(stat, 'maxAmount');
@@ -114,6 +122,11 @@ export const RuntimeStrategyChart = ({
                     activeDot={{ r: 5, strokeWidth: 2 }}
                   />
                 ))}
+                <TradeOutcomeMarkers
+                  points={tradeOutcomePoints}
+                  positiveColor={chart.color('green.400')}
+                  negativeColor={chart.color('red.400')}
+                />
               </LineChart>
             </Chart.Root>
           </ResponsiveContainer>

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

@@ -32,6 +32,10 @@ export const RuntimeStrategyConfigDrawer = ({
     { label: 'Config ID', value: strategy.configId },
     { label: 'Runtime key', value: strategy.runtimeKey },
     { label: 'Deployment', value: strategy.deploymentId },
+    {
+      label: 'Configured tickers',
+      value: strategy.selection?.tickers?.length ?? 'All available',
+    },
     { label: 'Account label', value: strategy.accountLabel ?? 'Not set' },
     { label: 'Account ID', value: strategy.accountId ?? 'Not assigned' },
     {
@@ -120,7 +124,22 @@ export const RuntimeStrategyConfigDrawer = ({
                 </SimpleGrid>
                 <Box mt={4} pt={4} borderTopWidth="1px" borderColor="gray.800">
                   <Text fontSize="xs" color="gray.500">
-                    Symbols
+                    Configured ticker selection
+                  </Text>
+                  <Text
+                    mt={1}
+                    mb={4}
+                    fontFamily="mono"
+                    fontSize="sm"
+                    color="gray.200"
+                    overflowWrap="anywhere"
+                  >
+                    {strategy.selection?.tickers?.length
+                      ? strategy.selection.tickers.join(', ')
+                      : 'All available tickers'}
+                  </Text>
+                  <Text fontSize="xs" color="gray.500">
+                    Symbols with trades
                   </Text>
                   <Text
                     mt={1}

package/src/app/components/Strategies/StrategySnapshotCard.presenter.ts

@@ -31,13 +31,8 @@ export {
   type SymbolPnlRank,
 } from './StrategySnapshotCard.ranking.presenter';
 
-const formatDatasetCreatedAt = (datasetId?: string) => {
-  if (!datasetId || !/^\d{12,}$/.test(datasetId)) {
-    return '';
-  }
-
-  const timestamp = Number(datasetId);
-  if (!Number.isSafeInteger(timestamp)) {
+const formatGeneratedAt = (timestamp: number) => {
+  if (!Number.isFinite(timestamp)) {
     return '';
   }
 
@@ -48,7 +43,7 @@ const formatDatasetCreatedAt = (datasetId?: string) => {
 
   return new Intl.DateTimeFormat('en-GB', {
     dateStyle: 'medium',
-    timeStyle: 'short',
+    timeStyle: 'medium',
   }).format(date);
 };
 
@@ -109,8 +104,8 @@ export const buildStrategySnapshotCardViewModel = (
     sourceLabel: mode === 'ai' && snapshot.datasetId ? 'dataset:' : 'symbols:',
     sourceValue:
       mode === 'ai' && snapshot.datasetId ? snapshot.datasetId : symbolsLabel,
-    datasetCreatedAtLabel:
-      mode === 'ai' ? formatDatasetCreatedAt(snapshot.datasetId) : '',
+    generatedAtLabel:
+      mode === 'ai' ? formatGeneratedAt(snapshot.generatedAt) : '',
     tagsLabel: snapshot.tags?.join(' · ') ?? '',
     displaySubtitle:
       mode === 'ai'

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

@@ -53,7 +53,7 @@ export const StrategySnapshotCard = ({
     snapshotOrders,
     sourceLabel,
     sourceValue,
-    datasetCreatedAtLabel,
+    generatedAtLabel,
     tagsLabel,
     displaySubtitle,
     metrics,
@@ -132,13 +132,13 @@ export const StrategySnapshotCard = ({
           </Text>
         </Flex>
 
-        {datasetCreatedAtLabel ? (
+        {generatedAtLabel ? (
           <Flex gap="1">
             <Text fontSize="sm" fontWeight="bold" color="gray.400" mt={1}>
-              exported:
+              generated:
             </Text>
             <Text fontSize="sm" color="gray.300" mt={1}>
-              {datasetCreatedAtLabel}
+              {generatedAtLabel}
             </Text>
           </Flex>
         ) : null}
@@ -289,6 +289,8 @@ export const StrategySnapshotCard = ({
 
       <StrategySnapshotChart
         orderLog={snapshot.orderLog}
+        orders={snapshot.orders}
+        mode={mode}
         emptyText={emptyText}
       />
 

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

@@ -11,16 +11,25 @@ import {
   Tooltip,
   YAxis,
 } from 'recharts';
-import type { SimpleOrderLogData } from '@tradejs/types';
+import type { SimpleOrderLogData, StrategyChartOrder } from '@tradejs/types';
 import { formatTimeSeriesTooltipTimestamp } from '#app/lib/timeSeriesChart';
 import { TimeSeriesXAxis } from '#shared/Charts/TimeSeriesXAxis';
+import {
+  buildEquityTradeOutcomePoints,
+  buildSnapshotTradeOutcomePoints,
+  TradeOutcomeMarkers,
+} from '#shared/Charts/TradeOutcomeMarkers';
 
 export const StrategySnapshotChart = ({
   orderLog,
+  orders,
+  mode,
   height = '350px',
   emptyText = 'No chart data for the selected run.',
 }: {
   orderLog: SimpleOrderLogData;
+  orders: StrategyChartOrder[];
+  mode: 'replay' | 'ai';
   height?: string | number;
   emptyText?: string;
 }) => {
@@ -39,6 +48,13 @@ export const StrategySnapshotChart = ({
     }),
     [orderLog],
   );
+  const tradeOutcomePoints = useMemo(
+    () =>
+      mode === 'ai'
+        ? buildEquityTradeOutcomePoints(orderLog)
+        : buildSnapshotTradeOutcomePoints(orders),
+    [mode, orderLog, orders],
+  );
 
   const chart = useChart(chartData as any);
 
@@ -96,6 +112,11 @@ export const StrategySnapshotChart = ({
                 activeDot={{ r: 5, strokeWidth: 2 }}
               />
             ))}
+            <TradeOutcomeMarkers
+              points={tradeOutcomePoints}
+              positiveColor={chart.color('green.400')}
+              negativeColor={chart.color('red.400')}
+            />
           </LineChart>
         </Chart.Root>
       </ResponsiveContainer>

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

@@ -37,6 +37,21 @@ export const StrategySnapshotList = ({
     [strategies],
   );
 
+  const renderCard = useCallback(
+    (strategy: StrategyChartSnapshot) => (
+      <StrategySnapshotCard
+        key={strategy.cardId}
+        snapshot={strategy}
+        mode={mode}
+        onDeleted={onDeleted}
+        selected={selectedCardIds.has(strategy.cardId)}
+        onToggleSelection={onToggleSelection}
+        emptyText={emptyText}
+      />
+    ),
+    [emptyText, mode, onDeleted, onToggleSelection, selectedCardIds],
+  );
+
   const Row = useCallback(
     ({ index, style }: ListChildComponentProps) => {
       const strategy = strategies[index];
@@ -44,29 +59,15 @@ export const StrategySnapshotList = ({
         return null;
       }
 
-      return (
-        <Box style={style}>
-          <StrategySnapshotCard
-            snapshot={strategy}
-            mode={mode}
-            onDeleted={onDeleted}
-            selected={selectedCardIds.has(strategy.cardId)}
-            onToggleSelection={onToggleSelection}
-            emptyText={emptyText}
-          />
-        </Box>
-      );
+      return <Box style={style}>{renderCard(strategy)}</Box>;
     },
-    [
-      emptyText,
-      mode,
-      onDeleted,
-      onToggleSelection,
-      selectedCardIds,
-      strategies,
-    ],
+    [renderCard, strategies],
   );
 
+  if (mode === 'replay') {
+    return <Box w="full">{strategies.map(renderCard)}</Box>;
+  }
+
   return (
     <AutoSizer>
       {({ height, width }) => (