From c4294883581d413a41367f3a2d1e5128ad9f642d Mon Sep 17 00:00:00 2001
From: Saravana Achu Mac <saravanakumardb1@gmail.com>
Date: Sat, 9 May 2026 01:39:15 -0700
Subject: [PATCH] refactor(ui): align backtest configurator controls

---
 .../components/BacktestConfigurator.tsx       | 138 +++++++++---------
 1 file changed, 72 insertions(+), 66 deletions(-)

diff --git a/web/src/backtest/components/BacktestConfigurator.tsx b/web/src/backtest/components/BacktestConfigurator.tsx
index 9532748..a3657b2 100644
--- a/web/src/backtest/components/BacktestConfigurator.tsx
+++ b/web/src/backtest/components/BacktestConfigurator.tsx
@@ -6,6 +6,7 @@ import type {
     BacktestTriggerTimeframe
 } from '../types';
 import { parseSymbolsInput, toDateInputValue } from '../utils';
+import { Button, Input, Select } from '../../components/ui/Primitives';
 
 type SourceType = 'csv' | 'json' | 'replay' | 'kraken';
 
@@ -28,7 +29,7 @@ export const BacktestConfigurator: React.FC<BacktestConfiguratorProps> = ({
 }) => {
     const now = Date.now();
     const defaultFrom = toDateInputValue(now - (30 * 24 * 60 * 60 * 1000));
-    const defaultTo = toDateInputValue(now);
+const defaultTo = toDateInputValue(now);
 
     const [symbolsInput, setSymbolsInput] = useState((initialSymbols || []).join(', '));
     const [timeframe, setTimeframe] = useState<BacktestTimeframe>('15m');
@@ -136,42 +137,43 @@ export const BacktestConfigurator: React.FC<BacktestConfiguratorProps> = ({
             <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                 <label className="space-y-1">
                     <span className="text-[10px] uppercase tracking-wider text-zinc-400">Symbols</span>
-                    <input
+                    <Input
                         value={symbolsInput}
                         onChange={(event) => setSymbolsInput(event.target.value)}
                         placeholder="BTC/USDT, ETH/USDT"
-                        className="w-full rounded-lg border border-white/10 bg-zinc-900 px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-400/50"
+                        controlSize="sm"
                     />
                 </label>
                 <label className="space-y-1">
                     <span className="text-[10px] uppercase tracking-wider text-zinc-400">Timeframe</span>
-                    <select
+                    <Select
                         value={timeframe}
                         onChange={(event) => setTimeframe(event.target.value as BacktestTimeframe)}
-                        className="w-full rounded-lg border border-white/10 bg-zinc-900 px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-400/50"
-                    >
-                        <option value="1m">1m</option>
-                        <option value="15m">15m</option>
-                        <option value="1h">1h</option>
-                        <option value="4h">4h</option>
-                    </select>
+                        controlSize="sm"
+                        options={[
+                            { value: '1m', label: '1m' },
+                            { value: '15m', label: '15m' },
+                            { value: '1h', label: '1h' },
+                            { value: '4h', label: '4h' },
+                        ]}
+                    />
                 </label>
                 <label className="space-y-1">
                     <span className="text-[10px] uppercase tracking-wider text-zinc-400">From</span>
-                    <input
+                    <Input
                         type="date"
                         value={fromDate}
                         onChange={(event) => setFromDate(event.target.value)}
-                        className="w-full rounded-lg border border-white/10 bg-zinc-900 px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-400/50"
+                        controlSize="sm"
                     />
                 </label>
                 <label className="space-y-1">
                     <span className="text-[10px] uppercase tracking-wider text-zinc-400">To</span>
-                    <input
+                    <Input
                         type="date"
                         value={toDate}
                         onChange={(event) => setToDate(event.target.value)}
-                        className="w-full rounded-lg border border-white/10 bg-zinc-900 px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-400/50"
+                        controlSize="sm"
                     />
                 </label>
             </div>
@@ -179,43 +181,43 @@ export const BacktestConfigurator: React.FC<BacktestConfiguratorProps> = ({
             <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
                 <label className="space-y-1">
                     <span className="text-[10px] uppercase tracking-wider text-zinc-400">Initial Capital (USD)</span>
-                    <input
+                    <Input
                         type="number"
                         min={1}
                         value={initialCapital}
                         onChange={(event) => setInitialCapital(Number(event.target.value))}
-                        className="w-full rounded-lg border border-white/10 bg-zinc-900 px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-400/50"
+                        controlSize="sm"
                     />
                 </label>
                 <label className="space-y-1">
                     <span className="text-[10px] uppercase tracking-wider text-zinc-400">Slippage (bps)</span>
-                    <input
+                    <Input
                         type="number"
                         min={0}
                         value={slippageBps}
                         onChange={(event) => setSlippageBps(Number(event.target.value))}
-                        className="w-full rounded-lg border border-white/10 bg-zinc-900 px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-400/50"
+                        controlSize="sm"
                     />
                 </label>
                 <label className="space-y-1">
                     <span className="text-[10px] uppercase tracking-wider text-zinc-400">Fee (bps)</span>
-                    <input
+                    <Input
                         type="number"
                         min={0}
                         value={feeBps}
                         onChange={(event) => setFeeBps(Number(event.target.value))}
-                        className="w-full rounded-lg border border-white/10 bg-zinc-900 px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-400/50"
+                        controlSize="sm"
                     />
                 </label>
                 <label className="space-y-1">
                     <span className="text-[10px] uppercase tracking-wider text-zinc-400">Partial Fill %</span>
-                    <input
+                    <Input
                         type="number"
                         min={1}
                         max={100}
                         value={Math.round(partialFillPct * 100)}
                         onChange={(event) => setPartialFillPct(Math.max(0.01, Math.min(1, Number(event.target.value) / 100)))}
-                        className="w-full rounded-lg border border-white/10 bg-zinc-900 px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-400/50"
+                        controlSize="sm"
                     />
                 </label>
             </div>
@@ -223,48 +225,52 @@ export const BacktestConfigurator: React.FC<BacktestConfiguratorProps> = ({
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
                 <label className="space-y-1">
                     <span className="text-[10px] uppercase tracking-wider text-zinc-400">Signal Fill Timing</span>
-                    <select
+                    <Select
                         value={fillOnNextBar ? 'next_open' : 'same_close'}
                         onChange={(event) => setFillOnNextBar(event.target.value === 'next_open')}
-                        className="w-full rounded-lg border border-white/10 bg-zinc-900 px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-400/50"
-                    >
-                        <option value="next_open">Next bar open</option>
-                        <option value="same_close">Same bar close</option>
-                    </select>
+                        controlSize="sm"
+                        options={[
+                            { value: 'next_open', label: 'Next bar open' },
+                            { value: 'same_close', label: 'Same bar close' },
+                        ]}
+                    />
                 </label>
                 <label className="space-y-1">
                     <span className="text-[10px] uppercase tracking-wider text-zinc-400">Intra-candle Conflict</span>
-                    <select
+                    <Select
                         value={intraCandlePolicy}
                         onChange={(event) => setIntraCandlePolicy(event.target.value as BacktestIntraCandlePolicy)}
-                        className="w-full rounded-lg border border-white/10 bg-zinc-900 px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-400/50"
-                    >
-                        <option value="ohlc_path">OHLC path</option>
-                        <option value="stop_loss_first">Stop-loss first</option>
-                        <option value="take_profit_first">Take-profit first</option>
-                    </select>
+                        controlSize="sm"
+                        options={[
+                            { value: 'ohlc_path', label: 'OHLC path' },
+                            { value: 'stop_loss_first', label: 'Stop-loss first' },
+                            { value: 'take_profit_first', label: 'Take-profit first' },
+                        ]}
+                    />
                 </label>
                 <label className="space-y-1">
                     <span className="text-[10px] uppercase tracking-wider text-zinc-400">Trigger Resolution</span>
-                    <select
+                    <Select
                         value={triggerTimeframe}
                         onChange={(event) => setTriggerTimeframe(event.target.value as BacktestTriggerTimeframe)}
-                        className="w-full rounded-lg border border-white/10 bg-zinc-900 px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-400/50"
-                    >
-                        <option value="1m">1m trigger candles</option>
-                        <option value="off">Base timeframe only</option>
-                    </select>
+                        controlSize="sm"
+                        options={[
+                            { value: '1m', label: '1m trigger candles' },
+                            { value: 'off', label: 'Base timeframe only' },
+                        ]}
+                    />
                 </label>
                 <label className="space-y-1">
                     <span className="text-[10px] uppercase tracking-wider text-zinc-400">End-of-Window Position Handling</span>
-                    <select
+                    <Select
                         value={forceCloseAtWindowEnd ? 'force_close' : 'open_at_end'}
                         onChange={(event) => setForceCloseAtWindowEnd(event.target.value === 'force_close')}
-                        className="w-full rounded-lg border border-white/10 bg-zinc-900 px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-400/50"
-                    >
-                        <option value="open_at_end">Mark as OPEN_AT_END (Default)</option>
-                        <option value="force_close">Force close at last candle</option>
-                    </select>
+                        controlSize="sm"
+                        options={[
+                            { value: 'open_at_end', label: 'Mark as OPEN_AT_END (Default)' },
+                            { value: 'force_close', label: 'Force close at last candle' },
+                        ]}
+                    />
                 </label>
                 <div className="rounded-lg border border-white/10 bg-zinc-900/70 px-3 py-2">
                     <p className="text-[10px] uppercase tracking-wider text-zinc-500">Replay Semantics</p>
@@ -277,7 +283,7 @@ export const BacktestConfigurator: React.FC<BacktestConfiguratorProps> = ({
             <div className="grid grid-cols-1 md:grid-cols-2 gap-3 items-end">
                 <label className="space-y-1">
                     <span className="text-[10px] uppercase tracking-wider text-zinc-400">Historical Data Type</span>
-                    <select
+                    <Select
                         value={sourceType}
                         onChange={(event) => {
                             setSourceType(event.target.value as SourceType);
@@ -289,29 +295,30 @@ export const BacktestConfigurator: React.FC<BacktestConfiguratorProps> = ({
                                 setSourceName('');
                             }
                         }}
-                        className="w-full rounded-lg border border-white/10 bg-zinc-900 px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-400/50"
-                    >
-                        <option value="csv">CSV</option>
-                        <option value="json">JSON</option>
-                        <option value="replay">Replay JSON</option>
-                        <option value="kraken">Kraken Historical API</option>
-                    </select>
+                        controlSize="sm"
+                        options={[
+                            { value: 'csv', label: 'CSV' },
+                            { value: 'json', label: 'JSON' },
+                            { value: 'replay', label: 'Replay JSON' },
+                            { value: 'kraken', label: 'Kraken Historical API' },
+                        ]}
+                    />
                 </label>
                 {sourceType === 'kraken' ? (
                     <label className="space-y-1">
                         <span className="text-[10px] uppercase tracking-wider text-zinc-400">Kraken Warm-up Lookback Candles</span>
-                        <input
+                        <Input
                             type="number"
                             min={100}
                             value={krakenLookbackCandles}
                             onChange={(event) => setKrakenLookbackCandles(Math.max(100, Number(event.target.value || 0)))}
-                            className="w-full rounded-lg border border-white/10 bg-zinc-900 px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-400/50"
+                            controlSize="sm"
                         />
                     </label>
                 ) : (
                     <label className="space-y-1">
                         <span className="text-[10px] uppercase tracking-wider text-zinc-400">Upload Historical File</span>
-                        <input
+                        <Input
                             type="file"
                             accept={sourceType === 'csv' ? '.csv,text/csv' : '.json,application/json'}
                             onChange={async (event) => {
@@ -323,7 +330,7 @@ export const BacktestConfigurator: React.FC<BacktestConfiguratorProps> = ({
                                     setError(uploadError.message || 'Failed to read file');
                                 }
                             }}
-                            className="w-full rounded-lg border border-white/10 bg-zinc-900 px-3 py-2 text-xs text-zinc-300 focus:outline-none focus:border-emerald-400/50"
+                            controlSize="sm"
                         />
                     </label>
                 )}
@@ -339,16 +346,15 @@ export const BacktestConfigurator: React.FC<BacktestConfiguratorProps> = ({
                 </div>
             )}
 
-            <button
+            <Button
+                type="button"
                 onClick={() => { void handleRun(); }}
                 disabled={running}
-                className={`w-full rounded-xl px-4 py-2 text-xs font-black uppercase tracking-wider transition-colors ${running
-                    ? 'bg-zinc-800 text-zinc-500 cursor-not-allowed'
-                    : 'bg-emerald-400 text-black hover:bg-emerald-300'
-                    }`}
+                className="w-full"
+                size="lg"
             >
                 {running ? 'Running Backtest...' : 'Run Backtest'}
-            </button>
+            </Button>
         </div>
     );
 };