@tradejs/app 3.1.26-beta.243 → 3.1.26-beta.244

package/package.json

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

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

@@ -20,6 +20,7 @@ import {
 } from '#components/Shared/OrdersDrawer';
 import { RuntimeStrategyChart } from './RuntimeStrategyChart';
 import { RuntimeStrategyConfigDrawer } from './RuntimeStrategyConfigDrawer';
+import { RuntimeStrategyRevisionsDrawer } from './RuntimeStrategyRevisionsDrawer';
 import { RuntimeStrategyStatsDrawer } from './RuntimeStrategyStatsDrawer';
 import {
   buildRuntimeStrategyCardViewModel,
@@ -65,6 +66,7 @@ export const RuntimeStrategyCard = ({
   const [configOpen, setConfigOpen] = useState(false);
   const [ordersOpen, setOrdersOpen] = useState(false);
   const [statsOpen, setStatsOpen] = useState(false);
+  const [revisionsOpen, setRevisionsOpen] = useState(false);
   const [controlSaving, setControlSaving] = useState(false);
   const viewModel = useMemo(
     () => buildRuntimeStrategyCardViewModel(strategy),
@@ -209,6 +211,12 @@ export const RuntimeStrategyCard = ({
                   <Menu.Item value="stat" onClick={() => setStatsOpen(true)}>
                     Stat
                   </Menu.Item>
+                  <Menu.Item
+                    value="revisions"
+                    onClick={() => setRevisionsOpen(true)}
+                  >
+                    Revisions
+                  </Menu.Item>
                 </Menu.Content>
               </Menu.Positioner>
             </Portal>
@@ -239,6 +247,12 @@ export const RuntimeStrategyCard = ({
         viewModel={viewModel}
       />
 
+      <RuntimeStrategyRevisionsDrawer
+        open={revisionsOpen}
+        strategy={strategy}
+        onOpenChange={setRevisionsOpen}
+      />
+
       <RuntimeStrategyChart
         orderLog={strategy.orderLog}
         revisionChanges={strategy.revisionChanges}

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

@@ -109,14 +109,6 @@ export const RuntimeStrategyChart = ({
                     x={change.timestamp}
                     stroke={chart.color('orange.400')}
                     strokeDasharray="4 4"
-                    label={{
-                      value: `Revision ${change.strategyRevision
-                        .replace(/^sr1:/, '')
-                        .slice(0, 8)}`,
-                      offset: 8,
-                      fill: chart.color('orange.300'),
-                      position: 'insideTopRight',
-                    }}
                   />
                 ))}
                 <TimeSeriesXAxis

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

@@ -0,0 +1,154 @@
+'use client';
+
+import { useMemo } from 'react';
+import {
+  Badge,
+  Box,
+  Button,
+  CloseButton,
+  Drawer,
+  Flex,
+  Portal,
+  Text,
+} from '@chakra-ui/react';
+import type {
+  RuntimeStrategyRevisionChange,
+  RuntimeStrategyView,
+} from '@tradejs/types';
+import { formatDateTime } from '#components/Shared/OrdersDrawer';
+
+interface RuntimeStrategyRevisionItem {
+  strategyRevision: string;
+  changedAt: number | null;
+  current: boolean;
+}
+
+export const buildRuntimeStrategyRevisionItems = ({
+  strategyRevision,
+  revisionChanges,
+}: {
+  strategyRevision: string;
+  revisionChanges: RuntimeStrategyRevisionChange[];
+}): RuntimeStrategyRevisionItem[] => {
+  const changedAtByRevision = new Map<string, number>();
+
+  for (const change of revisionChanges) {
+    const previousTimestamp = changedAtByRevision.get(change.strategyRevision);
+    if (
+      Number.isFinite(change.timestamp) &&
+      (previousTimestamp == null || change.timestamp > previousTimestamp)
+    ) {
+      changedAtByRevision.set(change.strategyRevision, change.timestamp);
+    }
+  }
+
+  const revisions = new Set([strategyRevision, ...changedAtByRevision.keys()]);
+
+  return [...revisions]
+    .map((revision) => ({
+      strategyRevision: revision,
+      changedAt: changedAtByRevision.get(revision) ?? null,
+      current: revision === strategyRevision,
+    }))
+    .sort((left, right) => {
+      if (left.current !== right.current) return left.current ? -1 : 1;
+      return (right.changedAt ?? 0) - (left.changedAt ?? 0);
+    });
+};
+
+export const RuntimeStrategyRevisionsDrawer = ({
+  open,
+  strategy,
+  onOpenChange,
+}: {
+  open: boolean;
+  strategy: RuntimeStrategyView;
+  onOpenChange: (open: boolean) => void;
+}) => {
+  const revisions = useMemo(
+    () =>
+      buildRuntimeStrategyRevisionItems({
+        strategyRevision: strategy.strategyRevision,
+        revisionChanges: strategy.revisionChanges,
+      }),
+    [strategy.revisionChanges, strategy.strategyRevision],
+  );
+
+  return (
+    <Drawer.Root
+      size="md"
+      open={open}
+      onOpenChange={(event) => onOpenChange(event.open)}
+    >
+      <Portal>
+        <Drawer.Backdrop />
+        <Drawer.Positioner>
+          <Drawer.Content bg="gray.950">
+            <Drawer.Header>
+              <Drawer.Title>{strategy.strategyName} revisions</Drawer.Title>
+              <Drawer.CloseTrigger asChild>
+                <CloseButton size="sm" />
+              </Drawer.CloseTrigger>
+            </Drawer.Header>
+            <Drawer.Body
+              display="flex"
+              flexDirection="column"
+              gap={3}
+              overflowY="auto"
+            >
+              <Text color="gray.400">
+                Current revision and all revision changes recorded in the
+                selected runtime window.
+              </Text>
+
+              {revisions.map((revision) => (
+                <Box
+                  key={revision.strategyRevision}
+                  p={4}
+                  borderWidth="1px"
+                  borderColor={revision.current ? 'teal.800' : 'gray.800'}
+                  borderRadius="md"
+                  bg="gray.900"
+                >
+                  <Flex
+                    alignItems="center"
+                    justifyContent="space-between"
+                    gap={3}
+                  >
+                    <Text fontSize="xs" color="gray.500">
+                      Strategy revision
+                    </Text>
+                    {revision.current ? (
+                      <Badge colorPalette="teal" variant="subtle">
+                        Current
+                      </Badge>
+                    ) : null}
+                  </Flex>
+                  <Text
+                    mt={2}
+                    fontFamily="mono"
+                    fontSize="sm"
+                    color="gray.200"
+                    overflowWrap="anywhere"
+                  >
+                    {revision.strategyRevision}
+                  </Text>
+                  <Text mt={2} fontSize="xs" color="gray.500">
+                    {revision.changedAt == null
+                      ? 'No revision change recorded in this window'
+                      : `Changed at ${formatDateTime(revision.changedAt)}`}
+                  </Text>
+                </Box>
+              ))}
+            </Drawer.Body>
+            <Drawer.Footer>
+              <Button variant="outline" onClick={() => onOpenChange(false)}>
+                Close
+              </Button>
+            </Drawer.Footer>
+          </Drawer.Content>
+        </Drawer.Positioner>
+      </Portal>
+    </Drawer.Root>
+  );
+};