@tradejs/app 1.0.9 → 1.0.11

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

@@ -1,369 +1,953 @@
 'use client';
 
-import React, { useEffect, useMemo, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import {
+  Badge,
   Box,
   Button,
   Checkbox,
   ClientOnly,
-  CloseButton,
-  Dialog,
+  Field,
   Flex,
-  Portal,
+  Grid,
+  Input,
+  Stack,
   Text,
 } from '@chakra-ui/react';
-import { deleteBacktest } from '@actions/backtest';
-import { useBacktestMutations, useTestList } from '@store';
-import { Select, toaster } from '@UI';
-import { CompareList } from '@components/Backtest/CompareList';
-import { TestList } from '@components/Backtest/TestList';
-import { parseTestName } from '@tradejs/core/backtest';
-
-const ALL_STRATEGIES = '__all__';
-const ALL_SUITES = '__all__';
-
-const Backtest = () => {
-  const { tests, loadding, fulFilled } = useTestList();
-  const { removeBacktestTest } = useBacktestMutations();
-  const [selectedTestNames, setSelectedTestNames] = useState<string[]>([]);
-  const [isDeleteSelectedOpen, setIsDeleteSelectedOpen] = useState(false);
-  const [isDeletingSelected, setIsDeletingSelected] = useState(false);
-  const strategyItems = useMemo(() => {
-    const names = new Set<string>();
-    for (const test of tests) {
-      const strategyName = test.data?.strategyName;
-      if (typeof strategyName === 'string' && strategyName) {
-        names.add(strategyName);
-      }
+import {
+  FiFolder,
+  FiPause,
+  FiPlay,
+  FiRefreshCw,
+  FiSquare,
+  FiTrash2,
+  FiX,
+} from 'react-icons/fi';
+import { useRouter } from 'next/navigation';
+import {
+  controlBacktestRun,
+  deleteBacktestRun,
+  getBacktestRunConfigs,
+  getBacktestRuns,
+  startBacktestRun,
+} from '#actions/backtest';
+import { useTickers } from '#store';
+import { EmptyState, Segment, Select, SelectWithSearch, toaster } from '#ui';
+import type {
+  BacktestConfigSummary,
+  BacktestJobRecord,
+  BacktestJobStatus,
+} from '#app/lib/backtestJobs';
+
+const PERIOD_ITEMS = [
+  { label: 'Days', value: 'days' },
+  { label: 'Date range', value: 'range' },
+];
+const INTERVAL_ITEMS = [
+  { label: '5m', value: '5' },
+  { label: '15m', value: '15' },
+  { label: '30m', value: '30' },
+  { label: '1h', value: '60' },
+  { label: '4h', value: '240' },
+];
+const CONNECTOR_ITEMS = [
+  { label: 'Bybit', value: 'bybit' },
+  { label: 'Binance', value: 'binance' },
+  { label: 'Coinbase', value: 'coinbase' },
+];
+
+const controlSurface = 'rgba(255, 255, 255, 0.035)';
+const controlSurfaceHover = 'rgba(255, 255, 255, 0.05)';
+
+const inputControlProps = {
+  bg: controlSurface,
+  borderColor: 'gray.700',
+  color: 'gray.100',
+  _placeholder: { color: 'gray.500' },
+  _hover: {
+    bg: controlSurfaceHover,
+    borderColor: 'gray.600',
+  },
+  _focusVisible: {
+    borderColor: 'gray.500',
+    boxShadow: '0 0 0 1px var(--chakra-colors-gray-500)',
+  },
+};
+
+type PeriodMode = 'days' | 'range';
+type JobAction = 'pause' | 'stop' | 'resume' | 'cancel' | 'heartbeat';
+
+const DAY_MS = 24 * 60 * 60 * 1000;
+
+const toInputDate = (date: Date) => date.toISOString().slice(0, 10);
+
+const dateToStartMs = (value: string) =>
+  Number.isFinite(Date.parse(`${value}T00:00:00.000Z`))
+    ? Date.parse(`${value}T00:00:00.000Z`)
+    : null;
+
+const dateToEndMs = (value: string) =>
+  Number.isFinite(Date.parse(`${value}T23:59:59.999Z`))
+    ? Date.parse(`${value}T23:59:59.999Z`)
+    : null;
+
+const formatNumber = (value: number | null | undefined, fractionDigits = 1) =>
+  typeof value === 'number' && Number.isFinite(value)
+    ? value.toFixed(fractionDigits)
+    : '-';
+
+const formatDateTime = (value: string | undefined) => {
+  if (!value) {
+    return '-';
+  }
+
+  const timestamp = Date.parse(value);
+  if (!Number.isFinite(timestamp)) {
+    return '-';
+  }
+
+  return new Intl.DateTimeFormat('en', {
+    month: 'short',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  }).format(timestamp);
+};
+
+const statusTone = (status: BacktestJobStatus) => {
+  if (status === 'running') {
+    return 'teal';
+  }
+  if (status === 'pausing' || status === 'paused') {
+    return 'yellow';
+  }
+  if (status === 'completed') {
+    return 'green';
+  }
+  if (status === 'cancelled') {
+    return 'gray';
+  }
+  return 'red';
+};
+
+const statusLabel = (status: BacktestJobStatus) =>
+  status.charAt(0).toUpperCase() + status.slice(1);
+
+const getJobTitle = (job: BacktestJobRecord) =>
+  `${job.request.strategyName} / ${job.request.configId}`;
+
+const mergeJob = (
+  jobs: BacktestJobRecord[],
+  updated: BacktestJobRecord,
+): BacktestJobRecord[] => {
+  const existingIndex = jobs.findIndex((job) => job.id === updated.id);
+  if (existingIndex === -1) {
+    return [updated, ...jobs];
+  }
+
+  const nextJobs = [...jobs];
+  nextJobs[existingIndex] = updated;
+  return nextJobs;
+};
+
+const buildStrategyItems = (configs: BacktestConfigSummary[]) =>
+  [...new Set(configs.map((config) => config.strategyName))]
+    .sort((left, right) => left.localeCompare(right))
+    .map((strategyName) => ({
+      label: strategyName,
+      value: strategyName,
+    }));
+
+const buildConfigItems = (
+  configs: BacktestConfigSummary[],
+  selectedStrategy: string,
+) =>
+  configs
+    .filter((config) => config.strategyName === selectedStrategy)
+    .map((config) => ({
+      label: config.id,
+      value: config.id,
+      description: `${config.combinationCount} combos / ${config.paramCount} params`,
+    }));
+
+const SelectControl = ({ children }: { children: React.ReactNode }) => (
+  <Box
+    w="full"
+    minW={0}
+    css={{
+      '& [data-part="control"]': {
+        width: '100%',
+      },
+      '& [data-part="trigger"], & [data-part="input"]': {
+        background: controlSurface,
+        borderColor: 'var(--chakra-colors-gray-700)',
+        color: 'var(--chakra-colors-gray-100)',
+        minWidth: '0',
+        width: '100%',
+      },
+      '& [data-part="trigger"]': {
+        flex: '1',
+        minHeight: '40px',
+      },
+      '& [data-part="input"]': {
+        flex: '1',
+        minHeight: '40px',
+      },
+      '& [data-part="indicator-group"]': {
+        flexShrink: '0',
+      },
+      '& [data-part="trigger"]:is(:hover, [data-hover]), & [data-part="input"]:is(:hover, [data-hover])':
+        {
+          background: controlSurfaceHover,
+          borderColor: 'var(--chakra-colors-gray-600)',
+        },
+      '& [data-part="trigger"]:is(:focus-visible, [data-focus-visible]), & [data-part="input"]:is(:focus-visible, [data-focus-visible])':
+        {
+          borderColor: 'var(--chakra-colors-gray-500)',
+          boxShadow: '0 0 0 1px var(--chakra-colors-gray-500)',
+        },
+      '& [data-part="control"]:is(:hover, [data-hover]) [data-part="input"]': {
+        background: controlSurfaceHover,
+        borderColor: 'var(--chakra-colors-gray-600)',
+      },
+    }}
+  >
+    {children}
+  </Box>
+);
+
+interface FormSectionProps {
+  title: string;
+  columns: string;
+  children: React.ReactNode;
+}
+
+const FormSection = ({ title, columns, children }: FormSectionProps) => (
+  <Stack gap={3} minW={0}>
+    <Text
+      color="gray.400"
+      fontSize="xs"
+      fontWeight="700"
+      letterSpacing="0"
+      textTransform="uppercase"
+    >
+      {title}
+    </Text>
+    <Grid templateColumns={columns} gap={3} alignItems="end">
+      {children}
+    </Grid>
+  </Stack>
+);
+
+const BacktestRunPage = () => {
+  const router = useRouter();
+  const [configs, setConfigs] = useState<BacktestConfigSummary[]>([]);
+  const [jobs, setJobs] = useState<BacktestJobRecord[]>([]);
+  const [loadingConfigs, setLoadingConfigs] = useState(false);
+  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');
+  const [days, setDays] = useState('30');
+  const [startDate, setStartDate] = useState(() =>
+    toInputDate(new Date(Date.now() - 30 * DAY_MS)),
+  );
+  const [endDate, setEndDate] = useState(() => toInputDate(new Date()));
+  const [ai, setAi] = useState(false);
+  const [fast, setFast] = useState(false);
+  const [interval, setIntervalValue] = useState('15');
+  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,
+    });
+
+  const strategyItems = useMemo(() => buildStrategyItems(configs), [configs]);
+  const configItems = useMemo(
+    () => buildConfigItems(configs, selectedStrategy),
+    [configs, selectedStrategy],
+  );
+
+  const loadConfigs = useCallback(async () => {
+    setLoadingConfigs(true);
+    try {
+      const nextConfigs = await getBacktestRunConfigs();
+      setConfigs(nextConfigs);
+    } catch (error) {
+      toaster.error({
+        title: 'Failed to load backtest configs',
+        description: (error as Error)?.message || 'Request failed.',
+      });
+    } finally {
+      setLoadingConfigs(false);
     }
+  }, []);
 
-    return [
-      { label: 'All strategies', value: ALL_STRATEGIES },
-      ...Array.from(names)
-        .sort()
-        .map((strategyName) => ({
-          label: strategyName,
-          value: strategyName,
-        })),
-    ];
-  }, [tests]);
-  const [selectedStrategy, setSelectedStrategy] = useState(ALL_STRATEGIES);
-  const suiteItems = useMemo(() => {
-    const names = new Set<string>();
-    for (const test of tests) {
-      if (
-        selectedStrategy !== ALL_STRATEGIES &&
-        test.data?.strategyName !== selectedStrategy
-      ) {
-        continue;
-      }
+  const loadJobs = useCallback((background = false) => {
+    if (jobsRequestRef.current) {
+      return jobsRequestRef.current;
+    }
 
-      const { testSuiteId } = parseTestName(test.value);
-      if (testSuiteId) {
-        names.add(testSuiteId);
+    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;
+      }
+    })();
 
-    return [
-      { label: 'All suites', value: ALL_SUITES },
-      ...Array.from(names)
-        .sort()
-        .map((testSuiteId) => ({
-          label: testSuiteId,
-          value: testSuiteId,
-        })),
-    ];
-  }, [tests, selectedStrategy]);
-  const [selectedSuite, setSelectedSuite] = useState(ALL_SUITES);
+    jobsRequestRef.current = request;
+    return request;
+  }, []);
 
   useEffect(() => {
-    if (!strategyItems.some((item) => item.value === selectedStrategy)) {
-      setSelectedStrategy(strategyItems[0]?.value || ALL_STRATEGIES);
+    void loadConfigs();
+    void loadJobs();
+  }, [loadConfigs, loadJobs]);
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    if (params.get('onboarding') !== '1') {
+      return;
     }
-  }, [strategyItems, selectedStrategy]);
+
+    setOnboardingMode(true);
+    setDays('45');
+    setIntervalValue('15');
+    setConnector('binance');
+    setSelectedTickers(['BTCUSDT']);
+    setTestsLimit('1');
+    setParallel('1');
+  }, []);
 
   useEffect(() => {
-    if (!suiteItems.some((item) => item.value === selectedSuite)) {
-      setSelectedSuite(suiteItems[0]?.value || ALL_SUITES);
+    if (!strategyItems.length) {
+      setSelectedStrategy('');
+      return;
     }
-  }, [suiteItems, selectedSuite]);
-
-  const filteredTests = useMemo(() => {
-    return tests.filter((test) => {
-      if (
-        selectedStrategy !== ALL_STRATEGIES &&
-        test.data?.strategyName !== selectedStrategy
-      ) {
-        return false;
-      }
 
-      if (selectedSuite !== ALL_SUITES) {
-        const { testSuiteId } = parseTestName(test.value);
-        return testSuiteId === selectedSuite;
-      }
+    if (!strategyItems.some((item) => item.value === selectedStrategy)) {
+      setSelectedStrategy(strategyItems[0]?.value || '');
+    }
+  }, [selectedStrategy, strategyItems]);
 
-      return true;
-    });
-  }, [tests, selectedStrategy, selectedSuite]);
+  useEffect(() => {
+    if (!configItems.length) {
+      setSelectedConfigId('');
+      return;
+    }
 
-  const filteredTestNames = useMemo(
-    () => filteredTests.map((test) => test.value),
-    [filteredTests],
-  );
+    if (!configItems.some((item) => item.value === selectedConfigId)) {
+      setSelectedConfigId(configItems[0]?.value || '');
+    }
+  }, [configItems, selectedConfigId]);
 
