🔄 Restore automation-v2 page to correct version

Fixed issue where container restart showed older version missing:
- ✅ Restored balancePercentage field with interactive slider
- ✅ Restored analysis countdown timer functionality
- ✅ Restored detailed progress tracking
- ✅ Restored individual timeframe results display
- ❌ Removed incorrect riskPercentage field

The page now has the proper position sizing slider and
all timer/progress features as expected.

app/automation-v2/page.js

@@ -20,16 +20,17 @@ export default function AutomationPageV2() {
     timeframe: '1h', // Primary timeframe for backwards compatibility
     selectedTimeframes: ['60'], // Multi-timeframe support
     tradingAmount: 100,
+    balancePercentage: 50, // Default to 50% of available balance
     maxLeverage: 5,
     stopLossPercent: 2,
-    takeProfitPercent: 6,
+    takeProfitPercent: 6
-    riskPercentage: 2
   })
 
   const [status, setStatus] = useState(null)
   const [balance, setBalance] = useState(null)
   const [positions, setPositions] = useState([])
   const [loading, setLoading] = useState(false)
+  const [nextAnalysisCountdown, setNextAnalysisCountdown] = useState(0)
 
   useEffect(() => {
     fetchStatus()
@@ -44,6 +45,51 @@ export default function AutomationPageV2() {
     return () => clearInterval(interval)
   }, [])
 
+  // Timer effect for countdown
+  useEffect(() => {
+    let countdownInterval = null
+    
+    if (status?.isActive && status?.nextAnalysisIn > 0) {
+      setNextAnalysisCountdown(status.nextAnalysisIn)
+      
+      countdownInterval = setInterval(() => {
+        setNextAnalysisCountdown(prev => {
+          if (prev <= 1) {
+            // Refresh status when timer reaches 0
+            fetchStatus()
+            return 0
+          }
+          return prev - 1
+        })
+      }, 1000)
+    } else {
+      setNextAnalysisCountdown(0)
+    }
+    
+    return () => {
+      if (countdownInterval) {
+        clearInterval(countdownInterval)
+      }
+    }
+  }, [status?.nextAnalysisIn, status?.isActive])
+
+  // Helper function to format countdown time
+  const formatCountdown = (seconds) => {
+    if (seconds <= 0) return 'Analyzing now...'
+    
+    const hours = Math.floor(seconds / 3600)
+    const minutes = Math.floor((seconds % 3600) / 60)
+    const secs = seconds % 60
+    
+    if (hours > 0) {
+      return `${hours}h ${minutes}m ${secs}s`
+    } else if (minutes > 0) {
+      return `${minutes}m ${secs}s`
+    } else {
+      return `${secs}s`
+    }
+  }
+
   const toggleTimeframe = (timeframe) => {
     setConfig(prev => ({
       ...prev,
@@ -242,7 +288,7 @@ export default function AutomationPageV2() {
             </div>
 
             {/* Symbol and Position Size */}
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
               <div>
                 <label className="block text-sm font-medium text-gray-300 mb-2">Symbol</label>
                 <select
@@ -261,51 +307,39 @@ export default function AutomationPageV2() {
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-300 mb-2">Position Size ($)</label>
+                <label className="block text-sm font-medium text-gray-300 mb-2">
+                  Balance to Use: {config.balancePercentage}% 
+                  {balance && ` ($${(parseFloat(balance.availableBalance) * config.balancePercentage / 100).toFixed(2)})`}
+                </label>
                 <input
-                  type="number"
+                  type="range"
-                  className="w-full p-3 bg-gray-700 border border-gray-600 rounded-lg text-white focus:border-blue-500"
+                  className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"
+                  style={{
+                    background: `linear-gradient(to right, #3b82f6 0%, #3b82f6 ${config.balancePercentage}%, #374151 ${config.balancePercentage}%, #374151 100%)`
+                  }}
                   min="10"
-                  step="10"
+                  max="100"
-                  value={config.tradingAmount}
+                  step="5"
-                  onChange={(e) => setConfig({...config, tradingAmount: parseFloat(e.target.value)})}
+                  value={config.balancePercentage}
+                  onChange={(e) => {
+                    const percentage = parseFloat(e.target.value);
+                    const newAmount = balance ? (parseFloat(balance.availableBalance) * percentage / 100) : 100;
+                    setConfig({
+                      ...config, 
+                      balancePercentage: percentage,
+                      tradingAmount: Math.round(newAmount)
+                    });
+                  }}
                   disabled={status?.isActive}
                 />
-                {balance && (
+                <div className="flex justify-between text-xs text-gray-400 mt-1">
-                  <p className="text-xs text-gray-400 mt-1">
+                  <span>10%</span>
-                    Available: ${parseFloat(balance.availableBalance).toFixed(2)} • Using {((config.tradingAmount / balance.availableBalance) * 100).toFixed(1)}% of balance
+                  <span>50%</span>
-                  </p>
+                  <span>100%</span>
-                )}
+                </div>
                 {balance && config.maxLeverage > 1 && (
                   <p className="text-xs text-green-400 mt-1">
-                    With {config.maxLeverage}x leverage: ${(config.tradingAmount * config.maxLeverage).toFixed(2)} position size
+                    With {config.maxLeverage}x leverage: ${(config.tradingAmount * config.maxLeverage).toFixed(2)} position exposure
-                  </p>
-                )}
-              </div>
-
-              <div>
-                <label className="block text-sm font-medium text-gray-300 mb-2">Auto-Size (%)</label>
-                <select
-                  className="w-full p-3 bg-gray-700 border border-gray-600 rounded-lg text-white focus:border-blue-500"
-                  onChange={(e) => {
-                    if (balance && e.target.value) {
-                      const percentage = parseFloat(e.target.value);
-                      const autoAmount = (balance.availableBalance * percentage / 100);
-                      setConfig({...config, tradingAmount: Math.round(autoAmount)});
-                    }
-                  }}
-                  disabled={status?.isActive || !balance}
-                >
-                  <option value="">Manual</option>
-                  <option value="10">10% of balance</option>
-                  <option value="25">25% of balance</option>
-                  <option value="50">50% of balance</option>
-                  <option value="75">75% of balance</option>
-                  <option value="90">90% of balance</option>
-                </select>
-                {balance && (
-                  <p className="text-xs text-cyan-400 mt-1">
-                    Quick calculation based on ${parseFloat(balance.availableBalance).toFixed(2)} balance
                   </p>
                 )}
               </div>
@@ -420,20 +454,6 @@ export default function AutomationPageV2() {
                   disabled={status?.isActive}
                 />
               </div>
-
-              <div>
-                <label className="block text-sm font-medium text-gray-300 mb-2">Risk Per Trade (%)</label>
-                <input
-                  type="number"
-                  className="w-full p-3 bg-gray-700 border border-gray-600 rounded-lg text-white focus:border-blue-500"
-                  min="0.5"
-                  max="10"
-                  step="0.5"
-                  value={config.riskPercentage}
-                  onChange={(e) => setConfig({...config, riskPercentage: parseFloat(e.target.value)})}
-                  disabled={status?.isActive}
-                />
-              </div>
             </div>
           </div>
         </div>
@@ -524,6 +544,172 @@ export default function AutomationPageV2() {
             )}
           </div>
 
+          {/* Analysis Progress */}
+          {status?.analysisProgress && (
+            <div className="bg-gray-800 p-6 rounded-lg border border-gray-700">
+              <div className="flex items-center justify-between mb-4">
+                <h3 className="text-xl font-bold text-white">Analysis Progress</h3>
+                <div className="text-xs text-blue-400">
+                  Session: {status.analysisProgress.sessionId.split('-').pop()}
+                </div>
+              </div>
+              <div className="space-y-4">
+                {/* Overall Progress */}
+                <div className="flex items-center justify-between">
+                  <span className="text-gray-300">Step {status.analysisProgress.currentStep} of {status.analysisProgress.totalSteps}</span>
+                  <span className="text-blue-400 font-semibold">
+                    {Math.round((status.analysisProgress.currentStep / status.analysisProgress.totalSteps) * 100)}%
+                  </span>
+                </div>
+                <div className="bg-gray-700 rounded-full h-2">
+                  <div 
+                    className="bg-blue-500 h-2 rounded-full transition-all duration-500"
+                    style={{
+                      width: `${(status.analysisProgress.currentStep / status.analysisProgress.totalSteps) * 100}%`
+                    }}
+                  ></div>
+                </div>
+                
+                {/* Timeframe Progress */}
+                {status.analysisProgress.timeframeProgress && (
+                  <div className="p-3 bg-blue-600/10 border border-blue-600/30 rounded-lg">
+                    <div className="flex items-center justify-between text-sm">
+                      <span className="text-blue-400">
+                        Analyzing {status.analysisProgress.timeframeProgress.currentTimeframe || 'timeframes'}
+                      </span>
+                      <span className="text-blue-300">
+                        {status.analysisProgress.timeframeProgress.current}/{status.analysisProgress.timeframeProgress.total}
+                      </span>
+                    </div>
+                  </div>
+                )}
+                
+                {/* Detailed Steps */}
+                <div className="space-y-2">
+                  {status.analysisProgress.steps.map((step, index) => (
+                    <div key={step.id} className={`flex items-center space-x-3 p-2 rounded-lg ${
+                      step.status === 'active' ? 'bg-blue-600/20 border border-blue-600/30' :
+                      step.status === 'completed' ? 'bg-green-600/20 border border-green-600/30' :
+                      step.status === 'error' ? 'bg-red-600/20 border border-red-600/30' :
+                      'bg-gray-700/30'
+                    }`}>
+                      {/* Status Icon */}
+                      <div className={`w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold ${
+                        step.status === 'active' ? 'bg-blue-500 text-white animate-pulse' :
+                        step.status === 'completed' ? 'bg-green-500 text-white' :
+                        step.status === 'error' ? 'bg-red-500 text-white' :
+                        'bg-gray-600 text-gray-300'
+                      }`}>
+                        {step.status === 'active' ? '⏳' :
+                         step.status === 'completed' ? '✓' :
+                         step.status === 'error' ? '✗' :
+                         index + 1}
+                      </div>
+                      
+                      {/* Step Info */}
+                      <div className="flex-1">
+                        <div className={`font-semibold text-sm ${
+                          step.status === 'active' ? 'text-blue-300' :
+                          step.status === 'completed' ? 'text-green-300' :
+                          step.status === 'error' ? 'text-red-300' :
+                          'text-gray-400'
+                        }`}>
+                          {step.title}
+                        </div>
+                        <div className="text-xs text-gray-400">
+                          {step.details || step.description}
+                        </div>
+                      </div>
+                      
+                      {/* Duration */}
+                      {step.duration && (
+                        <div className="text-xs text-gray-500">
+                          {(step.duration / 1000).toFixed(1)}s
+                        </div>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Analysis Timer */}
+          {status?.isActive && !status?.analysisProgress && (
+            <div className="bg-gray-800 p-6 rounded-lg border border-gray-700">
+              <div className="flex items-center justify-between mb-4">
+                <h3 className="text-xl font-bold text-white">Analysis Timer</h3>
+                <div className="text-xs text-gray-400">
+                  Cycle #{status.currentCycle || 0}
+                </div>
+              </div>
+              <div className="space-y-3">
+                <div className="text-center">
+                  <div className="text-3xl font-bold text-blue-400 mb-2">
+                    {formatCountdown(nextAnalysisCountdown)}
+                  </div>
+                  <div className="text-sm text-gray-400">
+                    {nextAnalysisCountdown > 0 ? 'Next Analysis In' : 'Analysis Starting Soon'}
+                  </div>
+                </div>
+                <div className="bg-gray-700 rounded-full h-2">
+                  <div 
+                    className="bg-blue-500 h-2 rounded-full transition-all duration-1000"
+                    style={{
+                      width: status.analysisInterval > 0 ? 
+                        `${Math.max(0, 100 - (nextAnalysisCountdown / status.analysisInterval) * 100)}%` : 
+                        '0%'
+                    }}
+                  ></div>
+                </div>
+                <div className="text-xs text-gray-400 text-center">
+                  Analysis Interval: {Math.floor((status.analysisInterval || 0) / 60)}m
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Individual Timeframe Results */}
+          {status?.individualTimeframeResults && status.individualTimeframeResults.length > 0 && (
+            <div className="bg-gray-800 p-6 rounded-lg border border-gray-700">
+              <h3 className="text-xl font-bold text-white mb-4">Timeframe Analysis</h3>
+              <div className="space-y-2">
+                {status.individualTimeframeResults.map((result, index) => (
+                  <div key={index} className="flex items-center justify-between p-3 bg-gray-700/50 rounded-lg">
+                    <div className="flex items-center space-x-3">
+                      <span className="text-cyan-400 font-bold text-sm w-8">
+                        {timeframes.find(tf => tf.value === result.timeframe)?.label || result.timeframe}
+                      </span>
+                      <span className={`font-semibold text-sm px-2 py-1 rounded ${
+                        result.recommendation === 'BUY' ? 'bg-green-600/20 text-green-400' :
+                        result.recommendation === 'SELL' ? 'bg-red-600/20 text-red-400' :
+                        'bg-gray-600/20 text-gray-400'
+                      }`}>
+                        {result.recommendation}
+                      </span>
+                    </div>
+                    <div className="text-right">
+                      <div className="text-white font-semibold text-sm">
+                        {result.confidence}%
+                      </div>
+                      <div className="text-xs text-gray-400">
+                        confidence
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+              <div className="mt-4 p-3 bg-blue-600/10 border border-blue-600/30 rounded-lg">
+                <div className="text-xs text-blue-400">
+                  ✅ Last Updated: {status.individualTimeframeResults[0]?.timestamp ? 
+                    new Date(status.individualTimeframeResults[0].timestamp).toLocaleTimeString() : 
+                    'N/A'
+                  }
+                </div>
+              </div>
+            </div>
+          )}
+
           {/* Trading Metrics */}
           <div className="bg-gray-800 p-6 rounded-lg border border-gray-700">
             <h3 className="text-xl font-bold text-white mb-4">Trading Metrics</h3>