@tradejs/app 1.0.4 → 1.0.5

package/README.md

@@ -1,6 +1,6 @@
 # @tradejs/app
 
-Publishable Next.js UI package for viewing TradeJS backtests, charts, and signal flows.
+Publishable Next.js UI package for the TradeJS open-source framework, with backtests, charts, and signal flows.
 
 Typical external usage:
 

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@tradejs/app",
-  "version": "1.0.4",
+  "version": "1.0.5",
+  "description": "Installable Next.js UI for the TradeJS open-source framework: dashboards, backtests, charts, and runtime data.",
   "keywords": [
     "tradejs",
     "trading",
@@ -27,18 +28,26 @@
   "publishConfig": {
     "access": "public"
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tradejs-dev/tradejs.git",
+    "directory": "apps/app"
+  },
+  "bugs": {
+    "url": "https://github.com/tradejs-dev/tradejs/issues"
+  },
   "dependencies": {
     "@chakra-ui/charts": "^3.24.0",
     "@chakra-ui/react": "^3.24.2",
     "@emotion/react": "^11.14.0",
     "@langchain/core": "^0.3.68",
     "@langchain/openai": "^0.6.11",
-    "@tradejs/connectors": "^1.0.4",
-    "@tradejs/core": "^1.0.4",
-    "@tradejs/indicators": "^1.0.4",
-    "@tradejs/infra": "^1.0.4",
-    "@tradejs/node": "^1.0.4",
-    "@tradejs/types": "^1.0.4",
+    "@tradejs/connectors": "^1.0.5",
+    "@tradejs/core": "^1.0.5",
+    "@tradejs/indicators": "^1.0.5",
+    "@tradejs/infra": "^1.0.5",
+    "@tradejs/node": "^1.0.5",
+    "@tradejs/types": "^1.0.5",
     "bcryptjs": "^2.4.3",
     "date-fns": "^3.3.1",
     "idb-keyval": "^6.2.2",

package/src/app/api/files/screenshot/[name]/route.ts

@@ -3,12 +3,36 @@ import fs from 'fs/promises';
 import path from 'path';
 
 export const runtime = 'nodejs';
+export const dynamic = 'force-dynamic';
 
 const getProjectRoot = (): string => {
   const fromEnv = String(process.env.PROJECT_CWD || '').trim();
   return fromEnv ? path.resolve(fromEnv) : process.cwd();
 };
 
+const stripPngExtension = (value: string) => value.replace(/\.png$/i, '');
+
+const isSafeScreenshotName = (value: string) =>
+  /^[A-Za-z0-9_.-]+$/.test(value) && path.basename(value) === value;
+
+const getScreenshotCandidates = (name: string) => {
+  const projectRoot = getProjectRoot();
+  const normalizedName = stripPngExtension(name);
+
+  return [
+    path.join(projectRoot, 'data', 'screenshots', `${normalizedName}.png`),
+    path.join(projectRoot, 'public', 'screenshots', `${normalizedName}.png`),
+    path.join(
+      projectRoot,
+      'apps',
+      'app',
+      'public',
+      'screenshots',
+      `${normalizedName}.png`,
+    ),
+  ];
+};
+
 interface Params {
   name: string;
 }
@@ -17,26 +41,38 @@ export async function GET(
   _req: Request,
   { params }: { params: Promise<Params> },
 ) {
-  try {
-    const { name } = await params;
-    const filePath = path.join(
-      getProjectRoot(),
-      'data',
-      'screenshots',
-      `${name}.png`,
+  const { name } = await params;
+
+  if (!isSafeScreenshotName(name)) {
+    return NextResponse.json(
+      { error: 'Invalid screenshot name' },
+      { status: 400 },
     );
-    const file = await fs.readFile(filePath);
+  }
 
-    const body = new Uint8Array(file);
+  try {
+    for (const filePath of getScreenshotCandidates(name)) {
+      try {
+        const file = await fs.readFile(filePath);
+        const body = new Uint8Array(file);
+
+        return new NextResponse(body, {
+          headers: {
+            'Content-Type': 'image/png',
+            'Content-Length': String(file.byteLength),
+            'Cache-Control': 'public, max-age=60, immutable',
+          },
+        });
+      } catch {
+        continue;
+      }
+    }
 
-    return new NextResponse(body, {
-      headers: {
-        'Content-Type': 'image/png',
-        'Content-Length': String(file.byteLength),
-        'Cache-Control': 'public, max-age=60, immutable',
-      },
-    });
-  } catch {
     return NextResponse.json({ error: 'Not found' }, { status: 404 });
+  } catch {
+    return NextResponse.json(
+      { error: 'Failed to load screenshot' },
+      { status: 500 },
+    );
   }
 }

package/src/app/components/Dashboard/MainChart/index.tsx

@@ -8,11 +8,19 @@ import { KlineChart } from '../KlineChart';
 
 const DASHBOARD_REFRESH_DELAY = 10_000;
 
-export const MainChart = () => {
+interface MainChartProps {
+  screenshotMode?: boolean;
+}
+
+export const MainChart = ({ screenshotMode = false }: MainChartProps) => {
   const { filters, setFilters } = useFilters();
   const { indicatorsByKey, indicatorRenderers } = useIndicators();
 
   useEffect(() => {
+    if (screenshotMode) {
+      return;
+    }
+
     const intervalId = setInterval(() => {
       setFilters({
         end: getTimestamp(),
@@ -22,7 +30,7 @@ export const MainChart = () => {
     return () => {
       clearInterval(intervalId);
     };
-  }, [setFilters]);
+  }, [screenshotMode, setFilters]);
 
   return (
     <KlineChart

package/src/app/routes/dashboard/[provider]/[symbol]/[interval]/page.tsx

@@ -17,6 +17,7 @@ const Dashboard = () => {
   const hasBacktestStrategy = searchParams.has('backtestStrategy');
   const backtestId = searchParams.get('backtestId');
   const backtestStrategy = searchParams.get('backtestStrategy');
+  const isScreenshotMode = searchParams.get('screenshot') === '1';
 
   const parseDashboardPath = useCallback(() => {
     const parts = window.location.pathname.split('/').filter(Boolean);
@@ -89,32 +90,34 @@ const Dashboard = () => {
       <Box
         as="main"
         minH="100vh"
-        p={4}
+        p={isScreenshotMode ? 0 : 4}
         bg="gray.900"
         display="flex"
         flexDirection="column"
         justifyContent="space-between"
         alignItems="flex-start"
       >
-        <Filters.Root
-          filters={filters}
-          tickers={tickers}
-          backtestFiles={tests}
-          onChangeFilters={onChangeFilters}
-        >
-          <Flex mb={2} gap={4} alignItems="center" flexDirection="row">
-            <Filters.SelectProvider />
-            <Filters.SelectSymbol />
-            <Filters.FavoriteIndicator />
-            <Filters.SelectInterval />
-            <Filters.SelectIndicator />
-          </Flex>
-          <Flex mb={4} gap={4} flexDirection="row">
-            <Filters.SelectBacktest />
-          </Flex>
-        </Filters.Root>
+        {!isScreenshotMode && (
+          <Filters.Root
+            filters={filters}
+            tickers={tickers}
+            backtestFiles={tests}
+            onChangeFilters={onChangeFilters}
+          >
+            <Flex mb={2} gap={4} alignItems="center" flexDirection="row">
+              <Filters.SelectProvider />
+              <Filters.SelectSymbol />
+              <Filters.FavoriteIndicator />
+              <Filters.SelectInterval />
+              <Filters.SelectIndicator />
+            </Flex>
+            <Flex mb={4} gap={4} flexDirection="row">
+              <Filters.SelectBacktest />
+            </Flex>
+          </Filters.Root>
+        )}
         <Box position="relative" flex="1" w="full">
-          <MainChart />
+          <MainChart screenshotMode={isScreenshotMode} />
         </Box>
       </Box>
     </ClientOnly>