@tradejs/app 1.0.10 → 1.0.12

package/README.md

@@ -2,7 +2,15 @@
 
 Publishable Next.js UI package for the TradeJS open-source framework, with backtests, charts, and signal flows.
 
-Typical external usage:
+Recommended external usage:
+
+```bash
+npx create-tradejs
+```
+
+The generator starts local infrastructure and opens the install page. Choose
+the local `root` password there; TradeJS then opens the dashboard with a
+**Create backtest** action. For manual installation into an existing project:
 
 ```bash
 npm install @tradejs/app @tradejs/core @tradejs/node @tradejs/types @tradejs/base @tradejs/cli

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tradejs/app",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "description": "Installable Next.js UI for the TradeJS open-source framework: dashboards, backtests, charts, and runtime data.",
   "keywords": [
     "tradejs",
@@ -51,12 +51,12 @@
     "@emotion/react": "^11.14.0",
     "@langchain/core": "^1.1.42",
     "@langchain/openai": "^1.4.5",
-    "@tradejs/connectors": "^1.0.10",
-    "@tradejs/core": "^1.0.10",
-    "@tradejs/indicators": "^1.0.10",
-    "@tradejs/infra": "^1.0.10",
-    "@tradejs/node": "^1.0.10",
-    "@tradejs/types": "^1.0.10",
+    "@tradejs/connectors": "^1.0.12",
+    "@tradejs/core": "^1.0.12",
+    "@tradejs/indicators": "^1.0.12",
+    "@tradejs/infra": "^1.0.12",
+    "@tradejs/node": "^1.0.12",
+    "@tradejs/types": "^1.0.12",
     "@types/bcryptjs": "2.4.6",
     "@types/lodash": "4.14.202",
     "@types/node": "24.13.3",

package/src/app/api/install/route.ts

@@ -0,0 +1,51 @@
+import { NextResponse } from 'next/server';
+import {
+  initializeInstallation,
+  isInstallationRequired,
+} from '#app/lib/installation';
+
+export const dynamic = 'force-dynamic';
+
+export const GET = async () => {
+  const required = await isInstallationRequired();
+  return NextResponse.json({ required });
+};
+
+export const POST = async (request: Request) => {
+  const body = (await request.json().catch(() => null)) as {
+    password?: unknown;
+    confirmPassword?: unknown;
+  } | null;
+  const password = typeof body?.password === 'string' ? body.password : '';
+  const confirmPassword =
+    typeof body?.confirmPassword === 'string' ? body.confirmPassword : '';
+
+  if (password.length < 8) {
+    return NextResponse.json(
+      { error: 'Password must contain at least 8 characters' },
+      { status: 400 },
+    );
+  }
+  if (password.length > 256) {
+    return NextResponse.json(
+      { error: 'Password is too long' },
+      { status: 400 },
+    );
+  }
+  if (password !== confirmPassword) {
+    return NextResponse.json(
+      { error: 'Passwords do not match' },
+      { status: 400 },
+    );
+  }
+
+  const initialized = await initializeInstallation(password);
+  if (!initialized) {
+    return NextResponse.json(
+      { error: 'TradeJS is already installed' },
+      { status: 409 },
+    );
+  }
+
+  return NextResponse.json({ userName: 'root' }, { status: 201 });
+};

package/src/app/auth.ts

@@ -2,25 +2,7 @@ import NextAuth from 'next-auth';
 import Credentials from 'next-auth/providers/credentials';
 import bcrypt from 'bcryptjs';
 import { getData, redisKeys } from '@tradejs/infra/redis';
-
-const getPasswordHash = (user: unknown): string | null => {
-  if (!user) return null;
-  if (typeof user === 'string') return user;
-  if (typeof user !== 'object') return null;
-
-  const record = user as Record<string, unknown>;
-  const direct = record.passwordHash ?? record.password;
-  if (typeof direct === 'string') return direct;
-
-  const nested = record.password as Record<string, unknown> | undefined;
-  const nestedHash = nested?.hash;
-  if (typeof nestedHash === 'string') return nestedHash;
-
-  const alt = record.hash;
-  if (typeof alt === 'string') return alt;
-
-  return null;
-};
+import { getPasswordHash } from '#app/lib/installation';
 
 export const { handlers, auth, signIn, signOut } = NextAuth({
   trustHost: true,

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

@@ -1,8 +1,7 @@
 'use client';
 
 import { PropsWithChildren } from 'react';
-import _ from 'lodash';
-import { Box } from '@chakra-ui/react';
+import { Box, Text } from '@chakra-ui/react';
 import { TestResultContext } from '../context';
 import { TestCardSkeleton } from '../Skeleton';
 import { useTest, useFavoriteTests } from '#store';
@@ -20,7 +19,22 @@ export const TestCardRoot = ({
   const testResult = useTest(testName);
   const { checkIsFavorite } = useFavoriteTests();
 
-  if (_.isEmpty(testResult)) {
+  if (testResult === null) {
+    return (
+      <Box
+        p={4}
+        mb={4}
+        borderRadius="md"
+        borderWidth="1px"
+        borderColor="gray.700"
+        color="gray.400"
+      >
+        <Text>Backtest data is no longer available.</Text>
+      </Box>
+    );
+  }
+
+  if (!testResult) {
     return <TestCardSkeleton />;
   }
 

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

@@ -172,7 +172,11 @@ export const KlineChart = ({
 
   return (
     <>
-      <div id={id} />
+      <div
+        id={id}
+        data-testid="market-chart"
+        data-chart-ready={fulfilled && !_.isEmpty(data) ? 'true' : 'false'}
+      />
       {!fulfilled && <OverlaySpinner />}
     </>
   );

package/src/app/components/Shared/AppShell.tsx

@@ -4,7 +4,7 @@ import { Box } from '@chakra-ui/react';
 import { usePathname } from 'next/navigation';
 import { Sidebar } from '#shared/Sidebar';
 
-const AUTH_ROUTES = ['/routes/signin'];
+const AUTH_ROUTES = ['/routes/signin', '/routes/install'];
 
 const isAuthRoute = (pathname: string) =>
   AUTH_ROUTES.some((route) => pathname.startsWith(route));

package/src/app/components/Shared/Filters/Backtest/index.tsx

@@ -16,6 +16,9 @@ export const SelectBacktest = () => {
 
   const strategyItems = useMemo(() => {
     const names = new Set<string>();
+    if (filters.backtestStrategy) {
+      names.add(filters.backtestStrategy);
+    }
     for (const test of tests) {
       const strategyName = test.data?.strategyName;
       if (typeof strategyName === 'string' && strategyName) {
@@ -29,9 +32,11 @@ export const SelectBacktest = () => {
         label: strategyName,
         value: strategyName,
       }));
-  }, [tests]);
+  }, [filters.backtestStrategy, tests]);
 
-  const [selectedStrategy, setSelectedStrategy] = useState<string>('');
+  const [selectedStrategy, setSelectedStrategy] = useState<string>(
+    filters.backtestStrategy || '',
+  );
   const selectedTestStrategy = useMemo(() => {
     if (!filters.backtestId) return null;
 
@@ -45,7 +50,7 @@ export const SelectBacktest = () => {
 
   useEffect(() => {
     if (_.isEmpty(strategyItems)) {
-      setSelectedStrategy('');
+      setSelectedStrategy(filters.backtestStrategy || '');
       return;
     }
 
@@ -112,12 +117,23 @@ export const SelectBacktest = () => {
   const strategyTests = tests.filter(
     (test) => test.data?.strategyName === selectedStrategy,
   );
-  const hasStrategyItems = !_.isEmpty(strategyItems);
+  const backtestItems = [...strategyTests];
+  if (
+    filters.backtestId &&
+    selectedStrategy &&
+    !backtestItems.some((test) => test.value === filters.backtestId)
+  ) {
+    backtestItems.unshift({
+      label: filters.backtestId,
+      value: filters.backtestId,
+      data: { strategyName: selectedStrategy },
+    });
+  }
 
   return (
     <>
       <Select
-        placeholder={hasStrategyItems ? 'Strategy' : 'No strategies'}
+        placeholder="Strategy"
         emptyState="No strategies for this symbol"
         defaultValue={[selectedStrategy]}
         value={[selectedStrategy]}
@@ -128,7 +144,6 @@ export const SelectBacktest = () => {
           }
         }}
         items={strategyItems}
-        disabled={!hasStrategyItems}
         width="220px"
       />
       <Select
@@ -146,7 +161,7 @@ export const SelectBacktest = () => {
             label: 'Not selected',
             value: '',
           },
-          ...strategyTests,
+          ...backtestItems,
         ]}
         disabled={!selectedStrategy}
         width="240px"

package/src/app/lib/backtestJobs.ts

@@ -1,8 +1,15 @@
 import { spawn, type ChildProcess } from 'child_process';
 import { randomUUID } from 'crypto';
+import { existsSync } from 'fs';
 import path from 'path';
 import { TTL_1M } from '@tradejs/core/constants';
-import { delKey, getData, getKeys, setData } from '@tradejs/infra/redis';
+import {
+  delKey,
+  getData,
+  getKeys,
+  redisKeys,
+  setData,
+} from '@tradejs/infra/redis';
 import { logger } from '@tradejs/infra/logger';
 import type { StrategyConfigGrid } from '@tradejs/types';
 
@@ -10,7 +17,7 @@ const HEARTBEAT_TIMEOUT_MS = 20_000;
 const SWEEP_INTERVAL_MS = 5_000;
 const MAX_LOG_LINES = 220;
 const DEFAULT_INTERVAL = '15';
-const DEFAULT_CONNECTOR = 'bybit';
+const DEFAULT_CONNECTOR = 'binance';
 
 export type BacktestJobStatus =
   | 'running'
@@ -103,11 +110,6 @@ const getProcesses = () => {
 
 const processKey = (userName: string, jobId: string) => `${userName}:${jobId}`;
 
-const getJobsPrefix = (userName: string) => `users:${userName}:backtests:runs:`;
-
-const getJobKey = (userName: string, jobId: string) =>
-  `${getJobsPrefix(userName)}${jobId}`;
-
 const getBacktestConfigsPrefix = (userName: string) =>
   `users:${userName}:backtests:configs:`;
 
@@ -116,7 +118,13 @@ const nowIso = () => new Date().toISOString();
 const projectRoot =
   String(process.env.PROJECT_CWD || process.cwd()).trim() || process.cwd();
 
-const yarnCommand = process.platform === 'win32' ? 'yarn.cmd' : 'yarn';
+const localCliCommand = path.join(
+  projectRoot,
+  'node_modules',
+  '.bin',
+  process.platform === 'win32' ? 'tradejs.cmd' : 'tradejs',
+);
+const cliCommand = existsSync(localCliCommand) ? localCliCommand : 'tradejs';
 
 const emptyProgress = (): BacktestJobProgress => ({
   completed: 0,
@@ -155,6 +163,93 @@ const stripAnsi = (value: string) =>
 const isPlainObject = (value: unknown): value is Record<string, unknown> =>
   Boolean(value) && typeof value === 'object' && !Array.isArray(value);
 
+const BACKTEST_JOB_STATUSES = new Set<BacktestJobStatus>([
+  'running',
+  'pausing',
+  'paused',
+  'completed',
+  'failed',
+  'cancelled',
+]);
+
+const isFiniteNumber = (value: unknown): value is number =>
+  typeof value === 'number' && Number.isFinite(value);
+
+const isNullableFiniteNumber = (value: unknown) =>
+  value === null || isFiniteNumber(value);
+
+const isOptionalFiniteNumber = (value: unknown) =>
+  value === undefined || isFiniteNumber(value);
+
+const isOptionalString = (value: unknown) =>
+  value === undefined || typeof value === 'string';
+
+const isBacktestJobRequest = (value: unknown): value is BacktestJobRequest => {
+  if (!isPlainObject(value)) {
+    return false;
+  }
+
+  const periodIsValid =
+    value.periodMode === 'days'
+      ? isFiniteNumber(value.days)
+      : value.periodMode === 'range' &&
+        isFiniteNumber(value.startTime) &&
+        isFiniteNumber(value.endTime);
+
+  return (
+    normalizeText(value.strategyName).length > 0 &&
+    normalizeText(value.configId).length > 0 &&
+    periodIsValid &&
+    typeof value.ai === 'boolean' &&
+    typeof value.fast === 'boolean' &&
+    normalizeText(value.interval).length > 0 &&
+    normalizeText(value.connector).length > 0 &&
+    isOptionalString(value.tickers) &&
+    isOptionalFiniteNumber(value.tickersLimit) &&
+    isOptionalFiniteNumber(value.testsLimit) &&
+    isOptionalFiniteNumber(value.parallel)
+  );
+};
+
+const isBacktestJobProgress = (value: unknown): value is BacktestJobProgress =>
+  isPlainObject(value) &&
+  isFiniteNumber(value.completed) &&
+  isNullableFiniteNumber(value.total) &&
+  isFiniteNumber(value.percent) &&
+  isNullableFiniteNumber(value.averageProfit) &&
+  isNullableFiniteNumber(value.winRate) &&
+  isNullableFiniteNumber(value.successTests) &&
+  isNullableFiniteNumber(value.errorTests);
+
+export const isBacktestJobRecord = (
+  value: unknown,
+): value is BacktestJobRecord =>
+  isPlainObject(value) &&
+  normalizeText(value.id).length > 0 &&
+  normalizeText(value.userName).length > 0 &&
+  typeof value.status === 'string' &&
+  BACKTEST_JOB_STATUSES.has(value.status as BacktestJobStatus) &&
+  isBacktestJobRequest(value.request) &&
+  typeof value.command === 'string' &&
+  Array.isArray(value.args) &&
+  value.args.every((item) => typeof item === 'string') &&
+  normalizeText(value.createdAt).length > 0 &&
+  normalizeText(value.updatedAt).length > 0 &&
+  isOptionalString(value.startedAt) &&
+  isOptionalString(value.finishedAt) &&
+  isOptionalString(value.pausedAt) &&
+  isOptionalString(value.cancelledAt) &&
+  isOptionalString(value.lastHeartbeatAt) &&
+  isOptionalFiniteNumber(value.pid) &&
+  (value.exitCode === null || isOptionalFiniteNumber(value.exitCode)) &&
+  (value.signal === null || isOptionalString(value.signal)) &&
+  isFiniteNumber(value.runCount) &&
+  isBacktestJobProgress(value.progress) &&
+  Array.isArray(value.logs) &&
+  value.logs.every((item) => typeof item === 'string') &&
+  isOptionalString(value.error) &&
+  isOptionalString(value.pauseReason);
+
 const isStrategyConfigGrid = (value: unknown): value is StrategyConfigGrid =>
   isPlainObject(value) &&
   Object.values(value).every((item) => Array.isArray(item));
@@ -259,13 +354,28 @@ const applyOutputChunk = (
 
 const saveJob = async (record: BacktestJobRecord) => {
   record.updatedAt = nowIso();
-  await setData(getJobKey(record.userName, record.id), record, {
+  await setData(redisKeys.backtestJob(record.userName, record.id), record, {
     expire: TTL_1M,
   });
 };
 
-const loadJob = async (userName: string, jobId: string) =>
-  (await getData(getJobKey(userName, jobId), null)) as BacktestJobRecord | null;
+const loadJob = async (userName: string, jobId: string) => {
+  const stored = await getData(redisKeys.backtestJob(userName, jobId), null);
+  if (stored == null) {
+    return null;
+  }
+
+  if (
+    !isBacktestJobRecord(stored) ||
+    stored.userName !== userName ||
+    stored.id !== jobId
+  ) {
+    logger.warn('ignored invalid backtest job record: %s', jobId);
+    return null;
+  }
+
+  return stored;
+};
 
 const getLiveRecord = async (userName: string, jobId: string) => {
   const handle = getProcesses().get(processKey(userName, jobId));
@@ -439,7 +549,7 @@ const launchBacktestProcess = async (
     userName: record.userName,
     skip,
   });
-  const child = spawn(yarnCommand, args, {
+  const child = spawn(cliCommand, args, {
     cwd: projectRoot,
     env: {
       ...process.env,
@@ -452,7 +562,7 @@ const launchBacktestProcess = async (
   const startedAt = nowIso();
 
   record.status = 'running';
-  record.command = yarnCommand;
+  record.command = cliCommand;
   record.args = args;
   record.pid = child.pid;
   record.exitCode = undefined;
@@ -462,7 +572,7 @@ const launchBacktestProcess = async (
   record.startedAt ??= startedAt;
   record.lastHeartbeatAt = startedAt;
   record.runCount += 1;
-  appendLog(record, `$ ${yarnCommand} ${args.join(' ')}`);
+  appendLog(record, `$ ${cliCommand} ${args.join(' ')}`);
   await saveJob(record);
 
   const handle: BacktestProcessHandle = {
@@ -621,6 +731,28 @@ const reconcileDetachedRunningJob = async (record: BacktestJobRecord) => {
   return record;
 };
 
+const reconcileEmptyCompletedJob = async (record: BacktestJobRecord) => {
+  if (record.status !== 'completed') {
+    return record;
+  }
+
+  const noTestsMessage = record.logs.find((line) =>
+    /^(No tests selected|No backtest tests selected)\b/.test(line),
+  );
+  if (!noTestsMessage) {
+    return record;
+  }
+
+  record.status = 'failed';
+  record.error = noTestsMessage;
+  appendLog(record, 'Backtest failed because no tests were generated.');
+  await saveJob(record);
+  return record;
+};
+
+const reconcileStoredJob = async (record: BacktestJobRecord) =>
+  reconcileEmptyCompletedJob(await reconcileDetachedRunningJob(record));
+
 export const listBacktestConfigs = async (
   userName: string,
 ): Promise<BacktestConfigSummary[]> => {
@@ -658,19 +790,20 @@ export const listBacktestJobs = async (
   ensureSweepTimer();
   await sweepRunningHandles();
 
-  const keys = await getKeys(getJobsPrefix(userName));
+  const jobsPrefix = redisKeys.backtestJobs(userName);
+  const keys = await getKeys(jobsPrefix);
   const records = await Promise.all(
     keys.map(async (key) => {
-      const id = key.slice(getJobsPrefix(userName).length);
+      const id = key.slice(jobsPrefix.length);
       const live = getProcesses().get(processKey(userName, id));
-      return live?.record ?? ((await getData(key, null)) as BacktestJobRecord);
+      return live?.record ?? loadJob(userName, id);
     }),
   );
 
   const reconciled = await Promise.all(
     records
-      .filter(Boolean)
-      .map((record) => reconcileDetachedRunningJob(record)),
+      .filter((record): record is BacktestJobRecord => Boolean(record))
+      .map((record) => reconcileStoredJob(record)),
   );
 
   return reconciled.sort(
@@ -682,7 +815,7 @@ export const listBacktestJobs = async (
 export const getBacktestJob = async (userName: string, jobId: string) => {
   ensureSweepTimer();
   const record = await getLiveRecord(userName, jobId);
-  return record ? reconcileDetachedRunningJob(record) : null;
+  return record ? reconcileStoredJob(record) : null;
 };
 
 export const startBacktestJob = async (userName: string, payload: unknown) => {
@@ -693,7 +826,7 @@ export const startBacktestJob = async (userName: string, payload: unknown) => {
     userName,
     status: 'paused',
     request,
-    command: yarnCommand,
+    command: cliCommand,
     args: [],
     createdAt,
     updatedAt: createdAt,
@@ -788,5 +921,5 @@ export const cancelBacktestJob = async (userName: string, jobId: string) => {
 
 export const deleteBacktestJob = async (userName: string, jobId: string) => {
   await cancelBacktestJob(userName, jobId);
-  return delKey(getJobKey(userName, jobId));
+  return delKey(redisKeys.backtestJob(userName, jobId));
 };

package/src/app/lib/installation.ts

@@ -0,0 +1,83 @@
+import bcrypt from 'bcryptjs';
+import { getData, redisKeys, setData } from '@tradejs/infra/redis';
+import type { StrategyConfigGrid } from '@tradejs/types';
+
+export const INSTALL_USER_NAME = 'root';
+export const FIRST_BACKTEST_CONFIG_ID = 'MaStrategy:base';
+
+export const FIRST_BACKTEST_CONFIG: StrategyConfigGrid = {
+  INTERVAL: ['15'],
+  MAX_LOSS_VALUE: [10],
+  MA_FAST: [21],
+  MA_SLOW: [55],
+  LONG: [
+    {
+      enable: true,
+      direction: 'LONG',
+      TP: 2,
+      SL: 1,
+      minRiskRatio: 1.2,
+    },
+  ],
+  SHORT: [
+    {
+      enable: true,
+      direction: 'SHORT',
+      TP: 2,
+      SL: 1,
+      minRiskRatio: 1.2,
+    },
+  ],
+};
+
+export const getPasswordHash = (user: unknown): string | null => {
+  if (!user) return null;
+  if (typeof user === 'string') return user;
+  if (typeof user !== 'object') return null;
+
+  const record = user as Record<string, unknown>;
+  const direct = record.passwordHash ?? record.password;
+  if (typeof direct === 'string') return direct;
+
+  const nested = record.password as Record<string, unknown> | undefined;
+  const nestedHash = nested?.hash;
+  if (typeof nestedHash === 'string') return nestedHash;
+
+  const alt = record.hash;
+  return typeof alt === 'string' ? alt : null;
+};
+
+export const isInstallationRequired = async () => {
+  const user = await getData(redisKeys.user(INSTALL_USER_NAME), null);
+  return !getPasswordHash(user);
+};
+
+export const initializeInstallation = async (password: string) => {
+  const existing = (await getData(
+    redisKeys.user(INSTALL_USER_NAME),
+    null,
+  )) as Record<string, unknown> | null;
+
+  if (getPasswordHash(existing)) {
+    return false;
+  }
+
+  const passwordHash = await bcrypt.hash(password, 10);
+  await setData(
+    redisKeys.user(INSTALL_USER_NAME),
+    {
+      ...(existing ?? {}),
+      passwordHash,
+      userName: INSTALL_USER_NAME,
+      updatedAt: new Date().toISOString(),
+    },
+    { expire: 0 },
+  );
+  await setData(
+    redisKeys.backtestConfig(INSTALL_USER_NAME, FIRST_BACKTEST_CONFIG_ID),
+    FIRST_BACKTEST_CONFIG,
+    { expire: 0 },
+  );
+
+  return true;
+};

package/src/app/lib/marketDefaults.ts

@@ -8,5 +8,5 @@ export const getDefaultMarketSymbol = (
     return 'AAPLUSDT';
   }
 
-  return provider === 'coinbase' ? 'BTC-USD' : 'BTCUSDT';
+  return 'BTCUSDT';
 };

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

@@ -1,6 +1,12 @@
 'use client';
 
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import {
   Badge,
   Box,
@@ -247,6 +253,7 @@ const BacktestRunPage = () => {
   const [loadingJobs, setLoadingJobs] = useState(false);
   const [starting, setStarting] = useState(false);
   const [busyAction, setBusyAction] = useState('');
+  const [onboardingMode, setOnboardingMode] = useState(false);
   const [selectedStrategy, setSelectedStrategy] = useState('');
   const [selectedConfigId, setSelectedConfigId] = useState('');
   const [periodMode, setPeriodMode] = useState<PeriodMode>('days');
@@ -258,11 +265,14 @@ const BacktestRunPage = () => {
   const [ai, setAi] = useState(false);
   const [fast, setFast] = useState(false);
   const [interval, setIntervalValue] = useState('15');
-  const [connector, setConnector] = useState('bybit');
+  const [connector, setConnector] = useState('binance');
   const [selectedTickers, setSelectedTickers] = useState<string[]>([]);
   const [tickersLimit, setTickersLimit] = useState('');
   const [testsLimit, setTestsLimit] = useState('');
   const [parallel, setParallel] = useState('');
+  const jobsRequestRef = useRef<Promise<void> | null>(null);
+  const jobsErrorNotifiedRef = useRef(false);
+  const jobsRef = useRef<BacktestJobRecord[]>([]);
   const { tickers: tickerItems, ensureLoaded: ensureTickersLoaded } =
     useTickers(connector, {
       enabled: false,
@@ -289,19 +299,37 @@ const BacktestRunPage = () => {
     }
   }, []);
 
-  const loadJobs = useCallback(async () => {
-    setLoadingJobs(true);
-    try {
-      const nextJobs = await getBacktestRuns();
-      setJobs(nextJobs);
-    } catch (error) {
-      toaster.error({
-        title: 'Failed to load backtest jobs',
-        description: (error as Error)?.message || 'Request failed.',
-      });
-    } finally {
-      setLoadingJobs(false);
+  const loadJobs = useCallback((background = false) => {
+    if (jobsRequestRef.current) {
+      return jobsRequestRef.current;
     }
+
+    const request = (async () => {
+      if (!background) {
+        setLoadingJobs(true);
+      }
+      try {
+        const nextJobs = await getBacktestRuns();
+        setJobs(nextJobs);
+        jobsErrorNotifiedRef.current = false;
+      } catch (error) {
+        if (!background && !jobsErrorNotifiedRef.current) {
+          jobsErrorNotifiedRef.current = true;
+          toaster.error({
+            title: 'Failed to load backtest jobs',
+            description: (error as Error)?.message || 'Request failed.',
+          });
+        }
+      } finally {
+        if (!background) {
+          setLoadingJobs(false);
+        }
+        jobsRequestRef.current = null;
+      }
+    })();
+
+    jobsRequestRef.current = request;
+    return request;
   }, []);
 
   useEffect(() => {
@@ -309,6 +337,21 @@ const BacktestRunPage = () => {
     void loadJobs();
   }, [loadConfigs, loadJobs]);
 
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    if (params.get('onboarding') !== '1') {
+      return;
+    }
+
+    setOnboardingMode(true);
+    setDays('45');
+    setIntervalValue('15');
+    setConnector('binance');
+    setSelectedTickers(['BTCUSDT']);
+    setTestsLimit('1');
+    setParallel('1');
+  }, []);
+
   useEffect(() => {
     if (!strategyItems.length) {
       setSelectedStrategy('');
@@ -333,15 +376,21 @@ const BacktestRunPage = () => {
 
   useEffect(() => {
     const timer = window.setInterval(() => {
-      void loadJobs();
+      void loadJobs(true);
     }, 3_000);
 
     return () => window.clearInterval(timer);
   }, [loadJobs]);
 
+  useEffect(() => {
+    jobsRef.current = jobs;
+  }, [jobs]);
+
   useEffect(() => {
     const timer = window.setInterval(() => {
-      const runningJobs = jobs.filter((job) => job.status === 'running');
+      const runningJobs = jobsRef.current.filter(
+        (job) => job.status === 'running',
+      );
       if (!runningJobs.length) {
         return;
       }
@@ -358,7 +407,7 @@ const BacktestRunPage = () => {
     }, 5_000);
 
     return () => window.clearInterval(timer);
-  }, [jobs]);
+  }, []);
 
   const selectedConfig = useMemo(
     () => configs.find((config) => config.id === selectedConfigId),
@@ -542,6 +591,9 @@ const BacktestRunPage = () => {
                       <Text fontWeight="700" flexShrink={0}>
                         New run
                       </Text>
+                      {onboardingMode ? (
+                        <Badge colorPalette="teal">First backtest preset</Badge>
+                      ) : null}
                       {selectedConfig ? (
                         <Flex gap={2} wrap="wrap">
                           <Badge colorPalette="teal">
@@ -727,7 +779,7 @@ const BacktestRunPage = () => {
                           value={[connector]}
                           defaultValue={[connector]}
                           onChange={(value) => {
-                            setConnector(value[0] || 'bybit');
+                            setConnector(value[0] || 'binance');
                             setSelectedTickers([]);
                           }}
                           items={CONNECTOR_ITEMS}
@@ -1020,7 +1072,7 @@ const BacktestJobItem = ({
             <Button
               type="button"
               size="xs"
-              variant="outline"
+              variant="ghost"
               colorPalette="red"
               loading={busyAction === `${job.id}:cancel`}
               onClick={() => onAction(job.id, 'cancel')}
@@ -1030,18 +1082,17 @@ const BacktestJobItem = ({
             </Button>
           ) : null}
 
-          {canDelete ? (
-            <Button
-              type="button"
-              size="xs"
-              variant="ghost"
-              colorPalette="red"
-              loading={busyAction === `${job.id}:delete`}
-              onClick={() => onDelete(job.id)}
-            >
-              <FiTrash2 />
-            </Button>
-          ) : null}
+          <Button
+            type="button"
+            size="xs"
+            variant="ghost"
+            colorPalette="red"
+            disabled={!canDelete}
+            loading={busyAction === `${job.id}:delete`}
+            onClick={() => onDelete(job.id)}
+          >
+            <FiTrash2 />
+          </Button>
         </Flex>
       </Flex>
 

package/src/app/routes/dashboard/Dashboard.tsx

@@ -2,7 +2,8 @@
 
 import { useCallback, useEffect } from 'react';
 import { useSearchParams } from 'next/navigation';
-import { Box, Flex, ClientOnly } from '@chakra-ui/react';
+import Link from 'next/link';
+import { Box, Button, Flex, ClientOnly } from '@chakra-ui/react';
 import { useFilters, useTickers, useTestList } from '#store';
 import { Filters } from '#shared/Filters';
 import { MainChart } from '#app/components/Dashboard/MainChart';
@@ -27,7 +28,7 @@ const DashboardRoute = () => {
   );
   const { tests, ensureLoaded: ensureBacktestsLoaded } = useTestList({
     symbol: filters.symbol,
-    enabled: false,
+    enabled: Boolean(filters.backtestId || filters.backtestStrategy),
   });
   const hasBacktestId = searchParams.has('backtestId');
   const hasBacktestStrategy = searchParams.has('backtestStrategy');
@@ -123,26 +124,46 @@ const DashboardRoute = () => {
         alignItems="flex-start"
       >
         {!isScreenshotMode && (
-          <Filters.Root
-            filters={filters}
-            tickers={tickers}
-            backtestFiles={tests}
-            onChangeFilters={onChangeFilters}
-            ensureTickersLoaded={ensureTickersLoaded}
-            ensureBacktestsLoaded={ensureBacktestsLoaded}
+          <Box
+            w="full"
+            display="grid"
+            gridTemplateColumns={{ base: '1fr', lg: 'minmax(0, 1fr) auto' }}
+            columnGap={4}
+            alignItems="start"
           >
-            <Flex mb={2} gap={4} alignItems="center" flexDirection="row">
-              <Filters.SelectProvider />
-              {Filters.SelectUniverse ? <Filters.SelectUniverse /> : null}
-              <Filters.SelectSymbol />
-              <Filters.FavoriteIndicator />
-              <Filters.SelectInterval />
-              <Filters.SelectIndicator />
-            </Flex>
-            <Flex mb={4} gap={4} flexDirection="row">
-              <Filters.SelectBacktest />
-            </Flex>
-          </Filters.Root>
+            <Box minW={0}>
+              <Filters.Root
+                filters={filters}
+                tickers={tickers}
+                backtestFiles={tests}
+                onChangeFilters={onChangeFilters}
+                ensureTickersLoaded={ensureTickersLoaded}
+                ensureBacktestsLoaded={ensureBacktestsLoaded}
+              >
+                <Flex mb={2} gap={4} alignItems="center" flexDirection="row">
+                  <Filters.SelectProvider />
+                  {Filters.SelectUniverse ? <Filters.SelectUniverse /> : null}
+                  <Filters.SelectSymbol />
+                  <Filters.FavoriteIndicator />
+                  <Filters.SelectInterval />
+                  <Filters.SelectIndicator />
+                </Flex>
+                <Flex mb={4} gap={4} flexDirection="row">
+                  <Filters.SelectBacktest />
+                </Flex>
+              </Filters.Root>
+            </Box>
+            <Button
+              asChild
+              bg="#20c5bd"
+              color="gray.950"
+              _hover={{ bg: '#42d8d0' }}
+              justifySelf={{ base: 'start', lg: 'end' }}
+              mb={4}
+            >
+              <Link href="/routes/backtest">Create backtest</Link>
+            </Button>
+          </Box>
         )}
         <Box position="relative" flex="1" w="full">
           <MainChart screenshotMode={isScreenshotMode} />

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

@@ -0,0 +1,175 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import Image from 'next/image';
+import { signIn } from 'next-auth/react';
+import { Box, Button, Field, Flex, Input, Stack, Text } from '@chakra-ui/react';
+
+const FIRST_DASHBOARD_PATH = '/routes/dashboard/coinbase/crypto/BTCUSDT/15';
+
+const Install = () => {
+  const router = useRouter();
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  useEffect(() => {
+    void fetch('/api/install')
+      .then(async (response) => {
+        if (!response.ok) throw new Error('Unable to check installation');
+        return (await response.json()) as { required?: boolean };
+      })
+      .then(({ required }) => {
+        if (!required) {
+          router.replace('/routes/signin');
+          return;
+        }
+        setIsLoading(false);
+      })
+      .catch(() => {
+        setError('Unable to connect to the local TradeJS infrastructure');
+        setIsLoading(false);
+      });
+  }, [router]);
+
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setError('');
+
+    if (password.length < 8) {
+      setError('Password must contain at least 8 characters');
+      return;
+    }
+    if (password !== confirmPassword) {
+      setError('Passwords do not match');
+      return;
+    }
+
+    setIsSubmitting(true);
+    const response = await fetch('/api/install', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ password, confirmPassword }),
+    });
+    const payload = (await response.json().catch(() => null)) as {
+      error?: string;
+    } | null;
+
+    if (!response.ok) {
+      setError(payload?.error || 'Unable to install TradeJS');
+      setIsSubmitting(false);
+      return;
+    }
+
+    const result = await signIn('credentials', {
+      redirect: false,
+      username: 'root',
+      password,
+      callbackUrl: FIRST_DASHBOARD_PATH,
+    });
+
+    if (!result || result.error) {
+      router.replace('/routes/signin');
+      return;
+    }
+
+    router.replace(FIRST_DASHBOARD_PATH);
+  };
+
+  return (
+    <Flex minH="100vh" direction={{ base: 'column', lg: 'row' }} bg="gray.950">
+      <Flex
+        w={{ base: 'full', lg: '40%' }}
+        px={{ base: 6, md: 10, lg: 12 }}
+        py={{ base: 10, lg: 12 }}
+        align="center"
+        justify="center"
+        minH={{ base: '100vh', lg: 'auto' }}
+      >
+        <form onSubmit={handleSubmit} style={{ width: '100%' }}>
+          <Box w="full" maxW="420px" mx="auto">
+            <Stack gap="6">
+              <Stack gap="3">
+                <Text fontSize="sm" opacity={0.7} letterSpacing="0.2em">
+                  INSTALL TRADEJS
+                </Text>
+                <Text as="h1" fontSize="3xl" fontWeight="700" color="white">
+                  Create your local password
+                </Text>
+                <Text color="gray.400">
+                  This password protects the local root account. It is stored
+                  only in your TradeJS infrastructure.
+                </Text>
+              </Stack>
+
+              <Stack gap="4">
+                <Field.Root>
+                  <Field.Label>Password</Field.Label>
+                  <Input
+                    aria-label="Password"
+                    value={password}
+                    onChange={(event) => setPassword(event.target.value)}
+                    type="password"
+                    autoComplete="new-password"
+                    disabled={isLoading}
+                  />
+                </Field.Root>
+                <Field.Root>
+                  <Field.Label>Confirm password</Field.Label>
+                  <Input
+                    aria-label="Confirm password"
+                    value={confirmPassword}
+                    onChange={(event) => setConfirmPassword(event.target.value)}
+                    type="password"
+                    autoComplete="new-password"
+                    disabled={isLoading}
+                  />
+                </Field.Root>
+              </Stack>
+
+              {error ? (
+                <Text role="alert" fontSize="sm" color="red.300">
+                  {error}
+                </Text>
+              ) : null}
+
+              <Button
+                type="submit"
+                loading={isSubmitting || isLoading}
+                disabled={isLoading || !password || !confirmPassword}
+                bg="#20c5bd"
+                color="gray.950"
+                _hover={{ bg: '#42d8d0' }}
+              >
+                Install and open dashboard
+              </Button>
+            </Stack>
+          </Box>
+        </form>
+      </Flex>
+
+      <Box
+        display={{ base: 'none', lg: 'block' }}
+        w={{ lg: '60%' }}
+        minH="100vh"
+        bg="gray.900"
+        position="relative"
+        overflow="hidden"
+      >
+        <Image
+          src="/auth-bg.jpg"
+          alt="Market chart background"
+          fill
+          priority
+          sizes="(min-width: 1024px) 60vw, 0vw"
+          style={{ objectFit: 'cover', objectPosition: 'center' }}
+        />
+      </Box>
+    </Flex>
+  );
+};
+
+export default Install;

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

@@ -26,6 +26,13 @@ const SigninContent = () => {
     }
   }, [status, router, callbackUrl]);
 
+  useEffect(() => {
+    const suggestedUsername = searchParams.get('username')?.trim();
+    if (suggestedUsername) {
+      setUsername((current) => current || suggestedUsername);
+    }
+  }, [searchParams]);
+
   const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     setError('');

package/src/app/store/tests.ts

@@ -18,6 +18,7 @@ const COMPARE_LOCAL_STORAGE_KEY = 'compare';
 const FAVORITE_LOCAL_STORAGE_KEY = 'favorite';
 const BACKTEST_FILES_CACHE_KEY = 'backtest-files';
 const BACKTEST_FILES_CACHE_TTL_MS = 5 * 60 * 1000;
+const testLoadRequests = new Map<string, Promise<void>>();
 
 const COLORS = [
   'purple',
@@ -180,6 +181,7 @@ const useTestsCompareStore = create<TestsCompareState>()(
 interface TestsState {
   tests: Map<string, TestResult | null>;
   setTest: (test: TestResult) => void;
+  setTestUnavailable: (testName: string) => void;
   removeTest: (testName: string) => void;
 }
 
@@ -190,6 +192,15 @@ const useTestsStore = create<TestsState>((set) => ({
       const next = new Map(tests);
       next.set(testResult.test.name, testResult);
 
+      return {
+        tests: next,
+      };
+    }),
+  setTestUnavailable: (testName) =>
+    set(({ tests }) => {
+      const next = new Map(tests);
+      next.set(testName, null);
+
       return {
         tests: next,
       };
@@ -357,49 +368,73 @@ export const useTestList = (filters: TestListProps = {}) => {
 
 export const useTest = (testName: string) => {
   const testResult = useTestsStore((s) => s.tests.get(testName));
+  const hasTestResult = useTestsStore((s) => s.tests.has(testName));
   const setTest = useTestsStore((s) => s.setTest);
+  const setTestUnavailable = useTestsStore((s) => s.setTestUnavailable);
   const tests = useTestListStore((s) => s.tests);
   const setTestList = useTestListStore((s) => s.setTest);
   const testItem = tests.find((item) => item.value === testName);
   const strategyName = testItem?.data?.strategyName as string | undefined;
 
   useEffect(() => {
-    const loadData = async () => {
-      if (!_.isEmpty(testResult)) {
-        return;
-      }
+    if (hasTestResult) {
+      return;
+    }
 
+    const loadData = async () => {
       const key = `test-${testName}`;
 
-      const cachedResult = (await get(key)) as TestResult | null;
+      try {
+        const cachedResult = (await get(key)) as TestResult | null;
 
-      if (!_.isEmpty(cachedResult)) {
-        setTest(cachedResult);
+        if (!_.isEmpty(cachedResult)) {
+          setTest(cachedResult);
 
-        return;
-      }
+          return;
+        }
 
-      let resolvedStrategy = strategyName;
-      if (!resolvedStrategy) {
-        const newTests = await loadBacktestFilesList();
-        setTestList(newTests);
-        resolvedStrategy = newTests.find((item) => item.value === testName)
-          ?.data?.strategyName as string | undefined;
-      }
+        let resolvedStrategy = strategyName;
+        if (!resolvedStrategy) {
+          const newTests = await loadBacktestFilesList();
+          setTestList(newTests);
+          resolvedStrategy = newTests.find((item) => item.value === testName)
+            ?.data?.strategyName as string | undefined;
+        }
 
-      const test = await getBacktest(testName, resolvedStrategy);
+        const test = await getBacktest(testName, resolvedStrategy);
 
-      if (!test) {
-        return;
-      }
+        if (!test) {
+          setTestUnavailable(testName);
+          return;
+        }
 
-      setTest(test);
+        setTest(test);
 
-      await set(key, test);
+        await set(key, test);
+      } catch {
+        setTestUnavailable(testName);
+      }
     };
 
-    void loadData();
-  }, [setTest, setTestList, strategyName, testName, testResult]);
+    let request = testLoadRequests.get(testName);
+
+    if (!request) {
+      request = loadData();
+      testLoadRequests.set(testName, request);
+      void request.finally(() => {
+        if (testLoadRequests.get(testName) === request) {
+          testLoadRequests.delete(testName);
+        }
+      });
+    }
+  }, [
+    hasTestResult,
+    setTest,
+    setTestList,
+    setTestUnavailable,
+    strategyName,
+    testName,
+  ]);
 
   return testResult;
 };
@@ -500,31 +535,33 @@ export const useBacktest = (id: string | undefined) => {
 
       setLoading(true);
 
-      const cachedResult = (await get(key)) as OrderLogData | null;
-
-      if (cachedResult && !_.isEmpty(cachedResult)) {
-        setBacktest(id, cachedResult);
-        setLoading(false);
+      try {
+        const cachedResult = (await get(key)) as OrderLogData | null;
 
-        return;
-      }
+        if (cachedResult && !_.isEmpty(cachedResult)) {
+          setBacktest(id, cachedResult);
+          return;
+        }
 
-      let resolvedStrategy = strategyName;
-      if (!resolvedStrategy) {
-        const newTests = await loadBacktestFilesList();
-        setTestList(newTests);
-        resolvedStrategy = newTests.find((item) => item.value === id)?.data
-          ?.strategyName as string | undefined;
-      }
+        let resolvedStrategy = strategyName;
+        if (!resolvedStrategy) {
+          const newTests = await loadBacktestFilesList();
+          setTestList(newTests);
+          resolvedStrategy = newTests.find((item) => item.value === id)?.data
+            ?.strategyName as string | undefined;
+        }
 
-      const backtestData = await getOrderLog(id, resolvedStrategy);
+        const backtestData = await getOrderLog(id, resolvedStrategy);
 
-      if (backtestData && !_.isEmpty(backtestData)) {
-        setBacktest(id, backtestData);
-        await set(key, backtestData);
+        if (backtestData && !_.isEmpty(backtestData)) {
+          setBacktest(id, backtestData);
+          await set(key, backtestData);
+        }
+      } catch {
+        // A missing or expired order-log artifact must not crash the dashboard.
+      } finally {
+        setLoading(false);
       }
-
-      setLoading(false);
     };
 
     void updateBacktest();
@@ -537,6 +574,7 @@ export const useBacktest = (id: string | undefined) => {
 };
 
 export const resetTestsStoreForTests = () => {
+  testLoadRequests.clear();
   useDataStore.setState({
     backtests: new Map<string, OrderLogData | null>(),
   });

package/src/proxy.ts

@@ -3,6 +3,8 @@ import { encode, getToken } from 'next-auth/jwt';
 import { consumeScreenshotSessionToken } from '@tradejs/infra/redis';
 
 const SIGNIN_PATH = '/routes/signin';
+const INSTALL_PATH = '/routes/install';
+const INSTALL_API_PATH = '/api/install';
 const SCREENSHOT_API_PREFIX = '/api/files/screenshot';
 const SCREENSHOT_SESSION_QUERY_PARAM = 'screenshotToken';
 const SESSION_COOKIE_NAME = 'authjs.session-token';
@@ -54,6 +56,8 @@ export const proxy = async (req: NextRequest) => {
     pathname.startsWith('/_next') ||
     pathname === '/favicon.ico' ||
     pathname.startsWith(SIGNIN_PATH) ||
+    pathname.startsWith(INSTALL_PATH) ||
+    pathname === INSTALL_API_PATH ||
     pathname.startsWith('/api/auth') ||
     pathname.startsWith(SCREENSHOT_API_PREFIX) ||
     (!pathname.startsWith('/api') && PUBLIC_FILE_RE.test(pathname))