-  const selectedFilteredCount = useMemo(() => {
-    const filteredSet = new Set(filteredTestNames);
-    return selectedTestNames.filter((testName) => filteredSet.has(testName))
-      .length;
-  }, [filteredTestNames, selectedTestNames]);
+  useEffect(() => {
+    const timer = window.setInterval(() => {
+      void loadJobs(true);
+    }, 3_000);
 
-  const allFilteredSelected =
-    filteredTests.length > 0 && selectedFilteredCount === filteredTests.length;
-  const hasSelectedInFilter = selectedFilteredCount > 0;
+    return () => window.clearInterval(timer);
+  }, [loadJobs]);
 
-  const noData = fulFilled && !loadding && filteredTests.length === 0;
+  useEffect(() => {
+    jobsRef.current = jobs;
+  }, [jobs]);
 
   useEffect(() => {
-    const actual = new Set(tests.map((test) => test.value));
-    setSelectedTestNames((prev) => {
-      const next = prev.filter((testName) => actual.has(testName));
-
-      if (
-        next.length === prev.length &&
-        next.every((name, i) => name === prev[i])
-      ) {
-        return prev;
+    const timer = window.setInterval(() => {
+      const runningJobs = jobsRef.current.filter(
+        (job) => job.status === 'running',
+      );
+      if (!runningJobs.length) {
+        return;
       }
 
-      return next;
-    });
-  }, [tests]);
+      void Promise.all(
+        runningJobs.map((job) => controlBacktestRun(job.id, 'heartbeat')),
+      )
+        .then((updatedJobs) => {
+          setJobs((currentJobs) => updatedJobs.reduce(mergeJob, currentJobs));
+        })
+        .catch(() => {
+          // Polling will surface the next durable state.
+        });
+    }, 5_000);
 
-  const handleToggleSelection = (testName: string, checked: boolean) => {
-    setSelectedTestNames((prev) => {
-      if (checked) {
-        if (prev.includes(testName)) {
-          return prev;
-        }
-        return [...prev, testName];
-      }
+    return () => window.clearInterval(timer);
+  }, []);
 
-      return prev.filter((name) => name !== testName);
-    });
-  };
+  const selectedConfig = useMemo(
+    () => configs.find((config) => config.id === selectedConfigId),
+    [configs, selectedConfigId],
+  );
 
