Add full analysis modal for traders

components/mission-control/TradingPanel.tsx

@@ -65,6 +65,7 @@ export function TradingPanel() {
   const [activeTab, setActiveTab] = useState<TradingTab>('research')
   const [traders, setTraders] = useState<Trader[]>(defaultTraders)
   const [selectedTrader, setSelectedTrader] = useState<string>('dopetrades')
+  const [showFullAnalysis, setShowFullAnalysis] = useState<string | null>(null)
   const [trades, setTrades] = useState<Trade[]>([])
   const [journalFilter, setJournalFilter] = useState<'all' | 'demo' | 'real'>('all')
 
@@ -173,7 +174,7 @@ export function TradingPanel() {
                 )}
                 <button 
                   className="mt-3 text-sm text-brand-pink hover:underline"
-                  onClick={() => setSelectedTrader(trader.id)}>
+                  onClick={() => setShowFullAnalysis(trader.id)}>
                   View full analysis →
                 </button>
               </div>
@@ -349,6 +350,128 @@ export function TradingPanel() {
           </div>
         </div>
       )}
+
+      {/* Full Analysis Modal */}
+      {showFullAnalysis && (
+        <div className="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-center justify-center p-4">
+          <div className="bg-[#1a1625] border border-white/20 rounded-xl max-w-2xl w-full max-h-[80vh] overflow-y-auto">
+            {(() => {
+              const trader = traders.find(t => t.id === showFullAnalysis)
+              if (!trader) return null
+              return (
+                <div className="p-6">
+                  <div className="flex justify-between items-start mb-6">
+                    <div>
+                      <h2 className="text-2xl font-bold text-white">{trader.name}</h2>
+                      <p className="text-white/50">{trader.framesAnalyzed} frames analyzed • {trader.status}</p>
+                    </div>
+                    <button 
+                      onClick={() => setShowFullAnalysis(null)}
+                      className="text-white/50 hover:text-white text-2xl"
+                    >
+                      ×
+                    </button>
+                  </div>
+
+                  <div className="space-y-6">
+                    {/* Patterns */}
+                    <div>
+                      <h3 className="text-brand-pink font-medium mb-2">📊 Patterns</h3>
+                      <div className="flex flex-wrap gap-2">
+                        {trader.patterns.map(p => (
+                          <span key={p} className="px-3 py-1 bg-white/10 rounded-full text-sm text-white/80">{p}</span>
+                        ))}
+                      </div>
+                    </div>
+
+                    {/* Entry Rules */}
+                    <div>
+                      <h3 className="text-green-400 font-medium mb-2">✅ Entry Rules</h3>
+                      <ul className="space-y-1">
+                        {trader.entryRules.map((r, i) => (
+                          <li key={i} className="text-white/80 text-sm flex gap-2">
+                            <span className="text-green-400">•</span>
+                            {r}
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+
+                    {/* Exit Rules */}
+                    <div>
+                      <h3 className="text-red-400 font-medium mb-2">🚪 Exit Rules</h3>
+                      <ul className="space-y-1">
+                        {trader.exitRules.map((r, i) => (
+                          <li key={i} className="text-white/80 text-sm flex gap-2">
+                            <span className="text-red-400">•</span>
+                            {r}
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+
+                    {/* Indicators */}
+                    <div>
+                      <h3 className="text-blue-400 font-medium mb-2">📈 Indicators</h3>
+                      <div className="flex flex-wrap gap-2">
+                        {trader.indicators.map(i => (
+                          <span key={i} className="px-3 py-1 bg-blue-500/10 border border-blue-500/20 rounded-full text-sm text-blue-300">{i}</span>
+                        ))}
+                      </div>
+                    </div>
+
+                    {/* Risk Params */}
+                    <div>
+                      <h3 className="text-yellow-400 font-medium mb-2">⚠️ Risk Parameters</h3>
+                      <ul className="space-y-1">
+                        {trader.riskParams.map((r, i) => (
+                          <li key={i} className="text-white/80 text-sm flex gap-2">
+                            <span className="text-yellow-400">•</span>
+                            {r}
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+
+                    {/* Timeframe */}
+                    <div>
+                      <h3 className="text-purple-400 font-medium mb-2">⏱️ Timeframe</h3>
+                      <p className="text-white/80">{trader.timeframe}</p>
+                    </div>
+
+                    {/* Notes */}
+                    {trader.notes && (
+                      <div>
+                        <h3 className="text-white/50 font-medium mb-2">📝 Notes</h3>
+                        <p className="text-white/70 text-sm italic">{trader.notes}</p>
+                      </div>
+                    )}
+                  </div>
+
+                  <div className="mt-6 pt-4 border-t border-white/10 flex gap-3">
+                    <button 
+                      onClick={() => {
+                        setSelectedTrader(trader.id)
+                        setShowFullAnalysis(null)
+                        setActiveTab('strategies')
+                      }}
+                      className="flex-1 py-2 bg-brand-pink text-white rounded-lg font-medium hover:bg-brand-pink/80 transition"
+                    >
+                      Use This Strategy →
+                    </button>
+                    <button 
+                      onClick={() => setShowFullAnalysis(null)}
+                      className="px-4 py-2 border border-white/20 text-white/70 rounded-lg hover:text-white transition"
+                    >
+                      Close
+                    </button>
+                  </div>
+                </div>
+              )
+            })()}
+          </div>
+        </div>
+      )}
     </div>
   )
 }