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

---
 .../components/BacktestComparePanel.tsx       | 154 +++++++++---------
 1 file changed, 81 insertions(+), 73 deletions(-)

diff --git a/web/src/backtest/components/BacktestComparePanel.tsx b/web/src/backtest/components/BacktestComparePanel.tsx
index 6bb52bc..d5db07a 100644
--- a/web/src/backtest/components/BacktestComparePanel.tsx
+++ b/web/src/backtest/components/BacktestComparePanel.tsx
@@ -9,6 +9,7 @@ import type {
 } from '../types';
 import { parseSymbolsInput, toDateInputValue } from '../utils';
 import { BacktestResultsDashboard } from './BacktestResultsDashboard';
+import { Button, Checkbox, Input, Select } from '../../components/ui/Primitives';
 
 type SourceType = 'csv' | 'json' | 'replay' | 'kraken';
 
@@ -256,27 +257,30 @@ export const BacktestComparePanel: React.FC<BacktestComparePanelProps> = ({ prof
                     <div className="flex items-center justify-between mb-2">
                         <span className="text-[11px] font-bold uppercase tracking-wider text-zinc-300">Profiles</span>
                         <div className="flex gap-2">
-                            <button
+                            <Button
                                 type="button"
-                                className="rounded-md bg-white/10 px-2 py-1 text-[10px] font-bold uppercase tracking-wide text-zinc-300 hover:bg-white/20"
+                                variant="ghost"
+                                size="sm"
+                                className="min-h-7 px-2 text-[10px]"
                                 onClick={() => setSelectedProfileIds(profiles.map((profile) => profile.id))}
                             >
                                 Select All
-                            </button>
-                            <button
+                            </Button>
+                            <Button
                                 type="button"
-                                className="rounded-md bg-white/10 px-2 py-1 text-[10px] font-bold uppercase tracking-wide text-zinc-300 hover:bg-white/20"
+                                variant="ghost"
+                                size="sm"
+                                className="min-h-7 px-2 text-[10px]"
                                 onClick={() => setSelectedProfileIds([])}
                             >
                                 Clear
-                            </button>
+                            </Button>
                         </div>
                     </div>
                     <div className="grid grid-cols-1 md:grid-cols-2 gap-2 max-h-[180px] overflow-auto">
                         {profiles.map((profile) => (
                             <label key={profile.id} className="flex items-center gap-2 rounded-lg border border-white/10 bg-zinc-900/60 px-2 py-2">
-                                <input
-                                    type="checkbox"
+                                <Checkbox
                                     checked={selectedProfileIds.includes(profile.id)}
                                     onChange={(event) => toggleProfile(profile.id, event.target.checked)}
                                 />
@@ -290,20 +294,21 @@ export const BacktestComparePanel: React.FC<BacktestComparePanelProps> = ({ prof
                 <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">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"
-                        >
-                            <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">Historical Data Type</span>
-                        <select
+                        <Select
                             value={sourceType}
                             onChange={(event) => {
                                 const nextType = event.target.value as SourceType;
@@ -316,126 +321,131 @@ export const BacktestComparePanel: React.FC<BacktestComparePanelProps> = ({ prof
                                     setSourceName('');
                                 }
                             }}
-                            className="w-full rounded-lg border border-white/10 bg-zinc-900 px-3 py-2 text-xs text-white"
-                        >
-                            <option value="kraken">Kraken Historical API</option>
-                            <option value="csv">CSV</option>
-                            <option value="json">JSON</option>
-                            <option value="replay">Replay JSON</option>
-                        </select>
+                            controlSize="sm"
+                            options={[
+                                { value: 'kraken', label: 'Kraken Historical API' },
+                                { value: 'csv', label: 'CSV' },
+                                { value: 'json', label: 'JSON' },
+                                { value: 'replay', label: 'Replay JSON' },
+                            ]}
+                        />
                     </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"
+                            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"
+                            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"
+                            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"
+                            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"
+                            controlSize="sm"
                         />
                     </label>
                     <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"
-                        >
-                            <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"
-                        >
-                            <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"
-                        >
-                            <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>
                 </div>
 
                 <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">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"
-                        >
-                            <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>
                     {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"
+                                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) => {
@@ -448,7 +458,7 @@ export const BacktestComparePanel: React.FC<BacktestComparePanelProps> = ({ prof
                                         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"
+                                controlSize="sm"
                             />
                         </label>
                     )}
@@ -456,8 +466,7 @@ export const BacktestComparePanel: React.FC<BacktestComparePanelProps> = ({ prof
 
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                     <label className="flex items-center gap-2 text-xs text-zinc-300">
-                        <input
-                            type="checkbox"
+                        <Checkbox
                             checked={useNormalizedCapital}
                             onChange={(event) => setUseNormalizedCapital(event.target.checked)}
                         />
@@ -468,12 +477,12 @@ export const BacktestComparePanel: React.FC<BacktestComparePanelProps> = ({ prof
                             {useNormalizedCapital ? 'Normalized Capital (USD)' : 'Capital Source'}
                         </span>
                         {useNormalizedCapital ? (
-                            <input
+                            <Input
                                 type="number"
                                 min={1}
                                 value={normalizedCapitalUsd}
                                 onChange={(event) => setNormalizedCapitalUsd(Number(event.target.value))}
-                                className="w-full rounded-lg border border-white/10 bg-zinc-900 px-3 py-2 text-xs text-white"
+                                controlSize="sm"
                             />
                         ) : (
                             <div className="rounded-lg border border-white/10 bg-zinc-900 px-3 py-2 text-xs text-zinc-400">
@@ -493,18 +502,17 @@ export const BacktestComparePanel: React.FC<BacktestComparePanelProps> = ({ prof
                     </div>
                 )}
 
-                <button
+                <Button
+                    type="button"
                     onClick={() => { void runCompare(); }}
                     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-indigo-400 text-black hover:bg-indigo-300'
-                        }`}
+                    size="lg"
+                    className="w-full"
                 >
                     {running
                         ? `Running compare... (${runningIndex}/${selectedProfiles.length})`
                         : 'Run Strategy Comparison'}
-                </button>
+                </Button>
             </div>
 
             {rows.length > 0 && (