Fix automation v2 runtime errors and ES module compatibility

- Fixed EnhancedAILearningPanel React error with recommendation objects
- Converted automation-with-learning-v2.js to pure ES6 modules
- Fixed singleton automation instance management
- Resolved ES module/CommonJS compatibility issues
- Added proper null safety checks for learning system data
- Fixed API import paths for automation endpoints
- Enhanced learning status display with proper error handling

components/EnhancedAILearningPanel.tsx

@@ -1,4 +1,6 @@
 import React, { useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { TrendingUp } from 'lucide-react';
 
 interface LearningData {
   learningSystem: {
@@ -7,6 +9,23 @@ interface LearningData {
     activeDecisions?: number;
     message?: string;
     recommendation?: string;
+    persistentStats?: {
+      totalTrades: number;
+      successRate: number;
+      totalPnl: number;
+      winRate: number;
+    };
+    recentTrades?: Array<{
+      symbol: string;
+      type: string;
+      pnl: string;
+      updatedAt: string;
+    }>;
+    systemHealth?: {
+      totalDecisions: number;
+      recentDecisions: number;
+      lastActivity: string;
+    };
     report?: {
       summary?: {
         totalDecisions?: number;
@@ -42,25 +61,29 @@ const EnhancedAILearningPanel = () => {
     try {
       setLoading(true);
       
-      // Get both learning status and automation status
-      const [learningResponse, statusResponse] = await Promise.all([
+      // Get both learning status and persistent data (regardless of automation status)
+      const [learningResponse, statusResponse, persistentResponse] = await Promise.all([
         fetch('/api/automation/learning-status'),
-        fetch('/api/automation/status')
+        fetch('/api/automation/status'),
+        fetch('/api/learning/persistent-status')
       ]);
       
       const learningData = await learningResponse.json();
       const statusData = await statusResponse.json();
+      const persistentData = await persistentResponse.json();
       
-      // Ensure we have a proper data structure even if APIs return errors
+      // Merge persistent data with current learning status
       const safeData = {
-        learningSystem: learningData.learningSystem || {
-          enabled: false,
-          message: learningData.message || 'Learning system not available',
-          activeDecisions: 0
+        learningSystem: {
+          ...learningData.learningSystem,
+          // Always include persistent statistics
+          persistentStats: persistentData.success ? persistentData.statistics : null,
+          recentTrades: persistentData.success ? persistentData.recentTrades : [],
+          systemHealth: persistentData.success ? persistentData.systemHealth : null
         },
         visibility: learningData.visibility || {
           decisionTrackingActive: false,
-          learningDatabaseConnected: false,
+          learningDatabaseConnected: persistentData.success,
           aiEnhancementsActive: false,
           lastUpdateTime: new Date().toISOString()
         },
@@ -295,6 +318,111 @@ const EnhancedAILearningPanel = () => {
         </button>
       </div>
       
+      {/* Trading Performance Section - Always show if we have persistent data */}
+      {learningData?.learningSystem?.persistentStats && (
+        <motion.div 
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.3 }}
+          className="bg-gradient-to-br from-blue-900/30 to-purple-900/30 rounded-xl p-6 border border-blue-500/30 mb-6"
+        >
+          <h4 className="text-xl font-bold text-blue-300 mb-4 flex items-center gap-2">
+            <TrendingUp className="w-5 h-5" />
+            Trading Performance
+          </h4>
+          
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
+            <div className="bg-black/30 rounded-lg p-4 text-center">
+              <div className="text-2xl font-bold text-green-400">
+                {learningData.learningSystem.persistentStats.totalTrades}
+              </div>
+              <div className="text-sm text-gray-400">Total Trades</div>
+            </div>
+            
+            <div className="bg-black/30 rounded-lg p-4 text-center">
+              <div className="text-2xl font-bold text-blue-400">
+                {learningData.learningSystem.persistentStats.successRate?.toFixed(1)}%
+              </div>
+              <div className="text-sm text-gray-400">Success Rate</div>
+            </div>
+            
+            <div className="bg-black/30 rounded-lg p-4 text-center">
+              <div className={`text-2xl font-bold ${
+                learningData.learningSystem.persistentStats.totalPnl >= 0 ? 'text-green-400' : 'text-red-400'
+              }`}>
+                ${learningData.learningSystem.persistentStats.totalPnl?.toFixed(2)}
+              </div>
+              <div className="text-sm text-gray-400">Total P&L</div>
+            </div>
+            
+            <div className="bg-black/30 rounded-lg p-4 text-center">
+              <div className="text-2xl font-bold text-yellow-400">
+                {learningData.learningSystem.persistentStats.winRate?.toFixed(0)}%
+              </div>
+              <div className="text-sm text-gray-400">Win Rate</div>
+            </div>
+          </div>
+
+          {/* Recent Trades */}
+          {learningData.learningSystem.recentTrades && learningData.learningSystem.recentTrades.length > 0 && (
+            <div className="mt-6">
+              <h5 className="text-lg font-semibold text-blue-300 mb-3">Recent Trades</h5>
+              <div className="space-y-2 max-h-64 overflow-y-auto">
+                {learningData.learningSystem.recentTrades.map((trade: any, index: number) => (
+                  <div key={index} className="bg-black/20 rounded-lg p-3 flex justify-between items-center">
+                    <div className="flex items-center gap-3">
+                      <span className="text-sm font-medium text-gray-300">{trade.symbol}</span>
+                      <span className={`text-xs px-2 py-1 rounded ${
+                        trade.type === 'long' ? 'bg-green-900/50 text-green-300' : 'bg-red-900/50 text-red-300'
+                      }`}>
+                        {trade.type?.toUpperCase()}
+                      </span>
+                    </div>
+                    <div className="text-right">
+                      <div className={`text-sm font-semibold ${
+                        parseFloat(trade.pnl) >= 0 ? 'text-green-400' : 'text-red-400'
+                      }`}>
+                        ${parseFloat(trade.pnl).toFixed(2)}
+                      </div>
+                      <div className="text-xs text-gray-500">
+                        {new Date(trade.updatedAt).toLocaleDateString()}
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* System Health */}
+          {learningData.learningSystem.systemHealth && (
+            <div className="mt-6 p-4 bg-black/20 rounded-lg">
+              <h5 className="text-lg font-semibold text-blue-300 mb-2">System Health</h5>
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
+                <div>
+                  <span className="text-gray-400">AI Decisions:</span>
+                  <span className="ml-2 text-white font-medium">
+                    {learningData.learningSystem.systemHealth.totalDecisions?.toLocaleString()}
+                  </span>
+                </div>
+                <div>
+                  <span className="text-gray-400">Recent Activity:</span>
+                  <span className="ml-2 text-white font-medium">
+                    {learningData.learningSystem.systemHealth.recentDecisions} decisions
+                  </span>
+                </div>
+                <div>
+                  <span className="text-gray-400">Last Updated:</span>
+                  <span className="ml-2 text-white font-medium">
+                    {new Date(learningData.learningSystem.systemHealth.lastActivity).toLocaleTimeString()}
+                  </span>
+                </div>
+              </div>
+            </div>
+          )}
+        </motion.div>
+      )}
+      
       {renderLearningStatus()}
       
       {visibility?.lastUpdateTime && (