@tradejs/app 3.1.8 → 3.1.9

package/package.json

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

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

@@ -7,6 +7,7 @@ import type {
 } from '@tradejs/types';
 import { toFileToken } from '@tradejs/infra/ai';
 import { getData, getKeys, redisKeys } from '@tradejs/infra/redis';
+import { getAvailableStrategyNames } from '@tradejs/node/registry';
 import { getCurrentUserName } from '#app/lib/currentUser';
 
 export const dynamic = 'force-dynamic';
@@ -104,6 +105,46 @@ const normalizeStrategyChartCard = (
   orders: Array.isArray(card.orders) ? card.orders : [],
 });
 
+const normalizeLegacyStrategyNames = async (cards: StrategyChartSnapshot[]) => {
+  let availableStrategyNames: string[] = [];
+
+  try {
+    availableStrategyNames = await getAvailableStrategyNames(getProjectRoot());
+  } catch {
+    return cards;
+  }
+
+  const canonicalNameByToken = new Map(
+    availableStrategyNames.map((strategyName) => [
+      toFileToken(strategyName),
+      strategyName,
+    ]),
+  );
+
+  return cards.map((card) => {
+    const canonicalName = canonicalNameByToken.get(
+      toFileToken(card.strategyName),
+    );
+    if (!canonicalName || canonicalName === card.strategyName) {
+      return card;
+    }
+
+    const titlePrefix = `${card.strategyName} · `;
+    const title =
+      card.title === card.strategyName
+        ? canonicalName
+        : card.title.startsWith(titlePrefix)
+          ? `${canonicalName}${card.title.slice(card.strategyName.length)}`
+          : card.title;
+
+    return {
+      ...card,
+      strategyName: canonicalName,
+      title,
+    };
+  });
+};
+
 export async function GET() {
   const userName = await getCurrentUserName();
   if (!userName) {
@@ -111,7 +152,7 @@ export async function GET() {
   }
 
   const keys = await getKeys(redisKeys.strategyChartCards(userName, 'ai'));
-  const cards = (
+  const storedCards = (
     await Promise.all(
       keys.map(
         (key) => getData(key, null) as Promise<StrategyChartSnapshot | null>,
@@ -119,13 +160,13 @@ export async function GET() {
     )
   )
     .filter((card): card is StrategyChartSnapshot => Boolean(card))
-    .map(normalizeStrategyChartCard)
-    .sort(
-      (left, right) =>
-        resolveTotalPnl(right) - resolveTotalPnl(left) ||
-        right.generatedAt - left.generatedAt ||
-        left.title.localeCompare(right.title),
-    );
+    .map(normalizeStrategyChartCard);
+  const cards = (await normalizeLegacyStrategyNames(storedCards)).sort(
+    (left, right) =>
+      resolveTotalPnl(right) - resolveTotalPnl(left) ||
+      right.generatedAt - left.generatedAt ||
+      left.title.localeCompare(right.title),
+  );
   const strategies = await attachLegacyDatasetIds(cards);
 
   const data: StrategyChartsSnapshotResponse = {

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

@@ -134,23 +134,6 @@ export const RuntimeStrategyCard = ({
         <Badge colorPalette="cyan" variant="outline">
           TF: {strategy.interval}m
         </Badge>
-        <Badge colorPalette="gray" variant="outline">
-          version: v{strategy.version}
-        </Badge>
-        {strategy.accountId ? (
-          <Badge colorPalette="purple" variant="outline">
-            account: {strategy.accountLabel ?? strategy.accountId}
-          </Badge>
-        ) : null}
-        <Badge colorPalette="orange" variant="outline">
-          deployment: {strategy.deploymentId}
-        </Badge>
-        {strategy.policyProfileId ? (
-          <Badge colorPalette="cyan" variant="outline">
-            policy: {strategy.policyProfileId}
-          </Badge>
-        ) : null}
-
         <Flex gap="1">
           <Text fontSize="sm" fontWeight="bold" color="gray.400" mt={1}>
             connector:
@@ -244,6 +227,7 @@ export const RuntimeStrategyCard = ({
       <RuntimeStrategyConfigDrawer
         open={configOpen}
         strategy={strategy}
+        provider={provider}
         onOpenChange={setConfigOpen}
       />
 

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

@@ -1,10 +1,15 @@
 'use client';
 
 import {
+  Box,
   Button,
+  Clipboard,
   CloseButton,
   Drawer,
+  Flex,
+  IconButton,
   Portal,
+  SimpleGrid,
   Text,
   Textarea,
 } from '@chakra-ui/react';
@@ -13,49 +18,163 @@ import type { RuntimeStrategyView } from '@tradejs/types';
 export const RuntimeStrategyConfigDrawer = ({
   open,
   strategy,
+  provider,
   onOpenChange,
 }: {
   open: boolean;
   strategy: RuntimeStrategyView;
+  provider: string;
   onOpenChange: (open: boolean) => void;
-}) => (
-  <Drawer.Root
-    size="lg"
-    open={open}
-    onOpenChange={(event) => onOpenChange(event.open)}
-  >
-    <Portal>
-      <Drawer.Backdrop />
-      <Drawer.Positioner>
-        <Drawer.Content bg="gray.950">
-          <Drawer.Header>
-            <Drawer.Title>
-              {strategy.strategyName} version v{strategy.version}
-            </Drawer.Title>
-            <Drawer.CloseTrigger asChild>
-              <CloseButton size="sm" />
-            </Drawer.CloseTrigger>
-          </Drawer.Header>
-          <Drawer.Body display="flex" flexDirection="column" gap={4}>
-            <Text color="gray.400">
-              This configuration is read-only here. Change it in
-              tradejs.config.ts and deploy a new Project image.
-            </Text>
-            <Textarea
-              value={JSON.stringify(strategy.config, null, 2)}
-              readOnly
-              minH="70vh"
-              fontFamily="mono"
-              fontSize="sm"
-            />
-          </Drawer.Body>
-          <Drawer.Footer>
-            <Button variant="outline" onClick={() => onOpenChange(false)}>
-              Close
-            </Button>
-          </Drawer.Footer>
-        </Drawer.Content>
-      </Drawer.Positioner>
-    </Portal>
-  </Drawer.Root>
-);
+}) => {
+  const config = JSON.stringify(strategy.config, null, 2);
+  const serviceInfo = [
+    { label: 'Version', value: `v${strategy.version}` },
+    { label: 'Config ID', value: strategy.configId },
+    { label: 'Runtime key', value: strategy.runtimeKey },
+    { label: 'Deployment', value: strategy.deploymentId },
+    { label: 'Account label', value: strategy.accountLabel ?? 'Not set' },
+    { label: 'Account ID', value: strategy.accountId ?? 'Not assigned' },
+    {
+      label: 'Policy profile',
+      value: strategy.policyProfileId ?? 'Not assigned',
+    },
+    { label: 'Connector', value: provider },
+    { label: 'Universe', value: strategy.universe },
+    { label: 'Timeframe', value: `${strategy.interval}m` },
+    {
+      label: 'Strategy state',
+      value: strategy.enabled ? 'Enabled' : 'Disabled',
+    },
+    { label: 'Control state', value: strategy.controlState },
+    {
+      label: 'Runtime connection',
+      value: strategy.connected ? 'Connected' : 'Disconnected',
+    },
+    { label: 'Total trades', value: strategy.summary.totalTrades },
+    { label: 'Active trades', value: strategy.summary.activeTrades },
+    { label: 'Closed trades', value: strategy.summary.closedTrades },
+    { label: 'Tracked symbols', value: strategy.symbols.length },
+  ];
+
+  return (
+    <Drawer.Root
+      size="lg"
+      open={open}
+      onOpenChange={(event) => onOpenChange(event.open)}
+    >
+      <Portal>
+        <Drawer.Backdrop />
+        <Drawer.Positioner>
+          <Drawer.Content bg="gray.950">
+            <Drawer.Header>
+              <Drawer.Title>{strategy.strategyName} configuration</Drawer.Title>
+              <Drawer.CloseTrigger asChild>
+                <CloseButton size="sm" />
+              </Drawer.CloseTrigger>
+            </Drawer.Header>
+            <Drawer.Body
+              display="flex"
+              flexDirection="column"
+              gap={4}
+              overflowY="auto"
+            >
+              <Text color="gray.400">
+                This configuration is read-only here. Change it in
+                tradejs.config.ts and deploy a new Project image.
+              </Text>
+
+              <Box
+                p={4}
+                borderWidth="1px"
+                borderColor="gray.800"
+                borderRadius="md"
+                bg="gray.900"
+              >
+                <Text
+                  mb={3}
+                  fontSize="xs"
+                  fontWeight="semibold"
+                  color="gray.400"
+                  textTransform="uppercase"
+                  letterSpacing="wide"
+                >
+                  Runtime details
+                </Text>
+                <SimpleGrid columns={{ base: 1, sm: 2 }} gapX={6} gapY={4}>
+                  {serviceInfo.map((item) => (
+                    <Box key={item.label} minW={0}>
+                      <Text fontSize="xs" color="gray.500">
+                        {item.label}
+                      </Text>
+                      <Text
+                        mt={1}
+                        fontFamily="mono"
+                        fontSize="sm"
+                        color="gray.200"
+                        overflowWrap="anywhere"
+                      >
+                        {item.value}
+                      </Text>
+                    </Box>
+                  ))}
+                </SimpleGrid>
+                <Box mt={4} pt={4} borderTopWidth="1px" borderColor="gray.800">
+                  <Text fontSize="xs" color="gray.500">
+                    Symbols
+                  </Text>
+                  <Text
+                    mt={1}
+                    fontFamily="mono"
+                    fontSize="sm"
+                    color="gray.200"
+                    overflowWrap="anywhere"
+                  >
+                    {strategy.symbols.length
+                      ? strategy.symbols.join(', ')
+                      : 'No symbols'}
+                  </Text>
+                </Box>
+              </Box>
+
+              <Clipboard.Root value={config} display="block" w="full">
+                <Flex mb={2} alignItems="center" justifyContent="space-between">
+                  <Text
+                    fontSize="xs"
+                    fontWeight="semibold"
+                    color="gray.400"
+                    textTransform="uppercase"
+                    letterSpacing="wide"
+                  >
+                    Strategy config
+                  </Text>
+                  <Clipboard.Trigger asChild>
+                    <IconButton
+                      aria-label="Copy strategy config"
+                      title="Copy strategy config"
+                      size="xs"
+                      variant="ghost"
+                    >
+                      <Clipboard.Indicator />
+                    </IconButton>
+                  </Clipboard.Trigger>
+                </Flex>
+                <Textarea
+                  value={config}
+                  readOnly
+                  minH="45vh"
+                  fontFamily="mono"
+                  fontSize="sm"
+                />
+              </Clipboard.Root>
+            </Drawer.Body>
+            <Drawer.Footer>
+              <Button variant="outline" onClick={() => onOpenChange(false)}>
+                Close
+              </Button>
+            </Drawer.Footer>
+          </Drawer.Content>
+        </Drawer.Positioner>
+      </Portal>
+    </Drawer.Root>
+  );
+};

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

@@ -31,6 +31,27 @@ 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)) {
+    return '';
+  }
+
+  const date = new Date(timestamp);
+  if (!Number.isFinite(date.getTime())) {
+    return '';
+  }
+
+  return new Intl.DateTimeFormat('en-GB', {
+    dateStyle: 'medium',
+    timeStyle: 'short',
+  }).format(date);
+};
+
 export const buildStrategySnapshotCardViewModel = (
   snapshot: StrategyChartSnapshot,
   mode: 'replay' | 'ai',
@@ -88,6 +109,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) : '',
     tagsLabel: snapshot.tags?.join(' · ') ?? '',
     displaySubtitle:
       mode === 'ai'

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

@@ -53,6 +53,7 @@ export const StrategySnapshotCard = ({
     snapshotOrders,
     sourceLabel,
     sourceValue,
+    datasetCreatedAtLabel,
     tagsLabel,
     displaySubtitle,
     metrics,
@@ -131,6 +132,17 @@ export const StrategySnapshotCard = ({
           </Text>
         </Flex>
 
+        {datasetCreatedAtLabel ? (
+          <Flex gap="1">
+            <Text fontSize="sm" fontWeight="bold" color="gray.400" mt={1}>
+              exported:
+            </Text>
+            <Text fontSize="sm" color="gray.300" mt={1}>
+              {datasetCreatedAtLabel}
+            </Text>
+          </Flex>
+        ) : null}
+
         {tagsLabel ? (
           <Box
             px={2}

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

@@ -7,7 +7,11 @@ import { Box } from '@chakra-ui/react';
 import type { StrategyChartSnapshot } from '@tradejs/types';
 import { StrategySnapshotCard } from './StrategySnapshotCard';
 
-const SNAPSHOT_CARD_ROW_HEIGHT = 620;
+const REPLAY_SNAPSHOT_CARD_ROW_HEIGHT = 620;
+const AI_SNAPSHOT_CARD_ROW_HEIGHT = 548;
+
+export const getSnapshotCardRowHeight = (mode: 'replay' | 'ai') =>
+  mode === 'ai' ? AI_SNAPSHOT_CARD_ROW_HEIGHT : REPLAY_SNAPSHOT_CARD_ROW_HEIGHT;
 
 interface StrategySnapshotListProps {
   strategies: StrategyChartSnapshot[];
@@ -70,7 +74,7 @@ export const StrategySnapshotList = ({
           height={height}
           width={width}
           itemCount={strategies.length}
-          itemSize={SNAPSHOT_CARD_ROW_HEIGHT}
+          itemSize={getSnapshotCardRowHeight(mode)}
           overscanCount={overscan}
           itemKey={itemKey}
         >