@tradejs/app 2.0.13 → 2.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tradejs/app",
-  "version": "2.0.13",
+  "version": "2.0.15",
   "description": "Installable Next.js UI for the TradeJS TypeScript framework: dashboards, backtests, charts, and runtime data.",
   "keywords": [
     "tradejs",
@@ -51,12 +51,12 @@
     "@emotion/react": "^11.14.0",
     "@langchain/core": "^1.2.3",
     "@langchain/openai": "^1.5.5",
-    "@tradejs/connectors": "^2.0.13",
-    "@tradejs/core": "^2.0.13",
-    "@tradejs/indicators": "^2.0.13",
-    "@tradejs/infra": "^2.0.13",
-    "@tradejs/node": "^2.0.13",
-    "@tradejs/types": "^2.0.13",
+    "@tradejs/connectors": "^2.0.15",
+    "@tradejs/core": "^2.0.15",
+    "@tradejs/indicators": "^2.0.15",
+    "@tradejs/infra": "^2.0.15",
+    "@tradejs/node": "^2.0.15",
+    "@tradejs/types": "^2.0.15",
     "@types/bcryptjs": "2.4.6",
     "@types/lodash": "4.17.24",
     "@types/node": "24.13.3",

package/src/app/api/strategies/runtime/route.ts

@@ -30,8 +30,10 @@ import {
   assignLegacyRuntimeTradeAccountScopes,
   buildRuntimeStrategyAnalytics,
   buildRuntimeStrategyAiGateChanges,
+  buildRuntimeStrategyMaxLossValueTimeline,
   buildRuntimeStrategyIdentityKey,
   buildExchangeFallbackRuntimeTrades,
+  getRuntimeStrategyAiGateObservedFrom,
   isRuntimeTradeRecord,
   isRuntimeStrategyLineageScope,
   resolveStrategyConfigIdentityByKey,
@@ -55,7 +57,7 @@ const MIN_HOURS = 6;
 const MAX_HOURS = 24 * 90;
 const BYBIT_MAX_TIME_RANGE_MS = 7 * 24 * 60 * 60 * 1000 - 1_000;
 const EXCHANGE_REQUEST_TIMEOUT_MS = 15_000;
-const RUNTIME_LINEAGE_BASELINE_MS = 7 * 24 * 60 * 60 * 1000;
+const RUNTIME_LINEAGE_HISTORY_MS = 30 * 24 * 60 * 60 * 1000;
 
 const coerceHours = (value: string | null) => {
   const parsed = Number(value ?? Number.NaN);
@@ -168,13 +170,12 @@ const loadRuntimeTrades = async (
 
 const loadRuntimeLineageScopes = async (
   userName: string,
-  startTime: number,
   endTime: number,
 ): Promise<RuntimeStrategyLineageScope[]> =>
   (
     await Promise.all(
       getRuntimeStorageDayKeys(
-        Math.max(0, startTime - RUNTIME_LINEAGE_BASELINE_MS),
+        Math.max(0, endTime - RUNTIME_LINEAGE_HISTORY_MS),
         endTime,
       ).map((dayKey) =>
         getHashJsonValues<RuntimeStrategyLineageScope>(
@@ -425,7 +426,7 @@ export const GET = async (request: NextRequest) => {
       loadOpenPositions(connector, exchangeErrors),
       listRuntimeDeployments(userName),
       listTradingAccounts(userName),
-      loadRuntimeLineageScopes(userName, startTime, endTime),
+      loadRuntimeLineageScopes(userName, endTime),
     ]);
     const relevantTrades = selectTradesForWindow(
       runtimeTrades,
@@ -610,6 +611,13 @@ export const GET = async (request: NextRequest) => {
           startTime,
           endTime,
         });
+        const maxLossValueTimeline = buildRuntimeStrategyMaxLossValueTimeline({
+          scopes: runtimeLineageScopes,
+          strategyName,
+          configId: identity.configId,
+          startTime,
+          endTime,
+        });
         const effectiveStrategyConfig = identity.config ?? null;
 
         return {
@@ -633,6 +641,12 @@ export const GET = async (request: NextRequest) => {
           stat: analytics.stat,
           summary: analytics.summary,
           orderLog: analytics.orderLog,
+          aiGateObservedFrom: getRuntimeStrategyAiGateObservedFrom({
+            scopes: runtimeLineageScopes,
+            strategyName,
+            configId: identity.configId,
+            endTime,
+          }),
           aiGateChanges: buildRuntimeStrategyAiGateChanges({
             scopes: runtimeLineageScopes,
             strategyName,
@@ -640,6 +654,7 @@ export const GET = async (request: NextRequest) => {
             startTime,
             endTime,
           }),
+          maxLossValueTimeline,
           recentTrades: strategyTrades
             .slice(0, 8)
             .map((trade) => toRuntimeTradeView(trade, endTime)),

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

@@ -2182,7 +2182,9 @@ export const RuntimeStrategyCard = ({
       <RuntimeStrategyChart
         orderLog={strategy.orderLog}
         stat={strategy.stat}
+        aiGateObservedFrom={strategy.aiGateObservedFrom}
         aiGateChanges={strategy.aiGateChanges}
+        maxLossValueTimeline={strategy.maxLossValueTimeline}
         startTimestamp={startTimestamp}
         endTimestamp={endTimestamp}
       />

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { useMemo } from 'react';
-import { Box, Text } from '@chakra-ui/react';
+import { Box, Flex, Text } from '@chakra-ui/react';
 import { Chart, useChart } from '@chakra-ui/charts';
 import {
   CartesianGrid,
@@ -14,14 +14,19 @@ import {
 } from 'recharts';
 import { getFormatted } from '@tradejs/core/backtest';
 import type { SimpleOrderLogData, TestStat } from '@tradejs/types';
-import type { RuntimeStrategyAiGateChange } from '#app/lib/runtimeStrategies';
+import type {
+  RuntimeStrategyAiGateChange,
+  RuntimeStrategyMaxLossValueTimeline,
+} from '#app/lib/runtimeStrategies';
 import { formatTimeSeriesTooltipTimestamp } from '#app/lib/timeSeriesChart';
 import { TimeSeriesXAxis } from '#shared/Charts/TimeSeriesXAxis';
 
 interface RuntimeStrategyChartProps {
   orderLog: SimpleOrderLogData;
   stat: TestStat;
+  aiGateObservedFrom: number | null;
   aiGateChanges: RuntimeStrategyAiGateChange[];
+  maxLossValueTimeline: RuntimeStrategyMaxLossValueTimeline;
   startTimestamp: number;
   endTimestamp: number;
   height?: string | number;
@@ -30,7 +35,9 @@ interface RuntimeStrategyChartProps {
 export const RuntimeStrategyChart = ({
   orderLog,
   stat,
+  aiGateObservedFrom,
   aiGateChanges,
+  maxLossValueTimeline,
   startTimestamp,
   endTimestamp,
   height = '350px',
@@ -55,6 +62,7 @@ export const RuntimeStrategyChart = ({
   const { formatted: maxAmount } = getFormatted(stat, 'maxAmount');
   const { formatted: minAmount } = getFormatted(stat, 'minAmount');
   const gateChangeColor = chart.color('purple.400');
+  const maxLossValueChangeColor = chart.color('orange.400');
 
   if (!orderLog.length) {
     return (
@@ -72,82 +80,175 @@ export const RuntimeStrategyChart = ({
   }
 
   return (
-    <Box w="100%" minW="600px" h={height} pr={2}>
-      <ResponsiveContainer width="100%" height="100%">
-        <Chart.Root maxH="md" chart={chart}>
-          <LineChart data={chart.data}>
-            <CartesianGrid stroke={chart.color('border')} vertical={false} />
-            <ReferenceLine
-              stroke={chart.color('gray.600')}
-              strokeDasharray="5 5"
-              y={stat.maxAmount}
-              label={{
-                value: `Max: ${maxAmount}`,
-                offset: 10,
-                fill: chart.color('gray.600'),
-                position: 'top',
-              }}
-            />
-            <ReferenceLine
-              stroke={chart.color('gray.600')}
-              strokeDasharray="8 8"
-              y={100}
-            />
-            <ReferenceLine
-              stroke={chart.color('gray.600')}
-              strokeDasharray="5 5"
-              y={stat.minAmount}
-              label={{
-                value: `Min: ${minAmount}`,
-                offset: 10,
-                fill: chart.color('gray.600'),
-                position: 'bottom',
-              }}
-            />
-            {aiGateChanges.map((change) => (
+    <Box w="100%" minW="600px" h={height} display="flex" flexDirection="column">
+      {aiGateObservedFrom != null ? (
+        <Flex
+          minH="24px"
+          px={2}
+          gap={4}
+          alignItems="center"
+          overflowX="auto"
+          flexShrink={0}
+          whiteSpace="nowrap"
+        >
+          <Text
+            flexShrink={0}
+            fontSize="xs"
+            color="gray.500"
+            title="AI-gate changes before this first runtime observation are unavailable"
+          >
+            AI-gate history from{' '}
+            {formatTimeSeriesTooltipTimestamp(aiGateObservedFrom)}
+          </Text>
+          {aiGateChanges.map((change, index) => (
+            <Text
+              key={`${change.timestamp}:${change.fingerprint}:legend`}
+              flexShrink={0}
+              fontSize="xs"
+              color="gray.400"
+              title={`${change.previousFingerprint} → ${change.fingerprint}`}
+            >
+              <Text as="span" color={gateChangeColor} fontWeight="semibold">
+                G{index + 1}
+              </Text>{' '}
+              {formatTimeSeriesTooltipTimestamp(change.timestamp)} ·{' '}
+              {change.fingerprint.slice(0, 7)}
+            </Text>
+          ))}
+          {maxLossValueTimeline.observedFrom != null &&
+          maxLossValueTimeline.initialValue != null ? (
+            <Text
+              flexShrink={0}
+              fontSize="xs"
+              color="gray.500"
+              title="MAX_LOSS_VALUE changes before this first runtime observation are unavailable"
+            >
+              MAX_LOSS_VALUE history from{' '}
+              {formatTimeSeriesTooltipTimestamp(
+                maxLossValueTimeline.observedFrom,
+              )}{' '}
+              · initial {maxLossValueTimeline.initialValue}$
+            </Text>
+          ) : null}
+          {maxLossValueTimeline.changes.map((change, index) => (
+            <Text
+              key={`${change.timestamp}:${change.value}:max-loss-legend`}
+              flexShrink={0}
+              fontSize="xs"
+              color="gray.400"
+            >
+              <Text
+                as="span"
+                color={maxLossValueChangeColor}
+                fontWeight="semibold"
+              >
+                L{index + 1}
+              </Text>{' '}
+              {formatTimeSeriesTooltipTimestamp(change.timestamp)} ·{' '}
+              {change.previousValue}$ → {change.value}$
+            </Text>
+          ))}
+        </Flex>
+      ) : null}
+      <Box flex="1" minH={0} pr={2}>
+        <ResponsiveContainer width="100%" height="100%">
+          <Chart.Root maxH="md" chart={chart}>
+            <LineChart data={chart.data}>
+              <CartesianGrid stroke={chart.color('border')} vertical={false} />
               <ReferenceLine
-                key={`${change.timestamp}:${change.fingerprint}`}
-                x={change.timestamp}
-                stroke={gateChangeColor}
-                strokeDasharray="3 5"
-                strokeWidth={1.5}
+                stroke={chart.color('gray.600')}
+                strokeDasharray="5 5"
+                y={stat.maxAmount}
                 label={{
-                  value: `AI-gate ${change.fingerprint.slice(0, 7)}`,
-                  fill: gateChangeColor,
-                  fontSize: 10,
-                  offset: 6,
-                  position: 'insideTopRight',
+                  value: `Max: ${maxAmount}`,
+                  offset: 10,
+                  fill: chart.color('gray.600'),
+                  position: 'top',
                 }}
               />
-            ))}
-            <TimeSeriesXAxis
-              startTimestamp={startTimestamp}
-              endTimestamp={endTimestamp}
-            />
-            <YAxis tickCount={10} domain={[stat.minAmount - 10, 'auto']} />
-            <Tooltip
-              animationDuration={100}
-              cursor={false}
-              content={
-                <Chart.Tooltip
-                  labelFormatter={formatTimeSeriesTooltipTimestamp}
+              <ReferenceLine
+                stroke={chart.color('gray.600')}
+                strokeDasharray="8 8"
+                y={100}
+              />
+              <ReferenceLine
+                stroke={chart.color('gray.600')}
+                strokeDasharray="5 5"
+                y={stat.minAmount}
+                label={{
+                  value: `Min: ${minAmount}`,
+                  offset: 10,
+                  fill: chart.color('gray.600'),
+                  position: 'bottom',
+                }}
+              />
+              {aiGateChanges.map((change, index) => (
+                <ReferenceLine
+                  key={`${change.timestamp}:${change.fingerprint}`}
+                  x={change.timestamp}
+                  stroke={gateChangeColor}
+                  strokeDasharray="3 5"
+                  strokeWidth={1.5}
+                  label={{
+                    value: `G${index + 1}`,
+                    fill: gateChangeColor,
+                    fontSize: 10,
+                    fontWeight: 600,
+                    offset: 6,
+                    position:
+                      index % 2 === 0 ? 'insideTopRight' : 'insideTopLeft',
+                  }}
+                />
+              ))}
+              {maxLossValueTimeline.changes.map((change, index) => (
+                <ReferenceLine
+                  key={`${change.timestamp}:${change.value}:max-loss`}
+                  x={change.timestamp}
+                  stroke={maxLossValueChangeColor}
+                  strokeDasharray="7 4"
+                  strokeWidth={1.5}
+                  label={{
+                    value: `L${index + 1}`,
+                    fill: maxLossValueChangeColor,
+                    fontSize: 10,
+                    fontWeight: 600,
+                    offset: 6,
+                    position:
+                      index % 2 === 0
+                        ? 'insideBottomRight'
+                        : 'insideBottomLeft',
+                  }}
                 />
-              }
-            />
-            {chart.series.map((item) => (
-              <Line
-                key={item.name as string}
-                isAnimationActive={false}
-                dataKey={chart.key(item.name) as string}
-                stroke={chart.color(item.color)}
-                strokeWidth={2}
-                dot={false}
-                activeDot={{ r: 5, strokeWidth: 2 }}
+              ))}
+              <TimeSeriesXAxis
+                startTimestamp={startTimestamp}
+                endTimestamp={endTimestamp}
+              />
+              <YAxis tickCount={10} domain={[stat.minAmount - 10, 'auto']} />
+              <Tooltip
+                animationDuration={100}
+                cursor={false}
+                content={
+                  <Chart.Tooltip
+                    labelFormatter={formatTimeSeriesTooltipTimestamp}
+                  />
+                }
               />
-            ))}
-          </LineChart>
-        </Chart.Root>
-      </ResponsiveContainer>
+              {chart.series.map((item) => (
+                <Line
+                  key={item.name as string}
+                  isAnimationActive={false}
+                  dataKey={chart.key(item.name) as string}
+                  stroke={chart.color(item.color)}
+                  strokeWidth={2}
+                  dot={false}
+                  activeDot={{ r: 5, strokeWidth: 2 }}
+                />
+              ))}
+            </LineChart>
+          </Chart.Root>
+        </ResponsiveContainer>
+      </Box>
     </Box>
   );
 };

package/src/app/lib/runtimeStrategies.ts

@@ -77,7 +77,9 @@ export interface RuntimeStrategyLineageScope {
   strategy: string;
   symbol: string;
   runtimeConfigId?: string;
-  lineage: RuntimeLineage;
+  lineage: RuntimeLineage & {
+    maxLossValue?: number | null;
+  };
   firstTimestamp: number;
   lastTimestamp: number;
 }
@@ -88,6 +90,18 @@ export interface RuntimeStrategyAiGateChange {
   fingerprint: string;
 }
 
+export interface RuntimeStrategyMaxLossValueChange {
+  timestamp: number;
+  previousValue: number;
+  value: number;
+}
+
+export interface RuntimeStrategyMaxLossValueTimeline {
+  observedFrom: number | null;
+  initialValue: number | null;
+  changes: RuntimeStrategyMaxLossValueChange[];
+}
+
 export interface RuntimeStrategyView {
   runtimeKey: string;
   strategyName: string;
@@ -105,7 +119,9 @@ export interface RuntimeStrategyView {
   stat: TestStat;
   summary: RuntimeStrategyTradeSummary;
   orderLog: SimpleOrderLogData;
+  aiGateObservedFrom: number | null;
   aiGateChanges: RuntimeStrategyAiGateChange[];
+  maxLossValueTimeline: RuntimeStrategyMaxLossValueTimeline;
   recentTrades: RuntimeStrategyTradeView[];
   orders: RuntimeStrategyTradeView[];
 }
@@ -181,6 +197,114 @@ export interface RuntimeStrategiesResponse {
   strategies: RuntimeStrategyView[];
 }
 
+export const getRuntimeStrategyAiGateObservedFrom = ({
+  scopes,
+  strategyName,
+  configId,
+  endTime,
+}: {
+  scopes: RuntimeStrategyLineageScope[];
+  strategyName: string;
+  configId?: string;
+  endTime: number;
+}) => {
+  const normalizedConfigId = configId ?? 'config';
+  let observedFrom: number | null = null;
+
+  for (const scope of scopes) {
+    if (
+      scope.strategy !== strategyName ||
+      (scope.runtimeConfigId ?? 'config') !== normalizedConfigId ||
+      scope.firstTimestamp > endTime
+    ) {
+      continue;
+    }
+
+    observedFrom =
+      observedFrom == null
+        ? scope.firstTimestamp
+        : Math.min(observedFrom, scope.firstTimestamp);
+  }
+
+  return observedFrom;
+};
+
+export const buildRuntimeStrategyMaxLossValueTimeline = ({
+  scopes,
+  strategyName,
+  configId,
+  startTime,
+  endTime,
+}: {
+  scopes: RuntimeStrategyLineageScope[];
+  strategyName: string;
+  configId?: string;
+  startTime: number;
+  endTime: number;
+}): RuntimeStrategyMaxLossValueTimeline => {
+  const normalizedConfigId = configId ?? 'config';
+  const observationsByTimestamp = new Map<
+    number,
+    { value: number; lastTimestamp: number }
+  >();
+
+  for (const scope of scopes) {
+    const value = scope.lineage.maxLossValue;
+    if (
+      scope.strategy !== strategyName ||
+      (scope.runtimeConfigId ?? 'config') !== normalizedConfigId ||
+      scope.firstTimestamp > endTime ||
+      typeof value !== 'number' ||
+      !Number.isFinite(value)
+    ) {
+      continue;
+    }
+
+    const existing = observationsByTimestamp.get(scope.firstTimestamp);
+    if (
+      !existing ||
+      scope.lastTimestamp > existing.lastTimestamp ||
+      (scope.lastTimestamp === existing.lastTimestamp && value > existing.value)
+    ) {
+      observationsByTimestamp.set(scope.firstTimestamp, {
+        value,
+        lastTimestamp: scope.lastTimestamp,
+      });
+    }
+  }
+
+  const observations = [...observationsByTimestamp.entries()].sort(
+    ([leftTimestamp], [rightTimestamp]) => leftTimestamp - rightTimestamp,
+  );
+  const changes: RuntimeStrategyMaxLossValueChange[] = [];
+  let observedFrom: number | null = null;
+  let initialValue: number | null = null;
+  let currentValue: number | null = null;
+
+  for (const [timestamp, observation] of observations) {
+    if (currentValue == null) {
+      observedFrom = timestamp;
+      initialValue = observation.value;
+      currentValue = observation.value;
+      continue;
+    }
+    if (observation.value === currentValue) {
+      continue;
+    }
+
+    if (timestamp >= startTime) {
+      changes.push({
+        timestamp,
+        previousValue: currentValue,
+        value: observation.value,
+      });
+    }
+    currentValue = observation.value;
+  }
+
+  return { observedFrom, initialValue, changes };
+};
+
 export const isRuntimeStrategyLineageScope = (
   value: unknown,
 ): value is RuntimeStrategyLineageScope => {