@tradejs/app 3.1.27-beta.250 → 3.1.28-beta.251

package/package.json

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

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

@@ -29,6 +29,21 @@ import {
 } from './RuntimeStrategyCard.presenter';
 import { toaster } from '#ui';
 
+const DEPLOYMENT_PRESENTATIONS = [
+  { accent: 'blue.400', colorPalette: 'blue' },
+  { accent: 'purple.400', colorPalette: 'purple' },
+  { accent: 'pink.400', colorPalette: 'pink' },
+  { accent: 'cyan.400', colorPalette: 'cyan' },
+] as const;
+
+const getDeploymentPresentation = (deploymentId: string) => {
+  const hash = [...deploymentId].reduce(
+    (value, character) => (value * 31 + character.charCodeAt(0)) >>> 0,
+    0,
+  );
+  return DEPLOYMENT_PRESENTATIONS[hash % DEPLOYMENT_PRESENTATIONS.length];
+};
+
 const StatItem = ({
   stat,
   id,
@@ -73,6 +88,11 @@ export const RuntimeStrategyCard = ({
     [strategy],
   );
   const { lastTrade, runtimeOrders } = viewModel;
+  const deploymentPresentation = getDeploymentPresentation(
+    strategy.deploymentId,
+  );
+  const strategyInstanceLabel = `${strategy.strategyName}, ${strategy.deploymentLabel}`;
+  const maxLossValue = strategy.config.MAX_LOSS_VALUE;
   const setControlState = async (controlState: 'active' | 'entries_paused') => {
     setControlSaving(true);
     try {
@@ -112,12 +132,43 @@ export const RuntimeStrategyCard = ({
       shadow="sm"
       borderWidth="1px"
       borderColor={strategy.connected ? 'gray.800' : 'orange.900'}
+      borderLeftWidth="4px"
+      borderLeftColor={deploymentPresentation.accent}
       overflowX="auto"
     >
       <Flex gap="4" p={4} mb={3} alignItems="center" wrap="wrap">
-        <Text fontSize="lg" fontWeight="bold" color="gray.200">
-          {strategy.strategyName}
-        </Text>
+        <Flex direction="column" gap={1} minW="280px">
+          <Flex gap={2} alignItems="center" wrap="wrap">
+            <Text fontSize="lg" fontWeight="bold" color="gray.200">
+              {strategy.strategyName}
+            </Text>
+            <Badge
+              colorPalette={deploymentPresentation.colorPalette}
+              variant="subtle"
+            >
+              {strategy.deploymentLabel}
+            </Badge>
+          </Flex>
+          <Flex gap={3} alignItems="center" wrap="wrap">
+            <Text fontSize="xs" color="gray.400">
+              account: {strategy.accountLabel ?? strategy.accountId ?? 'none'}
+            </Text>
+            <Text fontSize="xs" color="gray.400">
+              version: {strategy.strategyPackageVersion}
+            </Text>
+            {strategy.generation ? (
+              <Text fontSize="xs" color="gray.400">
+                generation: {strategy.generation}
+              </Text>
+            ) : null}
+            {typeof maxLossValue === 'number' &&
+            Number.isFinite(maxLossValue) ? (
+              <Text fontSize="xs" color="gray.400">
+                max loss: {maxLossValue}
+              </Text>
+            ) : null}
+          </Flex>
+        </Flex>
         <Badge
           colorPalette={strategy.enabled ? 'teal' : 'gray'}
           variant="subtle"
@@ -225,7 +276,7 @@ export const RuntimeStrategyCard = ({
       </Flex>
 
       <OrdersDrawerPanel
-        title={`${strategy.strategyName} orders`}
+        title={`${strategyInstanceLabel} orders`}
         open={ordersOpen}
         orders={runtimeOrders}
         rowHeight={RUNTIME_ORDER_ROW_HEIGHT}

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

@@ -30,7 +30,15 @@ export const RuntimeStrategyConfigDrawer = ({
   const serviceInfo = [
     { label: 'Strategy revision', value: strategy.strategyRevision },
     { label: 'Runtime key', value: strategy.runtimeKey },
-    { label: 'Deployment', value: strategy.deploymentId },
+    { label: 'Strategy module', value: strategy.strategyModule },
+    { label: 'Strategy package', value: strategy.strategyPackage },
+    {
+      label: 'Package version',
+      value: strategy.strategyPackageVersion,
+    },
+    { label: 'Generation', value: strategy.generation ?? 'Not set' },
+    { label: 'Deployment label', value: strategy.deploymentLabel },
+    { label: 'Deployment ID', value: strategy.deploymentId },
     {
       label: 'Configured tickers',
       value: strategy.selection?.tickers?.length ?? 'All available',
@@ -70,7 +78,10 @@ export const RuntimeStrategyConfigDrawer = ({
         <Drawer.Positioner>
           <Drawer.Content bg="gray.950">
             <Drawer.Header>
-              <Drawer.Title>{strategy.strategyName} configuration</Drawer.Title>
+              <Drawer.Title>
+                {strategy.strategyName}, {strategy.deploymentLabel}{' '}
+                configuration
+              </Drawer.Title>
               <Drawer.CloseTrigger asChild>
                 <CloseButton size="sm" />
               </Drawer.CloseTrigger>

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

@@ -85,7 +85,9 @@ export const RuntimeStrategyRevisionsDrawer = ({
         <Drawer.Positioner>
           <Drawer.Content bg="gray.950">
             <Drawer.Header>
-              <Drawer.Title>{strategy.strategyName} revisions</Drawer.Title>
+              <Drawer.Title>
+                {strategy.strategyName}, {strategy.deploymentLabel} revisions
+              </Drawer.Title>
               <Drawer.CloseTrigger asChild>
                 <CloseButton size="sm" />
               </Drawer.CloseTrigger>

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

@@ -206,7 +206,9 @@ export const RuntimeStrategyStatsDrawer = ({
             bg="gray.950"
           >
             <Drawer.Header>
-              <Drawer.Title>{strategy.strategyName}</Drawer.Title>
+              <Drawer.Title>
+                {strategy.strategyName}, {strategy.deploymentLabel}
+              </Drawer.Title>
               <Drawer.CloseTrigger asChild>
                 <CloseButton size="sm" />
               </Drawer.CloseTrigger>

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

@@ -27,6 +27,7 @@ import { EmptyState, Segment, Select, toaster } from '#ui';
 
 const ALL_STRATEGIES = '__all__';
 const ALL_RUNTIME_SCOPES = '__all_runtime_scopes__';
+const ALL_RUNTIME_DEPLOYMENTS = '__all_runtime_deployments__';
 type StrategyMode = 'runtime' | 'replay' | 'ai' | 'backtest';
 type RuntimeStatusFilter = 'all' | 'enabled' | 'disabled';
 
@@ -75,6 +76,9 @@ const RuntimeStrategiesContent = () => {
   const [runtimeStatusFilter, setRuntimeStatusFilter] =
     useState<RuntimeStatusFilter>('all');
   const [runtimeUniverse, setRuntimeUniverse] = useState(ALL_RUNTIME_SCOPES);
+  const [runtimeDeployment, setRuntimeDeployment] = useState(
+    ALL_RUNTIME_DEPLOYMENTS,
+  );
   const [isDeleteSelectedOpen, setIsDeleteSelectedOpen] = useState(false);
   const [isDeletingSelected, setIsDeletingSelected] = useState(false);
   const [pendingSnapshotDelete, setPendingSnapshotDelete] =
@@ -110,6 +114,7 @@ const RuntimeStrategiesContent = () => {
       setMode(modeFromPathname(window.location.pathname));
       setSelectedStrategy(ALL_STRATEGIES);
       setRuntimeStatusFilter('all');
+      setRuntimeDeployment(ALL_RUNTIME_DEPLOYMENTS);
     };
 
     window.addEventListener('popstate', handlePopState);
@@ -122,6 +127,7 @@ const RuntimeStrategiesContent = () => {
     setMode(nextMode);
     setSelectedStrategy(ALL_STRATEGIES);
     setRuntimeStatusFilter('all');
+    setRuntimeDeployment(ALL_RUNTIME_DEPLOYMENTS);
 
     window.history.pushState(null, '', `/routes/strategies/${nextMode}`);
   }, []);
@@ -201,31 +207,44 @@ const RuntimeStrategiesContent = () => {
   const filteredRuntimeStrategies = useMemo(() => {
     const strategies = runtimeData?.strategies ?? [];
 
-    return strategies.filter((strategy) => {
-      if (
-        selectedStrategy !== ALL_STRATEGIES &&
-        strategy.strategyName !== selectedStrategy
-      ) {
-        return false;
-      }
-      if (
-        runtimeUniverse !== ALL_RUNTIME_SCOPES &&
-        strategy.universe !== runtimeUniverse
-      ) {
-        return false;
-      }
-      if (runtimeStatusFilter === 'enabled') {
-        return strategy.enabled;
-      }
+    return strategies
+      .filter((strategy) => {
+        if (
+          selectedStrategy !== ALL_STRATEGIES &&
+          strategy.strategyName !== selectedStrategy
+        ) {
+          return false;
+        }
+        if (
+          runtimeUniverse !== ALL_RUNTIME_SCOPES &&
+          strategy.universe !== runtimeUniverse
+        ) {
+          return false;
+        }
+        if (
+          runtimeDeployment !== ALL_RUNTIME_DEPLOYMENTS &&
+          strategy.deploymentId !== runtimeDeployment
+        ) {
+          return false;
+        }
+        if (runtimeStatusFilter === 'enabled') {
+          return strategy.enabled;
+        }
 
-      if (runtimeStatusFilter === 'disabled') {
-        return !strategy.enabled;
-      }
+        if (runtimeStatusFilter === 'disabled') {
+          return !strategy.enabled;
+        }
 
-      return true;
-    });
+        return true;
+      })
+      .sort(
+        (left, right) =>
+          left.strategyName.localeCompare(right.strategyName) ||
+          left.deploymentLabel.localeCompare(right.deploymentLabel),
+      );
   }, [
     runtimeData?.strategies,
+    runtimeDeployment,
     runtimeStatusFilter,
     runtimeUniverse,
     selectedStrategy,
@@ -241,6 +260,21 @@ const RuntimeStrategiesContent = () => {
     ];
   }, [runtimeData?.strategies]);
 
+  const runtimeDeploymentItems = useMemo(() => {
+    const deployments = new Map(
+      (runtimeData?.strategies ?? []).map((strategy) => [
+        strategy.deploymentId,
+        strategy.deploymentLabel,
+      ]),
+    );
+    return [
+      { label: 'All deployments', value: ALL_RUNTIME_DEPLOYMENTS },
+      ...[...deployments]
+        .sort(([, left], [, right]) => left.localeCompare(right))
+        .map(([value, label]) => ({ label, value })),
+    ];
+  }, [runtimeData?.strategies]);
+
   const filteredSnapshotStrategies = useMemo(() => {
     const strategies = snapshotData?.strategies ?? [];
 
@@ -491,6 +525,17 @@ const RuntimeStrategiesContent = () => {
                     width="180px"
                   />
                 ) : null}
+                {mode === 'runtime' ? (
+                  <Select
+                    value={[runtimeDeployment]}
+                    defaultValue={[runtimeDeployment]}
+                    onChange={(value) =>
+                      setRuntimeDeployment(value[0] || ALL_RUNTIME_DEPLOYMENTS)
+                    }
+                    items={runtimeDeploymentItems}
+                    width="180px"
+                  />
+                ) : null}
                 {mode === 'runtime' ? (
                   <Segment
                     defaultValue="all"