feat: rebuild trader detail UI with tabs and manual recalculate button

src/Predictalytics.Api/wwwroot/js/app.js

@@ -346,6 +346,9 @@ async function viewTrader(id) {
     const t = await api(`/api/traders/${id}`);
     if (!t) return;
 
+    // Reset tabs to default (Analytics)
+    switchTraderTab('td-tab-analytics');
+
     document.getElementById('td-name').textContent = t.displayName;
     document.getElementById('td-platform').textContent = t.platform;
     document.getElementById('td-platformId').textContent = t.platformUserId;
@@ -360,11 +363,26 @@ async function viewTrader(id) {
     const refreshBtn = document.getElementById('btn-refresh-trader');
     refreshBtn.onclick = () => manualUpdateTrader(id);
 
+    const forceBtn = document.getElementById('btn-force-analyze');
+    if(forceBtn) {
+        forceBtn.onclick = async () => {
+            forceBtn.disabled = true;
+            forceBtn.textContent = '...';
+            try {
+                await api(`/api/traders/${id}/force-analyze`, { method: 'POST' });
+                alert('Deep Analysis queued! Please wait a moment and then refresh.');
+            } finally {
+                forceBtn.disabled = false;
+                forceBtn.textContent = 'Recalculate';
+            }
+        };
+    }
+
     const aiBtn = document.getElementById('btn-ai-analysis');
     aiBtn.onclick = () => triggerAiAnalysis(id, true);
 
     const wlBtn = document.getElementById('btn-toggle-watchlist');
-    wlBtn.textContent = t.isOnWatchlist ? '★ Watchlist (Remove)' : '☆ Watchlist (Add)';
+    wlBtn.textContent = t.isOnWatchlist ? 'Watchlist (Remove)' : 'Watchlist (Add)';
     wlBtn.onclick = async () => {
         const method = t.isOnWatchlist ? 'DELETE' : 'POST';
         await api(`/api/traders/${id}/watchlist`, { method });
@@ -385,6 +403,7 @@ async function viewTrader(id) {
         catBody.innerHTML = t.categoryPerformances.map(c => `
             <tr>
                 <td>${c.category}</td>
+                <td>${c.subcategory || '-'}</td>
                 <td>${fmt.pct(c.winRate)}</td>
                 <td>${fmt.pnl(c.totalPnL)}</td>
                 <td>${fmt.usd(c.totalVolume)}</td>
@@ -392,7 +411,7 @@ async function viewTrader(id) {
             </tr>
         `).join('');
     } else {
-        catBody.innerHTML = '<tr><td colspan="5" style="text-align:center; padding:16px; color:var(--text-muted)">No category data available</td></tr>';
+        catBody.innerHTML = '<tr><td colspan="6" style="text-align:center; padding:16px; color:var(--text-muted)">No category data available</td></tr>';
     }
 
     const tbody = document.getElementById('td-tradesBody');
@@ -410,6 +429,18 @@ async function viewTrader(id) {
     `).join('');
 }
 
+function switchTraderTab(tabId) {
+    // Hide all tabs
+    document.querySelectorAll('.tab-content').forEach(el => el.style.display = 'none');
+    // Deactivate all buttons
+    document.querySelectorAll('.btn-tab').forEach(el => el.classList.remove('active'));
+    // Show active tab
+    document.getElementById(tabId).style.display = 'block';
+    // Activate clicked button
+    const btn = document.querySelector(`.btn-tab[data-tab="${tabId}"]`);
+    if(btn) btn.classList.add('active');
+}
+
 async function viewMarket(id) {
     navigateTo('market-detail');
     const m = await api(`/api/markets/${id}`);