feat: make trade history expandable with button

src/frontend/src/routes/bot/[id]/backtest/+page.svelte

@@ -16,7 +16,8 @@
 	let isRunning = $state(false);
 	let selectedBacktest = $state<Backtest | null>(null);
 	
-	// Trades modal state
+	// Expandable trades state
+	let expandedTrades = $state<Set<string>>(new Set());
 	
 	onMount(async () => {
 		// Set default dates - yesterday only (1 day range for fast testing)
@@ -125,6 +126,15 @@
 			selectedBacktest = backtest;
 		}
 	}
+
+	function toggleTrades(backtestId: string) {
+		if (expandedTrades.has(backtestId)) {
+			expandedTrades.delete(backtestId);
+		} else {
+			expandedTrades.add(backtestId);
+		}
+		expandedTrades = new Set(expandedTrades);  // Trigger reactivity
+	}
 </script>
 
 <svelte:head>
@@ -229,8 +239,11 @@
 									</div>
 								</div>
 								{#if backtest.result.trades && backtest.result.trades.length > 0}
+									<button class="btn-toggle-trades" onclick={() => toggleTrades(backtest.id)}>
+										{expandedTrades.has(backtest.id) ? 'Hide' : 'Show'} Trade History ({backtest.result.trades.length})
+									</button>
+									{#if expandedTrades.has(backtest.id)}
 										<div class="trades-inline">
-										<h4>Trade History</h4>
 											<div class="trades-list">
 												{#each backtest.result.trades as trade}
 													<div class="trade-item">
@@ -246,6 +259,7 @@
 										</div>
 									{/if}
 								{/if}
+							{/if}
 							{#if backtest.status === 'running'}
 								<div class="progress-container">
 									<div class="progress-bar">
@@ -617,6 +631,22 @@
 		margin-left: auto;
 	}
 
+	.btn-toggle-trades {
+		margin-top: 0.75rem;
+		padding: 0.5rem 1rem;
+		background: rgba(102, 126, 234, 0.1);
+		border: 1px solid rgba(102, 126, 234, 0.3);
+		border-radius: 6px;
+		color: #667eea;
+		font-size: 0.85rem;
+		cursor: pointer;
+		transition: all 0.2s;
+	}
+
+	.btn-toggle-trades:hover {
+		background: rgba(102, 126, 234, 0.2);
+	}
+
 	.backtest-header {
 		display: flex;
 		justify-content: space-between;