Display executionPlan in UI; add tests for Trader executionPlan parsing and TradingGraph execution step

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

app/routes/analyze.ticker.tsx

@@ -1,6 +1,8 @@
+import { useState, useEffect } from "react";
 import { useLoaderData, useNavigate, useLocation } from "react-router";
 import TradingViewChart from "../components/TradingViewChart";
 import Navbar from "../components/Navbar";
+import type { TradingDecision, AnalystReport, DebateRound } from "../types/agents";
 
 export const meta = () => [{ title: "Stock Detail - AITrader" }];
 
@@ -14,6 +16,7 @@ interface LoaderData {
 }
 
 const TIMEFRAMES = [
+  { value: "1Min", label: "1 Minute" },
   { value: "1D", label: "1 Day" },
   { value: "5Min", label: "5 Min" },
   { value: "15Min", label: "15 Min" },
@@ -73,6 +76,31 @@ export default function StockDetail() {
   const { ticker, position, orders, bars, timeframe, range } = useLoaderData() as LoaderData;
   const navigate = useNavigate();
   const location = useLocation();
+  
+  const [analysisLoading, setAnalysisLoading] = useState(false);
+  const [analystReports, setAnalystReports] = useState<AnalystReport[]>([]);
+  const [debateRounds, setDebateRounds] = useState<DebateRound[]>([]);
+  const [decision, setDecision] = useState<TradingDecision | null>(null);
+  const [showAnalysts, setShowAnalysts] = useState(false);
+  const [showDebate, setShowDebate] = useState(false);
+
+  // Cache key for this ticker
+  const cacheKey = `tradinggraph-${ticker}`;
+
+  // Load cached results on mount
+  useEffect(() => {
+    const cached = sessionStorage.getItem(cacheKey);
+    if (cached) {
+      try {
+        const data = JSON.parse(cached);
+        if (data.analystReports) setAnalystReports(data.analystReports);
+        if (data.debateRounds) setDebateRounds(data.debateRounds);
+        if (data.decision) setDecision(data.decision);
+      } catch (e) {
+        console.error("Failed to parse cached trading graph data:", e);
+      }
+    }
+  }, [cacheKey]);
 
   const updateParams = (newTimeframe: string, newRange: string) => {
     const searchParams = new URLSearchParams(location.search);
@@ -81,6 +109,46 @@ export default function StockDetail() {
     navigate(`${location.pathname}?${searchParams.toString()}`, { replace: true });
   };
 
+  const runTradingGraph = async () => {
+    setAnalysisLoading(true);
+    setAnalystReports([]);
+    setDebateRounds([]);
+    setDecision(null);
+    
+    try {
+      const res = await fetch("/api/analyze", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ ticker }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Analysis failed");
+      
+      const reports = data.agentSignals.map((sig: any) => ({
+        analyst: sig.agent,
+        signal: sig,
+        report: sig.reasoning,
+      }));
+      const debates = data.debateRounds || [];
+      
+      setAnalystReports(reports);
+      setDebateRounds(debates);
+      setDecision(data);
+      
+      // Cache the results
+      sessionStorage.setItem(cacheKey, JSON.stringify({
+        analystReports: reports,
+        debateRounds: debates,
+        decision: data,
+        timestamp: Date.now(),
+      }));
+    } catch (err) {
+      console.error("Analysis error:", err);
+    } finally {
+      setAnalysisLoading(false);
+    }
+  };
+
   // Convert Alpaca bars to TradingView format
   // Keep full timestamp for intraday, use date-only for daily
   // Sort bars by timestamp to ensure ascending order
@@ -147,7 +215,15 @@ export default function StockDetail() {
             </select>
           </div>
           
-          <TradingViewChart ticker={ticker} data={chartData} />
+          <TradingViewChart ticker={ticker} data={chartData} timeframe={timeframe} />
+          
+          <button
+            onClick={runTradingGraph}
+            disabled={analysisLoading}
+            className="mt-4 bg-purple-600 text-white px-6 py-2.5 rounded-lg font-medium hover:bg-purple-700 disabled:opacity-50 transition-colors"
+          >
+            {analysisLoading ? "Running Trading Graph..." : "Run Trading Graph Analysis"}
+          </button>
         </div>
         
         <div className="mt-6 bg-white rounded-xl shadow-lg p-6 border border-gray-200">
@@ -182,6 +258,133 @@ export default function StockDetail() {
           )}
         </div>
         
+        {(analystReports.length > 0 || debateRounds.length > 0 || decision) && (
+          <div className="mt-6 bg-white rounded-xl shadow-lg p-6 border border-gray-200">
+            <div className="flex items-center justify-between mb-4">
+              <h2 className="text-xl font-bold text-gray-900">Trading Graph Workflow</h2>
+              {sessionStorage.getItem(cacheKey) && (
+                <span className="text-xs text-gray-500 bg-gray-100 px-2 py-1 rounded">
+                  Cached results
+                </span>
+              )}
+            </div>
+            
+            {/* Analysts Step - Collapsible */}
+            {analystReports.length > 0 && (
+              <div className="mb-4">
+                <button
+                  onClick={() => setShowAnalysts(!showAnalysts)}
+                  className="w-full flex items-center justify-between p-3 bg-gray-50 rounded-lg border border-gray-200 hover:bg-gray-100 transition-colors"
+                >
+                  <h3 className="text-lg font-semibold text-gray-800 flex items-center gap-2">
+                    <span className="bg-blue-100 text-blue-800 w-6 h-6 rounded-full flex items-center justify-center text-sm">1</span>
+                    Analyst Reports
+                  </h3>
+                  <span className="text-gray-500">{showAnalysts ? "▼" : "▶"}</span>
+                </button>
+                {showAnalysts && (
+                  <div className="mt-3 space-y-3 pl-4">
+                    {analystReports.map((report, i) => (
+                      <div key={i} className="bg-gray-50 rounded-lg p-3 border border-gray-200">
+                        <div className="flex justify-between items-center mb-2">
+                          <span className="font-medium text-gray-900 capitalize">{report.analyst}</span>
+                          <span className={`text-sm font-medium ${
+                            report.signal?.signal === "bullish" ? "text-green-600" :
+                            report.signal?.signal === "bearish" ? "text-red-600" : "text-gray-600"
+                          }`}>
+                            {report.signal?.signal} ({(report.signal?.confidence * 100).toFixed(0)}%)
+                          </span>
+                        </div>
+                        <p className="text-sm text-gray-600">{report.signal?.reasoning}</p>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            )}
+            
+            {/* Debate Step - Collapsible */}
+            {debateRounds.length > 0 && (
+              <div className="mb-4">
+                <button
+                  onClick={() => setShowDebate(!showDebate)}
+                  className="w-full flex items-center justify-between p-3 bg-gray-50 rounded-lg border border-gray-200 hover:bg-gray-100 transition-colors"
+                >
+                  <h3 className="text-lg font-semibold text-gray-800 flex items-center gap-2">
+                    <span className="bg-purple-100 text-purple-800 w-6 h-6 rounded-full flex items-center justify-center text-sm">2</span>
+                    Research Debate
+                  </h3>
+                  <span className="text-gray-500">{showDebate ? "▼" : "▶"}</span>
+                </button>
+                {showDebate && (
+                  <div className="mt-3 space-y-3 pl-4">
+                    {debateRounds.map((round, i) => (
+                      <div key={i} className="border border-gray-200 rounded-lg p-3">
+                        <div className="mb-2">
+                          <span className="text-green-600 font-medium text-sm">Bullish View:</span>
+                          <p className="text-sm text-gray-700 mt-1">{round.bullishView}</p>
+                        </div>
+                        <div>
+                          <span className="text-red-600 font-medium text-sm">Bearish View:</span>
+                          <p className="text-sm text-gray-700 mt-1">{round.bearishView}</p>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            )}
+            
+            {/* Decision Step - Always Visible */}
+            {decision && (
+              <div>
+                <h3 className="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
+                  <span className="bg-green-100 text-green-800 w-6 h-6 rounded-full flex items-center justify-center text-sm">3</span>
+                  Final Decision
+                </h3>
+                <div className="bg-gray-50 rounded-lg p-4 border border-gray-200">
+                  <div className="flex items-center gap-4 mb-3">
+                    <span className="text-gray-600">Action:</span>
+                    <span className={`font-bold text-lg ${
+                      decision.action === "buy" ? "text-green-600" :
+                      decision.action === "sell" ? "text-red-600" : "text-gray-600"
+                    }`}>
+                      {decision.action.toUpperCase()}
+                    </span>
+                    <span className="text-gray-600">Confidence:</span>
+                    <span className="font-medium">{(decision.confidence * 100).toFixed(0)}%</span>
+                  </div>
+                  {decision.reasoning && (
+                    <div>
+                      <p className="text-gray-800">{decision.reasoning}</p>
+                      {decision.executionPlan && (
+                        <div className="mt-3 border-t pt-3">
+                          <h4 className="text-sm font-medium text-gray-800 mb-2">Execution Plan</h4>
+                          <div className="text-sm text-gray-700 space-y-1">
+                            <div>Amount: <span className="font-medium">{decision.executionPlan.amount} shares</span></div>
+                            {decision.executionPlan.takeProfit != null && (
+                              <div>Take profit: <span className="font-medium">${decision.executionPlan.takeProfit}</span></div>
+                            )}
+                            {decision.executionPlan.riskManagement?.maxLossPercent != null && (
+                              <div>Risk management: <span className="font-medium">{decision.executionPlan.riskManagement.maxLossPercent}% max loss</span></div>
+                            )}
+                            {decision.executionPlan.riskManagement?.method && (
+                              <div>Method: <span className="font-medium">{decision.executionPlan.riskManagement.method}</span></div>
+                            )}
+                            {decision.executionPlan.note && (
+                              <div>Note: <span className="font-medium">{decision.executionPlan.note}</span></div>
+                            )}
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+        
         <div className="mt-6 bg-white rounded-xl shadow-lg p-6 border border-gray-200">
           <h2 className="text-xl font-bold text-gray-900 mb-4">Recent Orders</h2>
           {orders.length === 0 ? (