@tradejs/app 2.0.10 → 2.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tradejs/app",
-  "version": "2.0.10",
+  "version": "2.0.12",
   "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.10",
-    "@tradejs/core": "^2.0.10",
-    "@tradejs/indicators": "^2.0.10",
-    "@tradejs/infra": "^2.0.10",
-    "@tradejs/node": "^2.0.10",
-    "@tradejs/types": "^2.0.10",
+    "@tradejs/connectors": "^2.0.12",
+    "@tradejs/core": "^2.0.12",
+    "@tradejs/indicators": "^2.0.12",
+    "@tradejs/infra": "^2.0.12",
+    "@tradejs/node": "^2.0.12",
+    "@tradejs/types": "^2.0.12",
     "@types/bcryptjs": "2.4.6",
     "@types/lodash": "4.17.24",
     "@types/node": "24.13.3",

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

@@ -29,10 +29,13 @@ import { getCurrentUserName } from '#app/lib/currentUser';
 import {
   assignLegacyRuntimeTradeAccountScopes,
   buildRuntimeStrategyAnalytics,
+  buildRuntimeStrategyAiGateChanges,
   buildRuntimeStrategyIdentityKey,
   buildExchangeFallbackRuntimeTrades,
   isRuntimeTradeRecord,
+  isRuntimeStrategyLineageScope,
   resolveStrategyConfigIdentityByKey,
+  RuntimeStrategyLineageScope,
   RuntimeStrategiesResponse,
   selectTradesForWindow,
   toRuntimeTradeView,
@@ -52,6 +55,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 coerceHours = (value: string | null) => {
   const parsed = Number(value ?? Number.NaN);
@@ -162,6 +166,26 @@ const loadRuntimeTrades = async (
     .sort((left, right) => left.entryTimestamp - right.entryTimestamp);
 };
 
+const loadRuntimeLineageScopes = async (
+  userName: string,
+  startTime: number,
+  endTime: number,
+): Promise<RuntimeStrategyLineageScope[]> =>
+  (
+    await Promise.all(
+      getRuntimeStorageDayKeys(
+        Math.max(0, startTime - RUNTIME_LINEAGE_BASELINE_MS),
+        endTime,
+      ).map((dayKey) =>
+        getHashJsonValues<RuntimeStrategyLineageScope>(
+          redisKeys.runtimeLineageScopeBucket(userName, dayKey),
+        ),
+      ),
+    )
+  )
+    .flat()
+    .filter(isRuntimeStrategyLineageScope);
+
 const buildExchangeTimeRanges = (startTime: number, endTime: number) => {
   const ranges: Array<{ startTime: number; endTime: number }> = [];
   let cursor = startTime;
@@ -380,6 +404,7 @@ export const GET = async (request: NextRequest) => {
       openPositionsSnapshot,
       runtimeDeployments,
       tradingAccounts,
+      runtimeLineageScopes,
     ] = await Promise.all([
       loadRuntimeStrategyConfigs(userName),
       loadConfiguredStrategyNames(),
@@ -400,6 +425,7 @@ export const GET = async (request: NextRequest) => {
       loadOpenPositions(connector, exchangeErrors),
       listRuntimeDeployments(userName),
       listTradingAccounts(userName),
+      loadRuntimeLineageScopes(userName, startTime, endTime),
     ]);
     const relevantTrades = selectTradesForWindow(
       runtimeTrades,
@@ -607,6 +633,13 @@ export const GET = async (request: NextRequest) => {
           stat: analytics.stat,
           summary: analytics.summary,
           orderLog: analytics.orderLog,
+          aiGateChanges: buildRuntimeStrategyAiGateChanges({
+            scopes: runtimeLineageScopes,
+            strategyName,
+            configId: identity.configId,
+            startTime,
+            endTime,
+          }),
           recentTrades: strategyTrades
             .slice(0, 8)
             .map((trade) => toRuntimeTradeView(trade, endTime)),

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

@@ -7,7 +7,6 @@ import {
   LineChart,
   CartesianGrid,
   Line,
-  XAxis,
   YAxis,
   Tooltip,
   ReferenceLine,
@@ -18,6 +17,8 @@ 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';
 
 interface TestCardChartProps {
   height?: string | number;
@@ -58,6 +59,9 @@ export const TestCardChart = ({ height = '350px' }: TestCardChartProps) => {
 
   const { formatted: maxAmount } = getFormatted(stat, 'maxAmount');
   const { formatted: minAmount } = getFormatted(stat, 'minAmount');
+  const startTimestamp = test.options.start ?? testResult.orderLog[0]?.[0] ?? 0;
+  const endTimestamp =
+    test.options.end ?? testResult.orderLog.at(-1)?.[0] ?? startTimestamp;
 
   return (
     <Box w="100%" minW="600px" h={height} pr={2}>
@@ -92,12 +96,19 @@ export const TestCardChart = ({ height = '350px' }: TestCardChartProps) => {
                 position: 'bottom',
               }}
             />
-            <XAxis dataKey="timestamp" />
+            <TimeSeriesXAxis
+              startTimestamp={startTimestamp}
+              endTimestamp={endTimestamp}
+            />
             <YAxis tickCount={10} domain={[stat.minAmount - 10, 'auto']} />
             <Tooltip
               animationDuration={100}
               cursor={false}
-              content={<Chart.Tooltip />}
+              content={
+                <Chart.Tooltip
+                  labelFormatter={formatTimeSeriesTooltipTimestamp}
+                />
+              }
             />
 
             {chart.series.map((item) => (
@@ -108,6 +119,7 @@ export const TestCardChart = ({ height = '350px' }: TestCardChartProps) => {
                 stroke={chart.color(item.color)}
                 strokeWidth={2}
                 dot={false}
+                activeDot={{ r: 5, strokeWidth: 2 }}
               />
             ))}
           </LineChart>

package/src/app/components/Backtest/TestCard/Chart/utils/index.ts

@@ -1,4 +1,3 @@
-import { format } from 'date-fns';
 import {
   SimpleOrderLogData,
   TestResult,
@@ -11,7 +10,7 @@ const getLineName = (testResult: TestResult) =>
 export const mapOrderLogToChartData = (testResult: TestResult) => {
   const data = testResult.orderLog.map(([timestamp, amount]) => ({
     [getLineName(testResult)]: amount,
-    timestamp: format(timestamp, 'dd.MM'),
+    timestamp,
   }));
 
   const series = [
@@ -52,8 +51,6 @@ export const getChartData = (testList: TestCompareList, timeline: number[]) => {
   const values: Record<string, number> = {};
 
   const data = timeline.map((timestamp, ind) => {
-    const formattedTimestamp = format(timestamp, 'dd.MM');
-
     testList.forEach(({ testResult }) => {
       values[getLineName(testResult)] = getAmountFromOrderLog(
         ind,
@@ -65,7 +62,7 @@ export const getChartData = (testList: TestCompareList, timeline: number[]) => {
 
     return {
       ...values,
-      timestamp: formattedTimestamp,
+      timestamp,
     };
   });
 

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

@@ -0,0 +1,51 @@
+'use client';
+
+import { useMemo } from 'react';
+import { XAxis } from 'recharts';
+import {
+  buildTimeSeriesTicks,
+  formatTimeSeriesAxisTimestamp,
+} from '#app/lib/timeSeriesChart';
+
+export const TimeSeriesXAxis = ({
+  startTimestamp,
+  endTimestamp,
+  tickCount = 7,
+  minTickGap = 24,
+  includeTime,
+}: {
+  startTimestamp: number;
+  endTimestamp: number;
+  tickCount?: number;
+  minTickGap?: number;
+  includeTime?: boolean;
+}) => {
+  const start = Math.min(startTimestamp, endTimestamp);
+  const end = Math.max(startTimestamp, endTimestamp);
+  const ticks = useMemo(
+    () => buildTimeSeriesTicks(start, end, tickCount),
+    [end, start, tickCount],
+  );
+
+  return (
+    <XAxis
+      dataKey="timestamp"
+      type="number"
+      scale="time"
+      domain={[start, end]}
+      ticks={ticks}
+      tickFormatter={(timestamp) =>
+        formatTimeSeriesAxisTimestamp({
+          timestamp,
+          startTimestamp: start,
+          endTimestamp: end,
+          includeTime,
+        })
+      }
+      tickCount={tickCount}
+      interval="preserveStartEnd"
+      minTickGap={minTickGap}
+      allowDataOverflow
+    />
+  );
+};

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

@@ -1434,10 +1434,14 @@ const mapRuntimeOrder = (order: RuntimeOrderView): OrdersDrawerOrder => {
 export const RuntimeStrategyCard = ({
   strategy,
   provider,
+  startTimestamp,
+  endTimestamp,
   onUpdated,
 }: {
   strategy: RuntimeStrategyView;
   provider: string;
+  startTimestamp: number;
+  endTimestamp: number;
   onUpdated: () => Promise<void> | void;
 }) => {
   const [configOpen, setConfigOpen] = useState(false);
@@ -2175,7 +2179,13 @@ export const RuntimeStrategyCard = ({
         </Portal>
       </Drawer.Root>
 
-      <RuntimeStrategyChart orderLog={strategy.orderLog} stat={strategy.stat} />
+      <RuntimeStrategyChart
+        orderLog={strategy.orderLog}
+        stat={strategy.stat}
+        aiGateChanges={strategy.aiGateChanges}
+        startTimestamp={startTimestamp}
+        endTimestamp={endTimestamp}
+      />
 
       <SimpleGrid columns={{ base: 4, md: 8 }} p={4}>
         <StatItem stat={strategy.stat} id="netProfit" title="P&L" />

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

@@ -10,28 +10,35 @@ import {
   ReferenceLine,
   ResponsiveContainer,
   Tooltip,
-  XAxis,
   YAxis,
 } from 'recharts';
-import { format } from 'date-fns';
 import { getFormatted } from '@tradejs/core/backtest';
 import type { SimpleOrderLogData, TestStat } from '@tradejs/types';
+import type { RuntimeStrategyAiGateChange } from '#app/lib/runtimeStrategies';
+import { formatTimeSeriesTooltipTimestamp } from '#app/lib/timeSeriesChart';
+import { TimeSeriesXAxis } from '#shared/Charts/TimeSeriesXAxis';
 
 interface RuntimeStrategyChartProps {
   orderLog: SimpleOrderLogData;
   stat: TestStat;
+  aiGateChanges: RuntimeStrategyAiGateChange[];
+  startTimestamp: number;
+  endTimestamp: number;
   height?: string | number;
 }
 
 export const RuntimeStrategyChart = ({
   orderLog,
   stat,
+  aiGateChanges,
+  startTimestamp,
+  endTimestamp,
   height = '350px',
 }: RuntimeStrategyChartProps) => {
   const chartData = useMemo(
     () => ({
       data: orderLog.map(([timestamp, amount]) => ({
-        timestamp: format(timestamp, 'dd.MM'),
+        timestamp,
         equity: amount,
       })),
       series: [
@@ -47,6 +54,7 @@ export const RuntimeStrategyChart = ({
   const chart = useChart(chartData as any);
   const { formatted: maxAmount } = getFormatted(stat, 'maxAmount');
   const { formatted: minAmount } = getFormatted(stat, 'minAmount');
+  const gateChangeColor = chart.color('purple.400');
 
   if (!orderLog.length) {
     return (
@@ -96,12 +104,35 @@ export const RuntimeStrategyChart = ({
                 position: 'bottom',
               }}
             />
-            <XAxis dataKey="timestamp" />
+            {aiGateChanges.map((change) => (
+              <ReferenceLine
+                key={`${change.timestamp}:${change.fingerprint}`}
+                x={change.timestamp}
+                stroke={gateChangeColor}
+                strokeDasharray="3 5"
+                strokeWidth={1.5}
+                label={{
+                  value: `AI-gate ${change.fingerprint.slice(0, 7)}`,
+                  fill: gateChangeColor,
+                  fontSize: 10,
+                  offset: 6,
+                  position: 'insideTopRight',
+                }}
+              />
+            ))}
+            <TimeSeriesXAxis
+              startTimestamp={startTimestamp}
+              endTimestamp={endTimestamp}
+            />
             <YAxis tickCount={10} domain={[stat.minAmount - 10, 'auto']} />
             <Tooltip
               animationDuration={100}
               cursor={false}
-              content={<Chart.Tooltip />}
+              content={
+                <Chart.Tooltip
+                  labelFormatter={formatTimeSeriesTooltipTimestamp}
+                />
+              }
             />
             {chart.series.map((item) => (
               <Line
@@ -111,6 +142,7 @@ export const RuntimeStrategyChart = ({
                 stroke={chart.color(item.color)}
                 strokeWidth={2}
                 dot={false}
+                activeDot={{ r: 5, strokeWidth: 2 }}
               />
             ))}
           </LineChart>

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

@@ -9,11 +9,11 @@ import {
   LineChart,
   ResponsiveContainer,
   Tooltip,
-  XAxis,
   YAxis,
 } from 'recharts';
-import { format } from 'date-fns';
 import type { SimpleOrderLogData } from '@tradejs/types';
+import { formatTimeSeriesTooltipTimestamp } from '#app/lib/timeSeriesChart';
+import { TimeSeriesXAxis } from '#shared/Charts/TimeSeriesXAxis';
 
 export const StrategySnapshotChart = ({
   orderLog,
@@ -27,7 +27,7 @@ export const StrategySnapshotChart = ({
   const chartData = useMemo(
     () => ({
       data: orderLog.map(([timestamp, amount]) => ({
-        timestamp: format(timestamp, 'dd.MM'),
+        timestamp,
         equity: amount,
       })),
       series: [
@@ -59,6 +59,8 @@ export const StrategySnapshotChart = ({
 
   const values = orderLog.map(([, amount]) => amount);
   const minValue = Math.min(...values);
+  const startTimestamp = orderLog[0][0];
+  const endTimestamp = orderLog[orderLog.length - 1][0];
 
   return (
     <Box w="100%" minW="600px" h={height} pr={2}>
@@ -66,7 +68,10 @@ export const StrategySnapshotChart = ({
         <Chart.Root maxH="md" chart={chart}>
           <LineChart data={chart.data}>
             <CartesianGrid stroke={chart.color('border')} vertical={false} />
-            <XAxis dataKey="timestamp" />
+            <TimeSeriesXAxis
+              startTimestamp={startTimestamp}
+              endTimestamp={endTimestamp}
+            />
             <YAxis
               tickCount={10}
               domain={[Math.min(minValue - 10, 0), 'auto']}
@@ -74,7 +79,11 @@ export const StrategySnapshotChart = ({
             <Tooltip
               animationDuration={100}
               cursor={false}
-              content={<Chart.Tooltip />}
+              content={
+                <Chart.Tooltip
+                  labelFormatter={formatTimeSeriesTooltipTimestamp}
+                />
+              }
             />
             {chart.series.map((item) => (
               <Line
@@ -84,6 +93,7 @@ export const StrategySnapshotChart = ({
                 stroke={chart.color(item.color)}
                 strokeWidth={2}
                 dot={false}
+                activeDot={{ r: 5, strokeWidth: 2 }}
               />
             ))}
           </LineChart>

package/src/app/lib/runtimeStrategies.ts

@@ -9,6 +9,7 @@ import type {
   ExchangeEntryRecord,
   PositionPnlSnapshot,
   RuntimeTradeRecord,
+  RuntimeLineage,
   SimpleOrderLogData,
   StrategyConfig,
   TestStat,
@@ -72,6 +73,21 @@ export interface RuntimeStrategyTradeView {
   lastSyncedAt: number | null;
 }
 
+export interface RuntimeStrategyLineageScope {
+  strategy: string;
+  symbol: string;
+  runtimeConfigId?: string;
+  lineage: RuntimeLineage;
+  firstTimestamp: number;
+  lastTimestamp: number;
+}
+
+export interface RuntimeStrategyAiGateChange {
+  timestamp: number;
+  previousFingerprint: string;
+  fingerprint: string;
+}
+
 export interface RuntimeStrategyView {
   runtimeKey: string;
   strategyName: string;
@@ -89,6 +105,7 @@ export interface RuntimeStrategyView {
   stat: TestStat;
   summary: RuntimeStrategyTradeSummary;
   orderLog: SimpleOrderLogData;
+  aiGateChanges: RuntimeStrategyAiGateChange[];
   recentTrades: RuntimeStrategyTradeView[];
   orders: RuntimeStrategyTradeView[];
 }
@@ -164,6 +181,104 @@ export interface RuntimeStrategiesResponse {
   strategies: RuntimeStrategyView[];
 }
 
+export const isRuntimeStrategyLineageScope = (
+  value: unknown,
+): value is RuntimeStrategyLineageScope => {
+  if (!value || typeof value !== 'object') {
+    return false;
+  }
+
+  const record = value as Record<string, unknown>;
+  const lineage = record.lineage as Record<string, unknown> | undefined;
+
+  return (
+    typeof record.strategy === 'string' &&
+    typeof record.symbol === 'string' &&
+    typeof record.firstTimestamp === 'number' &&
+    Number.isFinite(record.firstTimestamp) &&
+    typeof record.lastTimestamp === 'number' &&
+    Number.isFinite(record.lastTimestamp) &&
+    lineage != null &&
+    typeof lineage.gateFingerprint === 'string' &&
+    lineage.gateFingerprint.trim().length > 0
+  );
+};
+
+export const buildRuntimeStrategyAiGateChanges = ({
+  scopes,
+  strategyName,
+  configId,
+  startTime,
+  endTime,
+}: {
+  scopes: RuntimeStrategyLineageScope[];
+  strategyName: string;
+  configId?: string;
+  startTime: number;
+  endTime: number;
+}): RuntimeStrategyAiGateChange[] => {
+  const normalizedConfigId = configId ?? 'config';
+  const observationsByTimestamp = new Map<
+    number,
+    { fingerprint: string; lastTimestamp: number }
+  >();
+
+  for (const scope of scopes) {
+    if (
+      scope.strategy !== strategyName ||
+      (scope.runtimeConfigId ?? 'config') !== normalizedConfigId ||
+      scope.firstTimestamp > endTime
+    ) {
+      continue;
+    }
+
+    const fingerprint = scope.lineage.gateFingerprint.trim();
+    const existing = observationsByTimestamp.get(scope.firstTimestamp);
+
+    // Multiple symbols are evaluated for the same strategy timestamp. If a
+    // deploy happens during that cycle, prefer the lineage that kept running
+    // afterwards instead of making the marker order depend on the symbol name.
+    if (
+      !existing ||
+      scope.lastTimestamp > existing.lastTimestamp ||
+      (scope.lastTimestamp === existing.lastTimestamp &&
+        fingerprint > existing.fingerprint)
+    ) {
+      observationsByTimestamp.set(scope.firstTimestamp, {
+        fingerprint,
+        lastTimestamp: scope.lastTimestamp,
+      });
+    }
+  }
+
+  const observations = [...observationsByTimestamp.entries()].sort(
+    ([leftTimestamp], [rightTimestamp]) => leftTimestamp - rightTimestamp,
+  );
+  const changes: RuntimeStrategyAiGateChange[] = [];
+  let currentFingerprint: string | null = null;
+
+  for (const [timestamp, observation] of observations) {
+    if (currentFingerprint == null) {
+      currentFingerprint = observation.fingerprint;
+      continue;
+    }
+    if (observation.fingerprint === currentFingerprint) {
+      continue;
+    }
+
+    if (timestamp >= startTime) {
+      changes.push({
+        timestamp,
+        previousFingerprint: currentFingerprint,
+        fingerprint: observation.fingerprint,
+      });
+    }
+    currentFingerprint = observation.fingerprint;
+  }
+
+  return changes;
+};
+
 const roundValue = (value: number, digits = 2) => {
   if (!Number.isFinite(value)) {
     return 0;

package/src/app/lib/timeSeriesChart.ts

@@ -0,0 +1,100 @@
+import { format } from 'date-fns';
+
+const SHORT_TIME_RANGE_MS = 48 * 60 * 60 * 1000;
+
+type TooltipPayloadEntry = {
+  payload?: unknown;
+};
+
+const getValidDate = (value: unknown) => {
+  if (
+    value === null ||
+    value === undefined ||
+    typeof value === 'boolean' ||
+    (typeof value === 'string' && value.trim() === '')
+  ) {
+    return null;
+  }
+
+  let timestamp: number;
+  try {
+    timestamp = Number(value);
+  } catch {
+    return null;
+  }
+
+  if (!Number.isFinite(timestamp)) {
+    return null;
+  }
+
+  const date = new Date(timestamp);
+  return Number.isNaN(date.getTime()) ? null : date;
+};
+
+export const buildTimeSeriesTicks = (
+  startTimestamp: number,
+  endTimestamp: number,
+  tickCount = 7,
+) => {
+  if (!getValidDate(startTimestamp) || !getValidDate(endTimestamp)) {
+    return [];
+  }
+
+  const start = Math.min(startTimestamp, endTimestamp);
+  const end = Math.max(startTimestamp, endTimestamp);
+  if (start === end) {
+    return [start];
+  }
+
+  const count = Math.max(2, Math.trunc(tickCount));
+  const ticks = Array.from({ length: count }, (_, index) =>
+    index === count - 1
+      ? end
+      : Math.round(start + ((end - start) * index) / (count - 1)),
+  );
+
+  return [...new Set(ticks)];
+};
+
+export const formatTimeSeriesAxisTimestamp = ({
+  timestamp,
+  startTimestamp,
+  endTimestamp,
+  includeTime,
+}: {
+  timestamp: number;
+  startTimestamp: number;
+  endTimestamp: number;
+  includeTime?: boolean;
+}) => {
+  const date = getValidDate(timestamp);
+  if (!date) {
+    return String(timestamp);
+  }
+
+  return format(
+    date,
+    includeTime ?? endTimestamp - startTimestamp <= SHORT_TIME_RANGE_MS
+      ? 'dd.MM HH:mm'
+      : 'dd.MM',
+  );
+};
+
+export const formatTimeSeriesTooltipTimestamp = (
+  value: unknown,
+  payload: ReadonlyArray<TooltipPayloadEntry> = [],
+) => {
+  const payloadTimestamp = payload.reduce<unknown>((timestamp, item) => {
+    if (timestamp !== undefined) {
+      return timestamp;
+    }
+
+    const row = item.payload;
+    return row && typeof row === 'object' && 'timestamp' in row
+      ? row.timestamp
+      : undefined;
+  }, undefined);
+  const date = getValidDate(value) ?? getValidDate(payloadTimestamp);
+
+  return date ? format(date, 'dd.MM.yyyy HH:mm') : String(value ?? '');
+};

package/src/app/routes/derivatives/page.tsx

@@ -33,13 +33,14 @@ import {
   ReferenceLine,
   ResponsiveContainer,
   Tooltip,
-  XAxis,
   YAxis,
 } from 'recharts';
 import { format } from 'date-fns';
 import { FiBarChart2 } from 'react-icons/fi';
 import { API } from '@tradejs/core/api';
 import { buildKlinePath } from '#app/lib/marketRoutes';
+import { formatTimeSeriesTooltipTimestamp } from '#app/lib/timeSeriesChart';
+import { TimeSeriesXAxis } from '#shared/Charts/TimeSeriesXAxis';
 import { EmptyState, Segment, Select, toaster } from '#ui';
 
 type SummaryItem = {
@@ -91,6 +92,11 @@ type PriceResponse = {
   data?: PriceRow[];
 };
 
+type ChartWindow = {
+  startTimestamp: number;
+  endTimestamp: number;
+};
+
 type BiasTone = 'teal' | 'green' | 'red' | 'orange' | 'gray';
 
 type SymbolMetrics = {
@@ -224,12 +230,6 @@ const getChartDomain = (
   return [min - basePadding, max + basePadding];
 };
 
-const formatTimeLabel = (value: string) => {
-  const parsed = new Date(value);
-  if (Number.isNaN(parsed.getTime())) return value;
-  return format(parsed, 'dd.MM HH:mm');
-};
-
 const formatFullTime = (value: string | null | undefined) => {
   if (!value) return 'n/a';
   const parsed = new Date(value);
@@ -572,7 +572,7 @@ const ChartCard = ({
 
 const mapRowsToChartRows = (rows: DetailRow[]) =>
   rows.map((row) => ({
-    timestamp: formatTimeLabel(row.ts),
+    timestamp: new Date(row.ts).getTime(),
     openInterest: toFiniteNumber(row.open_interest) ?? 0,
     funding: (toFiniteNumber(row.funding_rate) ?? 0) * 10_000,
     longLiquidations: -(toFiniteNumber(row.liq_long) ?? 0),
@@ -582,15 +582,17 @@ const mapRowsToChartRows = (rows: DetailRow[]) =>
 const mapPriceRowsToChartRows = (rows: PriceRow[]) =>
   rows.map((row) => ({
     price: toFiniteNumber(row.close) ?? 0,
-    timestamp: formatTimeLabel(new Date(row.timestamp).toISOString()),
+    timestamp: row.timestamp,
   }));
 
 const SymbolPriceCard = ({
   symbol,
   rows,
+  window,
 }: {
   symbol: string;
   rows: PriceRow[];
+  window: ChartWindow;
 }) => {
   const theme = SYMBOL_THEMES[symbol];
   const symbolLabel = getSymbolLabel(symbol);
@@ -644,9 +646,21 @@ const SymbolPriceCard = ({
                 stroke={priceChart.color('border')}
                 vertical={false}
               />
-              <XAxis dataKey="timestamp" minTickGap={36} />
+              <TimeSeriesXAxis
+                startTimestamp={window.startTimestamp}
+                endTimestamp={window.endTimestamp}
+                tickCount={5}
+                minTickGap={36}
+              />
               <YAxis domain={priceDomain} tickFormatter={formatPrice} />
-              <Tooltip cursor={false} content={<Chart.Tooltip />} />
+              <Tooltip
+                cursor={false}
+                content={
+                  <Chart.Tooltip
+                    labelFormatter={formatTimeSeriesTooltipTimestamp}
+                  />
+                }
+              />
               <Area
                 type="monotone"
                 dataKey={priceChart.key('price') as string}
@@ -667,9 +681,11 @@ const SymbolPriceCard = ({
 const SymbolOpenInterestCard = ({
   symbol,
   rows,
+  window,
 }: {
   symbol: string;
   rows: DetailRow[];
+  window: ChartWindow;
 }) => {
   const theme = SYMBOL_THEMES[symbol];
   const symbolLabel = getSymbolLabel(symbol);
@@ -722,9 +738,21 @@ const SymbolOpenInterestCard = ({
                 stroke={oiChart.color('border')}
                 vertical={false}
               />
-              <XAxis dataKey="timestamp" minTickGap={36} />
+              <TimeSeriesXAxis
+                startTimestamp={window.startTimestamp}
+                endTimestamp={window.endTimestamp}
+                tickCount={5}
+                minTickGap={36}
+              />
               <YAxis domain={oiDomain} tickFormatter={formatAxisCompact} />
-              <Tooltip cursor={false} content={<Chart.Tooltip />} />
+              <Tooltip
+                cursor={false}
+                content={
+                  <Chart.Tooltip
+                    labelFormatter={formatTimeSeriesTooltipTimestamp}
+                  />
+                }
+              />
               <Area
                 type="monotone"
                 dataKey={oiChart.key('openInterest') as string}
@@ -745,9 +773,11 @@ const SymbolOpenInterestCard = ({
 const SymbolFundingCard = ({
   symbol,
   rows,
+  window,
 }: {
   symbol: string;
   rows: DetailRow[];
+  window: ChartWindow;
 }) => {
   const theme = SYMBOL_THEMES[symbol];
   const symbolLabel = getSymbolLabel(symbol);
@@ -781,9 +811,21 @@ const SymbolFundingCard = ({
                 stroke={fundingChart.color('gray.600')}
                 strokeDasharray="4 4"
               />
-              <XAxis dataKey="timestamp" minTickGap={36} />
+              <TimeSeriesXAxis
+                startTimestamp={window.startTimestamp}
+                endTimestamp={window.endTimestamp}
+                tickCount={5}
+                minTickGap={36}
+              />
               <YAxis tickFormatter={(value) => `${value} bps`} />
-              <Tooltip cursor={false} content={<Chart.Tooltip />} />
+              <Tooltip
+                cursor={false}
+                content={
+                  <Chart.Tooltip
+                    labelFormatter={formatTimeSeriesTooltipTimestamp}
+                  />
+                }
+              />
               <Bar
                 dataKey={fundingChart.key('funding') as string}
                 isAnimationActive={false}
@@ -810,9 +852,11 @@ const SymbolFundingCard = ({
 const SymbolLiquidationCard = ({
   symbol,
   rows,
+  window,
 }: {
   symbol: string;
   rows: DetailRow[];
+  window: ChartWindow;
 }) => {
   const theme = SYMBOL_THEMES[symbol];
   const symbolLabel = getSymbolLabel(symbol);
@@ -849,9 +893,21 @@ const SymbolLiquidationCard = ({
                 stroke={liquidationChart.color('gray.600')}
                 strokeDasharray="4 4"
               />
-              <XAxis dataKey="timestamp" minTickGap={28} />
+              <TimeSeriesXAxis
+                startTimestamp={window.startTimestamp}
+                endTimestamp={window.endTimestamp}
+                tickCount={5}
+                minTickGap={28}
+              />
               <YAxis tickFormatter={formatAxisCompact} />
-              <Tooltip cursor={false} content={<Chart.Tooltip />} />
+              <Tooltip
+                cursor={false}
+                content={
+                  <Chart.Tooltip
+                    labelFormatter={formatTimeSeriesTooltipTimestamp}
+                  />
+                }
+              />
               <Legend />
               <Bar
                 dataKey={liquidationChart.key('longLiquidations') as string}
@@ -883,6 +939,13 @@ const DerivativesPage = () => {
   const [pricesBySymbol, setPricesBySymbol] = useState<
     Record<string, PriceRow[]>
   >({});
+  const [chartWindow, setChartWindow] = useState<ChartWindow>(() => {
+    const endTimestamp = Date.now();
+    return {
+      startTimestamp: endTimestamp - 24 * 60 * 60 * 1000,
+      endTimestamp,
+    };
+  });
   const [summaryLoading, setSummaryLoading] = useState(false);
   const [detailLoading, setDetailLoading] = useState(false);
   const [summaryError, setSummaryError] = useState('');
@@ -959,6 +1022,7 @@ const DerivativesPage = () => {
           responses.map(([symbol, payload]) => [symbol, payload.priceRows]),
         ),
       );
+      setChartWindow({ startTimestamp: from, endTimestamp: now });
     } catch (err) {
       const message =
         (err as Error)?.message ||
@@ -1101,6 +1165,7 @@ const DerivativesPage = () => {
                         key={`${symbol}:price`}
                         symbol={symbol}
                         rows={pricesBySymbol[symbol] ?? []}
+                        window={chartWindow}
                       />
                     ))}
                   </SimpleGrid>
@@ -1111,6 +1176,7 @@ const DerivativesPage = () => {
                         key={`${symbol}:oi`}
                         symbol={symbol}
                         rows={detailsBySymbol[symbol] ?? []}
+                        window={chartWindow}
                       />
                     ))}
                   </SimpleGrid>
@@ -1121,6 +1187,7 @@ const DerivativesPage = () => {
                         key={`${symbol}:funding`}
                         symbol={symbol}
                         rows={detailsBySymbol[symbol] ?? []}
+                        window={chartWindow}
                       />
                     ))}
                   </SimpleGrid>
@@ -1131,6 +1198,7 @@ const DerivativesPage = () => {
                         key={`${symbol}:liq`}
                         symbol={symbol}
                         rows={detailsBySymbol[symbol] ?? []}
+                        window={chartWindow}
                       />
                     ))}
                   </SimpleGrid>

package/src/app/routes/strategies/StrategiesPageClient.tsx

@@ -89,6 +89,17 @@ const RuntimeStrategiesContent = () => {
   const isSnapshotMode = mode === 'replay' || mode === 'ai';
   const snapshotModeLabel = mode === 'replay' ? 'Replay' : 'AI';
   const snapshotModeLabelLower = snapshotModeLabel.toLowerCase();
+  const runtimeChartWindow = useMemo(() => {
+    if (!runtimeData) {
+      return null;
+    }
+
+    return {
+      startTimestamp:
+        runtimeData.generatedAt - runtimeData.hours * 60 * 60 * 1000,
+      endTimestamp: runtimeData.generatedAt,
+    };
+  }, [runtimeData]);
 
   useEffect(() => {
     setMode(routeMode);
@@ -557,11 +568,14 @@ const RuntimeStrategiesContent = () => {
 
               {!loading &&
                 mode === 'runtime' &&
+                runtimeChartWindow &&
                 filteredRuntimeStrategies.map((strategy) => (
                   <RuntimeStrategyCard
                     key={strategy.runtimeKey}
                     strategy={strategy}
                     provider={runtimeData?.provider || 'bybit'}
+                    startTimestamp={runtimeChartWindow.startTimestamp}
+                    endTimestamp={runtimeChartWindow.endTimestamp}
                     onUpdated={load}
                   />
                 ))}