Fix: Light mode, reset btn, history=settled only

app/paper/page.js

@@ -1,15 +1,16 @@
 'use client';
 import { useState, useEffect } from 'react';
 
-const GREEN = '#28CC95';
-const RED = '#FF6B6B';
-const BLUE = '#4A90D9';
+const GREEN = '#16A34A';
+const RED = '#DC2626';
+const BLUE = '#2563EB';
 
 export default function PaperDashboard() {
   const [data, setData] = useState(null);
   const [trades, setTrades] = useState({});
   const [loading, setLoading] = useState(true);
   const [activeStrat, setActiveStrat] = useState(null);
+  const [resetting, setResetting] = useState(false);
 
   useEffect(() => {
     const fetchState = async () => {
@@ -31,7 +32,6 @@ export default function PaperDashboard() {
     return () => clearInterval(interval);
   }, [activeStrat]);
 
-  // Fetch trades for active strategy
   useEffect(() => {
     if (!activeStrat) return;
 
@@ -50,10 +50,22 @@ export default function PaperDashboard() {
     return () => clearInterval(interval);
   }, [activeStrat]);
 
+  const handleReset = async () => {
+    if (!confirm('Reset ALL paper trading data? This clears all history, stats, and open positions for every strategy.')) return;
+    setResetting(true);
+    try {
+      await fetch('/api/reset', { method: 'POST' });
+      setTrades({});
+    } catch (e) {
+      console.error('Reset error:', e);
+    }
+    setTimeout(() => setResetting(false), 2000);
+  };
+
   if (loading) {
     return (
-      <div className="min-h-screen bg-[#0a0a0a] flex items-center justify-center">
-        <div className="text-[#28CC95] text-lg animate-pulse">Loading Paper Trading...</div>
+      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+        <div className="text-green-600 text-lg animate-pulse">Loading Paper Trading...</div>
       </div>
     );
   }
@@ -66,41 +78,50 @@ export default function PaperDashboard() {
   const activeTrades = trades[activeStrat] || [];
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a] text-white font-sans pb-20">
+    <div className="min-h-screen bg-gray-50 text-gray-900 font-sans pb-20">
       {/* Header */}
-      <header className="sticky top-0 z-50 bg-[#0a0a0a]/95 backdrop-blur border-b border-white/10 px-4 py-3">
+      <header className="sticky top-0 z-50 bg-white/95 backdrop-blur border-b border-gray-200 px-4 py-3 shadow-sm">
         <div className="flex items-center justify-between max-w-lg mx-auto">
           <div className="flex items-center gap-2">
             <h1 className="text-lg font-bold" style={{ color: GREEN }}>Kalbot</h1>
-            <span className="text-xs bg-yellow-500/20 text-yellow-400 px-2 py-0.5 rounded-full font-medium">PAPER</span>
+            <span className="text-xs bg-amber-100 text-amber-700 px-2 py-0.5 rounded-full font-medium">PAPER</span>
           </div>
-          <div className="flex items-center gap-2">
-            <span className={`w-2 h-2 rounded-full ${data?.lastUpdate ? 'bg-green-400 animate-pulse' : 'bg-red-500'}`} />
-            <span className="text-xs text-gray-400">
+          <div className="flex items-center gap-3">
+            <button
+              onClick={handleReset}
+              disabled={resetting}
+              className="text-[10px] px-2 py-1 rounded bg-red-50 text-red-600 border border-red-200 hover:bg-red-100 transition-colors disabled:opacity-50 font-medium"
+            >
+              {resetting ? 'Resetting...' : '🗑 Reset All'}
+            </button>
+            <div className="flex items-center gap-1.5">
+              <span className={`w-2 h-2 rounded-full ${data?.lastUpdate ? 'bg-green-500 animate-pulse' : 'bg-red-500'}`} />
+              <span className="text-xs text-gray-500">
                 {data?.lastUpdate ? 'Live' : 'Offline'}
               </span>
             </div>
           </div>
+        </div>
       </header>
 
       <main className="max-w-lg mx-auto px-4 pt-4 space-y-4">
-        {/* Market Card (compact) */}
+        {/* Market Card */}
         <MarketCardCompact market={market} />
 
         {/* Strategy Tabs */}
-        <div className="flex gap-1 bg-white/5 rounded-lg p-1 overflow-x-auto">
+        <div className="flex gap-1 bg-gray-100 rounded-lg p-1 overflow-x-auto">
           {strategies.map(s => (
             <button
               key={s.name}
               onClick={() => setActiveStrat(s.name)}
               className={`flex-shrink-0 py-2 px-3 rounded-md text-xs font-medium transition-all whitespace-nowrap ${
                 activeStrat === s.name
-                  ? 'bg-white/10 text-white'
-                  : 'text-gray-500 hover:text-gray-300'
+                  ? 'bg-white text-gray-900 shadow-sm'
+                  : 'text-gray-500 hover:text-gray-700'
               }`}
             >
               <span className={`inline-block w-1.5 h-1.5 rounded-full mr-1.5 ${
-                s.enabled && !s.paused ? 'bg-green-400' : 'bg-red-500'
+                s.enabled && !s.paused ? 'bg-green-500' : 'bg-red-500'
               }`} />
               {s.name}
             </button>
@@ -121,8 +142,8 @@ export default function PaperDashboard() {
       </main>
 
       {/* Worker Uptime */}
-      <div className="fixed bottom-0 left-0 right-0 bg-[#0a0a0a]/95 backdrop-blur border-t border-white/5 py-2 px-4">
-        <div className="max-w-lg mx-auto flex justify-between text-xs text-gray-600">
+      <div className="fixed bottom-0 left-0 right-0 bg-white/95 backdrop-blur border-t border-gray-200 py-2 px-4">
+        <div className="max-w-lg mx-auto flex justify-between text-xs text-gray-400">
           <span>Worker: {formatUptime(data?.workerUptime)}</span>
           <span>{data?.lastUpdate ? new Date(data.lastUpdate).toLocaleTimeString() : 'never'}</span>
         </div>
@@ -134,8 +155,8 @@ export default function PaperDashboard() {
 function MarketCardCompact({ market }) {
   if (!market) {
     return (
-      <div className="bg-white/5 rounded-xl p-4 border border-white/10">
-        <p className="text-gray-500 text-center text-sm">No active market — waiting...</p>
+      <div className="bg-white rounded-xl p-4 border border-gray-200 shadow-sm">
+        <p className="text-gray-400 text-center text-sm">No active market — waiting...</p>
       </div>
     );
   }
@@ -143,15 +164,15 @@ function MarketCardCompact({ market }) {
   const timeLeft = market.closeTime ? getTimeLeft(market.closeTime) : null;
 
   return (
-    <div className="bg-white/5 rounded-xl p-4 border border-white/10">
+    <div className="bg-white rounded-xl p-4 border border-gray-200 shadow-sm">
       <div className="flex items-center justify-between mb-3">
         <div>
-          <h2 className="font-bold text-sm">BTC Up or Down</h2>
-          <p className="text-[10px] text-gray-500">15 min</p>
+          <h2 className="font-bold text-sm text-gray-900">BTC Up or Down</h2>
+          <p className="text-[10px] text-gray-400">15 min</p>
         </div>
         <div className="flex items-center gap-2">
           {timeLeft && (
-            <span className="text-[10px] bg-white/10 px-2 py-0.5 rounded-full text-gray-300">⏱ {timeLeft}</span>
+            <span className="text-[10px] bg-gray-100 px-2 py-0.5 rounded-full text-gray-600">⏱ {timeLeft}</span>
           )}
           <span className="text-lg">₿</span>
         </div>
@@ -159,24 +180,24 @@ function MarketCardCompact({ market }) {
       <div className="flex items-center gap-3">
         <div className="flex-1">
           <div className="flex justify-between text-xs mb-1">
-            <span>Up</span>
-            <span style={{ color: GREEN }}>{market.yesPct}%</span>
+            <span className="text-gray-600">Up</span>
+            <span style={{ color: GREEN }} className="font-medium">{market.yesPct}%</span>
           </div>
-          <div className="w-full bg-white/10 rounded-full h-1.5">
+          <div className="w-full bg-gray-100 rounded-full h-1.5">
             <div className="h-1.5 rounded-full transition-all duration-500" style={{ width: `${market.yesPct}%`, backgroundColor: GREEN }} />
           </div>
         </div>
         <div className="flex-1">
           <div className="flex justify-between text-xs mb-1">
-            <span>Down</span>
-            <span style={{ color: BLUE }}>{market.noPct}%</span>
+            <span className="text-gray-600">Down</span>
+            <span style={{ color: BLUE }} className="font-medium">{market.noPct}%</span>
           </div>
-          <div className="w-full bg-white/10 rounded-full h-1.5">
+          <div className="w-full bg-gray-100 rounded-full h-1.5">
             <div className="h-1.5 rounded-full transition-all duration-500" style={{ width: `${market.noPct}%`, backgroundColor: BLUE }} />
           </div>
         </div>
       </div>
-      <div className="flex justify-between text-[10px] text-gray-600 mt-2">
+      <div className="flex justify-between text-[10px] text-gray-400 mt-2">
         <span>${(market.volume || 0).toLocaleString()} vol</span>
         <span className="font-mono">{market.ticker}</span>
       </div>
@@ -191,13 +212,13 @@ function StrategyDetailView({ strategy, stats, trades }) {
   return (
     <div className="space-y-3">
       {/* Strategy Stats */}
-      <div className="bg-white/5 rounded-xl p-4 border border-white/10">
+      <div className="bg-white rounded-xl p-4 border border-gray-200 shadow-sm">
         <div className="flex items-center justify-between mb-3">
           <div className="flex items-center gap-2">
-            <span className={`w-2 h-2 rounded-full ${strategy.enabled && !strategy.paused ? 'bg-green-400' : 'bg-red-500'}`} />
-            <h3 className="font-bold text-sm capitalize">{strategy.name}</h3>
+            <span className={`w-2 h-2 rounded-full ${strategy.enabled && !strategy.paused ? 'bg-green-500' : 'bg-red-500'}`} />
+            <h3 className="font-bold text-sm capitalize text-gray-900">{strategy.name}</h3>
           </div>
-          <span className="text-[10px] px-2 py-0.5 rounded-full bg-yellow-500/20 text-yellow-400">{strategy.mode}</span>
+          <span className="text-[10px] px-2 py-0.5 rounded-full bg-amber-100 text-amber-700 font-medium">{strategy.mode}</span>
         </div>
 
         <div className="grid grid-cols-4 gap-2 mb-3">
@@ -208,18 +229,17 @@ function StrategyDetailView({ strategy, stats, trades }) {
         </div>
 
         {/* Strategy Config */}
-        <div className="space-y-1 text-xs text-gray-400 border-t border-white/5 pt-3">
+        <div className="space-y-1 text-xs text-gray-500 border-t border-gray-100 pt-3">
           {strategy.config && Object.entries(strategy.config).map(([k, v]) => (
             <div key={k} className="flex justify-between">
               <span>{k}</span>
-              <span className="text-gray-300">{typeof v === 'number' ? v : String(v)}</span>
+              <span className="text-gray-700">{typeof v === 'number' ? v : String(v)}</span>
             </div>
           ))}
-          {/* Strategy-specific extra fields */}
           {strategy.consecutiveLosses !== undefined && (
-            <div className="flex justify-between mt-1 pt-1 border-t border-white/5">
+            <div className="flex justify-between mt-1 pt-1 border-t border-gray-100">
               <span>Consecutive Losses</span>
-              <span className={strategy.consecutiveLosses > 0 ? 'text-red-400' : 'text-gray-300'}>
+              <span className={strategy.consecutiveLosses > 0 ? 'text-red-600' : 'text-gray-700'}>
                 {strategy.consecutiveLosses}
               </span>
             </div>
@@ -227,50 +247,50 @@ function StrategyDetailView({ strategy, stats, trades }) {
           {strategy.currentBetSize !== undefined && (
             <div className="flex justify-between">
               <span>Next Bet</span>
-              <span className="text-gray-300">${strategy.currentBetSize}</span>
+              <span className="text-gray-700">${strategy.currentBetSize}</span>
             </div>
           )}
           {strategy.round !== undefined && (
             <div className="flex justify-between">
               <span>Cycle Round</span>
-              <span className="text-gray-300">{strategy.round}/{strategy.maxRounds}</span>
+              <span className="text-gray-700">{strategy.round}/{strategy.maxRounds}</span>
             </div>
           )}
           {strategy.cycleWins !== undefined && (
             <div className="flex justify-between">
               <span>Cycles Won/Lost</span>
-              <span className="text-gray-300">{strategy.cycleWins}W / {strategy.cycleLosses}L</span>
+              <span className="text-gray-700">{strategy.cycleWins}W / {strategy.cycleLosses}L</span>
             </div>
           )}
           {strategy.cycleWinRate !== undefined && (
             <div className="flex justify-between">
               <span>Cycle Win Rate</span>
-              <span className={strategy.cycleWinRate >= 50 ? 'text-green-400' : 'text-red-400'}>
+              <span className={strategy.cycleWinRate >= 50 ? 'text-green-600' : 'text-red-600'}>
                 {strategy.cycleWinRate}%
               </span>
             </div>
           )}
           {strategy.paused && (
-            <div className="text-red-400 font-medium mt-1">⚠️ PAUSED — max losses reached</div>
+            <div className="text-red-600 font-medium mt-1">⚠️ PAUSED — max losses reached</div>
           )}
         </div>
       </div>
 
-      {/* Open Positions for this strategy */}
+      {/* Open Positions */}
       {s.openPositions.length > 0 && (
         <div>
-          <h4 className="text-[10px] text-gray-500 uppercase tracking-wider mb-2">Open Positions</h4>
+          <h4 className="text-[10px] text-gray-400 uppercase tracking-wider mb-2 font-bold">Open Positions ({s.openPositions.length})</h4>
           {s.openPositions.map((t, i) => <TradeRow key={i} trade={t} isOpen />)}
         </div>
       )}
 
-      {/* Trade History for this strategy */}
+      {/* Trade History — only settled trades from DB */}
       <div>
-        <h4 className="text-[10px] text-gray-500 uppercase tracking-wider mb-2">
+        <h4 className="text-[10px] text-gray-400 uppercase tracking-wider mb-2 font-bold">
           Trade History ({trades.length})
         </h4>
         {trades.length === 0 ? (
-          <p className="text-gray-600 text-xs text-center py-4">No trades yet. Strategy is watching...</p>
+          <p className="text-gray-400 text-xs text-center py-4">No settled trades yet.</p>
         ) : (
           trades.map((t, i) => <TradeRow key={i} trade={t} />)
         )}
@@ -289,22 +309,21 @@ function AllStrategiesOverview({ paperByStrategy, strategies }) {
 
   if (!entries.length) return null;
 
-  // Sort by PnL descending
   entries.sort((a, b) => b.stats.totalPnL - a.stats.totalPnL);
 
   return (
-    <div className="bg-white/5 rounded-xl border border-white/10 overflow-hidden">
-      <div className="px-4 py-3 border-b border-white/5">
-        <h3 className="text-xs text-gray-400 uppercase tracking-wider font-bold">📊 Strategy Leaderboard</h3>
+    <div className="bg-white rounded-xl border border-gray-200 overflow-hidden shadow-sm">
+      <div className="px-4 py-3 border-b border-gray-100">
+        <h3 className="text-xs text-gray-500 uppercase tracking-wider font-bold">📊 Strategy Leaderboard</h3>
       </div>
       {entries.map((e, i) => {
         const pnlColor = e.stats.totalPnL >= 0 ? GREEN : RED;
         return (
-          <div key={e.name} className={`flex items-center justify-between px-4 py-3 ${i < entries.length - 1 ? 'border-b border-white/5' : ''}`}>
+          <div key={e.name} className={`flex items-center justify-between px-4 py-3 ${i < entries.length - 1 ? 'border-b border-gray-100' : ''}`}>
             <div className="flex items-center gap-2">
-              <span className="text-xs text-gray-600 w-4">{i + 1}.</span>
-              <span className={`w-1.5 h-1.5 rounded-full ${e.enabled && !e.paused ? 'bg-green-400' : 'bg-red-500'}`} />
-              <span className="text-sm font-medium capitalize">{e.name}</span>
+              <span className="text-xs text-gray-400 w-4">{i + 1}.</span>
+              <span className={`w-1.5 h-1.5 rounded-full ${e.enabled && !e.paused ? 'bg-green-500' : 'bg-red-500'}`} />
+              <span className="text-sm font-medium capitalize text-gray-800">{e.name}</span>
             </div>
             <div className="flex items-center gap-4 text-xs">
               <span className="text-gray-400">{e.stats.totalTrades} trades</span>
@@ -322,39 +341,43 @@ function AllStrategiesOverview({ paperByStrategy, strategies }) {
 
 function StatBox({ label, value, color }) {
   return (
-    <div className="bg-white/5 rounded-lg p-2 border border-white/5 text-center">
-      <p className="text-[9px] text-gray-500 uppercase tracking-wider">{label}</p>
-      <p className="text-xs font-bold mt-0.5" style={color ? { color } : {}}>{value}</p>
+    <div className="bg-gray-50 rounded-lg p-2 border border-gray-100 text-center">
+      <p className="text-[9px] text-gray-400 uppercase tracking-wider">{label}</p>
+      <p className="text-xs font-bold mt-0.5" style={color ? { color } : { color: '#111827' }}>{value}</p>
     </div>
   );
 }
 
 function TradeRow({ trade, isOpen }) {
   const won = trade.pnl > 0;
-  const pnlColor = trade.pnl == null ? 'text-gray-400' : won ? 'text-green-400' : 'text-red-400';
+  const pnlColor = trade.pnl == null ? 'text-gray-400' : won ? 'text-green-600' : 'text-red-600';
 
   return (
-    <div className="bg-white/5 rounded-lg p-3 border border-white/5 mb-2">
+    <div className="bg-white rounded-lg p-3 border border-gray-200 mb-2 shadow-sm">
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2">
           {isOpen ? (
-            <span className="w-2 h-2 rounded-full bg-yellow-400 animate-pulse" />
+            <span className="w-2 h-2 rounded-full bg-amber-400 animate-pulse" />
           ) : (
             <span>{won ? '✅' : '❌'}</span>
           )}
-          <span className="text-sm font-medium capitalize">{trade.side}</span>
-          <span className="text-xs text-gray-500">@ {trade.price}¢</span>
-          <span className="text-[10px] text-gray-600">${trade.size}</span>
+          <span className="text-sm font-medium capitalize text-gray-900">{trade.side}</span>
+          <span className="text-xs text-gray-400">@ {trade.price}¢</span>
+          <span className="text-[10px] text-gray-400">${trade.size}</span>
         </div>
         <span className={`text-sm font-bold ${pnlColor}`}>
           {trade.pnl != null ? `${trade.pnl >= 0 ? '+' : ''}$${trade.pnl}` : 'open'}
         </span>
       </div>
       <div className="flex justify-between mt-1">
-        <span className="text-[10px] text-gray-600">{trade.reason}</span>
+        <span className="text-[10px] text-gray-400">{trade.reason}</span>
       </div>
-      <div className="flex justify-end">
-        <span className="text-[10px] text-gray-600">
+      <div className="flex justify-between items-center mt-0.5">
+        {trade.result && !isOpen && (
+          <span className="text-[10px] text-gray-400">Result: {trade.result}</span>
+        )}
+        {!trade.result && <span />}
+        <span className="text-[10px] text-gray-400">
           {trade.entryTime ? new Date(trade.entryTime).toLocaleTimeString() : ''}
         </span>
       </div>