-  const handleSelectAllFiltered = (checked: boolean) => {
-    setSelectedTestNames((prev) => {
-      if (!checked) {
-        const filteredSet = new Set(filteredTestNames);
-        return prev.filter((name) => !filteredSet.has(name));
-      }
+  const handleStart = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
 
-      const next = new Set(prev);
-      for (const name of filteredTestNames) {
-        next.add(name);
-      }
-      return Array.from(next);
-    });
-  };
+    if (!selectedStrategy || !selectedConfigId) {
+      toaster.error({
+        title: 'Select strategy and config',
+        description: 'Backtest config is required before launch.',
+      });
+      return;
+    }
 
-  const handleDeleteSelected = async () => {
-    const selectedSet = new Set(selectedTestNames);
-    const targets = filteredTests.filter((test) => selectedSet.has(test.value));
+    const payload: Record<string, unknown> = {
+      strategyName: selectedStrategy,
+      configId: selectedConfigId,
+      periodMode,
+      ai,
+      fast,
+      interval,
+      connector,
+    };
 
-    if (targets.length === 0 || isDeletingSelected) {
-      setIsDeleteSelectedOpen(false);
-      return;
+    if (periodMode === 'range') {
+      const startTime = dateToStartMs(startDate);
+      const endTime = dateToEndMs(endDate);
+      if (!startTime || !endTime || startTime >= endTime) {
+        toaster.error({
+          title: 'Invalid date range',
+          description: 'Start date must be earlier than end date.',
+        });
+        return;
+      }
+      payload.startTime = startTime;
+      payload.endTime = endTime;
+    } else {
+      const parsedDays = Number(days);
+      if (!Number.isFinite(parsedDays) || parsedDays <= 0) {
+        toaster.error({
+          title: 'Invalid days value',
+          description: 'Days must be greater than zero.',
+        });
+        return;
+      }
+      payload.days = parsedDays;
     }
 
-    setIsDeletingSelected(true);
+    if (selectedTickers.length) {
+      payload.tickers = selectedTickers.join(',');
+    }
 
+    for (const [field, value] of [
+      ['tickersLimit', tickersLimit],
+      ['testsLimit', testsLimit],
+      ['parallel', parallel],
+    ] as const) {
+      const parsed = Number(value);
+      if (value.trim() && Number.isFinite(parsed) && parsed > 0) {
+        payload[field] = Math.trunc(parsed);
+      }
+    }
+
+    setStarting(true);
     try {
-      const results = await Promise.allSettled(
-        targets.map(async (test) => {
-          const strategyName = test.data?.strategyName as string | undefined;
-          if (!strategyName) {
-            throw new Error(`Missing strategy for ${test.value}`);
-          }
-
-          const deleted = await deleteBacktest(test.value, strategyName);
-          if (!deleted) {
-            throw new Error(`Delete failed for ${test.value}`);
-          }
-
-          await removeBacktestTest(test.value);
-          return test.value;
-        }),
-      );
+      const job = await startBacktestRun(payload);
+      setJobs((currentJobs) => mergeJob(currentJobs, job));
+      toaster.success({
+        title: 'Backtest started',
+        description: getJobTitle(job),
+      });
+    } catch (error) {
+      toaster.error({
+        title: 'Backtest start failed',
+        description: (error as Error)?.message || 'Request failed.',
+      });
+    } finally {
+      setStarting(false);
+    }
+  };
 
-      const successCount = results.filter(
-        (item) => item.status === 'fulfilled',
-      ).length;
-      const failedCount = results.length - successCount;
-
-      if (successCount > 0) {
-        const deletedSet = new Set(
-          results
-            .filter((item) => item.status === 'fulfilled')
-            .map((item) => item.value),
-        );
-        setSelectedTestNames((prev) =>
-          prev.filter((testName) => !deletedSet.has(testName)),
-        );
-      }
+  const handleAction = async (jobId: string, action: JobAction) => {
+    setBusyAction(`${jobId}:${action}`);
+    try {
+      const job = await controlBacktestRun(jobId, action);
+      setJobs((currentJobs) => mergeJob(currentJobs, job));
+    } catch (error) {
+      toaster.error({
+        title: 'Backtest action failed',
+        description: (error as Error)?.message || 'Request failed.',
+      });
+    } finally {
+      setBusyAction('');
+    }
+  };
 
-      if (failedCount === 0) {
-        toaster.success({
-          title: 'Tests deleted',
-          description: `Deleted: ${successCount}`,
-        });
-      } else {
-        toaster.error({
-          title: 'Bulk delete finished with errors',
-          description: `Deleted: ${successCount} of ${targets.length}`,
-        });
+  const handleDeleteJob = async (jobId: string) => {
+    setBusyAction(`${jobId}:delete`);
+    try {
+      const deleted = await deleteBacktestRun(jobId);
+      if (deleted) {
+        setJobs((currentJobs) => currentJobs.filter((job) => job.id !== jobId));
       }
-    } catch {
+    } catch (error) {
       toaster.error({
-        title: 'Delete failed',
-        description: 'Failed to delete selected tests.',
+        title: 'Backtest job delete failed',
+        description: (error as Error)?.message || 'Request failed.',
       });
     } finally {
-      setIsDeletingSelected(false);
-      setIsDeleteSelectedOpen(false);
+      setBusyAction('');
     }
   };
 
+  const hasConfigs = configs.length > 0;
+  const noJobs = !loadingJobs && jobs.length === 0;
+
   return (
     <ClientOnly>
-      <Box minH="100vh" bg="gray.900">
+      <Box minH="100vh" bg="gray.900" color="gray.100">
         <Box
           as="main"
           minH="100vh"
           minW="1200px"
           pl={2}
+          pr={4}
+          py={3}
           bg="gray.900"
-          display="flex"
-          flexDirection="column"
-          alignItems="flex-start"
         >
-          <Flex
-            mb={2}
-            mt={2}
-            pl={2}
-            gap={8}
-            flexDirection="row"
-            alignItems="center"
-          >
-            <Flex gap={3} alignItems="center">
-              <Select
-                placeholder="Strategy"
-                value={[selectedStrategy]}
-                defaultValue={[selectedStrategy]}
-                onChange={(value) =>
-                  setSelectedStrategy(value[0] || ALL_STRATEGIES)
-                }
-                items={strategyItems}
-                width="220px"
-              />
-              <Select
-                placeholder="TestSuite"
-                value={[selectedSuite]}
-                defaultValue={[selectedSuite]}
-                onChange={(value) => setSelectedSuite(value[0] || ALL_SUITES)}
-                items={suiteItems}
-                width="180px"
-              />
+          <Flex alignItems="center" justifyContent="space-between" mb={3}>
+            <Box pl={2}>
+              <Text fontSize="lg" fontWeight="700" lineHeight="1.2">
+                Backtest runs
+              </Text>
+            </Box>
+            <Flex gap={2}>
+              <Button
+                type="button"
+                size="sm"
+                variant="outline"
+                colorPalette="teal"
+                onClick={() => router.push('/routes/strategies/backtest')}
+              >
+                <FiFolder />
+                Results
+              </Button>
+              <Button
+                type="button"
+                size="sm"
+                variant="outline"
+                onClick={() => {
+                  void loadConfigs();
+                  void loadJobs();
+                }}
+                loading={loadingConfigs || loadingJobs}
+              >
+                <FiRefreshCw />
+                Refresh
+              </Button>
             </Flex>
-            <CompareList />
           </Flex>
-          <Flex mb={4} pl={2} gap={4} alignItems="center" w="full" minH="32px">
-            <Checkbox.Root
-              size="sm"
-              colorPalette="teal"
-              checked={
-                allFilteredSelected
-                  ? true
-                  : hasSelectedInFilter
-                    ? 'indeterminate'
-                    : false
-              }
-              onCheckedChange={(details) =>
-                handleSelectAllFiltered(details.checked === true)
-              }
-            >
-              <Checkbox.HiddenInput />
-              <Checkbox.Control />
-            </Checkbox.Root>
-            <Text color="gray.200" fontWeight="semibold">
-              Selected: {selectedFilteredCount}
-            </Text>
 
-            <Dialog.Root
-              open={isDeleteSelectedOpen}
-              onOpenChange={(e) => setIsDeleteSelectedOpen(e.open)}
+          <Box maxW="1200px" w="full">
+            <Box
+              borderWidth="1px"
+              borderColor="gray.700"
+              bg="gray.800"
+              p={4}
+              borderRadius="md"
             >
-              <Dialog.Trigger asChild>
-                <Button
-                  size="sm"
-                  colorPalette="red"
-                  variant="outline"
-                  disabled={!hasSelectedInFilter || isDeletingSelected}
-                >
-                  Delete
-                </Button>
-              </Dialog.Trigger>
-              <Portal>
-                <Dialog.Backdrop />
-                <Dialog.Positioner>
-                  <Dialog.Content>
-                    <Dialog.Header>
-                      <Dialog.Title>Delete selected tests</Dialog.Title>
-                      <Dialog.CloseTrigger asChild>
-                        <CloseButton position="absolute" right="3" top="3" />
-                      </Dialog.CloseTrigger>
-                    </Dialog.Header>
-                    <Dialog.Body>
-                      <Text fontSize="sm" color="gray.200">
-                        Delete selected tests ({selectedFilteredCount})?
+              <form onSubmit={handleStart}>
+                <Stack gap={5}>
+                  <Flex
+                    alignItems="center"
+                    justifyContent="space-between"
+                    gap={4}
+                  >
+                    <Flex alignItems="center" gap={3} minW={0}>
+                      <Text fontWeight="700" flexShrink={0}>
+                        New run
                       </Text>
-                      <Text fontSize="sm" color="gray.400" mt={2}>
-                        This action cannot be undone.
-                      </Text>
-                    </Dialog.Body>
-                    <Dialog.Footer>
-                      <Dialog.ActionTrigger asChild>
-                        <Button
-                          variant="outline"
-                          size="sm"
-                          disabled={isDeletingSelected}
+                      {onboardingMode ? (
+                        <Badge colorPalette="teal">First backtest preset</Badge>
+                      ) : null}
+                      {selectedConfig ? (
+                        <Flex gap={2} wrap="wrap">
+                          <Badge colorPalette="teal">
+                            {selectedConfig.combinationCount} combos
+                          </Badge>
+                          <Badge colorPalette="gray">
+                            {selectedConfig.paramCount} params
+                          </Badge>
+                        </Flex>
+                      ) : null}
+                    </Flex>
+                  </Flex>
+
+                  <FormSection
+                    title="Strategy"
+                    columns="repeat(2, minmax(0, 1fr))"
+                  >
+                    <Field.Root>
+                      <Field.Label>Strategy</Field.Label>
+                      <SelectControl>
+                        <Select
+                          placeholder="Strategy"
+                          value={selectedStrategy ? [selectedStrategy] : []}
+                          defaultValue={
+                            selectedStrategy ? [selectedStrategy] : []
+                          }
+                          onChange={(value) =>
+                            setSelectedStrategy(value[0] || '')
+                          }
+                          items={strategyItems}
+                          emptyState="No backtest configs"
+                          width="100%"
+                          disabled={!hasConfigs}
+                        />
+                      </SelectControl>
+                    </Field.Root>
+
+                    <Field.Root>
+                      <Field.Label>Config</Field.Label>
+                      <SelectControl>
+                        <Select
+                          placeholder="Config"
+                          value={selectedConfigId ? [selectedConfigId] : []}
+                          defaultValue={
+                            selectedConfigId ? [selectedConfigId] : []
+                          }
+                          onChange={(value) =>
+                            setSelectedConfigId(value[0] || '')
+                          }
+                          items={configItems}
+                          emptyState="No configs for strategy"
+                          width="100%"
+                          disabled={!selectedStrategy}
+                        />
+                      </SelectControl>
+                    </Field.Root>
+                  </FormSection>
+
+                  <Grid
+                    templateColumns="minmax(0, 1fr) 260px"
+                    gap={5}
+                    alignItems="start"
+                  >
+                    <FormSection
+                      title="Date window"
+                      columns={
+                        periodMode === 'days'
+                          ? '280px minmax(0, 1fr)'
+                          : '280px repeat(2, minmax(0, 1fr))'
+                      }
+                    >
+                      <Field.Root>
+                        <Field.Label>Mode</Field.Label>
+                        <Segment
+                          defaultValue="days"
+                          value={periodMode}
+                          items={PERIOD_ITEMS}
+                          onChange={(value) =>
+                            setPeriodMode(value === 'range' ? 'range' : 'days')
+                          }
+                        />
+                      </Field.Root>
+
+                      {periodMode === 'days' ? (
+                        <Field.Root>
+                          <Field.Label>Days</Field.Label>
+                          <Input
+                            value={days}
+                            type="number"
+                            min={1}
+                            step={1}
+                            {...inputControlProps}
+                            onChange={(event) => setDays(event.target.value)}
+                          />
+                        </Field.Root>
+                      ) : (
+                        <>
+                          <Field.Root>
+                            <Field.Label>Start</Field.Label>
+                            <Input
+                              value={startDate}
+                              type="date"
+                              {...inputControlProps}
+                              onChange={(event) =>
+                                setStartDate(event.target.value)
+                              }
+                            />
+                          </Field.Root>
+                          <Field.Root>
+                            <Field.Label>End</Field.Label>
+                            <Input
+                              value={endDate}
+                              type="date"
+                              {...inputControlProps}
+                              onChange={(event) =>
+                                setEndDate(event.target.value)
+                              }
+                            />
+                          </Field.Root>
+                        </>
+                      )}
+                    </FormSection>
+
+                    <FormSection title="Options" columns="1fr">
+                      <Flex gap={4} alignItems="center" minH="40px">
+                        <Checkbox.Root
+                          colorPalette="teal"
+                          checked={ai}
+                          onCheckedChange={(details) =>
+                            setAi(details.checked === true)
+                          }
                         >
-                          Cancel
-                        </Button>
-                      </Dialog.ActionTrigger>
-                      <Button
-                        colorPalette="red"
-                        size="sm"
-                        onClick={handleDeleteSelected}
-                        loading={isDeletingSelected}
-                      >
-                        Delete
-                      </Button>
-                    </Dialog.Footer>
-                  </Dialog.Content>
-                </Dialog.Positioner>
-              </Portal>
-            </Dialog.Root>
-          </Flex>
-          <Box flex="1" h="full" w="full">
-            <TestList
-              tests={filteredTests}
-              loadding={loadding}
-              fulFilled={fulFilled}
-              noData={noData}
-              selectedTestNames={selectedTestNames}
-              onToggleSelection={handleToggleSelection}
-            />
+                          <Checkbox.HiddenInput />
+                          <Checkbox.Control
+                            bg={controlSurface}
+                            borderColor="gray.600"
+                          />
+                          <Checkbox.Label>AI</Checkbox.Label>
+                        </Checkbox.Root>
+                        <Checkbox.Root
+                          colorPalette="teal"
+                          checked={fast}
+                          onCheckedChange={(details) =>
+                            setFast(details.checked === true)
+                          }
+                        >
+                          <Checkbox.HiddenInput />
+                          <Checkbox.Control
+                            bg={controlSurface}
+                            borderColor="gray.600"
+                          />
+                          <Checkbox.Label>Fast</Checkbox.Label>
+                        </Checkbox.Root>
+                      </Flex>
+                    </FormSection>
+                  </Grid>
+
+                  <FormSection
+                    title="Runtime"
+                    columns="220px 260px minmax(0, 1fr)"
+                  >
+                    <Field.Root>
+                      <Field.Label>Interval</Field.Label>
+                      <SelectControl>
+                        <Select
+                          placeholder="Interval"
+                          value={[interval]}
+                          defaultValue={[interval]}
+                          onChange={(value) =>
+                            setIntervalValue(value[0] || '15')
+                          }
+                          items={INTERVAL_ITEMS}
+                          width="100%"
+                        />
+                      </SelectControl>
+                    </Field.Root>
+
+                    <Field.Root>
+                      <Field.Label>Connector</Field.Label>
+                      <SelectControl>
+                        <Select
+                          placeholder="Connector"
+                          value={[connector]}
+                          defaultValue={[connector]}
+                          onChange={(value) => {
+                            setConnector(value[0] || 'binance');
+                            setSelectedTickers([]);
+                          }}
+                          items={CONNECTOR_ITEMS}
+                          width="100%"
+                        />
+                      </SelectControl>
+                    </Field.Root>
+
+                    <Field.Root>
+                      <Field.Label>Tickers</Field.Label>
+                      <Stack gap={2} w="full" minW={0}>
+                        <SelectControl>
+                          <SelectWithSearch
+                            key={connector}
+                            multiple
+                            placeholder="All tickers"
+                            emptyState="No tickers"
+                            defaultValue={[]}
+                            value={selectedTickers}
+                            items={tickerItems}
+                            width="100%"
+                            onChange={setSelectedTickers}
+                            onOpenChange={(open) => {
+                              if (open) {
+                                void ensureTickersLoaded().catch(
+                                  () => undefined,
+                                );
+                              }
+                            }}
+                          />
+                        </SelectControl>
+                        {selectedTickers.length ? (
+                          <Flex gap={2} wrap="wrap">
+                            {selectedTickers.map((ticker) => (
+                              <Badge
+                                key={ticker}
+                                colorPalette="teal"
+                                display="inline-flex"
+                                alignItems="center"
+                                gap={1}
+                                py="1"
+                              >
+                                {ticker}
+                                <Box
+                                  as="span"
+                                  role="button"
+                                  tabIndex={0}
+                                  aria-label={`Remove ${ticker}`}
+                                  color="gray.300"
+                                  cursor="pointer"
+                                  _hover={{ color: 'white' }}
+                                  onKeyDown={(event) => {
+                                    if (
+                                      event.key === 'Enter' ||
+                                      event.key === ' '
+                                    ) {
+                                      event.preventDefault();
+                                      setSelectedTickers((currentTickers) =>
+                                        currentTickers.filter(
+                                          (currentTicker) =>
+                                            currentTicker !== ticker,
+                                        ),
+                                      );
+                                    }
+                                  }}
+                                  onClick={() =>
+                                    setSelectedTickers((currentTickers) =>
+                                      currentTickers.filter(
+                                        (currentTicker) =>
+                                          currentTicker !== ticker,
+                                      ),
+                                    )
+                                  }
+                                >
+                                  <FiX size={12} />
+                                </Box>
+                              </Badge>
+                            ))}
+                          </Flex>
+                        ) : null}
+                      </Stack>
+                    </Field.Root>
+                  </FormSection>
+
+                  <FormSection title="Limits" columns="repeat(3, 1fr)">
+                    <Field.Root>
+                      <Field.Label>Tickers limit</Field.Label>
+                      <Input
+                        value={tickersLimit}
+                        type="number"
+                        min={1}
+                        {...inputControlProps}
+                        onChange={(event) =>
+                          setTickersLimit(event.target.value)
+                        }
+                      />
+                    </Field.Root>
+
+                    <Field.Root>
+                      <Field.Label>Tests limit</Field.Label>
+                      <Input
+                        value={testsLimit}
+                        type="number"
+                        min={1}
+                        {...inputControlProps}
+                        onChange={(event) => setTestsLimit(event.target.value)}
+                      />
+                    </Field.Root>
+
+                    <Field.Root>
+                      <Field.Label>Parallel</Field.Label>
+                      <Input
+                        value={parallel}
+                        type="number"
+                        min={1}
+                        {...inputControlProps}
+                        onChange={(event) => setParallel(event.target.value)}
+                      />
+                    </Field.Root>
+                  </FormSection>
+
+                  <Flex justifyContent="flex-end" pt={1}>
+                    <Button
+                      type="submit"
+                      colorPalette="teal"
+                      disabled={!selectedConfigId || starting}
+                      loading={starting}
+                      minW="160px"
+                    >
+                      <FiPlay />
+                      Start
+                    </Button>
+                  </Flex>
+                </Stack>
+              </form>
+            </Box>
+          </Box>
+
+          <Box maxW="1200px" w="full" mt={5}>
+            <Flex alignItems="center" justifyContent="space-between" mb={3}>
+              <Flex alignItems="center" gap={3}>
+                <Text fontWeight="700">Active runs</Text>
+                <Badge colorPalette="gray">{jobs.length} jobs</Badge>
+              </Flex>
+            </Flex>
+
+            {noJobs ? (
+              <EmptyState
+                icon={FiFolder}
+                title="No backtest jobs"
+                description="No queued, running, paused, or finished jobs yet."
+              />
+            ) : null}
+
+            <Stack gap={3}>
+              {jobs.map((job) => (
+                <BacktestJobItem
+                  key={job.id}
+                  job={job}
+                  busyAction={busyAction}
+                  onAction={handleAction}
+                  onDelete={handleDeleteJob}
+                  onOpenResults={() =>
+                    router.push('/routes/strategies/backtest')
+                  }
+                />
+              ))}
+            </Stack>
           </Box>
         </Box>
       </Box>
@@ -371,4 +955,218 @@ const Backtest = () => {
   );
 };
 
-export default Backtest;
+interface BacktestJobItemProps {
+  job: BacktestJobRecord;
+  busyAction: string;
+  onAction: (jobId: string, action: JobAction) => void;
+  onDelete: (jobId: string) => void;
+  onOpenResults: () => void;
+}
+
+const BacktestJobItem = ({
+  job,
+  busyAction,
+  onAction,
+  onDelete,
+  onOpenResults,
+}: BacktestJobItemProps) => {
+  const progress = job.progress;
+  const totalLabel = progress.total == null ? '?' : progress.total;
+  const logs = job.logs.slice(-10);
+  const canPause = job.status === 'running';
+  const canResume = job.status === 'paused';
+  const canCancel = !['completed', 'cancelled'].includes(job.status);
+  const canDelete = ['completed', 'cancelled', 'failed', 'paused'].includes(
+    job.status,
+  );
+
+  return (
+    <Box
+      borderWidth="1px"
+      borderColor="gray.700"
+      bg="gray.800"
+      p={4}
+      borderRadius="md"
+    >
+      <Flex alignItems="flex-start" justifyContent="space-between" gap={4}>
+        <Box minW={0}>
+          <Flex gap={2} alignItems="center" wrap="wrap">
+            <Text fontWeight="700" wordBreak="break-word">
+              {getJobTitle(job)}
+            </Text>
+            <Badge colorPalette={statusTone(job.status)}>
+              {statusLabel(job.status)}
+            </Badge>
+            {job.request.ai ? <Badge colorPalette="purple">AI</Badge> : null}
+            {job.request.fast ? <Badge colorPalette="blue">Fast</Badge> : null}
+          </Flex>
+          <Text fontSize="xs" color="gray.400" mt={1}>
+            Started {formatDateTime(job.startedAt)} · Updated{' '}
+            {formatDateTime(job.updatedAt)} · Run #{job.runCount}
+          </Text>
+          {job.pauseReason ? (
+            <Text fontSize="xs" color="yellow.300" mt={1}>
+              Pause reason: {job.pauseReason}
+            </Text>
+          ) : null}
+          {job.error ? (
+            <Text fontSize="xs" color="red.300" mt={1}>
+              {job.error}
+            </Text>
+          ) : null}
+        </Box>
+
+        <Flex gap={2} flexShrink={0} wrap="wrap" justifyContent="flex-end">
+          {canPause ? (
+            <>
+              <Button
+                type="button"
+                size="xs"
+                variant="outline"
+                loading={busyAction === `${job.id}:pause`}
+                onClick={() => onAction(job.id, 'pause')}
+              >
+                <FiPause />
+                Pause
+              </Button>
+              <Button
+                type="button"
+                size="xs"
+                variant="outline"
+                loading={busyAction === `${job.id}:stop`}
+                onClick={() => onAction(job.id, 'stop')}
+              >
+                <FiSquare />
+                Stop
+              </Button>
+            </>
+          ) : null}
+
+          {canResume ? (
+            <Button
+              type="button"
+              size="xs"
+              colorPalette="teal"
+              loading={busyAction === `${job.id}:resume`}
+              onClick={() => onAction(job.id, 'resume')}
+            >
+              <FiPlay />
+              Resume
+            </Button>
+          ) : null}
+
+          {job.status === 'completed' ? (
+            <Button
+              type="button"
+              size="xs"
+              variant="outline"
+              colorPalette="teal"
+              onClick={onOpenResults}
+            >
+              <FiFolder />
+              Results
+            </Button>
+          ) : null}
+
+          {canCancel ? (
+            <Button
+              type="button"
+              size="xs"
+              variant="ghost"
+              colorPalette="red"
+              loading={busyAction === `${job.id}:cancel`}
+              onClick={() => onAction(job.id, 'cancel')}
+            >
+              <FiX />
+              Cancel
+            </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>
+
+      <Box mt={4}>
+        <Flex alignItems="center" justifyContent="space-between" mb={2}>
+          <Text fontSize="sm" color="gray.300">
+            {progress.completed}/{totalLabel} tests
+          </Text>
+          <Text fontSize="sm" color="gray.300">
+            {formatNumber(progress.percent, 1)}%
+          </Text>
+        </Flex>
+        <Box h="8px" bg="gray.800" borderRadius="full" overflow="hidden">
+          <Box
+            h="full"
+            bg={job.status === 'failed' ? 'red.500' : 'teal.400'}
+            width={`${Math.max(0, Math.min(100, progress.percent))}%`}
+            transition="width 0.2s ease"
+          />
+        </Box>
+      </Box>
+
+      <Grid templateColumns="repeat(5, minmax(0, 1fr))" gap={3} mt={4}>
+        <Metric
+          label="Avg P&L"
+          value={`${formatNumber(progress.averageProfit, 2)}$`}
+        />
+        <Metric
+          label="Winrate"
+          value={`${formatNumber(progress.winRate, 1)}%`}
+        />
+        <Metric label="Success" value={String(progress.successTests ?? '-')} />
+        <Metric label="Errors" value={String(progress.errorTests ?? '-')} />
+        <Metric label="PID" value={String(job.pid ?? '-')} />
+      </Grid>
+
+      {logs.length ? (
+        <Box mt={4} bg="gray.950" borderRadius="md" p={3} overflow="hidden">
+          <Stack gap={1}>
+            {logs.map((line, index) => (
+              <Text
+                key={`${job.id}:log:${index}`}
+                fontFamily="mono"
+                fontSize="xs"
+                color="gray.300"
+                whiteSpace="pre-wrap"
+                wordBreak="break-word"
+              >
+                {line}
+              </Text>
+            ))}
+          </Stack>
+        </Box>
+      ) : null}
+    </Box>
+  );
+};
+
+const Metric = ({ label, value }: { label: string; value: string }) => (
+  <Box minW={0}>
+    <Text fontSize="xs" color="gray.500">
+      {label}
+    </Text>
+    <Text
+      fontSize="sm"
+      color="gray.100"
+      fontWeight="700"
+      overflow="hidden"
+      textOverflow="ellipsis"
+      whiteSpace="nowrap"
+    >
+      {value}
+    </Text>
+  </Box>
+);
+
+export default BacktestRunPage;