add buttons to start and stop training, and start and stop trading. in the header add a Paper/Live toggle

components/navbar.js

@@ -81,11 +81,17 @@ class CustomNavbar extends HTMLElement {
           <li><a href="#"><i data-feather="briefcase"></i> Portfolio</a></li>
           <li><a href="#"><i data-feather="file-text"></i> Reports</a></li>
         </ul>
-        <div class="user-menu">
-          <div class="balance">$12,345.67</div>
-          <div class="avatar">JD</div>
+        <div class="flex items-center gap-4">
+          <div class="flex items-center bg-gray-700 rounded-full p-1">
+            <button class="px-3 py-1 rounded-full bg-gray-800 text-sm text-white" id="paper-mode">Paper</button>
+            <button class="px-3 py-1 rounded-full text-sm text-gray-400" id="live-mode">Live</button>
+          </div>
+          <div class="user-menu">
+            <div class="balance">$12,345.67</div>
+            <div class="avatar">JD</div>
+          </div>
         </div>
-      </nav>
+</nav>
     `;
   }
 }

components/tradingbot-panel.js

@@ -80,9 +80,16 @@ class TradingBotPanel extends HTMLElement {
       </style>
       <div class="panel-header">
         <div class="panel-title">RL Trading Bot Trainer</div>
+        <div class="flex gap-2">
+          <button class="px-2 py-1 bg-gray-700 rounded text-xs hover:bg-gray-600" id="start-trading">
+            <i data-feather="play"></i> Start
+          </button>
+          <button class="px-2 py-1 bg-gray-700 rounded text-xs hover:bg-gray-600" id="stop-trading" disabled>
+            <i data-feather="stop-circle"></i> Stop
+          </button>
+        </div>
       </div>
-      
-      <div class="form-group">
+<div class="form-group">
         <label for="bot-strategy">Strategy</label>
         <select id="bot-strategy">
           <option value="qlearning">Q-Learning</option>
@@ -125,9 +132,26 @@ class TradingBotPanel extends HTMLElement {
           <i data-feather="stop-circle"></i> Stop
         </button>
       </div>
-      
+      <div class="mt-4 border-t border-gray-700 pt-4">
+        <h4 class="text-sm font-medium mb-2">Trading Status</h4>
+        <div class="bg-gray-700 rounded p-2 text-sm">
+          <div class="flex justify-between mb-1">
+            <span>Current Position:</span>
+            <span id="current-position">None</span>
+          </div>
+          <div class="flex justify-between mb-1">
+            <span>Last Action:</span>
+            <span id="last-action">-</span>
+          </div>
+          <div class="flex justify-between">
+            <span>Running:</span>
+            <span id="running-status">No</span>
+          </div>
+        </div>
+      </div>
+
       <div class="metrics">
-        <div class="metric-row">
+<div class="metric-row">
           <span class="metric-label">Current Episode:</span>
           <span class="metric-value" id="current-episode">0/100</span>
         </div>

script.js

@@ -79,11 +79,14 @@ function stopTrainingBot() {
   document.getElementById('stop-training').disabled = true;
   document.getElementById('training-status').textContent = 'Stopped';
 }
-
 // Initialize bot controls
 document.addEventListener('DOMContentLoaded', () => {
   const startBtn = document.getElementById('start-training');
   const stopBtn = document.getElementById('stop-training');
+  const startTradingBtn = document.getElementById('start-trading');
+  const stopTradingBtn = document.getElementById('stop-trading');
+  const paperModeBtn = document.getElementById('paper-mode');
+  const liveModeBtn = document.getElementById('live-mode');
   
   if (startBtn) {
     startBtn.addEventListener('click', startTrainingBot);
@@ -92,6 +95,42 @@ document.addEventListener('DOMContentLoaded', () => {
   if (stopBtn) {
     stopBtn.addEventListener('click', stopTrainingBot);
   }
+
+  // Trading buttons
+  if (startTradingBtn) {
+    startTradingBtn.addEventListener('click', () => {
+      startTradingBtn.disabled = true;
+      stopTradingBtn.disabled = false;
+      document.getElementById('running-status').textContent = 'Yes';
+      document.getElementById('last-action').textContent = 'Started trading';
+    });
+  }
+
+  if (stopTradingBtn) {
+    stopTradingBtn.addEventListener('click', () => {
+      startTradingBtn.disabled = false;
+      stopTradingBtn.disabled = true;
+      document.getElementById('running-status').textContent = 'No';
+      document.getElementById('last-action').textContent = 'Stopped trading';
+    });
+  }
+
+  // Paper/Live toggle
+  if (paperModeBtn && liveModeBtn) {
+    paperModeBtn.addEventListener('click', () => {
+      paperModeBtn.classList.add('bg-gray-800', 'text-white');
+      paperModeBtn.classList.remove('text-gray-400');
+      liveModeBtn.classList.remove('bg-gray-800', 'text-white');
+      liveModeBtn.classList.add('text-gray-400');
+    });
+
+    liveModeBtn.addEventListener('click', () => {
+      liveModeBtn.classList.add('bg-gray-800', 'text-white');
+      liveModeBtn.classList.remove('text-gray-400');
+      paperModeBtn.classList.remove('bg-gray-800', 'text-white');
+      paperModeBtn.classList.add('text-gray-400');
+    });
+  }
 });
 // Simulate live price updates
 function startLivePrices() {

style.css

@@ -71,6 +71,11 @@ body {
     50% { opacity: 0; }
     100% { opacity: 1; }
 }
+/* Trading mode toggle */
+#paper-mode, #live-mode {
+  transition: all 0.2s ease;
+}
+
 /* Custom table styling */
 table {
     border-collapse: separate;